: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"]:valid {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(--muted);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);}
.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;}
main form#login {display: grid;grid-template-columns: 6em 10em;grid-gap: 0.5em;}
main form#login button {grid-column: 2;}
.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;}
.tdco div {display: flex;justify-content: space-between;width:100%;}


/* page specific formatting */
.opener {padding: 0em 2em;padding-bottom:5em;}
.opener p {padding: 0;margin: 1em 0em;}
.opener ol , .opener ul {margin-left: 2.5em;}
.opener ol li, .opener ul li {padding-left: 1em;margin:0.5em 0em;}
.opener ul li p {margin:0.25em 0;}
.dologin {margin: 1em 0;width: 100%;text-align: center;color: white;}
.driversign {padding: 1em;background-color: var(--mutedtrans);width: 300px;margin: 2em;}
.driversign .ssig {margin-bottom:1em;}
.driversign .ssig canvas {border: solid 1px var(--std);display: block;margin: 0.5em 0;background-color:white;}


/* action pages */
main.user {display: block;padding: 1em 1em 4em 1em;}
main.user h1 {font-size: 1.8em;color: var(--highlight);}
.actionarea h2 {margin-top: 0.5em;padding-top: 0.5em;margin-bottom: 0.5em;border-top: solid 1px var(--highlight);font-size:1.4em;display:flex;justify-content:space-between;}
.actionarea h3 {margin: 1em 0em;font-size: 1.4em;font-weight: 600;}


/* hdetail */
.hdetail {position: fixed;right: 15px;left: 15px;bottom: 100vh;max-height: 86.5vh;overflow-y:scroll;background-color: white;z-index: 10000;height: 87vh;border-bottom: solid black 2px;top: 10vh;transition: var(--fast);transform: scaleY(1);transform-origin: bottom center;box-shadow: inset 0 0 3px var(--darkgrey);font-family: var(--ofont);color:var(--std);}
.hdetail.ns {transform: scaleY(0);}
.hdetail .ordering {padding: 1em 2em;}
.hdetail .closehdetail {position: absolute;right: 0.9em;top: 0.9em;font-size: 1.2em;}
.hdetail h3 , .hdetail h4 {margin: 1em 0;padding: 0.2em 0.1em;display: block;background-color: var(--ocoltrans);}
.hdetail p {margin:1em 0em;}
.hdetail button {background-color:var(--ocol);}
.hdetail button:hover {background-color:var(--ocoltrans);}


/*ordering */
.hdetail .ordering .start,.hdetail .ordering .details,.hdetail .ordering .location ,.hdetail .ordering .waste,.avail{transition:var(--slow);max-height:200vh;overflow:hidden;transform-origin:top center;transform: scaleY(1);}
.hdetail .ordering .start.ns,.hdetail .ordering .details.ns,.hdetail .ordering .location.ns,.hdetail .ordering .waste.ns ,.hdetail .ordering .avail.ns{transform: scaleY(0);max-height:0;}
.hdetail .ordering .start,.hdetail .ordering .details,.hdetail .ordering .location ,.hdetail .ordering .waste,.hdetail .ordering .avail{transition:var(--slow);max-height:200vh;overflow:hidden;transform-origin:top center;transform: scaleY(1);}
.hdetail .ordering .start.ns,.hdetail .ordering .details.ns,.hdetail .ordering .location.ns,.hdetail .ordering .waste.ns ,.hdetail .ordering .avail.ns{transform: scaleY(0);max-height:0;}
.hdetail .ordering form {display:grid;grid-template-columns:1fr;grid-gap:0.5em;}
.hdetail .ordering form h3, .hdetail .ordering form h4, .hdetail .ordering form p, .hdetail .ordering form button, .hdetail .ordering form .fi {grid-column:1 / span 1;}
.hdetail .ordering form .fi {display:grid;grid-template-columns:1fr;grid-gap:0.5em;}
.hdetail .ordering div.idpc_autocomplete > input {display: block;width: 100% !important;}
.hdetail .ordering .icon {font-size:2em;transition:var(--fast);cursor:pointer;color:var(--ocol);}
.hdetail .ordering .icon:hover {color:var(--ocoltrans);}
.hdetail .ordering .icon.ns {display:none;}


