@charset "UTF-8";
/* global bifrost css, included in both @intility/bifrost-react and @intility/bifrost-css packages */
:root {
  --bf-underline-offset: 0.214em;
  --font-satoshi: "Satoshi";
  --font-open-sans: "Open Sans";
}

html {
  /* prevent nav top bar from obscuring top section of an element scrolled to when using a url hash */
  scroll-padding-top: calc(var(--bf-nav-top-height) + var(--bfs24));
  /* first value: thumb color, second value: track color */
  scrollbar-color: var(--bfc-base-dimmed) var(--bfc-base-3);
}

body {
  line-height: 1.5;
  margin: 0;
  scrollbar-color: var(--bfc-base-dimmed) transparent;
  /* Eirik's mac hack */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent font scaling for mobile devices in landscape orientation.
  prefix needed for Safari on iOS and Firefox on Android */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: none;
}

/* separate selector to confuse css minifiers that erroneously remove the
required webkit prefix above for Safari on iOS and Firefox on Android */
/* stylelint-disable-next-line no-duplicate-selectors */
body {
  text-size-adjust: none;
}

body,
.bf-options {
  display: flow-root;
  color: var(--bfc-base-c);
  background-color: var(--bfc-base);
  /* todo: remove `vh` fallback when browser support for `dvh` is better */
  min-height: 100vh;
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  min-height: 100dvh;
}

/* normalize native html inputs */
button,
input,
optgroup,
select,
textarea {
  /* prevent inputs and buttons from inheriting font-feature-settings
  while still defaulting to arial on windows */
  font-family: inherit;
  font-weight: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
}

/* disable all transitions, used for temporarily disabling color transitions
while changing theme */
.bf-no-transitions,
.bf-no-transitions * {
  transition: none !important;
}

/* padding for devices with a 'notch' a.k.a. 'busslomme' */
.bf-nav ~ main,
.bf-nav-main,
.bf-main,
.bf-notch {
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

/* a negative margin enables content inside main to stretch full width */
.bf-negative-notch {
  margin-right: calc(0px - env(safe-area-inset-right));
  margin-left: calc(0px - env(safe-area-inset-left));
}

/* Scrollbar */
.bf-scrollbar-small,
.bf-dropdown-content {
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  html,
  .bf-scrollbar,
  .bf-scrollbar-small {
    scroll-behavior: smooth;
  }
}
@media (min-width: 600px) and (min-height: 600px) {
  /* ::-webkit-scrollbar-* css is overridden by `scrollbar-color` in all browsers except Safari.
  todo: remove when Safari adds support for scrollbar-color https://bugs.webkit.org/show_bug.cgi?id=231590 */
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar {
    height: 18px;
    width: 18px;
    background-color: transparent;
  }
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar-thumb {
    height: 30px;
    width: 30px;
    border: 4px solid transparent;
    background-color: var(--bfc-base-dimmed);
    background-clip: padding-box;
    border-radius: var(--bf-radius-full);
  }
  :is(html, body).bf-scrollbar:is(::-webkit-scrollbar,
  ::-webkit-scrollbar-corner) {
    background-color: var(--bfc-base-3);
  }
  /* small chrome scrollbar */
  .bf-scrollbar-small::-webkit-scrollbar,
  .bf-dropdown-content::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  :where(.bf-textarea, .bf-scrollbar, .bf-scrollbar-small)::-webkit-resizer {
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cline%20x1%3D%2211%22%20y1%3D%228%22%20x2%3D%228%22%20y2%3D%2211%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%224.4%22%20x2%3D%224.4%22%20y2%3D%2211%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3Cpath%20d%3D%22M11%2C1L1%2C11%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
}
.bf-break-word {
  overflow-wrap: break-word;
  hyphens: auto;
  /* Firefox re-renders fonts when not specifying this??? */
  hyphenate-character: "-";
}

.bf-content,
.bf-elements {
  font-size: var(--bf-font-size-m);
}

:where(.bf-content, .bf-elements) p,
.bf-p {
  font-size: var(--bf-font-size-m);
  margin: 0;
}

:where(.bf-content) p {
  margin: var(--bfs16) 0;
}

:where(.bf-elements) pre,
.bf-pre {
  margin: 0;
}

/* link, title-link, and neutral-link styles */
.bf-link:is(:hover, :active),
:where(.bf-content, .bf-elements) a:is(:hover, :active) {
  text-decoration-thickness: 0.142em;
  text-decoration-style: solid;
}

:where(.bf-content, .bf-elements) a,
.bf-link {
  cursor: pointer;
  color: var(--bfc-base-c-theme);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
  text-decoration-thickness: 0.0714em;
}

.bf-title-link {
  color: var(--bfc-base-c-theme);
  text-decoration-line: none;
  cursor: pointer;
}

.bf-title-link:is(:hover, :active) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
}

.bf-neutral-link,
.bf-neutral-link:hover {
  color: inherit;
  text-decoration-line: none;
}

.bf-neutral-link:hover:where(:not(:disabled)) .bf-neutral-link-text {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
}

/* link styling for buttons */
:where(button):is(.bf-link, .bf-title-link, .bf-neutral-link) {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
  text-align: inherit;
}

button:is(.bf-link):disabled {
  text-decoration-line: underline;
}

button:is(.bf-link, .bf-title-link, .bf-neutral-link):disabled {
  text-decoration-line: none;
  cursor: default;
}

/* focus state */
:where(.bf-link, .bf-title-link):focus,
:where(.bf-content, .bf-elements) a:where(:focus) {
  outline: none;
}

:where(.bf-link, .bf-title-link, .bf-neutral-link):focus-visible,
:where(.bf-content, .bf-elements) a:where(:focus-visible) {
  outline: 2px dotted currentcolor;
  outline-offset: 2px;
  -moz-outline-radius: var(--bf-radius-xs);
  border-radius: var(--bf-radius-xs);
}

/* open sans helper class and default for body */
body,
.bf-open-sans {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-family: var(--font-open-sans, "Open Sans"), "Open Sans", "Segoe UI", sans-serif;
  font-feature-settings: normal;
}

/* all things satoshi */
.bf-satoshi,
.bf-drawer-header,
.bf-modal-header,
.bf-nav-logo-name,
.bf-h1,
.bf-h2,
.bf-h3,
.bf-h4,
.bf-h5,
.bf-h6,
:where(.bf-content, .bf-elements) :is(h1, h2, h3, h4, h5, h6) {
  /* on windows, sans-serif is the same as 'Arial'
  which mis-renders badly with these font-feature-settings,
  so we use Segoe UI as backup font instead */
  font-family: Satoshi, "Segoe UI", sans-serif;
  font-family: var(--font-satoshi, Satoshi), Satoshi, "Segoe UI", sans-serif;
  font-feature-settings: "ss02", "ss03", "ss04", "liga" 0;
}

/* headings */
:where(.bf-content, .bf-elements) h1,
.bf-h1 {
  font-size: var(--bf-font-size-h1);
  font-weight: 660;
  line-height: 1.26;
  margin: 0;
}

:where(.bf-content) h1 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs12);
}

:where(.bf-content, .bf-elements) h2,
.bf-h2 {
  font-size: var(--bf-font-size-h2);
  font-weight: 660;
  line-height: 1.36;
  margin: 0;
}

:where(.bf-content) h2 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h3,
.bf-h3 {
  font-size: var(--bf-font-size-h3);
  font-weight: 700;
  line-height: 1.39;
  margin: 0;
}

:where(.bf-content) h3 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h4,
.bf-h4 {
  font-size: var(--bf-font-size-h4);
  font-weight: 720;
  line-height: 1.47;
  margin: 0;
}

:where(.bf-content) h4 {
  margin-top: var(--bfs24);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h5,
.bf-h5 {
  font-size: var(--bf-font-size-h5);
  font-weight: 740;
  line-height: 1.36;
  margin: 0;
}

:where(.bf-content) h5 {
  margin-top: var(--bfs16);
  margin-bottom: var(--bfs16);
}

:where(.bf-content, .bf-elements) small,
.bf-small {
  font-size: var(--bf-font-size-s);
}

.bf-medium {
  font-size: var(--bf-font-size-m);
}

:where(.bf-content, .bf-elements) big,
.bf-large {
  font-size: var(--bf-font-size-l);
}

:where(.bf-content, .bf-elements) code,
.bf-code {
  font-family: Consolas, monospace;
  background-color: hsla(var(--bfc-base-c-inverted-hsl), 0.1);
  padding: 0 0.2rem;
  margin: 0 0.1rem;
  border-radius: var(--bf-radius-xs);
}

:where(.bf-content, .bf-elements) pre code {
  display: inline-block;
}

:where(.bf-content, .bf-elements) a code,
a .bf-code {
  color: inherit;
  text-decoration-line: inherit;
  text-decoration-style: inherit;
}

.bf-em {
  font-style: italic;
}

:where(.bf-content, .bf-elements) :is(b, strong),
.bf-strong {
  font-weight: 600;
}

/* list styling */
:where(.bf-content, .bf-elements) :is(ul, ol),
.bf-ul,
.bf-ol {
  padding-left: var(--bfs24);
  margin: 0;
}

:where(.bf-content) :is(ul, ol) {
  margin: var(--bfs16) 0;
}

:where(.bf-content, .bf-elements) :is(ul, ol) ::marker,
:is(.bf-ul, .bf-ol) ::marker {
  color: var(--bfc-base-c-theme);
}

:where(.bf-content, .bf-elements) ol ::marker,
.bf-ol ::marker {
  font-weight: 600;
}

:is(.bf-ul, .bf-ol) :where(li),
.bf-li,
.bf-toc :where(li) {
  margin: 0;
}

/* 8px spacing between list items. try to keep specificity consistent
 * (0,0,1 for .bf-elements and .bf-content, and 0,1,0 for other classes) */
:where(.bf-content, .bf-elements) li + :where(li),
:is(.bf-ul, .bf-ol) :where(li + li),
.bf-li + :where(.bf-li),
.bf-toc :where(li + li) {
  margin-top: 8px;
}

/* nested lists */
:where(.bf-content, .bf-elements) li :is(ul, ol),
:is(.bf-ul, .bf-ol) :where(ul, ol) {
  margin: 8px 0 0;
}

/* #region Table of contents */
/* first level */
.bf-toc {
  padding: 0;
  margin: 0;
}

.bf-toc li {
  position: relative;
  list-style: none;
}

/* second level */
.bf-toc :is(ul, ol) {
  margin: 8px 0 0;
  padding: 0;
}

.bf-toc :is(ul, ol) li {
  padding-left: 1.5rem;
}

.bf-toc :is(ul, ol) li::before {
  content: "¬"; /* '¬' supported by open sans */
  position: absolute;
  left: 6px;
  color: var(--bfc-base-c-2);
  rotate: 180deg;
  scale: 1.3;
  transform-origin: 50% 53%;
}

/* third level */
.bf-toc :is(ul, ol) :is(ul, ol) li::before {
  content: "−"; /* '−' supported by open sans (slightly longer than a dash '-') */
  rotate: unset;
}

/* #endregion */
/* todo: remove in 7.0 */
.bf-intility-logo > a {
  height: var(--bfs56);
  border-bottom: var(--bf-border);
  display: block;
  line-height: 1;
  cursor: pointer;
}

/* todo: remove in 7.0 */
.bf-intility-logo > a:focus-visible {
  outline: 1px dashed var(--bfc-theme);
  outline-offset: -1px;
}

/* todo: remove in 7.0 */
.bf-intility-logo svg {
  margin: 17px 19px 0;
  height: var(--bfs24);
  fill: var(--bfc-base-c);
}

/* #region highlight header with id matching hash from current url */
.bf-highlight-target :target:is(h1, h2, h3, h4, h5, h6) {
  animation: bf-highlight-target-scale 0.6s 3, bf-highlight-target-color 12s 1;
  transform-origin: 20% 50%;
}

@keyframes bf-highlight-target-scale {
  50% {
    scale: 0.99;
  }
}
@keyframes bf-highlight-target-color {
  0% {
    color: var(--bfc-base-c-theme);
  }
}
/* #endregion */
/* #region recharts accessibilityLayer focus outline */
.recharts-surface:focus,
.recharts-layer:focus {
  outline: none;
}

.recharts-surface:focus-visible,
.recharts-layer:focus-visible {
  border-radius: var(--bf-radius-xs);
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* #endregion */
/* #region loading stripes overlay */
.bf-loading-stripes {
  position: relative;
  overflow: hidden;
}

.bf-loading-stripes::after {
  inset: 0;
  content: "";
  position: absolute;
  background-image: linear-gradient(-45deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%);
  background-size: 50px 50px;
  animation: loading-stripes 2s linear infinite;
  width: calc(100% + 100px);
  opacity: 0.1;
}

@keyframes loading-stripes {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50px, 0, 0);
  }
}
/* #endregion */
/* #region teal theme (default) */
/* #endregion */
:root,
::backdrop {
  --bfc-overlay: rgba(0, 0, 0, 0.7);
  --bfc-overlay-c: white;
}

html,
.bf-darkmode,
[data-bf-color-mode=dark] {
  color-scheme: only dark;
  --bf-mode: dark;
  --bfc-base-hsl: 212, 70%, 9%;
  --bfc-base-2-hsl: 210, 64%, 11%;
  --bfc-base-3-hsl: 210, 55%, 13%;
  --bfc-base-c-hsl: 240, 14%, 96%;
  --bfc-base-c-2: hsl(212, 15%, 60%);
  --bfc-base-c-success: hsl(157, 100%, 48%);
  --bfc-base-c-warning: var(--bfc-warning);
  --bfc-base-c-alert: hsl(7, 100%, 60%);
  --bfc-base-c-wcag: hsl(220, 10%, 43%);
  --bfc-base-c-disabled: hsl(212, 18%, 35%);
  --bfc-base-dimmed-hsl: 212, 29%, 20%;
  --bfc-base-dimmed-2-hsl: 210, 39%, 17%;
  --bfc-base-dimmed-3-hsl: 210, 29%, 22%;
  --bfc-base-disabled-hsl: 212, 22%, 34%;
  --bfc-base-c-inverted-hsl: 0, 0%, 100%;
  --bfc-base-c-inverted-2: hsl(235, 16%, 85%);
  --bfc-base-c-inverted-3: hsl(216, 7%, 86%);
  --bfc-neutral-hsl: var(--gray-100-hsl);
  --bfc-neutral-2-hsl: var(--gray-50-hsl);
  --bfc-neutral-c-hsl: var(--gray-800-hsl);
  --bfc-neutral-hc: var(--gray-920);
  --bfc-neutral-fade-hsl: var(--gray-800-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-100-hsl);
  --bfc-brand-hsl: var(--teal-300-hsl);
  --bfc-brand-c-hsl: var(--teal-800-hsl);
  --bfc-brand-hc: var(--base-920);
  --bfc-brand-fade-hsl: var(--teal-800-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-300-hsl);
  --bfc-chill-hsl: var(--purple-300-hsl);
  --bfc-chill-c-hsl: var(--purple-800-hsl);
  --bfc-chill-hc: var(--base-920);
  --bfc-chill-fade-hsl: var(--purple-800-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-300-hsl);
  --bfc-attn-hsl: var(--pink-300-hsl);
  --bfc-attn-c-hsl: var(--pink-800-hsl);
  --bfc-attn-hc: var(--base-920);
  --bfc-attn-fade-hsl: var(--pink-800-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-300-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 157, 100%, 23%;
  --bfc-success-fade-c-hsl: 157, 100%, 80%;
  --bfc-warning-fade-hsl: var(--yellow-800-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-300-hsl);
  --bfc-alert-fade-hsl: 346, 26%, 23%;
  --bfc-alert-fade-2: hsl(7, 100%, 13%);
  --bfc-alert-fade-c-hsl: 7, 100%, 70%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 70%;
  --bfc-shadow: rgba(0, 0, 0, 0.3);
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-lightmode,
[data-bf-color-mode=light] {
  color-scheme: only light;
  --bf-mode: light;
  --bfc-base-hsl: 238, 15%, 96%;
  --bfc-base-2-hsl: 238, 10%, 98%;
  --bfc-base-3-hsl: 0, 0%, 100%;
  --bfc-base-c-hsl: 212, 70%, 9%;
  --bfc-base-c-2: hsl(238, 16%, 40%);
  --bfc-base-c-success: hsl(157, 100%, 24%);
  --bfc-base-c-warning: var(--yellow-570);
  --bfc-base-c-alert: hsl(7, 77%, 41%);
  --bfc-base-c-wcag: hsl(240, 5%, 57%);
  --bfc-base-c-disabled: hsl(238, 18%, 65%);
  --bfc-base-dimmed-hsl: 238, 16%, 85%;
  --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
  --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
  --bfc-base-disabled-hsl: 238, 18%, 65%;
  --bfc-base-c-inverted-hsl: 210, 55%, 13%;
  --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
  --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
  --bfc-neutral-hsl: var(--gray-920-hsl);
  --bfc-neutral-2-hsl: var(--gray-970-hsl);
  --bfc-neutral-c-hsl: var(--gray-150-hsl);
  --bfc-neutral-hc: white;
  --bfc-neutral-fade-hsl: var(--gray-150-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
  --bfc-brand-hsl: var(--teal-570-hsl);
  --bfc-brand-c-hsl: var(--teal-120-hsl);
  --bfc-brand-hc: white;
  --bfc-brand-fade-hsl: var(--teal-120-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
  --bfc-chill-hsl: var(--purple-570-hsl);
  --bfc-chill-c-hsl: var(--purple-120-hsl);
  --bfc-chill-hc: white;
  --bfc-chill-fade-hsl: var(--purple-120-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
  --bfc-attn-hsl: var(--pink-570-hsl);
  --bfc-attn-c-hsl: var(--pink-120-hsl);
  --bfc-attn-hc: white;
  --bfc-attn-fade-hsl: var(--pink-120-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 144, 100%, 82%;
  --bfc-success-fade-c-hsl: 144, 100%, 20%;
  --bfc-warning-fade-hsl: var(--yellow-120-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
  --bfc-alert-fade-hsl: 8, 100%, 94%;
  --bfc-alert-fade-2: hsl(7, 100%, 95%);
  --bfc-alert-fade-c-hsl: 7, 77%, 41%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
  --bfc-shadow: rgba(0, 0, 0, 0.1);
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  html {
    color-scheme: only light;
    --bf-mode: light;
    --bfc-base-hsl: 238, 15%, 96%;
    --bfc-base-2-hsl: 238, 10%, 98%;
    --bfc-base-3-hsl: 0, 0%, 100%;
    --bfc-base-c-hsl: 212, 70%, 9%;
    --bfc-base-c-2: hsl(238, 16%, 40%);
    --bfc-base-c-success: hsl(157, 100%, 24%);
    --bfc-base-c-warning: var(--yellow-570);
    --bfc-base-c-alert: hsl(7, 77%, 41%);
    --bfc-base-c-wcag: hsl(240, 5%, 57%);
    --bfc-base-c-disabled: hsl(238, 18%, 65%);
    --bfc-base-dimmed-hsl: 238, 16%, 85%;
    --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
    --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
    --bfc-base-disabled-hsl: 238, 18%, 65%;
    --bfc-base-c-inverted-hsl: 210, 55%, 13%;
    --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
    --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
    --bfc-neutral-hsl: var(--gray-920-hsl);
    --bfc-neutral-2-hsl: var(--gray-970-hsl);
    --bfc-neutral-c-hsl: var(--gray-150-hsl);
    --bfc-neutral-hc: white;
    --bfc-neutral-fade-hsl: var(--gray-150-hsl);
    --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
    --bfc-brand-hsl: var(--teal-570-hsl);
    --bfc-brand-c-hsl: var(--teal-120-hsl);
    --bfc-brand-hc: white;
    --bfc-brand-fade-hsl: var(--teal-120-hsl);
    --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
    --bfc-chill-hsl: var(--purple-570-hsl);
    --bfc-chill-c-hsl: var(--purple-120-hsl);
    --bfc-chill-hc: white;
    --bfc-chill-fade-hsl: var(--purple-120-hsl);
    --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
    --bfc-attn-hsl: var(--pink-570-hsl);
    --bfc-attn-c-hsl: var(--pink-120-hsl);
    --bfc-attn-hc: white;
    --bfc-attn-fade-hsl: var(--pink-120-hsl);
    --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
    --bfc-success-hsl: 157, 100%, 48%;
    --bfc-success-c-hsl: 157, 100%, 10%;
    --bfc-success-hc: var(--base-920);
    --bfc-success-fade-hsl: 144, 100%, 82%;
    --bfc-success-fade-c-hsl: 144, 100%, 20%;
    --bfc-warning-fade-hsl: var(--yellow-120-hsl);
    --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
    --bfc-alert-fade-hsl: 8, 100%, 94%;
    --bfc-alert-fade-2: hsl(7, 100%, 95%);
    --bfc-alert-fade-c-hsl: 7, 77%, 41%;
    --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
    --bfc-shadow: rgba(0, 0, 0, 0.1);
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
  html:not(.bf-darkmode, [data-bf-color-mode=dark]) .bf-dark-only {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.bf-lightmode, [data-bf-color-mode=light]) .bf-light-only {
    display: none !important;
  }
}
html:is(.bf-darkmode, [data-bf-color-mode=dark]) .bf-light-only,
html:is(.bf-lightmode, [data-bf-color-mode=light]) .bf-dark-only {
  display: none !important;
}

.bf-theme-teal,
.bf-theme-teal.bf-darkmode,
.bf-darkmode .bf-theme-teal,
[data-bf-color-mode=dark] .bf-theme-teal,
.bf-lightmode .bf-darkmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-theme-teal.bf-lightmode,
.bf-lightmode .bf-theme-teal,
[data-bf-color-mode=light] .bf-theme-teal,
.bf-darkmode .bf-lightmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-teal {
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
}
/* #region purple theme */
.bf-theme-purple,
.bf-theme-purple.bf-darkmode,
.bf-darkmode .bf-theme-purple,
[data-bf-color-mode=dark] .bf-theme-purple,
.bf-lightmode .bf-darkmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-300-hsl);
  --bfc-theme-2: hsl(var(--purple-250-hsl));
  --bfc-theme-3: hsl(var(--purple-200-hsl));
  --bfc-theme-c-hsl: var(--purple-800-hsl);
  --bfc-theme-c-2-hsl: var(--purple-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--purple-800-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-300-hsl);
}

.bf-theme-purple.bf-lightmode,
.bf-lightmode .bf-theme-purple,
[data-bf-color-mode=light] .bf-theme-purple,
.bf-darkmode .bf-lightmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-570-hsl);
  --bfc-theme-2: hsl(var(--purple-620-hsl));
  --bfc-theme-3: hsl(var(--purple-660-hsl));
  --bfc-theme-c-hsl: var(--purple-120-hsl);
  --bfc-theme-c-2-hsl: var(--purple-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--purple-120-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-purple {
    --bfc-theme-hsl: var(--purple-570-hsl);
    --bfc-theme-2: hsl(var(--purple-620-hsl));
    --bfc-theme-3: hsl(var(--purple-660-hsl));
    --bfc-theme-c-hsl: var(--purple-120-hsl);
    --bfc-theme-c-2-hsl: var(--purple-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--purple-120-hsl);
    --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
  }
}
/* #endregion */
/* #region gray theme */
.bf-theme-gray,
.bf-theme-gray.bf-darkmode,
.bf-darkmode .bf-theme-gray,
[data-bf-color-mode=dark] .bf-theme-gray,
.bf-lightmode .bf-darkmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-120-hsl);
  --bfc-theme-2: hsl(var(--base-100-hsl));
  --bfc-theme-3: hsl(var(--base-30-hsl));
  --bfc-theme-c-hsl: var(--base-500-hsl);
  --bfc-theme-c-2-hsl: var(--base-920-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--base-500-hsl);
  --bfc-theme-fade-c-hsl: var(--base-120-hsl);
}

.bf-theme-gray.bf-lightmode,
.bf-lightmode .bf-theme-gray,
[data-bf-color-mode=light] .bf-theme-gray,
.bf-darkmode .bf-lightmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-420-hsl);
  --bfc-theme-2: hsl(var(--base-380-hsl));
  --bfc-theme-3: hsl(var(--gray-400-hsl));
  --bfc-theme-c-hsl: var(--base-40-hsl);
  --bfc-theme-c-2-hsl: var(--base-30-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--base-40-hsl);
  --bfc-theme-fade-c-hsl: var(--base-360-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-gray {
    --bfc-theme-hsl: var(--base-420-hsl);
    --bfc-theme-2: hsl(var(--base-380-hsl));
    --bfc-theme-3: hsl(var(--gray-400-hsl));
    --bfc-theme-c-hsl: var(--base-40-hsl);
    --bfc-theme-c-2-hsl: var(--base-30-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--base-40-hsl);
    --bfc-theme-fade-c-hsl: var(--base-360-hsl);
  }
}
/* #endregion */
/* #region pink theme */
.bf-theme-pink,
.bf-theme-pink.bf-darkmode,
.bf-darkmode .bf-theme-pink,
[data-bf-color-mode=dark] .bf-theme-pink,
.bf-lightmode .bf-darkmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-300-hsl);
  --bfc-theme-2: hsl(var(--pink-250-hsl));
  --bfc-theme-3: hsl(var(--pink-200-hsl));
  --bfc-theme-c-hsl: var(--pink-800-hsl);
  --bfc-theme-c-2-hsl: var(--pink-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--pink-800-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-300-hsl);
}

