:root {
  --main-font: "Inter", -apple-system, BlinkMacSystemFont, "Roboto",
    "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.notifications {
  position: absolute;
  top: 0.625rem;
  right: 4rem;
  padding: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  width: 17.5rem;
  max-height: calc(100% - 1.25rem);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
.notification + .notification {
  margin-top: 1.5rem;
}
.notification-title {
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 600;
}
.notification-date {
  font-size: 0.625rem;
  margin-top: 0.25rem;
  color: #888;
}
.notification-text {
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.notifications-close {
  float: right;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: #222;
  color: #fff;
}
.notifications-close:hover {
  background-color: #444;
}
.messagethreads {
  position: absolute;
  bottom: 0.25rem;
  right: 1rem;
  white-space: nowrap;
}
.messages-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 600;
  background-color: #222;
  color: #fff;
}
.messagethread {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: 20rem;
  white-space: normal;
  margin: 0 0.25rem;
  padding: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  max-height: calc(100vh - 0.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
.message {
  margin: 0.5rem 0;
  padding: 0.5rem;
  font-size: 0.875rem;
  background-color: #eee;
  border-radius: 0.25rem;
}
.message.you {
  background-color: hsl(205, 100%, 50%);
  color: #fff;
  margin-left: 2rem;
}
.message:not(.you) {
  margin-right: 2rem;
}
#announcement {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 0);
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  background-color: #fff;
  min-width: 640px;
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
}
#announcement a:not(:hover) {
    text-decoration: none;
  }
#announcement h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
#announcement .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #222;
    color: #fff;
    padding: 0.5rem 0.75rem;
  }
:is(#announcement .close):hover {
      background-color: #444;
    }
#announcement {
  font-size: 0.875rem;
  line-height: 1.375;
}
#announcement .input {
    margin: 0.5rem 0;
  }
#announcement .input .label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
    margin-bottom: 0.25rem;
  }
#announcement .input textarea,#announcement .input input:not([type="checkbox"]) {
    width: 100%;
    background-color: #f5f5f5;
    padding: 0.375rem;
    font: inherit;
  }
#announcement select {
    padding: 0.5rem;
  }
#announcement .fineprint {
    padding-top: 1rem;
  }
#announcement .button {
    padding: 0;
    margin: 0.5rem 0;
    margin-top: 1rem;
  }
:is(#announcement .button) button {
      background: none;
      font: inherit;
      border: 0;
      outline: 0;
      padding: 0.5rem 0.75rem;
      color: #eee;
    }
#announcement a.button {
    padding: 0.5rem 0.75rem;
    color: #eee;
  }
.dark #announcement {
  background-color: #222;
}
.dark #announcement .input input,
.dark #announcement .input textarea,
.dark #announcement select,
.dark #announcement .button button {
  background-color: #111;
  color: #fff;
}
@media (max-width: 640px) {
  #announcement {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    min-width: auto;
  }
}
*:not(select) {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  border: 0;
  outline: 0;
}
* {
  touch-action: inherit;
}
html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  box-sizing: border-box;
  font-family: var(--main-font);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #333;
  background-color: hsl(230, 12.5%, 22.5%);
  font-feature-settings: "ss04";
  touch-action: none;
}
body.dark {
    color: #ccc;
  }
b {
  font-weight: 600;
}
#wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  transition: 0.3s transform, 0.3s opacity;
}
#wrapper.hide {
    transform: scale(0.95);
    opacity: 0.25;
  }
.activeareaslist {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  width: 10rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: 0.625rem;
  padding: 0 0.5rem;
}
.activeareaslist p {
    margin: 0.5rem 0;
  }
.activeareaslist .area {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }
.print .maplibregl-control-container,.print #menubutton {
    display: none;
  }
