/*

// Prerequistes

// Search_Screen, Payment, Confirmation
// ../assets/lib/jquery/jquery-ui.css

// Search_Screen, Payment, Confirmation
// https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

//Search_Screen, Payment(?), Confirmation(?) - probably on the master
// ../assets/lib/dateRangePicker.3.0.5/dateRangePicker.css


// Results_Screen
// ../Scripts/owl-carousel/owl.theme.css
// ../Scripts/OwlCarousel2/docs/assets/owlcarousel/assets/owl.carousel.min.css
// ../Scripts/OwlCarousel2/docs/assets/owlcarousel/assets/owl.theme.default.min.css

    */
/************************************************************************************
    COLORS
    The colors here have been extracted from the original css files which vary by page.

    The hotel theme colors are in the search section below, and only apply on the
    search page currently.


*************************************************************************************/
:root {
  --default-background-color: white;
  --default-dark-background-color: black;
  --default-light-background-color: light-gray;
  --default-color: #666;
  --default-dark-color: black;
  --default-light-color: white;
  --default-overlay-background-bc: rgba(0, 0, 0, 0.5);
  --default-overlay-content-bc: rgba(150,150,150,1);
  --default-overlay-content-color: rgba(0,0,0,1);
  --light-overlay-content-bc: rgba(255,255,255,1);
  --default-panel-bc: #fcfcfc;
  --default-close-bc: rgba(128,128,128);
  --default-border-color: #ddd;
  --default-border-light-color: white;
  --default-border-off-color: #6c757d;
  --default-error-color: red;
  --default-error-bc: #FFE5E5;
  --default-error-strong-bc: #FFCC00;
  --default-transparent-color: rgb(0,0,0,0);
  --default-anchor-color: #026acb;
  --default-hn-color: black;
  --default-blockquote-color: #999;
  --default-label-background-color: #f0f0f0;
  --default-button-background-color: #136889;
  --default-disabled-background-color: #999;
  --default-cancel-button-bc: green;
  --default-cancel-button-color: white;
  --back-button-background-color: transparent;
  --back-button-hover-background-color: white;
  --back-button-color: blue;
  --cancel-button-bc: #e6e6e6;
  --default-table-border-color: var(--default-border-color);
  --default-table-alternate-row-background: #f2f2f2;
  --default-table-row-hover: #ddd;
  /* Overlays/modals */
  --overlay-background: var(--default-overlay-background-bc);
  --modal-close-background: var(--default-close-bc); /* _elh-modal.scss */
  --modal-close-color: white;
  /* _payment-v3.scss overlays - overlay-card and  progress-overlay */
  --overlay-card-background: var(--default-overlay-background-bc);
  /* Contact Form - i.e. validation errors */
  --contact-error-background: var(--default-error-bc);
  --contact-error-color: var(--default-error-color);
  --vouchers-button-background: #721c24;
  --voucher-submit-button-background: var( --vouchers-button-background);
  --voucher-find-disabled-background: #afa4ad;
  --voucher-table-header-background: var( --vouchers-button-background);
  --wbs-overlay-active-tab: #e0e0e0;
  --wbs-overlay-tab-border: white;
  --bitcoin-background-color: orange;
  --wbs-tab-active-link-color: #0dafd2;
  --wbs-panel-bottom-border-color: #e5ded3;
  --wbs-panel-title-color: #6a6663;
  --bitcoin-heading-background-color: #ffaa00;
  --bitcoin-cancel-background-color: green;
  --pulse-50percent-color: red;
  --booking-summary-bc: #e8e3de;
  --payments-details-wrapper-bc: #e4e4e4;
  --room-summary-nth-bc: #e4e4e4;
  --room-summary-nth-color: var(--default-color);
  --room-summary-h3-bc: #51575E;
  --room-summary-text-bc: #FFFFFF;
  --div-booking-summary-bc: #fcfcfc;
  --contact-border-color: #ccc;
  --input-error-bc: var(--default-error-bc);
  --booking-progress-bc: #f1f2f5;
  --room-total-value-color: green;
  --continue-button-bc: green;
  --alert-background-color: #f8d7da;
  --alert-color: #721c24;
  --alert-border-color: #f5c6cb;
  --input-background-color: white;
  --input-border-color: #ced4da;
  --input-color: #495057;
  --input-other-color: #888888;
  --form-inputs-disabled-bc: #eeeeee;
  --footer-background-color: #136889;
  --footer-color: #ccc;
  --footer-anchor-color: white;
  --gdpr-background-color: rgba(255, 255, 255, 0.8);
  --gdpr-message-button-color: blue;
  --gdpr-message-button-first-bc: #0f044d;
  --gdpr-message-button-first-hover-bc: rgba(15, 4, 77, 0.9);
  --gdpr-message-button-color: white;
  --header-background-color: var(--footer-background-color);
  --popup-color: var(--default-anchor-color);
  --popup-arrow-border-color: #555 transparent transparent transparent;
  --hotel-booking-summary-bc: #e4e4e4;
  --deposit-value-span: green;
  --discount-good-background-color: green;
  --room-confirm-note-bc: green;
  --deposit-value-bc: green;
  --fit-guest-value-bc: red;
  --fit-saving-value-bc: lightseagreen;
  --dot-disabled-bc: red;
  --tooltip-enabled-bc: green;
  --tooltip-disabled-bc: red;
  --tooltip-disabled-color: lightgray;
  --discount-details-hover-color: yellow;
  --discount-good-color: green;
  --fit-agent-banner-bc: rgba(128, 128, 128, 0.5);
  --hotel-description-bc: #e8e3de;
  --hotel-summary-bc: var(--footer-background-color);
  --main-section-bc: #e4e4e4;
  --wrapper-background-color: #f5f5f5;
  --wrapper-input-border-color: #ccc;
  --modal-box-bc: red;
  --modal-content-bc: rgba(255, 255, 255, 0.8);
  --modal-content-2-bc: #fefefe;
  --modal-box-2-bc: #808080;
  --progress-ul-li-color: #666;
  --progress-ul-li-a-color: #000;
  --progress-span-border-color: var (--footer-background-color);
  --progress-span-bc: var(--footer-background-color);
  --progress-span-number-bc: var(--footer-background-color);
  --room-results-h2-bc: #e8e3de;
  --room-results-strike-color: #666;
  --package-results-tr-odd-bc: rgba(232, 227, 222, 0.25);
  --package-results-tr-even-bc: rgba(232, 227, 222, 0.5);
  --package-results-th-color: #666;
  --results-rooms-total-bc: #e4e4e4;
  --results-room-summary-bc: #e8e3de;
  --results-booking-summary: #666;
  --results-td-hover-bc: #cfcfcf;
  --results-room-avail-limited-color: orange;
  --results-radio-select-bc: #999;
  --results-radio-select-color: white;
  --results-booking-button-bc: var(--default-button-background-color);
  --results-offer-terms-border-color: blue;
  --hroom-unavailable-bc: #ccc;
  --disabled-by-limit-bc: red;
  --highlight-offer-border-color: green;
  --highlight-offer-unavailable-border-color: red;
  --details-room-detail-bc: #e8e3de;
  --details-room-detail-h2-bc: #e8e3de;
  --details-input-error-bc: var(--default-error-bc);
  --details-wrapper-summary-bc: #e8e3de;
  --details-special-extras-bc: rgba(232, 227, 222, 0.5);
  --details-name-age-bc: rgba(209, 210, 208, 0.4);
  --details-total-price-bc: #e8e3de;
  --details-corporate-msg-bc: #e4e4e4;
  --search-occupancy-message-bc: lightblue;
  --search-hotel-desc-none-bc: var(--footer-background-color);
  --search-hotel-desc-LWH-bc: rgba(0, 42, 58, 1);
  --search-hotel-desc-LHH-bc: rgba(7, 62, 44, 1);
  --search-hotel-desc-WBH-bc: rgba(177, 169, 126, 1);
  --search-hotel-short-desc-none-bc: rgba(106, 115, 123, 0.7);
  --search-hotel-short-desc-LWH-bc: rgba(0, 42, 58, 0.7);
  --search-hotel-short-desc-LHH-bc: rgba(7, 62, 44, 0.7);
  --search-hotel-short-desc-WBH-bc: rgba(177, 169, 126, 0.7);
  --search-daterangepicker-bc: dodgerblue;
  --search-form-wrapper-border-color: #a4a9ae;
  --search-copy-paste-bc: #f0f0f0;
  --search-room-label-bc: rgba(240, 240, 240, 0.5);
  --search-room-occupancy-bc: rgba(240, 240, 240, 1);
  --search-up-down-border-color: #999;
  --search-option-color: #212223;
  --search-submit-button-border-color: rgba(240, 240, 240, 1);
  --search-submit-button-bc: #893515;
  --search-submit-button-bc-hover: #893515;
  --search-submit-button-color: var(--default-light-color);
  --search-submit-hover-color: white;
  --search-clear-link-color: white;
  --search-clear-link-hover-color: yellow;
  --search-progress-bc: rgb(0,0,0,0.25);
  --search-upgrade-color: red;
  --search-upgrade-bc: var(--default-error-strong-bc);
  --search-row-occupancy-bc: rgba(240, 240, 240, 1.0);
  --search-checkavail-bc: #e4e4e4;
  --search-outlined-border-color: red;
  --search-outlined-bc: var(--default-error-bc);
  --search-room-details-bc: #D3D5D7;
  --sticky-banner-bc: #212223;
  --sticky-banner-a-color: var(--default-light-color) ;
}

/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    RESET = _reset.scss
*************************************************************************************/
* {
  box-sizing: border-box;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

img, fieldset {
  border: 0;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

/************************************************************************************
    GENERAL STYLING = _general-styling.scss
    Extracted from other files. Compare to RESET and adjust as required.
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
html {
  background-color: var(--default-background-color);
  min-height: 100vh;
  /*  font: 0.81em/150% Source Sans Pro,sans-serif; */
}

html {
  -webkit-text-size-adjust: none;
  /* Override background color to allow to expanding html to match the footer */
  background-color: var(--footer-background-color);
  min-width: 320px;
}
@media screen and (max-width: 320px) {
  html {
    min-width: 320px;
  }
}

body {
  font: 0.81em/150% Arial, Helvetica, sans-serif;
  color: var(--default-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--default-anchor-color);
  text-decoration: none;
  outline: none;
}
a:hover {
  text-decoration: underline;
}

p {
  margin: 0 0 1.23076923em 0;
  line-height: 1.84615385em; /*24px*/
}

li {
  margin-bottom: 0.5em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--default-hn-color);
}

h1 {
  font-size: 2em;
}

.payment-page h2 {
  font-size: 1.6em;
  text-align: center;
  margin: 1em 0;
}

/*
    Todo - Styles - Why did font-size change from 1.4em to 1.53846154em;
*/
h3 {
  /*font-size: 1.4em;*/
  font-size: 1.53846154em; /*20px*/
  /*text-align: center;*/ /*amend 06.12.2024*/
  margin-bottom: 1.5em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.1em;
}

h6 {
  font-size: 1em;
}

blockquote {
  font-family: serif;
  font-size: 1.5em;
  font-weight: bold;
  font-style: italic;
  color: var(--default-blockquote-color);
  margin: 32px 20px 32px 20px;
}

/*
    Todo - Styles - Why is label here? Why this background?
*/
.search-page label {
  background-color: var(--default-label-background-color);
  color: var(--default-color);
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 0;
}

/*
    Todo - Styles - The following from _styles.scss and _payment.scss
*/
/************************************************************************************
GENERAL STATEMENTS
*************************************************************************************/
.noListStyle {
  list-style: none;
}

.hide {
  display: none;
}

.noscroll {
  overflow: hidden;
}

.showing-modal {
  overflow: hidden;
}

/* Generic Button Styles */
.button {
  display: block;
  border-radius: 0px;
  border: none;
  padding-top: 8px;
  padding-bottom: 16px;
  vertical-align: 50%;
  background-color: var(--default-button-background-color);
  color: var(--default-light-color);
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.button :hover {
  opacity: 0.5;
}

.cancel-button {
  padding: 0 2.38095238%;
  border: none;
  height: 30px;
  margin: 10px auto;
  background-color: var(--default-cancel-button-bc);
  color: var(--default-cancel-button-color);
}
.cancel-button:hover {
  opacity: 0.5;
}
.cancel-button:disabled {
  background-color: gray;
}

.checkavailability input.button {
  padding: 8px 0 8px 0;
  min-width: 200px;
  font-size: 16px;
  margin: 32px auto 0 auto;
  height: 48px;
}

#contactDetails input.button {
  padding: 8px 0 8px 0;
  border: none;
  font-size: 14px;
  min-width: 180px;
  line-height: 100%;
  height: 48px;
}

.disabled {
  opacity: 0.5;
  background-color: var(--default-disabled-background-color);
  cursor: default;
}

.continue {
  float: right;
  min-width: 180px;
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 48px;
}

.back {
  float: left;
  opacity: 0.5;
  margin-top: 11px;
  margin-left: 10px;
  background-color: #fff;
  border: none;
  background-color: var(--back-button-background-color);
  color: var(--back-button-color);
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
}

.back:hover, .back:active {
  background-color: var(--back-button-hover-background-color);
  text-decoration: underline;
  opacity: 1;
}

