@font-face{
	font-family: century_gothic;
	src: url('custom_fonts/GOTHIC.TTF'),url('custom_fonts/GOTHICB.TTF'),url('custom_fonts/GOTHICBI.TTF'),url('custom_fonts/GOTHICI.TTF');
}

body{margin: 0;	padding: 0px; font-family:sans-serif, tahoma, century_gothic;}
input[type=text], input[type=time], input[type=submit], input[type=date], input[type=number], select{
	width: 100%;
	height: 42px;
	font-size: 16px;
}

tr:nth-child(even) {background:#ade0ff;}
tr:nth-child(odd) {background:#FFF;}
td{padding:7px 2px;}

textarea{width:100%; height:140px;}
input:focus, textarea:focus, select:focus{outline: none;}
input[type=submit]{cursor:pointer;}

a{text-decoration:none;}

::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


/* ====== ARROWS ============ */
i{
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/*=========================*/

#container{width:87%; position:absolute; right:0px; overflow-y:hidden; transition:0.32s;}

#bodycontent{
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	text-align: center;
}

#header{
	background:transparent; 
	color:#333; 
	font-size:18px; 
	font-family:arial; 
	font-weight:bold; 
	padding:7px;
	overflow:hidden;
}

#headBar{
	background:#faf9ff;/*#89E894 2a2a29*/
	padding: 0px;
	width: 100%;
	border-bottom:1px solid #ddd;
	position:relative;
}
#headBar table{width: 100%; padding:12px 0px;}

#mobileNav{
	display: block;
	width: 100%;
	z-index:99999999;
	text-align: left;
	padding:12px 0px;
}
#mobileNav ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: relative;
	width: 100%;
	text-align: right;
	text-transform: uppercase;
}
#mobileNav ul li:hover ul{
	display: block;
}
#mobileNav ul li a{
	color:#fff; 
	font-size:24px;
	padding: 10px 24px;
	text-decoration: none;
}
#mobileNav ul ul{
	background: #fff !important;				
	box-shadow: 5px 7px 12px #dddddd;
	display: none;
	position:absolute; 
	z-index:99999999;
	text-align: center;
}

#mobileNav li li a{
	color:green; 
	font-size:18px;
	padding: 0px 20%;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}
#mobileNav li li{
	border-bottom: 1px solid #dddddd;
	padding: 7px;
}

#vbk td{
	border-bottom: 1px solid #dddddd;
}
#vbk input{
	border:none;
	font-size: 18px;
	height:32px;
	
}

#open{display:none; color:#fff; cursor:pointer;}
#closer{color:#fff; cursor:pointer;}

#open-mb, #closer-mb{display:none; color:#fff; cursor:pointer;}

#menu{position:fixed; z-index:9999999; background:#212330; height:100vh; width:15%;  overflow:hidden;}

#menubar{
	/*position:fixed;*/
	left:0px; 
	top:0px; 
	height:100%;
	z-index:200000;
	/*width:13%;*/ 
	background:#212330; /*#02ccfc;*/
	transition:0.32s;
	scroll-behavior: smooth;
}
#menubar a{color:#fff; font-size:12px; font-family:arial; text-decoration: none; text-transform: uppercase;}
#menubar a div{padding:10px 7px; border-top:1px solid transparent; border-bottom:1px solid #2a2b38; transition:0.32s;}
#menubar a div:hover{background:rgba(255,255,255,0.24); border-top:1px solid #fff; border-bottom:1px solid #fff;}

.dropdown{padding:0px; background:rgba(255,255,255,0.24); display:none;}
.dropdown div{padding:7px 12px;}
.dropdown div a{color:#fff; text-decoration:none; font-size:12px !important; font-family:arial; padding:4px 0px !important; transition:0.32s;}
.dropdown div a:hover{padding-left:7px !important;}

#advertisement, #editadvert{
	position:absolute; 
	z-index:9999999; 
	width:50%;
	height:500px;
	left: 25%;
	/*margin-left: -37.5%;*/
	top: 10%;
	/*margin-top: -20%;*/
	background:#fff; 
	font-family:sans-serif; 
	font-size:14px; 
	font-weight:bold;
	overflow-y: auto;
	display:none;
}
#advertisement div{}
#advertisement label, #advertisement input[type=checkbox]{padding:0px 7px; font-size:18px; height:34px; width:34px;}

