/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/**
 * Twenty TwentyOne Styles
 */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

# Global
# Single Room
# Listing Page
# Booking Page
# Widgets
# Extensions
*/
/*--------------------------------------------------------------
>>> GLOBAL
----------------------------------------------------------------
*/
/* Notices */
.hotelier-notice {
  background-color: #fff;
  border-left: 3px solid var(--global--color-secondary);
  margin-bottom: var(--global--spacing-vertical);
  padding: calc(0.5 * var(--global--spacing-vertical)) calc(0.5 * var(--global--spacing-vertical)) calc(0.5 * var(--global--spacing-vertical)) var(--global--spacing-horizontal);
}

.hotelier-notice--error {
  list-style: none;
  margin-left: 0;
  border-color: #ff0033;
}

/* Cart errors */
.cart-errors {
  font-style: italic;
}

.button--backward {
  display: inline-block;
  margin-top: var(--global--spacing-vertical);
}

/* No rooms found */
.no-rooms-found {
  font-style: italic;
}

/* Loops */
.room-loop__list {
  list-style: none;
  margin-left: 0;
  column-gap: var(--global--spacing-vertical);
  display: grid;
  margin-bottom: var(--global--spacing-vertical);
  padding: 0;
  row-gap: var(--global--spacing-vertical);
  width: 100%;
}

.room-loop__item {
  display: block;
}

.button--view-room-details {
  display: inline-block;
  font-size: var(--global--font-size-xs) !important;
  margin-top: calc(0.5 * var(--global--spacing-vertical));
  padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)) !important;
}

