:root {
  --drawer-height: 250px;
  /* Tailwind-style Typography Scale */
  --text-xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.875rem);
  --text-base: clamp(0.9375rem, 0.2vw + 0.89rem, 1rem);
  --text-lg: clamp(1rem, 0.4vw + 0.91rem, 1.125rem);
  --text-xl: clamp(1.125rem, 0.43vw + 1.02rem, 1.25rem);
  --text-2xl: clamp(1.25rem, 0.85vw + 1.04rem, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.28vw + 1.18rem, 1.875rem);
  --text-4xl: clamp(1.75rem, 1.7vw + 1.32rem, 2.25rem);
  --text-5xl: clamp(2rem, 3.4vw + 1.15rem, 3rem);
  --text-6xl: clamp(2.5rem, 4.27vw + 1.43rem, 3.75rem);
  --text-7xl: clamp(3rem, 5.1vw + 1.72rem, 4.5rem);
  --text-8xl: clamp(3.5rem, 8.5vw + 1.37rem, 6rem);
  --text-9xl: clamp(4rem, 13.6vw + 0.6rem, 8rem);
}

/* Lock root font-size on Landing / Main page to standard 16px to eliminate stepped zoom jumps */
html:has(.hero-container) {
  font-size: 16px !important;
}

/* Ensure the header and navigation retain their normal intended sizing on the landing page */
html:has(.hero-container) .holder .bar-nav .internal-cima-icon,
html:has(.hero-container) .holder .bar-nav .internal-shipping-icon,
html:has(.hero-container) .holder .bar-nav .internal-thesharks-icon,
html:has(.hero-container) .holder .bar-nav .internal-bafar-icon,
html:has(.hero-container) .holder .bar-nav .internal-expressport-icon,
html:has(.hero-container) .holder .bar-nav .internal-logipuerto-icon {
  font-size: 2.25rem !important; /* 36px */
}

html:has(.hero-container) .holder .bar-nav .header-menu .mud-icon-button .mud-icon-root,
html:has(.hero-container) .holder .bar-nav .header-menu .mud-button-root .mud-icon-root,
html:has(.hero-container) .holder .bar-nav .header-menu .mud-icon-button .fal,
html:has(.hero-container) .holder .bar-nav .header-menu .mud-button-root .fal {
  font-size: 1.35rem !important; /* 21.6px */
}

html:has(.hero-container) .holder .bar-nav .nav-button .mud-button-label h6,
html:has(.hero-container) .holder .bar-nav .reg-button .mud-button-label h6 {
  font-size: 0.9375rem !important; /* 15px */
}

html:has(.hero-container) .holder .bar-nav .reg-button {
  margin-left: 0.9rem !important;
  padding: 8px 24px !important;
}

