@font-face {
    font-family: 'Titillium';
    font-style: normal;
    font-weight: normal;
    src: local('Titillium Regular'), url('/fonts/Titillium-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel Regular'), local('Abel-Regular'), url(/fonts/abel.ttf) format('truetype');
}

@font-face {
    font-family: 'Moderna';
    font-style: normal;
    font-weight: normal;
    src: local('Moderna'), url('/fonts/MODERNA_.TTF') format('truetype');
}

@font-face {
  font-family: 'Sax';
  src: local('Sax'), url('/fonts/saxmono.ttf') format('truetype');
}

@font-face {
  font-family: 'Jura';
  src: local('Jura'), url('/fonts/Jura.ttf') format('truetype');
}

@font-face {
  font-family: 'Diavlo';
  src: url('/fonts/Diavlo_BOOK_II_37.otf');
}

.Jright {
	text-align:right;
	white-space:nowrap;
	
}

.Jleft {
	text-align:left;
	white-space:nowrap;
	
}
p,input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

a:link
{
	color: #18E000;
	text-decoration:none;
	font-weight:bold; 
}
a:visited
{
	color: #18E000;
	text-decoration:none; 
} 
a:active 
{
	color: #18E000;
	text-decoration:none; 
}
a:hover 
{
	color: #5FFF4C;
	font-weight: bolder;
}

.documentation {
	font-style:italic;
	color:cadetblue;
}

body
{
	/*font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;*/
	font-family: 'Jura';
	font-size: 28px;
	color: #FFFFFF;
	border-right: thin solid #000000;
	background-color: #000000;
	width: 100%;
	margin: 0;
	padding: 5px;
}

h1, h2, h3, h4, h5, h6
{
	font-family: 'Diavlo';
}

.large { font-size:x-large; }

#corners {
    border-radius: 8px;
    border: 2px solid #8BED00;
    padding: 5px;
}

#corners2 {
    border-radius: 10px;
    border: 0px;
    padding: 4px;
}

#corners3 {
    border-radius: 8px;
    border: 4px solid #FFFFFF;
    padding: 4px;
}

.tb-std {
    background-color : #ffffff;
    border: 1px solid #008000;
    color: black;
    border-color:silver;
   
}
.sred {
	color: #000000;
	background-color: #FF0000;
}
.little {
	font-family: "Courier New", Courier, monospace;
	font-size: x-small;
}
.smaller {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-size: small;
}

.SMALLHEAD {
	font-family: Arial;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
}
.R
{
	color: #000000;
	background-color: #FF0004;
}
.G
{
	color: #000000;
	background-color: #13FF00;
}

.GB { color:white;
	background-color:#063401;
}
.B
{
	color: #FFFFFF;
	background-color: #0032FF;
}
.Y
{
	color: #000000;
	background-color: #F9FF00;
}
.P
{
	color: #FFFFFF;
	background-color: #C300FF;
}
.X
{
	color: #FFFFFF;
	background-color: #000000;
}

.GREY1
{
	background-color:#D1D1D1;
}

.GREY2
{
	background-color:#B6B6B6;
    color:black;
}

.GREY3
{
	background-color:#888888;
}

.GREY4
{
	background-color:#636363;
}

.GREY5
{
	background-color:#222222;
}
.GREY6
{
	background-color:#111111;
}

.GreenText
{
	color:#13FF00;
}

.GreyText1
{
	color:#202020;
}

.GreyText2
{
	color:#404040;
}

.RedText1
{
	color:#FF0000;
}
.OrangeText1
{
	color:#FF5D26;
}
.GreenText1
{
	color:#00FF00;
}
.RedText2
{
	color:#8C0000;
}
.OrangeText2
{
	color:#933110;
}
.GreenText2
{
	color:#007900;
}

.YellowText1
{
    color:#D3FF00;
}
.YellowText2
{
    color:#988E00;
}

.HEADING
{
	font-size: xx-large;
	font-family: 'Sax';
	font-style: normal;
	font-weight: bold;
}
.ORANGE
{
	background-color:#FF9900;
}

.WARNING
{
	background-color:#FF0000;
	Color:#FFFFFF;
}

.NORMAL
{
	background-color:#036B07;
	Color:#ffffff;
}

.BarelyThere
{
	color:#101010;
	font-size: x-small;
}

