span_graph_vis_vertical.css

.holder {
  display: flex;
  font-family: 'Share Tech Mono', monospace;
  position: relative;
  color: #555;
}
.layer {
  cursor: pointer;
  color: var(--group-color);
}
.layer-label-vert {
  top: calc(0px - var(--line-height));
  position: absolute;
  padding-left: 7px;
  display: flex;
  transform: rotate(0deg);
  transition: .25s transform;
  transform-origin: 10px 10px;
  color: var(--group-color);
}
.layer-label-vert.hidden {
  transform: rotate(-90deg);
}
.column {
  position: relative;
  height: 100%;
  transition: .25s width;
}
.column.hidden {
  width: 13px !important;
  opacity: 0;
}
.tokens {
  z-index: 1;
}
.line {
  height: var(--line-height);
  box-sizing: border-box;
  padding: 0 7px;
  text-align: right;
  white-space: nowrap;
}
.token.selected{
  color: black;
}
.child {
  font-weight: bold;
  filter: hue-rotate(-40deg);
  border-width: 3px;
}
.parent {
  font-weight: bold;
  filter: hue-rotate(40deg);
  border-width: 3px;
}
.selected {
  font-weight: bold;
  border-width: 3px;
}

.gray {
  border-color: #ddd !important;
  color: #ddd
}

.edge {
  position: absolute;
}
.edge-line {
  border: 1px solid var(--group-color);
  border-left: 0;
  width: 3px;
  left: -3px;
}
.arrow-head {
  border: 5px solid transparent;
  border-right: 5px solid var(--group-color);
  width: 0;
  height: 0;
  top: -5px;
  left: -5px;
  position: absolute;
}
.gray .arrow-head{
  border-right-color: #ddd;
}
.arrow-head.bottom{
  bottom: -5px;
  top: unset;
}
.background-lines{
  position: absolute;
  width: 100%;
  top: -3px;
}
.background-line {
  height: var(--line-height);
  width: 100%;
  padding: 0 7px;
}
.background-line:nth-child(odd){
  background: #f5f5f5;
}