.supporting-documents-types-list {
  margin: 20px 0 30px;
  width: 100%;

  .panel-header span {
    font-weight: 600;
  }

  .types-list {
    display: flex;
    flex-direction: column;

    .groups {
      p {
        margin-left: 15px;
        margin-right: 15px;
      }
      .fab-alert {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        span {
          margin-left: 20px;
          margin-right: 20px;
          width: 66.66666666666666%;
        }

        .fab-button {
          margin-top: 15px;
          margin-right: 20px;
          max-width: 200px;
          background-color: var(--secondary-dark);
          border-color: var(--secondary-dark);
          color: var(--secondary-text-color);
        }
      }
    }

    .title {
      margin-bottom: 1.6rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      h3 {
        margin-left: 15px;
        display: inline-block;
      }
      .fab-button {
        margin-top: 15px;
        margin-right: 20px;
        background-color: var(--secondary-dark);
        border-color: var(--secondary-dark);
        color: var(--secondary-text-color);
      }
    }

    table {
      thead > tr {
        th.group-name,
        th.name {
          width: 40%
        }
        th.actions {
          width: 20%;
        }
      }
    }

    .document-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min-content, 50rem));
      gap: 1.6rem;

      &-item {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        .type {
          @include text-sm;
        }
        .file {
          padding: 0.8rem 0.8rem 0.8rem 1.6rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid var(--gray-soft-dark);
          border-radius: var(--border-radius);
          p { margin: 0; }
        }
      }
    }

    .no-types-info {
      text-align: center;
    }
  }
}