* {
	box-sizing: border-box;
}

:root {
	--body-background-color: #D9D9D9;
	--active-button-blue: #ECF4F7;
	--light-blue: #f6fbfd;
	--prime-blue: #00B9E9;
	--prime-blue-hover: #0aa4ca;
	--prime-yellow: #e9be00;
	--dark-blue: #3983A4;
	--prime-grey: #414141;
	--light-grey: #DDD;
	--ph-grey: #999;
	--dark-grey: #5a5a5a;
	--prime-green: #74AF2E;
	--prime-green-hover: #6ca525;
}

button, input[type="submit"], input[type="button"], input[type="reset"] {
	font-family: 'Mulish', sans-serif;
	cursor: pointer;
}

button.proceed {
	background: var(--prime-green);
	color: #fff;
	border: none;
	border-radius: 1000px;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 1.1rem;
}

html {
	width: 100%;
	height: 100%;

	background: var(--body-background-color);
	font-family: 'Mulish', sans-serif;
	font-size: 16px;
	line-height: 1.5rem;
	color: var(--prime-grey);
	min-width: 320px;
	padding: 0;
	margin: 0;
}

body {
	padding: 2rem 1rem;
	margin: 0;
	transition: all ease 200ms;
}

#container {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	border-radius: 4px;
}

footer {
	max-width: 800px;
	margin: 0 auto;
	color: #6a6a6a;

	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 0 3rem;

	.inner {
		display: flex;
		flex-flow: row nowrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
		padding: 2rem 0;

		.logo {
			img {
				width: 180px;
			}
		}
		
	}

	.return-link {
		padding: 0 0 2rem 0;

		a {
			background: none;
		}
	}
}

@media screen and (max-width: 600px) {
	
	footer {

		padding: 0;

		.inner {

			flex-flow: column nowrap;
			gap: 1rem;
			justify-content: center;
			align-items: stretch;

			text-align: center;
		}
	}

}

body.form-phase-1 {

	width: 100%;
	min-height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;

	#container {
		width: 100%;
	}
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0.25rem 0 0.5rem 0;
	font-weight: 400;
	line-height: 1.25;
}
h1, h2 {
	color: var(--prime-blue);
	font-weight: 700;
}
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

a {
	color: var(--prime-blue);
	text-decoration: none;
}
a:hover {
	color: var(--prime-blue-hover);
	text-decoration: underline;
}

[x-cloak] { display: none !important; }

#logo-container {
	padding-bottom: 1.3rem;

	a {
		border: none;
	
		img {
			max-width: 200px;
		}
	}

	@media screen and (max-width: 600px) {
		text-align: center;
	}
}

#sample-form-submitting {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all ease 250ms;

	.inner {
		background: #fff;
		padding: 2rem 3rem 1.5rem 3rem;
		border-radius: 5px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		font-size: 20px;

		svg {
			height: 60px;
		}
	}
}

.form-section {
	padding: 40px 40px 30px 40px;

	&.errors {
		padding-top: 0;
		padding-bottom: 0;
		color: #f00;

		p {
			padding: 0 0 0.5rem 0;
			margin: 0;
		}

		ul {
			padding: 0 0 0 1.75rem;
			margin: 0;
		}
	}

	&.add-new-sample {

		padding: 2.5rem 40px;
		
		button {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.8rem;
			font-size: 20px;
			background: transparent;
			border: none;

			span {
				transition: all ease-in-out 150ms;
			}

			span.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30px;
				height: 30px;
				padding: 0 0 6px 0;
				font-size: 35px;
				color: #fff;
				background: var(--prime-blue);
				border-radius: 50%;
			}

			&:hover {
				span.icon {
					background: var(--prime-blue-hover);
				}
				span.label {
					margin-left: 4px;
				}
			}
		}
	}

	&.submit {

		padding-bottom: 60px;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.captcha {
			position: relative;

			input[type="checkbox"] {
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 1px;
				height: 1px;
				overflow: hidden;
				clip: rect(0 0 0 0);
			}
		}

		button {
			width: 210px;
			transition: all ease 250ms;

			&:disabled {
				background: var(--light-grey);
				color: #555;
				cursor: not-allowed;
			}
		}

		.submitting {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140px;

			svg {
				height: 50px;
			}
		}

	}
}

.customer-info {
	background: var(--active-button-blue);
}

