html, body {
	
	width:100vw;
	height:100vh;
	background-color: #333;
	margin: 0; padding: 0;
	color: #F7E6CA;
}
progress::-moz-progress-bar { background: #8B0000;}
progress::-webkit-progress-value { 
	  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #f0240a, #f0240a);

    background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress { color: #8B0000; }
video{
	z-index:3;
}
#pauseOverlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	float:left;
	width:100%;
	height:100%;
	background:#444;
	opacity:90%;
	z-index:15;
	border: 2px solid white;
}
#mbOverlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	float:left;
	width:100%;
	height:100%;
	background:#444;
	opacity:90%;
	z-index:11;
	border: 2px solid white;
}
#alertBox{
	overflow:hidden;
	display:none;
	position:absolute;
	float:left;
	top: 50%;
	left: 50%;
	text-align:center;
	font-size:26px;
	padding-top:15px;
	padding-bottom:15px;
	transform: translate(-50%, -50%);
	background-image: url('../images/settingsBG.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; 
	color:white;
	width:40%;
	height:auto;
	border: 2px solid white;
	border-radius:0em;
	z-index:16;
}
#resolution_text{
	width:100%;
	height:auto;
	padding-bottom:15px;
	text-align:center;
	border-bottom:2px dotted #949392;
}
#resolution_content{
	width:100%;
	height:auto;
	padding:15px;
	padding-bottom:15px;
	text-align:left;
}
#resolution{
	overflow:hidden;
	display:none;
	position:absolute;
	float:left;
	top: 50%;
	left: 50%;
	text-align:center;
	font-size:26px;
	padding-top:15px;
	padding-bottom:15px;
	transform: translate(-50%, -50%);
	background-image: url('../images/settingsBG.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; 
	color:white;
	width:30%;
	height:auto;
	border: 2px solid white;
	border-radius:0em;
	z-index:12;
}
#alertButtons{
	position:relative;
	float:left;
	width:100%;
	padding-top:15px;
	height:auto;
}
.messeger_upload_button{
	display:block;
	position:relative;
	float:right;
	padding:6px 6px 6px 6px;
	top: 0;
	width:auto;
	margin-right:1rem;
	font-size:105%;
	font-weight: normal;
	font-family: "Lucida Console", "Courier New", monospace;
	background: #7d6608;
	color:white;
	width:auto;
	height:auto;
	border: 2px solid white;
	border-radius:.5em;
}
.messeger_upload_button:hover{
	cursor:pointer;
	background:#d4ac0d;
}
#drag{
	position:absolute;
	width:100%;
	height:100%;
	background:alpha;
	z-index:3;
}
#drag.dragging {
  opacity: 0.5;
}
#progr{
	position:absolute;
	bottom:0;
	overflow:hidden;
	width:100%;
	height:auto;
	padding-top:8px;
	padding-bottom:8px;
	border-top:1px solid #fad37a;
	z-index:4;
}
#per{
	position:relative;
	float:left;
	width:10%;
	margin-left:15px;
}
.progressB2{
	display:block;
	background-color: #000;
	width:70%;
	position:relative;
	float:left;
	top: 0%;
	left: 42%;
	background:#222;
	transform: translate(-50%, 0%);
	border: 2px solid #e5e5e5;
}
input.button_sec2{	
	position:relative;
	float:right;
	margin-top:2px;
	margin-right:5px;
	font-size: initial; 
	background-color: #fff;
	color: #000;
	border: 0px;
	border-right: 1px solid #e5e5e5;
	padding: 10px 15px;
	transition: .5s;
	border-radius: .5rem;
}