.bf-theme-pink.bf-lightmode,
.bf-lightmode .bf-theme-pink,
[data-bf-color-mode=light] .bf-theme-pink,
.bf-darkmode .bf-lightmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-570-hsl);
  --bfc-theme-2: hsl(var(--pink-620-hsl));
  --bfc-theme-3: hsl(var(--pink-660-hsl));
  --bfc-theme-c-hsl: var(--pink-120-hsl);
  --bfc-theme-c-2-hsl: var(--pink-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--pink-120-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-pink {
    --bfc-theme-hsl: var(--pink-570-hsl);
    --bfc-theme-2: hsl(var(--pink-620-hsl));
    --bfc-theme-3: hsl(var(--pink-660-hsl));
    --bfc-theme-c-hsl: var(--pink-120-hsl);
    --bfc-theme-c-2-hsl: var(--pink-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--pink-120-hsl);
    --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
  }
}
/* #endregion */
/* #region green theme */
.bf-theme-green,
.bf-theme-green.bf-darkmode,
.bf-darkmode .bf-theme-green,
[data-bf-color-mode=dark] .bf-theme-green,
.bf-lightmode .bf-darkmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-300-hsl);
  --bfc-theme-2: hsl(var(--green-250-hsl));
  --bfc-theme-3: hsl(var(--green-200-hsl));
  --bfc-theme-c-hsl: var(--green-800-hsl);
  --bfc-theme-c-2-hsl: var(--green-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--green-800-hsl);
  --bfc-theme-fade-c-hsl: var(--green-300-hsl);
}

.bf-theme-green.bf-lightmode,
.bf-lightmode .bf-theme-green,
[data-bf-color-mode=light] .bf-theme-green,
.bf-darkmode .bf-lightmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-570-hsl);
  --bfc-theme-2: hsl(var(--green-620-hsl));
  --bfc-theme-3: hsl(var(--green-660-hsl));
  --bfc-theme-c-hsl: var(--green-120-hsl);
  --bfc-theme-c-2-hsl: var(--green-120-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--green-120-hsl);
  --bfc-theme-fade-c-hsl: var(--green-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-green {
    --bfc-theme-hsl: var(--green-570-hsl);
    --bfc-theme-2: hsl(var(--green-620-hsl));
    --bfc-theme-3: hsl(var(--green-660-hsl));
    --bfc-theme-c-hsl: var(--green-120-hsl);
    --bfc-theme-c-2-hsl: var(--green-120-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--green-120-hsl);
    --bfc-theme-fade-c-hsl: var(--green-570-hsl);
  }
}
/* #endregion */
/* #region yellow theme */
.bf-theme-yellow,
.bf-theme-yellow.bf-darkmode,
.bf-darkmode .bf-theme-yellow,
[data-bf-color-mode=dark] .bf-theme-yellow,
.bf-lightmode .bf-darkmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-300-hsl);
  --bfc-theme-2: hsl(var(--yellow-250-hsl));
  --bfc-theme-3: hsl(var(--yellow-200-hsl));
  --bfc-theme-c-hsl: var(--yellow-800-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--yellow-800-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-300-hsl);
}

.bf-theme-yellow.bf-lightmode,
.bf-lightmode .bf-theme-yellow,
[data-bf-color-mode=light] .bf-theme-yellow,
.bf-darkmode .bf-lightmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-570-hsl);
  --bfc-theme-2: hsl(var(--yellow-620-hsl));
  --bfc-theme-3: hsl(var(--yellow-660-hsl));
  --bfc-theme-c-hsl: var(--yellow-120-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--yellow-120-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-yellow {
    --bfc-theme-hsl: var(--yellow-570-hsl);
    --bfc-theme-2: hsl(var(--yellow-620-hsl));
    --bfc-theme-3: hsl(var(--yellow-660-hsl));
    --bfc-theme-c-hsl: var(--yellow-120-hsl);
    --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--yellow-120-hsl);
    --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
  }
}
/* #endregion */
/* #region theme aliases
aliases and values for `theme` needs to be applied for both dark and light
mode for every theme class (or nested themes won't work) */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light],
.bf-theme-teal,
.bf-theme-purple,
.bf-theme-pink,
.bf-theme-green,
.bf-theme-yellow,
.bf-theme-gray {
  --bfc-base-c-theme: var(--bfc-theme);
  --bfc-theme-1: hsl(var(--bfc-theme-hsl));
  --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
  --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
  --bfc-theme-c: var(--bfc-theme-c-1);
  --bfc-theme: var(--bfc-theme-1);
  --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
  --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
  --bff-theme: var(--bfc-base-c-theme);
  --bft-theme: var(--bfc-base-c-theme);
}

/* #endregion */
/* #region aliases and values for both dark and light mode */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light] {
  --bf-shadow-blur: 8px;
  --bf-shadow-bottom: 0 4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-left: -4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bfc-base: var(--bfc-base-1);
  --bfc-base-1: hsl(var(--bfc-base-hsl));
  --bfc-base-2: hsl(var(--bfc-base-2-hsl));
  --bfc-base-3: hsl(var(--bfc-base-3-hsl));
  --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
  --bfc-base-c-chill: var(--bfc-chill);
  --bfc-base-c-brand: var(--bfc-brand);
  --bfc-base-c-attn: var(--bfc-attn);
  --bfc-base-c-dimmed: var(--bfc-base-dimmed);
  --bfc-base-c: var(--bfc-base-c-1);
  --bfc-base-dimmed-1: var(--bfc-base-dimmed);
  --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
  --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
  --bfc-base-dimmed-c: var(--bfc-base-c-1);
  --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
  --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
  --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
  --bfc-base-disabled-c: var(--bfc-base-c-2);
  --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
  --bfc-neutral: hsl(var(--bfc-neutral-hsl));
  --bfc-neutral-2: hsl(var(--bfc-neutral-2-hsl));
  --bfc-neutral-c: hsl(var(--bfc-neutral-c-hsl));
  --bfc-neutral-fade: hsl(var(--bfc-neutral-fade-hsl));
  --bfc-neutral-fade-c: hsl(var(--bfc-neutral-fade-c-hsl));
  --bfc-brand: hsl(var(--bfc-brand-hsl));
  --bfc-brand-c: hsl(var(--bfc-brand-c-hsl));
  --bfc-brand-fade: hsl(var(--bfc-brand-fade-hsl));
  --bfc-brand-fade-c: hsl(var(--bfc-brand-fade-c-hsl));
  --bfc-chill: hsl(var(--bfc-chill-hsl));
  --bfc-chill-c: hsl(var(--bfc-chill-c-hsl));
  --bfc-chill-fade: hsl(var(--bfc-chill-fade-hsl));
  --bfc-chill-fade-c: hsl(var(--bfc-chill-fade-c-hsl));
  --bfc-attn: hsl(var(--bfc-attn-hsl));
  --bfc-attn-c: hsl(var(--bfc-attn-c-hsl));
  --bfc-attn-fade: hsl(var(--bfc-attn-fade-hsl));
  --bfc-attn-fade-c: hsl(var(--bfc-attn-fade-c-hsl));
  --bfc-success: hsl(var(--bfc-success-hsl));
  --bfc-success-c: hsl(var(--bfc-success-c-hsl));
  --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
  --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
  --bfc-warning-hs: 45, 100%;
  --bfc-warning-hsl: var(--yellow-300-hsl);
  --bfc-warning-c-hsl: var(--yellow-800-hsl);
  --bfc-warning-hc: var(--base-920);
  --bfc-warning: hsl(var(--bfc-warning-hsl));
  --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
  --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
  --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
  --bfc-alert-hsl: 8, 75%, 45%;
  --bfc-alert-2: hsl(8, 73%, 49%);
  --bfc-alert-c-hsl: 0, 0%, 100%;
  --bfc-alert-c: hsl(var(--bfc-alert-c-hsl));
  --bfc-alert-hc: white;
  --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
  --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
  --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
  --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
  --bfc-alert-fade: var(--bfc-alert-fade-1);
  --bfc-alert: hsl(var(--bfc-alert-hsl));
  --bff-alert: var(--bfc-base-c-alert);
  --bff-attn: var(--bfc-base-c-attn);
  --bff-base-2: var(--bfc-base-c-2);
  --bff-base: var(--bfc-base-c);
  --bff-chill: var(--bfc-base-c-chill);
  --bff-dimmed: var(--bfc-base-c-dimmed);
  --bff-disabled: var(--bfc-base-c-disabled);
  --bff-inverted-2: var(--bfc-base-c-inverted-2);
  --bff-inverted: var(--bfc-base-c-inverted);
  --bff-success: var(--bfc-base-c-success);
  --bff-warning: var(--bfc-base-c-warning);
  --bff-wcag: var(--bfc-base-c-wcag);
  --bft-base-2: var(--bfc-base-c-2);
  --bft-base: var(--bfc-base-c);
  --bft-disabled: var(--bfc-base-c-disabled);
}

/* #endregion */
/* #region Background color class names */
.bfc-base-bg,
.bfc-base-1-bg {
  background-color: var(--bfc-base);
  color: var(--bft-base);
}

.bfc-base-2-bg {
  background-color: var(--bfc-base-2);
  color: var(--bft-base);
}

.bfc-base-3-bg {
  background-color: var(--bfc-base-3);
  color: var(--bft-base);
}

.bfc-dimmed-bg {
  background-color: var(--bfc-base-dimmed);
  color: var(--bfc-base-dimmed-c);
}

.bfc-inverted-bg {
  background-color: var(--bfc-base-c-inverted);
  color: var(--bfc-base);
}

.bfc-inverted-2-bg {
  background-color: var(--bfc-base-c-inverted-2);
  color: var(--bfc-base);
}

.bfc-disabled-bg {
  background-color: var(--bfc-base-disabled);
  color: var(--bfc-base-c-2);
}

.bfc-theme-bg {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bfc-theme-fade-bg {
  background-color: var(--bfc-theme-fade);
  color: var(--bfc-theme-fade-c);
}

.bfc-theme-fade-2-bg {
  background-color: var(--bfc-theme-c-2);
  color: var(--bfc-theme);
}

.bfc-success-bg {
  background-color: var(--bfc-success);
  color: var(--bfc-success-hc);
}

.bfc-success-fade-bg {
  background-color: var(--bfc-success-fade);
  color: var(--bfc-success-fade-c);
}

.bfc-warning-bg {
  background-color: var(--bfc-warning);
  color: var(--bfc-warning-hc);
}

.bfc-warning-fade-bg {
  background-color: var(--bfc-warning-fade);
  color: var(--bfc-warning-fade-c);
}

.bfc-neutral-bg {
  background-color: var(--bfc-neutral);
  color: var(--bfc-neutral-hc);
}

.bfc-neutral-fade-bg {
  background-color: var(--bfc-neutral-fade);
  color: var(--bfc-neutral-fade-c);
}

.bfc-alert-bg {
  background-color: var(--bfc-alert);
  color: var(--bfc-alert-hc);
}

.bfc-alert-fade-bg {
  background-color: var(--bfc-alert-fade);
  color: var(--bfc-alert-fade-c);
}

.bfc-alert-fade-2-bg {
  background-color: var(--bfc-alert-fade-2);
  color: var(--bfc-alert-fade-2-c);
}

.bfc-attn-bg {
  background-color: var(--bfc-attn);
  color: var(--bfc-attn-hc);
}

.bfc-attn-fade-bg {
  background-color: hsl(var(--bfc-attn-fade-hsl));
  color: hsl(var(--bfc-attn-fade-c-hsl));
}

.bfc-brand-bg {
  background-color: var(--bfc-brand);
  color: var(--bfc-brand-hc);
}

.bfc-brand-fade-bg {
  background-color: var(--bfc-brand-fade);
  color: var(--bfc-brand-fade-c);
}

.bfc-chill-bg {
  background-color: var(--bfc-chill);
  color: var(--bfc-chill-hc);
}

.bfc-chill-fade-bg {
  background-color: var(--bfc-chill-fade);
  color: var(--bfc-chill-fade-c);
}

/* #endregion */
:where(.bfc-dimmed-bg,
.bfc-inverted-bg,
.bfc-inverted-2-bg,
.bfc-disabled-bg,
.bfc-theme-bg,
.bfc-theme-fade-bg,
.bfc-theme-fade-2-bg,
.bfc-neutral-bg,
.bfc-neutral-fade-bg,
.bfc-brand-bg,
.bfc-brand-fade-bg,
.bfc-chill-bg,
.bfc-chill-fade-bg,
.bfc-attn-bg,
.bfc-attn-fade-bg,
.bfc-success-bg,
.bfc-success-fade-bg,
.bfc-warning-bg,
.bfc-warning-fade-bg,
.bfc-alert-bg,
.bfc-alert-fade-bg,
.bfc-alert-fade-2-bg) :is(a, .bf-link) {
  color: inherit;
}

.bfc-base-1,
.bfc-base {
  color: var(--bft-base);
}

.bfc-base-2 {
  color: var(--bft-base-2);
}

.bfc-disabled {
  color: var(--bft-disabled);
}

.bfc-theme {
  color: var(--bft-theme);
}

.bfc-success {
  color: var(--bfc-base-c-success);
}

.bfc-warning {
  color: var(--bfc-base-c-warning);
}

.bfc-alert {
  color: var(--bfc-base-c-alert);
}

.bfc-attn {
  color: var(--bfc-base-c-attn);
}

.bfc-brand {
  color: var(--bfc-base-c-brand);
}

.bfc-chill {
  color: var(--bfc-base-c-chill);
}

.bf-shadow {
  box-shadow: var(--bf-shadow);
}

.bf-shadow-top {
  box-shadow: var(--bf-shadow-top);
}

.bf-shadow-right {
  box-shadow: var(--bf-shadow-right);
}

.bf-shadow-bottom {
  box-shadow: var(--bf-shadow-bottom);
}

.bf-shadow-left {
  box-shadow: var(--bf-shadow-left);
}

html {
  --teal-100-hsl: 172, 94%, 94%;
  --teal-100: hsl(var(--teal-100-hsl));
  --teal-120-hsl: 172, 91%, 92%;
  --teal-120: hsl(var(--teal-120-hsl));
  --teal-150-hsl: 172, 90%, 88%;
  --teal-150: hsl(var(--teal-150-hsl));
  --teal-200-hsl: 173, 90%, 80%;
  --teal-200: hsl(var(--teal-200-hsl));
  --teal-250-hsl: 173, 90%, 68%;
  --teal-250: hsl(var(--teal-250-hsl));
  --teal-300-hsl: 173, 90%, 50%;
  --teal-300: hsl(var(--teal-300-hsl));
  --teal-570-hsl: 181, 100%, 23%;
  --teal-570: hsl(var(--teal-570-hsl));
  --teal-620-hsl: 181, 98%, 21%;
  --teal-620: hsl(var(--teal-620-hsl));
  --teal-660-hsl: 181, 100%, 17%;
  --teal-660: hsl(var(--teal-660-hsl));
  --teal-800-hsl: 186, 100%, 13%;
  --teal-800: hsl(var(--teal-800-hsl));
  --teal-890-hsl: 192, 100%, 8%;
  --teal-890: hsl(var(--teal-890-hsl));
  --purple-100-hsl: 258, 92%, 95%;
  --purple-100: hsl(var(--purple-100-hsl));
  --purple-120-hsl: 259, 94%, 93%;
  --purple-120: hsl(var(--purple-120-hsl));
  --purple-150-hsl: 258, 100%, 91%;
  --purple-150: hsl(var(--purple-150-hsl));
  --purple-200-hsl: 258, 100%, 87%;
  --purple-200: hsl(var(--purple-200-hsl));
  --purple-250-hsl: 258, 100%, 82%;
  --purple-250: hsl(var(--purple-250-hsl));
  --purple-300-hsl: 258, 100%, 77%;
  --purple-300: hsl(var(--purple-300-hsl));
  --purple-570-hsl: 264, 76%, 46%;
  --purple-570: hsl(var(--purple-570-hsl));
  --purple-620-hsl: 264, 76%, 41%;
  --purple-620: hsl(var(--purple-620-hsl));
  --purple-660-hsl: 264, 77%, 37%;
  --purple-660: hsl(var(--purple-660-hsl));
  --purple-800-hsl: 252, 53%, 25%;
  --purple-800: hsl(var(--purple-800-hsl));
  --purple-890-hsl: 238, 44%, 16%;
  --purple-890: hsl(var(--purple-890-hsl));
  --pink-100-hsl: 323, 100%, 93%;
  --pink-100: hsl(var(--pink-100-hsl));
  --pink-120-hsl: 323, 100%, 91%;
  --pink-120: hsl(var(--pink-120-hsl));
  --pink-150-hsl: 323, 100%, 89%;
  --pink-150: hsl(var(--pink-150-hsl));
  --pink-200-hsl: 324, 100%, 84%;
  --pink-200: hsl(var(--pink-200-hsl));
  --pink-250-hsl: 323, 100%, 77%;
  --pink-250: hsl(var(--pink-250-hsl));
  --pink-300-hsl: 324, 100%, 71%;
  --pink-300: hsl(var(--pink-300-hsl));
  --pink-570-hsl: 325, 100%, 37%;
  --pink-570: hsl(var(--pink-570-hsl));
  --pink-620-hsl: 325, 94%, 34%;
  --pink-620: hsl(var(--pink-620-hsl));
  --pink-660-hsl: 324, 89%, 32%;
  --pink-660: hsl(var(--pink-660-hsl));
  --pink-800-hsl: 317, 75%, 20%;
  --pink-800: hsl(var(--pink-800-hsl));
  --pink-890-hsl: 285, 51%, 12%;
  --pink-890: hsl(var(--pink-890-hsl));
  --green-100-hsl: 145, 100%, 93%;
  --green-100: hsl(var(--green-100-hsl));
  --green-150-hsl: 144, 100%, 89%;
  --green-150: hsl(var(--green-150-hsl));
  --green-200-hsl: 144, 100%, 82%;
  --green-200: hsl(var(--green-200-hsl));
  --green-250-hsl: 153, 95%, 67%;
  --green-250: hsl(var(--green-250-hsl));
  --green-300-hsl: 157, 100%, 48%;
  --green-300: hsl(var(--green-300-hsl));
  --green-570-hsl: 157, 100%, 24%;
  --green-570: hsl(var(--green-570-hsl));
  --green-620-hsl: 157, 100%, 21%;
  --green-620: hsl(var(--green-620-hsl));
  --green-660-hsl: 157, 100%, 19%;
  --green-660: hsl(var(--green-660-hsl));
  --green-800-hsl: 157, 100%, 11%;
  --green-800: hsl(var(--green-800-hsl));
  --green-890-hsl: 156, 67%, 8%;
  --green-890: hsl(var(--green-890-hsl));
  --yellow-100-hsl: 49, 100%, 92%;
  --yellow-100: hsl(var(--yellow-100-hsl));
  --yellow-120-hsl: 49, 100%, 89%;
  --yellow-120: hsl(var(--yellow-120-hsl));
  --yellow-150-hsl: 49, 100%, 85%;
  --yellow-150: hsl(var(--yellow-150-hsl));
  --yellow-200-hsl: 49, 100%, 79%;
  --yellow-200: hsl(var(--yellow-200-hsl));
  --yellow-250-hsl: 47, 100%, 75%;
  --yellow-250: hsl(var(--yellow-250-hsl));
  --yellow-300-hsl: 45, 100%, 72%;
  --yellow-300: hsl(var(--yellow-300-hsl));
  --yellow-570-hsl: 37, 88%, 32%;
  --yellow-570: hsl(var(--yellow-570-hsl));
  --yellow-620-hsl: 39, 91%, 27%;
  --yellow-620: hsl(var(--yellow-620-hsl));
  --yellow-660-hsl: 40, 95%, 23%;
  --yellow-660: hsl(var(--yellow-660-hsl));
  --yellow-800-hsl: 39, 100%, 15%;
  --yellow-800: hsl(var(--yellow-800-hsl));
  --yellow-890-hsl: 43, 100%, 5%;
  --yellow-890: hsl(var(--yellow-890-hsl));
  /* temporary base primitives */
  --base-0-hsl: 0, 0%, 100%;
  --base-10-hsl: 238, 10%, 98%;
  --base-10: hsl(var(--base-10-hsl));
  --base-20-hsl: 238, 15%, 96%;
  --base-20: hsl(var(--base-20-hsl));
  --base-30-hsl: 238, 13%, 94%;
  --base-30: hsl(var(--base-30-hsl));
  --base-40-hsl: 238, 10%, 90%;
  --base-40: hsl(var(--base-40-hsl));
  --base-100-hsl: 210, 15%, 87%;
  --base-100: hsl(var(--base-100-hsl));
  --base-110-hsl: 213, 14%, 85%;
  --base-110: hsl(var(--base-110-hsl));
  --base-120-hsl: 212, 15%, 83%;
  --base-120: hsl(var(--base-120-hsl));
  --base-200-hsl: 211, 15%, 65%;
  --base-200: hsl(var(--base-200-hsl));
  --base-320-hsl: 212, 15%, 56%;
  --base-320: hsl(var(--base-320-hsl));
  --base-340-hsl: 212, 15%, 44%;
  --base-340: hsl(var(--base-340-hsl));
  --base-360-hsl: 213, 22%, 34%;
  --base-360: hsl(var(--base-360-hsl));
  --base-380-hsl: 211, 20%, 30%;
  --base-380: hsl(var(--base-380-hsl));
  --base-400-hsl: 212, 30%, 22%;
  --base-400: hsl(var(--base-400-hsl));
  --base-410-hsl: 212, 33%, 20%;
  --base-410: hsl(var(--base-410-hsl));
  --base-420-hsl: 212, 35%, 19%;
  --base-420: hsl(var(--base-420-hsl));
  --base-500-hsl: 211, 39%, 17%;
  --base-500: hsl(var(--base-500-hsl));
  --base-900-hsl: 210, 55%, 13%;
  --base-900: hsl(var(--base-900-hsl));
  --base-910-hsl: 210, 64%, 11%;
  --base-910: hsl(var(--base-910-hsl));
  --base-920-hsl: 212, 70%, 9%;
  --base-920: hsl(var(--base-920-hsl));
  --gray-50-hsl: 240, 9%, 98%;
  --gray-50: hsl(var(--gray-50-hsl));
  --gray-100-hsl: 240, 14%, 96%;
  --gray-100: hsl(var(--gray-100-hsl));
  --gray-150-hsl: 240, 10%, 90%;
  --gray-150: hsl(var(--gray-150-hsl));
  --gray-800-hsl: 210, 40%, 17%;
  --gray-800: hsl(var(--gray-800-hsl));
  --gray-920-hsl: 212, 70%, 9%;
  --gray-920: hsl(var(--gray-920-hsl));
  --gray-970-hsl: 215, 67%, 4%;
  --gray-970: hsl(var(--gray-970-hsl));
}

/* stylelint-disable no-duplicate-selectors */
html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

:root {
  /* px based spacing */
  --bfs0: 0px;
  --bfs2: 2px;
  --bfs4: 4px;
  --bfs6: 6px;
  --bfs8: 8px;
  --bfs12: 12px;
  --bfs16: 16px;
  --bfs24: 24px;
  --bfs28: 28px;
  --bfs32: 32px;
  --bfs40: 40px;
  --bfs48: 48px;
  --bfs52: 52px;
  --bfs56: 56px;
  --bfs80: 80px;
  /* dynamic spacing variables following browser font-size.
   * numbers assuming default root font-size of 16px */
  --rem0: 0rem;
  --rem2: 0.125rem;
  --rem4: 0.25rem;
  --rem6: 0.375rem;
  --rem8: 0.5rem;
  --rem12: 0.75rem;
  --rem16: 1rem;
  --rem24: 1.5rem;
  --rem28: 1.75rem;
  --rem32: 2rem;
  --rem40: 2.5rem;
  --rem48: 3rem;
  --rem52: 3.25rem;
  --rem56: 3.5rem;
  --rem80: 5rem;
  /* font sizes */
  --bf-font-size-s: 0.75rem; /* 12px - small, .bf-small */
  --bf-font-size-m: 0.875rem; /* 14px - p, body, label, .bf-medium */
  --bf-font-size-l: 1rem; /* 16px - input, big, .bf-large */
  --bf-font-size-h5: 1.125rem; /* 18px - h5 */
  --bf-font-size-h4: 1.25rem; /* 20px - h4 */
  --bf-font-size-h3: 1.5rem; /* 24px - h3 */
  --bf-font-size-h2: 1.8125rem; /* 29px - h2 */
  --bf-font-size-h1: 2rem; /* 32px - h1 */
  /* border radius */
  --bf-radius-none: 0px;
  --bf-radius-xs: 4px;
  --bf-radius-s: 8px;
  --bf-radius-m: 12px;
  --bf-radius-l: 16px;
  --bf-radius-xl: 24px;
  --bf-radius-full: 9999px;
  --bf-radius: var(--bf-radius-m);
  /* transition and animations */
  --bf-animation-duration: 0.2s;
  --bf-timing-function: ease;
}

/* general utility classes */
.bf-radius-xs {
  border-radius: var(--bf-radius-xs);
}

.bf-radius-s {
  border-radius: var(--bf-radius-s);
}

.bf-radius,
.bf-radius-m {
  border-radius: var(--bf-radius-m);
}

.bf-radius-l {
  border-radius: var(--bf-radius-l);
}

.bf-radius-xl {
  border-radius: var(--bf-radius-xl);
}

.bf-radius-full {
  border-radius: var(--bf-radius-full);
}

.bf-radius-none {
  border-radius: var(--bf-radius-none);
}

.bfl-border,
.bf-border {
  border: var(--bf-border);
}

.bf-border-top {
  border-top: var(--bf-border);
}

.bf-border-right {
  border-right: var(--bf-border);
}

.bf-border-bottom {
  border-bottom: var(--bf-border);
}

.bf-border-left {
  border-left: var(--bf-border);
}

/* disable bifrost css animation for users that prefers reduced motion */
@media (prefers-reduced-motion) {
  :root {
    --bf-animation-duration: 0s;
  }
}
:root,
.bf-darkmode {
  --bf-border: 1px solid var(--bfc-base-dimmed);
  --bfl-border: var(--bf-border);
  --bf-form-focus-outline: 0 0 0 4px var(--bfc-base-dimmed);
}

.bf-lightmode {
  --bf-border: 1px solid var(--bfc-base-dimmed);
  --bfl-border: var(--bf-border);
  --bf-form-focus-outline: 0 0 0 4px var(--bfc-base-dimmed);
}

/* responsive modal padding */
:root {
  --bfl-modal-padding: var(--bfs40);
}

@media (max-width: 599.9px), (max-height: 599.9px) {
  :root {
    --bfl-modal-padding: var(--bfs24);
  }
}
/* responsive page padding */
:root {
  /* page padding changes at 600px and 1920px screen width. 12 - 24 - 40 */
  --bf-page-padding: var(--bfs12);
  --bfl-page-padding: var(--bf-page-padding);
}

.bfl-page-padding,
.bf-page-padding {
  padding: var(--bf-page-padding, 12px);
}

.bfl-page-padding-x,
.bf-page-padding-x {
  padding-left: var(--bf-page-padding);
  padding-right: var(--bf-page-padding);
}

.bfl-page-padding-y,
.bf-page-padding-y {
  padding-top: var(--bf-page-padding);
  padding-bottom: var(--bf-page-padding);
}

.bf-notch:where(.bfl-page-padding,
.bfl-page-padding-x,
.bf-page-padding,
.bf-page-padding-x) {
  padding-left: calc(var(--bf-page-padding) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding) + env(safe-area-inset-right));
}