.dronerulesinfo {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 1rem;
  line-height: 1.25;
  max-width: 25rem;
  box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.05);
}
.dronerulesinfo i.fa-times {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.dronerulesinfo i.fa-times:hover {
  background-color: #222;
  color: #fff;
}
.dronerulesinfo h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.dronerulesinfo p {
  font-size: 0.875rem;
}
.dark .dronerulesinfo {
  background-color: #111;
  color: #ddd;
}
.dark a {
  color: #fff;
}
#switch-map {
  position: fixed;
  bottom: 3rem;
  left: 0.75rem;
  width: 5rem;
  height: 5rem;
  white-space: nowrap;
  margin: -0.125rem;
}
.switch-map {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-position: 50% 50%;
  background-size: cover;
  border: 2px solid #fff;
  margin: 0.125rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.switch-map span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.75);
}
.switch-map:hover {
  transform: scale(1.05, 1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#switch-map.opened .switch-map.current {
  border-color: rgba(0, 0, 0, 0.75);
}
#switch-map:not(.opened) .switch-map:not(.current) {
  display: none;
}
.switch-map.map1 {
  background-image: url(/img/map1.jpg);
}
.switch-map.map2 {
  background-image: url(/img/map2.jpg);
}
.switch-map.map3 {
  background-image: url(/img/map3.jpg);
}
.switch-map.map4 {
  background-image: url(/img/map4.jpg);
}
#choose {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(64, 64, 64, 0.5);
  z-index: 1;
}
#choose p {
  margin: 0 auto;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1.375;
  max-width: 38rem;
}
.dark #choose {
  background-color: rgba(192, 192, 192, 0.5);
}
.choose-box {
  margin: 1rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  text-align: center;
}
.choose-link {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: hsl(250, 50%, 50%);
  border-radius: 0.125rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}
.choose-link.gray {
  background-color: hsl(250, 0%, 50%);
}
.dark .choose-link {
  color: #222;
}
.choose-link:hover {
  background-color: #222;
  color: #fff;
}
.dark .choose-link:hover {
  background-color: #fff;
  color: #222;
}
@media (prefers-color-scheme: dark) {
  #choose {
    background-color: rgba(192, 192, 192, 0.5);
  }

  .choose-box {
    background-color: #222;
  }

  .choose-link:hover {
    background-color: #fff;
    color: #222;
  }
}
@media (max-width: 400px) {
  .choose-link {
    font-size: 0.75rem;
  }
  .dronerulesinfo {
    max-width: 100%;
  }
}
.buttongroup {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.button {
  display: inline-block;
  vertical-align: top;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.375rem;
  background-color: #222;
  color: #aaa;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  text-decoration: none;
}
.button.bigbutton {
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
  }
.button:hover {
    background-color: #444;
  }
.button:active {
    color: #fff;
  }
.button.toggle.toggled {
      background-color: #fff;
      color: hsl(225, 80%, 30%);
    }
.button.toggle.toggled:hover {
        background-color: #eee;
      }
.button.toggle.toggled:active {
        color: #000;
      }
#top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#top #loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.25rem;
    height: 0.125rem;
    background-color: hsl(225, 90%, 70%);
  }
#map {
  position: absolute;
  top: 0rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsl(220, 20%, 80%);
  z-index: 0;
}
.maplibregl-map {
  font-family: var(--main-font);
  font-feature-settings: "ss04";
}
.maplibregl-ctrl-top-right {
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
}
.dark .maplibregl-ctrl-attrib.maplibregl-compact {
  background-color: #222;
  color: #ccc;
}
.maplibregl-ctrl-bottom-left {
  left: env(safe-area-inset-left);
  bottom: env(safe-area-inset-bottom);
}
.maplibregl-ctrl-bottom-right {
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
}
.maplibregl-ctrl-bottom-right {
  z-index: auto;
}
.print-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #000;
  pointer-events: none;
}
.dark .print-guide {
  border: 2px solid #fff;
}
.maplibregl-ctrl-group {
  box-shadow: none;
  border-radius: 0;
  background: none;
}
.maplibregl-ctrl-group:not(:empty) {
  box-shadow: none;
  border-radius: 0;
  background: none;
}
.maplibregl-ctrl-group:not(:empty) button {
    width: auto;
    height: auto;
    background-color: #222;
    background-size: 2rem 2rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
.maplibregl-ctrl-group:not(:empty) button:hover:not(:disabled):not(.maplibregl-ctrl-geolocate-active):not(.maplibregl-ctrl-geolocate-background):not(.maplibregl-ctrl-geolocate-waiting) {
    background-color: #444;
  }
.maplibregl-ctrl-group:not(:empty) button.maplibregl-ctrl-geolocate-active,.maplibregl-ctrl-group:not(:empty) button.maplibregl-ctrl-geolocate-background,.maplibregl-ctrl-group:not(:empty) button.maplibregl-ctrl-geolocate-waiting,.maplibregl-ctrl-group:not(:empty) button.maplibregl-ctrl-geolocate:disabled {
    background-color: #fff;
  }
.maplibregl-ctrl-group:not(:empty) button + button {
    border: 0;
    margin-top: 1px;
  }
.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-icon {
    position: relative;
    padding: 1.125rem 1.25rem;
  }
:is(.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-icon)::before {
      position: absolute;
      top: 0;
      left: 0;
      background-position: 50% 50%;
    }
.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-icon.maplibregl-ctrl-compass > .maplibregl-ctrl-compass-arrow {
    width: 2rem;
    height: 2rem;
    margin: 0;
    position: relative;
    left: -1rem;
    top: -1rem;
  }
.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-print .maplibregl-ctrl-weather,.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-airtraffic {
    background-image: none;
  }
:is(.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-print,.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-weather,.maplibregl-ctrl-group:not(:empty) .maplibregl-ctrl-airtraffic) i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #eee;
      font-size: 1rem;
    }
