*[data-color-update="1"]
{
    color:red;
}

body.setup-page *[data-content-tag]
{
    color: #0088cc;
    border-bottom: dashed 1px #0088cc;
    font-size: 13pt;
    cursor: pointer;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    position:relative;
}

#sidebar.inactive {
    margin-left: -250px;
}

.header
{
    position:relative;
    top:7px;
}

.header.no-logo
{
    top:0px;
}

.header .shop_logo
{
    width:50px;
    position:relative;
    top:-12px;
    display: inline-block;
}

.header .shop_name
{
    display: inline-block;
    line-height:20px;
    color:#006699;
    padding-left:3px;
}

.setup-shop-phno
{
    margin-right:10px;
}

.shop_name .address
{
    display:block;
    font-size:10pt;
    color:#999;
}

.inspection_header
{
    background:#efefef;
    padding:20px;
}

.fa
{
    font-weight:300;
}

ul.report_details
{
    margin-top:20px;
    padding:0px;
}

ul.report_details li.sub-group
{
    padding-left:25px;
    padding-bottom:20px;
}

ul.report_details li.sub-group
{
    list-style:none;
    position:relative;
}

ul.report_details li.sub-group:not(#signoff):before {
    background-color: #ddd;
    width: 1px;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -1px;
    z-index:-1;
}

ul.report_details li.sub-group#signoff
{
    border-left:0px;
}

ul.report_details .title
{
    font-weight:bold;
    font-size:12pt;
}

ul.health-report, ul.wo-list, ul.qc-list
{
    list-style:none;
    padding:0px;
}

ul.health-report li, ul.wo-list li, ul.qc-list li
{
    padding:5px;
    margin:3px;
}

ul.rvh-list, ul.tire-inspection-list, ul.video-play-list
{
    padding-left:0px;
}

ul.rvh-list li:not(.rvh-item), ul.tire-inspection-list li, ul.video-play-list li
{
    list-style:none;
    padding:5px;
    margin:5px;
}

.rvh .rvh-header-details
{
    font-weight:bold;
    padding-left:12px;
}

.rvh ol
{
    padding-left:5px;
}

.rvh ol li.collapse, .rvh ol li.collapsing
{
    padding:20px;
}

.rvh ol li.rvh-item
{
    list-style:none;
    padding:10px 0;
    cursor:pointer;
}

.report-title
{
    display:inline-block;
    width:79%;
}
.report_vehicle_picture
{
    max-width:400px;
    padding: 30px 0 10px 0;
}

.report-nav
{
    width:20%;
    display:inline-block;
    text-align:right;
}

.report-title .title
{
    font-weight:normal !important;
}

.default-section
{
    display:inline-block;
    margin-right:20px;
}

.color-picker:not(.center, .top)
{
    position:absolute;
    bottom:10px;
    right:-10px;
    cursor:pointer;
}

.color-picker:before:hover
{
    color:#006699;
}

.color-picker[data-position="center"]
{
    position:absolute;
    left:40%;
    width:300px;
    display:inline-block;
}

.color-picker[data-position="top"]
{
    position:absolute;
    left:10%;
    top:0%;
    width:300px;
    display:inline-block;
    height:20px;
}

.color-picker:before
{
    content: "\f5a9";
    font-family: "Font Awesome 6 Pro";
    color:#555;
    z-index:100;
    font-size: 12pt;
    font-weight: normal;
}

.color-picker#bullet-setup
{
    right:0px;
}

.popover i.fa-close
{
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 100;
    border-radius: 100%;
    background: #aaa;
    color: #fff;
    font-size: 17pt;
    box-shadow: 0 0 15px 1px rgb(0 0 0 / 20%) !important;
    cursor:pointer;
}

.fa-close:before {
    content: "\f057";
}

.cpicker .popover-body
{
    width:275px;
}

.cpicker button.text-color, .cpicker button.bg-color
{
    border:1px solid #ddd !important;
}

.colorpicker-element .add-on i, .colorpicker-element .input-group-addon i {
    display: inline-block;
    cursor: pointer;
    height: 16px;
    vertical-align: text-top;
    width: 10px;
    position: relative;
    left: -8px;
    top: 2px;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child>.btn-group:not(:first-child)>.btn, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}

#rvh-details, #tire-inspection-details
{
    background:#efefef;
    padding-top:0px;
    margin-top:0px;
}

.rvh ol li.rvh-item:not(:first-child)
{
    border-top:1px solid #ddd;
}

