@font-face {
	font-family: 'Atkinson Hyperlegible';
	src: url('/static/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Regular.woff2')
}

@font-face {
	font-family: 'Atkinson Hyperlegible';
	src: url('/static/fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Bold.woff2')
	font-weight: bold;
}

html {
	overflow-y: scroll;
}

body {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	margin: 0;
}

main {
	padding: 1em;
}

a {
	color: blue;
        text-decoration: none;
}

a:hover {
	color: red;
}

a img {
	transition: 0.5s;
}

a:hover img {
	transform: scale(1.5) rotate(-10deg);
}

/* Inputs */

table input[type="text"] {
	border: none;
	background-color: transparent;
	outline: none;
	padding: 0.5em 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.normal-input {
	border: 1px solid black;
	background-color: initial !important;
	outline: initial !important;
	padding: initial !important;
	margin: initial !important;
	height: initial !important;
	width: initial !important;
}

textarea {
	height: 6em;
	width: 40em;
}

/* Buttons */

button,
.bigbutton,
.badbutton {
	background: none;
	border: none;
	color: blue;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
}

button:hover {
	color: red;
}

.bigbutton {
	background: green;
	color: white;
	padding: 1em;
}

.badbutton {
	background: red;
	color: white;
	padding: 1em;
}

.bigbutton:hover {
	background: darkgreen;
	color: white;
}

.badbutton:hover {
	background: darkred;
	color: white;
}	

/* Sections */

div.sections {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

section {
	border: 1px solid black;
	box-shadow: 4px 4px 0 0 black;
	padding: 1em;
	margin: 1em;

	min-width: 20%;
	min-height: 10%;
}

/* Navs */

nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: darkblue;
	color: white;
	padding: 0 1em;
	font-weight: bold;
}

nav a {
	color: white;
}

div.subnav {
	background-color: lightmagenta;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

div.subnav > div {
	margin: 1em;
}

#back {
	flex: 1;
	justify-content: flex-start;
}

#logo {
	flex: 1;
	justify-content: center;
	text-align: center;
}

#logout {
	flex: 1;
	justify-content: flex-end;
	text-align: right;
}

/* Tables */

table {
	border-collapse: collapse;
}

table.fixed {
	table-layout: fixed;
	width: 100%;
}

table#filter {
	padding: 1em;
}

col.select {
	width: 5%;
	white-space: nowrap;
}

td {
	width: auto;
}

th {
	cursor: pointer;
	background: lightgray;
}

th,
td {
	border: 1px solid lightgray;
	text-align: left;
	padding: 0.2em;
}

th.action,
td.action {
	width: 2em;
}

table#filter td {
	padding: 0;
}

tr:nth-child(even) {
	background: whitesmoke;
}

tr:hover {
	background: papayawhip;
}

/* Misc */

pre {
	margin: 2em;
	font-size: 1.2em;
}

div.aligned {
	display: grid;
	grid-template-columns: max-content max-content;
	grid-gap: 5px;
}

/*
div.aligned > span:nth-child(odd) {
	font-weight: bold;
}
*/

div.right {
	text-align: right;
}

ul.no-bullets {
	list-style-type: none;
	padding: 0;
}

.menu-item {
	display: inline-block;
	padding: 2em;
	text-align: center;
}

.inactief {
	text-decoration: line-through;
}

.voornaam {
	font-weight: bold;
}

.gebruikersnaam,
.paswoord {
	font-family: monospace;
	font-weight: inherit;
}

.upn-suffix {
	color: gray;
}

@media screen and (max-width: 600px) {

	table {
		width: 100%;
	}

	table a,
	table button {
		background: blue;
		display: inline-block;
		color: white;
		padding: 1em 2em;
	}

	table#filter input {
		padding: 1em;
	}

	table thead {
		display: none;
	}
	table tr {
		border: 1px solid black;
		box-shadow: 4px 4px 0 0 black;
		display: block;
		margin-bottom: 2em;
	}
	table td {
		display: block;
		overflow: auto;
		text-align: right;
	}
	table td::before {
		content: attr(class);
		float: left;
		font-weight: bold;
	}

	textarea {
		width: 100%;
	}

}

.sync-started,
.sync-running,
.sync-notrunning {
	color: white;
	text-align: center;
	padding: 2em 1em;
}

.sync-started {
	background-color: darkorange;
}

.sync-running {
	background-color: darkred;
}

.sync-notrunning {
	background-color: darkgreen;
}