a:hover{color:  red;}
a{color:  blue;}
a{font-weight: bold; text-decoration: none; }
body {font-family: arial, helvetica, sans-serif; font-size: 78%; background-color: white;}
div{float: left;}
h1 {color: blue;}
h2 {color: blue;}		
h3 {color: green;}
h3 {font-size: 1.20em; margin-left: 8.5%;}
h4 {color: black;}
h4 {font-size: 1.15em; margin-left: 4%;}
h5 {color: silver;}
h6 {color: black;}
sub {top: 0.4em;}
submit {border: 0; margin: 0;}
sup, sub {vertical-align: baseline; position: relative; top: -0.4em;}
table{font-size: 1em;}
td{vertical-align: top;}
textarea{font-family: arial, helvetica, sans-serif;}
textarea{font-size:  1.05em; width: 100%}
th{font-weight: normal; font-style: italic}
td{vertical-align: top;}
td p{margin: 0; padding: 0;}
@media print {
  .hidden-print {
    display: none !important;
  }
}
.nop p{margin: 0; padding: 0;
	
}
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

/*#wrapper{background-color: red;}
#header{background-color: blue;}
#mainContent{background-color: green;}
#menuBar{background-color: yellow;}*/

.hold,.canc,.archi{color: rgb(253, 174, 174);}
#alertButton .navInset{background-color: red; vertical-align: middle; width: 98%; border-radius: 20px;}
#alertButton:hover{border: inset;}
#alertButton{float: right; background-color: red; vertical-align: middle; text-align: center; border: outset; width: 30px; border-radius: 15px; height: 30px;}
#altmap{width: 100%; height: 50em; overflow: scroll;}
#cdm{height: 6em; width: 12em; position: absolute; left:1em; top: 2.5em;}
#cmcImg{height: 11.5em; position: absolute; left: 18em; top: 0;}
#cmcImg img, #cdm img{height: 90%;}

#custStatus{font-size: 1.2em; font-weight: bold;  margin: 6em 0 0 8.5em; color: green;}
#error_reporting{font-size: 0.9em; margin-top: 3em; padding: 1em 0 1em 0; border-top: 0.1em solid gray ; width: 100%}
#header{border-bottom-width: 0.1em ; height: 9em; border-bottom-style: solid; border-color: gray; margin-bottom: 0.5em;}
#letter p,.letter p, .letter ul{margin: 1em 0 0 10%; padding: 0; width: 80%;}
#letter table,.letter table{margin: 1em 0 0 10%; width: 80%; padding: 0; font-size: 98%;}
#letter, .letter {margin: 0 0 0 10%; border: 0.1em solid #ccc; padding: 2%;}
#letterText{margin-top: 2em; background-color: red; float: left;}
#local {position: absolute; top: 3em; left: 40%; font-size: 2em; color: red; width: 50%; text-align: right;}
#localNote {position: absolute; top: 5em; left: 5%; font-size: 1em; color: red; font-weight: bold; width: 90%; text-align: right;}
#mainContent {min-height: 40em; padding-bottom: 3em;}
#mainContent, #header , #pageFooter{width: 98%; font-size: 1em; padding: 1%; margin: 0;}
#map{width: 50%; height: 50em; overflow: scroll;}
#menuBar .current{background-color : transparent;}
#menuBar {border-bottom: 0.2em solid gray;}
#menuBar a {color: #095E1F;}
#menuBar a:hover{color: red;}
#menuBar, .strapline {width: 98%; margin:0 1% 0 1%; padding: 0;}
#message{color:  red;font-size: 1.2em; width: 100%; padding-left:  12em;}
#officeFooter {border-top:  0.2em solid gray;}
#officeMenu{border-bottom: 0.1em solid gray; border-top: 0.1em solid gray}
#officePage{background-color: white; color: black;}
#operStatus{float: right; text-align: right; font-size: 1em; margin-top: 7.5em; ;}
#wrapper {position: absolute; left: 50%; width: 96%; margin-left: -48%;}
#wrapper{background-color: white; color: black;}


.ll{white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
	}
  
 
 .none,.light,.medLight,.medium,.medHeavy,.heavy,.noneLight ,.lightLight ,.medLightLight ,.mediumLight ,.medHeavyLight ,.heavyLight,.veryHeavy, .veryHeavyLight {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   text-align: center; 
   border-left: 1px solid grey;
   min-height: 2.6em;
 }
  
