.section-reservation-page {
	padding-bottom: 70px;
	padding-top: 30px;
}

/* STEP  */
.reservation_step {

	ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		font-size: 0;
		text-align: center;
		border-bottom: 1px solid #e4e4e4;

		li {
			display: inline-block;
			font-size: 15px;
			position: relative;
			margin: 0 20px;

			&:before {
				content: '';
				left: 0;
				right: 0;
				bottom: -1px;
				height: 2px;
				position: absolute;
				background-color: transparent;
				.transition(all 0.3s ease);
			}

			a {
				color: #333;
				display: block;
				padding: 15px 0;

				span {
					font-weight: bold;
					font-size: 18px;
					margin-right: 5px;
				}
			}

			&.active, &:hover {

				&:before {
					background-color: @brand;
				}
			}
		}
	}
}
/* END / STEP  */

/* RESERVATION DATE */
.reservation-date {
	margin-top: 30px;

	ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		padding: 20px 20px;

		li {
			color: #333;
			font-size: 12px;
			overflow: hidden;
			font-weight: 500;
			padding: 5px 0;

			span:last-child {
				float: right;
				font-weight: bold;
				text-transform: uppercase;
			}
		}
	}
}
/* END / RESERVATION DATE */

/* RESERVATION ROOM SELECTED */
.reservation-room-selected {
	background-color: #f1f1f1;
	margin-top: 30px;

	.reservation-room-seleted_item {
		padding: 20px 20px 20px 20px;
		border-bottom: 1px solid #e4e4e4;

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

		h6 {
			display: inline-block;
			vertical-align: middle;
			color: @color;
			font-size: 14px;
			text-transform: uppercase;
			font-weight: bold;
			margin: 0 10px 0 0;
			line-height: 1.428em;
			font-family: @Montserrat;
			font-weight: bold;
		}

		.reservation-option {
			display: inline-block;
			font-size: 12px;
			font-weight: 500;
			font-family: @Hind;
		}

		.reservation-room-seleted_name {
			overflow: hidden;
			margin-top: 10px;

			h2 {
				text-transform: uppercase;
				font-size: 14px;
				 
				font-weight: bold;
				margin-right: 80px;	
				float: left;
				margin: 0;
				
				a {
					color: #333;
					.transition(all 0.3s ease);

					&:hover {
						color: @brand;
					}
				}				
			}

			.reservation-amout {
				float: right;
				font-weight: bold;
				font-size: 14px;
				color: @brand;
			}

			&.has-package h2 {
				font-size: 16px;

				a {
					color: @brand;
				}
			}
		}

		.reservation-room-seleted_change {
			color: #898989;
			font-size: 12px;
			font-style: italic;
			text-decoration: underline;
			display: inline-block;
			margin-top: 7px;
			.transition(all 0.3s ease);

			&:hover {
				color: @hover;
			}
		}

		.reservation-room-seleted_package {
			border-top: 1px solid #e4e4e4;
			margin-top: 15px;
			padding-top: 5px;

			ul {
				list-style: none;
				padding-left: 0;
				margin-bottom: 0;
				padding-bottom: 2px;
				margin-top: 5px;

				li {
					color: #333;
					font-size: 13px;
					overflow: hidden;
					font-weight: 500;
					padding: 5px 0;

					span:last-child {
						float: right;
						font-weight: bold;
						text-transform: uppercase;
					}
				}

				+ ul {
					border-top: 1px solid #e4e4e4;
					padding-top: 8px;
				}
			}
		}

		.reservation-room-seleted_total-room {
			color: #333;
			font-size: 14px;
			font-weight: bold;
			text-transform: uppercase;
			border-top: 1px solid #e4e4e4;
			padding-top: 15px;
			padding-bottom: 10px;
			font-family: @Montserrat;

			.reservation-amout {
				float: right;
				color: @brand;
			}
		}

		&.reservation_disable {
			background-color: #f1f1f1;

			h6 {
				opacity: 0.4;
				font-size: 12px;
			}

			span {
				opacity: 0.3;
			}
		}
	}

	.reservation-room-seleted_current {
		overflow: hidden;
		color: #fff;
		padding: 15px 20px 13px 40px;

		h6 {
			margin-top: 0;
			margin-bottom: 10px;
			font-size: 14px;
			text-transform: uppercase;
			font-weight: bold;
			line-height: 1.428em;
			position: relative;
			color: #fff;

			&:before {
				content:'\f0da';
				font-family: 'FontAwesome';
				left: -20px;
				position: absolute;
				font-size: 12px;
				font-weight: normal;
			}
		}

		span {
			font-size: 12px;
			font-weight: 500;
		}

		&.reservation-bg_blue {
			color: #fff;
		}
	}

	.reservation-room-seleted_total {
		padding: 20px 20px;
		overflow: hidden;
		font-size: 16px;
		font-weight: bold;
		font-family: @Montserrat;

		label {
			font-weight: bold;
			text-transform: uppercase;
			margin: 0;
		}

		.reservation-total {
			float: right;
			color: @brand;
			font-size: 18px;
		}

		&.bg-blue {
			color: #fff;

			.reservation-total {
				color: #fff;
			}
		}
	}
}
/* END / RESERVATION ROOM SELECTED */

