/* Shared layout primitives for Blazorponents. */
:root {
  --bp-space-1: 0.25rem;
  --bp-space-2: 0.5rem;
  --bp-space-3: 0.75rem;
  --bp-space-4: 1rem;
  --bp-space-5: 1.5rem;
  --bp-space-6: 2rem;
  --bp-space-7: 2.5rem;
  --bp-space-8: 3rem;
  --bp-radius-sm: 8px;
  --bp-radius-md: 12px;
  --bp-radius-lg: 16px;
}

.bp-affix {
  position: fixed;
  top: var(--bp-affix-top, auto);
  right: var(--bp-affix-right, auto);
  bottom: var(--bp-affix-bottom, auto);
  left: var(--bp-affix-left, auto);
  z-index: var(--bp-affix-z, 1000);
  width: var(--bp-affix-width, auto);
  height: var(--bp-affix-height, auto);
  max-width: var(--bp-affix-max-width, none);
  max-height: var(--bp-affix-max-height, none);
  transform: var(--bp-affix-transform, none);
}

.bp-sticky {
  position: sticky;
  top: var(--bp-sticky-top, auto);
  right: var(--bp-sticky-right, auto);
  bottom: var(--bp-sticky-bottom, auto);
  left: var(--bp-sticky-left, auto);
  z-index: var(--bp-sticky-z, 10);
  background: var(--bp-sticky-bg, transparent);
  box-shadow: var(--bp-sticky-shadow, none);
}

.bp-app-shell {
  min-height: 100vh;
  background: var(--bp-app-shell-bg, var(--bp-surface));
  color: var(--bp-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: var(--bp-app-shell-auto-flow, row);
  row-gap: var(--bp-app-shell-row-gap, 0);
}

.bp-app-shell-fill-viewport {
  height: 100vh;
}

.bp-app-shell-clip-overflow {
  overflow: hidden;
}

.bp-app-shell-fill-viewport > .bp-app-shell-body,
.bp-app-shell-fill-viewport > .bp-app-shell-body > .bp-app-shell-main,
.bp-app-shell-fill-viewport > .bp-app-shell-sidebar,
.bp-app-shell-fill-viewport > .bp-app-shell-body > .bp-app-shell-sidebar {
  min-height: 0;
}

.bp-app-shell-sidebar-span-shell:not(.bp-app-shell-no-sidebar) {
  grid-template-columns: var(--bp-app-shell-sidebar-width, 16rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--bp-app-shell-gap, var(--bp-space-4));
  row-gap: var(--bp-app-shell-row-gap, 0);
  padding: var(--bp-app-shell-body-padding, var(--bp-space-4));
  box-sizing: border-box;
}

.bp-app-shell-sidebar-resizable {
  --bp-app-shell-sidebar-resize-track-size: var(--bp-app-shell-sidebar-resize-handle-size, var(--bp-app-shell-gap, var(--bp-space-4)));
}

.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-span-shell:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-both)) {
  column-gap: 0;
  grid-template-columns: var(--bp-app-shell-sidebar-width, 16rem) var(--bp-app-shell-sidebar-resize-track-size) minmax(0, 1fr);
}

.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-span-shell.bp-app-shell-sidebar-right:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-both)) {
  grid-template-columns: minmax(0, 1fr) var(--bp-app-shell-sidebar-resize-track-size) var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-header,
.bp-app-shell-footer {
  padding: var(--bp-app-shell-header-padding, var(--bp-app-shell-section-padding, var(--bp-space-4)));
  background: var(--bp-app-shell-header-bg, var(--bp-app-shell-section-bg, var(--bp-surface-strong)));
  border-bottom: 1px solid var(--bp-app-shell-header-border, var(--bp-outline-muted));
  height: var(--bp-app-shell-header-height, auto);
  box-sizing: border-box;
}

.bp-app-shell-footer {
  padding: var(--bp-app-shell-footer-padding, var(--bp-app-shell-section-padding, var(--bp-space-4)));
  background: var(--bp-app-shell-footer-bg, var(--bp-app-shell-section-bg, var(--bp-surface-strong)));
  border-bottom: 0;
  border-top: 1px solid var(--bp-app-shell-footer-border, var(--bp-outline-muted));
  height: var(--bp-app-shell-footer-height, auto);
}

.bp-app-shell-sticky {
  position: sticky;
  z-index: var(--bp-app-shell-sticky-z, 20);
}

.bp-app-shell-header.bp-app-shell-sticky {
  top: 0;
}

.bp-app-shell-footer.bp-app-shell-sticky {
  bottom: 0;
}

.bp-app-shell:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-header {
  grid-column: 1;
  grid-row: 1;
}

.bp-app-shell:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-body {
  grid-column: 1;
  grid-row: 2;
}

.bp-app-shell:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-footer {
  grid-column: 1;
  grid-row: 3;
}

.bp-app-shell-body {
  display: grid;
  grid-template-columns: var(--bp-app-shell-sidebar-width, 16rem) minmax(0, 1fr);
  gap: var(--bp-app-shell-gap, var(--bp-space-4));
  padding: var(--bp-app-shell-body-padding, var(--bp-space-4));
}

.bp-app-shell-sidebar-resizable:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-span-shell)):where(:not(.bp-app-shell-sidebar-both)) > .bp-app-shell-body {
  column-gap: 0;
  grid-template-columns: var(--bp-app-shell-sidebar-width, 16rem) var(--bp-app-shell-sidebar-resize-track-size) minmax(0, 1fr);
}

.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-right:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-span-shell)):where(:not(.bp-app-shell-sidebar-both)) > .bp-app-shell-body {
  grid-template-columns: minmax(0, 1fr) var(--bp-app-shell-sidebar-resize-track-size) var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-no-sidebar > .bp-app-shell-body {
  grid-template-columns: minmax(0, 1fr);
}

.bp-app-shell-sidebar {
  background: var(--bp-app-shell-sidebar-bg, var(--bp-surface-strong));
  border: 1px solid var(--bp-app-shell-sidebar-border, var(--bp-outline));
  border-radius: var(--bp-app-shell-sidebar-radius, var(--bp-radius-lg));
  width: 100%;
  min-width: var(--bp-app-shell-sidebar-min-width, 0);
  max-width: var(--bp-app-shell-sidebar-max-width, none);
  padding: 0;
}

.bp-app-shell-sidebar-resizable > .bp-app-shell-sidebar,
.bp-app-shell-sidebar-resizable > .bp-app-shell-body > .bp-app-shell-sidebar {
  min-width: 0;
  max-width: none;
}

.bp-app-shell-sidebar-content {
  padding: var(--bp-app-shell-sidebar-padding, var(--bp-space-3));
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

.bp-app-shell-sidebar-content > .bp-scroll-area:only-child {
  margin: calc(0px - var(--bp-app-shell-sidebar-padding, var(--bp-space-3)));
  width: calc(100% + var(--bp-app-shell-sidebar-padding, var(--bp-space-3)) + var(--bp-app-shell-sidebar-padding, var(--bp-space-3)));
  height: calc(100% + var(--bp-app-shell-sidebar-padding, var(--bp-space-3)) + var(--bp-app-shell-sidebar-padding, var(--bp-space-3)));
  --bp-scroll-padding: var(--bp-app-shell-sidebar-padding, var(--bp-space-3));
}

.bp-app-shell-sidebar-start {
  grid-column: 1;
}

.bp-app-shell-sidebar-end {
  grid-column: 2;
}

.bp-app-shell-main {
  min-width: 0;
}

.bp-app-shell-sidebar-right:not(.bp-app-shell-no-sidebar):not(.bp-app-shell-sidebar-span-shell):not(.bp-app-shell-sidebar-resizable) > .bp-app-shell-body {
  grid-template-columns: minmax(0, 1fr) var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-sidebar-right:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-body > .bp-app-shell-main {
  grid-column: 1;
}

.bp-app-shell-sidebar-right:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-body > .bp-app-shell-sidebar-end {
  grid-column: 2;
}

.bp-app-shell-sidebar-span-shell.bp-app-shell-sidebar-right:not(.bp-app-shell-no-sidebar):not(.bp-app-shell-sidebar-resizable) {
  grid-template-columns: minmax(0, 1fr) var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-sidebar-span-shell.bp-app-shell-sidebar-right > .bp-app-shell-body {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
}

.bp-app-shell-sidebar-span-shell.bp-app-shell-sidebar-right > .bp-app-shell-sidebar-end {
  grid-column: 2;
}

.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-right:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-both)) > .bp-app-shell-sidebar-end,
.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-right:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-both)) > .bp-app-shell-body > .bp-app-shell-sidebar-end {
  grid-column: 3;
}

