@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";

.f-30 {
    font-size: rem(30);
}

.about-bottom-address {
    h5 {
        font-size: 26px;
    }
    p {
        margin: 4px 0;
    }
}

.btn-outline-primary {
    border-width: 2px;
    padding: 10px 15px;
}

.f-13 {
    font-size: 13px;
}

.contact-content {
    h4 {
        color: #010a14;
        font-size: rem(22);
        margin-bottom: 33px;
    }
    .form-control {
        height: 43px !important;
    }
    .textarea01 {
        height: 103px !important;

    }

    label {
        color: #919191;
        font-size: 14px;
        font-weight: 500;
        .mndty{
            color: #ff0000;
        }
    }
    .form-group {
        margin-bottom: 13px;
    }
}

.location-contact {
    .left-brd {
        position: relative;
        font-size: 14px;
        color: #262626;
        html[dir="ltr"] & {padding-left: 45px;}
        html[dir="rtl"] & {padding-right: 45px;}
        &:before {
            content: "";
            width: 1px;
            height: 100%;
            background: #ddd;
            display: inline-block;
            position: absolute;
            html[dir="ltr"] & {left: 29px;}
            html[dir="rtl"] & {right: 29px;}
        }
    }
    i {
        position: absolute;
        top: 50%;
        font-size: 18px;
        transform: translate(0, -50%);
        html[dir="ltr"] & {left: 13px;}
        html[dir="rtl"] & {right: 13px;}
    }
}

.socila-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    color: $white;
    padding-top: 4px;
    margin-left: 7px;
    cursor: pointer;
    i{
        font-size: 0;
        &:before{
            font-size: 17px;
            line-height: 22px;
        }
    }
    &.fb {
        background: #3a5897;
    }
    &.tw {
        background: #54aced;
    }
    &.in {
        background: #0079b8;
    }
    &.ytb {
        background: #d32328;
    }
}

.branch-block {
    color: #262626;
    h5 {
        color: #262626;
        font-weight: 600;
        font-size: 16px;
    }
    span {
        padding-bottom: 5px;
    }
    i {
        color: #999da1;
        vertical-align: middle;
        font-size: 0;
        html[dir="ltr"] & {margin-right: 10px;}
        html[dir="rtl"] & {margin-left: 10px;}
        &:before{
            font-size: 17px;
        }
    }
    a {
        color: #262626;
    }
}

.contevt-block-cooky {
    h4 {
        font-size: rem(20);
        color: #262626;
        font-weight: 600;
        margin: 36px 0 12px;
    }
    p,
    span,
    li {
        font-size: 15px;
    }
}

@include media-breakpoint-down(sm) {
    .btn-blk {
        .btn {
            width: 100%;
        }
    }
}

.test-drive-form {
    @include media-breakpoint-up(lg) {
        background: url('../images/test-drive-bg.jpg');
        background-size: cover;
        background-position: bottom right;
    }
    .drive_form {
        max-width: 480px;
        width: 100%;
        .h3 {
            font-size: rem(30);
        }
    }
}

.special-offer-banner {
    .content {
        top: 0;
        left: 0;
        h1 {
            font-size: rem(46);
        }
        h4 {
            line-height: rem(28);
        }
        @include media-breakpoint-down(sm) {
            h1 {
                font-size: rem(39);
            }
            h4 {
                font-size: rem(21);
            }
        }
    }
    img {
        min-height: 200px;
        object-fit: cover;
        max-height: 600px;
        width: 100%;
    }
}

.special-offers-list {
    font-size: 14px;
    .loadMore {
        a {
            color: #929292;
        }
    }
    p {
        line-height: 18px;
    }
}


.text-dark-grey{
    color: #010a14;
}
.text-muted-light{
    color: #808489;
}
.nearest-map-block{
    img{
        width: 100%;
    }
}
.nearestshowroom-block{
    height: 570px;
    overflow: hidden;
    @include media-breakpoint-down(sm) {
       height: auto;overflow:auto;
    }
    .nearest-shoroom-listing{
        height: 557px;
        overflow: auto;
        margin: 0;
        padding-bottom: 60px;
        font-weight: $font-weight-light;
         @include media-breakpoint-down(sm) {
       height: auto;overflow:auto;
       padding-bottom: 0;
    }
    li{
        &:hover{
            background: #f7f7f7;
        }
    }
    .mCSB_scrollTools{
        width: 4px;
        html[dir="rtl"] &{
            left: 0;
            right: auto;
        }
    }
    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 5px;}
    .mCSB_scrollTools .mCSB_draggerRail{
        width: 4px;
        background-color: #e6e6e6;
    }
    .mCSB_scrollTools .mCSB_dragger{
        height: 168px !important;
    }
    .mCSB_container{margin-right: 0 !important;margin-left: 0 !important;}
    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
        background-color: #5f5f5f !important;
        border-radius: 0;
    }
} 
}
.request-services{
    .form-block{
        max-width: 829px;
        width: 100%;
        label{
            font-size: 16px;
            font-weight: 600;
            @include media-breakpoint-down(sm) {
               padding-top: 10px;
            }
        }
    }
    .service-section{
        @include media-breakpoint-down(sm) {
            padding: 0 12px;
        }
        h6{
            font-size: 16px;
        }
        .f-45{font-size: rem(45) !important;}
        .check-list{
            color: #7b7b7b;
            height: 58px;
            border: 2px solid #e9e9e9!important;
            span{font-size: 16px;font-size: 14px;line-height: 16px;  @include media-breakpoint-down(sm) {font-size: 10px;}}
            .icon-rear-brake-pad span{ font-size: rem(38);color: #9f9f9f;}
            i{
              font-size: rem(38);
              vertical-align: middle;
              color: #9f9f9f;
            }
            input[type=checkbox]+label:before{
                opacity: 0;
            }
         &.active{
            color: $primary;
            border: solid 2px $black !important;
            input[type=checkbox]+label:before{opacity: 1;}
            i{
                color: $black;
                &:before{color: $black;}
            }
             .icon-rear-brake-pad .path3:before,.icon-rear-brake-pad .path1:before{color: $black;}
             span{color: $black;}
         }
         input[type=checkbox]+label:before{background: $black;}
         input[type=checkbox]+label:after{
                border-bottom: $white 2px solid;
                border-right: $white 2px solid;
         }
        }
        .check-label{position: absolute;right: 5px;top: 0;margin: 0;pointer-events: none;}
        textarea{
            height: 107px;

        }
        .btn{font-size: 13px;}
    }
    .form-group{
    @include media-breakpoint-down(sm) {
        margin-bottom: 0;
    }
}
.datepicker{background: url(../images/datepicker.jpg) no-repeat;background-position: center right 3px;}
}

html[dir="rtl"] {
    .list-unstyled {
        padding-right: 0;
    }
    .btn-blk {
        @include media-breakpoint-down(sm) {
            float: none !important;
        }
    }
    .nearest-shoroom-listing{
    .icon-phone-receiver,.icon-close-envelope{
        float: right;
    }
}
.request-services .datepicker{background-position: center left 3px;}
.request-services .service-section .check-label{left: 3px;right: inherit;}
}
.ui-state-disabled{
    color: #979393 !important; 
}