@media only screen and (min-width: 200px) {
  html {
    font-size: 6px;
  }
}
@media only screen and (min-width: 400px) {
  html {
    font-size: 7px;
  }
}
@media only screen and (min-width: 600px) {
  html {
    font-size: 8px;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 8px;
  }
}
@media only screen and (min-width: 960px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (min-width: 1280px) {
  html {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1920px) {
  html {
    font-size: 14px;
  }
}
@media only screen and (min-width: 2560px) {
  html {
    font-size: 16px;
  }
}
.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-required-information {
  color: red;
}