:root {
--std: #333;
--blue: rgba(0,102,150,1);
--lightblue:rgba(173,229,255,1); 
--orange:rgba(230,97,26,1);
--amber:rgba(230,169,26,1);
--green:rgba(50,146,111,1);
--lightbluetrans:rgba(173,229,255,0.2); 
--ambertrans:rgba(230,169,26,0.1);
--bluetrans: rgba(0,102,150,0.1);
--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;
}
/*
blue #006696
lightblue #ADE5FF
orange #e6611a
amber #e6a91a
green #32936f
*/
*,*::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: white;top: 0;display: flex;justify-content: space-between;align-items: center;margin-top: -100px;	padding: 6px;z-index:1000;}
header a , footer a {color:white;text-decoration:none;transition:var(--fast); }
header a:hover,footer a:hover {color:white;text-decoration:underline; }
header img  {height: 50px;background-color: white;width: auto;}
footer {position: fixed;bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-between;padding: 0.3em 1em;background-color: var(--midgrey);font-family: var(--thin);color: white;}
main h1 {margin-bottom:1em; }
main input, main select, main textarea,.hdetail input, .hdetail select, .hdetail textarea,.dialoginner input,.dialoginner select,.dialoginner textarea , .driver.jobinner textarea,.driver.jobinner input, .driver.jobinner select {font-size: inherit;font-family: inherit;color: var(--blue);border: 1px solid var(--blue);border-radius: 0.2em;padding: 0.1em 0.2em;background-color:var(--lightgrey);transition;var(--fast);outline:0px;}
main input:focus {background-color: white;border: 1px solid var(--orange);outline:0px;}
main input:required { border: 1px solid red;outline:0px;}
main input:required:focus {outline:1px solid red; }
main input[type="checkbox"] {width:1em;}
main input:invalid {border: 1px solid red;outline:1px solid red;}
main input:valid{ border: 1px solid var(--blue);outline:1px solid green;}
main button, .hdetail button,.driver.jobinner button {border: none;padding: 0.25em;background-color: var(--blue);color: white;font-size: inherit;font-family: inherit;border-radius: 0.2em;cursor: pointer;transition: var(--fast);border: 1px solid var(--blue);margin: 0.2em 0;}
main button:hover {	color: var(--blue);background-color: white; }
main button:disabled {cursor: initial;color: var(--blue);background-color: white;}

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;}
.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(--blue);
	color: white;
}
main form#login {display: grid;grid-template-columns: 6em 10em;grid-gap: 0.5em;}
main form#login button {grid-column: 2;}
main.user {display: block;padding:1em 1em 4em 1em;}
main.user h1 {font-size: 1.8em;color: var(--blue);}
.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(--blue);}
.sort thead th div {display: flex;justify-content: space-between;}
.sort thead th div span {padding-left: 1em;}
.actionarea h2, .hdetail h2, .driver.jobinner h2 {margin-top: 0.5em;padding-top: 0.5em;margin-bottom: 0.5em;border-top: solid 1px var(--blue);font-size:1.4em;}
.actionarea table {margin-top: 0.5em;}
tr.action, tr.actaction,  tr.csaction {cursor: pointer;transition: var(--fast);}
tr.action:hover td , tr.actaction:hover td, tr.csaction:hover {background-color: var(--lightblue);}
td.nb {white-space: nowrap;}
.companyinner , .driver.jobinner .companyinner ,.hdetail  .companyinner {padding-top: 0.5em;	border-bottom: 1px dotted var(--blue);padding-bottom: 1em;}
.companyinner .companyheader,.hdetail .companyinner .companyheader ,.driver.jobinner .companyinner .companyheader{	margin: 0em;display: grid;grid-template-columns: repeat(2,1fr);grid-column-gap: 5em;padding:0.5em;border-top: 1px dotted var(--blue);}
.driver.jobinner .companyinner .companyheader{	grid-template-columns: repeat(1,1fr);}
.companyinner .companynotes, .hdetail .companyinner .companynotes,.driver.jobinner .companyinner .companynotes {background-color: var(--lightgrey);padding: 0.5em;margin: 0em;border-top: 1px dotted var(--blue);max-height: 8.5em;overflow-y: scroll !important;padding-right: 2em;}
.companyinner .companyactivity,.hdetail .companyinner .companyactivity, .driver.jobinner .companyinner .companyactivity {padding: 0.5em;border-top: 1px dotted var(--blue);background-color: var(--lightgrey);}
.companyinner .cd {grid-column: 1 / span 2;display: grid;grid-template-columns: repeat(3,1fr);padding-top:0.5em;border-top: 1px dotted var(--blue);background-color:white;}
.companyinner .cd .companycontacts, .companytel, .companyemail {padding: 1em 0.5em; padding-top:0;}
.companyinner .companyheader div:nth-child(1), .companyinner .companyheader .crm, .visitoutput .crm {display: grid;grid-template-columns: 1fr 1fr;grid-row-gap: 0.3em;}
.companyinner .companyheader .crmne {display: grid;grid-template-columns: 1fr;grid-row-gap: 0.3em; align-content:flex-end;}
.companyinner input:invalid , .visitoutput .crm  input:invalid{border: 1px solid var(--blue);outline:none}
.companyinner input:valid, .visitoutput .crm input:valid { border: 1px solid var(--blue);;outline:none}
.companyinner input,.companyinner select , .companyinner textarea, .visitoutput .crm textarea{width: 100%;font-size:0.9em;}
.companyinner  input.short , .visitoutput  input.short{width:70%; }
.companyinner  input.long , .companyinner  label.long, .companyinner  textarea.long , .visitoutput textarea.long {grid-column:1 / span 2; width:100%;}
.companyinner  textarea.tall {height:7em; }
.companyinner input[type="checkbox"] {width:1em;font-size:1em}
.companyinner .ns, .visitoutput .ns  {transform:scaleX(0);transition:var(--slow); }
.companyinner .ns:nth-child(even), .visitoutput .crm .ns:nth-child(even){transform-origin:left; }
.companyinner .ns:nth-child(odd), .visitoutput .crm .ns:nth-child(odd) {transform-origin:right; }
.companyinner .ns.show, .visitoutput .crm .ns.show {transform:scaleX(1);}
.companyinner .cd .new,.companyinner .cd .old {display: grid;grid-template-columns: 1fr 2em;grid-gap: 0.2em;}
.companyinner .cd .new input, .companyinner .cd .new label, .companyinner .cd .old input,.companyinner .cd .old label {grid-column: 1;}
.companyinner .cd .add.action {background-color: var(--blue);color: white;align-self: center;justify-self: center;padding: 0.2em;cursor: pointer;transition: var(--slow);border-radius: 0.25em;transition: var(--fast);}
.companyinner .cd  .add.action:hover {background-color: var(--darkgrey);}
.companyinner .cd .old .actions {background-color: var(--darkgrey);margin-top: 1em;padding: 0.25em;display: flex;justify-content: space-between;}
.companyinner .cd .old .actions .action, .companyinner .cd .old .actions a {background-color: rgba(255,255,255,0.3);padding: 0.1em;width: 2em;text-align: center;border-radius: 0.2em;cursor: pointer;color: white;transition: var(--fast);}
.companyinner .cd .old .actions .action:hover,.companyinner .cd .old .actions a:hover {color: var(--blue);	background-color: rgba(255,255,255,0.5);}
.companyinner .noteold {display: grid;grid-template-columns: 3em 1fr;grid-gap: 1em;align-content: flex-start;padding-top: 1em;padding-right:1em; padding-bottom:1em;}
.companyinner .companyheader .companylinks {grid-column: 1 / span 2;padding-top: 1em;}
.companyinner .companyheader .companylinks button.gocompany {background-color: var(--amber);border-color: var(--amber);}
.companyinner .companyheader .companylinks button.gocompany:hover {border-color: var(--blue);background-color:white;}
.closepane {position: absolute;top: 0.5em;right: 0.5em;cursor: pointer;transition:var(--fast);z-index:10;}
.closepane:hover { color:var(--amber); }
.companyinner .companynotes {transition:var(--vslow);overflow:visible; }
.companyinner .companyheader, .companyinner .companyactivity, .companyinner .cd, .companyinner .cdx {transition:var(--vslow); }
.companyinner .companyactivity {max-height:50vh; overflow-Y:scroll; }
.companyinner .companyheader, .companyinner .cd , .companyinner .cdx {max-height: 68vh;overflow-Y: scroll;align-items: flex-start;}
.companyinner .companynotes.closed,  .companyinner .companyheader.closed,  .companyinner .companyactivity.closed,  .companyinner .cd.closed, .companyinner .cdx.closed, .companyinner .cp.closed  {max-height:1.9em; overflow:hidden; }
.companyinner .companynotes.closed .closepane, .companyinner .companyheader.closed .closepane, .companyinner .companyactivity.closed .closepane,  .companyinner .cd.closed .closepane ,  .companyinner .cdx.closed .closepane, .companyinner .cp.closed .closepane {transform:rotate(180deg); }
.companyinner h3 {margin-bottom: 0.5em;}
.companyinner .companynotes .noteold ,.companyinner .companynotes .notenew ,  .driver.jobinner .companyinner .companynotes .notenew {display: grid;grid-template-columns: 2em 1fr 1fr 2em;grid-gap: 0.5em;align-content: flex-start;}
.companyinner .companynotes .notenew {padding-top: 1em;margin-top: 1em;padding-top: 1em;padding-bottom: 1em;border-top: solid 1px var(--midgrey);}
.companyinner .companynotes .noteold textarea, .companyinner .companynotes .notenew textarea {grid-column:2 /span 2; }
.companyinner .companynotes .noteold label.col2 , .companyinner .companynotes .notenew label.col2 { grid-column: 2;}
.companyinner .companynotes .noteold label.col3 {grid-column: 3; }
.companyinner .companynotes .noteold button , .notenew button{grid-column:4;}
.companyinner .companynotes .notenew h4 ,.driver.jobinner .companyinner .companynotes .notenew h4 {grid-column: 1 / span 4; }
.companyinner .fa-thumbtack, .companyinner .fa-pen-field, .companyinner .fa-file-minus {background-color: var(--midgrey);padding: 0.5em;color: var(--blue);text-align: center;}
.companyinner .companyheader  .bookvisit , .visitoutput .bookvisit{display:none;grid-column: 2;width: 50%;margin-top: 0.5em;background-color: var(--orange);border-color: var(--orange);}
.companyinner .companyheader  .bookvisit:hover,.visitoutput .bookvisit:hover  {display:none;background-color: var(--amber);color:var(--dark);border-color: var(--orange); }
main .range {padding: 1em 0;}
main .range label {margin-right: 2em;display: inline-block;}
main .range input {width: 6em;}
main .actdetail {overflow: hidden;transition: var(--fast);position: absolute;top: 0;width: 100%;transform-origin: top center;max-height: 0;background-color: white;padding:0; box-shadow:none;}
main .actdetail.show {min-height: 100vh;z-index: 100;max-height: 2000vh;border: solid 1px var(--std);padding: 0em 0.5em 0.5em 0.5em;box-shadow: 4px 4px 8px var(--darkgrey);}
main .actdetail.show h2 {border:none;}
main .actdetail .closeact {cursor: pointer;position: absolute;top: 0.75em;right: 0;transition: var(--fast);}
main .actdetail .closeact:hover {color:var(--amber);}
main .text {padding: 1em 0;display: flex;justify-content: space-between;}
main .text label {display: inline-block;}
main .text input {width: 10em;}
main .actdetail .closeco, main .actdetail .closelink  {cursor: pointer;position: absolute;top: 0.75em;right: 0;transition: var(--fast);}
main .actdetail .closeco:hover, main .actdetail .closelink:hover   {color:var(--amber);}
td.match {background-color: var(--lightblue);}
#sdc {display: grid;width: 15em;grid-row-gap: 0.5em;margin: auto;}
div.idpc_autocomplete > input {display: block;	width: 100%;}
.logout {cursor:pointer; transition:var(--fast); }
.logout:hover {color:var(--orange); }
main button.tableFilter {
	background-color: var(--orange);
	border-color: var(--amber);
}
main button.tableFilter:hover {
	background-color: var(--amber);
	border-color: var(--amber);
    color:white;
}
tr.action.ns, tr.actaction.ns, tr.csaction.ns {display:none; }
.actionarea table.small {
	font-size: 0.9em;
}
.companyinner .crm .diaryclick, .visitoutput  .crm .diaryclick {display:block;grid-column:2;transform:scaleX(1); }
.companyinner .crm .diaryclick.ns, .visitoutput   .crm .diaryclick.ns {display:none; }
.companyinner .crm .gradediaryclick, .visitoutput   .crm .gradediaryclick {display:block;grid-column:2;transform:scaleX(1); }
.companyinner .crm .gradediaryclick.ns, .visitoutput  .crm .gradediaryclick.ns {display:none; }

