:root {
	--back-darker: rgba(0,0,0,1);
	--back-dark: rgba(0,0,0,1);
	--back-medium: rgba(54, 50, 52,1);
	--back-light: rgba(30,30,30,1);
	--back-lighter: rgba(79, 77, 77,1);
	--white: rgba(255,255,255,1);


	--textopacity:1;
	--textsize:1em;
	--textmargintop:0%;
	--textmarginbottom:0%;
}

div.headerwrapper {justify-content: space-between;
	padding-left: 0}

div.headerwrapper {background: transparent;}
div.headerwrapper div.mainmenu {width:45px;}
div.pagedata {padding-top: 0;}
div.headerwrapper a.mainmenu {background-color: transparent;
	width:45px;}

/*https://stream.supertitles.gr/images/supertitles_sign_small.png*/

div.headerwrapper span.supertitles_title {
    display: block;
    width: 166px;
    background: url(/images/supertitles_text.png) no-repeat right 5px top 50%,
    url(/images/supertitles_sign_small.png) no-repeat left 5px top 50%;
    text-indent: -9000px;
    float: left;
}

div.pop  {background: transparent;}
div.pop.login  {width:95%;max-width: 400px;}

div.pop div.title {background: transparent;position: relative;
	padding:0;height:30px;
	margin:0 0 20px}
div.pop div.title span {background: #000;position: relative;z-index: 2;
	height:30px;display: inline-block;padding:0 5px 0 0;}
div.pop div.title:after {content:"";
	z-index: 1;
	position: absolute; display: block;left:0;right:0;
	bottom:13px;border-bottom:2px var(--forecolor) dotted;}



div.organization {display: flex;align-items: center;padding:0 5px 0 0;
	max-width:calc(100% - 170px)}
div.organization img {max-width:150px;max-height:50px;}

div.mainstream {height: 100vh;display: flex;width:100%;
	top:0;left:0;right:0;bottom:0;background: #000;
	align-items: center;position:absolute;z-index:1000;
	justify-content: center;padding:0;
	font-size:3vw;box-sizing: border-box;
	}

div.mainstream .text {text-align: center;font-family: Arial;
		color:#fff;font-size:var(--textsize);padding:20px;
		margin:0;opacity:var(--textopacity);
		margin-top:var(--textmargintop);
		margin-bottom:var(--textmarginbottom);
	}

div.mainstream .tools {position: absolute;z-index:1001;transition:.2s;
	transition:.2s;opacity:1;}
.idle div.mainstream .tools {opacity:0;}
div.mainstream .reset {bottom:10px;right:30px;font-size:16px;}


.stream div.maininputwrap ul {list-style:none;display:flex; flex-wrap: wrap;justify-content: center;}
.stream div.maininputwrap ul li {margin:0 0 10px;text-align: center;width:100%;box-sizing: border-box;}
.stream div.maininputwrap ul li a {color:var(--forecolor);font-weight: 600;}
.stream div.maininputwrap ul li a img {max-width:200px;max-height:75px;}

.stream div.maininputwrap p {text-align:center;}


.stream div.maininputwrap ul li a {display: block;text-align: center;
	width:100%;height:100px;display: flex;
	margin:10px auto 20px;box-sizing: border-box;
	align-items: center;justify-content: center;
	border:2px var(--forecolor) dotted;
	border-radius: 50px}
.stream div.maininputwrap ul li a:hover {background-color: rgb(138, 149, 155);
	border:2px rgb(138, 149, 155) solid;}



@media only screen and (min-width: 700px) {
	div.pop.login  {width:95%;max-width: 580px;}
	.stream .pickorganization div.maininputwrap ul li {width:50%;}
	.stream .pickproject div.maininputwrap ul li {width:100%;}
}





div.topbar {top:0;left:5%;right:5%;display: flex;justify-content: space-between;
	align-items: stretch;font-size:16px;}
div.topbar div.languages {}
div.topbar div.languages a {margin:0 10px 0 0;}
div.topbar div.languages a.selected {color:#fff;}

div.topbar div.exit {color:#fff;}

div.left {top:10%;bottom:10%;left:0;width:40px;}
div.right {top:10%;bottom:10%;right:0;text-align:right}
div.tools a.up {position: absolute;top:0;}
div.tools a.down {position: absolute;bottom:0;}
div.tools a.bigger {position: absolute;top:0;right:0;}
div.tools a.smaller {position: absolute;bottom:0;right:0;}

div.left {display: none;}
div.right {display: none;}
div.bottom {display: none;}

div.brightness {position: absolute;width:20%;left:40%;bottom:10px;}
div.brightness input.slider {width:100%;}
div.position {position: absolute;width:20px;left:10px;top:20%;height:60%;}
div.position input.slider_ {transform-origin:0;-webkit-appearance: slider-vertical;
	height:60vh;width:20px;}
div.size {position: absolute;width:20px;right:30px;top:20%;height:60%;}
div.size input.slider_ {transform-origin:0;
	-webkit-appearance: slider-vertical;
	height:60vh;width:20px;}
div.bottom {bottom:0;left:5%;right:5%;display: flex;justify-content: space-between;
	align-items: stretch;font-size:16px;}



div.panelwrapper {position: relative;width:95%}
div.panelwrapper div.panel {
	transform-origin: 0 0;
	position: absolute;top: 0;left: 0;right: 0;bottom:0;
	height: 100%;width: 100%;
	display: flex;align-items: center;
	flex-wrap: wrap;justify-content: center;text-align: center;
	box-sizing: border-box;background: transparent;}
div.panelwrapper div.panel>div {flex-basis:100%;}
div.panelwrapper div.panel.old {z-index: 1;opacity: 0;}
div.panelwrapper div.panel.new {z-index: 2;}

div.panelwrapper div.panel.fadein {
	animation: fadein .3s linear;
}
div.panelwrapper div.panel.fadeout {
	animation: fadeout .3s linear;
	opacity: 0;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeout {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}


div.panelwrapper span.hidden {display: none;}
div.panelwrapper span.placeholder {opacity: 0;}
div.panelwrapper span.role {text-transform: uppercase;font-weight: 700 !important;font-family: 'Arial Narrow' !important}
div.panelwrapper span.role:after {content: ":";}