.room__thumbnail--loop {
  display: block;
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.room__name--loop {
  font-size: var(--heading--font-size-h4);
  font-weight: var(--heading--font-weight-strong);
  letter-spacing: var(--heading--letter-spacing-h4);
  line-height: var(--heading--line-height-h4);
}

.room__price--loop {
  display: block;
  font-size: var(--global--font-size-xs);
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__description--loop {
  display: block;
  font-size: var(--global--font-size-xs);
}

.room__name--loop + .room__description--loop {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

/* Room price */
.room__price,
.rate__price,
.widget-rooms__price {
  display: block;
}

.room__price .amount,
.rate__price .amount,
.widget-rooms__price .amount {
  font-weight: bold;
}

.room__price del,
.rate__price del,
.widget-rooms__price del {
  color: inherit;
  font-size: 80%;
  opacity: 0.5;
}

.room__price ins,
.rate__price ins,
.widget-rooms__price ins {
  background: none;
}

/* Room deposit */
.room__deposit,
.rate__deposit {
  background: #fff;
  border: 3px solid var(--global--color-secondary);
  display: inline-block;
  font-size: var(--global--font-size-xs);
  font-weight: bold;
  padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
}

/* Infos */
.room__non-cancellable-info,
.rate__non-cancellable-info,
.room__not-available-info {
  color: #ff0033;
  font-weight: bold;
}

.room__min-max-stay {
  font-weight: bold;
}

.room__max-guests-recommendation {
  font-weight: bold;
}

/* Room conditions */
.room__conditions-list,
.rate__conditions-list {
  margin-top: var(--global--spacing-vertical);
  margin-bottom: var(--global--spacing-vertical);
}

/* Form fields */
.room-quantity__input {
  min-width: 60px;
}

.form-row {
  margin-bottom: var(--global--spacing-vertical);
  margin-top: var(--global--spacing-vertical);
}

.form-row abbr.required {
  border-bottom: none;
  color: #ff0033;
}

.form-row label {
  display: block;
  font-weight: bold;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="password"],
.form-row input[type="search"],
.form-row textarea,
.form-row #country {
  width: 100%;
}

/* Reservation tables */
table.hotelier-table th, table.hotelier-table td {
  vertical-align: top;
  border-color: var(--global--color-border);
  border-width: 3px;
}

table.hotelier-table .amount {
  font-weight: bold;
}

table.hotelier-table tfoot th {
  text-align: left;
}

table.hotelier-table tfoot td {
  text-align: right;
}

.reservation-table__room-qty {
  text-align: center;
  width: 60px;
}

.reservation-table__room-cost,
.reservation-table__room-extra-cost {
  text-align: right;
}

.reservation-table__room-link {
  display: block;
  font-weight: bold;
}

.reservation-table__room-rate {
  display: block;
}

.reservation-table__room-non-cancellable {
  color: #ff0033;
  display: block;
  font-weight: bold;
}

.reservation-table__room-guests {
  display: block;
  font-size: var(--global--font-size-xs);
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.reservation-table__room-guests .form-row {
  margin: 0 0 calc(0.5 * var(--global--spacing-vertical));
}

.reservation-table__room-guests .form-row:last-child {
  margin-bottom: 0;
}

.reservation-table__room-guests-label {
  display: block;
}

/*--------------------------------------------------------------
>>> DATEPICKER
----------------------------------------------------------------
*/
.datepicker-form {
  border-bottom: 3px solid var(--global--color-border);
  padding-bottom: var(--global--spacing-vertical);
  position: relative;
}

.datepicker-input-select {
  margin: 0 !important;
  margin-right: var(--global--spacing-vertical);
  width: 100% !important;
}

.datepicker-input-select:hover {
  cursor: pointer;
}

.datepicker-input-select:focus {
  outline: none !important;
}

.button--datepicker {
  width: 100%;
}

.datepicker-input-select-wrapper {
  display: inline-block;
  width: 100%;
}

.datepicker {
  background-color: #fff;
  border: 3px solid var(--global--color-border);
  border-top: none;
  font-size: var(--global--font-size-xs);
  left: 0;
  max-width: var(--responsive--aligndefault-width);
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 999999;
}

.datepicker table,
.datepicker caption,
.datepicker th,
.datepicker td {
  font-size: .875rem;
  text-align: center;
}

.datepicker__inner {
  padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
}

.datepicker__month {
  border-collapse: collapse;
  border: none;
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
}

.datepicker__month--month2 {
  display: none;
}

.datepicker__month-day--valid {
  cursor: pointer;
}

.datepicker__month-day--lastMonth,
.datepicker__month-day--nextMonth {
  visibility: hidden;
}

.datepicker__info--feedback {
  display: none;
}

.datepicker__info--error,
.datepicker__info--help {
  display: block;
}

.datepicker__close-button {
  display: none;
}

.datepicker__month-button {
  cursor: pointer;
  display: block;
}

.datepicker__tooltip {
  background-color: var(--global--color-primary);
  color: #fff;
  font-size: .7rem;
  margin-top: -5px;
  padding: 5px 10px;
  position: absolute;
}

.datepicker__tooltip:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--global--color-primary);
  bottom: -4px;
  content: '';
  left: 50%;
  margin-left: -4px;
  position: absolute;
}

.datepicker__month-caption {
  height: var(--global--spacing-vertical);
  vertical-align: middle;
}

.datepicker__month-caption th {
  border: none;
  opacity: .5;
}

.datepicker__week-days {
  height: var(--global--spacing-vertical);
  vertical-align: middle;
}

.datepicker__week-name {
  border: none;
  border-bottom: 3px solid var(--global--color-border);
}

.datepicker__month-day {
  transition-duration: 0.2s;
  transition-property: color, background-color, border-color, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  font-weight: bold;
  padding: 7px;
}

.datepicker__month-day--invalid {
  color: rgba(40, 48, 61, 0.3);
}

.datepicker__month-day--disabled {
  color: rgba(40, 48, 61, 0.3);
  position: relative;
}

.datepicker__month-day--disabled:after {
  color: #ff0033;
  content: '\00d7';
  font-size: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.datepicker__month-day--selected {
  background-color: rgba(40, 48, 61, 0.5);
  color: #fff;
}

.datepicker__month-day--hovering {
  background-color: rgba(40, 48, 61, 0.3);
  color: #fff;
}

.datepicker__month-day--today {
  background-color: var(--global--color-background);
}

.datepicker__month-day--first-day-selected,
.datepicker__month-day--last-day-selected {
  background-color: var(--global--color-dark-gray);
  color: #fff;
}

.datepicker__month-day--last-day-selected:after {
  content: none;
}

.datepicker__topbar {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  position: relative;
}

.datepicker__info-text--selected-days {
  font-style: normal;
}

.datepicker__info--error {
  color: #ff0033;
  font-style: italic;
}

/*--------------------------------------------------------------
>>> SINGLE ROOM
----------------------------------------------------------------
*/
.room__gallery-link--single {
  font-size: var(--global--font-size-lg);
}

.room__gallery--single {
  text-align: left;
}

.room__price--single {
  font-size: var(--global--font-size-lg);
  margin: var(--global--spacing-vertical) 0;
}

.room__price--single .amount {
  font-size: var(--global--font-size-xl);
}

.room-available-rates {
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.room-available-rates__link {
  display: inline-block;
  font-size: var(--global--font-size-lg);
  margin-bottom: var(--global--spacing-vertical);
}

.room-deposit-wrapper {
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.room__deposit--single {
  margin-bottom: var(--global--spacing-vertical);
}

.room__non-cancellable-info--single {
  margin-bottom: var(--global--spacing-vertical);
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.room__min-max-stay--single {
  margin-bottom: var(--global--spacing-vertical);
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.room__details--single {
  margin-right: auto;
  max-width: var(--responsive--alignwide-width) !important;
}

.room__details--single h3 {
  margin-bottom: var(--global--spacing-vertical);
  margin-top: var(--global--spacing-vertical);
}

.room__details--single ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.room__details--single .datepicker-form {
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.room__meta--single {
  border-top: 3px solid var(--global--color-secondary);
  margin-bottom: var(--global--spacing-vertical);
}

.room__facilities--single {
  margin-bottom: var(--global--spacing-vertical);
}

.room__description--single {
  border-top: 3px solid var(--global--color-secondary);
  margin-bottom: var(--global--spacing-vertical);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--responsive--alignwide-width) !important;
}

.room__description--single > * {
  margin-bottom: var(--global--spacing-vertical);
  margin-top: var(--global--spacing-vertical);
}

.related-rooms {
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(2 * var(--global--spacing-vertical)) !important;
  max-width: var(--responsive--alignwide-width) !important;
}

.related-rooms-title {
  margin-bottom: var(--global--spacing-vertical);
  margin-top: var(--global--spacing-vertical);
}

.room__rates--single {
  margin: calc(2 * var(--global--spacing-vertical)) auto 0 !important;
  max-width: var(--responsive--alignwide-width) !important;
}

.room__rates-list {
  list-style: none;
  margin-left: 0;
  border: 3px solid var(--global--color-secondary);
  margin-top: var(--global--spacing-vertical);
  padding: 0;
}

.room__rate--single {
  border-bottom: 3px solid var(--global--color-secondary);
  padding: var(--global--spacing-vertical);
}

.room__rate--single:last-child {
  border-bottom: none;
}

.rate__description--single {
  font-size: var(--global--font-size-sm);
}

.button--check-availability {
  display: inline-block;
}

.rate__price-wrapper--single {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.rate__conditions-title--single {
  font-weight: bold;
}

.rate__deposit--single {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

/*--------------------------------------------------------------
>>> LISTING
----------------------------------------------------------------
*/
.hotelier-listing .hotelier {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--responsive--alignwide-width) !important;
}

.hotelier-listing .hotelier .datepicker-form {
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.selected-nights {
  font-weight: bold;
  margin: var(--global--spacing-vertical) 0;
}

.form--listing {
  margin: var(--global--spacing-vertical) 0 0;
}

.form--listing .button {
  display: inline-block;
}

.listing__list {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
}

.listing__room {
  border: 3px solid var(--global--color-secondary);
  margin-bottom: var(--global--spacing-vertical);
  padding: var(--global--spacing-vertical);
  transition-duration: 0.2s;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.listing__room.room--selected, .listing__room.listing__room--queried {
  outline-offset: 2px;
  outline: 2px dotted var(--form--border-color);
}

.listing__room.listing__room--queried {
  margin-bottom: calc(2 * var(--global--spacing-vertical));
}

.room__content-wrapper {
  margin-bottom: var(--global--spacing-vertical);
}

.room__rates--listing {
  margin-top: var(--global--spacing-vertical);
}

.room__rate--listing {
  border-top: 1px solid var(--global--color-border);
  padding: var(--global--spacing-vertical) 0;
}

.room__rate--listing:last-child {
  padding-bottom: 0;
}

.room__actions,
.rate__actions {
  border-top: 1px solid var(--global--color-border);
  margin-top: var(--global--spacing-vertical);
  padding-top: var(--global--spacing-vertical);
}

.listing__room--rates-expanded.listing__room--variable .room__content--listing {
  padding-right: 0;
  width: 100%;
}

.room__gallery-thumbnail--listing {
  display: inline-block;
}

.room__gallery-thumbnail--listing img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 75px;
}

.room__gallery--listing {
  margin-top: var(--global--spacing-vertical);
}

.room__gallery-link--listing {
  display: inline-block;
  font-size: var(--global--font-size-xs);
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__name--listing {
  margin-bottom: var(--global--spacing-vertical);
}

.room__price-description,
.rate__price-description {
  display: block;
  font-size: var(--global--font-size-xs);
  font-style: italic;
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.room__description,
.rate__description {
  margin: calc(0.5 * var(--global--spacing-vertical)) 0;
}

.room__more-link,
.button--extras-toggle {
  font-size: var(--global--font-size-xs);
}

.room__max-guests {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__deposit--listing,
.rate__deposit--listing {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__details--listing {
  font-size: var(--global--font-size-xs);
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__rate--listing {
  border-top: 1px solid var(--global--color-border);
  padding: var(--global--spacing-vertical) 0;
}

.rate__name--listing {
  font-size: var(--global--font-size-xs);
  font-weight: bold;
}

.add-to-cart-selected {
  display: block;
  font-size: var(--global--font-size-xs);
}

.room-quantity {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.room__non-cancellable-info--listing {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.room__only-x-left {
  background-color: transparent;
  color: #ff0033;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

#reserve-rooms-button input[type="submit"] {
  display: block;
  width: 100%;
}

/*--------------------------------------------------------------
>>> BOOKING
----------------------------------------------------------------
*/
.booking__section,
.reservation-received__section {
  content: "";
  display: table;
  table-layout: fixed;
  margin-bottom: calc(2 * var(--global--spacing-vertical));
  width: 100%;
}

.booking__section:last-child,
.reservation-received__section:last-child {
  margin-top: 0;
}

.section-header__title {
  margin-bottom: var(--global--spacing-vertical);
}

#postcode_field,
#special_requests_field {
  margin-bottom: 0;
}

#arrival_time_field label {
  display: inline;
}

#arrival_time_field .form-row__description {
  font-size: var(--global--font-size-xs);
  display: block;
  font-style: italic;
}

#special_requests_field .form-row__description {
  font-size: var(--global--font-size-xs);
  display: block;
  font-style: italic;
}

#arrival_time {
  margin-left: var(--global--spacing-horizontal);
}

.table--guest-details td,
.reservation-table--reservation-details td {
  font-style: italic;
}

.credit-cards__list {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
}

.credit-cards__icon {
  display: inline-block;
  height: 48px;
  margin: 2px 0;
  position: relative;
  text-indent: -99999px;
  width: 76px;
}

.credit-cards__icon:before {
  background-color: #fff;
  background-position: 0 0;
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 48px;
  left: 0;
  position: absolute;
  top: 0;
  width: 76px;
}

.credit-cards__icon--mastercard:before {
  background-image: url(../../images/cards/mastercard.svg);
}

.credit-cards__icon--amex:before {
  background-image: url(../../images/cards/amex.svg);
}

.credit-cards__icon--cirrus:before {
  background-image: url(../../images/cards/cirrus.svg);
}

.credit-cards__icon--discover:before {
  background-image: url(../../images/cards/discover.svg);
}

.credit-cards__icon--maestro:before {
  background-image: url(../../images/cards/maestro.svg);
}

.credit-cards__icon--visa:before {
  background-image: url(../../images/cards/visa.svg);
}

.credit-cards__icon--visa_e:before {
  background-image: url(../../images/cards/visa_e.svg);
}

.reservation-table__room-remove {
  display: inline-block;
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.view-price-breakdown {
  font-size: var(--global--font-size-xs);
  display: block;
}

.reservation-table__row--price-breakdown + .reservation-table__row--body > td {
  border-top: 0;
}

.table--price-breakdown.open {
  border-bottom: 3px solid var(--global--color-border);
}

.price-breakdown-wrapper {
  border-bottom: 0;
  border-top: 0;
  padding: 0;
}

.table--price-breakdown {
  font-size: var(--global--font-size-xs);
  border-left: none;
  border-top: none;
  margin: 0;
  padding: 1em;
}

.table--price-breakdown th,
.table--price-breakdown td {
  border: 0;
}

.table--price-breakdown tr:nth-child(even) td {
  background-color: #fff;
}

.table--price-breakdown .amount {
  font-weight: bold;
}

.price-breakdown__day--heading,
.price-breakdown__cost--heading {
  font-size: var(--global--font-size-xs);
  background-color: #000;
  color: #fff;
}

.price-breakdown__day {
  text-align: left;
}

.price-breakdown__day--body {
  font-style: italic;
}

.price-breakdown__cost {
  text-align: right;
}

.reservation-non-cancellable-disclaimer {
  margin-top: var(--global--spacing-vertical);
}

.payment-methods {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
}

.payment-method {
  background-color: #fff;
  padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  overflow: hidden;
  margin-bottom: var(--global--spacing-vertical);
  position: relative;
}

.payment-method:last-child {
  margin-bottom: 0;
}

.payment-method img {
  position: absolute;
  top: var(--global--spacing-vertical);
  right: var(--global--spacing-horizontal);
  transform: translateY(-50%);
}

.payment-method__label {
  cursor: pointer;
  font-weight: bold;
}

.payment-method--single .payment-method__label {
  margin-left: 0;
  padding-left: 0;
}

.payment-method--single input[type="radio"] {
  display: none;
}

.payment-method__description {
  font-size: var(--global--font-size-sm);
}

.button.button--book-button {
  display: block;
  width: 100%;
  margin-top: var(--global--spacing-vertical);
}

.form--pay-reservation .booking__section--payment,
.form--pay-reservation .button--book-button {
  margin-top: var(--global--spacing-vertical);
}

.form-row--booking-terms {
  margin-bottom: var(--global--spacing-vertical);
}

.form-row--booking-terms .label--booking-terms {
  display: inline;
}

.booking__section--request-booking .form-row:first-child {
  margin-top: 0;
}

.reservation-table__coupon-form {
  text-align: left !important;
}

.coupon-form__input {
  margin: 0 0 calc(0.5 * var(--global--spacing-vertical)) 0 !important;
  width: 100%;
}

.coupon-form__apply {
  display: block;
  width: 100%;
}

.coupon-form .hotelier-notice {
  margin: calc(0.5 * var(--global--spacing-vertical)) 0 0 0;
}

.coupon-card {
  background-color: #fff;
  border: 3px solid var(--global--color-secondary);
  margin-top: calc(0.5 * var(--global--spacing-vertical));
  padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
}

.coupon-card__title {
  display: block;
  font-weight: bold;
}

.coupon-card__description {
  font-size: var(--global--font-size-xs);
}

.coupon-form__remove {
  display: inline-block;
  font-size: var(--global--font-size-xs) !important;
  margin-top: calc(0.5 * var(--global--spacing-vertical));
  padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)) !important;
}

.reservation-response {
  font-size: var(--global--font-size-lg);
  margin-bottom: calc(2 * var(--global--spacing-vertical));
}

.reservation-details__list {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
}

.reservation-details__item {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.reservation-details__item:last-child {
  margin-bottom: 0;
}

.reservation-details__item strong {
  display: block;
}

.reservation-details__item--special-requests {
  display: block !important;
  margin-top: var(--global--spacing-vertical);
}

.reservation-details__item--special-requests strong {
  display: block;
}

.bank-details__list {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
>>> WIDGETS
----------------------------------------------------------------
*/
/* Search */
.widget-room-search form {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  max-width: var(--responsive--aligndefault-width);
}

.widget-room-search .room-search__input {
  -webkit-appearance: none;
  flex-grow: 1;
  margin-right: calc(-1 * var(--button--border-width));
  max-width: inherit;
}

.widget-room-search .button--room-search {
  margin-left: 0;
}

/* Rooms */
.widget-rooms__list {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

.widget-rooms__item {
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  min-height: 80px;
}

.widget-rooms__link {
  display: block;
}

.widget-rooms__name {
  display: block;
}

.widget-rooms__name,
.widget-rooms__price {
  margin-left: 100px;
}

.widget-rooms__item img {
  height: auto !important;
  position: absolute;
  width: 80px !important;
}

/* Booking widget */
.widget-booking .widget-booking__change-cart-link {
  display: inline-block;
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.widget-booking .widget-booking__dates {
  background-color: var(--global--color-primary);
  color: var(--global--color-background);
  display: flex;
  padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
}

.widget-booking .widget-booking__date-block {
  text-align: center;
  width: 50%;
}

.widget-booking .widget-booking__date-block--checkout {
  border-left: 3px solid var(--global--color-background);
}

.widget-booking .widget-booking__date-label {
  font-size: var(--global--font-size-xs);
}

.widget-booking .widget-booking__month-year,
.widget-booking .widget-booking__day-name {
  display: block;
  font-size: var(--global--font-size-md);
}

.widget-booking .widget-booking__day {
  font-size: var(--global--font-size-xl);
}

.widget-booking .widget-booking__room-item {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.widget-booking .widget-booking__room-rate {
  display: block;
}

.widget-booking .widget-booking__cart-total {
  border-top: 3px solid var(--global--color-border);
  display: flex;
  justify-content: space-between;
  margin-top: var(--global--spacing-vertical);
  padding-top: var(--global--spacing-vertical);
}

.widget-booking .widget-booking__cart-total .amount {
  font-weight: bold;
}

/* Rooms filter */
.widget-rooms-filter__group {
  margin-bottom: var(--global--spacing-vertical);
}

.widget-rooms-filter__group-label {
  display: block;
  font-size: var(--global--font-size-xs);
  font-weight: bold;
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.widget-rooms-filter__group-item--chosen a {
  background-color: var(--global--color-primary);
  color: var(--global--color-background) !important;
  padding: 5px 10px;
}

/* AJAX Room Booking widget */
.widget-ajax-room-booking {
  position: relative;
}

.widget-ajax-room-booking .datepicker-input-select {
  height: auto;
  border: var(--form--border-width) solid var(--form--border-color) !important;
}

.widget-ajax-room-booking .datepicker {
  border-top: var(--form--border-width) solid var(--form--border-color);
  width: var(--responsive--aligndefault-width);
  overflow-wrap: normal;
}

.widget-ajax-room-booking select {
  width: 100%;
}

.widget-ajax-room-booking .widget-ajax-room-booking__row--submit {
  margin-bottom: 0;
}

.widget-ajax-room-booking .widget-ajax-room-booking__data--price {
  font-size: var(--global--font-size-md);
}

.widget-ajax-room-booking .widget-ajax-room-booking__data--price .amount {
  font-weight: bold;
}

.widget-ajax-room-booking .reset--widget-ajax-room-booking {
  font-size: var(--global--font-size-xs);
  display: block;
  margin-top: var(--global--spacing-vertical);
  cursor: pointer;
  text-decoration: underline;
}

.widget-ajax-room-booking .button--widget-ajax-room-booking {
  width: 100%;
}

.widget-ajax-room-booking .hotelier-notice {
  margin-top: var(--global--spacing-vertical);
}

.room__fees {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room__rate .room__fees {
  margin-bottom: 0;
}

.room-fee + .room-fee {
  margin-top: calc(0.5 * var(--global--spacing-vertical));
}

.room-fee__title {
  display: block;
  margin-bottom: calc(0.25 * var(--global--spacing-vertical));
}

.room-fee__label {
  display: block;
  margin-bottom: 0;
}

.room-fee__label input {
  margin-right: 10px;
  top: 5px;
}

.room-fee__label .amount {
  font-weight: bold;
}

.reservation-table__extra-guests-fee {
  font-size: var(--global--font-size-xs);
  display: block;
}

.extra__description {
  display: block;
  font-size: var(--global--font-size-xs);
}

.room-extras__title {
  margin: var(--global--spacing-vertical) 0;
}

.room-extra {
  margin-bottom: var(--global--spacing-vertical);
}

.room-extra:last-child {
  margin-bottom: 0;
}

.room-extra__title {
  border-top: 1px solid var(--global--color-border);
  font-weight: bold;
  margin-bottom: calc(.5 * var(--global--spacing-vertical));
  margin-top: var(--global--spacing-vertical);
  padding-top: var(--global--spacing-vertical);
}

.room-extra__description {
  font-size: var(--global--font-size-xs);
  margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}

.room-extra__info {
  display: block;
  font-size: var(--global--font-size-xs);
  font-style: italic;
  margin-bottom: calc(0.25 * var(--global--spacing-vertical));
}

.rate__extras.room-extras {
  width: 100%;
}

.room-extra__price {
  font-size: var(--global--font-size-sm);
  font-weight: bold;
}

.room-extra__input {
  display: inline;
}

.room-extra__input input[type="checkbox"] {
  margin-left: 5px;
  position: relative;
  top: 5px;
}

.button--extras-toggle {
  color: var(--wp--style--color--link, var(--global--color-primary));
  cursor: pointer;
  text-decoration-skip-ink: all;
  text-decoration-thickness: 1px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button--extras-toggle:hover {
  text-decoration-skip-ink: none;
  text-decoration-style: dotted;
}

.rate__extras .button--extras-toggle {
  margin-top: var(--global--spacing-vertical);
}

@media only screen and (min-width: 482px) {
  .room-loop--columns-2 .room-loop__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-loop--columns-3 .room-loop__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-loop--columns-4 .room-loop__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-loop--columns-5 .room-loop__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-loop--columns-6 .room-loop__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 592px) {
  .room-loop--columns-3 .room-loop__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .room-loop--columns-4 .room-loop__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .room-loop--columns-5 .room-loop__list {
    grid-template-columns: repeat(5, 1fr);
  }
  .room-loop--columns-6 .room-loop__list {
    grid-template-columns: repeat(5, 1fr);
  }
  .form-row--first {
    clear: both;
    float: left;
    margin-right: 4%;
    margin-top: 0;
    width: 48%;
  }
  .form-row--last {
    float: right;
    margin-top: 0;
    width: 48%;
  }
  .datepicker-form {
    display: flex;
  }
  .datepicker-input-select {
    border-right: 0 !important;
    flex-grow: 1;
    height: 100%;
  }
  .button--datepicker {
    width: auto;
  }
  .datepicker__months {
    display: flex;
  }
  .datepicker__month--month1 {
    margin-right: calc(0.5 * var(--global--spacing-vertical));
  }
  .datepicker__month--month2 {
    display: table;
    margin-left: calc(0.5 * var(--global--spacing-vertical));
  }
  .datepicker__month-button--disabled {
    visibility: hidden;
  }
  .room__content-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-left: 180px;
    position: relative;
  }
  .rate__description-wrapper {
    padding-right: 4%;
    width: 60%;
  }
  .room__rate {
    display: flex;
    flex-wrap: wrap;
  }
  .room__content--listing,
  .rate__content--listing {
    padding-right: 4%;
    width: 60%;
  }
  .room__actions,
  .rate__actions {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    text-align: right;
    width: 40%;
  }
  .room__gallery--listing {
    left: 0;
    margin-top: 0;
    position: absolute;
    text-align: center;
    top: 0;
  }
  #state_field {
    margin-bottom: 0;
  }
  .reservation-details__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .room-loop__list {
    column-gap: calc(2 * var(--global--spacing-vertical));
    margin-bottom: calc(2 * var(--global--spacing-vertical));
    row-gap: calc(2 * var(--global--spacing-vertical));
  }
}
/*--------------------------------------------------------------
>>> Twenty Twenty-One
----------------------------------------------------------------
*/

/* Variables */
:root {
  /* Spacing */
  --global--spacing-unit: 20px;
  --global--spacing-measure: unset;
  --global--spacing-horizontal: 25px;
  --global--spacing-vertical: 30px;
}

/**
 * Root Media Query Variables
 */
:root {
	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
	--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
	--responsive--alignfull-width: 100%;
	--responsive--alignright-margin: var(--global--spacing-horizontal);
	--responsive--alignleft-margin: var(--global--spacing-horizontal);
}

@media only screen and (min-width: 482px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
		--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
		--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
		--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
	}
}
@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
		--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
	}
}

/*--------------------------------------------------------------
>>> CUSTOM
----------------------------------------------------------------
*/

/* Listing page */
.hotelier {
  max-width: initial !important;
  margin: initial !important;
}

.hotelier #hotelier-datepicker {
  margin-bottom: initial;
  padding-bottom: initial;
}

.hotelier #hotelier-datepicker #hotelier-datepicker-select {
  box-sizing: border-box;
  font-size: 1.5rem;
}

.hotelier #hotelier-datepicker #datepicker-button {
  padding: 1.5rem 3rem;
  margin: initial;
  border: initial;
  background-color: var(--wp--preset--color--accent-3);
  font-size: 1rem;
  font-weight: bold;
  color: var(--wp--preset--color--white);
  cursor: pointer;
}

.hotelier .selected-nights {
  margin: initial;
}

.hotelier #form--listing {
  margin-top: 5rem;
}

.hotelier #form--listing .listing__room {
  padding: 1rem;
}

.hotelier #form--listing .room__content {
  width: 100%;
  min-height: 185px;
}

.hotelier #form--listing .attachment-room_thumbnail {
  width: 150px;
  height: 100%;
  max-width: initial;
}

.hotelier #form--listing .room__gallery p,
.hotelier #form--listing .room__gallery .room__gallery-link {
  margin: initial;
}

.hotelier #form--listing .room__only-x-left {
  margin-bottom: initial;
  padding: 0.5rem 3rem;
  font-size: 1rem;
  background-color: var(--wp--preset--color--accent-4);
}

.hotelier #form--listing .room__name {
  margin-top: 0.5rem;
  font-size: 2rem
}

.hotelier #form--listing .room__more,
.hotelier #form--listing .room__price-description,
.hotelier #form--listing .room__max-guests,
.hotelier #form--listing .room__min-max-stay {
  display: none;
}

.hotelier #form--listing .room__actions {
  width: initial;
  min-width: 20%;
  padding: initial;
  border: initial;
  text-align: initial;
}

