:root {
  --portal-navbar-height: 57px;
  --portal-footer-height: 2.5rem;
  --portal-sidebar-width: 260px;
}

body {
  min-height: 100vh;
  padding-bottom: calc(var(--portal-footer-height) + 0.5rem);
}

.card {
  backdrop-filter: blur(4px);
}

.portal-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.portal-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--portal-footer-height);
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(18, 18, 18, 0.95);
  z-index: 1020;
}

.portal-sidebar {
  position: fixed;
  top: var(--portal-navbar-height);
  bottom: var(--portal-footer-height);
  left: 0;
  width: var(--portal-sidebar-width);
  overflow-y: auto;
  background: rgba(22, 22, 22, 0.95);
  z-index: 1010;
}

.portal-sidebar-open-btn {
  position: fixed;
  left: 0.75rem;
  top: calc(var(--portal-navbar-height) + 0.75rem);
  z-index: 1025;
  display: none;
}

.portal-app-link {
  transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.portal-app-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

@media (min-width: 992px) {
  body.portal-auth-layout main {
    margin-left: var(--portal-sidebar-width);
  }

  body.portal-auth-layout main.container {
    max-width: none;
    width: calc(100% - var(--portal-sidebar-width));
    margin-right: 0;
  }

  body.portal-auth-layout.portal-sidebar-collapsed .portal-sidebar {
    display: none;
  }

  body.portal-auth-layout.portal-sidebar-collapsed main {
    margin-left: 0;
  }

  body.portal-auth-layout.portal-sidebar-collapsed main.container {
    width: 100%;
  }

  body.portal-auth-layout.portal-sidebar-collapsed .portal-sidebar-open-btn {
    display: inline-flex;
  }
}

@media (max-width: 991.98px) {
  .portal-sidebar {
    display: block;
    transform: translateX(-100%);
    transition: transform 160ms ease-in-out;
    z-index: 1040;
  }

  body.portal-auth-layout.portal-sidebar-mobile-open .portal-sidebar {
    transform: translateX(0);
  }

  body.portal-auth-layout.portal-sidebar-mobile-open .portal-sidebar-open-btn {
    display: inline-flex;
  }
}

[data-bs-theme="dark"] .portal-json-editor,
[data-bs-theme="dark"] .portal-json-editor .well,
[data-bs-theme="dark"] .portal-json-editor .card,
[data-bs-theme="dark"] .portal-json-editor fieldset {
  background-color: #1b1f24;
  color: #e9ecef;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .portal-json-editor label,
[data-bs-theme="dark"] .portal-json-editor legend,
[data-bs-theme="dark"] .portal-json-editor h1,
[data-bs-theme="dark"] .portal-json-editor h2,
[data-bs-theme="dark"] .portal-json-editor h3,
[data-bs-theme="dark"] .portal-json-editor h4,
[data-bs-theme="dark"] .portal-json-editor h5,
[data-bs-theme="dark"] .portal-json-editor h6,
[data-bs-theme="dark"] .portal-json-editor p,
[data-bs-theme="dark"] .portal-json-editor .help-block,
[data-bs-theme="dark"] .portal-json-editor .text-muted {
  color: #d0d6dc !important;
}

[data-bs-theme="dark"] .portal-json-editor input,
[data-bs-theme="dark"] .portal-json-editor select,
[data-bs-theme="dark"] .portal-json-editor textarea {
  background-color: #0f1419;
  color: #f1f3f5;
  border-color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .portal-json-editor input:focus,
[data-bs-theme="dark"] .portal-json-editor select:focus,
[data-bs-theme="dark"] .portal-json-editor textarea:focus {
  background-color: #0f1419;
  color: #f1f3f5;
  border-color: #6ea8fe;
  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}

[data-bs-theme="dark"] .portal-json-editor .btn {
  border-color: rgba(255, 255, 255, 0.2);
}