/** Section for additional fonts */

@font-face {
	font-family: HSN;
	src: url("/assets/font/newgoth_hsn.ttf") format("truetype");
}

@font-face {
	font-family: 'Bebas Neue';
	src:	url("/assets/font/BebasNeue-Regular.woff2") format("woff2"),
			url("/assets/font/BebasNeue-Regular.woff") format("woff"),
			url("/assets/font/BebasNeue-Regular.otf") format("opentype");
}

/** General control classes, used globally */
.hsn_button, .hsn_button_navigation {
	text-align: center;
	color: white;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Semibold', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.8em;
	width: 160px;
	height: 40px;
	background-color: rgba(0, 89, 158, 1);
	transition-duration: 200ms;
	border: none;
}

.hsn_button_alternate {
	background-color: rgba(103, 189, 0, 1);
}

.hsn_button:hover:enabled {
	background-color: rgba(122, 155, 194, 1) !important;
	border-style: none;
}

.hsn_button:active:enabled {
	background-color: rgba(0, 0, 0, 0.4) !important;
	border-style: none;
}

.hsn_button:disabled {
	background-color: #5A5A5A !important;
}

.hsn_button_standalone {
	border-radius: 4px;
}

/** BEGIN HSN CAUTION + CRITICAL BUTTON */

.hsn_button_caution, .hsn_button_critical {
	text-align: center;
	color: white;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Semibold', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.8em;
	min-width: 160px;
	height: 40px;
	transition-duration: 200ms;
	border: none;
	padding: 0px 20px;
}

.hsn_button_caution {
	background-color: rgb(255, 178, 0);
}

.hsn_button_caution:hover {
	background-color: rgba(255, 200, 89, 1);
}

.hsn_button_caution:active {
	background-color: rgba(184, 124, 28, 1);
}

.hsn_button_critical {
	background-color: rgba(255, 45, 33, 1);
}

.hsn_button_critical:hover {
	background-color: rgba(238, 116, 105, 1);
}

.hsn_button_critical:active {
	background-color: rgba(166, 47, 35, 1);
}

.hsn_button_caution:disabled, .hsn_button_critical:disabled {
	background-color: rgb(125,125,125);
}

/** END HSN CAUTION BUTTON */

.hsn_button_navigation {
	background-color: transparent;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.hsn_button_navigation:hover:enabled {
	background-color: rgba(255, 255, 255, 0.3) !important;
}

.hsn_button_navigation:active:enabled {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

.hsn_button_navigation:disabled {
	background-color: rgb(125,125,125);
}

.hsn_selected {
	background-color: rgba(255, 255, 255, 0.3);
	border-style: none;
}

/** END COMPLETE BUTTON SECTION */

.important_hint {
	color: rgba(228, 31, 23, 1) !important;
}

.user-input {
	height: 30px; 
	width: 200px; 
	font-size: 1.1em;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Semibold', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border-radius: 4px;
	border: 1px solid rgb(204, 204, 204);
	padding: 3px;
}

.user-input-wide {
	width: 350px;
}

.user-input-invalid {
	border: 2px solid rgba(255, 45, 33, 1);
}

/** CSS settings for root containers */

html {
	height: 100vh;
	width: 100vw;
	overflow-x: hidden;
}

.parent { 
	display: grid; 
	grid-template-columns: 1fr; 
	grid-template-rows: 85px 40px 1fr 20px;
	background-color: white;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	overflow-x: hidden;
}

p {
	margin-top: 0;
}

.loading {
	justify-content: center;
	align-items: center;
	grid-area: 3 / 1 / 5 / 2;
	z-index: 7;
	background-color: rgba(0,0,0,0.4);
}

/** CSS settings for header section */
header {
	display: flex;
	box-sizing: border-box;
	grid-area: 1 / 1 / 2 / 2;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
}

header a {
	margin-top: 5px;
	margin-left: 10px;
	padding-right: 10px;
}

header div {
	margin-right: 10px;
	font-family: 'Bebas Neue';
	font-size: 2.5em;
	color: rgb(0,89,158,1);
}

#headimg {
	max-height: 75px;
	max-width: 429px;
	height: auto;
	width: auto;
	box-sizing: border-box;
}

.flex_multi {
	display: flex; 
	justify-content: center; 
	align-items: center;
}

/** CSS settings for navigation section */
.navbar {
	grid-area: 2 / 1 / 3 / 3;
	background-color: rgba(0,89,158,1);

	display: grid;
	height: 40px;
	width: 100%;
	grid-template-columns: 160px 160px 160px 160px 1fr 160px 40px 40px 160px;
	grid-template-rows: 1fr;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
}

/** BUTTONS IN NORMAL NAVIGATION */

#navbutton-home {
	background-color: transparent;
	grid-area: 1 / 1 / 2 / 2;
	border-right: 1px solid white;
	width: 100%;
}

