:root {	
  --Black:  hsl(0, 0%, 0%); /* #000000 Black */
  --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 */
  --Salmon:hsl( 0, 100%, 75%); /* #ff8080 */
  
  --Red:   hsl(   0,  75%, 50%); /* ##df2020 */
  --Maroon:hsl(   0, 100%, 25%); /* #808080 Maroon */
  
  --Green:  hsl(120, 100%, 33%); /* #008000 Green */
  --Amber:  hsl( 46, 100%, 50%); /* #ff8080 */
}
.text-red {color:#cc6666;}
.text-green {color:#339933;}
.text-blue {color:#6666cc;}
.text-black {color:#000000;}
.text-grey {color:var(--Grey);}
.text-white {color:#f7f7f7; text-shadow:1px 1px 2px #000000;}
.line-through { text-decoration: line-through red;}
.text-shadow {text-shadow:1px 1px 2px #000000;}

.bg-th {background-color:#f7f7f7;}

.bg-black {background-color:var(--Black);}
.bg-grey {background-color:var(--Grey);}
.bg-red {background-color:var(--Red);}
.bg-green {background-color:var(--Green);}
.bg-blue {background-color:#0d6efd;}
.bg-canary {background-color:#ffffcc;}




body { width:100%; margin:0; box-sizing:border-box; border:none;
    font-family:Roboto, "Segoe UI", Helvetica, Arial, sans-serif; color:#2f2f2f; line-height:1.5;}

a { text-decoration:none; color:#2f20d1;}
a:hover { text-decoration:underline;}
img { height:auto; max-width:100%; vertical-align:middle;}
h1, h2, h3, h4, h5, h6 { margin:.25em 0;}
hr {color:#ffffff; margin:.25em auto; box-shadow:0 1px 4px #ffffff;}
svg {overflow:visible; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;}
svg.icon16 { height:16px; width:16px; max-width:24px; stroke-width:2;}
svg.icon24 { height:24px; width:24px; max-width:48px; stroke-width:2;}
svg.icon36 { height:36px; stroke-width:2; stroke:currentColor; overflow:visible;}
svg.icon48 { height:48px; width:56px; max-width:72px; viewbox:0 0 24 28; stroke-width:2;}
svg.valign-middle {vertical-align:middle;}

.sidenav { height:100%; width:250px; position:fixed; top:0; left:-250px; padding-top:60px; z-index:1; overflow-x:hidden;
    background:#000000 url("/images/E23logo300l.jpg") top left no-repeat; background-size: 150px 60px; transition:0.5s; }
.sidenav a { padding:4px 12px; text-decoration:none; font-size:24px; box-shadow:0 0 8px #000000 inset;
  background-color:#203040; color:#d0d0d0; text-shadow:1px 1px 2px #000000; display:block; transition:0.3s;}
.sidenav a svg { color:#d0d0d0; text-shadow:1px 1px 2px #000000;}
.sidenav a:hover { color:#f1f1f1; background-color:#405060;}
.sidenav .closebtn { position:absolute; top:0; right:0; height:40px; width:60px; padding:10px 20px 10px 10px; text-align:center;}

@media screen and (max-height:450px) {
  .sidenav a {font-size:18px;}
}

header {width:100%; box-sizing:border-box; height:60px; padding:6px; background-color:#202020; color:#d0d0d0;}

.dropbtn { color: white;
  padding: 16px; font-size: 16px; border: none; cursor: pointer;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display:none; position:absolute; right:0; top:54px; z-index: 1;
  background-color: #203040; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content a { text-align:left; font-size:24px; color:#d0d0d0; text-shadow:1px 1px 2px #000000; 
    padding: 8px 16px; box-shadow:0 0 8px #000000 inset; text-decoration: none; display: block;}
.dropdown-content a:hover {color:#ffcc00; background-color:#405060;}
.dropdown:hover .dropdown-content { display:block;}
.dropdown:hover .dropbtn { background-color: #ffcc00; color:black;}

.accordion-border { margin:8px 0; border:#d0d0d0 1px solid; border-radius:.5rem; padding:4px 8px; background-color:#f0f0f0;}
.accordion-header {font-size:1.125em; font-weight:normal; color:#808080;
    text-align:left; outline:none; transition:0.4s;}
.active { color:black; border-bottom:1px solid #cccccc;}
.accordion-header:hover { color:black; cursor:pointer;}
.accordion-header:after { content: '\002B'; font-size:1.5em; line-height:1; font-weight:bold; color:green; float:right; width:auto; }
.active:after { transform:rotate(-45deg); color:red;}
.accordian-content { max-height:0; overflow:hidden; transition:max-height 0.5s ease-out;}

main { background-repeat: no-repeat; background-size: 16px 16px; transition: margin-left .5s; 
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" height="16px" width="16px" x="0px" y="0px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M0 0V16A16 16 0 0116 0H0"></path></svg>');}
.main-container { width:auto; margin-left:.25in; padding:0;}
.page-container { width:7.5in; margin:.25in auto; padding:0;}
.row { padding:4px 0 4px 0;}


.form-row { box-sizing: border-box; padding:4px 0 0 0;}
.form-row:after { content: ""; display: table; clear:both;} /* Clear floats after columns */
.form-row label {}

.t-label {float:left; width: 25%; margin-top: 4px; text-align:right; color:#808080;}
.t-text  {float:left; width:auto; margin-top: 4px; text-align:left; padding-left:8px; color:#202020;}

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

.card { padding:1rem 2rem; border-radius:4px; background:#fcfcfc; box-shadow:0 1px 3px #747681;}
.logo { background:#ffffff url("/images/nys.svg") top left no-repeat; background-size: 150px 100px;}
.page-break {page-break-after:auto;}
.ccw90 {transform:rotate(-90deg); transform-origin:50% 50%; margin-left:0;}
.footer {min-height:32px; border-top:3px solid #eeeeee;}
.error { padding:6px 20px; border-radius:3px; background-color:#fb817c; border:1px solid #e46b66;}
.success { background-color:#48e0a4; border:#40cc94 1px solid;}
.validation-message { color:#e20900;}
.display-none, .hide { display:none;}

.show-next:hover + .hide { display: block; color: red;}

.inline-block { display:inline-block;}
.float-left  { float:left;} .float-right { float:right;} .clearfix::after { content:""; clear:both; display:table;}
.margin-left {margin-left:.5em;} .margin-bottom {margin-bottom:.25em;}
.padding-zero {padding:0 !important;} .padding-top {padding-top:8px;}
.padding-left {padding-left:.5em !important;}

.text-left  { text-align:left; padding-left:.25em;} .text-center { text-align:center;} .text-right { text-align:right; padding-right:.5em;}
.full-width { width:100%;} .two3rds { width:66%;} .half { width:50%;} .third { width:33%;} .quarter { width:25%;} .sixth { width:16.5%;}
.width-auto { width:auto;}

.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}

.border-bottom { border-bottom:1px solid #cccccc;} .border-top { border-top:1px solid #cccccc;}
.border-bottom-none { border-bottom:1px solid #f7f7f7;}
.border-none {border:none !important;}
.border-radius {border-radius:.5em;}
.cursor-pointer { cursor:pointer;}
.mr-20 { margin-right:20px;}

.tile-container { width:360px; margin:0; border:#202020 1px solid; border-radius:1rem; padding:8px 15px; background-color:#f7f7f7; box-shadow:0 0 8px #000000 inset;}

.order-container { max-width:800px; margin:0; border:none; border-radius:1rem; padding:10px 20px 10px 20px; background-color:#fbfbfb; box-shadow:0 0 8px #000000 inset;}

#phppot-message { padding:6px 20px; font-size:1em; color:rgb(40, 40, 40);
    box-sizing:border-box; margin:0px; border-radius:3px; width:100%; overflow:auto;}
    
@media all and (max-width:780px) {
    .page-container { width:auto; }
}
@media all and (max-width:400px) {
    .page-container { padding:0px 20px; }
    .tile-container { width:auto; }
    input, textarea, select { width:100%; }
}

/* FORMS */
fieldset { color:#808080; border:2px solid #dfdfdf; border-radius:0.5em; padding:0 .5em .5em .5em; margin:0.5em 0; width:auto;}
legend { font-size:larger; padding:0 0.5em; font-weight:400;}
label { display:inline-block; padding-left:.5em; color:#808080; font-size:.875em;}
::placeholder { color:#9999ff;}

input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea, select { box-sizing:border-box; padding:.25em 0.5em; 
    overflow:visible; border:1px solid #d0d0d0; border-radius:.25rem;  
    font-size:1em; font-family:"Roboto Mono", Monaco, "Liberation Mono", "Courier New", Courier, monospace;}
textarea { resize:vertical; overflow: auto;}
#brand textarea {display:block; height:72px;}
input[type="checkbox"], input[type="radio"] { width:auto; color:#222222;}
/*select { display:initial; height:30px; padding:2px 5px;}*/

button, input[type=submit] { margin:.25em; font-weight:700; text-align:center;
    border:none; outline:none; border-radius:2em;}
button:hover, input[type=submit]:hover { box-shadow:0 0 6px #808080; cursor:pointer;}


.col-25 { float: left; width: 25%; text-align:right; margin-top: 6px; padding-right:.5em;}
.col-75 { float: left; width: 75%; margin-top: 6px;}
.row:after { content: ""; display: table; clear: both;}/* Clear floats after the columns */
/* Responsive layout - on screens < 600px wide, the two columns stack */
@media screen and (max-width: 600px) {
  .col-25 { width: 100%; margin-top: 0; text-align:left; }
  .col-75 { width: 100%; margin-top: 0; }
}

/* TABLES */
table { width:auto; table-layout:auto; border-collapse:collapse; border-spacing:0; border:1px solid #f5f5f5; margin-bottom:1.0em;}
#ruler th { width:.625in; font-size:.875em; color:#ccccff; border:none; background-color:#ffffff; }
.divider {font-size:1em; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; background-color:#808080; color:#eeeeee; text-shadow:1px 1px 1px #000000;}
th { padding:.25em 0.25em .125em .5em; font-size:.875em; border-right:1px solid #e7e7e7; background-color:#f7f7f7; text-align:center; color:#808080;}
td { padding:0 .25em; border-right:1px solid #e7e7e7; border-bottom:1px solid #dfdfdf;
    font-family:"Roboto Mono", Monaco, "Liberation Mono", "Courier New", Courier, monospace; font-size:.875em; line-height:1.25em;}
td:last-child { padding:0 .25em; }
tr:hover td { background: #ffffdd; cursor: pointer;}
tbody th { }
thead th { text-align:center; font-size:1.0em; border-bottom:1px solid #cccccc; }
thead td { text-align:center; font-size:1.25em; border-bottom:1px solid #cccccc; }
tfoot { border-bottom:1px solid #cccccc; background-color:#f7f7f7; padding:0.5em;}
table.striped tr:nth-of-type(2n) { background-color:#f7f7f7;}

.pagination {height:2em;}
input[type=submit].perpage-link {
    width: auto; font-size: 14px; padding: 4px 8px; border: 2px solid #d2d6dd; border-radius: 4px;
    margin: 0px 5px; background-color: #fff; cursor: pointer;}
.current-page {
    width: auto; font-size: 14px; padding: 4px 8px; border: 2px solid #d2d6dd; border-radius: 4px;
    margin: 0px 5px; background-color: #efefef; cursor: pointer;}

.btn {margin:auto; padding:4px 6px; border-radius:6px; box-shadow:0 0 8px #00000080 inset;}
.soft-btn {margin:6px; padding:6px 12px; border-radius:2rem; box-shadow:0 0 8px #000000 inset;}

/* NAV */
.parent { display:block; position:relative; float:left; line-height:30px; background-color:#f7f7f7; border-right:#CCC 1px solid;}
.parent a { margin:10px; color:#9999ff; text-decoration:none; }
.parent:hover>ul { display:block; position:absolute;}

.child { display:none;}
.child li { background-color:#E4EFF7; line-height:30px; border-bottom:#CCC 1px solid; border-right:#CCC 1px solid; width:100%;}
.child li a { color:#000000; white-space:nowrap; }

ul { list-style:none; margin:0; padding:0; min-width:15em;}
ul ul ul { left:100%; top:0; margin-left:1px;}
li a {white-space:nowrap;}
li:hover { background-color:#ffffff; color:#333333;}
.parent li:hover { background-color:#F0F0F0;}
.expand { font-size:12px; float:right; margin-right:5px;}

footer { min-width:360px; height:42px; padding:0; margin:6px; background-color:#ffffff; color:#808080; border:2px solid #dfdfdf; border-radius:.125in; 
    text-align:center; font-size:.75em;}