html, body
{
	max-width: 100%;
	overflow-x: hidden;
}

label.form-label
{
	margin-top: 15px;
    margin-bottom: 5px;
}

.logo 
{
    	width: 100px;
	padding-left:10px;
	padding-bottom:20px;
}

.logoheader
{
	text-align:center; 
	line-height:25px; 
	padding-bottom:80px;
}

.shop_name 
{
    	font-size: 24pt;
    	color: #006699;
    	font-weight: bold;
}


.phonenumber 
{
    	font-size: 13pt;
}

.poweredby 
{
    	font-size: 13pt;
}

.circle i 
{
    	border-radius: 150%;
    	font-size: 20pt;
    	border: 2px solid #ccc;
    	padding: 25px;
    	color: #aaa;
}

.title 
{
    	font-size: 15pt;
    	color: #555;
    	/* padding-top: 30px; */
    	border: none;
    	font-weight: bold;
}

.menu .appt a
{
	text-align:center; 
	background:#06a7f7; 
	padding-top:30px; 
	text-decoration:none;
	width:100%;
	border-radius:10px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
	margin-bottom:20px;
}

.menu .checkin a
{
	text-align:center; 
	background:#52c5ff; 
	padding-top:30px; 
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
	text-decoration:none;
	width:100%;
	border-radius:10px;
}

/* .footer 
{
    	position: fixed;
    	bottom: 0px;
    	width: 100%;
    	height: 53px;
    	background: #fff;
    	z-index: 100;
	box-shadow: rgba(0,0,0,0.4) 0 0 3px !important;
} */

div.footer
{
	padding: 20px 0px;
}

div.footer button
{
	margin: 5px 0px
}

button.prev, button.next
{
	color:#006699;
	font-weight:bold;
	font-size:12pt;
	/* width: 100%; */
}

.navbar
{
	z-index:5;
	background:#fff;
	box-shadow: rgba(0,0,0,0.4) 0 0 3px !important;
	/* height:100px; */
}

.navbar-header 
{
	/* display:block !important; */
	/*box-shadow: rgba(0,0,0,0.4) 0 0 3px !important;*/
	width:100%;
	background:#fff;
	padding-top: 10px;
	float: none;
	margin: 0 auto;
}

.navbar-brand
{
	clear:both !important;
	padding:5px;
	padding-top:10px;
}

.navbar-brand .logo 
{
    	float: none;
	top:-10px;
	position: relative;
    	padding: 7px 17px;
	padding-right:10px;
    	line-height: 20px;
    	font-size: 17pt;
    	font-weight: bold;
	width: auto;
	box-shadow: none;
	padding-left:20px;
}

.navbar-header img
{
	width: 50px;
}

.navbar-header .poweredby
{
	display: block;
	font-size:10pt;
}

.navbar .container 
{
    	/*width: auto;*/
    	/*padding-right: 0px;*/
    	/*padding-left: 0px;*/
	position:relative;
}

.navbar .shop_name
{
	display: inline-block;
	font-size:15pt;
}

.navbar span.phonenumber
{
	display: none;
}

.mini-header
{
	display: none;
}

.menuselection
{
	position: absolute;
	top:-15px;
	right:10px;
	color:#555;
}

section.appointment
{
	/*margin-top:120px;*/
	/* margin-bottom:100px; */
}

section.appt-confirmed div.message 
{
	text-align: center !important;
	font-size: 13pt;
	display: block;
	line-height: 50px;
}

td.slot
{
	color:#fff;
    	background: #006699;
	cursor: pointer;
}

td.slot.picked
{
    	background: orange !important;
}

td.slot.unavailable
{
	background: #f1efef !important;
    	color: #808080;
}

section
{
	width:100%;
	display: none;
	/* background:#fff; */
}

/* section:not(.phonenumber)
{
        height:100%;
} */

table.dataTable
{
	width: 100% !important;
}

section.active
{
	display: table;
}

section .title
{
	display: block;
	text-align:center;
	width: 100%;
	margin-bottom: 20px;
}

section.details
{
	/*padding-top:120px;*/
	/* padding-bottom:100px; */
}

.page_title
{
	position: fixed;
	top:80px;
	width:100%;
	text-align:center;
	z-index:10;
	display:none;
}

.page_title span.time
{
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
	padding:0 20px;
	font-size:13pt;
	background:orange;
	color:#fff;
}

.page_title .title
{
	font-size:13pt;
	font-weight:normal;
	color:#fff;
	font-size: 13pt;
    	color: rgb(255, 255, 255);
    	box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px !important;
    	padding: 0px 20px;
    	background: orange;
}

