:root {	
  --Salmon:hsl( 0, 100%, 75%); /* #ff8080 */
  --Red:   hsl( 0,  50%, 50%); /* #c04040 */
  --Maroon:hsl( 0, 100%, 25%); /* #c04040 */

  --Manila:hsl(37,  94%, 93%); /* h 37, s94%,l93% Behr BHG-17 */
  --Kraft: hsl(36,  50%, 75%); /* # */
  --Orange:hsl(36, 100%, 50%); /* h3? s75% l50% */
  --Braun: hsl(45, 50%, 25%); /* h3? s75% l50% */

  --Tan:   hsl(45,  50%, 75%); /* h 30 s50% l33% */
  --Brown: hsl(45, 100%, 25%); /*#806000 */
  --Amber: hsl(48, 100%,  50%);
  --ddd:  hsl(60, 75%,  50%);

  --Yellow:hsl(60, 100%,  75%); /* #ff9999 Canary Post-It Pantone PMS YELLOW 0131 C */


  --Olive: hsl(60, 100%,  25%);/* #808000 HTML Olive */

  --Lime:  hsl(90,  75%,  50%); /* h 90 s75% l50% */
  --DarkGreen:hsl(90, 75%, 25%);
  --Grean: hsl(120, 100%, 25%); /**/
  --Green: hsl(120,  33%, 50%); /* #55aa55 */

  --finance:hsl(150, 100%, 25%); /* #55aa55 */
  --mint:  hsl(150,  50%, 75%); /*  #  */

  --Teal:  hsl(180, 100%, 25%); /* #008080 HTML Teal */
  --Cyan:  hsl(180,  50%, 50%); /* #40c0c0 */
  --Aqua:  hsl(180, 100%, 50%); /* h180 s75% l50% */

  --Polar: hsl(200, 100%, 75%); /*  */
  --Sky:   hsl(200,  75%, 93%); /*  */
  --Blue:  hsl(210,  75%, 50%); /* #2080df (2727 C) Curious Blue */
  --Indi:  hsl(240,  50%, 50%); /* # */
  --Purple:hsl(270,b 50%, 50%); /* h180 s75% l50% */
  --Indigo:hsl(275, 100%, 25%); /* #4b0082 HTML Indigo */

  --Magenta:hsl(300,  50%, 50%);/* h240 s75% l50% */
  --Fuchsia:hsl(300, 100%, 50%);/* ff00ff */

  --Black:  hsl(0, 0%, 0%); /* h- s 0 l75%*/
  --Dark:   hsl(0, 0%, 12.5%); /* h- s 0 l75%*/
  --DarkGrey:hsl(0, 0%, 25%);
  --Grey:   hsl(0, 0%, 50%); /* #808080  */
  --Silver: hsl(0, 0%, 75%); /* #c0c0c0 Silver */
  --Light:  hsl(0, 0%, 83%); /* #d3d3d3 LightGray */
  --Smoke:  hsl(0, 0%, 96%); /* #f5f5f5 WhiteSmoke */
  --White:  hsl(0, 0%, 100%);/* #ffffff White */
  /* --font-body:"proxima-soft", "Proxima Soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif; */
	/* --font-mono:"Courier", Courier, monospace; */

}


@font-face { font-family:'beon'; font-display:swap; src:url(../fonts/Beon-Regular.woff2) format('woff2'); }