span.findings-count
{
    color: red;
    display: inline-block;
    color: #fff;
    background: red;
    border-radius: 50%;
    font-family: monospace;
    font-weight: bold;
    font-size: 11pt;
    line-height: 21px;
    width: 20px;
    text-align: center;
    margin-right:10px;
}

.rvh i.fa-clipboard-list
{
    padding-right:3px;
}

ul.rvh-attachments, ul.attachments
{
    padding-left:0px;
}

ul.attachments li, ul.rvh-attachments li
{
    list-style:none;
    position:relative;
    display:inline-block;
    margin:3px;
    padding:3px;
}

.attachments li img.thumbnail, .attachments li div.pdf {
    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;
}

button.orange, button.red, button.green {
    border-radius: 3px;
    font-size: 15pt;
}

button.red, button.orange, button.green {
    box-shadow: rgba(0, 0, 0, .25) 2px 0px 3px !important;
}

.panel .count.red, button.red, .icon.red
{
	background: linear-gradient(60deg, #ef5350, #e53935);
	color:#fff !important;
	border:1px solid red;
}

.panel .count.orange, button.orange, .icon.orange
{
	background: linear-gradient(60deg, #ffa726, #fb8c00);
	color:#fff !important;
	border:1px solid orange;
}

.panel .count.green, button.green, .icon.green
{
	background: linear-gradient(60deg, #66bb6a, #43a047);
	color:#fff !important;
	border:1px solid #66bb6a;
}

.panel .count.tire, .icon.tire
{
	background-color: rgba(0,0,0,0.4);
	color:#fff !important;
}

span.count.stats
{
    display:inline-block;
    width:30px;
    padding-left:5px;
}

li.health-report-item, li#wo-details, li#qc-details
{
    background:#f5f5f5;
}

ul.health-report li.category, ul.wo-list li.wo-group
{
    list-style:none;
}

.health-report-item li.inspec-item button
{
    margin-right:5px;
    width:30px;
    position: relative;
    top: -8px;
}

.vv_tag span {
    font-size: 9.5pt;
    padding: 0 2px !important;
    text-align: center;
    max-width: 8rem;
    z-index: 5;
}

.attachments li.video div.tag span, .attachments .vv_tag span {
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 0 10px;
    border: 1px solid #000;
    border-radius: 3px;
    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;
    display: block;
    text-align: center;
    margin: 0 20px;
}

.attachments .vv_tag.moto_vis span
{
    margin:0 10px;
}

.attachments li.video div.tag, .attachments .vv_tag {
    /* width: auto; */
    width:100%;
    top: 40px;
    position: absolute;
    left: 0 !important;
    text-align: center;
    z-index: 5;
}

.moto_vis {
    left: 12px !important;
    text-align: inherit !important;
}
.vv_tag {
    left: -2px;
}

.an-video {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 401px) {
    .an-video {
        height: 300px;
        width: 80%;
    }
}
@media (max-width: 400px) {
    .an-video {
        height: 200px;
        width: 100%;
    }
}

ul.health-report li.inspec-item
{
    /*border-bottom:1px solid #ddd;*/
    list-style:none;
}

ul.health-report li.inspec-item .card-body, ul.rvh-list .card-body, .tire-inspection textarea[disabled]
{
    background:#f4f4dd !important;
}

ul.health-report li.inspec-item .item-name
{
    font-weight:bold;
}

/*
ul.health-report li.inspec-item .inspec-item-notes span, ul.health-report li.inspec-item .recommendation span
{
    font-family:Handlee;
    font-size:1.2em;
    font-weight:bold;
}*/

ul.health-report ol
{
    padding-left:0px;
    margin-left:0px;
}

span.approval
{
    /*float:right;*/
    font-size: 11pt;
    /*border: 1px solid #ddd;*/
    padding: 0 5px;
    min-width: 110px;
    display: inline-block;
    text-transform: capitalize;
    border-radius:3px;
    border:0px;
}

span.approval[data-id=addressed] {
    /*border: 1px solid green;*/
    color: green;
    /*background-color: rgba(102,187,106, .2) !important;*/
}

span.approval[data-id=unaddressed] {
    /*border: 1px solid red;*/
    /*background-color: rgba(229,57,53, .1) !important;*/
    color:red;
}

#signoff span.timestamp
{
    display:block;
}

#vehpics, #vehpics_mobile {
    width: 250px;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px 1px !important;
    text-align:center;
}

#vehpics img, #vehpics_mobile img {
    max-height: 150px;
    margin: 0 auto;
    max-width: 100%;
}

.carousel-indicators {
    bottom: 10px !important;
}

.carousel-control .fa-chevron-left {
    left: 50%;
    margin-left: -10px;
    top: 45%;
    position: absolute;
}

.carousel-control .fa-chevron-right {
    right: 50%;
    margin-right: -10px;
    top: 45%;
    position: absolute;
}

table.multiaxle td
{
	font-size:10pt !important;
	padding-left:0px;
	padding-right:0px;
	border:0px;
	position:relative;
}

.multiaxle .tire-info-value, #tab_tire .tire-info-value
{
	font-size:15pt !important;
	color:#006699;
	font-weight:bold;
}

.multiaxle img
{
	box-shadow: 0 8px 6px -6px #999 !important;
}

.multiaxle .tag
{
	position:absolute;
	width:100%;
	top:35px;
	z-index:10;
}

.multiaxle .tag.rear
{
        position:absolute;
        width:100%;
        top:15px;
        z-index:10;
}

.multiaxle .tag span
{
	background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 2px 10px;
    display: inline-block;
    border-radius: 4px;
    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;
	font-weight:bold;
}

.multiaxle .tag span
{
	background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 2px 10px;
    display: inline-block;
    border-radius: 4px;
    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;
        font-weight:bold;
}

.multiaxle .tag span
{
        position:relative;
        top:100px;
        z-index:10;
}

.multiaxle .tag.rear span
{
        position:relative;
        top:40px;
        z-index:10;
}

.multiaxle img.tire
{
	margin-bottom:0px;
	box-shadow: 0 8px 6px -6px #999 !important;
}

ul.report_details li.sub-group:first-child:before
{
    top:15px !important;
}

ul.report_details li.sub-group:nth-last-child(2):before
{
    height:6px !important;
}

ul.report_details li.sub-group .bullet
{
    margin-left: -37px;
    width: 25pt;
    fill: orange;
    float: left;
    padding-right: 10px;
    z-index:1;
}

.videotitle {
    position: absolute;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 5;
    padding: 3px 10px;
    left: 10px;
    top: 5px;
    font-weight: bold;
}

.videoclose {
    position: absolute;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 5;
    padding: 3px 10px;
    right: 10px;
    top: 5px;
    font-size: 17pt;
    cursor: pointer;
    border-radius: 3px;
}

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

.imgcontainer {
    position: relative;
    margin: 0px;
    display: inline-block;
    cursor: pointer;
}

.imgcontainer .canvas-container, .imgcontainer canvas {
    position: absolute !important;
    top: 0px !important;
    left: 0px !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;
}

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

#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;
}