/* RESERVATION SIDEBAR */
.reservation-sidebar {
	padding-top: 10px;
}

.reservation-heading {
	font-size: 16px;
	color: #333333;
	font-family: @Montserrat;
	text-transform: uppercase;
	padding: 12px 20px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #e4e4e4;
}

.reservation-sidebar_availability {
	padding:0 20px 20px 20px;
	margin-top: 30px;

	.reservation-heading {
		margin-left: -20px;
		margin-right: -20px;
	}

	.check_availability_title {
		margin-top: 20px;
		color: @brand;
		font-size: 14px;
		text-transform: uppercase;
		font-family: @Montserrat;
		font-weight: bold;

	}

	.check_availability-field {
		margin-top: 15px;
		
		label {
			display: block;
			color: @color;
			font-size: 12px;
			margin-bottom: 7px;
			font-family: @Montserrat;
			text-transform: uppercase;
		}

		.awe-calendar-wrapper {
			width: 100%;

			.awe-calendar {
				background-color: #fff;
				border-width: 0;
				height: 30px;
				line-height: 30px;
				color: #898989;
				font-weight: 500;
			}
		}
		
		.bootstrap-select.btn-group.awe-select {
			width: 100%;
			
			.dropdown-toggle {
				background-color: #fff;
				height: 30px;
				border-width: 0;
				line-height: 30px;

				.filter-option, .caret {
					color: #898989;
					font-weight: 500;
				}
			}

			.dropdown-menu ul li a {
				padding: 7px 10px;
			}
		}

	}

	.check_availability_group {
		padding-left: 70px;
		position: relative;
		&:after {
			display: table;
			content: '';
			clear: both;
		}

		.label-group {
			position: absolute;
			left: 0;
			bottom: 5px;
			font-weight: bold;
			font-size: 12px;
			color: @color;
			font-family: @Montserrat;
			text-transform: uppercase;
		}

		.check_availability-field_group {
			margin-left: -4px;
			margin-right: -4px;
		}

		.check_availability-field {
			width: 50%;
			padding-left: 4px;
			padding-right: 4px;
			float: left;
		}
	}

	.awe-btn {
		margin-top: 30px;
		width: 100%;
		font-size: 14px;
		padding: 10px;
	}
}
/* END / RESERVATION SIDEBAR */

/* RESERVATION CONTENT */
.reservation_content {
	padding-bottom:20px;
	margin-top: 40px;

	&:before, &:after {
		content: '';
		display: table;
		clear: both;
	}
}

