html * {max-height:1000000px;}

#unity-container { position: absolute;  top:0px; left:0px; }
#unity-container.unity-desktop { }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas {  }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#loading { 
	position: absolute; top:0px; left:0px; display: none;  background-color: #0057a4; z-index: 10000000005; background-repeat: no-repeat; background-size: cover; background-position: center center;
}
#unity-loading-bar { 
	display: inline-block; margin-top: 150px;
}
#unity-logo { 
	width: 200px; height: 130px; background: url('logo.png') no-repeat center; background-size: contain;
}
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }


@font-face {
	font-family: "GEDINAR";
	src: url("GEDINAR2.otf") format("opentype");
}

@font-face {
    font-family: 'TWC';
    src: url('tcm-webfont.woff2') format('woff2'),
         url('tcm-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body { 
	padding: 0; margin: 0;
	font-family: TWC, Arial, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	background-color: #0057a4;
	font-size: 20px;
}


#container{
	background-image:url("sky.jpg");
	background-size: cover;
}


h1{
	font-weight: normal;
}

#txt{
	position: absolute; z-index: 100000; top: 450px; left: 25px; font-size: 30px; font-family: Arial
}

#drawing_canvas{
	position: absolute; z-index: 10000000000; pointer-events: none; 
	
}

#ui_icons{
	/*
	position: absolute; z-index: 10000000001; pointer-events: none; 
	background-image: url(outline.png); background-repeat: no-repeat; background-position: center center; background-size: 100% ;  display: none;*/
}

#reset_icon{
	position: absolute; z-index: 1000000000011;
	width: 26px;
	height: 26px;
	background-image: url(replay.png);
	background-size: 100% ;
	right: 7px;
	top: 7px;
	opacity: .7;
}

#ui_buttons{
	position: absolute; z-index: 10000000002;  display: none; left: 0px; top: 0px;
}

#info_bar{
	background-color: #0057a4; padding: 8px; color: #ffdb01; font-size: 15px; direction: rtl;
}

#logo{
	position: relative; float: right; margin-right: 15px;
}

#link{
	display: none; position: absolute; left: 0px; top: 400px; z-index: 10000000006
}



#permission{
	position: absolute; top:0px; left:0px; background-color: #0057a4; color: #fff; z-index: 10000000009;background-repeat: no-repeat; background-size: cover; background-position: center center;
}

#permission_box{
	margin-top: 70px; color: #fff; padding: 20px; font-size: 18px;
}

#instructions{
	position: absolute; top:0px; left:0px; background-color: #fff; z-index: 10000000007; background-repeat: no-repeat; background-size: cover; background-position: center center;
}

#instructions_box{
	margin-top: 40px; color: #666;
}

#instructions_list{
	direction: rtl;
	text-align: center;
}

#instructions_list p{
	background-color: #525894;
	border-radius: 4px;
	padding: 10px;
	font-size: 18px;
}

#rotate{
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #666;
	font-size: 20px;
	z-index: 10000000100;
	display:none;
}

#rotate img{
  margin-top: 80px;
}


.button_icon{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 6px;
	background-color: #1c0054;
	background-size: 17px 17px;
	background-repeat: no-repeat;
	background-position:  center center;
	margin: 3px;
}

#reset_btn{
	background-image: url(move.png);
}

#replay_btn{
	background-image: url(replay.png);
}

.line1{
	font-size: 25px;
	margin-bottom: 15px;
}
.line2{
	font-size: 20px;
}
.line3{
	font-size: 18px;
}



a{
	text-decoration: none;
	color: #ffdb01;
	
}

.error{
	background-color: #f01233;
	padding: 15px;
	display: block;
	margin-top: 30px;
	color: #fff !important;
	font-weight: normal !important;
}

.success{
	background-color: #f01233;
	color: #fff;
	padding: 20px;
	border-radius: 4px;
	text-align: center;
	width: 80% !important;
	margin-top: 120px;
	line-height: 30px;
	font-weight: bold;
}


.hidden{
	display: none;
}

#forms{
	padding: 20px;
}

.labels{
	width: 95%;
	font-weight: bold;
	color: #ffdb01;
}

.ar{
	direction: rtl !important;
	font-size: 16px;
	
	font-family: "Cairo";
}

.ardir{
	direction: rtl;
}

.small{
	font-size: 12px !important;
}

input{
	font-family: 'Proxima Nova', Arial, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.inputs{
	display: block;
	margin-bottom: 30px;
	width: 90%;
	padding: 10px;;
	font-size: 17px;
}

.inputs:focus{
	border-bottom: 4px solid #ffdb01;
}

.inputs_small{
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 160px;
	padding: 10px;;
	font-size: 15px;
}

.button{
	padding: 15px;
	min-width: 200px;
	border-radius: 4px;
	color: #0057a4;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #ffdb01;
	border: none;
	font-size: 22px;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 7px;
	margin-top: 7px;
	font-family: TWC, Arial, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-weight: bold;
	
}

.top{
	background-color: #f58221;
	min-height: 25px;
}

.har{
	direction: rtl;
	font-size: 17px !important;
}

h1{
	font-size: 36px;
}

.h{
	font-size: 16px;
	padding: 12px;
	padding-left: 35px;
	padding-right: 35px;
	color: #fff;
	font-weight: bold;
	line-height: 30px;
}

.red{
	color: #f01233;
}

h3{
}

p{
}

.win{
	padding: 30px;
	font-size: 20px;
}

.big{
	font-size: 32px !important;
	margin-bottom: -10px;
}


.bluebg{
	background-color: #0057a4 !important;
}

.arabic{
	font-family: "GEDINAR";
}