.report-title
{
    padding-left:0px;
}

.report-nav
{
    padding-right:0px;
}

.report-nav i
{
    display:inline-block;
    margin-right:10px;
}

ul.menu-list
{
    padding-left:0px;
    margin-left:0px;
    padding-top:40px;
}

ul.menu-list li
{
    padding:5px;
    cursor:pointer
}

ul.menu-list li:not(.appt):hover
{
    color:#006699;
    background:#ddd;
}

ul.menu-list li span
{
    display:inline-block;
}

ul.menu-list li span.icon
{
    width:25px;
}

ul.menu-list li span.menu-item
{
    font-size:11pt;
}

.side-menu
{
    display:inline-block;
    padding-right:10px;
    z-index: 1;
}

.side-menu button
{
    position:relative;
}

.side-menu.setup button
{
    position:relative;
    top:-10px;
}

.modal .modal-title
{
    color:#006699;
    font-weight:bold;
    width:100%;
}

.customer-info.modal .modal-title, .communication-preferences .modal-title
{
    color:#006699;
    font-weight:bold;
    width:100%;
}

.pincode-input-container
{
    text-align:center;
    margin-bottom:10px;
}

input.pincode-input-text {
    width: 10% !important;
    min-width: 40px !important;
    text-align: center !important;
    margin: 3px;
    display: inline-block;
}

.btn-default {
    background-color: #f5f5f5;
}

.resend-code {
    color: #006699;
    display: block;
    cursor: pointer;
    font-size: 11pt;
}

table.communication-prefs span.title {
    font-weight: bold;
}

.communication-preferences span.note {
    font-size: 10pt;
    font-style: italic;
    display: block;
}