/* Mobile header and drawer sizing on landing page */
@media (max-width: 959px) {
  html:has(.hero-container) .holder .bar-nav .internal-cima-icon,
  html:has(.hero-container) .holder .bar-nav .internal-shipping-icon,
  html:has(.hero-container) .holder .bar-nav .internal-thesharks-icon,
  html:has(.hero-container) .holder .bar-nav .internal-bafar-icon,
  html:has(.hero-container) .holder .bar-nav .internal-expressport-icon,
  html:has(.hero-container) .holder .bar-nav .internal-logipuerto-icon {
    font-size: 1.5rem !important; /* 24px */
  }
  html:has(.hero-container) .holder .bar-nav .header-menu .header-icon-mobile .mud-icon-root,
  html:has(.hero-container) .holder .bar-nav .header-menu .header-icon-mobile .fal,
  html:has(.hero-container) .holder .bar-nav .hamburger-menu-icon .mud-icon-root,
  html:has(.hero-container) .mobile-drawer .header-menu .header-icon-mobile .mud-icon-root,
  html:has(.hero-container) .mobile-drawer .header-menu .header-icon-mobile .fal,
  html:has(.hero-container) .mobile-drawer .hamburger-menu-icon .mud-icon-root {
    font-size: 1.5rem !important; /* 24px */
  }
}
@media only screen and (min-width: 200px) {
  html {
    font-size: 6px;
  }
  .mud-snackbar-content-message {
    font-size: 2.5em;
  }
  .mud-snackbar-content-action svg {
    font-size: 2.1em !important;
  }
  .mud-snackbar-icon svg {
    font-size: 1em !important;
  }
}
@media only screen and (min-width: 400px) {
  html {
    font-size: 7px;
  }
  .mud-snackbar-content-message {
    font-size: 2.2em;
  }
  .mud-snackbar-icon svg {
    font-size: 1.05em;
  }
}
@media only screen and (min-width: 600px) {
  html {
    font-size: 8px;
  }
  .mud-snackbar-content-message {
    font-size: 1.7em;
  }
  .mud-snackbar-icon svg {
    font-size: 1.02em;
  }
}
@media only screen and (min-width: 600px) and (min-width: 559px) {
  .mud-snackbar-content-action svg {
    font-size: 1.6em;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 8px;
  }
  .mud-snackbar-content-message {
    font-size: 1.8em;
  }
  .mud-snackbar-icon svg {
    font-size: 1.02em;
  }
  .mud-snackbar-content-action svg {
    font-size: 1.4em;
  }
}
@media only screen and (min-width: 960px) {
  html {
    font-size: 10px;
  }
  .mud-snackbar-content-message {
    font-size: 1.3em;
  }
  .mud-snackbar-icon svg {
    font-size: 1.02em;
  }
}
@media only screen and (min-width: 1280px) {
  html {
    font-size: 12px;
  }
  .mud-snackbar-content-message {
    font-size: 1.3em;
  }
}
@media only screen and (min-width: 1920px) {
  html {
    font-size: 14px;
  }
  .mud-snackbar-content-message {
    font-size: 1.3em;
  }
}
@media only screen and (min-width: 2560px) {
  html {
    font-size: 16px;
  }
  .mud-snackbar-content-message {
    font-size: 1.3em;
  }
}
.icon-rem-s1 {
  font-size: 1rem !important;
}

.icon-rem-s2 {
  font-size: 2rem !important;
}

.icon-rem-s3 {
  font-size: 3rem !important;
}

.icon-rem-s3_7 {
  font-size: 3.7rem !important;
}

.icon-rem-s4 {
  font-size: 4rem !important;
}

.icon-rem-s5 {
  font-size: 5rem !important;
}

.icon-rem-s6 {
  font-size: 6rem !important;
}

.icon-rem-s7 {
  font-size: 7rem !important;
}

.icon-rem-s8 {
  font-size: 8rem !important;
}

.icon-rem-s9 {
  font-size: 9rem !important;
}

.icon-rem-s10 {
  font-size: 10rem !important;
}

.icon-rem-s11 {
  font-size: 11rem !important;
}

.icon-rem-s12 {
  font-size: 12rem !important;
}

.icon-rem-s13 {
  font-size: 13rem !important;
}

.icon-rem-s14 {
  font-size: 14rem !important;
}

.icon-rem-s15 {
  font-size: 15rem !important;
}

.icon-rem-s16 {
  font-size: 16rem !important;
}

.remove-height-em {
  height: auto !important;
}

/*I don't like this but whatever works I guess*/
.location-popover.resize-it .mud-typography {
  font-size: 1.8rem;
}

.booking-searchbar.resize-it .mud-input.mud-input-text.mud-select-input {
  font-size: 2rem;
}
.booking-searchbar.resize-it .mud-input-label {
  font-size: 2rem;
}
.booking-searchbar.resize-it .mud-icon-root {
  font-size: 3rem !important;
}

.text-input.resize-it {
  max-width: 100%;
}
.text-input.resize-it .mud-input {
  font-size: 2rem;
}
.text-input.resize-it .mud-input-label {
  font-size: 2rem !important;
}

.numerical-input.increase-it {
  max-width: 100%;
}
.numerical-input.increase-it .mud-input {
  font-size: 2rem;
}
.numerical-input.increase-it .mud-input-label {
  font-size: 2rem;
}
.numerical-input.increase-it .mud-input-numeric-spin {
  flex-direction: row;
}
.numerical-input.increase-it .mud-input-numeric-spin .mud-icon-root {
  font-size: 6rem;
}

.current-client-button {
  font-weight: bold;
  opacity: 1 !important;
}

.sf-loc-selected {
  background-color: #E3E3E3;
}

.booking-required-information {
  color: red;
}

.quotation-required-information {
  color: red;
}