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

select {
	font-family: 'Work Sans', sans-serif !important;
}

.smaller {
	font-size: 0.75em;
}

.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%);
}

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

.header .loggedbar .admin-toggle-button {
	color: #ffffff;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	padding: 0.3em;
	border: solid 1px #ffffff;
	border-radius: 3px;
	line-height: 1;
}

.controller .session-start-initial-evaluation-candidate-button .start-time,
.controller .evaluation-candidate-button .start-time,
.admin .admin-button .attempt {
	text-transform: none;
	font-size: 0.7em;
	font-weight: 300;
}

.controller .evaluation-procedure-button .indicator,
.controller .evaluation-standalone-criteria-button .indicator {
	display: none;
	margin-left: 1em;
	height: 1em;
	width: 1em;
	background-color: #ffffff;
	vertical-align: middle;
	border-radius: 50%;
	position: relative;
}

.controller .evaluation-procedure-button .indicator svg,
.controller .evaluation-standalone-criteria-button .indicator svg {
	width: 70%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: rgba(0, 145, 37, 1)
}

.controller .evaluation-procedure-button.complete .indicator,
.controller .evaluation-standalone-criteria-button.complete .indicator {
	display: inline-block;
}

.controller .evaluation,
.admin .evaluation {
	
}

.controller .evaluation .candidate-vitals,
.admin .evaluation .candidate-vitals {
	display: flex;
	justify-content: flex-end;
	font-size: 0.8em;
	margin-bottom: 1.4em;
}

.controller .evaluation .criteria,
.admin .evaluation .criteria {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	margin-bottom: 2em;
}

.controller .evaluation .procedure-checker-holder,
.admin .evaluation .procedure-checker-holder {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 2em;
}

.controller .evaluation .procedure-checker-holder .procedure,
.admin .evaluation .procedure-checker-holder .procedure {
	font-size: 1.2em;
	font-weight: 700;
	color: #cfcfcf;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	text-align: center;
	transition: font-size 0.2s, color 0.2s;
}

.controller .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker,
.admin .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker {
	display: flex;
	gap: 1em;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	color: #212121;
	font-weight: 700;
	font-size: 0.8em;
	transition: font-size 0.2s;
}

.controller .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker,
.admin .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker {
	font-size: 1em;
}

.controller .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker .check,
.admin .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker .check {
	display: block;
	flex-basis: 1.5em;
	width: 1.5em;
	height: 1.5em;
	border: solid 2px #212121;
	border-radius: 50%;
	position: relative;
	transition: background 0.2s;
}

.controller .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker .check,
.admin .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker .check {
	background-color: rgba(0, 145, 37, 0.7);
}

.controller .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker .check svg,
.admin .evaluation .procedure-checker-holder .checker .criteria-procedure-error-checker .check svg {
	position: absolute;
	width: 65%;
	height: auto;
	top: 50%;
	left: 50%;
	fill: #ffffff;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s;
}

.controller .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker .check svg,
.admin .evaluation .procedure-checker-holder.no-procedure-errors .checker .criteria-procedure-error-checker .check svg {
	opacity: 1;
}

.controller .evaluation .history,
.admin .evaluation .history {
	margin-bottom: 2em;
}

.controller .evaluation .criteria .criterion,
.admin .evaluation .criteria .criterion {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	padding-bottom: 1.2em;
	border-bottom: solid 1px #dfdfdf;
	transition: padding 0.2s, border 0.2s;
}

.controller .evaluation .criteria .criterion.no-procedure-errors,
.admin .evaluation .criteria .criterion.no-procedure-errors {
	padding-bottom: 0;
	border-bottom: 0;
}

.controller .evaluation .criteria .criterion .title,
.admin .evaluation .criteria .criterion .title,
.controller .evaluation .history .title,
.admin .evaluation .history .title {
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	transition: font-size 0.2s, color 0.2s;
}

