@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Quicksand:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round');
@import "../common/jquery-ui.min.css";
@import "./normalize.css";
@import "./bootstrap-all.min.css";
@import "./select2.min.css";
@import "./slick.css";
@import "../common/notyf.min.css";
@import "./main.css";

/* jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}

/* jQuery UI Datepicker hide datepicker helper */
#ui-datepicker-div {display:none;}

/* jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #3BB77E none;
    color: white;
}

:root {
    --card-line-height: 1.2em;
    --card-padding: 1em;
    --card-radius: 0.5em;
    --color-green: #558309;
    --color-gray: #e2ebf6;
    --color-dark-gray: #c4d1e1;
    --radio-border-width: 2px;
    --radio-size: 1.5em;
}

body {
    background-color: #f2f2f7;
    color: #000000;
}

.product-cart-wrap .product-content-wrap .product-price p.price_unit {
    font-size: 12px;
    color: #adadad;
    font-weight: bold;
}

.product-cart-wrap {
    border-radius: 8px;
    /*border: none;*/
}


label {
    margin: 0;
}

.row {
    margin: 0;
}

hr {
    margin: 10px 0;
    color: #bdbdff;
}

.bg-active{
    background-color: #3BB77E;
}
.flex-break-iteam {
    flex-basis: 100%;
}

/*-------------------------------*/
input[type="range"] {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    padding: 0 2px;
    /* Add some L/R padding to ensure box shadow of handle is shown */
    /*overflow: hidden;*/
    border: 0;
    border-radius: 8px;
    outline: none;
    background: linear-gradient(grey, grey) no-repeat center;
    /* Use a linear gradient to generate only the 2px height background */
    background-size: 100% 2px;
    pointer-events: none;

    height: 8px;

    background: #3bb77e;
}
input[type="range"]:active,
input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 25px;
    width: 25px;
    border-radius: 25px;
    background-color: #fff;
    position: relative;
    margin: 5px 0;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
}

input[type="range"]::-moz-range-thumb {
    height: 25px;
    width: 25px;
    border-radius: 25px;
    background-color: #fff;
    position: relative;
    margin: 5px 0;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
}

input[type="range"]::-webkit-slider-thumb:hover {
    border: 1px solid;
}

input[type="range"]::-moz-range-thumb:hover {
    border: 1px solid;
}

input[type="range"]::-webkit-slider-thumb::before {
    content: " ";
    display: block;
    position: absolute;
    top: 13px;
    left: 100%;
    width: 2000px;
    height: 2px;
}

input[type="range"]::-moz-range-thumb::before {
    content: " ";
    display: block;
    position: absolute;
    top: 13px;
    left: 100%;
    width: 2000px;
    height: 2px;
}

#dual_price_slider {
    position: relative;
    padding: 25px 0;
}
#dual_price_slider input[type="range"] {
    position: absolute;
}
#dual_price_slider input[type="range"]:nth-child(1)::-webkit-slider-thumb::before {
    background-color: red;
}
#dual_price_slider input[type="range"]:nth-child(1)::-moz-range-thumb::before {
    background-color: red;
}

#dual_price_slider input[type="range"]:nth-child(2) {
    background: none;
}
#dual_price_slider input[type="range"]:nth-child(2)::-webkit-slider-thumb::before {
    background-color: grey;
}
#dual_price_slider input[type="range"]:nth-child(2)::-moz-range-thumb::before {
    background-color: grey;
}

#dual_price_slider_box {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

#dual_price_slider_box > input {
    width: 100px;
    border: 1px solid #afafaf;
}

select {
    margin: 0;
}



/*==========MEGA MENU================*/
.navbar .megamenu{
    max-height: 350px;
    overflow: auto;
    padding: 1rem;
    top: 48px;
    border: 1px solid #f3f3f3;
    border-radius: inherit;
}

.megamenu-title {
    font-size: 20px;
}

.megamenu-link-item {
    margin: 5px 0;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

    .navbar .has-megamenu{position:static!important;}
    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
        overflow-y: auto;
        max-height: 90vh;
        margin-top:10px;
    }
}

/*==========MEGA MENU END ================*/


#top_header {
    padding: 20px;
    background: #ffffff;
}


