.clockpicker-button-2{
            width: 20% !important;
            margin: 1rem auto !important;
            padding: 6px !important;
        }

        .usernav .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
           color: #fff !important;
           background-color: <?php echo $themeColor; ?> !important;
        }

        .usernav .navbar-nav {
            margin: 7.5px -15px;
            padding-left: 15px;
            padding-right: 15px;
        }
        .top_check{
            margin: 10px 0!important;
            appearance: none;
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border: 2px solid #111; /* Black border */
            border-radius: 4px;
            cursor: pointer;
        }
        .top_check:checked {
            background-color: <?php echo $themeColor; ?>; /* Black background */
        }

        .top_check:checked::after {
            content: '✔'; /* You can customize this to any checkmark symbol */
            color: white;
            font-size: 10px;
            display: block;
            text-align: center;
            /*line-height: 30px;*/
        }               
        .topping-label{
            margin-bottom: 0px !important;
        }

        /*customize new design start*/
        span.modelProductPrice {
            float: right;
            padding-right: 5px;
        }

        .topping-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .topping-checkbox input {
            cursor: pointer;
        }

        .topping-options {
            display: none;
            text-align: left;
        }

        .side-button:hover {
            background-color: #ccc !important;
        }

        .side-button {
            background-color: #f0f0f0 !important;
            color: #000 !important;
            border: 1px solid #ccc !important;
            padding: 6px 18px;
            cursor: pointer;
            font-size: 12px;
        }

        .side-button.active {
            background-color: <?php echo $themeColor; ?> !important;
            color: #fff !important;
            border-color: <?php echo $themeColor; ?> !important;
        }

        .topping-label {
            display: flex;
            align-items: center;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }

        .topping-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-left: 10px;
        }

        .topping-title {
            flex: 1;
        }

        .topping-price {
            flex-shrink: 0;
            margin-left: 20px;
        }

        @media (max-width: 767px) {
            .side-button {
                padding: 6px 10px;
                font-size: 11px;
            }
        }
        /*customize new design end*/



        #__timepicker[disabled] {
            cursor: not-allowed;
        }

        #__timepicker[disabled]::before {
            content: " ";
            cursor: not-allowed;
            background-color: rgba(255, 0, 0, 0.2);
        }

        #__timepicker[disabled]:hover {
            cursor: not-allowed;
            border: 1px solid red;
        }






        /*cutomize product css start*/
        #accordion_customization .panel-body {
            padding: 5px;
        }

        #accordion_customization .productToppingsContainer {
            margin-top: 0px !important;
        }

        #accordion_customization .premiumToppingsContainer {
            margin-top: 0px !important;
        }

        #accordion_customization .panel-title a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #accordion_customization .panel-title a i {
            transition: transform 0.3s;
        }

        #accordion_customization .panel-collapse.in + .panel-heading .panel-title a i,
        #accordion_customization .panel-collapse.collapsing + .panel-heading .panel-title a i {
            transform: rotate(90deg);
        }

        #accordion_customization .panel-title a[aria-expanded="true"] i {
            transform: rotate(90deg);
        }



        /*cutomize product css end*/


        .pizzaro-handheld-footer-bar ul li > a{
            text-indent:unset !important;
        }


        .pizzaro-handheld-footer-bar ul li > a:before {
            top: -54px !important;
        }

        button, .button, #scrollUp, .header-v1, .header-v2, .header-v3, .header-v4, .header-v5, .added_to_cart, input[type="reset"], input[type="submit"], input[type="button"], .dark .create-your-own a, .owl-dots .owl-dot.active, .pizzaro-handheld-footer-bar, .widget_nav_menu .menu li:hover, .related > h2:first-child:after, .upsells > h2:first-child:after, .widget_nav_menu .menu li::after, .section-products .section-title:after, .pizzaro-handheld-footer-bar ul li > a, .banners .banner .caption .banner-price, .section-tabs .nav .nav-item.active a::after, .products-with-gallery-tabs.section-tabs .nav, .section-recent-post .post-info .btn-more:hover, .section-sale-product .price-action .button:hover, .list-no-image-view ul.products li.product::before, .woocommerce-account .customer-login-form h2::after, .section-coupon .caption .coupon-info .button:hover, .page-template-template-homepage-v2 .header-v2.stuck, .woocommerce-cart .pizzaro-order-steps ul .cart .step, .list-no-image-cat-view ul.products li.product::before, .pizzaro-handheld-footer-bar ul li.search .site-search, .widget.widget_price_filter .ui-slider .ui-slider-handle, .list-no-image-view .products .owl-item > .product::before, .list-no-image-view ul.products li.product .button:hover, .woocommerce-checkout .pizzaro-order-steps ul .cart .step, .woocommerce-cart .cart-collaterals + .cross-sells h2::after, .footer-v1.site-footer .site-address .address li + li::before, .list-no-image-cat-view ul.products li.product .button:hover, .header-v4.lite-bg .primary-navigation .menu > li > a::before, .woocommerce-checkout .pizzaro-order-steps ul .checkout .step, .kc-section-tab.kc_tabs .kc_tabs_nav > .ui-tabs-active > a::after, .list-no-image-view .products .owl-item > .product .button:hover, .page-template-template-homepage-v6 .footer-social-icons ul li a:hover, .list-view.left-sidebar.columns-1 ul.products li.product .button:hover, .products-card .media .media-left ul.products li.product .button:hover, .products-card .media .media-right ul.products li.product .button:hover, .page-template-template-homepage-v6 .primary-navigation > ul > li:hover, .list-view.right-sidebar.columns-1 ul.products li.product .button:hover, .page-template-template-homepage-v6 .secondary-navigation .menu li:hover, .page-template-template-homepage-v6 .secondary-navigation .menu li::after, .page-template-template-homepage-v6 .main-navigation ul.menu ul li:hover > a, .list-view.left-sidebar.columns-1 .products .owl-item > .product .button:hover, .list-view.right-sidebar.columns-1 .products .owl-item > .product .button:hover, .woocommerce-order-received.woocommerce-checkout .pizzaro-order-steps ul .step, .page-template-template-homepage-v6 .main-navigation ul.nav-menu ul li:hover > a, .page-template-template-homepage-v2 .products-with-gallery-tabs.section-tabs .nav, .stretch-full-width .store-locator .store-search-form form .button, .banner.social-block .caption .button:hover, .wpsl-search #wpsl-search-btn, .lite-bg.header-v4 .primary-navigation .menu .current-menu-item > a::before{
            background-color: <?php echo $themeColor; ?> !important;
            border-color: <?php echo $themeColor; ?> !important;
        }


        .btn.btn-secondary{
            color: #fff;
            background-color:  <?php echo $themeColor; ?> !important;
            border-color:  <?php echo $themeColor; ?> !important;
        }
       

        .dWoFoS .crt-hdr-ln,.step {
            border-color: <?php echo $themeColor; ?> !important;

        }

        .coupon.btn-group a {
            color: <?php echo $themeColor; ?> !important;
        }

        button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .section-sale-product .price-action .button:hover, .section-recent-post .post-info .btn-more, .section-recent-post .post-info .btn-more:hover, .section-coupon .caption .coupon-info .button:hover, .widget.widget_price_filter .ui-slider .ui-slider-handle:last-child, #order_review_heading::after, #customer_details .woocommerce-billing-fields h3::after, #customer_details .woocommerce-shipping-fields h3::after, .woocommerce-cart .pizzaro-order-steps ul .cart .step, .woocommerce-checkout .pizzaro-order-steps ul .checkout .step, .page-template-template-homepage-v6 .footer-social-icons ul li a:hover, .woocommerce-order-received.woocommerce-checkout .pizzaro-order-steps ul .complete .step, .cart-collaterals h2::after, .widget_nav_menu .menu li:hover a, .page-template-template-contactpage .contact-form h2:after, .page-template-template-contactpage .store-info h2:after, .banner.social-block .caption .button:hover, #byconsolewooodt_checkout_field h2::after {
            border-color: <?php echo $themeColor; ?> !important;
        }


        button.modal-submit.btn.btn-success,.modal-cancel,.currentLocaion a {
            background-color: <?php echo $themeColor; ?> !important;
            border-color: #fff !important; 
            font-weight: bold;
        }


        #removeCartAlert .modal-content .btn-success{
            color: #fff !important;
            background-color: <?php echo $themeColor; ?> !important;
            border-color:#fff !important;
        }

        #removeCartAlert .modal-content .btn-danger{
            color: #fff !important;
            background-color: <?php echo $themeColor; ?> !important;
            border-color:#fff !important;
        }
        #removeCartAlert .close{
            background-color: <?php echo $themeColor; ?> !important;
            align-content: center !important;
            color:<?php echo $themeColor; ?> !important;
            height: 30px !important;
            width: 30px !important;
            border-radius:100px !important
        }
        .remove_card_modal{
            background-color: <?php echo $themeColor; ?> !important;
        }
        .removeCartAlert_title{
            color:#fff !important;
        }
        .removeCartAlert_p p{
            color:#fff !important;
        }



        #checkoutModal .modal-content{
            color: #fff !important;
            background-color: <?php echo $themeColor; ?> !important;
            border-color:#fff !important;
        }


        #checkoutModal .modal-content .btn-success{
            color: #fff !important;
            background-color: <?php echo $themeColor; ?> !important;
            border-color:#fff !important;
            width: 100%;
            padding: 1rem 0;
            
        }

        #checkoutModal .modal-content .btn-danger{
            color: #fff !important;
            background-color: <?php echo $themeColor; ?> !important;
            border-color:#fff !important;
        }
        #checkoutModal .close{
            background-color: <?php echo $themeColor; ?> !important;
            align-content: center !important;
            color:<?php echo $themeColor; ?> !important;
            height: 30px !important;
            width: 30px !important;
            border-radius:100px !important
        }
        #checkoutModalLabel{
            color: #fff;
        }

        #checkoutModal .modal_products_body::-webkit-scrollbar {
            width: 20px; /* Width of the scrollbar */
        }

        /* The "track" of the scrollbar (background) */
        #checkoutModal .modal_products_body::-webkit-scrollbar-track {
            background: transparent; /* Background color of the track */
            padding: 5px; /* Padding inside the track */
        }

        /* The "thumb" of the scrollbar (scroll handle) */
        #checkoutModal .modal_products_body::-webkit-scrollbar-thumb {
            background-color: #000; /* Scrollbar thumb color */
            border-radius: 10px; /* Rounded edges */
            border: 5px solid #f1f1f1; /* Creates padding inside thumb by using border */
        }

        /* Styling for non-WebKit browsers (fallback) */
        #checkoutModal .modal_products_body {
            scrollbar-color: #000 #f1f1f1; /* Thumb color and track color */
            scrollbar-width: thin; /* Thin scrollbar */
        }
        .delivery_st:checked:after {
            width: 16px;
            height: 16px;
            border-radius: 15px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: <?php echo ($themeColor === '#000') ? 'red' : '#000'; ?> !important;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 2px solid  <?php echo ($themeColor === '#000') ? 'red' : '#000'; ?> !important;
        }   
        @media (max-width: 767px) {  
            .delivery_st:checked:after  {
            width: 18px;
            height: 18px;
            border-radius: 11px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: <?php echo ($themeColor === '#000') ? 'red' : '#000'; ?> !important;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 2px solid <?php echo ($themeColor === '#000') ? 'red' : '#000'; ?> ;
            } 
            .modal-content {
                background-color: #c00a27;
                color: #ffffff;
                width: 100%;
                height: auto !important;
                max-height: unset !important; /* Make sure the modal doesn't exceed the viewport height */
                overflow-y: auto !important; /* Enable scrolling if content overflows */
                position: relative; /* Ensure positioning for the footer buttons */
                padding-bottom: 20px !important; /* Make space for footer buttons */
            }        
        }

            /*date:15-5-2023*/
            .modelProductTopping._box_ .toppinsitem {
                overflow: hidden;
                width: auto;
                /* margin-left: 10px; */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 13px;
                margin-right: 5px;
            }

            p.toppinsPrice {
                min-width: 55px;
                margin-left: 10px;
                font-size: 13px;
                margin-left: 5px;
            }

            p.toppinsitem {
                font-size: 13px;
                line-height: 20px;
            }

            ._box_items p {
                font-size: 13px;
                line-height: 20px;
            }
                    

            .form-group.schedule_time label {
                width: 100% !important;
                margin-left: 0px !important;
                margin-top: 10px;
            }

            .ui-timepicker-wrapper {
                width: 220px !important;
                padding-left: 10px !important;
            }

        
        @media (max-width: 767px) {  
            div#scheduleTime input {
                margin-bottom: -10px;
            }

            .ui-timepicker-wrapper {
                z-index: 99999 !important;
            }

            div .selectStrorRadioItem {
                max-height: unset;
                height: auto;
            }

            .modal-cancel {
                padding: 6px 40px;
            }

            button.modal-submit.btn.btn-success {
                padding: 6px 25px;
                margin-top: -15px;
            }


            .modelProductTopping._box_ .toppinsitem {
                font-size: 11px;
                margin-right: 2px;
            }

            p.toppinsPrice {
                font-size: 11px;
                margin-left: 2px;
            }

        }
      
        @media (max-width: 316px) {
            .modal-cancel {
                margin-bottom: 15px !important;
            }
        }

        .form-group.selectStrorRadio p{
            font-weight: 800;
        }

    .toast {
        position: fixed !important;
        bottom: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: <?= $themeColor; ?>;
        color: #fff;
        padding: 10px 20px;
        border-radius: 3px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        z-index: 9999;
    }




    .top_bg{
        background-color: #edebeb !important;
        border-radius: 100px !important;
        padding: 3px !important;
    }

    .toast.success {
        background: <?= $themeColor; ?>;
    }

    .toast.error {
        background: <?= $themeColor; ?>;
    }

    .toast.warning {
        background: <?= $themeColor; ?>;
    }

    .topping-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        border-bottom: 1px solid #e2e0e0 !important;
        padding: 5px;
    }
    @media (max-width: 500px) {
        .topping-item {
            margin-bottom: 5px;
        }

        .toast {
            position: fixed !important;
            bottom: 60px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: <?= $themeColor; ?>;
            color: #fff;
            padding: 10px 20px;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 9999;
            font-size: 12px !important;
        }
    

    }

    
            .jq-toast-wrap.bottom-left {
                bottom: 50px !important;
                right: 0 !important;
                left: 0 !important;
                margin: auto !important;
                z-index: 90002 !important;
                
            }
            .jq-toast-single{
                font-size: 18px !important;
                padding: 16px 10px !important;
            }

            .close-jq-toast-single {
                position: absolute;
                top: 6px !important;
                right: 6px !important;
                font-size: 25px;
                cursor: pointer;
            }

            .modal.left .modal-dialog {
                position: fixed;
                margin: auto;
             width: 420px;
                height: 100%;
                -webkit-transform: translate3d(0%, 0, 0);
                    -ms-transform: translate3d(0%, 0, 0);
                    -o-transform: translate3d(0%, 0, 0);
                        transform: translate3d(0%, 0, 0);
            }

            .modal.left .modal-body{
                margin-bottom: 60px;
            }

            .modal.left .modal-content {
                height: 100%;
                overflow-y: auto;
            }

            .modal.left .modal-body {
                padding: 15px 15px 80px;
            }

        /*Left*/
            .modal.left.fade .modal-dialog{
                left: -320px;
                -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
                -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
                    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
                        transition: opacity 0.3s linear, left 0.3s ease-out;
            }

            .modal.left.fade.in .modal-dialog{
                left: 0;
            }

            @media (max-width: 480px) {
                .modal.left .modal-dialog{
                    width: 100%;
                }
            }

            .modelProductDesc{
                margin-top: 10px;
            }

            ._box_{
                display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; overflow-x:auto;box-shadow: inset -10px 1px 15px #ddd;
                    padding: 10px;
            }

            ._box_items{
                padding:5px;
                border: 1px solid #d3d3d3;
                /* min-width: 300px; */
                min-width:250px;
                margin-right: 10px;
                display: flex;
                flex-direction: row;
                /* justify-content: space-around; */
                align-items: center;
                cursor: pointer;
            }
            
            /* my code */
            ._box_items img {
                width: 70px;
                height: 70px;
                margin-right: 30px; 
            }
            /* end */

            ._box_footer {
                position: fixed;
                bottom: 10px;
                width: 100%;
                text-align: center;
                padding: 10px;
                left: 0;
            }

            .modal.left .yellow_active{
                background: #d3d3d3;
            }

            @media screen and (max-width:991px){
                

                ._box_footer {
                    position: fixed;
                    bottom: 80px;
                }

             }
        
            .jq-toast-wrap.bottom-left {
                bottom: 50px !important;
                right: 0 !important;
                left: 0 !important;
                margin: auto !important;
                z-index: 90002 !important;
                
            }
            .jq-toast-single{
                font-size: 18px !important;
                padding: 16px 10px !important;
            }

            .close-jq-toast-single {
                position: absolute;
                top: 6px !important;
                right: 6px !important;
                font-size: 25px;
                cursor: pointer;
            }

            .modal.left .modal-dialog {
                position: fixed;
                margin: auto;
            /*  width: 420px;*/
                height: 100%;
                -webkit-transform: translate3d(0%, 0, 0);
                    -ms-transform: translate3d(0%, 0, 0);
                    -o-transform: translate3d(0%, 0, 0);
                        transform: translate3d(0%, 0, 0);
            }

            .modal.left .modal-body{
                margin-bottom: 60px;
            }

            .modal.left .modal-content {
                height: 100%;
                overflow-y: auto;
            }

            .modal.left .modal-body {
                padding: 15px 15px 80px;
            }

        /*Left*/
            .modal.left.fade .modal-dialog{
                left: -320px;
                -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
                -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
                    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
                        transition: opacity 0.3s linear, left 0.3s ease-out;
            }

            .modal.left.fade.in .modal-dialog{
                left: 0;
            }

            @media (max-width: 480px) {
                .modal.left .modal-dialog{
                    width: 100%;
                }
            }
