@charset "UTF-8";
/* CSS Document */

/* Color Declarations */
:root {
	--primary: #003B5C;
	--primary-variant: #005485;
	--secondary: #236FA6;
	--secondary-20: #1C5985;
	--secondary-40: #16476A;
	--secondary-variant: #0084DB;
	--success: #06893A;
	--success-20: #056E2E;
	--success-40: #045223;
	--caution: #DE6D17;
	--caution-20: #BA5F1B;
	--caution-40: #8B4714;
	--error: #BC3832;
	--error-20: #962D28;
	--error-40: #71221E;
	--greyscale-1: #323232;
	--greyscale-2: #555555;
	--greyscale-3: #808080;
	--greyscale-4: #CCCCCC;
	--greyscale-5: #F2F4F7;
	--greyscale-6: #FFFFFF;
	--secondary-teal: #00778B;
	--secondary-dark-green: #007749;
	--secondary-brown: #7E7061;
	--secondary-light-blue: #4B74AC;
	--highlight-light-teal: #3EB1C8;
	--highlight-soft-blue: #7BA4D8;
	--highlight-mint: #4EBD88;
	--highlight-light-brown: #D3D3C2;
	--highlight-yellow: #F2CD00;
	--highlight-peach: #FF8D6D;
	--highlight-light-blue: #EDF1F8;
	--highlight-light-red: #F9E7E7;
}

