/* html5reset.css ============================================================================= */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
    margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}



/*@font-face {font-family: 'GG';font-weight:950;src: url(./fonts/gothamgreek/GothamGreek-Ultra.otf);}
	@font-face {font-family: 'GG';font-weight:950;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-UltraItalic.otf);}
@font-face {font-family: 'GG';font-weight:900;src: url(./fonts/gothamgreek/GothamGreek-Black.otf);}
	@font-face {font-family: 'GG';font-weight:900;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-BlackItalic.otf);}
@font-face {font-family: 'GG';font-weight:700;src: url(./fonts/gothamgreek/GothamGreek-Bold.otf);}
	@font-face {font-family: 'GG';font-weight:700;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-BoldItalic.otf);}
@font-face {font-family: 'GG';font-weight:500;src: url(./fonts/gothamgreek/GothamGreek-Medium.otf);}
	@font-face {font-family: 'GG';font-weight:500;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-MediumItalic.otf);}
@font-face {font-family: 'GG';font-weight:400;src: url(./fonts/gothamgreek/GothamGreek-Book.otf);}
	@font-face {font-family: 'GG';font-weight:400;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-BookItalic.otf);}
@font-face {font-family: 'GG';font-weight:300;src: url(./fonts/gothamgreek/GothamGreek-Light.otf);}
	@font-face {font-family: 'GG';font-weight:300;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-LightItalic.otf);}
@font-face {font-family: 'GG';font-weight:200;src: url(./fonts/gothamgreek/GothamGreek-XLight.otf);}
	@font-face {font-family: 'GG';font-weight:200;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-XLightItalic.otf);}
@font-face {font-family: 'GG';font-weight:100;src: url(./fonts/gothamgreek/GothamGreek-Thin.otf);}
	@font-face {font-family: 'GG';font-weight:100;font-style: italic;src: url(./fonts/gothamgreek/GothamGreek-ThinItalic.otf);}
*/


@font-face {font-family: 'GG';font-weight:800;src: url(./fonts/Manrope/Manrope-ExtraBold.ttf);}
@font-face {font-family: 'GG';font-weight:700;src: url(./fonts/Manrope/Manrope-Bold.ttf);}
@font-face {font-family: 'GG';font-weight:600;src: url(./fonts/Manrope/Manrope-SemiBold.ttf);}
@font-face {font-family: 'GG';font-weight:500;src: url(./fonts/Manrope/Manrope-Medium.ttf);}
@font-face {font-family: 'GG';font-weight:400;src: url(./fonts/Manrope/Manrope-Regular.ttf);}
@font-face {font-family: 'GG';font-weight:300;src: url(./fonts/Manrope/Manrope-Light.ttf);}
@font-face {font-family: 'GG';font-weight:200;src: url(./fonts/Manrope/Manrope-ExtraLight.ttf);}


html {height:100%;}



body {line-height: 1.3;font-family:'GG','Arial',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;font-size:16px;
	font-weight:400;background-color:var(--back-dark);height:100%;color:var(--forecolor);
	}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