@media (max-width: 767px) {
    #myModal .modal-body {
        padding-bottom: 100px !important;
    }
    #myModal ._box_footer {
        position: fixed;
        bottom: 80px;
        z-index: 10000;
        background: #fff;
        padding: 10px;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    }
}

            .modelProductDesc{
                margin-top: 10px;
            }

            /*._box_{
                display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; overflow-x:auto;box-shadow: inset -10px 1px 15px #ddd;
                    padding: 10px;
            }*/

            ._box_ {
                 display: block; 
                /* flex-direction: row; */
                /* flex-wrap: nowrap; */
                align-content: center;
                align-items: center;
                /* overflow-x: auto; */
                padding: 0px;
                overflow-y: auto;
            }

            ._box_items{
                padding:5px;
                border: 1px solid #d3d3d3;
                min-width: 250px;
                margin-right: 10px;
                display: flex;
                flex-direction:row;
                /* justify-content: space-around; */
                align-items: center;
                cursor: pointer;
                margin-bottom: 5px;
            }
            
            ._box_items img {
                width: 70px;
                height: 70px;
                margin-right: 30px; 
            }

            ._box_items .toppinsitem,
            ._box_items .toppinsPrice {
                margin: 0; /* Remove default margins */
            }

            ._box_items .toppinsitem b {
                margin: 0; /* Remove margin around the bold name */
            }

            ._box_items .toppinsPrice span {
                color: #555; /* Adjust text color as needed */
            }
           ._box_footer {
    width: 100%;
    text-align: center;
    padding: 10px 10px;
    left: 0;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: #fff;
}


            .modal.left .yellow_active{
                background: #d3d3d3;
            }


             /* 5 */

    .custom-btn2 {
        width: 200px !important;
        height: 50px !important;
        color: #000 !important;
        border-radius: 5px !important;
        padding: 10px 25px !important;
        font-family: 'Lato', sans-serif !important;
        font-weight: 500 !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        display: inline-block !important;
        box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5) !important,
            7px 7px 20px 0px rgba(0, 0, 0, .1) !important,
            4px 4px 5px 0px rgba(0, 0, 0, .1) !important;
        outline: none !important;
    }
    .btn-6 {
        width: 130px !important;
        height: 40px !important;
        line-height: 42px !important;
        padding: 0 !important;
        border: none !important;
        background: rgb(255, 27, 0) !important;
        background: #fff !important;
    }

    .btn-6:hover {
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .btn-6:before,
    .btn-6:after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        height: 2px !important;
        width: 0 !important;
        background: #fff !important;
        box-shadow:
            -1px -1px 5px 0px #fff !important,
            7px 7px 20px 0px #0003 !important,
            4px 4px 5px 0px #0002 !important;
        transition: 400ms ease all !important;
    }

    .btn-6:after {
        right: inherit !important;
        top: inherit !important;
        left: 0 !important;
        bottom: 0 !important;
    }

    .btn-6:hover:before,
    .btn-6:hover:after {
        width: 100% !important;
        transition: 800ms ease all !important;
    }

    .st-order-btn{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .st-order-btn p{
        margin: 0px !important;
    }
    .__datepicker {
  padding: 6px 12px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 100px !important;
  width: 100% !important;
  font-size: 16px !important;
  background-color: #f9f9f9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
#scheduleTime{
    position: relative !important;
}

.__timepicker {
    padding: 6px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 100px !important;
    width: 100% !important;
    z-index: 10000000 !important; /* Ensure it's on top */
    font-size: 16px !important;
    background-color: #f9f9f9 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

/* Ensure the clockpicker is positioned correctly */
.clockpicker-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

.__datepicker:focus {
  border-color: red !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3) !important;
}

.flatpickr-calendar {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
}

.flatpickr-day {
  transition: background-color 0.3s, color 0.3s !important;
}

.flatpickr-day:hover {
  background-color: red !important;
  color: white !important;
  border-radius: 50% !important;
}

.flatpickr-day.selected {
  background-color: red !important;
  color: white !important;
  font-weight: bold !important;
  border-radius: 50% !important;
}

.flatpickr-day.today {
  border: 1px solid red !important;
  background-color: #ffffff !important;
  color: red !important;
}

.flatpickr-weekdays {
  font-size: 14px !important;
  text-transform: uppercase !important;
  color: #6c757d !important;
}

.flatpickr-month {
  font-size: 16px !important;
  color: #343a40 !important;
}
#scheduleTime{
    margin-bottom: 20px !important;
}
.side-button {
    border: none !important;
    /* transition: .3s linear !important; */
    padding: 10px 25px !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
    color: black !important; /* Text color by default */
}
.i_left{
    margin-left: 10px !important;
}

