body {
	font-family: 'Work Sans', sans-serif;
}

input[type="text"],
input[type="number"],
input[type="email"] {
	font-family: 'Work Sans', sans-serif;
	font-size: 1.8em;
	outline: none;
	padding: 0.6em;
	border-radius: 0.1em;
	border: solid 1px #666666;
	color: #666666;
	box-sizing: border-box;
	display: block;
	min-width: 80vmin;
	transition: border 0.2s, color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus {
	color: #434343;
	border-color: #434343;
	box-shadow: 0 0 1em #434343;
}

select {
	display: inline-block;
	flex: 1;
	font-size: 1.8em;
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: auto;
	max-width: 100%;
	min-width: 80vmin;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: 2px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23402B7C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	cursor: pointer;
}

select:hover {
	border-color: #888;
}

select:focus {
	border-color: #aaa;
	color: #222;
	outline: none;
}

select:disabled {
	cursor: no-drop;
	opacity: 0.5;
}

select option {
	font-weight:normal;
}

.center {
	text-align: center;
}

.bold {
	font-weight: 700;
}

.bigger {
	font-size: 1.3em;
}

.row {
	margin-bottom: 1.2em;
}

.json-input {
	display: none;
}

.fancy-checker {
	cursor: pointer;
	position: relative;
	padding-left: 1.5em;
	user-select: none;
}

.fancy-checker input {
	display: none;
}

.fancy-checker .check {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	display: block;
	border: solid 1px currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	transition: background-color 0.2s, box-shadow 0.2s;
}


.fancy-checker:hover input ~ .check {
	box-shadow: 0 0 4px currentColor;
}

.check::after {
	content: '';
	position: absolute;
	display: none;
}

.fancy-checker:not(.checkmark) input:checked ~ .check::after {
	display: block;
}

.fancy-checker:not(.checkmark) .check::after {
	position: absolute;
	border-radius: 50%;
	background-color: currentColor;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
}

.fancy-checker.checkmark .check svg {
	position: absolute;
	width: 180%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-37%, -70%);
	fill: rgb(13, 143, 86);
	stroke: #212121;
	stroke-width: 2px;
}

.fancy-checker.disabled {
	opacity: 0.8;
	cursor: no-drop;
}

.fancy-checker.checkmark input:not(:checked) ~ .check svg,
.fancy-checker.checkmark.disabled .check svg {
	display: none;
}

.error {
	padding: 3vmin;
	background-color: #CF797A;
	border-radius: 2px;
	margin-bottom: 1em;
	display: none;
	color: #212121 !important;
	font-size: 2em;
	text-shadow: none !important;
}