@media (min-width: 600px) {
  :root {
    --bf-page-padding: var(--bfs24);
  }
}
@media (min-width: 1920px) {
  :root {
    --bf-page-padding: var(--bfs40);
  }
}
/* responsive box padding */
:root {
  /* box padding changes at 1280px screen width. 16 - 24 */
  --bf-box-padding: var(--bfs16);
  --bfl-box-padding: var(--bf-box-padding);
}

.bfl-padding,
.bf-padding {
  padding: var(--bf-box-padding);
}

.bfl-padding-x,
.bf-padding-x {
  padding-left: var(--bf-box-padding);
  padding-right: var(--bf-box-padding);
}

.bfl-padding-y,
.bf-padding-y {
  padding-top: var(--bf-box-padding);
  padding-bottom: var(--bf-box-padding);
}

.bf-notch:where(.bfl-padding, .bfl-padding-x, .bf-padding, .bf-padding-x) {
  padding-left: calc(var(--bf-box-padding) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-box-padding) + env(safe-area-inset-right));
}

@media (min-width: 1280px) {
  :root {
    --bf-box-padding: var(--bfs24);
  }
}
/* responsive automatic columns
number of columns will be available width divided by autocol-width
each column will stretch to take up available space
if available width is less than autocol-width, minimum column width will not exceed 100%
prefer css grids because `gap` is well supported (compiles to include `grid-gap`), but not for flexbox or css columns
read more: https://css-tricks.com/snippets/css/complete-guide-grid/ */
:root {
  --bf-autocol-width: 300px;
  --bfl-autocol-width: var(--bf-autocol-width);
  --bf-autocol-gap: var(--bfs12, 12px);
  --bfl-autocol-gap: var(--bf-autocol-gap);
}

.bfl-autocol,
.bf-autocol {
  display: grid;
  gap: var(--bf-autocol-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--bf-autocol-width), 100%), 1fr));
}

/* column grid */
:root {
  /* default column count for .bfl-grid */
  --bfl-columns: 1;
}

.bfl-grid {
  --bfl-gap: var(--bfs12, 12px);
  display: grid;
  gap: var(--bfl-gap);
  grid-template-columns: repeat(var(--bfl-columns, 1), minmax(0, 1fr));
}

/* utility class to set display: block; for inline elements like `<a>` */
:where(.bf-block) {
  display: block;
}

/* since buttons behave differently than all other inline elements, explicitly
set full width to make it behave like a block level element */
:where(button.bf-block) {
  width: 100%;
}

/* todo: remove in 7.0 */
svg:where(.bf-it-logo, .bf-intility-logo) {
  fill: currentcolor;
}

/* #region scren/viewport media queries */
@media (max-width: 599.9px) {
  .from-small {
    display: none !important;
  }
}
@media (min-width: 600px) {
  .to-small {
    display: none !important;
  }
}
@media (max-width: 959.9px) {
  .from-medium {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .to-medium {
    display: none !important;
  }
}
@media (max-width: 1279.9px) {
  .from-large {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .to-large {
    display: none !important;
  }
}
@media (max-width: 1599.9px) {
  .from-xl {
    display: none !important;
  }
}
@media (min-width: 1600px) {
  .to-xl {
    display: none !important;
  }
}
@media (max-width: 1919.9px) {
  .from-xxl {
    display: none !important;
  }
}
@media (min-width: 1920px) {
  .to-xxl {
    display: none !important;
  }
}
/* #endregion */
/* #region container queries */
@supports (container-type: inline-size) {
  :where(.bf-container) {
    container-name: bf-container;
    container-type: inline-size;
  }
  @container bf-container (width < 300px) {
    .from-xs-container {
      display: none !important;
    }
  }
  @container bf-container (300px <= width) {
    .to-xs-container {
      display: none !important;
    }
  }
  @container bf-container (width < 600px) {
    .from-s-container,
    .from-small-container {
      display: none !important;
    }
  }
  @container bf-container (600px <= width) {
    .to-s-container,
    .to-small-container {
      display: none !important;
    }
  }
  @container bf-container (width < 960px) {
    .from-m-container,
    .from-medium-container {
      display: none !important;
    }
  }
  @container bf-container (960px <= width) {
    .to-m-container,
    .to-medium-container {
      display: none !important;
    }
  }
  @container bf-container (width < 1280px) {
    .from-l-container,
    .from-large-container {
      display: none !important;
    }
  }
  @container bf-container (1280px <= width) {
    .to-l-container,
    .to-large-container {
      display: none !important;
    }
  }
  @container bf-container (width < 1600px) {
    .from-xl-container {
      display: none !important;
    }
  }
  @container bf-container (1600px <= width ) {
    .to-xl-container {
      display: none !important;
    }
  }
  @container bf-container (width < 1920px) {
    .from-xxl-container {
      display: none !important;
    }
  }
  @container bf-container (1920px <= width) {
    .to-xxl-container {
      display: none !important;
    }
  }
}
/* fall back to media queries if container queries are not supported */
@supports not (container-type: inline-size) {
  @media (max-width: 299.9px) {
    .from-xs-container {
      display: none !important;
    }
  }
  @media (min-width: 300px) {
    .to-xs-container {
      display: none !important;
    }
  }
  @media (max-width: 599.9px) {
    .from-s-container,
    .from-small-container {
      display: none !important;
    }
  }
  @media (min-width: 600px) {
    .to-s-container,
    .to-small-container {
      display: none !important;
    }
  }
  @media (max-width: 959.9px) {
    .from-m-container,
    .from-medium-container {
      display: none !important;
    }
  }
  @media (min-width: 960px) {
    .to-m-container,
    .to-medium-container {
      display: none !important;
    }
  }
  @media (max-width: 1279.9px) {
    .from-l-container,
    .from-large-container {
      display: none !important;
    }
  }
  @media (min-width: 1280px) {
    .to-l-container,
    .to-large-container {
      display: none !important;
    }
  }
  @media (max-width: 1599.9px) {
    .from-xl-container {
      display: none !important;
    }
  }
  @media (min-width: 1600px) {
    .to-xl-container {
      display: none !important;
    }
  }
  @media (max-width: 1919.9px) {
    .from-xxl-container {
      display: none !important;
    }
  }
  @media (min-width: 1920px) {
    .to-xxl-container {
      display: none !important;
    }
  }
}
/* #endregion */
/* stylelint-disable selector-class-pattern */
.bf-textarea-container,
.bf-input-container,
.bf-select-container,
.bf-datepicker-container {
  font-size: var(--bf-font-size-m);
}

/* REQUIRED TEXT */
.bf-label-required {
  color: var(--bfc-base-c-2);
  font-weight: normal;
  font-style: italic;
  margin-left: var(--rem4);
}

/* DESCRIPTION */
.bf-label-description {
  color: var(--bfc-base-c-2);
  font-weight: normal;
  font-size: var(--bf-font-size-m);
}

/* PLACEHOLDER TEXT */
.bf-input::placeholder,
.bf-textarea::placeholder,
.bf-datepicker::placeholder {
  color: var(--bfc-base-c-2);
  opacity: 1;
}

/* READ ONLY (:read-only matches all elements, so we limit by prefixing with element) */
:where(input, textarea):is(.bf-input, .bf-textarea, .bf-datepicker):read-only,
:where(input, textarea):is(.bf-input,
.bf-textarea,
.bf-datepicker):read-only:hover {
  background: var(--bfc-base-2);
  border-color: var(--bfc-base-c-dimmed);
  outline: none;
  box-shadow: none;
  cursor: text;
}

:is(.bf-input, .bf-textarea, .bf-datepicker):read-only:focus {
  border-color: var(--bfc-base-c-wcag);
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-wcag);
}

/* DISABLED */
:is(.bf-input, .bf-textarea, .bf-datepicker):is(:disabled, :disabled:hover),
.bf-fieldgroup-disabled .bf-fieldgroup-item > div {
  cursor: default;
  color: var(--bfc-base-c-disabled);
  border-color: var(--bfc-base-c-dimmed);
  background: var(--bfc-base);
}

:is(.bf-input, .bf-datepicker, .bf-textarea):disabled::placeholder {
  color: var(--bfc-base-c-disabled);
}

/* DISABLED LABEL ICON */
.bf-label > .bf-input-disabled-icon {
  color: var(--bfc-base-c-disabled);
  margin: 0 var(--rem4);
}

/* INPUT FIELD */
.bf-textarea,
.bf-input,
.bf-select,
.bf-datepicker {
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: var(--bf-radius-s);
  font-family: inherit;
  font-size: var(--bf-font-size-l);
  padding: 0.4375rem 12px; /* 7px */
  width: 100%;
}

/* INPUT FIELD HOVER */
.bf-textarea:hover,
.bf-input:hover,
.bf-select:hover,
.bf-datepicker:hover {
  border-color: var(--bfc-base-c);
}

/* INPUT FIELD FOCUS */
.bf-textarea:focus,
.bf-input:focus,
.bf-select:focus,
.bf-input-focus,
.bf-datepicker:focus {
  border-color: var(--bfc-base-c-inverted);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
}

/* loading spinner */
.bf-input-loading-icon {
  font-size: var(--bf-font-size-l);
}

.bf-input-icon-button .bf-input-loading-icon {
  color: inherit;
}

.bf-select-container .bf-input-loading-icon {
  margin-top: 3px;
  margin-right: 3px;
}

/* FEEDBACK TEXT */
:where(.bf-label-feedback) {
  color: var(--bfc-base-c);
  font-size: var(--bf-font-size-s);
  margin-top: 4px;
}

.bf-input-alert .bf-label-feedback,
.bf-select-alert .bf-label-feedback,
.bf-textarea-alert .bf-label-feedback,
.bf-datepicker-alert .bf-label-feedback,
.bf-file-input-area-alert .bf-label-feedback,
.bf-fieldgroup-alert + .bf-label-feedback {
  color: var(--bfc-base-c-alert);
}

.bf-label-feedback > :first-child {
  margin: 0;
}

/* ALERT BORDER COLOR */
.bf-input-alert .bf-input,
.bf-textarea-alert .bf-textarea,
.bf-select-alert .bf-select__control,
.bf-datepicker-alert .bf-datepicker {
  border-color: var(--bfc-base-c-alert);
}

.bf-input-alert .bf-input:hover,
.bf-textarea-alert .bf-textarea:hover,
.bf-select-alert .bf-select__control:hover,
.bf-datepicker-alert .bf-datepicker:hover {
  border-color: var(--bfc-alert-2);
}

.bf-input-alert .bf-input:focus,
.bf-textarea-alert .bf-textarea:focus,
.bf-select-alert .bf-select__control.bf-select__control--is-focused,
.bf-datepicker-alert .bf-datepicker:focus {
  border-color: var(--bfc-base-c-inverted);
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
}

/* ALERT SVG COLOR */
.bf-textarea-alert svg,
.bf-datepicker-alert svg {
  color: var(--bfc-base-c-alert);
}

/* label, fieldset and legend */
.bf-fieldset,
:where(.bf-content, .bf-elements) fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

.bf-legend,
:where(.bf-content, .bf-elements) legend {
  font-size: var(--bf-font-size-h3);
  color: var(--bfc-base-c-2);
  padding: 0;
  margin: 0;
}

:where(.bf-content) legend {
  margin: 0 0 var(--bfs16) 0;
}

.bf-label,
:where(.bf-content, .bf-elements) label {
  font-size: var(--bf-font-size-m);
  font-weight: 600;
  color: var(--bfc-base-c);
  display: block;
}

.bf-label-disabled,
.bf-fieldset:disabled .bf-label {
  color: var(--bfc-base-c-disabled);
}

/* space between label and input */
.bf-legend.bf-label,
:where(.bf-content, .bf-elements) legend.bf-label {
  margin: 0 0 var(--bfs4) 0;
}

.bf-label ~ :is(.bf-input,
.bf-select,
.bf-input-icon-container,
.bf-textarea,
.bf-textarea-icon-container,
.bf-datepicker-icon-container) {
  /* react <Select> gets this space from selectStyles object. See Select.tsx */
  margin-top: var(--bfs4);
}

/* #region native <select> styling (see Select.tsx for react <Select> component styling) */
select.bf-select {
  --bf-select-arrow-color: var(--bfc-base-c-2);
  --bf-select-arrow-size: 6px;
  --bf-select-arrow-padding-right: calc(12px + var(--bf-select-arrow-size));
  /* hide browser-native arrow(s) */
  appearance: none;
  /* roll our own with a trianble background image */
  background-image: linear-gradient(45deg, transparent 50%, var(--bf-select-arrow-color) 50%), linear-gradient(-45deg, transparent 50%, var(--bf-select-arrow-color) 50%);
  background-position: calc(100% - var(--bf-select-arrow-padding-right)) calc(1em + 1px), calc(100% - var(--bf-select-arrow-padding-right) + var(--bf-select-arrow-size)) calc(1em + 1px);
  background-size: var(--bf-select-arrow-size) var(--bf-select-arrow-size), var(--bf-select-arrow-size) var(--bf-select-arrow-size);
  background-repeat: no-repeat;
  padding-right: 32px;
}

select.bf-select:hover {
  --bf-select-arrow-color: var(--bfc-base-c);
}

/* all <option> styling is ignored completely on MacOS and iOS */
select.bf-select option {
  color: var(--bfc-base-c);
}

/* only seems to work for chromium on windows */
select.bf-select option:checked {
  font-weight: 600;
}

/* gray text for the value-less option */
select.bf-select option:where([value=""], :not([value])) {
  color: var(--bfc-base-c-2);
}

/* gray text for select with a value-less option currently selected, actually works everywhere? */
select.bf-select:has(option:checked:where([value=""], :not([value]))) {
  color: var(--bfc-base-c-2);
}

/* #endregion */
/* #region small input */
.bf-input-small .bf-input {
  height: var(--rem32);
  padding: 0.1875rem 8px;
}

.bf-input-small .bf-input-icon,
.bf-input-small .bf-state-icon,
.bf-input-small .bf-input-clear-icon {
  padding-block: 0;
  height: var(--rem24);
  width: var(--rem24);
}

/* #endregion */
/* #region react-select 5.7.7
todo: remove in 6.0 */
.bf-select__control {
  min-height: var(--rem40);
}

.bf-select-container .bf-select__value-container {
  padding: var(--rem2) 12px;
}

.bf-select__indicators {
  padding: 0.469rem 0; /* 7.5px */
}

.bf-select-small .bf-select__control {
  min-height: var(--rem32);
}

.bf-select-small .bf-select__input-container {
  margin-block: 0;
}

.bf-select-small .bf-select__value-container {
  padding: 0 8px;
}

.bf-select-small .bf-select__indicators {
  padding-block: 0.2187rem; /* 3.5px */
}

.bf-select-small .bf-select__dropdown-indicator {
  margin-right: 4px;
}

/* #endregion */
.bf-section {
  font-size: var(--bf-font-size-m);
}

:where(.bf-section-header) {
  padding: var(--rem8) var(--bfs16);
  border-bottom: var(--bf-border);
  border-top-left-radius: var(--bf-radius);
  border-top-right-radius: var(--bf-radius);
  min-height: 3.3125rem; /* 53px */
  display: flex;
  align-items: center;
  font-weight: 600;
}

:where(.bf-section-header.bf-no-padding) {
  padding: 0;
}

/* stretch content wrapper so arrow will be pushed to the right */
:where(.bf-section-header > :first-child) {
  flex: 1 1;
}

/* make sure link focus outline will be displayed */
:where(.bf-section > a),
:where(a:has(.bf-section, .bf-section-content, .bf-section-header)) {
  display: block;
}

.bf-box-arrow,
.bf-box-arrow-external {
  color: var(--bfc-base-c-2);
  translate: 0;
  transition-property: translate, color;
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
}

:is(a, button):hover .bf-box-arrow {
  color: var(--bfc-base-c);
  translate: 3px 0;
}

.bf-box-arrow-external {
  rotate: -45deg;
}

:is(a, button):hover .bf-box-arrow-external {
  color: var(--bfc-base-c);
  translate: 2px -2px;
}

.bf-button {
  --bf-button-border-color: var(--bfc-base-c-theme);
  --bf-button-border-radius: var(--bf-radius-s);
  border: 1px solid var(--bf-button-border-color);
  border-radius: var(--bf-button-border-radius);
  background: var(--bfc-base-3);
  line-height: 1.5;
  color: var(--bfc-base-c);
  padding: 0.5312rem 16px; /* 8.5px */
  font-size: var(--bf-font-size-m);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-width: var(--rem40);
  /* required for positioning ::before outline on hover, and z-index on focus */
  position: relative;
}

:where(a).bf-button {
  display: inline-block;
  text-align: center;
  text-decoration-line: none;
}

.bf-button:where(:focus) {
  outline: none;
}

.bf-button:where(:hover:not(:disabled, .bf-button-filled, .bf-button-flat))::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--bf-button-border-radius) - 1px);
  outline: 2px solid var(--bf-button-border-color);
  outline-offset: -1px;
  pointer-events: none;
}