.btn 
{
  	text-decoration: none;
  	outline: none !important;
  	-webkit-transition: 0.2s ease-out;
  	-moz-transition: 0.2s ease-out;
  	-o-transition: 0.2s ease-out;
  	-ms-transition: 0.2s ease-out;
  	transition: 0.2s ease-out;
}

.btn i,
.btn-flat i {
  font-size: 12pt;
  line-height: inherit;
}

.btn .badge {
  margin-left: 7px;
}

.z-depth-1, .btn, .btn-floating {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half, .btn:hover, .btn-floating:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.waves-effect 
{
  	position: relative;
  	cursor: pointer;
  	display: inline-block;
  	overflow: hidden;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	-webkit-tap-highlight-color: transparent;
  	vertical-align: middle;
  	z-index: 1;
  	will-change: opacity, transform;
  	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-red .waves-ripple {
  background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-yellow .waves-ripple {
  background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-orange .waves-ripple {
  background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-purple .waves-ripple {
  background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-green .waves-ripple {
  background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-teal .waves-ripple {
  background-color: rgba(0, 150, 136, 0.7);
}

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple 
{
  	z-index: -1;
}

div.phonenumber
{
	display:table-cell;
	border:1px solid #ddd;
	vertical-align:middle;
	width:100%;
	height:100%;
	padding:20px;
}

div.phonenumber input
{
	padding-left:10px;
	border-radius:3px;
}

.input-field label
{
	font-size:13pt !important;
	font-weight:normal;
	padding-top: 10px;
}

.input-field input
{
	/* height: 3.5em !important; */
	border-bottom: 1px solid #ccc !important;
	font-size: 12pt !important;
	font-weight: bold;
	width: 90%;
	border: none;
	text-align: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.wait_dropoff
{
	margin-top:60px;
}

.cont_breadcrumbs_3 {
  position: relative;
  width: 100%;
  float: left;
  margin: 20px 20px;
}

.cont_breadcrumbs_3 > ul > li {
  position: relative;
  float: left;
  /*transform: skewX(-15deg);  */
  background-color: #ddd;
z-index: 1;
transition: all 0.5s;
margin-left: 5px;
}

.cont_breadcrumbs_3 > ul > li:hover {
 background-color: #CFD8DC;
}

.cont_breadcrumbs_3 > ul > li  > a {
  display: block;
  font-size: 10pt;
/* transform: skewX(15deg);*/
 text-decoration:none;
 color: #444;
font-weight: 300;
}
.cont_breadcrumbs_3 > ul > li.active {
  background-color: orange;
	color:#fff;
}

.cont_breadcrumbs_3 ul li[data-fulfilled="1"]
{
	background: #0088cc !important;
	color:#fff;
}

section.questionnaire, section.service
{
	/*margin-top:140px;*/
}

section.service
{
	/* margin-bottom:150px; */
}

tr.notes td
{
	border-top:0px !important;
}

table.jobs td
{
	vertical-align:middle !important;
}

table.jobs form
{
	margin:0px;
}

table.jobs form label
{
	margin-bottom:0px;
}

table.jobs [type="checkbox"].filled-in:checked+span:not(.lever):after 
{
    	background-color: #0088cc;
    	z-index: 0;
}
/* 
table.jobs tr.images:hover
{
	background-color: #fff !important;
} */

.jobtitle
{
	font-size:11pt;
	font-weight:bold;	
}

div#selected-services {
	padding: 10px 20px;
}

div#selected-services h3 {
	width: 100%
}

div#selected-services span.badge {
	margin: 2px;
	padding: 6px;
}

div#selected-services span.badge i {
	padding-left: 5px;
	cursor: pointer;
}

.switch label input[type=checkbox]:checked+.lever 
{
    	background: #9fe89b;
}

.switch label input[type=checkbox]:checked+.lever:after 
{
    	background-color: #0088cc;
}

.message .alert
{
	font-size:11pt;
	padding:5px;
	margin-top:20px;
	margin-bottom:30px;
}

/* #vehimages
{
	margin-bottom:30px;
	margin-top:30px;
	padding:10px;
} */

#vehimages ul li
{
	overflow:hidden;
}

#vehimages img
{
	margin:0 10px;
	width:150px;
	height:150px;
}

#vehimages ul li:not(.indicator-item)
{
	width:170px;
	border:1px solid #ddd;
	height:200px;
	text-align:center;
	padding-top:10px;
	color:#555;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	position: relative;
	box-shadow: rgba(0, 0, 0, .25) -1px 2px 3px;
}

.carousel-item
{
	max-height:100%;
}

#vehimages .title
{
	color:#9e9e9e;
	font-size:13pt;
	font-weight:normal;
	margin-bottom:10px;
	padding-top:0px;
	display: block;
	text-align:left;
}

#vehimages li.new
{
	border:2px dotted #ddd !important;
	color:#ddd;
	text-align:center;
	position: relative;
}

#vehimages li.new span
{
	display: block;
	width:100%;
	text-align:center;
	position:absolute;
	top:40%;
}

#vehimages li.new i 
{
	display: block;
	color:#ddd;
	font-size:20pt;
	font-weight:100;
}

#vehimages li .vehtag
{
	position: absolute;
	left:0px;
	bottom:0px;
	width:100%;
	display:inline-block;
	background: #f0f0f0;
	font-weight:bold;
	padding: 5px;
	line-height: 13px;
}

#vehimages div.no-image
{
	padding-top: 70px;
}

#vehimages li.active
{
	border:1px solid #68c368 !important;
	padding-top: 50px !important;
}

#vehimages li.active .vehtag
{
        background: #2dc52d;
        font-weight:bold;
	color:#fff;
}

#vehimages li .selectedvehicle
{
	font-size:30pt;
	color:#0088cc;
	display:none;
}

#vehimages li div.mileage
{
	display:block;
	margin:5px;
	margin-top:30px;
	display:none;
}

#vehimages li.active div.mileage, #vehimages li.active .selectedvehicle
{
	display: block;
}

#vehimages li.active .carousel
{
	display:none;
}

#vehimages li.openstatus
{
	pointer-events: none;
}

#vehimages li.openstatus .status
{
	display: none;
}

#vehimages li.openstatus .status
{
	background:orange;
	color:#fff;
	display:block;
	box-shadow: 2px -3px 0 2px rgba(255, 255, 255, 0.3), 3px -3px 0 2px rgba(255, 255, 255, 0.1) !important;
}

.phonenumber .title
{
	text-align:right;
	padding-top:5px;
	margin-top:0px;
	font-weight:normal;
}

.phonenumber input
{
	font-size:12pt;
}

/* DETAILS */
.cus-info 
{
    	font-size: 11pt;
    	display: table;
    	width: 100%;
    	table-layout: fixed;
    	border-radius: 5px;
	border: 1px solid #DCEBF7;
	margin-top:20px;
}

.cus-info .top
{
	border-bottom-left-radius:0px;
}

.cus-info-row {
    	display: table-row;
}

.cus-info .name, .cus-info .value
{
	display: table-cell;
	position:relative;
	border-top: 1px dotted #D5E4F1;
	font-size: 12pt;
}

.cus-info .name 
{
    	color: #336199;
	background-color: #F0F0F0;
    	border-top: 1px solid #F7FBFF;
    	width: 15%;
	text-align:right;
	padding: 6px 10px 6px 4px;
    	font-weight: 400;
    	vertical-align: middle;
}

.cus-info .name.highlight
{
    	background: #ff8400;
    	color: #fff;
}

.cus-info .value
{
	vertical-align: middle;
    	color: #0088cc;
	padding: 6px 4px 6px 6px;
	padding-left:12px;
}

.cus-info textarea, .cus-info input 
{
    	color: rgba(0,0,0,0.6) !important;
    	border: none !important;
    	width: 100%;
}

.cus-info .value .sts
{
	position: absolute;
	right:2px;
	top:0px;
	height:100%;
	padding-top:2px;
}

.cus-info-row .name.success
{
	background: #0bcc0b;
	color:#fff;
}

.cus-info-row .value.success, .cus-info-row .value.success input
{
	background: lightgreen;
}

.cus-info-row .value.success textarea
{
	background: lightgreen;
}

.cus-info-row.bottom .name, .cus-info-row.bottom .value
{
	    border-bottom: 1px solid rgb(220, 235, 247);
}

.cus-info-row.bottom .name
{
	border-radius-left: 3px;
}

.btn-group .btn
{
	box-shadow: none !important;
}

.btn-group .btn.active
{	
	background: #81c0e0;
	color:#fff;
}

.modal
{
	background: transparent !important;
	box-shadow: none;
}

#addvehicle select, #addvehicle input
{
	display:block;
}

#addvehicle input
{
	border: 1px solid #ccc !important;
	border-radius:3px;
	top:4px;
}

#addvehicle button
{
	box-shadow: none;
}

.jobnotes, .jobnotes .popover-content 
{
	/* width:500px !important; */
	max-width:500px !important;
	padding-bottom:0px;
}

tr.notes, tr.notes td
{
	border-top:0px !important;
}

td.notes
{
	font-style: italic;
}

div.appt-details
{
	text-align: right !important;
}

div.appt-details h3
{
	display: block;
}

/* STAGES */

div.stages
{
	text-align: center !important;
}

div.stage.fulfilled:not(.active) i
{
	background: #28a745 !important;
	color: #fff;
	border: 0px !important;
}

div.stages div.stage:hover
{
	cursor: pointer;
}

div.stages div.stage
{
	padding: 0px !important;
}

div.stages div.stage i
{
	display: block;
    height: 35px;
    width: 35px;
    background: #eee;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    float: none;
    margin: 0 auto;
	border: 1px solid #069;
}

div.stages div.stage.active i
{
	background-color: #006699;
	color: #fff;
}

div.stages div.stage span.name
{
	display: block;
	color: #006699;
}

div.stages div.divider
{
	height: 1px;
	background-color: #006699;
	width: 100%;
	top: 18px;
	margin: 0px 10px;
}

div.question
{
	margin: 5px;
	padding-bottom: 5px;
	max-width: 1000px;
	float: none;
	margin: 0 auto;
	/* border-bottom: 1px solid lightgray; */
}

div.question span.question-title
{
	display: block;
	font-size: 12pt;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 5px;
}

section.questionnaire div.note
{
	max-width: 1000px;
	padding-left: 12px;
	float: none;
	margin: 0 auto;
}

/* WORKFLOW */
ul.workflow li {
		cursor:pointer;
		color:#777;
		font-size:12pt;
	position:relative;
	}	

ul.workflow {
	display: block;
	overflow: hidden;
	border-radius: 5px;
	padding:0px; 
	vertical-align:bottom;	
	display:table;
	width:100%;
	table-layout:fixed;
	background: green;
}

.workflow li {
	text-decoration: none;
	outline: none;
	display: block;
	font-size: 11pt;
	line-height: 30px;
	color: white;
	font-size:10pt;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 7px 0 30px;
	/*position: relative;*/
	text-align:center;
/*	background:#efefef; */
	background: #F3F3F2;
	color:#069 !important;
	display:table-cell;
	float:none;
}

.workflow li:first-child {
	padding-left: 30px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.workflow li:first-child:before {
	left: 14px;
}
.workflow li:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

.workflow a
{
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

/*adding the arrows for the workflows using rotated pseudo elements*/
.workflow li:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -15px; /*half of square's length*/
	width: 30px; 
	height: 30px;
	transform: scale(0.707) rotate(45deg);
	z-index: 1;
	/*background: #efefef;*/
	background: #F3F3F2;
        color:#fff;
	box-shadow: 2px -3px 0 2px rgba(255, 255, 255, 0.3), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
    	border-radius: 0 15px 0 60px;
}

.workflow li:last-child:after {
	content: none;
}

.workflow a, .workflow li:after {
	color: #F3F3F2;
	font-size:12pt;
}

.workflow li:hover
{
	background: #0088cc;
	color:#fff !important;
}

.workflow li:hover:after
{
	background: #0088cc;
        color:#fff;
}

.workflow li.active
{
        background: #0088cc;
        color:#fff !important;
}

.workflow li.active:after
{
        background: #0088cc;
        color:#fff;
}

.workflow li.active:before {
        background: #f5f5f5;
	color:#fff;
}

.workflow li:first-child {
    padding-left: 20px;
    border-radius: 5px 0 0 5px;
}

.workflow li:first-child:before
{
	overflow:hidden;
}

.note
{
	font-style:italic;
	display:block;
}

footer
{
	/*display:none;*/
}

section.review
{
	/*margin-top:130px;*/
	/* margin-bottom:100px; */
	float: none;
	margin: 0px auto 50px auto;
	max-width: 1000px;
}

section.review table.review-table th:last-child, section.review table.review-table td:last-child
{
	text-align: right !important;
}

div.cust-details div, div.appt-details span
{
	font-size: 11.5pt;
    padding-bottom: 3px;
}

div.cust-details h3, div.appt-details h3
{
	margin-top: 10px;
	margin-bottom: 5px;
}

div.appt-details span.appt-detail
{
	margin-bottom: 20px;
	display: block
}

table.review-table span.item-title
{
	font-weight: bold;
	font-size: 11pt;
	display: block;
}

table.review-table span.item-description
{
	display: block;
	font-size: 10pt;
}

table.review-table span.item-note
{
	display: block;
	font-style: italic;
	font-size: 10pt;
}



.reviewtitle
{
	font-weight:bold;
	font-size:12pt;
}

button.submit
{
	margin-bottom:15px;
	width:100%;
}

ul.errors
{
	padding-left:10px;
}

ul.errors li
{
	list-style: square;
	padding-left:10px;
	margin-left:20px;
}

section.review td
{
	vertical-align:middle !important;
}

td.name
{
	background: #f0f0f0;
}

td.value
{
	font-weight:bold;
}

.carousel ol li
{
	box-shadow:none !important;
	border:0px !important;
}

.allow_overwrite
{
	display:none;
	text-align:center;
}

.allow_overwrite button
{
	padding:0 10px;
}

section.service .total
{
	display:none;
	padding:10px;
	font-size:12pt;
	margin-bottom:0px;
	font-weight:bold;
}

section.service .total i
{
	font-weight: normal;
	font-size: 13px;
	display: block;
}

section.review .totalprice
{
	text-align:right;
	font-weight:bold;
	float:right;
	font-size:12pt;
}

#wait_dropoff
{
	padding:10px;
}

#wait_dropoff .title
{
	text-align:left;
	color:#9e9e9e;
	font-weight:normal;
	font-size:13pt;
}

#wait_dropoff select
{
	width:200px;
}

.shuttle_address
{
	display:none;
}

.shuttle_address input
{
	border-radius:3px;
}

ul#vehicleimages
{
	max-height: 420px;
	overflow: auto;
	padding: 0px !important;
}

ul#vehicleimages li
{
	cursor: pointer;
}

#vehicleimages .carousel
{
        max-height:180px;
}

#vehicleimages .carousel .carousel-indicators
{
        height:10px;
        display:none;
}

.smwidth
{
	display:none;
}

table.smwidth td
{
	width:50%;
}

ul.code
{
	padding-left:0px;
	display:table;
	table-layout: fixed;
	width:100%
}

ul.code li
{
	display: table-cell;
	list-style:none;
	text-align:center;
	padding:5px;
}

ul.code input
{
	border-radius:4px;
	width:100%;
	text-align:center;
}

#securitycode .modal-content
{
	margin: 0 auto;
}

#checkin button.checkin
{
	height:auto;
}

#checkin button.checkin hr
{
	padding:0px;
	margin:2px 15px;
	border-bottom:1px solid #ddd;
}

button.checkin[disabled]
{
	opacity: 1;
	color:#fff !important;
}

ul.details_note
{
	padding-left:20px;
}

ul.details_note li
{
	list-style: circle;
}

ul.details_note li.title
{
	list-style:none;
	text-align:left;
	font-size:10pt;
	padding:0px;
	margin:0px;
	color:inherit;
	position:relative;
	left:-20px;
}

#addvehicle .modal-content
{
	padding: 20px;
}

#addvehicle label
{
	font-size:12pt;
	font-weight:normal;
	color:#555;
}

button.close
{
	opacity:1;
}

button.close i
{
	font-weight:100;
        opacity: 1;
        position: absolute;
        right: -5px;
        top: -5px;
    	border-radius: 100%;
    	font-size: 18pt;
	background: #fff;
    	color: #aaa;
    	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.2) !important;
}

button.btn-notes
{
	display: none;
	margin-top:10px;
	width:100%;
	display:block;
}

tr.job_notes
{
	display:none;
}

.signpad canvas
{
	display:block;
	border:1px solid #ddd;
	border-radius:4px;
	margin-bottom:20px;
}

.clearpad
{
	box-shadow: none;
	display:inline-block;
	margin-bottom:10px;
}

#addvehicle .cus-info select, #addvehicle .cus-info input
{
	border:0px !important;
	box-shadow: none;
}

#addvehicle .cus-info .value
{
	padding:0px;
}

table.jobs tr:not(.images):hover td
{
	background:#efefef;
}

table.jobs tr td
{
	cursor:pointer;
}

span.jobnotes
{
	font-style:italic;
	cursor: pointer;
}

span.jobnotes:hover
{
	color:#006699;
}

input[name=phonenumber]
{
	border-radius:3px !important;
}

ul.images
{
	padding-left:0px;
}

ul.images li
{
	list-style:none;	
	float:left;
	margin-right:2px;
}

ul.images li img
{
	cursor: pointer;
    width: 100px;
    height: 100px;
    box-shadow: rgba(0, 0, 0, .25) 3px 3px 3px !important;
    border-radius: 4px;
    padding: 0px;
    margin-bottom: 0px;
    text-align: center;
}

.attachments li canvas
{
        position: absolute;
        width:100px !important;
        height:100px  !important;
        top:0px;
        left:0px;
}

.attachments li div.canvas-container
{
        position: absolute !important;
        width:100px !important;
        height:100px  !important;
        top:0px !important;
        left:0px !important;
}

.topclose
{
        right:10px;
        top:10px;
        position: absolute;
}

.topclose button
{
        color:#ccc;
        background: transparent;
        font-size:18pt;
	box-shadow: none;
	padding:0px;
}

#showimg .modal-title 
{
    color: #006699;
    font-weight: bold;
    padding: 10px 0;
}

#showimg .modal-content
{
	padding:0px;
}

.imgcontainer {
    position: relative;
}

#showimg .modal-body img {
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3) !important;
}

#showimg .timestamp {
    background: rgba(0,0,0,0.1);
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #ff0;
    z-index: 5;
    padding: 0 2px;
    font-size: 10pt;
}

.imgcontainer .canvas-container, .imgcontainer canvas {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}

.modal
{
	max-height:none !important;
}

#showimg .modal-dialog
{
	width:100%;
}

#showimg div.tag
{
        padding: 0 7px;
        border: 1px solid #000;
        color: #fff;
        position: absolute;
        background: rgba(0,0,0,0.5);
        box-shadow: rgba(0,0,0,.25) 3px 3px 3px !important;
        border-radius: 100%;
}

ul#imgnotes
{
        padding-left:0px;
        margin-lefT:0px;
        margin-top:20px;
}

ul#imgnotes li
{
        list-style:none;
}

.sweet-alert .btn
{
	padding: 6px 12px;
	width: 200px;
    	margin: 4px;
    	font-size: 12pt;
}

.sweet-alert h2
{
	font-size:20pt;
}

.sweet-alert .lead
{
	font-size:14pt;
}

.container
{
	max-width:1280px !important;
}

.navbar-brand
{
	line-height:20px;
	padding-bottom:0px;
}

.navbar-fixed-top
{
	padding-top:0px;
}


.modal-footer .row
{
	margin-right: -15px !important;
	margin-left: -15px !important;
}

div.loading-scheduler
{
	text-align: center;
    padding: 40px;
    font-size: 12pt;
}

div.tempus-dominus-widget
{
	width: 100%;
}
#timeslots i
{
	margin: 0;
  position: absolute;
  top: 50%;
}
#scheduler
{
	padding-bottom: 20px;
}
button.timeslot
{
	border: 1px solid lightgray !important;
	border-radius: 3px;
	width: 100%;
	padding: 6px 3px;
	margin-bottom: 20px;
	cursor: pointer;
	border-radius: 4px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	background-color: #fff;
}

button.timeslot:hover, button.timeslot.active
{
	background-color: #006699 !important;
	color: #fff;
}

div#appt-result
{
	text-align: center;
	padding-top: 20px;
	font-size: 12pt;
}

div.section-title
{
	text-align: center;
}

div.search-jobs
{
	padding-bottom: 10px;
}

div.jobs
{
	padding: 0px 10px;
	max-height: 50%;
	overflow-y: scroll;
}


div.job
{
	cursor: pointer;
	padding: 7px !important;
}

div.job div.card
{
	min-height: 76px;
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

div.job-checkbox
{
	display: none;
}

div.job.active div.job-checkbox
{
	display: inline-block !important;
}

div.job.active div.job-title
{
	color: green;
}

div.job div.card:hover
{
	background-color: #e2e3e5;
}

div.job.active div.card
{
	background-color: #e2e3e5;
}

div.job div.card-title
{
	font-size: 12pt;
	font-weight: bold;
}

div.job div.job-title i
{
	padding: 5px;
}

div.job div.job-title i:first-of-type
{
	color: #006699;
	font-size: 13pt;
}

div.job div.job-price, div.job div.job-description
{
	font-style: italic;
	font-size: 10.5pt;
	padding-left: 25px;
}

div.job i
{
	padding-right: 5px;
}

div.job-checkbox
{
	display: inline-block;
    float: right;
    border: 1px solid green;
    padding: 4px;
    border-radius: 5px;
    color: green;
}

div.total
{
	margin-top: 10px;
	border-top: 1px solid lightgray;
	padding-top: 10px;
}

div.total div.pull-right
{
	font-weight: bold;
	text-align: right;
	font-size: 13pt;
}


/* TEMPUS DOMINUS CUSTOM CSS */
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).disabled 
{
	text-decoration: line-through;
}

div.day.active
{
	background-color: #006699 !important;
}

input[name='phone-email']
{
	max-width: 400px;
	display: inline-block;
}

label.form-title
{
	display: block;
	font-size: 13pt;
	color: #006699;
	font-weight: bold;
}

div.customer-lookup
{
	max-width: 400px;
	float: none;
	margin: 0 auto;
}

div.customer-details
{
	max-width: 1000px;
    float: none;
    margin: 0 auto;
}

button.btn-default
{
	/* width: 100%; */
    color: #006699;
    font-weight: bold !important;
    font-size: 12pt;
}

div.customer-details div.row:not(:first-of-type)
{
	/* border-top: 1px solid #eee;
	margin-top: 30px;
	padding-top: 30px; */
	padding: 20px;
}

h3
{
	text-transform: none !important;
}

div.am h3, div.pm h3
{
	font-size: 11pt
}

/* .btn-outline-primary
{
	border: 1px solid #006699;
	color: #006699;
	background-color: #fff;
} */

div.splash
{
	min-height: 400px;
	text-align: center;
	padding-top: 100px;
}

div.splash button
{
	max-width: 300px;
	float: none;
	margin: 0 auto;
}

div.splash img
{
	max-height: 150px;
	width: auto;
	display: block;
	float: none;
	margin: 0 auto;
}

div.splash h3
{
	font-size: 14pt;
	color: #006699;
	padding: 20px;
}

span.form-sublabel
{
	display: block;
	font-style: italic;
	font-size: 14px;
}

.accordion .card-header
{
	padding-top: 20px;
	border-top: 1px solid #069;
	cursor: pointer;
}

div.availability-title
{
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
    padding-bottom: 10px;
	text-align: center;
}

div.availability-title span
{
	font-size: 12pt;
	font-weight: bold;
	/* color: #006699; */
}

div.am
{
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
}

div.tempus-dominus-widget .previous, div.tempus-dominus-widget .next
{
	font-size: 14pt;
	padding: 10px;
}

div.tempus-dominus-widget div.picker-switch
{
	padding-top: 10px;
    font-size: 12pt;
    font-weight: bold;
}

button.next.btn-primary
{
	color: #fff !important;
}

#scheduler.disabled
{
	pointer-events: none;
}

#header-wf
{
	padding-top: 10px;
}






@media (max-width: 1100px)
{
	.navbar-header {
		display: inherit !important;
		text-align: center;
		width: 100%;
	}
}
@media (max-width: 1200px)
{
	.phonenumber .title, .phonenumber .input
        {
                text-align:center;
        }
}

@media (max-width: 1005px)
{

	/* div.stages {
		display: block;
	}

	div.stage {
		display: none;
	}

	div.stage.active {
		display: block;
	} */

	/* div.stages div.divider {
		display: none;
	} */

	.phonenumber .title, .phonenumber .input
        {
                text-align:center;
        }

	.appt
	{
		margin-bottom:20px;
	}
	
	.circle 
	{
		display: none;
	}
	
	.appt .title, .checkin .title
	{
		padding-top:0px;
	}
}


@media (max-width: 900px)
{
	ul.workflow
	{
		display: none;
	}
}

@media (max-width: 768px)
{
	.modal-dialog 
	{
		/*width: auto;*/
	    	margin: 30px auto;
	}
	
	ul.workflow
        {
                display: none;
        }
}

@media (max-width:600px)
{

	#header-wf
	{
		padding-top: 20px;
	}

	div.atmeUI_formSection
	{
		width: 100% !important;
		padding-left: 5px;
		padding-right: 5px;
	}
	ul.workflow
        {
                display: none;
        }

	.navbar
	{
		min-height: 75px;
	}

	.menu .appt a, .menu .checkin a
	{
		padding-top:10px !important;
		background:#06a7f7;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
		width:100%;
	}
	
	.menu .title
	{
		padding-top:10px;
		font-size:13pt;
	}

	.circle
	{
		display: none;
	}
	
	.circle i
	{
		font-size:25pt;
		padding:10pt;
	}
	
	.navbar
	{
	    	box-shadow: rgba(0,0,0,0.4) 0 0 3px !important;
	}
	
	.logoheader
	{
		padding-bottom:50px;
	}
	
	.navbar-header
	{
		width: 100%;
		background:#fff;
		/* box-shadow: rgba(0,0,0,0.4) 0 0 3px !important; */
		float: none;
		/* margin: 0 auto; */
	}



	.navbar-header img 
	{
		display: none !important;
	}

	.navbar-header .logo	
	{
		width:100%;
		text-align:center;
	}
	
	.navbar .phonenumber
	{
		display:block;
	}
	
	.navbar .logo
	{
		display:none !important;
	}
		
	.navbar .navbar-brand
	{
		text-align:center;
		width:100%;
		padding-top:10px;
		height:auto;
		font-weight:bold;
		font-size:19pt;
	}
	
	.navbar .phonenumber
        {
		display:block;
                font-size:12pt;
                color:#555;
		display:none;
	}

	.navbar .poweredby
	{
                display:block;
		font-size:11pt;
		color:#555;
        }
	
	.navbar .container
	{
		padding-left: 0px !important;
		padding-right:0px !important;
	}
	
	.navbar .menuselection
	{
		display:none;
	}
	
	.mini-header
	{
		display:block;	
		padding-top:15px; 
		padding-right:5px; 
		width:100%;
                text-align:center;
		font-size:11pt; 
		font-style:italic;
	}
	
	.container section.appointment
	{
		/* margin-top:100px; */
	}

	#vehimages ul li:not(.indicator-item)
	{
		margin-right: 5px;
	}

	.phonenumber .title, .phonenumber .input
	{
		text-align:center;
	}

	table.scheduler th.date
	{
		text-align:center;
		font-size:10pt;
		font-weight:bold;
		padding:5px 0;
	}
	
	table.scheduler td.slot
	{
		text-align:center;
		font-size:10pt;
		padding:5px 0;
		font-family:monospace;
	}
	
	.appt_slot
	{
		display: block;
	}
	
	button.next, button.prev
	{
		color:#006699 !important;
		font-weight:bold !important;
	}
	
	.logoheader .logo
	{
		width:100px;
	}
	
	.appt_slot .title
	{
		display:none;
	}
	
	div.phonenumber
	{
		border:0px;
	}
	
	section.details
	{
		border:none;
		padding-left:10px;
		padding-right:10px;
	}
	
	.wait_dropoff
	{
		margin-top:0px;
	}
	
	.cus-info .name
	{
		width:40%;
	}
	
	#vehimages ul li
	{
		margin-top:10px;
		width:47% !important;
	}
	
	#vehimages ul li img
	{
		/*width:100% !important;*/
		margin:0 auto;
	}
	
	.mileage
	{
		width:150px;
		margin:0 auto !important;
		margin-top:30px !important;
	}
	
	.mileage label, .mileage input
	{
		text-align:center;
		display:block;
		width:100%;
	}
	
	.navbar button, #tracker
	{
		/* display:none; */
	}
	
	footer
	{
		display: block !important;
	}
	
	section .title
	{
		display: block !important;
		text-align:center !important;
		padding-top:0px;
	}
	
	section.questionnaire, section.service 
	{
    		/* margin-top: 120px; */
	}
	
	.lgwidth
	{
		display: none;
	}

	.smwidth
	{
		display: block;
	}
	
	table.smwidth
	{
		display: table;
	}
	
	button.submit
	{
		padding:0px;
	}
	
	button.submit.redirect
	{
		line-height:10px;
		height:50px;
	}
	
	#addvehicle .modal-header
	{
		text-align:center;
	}
	
	#addvehicle .modal-footer
	{
		border-top:0px;
	}
	
	#addvehicle .modal-footer .col-xs-6
	{
		padding:0px;
	}
	
	#addvehicle .modal-footer button
	{
		width:95%;
	}
	
	#vehimages li .vehtag 
	{
		font-size:11pt;
		line-height: 14px;
	}
	
	#vehimages li.new span 
	{
		font-size:12pt;
	}
	
	.jobtitle
	{
		display:block;
		text-align:center;
	}
	
	.note
	{
		display:block;
                text-align:center;
	}
	
	td.jobnotes
	{
		display:none;
	}
	
	button.btn-notes
	{
		display:block;
	}
	
	table.jobs td.price, table.jobs td.togglejob
	{
		vertical-align:top !important;
		text-align:right;
	}
	
	tr.job_item, tr.job_item td
	{
		border:0px;
	}

	tr.job_notes
	{
		display: contents;
	}
	
	tr.job_notes td
	{
		border-top:0px !important;
		padding-top:0px;
	}
	
	tr.job_notes button
	{
		margin-top:0px;
	}
	
	tr.notes 
	{
		border:0px;
	}
	
	.shuttle_address
	{
		margin-top:20px;
	}
	
	input[name=phonenumber_email] {
		width:100% !important;
	}
}

@media (max-width:530px)
{
	#tracker div.divider
	{
		display: none;
	}
}

@media (max-width:500px)
{
	div.shop_name
	{
		text-wrap: wrap;
	}
	#header-wf {
	    padding-top: 15px;
	}

	.accordion table
	{
		table-layout: fixed;
	}
}