:root {
  --white-100-value: 255, 255, 255;
  --white-100: rgb(var(--white-100-value));

  --black-0: #000000;
  --black-15: #151515;
  --black-33: #333333;
  --error: #ff0000;

  --white-opa-85: rgba(255, 255, 255, 0.85);

  --grey-super-light: #f6f6f6;
  --grey-light: #d3d3d3;
  --grey-mid-light: #8f8f8f;
  --grey-medium: #696969;
  --grey-dark: #444;
  --grey-super-dark: #222;
  --grey-icon: #6b6b6b;

  --primary-black: var(--black-33);
  --primary-white: #d2d2d2;

  --primary-color: #e31f21;
  --primary-hover-color: color-mix(in srgb, var(--primary-color) 80%, black);
  --primary-light-color: color-mix(in srgb, var(--primary-color) 30%, white);
  --primary-action-color: var(--primary-color);
  --primary-accent: #0052a3;
  --secondary-accent: #4da1f0;

  --hover-price-matrix: #d4ecff;

  --price-highlight: #ac4d16;
  --price-free-cancel: #1e8515;
  --provider-highlight: #d87700;

  --status-in-progress: #ffa500;
  --status-reserved: #1fa713;
}
/* 
 * ASSIGNMENTS 
 */
:root {
  --txt-breadcrumb: var(--grey-medium);
  --txt-breadcrumb-hover: var(--primary-hover-color);
  --txt-button: var(--white-100);
  --txt-color: var(--primary-black);
  --txt-footer: var(--txt-color);
  --txt-footer-landingpage: var(--txt-color);
  --txt-landingpage: var(--txt-color);
  --txt-link-color: var(--primary-accent);
  --txt-link-hover: var(--secondary-accent);
  --txt-pagination: var(--txt-color);
  --txt-pagination-active: var(--white-100);
  --txt-pagination-hover: var(--black-0);
  --txt-placeholder: #737373;
  --txt-review-bubble: var(--white-100);
  --txt-search-result-amount: var(--txt-color);
  --txt-tablist-navigation: var(--txt-color);
  --txt-tablist-navigation-active: var(--txt-color);
  --txt-tablist-navigation-hover: var(--txt-color);

  --border-default-color: var(--grey-light);
  --border-matrix-color: #bdbdbd;
  --border-separator-color: #e4e4e4;
  --border-search-bar-color: var(--black-15);

  --bg-page: #f4f4f4;

  --bg-landing-page-value: var(--white-100-value);
  --bg-landing-page: rgb(var(--bg-landing-page-value));

  --bg-navbar: var(--grey-dark);
  --bg-nav-off-canvas: linear-gradient(
    100deg,
    #818181b8 0%,
    var(--bg-landing-page) 100%
  );
  --bg-component: var(--white-100);

  --bg-banner-header: var(--grey-light);
  --bg-breadcrumb: var(--bg-page);
  --bg-button: var(--primary-color);
  --bg-button-hover: var(--primary-hover-color);
  --bg-button-close: var(--primary-action-color);
  --bg-button-extend: var(--primary-accent);
  --bg-button-filter-menu: var(--primary-color);
  --bg-button-filter-searchbar: var(--black-33);
  --bg-button-searchbar: var(--primary-color);
  --bg-button-searchbar-hover: var(--primary-hover-color);

  --bg-date-in-range: var(--primary-light-color);
  --bg-footer: var(--bg-page);
  --bg-hotel-add-detail: var(--grey-super-light);
  --bg-hotel-matrix: var(--grey-super-light);
  --bg-icon-active: var(--txt-color);
  --bg-icon-inactive: var(--grey-mid-light);
  --bg-info-box: var(--bg-component);
  --bg-pagination: var(--bg-page);
  --bg-pagination-active: var(--primary-color);
  --bg-pagination-hover: var(--grey-mid-light);
  --bg-review-bubbles: var(--primary-color);
  --bg-scrollbar: var(--primary-color);
  --bg-selector: var(--grey-medium);
  --bg-slider: var(--grey-light);
  --bg-slider-handle: var(--grey-mid-light);
  --bg-stars: var(--primary-color);
  --bg-switch: var(--grey-light);
  --bg-tablist: var(--grey-light);
  --bg-tablist-navigation: var(--bg-tablist);
  --bg-tablist-navigation-active: var(--bg-component);
  --bg-tablist-navigation-hover: var(--bg-component);
  --bg-travel-box-header: var(--grey-light);
  --bg-travel-box: var(--grey-super-light);
}

/* 
 * DARK MODE COLORS 
 */

[data-theme="dark"] {
  --error: #ff3b0f;

  --txt-breadcrumb: var(--grey-light);
  --txt-color: var(--primary-white);
  --txt-placeholder: #ababab;

  --primary-accent: var(--secondary-accent);
  --primary-action-color: #ff3b0f;

  --border-default-color: var(--grey-dark);
  --border-separator-color: #373636;

  --bg-page-value: 48, 49, 52;
  --bg-page: rgb(var(--bg-page-value));
  --bg-landing-page-value: var(--bg-page-value);

  --bg-nav-off-canvas: linear-gradient(
    100deg,
    #494949b8 0%,
    var(--bg-landing-page) 100%
  );

  --bg-landing-page: rgb(var(--bg-landing-page-value));
  --bg-banner-header: var(--black-15);
  --bg-button-extend: var(--secondary-accent);
  --bg-button-filter-searchbar: var(--black-15);
  --bg-component: #202124;
  --bg-hotel-add-detail: var(--grey-dark);
  --bg-hotel-matrix: var(--grey-dark);
  --bg-icon-inactive: var(--grey-icon);
  --bg-navbar: var(--black-15);
  --bg-selector: var(--grey-dark);
  --bg-slider: var(--grey-dark);
  --bg-tablist: var(--grey-dark);
  --bg-travel-box-header: var(--primary-black);
  --bg-travel-box: var(--grey-super-dark);

  --price-free-cancel: #1fa713;
  --provider-highlight: #ffa500;
  --price-highlight: var(--provider-highlight);

  --status-in-progress: #ffe600;
  --status-reserved: #00d600;
}

/* 
 * CUSTOM COLORS 
 */

@media (forced-colors: active) {
  :root {
    --txt-color: CanvasText;
    --bg-component: Canvas;
  }
}

/*  
 * HIGH CONTRAST 
 */

@media (prefers-contrast: more) {
  :root {
    --primary-white: var(--white-100);
    --primary-black: var(--black-0);

    --border-default-color: var(--primary-black);

    --bg-icon-active: green;
    --bg-icon-inactive: orangered;
  }

  [data-theme="dark"] {
    --bg-banner-header: var(--black-0);
    --bg-component: #151515;
    --bg-navbar: var(--black-0);
    --bg-travel-box-header: var(--black-0);

    --border-default-color: var(--primary-white);

    --bg-icon-active: rgb(0, 192, 0);
    --bg-icon-inactive: rgb(255, 174, 0);
  }
}
/*
  jQuery datepicker overrides 
*/

#ui-datepicker-div {
  width: 1045.2px !important;
  padding: 1rem 0.5rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-component);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ui-datepicker-group {
  width: auto !important;
  padding: 0.5rem;
  border-right: var(--border-separator);
}

.ui-datepicker-group-last {
  border: none;
}

#ui-datepicker-div td {
  border: none;
}

.ui-datepicker-header {
  border: none;
  background: none;
  color: var(--txt-color);
}

.ui-datepicker-group-first .ui-datepicker-month {
  padding: 0.25rem;
  font-family: "Roboto", sans-serif !important;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.ui-datepicker-next,
.ui-datepicker-prev {
  width: 1.625rem;
  height: 1.625rem;
  color: var(--txt-color);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover {
  top: 0;
  right: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover {
  top: 0;
  left: 0;
}

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
  background: none;
  border-color: transparent;
}

.ui-datepicker-next:not(.ui-state-disabled):hover,
.ui-datepicker-prev:not(.ui-state-disabled):hover {
  transform: scale(1.25);
}

.ui-datepicker-next:not(.ui-state-disabled):hover::after,
.ui-datepicker-prev:not(.ui-state-disabled):hover::after {
  color: var(--primary-color);
  background-color: transparent;
}

.ui-datepicker-next::after {
  margin-left: 0.5rem;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
}

.ui-datepicker-prev::after {
  margin-left: 0.5rem;
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
}

.ui-datepicker-next span,
.ui-datepicker-prev span {
  display: none !important;
}

.ui-datepicker-calendar thead:first-of-type {
  filter: opacity(0.7);
}

.ui-datepicker-calendar thead:first-of-type span {
  font-weight: 400 !important;
}

#ui-datepicker-div .ui-state-default {
  padding: 0.6rem 0.75rem;
  color: var(--txt-color);
  background: var(--bg-component);
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--bg-component);
}

#ui-datepicker-div td:hover .ui-state-default {
  border-color: var(--txt-color);
}

#ui-datepicker-div .ui-state-active {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin),
    url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Thin.woff") format("woff");
  font-weight: 100;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Light),
    url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Light.woff") format("woff");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular),
    url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Medium),
    url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Bold),
    url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
    url("../fonts/roboto/Roboto-Bold.woff") format("woff");
  font-weight: 700;
}
/* Remove default focus, will be re-defined below*/
:focus {
  outline: none;
  box-shadow: none;
}

/* Keyvoard navigation focus for clickable controls */
a[href]:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary-accent) !important;
  outline-offset: 1px;
}

/* No double focus on clickable controls */
a[href]:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* Always visible focus for forms */
input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
  outline: 2px solid var(--primary-accent);
  outline-offset: 1px;
}

/* Browser overrides */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 1px;
}

/* 
SEARCH MENU
*/

/* Add focus style for custom range slider controls */
.ui-slider-handle:focus-visible {
  outline: 3px solid var(--primary-accent);
  outline-offset: 2px;
}

/* Adjust focus style for search filter links */
.filter-link-with-checkbox {
  outline-offset: 2px;
}

/* 
SEARCH RESULT - DETAILED VIEW
*/

button.slick-arrow:focus-visible {
  outline-width: 5px !important;
  outline-offset: -4px;
}

/* Add background color to image slide buttons to make focus visible over images */
button.slick-arrow:focus-visible::before,
button.slick-arrow:focus-visible::after {
  background-color: var(--primary-accent);
  outline: 3px solid var(--primary-accent);
}

/* Add focus style for draggable image slider */
.slick-slide.slick-current.slick-active:focus-visible img {
  outline: 4px solid var(--primary-accent);
  outline-offset: -4px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
}

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  border: var(--border-default);
  border-radius: 50% !important;
  display: inline-block;
  position: relative;
}

input[type="radio"]:checked {
  border-width: 2px;
  border-color: var(--primary-color);
}

input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50% !important;
}

/* 
	Opacity:
	may be enough:
	filter: alpha(opacity=50);
	opacity: 0.5;
*/
.opacity50 {
  filter: alpha(opacity = 50);
  opacity: 0.5;
}

.text-danger {
  color: #d9534f;
}

td.number {
  text-align: right;
}

a {
  color: var(--txt-link-color);
  text-decoration: none;
}

a.external-link:link,
a.external-link:visited {
  color: inherit;
  text-decoration: none;
}

a.external-link:hover,
a.external-link:active {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pseudoLink:hover,
.pseudoLink:active {
  cursor: pointer;
  filter: brightness(1.5);
}

a img {
  border: none;
}

a.action,
span.action {
  position: relative;
  margin-left: 0.25rem;
}

.search-alternative-hint-box {
  padding-left: 0.75rem;
}

a.action:before,
span.action:before {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary-color);
}

table {
  padding: 0;
  border-spacing: 0;
  border: 0;
}

table th,
table td {
  border: 0;
}

input[type="radio"] {
  accent-color: var(--primary-color);
}

textarea {
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
  filter: brightness(0.97);
}

[data-theme="dark"] textarea {
  filter: brightness(1.2);
}

/* Klassen ********************************************************************************/
.fieldMissing,
.fieldInvalid,
input[type="text"].fieldMissing,
input[type="password"].fieldMissing,
select.fieldMissing,
textarea.fieldMissing,
input[type="text"].fieldInvalid,
input[type="password"].fieldInvalid,
select.fieldInvalid,
textarea.fieldInvalid {
  border: 1px solid var(--primary-accent);
}

.fieldLabelError {
  color: var(--error);
}

.hide {
  display: none;
}

hr.noValue {
  width: 20px;
  margin: 0;
}

/* No line breaks ----------------------------------------------*/
.nowrap {
  white-space: nowrap;
}

.clear {
  clear: both;
  line-height: 0;
  font-size: 0;
}

/* Info Tool Tip ----------------------------------------------*/
.infoToolTip {
  font-size: 11px;
  padding: 5px 8px;
  text-align: left;
}

/* 
  Checkboxes 
*/

input[type="checkbox"]:checked {
  accent-color: var(--primary-color);
}

/* 
	Price Icons
*/
.bestPrice {
  font-size: 10px;
  font-weight: bold;
  padding: 0px 2px;
  color: var(--primary-accent);
  background: var(--secondary-accent);
  border: 1px solid var(--primary-accent);
}

.bestPriceGreen {
  font-size: 10px;
  font-weight: bold;
  padding: 0px 2px;
  color: var(--price-free-cancel);
  background: #eeffdd;
  border: 1px solid var(--price-free-cancel);
}

.priceAdvantage {
  font-size: 10px;
  font-weight: bold;
  padding: 0px 2px;
  background: #b5d5ff;
  border: 1px solid #1575af;
}

.specialRate {
  font-size: 10px;
  font-weight: bold;
  padding: 0px 3px;
  color: var(--error);
  background: #ffafaf;
  border: 1px solid red;
}

/*
	Sidebar Box
*/
.box {
  margin-bottom: 15px;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
}

.box .box-header {
  padding: 0.5rem 1rem;
  background-color: var(--bg-banner-header);
  border-top-left-radius: var(--border-radius-component);
  border-top-right-radius: var(--border-radius-component);
}

.box p {
  padding: 4px 8px 4px 8px;
}

/*
	Privacy Box
*/
.privacy-seal-box {
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}

.privacy-pci {
  display: block;
}

/*
	Tab-Navigation
*/
ul.tabbed {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

ul.tabbed li {
  list-style: none;
}

/* 
	Reiternavigation
*/
#contentTabs li span,
#contentTabs li a {
  display: block;
  padding: 3px 30px 4px 10px;
  background: #bbb;
  color: inherit;
  border-right: 1px solid #999;
  text-transform: uppercase;
}

#contentTabs li a:hover {
  color: #e31f21;
}

#contentTabs li.active span,
#contentTabs li.active a {
  background: white;
}

/* 
	MyEhotel-Box
*/
#myEhotel .box-header {
  color: #958570;
}

/* 
	Service-Center-Box
*/
#serviceCenter {
  font-size: 11px;
  border: 1px solid #958570;
}

.service-center-callback-icon {
  width: 16px;
  height: 16px;
  float: left;
  background-position: 0 -255px;
}

.service-center-chat-icon {
  width: 16px;
  height: 16px;
  float: left;
  background-position: -40px -255px;
}

.service-center-skype-icon {
  width: 16px;
  height: 16px;
  float: left;
  background-position: -20px -255px;
}

.service-center-mail-icon {
  width: 130px;
  height: 12px;
  display: block;
  background-position: 0 -275px;
}

.service-center-channels-container {
  float: right;
  margin: 10px;
  padding: 10px;
  width: 300px;
}

.service-center-chat-box #scQ1TM {
  float: left;
}

.service-center-chat-link-text {
  padding-top: 5px;
}

/* "D" und "INT" haben eine andere Farbe*/
#serviceCenter span {
  color: #aa9b84;
  font-weight: bold;
}

/* das Formular der linken Spalte*/ /* die Hotline-Nummer*/
#oldhotline {
  font-size: 11px;
  color: #6e5a41;
  position: absolute;
  right: 0px;
  top: -23px;
}

#hotline span {
  color: #aa9b84;
}

#hotline {
  font-size: 11px;
  color: #6e5a41;
  margin: 0;
  padding: 0;
  right: 0;
  text-align: right;
  position: absolute;
  top: 16px;
}

.errorMessagesStyle,
.errorMessagesStyle .block {
  position: relative;
  color: var(--error) !important;
  font-size: 1rem;
  font-weight: 500;
  padding: 0 0 0.25rem 0;
}

#HasErrors::after,
.errorMessagesStyle .block::after {
  position: absolute;
  left: -2.5rem;
  top: 0rem;
  display: block;
  width: 24px;
  height: 24px;
  font-family: "Font Awesome 5 Free";
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--error);
  background-color: var(--white-100);
  border-radius: 50%;
  outline: 2px solid var(--error);
  outline-offset: -1px;
  content: "\f06a";
}

.redBorder {
  border: 2px solid var(--error);
}

.noscript {
  color: var(--error);
  padding: 5%;
  font-size: 120%;
  font-weight: bold;
}

/* damit die Punkte der Liste rot sind...*/
#redListDot li span {
  color: #5a4a35;
}

#redListDot li {
  color: var(--error);
  padding-bottom: 4px;
}

/* Boxen */
#MapSmall .displayMapLinkBox {
  padding: 3px;
}

#MapSmall .displayMapLinkBox a {
  display: block;
  line-height: 0;
}

#MapSmall .displayMapLinkBox img {
  border-radius: calc(var(--border-radius-component) * 0.75);
}

#mapoverview {
  float: right;
  width: 750px;
  height: 450px;
  background-color: var(--grey-light);
  margin: 5px auto;
  padding-left: 5px;
  display: none;
}

#mapoverview #maparea {
  float: left;
  width: 738px;
  height: 450px;
}

#mapoverview #maparea .wraptocenter {
  display: block;
  text-align: center;
}

#mapoverview #maparea .wraptocenter * {
  vertical-align: middle;
}

#mapoverview #maparea .wraptocenter span {
  display: inline-block;
  height: 100%;
  width: 1px;
}

#maparea {
  width: 738px;
  height: 365px;
  clear: both;
}

/* Markierungen */
.rateChangeMark {
  color: var(--error);
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
}

/* Input Required */
.required {
  color: var(--primary-accent);
}

/*
	ToolTip
*/
.toolTipEnabled {
  cursor: pointer;
}

.toolTip {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
}

.toolTipBox {
  display: block;
}

.toolTipHeader {
  border-bottom: 1px dotted #958570;
  font-size: 14px;
  margin-bottom: 3px;
}

/*
	ToolTip: Hotel Price Details
*/
.hotelPriceDetails {
  width: 300px;
  background: #fff;
  font-size: 12px;
  font-weight: normal;
}

.hotelPriceDetails .ratePriceBox {
  font-weight: bold;
}

.hotelPriceDetails .ratePrice {
  float: right;
}

.hotelPriceDetails .tax {
  font-size: 11px;
}

.hotelPriceDetails .totalRatePrice {
  font-size: 11px;
  font-weight: bold;
}

/*
	ToolTip: Average Price Details
*/
.average-price-details-tooltip {
  width: 350px;
  background: #fff;
  font-size: 12px;
  font-weight: normal;
}

/*
	ToolTip: RoomRate Price Details
*/
.room-rate-price-details-tooltip {
  width: 450px;
  background-color: var(--bg-component);
  font-size: 0.875rem;
  font-weight: normal;
}

.room-rate-price-details-list {
  width: 100%;
  text-align: left;
  white-space: normal;
  border-collapse: collapse;
}

.room-rate-price-details-list th,
.room-rate-price-details-list td {
  padding: 3px 6px !important;
  height: auto !important;
  background: transparent !important;
}

.room-rate-price-details-list .sub-header {
  font-size: 90%;
  font-weight: normal;
  text-align: right;
}

.room-rate-price-details-list th,
.room-rate-price-details-list td {
  border: var(--border-default);
  vertical-align: middle;
}

.room-rate-price-details-list .currency {
  text-align: right;
}

.room-rate-price-details-list .original-currency {
  font-size: 90%;
}

.room-rate-price-details-list-row-average td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.room-rate-price-details-list-row-total td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/*
	Breadcrumb Navigation
*/
.breadcrumb-box {
  padding: 5px 10px;
}

.breadcrumb-item {
  float: left;
}

.breadcrumb-item-separator {
  margin: 0 5px;
}

.breadcrumb-box a {
  color: #5a4a35;
  text-decoration: underline;
}

.breadcrumb-box a:hover,
.breadcrumb-box a:active {
  color: #bb0f0f;
}

/*
	Social Network Buttons
*/
.social-network-button-box {
  border: 0;
  margin: 0;
  padding: 0;
  height: 25px;
  overflow: hidden;
  padding-top: 7px;
  padding-bottom: 4px;
}

/*
	Hotel Awards
*/
.hotel-award {
  display: block;
  font-size: 0;
  line-height: 0;
}

.hotel-award-billing_direct-0-small,
.hotel-award-billing_direct-1-small,
.hotel-award-billing_direct-2-small {
  display: inline;
  width: 20px;
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

.hotel-award-billing_direct-0-small {
  color: var(--bg-component);
  -webkit-text-stroke: 1px var(--bg-icon-inactive);
}

.hotel-award-billing_direct-1-small,
.hotel-award-billing_direct-2-small {
  color: var(--bg-icon-active);
}

.hotel-award-billing_direct-0-small:before,
.hotel-award-billing_direct-1-small:before,
.hotel-award-billing_direct-2-small:before {
  content: "K";
}

/*
	Noted Hotel List
*/

#NotedHotelListBox .box-header {
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.noted-hotel-list-title {
  padding: 0.75rem 0;
  text-align: center;
  font-weight: 500;
  border-bottom: var(--border-separator);
}

.noted-hotel-list-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

.noted-hotel-list-box > div {
  display: grid;
  grid-template-columns: 100px 1fr 0.75rem;
  gap: 0.5rem;
  border-bottom: var(--border-separator);
}

.noted-hotel-list-box img {
  border-radius: var(--border-radius-button);
}

.noted-hotel-list-text-content {
  align-self: center;
}

.noted-hotel-list-text-content .currencyPrice {
  font-weight: 500;
  font-size: 1.125rem;
}

.noted-hotel-list-text-content > div:not(:last-of-type) {
  margin-bottom: 0.125rem;
}

.noted-hotel-list-box a.link-remove-item i::before {
  font-size: 1.25rem;
  color: var(--bg-button-close);
}

.noted-hotel-list-hotelinfo {
  grid-column: 1/-1;
  margin-bottom: 0.25rem;
}

.noted-hotel-list-hotelinfo a {
  color: var(--txt-color);
  font-weight: 500;
}

.noted-hotel-list-hotelinfo .star {
  width: fit-content;
  height: fit-content;
}

.noted-hotel-list-hotelinfo .star::before {
  transform: translateY(0);
}

.noted-hotel-list-box > a {
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
  color: var(--bg-button-close);
}

.noted-hotel-list-box > div:has(a.button.small) {
  display: flex;
  justify-content: right;
  border-bottom: none;
}

.noted-hotel-list-box > div a.button.small {
  font-size: 1rem;
}

/*
	Recently Viewed Hotel List
*/
.recently-viewed-hotel-list div[id*="For"] {
  display: flex;
  gap: 0.25rem;
}

.recently-viewed-hotel-list div[id*="For"]:first-of-type {
  margin-top: 0.25rem;
}

.recently-viewed-hotel-list div[id*="For"] {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--border-separator);
}

.recently-viewed-hotel-list-column-image {
  line-height: 0;
}

.recently-viewed-hotel-list-info {
  display: grid;
  grid-template-columns: 1fr 1rem;
  grid-template-rows: auto 1fr 1fr;
  gap: 0.25rem;
  width: 100%;
  max-height: 100px;
  padding-right: 0.25rem;
}

.recently-viewed-hotel-list-info h3 > a.link-hotel-info {
  font-size: 0.875rem;
  color: var(--txt-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recently-viewed-hotel-list-stars {
  grid-column: 1;
}

.recently-viewed-hotel-list .hotel-address {
  grid-column: 1;
}

.recently-viewed-hotel-list a.link-remove-item {
  grid-row: 1;
  grid-column: 2;
  font-size: 1.25rem;
}

.recently-viewed-hotel-list-box a {
  color: var(--bg-button-close);
}

.recently-viewed-hotel-list-box a .fa {
  vertical-align: top;
}

.recently-viewed-hotel-list-box a.link-remove-all {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg-button-close);
  text-align: right;
}

.mastercard-image {
  display: block;
  width: 180px;
  height: 130px;
  background-position: -160px -110px;
}

.amex-image {
  display: block;
  width: 180px;
  height: 130px;
  background-position: -348px -110px;
}

.icon-newsletter {
  padding-left: 18px;
  width: 13px;
  height: 12px;
  background-position: -48px -25px;
}

#RatingStars {
  display: block;
  height: 14px;
  margin: 15px auto 0;
  width: 100px;
}

.stars5 {
  background-position: 0 -54px;
  background-repeat: no-repeat;
}

.stars4 {
  background-position: 0 -69px;
  background-repeat: no-repeat;
}

.stars3 {
  background-position: 0 -84px;
  background-repeat: no-repeat;
}

.stars2 {
  background-position: 0 -99px;
  background-repeat: no-repeat;
}

.stars1 {
  background-position: 0 -114px;
  background-repeat: no-repeat;
}

/*
	Distance Item
*/
.distance-item {
  text-align: center;
}

/*
	Service Item
*/
.service-item {
  display: inline-block;
}

#RatingMark {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.06em;
  margin: 2px auto 0;
  text-align: center;
  text-shadow: 0 1px 1px white;
  text-transform: uppercase;
  width: 100px;
}

#RatingWrapper {
  font-size: 10px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 0 1px white;
  width: 100px;
}

#RatingAverage {
  font-size: 14px;
  font-weight: bold;
  margin-right: 2px;
}

#MaxScale {
  color: #777777;
}

#CommentBox {
  background-color: #fcfefc;
  border-radius: 6px 6px 6px 0;
  font-size: 10px;
  letter-spacing: -0.02px;
  line-height: 13px;
  margin-top: 5px;
  padding: 5px 8px 8px;
  text-align: left;
}

.CommentBoxNose {
  background-position: -53px 0;
  background-repeat: no-repeat;
  display: block;
  height: 11px;
  width: 11px;
}

#RatingAmountWrapper {
  background: none repeat scroll 0 0 white;
  border: 1px solid #cccccc;
  font-size: 9px;
  margin-top: -7px;
  padding: 0 2px;
  width: 90px;
  float: right;
}

#RatingAmount {
  float: left;
  height: 17px;
  line-height: 16px;
  margin-right: 3px;
  margin-top: 0;
  width: 75px;
}

#RatingAmountButton {
  background-position: -53px -13px;
  background-repeat: no-repeat;
  float: left;
  display: block;
  height: 17px;
  width: 11px;
}

.trusted-shop-grey-grad {
  background: #dcdadc; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZGFkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjZmVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2ZjZmVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNGUyZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(
    top,
    #dcdadc 0%,
    #fcfefc 50%,
    #fcfefc 51%,
    #e4e2e3 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #dcdadc),
    color-stop(50%, #fcfefc),
    color-stop(51%, #fcfefc),
    color-stop(100%, #e4e2e3)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #dcdadc 0%,
    #fcfefc 50%,
    #fcfefc 51%,
    #e4e2e3 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #dcdadc 0%,
    #fcfefc 50%,
    #fcfefc 51%,
    #e4e2e3 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    top,
    #dcdadc 0%,
    #fcfefc 50%,
    #fcfefc 51%,
    #e4e2e3 100%
  ); /* IE10+ */
  background: linear-gradient(
    to bottom,
    #dcdadc 0%,
    #fcfefc 50%,
    #fcfefc 51%,
    #e4e2e3 100%
  ); /* W3C */
  /* IE6-8 */
}

/*
	Text-Overflow: Ellipsis
*/
.ellipsis {
  overflow: hidden;
  position: relative;
  top: 0;
  bottom: 0;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: 100%;
}

.ellipsis > *:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "...";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  top: -18px;
  left: 100%;
  width: 4em;
  margin-left: -4em;
  padding-right: 5px;
  text-align: right;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
}

/*
	Credit Card Icons
*/
.icon-cc {
  width: 73px;
  height: 44px;
  border-radius: calc(var(--border-radius-button) / 2);
}

.cc-AP {
  background-position: 0px -1780px;
}

.cc-AX {
  background-position: -73px -1780px;
}

.cc-CA {
  background-position: -146px -1780px;
}

.cc-CB {
  background-position: -219px -1780px;
}

.cc-DC {
  background-position: -292px -1780px;
}

.cc-DS {
  background-position: -365px -1780px;
}

.cc-EH {
  background-position: -438px -1780px;
}

.cc-EN {
  background-position: -146px -1780px;
}

.cc-JC {
  background-position: -511px -1780px;
}

.cc-EC {
  background-position: -584px -1780px;
}

.cc-VC {
  background-position: 0px -1825px;
}

.cc-VI {
  background-position: -657px -1780px;
}

.cc-XC {
  background-position: -146px -1780px;
}

/*
	Credit Card Images
*/
.card {
  display: block;
  float: left;
  width: 73px;
  height: 44px;
}

.card-AP {
  background-position: 0px -1780px;
}

.card-AX {
  background-position: -73px -1780px;
}

.card-CA {
  background-position: -146px -1780px;
}

.card-CB {
  background-position: -219px -1780px;
}

.card-DC {
  background-position: -292px -1780px;
}

.card-DS {
  background-position: -365px -1780px;
}

.card-EH {
  background-position: -438px -1780px;
}

.card-JC {
  background-position: -511px -1780px;
}

.card-xEC {
  background-position: -584px -1780px;
}

.card-VI {
  background-position: -657px -1780px;
}

.card-XC {
  background-position: -146px -1780px;
}

/* 
	Info Messages 
*/
.info {
  margin: 20px 10px 8px 10px;
  font-size: 14px;
  color: var(--primary-accent);
  text-align: left;
}

/* 
	Inline Messages
*/
.inlineMessagesContainer {
  min-width: 300px;
  max-width: calc(100% - 4px);
  margin: 0.125rem auto 1.25rem auto;
  padding: 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.25px;
  text-align: center;
  color: var(--white-100);
  background: var(--primary-color);
  border-radius: var(--border-radius-component);
  border: 2px solid var(--bg-component);
  outline: 2px solid var(--primary-color);
}

.inlineMessageBox .messageHeader {
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 4px;
}

.inlineMessageBox ul {
  margin: 5px 25px;
  padding: 0;
  font-size: 12px;
  font-weight: normal;
}

.inlineMessageBox ul li a {
  display: block;
}

/*
	AreaInfo - NearBy
*/

.nearByAreaInfoBox .areaInfoCityBox .cityNameBox {
  padding: 0 0 10px 0;
  font-size: 0.875rem;
  color: var(--txt-color);
}

.nearByAreaInfoBox .areaInfoCityBox .cityName a {
  color: var(--txt-color);
}

.nearByAreaInfoBox .areaInfoCityBox .cityDistance {
  float: right;
}

.nearByAreaInfoBox .areaInfoCityBox ul {
  margin: 0 0 8px 0;
  padding: 0;
}

.nearByAreaInfoBox .areaInfoCityBox ul li {
  margin: 0;
  padding: 0 0 0 5px;
  list-style-type: none;
}

.nearByAreaInfoBox .areaInfoPoiTypeBox {
  padding: 0 0 11px 0;
}

.nearByAreaInfoBox .areaInfoPoiTypeBox .poiTypeName {
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: var(--border-separator);
}

.nearByAreaInfoBox .areaInfoPoiTypeBox .poiTypeName div.text {
  float: left;
}
.nearByAreaInfoBox .areaInfoPoiTypeBox .poiTypeName div.icon {
  float: right;
}

.nearByAreaInfoBox .areaInfoPoiTypeBox .poiTypeName div.icon::before {
  color: var(--txt-color);
}

.nearByAreaInfoBox .refPointName {
  width: 160px;
}
.nearByAreaInfoBox .areaInfoPoiTypeBox .refPointName {
  float: left;
}
.nearByAreaInfoBox .areaInfoPoiTypeBox .refPointDistance {
  float: right;
}

.nearByAreaInfoBox .areaInfoPoiTypeBox .toggle {
  font-size: 0.875rem;
  text-align: right;
}

.nearByAreaInfoBox .areaInfoPoiTypeBox ul {
  margin: 0;
  padding: 0;
}
.nearByAreaInfoBox .areaInfoPoiTypeBox ul li {
  margin: 0;
  padding: 0 0 0 5px;
  list-style-type: none;
}

/*
	Specific styles for different Poi types
*/

.nearByAreaInfoBox .company_location ul li a:link,
.nearByAreaInfoBox .company_location ul li a:visited {
  color: #208b19;
}
.nearByAreaInfoBox .company_location ul li a:hover,
.nearByAreaInfoBox .company_location ul li a:active {
  color: #175f28;
}

.nearByAreaInfoBox .toggleCities {
  text-align: right;
  padding: 0 0 11px 0;
}

/*
	Hotels Near By
*/

#hotelsNearByLinks {
  padding: 10px 5px;
}

#hotelsNearByLinks .filterName {
  font-weight: bold;
}

#hotelsNearByLinks ul {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.1em;
}

#hotelsNearByLinks ul li {
  margin: 0;
  padding: 1px 0 2px 5px;
  list-style-type: none;
}

#hotelsNearByLinks ul li.enabled {
  background: #f0eade;
}

#hotelsNearByLinks ul li .enableStars {
  float: left;
}

#hotelsNearByLinks ul li .enableStars img {
  margin-left: 5px;
}

/*
	Widgets
*/
.ty-widget-health {
  font-family: Roboto, sans-serif;
}

.ty-widget-health section {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
}

.ty-widget-health section:first-child {
  padding-top: 60px;
  padding-bottom: 20px;
}

.ty-widget-health section + section {
  margin-top: 0.25rem;
}

.ty-widget-health .trustscore {
  display: flex;
  flex: 0 0 50%;
  align-items: center;
}

.ty-widget-health .trustscore .score {
  width: 44px;
  height: 44px;
  background-color: var(--primary-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 8px;
  border-radius: calc(var(--border-radius-button) / 2);
  border-bottom-left-radius: 0;
}

.ty-widget-health .trustscore .score::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 6px;
  border-style: solid;
  border-color: var(--primary-accent) transparent transparent
    var(--primary-accent);
}

.ty-widget-health .score-details {
  line-height: 1.3;
}

.ty-widget-health .score-label {
  font-size: 17px;
  white-space: nowrap;
}

.ty-widget-health .score-caption {
  font-size: 13px;
  white-space: nowrap;
}

.ty-widget-health .reviews {
  display: flex;
  flex: 0 0 50%;
  align-items: center;
}

.ty-widget-health .reviews-details {
  line-height: 1.3;
}

.ty-widget-health .reviews-label {
  font-size: 17px;
  white-space: nowrap;
}

.ty-widget-health .reviews-caption {
  font-size: 13px;
  white-space: nowrap;
}

.ty-widget-health .reviews .column-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 44px;
  border-bottom: 1px solid var(--txt-color);
  border-top: 1px dashed var(--txt-color);
  flex: 1 1 auto;
  margin-left: 24px;
  max-width: 140px;
  min-width: 140px;
  padding: 0 24px;
}

.ty-widget-health .reviews .column-chart .column {
  box-sizing: initial;
  width: 5px;
  border-radius: 8px 8px 0 0;
  background-color: var(--txt-color);
  background-clip: padding-box;
  position: relative;
  border: 4px solid transparent;
  margin-bottom: -4px;
}

.ty-widget-health .reviews .column-chart .column:focus,
.ty-widget-health .reviews .column-chart .column:hover {
  background-color: #3498db;
}

.ty-widget-health .reviews .column:focus .tooltip,
.ty-widget-health .reviews .column-chart .column:hover .tooltip {
  transform: translate(-50%, -100%) scale(1);
}

.ty-widget-health .reviews .tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem;
  z-index: 1;
  background: var(--bg-component);
  border: 1px solid var(--grey-medium);
  border-radius: var(--border-radius-button);
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.05);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(0);
  transition: all 0.1s ease-in-out;
}

.ty-widget-health .reviews .tooltip::after {
  content: "";
  transform: translateX(-50%);
  margin-left: 2px;
  position: absolute;
  top: 100%;
  left: 50%;
  border-style: solid;
  border-width: 6px;
  border-color: var(--grey-medium) transparent transparent;
  z-index: 1;
}

.ty-widget-health .reviews .column-chart .tooltip .label {
  font-size: 13px;
  letter-spacing: 0.15px;
  line-height: 18px;
  white-space: nowrap;
}

.ty-widget-health .reviews .column-chart .tooltip .caption {
  font-size: 13px;
  letter-spacing: 0.15px;
  line-height: 18px;
  white-space: nowrap;
}

.ty-widget-health .pill {
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--primary-black);
  background-color: var(--grey-light);
  padding: 0.25rem 0.5rem;
  display: inline-block;
  margin-right: 8px;
}

.ty-widget-health .ty-category {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 24px;
  position: relative;
}

.ty-widget-health .ty-category i {
  position: absolute;
  left: -24px;
  font-size: 1.25rem;
}

.ty-widget-health .ty-category h1 {
  flex: 0 0 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 8px;
}

.ty-widget-health .ty-category p {
  flex: 0 0 100%;
  font-size: 0.875rem;
  line-height: 1.1;
  margin: 0 0 8px;
}

.ty-widget-health .ty-category p .review-count {
  font-size: 14px;
}

.ty-widget-health .ty-subcategory {
  flex: 0 0 50%;
  padding-right: 16px;
  margin-bottom: 24px;
}

.ty-widget-health .ty-subcategory h2 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}

.ty-widget-health .ty-subcategory p {
  font-size: 0.875rem;
  line-height: 1.3;
  margin: 0 0 8px;
}

.ty-widget-health .ty-subcategory p .review-count {
  font-size: 0.875rem;
}

.ty-widget-health .attribution {
  justify-content: flex-end;
  padding-bottom: 32px;
}

.ty-widget-health .attribution a {
  width: 80px;
  float: right;
}

.ty-widget-health .attribution a img {
  display: block;
  max-width: 100%;
}

/* 
 * COOKIE BANNER OVERRIDES
 */

#cconsent-bar {
  color: var(--txt-color) !important;
  background-color: var(--bg-component) !important;
  border-top: var(--border-separator);
}

#cconsent-bar a.ccb__edit {
  color: var(--txt-color) !important;
}

#cconsent-bar .ccb__wrapper button.consent-give {
  font-weight: 500;
  border-radius: calc(var(--border-radius-button) / 2);
}

#cconsent-bar button {
  background-color: var(--primary-color) !important;
}

/* 
 * HOTEL RATING OVERRIDES
 */

.reviewWidgetContainer {
  margin-bottom: 1rem;
}

.reviewWidgetContainer {
  padding: 1.5rem !important;
  font-size: 0.875rem !important;
}

.reviewWidgetContainer .reviewWidgetContainer {
  display: grid;
  gap: 1rem;
}

.reviewWidgetContainer .presentation {
  margin: 0;
}

