@media screen and (min-width: 1900px) {
	.subMenu { display:""; }
	.sysTitleSize { width:20%; }
	.sysTitle { 
		font-size:24px !important; 
		padding: 10px 0px 10px 10px;
		font-weight:bold !important; 
	} 
	.sysLogBtn{
		font-size:24px !important; 
		font-weight:bold !important; 
	}
	.topTableStyle {
		font-weight: bold;
		text-align: center;
		margin: 10px 10px;
		width: 100%;
		background-color: #0174DF;
		color: white;
		font-size: 20px;
	}

	.topTheadStyle{
		text-align: center;
		font-size:18px;
	}

	.topTdStyle1 {
		left: 0%;
		width: 25%;
	}

	.topTdStyle2 {
		left: 25%;
		width: 25%;
	}

	.topTdStyle3 {
		left: 50%;
		width: 25%;
	}
	.spanStyleRed {
		color: red;
		font-weight: bold;
	}

	.middleTableStyle {
		width: 100%;
		margin: 10px 10px;
	}
	
	.middleTdStyle1 {
		left: 0%;
		width: 33%;
		text-align: center;		
	}
	.middleTdStyle2 {
		left: 33%;
		width: 33%;
	}
	.middleTdStyle3 {
		left: 66%;
		width: 33%;
		text-align: center;
	}
	.middleTdStyle4 {
		background-color: #0174DF;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		height: 50px;
	}
	.bottomTableStyle {
		margin: 10px 10px;
		width: 100%;
	}
	.bottomTdStyle1 {
		left: 33%;
		width: 33%;
		text-align: center;
	}
	.bottomTdStyle2 {
		left: 33%;
		width: 33%;
		text-align: center;
	}
	.bottomTdStyle3 {
		left: 66%;
		width: 33%;
		text-align: center;
	}
	.numberStyle {
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.0;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		appearance: none;
		border-radius: 0.25rem;
	}
	#imgPrint{
		width: 604px; 
		height: 340px;
	}

	#tableDisplayDiv{
		display: flex;
		justify-content: center; 
		align-items: center; 
		text-align:center;
	}

	#productDisplayTable{
		border-collapse: collapse;

	}

	#productDisplayTable > tbody > tr > td {
		border: 1px solid black;
		padding: 5px; 
		font-weight: 400;
		font-size:1.5rem;
	}
}


