.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);
}

/* Bootstrap bakes .btn-success/.btn-danger backgrounds to static hex at build
   time, same as .btn-primary above, so they don't pick up --bs-success/
   --bs-danger overrides on their own. */
.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-info {
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

.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);
}

/* TradingView's own colorTheme:"dark" param has proven unreliable in the wild
   (confirmed: some visitors get TradingView's light rendering back regardless
   of the param, even in a clean incognito session with the OS set to dark -
   likely a per-visitor decision made inside TradingView's own iframe that we
   have no way to inspect or override from the embedding page, since the
   widget is cross-origin). Rather than depend on that, request TradingView's
   light theme (their best-tested, default-supported state) and force it dark
   ourselves with a CSS filter, which is 100% within our control and immune to
   whatever TradingView decides to do server-side.
   invert()/hue-rotate() alone can't tint the resulting near-black/white pixels
   toward the theme's own surface color - hue-rotate has nothing to rotate on
   a desaturated (gray/black/white) pixel, and the inverted widget's own
   background lands much darker than the page's actual card surface - so a
   separate, unfiltered tint overlay (.tv-widget-tint) sits on top of the
   filtered widget to blend it toward the same color .card itself uses
   (see the .card rule above). The tint has to be a sibling of the filtered
   element, not a descendant, otherwise the filter would distort its color too.
   Settled on plain alpha at 0.6 after trying two other approaches that both
   read worse in practice: var(--bs-body-bg) at low opacity left it too close
   to black, and mix-blend-mode:overlay pushed toward the true navy body
   color but crushed contrast on the widget's own text and red/green accents.
   At 0.6, alpha blending also flattens contrast on the widget's own content
   (it pulls light text down and dark background up toward the same tint
   color), reading as pale/washed out - so contrast()/saturate() are boosted
   on the filtered widget itself, before the tint is applied, to give it more
   punch to lose in the blend. */
.tv-widget-frame {
  position: relative;
}
.tv-widget-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--bs-body-bg), var(--bs-emphasis-color) 6%);
  opacity: 0;
}
.tv-widget-frame.tv-dark .tradingview-widget-container {
  filter: invert(0.9) hue-rotate(180deg) contrast(1.3) saturate(1.15);
}
.tv-widget-frame.tv-dark .tv-widget-tint {
  opacity: 0.6;
}

/* Fixed-width middle/last columns so rows with a shorter first column
   (e.g. issuer name) don't shift the amount/badge columns out of vertical
   alignment with the rows above/below them, as plain flex justify-content-between
   sizes each row independently based on its own content. */
.list-group-item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr) auto;
}