.timeline {
  position: relative;
  width: fit-content;
}

.timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-time {
  width: 160px;
  font-size: 0.85rem;
  text-align: right;
  padding-right: 1rem;
}

.timeline-marker {
  position: relative;
  width: 30px;
  display: flex;
  justify-content: center;
}

.timeline-marker::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1.5rem;
  width: 2px;
  background: #dee2e6;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 2;
  margin-top: 4px;
}

.timeline-content {
  padding-left: 1rem;
}

.badge-running,
.timeline-dot.running {
  background-color: #0d6efd;
}

.badge-extended,
.timeline-dot.extended {
  background-color: #fd7e14;
}

.badge-paid,
.timeline-dot.paid {
  background-color: #198754;
}

.badge-published,
.timeline-dot.published {
  background-color: #b11717;
}

.badge-published_full,
.timeline-dot.published_full {
  background-color: #9e0808;
}

.timeline-scroll {
  max-height: 320px;
  overflow-y: auto;
  text-align: center;
}

.timeline-scroll::-webkit-scrollbar {
  width: 8px;
}

.timeline-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.timeline-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.timeline-scroll::-webkit-scrollbar-button:vertical:end:increment {
  display: none;
  height: 0;
}

.timeline-scroll {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}