@font-face {
	font-family: Jellee;
	src: url(/fonts/Jellee-Roman.otf);
	src: url(/fonts/Jellee-Roman.ttf);
}

* { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-stretch: condensed; 
	font-size: 1em;
	transition: max-height 1s ease, opacity 1s ease;
}

tiny { font-size: 0.7em; }

/*html { height: 100%; overflow:auto; }
body { height: 100%; } */

html { font-size: 2vh; }

/*html { overflow: hidden; font-size: 2vh; } 
body { overflow-y: auto; overflow-x: hidden; } */

body { margin: 0; }

#beta { color: red; font-size: 1.6em; font-family: monospace; font-weight: bold; position: fixed; top: 1vh; left: 1vh; z-index: 1000; }
#beta_detail { color: darkred; font-size: 0.8em; background: var(--background); }

/*nav { position: fixed; top: 0; right: 0; width: 2rem; height: 2rem; }*/

nav ul { list-style-type: none;  }
nav ul li { display: block; }
nav a { color: black; text-decoration: none; }
nav form { margin: 0.5rem; }
nav .menuitems { font-family: system-ui; background: linear-gradient(135deg, #B0D3FF,#A0C3FF); padding: 1rem; border: 0.2rem solid grey; border-radius: 0.5rem; margin: 0 0.5rem; white-space: nowrap; line-height: 2rem; }
nav .menuitem.menu_formal { font-size: small;}

.burgermenu { position: relative; right: 1rem; }
.burgermenu img { height: 1rem; transform: scaleX(4); }

/* Navigation */
.focusHackLabel { height: auto; position: absolute; right: 0.5rem; text-align: right; }
.focusHackInput { height: 1px; width: 1px; opacity: 0; display: inherit; }
.focusHackInput + label img { opacity: 1; height: 1rem; }
/*.focusHackInput + label ul:active { z-index: 1; }*/
.focusHackInput + label .menuitems:active { z-index: 1; opacity: 1; }
.focusHackInput:focus + label img { opacity: 0; }
/*.focusHackInput + label ul { opacity: 0; z-index: -1; position: absolute; right: 0; }*/
.focusHackInput + label .menuitems { opacity: 0; z-index: -1; position: absolute; right: 0; }
/*.focusHackInput:focus + label ul { opacity: 1; height: auto; z-index: 1; }*/
.focusHackInput:focus + label .menuitems { opacity: 1; height: auto; z-index: 1; }

nav { font-size: 1.3em; }
h1 { font-size: 2em; }

.step {
	display: inline-block;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    padding: 0.33em;
    background: var(--step-background);
    border: 2px solid #000;
    color: var(--step-foreground);
    text-align: center;
}

.back {
 background: url('/img/chevron-left-solid.svg');
 height: 1.2em;
 width: 1.2em;
 padding: 0.33em;
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center center;
 display: inline-block;
}

.section { width: 100vw; height: 100vh; padding: 0; margin: 0 auto; overflow-y: scroll; overflow-x: hidden; }

.button { 
	display: inline-block;
	box-shadow: 0.1em 0.1em 0.1em #ddd;
	width: 5em;
	text-align: center;
	padding: 1em;	
	font-family: Jellee;
}

.button.inbutton { padding: 0; }

.button.yes {
	background: var(--yes);
}

.button.maybe {
	background: var(--maybe);
}

.button.no {
	background: var(--no);
}

.button.maybenot {
	background: var(--maybenot);
}


.button.reset {
	background: var(--no);
	margin-bottom: 0.5em;
}

.bar { width: 0; margin: 1em auto; background: #000; }
.number { color: #fff; }

label[for^="submit"] {
	display: inline-block;
	margin: 1em auto;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	padding: 1em;	
	background: url(/img/chevron-circle-right-solid.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#labelSubmitOrder { background: url(/img/ticket-alt-solid.svg); }
#labelSubmitFinished,#labelSubmitRestart { background: url(/img/redo-alt-solid.svg); width: 1em; height: 1em; margin: 0; padding: 0;}

#background {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	z-index: -50;
	text-align: center;
	background: var(--background);
}

#planung, nav { background: var(--background); text-align:center; }

nav ul { list-style: none; }
nav li { display: inline-block; }

#choosemovies label { display: block; }
#choosemovies input[type='checkbox'] + label {
	background: var(--neutral);
	font-family: sans-serif;
	font-size: 1em;
	margin: 0 auto;
	width: 75%;
	text-align: center;
	padding: 0.2em;
}

#choosemovies input[type='checkbox']:hover + label {
	background: var(--maybe);
}

#choosemovies input[type='checkbox']:checked + label {
	background: var(--yes);
}

#marksoldout label { display: block; }
#marksoldout input[type='checkbox'] + label {
	background: var(--neutral);
	font-family: sans-serif;
	font-size: 1em;
	margin: 0 auto;
	width: 75%;
	text-align: center;
	padding: 0.2em;
}

#marksoldout input[type='checkbox']:hover + label {
	background: var(--maybenot);
}