.diary {max-height: 60vh;overflow-Y: scroll;padding-right: 1em;font-size: 0.9em;}
.rh {
	background-color: var(--midgrey);
	color: var(--darkgrey);
    padding-top:0.5em;
    padding-bottom:0.5em;
    font-weight:600;
}
.ph {
	background-color: var(--orange);
	color: white;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
.wnav {
	display: flex;
	justify-content: space-between;
	background-color: var(--midgrey);
	align-items: center;
	border-radius: 0.5em;
	padding: 0 0.5em;
}
.nextweek, .prevweek ,.goweek {
	color: var(--orange);
	cursor: pointer;
	transition: var(--slow);
}
.nextweek:hover,.prevweek:hover,.goweek:hover {
	color: var(--amber);
}
.actionarea table.diaryinner {
	margin-top: 0;
}
.diaryinner th {
	background-color: var(--amber);
}
.diaryinner, .diaryinner th, .diaryinner td {
	border: solid 1px #999;
}
.editdetail label {
	display: block;
	margin-top: 0.5em;
}
.ui-widget button {
	font-family: inherit;
	font-size: 1em;
	margin: 0.5em 0em;
	border: none;
	padding: 0.25em 1em;
	color: var(--std);
	background-color: var(--amber);
	cursor: pointer;
	border-radius: 0.3em;
	transition: var(--fast);
}
.ui-widget button:hover {
	color:white;
	background-color: var(--orange);
}
.dialoginner textarea {
	width: 100%;
}
fieldset {
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-row-gap: 0.5em;
	padding: 1.5em 1em 0.5em 1em;
	border: solid 1px var(--blue);
	border-radius: 0.2em;
	background-color: var(--midgrey);
	margin: 1em 0em;
}
legend {
	padding: 0.2em 1em;
	background-color: white;
	border: solid 1px var(--blue);
	border-radius: 0.25em;
}
fieldset .shorttext {
	width: 12em;
}
fieldset .number {
	width: 6em;
	text-align: right;
}
fieldset .decimal {
	width: 8em;
	text-align: right;
}
fieldset .addpurchasedetail {cursor:pointer;transition:var(--fast);color:var(--blue); }
fieldset .addpurchasedetail:hover {color:var(--orange); }
.assignholder {grid-column: 1 / span 2;background-color: var(--lightgrey);margin: 1em 0em;}
.facb {display: inline-grid;grid-template-columns: 1fr 3em;	width: 49%;	margin: 0.2em 0em;}
.facb input {grid-column:2;grid-row:1; }
.facb label {grid-row:1;grid-column:1; }
.facb input:checked+label {color:var(--blue); font-weight:600; }
.prior {
	margin: 0.5em 0em 0.2em 1em;
	display: block;
	padding-left: 0.5em;
}
.prior::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-light);
	content: "\f148";
	transform: scaleX(-1);
	position: absolute;
	left-margin: -1em;
	left: -0.5em;
}