.hotelier #form--listing .room__price,
.hotelier #form--listing .amount {
  font-size: 1.5rem;
  color: var(--wp--preset--color--accent-4);
}

.hotelier #form--listing .button--add-to-cart {
  padding: 1rem 3rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--white);
}

@media only screen and (min-width: 592px) {
  .hotelier #form--listing .room__content {
    width: 75%;
  }
}

/* Room page */
.hotelier #page {
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto;
}

.hotelier .room {
  padding: 0 1rem;
}

.hotelier .room .room__thumbnail--single {
  text-align: center;
}

.hotelier .room .attachment-room_single {
  width: 100%;
  height: initial;
}

.hotelier .room .room__meta-title,
.hotelier .room .related-rooms-title {
  font-size: 2rem;
  font-weight: bold;
}

.hotelier .room .room__min-max-stay,
.hotelier .room .room__meta-item--guests {
  display: none;
}

/* Booking form page */
.hotelier .hotelier-notice--error {
  background-color: var(--wp--preset--color--vivid-red);
}

.hotelier #booking-form .section-header__title {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: bold;
}

.hotelier #booking-form .form-row--wide {
  clear: both;
}

.hotelier #booking-form p.form-row {
  margin-bottom: 1.5rem;
}

.hotelier #booking-form p.form-row span {
  white-space: nowrap;
}

