.charts-tooltip {
  background: $color-white;

  .charts-title {
    font-family: $default-font-family;
    font-size: $sm-font-size;
    color: $color-black-light;
    letter-spacing: 0.98px;
    text-align: left;
  }
  .charts-content {
    background: #f0f4fa;
    border-radius: 2px;
    padding: 8px 15px;
  }
  .charts-item {
    display: flex;
    align-items: center;
    margin: 6px 0;
    &__icon {
      border-radius: 1px;
      width: $sm-font-size;
      height: $sm-font-size;
      background: #5ab1ef;
    }
    &__title {
      font-family: $default-font-family;
      font-size: $sm-font-size;
      color: $color-gray-drak;
      letter-spacing: 0.75px;
      flex: 1;
      text-align: left;
      margin: 0 35px 0 10px;
    }
    &__data {
      align-self: flex-end;
      font-family: $default-font-family;
      font-size: $sm-font-size;
      color: $color-gray-drak;
      text-align: right;
      letter-spacing: 0.75px;
    }
  }
}
