// Header
header {
    &.sign{
        padding: 3vh 0;

        .container-fluid {
            max-width: 1440px;

            @media (max-width: 1540px) {
                max-width: 1200px;
            }
        }
        h1{
            @include mqx(t){
                text-align: center;
            }
        }
        a{
            width: 150px;

            @include mqx(t){
                width: 110px;
            }
        }
    }
    .container-fluid {
        max-width: 1600px;
    }
    &.home{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
    }
    .navbar {
        border: none;
        margin-bottom: 0;
        background: transparent;

        @media (max-width: 1200px) {
            .container {
                width: 100%;
            }
        }
        .nav-con {
            padding: 20px 0;
            @include cfx();
        }
        .navbar-header {
            @media (min-width: $tablet) {
                display: inline-block;
            }
        }
        .navbar-brand {
            width: 228px;
            height: auto;
            padding: 20px 15px;

            img {
                max-width: 100%;
            }
            @media (max-width: $tablet) {
                float: none;
                margin: 0 auto;
                display: block;
                width: 200px;

                img {
                    margin: 0 auto;
                }
            }
        }
        .navbar-toggle {
            border: none;
            padding: 10px 0;
            float: left;
            margin-left: 15px;

            @include mqx(x){
                margin-left: 0;
            }
            &:focus,
            &:hover {
                background: transparent;
            }
            &[aria-expanded=true] {
                .icon-bar {
                    &:nth-of-type(2) {
                        transform: translateY(12px) rotate(45deg);
                    }
                    &:nth-of-type(3) {
                        opacity: 0;
                    }
                    &:nth-of-type(4) {
                        transform: translateY(-8px) rotate(-45deg);
                    }
                }
            }
            .icon-bar {
                background: #333;
                width: 35px;
                @include trans(.2s);

                + .icon-bar {
                    margin-top: 8px;
                }
            }
        }
        .navbar-collapse {
            padding: 0;

            @include mqx(t) {
                width: 100%;
            }
        }
        .main-nav {
            &.username{
                height: 63px;

                @include mqx(t){
                    float: right;
                    margin-top: -60px;
                    display: flex;
                    width: auto;
                    padding: 0;
                    background: transparent;
                }

                .dropdown-menu{
                    @include mqx(t){
                        position: absolute;
                        background: #fff;
                        right: 10px;
                        left: initial;
                        box-shadow: 0 0 10px rgba(0,0,0,.2);
                    }
                    li{
                        a{
                            font-size: 13px;

                            @include mqx(t){
                                padding: 5px 15px 5px 15px;
                            }
                            img{
                                position: relative;
                                top: -2px;
                            }
                        }
                    }
                }
            }
            @include display_flex;
            @include flex_align_items(center);
            @include flex_justify_content(flex-start);
            margin: 0;

            @include mqx(t) {
                margin: 0;
                display: block;
                width: 100%;
                text-align: center;
                padding: 10px 0;
                background: #fff;

                .navbar-btn{
                    float: none !important;
                }
                li {
                    float: none !important;
                }
            }
            li {
                &.divider{
                    @media (min-width: 846px) {
                        width: 3px;
                        height: 29px;
                        background: $primaryColor;
                        margin: 0 10px;
                    }
                }
                &.dropdown{
                    background: transparent;

                    &.open {
                        a {
                            background: transparent;

                            &:hover,
                            &:focus{
                                background: transparent;
                            }
                        }
                    }
                }
                &.cart-dropdown {
                    float: left;
                    @media (max-width: 400px) {
                        margin: 0;
                    }
                    a{
                        font-size: 16px;
                        color: $secondaryColor;
                    }
                    &.has-items {
                        position: relative;

                        &:after{
                            content: '\f111';
                            position: absolute;
                            right: 15px;
                            top: 15px;
                            z-index: 1;
                            font-size: 10px;
                            font-family: "Font Awesome 5 Free";
                            font-weight: bold;
                            color: #e14b60;

                            @media (max-width: 1170px) {
                                right: 5px;
                            }
                        }
                    }
                }
                a {
                    background: transparent;
                    color: $secondaryColor;
                    font-size: 15px;
                    padding: 10px 20px;

                    @media (max-width: 1170px) {
                        padding: 15px 10px;
                    }
                    @media (max-width: 985px) {
                        padding: 10px;
                    }
                    &:hover {
                        color: $linkHover;
                    }
                }
                &.active {
                    a {
                        font-weight: 700;

                        &:hover {
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
}

// Hero IMG
.hero-img {
    height: 450px;
    width: 100%;
    position: relative;

    @include mqx(t){
        height: 270px;
    }
    &.half{
        @include mqx(t){
            .row{
                position: absolute;
                width: 100%;
                left: 15px;
                bottom: 0;

                .col-sm-4{
                    padding: 0;
                }
            }
        }
        .hero-con{
            margin-top: 100px;

            @include mqx(t){
                background: #000;
                padding: 5px;
            }
        }
        .hero-text {
            @include mqx(t){
                padding-left: 15px;
                text-align: left !important;
                width: 100%;

                p{
                    text-align: left !important;

                    @include mqx(t){
                        color: #fff !important;
                    }
                }
            }
            width: 268px !important;

            h2 {
                font: 800 50px/1.2 $primaryFont;
                padding-bottom: 38px;

                @include mqx(t){
                    border-bottom: 5px solid #fff;
                    padding-bottom: 15px;
                    color: #fff;
                    margin-bottom: 10px;
                }
            }
            hr{
                background-color: $secondaryColor;
                margin-top: 0;
                @include mqx(t){
                    display: none;
                }
            }
        }
    }
    &.home{
        // padding: 18vh 0;   // 120px 0
        height: auto;
        transform: scaleX(1) #{"/*rtl:scaleX(-1)*/"};

        @include mqn(t){
            min-height: 100vh;
        }
        .container > .row{
            transform: scaleX(1) #{"/*rtl:scaleX(-1)*/"};
        }
        .hero-con{
            margin-top: 80px;
        }
    }
    .hero-con{
        @include cfx;

        .logo-center{
            width: 35%;

            @include mqx(t){
                margin: 0 auto 15px;
                text-align: center;
                float: none !important;
            }
        }
        .hero-text {
            @include mqx(t){
                width: 100%;
                text-align: center;
            }
            width: 60%;
            text-align: left;
            display: block;
            color: $secondaryColor;
            position: relative;
            margin: 5px 0;

            h2 {
                font: 800 40px/1.2 $primaryFont;

                @include mqx(t) {
                    font-size: 27px;
                }
            }
            p {
                color: $secondaryColor;
                font: 22px/1.4 $primaryFont;

                @include mqx(t) {
                    font-size: 18px;
                    text-align: center;
                }
            }
            //&.hero-black {
            //    h2, p {
            //        color: #696969;
            //    }
            //    .btn-green {
            //        display: inline-block;
            //    }
            //}
        }
    }
    .search{
        background: $primaryColor;
    }
}

.search{
    padding: 40px 50px;
    background: #f5f5f5;

    @include mqx(m){
        padding: 30px;
    }
    &.tab-head{
        padding: 40px 50px 0 50px;

        .nav-tabs{
            border-bottom: 0;
        }
    }
    h3{
        font-size: 30px;
        font-weight: 800;
        color: #000000;
    }
    form{
        @include cfx;

        input{
            border: 3px solid $secondaryColor;
        }
        button{
            width: 100%;
            border-radius: 5px;
            color: #fff;
            border: solid 3px $secondaryColor;
            background-color: $secondaryColor;
            font-size: 15px;

            &:hover{
                background-color: $linkHover;
                border: solid 3px $linkHover;
            }
            @include mqx(t){
                margin-top: 15px;
            }
        }
    }

}
.fitness-img{
    overflow: hidden;

    &:hover{
        .fitness-co{
            top: 0;
        }
    }
    .fitness-co{
        height: 50vh;
        position: absolute;
        width: 100%;
        left: 0;
        top: 51vh;
        @include trans(.4s);
    }
}

.fitness-title{
    width: 280px;
    margin: 0 auto;

    h3{
        color: $secondaryColor;
        font-size: 70px;

        @include mqn(t){

        }
    }
    hr{
        background: $secondaryColor;
    }
    p{
        text-align: right;
    }
}

.story{
    background: #d4ddff;
    @include mqn(t){
        // padding: 30vh 0;  //  150px 0

        .container{
            min-height: 100vh;
            @include flex_align_items(center);
            @include flex_justify_content(flex-start);
            @include display_flex();
        }
    }
    &.half{
        background: #fff;

        @include mqn(t){
            padding: 60px 0;
        }
    }

    h2{
        font-size: 30px;
        border-color: #6366ee;
    }
    p{
        font-size: 20px;
    }
}
.app{
    padding-bottom: 0;

    //@include mqn(t) {
    //    min-height: 100vh;
    //    max-height: 100vh;
    //}
}
.app-slider{
    height: 500px;

    @include mqx(d) {
        height: 400px;
    }
    @include mqx(l) {
        height: 330px;
    }
    @include mqx(t) {
        height: auto;
    }
    .item{
        outline: 0;

        h3{
            font-size: 60px;
        }
        p{
            font-size: 30px;
        }

        @include mqx(d){
            h3{
                font-size: 40px;
            }
            p{
                font-size: 25px;
            }
        }
    }
}
.slick-dots{
    text-align: left;

    li {
        &.slick-active{
            button{
                &:before{
                    color: $primaryColor;
                }
            }
        }
        button{
            &:before{
                font-size: 19px;
                color: #d9dacb;
                opacity: 1;
            }
        }
    }
}
.download{
    margin-top: 70px;

    a{
        @include mqx(t){
            margin-bottom: 10px;
            display: block;
        }
    }
}
.fitness{
    @include mqn(t){
        min-height: 100vh;
        max-height: 100vh;
    }
    .container-fluid{
        max-width: initial;
    }
    .hero-img{
        height: 50vh;
    }
}
.join{
    @include mqx(t){
        background-image: none !important;
    }
    @include mqn(t){
        padding: 0;

        .container-fluid{
            min-height: 100vh;
            max-height: 100vh;
            @include flex_align_items(center);
            @include flex_justify_content(flex-start);
            @include display_flex();
        }
    }
    .fitness-co{
        background: #53dbf1;
        height: auto;
        padding: 80px 0;
    }
    .fitness-title{
        width: 70%;

        h3{
            font-size: 50px;
        }
        p{
            text-align: left;
            font-size: 20px;
        }
        @include mqx(d){
            h3{
                font-size: 30px;
            }
            p{
                font-size: 16px;
            }
        }
    }
}
.sign{
    padding: 3vh 0;

    .container-fluid {
        @media (max-width: 1540px) {
            max-width: 1200px;
        }
    }
}
// Footer
footer {
    padding: 50px 0;
    background: #f5f5f5;

    &.sign{
        background: transparent;
        padding: 10px 0;

        p{
            @include mqx(t){
                text-align: center;
            }
        }
        .container-fluid {
            max-width: 1440px;
        }
        .container-fluid {
            @media (max-width: 1540px) {
                max-width: 1200px;
            }
        }
    }
    .container-fluid {
        max-width: 1600px;
    }
    .quick-links{
        a{
            font-size: 16px;
            color: $secondaryColor;
            padding: 3px 0;
            display: block;
        }
        &.social{
            h3{
                font-size: 18px;
            }
            a{
                display: block;
            }
            p{

            }
        }
    }
}
.care-square{
    figure{
        height: 510px;
        position: relative;


        figcaption{
            position: absolute;
            padding: 50px;
            bottom: 0;
            left: 0;

            h3{
                font-size: 35px;
                color: $secondaryColor;
            }
            hr{
                background-color: $secondaryColor;
                margin: 38px 0 20px;
            }
            p{
                font-size: 20px;
            }
        }
    }
    @include mqx(t){
        margin-bottom: 20px;

        figure{
            height: 290px;
        }
    }
}
.download-app{
    background-color: $primaryColor;

    &.download-contact{
        padding: 100px 60px;

        @include mqx(t) {
            margin-top: 30px;
            padding: 20px;
        }
        .download{
            margin-top: 30px;

            @include mqx(t){
                text-align: center;
                margin-top: 20px;

                a{
                    margin-top: 15px;

                    &:first-child{
                        margin-top: 0;

                    }
                }
            }
        }
    }
    .download-app-co{
        @include mqx(l) {
            margin-top: 20px;
        }
    }
    h3{
        font-size: 35px;
    }
    p{
        font-size: 20px;
    }
    .download{
        margin-top: 17px;

        @include mqx(l){
            margin-top: 0;
            text-align: right;

            a{
                display: block;
                margin: 0 0 15px;

                //&:last-child{
                //    margin: 0;
                //}
            }
        }
        @include mqx(t){
            text-align: left;

            a{
                display: inline-block;
                margin: 20px 0 0 0;
            }
        }
    }
}
aside{
    ul{
        background-color: #f5f5f5;
        padding: 25px 35px;
        border-radius: 5px;

        li{
            padding: 15px;
            border-top: 1px solid #e0e0e0;

            &:first-child,
            &:nth-child(2)  {
                border-top: 0;
            }
            a{
                color: $secondaryColor;

                &:hover,
                &:focus{
                    font-weight: bold;
                    color: $secondaryColor;
                }
            }
            &.active{
                a{
                    font-weight: bold;
                }
            }
        }
    }
    .filter{
        @include mqx(t){
            display: none;
        }
        ul{
            padding: 0;
            background: none;
        }
        label{
            color: $secondaryColor;
        }
        .checkbox-custom .form-radio{
            top: 3px;
        }
    }
}
.radio-custom{
    input{

    }
}
.content{
    @include mqx(t){
        margin-top: 15px;
    }
    .block{
        margin-bottom: 40px;
    }
    h3{
        margin: 0 0 15px 0;
        font-size: 22px;
        font-weight: bold;
    }
    p{
        font-size: 16px;
        margin-bottom: 20px;
    }
    ol{
        padding-inline-start: 18px;
        margin-bottom: 20px;
    }
    .panel-item{
        border-bottom: solid 2px #e0e0e0;
    }
    .panel-body{
        padding: 0;

        .panel-collapse{
            padding: 15px 0;
        }
    }
}
.doctor-form{
    margin-top: 100px;

    .btn-black{
        min-width: 200px;
    }
}
.contact-method{
    padding: 0 50px;

    @include mqx(t){
        margin-bottom: 30px;
    }
    h3{
        font-size: 35px;
        color: $secondaryColor;

        @include mqx(t){
            font-size: 25px;
        }
    }
    p{
        font-size: 20px;

        @include mqx(t){
            font-size: 16px;
        }
    }
    .btn{
        min-width: 180px;
    }
}
.network{
    .btn{
        min-width: 300px;
    }
}
.faq{
    .page-title{
        font-size: 60px;
        border-color: $primaryColor;
        margin-bottom: 70px;

        @include mqx(t){
            font-size: 30px;
            margin-bottom: 25px;
        }
    }
}
.sign-block{
    padding: 50px 70px;
    background: rgba(255,255,255,0.65);
    border-radius: 5px;

    @include mqx(t){
        padding: 20px;
    }
    &.verify{
        background: #f5f5f5;
        border: 2px solid #e0e0e0;

        img{
            max-width: 70px;
        }
        p{
            font-size: 20px;
        }
    }
    form{
        span{
            font-size: 14px;
        }
        .checkbox-custom{
            @include mqx(t){
                margin-top: 14px;
            }
            label{
                font-size: 14px;
                position: relative;
                top: 6px;
                width: 89%;
            }
            .form-radio{
                vertical-align: top;
            }
        }
        a{
            color: $secondaryColor;
            text-decoration: underline;
            font-size: 14px;
        }
        p{
            font-size: 14px !important;
            font-weight: normal;
        }
    }
}
.ui-widget.ui-widget-content{
    z-index: 99 !important;
}
.theme-dropdown{
    position: static !important;

    .dropdown-menu{
        margin: 20px auto !important;
        position: absolute;
        z-index: 9999999;
        top: auto;
        border: none;
        max-width: 1440px;
        width: 100vw;
        background: #fff;
        -webkit-box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0,0,0,.05);
        box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0,0,0,.05);
        padding: 35px 25px;
        right: 0;
        left: 0;
    }
}
.mega-menu{
    h3{
        font-size: 18px;
    }
    a{
        display: block;
        font-size: 14px;
        padding: 5px 0 5px!important;
    }
    .row{
        .col-sm-2{
            &:first-child{
                h3{
                    border-color: #ffde00;
                }
            }
            &:nth-child(2){
                h3{
                    border-color: #8991f0;
                }
            }
            &:nth-child(3){
                h3{
                    border-color: #53dbf1;
                }
            }
            &:nth-child(4){
                h3{
                    border-color: #fea100;
                }
            }
            &:nth-child(5){
                h3{
                    border-color: #f9889f;
                }
            }
            &:nth-child(6){
                h3{
                    border-color: #00a5cf;
                }
            }
        }
    }
}
.blocks-con{
    margin-right: -15px;
    margin-left: -15px;
    @include cfx;

    img{
        border-radius: 5px;
    }
    @include mqn(m){
        > div{
            float: left;
        }
    }
    .v-block{
        @include mqn(m){
            width: 37%;
        }
        @include mqx(m){
            margin-bottom: 15px;
        }
        padding: 0 15px;
    }
    .h-block{
        @include mqn(m){
            width: 63%;
        }
        padding: 0 15px;

        a{
            &:first-child{
                margin-bottom: 27px;

                @include mqx(d){
                    margin-bottom: 20px;
                }
                @include mqx(l){
                    margin-bottom: 10px;
                }
                @include mqx(m){
                    margin-bottom: 15px;
                }
            }
        }
    }
}
.section-title{
    @include cfx;

    h2{
        font-size: 22px;
        letter-spacing: 1.2px;

        @include mqx(t){
            margin-bottom: 15px;
        }
    }
    a{
        color: $secondaryColor;

        @include mqx(t){
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        img{
            width: 20px
        }
    }
}
.doctor-card{
    outline: 0;

    .doctor-img{
        height: 230px;
        position: relative;
        @extend .border-gray;


        .rating{
            position: absolute;
            right: 10px;
            top: 10px;
        }
    }
    .doctor-info{
        h3{
            font-size: 18px;

            a{
                color: $secondaryColor;

                &:hover,
                &:focus{
                    color: $linkHover;
                }
            }
        }
        p{
            font-size: 14px;
            direction: ltr;
        }
    }
    .btn-outline{
        &:hover,
        &:focus{
            background: $purple;
            border: 2px solid $purple;
        }
    }
}
.rating{
    background: #53dbf1;
    line-height: 43px;
    padding: 0 10px;
    border-radius: 50%;
    color: $secondaryColor;

    &:hover,
    &:focus{
        color: $secondaryColor;
    }
}
.slick-next, .slick-prev{
    bottom: -13%;
    top: initial;
    width: 30px;
    height: 30px;
    z-index: 9999;
    
    &:before{
        visibility: hidden;
    }
}
.slick-prev{
    left: 10px;
}
.slick-next{
    right: 10px;
}

a.service-card{
    color: $secondaryColor;

    &:hover,
    &:focus{
        color: $linkHover;
    }
}
.product-card{
    .btn-outline{
        &:hover,
        &:focus{
            background: #ff7800;
            border: 2px solid #ff7800;
        }
    }
    .product-img{
        position: relative;
        border: 2px solid #e0e0e0;

        &:before{
            display: block;
            content: "";
            width: 100%;
            padding-top: 100%;
        }
        img{
            position: absolute;
            display: block;
            max-width: 150px;
            max-height: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: auto;
            margin: auto;
        }
    }
    .product-info{
        .price{
            font-size: 20px;

            sub{
                font-size: 14px;
                color:#979797;
                text-decoration: line-through;
                font-weight: normal;
            }
        }
    }
}
.brand-slider{
    margin-bottom: 60px;

    .brand-name{
        .vcenter{
            height: 150px;
        }
        img{
            max-width: 200px;
            max-height: 150px;
            margin: 0 auto;
        }
    }
    .slick-next, .slick-prev{
        bottom: -43%;
    }
}
.li-product{
    .li-content{
        p{
            font-size: 14px;
            @include multiLineEllipsis(1.6em, 3);
        }
    }
    .product-img{
        position: relative;
        width: 100%;
        border-radius: 5px;
        border: 2px solid #e0e0e0;
        background: #fff;
        max-height: 230px;

        &:before {
            display: block;
            content: "";
            width: 100%;
            padding-top: 100%;
        }
        img {
            position: absolute;
            display: block;
            max-width: 200px;
            max-height: 100%;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            width: auto;
            margin: auto;
        }
    }
    .price{
        span{
            font-size: 25px;
            color: $orange;

            &:last-of-type{
                color: #bdbdbd;
                text-decoration: line-through;
                font-size: 14px;
            }
        }
    }
}
.doctor-li{
    padding: 20px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    position: relative;

    .li-img{
        @extend .border-gray;
    }
    .slider{
        border-bottom: 1px solid #e0e0e0;
    }
}
.doctors{
    .doctor-li{
        .li-head{
            @include mqn(l){
                .col-sm-3{
                    width: 20%;
                }
                .col-sm-9{
                    width: 80%;
                }
            }
        }
    }
}
.li-head{
    border-bottom: 1px solid #e0e0e0;

    .li-img{
        height: 200px;

        .rating{
            position: absolute;
            right: 25px;
            top: 25px;
            font-size: 16px;
        }
    }
    img{
        width: 25px;
        position: relative;
        top: -3px;
    }
    .li-content{
        @include mqx(t){
            margin-top: 20px;
        }
        h3{
            line-height: 1.4;

            a{
                color: $secondaryColor;

                &:hover,
                &:focus{
                    color: lighten($secondaryColor, 15%);
                }
            }
        }
        p{
            font-size: 18px;


            @include mqx(t){
                padding-right: 160px;
            }
            @include mqx(m){
                padding-right: 0;
            }

            &.desc{
                font-size: 16px;
            }
        }
        .price{
            font-size: 20px;

            @include mqx(m){
                float: none !important;
                margin-bottom: 15px;
            }
        }
        .li-data{
            @include mqx(m){
                float: none !important;
                text-align: left;
            }
        }
    }
    .distance{
        font-size: 20px;
    }
    .rating{
        padding: 11px;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        line-height: 1.4;
        margin-top: -10px;
    }
}
.services-slider{
    position: relative;

    &:after,
    &:before{
        content: "";
        background: #FAFAFA;
        position: absolute;
        top: 0;
        height: 100%;
        width: 12%;
        z-index: 100;
    }
    &:after{
        right: -10px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fafafa 100%);
    }
    &:before{
        left: -10px;
        background: linear-gradient(to right, #fafafa 0%, rgba(255, 255, 255, 0) 100%);
    }
}
.doctor-service{
    background: #fff;
    border: 2px solid #e6e6e6;
    padding: 20px;
    margin: 10px;
    outline: 0;
    cursor: pointer;

    .service-head{
        @include cfx;

        h4{
            width: 77%;
            line-height: 1.4;
        }
    }
    .service-price{
        span:last-of-type{
            color: #8f8f8f;
            text-decoration: line-through;
        }
    }

    &.active{
        border-color: #8991f0;

        h4{
            color: #8991f0;
        }
        .service-price{
            span:first-child{
                color: #8991f0;
            }
        }
    }
}
.btn-actions{
    @include mqx(m){
        margin-bottom: 15px;
    }
    a{
        color: $secondaryColor;

        @include mqx(t){
            //margin-left: 20px;
        }
        img{
            width: 25px;
        }
        &:first-child{
            img{
                width: 20px;
            }
        }
        &:nth-child(2){
            img{
                width: 22px;
            }
        }
    }
}

.tab-head{
    background: #f5f5f5;

    .nav{
        li{
            width: 33.333%;

            &.active{
                a{
                    background: transparent;
                    border: none;
                    border-bottom: 8px solid $secondaryColor;
                    font-weight: bold;

                    &:hover,
                    &:focus{
                        color: $secondaryColor;
                    }
                }
            }
            a{
                padding: 15px 25px;
                font-size: 20px;
                letter-spacing: 1.2px;
                border-bottom: 8px solid transparent;
                color: $secondaryColor;

                @include mqx(m){
                    font-size: 14px;
                    padding: 13px;
                }
                &:hover,
                &:focus{
                    border-bottom: 8px solid $secondaryColor;
                    font-weight: bold;
                    background: transparent;
                    border-color: transparent transparent #000;
                }
            }
        }
    }
}

.range-container{
    margin-top: 30px;

    .rank-values{
        @include cfx;
        position: relative;
        top: -15px;
    }
    .ui-slider-horizontal{
        height: 8px;
    }
    .ui-widget-content,
    .ui-widget-header{
        background-color: #d4ddff;
        border-color: #d4ddff;
    }
    .ui-state-default, .ui-widget-content .ui-state-default {
        border-radius: 50%;
        width: 1.6em;
        height: 1.6em;
        outline: 0;
        top: -.62em;
        background-color: #fff;
        border: 8px solid $purple;
    }
    .ui-state-active, .ui-widget-active .ui-state-active {
        border: 10px solid lighten($purple, 15%);
    }
    .value {
        position: absolute;
        top: -55px;
        left: 50%;
        margin: 0 0 0 -20px;
        width: 40px;
        text-align: center;
        display: block;
        font-size: 14px;
        color: $secondaryColor;
    }

    .price-range-both.value {
        width: 131px;
        margin: 0 0 0 -70px;
        top: 26px;
    }

    .price-range-both {
        display: none;
    }

    .value i {
        font-style: normal;
    }

    &.orange{
        .ui-widget-content,
        .ui-widget-header{
            background-color: #ffe7b9;
            border-color: #ffe7b9;
        }
        .ui-state-default, .ui-widget-content .ui-state-default {
            border: 8px solid #ff7800;
        }
        .ui-state-active, .ui-widget-active .ui-state-active {
            border: 10px solid lighten(#ff7800, 15%);
        }
    }
}

.media-img{
    height: 250px;
}
.media-content{
    @include mqx(t){
        margin-top: 15px;
    }
    h3{
        line-height: 1.3;

        a{
            color: $secondaryColor;

            &:hover,
            &:focus{
                color: $linkHover;
            }
        }
    }
    span{
        font-size: 13px;
        color: #959595;
    }
    p{
        font-size: 14px;
    }
}

.item-slider{
    border: 2px solid #e0e0e0;
    border-radius: 5px;

    .item-slide{
        outline: 0;

        .item-img{
            margin: 0 auto;
            padding: 0 2em;
            min-width: 480px;
            height: 550px;

            @media (max-width: 500px) {
                min-width: 200px;
                height: 290px;
            }
        }
        img{
            margin: 0 auto;
            max-width: 400px;
            
            @media (max-width: 500px) {
                max-width: 200px;
            }
        }
    }
}
.item-thumb{
    .thumb-slide{
        border: 2px solid #e0e0e0;
        padding: 10px;
        outline: 0;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 5px;
    }
    .slick-track{
        margin-left: initial;
        margin-right: initial;
    }
}
.item-content{
    .bb{
        border-bottom: 1px solid #e5e5e5 ;
    }
    h3{
        font-size: 27px;
    }
    .price{
        span{
            color: $orange;
            font-size: 35px;

            sub{
                font-size: 20px;
            }

            &:last-of-type{
                font-size: 18px;
                color: #bdbdbd;
                text-decoration: line-through;
            }
        }
    }
}
.qty{
    .qty-content{
        @include cfx;
        border: 2px solid #e0e0e0;
        border-radius: 5px;
        height: 48px;
    }
    label{
        color: $secondaryColor;
        font-size: 16px;
    }
    .qty-btn{
        color: $secondaryColor;
        display: block;
        background: #fff;
        font-size: 25px;
        width: 50px;
        line-height: 43px;
        text-align: center;
        float: left;

        &:hover,
        &:focus{
            color: $linkHover;
        }
    }
    input{
        width: 60px;
        float: left;
        border: none;
        border-left: 2px solid #e0e0e0;
        border-right: 2px solid #e0e0e0;
        margin: 0;
        padding: 13px;
        border-radius: 0;
        text-align: center;
        background: transparent;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: textfield;
        margin: 0;
    }
}
.status{
    font-size: 12px;

    span{
        color: $orange;
        font-weight: 600;
    }
}
.product-actions{
    a{
        font-size: 13px;
        color: $secondaryColor;

        &:hover,
        &:focus{
            color: $linkHover;
        }
        img{
            width: 15px;
            position: relative;
            top: -1px;
        }
    }
}
.shop-head{
    padding: 30px 40px;
    background: #f5f5f5;
    border-radius: 5px;

    &.shopping-head{
        @include mqx(t){
            display: none;
        }
    }

    h3{
        font-size: 22px;

        @include mqx(d){
            font-size: 20px;
        }
        @include mqx(l){
            font-size: 18px;
        }
    }
    a{
        color: $orange;

        &:hover,
        &:focus{
            color: lighten($orange, 15%);
        }
    }
}
.item-shop{
    border: 2px solid #e0e0e0;
    border-radius: 5px;

    @include mqx(t){
        margin-bottom: 15px;
    }
    .item-shop-img{
        margin: 0 auto;
        padding: 0 2em;

        @include mqx(l){
            padding: 0 1em;
        }
        @include mqx(t){
            height: 150px;
        }
        img{
            margin: 0 auto;
            max-width: 100px;

            @include mqx(l){
                max-width: 60px;
            }
            @include mqx(t){
                max-width: 110px;
            }
        }
    }
}
.single-item{
    border-bottom: 2px solid #e5e5e5;
}
.shop-content{
    height: 160px;

    @include mqx(l){
        height: 100px;
    }
    @include mqx(t){
        height: auto;
        margin-bottom: 15px;
    }
    h4{
        line-height: 1.4;

        @include mqx(l){
            font-size: 16px
        }
    }
    a{
        font-size: 16px;
        color: $secondaryColor;

        &:hover,
        &:focus{
            color: $linkHover;
        }
    }
    &.end{
        justify-content: space-evenly;
    }
    span{
        font-size: 16px;
    }
    .price{
        font-size: 18px;

        &.total{
            font-size: 25px;
            color: $orange;
        }
        sub{
            font-size: 18px;
            font-weight: 600;
        }
    }
}
.shopping-btn{
    @include mqx(m){
        .mrlg{
            margin-right: 10px;
        }
    }
}
.shipping-details{
    .radio-custom{
        label{
            font-weight: 600;
            display: inline-block;
            font-size: 16px;

            @include mqx(t){
                width: 93%;
            }
            @include mqx(m){
                width: 88%;
            }
        }
        input{
            top: 2px;
            float: left;
        }
    }
}
.delivery-method{
    p{
        font-size: 18px;

        span{
            font-size: 14px;
            font-style: italic;
        }
    }
}
.cart-item{
    .cart-img{
        margin: 0 auto;
        padding: 0 10px;
        height: 90px;

        img{
            margin: 0 auto;
            max-width: 70px;

            @include mqx(d){
                max-width: 50px;
            }
        }
    }
    .shop-content{
        height: 70px;

        span{
            font-size: 18px;
        }
        .price{
            font-size: 35px;

            sub{
                font-size: 20px;
            }
        }
    }
}
.cart-content{
    h4{
        a{
            color: $secondaryColor;

            &:hover,
            &:focus{
                color: lighten($secondaryColor, 15%);
            }
        }
        font-size: 15px;
        line-height: 1.4;
    }
    .price{
        color: $orange;
        font-size: 14px;
    }
    span{
        font-size: 12px;
    }
}
.reservation-details{
    @include mqx(m){
        padding-left: 0;
    }
    h4{
        color: $blue;
        font-size: 20px;
    }
    .not-signed{
        .re-info{
            span{
                &:last-of-type:not(:first-child){
                    font-size: 14px;
                    color: $secondaryColor;
                }
            }
        }
    }
    .re-info{
        span{
            &:last-of-type:not(:first-child){
                color: #777;
            }
        }
    }
    .users{
        @include cfx;

        .user{
            height: 70px;
            width: 70px;
            border-radius: 50%;
            font-size: 22px;
            float: left;
            line-height: 49px;
            border: 10px solid #d2fcff;

            &.selected{
                border: 10px solid #53dbf1;
            }
            a{
                color: $secondaryColor;

                &:hover,
                &:focus{
                    color: $linkHover;
                }
            }
            &:last-of-type{
                border: 10px solid #f8f8f8;
                background: #eaeaea;
            }
        }
    }
}
.create-account{
    font-size: 13px;

    a{
        color: $secondaryColor;
        text-decoration: underline;

        &:hover,
        &:focus{
            color: $linkHover;
        }
    }
}
.patient-head{
    border-bottom: 0;

    @include mqn(l){
        .col-sm-5{
            width: 34.666667%;
        }
        .col-sm-9{
            width: 65.333333%;
        }
    }
    .li-img{
        height: 170px;
    }
    .li-content {
        h3{
            width: initial;

            @include mqx(t){
                text-align: center;
            }
        }
        p{
            @include multiLineEllipsis();
            @include mqx(t){
                text-align: center;
            }
        }
    }
}
.patient-content{
    padding: 30px 50px 20px;
    background-color: #f1f1f1;
    border-radius: 5px;
}
.history-head{
    background: #f5f5f5;
    padding: 15px 30px;

    li{
        &:not(:first-child){
            @include mqx(t){
                display: block;
                padding-left: 43px;
                margin-left: 0;

                .reset{
                    border-left: 0;
                }
            }
        }
        &.active{
            a{
                font-weight: 800;
            }
        }
        img{

        }
        a{
            color: $secondaryColor;
            padding: 0 15px;

            &:hover,
            &:focus{
                color: $linkHover;
            }
            &.reset{
                color: #53dbf1;
                border-left: 1px solid $secondaryColor;

                &:hover,
                &:focus{
                    color: darken(#53dbf1, 15%);
                }
            }
        }
    }
}
.history-content{
    padding: 0 80px;

    @include mqx(t){
        padding: 0 40px;
    }
    .history-item{
        padding: 30px;
        background: #f1f1f1;
        position: relative;
        border-radius: 5px;

        &:after{
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            background: #f1f1f1;
            border-radius: 50%;
            top: 0;
            left: -45px;

            @include mqx(t){
                left: -25px;
            }
        }
        &.diagnose{
            &:after{
                background: #f9889f;
            }
            h3{
                color: #f9889f;
            }
        }
        &.appointments{
            &:after{
                background: #8991f0;
            }
            h3{
                color: #8991f0;
            }
        }
        &.pharma{
            &:after{
                background: #fea100;
            }
            h3{
                color: #fea100;
            }
        }
        h3{
            font-size: 20px;
        }
        span{
            font-size: 12px;
            color: #777;
            
            &.order-status{
                &.success{
                    color: #55c697;
                }
                &.pending{
                    color: $blue;
                }
                &.failed{
                    color: #e14b60;
                }
            }
        }
        p{
            font-size:14px;

        }
    }
    .user{
        width: 70px;
        float: right;

        @include mqx(t){
            margin: 15px 0;
            float: none;
        }
        .user-img{
            height: 70px;
            border-radius: 50%;
        }
        span{
            color: $secondaryColor;
        }
    }
    .order{
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;

        span{
            color: $secondaryColor;
            font-size: 14px;
            display: block;
            width: 100%;
        }
    }
}
.history-footer{
    @include cfx;

    &.bt{
        border-top: 1px solid #ccc;
    }
    .total{
        font-size: 18px;
    }
    img{
        height: 25px;
    }
}
.media-card{
    .doctor-img{
        height: 130px;

        &.video{
            position: relative;

            &:before{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.7);
            }
            &:after{
                content: '\f144';
                position: absolute;/*rtl:ignore*/
                top: 50%;/*rtl:ignore*/
                left: 50%;/*rtl:ignore*/
                transform: translate(-50%,-50%);
                font-family: "Font Awesome 5 Free";
                font-size: 45px;
                color:#fff;
            }
        }
    }
}
.add-address{
    @include mqx(m){
        text-align: left;
        margin-top: 15px;
    }
}
.reservation-btn{
    @include mqx(m){
        float: none !important;

        a{
            display: block;

            &:first-child{
                margin-bottom: 15px;
                margin-right: 0;
            }
        }
    }
}
.slider{
    direction: ltr;
    margin-bottom: 50px;
}
.doctor-head{
    @include mqn(l){
        .col-sm-3{
            width: 20%;
        }
        .col-sm-9{
            width: 80%;

        }
    }
    .li-img{
        height: 200px;

        @extend .border-gray;
    }
    .li-content p{
        @include mqx(t){
            text-align: left;
        }

        &.desc {
            overflow: initial;
            max-height: 100%;
            line-height: 1.4;
        }
    }
}
.doctor-data{
    .tab-content{
        @include mqx(t){
            padding: 15px 0;
        }
    }

    .tab-head .nav li.active a{
        border-bottom: 6px solid $purple;

        &:hover,
        &:focus{
            border-bottom: 6px solid $purple;
        }
    }
    .tab-head .nav li a{
        border-bottom: 6px solid transparent;
    }
    .doctor-about{
        font-size: 15px;

        h4{
            border-bottom: 5px solid $purple;
        }
    }
}
.clinic-info{
    padding: 40px;
    background: #f5f5f5;
    margin-top: 50px;

    @include mqx(t){
        margin-top: 15px;
        margin-bottom: 15px;

        p,
        .price{
            float: none !important;
        }
    }
    .clearfix{
        &:first-child{
            margin-bottom: 50px;

            @include mqx(t){
                margin-bottom: 0;
            }
        }
    }
    p{
        font-size: 20px;
    }
    img{
        height: 25px;
        position: relative;
        top: -3px;
    }
    .price{
        @include mqx(t){
            margin-top: 15px;
        }
    }
    span{
        font-size: 20px;


    }
}
.datepicker-container{
    .form-group,
    .navbar{
        display: none;
    }
    .dbContainer_0{
        width: 100%;

        h5{
            display: inline-block;
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
        }
    }
    .w-100{
        width: 100%;
    }
    .my-2.d-flex{
        background: #f1f1f1;
        margin-bottom: 10px;
        padding: 15px;
        display: flex;
        justify-content: space-between;

        .btn-sm{
            padding: 11px;
            background: transparent;
        }
    }
    .dbSlideWkPrev,
    .dbSlideWkNext{
        background: transparent;

        @include mqx(t){
            padding: 13px 0;
        }
    }
    .dbSlideGrid{
        .dbEventS{
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            background: transparent;
            border-radius: 50px;
            padding: 20px 10px;
            display: block;
            margin: 0 3px;

            @include mqx(m){
                font-size: 15px;
                padding: 20px 6px;
                margin: 0;
            }
            &:hover,
            &:focus,
            &.selected{
                background: #bbc3ff;
            }
            small{
                display: block;
            }
        }
    }
}
.timeslot{
    display: flex;
    justify-content: space-between;

    @include mqx(t){
        display: block;
    }
    a.btn{
        padding: 10px;
        border-radius: 20px;

        @include mqx(t){
            margin: 5px;
        }
        &:hover,
        &:focus,
        &.selected{
            background: #bbc3ff;
            border-color: #bbc3ff;
            color: #000;
        }
    }
}
.pick-service{
    .checkbox-custom input{
        top: 3px;
        border: 2.5px solid #e6e6e6;
        height: 23px;
        width: 23px;

        &:checked,
        &:hover{
            background-color: #fff;
            border: 2.5px solid #e6e6e6;
        }
        &:checked:before{
            left: 5px;
            top: -3px;
        }
    }
    label{
        font-size: 22px;
        color: $purple;
        font-weight: bold;
        letter-spacing: 1.2px;
    }
}
.doctor-single{
    margin-left: -10px;
    margin-right: -10px;

    .slick-dots{
        text-align: center;
        bottom: -45px;

        @include mqx(t){
            bottom: -70px;
        }
    }
    .slick-dots li.slick-active button:before{
        color: $purple;
    }
    .slick-slide{
        outline: 0;
    }
}
.save{
    span{
        font-size: 22px;
        line-height: 1.4;

        &:first-child{
            font-size: 12px;
        }
    }
}
.dimmed{
    opacity: .3;
    user-select: none;
    pointer-events: none;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.service-filter{
    a.btn.btn-outline{
        padding: 10px 15px;
        border-radius: 20px;

        @include mqx(t){
            margin: 5px;
        }
        &:hover,
        &:focus,
        .selected{
            background: #bbc3ff;
            border: 2px solid #bbc3ff;
            color: $secondaryColor;
        }
    }
}
.review{
    &.bb{
        border-bottom: solid 1px #e0e0e0;
    }
}
.review-head{
    h3{
        font-size: 18px;
    }
    .review-span{
        span{
            font-weight: normal;
            font-size: 14px;
            color: #5e5e5e;
        }
        a{
            font-size: 14px;
            color: #e14b60;
        }
    }
}
.review-content{
    p{
        font-size: 14px;
    }
}
.total-con{
    margin: 0 auto;

    .total-rating{
        border: 3px solid $purple;
        border-radius: 50%;
        padding: 10px;
        line-height: 45px;
    }
}
.doctor-statics{
    padding: 25px;
    background: #fafafa;

    span{
        font-size: 14px;
    }
    .progress{
        height: 10px;
        box-shadow: none;
        background-color: #dbdbdb;
        border-radius: 0;


        .progress-bar{
            box-shadow: none;
            background-color: #bbc3ff;
        }
    }
}
.certificate{
    .cer{
        @include mqx(t){
            @include cfx;

            img,p{
                float: left;
            }
            p{
                width: 80%;
            }
        }
    }
}
.insurance{
    &.cr-pop{
        .modal-header{
            background-color: transparent;
        }
        .modal-body{
            padding: 20px 30px;
        }
        .order-date{
            color: #777777;
        }
        .discount{
            color: #e14b60;
            font-size: 50px;
        }
        .cta-btns{
            margin-left: -5px;
            margin-right: -5px;

            .btn{
                width: 47.5%;
            }
        }
        .heading{
            font-size: 20px;
            color: #000;

            &.order-id{
                color: #fea100;
            }
        }
        .checkbox-custom .form-radio {
            top: 4px;
        }
    }
    .modal-dialog{
        @include mqn(t){
            width: 550px;
        }
    }
    .modal-header{
        background-color: #bbc3ff;
        padding: 20px 25px;
        border-radius: 5px 5px 0 0;
    }
    .close{
        opacity: 1;
        width: 20px;
        margin: 1px 0 0;
    }
    ul{
        padding: 0 20px;

        li{
            a{
                padding: 15px;
                border-top: 1px solid #e5e5e5;
                color: $secondaryColor;

                &:hover,
                &:focus{
                    color: lighten($secondaryColor, 15%);
                }
            }
            &:first-child{
                a{
                    border-top: 0;
                }
            }
        }
    }
}
[data-target="#insurance"]{
    cursor: pointer;
}
.dropdown-menu.cart{
    min-width: 240px;

    .cart-item{
        @include cfx;
        margin: 5px 10px;
        padding: 15px 0;

        &:first-child{
            padding: 0 0 15px;
        }
        > a{
            float: left;
            width: 70px;
            padding: 0 5px 0 0;
        }
        a{
            @include mqx(t){
                padding: 0 !important;
            }
        }
        .cart-content{
            float: right;
            width: 145px;
            padding-right: 5px;

            @include mqx(t){
                margin-top: 0;
            }
            a{
                padding: 0;
            }
            h4{
                @include mqx(t){
                    text-align: left;
                }
            }
            .price,
            span{
                display: inline-block;
            }
            .price{
                span{
                    color: $secondaryColor;
                }
            }
            > span{
                padding-right: 6px;
                margin-right: 6px;
                border-right: 2px solid $secondaryColor;
            }
        }
        .cart-img{
            height: 70px;

            img {
                max-width: 40px;
            }
        }
        &.cart-total{
            margin: 15px 8px;
            background: #f5f5f5;
            padding: 15px;
            @include cfx;

            .price{
                font-size: 14px;
            }
        }
        .shop-content{
            height: auto;
        }
    }
    .cart-btn{
        margin: 5px;

        a{
            width: 49%;
            display: inline-block;
            font-size: 10px !important;
            font-weight: 800;

            &.btn-orange{
                @extend .btn-orange;
            }
            &.btn-orange-outline{
                @extend .btn-orange-outline;
            }
        }
    }
}
.filter-switcher{
    @include cfx;
    margin-bottom: 15px;
    display: none;

    @include mqx(t){
        display: block;
    }
    &.active{
        position: absolute;
        right: 15px;
        z-index: -1;
    }
    a{
        color: $secondaryColor;
        font-size: 16px;

        img{
            width: 22px;
            position: relative;
            top: -1px;
        }
    }
}
.filter-head{
    padding: 33px 25px;
    background: #e3e3e4;
    @include cfx;
    margin-bottom: 15px;
    display: none;

    @include mqx(t){
        display: block;
        padding: 25px;
    }
    a{
        font-size: 20px;
        color: $secondaryColor;

        img{
            margin-top: 8px;
        }
    }
}
@media only screen and (min-device-width: 480px)
and (max-device-width: 640px)
and (orientation: landscape) {
    .li-head{
        .col-sm-3{
            float: left;
            width: 35%;
        }
        .col-sm-9{
            float: left;
            width: 65%;
        }
    }
    .li-head .li-content{
        margin-top: 20px;
        padding-top: 20px;
    }
    .cart-item{
        .col-xs-4{
            width: 20.333333%;
        }
        .col-xs-8 {
            width: 79.666667%;
        }
    }
    .item-slider .item-slide .item-img{
        height: 310px;

        img{
            max-width: 280px;
        }
    }
}


.input-file-container {
    position: relative;
    width: 100%;
    @include cfx;

    .input-file-trigger{
        span{
            float: left;

            &.label-input{
                margin: 10px 0 0 30px;
            }
        }
    }
    .user{
        height: 70px;
        width: 70px;
        border-radius: 50%;
        font-size: 22px;
        line-height: 49px;
        border: 10px solid rgba(0, 165, 207,.2);
        background: rgba(0, 165, 207,.5);

        a{
            color: #fff;
        }
    }
}
.file-return {
    margin: 0;

    &:not(:empty) {
        margin: 1em 0;
    }
}
.js {
    .input-file-trigger {
        display: block;
        background: transparent;
        color: #000;
        font-size: 1em;
        transition: all .4s;
        cursor: pointer;
    }
    .input-file {
        position: absolute;
        top: 0; left: 0;
        width: 225px;
        opacity: 0;
        padding: 14px 0;
        cursor: pointer;
    }
    .input-file:hover + .input-file-trigger,
    .input-file:focus + .input-file-trigger,
    .input-file-trigger:hover,
    .input-file-trigger:focus {
        color: $orange;
    }
    .file-return {
        font-style: italic;
        font-size: .9em;
        font-weight: bold;

        &:not(:empty):before {
            content: "Selected file: ";
            font-style: normal;
            font-weight: normal;
        }
    }
}