@import "custom-variables/variables";
@import "_bootstrap";
@import "layout/header";
@import "layout/footer";
@import "plugins/font-face";
@import "plugins/icomoon";
@import "plugins/slick";
@import "custom/checkbox-radiobutton";
@import "custom/uirangeslider";

html {
    font-size: 100%;
    @include media-breakpoint-down(md) {
        font-size: 87.5% !important;
    }
    @include media-breakpoint-down(sm) {
        font-size: 81.3% !important;
    }
    // @include media-breakpoint-down(xs) {
    //     font-size: 75.6% !important;
    // }
}
body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    html[dir="rtl"] &{
        font-family: $font-family-arabic;text-align: right;
    }
}
.bg-grey{
    background: $tertiary;
}
.top-0{
    top: 0;
}
.right-0{
    html[dir="ltr"] &{right: 0;}
    html[dir="rtl"] &{left: 0;}
}
.bottom-0{
    bottom: 0;
}
.left-0{
    html[dir="ltr"] &{left: 0;}
    html[dir="rtl"] &{right: 0;}
}
.opacity-0{
    opacity: 0;
}
p{
    font-size: 14px;
    font-family: $font-family-secondary;
}
.font-xsmall{
    font-size: 12px;
}
.font-small{
    font-size: 13px;
}
.font-normal{
    font-size: 14px;
}
.f15 {
    font-size: 15px;
}
.font-base{
    font-size: 16px;
}
.font-family-ar{
    font-family: $font-family-arabic !important;
}
.font-family-primary{
    font-family: $font-family-sans-serif !important;
}
.font-family-secondary{
    font-family: $font-family-secondary !important;
}
.dir-ltr{
    direction: ltr !important
}
.dir-rtl{
    direction: rtl !important
}
.cursor-pointer{
    cursor: pointer;
}
.hide{
    display: none !important;
}
.btn-default{
    color: #b2b2b2;
    &:hover, &:focus, &:active{
        color: $primary;
    }
}
a{
    &:hover, &:focus, &:active{
        text-decoration: none;
    }
}
.message_validation {
    color: #d00000;
    font-size: 12px;
    font-family: $font-family-secondary;
    font-weight: $font-weight-bold;
}
.message_success,
.message_error,
.warning {
    border-radius: 4px;
    display: block;
    font-size: rem(16);
    line-height: 1.3;
    margin: 0 0 15px;
    padding: 15px;
    position: relative;
    font-family: $font-family-secondary;
    .close,
    .notifyClose{
        position: absolute;
        right: 15px;
        cursor: pointer;
    }
}

.message_success {
    background-color: #f1ffec;
    border: 1px solid #bde6ad;
    color: #37e300;
}

.message_error {
    background-color: #fbdede;
    color: #eb4848;
    border: 1px solid #ec9494;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
}
.overflow-hidden{
    overflow: hidden;
}
.overflox-x-hidden{
    overflow-x: hidden;
}
.overflox-y-hidden{
    overflow-y: hidden;
}
.text-underline{
    text-decoration: underline;
}
.banner-slider{
    .banner-inner{
        background-size: cover;
        background-position: center center;
    }
    .slider-description{
        top: 10%;
        .container{
            @media (max-width: 1280px) and (min-width: 992px){
                max-width: 860px;
            }
        }
    }
}
.slick-dots{
    padding: 0;
    text-align: center;
    position: absolute;
    bottom: 30px;
    width: 100%;
    li{
        width: 6px;
        height: 6px;
        background: $white;
        border-radius: 50%;
        display: inline-block;
        transform: scale(1);
        transition: transform 0.3s ease-in-out;
        margin: 0 3px;
        &.slick-active{
            transform: scale(1.5);
        }
        button{
            visibility: hidden;
            opacity: 0;
        }
    }
}
.slick-arrow{
    width: 47px;
    height: 47px;
    background: $grey-800;
    color: $white;
    line-height: 47px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    cursor: pointer;
    &.icon-arrow-left{
        left: 10px;
    }
    &.icon-arrow-right{
        right: 10px;
    }
}
.pop_loader{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: $white;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}
.readmore-content-blk{
    p{
        height: 40px;
        overflow: hidden;
        transition: height 0.3s ease-in-out;
        &.auto{
            height: auto;
        }
    }
}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/icon-dropdown.svg);
    background-repeat: no-repeat !important;
    html[dir="ltr"] &{padding-right: 25px;background-position: calc(100% - 9px) center !important;}
    html[dir="rtl"] &{padding-left: 25px;background-position: 9px center !important;}
    &::-ms-expand {
        display: none;
    }
    &.primary{
        background-image: url(../images/icon-dropdown-blue.svg);
    }
}

