.panel-navigation-loading[hidden],
body.is-panel-loading:not(.is-panel-preparing) #panelPageContent {
  display: none !important;
}
body.is-panel-preparing #panelPageContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.panel-navigation-error {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000000;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: calc(100vw - 40px);
  padding: 16px;
  border: 2px solid var(--background3);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
}
.panel-navigation-error button {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--background3);
  color: var(--text);
}
.panel-navigation-loading {
  position: fixed;
  box-sizing: border-box;
  top: 75px;
  left: var(--sidebar-layout-width, 400px);
  right: 0;
  bottom: 0;
  background: var(--background);
  z-index: 9999998;
}
.panel-navigation-loading .loader {
  --color-1: var(--background3);
  --size: 1px;
  width: calc(8 * var(--size));
  height: calc(40 * var(--size));
  border-radius: calc(4 * var(--size));
  display: block;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  color: var(--color-1);
  box-sizing: border-box;
  animation: panel-animloader 0.3s 0.3s linear infinite alternate;
}
.panel-navigation-loading .loader::after,
.panel-navigation-loading .loader::before {
  content: '';
  width: calc(8 * var(--size));
  height: calc(40 * var(--size));
  border-radius: calc(4 * var(--size));
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(20 * var(--size));
  box-sizing: border-box;
  animation: panel-animloader 0.3s 0.45s linear infinite alternate;
}
.panel-navigation-loading .loader::before {
  left: calc(-20 * var(--size));
  animation-delay: 0s;
}
@keyframes panel-animloader {
  0% {
    height: calc(48 * var(--size));
  }
  100% {
    height: calc(4 * var(--size));
  }
}
@media (max-width: 768px) {
  .panel-navigation-loading {
    left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel-navigation-loading .loader,
  .panel-navigation-loading .loader::before,
  .panel-navigation-loading .loader::after {
    animation: none;
  }
}