input.button_sec2:hover {
	background-color: #eee;
	border: 0px;
	border-right: 1px solid #e5e5e5;
	cursor: pointer;
	border-radius: 1rem;
	transition: .5s;
}
.vc_container{
	overflow:hidden;
	position:relative;
	float:left;
	top: 50%;
	left: 50%;
	background:#222;
	transform: translate(-50%, -50%);
	padding-top:30px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:30px;
	width:40%;
	height:auto;
	border:2px solid #f5b102;
}
.vdrop{
	font-size:18px;
	padding:5px 5px 5px 5px;
	margin-bottom:15px;
	border-radius:.5rem;
}
#vc_vid{
	overflow:hidden;
	position:relative;
	white-space: nowrap;  
	float:left;
	text-overflow: ellipsis;
	font-size:24px;
	background:#373737;
	width:500px;
	height:auto;
	border:2px solid #fad37a;
}
#vc_vid_player{
	overflow:hidden;
	position:relative;
	float:left;
	width:100%;
	height:250px;
}
#vc_title{
	overflow:hidden;
	position:relative;
	float:left;
	margin-bottom:30px;
	text-align:center;
	color:#f7cf6d;
	font-family: "Lucida Console", "Courier New", monospace;		
	font-size:32px;
	width:100%;
	height:auto;
}
#vc_buttons{
	overflow:hidden;
	position:absolute;
	left:80%;
	top:100px;
	width:130px;
	height:auto;
}
#vc_video_info{
	position:relative;
	float:left;
	padding-top:0px;
	background:#222;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:10px;
	padding-right:10px;
	width:100%;
	height:auto;
	border-bottom:1px solid #fad37a;
}
#dsp{
	width:80%;
}
#dsp img{
	width:32px;
	height:auto;
}
#ft{
	position:relative;
	float:left;
	width:60px;
}
#fn{
	position:relative;
	float:left;
	width:80%;
	overflow:hidden;
	white-space: nowrap;  
	text-overflow: ellipsis;
}
#fs{
	position:relative;
	float:left;
	width:30%;
	overflow:hidden;
	white-space: nowrap;  
	text-overflow: ellipsis;
}
#fd{
	position:relative;
	float:right;
	margin-right:18px;
	width:35%;
	text-align:right;
	overflow:hidden;
	white-space: nowrap;  
	text-overflow: ellipsis;
}
#vc_buttons .button_sec2{
	width:96%;
}
#vc_upload_content{
	position:relative;
	float:left;
	background:#222;
	padding-top:10px;
	padding-bottom:5px;
	bottom:0px;
	height:28px;
	width:100%;
}
#vid_text_ol{
	position:absolute;
	float:left;
	font-size:28px;
	white-space: normal;
	text-align:center;	
	overflow-wrap: break-word; 
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color:white;
	width:100%;
	height:auto;
	top: 50%;
	left: 50%;
	background:alpha;
	transform: translate(-50%, -50%);
	z-index:4;
}
#vc_video_info .messeger_upload_button{
	width:auto;
	margin-right:1em;
	font-size:18px;
}
.text-bg {
  display: inline-block;    /* Restricts width to text size */
  background-color: #80ced6; /* Sets background color */
  padding: 5px 10px;        /* Spacing around the text */
}
.text-element {
	margin-left:10px;
	margin-right:10px;
	text-align:center;
	transform: translateY(-28px); 
	white-space: normal;      
	overflow-wrap: break-word; 
}
#vid_play_controls{ 
	display:none;
	position: absolute;
	bottom:0;
	padding-top:8px;
	height:48px;
	width:100%;
	background:rgba(0, 0, 0, .6);
	z-index:3;
	transition:.2s;
	border-top:2px solid white;
}
#vid_play_controls img{
	margin-left:10px;
	margin-bottom:0px;
	height:30px;
}	

#vid_play_controls img:hover{
	cursor:pointer;
}
#zVid{
	position:relative;
	overflow:hidden;
	float:left;
	left: 50%;
	transform: translate(-50%, 0%);
	height:100%;
	width:auto;
}
@media screen and (max-width: 640px) {
	.vc_container{
		width:80%;
	}
	#alertBox{
		width:90%;
	}
	#resolution{
		width:90%;
	}
	
	#vc_vid{
		width:100%;
	}
	#vc_vid_player{
		height:250px;
	}
	#fd{
		width:50%;
	}
	#vc_buttons{
		position:relative;
		float:left;
		left:0px;
		top:auto;
		margin-top:15px;
		bottom:0px;
		width:100%;
		height:auto;
	}
	#vc_buttons .button_sec2{
		position:relative;
		float:left;
	}
	#vc_title{
		font-size:26px;
		font-weight:bold;
	}
}
@media screen and (max-height: 640px) {
	.vc_container{
		width:70%;
		height:80%;
		padding-top:10px;		
	}
	#vc_vid_player{
		width:100%;
		height:160px;
	}
	
	#vc_title{
		margin-bottom:15px;
	}
	#ft{
		
	}
	#vc_video_info{
		font-size:18px;
		padding-top:4px;
		padding-bottom:4px;
	}
	#resolution{
		font-size:18px;
		padding-top:10px;
		padding-bottom:10px;
		color:white;
		width:60%;
	}		
	#vc_vid{
		overflow:hidden;
		position:relative;
		white-space: nowrap;  
		float:left;
		text-overflow: ellipsis;
		font-size:24px;
		background:#373737;
		width:440px;
		height:auto;
		border:2px solid #949392;
	}
	#vc_buttons{
		overflow:hidden;
		position:absolute;
		left:77.5%;
		top:100px;
		width:130px;
		height:auto;
	}
}