/* https://css-tricks.com/centering-css-complete-guide/ */
@media (max-width: 400px) {
	html {
	  font-size: 50%;
	}
}

.clear { clear: both; }
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/*.centerhv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
*/
.centerdiv, .centerhv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.errormsg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px dotted #800000;
	box-shadow: 5px 5px 5px #888;
	padding: 1rem 1rem;
	color: #800000;
	font-size: 1rem;
}

.loginbox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	border: 1px solid #808080;
	box-shadow: 1px 1px 1px #000;
	padding: 1rem 1rem;
}

.msg.ok { color: #008000; }
.msg.wait { color: #D57B1B; }
.msg.error { color: #800000; }

.MSG.ok { color: #008000; }
.MSG.wait { color: #D57B1B; }
.MSG.error { color: #800000; }


body .bodycover { display: none;  opacity: 0.8; cursor: wait; z-index: 100; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #f5cfcf;}
body.wait .bodycover { display: block; }

div.dialogBack {position:fixed;top:0;left:0;width:100%;height:100%;
		background:rgba(51,37,23,.4);z-index:10000;}
div.dialogWrap {position:fixed;top:0;bottom:100%;left:0;width:100%;z-index:10001;height:100%;padding:200px 0 50px;}
div.dialogWrap.infopop {position:absolute;}
div.dialogWrap.user {position:absolute;}

div.dialogWrap a.close {padding:0;position:absolute;right:2px;top:2px;cursor:pointer;
	text-indent:-9000px;display:block;width:32px;height:32px;background-image:url(../_images/popup_close_but.png);background-position:50%;background-repeat:no-repeat;}
div.dialogWrap a.close:hover {cursor:pointer;background-image:url(../_images/popup_close_but_hover.png);}

div.dialogWrap.infopop  {padding:50px 0;}

div.dialogWrap .dialog {
	margin: 0 auto 150px;
	border-radius: 10px;
	background: #fff;
	padding: 10px;
	width: 100%;
	max-width: 400px;
}
div.dialogWrap.infopop .dialog {width:auto;}
div.dialogWrap .dialog .insideWrap {
	position:relative;border-radius:6px;
	-moz-box-shadow: 0 0 3px rgba(2,2,2,.5), inset 0 1px 0 rgba(255,255,255,.22);
	-webkit-box-shadow: 0 0 3px rgba(2,2,2,.5), inset 0 1px 0 rgba(255,255,255,.22);
	box-shadow: 0 0 3px rgba(2,2,2,.5), inset 0 1px 0 rgba(255,255,255,.22);
	background:#eee;font-size:13px;}
div.dialogWrap .dialog .insideWrap .inside {padding:30px 15px;color:#000;font-size:1rem;}
div.dialogWrap.infopop .dialog .inside {padding:15px 30px 30px;}
div.dialogWrap.infopop .dialog .insideWrap .inside {
	background: -moz-linear-gradient(180deg,rgba(46,121,191,0.4),rgba(0,0,0,0) 478px);
	background: -webkit-linear-gradient(180deg,rgba(46,121,191,0.4),rgba(0,0,0,0) 478px);
	background: -o-linear-gradient(180deg,rgba(46,121,191,0.4),rgba(0,0,0,0) 478px);
	background: -ms-linear-gradient(180deg,rgba(46,121,191,0.4),rgba(0,0,0,0) 478px);
	background: linear-gradient(180deg,rgba(46,121,191,0.4),rgba(0,0,0,0) 478px);
}

div.dialogWrap .dialog .inside h2 {margin:0 0 10px 0;padding:0;
	font-weight:700;
	font-size:18px;color:#685A4B;margin:10px 0 10px;}

div.dialogWrap .dialog .inside {font-size:14px;color:#000;font-weight:400;}
div.dialogWrap .dialog .inside p {margin:10px 0 10px;}

a.button {display:block;height:26px;position:relative;
	font-size:1rem;font-weight:700;
	text-shadow:1px 1px rgba(0,0,0,.23);text-decoration:none;
	text-align:center;line-height:26px;

	background: rgb(187,183,164);
	background: -moz-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -webkit-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -o-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -ms-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: linear-gradient(180deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	color: #fff;

	border-radius:3px;
	-webkit-box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.22);
	box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.22);
}
a.button.yellow {
	background: rgb(223, 178, 69);
	background: -moz-linear-gradient(90deg, rgb(223, 178, 69) 30%, rgb(205, 145, 33) 70%);
	background: -webkit-linear-gradient(90deg, rgb(223, 178, 69) 30%, rgb(205, 145, 33) 70%);
	background: -o-linear-gradient(90deg, rgb(223, 178, 69) 30%, rgb(205, 145, 33) 70%);
	background: -ms-linear-gradient(90deg, rgb(223, 178, 69) 30%, rgb(205, 145, 33) 70%);
	background: linear-gradient(180deg, rgb(223, 178, 69) 30%, rgb(205, 145, 33) 70%);
	color: #fff;
}

a.button.red {
	background: rgb(204,27,27);
	background: -moz-linear-gradient(90deg, rgb(204,27,27) 30%, rgb(174,14,14) 70%);
	background: -webkit-linear-gradient(90deg, rgb(204,27,27) 30%, rgb(174,14,14) 70%);
	background: -o-linear-gradient(90deg, rgb(204,27,27) 30%, rgb(174,14,14) 70%);
	background: -ms-linear-gradient(90deg, rgb(204,27,27) 30%, rgb(174,14,14) 70%);
	background: linear-gradient(180deg, rgb(204,27,27) 30%, rgb(174,14,14) 70%);
	color: #fff;
}

a.button.orange {
	background: rgb(226,132,50);
	background: -moz-linear-gradient(90deg, rgb(226,132,50) 30%, rgb(204,114,36) 70%);
	background: -webkit-linear-gradient(90deg, rgb(226,132,50) 30%, rgb(204,114,36) 70%);
	background: -o-linear-gradient(90deg, rgb(226,132,50) 30%, rgb(204,114,36) 70%);
	background: -ms-linear-gradient(90deg, rgb(226,132,50) 30%, rgb(204,114,36) 70%);
	background: linear-gradient(180deg, rgb(226,132,50) 30%, rgb(204,114,36) 70%);
	color: #fff;
}

a.button.green {
	background: rgb(226,132,50);
	background: -moz-linear-gradient(90deg, rgb(145,155,63) 30%, rgb(102,120,35) 70%);
	background: -webkit-linear-gradient(90deg, rgb(145,155,63) 30%, rgb(102,120,35) 70%);
	background: -o-linear-gradient(90deg, rgb(145,155,63) 30%, rgb(102,120,35) 70%);
	background: -ms-linear-gradient(90deg, rgb(145,155,63) 30%, rgb(102,120,35) 70%);
	background: linear-gradient(180deg, rgb(145,155,63) 30%, rgb(102,120,35) 70%);
	color: #fff;
}

a.button.grey {
	background: rgb(187,183,164);
	background: -moz-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -webkit-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -o-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: -ms-linear-gradient(90deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	background: linear-gradient(180deg, rgb(187,183,164) 30%, rgb(146, 142, 119) 70%);
	color: #fff;
}

a.button.blue {
	background: #0d6dab;
	-moz-linear-gradient(bottom, #0d6dab 0%, #1b8dd6 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, #0d6dab 0%, #1b8dd6 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, #0d6dab 0%, #1b8dd6 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, #0d6dab 0%, #1b8dd6 100%); /* gradient overlay */
	color: #fff;
}

a.button.white {
	color: black;
	background: rgb(255, 255, 255);
	background: -moz-linear-gradient(90deg, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
	background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
	background: -o-linear-gradient(90deg, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
	background: -ms-linear-gradient(90deg, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
	background: linear-gradient(180deg, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
	color: #000;
}

a.button.inlineblock {
	display: inline-block;
}

a.button.padded {
	padding: 0 15px;
}

a.button.margined {
	margin-left: 5px;
	margin-right: 5px;
}

div.dialog a.button {
	clear: none;
	margin-right: 15px;
	padding:0 15px;
	float: right;
}

div.dialog a.button.disabled {
	opacity: 0.5;
	cursor: no-drop;
}


a.btnish { text-decoration: none; font-size: 1.5rem; margin: 0 1rem; color: #800000/*#1EAEDB*/; display: inline-block; padding: 0.5rem; }
a.btnish.selected { font-weight: bold; text-decoration: underline; }
a.btnish:hover { background-color: #A00000/*#1EAEDB*/; color: #fff; }




/* from main.php */

	.stream_ticketservices_gr	h1 { font-size: 3rem; margin: 0; padding: 0; }
	.stream_ticketservices_gr	h2 { font-size: 2.5rem; margin: 0; padding: 0; }
	.stream_ticketservices_gr	h3 { font-size: 2rem; margin: 0; padding: 0;  }
	.stream_ticketservices_gr	h4 { font-size: 1.5rem; margin: 0; padding: 0; }
	.stream_ticketservices_gr	h5 { font-size: 1rem; margin: 0; padding: 0; }
	.stream_ticketservices_gr	h6 { font-size: 0.8rem; margin: 0; padding: 0; }

	.stream_ticketservices_gr .stream_title { color: #800000; font-weight: 400;}
	.stream_ticketservices_gr .stream_time_info { color: #800000; margin: 1rem 0; }
	.stream_ticketservices_gr .stream_time_info b { font-weight: 400; }

	.whenstreamselected { display: none; }
	.whennostreamselected { display: none; }

	.streamselected .whenstreamselected { display: block; }
	.streamselected .whennostreamselected { display: none; }

	.nostreamselected .whenstreamselected { display: none; }
	.nostreamselected .whennostreamselected { display: block; }

	.pagediv { display: none; }
	 .stream_ticketservices_gr .pagediv { margin-top: 2rem; }

	 .pagediv { justify-content: center; }

	.stream_ticketservices_gr .pagediv.pagediv_general_title { display: block; }
	.pagediv.pagediv_text { display: block; }
	.pagediv.pagediv_ticketsurl { display: block; }
	.haserror .pagediv.pagediv_general_title { display: none; }

	.waitcheckin .pagediv.pagediv_waitcheckin { display: flex; }
	.entercode .pagediv.pagediv_formcode { display: flex; }
	.checkingcode .pagediv.pagediv_formcode { display: flex; }
	.codecheckfailed .pagediv.pagediv_formcode { display: flex; }
	.pickstream .pagediv.pagediv_formcode { display: flex; }
	.pickstream .pagediv.pagediv_pickstream { display: flex; }
	
	.viewing .pagediv.pagediv_unregister { display: flex; }
	.streamwaiting .pagediv.pagediv_unregister { display: flex; }
	
	.codeexpired .pagediv.pagediv_codeexpired { display: flex; } /* 10/12/2021 */
	.codeexpired .pagediv.pagediv_unregister { display: flex; }

	.canreuse_disabled .pagediv.pagediv_unregister { display: none !important; }

	.canreuse_disabled.viewing .pagediv.pagediv_leavecode { display: flex; }
	.canreuse_disabled.streamwaiting .pagediv.pagediv_leavecode { display: flex; }

	.streamwaiting .pagediv.pagediv_streamwaiting { display: flex; }
	.streamstopped .pagediv.pagediv_streamstopped { display: flex; }
	.checkinstopped .pagediv.pagediv_checkinstopped { display: flex; }

	.haserror .pagediv_error { display: block; }
	.stream_ticketservices_gr .haserror .pagediv_error { text-align: center; }

	.confirmcode .pagediv.pagediv_selectedcode { display: flex; }
	.confirmingcode .pagediv.pagediv_selectedcode { display: flex; }
	.viewing .pagediv.pagediv_viewing { display: block; }

	.stream_ticketservices_gr input.code { background-color: rgba(255,255,255,0); }

	.stream_ticketservices_gr .pagediv_pickstream { }
	.stream_ticketservices_gr .pagediv_pickstream h3 { font-size: 1.4rem; font-weight: bold; } 
	.stream_ticketservices_gr .pagediv_pickstream ul { padding: 0; margin: 1rem 0; list-style-type: none; }
	.stream_ticketservices_gr .pagediv_pickstream ul li { margin: 1rem 0; }
	.stream_ticketservices_gr .pagediv_pickstream ul li a { display: block; background-color: #f0f0f0; padding: 0.5rem; color: #0f0f0f; text-decoration: none;}
	.stream_ticketservices_gr .pagediv_pickstream ul li a:hover { background-color: #e0e0f0; }
	.stream_ticketservices_gr .pagediv_pickstream ul li a h4 { margin: 0; padding: 0; font-size: 1.6rem;}
	.stream_ticketservices_gr .pagediv_pickstream ul li a h5 { margin: 0; padding: 0; font-size: 1.2rem;}

	.stream_ticketservices_gr .pagediv_viewing {  }
	.pagediv_extrastreamdiv { display: block; }

	.stream_ticketservices_gr .pagediv_ticketsurl {  }
	.stream_ticketservices_gr .pagediv_ticketsurl > div { padding: 1rem; text-align: center;  }

	.stream_ticketservices_gr .times { margin-top: 2rem; }
	.stream_ticketservices_gr .timeleft {}
	.stream_ticketservices_gr .timeleft b { font-weight: normal; }

	.stream_ticketservices_gr .selectedcode_value { font-size: 2.5rem; font-weight: bold; }

	.viewingframe {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
	}

	.viewingframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.viewingbuttons { padding: 1rem; text-align: center;}

	.stream_ticketservices_gr body { background-color: #f0f0f0; }
	.stream_ticketservices_gr .maindiv { padding: 1rem; background-color: white;}

	.stream_ticketservices_gr .ifyouhavecode > div { padding: 1rem 0; }

	.fontsizenormal {  }
	.fontsizesmaller { font-size: 0.8em; }

	.stream_ticketservices_gr .pagediv.framed { 
	  background-color: #e0e0e0; border: 3px solid #c0c0c0; box-shadow: 3px 3px 3px #000; padding: 2rem; text-align: center;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  min-height: 40vh;
	  max-width: 80%;
	  margin: 0 auto;
	}
	.stream_ticketservices_gr .pagediv.framed input[type="text"] { background-color: #f0f0f0;}

	.stream_ticketservices_gr .embedhtmlselect_wrap { margin: 1rem auto; text-align: center; }

	.stream_ticketservices_gr div.pagediv_streamwaiting span.nowrap,
	.stream_ticketservices_gr div.pagediv_waitcheckin span.nowrap {white-space: nowrap}

	.confirmextrainfo { display: none; padding: 1rem; }
	.confirmextrainfo b.warn { color: #800000; }



	.streams_to_pick {
	  border: 1px solid #800000;
	  padding: 1rem; 
	  margin: 1rem auto;
	}

	.streams_to_pick > h3 {
	  text-align: center;
	}

	.streams_to_pick > h3 .code { 
	  font-weight: bold;
	}

	.streams_to_pick ul {
	  list-style-type: none;
	}

	.streams_to_pick ul li { 
	  margin: 1rem auto;
	}

	.streams_to_pick ul li a { 
	  color: #202020;
	  text-decoration: none;
	  display: block;
	  padding: 0.5rem;
	  box-shadow: 0px 0px 5px #000;
	}

	.streams_to_pick ul li a:hover {
	  background: #e0e0e0;
	}

	.streams_to_pick ul li a .title {
	  font-weight: bold;
	  font-size: 1.2em;
	  padding: 0; margin: 0;
	}

	.streams_to_pick ul li a .subtitle {
	  padding: 0; margin: 0;
	}

	.streams_to_pick ul li a .date {
	  font-weight: normal;
	  padding: 0; margin: 0.5rem 0 0 0;  
	}

	body > div.adminbtn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem 0;
	}
	body > div.adminbtn > a {
		color: #800000;
		margin: 0 1rem;
	}


/*
	                              ##                                 ###
	                              ##                                  ##
	  #####   ##   ##   #####   ######    #####   ### ##   ######     ##      ######  ##  ##    #####   ## ###
	 ##       ##   ##  ##         ##     ##   ##  ## # ##  ##   ##    ##     ##   ##  ##  ##   ##   ##  ###
	 ##       ##   ##   ####      ##     ##   ##  ## # ##  ##   ##    ##     ##   ##  ##  ##   #######  ##
	 ##       ##  ###      ##     ##     ##   ##  ## # ##  ##   ##    ##     ##  ###   #####   ##       ##
	  #####    ### ##  #####       ###    #####   ##   ##  ######    ####     ### ##      ##    #####   ##
	                                                       ##                          ####
	customplayer.inc.php
*/


	.customplayer { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 100; font-size: 10px; overflow: hidden;}

	@media only screen and (max-width: 480px)  {
		.customplayer .playerbar input.volume { display: none !important; }
		.customplayer .playerbar input.timeline { display: none !important; }
	}

	@media only screen and (max-width: 600px)  {
		.customplayer .playerbar input.volume { display: none !important; }
	}

	@media only screen and (max-width: 800px)  {
		.customplayer { font-size: 8px; }
		span.timetotal { display: none; }
		.customplayer .playerbottom { padding: 0.2em .5em .4em;/*height:289px;*/pointer-events: none;}
	}

	.customplayer .backpanel { 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 101;
	}

	.customplayer .backpanel .hourglass {
		display: none;
	}

	.buffering .customplayer .backpanel .hourglass {
		display: block;
	}

	.customplayer .backpanel .hourglass .waiting {
		width: 10em;
	}

	.customplayer .playerbar { z-index: 102; }
	.customplayer .playerbar:after { display: table; content: ""; clear: both; }

	.customplayer .playertop { position: absolute; top: 0; left: 0; right: 0; background-color: rgba(35,35,35,0.95); overflow-y: hidden; }
	.customplayer .playerbottom { position: absolute; bottom: 0; left: 0; right: 0; background:url(/images/gravity-icons/gradient_back.png) repeat-x transparent;background-position:0 100%;/*height:289px;*/pointer-events: none;background-size:100% 100%;}
	.customplayer .playerbottom * {	pointer-events: auto;}

	@media only screen and (min-width: 800px)  {
		.customplayer .playerbottom { padding: 0.2em 1em .8em;}
	}


	.customplayer .playertop { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; }
	.customplayer .playerbottom { display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: nowrap; }

	.customplayer .subtitlesbar {
		position: absolute;
		display:flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		line-height:1.2;
		left: 0;
		right: 0;
		bottom: 4rem;
		padding: 2rem 0 0.5rem;
		font-size: 1.5vw;
		text-align: center;
		/*color: #fff;
		text-shadow: 0px 0px 8px #000;*/

		/* https://css-tricks.com/adding-stroke-to-web-text/ */
		/*-webkit-text-stroke: 1px black;*/
	   color: #fff;
	   text-shadow:
	       3px 3px 0 #000,
	     -1px -1px 0 #000,  
	      1px -1px 0 #000,
	      -1px 1px 0 #000,
	       1px 1px 0 #000;
	       /*text-shadow:0 0 6px rgba(0,0,0,1);*/
	}
	.customplayer .subtitlesbar span {
		text-shadow:2px 2px 4px rgb(0 0 0), -2px -2px 4px rgb(0 0 0), -2px 2px 4px rgb(0 0 0), 2px -2px 4px rgb(0 0 0);
		/*background:rgba(0,0,0,.8);background: rgba(0,0,0,.5);*/
    	padding: 1px 5px;
    	font-size:1.2em;}
	.customplayer .subtitlesbar span.d {flex-basis: 100%;background:none;height:0;padding: 0;}
	.customplayer .subtitlesbar span h4 {font-weight: 600;display: inline;font-size: 0.92em;
    padding-right: 5px;}
	.customplayer .subtitlesbar span em {font-style:normal;font-weight:inherit;opacity:0;}
	.customplayer .subtitlesbar span q {quotes: none;color: rgba(255, 253, 194);font-style: italic;}

	.customplayer .subtitlesbar span img {max-width:40vw;}

	/* https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide#presentation_differences */
	#viewingframe:-webkit-full-screen {
	  width: 100%;
	  height: 100%;
	}

	#viewingframe:fullscreen {
		padding-bottom: 0;
		width: 100%;
		height: 100%;
	}

	.customplayer .playerbar .pbtn {
		height:30px;width:34px;display:flex;align-items: center;justify-content:center;text-align: 	center;
		/*display: block; *//* none */
		margin: 0 0px;
		padding: 0;
		background-color: transparent;
		color: #000;
		text-decoration: none;
		/*box-shadow: 3px 3px 3px #000;*/
	}

	.customplayer .playerbar input.volume {
		display: block;
		width: 8em;
		margin: 0.5em 0;
	}

	.customplayer .playerbar input.timeline {
		display: block;
		width: 5em;
		margin: 0.5em 0.5em;
		flex-grow: 5;
	}

	.customplayer .playerbar .range_holder span {
		color: #fff;
		font-size:12px;
		font-weight: 700;
		text-shadow: 0 0 3px rgba(0,0,0,.29);
	}
	.customplayer .playerbar .timecurrent {
		margin-left: 1em;
	}

	.customplayer .playerbar .timetotal { 
		margin-right: 1em;
	}

	.customplayer .playerbar .pbtn:hover {
		/*background-color: #F7E6E6;*/
	}

	.customplayer .playerbar .pbtn.btnplay {
		display: block;
	}

	.customplayer .playerbar .pbtn.btnpause {
		display: none;
	}

	.playing .customplayer .playerbar .pbtn.btnplay {
		display: none;
	}
	.playing .customplayer .playerbar .pbtn.btnpause {
		display: block;
	}

	.paused .customplayer .playerbar .pbtn.btnpause {
		display: none;
	}
	.paused .customplayer .playerbar .pbtn.btnplay {
		display: block;
	}

	.playpausewait .customplayer .playerbar .pbtn {
		opacity: 0.1;
		cursor: wait;
	}

	.customplayer .playerbar .pbtn.btnsubs {
		display: none;
		margin-right:7px;
	}
	.subsavail .customplayer .playerbar .pbtn.btnsubs {
		display: block;
	}
	.customplayer .playerbar .pbtn.btnsubs  img.on {display:none;}
	.customplayer .playerbar .pbtn.btnsubs  img.off {display:block;}
	.subselected .customplayer .playerbar .pbtn.btnsubs  img.on {display:block;}
	.subselected .customplayer .playerbar .pbtn.btnsubs  img.off {display:none;}


	.customplayer .playerbar .pbtn.volume {
		display: block;
		margin-right:3px;
	}

	.customplayer .playerbar .pbtn.btnfullscreen {
		display: block;
		margin-left: auto;
		/*margin-right: 1em;*/
	}
	.customplayer .playerbar .pbtn.btnfullscreen .max {display:block;}
	.customplayer .playerbar .pbtn.btnfullscreen .min {display:none;}
	.isfullscreen .customplayer .playerbar .pbtn.btnfullscreen .max {display:none;}
	.isfullscreen .customplayer .playerbar .pbtn.btnfullscreen .min {display:block;}


	.customplayer .playerbar .pbtn img {
		/*width: 2em;
		height: 2em;*/
		vertical-align: middle;
	}

	.iconquality {
		margin: 0.5em 0;
	}

	.iconquality img {
		width: 2em;
		height: 2em;
		vertical-align: middle;
	}

	.customplayer .playerbar .pbtn.btntogglemuted {
	}

	.customplayer .playerbar .widevolumecontrols {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 2em;
		margin-left: 2em;
	}

	#viewingframe.muted .customplayer .playerbar .pbtn.btntogglemuted {
		position: relative;
		top: 2px;
		left: 2px;
		background-color: #a0a0a0;
		box-shadow: 0px 0px 0px #000;
	}

	.customplayer .playerbar .leftgroup {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.customplayer .playerbar .range_holder {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		line-height: 30px;
		flex-grow:5;
	}


	.customplayer .playerbar .rightgroup {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-left: auto;
		margin-right: 0em;
	}

	.customplayer .playerbar .quality { 
		margin: 0.5em 1em 0.5em 0em;
		background-color: #303030;
		color: #a0a0a0;
		padding: 2px 4px;
		font-size: 12px;
		height: auto;
	}

	.playing .customplayer .playerbar {
	  visibility: hidden;height:0;
	  opacity: 0;
	  transition: visibility 0.5s, opacity 0.5s linear;
	}

	.muted .customplayer .playertop {
		visibility: visible;
		opacity: 1;
		height: auto;
	}

	.paused .customplayer .playerbar {
	  visibility: visible;
	  height:auto;
	  opacity: 1;
	}

	.hovered .customplayer .playerbar {
	  visibility: visible;
	  opacity: 1;
	  height:auto;
	}

	.customplayer .playerbar:hover {
	  visibility: visible !important;
	  opacity: 1 !important;
	  height:auto;
	}

	.playertop .aboutunmute {
		display: none;
		padding: 0.5em 5em;
		color: #fff;
		/*background-color: #909090;*/
	}

	.warntounmute .playertop .aboutunmute {
		display: block;
	}

	.playertop .aboutunmute a.clicktounmute {
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
	}

	.playertop .aboutunmute a.stopwarningtounmute {
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
		margin-left: 2em;
	}

	.muted .btntogglemuted  {
	  animation: blinker 1s linear infinite;
	}

	@keyframes blinker {
	  50% {
	    opacity: 0;
	  }
	}

	div.playerinfo {
		text-align: center;
		margin: 1rem auto;
		width: 80%;
		max-width: 600px;
		padding: 1rem;
		border: 3px solid #a0a0a0;

	}

	div.playerinfo .selectedplayername {
		display: inline-block;
	}

	div.playerinfo a { color: #404040; text-decoration: underline; }
	div.playerinfo a:hover { color: #800000; text-decoration: underline; }

	a.btnswitchplayer { color: #404040; display: inline-block; }
	a.btnswitchplayer:hover { color: #800000;  }
	a.btnswitchplayer span { text-decoration: none; }

	div.more { display: none; position: relative; padding: 0.5rem; border: 1px dotted #808080; margin: 1rem 0.5rem; }
	div.more.visible { display: block; }
	div.more a.closemore { position: absolute; top: 2px; right: 2px; display: block; color: #800000; }

	.customplayer .popbar { 
		position: relative;	
	}

	.customplayer .popbar .btntogglesubbar{ 
		display: block;	
	}

	.customplayer .popbar .poppedcontent { 
		position: absolute;
		bottom: 100%;
	    overflow: hidden;
	    white-space: nowrap;

		/*transition: opacity 1s ease-out;
		opacity: 0;
		height: 0;*/
		display: none;
	}
	.customplayer .popbar .poppedcontent h3 {
		height:43px;line-height:43px;
		font-size:13px;color:#fff;font-weight:600;letter-spacing:0.65px;
		border-bottom:1px solid rgba(255,255,255,.27);
		padding:0 10px;

}

	.customplayer .popbar.poppedbyclick .poppedcontent {
		/*		opacity: 1;
				height: auto;*/
		display: block;
		opacity: .95;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		-moz-background-clip: padding;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		background-color: rgba(35,35,35,.95);

	}

	.customplayer .popbar.poppedbyhover .poppedcontent {
		/*		opacity: 1;
				height: auto;*/
		display: block;
		opacity: .95;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		-moz-background-clip: padding;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		background-color: rgba(35,35,35,.95);

	}

	.customplayer .popbar .btnpopcontent {

	}

	.customplayer .popbar.poppedbyclick .btnpopcontent {
		background-color: rgba(35,35,35,.95);
	}

	.customplayer .rightgroup .popbar .poppedcontent {
		/* ώστε να μην βγαίνει δεξιά από το parent παράθυρο */
		right: 0;
	}


	.customplayer .minivolumecontrols {
		display: none;
		/*margin-right: 1em;
		margin-left: 1em;*/
	}
	
	.customplayer .minivolumecontrols .volumepanelwrap {
		padding: 0.2em;
	}

	.customplayer.use_minivolumecontrols .minivolumecontrols {
		display: block;
	}

	.customplayer.use_minivolumecontrols .widevolumecontrols {
		display: none;
	}

	.customplayer .minivolumecontrols .volumepanelwrap .volumesliderpanel {
		padding: 0.2em;
	 	display: flex;
	 	flex-direction: row;
	 	align-items: center;
  }

	.customplayer .minivolumecontrols .volumepanelwrap input.volumeslider {
	 	display: block;
	 	width: 8em;
	 	margin: 0.5em 0;
	}

	.customplayer .minivolumecontrols .btnmuteunmute img.whennotmuted { display: inline; }
	.customplayer .minivolumecontrols .btnmuteunmute img.whenmuted { display: none; }

	.muted .customplayer .minivolumecontrols .btnmuteunmute img.whennotmuted { display: none; }
	.muted .customplayer .minivolumecontrols .btnmuteunmute img.whenmuted { display: inline; }


	.customplayer .settingscontrols {
		display: none;
		/*margin-right: 1em;
		margin-left: 1em;*/
	}

	.customplayer.use_minisettingspanel .settingscontrols {
		display: block;
	}

	.customplayer.use_minisettingspanel select.quality {
		display: none;
	}


	.customplayer .optionslist {display:flex;flex-wrap:wrap;padding:0 0 15px;}
	.customplayer .optionslist .title {width:100%;box-sizing: border-box;
			height:43px;line-height:43px;
			font-size:13px;color:#fff;font-weight:600;letter-spacing:0.65px;
			border-bottom:1px solid rgba(255,255,255,.27);
			padding:0 16px;margin:0 0 5px;
	}
	.customplayer .optionslist a {display:block;width:100%;box-sizing: border-box;padding:0 18px 0 45px;text-decoration:none;
		color: #929292;
		font-size: 13px;
		font-weight: 600;
		line-height: 34px;
	}
	.customplayer .optionslist a.selected {color:#fff;background:url(/images/gravity-icons/optionslist_check.png) no-repeat 18px 50%;}
	.customplayer .optionslist a:hover {color:#fff;}


	@media only screen and (max-width: 790px)  {
		.customplayer .optionslist {display:flex;flex-wrap:wrap;padding:0 0 5px;}
		.customplayer .optionslist .title {line-height:25px;height:25px;}
		.customplayer .optionslist a {line-height:20px;}
	}

	.layeredmessage_shaddow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.8; z-index: 1001; }
	.layeredmessage_wrap    { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1002; font-size: 1rem; }
	.layeredmessage         { padding: 1rem; background: #fff; color: #000; font-size: 2rem; text-align: center; width: auto; min-width: 200px; max-width: 800px; box-shadow: 2px 2px 4px #000; border: 3px solid #a0a0a0; }
	.layeredmessage_text    { padding: 1rem; background-color: #fff; color: #000; min-width: 10rem;  }
	.layeredmessage_buttons { margin-top: 2rem; padding: 1rem; display: flex; justify-content: center; align-items: center; }
	.layeredmessage_buttons button { font-size: 1.5rem; padding: 1rem 2rem; border: 1px solid #000; border-radius: 4px; min-width: 10rem; }