/* version 3.0 table added */
body { max-width:1600px; margin:0; padding:0; background-color:#000000; font-size:16px; font-style:normal; font-weight:400; color:transparent;}
header {width:100%; height:60px; background-color:#fddc15; text-align:center;}
.neon-green {margin:0 auto; height:48px; display:inline-block; padding:0; font-family:beon; font-size:3em;color:#00ff00; letter-spacing:.125em; text-shadow:0 0 8px #00ff00;}
.neon-blue {margin:0 auto; height:48px; display:inline-block; padding:0; font-family:beon; font-size:3em;color:#0066ff; letter-spacing:.125em; text-shadow:-2px -2px 8px #0066ff, 2px 2px 8px #0066ff;}
.text-black {color:black;} .text-white {color:#f7f7f7; text-shadow:1px 1px 2px #000000;}
.text-blue {color:#0066ff;} .text-green {color:#33ff66;}
.bg-blue {background-color:#0066ff;} .bg-green {background-color:#55aa55;} .bg-red {background-color:#df2020;}
#topNav { top:68px; height:42px; width:100%; text-align:center; border-top:8px solid #af2319; border-bottom:8px solid #af2319; }
#topNav ul { width:264px; list-style-type:none; margin:0 auto; padding:0; overflow:hidden; background-color:#000000;}
#topNav li { width:78px; margin:0 4px; float:left;}
#topNav li a { font-size:.9em; font-weight:700; display:block; color:white; text-align:center; padding:13px 0 0 0; text-decoration:none;}
#topNav li a:hover { color:#fddc15;}

.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0;
 background:#000000 url("/images/E23logo300l.jpg") top left no-repeat; background-size: 150px 60px;
  overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.sidenav a { display:block; transition: 0.3s; padding: 8px 8px 8px 32px; text-decoration: none;
  font-size: 24px; color: #818181; text-shadow:1px 1px 2px #000000;}
.sidenav a:hover { color: #f1f1f1;}
.sidenav .closebtn { position: absolute; top: 0; right: 16px; font-size: 36px; margin-left: 50px; }
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.redBtn {display:inline-block; height:24px; margin:8px; padding:12px 16px 8px 16px; color:white; font-weight:700; text-decoration:none; text-shadow:1px 1px 2px #000000;
    background-color:#af2319; border:1px solid #af2319; border-radius:0.35em; box-shadow:0em 0.15em 0.65em 0em rgba(0,0,0,0.25);}
.redBtn:hover {background-color:white; color:#af2319; cursor:pointer; text-shadow:none;}

#login {display:inline-block; position:absolute; top:8px; right:8px; padding:8px 24px; margin:0 0 0 20px; 
	font-size:1.5em; text-decoration:none; color:#ffffff; border:8px solid #af2319; border-radius:4em; cursor:pointer;}

main {padding:1em; color:white;}
.row-flex { display:flex; flex-wrap:wrap; width:100%;} /* Container for boxes */
.column { flex:1 22%; padding:16px; border-radius:1em; box-shadow:0 0 8px #0066ff inset, 0 0 8px #0066ff;} /* Create four equal columns */
.column:hover { box-shadow:0 0 8px #ffcc00 inset; cursor:pointer;} 
/* On screens <= 992px wide go from four columns to two */
@media screen and (max-width:992px) {.column {flex:44%;}}
/* On screens <= 600px wide stack the columns */
@media screen and (max-width:600px) {.column {flex:100%;}}

.half { width:50%; flex: 50%;}

.form-row { padding:6px 0 6px 0;}

footer {height:42px; padding:0; margin:8px 16px; background-color:#ffffff; color:#666666; border:2px solid #dfdfdf; border-radius:.125in; 
    text-align:center; font-size:.75em;}	


/* The Modal (background) */
.modal { display:none; position:fixed; z-index:1; /* Sit on top */
  padding-top:60px; left:0; top:0; width:100%; height:100%; overflow: auto; /* Enable scroll if needed */
  background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.75); /* Black w/ opacity */
}
/* Modal Content */
.modal-content { position:relative; width:100%; max-width:720px; margin:auto; padding:0;
  background-color:#fefefe; border-radius:1em; 
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name:animatetop; -webkit-animation-duration:0.5s;
  animation-name:animatetop; animation-duration:0.5s
}
@-webkit-keyframes animatetop { /* Add Animation */
  from {top:-300px; opacity:0} to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0} to {top:0; opacity:1}
}
.close { color:white; float:right; font-size:36px; font-weight:bold; }
.close:hover, .close:focus { color:#cc3333; text-decoration:none; cursor:pointer;}
.modal-header { padding:2px 16px; background-color:#006633; color:white; text-shadow:1px 1px 2px #000000; border-radius:1rem 1rem 0 0;}
.modal-body {padding:16px; color:#202020; }
.modal-footer { padding:4px 16px; background-color:#006633; color:white; border-radius:0 0 1rem 1rem; font-size:.75em; text-align:center;}

.full-width { width:100%;} .two3rds { width:66%;} .half { width:50%;} .third { width:33%;} .quarter { width:25%;}
.width-auto { width:auto;}
.max300 {width:100%; max-width:300px;}

.margin-small {margin:8px;}
.float-right {float:right;} .float-left {float:left;} .clearfix::after { content:""; clear:both; display:table;}
.text-center {text-align:center;}
.font-bold {font-weight:bold;} .font-normal {font-weight:normal;}
.font-smaller {font-size:.75em; !important}
.font-small {font-size:.875em; !important}
.font-big {font-size:1.125em; !important}
.font-bigger {font-size:1.50em; !important}
.font-2X {font-size:2em; !important}

.soft-btn {margin:8px; padding:8px 16px; border:none; border-radius:2rem; box-shadow:0 0 8px #000000 inset;}
.soft-btn:hover { box-shadow:0 0 8px #000000; cursor:pointer;}

.border-top { border-top:1px solid #cccccc;}

.p-container { width:740px; margin:0 auto; padding:0 20px 20px 20px; color:#1e2a28;
    -webkit-font-smoothing:antialiased; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:.9em;}
.p-container table { border-collapse:collapse; width:100%; margin-bottom:30px;}
.p-container td, .p-container th { text-align:left; padding:8px;}
.p-container h1 { font-weight:normal;}

input[type=text].phppot-input, .p-container input,
	.p-container textarea, .p-container select, .phppot-input,
	.phppot-select { box-sizing:border-box; width:auto; height:initial; padding:8px 5px; border:1px solid #bfbfbf; border-radius:.5em;}

.p-container input[type="checkbox"] input[type="range"] { width:auto; vertical-align:text-bottom;
	display:initial; opacity:initial; position:inherit; pointer-events:initial;}
.p-container textarea, .phppot-textarea { width:300px;}
.p-container select, .phppot-select { display:initial; height:30px; background-color:#fff; padding:2px 5px;}
.p-container button, .p-container input[type=submit] { padding:.5em 1em; font-size:1.5em; background-color:#40af40; color:#ffffff; text-shadow:1px 1px 3px #000000; cursor:pointer;
	border-radius:.5em; box-shadow:0 0 8px #000000 inset;}
.p-container button, .p-container input[type=submit]:hover { background-color:#40bf40; color:#ffffff; text-shadow:1px 1px 3px #000000;}
.p-container button:focus { outline:none;}
.p-container .phppot-row { padding-top:15px;}

#phppot-message { padding:6px 20px; margin:0; font-size:1em; color:rgb(40, 40, 40);
	box-sizing:border-box; overflow:auto; border-radius:3px; width:100%;}

.p-container .error { padding:6px 20px; background-color:#fb817c; border:1px solid #e46b66; border-radius:3px;}
.p-container .success { background-color:#48e0a4; border:#40cc94 1px solid;}

#phppot-loader-icon { display:none; color:#1871e6; font-weight:bold; padding:6px 20px 6px 0; vertical-align:middle;}
#phppot-loader-ack-icon { display:none; color:#1871e6; font-weight:bold; padding:6px 20px 6px 0; vertical-align:middle;}
#phppot-btn-send:hover { background:#1363cc; border:#105bbd 1px solid;}

.p-container .validation-message { color:#e20900; display:inline-block;}
.p-container .label { margin-bottom:3px;}
.phppot-form, .phppot-section { border:#eaeaea 1px solid; padding:10px 25px 10px 30px; border-radius:3px;}
.p-container .display-none { display:none;}
.icon-add-more-attachemnt { cursor:pointer; font-style:italic; font-size:.9em;}
.inline-block { display:inline-block;}

svg {overflow:visible; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;}
svg.icon24 { height:24px; width:24px; max-width:48px; stroke-width:2; fill:none;}
svg.icon36 { height:36px; width:36px; max-width:48px; position:relative; top:8px; stroke-width:3;}


/* TABLES */
#robo table { width:250px; table-layout:fixed; border-collapse:collapse; border-spacing:0; margin-bottom:1.0em;}
#robo th { width:.625in; font-size:.75em; color:#ccccff; border:none; background-color:#ffffff; }
#robo td { padding:0 1px; border:1px solid #cccccc;}

.t-row { box-sizing: border-box;}
.t-row:after { content: ""; display: table; clear:both;} /* Clear floats after columns */
.t-label {float:left; width: 25%; margin-top: 6px; text-align:right;}
.t-text  {float:left; width:auto; margin-top: 6px; text-align:left; padding-left:8px;}

@media screen and (max-width: 600px) { /* Responsive labels <600px wide, columns stack */
  .t-label {width:100%; margin-top:6px; text-align:left; color:#808080;}
  .t-text { width:100%; margin-top: 0; }
  .max300 { width:auto; }
}

/* FORMS */
fieldset { color:#333333; border:2px solid #cccccc; border-radius:0.5em; margin:0.5em 0;}
legend { padding:0 0.5em; color:#808080;}
.modal-content input[type=text] { box-sizing:border-box;padding:4px 8px; border:1px solid #cccccc; border-radius:.5em;}
.row { padding:6px 0 6px 0;}

@media all and (max-width:780px) {
	.p-container { width:auto;}
}

@media all and (max-width:450px) {
	.p-container h1 { font-size:1.2em;}
	.p-container input, .p-container textarea, .p-container select { width:100%;}
	.phppot-form { border:none; padding:0;}
	.hide-small {display:none;}
}