.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}






.bd-mode-toggle {
  z-index: 1500;
}

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}



.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}

html {
  /* Reserve the vertical scrollbar's gutter on every page, whether or not
     it currently overflows. Without this, pages that don't need to scroll
     report a wider viewport than pages that do, and the fixed-position
     sidebar (width is a % of viewport) ends up a few px different between
     pages depending on their content height. */
  scrollbar-gutter: stable;
}

body {
  height: 100%;
}

.sidebar-toggle-btn {
  margin-right: 10px;
  padding: 2px 6px;
}

aside {
  position: fixed;
  overflow: auto;
  height: calc(100vh - 12px);
  justify-content: flex-start;
  align-self: flex-start;
}

aside .nav-link {
  white-space: nowrap;
}

.brand-first {
  color: #ff8c00;
  font-weight: bold;
}

.brand-second {
  color: #ffffff;
  font-weight: bold;
}

nav {
  position: sticky;
}

main {
  position: relative;
  overflow: visible;
  margin-left: auto;
  justify-content: flex-end;
  align-self: flex-end;
}

/* Make solid "primary" treatments (active nav-pill, filled buttons, sidebar
   active highlight) follow each theme's accent color, same as .btn-outline-primary
   already does. Themes that don't set --bs-primary-contrast-color keep the
   default Bootstrap blue + white text untouched. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: var(--bs-primary-contrast-color, #fff);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-color: var(--bs-primary-contrast-color, #fff);
  --bs-btn-hover-color: var(--bs-primary-contrast-color, #fff);
  --bs-btn-active-color: var(--bs-primary-contrast-color, #fff);
}

.sidebar-link-active {
  background-color: var(--bs-primary);
  color: var(--bs-primary-contrast-color, #fff) !important;
}

/* Flash-message toasts default to the theme's accent color rather than
   Bootstrap's static blue, same as .btn-primary above. Success/danger/warning
   toasts keep Bootstrap's semantic colors since those meanings shouldn't
   shift with the accent theme. */
.toast.text-bg-primary {
  --bs-toast-bg: var(--bs-primary);
  --bs-toast-color: var(--bs-primary-contrast-color, #fff);
}

/* By default a Bootstrap card/dropdown-menu background equals the page
   background exactly, with only a faint translucent border for definition
   - easy to lose track of against dark pages. Give both a background that's
   always nudged away from the body background (lighter in dark themes,
   darker in light ones, since --bs-emphasis-color flips with the theme) and
   swap the near-invisible translucent border for the theme's solid one. */
.card {
  --bs-card-bg: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 6%);
  --bs-card-border-color: var(--bs-border-color);
}

.dropdown-menu {
  --bs-dropdown-bg: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 8%);
  --bs-dropdown-border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
}