.bp-app-shell-sidebar-both > .bp-app-shell-body {
  grid-template-columns:
    var(--bp-app-shell-sidebar-width, 16rem)
    minmax(0, 1fr)
    var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-sidebar-both:not(.bp-app-shell-sidebar-span-shell) > .bp-app-shell-body > .bp-app-shell-main {
  grid-column: 2;
}

.bp-app-shell-sidebar-both > .bp-app-shell-sidebar-end,
.bp-app-shell-sidebar-both > .bp-app-shell-body > .bp-app-shell-sidebar-end {
  grid-column: 3;
}

.bp-app-shell-sidebar-span-shell.bp-app-shell-sidebar-both {
  grid-template-columns:
    var(--bp-app-shell-sidebar-width, 16rem)
    minmax(0, 1fr)
    var(--bp-app-shell-sidebar-width, 16rem);
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-column: 2;
  grid-row: 1;
  gap: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-body > .bp-app-shell-header {
  grid-column: 1;
  grid-row: 1;
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-body > .bp-app-shell-main {
  grid-column: 1;
  grid-row: 2;
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-body > .bp-app-shell-footer {
  grid-column: 1;
  grid-row: 3;
}

.bp-app-shell-sidebar-resizable.bp-app-shell-sidebar-span-shell:where(:not(.bp-app-shell-no-sidebar)):where(:not(.bp-app-shell-sidebar-right)):where(:not(.bp-app-shell-sidebar-both)) > .bp-app-shell-body {
  grid-column: 3;
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-sidebar {
  grid-row: 1;
}

.bp-app-shell-sidebar-span-shell > .bp-app-shell-body > .bp-app-shell-main {
  min-width: 0;
  min-height: 0;
  padding-inline: var(--bp-app-shell-body-padding, var(--bp-space-4));
  padding-block: 0;
  box-sizing: border-box;
}

.bp-app-shell-sidebar-span-shell[data-has-header="true"] > .bp-app-shell-body > .bp-app-shell-main {
  padding-block-start: var(--bp-app-shell-body-padding, var(--bp-space-4));
}

.bp-app-shell-sidebar-span-shell[data-has-footer="true"] > .bp-app-shell-body > .bp-app-shell-main {
  padding-block-end: var(--bp-app-shell-body-padding, var(--bp-space-4));
}

.bp-app-shell-sidebar-resize-handle {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.bp-app-shell-sidebar-resize-handle-start,
.bp-app-shell-sidebar-resize-handle-end {
  grid-column: 2;
}

.bp-app-shell .bp-app-shell-sidebar-resize-handle-control.bp-resize-handle {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  border: var(--bp-app-shell-sidebar-resize-handle-border, 0);
  background: var(--bp-app-shell-sidebar-resize-handle-bg, transparent);
  border-radius: 0;
  color: inherit;
  display: flex;
  align-items: stretch;
  justify-content: center;
  user-select: none;
  cursor: col-resize;
}

.bp-app-shell .bp-app-shell-sidebar-resize-handle-control .bp-resize-handle-grip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.bp-app-shell .bp-app-shell-sidebar-resize-handle-control .bp-resize-handle-grip::before {
  content: "";
  width: var(--bp-app-shell-separator-width, 1px);
  height: 100%;
  background: var(--bp-app-shell-separator-color, var(--bp-outline-muted));
  opacity: var(--bp-app-shell-sidebar-resize-handle-opacity, 0.8);
}

.bp-app-shell-sidebar-resizing .bp-app-shell-sidebar-resize-handle-control .bp-resize-handle-grip::before {
  opacity: var(--bp-app-shell-sidebar-resize-handle-opacity-active, 1);
}

.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-sidebar,
.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-body > .bp-app-shell-sidebar {
  background: var(--bp-app-shell-sidebar-bg, var(--bp-surface-strong));
  border: 0;
  border-radius: 0;
}

.bp-app-shell-separators > .bp-app-shell-header,
.bp-app-shell-separators > .bp-app-shell-body > .bp-app-shell-header {
  border-bottom: var(--bp-app-shell-separator-width, 1px) solid var(--bp-app-shell-separator-color, var(--bp-outline-muted));
}

.bp-app-shell-separators > .bp-app-shell-footer,
.bp-app-shell-separators > .bp-app-shell-body > .bp-app-shell-footer {
  border-top: var(--bp-app-shell-separator-width, 1px) solid var(--bp-app-shell-separator-color, var(--bp-outline-muted));
}

.bp-app-shell-separators.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-sidebar-start,
.bp-app-shell-separators.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-body > .bp-app-shell-sidebar-start {
  border-inline-end: var(--bp-app-shell-separator-width, 1px) solid var(--bp-app-shell-separator-color, var(--bp-outline-muted));
}

.bp-app-shell-separators.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-sidebar-end,
.bp-app-shell-separators.bp-app-shell-sidebar-chrome-flat > .bp-app-shell-body > .bp-app-shell-sidebar-end {
  border-inline-start: var(--bp-app-shell-separator-width, 1px) solid var(--bp-app-shell-separator-color, var(--bp-outline-muted));
}

.bp-aspect-ratio {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  width: var(--bp-aspect-width, 100%);
  height: var(--bp-aspect-height, auto);
  min-width: var(--bp-aspect-min-width, auto);
  max-width: var(--bp-aspect-max-width, none);
  min-height: var(--bp-aspect-min-height, auto);
  max-height: var(--bp-aspect-max-height, none);
  aspect-ratio: var(--bp-aspect-ratio, 16 / 9);
  border-radius: var(--bp-aspect-radius, var(--bp-radius-md));
  background: var(--bp-aspect-bg, var(--bp-surface-muted));
  overflow: hidden;
  box-sizing: border-box;
}

.bp-aspect-ratio-content {
  display: flex;
  align-items: inherit;
  justify-content: inherit;
  flex-wrap: inherit;
  gap: inherit;
}

.bp-aspect-ratio > *,
.bp-aspect-ratio-content,
.bp-aspect-ratio-content > * {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.bp-aspect-ratio-no-stretch > *,
.bp-aspect-ratio-no-stretch .bp-aspect-ratio-content,
.bp-aspect-ratio-no-stretch .bp-aspect-ratio-content > * {
  width: auto;
  height: auto;
}

.bp-aspect-ratio > *,
.bp-aspect-ratio-content > * {
  object-fit: var(--bp-aspect-content-fit);
  object-position: var(--bp-aspect-content-position);
}

.bp-card {
  background: var(--bp-card-bg, var(--bp-surface));
  color: var(--bp-card-fg, var(--bp-ink));
  border-radius: var(--bp-card-radius, var(--bp-radius-lg));
  border: var(--bp-card-border, 1px solid var(--bp-outline));
  box-shadow: var(--bp-card-shadow, none);
  display: grid;
  overflow: hidden;
  text-decoration: none;
}

.bp-card-fill-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bp-card-outlined {
  --bp-card-border: 1px solid var(--bp-outline);
  --bp-card-shadow: none;
}

.bp-card-elevated {
  --bp-card-border: 1px solid transparent;
  --bp-card-shadow: var(--bp-shadow-1);
}

.bp-card-flat {
  --bp-card-border: 1px solid transparent;
  --bp-card-shadow: none;
}

.bp-card-interactive {
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bp-card-interactive:hover {
  border-color: var(--bp-card-hover-border, var(--bp-outline-strong));
}

.bp-card-interactive:focus-visible,
.bp-card-interactive:focus-within {
  box-shadow: var(--bp-card-focus-shadow, var(--bp-card-shadow, none), var(--bp-focus-ring));
}

.bp-card-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.bp-card-header {
  padding: var(--bp-card-header-padding, var(--bp-card-padding, var(--bp-space-4)));
  background: var(--bp-card-header-bg, var(--bp-surface-strong));
  border-bottom: var(--bp-card-header-border, 1px solid var(--bp-outline-muted));
}

.bp-card-header.bp-card-header-has-actions,
.bp-card-footer.bp-card-footer-has-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-card-actions-gap, var(--bp-space-3));
}

.bp-card-header-content,
.bp-card-footer-content {
  flex: 1 1 auto;
  min-width: 0;
}

.bp-card-header-actions,
.bp-card-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-card-actions-item-gap, var(--bp-space-2));
}

.bp-card-body {
  display: grid;
  gap: var(--bp-card-body-gap, var(--bp-space-2));
  padding: var(--bp-card-body-padding, var(--bp-card-padding, var(--bp-space-4)));
  background: var(--bp-card-body-bg, transparent);
}

.bp-card-fill-body > .bp-card-body {
  flex: 1 1 auto;
  min-height: 0;
}

.bp-card-body-flex {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bp-card-body-flex > * {
  min-height: 0;
}

.bp-card-footer {
  padding: var(--bp-card-footer-padding, var(--bp-card-padding, var(--bp-space-4)));
  background: var(--bp-card-footer-bg, var(--bp-surface-strong));
  border-top: var(--bp-card-footer-border, 1px solid var(--bp-outline-muted));
}

.bp-columns {
  --bp-columns-gap-resolved: var(--bp-columns-gap, var(--bp-space-4));
  --bp-columns-row-gap-resolved: var(--bp-columns-row-gap, 0);
  --bp-columns-width-resolved: var(--bp-columns-width, auto);
  column-gap: var(--bp-columns-gap-resolved);
  column-count: var(--bp-columns-count, auto);
  column-width: var(--bp-columns-width-resolved);
  column-fill: var(--bp-columns-fill, balance);
  column-rule-color: var(--bp-columns-rule-color, var(--bp-outline-muted));
  column-rule-width: var(--bp-columns-rule-width, 0);
  column-rule-style: var(--bp-columns-rule-style, solid);
}

.bp-columns > * {
  margin-bottom: var(--bp-columns-row-gap-resolved);
}

.bp-columns-empty {
  column-span: all;
  break-inside: avoid;
}

.bp-columns-item {
  break-inside: avoid;
}

.bp-container {
  width: var(--bp-container-width-resolved, var(--bp-container-width, 100%));
  min-width: var(--bp-container-min-width, 0);
  max-width: var(--bp-container-max-width-resolved, var(--bp-container-max-width, 72rem));
  margin-left: auto;
  margin-right: auto;
  padding: var(--bp-container-padding-y-resolved, var(--bp-container-padding-y, var(--bp-container-padding, var(--bp-space-4))))
    var(--bp-container-padding-x-resolved, var(--bp-container-padding-x, var(--bp-container-padding, var(--bp-space-4))));
}

.bp-container-fluid,
.bp-container-fluid-until-sm,
.bp-container-fluid-until-md,
.bp-container-fluid-until-lg,
.bp-container-fluid-until-xl,
.bp-container.bp-container-fluid,
.bp-container.bp-container-fluid-until-sm,
.bp-container.bp-container-fluid-until-md,
.bp-container.bp-container-fluid-until-lg,
.bp-container.bp-container-fluid-until-xl {
  --bp-container-max-width-resolved: none;
}

.bp-container-align-left {
  margin-left: 0;
  margin-right: auto;
}

.bp-container-align-right {
  margin-left: auto;
  margin-right: 0;
}

.bp-content-switcher {
  transition:
    opacity var(--bp-content-switcher-duration, 0.2s) var(--bp-content-switcher-easing, ease) var(--bp-content-switcher-delay, 0s),
    transform var(--bp-content-switcher-duration, 0.2s) var(--bp-content-switcher-easing, ease) var(--bp-content-switcher-delay, 0s);
}

.bp-content-switcher-fade {
  transition:
    opacity var(--bp-content-switcher-duration, 0.2s) var(--bp-content-switcher-easing, ease) var(--bp-content-switcher-delay, 0s);
}

.bp-content-switcher-no-transition {
  transition: none;
}

.bp-content-switcher-slide.bp-content-switcher-inactive {
  transform: translateY(var(--bp-content-switcher-slide-distance, 6px));
}

.bp-content-switcher-slide.bp-content-switcher-slide-down.bp-content-switcher-inactive {
  transform: translateY(var(--bp-content-switcher-slide-distance, 6px));
}

.bp-content-switcher-slide.bp-content-switcher-slide-up.bp-content-switcher-inactive {
  transform: translateY(calc(var(--bp-content-switcher-slide-distance, 6px) * -1));
}

.bp-content-switcher-slide.bp-content-switcher-slide-left.bp-content-switcher-inactive {
  transform: translateX(calc(var(--bp-content-switcher-slide-distance, 6px) * -1));
}

.bp-content-switcher-slide.bp-content-switcher-slide-right.bp-content-switcher-inactive {
  transform: translateX(var(--bp-content-switcher-slide-distance, 6px));
}

.bp-content-switcher-inactive {
  opacity: 0;
  pointer-events: none;
}

.bp-content-switcher-hidden.bp-content-switcher-inactive {
  max-height: 0;
  overflow: hidden;
}

.bp-content-switcher-opacity.bp-content-switcher-inactive {
  opacity: 0;
}

.bp-content-switcher-active {
  opacity: 1;
}

.bp-divider {
  border: 0;
  margin: 0;
  flex-shrink: 0;
  background: var(--bp-divider);
  opacity: var(--bp-divider-opacity, 1);
}

.bp-divider-horizontal {
  width: var(--bp-divider-length, 100%);
  height: var(--bp-divider-thickness, 1px);
}

.bp-divider-vertical {
  width: var(--bp-divider-thickness, 1px);
  height: var(--bp-divider-length, 100%);
}

.bp-divider-dashed {
  --bp-divider-border-style: dashed;
}

.bp-divider-dotted {
  --bp-divider-border-style: dotted;
}

.bp-divider-double {
  --bp-divider-border-style: double;
}

.bp-divider-dashed,
.bp-divider-dotted,
.bp-divider-double {
  background: none;
  border-top: var(--bp-divider-thickness, 1px) var(--bp-divider-border-style) var(--bp-divider);
}

.bp-divider-vertical.bp-divider-dashed,
.bp-divider-vertical.bp-divider-dotted,
.bp-divider-vertical.bp-divider-double {
  border-top: 0;
  border-left: var(--bp-divider-thickness, 1px) var(--bp-divider-border-style) var(--bp-divider);
}

.bp-divider-inset {
  margin-inline-start: var(--bp-divider-inset-start, var(--bp-divider-inset, var(--bp-space-4)));
  margin-inline-end: var(--bp-divider-inset-end, 0);
}

.bp-divider-labeled {
  --bp-divider-label-start-flex: 1;
  --bp-divider-label-end-flex: 1;
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  background: transparent;
  color: var(--bp-muted);
  opacity: 1;
}

.bp-divider-vertical.bp-divider-labeled {
  flex-direction: column;
  width: auto;
}

.bp-divider-label-start {
  --bp-divider-label-start-flex: 0.2;
}

.bp-divider-label-end {
  --bp-divider-label-end-flex: 0.2;
}

.bp-divider-labeled::before {
  content: "";
  flex: var(--bp-divider-label-start-flex, 1);
  height: var(--bp-divider-thickness, 1px);
  background: var(--bp-divider);
  opacity: var(--bp-divider-opacity, 1);
}

.bp-divider-labeled::after {
  content: "";
  flex: var(--bp-divider-label-end-flex, 1);
  height: var(--bp-divider-thickness, 1px);
  background: var(--bp-divider);
  opacity: var(--bp-divider-opacity, 1);
}

.bp-divider-vertical.bp-divider-labeled::before,
.bp-divider-vertical.bp-divider-labeled::after {
  width: var(--bp-divider-thickness, 1px);
  height: auto;
  align-self: center;
}

.bp-divider-labeled.bp-divider-dashed::before,
.bp-divider-labeled.bp-divider-dashed::after,
.bp-divider-labeled.bp-divider-dotted::before,
.bp-divider-labeled.bp-divider-dotted::after,
.bp-divider-labeled.bp-divider-double::before,
.bp-divider-labeled.bp-divider-double::after {
  background: none;
  border-top: var(--bp-divider-thickness, 1px) var(--bp-divider-border-style) var(--bp-divider);
}

.bp-divider-vertical.bp-divider-labeled.bp-divider-dashed::before,
.bp-divider-vertical.bp-divider-labeled.bp-divider-dashed::after,
.bp-divider-vertical.bp-divider-labeled.bp-divider-dotted::before,
.bp-divider-vertical.bp-divider-labeled.bp-divider-dotted::after,
.bp-divider-vertical.bp-divider-labeled.bp-divider-double::before,
.bp-divider-vertical.bp-divider-labeled.bp-divider-double::after {
  border-top: 0;
  border-left: var(--bp-divider-thickness, 1px) var(--bp-divider-border-style) var(--bp-divider);
}

.bp-divider-label {
  white-space: nowrap;
}

.bp-grid {
  --bp-grid-columns-resolved: var(--bp-grid-columns, auto-fit);
  --bp-grid-min-column-resolved: var(--bp-grid-min-column, 14rem);
  --bp-grid-gap-resolved: var(--bp-grid-gap, var(--bp-space-4));
  --bp-grid-row-gap-resolved: var(--bp-grid-row-gap, var(--bp-grid-gap-resolved));
  --bp-grid-column-gap-resolved: var(--bp-grid-column-gap, var(--bp-grid-gap-resolved));
  --bp-grid-template-columns-resolved: var(--bp-grid-template-columns, repeat(var(--bp-grid-columns-resolved), minmax(var(--bp-grid-min-column-resolved), 1fr)));
  --bp-grid-template-rows-resolved: var(--bp-grid-template-rows, none);
  display: grid;
  gap: var(--bp-grid-gap-resolved);
  row-gap: var(--bp-grid-row-gap-resolved);
  column-gap: var(--bp-grid-column-gap-resolved);
  align-items: var(--bp-grid-align, stretch);
  justify-items: var(--bp-grid-justify, stretch);
  grid-auto-flow: var(--bp-grid-auto-flow, row);
  grid-auto-columns: var(--bp-grid-auto-columns, auto);
  grid-auto-rows: var(--bp-grid-auto-rows, auto);
  grid-template-columns: var(--bp-grid-template-columns-resolved);
  grid-template-rows: var(--bp-grid-template-rows-resolved);
}

.bp-grid-inline {
  display: inline-grid;
}

.bp-grid-item {
  min-width: 0;
  min-height: 0;
}

.bp-grid-empty {
  grid-column: 1 / -1;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.bp-masonry {
  --bp-masonry-count-resolved: var(--bp-masonry-count, auto);
  --bp-masonry-width-resolved: var(--bp-masonry-width, 16rem);
  --bp-masonry-column-gap-resolved: var(--bp-masonry-column-gap, var(--bp-masonry-gap, var(--bp-space-4)));
  --bp-masonry-row-gap-resolved: var(--bp-masonry-row-gap, var(--bp-masonry-gap, var(--bp-space-4)));
  column-gap: var(--bp-masonry-column-gap-resolved);
  column-count: var(--bp-masonry-count-resolved);
  column-width: var(--bp-masonry-width-resolved);
  column-fill: var(--bp-masonry-fill, balance);
  column-rule-color: var(--bp-masonry-rule-color, var(--bp-outline-muted));
  column-rule-width: var(--bp-masonry-rule-width, 0);
  column-rule-style: var(--bp-masonry-rule-style, solid);
}

.bp-masonry > *,
.bp-masonry-item {
  break-inside: avoid;
  margin-bottom: var(--bp-masonry-row-gap-resolved);
}

.bp-masonry > :last-child,
.bp-masonry-item:last-child {
  margin-bottom: 0;
}

.bp-masonry-empty {
  column-span: all;
  break-inside: avoid;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.bp-resizable-pane {
  width: var(--bp-resizable-pane-width, auto);
  height: var(--bp-resizable-pane-height, auto);
  min-width: var(--bp-resizable-pane-min-width, 0);
  min-height: var(--bp-resizable-pane-min-height, 0);
  max-width: var(--bp-resizable-pane-max-width, none);
  max-height: var(--bp-resizable-pane-max-height, none);
  overflow: auto;
}

.bp-resizable-pane-has-handle {
  position: relative;
}

.bp-resizable-pane-handle {
  position: absolute;
  right: var(--bp-resizable-pane-handle-offset, 0.35rem);
  bottom: var(--bp-resizable-pane-handle-offset, 0.35rem);
  width: var(--bp-resizable-pane-handle-size, 0.9rem);
  height: var(--bp-resizable-pane-handle-size, 0.9rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  z-index: 1;
  opacity: 0.65;
  background-image:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 45%,
      var(--bp-outline-muted) 45%,
      var(--bp-outline-muted) 55%,
      transparent 55%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 65%,
      var(--bp-outline-muted) 65%,
      var(--bp-outline-muted) 75%,
      transparent 75%,
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bp-resizable-pane-handle > .bp-resizable-pane-handle-control {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
}

.bp-resizable-pane-handle > .bp-resizable-pane-handle-control .bp-resize-handle-grip {
  display: none;
}

.bp-resizable-pane-resizing .bp-resizable-pane-handle {
  opacity: 0.95;
}

.bp-resizable-pane-handle-disabled .bp-resizable-pane-handle {
  opacity: 0.4;
}

.bp-resizable-pane-handle-bottom-left {
  right: auto;
  left: var(--bp-resizable-pane-handle-offset, 0.35rem);
}

.bp-resizable-pane-handle-bottom-right {
  right: var(--bp-resizable-pane-handle-offset, 0.35rem);
  bottom: var(--bp-resizable-pane-handle-offset, 0.35rem);
}

.bp-resizable-pane-handle-top-right {
  bottom: auto;
  top: var(--bp-resizable-pane-handle-offset, 0.35rem);
}

.bp-resizable-pane-handle-top-left {
  right: auto;
  bottom: auto;
  left: var(--bp-resizable-pane-handle-offset, 0.35rem);
  top: var(--bp-resizable-pane-handle-offset, 0.35rem);
}

.bp-responsive-show {
  display: none;
}

.bp-responsive-hide {
  display: var(--bp-responsive-display, block);
}

.bp-responsive-mode-visibility.bp-responsive-show {
  display: var(--bp-responsive-display, block);
  visibility: hidden;
}

.bp-responsive-mode-visibility.bp-responsive-hide {
  display: var(--bp-responsive-display, block);
  visibility: visible;
}

.bp-scroll-area {
  overflow: auto;
  max-height: var(--bp-scroll-max-height, none);
  max-width: var(--bp-scroll-max-width, none);
  height: var(--bp-scroll-height, auto);
  width: var(--bp-scroll-width, auto);
  padding: var(--bp-scroll-padding-y, var(--bp-scroll-padding, 0))
    var(--bp-scroll-padding-x, var(--bp-scroll-padding, 0));
  scroll-behavior: var(--bp-scroll-behavior, auto);
  scroll-snap-type: var(--bp-scroll-snap-type, none);
  overscroll-behavior: var(--bp-scroll-overscroll, auto);
  scrollbar-gutter: var(--bp-scrollbar-gutter, auto);
}

.bp-scroll-area-viewport {
  display: contents;
}

.bp-overlay-scroll-area {
  overflow: hidden;
  padding: 0;
}

.bp-overlay-scroll-area > .bp-scroll-area-viewport {
  display: block;
  overflow: auto;
  max-height: var(--bp-scroll-max-height, none);
  max-width: var(--bp-scroll-max-width, none);
  height: var(--bp-scroll-height, auto);
  width: var(--bp-scroll-width, auto);
  padding: var(--bp-scroll-padding-y, var(--bp-scroll-padding, 0))
    var(--bp-scroll-padding-x, var(--bp-scroll-padding, 0));
  scroll-behavior: var(--bp-scroll-behavior, auto);
  scroll-snap-type: var(--bp-scroll-snap-type, none);
  overscroll-behavior: var(--bp-scroll-overscroll, auto);
  scrollbar-gutter: var(--bp-scrollbar-gutter, auto);
}

.bp-overlay-scroll-area.bp-scroll-x > .bp-scroll-area-viewport {
  overflow-x: auto;
  overflow-y: hidden;
}

.bp-overlay-scroll-area.bp-scroll-y > .bp-scroll-area-viewport {
  overflow-y: auto;
  overflow-x: hidden;
}

.bp-overlay-scroll-area.bp-scroll-both > .bp-scroll-area-viewport {
  overflow: auto;
}

.bp-scroll-snap-align > * {
  scroll-snap-align: var(--bp-scroll-snap-align, none);
}

.bp-scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bp-scrollbar-hidden .bp-scroll-area-viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bp-scrollbar-hidden::-webkit-scrollbar,
.bp-scrollbar-hidden .bp-scroll-area-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.bp-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.bp-scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}

.bp-scroll-both {
  overflow: auto;
}

.bp-overlay-scroll-area.bp-scroll-x,
.bp-overlay-scroll-area.bp-scroll-y,
.bp-overlay-scroll-area.bp-scroll-both {
  overflow: hidden;
}

.bp-overlay-scroll-area {
  position: relative;
}

.bp-overlay-scroll-area-viewport {
  min-width: 100%;
  min-height: 100%;
}

.bp-overlay-scrollbar {
  position: absolute;
  z-index: 1;
  background: var(--bp-overlay-scrollbar-track, transparent);
  border-radius: var(--bp-overlay-scrollbar-radius, 999px);
  opacity: var(--bp-overlay-scrollbar-opacity, 0.6);
  transition:
    opacity var(--bp-overlay-scrollbar-fade-duration, 0.2s) ease,
    width var(--bp-overlay-scrollbar-size-transition, 0.18s) ease,
    height var(--bp-overlay-scrollbar-size-transition, 0.18s) ease;
}

.bp-overlay-scroll-area-autohide .bp-overlay-scrollbar {
  opacity: 0;
  transition-delay: var(--bp-overlay-scrollbar-fade-delay, 1s), 0s, 0s;
}

.bp-overlay-scroll-area-autohide:hover .bp-overlay-scrollbar,
.bp-overlay-scroll-area-autohide[data-overlay-scrollbar-active="true"] .bp-overlay-scrollbar,
.bp-overlay-scroll-area-autohide[data-overlay-scrollbar-dragging="true"] .bp-overlay-scrollbar {
  opacity: var(--bp-overlay-scrollbar-opacity, 0.6);
  transition-delay: 0s, 0s, 0s;
}

.bp-overlay-scrollbar-vertical {
  top: var(--bp-overlay-scrollbar-inset, 0px);
  bottom: var(--bp-overlay-scrollbar-inset, 0px);
  right: var(--bp-overlay-scrollbar-inset, 0px);
  width: var(--bp-overlay-scrollbar-size, 10px);
}

.bp-overlay-scrollbar-horizontal {
  left: var(--bp-overlay-scrollbar-inset, 0px);
  right: var(--bp-overlay-scrollbar-inset, 0px);
  bottom: var(--bp-overlay-scrollbar-inset, 0px);
  height: var(--bp-overlay-scrollbar-size, 10px);
}

.bp-overlay-scrollbar-vertical:hover {
  width: var(--bp-overlay-scrollbar-size-hover, 14px);
}

.bp-overlay-scrollbar-horizontal:hover {
  height: var(--bp-overlay-scrollbar-size-hover, 14px);
}

.bp-overlay-scroll-area[data-overlay-scrollbar-x="true"] .bp-overlay-scrollbar-vertical {
  bottom: calc(var(--bp-overlay-scrollbar-inset, 0px) + var(--bp-overlay-scrollbar-size, 10px));
}

.bp-overlay-scroll-area[data-overlay-scrollbar-y="true"] .bp-overlay-scrollbar-horizontal {
  right: calc(var(--bp-overlay-scrollbar-inset, 0px) + var(--bp-overlay-scrollbar-size, 10px));
}

.bp-overlay-scroll-area[data-overlay-scrollbar-y="false"] > .bp-overlay-scrollbar-vertical,
.bp-overlay-scroll-area[data-overlay-scrollbar-x="false"] > .bp-overlay-scrollbar-horizontal {
  display: none;
}

.bp-overlay-scrollbar-thumb {
  position: absolute;
  background: var(--bp-overlay-scrollbar-thumb, var(--bp-outline-strong));
  border-radius: var(--bp-overlay-scrollbar-radius, 999px);
  cursor: pointer;
  touch-action: none;
}

.bp-overlay-scrollbar-thumb:hover {
  background: var(--bp-overlay-scrollbar-thumb-hover, var(--bp-outline-strong));
}

.bp-overlay-scrollbar-vertical .bp-overlay-scrollbar-thumb {
  left: var(--bp-overlay-scrollbar-thumb-inset, 2px);
  right: var(--bp-overlay-scrollbar-thumb-inset, 2px);
  height: 0;
  transform: translateY(0);
  min-height: var(--bp-overlay-scrollbar-thumb-min-size, 24px);
}

.bp-overlay-scrollbar-horizontal .bp-overlay-scrollbar-thumb {
  top: var(--bp-overlay-scrollbar-thumb-inset, 2px);
  bottom: var(--bp-overlay-scrollbar-thumb-inset, 2px);
  width: 0;
  transform: translateX(0);
  min-width: var(--bp-overlay-scrollbar-thumb-min-size, 24px);
}

.bp-overlay-scrollbar-vertical:hover .bp-overlay-scrollbar-thumb {
  left: var(--bp-overlay-scrollbar-thumb-inset-hover, var(--bp-overlay-scrollbar-thumb-inset, 2px));
  right: var(--bp-overlay-scrollbar-thumb-inset-hover, var(--bp-overlay-scrollbar-thumb-inset, 2px));
}

.bp-overlay-scrollbar-horizontal:hover .bp-overlay-scrollbar-thumb {
  top: var(--bp-overlay-scrollbar-thumb-inset-hover, var(--bp-overlay-scrollbar-thumb-inset, 2px));
  bottom: var(--bp-overlay-scrollbar-thumb-inset-hover, var(--bp-overlay-scrollbar-thumb-inset, 2px));
}

.bp-sidebar-layout {
  display: grid;
  grid-template-columns: var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem)) minmax(0, 1fr);
  gap: var(--bp-sidebar-gap, var(--bp-space-4));
  align-items: start;
  position: relative;
}

.bp-sidebar-layout-sidebar {
  background: var(--bp-sidebar-bg, var(--bp-surface-strong));
  border: 1px solid var(--bp-sidebar-border, var(--bp-outline));
  border-radius: var(--bp-sidebar-radius, var(--bp-radius-lg));
  padding: var(--bp-sidebar-padding, var(--bp-space-3));
}

.bp-sidebar-layout-sidebar-start {
  grid-column: 1;
}

.bp-sidebar-layout-main {
  grid-column: 2;
  min-width: 0;
  padding: var(--bp-sidebar-main-padding, 0);
  background: var(--bp-sidebar-main-bg, transparent);
  border: var(--bp-sidebar-main-border, none);
  border-radius: var(--bp-sidebar-main-radius, 0);
}

.bp-sidebar-layout-scrim {
  position: absolute;
  inset: 0;
  background: var(--bp-sidebar-scrim-bg, var(--bp-backdrop));
  display: none;
  z-index: 1;
  cursor: pointer;
}

.bp-sidebar-right {
  grid-template-columns: minmax(0, 1fr) var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem));
}

.bp-sidebar-right .bp-sidebar-layout-main {
  grid-column: 1;
}

.bp-sidebar-right .bp-sidebar-layout-sidebar-end {
  grid-column: 2;
}

.bp-sidebar-both {
  grid-template-columns:
    var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem))
    minmax(0, 1fr)
    var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem));
}