.actions {
	background-color: var(--darkgrey);
	padding: 0.25em;
	display: flex;
	justify-content: space-between;
	margin-top:0.3em;
	margin-bottom:0.3em;
	border-radius:0.25em;
	color:white;
}
.companyinner .cdx .companycontacts , ,hdetail .companyinner .cdx .companycontacts,.driver.jobinner .companycontacts {background-color: var(--lightbluetrans);}
.companyinner .newcontact ,.hdetail .companyinner .newcontact .driver.jobinner .newcontact {display: grid;grid-template-columns: repeat(3,1fr);grid-column-gap: 15px;grid-row-gap: 10px;margin-bottom: 10px;margin-right: -1em;padding: 0.5em 1em;margin-bottom: 0.5em;width: calc(100% - 0em);}
.companyinner .newcontact h3,.hdetail .companyinner .newcontact h3,.driver.jobinner .newcontact h3,.driver.jobinner .newcontact h4  {grid-column: 1 / span 3; }
.companyinner .newcontact textarea, .hdetail .companyinner .newcontact textarea,.driver.jobinner .newcontact textarea {grid-column: 1 / span 2;height: 1.9em;font-family:inherit;font-size:inherit;}
.companyinner .newcontact.exist textarea, .detail .companyinner .newcontact.exist textarea,.driver.jobinner .newcontact.exist textarea {grid-column: 1 / span 3;height: 1.9em;font-family: inherit;font-size: inherit;margin-top: -0.5em;margin-bottom:0.25em;}
main input.cexist, .driver.jobinner input.cexist {width: calc(100% - 2.5em);margin-right: 0.5em;}
.companyinner .cdx, .hdetail.companyinner .cdx, .driver.jobinner .cdx {border-bottom: 1px dotted var(--blue);border-top: 1px dotted var(--blue);}
.companyinner  .edata table,.hdetail .companyinner  .edata table,.driver.jobinner   .edata table{background-color: white;}
.companyinner .companynotes, .hdetail .companyinner .companynotes,.driver.jobinner .companynotes {max-height: 90vh;}
.companyinner h3.pi , .hdetail .companyinner h3.pi ,.driver.jobinner h3.pi{padding-left: 1.5em;margin-bottom:0.5em;}
.companyinner .newcontact.exist, .hdetail .companyinner .newcontact.exist,.driver.jobinner .newcontact.exist{border: 1px solid var(--blue);}
.facb.dialog {grid-template-columns: 1fr 12em;}
.ui-widget input, .ui-widget select, .ui-widget textarea {font-family: inherit;font-size: inherit;background-color: white;border: solid 1px var(--blue);}
.action {cursor:pointer; }
.editappt , .editapptdiary ,.editapptdiaryv , .dodiaryact {background-color: var(--blue);padding: 0.5em 1em;color: white;border-radius: 0.3em;transition:var(--fast);}
.editappt:hover,.editapptdiary:hover ,.editapptdiaryv:hover,.dodiaryact:hover {background-color: var(--orange); }
.addnewavail {display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 100px;padding: 0.5em;background-color: var(--midgrey);margin-bottom:1em;}
.addnewavail div {display: grid;grid-template-columns: 1fr 1fr;margin-bottom: 1em;grid-row-gap: 0.3em;}
.addavail {height: 1.8em;}
.mapkeys {padding: 0.5em 1em;margin: 1em 0em;background-color: var(----lightbluetrans);display: flex;justify-content: space-between;width:100%;}
.routing h3 {text-align:left; }
.routing .missing table , .routing .unavail table {margin-bottom: 1em;}
.mapholder {width: 100%;display: grid;grid-template-columns: 60% 40%;grid-column-gap: 0;padding: 0.5em 1em;border: solid 1px var(--std);margin: 1em 0em;}
.mapholder h2 {grid-column:1 / span 2;  border-top:none;}
.map {width:100%; display:block; aspect-ratio: 4 / 3;}
.capture {width:100%; height:100%; background-color:var(--lightgrey);padding:0.5em 1em;}
.mapholder section h2 {font-size: 1.2em;margin: 0.5em 0 0 0;border-top:none;}
.mapholder section p {margin: 0 0 0.5em 0;}
main.user h1.rl {display: flex;justify-content: space-between;}
.listing {font-size: 0.9em;transform: scaleY(0);overflow: hidden;max-height: 0;transition: var(--slow);transform-origin: top center;}
.dclhead {padding: 1em;background-color: var(--lightgrey);border-radius: 0.5em;border: solid 1px var(--darkgrey);margin: 1em 0;}
.dcllead {margin:1em 0; }
.dcllead tr,.dcllead th {background-color: var(--darkgrey);  color: white;}
.row1 tr, .row1 th {background-color: var(--blue);color: white;}
tr.row2 th {background-color: var(--lightblue);}
.driverlead {font-size: 0.9em;width: 100%;}
.listing.show {transform: scaleY(1);	max-height: 4000vh;overflow: visible;}
.listingclose {font-size: 1.4em;text-align: right;color: var(--blue);}
.assignholder.nm {margin: 0;}

