*{
  margin: 0;
  padding: 0;
}

html{
	height: 100%;
}

body{
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 25px;
  color: #333333;
  background-color: #454B6C;
	height: 100%;
}


h1{
  font-size: 30px;
  color: #403260;
  font-weight: 300;
  margin-bottom: 15px;
}


h2{
  font-size: 20px;
  color: #403260;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 20px;
}

h3{
  font-size: 18px;
  color: #403260;
  font-weight: 300;
  margin-bottom: 10px;
  margin-top: 20px;
}




p{
  margin-bottom: 10px;
}

a{
  text-decoration: none;
  color: #403260;
  cursor: pointer;
}
a:hover{
  color: #0072BC;
}
a:focus{
  outline: none;
}

img{
  vertical-align: middle;
}

.container{
  margin: 0 30px 0 30px;
}

#header{
  height: 64px;
  background-color: #31386E;
  border-bottom: 5px solid #EE9F26;
  line-height: 59px;
  margin-bottom: 40px; 
}

#header #logo{
  float: left;
  margin-top: 7px;
}

#header #nav{
  text-align: right;
  font-size: 16px;
  color: #FFFFFF;
  text-transform:uppercase;
  font-weight: 400; 
}

#header #nav a{
  color: #FFFFFF;
  margin-right: 35px;
}

#header #nav a:hover{
  color: #CED1DF;
}
#header #nav .current{
  color: #CCCCCC;
}

#header #search{
  float: right;
  position: relative;
}

#header #search form{
  display: inline;
}


#responsehints{
  position: absolute;
  top: 50px;
  width: 210px;
  line-height: 16px;
}

#responsehints ul{
  list-style-type: none;
  border: 1px solid #CCCCCC;
}

#responsehints li{
  border-bottom: 1px solid #CCCCCC;
}

#responsehints .addressline{
  display: block;
  padding-top: 3px;
  font-size: 11px;
  line-height: 11px;
  color: #999999;
}

#responsehints a{
  display: block;
  padding: 5px;
}

#responsehints a:hover .addressline{
  color: #333333;
}

#responsehints .alt a:hover, #responsehints .not_alt a:hover{
  color: #333333;
  background: #9C9C9C url(/images/tablehover.png) repeat-x;
}

#responsehints .bottomline{
  padding: 5px;
  background: #454B6C url(/images/tableheading.png) repeat-x;
}

#responsehints .bottomline a, #responsehints .bottomline a:hover{
  color: #FFFFFF;
  padding: 0;
}


#white{
  background-color: #FFFFFF;
  min-height: 96%;
}

#main{
  margin-top: 20px;
}


#footer{ 
  background-color: #454A6D;
  border-top: 5px solid #EE9F26;
  color: #8F96B8;
  height: 3%;
  padding-top: 5px;
  line-height: 30px;
}

#footer a{
  color: #8F96B8;
}

#loadtime{
  color: #8F96B8;
}


#buttons, .buttons{
  float: right;
  width: auto;
  text-align: right;
  min-width: 400px;
  font-size: 13px;  
  font-family: 'Roboto', sans-serif;
}

#buttons a, .buttons a{
  margin-left: 30px;
}

#buttons img{
  vertical-align: middle;
}


.cancel{
  float: right;
}

#advancedsearch, #addcustomer, #adduser{
  background-color: #f1f1f1;
  border: 1px solid #CCCCCC;
  padding: 10px;
  margin: 15px 0 15px 0;
}









.input, .textarea{
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #CCC;
  padding: 10px;  
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #000; 
  vertical-align: middle;
  background-color:#FFF;
}

.input.inline{
  width: 150px; 
}

.textarea{
  height: 100px; 
}


.q{
  color: #CCCCCC;
  border:0;
}

.qselected{
  color: #403260;
  font-style: normal;
}

.select{
  width: 212px;
  border: 1px solid #888888;
  padding: 5px;
  border-radius: 5px;  
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #403260;
  vertical-align: middle;
}

.select .default{
  color: #666666;
}

.button, .submit{
  display: block;
  background-color: #454A6D;
  border: 0;
  color: #FFFFFF;
  padding: 10px 25px; 
  cursor: pointer;
  font-size: 15px;
  border-radius: 5px;
  transition:.7s background-color; 
}


.smallsubmit{
  background-color: #454A6D;
  border: 0;
  color: #FFFFFF;
  text-align: center;
  padding: 5px 10px; 
  cursor: pointer;
  font-size: 15px;
  border-radius: 5px;
  vertical-align: middle;
}


.button:hover, .smallsubmit:hover{
  background-color: #EE9F26;
  transition:.3s background-color; 
}


.shadow{
  box-shadow: inset 3px 3px 2px #cccccc;
}





.form{
  width: 100%;
}

.form td{
  padding-right: 20px;
  padding-bottom: 15px;
}

.form .tdlabel{
  padding-right: 10px;
  width: 90px;
}

.form .tdinput{
  padding-right: 80px;
}

.form .tdinput .input, .form .tdinput .select, .form .tdinput .textarea{
  width: 100%;
}