b {font-weight:600;}
a {font-size: 100%;vertical-align: baseline;background: transparent;text-decoration:none;}
a:hover {text-decoration:underline;}
ins {background-color: #fff;color: #000;text-decoration: none;}
mark {background-color: #ff9;color: #000; font-style: italic;font-weight:bold;}
del {text-decoration:  line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;}
table {border-collapse: collapse;border-spacing: 0;}
hr {display: block;height: 1px;border: 0;   border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}
input, select {vertical-align: middle;font-family:'GG';}

/* BASIC PAGE SETUP ============================================================================= */
body { margin : 0 auto;padding : 0;font-weight:normal;text-align: left;}
button, input, select, textarea { color : #202020; }

/*  HEADINGS  ============================================================================= */
h1, h2, h3, h4, h5, h6 { font-weight:400;font-weight:400;margin-top: 0px;}
h1 { font-size :  1.7em;	margin-bottom : 0.2em;line-height : 1.3; }
h2 { font-size :  1.4em;	margin-bottom : 0.5em;margin-top : 0.5em;line-height : 1.2;}
h3 { font-size :  1.2em;	margin-bottom : 0.3em;line-height : 1.3; }
h4 { font-size :  1.1em;	margin-bottom : 0.5em;line-height : 1.25; }
h5 { font-size :  1em;		margin-bottom : 1.25em;}
h6 { font-size : 1em;	}


/*  TYPOGRAPHY  ============================================================================= */
p, ol, ul, dl, address { margin-bottom : .5em; font-size : 1em; /* 16 / 16 = 1 */ }
p {hyphens : auto;  }
ul, ol { margin :0; padding:0; }
li ul, li ol { margin : 0;font-size : 1em; /* 16 / 16 = 1 */ }
dl, dd { margin-bottom : 1.5em; }
dt { font-weight:400;font-weight:400; }
/*b, strong { font-weight:500; }*/
hr { display : block; margin : 1em 0; padding : 0;height : 1px; border : 0; border-top : 1px solid #ccc;}
small { font-size : 1em; /* 16 / 16 = 1 */ }
sub, sup { font-size : 75%; line-height : 0; position : relative; vertical-align : baseline; }
sup { top : -.5em; }
sub { bottom : -.25em; }
.subtext {	color: #000;	}

/* LINKS =============================================================================  */
/*a { color : #787200;}//-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;
	transition: all 0.3s ease;text-decoration: underline;}
*/
ul a {text-decoration:none;}
/*a span {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}*/
	/*a:visited { color : #ee3344; }*/
/*a:focus { color : rgb(0,0,0); }*/
a:hover, a:active { outline : 0; }
a#backtotop {position:fixed;z-index:100;bottom:1px;left:2%;
	background:url(/images/backtotop.png) no-repeat 50%;background-size:auto;
	width:60px;height:60px;text-indent:-9000px;}

div.alert_wrap {position: absolute;top: 0;left: 0;right: 0;
z-index: 9999;}
div.alert {width: 95%;max-width:400px;background: var(--back-dark);
	margin: 0 auto;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;
		padding: 10px 30px 10px 10px;position: relative;
		color: #fff;box-shadow: 0 0 30px rgba(0,0,0,1);}
div.alert h3 {text-align: center;font-size: 14px;}
div.alert a.close {position: absolute;top: 8px;right: 8px;
    display: block;
    width: 15px;
    height: 15px;
    background: url(/images/fancy_close.png) no-repeat 50%;
    text-indent: -9000px;}

/* IMAGES ============================================================================= */
img {
border : 0;}/*max-width: 100%;}*/

img.floatleft { float: left; margin: 0 10px 0 0; }
img.floatright { float: right; margin: 0 0 0 10px; }


/* TABLES ============================================================================= */
table { border-collapse : collapse;border-spacing : 0;width : 100%; }
th, td, caption { padding : 0; }
tfoot { font-style : italic; }
caption { background-color : transparent; }


/*  SECTIONS  ============================================================================= */
.section {clear: both;padding: 0px;margin: 0px;}

/*  CODE  ============================================================================= */
pre.code {padding: 0;margin: 0;font-family: monospace;white-space: pre-wrap;font-size: 1.1em;}
strong.code {font-weight:400;font-weight:400;font-family: monospace;font-size: 1.2em;}
div.sql {font-size:11px;padding:15px 5px;display:block;color:#f00;white-space: pre;}


/*  NOTES  ============================================================================= */
.note {position:relative;padding:1em 1.5em;margin: 0 0 1em 0;background: #fff;
	background: rgba(255, 255, 255, 0.5);overflow:hidden;}
.note:before {
	content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;
	border-color:transparent transparent #cccccc #cccccc;background:#cccccc;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	display:block; width:0; /* Firefox 3.0 damage limitation */}
.note.rounded {-webkit-border-radius:5px 0 5px 5px;-moz-border-radius:5px 0 5px 5px;border-radius:5px 0 5px 5px;}
.note.rounded:before {
	border-width:8px;border-color:#fff #fff transparent transparent;
	-webkit-border-bottom-left-radius:5px;-moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;}

/*  GLOBAL OBJECTS ============================================================================= */
.breaker { clear: both; }
.group:before,
.group:after {content:"";display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 (trigger hasLayout) */}
.floatleft{float: left;}
.floatright{float: right;}
*{ outline:none;}
a:focus {outline: none; }
div.clear {clear:both;height:0px;}
div.clearright {clear:right;height:0px;}
div.clearleft {clear:left;height:0px;}
span.icon {font-family:icons;}

/* VENDOR-SPECIFIC ============================================================================= */
html { -webkit-overflow-scrolling : touch; -webkit-tap-highlight-color : rgb(52,158,219);
	-webkit-text-size-adjust : 100%; -ms-text-size-adjust : 100%; }
.clearfix { zoom : 1; }
::-webkit-selection { background : #00354D; color : rgb(250,250,250); text-shadow : none; }
::-moz-selection { background : #00354D; color : rgb(250,250,250); text-shadow : none; }
::selection { background :#fff; color : rgb(0,0,0); text-shadow : none; }
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance : button; }
::-webkit-input-placeholder {font-size : .875em; line-height : 1.4; }
input:-moz-placeholder { font-size : .875em; line-height : 1.4; }
.ie7 img,.iem7 img { -ms-interpolation-mode : bicubic; }
input[type="checkbox"], input[type="radio"] { box-sizing : border-box; }
input[type="search"] { -webkit-box-sizing : content-box;-moz-box-sizing : content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { padding : 0;border : 0; }
p {/* http://www.w3.org/TR/css3-text/#hyphenation */-webkit-hyphens : auto;-webkit-hyphenate-character : "\2010";-webkit-hyphenate-limit-after : 1;
	-webkit-hyphenate-limit-before : 3;-moz-hyphens : auto; }

.contenteditble:focus {background-color:#080;color:#fff;}

input::selection {background: rgba(44, 41, 42,1);color: rgba(213, 211, 212,1)}
textarea::selection {background: rgba(44, 41, 42,1);color: rgba(213, 211, 212,1)}

:root {
	--box-shadow: 0 0 10px rgba(0,0,0,.3);


	--back-darker: rgba(42, 39, 40,1);
	--back-dark: rgba(47, 45, 45,1);
	--back-medium: rgba(54, 50, 52,1);
	--back-light: rgba(63, 59, 60,1);
	--back-lighter: rgba(79, 77, 77,1);


	--forecolor: rgba(213, 211, 212,1);
	--forecolor_50: rgba(213, 211, 212,.5);
	--forecolor_70: rgba(213, 211, 212,.7);
	--menucolor: rgba(213, 211, 212,1);
	--menucolor_50: rgba(213, 211, 212,.7);

	--bluelink: rgba(33, 174, 221,1);
	/*--bluelink: #1565C0;*/

	--previewFontSize: 12;
	--previewHeight: 56;

	--white: rgba(255,255,255,1);
	--white_30: rgba(255,255,255,.35);
	--white_60: rgba(255,255,255,.6);

	--black_30: rgba(0,0,0,.35);

	--active: rgba(40, 131, 40,1);
	--upcoming: rgba(1, 87, 155,1);
	--inactive: rgba(163, 51, 39,1);

	--blue_plain: rgba(50, 59, 64,1);
	--blue_plain_active: rgba(78, 104, 115,1);

	--radius: 5px;
	--alert:  rgba(249, 35, 114,1);
	--success: rgba(40, 131, 40,1);

}

body {padding-top: 54px;box-sizing: border-box;}
div.headerwrapper {height:54px;position:fixed;top:0;left:0;right:0;height:54px;
	background-color:var(--back-light);height:54px;z-index: 1000;
	display: flex;padding-left: 54px;align-items: stretch;
	justify-content: flex-start;}
	div.mainmenu {position: absolute;top: 0;left: 0;}
	div.headerwrapper a.mainmenu {display:block;width:54px;height: 54px;text-indent:-9000px;
		background:url(/images/supertitles_sign_small.png) no-repeat 50% var(--back-medium);
		float:left;}

	div.headerwrapper div.mainmenu ul {display: none;background-color: var(--back-medium);list-style: none;
		border: 1px solid var(--back-light);position: absolute}
	div.headerwrapper div.mainmenu>ul {position: absolute;left: 0;top: 100%;}
	div.headerwrapper div.mainmenu:hover>ul {display: block;}
	div.headerwrapper div.mainmenu ul li {position: relative;}
	div.headerwrapper div.mainmenu ul li a {display: block;line-height: 1.4;
			padding: 5px 40px 5px 30px;box-sizing: border-box;
			color: var(--menucolor_50);font-size: 14px;}
	div.headerwrapper div.mainmenu>ul li:hover>a {text-decoration: none;background-color:var(--back-light);color: var(--menucolor);}
	div.headerwrapper div.mainmenu>ul>li>ul {display: none;left: 97%;top: 3px;width: 200px;}
	div.headerwrapper div.mainmenu>ul>li:hover>ul {display: block;}

	div.headerwrapper div.mainmenu ul li.hasdialogue a::after{content: "...";}
	div.headerwrapper div.mainmenu ul li.hassub:hover::after {content: "⇨";
		position: absolute;right: 7px;top:calc(50% - 8.5px);height: 15px;}

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

	div.headerwrapper div.tools {height:54px;line-height: 54px;float:left;padding:0;}
	div.headerwrapper div.tools>div {height:54px;line-height: 54px;display:inline-block;}

	div.headerwrapper div.shortcutsWrap {position:relative;height:54px;line-height: 54px;float:right;padding:0;
		margin:0 20px 0 0 ;}
	div.headerwrapper div.shortcutsWrap a {color:rgba(236,236,236);font-size:12px;}
	div.headerwrapper div.shortcutsWrap:hover a {color:rgba(2,246,230);text-decoration: none}

	div.headerwrapper div.shortcutsWrap div.shortcuts {position:absolute;right:0;top:90%;display:none;
		z-index:3000;background-color:rgba(150,149,149,1);border-radius:5px;padding:10px;
		line-height:1.4;font-size:12px;width:450px;}
div.headerwrapper div.shortcutsWrap:hover div.shortcuts {display:block;}
		div.headerwrapper div.shortcutsWrap div.shortcuts ul {list-style:none;}
		div.headerwrapper div.shortcutsWrap div.shortcuts ul li {display:block;}
		div.headerwrapper div.shortcutsWrap div.shortcuts ul li label {font-weight:bold;padding-right:5px;
			color:#000;}

div.headerwrapper div.user {height: 54px;padding-right: 20px;
		margin-right: 0;margin-left: auto;
		display: flex;align-items: center;
		align-items: center;
		font-size: 12px;font-weight: 300;}
div.headerwrapper div.user>* {font-size: 11px;color: rgba(255,255,255,.5);font-style: italic;}
div.headerwrapper div.user>a {color: var(--bluelink);}

div.headerwrapper div.user>a.logout {display: block;
	text-indent: -9000px;height: 100%;width: 28px;background-repeat: no-repeat;
	background-position: 50%;margin: 0 2px;background-image: url(/images/header_exit.png);
	opacity: 0.38;}
div.headerwrapper div.user>a.logout:hover {opacity: 0.7;}


div.mainpage_wrap {display: flex;align-items: flex-start;justify-content: center;
	height: calc(100vh - 54px);
	padding-top: 80px;}
div.pop {display: block;border-radius: var(--radius);
	background-color: var(--back-medium);box-sizing: border-box;
	padding: 0;box-shadow: var(--box-shadow);}
div.pop.login {width: 320px;}
div.pop.reset {width: 320px;}
div.pop.register {width: 320px;}
div.pop div.title {border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	padding: 0 15px;height: 45px;background-color: var(--back-light);
	font-weight: 500;color: var(--forecolor);font-size: 16px;
	display: flex;align-items: center;
	justify-content: space-between;}
div.pop div.data {padding: 15px  15px 40px 15px;}
div.pop a.hidepopup {display: block;width: 20px;height: 20px;background: url(/images/fancy_close.png) no-repeat 50%;
	text-indent: -9000px;}
div.maininputwrap {}
form {font-size: 14px;}
form>div {display: flex;align-items: flex-start;justify-content: flex-start;
	margin-bottom: 4px;}

form>div label {width: 100px;display: flex;align-items: center;
	font-size:14px; ;}
form>div label:after {content: ":"}
form>div div.inputwrap:only-child {width:100%;margin-left: 0px;}
form>div label + div.inputwrap {width:calc(100% - 100px);margin-left: 15px;}
form>div div.static {width:calc(100% - 100px);margin-left: 15px;height: 25px;line-height: 25px;
	display: flex;align-items: center;}

form>div div.inputwrap>*{width:100%;border: 0;border-radius: 3px;
	margin-left: 15px;height: 25px;line-height: 25px;box-sizing: border-box;
	border: 0;margin: 0;}
form>div div.inputwrap input[type=checkbox] {width:auto;}

form>div div.inputwrap input,
form>div div.inputwrap select {font-size: 13px;}

form>div div.inputwrap table {width: 100%;}
form>div div.inputwrap table td {text-align: center;width: 20px;}
form>div div.inputwrap table td.timef {width: 100px;}
form>div div.inputwrap table td.timef input {width: 100%;text-align: center;}

form div.twodays {display: flex;align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 4px;height: auto !important;}
form div.twodays>div {width: 45%;}
form div.twodays input {width: 100%;}



form>div.buttons {display: flex;align-items: stretch;
	justify-content: flex-end;
	margin: 15px 0 15px;}
form>div.buttons>button {margin: 0 0 0 5px;
	border: 0;box-sizing: border-box;border-radius: 4px;
	height: 30px;line-height: 25px;background-color: var(--back-light);color: #fff;
	font-size: 13px;font-family: "GG";text-transform: uppercase;letter-spacing: 1.5px;
	box-shadow: 0 0 10px rgba(0,0,0,.3);cursor: pointer;}

form>div.buttons>button.submit {color: var(--bluelink)}
form>div.buttons>button:hover {box-shadow: none;}

form div.alert {color: var(--alert);}


div.empty {position: fixed;top: 0;z-index: 50;
	overflow-y: scroll;top: 0;bottom: 0;left: 0;right: 0;height:100%;width: 100%;
	box-sizing: border-box;padding:80px 40px;display: none;
	align-items: flex-start;justify-content: center;
	backdrop-filter: blur(6px);
}
div.empty.on {display: flex;}
div.empty.on>* {filter: none;z-index: 15;}


div.pop.add {max-width: 420px;width: 95%}

/*a.hidepopup*/

/*div.empty.on:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;
	background: rgba(0,0,0,.6);
	z-index: 10;
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}
*/
div.empty div.add {max-width:400px;margin}

a {color: var(--bluelink);font-weight: 300;}

div.actions {display: flex;align-items: flex-start;justify-content: space-between;
	padding-top: 30px;font-size: 13px;}
div.actions>a {margin: 0 5px;}
form.mainform>div.error {width: 100%;color: var(--alert);justify-content: flex-end;padding: 10px 0; }
form.mainform>div.success {padding: 5px;background-color: var(--success);display: none;}
form.mainform>div.error:empty {padding: 0px; }


.tools .switch {padding:11px 0;}
input.checkbox  {display:none;}
input.checkbox + label {margin:0 5px;position:relative;
	display:block;cursor:pointer;
	padding:0 3px 0 5px;font-size:12px;color:#969595;}
input.checkbox + label span {width:13px;height:13px;border-radius:1px;margin:0 0 0 4px;
	display:inline-block;vertical-align:middle;border:1px solid #969595;color:#fff;padding:0;}
input.checkbox + label:hover {color:#fff;}

input.checkbox:checked + label {color:#fff;}
input.checkbox:checked + label span:before {content:"✔";
	line-height: 1;
    display: inline-block;
    vertical-align: top;}

.playing .tools .dragpanels.switch {opacity:0.5;pointer-events: none;}


div.pagedata {width: 95%;/*max-width: 1500px;*/margin: 0 auto;padding-top: 50px;}





div.pageheader {display: flex;align-items: center;justify-content: flex-end;
	/*padding-bottom: 10px;*/
	border-bottom: 1px solid var(--back-light);
	overflow-y: hidden;
	margin-bottom: 30px;box-sizing: border-box;height: 40px;}


div.pageheader>* {}
div.pageheader>div.title {margin-right: auto;display: flex;align-items: center;justify-content: flex-end;
	margin-left: 0;line-height: 1;}
div.pageheader>div.title>* {margin-right: 10px;}

div.pageheader>div.opt_wrap {margin-left: auto;display: flex;align-items: center;justify-content: flex-end;}
div.pageheader>div.opt_wrap>* {margin-left: 10px;}
div.pageheader h1 {text-transform: uppercase;font-size: 16px;font-weight: 700;
	letter-spacing: -.5px;margin: 0 10px 0 0;}
div.pageheader h1 a {text-transform: uppercase;font-size: 16px;font-weight: 700;
	letter-spacing: -.5px;color: inherit;}

div.pageheader h2 {font-size: 15px;font-weight: 300;
	letter-spacing: -.5px;margin: 0 10px 0 0;}
div.pageheader h2:before {content:"> "}
div.pageheader h2 a {font-weight:500;}

div.headerwrapper div.pageheader {margin-bottom: 0;height: 54px;
    justify-content: flex-start;}
div.headerwrapper div.pageheader div.title {margin-right: 30px;}
div.headerwrapper div.pageheader h2:before {content:""}
div.headerwrapper div.pageheader h2 b {color: var(--bluelink);}
div.headerwrapper div.pageheader>div.opt_wrap {margin-left: 0;}


div.pageheader a.addnew {font-size: 14px;font-weight: 300;
	letter-spacing: -.5px;margin: 0 0 0 0;color: var(--bluelink);}
div.pageheader a.addnew:before {content: "+ ";}


div.pageheader ul.pagemenu {list-style: none;display: flex;
	margin: 0 0 0 10px;padding: 0;align-items: center;
	justify-content: flex-start;}
div.pageheader ul.pagemenu li {margin-right: 10px;}
div.pageheader ul.pagemenu li a {display: block;text-transform: uppercase;
	font-weight: 400;padding: 0 4px;}
div.pageheader ul.pagemenu li a:hover,
div.pageheader ul.pagemenu li.selected a{text-decoration: none;
	background-color: var(--bluelink);color: var(--white);
	border-radius: 3px;}

div.pageheader form {background-color: var(--back-light);
	margin:0 0 0 auto;
	height: 32px;border-radius:16px;color: var(--white_60);
	padding: 0 10px 0 10px;display: flex;align-items: center;}
div.pageheader form input {background: transparent;
		font-size: 13px;color: var(--white_60);font-family:'GG';
		border: 0;height: 28px;line-height: 30px;
		width: 100px;}
div.pageheader form button {border: 0; background: transparent;
background: url(/images/search.png) no-repeat 50%;width: 20px;height: 32px;
text-indent: -9000px;box-sizing: border-box;padding: 0;margin: 0;}











div.pageheaderApp {display: flex;align-items: center;justify-content: flex-end;
	/*padding-bottom: 10px;*//*border-bottom: 1px solid var(--back-light);*/
	/*overflow: hidden;*/
	margin-bottom: 30px;box-sizing: border-box;height: 54px;}

div.pageheaderApp>* {}
div.pageheaderApp>div.title {margin-right: auto;display: flex;
		align-items: stretch;justify-content: flex-start;height: 54px;
		flex-grow: 2;
		margin-left: 0;line-height: 1;}
div.pageheaderApp>div.title>* {margin-right: 10px;}
div.pageheaderApp>div.title h2 {background-color: var(--back-lighter);color: var(--white);font-weight: 400;
	/*text-decoration: underline;*/
	font-size: 12px;padding: 0 15px 0 30px;min-width: 120px;box-sizing: border-box;
	display: flex;align-items: center;
  	line-height: 1.2;
  	text-align: left;
  	background-image: url(/images/icons_cloud.png);background-repeat: no-repeat;
  	background-position: 5px 50%;}
div.pageheaderApp>div.title h2.local {/*background-color: var(--back-light);*/
	background-image: url(/images/project_local.png);}
div.pageheaderApp>div.title h2:empty {background-image: none;background-color: transparent;}
div.pageheaderApp>div.title h2 a {color: inherit;}

div.pageheaderApp>div.title div.buttons {display: flex;
		align-items: stretch;justify-content: flex-start;
		margin-left: 0;line-height: 1;height: 100%}
div.pageheaderApp>div.title div.buttons.right {margin-left: auto;margin-right: 40px;flex-grow: 2;justify-content: flex-end;}


div.pageheaderApp>div.title div.buttons>a,
div.pageheaderApp>div.title div.buttons div.undo a {display: block;
	text-indent: -9000px;height: 100%;width: 28px;background-repeat: no-repeat;
	background-position: 50%;margin: 0 2px;}

div.pageheaderApp>div.title div.buttons.right a {opacity: .5;}
div.pageheaderApp>div.title div.buttons.right a:hover {opacity: 1;}

div.pageheaderApp>div.title div.buttons div.options {position: relative;}
div.pageheaderApp>div.title div.buttons div.options label {display: block;
	text-indent: -9000px;height: 100%;width: 28px;background-repeat: no-repeat;
	background-position: 50%;margin: 0 2px;}

div.pageheaderApp>div.title div.buttons div.saveoptions label {background-image: url(/images/header_save_simple.png);}
div.pageheaderApp>div.title div.buttons div.saveoptions:hover label {background-image: url(/images/header_save_simple_sel.png);}

div.pageheaderApp>div.title div.buttons div.options ul {list-style: none;
	display: block;position: absolute;
	top: 85%;left: 3px;transform: scale(0);transform-origin: 0 0;
	opacity: 0;
	transition: .2s;box-sizing: border-box;
	z-index: 10000;
	padding: 10px 6px;border-radius: 2px;
	background-color: var(--back-darker);
	font-size: 11px;transition: .1s;transform: scale(0);transform-origin: 1,1;
	box-shadow: 0px 0px 7px 0px rgba(19, 19, 19, 0.44);}
div.pageheaderApp>div.title div.buttons div.options ul a {
	padding: 5px 8px 5px 8px;line-height: 1.2;
	width: 140px;
	color: var(--white_60);font-weight: 500;display:block;
	background-position: 4px 50%;background-repeat: no-repeat;}
div.pageheaderApp>div.title div.buttons div.options ul a:hover {color: var(--white);}
div.pageheaderApp>div.title div.buttons div.options ul.disabled a {color: var(--white_30);pointer-events: none;}




div.pageheaderApp>div.title div.buttons div.options input{display: none;}
/*div.pageheaderApp>div.title div.buttons div.options ul {transform: scale(1);opacity: 1;}*/
div.pageheaderApp>div.title div.buttons div.options:hover ul {transform: scale(1);opacity: 1;}
div.pageheaderApp>div.title div.buttons div.options input:checked+ ul {transform: scale(1);opacity: 1;}






div.pageheaderApp>div.title div.buttons>a.savefile {background-image: url(/images/header_save_cloud.png);}
div.pageheaderApp>div.title div.buttons>a.savelocalfile {background-image: url(/images/header_save.png);}
div.pageheaderApp>div.title div.buttons>a.loadfile {background-image: url(/images/icons_cloud.png);}
div.pageheaderApp>div.title div.buttons>a.openlocalfile {background-image: url(/images/header_open.png);}
div.pageheaderApp>div.title div.buttons>a.saveus {background-image: url(/images/header_save.png);}
div.pageheaderApp>div.title div.buttons>a.import {background-image: url(/images/header_import_text.png);}
div.pageheaderApp>div.title div.buttons>a.openlocalfile {background-image: url(/images/header_open.png);}
div.pageheaderApp>div.title div.buttons>a.export {background-image: url(/images/header_export_text.png);}
div.pageheaderApp>div.title div.buttons>a.closefile {background-image: url(/images/header_close.png);}
div.pageheaderApp>div.title div.buttons a.undo {background-image: url(/images/header_undo.png);}

div.pageheaderApp>div.title div.buttons>a.savefile:hover {background-image: url(/images/header_save_cloud_sel.png);}
div.pageheaderApp>div.title div.buttons>a.savelocalfile:hover {background-image: url(/images/header_save_sel.png);}
div.pageheaderApp>div.title div.buttons>a.openlocalfile:hover {background-image: url(/images/header_open_sel.png);}
div.pageheaderApp>div.title div.buttons>a.saveus:hover {background-image: url(/images/header_save_sel.png);}
div.pageheaderApp>div.title div.buttons>a.import:hover {background-image: url(/images/header_import_text_sel.png);}
div.pageheaderApp>div.title div.buttons>a.export:hover {background-image: url(/images/header_export_text_sel.png);}
/*div.pageheaderApp>div.title div.buttons a.closefile:hover {background-image: url(/images/header_close_sel.png);}*/
/*div.pageheaderApp>div.title div.buttons a.undo:hover {background-image: url(/images/header_undo_sel.png);}*/


div.pageheaderApp>div.opt_wrap {margin-left: auto;display: flex;align-items: center;justify-content: flex-end;}
div.pageheaderApp>div.opt_wrap>* {margin-left: 10px;}
div.pageheaderApp h1 {text-transform: uppercase;font-size: 16px;font-weight: 700;
	letter-spacing: -.5px;margin: 0 10px 0 0;}
div.pageheaderApp h1 a {text-transform: uppercase;font-size: 16px;font-weight: 700;
	letter-spacing: -.5px;color: inherit;}

div.pageheaderApp h2 {font-size: 15px;font-weight: 300;
	letter-spacing: -.5px;margin: 0 10px 0 0;}
div.pageheaderApp h2:before {content:"> "}
div.pageheaderApp h2 a {font-weight:500;}

div.headerwrapper div.pageheaderApp {margin-bottom: 0;height: 54px;
    justify-content: flex-start;flex-grow: 2;}
div.headerwrapper div.pageheaderApp div.title {margin-right: 30px;}
div.headerwrapper div.pageheaderApp h2:before {content:""}
div.headerwrapper div.pageheaderApp h2 b {color: var(--bluelink);}
div.headerwrapper div.pageheaderApp>div.opt_wrap {margin-left: 0;}


div.pageheaderApp a.addnew {font-size: 14px;font-weight: 300;
	letter-spacing: -.5px;margin: 0 0 0 0;color: var(--bluelink);}
div.pageheaderApp a.addnew:before {content: "+ ";}


div.pageheaderApp ul.pagemenu {list-style: none;display: flex;
	margin: 0 0 0 10px;padding: 0;align-items: center;
	justify-content: flex-start;}
div.pageheaderApp ul.pagemenu li {margin-right: 10px;}
div.pageheaderApp ul.pagemenu li a {display: block;text-transform: uppercase;
	font-weight: 400;padding: 0 4px;}
div.pageheaderApp ul.pagemenu li a:hover,
div.pageheaderApp ul.pagemenu li.selected a{text-decoration: none;
	background-color: var(--bluelink);color: var(--white);
	border-radius: 3px;}


ul.pages {display: flex;list-style: none;margin-right: 20px;}
ul.pages li {}
ul.pages li a {padding: 5px 0;display: block;font-size: 13px;
	text-align: center;width: 20px;
	color: var(--white_60);;}
ul.pages li a.sel {background-color: var(--back-light);color: var(--white);}


div.pageheaderApp form {background-color: var(--back-light);
	margin:0 0 0 auto;
	height: 32px;border-radius:16px;color: var(--white_60);
	padding: 0 10px 0 10px;display: flex;align-items: center;}
div.pageheaderApp form input {background: transparent;
		font-size: 13px;color: var(--white_60);font-family:'GG';
		border: 0;height: 28px;line-height: 30px;
		width: 100px;}
div.pageheaderApp form button {border: 0; background: transparent;
background: url(/images/search.png) no-repeat 50%;width: 20px;height: 32px;
text-indent: -9000px;box-sizing: border-box;padding: 0;margin: 0;}


input.cardslist {display: none;}
input.cardslist ~ div label {cursor: pointer;}
input.cardslist ~ div label:after {content: "cards";}
input.cardslist:checked ~ div label:after {content: "list";}


input.cardslist ~ div.list.cards {display: flex;align-items: stretch;
	justify-content: flex-start;width: 100%;flex-wrap: wrap;}
div.list.cards a {
	width: 100%;margin-right: 0%;margin-bottom:5px;padding:5px 5px 5px 10px;
	background-color: var(--back-medium);
	color: var(--forecolor);box-shadow: var(--box-shadow);
	display: flex;flex-wrap: nowrap;
	align-items:flex-start;;justify-content: flex-start;}
div.list.cards a.notapproved {background-color: var(--alert);}
div.list.cards a:hover {text-decoration: none;background-color: var(--back-light);
	box-shadow: none;}
div.list.cards a>* {padding: 0;margin-right: 10px;}
div.list.cards a h2 {font-size: 14px;position: relative;padding: 0;margin: 0;
	width: 300px;}
div.list.cards.projects a h2 {width: 400px;}

div.list.cards a h3 {font-size: 13px;font-weight: 300;
	width: 250px;}
div.list.cards a h4 {font-size: 13px;font-weight: 300;
	width: 250px;}
div.list.cards a span.dates {display: block;font-size: 13px;margin: 0 0 4px;
	width: 250px;}

input.cardslist:checked ~ div.list.cards {display: flex;align-items: stretch;
	justify-content: space-between;width: 100%;flex-wrap: wrap;
	gap: 1%;}

input.cardslist:checked ~ div.list.cards a {
	flex-grow: 2;
	width: 24%;
	min-width: 250px;
	border-radius: 4px;background-color: var(--back-medium);
	padding: 0 0 20px;flex-wrap: wrap;
	color: var(--forecolor);box-shadow: var(--box-shadow);}
input.cardslist:checked ~ div.list.cards a:hover {text-decoration: none;background-color: var(--back-light);
	box-shadow: none;
	}
input.cardslist:checked ~ div.list.cards a>* {padding: 0 15px;}
input.cardslist:checked ~ div.list.cards a h2 {padding: 10px 25px 10px 15px;
	background-color: var(--back-light);
	font-size: 16px;margin: 0 0 10px;width: 100%;
	border-top-right-radius: 5px;border-top-left-radius: 5px;position: relative;}
	input.cardslist:checked ~ div.list.cards a h2:after {content: "";display: block;
		background-color: var(--active);position: absolute;
	baupcoming: var(--active);position: absolute;
		bottom: 0;left: 0;right: 0;height: 4px;}
input.cardslist:checked ~ div.list.cards a.passed h2:after {background-color: var(--inactive);}
input.cardslist:checked ~ div.list.cards a.upcoming h2:after {background-color: var(--upcoming);}
input.cardslist:checked ~ div.list.cards a h3 {font-size: 13px;font-weight: 300;width: 100%;}
input.cardslist:checked ~ div.list.cards a h4 {font-size: 13px;font-weight: 300;width: 100%;}
input.cardslist:checked ~ div.list.cards a span.dates {display: block;font-size: 14px;margin: 0 0 4px;width: 100%;}




div.columns {display: flex;align-items: flex-start;
	justify-content: flex-start;gap: 4%;}

ul.insidelist {list-style: none;margin: 0 0 40px 0;padding: 0;}
ul.insidelist li {padding: 4px 4px;display: flex;justify-content: space-between;
	align-items: center;font-size: 14px;margin-bottom: 1px;box-sizing: border-box;
	background-color: var(--back-medium);}
ul.insidelist li a.remove {text-indent: -9000px;width: 12px;height: 12px;
	background: url(/images/fancy_close.png) no-repeat 50%;
	margin:0 4px 0 8px}
ul.insidelist li a.remove.removeLanguageFromProject {align-self: center;justify-self:flex-start;}


input.sethidden {display: none;}
ul.insidelist label.sethidden {cursor:pointer;}
ul.insidelist li.hidden {display: none;}
input:checked+ul.insidelist li.hidden {display: flex;}


@media only screen and (max-width: 1000px) {
div.user.columns {flex-wrap: wrap;}
div.user.columns>* {width: 100%;margin-bottom: 30px;padding-bottom: 30px;
	border-bottom: 1px solid var(--back-light)}


/*.tools .switch {padding:11px 0;}
.tools .switch input {display:none;}
.tools .switch label {width:87px;height:32px;margin:0 5px;position:relative;
	display:block;cursor:pointer;}
.tools .switch label span {width:30px;height:14px;border:2px solid rgb(94,80,87);border-radius:7px;
	display:block;position:absolute;top:8px;left:calc(50% - 15px);}
.tools .switch label span:after {content:"";display:block;background-color:rgb(236,236,236);
	border-radius:50%;width:20px;height:20px;top:-2px;left:-2px;position:absolute;
	-webkit-transition: left 0.1s ease-in-out;}
.tools .switch label:before {content:"";position:absolute;left:0;top:0;display:block;width:24px;height:30px;background: url(/images/edit_on.png) no-repeat 50%;}
.tools .switch label:after {content:"";position:absolute;right:0;top:0;display:block;width:20px;height:32px;background: url(/images/play_off.png) no-repeat 50%;}

.tools .switch.playing input:checked + label:before {background-image: url(/images/edit_off.png);}
.tools .switch.playing input:checked + label:after {background-image: url(/images/play_on.png);}
.tools .switch input:checked + label span:after {left:calc(100% - 18px);}

*/

/*.tools .input {padding:11px 0;}
.tools .input input {display:none;}
.tools .input label {width:auto;height:32px;margin:0 5px;position:relative;
	display:block;cursor:pointer;padding-right:30px;}
.tools .input label em {display:inline-block;}
.tools .input label span {width:30px;height:14px;border:2px solid rgb(94,80,87);border-radius:7px;
	display:block;position:absolute;top:8px;left:calc(50% - 15px);}
.tools .input label span:after {content:"";display:block;background-color:rgb(236,236,236);
	border-radius:50%;width:20px;height:20px;top:-2px;left:-2px;position:absolute;
	-webkit-transition: left 0.1s ease-in-out;}
*/

/* Responsivenewss ============================================================================= */
/* ============================================================================================= */
.section {clear: both;padding: 0px;margin: 0px;}
.col {display: block;float:left;margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}}

/* GRAVITY.GR CSS  ============================================================================= */

div.mainWrap {width:96%;margin:0 auto;max-width:1500px;
  border-left:1px solid #453F41;border-right:1px solid #453F41;
  border-bottom:1px solid #453F41;}
.wrapperIn {margin:0 0 0 60px;border-left:1px solid #453F41;}

body h1 {padding:5px;}

.htmlscrollbar  ::-webkit-scrollbar {background:#474344;}
.htmlscrollbar  ::-webkit-scrollbar {width:23px;height:23px;}
.htmlscrollbar  ::-webkit-scrollbar-button {width:23px;height:23px;
		background:rgba(44,41,42,1);border-radius:50%;border:6px solid rgba(71,67,68,1);}
/*.htmlscrollbar  ::-webkit-scrollbar-button:after {content:"";display:block;position:absolute;
	background:#fff;width:5px;height:5px;background-color:#f00;}*/
.htmlscrollbar  ::-webkit-scrollbar-thumb {
	background-clip: padding-box;
	border:6px solid rgba(71,67,68,1);
	height:10px;width:10px;border-radius:10px;
	background-color:rgba(44,41,42,1);
min-height:50px;}
.htmlscrollbar  ::-webkit-scrollbar-track {/*width:23px;height:23px;*/width:23px;height:23px;background:rgba(71,67,68,1);}
.htmlscrollbar  ::-webkit-scrollbar-corner {background:rgba(71,67,68,1);border-bottom-right-radius:10px; }
/*::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.*/