.maplibregl-ctrl-attrib-button {
  display: none;
}
#tools {
  position: absolute;
  top: 0rem;
  left: 0;
  bottom: 0;
  padding: 0.75rem;
  padding: calc(env(safe-area-inset-top) + 0.75rem)
    calc(env(safe-area-inset-right) + 0.75rem)
    calc(env(safe-area-inset-bottom) + 0.75rem)
    calc(env(safe-area-inset-left) + 0.75rem);
  background-color: rgba(17, 17, 17, 0.9);
  width: 17.5rem;
  width: calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 17.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
#tools a {
    color: inherit;
  }
#tools .clock {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: #000;
    color: #fff;
    font-weight: 600;
    border-radius: 0.125rem;
    font-variant-numeric: tabular-nums;
  }
#tools .updatedat {
    display: inline-block;
    padding: 0.5rem 0;
    color: #888;
    font-size: 0.625rem;
  }
#tools #logo {
    cursor: pointer;
    display: inline-block;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: calc(418 / 80 * 1.25rem);
    height: 1.25rem;
    /* width: calc(190 / 40 * 1.5rem);
    height: 1.5rem;*/
  }
:is(#tools #logo) h1 {
      display: none;
    }
#tools #logo.new {
    width: calc(190 / 40 * 1.5rem);
    height: 1.5rem;
  }
#tools:not(.visible) {
    display: none;
  }
#tools .header {
    font-size: 0.625rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #999;
    font-weight: 600;
  }
#tools .buttongroup {
    margin: -0.0625rem -0.03125rem;
    box-shadow: none;
  }
#tools .toggle {
    margin: 0.0625rem 0.03125rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
  }
:is(#tools .toggle):not(.toggled):not(:hover) {
      background: none;
      color: #999;
    }
#tools #toolsclose {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #111;
    color: #fff;
    padding: 0.75rem 1rem;
  }
:is(#tools #toolsclose):hover {
      background-color: #fff;
      color: #222;
    }
#tools #toolscontent {
    padding-bottom: 3rem;
  }
#tools p {
    color: #999;
    font-size: 0.625rem;
    margin-top: 1.5rem;
    line-height: 1.375;
  }
#tools .radaroffset {
    margin-top: 1rem;
    margin-left: 1.5rem;
    width: calc(100% - 3rem);
  }
#tools .radaroffsetvalue {
    text-align: center;
    margin: 0;
  }
#tools h3 {
    color: #ddd;
    margin: 1.5rem 0;
    font-size: 1rem;
    font-weight: 500;
  }
:is(#tools .activeareas) .area {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      cursor: pointer;
    }
:is(:is(#tools .activeareas) .area):hover {
        text-decoration: underline;
      }
#tools .tools-announcements-list {
    background-color: #eee;
    padding: 0.5rem;
    max-height: 15rem;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    font-size: 0.75rem;
    line-height: 1.5;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }
