/* ============================================================================
   HEADER & MENUS - BASE SETUP
   ============================================================================ */
   :root
   {
       --layout-flex-offset: 0px;
       --header-height-fallback: 68px;
       --dynamic-header-height: var(--header-height-fallback);
       --dynamic-header-height-desktop: 0px;
       --dynamic-header-height-mobile: 0px;
   }
   
   #UpperMenuDesktopSection,
   #MainHeaderMenu,
   #FactionCarouselController,
   #LowerMenuContainer,
   #AlertBarContainer
   {
       will-change: transform;
       backface-visibility: hidden;
   }
   .loading
   {
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
   }
   
   /* ============================================================================
      RESPONSIVE LAYOUT CLASSES (Controlled by JS & CSS Variables)
      ============================================================================ */

   .adjustMarginFromTopMenus,
   .d-adjustMarginFromTopMenus,
   .m-adjustMarginFromTopMenus
   {
       margin-top: var(--dynamic-header-height, var(--header-height-fallback));
   }

   .adjustPaddingFromTopMenus,
   .d-adjustPaddingFromTopMenus,
   .m-adjustPaddingFromTopMenus
   {
       padding-top: var(--dynamic-header-height, var(--header-height-fallback));
   }
   
   .belowMenu,
   .belowHeader
   {
       top: 0;
   }
   .stickyBelowMenu,
   .stickyBelowHeader
   {
       top: 0;
   }
   .scrnhAvailable
   {
       height: calc(100vh - var(--layout-flex-offset));
       height: calc(100dvh - var(--layout-flex-offset));
   }
   @media screen and (min-width: 1001px)
   {
       .d-adjustMarginFromTopMenus
       {
           margin-top: var(--dynamic-header-height-desktop, var(--header-height-fallback));
       }
       .d-adjustPaddingFromTopMenus
       {
           padding-top: var(--dynamic-header-height-desktop, var(--header-height-fallback));
       }
       .d-belowMenu,
       .d-belowHeader
       {
           top: 0;
       }
       .d-stickyBelowMenu,
       .d-stickyBelowHeader
       {
           top: 0;
       }
       .d-scrnhAvailable
       {
   
           height: calc(100vh - var(--layout-flex-offset));
           height: calc(100dvh - var(--layout-flex-offset));
       }
   }
   @media screen and (max-width: 1000px)
   {
       .m-adjustMarginFromTopMenus
       {
           margin-top: var(--dynamic-header-height-mobile, var(--header-height-fallback));
       }
       .m-adjustPaddingFromTopMenus
       {
           padding-top: var(--dynamic-header-height-mobile, var(--header-height-fallback));
       }
       .m-belowMenu,
       .m-belowHeader
       {
           top: 0;
       }
       .m-stickyBelowMenu,
       .m-stickyBelowHeader
       {
           top: 0;
       }
       .m-scrnhAvailable
       {
   
           height: calc(100vh - var(--layout-flex-offset));
           height: calc(100dvh - var(--layout-flex-offset));
       }
   }