#network-page {
  & > .page-content {
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    padding: 0;
    background-color: var(--white);

    @include media-breakpoint-up(lg) {
      background-color: var(--bg-light);
      padding: 64px 70px 45px;
    }

    & > header {
      display: none;
      height: auto;
      margin-bottom: 5px;
      width: 100%;

      & > h1 {
        user-select: none;

        @include page-header;
      }

      @include media-breakpoint-up(lg) {
        display: block;

        & > h1 {
          line-height: 62px;
        }
      }
    }

    & > .network-card {
      border-radius: 0 15px 15px 15px;
      width: 100%;
      max-width: 100%;
      padding: 30px 20px 20px;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: repeat(3, auto);
      grid-template-columns: 1fr;
      row-gap: 15px;
      grid-template-areas:
        'controls'
        'config'
        'gateway';

      @include media-breakpoint-up(lg) {
        padding: 20px;
        row-gap: 30px;
        column-gap: 30px;
        grid-template-rows: 40px repeat(2, auto);
        grid-template-columns: 1fr;
        grid-template-areas:
          'controls'
          'config'
          'gateway';
      }

      @include media-breakpoint-up(xl) {
        padding: 20px;
        row-gap: 48px;
        column-gap: 57px;
        grid-template-rows: 40px auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          'controls controls'
          'config gateway';
      }

      & > .network-controls {
        grid-area: controls;
      }

      & > .network-config {
        grid-area: config;
      }

      & > .gateway {
        grid-area: gateway;
      }

      & > * {
        width: 100%;
        max-width: 100%;
      }

      header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 7px;
        user-select: none;
        margin-bottom: 20px;

        h2 {
          @include typography-legacy(20px, 30px, semiBold, var(--text-main), 'Poppins');
        }
      }

      .message-box-spacer {
        &:not(:last-child) {
          padding-bottom: 20px;
        }
      }

      form {
        & > * {
          width: 100%;
        }

        & > .message-box-spacer {
          &:not(:last-child) {
            padding-bottom: 32px;
          }
        }

        & > .form-checkbox {
          margin-bottom: 25px;
        }
      }
    }
  }
}