.newaddressing .mapholder ,.newaddressing .mapaddholder {
	width: 100%;
	display: block;
	border: solid 1px var(--std);
	text-align: center;
    max-height:200vh;transform-origin:top center;transform:scaleY(1); transition:var(--slow);
}
.newaddressing .mapholder.ns,.newaddressing .mapaddholder.ns {max-height:0;transform:scaleY(0); }

.newaddressing  .instruct {padding:1em 2em; }
.driver.jobinner .updatemain {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 4px;
}

.companyinner input.shorter {
  width: calc(100% - 4em);
}
.companyinner input.shorter.datepicker {
  width: calc(100% - 6em);
}
.companyinner .editaddressci {
  width: 1em;
  padding-left: 3em;
}
.ui-dialog tr.ns {
	display: none;
}
th.ndp, td.nb.ndp ,button.ndp { display:none;}
button.ndp.show {display:block; margin-top:1em; }
th.ndp.show, td.nb.ndp.show {display:table-cell; }
.dupei [type="checkbox"] {display:none; }
.dupei [type="checkbox"] ~ span::after {
	font-style: normal;
	transition: var(--fast);
	display: inline-block;
	width: 1.4em;
	font-family: "Font Awesome 6 Pro";
	font-size: 1.4em;
	color: var(--darkgrey);
	position: relative;
	content: "\f503";
	font-weight: bold;
}