.bp-sidebar-both .bp-sidebar-layout-main {
  grid-column: 2;
}

.bp-sidebar-both .bp-sidebar-layout-sidebar-end {
  grid-column: 3;
}

.bp-sidebar-none {
  grid-template-columns: minmax(0, 1fr);
}

.bp-sidebar-none .bp-sidebar-layout-main {
  grid-column: 1;
}

.bp-sidebar-closed {
  grid-template-columns: minmax(0, 1fr);
}

.bp-sidebar-closed .bp-sidebar-layout-main {
  grid-column: 1;
}

.bp-sidebar-closed .bp-sidebar-layout-sidebar {
  display: none;
}

.bp-spacer {
  flex: var(--bp-spacer-flex, 0 0 auto);
  flex-basis: var(--bp-spacer-basis);
}

.bp-spacer-both {
  width: var(--bp-spacer-width, var(--bp-spacer-size, var(--bp-space-4)));
  height: var(--bp-spacer-height, var(--bp-spacer-size, var(--bp-space-4)));
  min-width: var(--bp-spacer-min-width, var(--bp-spacer-min-size, 0));
  min-height: var(--bp-spacer-min-height, var(--bp-spacer-min-size, 0));
  max-width: var(--bp-spacer-max-width, var(--bp-spacer-max-size, none));
  max-height: var(--bp-spacer-max-height, var(--bp-spacer-max-size, none));
}

