*{
	padding			: 0px;
	margin			: 0px;
	touch-action	: none;
}
div{
	display			: block;
}

html, body{
	position		: relative;
	display			: block;
	width			: 100%;
	height			: 100vh;
	height			: 100%;
	overflow		: hidden;
	margin			: 0px;
	background		: #ebf5ff;
}	
canvas{
	background		: transparent;
}

body{
	background		: #ebf5ff url("../images/bg_arena.jpg") no-repeat center center;
	background-size	: cover;
}

#legals {
	position: absolute;
    z-index: 9999;
    color: white;
    opacity: .5;
    font-family: sans-serif;
    font-size: 3pt;
    bottom: 5px;
    left: 25px;
	right: 25px;
    text-align: center;
}

#main{
	visibility	: hidden;	
	left		: 0px;	
	top			: 0px;
	width		: 100%;
	height		: 100vh;
}
#main, #main>div{
	position	: absolute;							
	left		: 0px;	
	top			: 0px;	
	width		: 100%;
	height		: 100vh;
}	
#pixi>div{
	display:none !important;
}	
#pixi>canvas{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	width		: 100%;
	height		: 100vh;
}	

#loader{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	bottom		: 0px;
	right		: 0px;
	z-index		: 5999;
}
			
#loader>#loader_logo{
	display				: block;
	position			: absolute;
	left				: 50%;		
	top					: 50%;	
	width				: 90%;
	max-width			: 52px;
	height				: auto;
	-ms-transform		: translate(-50%, -51%);
	-webkit-transform	: translate(-50%, -51%);
	-moz-transform		: translate(-50%, -51%);
	transform			: translate(-50%, -51%);
}

#loader #loader_progress{
	display				: block;
	position			: absolute;
	left				: 50%;		
	bottom				: 50%;	
	width				: 50%;
	height				: 2px;
	max-width			: 300px;
	background			: #997031;	
	-ms-transform		: translate(-50%, 40px);
	-webkit-transform	: translate(-50%, 40px);
	-moz-transform		: translate(-50%, 40px);
	transform			: translate(-50%, 40px);
}

#loader #loader_bar{
	display				: block;
	position			: absolute;
	left				: 0%;		
	top					: 0%;	
	height				: 2px;
	width				: 0%;
	background			: #ffffff;
	transition			: width .15s linear;
	-webkit-transition	: width .15s linear;
	-moz-transition		: width .15s linear;
	-o-transition		: width .15s linear;
}

/*--------------------------------------------------------------------------*/

#v{
	posiiton:absolute; left:2px;top:2px;font-size:10px;opacity:0.3;z-index:9878;color:#fff;padding:3px;
}

/*--------------------------------------------------------------------------*/

.popup{
	display		: block;
	position	: absolute;
	visibility	: visible;
	left		: 0px;
	top			: 100vh;
	width		: 100%;	
	height		: 100vh;	
	background	: rgba(148, 117, 101, 0.5);	
}
.popup.show{
	top			: 0px;
	z-index		: 6999;
}

.popup_content{
	display					: block;
	position				: absolute;
	left					: 50%;
	top						: 50%;
	background				: #72cef4;
	background				: linear-gradient(0deg, rgba(57,188,237,1) 0%, rgba(117,207,244,1) 100%);
	border					: 4px solid #ffffff;
	padding					: 20px 40px 40px 40px;
	text-align				: center;				
	width					: 80%;
	max-width				: 450px;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;
	border-radius			: 10px;
	-ms-transform			: translate(-50%, -55%);
	-webkit-transform		: translate(-50%, -55%);
	-moz-transform			: translate(-50%, -55%);
	transform				: translate(-50%, -55%);
	box-shadow				: 0px 10px 60px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow		: 0px 10px 60px 0px rgba(0,0,0,0.5);
	-moz-box-shadow			: 0px 10px 60px 0px rgba(0,0,0,0.5);
}

.popup_content div{
	display					: block;
	width					: 100%;
	-webkit-user-select		: none;
	-ms-user-select			: none;
	user-select				: none;
	color					: #ffffff;
	font-family				: "CeraPro";	
	font-size				: 26px;	
	text-align				: center;	
}

