body {
    font-family: 'Kanit';
}

ol,
ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* installmentpage */
#installments-page .bannerontop img {
    position: relative;
}

#installments-page .bannerontop .captionbanner {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

#installments-page .bannerontop .install_period_box {
    transform: translate(120px, -130px);
    width: 80%;
}
@media (max-width: 1024px){
    #installments-page .bannerontop .captionbanner {
        top: 10%;
    }
}
@media (max-width: 767.99px){
    #installments-page .bannerontop .captionbanner {
        top: 14%;
    }
    #installments-page .bannerontop .install_period_box {
        transform: unset;
        width: 100%;
    }
    #installments-page .bannerontop .captionbanner h1{
        font-size: 1.5em;
    }
    #installments-page .bannerontop .captionbanner p{
        font-size: 1em !important;
    }
}
@media (max-width: 425.99px){
    #installments-page .bannerontop .captionbanner {
        top: 5%;
    }
    #installments-page .bannerontop .captionbanner h1{
        font-size: 1em;
    }
    #installments-page .bannerontop .captionbanner p{
        font-size: 0.7em !important;
    }
}

#installments-page .nav-pills .nav-link {
    background-color: transparent;
    color: #000;
    border: 1px solid #DDDDDD;
    margin-bottom: 10px;
    padding: 20px 70px;
}

#installments-page .nav-pills .nav-link.active {
    border: 1px solid #0634FE;
    color: #0634FE;
}

#installments-page .tab-content .list-install li {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #DDDDDD;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-right: 10px;
    position: relative;
    padding: 50px 30px;
    text-align: center;
    width: 22%;
}

#installments-page .tab-content .list-install li a {
    color: #000;

}

#installments-page .tab-content .list-install li a span {
    font-size: 12px;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#installments-page .tab-content .list-install li a .text-d {
    margin-top: -30px;
}

.btn-info {
    background-color: #E3E5FF !important;
    border: #E3E5FF !important;
    color: #6771F0 !important;
    padding: 10px 50px !important;
}

.btn-primary {
    /* background-color: #0634fe !important; */
    /* padding: 10px 50px !important; */
}

.btn-success {
    border-radius: 50px !important;
    background-color: #06A09D !important;
    color: #fff !important;
}
.member-detail .btn-outline-primary {
    padding: 10px 50px !important;
}
.contentdetail {
    color: #777;
    font-size: 14px;
}

.hoverstyle figure {
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}

.hoverstyle figure div {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    height: 100%;
    line-height: 20;
    width: 100%;
    border-radius: 10px;
}

.hoverstyle figure a img {
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-property: transform;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px;
}

.hoverstyle:hover figure a img {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    border-radius: 10px;
}

.hoverstyle:hover figure div {
    opacity: 1;
}

.iconshow {
    background-color: #F1F1F1;
    border-radius: 50px;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
}

.iconshow img {
    width: 50px;
}

.topcbansec {
    background-color: #F6F6F6;
    padding: 30px;
}

#dealernearyou #dealerboxsearch {
    background-color: #222B5E;
    padding: 40px;
}

#dealernearyou #dealerboxsearch .searchtext p,
#dealernearyou #dealerboxsearch .searchtext h1 {
    color: #fff;
}

.forms-search label {
    padding: 8px 0px;
    font-size: 14px;
}

#dealernearyou #dealerboxsearch .btn-secondary {
    border-radius: 50px;
    background-color: #FF9F43;
    color: #fff;
    border: #FF9F43;
    width: 100%;
    padding: 10px;
}

.orangemore {
    color: #FF9F43;
    text-decoration: underline;
}

#member-menu .memberlist-menu ul li {
    border: 1px solid #E0E0E0;
    background-color: #FAFAFA;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

#member-menu .memberlist-menu ul li a {
    color: #A7B0BC;
    display: block;
}

#member-menu .memberlist-menu ul li svg:hover {
    fill: #226ABD;
    stroke: #226ABD;

}

#member-menu .memberlist-menu ul li.active a,
#member-menu .memberlist-menu ul li :hover {
    color: #226ABD;
    font-weight: 500;
}

#member-menu .memberlist-menu ul li svg {
    margin-right: 10px;
    vertical-align: text-top;
    width: 22px;
    height: 22px;
    fill: #A7B0BC;
    stroke: #A7B0BC;
}


.btn-outline-light {
    border: 1px solid #226ABD;
    color: #226ABD;
    font-size: 14px;
    border-radius: 50px;
}

.btn-outline-info:hover,
.btn-outline-light:hover {
    background-color: #226ABD;
    color: #fff;
}

.btn-outline-info {
    border: 1px solid #226ABD;
    color: #226ABD;
    font-size: 14px;
}

#profilepage .headtop {
    color: #6F6B7D;
    font-size: 16px;
}

#profilepage .contents {
    color: #464646;
    font-size: 16px;
}

#profilepage .border-start {
    border-left: 4px solid #226ABD !important;
}

#profilepage .btn-primary {
    padding: 6px 20px;
}

.form-sty label {
    font-size: 14px;
    padding: 5px 0px;
}

.form-sty label span {
    color: red;
}

.form-sty .form-select,
.form-sty .form-control {
    font-size: 14px;
}

.bluetxt {
    color: #0634fe;
}

.activefave svg {
    background-color: #CA0800 !important;
}

.package-one {
    padding: 50px 30px;
    color: #226ABD;
    font-size: 30px;
    text-align: center;
    border-bottom: 3px solid #222222;
}

.package-two {
    padding: 50px 30px;
    background-color: #226ABD;
    font-size: 30px;
    color: #fff;
    text-align: center;
    border-bottom: 3px solid #222222;
}

.package-three {
    padding: 50px 30px;
    background-color: #FF922D;
    font-size: 30px;
    color: #fff;
    text-align: center;
    border-bottom: 3px solid #222222;
}

.package-three span {
    font-size: 13px;
    display: block;
}

.member-detail .card-title {
    font-size: 40px;
    text-align: center;
}

.member-detail .card-body span {
    font-size: 14px;
    display: block;
    text-align: center;
    color: #A5A5A5;
}

.table-forsty thead th {
    background-color: #EDF2F6;
    color: #495057;
    font-size: 15px;
}

.table-forsty tr td {
    font-size: 14px;
    color: #6A6A6B;
    vertical-align: middle;

}

.form-sty .input-file {
    background: #ffffff;
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0);
}

