:root {--std: #333;
--bad: rgba(153,0,0,1);
--good:rgba(0,153,0,1);
--lightmuted:rgba(208,199,190,1);
--muted:rgba(183,168,152,1);
--mutedtrans:rgba(183,168,152,0.7);
--mutedvtrans:rgba(183,168,152,0.7);
--translightmuted:rgba(208,199,190,0.2);
--highlight:rgba(231,97,19,1);
--highlighttrans:rgba(231,97,19,0.4);
--highlightvtrans:rgba(231,97,19,0.2);
--amber:rgba(230,169,26,1);
--ambertrans:rgba(230,169,26,0.1);
--whitetrans:rgba(255,255,255,0.5);
--lightgrey:#F7F7F7;
--midgrey: #E2E2E2;
--darkgrey:#808080;
--vslow: all 1s linear;
--slow: all 0.6s linear;
--fast: all 0.3s linear;
--normal :'Roboto', sans-serif;
--thin :'Roboto Condensed', sans-serif;
--ofont: 'Noto Serif', serif;
--ocol : rgba(73,93,208,1);
--ocoltrans : rgba(73,93,208,0.4);
}


*,*::before,*::after {box-sizing: border-box;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,caption,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;position:relative;}
body {background-color:white;color:var(--std);font-family:var(--normal);font-size:1em;position:relative;overflow-x:hidden;padding-top:100px;}
header {position: sticky;width: 100%;background-color: black;color: var(--highlight);top: 0;display: flex;justify-content: space-between;align-items: center;margin-top: -100px;padding: 6px;z-index:1000;}
header a {color:var(--highlight);text-decoration:none;transition:var(--fast);}
header a:hover {color:white;text-decoration:underline;}
footer a {color:white;text-decoration:none;transition:var(--fast);}
footer a:hover {color:var(--highlight);text-decoration:underline;}
header img {height: 50px;background-color: transparent;width: auto;}
header .action {cursor:pointer;color:var(--highlight);transition:var(--fast);}
header .action:hover {color:white;}
footer {position: fixed;bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-between;padding: 0.3em 1em;background-color: black;font-family: var(--thin);color: white;}
main h1 {margin-bottom:1em;}
input, select, textarea {font-size: inherit;font-family: inherit;color: std;border: 1px solid var(--muted);border-radius: 0.2em;padding: 0.1em 0.2em;background-color:var(--lightgrey);transition;var(--fast);outline:0px;}
input:focus {background-color: white;border: 1px solid var(--orange);outline:0px;}
input:required {border: 1px solid var(--bad);outline:0px;}
input:required:focus {outline:1px solid var(--bad);}
input[type="checkbox"] {width:1em;}
input:invalid,select:invalid,textarea:invalid {border: 1px solid red;outline:1px solid red;}
input:valid,select:valid,textarea:valid{border: 1px solid var(--muted);outline:1px solid var(--good);}
input[type="checkbox"],input[type="radio"] {border: none;outline: none;}
input.number {text-align:right;}
button {border: none;padding: 0.25em;background-color: var(--highlight);color: white;font-size: inherit;font-family: inherit;border-radius: 0.2em;cursor: pointer;transition: var(--fast);border: 1px solid var(--highlight);margin: 0.2em 0;transform:scaleX(1);transform-origin:left center;}
button:hover {color: std;background-color: var(--highlighttrans);}
main {width: 100%;margin-top: 10px;min-height: calc(100vh - 114px);margin-bottom: 10px;display:flex;justify-content:center;align-items:center;flex-direction:column;}
main .tabs .count {margin: 0 0.4em;display: inline-block;padding: 0 0.3em;background-color: var(--highlight);border-radius: 50%;}
button.ns {transform:scaleX(0);}