.bf-button:where(:active:hover:not(:disabled)) {
  will-change: scale;
  scale: 0.95;
}

/* stretch clickable area while scaling down the button to make sure edges are clickable */
.bf-button:where(:active:hover:not(:disabled))::after {
  content: "";
  position: absolute;
  inset: 0;
  /* need to increase by sligtly more than 0.05 because  is a lower size after scaling parent to 0.95 */
  scale: 1.06;
}

.bf-button:where(:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  z-index: 1;
}

.bf-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.bf-button-pill {
  --bf-button-border-radius: var(--rem24);
}

.bf-button-small {
  padding-block: 0.2812rem; /* 4.5px */
  padding-inline: 12px;
  min-width: var(--rem32);
}

.bf-button-nopadding {
  padding-inline: 0;
}

.bf-button-inactive:hover {
  color: var(--bfc-base-c);
}

.bf-button-inactive,
.bf-button-inactive:disabled {
  --bf-button-border-color: var(--bfc-base-dimmed);
  color: var(--bfc-base-c-2);
}

.bf-button-alert {
  --bf-button-border-color: var(--bfc-alert);
}

.bf-button-neutral {
  --bf-button-border-color: var(--bfc-neutral);
}

.bf-button-inverted {
  --bf-button-border-color: var(--bfc-base-3);
  background: var(--bfc-base-c-inverted);
  color: var(--bfc-base-3);
}

.bf-button-inverted:focus-visible {
  outline-color: var(--bfc-base-3);
}

.bf-button-flat,
:is(.bf-button-filled, .bf-button-flat):is(:hover, :active:hover) {
  --bf-button-border-color: transparent;
}

.bf-button-filled:hover {
  background: var(--bfc-theme-2);
}

.bf-button-filled,
.bf-button-filled:disabled {
  background: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bf-button-filled.bf-button-inactive:hover {
  background: var(--bfc-base-dimmed-3);
  color: var(--bfc-base-c);
}

.bf-button-filled.bf-button-inactive,
.bf-button-filled.bf-button-inactive:disabled {
  --bf-button-border-color: transparent;
  background: var(--bfc-base-dimmed-2);
  color: var(--bfc-base-c-2);
}

.bf-button-filled.bf-button-alert:hover {
  background: var(--bfc-alert-2);
}

.bf-button-filled.bf-button-alert,
.bf-button-filled.bf-button-alert:disabled {
  background: var(--bfc-alert);
  color: var(--bfc-alert-c);
}

.bf-button-filled.bf-button-neutral:hover {
  background: var(--bfc-neutral-2);
}

.bf-button-filled.bf-button-neutral,
.bf-button-filled.bf-button-neutral:disabled {
  background: var(--bfc-neutral);
  color: var(--bfc-neutral-hc);
  --bf-button-border-color: var(--bfc-neutral);
}

.bf-button-filled.bf-button-inverted:hover {
  background: var(--bfc-base-dimmed);
}

.bf-button-filled.bf-button-inverted,
.bf-button-filled.bf-button-inverted:disabled {
  background: var(--bfc-base);
  color: var(--bfc-base-c);
}

.bf-button-flat:hover {
  background: var(--bfc-theme-c);
  color: var(--bfc-theme);
}

.bf-button-flat,
.bf-button-flat:disabled {
  background: none;
  color: var(--bfc-base-c-theme);
}

.bf-button-flat.bf-button-inactive:hover {
  background: var(--bfc-base-dimmed-2);
}

.bf-button-flat.bf-button-inactive,
.bf-button-flat.bf-button-inactive:disabled {
  background: none;
  color: var(--bfc-base-c-2);
}

.bf-button-flat.bf-button-alert:hover {
  background: var(--bfc-alert-fade);
  color: var(--bfc-alert-fade-c);
}

.bf-button-flat.bf-button-alert,
.bf-button-flat.bf-button-alert:disabled {
  background: none;
  color: var(--bfc-base-c-alert);
}

.bf-button-flat.bf-button-neutral:hover {
  background: var(--bfc-neutral-c);
}

.bf-button-flat.bf-button-neutral,
.bf-button-flat.bf-button-neutral:disabled {
  background: none;
  color: var(--bfc-base-c);
}

.bf-button-flat.bf-button-inverted:hover {
  background: var(--bfc-base-c-inverted-3);
}

.bf-button-flat.bf-button-inverted,
.bf-button-flat.bf-button-inverted:disabled {
  background: none;
  color: var(--bfc-base);
}

.bf-button-group {
  padding: 0.1875rem; /* 3px */
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: var(--bf-radius-s);
  background: var(--bfc-base-3);
  display: inline-flex;
  flex-wrap: nowrap;
}

.bf-button-group .bf-button {
  --bf-button-border-radius: var(--bf-radius-xs);
  --bf-button-border-color: transparent;
  margin-right: 4px;
  padding: 0.2187rem 12px; /* 3.5px */
  color: var(--bfc-base-c);
  border: 0.125rem dotted var(--bf-button-border-color); /* 2px */
  transition: none;
  font-weight: 600;
}

.bf-button-group .bf-button:where(:hover:not(:disabled)) {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-button-group .bf-button:last-child {
  margin-right: 0;
}

.bf-button-group .bf-button-selected,
.bf-button-group .bf-button-selected:where(:hover:not(:disabled)),
.bf-button-group .bf-button-selected:focus-visible {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bf-button-group .bf-button-selected:where(:hover:not(:disabled)) {
  background-color: var(--bfc-theme-2);
}

.bf-button-group .bf-button-inactive {
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c-2);
}

.bf-button-group .bf-button:focus-visible {
  --bf-button-border-radius: var(--bf-radius-s);
  border-color: var(--bfc-base-c);
  outline: none;
}

.bf-button-group .bf-button-selected:focus-visible {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bfc-theme);
}

.bf-button-group .bf-button-selected:focus-visible:where(:hover:not(:disabled)) {
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bfc-theme);
}

.bf-button-expand.bf-neutral-link {
  font-size: var(--bf-font-size-m);
}

.bf-button-expand:hover .bf-expand-icon-wrapper {
  background-color: var(--bfc-base-dimmed);
}

.bf-button-expand:focus-visible .bf-expand-icon-wrapper {
  outline: 2px dotted var(--bfc-base-c);
}

button.bf-button-expand.bf-neutral-link:focus-visible {
  outline: none;
}

.bf-expand-icon-wrapper + .bf-neutral-link-text {
  margin-left: var(--bfs8);
}

:root {
  --bf-switch-height: 1.5rem;
  --bf-switch-width: 2.75rem;
  --bf-checkbox-text-space: 0.5rem;
  /* paddings used for button (and button small), default 0 */
  --bf-checkbox-padding-x: 0px;
  --bf-checkbox-padding-y: 0px;
}

.bf-checkbox,
.bf-checkboxcard {
  --bf-checkbox-unchecked-icon-color: var(--bfc-base-c-2);
  --bf-checkbox-checked-icon-color: var(--bfc-theme);
  --bf-checkbox-button-border-color: var(--bfc-base-dimmed);
  --bf-checkbox-button-hover-border-color: var(--bfc-base-dimmed-3);
}

.bf-checkbox {
  /* font awesome icon size + text space */
  --bf-checkbox-space: calc(
    1.125rem + var(--bf-checkbox-text-space) + var(--bf-checkbox-padding-x)
  );
  font-size: var(--bf-font-size-m);
  display: inline-block;
  padding: var(--bf-checkbox-padding-y) var(--bf-checkbox-padding-x) var(--bf-checkbox-padding-y) var(--bf-checkbox-space);
  position: relative;
  border-radius: var(--bf-radius-s);
  line-height: var(--rem24);
  font-weight: normal;
}

.bf-checkbox-icon {
  color: var(--bf-checkbox-unchecked-icon-color);
  position: absolute;
  left: var(--bf-checkbox-padding-x);
  display: inline-block;
  scale: 1.3;
  padding-inline: 1px;
}

.bf-checkbox-checked,
.bf-checkbox-checked:hover {
  color: var(--bf-checkbox-checked-icon-color);
}

.bf-checkbox:hover:not(:has(:disabled)) .bf-checkbox-icon svg {
  scale: 1.1;
}

.bf-checkbox input:checked ~ * .bf-checkbox-unchecked {
  display: none;
}

.bf-checkbox input:not(:checked) ~ * .bf-checkbox-checked {
  display: none;
}

.bf-checkbox input {
  /* you cannot focus on a field with
   * visibility: hidden; or display: none;
  * so we hide the input some other way */
  position: absolute;
  opacity: 0;
  inset: 0;
}

.bf-checkbox input:not(:disabled),
.bf-checkbox:has(input:not(:disabled)) {
  cursor: pointer;
}

/* focus state */
.bf-checkbox:has(input:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* checkbox align right (left is default) */
.bf-checkbox-right.bf-checkbox {
  padding-left: var(--bf-checkbox-padding-x);
  padding-right: var(--bf-checkbox-space);
}

.bf-checkbox-right :is(.bf-checkbox-icon, .bf-switch) {
  left: auto;
  right: var(--bf-checkbox-padding-x);
}

/* Alert state styling */
.bf-checkbox-alert {
  --bf-checkbox-unchecked-icon-color: var(--bfc-base-c-alert);
  --bf-checkbox-checked-icon-color: var(--bfc-base-c-alert);
  --bf-checkbox-button-border-color: var(--bfc-base-c-alert);
  --bf-checkbox-button-hover-border-color: var(--bfc-base-c-alert);
}

/* button style */
.bf-checkbox-button {
  --bf-checkbox-padding-x: 16px;
  /* ~40px height when label is a single line */
  --bf-checkbox-padding-y: 0.531rem;
  line-height: 1.5;
}

.bf-checkbox-button.bf-checkbox {
  background-color: var(--bfc-base-3);
  border: 1px solid var(--bf-checkbox-button-border-color);
  border-radius: var(--bf-radius-s);
}

.bf-checkbox-button:hover:where(:not(:has(input:disabled))) {
  background-color: var(--bfc-base-2);
  border-color: var(--bf-checkbox-button-hover-border-color);
}

.bf-checkbox-button.bf-checkbox-small {
  --bf-checkbox-padding-x: 12px;
  /* ~32px height when label is a single line */
  --bf-checkbox-padding-y: 0.28rem;
}

/* switch styles */
.bf-switch-wrapper {
  --bf-switch-thumb-size: calc(var(--bf-switch-height) - 0.25rem);
  /* padding + switch size + text space (icons have a slightly larger box than switch) */
  --bf-checkbox-space: calc(
    var(--bf-checkbox-padding-x) + var(--bf-switch-width) +
      var(--bf-checkbox-text-space) + 0.125rem
  );
}

.bf-switch {
  height: var(--bf-switch-height);
  width: var(--bf-switch-width);
  background-color: var(--bf-checkbox-unchecked-icon-color);
  border-radius: var(--bf-radius-full);
  position: absolute;
  left: var(--bf-checkbox-padding-x);
  padding: 0.125rem;
}

.bf-switch-thumb {
  width: var(--bf-switch-thumb-size);
  height: 1.25rem;
  line-height: var(--bf-switch-thumb-size);
  text-align: center;
  position: absolute;
  border-radius: var(--bf-radius-full);
  background-color: var(--bfc-base-3);
  left: 0.125rem;
  /* transition short-hand does not work with multiple properties */
  transition-property: background-color, margin-left;
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  font-size: 0.8rem; /* magic value appears to almost fix centering browser rendering issue */
  color: var(--bfc-base-c-2);
}

/* switched on. account for <Checkbox> and <CheckboxCard> DOM */
:where(.bf-checkbox input:checked) ~ .bf-switch,
:where(.bf-checkboxcard input:checked) ~ * .bf-switch {
  background-color: var(--bf-checkbox-checked-icon-color);
}

/* thumb på hover (ikke disabled) */
:where(.bf-checkbox, .bf-checkboxcard):where(:hover:not(:has(input:disabled))) .bf-switch-thumb {
  scale: 0.9;
}

/* thumb for switch på active+hover, ikke disabled */
:where(.bf-checkbox, .bf-checkboxcard):where(:active:hover:not(:has(input:disabled))) .bf-switch-thumb {
  margin-left: 0.25rem;
}

/* thumb for checked */
:where(.bf-checkbox, .bf-checkboxcard):where(:has(input:checked)) .bf-switch-thumb {
  margin-left: calc(var(--bf-switch-width) - var(--bf-switch-height));
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c);
}

/* thumb for checked på active+hover, ikke disabled */
:where(.bf-checkbox, .bf-checkboxcard):where(:hover:active:has(input:checked:not(:disabled))) .bf-switch-thumb {
  margin-left: calc(var(--bf-switch-width) - var(--bf-switch-height) - 0.25rem);
}

/* hidden label */
.bf-checkbox-hidelabel .bf-checkbox-text {
  width: 0;
  height: 0;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}

.bf-checkbox-hidelabel .bf-checkbox-icon {
  position: relative;
}

.bf-checkbox-hidelabel {
  /* icon will take up its own space through position: static; */
  --bf-checkbox-space: 0px;
}

.bf-checkbox-hidelabel.bf-switch-wrapper {
  padding: 0 0 0 var(--bf-switch-width);
  border-radius: var(--bf-radius-full);
}

/* disabled */
.bf-checkbox:has(:disabled),
:where(.bf-checkbox, .bf-checkboxcard) :disabled ~ .bf-checkbox-icon {
  opacity: 0.3;
  cursor: default;
}

.bf-checkbox-indeterminate .fa-secondary {
  fill: var(--bf-checkbox-unchecked-icon-color); /* Border color */
  opacity: 1;
}

.bf-checkbox-indeterminate .fa-primary {
  fill: var(--bf-checkbox-checked-icon-color); /* Internal square color */
}

.bf-checkboxcard {
  --bf-checkboxcard-icon-space: 1.8125rem; /* 29px (21px icon + 8px padding) */
  --bf-checkboxcard-border-color: var(--bfc-base-dimmed);
  --bf-checkboxcard-hover-border-color: var(--bfc-base-dimmed-3);
  font-size: var(--bf-font-size-m);
  background-color: var(--bfc-base-3);
  border: 1px solid var(--bf-checkboxcard-border-color);
  border-radius: var(--bf-radius-s);
  display: block;
  overflow: hidden;
  position: relative;
}

.bf-checkbox-alert {
  --bf-checkboxcard-border-color: var(--bfc-base-c-alert);
  --bf-checkboxcard-hover-border-color: var(--bfc-base-c-alert);
}

.bf-switch-wrapper.bf-checkboxcard {
  --bf-checkboxcard-icon-space: calc(var(--bf-switch-width) + var(--rem8));
}

.bf-checkboxcard:hover:not(:has(input:disabled)) {
  background-color: var(--bfc-base-2);
  border-color: var(--bf-checkboxcard-hover-border-color);
}

.bf-checkboxcard input {
  /* you cannot focus on a field with
   * visibility: hidden; or display: none;
  * so we hide it some other way */
  position: absolute;
  opacity: 0;
  inset: 0;
}

.bf-checkboxcard input:not(:disabled),
.bf-checkboxcard:has(input:not(:disabled)) {
  cursor: pointer;
}

.bf-checkboxcard-header {
  background-color: var(--bfc-base-2);
}

.bf-checkboxcard:hover:not(:has(input:disabled)) .bf-checkboxcard-header {
  background-color: var(--bfc-base-1);
}

.bf-checkboxcard-content {
  padding: 12px;
  font-weight: 400;
  color: var(--bfc-base-c-2);
}

.bf-checkboxcard-label-text {
  display: block;
  position: relative;
  margin-bottom: var(--bfs8);
  padding-right: var(--bf-checkboxcard-icon-space);
  color: var(--bfc-base-c);
  font-weight: 600;
}

.bf-checkboxcard-left .bf-checkboxcard-label-text {
  padding-left: var(--bf-checkboxcard-icon-space);
  padding-right: 0;
}

.bf-checkboxcard-no-children .bf-checkboxcard-label-text {
  margin-bottom: 0;
}

/* hover state */
label:hover .bf-checkboxcard-icon {
  color: var(--bfc-theme-2);
}

/* focus state */
.bf-checkboxcard:has(input:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* disabled */
.bf-checkboxcard:has(input:disabled) {
  opacity: 0.3;
  cursor: default;
}

.bf-checkboxcard input:disabled ~ .bf-checkboxcard-header {
  cursor: default;
}

.bf-checkboxcard .bf-checkbox-icon {
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  scale: 1.3;
}

.bf-checkboxcard:hover:not(:has(input:disabled)) .bf-checkbox-icon svg {
  scale: 1.1;
}

.bf-checkboxcard .bf-switch {
  left: auto;
  right: 0;
}

.bf-checkboxcard-left :is(.bf-switch, .bf-checkbox-icon) {
  right: auto;
  left: 0;
}

.bf-checkboxcard input:checked ~ .bf-checkboxcard-content .bf-checkbox-unchecked {
  display: none;
}

.bf-checkboxcard input:not(:checked) ~ .bf-checkboxcard-content .bf-checkbox-checked {
  display: none;
}

/* also see bifrost-form.css */
.bf-input-icon-container {
  position: relative;
  display: flex;
}

.bf-input {
  height: var(--rem40);
}

.bf-input-icon,
.bf-state-icon,
.bf-input-clear-icon {
  color: var(--bfc-base-c-2);
  position: absolute;
  height: var(--rem32);
  width: var(--rem32);
  margin: var(--rem4);
  padding: var(--rem4) 0;
  text-align: center;
  font-size: var(--bf-font-size-l);
}

.bf-input-disabled .bf-input-icon {
  color: var(--bfc-base-c-disabled);
}

/* click-through on icons to hit input field behind
 * (avoid on button element for `onIconClick`) */
:where(.bf-input-icon, .bf-state-icon):not(button) {
  pointer-events: none;
}

/* #region disabled input (also see bifrost-form.css) */
/* Disabled: search */
.bf-input-disabled .bf-input-icon-button,
.bf-input-disabled .bf-input-icon-button:hover {
  color: var(--bfc-base-c-disabled);
  cursor: default;
}

/* Disabled: search iconButton */
.bf-input-disabled .bf-input-icon-button-filled .bf-input-icon-button,
.bf-input-disabled .bf-input-icon-button-filled .bf-input-icon-button:hover {
  color: var(--bfc-base-3);
  background-color: var(--bfc-base-c);
  opacity: 0.3;
}

/* Disabled: clearable */
.bf-input-disabled .bf-input-clear-icon {
  display: none;
}

/* Disabled: states */
.bf-input-disabled .bf-input-icon-state .bf-state-icon {
  color: var(--bfc-base-c-2);
}

/* #endregion */
.bf-input-icon-left .bf-input-icon,
.bf-input-icon-state .bf-input-icon {
  right: auto;
  left: 0;
}

.bf-input-icon-right .bf-input-icon,
.bf-input-icon-state .bf-state-icon,
.bf-input-clearable .bf-input-clear-icon {
  left: auto;
  right: 0;
}

.bf-input-icon-container .bf-input-state-only {
  padding-left: var(--rem12);
}

.bf-state-icon {
  color: var(--bfc-base-c);
}

.bf-input-success .bf-state-icon {
  color: var(--bfc-base-c-success);
}

.bf-input-alert .bf-state-icon {
  color: var(--bfc-base-c-alert);
}

/* Clickable icon */
.bf-input-icon-button {
  background-color: transparent;
  font-size: var(--bf-font-size-l);
  border: 2px dotted transparent;
  border-radius: var(--bf-radius-xs);
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  outline: none;
  cursor: pointer;
}

/* make clickable area larger without changing the button appearance,
avoids input hover effect when hovering right next to button */
.bf-input-icon-button::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.bf-input-icon-button:focus-visible {
  border-color: var(--bfc-base-c);
  border-radius: var(--bf-radius-s);
}

/* Clickable icon with rightIcon prop */
.bf-input-icon-right .bf-input-icon-button {
  left: auto;
  right: 0;
}

.bf-input-icon-button:is(:hover, :active) {
  color: var(--bfc-base-c);
}

/* IconButton prop */
.bf-input-icon-button-filled .bf-input-icon-button {
  --bf-input-icon-button-filled-bg: var(--bfc-theme);
  background-color: var(--bf-input-icon-button-filled-bg);
  color: var(--bfc-theme-hc);
}

.bf-input-icon-button-filled .bf-input-icon-button:hover {
  --bf-input-icon-button-filled-bg: var(--bfc-theme-2);
}

.bf-input-icon-button-filled .bf-input-icon-button:active {
  scale: 0.95;
}

.bf-input-icon-button-filled .bf-input-icon-button:focus-visible {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bf-input-icon-button-filled-bg);
  border-color: var(--bfc-base-c);
}

