html {
	height: 100%;
}

body {
	position: relative;
	height: 100%;
	z-index: 1;
}

#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(23, 23, 23, 0.92);
	z-index: 99;
}

#popup {
	position: absolute;
	width: 35%;
	height: 60px;
	top: 40%;
	left: 32.5%;
	background: white;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
	z-index: 100;
	text-align: center;
	border-radius: 4px;
}

#live-room, #live-record-room {
	border: 5px solid #f7941e;
	border-radius: 10px;
	background: #fff;
	padding: 30px;
}

#orange_counter_buble {
	width: 101px;
	height: 70px;
	display: inline-block;
	background: url('../img/orange_buble.png') no-repeat;
	position: absolute;
	margin-top: -26px;
	margin-left: 41px;
	z-index: 1;
	padding-left: 36px;
	padding-top: 33px;
	font-size: 25pt;
	color: #fff;
}

#question_header_live {
	background: #f7931e;
	border-radius: 10px;
	padding: 15px 15px 15px 0;
	margin: 37px 0 40px 85px;
	width: 627px;
	overflow: hidden;
	color: #fff;
	text-align: right;
	letter-spacing: 1px;
	font-size: 15pt;
	background-image: linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -o-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -moz-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -webkit-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -ms-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.01, rgb(220,129,20)), color-stop(0.76, rgb(245,151,40)) );
}

#quest_box_live {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 45%;
	/*	padding:65px 0 0 35px;*/
	margin: -15px 5px 0px 90px;
	background-size: 450px 300px;
}

#quest_box_record_live {
	height: 30%;
	padding: 65px 0 0 35px;
	margin: -15px 5px 0px 90px;
	background-size: 90%;
}

#quest_box_live_mobile {
	display: inline-block;
	vertical-align: top;
	width: 88%;
	height: 25%;
	padding: 65px 0 0 35px;
	/* margin: -15px 5px 0px 90px; */
	background-size: 400px 320px;
}

#quest_box_live div {
	font-weight: bold;
	/*width: 60%;*/
	height: 80%;
	font-size: 14pt;
	/*margin-top: 20%;*/
	margin-left: 13%;
}

#quest_box_record_live div {
	font-weight: bold;
	width: 80%;
	height: 80%;
	font-size: 14pt;
	margin-top: 3%;
}

#quest_box_live_mobile div {
	margin-top: 25%;
}

#video_box_lv_frame {
	width: 355px;
	height: 265px;
	border: 5px solid #f7941e;
	display: inline-block;
	margin: 0 0 20px 55px;
}

#video_box_lv {
	width: 355px;
	height: 265px;
	-webkit-transform: scaleY(1.34);
	-moz-transform: scaleY(1.34);
}

#record_header_live {
	background: #f7931e;
	border-radius: 5px;
	padding: 2px 5px 0px 0;
	margin: 37px 0 12px 85px;
	width: 330px;
	overflow: hidden;
	color: #fff;
	text-align: right;
	letter-spacing: 1px;
	font-size: 13pt;
	background-image: linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -o-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -moz-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -webkit-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -ms-linear-gradient(bottom, rgb(220,129,20) 1%, rgb(245,151,40) 76%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.01, rgb(220,129,20)), color-stop(0.76, rgb(245,151,40)) );
}

#record_orange_counter_buble {
	width: 50px;
	height: 50px;
	display: inline-block;
	background: url('../img/orange_buble.png') no-repeat;
	background-size: 85%;
	position: absolute;
	margin: -12px 0 0 45px;
	z-index: 1;
	padding: 15px 0 0 15px;
	font-size: 12pt;
	color: #fff;
}

#recorderObj {
	position: absolute;
	top: -250px;
	left: -450px;
	z-index: 2;
}

#rec {
	height: 161px;
	width: 215px;
	border: 3px solid #f7941e;
	display: inline-block;
	margin: 0px 0 0 18px;
	position: relative;
}

#rec_light_lv {
	border-radius: 144px;
	width: 12px;
	height: 12px;
	background: red;
	margin: 17px 0 0 74px;
}

#rec_text_lv {
	width: 85px;
	margin: 2px 0 0 37px;
	position: relative;
	text-align: center;
	font-size: 9pt;
}

#room-upload, #room-video-comleted {
	border: 5px solid #f7941e;
	border-radius: 10px;
	background: #fff;
	width: 380px;
	margin: 0 auto;
	padding: 80px 0 40px 0;
}

#room-video-comleted {
	padding: 10px 0 0 0;
}

#room-upload-content-text h3 {
	font-size: 17pt;
	letter-spacing: 2px;
	color: orange;
	margin-top: 0px;
	margin-bottom: 30px;
}

#room-upload-content-text div {
	font-size: 13pt;
	text-align: center;
}

#room-upload-content-text a {
	text-decoration: none;
	color: #1aa3e2;
}

#progress {
	width: 300px;
	margin: 40px;
	auto;
	height: 40px;
	background: #24ace9;
	border-radius: 5px;
	padding: 5px 0 5px 0;
}

#bar {
	height: 10px;
	border-radius: 10px;
	background: #fca204;
}

#bar_background {
	padding: 1px 0 1px 0;
	width: 240px;
	height: 11px;
	margin: 0 auto;
	border: 1px solid #225961;
	border-radius: 10px;
	background: #01506b;
}

#room-video-comleted #progress {
	margin-bottom: 10px;
}

#MyPlayer1 {
	width: 355px !important;
	height: 265px !important;
}



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

	#login-room {
		width: 280px;
	}
}