.dupei [type="checkbox"]:checked ~ span::after {
	color: orange;
	content: "\f4fc";
}
.dupei {
	min-height: 2em;
    width:100%;
    text-align:center;
}

.docs h2 {
  margin: 1em;
}
.docs ul {
  list-style: none;
  display: grid;
  grid-gap: 1em;
  margin: 0;
    margin-top: 2em;
}
.docs p {
  margin: 1em;
  text-align: left;
  display: block;
  width: 100%;
}
body.docs main {
  margin-left: 25px;
  margin-right: 25px;
  width:auto;
  padding-bottom:100px;
}
.docs ul p {
  margin: 0.5em 0;
}

.nwd {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0.5em;
  margin-top:0.2em;
  margin-bottom:0.2em;  background-color: var(--lightblue);
}
.wide {
  grid-column: 2 / span 3;
}
.notbut {
  width: 100%;
  display: inline-block;
  border: solid 1px var(--darkgrey);
  background: white;
  padding: 0.25em;
  text-align: center;
  border-radius: 0.2em;
}
.admintabs, .routingtabs , .cwtabs {
  border-top: 1px solid var(--darkgrey);
  border-bottom: 1px solid var(--darkgrey);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
main .admintabs button , main .routingtabs button, main .cwtabs button {
  background-color: var(--orange);
  border-color: var(--orange);
  color: white;
} 
main .routingtabs button.selected {
   background-color: var(--amber);
   border-color: var(--std);
  color: var(--std);
  }
main .admintabs button:hover , main .routingtabs button:hover,main .cwtabs button:hover {
  background-color: var(--amber);
  border-color: var(--orange);
  color: var(--midgrey);
}



.adminaction .short.number {
	width: 3em;
	text-align: right;
}
.adminaction .short.number.ni {
	color: transparent;
	border: none;
	background-color: transparent;
}
.adminaction .action {
  color: var(--orange);
  cursor: pointer;
  transition: var(--fast);
}

.adminaction .action:hover { color: var(--darkgrey);}
main .usertable input {border:solid 1px var(--blue); outline: none; }
main .usertable input[type="text"] {width:7em; }
main .usertable input.short[type="text"] {width:4em; }







table.sort.collected  { height: 1px;   font-size:0.9em;} /* Will be ignored, don't worry. */
table.sort.collected tr { height: 100%; }
table.sort.collected td { height: 100%; }
table.sort.collected td.nobreak {white-space: nowrap }
table.sort.collected td > div { height: 100%; }
.sort.collected thead th div {display: flex;justify-content: space-between;width: 100%;padding: 0;white-space: nowrap;}
table.sort.collected thead th div span {padding-left: 0em;padding-right:1em;}
table.sort.collected td a.doclink {display: flex;text-align: center;width: 100%;background-color: var(--bluetrans);transition: var(--fast);height: inherit;color: var(--blue);align-items: center;justify-content: center;}
table.sort.collected td a.doclink:hover {background-color: var(--ambertrans);color:black; }
table.sort.collected tbody tr {display:table-row; }
table.sort.collected tbody tr.unmatched {display:none; }

.collected tbody tr.even {background: var(--midgrey);}
.collected tbody tr.odd {background:  white;}
.collected tfoot tr,.collected tfoot tr th,.collected tfoot tr td {background: var(--blue);color: white;}

.collectionsoutput {width: 100%;max-width: calc(100vw - 30px);padding-bottom: 30px;overflow-x:scroll; scrollbar-color: var(--blue) var(--midgrey) ;scrollbar-width: thin;}
tr.dns {
	display: none;
}
.appointment th {white-space: nowrap;}
.hdetail {position: fixed;
  right: 15px;
  left: 15px;
  bottom: 100vh;
  max-height: 87vh;
  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 12px var(--darkgrey); }
.hdetail.ns {
	transform: scaleY(0);
}


.hdetail .drlist {
	display: inline-block;
	max-height: 74vh;
	overflow-y: scroll;
	padding-right: 15px;
	scrollbar-color: var(--blue) var(--midgrey);
	scrollbar-width: auto;
	margin-right: 10px;
}
.hdetail .drlist table {
  width: 100%;
  position: relative;
  margin-top: 1px;
  cursor: pointer;
}
.hdetail  .drlist table tr.late {
  background-color: #9C3848;
  color: white;
}
.hdetail  .drlist table tr.day0 {
  background-color: #1E3888;
  color: white;
}
.hdetail  .drlist table tr.day1 {
  background-color: #51CB20;
  color: white;
}
.hdetail  .drlist table tr.day2 {
  background-color: #42CAFD;
  color: white;
}
.hdetail  .drlist table tr.day3 {
  background-color: #057D17;
  color: white;
}
.hdetail  .drlist table tr.day4 {
  background-color: #FFBA21;
  color: black;
}
.hdetail  .drlist table tr.day5 {
  background-color: #8789C0;
  color: white;
}
.hdetail  .drlist table tr.day6 {
  background-color: #E5A9A9;
  color: black;
}

.hdetail  .drlist table tr.forward {
  background-color: #F2E9DC;
  color: black;
}

.hdetail .drlistouter {
	padding: 1em 2em;
	display: flex;
}	
.hdetail .closedroute {
  position: absolute;
  top: 7px;
  right: 7px;
  cursor:pointer;
  z-index:10000;
  transition:var(--fast);
  color:var(--darkgrey);
  
}
.hdetail .closedroute:hover{
  color:var(--orange);
 }

.hdetail h2, .hdetail p {
  text-align: center;
  padding-top: 0.5em;
}
.hdetail .drlistouter {
	padding: 1em 2em;
}
.hdetail .rdetail table {
	background-color: white;
}
.hdetail .rdetail thead {
	background-color: var(--darkgrey);
	color: white;
}
.hdetail .rdetail tbody tr:nth-child(even) {
	background-color: var(--midgrey);
}
.hdetail .rdetail tbody tr:nth-child(odd) {
	background-color:white;
}



.hdetail .drlistouter {
  padding: 1em 2em;
  display: flex;
  align-content: flex-start;
}
.hdetail .rdetail {
  max-width: calc(100vw - 30em);
  max-height: 74vh;
  display: inline-block;
  overflow-y: scroll;
  padding-right: 20px;
  scrollbar-color: var(--blue) var(--midgrey);
  scrollbar-width: auto;
}

.hdetail .vslistouter {
  padding: 1em 2em;
  max-height:80vh;
  overflow-y:scroll;
}
.hdetail .dvlist {
  padding: 0.5em 0;
  margin: 0.5em 0;
  border-bottom: dotted 1px;
  max-width:100%;
  overflow-X:scroll;
}
.hdetail .dvlist table {
  width: ;
  width: 100%;
}
.hdetail .dvlist table.vsum {
  background-color: var(--lightblue);
}
.hdetail .dvlist table.sort.vsum thead th {
  background-color: var(--blue);
}
.hdetail .dvlist table.vdetail {font-size:0.9em}

.hdetail .dvlist table.vdetail.sort thead th{background-color:var(--darkgrey)} 
.hdetail .dvlist table.sort.vsum {
  width:60%;
}
.driversign {position: absolute;z-index: 900;background-color: rgba(255,255,255,0.97);top: 66px;right: 0;left: 0;bottom: 91px;padding: 25px;}
.ssig canvas {
  border: solid 1px var(--blue);
  display: block;
  margin: 0.5em 0;
}
.bii .reg {
	width: 14em;
	margin-right: 2em;
	display: inline-block;
	margin-top: 1em;
	cursor: pointer;
	background-color: var(--lightblue);
	text-align: center;
	padding: 1em 2em;
	border-radius: 0.5em;
    transition:var(--slow);
}
.bii .reg:hover {
	background-color: var(--midgrey);

}
.cwaction .action {color:var(--orange);transition:var(--fast); }
.cwaction .action:hover {color:var(--blue); }
.collectionsoutp, .collectionsoutt {
	max-width: 97vw;
	overflow-y: scroll;
	padding-bottom: 1em;
	margin-bottom: 1em;
}
.bookin .number, .collected .number {
	text-align: right;
}
.drivernotes tr.unmatched {
  display: none;
}
table.sort.collected td.nsc, table.sort.collected th.nsc {
  display: none;
}
.payables .action  {
	transition: var(--fast);
	color: var(--orange);
}
.payables .action:hover  {
	color: var(--darkgrey);
}
.paydetail tfoot tr {
  font-weight: bold;
  background-color: var(--bluetrans);
}
.payns {
	display: none;
}
.paydetail td.highlight, .paydetail th.highlight {
  background-color: var(--ambertrans);
}
.transportwaste {
	min-height: 250px;
}

.transportwaste p.doclink {margin-top:2em; }
.transportwaste p.doclink a {color:var(--orange);text-decoration:none;transition:var(--fast); }
.transportwaste p.doclink a:hover {color:var(--blue);text-decoration:underline; }
.scroller {max-width:100%;overflow-x:scroll;padding-bottom:2em;margin-bottom:2em; }
.scroller table tbody tr.noshow {display:none; }
.noweee {display:none !important; }
.closehd {
  position:absolute;
  top:12px;
  right:12px;
}

.newuserform label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.25em 0;
}
.newuserform {
  padding-top: 1em;
}
.newuserform h2 {
  padding: 0.5em 0;
  text-align: center;
}
td.d1 ,td.d3 {
	background-color: rgba(50,50,50,0.15);
}
.transport {
  margin: 0.5em;
  padding: 2px 3px;
  background-color: var(--ambertrans);
  display: none;
}
.transport p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.transport.show {
  display: block;
}
main input.number {
	text-align: right;
}