.tooltip{
    z-index: 99;
    .arrow{
        width: 8px;
        height: 8px;
        border: 1px solid $border-color;
        border-right: 0;
        border-bottom: 0;
        transform-origin: center center;
        position: absolute;
        background: $white;
    }
    &[x-placement="bottom"]{
        padding-top: 4px;
        .arrow{
            transform: rotate(45deg);
            top: 0px;
        }
    }
    &[x-placement="top"]{
        padding-bottom: 4px;
        .arrow{
            transform: rotate(-135deg);
            bottom: 3px;
        }
        .tooltip-inner{
            position: relative;
            bottom: 4px;
        }
    }
    .tooltip-inner{
        border: 1px solid $border-color;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 2px 7px rgba($black, 0.12);
        font-size: 12px;
        color: $grey-800;
        padding: 6px 8px;
        border-radius: 5px;
        max-width: 200px;
        
    }
}

.breadcrumb-block{
    background: $gray-100;
    border-bottom: 1px solid #e3e3e3;
    .breadcrumb{
        .breadcrumb-item{
            color: #a9a9a9;
            a{
                color: #a9a9a9;
            }
            &.active{
                color: $breadcrumb-active-color;
                a{
                    color: $breadcrumb-active-color;
                }
            }
        }
        li {
        display: inline-block;
        + li::before {
            display: inline-block;
            padding-right: .4rem;
            padding-left: .4rem;font-size: 11px;
            color: #a9a9a9;
            content: "\e822";
            font-family: 'icomoon' !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;

              /* Better Font Rendering =========== */
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
        }
        a {
            color: #000;
        }
        &:last-child {
            a {
                color: #000;
            }
        }
    }
    }
}
.main-menu{
    

.mCSB_scrollTools {
    width: 2px;
    .mCSB_dragger {
        .mCSB_dragger_bar {
            background: #b2b4b7;
            width: 2px;
        }
        &:hover .mCSB_dragger_bar {
            background: #b2b4b7;
        }
        &.mCSB_dragger_onDrag .mCSB_dragger_bar {
            background: #b2b4b7;
            width: 2px;
        }
    }
    .mCSB_draggerRail {
        background-color: #f3f3f3;
    }
}

.mCSB_inside {
    & > .mCSB_container {
        margin-right: 15px;
        &:focus{
            outline: 0;
        }
    }
    &:focus{
        outline: 0;
    }
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
    margin-left: 15px;
}
}
.scale-effect{
    overflow: hidden;
    img{
        transform: scale(1);
        transition: all 0.3s ease-in-out;
        &:hover{
            transform: scale(1.05);
        }
    }
}

a.findmore-btn, .hover-clr-primary, a.hover-clr-primary{
    transition: color 0.3s ease-in-out;
    &:hover{
        color: $primary !important;
        i{
            color: $primary !important;
        }
    }
}

.form-control:disabled, .form-control[readonly], input[readonly]{
    background: $input-disabled-bg;
}

.slick-slide { -webkit-transform: translate3d(0,0,0); }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

[class*="btn-"]{
    &:focus, &:active{
        box-shadow: none !important;
        &:active{
            box-shadow: none !important;
        }
    }
}

.payment-thanks-sec{
    .payment-inner-blk{
        @include media-breakpoint-down(sm) {
            // background-color: transparent;
            h3{
                font-size: 18px;
            }
            figure{
                img{
                    transform: scale(1.2);
                    top: -15px;
                }
            }
        }
    }
}

.btn-progress, .disabled{
    pointer-events: none;
    opacity: 0.8;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    animation: progress 2s linear infinite;
}
@keyframes progress{
    0% {
        background-position: 40px 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-webkit-keyframes progress{
    0% {
        background-position: 40px 0;
    }
    100% {
        background-position: 0 0;
    }
}

.body-fix{
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

.errorpage{
    h2{
        font-size: rem(125);
    }
    h4{
        font-size: rem(30);
        color: rgba(#212529, 0.7);
    }
    p{
        font-size: 15px;
        color: #7a7979;
    }
}
// .tooltip .arrow{display: none!important}

.mndty{
    color: #ff0000;
}

