/* Calendar
**********************************************/
div.calendar-area .days {
	position: relative;
}
div.calendar-area .days::before {
	background: transparent none;
	transition: background-color .3s;
}
div.calendar-area.loading .days::before {
	content: "";
	display: block;
	background: #FFFFFFDD url('images/loader-198x198.gif') no-repeat center center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	border-radius: 16px;
/*
	background-image: none;
	content: url('images/loader-198x198.gif');
	display: flex;
	justify-content: center;
	align-items: center;
 */
}
div.calendar-navigation {
	text-align:center;
	margin:0.5em auto;
	position:relative;
	clear:both;
	/*overflow:auto; /* Don't overflow:auto because it may cause scrollbars */
	vertical-align:middle;
	font-size:1.8em;
	display: flex;
	align-items: center;
}
div.calendar-navigation .title {
	order: -1;
	flex-grow: 2;
	margin: 0;
	text-align: start;
}
@media (max-width: 767px) {
	div.calendar-navigation {
		margin-top:0;
	}
}
div.calendar-navigation .prev,
div.calendar-navigation .next {
	text-decoration:none;
	padding:0 0.25em;
}
div.calendar-navigation .prev {
	float:left;
}
div.calendar-navigation .next {
	float:right;
}
html[dir=rtl] div.calendar-navigation .prev {
	transform: scale(-1, 1);
}
html[dir=rtl] div.calendar-navigation .next {
	transform: scale(-1, 1);
}

/* Calendar (List)
**********************************************/
ul.calendar	{
/*	width:55em;*/
	display:block;
	margin:0 auto 1em;
	padding:0;
	position:relative;
	/*left:3px; /* We use negative margins to collapse borders on 6 of the columns, so we must compensate */
	overflow:auto;
}

ul.calendar li {
	list-style:none;
}
/*
ul.calendar li a,
ul.calendar li span {
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:0.25em;
	text-decoration:none;
}
*/
ul.calendar p.link {
	text-align:center;
	display:block;
}
ul.calendar li.day-names li {
	height:auto;
	text-align:center;
/*	background:#005CA8;
	color:#FFF;*/
	padding:0.25em;
	color: #666;
	text-transform: uppercase;
}

/*
ul.calendar li li {
	width:7em;
	height:7em;
	float:left;
	margin:.1em;
	border:1px solid #444;
	padding:.2em;
	overflow:auto;

	position:relative;
	padding:0;
	width:14.28%;
	padding-bottom:14.28%;
	height:0;
	margin:0;

	margin:-1px 0 0 -1px;
}
*/

ul.calendar {
	display: flex;
	flex-direction: column;
}
ul.calendar .day-names > ul,
ul.calendar .days > ul{
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: center;
	justify-content: center;
	align-content: center;
}

ul.calendar .days > ul > li {
	/*padding: 1em;
	font-size: 1.5em;*/
	padding: 16%;
	font-size: min(2vw, 1.5em);

	cursor: pointer;
	position: relative;

	float: none;
	width: auto;
	height: auto;
	border: none;
	aspect-ratio: 1 / 1;
	text-align: center;

}
ul.calendar .days > ul > li > span,
ul.calendar .days > ul > li > a {
	position: relative;
	height: auto;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

}
/*
ul.calendar .days > ul > li:hover {
	color: #c74b43;
}
*/
/*
ul.calendar li li > span,
ul.calendar li li > a {
	border-radius: 50%;
	background-origin: content-box;
	aspect-ratio: 1 / 1;
	width: 90%;
	height: 90%;
}
*/
/*
ul.calendar li.row-start > ul > li {
	border-radius: 50%;
	width: 13%;
	height: auto;
	aspect-ratio: 1 / 1;
}
*/
ul.calendar li.row-start ul li:first-of-type {
	margin-left:0;
}
ul.calendar li li p {
	font-size:.7em;
	display:block;
	border-bottom:1px solid #ddd;
}
ul.calendar li li ol {
	width:auto;
}
ul.calendar li li ul li,
ul.calendar li li ol li {
	font-size:.7em;
	display:block;
	height:auto;
	width:auto;
	margin:0;
	padding:.2em 0;
	float:none;
	border:0;
/*	border-bottom:1px solid #ddd;*/
}

ul.calendar li li.holiday {
	border-color:#f00;
}
ul.calendar li li.prev-month,
ul.calendar li li.next-month {
/*	background:#EEE;*/
/*	border:1px solid #999;*/
}
ul.calendar li li.prev-month a,
ul.calendar li li.next-month a,
ul.calendar li li.prev-month span,
ul.calendar li li.next-month span{
	opacity:0.25;
}