#menubutton {
  position: absolute;
  top: 0rem;
  left: 0;
  padding: 0.75rem;

  margin: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#menubutton a:not(:hover) {
    text-decoration: none;
  }
#menubutton .notice {
    position: relative;
    background-color: #fff;
    color: #333;
    padding: 0.75em;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.375;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
:is(#menubutton .notice) a {
      color: inherit;
    }
:is(#menubutton .notice) b {
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.75;
    }
#menubutton .notice .notice-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
#menubutton .notice .redtext {
    background-color: #ff3300;
    color: #fff;
    padding: 0.25rem;
  }
#menubutton .buttongroup {
    height: 2.625rem;
    overflow: hidden;
  }
#menubutton .bigbutton {
    color: #fff;
    padding: 0.75rem;
    height: 2.625rem;
    overflow: hidden;
  }
:is(#menubutton .bigbutton) i,:is(#menubutton .bigbutton) span {
      line-height: 1rem;
    }
:is(#menubutton .bigbutton) i {
      font-size: 0.875rem;
      transform: translate(0, 0.0625rem);
    }
:is(#menubutton .bigbutton) i + span {
      padding-left: 0.5rem;
    }
:is(#menubutton .bigbutton) span {
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 400;
      vertical-align: middle;
    }
.compact:is(#menubutton .bigbutton) {
      padding: 0.75rem 0.875rem;
    }
#menubutton .biginput {
    display: inline-block;
    position: relative;
    width: 6rem;
    height: 2.625rem;
    overflow: hidden;
  }
.focus:is(#menubutton .biginput) {
      width: 20rem;
    }
:is(#menubutton .biginput) input {
      font: inherit;
      font-size: 1rem;
      line-height: 1.125rem;
      border: 0;
      border-radius: 0;
      outline: 0;
      padding: 0.75rem;
      padding-left: 2rem;
      padding-right: 0.5rem;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: 100%;
      color: #333;
      background-color: #fff;
    }
:is(#menubutton .biginput) input:focus + i {
      color: #333;
    }
:is(#menubutton .biginput) i {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 0.875rem;
      line-height: 1.125rem;
      padding: 0.75rem;
      color: #888;
      transform: translate(0, 0.03125rem);
      pointer-events: none;
    }
#menubutton .searchresults,#menubutton .geosearchresults {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    max-width: 15rem;
    max-height: 6rem;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }
:is(#menubutton .searchresults,#menubutton .geosearchresults):not(.visible) {
      display: none;
    }
:is(#menubutton .searchresults,#menubutton .geosearchresults) .searchresult {
      font-size: 0.75rem;
      line-height: 0.875rem;
      padding: 0.5625rem 0.75rem;
    }
:is(:is(#menubutton .searchresults,#menubutton .geosearchresults) .searchresult) .icon {
        float: left;
        width: 1rem;
        height: 1rem;
        margin-top: -0.0625rem;
        margin-right: 0.25rem;
        background-size: 8rem 8rem;
        background-repeat: no-repeat;
      }
:is(:is(#menubutton .searchresults,#menubutton .geosearchresults) .searchresult) p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
:is(:is(#menubutton .searchresults,#menubutton .geosearchresults) .searchresult):hover {
        background-color: #222;
        color: #fff;
      }
:is(:is(#menubutton .searchresults,#menubutton .geosearchresults) .searchresult):hover .icon {
          background-color: #fff;
          border-radius: 0.125rem;
        }
.dark #menubutton .biginput input {
  background-color: #111;
  color: #ddd;
}
.dark #menubutton .notice {
  background-color: #444;
  color: #fff;
  box-shadow: none;
}
.dark #menubutton .notice .redtext {
  background-color: #ff3300;
  color: #fff;
}
.dark #menubutton .searchresults,
.dark #menubutton .geosearchresults {
  background-color: #111;
  color: #ddd;
}
:is(.dark #menubutton .searchresults,.dark #menubutton .geosearchresults) .searchresult:hover .icon {
    background-color: #222;
  }
@media (max-width: 640px) {
    #menubutton .bigbutton:not(.compact) {
      padding: 0.75rem 0.625rem;
    }
      .focus:is(#menubutton .biginput) {
        width: 10rem;
      }

      :is(#menubutton .biginput) i {
        padding: 0.75rem 0.5625rem;
      }
      :is(#menubutton .biginput) input {
        padding-left: 1.75rem;
      }
    #menubutton .notice {
      font-size: 0.75rem;
    }
}
@media (max-width: 300px) {
    #menubutton .bigbutton span {
      display: none;
      padding: 0.75rem 0.875rem;
    }
    #menubutton .notice {
      font-size: 0.5rem;
    }

      :is(#menubutton .notice) b {
        font-size: 0.625rem;
      }
}
:is(#tools .signin) .input + .input {
      margin-top: .5rem;
    }