.bf-input-icon-button svg {
  vertical-align: unset;
}

/* "X" clear icon */
.bf-input-clear-icon {
  cursor: pointer;
}

.bf-input-clear-icon:hover {
  color: var(--bfc-base-c);
}

/* #region spacing and positioning for icons
32 px wide icon + 4px margin each side = 40px */
.bf-input-icon-right .bf-input,
.bf-input-icon-state .bf-input,
.bf-input-clearable .bf-input:enabled {
  padding-right: 2.375rem; /* 38px */
}

.bf-input-icon-left .bf-input {
  padding-left: 2.375rem; /* 38px */
}

/* two icons on right-hand side */
.bf-input-icon-right.bf-input-clearable .bf-input:enabled,
.bf-input-icon-state.bf-input-clearable .bf-input:enabled {
  padding-right: 4.25rem; /* 68px */
}

/* move clear icon when there is also another icon on right-hand side */
.bf-input-icon-right .bf-input-clear-icon,
.bf-input-icon-state .bf-input-clear-icon {
  right: var(--rem32);
}

/* #endregion */
/* #region spacing and positioning for icons
32 px wide icon + 4px margin each side = 40px */
.bf-input-small .bf-input-icon-right .bf-input,
.bf-input-small .bf-input-icon-state .bf-input,
.bf-input-small .bf-input-clearable .bf-input:enabled {
  padding-right: 1.875rem; /* 30px */
}

.bf-input-small .bf-input-icon-left .bf-input {
  padding-left: 1.875rem; /* 30px */
}

/* two icons on right-hand side */
.bf-input-small .bf-input-icon-right.bf-input-clearable .bf-input:enabled,
.bf-input-small .bf-input-icon-state.bf-input-clearable .bf-input:enabled {
  padding-right: 3.25rem; /* 52px */
}

/* move clear icon when there is also another icon on right-hand side */
.bf-input-small .bf-input-icon-right .bf-input-clear-icon,
.bf-input-small .bf-input-icon-state .bf-input-clear-icon {
  right: 1.69rem; /* 27px */
}

/* #endregion */
/* also see bifrost-form.css */
.bf-textarea-container {
  max-width: 100%;
}

.bf-textarea-icon-container {
  white-space: nowrap;
  position: relative;
  font-size: var(--bf-font-size-l);
}

.bf-textarea-icon-container .bf-textarea-icon,
.bf-textarea-icon-container svg {
  position: absolute;
  vertical-align: top;
  top: var(--bfs12);
  right: var(--bfs24);
}

.bf-textarea {
  display: block;
  resize: vertical;
  height: 100px;
  width: 100%;
  min-width: 200px;
  min-height: 50px;
  max-width: 100%;
  max-height: 500px;
  overflow-y: auto;
  cursor: auto;
  padding-block: 7px;
}

.bf-textarea-icon-container .bf-textarea {
  padding-right: var(--bfs40);
}

/* DISABLED */
/* Also see bifrost-form.css */
.bf-textarea-disabled .bf-textarea-icon-container textarea {
  background: var(--bfc-base);
  border: 1px solid var(--bfc-base-c-dimmed);
}

.bf-textarea-disabled .bf-textarea-icon-container textarea::placeholder {
  color: var(--bfc-base-c-disabled);
  opacity: 1;
}

/* Disabled: states */
.bf-textarea-disabled .bf-textarea-icon-state svg {
  color: var(--bfc-base-c-2);
}

/* stylelint-disable selector-class-pattern */
/* Component label */
fieldset legend.bf-label.bf-fieldgroup-legend {
  margin: 0;
  padding: 0;
}

/* Component */
.bf-fieldgroup {
  display: flex;
  position: relative;
  width: 100%;
}

/* FieldGroup.Item */
.bf-fieldgroup-item {
  flex-grow: 0;
}

.bf-fieldgroup-item > div {
  color: var(--bfc-base-c);
  background-color: var(--bfc-base);
  cursor: default;
}

/* Override default bf-input hover effect */
.bf-fieldgroup:not(.bf-fieldgroup-disabled, .bf-fieldgroup-readonly) .bf-fieldgroup-item .bf-input:hover {
  border-color: var(--bfc-base-c-wcag);
}

/* Set margin top if fieldgroup has label or description */
.bf-label-description ~ .bf-fieldgroup,
.bf-label ~ .bf-fieldgroup {
  margin-top: var(--bfs4);
}

/* Remove border radius
 * todo: remove .bf-select__* in 6.0 */
.bf-fieldgroup .bf-select__control,
.bf-fieldgroup .bf-input,
.bf-fieldgroup-item > div {
  border-radius: 0;
}

/* All children */
.bf-fieldgroup .bf-input-container,
.bf-fieldgroup .bf-select-container,
.bf-fieldgroup .bf-datepicker-container {
  flex-grow: 1;
}

/* remove double borders between items by overlapping with 1px */
.bf-fieldgroup > * + * {
  margin-left: -1px;
}

/* make sure all outside borders are visible for hovered/focused field */
.bf-fieldgroup > :is(:focus, :focus-within, :hover):not(.bf-fieldgroup-item) {
  position: relative;
  z-index: 1;
}

/* Checkbox support for FieldGroup (button variant only) */
.bf-fieldgroup .bf-checkbox {
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: 0;
}

.bf-fieldgroup .bf-checkbox:hover {
  border: 1px solid var(--bfc-base-c-inverted);
}

/* DatePicker support */
.bf-fieldgroup .bf-datepicker-container .react-datepicker__input-container input {
  border-radius: 0;
}

/* First child border radius */
.bf-fieldgroup > :first-child,
.bf-fieldgroup > :first-child :is(.bf-input,
.bf-select__control,
.react-datepicker__input-container input) {
  border-top-left-radius: var(--bf-radius-s);
  border-bottom-left-radius: var(--bf-radius-s);
}

/* Last child border radius */
.bf-fieldgroup > :last-child,
.bf-fieldgroup > :last-child :is(.bf-input,
.bf-select__control,
.react-datepicker__input-container input) {
  border-top-right-radius: var(--bf-radius-s);
  border-bottom-right-radius: var(--bf-radius-s);
}

/* Alert state */
.bf-fieldgroup-alert :is(.bf-select__control,
.bf-input,
.react-datepicker__input-container input):not(.bf-select__control--is-focused, :focus) {
  border-color: var(--bfc-base-c-alert);
}

.bf-fieldgroup-alert :is(.bf-select__control,
.bf-input,
.react-datepicker__input-container input):not(.bf-select__control--is-focused, :focus):hover {
  border-color: var(--bfc-alert-fade-c);
}

/* Read-only */
.bf-fieldgroup-readonly .bf-fieldgroup-item > div {
  border-color: var(--bfc-base-c-dimmed);
}

.bf-accordion {
  border: 1px solid var(--bfc-base-c-dimmed);
  border-radius: var(--bf-accordion-radius);
  background: var(--bfc-base-3);
}

.bf-accordion:where(:not(.bf-accordion-compact)) {
  --bf-accordion-radius: var(--bf-radius, 12px);
}

.bf-accordion-noborder {
  /* todo: remove in 6.0 */
  --bf-accordion-radius: 0px;
  border: none;
}

.bf-accordion-item {
  color: var(--bfc-base-c);
}

.bf-accordion-item + .bf-accordion-item {
  border-top: 1px solid var(--bfc-base-c-dimmed);
}

.bf-accordion-item-title {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  font-size: var(--bf-font-size-m);
}

.bf-accordion-item-title > button {
  padding-block: var(--rem8);
  padding-right: 16px;
  padding-left: 10px;
  min-height: 2.875rem; /* 46px */
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.bf-accordion-item-title > button:focus {
  outline: none;
}

.bf-accordion-item:last-child .bf-accordion-item-title,
.bf-accordion-item:last-child .bf-accordion-item-content {
  border-bottom: 0;
}

.bf-accordion-item:where(:last-child) .bf-accordion-item-content {
  border-bottom-left-radius: var(--bf-accordion-radius);
  border-bottom-right-radius: var(--bf-accordion-radius);
}

.bf-accordion-item-title .bf-accordion-item-angle {
  transition: all var(--bf-animation-duration);
}

.bf-accordion-item-angle-circle {
  width: 1.313rem; /* 21px */
  height: 1.313rem; /* 21px */
  display: inline-flex;
  place-items: center center;
  place-content: center center;
  margin-right: var(--bfs12);
  border-radius: var(--bf-radius-full);
}

.bf-accordion-item-title > button:hover .bf-accordion-item-angle-circle {
  background-color: var(--bfc-base);
}

.bf-accordion-item-active > .bf-accordion-item-title .bf-accordion-item-angle {
  transform: rotate(90deg);
}

.bf-accordion-item-content {
  padding: var(--bfs16);
  background-color: var(--bfc-base-2);
  /* stylelint-disable-next-line property-no-deprecated */
  word-wrap: break-word;
  font-size: var(--bf-font-size-m);
  position: relative;
}

.bf-accordion-item-content.bfl-nopadding {
  padding: 0;
}

.bf-accordion-item-title > button:focus-visible,
.bf-accordion-action:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  /* make sure the outline is visible on top of expanded accordion item content */
  position: relative;
  z-index: 1;
}

/* Disabled */
.bf-accordion-item-disabled,
.bf-accordion-item-disabled .bf-accordion-item-title svg {
  pointer-events: none;
  color: var(--bfc-base-c-disabled);
}

.bf-accordion-item-icon {
  margin-right: var(--bfs8);
  color: var(--bfc-base-c-2);
}

.bf-accordion-item-actions {
  margin-right: var(--bfs4);
}

/* #region styled variant */
.bf-accordion-styled {
  border: none;
  background-color: transparent;
}

.bf-accordion-styled .bf-accordion-item {
  border: 1px solid var(--bfc-base-c-dimmed);
  border-radius: var(--bf-accordion-radius);
  background-color: var(--bfc-base-3);
}

.bf-accordion-styled .bf-accordion-item-content {
  border-top: var(--bf-border);
  border-bottom-left-radius: var(--bf-accordion-radius);
  border-bottom-right-radius: var(--bf-accordion-radius);
}

.bf-accordion-styled.bf-accordion-noborder .bf-accordion-item {
  border: none;
}

.bf-accordion-styled .bf-accordion-item + .bf-accordion-item {
  margin-top: var(--bfs12);
}

.bf-accordion-styled .bf-accordion-item-title > button {
  min-height: calc(3.3125rem - 1px); /* 53px - 1px border-top from content */
}

.bf-accordion-styled .bf-accordion-item:has(.bf-accordion-item-title > button:hover) {
  box-shadow: var(--bf-shadow);
}

/* #endregion */
/* #region responsive / compact */
.bf-accordion-compact {
  border-left: none;
  border-right: none;
}

.bf-accordion-compact.bf-accordion-styled .bf-accordion-item {
  border: none;
}

@media (max-width: 599.9px) {
  .bf-accordion-responsive {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .bf-accordion-responsive.bf-accordion-styled .bf-accordion-item {
    border: none;
    border-radius: 0;
  }
}
/* #endregion */
/* #region Accordion.Action */
.bf-accordion-action {
  display: inline-flex;
  font: inherit;
  text-decoration-line: inherit;
  text-decoration-style: inherit;
  background: inherit;
  border: inherit;
  border-radius: inherit;
  cursor: pointer;
  padding: var(--bfs8);
  color: var(--bfc-base-c);
}

.bf-accordion-action-circle {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: var(--bf-radius-full);
  padding: 5px;
}

.bf-accordion-action:hover .bf-accordion-action-circle {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-accordion-styled .bf-accordion-action {
  padding-block: 13px;
}

/* #endregion */
.bf-close-button {
  position: absolute;
  top: var(--bf-page-padding);
  font-size: var(--bf-font-size-h2);
  color: var(--bfc-base-c);
  cursor: pointer;
  border: none;
  border-radius: var(--bf-radius-full);
  width: var(--rem40);
  height: var(--rem40);
  text-overflow: unset;
  white-space: unset;
  background: inherit;
  line-height: 1;
  padding: 0; /* since iOS Safari behaves differently than all other browsers */
  /* fallback for browsers that don't understand env() */
  right: var(--bf-page-padding, 0);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-close-button:hover,
.bf-close-button:focus-visible:hover {
  background: var(--bfc-base-dimmed-2);
}

.bf-close-button:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
}

.bf-close-button:active:hover {
  will-change: scale;
  scale: 0.95;
}

:root {
  --bf-drawer-width: 550px;
}

/* Drawer */
.bf-drawer {
  position: fixed;
  top: var(--bf-nav-top-height, 0);
  right: 0;
  bottom: 0;
  z-index: 99999;
  outline: none;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--bf-page-padding, 0);
  width: var(--bf-drawer-width);
  background: var(--bfc-base-3);
  margin-right: calc(var(--bf-drawer-width) * -1);
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  transition-property: width, margin, top;
}

.bf-drawer.bf-drawer-nopadding {
  padding: 0;
}

.bf-drawer:where(:not(.bf-drawer-with-footer, .bf-drawer-nopadding)) {
  padding-left: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-drawer.bf-drawer-open {
  margin-right: 0;
  box-shadow: 0 0 40px 0 var(--bfc-shadow);
}

/* #region Bottom position */
.bf-drawer-bottom {
  width: unset;
  top: unset;
  margin-right: 0;
  margin-bottom: -100lvh;
  left: var(--bf-nav-side-width, 0);
  border-radius: var(--bf-radius-l) var(--bf-radius-l) 0 0;
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - var(--bf-nav-top-height));
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - var(--bf-nav-top-height));
}

.bf-drawer-bottom.bf-drawer-open {
  margin-bottom: 0;
}

.bf-drawer-bottom .bf-drawer-header {
  padding-right: 0;
}

/* #endregion */
/* Header */
.bf-drawer-header {
  font-size: var(--bf-font-size-h2);
  font-weight: 660;
}

.bf-drawer-with-close .bf-drawer-header {
  /* make space for close button */
  padding-right: 40px;
}

/* Footer */
.bf-drawer-with-footer {
  display: grid;
  overflow: visible;
  padding: 0;
}

.bf-drawer-with-footer > :not(.bf-drawer-content-not-visible) {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(var(--bf-page-padding, 0px) / 2);
  /* todo: remove `vh` fallback when `dvh` is better supported */
  height: calc(100vh - var(--bf-nav-top-height, 0px));
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  height: calc(100dvh - var(--bf-nav-top-height, 0px));
}

.bf-drawer-with-footer.bf-drawer-nopadding > :not(.bf-drawer-content-not-visible) {
  gap: 0;
}

.bf-drawer-with-footer:not(.bf-drawer-nopadding) :where(.bf-drawer-footer, .bf-drawer-content) {
  padding-left: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-drawer-with-footer .bf-drawer-content {
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  padding-top: var(--bf-page-padding, 0);
}

.bf-drawer-with-footer:not(.bf-drawer-nopadding) .bf-drawer-footer {
  padding-bottom: var(--bf-page-padding, 0);
}

.bf-drawer-with-footer.bf-drawer-nopadding .bf-drawer-content {
  padding-top: 0;
}

/* Overlay */
.bf-drawer-overlay {
  position: fixed;
  inset: var(--bf-nav-top-height) 0 0 0;
  background-color: var(--bfc-overlay);
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  transition-property: opacity, visibility, top;
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
}

.bf-drawer-overlay-open {
  opacity: 1;
  visibility: visible;
}

/* Small */
@media (max-width: 599.9px), (max-height: 599.9px) {
  :root {
    --bf-drawer-width: 100dvw;
  }
}
/* Large */
@media (min-width: 1280px) {
  .bf-drawer-padding {
    padding-right: calc(var(--bf-drawer-width) + 24px);
  }
}
html.bf-drawer-overlay-active {
  overflow-y: hidden;
}

:where(.bf-dropdown[popover], .bf-dropdown-unstyled[popover]) {
  inset: unset;
  margin: unset;
  border: unset;
  overflow: unset;
  padding: unset;
  background: unset;
}

.bf-dropdown {
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border: 1px solid var(--bfc-base-dimmed);
  border-radius: var(--bf-radius-s);
  min-width: 200px;
  box-shadow: var(--bf-shadow);
  font-size: var(--bf-font-size-m);
  /* explicitly set properties to avoid inheriting from parent */
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  /* double rule in case browser doesn't understand `env()` */
  max-width: calc(100dvw - 20px);
  max-width: calc(100dvw - 20px - env(safe-area-inset-right) - env(safe-area-inset-left));
}

.bf-dropdown-content {
  overflow: auto;
  padding: 8px;
  display: block;
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - var(--bf-nav-top-height) - 20px);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - var(--bf-nav-top-height) - 20px);
}

/* dropdowns inside a hidden top nav */
.bf-nav-top-hide-for-mobile:not(:focus-within) .bf-dropdown-content {
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - 20px);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - 20px);
}

.bf-dropdown-nopadding,
.bf-dropdown-nopadding .bf-dropdown-content {
  padding: 0;
}

/* Dropdown with Checkbox */
.bf-dropdown .bf-checkbox {
  display: block;
  margin-block: var(--bfs8);
  margin-left: var(--bfs16);
  margin-right: var(--bfs8);
}

.bf-dropdown-content > :where(hr, div > hr) {
  padding: 0;
  margin: 8px -8px;
  border: var(--bf-border);
  border-bottom: none;
}

.bf-dropdown-nopadding .bf-dropdown-content > :where(hr, div > hr) {
  margin-inline: 0;
}

/* #region Dropdown.Item */
:is(a, button):has(> .bf-dropdown-item) {
  display: block;
  color: inherit;
  outline: none;
}

:where(a):has(> .bf-dropdown-item) {
  text-decoration-line: none;
}

:where(button):has(> .bf-dropdown-item) {
  width: 100%;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
  appearance: none;
  margin: 0;
}

.bf-dropdown-item {
  padding: 9.5px 12px;
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border-radius: var(--bf-radius-s);
}

:where(.bf-dropdown-item-icon) {
  color: var(--bfc-base-c-2);
}
:where(:is(a, button):hover > .bf-dropdown-item) :where(.bf-dropdown-item-icon) {
  color: var(--bfc-base-c-theme);
}

.bf-dropdown-item-inactive {
  color: var(--bfc-base-c-2);
}
.bf-dropdown-item-inactive .bf-dropdown-item-icon {
  color: inherit;
}

.bf-dropdown-item:where(:has(> .bf-dropdown-item-icon:first-child)) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

:where(:is(a, button):hover) > .bf-dropdown-item {
  background-color: var(--bfc-base-2);
}

:where(:is(a, button):focus-visible) > .bf-dropdown-item {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* #endregion Dropdown.Item */
@property --bf-message-radius {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 12px;
}
.bf-message {
  --bf-message-radius: var(--bf-radius-m);
  padding: var(--bfs16);
  border-radius: var(--bf-message-radius);
  font-size: var(--bf-font-size-m);
}

.bf-message-header {
  margin-bottom: var(--bfs8);
  font-weight: 600;
}

/* No margin-bottom when header only */
.bf-message-only-header .bf-message-header {
  margin-bottom: 0;
}

.bf-message-icon {
  margin-right: var(--bfs8);
}

/* todo: remove in 7.0 and update css message docs */
.bf-message-statusbar {
  padding-top: var(--bfs8);
  padding-bottom: var(--bfs8);
  font-weight: 600;
  position: relative;
}

.bf-message-close {
  float: right;
  position: relative;
  background-color: transparent;
  color: inherit;
  border: none;
  border-radius: var(--bf-radius-full);
  text-align: center;
  cursor: pointer;
  padding: 0;
  height: 1.313rem; /* 21px */
  width: 1.313rem; /* 21px */
  line-height: 1.4;
}

.bf-message-close:focus {
  outline: none;
}

.bf-message-close:focus-visible {
  outline: 2px dotted currentcolor;
  outline-offset: 2px;
}

/* remove firefox dotted line on focus */
.bf-message-close::-moz-focus-inner {
  border: 0;
}

/* expand and close buttons hover state background colors */
.bf-message-close:hover {
  background-color: color-mix(in lab, transparent 90%, currentcolor);
}

.bf-message-expandable-content {
  background-color: var(--bfc-base-3);
  font-size: var(--bf-font-size-m);
  padding: var(--bfs16);
  color: var(--bfc-base-c-1);
  border-bottom-left-radius: var(--bf-message-radius);
  border-bottom-right-radius: var(--bf-message-radius);
}

.bf-message-expandable-content.bf-nopadding {
  padding: 0;
}

.bf-message-expandable-icon {
  display: inline-block;
  margin-right: var(--bfs8);
  border-radius: var(--bf-radius-full);
  height: 1.313rem; /* 21px */
  width: 1.313rem; /* 21px */
  text-align: center;
  transition: all var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-message-expandable-active .bf-message-expandable-icon {
  transform: rotate(90deg);
}

.bf-message-expandable {
  border: 1px solid var(--bfc-base-dimmed);
  /* add an extra px to match inner header radius */
  border-radius: calc(var(--bf-message-radius) + 1px);
  padding: 0;
}

.bf-message-expandable .bf-message-header {
  border-radius: var(--bf-message-radius);
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 17px var(--bfs12);
}

.bf-message-expandable.bf-message-expandable-active .bf-message-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bf-message-expandable:has(.bf-message-header:hover) {
  box-shadow: var(--bf-shadow);
}

.bf-message-expandable .bf-message-header:hover .bf-message-expandable-icon {
  background-color: color-mix(in lab, transparent 90%, currentcolor);
}

.bf-message-expandable .bf-message-header:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  z-index: 1;
}

/* Remove margin from first and last elements inside message */
.bf-message .bf-message-header + * {
  margin-top: 0;
}

.bf-message > :last-child:not(.bf-message-header) {
  margin-bottom: 0;
}

.bf-modal {
  --bf-modal-padding: var(--bfs40);
  --bf-modal-width: 100%;
  padding: unset;
  border: unset;
  background: unset;
  margin: auto;
  max-width: min(100% - var(--bf-modal-padding) * 2, var(--bf-modal-width));
  overscroll-behavior: contain;
  font-size: var(--bf-font-size-m);
}

/* the dialog itself is usually not focusable, except if you press ESC
on an unclosable dialog (and don't have focus elsewhere)? */
.bf-modal:focus-visible {
  outline: none;
}

.bf-modal-content {
  /* avoid padding on modal element directly to reliably
  detect if a click is on content or outside (on backdrop) */
  padding: var(--bf-modal-padding);
  background: var(--bfc-base);
  color: var(--bfc-base-c);
  border-radius: var(--bf-radius);
}

.bf-modal-transparent {
  background: transparent;
}

.bf-modal-content.bf-no-padding {
  --bf-modal-padding: 0;
}

/* header */
.bf-modal-header {
  font-size: var(--bf-font-size-h5);
  font-weight: 740;
  padding-bottom: var(--bfs16);
}

/* overlay */
.bf-modal::backdrop {
  background-color: var(--bfc-overlay);
}

/* close button */
.bf-modal-close {
  display: block;
  margin-left: auto;
  font-size: var(--bf-font-size-h5);
  color: var(--bfc-overlay-c);
  cursor: pointer;
  border: none;
  border-radius: var(--bf-radius-full);
  width: 24px;
  height: 24px;
  text-overflow: unset;
  white-space: unset;
  background: unset;
  line-height: 1;
  padding: 0; /* since iOS Safari behaves differently than all other browsers */
  margin-bottom: var(--bfs8);
}

.bf-modal-close:focus-visible {
  outline: none;
  box-shadow: none;
  border: 1px dashed currentcolor;
  background-color: transparent;
}

/* small screens in portrait or landscape */
@media (max-width: 599.9px), (max-height: 599.9px) {
  .bf-modal {
    --bf-modal-padding: var(--bfs16);
  }
}
.bf-pagination {
  white-space: nowrap;
  text-align: center;
  font-size: var(--bf-font-size-m);
  user-select: none;
}

.bf-pagination-button {
  padding: 0 4px;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  background-color: transparent;
  color: var(--bfc-base-c-1);
  outline: none;
  min-width: var(--rem28);
  height: var(--rem28);
  border-radius: var(--bf-radius-full);
  margin: 0 var(--bfs8);
  text-align: center;
  cursor: pointer;
  border: none;
}

.bf-pagination-prev,
.bf-pagination-next {
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0;
  margin: 0 var(--bfs8);
  outline-offset: 4px;
}

.bf-pagination-prev svg {
  margin-right: var(--bfs4);
}

.bf-pagination-next svg {
  margin-left: var(--bfs4);
}

.bf-pagination-dots {
  display: inline-block;
  text-align: center;
  min-width: 28px;
  margin: 0 var(--bfs8);
}

.bf-pagination-button-arrow {
  color: var(--bfc-base-c);
  margin: 0;
}

.bf-pagination-button:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
}

