@charset "UTF-8";
/* BE2026 - 2026 template as a PATCH of BE.css: must be loaded AFTER BE.css (Hotel.getStyleSheet, style 20).
   It only contains the rules and variables that differ from BE.css: the identical ones are already in BE.css.
   Some declarations are !important to win over the !important ones in BE.css. */
/* Booking Engine se2 - 2026 template
   Rules ordered by page area.
-------------------------------------------------------------------------------------------------*/


/* ==========================================================================
   0. VARIABLES AND FONTS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
	/* START MAIN VARIABLES - change these to create a template */
	--template-main-color: #819A91; /* template main color (buttons, calendar, icons, top bar) */
	--template-main-color-rgb: 129,154,145; /* same color in RGB, for transparencies: rgba(var(--template-main-color-rgb), .16) */
	--template-main-color-hover: #6f867d;
	--template-main-color-dark: #4f6159; /* dark version for texts needing more contrast (6.6:1 on white, the main color is 3:1) */
	--template-main-color-alternative: #818C78; /* main color variant for the progress buttons (.btn-two: Book, Go to checkout, Confirm) */
	--template-main-color-alternative-hover: #6f7a66;
	--template-link-color: var(--cyan-700); /* link color (#087990, the original primary) */
	--template-link-color-hover: var(--cyan-800); /* link hover color (#055160, the original primary hover) */
	/* END MAIN VARIABLES */

	/* base colors (from BE.css) */
	--light-grey-color: #d4d4d4;

	/* palette: color scales used by the color templates */

	/* tints for badges and chips */
	--slate-tint-bg: #E7EAEC;
	--slate-tint-text: #40505C;
	--gold-tint-bg: #FBEEDC;
	--gold-tint-text: #8A5A15;
	--gold-tint-border: #F0DAB3;

	/* shape and motion */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 6px rgba(3,40,48,.14);
	--shadow-md: 0 8px 20px rgba(3,40,48,.18);
	--shadow-lg: 0 16px 36px rgba(3,40,48,.22);
	--ease: cubic-bezier(.2,.8,.2,1);

	/* layout sizes */

	/* calendar (litepicker): !important because litepicker injects its own defaults at runtime */
	--litepicker-day-width: 42px;
	--litepicker-month-width: calc(var(--litepicker-day-width) * 7) !important;
	--litepicker-tooltip-color-bg: var(--white-color) !important;
	--litepicker-container-months-color-bg: var(--white-color) !important;
	--litepicker-container-months-box-shadow-color: rgba(3,40,48,.18) !important;
	--litepicker-footer-color-bg: var(--gray-100) !important;
	--litepicker-footer-box-shadow-color: rgba(3,40,48,.12) !important;
	--litepicker-month-header-color: var(--black-color) !important;
	--litepicker-button-prev-month-color: var(--template-main-color) !important;
	--litepicker-button-next-month-color: var(--template-main-color) !important;
	--litepicker-button-prev-month-color-hover: var(--template-main-color-hover) !important;
	--litepicker-button-next-month-color-hover: var(--template-main-color-hover) !important;
	--litepicker-month-weekday-color: var(--gray-600) !important;
	--litepicker-day-color: var(--black-color) !important;
	--litepicker-day-color-hover: var(--template-main-color) !important;
	--litepicker-is-today-color: var(--template-main-color-dark) !important;
	--litepicker-is-in-range-color: rgba(var(--template-main-color-rgb),.16) !important;
	--litepicker-is-locked-color: var(--gray-400) !important;
	--litepicker-is-start-color: var(--white-color) !important;
	--litepicker-is-start-color-bg: var(--template-main-color) !important;
	--litepicker-is-end-color: var(--white-color) !important;
	--litepicker-is-end-color-bg: var(--template-main-color) !important;
	--litepicker-highlighted-day-color: var(--gold-tint-text) !important;
	--litepicker-highlighted-day-color-bg: var(--gold-tint-bg) !important;
}

@media only screen and (max-width: 480px) {
	:root{
		--litepicker-day-width: 34px !important;
	}
}




/* ==========================================================================
   1. UTILITY CLASSES
   ========================================================================== */

/* margins and padding */
.no-margin { margin: 0; }
.no-padding { padding: 0; }
/* display */
/* text */
/* states */
/* clearfix */
/* responsive visibility */



/* ==========================================================================
   2. BASE AND LAYOUT
   ========================================================================== */

/* global */
body { background-color: var(--gray-100); color: var(--gray-800); font-family: "DM Sans", sans-serif; }
.litepicker { font-family: DM Sans, sans-serif; font-size: 0.95em; }
/* scrollbar */
::-webkit-scrollbar-thumb { background: var(--light-grey-color); border-radius: var(--radius-pill); }
* { scrollbar-width: thin; scrollbar-color: var(--light-grey-color) var(--white-color); }
/* page skeleton */
#main-row { padding: 0; margin-right: -10px; } /* the Bootstrap .row has -15px but #container has 10px padding: without this the results scrollbar overflows by 5px and gets cut */
#search-col { padding-top: 10px; padding-left: 0; }
.white-transparent {
	background-color: #fff;
	max-width: 1024px;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-sm);
}
@media only screen and (max-width: 991px) {
	#search-col { padding-bottom: 0; }
	#result-col { padding-left: 0; padding-top: 10px; }
}
@media only screen and (min-width: 992px) {
	body { overflow-x: hidden; overflow-y: hidden; min-height: 100vh; min-height: 100dvh; }
	.scroll-tab {
		height: 100vh;
		height: 100dvh; /* iPad/iOS: real visible height, without the part under the Safari bars */
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 10px;
	}
	#search-col.scroll-tab { padding-bottom: 12px; }
}
/* wide screens: content fixed at its 1488px width and centered, columns attached to the edges
   (the results scrollbar stays on the right edge). Replaces the resizeMarginOfMainCols() calculation in common.js:
   the !important beat the inline styles the script keeps setting. 1478px = row width at 1488px. */
@media only screen and (min-width: 1488px) {
	#main-row { margin-left: 0 !important; }
	#search-col { width: calc(50% - 369.5px); padding-left: calc(50% - 739px) !important; }
	#result-col { width: calc(50% + 369.5px); padding-right: calc(50% - 724px); }
	/* confirmation page (2/8/2 columns): white boxes centered in the middle column */
	#main-row > .col-lg-8 > .white-transparent { margin-left: auto; margin-right: auto; }
}
.img-thumbnail {
	max-height: 100px;
	padding: 4px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 0px solid #ddd;
	border-radius: var(--radius-sm);
	transition: all .2s var(--ease);
	display: inline-block;
	max-width: 100%;
	height: auto;
}
.title-font label {
	font-weight: 500;
	color: var(--gray-600);
	text-transform: uppercase;
	letter-spacing: .02em;
}
#rc_powered { margin-left: 0px; margin-right: 0px; margin-top: 10px; }
#rc_powered_inner {
	display: block;
	background-color: var(--gray-500);
	text-align: center;
	position: relative;
	border-radius: var(--radius-sm);
	margin: auto;
	padding: 5px 12px;
	max-width: fit-content;
}
#rc_powered_inner > span { color: var(--gray-700); font-size: 11px; }
#rc_powered_inner > img { height: 16px; vertical-align: middle; margin-left: 4px; }



/* ==========================================================================
   3. BUTTONS AND FORMS
   ========================================================================== */

.be-btn:focus:not(:focus-visible) { outline: none; }
/* no outline on click; the keyboard one (:focus-visible) remains */
/* buttons */
.be-btn {
	box-shadow: 1px 1px 1px var(--shadow-color);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: var(--radius-sm);
	max-width: 300px;
	padding: 10px 18px;
	background-color: var(--template-main-color);
	color: var(--white-color);
	outline: 0;
	border: none;
}
.be-btn:focus-visible { outline: 2px solid var(--template-main-color) !important; outline-offset: 2px; }
.be-btn:hover { outline: 0; cursor: pointer; background-color: var(--template-main-color-hover); }
.be-btn:active { background-color: var(--template-main-color-dark); }
.btn-one { background-color: var(--template-main-color); color: var(--white-color); border: 0px solid var(--template-main-color-hover); }
.btn-one:hover, .btn-one:focus { background-color: var(--template-main-color-hover); color: var(--white-color); }
.btn-two { background-color: var(--template-main-color-alternative); color: var(--white-color); border: 0px solid var(--template-main-color-alternative-hover); }
.btn-two:hover, .btn-two:focus { background-color: var(--template-main-color-alternative-hover); color: var(--white-color); }
/* +/- buttons (stepper) */
.box-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	width: 22px;
	opacity: 1;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-weight: 600;
	background-color: transparent;
	color: var(--template-main-color);
	transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.box-btn:hover { cursor: pointer; background-color: rgba(var(--template-main-color-rgb), .14); border-color: var(--template-main-color); }
/* motion shared by the buttons */
.be-btn, .btn-two, .btn-one {
	transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.be-btn:hover, .btn-two:hover, .btn-one:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.be-btn:active, .btn-two:active, .btn-one:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); }
/* form fields */
.input-group-addon:first-child {
	background-color: transparent;
	border-top-left-radius: var(--radius-md);
	border-bottom-left-radius: var(--radius-md);
	border-top: 1px solid var(--gray-300);
	border-bottom: 1px solid var(--gray-300);
	border-left: 1px solid var(--gray-300);
	border-right: 0px;
	padding: 5px 12px;
}
.text.form-control, select.form-control {
	margin-bottom: 5px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--gray-300);
	background-color: #fff;
	padding: 10px 12px 10px 44px;
	font-size: 14px;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0 32px 0 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23819A91' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* select arrow in the main color: CSS variables do not work inside an SVG data-uri, if --template-main-color changes update it here too */
	background-repeat: no-repeat;
	background-position: right 12px center;
	height: 44px;
	line-height: 44px;
}
textarea.text.form-control { background-image: none; padding-left: 12px; }
.text.form-control:focus, select.form-control:focus {
	border-color: var(--template-main-color);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(var(--template-main-color-rgb), .14);
	outline: none;
}
.text.form-control::placeholder { color: var(--gray-500); }
/* validation errors */
.form-group.has-error .form-control-feedback { display: none !important; }
.form-group.has-error small.help-block {
	display: block;
	color: var(--red-500);
	font-size: 11px;
	font-weight: 500;
	padding: 3px 12px 0;
}
@media only screen and (max-width: 991px) {
	.be-btn { padding-left: 7px; padding-right: 7px; }
}



