/* Loaded AFTER TimelineJS */
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-timespan {
  background-color: rgba(142, 200, 240, 0.45) !important;
}
/* Ruler band between the two dots — darker pastel, still see-through */
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-timespan:after {
  display: block !important;
  content: " " !important;
  height: 8px !important;
  bottom: -2px !important;
  background-color: rgba(56, 130, 196, 0.50) !important;
  opacity: 1 !important;
  border-radius: 6px !important;
  z-index: 7 !important;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-timespan .tl-timemarker-timespan-content {
  display: none !important;
}
.chart-flags2 .range-dot {
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  z-index: 30;
  pointer-events: none;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .range-dot,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.is-page-on .range-dot,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover .range-dot {
  background: #c34528 !important;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-line-left:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-line-right:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.is-page-on .tl-timemarker-line-left:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.is-page-on .tl-timemarker-line-right:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover .tl-timemarker-line-left:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover .tl-timemarker-line-right:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-timespan .tl-timemarker-line-left:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-timespan .tl-timemarker-line-right:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.is-page-on .tl-timemarker-timespan .tl-timemarker-line-left:after,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.is-page-on .tl-timemarker-timespan .tl-timemarker-line-right:after {
  background-color: #c34528 !important;
}

/* Ensure year labels are visible on the ruler */
.chart-flags2 .tl-timeaxis-major .tl-timeaxis-tick-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  opacity: 1 !important;
}
.chart-flags2 .tl-timeaxis-minor .tl-timeaxis-tick-text {
  font-size: 11px !important;
  color: #333 !important;
  opacity: 1 !important;
}

.chart-flags2 .tl-timeaxis .tl-timeaxis-tick-text,
.chart-flags2 .tl-timeaxis-major .tl-timeaxis-tick-text,
.chart-flags2 .tl-timeaxis-minor .tl-timeaxis-tick-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1a1a1a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Make range flags expand like regular flags */
.chart-flags2 .tl-timemarker.tl-timemarker-with-end {
  z-index: 10;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active {
  z-index: 100;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-content-container {
  transition: transform 0.2s ease;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover .tl-timemarker-content-container,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-content-container {
  transform: scale(1.05);
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-content {
  max-width: none;
  white-space: normal;
}


/* Timespan: keep bar fixed, expand label on hover */
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-timespan {
  pointer-events: none;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-content-container {
  pointer-events: auto;
  position: relative;
  z-index: 50;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end .tl-timemarker-content {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: max-width 0.3s ease, white-space 0s 0.3s;
}
.chart-flags2 .tl-timemarker.tl-timemarker-with-end:hover .tl-timemarker-content,
.chart-flags2 .tl-timemarker.tl-timemarker-with-end.tl-timemarker-active .tl-timemarker-content {
  max-width: 300px;
  white-space: normal;
  overflow: visible;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 100;
}