.rental-calendar {
	position: absolute;
	display: none;
	top: -10rem;
	left: 0;
	right: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
	box-shadow: 0 5px 35px rgb(0 0 0 / 20%);
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 25px;
	background: var(--site-background);
	font-size: .9rem;
	line-height: .9rem;
	color: rgba(0,0,0,.6);
	padding: 10px;
	transition: opacity ease .2s;
	z-index: 999;
	text-align: center;
	cursor: unset;
}

.calendar-property {
	display: grid;
	background: #fff;
	font-size: .9rem;
	line-height: .9rem;
	color: rgba(0,0,0,.6);
	padding: 10px;
	transition: opacity ease .2s;
	z-index: 999;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}

.rental-calendar,
.calendar-property {
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.calendar-close {
	display: none;
	grid-row-start: 1;
	grid-column: 5;
	margin-top: 1.1rem;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
}

.month-wrapper {
	grid-column: 2 / span 3;
	grid-row-start: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: fit-content;
}


.counter-minus, .counter-plus {
	display: inline-block;
	width: fit-content;
	font-size: 2rem;
	cursor: pointer;
	color: slategrey;
	place-self: center;
}

.counter-minus {
	grid-column-start: 1;
	grid-row-start: 2;
}

.counter-plus {
	grid-column-start: 5;
	grid-row-start: 2;
}

.calendar-clear {
	display: none;
	grid-column: 3 / span 1;
	grid-row: 6;
	place-self: center;
}

.buttons {
	text-align: center;
	padding: 10px 0px 10px 0px;
	color: #4eb5e6;
	cursor: pointer;
	border-radius: 4px;
}

.calendar-month {
	display: inline-block;
	width: 86%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

@media screen and (min-width:821px) {
	.rental-calendar,
	.calendar-property {
		grid-template-columns: auto;
		grid-template-rows: auto;
	}

	.rental-calendar {
		height: auto;
		width: max-content;
		top: 4rem;
	}

	.month-wrapper {
		flex-direction: row;
		grid-column: 2 / span 3;
		grid-row: 2 / span 1;
	}
	.counter-minus {
		grid-column: 1 / span 1;
		grid-row: 2 / span 2;
	}

	.counter-plus {
		grid-column-start: 5;
		grid-row: 2;
	}
}

.booking-calendar .calendar-loading::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--site-background-semi-transparent);
	z-index: 2;
	content: "";
}

.booking-calendar .calendar-loading::after {
	position: absolute;
	top: 45%;
	left: 0;
	width: 100%;
	z-index: 3;
	text-align: center;
	font-family: var(--icon-font-family);
	font-weight: 700;
	font-size: 3rem;
	content: "\f110";
	color: var(--text-color);
	-webkit-animation: spin 1s infinite linear;
}

.calendar-active {
	display: grid;
}

.arrival-departure-input {
	display: inline-block;
}

.arrival-departure-input input[type=text] {
	height: 40px;
	border-radius: 5px;
	background: #fff;
	padding: 5px 15px;
	border: 1px solid rgba(0,0,0,.1);
	font-size: .9rem;
	line-height: .9rem;
	color: rgba(0,0,0,.6);
	cursor: pointer;
	opacity: 1;
}

.calendar-container table {
	width: 100%;
	font-family: var(--styled-font-family);
}

.calendar-container td {
	height: 30px;
	width: 30px;
}

.past-day {
	color: lightgrey;
}

.available-day {
	color: rgba(0,0,0,.6);
}

.available-day:hover {
	background-color: lightgray;
	cursor: pointer;
}

.selected-day {
	background-color: var(--cta-color);
	color: white
}

.booked-day {
	background-color: darkred;
	color: white;
}

.calendar-heading {
	color: var(--light-text-color);
	background-color: var(--site-background);
}

.calendar-container {
	display: inline-block;
	padding: 0 10px;
	width: 100%;
}

.calendar-header {
	display: inline-block;
	font-size: 1.1rem;
}

/***FLEXIBLE DATES STYLES***/

.flexible-dates {
	display: flex;
	overflow-x: scroll;
	grid-column: 1 / span 5;
	grid-row: 4;
	height: min-content;
}

.flexible-dates::-webkit-scrollbar {
	display: none;
}

.flexible-dates__button {
	position: relative;
	display: flex;
	justify-content: center;
	width: 90px;
	height: 30px;
	margin: 0 0.5rem;
	border: 1px solid var(--border-color);
	border-radius: 9999px;
}

.flexible-dates__button:hover {
	border-color: var(--accent-color);
}

.flexible-dates__radio {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.flexible-dates__radio {
	height: 10px;
	opacity: 0;
	z-index: 50;
}

.flexible-dates__title {
	z-index: 40;
}

.rental-search .search-filters .main-filters .filter label.flexible-dates__title {
	line-height: normal;
}

	.rental-search .search-filters .main-filters .filter label.flexible-dates__title,
	.rental-search-alt .search-filters .main-filters .filter label.flexible-dates__title {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-size: 0.8rem;
		font-weight: 300;
		color: var(--light-text-color);
		padding: 0 0.5rem;
	}

	.flexible-dates__radio:checked + label.flexible-dates__title {
		background: #c1c1c1b3;
		border-radius: 9999px;
	}

.calendar-nav {
	grid-column: 1 / span 5;
	grid-row: 5;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-top: 1.5rem;
	padding: 0 0.5rem;
}


@media screen and (min-width: 812px) {
	.arrival-departure-input {
		padding: 0.2rem;
	}
}

	@media screen and (min-width: 821px) {
		.flexible-dates {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem 0;
			margin: 0.5rem;
		}

		.calendar-close {
			display: flex;
		}

		.calendar-header {
			margin-bottom: 1rem;
		}

		.calendar-nav {
			display: none;
		}

		.calendar-clear {
			display: block;
		}

	}