/**  =====================
      Custom css start
==========================  **/
// @font-face {
//     font-family: segoe UI;
//     src: url("../fonts/SEGOEUI.TTF");
// }

body {
    background-color: $theme-bg-color;
    font-size: $theme-font-size;
    overflow-x: hidden;
    color: #353c4e;
    font-family: $theme-font-family;
}

ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

* {
    &:focus {
        outline: none;
    }
}

a {
    font-size: 14px;
    color: $inverse-color;

    &:focus,
    &:hover {
        text-decoration: none;
        color: $primary-color;
    }
}

h6 {
    font-size: 14px;
}

p {
    font-size: 13px;
    @media only screen and(min-width: 1400px) {
        font-size: 14px;
    }
}

.media-left {
    padding-right: 20px;
}
/**====== Custom css end ======**/
/**  =====================
      Main-body css start
==========================  **/

.main-body {
    .page-wrapper {
        padding: 1.8rem;
        transition: all ease-in 0.3s;

        .menu-rtl {
            .page-header-title i {
                margin-left: 20px;
            }
        }

        .page-header {
            margin-bottom: 30px;
            background-color: #fff;
            padding: 30px;
        }

        .page-header-title {
            display: inline-flex;

            h4 {
                display: block;
                margin-bottom: 0;
                font-weight: 600;
                color: #303548;
                font-size: 20px;
                text-transform: capitalize;
            }

            span {
                font-size: 13px;
                color: #919aa3;
                display: inline-block;
                margin-top: 10px;
                text-transform: capitalize;
            }

            i {
                display: inline-flex;
                float: left;
                width: 50px;
                height: 50px;
                border-radius: 4px;
                justify-content: center;
                vertical-align: middle;
                font-size: 25px;
                color: #fff;
                box-shadow: 0 2px 12px -3px rgba(0, 0, 0, 0.50);
                margin-right: 20px;
                align-items: center;
            }
        }

        .page-header-breadcrumb {
            display: inline-flex;
            float: right;
        }
    }
}
/**====== Main-body css end ======**/
/**  =====================
      Card-Layout css start
==========================  **/
/*====== Ecommerce Dashboard Css Start ======*/

.author-details {
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
    margin-bottom: 10px;

    img ~ .dot1,
    img ~ .dot2 {
        height: 14px;
        width: 14px;
        border-radius: 100%;
        top: 60%;
        position: absolute;
        padding: 5px;
    }

    img ~ .dot1 {
        left: 40px;
    }

    img ~ .dot2 {
        left: 50px;
    }

    .recent-contain {
        h6 {
            font-size: 1rem;
            margin-bottom: 5px;
        }
    }

    .header-right {
        text-align: right;
        margin-top: 6px;

        ul {
            position: relative;
        }

        h4 {
            color: #919aa3;
            font-size: 0.875rem;
            margin-top: 5px;
        }

        span {
            font-size: 1rem;
        }

        li {
            display: inline-block;
            margin-right: 60px;
            text-align: left;

            &:last-child {
                margin-right: 0;
                position: absolute;
                right: 0;
                top: 10px;
                font-size: 20px;
            }
        }
    }
}
/*====== Ecommerce Dashboard Css End ======*/

.login .container-fluid {
    width: auto;
    margin-top: 80px;
}

.filter-bar .navbar .navbar-nav .dropdown-menu {
    position: absolute;
}
/*====== Ready to use Css Start ======*/
.wrapper {
    padding: 0;
}
/*====== Ready to use Css End ======*/
.card-block {
    padding: 1.25rem;
}