/* icheck-bootstrap (style/icheck-bootstrap.css): checkboxes and radios in the theme color */
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before { border-color: var(--template-main-color); }
.icheck-primary > input:first-child:checked + label::before { background-color: var(--template-main-color); border-color: var(--template-main-color); }
/* payment method radios: circle only, centered in the column */
.main-pg-div [class*=icheck-] { margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 22px; line-height: 0; } /* instead of the old radio, centered in the .h-50 column */
/* checked radio: white dot instead of the checkbox tick */



/* ==========================================================================
   4. TOP BAR (LANGUAGE/CURRENCY)
   ========================================================================== */

#top_bar {
	margin: 0px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	padding: 6px 16px;
	font-size: 12px;
}
#top_bar > div { flex: 0 0 auto; width: auto; padding: 0; }
#top_bar > div:first-child { margin-right: auto; }
/* language and currency pills */
/* same rules for the mobile top bar too (#cur_bar_mobile, #lang_bar_mobile) */
#lang_bar, #lang_bar_mobile {
	background-color: transparent; /* no background: the color moves to the text */
	text-align: center;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	padding: 4px 6px 4px 14px; /* no separator: just spacing between currency and language */
}
#cur_bar, #cur_bar_mobile {
	background-color: transparent;
	text-align: center;
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	padding: 4px 4px 4px 6px;
}
#lang_bar button, #lang_bar_mobile button, #cur_bar button, #cur_bar_mobile button {
	background-color: transparent;
	border: none;
	color: var(--template-link-color); /* current language and currency: link color */
	letter-spacing: .4px;
	border-radius: var(--radius-pill);
	padding: 4px 8px;
	line-height: 1;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	transition: background-color .15s var(--ease);
}
#cur_bar button, #cur_bar_mobile button { font-weight: 700; }
#lang_bar button:hover, #lang_bar_mobile button:hover, #cur_bar button:hover, #cur_bar_mobile button:hover { background-color: rgba(3,40,48,.08); }
/* kept apart from the hover: Safari < 15.4 does not know :focus-visible and would drop the whole rule */
#lang_bar button:focus-visible, #lang_bar_mobile button:focus-visible, #cur_bar button:focus-visible, #cur_bar_mobile button:focus-visible { background-color: rgba(3,40,48,.08); }
#lang_bar button img, #lang_bar_mobile button img, #lang_bar button .lang_flag, #lang_bar_mobile button .lang_flag {
	width: 18px;
	height: 13px;
	object-fit: cover;
	vertical-align: middle;
	margin-right: 9px;
}
/* dropdown menu */
.btn-group-header { }
.dropdown-menu {
	min-width: 130px;
	left: 0px;
	text-align: center;
	padding: 0px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--light-grey-color);
	overflow: hidden;
	/* clips the items to the rounded corners (fallback: padding: 6px 0) */;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { color: var(--template-main-color); }
/* language menu: the button is at the far right of the top bar, the menu opens to the left so it stays on screen */
[id^="lang_bar"] .dropdown-menu { left: auto; right: 0; }
/* selected item in the menu (language/currency): after the hover to stay readable */
.dropdown-menu > li > a.active_lang, .dropdown-menu > li > a.active_curr {
	background-color: var(--template-main-color) !important;
	color: var(--white-color) !important;
}
.caret {
	border-top: 5px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-bottom: none;
	margin-left: 5px !important;
	opacity: .8;
	display: inline-block;
}
.lang_flag, .changeLanguage i { margin: 0px 5px 2px 0px; width: 20px; height: 15px; }
.changeLanguage:hover, .changeCurrency:hover { cursor: pointer; }
/* language and currency as in the reference site: currency symbol + code, flag + language code, V arrow,
   flat menu with 30px items and hover in the main color. No pipe: just spacing between the two items */
.curr_symbol, .lang_code { display: inline-block; }
[id^="cur_bar"] button, [id^="lang_bar"] button { font-weight: 700; }
[id^="cur_bar"] .curr_symbol { margin-right: 7px; }
[id^="lang_bar"] button .lang_flag { margin-right: 9px; }
[id^="cur_bar"] .caret, [id^="lang_bar"] .caret {
	width: 6px;
	height: 6px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: translateY(-2px) rotate(45deg);
	margin-left: 8px !important;
	opacity: 1;
}
[id^="cur_bar"] .dropdown-menu, [id^="lang_bar"] .dropdown-menu {
	min-width: 0;
	margin-top: 4px;
	padding: 5px;
	border: none;
	border-radius: 0;
	box-shadow: var(--shadow-sm);
	text-align: left;
}
[id^="cur_bar"] .dropdown-menu > li > a, [id^="lang_bar"] .dropdown-menu > li > a {
	display: flex;
	align-items: center;
	height: 30px;
	padding: 5px 10px;
	margin-bottom: 2px;
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}
[id^="cur_bar"] .dropdown-menu > li:last-child > a, [id^="lang_bar"] .dropdown-menu > li:last-child > a { margin-bottom: 0; }
[id^="cur_bar"] .dropdown-menu > li > a:hover, [id^="lang_bar"] .dropdown-menu > li > a:hover,
[id^="cur_bar"] .dropdown-menu > li > a:focus, [id^="lang_bar"] .dropdown-menu > li > a:focus {
	background-color: var(--template-main-color);
	color: var(--white-color);
}
/* selected item: after the items rule, otherwise the grey text stays on the colored background */
[id^="cur_bar"] .dropdown-menu > li > a.active_curr, [id^="lang_bar"] .dropdown-menu > li > a.active_lang {
	background-color: var(--template-main-color);
	color: var(--white-color);
}
[id^="lang_bar"] .dropdown-menu .lang_flag { margin: 0 8px 0 0; }
.be-rc-button { color: var(--gray-800); transition: color .15s var(--ease), transform .1s var(--ease); }
.be-rc-button:hover { color: var(--gray-900); transform: translateY(-1px); }
.blu-icon { color: var(--template-main-color); font-weight: 600; }
.fa-nav-inverse { }
.title-step {
	display: none;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}
.title-step>hr {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: -35px;
	margin-left: -10px;
	flex: 1;
	border-top: 1px solid var(--template-main-color);
}



/* ==========================================================================
   5. SEARCH COLUMN (CALENDAR, STEPPER, PROMO)
   ========================================================================== */

.month-item-weekdays-row { border-bottom: 1px solid var(--light-grey-color); padding-bottom: 8px; margin-bottom: 8px; }
.month-item-weekdays-row div {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gray-500);
}
.month-item-header {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--template-main-color);
}
.month-item-name { color: var(--black-color); }
.month-item-year { color: var(--gray-500); font-weight: 500; margin-left: 4px; }
.container__months.columns-2 .month-item:first-child { position: relative; }
.container__months.columns-2 .month-item:first-child::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	transform: translateX(50%);
	/* centered on the boundary between the two months */ width: 1px;
	background-color: var(--light-grey-color);
}
@media only screen and (max-width: 480px) {
	.container__months.columns-2 .month-item:first-child::after { display: none; }
	.container__months.columns-2 .month-item:first-child { border-bottom: 1px solid var(--light-grey-color); padding-bottom: 16px; }
}
/* weekend: is-weekend class set by calendar.js (render:day), no longer by column */
.container__days .day-item.is-weekend { background-color: rgba(var(--template-main-color-rgb),.08); }
.container__days .day-item.is-weekend.is-locked { background-color: transparent; }
.day-item.is-today {
	font-weight: 700;
	border-radius: var(--radius-pill) !important;
	background-color: rgba(var(--template-main-color-rgb), .14) !important;
	box-shadow: inset 0 0 0 1.5px var(--template-main-color);
	color: var(--template-main-color-dark) !important;
}
.day-item.is-today.is-start-date, .day-item.is-today.is-end-date { box-shadow: none !important; }
@media only screen and (max-width: 480px) {
	.container__months.columns-2 { flex-direction: column; }
	.container__months.columns-2 .month-item + .month-item { margin-top: 12px; }
}
.day-item.is-locked { text-decoration: line-through; opacity: .55; }
.day-item:not(.is-locked):hover { background-color: rgba(var(--template-main-color-rgb),.14) !important; }
.day-item.is-locked:hover { background-color: transparent !important; }
.day-item.is-highlighted { position: relative; background-color: transparent !important; }
.day-item.is-highlighted::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--gold-tint-text);
}
.resume_span_container {
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	margin-top: 8px;
	margin-bottom: 5px;
	padding: 8px 14px;
	font-weight: 400;
	white-space: normal;
	background: var(--white-color);
	color: var(--black-color);
	transition: transform .2s;
	border-top: 0px solid var(--light-grey-color);
	border-radius: var(--radius-sm);
	letter-spacing: .02em;
}
.resume_span_container i { margin: 0 4px 0 2px; font-size: 15px; }
.resume-dates {
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 100%;
	margin-top: 5px;
	text-transform: uppercase;
	padding-left: 0px;
	padding-right: 0px;
}
.resume-dates + .resume-dates::before {
	content: "→";
	margin: 0 8px;
	color: var(--gray-500);
	font-weight: 700;
	text-transform: none;
}
.resume-dates-titles { display: none; color: var(--template-main-color); }
/* main color instead of the BE.css cyan */
.main-background-color { background-color: var(--template-main-color) !important; }
.x-remove:hover { color: var(--template-main-color); }
.alternative-search-data { color: var(--template-main-color); }
.div-room-num { color: var(--slate-tint-text); }
#offerDescriptions .carousel-control { color: var(--template-main-color); }
.offertitle { border-color: rgba(var(--template-main-color-rgb), .35); background-color: rgba(var(--template-main-color-rgb), .14); }
.offer-box:hover { border-left-color: var(--template-main-color); }
/* summary: check-in and check-out on the same row, separated by the arrow */
.resume-dates-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	padding-left: 0px;
	padding-right: 0px;
}
.resume-dates-row > .resume-dates { width: auto; }
#calendar_row {
	margin: 0px;
	padding: 0px;
	margin-bottom: 20px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