.reviewWidgetContainer .presentation .summaryHeader {
  display: flex;
  justify-content: start;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.reviewWidgetContainer > div {
  padding: 0 !important;
}

.reviewWidgetContainer .scoreContainer {
  padding: 0 !important;
}

.reviewWidgetContainer .scoreContainer .fa.fa-square {
  color: #e31f21 !important;
}

.reviewWidgetContainer .scoreContainer .fa-stack p {
  font-weight: 500;
}

.reviewWidgetContainer .summary.paddingClass {
  padding-top: 0;
}

.reviewWidgetContainer .reviewsCount {
  font-size: 0.875rem;
}

.reviewWidgetContainer .hotelDescription {
  margin: 0.5rem 42px 0 0;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: var(--border-separator);
}

.reviewWidgetContainer .hotelBadges {
  display: grid;
  gap: 0.5rem;
  --col-min: 14.5rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  width: max-content;
  min-width: 99%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
  font-size: 0.875rem;
}

.reviewWidgetContainer .hotelBadges .badge {
  gap: 0.25rem;
}

.reviewWidgetContainer .hotelBadges .badge .fa-check-circle {
  background-color: white;
  border-radius: 50%;
  outline: 3px solid #e31f21;
  outline-offset: -2px;
}

.reviewWidgetContainer .reviewsAndGTK {
  margin: 0;
  font-size: 0.875rem;
}

.reviewWidgetContainer .reviewsAndGTK .distribution {
  padding: 0.125rem;
  font-weight: 600;
}

.reviewWidgetContainer progress {
  border-radius: calc(var(--border-radius-button) / 2);
}

.reviewWidgetContainer .reviewsAndGTK .distribution progress {
  margin: 0 0.5rem;
}

.reviewWidgetContainer .reviewsAndGTK .goodToKnow > div {
  margin-top: 0.5rem;
}

.reviewWidgetContainer .reviewsAndGTK .goodToKnow .fa {
  transform: translateY(2px);
}

.reviewWidgetContainer .reviewsAndGTK .goodToKnow .fa-check {
  margin-right: 0.5rem;
  font-size: 1.25rem;
  color: var(--price-free-cancel);
}

.reviewWidgetContainer .reviewsAndGTK .goodToKnow .fa-times {
  margin-right: 0.5rem;
  width: 20px;
  font-size: 1.35rem;
  color: var(--price-highlight);
  transform: translate(3px, 2px);
}

.reviewWidgetContainer .topBar {
  margin: 1rem 0;
}

.reviewMenuButton:not(.active) {
  color: var(--primary-black);
}

.reviewWidgetContainer .topBar button {
  font-family: "Robot", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
}

.reviewWidgetContainer .categoryContainer {
  font-size: 0.875rem;
  font-weight: 500;
}

.reviewWidgetContainer div > img {
  float: right;
}

#PoiAutocompleterForm {
  z-index: 98 !important;
}
.hotel-rating-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--border-separator);
  padding-bottom: 0.25rem;
}

.hotel-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hotel-icon-links {
  display: flex;
  gap: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
}

.hotel-compact-list .hotel-icon-links {
  font-size: 1rem;
}

.review-speech-bubble {
  display: inline-block;
  width: min-content;
  min-width: 22px;
  padding: 2px 5px 1px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--txt-review-bubble);
  background-color: var(--bg-review-bubbles);
  border-radius: var(--border-radius-button);
}

.review-speech-bubble.empty-small {
  width: 12px;
  height: 12px;
  margin-top: 3px;
}
table td {
  padding: 2px 5px 0 5px;
  margin: 0;
}

table th {
  padding: 0.5rem 0.5rem 0 0;
  margin: 0;
}

/* Klassen ************************************************************************************/
#errors {
  padding-top: 20px;
}

#errors .block {
  padding-bottom: 10px;
}

#warnings {
  float: left;
  position: relative;
  width: 780px;
  padding: 10px;
  border-top: 1px solid white;
  background: #f0eade;
}

#warnings h4 {
  width: 150px;
}

#warnings ul {
  margin-top: 0px;
  margin-left: 170px;
  padding: 0px;
}

#warnings li {
  list-style: none;
}

/* 
  Formular - Buchungsvorlage"
*/
.booking-template-form {
  text-align: right;
}

.booking-template-form .quick-filter {
  display: flex;
  justify-content: center;
}

.booking-template-form .quick-filter input {
  padding: 0.5rem;
  height: 2rem;
  font-size: 1rem;
}

.booking-template-name-selection {
  width: 250px;
}

.booking-template-apply-button {
  margin-top: 1rem;
  margin-right: 12.5rem;
}

/*
	Section
*/
.section {
  padding: 0.5rem;
  padding-left: 1rem;
  display: flex;
  align-items: flex-start;
}

.section:not(:last-child) {
  border-bottom: var(--border-separator);
}

.section .block {
  width: 100%;
}

.section .block .blockLine:not(:last-child) {
  margin-bottom: 0.75rem;
}

.section.topLink {
  justify-content: flex-end;
  border-top: var(--border-separator);
}

#warnings li {
  width: 100%;
}

.section table {
  width: 100%;
}

.section .titel {
  width: 200px;
  max-width: 200px;
  margin: 0 0.75rem 0 0;
  color: var(--txt-color);
}

.section h4 {
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.section .titel p {
  font-size: 0.875rem;
  padding: 0.75rem;
}

/* 
	Formularbeschriftungen 
*/
.section h5,
.section label {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0 0 0 0px;
  font-weight: bold;
}

.section input {
  padding: 0.25rem;
  line-height: 1.5;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.section input::placeholder {
  color: var(--txt-placeholder);
}

.section select {
  padding: 0.375rem;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.section .item input[type="text"],
.section .item select[name="CountrySelection"],
.section .item select[name="StateSelection"] {
  width: 291px;
}

.section .item.twoColumn {
  padding-right: 0 !important;
}

.section .twoColumn input[type="text"],
.section .twoColumn textarea {
  width: 598px;
}

.section .twoColumn .ui-datepicker-trigger {
  margin-right: 0.5rem;
  margin-left: 0.25rem;
}

/*
	Phone Input Fields
*/
.phone.item label {
  font-weight: normal;
}

.phone.item.phone-extension {
  padding-right: 0;
}

.section .item input[type="text"].phone-countryareacode {
  width: 40px;
}

.section .item select.phone-countryareacode {
  width: 246px;
}

.section .item input[type="text"].phone-areacitycode {
  width: 89px;
}

.section .item input[type="text"].phone-phonenumber {
  width: 145px;
}

.section .item input[type="text"].phone-extension {
  width: 70px;
}

.section .item label.phone-countryareacode {
  font-weight: normal;
}

.section .item label.phone-areacitycode {
  font-weight: normal;
}

.section .item label.phone-phonenumber {
  font-weight: normal;
}

.section .item label.phone-extension {
  font-weight: normal;
}

.section img {
  padding-right: 12px;
}

/* Einzelne Teile des Formulars */
.section .item {
  display: inline-block;
  padding: 0 12px 0 0;
}

.section .item label:not(.validation-required) {
  color: var(--txt-color);
}

/* Die Telefonnummer-Beschriftungen im Formular */
.section .item span {
  float: left;
  color: #958570;
  font-size: 10px;
  line-height: 10px;
  padding: 2px 4px 0 2px;
}

/* Der Kopf der Bestätigung, geht über die gesamte Breite */
.section .head {
  padding-left: 170px;
  width: 500px;
}

/* Überschrift im Kopf der Bestätigung */
.section h3 {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

/* letzte Section der Seite */
.last {
  border: none;
}

/* Blaue Schrift */
.marked,
label.validation-required,
.blockLine.required {
  font-size: 0.875rem;
}

/* Die Checkboxen */
.checkboxes label {
  width: 150px;
  padding: 0 12px 4px 0;
  font-weight: bold;
}

.checkboxes span {
  font-weight: normal;
}

.checkboxes input {
  margin-right: 3px;
}

.radiobuttons input {
  padding-right: 2px;
  margin-left: 6px;
}

/*
	PAYMENT
*/
ul.paymentTransactionType {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

ul.paymentTransactionType li {
  float: left;
  list-style: none;
  margin: 0 20px 0 0;
}

ul.paymentTransactionType li input[type="radio"] {
  margin: 0 5px 0 0;
  vertical-align: middle;
}

ul.paymentTransactionType li label {
  padding: 0;
  vertical-align: middle;
}

/*
	Credit Card
*/
.creditcard {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
  white-space: nowrap;
  text-align: left;
}

.creditcard .icon-cc {
  vertical-align: top;
}

.creditcard-detail {
  color: var(--txt-color);
  display: inline-block;
}

.creditcard.disabled .creditcard-detail {
  text-decoration: line-through;
}

.paymentDisabledNote {
  clear: both;
  width: 520px;
  color: var(--primary-accent);
  padding-top: 5px;
}

.expiredInfo {
  float: right;
  padding: 6px 10px 0 5px;
  color: var(--error);
  font-weight: bold;
}

.expired {
  text-decoration: line-through;
  color: var(--error);
}

/* Credit Card */
.credit-card-text {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.far {
  color: var(--txt-color);
  font-size: 1rem;
}

/* Tabellenzelle mit oben mehr Platz */
.padding th,
.padding td {
  padding-top: 12px;
}

/* Tabellenheader, linke Seite der Tabelle */
.section table th {
  text-align: left;
  width: 130px;
  vertical-align: top;
}

.section table td {
  text-align: left;
}

#bookingSummaryPayment .creditCardBlockLine {
  width: 100%;
}

#bookingSummaryPayment .paymentFormHeader {
  width: 100%;
  margin: 0;
  font-size: 12px;
}

#bookingSummaryReporting th {
  font-weight: normal;
  width: 30%;
  padding: 0 15px 3px 0;
  border: 0;
}

#bookingSummaryReporting td {
  padding: 0 0 3px 0;
  border: 0;
}

/* Preisaufschlüsselung */
.price span:not(.price-advantage-percent) {
  font-size: 1.25rem;
  font-weight: 600;
}

.price .room-rate-price-details-list span:not(.price-advantage-percent) {
  font-size: 1rem;
}

.price p {
  padding: 4px 12px 12px 0;
}

/* Text-Hervorhebung */
.emphasized {
  font-weight: bold;
  font-size: 12px;
}

/* Eintrag Ratenwechsel */ /* Rate */
.priceItemRate {
  width: 150px;
  text-align: right;
}

/* Aufenthalt */
.priceItemStay {
  width: 60px;
  text-align: right;
}

/* Nächteanzahl */
.priceItemNights {
  text-align: center;
  width: 50px;
}

/* fuer RoomStayDetails Komponente (oben auf den Buchungsseiten) */
.priceOnRoomStayDetails {
  text-align: right;
  font-size: 12px;
  font-weight: bold;
}

.totalPriceOnRoomStayDetails div {
  display: inline;
}

.totalPriceOnRoomStayDetails .secondCurrency {
  font-size: 0.9em;
  font-weight: normal;
}

/* total price */
.totalPrice {
  font-size: 115%;
  vertical-align: middle !important;
}

.totalPrice div,
.breakfast div {
  display: inline;
}

.totalPrice span.totalPriceLabel {
  padding: 0 20px 0 0;
}

/* td. */
.totalPrice span,
.totalPrice .currencySensitivePrice,
.totalPrice .currencySensitivePrice span {
  font-weight: bold;
  color: var(--primary-accent);
}

.totalPrice .currencySensitivePrice .secondCurrency {
  font-size: 90%;
  margin-top: 4px;
}

.totalPriceForBooking {
  font-size: 1.35em;
}

.totalPriceForBooking .currencyPrice,
.totalPriceForBooking .currencySensitivePrice .firstCurrency {
  display: inline;
}

.totalPriceForBooking .currencySensitivePrice .secondCurrency {
  display: inline;
  font-size: 90%;
  margin-top: 4px;
}

.paymentBlock {
  margin: 30px 0;
}

.hotelInfoDescription {
  margin: 0 1.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.hotelInfoDescription-category-title {
  font-size: 1rem;
  font-weight: 600;
}

.hotelInfoDescription:has(img) {
  display: flex;
  gap: 1rem;
  padding: 0 0 0.5rem !important;
  border-bottom: var(--border-separator);
}

.hotelInfoDescription:has(img):last-of-type {
  border: none;
}

.hotelInfoDescription:has(img) img {
  float: none !important;
  margin: 0;
  cursor: default;
  border-radius: var(--border-radius-button);
}

p {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* die Unternavigation*/
#subNav {
  margin-top: 1rem;
}

#subNav li {
  padding: 0.5em 1em;
  color: var(--txt-color);
  font-weight: normal;
  background-color: var(--bg-tablist-navigation);
  border-top-right-radius: var(--border-radius-button);
  border-top-left-radius: var(--border-radius-button);
}

#subNav li.current {
  font-weight: bold;
  background-color: var(--bg-tablist-navigation-active);
}

#subNav li img {
  vertical-align: middle;
  margin-right: 3px;
}

#description th {
  vertical-align: top;
  padding: 0 10px 2px 0 !important;
  width: auto;
  text-align: right;
}

#description td {
  vertical-align: top;
  padding: 0 0 2px 0 !important;
}

/* der Inhalt unter der Subnavigation*/ /* die Kundendaten */
#data {
  padding-top: 0.75rem;
  background: var(--bg-component);
  border-radius: var(--border-radius-component);
  border-top-left-radius: 0;
  overflow: hidden;
}

/* die Reservierungsdaten */
#reservation {
  padding-top: 0.75rem;
  background: var(--bg-component);
  border-radius: var(--border-radius-component);
  border-top-left-radius: 0;
}

#confirmation {
  margin-bottom: 0.75rem;
  color: var(--txt-color);
  background: var(--bg-component);
  border-radius: var(--border-radius-component);
  border-top-left-radius: 0;
}

#confirmation .section h3 {
  margin: 0 0 10px 0;
}

#confirmation .reservationBox {
  width: auto;
  font-weight: bold;
  font-size: 0.875rem;
}

#confirmation .reservationBox th {
  width: auto;
  padding: 0 1rem 0 0;
}

#confirmation .reservationId {
  padding-left: 0.5rem;
}

.confirmLabel {
  float: left;
  width: 70px;
}

.confirmData {
  float: left;
  width: 315px;
}

/* Hotelkurzbeschreibung */
#shortDescription {
  margin-left: 340px;
}

/* Traveler */
.travelerBox img {
  float: none;
  padding: 0;
}

.travelerBox img.creditCardImage {
  float: left;
}

#Travelers,
#TravelerSummary {
  padding: 1rem 0.75rem;
  margin: 0;
  border-bottom: var(--border-separator);
}

.travelerBox {
  margin: 0 0 1rem;
  padding: 0;
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
  border: var(--border-default);
  overflow: hidden;
}

.firstTravelerBox {
  border-top: 1px solid var(--border-default-color);
}

.traveler-box-cancelled {
  background-color: var(--bg-travel-box);
}

.traveler-box-cancelled .reservationId span {
  color: var(--provider-highlight) !important;
  font-weight: 500 !important;
}

.travelerBoxHeader {
  font-size: 0.875rem;
  background: var(--grey-light);
}

.travelerBoxHeader table td {
  padding: 5px 10px;
}

.travelerBoxHeader .roomIndex {
  font-size: 16px;
  background: #c3b49b;
  border-right: 1px solid #958570;
  vertical-align: middle;
  white-space: nowrap;
}

.travelerBoxHeader .totalAmount {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-accent);
  border-left: 1px solid #958570;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.travelerBoxHeader .totalAmount:hover {
  background: #e6e5de;
}

.travelerBoxHeader .totalAmount .secondCurrency {
  font-size: 11px;
  font-weight: normal;
}

.travelerBoxHeader .totalAmountCancelled {
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #958570;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.travelerBoxHeader .totalAmountCancelled .currencyPrice {
  font-size: 11px;
}

.travelerBoxHeader .totalAmountCancelled .secondCurrency {
  font-size: 9px;
  font-weight: normal;
}

.resetButton {
  float: right;
  padding: 0.5rem;
}

.buttonBox {
  float: right;
  margin-left: 10px;
}

.travelerRoomStayDetailsBox {
  padding: 3px 10px 3px 0;
}

.travelerRoomStayDetailsBox .currencyPrice {
  display: inline;
}

.travelerBox-header {
  padding: 0.5rem 1rem;
  color: var(--txt-color);
  font-weight: 500;
  background-color: var(--bg-travel-box-header);
}

.travelerBox .summary .field {
  width: 40%;
  background: #fff;
  color: #bbb;
  border: 1px solid #bbb;
  cursor: text;
  padding: 2px 3px;
}

.travelerBox .reportingField {
  margin: 3px 0 0 15px;
  color: var(--txt-color);
}

.travelerBox .reportingFieldLabel {
  width: 145px;
  min-width: 145px;
  margin-right: 10px;
}

.travelerBox .reportingFieldLabel.marked {
  color: var(--primary-accent);
}

.travelerBox .blockLine .hint {
  font-size: 11px;
}

.travelerBox .blockline:nth-child(3) {
  color: var(--txt-placeholder);
}

.travelerBox .serviceCenterMessage {
  margin: 7px 20px 10px 10px;
  padding: 10px;
  border: 2px dotted #feba02;
  background: #ffffaa;
  color: #5a4a35;
  font-size: 14px;
  line-height: 1.2em;
  text-align: left;
}

.travelerBox .traveler-documents {
  font-weight: bold;
}

.block {
  color: var(--txt-color);
}

.block.summary {
  font-size: 0.875rem;
}

.blockLine.summary span:last-of-type {
  color: var(--primary-accent);
}

.blockLine.summary .field {
  color: var(--txt-placeholder);
  background-color: var(--bg-component);
  border-color: var(--border-default-color);
  border-radius: var(--border-radius-button);
  cursor: pointer;
}

/* Cancellation Overview */
#cancellationOverview {
  width: 100%;
  background: var(--bg-component);
  font-size: 0.875rem;
  border-collapse: separate;
  margin: 10px 0;
  border: var(--border-default);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

#cancellationOverview td {
  width: auto;
  vertical-align: middle;
  border-left: var(--border-default);
  padding: 0 8px;
  height: 32px;
}

#cancellationOverview th {
  font-weight: bold;
  background-color: var(--bg-travel-box-header);
}

#cancellationOverview td.storno {
  text-align: right;
}

#cancellationOverview td.storno-all {
  padding-top: 10px;
  border: none;
  text-align: right;
}

#confirmation .hotelInfo {
  border: var(--border-default);
  margin: 10px;
  border-radius: var(--border-radius-component);
}

#confirmation .section img {
  padding: 0;
}

#confirmation .section img.actionButton {
  float: none;
}

#confirmation .travelerRoomStayDetails {
  line-height: 1.2em;
  padding: 3px 0;
}

#confirmation .travelerRoomStayDetails .travelerBox-header {
  border-radius: var(--border-radius-button);
}

#confirmation .travelerRoomStayDetails #IfModeCancellation {
  margin-top: 0.5rem;
}

.travelerRatePriceDetails .ratePrice {
  float: right;
}

.travelerRatePriceDetails .tax {
  font-size: 11px;
}

.travelerRatePriceDetails .totalRatePrice {
  font-size: 11px;
}

.traveler-roomstay-summary-descriptions ul {
  margin: 0;
  padding: 0 0 3px 15px;
}

#TotalBookingPrice {
  width: auto;
  font-size: 1.1em;
}

#TotalBookingPrice th {
  width: auto;
  vertical-align: middle;
  padding: 0 30px 0 0;
  font-weight: normal;
}

#TotalBookingPrice td {
  text-align: right;
  vertical-align: middle;
  padding: 5px;
}

/*
	Traveler Reservation Status 
*/
.travelerStatus {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 1.25rem;
}

.Reserved,
.OtherAvailable {
  background-color: var(--status-reserved);
}

.Cancelled,
.CancelledByServiceCenter,
.NoAvailability,
.UnableToProcess {
  background-color: var(--error);
}

.OnRequest {
  background-color: var(--status-in-progress);
}

.traveler {
  margin-left: 25px;
}

.booking-row-container {
  width: 100%;
  display: grid;
  grid-template-columns: 8em 1fr 1fr;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

.booking-row-container .booking-row {
  grid-column: 1 / span 3;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  background-color: var(--bg-banner-header);
  margin-bottom: 0.5rem;
}

.booking-row-container .booking-row > span {
  margin-right: 1rem;
  font-size: 0.875rem;
}

.booking-row-container .booking-row > span:first-of-type {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-accent);
}

/* Booking Dates */
.booking-dates {
  padding: 8px 16px;
}

.booking-row-container > div:nth-child(2) > div:nth-child(2) {
  font-size: 1rem;
  font-weight: 600;
  border-bottom: var(--border-separator);
}

.booked-hotel-info {
  padding: 0.5rem 1rem;
}

.booking-row-container .stakeholder-company {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Hotelname */
.booking-row-container .booked-hotel-name {
  font-size: 1rem;
  font-weight: 600;
}

/*  Hotel Contact */
.booking-row-container .booked-hotel-contact {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  color: var(--txt-placeholder);
}

/*  Traveler Box */
.booking-row-container .billing-company-name {
  margin-bottom: 1rem;
}

.booking-row-container .traveler-box {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
}

/*  Traveler Name */
.booking-row-container .traveler-name {
  font-size: 1rem;
  font-weight: 600;
}

/*  Price */
.booking-row-container .currencyPrice {
  font-size: 1.125rem;
  font-weight: 600;
}

#cancellationOverview .travelerStatus {
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
}

#cancellationOverview .traveler a {
  color: inherit;
}

#bottom {
  padding: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

/* 
	Payment Icons 
*/
.payment-link-with-checkbox {
  cursor: pointer;
  display: block;
}

.payment-link-with-checkbox:focus,
.payment-link-with-checkbox:active {
  text-decoration: none;
}

.payment-link-with-checkbox span {
  vertical-align: middle;
}

.payment-checkbox {
  background-position: -320px -600px;
  cursor: pointer;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 8px;
}

.payment-checkbox.active {
  background-position: -320px -654px;
}

.payment-link-with-checkbox:hover .payment-checkbox,
.payment-checkbox:hover {
  background-position: -320px -654px;
}

.payment-link-with-checkbox:hover .payment-checkbox.active,
.payment-checkbox.active:hover {
  background-position: -320px -696px;
}

.payment-checkbox.disabled {
  cursor: auto;
}

/*
	Advanced Booking
*/
table.hotelList {
  width: 100%;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

table.hotelList th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  text-align: left;
  background: var(--bg-banner-header);
}

table.hotelList tr:not(:last-of-type):not(:first-of-type) {
  border-bottom: var(--border-separator);
}

table.hotelList tr td {
  padding: 0.25rem;
}

table.hotelList td {
  padding: 0;
}

table.hotelList tr img {
  border-radius: var(--border-radius-button);
}

/* 
 * ADVANCED BOOKING SUMMARY 
 */

#AdvancedBookingSummaryForm .blockLine:has(#AgbCheckbox) div {
  margin-top: 0.5rem;
}

/* 
 CONFORMATION BUTTON
 */

#computopForm {
  float: right;
  margin-top: -45px;
  margin-right: 10px;
}

#computopForm .button {
  font-size: 1.25rem;
  border: 2px solid var(--primary-color);
}

#computopForm .button:hover {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
}
:root {
  --contrast-dark-color: #555;
  --contrast-field-label-error: #b30000;
  --contrast-gray-white-color: #595959;
  --contrast-white-gray-color: #615448;
  --page-max-width: 1280px;
  --navbar-logo-gap: 2rem;
  --hotel-star-size: 1.25rem;
  --border-width: 1px;
  --border-separator-width: var(--border-width);
  --border-default: var(--border-width) solid var(--border-default-color);
  --border-separator: var(--border-separator-width) solid
    var(--border-separator-color);
  --border-item-hover: var(--border-width) solid var(--border-matrix-color);
  --border-default-hidden: var(--border-width) solid var(--bg-component);
  --border-radius-component: 10px;
  --border-radius-button: calc((var(--border-radius-component)) * 0.5);
  --icon-calendar: url(../img/calendar.svg);
  --logo--header-url: url(../img/assets/img/ehotel_logo_lightmode.svg);
  --logo-landing-url: url(../img/assets/img/e_big_lightmode.svg);
  --logo-powered-by-2-url: url(../img/assets/img/logo_powered_by_ehotel_2_lightmode.svg);
}

[data-theme=dark] {
  --icon-calendar: url(../img/calendar-white.svg);
  --logo--header-url: url(../img/assets/img/ehotel_logo_darkmode.svg);
  --logo-landing-url: url(../img/assets/img/e_big_darkmode.svg);
  --logo-powered-by-2-url: url(../img/assets/img/logo_powered_by_ehotel_2_darkmode.svg);
}

@media (prefers-contrast: more) {
  :root {
    --hotel-star-size: 1.5rem;
    --border-width: 2px;
    --border-separator-width: 4px;
  }
}
i.eh-accessibility {
  cursor: pointer;
  font-size: x-large;
}

i.eh-accessibility.active {
  color: green;
}

#TravelReasonField {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem !important;
}

.search-bar-filter-menu #TravelReasonField {
  gap: 2rem;
}

#TravelReasonField label {
  margin: 0;
}

.change-search-box-left {
  font-size: 0.875rem !important;
}

.change-search-box-right a.active {
  background-color: var(--contrast-dark-color) !important;
}

.hotel-media-row-rates .room-rate,
.hotel-media-row-rates .room-rate ul {
  color: var(--txt-color);
  font-size: 0.875rem;
}

.roomrate-matrix[data-category] .roomrate-matrix-column:not(.highlighted-cell):not(:hover),
.roomrate-matrix[data-category] .roomrate-matrix-column:not(.highlighted-cell):empty,
.roomrate-matrix[data-category] .roomrate-matrix-empty-heading {
  opacity: 1 !important;
}

.fieldLabelError {
  color: var(---contrast-field-label-error) !important;
}

/*datepicker forms*/
#SearchSmallForm label[for=SearchArrivalDateField],
#SearchSmallForm label[for=SearchDepartureDateField] {
  display: none;
}

#AdavancedBookingHotelForm label[for=MiscArea] + span {
  color: var(--contrast-white-gray-color) !important;
}

#UserLogoutLink {
  color: white !important;
}

#confirmation .reservationId {
  color: var(--primary-accent);
}

/* 
 * VARIABLES 
 */
html {
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
}

body {
  background-color: var(--bg-page);
}

body:has(.search) {
  background-color: var(--bg-landing-page);
}

/* 
 * SCROLLBARS 
 */
html {
  scrollbar-width: 0.5rem;
  scrollbar-gutter: stable;
  scrollbar-color: var(--bg-scrollbar) transparent;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

/*
 * CONTENT
 */
#menu {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99;
}

.is-active {
  background-color: #e20613;
}

.positioner {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 1100px) {
  .positioner {
    max-width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0;
  }
}
@media screen and (max-width: 769px) {
  .positioner {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*
	TOPNAV
*/
.topnav {
  width: 100%;
  background-color: var(--bg-navbar);
}

.topnav__wrapper {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topnav__wrapper .flex:has(.theme-toggle) {
  align-items: center;
}

.travelagency-breadcrumb {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.travelagency-breadcrumb li {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--bg-component);
  color: var(--txt-color);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
  transform: skew(-20deg);
  opacity: 0.8;
}

.travelagency-breadcrumb li:has(a):hover {
  opacity: 1;
}

.travelagency-breadcrumb li span,
.travelagency-breadcrumb li a {
  display: block;
  transform: skew(20deg);
  /*  max-width: 200px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travelagency-breadcrumb li > a > i {
  margin-right: 0.25rem;
  color: var(--bg-button-close);
}

/* 
	MyEhotelUserComponent 
*/
.profile-selector {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--white-100);
  background-color: var(--bg-selector);
  border: 1px solid var(--bg-selector);
  border-radius: var(--border-radius-button);
}

.profile-selector:hover {
  border-color: var(--primary-color);
}

.profile-selector i.fa {
  font-size: 1.2em;
}

.profile-selector span.user-name {
  padding: 0 1em 0 0.4em;
  text-transform: none;
}

.profile-selector span.login-time {
  padding: 0 1em 0 0.4em;
  text-transform: none;
}

/* 
	Price Selector 
*/
.price-selector {
  padding: 2px 5px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  border: 1px solid white;
  position: relative;
  margin-left: 1em;
}

.price-selector:hover {
  background-color: #999;
  cursor: pointer;
}

.price-selector .price {
  display: inline-block;
  padding: 0 2em;
}

.price-selector-tooltip {
  display: none;
  width: 200px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: normal;
}

.price-selector-tooltip li {
  display: inline-block;
  width: 200px;
  padding: 4px;
  vertical-align: middle;
}

.price-selector-tooltip li:hover {
  background: #999;
}

.price-selector-tooltip li a {
  color: black;
}

.price-selector-tooltip li:hover a {
  color: white;
}

.price-selector-tooltip .price {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

/*
	HEADER
*/
.header {
  width: 100%;
  background-color: var(--bg-component);
  border-bottom: var(--border-separator);
}

#corporateLogo {
  display: none;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.header__wrapper .logo-powered-by-ehotel {
  align-self: flex-end;
  background-image: var(--logo-powered-by-2-url);
  background-repeat: no-repeat;
  background-size: cover;
  width: 184px;
  height: 22px;
}

.header__wrapper .logo {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  margin: 0;
  width: 125px;
  height: 50px;
  background-image: var(--logo--header-url);
  background-repeat: no-repeat;
  background-size: 125px 50px;
}

.header__wrapper .logo__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--navbar-logo-gap);
}

@media screen and (max-width: 768px) {
  .header__wrapper {
    padding: 10px;
  }
}
@media screen and (min-width: 769px) {
  .header {
    display: flex;
    height: 90px;
  }
  .header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/*
	Menu Button For MainNav
*/
.menu-button a i.fa {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e20511;
  color: white;
  font-size: 21px;
}

@media screen and (min-width: 641px) {
  .menu-button a {
    display: none;
  }
}
/*
	MainNav
*/
.mainnav-menu {
  display: flex;
  flex-direction: column;
}
.mainnav-menu > li:first-of-type {
  display: flex;
}
.mainnav-menu .mainnav-ehotel-logo {
  margin-top: auto;
  background-image: var(--logo-landing-url);
  background-size: 80px 73.85px;
  background-repeat: no-repeat;
  width: 80px;
  height: 73.85px;
}
.mainnav-menu-overlay {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.33s ease-in-out, background-color 0.33s ease-in-out;
}
.mainnav-menu-overlay:not(:has(.mainnav-menu)) {
  display: none;
}
.mainnav-menu-overlay:has(.mainnav-menu:not(.off-canvas)) {
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.059);
}
.mainnav-menu-close-button {
  margin-left: auto;
  margin-bottom: 2.5rem;
  width: 40px;
  height: 40px;
  background-image: url(../img/assets/img/icons/mainnav_close.webp);
  background-size: 40px;
}
.mainnav-menu-close-button img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
[data-theme=dark] .mainnav-menu-close-button {
  filter: invert(0.85);
}
.mainnav-menu-close-button:hover {
  background-color: transparent !important;
}
.mainnav ul > li > a > i.mainnav-icon-button {
  font-size: 2rem;
  color: var(--txt-color);
}
.mainnav ul > li .mainnav-menu {
  position: fixed;
  top: 40px;
  right: 0;
  height: 95vh;
  width: 600px;
  overflow-y: scroll;
  padding: 2.25rem 1.25rem 1.25rem;
  margin-right: 1.25rem;
  background-color: transparent;
  background-image: var(--bg-nav-off-canvas);
  border-radius: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: right 0.33s ease-in-out;
}
.mainnav ul > li .mainnav-menu.off-canvas {
  right: -650px;
}
.mainnav ul > li .mainnav-menu > li > a {
  display: flex;
  padding: 5px 20px;
  font-size: 28.8px;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: var(--txt-color);
}
.mainnav ul > li .mainnav-menu > li > a:hover {
  background-color: rgba(2, 1, 1, 0.1803921569);
}
.mainnav ul > li .mainnav-menu .mainnav-menu-close-button {
  padding: 0;
}
.mainnav ul .wp-content-off-canvas {
  display: flex;
  flex-direction: column;
}
.mainnav ul .wp-content-off-canvas > div:nth-of-type(2) {
  margin-top: auto;
}
.mainnav ul .wp-content-off-canvas li.menu-item {
  width: 100%;
}
.mainnav ul .wp-content-off-canvas li.menu-item a {
  display: flex;
  padding: 5px 20px;
  font-size: 28.8px;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: var(--txt-color);
}
.mainnav ul .wp-content-off-canvas li.menu-item a:hover {
  background-color: rgba(2, 1, 1, 0.1803921569);
}
.mainnav ul .wp-content-off-canvas li.menu-item:has(.sub-menu) > a {
  gap: 0.5rem;
}
.mainnav ul .wp-content-off-canvas li.menu-item:has(.sub-menu) > a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
}
.mainnav ul .wp-content-off-canvas li.menu-item-has-children .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.mainnav ul .wp-content-off-canvas li.menu-item-has-children .sub-menu a {
  border-inline-start: 8px solid transparent;
}
.mainnav ul .wp-content-off-canvas li.menu-item-has-children .sub-menu li.menu-item-has-children .sub-menu a {
  border-inline-start: 16px solid transparent;
}
.mainnav ul .wp-content-off-canvas li.menu-item-has-children.opened > .sub-menu {
  height: auto;
  max-height: 800px;
}
.mainnav ul .wp-content-off-canvas .button-dark {
  display: inline-block;
  height: 50px;
  margin: 3rem 1rem 1rem;
  padding: 12px 36px;
  font-weight: 500;
  background-color: var(--black-0);
  color: var(--white-100);
  border-radius: var(--border-radius-button);
  transition: background-color 0.23s ease;
}
.mainnav ul .wp-content-off-canvas .button-dark:hover {
  background-color: var(--primary-color);
}
.mainnav ul .wp-content-off-canvas .wp-image-550 {
  width: 80px;
  height: 73.85px;
}

@media screen and (min-width: 769px) {
  .mainnav > ul {
    display: flex;
    align-items: stretch;
    gap: 1rem;
  }
  .mainnav > ul > li > a {
    display: block;
    padding: 1rem;
  }
  .mainnav > ul > li.menu-ehotel > a {
    padding-left: 1.25rem;
  }
  .mainnav > ul > li > a > span.main-menu-small-text {
    position: absolute;
    top: -1rem;
    left: 0.5rem;
    font-size: 0.8em;
    text-transform: none;
    line-height: 1;
  }
  .main-menu-small-text {
    display: none;
  }
}
/*
	Breadcrumb
*/
.breadcrumb {
  width: 100%;
  font-size: 0.875rem;
  background-color: var(--bg-breadcrumb);
}

.breadcrumb__wrapper {
  display: flex;
  align-items: center;
  height: 3em;
  padding: 10px 0 10px 0;
  color: var(--txt-breadcrumb);
}

.breadcrumb ol,
.breadcrumb li {
  display: inline-block;
}

.breadcrumb li + li::before {
  padding: 0 0.5em;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
  color: var(--txt-breadcrumb);
}

.breadcrumb li a {
  color: var(--txt-breadcrumb);
  text-decoration: underline;
}

.breadcrumb li a:hover {
  color: var(--txt-breadcrumb-hover);
  text-shadow: 0 0 0.7px currentColor, 0 0 0.7px currentColor;
}

@media screen and (max-width: 1100px) {
  .breadcrumb__wrapper {
    padding: 10px;
  }
}
/* Cookie Consent Overrides*/
.cc-window {
  z-index: 99999 !important;
  color: black !important;
}

.cc-btn:hover {
  background-color: #b6090b !important;
}

.copyright a {
  padding: 0.25rem 0.5rem;
  border-color: var(--txt-color) !important;
  border-radius: var(--border-radius-button);
}

.marketing-program {
  color: #000 !important;
  background-color: #ffeb3b !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.marketing-program span {
  font-size: 12px !important;
  margin: 16px !important;
}

.cookie-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border: none;
  padding: 0;
  background: var(--bg-component);
  border-top: var(--border-separator);
  z-index: 10000;
}

.cookie-dialog__content {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: var(--txt-color);
}

.cookie-dialog__text {
  font-size: 1.25rem;
}

.cookie-dialog__link {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../img/assets/img/icons/arrow-right-menu-light.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  transform: translateY(6px);
}

[data-theme=dark] .cookie-dialog__link {
  background-image: url("../img/assets/img/icons/arrow-right-menu-dark.svg");
}

