/* ============================================================================
   HEADER & MENUS - BASE SETUP
   ============================================================================ */
   :root
   {
       --layout-flex-offset: 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)
      ============================================================================ */
   
   .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-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-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));
       }
   }