/* Calendar (Booking)
**********************************************/
ul.calendar .booking_status_0  {	/* BOOKING_STATUS_NONE */
	background:#cccccc;
}
ul.calendar .booking_status_1  {	/* BOOKING_STATUS_REQUESTED */
	background:#ffff99;
}
ul.calendar .booking_status_2  {	/* BOOKING_STATUS_PROCESSING */
	background:#ffb3b3;
	color:#FFF;
}
ul.calendar .booking_status_3  {	/* BOOKING_STATUS_COMPLETE */
	background:#99ff99;
}
ul.calendar .booking_status_4  {	/* BOOKING_STATUS_BOOKED */
	background:#ff9900;
}
ul.calendar .start-date {
	border-left:1px dashed #FFF;
}
ul.calendar .end-date {
	border-right:1px dashed #FFF;
}

/* Listing Page: Available */
.dark-calendar-section .calendar-area ul.calendar li ul li span,
.dark-calendar-section .calendar-area ul.calendar li ol li span {
	background:#99ff99;
}
/* Listing Page: Reserved (already booked, requested, or in the processes of being booked) */
.dark-calendar-section .calendar-area ul.calendar .booking_status_1,
.dark-calendar-section .calendar-area ul.calendar .booking_status_2,
.dark-calendar-section .calendar-area ul.calendar .booking_status_3,
.dark-calendar-section .calendar-area ul.calendar .booking_status_4 {
	background:#ffb3b3;
	color:#FFF;
}
.dark-calendar-section .calendar-legend {
	font-size:18pt;
	font-weight:bold;
	text-align:center;
}
/*
.dark-calendar-section .calendar-legend .color-box {
	font-size:150%;
	position:relative;
	top:10px;
}
*/
.dark-calendar-section .calendar-legend .available .color-box {
	color:#99ff99;
}
.dark-calendar-section .calendar-legend .reserved .color-box {
	color:#ffb3b3;
}
.dark-calendar-section #calendar-loading-overlay {
	position: absolute;
	width: 48px;
	height: 48px;
	top: 50%;
	left: 50%;
	margin-left: -24px;
	margin-right: -24px;
	border-radius: 4px;
	background: #000 url('images/loader-dark-24x24.gif') no-repeat center center;
	z-index: 1;
}

.calendar .day {
	position: relative;
	z-index: 1;
}
/*
 * Calendar Range Selection
 */
.calendar .day.range-saved::after,
.calendar .day.range-sel::after,
.calendar .day[data-status]::after {
	content: "";
	position: absolute;
	left: 0;
	top: 16%;
	bottom: 16%;
	right: 0;
	z-index: -1;
}
.calendar .day.range-sel::after {
	background-color: #99ff9944;
}
.calendar .day.range-saved::after {
	background-color: #BDE9F6;
}
.calendar .day[data-status]::after {
	background-color: #ffb3b344;
}
.calendar .day.range-start-saved::after,
.calendar .day.range-start::after,
.calendar .day.status-start[data-status]::after {
	left: 50%;
}
html[dir=rtl] .calendar .day.range-start-saved::after,
html[dir=rtl] .calendar .day.range-start::after,
html[dir=rtl] .calendar .day.status-start[data-status]::after {
	left: 0;
	right: 50%;
}
.calendar .day.range-end-saved:not(.range-in)::after,
.calendar .day.range-end::after,
.calendar .day.status-end[data-status]::after {
	right: 50%;
}
html[dir=rtl] .calendar .day.range-end-saved:not(.range-in)::after,
html[dir=rtl] .calendar .day.range-end::after,
html[dir=rtl] .calendar .day.status-end[data-status]::after {
	right: 0;
	left: 50%;
}
.dark-calendar-section .calendar-area ul.calendar .days .day.range-sel span {
	background-color: #8be78b;
	opacity: 1;
}
.dark-calendar-section .calendar-area ul.calendar .days .day.range-saved span {
	background-color: #ff0084;color: white!important;
	opacity: 1;
}
.range-sel[data-status] {
	text-decoration: line-through;
}

.small-calendar-section .calendar-legend {
	font-size: 16px;
	display: none;
}
.small-calendar-section .calendar-area {
	/*background-color: #FFF;
	color: #000;*/
	font-size: 13px;
}
.small-calendar-section .calendar-navigation {
	font-size: 14px;
	padding: 4px 4px;
}
.small-calendar-section .calendar-navigation .title {
	font-size: 14px;
}
.small-calendar-section .calendar-navigation .prev,
.small-calendar-section .calendar-navigation .next {
	font-size: 18px;
}

.small-calendar-section .calendar-area ul.calendar .days > ul > li {
	font-size: 13px;
}