.bf-pagination-button:hover {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-pagination-button:disabled {
  cursor: default;
}

button:is(.bf-pagination-button-arrow,
.bf-pagination-prev,
.bf-pagination-next):disabled {
  color: var(--bfc-base-disabled);
  background-color: transparent;
}

.bf-pagination-button-selected,
.bf-pagination-button-selected:focus-visible,
.bf-pagination-button-selected:hover,
.bf-pagination-button-selected:active {
  font-weight: 600;
  background-color: var(--bfc-base-c);
  color: var(--bfc-base-3);
}

/* #region main table styles */
.bf-table {
  border-collapse: inherit;
  border-spacing: 0;
  color: var(--bfc-base-c);
  font-size: var(--bf-font-size-m);
  width: 100%;
  border-radius: var(--bf-radius-xs);
}

/* table header */
.bf-table > thead {
  color: var(--bfc-base-c);
  text-align: left;
}

/* table header cell */
.bf-table > * > tr > th {
  color: var(--bfc-base-c);
  font-weight: 600;
}

/* first table header cell border */
.bf-table > thead > tr > th:first-child {
  border-left: 6px solid var(--bfc-base-c-2);
  border-top-left-radius: var(--bf-radius-xs);
}

/* table row vertical separator line */
.bf-table > tbody > tr + tr > * {
  border-top: 1px solid var(--bfc-base-dimmed);
}

/* gray left table border */
.bf-table > tbody > tr > td:first-child {
  border-left: 6px solid var(--bfc-base-dimmed);
}

/* #endregion */
/* #region table cell padding */
/* https://gitlab.intility.com/DeveloperServices/portal2/bifrost/-/issues/326#note_124827
default cell padding
24px left
8px right
24px right for last column

mobile (600px-)
12px left
8px right
12px right for last column

applies to both th and td inside thead, tbody or tfoot
(the valid children of table tag, therefore *)

top and bottom padding in figma is 18.5px to give 58px high rows
when single line text content. approximated to 18px in css.
this gives 57px high rows default but stretches to accommodate taller content
*/
.bf-table > * > tr > * {
  padding: 18px var(--bf-table-cell-padding, 24px) 18px var(--bf-table-cell-padding-tight, 8px);
}

/* first column */
.bf-table > * > tr > :first-child {
  padding-left: var(--bf-table-cell-padding, 24px);
}

/* stylelint-disable-next-line no-duplicate-selectors */
.bf-table {
  --bf-table-cell-padding-tight: var(--bfs8);
}

@media (max-width: 599.9px) {
  .bf-table {
    --bf-table-cell-padding: var(--bfs12);
  }
}
@media (min-width: 600px) {
  .bf-table {
    --bf-table-cell-padding: var(--bfs24);
  }
}
/* #endregion */
/* #region table cell shadows */
/* Safari doesnt support box-shadow on table row,
therefore we have put shadow on table cells */
/* stylelint-disable-next-line no-duplicate-selectors */
.bf-table {
  --bf-table-shadow: rgba(0, 0, 0, 0.25);
}

.bf-lightmode .bf-table {
  --bf-table-shadow: rgba(0, 0, 0, 0.15);
}

/* Each table cell of first row after header gets top shadow only */
.bf-table > thead + tbody > tr:first-child > * {
  box-shadow: inset 0 6px 4px -5px var(--bf-table-shadow);
}

/* Vertical table first column after header column gets left shadow only */
.bf-table > tbody > tr > th + td {
  box-shadow: inset 6px 0 4px -5px var(--bf-table-shadow);
}

/* Two-dimensional table, cell of first row and column gets left and top shadow */
.bf-table > thead + tbody > tr:first-child > th + td {
  box-shadow: inset 6px 6px 4px -5px var(--bf-table-shadow);
}

/* #endregion */
/* #region focus and hover states */
.bf-table > * > tr:focus,
.bf-table > * > tr > *:focus {
  outline: none;
}

.bf-table > * > tr:focus-visible,
.bf-table > * > tr > :focus-visible {
  outline: 1px dashed var(--bfc-base-c);
}

.bf-table-row-clickable:hover > * {
  background-color: var(--bfc-base-2);
}

.bf-table-cell-clickable,
.bf-table-row-clickable {
  cursor: pointer;
}

/* #endregion */
/* #region sort buttons */
.bf-table-header-cell-sort {
  margin-left: var(--bfs8);
}

.bf-table th:hover .bf-table-header-cell-sort,
.bf-table th:focus-visible .bf-table-header-cell-sort,
.bf-table-header-cell-sort:hover,
.bf-table-header-cell-sort:focus-visible {
  color: var(--bfc-base-c-1);
}

.bf-table-header-cell-sort-none {
  color: var(--bfc-base-c-wcag);
}

/* #endregion */
/* #region expandable */
.bf-table td.bf-table-expandable-cell {
  height: auto;
  padding: 0;
  border: 0;
}

.bf-table-expanded-content {
  border-top: 1px solid var(--bfc-base-dimmed);
}

.bf-table tr:last-child .bf-table-expandable-cell {
  border-bottom-left-radius: var(--bf-radius-xs);
}

.bf-table-expand-icon-cell {
  width: 1%;
  line-height: 150%;
  font-style: normal;
  font-weight: normal;
  font-size: var(--bf-font-size-m);
}

.bf-table .bf-table-expand-icon-cell.bf-table-expand-icon-cell {
  padding-right: 0;
}

.bf-table > thead > tr > th:empty {
  padding: 0;
}

.bf-table td:hover .bf-table-expand-icon-wrapper,
.bf-table-expand-nolimit:hover .bf-table-expand-icon-wrapper {
  background-color: var(--bfc-base-dimmed);
}

.bf-table-expand-icon-wrapper {
  width: 1.313rem; /* 21px */
  height: 1.313rem; /* 21px */
  border-radius: var(--bf-radius-full);
  text-align: center;
}

.bf-table-expand-icon {
  color: var(--bfc-base-c);
  transition: transform var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-table-expand-icon-open {
  transform: rotate(90deg);
}

.bf-table-cell-right-border {
  border-right: 1px solid var(--bfc-base-dimmed);
}

.bf-table > tbody > tr:last-child > td:first-child,
.bf-table-expand-closed:nth-last-child(2) > *:first-child {
  border-bottom-left-radius: var(--bf-radius-xs);
}

/* border-radius on content where exandable row is last child */
.bf-table > tbody > tr:last-child .bf-table-expanded-content {
  border-bottom-left-radius: var(--bf-radius-xs);
  border-bottom-right-radius: var(--bf-radius-xs);
}

/* delay border-radius when collapsing expandable row */
.bf-table .bf-table-expand-closed > td:first-child {
  transition: border-radius 0s 0.25s;
}

/* #endregion */
/* #region vertical table */
/* vertical tables have same border on whole table
 to prevent notches from border-radius */
.bf-table-vertical-header {
  border-left: 6px solid var(--bfc-base-c-2);
}

.bf-table-vertical-header.bf-table-noborder,
.bf-table-vertical-header > thead > tr > th:first-child {
  border-left: none;
}

.bf-table-vertical-header > * > tr > :nth-child(2) {
  padding-left: var(--bf-table-cell-padding);
}

.bf-table-vertical-header > tbody > tr > th {
  text-align: right;
  padding-right: var(--bf-table-cell-padding);
}

/* #endregion */
/* #region noBorder prop */
.bf-table-noborder > thead > tr > th:first-child,
.bf-table-noborder > tbody > tr > td:first-child,
.bf-table-noborder > tbody > tr > th:first-child {
  border-left: none;
}

/* #endregion */
/* #region hide left border for mobile screens */
@media (max-width: 599.9px) {
  .bf-table-vertical-header,
  .bf-table > thead > tr > th:first-child,
  .bf-table > tbody > tr > td:first-child,
  .bf-table > tbody > tr > th:first-child {
    border-left: none;
  }
}
/* #endregion */
/* #region Basic tabs */
.bf-tabs-container {
  border-bottom: 1px solid var(--bfc-base-c-dimmed);
}

:root {
  --bf-tabs-content-bg: var(--bfc-base);
}

.bf-tabs-container:where(:not(.bf-tabs-no-background)) {
  background-color: var(--bfc-base-3);
}

.bf-tabs {
  display: flex;
  align-items: stretch;
  margin: 0;
  gap: 16px;
  white-space: nowrap;
  padding-inline: var(--bf-page-padding);
}

.bf-tab,
.bf-tabs :where(a) {
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--bf-font-size-m);
  font-family: inherit;
  cursor: pointer;
  color: var(--bfc-base-c-2);
  background: transparent;
  padding: var(--rem8) 0;
  min-height: calc(3.3125rem - 1px); /* 53px - border */
  margin: 0; /* Safari adds weird margins... */
  text-decoration-line: none;
}

.bf-tabs a:focus,
.bf-tab:focus {
  outline: none;
}

.bf-tabs a:focus-visible,
.bf-tab:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: -2px;
}

.bf-tabs :where(a:not(.active):hover),
.bf-tab:where(:not(.bf-tab-active):hover) {
  color: var(--bfc-base-c-1);
  border-bottom: 2px solid var(--bfc-base-c-dimmed);
}

.bf-tabs :where(a:not(.active):active:hover),
.bf-tab:where(:not(.bf-tab-active):active:hover) {
  scale: 0.95;
  transform-origin: bottom;
  border-bottom: 2px solid var(--bfc-base-c);
}

.bf-tabs :where(a.active),
.bf-tab-active {
  border-color: var(--bfc-base-c);
  color: var(--bfc-base-c-1);
}

.bf-tabs-styled :where(a.active),
.bf-tabs-styled :where(.bf-tab-active) {
  border-color: var(--bfc-base-c);
  color: var(--bfc-base-c-1);
}

.bf-tab-content {
  height: auto;
  background-color: var(--bf-tabs-content-bg);
}

.bf-tab-content:empty {
  display: none;
}

:where(.bf-tabs) .bf-tab-disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.3;
}

/* #endregion */
/* #region Styled tabs */
.bf-tabs-styled {
  border-bottom: 1px solid var(--bfc-base-c-dimmed);
}

.bf-tabs-styled:where(:not(.bf-tabs-no-background)) {
  background-color: var(--bfc-base-2);
}

.bf-tabs-styled .bf-width-overflow-arrow {
  top: 9px;
}

:where(.bf-tabs-styled) .bf-tabs {
  padding-top: var(--rem8);
  margin-bottom: -1px;
  overflow: hidden;
  display: flex;
  gap: 0;
  align-items: flex-end;
}

.bf-tabs-styled :where(.bf-tabs a),
.bf-tabs-styled :where(.bf-tab) {
  min-height: 2.8125rem;
  padding: var(--rem8) 16px;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  border-top-left-radius: var(--bf-radius-s);
  border-top-right-radius: var(--bf-radius-s);
}

.bf-tabs-styled :where(.bf-tabs a:not(a.active):hover),
.bf-tabs-styled :where(.bf-tab:not(.bf-tab-active):hover) {
  border: 1px solid var(--bfc-base-c-dimmed);
}

.bf-tabs-styled :where(.bf-tabs a:not(a.active):active:hover),
.bf-tabs-styled :where(.bf-tab:not(.bf-tab-active):active:hover) {
  background-color: var(--bfc-base);
  border-bottom: 1px solid transparent;
  color: var(--bfc-base-c);
  transform: translateY(1px);
  scale: 0.95;
}

.bf-tabs-styled :where(.bf-tabs a.active),
.bf-tabs-styled :where(.bf-tab-active) {
  border-color: var(--bfc-base-c-dimmed);
  background-color: var(--bf-tabs-content-bg);
  color: var(--bfc-base-c-1);
  border-bottom: 1px solid transparent;
}

.bf-tabs-no-padding {
  padding: 0;
}

/* #endregion */
.bf-width-overflow {
  position: relative;
}

.bf-width-overflow-content {
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: none;
}

.bf-width-overflow-content::-webkit-scrollbar {
  display: none;
}

.bf-width-overflow-arrow {
  border: 0;
  background-color: transparent;
  color: var(--bfc-base-c);
  cursor: pointer;
  font-size: var(--bf-font-size-m);
  font-family: inherit;
  position: absolute;
  width: 48px;
  padding: 0 var(--bfs12);
  top: 0;
  bottom: 0;
}

.bf-width-overflow-arrow-hover-circle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--bf-radius-full);
  text-align: center;
  line-height: 1.5rem;
  display: inline-block;
}

.bf-width-overflow-arrow:hover .bf-width-overflow-arrow-hover-circle {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-width-overflow-arrow-left {
  left: 0;
}

.bf-width-overflow-arrow-right {
  right: 0;
}

/* Fade out edges to make arrow visible. Pro tip: change to background image, to actually see the gradient */
.bf-width-overflow-left .bf-width-overflow-content {
  mask-image: linear-gradient(90deg, transparent 30px, black 55px);
}

.bf-width-overflow-right .bf-width-overflow-content {
  mask-image: linear-gradient(270deg, transparent 30px, black 55px);
}

.bf-width-overflow-right.bf-width-overflow-left .bf-width-overflow-content {
  mask-image: linear-gradient(90deg, transparent 30px, black 55px, black 51%, transparent 51%), linear-gradient(270deg, transparent 30px, black 55px, black 51%, transparent 51%);
}

.bf-tag {
  --bf-button-border-radius: var(--bf-radius);
  padding-block: 2px;
  padding-inline: 12px;
  font-size: var(--bf-font-size-s);
}

.bf-tag-compact {
  --bf-button-border-radius: var(--bf-radius-xs);
  padding-inline: 8px;
}

.bf-tooltip {
  background-color: var(--bfc-base-c);
  color: var(--bfc-base-3);
  box-shadow: var(--bf-shadow);
  font-size: var(--bf-font-size-m);
  border-radius: var(--bf-radius-s);
  /* explicitly set properties to avoid inheriting from parent */
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-align: left;
  text-transform: none;
  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
  word-break: break-word;
  white-space: normal;
  /* double rule in case browser doesn't understand `env()` */
  max-width: min(500px, 100dvw - 20px);
  max-width: min(500px, 100dvw - 20px - env(safe-area-inset-right) - env(safe-area-inset-left));
}

:where(.bf-tooltip[popover]) {
  inset: unset;
  margin: unset;
  border: unset;
  overflow: unset;
  padding: unset;
}

.bf-tooltip > .bf-tooltip-content {
  padding: var(--bfs8) var(--bfs16);
  display: block;
}

.bf-tooltip-compact {
  border-radius: var(--bf-radius-xs);
  font-weight: 600;
  font-size: var(--bf-font-size-s);
}

.bf-tooltip-compact > .bf-tooltip-content {
  padding: var(--bfs4) var(--bfs8);
}

.bf-tooltip-neutral {
  background-color: var(--bfc-base-c-dimmed);
  color: var(--bfc-base-c-1);
}

.bf-tooltip-arrow {
  fill: var(--bfc-base-c);
}

:where(.bf-tooltip-neutral) .bf-tooltip-arrow {
  fill: var(--bfc-base-c-dimmed);
}

.bf-expand {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--bf-animation-duration) var(--bf-timing-function);
  /* prevent grid blowout */
  grid-template-columns: minmax(0, 1fr);
}

.bf-expand.bf-expand-closed {
  grid-template-rows: 0fr;
}

/* hide overflow while transitioning (apply bf-expand-expanded only when completely expanded) */
.bf-expand:not(.bf-expand-expanded) {
  overflow: hidden;
}

.bf-expand > * {
  min-height: 0;
  transition: visibility var(--bf-animation-duration);
}

.bf-expand.bf-expand-closed > * {
  /* hide content for screen readers and prevent keyboard focus */
  visibility: hidden;
}

.bf-expand-icon-wrapper {
  color: var(--bfc-base-c);
  border-radius: var(--bf-radius-full);
  display: inline-block;
  width: var(--rem24);
  height: var(--rem24);
  line-height: var(--rem24);
  text-align: center;
}

.bf-expand-icon {
  transition: transform var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-expand-icon-open {
  transform: rotate(90deg);
}

.bf-bottom-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: var(--bf-nav-side-width);
  background-color: var(--bfc-base-3);
  box-shadow: var(--bf-shadow-top);
  transition: left var(--bf-nav-side-transition);
  padding: var(--bfs8) var(--bf-page-padding);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--bfs8));
  z-index: 2;
}

.bf-bottom-bar-nopadding {
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.bf-breadcrumbs {
  margin: 0;
  padding: 0;
  font-size: var(--bf-font-size-m);
}

.bf-breadcrumbs > * {
  color: var(--bfc-base-c-2);
  list-style: none;
  display: inline-block;
}

.bf-breadcrumbs :where(a, button, .bf-link) {
  color: var(--bfc-base-c);
  text-decoration-line: none;
}

.bf-breadcrumb-separator {
  color: var(--bfc-base-c-2);
  margin: 0 var(--bfs8);
}

.bf-breadcrumbs a:hover,
.bf-breadcrumbs .bf-link:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  background-color: transparent;
  box-shadow: none;
}

