/* The Modal (background) */
.modal {
  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.4); /* Black w/ opacity */
  align-content:center;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  //border: 1px solid #888;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* 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;
}
.modal-header:after {
  content: "";
  display: table;
  clear: both;
}

.modal-body {padding: 0px;min-height:40px;}
.modal-body:after {
	content: "";
	display: table;
	clear: both;	
}

.modal-footer {
  //background-color: #04AA6D;
  background-color:black;
  color: white;
  float: none;  
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #FFFFFF;
  text-transform:uppercase;
  line-height:40px;
  font-size:30px;
  font-weight:bold;
  padding: 2px;
  background-color: #000000;
  color: white;
  font-size:20px;
  line-height:40px;
  text-transform:uppercase;
  font-weight:bold;
  cursor:pointer;
}

.modal-footer a{
  float: none;  
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size:16px;
  color: #FFFFFF;
  text-transform:uppercase;
}
.modal-footer a:hover,.modal-footer:hover{
  opacity:1;
}
#myCalendar {
	font-family:'myFont';
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 7; /* 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 */
  align-content:center;
	background-color: rgba(0,0,0,0.8);
}

/* Modal Content */
#calendar-content{
  position: relative;
  background-color: #fefefe;
  margin: 0px auto;
  //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);
  max-height:96%;
	padding:0px;
	height:400px;
}
#calendarBox{
	margin:0px auto;
	font-family:'myFont';
	padding: 0px;
}
#calendarBox .ui-datepicker {
	width: 99%;
	font-family:'myFont';
	padding: 0px;
	margin:0px auto;
}
#calendarBox .ui-datepicker td a {
	display:block;
	height: 50px;
	font-family:'myFont';
	text-align: center;
	align-content:center;
	color:black;
	font-size:20px;
}


#calendarBody a{
	display:block;
	padding:0px;
}
#overlayBody{
	padding:20px;
	font-size:20px;
}
#overlayBody img{
	width:30%;
}
@media screen and (max-width: 600px) {
	#calendar-content{
	  width:96%;
	}
	#overlayBody img{
		width:80%;
	}
}
.table-status{
  text-decoration:none;
  font-weight:bold;
  text-align:center;
  cursor: pointer;
  line-height:30px;
  color:white;
  padding:5px 0px;
}
.table-status-full{
  text-decoration:none;
  font-weight:bold;
  text-align:center;
  cursor: pointer;
  line-height:40px;
  float:left;
  width:20%;
  padding:5px 0px;
}
.AVAILABLE, .BOOKED, .FULLPAY, .ARRIVED, .LADIES, .COMP, .CLOSED, .ALLTABLES,.ONHOLD{
  font-weight:bold;
  cursor:pointer;
  font-size:16px;
}
.AVAILABLE{
  background-color:#5cb85c;
  color:white;
}
.BOOKED{
  background-color:#f0ad4e;
  color:white;
}
.FULLPAY{
  background-color:#80137f;
}
.ARRIVED{
  background-color:#337ab7;
  color:white;
}
.LADIES{
  background-color:#404040;
  color:white;
}
.COMP{
  background-color:#3333cc;
}
.ALLTABLES{
  background-color:red;
  color:white;
}
.CLOSED{
  background-color:#000000;
  text-decoration:line-through;
  color:white;
  fill:#000000;
}
.ONHOLD{
  background-color:#b7b7b7;
  color:white;
  fill:#b7b7b7;
}
.AVAILABLE:hover, .BOOKED:hover, .FULLPAY:hover, .ARRIVED:hover, .LADIES:hover, .COMP:hover, .CLOSED:hover, .ALLTABLES:hover, .ONHOLD:hover{
  //box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  color:black;
}
.AVAILABLE:hover{
  background-color:#ade9ad;
  color:black;
}
.AVAILABLE.active{
  background-color:red;
  color:white;
}

.BOOKED:hover, .BOOKED .active{
  background-color:#ebc58e;
}
.FULLPAY:hover,.FULLPAY .active{
  background-color:#ce69cd;
}
.ARRIVED:hover,.ARRIVED .active{
  background-color:#8fc1ec;
}
.LADIES:hover,.LADIES .active{
  background-color:#939292;
}
.COMP:hover,.COMP .active{
  background-color:#6666cc;
}
.ALLTABLES:hover{
  background-color:#f97777;
}
.CLOSED:hover,.CLOSED .active{
  background-color:#000000;
}
.ONHOLD:hover,.ONHOLD .active{
  background-color:#999999;
}
.master{
	background-image: url('images/icons/icon-master.png');
	background-position:center 1px;
	background-size:auto 30px;
	background-repeat:no-repeat;
}
#status,#table-menus,#status-menus{
  margin:0px auto;
  list-style-type: none;
  padding: 0px;
  display:block;
  margin:0px auto;
}
#status:after,#table-menus:after{
  content: "";
  display: table;
  clear: both;
}
#table-menus{
	margin-top:20px;
}
#status li,#table-menus li{
	width:20%;
	height:60px;
	line-height:60px;
	padding:0px;
	margin:0px;
	cursor:pointer;
	text-align:center;
	background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
	float:left;
	font-weight:bold;
	border-radius:5px;
	text-decoration:none;
	color:white;
	
}
#TABLENO{
	float:left;
	width:19%;
	text-align:center;
	font-size:70px;
	height:90px;
	overflow:hidden;
	font-weight:bold;
	border-radius:5px;
	line-height:60px;
	border:0px;
	padding-top:30px;
	box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
