#timelineView .timerow.highlight {
  background-color: var(--main-color);
}

#timelineView .card-body svg {
  min-width: 100%;
}

#timelineView .legend .timesteps rect {
  fill: var(--gray);
}

#timelineView .legend .timesteps .hover rect {
  fill: var(--blue-light);
}

#timelineView .legend .timesteps .highlight rect {
  fill: var(--blue);
}

#timelineView .legend .timesteps .hover text {
  fill: var(--blue);
  font-weight: bold;
}

#timelineView .legend .timesteps .highlight text {
  fill: var(--white);
  font-weight: bold;
}

#timelineView .legend .timesteps line {
  stroke: var(--white);
}

#timelineView line.separator {
  stroke: var(--gray);
}

#timelineView rect.timestep {
  fill: var(--white);
}

#timelineView line.timestep {
  stroke: var(--gray);
}

#timelineView .hover rect.timestep {
  fill: var(--gray-light);
}

#timelineView .highlight rect.timestep {
  fill: var(--blue-light);
}

#timelineView .sequence .diverge rect.trace-0 {
  fill: var(--trace-0);
  opacity: 1;
}

#timelineView .sequence .diverge rect.trace-1 {
  fill: var(--trace-1);
  opacity: 1;
}

#timelineView .sequence rect.trace {
  fill: var(--gray-darker);
  opacity: 0.6;
}

#timelineView .sequence rect.trace.hover {
  filter: drop-shadow(0 0 1px var(--blue-light));
  /* stroke: var(--blue); */
}

#timelineView path.lasso {
  fill: none;
  stroke: var(--gray-darker);
  opacity: 0.8;
}

#timelineView path.lasso.lasso-head {
  fill: var(--gray-darker);
}

#timelineView .head .hover text {
  fill: var(--blue);
  font-weight: bold;
}

#altSequenceContainer {
  width: 100%;
}

#timelineView g.trace text.trace-0,
#timelineView g.head text.trace-0 {
  fill: var(--trace-0);
  font-weight: bold;
}

#timelineView g.trace text.trace-1,
#timelineView g.head text.trace-1 {
  fill: var(--trace-1);
  font-weight: bold;
}

#timelineView g.trace rect.variable {
  fill: white;
  stroke: var(--gray-darker);
}
#timelineView g.trace rect.variable.hover {
  stroke: var(--main-color);
  stroke-width: 2px;
}
#timelineView g.trace rect.variable.true {
  fill: var(--gray-darker);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl {
  fill: var(--main-color);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl {
  stroke: var(--main-color);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl-0 {
  stroke: var(--expl-0);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl-1 {
  stroke: var(--expl-1);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl-2 {
  stroke: var(--expl-2);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl-3 {
  stroke: var(--expl-3);
}
.hyperhyper #timelineView g.trace rect.variable.false.expl-4 {
  stroke: var(--expl-4);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl-0 {
  fill: var(--expl-0);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl-1 {
  fill: var(--expl-1);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl-2 {
  fill: var(--expl-2);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl-3 {
  fill: var(--expl-3);
}
.hyperhyper #timelineView g.trace rect.variable.true.expl-4 {
  fill: var(--expl-4);
}

#timelineView g.statement.expl-0 rect {
  fill: var(--expl-0);
}
#timelineView g.statement.expl-1 rect {
  fill: var(--expl-1);
}
#timelineView g.statement.expl-2 rect {
  fill: var(--expl-2);
}
#timelineView g.statement.expl-3 rect {
  fill: var(--expl-3);
}
#timelineView g.statement.expl-4 rect {
  fill: var(--expl-4);
}

#timelineView g.statement.hover rect {
  height: 3px;
}

#timelineView .trace text.state.hover {
  fill: var(--main-color);
  font-weight: bold;
}

#timelineView .traceHead.hover {
  transform: scale(1.2) translate(-1px);
}