.biphoto, .bifile, .bipdf {
  display: table-row;
}
.biphoto.ns, .bifile.ns, .bipdf.ns {
  display: none;
}
.dds label {
  display: block;
}
.dds input {
  margin-right: 0.5em;
}
.tabbar .count {
	background-color: var(--orange);
	padding: 0.1em 0.5em;
	border-radius: 0.5em;
	margin-left: 1em;
}
tr.ddaction {cursor:pointer; }
.ddcompany .output {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 0.5em;
  transition: var(--fast);
  transform: scaleY(1);
  transform-origin: top center;
  max-height: 300vh;
  overflow: visible;
  margin-top: 1em;
}
.output.ddcmain h3,.ddcompany .output h4, .ddcompany .output p {
  grid-column: 1/ span 2;
}
.ddcompany .output.ns {
  transform: scaleY(0);
  max-height: 0;
  overflow: hidden;
}
.ddcompany .tabbar, .tabbar.ddp {
	margin: 0.5em 0;
	padding: 0.2em 0.3em;
	border: solid 1px var(--darkgrey);
	border-radius: 0.2em;
}
.ddcompany .output p {
  margin: 1em 0 1em 0;
}
.ddcompany .output.ddccontacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ddcompany .output.ddccontacts h3 {
  grid-column: 1 / span 2;
}
.ddcompany .output.ddccontacts .dcontact {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 0.5em;
  padding: 0.2em 0.3em;
  border: solid 1px var(--darkgrey);
  background-color: var(--bluetrans);
  border-radius: 0.2em;
}
.ddcompany .output.ddcnotes {
	display: block;
}
.ddcompany .output.ddduedil h3 {
  grid-column: 1 / span 2;
}
.ddcompany .output.ddduedil .resend.ddholder {
  grid-column: 1 / span 2;
  background-color: var(--lightbluetrans);
  padding: 0.3em 0.5em;
  border: solid 1px var(--darkgrey);
  margin: 1em 0;
}