<style>
.mobilefixedfooter,.myaccountpopup, .clsShoppingIn i, .departmentpopup {
							display:none;
						}
			@media (min-width: 320px) and (max-width: 767px) {
				.search-dropbox {
					display:none;
				}
.mobilestickysubmenupopup {
    display: flex;
    width: 100%;
    background: #f0ecec;
    padding: 10px 5px;
}

.topppclose {
    width: 30px;
}

.toppphead {
    text-align: center;
    width: 80%;
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 500;
    color: #000;
}
.myaccountpopup, .departmentpopup {
    z-index: 999;
    background: #fff;
    width: 100%;
    padding: 0;
    left: 0;
    right: 0;
	bottom:-1000%;
}
.myaccountpopup.isDown,.departmentpopup.isDown {
	    top: 0;
    transition: 0.5s top ease-in;
	display:block;
	position:fixed;
	bottom:0;
	
}
header .clsCart2 {
    display: none !important;
}
header .clsGiftbox {
	right:15px !important;
}
header .clsSearchBox {
    padding: 5px 15px;
    height: auto;
    top: 51px !important;
    left: 0px !important;
    right: 0px !important;
    background: #fff;
}
header .clsSearchBox .clsSearchBtn {
    right: 16px;
}
header .clsShopBy {
    display: none;
}
.clsAccount {
    display: none;
}
header .clsLogo {
	display:inline-block !important;
}
header .clsShoppingIn {
    padding: 5px 5px 5px 10px !important;
    background: #ddd;
}
header .clsShoppingIn p {
    display: none !important;
}
.clsShoppingIn i {
	display: inline !important;
	font-size:15px;
	margin-right: 5px;
}
.myaccountpopup .clsPopUp {
    padding: 10px;
	height: 78vh;
    overflow-y: scroll;
}
.myaccountpopup .clsPopUp ul li a, .myaccountpopup .clsPopUp ul li a label  {
    color: #000;
    font-weight: 500;
	display:inline;
}
.myaccountpopup .clsPopUp ul li a label {
    position: relative;
    top: -14px;
}
.myaccountpopup .clsPopUp ul li a img {
    width: 45px;
    margin-right: 10px;
	display:inline;
	vertical-align:baseline;
}
.myaccountpopup  .clsPopUp ul {
    list-style: none;
    padding: 0;
}
.myaccountpopup  .clsPopUp ul li{
    display:block;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
	.mobilefixedfooter {
    display: flex;
    padding: 10px 3px;
	    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f0ecec;
	z-index:999999;
}

.mobileicon img {
    width: 30px;
}
.mobileicon span {
    display: block;
    color: #000;
    font-size: 10px;
    font-weight: 600;
}
.mobileicon.mobilestickycart label {
                position: absolute;
                background-color: var(--primary-color);
                display: inline-block;
                width: 20px;
                height: 20px;
                font-size: 12px;
                color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 19px;
                right: 11px;
                top: 0px;
}

.mobileicon.mobilestickycart {
    position: relative;
}
ul.departmentul {
    padding: 0;
    list-style: none;
    display: block;
    height: 82vh;
    overflow: scroll;
	padding-bottom:36px;
}

ul.departmentul li {
    width: 45%;
    display: inline-block;
    padding:0px;
    border: none;
    margin: 2vw;
    text-align: left;
	position:relative;
}

ul.departmentul li a img {
    width: 100%;
    display: block;
    margin: 0 auto;
}
ul.departmentul li a {
    width: 100%;
    display: block;
   
}


ul.departmentul li a label {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-top: 10px;
	position: absolute;
    top: 3px;
    left: 10px;
}
header .clsShoppingIn .clsPopUp {
    width: 200px;
}
.clsGroceryCats .clsSliderSubCats .slick-arrow.right {
    right: -3px;
}
header .clsShoppingIn:after{
	border-left: 1px solid transparent !important;
}

footer {
    padding-bottom: 100px;
}
.search-dropbox {
	overflow-y: scroll;
	padding-bottom:80px;
	background:#fff;
	
}
 header .clsShopBySearch a,  header .clsShopBySearch span {
    font-size: 10px !important;
	font-weight: 500;
    color: #000;
}
 .clsFoodCustomDialog .clsContent.clsFoodStoreCard.exclude-calc .popupright {
											  padding-bottom:100px;
										  }
	.filterbutton {
    position: fixed !important;
    bottom: 67px !important;
    left: 0;
    right: 0;
    top: auto !important;
    background: #fff;
    width: 315px;
	display:none;
}
.filterbody {
	padding-bottom:100px;
}
.clsFoodCustomDialog {
    padding-bottom: 100px;
}
					}
	@media (min-width: 550px) and (max-width: 767px) {
		header .clsShoppingIn {
			margin-left:32px;
		}
		.mobileicon.mobilestickycart label {
			right: 36px;
		}
.clsInnerCart .clsCompleteCart{

	max-height: calc(100% - 174px) !important;	
}	
	}	
@media (min-width: 320px) and (max-width: 549px) {
.clsInnerCart .clsCompleteCart{

	max-height: calc(100% - 122px) !important;	
}	
}
</style>
<script>
function toggleMyaccountpopup(){

 $('.myaccountpopup').toggleClass("isDown");
 $('.departmentpopup').removeClass("isDown");
 $('#minicart').removeClass("active");

}
function toggleDepartmentpopup(){

 $('.departmentpopup').toggleClass("isDown");
  $('.myaccountpopup').removeClass("isDown");
  $('#minicart').removeClass("active");

}

</script>
<?php
 if($outsideus == 0){ 
?><style>@media (min-width: 320px) and (max-width: 767px) { .mobileicon { width: 20%;text-align: center; } }</style><?php
}
else{
?><style>
@media screen and (max-width: 375px){
#notification-wrapper {
	top: 55px !important;
}
}
	@media (min-width: 320px) and (max-width: 767px) { 
		.mobileicon { width: 33%;text-align: center; } 
		.mobileicon.mobilestickycart label{
			right: 30px !important;
		}
	}</style><?php
}
?>

