* {
  box-sizing: border-box; }

strong {
  font-weight: 600; }

.random {
  width: 80%; }
  .random .vtc {
    height: 250px;
    font-size: 12px; }
    @media (min-width: 699px) {
      .random .vtc {
        height: 320px; } }
  .random .labels {
    stroke: rgba(0, 0, 0, 0.05); }
  .random .active-line {
    stroke: rgba(0, 0, 0, 0.2); }
  .random .point {
    stroke-width: 2;
    transition: stroke-width 0.2s; }
  .random .point.is-active {
    stroke-width: 5; }
  .random .curve1 .stroke {
    stroke: #fbac91;
    stroke-width: 2; }
  .random .curve1 .fill {
    fill: #fbac91;
    opacity: 0.05; }
  .random .curve1 .point {
    fill: #fbac91;
    stroke: #fbac91; }
  .random .curve2 .stroke {
    stroke: #00ff21;
    stroke-width: 2; }
  .random .curve2 .point {
    fill: #00ff21;
    stroke: #00ff21; }
  .random .upperline .stroke {
    stroke: #00ff21;
    stroke-width: 1;
    stroke-opacity: 0.1; }
  .random .upperline .point {
    fill: #00ff21;
    stroke: #00ff21;
    stroke-width: 1;
    opacity: 0.01; }
  .random .tooltip {
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    pointer-events: none; }
    .random .tooltip:not(.is-active) {
      display: none; }
    .random .tooltip-data {
      display: flex; }
      .random .tooltip-data-item {
        display: flex;
        align-items: center; }
        .random .tooltip-data-item:not(:first-child) {
          margin-left: 20px; }
        .random .tooltip-data-item:before {
          content: "";
          display: block;
          width: 15px;
          height: 15px;
          margin-right: 5px; }
        .random .tooltip-data-item--1:before {
          background: #fbac91; }
        .random .tooltip-data-item--2:before {
          background: #fbe1b6; }
        .random .tooltip-data-item--3:before {
          background: #7fdfd4; }