.config.btn-group .btn
{
    border:1px solid #ddd;
}

.config.btn-group .btn.active
{
    background:#ddd;
}

.badge 
{
    margin-left:5px;
}

.qc-item-status
{
    display:inline-block;
    width:50px;
}

.qc-item-status button
{
    width:40px;
}

.qc-item-count
{
    display:inline-block;
    width:20px;
}

.wo-list li.wo-item
{
    list-style:none;
}

.qc-list li.qc-item
{
    list-style:none;
}

.qc-item-notes
{
    padding-left:50px;
}

.qc-list .attachments
{
    padding-left:40px;
}

.vehicle-pictures span
{
    display: inline-block;
    border: 1px solid #ddd;
    width: 300px;
    text-align: center;
    height: 100px;
    border-radius:5px;
}

.vehicle-pictures span i
{
    font-size: 40pt;
    position: relative;
    color:#9a9595;
    top: 10px;
    display:inline-block;
    margin-bottom:10px;
}

#guide:hover, #guide_mobile:hover, #guide.active {
    color: #fff !important;
    background-color: #52b9e9 !important;
}

#guide {
    color: #52b9e9 !important;
    border-color: #52b9e9 !important;
    position: fixed !important;
    right: -20px !important;
    transform: rotate(270deg);
    top: 130px !important;
    background: #fff;
    z-index: 100;
}

#guide i
{
    display:none;
}

.setup-guide.popover, .setup-guide.popover .popover-body
{
    width:400px;
    max-width:none;
}

.guide.popover, .guide.popover .popover-body
{
    width:300px;
    max-width:none;
}

.setup-guide.popover .guide-title, .guide.popover .guide-title
{
    display:inline-block;
    color:#006699;
    font-weight:bold;
    font-size: 13pt;
    margin-bottom: 15px;
}

.setup-guide.popover button, .guide.popover button
{
    min-width:30px;
}

.setup-guide.popover i.fa-times
{
    background: transparent;
    top: 10px;
    right: 10px;
    color: #a09797;
    box-shadow: none !important;
    position: absolute;
    z-index: 100;
    font-size: 17pt;
    cursor: pointer;
}

.guide.popover table td
{
    padding:2px;
    vertical-align:middle;
}

.sort-order 
{
    display:inline-block;
    margin-right:5px;
}

.sort-order i
{
    margin-right:0px;
}

.dvi-health-report-item[data-value="1"]
{
    background: #ffa726; /*linear-gradient(60deg, #ffa726, #fb8c00);*/
    color: #fff;
    border: 1px solid orange;
}

.dvi-health-report-item[data-value="2"]
{
    background: #66bb6a; /*linear-gradient(60deg, #66bb6a, #43a047);*/
    color: #fff;
    border: 1px solid #66bb6a;
}

.dvi-health-report-item[data-value="0"]
{
    background: #e53935; /*linear-gradient(60deg, #ef5350, #e53935);*/
    color: #fff;
    border: 1px solid red;
}

li.setup-item
{
    padding:5px 20px !important;
}

span.biography
{
    font-size:9pt;
}

.greetings i.fa-close
{
    display:none;
}

.greetings button.view-inspection {
    margin-top: 20px;
    font-size: 14pt;
    margin-bottom: 20px;
    background-color: #2196F3 !important;
    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;
}

.greetings .modal-header .modal-title {
    color: #fff;
    font-size: 24pt;
}

.greetings .modal-header {
    background: linear-gradient(60deg, #2196F3, #52b9e9);
    color: #fff;
    min-height: 100px;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 22pt;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3) !important;
    color: #fff;
    text-align: center;
}

.greetings .modal-body
{
    padding-top: 25px;
    font-size: 14pt;
    position: relative;
    text-align: center;
}

.greetings .modal-content
{
    border-radius:13px;
}

i.fa-file-pdf
{
    cursor:pointer;
}

i.fa-file-pdf:hover
{
    color:#006699 !important;
}

table.rvh_mapping tr
{
    border-top:1px solid #ddd;
}

.videocontainer
{
    display:inline-block;
    position:relative;
}

.rvh-attachments li
{
    margin:0px !important;
}

div.pdf
{
    background:#fff;
}

div.pdf i
{
    position:relative;
    display:block;
    font-size:27pt;
    top:20px;
}

div.pdf span
{
    position:relative;
    top:20px;
    font-size:10pt;
}