:is(#tools .signin) .input + button {
      margin-top: .5rem;
    }
:is(#tools .signin) input {
      padding: .5rem;
      font: inherit;
      background-color: #fff;
      color: #222;
    }
:is(#tools .signin) button {
      padding: .5rem;
      font: inherit;
      background-color: #fff;
      color: #222;
    }
:is(#tools .signin) p {
      margin: 1.5rem 0;
      font-size: .875rem;
    }
:is(#tools .signin) a {
      color: #fff;
    }
.activelist {
  background-color: #fff;
  padding: 0.5rem;
  width: 25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  max-height: 20rem;
}
.activeareas .activeareascol {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }
.activeareas p.activearea {
    margin: 0;

    font-size: 0.75rem;
    line-height: 1.25;

    cursor: pointer;
  }
:is(.activeareas p.activearea):hover {
      text-decoration: underline;
    }
.activeareas  + .activeareas {
    margin-top: 1rem;
  }
@media (max-height: 600px) {
  .activelist {
    max-height: 40vh;
  }
}
.dark #info {
  background-color: #111;
}
#info {
  position: absolute;
  bottom: 0;
  left: calc(50% - 16rem);
  width: 32rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#info.closed {
  margin-bottom: env(safe-area-inset-bottom);
}
#info .info-content {
  max-height: calc(50vh - 5rem);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
}
#info a {
  font-weight: 600;
  cursor: pointer;
  color: hsl(220, 50%, 50%);
}
:is(#info a):hover {
    text-decoration: underline;
  }
#info .button {
  padding: 0.5rem;
}
#info .nocontent {
  padding: 1rem;
}
#info .notam {
  font-size: 0.6875rem;
  line-height: 1.25;
  margin: 0.375rem 0;
}
#info .notam b {
  font-weight: 700;
}
#info .compact {
  line-height: 1.25;
}
#info .buttons {
  position: absolute;
  top: -1.75rem;
  left: 0;
}
#info .info-close {
  position: absolute;
  top: -2.25rem;
  right: 0;
  font-size: 1.25rem;
  color: #fff;
  padding: 0.5rem 0.825rem;
  background-color: #222;
}
:is(#info .info-close):hover {
    background-color: #444;
  }
#info table {
  width: 100%;
  border-collapse: collapse;
}
#info tr + tr td {
  border-top: 1px solid #eee;
}
.dark #info tr + tr td {
  border-top: 1px solid #222;
}
#info td {
  vertical-align: top;
  line-height: 1.5;
  padding: 0.25rem;
}
#info .info-feature-name {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
}
:is(#info .info-feature-name) .type {
    display: block;
    font-size: 0.625rem;
  }
:is(#info .info-feature-name) b.navigatable {
    cursor: pointer;
  }
:is(:is(#info .info-feature-name) b.navigatable):hover {
      text-decoration: underline;
    }
:is(#info .info-feature-name) .button {
    font-size: 0.75rem;
    margin: 0 0.5rem;
    padding: 0.375rem 0.5rem;
    background-color: #666;
  }
:is(:is(#info .info-feature-name) .button):hover {
      background-color: #444;
    }
#info .info-feature-remove {
  width: 1.625rem;
  padding-left: 0.75rem;
  padding-top: 0.25rem;
}
#info .info-feature-icon {
  width: 1.5rem;
  padding-right: 0;
}
:is(#info .info-feature-icon) div {
    width: 1rem;
    height: 1rem;
    margin: 0.25rem 0;
    margin-left: 0.2rem;
    background-size: 8rem 8rem;
    background-repeat: no-repeat;
  }
