/* Labels the shared deal line (charts/take-private-line.js) adds on top of
   the deal-profile family's .vl-* CSS: key points (date over value), the
   labels right of the deal point (value, detail, premium) and the note in a
   gap in the data. */
.vl-key {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
.vl-key .k1 {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mv-text-muted);
}
.vl-key .k2 {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
}
.vl-side {
  position: absolute;
  white-space: nowrap;
  line-height: 1.3;
}
.vl-side .s1 {
  display: block;
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
}
.vl-side.hero .s1 {
  font-size: 22px;
  line-height: 30px;
  color: var(--cx-green);
}
.vl-side .s2 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mv-text-muted);
}
.vl-side .s3 {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cx-green);
}
@media (max-width: 700px) {
  .vl-key .k2 {
    font-size: 14.5px;
  }
  .vl-side .s1 {
    font-size: 14.5px;
    line-height: 20px;
  }
  .vl-side.hero .s1 {
    font-size: 18px;
    line-height: 24px;
  }
  .vl-side .s2,
  .vl-side .s3 {
    font-size: 10.5px;
  }
}
.vl-gap {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--mv-text-muted);
}
.vl-detail.vl-mark {
  transform: translate(-50%, -100%);
  text-align: center;
}
.vl-detail .d3 {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--mv-text-muted);
}