.left {
  float: left;
}

.right {
  float: right;
}

.alert-danger {
  border-color: var(--alert-border-color);
  background-color: var(--alert-background-color);
  color: var(--alert-color);
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

/*
    Todo - Styles - compare to _payments.scss below
*/
input.continue[disabled=disabled] {
  background-color: var(--default-disabled-background-color);
  opacity: 0.5;
  cursor: default;
}

/*
    Todo - Styles - This was in _payments.scss
*/
input.continue[disabled=disabled], input.continueButton[disabled=disabled] {
  /* background-color: #999;*/
  opacity: 0.5;
  cursor: default;
}

input.continue[disabled=disabled]:hover {
  opacity: 0.5;
  cursor: default;
}

.flex-col-fill {
  flex-direction: column;
}

.flex-col-fill div {
  padding-bottom: 0.5rem;
}

.flex-center-one {
  display: flex;
  justify-content: center;
}

.flex-start-one {
  display: flex;
  justify-content: flex-start;
}

.flex-col-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flex-row-between {
  display: flex;
  justify-content: space-between;
}

.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 100px;
  clear: both;
}

/*
    Todo - Styles - End of _styles.scss general. Next was in _payment.scss
*/
span.testError {
  color: var(--default-error-color);
  font-size: 150%;
}

/********************************************************************************************
    FADE IN EFFECT = _fade-in.scss
*********************************************************************************************/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0; /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

/************************************************************************************
    ANGULAR = _angular-csp.scss
    This applies only to pages using angular.js: search and payment.
    This can be ignored for styling the site.

*************************************************************************************/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/************************************************************************************
    GDPR = _gdpr.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#gdpr-cookie-message {
  position: absolute;
  width: 100%;
  padding: 10px;
  top: 0;
  left: 0;
  background-color: var(--gdpr-background-color);
  text-align: center;
  z-index: 10000;
}
#gdpr-cookie-message h4, #gdpr-cookie-message h5 {
  font-weight: bold;
}
#gdpr-cookie-message p a {
  font-weight: normal;
  text-decoration: underline;
  cursor: default;
}
#gdpr-cookie-message p a:hover {
  cursor: pointer;
  text-decoration: none;
}
#gdpr-cookie-message button {
  display: inline-block;
  margin: 10px;
  color: var(--gdpr-message-button-color);
  text-decoration: underline;
}
#gdpr-cookie-message button:hover {
  text-decoration: none;
  cursor: pointer;
}
#gdpr-cookie-message button:first-of-type {
  padding: 15px;
  border: 1px solid var(--gdpr-message-button-bc);
  border-radius: 2px;
  background-color: var(--gdpr-message-button-bc);
  color: var(--gdpr-message-button-color);
  font-size: 16px;
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.5s, color 0.5s;
}
#gdpr-cookie-message button:first-of-type:hover {
  background-color: var(--gdpr-message-button-first-hover-bc);
}
@media screen and (max-width: 321px) {
  #gdpr-cookie-message button {
    min-width: 200px;
  }
}

#gdpr-cookie-types {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
#gdpr-cookie-types ul {
  margin: 20px auto;
  width: 25%;
  list-style: none;
}
#gdpr-cookie-types ul li {
  display: block;
  text-align: left;
  width: 100%;
  padding: 5px 0;
}
@media screen and (max-width: 321px) {
  #gdpr-cookie-types ul {
    width: 80%;
  }
}

/************************************************************************************
    STICKY-BANNER = _sticky-banner.scss

*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#sticky-banner {
  display: none;
  position: absolute;
  top: 768px;
  min-height: 100px;
  width: 100%;
  /*vertical-align: middle;*/
  padding-bottom: 5px;
  /*padding: 3px;*/
  background-color: var(--sticky-banner-bc);
  color: var(--contact-border-color);
  text-align: center;
  opacity: 0.9;
  z-index: 20000;
}

#sticky-banner:hover {
  opacity: 0.95;
}

#sticky-banner a {
  color: var(--sticky-banner-a-color);
}

#stickyInner {
  display: flex;
  flex-flow: row-reverse nowrap;
}

#stickyContent {
  flex-grow: 4;
}

#stickyContent p {
  margin: 0;
}

#stickyContent div {
  padding-bottom: 5px;
}

#close-sticky {
  margin: 10px 10px 0 0;
  padding: 0;
  color: var(--default-light-color);
  text-align: right;
}

#close-sticky:hover {
  cursor: pointer;
}

#title {
  color: var(--default-light-color);
  font-weight: bold;
}

.close-sticky-button {
  background-color: var(--default-dark-background-color);
  color: var(--default-light-color);
  border: 1px solid var(--default-dark-background-color);
  padding: 3px;
  border-radius: 3px;
}

.close-sticky-button-danger {
  background-color: var(--default-error-color);
  color: var(--default-light-color);
  border: 1px solid var(--default-error-color);
  padding: 3px;
  border-radius: 3px;
}

.close-sticky-button:hover {
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  #stickyInner {
    flex-flow: column nowrap;
  }
}
/************************************************************************************
    HINT-POPUP = _hint-popup.scss
    Styles - Final extract from _payment.scss - .popuptext used only in carbon offset.
    Could be used elsewhere
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--popup-color);
  /* The actual popup */
  /* Popup arrow */
  /* Toggle this class - hide and show the popup */
}
.popup .popuptext {
  position: absolute;
  visibility: hidden;
  width: 160px;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  padding: 8px 0;
  border: 1px solid var(--default-dark-color);
  border-radius: 6px;
  background-color: var(--default-background-color);
  color: var(--default-dark-color);
  text-align: center;
  z-index: 1;
}
.popup .popuptext::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--popup-arrow-border-color);
  content: "";
}
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/************************************************************************************
    INPUTS = _inputs.scss
    Todo - Styles - These cause an issue in some pages and have been overridden.
*************************************************************************************/
/* reset webkit search input styles */
.resultsdetails-page select, .results-details-page select {
  -webkit-border-radius: 0;
}
.resultsdetails-page input[type=search], .resultsdetails-page input[type=submit], .resultsdetails-page input[type=button], .results-details-page input[type=search], .results-details-page input[type=submit], .results-details-page input[type=button] {
  -webkit-appearance: none;
  outline: none;
}
.resultsdetails-page input[type=search]::-webkit-search-decoration, .resultsdetails-page input[type=search]::-webkit-search-cancel-button, .results-details-page input[type=search]::-webkit-search-decoration, .results-details-page input[type=search]::-webkit-search-cancel-button {
  display: none;
}
.resultsdetails-page .placeholder, .results-details-page .placeholder {
  color: #aaa;
}
.resultsdetails-page input[type=checkbox], .resultsdetails-page input[type=radio], .results-details-page input[type=checkbox], .results-details-page input[type=radio] {
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  border: none;
}
.resultsdetails-page input[type=search]::-webkit-search-decoration, .results-details-page input[type=search]::-webkit-search-decoration {
  display: none;
}
.resultsdetails-page input:invalid, .resultsdetails-page button:invalid, .resultsdetails-page select:invalid, .resultsdetails-page textarea:invalid, .results-details-page input:invalid, .results-details-page button:invalid, .results-details-page select:invalid, .results-details-page textarea:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.resultsdetails-page input:focus, .resultsdetails-page button:focus, .resultsdetails-page select:focus, .resultsdetails-page textarea:focus, .results-details-page input:focus, .results-details-page button:focus, .results-details-page select:focus, .results-details-page textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.resultsdetails-page input[type=radio]:focus, .resultsdetails-page input[type=radio]:active, .resultsdetails-page input[type=checkbox]:focus, .resultsdetails-page input[type=checkbox]:active, .results-details-page input[type=radio]:focus, .results-details-page input[type=radio]:active, .results-details-page input[type=checkbox]:focus, .results-details-page input[type=checkbox]:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.resultsdetails-page button, .resultsdetails-page input[type=submit], .resultsdetails-page input[type=button], .results-details-page button, .results-details-page input[type=submit], .results-details-page input[type=button] {
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  cursor: pointer;
  outline: 0;
  overflow: visible;
  vertical-align: top;
}
.resultsdetails-page button::-moz-focus-inner, .resultsdetails-page input[type=submit]::-moz-focus-inner, .resultsdetails-page input[type=button]::-moz-focus-inner, .results-details-page button::-moz-focus-inner, .results-details-page input[type=submit]::-moz-focus-inner, .results-details-page input[type=button]::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.resultsdetails-page textarea, .resultsdetails-page select, .resultsdetails-page input[type=email], .resultsdetails-page input[type=tel], .resultsdetails-page input[type=text], .results-details-page textarea, .results-details-page select, .results-details-page input[type=email], .results-details-page input[type=tel], .results-details-page input[type=text] {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  background-color: var(--input-background-color);
  color: var(--default-dark-color);
  outline: 0;
  padding: 2px 3px;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}
.resultsdetails-page textarea[disabled], .resultsdetails-page select[disabled], .resultsdetails-page input[type=email][disabled], .resultsdetails-page input[type=tel][disabled], .resultsdetails-page input[type=text][disabled], .results-details-page textarea[disabled], .results-details-page select[disabled], .results-details-page input[type=email][disabled], .results-details-page input[type=tel][disabled], .results-details-page input[type=text][disabled] {
  background-color: #eeeeee;
}
.resultsdetails-page button[disabled], .resultsdetails-page input[disabled], .resultsdetails-page select[disabled], .resultsdetails-page textarea[disabled], .results-details-page button[disabled], .results-details-page input[disabled], .results-details-page select[disabled], .results-details-page textarea[disabled] {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: default;
}
.resultsdetails-page input::-webkit-input-placeholder, .resultsdetails-page textarea::-webkit-input-placeholder, .resultsdetails-page input:-moz-placeholder, .resultsdetails-page textarea:-moz-placeholder, .resultsdetails-page input.placeholder_text, .resultsdetails-page textarea.placeholder_text, .results-details-page input::-webkit-input-placeholder, .results-details-page textarea::-webkit-input-placeholder, .results-details-page input:-moz-placeholder, .results-details-page textarea:-moz-placeholder, .results-details-page input.placeholder_text, .results-details-page textarea.placeholder_text {
  color: var(--input-other-color);
}
.resultsdetails-page textarea, .resultsdetails-page select[size], .resultsdetails-page select[multiple], .results-details-page textarea, .results-details-page select[size], .results-details-page select[multiple] {
  height: auto;
}
.resultsdetails-page select[size="0"], .resultsdetails-page select[size="1"], .results-details-page select[size="0"], .results-details-page select[size="1"] {
  *height: auto;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  select[size], select[multiple], select[multiple][size] {
    background-image: none;
    padding-right: 3px;
  }
  select, select[size="0"], select[size="1"] {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }
}
textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
}

* html button {
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  vertical-align: top;
}

* html textarea, * html select {
  background: var(--default-background-color);
  color: var(--default-dark-color);
  padding: 2px 3px 1px;
  vertical-align: top;
}

