body{ background-image: linear-gradient(rgb(76, 192, 238), yellow); }

.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; }
.paddiv{ padding: 1rem }
.textRight { text-align: right;}
.textCenter { text-align: center;}

/* Main-category Display Style*/
.borderRadius-1 {border-style: solid; border-radius: 1rem;}
.main-cate { position: relative;vertical-align: top;display: inline-block; padding:1rem; }
.main-cate h2 { font-size: 2rem; text-align: center; }

/* Sub-category Display Style*/
.sub-cate { position: relative;vertical-align: top;display: inline-block; padding:1rem; }
.sub-cate h2 { font-size: 2rem; text-align: center; }

/* Product Display Style*/
.productItem { position: relative; display: inline-block; margin: 3rem; } 
.productItem .price-tag 
{
	position: absolute; top:0.2rem;right:0.2rem; vertical-align: top;color: white; line-height: 1.8rem;
    font-size: 1.45rem; background: #dfb93c; padding: 0.1rem 0.5rem; 
}
.productItem .product-name {position: absolute;line-height: 1.25rem; font-weight: bold; font-size: 1.125rem;}

.rightSideContainer { background:#fff; padding: 0; }
/* Cart Style*/
.cardDivContent {  height: 75%; overflow-y: auto; overflow-x: hidden; padding: 1rem;}
.divBreakHr 	{ border-top: 1px solid #eeeeee; display: block; margin-block-end: 0.5em; }
.payTotalTitle  { font-size:1.8rem; text-align: right; }
.payTitle { font-size:1.85rem; color: #6d6d6d; text-align: center;}

/* Keypad Style*/
.numaricKeyPadGrid { width: 100%; }
.numaricKeyPadGrid ul { margin:0 0 -5px 0 !important; text-align:center; padding-inline-start: 0rem; }
.numaricKeyPadGrid ul li { display: inline-block;  margin: 0 1px 12px 3px; }
.numaricKeyPadGrid ul li a {  background: #efefef none repeat scroll 0 0; border: 3px solid #e4e4e4; border-radius: 10px; 
					color: #0381b3; display: block; font-size: 2rem;  font-weight: bold; }
.numaricKeyPadGrid ul li a:hover { background: #0381b3; color: #fff; text-decoration: none; }
.numaricKeyPadGrid .key-btn-1 { width: 7rem; height: 6rem; padding: 1.6rem; }
.numaricKeyPadGrid .key-btn-1:active { box-shadow: 0 0 rgb(96, 96, 96) !important; top: 2px; }
.numaricKeyPadGrid .key-btn-2 { width: 14.5rem; height: 6rem; padding: 1.5rem; background-color:#e36e55; color:white; }
.numaricKeyPadGrid .key-btn-3 { width: 14.5rem; height: 6rem; padding: 1.5rem; background-color:#0381b3; color:white; }

.items {border-style: solid;border-radius: 1rem;}

@media screen and (max-width: 1700px) 
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 6rem; height: 6rem; padding: 1.5rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 13rem; height: 6rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 12.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;}  
}

@media screen and (max-width: 1600px) 
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 5.5rem; height: 5.5rem; padding: 1rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 12rem; height: 5.5rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 11.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;}  
}
@media screen and (max-width: 1500px) 
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 5rem; height: 5.5rem; padding: 1rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 11rem; height: 5.5rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 10.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;}  
}
@media screen and (max-width: 1400px) 
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 4.5rem; height: 4.5rem; padding: 0.9rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 11rem; height: 5.5rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 9.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;} 
}
@media (min-width: 1281px) and (max-width: 10px) 
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 4.5rem; height: 4.5rem; padding: 0.9rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 11rem;   height: 5.5rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 9.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;} 
}

@media (min-width: 1025px) and (max-width: 1280px) 
{

	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 4.2rem; height: 4.5rem; padding: 0.9rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 10rem; height: 5.5rem; padding: 1.5rem; font-size: 1.5rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 9rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.5rem;} 
}
/* ##Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1024px)
{
	.payTotalTitle  { font-size:2rem;  text-align: right; }
	.payTitle       { font-size:2rem; text-align: center; color: #6d6d6d; }
	
	.numaricKeyPadGrid ul li { margin: 0 1px 12px 0px; }
	.numaricKeyPadGrid .key-btn-1 { width: 4.5rem; height: 4.5rem; padding: 0.9rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 11rem; height: 5.5rem; padding: 1.5rem; font-size: 1.8rem; }
	.numaricKeyPadGrid .key-btn-3 { width: 9.5rem;  height: 5.5rem; padding: 1.5rem; font-size: 1.8rem;} 
}
@media screen and (max-width: 768px)  
{
	#key {float: leftwidth: 100%;display: none;}
	#opencart {visibility: hidden;display: block;  width: 100%;}
	#backb {visibility: hidden;display: block;width: 100%;}
	
	.cardDivContent {  height: 50%; overflow-y: auto; overflow-x: hidden; padding: 1rem;}
	.divBreakHr 	{ border-top: 1px solid #eeeeee; display: block; margin-block-end: 0.5em; }
	.payTotalTitle  { font-size:1.8rem; text-align: right; }
	.payTitle { font-size:1.85rem; color: #6d6d6d; text-align: center;}
	.numaricKeyPadGrid .key-btn-1 { width: 5rem; height: 5rem; padding: 1rem; }
	.numaricKeyPadGrid .key-btn-2 { width: 13rem; height: 6rem; padding: 1.5rem; background-color:#e36e55; color:white; }
	.numaricKeyPadGrid .key-btn-3 { width: 10rem; height: 6rem; padding: 1.5rem; background-color:#0381b3; color:white; }
		 
}