@media screen and (max-width: 1400px) {
	/* .subMenu { display:none; } */
	.sysTitleSize { width:60%; }
	.login { width:90%; height:400px; }
	.sysTitle { 
		font-size:20px !important; 
		font-weight:bold !important; 
		padding: 10px 0px 10px 10px; 
	} 
	.sysLogBtn{
		font-size:20px !important; 
		font-weight:bold !important; 
	}
	.simsaMenuTable { 	
		margin-top:10px;
		vertical-align: middle;
    }

	.simsaMenuTable td {
		display: inline-block;
		width: 50%;
		padding: 10px;
	}
	
    .simsaMenuTable div { 	
		display: inline-block;     
		color:#F9F7F0 ;
		background-color: #0f4c81;
		border: 1px solid #0f4c81;
		border-radius: 5px;
		text-align: center;     
		font-weight:bold;
		padding-top:40px;
		width: 360px;
	    height: 250px;    
	    font-size: 55px;
    }
	.topTableStyle {
		font-weight: bold;
		text-align: center;
		margin: 0px 0px 0px 0px;
		width: 100%;
		background-color: #0174DF;
		color: white;
		font-size: 15px !important;;
	}

	.topTableMobileStyle {
		font-weight: bold;
		text-align: center;
		position:relative;
		margin: 10px 0px 0px 0px;
		left: 73%;
		width: 27%;
		background-color: #6435C9;
		color: white;

	}
	.topTableMobileStyle .button{
		font-size:15px !important;
		height:60px;
	}

	.topTdStyle1 {
		left: 0%;
		width: 25%;
	}

	.topTdStyle2 {
		left: 30%;
		width: 50%;
	}

	.topTdStyle3 {
		left: 50%;
		width: 25%;
	}
	.spanStyleRed {
		color: red;
		font-weight: bold;
	}
	.topTheadStyle{
		text-align: center;
		vertical-align: middle;
		font-size:16px;
	}

	.middleTableStyle {
		margin: 0px 0px 0px 0px;
	}
	
	.middleTdStyle1 {
		left: 0%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle1 > button{
		font-size:15px !important;
		height:223px;
	}
	.middleTdStyle2 {
		text-align:center;
	}
	.middleTdStyle3 {
		left: 95%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle3 > button{
		font-size:15px !important;
		height:223px;
	}

	.middleTdStyle4 {
		background-color: #0174DF;
		color: white;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		height: 50px;
	}
	.bottomTableStyle {
		margin: 10px 10px;
		width: 100%;
	}
	
	.bottomTdStyle1 {
		display:block;
		left: 0%;
		width: 100%;
		text-align: center;
	}

	.bottomTdStyle1 .button{
		font-size:15px !important;
		width:100%;
		height:50px;
	}

	.bottomTdStyle2 {
		left: 25%;
		width: 50%;
		text-align: center;
	}

	.bottomTdStyle2 > input {
		width: 100%;
		font-size: 30px;
		text-align: center;
	}
	.bottomTdStyle3 {
		left: 75%;
		width: 25%;
		text-align: center;
	}
	.numberStyle {
		padding: 0.2rem 0.2rem;
		font-size: 1rem;
		font-weight: 800;
		line-height: 1.0;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		appearance: none;
		text-align: center;
		border-radius: 0.25rem;
	}
	
	.bottomTdStyle3 .button{
		font-size:15px !important;
		width:100%;
		height:50px;
	}

	#imgPrint{	
		width: 100%; 
		height: auto;
	}
  
	#tableDisplayDiv{
		display: flex;
		justify-content: center; 
		align-items: center; 
		text-align:center;
	}

	#productDisplayTable{
		 border-collapse: collapse;

	}

	#productDisplayTable > tbody > tr > td {
		border: 1px solid black;
		padding: 5px; 
		font-weight: 400;
		font-size:1rem;
	}

    .keyPadStyle{
		position: relative;
		margin-top:10px;
		left: 40.8%;
		width: 20%;
		text-align: center;
	}

	.keyPadButton {
		font-size:2rem !important;
	}

	.keyPadStyle > tbody > tr > td {
		padding : 2px !important;
	}
}