#marksoldout input[type='checkbox']:checked + label {
	background: var(--no);
}

#choosetimes table { width: auto; margin: 0 auto; overflow-x: auto; }
#choosetimes table th { white-space: no-wrap; }
#choosetimes input[type='checkbox'] + label {
	display: inline-block;
	background: var(--no);
	font-family: sans-serif;
	font-size: 1em;
	margin: 0 auto;
	width: 90%;
	text-align: center;
	padding: 0.2em;
}

#choosetimes input[type='checkbox']:hover + label {
	background: var(--maybenot);
}
#choosetimes input[type='checkbox']:checked + label:hover {
	background: var(--maybe);
}

#choosetimes input[type='checkbox']:checked + label {
	background: var(--yes);
}

#orderwindow {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	z-index: -100;
	text-align: center;
	background: var(--order);
}

#orderwindow.finish { background: var(--neutral); overflow-y: scroll; }

#orderwindow #stobackground {
	position: fixed;
	right: 0;
	top: 0;
	width: 10vw;
	text-align: center;
	border-radius: 0 0 0 0.5em;
	box-shadow: -0.2em 0.2em 0.2em 0.2em var(--neutral);
	background: url(/img/ticket-alt-solid.svg);
	background-repeat: repeat;
	background-position: center center;
	background-size: 10vw auto;

}
#orderwindow #stilltoorder {
	padding: 1em 0 1em 0;
	font-size: 3em;
	font-weight: bold;
	color: var(--stilltoorder-text);
	width: 100%;
	height: 100%;
	background: var(--stilltoorder);
	opacity: 0.9;
}

#orderwindow #ticketback {
	position: fixed;
	left: 0;
	top: 45vh;
	height: 10vh;
	margin: 0;
	padding: 0;
	width: 5vh;
	background: url(/img/chevron-left-solid.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	opacity: 0.5;
}

#orderwindow .button.yes {
	width: 100%;
	height: 3vh;
}

#orderwindow .button.no {
	width: 100%;
	height: 2em;
	position: fixed;
	bottom: 0;
	left: 0;
}

#orderwindow .screening {
/*	position: absolute;
	top: 50%;
	transform: translateY(-50%);
*/
}

#orderwindow .screening.title {
  margin: 0;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vh;
}

#orderwindow .screening.identifier {
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 font-size: 4vh;
}

#orderwindow .screening.extras {
 margin: 0;
 position: absolute;
 top: 75%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 2vh;
}

#orderwindow table { margin: 0 auto; }
#orderwindow td { padding: 0 1.5em; vertical-align: top; }
#orderwindow .col_identifier { text-align: center; width: 20%; }
#orderwindow .col_title { text-align: left; width: 80%; }
#orderwindow ul { list-style: none; padding: 0; }
#orderwindow a { text-decoration: none; color: #000; }