/* hdetail planning*/
.hdetail.plancollection {padding: 0em;font-family: var(--normal);box-shadow:none;background-color:white;border:none;}
.hdetail.plancollection .planningdetailinner {position: relative;width: 100%;background-color: var(--mutedvtrans);border: solid 1px var(--std);padding: 1em;}
.hdetail.plancollection .planningdetailinner .closehetailplanning {position: absolute;top: 0em;right: 9px;z-index: 2;font-size: 1.3em;}
.hdetail.plancollection .planningdetailinner h3 , .hdetail.plancollection .planningdetailinner h4 {margin: 1em 0;padding: 0.2em 0.1em;display: block;background-color: var(--muted);}
.hdetail.plancollection .planningdetailinner p {margin:1em 0em;}
.hdetail.plancollection .planningdetailinner button {color:white;background-color:var(--muted);}
.hdetail.plancollection .planningdetailinner button:hover {color: std;background-color: var(--translightmuted);}
.hdetail.plancollection .planningdetailinner::after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 3em 3em 0;border-color: transparent white transparent transparent;right: 0px;top: 0px;position: absolute;}
.hdetail.plancollection .planningdetailinner .twocol {display:grid;grid-template-columns:repeat(2,1fr);grid-gap:2em;}
.hdetail.plancollection .planningdetailinner .twocol.reqdetail {display: grid;grid-template-columns: 108px 1fr;grid-row-gap: 0.5em;}
.hdetail.plancollection .planningdetailinner .twocol .reqdetail span {font-weight: 600;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps {grid-column: 1 / span 2;display:grid;grid-template-columns:3fr 1fr;grid-gap:0;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps h4 {grid-column: 1 / span 2;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps .pdmap {width: 100%;aspect-ratio: 3 / 2;position: relative;overflow: hidden;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps #pdcapture {background-color: white;padding: 1em;display: flex;justify-content: space-between;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps .pdcapture section p {display: flex;justify-content: space-between;}
.hdetail.plancollection .planningdetailinner thead tr,.hdetail.plancollection .planningdetailinner tfoot tr {background-color: var(--whitetrans);}
.hdetail.plancollection .planningdetailinner .selectors {display: grid;grid-template-columns: repeat(3,1fr);margin-bottom:1em;}
.hdetail.plancollection .planningdetailinner .selectors label {display: block;font-weight:600;}
.hdetail.plancollection .planningdetailinner .selectors select {margin-top: 1em;}
.hdetail.plancollection .planningdetailinner .selectors .leave, .hdetail.plancollection .planningdetailinner .selectors textarea {grid-column: 2 / span 2;margin-bottom:1em;}
.hdetail.plancollection .planningdetailinner .selectors .notes {display:block;} 
.hdetail.plancollection .planningdetailinner .selectors .notes.ns {display:none;} 
.hdetail.plancollection .planningdetailinner h1 {color: var(--highlight);font-size: 1.6em;text-align: center;padding-bottom: 0.5em;}
.hdetail.plancollection .planningdetailinner .twocol .pdmaps p {grid-column: 1 / span 2;}


/* collection request detail */
.zebra tbody tr.crdetail,.zebra tbody tr.companydetail {background-color: var(--mutedvtrans) !important;}
.quotation {padding: 0 0.5em;}
.quotation h2 {margin: 0.5em;text-align: center;border:none;padding:0;display:block;}
.quotation h3 {margin: 0.5em 0;}
.quotation .detailholder {display: grid;grid-template-columns: 1fr 2fr 1fr 2fr;grid-gap: 1em;padding: 1em 0;}
.quotation p {margin: 0.5em 0;}
.quotation .wasteholder,.quotation .other {display: grid;grid-template-columns: repeat(4 , 1fr);grid-gap: 1em;padding: 0.5em 0;}
.quotation .wasteholder input.number,.quotation .other input.number {width: 6em;align-self: flex-end;}
.quotation .other input.number {grid-column: 4 / span 1;}
.quotation .other textarea {grid-column: 2 / span 3;}
button.action {color:white;}
button.action:hover {color:var(--std);}
.buttonbar {display: flex;justify-content: space-between;}
.quotation .other p {grid-column:1 / span 4;}
.quotation .neutral {color:var(--std);font-weight:800;}
.quotation .lead {display: flex;justify-content: space-between;padding-bottom: 0.5em;margin-bottom: 0.5em;border-bottom: solid 1px var(--blue);}
.quotation .map {width:30vw;aspect-ratio:1;}
.quotation .reqdetail {display: grid;grid-template-columns: 200px 1fr;grid-gap: 0.5em;padding-bottom: 2em;}
.quotation .qwdetail {display: grid;grid-template-columns: 200px 1fr 200px 1fr;grid-row-gap: 0.5em;padding-bottom: 2em;grid-column-gap: 2em;}
.quotation .qwdetail p {margin: -2px;padding: 2px;border: solid 1px var(--darkgrey);}
.quotation .reqdetail :nth-child(even), .quotation .qwdetail :nth-child(even) {font-weight: bold;}
.quotation .coloured .red {color:white;text-shadow:2px 2px red;font-weight:800;}
.quotation .coloured .green {color:white;text-shadow:2px 2px green;font-weight:800;}
.quotation .qwdetail .innertable {grid-column:3 / span 2;margin-bottom:2em;}
.quotation .qwdetail button {grid-column:3 / span 2;}
.quotation::after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 3em 3em 0;border-color: transparent white transparent transparent;right: calc(-0.3em + 4px);top: calc(-1em + 4px);position: absolute;}
.quotation .closecolreq {position: absolute;top: -0.4em;right: 0.1em;z-index: 2;font-size: 1.3em;}
.quotation .twocol {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 2em;margin-bottom: 2em;}
.quotation .twocol h3 {grid-column: 1 / span 2;margin: 0;padding: 0;}
.quotation .decinfo {font-size: 1.4em;font-weight: 500;text-align: center;color: var(--bad);padding: 0em 1em;margin-top: 1em;border-top: 1px dotted var(--bad);}
.quotation h1 {text-align: center;padding-top: 0.5em;}


/* quotation page */
.quote .requestdetails {display:grid;margin:1em 0;grid-row-gap:1em;grid-template-columns:140px 1fr 140px 1fr;grid-column-gap:2em;padding-bottom:0.5em;border-bottom:solid 1px var(--accent);}
.quote .requestdetails textarea:disabled {border:solid 1px #666;color:var(--std);}
.quote .wastedetails {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;grid-gap:0.5em;grid-row-gap:1em;padding:1em 0;}
.quote .wastedetails .number:disabled {text-align:right;border:solid 1px #666;width:6em;}
.quote .wastedetails .c4 {grid-column:4 / span 1;}
.quote .wastedetails .red {color:red;font-weight:600;}
.quote .wastedetails .green {color:green;font-weight:600}
.quote .wastedetails .neutral {color:var(--std);font-weight:600}
.quote .signoff {display:grid;grid-template-columns:1fr 1fr;grid-gap:1em;}
.quote .signoff textarea {color:var(--accent);border:solid 1px #666;}
.quote .signoff input {color:var(--accent);}
.quote .buttonbar {display:flex;justify-content:space-between;padding:1em 0;max-height:100vh;overflow:visible;transition:var(--slow);}
.quote .buttonbar.ns {display:none;}
.quote .ssig {padding:1em 0;dsplay:block;transitition:var(--slow);max-height:100vh;overflow:visible;}
.quote .ssig.ns {max-height:0px;padding:0;overflow:hidden;}
.quote #quotationsignature {border:solid 1px var(--std);margin:0.5em 0;}
.quote .signoff p {grid-column:1 / span 2;padding:1em 0;text-align:center;text-transform:uppercase;color:var(--accent);background-color:#ccc;}
.quote .signoff span {color:var(--accent);font-weight:500;}
.quote .info {display: grid;grid-template-columns: repeat(2,1fr);padding-bottom: 1em;}
.quote .alert {width: 100%;font-weight: 888;text-align: center;border: dotted 1px var(--std);padding: 1em 0em;margin: 1em 1em;background-color: var(--ocoltrans);}
.quote main {width: 100%;margin-top: 10px;min-height: auto;margin-bottom: 0px;display: block;justify-content: center;align-items: center;flex-direction: column;padding: 1em 3em;}
.quote .hdetail {position: relative;right: 0;left: 0;bottom: 0;max-height: 700vh;overflow-y: auto;background-color: white;z-index: auto;height: auto;border-bottom: none;top: 0;transition: none;transform: scaleY(1);box-shadow: none;font-family: var(--ofont);color: var(--std);width: 100%;max-width:100%;}
.quote main .hdetail .action, .quote main .hdetail a {cursor: pointer;color: var(--ocol);transition: var(--fast);}
.quote main .hdetail .action {cursor: pointer;color: white;}

/* collection mapping */
.cmaps {position: relative;width: 100%;border: solid 2px var(--std);display: grid;grid-template-columns: 7fr 3fr;grid-column-gap: 1em;margin-top: 1em;}
.cmaps .map {width: 100%;aspect-ratio: 1 / 1;display: inline-block;}
.cmaps .capture {display: inline-block;}
.cmaps .capture section {background-color: var(--lightgrey);height: 100%;padding: 0.5em 1em;}
.cmaps .capture section h2 {font-weight: normal;color: var(--darkgrey);padding: 0;margin: 0;border: none;}
.cmaps .capture section p {display: flex;justify-content: space-between;margin: 0.25em 0;font-weight: 500;padding-bottom:0.2em;}
.cmaps #capture section p span:nth-child(1) {font-weight: normal;}
.mapkey {margin: 0.5em 0;}
.mapkey .mk {display: inline-block;text-align: center;border: solid 1px var(--std);padding-top: 0.2em;margin: 0.2em;width: 6em;background-color: white;}
.mapkey .mk figcaption {background-color: var(--midgrey);padding: 0.15em;}


/* planned */
.plannedholder .pmaps {display:grid;grid-template-columns:2fr 1fr;}
.plannedholder .pmaps .map {position: relative;overflow: hidden;width: 100%;aspect-ratio: 3/2;}
.plannedholder .pmaps #capture {background-color: white;padding: 1em;display: flex;justify-content: space-between;}
.plannedholder .pmaps #capture section {line-height: 1.7;}
.plannedholder .pmaps #capture section p {display: flex !important;justify-content: space-between;font-weight:600;}
.plannedholder .pmaps #capture section p span:first-child {font-weight: normal;}
.plannedholder .mapkey .mk {width: 5em;font-size: small;}
.plannedholder .pmaps #capture section h2 {font-weight: normal;color: var(--darkgrey);padding: 0;margin: 0;border: none;}
.plannedholder .rinner {display: grid;grid-template-columns: 1fr 4fr;grid-gap: 2em;padding-bottom: 2em;margin-bottom: 2em;border-bottom: dotted 1px var(--std);}
.plannedholder .rinner form, .rinner form .sholder {grid-column: 1;display: grid;grid-template-columns: 1fr;align-content: flex-start;grid-gap: 0.5em;}
.plannedholder .rinner .route .plandetailhead div {font-weight: 500;display: flex;justify-content: space-between;color: var(--highlight);}
.plannedholder .rinner .route .plandetailhead div label {font-weight: normal;color: var(--std);}
.plannedholder .rinner .rout {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 2em;}

/* company detail */

.companyouter {margin: 0.1em 0.2em;background-color: white;padding: 0.1em 0.2em;display: block;}
.companyouter .action.closecompany {float: right;}
.companyouter .action.closecompany {z-index: 10;background-color: rgba(255,255,255,0.5);padding: 0.2em;border-radius: 25%;position: absolute;top: 0;right: 0;}
.companyouter h2 {margin: 0.5em 0;padding: 0;border: none;}
.companyouter .tabbar {margin: 1em 0;padding: 0;list-style: none;border-bottom: solid 2px var(--amber);}
.companyouter .tabbar li {display: inline-block;background-color: var(--muted);color: white;padding: 0.1em 0.5em;cursor: pointer;border-top-right-radius: 0.3em;border-top-left-radius: 0.3em;margin-right: 0.1em;transition: var(--fast);}
.companyouter .tabbar li:hover {color: std;background-color: var(--lightmuted);}
.companyouter .tabbar li.active::before {content: '';display: inline-block;width: 1em;height: 1em;-moz-border-radius: 7.5px;-webkit-border-radius: 7.5px;border-radius: 0.5em;background-color: var(--amber);margin-right: 0.25em;margin-top: 4px;margin-bottom: -2px;}
.companyouter .companyinner h3 {font-size: 1.2em;margin-bottom: 0.5em;}
.companyouter .companyinner p {margin: 0.5em 0;font-weight:600;}
.companyouter .companyinner .noteholder p {font-weight:400;}
.companyouter .companyinner .noteholder {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 1em;}
.companyouter .companyinner .notenew textarea {width: 100%;grid-column: 1/span 2;}
.companyouter .companyinner .notenew {background-color: var(--lightgrey);padding: 0.1em 0.3em;display: grid;grid-template-columns: 1fr 1fr;}
.companyouter .companyinner .notenew h4 {grid-column: 1 / span 2;}
.companyouter:after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 3em 3em 0;border-color: transparent var(--muted) transparent transparent;right: 0;top: 0;position: absolute;}
.companyouter .companyinner .pending {transition:var(--slow);opacity:1;padding: 0.5em 0.2em;margin: 0.5em 0}
.companyouter .companyinner .pending.dim {opacity: 0.2;}
.companyouter .companyinner .archive {margin: 0.5em 0;background-color: var(--midgrey);padding: 0.5em 0.2em;}
.companyouter .companyinner .archive h4 {display: flex;justify-content: space-between;}
.companyouter .companyinner .activityform {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 3em;margin-bottom: 0.5em;padding: 0.5em;margin-top: 0.5em;position: relative;}
.companyouter .companyinner .activityform.ns {display: none;margin-bottom: 0;padding-bottom: 0;border:none;}
.companyouter .companyinner .activityform.newactivity {grid-column:1 / span 2;}
.companyouter .companyinner .activityform.newactivity .nonewact {grid-column: 1 / span 3;justify-self: flex-end;margin-top: 0.5em;margin-bottom: 0.5em;}
.companyouter .companyinner .activityform p {grid-column: 1 / span 3;}
.companyouter .companyinner .activityform > div {display: grid;grid-template-columns: 1fr;align-content:flex-start;}
.companyouter .companyinner .activityform label {font-weight: 600;margin-top: 0.3em;}
.companyouter .companyinner fieldset {line-height: 1.5;}
.companyouter .companyinner fieldset div {display:grid;grid-template-columns: 1fr 4fr;width:8.5em;grid-column-gap:1em;}
.companyouter .companyinner fieldset div label {align-items:center;display: flex;justify-content:space-between;fill: var(--blue);font-weight:400 !important;margin:0 !important;}
.companyouter .companyinner fieldset label i {color:var(--midgrey);}
.companyouter .companyinner fieldset input:checked + label {font-weight: bold;}
.companyouter .companyinner fieldset input:checked + label i {color: var(--blue);}
.companyouter .companyinner fieldset div input[type="radio"]:disabled {opacity: 1 !important;background-color: rgb(0,102,255) !important;cursor: default;border-style: solid;}
.companyouter .companyinner .activityform div.do textarea {height: 11.7em;}
.companyouter .companyinner .new {display: grid;grid-template-columns: 1fr 12em;background-color: var(--lightgreengrey);padding: 0.2em;margin: 0.5em 0;}
.companyouter .companyinner .activityform div.alertactivity {grid-column: 1 / span 2;text-align: center;font-size: 1.1em;border-bottom: 1px solid var(--std);}
.companyouter .companyinner .activityform .action.completeact {width: 100%;}
table.clickablerow {width: 100%;}
table.clickablerow tr {transition:var(--fast);max-height: 100vh;overflow: visible;transform: scaleY(1);transform-origin:top center;visibility:visible;}
table.clickablerow tr.ch {max-height: 0vh;overflow: hidden;transform: scaleY(0);visibility:collapse;}
.companyouter .companyinner p.instruct {font-weight: normal;margin: 1em 0;}
.companyouter .companyinner .codetails {display: grid;grid-template-columns: 200px 1fr;grid-row-gap: 0.5em;align-items: flex-start;}
.companyouter .companyinner .codetails div {display: flex;justify-content: space-between;align-items: flex-start;}
.companyouter .companyinner .codetails div textarea {width: calc(100% - 2em);}
.companyouter .companyinner .codetails .npns {display: none;}
.companyouter .companyinner .codetails .npns.show {display: block;}
.companyouter .companyinner #map {width: 100%;aspect-ratio:2/1;position: relative;}
.companyouter .companyinner .peopleholder {display: grid;grid-template-columns: repeat(4,1fr);padding-bottom: 0.3em;margin-bottom: 0.3em;border-bottom: solid 1px var(--muted);align-content: flex-start;grid-column-gap: 1em;}
.companyouter .companyinner .peopleholder a {text-decoration:none;}
.companyouter .companyinner .peopleholder div label {display: block;}
.companyouter .companyinner .peopleholder .notes textarea {min-height: 7.5em;width:100%;}
.companyouter .companyinner .peopleholder .main input[type="text"] {width:100%;}
.companyouter .companyinner .peopleholder:nth-of-type(odd) {background-color:white;}
.companyouter .companyinner .peopleholder:nth-of-type(even) {background-color:var(--lightgrey);}
.companyouter .companyinner .peopleholder .emails div, .peopleholder .phones div {display: grid;grid-template-columns: 1fr 1fr 1fr;margin-bottom: 0.5em;}
.companyouter .companyinner .peopleholder .emails div span,.peopleholder .phones div span {text-align: left;color: var(--amber);}
.companyouter .companyinner h3.peopleadd {display:flex;justify-content:space-between;}
.companyouter .companyinner .peopleholder.ns {display:none;}
.companyouter .companyinner .newc {display:inline-grid;grid-template-columns:1fr 1fr;grid-gap:0.3em;padding-bottom:3em;}
.companyouter .companyinner .newc.ns {display:none;padding:0;}
.companyouter .companyinner .newc button {grid-column:2;}
.companyouter .companyinner .locationinfo .inner {display: grid;grid-template-columns: 100px 1fr 100px 1fr;grid-column-gap: 1em;grid-row-gap: 0.5em;padding:1em 0.5em}
.companyouter .companyinner .activityform > div {display: grid;grid-template-columns: 1fr;align-content: flex-start;}
.companyouter .companyinner .activityform .newact label {display: flex;justify-content: space-between;}
.companyouter .companyinner .activityform .newact .followholder.show {background-color: var(--mutetrans);padding: 0.2em;}
.companyouter .companyinner .activityform .newact .followholder .aholder {border: solid 1px white;margin-top: 0.5em;padding-bottom: 0.5em;margin-bottom: 0.5em;}
.companyouter .companyinner .activityform .newact .followholder textarea {width: 100%;height: 5em;}
.companyouter .companyinner .activityform .newacttype {font-weight: bold;line-height: 1.4;}
.companyouter .companyinner .activityform .newacttype label {font-weight: normal;width: 11em;display: flex;justify-content: space-between;align-items: center;padding:0.25em;margin:0.25em 0;cursor:pointer;background-color:transparent;transition:var(--fast);}
.companyouter .companyinner .activityform .newacttype label:hover {background-color:var(--mutedtrans);}
.companyouter .companyinner .activityform .newacttype label input {display: none;}
.companyouter .companyinner .activityform .newacttype label i {color:var(--midgrey);}
.companyouter .companyinner .activityform .newacttype label input:checked+span {font-weight:bold;background-color:var(--mutedvtrans);width:9.2em;}
.companyouter .companyinner .activityform .newacttype label input:checked+span+i {color:var(--amber);}
.companyouter .companyinner .activityform div .follow label {width: 100%;display: flex;justify-content: space-between;}
.companyouter .companyinner .activityform .newact {display:block;}
.companyouter .companyinner .activityform .newact label {display: flex;justify-content: space-between;}
.companyouter .companyinner .activityform .newact .followholder.show {background-color: var(--mutedtrans);padding: 0.2em;}
.companyouter .companyinner .activityform .newact .followholder label {display: flex;justify-content: space-between;}
.companyouter .companyinner .activityform .newact .followholder textarea {width: 100%;height: 5em;}
.companyouter .companyinner .activityform .newact .followholder .aholder {border: solid 1px white;margin-top: 0.5em;padding-bottom: 0.5em;margin-bottom: 0.5em;}
.companyouter .companyinner .activityform .newact .followholder .aholder label {cursor: pointer;transition: var(--fast);background-color: transparent;}
.companyouter .companyinner .activityform .newact .followholder .aholder label:hover {background-color: var(--amber);}
.companyouter .companyinner .pending h4 {margin-bottom:0.5em;}
.companyouter .companyinner .pending .activityform {margin-bottom: 0px;margin-top:0px;transition: var(--slow);max-height: 100vh;overflow: hidden;border-bottom: solid 1px var(--std);border-top: solid 1px var(--std);transition:var(--fast);}
.companyouter .companyinner .pending .activityform.closeact {padding:0px;max-height: 3em;overflow: hidden;border-bottom: solid 1px var(--std);border-top: solid 1px var(--std);}
.companyouter .companyinner .pending .activityform.notdue {background-color: var(--lightgrey);}
.companyouter .companyinner .pending .activityform.overdue {background-color: var(--highlightvtrans);}
.companyouter .companyinner .pending .activityform .action.closependingact {position: absolute;right: 5px;top: 5px;transition:var(--fast);transform:rotate(0deg);z-index:1000;}
.companyouter .companyinner .pending .activityform.closeact .action.closependingact {transform:rotate(180deg);}
.companyouter .companyinner .activityform.closeact .do,.companyouter .companyinner .activityform.closeact .start, .companyouter .companyinner .activityform.closeact .follow {display: none;}

.actionarea .receivewasteholder {margin: 0.25em;position: relative;padding: 0.5em;}
.actionarea .receivewasteholder::after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 3em 3em 0;border-color: transparent white transparent transparent;right: calc(-0.3em - 2px);top: calc(-0.5em);position: absolute;}
.actionarea .receivewasteholder .closerw {position: absolute;top: -0.3em;right: -0.3em;z-index: 2;font-size: 1.3em;}
.actionarea .receivewasteholder h2 {margin: 0;padding: 0;	border: none;color: var(--highlight);margin-bottom: 1em;}
.actionarea .receivewasteholder .wastein,.actionarea .receivewasteholder .wastein .inner {display: grid;grid-template-columns: 15em 25em;grid-gap: 0.5em;align-items: flex-end;}
.actionarea .receivewasteholder .wastein input.number {width:10em; }
.actionarea .receivewasteholder .wastein .inner {grid-column: 1 / span 2;}
.actionarea .receivewasteholder .wastein .inner h3 {grid-column: 1 / span 2;}
.actionarea .receivewasteholder .wastein .inner .radio {display: flex;}
.actionarea .receivewasteholder .wastein .inner .radio label {display: inline-flex; width: 50%; cursor: pointer; margin-right: 6em;justify-content: space-between;}
.actionarea .receivewasteholder .wastein .inner .rrc {display:inline-block; }
.actionarea .receivewasteholder .wastein .inner .rrc.ns {display:none; }
.actionarea .receivewasteholder .wastein .inner .docholder {display:inline-block;grid-column:2 / span 1; } 
.actionarea .receivewasteholder .wastein .inner .docholder.ns {display:none; }
.actionarea .receivewasteholder .wastein .inner .docholder .fsel {display: flex;justify-content: space-between;padding: 0.2em 0;}
.actionarea .receivewasteholder .wastein .inner .docholder .fsel.ns {display: none;}
.resetwastedoc {grid-column: 1 / span 2;justify-self: flex-end;margin-right: 24em;padding: 0.5em 0;}

.actionarea .otherusers button {background-color: var(--darkgrey);margin-right: 0.5em;transition:var(--slow);}
.actionarea .otherusers button:hover {background-color: white;color:var(--darkgrey);}
.actionarea .otherusers button .count {background-color: var(--bad);color: white;padding: 0 0.3em;border-radius: 50%;font-weight: bold;}
.actionarea .otherusers  {background-color: var(--midgrey);padding: 0.5em 1em;border-radius: 0.3em;margin-top:0.5em;}
.actionarea .otherusers h3 {margin: 0;}
.actionarea .actoutput .statmark {display: inline-block;margin-right:0.5em;margin-left:0.1em;width:1em;}
.actionarea .actoutput .statmark::before {display: inline-block;content: '\f111';font: var(--fa-font-solid);display: inline-block;text-rendering: auto;-webkit-font-smoothing: antialiased;}
.actionarea .actoutput .over .statmark::before {color:red;}
.actionarea .actoutput .due .statmark::before {color:gold;}
.actionarea .actoutput .future .statmark::before {color:green;}

/* end */
@media (min-width: 640px) {.hdetail .ordering form {grid-template-columns:1fr 1fr;grid-gap:1em;}
.hdetail .ordering form h3, .hdetail .ordering form h4, .hdetail .ordering form p, form button, form .fi {grid-column:1 / span 2;}
.hdetail .ordering form .fi {grid-template-columns:1fr 1fr;grid-gap:1em;grid-column:1 / span 2;}
}