.cookie-dialog__button {
  height: 48px;
  padding: 0rem 2rem;
  background-color: var(--primary-color);
  color: var(--white-100);
  font-size: 1.25rem;
  font-weight: 500;
  border: none;
  border-radius: var(--border-radius-button);
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.cookie-dialog__button:hover {
  background-color: var(--primary-hover-color);
  transform: scale(1.1);
}
.calendar-container {
  position: absolute;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10000;
}
.calendar-container .litepicker {
  transform: scaleY(0);
  opacity: 0;
  transform-origin: top;
  transition: transform 0.125s ease-out, opacity 0.2s ease-out;
}
.calendar-container.expanded .litepicker {
  transform: scaleY(1);
  opacity: 1;
}

.search-small .calendar-container {
  left: 0px;
  top: -20px;
}

[data-theme=dark] .litepicker {
  --litepicker-month-weekday-color: var(--grey-mid-light);
  --litepicker-month-week-number-color: var(--grey-mid-light);
}

.litepicker {
  --litepicker-container-padding: 0 0.5rem 0.5rem;
  --litepicker-day-width: 2.5rem;
  --litepicker-day-padding: 0.5rem 0;
  --weekNumbersMargin: 0.25rem;
  --litepicker-container-months-color-bg: var(--bg-component);
  --litepicker-day-color: var(--txt-color);
  --litepicker-is-today-color: var(--txt-color);
  --litepicker-month-gap: 32px;
  --litepicker-month-header-color: var(--txt-color);
  --litepicker-button-prev-month-color: var(--primary-color);
  --litepicker-button-next-month-color: var(--primary-color);
  --litepicker-button-prev-month-color-hover: var(--primary-color);
  --litepicker-button-next-month-color-hover: var(--primary-color);
  --litepicker-month-weekday-color: var(--grey-medium);
  --litepicker-month-week-number-color: var(--grey-medium);
  --litepicker-is-start-color-bg: var(--primary-color);
  --litepicker-is-end-color-bg: var(--primary-color);
  --litepicker-is-in-range-color: var(--bg-date-in-range);
  --litepicker-day-color-hover: var(--primary-hover-color);
}
@media (min-width: 1280px) {
  .litepicker {
    --litepicker-container-padding: 0.5rem 1rem;
    --litepicker-day-width: 3rem;
    --litepicker-day-padding: 0.75rem 0;
    --weekNumbersMargin: 0.5rem;
  }
}
.litepicker {
  position: initial;
  pointer-events: auto;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  color: var(--txt-color);
}
.litepicker .container__months {
  padding: var(--litepicker-container-padding);
  border: var(--border-separator);
  border-radius: var(--border-radius-component);
  box-shadow: none;
}
.litepicker .container__months.columns-2 {
  width: calc(var(--litepicker-month-width) * 2 + (var(--litepicker-month-gap)) + var(--weekNumbersMargin) * 2);
}
.litepicker .month-item {
  width: calc(var(--litepicker-month-width) + var(--weekNumbersMargin)) !important;
  padding: 0 !important;
}
.litepicker .month-item:first-of-type {
  padding-right: 2rem !important;
}
.litepicker .button-previous-month,
.litepicker .button-next-month {
  cursor: pointer !important;
  transform: scale(1);
  transition: transform 0.2s ease-in !important;
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
  transform: scale(1.25);
  transform-origin: center;
}
.litepicker .month-item-weekdays-row > div:first-child,
.litepicker .week-number {
  box-shadow: 1px 0 0 0 var(--border-separator-color);
  margin-right: var(--weekNumbersMargin);
}
.litepicker .day-item {
  margin: 0.125rem 0;
  padding: var(--litepicker-day-padding) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
}
.litepicker .day-item.is-today {
  font-weight: 900;
  color: var(--txt-color) !important;
  box-shadow: inset 0 0 0 2px var(--border-default-color);
}
.litepicker .day-item:focus {
  box-shadow: inset 0 0 0 2px var(--primary-accent);
}
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
  font-weight: 500;
}
.litepicker .day-item.is-start-date.day-item.is-end-date {
  border-radius: 50% !important;
}
.litepicker .day-item.is-start-date {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.litepicker .day-item.is-end-date {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.litepicker .day-item.is-end-date.is-flipped {
  border-radius: 50% !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.litepicker .day-item.is-start-date.is-flipped {
  border-radius: 50% !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.litepicker .is-in-range {
  --litepicker-day-color: var(--black-15);
  border-radius: 0 !important;
}
.litepicker .litepicker-reset {
  position: absolute;
  left: 50%;
  top: 0.6rem;
  transform: translateX(-50%);
  padding: 0.25rem 1rem;
  color: var(--primary-color);
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
}
/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
* 
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch  : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
* 
* all CSS sizing (width,height) is done in pixels (px)
*/

/* @group Reset */

.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
	/* position */
    margin: 0;
    
    /* size */
	padding: 0;

	/* text */
	font-size: 100%;
	font: inherit;
	vertical-align: top;
	}

.fht-table {
	/* appearance */
    border-collapse: collapse;
    border-spacing: 0;
	}

/* @end */

/* @group Content */

.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
	/* appearance */
	overflow: hidden;
	
	/* position */
	position: relative;
	}

	.fht-table-wrapper .fht-fixed-body .fht-tbody,
	.fht-table-wrapper .fht-tbody {
		/* appearance */
	    overflow: auto;
		}

		.fht-table-wrapper .fht-table .fht-cell {
			/* appearance */
			overflow: hidden;
			
			/* size */
		    height: 1px;
			}
	
	.fht-table-wrapper .fht-fixed-column,
	.fht-table-wrapper .fht-fixed-body {
	    /* position */
	    top: 0;
	    left: 0;
	    position: absolute;
	    }
	    
	.fht-table-wrapper .fht-fixed-column {
	    /* position */
	    z-index: 1;
	    }

/* @end */.dialog {
  padding-top: 0.75rem;
}

.dialog .dialogContainer {
  background: transparent;
  margin: 5px 30px;
  padding: 10px;
}

.dialog .dialogHeader {
  background: #c3b49b;
  padding: 3px 5px;
  position: relative;
}

.dialog .dialogCloseBox {
  position: absolute;
  top: 2px;
  right: 5px;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.25rem 0 0.5rem 1rem;
  font-size: 1.25rem;
  color: var(--txt-color);
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: var(--border-separator);
}

.ui-dialog .ui-dialog-titlebar span {
  background-image: none;
}

.ui-dialog .ui-dialog-titlebar button::before {
  position: absolute;
  padding: 0.25rem 0.5rem;
  transform: translate(-65%, -20%);
  content: "\f00d";
  font-size: 1.25rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--white-100);
  background-color: var(--bg-button-close);
  border-radius: var(--border-radius-button);
}

.ui-dialog .ui-dialog-titlebar button:hover::before {
  background-color: var(--primary-hover-color);
}

.dialog .button-close-icon {
  display: block;
  background-position: 0 -235px;
  width: 15px;
  height: 15px;
}

.dialog .navigationBox {
  height: 32px;
  margin: 7px 0 15px 0;
  position: relative;
}

.dialog .navigationBox .buttonLeftBox {
  position: absolute;
  left: 15px;
}

.dialog .navigationBox .buttonRightBox {
  position: absolute;
  right: 15px;
}

/* Confirmation Dialog */
.confirmationDialog .dialogIcon {
  float: left;
}

.confirmationDialog .dialogMessage {
  font-size: 14px;
  margin: 5px 0 0 80px;
  text-align: left;
}

.inputDialog .dialogContainer {
  border: 2px solid #f0eade;
  margin: 15px 15px 0 15px;
}

.inputDialog .mandatoryNote {
  position: absolute;
  left: 45px;
  bottom: 3px;
}

.inputDialog .groupHeader {
  font-weight: bold;
}

.inputDialog .groupBox {
  margin: 8px 10px 10px 30px;
  padding: 0;
}

.inputDialog .labelBox {
  float: left;
  width: 170px;
  padding: 2px 10px 0 0;
}

.traveler-phone td {
  padding: 0 10px 0 0;
}

.traveler-phone select.phone-countryareacode {
  width: 178px;
}

.traveler-phone input[type="text"].phone-areacitycode {
  width: 145px;
}

.traveler-phone input[type="text"].phone-phonenumber {
  width: 145px;
}

.traveler-phone label.phone-countryareacode {
  font-size: 11px;
}

.traveler-phone label.phone-areacitycode {
  font-size: 11px;
}

.traveler-phone label.phone-phonenumber {
  font-size: 11px;
}

.inputDialog .inputRow.extraVGap {
  margin-top: 10px !important;
}

.inputDialog .inputBox {
  margin: 0 0 0 180px;
}

.inputDialog input[type="text"],
.inputDialog textarea {
  padding: 0.25rem 0.5rem;
  margin-left: 0;
  margin-bottom: 0;
}

.inputDialog input[type="text"].extraVGap {
  margin-top: 4px !important;
}

.inputDialog select {
  width: 304px;
  padding: 1px;
  margin-left: 0;
  margin-bottom: 0;
}

.inputDialog ul {
  margin: 0;
  padding: 0;
}

.inputDialog ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inputDialog ul li input[type="checkbox"] {
  margin: 0 0.5rem 0 0;
  padding: 0;
}

.inputDialog .summaryBox {
  margin: 0 0 0 20px;
}

.inputDialog .summaryLabel {
  font-size: 12px;
}

.inputDialog .summary {
  color: black;
}

.inputDialog .hint {
  font-size: 0.875rem;
  color: var(--txt-placeholder);
}

.inputDialog .useForAll {
  margin: 30px 0 0 0;
}

/*
	Search (Filter) Dialog
*/
#SearchFilterDialog .dialog {
  width: 480px;
  background-color: white;
  border-left: 2px solid #cfc8be;
  border-top: 2px solid #cfc8be;
  border-right: 2px solid #958570;
  border-bottom: 2px solid #958570;
  padding: 4px;
  text-align: center;
  z-index: 1000 !important;
}

#SearchFilterDialog .dialogContainer {
  margin: 0;
  padding: 20px;
  background: var(--grey-light);
}

#SearchFilterDialog .dialogContainer #WaitMessage {
  font-size: 16px;
  font-weight: bold;
}

#SearchFilterDialog .dialogContainer #LoadingImage {
  padding-left: 20px;
}

/* 
	Traveler Related Travelers Dialog 
*/
#TravelerRelatedTravelersDialog .inputDialog {
  width: 450px;
}

#TravelerRelatedTravelersDialog .inputDialog select {
  width: 100%;
}

/* 
	Traveler Contact Dialog 
*/
.contact-phone-email-box {
  margin-top: 20px;
}

.inputDialog.traveler-contact-new-dialog .blockLine {
  margin-bottom: 0;
}

.traveler-contact-new-dialog div.item {
  clear: both;
  padding-top: 10px;
}

.traveler-contact-new-dialog div.item.phone {
  clear: none;
  padding-top: 0;
  display: inline-block;
}

.traveler-contact-new-dialog div.item.phone label {
  display: none;
}

.traveler-contact-new-dialog div.item.phone .phone-countryareacode {
  width: 120px;
}

.traveler-contact-new-dialog div.item.phone .phone-areacitycode {
  width: 55px;
}

.traveler-contact-new-dialog div.item.phone .phone-phonenumber {
  width: 68px;
}

.traveler-contact-new-dialog div.item.phone .phone-extension {
  width: 35px;
}

.traveler-contact-new-dialog div.inputRow {
  margin-bottom: 10px;
}

.traveler-contact-new-dialog div.item div {
  width: 110px;
  float: left;
}

.traveler-contact-new-dialog div.labelBox {
  width: 110px;
  padding: 0;
}

.traveler-contact-new-dialog input[type="text"] {
  width: 300px;
}

.traveler-contact-new-dialog select {
  width: auto;
}

.traveler-contact-dialog input[type="radio"] {
  float: left;
}

.traveler-contact-dialog .contact-item {
  width: 50%;
  margin-bottom: 16px;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
}

.traveler-contact-dialog .radioLabel {
  flex-grow: 2;
  padding: 0 16px 0 8px;
}

.traveler-contact-dialog .radioLabel div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 260px;
}

.traveler-contact-dialog .radioLabel > div:first-child {
  font-weight: bold;
  font-size: 105%;
}

.traveler-contact-dialog .separator {
  margin: 16px 0;
  border: 0;
  border-bottom: 1px solid #ccc;
}

/* 
	Traveler Preferences Dialog 
*/
#TravelerPreferencesDialog .inputDialog .hint {
  margin: 0 0 20px 0;
}

#TravelerPreferencesDialog .inputDialog textarea {
  width: 100%;
  margin-top: 0.25rem;
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

#TravelerPreferencesForm {
  color: var(--txt-color);
}

#TravelerPreferencesDialog .dialogCheckboxes {
  margin: 0 0 20px 10px;
}

#TravelerPreferencesDialog .dialogCheckboxes li {
  float: left;
  width: 220px;
}

/* 
	Traveler Payment Dialog 
*/
.traveler-reserve-payment-dialog .groupHeader,
#TravelerChargePaymentDialog .groupHeader {
  font-weight: normal;
  font-size: 1rem;
  color: var(--txt-placeholder);
}

.traveler-reserve-payment-dialog .useForAll,
#TravelerChargePaymentDialog .useForAll {
  margin-left: 30px;
}

.traveler-reserve-payment-dialog label,
#TravelerChargePaymentDialog label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  padding-left: 2rem;
  border: 2px solid var(--bg-component);
  border-radius: var(--border-radius-button);
}

.traveler-reserve-payment-dialog label:hover .hint,
#TravelerChargePaymentDialog label:hover .hint,
#TravelerRelatedTravelersDialog label:hover .hint,
.traveler-reserve-payment-dialog label:hover .creditcard-detail,
#TravelerChargePaymentDialog label:hover .creditcard-detail,
#TravelerRelatedTravelersDialog label:hover .creditcard-detail,
.traveler-reserve-payment-dialog label:hover .paymentHeader,
#TravelerChargePaymentDialog label:hover .paymentHeader,
#TravelerRelatedTravelersDialog label:hover .paymentHeader {
  color: var(--black-0);
}

.traveler-reserve-payment-dialog label,
#TravelerChargePaymentDialog label,
#TravelerRelatedTravelersDialog label {
  border: 2px solid var(--bg-component);
}

.traveler-reserve-payment-dialog label:hover,
#TravelerChargePaymentDialog label:hover,
#TravelerRelatedTravelersDialog label:hover {
  cursor: pointer;
  color: var(--black-0);
  background-color: var(--hover-price-matrix);
  border: 2px solid var(--bg-component);
  border-radius: var(--border-radius-button);
  box-shadow: 0 0 0 2px var(--primary-accent);
}

.traveler-reserve-payment-dialog .hint,
#TravelerChargePaymentDialog .hint {
  display: none;
}

.traveler-reserve-payment-dialog
  input[type="radio"]:checked
  + div.radioLabel
  div.hint {
  display: block;
}

.traveler-reserve-payment-dialog .paymentDisabledNote,
#TravelerChargePaymentDialog .inputDialog .paymentDisabledNote {
  width: auto;
}

.traveler-new-payment-card-dialog .errorMessagesStyle {
  margin-bottom: 10px;
}

.traveler-new-payment-card-dialog .item {
  margin-bottom: 10px;
}

.traveler-reserve-payment-dialog input[type="radio"],
#TravelerChargePaymentDialog input[type="radio"] {
  float: left;
  margin-top: 0.3em;
}

.traveler-reserve-payment-dialog .radioLabel,
#TravelerChargePaymentDialog .radioLabel {
  margin: 0 0 0 30px;
}

.traveler-reserve-payment-dialog .paymentHeader {
  font-size: 120%;
  color: var(--txt-color);
}

/* .traveler-reserve-payment-dialog:hover > .paymentHeader {
  color: var(--black-0);
} */

.traveler-reserve-payment-dialog .paymentLabel {
  margin: 0 0 5px 0;
}

.traveler-reserve-payment-dialog #EditPaymentCardLink img {
  margin: 2px 0 0 0;
}

#TravelerChargePaymentDialog .inputDialog .inputRow {
  margin: 0 0 10px 0;
}

#TravelerChargePaymentDialog .paymentHeader {
  font-size: 14px;
  color: var(--txt-color);
}

#TravelerChargePaymentDialog #PaymentSelection {
  width: 550px;
}

#TravelerChargePaymentDialog #PaymentSelection option {
  padding: 1px 3px;
}

.traveler-new-payment-card-dialog {
  width: 540px;
}

.traveler-new-payment-card-dialog label {
  color: var(--txt-color);
}

.traveler-new-payment-card-dialog .labelBox {
  width: 170px;
}

.traveler-new-payment-card-dialog input[type="text"],
.traveler-new-payment-card-dialog select {
  width: auto;
}

.traveler-new-payment-card-dialog #HolderNameField {
  width: 280px !important;
}

/* 
	Traveler Reporting Dialog 
*/
#TravelerReportingDialog {
  color: var(--txt-color);
}

#TravelerReportingDialog .reportingField {
  margin: 0 0 10px 0;
}

#TravelerReportingDialog .reportingFieldDescription {
  font-size: 11px;
  margin: 0 0 3px 0;
}

#TravelerReportingDialog .reportingField input[type="text"] {
  width: 100%;
}

#TravelerReportingDialog .reportingFieldValue {
  border: 1px dotted #958570;
  padding: 0 2px;
  margin: 3px 0 0 0;
}

/*
	Traveler Notification Dialog 
*/
.traveler-notification-dialog .inputDialog .blockLine {
  clear: both;
  margin-bottom: 20px;
}

.traveler-notification-dialog .inputDialog .phone.item {
  float: left;
  margin-right: 12px;
}

.traveler-notification-dialog .inputDialog label {
  width: 90px;
  float: left;
}

.traveler-notification-dialog .inputDialog .phone label {
  width: auto;
  float: none;
  display: block;
  font-size: 11px;
  font-weight: normal;
}

.traveler-notification-dialog .inputDialog input[type="text"] {
  float: left;
}

.traveler-notification-dialog input.email {
  width: 492px;
}

.traveler-notification-dialog select.phone-countryareacode {
  width: 205px;
}

.traveler-notification-dialog input.phone-areacitycode {
  width: 75px;
}

.traveler-notification-dialog input.phone-phonenumber {
  width: 110px;
}

.traveler-notification-dialog input.phone-extension {
  width: 65px;
}

/*
	Contact Dialog 
*/
#ContactDialog .inputDialog {
  width: 510px;
}

#ContactDialog .inputRow {
  margin: 0 0 10px 0;
}

#ContactDialog .pseudoField {
  border: 1px dotted #958570;
  padding: 0 2px;
}

#ContactDialog .inputDialog input[type="text"] {
  width: 100%;
}

#ContactDialog .inputDialog textarea {
  width: 100%;
}

/* 
	Loyalty Dialog 
*/
.traveler-loyalty-dialog .groupHeader,
#TravelerLoyaltyDialog .groupHeader {
  font-weight: normal;
  font-size: 110%;
  color: #666;
}

.traveler-loyalty-dialog .useForAll,
#TravelerLoyaltyDialog .useForAll {
  margin-left: 30px;
}

.traveler-loyalty-dialog label,
#TravelerLoyaltyDialog label {
  display: block;
  margin-bottom: 5px;
  padding: 3px 0;
  border: 1px solid transparent;
}

.traveler-loyalty-dialog label:hover,
#TravelerLoyaltyDialog label:hover {
  background-color: #ddd;
}

.traveler-loyalty-dialog .hint,
#TravelerLoyaltyDialog .hint {
  display: none;
}

.traveler-loyalty-dialog input[type="radio"]:checked + div.radioLabel div.hint {
  display: block;
}

.traveler-loyalty-dialog .paymentDisabledNote,
#TravelerLoyaltyDialog .inputDialog .paymentDisabledNote {
  width: auto;
}

.traveler-new-loyalty-dialog .errorMessagesStyle {
  margin-bottom: 10px;
}

.traveler-new-loyalty-dialog .item {
  margin-bottom: 10px;
}

.traveler-loyaty-dialog input[type="radio"],
#TravelerLoyaltyDialog input[type="radio"] {
  float: left;
  margin-top: 0.3em;
}

.traveler-loyalty-dialog .radioLabel,
#TravelerLoyaltyDialog .radioLabel {
  margin: 0 0 0 30px;
}

.traveler-loyalty-dialog .loyaltyHeader {
  font-size: 120%;
}

.traveler-loyalty-dialog .loyaltyLabel {
  margin: 0 0 5px 0;
}

#TravelerLoyaltyDialog .inputDialog .inputRow {
  margin: 0 0 10px 0;
}

#TravelerLoyaltyDialog .paymentHeader {
  font-size: 14px;
}

#TravelerLoyaltyDialog #LoyaltySelection {
  width: 550px;
}

#TravelerLoyaltyDialog #LoyaltySelection option {
  padding: 1px 3px;
}

.traveler-new-loyalty-dialog {
  width: 540px;
}

.traveler-new-loyalty-dialog .labelBox {
  width: 10.5rem;
}

.traveler-new-loyalty-card-dialog input[type="text"],
.traveler-new-loyalty-dialog select {
  width: auto;
}

.traveler-new-loyalty-dialog #HolderNameField {
  width: 280px !important;
}

/*
	Phone Input Fields
*/
.phone.item label {
  font-weight: normal;
}

.phone.item.phone-extension {
  padding-right: 0;
}

.section .item input[type="text"].phone-countryareacode {
  width: 40px;
}

.section .item select.phone-countryareacode {
  width: 220px;
}

.section .item input[type="text"].phone-areacitycode {
  width: 89px;
}

.section .item input[type="text"].phone-phonenumber {
  width: 145px;
}

.section .item input[type="text"].phone-extension {
  width: 65px;
}

.section .item label.phone-countryareacode {
  font-weight: normal;
}

.section .item label.phone-areacitycode {
  font-weight: normal;
}

.section .item label.phone-phonenumber {
  font-weight: normal;
}

.section .item label.phone-extension {
  font-weight: normal;
}

/* Dialog background overlay override */

.ui-widget-overlay {
  opacity: 0.75 !important;
}

/*
	SUBMIT BUTTON
*/
.ui-dialog .ui-dialog-buttonpane {
  padding: 0;
  border-color: var(--border-separator-color);
}

.ui-dialog .ui-button {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white-100);
  background: var(--primary-color);
  border: none;
}

.ui-dialog .ui-button:hover {
  background: var(--bg-button-hover);
}

/*
	ICONS
*/
.ui-dialog .far {
  color: var(--txt-color);
  font-size: 1.5rem;
}
.positioner.footer-container {
  max-width: 1300px !important;
}

footer {
  margin-top: 10rem;
  color: var(--txt-color);
}
footer > div:first-of-type .e-con-inner {
  display: flex;
}
footer > div:first-of-type .e-con-inner > div {
  display: flex;
  gap: 1rem;
}
footer > div:first-of-type .e-con-inner > div > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
footer > div:first-of-type .e-con-inner > div > div .elementor-heading-title {
  font-size: clamp(1rem, 0.929rem + 0.317vw, 1.25rem);
  font-weight: 700;
}
footer > div:first-of-type .e-con-inner > div:first-of-type {
  flex-direction: column;
  width: 34%;
}
footer > div:first-of-type .e-con-inner > div:nth-of-type(2) {
  width: 66%;
  justify-content: space-between;
}
footer > div:first-of-type .e-con-inner > div:nth-of-type(2) > div:first-of-type p {
  margin-block-end: 0.9rem;
  color: var(--txt-placeholder);
}
footer > div:first-of-type .e-con-inner > div:nth-of-type(2) > div:first-of-type p a {
  color: var(--txt-placeholder);
}
footer > div:first-of-type .e-con-inner > div:nth-of-type(2) > div:first-of-type nav li a {
  color: var(--txt-color);
  letter-spacing: -0.48px;
}
footer > div:first-of-type .e-con-inner > div:nth-of-type(2) nav li a {
  display: inline-block;
  padding: 13px 24px 13px 0;
  line-height: 1.2;
  color: var(--txt-placeholder);
  letter-spacing: -0.48px;
  background-image: url("../img/assets/img/icons/arrow-right-menu-light.svg");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: right center;
}
[data-theme=dark] footer > div:first-of-type .e-con-inner > div:nth-of-type(2) nav li a {
  background-image: url("../img/assets/img/icons/arrow-right-menu-dark.svg");
}
footer > div:first-of-type .e-con-inner > div:first-of-type .elementor-heading-title {
  font-size: clamp(1.75rem, 1.179rem + 2.54vw, 3.375rem);
  line-height: 1;
  letter-spacing: -2.45px;
}
footer > div:first-of-type .e-con-inner > div > div > div:first-of-type:has(img) img {
  margin-bottom: 10px;
}
footer > div:first-of-type .e-con-inner > div > div:has(img) img {
  display: block;
  width: 100px;
  height: 30px;
  background-color: var(--white-100);
  border-radius: var(--border-radius-button);
  outline: 2px solid var(--bg-landing-page);
  outline-offset: -1px;
}
footer > div:first-of-type .e-con-inner .elementor-menu-toggle .e-font-icon-svg {
  fill: var(--txt-color);
  height: 1rem;
  width: 1rem;
}
footer > div:nth-of-type(2) .e-con-inner img {
  width: 80px;
  height: 74px;
}
footer > div:nth-of-type(2) .e-con-inner p {
  font-size: 1em;
  font-weight: 400;
  color: var(--txt-placeholder);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  margin-right: 139px;
}
footer > div:last-of-type .e-con-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 43px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
div[role=main]:has(.background-container) .container-search {
  min-height: 48vh;
}
@media (min-width: 1520px) {
  div[role=main]:has(.background-container) .container-search {
    min-height: 60vh;
  }
}
div[role=main]:has(.background-container) .content {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
div[role=main]:has(.background-container) .search-pre-switch {
  margin: 0;
  padding: 0.25rem 1rem;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  transform: translate(-50px, -170px);
  transform: translate(70px, 16px);
}
[data-theme=dark] div[role=main]:has(.background-container) .search-pre-switch {
  background-color: rgba(32, 33, 36, 0.75);
}
div[role=main]:has(.background-container) .search-pre-switch button {
  font-size: 1rem;
}
@media (min-width: 1280px) {
  div[role=main]:has(.background-container) .search-bar {
    padding: 1.5rem;
  }
}
@media (min-width: 1280px) {
  div[role=main]:has(.background-container) .calendar-container {
    bottom: 1.5rem;
  }
}

/*
	BACKGROUND IMAGE CONTAINER
*/
.background-container {
  display: grid;
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
}
@media screen and (min-width: 2500px) {
  .background-container {
    max-width: 2560px;
  }
}
.background-container li {
  grid-row: 1;
  grid-column: 1;
}
.background-container li span {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 800px;
  aspect-ratio: 16/9;
  /*     height: 292px; */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: bottom center;
}
@media screen and (min-width: 2500px) {
  .background-container li span {
    /* height: 390px; */
    max-height: 1100px;
  }
}

.container-messages {
  position: absolute;
  margin-top: 0.5rem;
  left: 50%;
  transform: translatex(-50%);
  max-width: 1070px;
  z-index: 1000;
}
.container-messages .inlineMessagesContainer {
  margin-bottom: 5px;
}
.container-search {
  position: relative;
}
.container-search:has(.background-container) h1,
.container-search:has(.background-container) .headline-subline, .container-search:has(.ta__clients) h1,
.container-search:has(.ta__clients) .headline-subline {
  display: none;
}
.container-search:has(.background-container) .headline-searchbar-grid {
  grid-template-rows: 180px repeat(2, auto);
  margin-top: 0;
  gap: 0;
  /* margin-top: -25.5px; */
}
@media (min-width: 1280px) {
  .container-search:has(.background-container) .headline-searchbar-grid {
    /*  margin-top: -37.5px; */
  }
}
.container-search:has(.background-container) .search {
  grid-row: 2;
}
.container-search:has(.ta__clients) .headline-searchbar-grid {
  grid-template-rows: auto;
  gap: 0;
}
.container-search .headline-subline {
  font-size: 0;
  opacity: 0;
  color: var(--txt-color);
}
@media (min-width: 1520px) {
  .container-search .headline-subline {
    font-size: 0.875rem;
    text-transform: uppercase;
    animation: slideInRight 0.5s ease-out 0.6s forwards;
  }
}
@keyframes slideInTop {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(6rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-6rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.container-search h1 {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 3.5rem 0 2rem;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.5rem, 7vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.075em;
  line-height: 1;
  color: var(--txt-color);
}
@media (min-width: 1520px) {
  .container-search h1 {
    margin: 0;
    font-size: 9.375rem;
  }
}
.container-search h1 > span {
  opacity: 0;
  animation: slideInRight 0.975s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0.05s forwards;
}
@media (min-width: 1520px) {
  .container-search h1 > span:first-of-type {
    animation: slideInTop 0.5s ease-out 0.4s forwards;
  }
  .container-search h1 > span:nth-of-type(2) {
    animation: slideInRight 0.5s ease-out 0.45s forwards;
  }
  .container-search h1 > span:last-of-type {
    animation: slideInBottom 0.5s ease-out 0.5s forwards;
  }
}
.container-search .content {
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  min-height: 575px;
  height: 52vw;
}
@media screen and (max-width: 1100px) {
  .container-search .content {
    max-width: 100%;
  }
}
@media (min-width: 1520px) {
  .container-search .content {
    max-width: calc(100vw - 80px);
    height: 740px;
  }
}
.container-search .content:has(.ta__clients) {
  width: 100%;
  max-width: 1440px;
  height: auto;
  min-height: 700px;
}

/* Headline - Searchbar Desktop Layout => START */
.headline-searchbar-grid {
  display: grid;
  grid-template-rows: 0px 180px repeat(2, auto);
}
@media (min-width: 1520px) {
  .headline-searchbar-grid {
    grid-template-rows: 21px repeat(3, auto);
    grid-template-columns: 1fr 1fr min-content;
    gap: 0 2rem;
    margin: 3rem auto 0;
    align-items: center;
  }
  .headline-searchbar-grid p.headline-subline {
    grid-row: 1;
    grid-column: 1/-1;
    text-align: right;
  }
  .headline-searchbar-grid h1 {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1/-1;
    grid-row: 1/5;
  }
  .headline-searchbar-grid .wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .headline-searchbar-grid .search {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    align-items: center;
  }
  .headline-searchbar-grid .one {
    grid-row: 2;
    grid-column: 1/-1;
  }
  .headline-searchbar-grid .two {
    grid-row: 3;
    grid-column: 3;
  }
  .headline-searchbar-grid .three {
    grid-row: 4;
    grid-column: 1/-1;
  }
  .headline-searchbar-grid .search {
    grid-row: 3;
    grid-column: 1/3;
  }
}

/* Headline - Searchbar Desktop Layout => END */
/* 
	Customer Content
*/
.customer-content {
  display: flex;
  justify-content: center;
  color: var(--txt-color);
}

/* 
	Customer Content - For Layout with Nav Link Icons
*/
/* .customer-content {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  z-index: -1;

  &:has(.info-box) {
    grid-template-columns: 1fr 532px;

    & .menu-myehotel {
      margin-top: 0;

      > ul {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 100px 100px;
        gap: 3rem 0;
      }
    }
  }

  > ul {
    margin: 0 auto;
  }

  & .menu-myehotel {
    margin-top: 8rem;
    color: var(--txt-color);

    > i,
    > a,
    > ul i,
    > ul .menu-item-logout {
      display: none;
    }

    > ul {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      width: max-content;
      max-width: 100%;

      > li {
        display: flex;
        justify-content: center;

        a {
          transition: color 0.2s ease-in;
        }

        &.menu-item {
          &-reservations a:before {
            content: "\f236";
          }
          &-user-data a:before {
            content: "\f4ff";
            padding-left: 4px;
          }
          &-password-data a:before {
            content: "\f084";
          }
          &-payment-data a:before {
            content: "\f09d";
          }
          &-ehotelinsider-data a:before {
            content: "\f2b5";
          }
          &-preferences-data a:before {
            content: "\f164";
          }
          &-booking-templates a:before {
            content: "\f0ea";
          }
          &-favorite-hotels a:before {
            content: "\f004";
          }
        }

        &:hover {
          color: var(--primary-color);

          > a:before {
            border-color: var(--primary-color);
            transform: scale(1.1);
          }
        }

        > a {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          text-align: center;
          text-transform: capitalize;
          line-height: 2.5;
          font-weight: 500;

          &:before {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            border: 2px solid var(--txt-color);
            border-radius: 50%;
            font-family: "Font Awesome 5 Free";
            font-size: 1.5rem;
            font-weight: 900;
            transform: scale(1);
            transition:
              border 0.2s ease-in,
              transform 0.2s ease-in-out;
          }
        }
      }
    }
  }
} */
/* 
	Info Box
*/
.info-box {
  max-height: 100%;
  max-width: var(--page-max-width);
  margin-top: 1rem;
  padding: 1.5rem;
  font-size: 1rem;
  background-color: var(--bg-info-box);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-width: 2px;
  border-radius: var(--border-radius-component);
  overflow: auto;
  z-index: -1;
}
@media screen and (max-width: 990px) {
  .info-box {
    display: none;
  }
}
.info-box br {
  line-height: normal !important;
}

/*
	TravelAgency - Customer Selector
*/
.ta__clients {
  width: 100%;
  margin: 2rem auto 0;
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

.ta__clients-messagebox {
  padding: 16px 0;
  color: grey;
  font-size: 1.1em;
}

.ta__clients-messagebox > i {
  margin-right: 8px;
  font-size: 1.2em;
}

.ta__clients-headerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--bg-travel-box-header);
}

.ta__clients-header {
  color: var(--txt-color);
  font-size: 1.25rem;
  font-weight: 500;
}

.ta__clients-filter {
  border: 1px solid var(--grey-medium);
  border-radius: var(--border-radius-button);
  padding: 1px 8px 2px 8px;
  color: var(--txt-color);
}

.ta__clients-filter input,
.ta__clients-filter input:active,
.ta__clients-filter input:focus,
.ta__clients-filter input:focus-visible {
  border: none;
  border-inline: none;
  outline: none;
  font-size: 80%;
  line-height: 1;
  padding: 0;
  margin-right: 8px;
  width: 250px;
  background-color: transparent;
}

.ta__clients-filter button {
  display: none;
}

.ta__clients-list {
  display: grid;
  gap: 0.75em;
  grid-template-columns: repeat(4, 1fr);
  padding: 1rem;
}

.ta__client {
  display: grid;
  grid-template-rows: 2rem minmax(52px, auto) auto;
  gap: 0.5rem;
  border: var(--border-default);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  line-height: 1.3;
  transition: border-color 0.15s ease-in, transform 0.15s ease-in, outline 0.15s ease-in;
}

.ta__client:hover,
.ta__client:focus-visible {
  border-color: var(--primary-color);
  outline: 1px solid var(--primary-color) !important;
  transform: scale(1.025);
}

.ta__client:active,
.ta__client:focus {
  background-color: var(--primary-hover-color);
  color: var(--white-100);
  cursor: wait;
}

.ta__client:active div,
.ta__client:focus div {
  color: var(--white-100);
}

.ta__client-type,
.ta__client-address {
  font-size: 1rem;
  color: var(--txt-placeholder);
}

.ta__client-name {
  font-size: 1.25rem;
  color: var(--txt-color);
  align-self: start;
}

.ta__client-address {
  align-self: end;
}

.ta__client-requestorid {
  margin-left: 2em;
  color: var(--primary-accent);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--track-width)));
  }
}
@keyframes scroll-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--track-width));
  }
}
.wp-content {
  --font-size-small: clamp(0.875rem, 0.97rem + 0.2vw, 1.125rem);
  --font-size-medium: clamp(1rem, 1.08rem + 0.3vw, 1.25rem);
  color: var(--txt-color);
}
.wp-content > div[class*=wp-content-]:not(.wp-content-slider) {
  max-width: calc(100% - 16px);
  margin: 0 auto;
}
@media (min-width: 1281px) {
  .wp-content > div[class*=wp-content-]:not(.wp-content-slider) {
    max-width: var(--page-max-width);
  }
}
.wp-content {
  /* ------ HIDDEN ELEMNTS ------ */
}
.wp-content-none {
  display: none;
}
.wp-content {
  /* ------ HEADLINE FADE IN ------ */
}
.wp-content .has-fade-in .e-heading-base {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.wp-content .has-fade-in .e-heading-base.headline-fade-in {
  opacity: 1;
  transform: translateY(0);
}
.wp-content {
  /* ------ CARDS SLIDE IN NEW ------ */
}
.wp-content-world-content .e-con-inner > div:has(:not(img)) > a {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.wp-content-world-content .e-con-inner > div:has(:not(img)) > a.card-slide-in {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.wp-content {
  /* ------ HIDDEN ELEMENT ------ */
}
.wp-content-hidden {
  display: none;
}
.wp-content {
  /* ------ SCHEDULE CALL BUTTON ------ */
}
.wp-content-make-call-button {
  margin-top: 1rem;
}
.wp-content-make-call-button .e-con-inner {
  display: flex;
  justify-content: end;
}
.wp-content-make-call-button a {
  display: block;
  height: 140px;
  width: 140px;
  padding: 0.5rem;
  background-color: var(--primary-color);
  border-radius: 50%;
}
.wp-content-make-call-button a > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.wp-content-make-call-button a img {
  display: inline-block;
  width: 90%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 443/438;
  vertical-align: middle;
  transform: translateY(-2px);
}
.wp-content-make-call-button.button {
  display: block;
  margin: 2rem 3rem 1rem auto;
  width: 140px;
  height: 140px;
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-small);
  transition: font-size 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96), background-color 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.wp-content-make-call-button.button:hover {
  font-size: 1.25rem;
  transition: font-size 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96), background-color 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.wp-content {
  /* ------ HERO IMAGE ------ */
}
.wp-content-hero-image {
  width: calc(100% - 16px) !important;
  margin: 10rem auto !important;
}
.wp-content-hero-image img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  aspect-ratio: 1280/534;
}
@media (min-width: 2400px) {
  .wp-content-hero-image img {
    max-width: 2560px !important;
    max-height: 575px;
  }
}
.wp-content {
  /* ------ AWARDS SLIDER ------ */
}
.wp-content-slider.awards {
  --img-count: 10;
  --image-width: calc(100vw / var(--img-count));
  --gap: calc(var(--image-width) / 2);
}
@media (min-width: 1520px) {
  .wp-content-slider.awards {
    --image-width: 210px;
    --gap: 128px;
  }
}
.wp-content-slider.awards {
  --single-width: calc(var(--image-width) + (var(--gap)));
  --track-width: calc(var(--single-width) * var(--img-count));
  overflow: hidden;
  width: 100vw;
  max-width: 2560px;
  margin: 0rem auto 0;
}
.wp-content-slider.awards .swiper-wrapper {
  display: flex;
  gap: var(--gap);
  width: var(--track-width);
}
.wp-content-slider.awards .swiper-wrapper figure {
  margin: 0;
}
.wp-content-slider.awards .swiper-wrapper figure img {
  width: var(--image-width);
}
.wp-content-slider.awards .swiper-wrapper {
  animation: scroll-left calc(var(--img-count) * 4s) linear infinite;
}
.wp-content {
  /* ------ HIGHLIGHTS ------ */
}
.wp-content-higlights-heading h2 {
  margin: 6rem 0;
  font-size: 6.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -4.2px;
  display: inline-block;
  border-top: 16px solid var(--primary-color);
}
.wp-content-higlights-link-list .e-con-inner {
  display: grid;
  gap: 1.5rem 0;
}
.wp-content-higlights-link-list .e-con-inner > a {
  display: grid;
  grid-template-columns: 62px 20fr 15fr 10fr;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  font-size: 1.25rem;
  color: var(--txt-color) !important;
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
}
.wp-content-higlights-link-list .e-con-inner > a h5 {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -3px;
  font-size: clamp(1.75rem, 1.179rem + 2.54vw, 3.375rem);
  text-transform: lowercase;
  margin-left: -1rem;
}
.wp-content-higlights-link-list .e-con-inner > a p {
  color: var(--grey-medium);
}
.wp-content-higlights-link-list .e-con-inner > a .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}
.wp-content-higlights-link-list .e-con-inner > a .elementor-icon-box-wrapper .elementor-icon svg {
  transform: scale(2);
  filter: invert(0);
}
@media (prefers-color-scheme: dark) {
  .wp-content-higlights-link-list .e-con-inner > a .elementor-icon-box-wrapper .elementor-icon svg {
    filter: invert(0.6);
  }
}
.wp-content-higlights-link-list .e-con-inner > a:hover p {
  color: var(--txt-color);
}
.wp-content {
  /* ------ HOW IT WORKS ------ */
}
.wp-content-hiw-headline {
  margin-top: 15.25rem !important;
}
.wp-content-hiw-headline .e-con-inner > div h2 {
  position: relative;
  margin: 6rem 0;
  font-size: 6.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -4.2px;
  padding-left: 1rem;
}
.wp-content-hiw-headline .e-con-inner > div h2::before {
  position: absolute;
  display: block;
  content: "";
  height: 300px;
  width: 380px;
  top: -160px;
  left: 0;
  --gap: 12px;
  background-image: radial-gradient(var(--txt-color) 1px, transparent 1px), radial-gradient(var(--txt-color) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, calc(var(--gap) / 2) calc(var(--gap) / 2);
  opacity: 0.15;
}
.wp-content-hiw-headline .e-con-inner > div > div:has(> img) img {
  height: 0;
  display: none;
}
.wp-content-hiw-text .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0 1.5rem;
}
.wp-content-hiw-text .e-con-inner > div,
.wp-content-hiw-text .e-con-inner .e-con {
  display: grid;
  grid-row: 1/-1;
  grid-template-rows: subgrid;
}
.wp-content-hiw-text .e-con-inner > div p.e-paragraph-base:first-child {
  margin-right: 1.5rem;
  font-size: 1rem;
}
.wp-content-hiw-text .e-con-inner h4 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -2.4px;
}
.wp-content-hiw-text .e-con-inner .e-paragraph-base {
  font-size: 0.875rem;
}
.wp-content {
  /* ------ WORLDWIDE HEADLINE ------ */
}
.wp-content-worldwide-headline {
  margin-top: 10rem !important;
}
.wp-content-worldwide-headline .e-heading-base {
  font-size: clamp(2rem, 1.357rem + 2.857vw, 4.375rem);
  font-weight: 500;
  letter-spacing: -3.5px;
  line-height: 1.2;
  text-align: center;
  text-transform: lowercase;
}
.wp-content {
  /* ------ WORLDWIDE SECTION NEW ------ */
}
.wp-content-world-content {
  width: 100%;
}
.wp-content-world-content .e-con-inner > div:first-of-type {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}
.wp-content-world-content .e-con-inner > div:first-of-type img {
  width: 1000px;
  height: 1000px;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  display: block;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: end;
  gap: 3%;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  min-height: 20rem;
  padding: 1.5rem 0 1.5rem 2rem;
  background-color: var(--bg-landing-page);
  border-radius: calc(var(--border-radius-component) * 2);
  transform-origin: right;
  transform: scale(1);
  transition: transform 0.6s ease-out;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in:hover {
  transform: scale(1.05);
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in:first-of-type {
  border-top-left-radius: 0;
  transform-origin: top right;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in:last-of-type {
  border-bottom-left-radius: 0;
  transform-origin: bottom right;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in h4.elementor-heading-title {
  font-size: clamp(1.5rem, 1.179rem + 1.429vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #ff5833;
}
.wp-content-world-content .e-con-inner > div:not(:first-of-type) > a.card-slide-in h6.elementor-heading-title {
  font-size: clamp(1rem, 0.929rem + 0.317vw, 1.25rem);
  margin-bottom: 1rem;
}
.wp-content {
  /* ------ SUSTAINABILITY ------ */
}
.wp-content-sustainability .e-con-inner {
  display: grid;
  grid-template-columns: 5fr 3.75fr;
  margin: 15rem 0;
}
.wp-content-sustainability .e-heading-base {
  font-size: 9.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.08em;
  margin: 0;
}
.wp-content-sustainability div:has(> img.attachment-full) {
  display: flex;
  justify-content: center;
}
.wp-content-sustainability img.attachment-full {
  animation: spin 16s linear infinite;
}
.wp-content-sustainability p {
  margin-top: 3rem;
  font-size: 1.2rem;
  line-height: 28.8px;
  letter-spacing: -0.48px;
}
.wp-content-sustainability .elementor-widget-button {
  display: flex;
  justify-content: end;
  margin-top: 1.5rem;
}
.wp-content-sustainability .elementor-widget-button .elementor-button {
  display: block;
  align-content: center;
  height: 80px;
  width: 80px;
  text-align: center;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--grey-mid-light);
  border-radius: 50%;
}
.wp-content {
  /* ------ BLOG TEASER ------ */
}
.wp-content-blog h2 {
  font-size: clamp(2.5rem, 1.429rem + 4.762vw, 6.25rem);
  font-weight: 700;
  letter-spacing: -4.2px;
  text-align: center;
  line-height: 1.75;
}
.wp-content-blog h2::before {
  display: block;
  content: "";
  background: repeating-linear-gradient(to right, var(--txt-color) 0px, var(--txt-color) 2px, transparent 1px, transparent 8px), repeating-linear-gradient(to right, var(--txt-color) 0px, var(--txt-color) 2px, transparent 1px, transparent 160px);
  background-size: 100% 8px, 100% 16px;
  background-repeat: repeat-x;
  opacity: 0.2;
  height: 32px;
  width: 100%;
}
.wp-content-blog h3 {
  font-size: clamp(2rem, 1.357rem + 2.857vw, 4.375rem);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.wp-content-blog .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wp-content-blog .e-con-inner .elementor-posts-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  margin-top: 5rem;
}
.wp-content-blog .e-con-inner .elementor-posts-container article {
  display: flex;
  flex-direction: column;
}
.wp-content-blog .e-con-inner .elementor-posts-container article .elementor-post__thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
}
.wp-content-blog .e-con-inner .elementor-posts-container article img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-content-blog .e-con-inner .elementor-posts-container article .elementor-post__title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1.4px;
  margin-top: 1.25rem;
  overflow: hidden;
}
.wp-content-blog .e-con-inner .elementor-posts-container article .elementor-post-date {
  color: var(--txt-placeholder);
}
.wp-content-blog .e-con-inner .button-auto-center {
  display: flex;
  align-items: center;
  height: 3.125rem;
  margin-top: 4.5rem;
  padding: 0 1.5rem;
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--black-0);
  border-radius: var(--border-radius-button);
  transform: scale(1);
  transition: background-color 0.25s ease-out 0.1s, transform 0.25s ease-in-out 0.1s;
}
.wp-content-blog .e-con-inner .button-auto-center:hover {
  background-color: var(--primary-color);
  transform: scale(1.075);
  transition: background-color 0.25s ease-out, transform 0.25s ease-in-out;
}
.wp-content {
  /* ------ CUSTOMERS ------ */
}
.wp-content-customers-headline {
  padding: 0.75rem;
}
.wp-content-customers-headline .e-con-inner > div {
  display: flex;
  gap: 5rem;
}
.wp-content-customers-headline .e-heading-base {
  position: relative;
  margin: 9.5rem 0;
  font-size: 9.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -12px;
}
.wp-content-customers-headline .e-heading-base::before {
  position: absolute;
  display: block;
  content: "";
  height: 200px;
  width: 450px;
  --gap: 12px;
  background-image: radial-gradient(var(--txt-color) 1px, transparent 1px), radial-gradient(var(--txt-color) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, calc(var(--gap) / 2) calc(var(--gap) / 2);
  opacity: 0.15;
}
.wp-content-customers-headline .e-heading-base + div {
  display: block;
  width: 400px;
  height: 15px;
  align-self: end;
  margin-bottom: 9.5rem;
  background-color: var(--primary-color);
}
.wp-content {
  /* ------ CLIENT COMPANIES ------ */
}
.wp-content-companies .e-con-inner {
  width: 930px;
  margin: 0 auto;
}
.wp-content-companies .e-con-inner .e-heading-base {
  font-size: 4.375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -5px;
  text-transform: lowercase;
  text-align: center;
  padding: 9.5rem 0;
}
.wp-content-companies {
  /* GALLERY */
}
.wp-content-companies-gallery .e-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  width: fit-content;
  margin: 0 auto 7.5rem;
}
.wp-content-companies-gallery .e-grid > div {
  padding: 1rem;
  border: 2px solid var(--grey-light);
  border-radius: var(--border-radius-button);
  overflow: hidden;
}
[data-theme=dark] .wp-content-companies-gallery .e-grid > div {
  border-color: var(--black-15);
  background-color: #dfdfdf;
}
[data-theme=dark] .wp-content-companies-gallery .e-grid > div img {
  filter: contrast(0.75);
}
.wp-content-companies-gallery .e-grid > div img {
  width: 136px;
  height: 136px;
}
.wp-content-companies-gallery {
  /* MORE BUTTON */
}
.wp-content-companies-gallery-more-button .elementor-widget-button {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.wp-content-companies-gallery-more-button .elementor-widget-button .elementor-button {
  display: block;
  align-content: center;
  height: 80px;
  width: 80px;
  text-align: center;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--grey-mid-light);
  border-radius: 50%;
}
.wp-content {
  /* ------ INSIDER ------ */
}
.wp-content-insider-headline .e-heading-base {
  font-size: 6.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -4.2px;
  margin: 6.25rem 0;
}
.wp-content-insider {
  /* BENEFITS */
}
.wp-content-insider-benefits .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
}
.wp-content-insider-benefits .e-con-inner > div {
  display: grid;
  grid-row: 1/-1;
  grid-template-columns: auto 1fr;
  grid-template-rows: subgrid;
  gap: 0 1rem;
}
.wp-content-insider-benefits .e-con-inner > div div:has(.e-heading-base) {
  display: grid;
  grid-row: 1/-1;
  grid-column: 2;
  grid-template-rows: subgrid;
}
.wp-content-insider-benefits .e-con-inner > div div:has(.e-heading-base) .e-heading-base {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
}
.wp-content-insider-hero-image {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem !important;
  text-align: center;
}
.wp-content-insider-hero-image .e-con-inner pre {
  margin: 0;
  overflow: hidden;
}
.wp-content-insider-hero-image .e-con-inner > div:first-of-type pre {
  font-size: 2.6rem;
}
.wp-content-insider-hero-image .e-con-inner > div:nth-of-type(2) pre {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 58px;
}
.wp-content-insider-hero-image a {
  display: inline-block;
}
.wp-content-insider-hero-image img {
  height: 30rem;
  object-fit: contain;
  object-position: center center;
  transition-duration: 0.5s;
  transform: scale(1);
}
.wp-content-insider-hero-image img:hover {
  transform: scale(0.9);
}
.wp-content-insider {
  /* MORE BUTTON */
}
.wp-content-insider-more-button .elementor-widget-button {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.wp-content-insider-more-button .elementor-widget-button .elementor-button {
  display: block;
  align-content: center;
  height: 80px;
  width: 80px;
  text-align: center;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--grey-mid-light);
  border-radius: 50%;
}
.wp-content-insider-more-button .elementor-widget-button {
  margin-top: 5rem;
}
.wp-content {
  /* ------ CAREER ------ */
}
.wp-content-career-headline {
  margin-top: 15rem !important;
}
.wp-content-career-headline .e-heading-base {
  font-size: 9.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -11px;
  margin: 1.5rem 0 0;
}
.wp-content-career-headline .elementor-element:nth-of-type(2) p {
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
}
.wp-content-career-content {
  margin-top: 15rem !important;
}
.wp-content-career-content .e-con-inner {
  display: flex;
  gap: 18.75rem;
}
.wp-content-career-content .e-con-inner > div {
  width: 50%;
}
.wp-content-career-content .e-con-inner > div .e-heading-base {
  font-size: 3.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -2.5px;
  text-transform: lowercase;
}
.wp-content-career-content p {
  font-size: 1.25rem;
  line-height: 1.4;
}
.wp-content-career-content .elementor-widget-button {
  display: flex;
  justify-content: start;
  margin-top: 1.5rem;
}
.wp-content-career-content .elementor-widget-button .elementor-button {
  display: block;
  align-content: center;
  height: 80px;
  width: 80px;
  text-align: center;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--grey-mid-light);
  border-radius: 50%;
}
.wp-content-career-content .elementor-widget-button {
  margin-top: 4rem;
}
.wp-content {
  /* ------ PERSONS SLIDER ------ */
}
.wp-content-slider.persons.forward {
  --gap: 16px;
  --img-width: 225px;
  --img-count: 11;
  margin-top: 5rem;
  --single-width: calc(var(--img-width) + (var(--gap)));
  --track-width: calc(var(--single-width) * var(--img-count));
  overflow: hidden;
  width: 100vw;
  max-width: 2560px;
  margin: 5rem auto 0;
}
.wp-content-slider.persons.forward .swiper-wrapper {
  display: flex;
  gap: var(--gap);
  width: var(--track-width);
}
.wp-content-slider.persons.forward .swiper-wrapper figure {
  margin: 0;
}
.wp-content-slider.persons.forward .swiper-wrapper figure img {
  width: var(--img-width);
}
.wp-content-slider.persons.forward .swiper-wrapper {
  animation: scroll-left calc(var(--img-count) * 4s) linear infinite;
}
.wp-content-slider.persons.reverse {
  --gap: 16px;
  --img-width: 225px;
  --img-count: 11;
  --single-width: calc(var(--img-width) + (var(--gap)));
  --track-width: calc(var(--single-width) * var(--img-count));
  overflow: hidden;
  width: 100vw;
  max-width: 2560px;
  margin: 1rem auto 0;
}
.wp-content-slider.persons.reverse .swiper-wrapper {
  display: flex;
  gap: var(--gap);
  width: var(--track-width);
}
.wp-content-slider.persons.reverse .swiper-wrapper figure {
  margin: 0;
}
.wp-content-slider.persons.reverse .swiper-wrapper figure img {
  width: var(--img-width);
}
.wp-content-slider.persons.reverse .swiper-wrapper {
  animation: scroll-right calc(var(--img-count) * 4s) linear infinite;
}
.wp-content-persons-more-button .elementor-widget-button {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.wp-content-persons-more-button .elementor-widget-button .elementor-button {
  display: block;
  align-content: center;
  height: 80px;
  width: 80px;
  text-align: center;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--grey-mid-light);
  border-radius: 50%;
}
.wp-content {
  /* ------ CONTACT ------ */
}
.wp-content-contact-headline {
  max-width: 1075px !important;
}
.wp-content-contact-headline .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wp-content-contact-headline .e-con-inner > div {
  height: 250px;
  padding: 0.75rem;
  border-left: 1rem solid var(--primary-color);
}
.wp-content-contact-headline .e-con-inner > div .e-heading-base {
  font-size: clamp(3rem, 1.286rem + 7.619vw, 9.375rem);
  font-weight: 600;
  letter-spacing: -8.5px;
  margin: 0;
}
.wp-content-contact-headline .e-heading-base {
  font-size: clamp(1.75rem, 1.179rem + 2.54vw, 3.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2.5px;
  margin: 0;
}
/* 
	Fake Deals 
*/

.fake-deals-main-content {
  padding-top: 140px;
}

.fake-deal-region-outer {
  display: table;
  height: 100%;
  width: 100%;
}

.fake-deal-region-middle {
  display: table-cell;
  vertical-align: middle;
}

.fake-deal-region-inner {
  margin-left: auto;
  margin-right: auto;
}
fake-deals-main-content {
  background-color: black;
}

.fake-deals-teaser {
  color: var(--white-100);
}

.fake-deals-teaser-container p.section__header {
  font-size: 2.5em;
  font-weight: 400;
  margin-top: 34px;
}

.fake-deals-title {
  text-align: center;
  text-transform: uppercase;
}

.fake-deals-borderline1 {
  height: 4px;
  background-color: var(--txt-landingpage);
}

.fake-deals-teaser-body {
  padding-bottom: 2em;
}

.deals-region-container {
  padding-top: 24px;
}

.fake-deal-column {
  position: relative;
  padding: 8px 8px;
}

.fake-deal-column:hover {
  -webkit-filter: grayscale(0%) !important;
  filter: none !important;
}

.fake-deal-overlay {
  position: absolute;
  bottom: 8px;
  width: calc(50%);
  background: white;
  font-size: 1.5em;
  padding-left: 10px;
  padding-top: 10px;
  opacity: 0.8;
  top: 8px;
  overflow: hidden;
}

.fake-deal-overlay .fake-deal-eclipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-deal-overlay .fake-deal-header {
  font-size: 1.25em !important;
  float: none !important;
  font-weight: 400 !important;
}

.fake-deal-overlay .fake-deal-price-new {
  text-align: left !important;
  font-size: 0.9em !important;
}
.fake-deal-overlay .fake-deal-price-old {
  text-align: left !important;
  font-size: 0.6em !important;
}

.fake-deal-overlay .fake-deal-prices {
  position: absolute;
  bottom: 0px;
}

.fake-deal-overlay .fake-deal-header-timespan {
  font-size: 0.9em !important;
  float: none !important;
  font-weight: 400 !important;
}

.fake-deal-overlay .fake-deal-body {
  font-size: 0.6em !important;
  float: none !important;
  font-weight: normal !important;
  position: absolute;
  top: calc(50% - 30px);
}

.fake-deal-column:hover .fake-deal-bkg-image-PAGE_DEALSPAGE_IMG {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.fake-deal-column a:hover {
  color: black;
}

.fake-deal-header-parent {
  position: absolute;
  left: 8px;
  bottom: calc(30% - -8px);
  width: calc(100% - 16px);
  background: white;
  font-size: 1.5em;
  text-transform: uppercase;
  padding-right: 32px;
  padding-left: 8px;
}

.fake-deal-header {
  text-align: left;
  float: left;
  width: 70%;
  overflow: hidden;
  white-space: nowrap;
}

.fake-deal-header-timespan {
  text-align: right;
  float: right;
  width: 30%;
  overflow: hidden;
  white-space: nowrap;
}

.fake-deal-description {
  position: absolute;
  bottom: 8px;
  width: calc(100% - 16px);
  height: 30%;
  background: white;
  padding: 5px 9px 5px 9px;
  opacity: 0.7;
}

.fake-deal-description-container {
  height: 100%;
  padding-left: 0px;
  padding-right: 4px;
}

.fake-deal-price-old,
.fake-deal-price-new {
  background-color: white;
  white-space: nowrap;
  margin: 0px;
  text-transform: none;
  text-align: right;
}

.fake-deal-price-old {
  bottom: 25px;
  text-decoration: line-through;
  text-decoration-color: var(--error);
}
.fake-deal-price-new {
  bottom: 5px;
  color: var(--error);
  margin: 0px;
}

.fake-deals-region {
  min-width: 250px;
}

#fake-deals-parent[data-show="#countryRegion"]
  .fake-deals-region-country
  .fake-deal-bkg-image,
#fake-deals-parent[data-show="#continentRegion"]
  .fake-deals-region-continent
  .fake-deal-bkg-image,
#fake-deals-parent[data-show="#worldRegion"]
  .fake-deals-region-world
  .fake-deal-bkg-image,
.fake-deals-region:hover .fake-deal-bkg-image {
  opacity: 1;
}

#fake-deals-parent[data-show="#countryRegion"]
  .fake-deals-region-country
  .media__body,
#fake-deals-parent[data-show="#continentRegion"]
  .fake-deals-region-continent
  .media__body,
#fake-deals-parent[data-show="#worldRegion"]
  .fake-deals-region-world
  .media__body,
.fake-deals-region:hover .media__body {
  background-color: white;
  color: #b1b1b1;
}

.fake-deals-region .fake-deal-bkg-image {
  opacity: 0.5;
}

.fake-deal-bkg-image.fake-deal-bkg-image-PAGE_DEALSPAGE_IMG {
  height: 300px;
  filter: grayscale(100%);
}

.fake-deal-bkg-image.fake-deal-bkg-image-PAGE_DEALSPAGE_IMG:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.fake-deal-bkg-image {
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
}

#countryRegion,
#continentRegion,
#worldRegion {
  display: none;
}

#fake-deals-parent {
  margin-top: 1em;
}