.side-button i {
    color: black !important; /* Icon color by default */
    margin-right: 5px !important;
    /* transition: .3s linear !important; */
}

.side-button:hover {
    color: white !important;
    background-color: #262626 !important;
}

.side-button:hover i {
    color: white !important; /* Icon turns white on hover */
}

.side-button.active {
    background-color: #262626 !important;
    color: white !important; /* Text white when active */
}

.side-button.active i {
    color: white !important; /* Icon white when active */
}

.btnchangerestro{
    cursor: pointer !important;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
    padding: 5px 5px !important;  
    padding-top: 8px !important; 
    border-radius: 5px !important; 
}

.selectStrorRadio {
    /* background-color: darkcyan !important; */
    padding: 0px !important;
    max-height: 120px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    margin: 10px 0 0 0!important;
    scrollbar-width: thin !important;
    scrollbar-color: <?php echo $borderCOlor; ?> transparent !important;
}

.selectStrorRadio::-webkit-scrollbar {
    width: .21px !important;
}

.selectStrorRadio::-webkit-scrollbar-thumb {
    background-color: black !important;
    border-radius: 10px !important;
}

.selectStrorRadio::-webkit-scrollbar-track {
    background-color: transparent !important;
}

/* 
input[type="checkbox"].top_check:checked {
    background-color: <?php echo $themeColor; ?> !important;
    border-color: <?php echo $themeColor; ?> !important;     
  }

  input[type="checkbox"].top_check {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;   
    width: 12px !important;
    color: #fff !important;
    height: 12px !important;
    border: 2px solid #000 !important;
    background-color: white !important;
    cursor: pointer !important;
  }

  input[type="checkbox"].top_check:checked {
    background-color: <?php echo $themeColor; ?> !important;
  } */