<div class="myaccountpopup">
<div class="mobilestickysubmenupopup ">
<div class="topppclose"><a href="javascript:void(0)" onclick="toggleMyaccountpopup();"><img src="images/icon-sticky-close.svg"></a></div>
<div class="toppphead">My Account</div>
</div>
<div class="clsPopUp">
            <div class="clsContent">
                <?php if (isset($_SESSION['value_user_type']) && $_SESSION['value_user_type'] == '0') { ?>
                    <ul>
                        <li><a href="my-account"><img src="images/mobile-icon/icons-profile/icon_edit.png"><label>My Account</label></a></li>
                        
                        <?php if($resuserlogin->chef_flag =='1' && $resuserlogin->user_type =='0' ){ ?>
                        <li><a href="chef/application"><img src="images/mobile-icon/icons-profile/icon_support.png"><label>Recipes</label></a></li>
                        <?php }?> 
						<li><a href="refer-a-friend"><img src="images/mobile-icon/icons-profile/icon_referfriend.png"><label>Refer a Friend</label></a></li>
						<li><a href="be-a-hero"><img src="images/mobile-icon/icons-profile/icon_hero.png"><label>Be a Hero</label></a></li>
						<li><a href="my-orders"><img src="images/mobile-icon/icons-profile/icon_orders.png"><label>My Orders</label></a></li>
						<li><a href="my-upcoming-orders"><img src="images/mobile-icon/icons-profile/icon_orders.png"><label>My Upcoming Orders</label></a></li>
                        <li><a href="my-wishlist"><img src="images/mobile-icon/icons-profile/icon_wishlist.png"><label>My Wishlist</label></a></li>
                        <?php if($outsideus == 0){?>
                        <li><a href="gift-cards"><img src="images/mobile-icon/icons-profile/icon_reward.png"><label>Gift Cards</label></a></li>
                        <?php } ?>
                         <li><a href="quickllypass-dashboard"><img src="images/mobile-icon/icons-profile/icon_orders.png"><label>Quicklly Pass</label></a></li>
						
						<li><a href="change-password"><img src="images/mobile-icon/icons-profile/icon_edit.png"><label>Change Password</a></li>
                        <?php if(basename($_SERVER["PHP_SELF"]) == 'chef_quicklly.php' || basename($_SERVER["PHP_SELF"]) == 'all_recipe.php'){ ?>
                        <li><a href="recipe-logout"><img src="images/mobile-icon/icons-profile/icon_logout.png"><label>Logout</label></a></li>
                        <?php }else{?>
                        <li><a href="logout"><img src="images/mobile-icon/icons-profile/icon_logout.png"><label>Logout</label></a></li>
                        <?php } ?>
                    </ul>
                <?php } ?>
                </div>
            </div>
</div>
<div class="mobilefixedfooter">
<div class="mobileicon"><a href="<?php echo SITE_URL; ?>"><img src="images/mobile-icon/home.png"><span>Home</span></a></div>
<?php if($outsideus == 0){?>
<div class="mobileicon"><a href="javascript:void(0);" onclick="toggleDepartmentpopup();"><img src="images/mobile-icon/department.png"><span>Department</span></a></div>
<?php } ?>
<div class="mobileicon mobilestickycart"><a href="javascript:void(0);" onclick="toggleInnerCart();"><img src="images/mobile-icon/cart.png"><label>0</label><span>Cart</span></a></div>
<?php if($outsideus == 0){?>
<div class="mobileicon" <?php echo $displayShopBy; ?>><a href="shop-by-stores"><img src="images/mobile-icon/store.png"><span>Stores</span></a></div>
<?php } ?>
 <?php if (isset($_SESSION['value_user_type']) && $_SESSION['value_user_type'] == '0') { ?>
<div class="mobileicon"><a href="javascript:void(0);" onclick="toggleMyaccountpopup();"><img src="images/mobile-icon/profile.png"><span>Profile</span></a></div>
 <?php } else { ?>
 <div class="mobileicon"><a href="javascript:void(0);" id="procedcheckoutBtn" ><img src="images/mobile-icon/profile.png"><span>Profile</span></a></div>
 <?php } ?>
</div>