#info .info-feature-description {
  font-size: 0.75rem;
}
#info .info-feature-upper,
.info-feature-lower {
  position: absolute;
  right: 0.5rem;

  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1rem;
}
#info .info-feature-upper {
  top: -0.125rem;
}
#info .info-feature-lower {
  top: 0.625rem;
}
#info .announcement {
  margin: 0.5rem 0;
  padding-right: 0.5rem;
}
#info .announcement .input {
  margin: 0.5rem 0;
}
#info .announcement .input .label {
  font-size: 0.625rem;
  font-weight: 500;
  color: #666;
  margin-bottom: 0.25rem;
}
#info .announcement .input textarea {
  width: 100%;
  background-color: #f5f5f5;
  padding: 0.375rem;
  font: inherit;
}
#info .announcement .button {
  padding: 0;
  margin: 0.5rem 0;
}
:is(#info .announcement .button) button {
    background: none;
    font: inherit;
    border: 0;
    outline: 0;
    padding: 0.5rem 0.75rem;
    color: #eee;
  }
#info .announcement .fineprint {
  margin: 0.5rem 0;
}
.announcementtype {
  display: inline-block;
  position: relative;
  width: 2rem;
  height: 2rem;
  background-size: 16rem 16rem;
  opacity: 0.5;
  cursor: pointer;
}
.announcementtype.selected {
  opacity: 1;
  cursor: default;
}
.announcementtype:not(.selected):hover {
  opacity: 1;
}
.announcementtype input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  cursor: inherit;
}
.announcementtype.art16 {
  background-position: -12rem -10rem;
}
.announcementtype.art16.selected:not(.becomingactive) {
    background-position: -14rem -10rem;
  }
.announcementtype.rpas {
  background-position: -8rem -10rem;
}
.announcementtype.rpas.selected:not(.becomingactive) {
    background-position: -8rem -6rem;
  }
.announcementtype.general {
  background-position: 0rem -12rem;
}
.announcementtype.general.selected:not(.becomingactive) {
    background-position: -2rem -12rem;
  }
.announcementtype.sar {
  background-position: -4rem -12rem;
}
.announcementtype.sar.selected:not(.becomingactive) {
    background-position: -6rem -12rem;
  }
.announcementtype.parachute {
  background-position: -8rem -12rem;
}
.announcementtype.parachute.selected:not(.becomingactive) {
    background-position: -10rem -12rem;
  }
.announcementtype.emergency {
  background-position: -12rem -12rem;
}
.announcementtype.emergency.selected:not(.becomingactive) {
    background-position: -14rem -12rem;
  }
.send-message {
  background-color: #eee;
  padding: 0.5rem;
}
@media (max-height: 480px) {
  #info {
    bottom: 0;
    max-height: calc(50vh - 2.5rem);
  }
}
@media (max-width: 640px) {
  #info {
    left: 0;
    bottom: 0;
    width: 100%;
  }

    #info .buttons {
      left: 0.625rem;
    }
    #info .info-close {
      right: 0.625rem;
    }
}
@media (min-height: 576px) {
  #info {
    bottom: 0.75rem;
  }
}
#ofp {
  position: absolute;
  bottom: 1rem;
  left: calc(50% - 35rem);
  width: 70rem;
  max-height: calc(100% - 3rem);

  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  transition: 0.3s transform, 0.3s opacity;
  transform: translate(0, 100%);
  opacity: 0;

  margin: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#ofp.show {
    transform: translate(0, 0);
    opacity: 1;
  }
#ofp .ofp-content {
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-x pan-y;
  }
#ofp .ofp-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    font-size: 1.25rem;
    color: #222;
    padding: 0.75rem 1rem;
    background-color: #fff;
  }
:is(#ofp .ofp-close):hover {
      background-color: #eee;
    }
#ofp .fuel {
    display: inline-block;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
