@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;	
}
h1, h2, h3, h4, .price, .date, .datecircle, .btn, .button, button, .forminput input[type=submit], .caltab, .caltabon {
    font-family: "Roboto Condensed",sans-serif;
}
body{
	font-family: 'Roboto',"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: rgb(135 152 199);
	color: #332639;
	font-size: 15px;
    line-height: 1.42857143;
    color: #333333;
	margin: 0;
	padding: 0;	
}
header
{
	position: fixed;
	width:100%;
	background: rgb(102 169 226);
    background: -moz-linear-gradient(top, rgb(135 152 199) 0%, rgb(102 169 226) 100%);
    background: -webkit-linear-gradient(top, rgb(135 152 199) 0%, rgb(102 169 226) 100%);
    background: -o-linear-gradient(top, rgb(135 152 199) 0%, rgb(102 169 226) 100%);
    background: -ms-linear-gradient(top, rgb(135 152 199) 0%, rgb(102 169 226) 100%);
    background: linear-gradient(to bottom, rgb(135 152 199) 0%, rgb(102 169 226) 100%);
	height: auto;
	min-height:100px;
	margin:0px auto; 
	padding:20px 1% 0;
	color:#FFF;
	z-index:1005;
}
.ident {width: 100%; text-align: center; padding: 3rem; }
.main {
	width:100%;
	text-align:left;
	vertical-align:top;
	background: rgb(243 243 243);
	color: #222222;
	margin:0 auto; 
	padding:130px 3% 50px; 
	height: auto;
	overflow: hidden;
	min-height: calc(100vh - 50px);
	position: relative;
	}
.padder {
    padding: 5px 5%;
    margin: 0px;
    text-align: left;
}
.login{
	width:250px;
	margin:0px 0px 0px 20px;
	text-align:left;
}
#login{
	width:25%;
	max-width:150px;
	margin:0;
	text-align:left;
	float: left;
	height: 85px;
}
#login_Live{
	width: 25%;
	max-width:150px;
	margin:0;
	text-align:left;
	float: right;
	height: auto;
}
footer {
	color: #FFFFFF;
	text-align: center;
	padding: 1em;
}
.notice, .logbox { width:90%;max-width: 550px; background-color: #FFFFFF; border-radius: 5px; margin: 5em auto; padding: 1.5em; overflow: hidden;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);  
}
.notice { position:absolute; z-index: 1001; border-bottom: 5px solid #8798c7; }
#customer_Search {
float: right;
width: 25%;
height: 85px;
margin:10px 3% 0px 0px;
padding: 5px;
border: 1px solid #cccccc;
}
#lead_Bank {
float: right;
width: 20%;
margin:0;
overflow: hidden;
}
#lead_Bank2 {
float: right;
width: 15%;
height: 85px;
margin:30px 0px 0px 0px;
}
#menu  { height: auto;overflow: hidden; font-size: .9em;width: 75%;  float: left;}
 