#TABLENO div{font-size:20px;margin-top:10px;line-height:0px;}
#status-menus{
	float:right;
	width:80%;
}
#status li{
	width:25%;
}
#table-menus li{
	background-color:#000000;
	background-position: 5px center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
	text-align:left;
}
#table-menus li span{
	margin-left:60px;
}
#status li:hover,#table-menus li:hover{
	opacity:1;
	box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
	background-color:red;
}
#table-menus li.active{
	background-color:red;
}
#status #AVAILABLE{
  background-color:#5cb85c;
  background-image: url('images/icons/icon-AVAILABLE.png');
}
#table-menus #customerInfo{
  background-image: url('images/icons/icon-customer.png');
}
#table-menus #bookingInfo{
  background-image: url('images/icons/icon-book.png');
}
#table-menus #bookingPayment{
  
  background-image: url('images/icons/icon-deposit.png');
}
#table-menus #bookingHistory{
 
  background-image: url('images/icons/icon-history.png');
}
#status #BOOKED{
  background-color:#f0ad4e;
  background-image: url('images/icons/icon-BOOKED.png');
}
#status #FULLPAY{
  background-color:#80137f;
  background-image: url('images/icons/icon-FULLPAY.png');
}
#status #ARRIVED{
  background-color:#337ab7;
  background-image: url('images/icons/icon-ARRIVED.png');
}
#status #LADIES{
  background-color:#404040;
  background-image: url('images/icons/icon-LADIES.png');
}
#status #COMP{
  background-color:#3333cc;
  background-image: url('images/icons/icon-COMP.png');
}
#status #CLOSED{
  background-color:#000000;
  background-image: url('images/icons/icon-CLOSED.png');
}
#status #ONHOLD{
  background-color:#b7b7b7;
  background-image: url('https://bookvip.app/images/icons/icon-ONHOLD1.png');
}

#myDialog{
	align-content:center;
	background-color: rgba(0,0,0,0.8);
}
#myDialog .modal-content{
	width:330px;
	height:370px;
	align-content:center;
	padding:10px;
}
#dialogBody a{
	display:block;
	padding:0px;
	color:red;
}
#dialogBody{
	position:relative;
	text-align:center;
	align-content:center;
}

@media screen and (max-width: 800px) {
  .modal{
    width:100%;
	align-content:stretch;
	padding-top:25px;
  }
  .table-status{
    line-height:15px;
  }
  .table-status-full{
    line-height:15px;
  }
  .AVAILABLE, .BOOKED, .FULLPAY, .ARRIVED, .LADIES, .COMP, .ALLTABLES, .CLOSED, .ALLTABLES, .ONHOLD{
    padding:0px;
    font-size:18px;
    font-weight:bold;
    //border:1px solid black;
  }
  .modal-header{
    font-size:20px;
  }
	
	#status li{
		height:60px;
		border-radius:2px;
		background-size:100% auto;
	}
	#table-menus li span{
		margin-left:40px;
	}
	#table-menus #customerInfo{
	  background-image: url('images/icons/icon-customer.png');
	}
	#table-menus #bookingInfo{
	  background-image: url('images/icons/icon-book.png');
	}
	#table-menus #bookingPayment{
	  background-image: url('images/icons/icon-deposit.png');
	}
	#table-menus #bookingHistory{
	  background-image: url('images/icons/icon-history.png');
	}
	#table-menus #bookingOrder{
	  background-image: url('images/icons/icon-ordered.png');
	}
	#table-menus #NOTICE{
	  background-image: url('images/icons/icon-share.png');
	}
	#TABLENO{line-height:90px;}
	#TABLENO span{display:block;font-size:20px;line-height:0px;}
	
}
@media screen and (max-width: 600px) {
  .modal{
    width:100%;
  }
  .table-status{
    line-height:15px;
  }
  .table-status-full{
    line-height:15px;
  }
  .AVAILABLE, .BOOKED, .FULLPAY, .ARRIVED, .LADIES, .COMP, .ALLTABLES, .CLOSED, .ALLTABLES, .ONHOLD{
    padding:0px;
    font-size:10px;
    //border:1px solid black;
  }
	#table-menus{
		font-size:0px;
	}
    #table-menus li{
		background-position: center center;
	}
	#TABLENO{font-size:30px;}
	#TABLENO span{display:block;font-size:14px;line-height:0px;}
  .modal-header{
    font-size:20px;
  }
  .master{
		background-size:50% auto;
	}
}
@media screen and (max-width: 430px) {
  .modal{
    width:100%;
  }
  .table-status{
    line-height:15px;
  }
  .table-status-full{
    line-height:15px;
  }
  .AVAILABLE, .BOOKED, .FULLPAY, .ARRIVED, .LADIES, .COMP, .ALLTABLES, .CLOSED, .ALLTABLES, .ONHOLD{
    padding:0px;
    font-size:9px;
    //border:1px solid black;
  }
  .modal-header{
    font-size:20px;
  }
	
    
}