@font-face {
	font-family: 'Roboto';
	src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
	font-family: 'Roboto Bold';
	src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
	font-family: 'Roboto Light';
	src: url(../fonts/Roboto-Light.ttf)
}

:root {
	--font: 'Roboto', sans-serif;
	--font-bold: 'Roboto Bold', sans-serif;
	--font-light: 'Roboto Light', sans-serif;
	--font-letter-spacing: 0.5px;
	--font-size: 16px;
	--font-size-title: 28px;
	--font-size-input: 15px;
	--font-size-header: 15px;
	--font-size-button: 19px;
	--font-size-subtext: 16px;
	--color-brand-red: #a72b4d;
	--color-brand-grey: #30373f;
	--color-med-grey: #a8a6a3;
	--color-light-grey: #eeeeee;
	--height-header: 75px;
	--height-footer: 20px;
	--height-login-footer: 50px;
	--height-input: 42px;
	--height-button: 42px;
	--height-grid-button: 36px;
	--height-multiselect: 250px;
	--height-modal-small: 260px;
	--height-modal-medium: 300px;
	--height-modal-large: 400px;
	--padding-width-container: 5%;
	--padding-height-container: 20px;
	--padding-height-container-small: 85px;
	--padding-input: 10px;
	--padding-button: 7px;
	--margin-top-inner: 3%;
	--margin-height-title: 20px;
}

/* Grid */

div.fill {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	width: 100%;
}

	div.fill > div {
		position: relative;
	}

	div.fill.bottom {
		align-items: end;
	}

	div.fill div.top {
		grid-row: 1;
	}

	div.fill div.one {
		grid-column: 1;
	}

	div.fill div.two {
		grid-column: 2;
	}

	div.fill div.three {
		grid-column: 3;
	}

	div.fill div.four {
		grid-column: 4;
	}

	div.fill div.first_half {
		grid-column: 1 / 3;
	}

	div.fill div.middle_half {
		grid-column: 2 / 4;
	}

	div.fill div.last_half {
		grid-column: 3 / 5;
	}

	div.fill div.first_three {
		grid-column: 1 / 4;
	}

	div.fill div.last_three {
		grid-column: 2 / 5;
	}

	div.fill div.full {
		grid-column: 1 / 5;
	}

	div.fill div.three_high {
		grid-row: span 3;
	}

	div.fill div.five_high {
		grid-row: span 5;
	}

/* Header */

div.header {
	height: var(--height-header);
	background-color: var(--color-brand-red)
}

	div.header span.version {
		position: absolute;
		top: calc(var(--height-header) - 15px);
		color: white;
		font-size: 10px;
	}

	div.header nav {
		display: flow-root;
		height: var(--height-header);
	}

		div.header nav ul.menu_links {
			padding-top: 1rem;
		}

			div.header nav ul.menu_links a.menu_link {
				margin: 0 2%;
				text-decoration: none;
			}

			div.header nav ul.menu_links a.menu_link, div.header div.header_top a {
				color: white;
				font-size: var(--font-size-header);
				display: inline-block;
				padding-right: 5px;
			}

				div.header nav ul.menu_links a.menu_link:hover {
					color: var(--color-brand-grey);
				}

	div.header div.header_top {
		text-align: right;
	}

		div.header div.header_top a.logged_in_menu {
			display: block;
			padding-top: 3rem;
		}

			div.header div.header_top a.logged_in_menu + table.header_menu {
				z-index: 1;
				display: none;
				position: absolute;
				top: calc(var(--height-header) - 5);
				right: 0;
				margin: 0;
				padding: 0;
				text-align: center;
				background-color: var(--color-brand-red);
			}

				div.header div.header_top a.logged_in_menu:hover + table.header_menu, div.header div.header_top a.logged_in_menu + table.header_menu:hover {
					display: table;
				}

				div.header div.header_top a.logged_in_menu + table.header_menu table a {
					margin: 0;
					padding: 10px 0;
					width: calc(100% - 2px);
					font-size: var(--font-size-button);
					color: white;
					border: 1px solid transparent;
				}

					div.header div.header_top a.logged_in_menu + table.header_menu table a:hover {
						background-color: white;
						color: var(--color-brand-red);
						border: 1px solid var(--color-brand-red);
					}

	div.header a.menu_icon {
		display: none;
		float: right;
		padding: 16px 20px;
	}

		div.header a.menu_icon > img {
			height: 40px;
		}

/* Page body */