.three_cols{
  width: 33%;
  float: left;
}




.table td{
  padding: 0 10px 10px 0;
}


.data .heading{
  background: #454B6C url(/images/tableheading.png) repeat-x;
  color: #FFFFFF;
  padding: 2px 10px 2px 10px;
  text-shadow: 1px 1px 1px #000;
}

.data .heading a, .data .heading a:hover{
  color: #FFFFFF;
  padding:0;
  display: inline;
}

.data tr:hover{
  background: #9C9C9C url(/images/tablehover.png) repeat-x;
}

.data tr.nohover:hover{
  background:none;
}

.data td{
  border-bottom: 1px solid #403260;
  vertical-align: top;
}

.data td a{
  display: block;
  padding: 3px 10px 3px 10px;
  color: #333333;
}
.data td a:hover{
  color: #333333;
}
.alt{
  background-color: #EFEBF5;
}
.not_alt{
  background-color: #FFFFFF;
}

.notalink{
  padding: 3px 10px 3px 10px;
}

.notalink a{
  display: inline;
  padding: 0;
}







.gone { display: none; }
.here { display: block; }

.gone_inline { display: none; }
.here_inline { display: inline; }




.todo{
  padding: 10px;
  margin: 10px 0 10px 0;
  border: 1px solid #FF0000;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 5px;
}




#todo, #recently_viewed{
  float: right;
  clear: right;
  margin-bottom: 15px;
  width: 350px;
  background-color: #f1f1f1;
  border: 1px solid #CCCCCC;
  line-height: 16px;
}


#todo .date, #recently_viewed .date{
  display: block;
  padding-top: 3px;
  font-size: 11px;
  line-height: 11px;
  color: #999999;
}

#todo h2, #recently_viewed h2{
  margin: 10px;
}

#todo .input{
  width: 280px;
}

#todo .tick{
  float: right;
  margin: 0 0 5px 5px;
}


#response{
	padding:10px;
  background: #454B6C url(/images/tableheading.png) repeat-x;
  color: #FFFFFF;
  text-align: center;
}

#list li{
	margin: 0 0 3px;
	padding: 8px;
	border-top: 1px solid #CCCCCC;
	color:#333333;
	list-style: none;
	cursor: move;
}

#recently_viewed li{
	border-top: 1px solid #CCCCCC;
	color:#333333;
	list-style: none;
}

#recently_viewed li a{
  display: block;
	padding: 8px;
	color:#333333;
}

#recently_viewed li a:hover{
  background: #9C9C9C url(/images/tablehover.png) repeat-x;
}

#recently_viewed li a:hover .date{
  color: #333333;
}

#note{
	padding:5px 20px 5px 20px;
  background: #9C9C9C url(/images/tablehover.png) repeat-x;
  color: #333333;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
  margin-bottom: 20px;
  margin-top: 10px;
}


.error{
	padding:5px 20px 5px 20px;
  background: #9C9C9C url(/images/errorbg.jpg) repeat-x;
  color: #ffffff;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
  font-weight: bold;
}







#iframe{
  height: auto;
  background-color: #FFFFFF;
}

#iframe #date{
  float: right;
  color: #666666;
  font-size: 14px;
}

.greyroundbox{
  color: #333333;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
  background-color: #f1f1f1;
  padding: 10px;
}


.settingslink{
  display: block;
  float: left;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
  background-color: #f1f1f1;
  padding: 10px;
  width: 200px;
  text-align: center;
  margin: 0 40px 40px 0;
  overflow: hidden;
}
.settingslink:hover{
  background-image: url(/images/bighovergradient.png);
  color: #333333;
}
.settingslink:active{
  box-shadow: inset 0px 2px 2px #000000;
}

.settingslink .title{
  display: block;
  font-family: Georgia;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 0px;
}

.disabledlink{
  color: #666666;
}

.disabledlink:hover{
  color: #666666;
  background-image: none;
}

.notecomment{
  margin-top: 30px;
}

.notecomment .commentdelete{
  float: right;
}



.calendartd{
  width: 200px;
}
.calendarjob{
  display:block;
  background-color:#666;
  color:#FFF !important;
  transition:.3s background-color;
}
.calendarjob .calendaraddress{
  display:block;
  font-size: 12px;
}
.calendarjob .calendartime{
  display:block;
  font-size: 12px;
}
.calendarjob + .calendarjob{
  margin-top: 10px;
}

.calendarjob:hover{
  background-color:#CCC;
  transition:.3s background-color;
}