.none{background-color: rgba(105, 179, 76,1);}
 .light{background-color: rgba(172, 179, 52,1);}
 .medLight{background-color: rgba(250, 183, 51,1);}
 .medium{background-color: rgba(255, 142, 21,1);}
 .medHeavy{background-color: rgba(255, 78, 17,1);}
 .heavy{background-color: rgba(255, 25, 25,1);}
 .veryHeavy{background-color: rgba(255, 0, 0, 1);}
  
 .noneLight{background-color: rgba(105, 179, 76,0.2);}
  .lightLight{background-color: rgba(172, 179, 52,0.2);}
  .medLightLight{background-color: rgba(250, 183, 51,0.2);}
  .mediumLight{background-color: rgba(255, 142, 21,0.2);}
  .medHeavyLight{background-color: rgba(255, 78, 17,0.2);}
  .heavyLight{background-color: rgba(255, 25, 25,0.2);}
 .veryHeavyLight{background-color: rgba(255, 0, 0, 0.2);}
   
.hideOverflow{overflow: hidden; height: 1.25em;}
.hideOverflow:hover{overflow: visible; min-height: 1.25em;}
.testPage{border: 10px solid red;}
  
.menuButton ,.smallButton, .button{background-color: #85E829; color: black; }
.button{padding: 0.4em 0.4em 0.4em 0.4em;}
.menuButton ,.button a, .smallButton a{color: black;font-weight: normal;}
.menuButton :hover,.button:hover, .smallButton:hover{background-color:#28fa11;}
.fwd .button{width: 100%; text-align: center;}
.fH .button {font-size: 80%;}
.slider{
  background: #d3d3d3;
    
  width: 100%; 
  height: 3em;
}

.slider::-webkit-slider-thumb {
    width: 1em;
  height: 3em;
  background: #04AA6D;
  border-radius: 0;}

.slider::-moz-range-thumb {
  width: 1em;
  height: 3em;
  background: #04AA6D;
  border-radius: 0;
}

.smallButton{padding: 0.1em 0.4em 0.1em 0.4em; width: 100%;}
.menuButton {padding: 0; width: 100%; margin: 0.15em 0 0 0;}
.menuButton .navInset{padding: 0.2em 0 0 0; height: 2.1em;}
.sC{margin: 1em 0 1em 0; width: 100%; border-top: 0.1em dashed #999; padding-top: 0.25em; } 
.sCSmall, .sC_FullWidth{margin:0; padding: 0;width: 100%;} 
.sC .button,.sC .submitbutton{width: 49%; margin: 0 26% 0 25%; font-size: 1em; padding: 0.3em 0 0.3em 0;border: none; border-radius : 0; min-height: 2.5em;}
.sCSmall .button {width: 49%; margin: 0 0 0 35%; font-size: 0.9em; padding: 0.15em 0 0.15em 0;border: none; border-radius : 0; min-height:1em;}
.sC_FullWidth .button {width: 98%; margin: 0 0 0 1%; font-size: 1em; padding: 0.3em 0 0.3em 0;border: none; border-radius : 0; min-height:2em;}
.spanButton{background-color:#85E829; color: black; padding: 0 0.5em 0 0.5em;}
.padd {padding: 0.3em;}
.navBack, .navBackLow .navBackLower{text-align: center; background-color:#d8ffd4;}
.navBack{height: 2.75em;}
.navBackLow{min-height: 1.25em;}
.navBackLower{min-height: 1.15em;}
/*.navInset{color: black; background-color: #85E829; width: 98%; height: 98%; margin: 1%; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%);}*/
.navInset, .navInsetPlain, .navInsetBreak, .navInsetLower{display: flex; align-items: center; justify-content: center; width: 98%; margin: 1%; height: 2.5em;border: 0;font-weight: normal;}
.navInset,.navInsetLower  {background-color: #85E829; color: black;}
.navInsetLower {max-height: 1.65em;}
.navInsetPlain{background-color: transparent; color: #999;}
.navInsetBreak{color: #666; background-color: #ccc;}
.navInset:hover, .navInsetLower:hover{background-color: green; color: red;}
.navInsetLower
.navBackLow .navInset{max-height: 1.85em; min-height: 1.35em;}

.vcent{display: flex; align-items: center; justify-content: center; width: 98%; height: 98%; margin: 1%;}
.intra{color: green; font-size: 2em; font-weight: bold; position:absolute; top: 4em; left: 10%;}

.notesTable{border-style: none; text-align: left;}
.notesTable table{margin-left: 10%; width: 80%;}
.notesTable td{text-align: left;border-style: none;}
.addto{margin-right: 1em; width: 80em;}
.alignbottom{vertical-align: 50%;}

.aright{text-align: right;}
.bbg{border-bottom: 0.1em solid #aaa;}
.bbl{border-bottom: 0.1em dashed gray;}
.bold{font-weight: bold;}
.normal{font-weight: normal;}
.booklinks{width: 6.5em;}
.border{border: 0.1em solid black; padding: 0.5%}
.bottomborder, .bb{ border-bottom: 0.1em solid gray; padding-bottom: 0.5em ; margin-bottom: 0.5em;}

.w100 .current{padding: 0 0.5em 0 0.5em;}

.tblHead
{
	width: 100%;
	border-bottom: 0.1em solid grey;
	font-style: italic;
	color: grey;
}

.caddr{width:24em;}
.calcell:hover{background-color: yellow;}
.calcell{text-align: center; width: 13.2%; height: 1em; margin:0.5%; background-color: white; padding: 0.35em 0 0.35em; text-align: center;}   
.calendarA{background-color: #bbb;}
.calendarA{width: 14em; font-size: 0.9em; float: right;}
.calendarB{width: 16em; font-size: 0.9em;}
.calendarC{font-size: 0.9em;}
.cellrotate{ display: inline-block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);  transform: rotate(90deg); white-space:nowrap; display:block; text-align: right; height: 1em; padding-right: 3.5em; background-color: transparent;}
.center {text-align: center;}
.chlink input{height: 1em; font-size: 0.8em;}

.clip1{height: 1em;overflow: auto;} 
.clip15{height: 1.5em;overflow: auto;}
.clip2{height: 2em;overflow: auto;}
.clip25{height: 2.5em;overflow: auto;}
.clip3{height: 3em;overflow: auto;}
.clip35{height: 3.5em;overflow: auto;}
.clip4{height: 4em;overflow: auto;} 

.cname{width:9em;}

.contDiv , .contDivPale {width: 50em; margin-top: 0.5em; padding-top: 0.3em; ;}
.cost{width: 5em; text-align: right; padding-right: 0.5em;}
.costNoText {width: 3em; font-size: 0.9em;}

.cust_no_plus_time{width: 5%; font-size: 0.9em;}
.customer_no_postcode{width:27.5em;}
.customer{width:32em;}
.date{width:6em;}

.dayselect{width: 50%; margin-left: 5em;}
.drimage{padding: 0 0.5em 0.3em 2em;}

.intranetLink{width: 18.5%; text-align: center; border: 0.1em solid grey; margin: 0.2em 0.5% 0.2em 0.5%; height: 19em;}
.justify{text-align: justify;}
.hidden{visibility: hidden; display: none;}
.show{visibility: visible;}


.f09{font-size: 0.9em}
.f10{font-size: 1em}
.f12{font-size: 1.2em}
.fH{width: 97%;font-size: 1.3em; padding-left: 3%; margin: 2em 0 0.5em 0; border-bottom: 0.2em solid; color: blue; border-bottom-color: blue; }

.fleft{float: left;}
.fM {width: 80%;  margin: 0.5em 10% 0.5em 10%; padding: 0; font-size: 1em;}


.fm50{width: 50%; margin-left: 24%;}
.fm60{width: 60%; margin: 1em 19% 2em 19%; border: 0.1em solid #aaa; padding: 1em 1% 2em 1%;}
.fm70{width: 70%; margin: 2em 14% 2em 14%;}
.fm80{width: 80%; margin: 0 0 3em 9%;}
.fm90{width: 90%; margin: 0 0 3em 4%;}
.fm94{width: 94%; padding: 1% 2% 1% 2%; margin: 0 0 0 1%; border: 0.1em solid #eee;}
.fm96{width: 96%; padding: 2%; border: 0.1em solid #eee;}

.fm98 .calendarA{float: left;}
.fm98{width: 98%; padding: 1%; border: 0.1em solid #aaa; margin-top: 1em;}

.fm100{width:100%; border: none;}


.fright{float: right;}
.fs07{font-size: 70%;}
.fs08{font-size: 80%;}
.fs09{font-size: 90%;}
.fs10{font-size: 1em;}
.fs12{font-size: 1.2em;}
.fs15{font-size: 1.5em;}
.fs18{font-size: 1.8em;}

.fwd  {text-align: center;}
.fwH {width: 100%; padding: 0.5em 0 0.5em 0; margin:  0.5em 0 0.5em 0;}
.fwH{border-top: 0.1em solid grey; border-bottom: 0.1em solid grey}
.fwidec{width:3.5em;}
.fwn{font-style: normal; font-weight: normal;}


.bgClear:hover,.bgGray:hover{background-color: #fcf68d;}

.hang{text-indent: -2%; margin-left: 2%;}
.headerselect{font-size: 0.8em; float: right;}
.headlink{width: 55em;}

.headspace{padding-top: 2em;}
.high {background-color: #ffcb32; border-bottom: 0.1em solid gray; border-top: 0.1em solid gray;}



.hourMin{width:2.5em;}
.hover:hover{background-color: rgb(255,255,0);}
.hoverPale:hover{background-color: #fcfcca}

.sHeight {height: 1.25em;}

.hs025{margin-top: 0.25em;}
.hs05{margin-top: 0.5em;}
.hs075{margin-top: 0.75em;}
.hs1{margin-top: 1em;}

.ht01{height: 0.01em;}
.ht1{min-height: 1em;}
.ht15{min_height: 1.5em;}
.ht175{min_height: 1.75em;}
.ht2{min-height: 2em; min-height: auto;}
.ht25{min_height: 2.5em;}
.ht3{min_height: 3em;}
.ht4{min_height: 4em;}
.ht5{min_height: 5em;}
.ht6{min_height: 6em;}
.ht7{min_height: 7em;}
.mb1{margin-bottom: 1em;}
.pdBottom{padding-bottom: 2em;}
.pdBoth{padding: 0.5em 0 0.5em 0;}
.fsH{width: 100%; font-size: 120%; font-weight: bold; border-bottom: 0.1em dashed #aaa; border-top: 0.1em solid #aaa; margin-top: 0.3em;};
.htmlform .cust{margin-left: 60px; font-size: 110%}	
.htmlform .fH{font-size: 130%; width: 100%; font-weight: bold; border-bottom: 1px solid black; color: black;}
.htmlform .sH {width: 100%; border-bottom: 1px dashed grey; font-size: 120%;}
.htmlform .w100{font-size: 100%; font-weight: normal; border: none; width: 100%; color: black;}
.htmlform{width: 1000px; font-size: 16px}
.imagContainer{width: 24%; float: left; padding: 0.5%; border: 0.1em solid gray}
.inf70{width: 37.5em;}
.inf70{width: 70%;}
.inf98{width: 98%;}
.infContent{width: 30em; ;}
.infH2{border-bottom: 0.1em solid gray;}
.infH2{width:50em;}
.infNarrowLabel{width: 8em;}

.infobox {width: 90%; font-size: 1em; border-top: 0.1em; border-bottom: 0.1em; border-left: 0; border-right: 0; border-style: solid; border-color:  #ccc; padding: 0.4em 5% 0.4em 5%; margin: 0 0 0.3em 0; color: #6b6b6b;}
.infobox:hover{color: white; background-color: #666;}
.infobox hr{border: 1px solid #ccc;}
.infoheader {color: green; border-bottom: 0.1em solid green;}
.infoline {font-size: 1em; width: 90%; padding: 0.5em 5% 0.5em 5%;}
.infTag{width:7em;}
.inline{float: none; padding: 0.1em 0.2em 0.1em 0.2em; border-radius: 0.35em; border-style: outset; border: 0.15em solid green}

.intsubmit{float: right;}
.italic{font-style: italic;}
.label , .infWideLabel, .infLabel , .infNarrowLabel, .treatLabel  {padding-right: 0.8em;}
.label , .infWideLabel, .infLabel , .infNarrowLabel, .treatLabel , .sublabel {color: red}
.label {font-weight: normal ;text-align: right; font-style: italic; color: #333}

.labels{color: white; background-color: red; font-family: sans-serif; font-size: 10px; text-align: center;width: 10px; white-space: nowrap;}
.leftborder, .bl{border-left: 0.1em solid #bbb;  box-shadow: inset 0.1em #bbb; box-sizing: border-box;}
.br{border-right: 0.1em solid #bbb;box-shadow: inset 0.1em #bbb; box-sizing: border-box;}

.leftselect .imagelink{padding: 0em; font-size: 0.9em}
.leftselect{width: 4em; margin-left: -4em}
.letterbutton{padding: 0em 0.3em 0 0.3em; font-size: 0.9em; border-radius:0.35em; border-width: 0.15em; border-style: outset; background-color: #85E829; color: black;}
.lH{width: 86%; padding-left:  14%; margin-top:  1em;}
.lightborder{border-top: 0.1em solid gray;}
.lineEmphais {width: 50em; margin-bottom: 0.5em; border-bottom: 0.1em solid #ccc;}
.lineform{font-size: 0.9em; float: right;} 
.linkform{width: 100%; font-size: 0.9em;}
.logonform{width: 30em; margin: 0 25% 0 25%;}


.mapform {width: 50%; margin-top: 2em} 
.mapordermno{width: 2em;}
.mapHover{width: 100%; font-weight: bold;background-color: rgb(255,255,0);}

.mastDiv:hover{background-color: rgb(255,255,0);}
.mastDiv {width: 90em;}

.masterline{width: 90em;margin: 1em 0 0 5em;}
.mb3{margin-bottom: -3em}
.medtext{width: 27.5em;}
.mH{color: green; border-bottom: 0.1em solid rgb(200,200,200)}
.mH{font-size:  1.2em; padding: 0.25em 0 0.15em 4%; margin: 0.55em 0 0.25em 0; width: 96%; border-bottom: 0.1em solid; color: green;}
.mobile{width:8em;}
.monthsline{width: 100%; margin: 0.5em 0 0.5em 0; border-bottom: 0.1em solid green};
.nlink a{font-size: normal;}
.notbooked{color: gray;}
.officeedit {width: 4em;}
.officelink {width: 8em;}
.officenotes{width: 37em; margin-left: 1em; height: 2em;}


.bordAll{
	outline: 0.1em solid grey;
    outline-offset: -0.1em;
	}



.operline{width: 50em;}
.opername{width:11em;}
.order {width: 1.75em;}

.paymlinks {width: 2em;}
.period {width: 5em;}

.pound{width:5em;}
.quoteMoney{width: 7em; font-size:1em; ;}
.radiolist{width:100%; margin-bottom: 1em;}
.rightborder{border-right: 0.1em solid #bbb;}
.routeContent{width:28em;}
.routeLink{width: 3em; padding-right: 1em;}

.selectform .label{padding-top: 0.15em;}
.selectform {width: 60em; margin: 1em 100em 1em 15em;padding: 1em 0 1em 0; border-bottom:0.1em solid rgb(100,100,100);}
.selectform{ border-bottom: 0.1em solid rgb(150,150,150) }
.sH{font-size:  1.05em; font-weight: bold; padding: 0.25em 0 0.15em 5%; margin: 0.55em 0 0.25em 0; width: 95%;};
.shorttext{width:17.5em;}


.ssH{font-size:  1em; font-weight: bold; padding: 0.15em 0 0.1em 7.5%; margin: 0.55em 0 0.25em 0; width: 90%;}
.ssM {width: 80%; padding: 2em 0 0 15%;}
.sublabel{margin-left: 1em;}
.submitline {width: 100%; border-top: 0.1em dashed gray; margin: 0.25em 0 0.25em 0; padding: 0.35em 0 0.25em 0;}
.subwarn{border: 0.2	em solid red; margin-top: 0.4em; padding-top: 0.3em;}
.survLine{width: 42.5em; margin-left: 7.5em;}

.tablehead {border-bottom: 0.1em solid gray; font-style: italic;}
.tasks{float: right}
.topborder, .tb{border-top: 0.1em solid gray; padding-top: 0.5em ; margin-top: 1.5em;}
.topborderlight, .tbl{border-top: 0.1em dashed gray;}
.tbs{border-top: 0.1em solid gray;}
.topborderthick{border-top: 0.2em solid gray; padding-top: 0.5em ; margin-top: 1.5em;}
.topbottomborder, .tbb{border-bottom: 0.2em solid gray; border-top: 0.1em solid gray; padding-bottom: 0.5em ; margin-bottom: 0.5em;; padding-top: 0.25em ; margin-top: 0.25em;}
.topMenu{width: 100%; border-bottom: 0.1em solid gray; margin: 1em 0 1em 0; padding-bottom: 1em;}


.treatment{width: 13em; ;}
.ulnomarg ul{margin: 0;}
.underline{border-bottom: 0.1em solid #ccc;}
.vertical-text{writing-mode: vertical-rl; }
/* .vertical-text {transform: rotate(-90deg); width: 9em; height: 5%; margin: 0; padding: 0; text-align: left;}*/
.veryshorttext{width:  7.5em;}
.viewQuote .addressblock{width: 100%; margin: 4em 0 2em 0;} 
.viewQuote .quoteBody{width: 100%; margin-top: 2em;} 
.viewQuote .quoteimage{float: right; margin-top: -4em}
.viewQuote .quotTable{font-size: 1.1em;} 
.viewQuote .signblock{color: black;width: 100%; margin-left: -10px;} 
.viewQuote .textextra p{text-indent: 0em; margin : 0 0 2em 0; padding: 0; width: 100%}
.viewQuote .textextra{font-size:0.9em; margin: 0; width: 100%; margin: 2em 0 0 0; }
.viewQuote h3{ font-size:1.3em; margin: 1em 0 0 2em; padding: 0}
.viewQuote h4{ font-size:1.15em; margin: 1em 0 0 2em; padding: 0}
.viewQuote p{width: 100%;} 
.viewQuote{font-size: 1.2em; background-color: white; margin: 20px 50px 100px 50px; font-family: arial; width: 625px;} 
.w01{width:1%}
.w02{width:2%}
.w03{width:3%}
.w04{width:4%}
.w005{width:0.5%}
.w05{width:5%}
.w06{width:6%}
.w07{width:7%}
.w08{width:8%}
.w09{width:9%}
.w10{width:10%;}
.w11{width:11%;}
.w12{width:12%;}
.w13{width:13%;}
.w14{width:14%;}
.w015{width:1.5%}
.w15{width:15%;}
.w16{width:16%;}
.w17{width:17%;}
.w175{width:17.5%;}
.w18{width:18%;}
.w19{width:19%;}
.w20{width:20%;}
.w21{width:21%;}
.w22{width:22%;}
.w225{width:22.5%;}
.w23{width:23%;}
.w24{width:24%;}
.w025{width:2.5%}
.w25{width:25%;}
.w26{width:26%;}
.w27{width:27%;}
.w28{width:28%;}
.w29{width:29%;}
.w30{width:30%;}
.w31{width:31%;}
.w32{width:32%;}
.w33{width:33%;}
.w34{width:34%;}
.w035{width:3.5%}
.w35{width:35%;}
.w36{width:36%;}
.w37{width:37%;}
.w38{width:38%;}
.w39{width:39%;}
.w39s{width: 40.1%;}
.w40{width:40%;}
.w41{width:41%;}
.w42{width:42%;}
.w43{width:43%;}
.w44{width:44%;}
.w045{width:4.5%}
.w45{width:45%;}
.w46{width:46%;}
.w47{width:47%;}
.w48{width:48%;}
.w49{width:49%;}
.w50{width:50%;}
.w51{width:51%;}
.w52{width:52%;}
.w53{width:53%;}
.w54{width:54%;}
.w055{width:5.5%}
.w55{width:55%;}
.w56{width:56%;}
.w57{width:57%;}
.w58{width:58%;}
.w59{width:59%;}
.w60{width:60%;}
.w61{width:61%;}
.w62{width:62%;}
.w63{width:63%;}
.w64{width:64%;}
.w065{width:6.5%}
.w65{width:65%;}
.w66{width:66%;}
.w67{width:67%;}
.w68{width:68%;}
.w69{width:69%;}
.w70{width:70%;}
.w71{width:71%;}
.w72{width:72%;}
.w73{width:73%;}
.w74{width:74%;}
.w075{width:7.5%}
.w75{width:75%;}
.w76{width:76%;}
.w77{width:77%;}
.w78{width:78%;}
.w79{width:79%;}
.w80{width:80%;}
.w81{width:81%;}
.w82{width:82%;}
.w83{width:83%;}
.w84{width:84%;}
.w085{width:8.5%}
.w85{width:85%;}
.w86{width:86%;}
.w87{width:87%;}
.w88{width:88%;}
.w89{width:89%;}
.w90{width:90%;}
.w91{width:91%;}
.w92{width:92%;}
.w93{width:93%;}
.w94{width:94%;}
.w095{width:9.5%}
.w95{width:95%;}
.w96{width:96%;}
.w97{width:97%;}
.w98{width:98%;}
.w99{width:99%;}
.w100{width:100%;}

.current {border: 0.1em solid black; text-align: center; }

.warnLine{background-color: rgb(220,220,0); font-weight: bold; font-size: 120%; width: 74%; margin: 0 10% 0 10%; padding: 2%; color: red;}
.weeklinkCurrent a:hover{color: gray;}
.weeklinkCurrent a{font-style: normal; font-weight: normal; color: gray;}
.weeklinkCurrent {width: 100%; border: 0.1% solid grey; text-align: center; border-radius: 0.3em; }

.wideContent{width:36em;font-size:1em;}

.zoneselect{float: right; font-size: 0.8em; padding-bottom: 0.2em}



.mapLabel{width: 250px;}
.mapAddMessage{width: 220px; padding: 2px 10px 2px 0; color: red; text-align: center; font-weight: bold; border: 1px solid red;}

/* text colours*/

.orange{color: #d88d04;}
.red{color: red;}
.amber{color: #f8c51c;}
.green{color: green;}
.resch{color: purple;}
.black{color: black;}
.blue{color: blue;}
.gray{color: gray;}
.active{color: blue;}
.add{color: red;}
.canc{color: gray;}
.done{color: green;}
.fM {color: red;}



/* background-colours*/
.buttonColour {background-color: #85E829;}
.calActive {background-color: orange;}
.nonac {background-color: #d9bb00;}
.teal{background-color: teal;}
.aqua{background-color: aqua;}
.bgClear{background-color: transparent;}
.bgGray{background-color: rgba(125, 125, 125, 0.35);}
.bgGrey{background-color: grey;}
.break {background-color: #f6e976}
.comp{background-color: #ffe771}
.currentcust{background-color: #ffd47e}
.estim {background-color: red;}
.evenBack{background-color: rgba(0, 127, 0, 0.518);}
.highForm{background-color: rgb(255,255,125);}
.highlight {background-color: #fdf87c;}
.light_green{background-color: #a4f9be;}
.lightback{background-color: #fafafa;}
.lightGrey{background-color: #ddd;}
.lightYellow{background-color: #ffffb4;}
.lime {background-color: lime;}
.lowhigh{background-color: #f5ff93;}
.maint {background-color: #aaa;}
.oddBack{background-color: yellow;}
.olive{background-color: olive;}*
.operline:hover{background-color: yellow;}
.pink{background-color: pink;}
.trans {background-color: transparent;}
.trave {background-color: green;}
.treat {background-color: blue;}
.warn{background-color: rgb(220,220,0)}
.yellow{background-color: yellow;}
.calendarB{background-color: #bbb;}

/* Tango Container */
.tango-container {
	width: 97%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
	/* zero horizontal margin, 1rem vertical margin */
  margin: 1rem 0;
  border: 3px solid #FF7442;
  border-radius: 0.5em;
	gap: 20px;
  background-color: #FFA07A;
}

.tango-text-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 3px;
}

.tango-header-text {
	  font-size: 1.5em;
  font-weight: bold;
  color: white;
/*	small dark orange shadow */
	  text-shadow: 1px 1px 1px #FF7442;
}

.tango-subheader-text {
  font-size: 1em;
  color: white;
}

.tango-cta-button {
  background-color: white;
  color: #FF7442;
  padding: 0.5em 1em;
  border: 1px solid white;
  border-radius: 0.5em;
  cursor: pointer;
  font-size: 1.2em;
  transition: background-color 0.3s;
}

/* hover  */

.tango-cta-button:hover {
  background-color: #FF7442;
  color: white;
  border: 1px solid white;
}

/* Tango Brand Colours */
.tango-orange{background-color: #FF7442}
.light-tango-orange{background-color: #FFA07A}