body, form.content {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-family: var(--font);
	font-size: var(--font-size);
	letter-spacing: var(--font-letter-spacing);
	text-align: center;
}

	form.content div.container {
		padding: var(--padding-height-container) var(--padding-width-container);
		min-height: calc(100vh - var(--height-header) - var(--height-footer) - (2 * var(--padding-height-container)));
	}

		form.content div.container.small {
			padding: var(--padding-height-container-small) var(--padding-width-container);
			min-height: calc(100vh - var(--height-header) - var(--height-footer) - (2 * var(--padding-height-container-small)));
		}

		form.content div.container span.message {
			display: block;
			margin: 5px;
			padding: 10px;
			color: red;
			font-family: var(--font-bold);
			background-color: lightyellow;
			border: 1px dotted red;
		}

		form.content div.container div.main_panel {
			margin: 0 auto;
			width: 90%;
		}

			form.content div.container div.main_panel div.inner {
				display: block;
				margin: 0 auto;
				padding: 40px 0;
				vertical-align: middle;
			}

			form.content div.container div.main_panel table {
				margin: 0 auto;
				width: 70%;
			}

		form.content div.container div.inner_panel {
			max-width: 375px;
			margin: var(--margin-top-inner) auto;
			padding: var(--padding-height-container) 50px;
			border: 1px solid var(--color-med-grey);
			border-radius: 5px;
			background-color: white;
		}

			form.content div.container div.inner_panel span.title {
				margin-bottom: 50px;
			}

			form.content div.container div.inner_panel div.fill {
				gap: 35px;
			}

div.left, table.left {
	text-align: left;
}

div.center {
	text-align: center;
}

div.right {
	text-align: right;
}

div.nobreak {
	white-space: nowrap;
}

div.overlay {
	z-index: 1;
}

div.scroll_div {
	overflow-x: auto;
	white-space: nowrap
}

	div.scroll_div > div.fill {
		min-width: 500px;
	}

	div.scroll_div div:not(.nobreak) {
		white-space: normal;
	}

div.hints_panel {
	padding: 10px 20px;
	margin-bottom: 50px;
	text-align: left;
	font-style: italic;
}

.hide {
	display: none;
}

/* Footer */

div#footer {
	position: relative;
	width: 100%;
	height: var(--height-footer);
	font-size: var(--font-size-subtext);
	color: white;
	background-color: var(--color-brand-grey);
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

	div#footer a {
		color: white;
		text-decoration: underline;
	}

/* Labels */

span.title {
	display: block;
	margin: var(--margin-height-title) 0;
	font-size: var(--font-size-title);
	color: var(--color-brand-red);
}

	span.title b {
		font-weight: 600;
	}

span.subtitle {
	display: block;
	margin: 5px 0 5px 0;
	font-size: var(--font-size);
	font-weight: 600;
	color: var(--color-brand-red);
}

span.underline {
	margin: 0;
	line-height: calc(var(--font-size) + var(--height-input) + 2px);
	border-bottom: 1px solid var(--color-brand-red);
}

span.black {
	color: black;
}

span.top_label {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--font-bold);
}

span.info_label {
	font-family: var(--font-bold);
}

span.text_label {
	font-size: var(--font-size-input);
}

span.subtext {
	font-size: var(--font-size-subtext);
}

span.smalltext {
	font-size: small;
}

span.input_height {
	display: block;
	height: var(--height-input);
}

span.input_label_height {
	display: block;
	height: calc(var(--font-size) + var(--height-input) + 2px);
}

a {
	text-decoration: none;
}

p.asterix {
	display: inline;
	font-size: calc(var(--font-size) - 2px);
	color: var(--color-brand-red);
}

/* Input fields */

input, select, textarea, input[type=checkbox] + label {
	font: normal var(--font-size-input) var(--font);
	letter-spacing: var(--font-letter-spacing);
}

	input[type=text], input[type=password], select, textarea {
		float: left;
		padding: var(--padding-input);
		box-sizing: border-box;
		width: 100%;
		height: var(--height-input);
		background-color: var(--color-light-grey);
		border: none;
	}

		input[type=text].missing, input[type=password].missing, select.missing, textarea.missing {
			border: 2px solid red;
			border-radius: 5px;
		}

		select[multiple=multiple] {
			height: 250px;
			overflow: auto;
			border: 2px solid var(--color-brand-grey);
			border-radius: 5px;
		}

		input[type=text]:disabled, input[type=password]:disabled, select:disabled, textarea:disabled, input[type=checkbox]:disabled {
			color: rgb(170, 170, 170);
			opacity: 0.7;
		}

:not(span.checkbox_small) > input[type=checkbox] {
	height: calc(var(--height-input) / 4);
	width: calc(var(--height-input) / 4);
}

	:not(span.checkbox_small) > input[type=checkbox] + label {
		line-height: calc(var(--height-input) + 8px);
	}

span.checkbox_small input[type=checkbox] + label {
	font-size: smaller;
}

div.bottom > input[type=checkbox] + label {
	line-height: calc(var(--font-size) + var(--height-input) + 2px);
}

/* Buttons */

