@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@700&family=Oxygen:wght@700&display=swap');
*{
	padding: 0;
	margin: 0; 

}
html{
	background: #1b1b1b;
}
.font22{
	font-size: 30px;
}
.row{
	margin: 0;
}
.background_img{
	/*width: 100%;*/
	/*height: 100vh;*/
/*	background-image: url('bg.png');*/
background-color: black;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.p0{
	padding: 0;
}
.pt10{
	padding-top: 10px;
}
.pt15{
	padding-top: 15px;
}
.pt20{
	padding-top: 20px;
}
.pb10{
	padding-bottom: 10px;
}
.pb15{
	padding-bottom: 15px;
}
.pb20{
	padding-bottom: 20px;
}
.m5{
	margin: 1px;
}
.top_tbl{
	width: 100%;
	border-collapse: collapse;
	background-color: #393939;
	font-size: 1.4vw;
	text-align: center;
	color: white;
}
.tbl_logout{
	width: 100%;
	 
	 
}
.bgred{
	background: rgb(244,223,232) !important;
	background: -moz-linear-gradient(0deg, rgba(244,223,232,0.6169818269104517) 0%, rgba(255,43,43,1) 75%) !important;
	background: -webkit-linear-gradient(0deg, rgba(244,223,232,0.6169818269104517) 0%, rgba(255,43,43,1) 75%) !important;
	background: linear-gradient(0deg, rgba(244,223,232,0.6169818269104517) 0%, rgba(255,43,43,1) 75%) !important;
	 
}
.tbl_logout td{
	padding: 5px;
	border-top: 2px solid black !important;
	border-bottom: 2px solid black !important;
	border-left: 0px solid black !important;
	border-right: 0px solid black !important;
}
.top_tbl td{
	padding: 0px;
	border: 2px solid black;
}
.ret_name{
	color: white;
}
.yellow{
	color: #ecf50a;
}
.bal_btn{
	color: white !important; 
	font-weight: bold;
	font-size: 18px; 
	background: rgb(255,19,0);
	background: linear-gradient(90deg, rgba(255,19,0,1) 0%, rgba(255,75,0,1) 51%, rgba(255,102,0,0.9957398832514045) 100%);
}
.counter_btn{
	color: white !important;
	font-weight: bold;
	font-size: 18px;
	background: rgb(17,10,106);
	background: linear-gradient(90deg, rgba(17,10,106,1) 0%, rgba(67,11,128,1) 51%, rgba(114,12,148,1) 100%);
}
.name_btn{
	color: white !important;
	font-weight: bold;
	font-size: 18px;
	background: rgb(50,121,7);
	background: linear-gradient(90deg, rgba(50,121,7,1) 0%, rgba(109,147,11,1) 51%, rgba(142,162,13,1) 100%);
}
.logo{
	color: #eac38e;
	     
    height: 105px;
     
    text-align: center;
    padding: 0;
    background-image: url(l.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
	/*@import url('http://fonts.cdnfonts.com/css/colonna-mt');
	font-family: 'Colonna MT', sans-serif;*/


}
.logodiv{
	background-image:url(logo.png);
	background-repeat: no-repeat;
    background-size: 100% 100%;
}
.draw_date{
	font-weight: 20px;
	color: white;
	font-size: 20px;
	font-weight: bolder;
}
.transparent{
	background: rgb(90,88,81);
	background: linear-gradient(90deg, rgba(90,88,81,0.3243915686446629) 0%, rgba(96,95,90,0.3243915686446629) 51%, rgba(105,103,98,0.3384365124648876) 100%);
	font-weight: bold;
	/*font-size: 22px;*/
	border-color: #8a8685;
	color: white !important;
	padding: 4px 5px 4px 5px;

}
.transparenttime{

	background: rgb(90,88,81);
	background: linear-gradient(90deg, rgba(90,88,81,0.3243915686446629) 0%, rgba(96,95,90,0.3243915686446629) 51%, rgba(105,103,98,0.3384365124648876) 100%);
	font-weight: bold;
	/*font-size: 22px;*/
	border-color: #8a8685;
	color: #f5a806 !important;
	padding: 4px 5px 4px 5px;

}
.logoutbtn{
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	border: none;

}
.logoutbtn img{
	width: 50px;
}
.leftbox{
	height: 64vh;
	border: 2px solid white;
/*	margin-left: 10px;*/
	padding: 5px;
/*	border-radius: 5px;*/
background-color: #121752;

}
.tbl{
	width: 100% !important;
	height: 100% !important;
	border-collapse: collapse;
	background: #a9abc0;
}
.tbl td{ 
	padding: 1px;
	height: 2vh;
	border: 1.5px solid #8587a2;


}
.nobox{
/*	border: 1px solid #7f491c;*/
	border-radius: 5px;
	padding: 3px 0px 3px 0px;
	height: 100%;
	 
}
.sidenum{
	font-size: 17px;
    color: #121111 !important;
	font-weight: bold;
	 
	width: 40%  ;
	height: 100%;
	letter-spacing: -1px;
	 
}
.nobox input{
	width: 60%; 
	height: 100%;
	border: 1px solid gray; 
	border-radius: 5px;
	color: black;
	font-size: 1.2vw;
	font-weight: bolder;
	text-align: center;
	background: linear-gradient( to bottom, #abacbb,#cdd5da, #f0f0f3, #eee);

	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.55);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.55);
 
}
.nobox span{
	 
	line-height: 1px;
}

.common_td{
	padding: 7px !important;
	background: black;
}
.commontyping{
	width: 100%;
	background: #bb762d;
	height: 100%;
	border: none;
	border-radius: 5px;
	color: #ffffff;
	font-size: 1vw;
	text-align: center;
	padding: 1px !important;

}

.rightbox{
/*	border: 1.5px solid white;*/
	margin-right: 10px;
	padding:  0px;
/*	border-radius: 5px;*/
	height: 66vh;
/*	margin-bottom: 22px;*/
	overflow-y: scroll;
	border-bottom: 2px solid black;
}


::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
/*	border-radius: 10px;*/
	background-color:  #121751;
	margin-left: 40px;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;

	 

}