.card {
    border-radius: 5px;
    box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.12);
    border: none;
    margin-bottom: 30px;

    .card-footer {
        background-color: $white-txt;
        border-top: none;
    }

    .card-header {
        background-color: transparent;
        border-bottom: none;
        padding: 25px 20px;

        .card-header-left {
            display: inline-block;
        }

        .card-header-right {
            border-radius: 0 0 0 7px;
            right: 10px;
            top: 18px;
            display: inline-block;
            float: right;
            padding: 7px 0;
            position: absolute;

            i {
                margin: 0 8px;
                cursor: pointer;
                font-size: 14px;
                color: #505458;
                line-height: 20px;

                &.icofont.icofont-spinner-alt-5 {
                    display: none;

                    &:before {
                        // content: "";
                        // background-image: url('../../assets/images/load.png');
                        // display: inline-block;
                        // width: 20px;
                        // height: 20px;
                        // background-size: cover;
                    }
                }
            }

            .card-option {
                width: 35px;
                height: 20px;
                overflow: hidden;
                transition: 0.3s ease-in-out;

                li {
                    display: inline-block;
                }
            }

            &:hover {
                // .card-option {
                //     width: 145px;
                // }
                //
                // li {
                //     &:first-child {
                //         display: none;
                //     }
                // }
            }
        }

        span {
            color: #919aa3;
            display: block;
            font-size: 13px;
            margin-top: 5px;
        }

        + .card-block,
        + .card-block-big {
            padding-top: 0;
        }

        h5 {
            margin-bottom: 0;
            color: #505458;
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            margin-right: 10px;
            line-height: 1.4;
        }
    }

    .card-block {
        table {
            tr {
                padding-bottom: 20px;
            }
        }

        .sub-title {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        code {
            background-color: #eee;
            margin: 5px;
            display: inline-block;
        }

        .dropdown-menu {
            top: 38px;
        }

        p {
            line-height: 25px;
        }

        a {
            &.dropdown-item {
                margin-bottom: 0;
                font-size: 14px;
                transition: 0.25s;

                &:active,
                .active {
                    background-color: $primary-color;
                }
            }
        }

        &.remove-label i {
            margin: 0;
            padding: 0;
        }

        &.button-list span.badge {
            margin-left: 5px;
        }

        .dropdown-menu {
            background-color: #fff;
            padding: 0;

            .dropdown-divider {
                background-color: #ddd;
                margin: 3px 0;
            }
        }

        .dropdown-menu > a {
            padding: 10px 16px;
            line-height: 1.429;
        }

        .dropdown-menu > li > a:focus,
        .dropdown-menu > li > a:hover {
            background-color: rgba(202, 206, 209, 0.5);
        }

        .dropdown-menu > li:first-child > a:first-child {
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
        }

        .badge-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 12px 0;
        }
    }

    .card-block-big {
        padding: 30px 35px;
    }

    .card-block-small {
        padding: 15px 20px;
    }

    .inner-card-block {
        border: 1px solid #ddd;
    }
}

.pcoded {
    .card {
        &.full-card {
            position: fixed;
            top: 80px;
            z-index: 99999;
            box-shadow: none;
            right: 0;
            border-radius: 0;
            border: 1px solid #ddd;
            width: calc(100vw - 287px);
            height: calc(100vh - 80px);

            &.card-load {
                position: fixed;
            }
        }

        &.card-load {
            position: relative;
            overflow: hidden;

            .card-loader {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                background-color: rgba(256, 256, 256,0.7);
                z-index: 999;

                i {
                    margin: 0 auto;
                    color: #ab7967;
                    font-size: 20px;
                }
            }
        }
    }

    &[vertical-nav-type="expanded"] {
        .card.full-card {
            width: calc(100vw - 287px);
        }
    }

    &[vertical-nav-type="collapsed"] {
        .card.full-card {
            width: calc(100vw - 97px);
        }
    }

    &[vertical-nav-type="offcanvas"] {
        .card.full-card {
            width: 100vw;
        }
    }
}

.card-header-text {
    margin-bottom: 0;
    font-size: 1rem;
    color: rgba(51, 51, 51, 0.85);
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
}

.icofont-rounded-down {
    -webkit-transition: all ease-in 0.3s;
    display: inline-block;
    transition: all ease-in 0.3s;
}