input[type=submit], input[type=button] {
	width: 24%;
	height: var(--height-button);
	padding: var(--padding-button);
	color: white;
	font-family: var(--font-light);
	font-size: var(--font-size-button);
	background-color: var(--color-brand-red);
	border: 1px solid transparent;
	border-radius: 5px;
}

	input[type=submit]:hover, input[type=button]:hover, input[type=submit]:disabled, input[type=button]:disabled {
		color: var(--color-brand-red);
		background-color: white;
		border-color: var(--color-brand-red);
	}

	input[type=submit].button_large, input[type=button].button_large {
		width: 100%;
	}

	input[type=submit].button_half, input[type=button].button_half {
		width: 45%;
	}

	input[type=submit].right {
		float: right;
	}

	input[type=submit].cancel, input[type=button].cancel {
		background-color: var(--color-med-grey);
	}

		input[type=submit].cancel:hover, input[type=button].cancel:hover, input[type=submit].cancel:disabled, input[type=button].cancel:disabled {
			color: var(--color-med-grey);
			background-color: white;
			border-color: var(--color-med-grey);
		}

div.fill > div > input[type=button].arrows {
	display: block;
	margin-left: 50%;
	margin-top: calc((var(--height-multiselect) + (2 * (var(--height-input) + var(--padding-input))) + var(--font-size) + 2px) / 2);
}

	div.fill > div > input[type=button].arrows + input[type=button].arrows {
		margin-top: 25px;
	}

div.dashboard {
	margin: 5% auto;
	max-width: 1050px;
}

	div.dashboard input[type=button] {
		margin: 10px 4px;
	}

div.fill > div > input[type=submit],
div.fill > div > input[type=button] {
	margin-top: calc(var(--font-size) + 3px);
}

/* Tables */

div.scroll_table {
	margin: 25px auto;
	white-space: nowrap;
	overflow-x: auto;
	width: 100%;
}

table {
	width: 100%;
}

	table.info {
		margin-top: 10%;
	}

	table.datagrid {
		border: 1px solid white;
	}

		table.datagrid tr {
			background-color: white;
		}

			table.datagrid tr.table_header, table.info tr.table_header {
				background-color: var(--color-brand-grey);
				color: white;
			}

				table.datagrid tr.table_header a {
					color: white;
				}

			table.datagrid tr.table_alternating {
				background-color: var(--color-light-grey);
			}

		table.datagrid td {
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 5px;
			max-width: 200px;
		}

			table.datagrid td input[type=text], table.datagrid td select {
				width: 100%;
				font-size: var(--font-size);
				border: 2px solid var(--color-brand-grey);
				border-radius: 3px;
			}

			table.datagrid td input[type=submit], table td input[type=button] {
				padding: 5px;
				font-size: var(--font-size);
			}

				table.datagrid td input[type=submit]:not([class]), table td input[type=button]:not([class]) {
					width: 100%;
				}

	table td.fixed_column_right, table td.fixed_column_left {
		position: sticky;
		background: inherit;
		border-left: inherit;
	}

	table td.fixed_column_right {
		right: 0;
	}

	table td.fixed_column_left {
		left: 0;
	}

/* Calendars */

.ajax__calendar_container {
	z-index: 1;
}

img.calendar {
	pointer-events: none;
	position: absolute;
	top: 25px;
	right: 0px;
	width: 30px;
}

	img.calendar.nolabel {
		top: 7px;
	}

table.datagrid td.table_date {
	position: relative;
	min-width: 130px;
	overflow: visible;
}

	table.datagrid td.table_date img.calendar {
		top: 11px;
		right: 5px;
	}

/* Modals */

div.modal_background {
	background-color: #666699;
	opacity: 0.7;
}

div.modal_large, div.modal_small, div.modal_medium {
	outline: 10px outset var(--color-brand-grey);
	background-color: white;
}

div.modal_large {
	width: 980px;
	height: var(--height-modal-large);
}

	div.modal_large iframe {
		height: calc(var(--height-modal-large) - var(--height-button));
	}

div.modal_medium {
	width: 75%;
	max-width: 600px;
	height: var(--height-modal-medium);
}

	div.modal_medium iframe {
		height: calc(var(--height-modal-medium) - var(--height-button));
	}

div.modal_small {
	height: var(--height-modal-small);
}

	div.modal_small input, div.modal_small_inner input {
		margin-top: 25px;
	}

		div.modal_small input.button_large {
			width: 90%;
		}

	div.modal_large div.fill > div > input.cancel, div.modal_medium div.fill > div > input.cancel, div.modal_small div.fill > div > input.cancel {
		margin-top: 0;
	}

div.modal_medium_inner select {
	float: none;
	height: 70vh;
	border: 2px solid var(--color-brand-grey);
	border-radius: 2px;
}

