:root {
  --transition-time: 500ms;
}

#popup-text-container {
  position: absolute;
  width: 100%;
  text-align: center;
}

.hide-alerts #popup-text-container {
  display: none;
}

#timeline-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  font-size: 14px;
}

.hide-timeline #timeline-container {
  display: none;
}

#timeline-container:lang(fr) {
  width: 300px;
}

#timeline-container:lang(de) {
  width: 300px;
}

#timeline-container:lang(ko) {
  font-size: 15px;
  width: 250px;
  height: 140px;
}

/* Relative to popup-text-container */
#popup-text-info {
  position: absolute;
  width: 100%;
  top: 155px;
}

/* Relative to popup-text-container */
#popup-text-alert {
  position: absolute;
  width: 100%;
  top: 90px;
}

/* Relative to popup-text-container */
#popup-text-alarm {
  position: absolute;
  width: 100%;
  top: 0;
}

.info-text {
  color: #2b2;
  font-size: 140%;
  text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black;
  will-change: transform;
}

.alert-text {
  color: #fb0;
  font-size: 170%;
  text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black;
  will-change: transform;
}

.alarm-text {
  color: #f30;
  font-size: 230%;
  text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black;
  will-change: transform;
}

.animate-text {
  animation-name: zoom-in-out;
  animation-duration: 300ms;
}

@keyframes zoom-in-out {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.animate-timer-bar-removed {
  animation: timer-bar-removed var(--transition-time);
}

@keyframes timer-bar-removed {
  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
  }
}

/* Show only when unlocked for move/resize. */
.resize-helper {
  display: none;
}

.resize-handle .resize-helper {
  display: inline-block;
}

/* Fake bars for helping with move/resize. */
#timeline-resize-helper {
  width: 100%;
}

#timeline-resize-helper .resize-helper-bar {
  border: 1px solid black;
  padding: 0 0.2em;
  vertical-align: middle;
  height: 18px;
  margin-bottom: 2;
}

.timeline-grid {
  display: grid;
  width: 100%;
  grid-auto-columns: 0;
  grid-auto-rows: 0;
  overflow-y: hidden;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, min-content);
  overflow: hidden;
}

.timer-bar {
  width: calc(100% - 2px);
  height: 18px;
  margin-bottom: 2;
}

:lang(ko) .timer-bar {
  height: 23px;
}

.timeline-bar-color {
  background: #88f;
}

.timeline-bar-color.soon {
  background: #f88;
}

#timeline-debug {
  position: absolute;
  left: calc(100%);
}

.reversed {
  position: absolute;
  bottom: 0;
}

.autoplay-helper-button {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.2em;
  max-width: 100vw;
}