#network-overview-page {
  .page-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-gutter: stable;
    overflow-x: hidden;
    overflow-y: auto;

    --page-padding: var(--spacing-s);
    --page-row-spacing: var(--spacing-s);

    @include media-breakpoint-down(xl) {
      padding-top: var(--spacing-s);
      padding-bottom: var(--spacing-s);
      overflow: auto;
    }

    @include media-breakpoint-up(lg) {
      --page-padding: var(--spacing-xl);
      --page-row-spacing: var(--spacing-m);
    }

    & > .gateways-status-info {
      padding: 0 var(--page-padding) var(--spacing-s);
    }

    & > .overview-network-stats {
      padding: 0 var(--page-padding) var(--page-row-spacing);
    }

    & > .mobile-options {
      display: flex;
      flex-direction: column;
      row-gap: 1.5rem;
      box-sizing: border-box;
      padding: 0 2rem;
      margin-bottom: 3rem;
      align-items: flex-end;

      & > .top-row {
        width: 100%;
        display: flex;
        flex-flow: row wrap-reverse;
        align-items: center;
        justify-content: flex-start;
        row-gap: 10px;

        & > .btn {
          margin-left: auto;

          .content {
            span {
              white-space: nowrap;
            }
          }
        }

        & > .network-gateways-connection {
          width: auto;
        }
      }

      & > .select {
        width: 100%;
      }
    }

    & > header {
      box-sizing: border-box;
      padding-bottom: var(--page-row-spacing);

      @include media-breakpoint-up(md) {
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
      }

      @include media-breakpoint-up(lg) {
        padding-top: var(--page-padding);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: var(--spacing-s);
      }

      @include media-breakpoint-up(xxl) {
        column-gap: var(--spacing-m);
        grid-template-rows: auto;
        grid-template-columns: auto 1fr;
      }

      h1 {
        @include typography-legacy(41px, 57px, semiBold, var(--text-main), 'Poppins');

        grid-column: 1;
        grid-row: 1;
      }

      & > .controls {
        @include media-breakpoint-up(lg) {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: flex-start;
          align-content: center;
          width: 100%;
          column-gap: 3rem;
          grid-row: 2;
          grid-column: 1;
        }

        @include media-breakpoint-up(xxl) {
          grid-row: 1;
          grid-column: 2;
        }

        & > .select {
          min-width: 160px;
        }

        & > button {
          margin-left: auto;
        }

        & > .select-skeleton {
          width: 200px;
          height: 40px;

          & > span {
            height: 100%;
          }
        }
      }
    }

    .bottom-row {
      display: flex;
      flex-flow: column;
      box-sizing: border-box;
      padding: 0 calc(var(--page-padding) - 10px) var(--spacing-s) var(--page-padding);
      row-gap: var(--spacing-s);

      & > .no-data {
        width: 100%;
        padding-top: var(--spacing-m);
        text-align: center;
      }
    }

    h1 {
      @include typography-legacy(41px, 57px, semiBold, var(--text-main), 'Poppins');
    }

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

  .stats-loader {
    grid-row: 1;
    grid-column: span 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    @include media-breakpoint-up(lg) {
      grid-row: 1;
    }
  }
}
