#timelinebar {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  background: linear-gradient(var(--yellowlight), var(--yellowdark));
  overflow-y: hidden;
  overflow-x: hidden;
}
.timeline-line {
  grid-column: 2/3;
  width: 100%;
  height: 2px;
  background: var(--brown1);
  position: relative;
}
#timeline-line1 {
  margin: 48px 0 32px 0;
}
#timeline-line2 {
  margin: 32px 0 44px 0;
}
.tldash {
  width: 2px;
  height: 14px;
  position: absolute;
  background: var(--brown1);
  top: -6px;
  margin-left: -1px;
}
.tldashlow, .tldashhigh {
  height: 20px;
}
.tldashhigh {
  top: -12px;
}
.tlbreak {
  rotate: 30deg;
  top: -7px;
}
.tldashlabel {
  position: absolute;
  left: -49px;
  width: 100px;
  color: var(--brown1);
  text-align: center;
}
#timeline-line1 .tldashlabel {
  bottom: 20px;
}
#timeline-line2 .tldashlabel {
  top: 20px;
}
.shiftedlabel {
  width: 200px;
  text-align: left;
  left: -20px;
}
.connectingdot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  margin-left: -1px;
  position: absolute;
  background: var(--brown1);
}
.tldot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: -9px;
  position: absolute;
  top: -8px;
  background: var(--purple2);
  display: grid;
  cursor: pointer;
  z-index: 4;
}
.tldot:hover, .tl-active {
  background: radial-gradient(white, var(--yellowlight));
  outline: 2px solid var(--purple2);
  z-index: 5;
}
.dotdate {
  position: absolute;
  top: 22px;
  justify-self: center;
  text-align: center;
}
.tlrange .dotdate {
  margin-top: -2px;
}

#timelinebody {
  height: 500px;
  padding: 16px 0;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.tlp {
  padding-left: 20px;
  padding-right: 20px;
}
.tlp-active {
  background: var(--purplepale);
}