.PageLayout {
  $spacing: $padding * 2;
  --width: 60%;
  --max-width: 1000px;
  --min-width: 570px;

  position: relative;
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-rows: min-content 1fr;

  // covers whole app view area
  &.top {
    position: fixed !important; // allow to cover ClustersMenu
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: $mainBackground;

    // adds extra space for traffic-light top buttons (mac only)
    .is-mac & > .header {
      padding-top: $spacing * 2;
    }
  }

  > .header {
    position: sticky;
    padding: $spacing;
    background-color: $layoutTabsBackground;
  }

  > .content-wrapper {
    overflow: auto;
    padding: $spacing * 2;
    display: flex;
    flex-direction: column;

    > .content {
      flex: 1;
      margin: 0 auto;
      width: var(--width);
      min-width: var(--min-width);
      max-width: var(--max-width);
    }
  }

  h2:not(:first-of-type) {
    margin-top: $spacing;
  }

  p {
    line-height: 140%;
  }

  a {
    color: $colorInfo;
  }

  .SubTitle {
    text-transform: none;
    margin-bottom: 0 !important;

    + * + .hint {
      margin-top: -$padding / 2;
    }
  }

  .Select {
    &__control {
      box-shadow: 0 0 0 1px $borderFaintColor;
    }
  }
}