.bp-spacer-horizontal {
  width: var(--bp-spacer-width, var(--bp-spacer-size, var(--bp-space-4)));
  height: var(--bp-spacer-height, auto);
  min-width: var(--bp-spacer-min-width, var(--bp-spacer-min-size, 0));
  max-width: var(--bp-spacer-max-width, var(--bp-spacer-max-size, none));
  min-height: var(--bp-spacer-min-height, 0);
  max-height: var(--bp-spacer-max-height, none);
}

.bp-spacer-vertical {
  height: var(--bp-spacer-height, var(--bp-spacer-size, var(--bp-space-4)));
  width: var(--bp-spacer-width, auto);
  min-height: var(--bp-spacer-min-height, var(--bp-spacer-min-size, 0));
  max-height: var(--bp-spacer-max-height, var(--bp-spacer-max-size, none));
  min-width: var(--bp-spacer-min-width, 0);
  max-width: var(--bp-spacer-max-width, none);
}

.bp-spacer-inline {
  display: inline-block;
}

.bp-split-pane {
  display: grid;
  gap: var(--bp-split-pane-gap, var(--bp-space-4));
}

.bp-split-pane-horizontal {
  grid-template-columns:
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)))
    minmax(0, var(--bp-split-pane-secondary-size, 1fr));
}

