: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);
	}

/* ============================================================================
   General Tools Styling
   ============================================================================ */

div.mainstream .tools {
	position: absolute;
	z-index: 1001;
	transition: all 0.3s ease;
	opacity: 1;
}

.idle div.mainstream .tools {
	opacity: 0;
	pointer-events: none;
}


.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%;}
}





/* ============================================================================
   Topbar Tools - Modern Glassmorphism Design
   ============================================================================ */

div.topbar {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	z-index: 1002;
	gap: 0.75rem;
}

/* Languages Container */
div.topbar div.languages {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	padding: 0.4rem 0.6rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}

div.topbar div.languages:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Language Switch Buttons */
div.topbar div.languages a.changelang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.25rem;
	min-width: 70px;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	border-radius: 100px;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	transition: all 0.3s ease;
	border: 1px solid transparent;
	white-space: nowrap;
}

div.topbar div.languages a.changelang:hover {
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

div.topbar div.languages a.changelang.selected {
	background: linear-gradient(135deg, #2563eb, #3b82f6);
	color: #ffffff;
	border-color: rgba(37, 99, 235, 0.5);
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

div.topbar div.languages a.changelang.selected:hover {
	background: linear-gradient(135deg, #1d4ed8, #2563eb);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Icons Container (Exit Button) */
div.topbar div.icons {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

div.topbar div.icons a.exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.2rem;
	background: rgba(239, 68, 68, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fca5a5;
	text-decoration: none;
	border-radius: 100px;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all 0.3s ease;
	border: 1px solid rgba(239, 68, 68, 0.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

div.topbar div.icons a.exit:hover {
	background: rgba(239, 68, 68, 0.25);
	color: #ffffff;
	border-color: rgba(239, 68, 68, 0.5);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

div.topbar div.icons a.exit:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* Reset Link in Bottom Right */
div.mainstream .reset {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-size: 13px;
	z-index: 1002;
}

div.mainstream .reset a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.9rem;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

div.mainstream .reset a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.8);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

div.mainstream .reset a:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive Design - Landscape Mobile & Tablets optimized */
@media (max-width: 768px) {
	div.topbar {
		top: 10px;
		gap: 0.5rem;
	}
	
	div.topbar div.languages {
		padding: 0.3rem 0.5rem;
	}
	
	div.topbar div.languages a.changelang {
		min-width: 60px;
		font-size: 0.8rem;
		padding: 0.4rem 0.9rem;
	}
	
	div.topbar div.icons a.exit {
		font-size: 0.75rem;
		padding: 0.5rem 1rem;
	}
	
	div.mainstream .reset {
		bottom: 10px;
		right: 10px;
	}
	
	div.mainstream .reset a {
		font-size: 0.7rem;
		padding: 0.35rem 0.75rem;
	}
}

/* Landscape Mobile Optimization */
@media (max-width: 896px) and (max-height: 450px) {
	div.topbar {
		top: 8px;
		gap: 0.4rem;
	}
	
	div.topbar div.languages {
		padding: 0.25rem 0.4rem;
	}
	
	div.topbar div.languages a.changelang {
		min-width: 50px;
		font-size: 0.75rem;
		padding: 0.35rem 0.8rem;
	}
	
	div.topbar div.icons a.exit {
		font-size: 0.7rem;
		padding: 0.4rem 0.9rem;
	}
	
	div.mainstream .reset {
		bottom: 8px;
		right: 8px;
	}
	
	div.mainstream .reset a {
		font-size: 0.65rem;
		padding: 0.3rem 0.6rem;
	}
}

/* Smartglasses and Very Small Screens */
@media (max-width: 640px) {
	div.topbar {
		top: 6px;
		gap: 0.3rem;
	}
	
	div.topbar div.languages {
		padding: 0.2rem 0.3rem;
		gap: 0.3rem;
	}
	
	div.topbar div.languages a.changelang {
		min-width: 45px;
		font-size: 0.7rem;
		padding: 0.3rem 0.7rem;
	}
	
	div.topbar div.icons a.exit {
		font-size: 0.65rem;
		padding: 0.35rem 0.8rem;
	}
}

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;}

/* ============================================================================
   Sliders and Control Panels
   ============================================================================ */

/* Brightness Control */
div.brightness {
	position: absolute;
	width: 280px;
	max-width: 30%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50px;
	padding: 0.8rem 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

div.brightness input.slider {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
	border-radius: 10px;
	outline: none;
	cursor: pointer;
}

div.brightness input.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
}

div.brightness input.slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.6),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

div.brightness input.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
}

div.brightness input.slider::-moz-range-thumb:hover {
	transform: scale(1.15);
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.6),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Position Control (Vertical) */
div.position {
	position: absolute;
	width: 50px;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	height: 280px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50px;
	padding: 1.5rem 0.8rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

div.position input.slider_ {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	height: 100%;
	width: 6px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
	border-radius: 10px;
	outline: none;
	cursor: pointer;
	writing-mode: bt-lr;
}

/* Size Control (Vertical) */
div.size {
	position: absolute;
	width: 50px;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	height: 280px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50px;
	padding: 1.5rem 0.8rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

div.size input.slider_ {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	height: 100%;
	width: 6px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
	border-radius: 10px;
	outline: none;
	cursor: pointer;
	writing-mode: bt-lr;
}

/* Bottom Bar (if used) */
div.bottom {
	position: absolute;
	bottom: 0;
	left: 5%;
	right: 5%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	div.brightness {
		max-width: 60%;
		bottom: 15px;
		padding: 0.6rem 1rem;
	}
	
	div.position,
	div.size {
		width: 40px;
		height: 200px;
		padding: 1rem 0.5rem;
	}
	
	div.position {
		left: 10px;
	}
	
	div.size {
		right: 10px;
	}
}



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: ":";}


/* ============================================================================
   Settings Bottom Bar - All Options Side by Side
   ============================================================================ */

.settings-bar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	z-index: 1002;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 0.75rem 1.5rem;
	/* background: rgba(20, 20, 20, 0.95); */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	/* border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50px 50px 0 0; */
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
}

.settings-group-wrapper {
	display: flex;
	align-items: center;
	padding:10px;
	background: rgba(20, 20, 20, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 25px;
}

.settings-group {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* All Settings Buttons */
.settings-btn {
	min-width: 45px;
	padding: 0.5rem 0.9rem;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s ease;
	outline: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.settings-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.settings-btn.active {
	background: linear-gradient(135deg, #2563eb, #3b82f6);
	color: #ffffff;
	border-color: rgba(37, 99, 235, 0.5);
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.settings-btn.active:hover {
	background: linear-gradient(135deg, #1d4ed8, #2563eb);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Hide old sliders (they're now hidden inputs) */
div.brightness.tools,
div.position.tools,
div.size.tools {
	display: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.settings-bar {
		padding: 0.6rem 1rem;
		border-radius: 40px 40px 0 0;
		gap: 1rem;
	}
	
	.settings-group {
		gap: 0.3rem;
	}
	
	.settings-btn {
		min-width: 40px;
		padding: 0.45rem 0.75rem;
		font-size: 0.75rem;
	}
}

/* Landscape Mobile */
@media (max-width: 896px) and (max-height: 450px) {
	.settings-bar {
		padding: 0.5rem 0.9rem;
		gap: 0.9rem;
	}
	
	.settings-group {
		gap: 0.25rem;
	}
	
	.settings-btn {
		min-width: 38px;
		padding: 0.4rem 0.7rem;
		font-size: 0.7rem;
	}
}

/* Smartglasses and Very Small Screens */
@media (max-width: 640px) {
	.settings-bar {
		padding: 0.4rem 0.75rem;
		gap: 0.75rem;
	}
	
	.settings-group {
		gap: 0.2rem;
	}
	
	.settings-btn {
		min-width: 35px;
		padding: 0.35rem 0.6rem;
		font-size: 0.65rem;
	}
}