#navbutton-imprint {
	grid-area: 1 / 3 / 2 / 4;
	background-color: transparent;
	border-right: 1px solid white;
	width: 100%;
}

#navbutton-admin {
	grid-area: 1 / 9 / 2 / 10;
	background-color: transparent;
	border-left: 1px solid white;
	width: 100%;
}

#navbutton-language {
	grid-area: 1 / 8 / 2 / 9;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

#navbutton-theme {
	grid-area: 1 / 7 / 2 / 8;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

#navbutton-privacy {
	grid-area: 1 / 2 / 2 / 3;
	background-color: transparent;
	border-right: 1px solid white;
	width: 100%;
}

#navbutton-contact {
	grid-area: 1 / 4 / 2 / 5;
	background-color: transparent;
	width: 100%;
}

#navbutton-resp {
	display: none;
	width: 100%;
	grid-area: 1 / 1 / 2 / 2;
	background-image: url("/assets/img/menu.svg");
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: center;
}

/** BUTTONS IN RESPONSIVE NAVIGATION MENU */

#navbutton-home-resp {
	grid-area: 1 / 1 / 2 / 2;
	background-color: transparent;
	width: 100%;
	height: 100%;
}

#navbutton-imprint-resp {
	grid-area: 3 / 1 / 4 / 2;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

#navbutton-admin-resp {
	grid-area: 6 / 1 / 7 / 2;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

#navbutton-privacy-resp {
	grid-area: 2 / 1 / 3 / 2;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

#navbutton-contact-resp {
	grid-area: 4 / 1 / 5 / 2;
	background-color: transparent;
	height: 100%;
	width: 100%;
}

/** */

#nav-overlay {
	grid-area: 3 / 1 / 5 / 2;
	height: 0;
	width: 100%;
	transition-property: height;
	transition-delay: 200ms;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
	overflow: auto;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.7);

	display: none; /** Will be set to grid when display small enoug */
	grid-template-rows: 50px 50px 50px 50px 1fr 50px;
	grid-template-columns: 1fr;
	
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.nav-shown {
	height: 100% !important;
}

#login-status {
	grid-area: 1 / 6 / 2 / 7;
	font-size: 0.7em;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: white;
	text-align: right;
	margin-right: 10px;
}

/** Content area */

/** Main content container */

main {
	grid-area: 3 / 1 / 5 / 2;
	box-sizing: border-box;
	z-index: 1;
	width: 100vw;
	height: fit-content;
	min-height: 100%;

	transition-property: filter;
	transition-duration: 500ms;
	transition-delay: 200ms;
	transition-timing-function: ease-in;
}

