.tasks {
  &__head {
    &__persons {
      position: relative;
      display: flex;
      align-items: center;

      @media (max-width: 700px) {
        right: -15px;
      }

      @media (max-width: 465px) {
        width: 100%;
      }

      .projectPersons {
        display: flex;
        position: relative;
        left: 5px;

        img {
          position: relative;
          display: flex;
          width: 32px;
          height: 32px;
        }

        img:nth-child(1) {
          left: -5px;
        }

        img:nth-child(2) {
          left: -10px;
        }
        img:nth-child(3) {
          left: -15px;
        }
      }

      .onePerson {
        display: flex;
        position: relative;
        left: -15px;

        img {
          position: relative;
          display: flex;
          width: 32px;
          height: 32px;
        }
      }

      span {
        width: 32px;
        height: 32px;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        position: relative;
        display: flex;
      }

      .countPersons {
        color: #252c32;
        border: 1px solid #dde2e4;
        background: white;
        left: -20px;
      }

      .add-person {
        background: #00c5a8;
        color: white;
        font-size: 14px;
        transition: all 0.15s ease;
        left: -28px;
        z-index: 2;
        cursor: pointer;

        &:hover {
          background: #10d5bb;
        }
      }

      p {
        position: relative;
        left: -25px;
        font-weight: 300;
        font-size: 14px;
        line-height: 17px;
        max-width: 125px;
      }

      .persons__list {
        position: absolute;
        z-index: 8;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
        border-radius: 20px;
        padding: 20px;
        cursor: default;
        width: 700px;

        &__close {
          cursor: pointer;
          position: absolute;
          right: 20px;
          top: 20px;
          margin-left: auto;
          width: 35px;
          height: 35px;
        }

        &__count {
          display: flex;
          align-items: end;
          color: #1458dd;
          font-size: 22px;
          span {
            font-size: 44px;
            font-weight: 700;
            line-height: 30px;
            width: auto;
            height: auto;
            margin-right: 5px;
          }
        }

        &__info {
          display: flex;
          margin: 10px 0;
          align-items: center;

          span {
            display: flex;
            width: auto;
            font-size: 18px;
            line-height: 22px;
            color: #263238;
            font-weight: 500;
            white-space: nowrap;
          }

          p {
            color: #1458dd;
            font-weight: 600;
            font-size: 18px;
            line-height: 22px;
            display: flex;
            max-width: 250px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 30px;
          }
        }

        &__items {
          display: flex;
          flex-wrap: wrap;
          row-gap: 10px;
          column-gap: 30px;
          margin-bottom: 10px;
        }

        &__item {
          display: flex;
          align-items: center;
          max-width: 300px;
          width: 100%;

          .avatar {
            width: 38px;
            height: 38px;
            margin-right: 12px;
          }

          span {
            display: block;
            font-weight: 500;
            font-size: 15px;
            line-height: initial;
            color: #807777;
            width: auto;
            height: auto;
            max-width: 280px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .delete {
            cursor: pointer;
            width: 20px;
            height: 20px;
          }
        }

        &__add {
          display: flex;
          margin-left: 3px;
          cursor: pointer;

          span {
            background: #8bcc60;
            left: 0;
          }

          p {
            margin-left: 17px;
            color: #000000;
            font-weight: 400;
            font-size: 16px;
            line-height: 32px;
            position: initial;
            max-width: none;
          }
        }

        @media (max-width: 1000px) {
          width: 390px;
          padding: 30px;

          .persons__list__info {
            margin: 10px;
          }

          .persons__list__items {
            flex-direction: column;
            margin-bottom: 20px;
            row-gap: 15px;

            .persons__list__item {
              max-width: none;
              span {
                max-width: none;
                width: 100%;
              }
            }
          }
        }

        @media (max-width: 440px) {
          width: 290px;
          padding: 15px 20px;
        }
      }
    }
  }
}