.profile_header .nav-link {
    font-weight: bold;
    font-size: 15px;
}

.profile_header .gicon {
    font-size: 30px;
}

#main_nav .nav-link {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}

#main_nav .nav-item {
    padding: 0 12px;
}



.logo.logo-width-1 {
    margin: 0;
}

.logo.logo-width-1 a img {
    width: 300px;
}

div#header_search > input {
    height: 45px;
    border: 1px solid #3bb77e;
    min-width: 300px;
}

div#header_search > button[type=submit] {
    height: 45px;
    padding: 15px;
}

.hotline .material-icons-round {
    font-size: 2.5rem;
    color: #3bb77e;
}

select[readonly]{
    pointer-events: none;
}

#dismis_alert {
    position: fixed;
    top: 0;
    right: 0;
    margin: 20px;
    z-index: 999;
}
.logo_preview {
    width: 50px;
    height: 50px;
    border: 3px solid #3bb77e;
    border-radius: 50%;
    object-fit: contain;
}

#step_head {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 1.1rem;
    align-items: center;
}

.step {
    display: grid;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    opacity: .7;
    color: #000000;
}

.step.active{
    font-size: 1.2rem;
    opacity: 1;
}

.step > span:first-child {
    font-size: 1.5rem;
    color: #ffffff;
    background: #b1b1b1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    justify-content: center;
    margin: 0 auto;
}

.step.active > span:first-child{
    background: #3bb77e;
}

.step_line {
    border-top-width: 1px;
    border-top-style: solid;
    flex: auto;
    height: 0;
    min-width: 32px;
    max-width: 100px;
    margin: 0 20px;
}

.loader > span {
    animation: rotation 2s infinite linear;
}

.loader {
    width: 100%;
    text-align: center;
    color: #3bb77e;}

@keyframes rotation {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.products_filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.products_filters > div {
    min-width: 40%;
    text-align: center;
    background: #3bb77e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px ;
    border: none;
    border-radius: 4px;
    margin: 10px 0;

}

.products_filters > input:nth-child(3) {
    width: 25%;
    height: 45px;
}

.products_filters > select:nth-child(4) {
    width: 35%;
    height: 45px;
}


.dropzone {
    border: 0.2rem dashed #3bb77e;
    padding: 0.5rem;
    border-radius: 0.25rem;
    color: #3bb77e;
    background-color: transparent;
    text-align: center;
    font-size: 1.5rem;
    transition: 0.25s background-color ease-in-out;
    cursor: pointer;
}
.dropzone > input {
    display: none;
}

.dropzone > span{
    font-size: 4rem;
    max-width: 75px;
    display: block;
    margin: 0 auto 1.5rem;
}

#image_zone, #gallery_zone {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    /*flex-wrap: wrap;*/
    overflow: auto;
}



#infinite_loader {
    display: none;
    height: 2px;
    background: #3bb77e;
    transition: all .3s ease-in-out 0s;
    transform: translateX(100%);
    animation: horizontal-loader 1.5s cubic-bezier(.2,.5,.4,.7) infinite;
    animation-delay: .1s;
    margin: 10px 0;
}

@keyframes horizontal-loader {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.product_image > span {
    position: absolute;
    color: #f00;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid;
    left: 0;
}

.product_image {
    min-width: 150px;
    position: relative;
    border: .1px solid #e3e3e3
}

.tooltip_icon {
    color: #3bb77e;
}

#expand_icon {
    position: absolute;
    right: 0;
    top: 5px;
}

#header_banner {
    background-position: center;
    height: 550px;
    background-size: cover;
    position: relative;
    margin-top: 20px;
}

.header_banner_content {
    text-align: center;
    position: absolute;
    top: 40%;
    -ms-transform: translateY(-50%);
    transform: translate(-50%, -50%);
    left: 50%;
    width: 75%;
}

.header_banner_description p {
    font-size: 2rem;
    font-weight: bold;
    color: #55ba00;
    margin-top: 20px;
}

.header_banner_button {
    margin-top: 20px;
}

.slider-arrow .slider-btn > span {
    margin-top: 10px;
}

.vendor-wrap .vendor-content-wrap {
    flex: 1;
}