.form-sty .upload-img {
    width: 120px;
    height: 120px;
    display: inline-block;
    object-fit: cover;
    object-position: 50% 50%;
    margin-right: 15px;
    vertical-align: middle;
}

.form-sty .input-file-upload {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.form-sty .input-file-upload input[type="file"] {
    opacity: 0;
    padding: 10px 0;

}

.form-sty .upload-label {

    background: #0634FE;
    text-align: center;
    color: #ffffff;
    display: block;
    padding: 8px 30px;
    position: absolute;
    line-height: normal;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
}

.form-sty .input-file-upload:hover .upload-label {
    background: #eaf5fe;
    background: #0634FE;
}

.smtxt {
    font-size: 12px;
}

.avatar-upload {
    position: relative;
    max-width: 205px;
    transform: translate(10px, -80px);
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input+label:after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.display-slide {
    display: none;
}

.list-manage {
    border-bottom: 1px solid #eee;
}

.list-manage li {
    display: inline-block;
    padding: 0px 26px;
    font-size: 14px;
    padding-bottom: 5px;

}

.list-manage li a {
    color: #000;
}

.list-manage li.active {
    border-bottom: 3px solid #0634FE;
}

.listgallery .card-body {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);

}

.listservices h6 {
    margin-top: 10px;
}

.listservices li {
    display: inline-block;
    width: 22%;
}

.icl{
    width: 20%;
    vertical-align: top;
    display: inline-block;
}
.rltxt{
    display: inline-block;
    width: 75%;
    word-break: break-word;
}
.bgcontact{
    padding: 20px;
    background-color: #F8FAFF;
}
.sociallist-contact li{
    display: inline-block;
    margin-right: 10px;
}
.sociallist-contact li a{
    color: #464646;
}
.list-sort li{
    display: inline-block;
}
.list-sort li a{
    color: #000;
}
.titlecategory{
background: #F0F0F0;
color: #313C52;
font-size: 16px;
padding: 10px;
}
.txhoder{
    position: absolute;
    right: 50px;
    color: #707070;
    font-size: 14px;
}
.input-group>.form-control{
    border-left: none;
}
.input-group-text{
background-color: transparent;
}
.listcategory{
    padding: 10px 20px;
}
.listcategory  li{
    font-size: 14px;
    padding-bottom: 5px;
}

.listcategory .logobrand{
    border-radius: 100%;
    width: 30px;
    height: 30px;
    object-fit: cover;
    overflow: hidden;
    border: 1px solid #eee;
    display: inline;
}
.listcategory .form-check-input{
    width: 1.3em;
    height: 1.3em;
}
.sortfilter-main .accordion-body{
    padding: 0px;
}
.sortfilter-main .accordion-button,
.sortfilter-main .accordion-button:not(.collapsed){
background-color: transparent;
color: #2965B9;
}
.sortfilter-main .btn-primary,
.sortfilter-main .btn-group{
    width: 100%;
}

/* dealer profile */
.navbar-profile{
    border-bottom: 1px solid #ddd;
    padding: 20px 0 15px;
}
.navbar-profile .row{
    display: flex;
    align-items: center;
}
.navbar-profile ul li{
    display: inline-block;
    padding-right: 20px;
}
.navbar-profile ul li a{
    color: #0634FE;
}
.navbar-profile .btn-default-blue{
    width: 200px;
}
.btn-default-blue{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #0634FE;
    color: #0634FE;
    font-size: 0.85rem;
    margin: 0 2px;
}
.btn-blue{
    background-color: #0634FE;
    color: #fff;
}
.box-dealerprofile-slide{
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 20px;
    padding: 10px 0;
}
.btn-viewall-albumphoto{
    display: inline-flex;
    align-items: center;
    background-color: #8390B5;
    color: #fff;
    border-radius: 4px;
    height: 20px;
    padding: 0 4px;
    font-size: 0.75rem;
}
.btn-viewall-albumphoto img{
    width: 13px;
    height: auto;
    margin-right: 4px;
}
.btn-view-eye{
    display: inline-flex;
    align-items: center;
    background-color: #50505080;
    color: #fff;
    border-radius: 4px;
    height: 20px;
    padding: 0 4px;
    font-size: 0.75rem;
}
.btn-view-eye img{
    width: 13px;
    height: auto;
    margin-right: 4px;
}
.btn-wishlist{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #50505080;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-wishlist img{
    width: 17px;
    height: auto;
}
.dealerprofile-slide .item{
    margin-bottom: 5px;
}
.owlslide .owl-theme .owl-nav button{
    position: absolute;
    bottom: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.owlslide .owl-carousel .owl-nav button.owl-prev{
    left: 0;
    background-color: #0000007A;
    color: #fff;
}
.owlslide .owl-carousel .owl-nav button.owl-next{
    right: 0;
    background-color: #0000007A;
    color: #fff;
}
.owlslide .owl-theme .owl-dots .owl-dot.active span, .owlslide .owl-theme .owl-dots .owl-dot:hover span {
    background: #2D2D2D;
}
.profile-carname{
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.profile-carname h2{
    font-size: 1.8rem;
}
.profile-rate-star{
    margin-bottom: 10px;
}
.profile-rate-star i{
    color: #F79601;
}
.profile-rate-star i.rate-half{
    opacity: 0.5;
}
.profile-excellent{
    font-size: 0.8rem;
    color: #00000082;
    line-height: 1.2;
    display: inline-block;
    vertical-align: top;
}
.profile-excellent div{
    font-size: 1.2rem;
    color: #000;
}
.profile-ret-num{
    display: inline-block;
    vertical-align: top;
    background-color: #000;
    border-radius: 4px 4px 4px 0;
    color: #fff;
    padding: 3px 5px;
    font-size: 1rem;
    margin: 5px 0 0 8px;
}
.profile-social{
    margin-bottom: 5px;
}
.box-profile-social .profile-social a{
    display: inline-block;
    margin-left: 3px;
}
.profile-social a img{
    width: auto;
    height: 25px;
}
.box-profile-social{
    text-align: right;
}
.box-profile-social a{
    display: block;
    color: #0634FE;
}
.profile-car-list{
    border-top: 1px solid #ddd;
    margin: 15px 0 25px;
    padding-top: 20px;
}
.profile-car-list ul{
    margin: 0;
    padding: 0;
}
.profile-car-list ul li{
    background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" transform="translate(0.5 0.629883)" fill="white"/><path d="M8.90018 17.6702L3.86018 12.6302L2.18018 14.3102L8.90018 21.0302L23.3002 6.6302L21.6202 4.9502L8.90018 17.6702Z" fill="%23313C52"/></svg>');
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left top;
    padding-left: 35px;
    margin-bottom: 10px;
}
.profile-btnhalf{
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    padding-left: 2px;
}
.profile-btnhalf a{
    width: 48%;
    margin: 0;
}
.profile-box-userreview{
    background-color: #F6F6F7;
    padding: 50px 0;
    margin: 30px 0;
}
.item-userreview{
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    overflow: hidden;
    text-align: center;
}
.item-userreview figure{
    position: relative;
    overflow: hidden;
    padding-bottom: 90%;
}
.item-userreview figure img{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    left: 0;
    top: 0;
    object-position: top center;
}
.item-userreview-detail{
    color: #373737;
    font-size: 0.9rem;
    padding: 0 15px 15px;
}
.item-userreview-detail h5{
    font-size: 1.2rem;
}
.item-userreview-detail div{
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.profile-box-userreview .owlslide .owl-theme .owl-nav button{
    bottom: auto;
    top: 50%;
}
.profile-box-userreview  .owlslide .owl-carousel .owl-nav button.owl-prev{
    left: -45px;
}
.profile-box-userreview  .owlslide .owl-carousel .owl-nav button.owl-next{
    right: -45px;
}
.wrap-profile-contact{
    background-color: #F8FAFF;
    padding: 35px 35px 50px;
}
.profile-contact-topic{
    font-size: 1.15rem;
}
.profile-contact-map img{
    width: 28px;
    height: auto;
    margin-right: 10px;
}
.profile-contact-map a{
    display: block;
    color: #0634FE;
    margin-bottom: 5px;
}
.profile-contact-map a.linkmaps{
    display: inline-block;
}
.profile-contact-map{
    margin-top: 15px;
}
.wrap-profile-contact .topic{
    margin-bottom: 50px;
}
.profile-status-time{
    background-color: #1AA140;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8rem;
    padding: 5px 10px;
    display: inline-block;
}
.txt-status-time{
    font-size: 1.2rem;
    color: #1AA140;
}
.txt-time{
    font-size: 1.2rem;
}
.box-status-time{
    margin-top: 10px;
    margin-bottom: 30px;
}
.profile-contact-social{
    margin-top: 15px;
}
.profile-contact-social a{
    display: inline-block;
    vertical-align: top;
    margin-right: 25px;
}
.profile-contact-social a i{
    color: #000;
    font-size: 1rem;
}
.profile-contact-social a svg{
    width: 12px;
    height: auto;
    margin-top: -3px;
}
.wrap-profile-contact .btn-default-blue{
    width: 210px;
    font-size: 1.1rem;
    height: 50px;
    margin-top: 40px;
}
.wrap-profile-contact .btn-default-blue img{
    width: 17px;
    height: auto;
    margin-right: 5px;
}
.wrap-profile-about{
    padding: 50px 0;
    color: #585858;
}
.profile-about-logo{
    margin: 20px 0 40px;
}
.profile-about-logo img{
    max-width: 100%;
    height: 130px;
    object-fit: contain;
}
.txt-profile-topic{
    color: #373737;
}
.profile-about-photo img{
    width: 100%;
    margin: 30px 0 50px;
}
.profile-promotion-list{
    padding: 10px 0 50px;
}
.profile-promotion-list ul{
    margin: 0;
    padding: 0;
}
.profile-promotion-list ul li{
    background-image: url('data:image/svg+xml,<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3225 0.426421C18.3958 0.510088 18.454 0.60963 18.4938 0.719303C18.5335 0.828976 18.554 0.946611 18.554 1.06542C18.554 1.18423 18.5335 1.30187 18.4938 1.41154C18.454 1.52121 18.3958 1.62076 18.3225 1.70442L7.3351 14.3404C7.26235 14.4248 7.17579 14.4917 7.08043 14.5374C6.98506 14.5831 6.88278 14.6066 6.77947 14.6066C6.67616 14.6066 6.57387 14.5831 6.47851 14.5374C6.38314 14.4917 6.29659 14.4248 6.22384 14.3404L0.730149 8.02242C0.582787 7.85295 0.5 7.62309 0.5 7.38342C0.5 7.14375 0.582787 6.9139 0.730149 6.74442C0.877511 6.57495 1.07738 6.47974 1.28578 6.47974C1.49418 6.47974 1.69405 6.57495 1.84141 6.74442L6.77947 12.4244L17.2138 0.424421C17.2866 0.340066 17.3731 0.273111 17.4685 0.227419C17.5639 0.181728 17.6661 0.158203 17.7695 0.158203C17.8728 0.158203 17.975 0.181728 18.0704 0.227419C18.1658 0.273111 18.2523 0.340066 18.3251 0.424421L18.3225 0.426421Z" fill="%231F8401"/></svg>');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left center;
    padding-left: 35px;
    margin-bottom: 10px;
}
.wrap-profile-whyus{
    padding: 0 80px;
    margin-top: 20px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 50px;
}
.wrap-profile-whyus.owlslide .owl-theme .owl-nav button{
    bottom: auto;
    top: 50%;
}
.wrap-profile-whyus.owlslide .owl-carousel .owl-nav button.owl-prev{
    left: -80px;
}
.wrap-profile-whyus.owlslide .owl-carousel .owl-nav button.owl-next{
    right: -80px;
}
.wrap-profile-whyus .item-userreview{
    border: 0;
    border-radius: 0;
}
.wrap-profile-whyus .item-userreview figure{
    border-radius: 5px;
    padding-bottom: 110%;
}
.wrap-car-alldealer{
    background-color: #F6F6F7;
    padding: 50px 0;
}
.wrap-car-alldealer .wrap-profile-whyus{
    border-bottom: 0;
    padding-bottom: 0;
}
.item-cardealer{
    background-color: #fff;
}
.owl-cardealer.owl-carousel .owl-item .logo-sub-car{
    width: 30px;
}
.tag-cargreen{
    background-color: #247A55;
    padding: 3px 10px;
    border-radius: 5px;
    color: #dddddd;
    font-family: 'Kanit';
    font-weight: 300;
    font-size: 9px;
}
.item-cardealer .hit-car-h-text{
    color: #313C52;
    font-size: 1.1rem;
}
.item-cardealer .text-muted-foreground-1{
    color: #313C52;
    font-size: 0.9rem;
    margin: 10px 0;
}
.item-cardealer .text-muted-foreground-2{
    color: #313C52;
    margin: 15px 0;
}
.wrap-car-alldealer .btn-viewmore{
    display: block;
    color: #0634FE;
}
.wrap-car-alldealer .btn-viewmore i{
    font-size: 0.8rem;
    padding-left: 5px;
}
.profile-boxservice{
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    margin: 50px 0;
    padding: 50px 0 60px;
}
.profile-service-boxlist{
    margin-top: 25px;
}
.list-ourservice{
    margin-top: 15px;
}
.list-ourservice i{
    color: #515151;
    font-size: 0.9rem;
    padding-right: 5px;
}
.profile-location{
    background-color: #F8FAFF;
    padding: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}
.profile-location .box-profile-contact .btn-default-blue{
    width: 220px;
    height: 50px;
    margin-top: 40px;
}
.profile-location .profile-contact-map{
    margin-top: 35px;
}
.profile-review-boxrate{
    display: flex;
    align-items: center;
    color: #313C52;
    font-size: 1.7rem;
    margin: 40px 0 20px;
}
.boxrate-yellow{
    background-color: #F5A223;
    color: #fff;
    font-size: 1.7rem;
    border-radius: 10px;
    padding: 7px 10px;
    margin-right: 15px;
}
.wrap-boxreview-left .profile-rate-star{
    margin-top: 15px;
}
.boxreview-left-linkinfo{
    text-align: center;
    margin: 10px 0;
}
.boxreview-left-linkinfo a{
    display: block;
    color: #0634FE;
    font-size: 0.9rem;
}
.boxreview-progress{
    color: #000;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}
.boxreview-progress .txt-point{
    width: 25%;
}
.boxreview-progress .tab-bar{
    width: 60%;
    background-color: #eee;
    border-radius: 50px;
    height: 13px;
}
.boxreview-progress .txt-percent{
    width: 15%;
    text-align: right;
}
.tab-barprogress{
    background-color: #F79601D9;
    height: 100%;
    border-radius: 50px;
}
.profile-box-comment{
    padding: 15px;
    margin-bottom: 20px;
}
.box-comment-popular{
    border: 3px solid #FEC60E;
}
.profile-tag-popular{
    background-color: #FEC60E;
    color: #000;
    font-size: 0.85rem;
    padding: 3px 5px;
    display: inline-block;
    border-radius: 4px;
}
.profile-box-comment .profile-rate-star {
    margin-bottom: 0;
}
.profile-box-comment .profile-rate-star i{
    font-size: 0.8rem;
}
.box-comment-excellent{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.box-comment-profile-photo{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
}
.box-comment-profile-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-comment-profile{
    display: inline-flex;
    margin-bottom: 25px;
}
.box-comment-username{
    display: inline-flex;
    align-items: center;
    margin-top: -10px;
}
.txt-username{
    color: #313C52;
    font-size: 1.2rem;
}
.txt-postdate{
    color: #777777;
    font-size: 0.7rem;
    margin: 6px 0 0 7px;
}
.txt-review-green{
    color: #208400;
    font-size: 0.7rem;
    margin-top: 3px;
}
.txt-review-green img{
    width: 11px;
    margin-right: 5px;
}
.rate-reviewblue{
    background-color: #226ABD;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px 4px 4px 0;
    display: inline-flex;
    align-items: center;
}
.rate-reviewblue i{
    font-size: 0.35rem;
    color: #F79601;
    padding-left: 3px;
}
.desc-writereview{
    display: inline-block;
    width: calc(100% - 50px);
    color: #222B5E;
    padding-left: 10px;
    vertical-align: top;
}
.box-comment-write{
    margin-bottom: 15px;
}
.btn-reply-comment{
    display: inline-block;
    background: none;
    border: 0;
    box-shadow: none;
    color: #2965B9;
    text-decoration: underline;
    font-size: 0.9rem;
    margin-right: 15px;
}
.btn-thumpup{
    display: inline-block;
    background: none;
    border: 0;
    box-shadow: none;
    color: #2965B9;
    font-size: 0.9rem;
    vertical-align: top;
}
.btn-thumpup img{
    width: 15px;
    height: auto;
    margin-top: -2px;
    margin-right: 3px;
}
.review-boxbtn{
    padding-left: 40px;
}
.review-photo-gallery a{
    width: 115px;
    margin-right: 15px;
    display: inline-block;
}
.review-photo-gallery figure{
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}
.review-photo-gallery figure img{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    left: 0;
    top: 0;
    object-position: top center;
}
.wrap-reply-comment{
    background-color: #F9F9F7;
    padding: 20px;
    margin: 30px 0 0 40px;
    width: 90%;
}
.wrap-reply-comment .box-comment-profile-username{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.wrap-reply-comment .review-boxbtn{
    padding-left: 0;
}
.profile-faq{
    margin-top: 20px;
}
.profile-faq .txt-profile-topic{
    margin-bottom: 20px;
}
.box-btn-writereview{
    margin-top: 40px;
}
.box-btn-writereview a{
    margin-bottom: 10px;
    height: 45px;
}
.box-btn-writereview a img{
    width: 15px;
    height: a;
    margin-right: 5px;
}
.box-btn-writereview a i{
    padding-right: 5px;
}
.top-breadcrumb{
    display: inline-block;
    padding-left: 15px;
}
.top-breadcrumb ul{
    margin: 0;
    padding: 0;
}
.top-breadcrumb ul li{
    display: inline-block;
    color: #404040;
}
.page-review{
    margin-top: 40px;
}
.reviewm-box-form,
.reviewm-box-form .form-select,
.reviewm-box-form .form-control{
    font-size: 0.85rem;
}
.review-box-search .btn-default-blue{
    margin-top: 20px;
}
.review-box-search .btn-default-blue i{
    padding-right: 7px;
}
.review-box-search{
    border-bottom: 2px solid #ddd;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.btn-reviewfilter{
    display: inline-flex;
    align-items: center;
    height: 45px;
    border: 0;
    box-shadow: none;
    background-color: #E5EBFF82;
    border-radius: 50px;
    padding: 0 20px;
    color: #0634FE;
    margin-right: 5px;
}
.btn-reviewfilter span{
    color: #515151;
    padding-left: 10px;
}
.btn-clearfilter{
    border: 0;
    background: none;
    box-shadow: none;
    color: #0634FE;
}
.btn-clearfilter img{
    width: 18px;
    height: auto;
}
.review-box-filter{
    margin-bottom: 20px;
}
.review-sortby{
    font-size: 0.9rem;
    color: #707070;
}
.review-sortby .form-select{
    width: 150px;
    display: inline-block;
    font-size: 0.9rem;
    color: #707070;
    margin-left: 10px;
}

/* dealer profile */



/* Responsive */
@media (max-width: 991px) {
    /* dealer profile */
    .navbar-profile .btn-default-blue{
        width: 140px;
    }
    .profile-boxvontent-car{
        margin-top: 30px;
    }
    .profile-box-userreview .owlslide .owl-carousel .owl-nav button.owl-next{
        right: -35px;
    }
    .profile-box-userreview .owlslide .owl-carousel .owl-nav button.owl-prev{
        left: -35px;
    }
    .wrap-profile-contact .btn-default-blue{
        margin-bottom: 40px;
    }
    .box-opentime{
        margin-top: 20px;
    }
    .profile-location .box-profile-contact .btn-default-blue{
        margin-bottom: 40px;
    }
    .review-photo-gallery a{
        width: 80px;
        margin-right: 10px;
    }
    .review-box-filter .text-end{
        text-align: left !important;
    }
    .review-sortby{
        margin-top: 20px;
    }
    .reviewm-box-form{
        margin-bottom: 10px;
    }
    .review-box-search .btn-default-blue{
        margin-top: 10px;
    }
    /* dealer profile */
}

@media (max-width: 767px) {
    /* dealer profile */
    .navbar-profile .text-end{
        text-align: left !important;
        margin-top: 20px;
    }
    .profile-carname h2{
        font-size: 1.25rem;
    }
    .profile-box-userreview{
        padding: 35px;
    }
    .wrap-profile-contact .topic{
        margin-bottom: 30px;
    }
    .profile-contact-topic{
        font-size: 1.05rem;
    }
    .wrap-profile-contact{
        padding: 20px;
    }
    .wrap-profile-about{
        padding: 35px 0;
    }
    .profile-about-photo img{
        margin: 15px 0 30px;
    }
    .profile-promotion-list{
        padding-bottom: 20px;
    }
    .wrap-profile-whyus{
        padding: 0 50px;
    }
    .wrap-profile-whyus.owlslide .owl-carousel .owl-nav button.owl-next{
        right: -50px;
    }
    .wrap-profile-whyus.owlslide .owl-carousel .owl-nav button.owl-prev{
        left: -50px;
    }
    .wrap-car-alldealer{
        padding: 35px 0;
    }
    .profile-boxservice{
        padding: 35px 0;
    }
    .profile-location{
        padding: 20px;
    }
    .boxrate-yellow{
        font-size: 1.3rem;
    }
    .profile-review-boxrate{
        font-size: 1.3rem;
        margin-top: 20px;
    }
    .box-btn-writereview{
        margin-bottom: 30px;
    }
    .review-photo-gallery a{
        width: 60px;
        margin-right: 5px;
    }
    .profile-faq{
        margin-top: 0;
    }

    /* dealer profile */
}






























/* DETAIL INSPECTION REPORT */
.img-width{
    width: 100%;
    height: auto;
}
.img-width img{
    width: 100%;
    height: auto;
}
.inspection-page{
    padding: 45px 0;
}
.inspection-page h2{
    font-size: 32px;
    font-weight: 400;
    color: #313C52;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 40px;
    position: relative;
}
.inspection-page h2:after{
    content: '';
    width: 20%;
    max-width: 250px;
    height: 4px;
    border-radius: 2px;
    background: rgb(34,106,189);
    background: linear-gradient(90deg, rgba(34,106,189,1) 50%, rgba(126,162,202,1) 95%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.inspection-page h4{
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    color: #313C52;
    letter-spacing: 0.01rem;
    margin-bottom: 0;
}
.inspection-page h5, .inspection-page h6{
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    color: #313C52;
    margin-bottom: 0;
}
.inspection-page h5{
    font-weight: 600;
    letter-spacing: 0.01rem;
}
.inspection-page hr{
    width: calc(100% - 70px);
    float: none;
    height: 6px;
    background: #EDF2F6;
    border-top: none;
    border-radius: 3px;
    opacity: 1;
    margin: 2rem auto;
}
.img-width.grade{
    position: relative;
}
.car-tag-grade{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
.car-tag-grade p{
    font-size: 32px;
    line-height: 50px;
    font-weight: 600;
    color: white;
    padding-left: 14px;
    margin-bottom: 0;
    z-index: 3;
}
.triangle-top{
    border-top: 100px solid #10367B;
    border-right: 100px solid transparent;
    z-index: 2;
    margin-top: -50px;
}
.job-no-info{
    margin: 15px 0 0px 0;
}
.job-no-info > .row .col-lg-6:last-child{
    text-align: right;
}
.car-infoTB{
    padding: 0 35px;
}
.rowTB{
    border-bottom: 1px solid #C5C5C5;
    padding: 25px 0 8px 0;
}
.rowTB .row .col-xl-3{
    color: #000000;
    padding-right: 5px;
}
.rowTB .row .col-xl-9{
    color: #11529D;
}
.roddee-check-topic{
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}
.roddee-check-topic h5{
    float: left;
    color: #000000;
    letter-spacing: 0.015rem;
    padding-right: 15px;
}
.roddee-checkTag{
    height: 20px;
    float: left;
    background-color: #4F73D2;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 300 !important;
    line-height: 20px;
    color: white;
    letter-spacing: 0.01rem;
    padding: 0 6px;
    margin-top: 5px;
}
.roddee-checkTag img{
    width: auto;
    height: 14px;
    float: left;
    margin: 3px 5px 0 0;
}
.checkpointBox{
    margin: 10px 0;
}
.checkpoint-topic{
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.005rem;
    padding-top: 8px;
    margin-bottom: 6px;
}
.checkpoint-topic i{
    font-size: 17px;
    color: #28C76FAD;
    margin-right: 9px;
}
.checkpointBox p{
    font-size: 14px;
    color: #242D3D;
}
.condition-summary{
    float: none;
    margin: 0 auto;
    display: table;
}
.condition-summary p{
    float: left;
    color: #000000;
    padding-right: 10px;
    margin-bottom: 0;
}
.condition-summary p strong{
    letter-spacing: 0.01rem;
}
.tag-grade{
    height: 16px;
    float: left;
    background-color: #10367B;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 300;
    line-height: 16px;
    color: white;
    letter-spacing: 0.015rem;
    padding: 0 5px;
    margin-top: 4px;
}
.manual-booklet{
    width: 100%;
}
.manual-booklet li{
    width: calc(100% / 3);
    float: left;
    padding: 4px;
}
.staff-check-section h5{
    margin-bottom: 10px;
}
.staff-statusBox{
    margin: 15px 0 12px 0;
    position: relative;
}
.staff-statusBox .tag-status{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.staff-status-info > li{
    float: left;
}
.staff-status-info > li:last-child{
    width: calc(100% - 50px);
    padding-left: 12px;
}
.staff-display{
    width: 50px;
    height: 50px;;
    border-radius: 50%;
    overflow: hidden;
}
.staff-display img{
    width: 100%;
    height: auto;
}
.staff-name{
    font-size: 20px;
    font-weight: 600;
    color: #313C52;
    letter-spacing: 0.01rem;
}
.status-date{
    font-size: 14px;
    font-weight: 400;
    color: #989898;
    letter-spacing: 0;
    padding-left: 7px;
    display: inline;
}
.staff-position{
    font-size: 13px;
    color: #208400;
}
.staff-position i{
    padding-right: 4px;
}
.tag-status{
    float: left;
    background-color: #48D445;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    color: white;
    letter-spacing: 0.015rem;
    padding: 0 8px;
}
.commentBox h6{
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.015rem;
    margin-bottom: 2px;
}
.commentBox p{
    width: 100%;
    margin-bottom: 0;
}
.car-colorBD-Box{
    border: 3px solid #E7E7E7;
    text-align: center;
    padding: 10px;
    margin: 25px 0;
}
.car-colorBD-Box p{
    margin-bottom: 8px;
}
.car-color-section{
    margin-bottom: 70px;
}
.car-color-section .img-width{
    position: relative;
}
.car-checklist{
    width: 100%;
}
.car-checklist > li{
    width: 25%;
    float: left;
    min-height: 472px;
    padding: 20px 4px;
}
.car-checklist > li h6{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01rem;
    margin-bottom: 8px;
}
.car-checklist > li .tag-status{
    margin: 8px 0 12px 0;
}
.car-checklist > li .commentBox{
    margin-top: 10px;
}
.car-checklist > li .commentBox h6{
    font-size: 15px;
    letter-spacing: 0.005rem;
    margin-bottom: 4px;
}
.car-checklist > li .commentBox p{
    font-size: 14px;
}
.staff-check-more-gal{
    width: 100%;
}
.staff-check-more-gal li{
    width: calc(100% / 4);
    float: left;
    padding: 4px;
}
.staff-check-more-gal > p{
    font-weight: 500;
    color: #313C52 !important;
    margin-bottom: 8px;
}
.staff-check-section.more-info h5{
    margin-bottom: 5px;
}
.staff-check-section.more-info > .row:first-child p{
    color: #777777;
}
.staff-check-section.more-info .staff-status-info{
    float: left;
    margin: 12px 0 10px 0 !important;
}
.part-name{
    color: #313C52;
    text-align: center;
    margin-bottom: 5px;
}
.thick-color-status{
    float: none;
    margin: 0 auto;
    display: table;
}
.thick-color-status .tag-status{
    background-color: #2EA013;
    box-shadow: none;
    margin-left: 10px;
}
.thick{
    float: left;
    line-height: 22px;
    color: #11529D;
}
.partBox{
    position: absolute;
}
.partBox.bottom .part-name{
    margin: 5px 0 0 0;
}
.partBox:before{
    content: '';
    width: 1px;
    height: 95px;
    background-color: #777777;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.partBox.top:before{
    top: 65px;
}
.partBox.bottom:before{
    bottom: 65px;
}
.part01{
    top: 12%;
    left: 5%;
}
.part02{
    top: 0;
    left: 45%;
}
.part03{
    top: 12%;
    right: 2%;
}
.part04{
    bottom: 0;
    left: 18%;
}
.part05{
    bottom: 15%;
    left: 32%;
}
.part06{
    bottom: 15%;
    right: 24%;
}
.part07{
    bottom: 0;
    right: 7%;
}
.part08{
    bottom: 0;
    left: 15%;
}
.part09{
    bottom: 15%;
    left: 32%;
}
.part10{
    bottom: 15%;
    right: 24%;
}
.part11{
    bottom: 0;
    right: 7%;
}
.partBox.part03:before{
    height: 70px;
}
.partBox.part04:before, .partBox.part07:before,
.partBox.part08:before, .partBox.part11:before{
    height: 185px;
}
.partBox.part05:before, .partBox.part06:before,
.partBox.part09:before, .partBox.part10:before{
    height: 110px;
}


/* Responsive */

@media (max-width: 1199px){
    /* DETAIL INSPECTION REPORT */
    .inspection-page{
        font-size: 15px;
        padding: 40px 0;
    }
    .inspection-page h2{
        font-size: 28px;
        margin-bottom: 35px;
    }
    .inspection-page h2:after{
        width: 12%;
        max-width: 105px;
        height: 3px;
    }
    .inspection-page h4{
        font-size: 20px;
    }
    .inspection-page h5, .inspection-page h6{
        font-size: 19px;
    }
    .inspection-page hr{
        width: calc(100% - 80px);
        height: 5px;
        margin: 1.8rem auto;
    }
    .car-tag-grade{
        width: 90px;
        height: 90px;
    }
    .car-tag-grade p{
        font-size: 28px;
        line-height: 45px;
        padding-left: 12px;
    }
    .triangle-top{
        border-top: 90px solid #10367B;
        border-right: 90px solid transparent;
        margin-top: -45px;
    }
    .car-infoTB{
        padding: 0 40px;
    }
    .rowTB{
        padding: 20px 0 7px 0;
    }
    .rowTB .row .col-xl-3{
        padding-right: 10px;
    }
    .rowTB .row .col-xl-9{
        padding-left: 0;
    }
    .roddee-check-topic{
        margin-bottom: 15px;
    }
    .roddee-check-topic h5{
        letter-spacing: 0.01rem;
        padding-right: 12px;
    }
    .roddee-checkTag{
        margin-top: 4px;
    }
    .checkpointBox{
        margin: 6px 0;
    }
    .checkpoint-topic{
        margin-bottom: 5px;
    }
    .checkpoint-topic i{
        font-size: 16px;
        margin-right: 8px;
    }
    .manual-booklet li{
        padding: 3px;
    }
    .staff-statusBox{
        margin: 12px 0 10px 0;
    }
    .staff-status-info > li:last-child{
        width: calc(100% - 44px);
        padding-left: 10px;
    }
    .staff-display{
        width: 44px;
        height: 44px;
    }
    .staff-name{
        font-size: 17px;
        letter-spacing: 0.005rem;
    }
    .status-date{
        font-size: 13px;
        padding-left: 6px;
    }
    .staff-position{
        font-size: 12px;
    }
    .staff-position i{
        padding-right: 3px;
    }
    .tag-status{
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0.01rem;
        padding: 0 7px;
    }
    .commentBox h6{
        font-size: 16px !important;
        letter-spacing: 0.01rem;
        margin-bottom: 2px;
    }
    .car-colorBD-Box p{
        margin-bottom: 7px;
    }
    .car-color-section{
        margin-bottom: 55px;
    }
    .car-checklist > li{
        min-height: 410px;
        padding: 16px 4px;
    }
    .car-checklist > li h6{
        font-size: 16px;
        letter-spacing: 0.005rem;
    }
    .car-checklist > li .tag-status{
        line-height: 19px;
        margin: 7px 0 10px 0;
    }
    .car-checklist > li .commentBox{
        margin-top: 9px;
    }
    .car-checklist > li .commentBox h6{
        font-size: 15px !important;
        margin-bottom: 3px;
    }
    .staff-check-more-gal li{
        padding: 3px;
    }
    .staff-check-more-gal > p{
        margin-bottom: 10px;
    }
    .staff-check-section.more-info h5{
        margin-bottom: 3px;
    }
    .staff-check-section.more-info .staff-status-info{
        margin: 10px 0 8px 0 !important;
    }
    
    .part-name{
        margin-bottom: 3px;
    }
    .thick-color-status .tag-status{
        line-height: 19px;
        margin-left: 9px;
    }
    .thick{
        line-height: 19px;
    }
    .partBox.bottom .part-name{
        margin: 3px 0 0 0;
    }
    .partBox:before{
        height: 85px;
    }
    .partBox.top:before{
        top: 55px;
    }
    .partBox.bottom:before{
        bottom: 55px;
    }
    .part04{
        left: 16%;
    }
    .part05{
        left: 30%;
    }
    .part06{
        right: 21%;
    }
    .part07{
        right: 6%;
    }
    .part08{
        left: 14%;
    }
    .part09{
        left: 28%;
    }
    .part10{
        right: 23%;
    }
    .part11{
        right: 6%;
    }
    .partBox.part03:before{
        height: 70px;
    }
    .partBox.part04:before, .partBox.part07:before,
    .partBox.part08:before, .partBox.part11:before{
        height: 165px;
    }
    .partBox.part05:before, .partBox.part06:before,
    .partBox.part09:before, .partBox.part10:before{
        height: 100px;
    }

}

@media (max-width: 991px){
    /* DETAIL INSPECTION REPORT */
    .inspection-page{
        padding: 35px 0;
    }
    .inspection-page h2{
        font-size: 26px;
        padding-bottom: 10px;
        margin-bottom: 28px;
    }
    .inspection-page h2:after{
        max-width: 80px;
    }
    .inspection-page h4{
        font-size: 19px;
        letter-spacing: 0.005rem;
    }
    .inspection-page h5, .inspection-page h6{
        font-size: 17px;
    }
    .inspection-page hr{
        width: calc(100% - 50px);
        height: 4px;
        margin: 1.7rem auto;
    }
    .car-tag-grade{
        width: 80px;
        height: 80px;
    }
    .car-tag-grade p{
        font-size: 26px;
        line-height: 40px;
        padding-left: 10px;
    }
    .triangle-top{
        border-top: 80px solid #10367B;
        border-right: 80px solid transparent;
        margin-top: -40px;
    }
    .job-no-info{
        margin: 12px 0 0 0;
    }
    .job-no-info h5{
        letter-spacing: 0.005rem;
    }
    .car-infoTB{
        padding: 0 25px;
    }
    .rowTB{
        padding: 17px 0 5px 0;
    }
    .rowTB .row .col-xl-3{
        padding-right: 0px;
    }
    .rowTB .row .col-xl-9{
        padding-left: 12px;
    }
    .roddee-check-topic{
        margin-bottom: 12px;
    }
    .roddee-check-topic h5{
        padding-right: 10px;
    }
    .roddee-checkTag{
        height: 19px;
        font-size: 11px;
        line-height: 19px;
        padding: 0 5px;
        margin-top: 4px;
    }
    .roddee-checkTag img{
        height: 12px;
        margin: 3px 4px 0 0;
    }
    .checkpointBox{
        margin: 5px 0;
    }
    .checkpointBox .row .col-md-4{
        padding-right: 0;
    }
    .checkpoint-topic{
        padding-top: 6px;
        margin-bottom: 4px;
    }
    .checkpointBox p{
        margin-bottom: 7px;
    }
    .condition-summary p{
        padding-right: 8px;
    }
    .condition-summary p strong{
        letter-spacing: 0.005rem;
    }
    .tag-grade{
        letter-spacing: 0.01rem;
        margin-top: 3px;
    }
    .manual-booklet li{
        padding: 2px;
    }
    .staff-check-section h5{
        margin-bottom: 8px;
    }
    .staff-statusBox{
        margin: 10px 0 9px 0;
    }
    .tag-status{
        font-size: 12px;
        line-height: 18px;
        padding: 0 6px;
    }
    .commentBox h6{
        font-size: 15px !important;
        letter-spacing: 0.005rem;
    }
    .car-colorBD-Box{
        padding: 9px;
    }
    .car-colorBD-Box p{
        margin-bottom: 6px;
    }
    .car-color-section{
        margin-bottom: 50px;
    }
    .car-checklist > li{
        width: calc(100% / 3);
        min-height: 404px;
        padding: 12px 4px;
    }
    .car-checklist > li h6{
        font-size: 15px;
        margin-bottom: 7px;
    }
    .car-checklist > li .tag-status{
        line-height: 18px;
        margin: 7px 0 8px 0;
    }
    .car-checklist > li .commentBox{
        margin-top: 8px;
    }
    .car-checklist > li .commentBox h6{
        font-size: 15px !important;
        margin-bottom: 2px;
    }
    .staff-check-more-gal li{
        padding: 2px;
    }
    .staff-check-section.more-info h5{
        margin-bottom: 2px;
    }
    .part-name{
        margin-bottom: 2px;
    }
    .thick-color-status .tag-status{
        line-height: 18px;
        margin-left: 9px;
    }
    .thick{
        line-height: 18px;
    }
    .partBox.bottom .part-name{
        margin: 2px 0 0 0;
    }
    .partBox:before{
        height: 120px;
    }
    .partBox.top:before{
        top: 50px;
    }
    .partBox.bottom:before{
        bottom: 50px;
    }
    .partBox.part03:before{
        height: 95px;
    }
    .partBox.part04:before, .partBox.part07:before,
    .partBox.part08:before, .partBox.part11:before{
        height: 210px;
    }
    .partBox.part05:before, .partBox.part06:before,
    .partBox.part09:before, .partBox.part10:before{
        height: 130px;
    }

}

@media (max-width: 767px){
    /* DETAIL INSPECTION REPORT */
    .inspection-page{
        font-size: 14px;
        padding: 30px 0;
    }
    .inspection-page > .container-fluid > .row > .col-12{
        padding: 0;
    }
    .inspection-page h2{
        font-size: 22px;
        margin-bottom: 25px;
    }
    .inspection-page h2:after{
        width: 65px;
        max-width: none;
    }
    .inspection-page h4{
        font-size: 17px;
    }
    .inspection-page h5, .inspection-page h6{
        font-size: 16px;
    }
    .inspection-page h6{
        font-size: 15px;
    }
    .inspection-page hr{
        width: calc(100% - 40px);
        height: 3px;
        margin: 1.5rem auto;
    }
    .car-tag-grade{
        width: 64px;
        height: 64px;
    }
    .car-tag-grade p{
        font-size: 21px;
        font-weight: 500;
        line-height: 32px;
        padding-left: 9px;
    }
    .triangle-top{
        border-top: 64px solid #10367B;
        border-right: 64px solid transparent;
        margin-top: -32px;
    }
    .job-no-info{
        margin: 10px 0 0 0;
    }
    .job-no-info h5{
        font-size: 15px;
    }
    .job-no-info > .row .col-lg-6{
        text-align: center !important;
    }
    .car-infoTB{
        padding: 0;
    }
    .rowTB{
        padding: 14px 0 5px 0;
    }
    .rowTB .row .col-xl-3{
        padding-right: 12px;
    }
    .roddee-check-topic{
        margin-bottom: 0;
    }
    .roddee-check-topic h5{
        width: 100%;
        text-align: center;
        padding-right: 0;
        margin-bottom: 7px;
    }
    .roddee-checkTag{
        float: none;
        margin: 0 auto;
        display: table;
    }
    .condition-checkpoint > .row > .col-6:nth-child(odd){
        padding-right: 7px;
    }
    .condition-checkpoint > .row > .col-6:nth-child(even){
        padding-left: 7px;
    }
    .checkpointBox{
        margin: 4px 0;
    }
    .checkpointBox .row .col-md-4{
        padding-right: 12px;
    }
    .checkpoint-topic{
        font-size: 14px;
        text-align: center;
        padding-top: 0;
        margin-bottom: 2px;
    }
    .checkpoint-topic i{
        font-size: 14px;
        margin-right: 7px;
    }
    .checkpointBox p{
        font-size: 13px;
        text-align: center;
        margin-bottom: 0;
    }
    .condition-summary{
        margin-top: 12px;
    }
    .condition-summary p{
        text-align: center;
        padding-right: 0;
        margin-bottom: 5px;
    }
    .tag-grade{
        float: none;
        margin: 0 auto;
        display: table;
    }
    .staff-check-section h5{
        margin-bottom: 7px;
    }
    .staff-statusBox{
        margin: 9px 0 8px 0;
    }
    .staff-status-info > li:last-child{
        width: calc(100% - 40px);
        padding-left: 9px;
    }
    .staff-display{
        width: 40px;
        height: 40px;
    }
    .staff-name{
        font-size: 15px;
    }
    .status-date{
        font-size: 12px;
        padding-left: 6px;
    }
    .tag-status{
        font-size: 11px;
        line-height: 16px;
        letter-spacing: 0.005rem;
        padding: 0 5px;
    }
    .commentBox h6{
        font-size: 14px !important;
    }
    .car-colorBD-Box{
        padding: 10px 12px;
    }
    .car-colorBD-Box p{
        margin-bottom: 5px;
    }
    .car-color-section{
        margin-bottom: 40px;
    }
    .car-checklist > li{
        width: 50%;
        min-height: 348px;
        padding: 10px 3px;
    }
    .car-checklist > li:nth-child(odd){
        padding-left: 0 !important;
    }
    .car-checklist > li:nth-child(even){
        padding-right: 0 !important;
    }
    .car-checklist > li h6{
        font-size: 14px;
        letter-spacing: 0;
        margin-bottom: 6px;
    }
    .car-checklist > li .tag-status{
        line-height: 15px;
        margin: 7px 0;
    }
    .car-checklist > li .staff-display{
        width: 32px;
        height: 32px;
    }
    .car-checklist > li .staff-status-info > li:last-child{
        width: calc(100% - 32px);
        padding-left: 6px;
    }
    .car-checklist > li .staff-name{
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0;
    }
    .car-checklist > li .status-date{
        padding-left: 4px;
    }
    .car-checklist > li .status-date, .car-checklist > li .staff-position{
        font-size: 11px;
        line-height: 16px;
    }
    .car-checklist > li .staff-position i{
        font-size: 9px;
    }
    .car-checklist > li .commentBox h6{
        font-size: 14px !important;
    }
    .car-checklist > li .commentBox p{
        font-size: 13px;
    }
    .staff-check-section.more-info .staff-status-info{
        margin: 9px 0 7px 0 !important;
    }
    .thick-color-status .tag-status{
        line-height: 16px;
        margin-left: 7px;
    }
    .thick{
        line-height: 16px;
    }
    .partBox{
        font-size: 13px;
    }
    .partBox:before{
        height: 65px;
    }
    .partBox.top:before{
        top: 45px;
    }
    .partBox.bottom:before{
        bottom: 45px;
    }
    .part04{
        left: 13%;
    }
    .part05{
        left: 28%;
    }
    .part06{
        right: 20%;
    }
    .part07{
        right: 5%;
    }
    .part08{
        left: 12%;
    }
    .part09{
        left: 27%;
    }
    .part10{
        right: 20%;
    }
    .part11{
        right: 5%;
    }
    .partBox.part03:before{
        height: 50px;
    }
    .partBox.part04:before, .partBox.part07:before,
    .partBox.part08:before, .partBox.part11:before{
        height: 135px;
    }
    .partBox.part05:before, .partBox.part06:before,
    .partBox.part09:before, .partBox.part10:before{
        height: 80px;
    }

}