.bf-breadcrumbs a:focus-visible,
.bf-breadcrumbs .bf-link:focus-visible {
  border-radius: var(--bf-radius-xs);
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.bf-breadcrumb-separator:first-of-type {
  display: none;
}

/* BackButton */
.bf-breadcrumbs button.bf-link {
  background: transparent;
  border: none;
  font: inherit;
  display: inline;
}

/* desired behavior:
 * fullscreen on mobile without overlay
 * overlay on landscape tablet
 * landscape to portrait change should keep nav hidden
 * avoid animating on page load
 */
:root {
  /* elements outside nav + main should be positioned outside */
  --bf-nav-top-height: 0rem;
  --bf-nav-side-width: 0rem;
  --bf-nav-side-transition: var(--bf-animation-duration)
    var(--bf-timing-function);
  --bf-nav-mobile-width: 100%;
  --bf-nav-item-height: var(--bfs40);
}

.bf-nav {
  font-size: var(--bf-font-size-m);
}

/* top nav with .to-xl is the mobile-only nav */
:root:where(:has(.bf-nav-top:not(.to-xl))),
.bf-nav-top {
  --bf-nav-top-height: var(--bfs56);
}

.bf-nav-side,
.bf-nav-side ~ * {
  --bf-nav-side-width: 230px;
}

.bf-nav-side-collapsed,
.bf-nav-side-collapsed ~ * {
  --bf-nav-side-width: 56px;
}

/* when nav-side is hidden with .from-medium, .from-large, or .from-xl,
make sure nav-top and content goes all the way to the left */
@media (max-width: 959.9px) {
  .bf-nav-side.from-medium,
  .bf-nav-side.from-medium ~ *,
  .bf-nav-side-collapsed.from-medium,
  .bf-nav-side-collapsed.from-medium ~ * {
    --bf-nav-side-width: 0rem;
  }
}
@media (max-width: 1279.9px) {
  .bf-nav-side.from-large,
  .bf-nav-side.from-large ~ *,
  .bf-nav-side-collapsed.from-large,
  .bf-nav-side-collapsed.from-large ~ * {
    --bf-nav-side-width: 0rem;
  }
}
@media (max-width: 1599.9px) {
  .bf-nav-side.from-xl,
  .bf-nav-side.from-xl ~ *,
  .bf-nav-side-collapsed.from-xl,
  .bf-nav-side-collapsed.from-xl ~ * {
    --bf-nav-side-width: 0rem;
  }
  html.bf-nav-mobile-is-open {
    overflow: hidden;
  }
  html.bf-nav-mobile-is-open body {
    overflow: unset;
  }
  html.bf-nav-mobile-is-open .bf-nav-top {
    position: fixed;
  }
  html.bf-nav-mobile-is-open :where(main, .bf-nav-main) {
    padding-top: var(--bf-nav-top-height);
  }
}
/* separator between items */
.bf-nav > hr,
.bf-nav-side-content > hr,
.bf-nav-mobile-content > hr {
  padding: 0;
  margin: 0;
  border: var(--bf-border);
  border-bottom: none;
}

/* mobile fullscreen popup */
.bf-nav-mobile {
  position: fixed;
  inset: var(--bf-nav-top-height) 0 0 0;
  overflow: auto;
  z-index: 99999;
  background-color: var(--bfc-base-3);
  font-size: var(--bf-font-size-m);
  min-width: calc(var(--bf-nav-side-width) + env(safe-area-inset-left));
  transform: translate(calc(0px - var(--bf-nav-mobile-width)));
  animation-duration: var(--bf-animation-duration);
  animation-timing-function: var(--bf-timing-function);
  /* 8px between items + 4px extra in container for 12px total */
  padding-top: var(--bfs4);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

.bf-nav-mobile.bf-nav-mobile-open {
  transform: translate(0);
  animation-name: navMobileSlideIn;
}

.bf-nav-mobile.bf-nav-mobile-close {
  animation-name: navMobileSlideOut;
}

.bf-nav-mobile.bf-nav-mobile-gone {
  display: none;
}

@keyframes navMobileSlideIn {
  from {
    transform: translate(calc(0px - var(--bf-nav-mobile-width)));
  }
  to {
    transform: translate(0);
  }
}
@keyframes navMobileSlideOut {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(calc(0px - var(--bf-nav-mobile-width)));
  }
}
@media (max-width: 599.9px) {
  .bf-nav-mobile-overlay {
    display: none;
  }
}
@media (min-width: 600px) {
  .bf-nav-mobile {
    --bf-nav-mobile-width: calc(17.5rem + env(safe-area-inset-left));
    padding-right: 0;
    width: var(--bf-nav-mobile-width);
  }
}
/* Overlay */
.bf-nav-mobile-overlay {
  position: fixed;
  inset: var(--bf-nav-top-height) 0 0 0;
  z-index: -99;
  background-color: var(--bfc-overlay);
  transition: all var(--bf-animation-duration) var(--bf-timing-function);
  opacity: 0;
}

.bf-nav-mobile-open ~ .bf-nav-mobile-overlay {
  z-index: 9998;
  opacity: 1;
}

.bf-nav-top {
  display: flex;
  background: var(--bfc-base-3);
  height: var(--bf-nav-top-height);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  flex-flow: row nowrap;
  justify-content: flex-start;
  border-bottom: var(--bf-border);
}

/* todo: remove in 7.0 */
.bf-nav-top .bf-intility-logo {
  border-bottom: var(--bf-border);
}

.bf-nav-top-logo {
  flex-grow: 2;
}

:where(.bf-nav-top-logo) > a {
  display: inline-block;
  outline-offset: -2px;
}

@media (min-width: 600px) {
  /* todo: remove in 7.0 */
  .bf-nav-top .bf-intility-logo {
    border-right: 1px solid var(--bfc-base-c-dimmed);
  }
}
.bf-nav-top-content {
  display: flex;
  justify-content: flex-end;
}

.bf-nav-top .bf-nav-profile {
  border-radius: var(--bf-radius-full);
  width: 28px;
  height: 28px;
  border: 1px solid var(--bfc-base-c-dimmed);
  vertical-align: middle;
}

.bf-nav-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--bf-nav-side-width);
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border-right: var(--bf-border);
  transition: width var(--bf-nav-side-transition);
  display: flex;
  flex-direction: column;
}

.bf-nav-side:has(~ .bf-nav-top:not(.to-xl)),
.bf-nav-top:not(.to-xl) ~ .bf-nav-side {
  top: var(--bfs56);
}

.bf-nav-side .bf-nav-side-collapse-button {
  transition: width var(--bf-nav-side-transition);
  cursor: pointer;
  display: block;
  width: 100%;
  border-top: var(--bf-border);
}

.bf-nav-side-collapse-button .bf-nav-side-item-icon {
  color: var(--bfc-base-c-theme);
}

.bf-nav-side-collapsed .bf-nav-side-collapse-button .bf-nav-item-icon {
  rotate: 180deg;
}

/* make space to the left of main content for the fixed Sidebar */
.bf-nav-side ~ :where(main, .bf-main, .bf-nav-main) {
  margin-left: var(--bf-nav-side-width);
  transition: margin var(--bf-nav-side-transition);
}

/* content inside main should not overlap top/side bar */
:is(.bf-nav-side, .bf-nav-top) ~ :where(main, .bf-main, .bf-nav-main) {
  position: relative;
  z-index: 1;
}

/* make space above main content for the fixed Top bar.
it's always present in DOM when using <Nav> for small screens (<1600px) */
@media (max-width: 1599.9px) {
  .bf-nav-top ~ :where(main, .bf-nav-main) {
    padding-top: var(--bfs56);
  }
}
@media (min-width: 1600px) {
  .bf-nav-top:not(.to-xl) ~ :where(main, .bf-nav-main) {
    padding-top: var(--bfs56);
  }
}
/* reset default link styling when used as navigation wrappers */
a:has(> .bf-nav-item) {
  text-decoration-line: none;
  /* contain margins */
  display: flow-root;
  color: inherit;
  outline: none;
}

/* reset default button styling when used as navigation wrappers */
button:has(> .bf-nav-item) {
  color: inherit;
  outline: none;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
  appearance: none;
  margin: 0;
}

:where(.bf-nav-mobile, .bf-nav-side, .bf-nav-group) button:has(> .bf-nav-item) {
  width: 100%;
  display: block;
}

/* #region <Nav.Header> */
.bf-nav-header {
  margin: var(--bfs8) var(--bfs16);
  color: var(--bfc-base-c-2);
  font-size: var(--bf-font-size-m);
}

.bf-nav-header:first-child {
  margin-top: var(--bfs4);
}

/* #endregion </Nav.Header> */
@media (max-width: 1599.9px) {
  .bf-nav-top.bf-nav-top {
    transition-duration: var(--bf-animation-duration);
    transition-timing-function: var(--bf-timing-function);
    transition-property: margin, transform;
    transform: translateY(0);
  }
  /* bf-nav-top-hide-for-mobile is applied when user scrolls down (and the mobile menu is not open).
     hide the top bar if this class is applied and the current focus is not inside the top nav */
  .bf-nav-top.bf-nav-top-hide-for-mobile:not(:focus-within) {
    transform: translateY(-110%);
  }
  /* 1600+ always has top nav (with mobile nav toggle hamburger button) */
  :root:where(:has(.bf-nav-top.to-xl)) {
    --bf-nav-top-height: var(--bfs56);
  }
  /* when top nav is hidden, pretend its height is 0px to let other components and css position itself correctly */
  :root:where(:has(.bf-nav-top.bf-nav-top-hide-for-mobile:not(:focus-within))) {
    --bf-nav-top-height: 0px;
  }
  /* clicking on a toc inside a sticky element might cause browser to scroll
  upwards, revealing the nav top bar (meaning we won't know if the top nav is
  visible or not). since the worst case is to obscure it behind the nav, we
  simply assume it's always visible */
  html:where(:has(.bf-nav-top)) {
    scroll-padding-top: var(--bfs56);
  }
}
.bf-hide-until-focus {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  transition: transform var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-hide-until-focus:where(:focus, :focus-within) {
  transform: translate(-50%, 10px);
}

@media print {
  .bf-hide-until-focus {
    display: none;
  }
}
/* #region <Branding>
todo: remove in 7.0 */
.bf-nav-side-content-wrapper,
.bf-nav-mobile {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1;
}

.bf-nav-branding {
  border-top: var(--bf-border);
  text-align: center;
  color: var(--bfc-base-c-2);
  min-height: var(--bfs56);
  display: flex;
  place-content: center;
  place-items: center;
  gap: var(--bfs4);
  margin-top: auto;
  overflow: hidden;
}

.bf-nav-branding :where(.bf-intility-logo, .bf-it-logo) {
  margin-top: 3px;
}

/* hide "it" logo in mobile nav and in sidebar when not collapsed */
.bf-nav-side:not(.bf-nav-side-collapsed) .bf-nav-branding > .bf-it-logo,
.bf-nav-mobile .bf-nav-branding > .bf-it-logo {
  display: none;
}

/* hide "an intility service" in sidebar when collapsed (only show "it") */
.bf-nav-side.bf-nav-side-collapsed .bf-nav-branding > :where(.bf-intility-logo) {
  display: none;
}

/* #endregion </Branding> */
.bf-nav-expand-icon {
  position: absolute;
  right: 16px;
  top: 14px;
}

/* prevent expand icon from overlapping nav.group name text */
.bf-nav-group-button .bf-nav-item:has(.bf-nav-expand-icon) {
  padding-right: 29px;
}

:is(.bf-nav-group-content, .bf-nav-group-dropout) .bf-nav-item,
:is(.bf-nav-group-content, .bf-nav-group-dropout) :is(a, button) > .bf-nav-item {
  font-size: var(--bf-font-size-m);
  min-height: 40px;
  margin: 0;
  padding-inline: 16px;
}

.bf-nav-group-content > hr {
  padding: 0;
  border: var(--bf-border);
  border-bottom: none;
  margin: var(--bfs12) 0;
}

/* Nav.Group dropout */
.bf-nav-group-dropout {
  min-width: 230px;
  color: var(--bfc-base-c);
}

.bf-nav-group-dropout-title {
  background-color: var(--bfc-base-2);
  color: var(--bfc-base-c-2);
  padding-inline: 24px;
  min-height: 40px;
  border-top-left-radius: var(--bf-radius);
  border-top-right-radius: var(--bf-radius);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bf-nav-group-dropout hr,
.bf-nav-group-content hr {
  padding: 0;
  margin: 8px -8px;
  border: var(--bf-border);
  border-bottom: none;
}

.bf-nav-top .bf-nav-item-arrow,
.bf-nav-group-dropout .bf-nav-item-arrow {
  margin-left: 8px;
}

.bf-nav-group-dropout-content,
.bf-nav-group-content {
  padding: 8px;
}

:where(.bf-nav-mobile, .bf-nav-side) .bf-nav-group-content {
  padding-top: 0;
  box-shadow: 0 -8px 8px -8px var(--bfc-shadow) inset;
}

.bf-nav-side .bf-nav-group-dropout {
  /* adjust collapsed sidebar nav.group dropout position to acommodate for the
  fact that the dropout title has 16px smaller height than its nav.group button, */
  margin-top: 8px;
  /* make space for top bar + a few px top and bot */
  max-height: calc(100dvh - 56px);
}

.bf-nav-top .bf-nav-group-dropout-content > section {
  margin: var(--bfs12) 0;
}

/* style nav.group button as active if any of the grouped links or buttons are .active.
using :where() to match (0, 2, 1) specificity of active and focus styling of Nav.Item.css */
.bf-nav-group:has(a.active, button.active) :where(.bf-nav-group-button .bf-nav-item) {
  --bf-nav-item-icon-color: var(--bfc-base-c-theme);
  --bf-nav-item-bg: var(--bfc-base);
  font-weight: 600;
}

/* collapsed sidebar nav.group dropout indicator a.k.a. "Arne" */
.bf-nav-side-collapsed .bf-nav-group-button .bf-nav-item::after {
  content: "";
  position: absolute;
  top: 2.0625rem; /* 33px */
  left: 31px;
  border: 3px solid transparent;
  border-right-color: var(--bfc-base-c);
  border-bottom-color: var(--bfc-base-c);
  filter: drop-shadow(-1px -1px 0 var(--bf-nav-item-bg));
}

/* nav.group button in top bar */
.bf-nav-top-content > .bf-nav-group > button {
  height: 56px;
}

/* Nav.Item */
.bf-nav-item {
  --bf-nav-item-icon-color: var(--bfc-base-c-2);
  --bf-nav-item-bg: var(--bfc-base-3);
  background-color: var(--bf-nav-item-bg);
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration-line: none;
  z-index: 1;
  border-radius: var(--bf-radius-s);
  margin: 8px;
  /* TODO: Remove in 7.0 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bf-nav-item-icon {
  color: var(--bf-nav-item-icon-color);
  flex: 0 0 40px;
  margin-right: 8px;
}
:where(.bf-nav-top, .bf-nav-group-content, .bf-nav-group-dropout) .bf-nav-item-icon {
  flex-basis: auto;
}
:where(.bf-nav-item-icon-only) .bf-nav-item-icon {
  margin-right: 0;
}

.bf-nav-item-arrow {
  flex: 0 0 auto;
  margin-right: 8px;
}
:where(.bf-nav-top, .bf-nav-group-content, .bf-nav-group-dropout) .bf-nav-item-arrow {
  margin-right: 0;
}

.bf-nav-item-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:where(.bf-nav-group-content,
.bf-nav-group-dropout,
.bf-nav-side,
.bf-nav-mobile,
.bf-nav-search-item) .bf-nav-item-text {
  flex: 1 1;
}

.bf-nav-item-text:empty {
  display: none;
}

a:has(> .bf-nav-item),
button:has(> .bf-nav-item) {
  position: relative;
}

.bf-nav-item :where(svg, img) {
  vertical-align: middle;
}

/* sidebar and mobile Nav.Item */
.bf-nav-mobile .bf-nav-item,
.bf-nav-side .bf-nav-item {
  height: var(--bf-nav-item-height);
  /* TODO: Remove in 7.0 */
  overflow: hidden;
}

/* top bar Nav.Item */
.bf-nav-top .bf-nav-item {
  padding-inline: 8px;
}

.bf-nav .bf-nav-mobile-toggle {
  border-right: var(--bf-border);
}

.bf-nav-top-content > * > .bf-nav-item,
.bf-nav-top-content > .bf-nav-group > button > .bf-nav-item,
.bf-nav-mobile-toggle .bf-nav-item {
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
}

/* top bar nav.item icon color should be same as text
(including nav.group button, excluding items nested inside nav.grouo)
match (0, 1, 0) specificity of .bf-nav-item (when not focused or .active) */
:where(.bf-nav-top .bf-nav-group-button:not(.active)) .bf-nav-item,
:where(:is(.bf-nav-top, .bf-nav-top-content) > :is(a, button)) > .bf-nav-item,
:where(.bf-nav-top-content) > .bf-nav-item {
  --bf-nav-item-icon-color: inherit;
}

.bf-nav-top-content > :has(> .bf-nav-item),
.bf-nav-top-content > :where(.bf-nav-item, .bf-nav-group) {
  border-left: var(--bf-border);
}

.bf-nav-top-content > .bf-nav-item {
  height: var(--bf-nav-top-height);
  border-radius: 0;
  padding: var(--bfs8) var(--bfs16);
  margin: 0;
  min-width: 56px;
  line-height: 39px;
  background-color: transparent;
}

.bf-nav-group-dropout-content :where(a, button):has(> .bf-nav-item) {
  border-left: none;
}

/* .active = "current page" */
:is(a, button).active > .bf-nav-item {
  --bf-nav-item-bg: var(--bfc-base);
  --bf-nav-item-icon-color: var(--bfc-base-c-theme);
  font-weight: 600;
}

/* link and button states */
:is(a, button):hover > .bf-nav-item {
  --bf-nav-item-bg: var(--bfc-base-2);
  --bf-nav-item-icon-color: var(--bfc-base-c-theme);
}

.bf-nav :is(a, button):focus-visible > .bf-nav-item {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: -1px;
}

/* #region external link in collapsed sidebar */
.bf-nav-side-collapsed .bf-nav-item:has(.bf-nav-item-arrow)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 31px;
  border: 3px solid transparent;
  border-right-color: var(--bfc-base-c);
  border-top-color: var(--bfc-base-c);
  filter: drop-shadow(-1px 1px 0 var(--bf-nav-item-bg));
  translate: 0;
  transition-property: translate;
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
}

.bf-nav-side-collapsed .bf-nav-group .bf-nav-item:has(.bf-nav-item-arrow)::after {
  content: none;
}

.bf-nav-side-collapsed a:hover .bf-nav-item:has(.bf-nav-item-arrow)::after {
  translate: 2px -2px;
}

/* #endregion */
.bf-nav-logo {
  display: grid;
  grid-template-columns: var(--bf-nav-logo-container-width) auto;
  align-items: center;
}

.bf-nav-logo-graphic {
  display: inline-flex;
  height: var(--bf-nav-logo-graphic-size);
  width: var(--bf-nav-logo-graphic-size);
  place-self: center;
  place-content: center;
  place-items: center;
}

.bf-nav-logo-graphic > :where(svg, img) {
  max-height: 100%;
  max-width: 100%;
}

.bf-nav-logo-name {
  font-weight: 740;
  line-height: 1.15;
  padding-block: 10px;
}

/* #region logo in top bar */
.bf-nav-top .bf-nav-logo {
  height: var(--bf-nav-top-height);
  display: inline-grid;
}

.bf-nav-top .bf-nav-logo-name {
  padding-right: var(--bfs16);
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-deprecated */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 599.9px) {
  .bf-nav-logo {
    --bf-nav-logo-container-width: 40px;
    --bf-nav-logo-graphic-size: 24px;
  }
  .bf-nav-logo-name {
    font-size: var(--bf-font-size-m);
  }
}
@media (min-width: 600px) {
  .bf-nav-logo {
    --bf-nav-logo-container-width: 56px;
    --bf-nav-logo-graphic-size: 32px;
  }
  .bf-nav-logo-name {
    font-size: var(--bf-font-size-l);
  }
}
/* #endregion logo in top bar */
/* #region logo in sidebar */
.bf-nav-side-logo {
  width: var(--bf-nav-side-width);
  transition: width var(--bf-animation-duration) var(--bf-timing-function);
  overflow: hidden;
}

.bf-nav-side .bf-nav-logo {
  min-height: var(--bfs56);
  width: 14.375rem; /* keep width static to avoid text wrap while transitioning to collapsed sidebar */
  border-bottom: var(--bf-border);
}

/* #endregion logo in sidebar */
.bf-nav-side-content .bf-nav-search-item,
.bf-nav-mobile .bf-nav-search-item {
  padding: 0;
  border-radius: 0;
  line-height: normal;
}

.bf-nav-search-group .bf-nav-group-dropout-content {
  padding: var(--bfs8);
}

/* #region top bar */
.bf-nav-top .bf-nav-search-input {
  height: 56px;
  display: grid;
  place-content: center;
}

.bf-nav-top .bf-nav-search-input :is(.bf-input, .bf-input-icon) {
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
}

.bf-nav-top .bf-nav-search-input .bf-input {
  transition-property: width, margin, border-color;
}

.bf-nav-top .bf-nav-search-input .bf-input-icon {
  transition-property: right;
  /* before search input is expanded (focused)
  we don't want the button to perform a search when clicked,
  instead let the click fall through to the input behind */
  pointer-events: none;
}

/* remove default nav.item padding to allow
invisible input to be full width (and clickable) */
.bf-nav-top .bf-nav-search-item {
  padding: 0;
}

.bf-nav-top .bf-nav-search-item .bf-input-icon {
  color: var(--bfc-base-c);
}

.bf-nav-top .bf-nav-search-item .bf-input-icon-left .bf-input-icon {
  left: var(--bfs8);
}

.bf-nav-top .bf-nav-search-item .bf-input-icon-right .bf-input-icon {
  right: var(--bfs8);
}

.bf-nav-top .bf-nav-search-item .bf-input:hover ~ .bf-input-icon {
  color: var(--bfc-theme);
}

/* hide search input in top bar when it is not focused,
or has no content (:valid) */
.bf-nav-top .bf-nav-search-input .bf-input:not(:focus, :valid) {
  border-color: transparent;
  width: 0;
}

/* when the input is expanded (focused),
allow clicks on icon be picked up by js,
and hand pointer to be displayed */
.bf-nav-top .bf-nav-search-input .bf-input:is(:focus, :valid) ~ .bf-input-icon,
.bf-nav-top .bf-nav-search-input .bf-input-icon:hover {
  pointer-events: all;
}

.bf-nav-top .bf-nav-search-input .bf-input:is(:focus, :valid) {
  width: 200px;
  margin: 0 var(--bfs8);
}

.bf-nav-top .bf-nav-search-input.bf-input-icon-right .bf-input:is(:focus, :valid) ~ .bf-input-icon {
  color: var(--bfc-theme);
}

.bf-nav-top .bf-nav-search-input.bf-input-icon-left .bf-input:is(:focus, :valid) ~ .bf-input-icon {
  color: var(--bfc-base-c-2);
}

/* #endregion */
.bf-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bf-menu-horizontal {
  flex-flow: row wrap;
  justify-content: space-between;
}

.bf-menu-horizontal > * {
  flex-grow: 1;
}

.bf-menu-item {
  padding: 9.5px 16px;
  border-radius: var(--bf-radius-s);
}

:is(a, button):is(:hover, .active) > .bf-menu-item,
.bf-menu-item:has(.bf-step-active) {
  background-color: var(--bfc-base);
}

/* support 2 cases
  * 1. <button|a><div.bf-menu-item>...</div></button|a>
  * 2. <div.bf-menu-item role="button" tabindex="0">...</div>
  */
:is(a, button):has(> .bf-menu-item):focus-visible,
.bf-menu-item:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  z-index: 1;
  border-radius: var(--bf-radius-xs);
}

a:has(> .bf-menu-item) {
  text-decoration-line: none;
  display: block;
  color: inherit;
  outline: none;
}

/* reset default button styling when used as navigation wrappers */
button:has(> .bf-menu-item) {
  display: block;
  color: inherit;
  outline: none;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
  appearance: none;
  margin: 0;
}

.bf-stepbar {
  display: flex;
  overflow: hidden;
  background-color: var(--bfc-base-2);
  border-radius: var(--bf-radius-xs);
  font-size: var(--bf-font-size-s);
}

.bf-stepbar > .bf-stepbar-item,
.bf-stepbar > a {
  position: relative;
  background-color: var(--bfc-base-3);
  height: 32px;
  margin-right: var(--bfs16);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  color: var(--bfc-base-c-2);
  flex-grow: 1;
}

.bf-stepbar > a .bf-stepbar-item {
  border: 1px dashed transparent;
  border-radius: var(--bf-radius-xs);
  padding: var(--bfs2) var(--bfs4);
}

.bf-stepbar > .bf-stepbar-item {
  padding: 0 10px;
}

.bf-stepbar > a:link,
.bf-stepbar > a:visited {
  color: var(--bfc-base-c-base);
  text-decoration-line: none;
  border-radius: 0;
}

.bf-stepbar > ::before,
.bf-stepbar > ::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}