.deferred-services .topboard {
    text-align: center;
    background: #EDF3F4;
    color: #555;
    padding-top: 20px;
}

.deferred-services div.vehicle_name {
    font-size: 15pt;
    font-weight: bold;
    text-transform: uppercase;
}

.deferred-services div.report_name {
    font-size: 13pt;
}

#greetings .modal-header {
    background: linear-gradient(60deg, #2196F3, #52b9e9);
    color: #fff;
    min-height: 100px;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 22pt;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3) !important;
    color: #fff;
    text-align: center;
}

#greetings .modal-header .modal-title {
    color: #fff;
    font-size: 24pt;
}

#greetings button {
    margin-top: 20px;
    font-size: 14pt;
    margin-bottom: 20px;
    background-color: #2196F3 !important;
    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;
}

.deferred-services .job-name {
    font-weight: bold;
    color: #006699;
}

.deferred-services tr.items-title th:first-of-type {
    width: 100px !important;
}

.deferred-services tr.items-title th {
    font-size: 11pt;
}

.deferred-services th {
    font-weight: bold;
    font-size: 12pt;
}

.round {
    position: relative;
    top: -5px;
    width:30px;
    display: inline-block;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
    background-color: #66bb6a;
    border-color: #66bb6a;
}

.round input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

.deferred-services #databoard table td {
    vertical-align: middle !important;
    font-size: 12pt;
    text-align: left;
}

.toast i
{
    display:inline-block;
    padding-right:5px;
    font-weight:600;
}

.toast .content
{
    font-weight:bold;
}

.addressed_by
{
    padding:20px 0;
}

.zoom-in-btn-section .zoom-in-buttons {
    position: unset;
    justify-content: flex-end;
}

.inspection_header .align-center
{
    text-align:center;
}

.hunter_history, .groove_glove_history
{
    padding-top:10px;
}

.hunter_history h5, .groove_glove_history h5
{
    padding-bottom:10px;
}

.hunter_history table th[data-show="0"]
{
	display: none;
}

.hunter_history table th, .groove_glove_history table th {
	font-weight : bold;
	font-size : 11pt;
    background:#f5f5f5;
}

.hunter_history table td, .groove_glove_history table td
{
    background:#f5f5f5;
}

.hunter_history table td span
{
	color : white;
	text-align: center;
	padding: 3px 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 10pt;
    display: list-item;
}

.groove_glove_history table td span.gg_td
{
	color : white;
	text-align: center !important;
	padding: 3px 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 10pt;
}

.groove_glove_history img
{
    max-width:500px;
}

.hunter_history table td span[status]
{
	background-color : darkgray;
}

.hunter_history table td span[status="FAILED"]
{
	background-color : #fa3031;
    width:150px;
}

.hunter_history table td span[status="PASSED"]
{
	background-color : #43c83c;
    width:150px;
}

.hunter_history table td span[status="MARGINAL"]
{
	background-color : #f88529;
}

.groove_glove_history table[status="Orange"]
{
	background-color : #f88529;
}

.groove_glove_history table[status="Green"]
{
	background-color : #43c83c;
}

.groove_glove_history table[status="Red"]
{
	background-color : #fa3031;
}

.groove_glove_history table[status="Yellow"]
{
	background-color : #ffcc00;
}

.localHistory a.title
{
    	color: #006699 !important;
    	text-decoration: none;
    	font-weight: bold !important;
    	display: inline-block;
    	border-bottom: none;
    	margin-bottom: 0px;
    	padding-bottom: 10px;
}

.localHistory[data-show="0"] .collapse
{
	padding-top:20px;
}

.localHistory[data-show="1"]
{
    margin-bottom:10px;
}

.localHistory[data-show="1"] .title
{
	padding-top:12px;
	padding-left:2px;
	font-size:14pt;
}

.localHistory a.title
{
	color: #006699;
    	text-decoration: none;
    	font-weight: bold;
    	line-height: 16px;
	display: inline-block;
	border-bottom:none;
	font-size:14pt;
	padding-top:10px;
}

.localHistory a.title i
{
	color: #ccc !important;
	font-size: 14pt !important;
    	display: inline-block;
    	padding-right: 10px;
}

.localHistory a.title span
{
	font-weight:bold;
}

.localHistory a.title span.mobile
{
	display: none;
}

.localHistory button.add
{
	font-weight: bold;
    	color: #006699;
    	border: 1px solid #efefef !important;
}

