/** Main Styling **/
body{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	background-color: var(--bg-color);
	color: var(--general-font-color);
}

span{
	font-size: 13px
}

.main{
 	width: 100%;
 	min-height: 100vh;
 	overflow-x: hidden;
 	padding-bottom: 70px;
    margin-bottom: 10px;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.btn-primary {
    color: var(--primary-font-color);
    background-color: var(--primary-color);
    border-color: var(--primary-border-color);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: var(--primary-alt-font-color);
    background-color: var(--primary-alt-color);
    border-color: var(--primary-border-color);
}

.btn-secondary {
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-border-color);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    color: var(--secondary-alt-font-color);
    background-color: var(--secondary-alt-color);
    border-color: var(--secondary-border-color);
}


.btn-outline-primary, .btn-outline-primary:focus, .btn-outline-primary:active {
    color: var(--primary-color);
    background-color: var(--primary-font-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    color: var(--primary-alt-font-color);
    background-color: var(--primary-alt-color);
    border-color: var(--primary-border-color);
}

.btn-outline-secondary, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    color: var(--secondary-color);
    background-color: var(--secondary-font-color);
    border-color: var(--secondary-color);
}
.btn-outline-secondary:hover {
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-border-color);
}

.btn-stop {
    color: var(--stop-font-color);
    background-color: var(--stop-bg-color);
    border-color: var(--stop-bg-color);
}
.btn-stop:hover, .btn-stop:focus, .btn-stop:active {
    color: var(--stop-font-color);
    background-color: var(--stop-bg-color);
    border-color: var(--stop-bg-color);
}

@media only screen and (max-width: 991px) {
	.mobile-hide {
		display: none !important;
	}
	
	.mobile-show {
		display: block !important;
	}
}

@media only screen and (min-width: 992px) {
	.desktop-hide {
		display: none !important;
	}
	.desktop-show {
		display: block !important;
	}
}

.anchor:active, .anchor,  .anchor:hover, .anchor:focus{
	text-decoration: none;
	color: var(--general-font-color);
}

.anchor:active,  .anchor:hover, .anchor:focus{
	opacity: 0.8
}

 h5{
 	font-weight: 600;
    font-size: 18px;
    padding-bottom:16px;
 }

h3{
   font-size: 17px;
   font-weight: bold;
}

h3 small{
	font-size: 14px;
	font-weight: normal;
}

 p{
 	font-size: 15px
 }
 
 .form-control{
	margin: 16px 0;
	border: 0;
    font-size: 13px;
    color: var(--checkout-inputbox-font);
    background-color: var(--checkout-inputbox-bg);
    border-bottom: 1px solid var(--checkout-inputbox-btm-brd);
	border-radius: 8px;
}

/** Bigger Part (Header and Menu) **/

 .big-part{
 	position: fixed;
 	z-index: 10;
 	top: 0; right: 0; bottom: 0;
 	width: 67%;
 	height: 100vh;
 	background-size: cover;
 	background-position: center center;
 }


.big-part .big-h{
	width: 100%;
	height: 100%;
}

/** Menu **/
nav{
	background: transparent;
}

.navbar-light .navbar-nav .nav-link{
   	color: var(--banner-font-color);
   	opacity: 0.7;
   	font-size: 15px;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:active, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
   	opacity: 1;
	color: var(--banner-font-color);
}
   
.header-right {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 50;
}

.lang-icon, .lang-icon:hover {
    border: 2px solid var(--banner-font-color);
    border-radius: 100%;
    padding: 6px;
    color: var(--banner-font-color);
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
	text-decoration: none;
}
.footer-line-container{
	position: absolute;
	bottom: 15px;
	width: 100%;
}
.social-media-icons{
	position: absolute;
	bottom: 0px;
	left: 5px;
	text-align: center;
}
.social-media-icons img.social-media {
	height: 40px;
	width: 40px;
	padding: 2px;
}

.deliverytime-wrapper{
	position: absolute;
	bottom: 0px;
	right: 5px;
	text-align: center;
}

.deliverytime-wrapper .avgtime{
	font-weight: bold;
}

.deliverytime-wrapper .logo-text h3{
	text-align: center;
}

.banner-font, .banner-font:hover {
    color: var(--banner-font-color);
}

/** Header **/
h1{
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin-top: 20px;
}

header p{
	color: #FFF;
	font-weight: 400;
}
/** End Bigger Part (Header and Menu) **/