#search_group_div { padding-left: 0; padding-right: 0; } /* was 15px (col-xs-12): more room for the dates, in single-field mode with the weekday they touched the icon */
#search_group_div > .form-group { margin-bottom: 0; }
#search_group_div > .form-group + .form-group .calendar_search_group { border-top: 1px solid var(--gray-300); }
.calendar_search_group { display: flex; align-items: center; transition: background-color .15s var(--ease); }
.calendar_search_group .form-control {
	position: static;
	float: none;
	width: auto;
	flex: 1 1 auto;
	z-index: auto;
	min-width: 0;
}
.calendar_search_group .input-group-addon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.calendar_search_group:hover { background-color: var(--gray-100); cursor: pointer; }
.calendar_search_group i { font-size: 16px; color: var(--template-main-color); }
.calendar_search_span {
	background-color: transparent;
	border: none;
	padding-left: 12px;
	padding-right: 6px;
}
.calendar_search_group .input-group-addon:first-child {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0 6px 0 12px;
}
#search_calendar, #search_calendar_out {
	border: none !important;
	border-radius: 0 !important;
	background-color: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--black-color);
	padding: 10px 4px 10px 0;
	cursor: pointer;
}
/* keeps the 2026 date field as it is: BE.css narrows the validation icon box for the old template (#calendar_row .has-feedback) */
#calendar_row .form-control-feedback { width: 34px; }
#calendar_row .has-feedback #search_calendar, #calendar_row .has-feedback #search_calendar_out { padding: 10px 4px 10px 0; }
#src_example {
	display: inline-block;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .15s var(--ease);
	outline: 0;
}
.occupancy-icon { color: var(--black-color); }
.room-number { font-size: 14px; font-weight: 700; }
.room_header_span_add {
	margin-top: 8px;
	margin-bottom: 5px;
	background-color: transparent !important;
	color: var(--template-link-color);
	border: none !important;
	box-shadow: none !important;
	max-width: none !important;
	padding: 4px 0 !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.room_header_span_add::before {
	content: "+";
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.room_header_span_add:hover { color: var(--template-link-color-hover); text-decoration: underline; }
#search_calendar {
	text-align: center;
	border-top: 1px solid var(--gray-300);
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
	border-bottom: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
}
#search_calendar_out {
	text-align: center;
	border-top: 1px solid var(--gray-300);
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
	border-bottom: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
}
.rm-cnt {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 12px 14px;
	background-color: transparent;
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-md);
}
.title>hr {
	margin-top: auto;
	margin-bottom: auto;
	border-top: 0px solid #91714c;
	flex: 1;
}
.search-titles { font-weight: 500 !important; color: var(--black-color); padding: 2px 6px; }
.btn-less { }
.btn-plus { }
.col-rooms { }
.div-room-adult-occupancy, .div-room-child-occupancy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	flex: 0 0 26px;
	padding: 3px 0;
	font-size: 14px;
	vertical-align: middle;
}
.room-occupancy-col.col-xs-6:not(.app_child_cnt), .room-occupancy-col.app_child_cnt {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	float: left !important;
	width: 50% !important;
	text-align: left !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gray-100);
}
.div-room-ages-occupancy {
	display: inline-flex;
	align-items: center;
	padding: 0px 3px !important;
	text-align: left !important;
	font-size: 12px;
	vertical-align: middle;
	white-space: nowrap;
}
.div-room-ages-occupancy::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--black-color); /* like the adults and children icons (.occupancy-icon) */
	font-size: 13px;
	margin-right: 6px;
}
.div-room-adult-quantity {
	position: relative;
	padding: 5px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-pill);
	display: inline-flex;
	flex: 0 0 auto;
}
.div-room-child-quantity {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	padding: 5px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-pill);
	display: inline-flex;
	flex: 0 0 auto;
}
.div-room-ages-quantity {
	white-space: nowrap;
	vertical-align: middle;
	background: transparent;
	padding: 5px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-pill);
	display: inline-flex;
	flex: 0 0 auto;
}
.app_child_cnt.col-xs-12 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	text-align: left !important;
	padding: 8px 0 8px 50% !important;
}
[id$="_children_append_container"] { margin-left: 0; margin-right: 0; }
[id$="_children_append_container"] > .row { margin-left: 0; margin-right: 0; }
.src-room-add { }
.children-occupancy-icon { }
.litepicker .container__months {
	border-radius: var(--radius-sm) !important;
	background-color: rgba(255,255,255,.78) !important;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.day-item.is-in-range {
	background: linear-gradient(90deg, rgba(var(--template-main-color-rgb),.16), rgba(var(--template-main-color-rgb),.28)) !important;
	transition: background .2s var(--ease);
}
.day-item.is-start-date, .day-item.is-end-date { animation: rc-date-pulse .3s var(--ease); }
.litepicker .button-previous-month, .litepicker .button-next-month {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s var(--ease), transform .12s var(--ease);
}
.litepicker .button-previous-month:hover, .litepicker .button-next-month:hover {
	background-color: rgba(var(--template-main-color-rgb), .14);
	transform: translateY(-1px);
}
.calendar_minstay {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	margin-top: 8px;
	background-color: var(--gold-tint-bg);
	border: 1px solid var(--gold-tint-border);
	border-radius: var(--radius-sm);
}
.calendar_span_box {
	display: inline-block !important;
	flex: 0 0 auto;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: var(--gold-tint-text) !important;
	color: transparent;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}
.calendar_span_text {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gold-tint-text);
}
#summary-tab .resume_span_container {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
}
#summary-tab #cal_nights { font-weight: 800; }
#summary-tab .resume_span_container .room-detail-icon, #summary-tab .resume_span_container .fa-moon-o, #summary-tab .resume_span_container .fa-home, #summary-tab .resume_span_container .fa-male, #summary-tab .resume_span_container .fa-child {
	color: inherit;
	font-size: 13px !important;
}
#change-btn {
	background-color: transparent !important;
	color: var(--template-link-color) !important;
	box-shadow: none !important;
	font-weight: 600;
	font-size: 12px;
	padding: 8px 0 !important;
	text-transform: none;
	max-width: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
#change-btn::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	font-size: 12px;
}
#change-btn:hover { background-color: transparent !important; color: var(--template-link-color-hover) !important; text-decoration: underline; }
#summary-tab { padding: 10px; text-align: center; animation: rc-card-in .4s cubic-bezier(.22,1,.36,1) both; }
#rooms_search .room-occupancy-col.col-xs-6:not(.app_child_cnt), #rooms_search .room-occupancy-col.app_child_cnt {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 0 8px !important;
	border: 0px solid var(--light-grey-color);
	border-bottom: 0px solid var(--light-grey-color) !important;
	border-radius: var(--radius-md);
	background-color: transparent;
	width: calc(50% - 4px) !important;
	max-width: calc(50% - 4px) !important;
	box-sizing: border-box;
}
#rooms_search .room-occupancy-col.col-xs-6:not(.app_child_cnt) { margin-right: 8px; }
#rooms_search .room-occupancy-col.app_child_cnt { margin-left: 0; }
#rooms_search .div-room-adult-occupancy, #rooms_search .div-room-child-occupancy {
	order: -1;
	/* icon first, above the stepper */ font-size: 18px;
}
#rooms_search .div-room-adult-quantity, #rooms_search .div-room-child-quantity {
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
	padding: 6px 8px;
}
#rooms_search .box-btn { width: 26px; height: 26px; }
#rooms_search .room-occupancy-col.col-xs-6:not(.app_child_cnt)::after, #rooms_search .room-occupancy-col.app_child_cnt::after {
	order: 2;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--gray-800);
}
#rooms_search .room-occupancy-col.col-xs-6:not(.app_child_cnt)::after { content: var(--lbl-adults); }
#rooms_search .room-occupancy-col.app_child_cnt::after { content: var(--lbl-children); }
#pin_div { margin-left: 0px; margin-right: 0px; margin-top: 6px !important; }
#pin_div .promotional-code-input input[name="pin"] {
	border: 1px dashed var(--gray-300);
	background-color: transparent;
	font-size: 12px;
	padding: 8px 12px 8px 32px;
	border-radius: var(--radius-sm);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.8L12.8 20.6a2 2 0 0 1-2.8 0l-7-7a2 2 0 0 1 0-2.8L10.8 3H19a2 2 0 0 1 2 2v7.8z'/%3E%3Ccircle cx='15' cy='9' r='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 14px 14px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
#pin_div .promotional-code-input input[name="pin"]:focus {
	border: 1px solid var(--template-main-color);
	background-color: #fff;
	outline: none;
}
#pin_div .promotional-code-input input[name="pin"]::placeholder { color: var(--gray-500); font-size: 12px; }
.rm-cnt .div-room-num .x-remove { color: var(--slate-tint-text); margin-left: 8px; opacity: .7; }
.rm-cnt .div-room-num .x-remove:hover { color: var(--red-color); opacity: 1; }
.rm-cnt .div-room-num, .rm-cnt .div-room-num *:not(.x-remove):not(.x-remove *) { color: var(--slate-tint-text) !important; }
.form-group.has-error .calendar_search_group { border: 1px solid var(--red-400) !important; border-radius: var(--radius-sm); }
.form-group.has-error .calendar_search_group i { color: var(--red-500) !important; }
.rm-cnt { position: relative; overflow: hidden; }
.rm-cnt .div-room-num {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	border: none;
	border-radius: var(--radius-pill);
	position: static;
	background: transparent;
	padding: 0;
	margin-bottom: 0;
	min-height: 34px;
}
.rm-cnt .div-room-num::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	margin-right: 6px;
	font-size: 13px;
	content: none;
}
/* "Room #n" label horizontal at the top of the box, no background (before: diagonal ribbon in the corner) */
.rm-cnt .room-number {
	position: static;
	color: var(--slate-tint-text) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.rm-cnt .room-number::before { content: var(--lbl-room); }
.rm-cnt .div-room-action-add {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	pointer-events: auto;
}
#btn-search { }



/* ==========================================================================
   6. CART (SIDEBAR AND FLOATING)
   ========================================================================== */

.basket-price-font { font-size: 13px; font-weight: 600; color: var(--black-color); }
.total-titles { font-weight: 500; color: var(--gray-600); font-size: 13px; }
.basket_total_span { font-weight: bold; color: var(--black-color); font-size: 16px; }
.currency-font { padding-left: 5px; font-size: 14px; color: var(--black-color); }
@media only screen and (min-width: 992px) {
	#basket-tab { max-width: 328px; }
}
.basket_arrow { font-weight: 400; transition: all .2s var(--ease); color: var(--black-color); }
.basket_arrow:hover { font-weight: 700; color: var(--template-main-color); cursor: pointer; }
.price_format small.smaller { font-size: 85%; vertical-align: baseline; }
.selected-item {
	padding: 14px 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: var(--white-color);
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-md);
}
.paydata-span-basket, .paydata-span-detail { color: var(--black-color); padding: 5px 0px; }
#basket-penalties .paydata-span-basket {
	display: block;
	position: relative;
	padding-left: 22px;
	color: var(--black-color);
}
#basket-penalties .paydata-span-basket b { color: var(--green-600); }
#basket-penalties .paydata-span-basket::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--green-500);
	position: absolute;
	left: 0;
	top: 2px;
}
#damage_deposit .paydata-span-basket {
	display: block;
	position: relative;
	padding-left: 22px;
	color: var(--gray-700);
}
#damage_deposit .paydata-span-basket::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--gray-500);
	position: absolute;
	left: 0;
	top: 2px;
}
#cart-items .div-room-num.item-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
#cart-items .div-room-num.item-row > div { flex: 0 0 auto; width: auto; padding: 0; }
#cart-items .div-room-num.item-row .col-lg-10 { flex: 1 1 auto; min-width: 0; }
.cart-supp-rate-desc {
	font-size: 12px;
	font-weight: 700;
	color: var(--black-color);
	display: block;
	text-transform: capitalize;
}
#row-total .total-titles { font-size: 15px; font-weight: 700; color: var(--black-color); }
#row-total .currency-font { font-size: 24px; font-weight: 700; color: var(--black-color); }
.basket-occupancy-icon { font-size: 16px !important; color: inherit; }
.product_total {
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-600);
	margin-right: 4px;
}
#basket-tab {
	margin-top: 10px;
	background-color: var(--white-color);
	padding-bottom: 15px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.basket_hr { margin-top: 16px; margin-bottom: 0; border-top: 1px solid var(--light-grey-color); }
