// QS-BOOKING
// ==========================================================================
$font-size-label: 26px;

.hm-qs {
	background: $color-brand-2;

}
.btn-close-qs {
	position: absolute;
	top: 30px;
	right: 5%;
	font-size: 26px;
	color: $color-white;
	display: none;

	@include media-breakpoint-down(md) {
		display: block;
	}
}

.hm-qs {
	.fa {
		color: $color-brand-1;
		margin: 0 10px;
	}

	.fa-grey {
		color: $color-gray-ccc;
	}

	@include media-breakpoint-down(md) {
		.fa {
			font-size: 22px;
			min-width: 20px;
		}
	}

	@include media-breakpoint-down(md) {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		display: none;

		.is-opening & {
			display: block;
		}
	}
}

.form-custom {
	.form-label {
		color: rgba($color-white, 0.8);
		font-size: $font-size-label;
		padding-top: 15px;
		display: inline-block;
	}

	.form-row {
		@include border-radius(5);
		border: solid 1px rgba($color-white, 0.7);
		position: relative;
		padding: 0 30px 0 0;
		top: 10px;

		.fa {
			position: absolute;
			right: 0;
			top: 11px;
			color: rgba($color-white, 0.7);
			font-size: 22px;
		}
	}

	.form-input {
		background: transparent;
		border: 0 none;
		color: rgba($color-white, 1);
	}
}

.form-row--time {
	width: 42%;
	display: inline-block;
	position: relative;
	top: 10px;
}
.col-end {
	position: relative;
	padding-right: 180px;

	.btn-submit {
		@include gradient-vertical(#e3cf56, $color-brand-2);
		position: absolute;
		right: 0;
		height: 70px;
		width: 160px;
		border: 0 none;
		border-radius: 0;
		font-size: 26px;
		text-transform: none;
		font-weight: 400;

		&:hover,
		&:focus {
			@include gradient-vertical($color-brand-2, #e3cf56);
		}
	}
}

.form-row--space {
	width: 6%;
	text-align: center;
	color: rgba($color-white, 0.7);
}