.calendarjob.calendar-filter{ background-color: red; }
.calendarjob.calendar-service{ background-color: green; }
.calendarjob.calendar-quote{ background-color: purple; }
.calendarjob.calendar-installation{ background-color: yellow; color:#000 !important; }

.homecontent{
  margin-right: 400px;
}


.copy{
  text-align:left; 
}

.totop{
  float:right;
  text-align:right;
}

.desktopgone{
  display:none;
}


.schedule{
  display:flex;
  margin-bottom: 80px;
}
.schedule .day{
  flex:1;
  margin-right: 30px;
  border: 1px solid #CCC;
  border-bottom:0;
  position:relative;
}
.schedule .day:last-child{
  margin-right:0;
}

.schedule .day .daytitle{
  box-sizing:border-box;
  background-color: #454A6D;
  color:#FFF;
  text-align:center;
  height: 30px;
  line-height: 30px;
  overflow:hidden;
}
.schedule .day .time{
  box-sizing:border-box;
  height: 30px;
  border-bottom: 1px solid #CCC;
  padding: 5px;
  font-size: 11px;
  color:#666;
}
.schedule .day .time:nth-child(2n+2){
  background-color:#f1f1f1;
}


.schedule .booking{
  box-sizing:border-box;
  position:absolute;
  width: 100%;
  display:flex;
  background-color: #666;
  color:#FFF;
  padding: 5px;
  opacity:.9;
  transition:.8s opacity;
  overflow:hidden;
  z-index:1;
}
.schedule .booking.resolved{
  opacity:.5;
}
.schedule .booking:hover{
  opacity: 1;
  transition:.3s opacity;
  z-index:9;
  height: auto !important;
}

.schedule .booking .starttime{
  width: 25%;
  font-size: 13px;
}
.schedule .booking .details{
  width: 75%;
}
.schedule .booking .address{
  display:block;
  font-size: 10px;
  line-height: 13px; 
  padding-top: 5px;
}
.schedule .booking .notes{
  display:block;
  font-size: 10px;
  padding-top: 5px;
}

.booking.filter{ background-color: red; color:#FFF !important}
.booking.service{ background-color: green; color:#FFF !important }
.booking.quote{ background-color: purple; color:#FFF !important }
.booking.installation{ background-color: yellow; color:#000 !important; }
.booking.admin{ background-color: blue; color:#fff !important; }



.logincontainer{
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
  margin: 40px auto;
  text-align:center;
}

.logincontainer .logo{
  max-height: 100px;
  max-width: 250px;
  margin-bottom: 25px; 
}
.logincontainer h2{
  color:#FFFFFF;
  font-weight:900;
  font-size: 25px;
  margin: 15px 0 50px 0;
}
.logincontainer .loginbox{
  background-color:#FFFFFF;
  
  text-align:left;
  overflow:hidden;
}
.logincontainer .loginbox .padding{
  padding: 20px;
}
.logincontainer .grey{
  background-color:#f1f1f1;
  padding: 10px 20px;
  overflow:auto; 
}
.logincontainer .button{
  background-color: #144874;
  float:right;
}

.loginbox.logingone{
  display: none;
}

.label{
  color: #606060;
  margin-top: 15px;
  margin-bottom: 3px; 
}
.label:first-child{
  margin-top:0;
}

.note{
  background-color: #53AC67;
  color:#FFFFFF;
  padding: 10px 40px;
  
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 25px;
}
.note .fa{
  font-size: 35px;
  line-height:35px;
  vertical-align:middle;
  margin-right: 15px;
}
.note.error{
  background-color:#BF312F;
}


.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6{
  margin-bottom: 15px !important; 
}

.filterform{
  margin: 20px 0;
  padding: 10px;
  background-color:#f1f1f1;
  border: 1px solid #CCC; 
}

.clear{
  clear:both;
}


.calendar{
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  margin: 30px 0;
}
.calendar .day{
  grid-column: span 1;
  border: 1px solid #CCC; 
  padding: 5px; 
}

.calendar .day.heading{
  background-color: #454B6C ;
  color:#FFF; 
}
.calendar .day .day-number{
  font-weight:bold; 
}

.calendar .day .booking{
  display:block; 
  font-size: 11px;
  line-height: 14px; 
  padding: 5px; 
  margin-bottom: 3px; 
}






.container .autoComplete_wrapper{
  display:block;
  width:100%;
  z-index: 99;
  line-height: 20px !important; 
}

.container .autoComplete{
  display:block;
  width:100%;
  height: 45px; 
  border: 1px solid #EE9F26;
  border-radius: 15px; 
  font-family: Roboto;
  font-size: 16px;
  color: #31386E;
  margin-top: 8px;
}
.container .autoComplete:focus{
  border: 1px solid #EE9F26;
  outline:none;
}
.container .autocomplete::placeholder{
  color: #CCC !important;
}

.container .autoComplete_wrapper > input {
  color: #31386E;
  padding-left: 40px;
}

.container .autoComplete_wrapper > input::placeholder {
  color: #CCC !important; 
}

.container .autoComplete_wrapper > input:hover::placeholder {
  color: #CCC !important;
}

.container .autoComplete_wrapper > input:focus::placeholder {
  color: #CCC !important;
}
.container .autoComplete_wrapper > input:focus{
  color: #31386E !important;
}

.container .autoComplete_wrapper > ul > li[aria-selected="true"]{
  background-color: #EE9F26 !important;  
  color: #31386E; 
}

.autoComplete_wrapper > ul > li:hover {
  background-color: #F1f1f1 !important;  
  color: #31386E; 
}

.container .autoComplete_wrapper span{
  display:block;
  font-size: 11px;
  padding:0 !important;
  margin: 0 !important; 
}