@font-face {
    font-family: 'ProximaNovaCond-Regular';
    src: url('/Portals/_default/Skins/ShopJuzo_5_0/webfonts/proximanovacond-regular-webfont.woff2') format('woff2'), url('/Portals/_default/Skins/ShopJuzo_5_0/webfonts/proximanovacond-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaCond-Bold';
    src: url('/Portals/_default/Skins/ShopJuzo_5_0/webfonts/proximanovacond-bold-webfont.woff2') format('woff2'), url('/Portals/_default/Skins/ShopJuzo_5_0/webfonts/proximanovacond-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {font-family: ProximaNovaCond-Regular !important; font-size: 62.5% !important;}

body {
    overflow-y: scroll;
}

.Normal, body, div, p, table, .formlabel, input, textarea, select {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 1.5rem !important;
    line-height: 2.2rem;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

h1 {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 3.0rem !important;
    font-weight: normal !important;
    line-height: 3.2rem !important;
}
h2 {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 2.2rem !important;
    font-weight: normal !important;
    line-height: 3.0rem !important;
}
h3 {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 2.0rem !important;
    font-weight: normal !important;
    line-height: 2.8rem !important;
}
h4 {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 1.8rem !important;
    font-weight: normal !important;
    line-height: 2.6rem !important;
}
h5 {
    font-family: ProximaNovaCond-Regular !important;
    font-size: 1.6rem !important;
    font-weight: normal !important;
    line-height: 2.2rem !important;
}

.tooltip.bs-tooltip-top {
    margin-bottom: 10px !important; /* Adjust this value to push it higher or lower */
}

.custom-tooltip-swatch {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    border: 2px solid #fff;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tooltip-inner {
    padding: 8px 12px !important;
    max-width: 200px !important;
}

.light-tooltip {
    --bs-tooltip-bg: var(--bs-light, #f8f9fa) !important;
    --bs-tooltip-color: var(--bs-dark, #212529) !important;
}

    .light-tooltip .tooltip-inner {
        border: 1px solid #dee2e6;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 6px;
    }

.text-bg-light.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-light) !important;
}

.text-bg-light.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-light) !important;
}

.text-bg-light.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-light) !important;
}

.text-bg-light.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-light) !important;
}

.text-bg-light .tooltip-inner {
    color: var(--bs-dark) !important;
}


.border-dashed {
    border-style: dashed !important;
}

.border-primary {
    border-color: #00AC82 !important;
}


.statustrackeroverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statustrackerloadertext {
    margin-top: 15px;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.statustrackerspinner {
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #00AC82; /* Your brand color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/*Image Rollover Styles*/


flip-card {
    perspective: 1000px;
    width: 300px;
    height: 200px;
}

.flip-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}


flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.flip-back {
    background: #fff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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


.card-overlay {
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 */
    background: rgba(255, 255, 255, 0.55); /* semi‑transparent */
    backdrop-filter: blur(2px); /* soft blur (optional; requires support) */
    z-index: 10; /* above card content */
    pointer-events: auto; /* capture mouse/touch to block underlying interactions */
    display: flex; /* center optional content */
    align-items: center;
    justify-content: center;
}

    .card-overlay .overlay-content {
    }
   
 .carousel-indicators {
    bottom: -25px !important;
}

    .carousel-indicators button {
        background-color: rgba(0,0,0,.5) !important;
    }

    .carousel-indicators .active {
        background-color: #00AC82 !important;
    }

#faq-chatbot {
    width: 350px;
    border: 1px solid #ccc;
    padding: 10px;
    font-family: Arial;
}

#chat-window {
    height: 300px;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.message {
    margin: 5px 0;
}

.user {
    text-align: right;
    color: #00AC82;
}

.bot {
    text-align: left;
    color: #333;
}

.botquestion {
    text-align: left;
    color: #000;
    font-weight: bold;
}


.text-bg-success.gradient {
    background-image: linear-gradient(135deg, #198754, #20c997);
}

.text-bg-warning.gradient {
    background-image: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #1f1f1f;
}

.text-bg-danger.gradient {
    background-image: linear-gradient(135deg, #dc3545, #fd4d65);
}

.form-control:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(0,172,30,0.25);
    box-shadow: 0 0 0 0.25rem rgba(0,172,30,0.25);
}


a.aspNetDisabled {
    color: #E0E0E0 !important;
    background-color: transparent !important;
    border: solid 0px #C0C0C0;
    pointer-events: none;
    cursor: default;
}

.text-juzogreen {
    color: #00AC82 !important;
}

.text-gold {
    color: #AC8200 !important;
}
.text-cyan {
    color: #009EAC !important;
}

.text-red {
    color: #AC002A !important;
}

.cart-primary {
    color: #00AC82 !important;
}

    .cart-primary:hover {
        color: #40D9B2 !important;
    }

.cart-gold {
    color: #AC8200 !important;
}

    .cart-gold:hover {
        color: #FFB733 !important;
    }

.cart-cyan {
    color: #009EAC !important;
}

    .cart-cyan:hover {
        color: #4DD0E1 !important;
    }

.cart-danger {
    color: #dc3545 !important;
}

    .cart-danger:hover {
        color: #FF0000 !important;
    }

.cart-disabled {color:#E0E0E0;}
    .cart-disabled:hover {
        color: #E0E0E0;
    }

.cart-success {
    color: #198754 !important;
}
    .cart-success:hover {
        color: #4DBE8A !important;
    }

.cart-on-demand{color: #9b59b6;}
.cart-backorder {color: #FF4C4C;}
.cart-partial-backorder {color: #FF7F50;}
.cart-mtm {color: #5DADE2;}
.cart-marketing {color: #F06292;}

.product-list-title {
    color: #00AC82;
    font-size: 1.5rem !important;
}

.NormalRed {
    text-align:center;
    padding: 1rem 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    border: 1px solid #f1aeb5 !important;
    border-radius: 10px !important;
    background-color: #f1aeb5 !important;
    position: relative;
    max-width:450px;
}



.LoginPanel {
    padding-right:0px !important;
    width: 100% !important;
}

.dnnFormMessage.dnnFormValidationSummary {
    background-color: transparent !important;
    border-color: transparent !important;
}

.inside {
    color: #ff0000;
}

.offcanvas-body a {
    color: #AC8200;
    text-decoration: none;
}

    .offcanvas-body a:hover {
        color: #40D9B2;
        text-decoration: none;
    }

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 8px 8px 5px 8px !important;
    font-size: 1.5rem !important;
    line-height: 1.5;
    border-radius: .25rem .25rem .25rem .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
}

.btn-shadow {
    /*box-shadow: 1px 1px 5px #707070;*/
}

.btn-primary {
    background-color: #00AC82 !important;
    border-color: #00AC82 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    background-color: #ffffff !important;
    border-color: #00AC82 !important;
    color: #00AC82 !important;
}

.btn-primary:hover {
    background-color: #40D9B2 !important;
    border-color: #40D9B2 !important;
    color: #ffffff !important;
 }

.btn-outline-primary:hover {
    background-color: #40D9B2 !important;
    border-color: #00AC82 !important;
    color: #ffffff !important;
}

.btn-gold {
    background-color: #AC8200 !important;
    border-color: #AC8200 !important;
    color: #ffffff !important;
}

.btn-gold:hover {
    background-color: #FFB733 !important;
    border-color: #FFB733 !important;
    color: #ffffff !important;
}

.btn-outline-gold {
    background-color: #ffffff !important;
    border-color: #AC8200 !important;
    color: #AC8200 !important;
}

    .btn-outline-gold:hover {
        background-color: #FFB733 !important;
        border-color: #AC8200 !important;
        color: #ffffff !important;
    }

.btn-cyan {
    background-color: #009EAC !important;
    border-color: #009EAC !important;
    color: #ffffff !important;
}

.btn-cyan:hover {
    background-color: #4DD0E1 !important;
    border-color: #4DD0E1 !important;
    color: #ffffff !important;
}

.btn-outline-cyan {
    background-color: #ffffff !important;
    border-color: #009EAC !important;
    color: #009EAC !important;
}

    .btn-outline-cyan:hover {
        background-color: #4DD0E1 !important;
        border-color: #009EAC !important;
        color: #ffffff !important;
    }

.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

    .btn-danger:hover {
        background-color: #f06a77 !important;
        border-color: #dc3545 !important;
        color: #ffffff !important;
    }

.btn-outline-danger {
    background-color: #ffffff !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

    .btn-outline-danger:hover {
        background-color: #f06a77 !important;
        border-color: #dc3545 !important;
        color: #ffffff !important;
    }

.btn-outline-success {
    background-color: #ffffff !important;
    border-color: #198754 !important;
    color: #198754 !important;
}

    .btn-outline-success:hover {
        background-color: #4fbf90 !important;
        border-color: #198754 !important;
        color: #ffffff !important;
    }

.btn-outline-warning {
    background-color: #ffffff !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

    .btn-outline-warning:hover {
        background-color: #ffd35c !important;
        border-color: #ffc107 !important;
        color: #ffffff !important;
    }

.btn-secondary {
    background-color: #C0C0C0 !important;
    border-color: #C0C0C0 !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: #707070 !important;
    border-color: #707070 !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    background-color: #FFFFFF !important;
    border-color: #C0C0C0 !important;
    color: #C0C0C0 !important;
}

    .btn-outline-secondary:hover {
        background-color: #707070 !important;
        border-color: #C0C0C0 !important;
        color: #ffffff !important;
    }

.btn-black {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

    .btn-black:hover {
        background-color: #707070 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }

.btn-outline-black {
    background-color: #FFFFFF !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

    .btn-outline-black:hover {
        background-color: #c0c0c0 !important;
        border-color: #000000 !important;
        color: #000000 !important;
    }


.nav-color-bar {
    background-color: #00a886;
    margin-bottom: 0px;
}
.nav-color-bar-bca {background-color: #EA80B0; margin-bottom: 0px;}

nav {
    display: flex;
    justify-content: space-around;
    position: relative;
    align-items: center;
}

    nav a {
        color: white !important;
        text-decoration: none;
        padding: 5px 0px;
        margin: 0px 40px;
        position: relative;
        font-size: 18px;
        transition: color 0.3s ease;
    }

        nav a:hover {
            color: #80d7c5 !Important;
        }

.indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: white;
    transition: left 0.3s ease, width 0.3s ease;
}

/* Gridview Pager */


.grid-pager {
    padding: 8px 0 !important;
    font-size: 14px;
}

    .grid-pager a, .grid-pager span span {
        margin: 0 4px;
        padding: 6px 10px;
        border-radius: 4px;
        text-decoration: none;
    }

    .grid-pager a {
        border: 1px solid #ddd;
        color: #333;
    }

    .grid-pager span span { /* current page */
        background: #00AC82; /* your brand color */
        color: #fff;
        border: 1px solid #00AC82;
    }



/*
.nav li a:link {color: #ffffff !important; font-size: 1.6rem !important; font-weight: bold !important; background-color: Transparent !important; margin: 0px 0px 0px 0px !important;}
.nav li a:active {color: silver !important;}
.nav li a:visited {color: white !important;}
.nav li a:hover {color: #80d7c5 !important;}*/

/*remove after new nav compklete*/
/*.dropdown-menu {
    background-color: #ffffff;
    white-space: nowrap;
    max-width: none !important;
    border: 1px solid #eaeaea;
    box-shadow: rgba(0,0,0,0.4) 3px 3px;
    top: 39px;
}

.dropdown-ordering {
    top: 34px;
    left: 0;
    width: 690px;
    min-width: 690px;
}

    .dropdown-ordering .arrow {
        position: absolute;
        left: 27px;
        top: -18px;
    }

.dropdown-account {
    top: 42px;
    left: 0;
    width: 690px;
}

    .dropdown-account .arrow {
        position: absolute;
        left: 27px;
        top: -18px;
    }


.dropdown-carts {
    top: 34px;
    left: 0;
    width: 200px;
    min-width: 200px;
}

    .dropdown-carts .arrow {
        position: absolute;
        left: 27px;
        top: -18px;
    }

.dropdown-menu a.dropdown-nav:link {
    color: #000000 !important;
    margin: 0px 0px !important;
}

.dropdown-menu a.dropdown-nav:active {
    color: #000000 !important;
    margin: 0px 0px !important;
}

.dropdown-menu a.dropdown-nav:visited {
    color: #000000 !important;
    margin: 0px 0px !important;
}

.dropdown-menu a.dropdown-nav:hover {
    color: #00a995 !important;
    margin: 0px 0px !important;
}*/


.cartlbl1 {
    color: #00a885;
}

.cartlbl2 {
    color: #000;
}

.cartlbl3 {
    color: #ff0000 !important;
}

.cartlbl4 {
    color: #0a80f1 !important;
}

.cartlbl5 {
    color: #fcad03 !important;
}

.cartlbl6 {
    color: #be03fc !important;
}

.cartlbl7 {
    color: #F041B0 !important;
}

.CBcolorSwatch {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    margin-right: 10px;
}

.mtmForm1 {
    z-index: 100;
    position: absolute;
}

.mtmForm2 {
    z-index: 1000;
    position: absolute;
}

.tooltip.show {
    filter: alpha(opacity=100) !important;
    opacity: 1.0 !important;
}

.ui-autocomplete {z-index: 2000 !important; position: absolute;}

.ui-menu {
    border: 1px solid #00a885;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 300px;
    z-index: 2000 !important;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 2px 2px 3px #707070;
    margin-top: 10px !important;
    max-height: 450px;
    overflow-y: scroll;
    overflow-x: hidden}

.ui-menu-item {
    cursor: pointer;
    list-style-type: none;
    margin-bottom: 5px;
}

    .ui-menu-item a {
        text-decoration: none;
    }

.psItem1 {

    color: #00a885;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2.0rem;
    margin-right:20px;
}

.psItem2 {
    float:right;
    color: #00a885;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2.0rem;
}

.psItem3 {
    color: #707070;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 5px;
    font-size: 1.5rem;
    line-height: 2.0rem;
    margin-bottom:10px;
}

.ui-state-highlight {
    font-weight: bold;
    background-color: Highlight;
    color: HighlightText;
}