<style>

@font-face {
  font-family: myFont;
  src: url('Gotham-Light.otf');
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 7; /* Sit on top */
  padding-top: 60px; /* 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 */
}

/* Modal Content */
.modal-content {
  position: fixed;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  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;
  position:fixed;
  top:10px;
  left:10px;
  right:10px;
  height:40px;
  z-index:1;
}
.modal-header:after {
  content: "";
  display: table;
  clear: both;
}

.modal-body {
	margin: 0px;
	position:fixed;
	overflow:auto;
	padding:0px;
	bottom:50px;
	left:10px;
	right:10px;
	top:50px
}
.modal-body:after {
	content: "";
	display: table;
	clear: both;	
}

.modal-footer {
  //background-color: #04AA6D;
  background-color:black;
  color: white;
  line-height:40px;
  position:fixed;
  bottom:10px;
  left:10px;
  right:10px;
  height:40px;
  z-index:1;
}
.modal-footer a{
  float: none;  
  padding: 0px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size:16px;
  color: #FFFFFF;
  text-transform:uppercase;
}
.modal-footer a:hover{
  opacity:0.9;
}

.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;
  fill:#5cb85c;
}
.BOOKED{
  background-color:#f0ad4e;
  color:white;
  fill:#f0ad4e;
}
.FULLPAY{
  background-color:#80137f;
  color:white;
  fill:#80137f;
}
.ARRIVED{
  background-color:#337ab7;
  color:white;
  fill:#337ab7;
}
.LADIES{
  background-color:#404040;
  color:white;
  fill:#404040;
}
.COMP{
  background-color:red;
  color:white;
  fill:#red;
}
.ALLTABLES{
  background-color:red;
  color:white;
  fill:#red;
}
.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:#000000;
}
.ALLTABLES:hover{
  background-color:#f97777;
}
.CLOSED:hover,.CLOSED .active{
  background-color:#000000;
}
.ONHOLD:hover,.ONHOLD .active{
  background-color:#999999;
}

#status{
  width:90%;
  margin:0px auto;
  list-style-type: none;
  padding: 0px;
}
#status:after{
  content: "";
  display: table;
  clear: both;
}

#status li{
	width:20%;
	height:60px;
	line-height:60px;
	padding:0px;
	margin:0px;
	cursor:pointer;
	text-align:center;
	display:inline-block;
	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;
	opacity:0.8;
}
#status li:hover{
	opacity:1;
	box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

#status #AVAILABLE{
  background-color:#5cb85c;
  background-image: url('images/icons/icon-AVAILABLE.png');
}
#status #bookingInfo{
  background-color:red;
  background-image: url('images/icons/icon-customer1.png');
}
#status #bookingPayment{
  background-color:red;
  background-image: url('images/icons/icon-deposit2.png');
}
#status #bookingHistory{
  background-color:red;
  background-image: url('images/icons/icon-history1.png');
}
#status #BOOKED{
  background-color:#f0ad4e;
  background-image: url('images/icons/icon-BOOKED.png');
}
#status #NOTICE{
  background-color:red;
  background-image: url('images/icons/icon-share1.png');
}
#status #bookingOrder{
  background-color:red;
  background-image: url('images/icons/icon-ordering4.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:red;
  background-image: url('images/icons/icon-COMP1.png');
}
#status #CLOSED{
  background-color:#000000;
  background-image: url('images/icons/icon-CLOSED.png');
}
#status #ONHOLD{
  background-color:#b7b7b7;
  background-image: url('images/icons/icon-ONHOLD1.png');
}
#status #SCREEN{
  background-color:#000000;
  background-image: url('images/icons/icon-share1.png');
}
#status #bookingDue{
  width:40%;
  cursor:auto;
  color:red;
  text-align:right;
  font-size:30px;
}

#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%;
  }
  .table-status{
    line-height:15px;
  }
  .table-status-full{
    line-height:15px;
  }
  .AVAILABLE, .BOOKED, .FULLPAY, .ARRIVED, .LADIES, .COMP, .ALLTABLES, .CLOSED, .ALLTABLES, .ONHOLD{
    padding:0px;
    font-weight:bold;
  }
  .modal-header{
    font-size:20px;
  }
	#status{
	  width:90%;
	  margin:0px auto;
	  list-style-type: none;
	  padding: 0px;
	}
	#status li{
		height:40px;
		border-radius:2px;
	}
	#status #bookingInfo{
	  //background-size: 30px auto;
	  //background-image: url('images/icons/icon-customer.png');
	}
	#status #bookingPayment{
	  //background-size: 30px auto;
	  //background-image: url('images/icons/icon-deposit.png');
	}
	#status #bookingHistory{
	  //background-size: 30px auto;
	  //background-image: url('images/icons/icon-history.png');
	}
	#status #bookingOrder{
	  //background-size: 30px auto;
	  //background-image: url('images/icons/icon-ordered.png');
	}
	#status #NOTICE{
	  //background-size: 30px auto;
	  //background-image: url('images/icons/icon-share.png');
	}
	#status #bookingDue{
		font-size:20px;
	}
}
@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;
  }
	#status{
	  width:90%;
	  margin:0px auto;
	  list-style-type: none;
	  padding: 0px;
	}
	#status li{
		height:40px;
		border-radius:2px;
	}
    #status #bookingInfo{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-customer.png');
	}
	#status #bookingPayment{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-deposit.png');
	}
	#status #bookingHistory{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-history.png');
	}
	#status #bookingOrder{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-ordered.png');
	}
	#status #NOTICE{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-share.png');
	}
  .modal-header{
    font-size:20px;
  }
}
@media screen and (max-width: 430px) {

  .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;
  }
  .modal-header{
    font-size:20px;
  }
	#status{
	  width:90%;
	  margin:0px auto;
	  list-style-type: none;
	  padding: 0px;
	}
	#status li{
		height:40px;
		border-radius:2px;
	}
    #status #bookingInfo{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-customer.png');
	}
	#status #bookingPayment{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-deposit.png');
	}
	#status #bookingHistory{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-history.png');
	}
	#status #bookingOrder{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-ordered.png');
	}
	#status #NOTICE{
	  background-size: 30px auto;
	  background-image: url('images/icons/icon-share.png');
	}
	#status #bookingDue{
		font-size:14px;
	}
}
</style>