.map {
  display: flex;
  flex-direction: column;
  z-index: 1000;
  position: relative;
  overflow: hidden;
}
.map .rightBar {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 1010;
  white-space: nowrap;
  user-select: none;
}
.map .rightBar ul.icons {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-size: 1em;
  background-color: #291c4180;
  backdrop-filter: blur(8px);
  border-radius: 4px;
}
.map .rightBar ul.icons li {
  width: 1.5em;
  height: 1.5em;
  margin: 0.25em;
}
.map .rightBar ul.icons li.source {
  background: url('../img/ico_model.svg') no-repeat center center;
}
.map .rightBar ul.icons li.variable {
  background: url('../img/ico_variable.svg') no-repeat center center;
}
.map .rightBar ul.icons li.variant {
  background: url('../img/ico_variant.svg') no-repeat center center;
}
.map .rightBar ul.icons li.particles {
  background: url('../img/ico_particles.svg') no-repeat center center;
}
.map .rightBar ul.icons li.particles.disabled {
  opacity: 0.5;
}
.map .rightBar ul.icons li.isolines {
  background: url('../img/ico_isolines.svg') no-repeat center center;
}
.map .rightBar ul.icons li.lock {
  background: url('../img/ico_lock0.svg') no-repeat center center / 1.25em;
  opacity: 0.5;
}
.map .rightBar ul.icons li.lock.lock1 {
  background: url('../img/ico_lock1.svg') no-repeat center center / 1.25em;
  opacity: 1;
}
.map .rightBar ul.icons li.lock.lock2 {
  background: url('../img/ico_lock2.svg') no-repeat center center / 1.25em;
  opacity: 1;
}
.map .rightBar ul.source_select,
.map .rightBar ul.variable_select,
.map .rightBar ul.variant_select {
  position: absolute;
  display: flex;
  top: 0;
  right: 2.5em;
  flex-direction: column;
  background: #291c4180;
  backdrop-filter: blur(8px);
  padding: 0.5em;
  overflow-y: auto;
}
.map .rightBar ul.source_select li,
.map .rightBar ul.variable_select li,
.map .rightBar ul.variant_select li {
  display: flex;
  width: auto;
  height: 1.5em;
  margin: 0;
  padding: 0 0.5em;
}
.map .rightBar ul.source_select li.selected,
.map .rightBar ul.variable_select li.selected,
.map .rightBar ul.variant_select li.selected {
  color: #2cbbdf;
}
.map .rightBar ul.variable_select {
  overflow-y: auto;
}
.map .map-container {
  display: flex;
  flex: 1 1 auto;
}
.map .map-container .mapboxgl-ctrl-group {
  background-color: #291c4180;
  backdrop-filter: blur(8px);
  box-shadow: none;
  border-radius: 4px;
}
@keyframes pulse {
  0% {
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  50% {
    width: 20px;
    height: 20px;
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.map .marker {
  position: absolute;
  width: 20px;
  height: 20px;
}
.map .marker.cursor .pin,
.map .marker.site .pin,
.map .marker.search .pin {
  position: absolute;
  width: 20px;
  height: 20px;
  background: url('../img/marker-dot.svg') no-repeat center center / 6px 6px;
  filter: drop-shadow(0 0 1px black);
  cursor: pointer;
}
.map .marker.cursor .pin:before,
.map .marker.site .pin:before,
.map .marker.search .pin:before,
.map .marker.cursor .pin:after,
.map .marker.site .pin:after,
.map .marker.search .pin:after {
  position: absolute;
  content: '';
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  animation: pulse 1s ease-out infinite;
  background: url('../img/marker-pulse.svg') no-repeat center center;
}
.map .marker.cursor .pin:after,
.map .marker.site .pin:after,
.map .marker.search .pin:after {
  animation-delay: 0.25s;
}
.map .marker.search .pin {
  background: url('../img/marker-dot2.svg') no-repeat center center / 6px 6px;
}
.map .marker.search .pin:before,
.map .marker.search .pin:after {
  background: url('../img/marker-pulse2.svg') no-repeat center center;
}
.map .marker:not(.up) .tag {
  position: absolute;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  top: 1em;
  left: 10px;
  padding: 0;
  font-family: 'UniNeueBook';
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  color: white;
  pointer-events: none;
}
.map .marker:not(.up) .tag .liveValue {
  display: flex;
  flex: 1 1 auto;
  white-space: nowrap;
  text-shadow: 0.5px 0.5px 2px black;
}
.map .marker:not(.up) .tag .bookmarkButton,
.map .marker:not(.up) .tag .closeButton,
.map .marker:not(.up) .tag .tagTxt {
  display: none;
}
.map .marker.up {
  width: 136px;
  height: 82px;
  top: -31px;
  left: 3em;
  background: #0000ffaa;
  background: url('../img/tag-pin.svg') no-repeat 17px 25px/5px;
  z-index: 2000;
}
.map .marker.up .pin {
  left: 10px;
  bottom: 0;
}
.map .marker.up .tag {
  width: auto;
  background: #291c41;
  padding: 0.125em 0.25em 0 0.35em;
  border-radius: 0.25em;
  font-family: 'UniNeueBook';
  font-variant-numeric: tabular-nums;
  box-shadow: 1px 1px 4px black;
}
.map .marker.up .tag .liveValue {
  line-height: 1em;
  font-size: 1em;
  margin: 0 2.5em 0 0;
  white-space: nowrap;
}
.map .marker.up .tag .tagTxt {
  line-height: 1em;
  font-size: 0.75em;
  color: #2cbbdf;
  margin: 0.125em 0 0.125em 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.map .marker.up .tag .bookmarkButton {
  position: absolute;
  width: 1em;
  height: 1em;
  top: 0.125em;
  right: 1.25em;
  background: url('../img/ico_star.svg') no-repeat center center / 0.85em;
  margin: 0.125em;
  cursor: pointer;
}
.map .marker.up .tag .closeButton {
  position: absolute;
  width: 1em;
  height: 1em;
  top: 0.125em;
  right: 0.125em;
  background: url('../img/ico_close.svg') no-repeat center center / 0.75em 0.75em;
  margin: 0.125em;
  cursor: pointer;
}
.map .marker.up.site .bookmarkButton,
.map .marker.up.site .closeButton {
  display: none;
}
.map .marker.up.search .closeButton {
  display: none;
}
.map .marker.up.search .bookmarkButton {
  right: 0.125em;
}
.map .bottomBar {
  background: #291c41;
  color: white;
  display: flex;
  flex: 0 0 1.5em;
  flex-direction: row;
  padding: 0 0.5em;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  align-items: flex-start;
}
.map .bottomBar .left {
  display: flex;
  flex: 1 1 auto;
  padding-top: 1px;
  align-items: flex-start;
}
.map .bottomBar .left .info {
  display: flex;
  flex: 0 0 1em;
  height: 1.4em;
  padding-right: 0.5em;
  background: url('../img/ico_info.svg') no-repeat left center / 1em;
}
.map .bottomBar .left .model {
  display: flex;
  flex: 0 0 auto;
  padding-right: 0.5em;
  color: #2cbbdf;
}
.map .bottomBar .left .variable {
  display: flex;
  flex: 0 0 auto;
  padding-right: 0.5em;
}
.map .bottomBar .right {
  display: flex;
  flex: 0 0 auto;
  padding-top: 1px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.map .bottomBar .right .horizon {
  display: flex;
  flex: 0 0 auto;
  padding-left: 0.75em;
}
.map .bottomBar .right .date {
  display: flex;
  flex: 0 0 auto;
  padding-left: 0.5em;
}
.map .bottomBar .right .time {
  display: flex;
  flex: 0 0 auto;
  padding-left: 0.5em;
}
.map .scale {
  display: flex;
  flex: 0 0 1.25em;
}
.map div.progress {
  z-index: 2010;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 4px;
  background: #f2015b;
}
.map div.buttons {
  z-index: 2000;
  height: 20px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: gray;
  font-family: Arial, Helvetica, sans-serif;
  padding: 2px 0.5em 0 0.5em;
  margin: 0.5em;
  box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.map div.buttons span {
  color: white;
  text-decoration: none;
}
.map canvas.variable {
  display: none;
}
.map canvas.particles {
  display: none;
}
.map div.unitsDiv img {
  position: absolute;
  left: -0.75em;
  top: -2.5em;
  height: 2.5em;
}
.map div.unitsDiv span {
  position: absolute;
  width: 100px;
  top: 0;
  left: -50px;
  color: white;
  font-family: 'UniNeueBook';
  text-align: center;
  text-shadow: 0.5px 0.5px 2px black;
}
.map .lealet-control-container {
  z-index: 1200;
}
.map .leaflet-container {
  cursor: crosshair !important;
}
.map .mapboxgl-canvas-container {
  cursor: crosshair !important;
}
.map .leaflet-control-container {
  display: none;
}
.map .leaflet-tile-pane {
  filter: grayscale(100%);
}
.map .leaflet-pane {
  filter: grayscale(100%) brightness(1000%);
}
.map .liveValue.auto {
  top: 0.25em;
  color: white;
  font-family: 'UniNeueBook';
  text-shadow: 0.5px 0.5px 2px black;
  font-variant-numeric: tabular-nums;
}