.w-100{
    width: 100% !important;
}
.mx-0{
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.px-0{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.site-content .home-v1-slider .owl-carousel .owl-dots .owl-dot {
    background-color: <?php echo $themeColor; ?> !important;
}

.toping_modal{
    height: 100% !important;
    overflow: hidden !important;
}
.store_modal{
      overflow-y: auto !important;
      height: auto !important;
      max-height: unset !important;
      width: 100% !important;
      margin-bottom:40px !important;
    }

#checkoutModal .modal-body{
    position: relative;
    padding: 0 15px;
    height: 530px;
    /* overflow-y: scroll;
    overflow-x: hidden; */
    /* scrollbar-width: thin !important;
    scrollbar-color: <?php echo $borderCOlor; ?> !important; */
}
#checkoutModal .modal_products_body{
    height: 100%;
    overflow-y: auto;  
}  

    .product-content-wrapper_h3{
        height: 5.5rem;
        text-align: center;
        display: block;
    }

    #checkoutModal .product-content-wrapper_h3{
        height: 4.5rem;
        text-align: center;
        display: block;
        font-size: 1.9rem;
        
    }
.product-image-wrapper_modal img{
    height: 57px !important;
    object-fit: contain !important;
}
.modal_products_body .modal-product{
    min-height: 49% !important;
    margin: 0;
    padding: 0px !important;

}
.modelProductImage{
    height: 200px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
   }
   .mb-0{
    margin-bottom: 5px !important;
   }
   .modal_h4{
    margin-top: 30px !important;
   }
   .top_he {
    overflow-y: scroll !important;
    max-height: 62vh !important;
   }
   .top_he::-webkit-scrollbar {
    width: 2px; /* Yahan width set karen */
}