#fake-deals-parent[data-show="#countryRegion"] #countryRegion,
#fake-deals-parent[data-show="#continentRegion"] #continentRegion,
#fake-deals-parent[data-show="#worldRegion"] #worldRegion {
  display: block;
  margin-top: 100px;
}

.deals-region-container .media__body {
  padding-top: 5px;

  padding-bottom: 5px;

  min-height: 73px;
}

.deals-footnote:before {
  content: "* ";
}

.deals-footnote {
  color: white;
  padding: 0 8px 4em 8px;
  text-align: right;
  font-size: 1.1em;
}

/*
* Generic Table
*/
.generic-table-disabled-column {
  text-decoration: line-through;
  text-decoration-color: var(--error);
  opacity: 0.6;
  background: #ddd;
}

/*
* UserProfileStakeholderCSVImport
*/
.csv-import-NAME-PREFIX-CODE-field {
  width: 99px;
}

.csv-import-EMAIL-field {
  width: 250px;
}

.csv-import-USERNAME-field {
  width: 250px;
}

.csv-import-COMPANY-field {
  width: 250px;
}

.csv-import-NAME-TITLE-field {
  width: 80px;
}

.csv-import-NO-field {
  width: 50px;
}

/* 
	Traveler Preferences Dialog 
*/
#TravelerPreferences .inputDialog .hint {
  margin: 0 0 20px 0;
}

#TravelerPreferences .inputDialog textarea {
  width: 100%;
}

#TravelerPreferences .dialogCheckboxes {
  margin: 0 0 20px 10px;
}

#TravelerPreferences .dialogCheckboxes li {
  float: left;
  width: 220px;
}

.user-profile-data {
  display: none;
}

.user-profile-data-visible {
  display: block;
}

.edit-booking-template {
  margin-bottom: 10px;
}

.bookingtemplate-action-confirm span.label {
  text-transform: capitalize;
  margin-right: 20px;
}

.bookingtemplate-action-confirm a {
  text-transform: capitalize;
  color: inherit;
}

.bookingtemplate-action-confirm a:hover {
  color: #e31f21;
}

.booking-template-page-entry {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}

#errors {
  padding-top: 20px;
}

#errors .block {
  padding: 15px;
  margin-left: 150px;
  width: 540px;
}

#warnings {
  float: left;
  position: relative;
  width: 540px;
  padding: 10px 29px 0;
  border-top: 1px solid white;
  background: #f0eade;
}

#warnings h4,
#errors h4 {
  width: 150px;
}

#warnings ul,
#errors p {
  margin-top: 0px;
  margin-left: 170px;
  padding: 0px;
  width: 540px;
}

#warnings li {
  list-style: none;
  width: 520px;
}

.emphasized {
  font-weight: bold;
  font-size: 12px;
}

/* Tags *********************************************************************************/
/* table th,
table td {
  padding: 2px 5px 0 5px;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
} */

/* Klassen *********************************************************************************/
.rateChangeInformation {
  text-align: right;
  padding: 20px 10px 5px 0;
}

/* rückt das Icon für den Kalender zurecht*/
.calendar img {
  vertical-align: top;
  margin: 0px;
  padding: 0px;
}

.rateInfoBox {
  margin: 0 0 4px 0;
}

/* 
	Logged-In-Box
*/
#myEhotel {
  margin-top: 0px;
  border-top: 3px solid #c3b49b;
}

#myEhotel h3 {
  background: #c3b49b;
  border-top: 1px solid #f0eade;
}

#myEhotel h3 span {
  display: inline;
  color: var(--error);
}

/*
	Button Box (NoteHotel, BookNow)
*/
#ButtonBox {
  position: absolute;
  top: 0;
  right: 0;
}

#ButtonBox .button {
  padding: 0.25rem 0.75rem;
}

/* 
	Prices
*/
#HotelPricesTabContainer .Hotel-Prices-Tab-Container-Filter {
  padding: 2.5rem 1rem 2rem;
}

#HotelPricesTabContainer .Hotel-Prices-Tab-Container-Filter label {
  font-size: 0.875rem;
  line-height: 1;
}

#HotelPricesTabContainer .input-box input,
#HotelPricesTabContainer .input-box select {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

#HotelPricesTabContainer .info {
  margin: 0;
  padding: 20px 10px 20px 10px;
  font-size: 14px;
  color: var(--primary-accent);
  text-align: left;
}

#HotelPricesBox .filter-item-enabled {
  background-color: inherit !important;
}

.roomrate-list-best-price-box {
  text-align: right;
  margin-bottom: 20px;
  padding: 5px 0 10px 0;
  border-top: 1px solid #798925;
}

.roomrate-list-best-price-icon {
  display: block;
  float: right;
  width: 20px;
  height: 20px;
  width: 20px;
  background-position: -74px -1600px;
}

.roomrate-list-best-price-text {
  display: block;
  float: right;
  color: #798925;
  font-weight: bold;
  color: #798925;
  padding: 3px 0 0 5px;
}

.roomrate-group-header {
  border-top: 10px solid #333;
  padding: 10px;
  font-size: 1.8em;
  font-weight: bold;
  color: #bbb;
}

.roomrate-group .show-box {
  padding: 1em;
  color: var(--primary-accent);
  font-size: 1.2em;
  line-height: 1;
  text-align: center;
  border-top: 2px solid #aaa;
}

.roomrate-group .show-box:hover {
  cursor: pointer;
}

.roomrate-group .show-box i {
  font-size: 1.2em;
  margin-right: 0.4em;
  vertical-align: middle;
}

.roomrate-group.all .show-box .more {
  display: none;
}

.roomrate-group:not(.all) .show-box .fewer {
  display: none;
}

.roomrate-row {
  border-top: 1px solid #333;
  border-bottom: 2px solid #333;
  padding: 12px;
  font-size: 12px;
  line-height: 1.1em;
}

.roomrate-row.disabled {
  opacity: 0.5;
}

.roomrate-group:not(.all) .roomrate-row.hidden {
  display: none;
}

.roomrate-group:not(.all) .roomrate-row.visible:nth-child(even) {
  background-color: #eee;
}

.roomrate-group.all .roomrate-row:nth-child(even) {
  background-color: #eee;
}

.roomrate-row .room-box {
  float: left;
  width: 250px;
  margin-right: 10px;
  text-align: left;
  line-height: 1.5em;
  text-align: left;
}

.roomrate-row .rate-box {
  float: left;
  width: 250px;
  margin-right: 10px;
}

.roomrate-row .price-box {
  float: left;
  width: 190px;
  margin-right: 10px;
  padding-top: 10px;
  text-align: right;
}

.roomrate-row .button-box {
  float: right;
  width: 106px;
  margin-right: 10px;
  padding-top: 50px;
  text-align: right;
}

.roomrate-matrix-provider-column-1 .roomTypeDescription {
  font-size: 1rem;
}

.roomrate-matrix-provider-column-1 .amenitiesDescription {
  padding-top: 10px;
}

.roomrate-matrix-provider-column-1 .amenitiesDescription > span {
  margin-right: 3px;
}

.roomrate-matrix-provider-payment-option {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.roomrate-matrix-payment-note {
  padding-top: 6px;
}

.roomrate-row .cancelPenaltyDescription {
  margin-top: 3px;
}

.roomrate-row .roomDescription img {
  float: right;
}

.button.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.hotel-roomrate-price {
  position: absolute;
  top: 0px;
  right: -80px;
  width: 50px;
  text-align: left;
  color: #cc6633;
}

/*
	Room-Rate-Matrix
*/
div.price-box-table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

div.price-box-tr {
  display: table-row;
}

div.price-box-td-hr {
  clear: both;
  width: 100%;
  background-color: #d1d1d1;
  height: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
}

div.price-box-td {
  display: table-cell;
}
div.price-box-td-label {
  font-style: italic;
}

div.price-box-td-right {
  display: table-cell;
  padding: 2px 5px 3px 20px;
  width: 30%;
}

.price-box-multiplier {
  font-size: 14px;
}

.price-box-inline {
  display: inline-block;
}

@keyframes blink {
  /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
  0% {
    opacity: 0.2;
  }
  /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
  20% {
    opacity: 1;
  }
  /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
  100% {
    opacity: 0.2;
  }
}

.loading-matrix-cell {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 50%;
  width: 100%;
  height: 100%;
  font-size: 4rem;
  color: var(--primary-color);
  opacity: 1;
  z-index: 10;
  letter-spacing: -0.25rem;
  transform: translateY(50%);
}

.loading-matrix-button {
  position: relative;
  top: 0px;
}

.loading-matrix-cell span {
  /**
     * Use the blink animation, which is defined above
     */
  animation-name: blink;
  /**
     * The animation should take 1.4 seconds
     */
  animation-duration: 1.4s;
  /**
     * It will repeat itself forever
     */
  animation-iteration-count: infinite;
  /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
  animation-fill-mode: both;
}

.loading-matrix-cell span:nth-child(2) {
  /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
  animation-delay: 0.2s;
}

.loading-matrix-cell span:nth-child(3) {
  /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
  animation-delay: 0.4s;
}

.matrix-loading-box-header {
  font-size: 1.1em;
  font-weight: bold;
  width: 350px;
}

.matrix-loading-box-progressbar {
  width: 400px;
  height: 15px !important;
}

.matrix-loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.roomrate-matrix-column-empty {
  position: relative;
}

.roomrate-matrix .hotel-roomrate-price {
  right: -10px;
  top: 20px;
  color: #cc6633;
}

.RoomRatesList {
  display: none;
}

.RoomRatesList {
  margin-top: 1rem;
}

.price-overall {
  display: none;
}

.display-price {
  font-weight: 500;
}

.display-price[data-show="price-overall"] .price-overall {
  display: block;
}

.display-price[data-show="price-overall"] .price-per-night-per-room {
  display: none;
}

.display-price[data-show="price-overall"]
  .price-per-night-per-room-highlight
  .currencyPrice {
  font-weight: normal;
  font-size: 14px;
  text-align: right;
}

.display-price[data-show="price-per-night-per-room"]
  .price-overall-highlight
  .currencyPrice {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.display-price[data-show="price-overall"]
  .price-per-night-per-room-highlight
  .currencySensitivePrice {
  font-weight: normal;
  font-size: 14px;
  text-align: right;
}
.display-price[data-show="price-per-night-per-room"]
  .price-overall-highlight
  .currencySensitivePrice {
  font-weight: normal;
  font-size: 14px;
  text-align: right;
}

.firstCurrency.button,
.currencyPrice.button,
.currencySensitivePrice.button {
  line-height: 2;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.currencyPrice:hover .button,
.firstCurrency:hover .button {
  background-color: var(--bg-button-hover);
}

.full {
  display: none;
  min-height: 300px;
}

.roomrate-group.roomrate-matrix-provider-row > div:last-of-type .compact {
  border-bottom: none;
}

.roomrate-compact-and-full[data-show="full"] .full {
  display: flex;
  line-height: 1;
}

.roomrate-compact-and-full[data-show="full"] .compact {
  display: none;
}

.highlighted-cell {
  outline: 2px solid var(--primary-accent);
  outline-offset: -1px;
  color: var(--black-0);
}

.roomrate-matrix-provider-row-compact {
  min-height: 100px;
}

.roomrate-matrix-provider-row-full {
  min-height: 300px;
}

.roomrate-matrix {
  width: 100%;
  border: 0px;
  display: list-item;
}

.roomrate-matrix-body {
  padding: 1rem;
}

.roomrate-matrix-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 1rem;
}

.papa {
  margin-top: 1rem;
}

/* TODO - Temp fix for empy rate rows - mkaesch 18.09.2025 */
.papa:not(:has(.roomrate-matrix-column:not(.roomrate-matrix-column-empty))) {
  display: none;
}

.papa .roomrate-matrix-row {
  border: 2px solid transparent;
  border-radius: var(--border-radius-button);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.25s ease-out;
}

.papa .roomrate-matrix-row:hover {
  box-shadow: 0 0 0 2px var(--primary-accent);
}

.papa .roomrate-matrix-row .selected {
  background-color: var(--hover-price-matrix);
}

.roomrate-matrix-empty-top-left #ChangeDisplayPriceForm {
  transform: translate(4px, -10px);
  color: var(--txt-color);

  /* TOD - Temp fix for average price per room text to long for layout - mkaesch 16.01.2026 */
  max-width: 185px;
  overflow: hidden;
}

.roomrate-matrix-empty-top-left #ChangeDisplayPriceForm #DisplayPriceSelection {
  background-color: var(--bg-component);
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 185px;
}

.roomrate-matrix-empty-heading {
  padding: 0 6px 0.5rem;
}

.roomrate-matrix-container {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
}

.roomrate-matrix-heading {
  display: block;
  width: 100%;
  background-color: var(--bg-hotel-matrix);
  border: var(--border-item-hover);
  border-radius: var(--border-radius-button);
}

.roomrate-matrix-heading p {
  padding: 3px 10px;
  text-align: center;
}

.roomrate-matrix-heading p .fa-utensils {
  margin-right: 0.5rem;
}

.roomrate-matrix-container > .roomrate-matrix-heading {
  width: 100%;
}

.roomrate-matrix-container > .roomrate-matrix-heading:first-of-type {
  border-radius: 0;
  border-bottom-left-radius: var(--border-radius-button);
}

.roomrate-matrix-container > .roomrate-matrix-heading:nth-of-type(2) {
  border-radius: 0;
  border-bottom-right-radius: var(--border-radius-button);
}

.roomrate-matrix-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  grid-row: 1 / -1;
  width: 100%;
  font-size: 1rem;
  background-color: var(--bg-hotel-matrix);
  border: var(--border-item-hover);
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.roomrate-matrix-category .fa-bed:before {
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 900;
  font-style: normal;
  color: var(--txt-color);
  opacity: 0.7;
}

.papa .roomrate-matrix-row:hover .fa-bed:before {
  color: var(--primary-accent);
}

.roomrate-matrix-category .roomrate-matrix-title {
  width: 100%;
  padding: 0.25rem;
  text-align: center;
  background-color: var(--bg-component);
  border-top: 1px solid var(--border-matrix-color);
}

.roomrate-matrix-column {
  display: flex;
  align-items: center;
  width: 100%;
  border: var(--border-item-hover);
  border-radius: calc(var(--border-radius-button) * 1.25);
}

.no-top-border {
  border-top: 0px;
}

.border-left-dashed {
  border-left-style: dashed;
}

.border-right-dashed {
  border-right-style: dashed;
}

.roomrate-matrix-empty-top-left {
  width: 100%;
}

.roomrate-matrix-empty-top-left .change-display-price-box {
  font-size: 0.875rem;
  color: var(--txt-color);
}

.roomrate-matrix-empty-top-left .change-display-price-box label {
  display: block;
}

.roomrate-matrix-heading-category {
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
}

.roomrate-matrix-column-colspan-2 {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  text-align: center;
  border: var(--border-item-hover);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.roomrate-matrix[data-category]
  .roomrate-matrix-column:not(.highlighted-cell):not(:hover),
.roomrate-matrix[data-category]
  .roomrate-matrix-column:not(.highlighted-cell):empty,
.roomrate-matrix[data-category] .roomrate-matrix-empty-heading {
  opacity: 0.4;
}

.roomrate-matrix-column:has(
  .loading-matrix-cell:not([style*="display: none"])
) {
  pointer-events: none;
  user-select: none;
}

.roomrate-matrix-cell-container {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
}

.roomrate-matrix-cell-cheapest-price {
  height: 100%;
}

.roomrate-matrix-cell-cheapest-price-upper {
  width: 100%;
}

.roomrate-matrix-cell-cheapest-price-upper-parent {
  grid-template-columns: 1fr 1fr;
  gap: 0 0.25rem;
}

.papa .roomrate-matrix-cell-cheapest-price-upper-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.roomrate-matrix-cell-container {
  display: grid;
  gap: 0.125rem;
}

.roomrate-matrix-cell-container > div:first-of-type {
  grid-row: 1;
  grid-column: 1 / -1;
}

.roomrate-matrix-cell-cheapest-price-lower {
  grid-row: 3;
}

.roomrate-matrix-cell-container:has(
    .loading-matrix-cell:not([style*="display: none"])
  )
  .roomrate-matrix-cell-cheapest-price-upper-parent {
  filter: blur(2px);
}

.roomrate-matrix-cell-cheapest-price-upper-parent > div,
.roomrate-matrix-cell-cheapest-price-lower > div {
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.roomrate-matrix-cell-cheapest-price-upper-parent > div:hover:has(*),
.roomrate-matrix-cell-cheapest-price-lower > div:hover:has(*) {
  background-color: var(--hover-price-matrix);
  color: var(--black-0);
}

.highlighted-cell .roomrate-matrix-cell-cheapest-price .breakfast {
  color: var(--black-0);
  border-color: var(--black-33);
}

.roomrate-matrix-cell-cheapest-price-lower {
  display: flex;
  gap: 0.25rem;
  width: 100%;
  padding-top: 0.25rem;
  border-top: var(--border-separator);
}

.roomrate-matrix-cell-cheapest-special-price-filler {
  width: 50%;
}

.roomrate-matrix-cell-cheapest-special-price {
  display: grid;
  grid-auto-rows: auto;
  gap: 0.25rem;
  width: 50%;
  padding: 1rem 0.25rem;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}

.provider-info,
.breakfast {
  font-size: 0.75rem;
}

.roomrate-matrix-cell-cheapest-price-link {
  font-size: 1.4em;
  padding-right: 0.5rem;
  width: fit-content;
  border-bottom: var(--border-separator);
}

.roomrate-matrix-cell-cheapest-price-link2 {
  font-weight: bold;
  white-space: nowrap;
}

.roomrate-matrix-cell-cheapest-special-price-container {
  line-height: 1;
  text-align: center;
  width: auto;
  line-height: 2;
}

.roomrate-matrix-cell-cheapest-special-price-hr {
  width: 100%;
  background-color: #d1d1d1;
  height: 1px;
}

.centered-rate {
  margin: 0 auto;
}

.roomrate-matrix-cell-cheapest-price-preferred-hotel {
  position: absolute;
  margin: auto;
  width: 50px;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  align-self: baseline;
}

.room-ameneties {
  top: -2px;
  left: 0;
  position: absolute;
}

.compact {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-bottom: var(--border-separator);
}

.compact.grayout-cell:not(:hover) {
  opacity: 0.4;
}

.roomrate-matrix-provider-row {
  width: 100%;
  position: relative;
}

.roomrate-compact-and-full {
  margin: 0.5rem 0;
  border-radius: var(--border-radius-component);
  overflow: hidden;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.25s ease-out;
}

.roomrate-compact-and-full[data-show="compact"] {
  border: var(--border-default-hidden);
}

.roomrate-compact-and-full[data-show="full"] {
  border: var(--border-separator);
}

.roomrate-compact-and-full:hover {
  box-shadow: 0 0 0 2px var(--primary-accent);
}

.roomrate-compact-and-full:hover .compact,
.roomrate-compact-and-full:has(.highlighted) .compact {
  border-color: transparent;
}

.roomrate-matrix-provider-row-compact:has(.highlighted),
.roomrate-compact-and-full:has(.highlighted) .full {
  color: var(--primary-black);
  background-color: var(--hover-price-matrix);
}

.roomrate-matrix-provider-row-compact:has(.highlighted)
  .internal-provider-info {
  color: #ac4d16;
}

.roomrate-matrix-payment-options-list {
  list-style: decimal;
  list-style-position: inside;
  text-indent: -15px;
  padding-left: 15px;
}

.roomrate-matrix-provider-row .internal-provider-info {
  color: var(--price-highlight);
}

.roomTypeDescription {
  font-size: 0.875rem;
  margin: 6px 0;
}

.roomrate-matrix-provider-column-1,
.roomrate-matrix-provider-column-2,
.roomrate-matrix-provider-column-3,
.roomrate-matrix-provider-column-4,
.roomrate-matrix-provider-column-5 {
  display: table-cell;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
}

.roomrate-matrix-provider-column-1,
.roomrate-matrix-provider-column-2,
.roomrate-matrix-provider-column-3,
.roomrate-matrix-provider-column-5 {
  cursor: pointer;
}

.roomrate-matrix-provider-column-1 {
  width: 20%;
  display: table-cell;
}

.roomrate-matrix-provider-column-1 i {
  float: right;
  color: var(--primary-accent);
  line-height: 0.6;
  margin: 0 0 0.25rem 0.5rem;
  font-size: 1.5rem;
  transform: translateY(-1px);
  transition: transform 0.35s ease-out;
}

.roomrate-compact-and-full:hover .roomrate-matrix-provider-column-1 i {
  transform: scale(1.5) translateY(-2px);
}

.roomrate-matrix-provider-column-2 {
  width: 20%;
  display: table-cell;
}

.roomrate-matrix-provider-column-2 .breakfast {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.roomrate-matrix-provider-column-2 .breakfast-info {
  color: #666;
}

.roomrate-matrix-provider-column-3 {
  width: 30%;
  display: table-cell;
}

.roomrate-matrix-provider-column-4 {
  top: 0px;
  right: 20px;
  text-align: right;
  padding-right: 20px;
}

.roomrate-matrix-provider-column-5 {
  padding: 0 0 0 10px;
  vertical-align: middle;
}

.roomrate-matrix-provider-column-5 .button-box {
  width: 30px;
  text-align: center;
}

.roomrate-matrix-provider-column-5 .button {
  padding: 0.3em;
}

.roomrate-matrix-provider-price-container {
  padding-right: 0px;
  padding-bottom: 4px;
  height: 100%;
}

.provider-price {
  float: left;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  font-weight: bold;
  font-size: 1.27em;
}

.provider-price-advantage {
  float: left;
  width: 50px;
  padding-left: 5px;
  text-align: left;
  color: #cc6633;
}

.arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 180px 0 180px 18px;
  border-color: transparent transparent transparent rgba(58, 184, 68, 0.68);
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  left: 1px;
}

.cancellation-short {
  display: block;
  float: left;
  font-size: 12px;
  line-height: 20px;
}

.rate-box .rateplan-name {
  display: block;
  float: left;
  font-size: 14px;
  line-height: 20px;
}

.disabled .rate-box .detail-box {
  font-size: 90%;
}

.rate-box .detail-label {
  font-size: 11px;
  font-style: italic;
  color: grey;
}

.rate-box .currencySensitivePrice,
.rate-box .firstCurrency,
.rate-box .secondCurrency {
  display: inline;
}

.rate-box .secondCurrency {
  font-size: 11px;
}

.rate-box .detail-cvc {
  float: right;
  font-size: 10px;
  color: #666666;
  padding: 0px 3px;
}

ul.additional-detail-list {
  margin: 0;
  padding: 5px 0 0 15px;
}

ul.additional-detail-list li {
  padding: 0 0 5px 0;
}

ul.additional-detail-list li .highlighted {
  font-weight: bold;
  color: #798925;
}

.disabled ul.additional-detail-list {
  padding: 0 0 8px 0;
}

.disabled ul.additional-detail-list li {
  padding: 0 5px 0 0;
  display: inline;
  font-size: 90%;
  line-height: 1.5em;
}

.disabled ul.additional-detail-list li {
  font-weight: normal;
}

.price-box .price-reference .currencySensitivePrice,
.price-box .price-reference .currencyPrice {
  font-size: 12px;
}

.price-box .currencySensitivePrice,
.price-box .currencyPrice {
  font-weight: bold;
  font-size: 16px;
  text-align: right;
}

.price-box .price-reference .currencySensitivePrice,
.price-box .price-reference .currencyPrice {
  font-weight: normal;
}

.price-box .secondCurrency {
  font-size: 12px;
  font-weight: normal;
  padding-top: 2px;
}

.price-box .totalprice .currencySensitivePrice,
.price-box .totalprice .currencyPrice {
  font-weight: normal;
  font-size: 14px;
  text-align: right;
}

.price-box .totalprice .secondCurrency {
  font-size: 11px;
  font-weight: normal;
}

.roomrate-price-detail-list {
  float: right;
  width: 180px;
  margin: 10px 5px 0 5px;
}

.roomrate-price-detail-list td {
  padding: 0 0 10px 0;
}

.roomrate-border-top td .roomrate-price-detail-list td {
  border: none;
}

.moreRoomRateInfo {
  color: var(--primary-accent);
  white-space: nowrap;
}

.moreRoomRateInfoContent {
  margin-top: 0.75rem;
  line-height: 1.5em;
}

.moreRoomRateInfoContent.roomrate-image-box {
  width: 100%;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  overflow: hidden;
  padding-bottom: 2rem;
}

.moreRoomRateInfoContent .roomrate-more-image {
  display: block;
  border-radius: var(--border-radius-button);
}

.moreRoomRateInfoContent br {
  line-height: 0 !important;
  content: " ";
  display: block;
}

.moreRoomRateInfoContent ul {
  margin: 0;
  padding: 0 0 0 20px;
}

.moreRoomRateInfoContent .currencyPrice,
.moreRoomRateInfoContent .firstCurrency,
.moreRoomRateInfoContent .secondCurrency,
.moreRoomRateInfoContent .currencySensitivePrice {
  display: inline;
}

.moreRoomRateInfoContent .secondCurrency {
  font-size: 90%;
}

/*
	Supplier Text
*/
.supplier-header {
  font-weight: bold;
  text-decoration: underline;
  padding: 6px 0 2px 0;
}

.supplier-text-original-box,
.supplier-text-translation-box {
  display: none;
}

.supplier-text-container.original .supplier-text-original-box,
.supplier-text-container.loading .supplier-text-original-box {
  display: block;
}

.supplier-text-container.translation .supplier-text-translation-box {
  display: block;
}

.original-link-box,
.translation-link-box {
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
}

.supplier-text-container.loading .original-link-box {
  display: none;
}

.supplier-text-container .spinner {
  display: none;
}

.supplier-text-container.loading .spinner {
  display: block;
}

/*
	Room Rate Row
*/
.roomrate-row .preferred {
  text-align: center;
  vertical-align: middle;
  width: 60px;
}

.roomrate-row .roomCount {
  text-align: right;
  vertical-align: middle;
  width: 50px;
}

.roomrate-row .provider-info {
  width: 150px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-weight: bold;
  color: orange;
  text-align: right;
  z-index: 11000;
}

.moreRoomTypesLinkContainer {
  padding: 0 0 10px 5px;
}

.roomrate-image {
  margin: 5px 0;
}

/* die Hoteldaten */
#HotelDataTabContainer table td,
#hotelData table th {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d7cbb7;
  padding: 1px;
  padding-left: 20px;
}

#HotelDataTabContainer table th {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d7cbb7;
  width: 150px;
}