.contact-infor > li {
    display: flex;
    gap: 5px;
}

.archive-header-3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.archive-header-3 .archive-header-3-inner {
    position: relative;
    z-index: 2;
}

.seller_header_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000a8;
    z-index: 1;
}

.vendor-logo {
    margin-right: 50px;
}

.vendor-logo img {
    width: 200px;
    height: 200px;
    border-radius: 5px;
    border: none;
}

.vendor-content {
    flex: 1;
}

.vendor-logo-prod img {
    width: 100px;
    border-radius: 5px;
}

.primary-sidebar .sidebar-widget {
    padding: 20px 30px;
}

.shop-product-fillter {
    margin: 0;
}

.card-2 figure img {
    max-width: 150px;
}

.sort-by-dropdown ul li a.active::before{
    content: "\e876";
}

select{
    height: initial;
}

#sort_ > select {
    font-size: 14px;
}



.box_role_desc{
    padding: 20px 0;
}

.roles_benefits {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
}

.sidebar-widget {
    background: #fff;
    padding: 5px 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.widget-title {
    margin-bottom: 5px;
}

.widget-title > p {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
}

.sidebar-widget:first-child {
    margin-top: 0;
}

button.submit, button[type='submit'] {
    border-radius: 4px;
}

.product-info {
    margin: 20px 0;
}

.product-detail {
    background-color: #ffffff;
    padding: 20px 10px;
}


.f-thumbs__slide {
    border: 1px solid #eaeaea;
}

.f-thumbs__slide.is-selected {
    border: 1px solid #3bb77e;
}

.is-modern .f-thumbs__slide {
    transform: translate3d(calc(0 * -1px), 0, 0);
}

.product-detail .description {
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    padding: 5px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.detail-info .product-price .current-price {
    font-size: 30px;
}

.login_wrap {
    padding: 30px 20px;
    background: #fff;
    border-radius: 8px;
}

/*---------REGISTER PLAN---------------*/
.plan_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.radio_plan {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    margin: 10px;
}

#radio_card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.radio_plan_details:hover {
    box-shadow: 0 0 11px 0 rgba(78, 42, 222, 0.03), 0 8px 16px 0 rgb(78 42 222 / 16%);
    opacity: 1;
}

.radio_plan:checked{
    border: 2px solid red;
}

.radio_plan_details {
    padding: 2px 10px;
    height: 100%;
    opacity: .5;
}

.radio_plan:checked + .radio_plan_details {
    box-shadow: 0 0 11px 0 rgba(78, 42, 222, 0.03), 0 8px 16px 0 rgb(78 42 222 / 16%);

    opacity: 1;
}

/*---------REGISTER PLAN---------------*/


.footer_widget {
    margin-top: 20px;
}

.footer_widget_title {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.footer_widget > ul > li > a {
    font-size: 15px;
}

#page{
    margin: 70px 0;
}

.page_description {
    margin: 20px 0;
}

.mobile-nav {
    max-height: 300px;
    overflow: auto;
}


.cart-dropdown-wrap {
    padding: 10px;
}

.cart-dropdown-wrap ul li {
    margin-bottom: 5px;
}

.dashboard-menu ul li a {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
}


div#crud_product {
    background: #ffffff;
    border-radius: 5px;
    padding: 20px 10px;
}

.form-select {
    height: 40px;
    margin: 7px 0;
}


.product_card_title {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 18px;
    white-space: initial;
    word-break: break-word;
    color: inherit;
    text-decoration: none;
}

.product_card_by {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 28px;
    white-space: initial;
    word-break: break-word;
    color: inherit;
    text-decoration: none;
}
.f-carousel__slide {
    border: 1px solid rgb(59 183 143 / 21%);
}


.profile_header {
    display: flex;
    gap: 10px;
}

.notification_number {
    font-size: 80%;
    font-weight: 700;
    line-height: 18px;
    vertical-align: middle;
    min-width: 18px;
    height: 18px;
    text-align: center;
    display: inline-block;
    color: #fff;
    border-radius: 9px;
    background-color: #ff0000;
    position: absolute;
    top: 0;
    z-index: 1;
    right: 15px;
}