.top_he::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar ka color */
    border-radius: 10px; /* Round edges */
}

.top_he::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Hover par color change */
}

#checkoutModal .close {
    background-color: #fff !important;
    align-content: center !important;
    color:<?php echo $themeColor; ?> !important;
    height: 30px !important;
    width: 30px !important;
    border-radius: 100px !important;
    position: absolute;
    opacity: 1;
    right: 10px;
    top: 10px;
    padding: 5px 4px;
}

#btn-back-to-top {
  position: fixed;
  bottom: 68px !important;
  right: 20px;
  display: none;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  padding: 5px;
  outline: 1px solid #fff;
  z-index: 100;
}
@media (max-width: 767px) {
    .owl-carousel .owl-item img {
        width: 100% !important;
        max-height: 30vh !important;
        margin: 20px 0px 50px 0px !important;
    }
}
@media (max-width: 1200px) {
    .top_he{
        max-height: 48vh !important;
   }
   #checkoutModal .modal-body{
    height: 450px;
   }
}
@media (max-width: 551px) {
    .top_he{
        max-height: 61vh !important;
   }
}
@media (max-width: 426px) {
    .top_he{
        max-height: 61vh !important;
   }
}
@media (max-width: 376px) {
    .product-content-wrapper_h3{
        font-size: 0.9em !important;
    }
    
    #checkoutModal .product-content-wrapper_h3{
        font-size: 14px !important;
        height: 3.0rem;
    }
    .top_he{
        max-height: 61vh !important;
   }
   ._box_footer {
    width: 100%;
    text-align: center;
    padding: 10px;
    left: 0;
    position: fixed;
    bottom: 80px;
    z-index: 10000;
}

   #checkoutModal .modal-header{
        height: 67px !important;
   }
   #checkoutModal .modal-footer{
        height: 45px !important;
   }
    #checkoutModal .modal-body{
        /*height:calc(100svh - 150px - 45px - 7px)  !important;*/
        height: 400px !important;
        padding: 0 14px !important;
   }
   .modal_products_body{
        max-height: 100% !important;
        overflow-y: auto !important;  
        padding: 5px !important;
    }
    .modal_products_body .modal-product{
        max-height: 381px !important;
        margin: 0px 0 !important;
        padding: 0px !important;
    }
    .product-image-wrapper_modal img{
        height: 65px !important;
    }
    .price-title{
        margin-bottom: 0.429em !important;
    }
    .product-content-wrapper_h3{
        height: 2.5rem;
        text-align: center;
        display: block;
        font-size: 1.6rem;
    }
    #checkoutModal .btis a{
        padding: 4px 0px !important;
        width: 100px !important;
    }

    #checkoutModal .modal-title{
        font-size: 21px !important;
        line-height: 2 !important;
    }
    #checkoutModal .btn-success {
        /* width: 279px !important; */
        width: 100% !important;
        padding: 10px 0 !important;
    }
}