#HotelDataTabContainer ul,
#hotelRoom ul {
  padding: 0;
  margin: 10px 20px 10px 20px;
  list-style: none;
}

/* die Hotelbilder und die Umgebungskarte */
#HotelPicturesTabContainer,
#mapArea {
  background: white;
  padding: 10px 0;
  border: var(--border-separator);
}

#HotelRatingTabContainer {
  border: 1px solid #f0eade;
}

#HotelRatingTabContainer th {
  padding: 2px 10px;
  border-bottom: var(--border-separator);
  border-right: var(--border-separator);
  font-size: 12px;
  font-weight: bold;
}

/*
	Hoteldetails
*/
#HotelDetailsTabContainer {
  clear: both;
  font-size: 13px;
}

#HotelDetailsTabContainer .detail-section {
  padding: 0.25rem;
}

#HotelDetailsTabContainer .detail-section h2 {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-banner-header);
  border-radius: var(--border-radius-button);
}

#HotelDetailsTabContainer .detail-section #acceptedCreditCards {
  float: left;
  width: 300px;
  margin: 0 30px 8px 30px;
}

#HotelDetailsTabContainer .detail-section #acceptedCreditCards p {
  margin: 0 0 2px 0;
  font-weight: bold;
}

#HotelDetailsTabContainer .detail-section #brandLogo img {
  float: right;
  margin: 0 40px 8px 0;
}

ul.hotel-info-amenities {
  padding: 0 1.25rem 0.75rem;
  margin: 0;
  column-count: 3;
  column-gap: 1rem;
  font-size: 0.875rem;
}

ul.hotel-info-amenities li {
  width: 100%;
  padding: 0.25rem 0;
  border-bottom: var(--border-separator);
}

.hotel-info-amenities ul li.lastItem {
  margin-bottom: 8px;
}

#HotelDetailsTabContainer .flag {
  float: left;
  width: 16px;
  height: 11px;
  border: solid 1px #5a4a35;
  margin-top: 1px;
  line-height: 0;
  font-size: 0;
}

#HotelDetailsTabContainer .showText {
  float: left;
  margin-right: 5px;
  font-weight: normal;
}

/* die Grossansicht */
#view {
  float: left;
  position: relative;
  width: 302px;
  background: white;
  border-top: 1px solid #dacfbe;
  border-left: 1px solid #dacfbe;
  border-right: 1px solid #b3a694;
  border-bottom: 1px solid #b3a694;
  text-align: center;
}

#view img {
  padding: 4px;
  width: 292px;
}

#view span {
  position: absolute;
  top: 3px;
  left: 0px;
  padding: 4px;
}

#view a {
  display: block;
  width: 24px;
  height: 22px;
  margin: 2px;
}

#view span.slideLabel {
  width: 208px;
  margin-left: 24px;
  margin-right: 24px;
}

/*
	Hotel Thumbnails
*/
.thumbs img {
  float: left;
  cursor: pointer;
  margin: 5px;
}

/* der Inhalt unter der Subnavigation*/
/* ChangeArrivalDepartureDateComponent ----------------------------------------------*/
/* room rates: check availability */
#CheckAvailability {
  padding: 0 10px 20px 10px;
}

/* room rates: check availability header */
#CheckAvailabilityHeader {
  font-size: 13px;
  font-style: italic;
  padding-bottom: 10px;
}

/* Min and Max Rate Range */
#CheckAvailabilityHeader .currencySensitivePrice,
#CheckAvailabilityHeader .currencyPrice,
#CheckAvailabilityHeader .firstCurrency,
#CheckAvailabilityHeader .secondCurrency {
  display: inline;
}

#CheckAvailabilityHeader .currencySensitivePrice,
#CheckAvailabilityHeader .currencyPrice,
#CheckAvailabilityHeader span.price {
  margin: 0 5px;
}

#CheckAvailabilityHeader .firstCurrency,
#CheckAvailabilityHeader .currencyPrice {
  color: var(--primary-accent);
  font-size: 14px;
  font-weight: bold;
}

#CheckAvailabilityHeader .secondCurrency {
  font-size: 12px;
  font-weight: normal;
}

#ChangeArrivalDepartureDateBox .input {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}

#ChangeArrivalDepartureDateBox .input-box {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
}

#ChangeArrivalDepartureDateBox .input-box label {
  position: absolute;
  top: -1.25rem;
  left: 0.125rem;
}

#ChangeArrivalDepartureDateBox img {
  vertical-align: middle;
  margin-left: 3px;
}

#ChangeArrivalDepartureDateBox input,
#ChangeArrivalDepartureDateBox select {
  font-size: 12px;
}

#ChangeArrivalDepartureDateBox #ChangeArrivalDateField,
#ChangeArrivalDepartureDateBox #ChangeDepartureDateField {
  width: 120px;
}

#ChangeArrivalDepartureDateBox #ChangeArrivalDateIcon,
#ChangeArrivalDepartureDateBox #ChangeDepartureDateIcon {
  vertical-align: top;
  cursor: pointer;
}

#ChangeArrivalDepartureDateForm .litepicker {
  top: 2rem !important;
  left: 0 !important;
}

/* momentan leer, aber mit Padding, damit die Tabelle nicht so am Footer klebt*/
#bottomContent {
  background: none;
}

/* ----- Rating Details */
div#RatingRefersTo {
  font-size: 14px;
  font-weight: bold;
}

ul.ratingTypes {
  float: left;
  margin: 15px 25px 0 0;
  padding: 0 0 0 25px;
}

ul.ratingTypes li {
  margin: 0;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: bold;
}

.hotelMediaRowShortDescription {
  float: left;
  clear: left;
  padding-top: 10px;
  font-size: 13px;
  width: 450px;
  text-align: justify;
}

.hotelInfoDescription {
  clear: left;
  line-height: 20px;
  font-size: 13px;
  padding: 0 40px 10px 40px;
  text-align: justify;
}

.hotelInfoDescription p {
  margin-bottom: 5px;
}

.hotelInfoDescription br {
  line-height: 0;
  content: " ";
  display: block;
}

.hotelInfoDescription ul {
  margin: 0;
  padding: 0 0 5px 15px;
}

.hotelMediaRowRating img {
  vertical-align: middle;
}

.noteHotelLink {
  font-weight: normal;
  margin-left: 10px;
  float: right;
}

#basicInfo .hotelInfoWrapper {
  margin-left: 110px;
}

/*
	HotelInfoDetailsComponent
*/
.hotelInfoAcceptedCreditCards {
  margin: 0 1.25rem 1.5rem 1.5rem;
}
.hotelInfoAcceptedCreditCardsTitle {
  font-size: 1rem;
}

.hotelInfoAcceptedCreditCardsImageContainer {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hotelInfoAboutItem {
  border-bottom: var(--border-separator);
  margin-bottom: 10px;
  line-height: 20px;
  clear: left;
  padding: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.hotelInfoAbout {
  float: left;
  padding: 0px !important;
  margin: 0px !important;
  background: no-repeat !important;
  width: 110px;
}

/*
	Hotel Info - Services
*/
.hotel-info-service-list {
  width: 100%;
  margin-bottom: 15px;
}

.hotel-info-service-list td.hotel-info-service-list-row-1 {
  width: 290px;
  vertical-align: top;
  padding: 0;
}

.hotel-info-service-list td.hotel-info-service-list-row-2 {
  width: 320px;
  vertical-align: top;
  padding: 0;
}

.hotel-info-service-list td.hotel-info-service-list-row-space {
  width: 30px;
  padding: 0;
  line-height: 0;
}

.hotel-info-service-list h3 {
  font-size: 0.875rem;
  text-align: left;
}

.hotel-info-service-sublist {
  width: 100%;
}

.hotel-info-service-sublist th,
.hotel-info-service-sublist td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  vertical-align: top;
  border-bottom: var(--border-separator);
}

.hotel-info-service-list-row-1 .hotel-info-service-sublist th {
  width: 40%;
}

.hotel-info-service-list-row-1 .hotel-info-service-sublist td {
  width: 60%;
}

.hotel-info-service-list-row-2 .hotel-info-service-sublist th {
  width: 60%;
}

.hotel-info-service-list-row-2 .hotel-info-service-sublist td {
  width: 40%;
}

/*
	Hotel Info - Benefit
*/
.hotel-info-benefit-box {
  width: fit-content;
  max-width: 100%;
  padding: 1rem;
  margin: 2rem auto;
  color: var(--txt-color);
  border: 1px solid var(--txt-color);
  border-radius: var(--border-radius-component);
}

.hotel-info-benefit-text-box {
  text-align: left;
  line-height: 1.4em;
}

.hotel-info-benefit-header {
  font-size: 0.875rem;
  font-weight: bold;
}

.hotel-info-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  list-style: disc;
}

#basicInfo {
  position: relative;
  line-height: 20px;
  font-size: 13px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  text-align: justify;
}

#basicInfo .currencyPrice {
  display: inline;
}

/*
	Hotel Rating
*/
.hotel-rating-explanation {
  font-size: 14px;
  padding: 15px 10px 0 10px;
}

.hotel-rating-explanation em {
  font-size: 120%;
  font-weight: bold;
  padding: 0 2px;
}

.hotel-rating-explanation-image {
  width: 126px;
  height: 164px;
  position: relative;
  background-position: -60px -600px;
}

/*
	Hotel Billing Table
*/
table.hotel-billing-list {
  margin-top: 6px;
}

table.hotel-billing-list tr th {
  padding: 0 15px 5px 0;
  vertical-align: top;
}

table.hotel-billing-list tr td {
  padding: 0 0 5px 0;
  vertical-align: top;
}

/*
	Similar Hotels
*/
.similar-hotel {
  padding: 5px 5px 0 5px;
}

.similar-hotel a {
  position: relative;
  display: block;
}

.similar-hotel a .name {
  padding: 2px 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 100%;
  color: #eee;
  background-color: rgba(0, 0, 0, 0.4);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.similar-hotel a .footer {
  background-color: rgba(0, 0, 0, 0.6);
  display: table;
  width: 100%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: white;
}

.similar-hotel a .stars-review {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}

.similar-hotel a .stars-review .stars-css-box {
  padding-right: 10px;
}

.similar-hotel a .stars-review .review {
  font-size: 110%;
  color: #74c706;
}

.similar-hotel a .stars-review .review .total {
  font-size: 80%;
  color: #ddd;
}

.similar-hotel a .price {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  padding: 1px 7px;
  font-size: 120%;
  font-weight: bold;
  font-style: italic;
}

.similar-hotel a .price .currencyPrice,
.similar-hotel a .price .currencySensitivePrice,
.similar-hotel a .price .firstCurrency {
  display: inline;
}

.similar-hotel a .currency {
  font-size: 80%;
  font-weight: normal;
  color: #eee;
}

.booking-template-box {
  display: flex;
}

.booking-template-box .button {
  height: 30px;
  align-self: end;
}

.booking-template-separator {
  font-size: 1pt;
  background-color: rgb(119, 119, 119);
}

.hotelSecurityLevelTextContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.hotelSecurityLevelText {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end;
}

/*
* StakeholderHotelEditRoomRatesComponent
*/
.data-container.deleted .data-index {
  color: var(--error);
  text-decoration: line-through;
}

a.data-link {
  color: darkred;
}

a.data-link:active,
a.data-link:hover {
  color: var(--error);
}

.data-header-link-box {
  float: right;
  padding-top: 0.2em;
}

.data-container.deleted a.data-link-delete {
  display: none;
}

.data-container.undeleted a.data-link-delete {
  display: inline;
}

.data-container.deleted a.data-link-undelete {
  display: inline;
}

.data-container.undeleted a.data-link-undelete {
  display: none;
}

a.data-link-delete,
a.data-link-undelete {
  font-size: 70%;
}

.data-container.deleted a.data-link-undelete {
  display: inline;
}

.data-container.undeleted a.data-link-undelete {
  display: none;
}

a.data-link-delete,
a.data-link-undelete {
  font-size: 70%;
}

/*
* StakeholderHotelDisplayComponent
*/

.stakeholder-hotel .expand,
.stakeholder-hotel.expanded .collapse {
  display: block;
}

.stakeholder-hotel.expanded .expand,
.stakeholder-hotel .collapse,
.stakeholder-hotel.compact .expand,
.stakeholder-hotel.compact .collapse {
  display: none;
}

.stakeholder-hotel-request {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stakeholder-hotel-request-error {
  display: none;
}

.stakeholder-hotel.load-rates .expand-rates,
.stakeholder-hotel .load-rates {
  display: none;
}

.stakeholder-hotel .expand-rates,
.stakeholder-hotel.load-rates .load-rates {
  display: inherit;
}

.stakeholder-hotel .detailed,
.stakeholder-hotel.compact .compact {
  display: none;
}
.stakeholder-hotel.compact .detailed {
  display: block;
}

.stakeholder-hotel.compact .stakeholder-hotel-request-error.expanded,
.stakeholder-hotel.compact .stakeholder-hotel-request.expanded {
  display: none;
}

.stakeholder-hotel.compact .stakeholder-hotel-request-error.compact,
.stakeholder-hotel.compact .stakeholder-hotel-request.compact {
  display: none;
}

.stakeholder-hotel.expanded .stakeholder-hotel-request-error {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stakeholder-hotel-details.show {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stakeholder-hotel-details {
  display: none;
}

.stakeholder-hotel {
  padding-right: 10px;
  padding-bottom: 10px;
}

.stakeholderhotel-matrix-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stakeholderhotel-matrix-first-column-header,
.stakeholderhotel-matrix-column-header,
.stakeholderhotel-matrix-column {
  flex: 0.8;
  padding: 2px;
}

.stakeholderhotel-matrix-column {
  background-color: transparent;
}

.stakeholderhotel-matrix-person-column-header,
.stakeholderhotel-matrix-person-column,
.stakeholderhotel-matrix-first-column {
  flex: 0.4;
  padding: 2px;
}

.stakeholderhotel-matrix-first-column {
  flex: 0.8;
}

.stakeholderhotel-matrix-cell-arrival {
  padding: 2px;
}

.stakeholderhotel-matrix-cell-time {
  margin-top: -10px;
  margin-left: 25px;
}

.stakeholderhotel-filter {
  background-color: #eee;
}

.load-rates-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: black;
}

.load-rates-matrix-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.load-rates-search-input-row {
  margin-bottom: 0.6em;
}

.load-rates-search-arrival-box,
.load-rates-search-departure-box {
  display: table-row;
  vertical-align: top;
  padding-bottom: 0.6em;
}

/*
* StakeholderHotelRateLoaderResultsComponent
*/

.stakeholderhotel-rateloader-result-row-header,
.stakeholderhotel-rateloader-result-row,
.stakeholderhotel-missing-roomrate-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 4px;
}

/* Farbe des Statusbalkens an der Query */

.stakeholderhotel-rateloader-query-status-no_response,
.stakeholderhotel-rateloader-query-status-error_response,
.stakeholderhotel-rateloader-query-status-hotel_not_available_for_sale,
.stakeholderhotel-rateloader-query-status-different_contracted_room_rates,
.stakeholderhotel-rateloader-query-status-no_public_or_contracted_rates.no-public {
  margin-top: -8px;
  border-bottom: 4px solid transparent;
  position: relative;
}
.stakeholderhotel-rateloader-query-status-no_public_or_contracted_rates,
.stakeholderhotel-rateloader-query-status-bad_rates,
.stakeholderhotel-rateloader-query-status-rates_expected_but_missing {
  margin-top: -8px;
  border-bottom: 4px solid red;
  position: relative;
}

.stakeholderhotel-rateloader-query-status-all_matching_rates {
  margin-top: -8px;
  border-bottom: 4px solid green;
  position: relative;
}

.stakeholderhotel-rateloader-query-status-no_response:after,
.stakeholderhotel-rateloader-query-status-error_response:after,
.stakeholderhotel-rateloader-query-status-hotel_not_available_for_sale:after,
.stakeholderhotel-rateloader-query-status-no_public_or_contracted_rates.no-public:after {
  content: "";
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      #ff0000 5px,
      #ff0000 10px
    ),
    linear-gradient(to bottom, #f77, #fee);
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.stakeholderhotel-rateloader-query-status-different_contracted_room_rates:after {
  content: "";
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      #060 5px,
      #060 10px
    ),
    linear-gradient(to bottom, #4f4, #efe);
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.stakeholderhotel-rateloader-query-tool-tip {
  border-bottom: solid 2px red;
}
.stakeholderhotel-rateloader-query-tool-tip.public {
  border-bottom: solid 2px green;
}
.stakeholderhotel-rateloader-query-tool-tip.contracted {
  border-bottom: solid 2px green;
}
.stakeholderhotel-rateloader-query-tool-tip.contracted.different {
  border-bottom: solid 2px darkorange;
}

/* Farbe des Statusbalkens an der Rate */

.stakeholderhotel-rateloader-result-row-additional,
.stakeholderhotel-rateloader-result-row-none,
.stakeholderhotel-rateloader-result-row-unmatched,
.stakeholderhotel-rateloader-result-row-matched {
  border-top: 1px solid #bdbdbd;
}

.stakeholderhotel-rateloader-result-row-additional,
.stakeholderhotel-rateloader-result-row-matched {
  cursor: pointer;
}

.stakeholderhotel-rateloader-result-row-additional,
.stakeholderhotel-rateloader-result-row-none {
  color: black;
}

/* Hintergrungfarbe der Query bei Selektion */

.stakeholderhotel-rateloader-results-background-no_response,
.stakeholderhotel-rateloader-results-background-error_response,
.stakeholderhotel-rateloader-results-background-no_public_or_contracted_rates,
.stakeholderhotel-rateloader-results-background-hotel_not_available_for_sale,
.stakeholderhotel-rateloader-results-background-rates_expected_but_missing,
.stakeholderhotel-rateloader-results-background-bad_rates,
.stakeholderhotel-rateloader-results-background-different_contracted_room_rates,
.stakeholderhotel-rateloader-results-background-all_matching_rates {
  background-color: #eee;
  color: black;
}

.stakeholderhotel-rateloader-results-IN_PROGRESS {
  background-color: lightblue;
  color: black;
}

.stakeholderhotel-rateloader-result-column {
  flex: 1;
  align-self: end;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 5px;
}

.stakeholderhotel-rateloader-result-price-column {
  flex: 1.4;
  align-self: end;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 50px;
}

.stakeholderhotel-rateloader-result-column.matched,
.stakeholderhotel-rateloader-result-column-amount.matched {
  color: green;
}

.stakeholderhotel-rateloader-results {
  width: 100%;
}

.rateloader-result-text-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.rateloader-result-text-first-column {
  width: 130px;
}
.rateloader-result-text-column {
  flex: 1;
}

.rateloader-result-label {
  color: #757575;
  font-size: 12px;
  line-height: 1;
}

.rateloader-result-details-amount,
.rateloader-result-details-breakfast,
.rateloader-result-details-refundable,
.rateloader-result-details-room-type,
.rateloader-result-details-room-type-group,
.rateloader-result-details-provider,
.rateloader-result-details-short-provider,
.rateloader-result-details-short-internal-provider,
.rateloader-result-details-provider-code,
.rateloader-result-details-provider-hotel-id,
.rateloader-result-details-provider-rate-description {
  color: #222;
}
.rateloader-result-details-room-type-group {
  font-size: 0.9em;
  margin-top: -6px;
}

.rateloader-result-details-provider-rate-description {
  font-size: 0.9em;
}
.rateloader-result-details-provider-rate-description-section {
  margin-bottom: 12px;
}

.load-rates-in-progress {
  background-color: #eee;
}

/*
	Hotel Awards
*/

.hotel-awards-container {
  padding: 1.9rem 2rem 0;
}

.hotel-award-container {
  padding-bottom: ·5rem;
}

.award-image {
  width: 148px;
  min-width: 148px;
}

.award-texts {
  padding: 1rem 0.5rem;
  font-size: 14px;
}

.award-texts p {
  margin-bottom: 0.4em;
  text-align: justify;
}

.award-header {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0.5em;
}

.myehotel.loyaltyprogram {
  font-size: 14px;
}

.loyalty-suggestion-container {
  display: flex;
}

.loyalty-suggestion {
  width: 150px;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
}

.comma-separated-loyalty-suggestion:not(:first-child):before {
  content: ", ";
}

/* remove extra space before the comma */
.comma-separated-loyalty-suggestion:not(:first-child) {
  margin-left: -0.3em;
}

.marketingprogram img {
  box-shadow:
    10px 6px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 8px;
}

.marketing-stakeholder-header {
  padding-bottom: 1rem;
}
/*
	CSS-Styles for HotelInfoComponent
*/
.hotel-info-hotel-box {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: var(--bg-component);
}

.hotel-info-hotel-box.flex {
  grid-template-columns: 300px 1fr 1fr;
  gap: 0;
  padding: 0;
  color: var(--txt-color);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

.hotel-info-hotel-box.flex > div:not(:first-of-type) {
  padding: 0.75rem;
}

.hotel-info-hotel-box.flex .currencyPrice {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.hotel-info-hotel-stars {
  margin-top: 0.5rem;
  --hotel-star-size: 1.5rem;
}

.hotel-info-hotel-stars:has(.star-0) {
  margin-top: 0 !important;
}

.hotel-info .hotel-info-hotel-stars .star-0 {
  --hotel-star-size: 1rem;
}

.hotel-info .hotel-info-hotel-stars {
  margin-top: 0.25rem;
}

.hotel-info-hotel-image {
  display: block;
}

.hotel-image-gallery {
  max-width: 100%;
  margin-bottom: 1rem;
  padding: 0 0.75rem 0.75rem;
  background-color: var(--bg-component);
  border-bottom-left-radius: var(--border-radius-component);
  border-bottom-right-radius: var(--border-radius-component);
  overflow: hidden;
}

.hotel-image-gallery .data-row {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 0.25rem;
}

.hotel-image-gallery .data-cell.image {
  position: relative;
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.hotel-image-gallery .data-cell.image::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0.5rem;
  z-index: 10;
  content: "\f065";
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 900;
  color: var(--white-100);
  opacity: 0.4;
  transition:
    opacity 0.2s ease-in-out,
    font-size 0.2s ease-in-out;
}

.hotel-image-gallery .data-cell.image:hover::before {
  font-size: 2.25rem;
  opacity: 1;
}

.hotel-image-gallery .data-cell.image .draggable {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

.hotel-image-gallery .data-cell.image:hover .draggable {
  transform: scale(1.025);
}

.hotel-image-gallery .slick-slider {
  margin: 0;
  cursor: pointer;
}

.hotel-image-gallery .slick-list.draggable {
  outline: var(--outline3);
}

.data-cell .thumb-gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  height: 100%;
}

.data-cell .image {
  width: 604px;
  height: 458px;
  overflow: hidden;
}

.thumb-gallery a {
  line-height: 0;
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.thumb-gallery a img {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

.thumb-gallery a:hover img {
  transform: scale(1.05);
}

.thumb-gallery a:last-of-type {
  grid-row: 3;
  grid-column: 2;
}

.thumb-gallery .image-amount {
  width: min-content;
  height: min-content;
  display: block;
  grid-row: 3;
  grid-column: 2;
  margin: 0 0 0 auto;
  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--white-100);
  background-color: var(--primary-color);
  border-bottom-left-radius: var(--border-radius-component);
  border-top-right-radius: var(--border-radius-button);
  z-index: 10;
}

/* 
  LIGHT BOX GALLERY
*/
.ehotel-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ehotel-lightbox.is-open {
  display: flex;
  align-items: center;
  overflow: auto;
  overscroll-behavior: contain;
}

/* prevent backgbround scroll when gallery is open */
html:has(.ehotel-lightbox.is-open),
body:has(.ehotel-lightbox.is-open) {
  overflow: hidden;
}

.ehotel-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.ehotel-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 94dvh;
  width: min(150dvh, 94vw);
  margin: 8px auto;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-component);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.125);
}

.ehotel-lightbox-image-wrapper {
  display: grid;
  grid-template-rows: 108fr 20fr;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  height: 100%;
}

.ehotel-lightbox-image-wrapper .image-pagination-info {
  padding: 0 0.5rem;
  width: max-content;
  grid-row: 1;
  grid-column: 1;
  height: fit-content;
  margin-bottom: 0.5rem;
  align-self: end;
  justify-self: center;
  font-size: 1rem;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-component);
  color: var(--white-100);
  z-index: 5;
  user-select: none;
}

.ehotel-lightbox-image-wrapper .lightbox-slider {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--border-radius-component) * 0.7);
  overflow: hidden;
}

.ehotel-lightbox-image-wrapper .lightbox-slider .slide-track {
  height: 100%;
  white-space: nowrap;
}

.ehotel-lightbox-image-wrapper .lightbox-slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: var(--bg-icon-active);
  overflow: hidden;
}

/* THUMBNAILS */
.lightbox-thumbs {
  grid-row: 2;
  width: 100%;
  overflow: hidden;
}

.ehotel-lightbox-image-wrapper .lightbox-thumbs .slick-list {
  height: 100%;
  margin: 0 0 0 -6px;
}

.ehotel-lightbox-image-wrapper .lightbox-thumbs .slick-slide .thumbs-wrapper {
  height: 100%;
  padding-left: 6px;
}

.lightbox-thumbs img {
  width: calc(100% - 2px);
  height: auto;
  display: block;
  background-color: var(--bg-icon-active);
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.ehotel-lightbox-image-wrapper .lightbox-thumbs .slick-current img {
  border: 2px solid var(--primary-color);
}

/* Buttons */
.ehotel-lightbox-close,
.ehotel-lightbox-prev,
.ehotel-lightbox-next {
  position: absolute;
  font-size: 4rem;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-component);
  color: var(--black-0);
  cursor: pointer;
  z-index: 1000;
}

.ehotel-lightbox-close:hover,
.ehotel-lightbox-prev:hover,
.ehotel-lightbox-next:hover {
  color: var(--primary-color);
}

.ehotel-lightbox-close {
  top: 1rem;
  right: 1rem;
  font-size: 3.5rem;
  line-height: 0.625;
}

.ehotel-lightbox-prev,
.ehotel-lightbox-next {
  top: 50%;
  transform: translateY(-60%);
}

.ehotel-lightbox-prev {
  left: 1rem;
}

.ehotel-lightbox-next {
  right: 1rem;
}

/*
	Hotel Info
*/
.hotel-name {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--txt-color);
}

.hotel-name .fa-external-link {
  font-size: 1rem;
}

.hotel-info-hotel-address-box {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--txt-color);
}

.hotel-info-hotel-rating-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  color: var(--txt-color);
}

.hotel-info-hotel-rating-box > :last-child {
  margin-left: auto;
  font-size: 1.25rem;
}

.hotel-info-hotel-rating-box .review-speech-bubble {
  font-size: 1rem;
  margin: 0;
}

.hotel-info-hotel-rating-box .review-count {
  color: var(--txt-color);
}

.hotel-info-hotel-rating-box .awardprograms-icons-container img {
  margin-right: 4px;
}

.hotel-info-hotel-service-box {
  display: flex;
  gap: 1rem;
}

.hotel-info-hotel-box.flex .hotel-info-hotel-service-box {
  margin-top: 1rem;
}

.hotel-info-hotel-services {
  display: flex;
  gap: 0.5rem;
}

.hotel-info-hotel-services .service-item {
  width: 1.75rem;
  display: flex;
  justify-content: center;
}

.hotel-info-hotel-distances {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  color: var(--txt-color);
}

.hotel-info-hotel-distances .distance-item {
  display: flex;
  justify-content: center;
  width: 26px;
}

.hotel-info-hotel-distances .distance-item-value {
  font-size: 0.875rem;
}

.hotel-info-hotel-billing-awards {
  display: flex;
  gap: 0.75rem;
}

.hotel-info-hotel-additional-box table {
  margin: 0 0 0 auto;
  line-height: 1.5;
}

.hotel-info-hotel-rating-box .sustainable-marker-container {
  display: inline-block;
}

/*
	Tabs
*/
#mainTabContainer,
#mainTabContainer .hasDatepicker {
  font-family: "Roboto", sans-serif;
}

#mainTabContainer a.button {
  color: var(--white-100);
}

#mainTabContainer.ui-widget-content {
  border: none !important;
  background: transparent;
  color: inherit;
}

#mainTabContainer.ui-tabs {
  padding: 0;
}

#mainTabContainer.ui-tabs .ui-tabs-panel {
  min-height: 30rem;
  padding: 0;
  color: var(--txt-color);
  background: var(--bg-component);
  border-top-right-radius: var(--border-radius-component);
  border-bottom-left-radius: var(--border-radius-component);
  border-bottom-right-radius: var(--border-radius-component);
  overflow: hidden;
}

#mainTabContainer.ui-tabs #HotelMapTabContainer.ui-tabs-panel {
  padding: 0.25rem;
}

#MapBoxHotelMap {
  border-radius: var(--border-radius-button);
  border-top-left-radius: 0;
  overflow: hidden;
}

#mainTabContainer li {
  margin-right: 0.5rem;
}

#mainTabContainer li.ui-state-default {
  border: 0;
  background: var(--bg-tablist-navigation);
  overflow: hidden;
}

#mainTabContainer li.ui-state-default a {
  font-size: 0.875rem;
  color: var(--txt-tablist-navigation);
}

#mainTabContainer li.ui-state-default:hover a {
  color: var(--txt-tablist-navigation-hover);
  background-color: var(--bg-tablist-navigation-hover);
}

#mainTabContainer li.ui-state-active {
  margin-bottom: 0;
  padding-bottom: 0;
  background-color: var(--bg-tablist-navigation-active);
}

#mainTabContainer li.ui-state-active a {
  color: var(--txt-tablist-navigation-active);
  font-weight: 500;
}

#mainTabContainer .change-currency-box {
  position: absolute;
  top: 3px;
  right: 170px;
}

#mainTabContainer .change-currency-box label {
  color: var(--white-100);
}

/* 
	Hotel Tab Prices
*/
#HotelPricesTab.current span.hotel-tab-icon-prices {
  background-position: 0px -600px;
}

#HotelPricesTab span.hotel-tab-icon-prices {
  background-position: -26px -600px;
}

/*
	Hotel Tab Details
*/
#HotelDetailsTab.current span.hotel-tab-icon-details {
  background-position: 0px -622px;
}

#HotelDetailsTab span.hotel-tab-icon-details {
  background-position: -26px -622px;
}

/*
	Hotel Tab Map
*/
#HotelMapTab.current span.hotel-tab-icon-map {
  background-position: 0px -666px;
}

#HotelMapTab span.hotel-tab-icon-map {
  background-position: -26px -666px;
}

/*
	Hotel Tab Rating
*/
#HotelRatingTab.current span.hotel-tab-icon-rating {
  background-position: 0px -688px;
}

#HotelRatingTab span.hotel-tab-icon-rating {
  background-position: -26px -688px;
}

/*
	Room Rate Tabs
*/
.roomRateTabLabels {
  margin-top: 20px;
  height: 30px;
  background: #826d52;
  border-bottom: 1px solid #f2eee3;
}

.roomRateTabLabels .tab {
  float: left;
  height: 30px;
  padding: 0 25px 0 10px;
  border-right: 1px solid #f2eee3;
  border-bottom: 1px solid #f2eee3;
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  cursor: pointer;
}

.roomRateTabLabels .tab.current {
  background: #9b8971;
  border-bottom: 1px solid #9b8971;
}

/* 
	rate plan type 
*/
.hotel-rateplantypes {
  width: fit-content;
}

.hotel-rateplantypes .rateplantype-info {
  margin-top: 0.25rem;
}

.hotel-cheapest-rate-plan-type-container .rateplantype-info {
  text-align: center;
  line-height: 1.4;
}
.list {
  padding: 10px 5px;
}

tr.listRow:hover {
  background-color: #f0f0f0;
}

tr.listRow:hover a.deleteSingle {
  display: inline;
  border-color: white grey grey white;
  border-left: 1px solid white;
  border-style: solid;
  border-width: 1px;
}

tr.listRow a.deleteSingle {
  display: none;
  font-size: 8px;
  font-weight: bold;
  background-color: var(--error);
  color: white;
  padding: 1px 1px;
  text-decoration: none;
}

tr.listRow {
  width: 150px;
  table-layout: fixed;
}

td.listCell {
  border-bottom: 1px solid #c3b49b;
  padding: 3px;
  table-layout: fixed;
}

.deleteAllLink {
  padding-top: 5px;
  font-weight: bold;
  font-size: 10px;
}

.isAdvanced {
  padding-top: 10px;
}
.isAdvanced a {
  float: right;
}
/*
	IntlTelInput
*/
.iti__flag {
  background-image: url("../intl-tel-input-17.0.18/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("../intl-tel-input-17.0.18/img/flags@2x.png");
  }
}

/*
	Linebreak
*/
br {
  line-height: 0;
}

/*
	Flex Layout
*/
.flex {
  display: flex;
}

.flex-space-between {
  justify-content: space-between;
}

.flex-space-around {
  justify-content: space-around;
}

/*
	JQuery UI
*/
.ui-autocomplete {
  z-index: 900 !important;
  font-size: 1rem;
  background-color: var(--bg-component);
}

.ui-autocomplete a {
  color: var(--txt-color);
}

.ui-autocomplete span.customerPoi {
  color: var(--price-free-cancel);
}

.ui-datepicker {
  z-index: 900 !important;
  font-size: 0.75rem;
}

.ui-datepicker-trigger {
  padding: 0;
  min-height: 1.5rem;
  width: 1.6rem;
  background-color: var(--bg-component);
  background-image: url("../img/calendar.svg");
  background-repeat: no-repeat;
  border: none;
  border-radius: var(--border-radius-button);
}

[data-theme="dark"] .ui-datepicker-trigger {
  background-image: url("../img/calendar-white.svg");
}

.ui-datepicker-trigger:hover {
  background-image: url("../img/calendar-blue.svg");
}

.ui-datepicker-trigger > img {
  display: none;
}

.ui-dialog {
  font-size: 0.875rem;
  color: var(--txt-color);
}

.ui-widget-overlay {
  background: #333 !important;
}

.ui-widget-content a.button {
  color: white;
}

/*
	Tooltip
*/
.tooltiptext {
  display: none;
  position: relative;
}

a.tooltip-close {
  display: block;
  position: absolute;
  top: -8px;
  right: 0;
  color: #999;
  font-size: 18px;
}

a.tooltip-close:hover {
  color: #666;
}

.qtip {
  width: fit-content !important;
  max-width: 500px !important;
  border-color: var(--border-separator-color);
  background-color: var(--bg-component) !important;
  color: var(--txt-color);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.qtip-bootstrap {
  font-size: inherit !important;
  border-radius: var(--border-radius-component) !important;
  overflow: hidden;
}

.qtip-bootstrap .qtip-content {
  padding: 0.5rem;
}

.qtip-nopadding .qtip-content {
  padding: 0 !important;
}

.qtip-content .toolTip {
  width: fit-content !important;
}

/* 
 * LANGUAGE SELECT OVERRIDES
 */

.locale-selector {
  position: relative;
  margin-left: 1rem;
  padding: 2px 5px;
  font-weight: bold;
  color: var(--white-100);
  background-color: var(--bg-selector);
}

.locale-selector-tooltip .language {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

.locale-selector,
.currency-selector {
  border: 1px solid var(--bg-selector);
  border-radius: var(--border-radius-button);
  cursor: pointer;
  overflow: hidden;
}

.qtip-content:has(.locale-selector-tooltip) {
  padding: 0.5rem;
}

.locale-selector:hover {
  border-color: var(--primary-color);
}

.locale-selector .language {
  display: inline-block;
  padding: 0 2em;
}

.locale-selector i.fa-caret-down {
  color: var(--primary-color);
  font-size: 150%;
  vertical-align: middle;
}

.locale-selector-tooltip {
  display: none;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: normal;
}

.locale-selector-tooltip > ul {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.locale-selector-tooltip li {
  font-size: 0.875rem;
  text-transform: capitalize;
}

.locale-selector-tooltip li a {
  color: var(--txt-color);
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--bg-component);
  border-radius: var(--border-radius-button);
}

.locale-selector-tooltip li:hover a {
  background-color: var(--hover-price-matrix);
  color: var(--black-0);
  box-shadow: 0 0 0 2px var(--primary-accent);
}

/* 
 * CURRENCY SELECT OVERRIDES
 */
.currency-selector {
  position: relative;
  margin-left: 1rem;
  padding: 0.125rem 0.25rem;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--white-100);
  background-color: var(--bg-selector);
  border: 1px solid var(--bg-selector);
  cursor: pointer;
}

.currency-selector:hover {
  border-color: var(--primary-color);
}

.currency-selector .currency {
  display: inline-block;
  padding: 0 2em;
}

.currency-selector i.fa-caret-down {
  color: var(--primary-color);
  font-size: 150%;
  vertical-align: middle;
}

.qtip:has(.currency-selector-tooltip) {
  max-width: none !important;
  font-size: 0.75rem;
}

.currency-selector-tooltip .currency-selector-tooltip-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.currency-selector-tooltip .currency-selector-tooltip-title:nth-of-type(2) {
  margin-top: 0.5rem;
}

.currency-selector-tooltip ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.125rem;
}

