:root {
  --text-primary: #363a45;
  --primary-color: #3d5afe;
  --divider-color: #dfdfe1;
  --font-family: "Suisse Int'l";
  --action-selected: rgba(0, 0, 0, 0.08);
  --success-main: #3bab53;
  --text-secondary: #4a4e58;
}

/* use !important to override the material-css setting */
.responsive-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Ensure carousels are visible on small screens */
@media (max-width: 767px) {
  .offer-img-container .responsive-img {
    height: auto !important;
  }
}

.loading-button.htmx-request {
  pointer-events: none;
  opacity: 0.3;
  cursor: not-allowed;
}

#search-modal-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.destination-id-placeholder {
  display: none;
}

.review-rating-container {
  padding: 0px 6px;
}

.property-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.property-details-location {
  color: var(--text-secondary, var(--text-secondary, #4a4e58));
  font-feature-settings:
    'liga' off,
    'clig' off;

  /* typography/body2 */
  font-family: "Suisse Int'l";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

nav {
  background-color: rgb(54, 58, 69);
}

@keyframes ball-cycle {
  0% {
    transform: translateX(-225%) translateY(-50%) scale(0);
  }

  25% {
    transform: translateX(-225%) translateY(-50%) scale(1);
  }

  50% {
    transform: translateX(0) translateY(-50%) scale(1);
  }

  75% {
    transform: translateX(225%) translateY(-50%) scale(1);
  }

  100% {
    transform: translateX(225%) translateY(-50%) scale(0);
  }
}

.search-container {
  background-color: #ebebeb;
}

.align-in-middle {
  max-width: 1100px;
  margin: auto;

  @media (max-width: 768px) {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.hide {
  display: none;
}

.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
  display: block;
  opacity: 1;
}

.htmx-request.htmx-indicator {
  display: block;
  opacity: 1;
}

.htmx-request.htmx-indicator ~ #site-search-dropdown {
  display: none;
}

#site-search-loading-indicator {
  height: 150px;
  margin: auto;
  width: 100%;
}