#updateadvert label, #updateadvert input[type=checkbox]{padding:0px 7px; font-size:18px; height:34px; width:34px;}

.shadow{display:none; background:#000; opacity:.7; position:fixed; z-index:1000; top:0px; left:0px; padding:0px; width:100%; height:100%;}

/*#updateAdvert{position:absolute; z-index:2000; width:75%; padding:62px 0px;	left: 50%; margin-left: -37.5%; top: 50%; margin-top: -22%; background:#fff; font-family:century_gothic; font-size:14px; font-weight:bold; display:none;}
#updateAdvert div{padding:12px 0px; text-align:center;}
#updateAdvert label, #updateAdvert input[type=checkbox]{padding:0px 7px; font-size:18px; height:34px; width:34px;}
*/

#conciergelog div{padding:24px 0px; font-family:arial;}
#conciergelog input[type=text]{width:250px; height:42px; font-size:18px; padding:0px 4px;}
#conciergelog input[type=date]{width:170px; height:42px; font-size:18px; padding:0px 4px;}
#conciergelog  textarea{width:400px; height:120px;}

/* ================= CLASSES =================*/
.loginpanel{margin:auto;  background:#fff; background-image:url('images/newsbg.png'); width:65%; margin-top:7%; padding:0px;}
.loginpanel div{padding:12px 0px; text-align:center; font-family:century_gothic;}
.loginpanel input[type=text], .loginpanel input[type=password]{width:90%; height:62px; font-size:24px; text-align:left; border:none; border-bottom:1px solid #B6BCCC; background:transparent;}
.login-logo{display:inline-block; width:20%; background:#89e894; height:350px; vertical-align:top;}
.setlogo{background:#89E894; border-radius:350px; height:72px; padding:34px 0px;}
.login-text{font-size:42px; color:#89e894; text-align:left; padding-left:32px;}

.loginpanel-2{position:absolute; background:#fff; /*background-image:url('images/newsbg.png');*/ width:30%; height:100vh; padding:0px; right:0%; text-align:center;}
.loginpanel-2 div{padding:12px 0px; font-family:century_gothic;}
.loginpanel-2 input[type=text], .loginpanel-2 input[type=password], select{width:95%; height:32px; font-size:16px; text-align:left; border:none; border-bottom:1px solid #B6BCCC; background:transparent; transition:0.32s;}
.loginpanel-2 input[type=text]:focus, .loginpanel-2 input[type=password]:focus, , select:focus{border-bottom:1px solid #22abf0;}
.login-logo-2{display:block; vertical-align:top;}
.setlogo-2{background:#89E894; border-radius:50%; height:72px; padding:34px 0px;}
.login-text-2{font-size:24px; font-weight:bold; color:#22abf0; text-align:left;}

.setlink{text-decoration:none; color:#fff; padding:4px; transition:0.75s;}
.setlink:hover{color:#222222;}

.setNav a{
	border-left: 1px solid #333;
	font-family: arial;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	padding:12px 24px;
	transition:0.24s;
}
.setNav a:hover{background:#02ccfc; color:#fff;}

/* ======== HUMAN RESOURCE =====*/
.hrdiv{display:inline-block; width:32%; height:97%; vertical-align:top; background:#fff; padding:7px;}
.hrdiv ul{list-style:none; width:100%; padding:0px; text-align:center;}
.hrdiv li{display:inline-block; padding:7px;}
.hrdiv li div{width:150px; height:150px; border:1px solid #ddd; padding:4px; transition:0.42s; font-size:14px;}
.hrdiv li div:hover{box-shadow:0px 0px 4px #ddd;}


/* ========== FORMS =============*/
.form-field{width:100%; padding:1rem 0rem;} .form-field div{padding:6px 0px;} .form-field input, .form-field select, .form-field textarea{width:100%; max-width:100%; min-width:100%; height:42px; border:1px solid #ddd;}
.form-field-2{border:1px solid #ddd; background:#f5f5f5; font-family:arial;} .form-field-2 div{padding:12px 0px; width:80%; margin:auto;}
.form-field-2 input, .form-field-2 select{width:100%; border:1px solid #ddd; padding:4px; font-size:18px; height:42px;}
.form-field-2 textarea{min-width:80%; max-width:80%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:18px; font-family:arial; min-height:140px; max-height:140px;}

/* ======== BUTTONS ============ */
.btn1{background:#006fd8; color:#fff; padding:24px 0px; text-align:center !important; cursor:pointer;}
.btn2{background:teal; color:#fff; padding:24px 42pxpx; text-align:center !important; border:none; cursor:pointer; transition:0.64s;}
.btn2:hover{background:#333333; color#fff;}
.subbtn{background:#89E894; border:none; color:#fff; font-size:18px; font-weight:normal; cursor:pointer; letter-spacing:2px; width:90% !important; transition:0.64s;}
.subbtn:hover{background:#333333; letter-spacing:4px;}

.btn-open-close{background:#2a2b38;	/*#02ccfc*/; color:#fff; padding:7px;}

.btn{padding:12px 24px; text-decoration:none; border:none; text-transform:uppercase; transition:0.75s;} .btn:hover{background:#222222; color:#fff;}
.btn-error{background:#fc4438; color:#fff;}
.btn-info{background:#22abf0; color:#fff;}
.btn-orange{background:#ee8031; color:#fff;}
.btn-green{background:#22975e; color:#fff;}
.btn-white{background:#fff; color:#000;}

.rounded{border-radius:24px;}

/*============ PAGE LAYOUT =========*/
.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:95%; margin:auto;}

/*============ FLOATERS ===========*/
.left-float{float:left;}
.right-float{float:right;}

.left-dash{float:left;}
.right-dash{float:right;}

.clear{clear:both;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent2{width:2%;}
.percent5{width:5%;}
.percent10{width:10%;}
.percent15{width:15%;}
.percent20{width:20%;}
.percent23{width:23%;}
.percent25{width:25%;}
.percent30{width:30%;}
.percent35{width:35%;}
.percent40{width:40%;}
.percent45{width:45%;}
.percent50{width:50%;}
.percent55{width:55%;}
.percent60{width:60%;}
.percent70{width:70%;}
.percent75{width:75%;}
.percent80{width:80%;}
.percent85{width:85%;}
.percent90{width:90%;}
.percent95{width:95%;}
.percent100{width:100%;}

/*============ BORDER ===========*/
.border-top-bottom{border-top:1px solid #40cfd3; border-bottom:1px solid #40cfd3;}
.border-top{border-top:1px solid #40cfd3;}
.border-bottom{border-bottom:1px solid #40cfd3;}
.border-left{border-left:1px solid #40cfd3;}
.border-right{border-right:1px solid #40cfd3;}
.border-full{border:1px solid #40cfd3;}

/*============ PADDING ===========*/
.padd4{padding:4px 0px;}
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd14{padding:14px 0px;}
.padd18{padding:18px 0px;}
.padd24{padding:24px 0px;}
.padd30{padding:30px 0px;}
.padd42{padding:42px 0px;}
.padd64{padding:64px 0px;}
.padd72{padding:72px 0px;}

.padd-top15{padding-top:15%;}

.space12{padding:0px 12px;}
.space24{padding:0px 24px;}
.space42{padding:0px 42px;}
.space64{padding:0px 64px;}

.padding4{padding:4px;}
.padding7{padding:7px;}
.padding12{padding:12px;}
.padding14{padding:14px;}

/*============ LINE HEIGHT ===============*/
.line12{line-height:12px;}
.line14{line-height:14px;}
.line16{line-height:16px;}
.line18{line-height:18px;}
.line20{line-height:20px;}
.line24{line-height:24px;}
.line30{line-height:30px;}
.line34{line-height:34px;}
.line40{line-height:40px;}

/*============ COLOR ===============*/
.color-white{color:#fff !important;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-dark-grey{color:#555;}
.color-blue{color:#16bacf;}
.color-red{color:#f7665f;}
.color-brown{color:#eeb72e;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.block{display:block;}
.inline{display:inline-block;}

/*============ WEIGHT ===========*/
.bold{font-weight:bold;}
.normal{font-weight:normal !important;}
.italic{font-weight:italic;}

/*============ FONT SIZE ===========*/
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font21{font-size:21px;}
.font28{font-size:28px;}
.font32{font-size:32px;}
.font42{font-size:42px;}
.font72{font-size:72px;}
.font92{font-size:92px;}
.font112{font-size:112px;}

.spacer12{padding:0px 12px;}

.padding12{padding:12px;}

/*============ HEADERS ===========*/
.head1{font-size:72px;}
.head2{font-size:64px;}
.head3{font-size:42px;}
.head4{font-size:24px;}

/*============ TEXT TRANSFORM ===========*/
.upper{text-transform:uppercase;}
.capital{text-transform:capitalize;}

/*=========== BACKGROUND ===========*/
.teal{background:teal;}
.blue{background:#009ddc;}
.gray{background:#222222;}
.white{background:#fff;}
.red{background:#f7665f;}
.black{background:#222;}

.coolred{background:#d75250;}
.coolblue{background:#3179b4;}
.coolorange{background:#eeac55;}
.coolgreen{background:#5fb760;}
.coolgrey{background:#eeeeee;}
.coolteal{background:#30bba0;}

.lightblue{background:#ade0ff;}
.lightgrey{background:#f9f9f9;}

/* ======= Notification ========*/
.success{background:#006fd8; padding: 12px 0px; width:75%; margin-right:auto; margin-left:auto; text-align:center; color:#fff; transition:1s;}
.error{background:#fd4d39; padding: 12px 0px; width:75%; margin-right:auto; margin-left:auto; text-align:center; color:#fff; transition:1s;}

.getInfo{width:80%; margin-left: auto; margin-right: auto; text-align:center;}
.getInfo2{width:100%; margin-left: auto; margin-right: auto; text-align:center;}

/* ====== LIST ITEMS ==========*/
.list-type ul{padding: 12px; font-family:arial;}
.list-type li{display: inline-block; padding: 12px;}
.list-type li a{text-decoration:none; color:#333333;}
.list-type div{width: 300px; height:350px; overflow:hidden;	background:#fff; border-radius:4px; box-shadow:0px 0px 4px #ddd; transition:1s;}
.list-type section{width:300px; padding:7px 0px;}
.list-type li img{width:250px; height:250px;}
.list-type h3{color: #000;	border-bottom: none !important;}
.list-type p{padding: 7px; font-size: 14px; line-height:16px;}
.list-type div:hover{box-shadow:0px 0px 12px #ccc;}

.addonoptions div{
	padding: 12px 0PX;
	border-bottom:1px solid #ddd;
	text-align: center;
	background:#457FC8;
}
.addon{
	padding:7px 0px;
	text-decoration: none;
	color: #fff;
}
.addonoptions div:hover{background:#333333;}
.orderitem{text-decoration: none;}

/*.menuitem{
	padding: 12px 4px;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid #dddddd;
	font-size: 12px;
	font-family: arial;
}*/

.setTBHeader th{
	background: #333333;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
}

.bigText1{
	font-family: century_gothic;
	font-size: 62px;
	color: #333333;
}

.bigText2{
	font-family: arial;
	font-size: 32px;
	color: #333333;
}

.optionPan{
	position:relative;
	z-index:9999999; 
	margin:10% auto;
	width:75%; 
	background:#fff;
	border:1px solid #32d2ef;
}

/*=========== DROP DOWNS ==================*/
.link{cursor:pointer; transition:0.24s;}
.info{display:none; width:100%; color:#083f54; font-family:tahoma; font-size:16px;}


.collapse{text-align:left;}
.collapse span{border:1px solid #4C4640; color:#4C4640; padding:2px 7px; text-align:left; cursor:pointer;}
.collapse div{display:none; height:auto; text-align:left;}

.setTitle[alt]:hover:before{
	content: attr(alt);
	padding: 10px 4px;
	border-radius: 4px;
	position: absolute;
	margin-left: -40px;
	z-index: 20px;
	background:#FF6961;
	font-family: arial;
	font-size:14px;
	color:#000;
	line-height:18px;
	overflow: hidden;
	word-break: break-word;
	white-space: normal;
}
.setTitle2[alt]:hover:before{
	content: attr(alt);
	padding: 10px 4px;
	border-radius: 0px;
	position: absolute;	
	z-index: 20px;
	background:#77DD77;
	font-family: arial;
	font-size:16px;
	color:#000;
	line-height:18px;
	overflow: hidden;
	word-break: break-word;
	white-space: normal;
}
.setTitle3[alt]:hover:before{
	content: attr(alt);
	padding: 10px 4px;
	border-radius: 4px;
	position: absolute;	
	z-index: 20px;
	background:#779ECB;
	font-family: arial;
	font-size:14px;
	color:#000;
	line-height:18px;
	overflow: hidden;
	word-break: break-word;
	white-space: normal;
}

/*.form-field{margin-right:auto; margin-left:auto; width:75%;}
.form-field div{padding:12px 0px;}
.form-field input, .form-field input[type=password], .form-field input[type=email], .form-field select{width:100%; border:1px solid #ddd; border-radius:4px; padding:4px; text-align:left; font-size:18px; height:42px;}
.form-field input[type=checkbox]{width:24px; height:24px; vertical-align:middle;}
.form-field textarea{min-width:100%; max-width:80%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:18px; font-family:arial; min-height:140px; max-height:140px;}
*/
#screenPlayers{
	background:#FF3237; 
	color:#fff; 
	font-weight:bold; 
	font-family:century_gothic; 
	padding:12px 18px; 
	border-radius:4px; 
	text-align: center;
	position:absolute; 
	right:172px; 
	margin-top:-28px;
	letter-spacing:2px;
	height:20px;
	overflow:hidden;
	cursor:pointer;
}
#screenPlayers a{color:#fff; text-decoration:none;}
#screenPlayers a div{padding:7px 4px; border-bottom:1px solid #fff; text-align:left; letter-spacing:2px;}
#screenPlayers a div:hover{background:#fff; color:#FF3237; transition:1s;}

#text, #image{display:none; background:#F4F3F1; padding:12px 4px; transition:0.75s;}

.comments{display:none; padding:24px; border-bottom:1px solid #000; font-size:18px; color:#000;}

#clock{}
#login_logo{font-family:sans-serif, century_gothic; color:#22abf0; font-weight:bold; font-size:38px; margin-top:10%; padding:0px;}

@media only screen and (max-width: 1080px) {

	/* ==== LOGIN ===== */
	.loginpanel-2{position:relative; width:70%; margin:auto; margin-top:5%; height:auto; padding:12px 0px; border-radius:7px;}
	.padd-top15{padding-top:1%;}
	#login_logo{font-size:28px;}
	#clock{display:none;}

	#menu{width:70%; overflow-y:scroll; left:-70%;}
	#optionpanel{width:100%;}
	#open, #closer, #closer-mb{display:none;}
	
	#open-mb{display:block;}

	.left-dash, .right-dash{clear:both; width:95% !important; margin:auto;}
}