@media screen and (max-width: 800px) {
	.subMenu { display:none; }
	.sysTitleSize { width:60%; }
	.login { width:90%; height:400px; }
	.sysTitle { 
		font-size:20px !important; 
		font-weight:bold !important; 
		padding: 10px 0px 10px 10px; 
	} 
	.sysLogBtn{
		font-size:20px !important; 
		font-weight:bold !important; 
	}
	.simsaMenuTable { 	
		margin-top:10px;
		vertical-align: middle;
    }

	.simsaMenuTable td {
		display: inline-block;
		width: 50%;
		padding: 10px;
	}
	
    .simsaMenuTable div { 	
		display: inline-block;     
		color:#F9F7F0 ;
		background-color: #0f4c81;
		border: 1px solid #0f4c81;
		border-radius: 5px;
		text-align: center;     
		font-weight:bold;
		padding-top:40px;
		width: 360px;
	    height: 250px;    
	    font-size: 55px;
    }
	.topTableStyle {
		font-weight: bold;
		text-align: center;
		margin: 10px 0px 0px 0px;
		width: 100%;
		background-color: #0174DF;
		color: white;
		font-size: 20px !important;;
	}

	.topTableMobileStyle {
		font-weight: bold;
		text-align: center;
		position:relative;		
		left: 73%;
		width: 27%;
		background-color: #6435C9;
		color: white;

	}
	.topTableMobileStyle .button{
		font-size:20px !important;
		height:80px;
	}

	.topTdStyle1 {
		left: 0%;
		width: 25%;
	}

	.topTdStyle2 {
		left: 30%;
		width: 50%;
		font-size:25px;
	}

	.topTdStyle3 {
		left: 50%;
		width: 25%;
	}
	.spanStyleRed {
		color: red;
		font-weight: bold;
	}
	.topTheadStyle{
		text-align: center;
		vertical-align: middle;
		font-size:15px;
	}

	.middleTableStyle {		
	}
	
	.middleTdStyle1 {
		left: 0%;
		text-align: center;
	}
	.middleTdStyle1 > button{
		font-size:20px !important;
		height:30vh;
	}
	.middleTdStyle2 {
		width: 100%;
		text-align: center;
	}
	.middleTdStyle3 {
		left: 80%;
		text-align: center;
	}
	.middleTdStyle3 > button{
		font-size:20px !important;
		height:30vh;
	}

	.middleTdStyle4 {
		background-color: #0174DF;
		color: white;
		font-size: 25px;
		font-weight: bold;
		text-align: center;
		height: 50px;
	}
	.bottomTableStyle {
		margin: 10px 10px;
		width: 100%;
	}
	
	.bottomTdStyle1 {
		display:block;
		left: 0%;
		width: 100%;
		text-align: center;
	}

	.bottomTdStyle1 .button{
		font-size:20px !important;
		width:100%;
		height:70px;
	}

	.bottomTdStyle2 {
		left: 25%;
		width: 50%;
		text-align: center;
	}

	.bottomTdStyle2 > input {
		width: 100%;
		font-size: 30px;
		text-align: center;
	}
	.bottomTdStyle3 {
		left: 80%;
		width: 25%;
		text-align: center;
	}
	.numberStyle {
		padding: 1.15rem 1.25rem;
		font-size: 1.2rem;
		font-weight: 800;
		line-height: 1.0;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		appearance: none;
		text-align: center;
		border-radius: 0.25rem;
	}
	
	.bottomTdStyle3 .button{
		font-size:20px !important;
		width:100%;
		height:70px;
	}

	#imgPrint{
		width: 100%; 
		height: auto;
	}
  
    .keyPadStyle{
		position: relative;
		margin-top:10px;
		left: 24.5%;
		width: 40%;
		text-align: center;
	}

	.keyPadButton {
		font-size:2.5rem !important;
	}

	.keyPadStyle > tbody > tr > td {
		padding : 5px !important;
	}
}


