// scroll bar
/* width */
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    // box-shadow: inset 0 0 5px grey;
    border-radius: 3px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: $primary;
    border-radius: 3px;
}
.input-group-text-150 {
    min-width: 150px;
    max-width: 150px;
    text-align: center;
}
input[type=radio]:checked::before{
    display:none;
}
.form-check-input{
    width: 16px;
    height: 16px;
    margin-top: 0;
}
.toast.translate-middle-x{
    margin-left: 80px;
    margin-top: 40px !important;
}

.select2-container--default .select2-selection--single{
    border-width: 1px;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

#elex_multivendor_vendor_country_iso ~ .iti--allow-dropdown{
    width:50%;
}
.bg-red {
    background: #ca0101;
}
.bg-normal-red{
    background: #dd0404;
}
.bg-orange {
    background: #f8641c;
}
h5 {
    font-size: 1.125rem;
}
.elex-multi-vendor-for-woocommerce-dashboard-net-sales:hover{
    color: #2196f3;
}
.delete_row_category_selected_for_commission_button:hover{
    transition: .6 ease-in-out;
    background: #f20202;
    svg{
        path{
            fill: #fff;
        }
    }
}
.tooltip-primary {
    .tooltip-inner {
        background-color: $info;
        color: #fff;
    }
    .tooltip-arrow::before {
        display: none;
    }
}
.w-90 {
    width: 90%;
}
.start-33 {
    left: 33%;
}
.start-66 {
    left: 66%;
}
.elex-multi-vendor-for-woocommerce-skip-btn {
    svg {
        transition: 0.6s ease;
    }
}
.elex-multi-vendor-for-woocommerce-skip-btn:hover {
    background: #598bff1a;
    position: relative;
    svg {
        position: relative;
        transform: translateX(15px);
        transition: 0.6s ease;
    }
}
.elex-form-group-btn{
    background-color: #063D8E30;
}
.elex-multi-vendor-for-woocommerce-nav-bg{
    background-color: #F5F9FF;
}
.box-shadow-inset {
    box-shadow: 0px 0px 49px #3f59805c inset;
}
.btn-primary {
    svg {
        path {
            stroke: #fff !important;
        }
    }
}
.tooltip-outline-primary .tooltip-inner {
    background-color: #fff;
    border: 1px solid $primary;
    color: $primary;
}
.btn-outline-primary {
    svg {
        path {
            stroke: $primary !important;
        }
    }
}
.btn-outline-primary:focus,
.btn-outline-primary:hover {
    svg {
        path {
            stroke: #fff !important;
        }
    }
}
.elex-table-links-btn{
    .active{
        border: 2px solid #3f5980 !important;
        background: #c7ddff !important;
        color: #3f5980 !important;
    }
}

.elex-multi-vendor-for-woocommerce-shipping-link {
    .nav-item{
        margin: 0;
        a.nav-link {
            color: #000;
            font-weight: 500;
        }
        a.nav-link.active {
            background-color: transparent !important;
            border: none;
            color: $primary;
            border-bottom: 4px solid $primary;
        }
    }
   

}
.product_commission_switch_vendor_screen,
.category_commission_switch_vendor_screen{
    table{
        // table-layout: fixed;
        .category_commission_switch_vendor_screen_category{
            width: 65%;
            min-width: 100px;
        }
        .category_commission_switch_vendor_screen_comission{
            width: auto;
            min-width: 100px;
        }
        .category_commission_switch_vendor_screen_add{
            width: 50px;
        }
        tbody{
            .category_select_dropdown_for_commission_vendor,
            .product_select_dropdown_for_commission_vendor{
                min-width: 100%;
            }
        }
    }
}


