/*
   THEME NAME: Socket Time - beta
   THEME URI: https://github.com/cmisak/sockettime
   VERSION: 1.0.18
   AUTHOR: Craig Misak
   AUTHOR URI: https://github.com/cmisak
   DESCRIPTION: Socket Time - Scheduling Done by those who get the work Done
   TEMPLATE: twentynineteen
   GitHub Theme URI: cmisak/sockettime
   GitHub Theme URI: https://github.com/cmisak/sockettime
*/
html {margin:0px !important; padding: 0px !important;}
body {margin: 0; color: #444; font-family: Avenir, Tahoma, Verdana, Segoe,sans-serif; /* font-size: 13px; */ line-height: 1.3em; }
.page-template-schedule-service.logged-in { background-color: #bcbdc0; }
.ss-agent {background-color: #bcbdc0;}
.top-header {height:55px; position: relative; }
ul { list-style: none; margin:20px 0 0 0; padding: 0; }
input, button { padding: 10px;  }
input[type='text'], input[type='password'], input[type='number'], input[type='email'] {max-width: 100%; box-sizing: border-box; border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); background-color: #fff; color: #32373c; outline: 0;transition: 50ms border-color ease-in-out;}
.w100 { width: 100%; }
.w90 { width: 90%; }
.w65 { width: 65%; }
.w50 { width: 50%; }
.w34 { width: 34%; }

#mpi-data-popup .appt-history{padding-right: 20px;}
#mpi-data-popup .w34{position:relative;}
#mpi-data-popup .w34 .toggler{position:absolute; top: 50%; right: 0; cursor:pointer;    border: 1px solid #eee; background-color: #FFF;}
#mpi-data-popup .w34 .toggler:hover{background-color:#1e416b; color:#FFF;}
#mpi-data-popup .w34 .toggler .dashicons{ font-size: 20px; width: 20px; height: 20px;}
#mpi-data-popup.collapsed .w34{width: 20px;}
#mpi-data-popup.collapsed .w34 .appt-data-wrapper{display:none;}
#mpi-data-popup.collapsed .w65{width:calc(100% - 25px);}
select { height: 35px; border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); background-color: #fff; color: #32373c; outline: 0;transition: 50ms border-color ease-in-out;}
textarea { padding: 10px; font-family: Tahoma; width: 100%; box-sizing:border-box; border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); background-color: #fff; color: #32373c; outline: 0;transition: 50ms border-color ease-in-out;}
#wpadminbar { display: none; }
.customer-search-wrap { margin: 0; background-color: #808285; height: 105px; position: fixed; top: 0; width: 100%; z-index: 1; }

/* Frontend Styling */
.container-flattop-89bottomleft {-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 89%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 89%);}
.container-flattop-89bottomright {-webkit-clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 89%, 0% 100%);}
.container-106topleft-89bottomright {-webkit-clip-path: polygon(0 0, 100% 6%, 100% 89%, 0% 100%); clip-path: polygon(0 0, 100% 6%, 100% 89%, 0% 100%); margin-top:-7%;}
.container-106topleft-flatbottom {-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%); margin-top:-7%;}

.rs-container { padding: 20px; border-bottom: 1px solid #eaeaea; background-color: #FFF; display: block; margin: 10px; margin-bottom:0; box-shadow: 0px 0px 3px #afadad; }
.rs-container h4 { margin: 20px 0 5px; }
.rs-container h4.heading-line { padding-bottom: 3px; border-bottom: 1px solid #eaeaea; margin-bottom: 20px; }
.rs-container .dashicons-admin-generic, .rs-container .dashicons-edit { color: #444; }
.nav-btns { margin-top: -10px; margin-bottom: 10px; }
.nav-btns a { text-decoration: none; color: #444; }
/*.dashicons-dismiss, .dashicons-trash { color: #bf1e2d; }
.dashicons-plus-alt, .dashicons-plus { color: #0c9444; }*/
.store-hours td { line-height: 37px; }
.time-sched { display: none; }
.time-closed { text-align: center; }
/*.rs-container input, .rs-container select { height: 35px; }*/
.rs-container input[type="checkbox"] { width: 35px; padding: 9px !important; }
.rs-cols { margin-bottom: 20px; }
.rs-cols p { margin: 3px 0; color: #777; }
.fleft { float: left; }
.fright { float: right; }
.lbl-line { border-bottom: 1px solid #eaeaea; display: block; font-size: 18px; line-height: 27px; }
.lbl-noline { display: block; font-size: 18px; line-height: 27px; }
.left-space { width: 50px; height: 100px; }
.lane-table {}
.lane-row { line-height: 35px; margin-bottom: 7px; }
.lane-col { float: left; }
.arw {  width: 43px; }
.chk { width: 43px; }
.min { width: 80px; }
.min input { width: 70px; }
.clr { width: 45px; }
.id { width: 45px; text-align: center; }
.ttl { padding-left: 7px; }
.smn { float: right; margin-right: 55px; }
.color-id-title-mins { border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); background-color: #fff; width: 700px; height: 34px; overflow: hidden; }
.color-id-title-mins input { border: none; float: left; }
.color-id-title-mins input[type="color"] { width: 40px; height: 32px; }
.color-id-title-mins input[type="text"] { width: 450px; }
.color-id-title-mins span { float: left; }
.lane-table .dashicons { font-size: 30px; margin: 5px 0 5px 5px; cursor: pointer; }
.op-code-row { line-height: 35px; }
.op-code-col { float: left; margin-right: 5px; }
.op-code-col input[type="text"] { width: 100%; }
.op-code-col.active {width: 35px;}
/* .op-code-col.code {width: 60px;} */
.op-code-col.title {width: 220px;}
.op-code-col.desc {width: 500px;}
.op-code-col.cost {width: 70px;}
.op-code-col.duration {width: 85px;}
.op-code-col.expected {width: 85px;}
.op-code-col.wrap-days {width: 70px;}
.op-code-col.shop-id {width: 40px;}
.op-code-table .dashicons { font-size: 20px; margin: 7px 0 0px 0px; cursor: pointer; }
.op-code-table .dashicons-plus { float: left; position: absolute; }
.op-code-table a {color: #444; text-decoration: none;}
.op-code-row-child .op-code-col.active { margin-left: 41px; }
.op-code-row-child .op-code-col.title {width: 179px;}
.multi-row-input .dashicons { margin-top: 4px; cursor: pointer; }
.op-code-col.rating { width: 100px; }
.op-code-col.day { text-align: center; width: 174px; }
.op-code-col.day select { margin: 0; padding: 0; }
.input-style {width:100%; height:35px; line-height:28px; border:1px solid #ddd; box-shadow:inset 0 1px 2px rgba(0,0,0,.07); background:#fff; color:#32373c; margin:1px; padding:3px 5px; font-size:14px; box-sizing:border-box;}
.clear-both { clear: both; }
.customer-search { position: absolute; left: 0; top: 0; width: 830px; z-index: 1; padding: 20px; border-bottom: 1px solid #eaeaea; background-color: #FFF; display: block; margin: 10px; box-shadow: 0px 0px 3px #afadad; }
.customer-search a { color: #444; text-decoration: none; }
.customer-search form { float: left; width: calc(100% - 236px) }
.customer-search button { float: left; width: 100px; margin-left: 5px; }
.customer-search .search-result{ overflow: auto; max-height: calc(100vh - 8vh);}
.rs-cust-row { border-bottom:1px solid #ddd; margin-bottom: 10px; box-shadow: 0 4px 2px -2px rgba(0,0,0,.07); }
.rs-cust-row-heading { padding: 5px 0; margin-bottom: 10px; font-weight: bold; border-bottom:1px solid #ddd; }
.rs-cust-row-heading a { float: right; }

.schedule-service .profile { min-width: 200px; margin-right: 10px; }
.schedule-service .store-opcodes { min-width: 420px; min-height: 200px;}
.schedule-service .campaigns { min-width: 400px; min-height: 200px;}
.schedule-service .schedule-available { min-height: 200px;}
.schedule-service .store-list { display: none; }
.store-list.lbl-radio label { float: left; width: 48%; margin-right: 5px; }
.store-services-search { padding: 10px 0; }
.schedule-service .opcode-children { padding-top: 15px; }
.schedule-service .opcode-children .title { font-size: 18px; padding-bottom: 5px; }

.schedule-service .lbl-radio label { display: block; margin-bottom: 5px; }
.schedule-service .lbl-radio input { display: none; }
.schedule-service .lbl-radio input[type=radio] + span { padding: 10px; background: #f6f5f6; display: block; border:1px solid #f6f5f6; box-shadow:inset 0 1px 2px rgba(0,0,0,.07);}
.schedule-service .lbl-radio input[type=radio]:checked + span { background: #77bc79; border:1px solid #77bc79;}

.schedule-service .lbl-radio-apt-time div { margin-left: 3px; margin-bottom: -5px; border-left: 1px solid #bbbabb; }
.schedule-service .lbl-radio-apt-time div.half { border-color: #cecdcf; }
.schedule-service .lbl-radio-apt-time label { display: block; height: 40px; margin-left: -1px; margin-right: -3px; }
.schedule-service .lbl-radio-apt-time input { display: none; }
.schedule-service .lbl-radio-apt-time input[type=radio] + span { height: 35px; background: #d7e4ba; display: block; border-left:5px solid #5e9d61;}
.schedule-service .lbl-radio-apt-time .wait-list-slot input[type=radio] + span { background: #862a25; border-color: #620601;}
.schedule-service .lbl-radio-apt-time .selected-slots input[type=radio] + span { background: #f8f1b7; border-left:10px solid #ebde7a; }
.schedule-service .lbl-radio-apt-time input[type=radio]:checked + span, .schedule-service .lbl-radio-apt-time .wait-list-slot input[type=radio]:checked + span  { background: #52a8dd; border-left:10px solid #4d90c5; }

.lbl-checkbox { width: 130px; float: left; margin: 0 5px 5px 0; font-size: 11px; }
.lbl-checkbox.force-transport { opacity: 0.50; }
.lbl-checkbox label { text-align: center; }
.lbl-checkbox label span { border-radius: 3px; }
.lbl-checkbox input { display: none; }
.lbl-checkbox input[type=checkbox] + span { height: 85px; padding: 10px; background: #f6f5f6; display: block; border:1px solid #bebdbe; box-shadow:inset 0 1px 2px rgba(0,0,0,.07);}
.lbl-checkbox input[type=checkbox]:checked + span { background: #77bc79; color: #FFF; }
.lbl-checkbox input[type=radio] + span { height: 85px; padding: 10px; background: #f6f5f6; display: block; border:1px solid #bebdbe; box-shadow:inset 0 1px 2px rgba(0,0,0,.07);}
.lbl-checkbox input[type=radio]:checked + span { background: #77bc79; color: #FFF; border:1px solid #77bc79;}

.vs-suggest { display: inline-block; padding: 10px; box-shadow: 0 0 4px 1px #CCC; margin: 0 5px 10px 0; cursor: pointer; border-radius: 2px;}

.schedule-service .apt-table { width: 100%; border-collapse:separate; border-spacing: 0 5px; }
.schedule-service .d-time, .greeter .d-time { min-width: 10px; text-align: center; font-size: 12px; color: #999; }
.schedule-service .d-time b { float: left; font-size: 15px; color: #444; }
.schedule-service .d-time-hh { font-size: 15px; color: #444; font-weight: bold; }
.schedule-service .d-time-open { background: #d5d4d6; }
.schedule-service .apt-table .selected-date .day, .schedule-service .apt-table .selected-date .date { font-weight: bold; }
.schedule-service .apt-table .selected-date .day { position: relative; }
.schedule-service .apt-table .selected-date .day::before { font-family: dashicons; content: "\f345"; position: absolute; left: -20px; color: #21aae1; }

.schedule-service .op-code-options li { position: relative; margin: 0; }
.schedule-service .op-code-options li span.op-code-title { display: block; margin: 1px 0; padding: 5px; background: #ebf7fe; border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); }
.schedule-service .op-code-options .dashicons { position: absolute; top: 5px; left: -20px; cursor: pointer; }
.schedule-service .op-code-layout li { margin: 0; }
.schedule-service .op-code-layout li ul { margin-left: 30px; min-height: 10px; }
.schedule-service .op-code-layout li ul li { height: 35px; line-height: 28px; margin: 5px 0; }
.schedule-service .op-code-layout li ul li .op-code-col.title {width: 190px;}
.page-template-schedule-service.logged-in .schedule-service .rs-container-slider { padding-top: 105px; }
.schedule-service .rs-container-slides { padding: 10px; width: 100%; box-sizing: border-box; }
.schedule-service .rs-container-slide { float: left; }
.schedule-service .rs-container-slide.show-mpi-container{
	width:1015px;
}
.schedule-service .rs-container-slide.show-mpi-container .mpi-data.fleft{
	float:none !important;
	width:100% !important;
}
.grey-button { padding: 10px; }

.button { background: #c1c2c4; padding: 10px; text-align: center; border:0; border-bottom: 3px solid #adafb2; border-radius: 3px; background: -webkit-linear-gradient(top,#f3f3f4,#c1c2c4);}
.button.button-primary { background: #f3b51f; border-bottom: 3px solid #d69c10; background: -webkit-linear-gradient(top,#fdcd59,#ecb529);}
.button span { float: left; }

.ajax-loader{ background-color:#eee; padding:10px; text-align:center; text-transform:uppercase; font-weight:700; }

.vehicle-list li { float: left; margin: 0 20px 20px 0; padding: 20px; border-bottom: 1px solid #eaeaea; background-color: #FFF; box-shadow: 0px 0px 3px #afadad; width: 262px; }
.vehicle-list li.selected { box-shadow: 0px 0px 7px #2ba22e; }
.vehicle-list li.garage-add-vehicle { border-radius: 5px; margin: 90px 25px; cursor: pointer; }
.vehicle-title { font-weight: bold; }
.vehicle-photo { width:auto; height: 250px; }
.vehicle-photo.sm { width: 140px; height: 140px; }
#quick-add-popup .vehicle-photo { height: auto; }
.vehicle-btn { text-align: center; margin-bottom: 10px; }
.vehicle-btn button { width: 100%; }

.schedule-service .customer-profile { width: fit-content; }
.schedule-service .customer-profile .rs-container:first-of-type { width: 1205px; }
.schedule-service .customer-profile .rs-container.appointment-log-wrapper{width:460px;}
.schedule-service .customer-profile .rs-container.appointment-log-wrapper.bordered{border:1px solid #bcbdc0;}

.schedule-service .customer-profile .rs-container { float: left; width: 22%; 
	/* overflow:auto; height:87.4vh; */
}

.rs-container.overflow, .overflow{ 
	overflow:auto; 
	height: calc(100vh - 166px);
}
.rs-container.overflow.max-height, .overflow.max-height{overflow:auto; max-height:81.6vh;}

.overflow::-webkit-scrollbar,
.scroll-ui::-webkit-scrollbar {
	width: 10px;
}

.overflow::-webkit-scrollbar-track,
.scroll-ui::-webkit-scrollbar-track {
	background: #f1f1f1;
}


.overflow::-webkit-scrollbar-thumb,
.scroll-ui::-webkit-scrollbar-thumb{
	background: #888;
}


.schedule-service .customer-profile .rs-container::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.schedule-service .customer-profile .rs-container.appointment-log-detail-wrapper{width:960px; box-shadow:none;}
.schedule-service .customer-profile .rs-container.dms-container{width:750px;}
.schedule-service .vehicle-photo > img{ display:block; width: 100%; margin:auto }
.schedule-service .appointment-log-detail-wrapper{width:965px; border-top: 1px solid #bcbdc0;}
.schedule-service .appointment-log-detail-wrapper .lbl-radio input[type=radio] + span{background:transparent;box-shadow: none;}




#profile-appointments ul li { padding-bottom: 15px; }
#profile-appointments ul li.appointment-passed { opacity: 0.75; }
#profile-appointments .appt-vehicle { font-weight: bold; }
#profile-appointments .appt-date {}
#profile-appointments .appt-jobs { font-weight: bold; }
#profile-appointments a { text-decoration: none; display:inline-block; vertical-align: middle;}
#profile-appointments .dashicons-edit { color: #0c9444; }
#profile-appointments .dashicons-trash { color: #bf1e2d; }

.rs-tab { height: 24px; margin: 20px 0 0;}
.rs-tab ul { list-style: none;}
.rs-tab li { float: left; margin: 0; }
.rs-tab li a { margin-right: 2px; padding: 10px; background-color: #e6e7e8; text-decoration: none; outline: none; color: #333; }
.rs-tab li a.active { background-color: #21aae1; color: #FFF; }
.last-tab { clear: both; }
.schedule-table { padding: 20px; border-bottom: 1px solid #eaeaea; background-color: #FFF; display: block; margin-top: 4px; box-shadow: 0px 0px 3px #afadad; }
.color-red { color: red; }
.store-opcodes-msg { padding-bottom: 20px; }
.confirm-appt-btn { padding-top: 20px; display: none; }
.ui-menu .ui-menu-item { padding: 8px 5px; font-size:14px; font-weight:bolder; }

.appt-con-what {font-size:inherit;}
.day-out-trans { opacity: 0.2; }

.home-btn {float:left; width:50px;}
.refresh-btn, .prev-appointment-btn { float: left; cursor: pointer; width: 40px; margin-top: 6px; }

.break {background: repeating-linear-gradient(-45deg, #cccbcb, #cccbcb 10px, #b1afaf 10px, #b1afaf 20.3px)}
.no-go {background: repeating-linear-gradient(-45deg, #d2cbb8, #d2cbb8 10px, #d5d4d6 10px, #d5d4d6 20.3px)}

.mobile { background-color: #808285; }
.user-heading .create-appt { float: right; margin-right: 20px; }
.greeter .ajax-form-search-appt { float: left; width: calc(100% - 140px); }
.greeter .ajax-form-search { float: left; width: calc(100% - 300px); }
.add-walk-in-btn { float: left; width: 100px; margin-left: 5px; }
.ajax-form-search-appt input[type="text"], .ajax-form-search input[type="text"] { width: calc(100% - 70px); max-width: calc(100% - 70px) }
.greeter .customer-search, #quick-add-popup .customer-search { position: relative; background: none; border: 0; box-shadow: 0px 0px; width: 100%; padding: 0px; margin: 0; box-sizing: border-box; }
#quick-add-popup .customer-search { width: 650px; }
#quick-add-popup .profile { position: absolute; top: 20px; right: 20px; }
#quick-add-popup .back-to-profile { display: none; }
.greeter .customer-search .home-btn, .greeter .customer-search .refresh-btn { display: none; }
.back-btn { float: left; width: 50px; display: none; }
.greeter .back-btn { display: block; }
.prev-btn { float: left; display: block; height: 35px; padding-top: 4px; width: 40px; color: #CCC;}
.prev-btn.on { color: #444; }
.greeter .search-result { background-color: #FFF; }
.greeter .profile { position: relative; padding-bottom: 10px; }
.greeter .profile div.vehicle-photo { position: absolute; top: -20px; right: 20px; width: 120px; height: 90px; }
.greeter .profile .back-to-profile { display: none; }
.status-select { width: calc(100% / 8); min-width: 75px; max-width: 110px; float: left; font-size: 14px; text-align: center; }
.status-select label { text-align: center; cursor: pointer; }
.status-select label span { }
.status-select input[type=checkbox] { display: none; }
.status-select input[type=checkbox] + span { height: 75px; padding: 10px 0; background: #c6c7c8; display: block; border: 2px solid #5b5c5d;}
.status-select input[type=checkbox]:checked + span { background: #ffffff; border: 2px solid #8aa15a;}
.appt-check-in-form.hide, .apt-row.hide{ display: none; }
.appt-photos-thumb li { float: left; margin: 3px; }
.appt-photo-thumb { max-width: 75px; }



.noscroll { position: relative; overflow: hidden; }
.appt-details { line-height: normal; font-size: 12px; height: 100%; }
.appt-popup-cols { display: flex; min-height: calc(100% - 136px); }
.notes-col { width: 58%; padding-right: 2%; }
.actions-col { width: 40%; background-color:#e7ebec; }
.actions-col .action-btns { width: 88%; margin: auto; padding-bottom:20px; }
.actions-col a { box-sizing: border-box; background-color: #58585a; padding: 5px; line-height: 28px; float: left; width: calc(100% - 4px); margin: 2px; color: #FFF; text-decoration: none; text-align: center;}
.actions-col ul li a:hover{text-decoration:underline; color:#3a4f5d;}
.prior-mpi{ padding: 5px; width: calc(100% - 16px); margin-left: 2px; border:1px solid #3a4f5d; border-top:0; max-height: 300px; overflow: auto;}
.prior-mpi ul{margin: 0; }
.prior-mpi li a{background: none; color: #000; float: none; margin: 0; padding: 5px 0; }
.actions-col a.yellow { background-color: #fdd405; color: #000; }
.r-yellow { background-color: #f3db84 !important; color: #000 !important; }
.actions-col a.red { background-color: #a6302d; }
.actions-col .short { width: 68px; float: left; }
.actions-col div.short { width: 107px; margin: 2px 0 2px 2px; }
.actions-col div.short input { box-sizing: border-box; }
#greeter-list { padding: 10px; font-size: 12px; line-height: normal; }
#greeter-list .apt-row { border-top: 1px solid #87888b; }
#greeter-list .appt-overview { background-color: #FFF; position: relative; min-height: 56px; }
#greeter-list .not-open .tranport-time { width: 120px; }
.appt-overview .tranport { font-size: 10px; padding: 3px 5px; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-overview .tranport span { vertical-align: 3px; }
.appt-overview .time { padding: 3px 3px 3px 23px; font-weight: bold; font-size: 14px; }
.appt-overview .customer { margin-left: 5px; padding-top: 5px; width: 300px; }
.tag-number { margin-top: 12px; margin-right: 70px; background-color: #e2ebcf; padding: 7px; font-weight: bold; border-radius: 3px; box-shadow: 0px 0px 3px #777; border: 1px solid #FFF; }
.appt-overview .customer .opcode-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tags{ margin-right: 10px; background-color: #e2ebcf; padding: 7px; font-weight: bold; border-radius: 3px; box-shadow: 0px 0px 3px #777; border: 1px solid #FFF; }
.tags span { padding-right: 5px; font-weight: normal; border-right: 1px solid #d4d7c0;  }
.appt-overview .actions { min-width: 225px; padding-top: 12px; margin-right: 70px; }
.appt-overview .actions a { padding: 8px 15px; text-decoration: none; display: inline-block; border-radius: 3px; }
.appt-overview .actions a.yellow { background-color: #fdd405; color: #000; }
.appt-overview .actions a.grey { background-color: #686768; color: #FFF; }
.appt-overview .actions a.green { background-color: #1eae4c; color: #FFF; }
#greeter-list .appt-status { position: absolute; top: 0; right: 0; min-width: 45px; border: 2px solid #8aa15a; text-align: center; padding: 5px; font-size: 10px; }
.appt-notes { padding: 10px; background-color: #FFF; }
.appt-notes .note { position: relative; background-color: #f9f8ef; padding: 5px; box-shadow: 0px 0px 3px #afadad;}
.appt-notes .minor-updates .note { background-color: #fffae9; box-shadow: 0px 0px 3px #afadad; overflow: hidden; text-overflow: ellipsis; }

.appt-notes .note:after, .appt-notes .note:before { border: 6px solid transparent; border-right-color: #fffae9; position: absolute; content: ''; right: 100%; top:  calc(100% - 15px);}
.appt-notes .minor-updates .note:after, .appt-notes .minor-updates .note:before { border-right-color: #fffae9;}
.appt-notes .note:before, .appt-notes .minor-updates .note:before { border-right-color: #D4D4D4; border-width: 7px; margin-top: -1px;}
.appt-notes .note.mpi-tech-notes:after, .appt-notes .note.mpi-tech-notes:before { top: 10px; }

.appt-notes .rh .note:after, .appt-notes .rh .note:before { border: 6px solid transparent; border-right:none; border-left-color: #fffae9; position: absolute; content: ''; left: 100%; top:  calc(100% - 15px);}
.appt-notes .minor-updates.rh .note:after, .appt-notes .minor-updates.rh .note:before { border-left-color: #fffae9; }
.appt-notes .rh .note:before, .appt-notes .minor-updates.rh .note:before{ border-left-color: #D4D4D4; border-width: 7px; margin-top: -1px;}

.minor-updates { display: none; }
.minor-updates-line { margin: 20px 0; text-align: center; font-size: 10px; }
.minor-updates-line:before { content: ""; display: block; position: relative; top: 7px; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #eaeaea; }
.minor-updates-line span { position: relative; padding: 5px 30px; background-color: #f3f3f3; box-shadow: 0px 0px 2px 2px #b7b9ba; border-radius: 2px; }
.minor-updates-line span:after { font-family: "dashicons"; font-size: 20px; content: "\f140"; position: absolute; top: -1px; right: 5px; }

/*.appt-notes .note::before { content: ""; position: absolute; left: -6px; bottom: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #fffae9; border-right-color: #aaa; border-width: 10px; margin-top: -1px;}
.appt-notes .rh .note::before { content: ""; position: absolute; left: auto; right: -6px; bottom: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fffae9; border-right:none;}*/
.appt-notes .status { float: left; width: 45%; margin-left: 6px; position: relative; background-color: #1eae4c; color: #FFF; padding: 5px; box-shadow: 0px 0px 3px #afadad;}
.appt-notes .status.grey { background-color: #585859; }
.appt-notes .status.burntorange {background-color:#8e6809;}
.appt-notes .status.red { background-color: #b42025; }
.appt-notes .status.one-line b { line-height: 25px; }
.appt-notes .status.blue { background-color: #3a4f5d; }
.appt-notes .status span { font-size: 10px; }
.appt-notes .status::before { content: ""; position: absolute; left: -6px; bottom: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #1eae4c; }
.appt-notes .status.r-yellow::before { border-right: 6px solid #f3db84; }
.appt-notes .rh .status::before { content: ""; position: absolute; left: auto; right: -6px; bottom: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #1eae4c; border-right:none;}
.appt-notes .rh .status.r-yellow::before { border-left: 6px solid #f3db84;}
.appt-notes .rh .status { float: right; margin-right: 6px; margin-left: 0; }
.appt-notes .status.grey::before { border-right: 6px solid #585859; }
.appt-notes .status.burntorange::before { border-right: 6px solid #8e6809; }
.appt-notes .rh .status.grey::before { border-left: 6px solid #585859; border-right: none; }
.appt-notes .rh .status.burntorange::before { border-left: 6px solid #8e6809; border-right: none; }
.appt-notes .status.red::before { border-right: 6px solid #b42025; }
.appt-notes .rh .status.red::before { border-left: 6px solid #b42025; border-right: none;}
.appt-notes .status.blue::before { border-right: 6px solid #3a4f5d; }
.appt-notes .rh .status.blue::before { border-left: 6px solid #3a4f5d; border-right: none;}
.appt-notes .by { font-size: 8px; padding-bottom: 3px; margin-bottom: 5px; padding-left: 6px; }
.appt-notes .rh .by { text-align: right; padding-right: 6px; }
.appt-notes .rh span.fleft { margin-right: 15px; }
.appt-notes .by { font-size: 10px; padding: 0 0 3px 6px; }
.appt-notes .rh .by { text-align: right; padding: 0 6px 3px 0;}
.appt-photos { float: right; }
.appt-form { background-color: #e8ebec; margin-top: 5px; padding: 10px; }
.mpi-data-open { background-color: #3a4f5d; float: left; color: #FFF; margin-left: 5px; text-align: center; padding: 5px 10px; height: 39px; }
.mpi-data-open span { display: block; font-size: 22px; margin: auto; }
.mpi-data-open a { text-decoration: none; color: #FFF; }
.appt-notes .status span.mpi-icon { font-size: 25px; }
.rh .mpi-data-open { float: right; margin-right: 5px; }
.mpi-tech-notes { width: 32.5%; margin-left: 10px; }
#greeter-list .vehicle-photos { background-color: #ffffff; border-radius: 5px; padding: 10px; }
#greeter-list .vehicle-photos .fleft, #greeter-list .vehicle-photos .fright { width: 50%; }
#greeter-list .vehicle-photos .vehicle-step-title { text-transform: uppercase; color: #5b5b5b; font-size: 25px; margin-left: 15px; }
#greeter-list .step { border-radius: 5px; background-color: #5b5b5b; border: 2px solid #5b5b5b; color: #FFF; text-transform: uppercase; padding: 5px;}
#greeter-list .step.green { background-color: #89b23f; border: 2px solid #678439; }
#greeter-list .step.red { background-color: #7e1416; border: 2px solid #421112; }
#greeter-list .media-space { text-align: center; padding-top: 20px; }
#greeter-list .appt-fields { padding-top: 30px; }
#greeter-list .appt-fields .fleft { margin-right: 20px; }
#greeter-list .appt-fields .title { line-height: 35px; color: #000; }
#greeter-list .appt-fields input[type="text"]{ width: 140px; text-align: center; border-radius: 3px; }
#greeter-list .check-in-form select { padding: 10px; border: 1px solid #CCC; border-radius: 3px; width: 100%; }
#greeter-list .action { text-align: center; line-height: 80px; padding-top: 10px; }
#greeter-list .action a, #greeter-list .action input[type="submit"] { background-color: #eda520; padding: 10px 50px; color: #000; border: 2px solid #FFF; border-radius: 5px; text-decoration: none; font-size: 20px; box-shadow: 0px 0px 3px #777; }
#greeter-list .two-col { width: 50%; }
#greeter-list .job-descriptions { margin: 0 0 15px 15px; list-style: disclosure-closed; }
#greeter-list .job-descriptions li { line-height: 1.5em; padding:5px; width:calc(100% - 15px)}

#greeter-list .job-descriptions li:nth-child(even) {background: #ffffff}
#greeter-list .job-descriptions li:nth-child(odd) {background: #efefef}

.appt-form .transport-options ul { margin: 0px; }
.appt-form .lbl-radio { width: calc(100% / 9); float: left; font-size: 10px; }
.appt-form .lbl-radio label { text-align: center; }
.appt-form .lbl-radio label span { border-radius: 3px; }
.appt-form .lbl-radio input { display: none; }
.appt-form .lbl-radio input[type=radio] + span { padding: 10px; display: block; border:2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-form .lbl-radio input[type=radio]:checked + span { background: #FFF; border:2px solid #585859;}
.appt-form-close { line-height: 25px; text-align: center; }
.appt-form-close a { display: block; color: #000; text-decoration: none; font-size: 15px; }

#video-player-con, #video-recorder-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 999999999; }
.new-images { position : relative; max-width : 100%;}
.player { width: 100%; margin: auto; }
.canvas { display: none; }
.video-btns { padding-top: 10px; }
.capture-btn, .stop-btn, .switch { background-color: #FFF; border-radius: 3px; padding: 20px; }
.capture-btn { margin: auto; width: 25px; height: 25px; display: block; color: #9d9d9e; text-align: center; border-radius: 50px; position: absolute; z-index: 9; left: 50%; bottom: 50px; margin-left: -32px; }
.capture-btn i { display: inline; vertical-align: middle; }
.stop-btn { position: absolute; top: 10px; left: 10px; z-index: 9; }
.switch { position: absolute; top: 10px; left: 100px; z-index: 9; }
.pick-image { display : none; }
#capture-set { margin-bottom: 10px; }
#capture-set img { max-width: 50px; margin: 1px; }
#capture-flash { display: none; position: absolute; width: 100%; height: 100%; background: #FFF; }

.schedule-table-mobile table { width: 100%; }
.time-picker-col { float: left; width: 50%; margin-bottom: 20px; }
.schedule-service .schedule-table-mobile .apt-table, .greeter .schedule-table-mobile .apt-table { border-spacing: 10px; }
.schedule-service .lbl-radio-apt-time-mx div { margin-left: 3px; margin-bottom: -5px; border-left: 1px solid #bbbabb; }
.schedule-service .lbl-radio-apt-time-mx div.half { border-color: #cecdcf; }
.schedule-service .lbl-radio-apt-time-m label, .greeter .lbl-radio-apt-time-m label { display: block; height: 35px; line-height: 35px; }
.schedule-service .lbl-radio-apt-time-m input, .greeter .lbl-radio-apt-time-m input { display: none; }
.schedule-service .lbl-radio-apt-time-m input[type=radio] + span, .greeter .lbl-radio-apt-time-m input[type=radio] + span { height: 35px; background: #8dc63f; border: 1px solid #25ae4d; color: #000000; display: block; }
.schedule-service .lbl-radio-apt-time-m .wait-list-slot input[type=radio] + span { background: #862a25; border-color: #620601;}
.schedule-service .lbl-radio-apt-time-m .selected-slots input[type=radio] + span, .greeter .lbl-radio-apt-time-m .selected-slots input[type=radio] + span { background: #f8f1b7; }
.schedule-service .lbl-radio-apt-time-m input[type=radio]:checked + span, .greeter .lbl-radio-apt-time-m input[type=radio]:checked + span, .schedule-service .lbl-radio-apt-time-m .wait-list-slot input[type=radio]:checked + span{ background: #52a8dd; }
.schedule-service .schedule-table-mobile .lbl-radio-apt-time-m, .greeter .schedule-table-mobile .lbl-radio-apt-time-m { background: #aaabab; }
.schedule-service .schedule-table-mobile .d-time, .greeter .schedule-table-mobile .d-time { font-size: 17px; }

.wolfe-garage-logo { margin: auto; width: 225px; min-height: 80px; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.customer-info, .wolfe-garage { width: 48%; }
.customer-info input[type="text"] { max-width: 90%; }
.wolfe-garage input { width: 400px; box-sizing: border-box; }
.wolfe-garage .field_label { font-weight: bold; }
.wolfe-garage .field_required { color: #bf0421; }
.wolfe-garage .wolfe-garage-field { padding-bottom: 10px; }
.wolfe-garage-field label {clear:both; display:block;}
.wolfe-garage .wolfe-garage-field .button { margin-top: 20px; }
.vehicle-name { font-style: italic; color: #808285; height: 22px; overflow: hidden; }
.schedule-area-trans { max-width: 65%; }
input.vehicle-search { width: 100%; box-sizing: border-box; padding:15px 10px; font-size:20px; }
span.required { color: #F00; }
.available a.ui-state-default { background-color: #8dc63f; border: 1px solid #25ae4d; }
.ui-datepicker { z-index: 99 !important; }
.confirm-msg, .trade-system { width: 50%; }
.trade-form { padding:20px;background: linear-gradient(to bottom,#05224c 0,#13457a 36%,#1f2c3a 100%);webkit-box-shadow: inset 4px 4px 19px -4px rgba(50,50,50,.4);-moz-box-shadow: inset 4px 4px 19px -4px rgba(50,50,50,.4);box-shadow: inset 4px 4px 19px -4px rgba(50,50,50,.4); }
.trade-form .button { width: 100%; }
.nada-logo { width: 100%; max-width: 425px; height: 10vw; margin: auto; background: url('images/nada-v3-header-graphic-v1c.png') no-repeat; background-size: contain; }
.nada-second-logo { max-width: 95px; margin-left: 125px;margin-top: 20px; }
.form-top-text {font-size:21px; color:#5c85ad;}
.form-description {font-size: 12px; color: #888; display: block; line-height: 22px; }
.nada-fields { color: #FFF; margin-top: 20px; }
.nada-fields select, .nada-fields input { width: 100%; box-sizing: border-box; }
.nada-button { margin-top: 30px; }
#trade-result { color: #FFF; width: 100%;}
.trade-value {font-size:22px; color:#24e624; font-weight:900;}
#TB_title { border: 0 !important; max-height: 15px; }

.photo-view { position: absolute; box-shadow: 0px 0px 10px #000; border: 5px solid #FFF; display: none; max-width: 95%; }
.photo-view img { max-width: 100%; }
.close-photo-view { position: absolute; top: -15px; right: -15px; border: 1px solid #000; background: #FFF; border-radius: 15px; }

.board-overlay .loader { margin: 200px auto; }
.loader { width: 25px; height: 26px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.appt-data { font-size: 11px; background-color: #f1f2f2; border-right: 1px solid #8b8d90; line-height: normal; }
.appt-data .appt-overview .customer { padding-top: 2px; }
.appt-data .appt-form { margin-top: 0; box-shadow: 0px 15px 20px -15px #000; }
.appt-data .appt-form .transport-options, .appt-data .appt-form ul { margin: 0; }
.appt-data .appt-form .lbl-radio { width: 60px; }
.appt-data .appt-form .lbl-radio input[type="radio"] + span { padding: 5px; }
.appt-data .appt-notes { background: none; }
.mpi-data { position: relative; min-height: 100%; }
.mpi-table-con { padding-left: 10px; }
.mpi-header { box-shadow: 0px 15px 20px -15px #000; line-height: normal; font-size: 12px; }
.mpi-header .title { font-size: 40px; line-height: 35px; font-weight: bold; }
.mpi-header .numbers { font-size: 13px; padding-top: 3px; margin-left: 5px; margin-right: 10px; }
.mpi-header .btn { font-size: 11px; padding: 6px 4px 6px; min-width: 50px; text-align: center; position:relative; }
.mpi-header .btn > .chat-share-popup{display:none;}
.mpi-header .btn > .chat-share-popup.show{ display: block; width: 196px; text-align: left; position: absolute; z-index: 9999999999; background-color: #344d5d; padding: 10px; margin-top: 8px; padding-top: 0;}
.mpi-header .btn > .chat-share-popup.show select{width:100%;}
.mpi-header .btn > .chat-share-popup.show .button.button-primary{width: 176px; display: block; color: #000; padding: 8px 10px; border-radius: 0; border-bottom: 0; margin: 3px 0;}
.mpi-header .icn { font-size: 11px; padding: 3px 5px 1px 0; text-align: center; }
.mpi-header .icn.full span { font-size: 26px; }
.mpi-header .tags { margin-top: 6px; }
.mpi-header-block { background-color: #334e5e; color: #FFF; margin-right: 5px; padding: 3px; }
.mpi-header-block span { display: block; text-align: center; font-size: 14px; }
.mpi-header-block a { color: #ffffff; text-decoration: none; }
.mpi-table { display: table; border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 13px; }
.mpi-table ul { display: table-row; margin: 0; }
.mpi-table.gray { background-color: #d6d5d5; margin-top: 10px; }
.mpi-table.gray .chk { padding: 5px 0 0 2px; }
.mpi-table.gray .chk i { font-size: 25px; }
.mpi-table li { display: table-cell; padding: 5px; }
.mpi-table ul.thead li { font-weight: bold; vertical-align: middle; }
.mpi-table ul.tbody li { border: 1px solid #c3c4c7; box-shadow: 0px 0px 3px 0px #c3c4c7; border-radius: 2px; }
.mpi-table ul.tbody li.item { position: relative; }
.mpi-table ul.tbody li.item, .mpi-table ul.tbody li.depth {border-width: 1px 1px 1px 8px; border-style: solid; border-color: #c3c4c7;}
.mpi-table ul.tbody li.item.green, .mpi-table ul.tbody li.depth.green { border-left-color: #75bb5d; }
.mpi-table ul.tbody li.item.red, .mpi-table ul.tbody li.depth.red { border-left-color: #d72129; }
.mpi-table ul.tbody li.item.yellow, .mpi-table ul.tbody li.depth.yellow { border-left-color: #fdd23d; }
.mpi-table li input[type="text"] { border: none; box-shadow: none; padding: 0 5px; width: 48px; height: 32px; }
.mpi-table li.item { width: 15%; font-weight: bold; }
.mpi-table li.item span { font-weight: normal; }
.mpi-table li.qty { width: 4%; }
.mpi-table-v2 li.qty{ width: 3%; }
.mpi-table li.part_number { width: 11%; }
.mpi-table li.dot, .mpi-table li.set_to { width: 100px; }
.mpi-table li.parts { width: 7%; }
.mpi-table li.hours { width: 8%; }
.mpi-table li.total { width: 100px; }
.mpi-table li.timing { width: 15%; padding: 0 5px 0 0; }
.mpi-table li.action { width: 55px; }
.mpi-table li.chk { width: 10px; }
.mpi-table li.note, .mpi-table li.depth, .mpi-table li.part_number, .mpi-table li.qty { padding: 0; }
.mpi-table li.parts, .mpi-table li.hours, .mpi-table li.total { padding: 0 0 0 5px; }
.mpi-table ul.tbody li.no-border { border: none; box-shadow: none; text-align: center; }
.mpi-table li.qty input, .mpi-table li.depth input, .mpi-table li.part_number input, .mpi-table li.note input { width: 100%; }
.mpi-table li.parts input { width: calc(100% - 12px); }
.mpi-table li.hours input { width: calc(100% - 20px); }
.mpi-table li.total input { width: calc(100% - 35px); }
.mpi-table li.timing input { width: calc(100% - 25px); }
.mpi-table li.highlight { background-color: #FDDEDE; }
.mpi-table li.highlight input { background: transparent; }
.mpi-table .number { text-align: right; }
.mpi-table .dashicons-warning { font-size: 12px; line-height: 32px; }
.mpi-table .total .dashicons, .mpi-table li.timing .dashicons { line-height: 28px; }
.mpi-table .s-total { cursor: default; }
.mpi-table .camera, .mpi-table .file-3 { color: #cccece; }
.mpi-table .mpi-item-photos { color: #d22026; }
.mpi-table .file-3.highlight { color: #ffbc00; }

.mpi-table.mpi-table-v2 li.part_number{ width: 5%; }
.mpi-table.mpi-table-v2 li.cause,
.mpi-table.mpi-table-v2 li.correction{width: 6%;}
.mpi-table.mpi-table-v2 li.total input{width:100%;}
.mpi-table.mpi-table-v2 li.price_matrix{width: 8%;}

.mpi-log-table { display: table; width: 100%; font-size: 13px; }
.mpi-log-table ul { display: table-row; margin: 0; }
.mpi-log-table li { display: table-cell; padding: 5px; }
.mpi-log-table ul.thead li { font-weight: bold; border-bottom: 1px solid #c3c4c7; }
.mpi-table .depth-li span { margin-left: 5px; }
.mpi-table .depth-li input { display: none; text-align: right; width: auto; }
.mpi-table .all-green { color: #75bb5d; font-size: 25px; margin-left: -8px;}
.mpi-table .all-red { color: #d72129; font-size: 25px; }
.hidden-row { opacity: 0.4; }
.show-hide input, .print-price input, .sched-next input { display: none; }
.show-hide input + span::before, .print-price input + span::before { content: "\f177"; }
.show-hide input:checked + span::before, .print-price input:checked + span::before {content: "\f530"; }
.print-price input + span::before { font-size: 17px; }
.sched-next input + span { color: #cccccc; }
.sched-next input + span::before { content: "\f508"; }
.sched-next input:checked + span { color: #02bb02 }

.change-logs { position: absolute; bottom: 0; width: 100%; text-align: center; }
.change-logs-content { text-align: left; padding-left: 15px; }
.cred { color: #d91f27; }
.cgreen { color: #28b34b; }
.bgwhite { background-color: #FFF; }
.approved-total-con { padding: 5px 15px; text-align: right; color: #28b34b; font-size: 17px; }
.approved-total-con span { font-weight: bold; margin-right: 10px; }
.approved-total-con button { padding: 10px 25px; }
.locked-overlay { display: none; position: fixed; top: 62px; text-align: center; background-color: rgba(0,0,0,.7); padding-top: 100px; }
.locked-overlay div { padding: 20px; color: #bababa; }
.locked-overlay button { padding: 10px 50px; }
.locked-overlay .auto-release div { font-size: 11px; }
.locked-overlay .auto-release span { font-size: 20px; } 
.locked-overlay .locked-by { font-size: 35px; }
.appt-history { padding: 10px; }
.note-table-header { padding: 5px 0; background-color: #585859; color: #FFF; position: relative; line-height: normal; }
.note-table-header::before { content: ""; position: absolute; left: -6px; bottom: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #585859; }
.rh .note-table-header::before { left: auto; right: -6px; border-left: 6px solid #585859; border-right:none; }
.note-table-header .time-icon { padding: 2px 15px 0; }
.note-table-header .time-icon i { font-size: 30px; }
.note-table-header .approved-time { font-weight: bold; font-size: 14px; }
.note-table-header a { color: #FFF; text-decoration: none; font-size: 14px; margin-right: 15px; }
.note-table { background-color: #FFF; padding: 0 7px 10px; border: 1px solid #c3c4c7; box-shadow: 0px 0px 3px 0px #c3c4c7; border-radius: 2px; }
#item-options-select { font-size: 12px; padding: 10px; position: absolute; z-index: 1; background-color: #FFF; border: 1px solid #aaa; border-radius: 3px; }
#item-options-select:after, #item-options-select:before { border: 9px solid transparent; border-right-color: #FFF; position: absolute; content: ''; right: 100%; top: 45%;}
#item-options-select:before { border-right-color: #aaa; border-width: 10px; margin-top: -1px;}
#item-options-select ul { margin: 0; }
#item-options-select ul li { color: #5a6390; cursor: pointer; text-decoration: underline; }
.tb-content-no-padding { margin: -2px -15px -15px; }
.item-photos-popup { max-width: 640px; min-height: 547px; display: none; position: absolute; z-index: 999999; top: 20px; padding: 10px; background-color: #fff6d6; border: 1px solid #aaa; box-shadow: 0px 0px 3px 0px #aaa;}
.item-photos-popup:after, .item-photos-popup:before { border: 9px solid transparent; border-right-color: #fff6d6; position: absolute; content: ''; right: 100%; top: 45%;}
.item-photos-popup:before { border-right-color: #aaa; border-width: 10px; margin-top: -1px;}
.item-photos-popup.top-arrow:after, .item-photos-popup.top-arrow:before { top: 98px; }

.item-photos-popup div img { border-radius: 2px; }
.item-photos-popup ul { margin: 0; }
.item-photos-popup ul li { display: inline; padding: 0 2px; position: relative; }
.item-photos-popup ul li span.dashicons { position: absolute; top: -35px; left: 2px; background-color: rgba(255, 255, 255, 0.5); padding: 0 3px; border-radius: 2px; color: #000; }
.item-photos-popup ul li span.dashicons.dashicons-remove { color: #f00; }
.item-photos-popup .appt-photo-thumb { max-width: 67px; border-radius: 2px; }
.timing-date .ui-datepicker { position: absolute; right: 0; }

.cancelled { background-color: #a6302d; color: #FFF; font-size: 11px; border-radius: 2px; padding: 3px 5px; }
.pending { background-color: #afadad; color: #FFF; font-size: 11px; border-radius: 2px; padding: 3px 5px; }

#header-notifications { position: fixed; top: 5px; right: 20px; cursor: pointer; z-index: 100049; }
#header-notifications .ntf-bell { background-color: #1f416b; border-radius: 20px; position: relative; width: 30px; height: 30px; padding: 5px; }
#header-notifications .dashicons-bell { font-size: 30px; color: #fff; }
#header-notifications .ntf-cnt { background-color: #d42027; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 50%; position: absolute; top: -4px; left: 24px; }
#header-notifications .ntf-close { display: none; color: #fff; position: absolute; top: -4px; left: 24px; }
#header-notifications.show-all .ntf-close { display: block; }
#header-notifications.show-all .ntf-cnt { display: none; }
#notifications { min-width: 325px; max-height: 500px; overflow-y: auto; position: fixed; right: 0; top: 42px; font-size: 12px; z-index: 100049; }
#notifications .notifications { display: none; }
#notifications.show-all .notifications { display: block; }
#notifications-popups { min-width: 325px; max-height: 500px; overflow-y: auto; position: fixed; right: 0; bottom: 5px; font-size: 12px; z-index: 100049; }
.notifications ul { margin: 0; }
.notifications ul li { background-color: #0f8790; color: #FFF; padding: 5px 15px 10px 5px; margin: 5px 0; font-weight:bolder;}
.notifications .close-ntf { float: right; cursor: pointer; }
.notifications .msg { padding-bottom: 5px; }
.notifications .btn { color: #fff; padding: 5px 20px; text-decoration: none; border: 1px solid #e0ebeb; background-color: #2c2d2c; }

#sidebar { display: none; }
.with-sidebar #page, .with-library #page { width: calc(100% - 420px);}
.with-sidebar #sidebar, .with-library #tour-library { display: block; width:420px; position: fixed; top: 0px; right: 0; }
#st-chat-icon2 { position: fixed; top: 5px; right: 70px; cursor: pointer; z-index: 100049; background-color: #1f416b; color: #FFF; border-radius: 20px; padding: 10px; cursor: pointer;}
.st-message-box { background-color: #FFF; }

#tour-library { display: none; }
#tour-library-icon { position: fixed; top: 5px; right: 120px; cursor: pointer; z-index: 100049; background-color: #1f416b; color: #FFF; border-radius: 20px; padding: 10px; }

.with-sidebar #st-chat-icon2, .with-library #tour-library-icon { z-index: 9999999999999999; }

input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }

.ui-widget-shadow {opacity:1.0 !important;}

.garage-menu ul li:hover,
.garage-menu ul li.active{background-color:#ddd;}
.gm-content input.full {
    width: 100%;
}

span.action-button-secondary a, a span.action-button-secondary, a.action-button-tertiary, a.action-button-secondary{color: #464646;}

a.action-button-secondary, span.action-button-secondary, a.action-button-tertiary{
	background: #f5f5f5;
    border: 1px solid #c7c5c5;
    display: block;
    text-align: center;
    border-radius: 3px;
    line-height: 38px;
    padding: 5px;
    text-decoration: none;
}

.customer-appointments-v2{
	padding-top:0;
}

.customer-appointments-v2.tech-screen .tranport {
    font-size: 10px;
    padding: 3px 5px;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-appointments-v2.tech-screen .tranport span {
    vertical-align: 3px;
}

.customer-appointments-v2.tech-screen .cust-info{
	border:none;
	position:relative;
	min-height:100px;
}

.customer-appointments-v2.tech-screen .cust-info .clickable-div{
	position:absolute;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	cursor: pointer;
	z-index:10;
}

.customer-appointments-v2.tech-screen .cust-info .action-area{
	position:relative;
	z-index:11;
	line-height: 18px;
}

.app-log-status-wrapper{
	position: absolute;background-color: #686768;height: 100%;color: #FFF;width: 28px;
}

.app-log-status{
	transform: rotate(-90deg); -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); 
	line-height: 1;
	margin-top: 50px;
	position: absolute;
	width: 100px;
	left: -38px;
	text-align: right;
}


.customer-appointments-v2.tech-screen .appt-info.selected{
	border-right: 4px solid green;
}

.customer-appointments-v2 .list-item{
	border-bottom:1px solid #FFF;
}

.customer-appointments-v2 .list-item:last-of-type > .appt-info{
	border-bottom:0;
	margin-bottom:0;
}

#appointment-log-detail .appt-customer-name,
#appointment-log-detail .create-ro-btn{
	display:none;
}

#appointment-log-detail .appt-overview .customer{
	padding-top:0;
}

#appoointment-log-detail .appt-popup-cols{
	min-height: calc(100% - 155px);
}

#appointment-log-detail{
	height: calc(100vh - 175px);
}

.sales-person-wrapper{
	background-color: #add2ff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px;
    letter-spacing: 1px;
    margin-bottom: 2px;
    text-align: center;
}


.customer-appointments-v2 .transport-time{
    width: 100px;
}

.appt-store-name {
	text-align: right;
    /* background: #c5bfc5; */
    color: #000;
    padding: 5px 0;
    padding-right: 5px;
    font-size: 10px;
    /* float: right; */
    position: absolute;
    bottom: 5px;
    right: 0px;
}

.customer-appointments-v2 .apt-tags{
	border-top: 1px solid #ccc;
    margin-top: 8px;
    padding-top: 10px;
}

.group-name-names{
    border-top: 1px solid #e1e1e1;
    margin-top: 5px;
    padding-top: 5px;
    font-style: italic;
    display:none;
}

.group-name-names.active{
    display:block;
}

.share-chat-log{cursor:pointer}


/** GLOBAL STYLES **/
.flex{display:flex;}
.flex.flex-wrap{ flex-wrap: wrap; }
.flex.justify-center{justify-content: center;;}
.border-1{border:1px solid #eee;}
.pointer{cursor:pointer;}
.p-10{padding:10px;}
.pt-10{padding-top:10px;}
.pb-0{padding-bottom: 0;}
.pt-0{padding-top:0;}
.pl-28{padding-left:28px;}
.box{ border-bottom: 1px solid #eaeaea; background-color: #FFF; box-shadow: 0px 0px 3px #afadad; }
.link-option-menu, .sidebar-option-wrap{ background-color:#515152; }
.button-text{text-align:center; padding: 15px 0;}
.button-text:hover,
.button-text.active,
.button-text.selected{
    background-color: #6da0d9;
	color:#FFF;
}
.no-padding{padding:0;}
.mr-0{margin-right:0;}
.ml-0{margin-left:0;}
.pop-wrap, h3.pop-wrap{background-color:#97cef2; font-weight:700;padding:10px; padding-bottom:8px; margin:0; font-size:16px; line-height: 1.3em;}
.bb-0{border-bottom:0;}
.delete-button {
    color: #bf1e2d;
    font-size: 13px;
}
.topSearchBox{ width: 480px; float: left; padding: 10px !important; border-right: 0 !important;}
.topSearchButton{ width: 100px; border-radius: 0px 3px 3px 0px; }
.overflow{overflow:auto;}
.error-text{color:#bf1e2d;}
.hunter-image img { transform: rotate(-90deg);margin-top: -40px;max-height: 200px;}
.hunter-image { text-align: center; }

ul.job-list{
	display:flex;
	justify-content: space-evenly;
}

@media screen and (max-width: 1600px) {
   .mpi .two-col { width: 100%; }
   .with-sidebar #page, .with-library #tour-library { width: 100%; }
}

@media only screen 
  and (max-device-width: 1024px) {
  	body { background-color: #fff !important; }
    .schedule-service .rs-container-slider { overflow-x: hidden; }
  	.schedule-service .rs-container-slides { padding: 0; }
  	.schedule-service .rs-container-slide { width: 100%; float: none; }
  	.rs-container { margin: 0; border: none; box-sizing:border-box; box-shadow: 0px 0px 0px transparent !important;}
  	.schedule-service .store-opcodes { min-width: 100%; }
  	#datepicker, #datepicker .ui-datepicker { width: 100%; box-sizing: border-box; }
  	.ui-datepicker td span, .ui-datepicker td a { line-height: 35px; }
  	.schedule-area-trans { display: none; }
  	.mobile-cal-heading { font-weight: bold; }

	input[type="text"] { max-width: 90%; }
	input.vehicle-search { max-width: 100%; }
	.input-style { overflow: hidden; }
	.lbl-checkbox { max-width: 48%; }
	.ui-menu .ui-menu-item { padding: 10px; font-size: 18px; }
  	input.customer-states { max-width: 75%; }
  	/*.page-template-mobile .ajax-form-search input[type="text"] { max-width: 65%; }*/
  	#greeter-list .customer { width: 50%; }
  	.time-picker-col { width: 100%; }
  	.wolfe-garage input { max-width: 100%; }
  	.nada-fields select, .nada-fields input { max-width: 100%; }
  	.nada-logo { width: 100%; }
  	.mpi-section .other-items input { width: 46%; }
  	.mpi-section .note-text { max-width: 200px; }
  	.button.button-primary { width: 90%; }
  	.ajax-form-search-appt .button.button-primary, .ajax-form-search .button.button-primary{ width: auto; }
  	.button.button-primary.topSearchButton{ width: 100px; }
}
@media only screen 
  and (max-device-width: 768px) {
  	.mpi .two-col { width: 100%; }
  	.mpi-section .field-psi, .mpi-section .field-depth { max-width: 170px; }
  	.mpi-section .note-text { max-width: 170px; }
  	.mpi-section .field-psi input { width: 48%; max-width: 48%; }
	.acd-open .mpi-action-btns { position: fixed; bottom: 0; width: 100%; z-index: 1; }
  	.with-sidebar #page, .with-library #tour-library { width: 0px; }
  	.with-sidebar #sidebar, .with-library #tour-library { width: 100%; }
   .mpi-section .other-items input { width: 64%; }
}
@media only screen and (max-device-width: 428px) {
	.or-graphic { display: none; }
  	.customer-info, .wolfe-garage { width: 100%; }
  	.customer-info input[type="text"] { max-width: 100%; }
  	.wolfe-garage { margin: 20px 0 0 0; }
  	.wolfe-garage::before { content: "------ OR ------"; color: #999; display: block; text-align: center; }
  	.wolfe-garage input { max-width: 100%; }
  	.confirm-msg, .trade-system { width: 100%; margin-bottom: 20px; }
  	.nada-fields select, .nada-fields input { width: 100%; }
  	.drop_off_time_lbl { display: block; margin-bottom: 10px; }
  	.button.button-primary { width: 100%; }
  
    /*input[type="text"] { max-width: 100% !important; width:100% !important; margin-bottom:10px;} Need to declare this on specific field, generalize breaks other*/ 
    .greeter .ajax-form-search-appt {width:100% !important;}
    .status-nav {zoom:0.6;}
  
  	#greeter-list .two-col {width: 100% !important;}
  	.wide-buttons.acd-open { padding-bottom: 150px; }
  	.wide-buttons .mpi-action-btns .show-advanced, .wide-buttons .mpi-action-btns .cancel, .wide-buttons .mpi-action-btns .btn-con { width: 95%; float: none; margin: 3px; text-align: left; }
  	.wide-buttons .mpi-action-btns .btn-con { width: 89%; }
  	.item-photos-popup { max-width: 80%; min-height: 305px; }
  	.item-photos-popup div img { max-width: 100%; }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .appt-notes {background-color: #fff; padding: 10px;}
  .appt-form {background-color: #e8ebec; margin-top: 10px; padding: 10px; float: right; width: 50%;}
  
}