#cart > hr.basket_hr:last-of-type { display: none; }
#to_complete_message, #select_supplements, #complete_message {
	background-color: var(--gray-100);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-top: 12px;
}
#back_div_message span, #supplement_message span, #basket_full span { font-size: 13px; color: var(--gray-700); }
#back_div_button, #select_supplements_button, #basket_full_button { margin-top: 12px; }
.cart-cls {
	background-color: var(--white-color);
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.cart-container-cls { background-color: transparent; }
.cart-container-floating { background-color: #00000050; }
#floating_basket_footer {
	width: 100vw;
	max-height: 65px;
	z-index: 25;
	position: fixed;
	bottom: 0px;
	left: 0;
	display: block; /* old template shape: icon and total bar joined */
}
/* the bar spans the whole screen but only icon and total are visible: lets taps through to the content below */
#floating_basket_footer { pointer-events: none; }
#floating_basket_footer > * { pointer-events: auto; }
#floating_basket_footer_icon_div {
	position: relative;
	overflow: hidden;
	background-color: var(--template-main-color);
	width: -moz-fit-content;
	width: fit-content;
	flex: 0 0 auto;
	padding: 15px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--white-color);
	box-shadow: var(--shadow-md);
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	z-index: 10;
}
#floating_basket_footer_icon_div:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); cursor: pointer; }
#floating_basket_footer_icon_div:active { transform: translateY(0); box-shadow: var(--shadow-md); }
#shine-div {
	content: "";
	position: absolute;
	top: 0;
	left: -50px;
	width: 15px;
	height: 100%;
	transform: skewX(-30deg);
	animation: shine1 .5s ease-in-out 3;
	background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.33) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100% );
}
#floating_basket_footer_content {
	border-radius: var(--radius-md);
	border: 2px solid var(--white-color); /* white border as in the old template: sets the bar apart from the background */
	box-shadow: var(--shadow-md);
	z-index: 9;
	background-color: var(--template-main-color);
	position: absolute; /* old template shape: wide bar starting under the icon */
	top: 0;
	bottom: 0;
	margin: 10px 10px 20px 53px;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	max-width: 300px; /* compact but with room for long amounts (e.g. ARS) */
	text-align: center;
	overflow: hidden; /* the width is animated by showBasketDetails() in hotel.js: no width !important */
}
#floating_basket_footer_total { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
#floating_basket_footer_span_total_currency { }
#basket-action {
	display: none;
	border: 2px solid var(--template-main-color);
	font-weight: bold;
	text-decoration: underline;
	background-color: white;
	position: fixed;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 50px;
	padding-right: 50px;
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: fit-content;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}
#basket-action-message-ok { color: var(--template-main-color); }
#basket-action-message-no { color: var(--template-main-color); }
.cart-cls-floating {
	background-color: var(--white-color);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	animation: rc-cart-in .38s cubic-bezier(.22,1,.36,1) both;
}
.product_detail_basket {
	background-color: var(--gray-200);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding: 8px 10px 2px 10px;
	margin-top: 4px;
}
#damage_deposit .local_taxes_hr { display: none; }
#damage_deposit { margin-top: 10px; }
.cart-supp-room-desc {
	font-size: 14px;
	font-weight: 700;
	color: var(--black-color);
	line-height: 1.3;
}
.cart-remove {
	color: var(--gray-500);
	font-size: 12px !important;
	padding: 4px !important;
	border-radius: var(--radius-pill);
	transition: background-color .15s var(--ease);
}
.cart-remove:hover { background-color: var(--red-100); cursor: pointer; color: var(--red-600); }
.x-remove.cart-remove, .cart-remove.x-remove { color: var(--gray-500) !important; }
.x-remove.cart-remove:hover, .cart-remove.x-remove:hover { color: var(--red-600) !important; }
.product_total_amount {
	padding: 0px;
	font-size: 16px;
	font-weight: 700;
	color: var(--black-color);
	font-variant-numeric: tabular-nums;
}
.row-net > div:last-child, .row-taxes > div:last-child, #row-total > div:last-child { padding-right: 0; }
.row-in-place .total-titles { position: relative; }
.row-in-place .total-titles::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 6px;
	color: var(--gray-500);
	font-size: 12px;
}
#basket-penalties .local_taxes_hr { display: none; }
#row-total {
	border-top: 1px solid var(--gray-300);
	padding: 16px 18px;
	margin-top: 12px;
	font-weight: bold;
	border-radius: var(--radius-md);
	position: relative;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: linear-gradient(135deg, var(--slate-tint-bg), #dfe4e6);
}
#row-total .basket_total_span { font-size: 22px; }
#row-total #floating_basket_total, #row-total .price_format { font-size: 26px; font-variant-numeric: tabular-nums; }
.cart-cls #row-total, .cart-cls-floating #row-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.cart-cls #row-total > div, .cart-cls-floating #row-total > div { flex: 0 1 auto; width: auto; max-width: none; }
.cart-cls #row-total #floating_basket_total, .cart-cls-floating #row-total #floating_basket_total, .cart-cls #row-total .price_format, .cart-cls-floating #row-total .price_format {
	font-size: 20px;
	white-space: nowrap;
}
.item-price, .currency-font, #span_net, #span_local_tax { font-variant-numeric: tabular-nums; }
.local_taxes_hr { border-top: 1px dashed var(--gray-400) !important; margin: 5px 10px; opacity: .8; }
.row-in-place > div:last-child { padding-left: 0 !important; }
.row-net, .row-taxes { padding-right: 18px; }
.row-in-place {
	margin-top: 4px;
	border-left: 2px solid var(--light-grey-color);
	padding-left: 12px !important;
	margin-left: 0;
	padding-right: 18px;
}
.row-in-place > .col-lg-5 { padding-right: 0; }
.row-in-place > .col-lg-7 { text-align: left !important; }
.row-totale-prepaid {
	text-align: left !important;
	margin-top: 10px;
	border-left: 2px solid var(--light-grey-color);
	margin-left: 15px;
	padding-left: 12px !important;
}
.row-totale-prepaid > div { padding-left: 0 !important; text-align: left !important; }
.row-net, .row-taxes { background-color: var(--gray-100); padding-top: 6px !important; padding-bottom: 6px !important; }
.row-net { border-radius: var(--radius-md) var(--radius-md) 0 0; padding-top: 12px !important; }
.row-taxes:last-of-type { border-radius: 0 0 var(--radius-md) var(--radius-md); padding-bottom: 12px !important; }
.row-net .total-titles, .row-taxes .total-titles { font-weight: 500; color: var(--gray-600); }
.selected-item .cart-total-row {
	background-color: var(--gray-100);
	border-radius: var(--radius-md);
	padding: 4px 10px 8px 10px;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.product_detail_basket + .cart-total-row { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.selected-item .cart-total-row > .cart-total-occupancy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.selected-item .cart-total-row .basket-occupancy-icon { color: inherit; font-size: 13px !important; }
.selected-item .cart-total-row > .cart-total-price {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	white-space: nowrap;
}
.selected-item .cart-total-row .product_total { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.selected-item .cart-total-row .product_total_amount { font-size: 18px; white-space: nowrap; }
.selected-item { box-shadow: none; position: relative; overflow: hidden; }
/* "Room #n" label horizontal on its own row above the description, no background (before: diagonal ribbon in the corner) */
#cart-items .div-room-num.item-row { flex-wrap: wrap; row-gap: 2px; }
#cart-items .div-room-num.item-row > .cart-room-badge {
	display: block;
	position: static;
	flex: 0 0 100%;
	max-width: none;
	width: 100%;
	text-align: left;
	white-space: nowrap;
}
#cart-items .div-room-num.item-row > .cart-room-badge::before {
	content: var(--lbl-room) " ";
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--slate-tint-text);
	margin-right: 0;
}
#cart-items .room-number-num, #cart-items .room-number-supp {
	color: var(--slate-tint-text) !important;
	font-size: 11px !important;
	font-weight: 700;
}
.x-remove { color: var(--red-color); font-weight: bold; transition: color .15s var(--ease); }
.room-number-num { font-size: 12px; font-weight: 700; }



/* ==========================================================================
   7. RESULTS (HOTEL, ROOMS, RATES, COMPARATOR, OFFERS)
   ========================================================================== */

