@font-face {font-family: 'Gotham';src: url('/assets/Gotham-Book.woff2') format('woff2'),url('/assets/Gotham-Book.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}
@font-face {font-family: 'Calibri';src: url('/assets/Calibri-Light.woff2') format('woff2'),url('/assets/Calibri-Light.woff') format('woff');font-weight: 300;font-style: normal;font-display: swap;}
@font-face {font-family: 'Calibri'; src: url('/assets/Calibri-Bold.woff2') format('woff2'),url('/assets/Calibri-Bold.woff') format('woff');font-weight: bold;font-style: normal; font-display: swap;}
@font-face {font-family: 'Calibri';src: url('/assets/Calibri.woff2') format('woff2'),url('/assets/Calibri.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}

@font-face {font-family: 'Gotham Rounded';src: url('/assets/GothamRounded-Bold.woff2') format('woff2'),
url('/assets/GothamRounded-Bold.woff') format('woff');font-weight: bold;font-style: normal;font-display: swap;}

@font-face {font-family: 'Gotham Rounded';src: url('/assets/GothamRounded-Book.woff2') format('woff2'),
url('/assets/GothamRounded-Book.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}

:root {--greentrans:rgba(0,79,34,0.2);--green: #007934;--lightgrey: #d9d8d6;--ulight:#F4F3F1;--darkgrey: #54565a;--std:#54565b;--orange : #f19220;--red :#bc2026;--redtrans:rgba(188,32,38,0.4);--blue :#1f9cd8;--hover: brightness(125%);--vslow: all 1s linear;--slow: all 0.6s linear;--fast: all 0.3s linear;--normal :'Calibri', sans-serif;--header :'Gotham Rounded', sans-serif;}

*,*::before,*::after {box-sizing: border-box;}
body {padding:0;margin:0;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: var(--green);color: white;top: 0;display: flex;justify-content: space-between;align-items: center;margin-top: -100px;padding: 6px;z-index:1000;}
header img {height: 50px;background-color: var(--green);width: auto;}
footer {position: fixed;bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-between;padding: 0.3em 1em;background-color: var(--green);color: white;}
header a , footer a {color:white;text-decoration:none;transition:var(--fast); }
header a:hover,footer a:hover {color:var(--lightgrey);text-decoration:underline; }
.ui-widget {font-family: inherit;font-size: inherit;}
.ui-widget-header {border: 1px solid var(--green);background: var(--green);color: white;font-weight: bold;}
input, select, textarea, .ui-widget input, .ui-widget select, .ui-widget select {font-size: inherit;font-family: inherit;color: var(--green);border: 1px solid var(--green);border-radius: 0.2em;padding: 0.1em 0.2em;background-color:var(--ulight);transition;var(--fast);outline:0px;}
input:focus, .ui-widget input:focus {background-color: white;border: 1px solid var(--orange);outline:0px;}
input:required, .ui-widget input:required { border: 1px solid red;outline:0px;}
input:required:focus , ui-widget input:required:focus {outline:1px solid red; }
input[type="checkbox"], .ui-widget input[type="checkbox"] {width:1em !important;}
input:invalid, .ui-widget input:invalid {border: 1px solid var(--red);outline:1px solid var(--red);}
input:valid, .ui-widget input:valid{ border: 1px solid var(--green);outline:1px solid var(--green);}
input[type="checkbox"] , .ui-widget input[type="checkbox"] {border: none; outline: none;accent-color: green;}
input:disabled,textarea:disabled , .ui-widget input:disabled, .ui-widget textarea:disabled {border-color: var(--lightgrey);background-color: transparent;} 
button, .ui-widget button {border: none;padding: 0.25em;background-color: var(--green);color: white;font-size: inherit;font-family: inherit;border-radius: 0.2em;cursor: pointer;transition: var(--fast);border: 1px solid var(--green);margin: 0.2em 0;}
button:hover, .ui-widget button:hover {filter: var(--hover); }
input.number {text-align:right;}
.action { cursor: pointer;transition: var(--fast);}
td>.action{color:var(--green);}
h3>.action{color:var(--green);}
.action:hover {filter: hue-rotate(-90deg);}
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 h1 {margin-bottom: 1em;font-family: var(--header);font-weight: 400;}
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;}
main.user .top {background-color: white;margin-top: -10px;position: sticky;top: 67px;padding-top: 10px;z-index: 2;}
main.user h1 {margin: 0; padding: 0;margin-left:15px;}
main.user .tabs {background-color: var(--lightgrey);padding: 0.25em 0.5em;margin: 1em 0 0 0;}
main.user h2 {font-weight: normal;color: var(--green);padding: 0;margin: 0;}
main.user .actionarea {padding:12px; }
main.user .actionarea table {margin-top: 0.5em;margin-bottom:50px;}
main.user .actionarea table.zebra tbody tr:not([style="display: none"]) {background: var(--ulight);}
main.user .actionarea table.zebra tbody tr:not([style="display: none"]):nth-child(2n) {background:white;}
main.user .actionarea table.sort thead th {background-color: var(--darkgrey);color: white;cursor: pointer;transition: var(--fast);}
main.user .actionarea table.sort thead th div {display: flex;justify-content: space-between;}
main.user .actionarea table.sort thead th div span{display:inline-block;margin-left:1em;}
main.user .actionarea table td button {margin:0; }

main.user .welcome {background-color: var(--lightgrey);margin: 10vh -15px;display: flex;align-content: center;justify-content: center;background-image: url(/assets/hero.jpg);background-size: 700px auto;background-repeat: no-repeat;background-position-x: center;}
main.user .welcome div {width: 700px;color: white;padding: 15px 200px 15px 15px;line-height: 1.4em;background-image: url(/assets/welcome.png);background-size: cover;z-index: 100;font-size:1.1em}
main.user .welcome div h2 {color: white;font-family: var(--header);}
main.user label {display: inline-block;padding-right: 1em;font-weight: bold;}
main.user .formcol2 {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 15px;width: 400px;}
main.user .formcol2 button {grid-column: 2;}

main.user table tr.alert {background-color: var(--redtrans) !important;}
main.user .actionarea #sdc, main.user .actionarea .sdc , .ui-widget #sdc, .hdetail .sdc {display: grid;grid-template-columns: 173px 362px;grid-row-gap: 0.3em;padding-bottom:3em;}
main.user .actionarea .sdc , .ui-widget #sdc .hdetail .sdc {padding-top:1em;padding-bottom:1em;}
main.user .actionarea #sdc input, main.user .actionarea #sdc button,main.user .actionarea .sdc input,main.user .actionarea .sdc button,main.user .actionarea .sdc textarea,
.ui-widget #sdc input, .ui-widget #sdc button, .hdetail .sdc input,.hdetail .sdc button,.hdetail .sdc textarea {grid-column: 2;width: 100%;}
main.user .sdc textarea {height: 8em;}

main.user .actionarea .opener .opencontent, .ui-widget .opener .opencontent {transform: scaleY(0);transform-origin: top center;transition: var(--slow);max-height: 0px;overflow: hidden;}
main.user .actionarea .opener .lead, .ui-widget .opener .lead ,.hdetail .opener .lead {background-color: var(--darkgrey);color: white;transition: var(--fast);cursor: pointer;display: flex;justify-content: space-between;align-items: center;height: 2em;border-radius:0.2em;}
main.user .actionarea .opener .lead:hover, .ui-widget .opener .lead:hover , .hdetail .opener .lead:hover {background-color: var(--lightgrey);color: var(--green);}
main.user .actionarea .opener.open .opencontent, .ui-widget .opener .opencontent {transform: scaleY(1);max-height: 200vh;}
.ns , main.user .actionarea #sdc button.ns, .ui-widget #sdc button.ns {display:none !important }
main.user .actionarea .opener .lead h3, .ui-widget .opener .lead h3,.hdetail .opener .lead h3 {margin:0;padding:0;padding-left:1em; }
main.user .actionarea .opener .lead span, .ui-widget .opener .lead span {display:inline-block;transition:var(--slow); margin-right:1em;}
main.user .actionarea .opener.open .lead span, .ui-widget .opener.open .lead span {transform:rotate(180deg); }
main.user .actionarea h2.newsite, .ui-widget h2.newsite, main.user .actionarea h2.existsite {display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5em;}
main.user .actionarea .stdc, .hdetail .stdc {display: grid;width:auto;grid-template-columns: repeat(2, 160px 250px);grid-row-gap: 0.3em;grid-column-gap:2em;padding-bottom: 3em;padding-top: 1em;}
.ns.show {display:inline-block !important }


.reset {display: block; padding: 0px 50px;}
.stdc.narr textarea {grid-column: 2/ span 3;}
.stdc.narr button {grid-column: 2 / span 3; margin-top: 0.5em;}
.scroller {max-width:calc(100vw - 30px);overflow-x:scroll; }
main.user label.w3w {
  grid-column: 1 / span 3;
}
main.user label.w3w span {
  display: inline-block;
  padding-left: 1em;
  font-weight: 400;
}
main.user input.w3w {
  grid-column: 4;
  grid-row: 1;
}
video {margin:auto;width:100%; max-width:720px;height:auto;  aspect-ratio: 1 / 0.6; }
.stdc.sitecheck p {
	grid-column: 1 / span 4;
	margin: 0;
	text-align: center;
	background-color: var(--lightgrey);
}
main.user .actionarea .stdc.sitecheck.addon , main.user .actionarea .sdc.addon, main.user .actionarea .stdc.addon, .hdetail .sdc.addon, .hdetail .stdc.addon {
  margin-top: -3em;
}
.hdetail .sdcl {
	display: grid;
	width: auto;
	grid-template-columns: 240px 415px;
	grid-row-gap: 0.3em;
	grid-column-gap: 2em;
	margin-top: -2.5em;
	padding-bottom: 3em;
	padding-top: 1em;
}
.stdc div, .sdcl div {
	color: var(--green);
	border: solid 1px var(--lightgrey);
	padding: 1px 2px;
	border-radius: 3px;
}
.hdetail .photos {
	padding: 1em 0em;
	display: grid;
	grid-template-columns: 240px 415px;
	grid-row-gap: 1em;
}
.hdetail .photos img {
  max-width: 100%;
  height: auto;
  padding: 2px 1px;
  border: solid 1px var(--darkgrey);
}

.hdetail {
	position: fixed;
	bottom: 0;
	left: 2px;
	right: 2px;
	max-height: calc(100vh - 104px);
	background-color: white;
	padding: 10px 15px;
	border: solid 1px var(--darkgrey);
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	overflow-y: scroll;
	margin-bottom: -18px;
	z-index: 200;
    opacity:1;
    transition:opacity 1s linear;
    transform-origin:bottom center;
    transform:scaleY(1);
    padding-top:0;
}
.hdetail.ns {
	max-height:0;
	padding: 0px;
	border: none;
	border-top-left-radius: 0;
	border-top-right-radius:0;
	overflow-y: hidden;
	z-index: -1;
    opacity:0;
    transform:scaleY(0);

 }
.hdetail .closedetail {
	position: absolute;
	right: 18px;
	top: 18px;
	font-size: 1.4em;
}
.hdetail .hh {
	background-image: linear-gradient( var(--lightgrey), white );
	padding-top: 10px;
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
}

.threec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  padding-top: 1em;
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: solid 1px var(--darkgrey);
}
.threec .van {
  text-align: center;
  cursor: pointer;
  border-radius:0.4em;
  transition:var(--fast);
}
.threec .van.selected {
	background-color: var(--lightgrey);
	outline: solid 1px var(--green);
}
.threec .van h4 {
  background-color: var(--lightgrey);
  margin: 0;
  padding: 0.1em;
  margin-bottom: 0.2em;
  border-radius:0.4em;
}
.threec .van img {
  width: 100%;
  height: auto;
}
.threec .van input {
  display: none;
}
.nstv {display:none !important; }
.stdc.van img {
	max-height: 160px;
	width: auto;
}
.stdc.van figcaption {
	grid-column: 1 / span 2;
	grid-row: 2;
}

.access {
  display: flex;
  justify-content: space-between;
  width: 600px;
  margin-top: 3em;
  padding: 0.5em;
  border: solid 1px var(--lightgrey);
  border-radius: 0.5em;
  margin-right: -5em;
}
.access span {padding:0 0.5em; color:var(--green);cursor:pointer;}
.distform {
  display: grid;
  grid-template-columns: 130px 65px 100px;
  grid-column-gap: 10px;
}
.distform input {
  text-align: right;
  height: 2em;
}

.mk {
  display: inline-block;
  text-align: center;
  border: solid 1px var(--lightgrey);
  padding-top: 2px;
  margin-left:3px;
  margin-right:3px;
}
.mapkey {
  margin-top: -1em;
  margin-bottom: 0.5em;
}
.mk figcaption {
  width: 100%;
  background-color: var(--lightgrey);
  padding: 0px 2px;
}
.maps {
	position: relative;
	width: 100%;
	border: solid 2px var(--darkgrey);
	display: grid;
	grid-template-columns: 7fr 3fr;
	grid-column-gap: 1em;
}
.maps .map {
	width: 100%;
	aspect-ratio: 3 / 2;
	display: inline-block;
}
 .maps .capture{
display:inline-block;
 }
 
.capture section {
	background-color: var(--lightgrey);
	height: 100%;
	padding: 0.5em 1em;
}

.capture section p, h2.plan, h3.plan {
  display: flex;
  justify-content: space-between;
}

.pd {padding:0;background-color:transparent;max-height:0;transform:scaleY(0);transition:var(--fast);overflow:hidden;transform-origin:top center; }

.pd.open {
	background-color: var(--greentrans);
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	border: solid 1px var(--green);
	position: relative;
	padding: 0.5em 1em;
	transform: scaleY(1);
	max-height: 1000vh;
	overflow: visible;
} 
.pd.open .closedetail {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 300;
}
.pd.open .pdo {background-color: rgba(255,255,255,0.2);padding: 0 0.2em;}
.pd.open .pdo div {display: inline-grid;grid-template-columns: 9em 12em;padding-bottom: 0.5em;padding-right: 1em;}
.pd.open .pdo input {background-color: rgba(255,255,255,0.5);}
.pd.open .datepicker .day {display: inline-block;text-align: center;padding: 0.2em;margin: 0.2em;  border-radius: 0.4em;}
.pd.open .datepicker .day.notselected {  background-color: #eeeeee;transition: var(--fast);cursor: pointer; border: solid 1px #eee;}
.pd.open .datepicker .day:hover.notselected {background-color: white;}
.pd.open .datepicker .day.day.selected {border: solid 1px var(--red);}
.pd.open .datepicker .day figcaption {font-size: 0.9em;}
.pd.open h4 {text-align: center;margin: 1.2em 0em 0 0em;padding: 0.2em 0.2em;border-top: 1px solid var(--std);border-bottom: 1px solid var(--std);background-color: var(--ulight);}
.pd.open .plan {display: grid;grid-template-columns:360px 250px 150px;}
.pd.open .plan p , .pd.open .plan h3 {grid-column: 1 / span 3;}
.pd.open .plan input,.pd.open  .plan button {grid-column: 2 / span 1;}
.pd.open .plan label {grid-column: 1 / span 1;}
.pd.open .plan textarea {grid-column: 2 / span 2;}
.pd.open .plan {background-color: var(--ulight);padding: 0.5em;}
.pd.open .daytotals,.pd.open .activitydetail {display: grid;grid-template-columns: 256px 1fr;align-content: flex-start;}
.notselected {  background-color: #eeeeee;transition: var(--fast);cursor: pointer;border: solid 1px #eee; }
.day:hover.notselected {background-color: white;}
.day.selected {border: solid 1px var(--red);}
main.user .actionarea table.collected {font-size: 0.9em;}
main.user .actionarea table.collected tfoot td { background-color: var(--greentrans);  font-weight: bold;}
tr {display:table-row; }
tr.ns {display:none; }
.slstat1 {background-color: rgba(17,131,26,0.4);}
.slstat2 {background-color: rgba(249,214,0,0.4);}
.slstatg {background-color: rgba(211,17,0,0.4);}
tr.noshow {display:none; }
.opener.open.order p.alert {color: var(--red); font-weight: bold;}

.graphs {display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;margin-bottom:3em; }
.graphs .graph {width:100%;aspect-ratio:3 / 2; border: solid 1px #666; }
.graphs .st {grid-column:1 / span 2; }
main.user .actionarea .finrep {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 2em;
  margin-top:1em;
}
main.user .actionarea .finrephead, main.user .actionarea .finrepsum {
  border: none;
  background-color: transparent;
  padding: 0;
}
main.user .actionarea .finrephead.show,main.user .actionarea .finrepsum.show  {
  border: solid 1px var(--std);
  background-color: var(--ulight);
  padding: 0.3em 0.5em;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 0.5em;
}
main.user .actionarea .finrepsum h2,main.user .actionarea .finrepsum h3,main.user .actionarea .finrephead h2,main.user .actionarea .finrephead h3,main.user .actionarea table,main.user p {
  margin: 0;
  padding: 0;
  justify-content: center;
}
.finrephead input {
  width: 5em;
}
.finrephead table, .finrephead p, .finrepsum table {
  grid-column: 1 / span 2;
}
.finrephead table {
  width: max-content;
}
.finrepsum th {
  background-color: var(--green);
  color: white;
}
main.user .actionarea .finrepsum.show {
  grid-row-gap: 0;
}
main.user .actionarea .finrephead, main.user .actionarea .finrepdetailholder {
  border: none;
  background-color: transparent;
  padding: 0;
  }
main.user .actionarea .finrepdetailholder.show  {
  border: solid 1px var(--std);
  background-color: var(--ulight);
  padding: 0.3em 0.5em;
  grid-column: 1 / span 2;
}  
main.user .actionarea .finrepdetailholder table {
	width: 100%;
	margin-top: 1em;
}
table.financereportdetail tbody tr.odd th, table.financereportdetail tbody tr.odd td {background-color:var(--greentrans); }
table.financereportdetail tbody tr.even th, table.financereportdetail tbody tr.even td {background-color:white; }
table.financereportdetail thead th {background-color: var(--green);color: white;}
table.financereportdetail tfoot th {color:var(--green);font-weight:600; }
main.user .finrepdetailholder h2, main.user .finrepdetailholder h3 {
  display: inline-flex;
  padding-right: 2em;
  align-items: center;
}
.zebra.sort.unplanned, .unplanned thead {
	background-color: white;
}
#capture section p {
  display: flex;
  justify-content: space-between;
  margin: 0.25em 0;
}

#capture section p span:nth-child(1) {font-weight: normal;}
main.user .dateselectorsdash label {display: block;}
main.user .dateselectorsdash label input[type="checkbox"] { display:none;}
main.user .dateselectorsdash label input[type="checkbox"] + span {cursor:pointer;width:8em;margin:0;padding:0.2em 0;display:block;width:8em; background-color:transparent;position:relative;}
main.user .dateselectorsdash label input[type="checkbox"] + span::after {font-style:normal;transition:var(--fast);display:inline-block;width:1.2em;font-family:"Font Awesome 6 Pro";font-size:1.2em;color:var(--green);font-weight:400;position:absolute;content:"\f111";right:0px;top 0px;}
main.user .dateselectorsdash label input[type="checkbox"]:checked + span::after {font-weight:800;}

main.user .dateselectorsdash {
  max-height: 2em;
  position: relative;
  transition: var(--slow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 12em 12em 1fr;
  transition:var(--slow);
  grid-column-gap: 1em;
}
main.user .dateselectorsdash.open {
  max-height: 300vh;
  overflow: visible;
}
main.user .dateselectorsdash.open i {
transform:Rotate(180deg);
}
main.user .dateselectorsdash .opener {
	grid-column: 1 / span 3;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	background-color: var(--greentrans);
	padding: 0 0.25em;
}
main.user .dateselectorsdash  .weekinner {
	overflow-Y: scroll;
	scrollbar-color: var(--green), var(--greentrans);
}
main.user .dashinstruct {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
main.user .dashinstruct p {
	padding-top: 4em;
}

main.user .dashinstruct .action.gendash {
  width: 12em;
}
main.user .graphs h2 {
  grid-column: 1 / span 2;
}


main.user .driversheets  {
  padding-top: 1em;
}
main.user .driversheets h2 {
  display: inline-block;
  padding: 0.2em 0.5em;
  margin-right: 0.2em;
  border: solid 1px var(--green);
  background-color: var(--greentrans);
  border-top-right-radius: 0.3em;
  border-top-left-radius: 0.3em;
  cursor: pointer;
  transition:var(--fast);
  font-size:1.2em;
}

main.user .driversheets .driver {
	display: grid;
	grid-template-columns: repeat(7,1fr);
	grid-gap: 1em;
	background-color: var(--green);
	padding: 0.5em;
	transition: var(--slow);
	transform: scale(1);
	transform-origin: left top;
	max-width: 100vw;
	max-height: 10000vh;
	overflow: visible;
}
main.user .driversheets .driver.ns {
	padding: 0em;
	transform: scale(0);
	max-width: 0px;
	max-height: 0px;
    background-color:transparent;
}
main.user .driversheets .driver .timesheetinner {
  background-color: white;
  border: solid 1px var(--green);
  padding: 3px;

}
main.user .driversheets .driver .timesheetinner h3 {
  margin: 0;
  padding-bottom: 0.2em;
}
main.user .driversheets h2.selected {
  background-color: var(--green);
  color: white;
}
main.user .driversheets .driver .timesheetinner .jobdrop {
	background-color: var(--orange);
	color: white;
}


main.user .planningactionholder .postcodes01 div,main.user .planningactionholder .postcodes02 div ,main.user .planningactionholder .postcodes03 div  {
  display: inline-block;
  width: 13em;
  margin: 3px 3px 3px 0px;
}
main.user .planningactionholder .postcodes01 div div.inner,main.user .planningactionholder .postcodes02 div div.inner,main.user .planningactionholder .postcodes03 div div.inner {
  display: flex;
  justify-content: space-between;
  background-color: var(--greentrans);
  padding: 2px 5px;
  border: solid 1px var(--green);
  align-items: center;
}
main.user .planningactionholder .postcodes01 div div.inner h3 , main.user .planningactionholder .postcodes02 div div.inner h3, main.user .planningactionholder .postcodes03 div div.inner h3{
  margin: 0;
}

main.user .planningactionholder .postcodes01 div div.inner .kg , main.user .planningactionholder .postcodes02 div div.inner .kg , main.user .planningactionholder .postcodes03 div div.inner .kg {
  width: 3em;
  text-align: right;
}
main.user .planningactionholder .postcodes01 div div.inner .count,main.user .planningactionholder .postcodes02 div div.inner .count,main.user .planningactionholder .postcodes03 div div.inner .count {
  width: 1.5em;
  text-align: right;
}
main.user .planningactionholder .postcodes01 div div.inner i,main.user .planningactionholder .postcodes02 div div.inner i ,main.user .planningactionholder .postcodes03 div div.inner i{
color:white;
transition:var(--fast);
}
main.user .planningactionholder .postcodes01 div div.inner i:hover,main.user .planningactionholder .postcodes02 div div.inner i:hover ,main.user .planningactionholder .postcodes03 div div.inner i:hover {
color:var(--green);
}
main.user .postcodes01 h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-bottom: 1em;
}
.planningactionholder, .timesheets {
	border: solid 2px var(--green);
	padding: 2px 5px;
	margin-bottom: 1em;
}
.vpinner {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 0.5em;
}
.vpinner button {
  grid-column: 2;
}

.rc1 {
	background-color: #A5A5A5;
	color: white;
}
.rc2 {
	background-color: #ED7D31;
	color: white;
}
.rc3 {
	background-color: #99cc00;
	color: white;
}
.rc4 {
	background-color: #21B3FF;
	color: white;
}
.rc5 {
	background-color: #990099;
	color: white;
}
.filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  background-color: var(--greentrans);
}
.filter.off {
  display: none;
}
.dashrow {
  display: none;
}
.dashrow.visible {
  display: table-row;
}
.fdatalist {
  grid-column: 1 / span 2;
  transition: var(--fast);
  max-height: 2000000vh;
  transform-origin: top;
  transform: scaleY(1);
}
.fdatalist.collapsed {
  transform: scaleY(0);
  max-height: 0;
  overflow: hidden;
}
.graph.vd {cursor:pointer; }
main.user .vddataclick {
	grid-column: 1 / span 2;
	margin-bottom: -1em;
}



.graph.rb {
	border-color: var(--green);
	box-shadow: 2px 2px 2px var(--greentrans);
}

.cdatalist {
  grid-column: 1 / span 2;
  transition: var(--fast);
  max-height: 2000000vh;
  transform-origin: top;
  transform: scaleY(1);
}
.cdatalist.collapsed {
  transform: scaleY(0);
  max-height: 0;
  overflow: hidden;
}
.graph.cd {cursor:pointer; }
main.user .cddataclick {
	grid-column: 1 / span 2;
	margin-bottom: -1em;
}

.dashrow.c3 {
  background-color: #FF0400;
  color: white;
}
.dashrow.c1 {
  background-color: #00DB18;
  color: black;
}
.dashrow.c2 {
  background-color: #0006FF;
  color: white;
}
.dashrow.c4 {
  background-color: #00FFF4;
  color: black;
}
.remkgdetail,.remkg {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-gap: 0.25em;
}
.remkg button {
  grid-column: 1 / span 2;
}
.eaoutput {
	padding: 2em 0;
	font-size: 0.9em;
}
.planningdataclick.pc {grid-column:1 / span 2; cursor:pointer; }
.planningdatalist {
	grid-column: 1 / span 2;
	transition: var(--fast);
	max-height: 2000000vh;
	transform-origin: top;
	transform: scaleY(1);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-start;
	grid-column-gap: 1em;
}
.planningdatalist .head {grid-column:1 / span 2; }

.planningdatalist.collapsed {
  transform: scaleY(0);
  max-height: 0;
  overflow: hidden;
}
.planningdatalist table {font-size:0.85em; }
.planningdatalist table th {background-color:var(--darkgrey);color:white; }