.elex-multi-vendor-for-woocommerce-main {
    #product-select-for-search~.select2-container.select2-container--default,
    #vendor-select-for-search~.select2-container.select2-container--default{
        border: 1px solid #dee2e6;
        border-radius: .375rem 0px 0px .375rem;
    }
    #elex-multi-vendor-for-woocommerce-settlement-table_length{
        margin:10px 0;
        label{
            display: flex;
            gap: 10px;
            align-items: center;
            select{
                width: auto;
            }
        }
    }
    #elex-multi-vendor-for-woocommerce-settlement-table_filter{
        margin: 10px 0;
        label{
            display: flex;
            justify-content: end;
            align-items: center;
            gap: 10px;
            input{
                width: auto;
            }
        }
    }
    .elex_service_type{ 
        width:70px;
      }
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    // margin-left: 250px;
    // padding-right: 40px !important;
    .elex-multi-vendor-for-woocommerce-shipping-brand {
        font-size: 14px;
        li {
            position: relative;
            a:before {
                content: "";
                position: absolute;
                height: 60%;
                top: 50%;
                transform: translateY(-50%);
                width: 2px;
                right: -5px;
                background: #ddd;
            }
        }
        li:last-child {
            position: relative;
            a:before {
                display: none;
            }
        }
        li.active {
            color: $info;
            a {
                color: $info;
            }
        }
        li.active:after {
            content: "";
            position: absolute;
            content: "";
            width: 100%;
            height: 2px;
            background: $info;
            bottom: 0;
            left: 0;
        }
    }
    .elex-multi-vendor-for-woocommerce-table {
        border-collapse: separate;
        border-spacing: 0 15px;
        padding: 0 5px;
        border: none;
        table-layout: auto; 
        min-width: 1000px;
    }
    #elex-multi-vendor-for-woocommerce-prod-table {
        border-collapse: separate;
        border-spacing: 0 15px;
        padding: 0 5px;
        border: none;
        min-width: 1020px;
        th.manage-vendor-check {
            width: 20px !important;
        }
        th.manage-vendor-details {
            width: 20% !important;
        }
        th.manage-vendor-contact {
            width: 20% !important;
        }
        th.manage-vendor-product {
            width: 15% !important;
        }
        th.manage-vendor-status {
            width: 15% !important;
        }
        th.manage-vendor-action {
            min-width: 200px !important;
        }
        tbody {
            tr {
                td {
                    .elex-multi-vendor-for-woocommerce-table-btn-status{
                        min-width: 120px;
                    }
                    // width: 13%;
                }
                .table-prod-details {
                    // width: 350px;
                    img {
                        width: 56px;
                        height: 56px;
                        border-radius: 4px;
                        object-fit: cover;
                        overflow: hidden;
                    }
                }
            }
        }
    }
    .elex-multi-vendor-for-woocommerce-shipping-link {
        .nav-item {
            a {
                color: #141414;
                font-weight: 500;
            }
            a.active {
                background-color: transparent !important;
                border: none;
                color: $primary;
                border-bottom: 4px solid $primary;
            }
        }
    }
    .elex-multi-vendor-for-woocommerce-dashboard-sales {
        .row {
            .col-6 {
                position: relative;
            }
            .col-6:nth-child(odd):after {
                position: absolute;
                content: "";
                width: 2px;
                height: 70%;
                border-radius: 2px;
                background: $secondary;
                right: 0;
                top: 15%;
            }
            .col-6:nth-child(1):before {
                position: absolute;
                content: "";
                height: 3px;
                border-radius: 2px;
                width: 50%;
                background: $secondary;
                right: 25%;
                bottom: 0;
            }
            .col-6:nth-child(2):before {
                position: absolute;
                content: "";
                height: 3px;
                border-radius: 2px;
                width: 50%;
                background: $secondary;
                right: 25%;
                bottom: 0;
            }
        }
    }
    .elex-multi-vendor-for-woocommerce-payment {
        min-width: 1040px;
    }
}
// switch button css
.elex-enable-disable-switch {
    position: relative;
    display: inline-block;
    width: 85px;
    height: 28px;
    input {
        display: none;
    }
    .switch {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        outline: 2px solid #707070;
        background-color: #fff;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        border-radius: 34px;
    }
    .switch:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: #707070;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        border-radius: 50%;
    }
    input:checked + .switch {
        outline: 2px solid #3f5980;
    }
    input:focus + .switch {
        box-shadow: 0 0 1px #2196f3;
    }
    input:checked + .switch:before {
        background-color: #3f5980;
        -webkit-transform: translateX(56px);
        -ms-transform: translateX(56px);
        transform: translateX(56px);
    }
    /*------ ADDED CSS ---------*/
    .switch:after {
        content: "Disabled";
        color: #707070;
        display: block;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 53%;
        left: 63%;
        font-size: 12px;
        font-weight: 500;
    }
    input:checked + .switch:after {
        content: "Enabled";
        left: 35%;
        color: $primary;
    }
}
// popup css
.elex-multi-vendor-for-woocommerce-popup {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    right: -100%;
    backdrop-filter: blur(6px);
    transition: 0.6s ease-in-out;
    form{
        padding: 0;
    }
     .nav-tabs {
            .nav-item {
                .nav-link {
                    color: #000;
                    font-weight: 500;
                }
                .nav-link.active {
                    background-color: transparent !important;
                    border: none;
                    color: $primary;
                    border-bottom: 4px solid $primary;
                }
            }
        }
    .elex-multi-vendor-for-woocommerce-add-vendor-tabs {
        li {
            button {
                background-color: #fff;
                div {
                    background-color: $secondary;
                }
            }
            h6 {
                color: $secondary;
            }
        }
        li.elex-multi-vendor-for-woocommerce-on,
        li.active {
            button {
                border: 1px solid $primary;
                div {
                    background-color: $primary;
                }
            }
            h6 {
                color: $primary;
            }
        }
    }
}
.elex-multi-vendor-for-woocommerce-popup.active {
    right: 10px;
    transition: 0.6s ease-in-out;
}
// profile page
.elex-multi-vendor-for-woocommerce-profile-pic-card {
    width: 100px;
    padding: 0px !important;
    overflow: hidden;
    img {
        height: 65px;
        max-height: 65px;
        object-fit: contain;
    }
}
.elex_mv_vendors_input  ~ .select2-container--default{
        width:50% !important; 
}

// help & support
.help-support-nav {
    ul {
        display: flex;
        gap: 40px;
        align-items: center;
        padding: 0 20px;
        margin: 0;
        list-style: none;
        text-decoration: none;
        li {
            padding: 10px 0;
            position: relative;
            a {
                color: #000;
                text-decoration: none;
                font-weight: 500;
            }
        }
        li.active {
            a {
                color: #10518d;
            }
        }
        li.active:after {
            position: absolute;
            content: "";
            height: 3px;
            border-radius: 2px;
            width: 100%;
            background: #10518d;
            bottom: 0;
            left: 0;
        }
    }
}