:root {
    --header-height: 6rem;
    --content-height: calc(100vh - var(--header-height));
  }
  /* Sidenav loader */
  #sidenav-loader {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-right: 1rem;
    color: #222;
    font-size: 0.95rem;
    background: transparent;
    /* ensure loader sits where the nav control is */
  }

  /* show loader while page is flagged loading */
  .chi-loading #sidenav-loader {
    display: flex;
  }

  /* Hide loader on small screens (mobile nav used under 1200px) */
  @media (max-width: 1199px) {
    .chi-loading #sidenav-loader {
      display: none !important;
    }
  }

  /* keep nav hidden while loading (existing behaviour) */
  .chi-loading #global-nav,
  .chi-loading #mobile-nav,
  .chi-loading #toggle-nav {
    visibility: hidden !important;
    pointer-events: none;
  }

  .sidenav-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0,0,0,0.12);
    border-top-color: rgba(0,0,0,0.8);
    border-radius: 50%;
    display: inline-block;
    animation: sideload-spin 0.9s linear infinite;
  }

  @keyframes sideload-spin {
    to { transform: rotate(360deg); }
  }

  /*
  * PAGE LAYOUT STYLES
  */

  /* Selector for the div that has the main layout */
  .docs-page-container .root.container .container:has(div:has(> #header-container)) {
    padding-top: var(--header-height);
    /* Leave space for the sticky header */
  }

  /* Sticky header */
  div:has(> #header-container) {
    position: sticky;
    top: 0;
    z-index: 2000;
    height: var(--header-height);
  }

  #header-container {
    height: var(--header-height);
  }

  /* Main layout wrapper */
  div:has(> #main-layout-wrapper) {
    display: flex;
  }

  #main-layout-wrapper {
    display: flex;
  }

  /* Content */

  .content-container {
    flex-grow: 1;
    padding: 2rem 1rem;
  }

  /** 
  * SIDE NAVIGATION 
  **/

  /* Remove margin for first item, causing sidenav to be separated from header */
  .sideNavigation .chi-sidenav.-global .chi-sidenav__content nav .chi-sidenav__list>li:first-of-type {
    margin: 0;
    padding-top: 0.375rem;
  }

  .sidenav-container {
    position: sticky;
    top: var(--header-height);
    flex-shrink: 0;
    height: var(--content-height);
  }

  .sidenav-container div:has(#global-nav) {
    height: 100%;
  }
  .sideNavigation #toggle-nav .chi-button span{
    width: 30px;
    height: 30px;
    display: inline-block;
    background: url("../../../../content/dam/docs/images/img-nav-icon-open.svg") no-repeat center center;
  }
  .sideNavigation #toggle-nav .chi-button span:hover{
    background: url("../../../../content/dam/docs/images/img-nav-icon-open-hover.svg") no-repeat center center;
  }  

  .sideNavigation #toggle-nav .chi-button.-rotate--180 span{
    transform: rotate(180deg);
  }

  #global-nav {
    overflow-y: scroll;
  }
  .sideNavigation  #global-nav{
    width: 20.25rem;
  }
  /* Hide side navigation when collapsed */
  #global-nav.-collapsed {
    display: none;
  }

  /** 
* MOBILE NAVIGATION 
**/

  @media (max-width: 1199px) {
    #main-layout-wrapper>div:has(div > .sideNavigation) {
      position: relative;
    }

    #global-nav,
    #toggle-nav .chi-button {
      display: none;
    }

    /* #global-nav, #toggle-nav .chi-button,
    .docs_header .chi-header__end > div {
      display: none;
    } */

  }

  #mobile-nav .chi-drawer.-left,
  #mobile-nav .chi-backdrop.-animated {
    top: var(--header-height);
  }

  #mobile-nav-drawer .chi-drawer__footer {
    padding: 0;
  }

  #mobile-nav-drawer .chi-drawer__footer div[slot="footer"] {
    width: 100%;
    display: flex;
    gap: 0.0625rem;
    flex-direction: column;
  }