/* Font Declarations */
@font-face {
	font-family: SourceSansPro;
	src: url('../fonts/sourcesanspro-regular.ttf') format('ttf'), url('../fonts/sourcesanspro-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: SourceSansProSemiBold;
	src: url('../fonts/sourcesanspro-semibold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: SourceSansProBold;
	src: url('../fonts/sourcesanspro-bold.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* Standard Declarations */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: SourceSansPro, sans-serif;
	font-size: 1rem;
	color: var(--greyscale-1);
	background-color: var(--greyscale-5);
}

/* Text Declarations */

h6, h5, h4, h3, h2, h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

h1, h2, .display-title {
	font-family: SourceSansProBold, sans-serif;
}

h3, h4, h5, h6 {
	font-family: SourceSansProSemiBold, sans-serif;
}

label, a {
	font-size: 1rem;
	line-height: 1.5rem; /*24px*/
	color: var(--secondary);
}

	label, a:focus {
		outline-color: var(--secondary-variant);
	}


a {
	text-decoration: underline;
}

/* line 241, /var/www/html/nzta-prototype/frontend/sass/type */
a:hover {
	color: #1a537c;
}

a:hover a:focus a:active {
	font-weight: bold;
}

a:focus {
	outline-color: var(--secondary-variant);
}

a.link-complex:hover, h3.link-complex__link:hover, a.link-complex:focus-within h3.link-complex__link {
	color: var(--secondary-20);
	text-decoration: none !important;
}

a.link-complex {
	color: var(--secondary);
	text-decoration: none;
}

a.link-complex:focus {
	outline: none;
	border: 2px solid var(--secondary-variant);
	padding: 4px;
}

p {
	font-size: 1rem;
	line-height: 1.5rem; /*24px*/
	color: var(--greyscale-2);
}

dd, dt {
	border-top: 1px solid #DDD;
}

.paragraph-2 {
	font-size: 0.875rem; /*14px*/
	line-height: 1.313rem; /*21px*/
}

.paragraph-3 {
	font-size: 0.75rem; /*12px*/
	line-height: 1.125rem; /*18px*/
}

/* List Declarations */
ul {
	padding-left: 1rem;
}

	ul > li {
		margin-left: 1rem;
	}

	ul.list-small {
		padding-left: 0.938rem; /*15px*/
	}

		ul.list-small > li {
			margin-left: 0.563rem; /*9px*/
		}

	ul.list-extra-small {
		padding-left: 0.875rem; /*14px*/
	}

		ul.list-extra-small > li {
			margin-left: 0.5rem; /*8px*/
		}

/* Header */
header {
	height: 84px;
	max-height: 84px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--primary);
	color: var(--greyscale-6);
}

.logout, .footer-about, .footer-contact, .footer-copyright, .footer-privacy {
	color: var(--greyscale-6);
}

a.logout:hover, .footer-about:hover, .footer-contact:hover, .footer-copyright:hover, .footer-privacy:hover {
	color: var(--greyscale-4);
}

	a.logout:focus, .footer-about:focus, .footer-contact:focus, .footer-copyright:focus, .footer-privacy:focus {
		color: var(--greyscale-4);
		outline: none;
		border: 2px solid var(--greyscale-6);
		padding: 4px;
	}

/* Footer */
footer {
	background-color: var(--primary);
	color: var(--greyscale-6);
}

	footer div.footer-primary-logos img {
		height: 40px;
	}

	footer div.footer-primary-links a {
		margin-right: 24px;
		color: var(--greyscale-6);
	}

	footer div.footer-primary-logos img:first-child {
		margin-right: 32px;
	}

.footer-about, .footer-copyright, .footer-privacy, .footer-contact {
	display: inline-flex;
	align-items: center;
	color: var(--greyscale-6);
	text-decoration-skip-ink: auto;
}

/* Footer Links */
.footer-primary-links a > img {
	margin-right: 10px;
}
/* Because the icon's dimensions are set with ems, we can
   affect it's size using font size */
.footer-about__footer-icon, .footer-copyright__footer-icon, .footer-privacy__footer-icon {
	font-size: 1.5rem;
}

/* Set the width and height to be 1em, which
   will be the font-size of its parent element */
.footer-icon {
	width: 1rem;
	height: 1rem;
}

/* Page header horizontal line*/
hr.header-hr {
	height: 2px;
}

/* Button span*/
span.button-span {
	padding-left: 0px;
	padding-right: 10px;
}

/* Field - medium size*/
.field-medium {
	max-width: 1200px;
	min-width: 400px;
	margin-bottom: 1rem;
}

@media only screen and (max-width: 37.49em) {
	.field-medium {
		max-width: 700px;
		min-width: 300px;
		margin-bottom: 1rem;
	}

	.timeslot-container {
		padding-top: 20px;
		padding-left: 0px !important;
	}
}

/* Containers */
.content-body {
	padding: 10px 0;
}

/* Forms */
/* Buttons */
[type^="button"],
[type^="submit"] {
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	cursor: default;
	font-family: SourceSansPro, sans-serif;
	font-size: 1rem;
	font-weight: bold;
}

.button-primary-1 {
	background-color: var(--secondary);
	color: var(--greyscale-6);
}

	.button-primary-1:hover {
		background-color: var(--secondary-20);
		cursor: pointer;
	}

	.button-primary-1:focus {
		background-color: var(--secondary-20);
		outline: 2px solid var(--secondary-variant);
		outline-offset: 4px;
	}

	.button-primary-1:active {
		background-color: var(--secondary-40);
	}

.button-primary-2 {
	background-color: var(--error);
	color: var(--greyscale-6);
}

	.button-primary-2:hover {
		background-color: var(--error-20);
	}

	.button-primary-2:focus {
		background-color: var(--error-20);
		outline: 2px solid var(--secondary-variant);
		outline-offset: 4px;
	}

	.button-primary-2:active {
		background-color: var(--error-40);
	}

.button-secondary {
	background-color: var(--highlight-light-blue);
	color: var(--secondary);
	border: 1px solid var(--secondary);
}

	.button-secondary:hover {
		background-color: var(--secondary);
		color: var(--greyscale-6);
	}

	.button-secondary:focus {
		background-color: var(--secondary);
		color: var(--greyscale-6);
		outline: 2px solid var(--secondary-variant);
		outline-offset: 4px;
	}

	.button-secondary:active {
		background-color: var(--secondary-20);
		color: var(--greyscale-6);
	}

.button-tertiary-1 {
	background-color: var(--greyscale-6);
	color: var(--secondary);
	border: 1px solid var(--secondary);
}

	.button-tertiary-1:hover {
		background-color: var(--highlight-light-blue);
		border: 1px solid var(--secondary);
	}

	.button-tertiary-1:focus {
		background-color: var(--highlight-light-blue);
		border: 1px solid var(--secondary);
		outline: 2px solid var(--secondary-variant);
		outline-offset: 4px;
	}

	.button-tertiary-1:active {
		background-color: var(--secondary);
		color: var(--greyscale-6);
	}

.button-tertiary-2 {
	background-color: var(--greyscale-6);
	color: var(--error);
	border: 1px solid var(--error);
}

	.button-tertiary-2:hover {
		background-color: var(--highlight-light-red);
		border: 1px solid var(--error);
	}

	.button-tertiary-2:focus {
		background-color: var(--highlight-light-red);
		border: 1px solid var(--error);
		outline: 2px solid var(--secondary-variant);
		outline-offset: 4px;
	}

	.button-tertiary-2:active {
		background-color: var(--error);
		color: var(--greyscale-6);
	}

	.button-primary-1:disabled, .button-primary-2:disabled, .button-secondary:disabled, .button-tertiary-1:disabled, .button-tertiary-2:disabled {
		background-color: var(--greyscale-4);
		color: var(--greyscale-2);
		border: none;
		cursor: default;
	}

	.button-primary-1:hover, .button-primary-1:focus, .button-primary-1:active,
	.button-primary-2:hover, .button-primary-2:focus, .button-primary-2:active,
	.button-secondary:hover, .button-secondary:focus, .button-secondary:active,
	.button-tertiary-1:hover, .button-tertiary-1:focus, .button-tertiary-1:active,
	.button-tertiary-2:hover, .button-tertiary-2:focus, .button-tertiary-2:active {
		text-decoration: underline;
	}

/* Desktops & Laptops */
@media only screen and (min-width: 1200px) {
	/* Text Declarations */
	.display-title {
		font-size: 3rem; /*48px*/
		line-height: 3.75rem; /*60px*/
	}

	h1 {
		font-size: 2rem; /*32px*/
		line-height: 2.625rem; /*42px*/
	}

	h2 {
		font-size: 1.75rem; /*28px*/
		line-height: 2.25rem; /*36px*/
	}

	h3 {
		font-size: 1.5rem; /*24px*/
		line-height: 2rem; /*32px*/
	}

	h4 {
		font-size: 1.25rem; /*20px*/
		line-height: 1.625rem; /*26px*/
	}

	h5 {
		font-size: 1rem; /*16px*/
		line-height: 1.5rem; /*24px*/
	}

	/* Containers */
	.main, .wrapper {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}

	/* Footer */
	footer {
		padding: 70px 0 42px;
	}

		footer div.footer-primary, footer div.footer-primary-links, footer div.footer-primary-logos, footer div.footer-secondary, footer div.footer-secondary-copyright, footer div.footer-secondary-shielded {
			display: flex;
		}

		footer div.footer-primary-links, footer div.footer-secondary-copyright {
			flex-grow: 1;
		}

		footer div.footer-primary-logos, footer div.footer-secondary-shielded {
			flex-grow: 0;
		}

		footer div.footer-primary {
			border-bottom: 1px solid var(--greyscale-6);
			padding-bottom: 16px;
		}

		footer div.footer-secondary {
			margin-top: 16px;
		}

	/* Forms */
	/* Buttons */
	[class^="button"] {
		min-height: 48px;
		font-size: 1rem;
	}
}

/* Mobile Devices */
@media only screen and (max-width: 1250px) {
	/* Text Declarations */
	.display-title {
		font-size: 2.125rem; /*34px*/
		line-height: 2.75rem; /*44px*/
	}

	h1 {
		font-size: 1.75rem; /*28px*/
		line-height: 2.125rem; /*34px*/
	}

	h2 {
		font-size: 1.5rem; /*24px*/
		line-height: 2rem; /*32px*/
	}

	h3 {
		font-size: 1.25rem; /*20px*/
		line-height: 1.625rem; /*26px*/
	}

	h4 {
		font-size: 1.125rem; /*18px*/
		line-height: 1.5rem; /*24px*/
	}

	h5 {
		font-size: 1rem; /*16px*/
		line-height: 1.5rem; /*24px*/
	}

	/* Containers */
	.main, .wrapper {
		margin: 0 24px;
	}

	/* Footer */
	footer {
		padding: 33px 0 26px;
	}

		footer div.footer-primary {
			margin-bottom: 16px;
		}

		footer div.footer-primary-links {
			margin-bottom: 34px;
		}

		footer .footer-primary-logos > img {
			display: block;
			margin-bottom: 16px;
		}

			footer .footer-primary-logos > img:last-child {
				margin-bottom: 30px;
			}

		footer div.footer-secondary-shielded {
			display: none;
		}

	/* Forms */
	/* Buttons */
	[class^="button"] {
		min-height: 45px;
		font-size: 0.875rem;
	}
}

@media only screen and (min-width: 600px) {
	[type='text']:not([id*="email"]),
	[type='email']:not([id*="email"]),
	[type='number'],[type='date'],
	select {
		width: 30%;
	}

	.btn--block, .btn--submit {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	input[type="text"][maxlength="15"] {
		width: 45% !important;
	}

	input[type="text"][maxlength="56"] {
		width: 60% !important;
	}
}

.notification-box {
	display: flex;
	border: 1px solid #ccc;
	border-left: none;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	background-color: #fff;
	width: fit-content; /* Or 100% if you want it full width */
	max-width: 100%;
}


.notification-box.error,
.notification-box.warning,
.notification-box.success {
	margin-bottom: 10px !important;
}

.icon-container {
	width: 50px;
	min-width: 50px;
	background-color: #c0392b; /* Red for error */
	color: var(--greyscale-6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.message-content {
	padding: 12px;
	color: #333;
	flex-grow: 1;
}

/* Message Type Colors */
.error .icon-container {
	background-color: #c0392b;
}
/* red */
.warning .icon-container {
	background-color: #f39c12;
}
/* orange */
.success .icon-container {
	background-color: #27ae60;
}
/* green */
.info .icon-container {
	background-color: #2980b9;
}
/* blue */

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

	.button-group button {
		min-width: 120px; /* ensures buttons don’t get too narrow */
		width: fit-content; /* size only as wide as needed */
		max-width: 100%; /* avoids overflow */
		white-space: nowrap; /* prevents text from wrapping */
	}

@media (max-width: 600px) {
	.button-group {
		flex-direction: column;
		align-items: stretch; /* make buttons same width */
	}

		.button-group button {
			width: 100%; /* full width of parent */
		}
}

.radio-button-group {
	display: inline-block;
}

@media (max-width: 600px) {
	.radio-button-group {
		display: block;
	}
}

.blazored-typeahead__clear {
	color: var(--secondary)
}

.test--details {
	padding-top: 1.5rem;
	border-top: 1px solid black;
	margin-bottom: 3em;
}

.licence-test-header {
	margin-bottom: 15px;
}

.licence-test-container {
	margin-top: 15px;
}

.licence-test-card {
	border-top: 1px solid;
	padding-top: 30px;
	margin-bottom: 60px;
}

.licence-test-title {
	font-size: 20px;
	font-weight: 600;
	color: #495057;
}

.licence-test-details {
	margin-bottom: 25px;
}

.location-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 10px;
	margin-bottom: 15px;
}

.slot--back {
	display: none;
}

@media only screen and (max-width: 37.49em) {
	.show-hide {
		display: none;
	}

	.slot--back {
		display: inherit;
	}

	.slot--back i {
		position: absolute;
		margin-top: 5px;
	}

	.slot--back a span:nth-child(2) {
		margin-left: 22px;
	}

	.location-container {
		display: grid;
		grid-template-columns: none;
		gap: 10px;
	}

	.area-list,
	.location-list,
	.site-list {
		margin-left: 0 !important;
	}
}

.location-label {
	font-size: 14px;
	color: #555;
	margin-bottom: 15px;
}

.location-list,
.site-list {
	margin-left: 5rem;
}

.area-list,
.location-list,
.site-list {
	padding: 2rem 1rem;
}

.area-item,
.location-item,
.site-item {
	cursor: pointer;
	font-size: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.arrow {
	transition: transform 0.2s;
	display: inline-block;
}

	.arrow.expanded {
		transform: rotate(90deg);
	}

.field--text {
	max-width: 750px;
}

div.col table {
	max-width: 750px;
}

table td, table th {
	padding: 10px 16px 10px 16px;
	line-height: 1;
	background: var(--greyscale-6);
}

input:focus {
	border: var(--secondary-variant);
}

/*------------------------------------*\
    #Field details
\*------------------------------------*/
/*------------------------------------*\
    #RADIO BUTTON GROUP
\*------------------------------------*/
@media only screen and (max-width: 37.49em) {
	.field--radio-button-group .field__note {
		margin-bottom: 4px;
		margin-bottom: 0.25rem;
	}
}

/* line 36, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control > li {
	border: 1px solid var(--secondary);
	margin-right: -1px;
	margin-bottom: -1px;
	background: var(--greyscale-6);
}
/* line 54, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control label {
	color: var(--secondary);
}
	/* line 62, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
	.segmented-control label span {
		cursor: pointer;
	}
/* line 70, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control input:checked + label {
	background: var(--secondary);
	color: var(--greyscale-6);
}

/* line 36, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control-disabled > li {
	border: 1px solid var(--greyscale-6);
	background-color: #CCCCCC;
	margin-right: -1px;
	margin-bottom: -1px;
}
/* line 54, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control-disabled label {
	color: var(--greyscale-6);
}
/* line 62, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control-disabled li {
	cursor: default;
}

/* line 98, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--2-segments li {
	width: 50%;
}

/* line 104, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--3-segments li {
	width: 33.33333333%;
}

/* line 110, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--4-segments li {
	width: 25%;
}

/* line 116, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--5-segments li {
	width: 20%;
}

/* line 122, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--6-segments li {
	width: 33.33333333%;
}

/* line 128, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--7-segments li {
	width: 50%;
}
	/* line 130, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
	.segmented-control--7-segments li:first-child {
		border-bottom-left-radius: 0px;
		border-bottom-left-radius: 0rem;
	}
	/* line 133, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
	.segmented-control--7-segments li:nth-child(2) {
		border-bottom-right-radius: 0px;
		border-bottom-right-radius: 0rem;
	}
	/* line 140, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
	.segmented-control--7-segments li:last-child {
		border-top-right-radius: 0px;
		border-top-right-radius: 0rem;
	}

/* line 146, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--8-segments li {
	width: 25%;
}

/* line 152, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--9-segments li {
	width: 33.33333333%;
}

/* line 158, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--10-segments li {
	width: 20%;
}

/* line 164, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--11-segments li {
	width: 25%;
}

/* line 171, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--12-segments li {
	width: 25%;
}

/* line 177, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--13-segments li {
	width: 50%;
}

/* line 183, /var/www/html/nzta-prototype/frontend/sass/components/form/_field--radio-button-group */
.segmented-control--14-segments li {
	width: 50%;
}

.segmented-control--12-segments li, .segmented-control--13-segments li, .segmented-control--14-segments li {
	width: 16.66666666%;
}

	.segmented-control--12-segments li:nth-child(4), .segmented-control--13-segments li:nth-child(4), .segmented-control--14-segments li:nth-child(4) {
		border-top-right-radius: 0px !important;
		border-top-right-radius: 0rem !important;
	}

	.segmented-control--12-segments li:nth-child(6), .segmented-control--13-segments li:nth-child(6), .segmented-control--14-segments li:nth-child(7) {
		border-top-right-radius: 4px !important;
		border-top-right-radius: 0.25rem !important;
	}

	.segmented-control--12-segments li:nth-child(7), .segmented-control--13-segments li:nth-child(7), .segmented-control--14-segments li:nth-child(8) {
		border-bottom-left-radius: 4px !important;
		border-bottom-left-radius: 0.25rem !important;
	}

	.segmented-control--12-segments li:nth-child(9), .segmented-control--13-segments li:nth-child(9), .segmented-control--14-segments li:nth-child(10) {
		border-bottom-left-radius: 0px !important;
		border-bottom-left-radius: 0rem !important;
	}

@media only screen and (max-width: 37.49em) {
	.segmented-control--12-segments li, .segmented-control--13-segments li, .segmented-control--14-segments li {
		width: 33.3333333%;
	}

		.segmented-control--12-segments li:nth-child(6), .segmented-control--13-segments li:nth-child(6), .segmented-control--14-segments li:nth-child(6) {
			border-top-right-radius: 0px !important;
			border-top-right-radius: 0rem !important;
		}

		.segmented-control--12-segments li:nth-child(3), .segmented-control--13-segments li:nth-child(3), .segmented-control--14-segments li:nth-child(3) {
			border-top-right-radius: 4px !important;
			border-top-right-radius: 0.25rem !important;
		}

		.segmented-control--12-segments li:nth-child(7), .segmented-control--12-segments li:nth-child(9), .segmented-control--13-segments li:nth-child(9), .segmented-control--14-segments li:nth-child(9) {
			border-bottom-left-radius: 0px !important;
			border-bottom-left-radius: 0rem !important;
		}

		.segmented-control--12-segments li:nth-child(10), .segmented-control--13-segments li:nth-child(10), .segmented-control--14-segments li:nth-child(10) {
			border-bottom-left-radius: 4px !important;
			border-bottom-left-radius: 0.25rem !important;
		}
}

/* Stepper and step component */
.stepper {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 20px 15px;
	max-width: 700px;
	min-width: 400px;
}

@media only screen and (max-width: 37.49em) {
	.stepper {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin: 32px 0;
		max-width: 700px;
		min-width: 300px;
	}
}

.step-item {
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
	margin-left: -1rem;
}

@media only screen and (max-width: 37.49em) {
	header {
		height: 95px !important;
		max-height: 95px !important;
	}

		header .main {
			margin-top: 10px !important;
		}

	.step-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
		margin-left: 0rem;
	}
}

.step-header {
	display: flex;
	align-items: center;
	width: 100%;
}

.step-confirmation {
	margin-right: -1rem;
}

.step-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
    align-items: center;
    justify-content: center;
	display: flex;
	z-index: 1;
	color: var(--greyscale-2);
}

	.step-circle.completed {
		background-color: #00A651;
		color: var(--greyscale-6);
	}

	.step-circle.active {
		background-color: #00A651;
		color: var(--greyscale-6);
	}

	.step-circle.inactive {
		border: 2px solid var(--greyscale-3);
		background-color: var(--greyscale-6);
		color: var(--greyscale-2);
	}

.checkmark {
	font-size: 18px;
	line-height: 32px;
}

.step-line {
	flex-grow: 1;
	height: 2px;
	background-color: #ccc;
	color: var(--greyscale-3);
}

	.step-line.active-line {
		background-color: #00A651;
		color: var(--greyscale-3);
	}

.step-label {
	margin-top: 8px;
	font-size: 14px;
	color: var(--greyscale-2);
}

.blazored-typeahead__input-mask {
	background: var(--greyscale-6);
    border: 1px solid var(--greyscale-3);
    font-weight: 600;
}
.blazored-typeahead.valid.modified {
    background: var(--greyscale-6);
    border: 1px solid var(--greyscale-3)
}

.date-picker-grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20px 0 20px 0;
}

.datepicker {
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	max-width: 360px;
	background-color: #fff;
}

.datepicker .ui-datepicker-calendar {
	table-layout: fixed;
	width: 100%;
}

.ui-datepicker-calendar td {
	text-align: center;
	padding: 7px 0;
	background-color: #FFF;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
	background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
	background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
	background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
	text-shadow: 0 1px 0 #FFF;
	border: 1px solid #CCC;
	cursor: pointer;
	-webkit-border-radius: 0;
	border-radius: 0;
}

.date-picker-other-month {
	opacity: 0 !important;
	pointer-events: none;
	border: none !important;
}

.ui-datepicker-calendar td.ui-state-disabled {
	background: transparent !important;
	color: #bbb !important;
	cursor: not-allowed !important;
	border: none !important;
	opacity: 0.3;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-align: center;
	pointer-events: none;
}

.ui-datepicker-calendar td:hover {
	border-color: #acacac;
	background-color: #FFF;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#eaeaea));
	background-image: -webkit-linear-gradient(top, #f7f7f7, #eaeaea);
	background-image: -o-linear-gradient(top, #f7f7f7, #eaeaea);
	background-image: linear-gradient(to bottom, #f7f7f7, #eaeaea);
}

table.ui-datepicker-calendar {
	border: none;
	margin-bottom: 0px;
}

table.ui-datepicker-calendar th {
	border: none;
	text-align: center;
	padding: 7px 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: normal;
	color: #777;
	background-color: #fff;
}

.ui-datepicker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	font-size: 1.5rem;
	color: #8c8c8c;
	transition: color 0.2s ease-in-out;
	text-decoration: none;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
	text-decoration: none;
	cursor: pointer;
}

.datepicker .ui-datepicker-next.ui-state-disabled, .datepicker .ui-datepicker-prev.ui-state-disabled {
	color: rgba(0, 0, 0, 0) !important;
	pointer-events: none;
}

.datepicker .ui-datepicker-header {
	margin-bottom: 4px;
	text-align: center;
	overflow: hidden;
}

.datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title {
	font-weight: bold;
	width: 80%;
	float: left;
	font-size: 16px;
}

.ui-datepicker-calendar td a {
	text-decoration: none;
	color: #444;
	font-size: 14px;
}

.datepicker td.ui-datepicker-active-day {
	background: #221f1f !important;
	border-color: #0f0e0e !important;
	-webkit-box-shadow: inset 0 0 5px #0f0e0e !important;
	box-shadow: inset 0 0 5px #0f0e0e;
	cursor: default !important;
	-webkit-transition: background 0.2s;
	-o-transition: background 0.2s;
	transition: background 0.2s;
}

.datepicker .ui-datepicker-active-day a {
	color: #ffffff !important;
	cursor: default !important;
	text-shadow: none !important;
	font-weight: bold !important;
	font-size: 15px;
}

.datepicker td.ui-datepicker-today a {
	color: #FF8100;
	text-shadow: 0 1px 0 #FFF;
	font-weight: bold !important;
}


#datePicker.dp-loading .ui-datepicker-calendar {
	pointer-events: none;
}

#datePicker.dp-loading .ui-datepicker-calendar td {
	text-decoration: none;
	/* remove line-through */
	font-weight: normal;
	background: transparent !important;
	color: #bbb !important;
	border: none !important;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-align: center;
	opacity: 0.3;
}

#datePicker.dp-loading .ui-datepicker-calendar td a,
#datePicker.dp-loading .ui-datepicker-calendar td span {
	color: #fcfcfc !important;
	color: rgba(0, 0, 0, 0);
	position: relative;
}

#datePicker.dp-loading .ui-datepicker-calendar td a:before,
#datePicker.dp-loading .ui-datepicker-calendar td span:before {
	font-family: FontAwesome;
	content: "\f021";
	-webkit-animation: fa-spin 2s infinite linear;
	-o-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
	color: #AAA;
	position: absolute;
	left: 50%;
	margin: 3px 0 0 -6px;
}

