/* The sidebar and top bar have their own Vue owner and survive route changes. */
html.shiwai-app-navigation #shiwaiAppShell > .el-aside {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1001;
}
html.shiwai-app-navigation #shiwaiAppShell .el-header { left: 190px; }
html.shiwai-app-navigation #shiwaiAppOutlet { margin-left: 190px; min-height: 100vh; }
html.shiwai-app-navigation #shiwaiAppOutlet .shiwai-app-page { display: block; }
html.shiwai-app-navigation #mainLoading { display: none !important; }
html.shiwai-app-navigation .shiwai-app-page > .el-container { min-height: 100vh; }
html.shiwai-app-navigation #shiwaiAppShell,
html.shiwai-app-navigation #shiwaiAppShell .el-header,
html.shiwai-app-navigation #shiwaiAppShell .el-aside { view-transition-name: none; }
#shiwaiAppProgress {
  position: fixed;
  top: 0;
  left: 190px;
  z-index: 100000;
  width: 0;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: var(--color-primary, #409eff);
  transition: width 180ms ease, opacity 150ms ease;
}
#shiwaiAppProgress.is-running { width: calc(80% - 190px); opacity: 1; }
html.shiwai-app-loading #shiwaiAppOutlet { cursor: progress; }
@media (max-width: 750px) {
  html.shiwai-app-navigation #shiwaiAppShell > .el-aside { display: none; }
  html.shiwai-app-navigation #shiwaiAppShell .el-header { left: 0; }
  html.shiwai-app-navigation #shiwaiAppOutlet { margin-left: 0; }
  #shiwaiAppProgress { left: 0; }
  #shiwaiAppProgress.is-running { width: 80%; }
}
@media (prefers-reduced-motion: reduce) { #shiwaiAppProgress { transition: none; } }