.hotelier #booking-form label.htl-ui-label--multicheckbox {
  display: initial;
}

.hotelier #booking-form input {
  border: 1px solid black;
  accent-color: var(--wp--preset--color--accent-3);
}

.hotelier #booking-form .input-text,
.hotelier #booking-form select {
  height: 2.5rem;
}

.hotelier #booking-form select {
  width: 100%;
  border: 1px solid black;
  background-color: transparent;
}

.hotelier #booking-form .htl-ui-input--checkbox {
  height: 2rem;
  width: 2rem;
  vertical-align: middle;
}

.hotelier #booking-form .htl-ui-label--multicheckbox {
  margin-right: 0.5rem;
  vertical-align: middle;
}

.hotelier #booking-form table {
  width: 100%;
}

.hotelier #booking-form table,
.hotelier #booking-form td,
.hotelier #booking-form th {
  border: 1px solid black;
  border-collapse: collapse;
}

.hotelier #booking-form .reservation-table--reservation-details th {
  text-align: left;
}

.hotelier #booking-form #reservation-table thead th {
  text-align: center;
}

.hotelier #booking-form #reservation-table .reservation-table__room-remove {
  margin-top: initial;
  font-size: 1rem;
}

.hotelier #booking-form #reservation-table .reservation-table__row--price-breakdown {
  display: none;
}

.hotelier #booking-form #reservation-table .ebed td:nth-child(1) {
  font-weight: bold;
}

.hotelier #booking-form #reservation-table .ebed td:nth-child(2) {
  text-align: center;
}

.hotelier #booking-form #reservation-table .ebed td:nth-child(3) {
  text-align: right;
}

.hotelier #booking-form #book-button {
  padding: 1rem 3rem;
  border: initial;
  background-color: var(--wp--preset--color--accent-3);
  font-size: 1rem;
  font-weight: bold;
  color: var(--wp--preset--color--white);
  cursor: pointer;
}

/* Reservation received page */
.hotelier .reservation-received .reservation-details__item--special-requests,
.hotelier .reservation-received .reservation-received__section--reservation-details,
.hotelier .reservation-received .reservation-received__section--guest-details,
.hotelier .reservation-received .reservation-received__section--guest-address {
  display: none !important;
}