#offerDescriptions .carousel-control .glyphicon-chevron-left, #offerDescriptions .carousel-control .glyphicon-chevron-right {
	top: 62%;
}
.dx-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 8px 0;
}
.tratment-div { padding-bottom: 5px; margin-top: 6px; }
.price-font { font-size: 18px; font-weight: 700; color: var(--black-color); }
.rate_price { }
.best-price-span > div, .rate_price > div, .offer.disabled.title-font > div { display: inline; }
.price-top-part { display: inline-block; margin-right: 4px; }
.price-top-part .offer.disabled.title-font { font-size: 13px; font-weight: 400; color: var(--gray-500); }
.price-top-part s { text-decoration-color: var(--gray-400); }
.room_offer.price-font { font-size: 22px; }
.label_perc_discount.label-danger {
	background-color: transparent;
	color: var(--gold-tint-text);
	border: none;
	font-weight: 700;
	padding: 0;
	border-radius: 0;
	display: inline-block;
}
.label_perc_discount.label-danger::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f164";
	font-size: 12px;
	margin-right: 4px;
}
.label_perc_discount.label-danger::after { content: none; }
.offer_title { display: none; }
.treatment_desc {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 700;
}
.product-first-img {
	padding-left: 10px;
	max-width: 100%;
	max-height: 450px;
	border-radius: var(--radius-md);
}
.property_calendar input { opacity: 0; border: 0; padding: 0; } /* field anchoring the property calendar: invisible */
.be-carousel-img { }
.carousel-img-wrap {
	display: block;
	position: relative;
	width: 100%;
	height: 75vh; /* like the old template: height based on the screen, 50vh below 992px */
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--gray-100);
}
.carousel-custom-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%; /* whole image, no cropping: any side bands show the grey background */
}
@media only screen and (max-width: 991px) {
	.carousel-img-wrap { height: 50vh; }
}
/* carousel dots: the original Bootstrap ones, as in the old template */
.carousel-control {
	width: 44px;
	height: 44px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	border-radius: var(--radius-pill);
	background-color: rgba(3,40,48,.4);
	background-image: none;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: none;
	transition: background-color .15s var(--ease);
}
.carousel-control:hover, .carousel-control:focus { background-color: rgba(3,40,48,.6); color: var(--white-color); outline: none; }
.carousel-control.left { left: 16px; }
.carousel-control.right { right: 16px; }
.carousel-control .glyphicon { display: none; }
.carousel-control::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-color: var(--white-color);
	border-width: 0 2px 2px 0;
}
.carousel-control.left::before { transform: rotate(135deg); margin-left: 4px; }
.carousel-control.right::before { transform: rotate(-45deg); margin-right: 4px; }
.rate-col-desc { border-top: 0px solid var(--gray-400); padding-top: 10px; background-color: transparent; }
.col-md-3.search-result-gallery.room-col {
	margin: auto auto 15px auto;
	width: 235px;
	height: 180px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-sm);
}
@media only screen and (max-width: 991px) {
	.price-top-part { display: block; }
}
@media only screen and (min-width: 992px) {
	span.property-title { font-size: 15px !important; }
	.search-result-item { }
}
#detailModal-body .col-md-12 {
	font-size: 14px;
	line-height: 1.7;
	color: var(--black-color);
	padding: 4px 20px;
}
#detailModal-body .col-md-12 h4 {
	color: var(--template-main-color);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-top: 6px;
	margin-bottom: 8px;
}
#detailModal-body .col-md-12 p {
	font-size: 13px;
	color: var(--gray-700);
	margin-bottom: 8px;
	line-height: 1.6;
}
#detailModal-body .col-md-12 hr { margin: 20px 0; border: none; border-top: 1px solid var(--light-grey-color); }
#detailModal-body .rate-conditions { padding: 8px 20px 16px; }
#detailModal-body .rate-conditions::before {
	float: left;
	/* stays next to the title even when the description starts with a <p> */ font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--green-500);
	margin-right: 6px;
	font-size: 13px;
}
#detailModal-body .rate-conditions:first-line {
	font-size: 15px;
	font-weight: 700;
	color: var(--template-main-color);
	text-transform: uppercase;
	letter-spacing: .02em;
}
#detailModal-body .rate-conditions.rate-conditions-nr::before { content: "\f00d"; color: var(--red-color); }
#detailModal-body .rate-conditions > p:first-child {
	font-size: 15px;
	font-weight: 700;
	color: var(--template-main-color);
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 8px;
}
#detailModal-body .rate-conditions h4 { padding-top: 14px; border-top: 1px solid var(--light-grey-color); color: var(--template-main-color); }
#detailModal-body .rate-conditions h4::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	margin-right: 6px;
	font-size: 13px;
	color: var(--gray-500);
}
#detailModal-body .rate-conditions h4:nth-of-type(1)::before { content: ""; }
#detailModal-body .rate-conditions h4:nth-of-type(2)::before { content: ""; }
#detailModal-body .rate-conditions hr {
	margin: 18px 0 6px;
	border: none;
	border-top: 1px dashed var(--gray-300);
	position: relative;
	overflow: visible;
}
#detailModal-body .rate-conditions hr::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	position: absolute;
	left: 0;
	top: -7px;
	background-color: #fff;
	padding-right: 6px;
	color: var(--gray-500);
	font-size: 13px;
	line-height: 1;
}
.modal-property-title {
	text-transform: capitalize;
	color: var(--template-main-color);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}
#detailModal-body .modal-property-col p { font-size: 13px; color: var(--gray-700); margin-bottom: 6px; }
/* property sections at full width (below 992px): some space between them */
@media only screen and (max-width: 991px) {
	#detailModal-body .modal-property-col { padding-top: 12px; padding-bottom: 12px; }
}
@media only screen and (min-width: 992px) {
	#detailModal-body .modal-property-row { display: flex; flex-wrap: wrap; }
	#detailModal-body .modal-property-row::before, #detailModal-body .modal-property-row::after { display: none; }
	#detailModal-body .modal-property-col { padding: 20px; border-right: 1px solid var(--light-grey-color); }
	#detailModal-body .modal-property-col:nth-child(3n), #detailModal-body .modal-property-col:last-child { border-right: none; }
}
.room_bed_div span::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--template-main-color);
	margin-right: 6px;
}
.all_rate_title { color: var(--template-main-color); text-transform: uppercase; }
span.property-title {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.property-address { font-size: 12px; font-weight: 400; }
table.property-address { width: 100%; }
.fac-pipe { display: none; }
/* DISABLED 01/10 - style of the "offer" label above the room card, hidden by 574
   (.offer_title { display: none; } in chapter 7, replaced by the OFFER ribbon on the rate).
   To restore it: remove that rule and uncomment this one.
.offer_title {
	box-shadow: var(--shadow-sm);
	font-weight: 400 !important;
	font-size: 140%;
	width: fit-content;
	margin-top: 10px;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
}
*/
.stars-color { color: white; }
.room-title {
	color: var(--black-color);
	font-size: 20px;
	text-transform: capitalize;
	font-weight: 500;
	width: fit-content;
	margin-top: inherit;
}
.label-room-quantity {
	vertical-align: middle;
	font-size: 13px;
	white-space: nowrap;
	font-weight: 600;
	color: var(--gray-600);
}
.last-available { color: var(--gold-tint-text); }
.last-available::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 4px;
	font-size: 14px;
}
.label-room-quantity-desc { color: var(--gray-600); font-size: 11px; }
.rate-col-desc .col-xs-5.text-center .label-offer { display: none; }
.cancellation_text {
	color: var(--green-500);
	display: block;
	margin: 4px 0px 8px 0px;
	font-weight: 500;
	font-size: 13px;
}
.cancellation_text-nr {
	color: var(--red-color);
	display: block;
	margin: 4px 0px 8px 0px;
	font-weight: 500;
	font-size: 13px;
}
.cancellation_text-pr {
	color: forestgreen;
	display: block;
	margin: 4px 0px 8px 0px;
	font-weight: 700;
	font-size: 13px;
}
.rate-item:hover { box-shadow: var(--shadow-md); border-color: var(--gray-400); }
.product-col {
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: transparent;
	border-left: 0px solid var(--white-color);
	border-top: 1px solid var(--light-grey-color);
	border-bottom: 0px solid var(--white-color);
	transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.product-col:hover {
	background-color: var(--gray-100);
	border-top: 1px solid var(--light-grey-color);
	border-left: 3px solid var(--template-main-color);
	border-bottom: 1px solid var(--gray-300);
}
.occupancy-center {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding-right: 6px;
	color: var(--black-color);
}
.rate-item-col { }
.rate-title {
	color: var(--black-color);
	font-weight: 700;
	font-size: 15px;
	text-transform: capitalize;
}
.room-available { margin-top: 8px; font-size: 13px; }
.more-btn-div { width: 100%; text-align: center; }
.readMoreSpan { transition: all .2s var(--ease); width: fit-content; }
.room-detail-icon { color: #0a0a0a; font-size: 15px !important; }
#detailModal-body .col-md-5 { font-size: 14px; line-height: 1.6; padding-top: 6px; }
#detailModal-body .room-facilities { font-size: 12px; padding: 3px 9px; }
.more-btn:hover { transform: translateY(-2px); }
.label-offer:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.be-label { }
.notav-more-btn {
	padding-left: 15px;
	padding-right: 15px;
	position: static !important;
	bottom: auto !important;
	margin-top: 0 !important;
}
.more-btn {
	position: static !important;
	bottom: auto !important;
	margin-top: 12px !important;
	transition: transform .1s var(--ease);
}
.icons-div { padding: 0px; padding-right: 0; }
.product-col .col-xs-7.rate-item-col.text-left { padding-left: 6px; }
.best-price-div { text-align: center; width: 100%; }
.best-price-span {
	padding-top: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-600);
}
.best-price-span .price_format { font-size: 20px; font-weight: 700; color: var(--black-color); }
.show_crossed_span { color: var(--template-link-color); font-size: 14px; }
.show_crossed_span:hover { color: var(--template-link-color-hover); cursor: pointer; text-decoration: underline; }
.show_all_property_span { color: var(--template-link-color); }
.show_all_property_span:hover { color: var(--template-link-color-hover); cursor: pointer; text-decoration: underline; }
#comparator-div { margin-top: 16px; margin-bottom: 16px; overflow: hidden; }
#comparator_loader:before {
	display: block;
	position: absolute;
	content: "";
	left: -200px;
	width: 200px;
	height: 4px;
	animation: loading 2s linear infinite;
	background-color: var(--template-main-color);
}
#comparator {
	overflow: hidden;
	background: transparent;
	border: none;
	display: block;
}
#comparator > .clearfix { display: flex; align-items: stretch; }
/* DISABLED 01/10 - comparator "best offer" box (Java BookingEngineManager ~9692), squashed to 0x0 by 574
   (.best-offer { position: static; width: 0; height: 0; padding: 0; overflow: hidden; } later in chapter 7,
   and .best-offer { display: none !important; } below 420px), replaced by the comparator "Best price" label.
   To restore it: remove those two rules and uncomment this block.
.best-offer {
	padding: 9px 20px;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	text-align: center;
	width: 100%;
}
.best-offer .property-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	display: inline-flex;
	align-items: center;
}
.best-offer .property-title::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 8px;
	font-size: 14px;
}
*/
.site-offer, .portal-offer { flex: 1 1 50%; text-align: center; }
.portal-desc { font-weight: 500; color: var(--gray-600); }
.site-amount { font-weight: 700; color: var(--green-600); }
.site-currency { color: var(--green-600); font-weight: 600; }
.site-price::before { font-family: "FontAwesome"; font-weight: normal; font-style: normal; }
.portal-amount { font-weight: 600; color: var(--gray-500); }
.portal-currency { color: var(--gray-500); }
.site-offer { border-right: 1px solid var(--light-grey-color); color: var(--green-500); }
@media only screen and (max-width: 420px) {
	#comparator > .clearfix { flex-direction: column; }
	.site-offer { border-right: none; border-bottom: 1px solid var(--light-grey-color); } /* stacked boxes: horizontal line instead of the vertical one */
}
.portal-offer { color: var(--red-500); }
.facilities_div {
	border-top: solid 1px var(--light-grey-color);
	color: var(--gray-700);
	padding-top: 5px;
	position: relative;
}
.room-facilities {
	text-transform: uppercase;
	font-size: 11px;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	border: 1px solid var(--slate-tint-bg);
	color: var(--slate-tint-text);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	margin: 0 5px 5px 0;
	display: inline-block;
	font-weight: 700;
	transition: color .15s var(--ease);
}
.search-result-item {
	min-height: 200px;
	padding: 15px 0px;
	margin-top: 5px;
	margin-right: 0px !important;
	margin-left: 0px !important;
	animation: rc-card-in .5s cubic-bezier(.22,1,.36,1) both;
}
.search-result-item:nth-of-type(1) { animation-delay: .02s; }
.search-result-item:nth-of-type(2) { animation-delay: .10s; }
.search-result-item:nth-of-type(3) { animation-delay: .18s; }
.search-result-item:nth-of-type(4) { animation-delay: .26s; }
.search-result-item:nth-of-type(5) { animation-delay: .34s; }
.search-result-item:nth-of-type(6) { animation-delay: .42s; }
.col-md-3.search-result-gallery.room-col img {
	width: 235px;
	height: 180px;
	object-fit: cover;
	object-position: center;
	padding: 0px;
	transition: transform .5s var(--ease);
}
.col-md-3.search-result-gallery.room-col:hover img { transform: scale(1.09); }
.label-offer {
	font-weight: 700 !important;
	white-space: normal;
	display: inline-block;
	color: var(--gold-tint-text) !important;
	background-color: var(--gold-tint-bg) !important;
	border: 1px solid var(--gold-tint-text);
	padding: 5px 12px !important;
	border-radius: var(--radius-pill) !important;
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	position: relative;
	overflow: hidden;
	border-color: var(--gold-tint-border) !important;
	font-size: 11px !important;
	letter-spacing: .02em;
	animation: rc-urgency-pulse 2.4s ease-in-out infinite;
}
.rate-item {
	border: 1px solid var(--gray-300);
	background: #fff;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: -5px;
	margin-right: -5px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
	position: relative;
}
.rate-item.rate-discounted { border: 2px solid var(--gold-tint-border); padding-top: 8px; }
.rate-item.rate-discounted::before {
	content: var(--lbl-offer);
	text-transform: uppercase;
	position: absolute;
	top: -1px;
	right: -1px;
	background-color: var(--gold-tint-text);
	color: var(--gold-tint-bg);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-md) 0 var(--radius-md);
}
.room-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}
.room-info > span:nth-child(2n) { display: none; }
.room-info > span:nth-child(odd) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.room-info .room-detail-icon { color: var(--slate-tint-text) !important; font-size: 12px !important; }
.room-info .fa-shower::after {
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-style: normal;
	content: " " var(--lbl-bathroom);
}
.room_bed_div br { display: none; }
.room_bed_div {
	padding-bottom: 5px;
	color: var(--gray-700);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.room_bed_div span { display: inline-block; margin-bottom: 0; }
.room_bed_div span:not(:last-child)::after {
	content: "•";
	color: var(--gray-400);
	margin-left: 8px;
	font-weight: 700;
}
.search-result-item.last-available-item { position: relative; }
.search-result-item.last-available-item::before {
	content: var(--lbl-last-room);
	text-transform: uppercase;
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 2;
	background-color: var(--red-600);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-sm) 0 var(--radius-md);
	animation: rc-urgency-pulse 2.4s ease-in-out infinite;
}
.last-available-item .room-available {
	/* the last room has the "last available" ribbon: the box stays hidden (!important beats the inline display set by hotel.js toggleRoomAvailable) */ display: none !important;
}
h4.room-available {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 8px 0 0 0;
	background-color: var(--gold-tint-bg);
	border: 1px solid var(--gold-tint-border);
	color: var(--gold-tint-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
h4.room-available::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	font-size: 10px;
}
.cancellation_text::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f058" !important;
	margin-right: 6px;
}
.cancellation_text-nr::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 6px;
}
#detailModal-body .room-stat-sep { display: none; }
#detailModal-body .room-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	margin-right: 4px;
}
#detailModal-body .col-md-5 .room-detail-icon { font-size: 12px !important; }
.hotel_address {
	background-color: rgba(255,255,255,.68);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	margin-bottom: 12px;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}