.icon-up {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate-refresh {
    -webkit-animation: mymove 0.8s infinite linear;
    animation: mymove 0.8s infinite linear;
    display: inline-block;
}
@-webkit-keyframes mymove {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes mymove {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.breadcrumb-title {
    a {
        font-size: 14px;
        color: #4a6076;
    }

    li:last-child a {
        color: #7e7e7e;
    }
}

.sub-title {
    border-bottom: 1px solid rgba(204, 204, 204, 0.35);
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: #2c3e50;
}
/**======  Card-Layout css end ======**/
/*======= Typography css start ========*/

.blockquote {
    border-left: 0.25rem solid #eceeef;
    padding: 0.5rem 1rem;

    &.blockquote-reverse {
        text-align: right;
        padding-right: 1rem;
        border-right: 0.25rem solid #eceeef;
        border-left: none;
    }
}

.typography {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 20px;
    }

    small {
        margin-left: 10px;
        font-weight: 600;
        color: #777;
    }
}

.card-block.list-tag {
    ul li {
        display: block;
        float: none;
        margin-bottom: 5px;
    }

    ol li {
        margin-bottom: 5px;
    }
}

.inline-order-list {
    margin-top: 50px;

    h4,
    p {
        margin-bottom: 0;
    }
}

.card-block ul li.list-inline-item {
    display: inline-block;
    float: left;
}
/*======= Typography css end ========*/
/**  =====================
      Modal css start
==========================  **/
.modal {
    z-index: 99999999999;
}

.bd-example .modal {
    display: block;
    position: inherit;
    background-color: #2C3E50;
    margin-bottom: 20px;
}

.card .overflow-container h5 {
    margin-bottom: 5px;
}

.button-page .card-block a.nav-link {
    margin-bottom: 0;
}

.sweet-alert button.confirm {
    @extend .btn-primary;
    background-color: $primary-color !important;
}

.sweet-alert .sa-input-error {
    top: 23px;
}
/**====== Modal css end ======**/
/**  =====================
      Notification css start
==========================  **/

.location-selector {
    width: 100%;
    height: 250px;
    background-color: #fff;
    border: 2px dashed #e5e9ec;
    position: relative;
    margin-bottom: 20px;

    .bit {
        background-color: #e5e9ec;
        cursor: pointer;
        position: absolute;

        &:hover {
            background-color: #ddd;
        }

        &.bottom,
        &.top {
            height: 25%;
            width: 40%;
            margin: 0 30%;
        }

        &.top {
            top: 0;
        }

        &.bottom {
            bottom: 0;
        }

        &.left,
        &.right {
            height: 20%;
            width: 20%;
            margin-left: 0;
            margin-right: 0;
        }

        &.right {
            right: 0;
        }

        &.left {
            left: 0;
        }
    }
}

button.close {
    margin-top: 7px;
    margin-bottom: 0;
}
/**====== Notification css end ======**/

a.mytooltip {
    font-weight: 700;
    color: $primary-color;
    z-index: 9;
}

.tooltip-link a {
    margin-left: 10px;
    color: $primary-color;
}

.tooltip-icon button i {
    margin-right: 0;
}

/**  =====================
      Slider css start
==========================  **/
/*========= Owl-carousel css start ============*/

.owl-theme .owl-nav [class*='owl-']:hover {
    background: $primary-color;
}

.owl-theme .owl-dots .owl-dot {
    &.active span,
    &:hover span {
        background: $primary-color;
    }
}
/*========= Owl-carousel css end ============*/


/**  =====================
      Accordion css start
==========================  **/

.accordion-msg {
    display: block;
    color: #222222;
    padding: 14px 20px;
    border-top: 1px solid #ddd;
    font-weight: 600;
    cursor: pointer;
}

.accordion-msg:focus,
.accordion-msg:hover {
    text-decoration: none;
    outline: none;
}

.faq-accordion .accordion-desc {
    padding: 20px;
}

.accordion-desc {
    color: #222222;
    padding: 0 20px 20px;
}

#color-accordion .accordion-desc {
    margin-top: 14px;
}

.ui-accordion-header-icon {
    float: right;
    font-size: 20px;
}

.accordion-title {
    margin-bottom: 0;
}

.accordion-block {
    padding: 0;

    p {
        margin-bottom: 0;
    }
}

.color-accordion-block a {
    &.ui-state-active,
    &:focus,
    &:hover {
        color: #fff;
        background: #4680ff;
    }
}

a.bg-default:focus,
a.bg-default:hover {
    background-color: lighten($default-color, 10%) !important;
    color: #fff;
}

a.bg-primary:focus,
a.bg-primary:hover {
    background-color: lighten($primary-color, 10%) !important;
    color: #fff;
}

a.bg-success:focus,
a.bg-success:hover {
    background-color: lighten($success-color, 10%) !important;
    color: #fff;
}

a.bg-info:focus,
a.bg-info:hover {
    background-color: lighten($info-color, 10%) !important;
    color: #fff;
}

a.bg-warning:focus,
a.bg-warning:hover {
    background-color: lighten($warning-color, 10%) !important;
    color: #fff;
}

a.bg-danger:focus,
a.bg-danger:hover {
    background-color: lighten($danger-color, 10%) !important;
    color: #fff;
}
/**====== Accordion css end ======**/
/**  =====================
      Tabs css start
==========================  **/

.tab-list p {
    padding: 10px;
}

.tab-with-img i {
    position: absolute;
    padding: 5px;
}

.tab-icon {
    margin-bottom: 30px;

    i {
        padding-right: 10px;
    }
}

.tab-below {
    border-top: 1px solid #ddd;
    border-bottom: none;

    &.nav-tabs .nav-link.active {
        border-color: transparent #ddd #ddd #ddd;
    }

    .nav-item {
        margin-top: -2px;
    }

    &.nav-tabs .nav-link {
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
}

.card-header~.tab-icon .tab-with-img .sub-title i {
    right: 10px;
}

.tab-with-img .nav-link {
    position: relative;
}

.tabs-left,
.tabs-right {
    min-width: 120px;
    vertical-align: top;
    width: 150px;
}

.tabs-left,
.tabs-left-content,
.tabs-right,
.tabs-right-content {
    display: table-cell;
}

.nav-tabs.tabs-left .slide {
    height: 35px;
    width: 4px;
    bottom: 15px;
}

.nav-tabs.tabs-right .slide {
    height: 35px;
    width: 4px;
    bottom: 15px;
    right: 0;
}

.product-edit {
    .md-tabs {
        .nav-item {
            a {
                padding: 0 0 10px !important;
                color: $inverse-color;

                .f-20 {
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
    }
}

.md-tabs.tabs-left .nav-item,
.md-tabs.tabs-right .nav-item,
.tabs-left .nav-item,
.tabs-right .nav-item {
    width: 100%;
    position: relative;
}

.md-tabs {
    position: relative;

    .nav-item+.nav-item {
        margin: 0;
    }

    .nav-link {
        border: none;
        color: $inverse-color;
    }

    .nav-item {
        width: calc(100% / 4);
        text-align: center;
    }

    .nav-link:focus,
    .nav-link:hover {
        border: none;
    }

    .nav-item .nav-link.active~.slide {
        opacity: 1;
        transition: all 0.3s ease-out;
    }

    .nav-item .nav-link~.slide {
        opacity: 0;
        transition: all 0.3s ease-out;
    }

    .nav-item.open .nav-link,
    .nav-item.open .nav-link:focus,
    .nav-item.open .nav-link:hover,
    .nav-link.active,
    .nav-link.active:focus,
    .nav-link.active:hover {
        color: $primary-color;
        border: none;
        background-color: transparent;
        border-radius: 0;
    }

    .nav-item a {
        padding: 20px 0 !important;
        color: $inverse-color;
    }
}

.nav-tabs .slide {
    background: $primary-color;
    width: calc(100% / 4);
    height: 4px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;

    .nav-item.show .nav-link,
    .nav-link {
        color: $primary-color;
    }
}

.img-tabs {
    img {
        width: 100px;
        margin: 0 auto;
    }

    a {
        opacity: 0.5;
        transition: all ease-in-out 0.3s;

        span i {
            height: 25px;
            width: 25px;
            border-radius: 100%;
            bottom: 10px;
            right: 70px;
        }

        img {
            border: 3px solid;
        }

        &.active {
            opacity: 1;
            transition: all ease-in-out 0.3s;
        }
    }

    .nav-item:first-child {
        border-bottom: none;
    }
}

#pc-left-panel-menu {
    margin-bottom: 20px;
}

.h-active a {
    color: #1b8bf9 !important;
    font-weight: 600;
}

.img-circle {
    border-radius: 50%;
}

.b-none {
    border: none !important;
}
/**====== Tabs css end ======**/
/**  =====================
      Table css start
==========================  **/

.table-primary,
.table-primary > td,
.table-primary > th {
    background-color: #4680FE;
}

.table-responsive {
    display: inline-block;
    width: 100%;
    overflow-x: auto;
}

.table.table-xl {
    td,
    th {
        padding: 1.25rem 2rem;
    }
}

.table.table-lg {
    td,
    th {
        padding: 0.9rem 2rem;
    }
}

.table.table-de {
    td,
    th {
        padding: 0.75rem 2rem;
    }
}

.table.table-sm {
    td,
    th {
        padding: 0.6rem 2rem;
    }
}

.table.table-xs {
    td,
    th {
        padding: 0.4rem 2rem;
    }
}

.table-columned {
    > tbody > tr {
         > th:first-child,
        > td:first-child {
            border-left: 0;
        }
    }

    > tfoot > tr {
         > th:first-child,
        > td:first-child {
            border-left: 0;
        }
    }

    > tbody > tr {
         > th,
        > td {
            border: 0;
            border-left: 1px solid #ddd;
        }
    }

    > tfoot > tr {
         > th,
        > td {
            border: 0;
            border-left: 1px solid #ddd;
        }
    }
}

.table-border-style {
    padding: 0;

    .table {
        margin-bottom: 0;
    }
}

.table > thead > tr > th {
    border-bottom-color: #ccc;
}

.table-borderless tbody tr {
    td,
    th {
        border: 0;
    }
}

.table-bordered > thead > tr.border-solid {
     > th,
    > td {
        border-bottom-width: 2px;
    }

    &:first-child {
        > td,
        th {
            border-bottom-width: 2px;
        }
    }
}

.table-bordered > thead > tr.border-double {
     > th,
    > td {
        border-bottom-width: 3px;
        border-bottom-style: double;
    }

    &:first-child {
        > td,
        th {
            border-bottom-width: 3px;
            border-bottom-style: double;
        }
    }
}
/**====== Table css end ======**/

/**  =====================
      List-chart css start
==========================  **/

.barchart canvas,
.tristate canvas {
    width: 100% !important;
}

.ct-series-a .ct-line {
    stroke: #1ce3bb;
}

.ct-series-b .ct-line {
    stroke: rgba(255, 157, 136, 0.62);
}

.ct-series-c .ct-line {
    stroke: rgba(79, 84, 103, 0.45);
}

.ct-series-d .ct-line {
    stroke: rgba(129, 142, 219, 0.61);
}

.ct-series-a .ct-point,
.ct-series-b .ct-point,
.ct-series-c .ct-point,
.ct-series-d .ct-point {
    stroke: rgba(52, 54, 70, 0.47);
    stroke-width: 8px;
    stroke-linecap: round;
}

.ct-series-a .ct-slice-donut {
    stroke: #01C0C8;
}

.ct-series-b .ct-slice-donut {
    stroke: #83D6DE;
}

.ct-series-c .ct-slice-donut {
    stroke: #1ABC9C;
}

.ct-series-d .ct-slice-donut {
    stroke: #4F5467;
}
/*===== List-chart Css End ====*/

/**  =====================
      Product css start
==========================  **/
.prod-img {
    position: relative;

    .btn i {
        margin-right: 0;
    }
}

.prod-item .prod-img .option-hover {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    left: 0;
}

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.prod-img .p-new a {
    position: absolute;
    top: 15px;
    right: 0;
    padding: 8px 13px;
    line-height: 1;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 2px 0 0 2px;
    background: $info-color;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
}

.prod-info a {
    font-size: 18px;
}

.prod-info .br-wrapper {
    margin: 0 auto 20px;
}

.prod-info .br-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.prod-info h6 {
    font-size: 18px;
    font-weight: 600;
}

.prod-view:hover .option-hover {
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 1;
}

.prod-item .prod-info {
    background: #fff;
    padding: 30px 0 20px;
}

.prod-item .br-widget {
    min-height: inherit;
}

.prod-img .p-sale {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 50%;
    background-color: #ff5252;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 11px 4px;
}

.prod-info .br-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.option-icon i {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 36px;
    margin: 30px 0;
    padding: 17px 5px;
}
/**====== Product css end ======**/
/**  =====================
      Product-details css start
==========================  **/

.product-detail-page {
    border-top: none;
}

.product-detail {
    .br-wrapper {
        margin: 10px 0;
    }

    .product-detail .btn i {
        margin-right: 0;
    }

    .br-widget {
        min-height: 35px;
        margin-top: 0;
        display: block;
    }

    .btn-number {
        background-color: #e0e0e0;
        border-color: #d4d4d4;
        border-radius: 0;
        color: #000;
    }

    .product-price {
        display: inline-block;
        margin-right: 50px;
        font-size: 24px;
    }

    .pro-desc {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    hr {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

#small_banner {
    .slick-slide {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: 0.5;
    }

    img {
        cursor: pointer;
    }

    .slick-center {
        filter: grayscale(0);
        opacity: 1;
    }

    &:hover .slick-prev {
        left: 0;
        transition: all ease-in 0.3s;
    }

    &:hover .slick-next {
        right: 0;
        transition: all ease-in 0.3s;
    }
}

.port_details_all_img {
    overflow: hidden;
}

.page-link:hover {
    color: $primary-color;
}

.slick-prev {
    left: -45px;
    z-index: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.62);
    width: 4%;
    transition: all ease-in 0.3s;

    &:focus,
    &:hover {
        color: transparent;
        outline: none;
        background: rgba(0, 0, 0, 0.80);
    }
}

.brighttheme-icon-sticker:after {
    top: -5px;
    content: "\002016";
}

.slick-next {
    right: -45px;
    z-index: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.62);
    width: 4%;
    transition: all ease-in 0.3s;

    &:focus,
    &:hover {
        color: transparent;
        outline: none;
        background: rgba(0, 0, 0, 0.80);
    }
}

.counter-input .input-group {
    width: 20%;
}

.pro-det-tab .tab-content {
    border: 1px solid #ccc;
    border-top: 0;
}

.big_banner .port_big_img {
    margin-bottom: 15px;
}

.cd-price .cd-price-month {
    font-size: 64px;
}

.product-edit .br-wrapper {
    margin: 10px 0 30px;
}

.addcontact .md-content > div ul {
    padding-left: 0;
}
/**====== Product-details css end ======**/






.grid-layout span {
    display: block;
    border: 1px solid #ddd;
    padding: 10px;
}

.vertical-alignment .row {
    padding: 15px 0;
    min-height: 10rem;
    border: 1px solid #ddd;
}

.inte-benifits {
    border: 1px solid #ddd;

    ul {
        list-style: square;
        padding-left: 20px;
    }
}


/*====== Color css ends ======= */


.pull-0 {
    right: auto;
}

.pull-1 {
    right: 8.333333%;
}

.pull-2 {
    right: 16.666667%;
}

.pull-3 {
    right: 25%;
}

.pull-4 {
    right: 33.333333%;
}

.pull-5 {
    right: 41.666667%;
}

.pull-6 {
    right: 50%;
}

.pull-7 {
    right: 58.333333%;
}

.pull-8 {
    right: 66.666667%;
}

.pull-9 {
    right: 75%;
}

.pull-10 {
    right: 83.333333%;
}

.pull-11 {
    right: 91.666667%;
}

.pull-12 {
    right: 100%;
}

.push-0 {
    left: auto;
}

.push-1 {
    left: 8.333333%;
}

.push-2 {
    left: 16.666667%;
}

.push-3 {
    left: 25%;
}

.push-4 {
    left: 33.333333%;
}

.push-5 {
    left: 41.666667%;
}

.push-6 {
    left: 50%;
}

.push-7 {
    left: 58.333333%;
}

.push-8 {
    left: 66.666667%;
}

.push-9 {
    left: 75%;
}

.push-10 {
    left: 83.333333%;
}

.push-11 {
    left: 91.666667%;
}

.push-12 {
    left: 100%;
}

.offset-1 {
    margin-left: 8.333333%;
}

.offset-2 {
    margin-left: 16.666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.333333%;
}

.offset-5 {
    margin-left: 41.666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.333333%;
}

.offset-8 {
    margin-left: 66.666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.333333%;
}

.offset-11 {
    margin-left: 91.666667%;
}
@media (min-width: 576px) {
    .col-sm {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pull-sm-0 {
        right: auto;
    }

    .pull-sm-1 {
        right: 8.333333%;
    }

    .pull-sm-2 {
        right: 16.666667%;
    }

    .pull-sm-3 {
        right: 25%;
    }

    .pull-sm-4 {
        right: 33.333333%;
    }

    .pull-sm-5 {
        right: 41.666667%;
    }

    .pull-sm-6 {
        right: 50%;
    }

    .pull-sm-7 {
        right: 58.333333%;
    }

    .pull-sm-8 {
        right: 66.666667%;
    }

    .pull-sm-9 {
        right: 75%;
    }

    .pull-sm-10 {
        right: 83.333333%;
    }

    .pull-sm-11 {
        right: 91.666667%;
    }

    .pull-sm-12 {
        right: 100%;
    }

    .push-sm-0 {
        left: auto;
    }

    .push-sm-1 {
        left: 8.333333%;
    }

    .push-sm-2 {
        left: 16.666667%;
    }

    .push-sm-3 {
        left: 25%;
    }

    .push-sm-4 {
        left: 33.333333%;
    }

    .push-sm-5 {
        left: 41.666667%;
    }

    .push-sm-6 {
        left: 50%;
    }

    .push-sm-7 {
        left: 58.333333%;
    }

    .push-sm-8 {
        left: 66.666667%;
    }

    .push-sm-9 {
        left: 75%;
    }

    .push-sm-10 {
        left: 83.333333%;
    }

    .push-sm-11 {
        left: 91.666667%;
    }

    .push-sm-12 {
        left: 100%;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.333333%;
    }

    .offset-sm-2 {
        margin-left: 16.666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.333333%;
    }

    .offset-sm-5 {
        margin-left: 41.666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.333333%;
    }

    .offset-sm-8 {
        margin-left: 66.666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.333333%;
    }

    .offset-sm-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width: 768px) {
    .col-md {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pull-md-0 {
        right: auto;
    }

    .pull-md-1 {
        right: 8.333333%;
    }

    .pull-md-2 {
        right: 16.666667%;
    }

    .pull-md-3 {
        right: 25%;
    }

    .pull-md-4 {
        right: 33.333333%;
    }

    .pull-md-5 {
        right: 41.666667%;
    }

    .pull-md-6 {
        right: 50%;
    }

    .pull-md-7 {
        right: 58.333333%;
    }

    .pull-md-8 {
        right: 66.666667%;
    }

    .pull-md-9 {
        right: 75%;
    }

    .pull-md-10 {
        right: 83.333333%;
    }

    .pull-md-11 {
        right: 91.666667%;
    }

    .pull-md-12 {
        right: 100%;
    }

    .push-md-0 {
        left: auto;
    }

    .push-md-1 {
        left: 8.333333%;
    }

    .push-md-2 {
        left: 16.666667%;
    }

    .push-md-3 {
        left: 25%;
    }

    .push-md-4 {
        left: 33.333333%;
    }

    .push-md-5 {
        left: 41.666667%;
    }

    .push-md-6 {
        left: 50%;
    }

    .push-md-7 {
        left: 58.333333%;
    }

    .push-md-8 {
        left: 66.666667%;
    }

    .push-md-9 {
        left: 75%;
    }

    .push-md-10 {
        left: 83.333333%;
    }

    .push-md-11 {
        left: 91.666667%;
    }

    .push-md-12 {
        left: 100%;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.333333%;
    }

    .offset-md-2 {
        margin-left: 16.666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.333333%;
    }

    .offset-md-5 {
        margin-left: 41.666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.333333%;
    }

    .offset-md-8 {
        margin-left: 66.666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.333333%;
    }

    .offset-md-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width: 992px) {
    .col-lg {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pull-lg-0 {
        right: auto;
    }

    .pull-lg-1 {
        right: 8.333333%;
    }

    .pull-lg-2 {
        right: 16.666667%;
    }

    .pull-lg-3 {
        right: 25%;
    }

    .pull-lg-4 {
        right: 33.333333%;
    }

    .pull-lg-5 {
        right: 41.666667%;
    }

    .pull-lg-6 {
        right: 50%;
    }

    .pull-lg-7 {
        right: 58.333333%;
    }

    .pull-lg-8 {
        right: 66.666667%;
    }

    .pull-lg-9 {
        right: 75%;
    }

    .pull-lg-10 {
        right: 83.333333%;
    }

    .pull-lg-11 {
        right: 91.666667%;
    }

    .pull-lg-12 {
        right: 100%;
    }

    .push-lg-0 {
        left: auto;
    }

    .push-lg-1 {
        left: 8.333333%;
    }

    .push-lg-2 {
        left: 16.666667%;
    }

    .push-lg-3 {
        left: 25%;
    }

    .push-lg-4 {
        left: 33.333333%;
    }

    .push-lg-5 {
        left: 41.666667%;
    }

    .push-lg-6 {
        left: 50%;
    }

    .push-lg-7 {
        left: 58.333333%;
    }

    .push-lg-8 {
        left: 66.666667%;
    }

    .push-lg-9 {
        left: 75%;
    }

    .push-lg-10 {
        left: 83.333333%;
    }

    .push-lg-11 {
        left: 91.666667%;
    }

    .push-lg-12 {
        left: 100%;
    }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.333333%;
    }

    .offset-lg-2 {
        margin-left: 16.666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.333333%;
    }

    .offset-lg-5 {
        margin-left: 41.666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.333333%;
    }

    .offset-lg-8 {
        margin-left: 66.666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.333333%;
    }

    .offset-lg-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width: 1200px) {
    .col-xl {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xl-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xl-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xl-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xl-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xl-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pull-xl-0 {
        right: auto;
    }

    .pull-xl-1 {
        right: 8.333333%;
    }

    .pull-xl-2 {
        right: 16.666667%;
    }

    .pull-xl-3 {
        right: 25%;
    }

    .pull-xl-4 {
        right: 33.333333%;
    }

    .pull-xl-5 {
        right: 41.666667%;
    }

    .pull-xl-6 {
        right: 50%;
    }

    .pull-xl-7 {
        right: 58.333333%;
    }

    .pull-xl-8 {
        right: 66.666667%;
    }

    .pull-xl-9 {
        right: 75%;
    }

    .pull-xl-10 {
        right: 83.333333%;
    }

    .pull-xl-11 {
        right: 91.666667%;
    }

    .pull-xl-12 {
        right: 100%;
    }

    .push-xl-0 {
        left: auto;
    }

    .push-xl-1 {
        left: 8.333333%;
    }

    .push-xl-2 {
        left: 16.666667%;
    }

    .push-xl-3 {
        left: 25%;
    }

    .push-xl-4 {
        left: 33.333333%;
    }

    .push-xl-5 {
        left: 41.666667%;
    }

    .push-xl-6 {
        left: 50%;
    }

    .push-xl-7 {
        left: 58.333333%;
    }

    .push-xl-8 {
        left: 66.666667%;
    }

    .push-xl-9 {
        left: 75%;
    }

    .push-xl-10 {
        left: 83.333333%;
    }

    .push-xl-11 {
        left: 91.666667%;
    }

    .push-xl-12 {
        left: 100%;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.333333%;
    }

    .offset-xl-2 {
        margin-left: 16.666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.333333%;
    }

    .offset-xl-5 {
        margin-left: 41.666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.333333%;
    }

    .offset-xl-8 {
        margin-left: 66.666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.333333%;
    }

    .offset-xl-11 {
        margin-left: 91.666667%;
    }
}
/*====== Warning css starts ======= */
.ie-warning {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000000;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-family: "Courier New", Courier, monospace;
    padding: 50px 0;
}

.ie-warning p {
    font-size: 17px;
}

.ie-warning .iew-container {
    min-width: 1024px;
    width: 100%;
    height: 200px;
    background: #fff;
    margin: 50px 0;
}

.ie-warning .iew-download {
    list-style: none;
    padding: 30px 0;
    margin: 0 auto;
    width: 720px;
}

.ie-warning .iew-download > li {
    float: left;
    vertical-align: top;
}

.ie-warning .iew-download > li > a {
    display: block;
    color: #000;
    width: 140px;
    font-size: 15px;
    padding: 15px 0;
}

.ie-warning .iew-download > li > a > div {
    margin-top: 10px;
}

.ie-warning .iew-download > li > a:hover {
    background-color: #eee;
}
/*====== Warning css ends ======= */
/*====== Json form css start =======*/

.alpaca-field img {
    width: 250px;
}
/*====== Json form css ends =======*/
/*====== Sticky css start =======*/

.arrow_box {
    z-index: 0;
}
@media only screen and (max-width:575px) {
    .sticky-card {
        margin-bottom: 250px;
    }
}
/*====== Sticky css ends =======*/
/*====== Ready to use css start ======*/

.j-pro .j-label {
    font-weight: 600;
}
/*====== Ready to use css ends ======*/

.ms-container {
    width: 100%;
}
/**  =====================
      Theme-preloader css start
==========================  **/
.theme-loader {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    z-index: 999999;
    top: 0;
}

.ball-scale {
    left: 50%;
    top: 50%;
    position: absolute;
    height: 50px;
    width: 75px;
    margin: -25px 0 0 -37.5px;
}
@-webkit-keyframes line-scale-pulse-out {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }

    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
@keyframes line-scale-pulse-out {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }

    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}

.ball-scale .contain > div {
    width: 3px;
    height: 50px;
    border-radius: 5px;
    margin: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
    animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.ball-scale .contain > div:nth-child(4),
.ball-scale .contain > div:nth-child(6) {
    animation-delay: -0.4s !important;
}

.ball-scale .contain > div:nth-child(3),
.ball-scale .contain > div:nth-child(7) {
    animation-delay: -0.3s !important;
}

.ball-scale .contain > div:nth-child(2),
.ball-scale .contain > div:nth-child(8) {
    animation-delay: -0.2s !important;
}

.ball-scale .contain > div:nth-child(1),
.ball-scale .contain > div:nth-child(9) {
    animation-delay: -0.1s !important;
}
@-webkit-keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    80% {
        -webkit-transform: scaley(0.3);
        transform: scaley(0.3);
    }

    90% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
@keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }

    80% {
        -webkit-transform: scaley(0.3);
        transform: scaley(0.3);
    }

    90% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}

.ball-scale .contain > div {
    width: 3px;
    height: 50px;
    border-radius: 5px;
    margin: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
    animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
}

.ball-scale .contain > div:nth-child(4),
.ball-scale .contain > div:nth-child(6) {
    animation-delay: -0.30s !important;
}

.ball-scale .contain > div:nth-child(3),
.ball-scale .contain > div:nth-child(7) {
    animation-delay: -0.20s !important;
}

.ball-scale .contain > div:nth-child(2),
.ball-scale .contain > div:nth-child(8) {
    animation-delay: -0.10s !important;
}

.ball-scale .contain > div:nth-child(1),
.ball-scale .contain > div:nth-child(9) {
    animation-delay: 0s !important;
}
$l-color: #93BE52,#FE8A7D,#FFB64D,#FC6180,#4680ff,#FC6180,#FFB64D,#FE8A7D,#93BE52;
$i: 1;

.ball-scale .contain > div {
    @each $value in $l-color {
        &:nth-child(#{$i}) {
            background-color: $value;
        }
        $i: $i+1;
    }
}

.progress {
    height: 1rem;

    .progress-bar {
        height: 100%!important;
    }
}
// =====================   scroll bar ===========

.pcoded {
    .mCSB_container_wrapper {
        margin-right: 0;

        > .mCSB_container {
            padding-right: 0;
        }
    }

    .mCSB_scrollTools {
        width: 10px;

        .mCSB_draggerRail {
            background-color: transparent;
            width: 10px;
        }

        .mCSB_dragger .mCSB_dragger_bar {
            background-color: transparentize($inverse-color,1);
        }

        .mCSB_dragger.mCSB_dragger_onDrag,
        .mCSB_dragger:active {
            .mCSB_dragger_bar {
                background-color: transparentize($inverse-color,0.5);
            }
        }
    }

    #styleSelector,
    .main-menu {
        :hover {
            .mCSB_dragger_bar {
                background-color: transparentize($inverse-color,0.8);
            }
        }
    }
}