body {
	display: flex;
	flex-direction: column;
	background-color: white;
	color: black;
	margin: 0;
	min-height: 100vh;
}

.content, main {
	display: block;
	margin: 0 auto;
	padding: 0 1em;
	max-width: 1000px;
	width: 100%;
}

header {
	padding: 10px 0px;
}

header.flavor-test {
	background-color: #33cc33;
}

header.flavor-devel {
	background-color: #cc77cc;
}

main {
	padding: 1em;
}

header .content {
	display: flex;
}

header img { height: 60px; }

header h1 { margin: auto 20px 0px; color: #222; }

#nav-wrapper {
	position: sticky;
	top: 0;
	background-color: #222;
	border: 1px #222 solid;
	z-index: 10;
}
#nav-wrapper input.hamburger { display: none; }

footer {
	margin-top: auto;
}

.error {
	color: red;
	font-weight: bold;
}

.okay {
	color: green;
	font-weight: bold;
}

.hint {
	color: #737373;
}

span.unknown {
	font-weight: bold;
	color: red;
}

.has-tip {
	text-decoration: underline dotted;
	text-underline-offset: 0.2ex;
}

.warning-text {
	color: red;
	font-weight: bold;
}

.space-top {
	margin-top: 2ex;
}

.rights-elsewhere {
	font-style: italic;
}

/* Tables */

table.data {
	border-collapse: collapse;
	margin-top: 2ex;
	margin-bottom: 2ex;
}

table.data.full {
	width: 100%;
}

table.data tbody tr:hover {
	background-color: #ddd;
}

table.data tr td, table.data tr th {
	border: 1px solid #222;
	padding: 0.1ex 0.5ex;
}

table.data.center th, table.data.center td {
	text-align: center;
}

table.data thead, table.data tfoot {
	background-color: #aaa;
}
table.data thead a, table.data tfoot a {
	color: rgb(0, 22, 121);
}

table.data thead th {
	padding: 0.4ex 0.5ex;
}

table.data td.sol {
	background-color: lightgreen;
}
table.data td.sol a {
	color: black;
}
table.data td.sol-warn {
	background-color: #ffaaaa;
}

table tr.state-disqualified, table tr.state-disqualified a:not(.btn) {
	color: red;
}
table tr.state-absent, table tr.state-absent a:not(.btn) {
	color: #888;
}
table tr.state-refused, table tr.state-refused a:not(.btn) {
	color: #888;
}

