:root {
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, system-ui, 'Helvetica Neue', Arial, Helvetica;
  line-height: 1.6;
}
html,
body,
#root {
  height: 100%;
}
.vAygCK-api-load-alpha-banner {
  display: none;
}

[data-draggable] {
  user-select: none;
  touch-action: manipulation;
}
html.ui-dragging {
  touch-action: none;
}
html.ui-dragging * {
  cursor: var(--ui-drag-cursor) !important;
}
html.ui-dragging iframe {
  pointer-events: none;
}

.timeline {
  --bg: rgba(0, 0, 0, 0.5);
  --active-bg: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  inset: auto 0 15px 0;
  width: 80vw;
  margin: auto;
  display: flex;
  gap: 5px;
  -webkit-font-smoothing: antialiased;
}
.timeline-play-button {
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: 44px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  flex: none;
}
.timeline-play-button svg {
  width: 18px;
  height: 18px;
}
.timeline-list,
.timeline-places,
.timeline-faults,
.timeline-fullscreen {
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: 44px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  flex: none;
}
.timeline-list svg,
.timeline-places svg,
.timeline-faults svg,
.timeline-fullscreen svg {
  width: 18px;
  height: 18px;
}
.timeline-list--active,
.timeline-places--active,
.timeline-faults--active,
.timeline-fullscreen--active {
  background-color: var(--active-bg);
}
.timeline-list--disabled,
.timeline-places--disabled,
.timeline-faults--disabled,
.timeline-fullscreen--disabled {
  opacity: 0.1;
  pointer-events: none;
}
.timeline-speeds {
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: 44px;
  user-select: none;
  position: relative;
  font-weight: bold;
  flex: none;
}
.timeline-speeds-toggle {
  position: absolute;
  inset: 0;
  left: 0;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.timeline-track {
  flex: auto;
  background: var(--bg);
  position: relative;
  border-radius: 4px;
  cursor: col-resize;
  backdrop-filter: blur(8px);
}
.timeline-slider {
  position: absolute;
  top: -10px;
  width: 44px;
  height: calc(100% + 10px);
  transform: translateX(-50%);
  cursor: grab;
}
.timeline-slider::after {
  content: '';
  position: absolute;
  left: 50%;
  height: 100%;
  width: 3px;
  transform: translateX(-50%);
  background: #3390e9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  z-index: 100;
}
.timeline-ticks {
  display: flex;
  justify-content: space-around;
  height: 100%;
}
.timeline-tick {
  width: 2px;
  height: 20%;
  background-color: rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.timeline-tick:nth-child(5n) {
  height: 40%;
}
.timeline-biggest {
  position: absolute;
  inset: 0;
}
.timeline-big-event {
  position: absolute;
  width: 5px;
  bottom: 0;
  transform: translateX(-50%);
  background-color: #1a96e4;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  touch-action: manipulation;
  cursor: pointer;
}
.timeline-big-event:hover {
  opacity: 1 !important;
}
.timeline-big-event:hover .timeline-big-event-popup {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.timeline-big-event-popup {
  --duration: 300ms;
  position: absolute;
  z-index: 1000;
  bottom: calc(120% + 4px);
  padding: 5px 10px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(0);
  pointer-events: none;
  background: #fff;
  color: #000;
  border-radius: 4px;
  transform-origin: 50% 150%;
  transition: transform, opacity;
  transition-duration: var(--duration);
  transition-timing-function: var(--ease-in-back);
  width: 25ch;
  text-align: center;
  line-height: 1.4;
  -webkit-font-smoothing: none;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}
.timeline-big-event-popup--active {
  transform: translateX(-50%) scale(1);
  transition-timing-function: var(--ease-out-back);
  opacity: 1;
}
.timeline-big-event-popup::after {
  content: '';
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  background-color: #fff;
  bottom: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
}
.timeline-date {
  --duration: 300ms;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 10px;
  transform: translateX(-50%);
  background: var(--bg);
  border-radius: 4px;
  white-space: nowrap;
  width: 6.7ch;
  padding: 2px 10px;
  text-align: right;
  font-size: 15px;
  font-weight: 500;
}
.timeline-helper {
  --duration: 300ms;
  position: absolute;
  z-index: 1000;
  font-size: 22px;
  bottom: calc(120% + 8px);
  padding: 5px 10px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(0);
  background: var(--bg);
  border-radius: 4px;
  transform-origin: 50% 150%;
  transition: transform, opacity;
  transition-duration: var(--duration);
  transition-timing-function: var(--ease-in-back);
  white-space: nowrap;
  text-align: right;
  width: 7ch;
}
.timeline-helper--active {
  transform: translateX(-50%) scale(1);
  transition-timing-function: var(--ease-out-back);
  opacity: 1;
}
.timeline-helper::after {
  content: '';
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  background-color: var(--bg);
  bottom: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
}
.timeline-speeds,
.timeline-play-button,
.timeline-list,
.timeline-places,
.timeline-faults,
.timeline-fullscreen {
  aspect-ratio: 1.1;
}
@media (width < 600px) {
  .timeline {
    display: grid;
    width: 100vw;
    bottom: 0;
    grid-template-columns: repeat(8, 1fr);
    background: #0b4560;
    box-sizing: border-box;
    gap: 3px;
    padding: 3px;
  }
  .timeline-speeds,
  .timeline-play-button,
  .timeline-list,
  .timeline-places,
  .timeline-faults,
  .timeline-fullscreen {
    aspect-ratio: 1.3;
  }
  .timeline-play-button {
    grid-column: 1;
    grid-row: 1;
  }
  .timeline-speeds {
    grid-column: 1;
    grid-row: 2;
  }
  .timeline-track {
    grid-column: 2 / 7;
    grid-row: 1 / 3;
  }
  .timeline-list,
  .timeline-places {
    grid-row: 1;
  }
  .timeline-faults,
  .timeline-fullscreen {
    grid-row: 2;
  }
  .timeline-list,
  .timeline-faults {
    grid-column: 7;
  }
  .timeline-places,
  .timeline-fullscreen {
    grid-column: 8;
  }
}

.event-list {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 5ch;
  column-gap: 15px;
  border-radius: 6px;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  line-height: 1.4;
  transition: opacity 250ms,
    transform 250ms;
  backdrop-filter: blur(8px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  transform-origin: calc(100% + 10px) -10px;
  transition-timing-function: var(--ease-in-cubic);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.5);
}
.event-list--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition-timing-function: var(--ease-out-cubic);
}
.event-list-event {
  display: grid;
  cursor: pointer;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 15px 20px;
}
.event-list-event:hover {
  background: rgba(255, 255, 255, 0.1);
}
.event-list-empty {
  padding: 10px 20px;
  text-align: center;
  grid-column: 1 / -1;
  opacity: 0.5;
}
.event-list-place {
  grid-column: 1;
  display: flex;
  flex-flow: column;
  gap: 3px;
}
.event-list-magnitude {
  grid-column: 2;
  text-align: right;
}
.event-list-date {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 500;
}

.event-places {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 5ch;
  column-gap: 15px;
  border-radius: 6px;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  line-height: 1.4;
  transition: opacity 250ms,
    transform 250ms;
  backdrop-filter: blur(8px);
  transform-origin: calc(100% + 10px) -10px;
  transition-timing-function: var(--ease-in-cubic);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: 500;
  opacity: 0;
  transform: scale(0.5);
}
.event-places--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition-timing-function: var(--ease-out-cubic);
}
.event-places-place {
  display: grid;
  cursor: pointer;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 15px;
}
.event-places-place:hover {
  background: rgba(255, 255, 255, 0.1);
}


/*# sourceMappingURL=main.e6d563c83f509153feaf.css.map*/