.bp-split-pane-vertical {
  grid-template-rows:
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)))
    minmax(0, var(--bp-split-pane-secondary-size, 1fr));
}

.bp-split-pane-swap.bp-split-pane-horizontal {
  grid-template-columns:
    minmax(0, var(--bp-split-pane-secondary-size, 1fr))
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)));
}

.bp-split-pane-swap.bp-split-pane-vertical {
  grid-template-rows:
    minmax(0, var(--bp-split-pane-secondary-size, 1fr))
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)));
}

.bp-split-pane-with-gutter.bp-split-pane-horizontal {
  grid-template-columns:
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)))
    var(--bp-split-pane-gutter-size, 0)
    minmax(0, var(--bp-split-pane-secondary-size, 1fr));
}

.bp-split-pane-with-gutter.bp-split-pane-vertical {
  grid-template-rows:
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)))
    var(--bp-split-pane-gutter-size, 0)
    minmax(0, var(--bp-split-pane-secondary-size, 1fr));
}

.bp-split-pane-with-gutter.bp-split-pane-swap.bp-split-pane-horizontal {
  grid-template-columns:
    minmax(0, var(--bp-split-pane-secondary-size, 1fr))
    var(--bp-split-pane-gutter-size, 0)
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)));
}

.bp-split-pane-with-gutter.bp-split-pane-swap.bp-split-pane-vertical {
  grid-template-rows:
    minmax(0, var(--bp-split-pane-secondary-size, 1fr))
    var(--bp-split-pane-gutter-size, 0)
    minmax(0, var(--bp-split-pane-primary-size, var(--bp-split-pane-primary, 50%)));
}

.bp-split-pane-primary,
.bp-split-pane-secondary {
  min-width: 0;
  min-height: 0;
}

.bp-split-pane-primary {
  padding: var(--bp-split-pane-primary-padding, 0);
  background: var(--bp-split-pane-primary-bg, transparent);
}

.bp-split-pane-secondary {
  padding: var(--bp-split-pane-secondary-padding, 0);
  background: var(--bp-split-pane-secondary-bg, transparent);
}

.bp-split-pane-gutter {
  align-self: stretch;
  justify-self: stretch;
}

.bp-split-pane-collapsed-primary.bp-split-pane-horizontal,
.bp-split-pane-collapsed-secondary.bp-split-pane-horizontal {
  grid-template-columns: minmax(0, 1fr);
}

.bp-split-pane-collapsed-primary.bp-split-pane-vertical,
.bp-split-pane-collapsed-secondary.bp-split-pane-vertical {
  grid-template-rows: minmax(0, 1fr);
}

.bp-split-pane-collapsed-primary .bp-split-pane-primary {
  display: none;
}

.bp-split-pane-collapsed-secondary .bp-split-pane-secondary {
  display: none;
}

.bp-split-pane-horizontal .bp-split-pane-primary {
  min-width: var(--bp-split-pane-min-primary, 0);
  max-width: var(--bp-split-pane-max-primary, none);
}

.bp-split-pane-horizontal .bp-split-pane-secondary {
  min-width: var(--bp-split-pane-min-secondary, 0);
  max-width: var(--bp-split-pane-max-secondary, none);
}

.bp-split-pane-vertical .bp-split-pane-primary {
  min-height: var(--bp-split-pane-min-primary, 0);
  max-height: var(--bp-split-pane-max-primary, none);
}

.bp-split-pane-vertical .bp-split-pane-secondary {
  min-height: var(--bp-split-pane-min-secondary, 0);
  max-height: var(--bp-split-pane-max-secondary, none);
}

.bp-splitter {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  align-self: stretch;
  justify-self: stretch;
}

.bp-splitter::before {
  content: "";
  position: absolute;
  background: var(--bp-splitter-color, var(--bp-outline));
  border-radius: 999px;
}

.bp-splitter:not(.bp-splitter-disabled):hover::before {
  background: var(--bp-splitter-hover-color, var(--bp-splitter-color, var(--bp-outline)));
}

.bp-splitter:not(.bp-splitter-disabled):active::before {
  background: var(--bp-splitter-active-color, var(--bp-splitter-hover-color, var(--bp-splitter-color, var(--bp-outline))));
}

.bp-splitter:not(.bp-splitter-disabled):focus-visible {
  box-shadow: var(--bp-focus-ring);
}

.bp-splitter:not(.bp-splitter-disabled):focus-visible::before {
  background: var(--bp-splitter-focus-color, var(--bp-splitter-hover-color, var(--bp-splitter-color, var(--bp-outline))));
}

.bp-splitter-vertical {
  width: var(--bp-splitter-hit-area, var(--bp-splitter-size, 6px));
  height: var(--bp-splitter-length, 100%);
  cursor: var(--bp-splitter-cursor, col-resize);
}

.bp-splitter-vertical::before {
  width: var(--bp-splitter-size, 6px);
  height: 100%;
}

.bp-splitter-horizontal {
  height: var(--bp-splitter-hit-area, var(--bp-splitter-size, 6px));
  width: var(--bp-splitter-length, 100%);
  cursor: var(--bp-splitter-cursor, row-resize);
}

.bp-splitter-horizontal::before {
  height: var(--bp-splitter-size, 6px);
  width: 100%;
}

.bp-splitter-disabled {
  cursor: default;
  pointer-events: none;
}

.bp-splitter-handle {
  display: grid;
  place-items: center;
  background: var(--bp-splitter-handle-bg, var(--bp-splitter-color, var(--bp-outline)));
  border-radius: 999px;
  z-index: 1;
}

.bp-splitter-vertical .bp-splitter-handle {
  width: var(--bp-splitter-size, 6px);
  height: var(--bp-splitter-handle-size, 2rem);
}

.bp-splitter-horizontal .bp-splitter-handle {
  height: var(--bp-splitter-size, 6px);
  width: var(--bp-splitter-handle-size, 2rem);
}
.bp-stack {
  display: flex;
  flex-direction: column;
  --bp-stack-gap-resolved: var(--bp-stack-gap, var(--bp-space-3));
  --bp-stack-row-gap-resolved: var(--bp-stack-row-gap, var(--bp-stack-gap-resolved));
  --bp-stack-column-gap-resolved: var(--bp-stack-column-gap, var(--bp-stack-gap-resolved));
  gap: var(--bp-stack-gap-resolved);
  row-gap: var(--bp-stack-row-gap-resolved);
  column-gap: var(--bp-stack-column-gap-resolved);
  align-items: var(--bp-stack-align, stretch);
  justify-content: var(--bp-stack-justify, flex-start);
  flex-wrap: var(--bp-stack-wrap, nowrap);
}

.bp-stack > * {
  min-width: 0;
  min-height: 0;
}

.bp-stack-item {
  min-width: 0;
  min-height: 0;
}

