.modal-access-user {
  width: 70vw !important;
  max-width: 70vw !important;
  top: 45% !important;

  .body {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .uid {
      margin-top: auto;
      @include helper-small-1;
    }

    > .row-info {
      display: flex;
      gap: 16px;

      .col-profile {
        display: flex;
        flex-direction: column;
        flex: 1;

        > .title {
          @include label-large-2;
          color: var(--text-primary);
          margin-bottom: 16px;
        }

        .info {
          display: flex;
          padding-bottom: 16px;
          gap: 32px;

          .avatar {
            width: 64px;
            height: 64px;
          }

          .texts {
            display: flex;
            flex-direction: column;
            gap: 16px;

            > span {
              display: block;
            }
          }
        }

        .access-container {
          display: flex;
          flex-direction: column;
          padding-top: 16px;
          border-top: 1px solid var(--border-subtle-1);
          gap: 16px;

          > .header {
            display: flex;
            flex-direction: column;

            > .title {
              @include label-large-2;
              color: var(--text-primary);
            }

            > .desc {
              @include body-medium-1;
              color: var(--text-secondary);
            }
          }

          > .body {
            display: flex;
            flex-direction: column;
            gap: 16px;

            > .ds-button {
              margin-left: auto;
            }
          }
        }
      }

      .portal-container {
        flex: 1;
        border-left: var(--border-default);
        padding-left: 16px;

        > .header {
          display: flex;
          flex-direction: column;

          > .title {
            @include label-large-2;
            color: var(--text-primary);
          }

          > .desc {
            @include body-medium-1;
            color: var(--text-secondary);
          }
        }

        > .body {
          display: flex;
          flex-direction: column;
          padding-top: 16px;
          gap: 16px;

          > .ds-button {
            margin-left: auto;
          }
        }
      }

      .corpora-container {
        flex: 1.5;
        padding: 0px 16px;
        border-left: var(--border-default);
        max-height: 60vh;
        overflow-y: auto;

        > .title {
          @include label-large-2;
          color: var(--text-primary);
          margin-bottom: 16px;
        }

        .corpus-line {
          display: flex;
          align-items: center;
          margin-top: 24px;
          border-bottom: var(--border-default);
          padding-bottom: 8px;

          .avatar {
            width: 40px;
            height: 40px;
            margin-right: 24px;
          }

          > span {
            @include body-xmedium-1;
          }

          > .ds-button {
            margin-left: auto;
          }
        }
      }
    }
  }
}

.modal-footer {
  > .btn {
    margin-left: auto;
  }
}

@media (max-width: 1366px) {
  .modal-access-user {
    top: 50% !important;
  }
}

@media (max-width: 768px) {
  .modal-access-user {
    width: 90vw !important;
    max-width: 90vw !important;
    top: 30% !important;

    .body {
      flex-direction: column;

      .corpora-container {
        border-left: none;
        border-top: var(--border-default);
        padding: 16px 0px 0px;
      }
    }
  }
}

@media (max-width: 767px) {
  .modal-access-user {
    top: 35% !important;
  }
}