@media screen and (max-width: 500px) {
	.subMenu { display:none; }
	.sysTitleSize { width:60%; }
	.sysTitle { 
		font-size:12px !important; 
		font-weight:bold !important; 
		padding: 10px 0px 10px 10px 
	} 
	.sysLogBtn{
		font-size:12px !important; 
		font-weight:bold !important; 
	}
	.login { width:90%; height:400px; }
    .simsaMenuTable div { 	 
      width: 150px;
      height: 300px;	      
	  padding-top:80px;	
	  font-size:40px;
    }
	.topTableStyle {
		font-weight: bold;
		text-align: center;
		margin: 10px 0px 0px 0px;
		width: 100%;
		background-color: #0174DF;
		color: white;
		font-size: 12px !important;;
	}

	.topTableMobileStyle {
		font-weight: bold;
		text-align: center;
		position:relative;
		margin: 10px 0px 0px 0px;
		left: 73%;
		width: 27%;
		background-color: #6435C9;
		color: white;

	}
	.topTableMobileStyle .button{
		font-size:12px !important;
		height:45px;
	}

	.topTdStyle1 {
		left: 0%;
		width: 25%;
	}

	.topTdStyle2 {
		left: 30%;
		width: 50%;
	}

	.topTdStyle3 {
		left: 50%;
		width: 25%;
	}
	.spanStyleRed {
		color: red;
		font-weight: bold;
	}
	.topTheadStyle{
		text-align: center;
		font-size:15px;
	}

	.middleTableStyle {
		margin: 10px 0px 0px 0px;
	}
	
	.middleTdStyle1 {
		left: 0%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle1 > button{
		font-size:10px;
		height:200px;
	}
	.middleTdStyle2 {
		left: 5%;
		width: 100%;
	}
	.middleTdStyle3 {
		left: 95%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle3 > button{
		font-size:10px;
		height:200px;
	}

	.middleTdStyle4 {
		background-color: #0174DF;
		color: white;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		height: 50px;
	}
	.bottomTableStyle {
		margin: 10px 10px;
		width: 100%;
	}
	.bottomTdStyle1 {
		display:block;
		left: 0%;
		width: 100%;
		text-align: center;
	}

	.bottomTdStyle2 {
		left: 25%;
		width: 50%;
		text-align: center;
	}
	.bottomTdStyle3 {
		left: 75%;
		width: 25%;
		text-align: center;
	}
	.numberStyle {
		padding: 1.15rem 1.25rem;
		font-size: 1.2rem;
		font-weight: 800;
		line-height: 1.0;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		appearance: none;
		text-align: center;
		border-radius: 0.25rem;
	}
	
	.bottomTdStyle3 .button{
		font-size:15px !important;
		width:100%;
		height:50px;
	}

	#imgPrint{
		width: 100%; 
		height: auto;
	}
  
    .keyPadStyle{
		position: relative;
		left: 13%;
		width: 40%;
		text-align: center;
	}

	.keyPadButton {
		font-size:1.5rem !important;
	}

	.keyPadStyle > tbody > tr > td {
		padding : 5px !important;
	}
}


@media screen and (max-width: 320px) {
	.subMenu { display:none; }
	.sysTitleSize { width:60%; }
	.sysTitle { 
		font-size:10px !important; 
		padding: 10px 0px 10px 10px 
	} 
	.sysLogBtn{
		font-size:10px !important; 
	}
	.login { 
		width:90%; 
		height:400px; 
	}
	.simsaMenuTable div { 	 
      width: 120px;
      height: 300px;	      
	  padding-top:80px;	
  	  font-size:35px;
    }
	.topTableStyle {
		font-weight: bold;
		text-align: center;
		margin: 10px 10px;
		width: 100%;
		background-color: #0174DF;
		color: white;
		font-size: 10px;
	}

	.topTdStyle1 {
		left: 0%;
		width: 25%;
	}

	.topTdStyle2 {
		left: 25%;
		width: 50%;
	}

	.topTdStyle3 {
		left: 50%;
		width: 25%;
	}
	.spanStyleRed {
		color: red;
		font-weight: bold;
	}
	.topTheadStyle{
		font-size:12px;
	}
	.middleTableStyle {
		margin: 10px 0px 0px 0px;
	}
	
	.middleTdStyle1 {
		left: 0%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle1 > button{
		font-size:10px;
		height:200px;
	}
	.middleTdStyle2 {
		left: 5%;
		width: 100%;
	}
	.middleTdStyle3 {
		left: 95%;
		width: 5%;
		text-align: center;
	}
	.middleTdStyle3 > button{
		font-size:10px;
		height:200px;
	}

	.middleTdStyle4 {
		background-color: #0174DF;
		color: white;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		height: 50px;
	}

	.keyPadStyle {
		position: relative;
		left: 12%;
		width: 50%;
		text-align: center;
	}

	.keyPadButton {
		font-size:1.5rem !important;
	}

	.keyPadStyle > tbody > tr > td {
		padding : 5px !important;
	}
}

.numberStyle:disabled {
	background-color: #e9ecef;
    opacity: 1;
}

.simsaMenuTable { 	
	margin-top:10px;
	vertical-align: middle;
}

.simsaMenuTable td {
	display: inline-block;
	width: 50%;
	padding: 10px;
}

.simsaMenuTable div { 	
	display: inline-block;     
	color:#F9F7F0 ;
	background-color: #0f4c81;
	border: 1px solid #0f4c81;
	border-radius: 5px;
	text-align: center;     
	font-weight:bold;
	padding-top:40px;
	width: 360px;
	height: 250px;    
	font-size: 55px;
}