::-webkit-scrollbar-thumb
{
/*	border-radius: 10px;*/
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #0066cc;
}

.right_col{
	background-color: #393939;
	padding-right:0px ;
	border-left: 2px solid black;
	padding-left: 0px;
}
.result_history_name{
	width: 100%;
	color: white;
	font-weight: bold;
	text-align: center;
	background-color: #1a1a1a;
	padding: 2px;
	font-size: 1vw;
}

.timeboxes,.timeboxes{ 
/*	border: 2px solid  #cdc6e7;*/
	background-color: #cdc6e7;
/*	border-radius: 5px;*/
/*	margin: 5px 0 5px 0;*/
	/*display: flex;*/
  

}
.timeboxes h2,.timeboxes1 h2{
	font-family: 'Oxygen', sans-serif;
	letter-spacing: -1.8px;
	color: black;
    font-size: 3vw;
    height: 3vw;
    font-weight: bolder;
    text-align: center;
    padding: 0px 0px 0px 0px;
    justify-content: center;
    align-items: center;
    line-height: 0.9;
    border-bottom: 2px solid grey;
    margin-bottom: 0px;
}
.timeboxes span,.timeboxes1 span{
	font-family: 'Oxygen', sans-serif;
	letter-spacing: -2.8px;
	color: black;
	font-size: 1.5vw;
	font-weight: bolder;
	text-align: center;
	padding: 0px 0px 0px 0px;
	justify-content: center;
	align-items: center;
	line-height: 0.9;
	margin-left: 2px;
	margin-bottom: 0px;
/*	border: 1px solid #2f0c61;*/
}
.timeboxes p,.timeboxes1 p{
	color: black;
	font-size: 1vw;
	font-weight: bolder;
	text-align: center;
	margin: 0;
	padding: 0px;
	background-color: #d6d521;
}

.fixplaybtn{
	border: 1px solid #ca5007;
	background: rgb(249,249,249);
	background: white;
	color: black  !important;
	padding: 2px 0px 5px 5px;
	/*line-height: 24px;*/

}
.fpspan{
	margin-top: 10px;
	font-size: 17px;
}

.result_col {
	 flex: 0 0 20%;
    max-width: 20%;
	padding:4px;
	border: 1px solid #7f7f7f;
}
/*checkbox*/

/* The container */
.containercheck {
	margin: 0 0 0px 8px;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	cursor: pointer;
	color: #bb762d !important;
	font-size: 17px;
	font-weight: 500;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 25px;
	border-radius: 5px;

	border: 1px solid grey;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
	background-color: transparent;

}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
	background-color: transparent;

	border: 1px solid #ca5007;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
	left: 10px;
	top: -7px;
	width: 10px;
	height: 22px;
	z-index:2;
	border: solid #90ff43;
	border-width: 0 5px 5px 0;
	border-radius: 3px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.totalatm{
	border: none;
	background: transparent  !important;
/*	background: linear-gradient(90deg, rgba(249,249,249,0) 0%, rgba(255,255,255,0) 51%, rgba(250,246,246,0) 100%);*/

	padding: 2px 20px 2px 20px;
	color: white !important;
	font-size: 18px;
	font-weight: 600;

}
.ttatm{
	color: white;
	font-size: 16px;
}

.div_foot{
	background: #1b1b1b;
	height: 7vh;
	padding: 1vh;
}

 
.refresh_btn{
	color: black !important;
	font-weight: 800;
	font-size: 16px; 
	border-radius: 20px;
	padding-left: 25px;
	padding-right: 25px;
	background: rgb(34,131,6);
	background: linear-gradient(90deg, rgba(34,131,6,1) 0%, rgba(117,161,3,1) 51%, rgba(210,194,1,1) 100%);
}
.reprint_btn{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding: 20px 12px;
    background: #159670;
	margin: 5px 10px;
}
 