div.modal_small_inner {
	margin: calc(var(--height-modal-small) * 0.25) auto;
}

	div.modal_small_inner span {
		display: block;
		font-family: var(--font-bold);
	}

	div.modal_small_inner > span:first-child {
		margin-top: 50px;
	}

	div.modal_small_inner p {
		margin: 0;
	}

iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Login */

form.content.login {
	background-color: var(--color-light-grey);
}

	form.content.login div.container.small {
		min-height: calc(100vh - var(--height-header) - var(--height-login-footer) - (2 * var(--padding-height-container-small)))
	}

	form.content.login span.title.black {
		margin-top: calc(var(--margin-top-inner) + var(--margin-height-title) + var(--padding-height-container))
	}

	form.content.login img.img_large {
		width: 100%;
		max-width: 900px;
	}

	form.content.login div#footer {
		height: var(--height-login-footer);
		color: black;
		background: none;
		white-space: normal;
	}

		form.content.login div#footer a {
			color: black;
		}

/* Change Password */

p.valid {
	color: green;
}

	p.valid:before {
		content: "✔";
		margin: 0 5px;
	}

p.invalid {
	color: red;
}

	p.invalid:before {
		content: "✖";
		margin: 0 5px;
	}


/* Responsive */

@media print {
	form.content {
		width: 950px;
	}
}

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

	:root {
		--padding-height-container: 50px;
	}

	/* Grid */

	div.fill div.device_hide {
		display: none;
	}

	div.fill div.device_one {
		grid-column: 1;
	}

	div.fill div.device_two {
		grid-column: 2;
	}

	div.fill div.device_three {
		grid-column: 3;
	}

	div.fill div.device_four {
		grid-column: 4;
	}

	div.fill div.device_first_half {
		grid-column: 1 / 3;
	}

	div.fill div.device_middle_half {
		grid-column: 2 / 4;
	}

	div.fill div.device_last_half {
		grid-column: 3 / 5;
	}

	div.fill div.device_first_three {
		grid-column: 1 / 4;
	}

	div.fill div.device_last_three {
		grid-column: 2 / 5;
	}

	div.fill div.device_full {
		grid-column: 1 / 5;
	}

	div.fill div.device_row_two {
		grid-row: 2;
	}

	div.fill div.device_row_four {
		grid-row: 4;
	}

	div.fill div.device_row_five {
		grid-row: 5;
	}

	div.fill div.device_row_six {
		grid-row: 6;
	}

	div.fill div.device_row_seven {
		grid-row: 7;
	}

	div.fill div.device_row_ten {
		grid-row: 10;
	}

	div.fill div.device_row_eleven {
		grid-row: 11;
	}

	div.fill div.device_row_twelve {
		grid-row: 12;
	}

	/* Header */

	div.header {
		padding: 0 var(--padding-width-container);
	}

		div.header a.menu_icon {
			display: inline-block;
			padding-right: 0;
		}

		div.header nav ul.menu_links {
			z-index: 1;
			display: none;
			position: absolute;
			top: var(--height-header);
			right: 0;
			margin: 0;
			padding: 0;
			background-color: var(--color-brand-red);
		}

			div.header nav:hover ul.menu_links, div.header nav ul.menu_links:hover {
				display: block;
			}

			div.header nav ul.menu_links > a.menu_link {
				margin: 0;
				padding: 10px 0;
				width: calc(100% - 2px);
				font-size: var(--font-size-button);
				text-align: center;
				color: white;
				border: 1px solid transparent;
			}

				div.header nav ul.menu_links > a.menu_link:not(:last-child) {
					border-bottom: 1px solid;
				}

				div.header nav ul.menu_links > a.menu_link:hover {
					background-color: white;
					color: var(--color-brand-red);
					border: 1px solid var(--color-brand-red);
				}

		div.header div.header_top a.logged_in_menu {
			padding: 0;
			color: var(--color-brand-red);
		}

	/* Page Body */

	div.device_left {
		text-align: left;
	}

	div.right span {
		padding-right: 5px;
	}

	div.nobreak {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Buttons */

	div.dashboard input[type=button], input[type=button].button_large, input[type=button].device_button_large, input[type=submit].button_large, input[type=submit].device_button_large {
		width: 100%;
	}
}

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

	div.fill div.device_middle_half {
		grid-column: 1 / 5;
	}

	form.content div.container div.inner_panel {
		padding: 25px 15px;
	}

	div.modal_small {
		top: 10px !important;
		left: 10px !important;
	}
}

@media screen and (max-width: 300px) {
	div.header img.logo {
		width: 80%;
	}

	input[type=button].button_large, input[type=submit].button_large, input[type=button].device_button_large, input[type=submit].device_button_large {
		font-size: var(--font-size-subtext);
	}
}