:root {
	--accent-color: #007aff;
	--neutral-light-color: #eee;
	--text-dark-color: #000;
	--text-light-color: #ccc;

	--code-font: 1em/1.4 Andale Mono, Monaco, Courier, monospace;
}

::-webkit-scrollbar {
	height: 1em;
	width: 0.8em;
}

::-webkit-scrollbar:horizontal {
	height: 1.2em;
	width: 1em;
}

::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}

::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }
::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.65); }
::-webkit-scrollbar-thumb:horizontal { border: 0.4em solid #333; }

iframe::-webkit-scrollbar {}
iframe::-webkit-scrollbar-thumb:horizontal { border: 0.4em solid #fff; background-color: #aaa; }
iframe::-webkit-scrollbar-thumb:horizontal:hover { background: #888; }
iframe::-webkit-scrollbar-thumb:horizontal:active { background: #333; }

textarea {
	resize: vertical;
}

* {
	box-sizing: border-box;
}

html {
	font: 100%/1.4 'Open Sans', --system-ui, Helvetica, Arial, sans-serif;
	color: var(--text-dark-color);
}

body {
	margin: 0.5rem;
}

a {
	color: var(--accent-color);
	text-decoration: none;
}

.button {
	padding: 0.2em 0.4em 0.15em;
	border: 0.25em solid  var(--accent-color);
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
}

.button.secondary {
	border-color: gray;
	color: gray;
}

.button.destructive {
	border-color: red;
	color: red;
}

.hidden {
	display: none;
}

.dialog {
	position: absolute;
	top: 2rem;
	left: CALC(50vw - 15rem);
	width: 30rem;
	background-color: #eee;
	border: 1px solid #111;
	padding: 1em;
	box-shadow: 0 1em 1em rgba(0,0,0,0.4);
}

#intro,
#quiz,
#exit {
	width: 90%;
	min-height: CALC(100vh - 1rem);
	margin: 0 auto 2rem;
	border: 0px solid #f0f;
}

.mode {
	float: right;
	display: inline-block;
	background-color: #607d8b;
	color: hsla(0, 100%, 100%, 0.8);
	font-size: 0.85rem;
	font-weight: normal;
	padding: 0.2em 0.5em;
	margin-right: 1rem;
	border-radius: 0.2em;
}

.mode.live {
	background-color: #4caf50;
}

.users {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
}

.users li {
	width: CALC((100% / 3) - 1em);
	margin-right: 1em;
	padding: 0.5em 0;
	list-style: none;
	border-bottom: 1px solid var(--text-light-color);
	cursor: pointer;
}

/*
.users li:nth-child(n+4) {
	border-top: 1px solid #f0f;
}
*/

.users li:hover,
.users li:focus,
.users li.selected {
	background-color: var(--neutral-light-color);
}

.users li h2 {
	font-size: 1em;
	margin: 0;
}

.users li .matrikel {
	color: gray;
	margin: 0;
}

.users li .avatar {
	width: 2.5em;
	height: 2.5em;
	background-size: cover;
	border-radius: 100%;
	float: left;
	margin: 0;
	margin-top: 0.15em;
	margin-right: 1em;
}

.start-button {
	text-align: center;
}

#intro #introtext {
	width: 30%;
	min-width: 50ch;
	margin: 3rem auto 0;
	padding: 0.75rem;
	background: #fbe7cc;
	text-align: left;
}

#introtext h2 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: 0.5em;
}

#introtext ol {
	margin: 0;
	padding: 0;
}

#introtext ol li {
	margin-left: 1em;
	list-style: decimal outside;
}

#questions ul {
	margin: 0;
	padding: 0;
}

#questions li {
	list-style: none;
}

#questions .help code {
	background-color: var(--text-light-color);
	display: inline-block;
	padding: 0.05em 0.3em 0.2em;
	font: var(--code-font);
	border-radius: 0.2em;
}

#questions .question-data {
	display: flex;
	margin-bottom: 1rem;
}

#questions textarea {
	display: block;
	width: 50%;
	padding: 0.6rem;
	background: #333;
	color: #fff;
	tab-size: 2em;
	min-height: 30vh;
	font: var(--code-font);
}
#questions textarea.html { color: #007aff; }
#questions textarea.css { color: #ff0088; }
#questions textarea.answer { width: 100%; }

