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: url('../img/orange_question_buble.png') no-repeat;
	background-size:450px 300px;
}
#quest_box_record_live {
	height: 30%;
	padding: 65px 0 0 35px;
	margin: -15px 5px 0px 90px;
	background: url('../img/orange_question_buble.png') no-repeat;
	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: url(../img/orange_question_buble.png) no-repeat;
	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;
	}
	
}