.sample-items-container {
	
	.sample-item {
		padding: 40px 40px 30px 40px;
		border-bottom: 1px solid var(--light-grey);

		.header {
			display: flex;
			justify-content: space-between;
			align-items: stretch;

			button.delete {
				color: #f30;
				background: none;
				border: 1px solid transparent;
				font-weight: 700;
				padding: 0 0.5rem;
				border-radius: 3px;
				transition: all ease 150ms;

				&:hover {
					color: #fff;
					background: #e74a45;
					border: 1px solid #f00;
				}
			}
		}

		&:nth-child(odd) {
			background: #fafafa;
		}
	}

}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="tel"],
input[type="url"] {
	width: 100%;
	padding: 24px 15px 12px 15px;
	border: 1px solid var(--light-grey);
	background: #fff;
	border-radius: 4px;
	font-family: 'Mulish', sans-serif;
	transition: border ease 250ms, outline ease 250ms, background ease 250ms, color ease 250ms;

	outline: 2px solid transparent;

	&:focus {
		outline: 2px solid var(--prime-blue);
		border-color: var(--dark-blue);
	}

	&:disabled {
		background: var(--light-grey);
		color: #555;
		cursor: not-allowed;
	}
}

input[type="date"] {
	padding: 24px 15px 10px 15px;
}

.textarea-container {
	position: relative;
	width: 100%;
	padding: 26px 0 0 0;
	background: #fff;
	border: 1px solid var(--light-grey);
	border-radius: 4px;
	transition: border ease 250ms, outline ease 250ms, background ease 250ms, color ease 250ms;

	outline: 2px solid transparent;

	textarea {
		width: 100%;
		min-height: 100px;
		padding: 0 15px 12px 15px;
		border: none;
		background: none;
		resize: vertical;
		outline: none;
		font-family: 'Mulish', sans-serif;
		z-index: 9;
	}

	&:focus-within {
		outline: 2px solid var(--prime-blue);
		border-color: var(--dark-blue);
	}

	&:disabled {
		background: var(--light-grey);
		color: #555;
		cursor: not-allowed;
	}
}

fieldset {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0;
	margin: 0 0 0.5rem 0;
	border: none;
	gap: 0.75rem;

	legend {
		font-weight: 700;

		&.req::after {
			content: '*';
			color: #f00;
			padding-left: 4px;
		}
	}
}

.form-description {
	color: #333;
}

.grid-2-columns > div > div.inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
.grid-3-columns > div > div.inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
.grid-4-columns > div > div.inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
.grid-5-columns > div > div.inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
}
.grid-3-by-2 > div > div.inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 0.75rem;
}
.flex-variadic-columns > div > div.inner {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	gap: 0.75rem;
	
	.form-field-wrap {
		flex-grow: 1;
	}
}

.grid-3-1-columns {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 0.75rem;
}

.form-field-group,
.form-field-wrap {

	&.has-error {
		input,
		.textarea-container {
			outline: 2px solid #f00;
		}

		span.error {
			display: block;
			padding: 0.3rem 0 0 0;
			font-size: 14px;
			color: #f00;
		}
	}

	&:not(.has-error) {
		span.error {
			display: none;
		}

		
	}
}

.form-field-group.has-error .form-field-wrap {
	
	&.radio,
	&.checkbox {
		
		button {
			outline: 2px solid #f00;
			border-color: #fff;
		}
		
	}
}

.form-field-wrap {

	input[type="date"]::-webkit-calendar-picker-indicator {
		position: absolute;
		right: 0.4rem;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
	}

	&.is-valid, &.has-error {
		input[type="date"]::-webkit-calendar-picker-indicator {
			right: 2rem;
		}
	}
}


.form-field-wrap:not(.checkbox, .radio) {
	width: 100%;
	position: relative;

	label {
		color: var(--ph-grey);
		position: absolute;
		top: 13px;
		left: 10px;
		padding: 2px 15px 2px 5px;
		transition: all ease 250ms;
		pointer-events: none;

		&.req::after {
			content: '*';
			color: #f00;
		}

		span.normal {
			display: inline-block;
		}
		span.short {
			display: none;
		}
	}

	input,
	textarea {
		padding-right: 1.75rem;
	}

	.validity-indicator {
		display: block;
		position: absolute;
		right: 12px;
		top: 20px;
		width: 1rem;
		height: 1rem;
		pointer-events: none;

		.fa-solid {
			display: none;
		}
		.on-valid {
			color: #5cbb02;
		}
		.on-error {
			color: #f00;
		}
	}

	:where(input:disabled, textarea:disabled) + .validity-indicator {
		display: none !important;
	}

	&.is-valid {
		.fa-solid.on-valid {
			display: block;
		}
	}
	&.has-error {
		.fa-solid.on-error {
			display: block;
		}
	}

	&.textarea .validity-indicator {
		top: 12px;
		transform: none;
	}

	&.textarea {
		label {
			z-index: 100;
		}
	}

	&.filled, &.has-focus, &.date {
		label {
			top: 0px;
			font-size: 12px;
		}
	}
}

