#user-auth-info {
  .react-loading-skeleton {
    height: 180px;
  }

  & > h2 {
    @include card-header;
  }

  & > .card {
    position: relative;
    padding: 2rem 1.5rem 3rem;

    @include media-breakpoint-up(lg) {
      padding: 3.5rem 5.3rem 3rem 3rem;
    }

    & > .message-box-spacer {
      padding-bottom: var(--spacing-s);

      .message > p > p {
        margin-bottom: var(--spacing-xs);
      }
    }

    h3 {
      @include small-header;
    }

    & > section {
      & > header {
        margin-bottom: 1.5rem;

        @include media-breakpoint-up(md) {
          margin-bottom: 2rem;
        }
      }
    }

    .divider {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    .row-box {
      &:not(:last-of-type) {
        margin-bottom: 1rem;
      }

      & > p {
        @include regular-text;
      }

      & > .right {
        display: flex;
        flex-flow: row nowrap;
        margin-left: auto;
        column-gap: 2rem;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100%;

        & > span {
          height: 14px;
          display: block;
          margin: 0;
          padding: 0;

          @include typography-legacy(12px, 14px, medium, var(--gray-light));
        }
      }
    }

    & > .password {
      & > header {
        width: 100%;
        text-align: left;
      }
    }

    & > .mfa {
      & > header {
        width: 100%;
        position: relative;
        user-select: none;

        & > .edit-mfa {
          position: absolute;
          top: 0;
          right: 1.7rem;
        }
      }

      & > .row {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-content: center;
        align-items: center;

        & > p {
          @include regular-text;
        }

        & > .info {
          @include label-text;

          margin-left: auto;
        }
      }
    }

    & > .recovery {
      & > .row {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;

        & > p {
          @include regular-text;

          &.info {
            @include label-text;

            margin-left: auto;
          }
        }
      }
    }
  }
}