/************************************************************************************
    STRUCTURE = _structure.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
body.results-page {
  display: flex;
  flex-direction: column;
}

#OuterWrapper {
  overflow: hidden;
  text-align: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
#OuterWrapper section#pagewrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  margin-bottom: 48px;
  text-align: left;
  overflow: hidden;
}
#OuterWrapper section#pagewrap section#mainSection {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  background-color: var(--default-background-color);
  padding: 0;
  width: 100%;
}
#OuterWrapper section#pagewrap section#mainSection .wrapper {
  overflow: hidden;
  width: 100%;
}
#OuterWrapper section#pagewrap section#mainSection .wrapper input {
  width: auto;
  padding: 0 10px;
  border: 1px solid var(--wrapper-input-border-color);
  height: 30px;
}
#OuterWrapper section#pagewrap section#mainSection .wrapper input[type=checkbox], #OuterWrapper section#pagewrap section#mainSection .wrapper input[type=radio] {
  vertical-align: middle;
  border: none;
}
#OuterWrapper section#pagewrap section#mainSection .wrapper select {
  border: 1px solid var(--wrapper-input-border-color);
  height: 30px;
}
@media screen and (max-width: 560px) {
  #OuterWrapper section#pagewrap section#mainSection .wrapper {
    padding: 0;
    background-color: #fff;
    margin-bottom: 20px;
  }
}
#OuterWrapper section#pagewrap section#mainSection .continueButtonBox {
  display: flex;
  justify-content: space-between;
}
#OuterWrapper section#pagewrap section#mainSection .continueButtonBox .back, #OuterWrapper section#pagewrap section#mainSection .continueButtonBox .continue {
  margin-right: 10px;
  margin-left: 10px;
}
@media screen and (min-width: 980px) {
  #OuterWrapper section#pagewrap section#mainSection .continueButtonBox .back, #OuterWrapper section#pagewrap section#mainSection .continueButtonBox .continue {
    margin-right: 0;
    margin-left: 0;
  }
}

/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.wbs-overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--default-overlay-background-bc);
  text-align: center;
  vertical-align: middle;
  z-index: 2500;
}
.wbs-overlay .wbs-popup {
  padding: 0;
  background-color: var(--default-overlay-content-bc);
  color: var(--default-overlay-content-color);
  padding: 10px;
  overflow-y: auto;
  max-height: 95vh;
  max-height: 95dvh;
}
.wbs-overlay .wbs-popup .wbs-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: var(--default-overlay-content-bc);
  color: var(--default-overlay-content-color);
}

.men-overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--default-overlay-background-bc);
  text-align: center;
  vertical-align: middle;
  z-index: 2500;
}
.men-overlay .men-popup {
  padding: 0;
  background-color: var(--light-overlay-content-bc);
  color: var(--default-overlay-content-color);
  padding: 10px;
  overflow-y: auto;
  max-height: 95vh;
  max-height: 95dvh;
  max-width: 480px;
}
.men-overlay .men-popup .men-close-container {
  display: flex;
  justify-content: flex-start;
}
.men-overlay .men-popup .men-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: var(--light-overlay-content-bc);
  color: var(--default-overlay-content-color);
}

.progress-overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--default-overlay-background-bc);
  text-align: center;
  vertical-align: middle;
  z-index: 2500;
}
.progress-overlay .progress-overlay-popup {
  padding: 0;
  background-color: var(--light-overlay-content-bc);
  color: var(--default-overlay-content-color);
  padding: 10px;
  overflow-y: auto;
  max-height: 95vh;
  max-height: 95dvh;
}
.progress-overlay .progress-overlay-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: var(--light-overlay-content-bc);
  color: var(--default-overlay-content-color);
}

.progress-overlay-inner-content {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.flex-button-one {
  display: flex;
  justify-content: center;
}

.flex-button-two {
  display: flex;
  justify-content: space-between;
}

.close {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  margin: 3px;
  font-size: 20px;
  text-decoration: none;
  background-color: rgb(128, 128, 128);
  color: white;
  z-index: 3510;
  height: 20px;
  width: 20px;
  padding: 0 0 0 0.15rem;
  line-height: 10px;
  border-radius: 4px;
}
.close:hover {
  background-color: rgb(150, 150, 150);
}
.close .close-right {
  left: auto;
  right: 0;
}

/************************************************************************************
    HEADER = _header.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#header {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: var(--header-background-color);
}
#header #headerInner {
  position: relative;
  height: 30px;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
#header #headerInner #headerLogo {
  margin-top: 5px;
  margin-left: 20px;
}
#header #headerInner #headerLogo #site-logo {
  height: 19px;
}
#header #headerInner #headerLogo #site-logo img {
  width: 164px;
  height: 12px;
}
@media only screen and (min-width: 700px) {
  #header #headerInner #headerLogo #site-logo img {
    width: 270px;
    height: 19px;
  }
}
#header #headerInner #headerContact {
  margin-top: 5px;
  margin-right: 20px;
  color: var(--default-light-color);
  text-align: right;
  font-family: Source Sans Pro, sans-serif;
  font-weight: bold;
  /* override IOS colouring */
}
#header #headerInner #headerContact a[href^="tel:"] {
  color: var(--default-light-color);
}
#header #headerInner #headerContact #crsNumber, #header #headerInner #headerContact #crsNumberInt {
  display: block;
}
#header #headerInner #headerContact #crsNumber img {
  height: 12px;
  width: 12px;
  margin-right: 5px;
}
@media screen and (max-width: 980px) {
  #header #headerInner #headerContact {
    right: 40px;
  }
}

/************************************************************************************
    FOOTER = _footer.scss
    Todo - See SUPPORT which also contains conflicting footer
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
footer#master-footer {
  height: auto;
  width: 100%;
  padding: 45px 0 45px 0; /*amend 16.12.2024*/
  border-top: none;
  background-color: var(--footer-background-color);
  color: var(--footer-anchor-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: auto; /* let it expand */
}
footer#master-footer p.footerReservationsContact {
  color: #fff;
  margin-bottom: 36px;
}
footer#master-footer p.footerReservationsContact span {
  font-size: 24px;
  color: #fff;
  font-weight: normal;
}
footer#master-footer nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
}
footer#master-footer nav ul li {
  list-style-type: none;
  text-align: center;
}
footer#master-footer nav ul li a {
  color: var(--footer-anchor-color);
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}
footer#master-footer p small {
  width: 100%;
  height: 24px;
  color: var(--footer-anchor-color);
  text-align: center;
  display: block;
  font-size: 14px;
}
footer#master-footer p.copyright {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
}
footer#master-footer p.copyright small {
  width: 100%;
  height: 24px;
  color: var(--footer-color);
  text-align: center;
  display: block;
}
footer#master-footer p.copyright a {
  color: var(--footer-anchor-color);
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}

@media screen and (min-width: 650px) {
  footer#master-footer nav ul {
    flex-direction: row;
  }
  footer#master-footer nav ul li {
    padding-left: 5px;
    padding-right: 5px;
    border-right: 2px solid var(--footer-anchor-color);
  }
  footer#master-footer nav ul li:last-child {
    border-right: none;
  }
}
/************************************************************************************
    HOTEL DESCRIPTION = _hotel-description.scss

*************************************************************************************/
#hotelDescription {
  position: relative;
  overflow: hidden;
  padding: 8px 10px 48px 10px;
  background-color: var(--hotel-description-bc);
}
#hotelDescription .hotelDetailWrapper {
  overflow: hidden;
  padding-top: 8px;
}
#hotelDescription .hotelDetailWrapper .hotelDetailContent {
  overflow: hidden;
}
#hotelDescription .hotelDetailWrapper .hotelSummaryMore, #hotelDescription .hotelDetailWrapper .hotelSummaryLess {
  display: block;
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 8px 10px;
  border-radius: 0px; /*Amend 17.12.2024*/
  background-color: var(--hotel-summary-bc);
  color: var(--default-light-color);
  font-weight: bold;
}
#hotelDescription .hotelDetailWrapper .hotelSummaryMore:hover, #hotelDescription .hotelDetailWrapper .hotelSummaryLess:hover {
  opacity: 0.5;
}
#hotelDescription h2 {
  margin-top: 0;
}
#hotelDescription h2 a {
  color: var(--default-dark-color);
}
#hotelDescription ul {
  overflow: hidden;
}

/************************************************************************************
    PROGRESS = _progress-bar.scss
    Along the top of main pages
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#progressbar {
  width: 100%;
  background-color: var(--default-background-color);
}
#progressbar ul {
  list-style: none;
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
}
#progressbar ul li {
  width: 25%;
  height: 39px;
  color: var(--progress-ul-li-color);
  line-height: 39px;
  text-align: center;
  margin-bottom: 0px;
}
#progressbar ul li a {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 39px;
  color: var(--progress-ul-li-a-color);
  text-decoration: none;
}
#progressbar ul li span.navigationLink {
  display: none;
}
@media only screen and (min-width: 680px) {
  #progressbar ul li span.navigationLink {
    display: inline;
  }
}
@media only screen and (min-width: 768px) {
  #progressbar ul li span.navigationLink {
    display: inline;
  }
}
#progressbar ul li span.navigationLinkShort {
  display: none;
}
@media only screen and (min-width: 680px) {
  #progressbar ul li span.navigationLinkShort {
    display: inline;
  }
}
@media only screen and (min-width: 768px) {
  #progressbar ul li span.navigationLinkShort {
    display: none;
  }
}
#progressbar ul li span.navigationLinkLong {
  display: none;
}
@media only screen and (min-width: 680px) {
  #progressbar ul li span.navigationLinkLong {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  #progressbar ul li span.navigationLinkLong {
    display: inline;
  }
}
#progressbar ul li .progressPair {
  display: inline-block;
}
#progressbar ul li.currentPage {
  font-weight: bold;
  color: var(--default-dark-color);
}
#progressbar ul li.currentPage .progressPair {
  border-bottom: 4px solid #136889;
  line-height: 0;
}
#progressbar ul li.currentPage span.navigationLink {
  padding-left: 2px;
}

/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
[elh-progress-indicator] {
  position: relative;
  width: 0;
  height: 0;
}

/************************************************************************************
    SUPPORT = _support.scss
    Todo - Contains footer wich conflicts with FOOTER scss file
    Todo - Conatins other parts that should be reconciled/extracted to other files.
*************************************************************************************/
/*The EL Logo*/
#footer-site-logo {
  margin-top: 40px;
  display: inline-block;
}

/***********************************************************************************************
    Large screens

************************************************************************************************/
@media only screen and (min-width: 992px) {
  /*The EL Logo*/
  #footer-site-logo {
    float: left;
    margin: 20px 0 0 5%;
  }
  footer#master-footer nav.FooterHotelList ul {
    text-align: right;
  }
  .miniSearchHidden {
    display: none;
  }
}
/***********************************************************************************************
    Hotel and Room Galleries

************************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.grid-col {
  display: grid;
  gap: 1rem;
}

.carousel {
  text-align: center;
}

.carousel__gallery {
  width: 420px;
  margin: auto;
}

@media (min-width: 576px) {
  .carousel__gallery {
    width: 500px;
  }
}
@media (min-width: 768px) {
  .grid-col--two-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .carousel__gallery {
    width: 350px;
  }
}
/* Search_Screen, Results_Screen, ResultsDetails, Payment, Confirmation */
/************************************************************************************
    ELH-MODAL = _elh-modal.scss
    Used in the angular.js template file for modals
    Also in wbsPageApp.js and wbsAdminPageApp.js
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#elh-modal-overlay {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: var(--modal-close-background);
  background-color: var(--overlay-background);
  overflow-x: hidden; /* Disable horizontal scroll */
  z-index: 100;
  justify-content: center;
  align-items: center;
}

#elh-modal-container {
  position: absolute;
  top: 10%;
  width: auto;
  margin: 5%;
  padding: 15px;
  background-color: var(--default-background-color);
  opacity: 1;
}

#elh-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 3px;
  font-size: 30px;
  text-decoration: none;
  background-color: var(--modal-close-background);
  color: var(--default-light-color);
  z-index: 102;
}

/* Position the content inside the container */
#elh-modal-content {
  /* For the #elh-modal-content element */
  position: relative;
  margin-top: 30px; /* offset for  #elh-modal-close */
  /* sub-items of #elh-modal-content */
}
#elh-modal-content ul {
  padding: revert;
}
#elh-modal-content textarea,
#elh-modal-content select,
#elh-modal-content input[type=email],
#elh-modal-content input[type=tel],
#elh-modal-content input[type=text],
#elh-modal-content input[type=password] {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  background-color: var(--default-background-color);
  color: var(--default-dark-color);
  outline: 0;
  padding: 2px 3px;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}
#elh-modal-content textarea[disabled],
#elh-modal-content select[disabled],
#elh-modal-content input[type=email][disabled],
#elh-modal-content input[type=tel][disabled],
#elh-modal-content input[type=text][disabled],
#elh-modal-content input[type=password][disabled] {
  background-color: var(--form-inputs-disabled-bc);
}
#elh-modal-content button[disabled],
#elh-modal-content input[disabled],
#elh-modal-content select[disabled],
#elh-modal-content textarea[disabled] {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: default;
}
#elh-modal-content .contactForm {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
#elh-modal-content .contactForm > div {
  flex: 1 100%;
  text-align: center;
}
#elh-modal-content .contactForm div input {
  width: 94.1111111%;
  padding: 0 2.38095238%;
  border: 1px solid #ccc;
  height: 30px;
  margin-bottom: 10px;
}
#elh-modal-content .contactForm div select {
  border: 1px solid #ccc;
  height: 32px;
  margin-bottom: 10px;
  width: 99.5%;
}
#elh-modal-content .contactForm div input.error {
  border-color: var(--contact-error-color);
  background-color: var(--contact-error-background);
}
#elh-modal-content .contactForm div label.error {
  font-weight: bold;
  color: var(--contact-error-color);
  text-align: right;
  width: 99.5%;
  margin-top: -6px;
  display: block;
  margin-bottom: 10px;
}

/* Search_Screen, Confirmation */
/************************************************************************************
    ELH-MODAL-CLASS = _elh-modal-class.scss
    Todo - Styles Not Used Yet. _elh-modal-class.scss is WIP converting _elh-modal.scss to classes
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.elh-modal-overlay {
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  background-color: var(--modal-close-background);
  background-color: var(--overlay-background);
  overflow-x: hidden; /* Disable horizontal scroll */
}

.elh-modal-container {
  position: absolute;
  top: 10px;
  width: auto;
  margin: 5%;
  padding: 15px;
  background-color: var(--default-background-color);
  opacity: 1;
}

/* Position the content inside the container */
.elh-modal-content {
  position: relative;
  margin-top: 30px; /* offset for  .elh-modal-close */
}

.elh-modal-content ul {
  padding: revert;
}

.elh-modal-content h2 {
  font-size: 1.6em;
  text-align: center;
  margin: 1em 0;
}

.elh-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 3px;
  font-size: 20px;
  text-decoration: none;
  background-color: var(--modal-close-background);
  color: var(--default-light-color);
  z-index: 3510;
  height: 20px;
  width: 20px;
  padding: 0;
  line-height: 10px;
}

