:root {
  --axis-height: 40px;
  --primary-color: #3498db;
}

.timeline-container {
  padding: 50px 10px;
  padding-right: 50px;
  background: #f4f4f4;
  user-select: none; /* Prevents text selection while dragging */
}

.axis {
  position: relative;
  width: 100%;
  height: var(--axis-height);
  background: #ddd;
  border-radius: 4px;
  border: 1px solid #bbb;
}

/* The Range Bar */
.range-segment {
  position: absolute;
  height: 100%;
  background: rgba(52, 152, 219, 0.4);
  border: 1px solid var(--primary-color);
  top: -1px;
  text-align: center;
}

/* The Draggable Handles */
.handle {
  position: absolute;
  width: 4px;
  height: 50px;
  background: var(--primary-color);
  top: -5px;
  cursor: ew-resize;
  border-radius: 3px;
}

.handle-left { transform: translateX(-50%); }
.handle-right { transform: translateX(50%); right: 0; }
.pitch-tech { transform: translateX(0%);}

/* Time Ticks */
.tick {
  position: absolute;
  bottom: -25px;
  font-size: 10px;
  transform: translateX(-50%);
  color: #666;
}