:root{
	--kt-black: #1b1d22;
	--kt-blue: #2a3d60;
	--kt-cyan: #00b2ad;
	--kt-gray: #6f8077;
	--kt-orange: #f15c23;
	--kt-red: #e32f22;
	--kt-lightgray: #f2f2f3;
}

@font-face {
	font-family: "DIN 2014 Regular";
	src: url(../fonts/din-2014-regular.ttf);
}
@font-face {
	font-family: "DIN 2014 Narrow";
	src: url(../fonts/din-2014-narrow.ttf);
}

html, body {
	margin: 0;
	padding: 0;
	vertical-align: top;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "DIN 2014 Narrow", sans-serif;
	margin: 0;
}

a:link, a:visited {
	color: var(--kt-orange);
}

a:active {
	color: var(--kt-red);
	text-decoration: none;
}

body {
	background: white;
	font-family: "DIN 2014 Regular", sans-serif;
	font-size: clamp(1rem, 2.5vw + 0.5rem, 1.25rem);
}

body, table {
	font-size: 2vh;
}

header, main, footer {
	padding: 0;
	margin: 0;
}

.black {
	color: var(--kt-black);
}
.blue {
	color: var(--kt-blue);
}
.cyan {
	color: var(--kt-cyan);
}
.gray {
	color: var(--kt-gray);
}
.lightgray {
	color: var(--kt-lightgray);
}
.orange {
	color: var(--kt-orange);
}
.red {
	color: var(--kt-red);
}

.fill-orange {
	filter: invert(44%) sepia(70%) saturate(979%) hue-rotate(339deg) brightness(92%) contrast(107%);
}

.fill-white {
	filter: brightness(0) saturate(100%) invert(94%) sepia(100%) saturate(0%) hue-rotate(253deg) brightness(107%) contrast(106%);
}

.header {
	background: var(--kt-black);
	height: 6avh;
	border-bottom: 0.6vh solid var(--kt-orange);
	color: var(--kt-orange);
	padding: 1em;
	font-family: "DIN 2014 Narrow", sans-serif;
}
.topmenu, .topmenu div {
	display: inline-block;
}

.topmenu #menu-button {
	padding-right: 2em;
	
}

.menu {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.menu-container {
	padding: 0 1em;
	display: inline-block;
	height: 100%;
	background: white;
	
}
.menu.displayed {
	display: block;
}

.menu p.title {
	font-weight: bold;
}

.main {
	padding: 1em;
}

.error-container, .form-container {
	/*padding-top: 15%; */
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center;     /* Centers vertically */
	height: 100vh;
	font-size: 2.5vh;
	margin: 0 2em;
}

.error-container {
	flex-direction: column;
}

.submit-form td:first-child {
	text-align: right;
}

.logo, .centered, td.centered:first-child {
	text-align: center;
}

.submit-form {
	font-size: 2.5vh;
}

.submit-form input, .submit-form select {
	display: inline-block;
}

.submit-form input, .submit-form select, .form-container button {
	width: 100%;
	font-size: 2.5vh;
}