.currency-selector-tooltip ul:first-of-type {
  border-bottom: var(--border-separator);
}

.currency-selector-tooltip {
  display: none;
  width: fit-content;
  font-weight: normal;
}

.currency-selector-tooltip li {
  padding: 0.25rem 0.5rem;
  border: var(--border-default-hidden);
  border-radius: var(--border-radius-button);
  border-width: 2px;
}

.currency-selector-tooltip li a {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.5rem;
  color: var(--txt-color);
}

.currency-selector-tooltip li.selected {
  border-color: var(--primary-color);
}

.currency-selector-tooltip li:hover {
  background-color: var(--hover-price-matrix);
  box-shadow: 0 0 0 2px var(--primary-accent);
}

.currency-selector-tooltip li:hover a * {
  color: var(--black-0);
}

.currency-selector-tooltip .currency-symbol {
  font-weight: 500;
}

.currency-selector-tooltip .currency-name {
  color: var(--txt-color);
}

/*
	Main Content
*/

div.main-content {
  background-color: var(--bg-page);
}

.main-content__wrapper {
  display: flex;
  font-size: 0.875rem;
  padding-bottom: 200px;
}

.sidebar {
  min-width: 270px;
  width: 270px;
  display: flex;
  flex-direction: column;
}

.main-content__wrapper > div.content {
  width: 100%;
  margin-left: 1rem;
  border-top-left-radius: var(--border-radius-component);
  border-top-right-radius: var(--border-radius-component);
  overflow: hidden;
}

.content-box {
  margin-bottom: 16px;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

.content-box.static-content-box {
  padding: 0 2em 2em 2em;
}

.static-content-box h2 {
  padding: 1.5em 0 1em 0;
}

.static-content-box h3 {
  padding: 1.5em 0 1em 0;
}

.static-content-box h4 {
  padding: 1em 0 0.8em 0;
}

.static-content-box p {
  padding: 0.5em 0 0.5em 0;
}

/*
	Stars
*/
.star {
  line-height: 1;
  color: var(--bg-stars);
}

.star:before {
  content: "";
  height: var(--hotel-star-size);
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../img/assets/img/icons/hotel_star.svg") repeat-x;
  mask: url("../img/assets/img/icons/hotel_star.svg") repeat-x;
  mask-size: auto;
  -webkit-mask-size: var(--hotel-star-size) auto;
  mask-size: var(--hotel-star-size) auto;
}

.hotel-compact-list-row .star:before,
.map-marker-ehotel .star:before,
.star-selection-box .star:before,
.filter-item-box .star:before {
  transform: translateY(4px);
}

.star.star-0 {
  color: var(--txt-color);
  height: var(--hotel-star-size);
}

.star-1:before {
  width: var(--hotel-star-size);
}

.star-2:before {
  width: calc(var(--hotel-star-size) * 2);
}

.star-3:before {
  width: calc(var(--hotel-star-size) * 3);
}

.star-4:before {
  width: calc(var(--hotel-star-size) * 4);
}

.star-5:before {
  width: calc(var(--hotel-star-size) * 5);
}

/*
	Button
*/
.button {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--txt-button);
  background: var(--bg-button);
  border-radius: var(--border-radius-button);
  text-transform: capitalize;
}

.button::before {
  font-weight: 900;
}

.fa-arrow-right.button {
  position: absolute;
  right: -20px;
  top: 12px;
  padding: 0px 0.5rem 0 0.25rem;
  font-size: 1.125rem;
  line-height: 2;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--border-radius-button);
  border-bottom-right-radius: var(--border-radius-button);
}

.button:hover,
.button:active {
  background: var(--bg-button-hover);
  color: var(--white-100);
}

.button-flat {
  display: inline-block;
  color: var(--primary-accent);
  padding: 0 8px;
  min-width: 88px;
  line-height: 36px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  border-radius: 2px;
}

.button-flat:hover,
.button-flat:active,
.button-flat:focus {
  background-color: var(--primary-accent) !important;
  color: white !important;
}

.button-box {
  padding-top: 12px;
}

/*
	Field Validation Error
*/
label.validation-error {
  color: var(--primary-color);
}
/*
	Autocompleter Destination
*/
.ui-autocomplete {
  width: fit-content !important;
  margin-top: 1.25rem;
  padding: 0.25rem;
  font-family: "Roboto", sans-serif;
  border: var(--border-separator);
  border-radius: var(--border-radius-component);
  border-top-right-radius: 0;
  overflow: hidden;
}

.ui-autocomplete .autocompleter-list-item.ui-menu-item {
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: none;
}

.ui-autocomplete .autocompleter-list-item.ui-menu-item.ui-state-focus {
  border: none;
  background: var(--hover-price-matrix);
  border-radius: var(--border-radius-button);
}

.ui-autocomplete .autocompleter-list-item.ui-menu-item:hover {
  background: var(--hover-price-matrix);
  border-radius: var(--border-radius-button);
}

.ui-autocomplete .autocompleter-list-item.ui-menu-item:hover a {
  color: var(--black-0);
}

.autocompleter-list-item .flag {
  display: inline-block;
}

.autocompleter-list-item .icon-refpoint-small {
  display: inline-block;
}

/* 
	rate plan type 
*/

.rateplantypes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.9em;
}

.hotel-compact-list-row .rateplantypes-container,
.hotelMediaRow .rateplantypes-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.rateplantype-info {
  padding: 0.25rem 0.25rem 0.1rem;
  line-height: 1.25;
  color: var(--bg-component);
  background-color: var(--txt-color);
  border-radius: var(--border-radius-button);

  /* can be made visible via profile css setting */
  display: none;
}

.rateplantype-title {
  /* hidden by default, shown in SearchResultPage.html with a jquery */
  display: none;
  margin-right: 4px;
  color: var(--txt-color);
}
/* 
MapBox 
*/
#MapBoxCityMap #MapBox {
  height: 495px;
  border-radius: var(--border-radius-component);
}

#MapLoading {
  height: 495px;
  margin-bottom: 15px;
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
}

.map-loading-content {
  text-align: center;
  position: relative;
  top: 250px;
}

#MapBoxCityMap {
  margin-bottom: 15px;
}

#MapBoxHotelMap #MapBox {
  height: 65vh;
}

.mapbox-improve-map {
  display: none;
}

#GeoMap .mapboxgl-ctrl-top-right {
  top: 36px !important;
}

.map-marker-ehotel {
  position: relative;
  padding: 5px;
  line-height: 1.5;
  background-color: whitesmoke;
  color: black;
  display: inline-block;
  border-radius: 3px;
  border: none;
  width: auto;
}

.map-marker-ehotel-tip {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid whitesmoke;
  margin: 0 auto;
}

.stars-css-box {
  display: inline;
  margin-left: 10px;
}

.price-css-box {
  display: inline;
  margin-left: 10px;
}

.distance-css-box {
  display: inline;
  color: black;
  margin-left: 10px;
}

.marker-price {
  color: var(--black);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* override zoom class*/
.map-marker-ehotel-zoom > .map-marker-ehotel {
  display: none;
}

.map-marker-ehotel-zoom > .map-marker-ehotel-tip {
  border: 5px solid #e31f21;
  border-radius: 5px;
}

/* override default popup behavoir */
.mapboxgl-popup-content {
  background-color: whitesmoke !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.map-marker-ehotel-thumbnail {
  display: table-cell;
  vertical-align: top;
}
.map-marker-ehotel-content {
  display: table-cell;
  padding-left: 10px;
  vertical-align: top;
}

.mapboxgl-popup {
  transform: none !important;
  top: 10px;
  position: relative;
  margin: 0 auto;
  width: 400px !important;
  max-width: 400px !important;
  min-width: 300px !important;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  display: none !important;
}
.myehotel {
  margin-bottom: 10px;
  font-size: 0.875rem;
  border-radius: 8px;
  color: var(--txt-color);
  background: var(--bg-component);
  overflow: hidden;
}

.myehotel h3 {
  margin-top: 0;
  padding: 5px 10px;
  font-size: 1.2em;
  font-weight: 500;
  background: var(--bg-banner-header);
}

.myehotel .blockLine.extra {
  margin-top: 10px;
}

.myehotel-new h4 {
  text-transform: capitalize;
}

.myehotel .section .titel {
  width: auto;
  max-width: 16rem;
}

.myehotel .booking-input-box {
  display: flex;
  gap: 1rem;
}

.myehotel .booking-input-box h5 {
  width: max-content;
  margin: 0;
}

.myehotel .booking-number-box,
.myehotel .booker-name-box {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.myehotel .booking-number-box input {
  padding: 0.125rem 0.5rem;
}

.myehotel.myehotel-reservation td input[type="text"] {
  height: 2rem;
}

.myehotel .booker-name-box input {
  min-width: 300px;
  padding: 0.125rem 0.5rem;
}

.myehotel .booker-name-box h5,
.myehotel .booker-name-box h5 label {
  margin: 0;
  line-height: 1;
}

.myehotel .booking-second-box {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.myehotel .booking-radio-box {
  padding: 0;
}

.myehotel .booking-radio-box > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.myehotel .myehotel-reservation #RadioGroup div:first-of-type > input {
  margin-bottom: 0.25rem;
}

.myehotel .myehotel-reservation .ui-datepicker-trigger {
  width: 1.8rem;
  min-height: 2.5rem;
}

.myehotel .booking-date-input {
  text-align: center;
}

.myehotel .booking-search-button {
  margin-left: 2rem;
}

.myehotel .litepicker {
  top: 110px !important;
  left: 0px !important;
}

.myehotel .litepicker .month-item-year {
  padding: 0.375rem !important;
}

.blockLine.myehotel-commercial-check label {
  display: flex;
  font-weight: normal !important;
}

.section table.myehotel-links td {
  padding: 10px 30px 15px 15px;
}

.creditcard-action-confirm span.label {
  text-transform: capitalize;
  margin-right: 20px;
}

.creditcard-action-confirm a {
  text-transform: capitalize;
  color: inherit;
}

.creditcard-action-confirm a:hover {
  color: #e31f21;
}

/*
	MyEhotel - Reservations
*/
.section.section-myehotel-reservation {
  padding: 0 0 20px 0;
}

.section.section-myehotel-reservation .secondCurrency {
  color: grey;
  font-size: 80%;
  display: block;
}

#hotelReservationList {
  width: 100%;
  background: #fff;
  line-height: 16px;
}

#hotelReservationList th {
  background: #bbb;
  padding: 10px 5px 10px 5px;
  margin: 0;
  border-right: 1px solid #f0eade;
  font-weight: normal;
}

#hotelReservationList th.myehotel-reservation-traveler {
  min-width: 180px;
}

#hotelReservationList th.myehotel-reservation-arrivaldeparture {
  padding-top: 1px;
  padding-bottom: 1px;
  width: 80px;
}

#hotelReservationList th.myehotel-reservation-hotel {
  min-width: 150px;
}

#hotelReservationList .right {
  text-align: right;
}

#hotelReservationList td {
  padding: 8px 5px 8px 5px;
  vertical-align: top;
  border-bottom: 1px solid #bbb;
}

#hotelReservationList .myehotel-reservation-phone {
  font-size: 0.85em;
  margin-top: 2px;
}

#hotelReservationList .traveler-name {
  font-size: 110%;
  margin-bottom: 3px;
}

#hotelReservationList .notification-document-link,
#hotelReservationList .calendar-link {
  font-size: 90%;
}

/*
	Notification Document
*/
.notification-document-link {
  white-space: nowrap;
  margin-right: 5px;
}

.notification-document-link,
.notification-document-link:link,
.notification-document-link:visited {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--txt-color);

  i {
    margin-right: 0.5rem;
  }

  i:before {
    font-size: 1rem;
    text-align: center;
  }
}

.calendar-link:hover,
.notification-document-link:hover {
  color: var(--txt-link-hover) !important;
}

/*
	Calendar Entry
 */
div:has(> .calendar-link) {
  margin-top: 0.5rem;
}

.calendar-link {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-link,
.calendar-link:link,
.calendar-link:visited {
  color: var(--txt-color);
}

/*
	Cancellation
*/
.myehotel.change-booking-how-to p {
  padding: 1em 100px 0 120px;
}

.myehotel.change-booking-how-to p:last-child {
  padding-bottom: 3em;
}

/*
	MyEhotel Box
*/
.myehotel-box > ul {
  margin: 4px 8px;
  padding: 0 0 0 1em;
}

.myehotel-box > ul > li:before {
  content: "\f101";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1em;
  width: 1em;
}

.myehotel-box > ul > li > a {
  line-height: 1.8em;
  text-transform: uppercase;
  color: black;
}

.myehotel-box > ul > li > a:hover {
  color: #e31f21;
}

/*
	Option List
*/
.options-box {
  width: 100%;
}

.options-box .row {
  display: table-row;
}

.options-box .cell {
  display: table-cell;
  padding: 8px 0;
  vertical-align: top;
}

.options-box .cell.label {
  width: 300px;
}

/*
	Myehotel - Favorite Hotels
*/
.myehotel.myehotel-favorite-hotels {
  padding: 20px;
}

.favorite-hotels-header-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.favorite-hotels-header {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--txt-color);
}

.favorite-hotel-box {
  margin-bottom: 0.5rem;
  border: var(--border-default);
  position: relative;
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

.favorite-hotels-group-header-box {
  padding: 1.25rem 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.favorite-hotels-group-header-box .favorite-hotels-count {
  display: inline-block;
  min-width: 30px;
  margin-right: 0.75rem;
  padding: 0 0.25rem;
  text-align: center;
  border: var(--border-item-hover);
  border-radius: var(--border-radius-button);
}

.favorite-hotel-box .box-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}

.favorite-hotel-box .box-content > div {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.favorite-hotel-box a.favorite-link-to-hotel {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
}

.favorite-hotel-box a.favorite-link-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.favorite-hotel-box a.favorite-link-remove i {
  font-size: 1.5rem;
  color: #e31f21;
}

.favorite-hotel-box a.favorite-link-remove:hover i:before {
  content: "\f1f8";
}

/*
	Booking Templates
*/
.myehotel.myehotel-booking-templates {
  padding: 1.25rem;
}

.booking-template .section label {
  font-size: 0.875rem;
  font-weight: normal;
}

.booking-template .section .booking-template-purpose label {
  display: inline;
  margin-right: 1rem;
  font-weight: bold;
}

.booking-template .section label.use-from-profile {
  margin-bottom: 1rem;
  font-weight: bold;
}

.booking-template .section textarea {
  width: 80%;
}

.booking-template .section:not(:last-child) {
  border: none;
}

/* overrides for backend sidebar an content */

.sidebar-border {
  border-radius: 8px;
  overflow: hidden;
}
.main-content__wrapper.myehotel-nav {
  flex-wrap: wrap;
}
.myehotel-nav > .content {
  margin-left: 0px;
  margin-top: 15px;
}
.myehotel-nav > .sidebar {
  min-width: none;
  max-width: none;
  width: 100%;
}

.myehotel-nav > .sidebar li > a {
  text-transform: capitalize;
}

.myehotel-nav > .sidebar .box-header {
  display: none;
}
.myehotel-nav > .sidebar ul > li:before {
  content: "";
  display: block;
}

.myehotel-nav > .sidebar ul > li:hover {
  background-color: white;
}

.myehotel-nav > .sidebar ul {
  justify-content: space-between;
  margin: 0px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}
.myehotel-nav > .sidebar > .box {
  padding-bottom: 0px;
}

/*
	Booking-Templates
*/
.booking-template-summary-block {
  display: flex;
}

.booking-template-summary-block > div {
  padding-right: 8px;
}

.booking-template-summary-person {
  width: 190px;
}

.booking-template-summary-notification {
  width: 235px;
}

.booking-template-summary-address {
  width: 150px;
}

.booking-template-summary-credit-card {
  width: 150px;
}

.booking-template-summary-hotel-preferences {
  width: 120px;
}

/*
	Registration Corporate List
*/
.registration-corporate-list {
  height: 15em;
  width: 625px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid #ddd;
}

.registration-corporate-list-item {
  display: block;
  box-sizing: content-box;
  padding: 4px 8px;
  color: #333;
}

.registration-corporate-list-item:hover {
  background-color: #eee;
  color: inherit;
}

.registration-corporate-list-item.selected {
  background-color: #ddd !important;
}

/*** custom checkboxes ***/
input.room-rate[type="checkbox"] {
  position: relative;
}

/* to hide the checkbox itself */
label > input.room-rate[type="checkbox"]:before {
  position: absolute;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f096";
  letter-spacing: 10px;
}

/* space between checkbox and label */
label > input.room-rate[type="checkbox"]:checked:before {
  font-family: FontAwesome;
  display: inline-block;
  content: "\f046";
  letter-spacing: 5px;
}

.rate-plan-room-rate-button {
  position: absolute;
  right: 0px;
  bottom: 24px;
}

.rate-plan-room-rate-add-tooltip,
.rate-plan-room-rate-remove-tooltip {
  z-index: 1;
  float: right;
  width: 32px;
}

.rate-plan-room-rate-add-tooltip {
  margin-right: 16px;
}

.rate-plan-room-rate-remove-tooltip {
  margin-top: 4px;
}

.red {
  background-color: lightsalmon;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: lightgreen;
}

.rateloader-result:hover {
  background-color: var(--hover-price-matrix);
  cursor: pointer;
}

.expandable-arrival-date:hover {
  background-color: var(--hover-price-matrix);
  cursor: pointer;
}

.statistics-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.expandable-statistics-row:hover {
  background-color: var(--hover-price-matrix) !important;
  cursor: pointer;
}

.rate-plan-container[data-show="contact"] .rate-plan-tab[data-show="contact"],
.rate-plan-container[data-show="room-rates"]
  .rate-plan-tab[data-show="room-rates"],
.rate-plan-container[data-show="squatter-rates"]
  .rate-plan-tab[data-show="squatter-rates"],
.rate-plan-container[data-show="status"] .rate-plan-tab[data-show="status"],
.rate-plan-container[data-show="rate-plan-matrix"]
  .rate-plan-tab[data-show="rate-plan-matrix"],
.rate-plan-container[data-show="settings"]
  .rate-plan-tab[data-show="settings"] {
  display: block;
}

.rate-plan-container[data-show="contact"]
  .rate-plan-tab-header[data-show="contact"],
.rate-plan-container[data-show="room-rates"]
  .rate-plan-tab-header[data-show="room-rates"],
.rate-plan-container[data-show="squatter-rates"]
  .rate-plan-tab-header[data-show="squatter-rates"],
.rate-plan-container[data-show="status"]
  .rate-plan-tab-header[data-show="status"],
.rate-plan-container[data-show="rate-plan-matrix"]
  .rate-plan-tab-header[data-show="rate-plan-matrix"],
.rate-plan-container[data-show="settings"]
  .rate-plan-tab-header[data-show="settings"] {
  color: #fff !important;
  background-color: #616161 !important;
}

.rate-plan-tab[data-show="status"],
.rate-plan-tab[data-show="room-rates"],
.rate-plan-tab[data-show="squatter-rates"],
.rate-plan-tab[data-show="contact"],
.rate-plan-tab[data-show="rate-plan-matrix"],
.rate-plan-tab[data-show="settings"] {
  display: none;
}

.dialog-confirm {
  z-index: 2;
  display: none;
  position: absolute;
  right: 0px;
  top: 40px;
  width: 350px;
  float: left;
  margin: 12px 12px 20px 0;
  background: white;
  border-style: solid;
  border-width: thin;
  padding: 4px;
  z-index: 10;
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300,300italic,400italic,700italic,800italic,600italic); */
html {
  /*   font-family: sans-serif; */
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  box-sizing: border-box;
  box-sizing: content-box;
  box-sizing: padding-box;
  -moz-box-sizing: border-box;
  -moz-box-sizing: content-box;
  -moz-box-sizing: padding-box;
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  appearance: button;
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  vertical-align: middle;
  /*   margin-right: 10px;  */
  margin-right: 0.4em;
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*
	Form
*/
form {
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="password"],
select,
textarea {
  /* 	border: 1px solid #958570; */
  padding: 1px 2px;
  box-sizing: border-box;
}

/*
	Lists
*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
	Horizontal Ruler
*/
hr {
  margin: 0 auto;
  display: block;
  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
  border-style: solid;
}

/*
	Header
*/
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
@media print {
	.button {
		display: none;
	}
	.topLink {
		display: none !important;
	}
	.travelerBox {
		border-top: 1px solid #958570;
		page-break-before: always;
	}
	.firstTravelerBox {
		page-break-before: auto !important;
	}
	.hotel-info-hotel-additional-box {
		float: left !important;
		padding-top: 30px !important;
	}
	#confirmation {
		width: 640px !important;
		text-align: left !important;
		background: #FFF !important;
		font-size: 11px !important;
		line-height: 14px !important;
	}
}/*
	Search Box
*/

/* .search-box {
  position: absolute;
  top: 60px;
  left: 0;
  width: 450px;
  max-width: 450px;
  padding: 1.5rem;
  z-index: 10;
  font-size: 0.875rem;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-component);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.08);
}

.search-box.disabled {
  pointer-events: none;
  filter: blur(2px);
}

@media screen and (max-width: 1100px) {
  .search-box {
    left: 10px;
  }
}

.search-box label {
  font-size: 0.875rem;
}

.search-box h2 {
  margin: 0 0 0.5em 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.search-box input,
.search-box select {
  padding: 0.25rem 0.5rem;
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
} */

/* .search-input-row {
  margin-bottom: 0.5rem;
  outline: var(--outline3);
}

.search-input-row label {
  display: block;
  font-size: 1rem;
  line-height: 2;
} */

.search-travel-reason {
  margin-top: 0.6em;
  font-size: 0.8em;
}

.search-travel-reason span {
  vertical-align: middle;
  padding-right: 2em;
}

.search-travel-reason label {
  vertical-align: middle;
  padding-right: 1em;
}

.search-rate-plan-types {
  margin-top: 1rem;
}

.search-rate-plan-title {
  font-size: 1rem;
}

.search-rate-plan-types label {
  vertical-align: middle;
  line-height: 1.5;
}

.search-rate-plan-types ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.search-rate-plan-types ul li {
  width: 150px;
}

.search-booking-mode {
  display: flex;
  justify-content: space-between;
  font-size: 0.875em;
  margin: 1.5em 0;
}

.search-booking-mode > div {
  display: flex;
  justify-content: start;
  gap: 0.5rem;
}

.search-booking-mode input[type="radio"] {
  margin: 0;
  padding: 0;
}

.search-booking-mode label {
  display: block;
}

/* input.search-destination, */
input.search-hotelname {
  width: 100%;
}

.search-date-box {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.search-arrival-box,
.search-departure-box {
  display: flex;
  gap: 0.25rem;
}

.search-date-box .ui-datepicker-trigger {
  width: 1.8rem;
}

.search-mode-group .search-input-row {
  display: flex;
  justify-content: space-between;
}

.search-mode-group .search-input-row input {
  text-align: center;
}

.search-optional-box {
  position: relative;
}

.search-optional-filter-link-box {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bg-button-extend);
  margin: 0 auto;
  cursor: pointer;
  width: 120px;
}

.search-optional-filter-link-box:hover {
  filter: brightness(1.5);
}

/* .search-optional-filter-link-box .fa-sort-down {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  transform: translateY(-1px);
  transition: transform 0.25s ease-out;
}

.search-optional-filter-link-box:hover .fa-sort-down {
  transform: scale(1.3) translateY(-2px);
}

.search-optional {
  max-height: 1px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
} */

.search-optional-show .search-optional-filter-link-box {
  display: none;
}

/* .search-optional-show .search-optional {
  max-height: 240px;
  animation: overflowVisibleDelay 0s 0.5s forwards;
}

@keyframes overflowVisibleDelay {
  to {
    overflow: visible;
  }
} */

/* .search-box.mode-single .search-mode-single {
  display: block;
}

.search-box.mode-group .search-mode-single {
  display: none;
}

.search-box.mode-group .search-mode-group {
  display: block;
}

.search-box.mode-single .search-mode-group {
  display: none;
} */

/*
	Stars
*/
.search-stars {
  margin-top: 1em;
}

.star-selection-box {
  display: block;
  margin: 0;
  padding: 0;
}

.search-stars li {
  display: inline-block;
  margin-right: 1rem;
  line-height: 1;
}

.search-stars .star {
  font-size: 1rem;
  line-height: 1;
}

.search-stars .star.star-0 {
  color: inherit;
  font-size: 1em;
}

.search-stars input[type="checkbox"] {
  margin-right: 5px;
}

.search-button-box {
  text-align: right;
  margin-top: 2rem;
}

.search-button-box .button {
  font-size: 1.25rem;
}

.search-button-box i {
  display: none;
}

.search-button-box.spinner i {
  display: inline-block;
}

.search-button-box.spinner a {
  display: none;
}

#SearchDestinationTooltip ul {
  margin: 0;
  padding: 5px 5px 5px 25px;
}
/* .container-search .content:has(.menu-myehotel) {
  .headline-searchbar-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
 */
.search {
  --text-spacing: -0.25px;
  --font-size-mobile: 1rem;
  --font-size-desktop: 1.25rem;
  --font-size-bar: var(--font-size-mobile);
}
@media (min-width: 1280px) {
  .search {
    --font-size-bar: var(--font-size-desktop);
  }
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.search {
  position: relative;
  justify-content: center;
  opacity: 0;
  animation: slideIn 0.975s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0.05s forwards;
  filter: blur(0) saturate(1);
  transition: filter 0.5s ease-in-out;
}
.search.disabled {
  user-select: none;
  pointer-events: none;
  filter: blur(2px) saturate(0.5);
}
.search input:not([type=radio]) {
  font-weight: 500;
}
.search input {
  transition: border-color 0.25s ease-in-out;
}
.search input:hover {
  outline: 2px solid var(--primary-accent);
  outline-offset: 1px;
}
.search:has(.mode-single) .search-pre-switch .pre-switch-single, .search:has(.mode-group) .search-pre-switch .pre-switch-group {
  color: var(--primary-color);
}
[data-theme=dark] .search:has(.mode-single) .search-pre-switch .pre-switch-single, [data-theme=dark] .search:has(.mode-group) .search-pre-switch .pre-switch-group {
  color: var(--primary-action-color);
}
.search-grid {
  display: grid;
  grid-template-rows: auto auto;
}
.search-pre-switch {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin-left: 3rem;
  padding: 0.25rem;
  padding-bottom: 0.75rem;
  background-color: var(--bg-landing-page);
}
.search-pre-switch button {
  font-size: 1.25rem;
  font-weight: 500;
  border: none;
  color: var(--txt-color);
  background-color: transparent;
  transition: color 0.25s ease-in-out;
}
.search-pre-switch button:hover {
  color: var(--primary-color) !important;
}
.search-bar {
  display: flex;
  width: max-content;
  height: 55px;
  margin: 0 auto;
  color: var(--txt-color);
}
@media (min-width: 1280px) {
  .search-bar {
    height: auto;
  }
}
.search-bar-container {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  background-color: var(--bg-component);
}
@media (min-width: 1280px) {
  .search-bar-container {
    gap: 0.5rem;
  }
}
.search-bar-container:last-of-type {
  padding-left: 1.5rem;
  background-color: var(--bg-button-searchbar);
  overflow: hidden;
  transition: background-color 0.2s ease-in;
}
.search-bar-container:last-of-type:hover, .search-bar-container:last-of-type:has(:focus-visible) {
  background-color: var(--bg-button-searchbar-hover);
}
.search-bar-container:has(.search-bar-destination) {
  padding-left: 0.44rem;
  border: 2px solid var(--border-search-bar-color);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-right: none;
}
.search-bar-container:has(.search-bar-submit-button) {
  border: 2px solid var(--primary-color);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-left: none;
}
.search-bar-destination-label, .search-bar-arrival label, .search-bar-departure label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}
.search-bar-destination {
  position: relative;
  display: flex;
  min-width: 275px;
}
.search-bar-destination:has(.validation-error):after {
  position: absolute;
  right: -0.375rem;
  top: -0.75rem;
  display: block;
  width: 24px;
  height: 24px;
  font-family: "Font Awesome 5 Free";
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--error);
  background-color: var(--white-100);
  border-radius: 50%;
  outline: 2px solid var(--error);
  outline-offset: -1px;
  content: "\f06a";
}
.search-bar-destination:has(.validation-error) input {
  border-color: var(--error);
}
.search-bar-destination-input {
  width: 100%;
  height: 100%;
  padding: 0.3rem 0.25rem 0.3rem 1.25rem;
  background-color: var(--bg-component);
  border: 2px solid var(--bg-component);
  border-radius: var(--border-radius-component);
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  font-size: var(--font-size-bar);
  text-underline-offset: 0.5rem;
  text-decoration: underline;
  text-decoration-color: var(--border-separator-color);
  text-decoration-thickness: 1px;
  letter-spacing: var(--text-spacing);
  color: var(--txt-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  cursor: pointer;
}
.search-bar-destination-input::placeholder {
  color: var(--txt-color);
  opacity: 0.7;
}
@media (min-width: 1280px) {
  .search-bar-destination-input {
    padding: 0.75rem 0.25rem 0.75rem 1.25rem;
  }
}
.search-bar-arrival, .search-bar-departure {
  display: flex;
}
.search-bar-arrival {
  height: 100%;
  border-left: 2px solid var(--border-default-color);
}
@media (min-width: 1280px) {
  .search-bar-arrival {
    padding-left: 0.5rem;
  }
}
.search-bar-departure {
  height: 100%;
}
.search-bar-arrival-input, .search-bar-departure-input {
  width: 85px;
  height: 80%;
  margin: auto 0;
  padding: 0 0.1rem !important;
  background-color: var(--bg-component);
  text-align: center;
  border: none;
  border-radius: var(--border-radius-button);
  font-size: var(--font-size-bar);
  text-underline-offset: 0.5rem;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: auto;
  text-decoration-color: var(--border-separator-color);
  letter-spacing: var(--text-spacing) !important;
  cursor: pointer;
}
@media (min-width: 1280px) {
  .search-bar-arrival-input, .search-bar-departure-input {
    padding: 0 0.4rem !important;
    width: 110px;
  }
}
.search-bar-arrival-input::placeholder, .search-bar-departure-input::placeholder {
  color: var(--txt-color);
  opacity: 0.7;
}
.search-bar-night-counter {
  text-align: center;
}
.search-bar-night-counter-value {
  min-width: 80px;
  font-size: calc(var(--font-size-bar) * 0.85);
  letter-spacing: var(--text-spacing);
  white-space: nowrap;
  overflow: visible;
}
.search-bar-night-counter-value-calculated {
  display: inline-block;
  min-width: 8px;
}
.search-bar-night-counter::before {
  display: block;
  content: "\f186";
  font-family: "Font Awesome 5 Free";
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--txt-color);
}
.search-bar-night-counter:has(.search-bar-night-counter-value-calculated:empty) {
  opacity: 0.65;
}
.search-bar-night-counter:has(.search-bar-night-counter-value-calculated:empty) .search-bar-night-counter-value-text {
  color: var(--bg-component);
}
.search-bar-night-counter:has(.search-bar-night-counter-value-calculated:empty) .search-bar-night-counter-value {
  font-size: 0 !important;
}
.search-bar-night-counter .search-bar-night-counter-value-text {
  display: none;
}
.search-bar-night-counter .search-bar-night-counter-value.is-singular .is-singular {
  display: inline;
}
.search-bar-night-counter .search-bar-night-counter-value.is-plural .is-plural {
  display: inline;
}
.search-bar-booking-mode {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.5rem;
  border-left: 2px solid var(--border-default-color);
}
.search-bar-booking-mode.mode-single .search-bar-booking-mode-toggle-display-single {
  display: flex;
}
.search-bar-booking-mode.mode-single .search-bar-booking-mode-menu-single {
  display: flex;
}
.search-bar-booking-mode.mode-group .search-bar-booking-mode-menu-group {
  display: block;
  width: 75%;
}
.search-bar-booking-mode.mode-group .search-bar-booking-mode-toggle-display-group {
  display: grid;
}
.search-bar-booking-mode.mode-single .search-bar-booking-mode-menu-group,
.search-bar-booking-mode.mode-single .search-bar-booking-mode-toggle-display-group,
.search-bar-booking-mode.mode-single .search-bar-booking-mode-menu-group-error {
  display: none;
}
.search-bar-booking-mode.mode-single::after {
  display: none !important;
}
.search-bar-booking-mode.mode-group .search-bar-booking-mode-menu-single,
.search-bar-booking-mode.mode-group .search-bar-booking-mode-toggle-display-single {
  display: none;
}
.search-bar-booking-mode.mode-single .search-bar-booking-mode-toggle-icon:after {
  content: "\f007";
}
.search-bar-booking-mode.mode-group .search-bar-booking-mode-toggle-icon:after {
  content: "\f0c0";
}
.search-bar-booking-mode .search-bar-booking-mode-toggle-icon:after {
  transition: transform 0.175s ease-in;
}
.search-bar-booking-mode .search-bar-booking-mode-toggle:hover .search-bar-booking-mode-toggle-icon:after {
  transform: scale(1.15);
}
.search-bar-booking-mode:has(.search-bar-booking-mode-menu :focus-visible) .search-bar-booking-mode-toggle {
  border-color: var(--primary-hover-color);
}
.search-bar-booking-mode.mode-group:has(.error)::after {
  position: absolute;
  right: -0.25rem;
  top: -0.35rem;
  display: block;
  width: 24px;
  height: 24px;
  font-family: "Font Awesome 5 Free";
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--error);
  background-color: var(--white-100);
  border-radius: 50%;
  outline: 2px solid var(--error);
  outline-offset: -1px;
  content: "\f06a";
}
.search-bar-booking-mode.mode-group:has(.error) .search-bar-booking-mode-toggle {
  border-color: var(--error) !important;
}
.search-bar-booking-mode:has([aria-expanded=true]) .search-bar-booking-mode-menu-group-error {
  top: 160px;
  right: 315px;
}
.search-bar-booking-mode:has([aria-expanded=true]) .search-bar-booking-mode-menu-group-error:after {
  border-left: 8px solid var(--error);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  right: -18px;
  bottom: 6px;
}
.search-bar-booking-mode-toggle {
  position: relative;
  display: flex;
  width: 275px;
  height: 100%;
  padding: 0 0 0 0.75rem;
  background-color: var(--bg-component);
  border: 2px solid var(--bg-component);
  border-radius: var(--border-radius-button);
  overflow: hidden;
  transition: border-color 0.25s ease-in-out;
}
@media (min-width: 1280px) {
  .search-bar-booking-mode-toggle {
    width: 300px;
    height: 80%;
  }
}
.search-bar-booking-mode-toggle:focus-visible {
  border-color: var(--primary-hover-color);
}
.search-bar-booking-mode-toggle-icon {
  display: block;
  width: 25px;
  height: 55px;
  max-height: 100%;
}
.search-bar-booking-mode-toggle-icon:after {
  display: block;
  width: 25px;
  height: 55px;
  font-family: "Font Awesome 5 Free";
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 2.3;
}
@media (min-width: 1280px) {
  .search-bar-booking-mode-toggle-icon:after {
    font-size: 1.5rem;
  }
}
.search-bar-booking-mode-toggle-display-single {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  padding-left: 0.75rem;
  font-size: var(--font-size-bar);
  font-weight: 500;
  letter-spacing: var(--text-spacing);
  line-height: 1.25;
}
.search-bar-booking-mode-toggle-display-group {
  grid-template-columns: 2fr 12px 20px;
  width: 100%;
  padding: 0.125rem 0.25rem 0 1.75rem;
  font-size: 0.75rem;
  text-align: left;
  line-height: 1.15;
}
@media (min-width: 1280px) {
  .search-bar-booking-mode-toggle-display-group {
    font-size: 1rem;
    padding-top: 0;
  }
}
.search-bar-booking-mode-toggle-display-group p {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  margin: 0;
}
.search-bar-booking-mode-toggle-display-group p:not(:has([data-value="0"])) {
  font-weight: 500;
}
.search-bar-booking-mode-toggle-display-group .rooms {
  margin-left: 0.125rem;
}
.search-bar-booking-mode-menu {
  position: absolute;
  min-width: 370px;
  height: 175px;
  top: 55px;
  transform: translate(-8px, -2px) scaleY(1);
  transform-origin: top;
  padding: 1rem;
  border: var(--border-separator);
  border-top: none;
  background-color: var(--bg-component);
  border-bottom-right-radius: var(--border-radius-component);
  border-bottom-left-radius: var(--border-radius-component);
  overflow: hidden;
  transition: transform 0.125s ease-out, opacity 0.2s ease-out;
}
@media (min-width: 1280px) {
  .search-bar-booking-mode-menu {
    top: 75px;
  }
}
.search-bar-booking-mode-menu.hidden {
  transform: translate(-8px, -2px) scaleY(0);
  opacity: 0;
  pointer-events: none;
}
.search-bar-booking-mode-menu-focus-within + .search-bar-booking-mode-toggle {
  border-color: var(--primary-color);
}
.search-bar-booking-mode-menu-select {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.search-bar-booking-mode-menu-select > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.search-bar-booking-mode-menu-select > div label {
  width: max-content;
}
.search-bar-booking-mode-menu-single {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 32px 0 29px;
}
.search-bar-booking-mode-menu-single select {
  padding: 0.25rem;
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
  transition: border-color 0.175s ease-out;
}
.search-bar-booking-mode-menu-single select:hover, .search-bar-booking-mode-menu-single select:focus-visible {
  border-color: var(--primary-color);
}
.search-bar-booking-mode-menu-group-item {
  display: grid;
  grid-template-columns: 125px 32px 16px 32px;
  padding-top: 4px;
  transform: translateY(16px);
}
.search-bar-booking-mode-menu-group-item label {
  color: var(--txt-color) !important;
}
.search-bar-booking-mode-menu-group-error.error {
  display: block;
}
.search-bar-booking-mode-menu-group-error {
  display: none;
  position: absolute;
  top: -40px;
  right: 100px;
  width: max-content;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background-color: var(--bg-component);
  border: 1px solid var(--error);
  border-radius: var(--border-radius-component);
  z-index: 100;
  transition: top 0.25s ease, right 0.25s ease;
}
.search-bar-booking-mode-menu-group-error .errorMessagesStyle {
  padding: 0;
}
.search-bar-booking-mode-menu-group-error::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--error);
}
.search-bar-booking-mode-menu-group input {
  width: 2rem;
  padding: 0;
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
  text-align: center;
}
.search-bar-booking-mode-menu-close-button {
  display: block;
  margin-left: auto;
  border: none;
}
.search-bar-filter {
  margin-left: -42px;
  position: relative;
}
.search-bar-filter-toggle {
  width: 51px;
  height: 51px;
  color: var(--white-100);
  font-size: 1.5rem;
  background-color: var(--bg-button-filter-searchbar);
  border-radius: 50px;
  border: 3px solid var(--bg-button-filter-searchbar);
  outline: 3px solid var(--bg-button-filter-searchbar) !important;
  outline-offset: -1px;
  transform: translateX(50%);
  transition: border-color 0.175s ease-in;
}
@media (min-width: 1280px) {
  .search-bar-filter-toggle {
    width: 71px;
    height: 71px;
  }
}
@media (min-width: 1280px) {
  .search-bar-filter-toggle {
    font-size: 1.75rem;
  }
}
.search-bar-filter-toggle:hover, .search-bar-filter-toggle:focus {
  border-color: var(--primary-hover-color);
}
.search-bar-filter-toggle::after {
  display: none;
}
.search-bar-filter-toggle.filterCount:after {
  position: absolute;
  top: 0;
  right: -0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  content: attr(data-count, "0");
  width: 26px;
  height: 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black-33);
  background-color: var(--white-100);
  border-radius: 50%;
  border: 2px solid var(--black-33);
}
.search-bar-filter:has(.search-bar-filter-menu :focus-visible) .search-bar-filter-toggle {
  border-color: var(--primary-color);
}
.search-bar-filter-menu {
  --translateXSingle: -495px;
  --translateXGroup: -280px;
}
@media (min-width: 1280px) {
  .search-bar-filter-menu {
    --translateXSingle: -477px;
    --translateXGroup: -270px;
  }
}
.search-bar-filter-menu {
  position: absolute;
  width: max-content;
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  padding: 2rem 2rem;
  border: var(--border-separator);
  border-top: none;
  background-color: var(--bg-component);
  border-bottom-right-radius: var(--border-radius-component);
  border-bottom-left-radius: var(--border-radius-component);
  overflow: hidden;
  transform: translate(var(--translateXSingle), 2px) scaleY(1);
  transform-origin: top;
  transition: transform 0.125s ease-out, opacity 0.2s ease-out;
}
.search-bar-filter-menu:has([class*=group]) {
  grid-template-columns: 1fr;
  transform: translate(var(--translateXGroup), 2px) scaleY(1);
}
.search-bar-filter-menu.hidden {
  transform: translate(var(--translateXSingle), 2px) scaleY(0);
}
.search-bar-filter-menu.hidden:has([class*=group]) {
  transform: translate(var(--translateXGroup), 2px) scaleY(0);
}
.search-bar-filter-menu.hidden {
  opacity: 0;
  pointer-events: none;
}
.search-bar-filter-menu-travel-reason {
  grid-column: 1/4;
  padding-bottom: 0.5rem;
  border-bottom: var(--border-separator);
}
.search-bar-filter-menu-travel-reason.mode-group {
  display: none;
}
.search-bar-filter-menu-travel-reason > div {
  display: flex;
  gap: 2rem;
}
.search-bar-filter-menu-travel-reason > div div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-bar-filter-menu-travel-reason input {
  cursor: pointer;
}
.search-bar-filter-menu-travel-reason label {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--text-spacing);
  cursor: pointer;
}
.search-bar-filter-menu-travel-reason label:hover {
  color: var(--primary-action-color);
}
.search-bar-filter-menu-rate-plan-types {
  grid-row: 2/-1;
}
.search-bar-filter-menu-rate-plan-types.mode-group {
  display: none;
}
.search-bar-filter-menu-rate-plan-types-label {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--text-spacing);
}
.search-bar-filter-menu-rate-plan-types ul {
  padding: 0.25rem 0 0 0.5rem;
}
.search-bar-filter-menu-rate-plan-types ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.125rem 0 0;
}
.search-bar-filter-menu-rate-plan-types ul input {
  flex: 0 0 auto;
  margin: 0;
  transform: scale(1.2);
  transform-origin: left center;
  cursor: pointer;
}
.search-bar-filter-menu-rate-plan-types ul label {
  text-shadow: 0 0 0 currentColor;
  letter-spacing: var(--text-spacing);
  cursor: pointer;
  transition: text-shadow 1000.33s ease-out, 0.33s ease-out;
}
.search-bar-filter-menu-rate-plan-types ul label:hover {
  color: var(--primary-action-color);
  text-shadow: 0.3px 0 currentColor, -0.3px 0 currentColor;
}
.search-bar-filter-menu-stars {
  grid-row: 2/-1;
}
.search-bar-filter-menu-stars-label {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--text-spacing);
}
.search-bar-filter-menu-stars ul {
  padding: 0.25rem 0 0 0.5rem;
}
.search-bar-filter-menu-stars ul li {
  display: flex;
  align-items: center;
}
.search-bar-filter-menu-stars ul li label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.125rem 0;
  cursor: pointer;
}
.search-bar-filter-menu-stars ul li label span {
  text-shadow: 0 0 0 currentColor;
  transition: text-shadow 1000.33s ease-out, 0.33s ease-out;
}
.search-bar-filter-menu-stars ul li label:hover span {
  color: var(--primary-color);
  text-shadow: 0.3px 0 currentColor, -0.3px 0 currentColor;
}
.search-bar-filter-menu-stars ul li label .star::before {
  color: var(--primary-action-color);
  transform: translateY(1px) scale(1);
}
.search-bar-filter-menu-stars ul li label:hover .star::before {
  transform: translateY(1px) scale(1.05);
  transform-origin: center left;
}
.search-bar-filter-menu-stars ul li:last-of-type label {
  padding: 0;
}
.search-bar-filter-menu-stars ul li:last-of-type span {
  height: 26px;
  width: max-content;
}
.search-bar-filter-menu-stars ul input {
  flex: 0 0 auto;
  margin: 0;
  transform: scale(1.2);
  transform-origin: left center;
  cursor: pointer;
}
.search-bar-filter-menu-hotelname {
  grid-column: -1;
  grid-row: 2;
  display: grid;
}
.search-bar-filter-menu-hotelname-label {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--text-spacing);
}
.search-bar-filter-menu-hotelname-input[type=text] {
  margin-top: 0.25rem;
  padding: 0.25rem 0 0.25rem 0.5rem;
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
}
.search-bar-filter-menu-price {
  grid-column: -1;
  grid-row: 3;
  font-size: 1.125rem;
  font-weight: 500;
}
.search-bar-filter-menu-price-label {
  letter-spacing: var(--text-spacing);
}
.search-bar-filter-menu-price-inputs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.search-bar-filter-menu-price-inputs-field {
  font-size: 1rem;
  background-color: var(--bg-component);
  border: var(--border-separator);
  border-radius: var(--border-radius-button);
  text-align: center;
}
.search-bar-filter-menu-close {
  grid-column: -1;
  grid-row: 4;
  align-self: end;
}
.search-bar-filter-menu-close-button {
  display: block;
  margin-left: auto;
  border: none;
}
.search-bar-submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80%;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.2s ease-in;
}
@media (min-width: 1280px) {
  .search-bar-submit-button {
    width: 180px;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
  }
}
.search-bar-submit-button.spinner {
  display: flex;
  justify-content: center;
  font-size: 1.5rem !important;
}
.search-bar-submit-button.spinner .search-bar-submit-button-link {
  padding: 0;
}
.search-bar-submit-button:hover {
  transform: scale(1.05);
}
.search-bar-submit-button-link {
  display: block;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--border-radius-button);
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  overflow: hidden;
  text-overflow: "";
  white-space: nowrap;
}
.search-bar-submit-button-text {
  font-size: 1.5rem;
  text-transform: capitalize;
  font-weight: 500;
  color: var(--white-100);
  letter-spacing: var(--text-spacing);
}
@media (min-width: 1280px) {
  .search-bar-submit-button-text {
    font-size: 1.75rem;
  }
}
.search-bar-submit-button .fa.fa-spinner.fa-pulse {
  display: none;
  color: var(--white-100);
}
.search-bar-submit-button.spinner span {
  font-size: 0;
}
.search-bar-submit-button.spinner .fa.fa-spinner.fa-pulse {
  display: inline-block;
}
.search .container__months {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}
.search .calendar-container {
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
}
.search .litepicker {
  position: relative;
  top: 0 !important;
  left: auto !important;
}
.search-small-content .search-destination,
.search-small-content .search-rooms {
  font-weight: 600;
}