/* Generic Formatting */
.action,a {cursor:pointer;color:var(--highlight);transition:var(--fast);}
button.action {cursor:pointer;color:white;transition:var(--fast);}
table {margin-top: 1em;}
.action:hover,a:hover {color:var(--std);}
.ui-widget {font-family: inherit;font-size: inherit;box-shadow: 3px 3px 12px var(--std);}
.ui-widget-content {background: var(--lightgrey);color: var(--std);}
.ui-widget-header {background: var(--muted);color: white;}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family: inherit;font-size: 1em;}
.zebra tbody tr:not([style="display: none"]):nth-child(even) {background: var(--midgrey);}
.zebra tbody tr:not([style="display: none"]):nth-child(odd) {background: white;}
.sort thead th {background-color: var(--darkgrey);color: white;cursor:pointer;transition:var(--fast);}
.sort thead th:hover {background-color: var(--lightgrey);color: var(--darkgrey);}
.sort thead th div {display: flex;justify-content: space-between;}
.sort thead th div span {padding-left: 1em;}
.dophone::before, .doemail::before {font-family: 'Font Awesome 6 Pro';font-weight: 900;margin-left: -1em;margin-right: 0.5em;color: var(--good);}
.dophone::before{content: '\f095';}
.doemail::before{content: '\f0e0';}
.clickablerow a {text-decoration:none;color:var(--std);}
.dophone , .doemail{display: inline;padding-left: 1em;transition: var(--fast);cursor: pointer;}
.dophone:hover, .doemail:hover {color: var(--good);}
td.csaction {cursor:pointer;}
.instruct p {margin: 1em 0;}
.instruct i {color: var(--highlight);}
.red {color:red;font-weight:800;}
.green {color:green;font-weight:800;}
thead th .red{color:white;font-weight:800;text-shadow: 1px 1px 0px red;}
thead th .green {color:white;font-weight:800;text-shadow: 1px 1px 0px green;}
td .red{font-weight:400;}
td .green {font-weight:400;}
.actionarea h1 {font-size: 1.4em;color: var(--highlight);font-weight: 900;margin-bottom: 0.5em;padding-bottom: 0.5em;border-bottom: 1px dotted var(--darkgrey);display: flex;justify-content: space-between;}
.ns {display: none;}

main .login {max-width:600px;display:grid;grid-template-columns: 1fr 2fr;grid-gap:0.5em;}
main .login h1,main .login img {grid-column: 1 / span 2; margin-bottom: 0; border-radius:0.5em;}
main .login img {margin-bottom:0.5em}
main .login button {grid-column: 2;}

main.user {align-content: flex-start;justify-content: flex-start;width: 100%;padding: 1em 2em;}
main.user .top {align-self: flex-start; width:100%;border-bottom:solid 1px var(--midgrey);}
main.user .actionarea {width:100%;padding:1em 0; }
main.user .actionarea .welcome {line-height: 1.6;}

main.user .actionarea .cieditor {display: grid;grid-template-columns: 1fr 2fr;grid-gap: 0.5em;}
main.user .actionarea .editwastetypes, main.user .actionarea .editwastetypes .haz , main.user .actionarea .postTransmission {display: grid;grid-template-columns: 260px 1fr;grid-gap: 0.5em;}

main.user .actionarea .cieditor h2 {grid-column: 1 / span 2;margin: 1em 0;}
main.user .actionarea .cieditor button , main.user .actionarea .editwastetypes button,main.user .actionarea .postTransmission button{grid-column: 2;}
main.user .actionarea .cieditor .confirm {grid-column: 2;font-size: 0.9em;color: var(--muted);font-style: italic;}

main.user .actionarea .editwastetypes {padding-bottom:4em; }
main.user .actionarea .editwastetypes .ewcodelist {grid-column:1 / span 2; }
main.user .actionarea .editwastetypes .wt .selector {display: inline-block;}
main.user .actionarea .editwastetypes .haz {grid-column: 1 / span 2;}
main.user .actionarea .editwastetypes .haz .selector {grid-column: 2;}
main.user .actionarea .editwastetypes .haz h2 {grid-column: 1 / span 2;}
main.user .actionarea input.short6 {width: 4em;}
main.user .actionarea .editwastetypes h2.pop {grid-column: 1 / span 2;}
main.user .actionarea .editwastetypes .pop.radio .selector {display: inline-block;}
main.user .actionarea .editwastetypes input[type="text"], .editwastetypes select, .editwastetypes button {max-width: 20em;}
main.user .actionarea .postTransmission .we.radio .selector {display: inline-block;	margin-right: 1em;}
main.user .actionarea .postTransmission {max-width: 600px;}
main.user .actionarea .editwastetypes .popholder {grid-column: 1 / span 2;display: grid;grid-template-columns: 260px 2fr;grid-gap: 0.5em; }