#book-an-appointment-application { 
	.booking-form-label {
		color: var(--booking-text-color);
		font-size: var(--booking-size--small);
		font-family: var(--booking-font--family--base);
		font-weight: 400;
		line-height: calc(20/16);
		letter-spacing: 0px;
	}

	.booking-form-label.required {
		&::after {
			content: '*';
			color: var(--booking-error-color);
		}
	}

	.booking-input-field {
		width: calc(100% - 16px);
		max-width: 100%;
		height: 22px;
		padding: 8px;
		background-color: var(--booking-border-color);
		border: solid 1px var(--booking-secondary-border-color);
		border-radius: 3px;
		color: var(--booking-text-color);
		font-size: var(--booking-size--small);
		font-weight: 400;
		line-height: calc(28.8/16);
		margin-top: var(--booking-size--small);

		&:focus {
			outline: 1px solid var(--booking-secondary-border-color);
		}
	}

	.booking-form-input-fields {
		display: grid;
		flex-basis: 60%;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--booking-size--small);

		@media only screen and (max-width: 768px) {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	.booking-field-container {
		width: 100%;

		.error-mes {
			color: var(--booking-error-color);
			font-size: var(--booking-size--xsmall);
		}
	}

	.booking-address-field {
		grid-column: 1 / -1;
	}
}