.controller .evaluation .criteria .criterion.no-procedure-errors .title,
.admin .evaluation .criteria .criterion.no-procedure-errors .title {
	font-size: 1em;
	color: #878787;
}

.controller .evaluation .criteria .criterion .errs,
.admin .evaluation .criteria .criterion .errs,
.controller .evaluation .history .errs,
.admin .evaluation .history .errs {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.controller .evaluation .criteria .criterion .errs .err,
.admin .evaluation .criteria .criterion .errs .err,
.controller .evaluation .history .errs .err,
.admin .evaluation .history .errs .err {
	display: flex;
	justify-content: center;
}

.controller .evaluation .criteria .criterion .errs .err .criteria-error-checker,
.admin .evaluation .criteria .criterion .errs .err .criteria-error-checker,
.controller .evaluation .history .errs .err .history-error-checker,
.admin .evaluation .history .errs .err .history-error-checker {
	flex-grow: 0;
	flex-shrink: 1;
	display: block;
	text-align: center;
	padding: 0.5em 2em;
	text-decoration: none;
	color: #212121;
	border-radius: 3px;
	transition: background 0.2s, color 0.2s;
}

.controller .evaluation .criteria .criterion .errs .err .criteria-error-checker.positive.checked,
.admin .evaluation .criteria .criterion .errs .err .criteria-error-checker.positive.checked,
.controller .evaluation .history .errs .err .history-error-checker.positive.checked,
.admin .evaluation .history .errs .err .history-error-checker.positive.checked {
	background-color: rgba(0, 145, 37, 0.7);
	color: #ffffff;
}

.controller .evaluation .criteria .criterion .errs .err .criteria-error-checker.checked:not(.positive),
.admin .evaluation .criteria .criterion .errs .err .criteria-error-checker.checked:not(.positive),
.controller .evaluation .history .errs .err .history-error-checker.checked:not(.positive),
.admin .evaluation .history .errs .err .history-error-checker.checked:not(.positive) {
	background-color: rgba(189, 0, 12, 0.7);
	color: #ffffff;
}

.controller .session-loading,
.admin .session-loading {
	width: 40vmin;
	margin: 0 auto;
	height: 4px;
	position: relative;
}

.controller .session-loading:before,
.admin .session-loading:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #dfdfdf;
	animation: sessionLoading 2s infinite ease-in-out;
}

@keyframes sessionLoading {
	0% {
		left: 0;
		right: 100%;
	}
	
	50% {
		right: 0;
		left: 0;
	}
	
	100% {
		left: 100%;
		right: 0;
	}
}

.controller .ia-psa-data-table,
.admin .ia-psa-data-table {
	margin-bottom: 1.5em;
	margin-left: auto;
	margin-right: auto;
}

.controller .ia-psa-data-table tr td,
.admin .ia-psa-data-table tr td {
	padding: 0.5em;
	text-align: center;
}

.controller .ia-psa-data-table tr.head td,
.admin .ia-psa-data-table tr.head td {
	font-size: 0.8em;
	font-weight: 300;
	text-transform: uppercase;
}

.controller .ia-psa-data-table tr td.label,
.admin .ia-psa-data-table tr td.label {
	font-size: 1.5em;
	font-weight: 700;
}

.controller .evaluation-review-procedure-holder,
.controller .evaluation-review-standalone-criteria-holder {
	margin-bottom: 1.5em;
}

.controller .evaluation-review-procedure-holder .procedure-title,
.controller .evaluation-review-standalone-criteria-holder .standalone-criteria-title {
	color: #878787;
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.125em;
	margin-bottom: 0.5em;
}

.controller .controller-back-button-holder,
.admin .admin-back-button-holder {
	text-align: right;
}

.controller .controller-back-button,
.admin .admin-back-button {
	display: inline-block;
	padding: 2vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 auto 4vmin;
	font-size: 3vmin;
	max-width: 80vmin;
	border-radius: 0.6em;
	color: #ffffff !important;
	text-shadow: none !important;
	background-color: #003E5C;
}

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

