/* ================= GOOGLE FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;900&display=swap');

/* ================= ROOT VARIABLES ================= */
:root{--primary:#0381B3; --success:#5cb85c; --info:#428bca; --danger:#d9534f; --text:#333; }

/* GLOBAL */
html {
	height: 100%;
	zoom: 80%;
	width: 100%;
	font-family: "Poppins", sans-serif;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Poppins", sans-serif
}
body {
	font-family: "Poppins", sans-serif;
	background-attachment: fixed;
	line-height: 20px;
	zoom: 99%;
	/* background: url(../image/h-bg.jpg); */
}
.bi-cart-fill{color: #0381B3;}
.header-table th{color: #fff;}
.btn-success {color: #ffffff;background-color: #00a363;border-color: #4cae4c;}
.btn-green   {background-color: #20b487;color: #fff;}

.mlr-0 {margin-left: 0rem;margin-right: 0rem;}
.plr-0 {padding-left: 0rem;padding-right: 0rem;}
.ptb-1 {padding-top: 1rem;padding-bottom: 1rem;}
.plr-1 {padding-top: 1rem;padding-bottom: 1rem;}
.mt-2 {margin-top: 2rem;}
.mb-2 {margin-bottom: 2rem;}

.buttonHide   { display: none;	margin-left: 1rem;}
.buttonShow   { display: inline;margin-left: 1rem;}
.displayNone  { display: none;}
.displayBlock { display: block;}
.field-error  { border-color: #f5b6b6 !important;background-color: #ffd9d9 !important;}
#toast-container .toast-success {font-size: 2.5rem;width: 600px;opacity: 1;}
#toast-container .toast-warning {font-size: 2.5rem;width: 600px;opacity: 1;}
.bg-darkblue{background-color: #0381B3;display: flex;align-items: center;justify-content: space-between;}

/******************** 
*** Blinker Code  ***
*********************/
@-webkit-keyframes blinker {from {opacity: 1.0;}to {opacity: 0.0;}}

.blink {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
}

/******************** 
*** Loader Start ***
*********************/
.loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.85);z-index: 1002;}
.posHide {display: none;}
.spinner {width: 50px;height: 40px;text-align: center;font-size: 10px;position: absolute;top: 50%;left: 50%;bottom: 0;margin-top: -20px;margin-left: -25px;}
.spinner>div {background-color: #ff9800;height: 100%;width: 6px;display: inline-block;
				-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}

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

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

.tableSpinner {height: 40px;text-align: center;position: absolute;top: 50%;left: 40%;bottom: 0;margin-left: -25px;font-size: 1.5rem;}
.spinner.spinnerMsg {width: 10%;left: 47%;top: 52%;}

/******************** 
*** Index Page ***
*********************/
.indexPage { overflow-y: auto; display: flex;justify-content: center;align-items: center;min-height: 100vh; }
.indexPage #container {  width: 100%; position: absolute; top: 40%; left: 60%; transform: translate(-50%, -50%);}
.indexPage #loginbox  { width: 45rem; height: 45rem; margin: 0 auto; }
.indexPage #loginbox img { width: 350px; }
.indexPage .loginBox input { height: 4.6rem; }
.indexPage #container .btn-lg { padding: 0.5rem 0rem; height: 4.5rem; font-size: 2.5rem; }
.indexPage .indexLogo { width: 100% !important; }
.indexPage .loginBox hr { margin: 0rem;}
.indexPage .loginBox .input-group { padding-bottom: 1rem; }
.indexPage .loginBox .input-group-addon { font-size: 3rem; }
.indexPage .loginBox .form-control { font-size: 2rem;}
.indexPage .loginBox p { font-size: 2rem; }
.indexPage .form-inline { display: inline-flex; flex-flow: row wrap; align-items: center; }
.indexPage .loginBox ul { list-style-type: none; padding: 0rem; }
.indexPage .loginBox ul li { width: 50%; padding-right: 1rem; display: flex; }
.indexPage .loginBox ul .form-check-input { display: none; }
.indexPage .loginBox .radioLabel { width: 100%; background: #eeeeee; color: #555555; margin-right: 1rem; font-size: 2rem; padding: 1rem 3rem; }
.indexPage .loginBox .active { background: #428bca; color: #ffffff; }
.indexPage .version-text { bottom: 0; position: absolute; width: 100%;}


/******************** 
*** Top Header Manu ***
*********************/
ul#horizontal-list li { position: relative;display: inline-flex;padding: .3rem;}
header {position: relative;z-index: 100;}
.bigmenu {display: block;}
.bigmenu .fa{font-size: 18px;}
.menusmall {display: none;}
.menu-toggle {float: left;height: 40px;margin-left: 20px;margin-top: 13px;display: block;position: relative;}

.menu-toggle span {
	display: block;
	background-color: #FF0077;
	width: 24px;
	height: 3px;
	margin-top: -1.5px;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	position: absolute;
	right: 8px;
	top: 50%;
	bottom: auto;
	left: auto;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-webkit-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

.menu-toggle span::before,
.menu-toggle span::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: inherit;
	position: absolute;
	-moz-transition-duration: 0.2s, 0.2s;
	-o-transition-duration: 0.2s, 0.2s;
	-webkit-transition-duration: 0.2s, 0.2s;
	-ms-transition-duration: 0.2s, 0.2s;
	transition-duration: 0.2s, 0.2s;
	-moz-transition-delay: 0.2s, 0s;
	-o-transition-delay: 0.2s, 0s;
	-webkit-transition-delay: 0.2s, 0s;
	-ms-transition-delay: 0.2s, 0s;
	transition-delay: 0.2s, 0s;
}

.menu-toggle span::before {
	top: -8px;
	-moz-transition-property: top, transform;
	-o-transition-property: top, transform;
	-webkit-transition-property: top, transform;
	-ms-transition-property: top, transform;
	transition-property: top, transform;
}

.menu-toggle span::after {
	bottom: -8px;
	-moz-transition-property: bottom, transform;
	-o-transition-property: bottom, transform;
	-webkit-transition-property: bottom, transform;
	-ms-transition-property: bottom, transform;
	transition-property: bottom, transform;
}

/* is clicked */
.menu-toggle.is-clicked span {
	background-color: rgba(255, 0, 119, 0);
}

.menu-toggle.is-clicked span::before,
.menu-toggle.is-clicked span::after {
	background-color: #ff0077;
	-moz-transition-delay: 0s, 0.2s;
	-o-transition-delay: 0s, 0.2s;
	-webkit-transition-delay: 0s, 0.2s;
	-ms-transition-delay: 0s, 0.2s;
	transition-delay: 0s, 0.2s;
}

.menu-toggle.is-clicked span::before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu-toggle.is-clicked span::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#main-nav-wrap { display: block;font-family: "Poppins", sans-serif;font-size: 1.5rem;position: absolute;top: 5rem;right: 0rem;}
.main-navigation {background: #fff;padding: 15px 11px 10px;width: 100%;height: auto;clear: both;display: none;width: 20rem;}
.main-navigation>li {display: block;text-align: left;}
.main-navigation li a {display: block;color: #000;padding: 15px 0;font-weight: 600;}
.main-navigation li a i {color: #428bca;}
.main-navigation li a:hover {color: #428bca;padding-left: 1rem;}
.full-navigation {background-color: #0381b3;list-style: none;float: right;margin: 0;font-size: 1.45rem;}
.full-navigation>li {float: left;margin-left: 25px;position: relative;}
.full-navigation li a {cursor: pointer;line-height: 18px;color: #fff;text-decoration: none;}
.full-navigation li a i {margin-left: -2px;}
.full-navigation li a:hover {color: #bbb}

/******************** 
*** Radio Box and Checkbox  ***
*********************/
input[type="radio"],input[type="checkbox"] {margin: 0;line-height: normal;display: none;}
input[type="radio"].badgebox+.badge {border-radius: 4px;width: 23px;height: 23px;font: bold 15px/12px tahoma}
.badge .bi-check-lg{color: #fff;}
input[type="radio"].badgebox:checked+.badge {background-color: #0381B3;color: #fff;}
.badgebox {opacity: 0;}
.badgebox+.badge {text-indent: -999999px;width: 21px;border-radius: 0px;background: #fff none repeat scroll 0% 0%;border: 1px solid #bbb;color: #aaa;}
.badgebox:focus+.badge {box-shadow: inset 0px 0px 2px;}
.badgebox:checked+.badge {text-indent: -2px;}

/******************** 
*** Image Slider  ***
*********************/
.myLiveOrderSlide {height: 100%;width: 100%;}
.imageSliderLeftIcon {position: absolute;top: 50%;left: 0%;transform: translate(0%, -50%);}
.imageSliderRightIcon {position: absolute;top: 50%;right: 0%;transform: translate(0%, -50%);}
.imageSliderButton {border: none;display: inline-block;padding: 3rem 2rem;color: #fff;background-color: #000;cursor: pointer;font-size: 4rem;}

/******************** 
*** Page CSS  ***
*********************/
.headerDivContent { height: 5%; width: 100%; margin: 0 auto; }
.headerDivContent img { width:250px; height:56px; margin:1px 0!important; padding:5px 0px; }

.containerDivContent { background-color: #0381b3; height: 95%; width: 100%;margin: 0 auto; }

.fullDivContent 		{ height: 100%; width: 100%; overflow: hidden; padding: 0rem; }
.leftSideDivContent 	{ height: 100%; width: 30%;  overflow: hidden; padding: 0rem; background: #ffffff;border-right: 1px solid #ccc;}
.centerSideDivContent 	{ height: 100%; width: 45%;  overflow: hidden; padding: 0rem; }
.rightSideDivContent 	{ height: 100%; width: 25%;  overflow: hidden; padding: 0rem; background: #ffffff;border-left: 1px solid #ccc;}
.historyLeftDivContent 	{ height: 100%; width: 25%;  overflow: hidden; padding: 0rem; background: #f8f8f8;}
.historyRightDivContent { height: 100%; width: 75%;  overflow: hidden; padding: 0rem; }

.leftSideDivContent .cardDivContent { height: 81%; padding: 1rem 0rem 0rem 0rem; }
.leftSideDivContent .billDetailContent { height: 16.6%; width: 100%; background: #efefef; padding: 1rem 0rem; }
.leftSideDivContent .marqueeDivContent {height: 5%;width: 100%;background: #0381b3;padding: 1rem;line-height: 1;}
.leftSideDivContent .cardDivContent .cartItemContent {height: 97%;width: 100%;overflow-y: auto;overflow-x: hidden;}
.leftSideDivContent .cardDivContent .backButton { display: none;}

/**************** Bill Detail ** *********************/
.leftSideDivContent .billDetailContent .billHeading { font-size: 1.8rem;}
.leftSideDivContent .billDetailContent .billHeadingAmt { font-size: 1.9rem; float: right; }
.leftSideDivContent .billDetailContent .couponHeading {font-size: 1.8rem;}

.centerSideDivContent .itemRetailDiv,.fullDivContent .itemRetailDiv {height: 100%;width: 100%;}
.centerSideDivContent .itemRetailContent,.fullDivContent .itemRetailContent { height: 94%; width: 100%;}
.centerSideDivContent .bottomButtonIcon,.fullDivContent .bottomButtonIcon   { height: 6%;  width: 100%; background: #fff;overflow: overlay; }

.centerSideDivContent .cartItemEditDiv { display: none;}
.mainCateDivContent .borderRadius { height: 75%;width: 99.5%;overflow-y: auto;position: absolute;margin-left: 0.5rem;}
.subCateDivContent  .borderRadius { height: 77%;width: 99.5%;overflow-y: auto;position: absolute;margin-left: 0.5rem;}
.productDivContent  .borderRadius { height: 77%;width: 99.5%;overflow-y: auto;position: absolute;margin-left: 0.5rem;}

.rightSideDivContent .cartPaymentOptionDiv { height: 100%; top: 10px; padding-right: 5px; padding-top: 5px; }
.rightSideDivContent .paymentButtonDiv { height: 5%; width: 100%; position: absolute; bottom: 0; }
.rightSideDivContent .form-control { height: 4rem; }
.rightSideDivContent .form-horizontal .form-group { margin-right: 0; margin-left: 0; }
.rightSideDivContent .radioLabel { background-color: #ffffff; color: #ffffff; margin-right: 5px; font-size: 4rem; padding: 0.5rem 0.5rem; }
.rightSideDivContent .badgeLable { margin-right: 5px;font-size: 3rem; }
.rightSideDivContent .badge { font-size: 2rem; }
.rightSideDivContent .methodRadioLable { margin-right: 5px; font-size: 2rem; height: 3rem;}
.rightSideDivContent .form-control {height: 4rem;font-size: 2rem;}
.rightSideDivContent .form-horizontal .form-group {margin-right: 0;margin-left: 0;}
.rightSideDivContent .orderPaymentHistoy {max-height: 27rem;overflow: auto;margin-bottom: 0;bottom: 0;position: absolute;display: contents; font-size: 16px;}

.rightSideDivContent .cartPaymentOptionDiv .payTypeImg { height:50px; width:auto; }

.orderPaymentHistoy .historyDelBtn {padding: 4px 6px; }

/**************** Bill Detail ** *********************/
.paymentButtonDiv .payButton { font-size: 3rem; padding: 1.2rem 1rem; line-height: 1; color: #ffffff;
	background-color: #5cb85c; border-color: #4cae4c; margin-bottom: 0; text-align: center; cursor: pointer; display: block;
	text-decoration: none; }


.historyLeftDivContent .cardDivContent 	  { height: 95%; padding: 1rem 0rem 0rem 0rem; }
.historyLeftDivContent .marqueeDivContent { height: 5%; width: 100%;background: #0381b3;padding: 1rem;}
.historyLeftDivContent .cardDivContent .cartItemContent {height: 97%;width: 100%;overflow-y: auto;overflow-x: hidden;}
.historyLeftDivContent .cardDivContent .backButton {display: none;}
.historyLeftDivContent .cardDivContent .divBreakHr {border-top: 2px solid #ccc5c5;display: block;margin-block-end: 0.5em;}
.historyLeftDivContent .cardDivContent .billHeading {font-size: 1.7rem;text-align: left;}
.historyLeftDivContent .cardDivContent .billHeadingAmt {font-size: 1.7rem;text-align: right;color: #6d6d6d;padding-top: 0.5rem;margin-bottom: 0.5rem;}
.historyLeftDivContent .dayCloseButtonDiv {height: 7%;width: 100%;padding: 0rem;bottom: 0;position: absolute;}
.historyLeftDivContent .payButton { font-size: 3rem;text-transform: uppercase;padding: 1rem 1.2rem;line-height: 1.33;font-weight: 600;
			color: #ffffff; background-color: #5cb85c;border-color: #4cae4c;margin-bottom: 0;text-align: center;cursor: pointer;
			display: block;text-decoration: none;} 

.historyRightDivContent .itemRetailDiv 	   { height: 100%; width: 100%;}
.historyRightDivContent .itemRetailContent { height: 94%;  width: 100%;}
.historyRightDivContent .bottomButtonIcon  { height: 6%;   width: 100%;background: #efefef;overflow: overlay;}
.historyRightDivContent .cartItemEditDiv {display: none;}
.historyRightDivContent .custOrderDivContent .borderRadius {overflow-y: auto;position: absolute;width: 100%;height: 84%;}
.historyRightDivContent .custOrderDivContent table {margin-bottom: 0;}
.historyRightDivContent .custOrderDivContent table th {font-size: 11pt;text-align: center;}
.historyRightDivContent .custOrderDivContent table td {font-size: 10pt;text-align: center;}


/************** Left Side Content SearchBox *********************/
.centerSideDivContent .searchDivContent {margin-top: 0rem;border-radius: 0px}
.centerSideDivContent .searchbox {font-size: 17px;font-weight: 500;padding: 2.5rem 1rem;border-radius: 0px}
input::placeholder {font-size: 17px;font-weight: 500;color: #000;}
.centerSideDivContent .breadcrumbDiv {margin-left: 0rem;margin-right: 0rem;padding-top: 1rem;padding-bottom: 1rem;}
.centerSideDivContent .breadCrumbButton {float: left;font-size: 2rem;padding: 1.25rem 2rem;background: #efefef;color: #333;border-color: #efefef;}
.centerSideDivContent .openCartButton {float: right;font-size: 2rem;padding: 1.25rem 2rem;display: none;margin: 0.4rem;}
.centerSideDivContent .breadCrumbActive {background-color: #5cb85c;color: #fff;color: #ffffff;border: none;}
.centerSideDivContent .breadCrumbActive:hover{background-color: #1c8d6b;}
.searchDivContent .cartProAutoContainer ul {position: absolute;z-index: 9;background: #0381B3;padding: 0rem;color: white;font-size: 2rem;}
.searchDivContent .cartProAutoContainer ul li {padding: 1rem;border-bottom: 1px solid #7ea2d6;}
.searchDivContent .cartProAutoContainer ul li:hover {background: #5cb85b;}
.searchDivContent .cartProAutoContainer .ulselected {background: #4d585d;}
/******************** 
*** Live Order ***
*********************/
.liveOrderDivContent .borderRadius {
	overflow-y: auto;
	position: absolute;
	width: 99%;
	margin-left: 0.5rem;
	height: 79%;
}

.liveOrderDivContent .order-item {
	width: 13%;
	margin: 0.4rem;
	display: inline-block;
	padding: 0.5rem;
}

.liveOrderDivContent .order-item h2 {
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 15.5rem;
	margin-top: 0rem;
	margin-bottom: 0.5rem;
	color: #fff;
	font-size: 2rem;
	line-height: 2.2rem;
}

/************** Main-category *** / *** Sub-category *** / *** Product Display ** ************/
.mainCateDivContent .main-cate,
.subCateDivContent .sub-cate {
	width: 14rem;
	margin: 0.4rem;
	display: inline-block;
	padding: 0.5rem;
}

.productDivContent .productItem {
	width: 14rem;
	position: relative;
	display: inline-block;
	margin: 0.4rem;
	padding: 0.5rem;
	margin-bottom: 3rem;
}

.mainCateDivContent .main-cate img,
.subCateDivContent .sub-cate img,
.productDivContent .productItem img {
	width: 15.5rem;
	height: 15.5rem;
	background: #fff;
}

.mainCateDivContent .main-cate h2,
.subCateDivContent .sub-cate h2 {
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 15.5rem;
	margin-top: 0rem;
	margin-bottom: 0.5rem;
	color: #fff;
	font-size: 2rem;
	line-height: 2.2rem;
}

.mainCateDivContent .main-cate .nameInitialDiv,
.subCateDivContent .sub-cate .nameInitialDiv,
.productDivContent .productItem .nameInitialDiv {
	background: #fff;
	text-align: center;
	width: 13.5rem;
	height: 13.5rem;
	padding-top: 4.5rem;
}

.mainCateDivContent .main-cate .nameInitial,
.subCateDivContent .sub-cate .nameInitial,
.productDivContent .productItem .nameInitial {
	font-size: 5rem;
	color: #fff;
}

.productDivContent .product-name {
	position: absolute;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 2rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 15.5rem;
	color: #333;
	margin-top: 0.5rem;
	overflow: visible;
	white-space: unset;
}

.productDivContent .product-name:hover {
	overflow: visible;
	white-space: unset;
}

.productDivContent .productItem .price-tag {
	position: absolute;
	top: 1.2rem;
	color: white;
	line-height: 2.2rem;
	font-size: 1.5rem;
	background: #333;
	padding: 0.5rem 0.5rem;
	border-bottom-right-radius: 1rem;
}

.productDivContent .productItem .price-tag span {
	padding-right: 0.5rem;
}

/******************** 
*** Marquee Content ***
*********************/
.marqueeDivContent .footerMarque {color: #fff; font-size: 3rem;}
.marqueeDivContent img { height: 3rem; width: auto; }

/******************** 
*** Cart Edit Product Scrren ****
*********************/
.cartItemEditDiv {display: none;}
.cartItemEditDiv .cartItemEditCancel {background: #fff;color: #0381b3; padding: 1rem; text-align: left;}
.cartItemEditDiv .cartItemEditCancel h3 { margin: 0.5rem 0; font-size: 2rem; cursor: pointer;}
.cartItemEditDiv .cartItemEditContent {background: #f1eef7;bottom: 0rem;position: absolute;top: 5rem;width: 100%;}

/******************* Tabs *********************/
.cartItemEditContent .itemEditTabs { width: 100%; height: 100%}
.cartItemEditContent .nav {padding-left: 0;margin-bottom: 0;}
.cartItemEditContent .nav-tabs {border-bottom: none;}
.cartItemEditContent .nav-tabs>li   { padding: 0rem; font-size: 2.5rem;}
.cartItemEditContent .nav-tabs>li>a { margin-right: 0rem;color: #428bca;background-color: #f8f8f8; padding: 0.5rem 1rem;}
.cartItemEditContent .nav-tabs>li.active>a {color: #428bca;cursor: default;background-color: #f1eef7;}
.cartItemEditContent .tab-content  { height: 95%; overflow-y: auto;}

/**************** Edit Cart Heading ****************/
.cartItemEditContent .editTextBox { text-align: center; margin-bottom: 0rem; }

/* Row layout */
.cartItemEditContent .editTextBox ul { padding: 0; list-style: none; display: flex; align-items: stretch; justify-content: center;}
.cartItemEditContent .editTextBox ul li { display: flex; align-items: center; margin: 0; border-radius: 0.5rem; }
.cartItemEditContent .qtylabel, .cartItemEditContent .unitlabel, .cartItemEditContent .editTextBox input {
height: 8rem;             
display: flex;
align-items: center;
padding: 0 2rem;
background: #fff;
font-size: 2rem;
}

/* Quantity label */
.cartItemEditContent .qtylabel {font-weight: 500;}

/* Input field (your style adjusted) */
.cartItemEditContent .editTextBox input {width: 37rem;font-size: 3.6rem;border: none;text-align: right;color: transparent;text-shadow: 0 0 0 #333;}

/* Remove default focus outline */
.cartItemEditContent .editTextBox input:focus {outline: none;}
/* Unit label */
.cartItemEditContent .unitlabel {color: #9d9ea2;font-weight: 400;gap: 1rem;}
/* Delete icon */
.cartItemEditContent .deleteIcon {color: #c10d0d;font-size: 2.2rem;cursor: pointer;}

/******************** 
*** Edit Cart Keypad  ***
*********************/
.cartItemEditContent .keyPadContent {margin-top: 3rem;width: 100%}
.cartItemEditContent .numaricKeyPadGrid {width: 100%;}
.cartItemEditContent .numaricKeyPadGrid ul {margin: 0 0 -5px 0;text-align: center;padding-inline-start: 0rem;}
.cartItemEditContent .numaricKeyPadGrid ul li {display: inline-block;margin: 0 1px 12px 0px;}
.cartItemEditContent .numaricKeyPadGrid ul li a {border-radius: 10px;color: #0381b3;display: block;font-weight: bold;}
.cartItemEditContent .numaricKeyPadGrid ul li a:hover {background: #0381b3;color: #fff;text-decoration: none;}
.cartItemEditContent .numaricKeyPadGrid .key-btn {width: 16rem;height: 8rem;padding: 3rem;font-size: 3rem;background: #fff;color: #0381b3;
					text-decoration: none; margin: 0rem 0.2rem; }

.cartItemEditContent .numaricKeyPadGrid .key-btn:active {box-shadow: 0 0 rgb(96, 96, 96) !important;top: 2px;}
.cartItemEditContent .numaricKeyPadGrid .key-icon {font-size: 2.5rem;}
.cartItemEditContent .numaricKeyPadGrid .disc-btn {background: #2e99db;color: #333;}
.cartItemEditContent .numaricKeyPadGrid .percentageDicount {display: block;}
.cartItemEditContent .numaricKeyPadGrid .fixedDicount {display: none;}
.cartItemEditContent .cartEditButton {text-align: center;margin-top: 1rem;}
.cartItemEditContent .cartEditButton ul {margin: 0;text-align: center;padding-inline-start: 0rem;}
.cartItemEditContent .cartEditButton ul li {display: inline-block;}
.cartItemEditContent .submitButton {font-size: 3rem;padding: 2.5rem 21rem;color: #ffffff;background: #5cb85c;border-radius: 10px; 
					cursor: pointer; display: block; text-decoration: none;
					box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; }
.cartItemEditContent .clearButton { width: 12rem; font-size: 2.8rem; text-decoration: none; padding: 15px; }

/******************** 
*** Toggle Switch  ***
*********************/
.cartItemEditContent .switch {position: relative;display: inline-block;width: 60px;height: 3.4rem;top: 1rem;}
.cartItemEditContent .switch input {opacity: 0;width: 0;height: 0;}
.cartItemEditContent .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; 
		background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.cartItemEditContent .slider:before {position: absolute;content: "";height: 2.6rem;width: 2.6rem;left: 0.4rem;bottom: 0.4rem;
		background-color: white;-webkit-transition: .4s;transition: .4s;}

.cartItemEditContent input:checked+.slider {background-color: #2196F3;}
.cartItemEditContent input:focus+.slider {box-shadow: 0 0 1px #2196F3;}
.cartItemEditContent input:checked+.slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}
.cartItemEditContent .slider.round {border-radius: 3.4rem;}
.cartItemEditContent .slider.round:before {border-radius: 50%;}

/******************** 
*** Checkbox Switch  ***
*********************/
.cartItemEditContent .badgeLable {margin-right: 5px;font-size: 2rem;float: left;}
.cartItemEditContent .badge {font-size: 2rem;padding: 0.4rem 2rem 0.5rem 1.6rem;}

/******************* Icon Keypad Style **********************/
.bottomButtonIcon {margin: 0rem; text-align: center; padding-inline-start: 0rem; display: flex !important;}
.bottomButtonIcon .pos-bottom-bar {display: flex;flex-wrap: wrap;justify-content: center;}
.bottomButtonIcon .key-btn-1 { margin: 5px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pos-bottom-bar .iconBg { width: 60px; height: 55px; display: flex; align-items: center; justify-content: center; background-size: contain;
			background-repeat: no-repeat; background-position: center; background-color: #f1f1f1; border-radius: 12px; transition: all 0.25s ease; }

.key-btn-1:hover .iconBg { background-color: #e0e0e0; transform: scale(1.08);}
.key-btn-1.buttonActive .iconBg { background-color: #16f116; }
.key-btn-1.buttonActive:hover .iconBg { background-color: #16f116; transform: scale(1.05); }
.bottomButtonIcon .buttonActive { border: 3px solid #000; border-radius: 14px; }
.bottomButtonIcon .btnDeactive { opacity: 0.5; pointer-events: none; }
.bottomButtonIcon::-webkit-scrollbar { width: 6px; height: 6px; }
.bottomButtonIcon::-webkit-scrollbar-track { background: #c1c1c1; }

/******************** 
*** Date Picker Calendar ****
*********************/
.datepicker.dropdown-menu {width: 36rem;height: 35rem;font-size: 2rem;padding: 0.5rem 2.5rem;}
.datepicker.dropdown-menu thead tr {height: 5rem}
.datepicker.dropdown-menu tbody tr {height: 3.5rem;}
.datepicker.dropdown-menu th,.datepicker.dropdown-menu td {padding: 4px 10px;}
.datepicker .datepicker-months .table-condensed {width: 100%;}
.datepicker .datepicker-months .table-condensed tbody tr td span {width: 30%;}
.datepicker .datepicker-years .table-condensed {width: 100%;}
.datepicker .datepicker-years .table-condensed tbody tr td span {width: 30%;}

/************ * Sale Cart Div Design ***** ****************/
.cartItemEditDiv { display: none; }
.cardDivContent .topButtonInfo {padding: 0rem 1rem;}
.cardDivContent h3 {margin-top: 0rem;font-size: 2.5rem;}
.cardDivContent .cartDelete {float: right;padding: 0px 3rem 0rem 1rem;font-size: 3rem;}
.cardDivContent .backButton {float: right;padding: 0.6rem 1rem;display: none;}
.cardDivContent .productName {font-size: 1.5rem;font-weight: 600;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;}
.cardDivContent .productQuantity {font-size: 1.5rem;}
.cardDivContent .productTotal {font-size: 1.5rem;}
.cardDivContent .productDelete {color: red;margin-bottom: 0rem;}
.cardDivContent .productPrice {font-size: 1.5rem;}
.cardDivContent .productDisc {font-size: 1.5rem;text-align: right;}
.cardDivContent .cartProEdit {background: #fff;}
.cardDivContent .cartDivBreakHr {border-top: 1px solid #ccc5c5;padding-top: 0.5rem;}




/***************** *** Customer Screen ****** *************/
.creditButtonDiv {
	padding: 0rem;
}

.custCalendarContent {
	padding: 0.5rem 1rem;
	display: inline-flex;
}

.custCalendarContent .backButton {
	float: right;
	padding: 0.6rem 1rem;
	display: none;
}

.custCalendarContent .input-group {
	width: 100%;
}

.custCalendarContent input {
	font-size: 2rem;
}

.custInfoContent,
.custSalePayContent,
.custReturnPayContent {
	height: 25%;
}

.custInfoContent .divBreakHr,
.custSalePayContent .divBreakHr,
.custReturnPayContent .divBreakHr {
	border-top: 2px solid #ccc5c5;
	display: block;
	margin-block-end: 0.5em;
}

.custInfoContent .billHeading,
.creditButtonDiv .billHeading,
.custSalePayContent .billHeading,
.custReturnPayContent .billHeading {
	font-size: 1.7rem;
	text-align: left;
}

.custInfoContent .billHeadingAmt,
.creditButtonDiv .billHeadingAmt,
.custSalePayContent .billHeadingAmt,
.custReturnPayContent .billHeadingAmt {
	font-size: 1.7rem;
	text-align: right;
	color: #6d6d6d;
	padding-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.creditButtonDiv .payButton {
	font-size: 3rem;
	padding: 1.4rem 1.2rem;
	line-height: 1.33;
	color: #ffffff;
	background-color: #5cb85c;
	border-color: #4cae4c;
	margin-bottom: 0;
	text-align: center;
	cursor: pointer;
	display: block;
	text-decoration: none;
}

.centerSideDivContent .custBreadcrumbDiv {
	margin-left: 0rem;
	margin-right: 0rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.custBreadcrumbDiv .openCustPayHisory {
	float: right;
	font-size: 2rem;
	padding: 1.25rem 2rem;
	display: none;
}


/******************** Product Screen *******************/
.proListDivContent {margin-top: 1rem;height: 90%;overflow-y: scroll;}
.proListDivContent .borderRadius table {color: #fff;font-size: 2rem;}
.masterProSearchDivContent .searchField {font-size: 2rem;height: 5rem;width: 100% !important;}
.masterProSearchDivContent .searchButton {font-size: 2rem;height: 5rem;padding: 1.2rem;}

/****************** Modal CSS  ********************/
.modal-backdrop,.modal {width: 100%;margin-top: 5rem;}
.modal-dialog {width: 90%}
.modal-dialog .modal-footer {border-top: 0px;}
.modal-dialog .modal-content {width: 98% !important;overflow-x: auto;overflow-y: auto;}
.modal-dialog .modal-header .close {font-size: 4rem;}
.modal-dialog .modal-title {font-size: 3rem;}
.modal-dialog .modalText,.modal-dialog table {font-size: 2rem;}
.modal-dialog .modalTextTopping {font-size: 1.5rem;}
.modal-dialog .divSpanText {font-size: 2.5rem;line-height: 3rem;}
.modal-dialog input,.modal-dialog select,.modal-dialog textarea {height: 5rem;font-size: 2rem;}
.modal-dialog .btn-primary,.modal-dialog .btn-default {font-size: 2.5rem;padding: 1rem 1.3rem;}
.modal-dialog .btn-success,.modal-dialog .btn-warning,.modal-dialog .btn-danger {font-size: 2.5rem;padding: 1rem 1.3rem;}
.modal-dialog .moreButton {padding: 1rem;font-size: 1.8rem;min-width: 25rem;margin: 0 10px;}
.modal-dialog .showHideDiv {margin-bottom: 0.5rem;margin-top: 0.5rem;}
.modal-dialog .showHide {font-size: 3rem;padding: 1.5rem 3rem;}
.modal-dialog .methodRadioLable { margin-right: 5px; }
.modal-dialog .radioLabel { color: #ffffff; margin-right: 5px; font-size: 3rem; padding: 1rem 1rem;}
.modal-dialog .badgeLable {margin-right: 5px; font-size: 2rem;}
.modal-dialog .badge { font-size: 2rem; padding: 0.4rem 2rem 0.5rem 1.6rem; margin-right: 6px;}
.modal-dialog .printButton {font-size: 2.5rem;padding: 1rem 1.3rem;}
.modal-dialog .imgQRCode {height: 294px;}
.modal-dialog .imgScan {height: 294px;padding-left: 60pt;}

.posAboutUsModal,.dbSyncModal,.customerInfoFormModal {width: 40%}
.addPaymentFormModal,.StoreHoldSaleModal,.moreOptionModal {width: 70%}
.InvoiceDetailModal,.LedgerReportListModal,.EstimatedOrderModal,.codOrderListModal,.codOrderPaymentModal,.addProductFormModal,.editProductFormModal {width: 80%}
@media screen and (max-width: 768px) 
{	.modal-dialog {width: 98%}
}

/******************** 
*** Kitchen Sortable  ***
*********************/
.headingStyle {padding: 5px;text-align: center;font-size: 18pt;color: white;background: #17202A;}

/* CART ROUND ONLINE ORDER DEV 06 AUG
/* Cart-box */
.cart-box {
	border: 5px solid #e36e55;
	background: #C5D9F7;
	width: 100px;
	height: 100px;
	padding: 15px 10px;
	text-align: center;
	font-size: 13px;
	color: #000;
	box-shadow: rgba(0, 0, 0, 0.10) 0px 5px 0px;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	border-radius: 100%;
	behavior: url(PIE.htc);
	position: fixed;
	right: 5px;
	bottom: 50px;
	z-index: 99999;
	cursor: pointer;
	display: none;
}

.cart-box span {
	display: block;
}

.cart-box .title {
	padding-bottom: 8px;
	font-size: 15px;
	color: #0381b3;
	font-weight: 700;
}

.cart-box .price {
	padding-top: 8px;
	font-size: 13px;
	color: #333;
	font-weight: 700;
}

/* my changes */

.bottomButtonIcon .fa{
	font-size: 20px;
	margin-right: 6px;
}
.cash-section{
	padding-top: 15px;
	width: 100%;
    background-color: #ffffff;
    height: 100%;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.input-group-addon{
	background-color: #c3dcdb;
	color: #000;
}
.qty-cal{
	border-radius: 8px;
	width: 66%; 
	margin-left: 17%; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	background-color: #fff;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}