table tbody tr.winner { background-color: #fe5; }
table tbody tr.winner:hover { background-color: #dc3; }
table tbody tr.successful { background-color: #9e9; }
table tbody tr.successful:hover { background-color: #7c7; }
table tbody tr.hm { background-color: #9ee; }
table tbody tr.hm:hover { background-color: #cc7; }
table tbody tr.advance td:first-child { color: #a0e; }

.legend-winner { background-color: #fe5; }
.legend-successful { background-color: #9e9; }
.legend-hm { background-color: #9ee; }
.legend-advance { color: #a0e; }

table tr.place-hidden, table tr.place-hidden a:not(.btn) {
	color: #888;
}

table.greyhead thead {
	background-color: #aaa;
}

table.greyhead thead tr th {
	border: none;
}

table.vcenter-rows tr td, table.vcenter-rows tr th {
	vertical-align: middle;
}

.ac {
	text-align: center;
}

.ar {
	text-align: right;
}

/* Main menu */

nav#main-menu {
	display: flex;
	flex-wrap: wrap;
}

nav#main-menu a, nav#main-menu input[type=submit] {
	background: none;
	border: none;
	margin: 0px;
	color: white;
	font-size: 1em;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* Only the first item with .right class does the margin trick */
nav#main-menu > .right { margin-left: auto; }
nav#main-menu > .right ~ .right { margin-left: 0px; }

nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover {
	cursor: pointer;
	background-color: #555;
	color: white;
}

nav#main-menu a.active {
	background-color: #ddd;
	color: black;
}

/* Forms */

.form-group.required .control-label:after {
	content:"*";
	color:red;
}

.form-frame {
	padding: 10px;
	border: 1px #ddd solid;
	border-radius: 4px 4px;
}

.form-horiz-frame {
	/* As .form-frame, but for groups of control in Bootstrap's horizontal forms */
	padding: 10px;
	border: 1px #ddd solid;
	border-radius: 4px 4px;
	overflow-x: clip;	/* Bootstrap's .form-group has negative margins */
}

.form-null-frame {
	/* Shrinks width the same as .form-(horiz-)frame does */
	padding-left: 11px;
	padding-right: 11px;
}

.form-horiz-frame .form-group:last-child {
	margin-bottom: 0;
}

.collapsible + .form-null-frame {
	margin-top: 15px;
}

.collapsible + .btn-group {
	margin-top: 15px;
}

select.no-scroll::-webkit-scrollbar {
	display: none;
}

.checked_toggle input.toggle:checked ~ .checked_hide {
	display: none;
}
.checked_toggle input.toggle:not(:checked) ~ .checked_show {
	display: none;
}

/* Round states */

.rstate-preparing {
	color: red;
}

.rstate-running {
	color: green;
}

.rstate-grading {
	color: magenta;
}

.rstate-graded {
	color: blueviolet;
}

.rstate-closed {
	color: black;
}

.rstate-delegate {
	color: #888;
}

/* Solutions */

.sol-active {
	background-color: yellow;
}

.sol-warn {
	color: red;
}

/* Jobs */

table.data tbody tr.job-running {
	background-color: #f8f;
}

table.data tbody tr.job-running:hover {
	/* HSV: V=66% */
	background-color: #a6a;
}

table.data tbody tr.job-done {
	background-color: #8f8;
}

table.data tbody tr.job-done:hover {
	background-color: #6a6;
}

table.data tbody tr.job-failed {
	background-color: #f88;
}

table.data tbody tr.job-failed:hover {
	background-color: #a66;
}

table.data tbody tr.job-internal_error {
	background-color: #c22;
}

table.data tbody tr.job-internal_error:hover {
	background-color: #a44;
}

table.data tbody tr.job-soft_error {
	background-color: #c88;
}

table.data tbody tr.job-soft_error:hover {
	background-color: #a77;
}

table.data tbody tr.job-waiting {
	background-color: #ff8;
}

table.data tbody tr.job-waiting:hover {
	background-color: #aa6;
}

/* Users */

.user-test {
	color: green;
}

.user-inactive {
	color: red;
}

.user-bad-email {
	color: red;
}

.user-warning-sent {
	color: red;
}

/* Alerts */

/* Multiple alerts displayed in more compact way */
div.alert + div.alert {
	margin-top: -22px;
}

/* Tabs - source: https://codepen.io/MPDoctor/pen/mpJdYe */
.tabbed {
	margin: 15px 0px;
}

.tabbed [type="radio"] {
	/* hiding the inputs */
	display: none;
}

.tabs {
	display: flex;
	align-items: stretch;
	list-style: none;
	padding: 0;
	margin-bottom: 0px;
	border-bottom: 1px solid #ddd;
}
.tab > label {
	display: block;
	margin-bottom: -1px;
	padding: 12px 15px;
	border: 1px solid #ddd;
	background: #eee;
	color: #666;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;
}
.tab:hover label {
	border-top-color: #333;
	color: #333;
}

.tab-content {
	display: none;
	margin: 0px;
	padding: 10px;
	border: 1px solid #ddd;
	border-top: 0px;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
	border-bottom-color: #fff;
	border-top-color: #999;
	background: #fff;
	color: #222;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
	display: block;
}

/* Icons */

@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.ttf?azc5ov') format('truetype'),
	     url('fonts/icomoon.woff?azc5ov') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.icon {
	/* Use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better font rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Collapsible */

.collapsible {
	position: relative;
}
.collapsible input[type="checkbox"].toggle {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.collapsible label.toggle {
	cursor: pointer;
	margin-left: 15px;
}
.collapsible label.toggle-small {
	font-weight: normal;
	margin-bottom: 0px;
}
.collapsible label.toggle::before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	left: 0px;
	border-left: 8px solid black;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	transition: 0.5s ease;
}
.collapsible input[type="checkbox"].toggle:checked ~ label.toggle::before {
	transform: rotate(90deg);
}
.collapsible .collapsible-inner {
	max-height: 0;
	overflow-y: hidden;
}
.collapsible input[type="checkbox"].toggle:checked ~ .collapsible-inner {
	animation: max-height-rolldown 0.5s ease forwards;
}

@keyframes max-height-rolldown {
	from { max-height: 0vh; }
	99% { max-height: 100vh; }
	to { max-height: max-content; }
}

/* User messages */

div.message {
	padding: 5px 10px;
	margin-bottom: 5px;
	border-radius: 5px;
	border: solid 1px #f8d99b;
	color:#46381f;
	background-color:#fff8d5;
}
div.message.new {
	background-color: #ffdede;
	border: solid 1px #ff5e5e;
}
div.message .msg-title {
	font-weight: bold;
}
div.message .msg-date {
	float: right;
	font-style: italic;
	color: #777;
}

/* Autocomplete for inputs */
.autocomplete {
	position: relative;
	display: inline-block;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/* position the autocomplete items to be the same width as the container */
	top: 100%;
	left: 0;
	right: 0;
	margin: 0px 15px;
}
.autocomplete-items div {
	padding: 5px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div.exact {
	background-color: rgb(255, 255, 145);
}
.autocomplete-items div:hover {
	background-color: #e9e9e9;
}
.autocomplete-active {
	background-color: DodgerBlue !important;
	color: #ffffff;
}

/* Input classes */

input.modified {
	background-color: rgb(255, 222, 152);
	border-color: orange;
}

table.data input.has-error {
	border-color: #a94442;	/* See Bootstrap */
	border-width: 2px;
}

table.data input.form-control {
	/* Override Bootstrap's settings which are more suitable for large forms */
	display: inline;
	width: auto;
	height: auto;
	padding: 0 0.3em;
}

/* Loading circle animation (source: https://codepen.io/jake-lee/pen/jrJYON) */

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.loading {
	margin: 100px 0px;
}
.loading .circle {
	width: 100px;
	height: 100px;
	margin: 0px auto;
	border:solid 10px #222;
	border-radius: 50%;
	border-right-color: transparent;
	border-bottom-color: transparent;

	transition: all 0.5s ease-in;
	animation-name: rotate;
	animation-duration: 2.0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.loading .done {
	text-align: center;
	font-size: 100px;
}
.loading .caption {
	margin-top: 10px;
	text-align: center;
}

/* Průvodce */

.guide {
	margin-top: 2ex;
	margin-bottom: 2ex;
	background-color: #eee;
	border: 1px solid #222;
}

.guide-inner {
	margin: 2ex 2ex;
}

/* Upozornění na nedoručený mail v registraci */

table.dsn-check-err {
	border-collapse: collapse;
	margin-top: 2ex;
}

table.dsn-check-err tr td, table.dsn-check-err tr th {
	padding-top: 0.1ex;
}

table.dsn-check-err tr th {
	padding-right: 2ex;
}

/* Seznamy bez odrážek, používáme uvnitř tabulek */

ul.bare {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

/* Vzhled pro mobily a úzké displeje */

@media only screen and (max-width: 600px) {
	header img {
		height: 40px;
	}
	header h1 {
		font-size: 18px;
	}

	/* Hamburger responsive menu (original source: https://codepen.io/erikterwan/pen/EVzeRP) */
	#nav-wrapper {
		background-color: rgba(255, 255, 255, 0.8);
		border: none;
		z-index: 1;
		padding-top: 10px;
		user-select: none;
	}
	#nav-wrapper input.hamburger {
		display: block;
		margin-left: 10px;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -2px;
		left: -7px;

		cursor: pointer;

		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
		-webkit-touch-callout: none;
	}

	/* Hamburger symbol */
	#nav-wrapper span {
		display: block;
		width: 33px;
		height: 4px;
		margin-left: 10px;
		margin-bottom: 5px;
		position: relative;

		background: #222;
		border-radius: 3px;

		z-index: 1;

		transform-origin: 4px 0px;

		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			opacity 0.55s ease;
	}
	#nav-wrapper span:first-child { transform-origin: 0% 0%; }
	#nav-wrapper span:nth-last-child(2) { transform-origin: 0% 100%; }

	/* Hamburger crossmark symbol */
	#nav-wrapper input.hamburger:checked ~ span {
		background-color: #fff;
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
	}
	#nav-wrapper input.hamburger:checked ~ span:nth-last-child(3) {
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	#nav-wrapper input.hamburger:checked ~ span:nth-last-child(2) {
		transform: rotate(-45deg) translate(0, -1px);
	}

	nav#main-menu {
		position: absolute;
		max-width: 300px;
		max-height: 100vh;
		top: 0px;
		padding-top: 35px;

		flex-direction: column;
		flex-wrap: nowrap;

		background: #222;
		-webkit-font-smoothing: antialiased;
		/* to stop flickering of text in safari */

		transform: translate(-120%, 0);

		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		overflow-y: scroll;
	}
	#nav-wrapper input.hamburger:checked ~ nav#main-menu { transform: none; }

	nav#main-menu > .right { margin-left: 0px; }
	nav#main-menu > form > input { width: 100%; }
}