.search-small-content .search-small-box select {
  border: none;
  background-color: var(--bg-component);
}

.search-small-content .search-small-select {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.search-small-content .search-small-select select {
  padding: 0.125rem;
  padding-left: 0.25rem;
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.search-small-content {
  padding: 12px 8px 8px;
  font-size: 0.875rem;
  color: var(--txt-color);
}

.search-small-content.mode-single .search-mode-single {
  display: block;
}

.search-small-content.mode-group .search-mode-single {
  display: none;
}

.search-small-content.mode-group .search-mode-group {
  display: block;
}

.search-small-content.mode-single .search-mode-group {
  display: none;
}

.search-small-content label {
  display: block;
  font-size: 0.875rem;
}

.search-small-content label.search-destination {
  margin: 5px 0;
  font-size: 0.875rem;
}

.search-small-content .search-booking-mode {
  margin-top: 0;
  padding: 0 0.4em;
}

.search-small-content .search-mode-group label {
  display: inline;
  padding-left: 10px;
}

.search-small-content .search-mode-group input {
  text-align: center;
  margin-top: 2px;
}

.search-small-content .search-travel-reason {
  margin-top: 1.5rem;
}

.search-small-content .search-travel-reason label {
  display: inline;
  padding-left: 0;
}

.search-small-content select {
  padding-left: 0;
  padding-right: 0;
  line-height: 1.3;
}

.search-small-content input:not([type="radio"]) {
  width: 75px;
  margin-top: 0.25rem;
  padding: 0.25rem;
  line-height: 1;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.search-small-content input:hover {
  border-color: var(--primary-accent);
}

.search-small-content #SearchSuggestTextField {
  width: 100%;
}

.search-small-content #SearchRoomCountField {
  width: 45px;
}

.search-small-content #SearchRoomTypeField {
  width: 170px;
}

.search-small-box {
  margin-top: 12px;
}

.search-small-date-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-small-date-box-icon {
  width: 28px;
  height: 28px;
  background-image: var(--icon-calendar);
  background-repeat: no-repeat;
  background-position: center;
}

/* Hide labels visually, keep it accessible for screenreaders => WCAG 3.3.2 / 4.1.2 */
.search-small-date-box label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.search-small-date-box input {
  width: 85px;
  text-align: center;
}

.search-small .search-night-counter::before {
  font-size: 1rem;
}

.search-small .search-night-counter .search-night-counter-value {
  width: fit-content;
}

.search-small .calendar-container .litepicker {
  top: 60px !important;
  left: 0 !important;
  transform: none;
}

.search-small .calendar-container .container__months {
  border: var(--border-separator);
  border-radius: var(--border-radius-component);
}

.search-small-button-box {
  text-align: right;
  margin-top: 14px;
}

.search-small-button-box i {
  display: none;
  font-size: 1.7em;
}

.search-small-button-box.spinner i {
  display: inline-block;
}

.search-small-button-box.spinner a {
  display: none;
}

/*
	Search - Filter
*/
.search-filter-box {
  padding: 0.625rem 0.5rem 0 0.5rem;
}

.search-filter-name {
  padding-bottom: 12px;
}

.search-filter-name h3 {
  font-weight: bold;
}

.search-filter-name.collapsible h3:hover {
  color: var(--primary-hover-color);
}

.search-filter-name.collapsible {
  display: flex;
  gap: 0.5rem;
  cursor: pointer;
}

.search-filter-name i.fa {
  font-size: 1.5rem;
  line-height: 0.8;
  color: var(--bg-button-filter-menu);
  transition: transform 0.25s ease-out;
}

.search-filter-name.collapsible:hover i.fa {
  transform: scale(1.3) translateY(-2px);
}

.search-filter-name.collapsed.collapsible:hover i.fa {
  transform: scale(1.3);
}

.search-filter-name i.fa:before {
  content: "\f0d7";
}

.search-filter-name.collapsed i.fa:before {
  content: "\f0da";
}

.search-filter-name .rate-range,
.search-filter-name .rating-range {
  display: block;
  margin: 0 auto;
  background: transparent;
  text-align: center;
  border: none;
}

.search-filter-name .rating-range {
  font-size: 0.875rem;
}

.search-filter-name .rate-range input {
  border: var(--border-default);
  background-color: var(--bg-component);
  padding: 2px 1px;
  text-align: center;
  border-radius: var(--border-radius-button);
}

.search-filter-name .rate-range input#SliderRateMinAmount {
  width: 45px;
}

.search-filter-name .rate-range input#SliderRateMaxAmount {
  width: 55px;
}

.search-filter-name .rate-range input.error {
  border-color: var(--error);
  color: var(--error);
}

/*
	Filter Stars
*/
.search-filter-box .icon-stars-box {
  float: left;
  padding: 2px 0 0 8px;
}

.search-filter-box .stars-css-box {
  float: left;
  padding-left: 8px;
}

/*
	Filter RatePlanType
*/
#RatePlanTypesContainer .currencyPrice,
#RatePlanTypesContainer .currencySensitivePrice,
#RatePlanTypesContainer .firstCurrency {
  display: inline;
}

/*
	Filter
*/
.filter-item-box .ui-slider-horizontal {
  width: 95%;
  margin: 0 auto;
  border-color: var(--bg-component);
  background: var(--bg-component);
}

.ui-slider-range {
  max-height: 4px;
  background: var(--bg-slider);
}

.ui-slider .ui-slider-handle {
  height: 16px;
  width: 16px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-2px);
}

.ui-slider:has(
    .ui-slider-handle:not([style="left: 0%;"]):not([style="left: 100%;"])
  )
  .ui-slider-handle,
.ui-slider:has(
    .ui-slider-handle:not([style="left: 0%;"]):not([style="left: 100%;"])
  )
  .ui-slider-range {
  background: var(--primary-color);
}

.ui-slider .ui-slider-handle[style="left: 100%;"],
.ui-slider .ui-slider-handle[style="left: 0%;"] {
  background: var(--bg-slider-handle);
}

.ui-slider .ui-slider-handle[style="left: 100%;"]:hover,
.ui-slider .ui-slider-handle[style="left: 0%;"]:hover {
  background: var(--primary-color);
}

.filter-item-box .search-filter-name-input {
  width: 100%;
  padding: 0.25rem;
  line-height: 1;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.filter-item {
  font-size: 0.875rem;
  padding: 2px 0;
}

.filter-item:last-of-type {
  padding-bottom: 4px;
}

#StarsList ~ .filter-item:last-of-type {
  padding-top: 4px;
}

.filter-item a {
  display: block;
}

.filter-item a:hover,
.filter-item a:active {
  text-decoration: none;
}

.filter-item-enabled {
  margin-bottom: 1px;
  font-weight: bold;
}

.filter-item-enabled a:link,
.filter-item-enabled a:visited {
  color: inherit;
}

#SidebarContent .filter-item-count {
  color: var(--txt-color);
}

.filter-item-count,
.filter-item-name {
  font-size: 0.875rem;
  color: var(--txt-tablist-navigation);
}

.current .filter-item-count,
.current .filter-item-name {
  color: var(--txt-tablist-navigation-active);
}

.sidebar .filter-item-count {
  float: right;
}

.search-filter-group-name {
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  border-bottom-color: var(--border-separator-color);
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  margin-bottom: 6px;
}

#SearchFilterBox .filter-link-with-checkbox span:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 205px;
  line-height: 1.1;
  transform: translateY(2px);
}

/*
STARSLIST
*/
#StarsFilterBox .filter-checkbox + span {
  min-width: 3.25rem;
  color: var(--txt-color);
}

#StarsFilterBox .star {
  display: inline-block;
  transform: translateY(-2px);
  font-size: 1rem;
}

/*
NEAR BY AREA INFO
*/
#SidebarContent {
  margin-bottom: 1rem;
}

/*
RECENTLY VIEWED HOTELS
*/
#RecentlyViewedHotelListBox {
  border-radius: var(--border-radius-component);
  overflow: hidden;
}

#RecentlyViewedHotelListBox .box-header {
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
/*
	Loading Box
*/
.loading-box {
  padding: 20px 10px;
  position: relative;
  margin-bottom: 10px;
  color: var(--txt-color);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-component);
}

/* jQuerry loading bar overrides for Hotel Search & Price Matrix */
.loading-box .loading-box-progressbar,
.loading-box .matrix-loading-box-progressbar {
  background-color: var(--bg-component) !important;
  border: var(--border-separator) !important;
  border-radius: var(--border-radius-button);
  overflow: hidden;
}

.loading-box .ui-widget-header {
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 0 !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.content:has(#HotelList) .loading-box .ui-widget-header {
  transition: width 0.75s ease;
}

.loading-box .ui-progressbar-value {
  margin: 0 !important;
}
/* jQuerry loading bar overrides END */

.loading-box-layout {
  display: flex;
  align-items: center;
}

.loading-box-header {
  font-size: 1.1em;
  font-weight: bold;
}

.loading-box-text {
  margin: 0px 10px;
}

.loading-box-text > span {
  display: inline-block;
  width: 80px;
  text-align: right;
}

.loading-box-progressbar {
  flex-grow: 1;
  min-width: 70px !important;
  height: 1rem !important;
}

@media (max-width: 950px) {
  .loading-box-layout {
    flex-direction: column;
  }

  .loading-box-text {
    margin: 0px 0px 5px 0px;
  }
}

/* 
	Search Summary 
*/
#searchSummaryContent {
  float: left;
  width: 800px;
  padding: 10px 0px 6px 10px;
}

#searchSummaryContent #searchSummaryLabel {
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
}

#searchSummaryContent #searchSummary {
  border-left: 1px solid #5a4a35;
  padding: 0px 10px;
  font-size: 12px;
}

.search-result-search-summary-container #searchSummaryContent {
  float: none;
  width: auto;
}

/*
	Pagination
*/
.pagination-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 0 0.75rem;
  color: var(--txt-search-result-amount);
  font-size: 0.875rem;
}

.pagination-footer {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 15px;
  color: white;
  font-size: 0.875rem;
}

.pagination {
  display: flex;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.pagination li {
  display: flex;
  align-items: center;
}

.pagination li a {
  padding: 1px 3px 0px 4px;
  min-width: 16px;
  color: var(--txt-pagination);
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-button);
}

.pagination li a.active {
  color: var(--txt-pagination-active);
  background-color: var(--bg-pagination-active);
}

.pagination li a:hover:not(.active) {
  color: var(--txt-pagination-hover);
  background-color: var(--bg-pagination-hover);
}

/*
	Change Search
*/
.change-search {
  margin-bottom: 15px;
  border-radius: var(--border-radius-component);
  color: var(--txt-color);
  background-color: var(--bg-component);
}

.change-search-box {
  padding: 12px;
  display: flex;
  justify-content: space-between;
}

.change-search-box-left {
  display: flex;
  font-size: 0.9em;
}

.change-search-box-left > div {
  margin-right: 24px;
}

.change-search-box-left label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.change-search-box-left select {
  font-size: 0.875rem;
  border: var(--border-default-hidden);
  background-color: var(--bg-component);
  border-radius: var(--border-radius-button);
}

#SearchSortTypeSelection {
  margin-top: 4px;
}

.change-search-box-left .search-sort-type-label label {
  display: inline;
}

.change-search-box-left .search-sort-type-label i {
  vertical-align: top;
}

.change-search-box-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.change-search-box-right label {
  margin-right: 15px;
  display: none;
}

.change-search-box-right a {
  font-size: 0.875rem;
  color: var(--txt-color);
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  border-radius: var(--border-radius-button);
}

.change-search-box-right a.active {
  background-color: #777;
  color: var(--white-100);
}

.change-search-box-right a:hover:not(.active) {
  background-color: #999;
  color: var(--white-100);
}

/*
	Active Filter List
*/
.filter-active-list {
  padding: 5px 10px 5px 10px;
  border-bottom-right-radius: var(--border-radius-component);
  border-bottom-left-radius: var(--border-radius-component);
  border-top: var(--border-separator);
  background: var(--bg-component);
}

.filter-active-list .filter-item-enabled {
  background-color: transparent;
  font-weight: normal;
  display: inline-block;
  margin: 5px;
}

.filter-active-list .filter-item-enabled a {
  color: inherit;
}

.filter-amenities-reset-box {
  display: flex;
  justify-content: end;
  align-items: end;
  padding: 0.25rem 0.75rem;
}

.filter-amenities-reset-box #ResetAllFilterLink {
  display: inline-block;
  width: max-content;
  padding: 0.25rem;
  color: var(--error);
  font-weight: 600;
}

.filter-item a {
  color: var(--txt-color);
}

.filter-item a:hover,
.filter-item a:active,
.filter-amenities-reset-box a:hover {
  color: var(--primary-hover-color);
  text-decoration: none;
  cursor: pointer;
}

/* 
	Filter Icons 
*/
.filter-link-with-checkbox {
  cursor: pointer;
  display: block;
}

.filter-checkbox {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.25rem;
  cursor: pointer;
  background-position: -320px -600px;
}

.filter-checkbox.active {
  background-position: -320px -654px;
}

.filter-link-with-checkbox:hover .filter-checkbox,
.filter-checkbox:hover {
  background-position: -320px -654px;
}

.filter-link-with-checkbox:hover .filter-checkbox.active,
.filter-checkbox.active:hover {
  background-position: -320px -696px;
}

.filter-checkbox.disabled {
  cursor: auto;
}

/*
	Hotel Info List 
*/
#HotelInfoList {
  width: 100%;
  margin-bottom: 10px;
}

#HotelInfoList th {
  padding: 3px 5px;
  margin: 0;
  color: black;
  background: #bbb;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
}

#HotelInfoList td {
  padding: 3px 5px;
  margin: 0;
  background-color: white;
  border-top: 2px solid #bbb;
}

#HotelInfoList .columnBorder th,
#HotelInfoList .columnBorder td {
  border-right: 1px solid #fff;
}

#HotelInfoList th.noColumnBorder,
#HotelInfoList td.noColumnBorder {
  border-right: 0;
}

#HotelInfoList tr.rateplantype-activation-row > td {
  padding: 0;
  border-top: none;
}

#HotelInfoList tr.rateplantype-activation-row > td > div:first-child {
  border-top: 2px solid #bbb;
}

/*
	Hotel List Header
*/
#HotelInfoList .icon-hotellist-header-stars {
  display: block;
  font-size: 0;
  line-height: 0;
  background-position: 0px -212px;
  width: 19px;
  height: 16px;
}

#HotelInfoList .icon-hotellist-header-rating {
  display: block;
  font-size: 0;
  line-height: 0;
  background-position: -20px -212px;
  width: 18px;
  height: 16px;
}

/* 
	Table Header Definitions 
*/
#HotelInfoList th.stars {
  width: 20px;
  text-align: center;
}

#HotelInfoList th.rating {
  width: 28px;
  text-align: center;
}

#HotelInfoList th.hotel,
td.hotel {
  width: 232px;
}

#HotelInfoList th.rates {
  white-space: nowrap;
  min-width: 130px;
}

#HotelInfoList th.action {
  white-space: nowrap;
}

#HotelInfoList th.preferred form {
  text-align: center;
}

#HotelInfoList th.preferred input[type="checkbox"] {
  margin: 0.5em 0 0 0;
}

/*
	Special Table Row Definitions
*/
#HotelInfoList .hotelRowRating a:link,
#HotelInfoList .hotelRowRating a:visited {
  color: #7c8938;
  text-decoration: none;
}

#HotelInfoList .hotelRowRating a:hover,
#HotelInfoList .hotelRowRating a:active {
  color: #bb0f0f;
  text-decoration: none;
}

#HotelInfoList td.sorted {
  background: #e6eff5;
}

#HotelInfoList td.index span {
  display: block;
  text-align: center;
  min-width: 20px;
}

#HotelInfoList td.index a {
  color: inherit !important;
}

#HotelInfoList td.rating span.star {
  display: block;
}

#HotelInfoList td.rating span.star.star-0 {
  font-size: 0.85em;
}

#HotelInfoList td.rating > div {
  margin-top: 4px;
}

#HotelInfoList td .hotelname-box {
  font-size: 1.05em;
}

#HotelInfoList td.pics {
  padding: 1px;
  vertical-align: middle;
}

#HotelInfoList td.pics a {
  display: block;
}

#HotelInfoList td.pics img {
  font-size: 0;
  line-height: 0;
}

#HotelInfoList td.details {
  padding: 2px;
}

#HotelInfoList td.preferred {
  text-align: center;
}

#HotelInfoList td.distance {
  text-align: center;
}

#HotelInfoList td.price {
  vertical-align: top;
  padding-left: 10px;
}

#HotelInfoList td.price .filter-checkbox {
  left: auto;
  right: -26px;
  top: 4px;
}

#HotelInfoList td.price .price-from {
  color: #666;
  font-size: 0.75em;
  margin-right: 0.5em;
}

#HotelInfoList td.price ul {
  min-width: 160px;
  margin-left: 2em;
  list-style-type: disc;
  color: #666;
}

#HotelInfoList td.price .highlighted {
  color: #669933;
}

#HotelInfoList td.price .price-advantage {
  color: #cc6633;
  font-size: 95%;
  float: right;
}

#HotelInfoList td.price .price-advantage i {
  vertical-align: top;
}

#HotelInfoList td.price .currencyPrice,
#HotelInfoList td.price .currencySensitivePrice {
  display: inline-block;
}

#HotelInfoList td.price .breakfast {
  color: #666;
  font-size: 0.95em;
  padding-top: 2px;
}

#HotelInfoList td.price .prices {
  padding: 0 10px;
  white-space: nowrap;
  text-align: right;
}

#HotelInfoList td.price .price {
  font-size: 1.2em;
}

#HotelInfoList td.price .price-from {
  color: #666;
  font-size: 0.75em;
  margin-right: 2px;
}

#HotelInfoList td.price .hint {
  color: grey;
  padding: 0.5em 1em;
  font-size: 0.9em;
}

/*
	Row Action
*/
#HotelInfoList td.action {
  text-align: right;
  vertical-align: top;
}

#HotelInfoList td.action a {
  font-size: 0.9em;
  line-height: 1.6;
  margin-top: 1em;
}

#HotelInfoList td.action .currencyPrice,
#HotelInfoList td.action .currencySensitivePrice {
  display: inline-block;
}

#HotelInfoList td.action .price {
  font-size: 1.27em;
}

#HotelInfoList td.action .breakfast {
  font-size: 0.95em;
}

#HotelInfoList td.action .breakfast i {
  color: #666;
  margin-right: 2px;
}

#HotelInfoList td.price .provider-info {
  font-size: 11px;
  font-weight: normal;
  color: orangered;
  text-align: left;
  padding-top: 5px;
}

#HotelInfoList td.rateChangeNotice {
  padding: 2px 5px;
}

#HotelInfoList .preferredHotel,
#HotelInfoList .contractedHotel {
  width: 21px;
  height: 20px;
  background-position: -250px -1600px;
  display: inline-block;
}

/*
	Hotel-Compact-List
*/
.hotel-compact-list .content-box {
  position: relative;
  margin-bottom: 0.5rem;
}

.hotel-compact-list-row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 140px 1.1fr fit-content(100%) 1fr fit-content(100%);
  max-height: 160px;
}

.hotel-compact-list-row .hotel-image-box {
  line-height: 0;
}

.hotel-compact-list-row .hotel-name-address-box {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0.125rem;
  padding: 0.25rem 0;
}

.hotel-compact-list-row .hotel-name {
  font-size: 1rem;
}

.hotel-compact-list-row .hotel-name h2 {
  line-height: 1.25;
  font-size: inherit;
}

.hotel-compact-list-row .hotel-name a {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.25px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hotel-compact-list-row .hotel-name .favorite-box {
  margin: 0;
}

.hotel-compact-list-row .hotel-address {
  color: var(--txt-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.hotel-compact-list-row .hotel-address::before {
  font-family: "Font Awesome 5 Free";
  content: "\f3c5";
  font-weight: 800;
}

.hotel-compact-list-row .hotel-ratings {
  margin: 0.25rem 0;
}

.hotel-compact-list-row .hotel-ratings .review-speech-bubble {
  margin-right: 1rem;
}

.hotel-compact-list-row .hotel-ratings .preferredHotel,
.hotel-compact-list-row .hotel-ratings .contractedHotel {
  float: right;
  margin-right: 5px;
  vertical-align: middle;
}

.hotel-compact-list-row .hotel-ratings .sustainable-marker-container,
.hotel-compact-list-row .hotel-ratings .hotel-awardprograms-icons-container {
  display: inline-block;
}

.hotel-compact-list-row .hotel-ratings .hotel-awardprograms-icons-container {
  position: relative;
  top: 3px;
}

.hotel-compact-list-row .hotel-icons-box {
  display: flex;
  justify-content: space-between;
}

.hotel-compact-list-row .hotel-stars {
  display: inline-block;
  margin-right: 15px;
}

.hotel-compact-list-row .hotel-stars .star.star-0 {
  font-size: inherit;
  letter-spacing: normal;
}

.hotel-compact-list-row .hotel-services-distances {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
  border: var(--border-separator);
  border-top: none;
  border-bottom: none;
}

.hotel-compact-list-row .hotel-distances {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--txt-color);
}

.hotel-compact-list-row .hotel-distances .distance-item {
  width: 30px;
  display: flex;
  justify-content: center;
}

.hotel-compact-list-row .hotel-distances .distance-item-value {
  font-size: 0.9em;
}

.hotel-compact-list-row .hotel-services,
.hotel-compact-list-row .hotel-billing-awards {
  display: flex;
  gap: 0.5rem;
}

.hotel-compact-list-row .hotel-services .service-item,
.hotel-compact-list-row .hotel-billing-awards .service-item {
  width: 30px;
  display: flex;
  justify-content: center;
}

.hotel-compact-list-row .hotel-billing-awards {
  display: flex;
}

.hotel-compact-list-row .hotel-billing-awards .hotel-award-item {
  width: 30px;
  display: flex;
  justify-content: center;
}

.hotel-compact-list-row .hotel-prices {
  padding: 0.5rem 0;
}

.hotel-compact-list-row .hotel-prices .catalog-room-rate {
  text-align: right;
  color: var(--txt-color);
}

/* TODO - Does this class exist in our HTML? - mkaesch 18.09.2025 */
.hotel-compact-list-row .hotel-prices .catalog-room-rate .price .price-value {
  font-size: 1rem;
  font-weight: bold;
  padding-left: 5px;
}

.hotel-compact-list-row
  .hotel-prices
  .catalog-room-rate
  .price
  .price-value
  .currencyPrice {
  display: inline-block;
}

.hotel-compact-list-row .price span:not(.price-advantage-percent) {
  font-size: 1.125rem;
}

.hotel-compact-list-row .hotel-prices .catalog-room-rate .breakfast {
  font-size: 0.875rem;
  color: var(--txt-color);
}

.hotel-compact-list-row .hotel-prices .room-rate {
  color: var(--txt-color);
}

.hotel-compact-list-row .hotel-prices .room-rate:not(:first-child) {
  padding-top: 0.5em;
}

.hotel-compact-list-row .hotel-prices .room-rate .price {
  float: right;
  text-align: right;
  line-height: 1.2;
}

.hotel-compact-list-row .hotel-prices .room-rate .price-info {
  font-size: 0.875rem;
}

.hotel-compact-list-row
  .hotel-prices
  .room-rate:first-child
  .price
  .currencySensitivePrice {
  font-size: 125%;
}

.hotel-compact-list-row .hotel-prices .room-rate .price-advantage {
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--price-free-cancel);
}

.hotel-compact-list-row .hotel-prices .room-rate .price-advantage i {
  vertical-align: top;
}

.hotel-compact-list-row .hotel-prices .room-rate .refundable-info {
  display: inline;
  color: var(--txt-color);
  font-size: 1em;
}

.hotel-compact-list-row .hotel-prices .room-rate .additional-info {
  padding-left: 0.5rem;
  color: var(--txt-color);
  font-size: 0.75rem;
}

.hotel-compact-list-row .hotel-prices .room-rate .provider-info {
  display: inline;
  font-size: 11px;
  color: var(--provider-highlight);
  margin-right: 2em;
}

.more-data-link {
  color: var(--bg-button-extend);
  transform: translateY(-4px);
  font-weight: 500;
}

.more-data-link:hover {
  filter: brightness(1.5);
}

.more-data-link .fas {
  font-size: 1.5rem;
  margin-right: 0.25rem;
  transform: translateY(-1px);
  transition: transform 0.5s ease-out;
}

.more-data-link:hover .fas {
  transform: scale(1.3) translateY(-2px);
}

.hotel-compact-list-row .hotel-prices .button-box {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  text-align: right;
}

.hotel-compact-list-row .hotel-actions {
  padding: 0.25rem;
  padding-left: 0;
}

.hotel-compact-list-row .hotel-actions .button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.25rem;
  height: 100%;
  width: 100%;
  font-size: 0.875rem;
  color: var(--white-100);
  border-radius: 7px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.hotel-compact-list-row .hotel-actions .button .fa:before {
  display: inline-block;
  content: "\f054";
  font-size: 1.875rem;
  transform: scale(1);
  transition: transform 0.25s ease;
}

.hotel-compact-list-row .hotel-actions .button:hover .fa:before {
  transform: scale(1.25);
  transform-origin: center;
}

.hotel-actions-button-text {
  text-transform: none;
  font-weight: 600;
}

/*
	HotelMediaRowCompoennt
*/
.hotelMediaRow .data-table {
  width: 100%;
}

.hotelMediaRow .data-row {
  display: grid;
  grid-template-columns: 220px 4.5fr 4fr;
  gap: 0 0.5rem;
  overflow: hidden;
  max-height: 650px;
  transition: max-height 0.5s ease-out;
}

.hotelMediaRow .fixed-height {
  max-height: 276px;
}

.hotelMediaRow .data-row:has(.scoring-result-info),
.hotelMediaRow:has(.scoring-result-info) .fixed-height {
  max-height: none;
}

.hotelMediaRow .image-box {
  position: relative;
  border-bottom-right-radius: var(--border-radius-component);
  transition: border-radius 0.5s ease-out;
}

.hotelMediaRow .slick-dots {
  display: flex;
  justify-content: space-around;
  bottom: 15px;
  padding: 0 3rem;
}

.hotelMediaRow .slick-dots li {
  margin: 0;
}

.hotelMediaRow .slick-dots li button {
  width: 1rem;
  height: 1rem;
  padding: 0;
  font-size: 0;
  transform: scale(0.65);
  transition: transform 0.15s ease-out 0.25s;
}

.hotelMediaRow .slick-dots li button:before {
  content: "";
  background-color: var(--black-15);
  outline: 3px solid var(--black-15);
  border: 4px solid var(--black-15);
  border-radius: 50%;
  outline-offset: -1px;
  opacity: 0.85;
  transition:
    background-color 0.35s ease-in-out,
    border-color 0.15s ease-in-out;
}

.hotelMediaRow .slick-dots li button:hover {
  transform: scale(0.85);
  transition: transform 0.15s ease-out;
}

.hotelMediaRow .slick-dots li button:hover:before {
  border-color: var(--primary-color);
}

.hotelMediaRow .slick-dots li.slick-active button:before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  outline-color: var(--primary-color);
  opacity: 1;
}

.hotelMediaRow img {
  transition:
    filter 0.3s ease,
    transform 0.3s ease-out;
}

.hotelMediaRow:hover .image-box img {
  transform: scale(1.015);
  transform-origin: center;
  filter: sepia(12.5%);
}

.fixed-height .image-box {
  border-bottom-right-radius: 0;
}

.hotelMediaRow .data-row .data-cell.image {
  width: 220px;
}

.hotelMediaRow .data-row .data-cell.image .image-box {
  overflow: hidden;
}

.hotelMediaRow .data-row .data-cell.image .slick-slider {
  margin: 0;
}

.hotelMediaRow .image-slick .slick-prev::before {
  font-size: 23px;
  display: block;
  position: absolute;
  left: 15px;
  bottom: 15px;
}

.hotelMediaRow .image-slick .slick-next::before {
  font-size: 23px;
  display: block;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.hotelMediaRow .image-slick .slick-prev {
  z-index: 90;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  transform: none;
}

.hotelMediaRow .image-slick .slick-next {
  z-index: 90;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  transform: none;
}

.hotelMediaRow .link-box {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  font-size: 0.875rem;
}

.hotelMediaRow .link-box .note-hotel-link {
  position: absolute;
  left: 0;
  padding: 0.125rem 0.375rem;
  color: var(--txt-color);
  text-transform: capitalize;
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

.hotelMediaRow .link-box a:not(.note-hotel-link) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bg-button-extend);
  font-weight: 500;
}

.hotelMediaRow .link-box a:not(.note-hotel-link):hover {
  filter: brightness(1.5);
}

.hotelMediaRow .link-box .fas {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  transform: translateY(-1px);
  transition: transform 0.5s ease-out;
}

.hotelMediaRow .link-box .more-details:hover .fas {
  transform: scale(1.3) translateY(-2px);
}

.hotelMediaRowDetails .preferredHotel,
.hotelMediaRowDetails .contractedHotel {
  float: left;
  margin: 0 10px 0 0;
}

.hotelMediaRow .data-row .data-cell.hotel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.5rem 0;
  padding: 0.5rem 0 0.5rem 0.25rem;
}

.hotelMediaRow .data-row .data-cell.prices {
  border-left: var(--border-separator);
  padding: 0.75rem 0.75rem 0.5rem 0.5rem;
  text-align: right;
}

.hotelMediaRowAdditionalInfo {
  height: 480px;
  transition: height 0.5s ease;
}

.hotelMediaRowAdditionalInfo:empty,
.hotelMediaRowAdditionalInfo:has(> div[style="display: none;"]) {
  height: 0px;
}

.hotelMediaRow .data-row .data-cell.prices .hint {
  font-size: 0.875rem;
}

.hotelMediaRow .data-row .data-cell .button {
  margin-top: 4px;
}

.hotelMediaRowHotelName h2 {
  color: var(--txt-color);
  font-size: 1.125rem;
  line-height: 1.2;
}

.hotelMediaRowHotelName a {
  color: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hotelMediaRowHotelAdress {
  color: var(--txt-color);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.hotelMediaRowHotelAdress::before {
  font-family: "Font Awesome 5 Free";
  content: "\f3c5";
  font-weight: 800;
}

.hotelMediaRowSymbols .review-speech-bubble {
  margin-right: 20px;
}

.hotelMediaRowSymbols .preferredHotel,
.hotelMediaRowSymbols .contractedHotel {
  float: right;
  margin-right: 5px;
  vertical-align: middle;
}

.hotelMediaRowStars {
  display: inline-block;
  margin-right: 20px;
}

.hotelMediaRowStars .star.star-0 {
  font-size: inherit;
  letter-spacing: normal;
}

.hotelMediaRow .sustainable-marker-container,
.hotelMediaRow .hotel-awardprograms-icons-container {
  display: inline-flex;
}

.hotel-info-hotel-rating-box .hotel-info-preferred-hotel {
  display: inline-flex;
  vertical-align: middle;
}

.hotelMediaRow .hotel-security-level {
  margin-bottom: 0.5em;
}

.hotel-media-row-rates .catalog-room-rate {
  text-align: right;
}

.hotel-media-row-rates .catalog-room-rate .price .price-value {
  font-size: 130%;
  font-weight: bold;
  padding-left: 5px;
}

.hotel-media-row-rates .catalog-room-rate .price .price-value .currencyPrice {
  display: inline-block;
}

.hotel-media-row-rates .catalog-room-rate .breakfast {
  font-size: 0.875rem;
}

.hotel-media-row-rates .room-type-group {
  border-bottom: var(--border-separator);
  text-align: left;
  color: #666;
}

.hotel-media-row-rates {
  position: relative;
  height: auto;
  text-align: left;
}

.hotel-media-row-rates.collapsed {
  height: 100%;
  max-height: 176px;

  overflow: hidden;
}

.hotel-media-row-rates.collapsed:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    var(--bg-component) 90%
  );
  width: 100%;
  height: 4em;
}