.reservation-calendar_custom {

	.reservation-calendar_title {
		text-align: center;
		color: @color;
		font-size: 14px;
		text-transform: uppercase;
		font-weight: bold;
		margin: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		position: relative;
		border-bottom: 1px solid #e4e4e4;
		margin-left: 3px;
		margin-right: 3px;
		font-family: @Montserrat;

		.reservation-calendar_corner {
			display: block;
			width: 24px;
			height: 24px;
			text-align: center;
			color: #cbcbcb;
			line-height: 24px;
			font-size: 12px;
			position: absolute;
			top: 50%;
			.translate(0,-50%);
			.transition(all 0.3s ease);

			&:hover {
				color: @brand;
			}

			&.reservation-calendar_prev {
				left: 0;
			}

			&.reservation-calendar_next {
				right: 0;
			}
		}
	}
	
	.reservation-calendar_tabel {
		width: 100%;
		vertical-align: middle;
		text-align: center;
		table-layout: fixed;
		margin-top: 15px;

		th {
			text-transform: uppercase;
			text-align: center;
			color: @color;
			font-size: 12px;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		td {
			background-color: #fff;
			background-clip: content-box;
			padding: 3px;
			.transition(all 0.3s ease);

			a {
				position: relative;
				display: block;
				padding-top: 100%;
				color: @color;
				font-size: 12px;
				 

				&:before {
					left: 0; right: 0; bottom: 0; top: 0;
					content:'';
					border: 2px solid transparent;
					position: absolute;
					.transition(all 0.3s ease);
				}

				small {
					position: absolute;
					top: 5px;
					right: 10px;
					font-size: 12px;
				}

				span {
					position: absolute;
					top: 60%;
					left: 50%;
					.translate(-50%, -50%);
				}

				&:hover:before {
					border-color: @brand;
				}
			}

			&.current-select {
				background-color: @brand;

				a {
					color: #fff;
				}
			}
		}
	}
}

.reservation-room {

	.reservation-room_item {
		margin-top: 45px;

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

.reservation-room_item {
	overflow: hidden;

	.reservation-room_name {
		color: @color;
		text-transform: uppercase;
		font-weight: bold;
		margin: 0;
		font-size: 24px;

		a {
			color: @color;
			.transition(all 0.3s ease);

			&:hover {
				color: @hover;
			}
		}
	}

	.reservation-room_img {
		float: left;
		margin-right: 30px;
		width: 370px;
		margin-top: 25px;

		img {
			width: 100%;
		}
	}

	.reservation-room_text {
		overflow: hidden;
		margin-top: 25px;

		.reservation-room_desc {
			color: #333333;

			p {
				margin-bottom: 0;
				font-size: 14px;

				b {
					color: @color;
				}
			}

			ul {
				padding-left: 18px;
				margin-bottom: 0;
				margin-top: 15px;

				li {
					color: @color;
					padding: 3px 0;
					font-size: 14px;
				}
			}
		}

		.reservation-room_view-more {
			display: inline-block;
			clear: both;
			margin-top: 10px;
			color: @brand;
			font-size: 12px;
			font-weight: 600;
			margin-bottom: 25px;
			text-decoration: underline;
			.transition(all 0.3s ease);

			&:hover {
				color: @hover;
			}
		}

		.reservation-room_price {
			display: inline-block;
			vertical-align: middle;
			color: #898989;
			font-size: 14px;
			margin: 0;
			line-height: 1;
			font-family: @Montserrat;

			.reservation-room_amout {
				font-weight: bold;
				color: #333333;
				font-size: 30px;
			}
		}

		.awe-btn {
			margin-left: 30px;
			min-width: 120px;
		}
	}

	.reservation-room_package {
		clear: both;
		margin-top: 30px;

		.reservation-room_package-more {
			display: block;
			color: #333333;
			font-size: 12px;
			font-weight: bold;
			font-family: @Montserrat;
			text-transform: uppercase;
			padding: 15px 30px;
			background-color: #f1f1f1;
			.transition(all 0.3s ease);

			&:after {
				content:'\f067';
				font-family: 'FontAwesome';
				float: right;
				font-size: 12px;
			}

			&[aria-expanded="true"] {

				&:after {
					content:'\f068';
				}
			}
		}

		.reservation-room_package-content {
			
		}
	}
}

.reservation-package_item {
	overflow: hidden;
	padding: 20px 30px;
	background-color: #fbfbfb;
	.transition(all 0.3s ease);

	.reservation-package_img {
		float: left;
		width: 100px;
		margin-right: 30px;

		img {
			width: 100%;
		}
	}

	.reservation-package_text {
		overflow: hidden;
		padding-right: 130px;
		position: relative;
		min-height: 72px;

		h4 {
			text-transform: uppercase;
			font-weight: bold;
			font-size: 14px;
			margin: 0;

			a {
				color: @color;
				.transition(all 0.3s ease);

				&:hover {
					color: @hover;
				}
			}
		}

		p {
			color: #898989;
			font-size: 12px;
			margin-bottom: 0;
			margin-top: 10px;

			b {
				color: @color;
			}
		}

		.reservation-package_book-price {
			position: absolute;
			right: 0;	
			top: 0;

			.reservation-package_price {
				color: #333333;
				text-align: right;

				.amout {
					font-weight: bold;
					font-size: 20px;
					line-height: 1;
					font-family: @Montserrat;
				}
			}

			.awe-btn {
				padding:5px 10px;
				min-width: inherit;
				font-size: 10px;
				margin-top: 5px;
				font-family: @Hind;
				font-weight: 700;
			}
		}
	}

	&:hover, &.current-select {
		background-color: #f1f1f1;
	}
}

.reservation-chosen-message {
	background-color: #f1f1f1;
	text-align: center;
	padding: 30px 30px;

	h4 {
		font-weight: bold;
		text-transform: uppercase;
		margin: 0;
		font-size: 20px;
		color: @color;
	}

	p {
		color: #898989;
		font-size: 15px;
		margin-top: 20px;
		margin-bottom: 0;
	}

	.awe-btn {
		width: 150px;
		color: #fff;
		padding: 10px;
		margin-top: 30px;
	}
}

.reservation-billing-detail {
	margin-left: 80px;
	max-width: 570px;

	.reservation-login {
		margin-bottom: 0;
		color: #898989;
		font-size: 14px;

		a {
			font-weight: bold;
			color: #333;
			.transition(all 0.3s ease);

			&:hover {
				color: @brand;
			}
		}
	}

	h4 {
		color: #000;
		text-transform: uppercase;
		margin-top: 20px;
		margin-bottom: 0;
		padding-bottom: 10px;
		font-weight: bold;
		font-family: @Montserrat;
		font-size: 30px;
	}

	label {
		color: #232323;
		font-size: 12px;
		text-transform: uppercase;
		font-family: @Montserrat;
		display: block;
		margin-top: 20px;
		margin-bottom: 10px;

		sup {
			color: #ff0000;
			font-style: 12px;
		}

		&.label-radio {

			.input-radio {
				margin: 0;
				display: inline-block;
				vertical-align: middle;
				margin-right: 15px;
			}
		}
	}

	.bootstrap-select.awe-select.btn-group {
		width: 100%;

		.btn {
			border: 2px solid #e4e4e4;
			font-weight: 500;

			.filter-option, .caret {
				color: #333;
			}
		}
	}

	.input-text,
	.input-textarea {
		border: 2px solid #e4e4e4;
		width: 100%;
		font-size: 14px;
		color: #333333;
		font-weight: normal;
	}

	.reservation-code {
		background-color: #333333;
		color: #ffffff;
		font-size: 14px;
		padding:15px 20px;
		margin-top: 35px;

		a {
			color: #fff;
			font-weight: bold;
			.transition(all 0.3s ease);

			&:hover {
				color: @hover;
			}
		}
	}

	.option-bank {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		padding-top: 10px;
		
		li {
			position: relative;
			padding-left: 30px;
			margin-top: 25px;

			.label-radio {
				font-size: 14px;
				margin: 0 15px 0 0;
				display: inline-block;

				.input-radio {
					position: absolute;
					top: 4px;
					left: 0;
				}
			}

			p {
				font-size: 12px;
				margin-bottom: 0;
				font-weight: 500;
				margin-top: 5px;
			}

			&:last-child .label-radio .input-radio {
				top: 9px;
			}
		}
	}

	.awe-btn {
		padding: 10px 40px;
		font-family: @Hind;
		font-size: 14px;
		font-weight: 600;
		margin-top: 40px;
	}
}
/* END / RESERVATION CONTENT */