/* ########################################################################################## */
#header_top, #header_bottom { transition: opacity 0.4s ease 0.1s, filter 0.4s ease 0.1s, height 0.3s ease; overflow: visible; }
    #header_top.hidden, #header_bottom.hidden { opacity: 0; filter: blur(4px); height: 6px !important; transition: height 0.3s ease, opacity 0.3s ease 0s, filter 0.5s ease 0s, transition-delay 0.5s; pointer-events: none; }
    #myModal.modal { z-index: 9999 !important; position: fixed;}      /* Ensure modal appears above everything */

    #Lbl_cartItems.hidden { opacity: 0; transition:transform 2s ease-in-out; }
    .form-check-input:checked { background-color:#026b0d; border-color:#000000; }
    .form-check-input:active, .form-check-input:focus { background-color:#000000; border-color: #ff0000; box-shadow:none  !important }
    .form-check-input { --bs-form-check-bg: #b9b4a4 }

    .bar { position: relative; overflow: hidden; border-radius: 3px;  }
    .bar:after { content: ""; display: block; position: absolute; height: 100%; width: 120px; top: 0; animation: load 1s ease-in-out infinite; background-image: linear-gradient( to right, #d4e6d5 0%, #ffffff 50%, #d4e6d5 100% ); }
    .barDark { position: relative; overflow: hidden; border-radius: 3px; }
    .barDark:after { content: ""; display: block; position: absolute; height: 100%; width: 100px; top: 0; animation: load 1s ease-in-out infinite; background-image: linear-gradient( to right, #2b3238 0%, #6d6d6d 50%, #2b3238 100% );}
    .barLight { position: relative; overflow: hidden; border-radius: 3px; }
    .barLight:after { content: ""; display: block; position: absolute; height: 100%; width: 100px; top: 0; animation: load 1s ease-in-out infinite; background-image: linear-gradient( to right, #c4f4e200 0%, #ffffff 50%, #c4f4e200 100% );}
    
    @keyframes load {  from {   left: -100px; }  to {    left: 100%;  }}
    #toggleAnchorMozilla, #toggleAnchorChrome { width:200px }
    #paragraphMozilla { display: none;}
    #toggleAnchorMozilla:focus + #paragraphMozilla { display: block; }
    #paragraphChrome { display: none;}
    #toggleAnchorChrome:focus + #paragraphChrome { display: block; }

    /* Navigation */
/*    .offcanvas-body .nav-item { background-color:transparent; border-radius:5px; padding-left:6px; padding-right:4px; opacity: 0; transform: translateX(-20px); animation: none;}*/
    .offcanvas-body .nav-item:hover { background-color:#181c1f; }
    .nav-link {  color:white !important; }
    .nav-link:hover {  color:antiquewhite !important }

    .offcanvas:focus-within .nav-item { animation: slideIn .5s forwards !important; }
    .offcanvas:focus-within .nav-item:nth-child(1) { animation-delay: .0s !important; }
    .offcanvas:focus-within .nav-item:nth-child(2) { animation-delay: .1s !important; }
    .offcanvas:focus-within .nav-item:nth-child(3) { animation-delay: .2s !important; }
    .offcanvas:focus-within .nav-item:nth-child(4) { animation-delay: .3s !important; }
    .offcanvas:focus-within .nav-item:nth-child(5) { animation-delay: .4s !important; }
    .offcanvas:focus-within .nav-item:nth-child(6) { animation-delay: .5s !important; }
    @keyframes slideIn { to { opacity: 1; transform: translateX(0); }}





/* Default for all screen sizes */
#headerHeightAdjustment { height:120px; display:block;  }
/*#header {*/
    /* Fallback for older browsers */
    /*background-color: #c9f7ce;*/
    /* Safari 5.1 to 6.0 */
    /*background: -webkit-linear-gradient(top, #c9f7ce 0%, #c9f7ce 85%, rgba(201, 247, 206, 0) 100%);*/
    /* Chrome 10-25, Safari 5.1-6.0 */
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9f7ce), color-stop(85%, #c9f7ce), color-stop(100%, rgba(201, 247, 206, 0)));*/
    /* Standard syntax */
    /*background: linear-gradient(to bottom, #c9f7ce 0%, #c9f7ce 85%, rgba(201, 247, 206, 0) 100%);
}*/

.toast-container { top: 20%; }
#HomeBtn { opacity:.7 }
#HomeBtn:hover { opacity:1 }
#Btn_signIn:hover, #Btn_Register:hover { color:#cbb503 !important }
#Btn_Account:active, #Btn_signIn:active, #Btn_Register:active, #Btn_Account:focus, #Btn_signIn:focus, #Btn_Register:focus { box-shadow: none !important }
.account {  }
.userDetails { width:250px;  }
#uAP { width:70px }
.modal-backdrop { z-index: -1; --bs-backdrop-bg:#000000 !important; --bs-backdrop-opacity:1 !important }
#LBL_info { text-align:left !important }
.bgImg { background-image:url(../images/bg/bg-default-img.png); background-repeat:no-repeat; background-size:100% auto; background-position:top center }
#b2top { background-color:#c9f7ce !important }
#b2top:hover { background-color:#bce8c1 !important }
.footerLink { color: #c9f7ce; border:none !important }
.footerLink:hover { color: #a3c7a7 }
.footerLink:active { color: #94c299 !important; border:none !important }
#cookie-policy { left: 50%; transform: translateX(-50%); }

/* nav-buttons */
#RecentlyViewed .owl-stage-outer { display:flex !important; justify-content:center !important; }
#RecentlyViewed .owl-prev, .owl-next { width: 35px; height: 50px; color:#c9f7ce00; background-color:#ffffff; margin-top:-25px; cursor:pointer; }
#RecentlyViewed .owl-prev:hover, #RecentlyViewed .owl-next:hover { background-color:#ecebeb7f }
#RecentlyViewed .owl-prev { left: 10px; }
#RecentlyViewed .owl-next { right: 10px; }
#RecentlyViewed .owl-prev i, .owl-next i { color: #ccc; }

/* Hide scrollbar for Chrome, Safari and Opera */
    .menuScollbar::-webkit-scrollbar { display: none; }
    /* Hide scrollbar for IE, Edge and Firefox */
    .menuScollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

.sa {
    opacity: 0; /* Initial state before animation */
    transform: translateY(100px); /* Initial state before animation */
    transition: opacity 0.5s, transform 0.5s; /* Animation duration */
}

.sa.show {
    opacity: 1; /* Target state after animation */
    transform: translateY(0); /* Target state after animation */
}





/* search-Container */
.animate__slideInDown { --animate-duration: .3s; animation-duration: var(--animate-duration); --animate-delay: 0s; animation-delay: var(--animate-delay);
  --animate-timing-function: ease-in-out; animation-timing-function: var(--animate-timing-function); animation-fill-mode: both; animation-name: slideInDown; }
@keyframes slideInDown {  0% { opacity:0; transform: translate3d(0, -10%, 0) }
                         10% { opacity:0; transform: translate3d(0, -10%, 0) }
                        100% { opacity:100; transform: translate3d(0, 0, 0); } }


/* Search Feature */
#bgBackdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform:scale(1.2); background-position:center; background: #000000a4; z-index: 499; }
#searchBar:focus-within { box-shadow: 0 0 5px rgb(255, 193, 7) }
#searchBar { border-radius: 4px; z-index:554 }

#searchInput:focus      { box-shadow:none !important }
.ui-menu                { background-color:transparent !important; overflow:hidden; padding:3px !important; padding-bottom:10px !important; max-height:500px;
                          overflow-y:auto; left:0 !important; border:none !important; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
                          --animate-duration: .2s; animation-fill-mode: both; animation-name: slideInDown; -webkit-overflow-scrolling: touch;  }
.ui-menu-item           { width:100%; background-color:transparent !important; margin:0 0 0 0; color:white }
.ui-menu-item-wrapper   { width:100%; background-color:#4c4c4cff !important; margin-top:4px !important; border-radius:4px; margin-bottom:4px !important;
                           display:block; width:100% !important; text-decoration:none !important; border:none !important; padding:5px; }
.ui-menu-item-wrapper:hover, .ui-menu-item-wrapper:focus,
.ui-menu-item-wrapper:active, .ui-menu-item-wrapper:focus-visible
                        { background-color:#373737 !important; color:#ffffff !important; font-weight:normal; border:none !important }
.ui-menu-item-wrapper img { padding-left:8px !important; padding-right:8px !important; width:35px }
.ui-state-active        { border:none; font-weight:normal; line-height:1.5 }

.ui-state-active, .ui-widget-content, .ui-widget-header, .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover 
        { background: #212529ff !important }











/* XS */
/* 360px-TO-400px ################################################################################### */
@media only screen and (min-width: 360px) and (max-width:400px) {
    #header {
        /* Fallback for older browsers */
        background-color: #212529;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #212529), color-stop(96%, #212529), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#c9f7ce }
    #myModalButton { color:white }
    .lb_delTo { color:#bce8c1 }
    /*#searchBar, #searchContainer { width:220px !important }*/
    #myLocationConntainer {
        display: flex !important;
        justify-content: flex-start !important
    }
    #myModalButton { overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width:calc(16ch + 2px); }
    #Lbl_cartItems{ margin-top:-4px; margin-left:10px }
    #searchContainer { left:0 !important }
    #searchContainer img { display:none }
    .ui-menu-item { padding:0 }
    .ui-menu { width:100vw !important; padding-top:17px !important }
    .ui-menu-item-wrapper   { font-size:16px; line-height:27px !important }
    #proPicContainer { width: 32px; height: 32px; }
    #Btn_Account { width:32px; height:32px }
    .ui-menu         { top:34px !important; z-index:10 !important  }
    .fs-LinkItem { font-size:14px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:80px; white-space:nowrap }
    .RView_Items { margin-top:20px }
    .RView_OtherControl { padding-top:30px; right:0 }
    .payChannelImg { width:230px; }
}

/*Below sm*/
/* 400px-TO-480px ################################################################################### */
@media only screen and (min-width: 401px) and (max-width:480px) {
    #header {
        /* Fallback for older browsers */
        background-color: #212529;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #212529), color-stop(96%, #212529), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#c9f7ce }
    #myModalButton { color:white }
    .lb_delTo { color:#bce8c1 }
    /*#searchBar, #searchContainer { width:270px }*/
    #Lbl_cartItems{ margin-top:-4px; margin-left:10px }
    #searchContainer { left:0 !important }
    .ui-menu-item { padding:0 }
    .ui-menu { width:100vw !important; padding-top:17px !important }
    .ui-menu-item-wrapper   { font-size:16px; line-height:27px !important }
    #proPicContainer { width: 32px; height: 32px; }
    #Btn_Account { height:32px; width:32px }
    .ui-menu         { top:34px !important  }
    .fs-LinkItem { font-size:14px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:80px; white-space:nowrap }
    .RView_Items { margin-top:20px }
    .RView_OtherControl { padding-top:30px; right:0 }
    .payChannelImg { width:230px; }
}

/*Below sm*/
/* 481px-TO-575px ################################################################################### */
@media only screen and (min-width: 481px) and (max-width:575px) {
    #header {
        /* Fallback for older browsers */
        background-color: #212529;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #212529), color-stop(96%, #212529), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#c9f7ce }
    #myModalButton { color:white }
    .lb_delTo { color:#bce8c1 }
    /*#searchBar, #searchContainer { width:300px !important }*/
    #Lbl_cartItems{ margin-top:-4px; margin-left:10px }
    #searchContainer { left:0 !important }
    .ui-menu-item { padding:0 }
    .ui-menu { width:100vw !important; padding-top:15px !important}
    .ui-menu-item-wrapper   { font-size:16px; line-height:27px !important }
    #proPicContainer { width: 32px; height: 32px; }
    #Btn_Account { height:32px; width:32px }
    .ui-menu         { top:34px !important  }
    .fs-LinkItem { font-size:14px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:90px; white-space:nowrap }
    .RView_Items { margin-top:20px }
    .RView_OtherControl { padding-top:30px; right:0 }
    .payChannelImg { width:230px; }
}


/* SM */
/* 576px-TO-767px ################################################################################### */
@media only screen and (min-width: 576px) and (max-width:767px) {
    #header {
        /* Fallback for older browsers */
        background-color: #212529;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #212529), color-stop(96%, #212529), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #212529 0%, #212529 96%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#c9f7ce }
    #myModalButton { color:white }
    .lb_delTo { color:#bce8c1 }
    #searchBar, #searchContainer {  }
    #searchContainer { left:0 !important }
    #Lbl_cartItems{ margin-top:-4px; margin-left:10px }
    .ui-menu-item { padding:0 10px 0 10px }
    .ui-menu { width:100vw !important; top:37px !important;  padding-top:13px !important }
    .ui-menu-item-wrapper  { font-size:18px; line-height:26px !important; }
    #proPicContainer { width: 36px; height: 36px; }
    #Btn_Account { height:32px; width:32px }
    .fs-LinkItem { font-size:15px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:90px; white-space:nowrap }
    .RView_Items { margin-top:20px }
    .RView_OtherControl {  padding-top:30px; right:0 }
    
    .payChannelImg { width:230px; }
}


/* MD */
/* 768px-TO-991px ################################################################################### */
@media only screen and (min-width: 768px) and (max-width:991px) {
    #header {
        /* Fallback for older browsers */
        background-color: #c9f7ce;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9f7ce), color-stop(92%, #c9f7ce), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#212529ff }
    #myModalButton { color:#212529ff }
    .lb_delTo { color:#1b6522ff }
    #searchBar, #searchContainer { }
    #searchContainer { left:0 !important }
    #Lbl_cartItems{ margin-top:-5px; margin-left:10px }
    .ui-menu-item { padding:0 10px 0 10px }
    .ui-menu { width:100% !important; top:39px !important; padding-top:13px !important }
    .ui-menu-item-wrapper   { font-size:17px; line-height:28px !important; }
    #proPicContainer { width: 40px; height: 40px; }
    #Btn_Account { height:32px }
    .fs-LinkItem { font-size:15px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:90px; white-space:nowrap }
    .RView_Items { margin-top:20px }
    .RView_OtherControl { padding-top:30px; right:0 }
    .payChannelImg { width:230px; }
}


/* LG */
/* 992px-TO-1199px ################################################################################### */
@media only screen and (min-width: 992px) and (max-width:1199px) {
    #header {
        /* Fallback for older browsers */
        background-color: #c9f7ce;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9f7ce), color-stop(92%, #c9f7ce), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#212529ff }
    #myModalButton { color:#212529ff }
    .lb_delTo { color:#1b6522ff }
    #searchBar { width:500px !important }
    #searchContainer {  }
    #Lbl_cartItems{ margin-top:-5px; margin-left:10px }
    .ui-menu-item { padding:0 10px 0 10px }
    .ui-menu { width:100%; padding-top:10px !important }
    .navbar { border-radius:10px }
    .ui-menu-item-wrapper   { font-size:17px; line-height:28px !important; }
    #proPicContainer { width: 40px; height: 40px; }
    #Btn_Account { height:32px }
    .ui-menu         { top:39px !important  }
    .fs-LinkItem { font-size:15px }
    .footerContainer { width:100%; margin-left:auto; margin-right:auto; padding-left:25px; padding-right:25px }
    .deliveryContainer { text-align:left }
    .deliveryAddres { display:inline-block; width:80px }
    .RView_Items { margin-top:100px }
    .RView_OtherControl { position:absolute; top:0; right:0 }
    .payChannelImg { width:220px; }
}


/* XL */
/* 1200px-TO-1399px ################################################################################### */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
    #header {
        /* Fallback for older browsers */
        background-color: #c9f7ce;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9f7ce), color-stop(92%, #c9f7ce), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #c9f7ce 0%, #c9f7ce 92%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#212529ff }
    #myModalButton { color:#212529ff }
    .lb_delTo { color:#1b6522ff }
    #searchBar, #searchContainer { width:600px !important }
    #Lbl_cartItems{ margin-top:-5px; margin-left:10px }
    .ui-menu-item { padding:0 10px 0 10px }
    .ui-menu { width:100%; padding-top:10px !important }
    .navbar { border-radius:25px }
    .ui-menu-item-wrapper   { font-size:15px; line-height:30px !important; }
    #proPicContainer { width: 40px; height: 40px; }
    #Btn_Account { height:32px }
    .ui-menu         { top:39px !important  }
    .fs-LinkItem { font-size:16px }
    .footerContainer { width:1200px; margin-left:auto; margin-right:auto; padding-left:25px; padding-right:25px }
    .deliveryContainer { text-align:center }
    .deliveryAddres { display:inline }
    .RView_Items { margin-top:100px }
    .RView_OtherControl { position:absolute; top:0; right:0 }
    .payChannelImg { width:230px; }
}


/* XXL */
/* 1400px-TO ################################################################################### */
@media only screen and (min-width: 1400px) {
    #header {
        /* Fallback for older browsers */
        background-color: #c9f7ce;
        /* Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(top, #c9f7ce 0%, #c9f7ce 85%, rgba(201, 247, 206, 0) 100%);
        /* Chrome 10-25, Safari 5.1-6.0 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9f7ce), color-stop(85%, #c9f7ce), color-stop(100%, rgba(201, 247, 206, 0)));
        /* Standard syntax */
        background: linear-gradient(to bottom, #c9f7ce 0%, #c9f7ce 85%, rgba(201, 247, 206, 0) 100%);
    }
    #categoryText { color:#212529ff }
    #myModalButton { color:#212529ff }
    .lb_delTo { color:#1b6522ff }
    #searchBar, #searchContainer { width:700px !important }
    #Lbl_cartItems{ margin-top:-5px; margin-left:10px }
    .ui-menu-item { padding:0 10px 0 10px }
    .ui-menu { width:100%; padding-top:10px !important }
    .navbar { border-radius:25px }
    .ui-menu-item-wrapper   { font-size:16px; line-height:30px !important; }
    #proPicContainer { width: 40px; height: 40px; }
    #Btn_Account { height:32px }
    .ui-menu         { top:40px !important  }
    .fs-LinkItem { font-size:17px }
    .footerContainer { width:1400px; margin-left:auto; margin-right:auto; padding-left:25px; padding-right:25px }
    .deliveryContainer { text-align:center }
    .deliveryAddres { display:inline }
    .RView_Items { margin-top:100px }
    .RView_OtherControl { position:absolute; top:0; right:0 }
    .payChannelImg { width:240px; }
}