.localHistory .card
{
	padding: 5px;
    	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;
    	border-radius: 5px;
}

.localHistory .card table
{
	margin-bottom:0px;
}

.localHistory table th
{
        background: #f9f9f9;
}

.localHistory .card table th
{
	border:0px;
}

.localHistory table td
{
	vertical-align: middle !important;
	font-size:12pt;
}

.localHistory table td i:hover
{
	cursor: pointer;
	color:#006699;
}

.localHistory table td i
{
	color: #ccc;
}

.localHistory label
{
	min-width:24px;
	display: block;
	width: 140px;
	padding:5px !important;
}

.localHistory ul
{
	display: grid;
	table-layout: fixed;
	width: 100%;
	padding-top: 5px;
    	padding-left: 0px;
    	margin-left: 0px;
}

.localHistory ul li
{
	display: table-cell;
	text-align: left;
    	cursor: pointer;
    	vertical-align: middle;
	font-size:12pt;
}

.localHistory ul li:not(:last-child)
{
    	/* border-right: 1px solid #ddd; */
}

.localHistory span.tag
{
	display:inline-block;
	width: 60px;
	font-weight:bold;
}

.localHistory div.ticket
{
	text-align : center;
	cursor : pointer;
}

.localHistory div.ticket table
{
	background-color: #fff;
}

.localHistory div.ticket:hover
{
	/* background-color: #f9f9f9; */
}

.localHistory div.ticket .ticket-title
{
	font-size : 12pt;
	font-weight: bold;
	margin: 5px;
}

.localHistory div.ticket .ticket-title
{
	padding: 10px;
    margin:5px 0;
    background:#f7f7f7;
	text-align: left;
    border-radius:5px;
    border:1px solid lightgray;
}

.localHistory .section
{
    padding:0 10px;
}

.localHistory .section.collapse.show
{
    border:1px solid lightgray;
    border-top:none;
}

.localHistory div.ticket[aria-expanded="true"] .ticket-title
{
    margin-bottom:0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.localHistory span.job_name {
    font-size: 12pt;
    font-weight: bold;
    color: #006699;
    margin: 5px;
}

.localHistory div.ticket .ticket-title i.fa
{
	color : #006699;
	font-weight : bold;
	font-size : 14pt;
}

.localHistory div.ticket .ticket-title span.title-info
{
	display: inline-block;
	padding: 0px 8px 0px 8px;
    font-size: 12pt;
    background: #f7f7f7;
    height: 25px;
}

.localHistory div.ticket .ticket-title span.title-info:not(:last-child)
{
	border-right : 1px solid #006699;
}

.localHistory .options
{
    margin: 0 auto;
    text-align: right;
}

.localHistory .tickets
{
	margin : 5px !important;
}

.localHistory ul.jobs li
{
	/* border: 1px solid lightgray; */
	border-radius: 5px;
    padding: 5px 15px;
    /* list-style: none; */
	margin: 3px;
	background: #fff;
}

.localHistory ul.items li{
	background-color: #f7f7f7;
}

.localHistory ul.jobs li b
{
	color : #006699;
}

.localHistory td div.col-md-4
{
	margin: 3px;
    border: 1px solid lightgray;
    border-radius: 5px;
    width: 32%;
    padding: 10px;
}

.localHistory .declined
{
	color: red;
	font-weight: bold;
	border: 1px solid red;
	padding: 3px;
	border-radius: 3px;
	font-size: 14px;
}

.localHistory div.ticket .ticket-title b {
    font-size: 12pt;
    font-weight: bold;
    color: #006699;
    margin: 5px;
}

.localHistory div.ticket .section hr
{
    margin:2px;
}

input[disabled], textarea[disabled] {
    background: #fff !important;
    color: #555 !important;
    font-size: 12pt;
}

ul.rvh-list li, li.dvi-health-report-item, ul.tire-inspection-list li
{
    cursor:pointer;
}

@media (min-width: 767px)
.zoom-in-buttons {
    margin-right: 0px;
}
.zoom-in-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    justify-content: flex-end;
    /* z-index: 5; */
    margin-right: 5px;
    margin-bottom: 5px;
}

.zoom-in-buttons button {
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid #000;
    font-weight: bold;
    width: 50px;
    box-shadow: rgb(0 0 0 / 25%) 0px 2px 3px;
    margin-right:2px;
}

#review ul
{
    padding-left:0px;
}

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