/* links */
.button li {
    float: left;
    list-style: none;
}
a:link { text-decoration:none; color:#0c2568; font-weight: bold;}
a:visited {color:#444444; text-decoration:none; }
a:hover {color: #2e629c;}
a.lead:link { text-decoration:none; color:#0c2568;}
a.lead:visited { color:#444444; text-decoration:none; }
a.lead:hover {color: #E19202;}
.warn, .warnBackground {clear:both;background-color:#CC0000;color:#FFFFFF;font-weight:bold;padding: 10px; font-size: 1.2rem;}
a.warn:link { text-decoration:none; color:#ff0000; padding: 0px 0px 20px 0px;}
a.warn:visited { color:#ff4444; text-decoration:none; }
a.warn:hover {color: #E19202;}

.submitbutton:hover,  .GObutton:hover   {
				-webkit-box-shadow: 0 0 2px 0 #255753; -moz-box-shadow: 0 0 2px 0 #255753; box-shadow: 0 0 2px 0 #255753; 
 color:#FFF; background-color:#f73521;
				}	
/*buttons */
a.button,  a.button:visited, a.buttonon, a.buttonon:visited{
	float:left;
	text-decoration:none;
    text-align: center;
    font-weight: bold;
	background-color:#72a3d8;
    border: 1px solid #4261b5;
	  -moz-border-radius: 5px;
    border-radius: 5px;
	height:auto;
	min-width:120px;
	text-align:center;
	padding:8px 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:#fff
	}
	a.button:hover {
  	color:#fff ;
	background-color:#3580ca;
 
	}
	a.buttonon, a.buttonon:visited{
	background-color:#9a97d2;
	background:#9a97d2;
	color:#FFF !important;
	}
a.buttonon:hover{
  	color:#b80000;
}
a.GObutton,  .GObutton {
	 background-color:#3580ca;
    border: none;
    color: #FFF;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
	padding:8px 15px;
	margin: 5px;
}
 a:visited {
	color: #666666;
    text-decoration: none;
}
 
a:link {
    text-decoration: none;
    font-weight: bold;
}

 
.mapbar, .previewbar, .prepreviewbar{
	
	background: rgb(225, 224, 255);
    border: 1px solid #72a3d8;
    -moz-border-radius: 5px;
    border-radius: 5px;
	height:auto;
	width:80%;
	min-width:120px;
	margin: 5px auto;
	text-align:center;
	padding:8px 15px;
	font-size:10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	
}
.prepreviewbar{
	
	background: #fbd7d7;
}
/* tabs */	
.header2 {
    min-height: 30px;
    width: 100%;
    padding: 0 2rem;
    background-color: #72a3d8; 
	overflow: hidden; margin-top: 5px;
}	
.caltab, .caltabon { 
		height:30px;
		font-size:	0.9em;
		color: #555;
		
    width: auto;
    min-width: 80px;
    text-align: center;
    float: left;
    background-color: #EEE;
    border-radius: 5px 5px 0 0;
    margin-right: 2px;
    border-radius: 5px 5px 0 0;
    padding: 5px 10px;
	} 
.caltabon {
	border-bottom: 1px solid #FFF; font-weight:bold; background-color: #FFF; font-size:	0.9em;
	}
.redCircle, .amberCircle, .greenCircle {	
  height: auto;
  width: auto;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  float: right;
  padding: 1px 8px;
  margin: 0 0 3px 0;
  border: 0px;
  font-size: 12pt;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 3px 0 #255753;
  -moz-box-shadow: 0 1px 3px 0 #255753;
  box-shadow: 0 1px 3px 0 #255753;
  }
  .redCircle {	
	background-color: #d11c1c;
  }
 .amberCircle {	
	background-color: #fc9a27;
  }
 .greenCircle {	
	background-color: #27b91c;
  } 
  
  /*table display */
.box1 {
    background-color: #FFFFFF;
    vertical-align: top;
    padding: 2em 1em;
    font-size: 0.9em;
    clear: both;
}
th {
    text-align: left
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 21px
}

.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #dddddd; background-color: #ffffff;
}

.table>thead>tr>th {
    vertical-align: bottom; background-color: #ffffff;
    border-bottom: 2px solid #dddddd
}

.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td {
    border-top: 0
}

.table>tbody+tbody {
    border-top: 2px solid #dddddd
}

.table .table {
    background-color: #ffffff
}

.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td {
    padding: 5px
}

.table-bordered {
    border: 1px solid #dddddd
}

.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td {
    border: 1px solid #dddddd
}

.table-bordered>thead>tr>th,.table-bordered>thead>tr>td {
    border-bottom-width: 2px
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.table-hover>tbody>tr:hover {
    background-color: #f5f5f5
}

table col[class*="col-"] {
    position: static;
    float: none;
    display: table-column
}

table td[class*="col-"],table th[class*="col-"] {
    position: static;
    float: none;
    display: table-cell
}

.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th {
    background-color: #f5f5f5
}

.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th {
    background-color: #e8e8e8
}

.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th {
    background-color: #dff0d8
}

.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th {
    background-color: #d0e9c6
}

.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th {
    background-color: #d9edf7
}

.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th {
    background-color: #e6e6e6;
}

.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th {
    background-color: #fcf8e3
}

.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr.warning:hover>th {
    background-color: #faf2cc
}

.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th {
    background-color: #f2dede
}

.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr.danger:hover>th {
    background-color: #ebcccc
}

.table-responsive {
    overflow-x: auto;
    min-height: 0.01%
}
table tr.even, table tr.alt, table tr:nth-of-type(even), table tr:nth-of-type(even) td {background: #f9f3f3;}
.int {text-align: right; border: 1px solid #dedede; }
.icon
{
float:right;
padding:3px;
border:0px;
}	
/* appointments */
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    display: table-cell;
    padding: 5px;
}
.flex { display: flex; }
.up { vertical-align: top;}
.apps {
    width: 150px;
    height: auto;
    color:#565656;
    overflow: hidden;
    margin: 0px;
    vertical-align: top;
	display: inline-block;
	padding: 5px;
}
.bubble{ float: right;
    margin: -5px 0 0 5px;
    padding: 4px 8px;
    border-radius: 50%;
    background-color: #7b7582; color: #ffffff; 
	}
.purple .bubble{ float: left; margin-left: 10px; } 
#lead_Bank {
	width: 25%; 
}
#menu > #lead_Bank {
	margin: 0 3em; float:right;
}
#customer_Search {
  float: left;
    width: auto;
    min-width: 680px;
    height: auto;
    overflow: hidden;
    background-color: #2e629c;
    color: #FFFFFF;
    margin: 0 1%;
    padding: 0.5em;
}
#customer_Search form, #lead_Bank form{
  display: flex;
}
.findinput input, .findinput select {
    width: 110px;
    color: #74999d;
    padding: 0.6em 0.5em;
    margin: 0.2em;
    float: left;
    border: 0;
}
.tmelinefilters {
	background:#3580ca;
	overflow: hidden;
}
.tmelinefilters ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tmelinefilters ul li {
    display: inline-block;
    float: left
}

.tmelinefilters ul li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    padding: 12px;
   }
.tmelinefilters ul li a:hover {
    text-decoration: underline
}

.tmelinefilters::after, .tmelinefilters ul::after {
    content: '';
    display: table;
    clear: both;
}	
/* form */
.selectinput, .forminput{ margin:0.2em 0 0.8em 0; clear:left; height:auto;}
.clear, .formspace {clear: both;}	
.forminput label {
    display: block;
    width: 100%;
    padding: 2px 5px 0px 0px;
    color: #666;
 }
.dateinput  label{
	display: block;
	width: 55px;
	text-align:left;
	padding:2px 5px 0px 0px;
	color:#333333;
	vertical-align:top;
		font-size:xx-small;
		font-weight:bold;
	}
.dateinput  select {
	clear:right;
	width: 60px;
	background-color:#ffffff;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin:0px 0px 10px 0px;
    padding: 5px 2px;
}
.dateinput  {
	width: 60px;
	float: left;
	}
.datecontainer {
	width:200px;
	padding:0px 0px 0px 20px;
	display: flex;
	border-bottom: 1px solid #ccc;
}
  
.formpadding {
    padding: 1rem;
    max-width: 500px;
}
input[type="submit"] {
    background-color: #a394f2;
    color: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #72a3d8;
}
input[type="submit"]:hover {
    background-color:  #c0adf9;
    border: 1px solid #a394f2;
}
.dispselectinput { float: right;}
#appointersection  {
   display: flex;
}	
#appointersection .selectinput label, #appointersection .forminput label {
     text-align: left;
    font-size: 0.8em;
    padding: 5px 1%;
}	
#appointersection .leftblock, 	#appointersection .rightblock {
	width: 25%;
}
 
#appointersection .datecontainer {
	width:100%;
	padding:0px 0px 0px 20px;
	display: flex;
	border-bottom: 0;
}
#appointersection .datecontainer input[type="radio"], #appointersection .datecontainer input[type="checkbox"] {
	width: auto;
    
    border: 0;
    
}
#map { background-color: white;    text-align: center;    padding: 0;}	
#apptform {    background-color: white;  text-align: center; padding: 0;width: 100%;}
.leftblock .itembox2 {
    height: auto;
    margin-bottom: 1em;
    background: #FFF;
	min-width:100px;
}
.itembox, .itembox2 {
       background: linear-gradient(to bottom, #fcfff4 0%,#e9f7f6 100%,#b9d6d2 100%);
	   margin: 0px auto;
}
.leftblock .itembox2.gradienton {
    vertical-align: top;
    background: #72a3d8;
    border: 1px solid #72a3d8;
    background: -moz-linear-gradient(top,  #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdf2e1), color-stop(100%,#a7c9c6), color-stop(100%,#a291ea));
    background: -webkit-linear-gradient(top, #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -o-linear-gradient(top,  #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -ms-linear-gradient(top,  #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: linear-gradient(to bottom,  #fefefe 0%,#efefef 90%,#67a9e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e1', endColorstr='#a291ea',GradientType=0 );
}
/* appointments */
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    display: table-cell;
    padding: 5px;
}
.up { vertical-align: top;}
.apps {
    width: 150px;
    height: auto;
    color:#565656;
    overflow: hidden;
    margin: 0px;
    vertical-align: top;
	display: inline-block;
	padding: 5px;
}

		 
	 
		.otherbox {background-color:#eeeeee;
						font-size:x-small;
						border: 1px solid #aaaaaa;
				}
		.leavebox, .Blankbox {
						background-color:#eeeeee !important;
						font-size: small;
						border: 1px solid #cccccc;
				}
.tablebox  .date {
			float: left;
			border-radius:50%;
			width:4.6em;
			height:4.6em;
			background-color:#2e629c;
			color:#FFF;
			text-align: center;
			padding: 0.3em;
			clear:both;
		}
	
		.testbox {
		background-color:#FBC6CA !important;
		border: 1px solid #Ff969A !important;
		color:#000;
								}
		.fitbox {
		background-color:#ECD7FB !important;
		border: 1px solid #C28CCE;
		color:#000;						}
		.servbox {
		background-color:#D7DDEC !important;
		border: 1px solid #6A89B7;
		color:#000;						}
		.ReHbbox {
		background-color:#C4EFEE !important;
		border: 1px solid #6A89B7;
		color:#000;						}
		.CarPbox {
		background-color:#C9F0BD !important;
		border: 1px solid #C4EFEE; 
		color:#000;						}
		.Follbox {
		background-color:#CCCBF7 !important;
		border: 1px solid #6A89B7 !important;
		color:#000;						}
		
		.revwbox	{
		background-color:#FEFBB1 !important;
		border: 1px solid #FCCF94 !important;
		color: #54676e !important;
		} 
		.cancbox	{
		background-color:#FCCF94 !important;
		border: 1px solid #FBC6CA !important;
		color:#000;				} 
		.scrnbox	{
		background-color:#f5d7e2 !important;
		border: 1px solid #fea5c0 !important;
		color:#000;				} 
		.waxbox	{
		background-color:#c8f598 !important;
		border: 1px solid #bde394 !important;
		color:#000;				} 	

		.tablebox  .date.testbox, .tablebox  .date.fitbox, .tablebox .date.servbox, .tablebox  .date.ReHbbox, .tablebox  .date.CarPbox, .tablebox  .date.Follbox, .tablebox  .date.revwbox, .tablebox  .date.cancbox, .tablebox  .date.waxbox{
			    color: #546769;
		}	
	 	.leavebox, .Blankbox {background-color:#eeeeee !important;
								font-size: small;
								border: 1px solid #cccccc;
				}
		.monthview {width:150px; height:100px; font-size:10pt; background-color:#ffffff;
								font-size:x-small;
								vertical-align:top;
								padding:0px;
							}
		.minimonthview {width:90px; height:100px; font-size:10pt; background-color:#ffffff;
								font-size:x-small;
								vertical-align:top;
								padding:0px;
								}
		.minimonthshop	{width:30px; height:100px; font-size:10pt; background-color:#ffffff;
								font-size:x-small;
								vertical-align:top;
								padding:0px;
								}					
								
		.weekview {width:150px; border-bottom:1px solid #bbbbbb;}
		.dayview {width:300px; border-bottom:1px solid #bbbbbb;}
		.number {width:100%; height:auto;}
		.apps {width:150px; height:35px;  font-size:xx-small; overflow:hidden; margin:0px; vertical-align:top;
		}
		.miniapps {width:90px; height:35px;  font-size:xx-small; overflow:hidden; margin:1px 0px; vertical-align:top;
		}
		.minishop {width:30px; height:35px;  font-size:xx-small; overflow:hidden; margin:1px 0px; vertical-align:top;
		}
		.weekapps {width:150px; height:auto; font-size:xx-small; overflow:hidden; margin:1px 0px; vertical-align:top;
		}
		.miniweekapps {width:75px; height:auto; font-size:xx-small; overflow:hidden; margin:1px 0px; vertical-align:top;
		}
		.miniweekshopapps {width:30px; height:auto; font-size:xx-small; overflow:hidden; margin:1px 0px; vertical-align:top; overflow:hidden;
		}
		.minibutton {padding:0px; border:1px solid #ddd; cursor: pointer;}
		.tablebox {
			font-size:small;
			vertical-align:top;
			padding:3px;
			border-bottom:1px solid #2e629c;
			overflow:hidden;
		}
		.tableboxU {
			background-color:#ffffff;
			font-size:x-small;
			vertical-align:top;
			padding:3px;
			border-bottom: 1px solid #696969;
		}
		.small {font-size:smaller;}
	
		.leftblock, .middleblock, .rightblock {
			
			width: 100%;
			
		}
		
.redCircle, .amberCircle, .greenCircle {	
  height: auto;
  width: auto;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  float: right;
  padding: 1px 8px;
  margin: 0 0 3px 0;
  border: 0px;
  font-size: 12pt;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 3px 0 #255753;
  -moz-box-shadow: 0 1px 3px 0 #255753;
  box-shadow: 0 1px 3px 0 #255753;
  }
  .redCircle {	
	background-color: #d11c1c;
  }
 .amberCircle {	
	background-color: #fc9a27;
  }
 .greenCircle {	
	background-color: #27b91c;
  }
.icon
{
float:right;
padding:3px;
border:0px;
}	
.minicon
{
float:right;
padding:0px;
}	
.apphome {
	background-image:url(../home.gif);
		background-position:top right;
		background-repeat:no-repeat;
	}
.appshop {
	background-image:url(../shop.gif);
		background-position:top right;
		background-repeat:no-repeat;
	}
.boxright
{
text-align:right;
padding:5px;
}	
.col-25,.col-30, .col-40, .col-50 { float: left; box-sizing: border-box;}

.col-25  { width:25%;}
.col-30  { width:30%;}
.col-40  { width:40%;}
.col-50  { width:50%;}


.itembox2, .itemboxright {
	 box-sizing: border-box;
	 margin: 10px auto;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    width: 94%;
	max-width: 300px;
    height: auto;
    padding: 1em 2em;
    overflow: hidden;
}
.rightblock .itembox2 {
	width: 100%; padding: 1em;
}

.itembox2 {
    vertical-align: top;
    background: #72a3d8;
	border: 1px solid #72a3d8;
    background: -moz-linear-gradient(top, #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdf2e1), color-stop(100%,#a7c9c6), color-stop(100%,#a291ea));
    background: -webkit-linear-gradient(top, #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -o-linear-gradient(top, #fefefe 0%,#efefef 90%,#67a9e2 100%);
    background: -ms-linear-gradient(top, #fefefe 0%,#efefef 90%,#67a9e2 100%);
	background: linear-gradient(to bottom, #fefefe 0%,#efefef 90%,#67a9e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e1', endColorstr='#a291ea',GradientType=0 );
}
.itemboxright {
	background: #fdf2e1; /* Old browsers */
	background: -moz-linear-gradient(top, #fdf2e1 0%, #d6c0f3 90%, #a291ea 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdf2e1), color-stop(100%,#a7c9c6), color-stop(100%,#a291ea)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fdf2e1 0%,#d6c0f3 90%,#a291ea 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fdf2e1 0%,#d6c0f3 90%,#a291ea 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fdf2e1 0%,#d6c0f3 90%,#a291ea 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fdf2e1 0%,#d6c0f3 90%,#a291ea 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e1', endColorstr='#a291ea',GradientType=0 ); /* IE6-9 */
}
.note { background-color:#FFFFFF; margin: 8px; padding: 5px 8px; height: 80px; overflow: hidden; border:1px solid #eeeeee; font-size:0.8em; }
.notecontent{ background-color:#FFFFFF; margin: 0 auto; padding: 2rem; overflow: hidden; max-width: 650px; text-align: left;}
.notecontent .sign{ width: 100%; clear: both; padding: 0 0 10rem 0;}
.notepopup{ background-color:#00000088; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; text-align: center; align-items: center; justify-content: center; z-index: 2002; overflow: hidden}
.blockscroll{
	overflow: scroll !important;
	max-height:30vh;
}
/* width */
::-webkit-scrollbar {
  width: 5px;  height: 5px
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #72a3d8;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
.row {
	clear: both;
	overflow: hidden;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
 
.padder {padding: 1rem 2rem; }

.col-1{width:10%;}
.col-2{width:20%;}
.col-3{	width:30%;}
.col-4{	width:40%;}
.col-5{	width:50%;}
.col-6{	width:60%;}
.col-7{	width:70%;}
.col-8{	width:80%;}
.col-9{	width:90%;}
.padder {
	padding:1em;
}
.pointer {
    cursor: pointer;
    padding: 0
}
.togglehide {
    height: 0;
    overflow: hidden;
    padding: 0;
}
.togglehide.open {
    height: auto;
}
.togglehide.padder.open {
    padding: 5px
}
.middleblock .midbox {
    background: unset;
	border: 0;
}

.timeline-heading {
    background: #b9d6d2;
    position: relative;
    z-index: 2;
}
.midbox {
    position: relative;
}
.midbox.timeline::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    background: #666;
    top: 0;
    left: 65px;
    opacity: 0.3;
    z-index: 1;
}

.timeline-row .date {
    width: 80px;
    margin-right: 40px;
    box-sizing: border-box;
    height: 75px;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 2;
	margin-left: 10px;
}
.timeline-row .date.box {  width: 70px; height: 70px;	margin-left: 15px; }

.timeline-row .date::after {
    content: '';
    width: 42px;
    height: 2px;
    background: #666;
    position: absolute;
    right: -42px;
    opacity: 0.3;
}

.timeline-row.order .date {
    width: 100px;
    height: 90px;
    margin-left: 0;
	background-color:#Ff969A !important;
}

.timeline-row {
    position: relative;
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-row .room3 {
    float: left;
    width: calc(100% - 95px);
    box-sizing: border-box;
    position: relative;
    border: 1px solid #2e629c;
    background: #FEFEFE;
    min-height: 20px;
	font-size: .9em;
	line-height: 1.8;
	padding: 2px 3% 3px;
	}
.timeline-row .room3 p {
     width: 70%;
	 float: left;
	 margin-bottom: 10px;
    }
.timeline-row .room3 .aptdisplay p {
     width: 100%;
	 float: none;
    }

.timeline-row .sign {
	font-size:0.8em;
	width: 25%;
	float: right;
	color: #aaaaaa;
}

.timeline-row .previewbar {
    width: 70%;
	background: unset;
}


.timeline-row.order .room3  {
   padding: 20px;
  font-size: 1.4em;
 }
.timeline-row.tablebox {
    border: 0
}
.timeline-row.noteline img {
   width:35px; height: auto; float: right;
   }
.itembox2 h4 img {
   height: auto; float: left; margin: 0 10px 0 0;
   }
.noMoveAlert {
    position: absolute; left: -5px; top: 25px; z-index: 1001;
}
.noMoveAlert img {
    border: 1px solid #ffffff;  border-radius: 50%;
}
.aptdisplay {
	background: #FFFFFF;
	font-size: 1.2em;
	line-height: 1.9em;
}
.aptdisplay .grey2{
	font-size: x-small;
    color: #aaaaaa;
}
.room3 .big {
    color: #546769;
}
.greydate {
    font-size: x-small;
    color: #aaaaaa;
}
.hide {
    cursor: pointer;
    height:auto;
    width: auto;
    float: right;
	text-align: left;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    border: 0px;
	background-color: #2e629c;
    color: #FFFFFF;
    text-decoration: none;
}
.popbutton {
    margin-top: 8px;
    cursor: pointer;
    writing-mode: vertical-rl;
    height: auto;
    width: auto;
    float: right;
    padding: 5px;
    font-size: 10px;
    background-color: #2e629c;
    color: #FFFFFF;
}

.btn-primary, .GObutton {
    border-color: #72a3d8;
    color: #fff;
    background-color: #72a3d8;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}
.mapbar {
    height: 29px;
	width: 100%;
    max-width: 600px;
    text-align: left;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    border: 0px;
    text-decoration: none;
	border-radius: 8px; 
	background-color:#fff;
}
.previewbar {
    min-height: 29px;
	height: auto;
}
.tablebox .date.darker {
	background-color: #72a3d8;
}
 td input[type="number"]{
	width: 50px;
	padding: 8px;
}
.updated {
	background-color:#8a9aa0;
}
.time.updated .caption {
    color: #000;
}
.recordinput  {
    border-bottom: 1px solid #aaa;
	min-height: 40px;
}
.recordinput label img{
    float: left;
    margin-right: 8px;
}
.recordinput label  {
     margin-right: 8px;
}
.itembox h4, .itembox2 h4 {
    padding: 10px;
    margin: 0px;
    font-size: 100%;
    background-color: #72a3d8;
    color: #FFF;
	box-sizing: border-box;
}
.addressbox p{line-height: 1; padding: .5em 0 .8em 40px;}
.addressbox a p:first-of-type{padding-left: 0px;}
.iconLeft {
	float:left;
	clear: both;
	margin: -5px 10px 15px 0px;
}
.addressbox .iconLeft {
	margin: -5px 10px 15px -40px;
}
#comsRefresh {cursor: pointer; }
.timelarge { font-size: 1.2em;}
.apptpad {width: 100%; height: 30px; }
.row {display: flex; }

choiceBloc {background: rgba(255,255,255,1); padding: 0.5em 2em; margin: 0.5em auto; width: 90%; max-width: 40em;  border-left:1px solid #3580ca;border-bottom:1px solid #3580ca; border-radius: 0 50px 0 0; }
.apptBloc {background: rgba(255,255,255,1); padding:0; margin: 1em auto 0; width: 100%;  border-left:1px solid #3580ca;border-bottom:1px solid #3580ca; border-radius: 0 10px 0 0; overflow: hidden; text-align: left; display: -webkit-flex;
    display: flex;}
.apptEdit  > div{}
.apptBloc > div {float: left; }
.apptBloc a {color:#3580ca; }
.apptBloc h5 {font-size: 1.1em; }
.apptEdit {clear:both; width:100%;  background: rgba(255,255,255,1);
	box-sizing: border-box;
    padding: 1em; 
    margin: 0 auto; max-width: 40em;
    border-left: 1px solid #3580ca;
    border-bottom: 1px solid #3580ca;
     overflow: hidden;
    text-align: left;
    }
.choiceBloc h1, .heading {font-family: 'Cabin', sans-serif; font-size: 1.4em; color: #3580ca; }
.time {width:25%; background-color:#2e629c; color:#fff; font-size: 1.6em; padding: 3px 1% 8px; text-align:right; line-height: 1.1em;}
.status{width:15%; background-color:#3580ca; color:#fff;   padding: 3px 1% 8px; float:right;}
.room {color:#2e629c; font-size:1.1em; margin:0; padding: 12px 3% 12px; border-right: 1px solid #3580ca; width:15%; }
.room1 {color:#2e629c; font-size:0.9em; line-height: 1.3em; margin:0; padding:12px  3% 12px; border-left: 1px solid #3580ca; width:36%; box-sizing: border-box; }
.room2 {color:#2e629c; font-size:1.1em; margin:0; padding: 0 3% 12px; border-right: 1px solid #3580ca; width:50%; }
.room3 {color:#2e629c; font-size:1.1em; margin:0; padding: 0 3% 12px;  width:70%; }
.caption {color:#565656; font-size:0.7rem; margin:0; padding: 2px;}
.apptEdit .caption {line-height:0.7em; }
.caption.right {float: right;}
.time .caption { font-size:0.5em; margin-top:3em; line-height: 1em; color:#aaa; bottom: 0; }
.time  { cursor: pointer;  }
.personal{ background-color:#efefef; }
 
 
@media only screen and (max-width:1366px){
	a.button, a.button:visited, a.buttonon, a.buttonon:visited {
		min-width: 70px;
		padding: 8px;
	 }
   
	.loginblock {
		font-size: 8px;
	}
	#customer_Search {
    max-width: 640px;
   	}
	#lead_Bank {
    width: 25%;
	}
	.findinput input, .findinput select {
    width: 100px;
    padding: 0.6em 0.2em;
   	}
}
@media only screen and (max-width:1238px){
	a.button, a.button:visited, a.buttonon, a.buttonon:visited {
		min-width: 60px;
		padding: 8px 4px;
   }
   
	.loginblock {
		font-size: 8px;
	}
	#customer_Search {
    min-width: 600px;
   	}
	#lead_Bank {
    width: 25%;
	}
	.findinput input, .findinput select {
    width: 70px;
    padding: 0.6em 0.1em;
   	}
	.itembox2, .itemboxright {width: 100%;  padding: 1em 1em;}

}

@media only screen and (max-width:800px){
	#lead_Bank, #login_Live {
    width: 100%;
    display: flex;
	}
	#lead_Bank form {
		display: flex;
		
	}
	#appinttop {
		display: none;
	}
	#customer_Search {
    min-width: 100%;
	margin: 0;
	}
	#main {
       top: 110px;
	   overflow: scroll;
	   width: 100%;
	   margin: 0;
	}
	#discalendar {
       overflow: scroll;
	}
	#appointersection .leftblock, 	#appointersection .rightblock {
	width: 100%;
	}
	#appointersection .middleblock {
		width: 100%;
	}
	.itembox2, .itemboxright {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
}
.chart { display: flex;}
.chart > div { min-height:30px; }
th.chart > div { text-align: center; color:#FFFFFF; padding: 0 5px;}