.Grad1
{
background: #087a00;
background: -moz-linear-gradient(-45deg, #087a00 0%, #b4ddb4 100%);
background: -webkit-linear-gradient(-45deg, #087a00 0%,#b4ddb4 100%);
background: linear-gradient(135deg, #087a00 0%,#b4ddb4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#087a00', endColorstr='#b4ddb4',GradientType=1 );
}

.Grad2
{
background: rgb(30,87,153);
background: -moz-linear-gradient(-45deg, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
background: linear-gradient(135deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
}

.Grad3
{
background: rgb(17,86,17);
background: -moz-linear-gradient(-45deg, rgba(17,86,17,1) 0%, rgba(0,87,0,1) 35%, rgba(0,36,0,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(17,86,17,1) 0%,rgba(0,87,0,1) 35%,rgba(0,36,0,1) 100%);
background: linear-gradient(135deg, rgba(17,86,17,1) 0%,rgba(0,87,0,1) 35%,rgba(0,36,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#115611', endColorstr='#002400',GradientType=1 );
}

.Grad4
{
background: rgb(76,76,76);
background: -moz-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
background: linear-gradient(135deg, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
}

.Grad5
{
background: #fc9b00;
background: -moz-linear-gradient(left, #fc9b00 0%, #fc9b00 63%, #b53900 100%);
background: -webkit-linear-gradient(left, #fc9b00 0%,#fc9b00 63%,#b53900 100%);
background: linear-gradient(to right, #fc9b00 0%,#fc9b00 63%,#b53900 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc9b00', endColorstr='#b53900',GradientType=1 );
}

.Grad6
{
background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #9e9e9e 100%);
background: -webkit-linear-gradient(left,  #000000 0%,#9e9e9e 100%);
background: linear-gradient(to right,  #000000 0%,#9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#9e9e9e',GradientType=1 );
}

.Grad7
{
background: #c90407; /* Old browsers */
background: -moz-linear-gradient(left,  #c90407 0%, #b50306 44%, #6d0019 100%);
background: -webkit-linear-gradient(left,  #c90407 0%,#b50306 44%,#6d0019 100%); 
background: linear-gradient(to right,  #c90407 0%,#b50306 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c90407', endColorstr='#6d0019',GradientType=1 ); 
}
.Grad8 {
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,159,117,1) 51%, rgba(0,0,0,1) 100%);	
}

.ERROR {
    color:#ffffff;
    background:#ff2200;
    font-weight:bold;

}

.BASICBUTTON {
	border-radius:5px; 
	padding:5px;
	text-align: center;
	cursor: pointer;
}

.BUTTON1 {
	width: 200px; 
	background-color: MediumSeaGreen;
	border-radius: 12px;
	border: red;
	color: white;
	padding: 2px 0px;
	text-align: center;
	margin: 0px 0px;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;	
}

.BUTTON2 {
	width: 200px; 
	background-color: DodgerBlue;
	border-radius: 12px;
	border: red;
	color: white;
	padding: 2px 0px;
	text-align: center;
	margin: 0px 0px;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;	
}

.BUTTON3 {
	width: 200px; 
	background-color: SlateBlue;
	border-radius: 12px;
	border: red;
	color: white;
	padding: 2px 0px;
	text-align: center;
	margin: 0px 0px;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;	
}

.BUTTON4 {
	width: 200px; 
	background-color: Tomato;
	border-radius: 12px;
	border: red;
	color: white;
	padding: 2px 0px;
	text-align: center;
	margin: 0px 0px;
	/*opacity: 0.6;*/
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;	
}

.BUTTON5 {
	width: 300px; 
	background-color: MediumSeaGreen;
	border-radius: 12px;
	border: red;
	color: white;
	padding: 10px 10px;
	text-align: center;
	margin: 0px 0px;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;	
}

@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);
          border-radius:20px;
     }
     100% {
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
          border-radius:20px;
     }
}

.pulsingbutton {
    animation: shadow-pulse 1s infinite;
}

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, textarea:focus {
  box-shadow: 0 0 10px rgba(81, 203, 238, 1);

}

table.greenborder {
    border-collapse:separate;
    border:solid #063401 10px;
    border-radius: 20px;
	border-spacing: 2px;
	padding: 2px;
	margin:4px
}

table.orangeborder {
    border-collapse:separate;
    border:solid orange 10px;
    border-radius: 20px;
	border-spacing: 2px;
	padding: 2px;
	margin:4px
}

.typewriter {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 10s steps(100, end);
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #101010;
  margin: auto;
  padding: 20px;
  border: 5px solid lawngreen;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.secBlur,
.secBlur:focus {
  color: transparent;
  text-shadow: 0 0 10px #FFF;
}

.secBlur:hover {
	color:lawngreen;
	text-shadow: None;
}

.s9 {
	background-color:#ff0000;
	color:white;
}
.s8 {
	background-color:#E12F1C;
	color:white;
}
.s7 {
	background-color:#e74c3c;
	color:white;
}
.s6 {
	background-color:#e67e22;
	color:black;
}
.s5 {
	background-color:#d4ac0d;
	color:black;
}
.s4 {
	background-color:#9a7d0a ;
	color:white;
}
.s3 {
	background-color:#0e6251;
	color:white;
}
.s2 {
	background-color:#117a65;
	color:white;
}
.s1 {
	background-color:#239b56;
	color:white;
}
.s0 {
	background-color:#121920;
	color:white;
}

@keyframes flashingframes {
 0% { opacity: 0; }
 50% { opacity: 1; }
 100% { opacity: 0; }
}

.flashing {
 color: white;
 animation: flashingframes 1s linear infinite;
}

.buttonclass {
	background: #222222;
	color: white;
	display: inline-block;
	font: bold 15px/1.4 Arial, Helvetica, sans-serif;
	padding: 5px 15px;
	width: 100px;
}

.label {
	display:inline-block;
	width:170px;
	padding-left:5px;
 }

.grid-container {
	width:98%;
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: auto auto auto auto auto auto auto;
	gap: 0px;
	padding: 5px;
	justify-content: center;
}

.grid-item {
	/*background-color: #f2f2f2;*/
	padding: 0px;
	text-align: center;
	margin: 0.5rem;
}

@media (max-width: 600px) {
   .grid-container {
	  grid-template-columns: auto;
	}
}
.radio {
	position:relative;
	transform: scale(1.5);
}

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #222222;
	opacity: 0.8;
    padding: 15px 20px;
    /*font-family: sans-serif, Arial;*/
    font-size: 32px;
    border: 5px solid black;
    border-radius: 10px;
}

.radio-toolbar label:hover {
  background-color: #004400;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #004400;
    border-color: #00ff00;
}

.menubutton {
    padding: 15px 20px;
	font-family: 'Jura';
    font-size: 32px;
    border: 5px solid black;
    border-radius: 10px;	
	background-color: rgba(0, 0, 0, 0.5);
	display:inline-block;
	width:210px;
	color:white;
}

input, select, textarea {
	color:white;
    font-size:24px;
	background-color:#222222;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

@keyframes border-pulsate {
    0%   { border-color:#063401; }
    100%  { border-color:#0B6901; }
    1% { border-color:#063401; }
}

.pulsingborder {
    border-collapse:separate;
    border:solid #063401 10px;
    border-radius: 20px;
	border-spacing: 2px;
	padding: 2px;
	margin:4px;
    animation: border-pulsate 2s alternate infinite;
}

.btn {
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
  }

.btn:last-child {
	margin-right: 0;
  }
  
.btn {
	color: #000000;
	background-color: #d8d8d8;
	border-color: darken(#d8d8d8, 7.5%);
	color: var(--color);
	font-family: inherit;
	padding: 0.6rem 0.9rem;
	outline: none;
	position: relative;
	border-radius: 0.5rem;
	user-select: none;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.4), 0 -0.3rem 0.6rem rgba(0, 0, 0, 0.2) inset;
	transition: box-shadow 64ms ease-out;
  }

.btn:after {
	content: "";
	background-color: #ffffff;
	width: 75%;
	height: 12.5%;
	position: absolute;
	top: 0.15rem;
	left: 12.5%;
	border-radius: 50%;
	filter: blur(0.15rem);
	transition: opacity 64ms ease-out;
  }
  .btn:active {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0.4rem 1rem rgba(0, 0, 0, 0.3) inset;
  }
  .btn:active:after {
	opacity: 0;
  }
  
  .btn-blue {
	color: black;
	background-color: #0091ea;
	border-color: #0079c4;
	font-family: Titillium Bold;
	font-size: 16pt;	
  }
  .btn-blue:active {
	color: #ececec;
  }
  .btn-blue:hover {
	border: 1px solid white;
	cursor: pointer;
  }

  .btn-green {
	color: black;
	background-color: #00c853;
	border-color: #00a243;
	font-family: Titillium Bold;
	font-size: 16pt;	
  }
  .btn-green:active {
	color: #ececec;
  }
  .btn-green:hover {
	border: 1px solid white;
	cursor: pointer;
  }

  .btn-yellow {
	color: #3e2723;
	background-color: #ffc400;
	border-color: #d9a700;
	font-family: Titillium Bold;
	font-size: 16pt;	
  }
  .btn-yellow:active {
	color: #261815;
  }
  .btn-yellow:hover {
	border: 1px solid white;
	cursor: pointer;
  }

  .btn-red {
	color: #ffffff;
	background-color: #d50000;
	border-color: #af0000;
	font-family: Titillium Bold;
	font-size: 16pt;

  }
  .btn-red:active {
	color: #ececec;
  }
  .btn-red:hover {
	border: 1px solid white;
	cursor: pointer;
  }

  .btn-grey {
	color: #ffffff;
	background-color: #303030;
	border-color: #1d1d1d;
	font-family: Titillium Bold;
	font-size: 16pt;	
  }
  .btn-grey:active {
	color: #ececec;
  }
  .btn-grey:hover {
	border: 1px solid white;
	cursor: pointer;
  }

  .btn-orange {
	color: #ffffff;
	background-color: #a05800;
	border-color: #a05800;
	font-family: Titillium Bold;
	font-size: 16pt;	
  }
  .btn-orange:active {
	color: #ececec;
  }
  .btn-orange:hover {
	border: 1px solid white;
	cursor: pointer;
  }