a:link,
a:visited,
a:hover,
a:active {
  color: #0000ee;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  color: white;
  font-size: 24px;
}

.filter-button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  cursor: pointer;
  background-color: #ddd;
}

.filter-button.active {
  background-color: #555;
  color: #fff;
}

/* timeline */

.timeline-container {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.dates {
  text-align: center;
  margin-bottom: 10px;
}

.timeline {
  display: flex;
  height: 30px;
  background-color: #f1f1f1;
  border-radius: 5px;
  overflow: hidden;
}

.timeline-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 2px;
}

.color0 {
  background-color: #1f77b4;
}
.color1 {
  background-color: #ff7f0e;
}
.color2 {
  background-color: #2ca02c;
}
.color3 {
  background-color: #d62728;
}
.color4 {
  background-color: #9467bd;
}
.color5 {
  background-color: #8c564b;
}
.color6 {
  background-color: #e377c2;
}
.color7 {
  background-color: #7f7f7f;
}
.color8 {
  background-color: #bcbd22;
}
.color9 {
  background-color: #17becf;
}
.color10 {
  background-color: #aec7e8;
}
.color11 {
  background-color: #ffbb78;
}
.color12 {
  background-color: #98df8a;
}
.color13 {
  background-color: #ff9896;
}
.color14 {
  background-color: #c5b0d5;
}
.color15 {
  background-color: #c49c94;
}
.color16 {
  background-color: #f7b6d2;
}
.color17 {
  background-color: #c7c7c7;
}
.color18 {
  background-color: #dbdb8d;
}
.color19 {
  background-color: #9edae5;
}
.color20 {
  background-color: #ad494a;
}
.color21 {
  background-color: #8c6d31;
}
.color22 {
  background-color: #bd9e39;
}
.color23 {
  background-color: #e7ba52;
}
.color24 {
  background-color: #e7cb94;
}
.color25 {
  background-color: #843c39;
}
.color26 {
  background-color: #d6616b;
}
.color27 {
  background-color: #7b4173;
}
.color28 {
  background-color: #a55194;
}
.color29 {
  background-color: #ce6dbd;
}

.timeline-segment > span {
  font-size: 12px;
  color: white;
  user-select: none;
}