div.property-title {
	border: none;
	color: var(--white-color);
	padding: 9px 16px 8px;
	background: linear-gradient(135deg, var(--template-main-color), var(--template-main-color-hover));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
div.property-info {
	padding: 10px 16px 12px;
	background-color: rgba(255,255,255,.72);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
}
#offer_div {
	background-color: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-top: 10px;
	padding: 0;
}
#offer_div .offertitle {
	background-color: var(--gold-tint-bg);
	cursor: pointer;
	padding: 14px 16px;
	margin: 0;
}
#offer_div .offertitle::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f06b";
	color: var(--gold-tint-text);
	margin-right: 8px;
	font-size: 13px;
}
#offer_div .offertitle .room-title {
	color: var(--gold-tint-text);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
#offerDescriptions { padding: 12px 16px 16px; }
.offer-box { display: flex; align-items: center; }
.offer-box .search-titles { font-size: 15px; font-weight: 700; color: var(--black-color); }
.offer-box .room-hr { display: none; }
.offer-box .activateOffer { width: 100%; }
table.property-address td:first-child { text-align: center; width: 26px; padding-right: 8px; }
table.property-address td:first-child i.blu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background-color: var(--slate-tint-bg);
	color: var(--template-main-color) !important;
	border-radius: 50%;
	font-size: 11px;
	font-weight: normal !important;
}
table.property-address td {
	padding: 4px 8px 4px 0;
	vertical-align: top;
	color: var(--gray-700);
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12.5px;
}
.property-address .map-open { cursor: pointer; transition: color .15s var(--ease); }
.property-address .map-open:hover { color: var(--template-main-color); text-decoration: underline; }
/* inline contacts as in the reference site: 1st row address | phone | email | whatsapp, 2nd row website | tax details | licenses.
   The two groups are the .contact-main and .contact-extra tbodies printed by Java (the old template keeps the table).
   Only in the blocks outside the search column (property-address-inline class from Java): on the left the vertical list remains */
table.property-address-inline { display: block; width: 100%; }
table.property-address-inline > tbody { display: flex; flex-wrap: wrap; align-items: center; }
table.property-address-inline > tbody + tbody { margin-top: 2px; }
table.property-address-inline > tbody > tr { display: inline-flex; align-items: center; }
table.property-address-inline > tbody > tr + tr::before { content: "|"; color: var(--gray-400); margin: 0 10px; }
table.property-address-inline > tbody > tr > td { display: inline-flex; align-items: center; width: auto; padding: 2px 0; vertical-align: middle; }
table.property-address-inline > tbody > tr > td:first-child { width: auto; padding-right: 6px; }
table.property-address-inline > tbody > tr > td:first-child label { margin: 0; font-weight: 700; }
/* address on one row: street - zip, city (country) */
table.property-address-inline .map-open br { display: none; }
table.property-address-inline .addr-street + br + .addr-city::before { content: ", "; }
/* on mobile the contacts go back to a vertical list: one item per row, no separators, address on two rows */
@media only screen and (max-width: 767px) {
	table.property-address-inline > tbody { display: block; }
	table.property-address-inline > tbody > tr { display: flex; }
	table.property-address-inline > tbody > tr + tr::before { content: none; }
	table.property-address-inline .map-open br { display: inline; }
	table.property-address-inline .addr-street + br + .addr-city::before { content: none; }
}
.stars-color { text-shadow: 0 1px 2px rgba(0,0,0,.2); }
div.property-title div {
	width: fit-content;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	margin-top: 2px;
}
.best-offer {
	position: static;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
}
#comparator-div::before {
	content: var(--lbl-best-price);
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 2;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: var(--radius-sm) 0 var(--radius-md) 0;
}
.portal-offer { position: relative; }
.portal-offer::before {
	content: "VS";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border: 1px solid var(--gray-300);
	color: var(--gray-500);
	font-size: 10px;
	font-weight: 700;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.title-font label, .portal-desc {
	display: inline;
	font-size: 11px;
	margin-bottom: 0;
	margin-right: 8px;
}
.site-amount { font-size: 18px; }
.site-currency { font-size: 12px; }
.portal-amount { font-size: 14px; }
.portal-currency { font-size: 11px; }
.site-offer, .portal-offer { padding: 4px 16px !important; }
#comparator > .clearfix { padding: 30px 16px 10px; }
.site-price::before {
	font-size: 12px;
	margin-right: 4px;
	content: "\f058" !important;
	color: var(--green-600) !important;
}
.portal-amount, .portal-currency { text-decoration: none !important; }
.tratment-div > div {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--slate-tint-bg);
	padding: 3px 10px;
	border-radius: var(--radius-sm);
}
.treatment-icon { color: var(--slate-tint-text) !important; font-size: 12px !important; }
.treatment_desc {
	display: inline;
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--slate-tint-text);
}



/* ==========================================================================
   8. SUPPLEMENTS
   ========================================================================== */

.btn-add-sup:focus:not(:focus-visible) { outline: none; }
.div-supp-item-title {
	text-align: left;
	padding: 0px 0px 10px 0px !important;
	color: var(--black-color);
	font-weight: 700;
	font-size: 15px;
	border-bottom: 1px solid var(--light-grey-color);
	margin-bottom: 10px;
}
.supp-block-item-desc {
	font-size: 11px;
	margin-bottom: 0px;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	border-radius: var(--radius-sm);
	padding: 5px 7px;
	line-height: 1.4;
}
.supp-block-total-desc { font-size: 13px; font-weight: 500; color: var(--gray-600); }
.div-supp-room-title {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0;
	margin-left: 0px;
	margin-right: 0px;
	color: var(--black-color);
	background-color: #fff;
	padding: 5px;
	display: flex;
	align-items: center;
}
.div-supp-room-title-container {
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 1px solid var(--light-grey-color);
	margin-bottom: 5px;
}
.supp-room-title { font-size: 18px; font-weight: 700; color: var(--black-color); }
.room-number-supp {
	font-size: 12px;
	background: none;
	color: var(--white-color);
	border-radius: var(--radius-sm);
	font-weight: 700;
}
/* DISABLED 01/10 - 574 grid instead of the Bootstrap columns (replaced by the flex below)
.supp-block-col {
	padding-left: 0;
	padding-right: 0;
	max-width: none !important;
	width: auto !important;
	float: none !important;
}
.supplements-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	padding-left: 10px;
	padding-right: 10px;
}
*/
/* supplement card: widths from the Bootstrap classes in options.jsp (col-lg-6 col-md-12 col-sm-12 col-xs-12),
   the flex makes cards in the same row equally tall; spacing like the 574 grid (14px between cards, 10px at the edges) */
