@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: bold;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato/Lato-Black.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Markazi Text';
  src: url('/fonts/Markazi_Text/MarkaziText-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('/fonts/Markazi_Text/MarkaziText-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('/fonts/Markazi_Text/MarkaziText-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('/fonts/Markazi_Text/MarkaziText-Bold.ttf') format('truetype');
  font-weight: 700;
}

:root {
  --header-height: 8rem;
  --text-color-list: 0, 0, 0;
  --text-color: rgb(var(--text-color-list));
  --inverse-text-color: rgb(255, 255, 255);
  --summary-text-color: rgba(0, 0, 0, 0.7);
  --action-color: #D7755C;
  --background-color-list: 255, 251, 246;
  --background-color: rgb(var(--background-color-list));
  --shaded-background-color: rgb(244, 240, 235);
  --precip-color-list: 0, 149, 182;
  --precip-color: rgb(var(--precip-color-list));
  --frozen-precip-color-list: 126, 86, 255;
  --frozen-precip-color: rgb(var(--frozen-precip-color-list));
  --precip-drop-invert: none;
  --map-title-background-color: rgb(255, 255, 255, 0.4);
  --block-margin-top: 2rem;
  --block-border-radius: 25px;
  --header-font-size: 6rem;
  font-size: 10px;
}

alerts-elem,
chart-elem,
daypart-elem,
forecast-day-elem,
forecast-elem,
icon-elem,
indicatorbar-elem,
location-search-elem,
lut-elem,
map-elem,
nexthour-elem,
timeline-elem,
weekday-elem {
  contain: layout style;
}

location-search-elem {
  position: relative;
  z-index: 9999;
}

body.no_chrome header-elem,
body.no_chrome footer-elem {
  display: none;
}

@media screen and (max-width: 480px) {
  :root {
    --block-margin-top: 0rem;
  }
  body.isNative {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
}

* {
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  color: var(--action-color);
}

.button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  border-radius: 5rem;
  background-color: var(--action-color);
  border: 0;
  color: #FFF;
  font-family: "Lato", sans-serif;
  font-size: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.button svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}

.select-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 5rem;
  background-color: var(--action-color);
  border: 0;
  color: #FFF;
  font-family: "Lato", sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.select-wrapper select {
  padding: 0.75rem 0.25rem 0.75rem 1.25rem;
  background-color: transparent;
  border: 0;
  color: #FFF;
  font-family: "Lato", sans-serif;
  font-size: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
}
.select-wrapper svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.75rem;
}

.map_link {
  z-index: 9;
  display: inline-block;
  position: relative;
  top: 0.45rem;
  width: 2.5rem;
  height: 2.5rem;
}
.map_link .fullscreen-button {
  display: inline-block;
  margin: 0.25rem;
  width: 2rem;
  height: 2rem;
}
.map-container {
  position: relative;
}
.map-container .map_link {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.65);
}

map-elem {
  border-radius: var(--block-border-radius);
}

.checkbox-wrapper .cbx {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.checkbox-wrapper .cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid var(--action-color);
  transition: all 0.2s ease;
}
.checkbox-wrapper .cbx span:first-child svg {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 6px;
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--action-color);
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
  transition-delay: 0.2s;
}
.checkbox-wrapper .cbx span:last-child {
  margin-left: 8px;
}

.checkbox-wrapper .cbx:hover span:first-child {
  border-color: var(--action-color);
}

.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child {
  border-color: var(--action-color);
  background: var(--action-color);
  animation: check 0.6s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(2.2);
  opacity: 0;
  transition: all 0.6s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child {
  transition: all 0.3s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child:after {
  transform: scaleX(1);
  transition: all 0.3s ease;
}

#modal-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  animation-fill-mode: forwards;
}
#modal-message-overlay.show {
  animation: overlayFadeIn 0.3s ease-out forwards;
}
#modal-message-overlay.hide {
  animation: overlayFadeOut 0.3s ease-in forwards;
}
#modal-message-overlay .modal-message-box {
  background: var(--background-color);
  padding: 3rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(0.8);
  opacity: 0;
  animation-fill-mode: forwards;
  color: rgba(var(--text-color-list), 0.75);
  font-size: 1.75rem;
  line-height: 1.5em;
  text-align: center;
  max-width: 50vw;
}
#modal-message-overlay.show .modal-message-box {
  animation: fadeInScale 0.3s ease-out forwards;
}
#modal-message-overlay.hide .modal-message-box {
  animation: fadeOutScale 0.3s ease-in forwards;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}
@keyframes fadeOutScale {
  from { opacity: 1; transform: scale(1);   }
  to   { opacity: 0; transform: scale(0.8); }
}

@keyframes check {
  50% {
    transform: scale(1.2);
  }
}

/* Dark mode on mobile */
@media screen and (max-width: 480px) and (prefers-color-scheme: dark) {
  :root {
    --text-color-list: 255, 255, 255;
    --text-color: rgb(var(--text-color-list));
    --inverse-text-color: rgb(0, 0, 0);
    --summary-text-color: rgba(255, 255, 255, 0.7);
    --background-color-list: 25, 25, 30;
    --background-color: rgb(var(--background-color-list));
    --precip-drop-invert: invert(1);
    --map-title-background-color: rgb(0, 0, 0, 0.4);
  }

  .map-container .map_link {
    background-color: rgba(0, 0, 0, 0.65);
  }
}