main b, main em, .gen-text {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.background {
	overflow-x: hidden;
	overflow-y: auto;
}

.background body {
	overflow-x: hidden;
	overflow-y: hidden;
}

.debug-bar {
	background-color: rgba(191,57,34,1);
	justify-content: center;
	align-items: center;

	
	width: 100%;
	height: 20px;
	position: fixed;
	top: calc(100vh - 20px);

	display: flex;
	z-index: 3;
}

.debug-bar label {
	color: white;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.9em;
}

.padded-content {
	padding: 40px 50px 50px 50px;
	box-sizing: border-box;
	height: fit-content;
	min-height: 100%;
	width: 100%;
}

.bg-blur {
	filter: blur(10px);
}

.access-revoke-div {
	display: flex; 
	align-items: center; 
	justify-content: flex-start; 
	height: 100%; 
	width: 100%; 
	flex-direction: column;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: black;
}

/** Some styles used in both test environment and task creation/editing in administration */

.ansCheckbox, .ansRadio {
	margin-bottom: 10px;
}

.ansCheckbox + label, .ansRadio + label {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Semibold', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: black;
	margin-left: 5px;
}

.itemHeap {
	display: flex; 
	flex-wrap: wrap;
	flex-direction: row; 
	align-items: center; 
	justify-content: flex-start;
	min-height: 40px;
	width: 100%;
	border-radius: 4px;
	background-color: #EEEEEE;
	box-sizing: border-box;
	padding: 5px 5px 0px 5px;
}

.matchOrderItem {
	border: 1px solid #DDDDDD; 
	border-radius: 4px; 
	min-width: fit-content; 
	min-width: -moz-fit-content;
	padding: 5px 10px; 
	background-color: #EEEEEE;
	margin-bottom: 5px;
}

.matchContainer {
	background-color: #EEEEEE; 
	border: 1px dashed #CCCCCC; 
	border-radius: 4px;
	width: 150px;
	height: 28px;
	box-sizing: border-box;
}

.matchContainer-filled {
	background-color: rgba(0, 0, 0, 0);
	border: none;
	width: fit-content;
	width: -moz-fit-content;
	height: fit-content;
	height: -moz-fit-content;
}

.drag-destination {
	border: 2px dashed #CCCCCC !important;
}

.drag-destination * {
	pointer-events: none;
}

/** Order view classes */

.orderContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	list-style-type: none;
	flex-wrap: wrap;

	background-color: #EEEEEE;
	border-radius: 4px;
	/** height: 40px; */
	width: 100%;
	box-sizing: border-box;
	padding: 5px 0px;
}

.dragBefore {
	border-left: 2px solid rgb(75,75,75);
}

.dragBefore * {
	pointer-events: none;
}

@media (prefers-color-scheme: dark) {
	.parent {
		background-color: rgb(25,25,25);
	}

	#headimg {
		background-color: rgb(25,25,25);
	}

	main b, main em {
		color: white;
	}

	a:link {
		color: rgb(45,150,255);
	}

	a:visited {
		color: rgb(255,0,144);
	}

	.hsn_button:hover:enabled {
		background-color: rgb(0,62,111);
	}

	.hsn_button:active:enabled {
		background-color: rgb(20,53,92);
	}

	hr {
		border-color: rgb(125,125,125);
	}

	.user-input {
		color:white;
		background-color: rgb(50, 50, 50);
		border: none;
		padding: 4px;
	}

	.ansCheckbox + label, .ansRadio + label {
		color: white;
	}

	textarea {
		color: white;
		background-color: rgb(50, 50, 50);
		padding: 4px;
	}

	#nav-overlay {
		background-color: rgba(0, 0, 0, 0.7);
	}

	.access-revoke-div {
		color: white;
	}

	.matchOrderItem {
		background-color: rgb(50, 50, 50);
		border: none;
	}

	.matchContainer, .orderContainer {
		background-color: rgb(50, 50, 50);
		border: none;
	}

	.itemHeap {
		background-color: rgb(50, 50, 50);
	}
}

@media (max-width: 950px) {

	#main-header {
		display: none
	}

	.navbar {
		grid-template-columns: 40px 1fr 40px 40px;
	}

	#navbutton-home {
		background-image: url("/assets/img/home.svg");
		color: transparent;
		background-repeat: no-repeat;
		background-size: 25px;
		background-position: center;
		display: none;
	}

	#nav-overlay {
		display: grid;
	}

	#navbutton-resp {
		display: block;
	}

	#navbutton-imprint, #navbutton-privacy, #navbutton-contact, #navbutton-admin {
		display: none;
	}

	#navbutton-language {
		grid-area: 1 / 4 / 2 / 5;
	}
}

@media (max-width: 600px) {
	.padded-content {
		padding: 40px 25px 25px 25px;
	}
}