.form-field-wrap:is(.checkbox, .radio) {

	label {
		display: block;
		position: relative;
		cursor: pointer;
		height: 100%;

		input {
			position: absolute;
			transform: translateX(-90%);
			left: 50%;
			bottom: -6px;
			opacity: 1;
			opacity: 0;
			pointer-events: none;
		}

		button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 54px;
			padding: 0.8rem 1rem 0.9rem 1rem;
			background: #fff;
			border: 1px solid var(--dark-blue);
			border-radius: 3px;
			transition: all ease 150ms;
			color: var(--dark-blue);
			text-align: center;
			user-select: none;
			outline: 2px solid transparent;
			font-size: 16px;

			&:focus {
				outline: 2px solid var(--prime-yellow) !important;
				border-color: #fff !important;
			}

			&:hover {
				background: var(--light-blue);
			}
		}

		input:checked ~ button {
			border-color: #fff;
			background: var(--active-button-blue);
			outline: 2px solid var(--prime-blue);
		}
	}

}

@media screen and (max-width: 800px) {

	.form-field-wrap:not(.checkbox, .radio) {
		
		label {
			top: 0px;
			font-size: 12px;
		}
	}

}

@media screen and (max-width: 780px) {

	.grid-3-by-2 > div > div.inner {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
	}
}

@media screen and (max-width: 600px) {

	html {
		/* font-size: 14px; */
	}

	body {
		padding: 2rem 0;
	}
	
	.form-field-wrap:not(.checkbox, .radio) {
		
		label {

			span.normal {
				display: none;
			}
			span.short {
				display: inline-block;
			}
			
		}
	}

	.form-group {
		padding: 0.75rem 0 0 0;
	}
	
	.grid-2-columns > div > div.inner {
		grid-template-columns: 1fr;
	}
	.grid-3-columns > div > div.inner {
		grid-template-columns: 1fr;
	}
	.grid-4-columns > div > div.inner {
		grid-template-columns: 1fr;
	}
	.grid-5-columns > div > div.inner {
		grid-template-columns: 1fr;
		/* grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr; */
	}
	.grid-3-by-2 > div > div.inner {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.grid-3-1-columns {
		grid-template-columns: 1.75fr 1fr;

		.checkbox {
			white-space: nowrap;
		}
	}

	.sample-items-container {
	
		.sample-item {
			padding: 40px 20px 40px 20px;
		}

	}

	.form-section {

		padding: 40px 20px 40px 20px;

		&.submit {

			display: flex;
			flex-flow: column nowrap;
			gap: 2rem;

			justify-content: center;
			align-items: center;

			.proceed {
				width: 100%;
			}

		}

	}
	
}

#sample-form-success {

	.buttons {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		gap: 1rem;
		justify-content: space-evenly;
		align-items: center;
		padding: 1rem 0 2rem 0;

		.button {
			flex-grow: 1;
			border-radius: 100px;
			color: #fff;
			text-align: center;
			font-weight: 700;
			padding: 12px 20px;
			cursor: pointer;
			border: none;
			text-decoration: none;
			transition: all ease 150ms;

			&.green {
				background: var(--prime-green);

				&:hover {
					background: var(--prime-green-hover);
				}
			}
			&.blue {
				background: var(--prime-blue);

				&:hover {
					background: var(--prime-blue-hover);
				}
			}
		}

		span {
			flex-grow: 0;
		}
	}

	@media screen and (max-width: 700px) {
		
		.buttons {
			flex-flow: column nowrap;
			gap: 1rem;
			justify-content: center;
			align-items: stretch;

			span {
				text-align: center;
			}
		}
		
	}

}

.return-link {

	padding: 1rem 0 0 0;
	text-align: center;

	a {
		background: var(--light-grey);
		text-decoration: none;
		border-radius: 100px;
		color: var(--prime-grey);
		text-align: center;
		font-weight: 700;
		padding: 12px 20px;
		cursor: pointer;
		border: none;
		text-decoration: none;
		transition: all ease 150ms;
	}
	a:hover {
		color: #fff;
		background: var(--dark-grey);
	}
}