.bp-stack-empty {
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.bp-stack-horizontal {
  flex-direction: row;
}

.bp-stack-inline {
  display: inline-flex;
}

.bp-surface {
  background: var(--bp-surface-bg, var(--bp-surface));
  color: var(--bp-surface-fg, var(--bp-ink));
  padding: var(--bp-surface-padding-y, var(--bp-surface-padding, var(--bp-space-4)))
    var(--bp-surface-padding-x, var(--bp-surface-padding, var(--bp-space-4)));
  border-radius: var(--bp-surface-radius-x, var(--bp-surface-radius, var(--bp-radius-lg)))
    / var(--bp-surface-radius-y, var(--bp-surface-radius, var(--bp-radius-lg)));
  border: var(
    --bp-surface-border,
    var(--bp-surface-border-width, 1px) var(--bp-surface-border-style, solid)
      var(--bp-surface-border-color, transparent)
  );
  box-shadow: var(--bp-surface-shadow, none);
}

.bp-surface-muted {
  --bp-surface-bg: var(--bp-surface-muted);
}

.bp-surface-strong {
  --bp-surface-bg: var(--bp-surface-strong);
}

.bp-surface-inverse {
  --bp-surface-bg: var(--bp-surface-inverse);
  --bp-surface-fg: var(--bp-inverse);
}

.bp-surface-bordered {
  --bp-surface-border-color: var(--bp-outline);
}

.bp-surface-elevated {
  --bp-surface-shadow: var(--bp-shadow-1);
}

.bp-surface-elevation-1 {
  --bp-surface-shadow: var(--bp-shadow-1);
}

.bp-surface-elevation-2 {
  --bp-surface-shadow: var(--bp-shadow-2);
}

.bp-surface-elevation-3 {
  --bp-surface-shadow: var(--bp-shadow-3);
}

.bp-surface-interactive {
  transition: box-shadow 0.2s ease;
}

.bp-surface-interactive:hover {
  box-shadow: var(--bp-surface-hover-shadow, var(--bp-surface-shadow, none));
}

.bp-surface-interactive:focus-visible,
.bp-surface-interactive:focus-within {
  box-shadow: var(--bp-surface-focus-shadow, var(--bp-surface-shadow, none), var(--bp-focus-ring));
}

.bp-surface-clickable {
  cursor: pointer;
}

.bp-surface-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@media (min-width: 640px) {
  .bp-container {
    --bp-container-width-resolved: var(--bp-container-width-sm, var(--bp-container-width, 100%));
    --bp-container-max-width-resolved: var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem));
    --bp-container-padding-x-resolved: var(--bp-container-padding-x-sm, var(--bp-container-padding-sm));
    --bp-container-padding-y-resolved: var(--bp-container-padding-y-sm, var(--bp-container-padding-sm));
  }

  .bp-stack {
    --bp-stack-gap-resolved: var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)));
    --bp-stack-row-gap-resolved: var(--bp-stack-row-gap-sm, var(--bp-stack-row-gap, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))));
    --bp-stack-column-gap-resolved: var(--bp-stack-column-gap-sm, var(--bp-stack-column-gap, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))));
  }

  .bp-columns {
    --bp-columns-gap-resolved: var(--bp-columns-gap-sm, var(--bp-columns-gap, var(--bp-space-4)));
    --bp-columns-row-gap-resolved: var(--bp-columns-row-gap-sm, var(--bp-columns-row-gap, 0));
    --bp-columns-width-resolved: var(--bp-columns-width-sm, var(--bp-columns-width, auto));
  }

  .bp-grid {
    --bp-grid-columns-resolved: var(--bp-grid-columns-sm, var(--bp-grid-columns, auto-fit));
    --bp-grid-min-column-resolved: var(--bp-grid-min-column-sm, var(--bp-grid-min-column, 14rem));
    --bp-grid-gap-resolved: var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)));
    --bp-grid-row-gap-resolved: var(--bp-grid-row-gap-sm, var(--bp-grid-row-gap, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))));
    --bp-grid-column-gap-resolved: var(--bp-grid-column-gap-sm, var(--bp-grid-column-gap, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))));
    --bp-grid-template-columns-resolved: var(--bp-grid-template-columns-sm, var(--bp-grid-template-columns, repeat(var(--bp-grid-columns-resolved), minmax(var(--bp-grid-min-column-resolved), 1fr))));
    --bp-grid-template-rows-resolved: var(--bp-grid-template-rows-sm, var(--bp-grid-template-rows, none));
  }

  .bp-masonry {
    --bp-masonry-count-resolved: var(--bp-masonry-count-sm, var(--bp-masonry-count, auto));
    --bp-masonry-width-resolved: var(--bp-masonry-width-sm, var(--bp-masonry-width, 16rem));
    --bp-masonry-column-gap-resolved: var(--bp-masonry-column-gap-sm, var(--bp-masonry-column-gap, var(--bp-masonry-gap, var(--bp-space-4))));
    --bp-masonry-row-gap-resolved: var(--bp-masonry-row-gap-sm, var(--bp-masonry-row-gap, var(--bp-masonry-gap, var(--bp-space-4))));
  }

  .bp-container.bp-container-fluid-until-sm {
    --bp-container-max-width-resolved: var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem));
  }

  .bp-container.bp-container-fluid-from-sm {
    --bp-container-max-width-resolved: none;
  }

  .bp-show-sm-up {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-sm-up {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-sm-up {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-sm-up {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (max-width: 639.98px) {
  .bp-show-sm-down {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-sm-down {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-sm-down {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-sm-down {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 640px) and (max-width: 767.98px) {
  .bp-show-sm-only {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-sm-only {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-sm-only {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-sm-only {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .bp-container {
    --bp-container-width-resolved: var(--bp-container-width-md, var(--bp-container-width-sm, var(--bp-container-width, 100%)));
    --bp-container-max-width-resolved: var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem)));
    --bp-container-padding-x-resolved: var(--bp-container-padding-x-md, var(--bp-container-padding-x-sm, var(--bp-container-padding-md, var(--bp-container-padding-sm))));
    --bp-container-padding-y-resolved: var(--bp-container-padding-y-md, var(--bp-container-padding-y-sm, var(--bp-container-padding-md, var(--bp-container-padding-sm))));
  }

  .bp-stack {
    --bp-stack-gap-resolved: var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3))));
    --bp-stack-row-gap-resolved: var(--bp-stack-row-gap-md, var(--bp-stack-row-gap-sm, var(--bp-stack-row-gap, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))));
    --bp-stack-column-gap-resolved: var(--bp-stack-column-gap-md, var(--bp-stack-column-gap-sm, var(--bp-stack-column-gap, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))));
  }

  .bp-columns {
    --bp-columns-gap-resolved: var(--bp-columns-gap-md, var(--bp-columns-gap-sm, var(--bp-columns-gap, var(--bp-space-4))));
    --bp-columns-row-gap-resolved: var(--bp-columns-row-gap-md, var(--bp-columns-row-gap-sm, var(--bp-columns-row-gap, 0)));
    --bp-columns-width-resolved: var(--bp-columns-width-md, var(--bp-columns-width-sm, var(--bp-columns-width, auto)));
  }

  .bp-grid {
    --bp-grid-columns-resolved: var(--bp-grid-columns-md, var(--bp-grid-columns-sm, var(--bp-grid-columns, auto-fit)));
    --bp-grid-min-column-resolved: var(--bp-grid-min-column-md, var(--bp-grid-min-column-sm, var(--bp-grid-min-column, 14rem)));
    --bp-grid-gap-resolved: var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4))));
    --bp-grid-row-gap-resolved: var(--bp-grid-row-gap-md, var(--bp-grid-row-gap-sm, var(--bp-grid-row-gap, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))));
    --bp-grid-column-gap-resolved: var(--bp-grid-column-gap-md, var(--bp-grid-column-gap-sm, var(--bp-grid-column-gap, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))));
    --bp-grid-template-columns-resolved: var(--bp-grid-template-columns-md, var(--bp-grid-template-columns-sm, var(--bp-grid-template-columns, repeat(var(--bp-grid-columns-resolved), minmax(var(--bp-grid-min-column-resolved), 1fr)))));
    --bp-grid-template-rows-resolved: var(--bp-grid-template-rows-md, var(--bp-grid-template-rows-sm, var(--bp-grid-template-rows, none)));
  }

  .bp-masonry {
    --bp-masonry-count-resolved: var(--bp-masonry-count-md, var(--bp-masonry-count-sm, var(--bp-masonry-count, auto)));
    --bp-masonry-width-resolved: var(--bp-masonry-width-md, var(--bp-masonry-width-sm, var(--bp-masonry-width, 16rem)));
    --bp-masonry-column-gap-resolved: var(--bp-masonry-column-gap-md, var(--bp-masonry-column-gap-sm, var(--bp-masonry-column-gap, var(--bp-masonry-gap, var(--bp-space-4)))));
    --bp-masonry-row-gap-resolved: var(--bp-masonry-row-gap-md, var(--bp-masonry-row-gap-sm, var(--bp-masonry-row-gap, var(--bp-masonry-gap, var(--bp-space-4)))));
  }

  .bp-container.bp-container-fluid-until-sm,
  .bp-container.bp-container-fluid-until-md {
    --bp-container-max-width-resolved: var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem)));
  }

  .bp-container.bp-container-fluid-from-md {
    --bp-container-max-width-resolved: none;
  }

  .bp-show-md-up {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-md-up {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-md-up {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-md-up {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (max-width: 767.98px) {
  .bp-show-md-down {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-md-down {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-md-down {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-md-down {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .bp-show-md-only {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-md-only {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-md-only {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-md-only {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 1024px) {
  .bp-container {
    --bp-container-width-resolved: var(--bp-container-width-lg, var(--bp-container-width-md, var(--bp-container-width-sm, var(--bp-container-width, 100%))));
    --bp-container-max-width-resolved: var(--bp-container-max-width-lg, var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem))));
    --bp-container-padding-x-resolved: var(--bp-container-padding-x-lg, var(--bp-container-padding-x-md, var(--bp-container-padding-x-sm, var(--bp-container-padding-lg, var(--bp-container-padding-md, var(--bp-container-padding-sm))))));
    --bp-container-padding-y-resolved: var(--bp-container-padding-y-lg, var(--bp-container-padding-y-md, var(--bp-container-padding-y-sm, var(--bp-container-padding-lg, var(--bp-container-padding-md, var(--bp-container-padding-sm))))));
  }

  .bp-stack {
    --bp-stack-gap-resolved: var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))));
    --bp-stack-row-gap-resolved: var(--bp-stack-row-gap-lg, var(--bp-stack-row-gap-md, var(--bp-stack-row-gap-sm, var(--bp-stack-row-gap, var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))))));
    --bp-stack-column-gap-resolved: var(--bp-stack-column-gap-lg, var(--bp-stack-column-gap-md, var(--bp-stack-column-gap-sm, var(--bp-stack-column-gap, var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))))));
  }

  .bp-columns {
    --bp-columns-gap-resolved: var(--bp-columns-gap-lg, var(--bp-columns-gap-md, var(--bp-columns-gap-sm, var(--bp-columns-gap, var(--bp-space-4)))));
    --bp-columns-row-gap-resolved: var(--bp-columns-row-gap-lg, var(--bp-columns-row-gap-md, var(--bp-columns-row-gap-sm, var(--bp-columns-row-gap, 0))));
    --bp-columns-width-resolved: var(--bp-columns-width-lg, var(--bp-columns-width-md, var(--bp-columns-width-sm, var(--bp-columns-width, auto))));
  }

  .bp-grid {
    --bp-grid-columns-resolved: var(--bp-grid-columns-lg, var(--bp-grid-columns-md, var(--bp-grid-columns-sm, var(--bp-grid-columns, auto-fit))));
    --bp-grid-min-column-resolved: var(--bp-grid-min-column-lg, var(--bp-grid-min-column-md, var(--bp-grid-min-column-sm, var(--bp-grid-min-column, 14rem))));
    --bp-grid-gap-resolved: var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))));
    --bp-grid-row-gap-resolved: var(--bp-grid-row-gap-lg, var(--bp-grid-row-gap-md, var(--bp-grid-row-gap-sm, var(--bp-grid-row-gap, var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))))));
    --bp-grid-column-gap-resolved: var(--bp-grid-column-gap-lg, var(--bp-grid-column-gap-md, var(--bp-grid-column-gap-sm, var(--bp-grid-column-gap, var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))))));
    --bp-grid-template-columns-resolved: var(--bp-grid-template-columns-lg, var(--bp-grid-template-columns-md, var(--bp-grid-template-columns-sm, var(--bp-grid-template-columns, repeat(var(--bp-grid-columns-resolved), minmax(var(--bp-grid-min-column-resolved), 1fr))))));
    --bp-grid-template-rows-resolved: var(--bp-grid-template-rows-lg, var(--bp-grid-template-rows-md, var(--bp-grid-template-rows-sm, var(--bp-grid-template-rows, none))));
  }

  .bp-masonry {
    --bp-masonry-count-resolved: var(--bp-masonry-count-lg, var(--bp-masonry-count-md, var(--bp-masonry-count-sm, var(--bp-masonry-count, auto))));
    --bp-masonry-width-resolved: var(--bp-masonry-width-lg, var(--bp-masonry-width-md, var(--bp-masonry-width-sm, var(--bp-masonry-width, 16rem))));
    --bp-masonry-column-gap-resolved: var(--bp-masonry-column-gap-lg, var(--bp-masonry-column-gap-md, var(--bp-masonry-column-gap-sm, var(--bp-masonry-column-gap, var(--bp-masonry-gap, var(--bp-space-4))))));
    --bp-masonry-row-gap-resolved: var(--bp-masonry-row-gap-lg, var(--bp-masonry-row-gap-md, var(--bp-masonry-row-gap-sm, var(--bp-masonry-row-gap, var(--bp-masonry-gap, var(--bp-space-4))))));
  }

  .bp-container.bp-container-fluid-until-sm,
  .bp-container.bp-container-fluid-until-md,
  .bp-container.bp-container-fluid-until-lg {
    --bp-container-max-width-resolved: var(--bp-container-max-width-lg, var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem))));
  }

  .bp-container.bp-container-fluid-from-lg {
    --bp-container-max-width-resolved: none;
  }

  .bp-show-lg-up {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-lg-up {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-lg-up {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-lg-up {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (max-width: 1023.98px) {
  .bp-show-lg-down {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-lg-down {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-lg-down {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-lg-down {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .bp-show-lg-only {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-lg-only {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-lg-only {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-lg-only {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 1280px) {
  .bp-container {
    --bp-container-width-resolved: var(--bp-container-width-xl, var(--bp-container-width-lg, var(--bp-container-width-md, var(--bp-container-width-sm, var(--bp-container-width, 100%)))));
    --bp-container-max-width-resolved: var(--bp-container-max-width-xl, var(--bp-container-max-width-lg, var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem)))));
    --bp-container-padding-x-resolved: var(--bp-container-padding-x-xl, var(--bp-container-padding-x-lg, var(--bp-container-padding-x-md, var(--bp-container-padding-x-sm, var(--bp-container-padding-xl, var(--bp-container-padding-lg, var(--bp-container-padding-md, var(--bp-container-padding-sm))))))));
    --bp-container-padding-y-resolved: var(--bp-container-padding-y-xl, var(--bp-container-padding-y-lg, var(--bp-container-padding-y-md, var(--bp-container-padding-y-sm, var(--bp-container-padding-xl, var(--bp-container-padding-lg, var(--bp-container-padding-md, var(--bp-container-padding-sm))))))));
  }

  .bp-stack {
    --bp-stack-gap-resolved: var(--bp-stack-gap-xl, var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3))))));
    --bp-stack-row-gap-resolved: var(--bp-stack-row-gap-xl, var(--bp-stack-row-gap-lg, var(--bp-stack-row-gap-md, var(--bp-stack-row-gap-sm, var(--bp-stack-row-gap, var(--bp-stack-gap-xl, var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))))))));
    --bp-stack-column-gap-resolved: var(--bp-stack-column-gap-xl, var(--bp-stack-column-gap-lg, var(--bp-stack-column-gap-md, var(--bp-stack-column-gap-sm, var(--bp-stack-column-gap, var(--bp-stack-gap-xl, var(--bp-stack-gap-lg, var(--bp-stack-gap-md, var(--bp-stack-gap-sm, var(--bp-stack-gap, var(--bp-space-3)))))))))));
  }

  .bp-columns {
    --bp-columns-gap-resolved: var(--bp-columns-gap-xl, var(--bp-columns-gap-lg, var(--bp-columns-gap-md, var(--bp-columns-gap-sm, var(--bp-columns-gap, var(--bp-space-4)))))));
    --bp-columns-row-gap-resolved: var(--bp-columns-row-gap-xl, var(--bp-columns-row-gap-lg, var(--bp-columns-row-gap-md, var(--bp-columns-row-gap-sm, var(--bp-columns-row-gap, 0)))));
    --bp-columns-width-resolved: var(--bp-columns-width-xl, var(--bp-columns-width-lg, var(--bp-columns-width-md, var(--bp-columns-width-sm, var(--bp-columns-width, auto))))));
  }

  .bp-grid {
    --bp-grid-columns-resolved: var(--bp-grid-columns-xl, var(--bp-grid-columns-lg, var(--bp-grid-columns-md, var(--bp-grid-columns-sm, var(--bp-grid-columns, auto-fit)))));
    --bp-grid-min-column-resolved: var(--bp-grid-min-column-xl, var(--bp-grid-min-column-lg, var(--bp-grid-min-column-md, var(--bp-grid-min-column-sm, var(--bp-grid-min-column, 14rem)))));
    --bp-grid-gap-resolved: var(--bp-grid-gap-xl, var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4))))));
    --bp-grid-row-gap-resolved: var(--bp-grid-row-gap-xl, var(--bp-grid-row-gap-lg, var(--bp-grid-row-gap-md, var(--bp-grid-row-gap-sm, var(--bp-grid-row-gap, var(--bp-grid-gap-xl, var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))))))));
    --bp-grid-column-gap-resolved: var(--bp-grid-column-gap-xl, var(--bp-grid-column-gap-lg, var(--bp-grid-column-gap-md, var(--bp-grid-column-gap-sm, var(--bp-grid-column-gap, var(--bp-grid-gap-xl, var(--bp-grid-gap-lg, var(--bp-grid-gap-md, var(--bp-grid-gap-sm, var(--bp-grid-gap, var(--bp-space-4)))))))))));
    --bp-grid-template-columns-resolved: var(--bp-grid-template-columns-xl, var(--bp-grid-template-columns-lg, var(--bp-grid-template-columns-md, var(--bp-grid-template-columns-sm, var(--bp-grid-template-columns, repeat(var(--bp-grid-columns-resolved), minmax(var(--bp-grid-min-column-resolved), 1fr)))))));
    --bp-grid-template-rows-resolved: var(--bp-grid-template-rows-xl, var(--bp-grid-template-rows-lg, var(--bp-grid-template-rows-md, var(--bp-grid-template-rows-sm, var(--bp-grid-template-rows, none)))));
  }

  .bp-masonry {
    --bp-masonry-count-resolved: var(--bp-masonry-count-xl, var(--bp-masonry-count-lg, var(--bp-masonry-count-md, var(--bp-masonry-count-sm, var(--bp-masonry-count, auto)))));
    --bp-masonry-width-resolved: var(--bp-masonry-width-xl, var(--bp-masonry-width-lg, var(--bp-masonry-width-md, var(--bp-masonry-width-sm, var(--bp-masonry-width, 16rem)))));
    --bp-masonry-column-gap-resolved: var(--bp-masonry-column-gap-xl, var(--bp-masonry-column-gap-lg, var(--bp-masonry-column-gap-md, var(--bp-masonry-column-gap-sm, var(--bp-masonry-column-gap, var(--bp-masonry-gap, var(--bp-space-4)))))));
    --bp-masonry-row-gap-resolved: var(--bp-masonry-row-gap-xl, var(--bp-masonry-row-gap-lg, var(--bp-masonry-row-gap-md, var(--bp-masonry-row-gap-sm, var(--bp-masonry-row-gap, var(--bp-masonry-gap, var(--bp-space-4)))))));
  }

  .bp-container.bp-container-fluid-until-sm,
  .bp-container.bp-container-fluid-until-md,
  .bp-container.bp-container-fluid-until-lg,
  .bp-container.bp-container-fluid-until-xl {
    --bp-container-max-width-resolved: var(--bp-container-max-width-xl, var(--bp-container-max-width-lg, var(--bp-container-max-width-md, var(--bp-container-max-width-sm, var(--bp-container-max-width, 72rem)))));
  }

  .bp-container.bp-container-fluid-from-xl {
    --bp-container-max-width-resolved: none;
  }

  .bp-show-xl-up {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-xl-up {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-xl-up {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-xl-up {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (max-width: 1279.98px) {
  .bp-show-xl-down {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-xl-down {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-xl-down {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-xl-down {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (min-width: 1280px) {
  .bp-show-xl-only {
    display: var(--bp-responsive-display, block);
  }

  .bp-hide-xl-only {
    display: none;
  }

  .bp-responsive-mode-visibility.bp-show-xl-only {
    visibility: visible;
  }

  .bp-responsive-mode-visibility.bp-hide-xl-only {
    display: var(--bp-responsive-display, block);
    visibility: hidden;
  }
}

@media (max-width: 1279.98px) {
  .bp-sidebar-collapse-xl {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-sidebar-collapse-xl .bp-sidebar-layout-main,
  .bp-sidebar-collapse-xl .bp-sidebar-layout-sidebar {
    grid-column: 1 / -1;
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-overlay {
    position: relative;
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-sidebar-collapsed-width, var(--bp-sidebar-width, 16rem));
    max-width: 100%;
    z-index: 2;
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-overlay.bp-sidebar-open .bp-sidebar-layout-scrim {
    display: block;
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-start {
    left: 0;
    width: var(--bp-sidebar-start-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-end {
    right: 0;
    width: var(--bp-sidebar-end-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-xl.bp-sidebar-collapse-hidden .bp-sidebar-layout-sidebar {
    display: none;
  }

  .bp-app-shell-collapse-xl > .bp-app-shell-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-app-shell-collapse-xl > .bp-app-shell-sidebar-resize-handle,
  .bp-app-shell-collapse-xl > .bp-app-shell-body > .bp-app-shell-sidebar-resize-handle {
    display: none;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-sidebar-span-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-sidebar-span-shell > .bp-app-shell-body,
  .bp-app-shell-collapse-xl.bp-app-shell-sidebar-span-shell > .bp-app-shell-sidebar {
    grid-column: 1 / -1;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-body {
    position: relative;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay.bp-app-shell-sidebar-span-shell {
    position: relative;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-app-shell-sidebar-width, 16rem);
    max-width: 100%;
    z-index: 2;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-start,
  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-start {
    left: 0;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-end,
  .bp-app-shell-collapse-xl.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-end {
    right: 0;
  }

  .bp-app-shell-collapse-xl.bp-app-shell-collapse-hidden > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-xl.bp-app-shell-collapse-hidden > .bp-app-shell-body > .bp-app-shell-sidebar {
    display: none;
  }

  .bp-split-pane-collapse-xl.bp-split-pane-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-xl.bp-split-pane-vertical {
    grid-template-rows: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-xl .bp-split-pane-secondary {
    display: none;
  }

  .bp-split-pane-collapse-xl.bp-split-pane-collapse-gutter .bp-split-pane-gutter {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .bp-sidebar-collapse-lg {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-sidebar-collapse-lg .bp-sidebar-layout-main,
  .bp-sidebar-collapse-lg .bp-sidebar-layout-sidebar {
    grid-column: 1 / -1;
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-overlay {
    position: relative;
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-sidebar-collapsed-width, var(--bp-sidebar-width, 16rem));
    max-width: 100%;
    z-index: 2;
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-overlay.bp-sidebar-open .bp-sidebar-layout-scrim {
    display: block;
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-start {
    left: 0;
    width: var(--bp-sidebar-start-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-end {
    right: 0;
    width: var(--bp-sidebar-end-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-lg.bp-sidebar-collapse-hidden .bp-sidebar-layout-sidebar {
    display: none;
  }

  .bp-app-shell-collapse-lg > .bp-app-shell-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-app-shell-collapse-lg > .bp-app-shell-sidebar-resize-handle,
  .bp-app-shell-collapse-lg > .bp-app-shell-body > .bp-app-shell-sidebar-resize-handle {
    display: none;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-sidebar-span-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-sidebar-span-shell > .bp-app-shell-body,
  .bp-app-shell-collapse-lg.bp-app-shell-sidebar-span-shell > .bp-app-shell-sidebar {
    grid-column: 1 / -1;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-body {
    position: relative;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay.bp-app-shell-sidebar-span-shell {
    position: relative;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-app-shell-sidebar-width, 16rem);
    max-width: 100%;
    z-index: 2;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-start,
  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-start {
    left: 0;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-end,
  .bp-app-shell-collapse-lg.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-end {
    right: 0;
  }

  .bp-app-shell-collapse-lg.bp-app-shell-collapse-hidden > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-lg.bp-app-shell-collapse-hidden > .bp-app-shell-body > .bp-app-shell-sidebar {
    display: none;
  }

  .bp-split-pane-collapse-lg.bp-split-pane-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-lg.bp-split-pane-vertical {
    grid-template-rows: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-lg .bp-split-pane-secondary {
    display: none;
  }

  .bp-split-pane-collapse-lg.bp-split-pane-collapse-gutter .bp-split-pane-gutter {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .bp-sidebar-collapse-md {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-sidebar-collapse-md .bp-sidebar-layout-main,
  .bp-sidebar-collapse-md .bp-sidebar-layout-sidebar {
    grid-column: 1 / -1;
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-overlay {
    position: relative;
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-sidebar-collapsed-width, var(--bp-sidebar-width, 16rem));
    max-width: 100%;
    z-index: 2;
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-overlay.bp-sidebar-open .bp-sidebar-layout-scrim {
    display: block;
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-start {
    left: 0;
    width: var(--bp-sidebar-start-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-end {
    right: 0;
    width: var(--bp-sidebar-end-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-md.bp-sidebar-collapse-hidden .bp-sidebar-layout-sidebar {
    display: none;
  }

  .bp-app-shell-collapse-md > .bp-app-shell-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-app-shell-collapse-md > .bp-app-shell-sidebar-resize-handle,
  .bp-app-shell-collapse-md > .bp-app-shell-body > .bp-app-shell-sidebar-resize-handle {
    display: none;
  }

  .bp-app-shell-collapse-md.bp-app-shell-sidebar-span-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .bp-app-shell-collapse-md.bp-app-shell-sidebar-span-shell > .bp-app-shell-body,
  .bp-app-shell-collapse-md.bp-app-shell-sidebar-span-shell > .bp-app-shell-sidebar {
    grid-column: 1 / -1;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-body {
    position: relative;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay.bp-app-shell-sidebar-span-shell {
    position: relative;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-app-shell-sidebar-width, 16rem);
    max-width: 100%;
    z-index: 2;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-start,
  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-start {
    left: 0;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-end,
  .bp-app-shell-collapse-md.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-end {
    right: 0;
  }

  .bp-app-shell-collapse-md.bp-app-shell-collapse-hidden > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-md.bp-app-shell-collapse-hidden > .bp-app-shell-body > .bp-app-shell-sidebar {
    display: none;
  }

  .bp-split-pane-collapse-md.bp-split-pane-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-md.bp-split-pane-vertical {
    grid-template-rows: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-md .bp-split-pane-secondary {
    display: none;
  }

  .bp-split-pane-collapse-md.bp-split-pane-collapse-gutter .bp-split-pane-gutter {
    display: none;
  }
}

@media (max-width: 639.98px) {
  .bp-sidebar-collapse-sm {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-sidebar-collapse-sm .bp-sidebar-layout-main,
  .bp-sidebar-collapse-sm .bp-sidebar-layout-sidebar {
    grid-column: 1 / -1;
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-overlay {
    position: relative;
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-sidebar-collapsed-width, var(--bp-sidebar-width, 16rem));
    max-width: 100%;
    z-index: 2;
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-overlay.bp-sidebar-open .bp-sidebar-layout-scrim {
    display: block;
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-start {
    left: 0;
    width: var(--bp-sidebar-start-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-start-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-overlay .bp-sidebar-layout-sidebar-end {
    right: 0;
    width: var(--bp-sidebar-end-collapsed-width, var(--bp-sidebar-collapsed-width, var(--bp-sidebar-end-width, var(--bp-sidebar-width, 16rem))));
  }

  .bp-sidebar-collapse-sm.bp-sidebar-collapse-hidden .bp-sidebar-layout-sidebar {
    display: none;
  }

  .bp-app-shell-collapse-sm > .bp-app-shell-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-app-shell-collapse-sm > .bp-app-shell-sidebar-resize-handle,
  .bp-app-shell-collapse-sm > .bp-app-shell-body > .bp-app-shell-sidebar-resize-handle {
    display: none;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-sidebar-span-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-sidebar-span-shell > .bp-app-shell-body,
  .bp-app-shell-collapse-sm.bp-app-shell-sidebar-span-shell > .bp-app-shell-sidebar {
    grid-column: 1 / -1;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-body {
    position: relative;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay.bp-app-shell-sidebar-span-shell {
    position: relative;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bp-app-shell-sidebar-width, 16rem);
    max-width: 100%;
    z-index: 2;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-start,
  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-start {
    left: 0;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-sidebar-end,
  .bp-app-shell-collapse-sm.bp-app-shell-collapse-overlay > .bp-app-shell-body > .bp-app-shell-sidebar-end {
    right: 0;
  }

  .bp-app-shell-collapse-sm.bp-app-shell-collapse-hidden > .bp-app-shell-sidebar,
  .bp-app-shell-collapse-sm.bp-app-shell-collapse-hidden > .bp-app-shell-body > .bp-app-shell-sidebar {
    display: none;
  }

  .bp-split-pane-collapse-sm.bp-split-pane-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-sm.bp-split-pane-vertical {
    grid-template-rows: minmax(0, 1fr);
  }

  .bp-split-pane-collapse-sm .bp-split-pane-secondary {
    display: none;
  }

  .bp-split-pane-collapse-sm.bp-split-pane-collapse-gutter .bp-split-pane-gutter {
    display: none;
  }
}