.admin .evaluation-review-candidates {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.admin .evaluation-review-candidates .candidate {
	border-bottom: solid 1px #dfdfdf;
	padding-bottom: 1em;
}

.admin .evaluation-review-candidates .candidate:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.admin .evaluation-review-candidates .candidate > .pin {
	margin-bottom: 0.5em;
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.admin .candidate-results {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.admin .candidate-results .candidate {
	padding: 1em;
	border-radius: 1em;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.admin .candidate-results .candidate .vitals {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	align-items: center;
}

.admin .candidate-results .candidate .vitals .pin {
	font-size: 1.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	flex: 1;
}

.admin .candidate-results .candidate .vitals .result {
	flex-basis: 1em;
	font-size: 2em;
	height: 1em;
	max-width: 1em;
	border-radius: 50%;
	position: relative;
	font-weight: 700;
}

.admin .candidate-results .candidate .vitals .result[result="P"] {
	background-color: rgba(0, 145, 37, 1);
}

.admin .candidate-results .candidate .vitals .result[result="F"] {
	background-color: rgba(189, 0, 12, 1);
}

.admin .candidate-results .candidate .vitals .result[result="NS"] {
	background-color: #878787;
}

.admin .candidate-results .candidate .vitals .result[result="P"]:after {
	content: 'P';
	display: block;
	position: absolute;
	color: #ffffff;
	font-size: 0.7em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.admin .candidate-results .candidate .vitals .result[result="F"]:after {
	content: 'F';
	display: block;
	position: absolute;
	color: #ffffff;
	font-size: 0.7em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.admin .candidate-results .candidate .vitals .result[result="NS"]:after {
	content: 'NS';
	display: block;
	position: absolute;
	color: #ffffff;
	font-size: 0.5em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.admin .candidate-results .candidate .release-button-holder .released-indicator {
	font-size: 0.8em;
	font-weight: 700;
	color: #878787;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	text-align: center;
}

.admin .candidate-results .candidate .attempts {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 80vmin;
	margin: 0 auto;
}

.admin .candidate-results .candidate .attempts .attempt {
	
}

.admin .candidate-results .candidate .attempts .attempt .procedures {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	font-size: 0.9em;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .procedure-result {
	display: flex;
	gap: 2em;
	justify-content: space-between;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .procedure-result .procedure {
	font-weight: 700;
	text-transform: uppercase;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .procedure-result .result {
	font-weight: 700;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .procedure-result .result[result="P"]:after {
	content: 'pass';
	color: rgba(0, 145, 37, 1);
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .procedure-result .result[result="F"]:after {
	content: 'fail';
	color: rgba(189, 0, 12, 1);
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .errs {
	font-size: 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding-left: 2em;
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .errs .err .criterion {
	
}

.admin .candidate-results .candidate .attempts .attempt .procedures .procedure .errs .err .content {
	font-weight: 300;
	font-size: 0.8em;
}

.noshow-confirm {
	position: fixed;
	width: 80%;
	z-index: 1000;
	padding: 1em;
	background-color: rgba(219, 173, 116, 0.9);
	border-raduis: 0.2em;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	font-size: 1.3em;
	text-align: center;
}

.noshow-confirm.success {
	background-color: rgba(160, 232, 172, 1);
}

.noshow-confirm .text {
	margin-bottom: 1.5em;
}

.noshow-confirm .buttons {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.noshow-confirm .buttons a {
	flex-basis: calc(50% - 0.5em);
}

.admin .noshow-button {
	display: flex;
	justify-content: space-around;
	gap: 1em;
}

.admin .noshow-button .indicator {
	display: none;
	flex-basis: 1em;
	max-width: 1em;
	height: 1em;
	background-color: #ffffff;
	position: relative;
	border-radius: 50%;
	transform: scale(1.8);
}

.admin .noshow-button .indicator:after {
	content: 'NS';
	display: block;
	position: absolute;
	color: #878787;
	font-weight: bold;
	font-size: 0.5em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.admin .noshow-button[noshow="1"] {
	background-color: #878787;
}

.admin .noshow-button[noshow="1"] .indicator {
	display: block;
}

.admin .candidates-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 3px;
}

.admin .candidates-table td {
	text-align: center;
	white-space: nowrap;
	border: solid 1px #212121;
	padding: 0.5em;
}

.admin .candidates-table thead tr {
	font-weight: 700;
	text-transform: uppercase;
	background-color: #212121;
	color: #ffffff;
	letter-spacing: 0.125em;
}

.admin .candidates-table tbody tr.complete {
	background-color: rgba(0, 145, 37, 0.3);
}

.admin .candidates-table tbody tr td.time .time-button {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	align-items: center;
}

.admin .candidates-table tbody tr td.time .time-button div {
	margin: auto;
}

.admin .candidates-table tbody tr td .candidate-start-time-edit-button {
	position: relative;
	width: 2em;
	height: 2em;
	border: solid 1px #878787;
	border-radius: 50%;
	display: inline-block;
	margin-left: 0.5em;
	vertical-align: middle;
}

.admin .candidates-table tbody tr td .candidate-start-time-edit-button svg {
	width: 60%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: #878787;
}

.admin .session-close-results {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: auto;
	margin-bottom: 2em;
}

.admin .session-close-results .result-number {
	display: flex;
	font-size: 1.5em;
	font-weight: 700;
	justify-content: center;
	gap: 1.5em;
}

.admin .cell-input.phone-input {
	text-align: center;
	border: 0;
	background-color: #dfdfdf;
	padding: 0.4em;
	width: 12em;
	box-sizing: border-box;
	font-size: 1.4em;
	letter-spacing: 0.125em;
	font-family: 'Work Sans', sans-serif;
}

.admin .candidates-hide-complete-button-holder {
	float: left;
}

.admin .candidates-hide-complete-button-holder .candidates-hide-complete-button,
.admin .candidates-hide-complete-button-holder .candidates-show-complete-button{
	display: inline-block;
	padding: 2vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 auto 4vmin;
	font-size: 3vmin;
	max-width: 80vmin;
	border-radius: 0.6em;
	color: #ffffff !important;
	text-shadow: none !important;
	background-color: #003E5C;
}

.admin .candidates-hide-complete-button-holder .candidates-hide-complete-button:active,
.admin .candidates-hide-complete-button-holder .candidates-show-complete-button:active {
	background-color: #212121;
}

.admin .new-candidates-notice {
	background-color: rgba(255, 216, 148, 1);
	border: solid 0.1em rgba(255, 162, 0, 1);
	padding: 1em;
	border-radius: 0.3em;
	margin-bottom: 1em;
}

.admin .new-candidates-notice .generic-button {
	background-color: #434343;
}

.admin .session-progress {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.admin .session-progress .session-progress-candidate-button {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	align-items: center;
	text-decoration: none;
	color: #212121;
	padding: 0.5em;
}

.admin .session-progress .session-progress-candidate-button:active {
	background-color: #212121;
	color: #ffffff;
}

.admin .session-progress .session-progress-candidate-button .pin {
	font-weight: 700;
	font-size: 1.5em;
}

.admin .session-progress .session-progress-candidate-button .icons {
	display: flex;
	align-items: center;
	gap: 1em;
}

.admin .session-progress .session-progress-candidate-button .icons .icon-holder {
	min-width: 4em;
	max-width: 4em;
	height: 4em;
}

.admin .session-progress .session-progress-candidate-button .icons .icon-holder .icon {
	width: 4em;
	height: 4em;
	display: block;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
	position: relative;
}

.admin .session-progress .session-progress-candidate-button .icons .icon-holder .icon svg {
	display: block;
	width: 60%;
	height: auto;
	fill: #ffffff;
	stroke: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.admin .session-progress .session-progress-candidate-button.noshow .icons .icon-holder .icon {
	background-color: rgba(0, 0, 0, 0.7);
}

.admin .session-progress .session-progress-candidate-button.ready .icons .icon-holder .icon {
	background-color: rgba(180, 180, 180, 0.7);
}

.admin .session-progress .session-progress-candidate-button.working .icons .icon-holder .icon {
	background-color: rgba(3, 41, 166, 0.7);
}

.admin .session-progress .session-progress-candidate-button.evaluation .icons .icon-holder .icon {
	background-color: rgba(179, 92, 0, 0.7);
}

.admin .session-progress .session-progress-candidate-button.complete .icons .icon-holder .icon {
	background-color: rgba(1, 148, 60, 0.7);
}

.admin .session-progress .session-progress-candidate-button .image-pin .pin {
	font-size: 1.2em;
	font-weight: 700;
}

.admin .session-progress .session-progress-candidate-button .status {
	font-size: 1.2em;
	font-weight: 300;
	text-transform: uppercase;
	white-space: nowrap;
}

.candidate-pin-input {
	text-align: center;
	font-family: 'Work Sans', sans-serif !important;
	width: 30em;
	max-width: calc(100vmin - 4em);
}

#reader {
	margin-bottom: 2em;
	border: solid 1px #212121;
	position: relative;
	z-index: 1;
}

#reader #html5-qrcode-anchor-scan-type-change {
	display: none;
}

#reader #html5-qrcode-button-camera-permission {
	font-family: 'Work Sans', sans-serif;
	background-color: #212121;
	color: #ffffff;
	font-size: 1.3em;
	border-radius: 0.1em;
	border: 0;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.125em;
	padding: 0.3em;
	display: none;
}

.candidate-scan-error {
	position: fixed;
	z-index: 1000;
	background-color: rgba(166, 14, 3, 1);
	padding: 2em;
	text-align: center;
	border-radius: 0.1em;
	color: #ffffff;
	font-weight: 700;
	font-size: 1.5em;
	top: 50%;
	left: 50%;
	width: calc(100vmin - 4em);
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	display: none;
}

.candidate-scan-error .candidate-scan-error-dismiss-button {
	display: inline-block;
	padding: 2vmin;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 auto 4vmin;
	max-width: 80vmin;
	border-radius: 0.6em;
	color: #212121 !important;
	text-shadow: none !important;
	background-color: #ffffff;
}

.controller .candidate,
.admin .candidate {
	text-align: center;
}

.controller .candidate .candidate-topbar,
.admin .candidate .candidate-topbar {
	margin-bottom: 2em;
}

.controller .candidate .candidate-topbar:after,
.admin .candidate .candidate-topbar:after {
	content: '';
	display: block;
	clear: both;
}

.controller .candidate .candidate-topbar .pin,
.admin .candidate .candidate-topbar .pin {
	float: left;
	font-weight: 700;
	font-size: 1.5em;
}

.controller .candidate .candidate-topbar .image-holder,
.admin .candidate .candidate-topbar .image-holder {
	text-align: center;
}

.controller .candidate .candidate-topbar .image-holder .image,
.admin .candidate .candidate-topbar .image-holder .image {
	width: 60vmin;
	height: 60vmin;
	margin: 0 auto;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.controller .candidate .candidate-topbar .back,
.admin .candidate .candidate-topbar .back {
	float: right;
}

.controller .candidate .assignment-display,
.admin .candidate .assignment-display {
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.controller .candidate .assignment-display .headline,
.admin .candidate .assignment-display .headline {
	font-weight: 700;
	font-size: 1.5em;
	letter-spacing: 0.125em;
}

.controller .candidate .assignment-display .filling-holder,
.admin .candidate .assignment-display .filling-holder {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
}

.controller .candidate .assignment-display .filling-holder .filling,
.admin .candidate .assignment-display .filling-holder .filling {
	
}

.controller .candidate .assignment-display .filling-holder .filling .text,
.admin .candidate .assignment-display .filling-holder .filling .text {
	font-weight: 700;
	margin-bottom: 1em;
}

.controller .candidate .assignment-display .filling-holder .filling .amcom,
.admin .candidate .assignment-display .filling-holder .filling .amcom {
	font-size: 1.5em;
	font-weight: 300;
	text-transform: uppercase;
}

.controller .candidate .assignment-display .filling-holder .tooth-surface,
.admin .candidate .assignment-display .filling-holder .tooth-surface {
	flex: 0;
	background-color: #dfdfdf;
	display: flex;
	align-items: center;
	border: solid 1px #212121;
	border-radius: 0.1em;
}

.controller .candidate .assignment-display .filling-holder .tooth-surface .tooth,
.controller .candidate .assignment-display .filling-holder .tooth-surface .surface,
.admin .candidate .assignment-display .filling-holder .tooth-surface .tooth,
.admin .candidate .assignment-display .filling-holder .tooth-surface .surface {
	padding: 1em;
}

.controller .candidate .assignment-display .filling-holder .tooth-surface .tooth .label,
.controller .candidate .assignment-display .filling-holder .tooth-surface .surface .label,
.admin .candidate .assignment-display .filling-holder .tooth-surface .tooth .label,
.admin .candidate .assignment-display .filling-holder .tooth-surface .surface .label {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5em;
	text-align: center;
	white-space: nowrap;
}

.controller .candidate .assignment-display .filling-holder .tooth-surface .tooth .value,
.controller .candidate .assignment-display .filling-holder .tooth-surface .surface .value,
.admin .candidate .assignment-display .filling-holder .tooth-surface .tooth .value,
.admin .candidate .assignment-display .filling-holder .tooth-surface .surface .value {
	font-weight: 300;
	font-size: 1.5em;
	text-transform: uppercase;
	text-align: center;
}

.controller .candidate .evaluation {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.controller .candidate .evaluation .molar {
	display: flex;
	flex-direction: column;
	gap: 2em;
	padding: 1em;
	border: solid 0.1em #d3d3d3;
	border-radius: 0.3em;
}

.controller .candidate .evaluation .molar .evaluation-damage-template {
	display: none;
}

.controller .candidate .evaluation .molar .penalties {
	display: flex;
	gap: 2em;
	align-items: stretch;
}

.controller .candidate .evaluation .molar .penalties .evaluation-penalty-button {
	flex: 1;
	flex-basis: calc(50% - 2em);
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	border: solid 0.1em #212121;
	border-radius: 0.3em;
	padding: 0.5em;
	box-sizing: border-box;
	color: #212121;
	font-weight: 300;
	text-transform: uppercase;
	transition: color 0.2s, background 0.2s, opacity 0.2s;
}

.controller .candidate .evaluation .molar .penalties .evaluation-penalty-button.selected {
	background-color: #212121;
	color: #ffffff;
}

.controller .candidate .evaluation .molar .penalties .evaluation-penalty-button.disabled {
	opacity: 0.4;
}

.controller .candidate .evaluation .molar .categories {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.controller .candidate .evaluation .molar .category .category-title {
	background-color: #212121;
	color: #ffffff;
	font-size: 1.5em;
	padding: 0.5em;
	margin-bottom: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	border-radius: 0.3em;
}

.controller .candidate .evaluation .molar[molar="maxillary"] .category-title {
	background-color: rgba(4, 130, 214, 1);
}

.controller .candidate .evaluation .molar[molar="mandibular"] .category-title {
	background-color: rgba(1, 45, 120, 1);
}

.controller .candidate .evaluation .molar .category .category-title .molar-category {
	font-weight: 700;
	letter-spacing: 0.125em;
	text-align: left;
}

.controller .candidate .evaluation .molar .category .category-title .tooth-filling {
	text-align: right;
}

.controller .candidate .evaluation .molar .category .category-title .tooth-filling .tooth {
	font-weight: 700;
}

.controller .candidate .evaluation .molar .category .category-title .tooth-filling .filling {
	font-weight: 300;
}

.controller .candidate .evaluation .molar .category .numbers {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.controller .candidate .evaluation .molar .category .numbers .number {
	flex: 1 1 calc(20% - (2em / 4));
	
}

.controller .candidate .evaluation .molar .category .numbers .number .evaluation-number-button {
	display: block;
	padding: 0.5em;
	font-size: 1.5em;
	border-radius: 0.3em;
	border: solid 0.1em #898989;
	color: #898989;
	text-decoration: none;
	transition: font-size 0.2s, background 0.2s, color 0.2s, border 0.2s, opacity 0.2s;
}

.controller .candidate .evaluation .molar .category .numbers .number .evaluation-number-button.disabled {
	opacity: 0.6;
}

.controller .candidate .evaluation .molar .category .numbers .number.selected .evaluation-number-button {
	background-color: rgba(0, 128, 21, 1);
	color: #ffffff;
	border-color: rgba(0, 128, 21, 1);
	font-size: 2.5em;
	font-weight: 700;
}

.controller .candidate .evaluation .molar .category .reasons {
	
}

.controller .candidate .evaluation .molar .category .reasons .number-reasons {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.controller .candidate .evaluation .molar .category .reasons .number-reasons .evaluation-reason-button {
	display: block;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	color: #898989;
	transition: color 0.2s, font-size 0.2s;
}

.controller .candidate .evaluation .molar .category .reasons .number-reasons .evaluation-reason-button.selected {
	font-size: 1.5em;
	color: rgba(0, 128, 21, 1);
	font-weight: 700;
}

.controller .candidate .evaluation .molar .damages-holder {
	
}

.controller .candidate .evaluation .molar .damages-holder .damages {
	display: flex;
	padding: 2em 0;
	border-top: solid 1px #ababab;
	flex-direction: column;
	gap: 0.5em;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage {
	display: flex;
	align-items: center;
	gap: 1em;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage select {
	width: 100%;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage .reason {
	flex: 1;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage .evaluation-damage-remove-button {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 2em;
	min-width: 2em;
	height: 2em;
	background-color: rgba(0, 0, 0, 0.5);
	position: relative;
	border-radius: 50%;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage .evaluation-damage-remove-button:active{
	background-color: #212121;
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage .evaluation-damage-remove-button:before {
	content: '';
	display: block;
	position: absolute;
	background-color: #ffffff;
	width: 1px;
	height: 60%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.controller .candidate .evaluation .molar .damages-holder .damages .damage .evaluation-damage-remove-button:after {
	content: '';
	display: block;
	position: absolute;
	background-color: #ffffff;
	width: 1px;
	height: 60%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.controller .candidate .evaluation .molar .damages-holder .evaluation-damage-add-button {
	display: inline-block;
	text-decoration: none;
	border: solid 0.1em #212121;
	border-radius: 0.3em;
	padding: 0.5em;
	box-sizing: border-box;
	color: #212121;
	font-weight: 300;
	text-transform: uppercase;
	transition: color 0.2s, background 0.2s;
}

.controller .candidate .evaluation .molar .damages-holder .evaluation-damage-add-button:active {
	background-color: #212121;
	color: #ffffff;
}

.controller .candidate .evaluation-review {
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.controller .candidate .evaluation-review .headline {
	background-color: #212121;
	color: #ffffff;
	font-size: 1.5em;
	font-weight: 700;
	padding: 0.5em;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	border-radius: 0.3em;
}

.controller .candidate .evaluation-review .category {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.controller .candidate .evaluation-review .category .title-score {
	display: flex;
	justify-content: center;
	gap: 1em;
	font-size: 2em;
}

.controller .candidate .evaluation-review .category .title-score .title {
	font-weight: 700;
	text-transform: uppercase;
}

.controller .candidate .evaluation-review .category .title-score .score {
	font-weight: 300;
}

.admin .results {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.admin .results .result {
	transition: background 0.2s;
}

.admin .results .result.open {
	background-color: rgba(0, 0, 0, 0.1);
}

.admin .results .result .candidate-result-button {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	align-items: center;
	padding: 0.5em;
	text-decoration: none;
	color: #212121;
}

.admin .results .result .candidate-result-button:active {
	color: #ffffff;
	background-color: #212121;
}

.admin .results .result .candidate-result-button .image-pin {
	display: flex;
	gap: 1em;
	align-items: center;
}

.admin .results .result .candidate-result-button .image-pin .image {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 3em;
	min-width: 3em;
	height: 3em;
	display: block;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.admin .results .result .candidate-result-button .image-pin .pin {
	font-weight: 700;
	letter-spacing: 0.125em;
	font-size: 1.2em;
}

.admin .results .result .candidate-result-button .score-pf {
	display: flex;
	gap: 1em;
	align-items: center;
}

.admin .results .result .candidate-result-button .score-pf .score {
	font-size: 1.2em;
	font-weight: 300;
}

.admin .results .result .candidate-result-button .score-pf .pf {
	font-weight: 700;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.admin .results .result .candidate-result-button .score-pf .pf[result="P"]:after {
	content: 'pass';
	color: rgba(0, 145, 37, 1);
}

.admin .results .result .candidate-result-button .score-pf .pf[result="F"]:after {
	content: 'fail';
	color: rgba(189, 0, 12, 1);
}

.admin .results .result .candidate-result-button .score-pf .button {
	
}

.admin .results .result .candidate-result-button .score-pf .button .candidate-result-release-button,
.admin .results .result .candidate-result-button .score-pf .button .candidate-result-resend-button {
	padding: 0.3em;
	border-radius: 0.2em;
	font-size: 1em;
	margin-bottom: 0;
}

.admin .results .result .details {
	padding: 1em;
	display: flex;
	flex-wrap: wrap;
	text-transform: uppercase;
}

.admin .results .result .details .molar {
	flex-basis: 50%;
	
}

.admin .results .result .details .molar .title-score {
	background-color: #212121;
	color: #ffffff;
	display: flex;
	justify-content: space-around;
	font-weight: 700;
	letter-spacing: 0.125em;
	padding: 1em;
	align-items: center;
	gap: 2em;
}

.admin .results .result .details .molar .molar-title .filling {
	font-weight: 300;
}

.admin .results .result .details .molar .scores {
	display: flex;
	flex-direction: column;
}

.admin .results .result .details .molar .scores .category {
	display: flex;
	gap: 0.2em;
	align-items: center;
}

.admin .results .result .details .molar .scores .category .category-title {
	text-align: center;
	flex-basis: 50%;
	padding: 0.5em;
	box-sizing: border-box;
}

.admin .results .result .details .molar .scores .category .category-score {
	text-align: center;
	flex-basis: 50%;
	padding: 0.5em;
	box-sizing: border-box;
}

.admin .results .result .details .molar .penalty {
	text-align: center;
	margin-top: 1em;
}

.admin .results .result .details .molar .damages {
	text-align: center;
	font-size: 0.8em;
	margin-top: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
}

.admin .results .result .details .molar .damages .damages-title {
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing: 0.125em;
}

.admin .results .result .details .molar .damages .damage .tooth-location {
	font-weight: 700;
}

.controller .group-assignments {
	display: table;
	margin: 0 auto 1em;
}

.controller .group-assignments .group {
	display: table-row;
}

.controller .group-assignments .group > div {
	display: table-cell;
	vertical-align: middle;
	padding: 0.5em;
}