.notifications_bell {
    padding: 0;
    min-width: 270px;
    max-height: 350px;
    overflow: auto;
}

.notifications_bell > li {
    padding: 10px 10px;
    border-bottom: 0.5px solid #55ba0052;
}

.notifications_bell > li:last-child {
    border-bottom: none;
}

.notifications_bell > li > p {
    font-size: 13px;
}

.notifications_bell > li > p > a {
    font-size: 15px;
}

.notification_unread {
    background: rgba(59, 183, 126, 0.12);
}


.product_list_image {
    max-width: 150px;
    border-top-left-radius: 8px;
    overflow: hidden;
}

.product_list_image .product-badges.product-badges-position {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 9;
}

.product_list_image .product-badges span {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    border-radius: 8px 0 20px 0;
    color: #fff;
    padding: 6px 13px 6px 13px;
}

.product_list_image .product-badges span.deactivated {
    background-color: #e02a1d;
}

.product_list_image .product-badges span.new {
    background-color: #3BB77E;
}

.product_list {
    display: flex;
    gap: 10px;
}

.product_list_content {
    display: flex;
    flex-direction: column;
}

.rating-stars {
    --size: 50px;
    --rating: 5;
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--size);
    line-height: 1;
}

.rating-stars::before {
    content: '\2605\2605\2605\2605\2605';
    letter-spacing: 3px;
    background: linear-gradient(90deg, #FFD700 var(--percent), #d3d3d3 var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

label.default_product_image > input {
    position: absolute;
    margin: 5px;
}

.in_approval {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: #ff0000b5;
    color: #fff;
    padding: 5px 10px;
}

.rejected {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: #4c2fdc;
    color: #fff;
    padding: 5px 10px;
}

.approved {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: rgb(1 143 0 / 81%);
    color: #fff;
    padding: 5px 10px;
}

#needs_payment {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: rgba(255, 181, 0, 0.87);
    color: #fff;
    padding: 5px 10px;
}

.user_gallery {
    padding: 5px;
}

input[name="gallery_images[]"], input[name="images[]"] {
    width: 25px;
    height: 25px;
}
span.val_here {
    padding: 0 5px;
}

.alert-dismissible {
    padding-right: 5px;
}

/*----------RESPONSIVE------------*/

/* Extra large devices (large laptops and desktops, 1200px and down) */
@media only screen and (max-width: 1200px) {
    #header_banner {
        height: 400px;
    }
}

/* Large devices (laptops/desktops, 992px and down */
@media only screen and (max-width: 992px) {
    #header_banner {
        height: 350px;
    }

    .product-sidebar {
        margin-top: 20px;
    }
}

/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width: 768px) {
    #header_banner {
        height: 250px;
    }
    .header_banner_content {
        top: 50%;
    }

    .header_banner_description p {
        font-size: 1.5rem;
    }

    .vendor-logo {
        text-align: center;
        margin-right: 0;
    }

    #top_header {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .logo.logo-width-1 a img {
        width: 170px;
    }

    .logo.logo-width-1 {
        position: unset;
        transform: unset;
        vertical-align: bottom;
    }
}

/* Small devices (portrait tablets and large phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .product-cart-wrap .product-card-bottom {
        display: grid;
        justify-content: initial;
        gap: 10px;
    }

    .product-cart-wrap .product-content-wrap .product-price {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .add-cart {
        align-items: center;
        display: grid;
    }

    .add {
        text-align: center;
    }

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 540px) {
    #header_banner {
        height: 200px;
    }

    .header_banner_description p {
        margin-top: 0px;
        font-size: 1rem;
    }
}

/* Extra small devices (phones, 450px and down) */
@media only screen and (max-width: 450px) {
    .container {
        padding: 0;
    }
}

.color-picker {
    max-width: 70px;
}

.rating-box {
    position: relative;
    background: #fff;
    padding: 0 10px 0;
}

.rating-box header {
    font-size: 22px;
    color: #dadada;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}
.rating-box .stars {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stars i {
    color: #e6e6e6;
    font-size: 25px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.stars i.active {
    color: #ff9c1a;
}

.padding-right {
    padding: var(--bs-dropdown-item-padding-y) 0;
}