.project-list-multiple {
  .header-multiple {
    text-transform: inherit;
  }

  .create-new-btn {
    width: 100%;

    &.disabled {
      pointer-events: none;
      background-color: $blue;
      border-color: $blue;
      color: $white;
    }
  }

  .max-list-info {
    font-size: .75rem;
    line-height: 1rem;
    margin-top: 10px;
    color: $red;
  }

  .my-project-list-multiple {
    margin-top: 30px;
  }

  &__item {
    display: block;
    position: relative;
    margin-bottom: 12px;
    background-color: $gray-bg;
    box-shadow: 3px 3px 3px $black-transparent24;
    border-radius: 3px;
    cursor: pointer;

    .item {
      &-header-block {
        display: flex;
        padding: 15px 40px 15px 15px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        background-color: $gray-light;

        .item-header {
          @include make-col(10);
          word-wrap: break-word;
          font-size: 1.125rem;
          font-weight: 500;
          line-height: 1.5rem;
        }

        .action-btn {
          display: flex;

          .btn {
            margin: 0 0 0 10px;
            padding: 0;
            text-decoration: underline;
          }
        }
      }

      &-info-block {
        display: flex;
        flex-direction: column;
        padding: 12px 15px;
        color: $black;

        .item-info {
          &__title {
            font-size: .875rem;
            line-height: 1.375rem;
            margin-right: 10px;
          }

          &__value {
            font-size: 1rem;
            line-height: 1.125rem;
          }

          &:not(:last-child) {
            margin-bottom: 24px;
          }
        }
      }
    }

    .next-btn {
      position: absolute;
      margin: 0;
      padding: 0;
      bottom: 0;
      right: 6px;
      transform: rotate(270deg);

      .fa-chevron-down {
        height: 10px;
        width: 10px;
      }
    }

    &:hover {
      .next-btn {
        color: $blue-darker;
        background-color: transparent;
      }
    }
  }
}

.project-list-confirmation-modal {
  .modal-box__container {
    max-width: 330px;
  }

  .modal-dialog {
    margin-top: 150px;
  }

  .modal-body {
    margin: 20px;

    .modal-box__inner-columns {
      @include make-col(12);
    }

    .modal-box__inner-row {
      margin: 0 -15px;
    }
  }

  .confirmation-question {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .form-row {
    padding: 0;

    &__label {
      margin: 0;
    }

    &__field {
      .tbx {
        @include inputfield;
        font-size: .875rem;
        line-height: 1.57143;
      }
    }

    &__error,
    &__info {
      font-size: .75rem;
    }

    &__info {
      margin: 8px 0 0;
    }

    &_validation-error {
      .tbx_error {
        @include field-error;
      }
    }
  }

  .action-block {
    display: flex;
    margin: 20px -5px 0;

    .btn {
      width: 50%;
      margin: 0 5px;
    }
  }
}

.project-list-multiple,
.project-list-confirmation-modal {
  .btn-primary,
  .btn-secondary {
    font-weight: 700;
  }
}

@include media-breakpoint-up(md) {
  .project-list-multiple {
    .create-new-btn {
      width: auto;
    }

    &__item {
      .item {
        &-header-block {
          padding: 15px;
        }
      }
    }
  }

  .project-list-confirmation-modal {
    .modal-box__container {
      max-width: 720px;
    }
  }
}

@include media-breakpoint-up(lg) {
  .project-list-confirmation-modal {
    .modal-box__container {
      max-width: 784px;
    }
  }

  .project-list-multiple__pagination {
    .content {
      @include make-col(12);
    }
  }
}

@include media-breakpoint-only(md) {
  .project-list-multiple {
    &__item {
      .item {
        &-header-block {
          .item-header {
            @include make-col(9);
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .project-list-multiple {
    &__item {
      .item {
        &-header-block {
          .item-header {
            @include make-col(6);
          }
        }
      }
    }
  }
}