.hotel-media-row-rates .room-rate {
  margin-bottom: 0.3em;
  position: relative;
}

.hotel-media-row-rates .room-rate:nth-child(2) {
  margin-bottom: 0;
}

.hotel-media-row-rates .room-rate ul {
  margin-left: 2em;
  font-size: 0.875rem;
  list-style-type: disc;
}

.hotel-media-row-rates .room-rate .price-advantage {
  color: var(--price-free-cancel);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.hotel-media-row-rates .room-rate .price-advantage i {
  vertical-align: top;
}

.hotel-media-row-rates .room-rate .price {
  float: right;
  text-align: right;
  font-weight: 600;
  line-height: 1;
}

.hotel-media-row-rates .room-rate .price .currencyPrice,
.hotel-media-row-rates .room-rate .price .currencySensitivePrice {
  font-size: 125%;
  color: var(--txt-color);
}

.hotel-media-row-rates .provider-info {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--provider-highlight);
}

/*
	Scoring Result
*/
.hotelMediaRowPrice {
  position: relative;
}

.hotelMediaRowPrice .scoring-result-info {
  width: 350px;
  position: absolute;
  top: 0;
  right: -375px;
  font-size: 11px;
  font-weight: bold;
  color: orange;
  text-align: left;
}

.scoring-result {
  display: table;
}

.scoring-result .row {
  display: table-row;
}

.scoring-result .cell {
  display: table-cell;
  padding: 0 8px 1px 0;
}

.right .hint {
  padding: 20px 5px 0 20px;
  color: grey;
  text-align: justify;
  font-size: 11px;
  font-style: italic;
}

.hotel-media-row-short-description {
  float: left;
  clear: left;
  margin: 10px 0 15px 0;
  font-size: 13px;
  text-align: justify;
  width: 440px;
  cursor: pointer;
  height: 100%;
}

.hotel-media-row-short-description-height {
  height: 66px !important;
}

.hotel-media-row-short-description p {
  margin: 0 0 5px 0;
  padding: 0;
}

.hotel-media-row-short-description br {
  line-height: 0;
  content: " ";
  display: block;
}

.hotel-media-row-short-description ul {
  padding: 0 0 5px 15px;
  margin: 0;
}

.hotel-media-row-short-description li {
  text-align: left;
}

.hotelMediaRowRating {
  font-size: 12px;
  font-weight: bold;
  float: left;
  margin-left: 25px;
  padding-top: 2px;
  white-space: nowrap;
}

.hotelMediaRowRating img {
  vertical-align: middle;
}

.hotelMediaRowRating a:link,
.hotelMediaRowRating a:visited {
  color: #7c8938;
  text-decoration: none;
}

.hotelMediaRowRating a:hover,
.hotelMediaRowRating a:active {
  color: var(--primary-hover-color);
  text-decoration: none;
}

.hotelMediaRowInfoIcons {
  display: flex;
  align-items: center;
}

.hotelMediaRowInfoIcons .hotel-billing-awards {
  display: inline-block;
  font-size: 0;
}

.hotelMediaRowInfoIcons .service-item {
  padding-right: 10px;
}

.hotelMediaRowInfoIcons .sustainable-marker-container {
  display: inline-block;
  margin-left: 10px;
}

.hotelMediaRowDistance {
  margin-left: auto;
  display: inline-block;
}

.hotelMediaRowDistance .hotelMediaRowDistanceIconTable td {
  padding: 0 !important;
  font-size: 0.875rem;
  color: var(--txt-color);
}

.hotelMediaRowDistance .distance-item {
  padding: 0 4px;
}

.hotelMediaRowAdditionalInfo > div {
  margin: 0.75rem 0.75rem 0;
  border: 1px solid var(--bg-hotel-add-detail);
  border-top: none;
  border-radius: var(--border-radius-component);
}

.search-result-list-detail-price-link {
  display: block;
  font-size: 16px;
  line-height: 1.1em;
}

.search-result-list-detail-price-link:link,
.search-result-list-detail-price-link:visited {
  text-decoration: none;
  color: inherit;
}

.search-result-list-detail-price-link.good-price .firstCurrency,
.search-result-list-detail-price-link.good-price .currencyPrice,
.search-result-list-detail-price-link.good-price .rateChangeMark {
  color: #669933;
}

.search-result-list-detail-price-link.good-price .secondCurrency {
  color: #444444;
}

.search-result-list-detail-price-link .currencyPrice {
  display: inline;
}

.search-result-list-detail-price-link .currencySensitivePrice {
  display: inline;
}

.search-result-list-detail-price-link .firstCurrency {
  display: inline;
}

.search-result-list-detail-price-link .secondCurrency {
  font-size: 10px;
}

.search-result-list-detail-price {
  display: block;
  font-size: 14px;
  line-height: 1.1em;
}

.search-result-list-detail-price .currencyPrice {
  display: inline;
}

.search-result-list-detail-price .currencySensitivePrice {
  display: inline;
}

.search-result-list-detail-price .firstCurrency {
  display: inline;
}

.search-result-list-detail-price .secondCurrency {
  font-size: 11px;
}

.hotelMediaRowBestPriceAdvantage {
  position: absolute;
  right: 146px;
}

/*
	Events
*/
.events-header {
  background-color: var(--bg-banner-header);
  padding: 0.5rem 1rem;
  color: var(--txt-color);
  font-size: 1rem;
  font-weight: 600;
}

.events-list-box {
  margin-bottom: 1.25rem;
  padding: 1rem;
  color: var(--txt-color);
  background: var(--bg-component);
  border-radius: var(--border-radius-component);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid var(--bg-banner-header);
}

.events-list {
  display: table;
  width: 100%;
  font-weight: bold;
}

.events-list-row {
  display: table-row;
  font-size: 0.875rem;
}

.events-list-cell {
  display: table-cell;
  vertical-align: top;
  text-align: left;
  padding-bottom: 5px;
}

.events-list-cell.city {
  width: 30%;
}

.events-list-cell.date-start {
  white-space: nowrap;
  padding-left: 30px;
}

.events-list-cell.date-end {
  white-space: nowrap;
  padding-right: 30px;
}

.events-list-cell.date-separator {
  text-align: center;
  padding-left: 5px;
  padding-right: 7px;
}

.events-list-cell.event {
  width: 60%;
}

.events-list-cell.event .event-description {
  font-weight: normal;
  font-size: 0.95em;
}

.events-footer {
  padding-top: 10px;
  border-top: var(--border-separator);
}

.events-footer .events-source {
  font-size: 0.875rem;
}

.events-footer .events-action {
  font-size: 0.9em;
}

.icon-phone {
  width: 100px;
  height: 100px;
  background-position: -200px -600px;
  background-repeat: no-repeat;
}

[data-theme="dark"] .icon-phone {
  filter: invert(1);
}

.search-alternative-hint-box {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.25rem;
  padding-left: 2rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--txt-color);
  background: var(--bg-component);
  border-radius: var(--border-radius-component);
}

.search-alternative-hint-box-title {
  font-size: 1rem;
}

.search-alternative-hint-box ul {
  margin: 0;
  padding: 0 0 0 10px;
}

.search-alternative-hint-box ul li {
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 0.875rem;
  list-style: none;
}

.search-alternative-hint-box ul li div.text {
  margin-left: 20px;
  padding-bottom: 5px;
}

/* 
	new css styles START for ajax reloading searchResultPage need to refactor cause duplicate in hotel.css 
*/
ul.services-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem 0.5rem;
  list-style-type: none;
}

/*
	Tabs
*/
.tabs {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.5rem 1rem 0.25rem;
  list-style: none;
  font-size: 0.875rem;
  background-color: var(--bg-hotel-add-detail);
  border-top-left-radius: var(--border-radius-component);
  border-top-right-radius: var(--border-radius-component);
}

.tabs li.currentTab {
  padding: 4px 10px;
  background: var(--bg-component);
}

.tabs li.tab {
  float: left;
  margin-right: 20px;
}

.tabs li a {
  display: block;
  padding: 4px 10px;
  color: #5a4a35;
}

.current {
  font-weight: bolder;
}

.updateHotel {
  height: 400px;
  margin-bottom: 1rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.priceWrapper {
  padding-top: 7px;
  float: right;
}

.hotelInfoDescriptionSmall {
  padding: 0.5rem 0.5rem 1rem;
  text-align: justify;
}

.basicInfo-small {
  width: 100%;
}

.basicInfo-small .currencyPrice {
  display: inline;
}

/*
	HotelInfoDetailsComponent
*/
.hotelMediaRow h3 {
  margin-top: 1rem;
  font-size: 1rem;
}

.hotelInfoAcceptedCreditCards .container {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.hotelInfoAboutItem {
  border-bottom: var(--border-separator);
  margin-bottom: 10px;
  line-height: 20px;
  clear: left;
  padding: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.hotelInfoAbout-small {
  float: left;
  padding: 0px !important;
  margin: 0px !important;
  background: no-repeat !important;
  width: 110px;
  font-size: 11px;
  padding-top: 3px !important;
}

/*
	Hotel Info - Services
*/
.hotel-info-service-list-small {
  width: 99%;
  margin-bottom: 15px;
}

.hotel-info-service-list-small td.hotel-info-service-list-small-row-1 {
  width: 290px;
  vertical-align: top;
  padding: 0;
}

.hotel-info-service-list-small td.hotel-info-service-list-small-row-2 {
  width: 320px;
  vertical-align: top;
  padding: 0;
}

.hotel-info-service-list-small td.hotel-info-service-list-small-row-space {
  width: 30px;
  padding: 0;
  line-height: 0;
}

.section .hotel-info-service-list-small h3 {
  font-weight: 500;
  padding-top: 0.25rem;
}

.hotel-info-service-sublist-small {
  width: 100%;
}

.hotel-info-service-sublist-small th,
.hotel-info-service-sublist-small td {
  border-bottom: var(--border-separator);
  padding: 3px 5px 3px 0;
}

.hotel-info-service-list-small-row-1 .hotel-info-service-sublist-small th {
  width: 40%;
  border-top: none;
  color: var(--txt-color);
}

.hotel-info-service-list-small-row-1 .hotel-info-service-sublist-small td {
  width: 60%;
}

.hotel-info-service-list-small-row-2 .hotel-info-service-sublist-small th {
  width: 60%;
  border-top: none;
  color: var(--txt-color);
}

.hotel-info-service-list-small-row-2 .hotel-info-service-sublist-small td {
  width: 40%;
}

/*
	Hotel Info - Benefit
*/
.hotel-info-benefit-box-small {
  background-color: #eceedf;
  border: 1px solid #7c8938;
  width: 640px;
  padding: 5px;
  margin-bottom: 15px;
}

.hotel-info-benefit-text-box-small {
  margin-left: 40px;
  text-align: left;
  line-height: 1.4em;
}

.hotel-info-benefit-header-small {
  color: #7c8938;
  font-weight: bold;
}

.closeButton {
  color: var(--bg-button-close);
  background-image: none;
  cursor: pointer;
}

.closeButton::before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
}

.openButton {
  background-position: -59px -235px;
  width: 15px;
  height: 15px;
  margin: 3px;
  float: right;
  cursor: pointer;
}

.linkInactive {
  pointer-events: none;
  cursor: default;
}

/*
	Hotel Info - Location
*/

.section:has(.location-description) {
  padding: 0;
}

.updateHotel .location-description h3 {
  font-size: 1rem;
}

/* new css styles END for ajax reloading searchResultPage need to refactor cause duplicate in hotel.css */

/*
	Price Matrix
*/
.price-matrix-box {
  margin-bottom: 10px;
}

.price-matrix-box-header .stars {
  font-size: 150%;
  padding-right: 15px;
}

.price-matrix-box-header .review-grade-label {
  font-size: 120%;
}

.price-matrix-box-header .review-grade-value {
  font-size: 150%;
}

.price-matrix .room-type-group {
  margin: 2px 0 1px 0;
  font-size: 115%;
  font-style: italic;
  color: grey;
}

.price-matrix .scroll-box {
  overflow-x: scroll;
  width: 800px;
  white-space: nowrap;
}

.price-matrix .hotel {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  position: relative;
  line-height: normal;
}

.price-matrix .hotel .name {
  padding: 2px 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 90%;
  color: #eee;
  background-color: rgba(0, 0, 0, 0.4);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.price-matrix .hotel .footer {
  background-color: rgba(0, 0, 0, 0.6);
  display: table;
  width: 100%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: white;
}

.price-matrix .hotel .distance {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}

.price-matrix .hotel .unit {
  font-size: 85%;
  color: #eee;
}

.price-matrix .hotel .price {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  padding: 1px 7px;
  font-size: 120%;
  font-weight: bold;
  font-style: italic;
}

.price-matrix .hotel.highlight .price {
  color: #a1e55e;
}

.price-matrix .hotel .currency {
  font-size: 80%;
  font-weight: normal;
  color: #eee;
}

.price-matrix .hotel.highlight .currency {
  color: #a1e55e;
}

/*
	RatePlanType Activation
*/
.rateplantype-activation-box,
.user-business-customer-box {
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.18;
}

.rateplantype-activation-box h4,
.user-business-customer-box h4 {
  font-size: 1rem;
  padding-bottom: 1rem;
}

.rateplantype-activation-box .name i {
  vertical-align: top;
  color: var(--txt-color);
}

.rateplantype-activation-box .note,
.user-business-customer-box .note {
  font-size: 0.875rem;
  padding-top: 1rem;
}

ul.rateplantype-activation-list {
  margin: 0;
  padding-left: 1.2rem;
}

ul.rateplantype-activation-list li {
  margin-right: 0.75rem;
  display: inline-block;
  width: fit-content;
  padding-bottom: 3px;
  list-style-type: none;
  position: relative;
}

ul.rateplantype-activation-list li label {
  padding-left: 50px;
  cursor: pointer;
}

span.filter-switch-pane {
  position: absolute;
  width: 36px;
  height: 18px;
  top: 0;
  left: 0;
  border-radius: 9px;
  background-color: var(--bg-switch);
}

label.checked span.filter-switch-pane {
  background-color: #1abb04;
}

label.checked-dummy span.filter-switch-pane {
  background-color: #afe6a8;
}

span.filter-switch-button {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: var(--bg-component);
}

label.checked span.filter-switch-button,
label.checked-dummy span.filter-switch-button {
  left: 20px;
}

label.checked-dummy span.name {
  color: #999;
}

/*
	Filter overlay
*/
.FilterOverlay {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 1001;
  height: 100%;
  width: 100%;
  background: #000;
  filter: alpha(opacity = 60);
  -moz-opacity: 0.6;
  opacity: 0.6;
  display: none;
}

.FilterBox {
  position: fixed;
  top: -200px;
  left: 30%;
  right: 30%;
  background: #bbb;
  padding: 20px;
  border: 2px solid #777;
  border-radius: 20px;
  box-shadow: 0 1px 5px #333;
  z-index: 1002;
}

/*
	Favorite Hotels
*/
#HotelInfoList td .hotelname-box .favorite-box {
  float: right;
  margin: 0 0 5px 15px;
  font-size: 110%;
}

.favorite-box.inactive .fa-heart-o::before {
  font-weight: 400;
}

.favorite-box,
.favorite-box a {
  color: var(--primary-color);
}

.favorite-box.inactive {
  color: var(--txt-color);
}

.favorite-box.favorite a.favorite-link-add {
  display: none;
}

.favorite-box.nonfavorite a.favorite-link-remove {
  display: none;
}

a.favorite-link-add:hover i:before {
  content: "\f004";
  color: #e31f21;
  cursor: pointer;
}

a.favorite-link-remove:hover i:before {
  content: "\f1f8";
}

.toolTip.favorite-info {
  width: 270px;
}

.toolTip.favorite-info div:nth-child(1) {
  font-size: 120%;
  font-weight: bold;
}

.toolTip.favorite-info div:nth-child(2) {
  margin: 0.5em 0;
}

.toolTip.favorite-info a {
  color: inherit;
}

/*
	Hotel Security Level
*/
.hotel-security-level {
  display: flex;
  align-items: center;
}

.hotel-security-level-icon-box {
  vertical-align: middle;
  line-height: 0;
}

.hotel-security-level-icon {
  display: inline-block;
  background-position: center;
  background-size: cover;
}

.hotel-security-level-text {
  padding-left: 8px;
  font-size: 12px;
  line-height: 1.2;
}
.hotel-security-level-text:before {
  white-space: pre-wrap;
}

/*
	Hotel Awards Filter
*/
.filter-awards-text-container {
  display: inline-block;
  margin-right: 6px;
}

/*
	Misc
*/
.sustainable-marker-container {
  margin-right: 20px;
}

.hotel-awardprograms-icons-container .awardprograms-icons-container img {
  margin-right: 4px;
}

img[title="Green Key"] {
  border-radius: 4px;
}
.snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #cc3a1b;
    color: #000;
    text-align: center;
    border-radius: 25px;
    padding: 16px;
    position: fixed;
    z-index: 999999;
    left: 85%;
    top: 140px;
    font-size: 17px;
}
.snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 140px; opacity: 1;}
}

@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 140px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {top: 140px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}

@keyframes fadeout {
    from {top: 140px; opacity: 1;}
    to {top: 0; opacity: 0;}
}
/*
	Use of Sprites
	- OpenStreetMap uses class 'olButton'
	- Fact list on Home uses 'li:before'
	- UI to top uses '#toTop' and '#toTopHover'
*/
.use-sprites,
.olButton,
ul.fact-list li:before,
#toTop,
#toTopHover {
  background-image: url(../img-build/sprite_2025-03-07.png);
  background-repeat: no-repeat;
}

.autocompleter-list-item .use-sprites:not(.flag) {
  background-image: none;
}

.info-icon {
  display: block;
  position: absolute;
  top: -3px;
  right: -15px;
  width: 12px;
  height: 12px;
  background-position: -40px -212px;
  background-repeat: no-repeat;
}

.flag {
  display: inline-block;
  width: 1rem;
  height: 11px;
  margin-right: 0.75rem;
  line-height: 0;
  font-size: 0;
  border-radius: 0.125rem;
  transform: scale(1.25);
}

.flag-none {
  border: 0 !important;
  height: 0 !important;
}

/*line1*/
.flag-ad {
  background-position: 0px -816px;
}

.flag-ae {
  background-position: -28px -816px;
}

.flag-af {
  background-position: -56px -816px;
}

.flag-ag {
  background-position: -84px -816px;
}

.flag-ai {
  background-position: -112px -816px;
}

.flag-al {
  background-position: -140px -816px;
}

.flag-am {
  background-position: -168px -816px;
}

.flag-an {
  background-position: -196px -816px;
}

.flag-ao {
  background-position: -224px -816px;
}

.flag-ar {
  background-position: -252px -816px;
}

.flag-as {
  background-position: -280px -816px;
}

/*line2*/
.flag-at {
  background-position: 0px -844px;
}

.flag-au {
  background-position: -28px -844px;
}

.flag-aw {
  background-position: -56px -844px;
}

.flag-ax {
  background-position: -84px -844px;
}

.flag-az {
  background-position: -112px -844px;
}

.flag-ba {
  background-position: -140px -844px;
}

.flag-bb {
  background-position: -168px -844px;
}

.flag-bd {
  background-position: -196px -844px;
}

.flag-be {
  background-position: -224px -844px;
}

.flag-bf {
  background-position: -252px -844px;
}

.flag-bg {
  background-position: -280px -844px;
}

/*line3*/
.flag-bh {
  background-position: 0px -872px;
}

.flag-bi {
  background-position: -28px -872px;
}

.flag-bj {
  background-position: -56px -872px;
}

.flag-bm {
  background-position: -84px -872px;
}

.flag-bn {
  background-position: -112px -872px;
}

.flag-bo {
  background-position: -140px -872px;
}

.flag-br {
  background-position: -168px -872px;
}

.flag-bs {
  background-position: -196px -872px;
}

.flag-bt {
  background-position: -224px -872px;
}

.flag-bv {
  background-position: -252px -872px;
}

.flag-bw {
  background-position: -280px -872px;
}

/*line4*/
.flag-by {
  background-position: 0px -900px;
}

.flag-bz {
  background-position: -28px -900px;
}

.flag-ca {
  background-position: -56px -900px;
}

.flag-cc {
  background-position: -84px -900px;
}

.flag-cd {
  background-position: -112px -900px;
}

.flag-cf {
  background-position: -140px -900px;
}

.flag-cg {
  background-position: -168px -900px;
}

.flag-ch {
  background-position: -196px -900px;
}

.flag-ci {
  background-position: -224px -900px;
}

.flag-ck {
  background-position: -252px -900px;
}

.flag-cl {
  background-position: -280px -900px;
}

/*line5*/
.flag-cm {
  background-position: 0px -928px;
}

.flag-cn {
  background-position: -28px -928px;
}

.flag-zh {
  background-position: -28px -928px;
}

.flag-co {
  background-position: -56px -928px;
}

.flag-cr {
  background-position: -84px -928px;
}

.flag-cs {
  background-position: -112px -928px;
}

.flag-cu {
  background-position: -140px -928px;
}

.flag-cv {
  background-position: -168px -928px;
}

.flag-cx {
  background-position: -196px -928px;
}

.flag-cy {
  background-position: -224px -928px;
}

.flag-cz {
  background-position: -252px -928px;
}

.flag-de {
  background-position: -280px -928px;
}

/*line6*/
.flag-dj {
  background-position: 0px -956px;
}

.flag-dk {
  background-position: -28px -956px;
}

.flag-dm {
  background-position: -56px -956px;
}

.flag-do {
  background-position: -84px -956px;
}

.flag-dz {
  background-position: -112px -956px;
}

.flag-ec {
  background-position: -140px -956px;
}

.flag-ee {
  background-position: -168px -956px;
}

.flag-eg {
  background-position: -196px -956px;
}

.flag-eh {
  background-position: -224px -956px;
}

.flag-england {
  background-position: -252px -956px;
}

.flag-er {
  background-position: -280px -956px;
}

/*line7*/
.flag-es {
  background-position: 0px -984px;
}

.flag-et {
  background-position: -28px -984px;
}

.flag-fam {
  background-position: -56px -984px;
}

.flag-fi {
  background-position: -84px -984px;
}

.flag-fj {
  background-position: -112px -984px;
}

.flag-fk {
  background-position: -140px -984px;
}

.flag-fm {
  background-position: -168px -984px;
}

.flag-fo {
  background-position: -196px -984px;
}

.flag-fr {
  background-position: -224px -984px;
}

.flag-ga {
  background-position: -252px -984px;
}

.flag-gb,
.flag-en_GB {
  background-position: -280px -984px;
}

/*line8*/
.flag-gd {
  background-position: 0px -1012px;
}

.flag-ge {
  background-position: -28px -1012px;
}

.flag-gh {
  background-position: -56px -1012px;
}

.flag-gi {
  background-position: -84px -1012px;
}

.flag-gl {
  background-position: -112px -1012px;
}

.flag-gm {
  background-position: -140px -1012px;
}

.flag-gn {
  background-position: -168px -1012px;
}

.flag-gp {
  background-position: -196px -1012px;
}

.flag-gq {
  background-position: -224px -1012px;
}

.flag-gr {
  background-position: -252px -1012px;
}

.flag-gs {
  background-position: -280px -1012px;
}

/*line9*/
.flag-gt {
  background-position: 0px -1040px;
}

.flag-gu {
  background-position: -28px -1040px;
}

.flag-gw {
  background-position: -56px -1040px;
}

.flag-gy {
  background-position: -84px -1040px;
}

.flag-hk {
  background-position: -112px -1040px;
}

.flag-hn {
  background-position: -140px -1040px;
}

.flag-hr {
  background-position: -168px -1040px;
}

.flag-ht {
  background-position: -196px -1040px;
}

.flag-hu {
  background-position: -224px -1040px;
}

.flag-id {
  background-position: -252px -1040px;
}

.flag-ie {
  background-position: -280px -1040px;
}

/*line10*/
.flag-il {
  background-position: 0px -1068px;
}

.flag-in {
  background-position: -28px -1068px;
}

.flag-io {
  background-position: -56px -1068px;
}

.flag-iq {
  background-position: -84px -1068px;
}

.flag-ir {
  background-position: -112px -1068px;
}

.flag-is {
  background-position: -140px -1068px;
}

.flag-it {
  background-position: -168px -1068px;
}

.flag-jm {
  background-position: -196px -1068px;
}

.flag-jo {
  background-position: -224px -1068px;
}

.flag-jp {
  background-position: -252px -1068px;
}

.flag-ke {
  background-position: -280px -1068px;
}

/*line11*/
.flag-kg {
  background-position: 0px -1096px;
}

.flag-kh {
  background-position: -28px -1096px;
}

.flag-ki {
  background-position: -56px -1096px;
}

.flag-km {
  background-position: -84px -1096px;
}

.flag-kn {
  background-position: -112px -1096px;
}

.flag-kp {
  background-position: -140px -1096px;
}

.flag-kr {
  background-position: -168px -1096px;
}

.flag-kw {
  background-position: -196px -1096px;
}

.flag-ky {
  background-position: -224px -1096px;
}

.flag-kz {
  background-position: -252px -1096px;
}

.flag-la {
  background-position: -280px -1096px;
}

/*line12*/
.flag-lb {
  background-position: 0px -1124px;
}

.flag-lc {
  background-position: -28px -1124px;
}

.flag-li {
  background-position: -56px -1124px;
}

.flag-lk {
  background-position: -84px -1124px;
}

.flag-lr {
  background-position: -112px -1124px;
}

.flag-ls {
  background-position: -140px -1124px;
}

.flag-lt {
  background-position: -168px -1124px;
}

.flag-lu {
  background-position: -196px -1124px;
}

.flag-lv {
  background-position: -224px -1124px;
}

.flag-ly {
  background-position: -252px -1124px;
}

.flag-ma {
  background-position: -280px -1124px;
}

/*line13*/
.flag-mc {
  background-position: 0px -1152px;
}

.flag-md {
  background-position: -28px -1152px;
}

.flag-mg {
  background-position: -56px -1152px;
}

.flag-mh {
  background-position: -84px -1152px;
}

.flag-mk {
  background-position: -112px -1152px;
}

.flag-ml {
  background-position: -140px -1152px;
}

.flag-mm {
  background-position: -168px -1152px;
}

.flag-mn {
  background-position: -196px -1152px;
}

.flag-mo {
  background-position: -224px -1152px;
}

.flag-mp {
  background-position: -252px -1152px;
}

.flag-mq {
  background-position: -280px -1152px;
}

/*line14*/
.flag-mr {
  background-position: 0px -1180px;
}

.flag-ms {
  background-position: -28px -1180px;
}

.flag-mt {
  background-position: -56px -1180px;
}

.flag-mu {
  background-position: -84px -1180px;
}

.flag-mv {
  background-position: -112px -1180px;
}

.flag-mw {
  background-position: -140px -1180px;
}

.flag-mx {
  background-position: -168px -1180px;
}

.flag-my {
  background-position: -196px -1180px;
}

.flag-mz {
  background-position: -224px -1180px;
}

.flag-na {
  background-position: -252px -1180px;
}

.flag-nc {
  background-position: -280px -1180px;
}

/*line15*/
.flag-ne {
  background-position: 0px -1208px;
}

.flag-nf {
  background-position: -28px -1208px;
}

.flag-ng {
  background-position: -56px -1208px;
}

.flag-ni {
  background-position: -84px -1208px;
}

.flag-nl {
  background-position: -112px -1208px;
}

.flag-no {
  background-position: -140px -1208px;
}

.flag-np {
  background-position: -168px -1208px;
}

.flag-nr {
  background-position: -196px -1208px;
}

.flag-nu {
  background-position: -224px -1208px;
}

.flag-nz {
  background-position: -252px -1208px;
}

.flag-om {
  background-position: -280px -1208px;
}

/*line15*/
.flag-pa {
  background-position: 0px -1236px;
}

.flag-pe {
  background-position: -28px -1236px;
}

.flag-pf {
  background-position: -56px -1236px;
}

.flag-pg {
  background-position: -84px -1236px;
}

.flag-ph {
  background-position: -112px -1236px;
}

.flag-pk {
  background-position: -140px -1236px;
}

.flag-pl {
  background-position: -168px -1236px;
}

.flag-pm {
  background-position: -196px -1236px;
}

.flag-pn {
  background-position: -224px -1236px;
}

.flag-pr {
  background-position: -252px -1236px;
}

.flag-ps {
  background-position: -280px -1236px;
}

/*line16*/
.flag-pt {
  background-position: 0px -1264px;
}

.flag-pw {
  background-position: -28px -1264px;
}

.flag-py {
  background-position: -56px -1264px;
}

.flag-qa {
  background-position: -84px -1264px;
}

.flag-ro {
  background-position: -112px -1264px;
}

.flag-ru {
  background-position: -140px -1264px;
}

.flag-rw {
  background-position: -168px -1264px;
}

.flag-sa {
  background-position: -196px -1264px;
}

.flag-sb {
  background-position: -224px -1264px;
}

.flag-sc {
  background-position: -252px -1264px;
}

.flag-scotland {
  background-position: -280px -1264px;
}

/*line17*/
.flag-sd {
  background-position: 0px -1292px;
}

.flag-se {
  background-position: -28px -1292px;
}

.flag-sg {
  background-position: -56px -1292px;
}

.flag-sh {
  background-position: -84px -1292px;
}

.flag-si {
  background-position: -112px -1292px;
}

.flag-sk {
  background-position: -140px -1292px;
}

.flag-sl {
  background-position: -168px -1292px;
}

.flag-sm {
  background-position: -196px -1292px;
}

.flag-sn {
  background-position: -224px -1292px;
}

.flag-so {
  background-position: -252px -1292px;
}

.flag-sr {
  background-position: -280px -1292px;
}

/*line18*/
.flag-st {
  background-position: 0px -1320px;
}

.flag-sv {
  background-position: -28px -1320px;
}

.flag-sy {
  background-position: -56px -1320px;
}

.flag-sz {
  background-position: -84px -1320px;
}

.flag-tc {
  background-position: -112px -1320px;
}

.flag-td {
  background-position: -140px -1320px;
}

.flag-tf {
  background-position: -168px -1320px;
}

.flag-tg {
  background-position: -196px -1320px;
}

.flag-th {
  background-position: -224px -1320px;
}

.flag-tj {
  background-position: -252px -1320px;
}

.flag-tk {
  background-position: -280px -1320px;
}

/*line19*/
.flag-tl {
  background-position: 0px -1348px;
}

.flag-tm {
  background-position: -28px -1348px;
}

.flag-tn {
  background-position: -56px -1348px;
}

.flag-to {
  background-position: -84px -1348px;
}

.flag-tr {
  background-position: -112px -1348px;
}

.flag-tt {
  background-position: -140px -1348px;
}

.flag-tv {
  background-position: -168px -1348px;
}

.flag-tw {
  background-position: -196px -1348px;
}

.flag-tz {
  background-position: -224px -1348px;
}

.flag-ua {
  background-position: -252px -1348px;
}

.flag-ug {
  background-position: -280px -1348px;
}

/*line20*/
.flag-um {
  background-position: 0px -1376px;
}

.flag-us,
.flag-en_US {
  background-position: -28px -1376px;
}

.flag-uy {
  background-position: -56px -1376px;
}

.flag-uz {
  background-position: -84px -1376px;
}

.flag-va {
  background-position: -112px -1376px;
}

.flag-vc {
  background-position: -140px -1376px;
}

.flag-ve {
  background-position: -168px -1376px;
}

.flag-vg {
  background-position: -196px -1376px;
}

.flag-vi {
  background-position: -224px -1376px;
}

.flag-vn {
  background-position: -252px -1376px;
}

.flag-vu {
  background-position: -280px -1376px;
}

/*line21*/
.flag-wales {
  background-position: 0px -1404px;
}

.flag-wf {
  background-position: -28px -1404px;
}

.flag-ws {
  background-position: -56px -1404px;
}

.flag-ye {
  background-position: -84px -1404px;
}

.flag-yt {
  background-position: -112px -1404px;
}

.flag-za {
  background-position: -140px -1404px;
}

.flag-zm {
  background-position: -168px -1404px;
}

.flag-zw {
  background-position: -196px -1404px;
}

.flag-en {
  background-position: -252px -1404px;
}

/*
	iPhone App Icon
*/
.iphone-app-icon {
  display: block;
  width: 135px;
  height: 40px;
}

.iphone-app-icon-de {
  background-position: -330px -815px;
}

.iphone-app-icon-en {
  background-position: -330px -855px;
}

.iphone-app-icon-uk {
  background-position: -330px -855px;
}

.iphone-app-icon-en_GB {
  background-position: -330px -855px;
}

.iphone-app-icon-us {
  background-position: -330px -855px;
}

.iphone-app-icon-en_US {
  background-position: -330px -855px;
}

.iphone-app-icon-fr {
  background-position: -330px -895px;
}

.iphone-app-icon-es {
  background-position: -330px -935px;
}

.iphone-app-icon-it {
  background-position: -330px -975px;
}

.iphone-app-icon-pl {
  background-position: -330px -1015px;
}

.iphone-app-icon-ru {
  background-position: -330px -1055px;
}

.iphone-app-icon-bg {
  background-position: -330px -1095px;
}

.iphone-app-icon-nl {
  background-position: -330px -1135px;
}

.iphone-app-icon-no {
  background-position: -330px -1175px;
}

.iphone-app-icon-pt {
  background-position: -330px -1215px;
}

.iphone-app-icon-cn {
  background-position: -330px -1255px;
}

/*
	Stars
*/
.icon-stars {
  float: left;
}

.icon-star-small {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 7px;
  height: 5px;
  background-position: -14px -195px;
}

.icon-star-normal {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 10px;
  height: 10px;
  background-position: 0px -195px;
}

.icon-star-big {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 20px;
  height: 17px;
  background-position: -4px -528px;
}

.fa-refpoint {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  line-height: 20px;
  text-align: center;
  color: var(--txt-color);
}

.fa-map-pin {
  font-size: 1.0625rem;
}

.fa-refpoint-small {
  font-size: 1rem;
}

/*
	RefPoint Icons
*/
.icon-refpoint {
  display: block;
  width: 21px;
  height: 20px;
}

.icon-refpoint-city {
  background-position: 0px -25px;
}

.icon-refpoint-airport {
  background-position: 0px -45px;
}

.icon-refpoint-trainstation {
  background-position: 0px -65px;
}

.icon-refpoint-fair {
  background-position: 0px -85px;
}

/*
	RefPoint Icons Small
*/

.icon-refpoint-small {
  font-family: "Font Awesome 5 Free";
  margin: 0 0.75rem !important;
  color: var(--txt-colorss);
}

.icon-refpoint-small:hover {
  color: black;
}

.icon-refpoint-city-small::before {
  content: "\f64f";
  font-weight: 800;
}

.icon-refpoint-airport-small::before {
  content: "\f072";
  font-weight: 800;
}

.icon-refpoint-trainstation-small::before {
  content: "\f238";
  font-weight: 800;
}

.icon-refpoint-fair-small::before {
  content: "\f024";
  font-weight: 800;
}

/*
 	Font Awesome classes
*/

.fa.fa-spinner {
  color: var(--primary-color);
}

.fa-service {
  color: var(--bg-icon-active);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.fa-service-disable {
  color: var(--bg-component);
  -webkit-text-stroke: 1px var(--bg-icon-inactive);
}

.fa.fa-external-link {
  color: var(--primary-color);
}

/*
	Service Icons
*/
.icon-service {
  font-size: 0;
  line-height: 0;
  width: 21px;
  height: 20px;
}

.icon-service-parking {
  background-position: 0px -110px;
}

.icon-service-no-parking {
  background-position: -21px -110px;
}

.icon-service-restaurant {
  background-position: 0px -130px;
}

.icon-service-no-restaurant {
  background-position: -21px -130px;
}

.icon-service-spa {
  background-position: 0px -150px;
}

.icon-service-no-spa {
  background-position: -21px -150px;
}

.icon-service-internet {
  background-position: 0px -170px;
}

.icon-service-no-internet {
  background-position: -21px -170px;
}

/*
	Sprites
*/
.thawte-box {
  text-align: center;
}

.thawte-box .thawte-image {
  margin: auto;
}

.thawte-image {
  display: block;
  width: 86px;
  height: 88px;
  background-position: -50px -110px;
}

.calendar-icon {
  display: block;
  width: 18px;
  height: 17px;
  background-position: -20px -235px;
}
.theme-toggle {
  margin-top: 1px;
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}
.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.theme-toggle .slider {
  position: absolute;
  inset: 0;
  background-color: var(--grey-light);
  border-radius: 1.5rem;
  transition: background-color 0.3s ease;
}
.theme-toggle .slider:before {
  content: "\f185"; /* Sun */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0.25rem;
  bottom: -1px;
  font-size: 1.125rem;
  color: var(--primary-black);
  transition: all 0.3s ease;
}
[data-theme=dark] .theme-toggle .slider {
  background-color: var(--grey-dark);
}
[data-theme=dark] .theme-toggle .slider:before {
  content: "\f186"; /* Moon */
  color: #fff;
  transform: translateX(1.125rem);
}
.ui-dialog[aria-describedby="TravelerPersonDialog"] {
  width: 725px !important;
}

.ui-dialog {
  border: none;
  border-radius: var(--border-radius-component);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

.ui-dialog *:not(.far),
.ui-dialog *:not(.fas) {
  font-family: "Roboto", sans-serif;
}

.ui-dialog .far,
.ui-dialog .fas {
  font-family: "Font Awesome 5 Free";
}

.ui-dialog .fas.fa-user {
  margin-left: 0.5rem;
}

.ui-dialog,
.ui-dialog input,
.ui-dialog select,
.ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane {
  color: var(--txt-color) !important;
  background-color: var(--bg-component);
}

.ui-dialog[aria-describedby="TravelerPersonDialog"] label {
  color: var(--txt-color);
  line-height: 2;
}

.ui-dialog[aria-describedby="TravelerPersonDialog"] .validation-required {
  color: var(--bg-button-extend);
}

.ui-dialog input {
  border: var(--border-default);
  border-radius: var(--border-radius-button);
  padding: 0.25rem;
  line-height: 1.5;
}

.ui-dialog select {
  padding: 0.375rem;
  border: var(--border-default);
  border-radius: var(--border-radius-button);
}

#TravelerPersonDialog .inputDialog .item {
  margin-bottom: 0.75rem;
}

#TravelerPersonDialog .inputDialog .blockLine label {
  display: block;
  width: 90px;
  float: left;
  width: 90px;
}

#TravelerPersonDialog .inputDialog .blockLine input[type="text"] {
  width: 350px;
}

#TravelerPersonDialog select {
  width: auto !important;
}

#TravelerPersonDialog .inputDialog .phone.item {
  float: left;
  margin-right: 3px;
}

#TravelerPersonDialog .inputDialog .phone label {
  width: auto;
  float: none;
  display: block;
  font-size: 11px;
  font-weight: normal;
}

#TravelerPersonDialog input.email {
  width: 500px !important;
}

#TravelerPersonDialog select.phone-countryareacode {
  width: 205px !important;
}

#TravelerPersonDialog input.phone-areacitycode {
  width: 75px !important;
}

#TravelerPersonDialog input.phone-phonenumber {
  width: 110px !important;
}

#TravelerPersonDialog input.phone-extension {
  width: 65px !important;
}