@media (max-width: 400px){
    #checkoutModal .btis a{
        padding: 5px 0px !important;
        width: 100px !important;
    }
}

    #checkoutModal .add_bt{
        margin-top: -1px !important;
    }
    #checkoutModal

@media screen and (max-width:550px){
    #btn-back-to-top
    {
        position: fixed;
        bottom: 57px !important;
        right: 4px;
        display: none;
        border-radius: 50%;
        height: 35px;
        width: 35px;
        padding: 5px;
    }
    .st-order p span{
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    #checkoutModal .price-title{
        position: relative;
        overflow: hidden;
        text-align: center;
        color: #2b2929;
        font-size: 0.875em !important;
        margin-bottom: 5px;
        margin-top: 0;
    }
    #checkoutModal .modal-header{
        height: 67px !important;
    }
    #checkoutModal .modal-footer{
            height: 45px !important;
    }
    #checkoutModal .modal-body{
        /* height:calc(100vh - 150px - 45px - 7px)  !important; */
        height:400px !important;
        padding: 0 14px !important;
    }
     #checkoutModal .btn-success {
        /* width: 279px !important; */
        width: 100% !important;
        padding: 10px 0 !important;
    }
    .product-content-wrapper_h3{
        height: 2.0rem;
        text-align: center;
        display: block;
        font-size: 15px;
    }
    
    #checkoutModal .btis a{
        padding: 4px 0px !important;
        width: 100px !important;
    }
    
    .modal_products_body{
        max-height: 100% !important; 
        overflow-y: auto !important;  
        padding: 5px !important;
    }
    .modal_products_body .modal-product{
        margin: 0px 0;
        padding: 0px !important;
        min-height: 50% !important;
    }
    .product-image-wrapper_modal img{
        height: 92px !important;
        obejct-fit: contain !important;
    }
    
    
   
}
@media (max-width: 518px) {
    .side-button{
        padding: 6px !important;
        white-space: nowrap !important;
        justify-content: center !important;
    }
    .i_left{
        margin-left: 2px !important;
    }
    .topping-title{
        font-size: 12px !important;
        color: #111 !important;
    }
    .topping-label {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .side-button svg{
        width: 10px !important;
        height: 10px !important;
    }
            
}           
@media only screen and (min-width: 0px) and (max-width: 880px) {
    .modal-header img {
        margin-left: auto !important;
    }
    .modelProductImage{
    height: 170px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
   }
   .bts{
        font-size: 16px !important;
    }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
    .modal-header img {
        margin-left: auto !important;
    }
    .modelProductImage{
    height: 150px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
   }
   
   #checkoutModal .modal-body {
    font-size: 16px !important;
}
.panel-title{
    font-size: 16px !important;
}
.bts{
        font-size: 14px !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 780px) {
    #btn-back-to-top{
        display: none !important;
    }
}
@media only screen and (min-width: 0px) and (max-width: 550px) {
    .modal-header img {
        margin-top: 24px;
        height: 30px !important;
        margin-left: 0px !important;
    }

    #btn-back-to-top{
        position: fixed;
        bottom: 60px !important;
        right: 5px;
        display: none;
        border-radius: 50%;
        height: 35px;
        width: 35px;
        padding: 5px;
    }
    .product-content-wrapper_h3{
        font-size: 16px !important;
    }
    .modelProductImage{
    height: 130px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
   }
   .modal-body {
    font-size: 12px !important;
}
.panel-title{
    font-size: 12px !important;
}
.bts{
    padding: 11px 0 !important;
    width: 84% !important;
    }
}
.d_flex{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.jus i{
    margin-left: 10px !important;
}
.mt-55{
    margin-top: 20px !important;
}



@media (max-width: 410px) {
    .i_left{
        font-size: 8px !important;
    }
    .side-button{
        padding: 3px !important;
    }          
}
.store_modal{
    z-index: 1051 !important;
}


#checkoutModal .modal_products_body {
  overflow-y: scroll;  
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: red transparent; /* Scrollbar track and thumb color for Firefox */
}

/* For WebKit browsers (Chrome, Edge, Safari) */
#checkoutModal .modal_products_body::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
  height: 20px;
}

#checkoutModal .modal_products_body::-webkit-scrollbar-thumb {
  background-color: red; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#checkoutModal .modal_products_body::-webkit-scrollbar-track {
  background-color: transparent; /* Track background color */
}


.input-container {
            position: relative;
            display: block;
        }

        .input-container input {
            width: 100%;
            padding: 10px;
            padding-right: 35px; /* Space for the icon */
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }

        .input-container label {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            cursor: pointer;
        }

    .input-with-loader {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .input-with-loader input {
        padding-left: 30px; /* Leave space for loader */
    }

    .input-with-loader .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        border: 2px solid #ccc;
        border-top: 2px solid #000;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: translateY(-50%) rotate(360deg);
        }
    }