/* Custom styles goes here */

/* Global navigation loading overlay */
#nav-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

#nav-loading-overlay.nav-loading-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.nav-loading-spinner .spinner-border {
  width: 3rem;
  height: 3rem;
}

@media (min-width: 1200px) {
  .layout-menu-fixed.layout-menu-collapsed .layout-page,
  .layout-menu-fixed-offcanvas.layout-menu-collapsed .layout-page {
    padding-left: 5.25rem;
  }

  .layout-navbar-fixed.layout-menu-collapsed .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
  .layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
  .layout-menu-fixed-offcanvas.layout-navbar-fixed.layout-menu-collapsed .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
    left: 5.25rem;
  }

  .layout-footer-fixed.layout-menu-collapsed .layout-wrapper:not(.layout-without-menu) .content-footer {
    left: 5.25rem;
  }

  .layout-menu .app-brand .app-brand-img-collapsed {
    display: none;
  }

  .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand .app-brand-img {
    display: none;
  }

  .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand .app-brand-img-collapsed {
    display: block;
  }

  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .app-brand .layout-menu-toggle {
    opacity: 1 !important;
  }

  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu:hover .app-brand {
    width: 16.25rem;
  }

  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu:hover .app-brand .layout-menu-toggle {
    inset-inline-start: calc(16.25rem - 1.5rem);
  }

  .layout-menu-collapsed .app-brand-logo-full {
    display: none !important;
  }

  .layout-menu-collapsed .app-brand-logo-compact {
    display: inline-block !important;
  }
}