#review ul li div.tabheader div.icon
{
	width:10%;
}

#review ul li div.tabheader div
{
    display: inline-block;
}

#review ul li
{
	margin:10px;
	min-height:40px;
	padding-top:7px;
	cursor:pointer;
	font-size:11pt;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12) !important;
}

#review ul li[data-id="G"]
{
	background: linear-gradient(45deg, #4285F4, rgba(66,133,244,0.8)) !important;
	color:#fff;
	text-align:center;
}

#review ul li[data-id="F"]
{
	background: linear-gradient(45deg, #3b5998, rgba(59, 89, 152, 0.8)) !important;
	color:#fff;
        text-align:center;
}

#review ul li[data-id="Y"]
{
	background: linear-gradient(45deg, rgba(196, 13, 0, 0.6), #c40d00) !important;
	color:#fff;
        text-align:center;
}

#review ul li[data-id="O"]
{
        background: linear-gradient(45deg, rgba(119, 119, 119, 0.6), rgba(119, 119, 119, 0.5)) !important;
        color:#fff;
        text-align:center;
}

#review ul li .icon
{
	background: transparent !important;
}

#review .icon.custom i
{
    	display: inline-block;
    	font-size: 8.5pt;
    	position: relative;
    	top: -2px;
}

#review ul li:hover
{
	background:#006699;
	color:#fff;
}

.teampic {
    margin-top: 20px;
    max-width: 300px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .15) !important;
}

div#repair-order {
    margin: 10px 0px;
}

div.ro-disclaimer {
    margin: 10px 0px;
}

p.disclaimer-label {
    font-size: 11pt;
    margin-bottom: 5px;
    font-weight: bold;
}

p.disclaimer-text {
    background: #0000000d;
    border: 1px solid darkgray;
    border-radius: 5px;
    padding: 5px;
    font-size: 11pt;
    font-style: italic;
}

.category-name
{
    font-size: 11pt;
    color: #979191;
    padding-left:16px;
}

.item-header
{
    line-height:17px;
}

.player-container {
  background: #1a1a1a;
  overflow: auto;
  width: 900px;
  margin: 0 0 20px;
}

.video-js {
  float: left;
  height:100%;
  width:100%;
}

.vjs-playlist {
  float: left;
  width: 100%;
  height:100%;
}

.vjs-playlist.vjs-playlist-horizontal {
  float: none;
  height: 120px;
  width: 100%;
  padding:10px 5px;
}

.vjs-playlist img
{
    min-height:85px;
    width:150px;
}

.vjs-playlist .vjs-playlist-item-list {
    width:100%;
}

.playlist-title
{
        text-align: center;
    padding: 10px 0;
    background-color: #1a1a1a;
    color: #fff;
    font-weight: bold;
    font-size: 12pt;
}

.video-title
{
    padding-left:30px;
    padding-top:20px;
    position:absolute;
    left:0px;
    top:0px;
    color:#fff;
    z-index:10;
    font-size:13pt;
    font-weight:bold;
}

.video-title .name
{
    font-size:12pt;
    padding: 5px;
    border-radius: 5px;
    background:rgba(0,0,0,0.5);
}

.download-video
{
    position:absolute;
    right:25px;
    top:10px;
    cursor:pointer;
    z-index:10;
    padding: 5px;
    border-radius: 5px;
    background:rgba(0,0,0,0.5);
    color:#fff;
}

.video-title i
{
    display:inline-block;
    padding-right:5px;
}

.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text {
    display: block;
    color: orange;
}

.playlist-status
{
        position: absolute;
    right: 25px;
    bottom: 40px;
}

.video-player .modal-header {
    display: none;
}

.video-player .modal-body
{
    padding:5px;
}

.vjs-playlist-horizontal img {
    min-width: 150px;
}

.topclose i {
    border-radius: 100%;
    font-size: 17pt;
    background: #aaa;
    color: #fff;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.2) !important;
}

.video-walk-through
{
    height:100%;
    width:100%;
    overflow-y:hidden;
    padding-top:10px;
}

.video-walk-through ul
{
    white-space:nowrap;
    padding-left:0px;
    text-align:center;
}

.video-walk-through ul li
{
    list-style:none;
    display:inline-block;
    margin:5px;
    position:relative;
    height:100%;
}

.video-walk-through ul li img
{
    width:150px;
    height:150px;
}

.video-walk-through ul li i
{
    position:absolute;
    top:35%;
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:22pt;
    color:#0093ff;
    left:0px;
    font-weight:700;
}

.video-walk-through span.name
{
    position:absolute;
    display:inline-block;
    width:100%;
    text-align:center;
    background:rgba(0,0,0,0.5);
    font-size: 10pt;
    top: 70%;
    left: 0px;
    text-align: center;
    color:#fff;
}

.video-playlist-cover ul
{
    position:relative;
    margin-top:30px;
}

.video-playlist-cover ul li
{
    position:absolute;
}
.video-playlist-cover ul li img
{
    width:150px;
    height:150px;
    box-shadow: rgba(0, 0, 0, .25) 3px 3px 3px !important;
}

.video-playlist-cover label
{
    display: inline-block;
    text-align: center;
    font-size:10pt;
    background: rgba(0, 0, 0, 0.5);
    color:#fff;
    padding:1px 5px;
    margin-top:15px;
    border: 1px solid #000;
    border-radius: 3px;
    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;
}

.video-playlist-cover span
{
    position: absolute;
    display: inline-block;
    text-align: center;
    width: 150px;
    top: 25%;
    left: 0px;
}

.video-playlist-cover span i
{
    font-size: 40pt;
    color: #0093ff;
    display:block;
    cursor:pointer;
}

.video-playlist-cover span i:hover
{
    color:#ddd;
}

@media screen and (min-width: 1400px) {
    #review {
        width: 500px;
        margin: 0 auto;
    }
    .deferred-services .container {
        width: 1100px;
    }
}