.cancel_btn{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding: 20px 12px;
    background: #c13d4b;
	margin: 0 10px;
}
.result_btn{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background: #fce56d;
	margin: 0 10px;
}
.adv_btn{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
/*	background: rgb(255,0,31);*/
	background: linear-gradient(90deg, #37dc0b 0%, #37dc0b 51%, #45d81f 100%);
	margin: 0 10px;
}
.repeat{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background: #c13d4b;;
	margin: 0 10px;
}
.double_up{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background:  #c146a4;;
	margin: 0 10px;
}
.clear{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background:   #f96449;;
	margin: 0 10px;
}
.clear_all{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background:   #7555b6;;
	margin: 0 10px;
}
.report_btn{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
    background:    #ffa63d;;
	margin: 0 10px;
}
.bal_print{
	color: black !important;
	font-weight: 800;
	font-size: 0.8vw; 
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
    background:    #a2d847;;
	margin: 0 15px 0 100px;
}
.barcode_btn{
	color: black !important;
	font-weight: 800;
	font-size: 16px; 
	border-radius: 20px;
	padding-left: 25px;
	padding-right: 25px;
	background: rgb(73,148,4);
	background: linear-gradient(90deg, rgba(73,148,4,1) 0%, rgba(143,181,3,1) 51%, rgba(205,209,1,1) 100%);
}
.claimmsg{
	font-size: 26px;
}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
   .sidenum{
	font-size: 12px;
	
}
.leftbox{
	height: 80vh;
	margin-left: 0px;
}
.nobox input{
	width: 100%;
}
.nobox span{
	text-align: center;
	width: 100%;
}
.row{
	margin-top: 10px;
}
.commontyping {
	height: 62px;
	width: 62px;
		direction: ltr; unicode-bidi: bidi-override;
}
.logo{
	font-size: 60px;
}
.bal_btn,.counter_btn,.name_btn,.transparent,.transparenttime{
	font-size: 12px;
	margin: 0;

}
.fix_even_odd{
	width: auto;
	padding: 5px;
}
.col-xs-6{
	width: 50%;
}
.timeboxes h2{
 
	font-size: 15px;
	font-weight: bolder;
	text-align: center;
	padding: 5px 0px 5px 0px;
}
.timeboxes p{
	 
	font-size: 12px;
	 
	margin: 0;
	 
}
.claimmsg{
	font-size: 13px;
}




}

@media only screen and (max-width: 1100px) {
 .bal_btn,.counter_btn,.name_btn{
     font-size: 13px;
     padding: 5px;
     margin:2px;
 }
 .logo{
     height: 76px;
 }
 .transparent,.transparenttime {
     font-size:10px;
 }
 .font22{
     font-size:21px;
 }
 .digital-clock{
     font-size: 11px;
     padding:2px;
 }
 .sidenum{
     font-size: 16px;
 }
 .nobox input {
     height:26px;
 }
 .nobox{
     height: auto;
 }
 .commontyping {
     height:35px;
 }
 .fpspan { 
    font-size: 12px;
}
.containercheck {
    font-size: 12px;
}
.totalatm {
    font-size: 16px;
}
.ttatm {
    font-size: 12px;
}

/*.refresh_btn,.reprint_btn,.report_btn,.cancel_btn,.cancel_btn,.adv_btn,.result_btn,.barcodescan {
     
    font-size: 10px;
     
    padding-left: 15px;
    padding-right: 15px;
    margin:0;
 }*/
 .barcodescan {
     max-width: 124px;
     font-size: 13px;
     height:30px;
 }
 .timeboxes h2 { 
    font-size: 28px;
     
 }
 .col-md-3{
     padding-right:2px;
 }
}
 
 
.btn-warning{
	border:none ;
}


/*login------------------------------------------------------------------*/

.bglogin{
	background-image: url('login_bg.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


.dropbtn {
  background-color: transparent;
  color: white;
  padding: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  z-index: 100;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 90px;
  right: 5px !important;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.digital-clock {
	text-shadow: 0 0 6px #ff0;
   
  color: #ffffff;
  /*border: 2px solid #999;*/
  border-radius: 4px;
  text-align: center;
  /*font: 50px/60px 'DIGITAL', Helvetica;*/
 
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
.barcodescan{
	      vertical-align: middle;
    border-radius: 6px;
    /* min-width: 50px; */
    max-width: 157px;
    /* max-width: 635px; */
    /* width: 100%; */
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    color: #009688;
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    padding: 4px 5px 5px 5px;
    border-radius: 39px;
    height: 37px;
    color: #debd88;
    border: 3px solid #ad8324;
    /* background-color: #0a0a0a; */
    background-image: url(inputbg.jpg);
    background-size: 100% 100%;
    margin-left: 5%;
}

.printrow{
	padding: 5px;
	margin-top: 5px;
	height: 8vh;
	background: #151515;
}