body,html{
  font-family:'Bai Jamjuree';
  font-size:14px;
  background-color:#535353;
  padding:0px;
  margin:0px;
  text-align:center;
  align-content:center;
  height:100%;
}
.navbar{
  //background-color: #000000;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  //box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  height:50px;
  font-size:12px;
  text-transform:uppercase;
  color:white;
  line-height:50px;
  z-index:1;
  transition: height 0.5s linear 0s;
  animation: shrink linear both;
  animation-timeline: scroll();
  animation-range: 0 150px;
}
#footer{
	top: auto;
	bottom:0;
	line-height:25px;
	height:25px;
}
@keyframes shrink {
  to {
    height: 50px;
    background: black;
  }
}
.navbar:after{
  content: "";
  display: table;
  clear: both;
}

.navbar img{
	height:50px;
	width:auto;
}

#user_icon{
  font-size:30px;
  line-height:50px;
  text-align:center;
  margin:10px auto;
  width:545px;
	height:auto;
	cursor:pointer;
	border-radius:5px;
	border:1px solid grey;
	box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
	background-color:black;
}

.g_id_signin{
	display:none;
}
#custom-google-btn,.qr{
	width:545px;
	height:auto;
	cursor:pointer;
	margin:0px auto;
}

#custom-google-btn{
	display:none;
}
#custom-google-btn:hover{
	background-color:#535353;
}
.active{
	display:block;
}
#profile_picture{
	position:relative;
}
.profile_picture{
	opacity:0.8;
	cursor:pointer;
	height:50px;
	width:50px;
	border-radius:25px;
	position:absolute;
	right:50px;
	top:50%;
	margin-top:-25px;
}
.profile_picture:hover{
	opacity:1;
}
@media screen and (max-width: 800px) {
	#user_icon{
	  font-size:30px;
	  width:90%;
	}
	.profile_picture{
		right:5px;
	}
	#custom-google-btn,.qr{width:90%;}
}

@media screen and (max-width: 600px) {
	#user_icon{
	  font-size:20px;
	}
}
@media screen and (max-width: 340px) {
	#user_icon{
	  font-size:20px;
	}
	#custom-google-btn,.qr{
		width:90%;
	}
}
/*#content{
	position:fixed;
	top:50px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow:auto;
	width:100%;
	padding:0px;
	border-radius:0px;
	box-shadow:0;
	margin:0px;
	
	padding-top:50px;
}*/
#content{
	width:900px;
	margin:5px auto;
	box-shadow: 0px 1px 10px #000000;
	padding:0px 20px;
	border-radius:6px;
	background-color:black;
	border-radius:5px;
	color:white;
}
#contact_wa{
	background-image: url('https://static.whatsapp.net/rsrc.php/yZ/r/JvsnINJ2CZv.svg');
	background-position:center center;
	background-size:auto 70%;
}


input,button,select,option{
	font-family:'Bai Jamjuree';
}
input{
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  color:black;
  background-repeat: no-repeat;
  cursor:pointer;
  padding: 12px;
  font-weight:bold;
}

input:hover{
  background-color: black;
  color:white;
}
#EMAIL{
	width:300px;
}

.modal {
  font-family:'Bai Jamjuree';
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  right: 0px;
  top: 0px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  align-content:center;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #FFFFFF;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #888;
  width:768px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding:2px 16px;
}

.close:hover,
.close:focus{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px;
  background-color: #000000;
  color: white;
  font-size:20px;
  line-height:40px;
  text-transform:uppercase;
  font-weight:bold;
  height:40px;
  z-index:1;
  position:relative;
}
.modal-header:after {
  content: "";
  display: table;
  clear: both;
}

.modal-body {
	position:relative;
	padding:10px 0px;
	margin:5px auto;
	overflow:auto;
}
.modal-body:after,.modal-footer:after {
	content: "";
	display: table;
	clear: both;	
}

