html.dark {
    background-color: #161617;
    color:#f5f5f7;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s, color 0.3s;
}
    html.dark body, html.dark body i, html.dark body p, html.dark body a, html.dark body label, html.dark body h1, html.dark body h2, html.dark body h3, html.dark body h4,
    html.dark body h5, html.dark body h6 {
        color: #f5f5f7 !important;
    }

    html.dark .header-top, html.dark .category-default .category-content {
        background: #8c8d8f;
    }

    html.dark .header-middle, html.dark .megamenu, html.dark .menu ul, html.dark .select-box select, html.dark .tab-content {
        background-color: #161617;
        color: #f5f5f7;
    }

    html.dark body .service-list .icon-box-title, html.dark body .widget-products .widget-title, html.dark body .title-link,
    html.dark body .icon-boxes-section .icon-box-title, html.dark body .title, html.dark body .product-price, html.dark .toolbox .select-box .form-control,
    html.dark .breadcrumb li:last-child, html.dark .product-name, html.dark .input-group .form-control, html.dark .input-group button {
        color: #f5f5f7 !important;
    }

    html.dark .grey-section, html.dark .toolbox {
        background-color: #161617;
    }


    html.dark .sticky-header.fixed, html.dark .menu li > ul, .menu li .megamenu {
        box-shadow: 0 2px 5px rgb(235 234 234 / 10%);
    }


    html.dark .btn-product-icon {
        background-color: #b1aeae
    }

    html.dark #menu1 .megarow .megaitems {
        border-right: 1px solid #2a2a2a;
    }

        html.dark #menu1 .megarow .megaitems:first-child {
            border-right: none;
        }

    html.dark .color-active {
        border: 1px solid #fff !important
    }

    html.dark #div-shoppingcart-top .dropdown-box {
        background-color: #161617;
        color: #f5f5f7;
        box-shadow: -2px 2px 9px 4px rgb(235 234 234 / 10%);
    }

    html.dark #div-shoppingcart-top:after {
        border-bottom: 11px solid #161617 !important;
    }

    html.dark .cart-dropdown .cart-total .price, html.dark .product.product-cart-header span, html.dark .product.product-cart-header a, html.dark .summary-title,
    html.dark .shop-table th, html.dark .testimonial-info cite {
        color: #f5f5f7;
    }

    html.dark .cart.main .product-thumbnail i {
        color:#000 !important;
    }

    html.dark .accordion-background .card, html.dark .header-search.hs-toggle .input-wrapper {
        background-color: #161617;
        color: #f5f5f7;
        box-shadow: -2px 2px 9px 4px rgb(235 234 234 / 10%);
    }

    html.dark .header-search.hs-toggle::after {
        border-bottom: 11px solid #161617;
    }

    html.dark .step-by .title.title-step.visited ~ .active::before {
        color: #f5f5f7;
    }

    html.dark .shopping .imghovere .btn, html.dark .count-inner {
        color: #222 !important;
    }

    html.dark .card-address-top, html.dark .card-address {
        background-color: #161617;
        color: #f5f5f7;
    }

    html.dark #logo-top, html.dark .logo-footer img {
        filter: brightness(0) saturate(100%) invert(100%);
    }

    html.dark .mfp-product .product, html.dark .white-popup-block, html.dark .minipopup-box {
        background-color: #514d4d;
    }

    html.dark .promotion-text p {
        color: #222 !important;
    }

    html.dark .product-variations > a.active, html.dark  .product-variations > a:not(.size-guide):hover {
        box-shadow:none !important;
    }

    html.dark .product.product-cart .btn-close i {
        color: #000 !important;
    }
/*--------------------------------------------------*/
.custom-switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    display: block;
    border-style: none;
    outline-offset: 2px;
    outline: transparent solid 2px;
    cursor: pointer;
    margin-left: 1.5rem;
}

    .custom-switch .moon svg {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        width: 20px;
        height: 20px;
        color: rgb(107 114 128 / 1);
        display: block;
        vertical-align: middle;
        border-style: none;
    }

    .custom-switch .sun svg {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 1;
        width: 19px;
        height: 19px;
        color: rgb(242 242 242 / 1);
        border-style: none;
    }

    .custom-switch input {
        opacity: 0;
        width: 0px;
        height: 0px;
        outline-offset: 2px;
        outline: transparent solid 2px;
        border-style: none;
        --tw-translate-x: 1000px;
        transform: translate(10000px, 0) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
        position: absolute;
    }
    .custom-switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgb(58, 58, 58);
        transition: 0.4s;
        border-radius: 300px;
        border-style: none;
    }
.custom-switch .input:checked + .slider {
    background-color: rgb(206, 206, 206);
}
.custom-switch .slider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    z-index: 2;
    background-color: #212121;
    border-radius: 20px;
    transition: 0.4s;
}
.custom-switch .input:checked + .slider::before {
    transform: translate(29px);
    background: #f2f2f2;
}