.tooltip {
  display: inline-block;
  position: relative;
  cursor: help;
  margin-left: 5px;
  &:hover {
    .tooltip {
      &__text {
        opacity: 1;
        pointer-events: auto;
      }
      &__content {
        opacity: 1;
        left: -30px;
      }
    }
  }
  &_left {
    &:hover {
      .tooltip {
        &__content {
          left: -280px;
          &:before {
            left: 276px;
          }
          &:after {
            left: 277px;
          }
        }
      }
    }
  }
  &_help {
    margin-left: 4px;
    &:before {
      content: '?';
      display: inline-block;
      vertical-align: middle;
      background-color: $attention-color;
      color: $white-color;
      width: 15px;
      height: 15px;
      font: 10px/15px Arial;
      text-align: center;
      margin-top: -3px;
      border-radius: 50%;
    }
  }
  &_top {
    .tooltip {
      &__text {
        top: auto;
        bottom: 33px;
        &:before {
          top: auto;
          bottom: -9px;
          border-bottom: 0px transparent;
          border-top: 8px solid $light-gray-color;
        }
        &:after {
          top: auto;
          bottom: -7px;
          border-bottom: 0px transparent;
          border-top: 7px solid $white-color;
        }
      }
    }
  }
  &_gray {
    &:before {
      background-color: #b2b2b2;
    }
  }
  &__mark {
    border-radius: 50%;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #b3b3b3;
    color: $white-color;
    font-size: 11px;
    font-family: $font-futurademi;
    text-align: center;
    line-height: 15px;
  }
  &__text {
    font-family: $font-futurabook;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: -21px;
    top: 33px;
    z-index: 10;
    min-width: 300px;
    padding: 13px 20px 15px;
    border-radius: 3px;
    border: 1px solid $light-gray-color;
    background-color: $white-color;
    font-size: 17px;
    line-height: 20px;
    text-transform: none;
    &:before,
    &:after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
    }
    &:before {
      top: -9px;
      left: 20px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid $light-gray-color;
    }
    &:after {
      top: -7px;
      left: 21px;
      z-index: 2;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid $white-color;
    }
  }
  &__content {
    transition: opacity 250ms ease-out;
    background: $white-color;
    border: 1px solid $light-gray-color;
    color: $dark-bg-color;
    font-family: $font-futurabook;
    font-size: 17px;
    line-height: 20px;
    margin-right: -220px;
    opacity: 0;
    padding: 25px 30px;
    position: absolute;
    right: 9999px;
    text-align: left;
    top: 25px;
    width: 320px;
    z-index: 1000;
    &:before {
      border: 11px solid transparent;
      border-bottom-color: $light-gray-color;
      content: ' ';
      height: 0;
      left: 26px;
      position: absolute;
      top: -22px;
      width: 0;
      z-index: 9000;
    }
    &:after {
      border: 10px solid transparent;
      border-bottom-color: $white-color;
      content: ' ';
      height: 0;
      left: 27px;
      position: absolute;
      top: -20px;
      width: 0;
      z-index: 10000;
    }
  }
}