.instant-success {
	display: none;
	position: fixed;
	z-index: 10000;
	width: 30vmin;
	height: 30vmin;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	border: solid 1em rgba(0, 145, 37, 1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.instant-success svg {
	position: absolute;
	width: 60%;
	height: auto;
	fill: rgba(0, 145, 37, 1);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.shade {
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.8);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20vmin;
	background-color: #402B7C;
}

.header .branding-h1 {
	display: flex;
	gap: 2em;
	justify-content: center;
	align-items: center;
}

.header .branding-h1 .branding {
	height: 12vmin;
	flex-basis: 12vmin;
	flex-grow: 0;
	flex-shrink: 0;
	background-image: url('https://adextesting.org/images/adex/color/logo-name-vert.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.header .branding-h1 h1 {
	font-size: 2.5em;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 0.125em;
	margin: 0;
	padding: 0;
}

.header .exam-title-code {
	font-size: 1.1em;
	text-align: center;
	margin-top: 1em;
	color: #ffffff;
}

.controller,
.admin,
.unlogged {
	position: absolute;
	overflow: auto;
	top: 22vmin;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	padding: 4vmin;
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.4);
	z-index: 10000;
	display: none;
}

.loading:after {
	content: '';
	display: block;
	position: absolute;
	width: 50vmin;
	height: 50vmin;
	border-top: solid 0.5em rgba(0, 0, 0, 0.6);
	border-left: solid 0.5em rgba(0, 0, 0, 0.6);
	border-right: solid 0.5em rgba(0, 0, 0, 0.6);
	border-bottom: solid 0.5em transparent;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: loading 1.2s infinite linear;
}

@keyframes loading {
	0% {	
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.buttons {
	display: flex;
	justify-content: center;
	gap: 2em;
}

.buttons .method-button,
.buttons .action-button {
	display: block;
	padding: 4vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 4vmin;
	border-radius: 0.1em;
	color: #ffffff !important;
	text-shadow: none !important;
	background-color: #003E5C;
	box-sizing: border-box;
}

.buttons .method-button:active,
.buttons .action-button:active {
	background-color: #212121;
}

.controller .directions {
	font-size: 1.1em;
	line-height: 1.6;
	margin-bottom: 2em;
}

.controller .runner-form,
.admin .runner-form {
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	gap: 1.3em;
	align-items: center;
	min-width: 80vmin;
	margin-left: auto;
	margin-right: auto;
	max-width: 80vmin;
}

.controller .runner-form .field,
.admin .runner-form .field {
	
}

.admin .runner-form .field.verified {
	font-size: 1.9em;
	font-weight: 700;
	margin-top: 1.6em;
	margin-bottom: 1.6em;
	text-align: center;
}

.controller .runner-form .field label,
.admin .runner-form label {
	display: block;
	margin-bottom: 0.3em;
	font-size: 1.2em;
}

.admin .runner-form .dates {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 80vmin;
	margin: 0 auto;
}

.admin .runner-form .dates .date {
	display: flex;
	justify-content: space-between;
	gap: 2em;
}

.admin .runner-form .dates .date select {
	min-width: 0;
	vertical-align: middle;
}

.admin .runner-form .dates .date .runner-date-remove-button {
	width: 3em;
	height: 3em;
	display: inline-block;
	margin-left: 0.5em;
	background-color: #ababab;
	border-radius: 50%;
	position: relative;
	vertical-align: middle;
}

.admin .runner-form .dates .date .runner-date-remove-button:active {
	background-color: #212121;
}

.admin .runner-form .dates .date .runner-date-remove-button:before {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 60%;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.admin .runner-form .dates .date .runner-date-remove-button:after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 60%;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.admin .runner-form .runner-date-add-button {
	display: inline-block;
	line-height: 1;
	font-size: 1.5em;
	text-transform: uppercase;
	padding: 0.5em;
	border-radius: 0.3em;
	border: solid 0.1em #ababab;
	color: #ababab;
	text-decoration: none;
}

.admin .runner-form .runner-date-add-button:active {
	border-color: #212121;
	color: #212121;
}

.admin .runner-form .dates .date:only-child .runner-date-remove-button {
	display: none;
}

.controller .runner-terms {
	margin-bottom: 2em;
	font-size: 1.1em;
	line-height: 1.6;
}

.admin .admin-button,
.admin .admin-action-button {
	display: block;
	padding: 4vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 4vmin;
	border-radius: 0.1em;
	color: #ffffff !important;
	text-shadow: none !important;
	background-color: #003E5C;
	box-sizing: border-box;
}

.admin .admin-button:active,
.admin .admin-action-button:active {
	background-color: #212121;
}

.admin .admin-menu {
	display: flex;
	flex-direction: column;
	max-width: 100vmin;
	gap: 1.5em;
	margin: 0 auto;
}

.admin .admin-buttons {
	display: flex;
	margin-bottom: 2em;
	gap: 2em;
	justify-content: space-between;
	align-items: center;
}

.admin .form-title {
	font-weight: 700;
	font-size: 2em;
}

.admin .admin-menu .runner {
	display: flex;
	justify-content: space-between;
	gap: 2em;
	
}

.admin .admin-menu .runner .name {
	font-size: 2em;
}

.admin .admin-menu .runner .runner-buttons {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.admin .admin-menu .runner .runner-buttons .unverified {
	color: #989898;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 1.3em;
}

.admin .admin-menu .runner .runner-buttons .unverified:after {
	content: 'unverified';
}

.admin .admin-menu .runner .runner-buttons a {
	display: block;
	width: 3em;
	flex-basis: 3em;
	height: 3em;
	border: solid 1px #ababab;
	border-radius: 50%;
	position: relative;
}

.admin .admin-menu .runner .runner-buttons a:active {
	border-color: #212121;
}

.admin .admin-menu .runner .runner-buttons .runner-edit-button svg {
	width: 60%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: #ababab;
}

.admin .admin-menu .runner .runner-buttons .runner-edit-button:active svg {
	fill: #212121;
}

.admin .admin-menu .runner .runner-buttons .runner-delete-button:before {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 60%;
	background-color: #ababab;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.admin .admin-menu .runner .runner-buttons .runner-delete-button:after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 60%;
	background-color: #ababab;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.admin .admin-menu .runner .runner-buttons .runner-delete-button:active:before,
.admin .admin-menu .runner .runner-buttons .runner-delete-button:active:after {
	background-color: #212121;
}

.popup {
	display: none;
	position: fixed;
	z-index: 1000;
	font-size: 1.5em;
	background-color: rgba(240, 209, 163, 1);
	border-radius: 0.1em;
	padding: 1em;
	text-align: center;
	max-width: 90%;
	max-height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup .text {
	margin-bottom: 1.2em;
}

.popup .buttons {
	display: flex;
	justify-content: center;
	gap: 0.5em;
}

.popup .buttons a {
	display: block;
	padding: 4vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 4vmin;
	border-radius: 0.1em;
	color: #ffffff !important;
	text-shadow: none !important;
	background-color: #003E5C;
	box-sizing: border-box;
}

.popup .buttons a:active {
	background-color: #212121;
}