.supplements-container { display: flex; flex-wrap: wrap; padding-left: 3px; padding-right: 3px; }
.supp-block-col { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; }
.btn-add-sup { width: 100%; margin-top: 4px; }
.btn-add-sup:focus-visible { outline: 2px solid var(--template-main-color) !important; outline-offset: 2px; }
.supp-block:hover {
	background-color: #fff !important;
	border-left: 1px solid var(--light-grey-color) !important;
	border-top: 1px solid var(--light-grey-color) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.supp-item-col-img {
	border-right: 0px solid #33749b30;
	min-height: auto !important;
	height: auto !important;
	padding: 0px 10px 10px 0px !important;
	flex: 0 0 42% !important;
	max-width: 42% !important;
}
.supp-item-col {
	min-height: auto !important;
	height: auto !important;
	padding: 0px 0px 10px 10px !important;
	flex: 0 0 58% !important;
	max-width: 58% !important;
}
.div-supp-adult-quantity {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: 80px;
	vertical-align: middle;
	background: transparent;
	padding: 5px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
}
.div-supp-adult-quantity .box-btn { width: 24px; height: 24px; }
.supp-item-col-img img.img-thumbnail {
	max-height: none;
	height: 115px;
	width: 100%;
	object-fit: cover;
	padding: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.supp-block {
	background-color: #fff;
	margin-bottom: 10px;
	min-height: 0;
	height: 100% !important;
	box-sizing: border-box;
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	animation: rc-card-in .5s cubic-bezier(.22,1,.36,1) both;
	position: relative;
}
.supp-block.supp-added { border-color: var(--green-300); }
.supp-block.supp-added::before {
	content: var(--lbl-added);
	text-transform: uppercase;
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 2;
	background-color: var(--green-600);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-sm) 0 var(--radius-md);
}
.remove_supps, .remove_supps:focus { background-color: var(--red-color) !important; color: var(--white-color) !important; }
.remove_supps:hover { background-color: var(--red-600) !important; color: var(--white-color) !important; }
.room-number-supp-block {
	display: inline-flex;
	align-items: center;
	background-color: var(--slate-tint-bg) !important;
	color: var(--slate-tint-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 4px 10px !important;
	border-radius: var(--radius-pill) !important;
	margin-right: 8px;
}
.room-number-supp-block::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 5px;
	font-size: 12px;
}
.supp_occupancy {
	text-align: right;
	color: var(--template-main-color);
	font-weight: 600;
	font-size: 13px;
}
.supp_occupancy > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
}
.supp_occupancy .occupancy-icon { color: var(--slate-tint-text) !important; font-size: 13px !important; }



/* ==========================================================================
   9. GUEST DETAILS
   ========================================================================== */

#guest_notes { resize: vertical; min-height: 80px; }
.guest-info-element { }
.iti__selected-flag { border-radius: var(--radius-sm) 0 0 var(--radius-sm); transition: background-color .15s var(--ease); }
.iti__selected-flag:hover { background-color: var(--gray-200); }
.iti { position: relative; z-index: 5; }
.iti__dropdown-content { z-index: 60; position: absolute; }
.iti__country-list {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--light-grey-color);
	background-color: var(--white-color);
	z-index: 60;
}
.iti__country.iti__highlight { background-color: rgba(var(--template-main-color-rgb), .14); }
.guest-info-element .form-group { margin-bottom: 14px; }
@media only screen and (min-width: 992px) {
	#guest-info-div { }
}
#accept_term_conditions_div { padding-top: 8px; }
#accept_term_conditions_div input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	cursor: pointer;
}
#accept_term_conditions_div #accept_term_conditions_close_modal { margin-top: 14px; }
#guest_detail_box_table > .row { margin-bottom: 4px; }
#guest_detail_box_table > .row:nth-child(2) { margin-bottom: 18px; }
#guest_detail_box_table > .row:nth-child(4) { margin-bottom: 18px; }
.info-span { color: var(--template-link-color); font-weight: 700; cursor: pointer; }
.info-span .readMore { color: inherit; margin-left: 4px; }
.info-span::after { content: " *"; color: var(--red-color); font-weight: 700; }
.info-span:hover { color: var(--template-link-color-hover); }
#privacy-info-div .form-group {
	background-color: var(--gray-100);
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	height: 100%;
	box-sizing: border-box;
}
#privacy-info-div input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	cursor: pointer;
}
#privacy-info-div small.help-block {
	color: var(--red-600);
	font-size: 12px;
	display: block;
	margin-top: 8px !important;
}
.book-block { background: transparent; margin-bottom: 0px; padding: 15px; }
.book-checkin-details {
	position: relative;
	padding: 10px 14px 10px 32px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-700);
	background-color: var(--slate-tint-bg);
	border-radius: var(--radius-md);
	display: inline-block;
}
.book-checkin-details::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--template-main-color);
	position: absolute;
	left: 12px;
	top: 12px;
	font-size: 14px;
}
.book-checkin-details strong { color: var(--black-color); margin-right: 4px; }
#guest_detail_box_table input[name="first_name"], #guest_detail_box_table input[name="last_name"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="email"], #guest_detail_box_table input[name="email_confirmation"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2'/%3E%3Cpath d='M4.5 7.5l7.5 6 7.5-6'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="clientAddress"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="city"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='9' height='18'/%3E%3Crect x='13' y='9' width='7' height='12'/%3E%3Cpath d='M7 7h2M7 11h2M7 15h2M16 13h1M16 17h1'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="zipcode"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l8-8h5a2 2 0 0 1 2 2v5l-8 8a2 2 0 0 1-2.8 0l-4.2-4.2a2 2 0 0 1 0-2.8z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.3'/%3E%3C/svg%3E");
}
#guest_detail_box_table > .row:nth-of-type(1), #guest_detail_box_table > .row:nth-of-type(3), #guest_detail_box_table > .row:nth-of-type(5) {
	position: relative;
	margin-top: 24px;
}
#guest_detail_box_table > .row:nth-of-type(1) { margin-top: 4px; }
#guest_detail_box_table > .row:nth-of-type(1)::before, #guest_detail_box_table > .row:nth-of-type(3)::before, #guest_detail_box_table > .row:nth-of-type(5)::before {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--black-color);
	padding: 0 15px 8px 15px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--light-grey-color);
}
#guest_detail_box_table > .row:nth-of-type(1)::before { content: var(--lbl-guest); }
#guest_detail_box_table > .row:nth-of-type(3)::before { content: var(--lbl-address); }
#guest_detail_box_table > .row:nth-of-type(5)::before { content: var(--lbl-stay); }
#guest_detail_box_table input.text.form-control::placeholder, #guest_detail_box_table textarea.text.form-control::placeholder {
	color: transparent;
}
#guest_detail_box_table input.text.form-control {
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	height: 50px;
	padding-top: 14px;
	padding-bottom: 14px;
	transition: padding .12s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
#guest_detail_box_table input.text.form-control:focus, #guest_detail_box_table input.text.form-control:not(:placeholder-shown) {
	padding-top: 22px;
	padding-bottom: 6px;
}
#guest_detail_box_table textarea.text.form-control {
	padding-left: 14px;
	background-image: none;
	transition: padding-top .12s var(--ease);
}
#guest_detail_box_table textarea.text.form-control:focus, #guest_detail_box_table textarea.text.form-control:not(:placeholder-shown) {
	padding-top: 26px;
}
#guest_detail_box_table .guest-info-element { position: relative; }
#guest_detail_box_table .float-label {
	display: block;
	position: absolute;
	left: 44px;
	top: 50%;
	transform: translateY(-50%);
	transform-origin: left center;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--gray-500);
	pointer-events: none;
	z-index: 3;
	max-width: calc(100% - 60px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: top .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);
}
#guest_detail_box_table input.text.form-control:focus + .float-label, #guest_detail_box_table input.text.form-control:not(:placeholder-shown) + .float-label {
	top: 9px;
	transform: translateY(0) scale(.79);
	color: var(--template-main-color);
}
#guest_detail_box_table textarea.text.form-control + .float-label {
	left: 29px;
	top: 24px;
	transform: none;
	max-width: calc(100% - 60px);
}
#guest_detail_box_table textarea.text.form-control:focus + .float-label, #guest_detail_box_table textarea.text.form-control:not(:placeholder-shown) + .float-label {
	top: 10px;
	transform: scale(.79);
	color: var(--template-main-color);
}
#guest_detail_box_table .input-group { position: relative !important; }



/* insurance not chosen yet (insurance_disable class on guest details and payment, JS disables the fields):
   greyed-out fields to show they cannot be used; the class goes away once a choice is made */
.insurance_disable .form-control:disabled,
.insurance_disable input:disabled,
.insurance_disable select:disabled,
.insurance_disable textarea:disabled {
	background-color: var(--gray-200);
	color: var(--gray-500);
	border-color: var(--gray-300);
	cursor: not-allowed;
}
.insurance_disable .float-label { color: var(--gray-500); }

/* ==========================================================================
   10. PAYMENT
   ========================================================================== */

