#video {
	xborder:5px solid lime;
	xposition:relative;
	xoverflow:hidden;
	xposition:absolute;

	xmin-width:100%;
	xmin-height:100%;

	min-width:100%;
	min-height:100%;

	xwidth:500px;
	xheight:500px;
	
	xheight:100%;

	display: flex;
	justify-content: center;
	align-items: center;

	margin:auto;
	transform-origin: center!important;
}

#video.hidden {
	transform: translateY(-100vh);
	
}


#player-elem  {
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;

	margin:auto;
	transform-origin: center!important;
}

#player-elem.hidden  {
	opacity:0;
}

.video-info-cont {
	xborder:1px solid lime;
	padding: 0px 10px 5px 10px;
	display: flex;
	xflex-direction: column;
	justify-content: start;
	align-items: start;

}

.row-container {
	xborder:1px solid lime;
	width:100%;
	display: flex;
	justify-content: start;
	align-items: center;
	margin-right:5px;
	font-size:0.8em;
	width:50%;
	overflow:hidden;
}

.row-container > .label {
	xborder:1px solid lime;
	display: flex;
	justify-content: end;
	align-items: center;
	xpadding: 0px 5px 0px 5px;
	font-family: Consolas, monospace;
	height:100%;
	flex:1;
	xpadding:5px 5px 5px 5px;
	margin-right:5px;
}


input#video-url {
	xborder:1px solid lime;
	border:none;
	border-radius:5px;
	padding:5px;
	background-color:rgba(0, 0, 0, 0.6);
	color:white;
	flex:1;
	color:rgb(0, 143, 232);
	font-size:0.8em;
}

input#video-url:active {
	xborder-color:lime;
} 


#video-name {
    xborder:1px solid lime;
	padding:5px;
    overflow:hidden;
    text-wrap: nowrap;
	font-size:0.8em;
}