html, body {
	margin: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.fullwidth { width: 100%; }

.blockcentred {
	height:          67%;
	display:         flex;
	margin:          50px;
	align-items:     center;
	flex-direction:  column;
	justify-content: center;
}

.blockcentredlong {
	display:         flex;
	margin:          50px;
	align-items:     center;
	flex-direction:  column;
	justify-content: center;
}
@media only screen and (max-width: 800px) {
	.blockcentred, .blockcentredlong { margin: 5px; }
}

.topnav {
	background-color: black;
	overflow:         hidden;
	height:           50px;
}

.topnav a {
	background: #333;
}

.topnav .logout {
	color:      white;
	float:      right;
	text-align: center;
	padding:    14px 16px;
}

.backnav {
	padding:    14px 0px;
}

input.visiblevalidity:invalid {
	border: 2.5px solid red;
}

td.label {
	text-align:  right;
}

table.datatable {
	display:         block;
	white-space:     nowrap;
	overflow:        scroll;
	width:           100%;
	font-size:       x-small;
	border-collapse: collapse;
}
@media only screen and (min-width: 1000px) {
	table.datatable { 
		width:     auto;
		font-size: small;
	}
}
@media only screen and (min-width: 1600px) {
	table.datatable { 
		font-size: large;
	}
}
table.datatable th, td {
	text-align:  left;
	padding: 8px 8px;
}
table.datatable tr:nth-child(4n+2), table.datatable tr:nth-child(4n+3) {
	background: #faf5f5;
}

.inputmessage {
	position:       absolute;
	padding-left:   10px;
	padding-top:    5pt;
	padding-bottom: 5pt;
	font-style:     italic;
	font-weight:    lighter;
	font-size:	smaller;
}
@media only screen and (max-width: 1000px) {
	.inputmessage { font-size: x-small; }
}

body {
	background:  white;
	color:       #12123a;
}
@media only screen and (min-width: 1001px) {
	body { font-size: larger; }
}

a {
	color:           #241058;
	background:      #f8f8f8;
	text-decoration: none;
}

hr {
	border-style:  solid;
	border-radius: 1px;
	height:        1px;
	background:    white;
}

input, button, select {
	background:    white;
	color:         #16163d;
	border:        solid #14143c;
	border-radius: 5pt;
	border-width:  1.5pt;
	padding:       5pt;
	box-shadow:    2px 2px 5px 0px white;
	font-family:   Arial, Helvetica, sans-serif;
}
@media only screen and (min-width: 1001px) {
	input, button { font-size: medium; }
}

input:focus {
	outline:       2px solid #12123a;
}

button, select {
	font-size:  medium;
	padding:    10px 10px;
	background: #fefefe;
	color:      #111;
}

button:hover, select:hover {
	background: #ff5512;
	color:      white;
	box-shadow: 2px 2px 2px 0px white;
}

button:active, select:active {
	background: #ccc;
	color:      #111;
	box-shadow: 2px 2px 2px 0px white;
}
@media only screen and (max-width: 800px) {
	button { padding: 8px 2px; }
}

button.caution {
	background: #fc5413;
}

.verticalmenu {
	width: 400px;
}
@media only screen and (max-width: 800px) {
	.verticalmenu { width: 100% }
}

.verticalmenu a {
	background-color: #eee;
	color:            #16163d;
	display:          block;
	padding:          16px;
}

.verticalmenu a:hover {
	background-color: #ccc;
}

.verticalmenu a.active {
	background: #fc7c0b;
	color:      white;
}

.hidden {
	display: none !important;
}