.task-pro .hints.hints--active {
  opacity: 1;
  visibility: visible;
  z-index: 10; }
  .task-pro .hints.hints--active.hints--hovered {
    z-index: 10009010; }
  .task-pro .hints.hints--active.hints--events_on .hint__icon {
    pointer-events: all; }
  .task-pro .hints.hints--active .hint__icon {
    opacity: 1;
    visibility: visible; }
  .task-pro .hints.hints--active .hint__icon.hint--object {
    top: 14px;
    right: 685px; }
  .task-pro .hints.hints--active .hint__icon.hint--duration {
    top: 280px;
    right: 808px; }
  .task-pro .hints.hints--active .hint__icon.hint--additional {
    top: 354px;
    right: 260px; }
  .task-pro .hints.hints--active .hint__icon.hint--network {
    top: 352px;
    right: 747px; }
  .task-pro .hints.hints--active .hint__icon.hint--privacy {
    top: 472px;
    right: 20px; }
  .task-pro .hints.hints--active .hint__icon.hint--vpn-team {
    top: 416px;
    right: 442px; }
  .task-pro .hints.hints--active .hint__icon.hint--vpn {
    top: 416px;
    left: 390px; }
  .task-pro .hints.hints--active .hint__icon.hint--preset-team {
    top: 515px;
    right: 617px; }
  .task-pro .hints.hints--active .hint__icon.hint--preset {
    top: 515px;
    right: 617px; }
  .task-pro .hints.hints--active .hint__icon.hint--env {
    right: 270px;
    top: 14px; }
  .task-pro .hints.hints--active.hints--save_preset .hint__icon.hint--preset-team {
    transform: translateX(35px); }
  .task-pro .hints.hints--active.hints--save_preset .hint__icon.hint--preset {
    transform: translateX(35px); }
  .task-pro .hints.hints--active .hint--object.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--object.hint--active .hint__box {
      position: absolute;
      height: 264px;
      width: 412px;
      top: 0px;
      left: 6px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--object.hint--active .hint__message {
      position: absolute;
      width: 391px;
      height: 580px;
      left: 431px;
      top: -25px; }
      .task-pro .hints.hints--active .hint--object.hint--active .hint__message .hint__title {
        padding-right: 30px; }
      .task-pro .hints.hints--active .hint--object.hint--active .hint__message::after {
        top: 38px;
        transform: rotateZ(34deg) skew(-19deg); }
  .task-pro .hints.hints--active .hint--duration.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--duration.hint--active .hint__box {
      position: absolute;
      height: 62px;
      width: 412px;
      top: 270px;
      left: 6px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--duration.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 387px;
      height: 85px;
      left: 432px;
      top: 272px; }
      .task-pro .hints.hints--active .hint--duration.hint--active .hint__message::after {
        top: 7px; }
  .task-pro .hints.hints--active .hint--additional.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--additional.hint--active .hint__box {
      position: absolute;
      height: 76px;
      width: 412px;
      bottom: 152px;
      right: 6px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--additional.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 392px;
      height: 160px;
      left: 14px;
      bottom: 152px; }
      .task-pro .hints.hints--active .hint--additional.hint--active .hint__message::after {
        right: -4px;
        bottom: 20px;
        transform: rotateZ(215deg) skew(-18deg);
        top: auto;
        left: auto;
        background-color: #0D4F7F; }
  .task-pro .hints.hints--active .hint--network.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--network.hint--active .hint__box {
      position: absolute;
      height: 158px;
      width: 412px;
      top: 338px;
      left: 6px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--network.hint--active .hint__message {
      position: absolute;
      width: 389px;
      height: 525px;
      left: 433px;
      top: 6px; }
      .task-pro .hints.hints--active .hint--network.hint--active .hint__message::after {
        top: 347px; }
  .task-pro .hints.hints--active .hint--privacy.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--privacy.hint--active .hint__box {
      position: absolute;
      height: 76px;
      width: 411px;
      top: 420px;
      right: 7px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--privacy.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 390px;
      height: 319px;
      left: 15px;
      top: 177px; }
      .task-pro .hints.hints--active .hint--privacy.hint--active .hint__message::after {
        top: 253px;
        transform: rotateZ(215deg) skew(-18deg);
        right: -4px;
        left: auto;
        background-color: #0d4f7f; }
  .task-pro .hints.hints--active .hint--preset-team.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--preset-team.hint--active .hint__box {
      position: absolute;
      height: 65px;
      width: 245px;
      top: 498px;
      left: 6px;
      border-radius: 0;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--preset-team.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 418px;
      left: 264px;
      top: 449px;
      height: fit-content; }
      .task-pro .hints.hints--active .hint--preset-team.hint--active .hint__message .hint__title {
        margin-bottom: 0; }
      .task-pro .hints.hints--active .hint--preset-team.hint--active .hint__message::after {
        top: 55px; }
  .task-pro .hints.hints--active .hint--vpn.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--vpn.hint--active .hint__box {
      position: absolute;
      height: 90px;
      width: 140px;
      top: 405px;
      left: 277px;
      border-radius: 0;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--vpn.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 411px;
      left: 425px;
      top: 405px;
      height: fit-content; }
      .task-pro .hints.hints--active .hint--vpn.hint--active .hint__message .hint__title {
        margin-bottom: 0; }
      .task-pro .hints.hints--active .hint--vpn.hint--active .hint__message::after {
        top: 22px; }
  .task-pro .hints.hints--active .hint--vpn-team.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--vpn-team.hint--active .hint__box {
      position: absolute;
      height: 90px;
      width: 140px;
      top: 405px;
      left: 277px;
      border-radius: 0;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--vpn-team.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 411px;
      left: 425px;
      top: 405px;
      height: fit-content; }
      .task-pro .hints.hints--active .hint--vpn-team.hint--active .hint__message .hint__title {
        margin-bottom: 0; }
      .task-pro .hints.hints--active .hint--vpn-team.hint--active .hint__message::after {
        top: 22px; }
  .task-pro .hints.hints--active .hint--preset.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--preset.hint--active .hint__box {
      position: absolute;
      height: 65px;
      width: 245px;
      top: 498px;
      left: 6px;
      border-radius: 0;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--preset.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 418px;
      left: 264px;
      top: 449px;
      height: fit-content; }
      .task-pro .hints.hints--active .hint--preset.hint--active .hint__message .hint__title {
        margin-bottom: 0; }
      .task-pro .hints.hints--active .hint--preset.hint--active .hint__message::after {
        top: 55px; }
  .task-pro .hints.hints--active .hint--env.hint--active {
    z-index: 10;
    display: block; }
    .task-pro .hints.hints--active .hint--env.hint--active .hint__box {
      position: absolute;
      height: 332px;
      width: 412px;
      top: 0;
      left: auto;
      right: 6px;
      border-radius: 2px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4); }
    .task-pro .hints.hints--active .hint--env.hint--active .hint__message {
      display: block;
      position: absolute;
      width: 395px;
      height: 545px;
      left: 10px;
      top: 0; }
      .task-pro .hints.hints--active .hint--env.hint--active .hint__message::after {
        top: 11px;
        right: -3px;
        left: auto;
        box-shadow: 1px -1px 0 0 #328fc9;
        transform: rotateZ(34deg) skew(-20deg); }

.task-pro .hints .hint__icon {
  position: absolute;
  right: 59px;
  top: -30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: top 0.5s linear, right 0.5s linear, opacity 0.2s linear, visibility 0.2s linear;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5; }
  .task-pro .hints .hint__icon.hint--hidden {
    opacity: 0;
    visibility: hidden; }
  .task-pro .hints .hint__icon:hover {
    z-index: 11;
    cursor: pointer; }
  .task-pro .hints .hint__icon::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .task-pro .hints .hint__icon .pulse-1,
  .task-pro .hints .hint__icon .pulse-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff;
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform, opacity; }
  .task-pro .hints .hint__icon .pulse-1 {
    animation: hint-pulse 2s linear infinite forwards; }
  .task-pro .hints .hint__icon .pulse-2 {
    animation: hint-pulse 2s linear 1s infinite forwards; }

.task-pro .hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; }
  .task-pro .hint .hint__message {
    display: block;
    z-index: 0;
    border: 1px solid #328fc9;
    background: linear-gradient(139.99deg, #0e5385 11.85%, #0d4f7f 84.08%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.19);
    border-radius: 2px;
    box-sizing: border-box;
    padding: 12px; }
    .task-pro .hint .hint__message::after {
      content: '';
      position: absolute;
      top: 50%;
      left: -4px;
      width: 10px;
      height: 10px;
      background: #105385;
      transform: rotateZ(34deg) skew(-18deg);
      border-radius: 2px;
      box-shadow: -1px 1px 0 0 #328fc9; }
    .task-pro .hint .hint__message ul {
      padding-left: 23px;
      padding-right: 23px;
      margin: 0; }
      .task-pro .hint .hint__message ul li {
        margin-bottom: 20px; }
        .task-pro .hint .hint__message ul li:last-child {
          margin-bottom: 0; }
    .task-pro .hint .hint__message .hint__title {
      font-weight: 500;
      font-size: 22px;
      line-height: 29px;
      color: #fff;
      margin-bottom: 18px; }
    .task-pro .hint .hint__message .hint__sub-title {
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
      color: #64e6ff;
      margin-bottom: 8px; }
    .task-pro .hint .hint__message .hint__text,
    .task-pro .hint .hint__message .hint__list {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #e9fbff; }
    .task-pro .hint .hint__message ul.hint__list {
      padding: 0;
      margin: 0;
      list-style: none; }
      .task-pro .hint .hint__message ul.hint__list li {
        padding-left: 15px;
        position: relative;
        margin-bottom: 4px; }
        .task-pro .hint .hint__message ul.hint__list li:last-child {
          margin-bottom: 0; }
        .task-pro .hint .hint__message ul.hint__list li::before {
          content: '';
          position: absolute;
          left: 0;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          top: 7px;
          background: #64e6ff; }
    .task-pro .hint .hint__message .hint__sub {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #e9fbff;
      opacity: 0.7; }

@keyframes hint-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; }
  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0; } }