.section-booking {
	background-color: @white;
	padding: 0;

	@media @bp_768 {
		height: 100vh;
	}

	&.loading,
	.loading {

		&:before {
			z-index: 12;
			background-color: @white;
		}
	}

	.page {
		.box-sizing();
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.logo {
		.font-size(0);
		width: 60px;
		height: 60px;
		display: inline-block;
		vertical-align: middle;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;

		@media @bp_768 {
			width: 70px;
			height: 70px;
		}

		@media @bp_1200 {
			width: 90px;
			height: 90px;
		}

		img {
			width: 100%;
		}
	}

	.content-container {
		.box-sizing();
		position: relative;
		padding: 90px 0 0 0;
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: flex-start;
		z-index: 1;

		&.center {
			justify-content: center;
			align-items: center;
		}

		@media @bp_768 {
			max-height: 100vh;
			flex-direction: row;
			padding-top: 90px;
		}

		@media @bp_1200 {
			padding-top: 110px;
		}

		@media @bp_800_height_max {
			padding-top: 110px;
		}

		@media @bp_700_height_max {
			padding-top: 90px;
		}
	}

	.content-aside {
		.box-sizing();
		position: relative;
		
		@media @bp_768 {
			width: 280px;
		}

		@media @bp_1024 {
			width: 25%;
		}

		article {
			margin: 0 auto;
			font-weight: 500;
			padding-bottom: 20px;

			@media @bp_768 {
				padding-bottom: 30px;
			}

			@media @bp_1200 {
				padding-bottom: 50px;
			}
		}

		h1 {
			.font-size(42);
			line-height: 48px;
			font-weight: 500;
			padding-bottom: 30px;
		}

		.description {
			.font-size(12);
			line-height: 16px;
			color: @black-1;
		}
	}

	.content {
		.box-sizing();
		text-align: center;
		width: 100%;
		padding-right: 10px;
		text-align: left;
		//flex-grow: 1;

		@media @bp_480 {
			margin: 0 auto;
			position: relative;
		}

		@media @bp_768 {
			//display: flex;
			//flex: 1;
			scrollbar-width: thin;
			overflow: hidden;
			overflow-y: auto;
			padding-left: 8%;
			margin-right: -10px;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: @grey;
		}

		&::-webkit-scrollbar-track-piece {
			background: @white-1;
		}

		&::-webkit-scrollbar-thumb {
			background: @grey;
		}

		> article {
			width: 100%;
			margin: 0 auto;
		}

		.newsletter {
			padding: 30px 0;

			@media @bp_1200 {
				padding-top: 40px;
			}
		}

		.custom-checkbox + label {
			.font-size(12);
			padding-left: 35px;
			line-height: 1;
			padding-top: 8px;
			padding-bottom: 8px;

			&:before {
				border-width: 2px;
			}
		}

		.custom-checkbox:checked + label {

			&:after {
				top: 2px;
				left: 2px;
				width: 20px;
				height: 20px;
			}
		}

		fieldset {
			text-align: left;
			max-width: 292px;
		}

		textarea {
			.font-size(12);
			line-height: 16px;
			background-color: @white-1;
			padding: 18px;
			max-width: 360px;
			height: 175px;
			margin-right: 20px;

			@media @bp_1100 {
				max-width: 400px;
			}
		}

		.form-row {
			padding: 16px 0 0 0;

			&:first-child {
				padding-top: 0;
			}
		}

		.btn-solid {

			&:hover {
				background-color: #222;
				color: @white;
			}
		}
	}

	.google-search {
		position: relative;

		label {
			.transition(all, 200ms, ease-out);
			.font-size(14);
			line-height: 18px;
			position: absolute;
			text-transform: none;
			letter-spacing: 0.5px;
			top: 19px;
			cursor: text;
			z-index: -1;
			color: @grey-1;
			left: 0;
			right: 0;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.error-msg, {
			color: @red;
			position: absolute;
			bottom: auto;
			top: 50px;
			left: 0;
		}
	}

	.zero-state {
		color: @grey-1;

		@media @bp_768 {
			width: 60%;
			margin: 0 auto;
			padding: 20px 0 15px 0;
		}
	}

	.entity {

		figure {
			width: 100%;
			padding-top: 100%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

		h3 {
			.font-size(24);
			line-height: 29px;
			font-weight: 500;
			padding-bottom: 20px;
			padding-top: 40px;
		}
	}

	.step {
		border-bottom: 2px solid @black;

		&.open {

			.step-title {

				h3 {

					&:after {
						.scale-spec(1,-1);
					}
				}
			}
			
			.step-content {
				.transition(max-height, 2000ms, ease-out);
				max-height: 1200px;
			}
		}

		&.locked {

			.step-title {

				h3 {
					cursor: default;

					&:after {
						content: none;
					}
				}
			}

			.step-content {
				max-height: 1200px;
			}
		}

		&.step-1 {
			
			.step-content {

				article {
					flex-direction: column;
					min-height: 150px;
				}

				fieldset {
					padding-bottom: 20px;
				}
			}
		}

		&:last-child {
			border-bottom: 0;
		}

		.step-title {
			position: relative;

			h3 {
				.font-size(24);
				line-height: 31px;
				font-weight: 500;
				padding: 25px 0;
				cursor: pointer;
				position: relative;

				&:after {
					.transition(transform, 120ms, ease-in);
					content: "";
					position: absolute;
					right: 0;
					width: 20px;
					height: 25px;
					top: 50%;
					margin-top: -12px;
					background-repeat: no-repeat;
					background-position: right center;
					background-image: url('../images/svg/arrow-down.svg');
					background-size: 20px;
				}
			}

			.selected-value {
				.font-size(12);
				.clamp-lines(1);
				font-weight: 500;
				color: @grey-1;
				margin-top: -25px;

				@media @bp_768 {
					position: absolute;
					right: 40px;
					top: 50%;
					margin-top: -6px;
					text-align: right;
					max-width: 50%;
				}

				@media @bp_1024 {
					.font-size(14);
					margin-top: -7px;
				}
			}

			.tabs {
				margin-top: -10px;
				padding-bottom: 20px;
				border-bottom: 0;

				@media @bp_768 {
					position: absolute;
					right: 40px;
					top: 50%;
					padding-bottom: 0;
					margin-right: 0;
				}
			}
		}

		.step-content {
			.transition(max-height, 300ms, ease-out);
			max-height: 0;
			height: auto;
			overflow: hidden;

			article,
			.tab-content {
				padding-bottom: 50px;

				@media @bp_1024 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}

			.tab-content {
				display: none;
				width: 100%;
				padding-bottom: 0;

				&.active {
					display: flex;
					flex-direction: column;
					
					&.tab-content-2,
					&.tab-content-3 {

						@media @bp_1024 {
							flex-direction: row;
							justify-content: space-between;
						}
					}
				}
			}


			.col {
				width: 100%;
				display: flex;
				flex-direction: column;
				flex: 1 1 auto;
				position: relative;

				& + .col {

					@media @bp_1024 {
						text-align: left;
						max-width: 292px;
						justify-content: flex-end;
					}
				}

				&.justify {
					justify-content: space-between;
					padding-top: 30px;

					@media @bp_1024 {
						padding-top: 0;
					}
				}

				> .error-msg {
					padding-top: 20px;

					&.show  + .btn-solid {
						margin-top: 5px;
					}
				}
			}

			.btn-solid {
				margin-top: 30px;
				max-width: 292px;

				@media @bp_1100 {
					width: 292px;
				}
			}
		}
	}

	.tabs {
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 30px;

		@media @bp_768 {
			padding-bottom: 15px;
			text-align: right;
			overflow: hidden;
		}
	}

	.btn-tab {
		.font-size(11);
		color: @black-1;
		height: 20px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-weight: 500;
		margin: 0 10px 0 0;

		@media @bp_1024 {
			.font-size(12);
			letter-spacing: 2px;
			margin: 0 10px;
		}

		&.active {
			color: @black;
		}

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.date-inline {
		max-width: 292px;

		> input[type="text"].mbsc-comp {
			
			&:disabled {
				.opacity(0.35);
				color: @black;
				border-color: @black;
			}
		}
	}

	.btn-clear-location {
		.font-size(10);
		cursor: pointer;
		border: 2px solid @black;
		font-weight: 500;
		text-transform: uppercase;
		margin-left: 5px;
		padding: 2px 5px;
		line-height: 10px;
		vertical-align: text-bottom;
	}

	.gmaps-embed {
		max-width: 292px;

		small {
			display: none;
		}
	}

	.search {
		overflow: visible;
	}

	.search-header {
		position: relative;
		z-index: 5;
	}

	.search-input {
		height: 70px;
		border: 0;
		padding: 25px 250px 25px 30px;
		background-color: @white-1;
		background-repeat: no-repeat;
		background-position: right 210px center;
		background-image: url('../images/svg/search.svg');
		background-size: 20px;
	}

	.search-filter {
		.font-size(12);
		text-transform: uppercase;
		background-color: @black;
		font-weight: 500;
		letter-spacing: 2px;
		color: @white;
		background-repeat: no-repeat;
		background-position: right 20px center;
		background-image: url('../images/svg/chevron-down-white.svg');
		background-size: 12px;
		position: absolute;
		right: 0;
		top: 0;
		width: 186px;
		z-index: 1;

		&:hover {

			.options {
				display: block;
			}
		}

		.selection {
			height: 70px;
			padding: 0 0 0 30px;
			display: flex;
			align-items: center;
		}

		.options {
			display: none;
			position: absolute;
			top: 70px;
			left: 0;
			right: 0;
			background-color: @black;
			padding: 20px 0;
			border-top: 1px solid @white;

			.option {
				padding: 5px 30px;
				cursor: pointer;

				&.active {
					display: none;
				}

				&:hover {
					background-color: rgba(255,255,255,0.1);
				}
			}
		}
	}

	.search-results {
		max-height: 330px;
		overflow: hidden;
		overflow-y: auto;
		scrollbar-width: thin;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: @grey;
		}

		&::-webkit-scrollbar-track-piece {
			background: @black-1;
		}

		&::-webkit-scrollbar-thumb {
			background: @grey;
		}

		.loading {
			z-index: 0;
			position: relative;
			height: 60px;
		}

		.item {
			padding: 0;
			border-bottom: 1px solid @white-1;
		}

		.zero-state {
			margin: 0;
			padding: 20px 12px;
		}
	}

	.search-results-card {
		display: flex;
		flex: 1 1 auto;
		flex-direction: row;
		height: 40px;
		justify-content: space-between;
		padding: 12px 0;
		cursor: pointer;

		&:hover {
			background-color: #eee;
		}

		&.active {
			background-color: @grey;

			figure {

				&:before {
					.rounded-corners(50%);
					content: "";
					width: 20px;
					height: 20px;
					position: absolute;
					left: 50%;
					top: 50%;
					margin: -10px 0 0 -10px;
					background-color: @white;
					background-repeat: no-repeat;
					background-position: center;
					background-image: url('../images/svg/checkmark.svg');
					background-size: 10px;
					display: inline-block;
				}
			}
		}

		.column {
			position: relative;
			align-items: center;
			display: flex;
		}

		.col-1 {
			padding-left: 60px;
			flex: 6;

			@media @bp_1280 {
				flex: 5;
			}
		}

		.col-2 {
			.font-size(12);
			line-height: 14px;
			color: @black-1;
			flex: 2;

			@media @bp_1280 {
				flex: 3;
			}

			span {
				.clamp-lines(2);

				@media @bp_1280 {
					.clamp-lines(1);
				}
			}
		}
		
		.col-3 {
			width: 150px;
			justify-content: flex-end;

			.btn {
				.prevent-click();
				.font-size(10);
				text-transform: uppercase;
				font-weight: 500;
				padding: 4px 12px;
			}
		}
		
		figure {
			position: absolute;
			left: 10px;
			top: 0;
			width: 40px;
			height: 40px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		h3 {
			.font-size(14);
			.clamp-lines(1);
			font-weight: 500;
			text-align: left;
		}
	}

	.booking-request {
		text-align: center;
		max-width: 292px;
		position: relative;

		h1 {
			.font-size(24);
			line-height: 29px;
			font-weight: 500;
			padding-bottom: 40px;
		}

		.text {
			.font-size(12);
			line-height: 16px;
			color: @grey-1;
			margin: 0;
			padding: 0;
		}

		.btn-solid {
			margin-top: 40px;
			padding-top: 16px;
			padding-bottom: 16px;

			&:hover {
				background-color: #222;
				color: @white;
			}
		}
	}
}