.date-picker-divider {
	margin: 30px 0 30px 0;
}

.timeslot-container {
	padding-left: 1.5rem;
}

.slotsWrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	margin-bottom: 20px;
}

.slot-label {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 7px 0;
	border: 1px solid #ccc;
	cursor: pointer;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
	background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
	background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
	background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
	text-shadow: 0 1px 0 #ffffff;
	text-align: center;
}

.slot-label input {
	display: none;
}

.slot-label:hover {
	background: #eaeaea;
}

.slot-label.selected {
	border-color: #0f0e0e;
	font-weight: bold;
	text-shadow: none;
	cursor: default;
	color: #ffffff;
	background: #221f1f !important;
	-webkit-box-shadow: inset 0 0 5px #0f0e0e;
	box-shadow: inset 0 0 5px #0f0e0e;
}

.slotsDateHeading {
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	margin-top: 5px;
}

form {
    width: 100%;
}

dd.addressOnCard {
	padding-left: 30%;
}

.responsive-table {
	padding: 10px 16px 10px 16px;
	line-height: 1;
	background: var(--greyscale-6);
}

@media (max-width: 600px) {
	.responsive-table thead {
		display: none;
	}

	.licence-class {
		display: none !important;
	}

	.responsive-table,
	.responsive-table tbody,
	.responsive-table tr,
	.responsive-table td {
		display: block;
		width: 100%;
	}

	.responsive-table tr {
		margin-bottom: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: none;
	}

	.responsive-table tr:last-child {
		border-bottom: none;
	}

		.responsive-table td {
			position: relative;
			display: flex;
			align-items: center;
			min-height: 2.5em;
			padding-left: 50%;
			border: none;
			background: inherit;
		}

	.responsive-table td:before {
		position: absolute;
		left: 1rem;
		top: 0;
		width: 45%;
		white-space: nowrap;
		font-weight: bold;
		color: inherit;
		content: attr(data-label);
		display: block;
		height: 100%;
		display: flex;
		align-items: center;
	}
}

.licence-section-header {
	margin-top: 1rem;
}