@media screen and (max-width: 1000px) {
    .multiaxle.subaxle img.tire {
        width:70px !important;
    }

    .multiaxle.subaxle .tag span {
    top: 50px !important;
    }

    .multiaxle.subaxle .tag.rear span {
    top: 0px !important;
    }

    #showimg img
    {
        max-height:500px;
    }

    ul.report_details li.sub-group
    {
        padding-left:0px;
    }

    ul.report_details li.sub-group:before, ul.report_details li.sub-group .bullet
    {
        display:none;
    }

    ul.rvh-list li:not(.rvh-item), ul.health-report li, ul.tire-inspection-list li
    {
        margin:3px 2px !important;
    }

    ul.rvh-list .report-title, ul.health-report .report-title, ul.tire-inspection-list .report-title 
    {
        padding-left:0px;
    }

    ul.rvh-list .report-nav, ul.health-report .report-nav, ul.tire-inspection-list .report-nav
    {
        padding-right:0px;
    }

    ul.report_details li.sub-group .title
    {
        padding-bottom:10px;
    }

    .header
    {
        margin-bottom:5px !important;
    }

    .header .shop_name .title
    {
        text-align:center;
        width:100%;
        display:block;
    }

    .inspection_header .container
    {
        padding:0px;
        text-align:center;
    }

    .side-menu
    {
        position: absolute;
        left:2px;
    }

    .btn-text
    {
        padding:2px 5px !important;
    }

    .guide.popover table td, .guide.popover table th
    {
        border-top:1px dotted #dee2e6;
    }

    .report-nav i {
        display: inline-block;
        margin-right: 0px;
    }

    #guide {
        top: 90% !important;
        right: 10px !important;
        border: 1px solid #ddd;
        border-radius: 100%;
        transform: none !important;
        box-shadow: 0 3px 15px 0 rgba(82,185,233,0.25) !important;
    }

    #guide i
    {   
        display:inline-block;
    }

    #guide span
    {
        display:none;
    }

    ol
    {
        padding-left:5px;
    }
}

@media screen and (max-width: 767px)
{
    .communication-preferences .modal-dialog, .customer-info.modal .modal-dialog, .service-history .modal-dialog
    {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 5%;
    }

    .header .shop_logo
    {
        display:block !important;
        margin:0 auto;
        margin-top:10px;
    }
}

@media screen and (max-width: 1000px) {

    h5.my-0
    {
        max-width: 85%;
        text-align: center;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px)
{
    h5.my-0
    {
        margin-left: auto !important;
    }

}

@media screen and (max-width: 360px) {

    .communication-preferences .modal-dialog, .customer-info.modal .modal-dialog, .service-history .modal-dialog    
    {
       margin-right: 45px;
    }

    .multiaxle img.tire {
	    width:100px !important;
    }

    .multiaxle .tag span {
	    top: 50px !important;
	}

	.multiaxle .tag.rear span {
    top: 20px !important;
    }
}