.elh-modal-content textarea,
.elh-modal-content select,
.elh-modal-content input[type=email],
.elh-modal-content input[type=tel],
.elh-modal-content input[type=text],
.elh-modal-content input[type=password],
.elh-modal-content input[type=number] {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  /*-webkit-appearance: none;*/
  background-color: white;
  color: black;
  outline: 0;
  padding: 2px 3px;
  text-align: left;
  font-size: 13px;
  vertical-align: top;
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

.small-number input[type=number] {
  width: 60px;
}

.elh-modal-content textarea {
  height: 100px;
}

.elh-modal-content input[type=checkbox] {
  text-align: left;
  width: auto;
}

.elh-modal-content textarea[disabled],
.elh-modal-content select[disabled],
.elh-modal-content input[type=email][disabled],
.elh-modal-content input[type=tel][disabled],
.elh-modal-content input[type=text][disabled],
.elh-modal-content input[type=password][disabled],
.elh-modal-content input[type=checkbox][disabled],
.elh-modal-content input[type=number][disabled] {
  background-color: #eeeeee;
}

.elh-modal-content button[disabled],
.elh-modal-content input[disabled],
.elh-modal-content select[disabled],
.elh-modal-content textarea[disabled] {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: default;
}

.elh-modal-content .contactForm {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.elh-modal-content .contactForm > div {
  flex: 1 100%;
  text-align: center;
}

.elh-modal-content .contactFormLeft > div {
  text-align: left;
}

.elh-modal-content .contactForm div input {
  width: 94.1111111%;
  padding: 0 1%;
  border: 1px solid #ccc;
  height: 30px;
  margin-bottom: 10px;
}

.elh-modal-content .contactForm div select {
  border: 1px solid #ccc;
  height: 32px;
  margin-bottom: 10px;
  /*width: 99.5%;*/
}

.elh-modal-content .contactForm div input[type=checkbox] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.elh-modal-content .contactForm div input[type=number] {
  width: 80px;
}

.elh-modal-content .contactForm div input.error {
  border-color: red;
  background-color: #FFE5E5;
}

.elh-modal-content .contactForm div label.error {
  font-weight: bold;
  color: red;
  text-align: right;
  width: 99.5%;
  margin-top: -6px;
  display: block;
  margin-bottom: 10px;
}

/*
    For search FitIdentityForm
*/
.elh-modal-container.fitIdentityForm {
  width: 50%;
  left: 25%;
  margin: auto;
}

@media only screen and (min-width: 500px) {
  .elh-modal-container.fitIdentityForm {
    width: 34%;
    left: 33%;
    margin: auto;
  }
}
@media only screen and (min-width: 1000px) {
  .elh-modal-container.fitIdentityForm {
    width: 20%;
    left: 40%;
    margin: auto;
  }
}
/************************************************************************************
    SEARCH PAGES = _search-page.scss
    Most of these are on the searchcontrol2
*************************************************************************************/
/************************************************************************************
    COLORS
    The colors here have been extracted from the original css files which vary by page.

    The hotel theme colors are in the search section below, and only apply on the
    search page currently.


*************************************************************************************/
:root {
  --default-background-color: white;
  --default-dark-background-color: black;
  --default-light-background-color: light-gray;
  --default-color: #666;
  --default-dark-color: black;
  --default-light-color: white;
  --default-overlay-background-bc: rgba(0, 0, 0, 0.5);
  --default-overlay-content-bc: rgba(150,150,150,1);
  --default-overlay-content-color: rgba(0,0,0,1);
  --light-overlay-content-bc: rgba(255,255,255,1);
  --default-panel-bc: #fcfcfc;
  --default-close-bc: rgba(128,128,128);
  --default-border-color: #ddd;
  --default-border-light-color: white;
  --default-border-off-color: #6c757d;
  --default-error-color: red;
  --default-error-bc: #FFE5E5;
  --default-error-strong-bc: #FFCC00;
  --default-transparent-color: rgb(0,0,0,0);
  --default-anchor-color: #026acb;
  --default-hn-color: black;
  --default-blockquote-color: #999;
  --default-label-background-color: #f0f0f0;
  --default-button-background-color: #136889;
  --default-disabled-background-color: #999;
  --default-cancel-button-bc: green;
  --default-cancel-button-color: white;
  --back-button-background-color: transparent;
  --back-button-hover-background-color: white;
  --back-button-color: blue;
  --cancel-button-bc: #e6e6e6;
  --default-table-border-color: var(--default-border-color);
  --default-table-alternate-row-background: #f2f2f2;
  --default-table-row-hover: #ddd;
  /* Overlays/modals */
  --overlay-background: var(--default-overlay-background-bc);
  --modal-close-background: var(--default-close-bc); /* _elh-modal.scss */
  --modal-close-color: white;
  /* _payment-v3.scss overlays - overlay-card and  progress-overlay */
  --overlay-card-background: var(--default-overlay-background-bc);
  /* Contact Form - i.e. validation errors */
  --contact-error-background: var(--default-error-bc);
  --contact-error-color: var(--default-error-color);
  --vouchers-button-background: #721c24;
  --voucher-submit-button-background: var( --vouchers-button-background);
  --voucher-find-disabled-background: #afa4ad;
  --voucher-table-header-background: var( --vouchers-button-background);
  --wbs-overlay-active-tab: #e0e0e0;
  --wbs-overlay-tab-border: white;
  --bitcoin-background-color: orange;
  --wbs-tab-active-link-color: #0dafd2;
  --wbs-panel-bottom-border-color: #e5ded3;
  --wbs-panel-title-color: #6a6663;
  --bitcoin-heading-background-color: #ffaa00;
  --bitcoin-cancel-background-color: green;
  --pulse-50percent-color: red;
  --booking-summary-bc: #e8e3de;
  --payments-details-wrapper-bc: #e4e4e4;
  --room-summary-nth-bc: #e4e4e4;
  --room-summary-nth-color: var(--default-color);
  --room-summary-h3-bc: #51575E;
  --room-summary-text-bc: #FFFFFF;
  --div-booking-summary-bc: #fcfcfc;
  --contact-border-color: #ccc;
  --input-error-bc: var(--default-error-bc);
  --booking-progress-bc: #f1f2f5;
  --room-total-value-color: green;
  --continue-button-bc: green;
  --alert-background-color: #f8d7da;
  --alert-color: #721c24;
  --alert-border-color: #f5c6cb;
  --input-background-color: white;
  --input-border-color: #ced4da;
  --input-color: #495057;
  --input-other-color: #888888;
  --form-inputs-disabled-bc: #eeeeee;
  --footer-background-color: #136889;
  --footer-color: #ccc;
  --footer-anchor-color: white;
  --gdpr-background-color: rgba(255, 255, 255, 0.8);
  --gdpr-message-button-color: blue;
  --gdpr-message-button-first-bc: #0f044d;
  --gdpr-message-button-first-hover-bc: rgba(15, 4, 77, 0.9);
  --gdpr-message-button-color: white;
  --header-background-color: var(--footer-background-color);
  --popup-color: var(--default-anchor-color);
  --popup-arrow-border-color: #555 transparent transparent transparent;
  --hotel-booking-summary-bc: #e4e4e4;
  --deposit-value-span: green;
  --discount-good-background-color: green;
  --room-confirm-note-bc: green;
  --deposit-value-bc: green;
  --fit-guest-value-bc: red;
  --fit-saving-value-bc: lightseagreen;
  --dot-disabled-bc: red;
  --tooltip-enabled-bc: green;
  --tooltip-disabled-bc: red;
  --tooltip-disabled-color: lightgray;
  --discount-details-hover-color: yellow;
  --discount-good-color: green;
  --fit-agent-banner-bc: rgba(128, 128, 128, 0.5);
  --hotel-description-bc: #e8e3de;
  --hotel-summary-bc: var(--footer-background-color);
  --main-section-bc: #e4e4e4;
  --wrapper-background-color: #f5f5f5;
  --wrapper-input-border-color: #ccc;
  --modal-box-bc: red;
  --modal-content-bc: rgba(255, 255, 255, 0.8);
  --modal-content-2-bc: #fefefe;
  --modal-box-2-bc: #808080;
  --progress-ul-li-color: #666;
  --progress-ul-li-a-color: #000;
  --progress-span-border-color: var (--footer-background-color);
  --progress-span-bc: var(--footer-background-color);
  --progress-span-number-bc: var(--footer-background-color);
  --room-results-h2-bc: #e8e3de;
  --room-results-strike-color: #666;
  --package-results-tr-odd-bc: rgba(232, 227, 222, 0.25);
  --package-results-tr-even-bc: rgba(232, 227, 222, 0.5);
  --package-results-th-color: #666;
  --results-rooms-total-bc: #e4e4e4;
  --results-room-summary-bc: #e8e3de;
  --results-booking-summary: #666;
  --results-td-hover-bc: #cfcfcf;
  --results-room-avail-limited-color: orange;
  --results-radio-select-bc: #999;
  --results-radio-select-color: white;
  --results-booking-button-bc: var(--default-button-background-color);
  --results-offer-terms-border-color: blue;
  --hroom-unavailable-bc: #ccc;
  --disabled-by-limit-bc: red;
  --highlight-offer-border-color: green;
  --highlight-offer-unavailable-border-color: red;
  --details-room-detail-bc: #e8e3de;
  --details-room-detail-h2-bc: #e8e3de;
  --details-input-error-bc: var(--default-error-bc);
  --details-wrapper-summary-bc: #e8e3de;
  --details-special-extras-bc: rgba(232, 227, 222, 0.5);
  --details-name-age-bc: rgba(209, 210, 208, 0.4);
  --details-total-price-bc: #e8e3de;
  --details-corporate-msg-bc: #e4e4e4;
  --search-occupancy-message-bc: lightblue;
  --search-hotel-desc-none-bc: var(--footer-background-color);
  --search-hotel-desc-LWH-bc: rgba(0, 42, 58, 1);
  --search-hotel-desc-LHH-bc: rgba(7, 62, 44, 1);
  --search-hotel-desc-WBH-bc: rgba(177, 169, 126, 1);
  --search-hotel-short-desc-none-bc: rgba(106, 115, 123, 0.7);
  --search-hotel-short-desc-LWH-bc: rgba(0, 42, 58, 0.7);
  --search-hotel-short-desc-LHH-bc: rgba(7, 62, 44, 0.7);
  --search-hotel-short-desc-WBH-bc: rgba(177, 169, 126, 0.7);
  --search-daterangepicker-bc: dodgerblue;
  --search-form-wrapper-border-color: #a4a9ae;
  --search-copy-paste-bc: #f0f0f0;
  --search-room-label-bc: rgba(240, 240, 240, 0.5);
  --search-room-occupancy-bc: rgba(240, 240, 240, 1);
  --search-up-down-border-color: #999;
  --search-option-color: #212223;
  --search-submit-button-border-color: rgba(240, 240, 240, 1);
  --search-submit-button-bc: #893515;
  --search-submit-button-bc-hover: #893515;
  --search-submit-button-color: var(--default-light-color);
  --search-submit-hover-color: white;
  --search-clear-link-color: white;
  --search-clear-link-hover-color: yellow;
  --search-progress-bc: rgb(0,0,0,0.25);
  --search-upgrade-color: red;
  --search-upgrade-bc: var(--default-error-strong-bc);
  --search-row-occupancy-bc: rgba(240, 240, 240, 1.0);
  --search-checkavail-bc: #e4e4e4;
  --search-outlined-border-color: red;
  --search-outlined-bc: var(--default-error-bc);
  --search-room-details-bc: #D3D5D7;
  --sticky-banner-bc: #212223;
  --sticky-banner-a-color: var(--default-light-color) ;
}

/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/*
    Todo - Styles - miniSearchHidden may be used where it should not be as a lazy hidden class
*/
.miniSearchHidden {
  display: none;
}

/* FRAME WRAPPER */
.miniSearchFrameWrapper {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  justify-content: space-around;
  color: var(--default-light-color);
  /* HOTEL INFORMATION */
}
.miniSearchFrameWrapper #hotelDescriptionWrapperNONE {
  background: var(--search-hotel-desc-none-bc);
}
.miniSearchFrameWrapper #hotelDescriptionWrapperLWH {
  background: var(--search-hotel-desc-LWH-bc);
}
.miniSearchFrameWrapper #hotelDescriptionWrapperWBH {
  background: var(--search-hotel-desc-WBH-bc);
}
.miniSearchFrameWrapper #hotelDescriptionWrapperLHH {
  background: var(--search-hotel-desc-LHH-bc);
}
.miniSearchFrameWrapper #hotelDescriptionWrapperMID {
  background: rgb(166, 169, 171);
}
.miniSearchFrameWrapper #hotelDescriptionWrapperWHD {
  background: rgb(124, 65, 152);
}
.miniSearchFrameWrapper .shortDescription {
  padding: 10px 0;
  line-height: 2em;
}
.miniSearchFrameWrapper .shortDescription span {
  display: block;
}
.miniSearchFrameWrapper > div {
  flex: 1 100%;
  text-align: center;
}
.miniSearchFrameWrapper select, .miniSearchFrameWrapper .miniSearchUpgradeMessageWrapper input {
  max-height: 50px;
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px solid #ABA59E;
  text-align-last: center;
  text-align: center;
}
@media only screen and (min-width: 1100px) {
  .miniSearchFrameWrapper div.hotelDescriptionWrapper {
    order: -1;
    flex-basis: 100%;
  }
  .miniSearchFrameWrapper div.miniSearchUpgrade {
    order: 7;
    flex-basis: 100%;
  }
}