:is(#ofp .fuel) p {
      display: inline-block;
      padding: 0.5rem;
    }
:is(#ofp .fuel) input {
      width: 3rem;
      font: inherit;
      padding: 0.5rem;
      background: #eee;
      border-radius: 0.25rem;
    }
#ofp .ofp-print {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    cursor: pointer;
  }
:is(#ofp .ofp-print) span {
      padding-left: 0.5rem;
    }
:is(#ofp .ofp-print):hover {
      background-color: #222;
      color: #fff;
      border-radius: 0.25rem;
    }
#ofp .abbreviations {
    font-size: 0.625rem;
    padding: 1rem;
  }
:is(#ofp .abbreviations) b {
      font-weight: 500;
    }
#ofp table {
  width: calc(100% - 1.5rem);
  margin: 0.75rem;

  border-collapse: collapse;
}
:is(#ofp table) thead td {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
  }
:is(#ofp table) tr:nth-child(even) td {
    background-color: #f9f9f9;
  }
:is(#ofp table) td {
    font-size: 0.75rem;
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }
:is(#ofp table) td input {
    box-sizing: content-box;
    font: inherit;
    background: none;
    background-color: #eee;
    border: 0;
    outline: 0;
    text-align: inherit;
    margin: -0.125rem 0;
    padding: 0.125rem 0.125rem;
    font-variant-numeric: inherit;
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
  }
:is(:is(#ofp table) td input)::-webkit-outer-spin-button,:is(:is(#ofp table) td input)::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
:is(#ofp table) tbody {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }
:is(#ofp table) tbody td:nth-child(1) {
    font-weight: 500;
  }
:is(#ofp table) td.right {
    text-align: right;
  }
.dark #ofp {
  background-color: #111;
}
.dark #ofp table td input {
  background-color: #222;
}
.dark #ofp table tr:nth-child(even) td {
  background-color: #191919;
}
.dark #ofp .fuel input {
  background-color: #222;
  color: #fff;
}
@media (max-width: 1120px) {
  #ofp {
    left: 0;
    right: 0;
    width: auto;
    bottom: 0;
  }
}
.alert-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  background-color: rgba(32, 32, 32, 0.5);
}
.alert-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  padding: 1rem;
  padding-left: calc(env(safe-area-inset-left) + 1rem);
  padding-right: calc(env(safe-area-inset-right) + 1rem);
  background-color: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 0.875rem;
}
.dark .alert-container {
  background-color: rgba(16, 16, 16, 0.95);
  color: #eee;
}
.alert-buttons {
  text-align: center;
}
.alert-buttons .button {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
}
.dark .alert-buttons .button {
  background-color: #fff;
  color: #222;
}
.alert-container a {
  color: inherit;
}
@media (min-width: 640px) {
  .alert-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.375rem;
    padding: 1.5rem;
    padding-left: calc(env(safe-area-inset-left) + 1.5rem);
    padding-right: calc(env(safe-area-inset-right) + 1.5rem);
    width: 40rem;
  }
}
.weather-info {
  white-space: nowrap;
  font-size: .875rem;
  line-height: 1rem;
}
.weather-info td {
  vertical-align: middle;
}
.weather-info .temp {
  font-size: .75rem;
}
.weather-info .center {
  text-align: center;
}
.weather-info .wind-icon {
  display: inline-block;
}
.weather-info .wind {
  font-size: .625rem;
}
.weather-info img {
  height: 1rem;
}
.weather-info img, .weather-info span {
  vertical-align: middle;
}
.maplibregl-weather-info {
  text-align: right;
}
.maplibregl-weather-info .weather-info {
  background-color: #222;
  color: #fff;
  border-radius: .75rem;
  padding: .1875rem .375rem;
  margin-top: .25rem;
  display: inline-block;
  font-size: .75rem;
  line-height: 1rem;
}
.maplibregl-ctrl-weather-radar-selector {
  position: absolute;
  top: 0;
  right: 3rem;
  padding: 0.5rem;
  background-color: #fff;
  text-align: center;

  white-space: nowrap;
}
.maplibregl-ctrl-weather-radar-selector span.offset {
    display: block;
    font-size: 0.75rem;
  }