#questions .preview {
	display: block;
	width: 50%;
	padding: 0.3rem 0.6rem 0.3rem 0.3rem;
	border: 1px solid #666;
}

#quiz-controls {
	display: flex;
	align-items: baseline;
}

#quiz-controls .buttons {
	margin: 0;
	flex-grow: 0;
	flex-shrink: 0;
}

#question-tabs {
	flex: 1;
}

#question-tabs ul {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

#question-tabs li {
	list-style: none;
}

#question-tabs li a {
	background-color: var(--accent-color);
	color: #fff;
	margin-right: 0.1em;
	padding: 0.35em 0.5em 0.3em;
}

#question-tabs li:not(.active) a {
	opacity: 0.65;
}

#active-user {
	align-self: center;
	margin-right: 1em;
}

#active-user .user {
	display: flex;
	align-items: flex-end;
}

#active-user .user p {
	margin: 0;
	margin-right: 0.25em;
}

#active-user .user .avatar {
	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;
	background-size: cover;
}

#active-user .user .name {
	font-weight: bold;
}

#active-user .user .matrikel {
	color: var(--text-light-color);
}

#active-user .user .mode {
	float: none;
	margin-left: 0.25em;
}

#timer {
	display: inline-block;
	padding: 0;
	border: 0.25em solid #f44336;
	color: #f44336;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin-left: 1rem;
	width: 4rem;
	flex-grow: 0;
	flex-shrink: 0;
}

#timer p {
	display: inline;
	margin: 0;
}

#exit p {
	max-width: 60ch;
}

/* admin results styles */

.resultsList {
	padding: 0;
}

.resultsList .result {
	width: 100%;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--neutral-light-color);
	list-style: none;
}

.resultsList .result p {
	margin: 0;
}

.resultsList .result p:first-child a {
	display: flex;
}

.resultsList .result p:first-child a > * {
	/* width: 20%; */
	flex: 0;
}

.resultsList .result p:first-child a .semester {
	display: none;
	margin-right: 1em;
	flex-basis: 11ch;
}

.resultsList .result p:first-child a time {
	margin-right: 1em;
	flex-basis: 11ch;
}

.resultsList .result p:first-child a .studentid {
	margin-right: 1em;
	flex-basis: 11ch;
}

.resultsList .result p:first-child a .name {
	margin-right: 1em;
	flex: 1;
}

.resultsList .result p:first-child a .mode {
	width: 7ch;
	flex-basis: 7ch;
	text-align: center;
}

.resultsList .result form label {
	display: inline-block;
	width: 12ch;
}

.resultsList .result form input[type="number"] {
	font-family: 'Open Sans', --system-ui, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	padding: 0.05em 0.4em;
	display: inline-block;
	width: 8ch;
}

.resultsList .result form input.success {
	color: green;
}

.resultsList .result form input.fail {
	color: red;
}

.resultsList .result form input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	font-size: 1rem;
	background-color: var(--accent-color);
	color: #fff;
	padding: 0.2em 0.6em 0.3em;
	border-radius: 0.2em;
}

.questionsList {
	padding: 0;
}

.questionsList li + li {
	margin: 2em 0;
	border-top: 1px solid var(--neutral-light-color);
}

.questionsList p.help {
	margin-bottom: 1em;
}

.questionsList .question-data:empty {
	display: none;
}

@media all and (min-width: 60em) and (max-width: 89.999em) {
	#intro,
	#quiz,
	#exit {
		width: 85%;
	}

	.users li {
		width: CALC(25% - 1em);
	}

	/*
	.users li:nth-child(n+5) {
		border-top: 1px solid #f0f;
	}
	*/

	.resultsList .result p:first-child a .semester {
		display: inline-block;
	}
}

@media all and (min-width: 90em) {
	#intro,
	#quiz,
	#exit {
		width: 75%;
		max-width: 80em;
	}

	.users li {
		width: CALC(20% - 1em);
	}

	/*
	.users li:nth-child(n+6) {
		border-top: 1px solid #f0f;
	}
	*/
}