/* All immediate child divs within #miniSearchFormWrapper as flex column */
.miniSearchFormWrapper {
  display: flex !important;
  flex-direction: column;
  flex-flow: row wrap;
  border-top: none;
  /* CHECK IN AND OUT */
}
.miniSearchFormWrapper.englishlakes, .miniSearchFormWrapper.lowwoodbay, .miniSearchFormWrapper.thewildboar, .miniSearchFormWrapper.waterhead, .miniSearchFormWrapper.lancasterhouse, .miniSearchFormWrapper.themidland {
  background: var(--search-hotel-desc-none-bc);
}
.miniSearchFormWrapper div.offerDetails {
  flex-basis: 100%;
  background-color: transparent;
  color: var(--search-submit-hover-color);
  line-height: 2rem;
  margin: 0 10px 0 10px;
  font-weight: bold;
}
.miniSearchFormWrapper div.offerDetails p {
  text-align: center;
}
.miniSearchFormWrapper .offerDetails.wrapper {
  padding: 0 10px 0 10px;
  margin-bottom: 24px;
}
.miniSearchFormWrapper .offerDetails.wrapper p {
  margin-top: 8px;
}
.miniSearchFormWrapper .offerDetails.wrapper p:empty {
  margin: 0;
}
.miniSearchFormWrapper #clearLink a {
  text-decoration: none;
  color: var(--search-clear-link-color);
}
.miniSearchFormWrapper #clearLink a:hover {
  color: var(--search-clear-link--hover-color);
}
.miniSearchFormWrapper #discountDetails {
  text-align: center;
}
.miniSearchFormWrapper #discountDetails #searchCopyPaste {
  margin: 0 auto;
}
.miniSearchFormWrapper .miniSearchControlWrapper {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  /* Controls */
  /* Hotel Select */
  /* Code if visible */
  /* Dates */
  /* Search button */
  /* .miniSearchControlWrapper END */
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRow {
  margin: 0;
  padding: 0;
  width: 100%;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchField,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchField select,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchField input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowButton, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchFieldButton, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchSubmitButton {
  background-color: #893515;
  transition: background-color 0.7s;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowButton:hover, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchFieldButton:hover {
  background-color: #b5461c;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchSubmitButton:hover {
  color: #fff;
  background-color: #b5461c;
  border: 1px solid #b5461c;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchSubmitButton,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowButton,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchFieldButton {
  border: none;
  box-shadow: none;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowButton,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchFieldButton {
  padding: 0;
  margin: 0;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowHotel, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowDates, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowRoom {
  border: none;
  border-bottom: 1px solid var(--default-border-color);
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchDropDown,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchDatepicker,
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchCode,
.miniSearchFormWrapper .miniSearchControlWrapper #searchCopyPaste {
  display: block;
  padding: 15px 0;
  width: 100%;
  border: 1px solid #ABA59E; /*Amend 17.12.2024 CHECK */
  background-color: var(--search-copy-paste-bc);
  color: var(--default-color);
  font-size: 1em;
  cursor: pointer;
  text-align: center;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchDropDown option {
  display: block;
  background-color: var(--default-background-color);
  color: var(--search-option-color);
  text-align: center;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchCode {
  text-align: center;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchDatepicker {
  background: var(--search-copy-paste-bc) url(https://www.englishlakeshotels.co.uk/css/css-images/calendar_icon.gif) 5px 50% no-repeat;
  text-align: center;
}
.miniSearchFormWrapper .miniSearchControlWrapper .miniSearchSubmitButton {
  display: block;
  width: 100%;
  padding: 14px 0;
  margin: 0 auto;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0px;
  color: var(--search-submit-button-color);
  cursor: pointer;
}
@media only screen and (min-width: 1100px) {
  .miniSearchFormWrapper .miniSearchControlWrapper {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    margin-top: 5px;
    flex: 1 1 auto;
    min-width: 0; /* Allows flex children to shrink properly */
  }
  .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRow {
    height: 48px;
  }
  .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowHotel, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowDates, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowRoom, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowCode {
    width: 250px;
    background-color: var(--search-copy-paste-bc);
    border: none;
    border-right: 1px solid var(--default-border-color);
  }
  .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowCode, .miniSearchFormWrapper .miniSearchControlWrapper .miniSearchRowButton {
    width: 150px;
  }
  .miniSearchFormWrapper .miniSearchControlWrapper .shortDescription {
    margin: 0 auto;
    padding: 10px;
    display: inline-block;
  }
}
.miniSearchFormWrapper .occupancyMessage {
  background-color: var(--search-occupancy-message-bc);
  color: var(--default-dark-color);
  padding: 3px;
}
.miniSearchFormWrapper .miniSearchFieldOccupancy label span:nth-child(2)::before, .miniSearchFormWrapper .miniSearchFieldOccupancy label span:nth-child(3)::before {
  content: ":  ";
}
.miniSearchFormWrapper .miniSearchRowOccupancy {
  background-color: var(--search-room-occupancy-bc);
  width: 100%;
  transform: translateY(-46px); /* Move it above button because it's out of the normal flow. */
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--default-border-color);
  padding: 5px 0;
  background-color: var(--search-room-occupancy-bc);
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter .up-down {
  background-color: var(--search-room-occupancy-bc);
  width: 250px;
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter .miniSearchRowOccupancyInner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: var(--search-room-occupancy-bc);
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter .miniSearchRowOccupancyInner .room {
  background-color: var(--search-room-occupancy-bc);
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter .miniSearchRowOccupancyInner .room .miniSearchFieldPair {
  width: 100%;
}
.miniSearchFormWrapper .miniSearchRowOccupancy .miniSearchRowOccupancyOuter .miniSearchRowOccupancyInner .room .miniSearchFieldPair .up-down {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 5px;
}
.miniSearchFormWrapper .miniSearchField .up-down {
  display: block;
  padding: 0 0 15px 0;
  width: 250px;
  border: none;
  background-color: #893515;
  color: var(--default-color);
  /*font-size: 12px;*/
  cursor: pointer;
}
@media only screen and (min-width: 1100px) {
  .miniSearchFormWrapper {
    flex-grow: 1;
  }
  .miniSearchFormWrapper .miniSearchRowOccupancy {
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 3000 !important;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(0);
  }
  .miniSearchFormWrapper .miniSearchRowOccupancyOuter .miniSearchRowOccupancyInner {
    width: auto;
    background-color: var(--search-room-occupancy-bc);
  }
}
.miniSearchFormWrapper .roomLabel {
  background-color: var(--search-room-occupancy-bc);
  color: var(--default-dark-color);
  font-weight: bold;
}
.miniSearchFormWrapper .up-down-down, .miniSearchFormWrapper .up-down-up, .miniSearchFormWrapper .up-down-value {
  display: inline-block;
  padding: 10px;
  border: 1px solid var(--search-up-down-border-color);
  font-size: 1em;
}
.miniSearchFormWrapper .up-down-value {
  width: 120px;
  min-width: 120px;
  margin: 0 1%;
  background-color: var(--default-background-color);
  color: var(--default-color);
}
.miniSearchFormWrapper .up-down-down, .miniSearchFormWrapper .up-down-up {
  transition: background-color 0.7s;
  min-width: 5%;
  background-color: #893515;
  color: var(--default-light-color);
}
.miniSearchFormWrapper .up-down-down:hover, .miniSearchFormWrapper .up-down-up:hover {
  background-color: #b5461c;
  color: var(--default-color);
}
.miniSearchFormWrapper #searchCopyPaste {
  width: 230px;
}

/*.miniSearchFormWrapper end */
/* elh-search-upgrade-messages */
[elh-search-upgrade-messages] {
  width: 100%;
  /* SEARCH UPGRADE MESSAGES */
}
[elh-search-upgrade-messages] .miniSearchUpgradeMessageWrapper {
  width: 100%;
}
[elh-search-upgrade-messages] .miniSearchErrorMessage {
  color: var(--default-error-color);
}
[elh-search-upgrade-messages] div.miniSearchUpgrade {
  background-color: var(--search-upgrade-bc);
  padding: 10px 5px;
  height: auto;
  width: 100%;
}
[elh-search-upgrade-messages] div.miniSearchUpgrade {
  height: auto;
  padding: 10px 0;
  color: var(--search-upgrade-color);
  background-color: var(--search-upgrade-bc);
}
@media only screen and (min-width: 1100px) {
  [elh-search-upgrade-messages] {
    max-width: 900px; /* Depends on main control + button widths */
    margin: 0 auto 0 auto; /* Centers the element */
  }
  [elh-search-upgrade-messages] div.miniSearchUpgrade {
    order: 6;
    flex-basis: 100%;
    margin-top: 5px;
    width: 100%;
  }
}

/* elh-search-upgrade-messages end */
/* ERROR MESSAGES */
[elh-error-messages] {
  width: 100%;
  margin-top: 5px;
  /* Ensure .miniSearchErrorMessageWrapper fills the directive's width */
}
[elh-error-messages] .miniSearchErrorMessageWrapper {
  width: 100%;
  /* Styling for error message */
}
[elh-error-messages] .miniSearchErrorMessageWrapper .miniSearchErrorMessage {
  background-color: var(--default-error-strong-bc);
  padding: 10px 5px;
  height: auto;
  width: 100%;
  color: var(--default-error-color);
}
@media only screen and (min-width: 1100px) {
  [elh-error-messages] .miniSearchErrorMessageWrapper {
    max-width: 900px; /* Depends on main control + button widths */
    margin: 3px auto 0 auto; /* Centers the element */
  }
  [elh-error-messages] .miniSearchErrorMessageWrapper .miniSearchErrorMessage {
    order: 7;
    flex-basis: 100%;
    margin-top: 5px;
    width: 100%;
  }
}

/* [elh-error-messages] end */
/* Overrides for the daterange picker calender tool */
.daterangepicker {
  border-radius: 0;
}
.daterangepicker td.disabled, .daterangepicker .daterangepicker option.disabled {
  text-decoration: none;
}
.daterangepicker td.active, .daterangepicker .daterangepicker td.active:hover {
  background-color: var(--search-daterangepicker-bc);
}

/* .daterangepicker end */
.hotelImage img {
  width: 100%;
  margin-bottom: -5px;
}

/* Todo - not search page? */
#ErrorMessage {
  display: block;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 24px;
  font-weight: bold;
  color: var(--default-error-color);
  text-align: center;
}

/************************************************************************************
    CHECK AVAILABILITY PAGE CONTENT
*************************************************************************************/
/* Todo - not search page? Or not used. */
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 5px #ff00ff);
  }
  50% {
    filter: drop-shadow(0 0 15px #ff00ff);
  }
  100% {
    filter: drop-shadow(0 0 5px #ff00ff);
  }
}
.glowing-border {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #ff00ff;
  color: white;
  background: black;
  border-radius: 5px;
  animation: glow 1.5s infinite alternate;
}

/************************************************************************************
    RESULTS PAGE CONTENT = _results-content.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.results-page {
  border: 2px solid green !important;
}
.results-page #hotelDescription ul li {
  float: left; /*width:30%;margin-left:3%;*/
  margin-left: 5%;
  width: 45%;
}
@media screen and (max-width: 320px) {
  .results-page #hotelDescription ul li {
    width: 95%;
    margin-left: 5%;
  }
}
.results-page .hidden-input {
  display: none;
}
.results-page .highlight-offer {
  border: 1px solid green;
}
.results-page .highlight-offer-unavailable {
  border: 1px solid red;
}

div.roomResults {
  overflow: hidden;
}
div.roomResults .resultsRoomList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.roomResults .rRmIndex {
  overflow: hidden;
  background-color: var(--room-summary-nth-bc);
  padding: 0 10px 0 10px;
  margin: 0 !important;
}
div.roomResults .rRmIndex div.roomSummary {
  padding: 8px 0;
  background-color: var(--room-summary-nth-bc);
  background-color: var(--results-room-summary-bc);
}
div.roomResults .rRmIndex div.roomSummary h2 {
  line-height: 24px;
  font-size: 1.53846154em;
  padding: 8px 0 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -8px;
  margin-bottom: 8px;
  background-color: var(--room-results-h2-bc);
  color: var(--default-dark-background-color); /*amend 17.12.2024*/
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary {
  margin-bottom: 0;
  color: var(--default-color);
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary span {
  margin-right: 10px;
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary span.roomSummaryLine {
  display: block;
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary span.roomSummaryLine.noDisplay {
  display: none;
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary span b {
  padding-right: 5px;
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary .rRmAmendLink {
  display: block;
  color: var(--default-dark-color);
  text-decoration: underline;
  font-weight: bold;
  margin-top: 8px;
}
div.roomResults .rRmIndex div.roomSummary p.bookingSummary .rRmAmendLink:hover {
  text-decoration: none;
}
div.roomResults .rRmIndex table.roomResults {
  position: relative;
  width: 100%;
  padding: 8px 0;
  margin: 0 0 8px 0; /*17.12.2024*/
  background-color: var(--default-background-color);
  /* Styling for the 'select room' button */
}
div.roomResults .rRmIndex table.roomResults:last-of-type {
  margin-bottom: 16px;
}
div.roomResults .rRmIndex table.roomResults.hroomSelected {
  background-color: var(--default-background-color);
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td {
  display: block;
  position: relative;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td .disabledByLimitedAvailability {
  position: absolute;
  width: 200px;
  top: 50px;
  right: 20px;
  padding: 3px;
  border: 1px solid var(--results-room-avail-limited-color);
}
@media screen and (min-width: 768px) {
  div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 {
    max-width: 250px;
  }
}
@media screen and (min-width: 850px) {
  div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 {
    max-width: 300px;
  }
}
@media screen and (min-width: 1024px) {
  div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 {
    max-width: 350px;
  }
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 + p span {
  /*Fix for Firefox*/
  font-size: 1.23076923em;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 + p span.baseRateEnabled {
  text-decoration: line-through;
  color: var(--room-results-strike-color);
  font-weight: normal;
  font-size: 14px;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td h3 + p span.baseRateDisabled {
  display: none;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td p b.offeredRate {
  color: var(--default-dark-color);
  font-size: 16px;
  font-style: italic;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td .HrmMoreDetailsLink {
  display: inline-block;
  text-decoration: underline;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td .HrmMoreDetailsLink:hover {
  text-decoration: none;
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td .roomAvailNote {
  color: var(--results-room-avail-limited-color);
}
div.roomResults .rRmIndex table.roomResults tr.roomDescription td .roomAvailLimited {
  color: var(--results-room-avail-limited-color);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults {
  display: none;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td ul.longDescription {
  margin: 0 0 0 20px;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td ul.longDescription li {
  width: 50%;
  float: left;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td p.longDescription {
  padding: 8px 10px 16px 10px;
  margin: 0;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults {
  border-collapse: collapse;
  margin: 0 6px 0 6px;
  margin: 0 0 0 6px;
  width: 98.7234043%;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr:nth-child(odd) {
  background-color: var(--package-results-tr-odd-bc);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr:nth-child(even) {
  background-color: var(--package-results-tr-even-bc);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr:first-child {
  background-color: var(--default-background-color);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr th {
  font-size: 1.38461538em; /*18px*/
  line-height: 24px;
  color: var(--default-dark-color);
  padding-left: 10px;
  padding-bottom: 8px;
  padding-top: 10px;
  text-align: center;
  color: var(--package-results-th-color);
  padding-top: 16px;
  padding-bottom: 8px;
  font-weight: normal;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr td {
  text-align: center;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr td:first-child {
  width: 68.45454545%;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  padding-left: 1%;
  padding-right: 1%;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr td.radioSelected {
  background-color: var(--results-radio-select-bc);
  color: var(--results-radio-select-color);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr h4 {
  line-height: 24px;
  font-size: 16px;
  margin-top: 8px;
  color: var(--package-results-th-color);
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr span.offeredRate {
  /* Offered rate in the rates tables */
  font-weight: bold;
  font-size: 16px;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults tr span.offeredRate.baseRateDisabled {
  display: none;
}
div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults .offerTerms, div.roomResults .rRmIndex table.roomResults tr.packageResults td table.packageResults .offerTerms1 {
  display: none;
}
div.roomResults .rRmIndex table.roomResults tr.roomSelection .button {
  padding: 8px 10px;
  position: absolute;
  top: 10px;
  right: 8px;
}
@media screen and (max-width: 768px) {
  div.roomResults .rRmIndex table.roomResults tr.roomSelection .button {
    padding: 12px 10px;
    position: static;
    margin: 8px auto 0 auto;
    width: 33%;
    font-size: 14px;
  }
}
div.roomResults .rRmIndex table.roomResults tr.bestFlexibleRate td h4 {
  padding-right: 20px;
  background: transparent url(/css/css-images/logos/best-price-guarantee-tiny.png) center right no-repeat;
  display: inline-block;
}

.roomImage {
  width: 26.66666666%;
  float: left;
  margin: 0 10px 0 8px;
}

.viewTerms {
  /* Link to display modal */
  text-decoration: underline;
  cursor: pointer;
}
.viewTerms :hover {
  text-decoration: none;
}

div#modalContent ul.withIcons li {
  line-height: 16px;
  margin-bottom: 8px;
  padding-left: 20px;
  width: 40%;
  float: left;
  background: transparent url(/css/css-images/bestprice-icon-sprite.gif) center left no-repeat;
}
div#modalContent ul li.bestPriceGuarantee li.bestPriceGuarantee {
  background-position: 0 0;
}
div#modalContent ul li.bestPriceGuarantee li.bookDirect {
  background-position: 0 -48px;
}
div#modalContent ul li.bestPriceGuarantee li.noBookingFee {
  background-position: 0 -96px;
}
div#modalContent ul li.bestPriceGuarantee li.dedicatedReservationTeam {
  background-position: 0 -144px;
}
div#modalContent ul li.bestPriceGuarantee li.onlineBooking {
  background-position: 0 -192px;
}
div#modalContent ul li.bestPriceGuarantee li.noCancellationFee {
  background-position: 0 -240px;
}
div#modalContent ul li.bestPriceGuarantee li.wifi {
  background-position: 0 -288px;
}
div#modalContent ul li.bestPriceGuarantee li.parking {
  background-position: 0 -336px;
}
div#modalContent ul li.bestPriceGuarantee li.leisureClubs {
  background-position: 0 -384px;
}
div#modalContent ul li.bestPriceGuarantee li.plusOne {
  background-position: 0 -432px;
}
div#modalContent ul li.bestPriceGuarantee li.dogFriendly {
  background-position: 0 -480px;
}
div#modalContent ul li.bestPriceGuarantee li.familyFriendly {
  background-position: 0 -528px;
}
div#modalContent ul + p {
  clear: both;
}

.roomTotal {
  text-align: right;
  font-weight: bold;
  color: var(--default-dark-color);
  margin-bottom: 0;
  color: var(--default-color); /* amend 06.12.2024 */
}

.roomsTotal {
  background-color: var(--results-rooms-total-bc);
  text-align: right;
  font-weight: bold;
  color: var(--default-dark-color);
  padding: 8px 10px 8px 0;
}

/*td.radioSelected:hover{background-color:#999;}*/
td[data-name=RadioContainer] {
  cursor: pointer;
}
td[data-name=RadioContainer]:hover {
  background-color: var(--results-td-hover-bc);
  background-color: transparent;
}
td[data-name=RadioContainer]:hover .bookingButton {
  opacity: 0.5;
}

tr.bestFlexibleRate td input[type=radio], tr.offerRate td input[type=radio] {
  position: absolute;
  opacity: 0;
}

tr.bestFlexibleRate td input[type=radio], tr.offerRate td input[type=radio] {
  position: absolute;
  opacity: 0;
}

/* Hide the buttons */
tr.bestFlexibleRate td label, tr.offerRate td label {
  display: block;
  background-color: var(--default-background-color);
  color: var(--default-color);
  width: 100%;
  cursor: pointer;
}

/* default label style */
tr.bestFlexibleRate td label:hover, tr.offerRate td label:hover {
  opacity: 0.7;
}

/* Hover effect on label */
.bookingButton {
  display: inline-block;
  padding: 4px 10px;
  margin-top: 4px;
  border-radius: 0px; /*amend 17.12.2024*/
  background-color: var(--results-booking-button-bc);
  color: var(--default-light-color);
  font-weight: bold;
}

.radioSelected {
  background-color: transparent;
  color: var(--default-light-color);
}
.radioSelected .bookingButton {
  background-color: var(--results-radio-select-bc);
  color: var(--default-light-color);
}

.hroomUnavailable {
  opacity: 0.5;
}
.hroomUnavailable img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.hroomUnavailable .button {
  background-color: var(--hroom-unavailable-bc);
}

.disabledByLimit {
  background-color: var(--disabled-by-limit-bc);
  opacity: 0.5;
}

.rate2Enable {
  display: inline;
}

.rate2Disabled {
  display: none;
}

/* Added when the use of radio buttons changed a few years ago */
#expandFirstHRoom, #oneRoomRadioContinue, #amendRoomIndex, #amendRoomType {
  display: none;
}

.hidden-input {
  display: none;
}

.highlight-offer {
  border: 1px solid var(--highlight-offer-border-color);
}

.highlight-offer-unavailable {
  border: 1px solid var(--highlight-offer-unavailable-border-color);
}

/************************************************************************************
    Booking Details page = _results-details-content.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.results-details-page #hotelDescription {
  padding: 8px 10px 20px 10px;
}
.results-details-page .hotelSummaryCopy ul.bookingSummary {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.results-details-page .hotelSummaryCopy ul.bookingSummary li {
  width: 32%;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  width: 48%;
  text-align: left;
}
.results-details-page .hotelSummaryCopy ul.bookingSummary li b {
  padding-right: 5px;
}
@media screen and (min-width: 560px) {
  .results-details-page .hotelSummaryCopy ul.bookingSummary {
    flex-direction: row;
    justify-content: space-between;
  }
  .results-details-page .hotelSummaryCopy ul.bookingSummary li:first-of-type {
    text-align: left;
  }
  .results-details-page .hotelSummaryCopy ul.bookingSummary li:nth-of-type(2) {
    text-align: center;
  }
  .results-details-page .hotelSummaryCopy ul.bookingSummary li:last-of-type {
    text-align: right;
  }
}

div.roomDetail {
  margin: 0;
  padding: 8px 10px 16px 10px;
  overflow: hidden;
  background-color: var(--details-room-detail-bc);
}
div.roomDetail[data-idx="1"] {
  border-bottom: none;
  background-color: var(--details-room-detail-bc);
  color: var(--default-color);
}
div.roomDetail[data-idx="1"] p, div.roomDetail[data-idx="1"] .extrasCheckboxLabelDetails, div.roomDetail[data-idx="1"] .specialsCheckboxLabelDetails {
  color: var(--default-color);
}
div.roomDetail[data-idx="2"] {
  border-bottom: none;
  background-color: var(--details-room-detail-bc);
  color: var(--default-color);
}
div.roomDetail[data-idx="2"] p, div.roomDetail[data-idx="2"] .extrasCheckboxLabelDetails, div.roomDetail[data-idx="2"] .specialsCheckboxLabelDetails {
  color: var(--default-color);
}
div.roomDetail [data-idx="3"] {
  border-bottom: none;
  background-color: var(--details-room-detail-bc);
  color: var(--default-color);
}
div.roomDetail [data-idx="3"] p, div.roomDetail [data-idx="3"] .extrasCheckboxLabelDetails, div.roomDetail [data-idx="3"] .specialsCheckboxLabelDetails {
  color: var(--default-color);
}
div.roomDetail h2 {
  padding: 8px 0 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -8px;
  margin-bottom: 8px;
  background-color: var(--details-room-detail-h2-bc);
  color: var(--default-dark-color); /*17.12.2024*/
}
div.roomDetail p.required {
  font-weight: normal;
}
div.roomDetail input.error {
  border-color: var(--default-error-color);
  background-color: var(--details-input-error-bc);
}
div.roomDetail label.error {
  margin-right: 20px;
  margin-left: 5px;
  font-weight: bold;
}
div.roomDetail .roomDetailNames {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
div.roomDetail .roomDetailNames span.nameWrapper {
  display: block;
}
div.roomDetail .roomDetailNames span.nameWrapper select {
  width: 75px;
}
@media screen and (min-width: 768px) {
  div.roomDetail .roomDetailNames {
    flex-direction: row;
    justify-content: flex-start;
  }
}

#mainSection.bookingDetailsPage .wrapper.summary:first-of-type {
  overflow: hidden;
  padding: 20px 10px 8px 10px;
  background-color: var(--details-wrapper-summary-bc);
}

.roomLayout {
  margin-top: 8px;
}
.roomLayout input {
  display: inline-block;
  margin: 0;
}

div.SpecialsExtrasWrapper {
  width: 100%;
  overflow: hidden;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  div.SpecialsExtrasWrapper .specialsExtrasInnerBox {
    flex-direction: row;
    justify-content: flex-start;
  }
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras {
  width: 100%;
  max-width: 480px;
  margin-right: 20px;
  margin-top: 16px;
  background-color: var(--details-special-extras-bc);
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras .specialsExtrasOpener {
  max-width: 300px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras div.closed, div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras div.open {
  cursor: pointer;
  line-height: 32px;
  padding-left: 10px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras div.closed {
  background: transparent url(/css/css-images/specials-arrows.png) top left no-repeat;
  background-position: 100% 0;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras div.open {
  background: transparent url(/css/css-images/specials-arrows.png) top left no-repeat;
  background-position: 100% -32px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul {
  overflow: visible;
  height: 100%;
  padding: 10px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul li {
  width: auto;
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul li h3 {
  color: var(--default-color);
  font-size: 13px;
  margin-bottom: 8px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul li select[data-code=Dogs] {
  float: left; /*margin:0 20px 12px 0;*/
  margin: 4px 5px 0 0;
  border: none;
  width: 75px;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul li input[type=checkbox] {
  vertical-align: middle;
  margin: 0 20px 0 0;
  display: block;
  float: left;
}
div.SpecialsExtrasWrapper .specialsExtrasInnerBox div.SpecialsExtras ul li textarea {
  height: 96px;
  width: 98%;
}

div.roomReservation {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
div.roomReservation p {
  margin-bottom: 0;
  color: var(--default-dark-color);
  font-weight: bold;
}
div.roomReservation p span {
  font-weight: normal;
  font-style: italic;
}
div.roomReservation ul + p {
  margin-top: 16px;
}
div.roomReservation div.roomLayout input {
  margin-right: 10px;
}
div.roomReservation div.roomLayout label {
  margin-right: 20px;
}
div.roomReservation div.nameAgeDetailsWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background-color: var(--details-name-age-bc);
  max-width: 220px;
  padding: 4px;
}
div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails .childsAge {
  width: 140px;
}
@media (min-width: 600px) {
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails {
    display: flex;
    flex-direction: row;
    width: 560px;
    min-width: 560px;
    max-width: 1000px;
    gap: 4px;
    align-items: center;
  }
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails .cot label {
    margin-left: 4px;
  }
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsName, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.cot {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsName input, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsName select, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge input, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge select, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.cot input, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.cot select {
    margin-bottom: 0;
    margin-right: 5px;
  }
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsName input[type=checkbox], div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsName select[type=checkbox], div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge input[type=checkbox], div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge select[type=checkbox], div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.cot input[type=checkbox], div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.cot select[type=checkbox] {
    height: 30px !important;
    margin: 0 !important;
    margin-right: 2px;
  }
  div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div .childsName, div.roomReservation div.nameAgeDetailsWrapper div.nameAgeDetails div.childsAge {
    justify-content: right;
  }
}

div.roomDetail .incChildren, div.roomDetail input[name=LastName] + p {
  padding-top: 16px;
}

.totalPrice {
  padding: 8px 10px 8px 0;
  background-color: var(--details-total-price-bc);
  color: var(--default-dark-color);
  text-align: right;
  font-weight: bold;
}

div.roomDetail .priceWrapper {
  clear: both;
  width: 100%;
  padding: 8px 10px 0 0;
  text-align: right;
}
div.roomDetail .priceWrapper p {
  margin: 0;
  line-height: 1em;
}
div.roomDetail .priceWrapper p:nth-of-type(2) {
  margin-top: 16px;
}
div.roomDetail .rRmAmendLink {
  clear: both;
  padding: 16px 0 8px 0;
}

#CorporateMessage.wrapper {
  background-color: var(--details-corporate-msg-bc);
  margin: 24px 10px 0 10px;
  padding: 8px 10px;
}

#CorporateMessage.wrapper p {
  font-weight: bold;
}

#mainSection.bookingDetailsPage #CorporatePayMethod.wrapper {
  background-color: var(--details-corporate-msg-bc);
  margin: 24px 0 0 0;
  padding: 8px 10px;
}

#mainSection.bookingDetailsPage #CorporatePayMethod.wrapper p {
  margin-bottom: 0;
}

label#summaryValidation {
  display: block;
  color: var(--default-error-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

/************************************************************************************
    DEPOSITS = _deposits.scss
    Some are used on multiple pages
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
tr.packageResults td table tr th span {
  font-size: 12px;
}

span.deposit-value,
span.saving-value,
span.fit-guest-value,
span.fit-deposit-value,
span.fit-saving-value,
.discount-enabled,
.discount-disabled {
  display: inline-block;
  padding: 5px;
  margin-left: 10px;
  border: 1px solid transparent;
  -ms-border-radius: 2px;
  border-radius: 2px;
  color: var(--default-light-color);
}

span.deposit-value,
span.fit-deposit-value,
.discount-enabled,
.dot-enabled {
  background-color: var(--deposit-value-bc);
}

span.fit-guest-value {
  background-color: var(--fit-guest-value-bc);
}

span.fit-saving-value {
  background-color: var(--fit-saving-value-bc);
}

span.fit-saving-value,
span.fit-deposit-value,
span.fit-guest-value {
  width: 100px;
  text-align: right;
}

.discount-disabled,
.dot-disabled {
  background-color: var(--dot-disabled-bc);
}

.dot-enabled,
.dot-disabled {
  height: 15px;
  width: 15px;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  vertical-align: text-top;
}

@media only screen and (min-width: 1300px) {
  .dot-enabled, .dot-disabled {
    height: 12px;
    width: 12px;
  }
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  position: absolute;
  visibility: hidden;
  width: 120px;
  padding: 3px;
  bottom: 10px;
  border-radius: 6px;
  background-color: var(--default-dark-background-color);
  color: var(--default-light-color);
  text-align: center;
  z-index: 0;
}

.dot-enabled .tooltiptext {
  background-color: var(--tooltip-enabled-bc);
}

.dot-disabled .tooltiptext {
  background-color: var(--tooltip-disabled-bc);
  color: var(--tooltip-disabled-color);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#DiscountList {
  padding: 15px;
  margin-bottom: 5px;
  color: var(--default-color);
}

#discountDetails {
  display: inline-block;
  /* background-color: green;
  color: #fff;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  margin-left: 10px;*/
}
#discountDetails a {
  text-decoration: none;
  color: var(--default-light-color);
}
#discountDetails a:link, #discountDetails a:visited, #discountDetails a:active {
  text-decoration: none;
  color: var(--default-light-color);
}
#discountDetails a:hover {
  text-decoration: none;
  color: var(--discount-details-hover-color);
}

.roomsTotalHidden {
  display: none;
}

.totalPriceMessage {
  text-align: center;
}

.discount-error {
  color: var(--default-error-color);
}

.discount-good {
  color: var(--discount-good-color);
}

.discountStrike {
  text-decoration: line-through;
}

.warningWrapper {
  clear: both;
  padding-top: 24px;
}

/*overwrite rule in styles.scss*/
div.roomReservation p span {
  font-style: normal;
}

.totalPrice h3 {
  margin-left: 0;
  padding-left: 10px;
  text-align: left;
}

.totalPrice #additionalTotalMessage {
  margin-left: 0;
  padding-left: 10px;
  text-align: left;
}

/*overwrite rule in styles.scss*/
.roomTotal {
  font-weight: normal;
}

.bedroom-image .item img {
  display: block;
  width: 100%;
  height: auto;
  /*max-width: 270px;*/
  max-height: 183px;
  /*max-height: 267px;
  border: 1px solid red;
  padding: 10px;
  background-color: pink;*/
}

.bedroom-image .item {
  max-width: 270px;
}

/*Overwrite rule targeting the second p tag in the styles.css file*/
div.roomDetail .priceWrapper p:nth-of-type(2) {
  margin-top: auto;
}

/* Reset the p tag line height to the general p styling */
div.roomDetail .priceWrapper p {
  margin: 0;
  line-height: 1.84615385em;
}

/* Search_Screen, Results_Screen, ResultsDetails, Payment */
/************************************************************************************
    PAYMENT DETAILS PAGE CONTENT = _payment-content.scss
    Todo - Styles - Check this from _styles.scss with _payment.scss and _payment-v3.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.payment-page section#mainSection {
  gap: 0;
}

#mainSection.paymentsDetails {
  overflow: hidden;
  padding: 0;
  background-color: var(--default-background-color);
}
#mainSection.paymentsDetails .BookingSummaryWrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--booking-summary-bc);
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-booking-summary] {
  width: 100%;
  margin: 0;
  padding: 0;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-booking-summary] div {
  width: 100%;
  margin: 0;
  padding: 0;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-booking-summary] div .wrapperHotelImage {
  width: 100%;
  margin: 0;
  padding: 0;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-booking-summary] div .wrapperHotelImage img {
  width: 100%;
  height: auto;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-booking-summary] div .wrapperHotelText {
  width: 100%;
  margin: 0;
  padding: 0 10px;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-room-summary] {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-room-summary] .roomSummaryText {
  width: 100%;
  border: 10px solid var(--booking-summary-bc);
  padding: 5px;
  background-color: var(--room-summary-text-bc);
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-room-summary] .roomSummaryText h3 {
  color: var(--default-color);
  font-weight: normal;
}
#mainSection.paymentsDetails .BookingSummaryWrapper [elh-room-summary] .roomSummaryText p {
  margin: 0;
  padding: 0;
}
#mainSection.paymentsDetails .paymentCheckBoxes {
  padding: 0 5px;
}
#mainSection.paymentsDetails .wrapper {
  background-color: var(--payments-details-wrapper-bc);
}
#mainSection.paymentsDetails .roomSummary {
  margin-top: 24px;
  padding: 8px 10px 8px 10px;
}
#mainSection.paymentsDetails .roomSummary h3 {
  padding: 8px 0 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -8px;
  margin-bottom: 8px;
  background-color: var(--room-summary-h3-bc);
  color: var(--default-light-color);
  font-size: 16px;
}
#mainSection.paymentsDetails .roomSummary:nth-of-type(2) {
  background-color: var(--room-summary-nth-bc);
  color: var(--room-summary-nth-color);
}
#mainSection.paymentsDetails .roomSummary:nth-of-type(3) {
  background-color: var(--room-summary-nth-bc);
  color: var(--room-summary-nth-color);
}
#mainSection.paymentsDetails .roomSummary:nth-of-type(4) {
  background-color: var(--room-summary-nth-bc);
}
#mainSection.paymentsDetails .roomSummary:nth-of-type(5) {
  background-color: var(--room-summary-nth-bc);
}
#mainSection.paymentsDetails .wrapper ul, #mainSection.paymentsDetails .roomSummary ul {
  list-style: none;
}

div.bookingSummary {
  padding: 8px 10px;
  background-color: var(--div-booking-summary-bc);
}
div.bookingSummary p span {
  padding-right: 10px;
}
div.bookingSummary p span b {
  padding-right: 5px;
}

div#contactDetails {
  margin: 24px 0;
}
div#contactDetails.wrapper {
  margin-top: 24px;
}
div#contactDetails div.addressBlockPayment {
  margin-left: 2.17391304%;
}
div#contactDetails h3, div#contactDetails p {
  width: 100%;
  padding: 10px;
}

.contactForm {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.contactForm div {
  flex: 1 100%;
  text-align: center;
}
.contactForm div input {
  height: 32px;
  width: 98%;
  margin-bottom: 10px;
  padding: 0 2.38095238%;
  border: 1px solid var(--contact-border-color);
}
.contactForm div input.error {
  border-color: var(--default-error-color);
  background-color: var(--contact-error-background);
}
.contactForm div select {
  height: 32px;
  width: 98%;
  margin-bottom: 10px;
  border: 1px solid var(--contact-border-color);
}
.contactForm div label.error {
  display: block;
  width: 99%;
  margin-top: -6px;
  margin-bottom: 10px;
  color: var(--default-error-color);
  font-weight: bold;
  text-align: right;
}

.securePaymentLogo {
  text-align: center;
  padding-top: 40px;
  clear: both;
}

.roomTotalSummary {
  text-align: right;
  padding-bottom: 5px;
}

.roomTotalValue {
  color: var(--room-total-value-color);
  font-weight: bold;
}

@media only screen and (min-width: 768px) {
  h1 {
    margin-top: 20px;
  }
  .contactForm div {
    flex: 2 50%;
    padding: 0 5px;
  }
}
input#AcceptCheckBox {
  vertical-align: middle;
}

#carbonText {
  display: inline;
}

.pay-popup {
  width: 100%;
  max-width: 400px;
}

.card-payment-content {
  max-width: 480px;
}

input.continueButton {
  width: 50%;
  height: 50px;
  padding: 0 2.38095238%;
  margin: 10px auto;
  border: none;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  background-color: var(--continue-button-bc);
}

button.continueButton {
  width: 50%;
  height: 50px;
  padding: 0 2.38095238%;
  margin: 10px auto;
  border: none;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  background-color: green;
}

.pay-button-wrapper {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
.pay-button-wrapper button {
  width: 50%;
  height: 50px;
  padding: 0 2.38095238%;
  margin: 10px auto;
  border: none;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}
.pay-button-wrapper button.continueButton {
  background-color: green;
}
.pay-button-wrapper button#gpay-button {
  background-color: black;
}
.pay-button-wrapper button#apay-button {
  background-color: white;
  border: 1px solid darkgray;
}
.pay-button-wrapper button#paypal-button {
  background-color: white;
  border: 1px solid blue;
}
.pay-button-wrapper button#bitcoin-button {
  background-color: var(--bitcoin-background-color);
}

#overlay-content-card label {
  display: inline;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  background-color: var(--default-background-color);
  text-align: left;
}

#cardPayment, #cardPayment iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#payment-details {
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 3px;
  text-align: left;
  font-size: larger;
}
#payment-details p {
  width: 90%;
}
#payment-details .payment-details-value {
  font-weight: bold;
}
#payment-details input {
  display: block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-color);
  font-size: 1rem;
  line-height: 1.5;
  background-clip: padding-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.iframe-container iframe { /*height:440px;*/
  height: 500px;
  width: 100%;
}

.iframe-error-overlay {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--overlay-card-background);
  z-index: 4002;
}

.iframe-error-overlay {
  z-index: 4006;
}

#iframe-error-overlay-content {
  position: relative;
  width: 25%;
  margin: auto;
  padding: 5px;
  top: 15%;
  top: 50%;
  border-radius: 7px;
  background-color: var(--default-background-color);
  opacity: 1;
  z-index: 4003;
  transform: translateY(-50%);
}

#iframe-error-overlay-content {
  padding: 8px;
  padding: 8px 12px;
  color: var(--default-error-color);
  z-index: 4007;
}

.x-close {
  position: relative;
  height: 20px;
  width: 20px;
  top: 2px;
  margin: 2px;
  background-color: var(--default-close-bc);
}
.x-close:after {
  position: absolute;
  height: 20px;
  left: 9px;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}
.x-close:before {
  position: absolute;
  height: 20px;
  left: 9px;
  border-left: 2px solid var(--default-border-light-color);
  transform: rotate(-45deg);
  content: "";
}

.control-group {
  position: relative;
  margin-bottom: 1rem;
}

#threeDsError {
  display: none;
  padding: 20px;
  color: var(--default-error-color);
}

/*************************************************************************************
    VOUCHERS = _vouchers.scss
    The vouchers overlay that pops up to allow the user to enter vouchers
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.overlay-flex-container {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
}

.voucher-overlay-activities .overlay-flex-container {
  min-height: 0;
}

.overlay-flex-content {
  flex: 1;
  height: 200px;
}

#voucher-redemption-details h2 {
  background-color: var(--voucher-submit-button-background);
  color: var(--default-light-color);
  margin: 0;
  padding: 1rem 0;
}

.voucher-find, .voucher-cancel {
  display: block;
  padding: 8px 10px;
  background-color: var(--voucher-submit-button-background);
  color: var(--default-light-color);
  font-weight: bold;
}

.voucher-cancel {
  background-color: var(--default-cancel-button-bc);
  color: var(--default-cancel-button-color);
}

.voucher-overlay-activities .voucher-find {
  padding: 5px;
}

.voucher-find:disabled {
  background-color: var(--voucher-find-disabled-background);
}

#voucher-table {
  border-collapse: collapse;
  font-size: smaller;
  width: 100%;
}

#voucher-table td, #voucher-table th {
  padding: 8px;
  border: 1px solid var(--default-table-border-color);
}

#voucher-table tr:nth-child(even) {
  background-color: var(--default-table-alternate-row-background);
}

#voucher-table tr:hover {
  background-color: var(--default-table-row-hover);
}

#voucher-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--voucher-table-header-background);
  color: var(--default-light-color);
}

input.vouchersButton {
  background-color: var(--vouchers-button-background);
}

#voucher-offer button {
  display: inline-block;
}

#voucher-error-text, .validation-warn {
  color: var(--default-error-color);
}

#payment-details input.voucher-code-input {
  font-size: 0.8rem;
  width: 150px;
}

.voucher-media-sizes {
  width: 100%;
  max-width: 480px;
}

@media (min-width: 380px) {
  #payment-details input.voucher-code-input {
    font-size: 1rem;
    width: 100%;
  }
}
/* Payment */
/************************************************************************************
    COIN CORNER = _coin-corner.scss

    Uses wbs-overlay but contains bitcoin specific styles too.
    The wbs-overlay will eventually replace others, but for now it can remain here.

*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
/************************************************************************************
    MIXINS = _mixins.scss
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.wbs-overlay {
  --active-tab: var(--wbs-overlay-active-tab);
  --active-bc: var(--bitcoin-background-color);
  --inactive-bc: var(--bitcoin-background-color);
  --tab-border: var(--wbs-overlay-tab-border);
  --wbs-overlay-background: var(--overlay-card-background);
  --panel-background: var(--wbs-overlay-active-tab);
}

#bitcoin-popup .wbs-popup {
  background-color: var(--light-overlay-content-bc);
  max-width: 500px;
}
#bitcoin-popup .wbs-popup .wbs-content {
  background-color: var(--light-overlay-content-bc);
}

/*
  TABS
    Todo - Styles - Tabs used only in coin corner tabs for lightning v onchain?
*/
.wbs-tabs {
  display: table;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 95%;
}

.wbs-tab {
  border: 1px solid var(--tab-border);
  display: table-cell;
}

.wbs-tab-active {
  border-right: var(--active-tab) 2px solid;
  border-bottom: var(--active-tab) 2px solid;
  border-left: var(--active-tab) 2px solid;
  background-color: var(--active-tab);
}

.wbs-tab .fa-circle-info,
.wbs-tab .fa-bitcoin,
.wbs-tab .fa-bolt-lightning {
  color: var(--inactive-bc);
}

.wbs-tab-active .fa-circle-info,
.wbs-tab-active .fa-bitcoin,
.wbs-tab-active .fa-bolt-lightning {
  color: var(--active-bc);
}

.wbs-tab a {
  display: block;
  width: 100%;
  color: var(--default-light-color);
  font-size: 15px;
  font-size: 1.5rem;
  padding: 0.25em 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.wbs-tab--active a {
  color: var(--wbs-tab-active-link-color);
}

.wbs-panels {
  background-color: var(--panel-background);
  margin: 0;
  padding: 0;
}

.wbs-panel {
  display: none;
  padding: 1em;
  height: 350px;
}

.wbs-panel-active {
  display: flex;
  height: 350px;
}

.wbs-panel__title {
  margin: 0;
  padding: 0 2.5%;
  border-bottom: 1px solid var(--wbs-panel-bottom-border-color);
  color: var(--wbs-panel-title-color);
  font-size: 20px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.6;
}

.cc-help p {
  text-align: left;
}

.bitcoin-heading {
  padding: 1rem 0;
  background-color: var(--bitcoin-heading-background-color);
  width: 100%;
}

.bitcoin-cancel {
  padding: 0 2.38095238%;
  border: none;
  height: 30px;
  margin: 10px auto;
  background-color: var(--default-cancel-button-bc);
  color: var(--default-cancel-button-color);
}

button#bitcoin-button span {
  font-size: 20px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    border: 1px solid var(--active-bc);
  }
  50% {
    transform: scale(0.97);
    border: 1px solid var(--pulse-50percent-color);
  }
  100% {
    transform: scale(1);
    border: 1px solid var(--active-bc);
  }
}
.pulse {
  background-color: var(--active-bc);
  color: var(--default-light-color);
  animation: pulse 2s infinite;
}

/* Payment */
/***********************************************************************************************
    Hotel and Room Galleries - _owl-gallery-custom.scss

************************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.grid-col {
  display: grid;
  gap: 1rem;
}

.carousel {
  text-align: center;
}

.carousel__gallery {
  width: 250px;
  margin: auto;
}

@media (min-width: 480px) {
  .carousel__gallery {
    width: 420px;
  }
}
@media (min-width: 576px) {
  .carousel__gallery {
    width: 500px;
  }
}
@media (min-width: 768px) {
  .grid-col--two-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .carousel__gallery {
    width: 350px;
  }
}
/* Results_Screen */
/************************************************************************************
    CONFIRMATION PAGE CONTENT = _confirmation.scss
    Any selectors shared with other pages are prefixed by .confirmation-page
*************************************************************************************/
.confirmation-page #header {
  height: 30px;
}
.confirmation-page #headerInner {
  height: 30px;
}
.confirmation-page #progressbar {
  display: none;
}
.confirmation-page .wrapper {
  background-color: var(--default-background-color);
}
.confirmation-page .ErrorText {
  color: red;
}

h1.confirmationHeading {
  padding-top: 10px;
}

.bookedNotPaidMessage {
  padding: 5px;
}

.bookedAndPaidMessage {
  padding: 5px;
}

.bookedPaidRefreshMessage {
  padding: 5px;
}

.bookingSummaryPayment #hotelbookingSummary {
  margin-bottom: 20px;
  padding: 8px 10px;
  background-color: var(--hotel-booking-summary-bc);
}
.bookingSummaryPayment .roomSummaryDetails {
  margin-bottom: 20px;
  padding: 8px 10px;
}
.bookingSummaryPayment .roomSummaryDetails:nth-of-type(1) {
  background-color: var(--hotel-booking-summary-bc);
  color: var(--default-color);
}
.bookingSummaryPayment .roomSummaryDetails:nth-of-type(2) {
  background-color: var(--hotel-booking-summary-bc);
  color: var(--default-color);
}
.bookingSummaryPayment .roomSummaryDetails:nth-of-type(3) {
  background-color: var(--hotel-booking-summary-bc);
  color: var(--default-color);
}
.bookingSummaryPayment .roomSummaryDetails:nth-of-type(4) {
  background-color: var(--hotel-booking-summary-bc);
  color: var(--default-color);
}
.bookingSummaryPayment .roomSummaryDetails:nth-of-type(5) {
  background-color: var(--hotel-booking-summary-bc);
}
.bookingSummaryPayment .roomSummaryDetails h3 {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -8px;
  margin-bottom: 8px;
  padding: 8px 0 8px 10px;
  background-color: var(--room-summary-h3-bc);
  color: var(--default-light-color);
  font-size: 16px;
}
.bookingSummaryPayment .roomSummaryDetails h3 span.room-presentation {
  display: block;
}
.bookingSummaryPayment .roomSummaryDetails ul {
  list-style: none;
}
.bookingSummaryPayment .roomSummaryDetails span.discount-good, .bookingSummaryPayment .roomSummaryDetails span.discount-error {
  display: inline-block;
  padding-left: 10px;
}
.bookingSummaryPayment .bookedNotPaidWarning {
  color: var(--default-error-color);
}

.confirmCopyContainer {
  padding: 5px;
}

.socialMediaContainer {
  padding: 5px;
}
.socialMediaContainer .socialMedia {
  list-style: none;
}
.socialMediaContainer .socialMedia li a {
  display: block;
  padding: 8px;
  width: auto;
  height: 32px;
}
.socialMediaContainer .socialMedia li a img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: middle;
}

.deposit-value {
  display: inline-block;
  margin-left: 10px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: var(--deposit-value-span);
  color: var(--default-light-color);
}

.room-confirm-note {
  display: inline-block;
  padding: 5px;
  margin-left: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: var(--room-confirm-note-bc);
  color: var(--default-light-color);
}
.room-confirm-note a {
  color: var(--default-light-color);
  text-decoration: underline;
}

/* Confirmation*/
/*******************************************************************************************
    MODAL = _modal.scss
	The Modal Window used for the hotel description
	Todo - Styles - first part copied from main. The rest from modal.css
********************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
#modalBackground {
  opacity: 0.4;
  filter: alpha(opacity=40);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--default-dark-background-color);
}
#modalBackground #modalBox {
  background-color: var(--modal-box-bc);
  position: absolute;
  background: var(--modal-box-2-bc);
  padding: 8px;
  margin: 2%;
  margin: 0 10px 0 0;
  margin: 0;
}
#modalBackground #modalBox #modalContent {
  display: flex;
  position: absolute;
  height: 100vh;
  width: 90%;
  top: 0;
  left: 0;
  padding: 100px 5% 0 5%;
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
  background-color: var(--modal-content-bc);
  color: var(--default-dark-color);
  z-index: 3000;
  padding: 24px 30px 24px 30px;
  background: var(--modal-content-2-bc);
}
@media screen and (max-width: 800px) {
  #modalBackground #modalBox #modalContent ul.withIcons li {
    width: 90%;
  }
}
#modalBackground #modalBox #modalClose {
  position: absolute;
  display: block;
  top: 10px;
  right: 25px;
  font-weight: bold;
}

/* Results_Screen */
/************************************************************************************
    FIT-AGENT = _fit-agent.scss
    Styles specific to the FIT agent.
    Todo - Styles - Test after the main bookings pages.
*************************************************************************************/
/************************************************************************************
    VARIABLES = _variables.scss
    Todo - Styles - reconcile the various uses of z-index.
    Todo - Styles - Review font families - copmpare to reset and general
*************************************************************************************/
/*
    MEDIA QUERY SIZES

*/
.fit-agent-banner {
  position: fixed;
  display: none;
  top: 10%;
  left: 20%;
  right: 20%;
  width: auto;
  padding: 5px;
  background-color: var(--fit-agent-banner-bc);
  color: var(--default-light-color);
  z-index: 3000;
}

#progressbar.fit-agent ul li.currentPage {
  width: 20%;
  height: 30px;
}

#progressbar.fit-agent ul li {
  width: 20%;
}

#fitIdentityOverlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fit-popup {
  background-color: white !important;
  min-width: 300px;
}

.fit-content {
  background-color: white !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.fit-content div {
  width: 100%;
}
.fit-content .fit-login, .fit-content .fit-cancel {
  display: block;
  padding: 8px 10px;
  background-color: var(--voucher-submit-button-background);
  color: var(--default-light-color);
  font-weight: bold;
}
.fit-content .fit-cancel {
  background-color: green;
}
.fit-content input {
  display: block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background-color);
  color: var(--input-color);
  font-size: 1rem;
  line-height: 1.5;
  background-clip: padding-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 100%;
}

.fit-login-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-form-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/************************************************************************************
    ERROR PAGE CONTENT = _site-error.scss
*************************************************************************************/
.errorPage.wrapper {
  background-color: var(--default-background-color);
}

.errorPage.wrapper input {
  display: block;
}

.errorPage.wrapper span.error {
  text-align: center;
  color: var(--default-error-color);
  font-weight: bold;
  display: block;
}

/* SiteError.htm */
/************************************************************************************
   ACCEPTED CARDS = _accepted-cards.scss

*************************************************************************************/
/*IE Fix*/
div#contactDetails div#acceptedCards { /*padding: 16px 0 16px 0;*/
  width: 100%;
}

#acceptedCards {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
#acceptedCards div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#acceptedCards div img {
  width: 42px;
  height: 29px; /* 24px; */
  margin-right: 5px;
}
/*# sourceMappingURL=wbs-styles.css.map */