.modal-footer {
  background-color:black;
  color: white;
  line-height:40px;
  position:relative;
  z-index:1;
  cursor:pointer;
  font-size:20px;
  font-weight:bold;
}
.modal-footer a{
	text-decoration: none;
	color:white;
	display:block;
}
.modal-footer:hover, .modal-footer a:hover{
	background-color:grey;
	color:black;
}
.active{
	display:block;
}
#item_picure{
	width:545px;
	height:885px;
	background:none;
	box-shadow:none;
	background-image: url('Coupons/coupon-bg.png');
	background-position:center 0px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	margin:0px auto;
	border:0;
	//border:1px solid black;
	position:relative;
	align-content:stretch;
	overflow:hidden;
	border-radius:5px;
	cursor:pointer;
}
.item_picure{
	width:240px;
	height:300px;
	background:none;
	box-shadow:none;
	background-image: url('Coupons/coupon-bg.png');
	background-position:center 0px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	margin:0px auto;
	border:0;
	//border:1px solid black;
	position:relative;
	align-content:stretch;
	overflow:hidden;
	border-radius:5px;
	cursor:pointer;
}
#coupon_view{
	width:320px;
	height:520px;
	background:none;
	box-shadow:none;
	background-image: url('Coupons/coupon-bg.png');
	background-position:center 0px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	margin:0px auto;
	border:0;
	position:relative;
	align-content:stretch;
	overflow:hidden;
	border-radius:5px;
}
.item_picure:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}
#item_bg{
	width:100%;
	height:auto;
	max-height:885px;
	display:none;
}
#item_bg1{
	width:100%;
	height:auto;
	opacity:0;
}
.item_qr{
	position:absolute;
	width:25%;
	top:81%;
	left:7%;
	background-color:white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height: 0;
	padding-bottom: 25%;
	background-color:white;
	background-position:center center;
	background-size: 90% auto;
	background-repeat: no-repeat;
	//border:1px solid black;
}
#item_user{
	display:none;
}
#otp{
	display:none;
}
.box_conpon{
	color:black;
	text-align:right;
	width:70%;
	overflow:hidden;
	position:absolute;
	font-size:16px;	
	border:1px solid black;
}
.box_conpon label{
	font-weight:bold;
	background:none;
	color:black;
	font-size:16px;
	text-align:right;
	//display:none;
}
.box_conpon div{
	text-transform:uppercase;
	line-height:14px;
	font-size:14px;
	font-weight:normal;
}
.valid{
	position:absolute;
	right:7%;
	top:86%;
}
.customer{
	position:absolute;
	right:7%;
	top:85%;
}
.issued{
	position:absolute;
	right:7%;
	top:92%;
}
.codeText{
	position:absolute;
	right:7%;
	top:80%;
}
.item_code{
	font-size:26px;
	display:block;
}
.item_code.active{
	font-size:40px;
}
#myContent{
	width:768px;
}
#coupon-svg{
	width:545px;
	height:885px;
}
#coupon{
	margin:0px auto;
}


div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  
}

div.scrollmenu a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius:25px;
  
  width:240px;
  height:300px;
  overflow:hidden;
  background-position:center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin:0px 5px;
	opacity:0.6;
}

div.scrollmenu a:hover {
  background-color: #777;
  opacity:1;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
div.scrollmenu a img{height:auto;width: calc(100% - 20px);opacity:0;}
#table-list{
	display:block;
	margin:0px auto;
	color:white;
	padding:5px;
}
#table-list table{
	width: 100%;
	border-spacing: 0px;
}

#table-list table th,
#table-list table td{
	padding: 10px 0px;
	border-bottom: 1px solid #cacaca;
	//border: 1px solid #cacaca;
	text-align: center;
}

#table-list table thead{
	//box-shadow: 0px 1px 10px #000000;
	position:sticky;
	z-index:1;
	top:50;
}
#table-list tr:nth-child(even) {background-color: #020202;}
/*#table-list tr:hover:not(thead){background-color: #020202;cursor:pointer;}*/

.preview{
	width:240px;
	height:300px;
	overflow:hidden;
	background-position:center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin:0px auto;
}
@media screen and (max-width: 545px) {
	#content{
		width:auto;
		display:block;
		margin:5px;
		padding:5px;
	}
	#table-list{
		width:96%;
	}
	#item_picure{
		width:90%;
		background-size:100% auto;
		height:auto;
	}
	.item_code{font-size:18px;}
	.item_code.active{font-size:36px;}
	#coupon-svg,#coupon{width:100%;height:auto}
	div.scrollmenu a {opacity:1;background-size: auto 100% ;margin:0px;}
	div.scrollmenu a img{width:100%;height:auto;}
	#valid,#issued{font-size:12px;}
	.preview{
		width:180px;
		height:240px;
	}
	#logo{
		position:auto;
	}
	.modal-content{
		width:90%;
	}
}