.h-50 { height: 20px; margin-top: 5px; }
.radio_cls {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto !important;
	width: 18px;
	height: 18px;
}
@media only screen and (min-width: 992px) {
	#payments-info-div { }
}
.prepaid-titles {
	display: block;
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--black-color);
	text-align: left;
}
.prepaid-titles::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--template-main-color);
	position: absolute;
	left: 0;
	top: 1px;
}
/* amount and currency of "Pay now" (Java, prepayment row) also have the prepaid-titles class: no icon, inline */
#span_total_prepaid.prepaid-titles,
#span_total_prepaid + .prepaid-titles { display: inline; padding-left: 0; }
#span_total_prepaid.prepaid-titles::before,
#span_total_prepaid + .prepaid-titles::before { content: none; }
.main-pg-div {
	background-color: var(--white-color);
	border: 1px solid var(--light-grey-color);
	border-radius: var(--radius-md);
	padding: 6px 14px;
}
/* payment method radio: fixed-width column, vertically centered (on narrow cards the col-1 was narrower than the radio, which overflowed the border) */
.main-pg-div .h-50 { flex: 0 0 32px; width: 32px; max-width: none; height: auto; min-height: 22px; margin-top: 0; padding-top: 0 !important; position: relative; }
.main-pg-div .pg-container { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.pg_sel { background-color: transparent; border: 0px solid var(--gray-300); }
#main_div_pg_4 .payment-label { font-size: 15px !important; gap: 10px; }
#main_div_pg_4 .payment-label img { margin-left: 0 !important; height: 22px !important; width: auto !important; }
.pg-hr { margin: 10px 0px; border: 1px solid var(--light-grey-color); }
/* separator line of the selected payment method: hidden (!important because Java and JS set an inline display) */
.pg-hr-div { display: none !important; }
#cc_div .containerx {
	max-width: 300px !important;
	max-height: 198px !important;
	height: 43vw !important;
	padding: 16px !important;
}
#cc_div .creditcard { max-width: 300px !important; }
#cc_div .lightcolor.grey { fill: var(--template-main-color) !important; }
#cc_div .darkcolor.greydark { fill: var(--template-main-color-dark) !important; }
.pg_infos p {
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-700);
}
.pg_infos p::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--template-main-color);
	position: absolute;
	left: 0;
	top: 2px;
}
#submitReservation { font-size: 14px; padding: 14px 24px; }
#safebooking_accept { }
.containerx { margin-bottom: 20px; filter: drop-shadow(var(--shadow-lg)); transform: scale(1.08); }
#cc_div input.text.form-control {
	height: 50px;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	transition: padding .12s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
#cc_div input#cc_number.text.form-control { padding-left: 14px; background-image: none !important; }
#cc_div input#cc_holder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}
#cc_div input#expirationdate {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
#cc_div input#securitycode {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}
#cc_div input.text.form-control:focus, #cc_div input.text.form-control:not(:placeholder-shown) {
	padding-top: 22px;
	padding-bottom: 6px;
}
#cc_div input.text.form-control::placeholder { color: transparent; }
#cc_div .input-group { position: relative; }
#cc_div .float-label {
	display: block;
	position: absolute;
	left: 44px;
	top: 18px;
	transform-origin: left center;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--gray-500);
	pointer-events: none;
	z-index: 3;
	max-width: calc(100% - 60px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: top .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);
}
#cc_div #cc_number + .float-label { left: 14px; }
#cc_div input.text.form-control:focus + .float-label, #cc_div input.text.form-control:not(:placeholder-shown) + .float-label {
	top: 9px;
	transform: scale(.79);
	color: var(--template-main-color);
}
#privacy_security img { max-width: 180px; height: auto; }



/* ==========================================================================
   11. CONFIRMATION
   ========================================================================== */

.total-pad { }
#payment_div {
	max-width: 1024px;
	margin: 10px 0px;
	padding: 15px;
	background-color: var(--white-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
@media only screen and (min-width: 992px) {
	#msg-tab { }
	#directions-tab { }
	#map-tab { }
	.resume-product-tab { }
}
.confirm_msg strong, .confirm_msg b { color: var(--template-main-color); font-weight: bold; }
.msg-tab { }
#msg-tab {
	padding: 28px 20px 22px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#msg-tab::before {
	content: "";
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	display: block;
	font-size: 42px;
	line-height: 1;
	color: var(--green-500);
	margin-bottom: 10px;
}
.confirm_msg {
	color: var(--gray-700);
	font-weight: 400;
	padding: 10px;
	font-size: 16px;
	line-height: 1.7;
}
.confirm_msg strong { color: var(--black-color); }
.confirm_msg strong:nth-of-type(2) {
	display: inline-block;
	background-color: var(--template-main-color);
	color: #fff;
	font-family: "SF Mono", "Courier New", monospace;
	font-size: 15px;
	letter-spacing: .03em;
	padding: 3px 12px;
	border-radius: var(--radius-sm);
	margin: 6px 0 2px;
}
#res-tab .resume-dates-titles {
	display: block !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gray-500);
	margin-bottom: 2px;
}
#res-tab .resume_span_container {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
}
#res-tab #cal_nights, #res-tab #cal_rooms, #res-tab #cal_adults, #res-tab #cal_children { font-weight: 800; }
#res-tab .resume_span_container .fa-moon-o, #res-tab .resume_span_container .fa-home, #res-tab .resume_span_container .fa-male, #res-tab .resume_span_container .fa-child {
	color: inherit;
	font-size: 13px;
}
#map-tab {
	padding: 16px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}



/* ==========================================================================
   12. MODALS, COOKIES, MAP, LOADER
   ========================================================================== */

.hr_conversion {
	display: inline;
	font-size: 11px;
	font-weight: 400;
	color: var(--gray-500);
}
.hr_conversion::before { content: "("; }
.hr_conversion::after { content: ")"; }
#info_box_icon {
	background-color: var(--template-main-color);
	color: var(--gray-200);
	display: block;
	float: left;
	height: 55px;
	width: 55px;
	text-align: center;
	font-size: 35px;
	border-radius: var(--radius-pill);
	padding: 0px;
	font-family: serif;
	font-style: italic;
	font-weight: 700;
	border: 1px solid var(--template-main-color-hover);
}
.modal-close-span { color: var(--template-main-color); }
.modal-close-span:hover { color: var(--template-main-color-hover); }
/* "back to the website" link at the bottom of the page */
#home_page a { color: var(--template-link-color); }
#home_page a:hover { color: var(--template-link-color-hover); }
#detailModal-header { position: relative; padding: 16px 44px 16px 20px; border-bottom: 1px solid var(--light-grey-color); }
#detailModal_title {
	font-size: 20px;
	font-weight: 700;
	color: var(--black-color);
	text-transform: uppercase;
	margin: 0;
}
#open_privacy_modal { color: var(--template-main-color); }
#open_privacy_modal:hover { cursor: pointer; color: var(--template-main-color-hover); text-decoration: underline; }
.safebooking_amount { color: var(--template-main-color); }
.modal-title {
	color: var(--template-main-color);
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.modal-header { position: relative; padding: 18px 44px 16px 24px; border-bottom: 1px solid var(--light-grey-color); }
.modal-header .close {
	position: absolute;
	top: 14px;
	right: 20px;
	font-size: 24px;
	font-weight: 400;
	color: var(--gray-500);
	opacity: 1;
	background: none;
	border: none;
	transition: color .15s var(--ease);
}
.modal-header .close:hover { color: var(--template-main-color); }
.modal-body {
	padding: 24px 28px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--gray-800);
	max-height: 72vh;
	overflow-y: auto;
}
.modal-body h4 {
	color: var(--template-main-color);
	font-size: 16px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 14px;
	line-height: 1.4;
}
.modal-body strong {
	color: var(--black-color);
	display: inline-block;
	margin-top: 18px;
	margin-bottom: 6px;
	font-size: 14.5px;
}
.modal-body label {
	color: var(--black-color);
	display: block;
	margin-top: 18px;
	margin-bottom: 4px;
	font-size: 14.5px;
	font-weight: 700;
}
.modal-body > div > span { display: block; margin-bottom: 8px; }
.modal-body p { margin-bottom: 12px; }
.modal-body ul { margin-bottom: 12px; padding-left: 22px; }
.modal-body li { margin-bottom: 6px; line-height: 1.6; }
.modal-body ul ul { margin-top: 8px; margin-bottom: 0; }
.modal-body li::marker { color: var(--template-main-color); }
#spinner {
	width: 100%;
	height: 100%;
	background: #ffffffb0;
	position: fixed;
	z-index: 10000;
}
#spinner>div {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#cookies_modal {
	display: none;
	width: auto; /* BE.css sets 100vw/100vh: here the box is anchored to the edges */
	height: auto;
	background-color: #2228;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* covers the visible part of the screen (100vh on iOS goes under the bars) */
	z-index: 30;
}
#cookies_content {
	display: block;
	height: fit-content;
	position: absolute;
	top: 0;
	bottom: 0;
	max-width: 600px;
	max-height: calc(100% - 32px);
	overflow-y: auto; /* long text or landscape phone: scrolls inside, the buttons stay reachable */
	left: 16px;
	right: 16px;
	margin: auto;
	z-index: 31;
	background-color: var(--white-color);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	padding: 20px;
}
#cookieAcceptButton {
	border-radius: var(--radius-md);
	color: var(--white-color);
	background-color: var(--template-main-color);
	margin: 10px;
	transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
#cookieAcceptButton:hover { background-color: var(--template-main-color-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.map { display: none; height: 500px; border-radius: var(--radius-md); }
.loader {
	border: 10px solid var(--gray-300);
	/* Light grey */ border-top: 10px solid var(--template-main-color);
	/* Blue */ border-radius: 50%;
	width: 80px;
	height: 80px;
	animation: spin 1.5s linear infinite;
}
#map {
	height: 500px;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}



/* ==========================================================================
   13. ANIMATIONS (KEYFRAMES)
   ========================================================================== */

@keyframes pulsex {
	0%   { transform: scale(1); }
	84%  { transform: scale(1); }
	88%  { transform: scale(1.05); }
	92%  { transform: scale(1); }
	96%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}
@keyframes bounce-2 {
	0%   { transform: translateX(0); }
	84%   { transform: translateX(0); }
	88%  { transform: translateX(3px); }
	92% { transform: translateX(0); }
	96%  { transform: translateX(3px); }
	100% { transform: translateX(0); }
}
@keyframes shine1 {
	0%   { left: -20px; top: 0px; }
	100% { left: 50px; top: 0px; }
}
@keyframes loading {
	from {left: -200px; width: 30%;}
	50% {width: 30%;}
	70% {width: 70%;}
	80% { left: 50%;}
	95% {left: 120%;}
	to {left: 100%;}
}
/* spinning icon in the "Loading..." modal (hotel.jsp) */
.modal-body .fa-spin { color: var(--template-main-color); }
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes rc-card-in {
	from { opacity: 0; transform: translateY(22px) scale(.98); }
	70%  { opacity: 1; }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rc-cart-in {
	from { opacity: 0; transform: translateY(28px) scale(.96); }
	60%  { transform: translateY(-3px) scale(1.01); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rc-date-pulse {
	0%   { transform: scale(.82); }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}
@keyframes rc-urgency-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}