.popup_content .form_input, .popup_content .form_select{
	display					: block;
	margin					: 10px auto;
	width					: 90%;
	max-width				: 300px;
	background				: #fefefe;
	height					: 40px;
	color					: #111111;
	font-family				: "CeraPro";
	font-size				: 20px;	
	text-align				: center;	
	-webkit-box-shadow		: inset 0 0 10px #cacaca;
	-moz-box-shadow			: inset 0 0 10px #cacaca;
	box-shadow				: inset 0 0 10px #cacaca;
	border					: 2px solid #ffffff;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;
	border-radius			: 10px;
}
.popup_content .form_select{
	font-family				: "CeraProMedium";
}

.popup_content .form_input.error{
	border-color:#e3000b;
}

.popup_content .line{
	display:block;
	width:90%;
	height:1px;
	background:#ffffff;
	margin:20px auto 15px auto;
}

.popup_content .form_input_pass{
	letter-spacing:3px;
}

input[type=submit], .popup_content .btn{
	display					: block;		
	width					: 90%;
	max-width				: 250px;
	padding					: 12px 10px;
	color					: #ffffff;
	font-family				: "CeraPro";
	font-size				: 16px;	
	text-align				: center;	
	text-transform			: uppercase;
	border					: 2px solid #ffffff;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;
	border-radius			: 10px;
	background				: #54b60c;
	cursor					: hand;
	cursor					: pointer;
	background				: linear-gradient(0deg, rgba(84,182,12,1) 48%, rgba(117,208,51,1) 50%, rgba(86,190,10,1) 100%);
	
}
input[type=submit]{
	position				: absolute;
	left					: 50%;
	bottom					: 0%;
	-ms-transform			: translate(-50%, 50%);
	-webkit-transform		: translate(-50%, 50%);
	-moz-transform			: translate(-50%, 50%);
	transform				: translate(-50%, 50%);	
}

.formBtnClose{
	display					: block;
	position				: absolute;
	right					: 10px;
	top						: 10px;
	width					: 25px;
	height					: 25px;
	cursor					: hand;
	cursor					: pointer;
	-webkit-user-select		: none;
	-ms-user-select			: none;
	user-select				: none;
}

.popup_content #formRegistration div{	
	font-size				: 16px;	
}
.popup_content #formRegistration div#formRegistrationTitle{	
	font-size				: 20px;	
	margin-bottom			: 15px;
	color					: #f6ff00;
	font-family				: "CeraProMedium";
}
.popup_content #formRegistration .form_input {
    margin-top: 2px;
}

#formSettingsNickT{
	display			: none;
	background		: url(../images/icon_user.png) no-repeat left center;
    background-size	: 50px 50px;
    text-align		: left;
    padding			: 0px 45px;
    width			: fit-content;
    margin			: 0px auto;
}

#btnSettingsLogin{
	margin:10px auto 0px auto;
}

#popup_settings .popup_content{
	padding-bottom:20px;
}

@media (max-height:350px){
	.popup_content {
		padding: 10px 30px 35px 30px;
	}
	.popup_content div {
		font-size: 20px;
	}
	.popup_content .form_input{
		font-size: 20px;
		height: 40px;
		margin: 5px auto 10px auto;
	}
	input[type=submit]{				
		font-size: 20px;
	}
	.formBtnClose{
		right	: 5px;
		top		: 5px;
	}
	
	.popup_content #formRegistration div{	
		font-size				: 12px;	
	}
	.popup_content #formRegistration div#formRegistrationTitle{	
		font-size				: 15px;	
		margin-bottom			: 10px;
	}
}

@media (max-height:300px){
	.popup_content {
		padding: 10px 30px 25px 30px;
	}
	.popup_content div {
		font-size: 16px;
	}
	.popup_content .form_input{
		font-size: 16px;
		height: 30px;
		margin: 2px auto 5px auto;
	}
	input[type=submit]{				
		font-size: 16px;
	}
	.formBtnClose{
		right	: 5px;
		top		: 5px;
	}
}