#sequenceView {
  display: none;
}

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

#sequenceView .card-body svg {
  width: 100%;
  height: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#altSequenceContainer {
  width: 100%;
}