/* Selectively override stt.css for contractors */
.page nav {
	background-color: var(--colour-field);
	color: white;
	border-right-color: var(--colour-field-110);
}

.page nav > ul a:hover {
	background-color: var(--colour-field-80);
}
.page nav > ul a.active {
	background-color: var(--colour-field-60);
}

.user-context-menu > a:hover {
	background-color: var(--colour-field-80);
}
.page nav > ul a.active:after {
	color: var(--colour-field);
}

.page nav .logo {
	max-width: 160px;
}

.page .content {
	padding-bottom: 40px; /* extra padding at bottom so impersonation bar doesn't obscure content */
}

/* links */
a {
	color: var(--colour-field-120);
}
a:visited, a.back {
	color: var(--colour-field-120);
}

@media screen and (max-width: 767px) {
	.page nav {
		background-position: -1200px -1400px;
	}

		.page nav .toggle-mobile-nav {
			background-color: var(--colour-field);
		}
}

/* choose/switch contractor page */
.choose-contractor {
	margin-top: 8px;
}
.choose-contractor a {
	display: block;
	padding: 12px 8px;
	text-decoration: none;
	color: rgba(0,0,0,0.7);
	border-radius: 8px;
	font-weight: 500;
	transition: text-indent .2s ease-out;
	position: relative;
}
	.choose-contractor a:hover {
		background-color: rgba(0,0,0,0.05);
		text-indent: 4px;
	}

	.choose-contractor a:after {
		opacity: 0;
		content: '\3009';
		position: absolute;
		width: 8px;
		right: 24px;
		color: var(--colour-trunk);
		transform: scaleX(1.6);
		transition: opacity .2s ease-out;
	}

	.choose-contractor a:hover:after {
		opacity: 1;
	}

/* qualification progress */
.qualification-box {
	display:flex;
	align-items:flex-start;
	gap: 12px;
}

.qualification-box .icon-circle {
	padding: 4px;
	border: 2px solid transparent;
	border-radius: 50%;
	margin-top: 8px;
}

.qualification-box .icon-circle.complete {
	background-color: var(--colour-success-20);
	border-color: var(--colour-success);
	color: var(--colour-success);
}

.qualification-box .icon-circle.incomplete {
	border-style: dashed;
	background-color: rgba(0,0,0,0.05);
	color: rgb(180,180,180);
	border-color: rgb(180,180,180);
}

.qualification-box .icon-circle.changes-requested {
	background-color: var(--colour-warning-20);
	border-color: var(--colour-warning);
	color: var(--colour-warning);
}

/* qualification requirements */
.qualification-requirement  {
	display:flex;
}

	.qualification-requirement.has-error {
		background-color: var(--colour-warning-20);
	}

	.qualification-requirement.has-error label {
		color: var(--colour-warning-120);
	}


	.qualification-requirement.has-error textarea {
		background-color: white;
	}

/* impersonation bar */
.impersonation-bar {
	text-align: center;
	padding: 6px 0;
	background-color: #223;
	color: rgba(255,255,255,0.8);
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 2;
	box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}