/** Start Smmall Part  **/
.small-part{
 	width: 33%;
 	min-height: 50vh;
 	background-color: var(--bg-color);
 	position: relative;
}

@media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
	.big-part{
		width: 50%;
	}
	.small-part{
		width: 50%;
	}
}
/** Delivery Rows **/
.delivery{
	font-size: 15px;
	padding: 0px 2px;
	border-bottom: 1px solid #eee;
}

.delivery h5{
	border-bottom: 1px solid #f5f5f5
}
.delivery .row{
	padding: 16px 0 16px 0
}
.delivery .area i{
	color: #407294;
}
.delivery .area, .delivery .area:hover, .delivery .area:active, .delivery .area:focus{
	color: var(--primary-color);
    text-decoration: none; 
	font-weight: bold;
}

/** Search form/link Row **/
.search-container{
	background-color: var(--searchbox-bg-color);
	color: var(--searchbox-ft-color);
	margin: 0;
	height: 40px;
}

.search-link .form-control{
	cursor: text;
} 


/** Search Catagories Section **/
.cat{
	padding: 16px;
}

.subcat .cat-img, .cat .cat-img{
  	width: 100%;
	border-radius: 6px;
	height: 200px;
}

@media only screen and (max-width: 991px) {
	.subcat .cat-img, .cat .cat-img{
		height: 150px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.subcat .cat-img, .cat .cat-img{
		height: 300px;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {
	.subcat .cat-img, .cat .cat-img{
		height: 150px;
	}
}
.cat h5{
	margin-top: 10px;
}

.homepage-itm-blocks-img{
	width: 100%;
	height: 230px;
	background-position: center center;
	background-size: cover;
	-o-object-fit: cover;
		object-fit: cover;
}

@media only screen and (max-width: 991px) {
	.homepage-itm-blocks-img{
		width: 100%;
		height: 150px;
	}
}
@media only screen and (min-width: 414px) and (max-width: 529px) {
	.homepage-itm-blocks-img{
		width: 100%;
		height: 180px;
	}
}
@media only screen and (min-width: 530px) and (max-width: 767px) {
	.homepage-itm-blocks-img{
		width: 100%;
		height: 200px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.homepage-itm-blocks-img{
		width: 100%;
		height: 300px;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {
	.homepage-itm-blocks-img{
		width: 100%;
		height: 150px;
	}
}
/** Review Order Button **/
.btn-cont{
	position: fixed;
    width: 33%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
	z-index: 2;
}

.btn-cont .btn{
	width: 100%;
    border: 1px solid var(--primary-border-color);
    padding: 10px;
    text-align: center;
}

.btn-cont .btn:hover, .btn-cont .btn:focus, .btn-cont .btn:active
{
	opacity: 0.95
}

.btn-cont .btn .sp-n{
	font-size: 15px;
    width: 32px;
    height: 25px;
    text-align: center;
    background: var(--primary-color);
}

.btn-cont .btn .sp-o{
	font-weight: bold;
}

.btn-cont .btn .sp-p{
	font-size: 13px;
	line-height: 1.9;
}

/** Footer Section **/
footer{
   font-size: 15px;
   background: #f5f5f9;
   padding-bottom: 100px;
   padding-top: 10px;
}
/** End Small Part  **/

/** Start  header and navigation bar on Mobiles/tablets View **/


.logo{
	max-width: 350px;
	max-height: 250px;
}
/** End  header and navigation bar on Mobiles/tablets View **/
/*Mobile*/
.mobile-nav{
	display: none;
	overflow-x: hidden;
}
.header-in{
	width: 100%;
    height: 260px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.mobile-nav{
	width: 100%;
	min-height: 50vh;
	position: absolute;
	z-index: 900;
	background: #fff;

}
.mobile-logo-img{
	height: 65px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.mobile-bodylogo-img{
	height: 100px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.go-back {
	padding: 16px;
    font-size: 20px;
    border-bottom: 1px solid #eee;
}


.go-back-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 110%;
    z-index: 9;
	transition: all .5s;
    font-size: 26px;
    color: #fff;
    background-color: none;
    padding:0px 16px;

	background: rgb(155,155,158);
	background: linear-gradient(180deg, rgba(155,155,158,0.8) 0%, rgba(154,154,158,0.2) 35%);
}
.go-back-fixed.show-background{
    background-color: #fff;
    color: #000;
}

.go-back-fixed i{
	cursor: pointer;
	color:#fff;
}

.m-links{
	padding: 8px 50px 0 50px
}

.m-links .list-group-item{
	border-color: #eee;
	padding: 16px 0;
}
.m-links .list-group-item a{
	text-decoration: none;
    color: #333;
    font-size: 17px
}

.m-links .list-group-item a:hover, .m-links .list-group-item a:focus, .m-links .list-group-item a:active, .m-other a:hover, .m-other a:focus, .m-other a:active{
	opacity: 0.8;
	color: #333
}

.m-other{
	border-top: 1px solid #eee;
	padding-top: 12px;
	padding-bottom: 12px;
}

.m-other a{
	padding-top: 5px;
	padding-bottom: 5px;
}

.m-other > span{
	color: #9e9e9e;
	font-size: 14px;
}

.m-other i{
	font-size: 20px;
    line-height: 1;
}

.m-log{
	padding: 16px 50px
}

.m-log h4{
	margin-bottom: 16px;
    font-size: 20px;
    padding: 0;
    font-weight: bold;
}

.m-log .list-group-item{
	padding:0 0 16px 0;
	border:0;
	font-size: 15px
}

.m-log .list-group-item i{
	margin-right: 15px
}

.m-log .btn{
	background: #407294;
	border: 1px solid #333;
	margin: 24px 0
}

.m-log .btn:hover{
	opacity: 0.9
}

.mobile-top-bar{
	display: none;
	width: 100%;
	position: fixed;
    top: 0;
    left: 0;
    z-index:8;
    color: var(--banner-font-color);
    background-color:none;
    transition: all .5s;
}
.mobile-top-bar.show-background{
    background-color: var(--mobile-altbar-bg-color);
    color: var(--mobile-altbar-ft-color);
}

.mobile-top-bar .header-col-left{
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
}

.mobile-top-bar .header-col-right{
	padding-top: 16px;
	padding-bottom: 16px;
	padding-right: 16px;
}



.mobile-top-bar div > i{
    font-size: 24px;
    cursor: pointer;
}

.mobile-top-bar div a{
	text-decoration: none;
	color: var(--banner-font-color);
}
.mobile-top-bar.show-background div a,
.mobile-top-bar.show-background div a i,
.mobile-top-bar.show-background
{
    color:var(--mobile-altbar-ft-color);
} 

.mobile-top-bar:not(.show-background) .hide-on-noscroll{
	display: none !important;
	
}

.mobile-top-bar div a i{
	text-decoration: none;
    font-weight: bold;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.header-icon, .header-icon:hover {
    border: 2px solid #fff;
    border-radius: 100%;
    padding: 7px;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    margin: 0 2px;
}

.mobile-top-bar.show-background .header-icon,
.mobile-top-bar.show-background .header-icon:hover{
    border-color:#000;
}
.mobile-search-icon i {
    padding-left: 2px;
    padding-right: 2px;
}


.mobile-nav img.social-media {
	height: 40px;
	width: 40px;
	padding: 2px;
}



.mobile-search-screen {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
	right: 0px;
	bottom: 0px;
    background: #ffffff;
	z-index: 9;
}

.mobile-search-screen button.close-btn p {
    margin-top: -7px;
    font-size: 20px;
}

.mobile-search-screen .search-popup-form {
    background: #eaeaea;
    padding: 10px;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 200;
}

.mobile-search-screen input.input-btn {
	border: 1px solid #dddddd;
	padding: 10px;
	width: 100%;
	outline: 0;
	font-weight: normal;
	color: #000;
	border-radius: 8px;
}

.mobile-search-screen button.close-btn {
    border: 1px solid #dddddd;
    padding: 13px;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    width: 50px;
    position: absolute;
    top: 11px;
    right: 10px;
    font-size: 16px;
    height: 42px;
	border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}
.mobile-search-screen button.close-btn i.fas.fa-times {
    vertical-align: text-top;
}
.mobile-search-result-area {
    margin-top: 68px;
    z-index: 500;
}
.mobile-search-results {
    padding: 12px;
    overflow: hidden;
}
/*End Mobile*/
/** Start  Category/products-listing Page  **/
.index-cat-rect-image {
	height: 100%;
    width: 100%;
    object-fit: fill;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	
}

.index-cat-squre-image {
    border-radius: 8px;
    height: auto;
    width: 100%;
}

.shadow-box{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.border-radius-8{
	border-radius: 8px;
}

.homepage-cat-block{
	border: 1px solid var(--cats-box-border-color);
	background-color: var(--cats-box-bg-color);
	color: var(--cats-box-ft-color);
	border-radius: .25rem;
	padding: 10px;
    height: 100%;
}

.homepage-cat-block a{
	color: var(--cats-box-ft-color);
}

.cat-container{
	padding-left: 2px;
	padding-right: 2px;
}
.cat-container:not(.active) .cat-header{
	padding: 10px 15px;
	cursor: pointer;
	color: var(--cats-heading-ft-color);
	background-color: var(--cats-heading-color);
}

.cat-container:not(.active) .cat-header:hover{
	color: var(--cats-heading-ft-color-active);
	background-color: var(--cats-heading-color-active);
}

.cat-container.active .cat-header{
	padding: 10px 15px;
	cursor: pointer;
	color: var(--cats-heading-ft-color-active);
	background-color: var(--cats-heading-color-active);
}

.cat-container.active .cat-header:hover{
	color: var(--cats-heading-ft-color-active);
	background-color: var(--cats-heading-color-active);
}

.cat-container .cat-header span.fa {
  font-size: 22px;
  float: right;
  display: inline-block;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.cat-container .cat-header h3 {
  display: inline-block; 
}

.cat-container.active .cat-header span {
  -webkit-transform: rotate(-180deg) !important;
  transform: rotate(-180deg) !important; 
}

.p-title h2{
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	line-height: 1.7;
}


.item-dprice{
	color: var(--items-dprice-font);
}
.item-discount{
	color: var(--items-discount-font);
}
.item-old-price{
	color: var(--items-price-font);
}
.item-price{
	color: var(--items-price-font);
}
.item-title{
	color: var(--items-title-font);
	font-size: 14px;
}
.item-desc{
	color: var(--items-desc-font);
}

.item-thamb-img .itm-img-div {
  height: 150px;
  background-position: center center;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
}

.index-item-tag-shape {
    position: absolute;
    top: 3px;
    left: 4px;
    background-color: var(--tag-bg-color);
    color: var(--tag-font-color);
	border: 1px solid var(--tag-border-color);
    height: 35px;
    width: auto;
    min-width: 60px;
    text-align: center;
    border-radius: 5px;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
}
  
/** products listing **/
.product{
 	padding: 16px;
	border-bottom: 1px solid #EEE;
}

.product a:hover, .product a:focus, .product:active{
	opacity: 0.9
}
.product h3{
	font-size: 16px;
}

.product p{
	font-size: 13px;
}

.btn-2{
	font-size: 13px;
    padding: 8px 6px;
    color: var(--secondary-alt-color);
    background: var(--secondary-alt-font-color);
    font-weight: bold;
    border-color: var(--secondary-border-color);
}
/** end  Category/products-listing Page  **/
/** Start  Product Details Page  **/
.form-control:focus {
   box-shadow: unset;
}

.p-img img{
	width: 100%;
	height: auto;
}

.p-det {
	padding: 16px;
	border-bottom: 8px solid var(--bg-sep-color);
}

.p-det p{
	margin: 0
}

.p-price{
	font-weight: normal;
	font-size: 15px;
}

.p-dprice-original{
	text-decoration: line-through;
}


/*
.p-quan button{
	border: 0;
    color: var(--primary-color);
    background: var(--primary-fontt-color);
    font-size: 18px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--primary-color) !important;
    text-align: center;
    margin: 0 13px;
}

.p-quan .decrease-qty{
	margin-left: 0px;
}*/

.p-quan span{
	font-size: 18px;
    font-weight: bold;
    line-height: 1.9;

}
/** End  Product Details Page  **/

/** Checkout and adress branches and other Pages  **/
.checkout .heading{
	color: var(--checkout-heading-font);
}

.checkout .sub-heading{
	color: var(--checkout-subheading-font);
}

.q-total p{
	color: #999999;
	margin: 0;
	font-size: 13px;
}

.total-container {
	border-top: 1px solid #eee;
	padding-top: 10px;
}
.total-price {
	font-size: 15px;
	color: color: var(--checkout-fields-title-font);
	font-size: 13px;
	font-weight: bold;
}
.p-qu{
	padding: 16px;
}

.p-q{
	border-bottom: 1px solid #eee;
	padding: 16px 0;
}


.gift{
	margin: 16px;
	padding: 16px;
	background: #eee
}


.gift .form-check-input{
	    width: 25px;
    height: 25px;
    margin-top: 11px;
}

.item-del-btn{
	padding: 8px 13px;
	font-size: 16px;
    color: var(--general-font-color);
    background: var(--bg-color);
    font-weight: bold;
	border-color: var(--general-font-color);
}


.sep{
	background: var(--bg-sep-color);
}

.sep .col-3{
	padding: 0 2px
}
.sep  .se{
	height: 2px;
	background: var(--bg-sep-color);
	width: 100%

}

.sep1{
	background: var(--primary-color) !important;
}

.add .row{
	margin-top: 10px;
	color: #616161
}

.add .pad{
	text-align: center;
    border: 1.9px solid var(--primary-color);
    padding: 5px;
    border-radius: 5px;
	cursor: pointer;
}

.add .pad.payment{
    height: 110px;
}

.activo{
	color: var(--primary-font-color);
	background-color: var(--primary-color);
	border-color: var(--primary-border-color) !important;
}

.add .pad:hover{
	color: var(--primary-alt-font-color);
	background-color: var(--primary-alt-color);
	border-color: var(--primary-alt-border-color);
}

.add .pad i{	
	font-size: 20px
}

.office, .apartment{
  display: none
}
/** Mobiles and Tablets Styling **/

.popup-form {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 33%;
    height: 100%;
    background: #ffffff;
	z-index: 500;
}

@media (max-width: 992px){
	.big-part{
		display: none
	}

	.small-part, .popup-form, .btn-cont{
		width: 100%
	}
    .powered-by{
		width: 100% !important;
    }

}

@media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
	.popup-form{
		width: 50%;
	}
}

.popup-form-inner-wrapper{
	width: 100%;
    background: #ffffff;
}

.popup-form button.close-btn p {
    margin-top: -7px;
    font-size: 20px;
}

.popup-form button.close-btn {
    border: 1px solid #dddddd;
    padding: 13px;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    width: 50px;
    position: absolute;
    top: 11px;
    right: 10px;
    font-size: 16px;
    height: 42px;
}

.popup-form button.close-btn i.fas.fa-times {
    vertical-align: text-top;
}

.order-type-section input.input-btn {
  border: 0px;
  border-radius: .25rem;
  padding: 10px;
  width: 100%;
  outline: 0;
  font-weight: normal;
  margin-bottom: 10px;
}


/*Select Order Type*/
/*.order-type-section .option-header {
	display: flex;
	justify-content: space-between;
	justify-items: center;
	flex-wrap: nowrap;
	font-weight: bold;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--main-color);
	padding: 5px
}*/



.order-type-section {
	border-radius: .25rem;
}

.order-type-section .options-container {
	width: 100%;
	margin: auto;
	padding: 0px;
	background-color: var(--deliverybox-bg-color);
}

.order-type-section .options-container .field-title{
	color: var(--deliverybox-fields-title-font);
}

.order-type-section .options-container .field-value{
	color: var(--deliverybox-fields-value-font);
}

.order-type-section .options-container a.field-value{
	color: var(--deliverybox-fields-value-clickable-font);
	text-decoration: none;
}

.order-type-section .options-buttons-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap:nowrap
}
.order-type-section .or {
	margin: 5px;
}
/*.order-type-section .order-option {
	width: 200px;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}
.order-type-section .order-option{
	width: 200px;
	background-color: rgba(221, 221, 221, 0.3);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.order-type-section .order-option.active {
	width: 200px;
	background-color: var(--bars-color);
	color: var(--bars-font-color);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}


.order-type-section .order-option:hover, .order-type-section .btn-submit:hover,.order-type-section .btn-change:hover{
	background-color: var(--bars-color) !important;
	color: var(--bars-font-color) !important;
	border: 1px solid var(--bars-color);
}*/

.order-type-section .option-search {
	margin-top: 5px;
	margin-bottom: 10px;
}

.order-type-section .city,.order-type-section .order-branch-item {
	padding: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.order-type-section .order-branch-item.active {
	background-color: var(--areas-dd-bg-active);
	color: var(--areas-dd-font-active);
}


.order-type-section .order-branch-item{
	padding: 10px 15px;
    cursor: pointer;
}

.order-type-section .order-branch-item:not(:first-child){
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.order-type-section .order-branch-item:first-child{
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}



.order-type-section .order-branch-item:hover {
	background-color: var(--areas-dd-bg-active);
	color: var(--areas-dd-font-active);
}

.order-type-section .option-details {
	display: none;
}
.order-type-section .details-content h2 {
	font-weight: bold;
}
.order-type-section .details-edit {
	font-size: 0.8rem;
}

.order-type-section .details-wrapper li {
	padding: 2px;
	font-size: 14px;
}


/*Loader*/
.checkout-loader-container{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 100;
}
.checkout-loader{
	border: 10px solid #f3f3f3; /* Light grey */
	border-top: 10px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
}
.checkout-loader-container.show-loader {
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes spin {
 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}



.G-map {
	width: 100%;
	border:0;
	height: 400px;
	transition: height ease-in-out 0.5s;
}

.G-map.minimiz {
	height: 150px;
}

label.error {
	display: block;
}

.error-color{
	color: var(--error-color);
}
.error{
	color: var(--error-color) !important;
	font-size: 12px;
}


/*Areas Popup*/
.delivery-city-modal .modal-dialog{
  height: 90vh;
  overflow: hidden;
}

.main-city-li {
  border-top: 1px solid rgba(0, 0, 0, 0.12); }

.main-city-li:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.popop-location-lists {
  margin-top: 15px; }

.city-head {
  padding: 10px 15px;
cursor: pointer;  }

.city-head span.fa {
  font-size: 22px;
  color: #000;
  float: right;
  display: inline-block;
  -webkit-transition: 0.3s all;
  transition: 0.3s all; }

.city-head h3 {
  display: inline-block; }

.main-city-li.active .city-head span {
  -webkit-transform: rotate(-180deg) !important;
  transform: rotate(-180deg) !important; 
}

.inner-city-dropdown {
  border-top: 1px solid rgba(0, 0, 0, 0.12); 
}

.inner-city-dropdown li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); 
}

.inner-city-dropdown li:last-child {
  border-bottom: none;
}

.inner-city-dropdown li a {
  padding: 10px 25px;
  display: block;
  font-size: 14px;
  color: var(--areas-dd-font);
}

.inner-city-dropdown li:hover a {
  color: var(--areas-dd-font-active);
}

.inner-city-dropdown li:hover {
  background-color: var(--areas-dd-bg-active);
  color: var(--areas-dd-font-active);
}

.inner-city-dropdown {
  display: none;
}

.popop-location-lists {
  overflow-y: scroll;
  height: 55vh;
}

li.main-city-li .city-head {
  background-color: var(--areas-dd-bg);
  color: var(--areas-dd-font);
}

li.main-city-li:hover .city-head {
  background-color: var(--areas-dd-bg-active);
  color: var(--areas-dd-font-active);
}

li.main-city-li.active .city-head {
  background-color: var(--areas-dd-bg-active);
  color: var(--areas-dd-font-active);
}

.popop-head-wrap {
  padding: 15px 10px;
  display: block;
  border-bottom: 2px solid;
  text-align: center;
}

.popop-main-heading {
  font-size: 15px;
  text-transform: uppercase;
}

.top-search-panal {
  padding: 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.08) 2px 2px 4px 2px;
          box-shadow: rgba(0, 0, 0, 0.08) 2px 2px 4px 2px;
}

.popop-content-wrapper h3 {
  font-size: 20px;
  color: #000;
  margin-top: 20px;
  margin-bottom: 5px;
}
  
.search-input-style {
  border: none;
  border-bottom: 1px solid #000;
  padding: 8px 0px;
  font-size: 15px;
  display: block;
  width: 100%;
}
 
.inner-city-dropdown-not-active {
  padding: 10px 25px;
  display: block;
  font-size: 14px;
  color: gray;
  font-style: italic;
}

.area-list-busy,.area-list-closed{
	color: var(--error-color);
}

.bi-credit-card-2-front-fill{
	font-size: 52px;
	color: var(--primary-color);
	padding: 10px;
}



/*Spinner*/
.spinner {
  width: 100%;
  height: 25px;
  text-align: center;
  font-size: 9px;
}

.spinner > div {
  background-color: var(--primary-font-color);
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  -moz-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  -o-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect1 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  -moz-animation-delay: -1.1s;
  -o-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }  
  20% { transform: scaleY(1.0); }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1.0); }
}


.spinner-container{
	text-align: center;
	display: none;
}


/*Tracking*/
.track-order-link{
	
	font-size: 1rem;
	padding: 10px;
	margin: 10px 12px 0px 12px;
	display: block;
	border-radius: .25rem;
}
.track-order-link:hover{
	color: var(--primary-alt-font-color);
    background-color: var(--primary-alt-color);
    border-color: var(--primary-border-color);
}
.trackorder-lg-screen {
    display: none;
    text-align: center;
    padding: 0px 17px;
	z-index: 24001;
}
.trackorder-lg-screen input.input-btn {
  border: 1px solid #dddddd;
  padding: 10px;
  width: 100%;
  outline: 0;
  font-weight: normal;
  margin-bottom: 10px;
  border-radius: 8px;

}
.trackorder-lg-screen h3 {
	margin-bottom: 25px;
	text-align: left;
}
.trackorder-lg-screen button.close-btn {
    border: 1px solid #dddddd;
    padding: 13px;
    outline: 0;
    cursor: pointer;
    font-weight: bold;
    width: 50px;
    position: absolute;
    right: 17px;
    font-size: 16px;
    height: 44px;
}
.trackorder-lg-screen button.close-btn p {
    margin-top: -7px;
    font-size: 20px;
}
.trackorder-lg-screen button.close-btn i.fas.fa-times {
    vertical-align: text-top;
}
.trackorder-lg-screen button.submit-btn {
    display: inline-block;
	padding: 10px 20px;
	text-transform: uppercase;
	text-align: center;
	font-size: 15px;
}

.trackorder-lg-screen form label.error {
	display: block;
	text-align: left;
	margin-bottom: 5px;
	
}

/*Radio Fields/Checkboxes*/
.radio-field {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    position: relative;
}

.radio-field label {
    cursor: pointer;
    -webkit-flex: 1 1;
    flex: 1 1;
    margin: 0;
    padding-left: 11px;
    padding-top: 2px;
    position: relative;
    touch-action: manipulation;
    transition: color .15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


.radio-field input {
    height: 24px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    width: 24px;
}

.radio-field label:after, .radio-field label:before {
    content: "";
    position: absolute;
    z-index: 1;
}

.radio-field label:before {
    background-color: var(--primary-font-color);
    border: 1px solid var(--primary-color);
    display: inline-block;
    height: 18px;
    left: -18px;
    top: 5px;
    transition: border-color .15s ease;
    width: 18px;
}
.radio-field label:before {
    border-radius: 100%;
}
.radio-field label:after {
    display: block;
    opacity: 0;
}
.radio-field label:after {
    -webkit-animation: shrink-dot .15s ease-in;
    animation: shrink-dot .15s ease-in;
    background-color: var(--primary-color);
    border-radius: 100%;
    height: 8px;
    left: -13px;
    top: 10px;
    -webkit-transform: scale(0) translateZ(0);
    transform: scale(0) translateZ(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: background-color .15s ease-in;
    width: 8px;
}
.radio-field input:checked~label:before {
    border-color: var(--primary-color);
}
.radio-field input[type=radio]:checked~label:after {
    -webkit-animation: grow-dot .15s ease-in;
    animation: grow-dot .15s ease-in;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
}
.radio-field input:checked~label:after {
    opacity: 1;
}
.radio-field input:checked~label {
    color: var(--primary-color);
}

.checkbox-field {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    position: relative;
}

.checkbox-field input {
    height: 24px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    width: 24px;
}

.checkbox-field label {
    cursor: pointer;
    -webkit-flex: 1 1;
    flex: 1 1;
    margin: 0;
    padding-left: 11px;
    padding-top: 2px;
    position: relative;
    touch-action: manipulation;
    transition: color .15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.checkbox-field label:after, .checkbox-field label:before {
    content: "";
    position: absolute;
    z-index: 1;
}
.checkbox-field label:before {
    border-radius: 4px;
}

.checkbox-field label:after {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    left: -20px;
    top: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 24px;
}

.checkbox-field input[type=checkbox][data-valid=true]~label:after,.checkbox-field label:after {
    background-image: url(img/tick.png);
    background-repeat: no-repeat;
    
	background-color: var(--primary-color);
}

.checkbox-field input:checked~label small {
    color: var(--primary-color);
}
.checkbox-field input:checked~label {
    color: var(--primary-color);
}
.checkbox-field input:checked~label:before {
    border-color: var(--primary-color);
}
.checkbox-field label:before {
    border-radius: 4px;
}
.checkbox-field label:before {
    background-color: var(--primary-font-color);
    border: 1px solid var(--primary-color);
    display: inline-block;
    height: 18px;
    left: -18px;
    top: 5px;
    transition: border-color .15s ease;
    width: 18px;
}
.checkbox-field label:after {
    display: block;
    opacity: 0;
}
.item_modifier-options+.item_modifier-options {
    margin-top: 10px;
}


.checkbox-field input:checked~label:after {
    opacity: 1;
}


/*Checkout*/
.remove-address {
  display: inline-block;
  cursor: pointer;
  vertical-align: top;
  font-size: 36px;
  color: var(--error-color);
  height: 20px;
  line-height: 22px;
  width: 23px; 
}
  
.field-title{
	color: var(--checkout-fields-title-font);
}

.field-value{
	color: var(--checkout-fields-value-font);
	font-weight: bold;
}

/*Track Order - Order Page*/
.orderpage-trackorder-container .track-progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: var(--primary-color);
    padding-left: 0px;
}

.orderpage-trackorder-container .track-progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}

.orderpage-trackorder-container .track-progressbar .step:before {
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f192";
    color: var(--primary-font-color);
}

.orderpage-trackorder-container .track-progressbar .step.active:before {
    color: var(--primary-font-color);
}

.orderpage-trackorder-container .track-progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 41px;
    display: block;
    font-size: 20px;
    background: #000;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
	position:relative;
	z-index: 1;
}

.orderpage-trackorder-container .track-progressbar li:after {
    content: '';
    width: 100%;
    height: 12px;
	background: #000;
    position: absolute;
    left: 0;
    top: 16px;
    z-index: 0;
}

.orderpage-trackorder-container .track-progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
}

.orderpage-trackorder-container .track-progressbar li:nth-child(2):after,
.orderpage-trackorder-container .track-progressbar li:nth-child(3):after {
    left: -50%;
}

.orderpage-trackorder-container .track-progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}

.orderpage-trackorder-container .track-progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.orderpage-trackorder-container .track-progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.orderpage-trackorder-container .track-progressbar li.active:before,
.orderpage-trackorder-container .track-progressbar li.active:after {
    background: var(--primary-color);
}

.orderpage-trackorder-container .track-progressbar li.active:before {
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f00c";
}
.orderpage-trackorder-container .track-progressbar li:not(.active):before {
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f192";
}

.orderpage-trackorder-container .track-progressbar .icon {
	color: var(--primary-color);
    margin-top: 10px;
}

.orderpage-trackorder-container .track-progressbar .icon-content {
    padding-bottom: 20px
}
.orderpage-trackorder-container .track-progressbar .icon-font {
  font-size: 16px;
}

.orderpage-trackorder-container .track-status {
    width: 100%;
	font-family: 'Montserrat', sans-serif;
	color: #000;
}
.orderpage-trackorder-container .track-status .track-status-desc {
	display: block;
}
/*End Track Order - Order Page*/

.otp-input{
	font-size: 18px;
	border-bottom: unset;
}
.display-block{
	display: block !important;
}

.hide{
	display: none !important;
}
.hide2{
	display: none !important;
}

.svg-circleplus {
	height: 30px;
	stroke: var(--general-font-color);
	cursor: pointer;
	margin-left: 15px;
}

.svg-circleminus {
	height: 30px;
	stroke: var(--general-font-color);
	cursor: pointer;
	margin-right: 15px;
}

.pointer{
	cursor: pointer;
}


.modal-banner-popup .close {
	margin-top: -2px;
	width: 50px;
	height: 50px;
	font-size: 35px;
	position: absolute;
	right: 0px;
	opacity: 0.8;
	-webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.modal-banner-popup .item-img {
    max-height: 450px !important;
	border-radius: 3px 3px 0 0;
    width: 100%;
}

.modal-banner-popup .modal-content .modal-body label {
    font-size: 12px;
}


@media screen and (max-width: 576px){
	.modal-sm-customize{
		width: 90% !important;
		margin: 10px auto;
	}
	
}
@media screen and (min-width: 577px){
	.modal-sm-customize{
		width: 450px !important;
		margin: 30px auto  !important;
	}
}

.full-width-textarea{
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	width:100%;
}


.powered-by{
    position: fixed;
    bottom: 64px;
    width: 33%;
    text-align: center;
    z-index: 0;
    font-size: 11px;
}

.powered-by a{
    text-transform: none; 
    letter-spacing: 2px;
    text-decoration: none;
    color: var(--general-font-color);
}