.DataUsedChartD3 {
  background: #ffffff;

  .tooltip {
    opacity: 0;
    position: absolute;
    z-index: 3;
    display: flex;
    background: #091334;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px -1px;
    border-radius: 2px;
    min-width: 50px;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
    width: 80px;
    justify-content: center;
    &:before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-right: 7px solid #091334;
      position: absolute;
      left: 36px;
      bottom: -9px;
      transform: rotate(-90deg);
    }

    &-date {
      color: #d4dbff;
      text-transform: uppercase;

      span {
        display: block;
      }
    }

    hr {
      height: 1px;
      background-color: #ffffff;
      border: none;
    }
  }

  .chart {
    position: relative;
    text-align: center;

    .inner-chart-container {
      fill: #0a1435;
      fill-opacity: 15%;
    }

    &__message {
      font-size: 14px;
      opacity: 0.8;
    }

    &__maxDataCallout {
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-size: 10px;
      font-weight: 500;
      fill: #f7f8fb;
    }

    .y-axis-grid,
    .x-axis-grid {
      color: #f1f1f1;
      opacity: 0.8;
    }

    .x-axis,
    .y-axis {
      color: #606677;

      path {
        stroke: transparent;
      }

      .x-label-text {
        text-align: center;
      }
    }

    .bar {
      width: 8px;
      fill: #2f6aff;
    }
  }

  &--alerts {
    background: #253054;

    .tooltip {
      background: #ffffff;
      border-radius: 2px;
      padding: 8px 0 5px 0;
      display: block;

      &:before {
        border-right-color: #ffffff;
      }
      &-date {
        color: #2f6aff;
        font-weight: 500;
        padding: 0 4px;
      }
      hr {
        background-color: #e1e5eb;
      }
      &-data {
        color: #0a1435;
        font-weight: 400;
        padding: 0 4px;
      }
    }

    .chart {
      font-weight: 300;
      font-size: 24px;
      text-align: center;

      svg {
        background: #253054;
      }

      .x-axis-grid {
        path {
          stroke: rgba(250, 250, 255, 0.1);
        }
        .tick {
          color: transparent;
        }
      }

      .y-axis-grid {
        color: transparent;
      }

      .x-axis {
        path {
          stroke: rgba(250, 250, 255, 0.1);
        }
        .tick {
          font-size: 10px;
          line-height: 12px;
          padding-top: 10px;
          text-transform: uppercase;
          font-weight: 500;
          color: #969fb1;
          letter-spacing: 0.6px;
          font-family: 'DINNextLTPro', sans-serif !important;
        }
      }

      .y-axis {
        display: none;
      }
    }

    &-drawer {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}