.bf-stepbar > ::before {
  bottom: 0;
  right: 100%;
  border-top: 16px solid var(--bfc-base-3);
  border-bottom: 16px solid var(--bfc-base-3);
  border-left: 8px solid transparent;
}

.bf-stepbar > ::after {
  left: 100%;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 8px solid var(--bfc-base-3);
}

.bf-stepbar > :first-child {
  border-top-left-radius: var(--bf-radius-xs);
  border-bottom-left-radius: var(--bf-radius-xs);
}

.bf-stepbar > :last-child {
  border-top-right-radius: var(--bf-radius-xs);
  border-bottom-right-radius: var(--bf-radius-xs);
  margin-right: 0;
}

.bf-stepbar > :last-child::after {
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.bf-stepbar > a:hover {
  color: var(--bfc-base-c-theme);
}

/* active step */
.bf-stepbar .bf-stepbar-item-active,
.bf-stepbar a.active {
  background-color: var(--bfc-theme-1);
  color: var(--bfc-theme-hc);
  font-weight: 600;
}

.bf-stepbar a.active:hover {
  background-color: var(--bfc-theme-2);
}

.bf-stepbar a.active:hover::before {
  border-top-color: var(--bfc-theme-2);
  border-bottom-color: var(--bfc-theme-2);
}

.bf-stepbar a.active:hover::after {
  border-left-color: var(--bfc-theme-2);
}

.bf-stepbar .bf-stepbar-item-active::after,
.bf-stepbar a.active::after {
  border-left-color: var(--bfc-theme-1);
}

.bf-stepbar .bf-stepbar-item-active::before,
.bf-stepbar a.active::before {
  border-top-color: var(--bfc-theme-1);
  border-bottom-color: var(--bfc-theme-1);
}

/* keyboard focus */
.bf-stepbar > a:focus-visible .bf-stepbar-item {
  border-color: var(--bfc-base-c-theme);
}

.bf-stepbar > a:focus-visible {
  outline: none;
}

/* Focus state on selected step */
.bf-stepbar > a.active:focus-visible .bf-stepbar-item {
  border-color: var(--bfc-theme-c-1);
}

/*** circle variant ***/
.bf-stepbar-circle {
  display: grid;
  grid-auto-flow: column;
}

.bf-stepbar-circle > a,
.bf-stepbar-circle > .bf-stepbar-item {
  color: var(--bfc-base-c-2);
  text-decoration-line: none;
  text-align: center;
  font-size: var(--bf-font-size-m);
  position: relative;
  padding-bottom: 2.5rem;
}

.bf-stepbar-circle > a:hover {
  color: var(--bfc-base-c);
}

/* stepbar line */
.bf-stepbar-circle > a::after,
.bf-stepbar-circle > .bf-stepbar-item::after,
.bf-stepbar-circle > a.active:last-child::after,
.bf-stepbar-circle > .bf-stepbar-item-active:last-child::after {
  position: absolute;
  height: 4px;
  content: "";
  background: var(--bfc-base-c-theme);
  bottom: 0.7rem;
  left: 0;
  right: 0;
}

.bf-stepbar-circle > a:first-child::after,
.bf-stepbar-circle > .bf-stepbar-item:first-child::after {
  border-top-left-radius: var(--bf-radius-full);
  border-bottom-left-radius: var(--bf-radius-full);
}

.bf-stepbar-circle > a:last-child::after,
.bf-stepbar-circle > .bf-stepbar-item:last-child::after {
  border-top-right-radius: var(--bf-radius-full);
  border-bottom-right-radius: var(--bf-radius-full);
}

/* active circle step */
.bf-stepbar-circle > a.active,
.bf-stepbar-circle > .bf-stepbar-item-active {
  color: var(--bfc-base-c);
}

.bf-stepbar-circle > a.active::after,
.bf-stepbar-circle > .bf-stepbar-item-active::after {
  background: linear-gradient(90deg, var(--bfc-base-c-theme) 50%, var(--bfc-base-c-wcag) 50%);
}

.bf-stepbar-circle > a.active ~ *::after,
.bf-stepbar-circle > .bf-stepbar-item-active ~ *::after {
  background: var(--bfc-base-c-wcag);
}

/* hide circle icon for non-circle stepbar items */
.bf-stepbar-circle-icon {
  display: none;
}

.bf-stepbar-circle .bf-stepbar-circle-icon {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  border-radius: var(--bf-radius-full);
  border: 3px solid transparent;
  height: 1.625rem; /* 26px */
  width: 1.625rem; /* 26px */
  background: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bf-stepbar-circle a:hover .bf-stepbar-circle-icon {
  background: var(--bfc-theme-2);
}

.bf-stepbar-circle > a.active .bf-stepbar-circle-icon,
.bf-stepbar-circle > .bf-stepbar-item-active .bf-stepbar-circle-icon {
  border-color: var(--bfc-base-c-theme);
  background: var(--bfc-base);
  color: transparent;
}

.bf-stepbar-circle > a.active .bf-stepbar-circle-icon::after,
.bf-stepbar-circle > .bf-stepbar-item-active .bf-stepbar-circle-icon::after {
  content: "";
  position: absolute;
  background-color: var(--bfc-base-c-theme);
  inset: 4px;
  border-radius: var(--bf-radius-full);
}

.bf-stepbar-circle > a.active:hover .bf-stepbar-circle-icon {
  border-color: var(--bfc-theme-2);
}

.bf-stepbar-circle > a.active:hover .bf-stepbar-circle-icon::after {
  background-color: var(--bfc-theme-2);
}

.bf-stepbar-circle > a.active ~ * .bf-stepbar-circle-icon,
.bf-stepbar-circle > .bf-stepbar-item-active ~ * .bf-stepbar-circle-icon {
  border-color: var(--bfc-base-c-wcag);
  background: var(--bfc-base);
  color: transparent;
}

.bf-stepbar-circle > a.active ~ a:hover .bf-stepbar-circle-icon {
  border-color: var(--bfc-base-c-theme);
}

/* collapsed version for mobile, displays numbers only for inactive steps */
@media (min-width: 600px) {
  .bf-stepbar-responsive .bf-stepbar-counter {
    display: none;
  }
}
@media (max-width: 599.9px) {
  .bf-stepbar-responsive .bf-stepbar-content {
    display: none;
  }
  .bf-stepbar-responsive > a.active .bf-stepbar-content,
  .bf-stepbar-responsive > .bf-stepbar-item-active .bf-stepbar-content {
    display: inline;
  }
  .bf-stepbar-responsive > a.active .bf-stepbar-counter,
  .bf-stepbar-responsive > .bf-stepbar-item-active .bf-stepbar-counter {
    display: none;
  }
  .bf-stepbar-responsive {
    counter-reset: bf-stepbar;
  }
  .bf-stepbar-responsive .bf-stepbar-item {
    counter-increment: bf-stepbar;
  }
  .bf-stepbar-responsive .bf-stepbar-counter::after {
    content: counter(bf-stepbar);
  }
}
.bf-grid {
  --bfl-columns: var(--bf-grid-cols, 1);
}

@media (min-width: 600px) {
  .bf-grid {
    --bfl-columns: var(--bf-grid-s-cols);
  }
}
@media (min-width: 960px) {
  .bf-grid {
    --bfl-columns: var(--bf-grid-m-cols);
  }
}
@media (min-width: 1280px) {
  .bf-grid {
    --bfl-columns: var(--bf-grid-l-cols);
  }
}
@media (min-width: 1600px) {
  .bf-grid {
    --bfl-columns: var(--bf-grid-xl-cols);
  }
}
@media (min-width: 1920px) {
  .bf-grid {
    --bfl-columns: var(--bf-grid-xxl-cols);
  }
}
.bf-grid-span {
  grid-column: span var(--bf-grid-span, 1);
}

@media (min-width: 600px) {
  .bf-grid-span {
    grid-column: span var(--bf-grid-span-s);
  }
}
@media (min-width: 960px) {
  .bf-grid-span {
    grid-column: span var(--bf-grid-span-m);
  }
}
@media (min-width: 1280px) {
  .bf-grid-span {
    grid-column: span var(--bf-grid-span-l);
  }
}
@media (min-width: 1600px) {
  .bf-grid-span {
    grid-column: span var(--bf-grid-span-xl);
  }
}
@media (min-width: 1920px) {
  .bf-grid-span {
    grid-column: span var(--bf-grid-span-xxl);
  }
}
.bf-floatingmessage-stack {
  /* reset native popover styling */
  inset: unset;
  border: unset;
  background: unset;
  overflow: unset;
  /* desired styling */
  position: fixed;
  bottom: 0;
  right: 0;
  transition: left var(--bf-animation-duration);
  text-align: right;
  pointer-events: none;
  margin: var(--bf-page-padding);
}

.bf-floatingmessage-stack-left {
  right: auto;
  left: var(--bf-nav-side-width, 0);
  text-align: left;
}

.bf-floatingmessage-stack-top {
  bottom: auto;
  top: var(--bf-nav-top-height, 0);
}

.bf-floatingmessage-stack .bf-message {
  display: inline-block;
  position: relative;
  box-shadow: var(--bf-shadow);
  pointer-events: auto;
  text-align: left;
}

.bf-floatingmessage-stack .bf-message:has(.bf-message-close) {
  padding-right: 42px;
}

.bf-floatingmessage-stack .bf-message-close {
  position: absolute;
  right: 10px;
}

.bf-floatingmessage-stack .bf-message-header {
  margin-bottom: 0;
}

.bf-floatingmessage-stack .bf-message-content:not(:empty) {
  margin-top: var(--bfs4);
}

.bf-floatingmessage-stack > * {
  display: grid;
  transition-property: opacity, scale, margin-top, grid-template-rows;
  transition-duration: var(--bf-animation-duration);
  grid-template-columns: minmax(0, 1fr);
}

.bf-floatingmessage-stack > * > * {
  min-height: 0;
}

.bf-stack-element {
  margin-top: 8px;
}

.bf-floatingmessage-enter,
.bf-floatingmessage-exit.bf-floatingmessage-exit-active {
  opacity: 0;
  margin-top: 0;
  grid-template-rows: 0fr;
  scale: 0.9;
}

.bf-floatingmessage-enter-active,
.bf-floatingmessage-enter-done,
.bf-floatingmessage-exit {
  opacity: 1;
  margin-top: 8px;
  grid-template-rows: 1fr;
  scale: 1;
}

.bf-floating-area {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 4;
  transition: transform var(--bf-animation-duration) ease;
  transform: translateY(110%);
}

.bf-floating-area.bf-scrolled-up,
.bf-floating-area:focus-within {
  transform: translateY(0);
}

.bfl-inline,
.bf-inline {
  --bf-inline-gap: var(--bfs12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-inline-gap);
  align-items: flex-start;
}

.bfl-inline-space,
.bf-inline-space,
.bf-inline-separator {
  margin-left: auto;
}

/* using <Inline.Separator /> introduces an empty element in the dom,
remove the added space from the extra gap it creates. */
.bf-inline-separator {
  margin-right: calc(var(--bf-inline-gap) * -1);
}

.bfl-inline-stretch,
.bf-inline-stretch,
.bf-inline-stretch-wrapper {
  flex: 1 1;
}

/* stretch child items when it is the only child of <Inline.Stretch> */
.bf-inline-stretch-wrapper > :first-child:last-child {
  width: 100%;
}

:root {
  --bf-sticky-top: var(--bf-page-padding);
}

.bf-sticky {
  --bf-sticky-top-total: calc(
    var(--bf-sticky-top, 0px) + var(--bf-nav-top-height, 0px)
  );
  position: sticky;
  top: var(--bf-sticky-top-total);
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - var(--bf-sticky-top-total) - var(--bf-sticky-top, 0px));
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - var(--bf-sticky-top-total) - var(--bf-sticky-top, 0px));
  overflow-y: auto;
  transition: top var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-badge {
  display: inline-block;
  padding: var(--bfs2) var(--bfs8);
  border-radius: var(--bf-radius-xs);
  font-size: var(--bf-font-size-m);
  font-weight: 600;
}

.bf-badge-pill {
  border-radius: var(--rem16);
  padding: var(--bfs2) var(--bfs12);
}

.bf-banner {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
  border-radius: 0 0 var(--bf-radius-xs) var(--bf-radius-xs);
  outline: none;
  padding: var(--bfs8) 10px;
  position: absolute;
  right: var(--bfs12);
  top: -8px;
  z-index: 2;
  font-weight: 600;
}

.bf-banner-left {
  left: var(--bfs12);
  right: auto;
}

.bf-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  display: block;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--bfc-theme-3);
  border-left: 5px solid transparent;
}

button.bf-banner {
  cursor: pointer;
  border: none;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
}

button.bf-banner:hover {
  background-color: var(--bfc-theme-2);
}

button.bf-banner:focus-visible {
  outline: 1px dashed var(--bfc-base-c-theme);
  outline-offset: 1px;
}

button.bf-banner:active {
  transform: translateY(2px) translateX(-1px);
}

button.bf-banner:active::before {
  left: -4px;
  border-bottom-width: 6px;
  border-left-width: 4px;
}

button.bf-banner:active::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

:root {
  --bf-card-padding: var(--bfs12);
}

.bf-card {
  background-color: var(--bfc-base-3);
  font-size: var(--bf-font-size-m);
  position: relative;
  min-height: 0;
  display: flow-root;
  border-radius: var(--bf-radius-xs);
}

.bf-card > a,
.bf-card > a:link,
.bf-card > a:visited,
.bf-card > a:focus,
.bf-card > a:hover,
.bf-card > a:active {
  padding: 0;
  background: none;
  text-decoration-line: none;
  color: inherit;
  display: block;
}

.bf-card > button {
  padding: 0;
  outline: none;
  display: block;
  width: 100%;
  text-align: inherit;
  background: inherit;
  border: inherit;
  font: inherit;
  cursor: pointer;
}

.bf-card > button:focus-visible,
.bf-card > a:focus-visible {
  outline: 1px dashed var(--bfc-base-c-theme);
}

/* when a link (or button) wraps the whole card content,
stretch it to full height to make sure whole area is clickable */
.bf-card > a:only-child,
.bf-card > button:only-child {
  height: 100%;
}

.bf-card-align-center {
  text-align: center;
}

.bf-card-image {
  background-size: cover;
  background-position: 50% 50%;
  aspect-ratio: 16/9;
}

.bf-card-image:first-child {
  border-top-left-radius: var(--bf-radius-xs);
  border-top-right-radius: var(--bf-radius-xs);
}

.bf-card-logo {
  height: 70px;
  width: 70px;
  border-radius: var(--bf-radius-full);
  margin: var(--bf-card-padding) auto;
  font-size: var(--bf-font-size-h2);
  background-color: var(--bfc-base);
  background-size: cover;
  background-position: 50% 20%;
  position: relative;
}

.bf-card-image + .bf-card-logo {
  margin-top: -35px;
}

.bf-card-logo-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bf-card-title {
  margin: var(--bf-card-padding);
  margin-bottom: var(--bfs4);
  color: var(--bfc-base-c);
  font-size: var(--bf-font-size-l);
}

.bf-card-title:last-child {
  margin-bottom: var(--bf-card-padding);
}

a .bf-card-title,
button .bf-card-title {
  color: var(--bfc-base-c-theme);
  text-underline-offset: var(--bf-underline-offset);
}

a.bf-neutral-link .bf-card-title,
button.bf-neutral-link .bf-card-title {
  color: inherit;
}

a:hover .bf-card-title,
button:hover .bf-card-title {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.bf-card > .bf-card-title:last-child {
  margin-bottom: var(--bf-card-padding);
}

.bf-card-content {
  margin: var(--bf-card-padding) 0 var(--bf-card-padding) 0;
  padding: 0 var(--bf-card-padding);
  text-decoration-line: none;
}

.bf-card-content + .bf-card-content {
  border-top: 1px solid var(--bfc-base-c-dimmed);
  padding-top: var(--bf-card-padding);
}

.bf-card-title + .bf-card-content {
  margin-top: var(--bfs4);
}

.bf-card-content > :first-child {
  margin-top: 0;
}

button.bf-card-button {
  padding: var(--bfs12) var(--bf-card-padding);
  border-top: 1px solid var(--bfc-base-c-dimmed);
  font-weight: 600;
  text-align: center;
  margin-top: var(--bf-card-padding);
}

/* responsive padding */
.bf-card-no-padding {
  --bf-card-padding: 0;
}

.bf-card-padding-m {
  --bf-card-padding: var(--bfs12);
}

.bf-card-padding-l {
  --bf-card-padding: var(--bfs16);
}

@media (min-width: 1280px) {
  .bf-card-padding-m {
    --bf-card-padding: var(--bfs16);
  }
  .bf-card-padding-l {
    --bf-card-padding: var(--bfs24);
  }
}
.bf-icon-margin-left {
  margin-left: 8px;
}

.bf-icon-margin-right {
  margin-right: 8px;
}

/* Icon.Step */
.bf-step-icon {
  height: 1.25em;
  width: 1.25em;
  background-color: var(--bfc-base-dimmed);
  border-radius: var(--bf-radius-full);
  display: inline-grid;
  place-items: center;
  user-select: none;
}

.bf-step-icon > * {
  font-size: 0.85em;
  line-height: 1.8; /* Aligning a blank space does not work the same as aligning an svg */
}

.bf-step-completed {
  background-color: var(--bfc-base-c);
  color: var(--bfc-base);
}

.bf-step-incomplete {
  --bf-pie-angle: 120deg;
  background-image: conic-gradient(from 90deg, var(--bfc-base-c) 0deg var(--bf-pie-angle), var(--bfc-base-dimmed) var(--bf-pie-angle) 360deg);
}

.bf-step-default {
  background: radial-gradient(var(--bfc-base-dimmed) 50%, transparent 50%);
}

/* Icon.Spin */
.bf-icon-spinner {
  animation: bf-spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes bf-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bf-progressbar-wrapper {
  display: flex;
  align-items: center;
}

.bf-progressbar {
  flex-grow: 1;
  vertical-align: middle;
  border: 1px solid var(--bfc-base-c-2);
  border-radius: var(--bf-radius-xs);
  background-color: var(--bfc-base);
  height: var(--bfs16);
  overflow: hidden;
}

.bf-progressbar-progress {
  background-color: var(--bfc-base-c-theme);
  height: 100%;
  transition: width 0.4s ease;
}

@media (prefers-reduced-motion) {
  .bf-progressbar-progress {
    transition: none;
  }
}
.bf-progressbar-small {
  height: var(--bfs8);
}

.bf-progressbar-large {
  height: var(--bfs24);
}

.bf-progressbar-label {
  font-size: var(--bf-font-size-m);
  padding-left: var(--bfs8);
  text-align: left;
  min-width: 2.5rem;
  font-weight: 600;
}

/* disabled */
.bf-progressbar-disabled,
.bf-progressbar-disabled ~ .bf-progressbar-label {
  opacity: 0.3;
}

.bf-skeleton-rect {
  height: var(--bfs24);
}

.bf-skeleton-shimmer,
.bf-skeleton-rect,
.bf-skeleton-text {
  position: relative;
  overflow: hidden;
}

.bf-skeleton-rect,
.bf-skeleton-text {
  background-color: hsla(var(--bfc-base-c-inverted-hsl), 0.1);
}

.bf-skeleton-shimmer::after,
.bf-skeleton-rect::after,
.bf-skeleton-text::after {
  inset: 0;
  content: "";
  position: absolute;
  animation: wave 1.5s linear 0.5s infinite;
  transform: translate3d(-100%, 0, 0);
  background: linear-gradient(90deg, transparent, hsla(var(--bfc-base-c-inverted-hsl), 0.2), transparent);
}

.bf-skeleton-text {
  border-radius: var(--bf-radius-xs);
  color: transparent;
  transform: scale(1, 0.6);
  display: block;
  min-height: 1lh;
}

.bf-skeleton-rect.bf-card-image {
  height: auto;
}

@keyframes wave {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  60% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@property --bf-ellipsis-lines {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}
.bf-ellipsis,
.bf-ellipsis-line {
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-deprecated */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bf-ellipsis-lines, 1);
  line-clamp: var(--bf-ellipsis-lines, 1);
  overflow: hidden;
  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
  word-break: break-word;
}

/* avoid cutting off focus outline */
.bf-ellipsis-padded {
  padding: 3px;
  margin: -3px;
}

/* for single-line cut-off, try to include as much content as possible on a line
 * as long as possible */
.bf-ellipsis-line {
  word-break: break-all;
}

.bf-file-input-area {
  position: relative;
  padding: 40px 12px;
  text-align: center;
  border-radius: var(--bf-radius-s);
  border: 1px dashed var(--bfc-base-c-wcag);
  background: var(--bfc-base-3);
  font-size: var(--bf-font-size-m);
}
.bf-file-input-area:has(input[type=file]:disabled) {
  border-color: transparent;
}
.bf-file-input-area:not(:has(input[type=file]:disabled)):hover, .bf-file-input-area:not(:has(input[type=file]:disabled)).bf-file-input-area-dragging {
  background-color: var(--bfc-base-2);
}
.bf-file-input-area:not(:has(input[type=file]:disabled)).bf-file-input-area-dragging {
  border-color: var(--bfc-base-c-theme);
}
.bf-file-input-area:not(:has(input[type=file]:disabled)).bf-file-input-area-dragging.bf-file-input-area-alert {
  border-color: var(--bfc-alert-2);
}
.bf-file-input-area:not(:has(input[type=file]:disabled)):hover .bf-neutral-link-text {
  text-decoration-line: underline;
}
.bf-file-input-area.bf-file-input-area-alert {
  border-color: var(--bfc-base-c-alert);
}
.bf-file-input-area:has(input[type=file]:focus-visible) {
  border-style: solid;
  border-color: var(--bfc-base-c-theme);
}
.bf-file-input-area input[type=file] {
  /* you cannot focus on a field with
   * visibility: hidden; or display: none;
   * so we hide the input some other way */
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bf-file-input-area input[type=file]:disabled {
  cursor: default;
}

.bf-label ~ .bf-file-input-area {
  margin-top: 4px;
}