@layer reset, tokens, base, themes, components, vendor;

/* Assets/css/tokens/colors.css */
@layer tokens {
  @layer tokens {
    :root {
      --color-bg: oklch(98.5% 0 0);
      --color-bg-subtle: oklch(95% 0 0);
      --color-bg-muted: oklch(90% 0 0);
      --color-surface: oklch(100% 0 0);
      --color-surface-raised: oklch(97% 0 0);
      --color-border: oklch(85% 0 0);
      --color-divider: oklch(80% 0 0);
      --color-text: oklch(20% 0 0);
      --color-text-muted: oklch(40% 0 0);
      --color-text-subtle: oklch(55% 0 0);
      --inverted-font-color: #f3f4f6;
      --color-text-inverse: oklch(98% 0 0);
      --fui-text-color: oklch(0.129 0.042 264.695);
      --color-default: #4b5563;
      --color-primary: #0369a1;
      --color-danger: #D21C09;
      --color-alert: #FA7800;
      --color-warning: #fde047;
      --color-success: #009E52;
      --color-error: #D21C09;
      --color-purple: #7c3aed;
      --color-magenta: #b614b6;
      --color-neutral: rgb(255, 255, 255);
      --application-header-color: #fff;
      --menu-item-hover: #f3f2f1;
      --actions-background-color: #f8f9f9;
      --background-secondary: rgb(250, 249, 248);
      --focus-outline-color: #2563eb;
      --default-border-color: rgb(211, 211, 210);
      --overlay-background-color: rgba(0, 0, 0, 0.5);
      --input-border-color: #a1a1aa;
      --input-focused-background-color: #f8fafc;
      --input-focused-outline-color: #93c5fd;
      --input-focused-border-color: #60a5fa;
      --input-hover-outline-back-ground-color: #eff6ff;
      --input-hover-outline-color: #60a5fa;
    }
  }
}

/* Assets/css/tokens/spacing.css */
@layer tokens {
  @layer tokens {
    :root {
      --space-unit: 0.25rem;
      --space-0: 0;
      --space-1: calc(var(--space-unit) * 1);
      --space-2: calc(var(--space-unit) * 2);
      --space-3: calc(var(--space-unit) * 4);
      --space-4: calc(var(--space-unit) * 6);
      --space-5: calc(var(--space-unit) * 8);
      --space-6: calc(var(--space-unit) * 12);
      --space-7: calc(var(--space-unit) * 16);
      --space-8: calc(var(--space-unit) * 24);
      --space-9: calc(var(--space-unit) * 32);
      --space-fluid-1: clamp(0.25rem, 0.2rem + 0.4vw, 0.5rem);
      --space-fluid-2: clamp(0.5rem, 0.4rem + 0.6vw, 1rem);
      --space-fluid-3: clamp(1rem, 0.8rem + 1vw, 1.5rem);
      --space-fluid-4: clamp(1.5rem, 1.2rem + 2vw, 3rem);
      --app-header-height: 50px;
      --base-input-height: 36px;
    }
  }
}

/* Assets/css/tokens/borders.css */
@layer tokens {
  @layer tokens {
    :root {
      --border-width-0: 0;
      --border-width-1: 1px;
      --border-width-2: 2px;
      --border-width-3: 3px;
      --border-width-4: 4px;
      --border-width-5: 5px;
      --border-width: var(--border-width-1);
      --radius-0: 0;
      --radius-xs: 2px;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 9999px;
      --radius: var(--radius-md);
      --focus-ring-width: 2px;
      --focus-ring-offset: 2px;
      --focus-ring-style: solid;
      --divider-width: 1px;
      --hairline-width: 1px;
    }
  }
}

/* Assets/css/tokens/typography.css */
@layer tokens {
  @layer tokens {
    :root {
      --font-family-base:
        "Segoe UI",
        "Segoe UI Web (West European)",
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        "Helvetica Neue",
        sans-serif;
      --font-size-min: 16px;
      --font-size-max: 18px;
      --font-density-scale: 1;
      --font-root-size: calc(var(--font-size-min) * var(--font-density-scale));
      --font-fluid-factor: 0.6vw;
      --font-size-0: clamp( 0.9rem, calc(1rem + var(--font-fluid-factor)), 1rem );
      --font-size-1: clamp(1.125rem, 1rem + 1vw, 1.25rem);
      --font-size-2: clamp(1.4rem, 1.2rem + 1.4vw, 1.563rem);
      --font-size-3: clamp(1.75rem, 1.4rem + 2vw, 1.953rem);
      --font-size-4: clamp(2.2rem, 1.8rem + 3vw, 2.441rem);
      --font-size-5: clamp(2.75rem, 2.2rem + 4vw, 3.052rem);
      --line-height-tight: 1.15;
      --line-height-normal: 1.5;
      --line-height-loose: 1.7;
      --font-weight-normal: 400;
      --font-weight-bold: 600;
    }
    html {
      font-size: var(--font-root-size);
    }
  }
}

/* Assets/css/base/reset.css */
@layer reset {
  @layer base {
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    html {
      overscroll-behavior: none;
    }
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
      margin: 0;
    }
    body {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      margin: 0;
    }
    img,
    picture,
    video,
    canvas,
    svg {
      display: block;
      max-width: 100%;
    }
    input,
    button,
    textarea,
    select {
      font: inherit;
      color: inherit;
      letter-spacing: inherit;
    }
    input,
    textarea {
      background-color: var(--color-neutral);
    }
    button {
      background: none;
      border: none;
      padding: 0;
    }
    a {
      color: inherit;
      text-decoration: inherit;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    textarea {
      resize: vertical;
    }
    nav {
      ul,
      li {
        list-style: none;
      }
      ul {
        padding: 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
  }
}

/* Assets/css/base/defaults.css */
@layer base {
  @layer base {
    :root {
      color-scheme: light dark;
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-family-base), serif;
      font-weight: var(--font-weight-normal, 400);
      line-height: var(--line-height-normal);
      text-size-adjust: 100%;
    }
    body {
      min-height: 100dvh;
      overscroll-behavior: none;
    }
    h1 {
      font-size: var(--font-size-5);
      line-height: var(--line-height-tight);
    }
    h2 {
      font-size: var(--font-size-4);
      line-height: var(--line-height-tight);
    }
    h3 {
      font-size: var(--font-size-3);
    }
    h4 {
      font-size: var(--font-size-2);
    }
    h5 {
      font-size: var(--font-size-1);
    }
    h6 {
      font-size: var(--font-size-0);
    }
    p {
      line-height: inherit;
    }
    ul,
    ol {
      padding-left: 1.25em;
    }
    strong {
      font-weight: var(--font-weight-bold, 700);
    }
    small {
      font-size: 0.875em;
    }
    em {
      font-style: italic;
    }
    code,
    pre {
      font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
      font-size: 0.95em;
    }
    pre {
      overflow-x: auto;
    }
    hr {
      border: none;
      border-top: var(--border-width, 1px) solid var(--color-border, currentColor);
      opacity: 0.25;
    }
    [popover] {
      background-color: #fff;
    }
  }
}

/* Assets/css/base/layout.css */
@layer base {
  @layer base {
    .v-auto {
      height: auto;
      flex-grow: 0;
    }
    .v-expand {
      flex-grow: 1;
      flex-shrink: 0;
      height: 100%;
    }
    .v-shrink {
      flex-shrink: 0;
      height: auto;
    }
    .h-shrink {
      width: auto;
      flex-grow: 0;
    }
    .h-auto {
      width: inherit;
    }
    .h-expand {
      width: 100%;
      &.v-expand {
        flex-shrink: 1;
      }
    }
    .layout-orientation-horizontal {
      display: flex;
      flex-direction: row;
    }
    .layout-orientation-vertical {
      display: flex;
      flex-direction: column;
    }
    .justify-start {
      align-self: flex-start;
    }
    .justify-end {
      justify-content: flex-end;
    }
    .justify-center {
      justify-content: center;
    }
    .justify-space-between {
      justify-content: space-between;
    }
    .justify-space-evenly {
      justify-content: space-evenly;
    }
    .justify-space-around {
      justify-content: space-around;
    }
    .align-start {
      align-items: flex-start;
    }
    .align-center {
      align-items: center;
    }
    .align-end {
      align-items: flex-end;
    }
  }
}

/* Assets/css/base/grid.css */
@layer base {
  html {
    box-sizing: border-box;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  @media (min-width: 576px) {
    .container,
    .container-sm {
      max-width: 540px;
    }
  }
  @media (min-width: 768px) {
    .container,
    .container-sm,
    .container-md {
      max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
      max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
      max-width: 1140px;
    }
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
  .no-gutters > .col,
  .no-gutters > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col,
  .col-auto,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm,
  .col-sm-auto,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md,
  .col-md-auto,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg,
  .col-lg-auto,
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12,
  .col-xl,
  .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
  }
  .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-1 {
    margin-left: 8.333333%;
  }
  .offset-2 {
    margin-left: 16.666667%;
  }
  .offset-3 {
    margin-left: 25%;
  }
  .offset-4 {
    margin-left: 33.333333%;
  }
  .offset-5 {
    margin-left: 41.666667%;
  }
  .offset-6 {
    margin-left: 50%;
  }
  .offset-7 {
    margin-left: 58.333333%;
  }
  .offset-8 {
    margin-left: 66.666667%;
  }
  .offset-9 {
    margin-left: 75%;
  }
  .offset-10 {
    margin-left: 83.333333%;
  }
  .offset-11 {
    margin-left: 91.666667%;
  }
  @media (min-width: 576px) {
    .col-sm {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-sm-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
    .col-sm-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-sm-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-sm-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-sm-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-sm-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-sm-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-sm-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-sm-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .offset-sm-0 {
      margin-left: 0;
    }
    .offset-sm-1 {
      margin-left: 8.333333%;
    }
    .offset-sm-2 {
      margin-left: 16.666667%;
    }
    .offset-sm-3 {
      margin-left: 25%;
    }
    .offset-sm-4 {
      margin-left: 33.333333%;
    }
    .offset-sm-5 {
      margin-left: 41.666667%;
    }
    .offset-sm-6 {
      margin-left: 50%;
    }
    .offset-sm-7 {
      margin-left: 58.333333%;
    }
    .offset-sm-8 {
      margin-left: 66.666667%;
    }
    .offset-sm-9 {
      margin-left: 75%;
    }
    .offset-sm-10 {
      margin-left: 83.333333%;
    }
    .offset-sm-11 {
      margin-left: 91.666667%;
    }
  }
  @media (min-width: 768px) {
    .col-md {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-md-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
    .col-md-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-md-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-md-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-md-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-md-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-md-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-md-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-md-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-md-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-md-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .offset-md-0 {
      margin-left: 0;
    }
    .offset-md-1 {
      margin-left: 8.333333%;
    }
    .offset-md-2 {
      margin-left: 16.666667%;
    }
    .offset-md-3 {
      margin-left: 25%;
    }
    .offset-md-4 {
      margin-left: 33.333333%;
    }
    .offset-md-5 {
      margin-left: 41.666667%;
    }
    .offset-md-6 {
      margin-left: 50%;
    }
    .offset-md-7 {
      margin-left: 58.333333%;
    }
    .offset-md-8 {
      margin-left: 66.666667%;
    }
    .offset-md-9 {
      margin-left: 75%;
    }
    .offset-md-10 {
      margin-left: 83.333333%;
    }
    .offset-md-11 {
      margin-left: 91.666667%;
    }
  }
  @media (min-width: 992px) {
    .col-lg {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-lg-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
    .col-lg-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-lg-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-lg-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-lg-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-lg-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-lg-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-lg-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-lg-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-lg-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-lg-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .offset-lg-0 {
      margin-left: 0;
    }
    .offset-lg-1 {
      margin-left: 8.333333%;
    }
    .offset-lg-2 {
      margin-left: 16.666667%;
    }
    .offset-lg-3 {
      margin-left: 25%;
    }
    .offset-lg-4 {
      margin-left: 33.333333%;
    }
    .offset-lg-5 {
      margin-left: 41.666667%;
    }
    .offset-lg-6 {
      margin-left: 50%;
    }
    .offset-lg-7 {
      margin-left: 58.333333%;
    }
    .offset-lg-8 {
      margin-left: 66.666667%;
    }
    .offset-lg-9 {
      margin-left: 75%;
    }
    .offset-lg-10 {
      margin-left: 83.333333%;
    }
    .offset-lg-11 {
      margin-left: 91.666667%;
    }
  }
  @media (min-width: 1200px) {
    .col-xl {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-xl-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
    .col-xl-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-xl-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-xl-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-xl-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-xl-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-xl-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-xl-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-xl-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-xl-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-xl-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-xl-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-xl-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .offset-xl-0 {
      margin-left: 0;
    }
    .offset-xl-1 {
      margin-left: 8.333333%;
    }
    .offset-xl-2 {
      margin-left: 16.666667%;
    }
    .offset-xl-3 {
      margin-left: 25%;
    }
    .offset-xl-4 {
      margin-left: 33.333333%;
    }
    .offset-xl-5 {
      margin-left: 41.666667%;
    }
    .offset-xl-6 {
      margin-left: 50%;
    }
    .offset-xl-7 {
      margin-left: 58.333333%;
    }
    .offset-xl-8 {
      margin-left: 66.666667%;
    }
    .offset-xl-9 {
      margin-left: 75%;
    }
    .offset-xl-10 {
      margin-left: 83.333333%;
    }
    .offset-xl-11 {
      margin-left: 91.666667%;
    }
  }
  .d-none {
    display: none !important;
  }
  .d-inline {
    display: inline !important;
  }
  .d-inline-block {
    display: inline-block !important;
  }
  .d-block {
    display: block !important;
  }
  .d-table {
    display: table !important;
  }
  .d-table-row {
    display: table-row !important;
  }
  .d-table-cell {
    display: table-cell !important;
  }
  .d-flex {
    display: flex !important;
  }
  .d-inline-flex {
    display: inline-flex !important;
  }
  .flex-fill {
    flex: 1 1 auto !important;
  }
  .flex-row {
    flex-direction: row !important;
  }
  .flex-column {
    flex-direction: column !important;
  }
  .flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-grow-1 {
    flex-grow: 1 !important;
  }
  .justify-content-start {
    justify-content: flex-start !important;
  }
  .justify-content-end {
    justify-content: flex-end !important;
  }
  .justify-content-center {
    justify-content: center !important;
  }
  .justify-content-between {
    justify-content: space-between !important;
  }
  .justify-content-around {
    justify-content: space-around !important;
  }
  .align-items-start {
    align-items: flex-start !important;
  }
  .align-items-end {
    align-items: flex-end !important;
  }
  .align-items-center {
    align-items: center !important;
  }
  .align-items-baseline {
    align-items: baseline !important;
  }
  .align-items-stretch {
    align-items: stretch !important;
  }
  .align-content-start {
    align-content: flex-start !important;
  }
  .align-content-end {
    align-content: flex-end !important;
  }
  .align-content-center {
    align-content: center !important;
  }
  .align-content-between {
    align-content: space-between !important;
  }
  .align-content-around {
    align-content: space-around !important;
  }
  .align-content-stretch {
    align-content: stretch !important;
  }
  .align-self-auto {
    align-self: auto !important;
  }
  .align-self-start {
    align-self: flex-start !important;
  }
  .align-self-end {
    align-self: flex-end !important;
  }
  .align-self-center {
    align-self: center !important;
  }
  .align-self-baseline {
    align-self: baseline !important;
  }
  .align-self-stretch {
    align-self: stretch !important;
  }
  .order-first {
    order: -1 !important;
  }
  .order-0 {
    order: 0 !important;
  }
  .order-1 {
    order: 1 !important;
  }
  .order-2 {
    order: 2 !important;
  }
  .order-3 {
    order: 3 !important;
  }
  .order-4 {
    order: 4 !important;
  }
  .order-5 {
    order: 5 !important;
  }
  .order-last {
    order: 6 !important;
  }
  .m-0 {
    margin: 0 !important;
  }
  .m-1 {
    margin: 0.25rem !important;
  }
  .m-2 {
    margin: 0.5rem !important;
  }
  .m-3 {
    margin: 1rem !important;
  }
  .m-4 {
    margin: 1.5rem !important;
  }
  .m-5 {
    margin: 3rem !important;
  }
  .m-auto {
    margin: auto !important;
  }
  .mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-0 {
    margin-top: 0 !important;
  }
  .mt-1 {
    margin-top: 0.25rem !important;
  }
  .mt-2 {
    margin-top: 0.5rem !important;
  }
  .mt-3 {
    margin-top: 1rem !important;
  }
  .mt-4 {
    margin-top: 1.5rem !important;
  }
  .mt-5 {
    margin-top: 3rem !important;
  }
  .mt-auto {
    margin-top: auto !important;
  }
  .mr-0 {
    margin-right: 0 !important;
  }
  .mr-1 {
    margin-right: 0.25rem !important;
  }
  .mr-2 {
    margin-right: 0.5rem !important;
  }
  .mr-3 {
    margin-right: 1rem !important;
  }
  .mr-4 {
    margin-right: 1.5rem !important;
  }
  .mr-5 {
    margin-right: 3rem !important;
  }
  .mr-auto {
    margin-right: auto !important;
  }
  .mb-0 {
    margin-bottom: 0 !important;
  }
  .mb-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-3 {
    margin-bottom: 1rem !important;
  }
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-5 {
    margin-bottom: 3rem !important;
  }
  .mb-auto {
    margin-bottom: auto !important;
  }
  .ml-0 {
    margin-left: 0 !important;
  }
  .ml-1 {
    margin-left: 0.25rem !important;
  }
  .ml-2 {
    margin-left: 0.5rem !important;
  }
  .ml-3 {
    margin-left: 1rem !important;
  }
  .ml-4 {
    margin-left: 1.5rem !important;
  }
  .ml-5 {
    margin-left: 3rem !important;
  }
  .ml-auto {
    margin-left: auto !important;
  }
  .m-n1 {
    margin: -0.25rem !important;
  }
  .m-n2 {
    margin: -0.5rem !important;
  }
  .m-n3 {
    margin: -1rem !important;
  }
  .m-n4 {
    margin: -1.5rem !important;
  }
  .m-n5 {
    margin: -3rem !important;
  }
  .mx-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-n3 {
    margin-top: -1rem !important;
  }
  .mt-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-n5 {
    margin-top: -3rem !important;
  }
  .mr-n1 {
    margin-right: -0.25rem !important;
  }
  .mr-n2 {
    margin-right: -0.5rem !important;
  }
  .mr-n3 {
    margin-right: -1rem !important;
  }
  .mr-n4 {
    margin-right: -1.5rem !important;
  }
  .mr-n5 {
    margin-right: -3rem !important;
  }
  .mb-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-n1 {
    margin-left: -0.25rem !important;
  }
  .ml-n2 {
    margin-left: -0.5rem !important;
  }
  .ml-n3 {
    margin-left: -1rem !important;
  }
  .ml-n4 {
    margin-left: -1.5rem !important;
  }
  .ml-n5 {
    margin-left: -3rem !important;
  }
  .p-0 {
    padding: 0 !important;
  }
  .p-1 {
    padding: 0.25rem !important;
  }
  .p-2 {
    padding: 0.5rem !important;
  }
  .p-3 {
    padding: 1rem !important;
  }
  .p-4 {
    padding: 1.5rem !important;
  }
  .p-5 {
    padding: 3rem !important;
  }
  .px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-0 {
    padding-top: 0 !important;
  }
  .pt-1 {
    padding-top: 0.25rem !important;
  }
  .pt-2 {
    padding-top: 0.5rem !important;
  }
  .pt-3 {
    padding-top: 1rem !important;
  }
  .pt-4 {
    padding-top: 1.5rem !important;
  }
  .pt-5 {
    padding-top: 3rem !important;
  }
  .pr-0 {
    padding-right: 0 !important;
  }
  .pr-1 {
    padding-right: 0.25rem !important;
  }
  .pr-2 {
    padding-right: 0.5rem !important;
  }
  .pr-3 {
    padding-right: 1rem !important;
  }
  .pr-4 {
    padding-right: 1.5rem !important;
  }
  .pr-5 {
    padding-right: 3rem !important;
  }
  .pb-0 {
    padding-bottom: 0 !important;
  }
  .pb-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-3 {
    padding-bottom: 1rem !important;
  }
  .pb-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-5 {
    padding-bottom: 3rem !important;
  }
  .pl-0 {
    padding-left: 0 !important;
  }
  .pl-1 {
    padding-left: 0.25rem !important;
  }
  .pl-2 {
    padding-left: 0.5rem !important;
  }
  .pl-3 {
    padding-left: 1rem !important;
  }
  .pl-4 {
    padding-left: 1.5rem !important;
  }
  .pl-5 {
    padding-left: 3rem !important;
  }
  @media (min-width: 576px) {
    .d-sm-none {
      display: none !important;
    }
    .d-sm-inline {
      display: inline !important;
    }
    .d-sm-inline-block {
      display: inline-block !important;
    }
    .d-sm-block {
      display: block !important;
    }
    .d-sm-table {
      display: table !important;
    }
    .d-sm-table-row {
      display: table-row !important;
    }
    .d-sm-table-cell {
      display: table-cell !important;
    }
    .d-sm-flex {
      display: flex !important;
    }
    .d-sm-inline-flex {
      display: inline-flex !important;
    }
    .flex-sm-fill {
      flex: 1 1 auto !important;
    }
    .flex-sm-row {
      flex-direction: row !important;
    }
    .flex-sm-column {
      flex-direction: column !important;
    }
    .flex-sm-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex-sm-column-reverse {
      flex-direction: column-reverse !important;
    }
    .flex-sm-grow-0 {
      flex-grow: 0 !important;
    }
    .flex-sm-grow-1 {
      flex-grow: 1 !important;
    }
    .justify-content-sm-start {
      justify-content: flex-start !important;
    }
    .justify-content-sm-end {
      justify-content: flex-end !important;
    }
    .justify-content-sm-center {
      justify-content: center !important;
    }
    .justify-content-sm-between {
      justify-content: space-between !important;
    }
    .justify-content-sm-around {
      justify-content: space-around !important;
    }
    .align-items-sm-start {
      align-items: flex-start !important;
    }
    .align-items-sm-end {
      align-items: flex-end !important;
    }
    .align-items-sm-center {
      align-items: center !important;
    }
    .align-items-sm-baseline {
      align-items: baseline !important;
    }
    .align-items-sm-stretch {
      align-items: stretch !important;
    }
    .align-content-sm-start {
      align-content: flex-start !important;
    }
    .align-content-sm-end {
      align-content: flex-end !important;
    }
    .align-content-sm-center {
      align-content: center !important;
    }
    .align-content-sm-between {
      align-content: space-between !important;
    }
    .align-content-sm-around {
      align-content: space-around !important;
    }
    .align-content-sm-stretch {
      align-content: stretch !important;
    }
    .align-self-sm-auto {
      align-self: auto !important;
    }
    .align-self-sm-start {
      align-self: flex-start !important;
    }
    .align-self-sm-end {
      align-self: flex-end !important;
    }
    .align-self-sm-center {
      align-self: center !important;
    }
    .align-self-sm-baseline {
      align-self: baseline !important;
    }
    .align-self-sm-stretch {
      align-self: stretch !important;
    }
    .order-sm-first {
      order: -1 !important;
    }
    .order-sm-0 {
      order: 0 !important;
    }
    .order-sm-1 {
      order: 1 !important;
    }
    .order-sm-2 {
      order: 2 !important;
    }
    .order-sm-3 {
      order: 3 !important;
    }
    .order-sm-4 {
      order: 4 !important;
    }
    .order-sm-5 {
      order: 5 !important;
    }
    .order-sm-last {
      order: 6 !important;
    }
    .m-sm-0 {
      margin: 0 !important;
    }
    .m-sm-1 {
      margin: 0.25rem !important;
    }
    .m-sm-2 {
      margin: 0.5rem !important;
    }
    .m-sm-3 {
      margin: 1rem !important;
    }
    .m-sm-4 {
      margin: 1.5rem !important;
    }
    .m-sm-5 {
      margin: 3rem !important;
    }
    .m-sm-auto {
      margin: auto !important;
    }
    .mx-sm-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    .mx-sm-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
    .mx-sm-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
    .mx-sm-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
    .mx-sm-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
    .mx-sm-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
    .mx-sm-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    .my-sm-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    .my-sm-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
    .my-sm-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    .my-sm-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    .my-sm-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    .my-sm-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
    .my-sm-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    .mt-sm-0 {
      margin-top: 0 !important;
    }
    .mt-sm-1 {
      margin-top: 0.25rem !important;
    }
    .mt-sm-2 {
      margin-top: 0.5rem !important;
    }
    .mt-sm-3 {
      margin-top: 1rem !important;
    }
    .mt-sm-4 {
      margin-top: 1.5rem !important;
    }
    .mt-sm-5 {
      margin-top: 3rem !important;
    }
    .mt-sm-auto {
      margin-top: auto !important;
    }
    .mr-sm-0 {
      margin-right: 0 !important;
    }
    .mr-sm-1 {
      margin-right: 0.25rem !important;
    }
    .mr-sm-2 {
      margin-right: 0.5rem !important;
    }
    .mr-sm-3 {
      margin-right: 1rem !important;
    }
    .mr-sm-4 {
      margin-right: 1.5rem !important;
    }
    .mr-sm-5 {
      margin-right: 3rem !important;
    }
    .mr-sm-auto {
      margin-right: auto !important;
    }
    .mb-sm-0 {
      margin-bottom: 0 !important;
    }
    .mb-sm-1 {
      margin-bottom: 0.25rem !important;
    }
    .mb-sm-2 {
      margin-bottom: 0.5rem !important;
    }
    .mb-sm-3 {
      margin-bottom: 1rem !important;
    }
    .mb-sm-4 {
      margin-bottom: 1.5rem !important;
    }
    .mb-sm-5 {
      margin-bottom: 3rem !important;
    }
    .mb-sm-auto {
      margin-bottom: auto !important;
    }
    .ml-sm-0 {
      margin-left: 0 !important;
    }
    .ml-sm-1 {
      margin-left: 0.25rem !important;
    }
    .ml-sm-2 {
      margin-left: 0.5rem !important;
    }
    .ml-sm-3 {
      margin-left: 1rem !important;
    }
    .ml-sm-4 {
      margin-left: 1.5rem !important;
    }
    .ml-sm-5 {
      margin-left: 3rem !important;
    }
    .ml-sm-auto {
      margin-left: auto !important;
    }
    .m-sm-n1 {
      margin: -0.25rem !important;
    }
    .m-sm-n2 {
      margin: -0.5rem !important;
    }
    .m-sm-n3 {
      margin: -1rem !important;
    }
    .m-sm-n4 {
      margin: -1.5rem !important;
    }
    .m-sm-n5 {
      margin: -3rem !important;
    }
    .mx-sm-n1 {
      margin-right: -0.25rem !important;
      margin-left: -0.25rem !important;
    }
    .mx-sm-n2 {
      margin-right: -0.5rem !important;
      margin-left: -0.5rem !important;
    }
    .mx-sm-n3 {
      margin-right: -1rem !important;
      margin-left: -1rem !important;
    }
    .mx-sm-n4 {
      margin-right: -1.5rem !important;
      margin-left: -1.5rem !important;
    }
    .mx-sm-n5 {
      margin-right: -3rem !important;
      margin-left: -3rem !important;
    }
    .my-sm-n1 {
      margin-top: -0.25rem !important;
      margin-bottom: -0.25rem !important;
    }
    .my-sm-n2 {
      margin-top: -0.5rem !important;
      margin-bottom: -0.5rem !important;
    }
    .my-sm-n3 {
      margin-top: -1rem !important;
      margin-bottom: -1rem !important;
    }
    .my-sm-n4 {
      margin-top: -1.5rem !important;
      margin-bottom: -1.5rem !important;
    }
    .my-sm-n5 {
      margin-top: -3rem !important;
      margin-bottom: -3rem !important;
    }
    .mt-sm-n1 {
      margin-top: -0.25rem !important;
    }
    .mt-sm-n2 {
      margin-top: -0.5rem !important;
    }
    .mt-sm-n3 {
      margin-top: -1rem !important;
    }
    .mt-sm-n4 {
      margin-top: -1.5rem !important;
    }
    .mt-sm-n5 {
      margin-top: -3rem !important;
    }
    .mr-sm-n1 {
      margin-right: -0.25rem !important;
    }
    .mr-sm-n2 {
      margin-right: -0.5rem !important;
    }
    .mr-sm-n3 {
      margin-right: -1rem !important;
    }
    .mr-sm-n4 {
      margin-right: -1.5rem !important;
    }
    .mr-sm-n5 {
      margin-right: -3rem !important;
    }
    .mb-sm-n1 {
      margin-bottom: -0.25rem !important;
    }
    .mb-sm-n2 {
      margin-bottom: -0.5rem !important;
    }
    .mb-sm-n3 {
      margin-bottom: -1rem !important;
    }
    .mb-sm-n4 {
      margin-bottom: -1.5rem !important;
    }
    .mb-sm-n5 {
      margin-bottom: -3rem !important;
    }
    .ml-sm-n1 {
      margin-left: -0.25rem !important;
    }
    .ml-sm-n2 {
      margin-left: -0.5rem !important;
    }
    .ml-sm-n3 {
      margin-left: -1rem !important;
    }
    .ml-sm-n4 {
      margin-left: -1.5rem !important;
    }
    .ml-sm-n5 {
      margin-left: -3rem !important;
    }
    .p-sm-0 {
      padding: 0 !important;
    }
    .p-sm-1 {
      padding: 0.25rem !important;
    }
    .p-sm-2 {
      padding: 0.5rem !important;
    }
    .p-sm-3 {
      padding: 1rem !important;
    }
    .p-sm-4 {
      padding: 1.5rem !important;
    }
    .p-sm-5 {
      padding: 3rem !important;
    }
    .px-sm-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .px-sm-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
    .px-sm-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
    .px-sm-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    .px-sm-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
    .px-sm-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
    .py-sm-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .py-sm-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
    .py-sm-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    .py-sm-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    .py-sm-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
    .py-sm-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    .pt-sm-0 {
      padding-top: 0 !important;
    }
    .pt-sm-1 {
      padding-top: 0.25rem !important;
    }
    .pt-sm-2 {
      padding-top: 0.5rem !important;
    }
    .pt-sm-3 {
      padding-top: 1rem !important;
    }
    .pt-sm-4 {
      padding-top: 1.5rem !important;
    }
    .pt-sm-5 {
      padding-top: 3rem !important;
    }
    .pr-sm-0 {
      padding-right: 0 !important;
    }
    .pr-sm-1 {
      padding-right: 0.25rem !important;
    }
    .pr-sm-2 {
      padding-right: 0.5rem !important;
    }
    .pr-sm-3 {
      padding-right: 1rem !important;
    }
    .pr-sm-4 {
      padding-right: 1.5rem !important;
    }
    .pr-sm-5 {
      padding-right: 3rem !important;
    }
    .pb-sm-0 {
      padding-bottom: 0 !important;
    }
    .pb-sm-1 {
      padding-bottom: 0.25rem !important;
    }
    .pb-sm-2 {
      padding-bottom: 0.5rem !important;
    }
    .pb-sm-3 {
      padding-bottom: 1rem !important;
    }
    .pb-sm-4 {
      padding-bottom: 1.5rem !important;
    }
    .pb-sm-5 {
      padding-bottom: 3rem !important;
    }
    .pl-sm-0 {
      padding-left: 0 !important;
    }
    .pl-sm-1 {
      padding-left: 0.25rem !important;
    }
    .pl-sm-2 {
      padding-left: 0.5rem !important;
    }
    .pl-sm-3 {
      padding-left: 1rem !important;
    }
    .pl-sm-4 {
      padding-left: 1.5rem !important;
    }
    .pl-sm-5 {
      padding-left: 3rem !important;
    }
  }
  @media (min-width: 768px) {
    .d-md-none {
      display: none !important;
    }
    .d-md-inline {
      display: inline !important;
    }
    .d-md-inline-block {
      display: inline-block !important;
    }
    .d-md-block {
      display: block !important;
    }
    .d-md-table {
      display: table !important;
    }
    .d-md-table-row {
      display: table-row !important;
    }
    .d-md-table-cell {
      display: table-cell !important;
    }
    .d-md-flex {
      display: flex !important;
    }
    .d-md-inline-flex {
      display: inline-flex !important;
    }
    .flex-md-fill {
      flex: 1 1 auto !important;
    }
    .flex-md-row {
      flex-direction: row !important;
    }
    .flex-md-column {
      flex-direction: column !important;
    }
    .flex-md-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex-md-column-reverse {
      flex-direction: column-reverse !important;
    }
    .flex-md-grow-0 {
      flex-grow: 0 !important;
    }
    .flex-md-grow-1 {
      flex-grow: 1 !important;
    }
    .justify-content-md-start {
      justify-content: flex-start !important;
    }
    .justify-content-md-end {
      justify-content: flex-end !important;
    }
    .justify-content-md-center {
      justify-content: center !important;
    }
    .justify-content-md-between {
      justify-content: space-between !important;
    }
    .justify-content-md-around {
      justify-content: space-around !important;
    }
    .align-items-md-start {
      align-items: flex-start !important;
    }
    .align-items-md-end {
      align-items: flex-end !important;
    }
    .align-items-md-center {
      align-items: center !important;
    }
    .align-items-md-baseline {
      align-items: baseline !important;
    }
    .align-items-md-stretch {
      align-items: stretch !important;
    }
    .align-content-md-start {
      align-content: flex-start !important;
    }
    .align-content-md-end {
      align-content: flex-end !important;
    }
    .align-content-md-center {
      align-content: center !important;
    }
    .align-content-md-between {
      align-content: space-between !important;
    }
    .align-content-md-around {
      align-content: space-around !important;
    }
    .align-content-md-stretch {
      align-content: stretch !important;
    }
    .align-self-md-auto {
      align-self: auto !important;
    }
    .align-self-md-start {
      align-self: flex-start !important;
    }
    .align-self-md-end {
      align-self: flex-end !important;
    }
    .align-self-md-center {
      align-self: center !important;
    }
    .align-self-md-baseline {
      align-self: baseline !important;
    }
    .align-self-md-stretch {
      align-self: stretch !important;
    }
    .order-md-first {
      order: -1 !important;
    }
    .order-md-0 {
      order: 0 !important;
    }
    .order-md-1 {
      order: 1 !important;
    }
    .order-md-2 {
      order: 2 !important;
    }
    .order-md-3 {
      order: 3 !important;
    }
    .order-md-4 {
      order: 4 !important;
    }
    .order-md-5 {
      order: 5 !important;
    }
    .order-md-last {
      order: 6 !important;
    }
    .m-md-0 {
      margin: 0 !important;
    }
    .m-md-1 {
      margin: 0.25rem !important;
    }
    .m-md-2 {
      margin: 0.5rem !important;
    }
    .m-md-3 {
      margin: 1rem !important;
    }
    .m-md-4 {
      margin: 1.5rem !important;
    }
    .m-md-5 {
      margin: 3rem !important;
    }
    .m-md-auto {
      margin: auto !important;
    }
    .mx-md-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    .mx-md-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
    .mx-md-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
    .mx-md-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
    .mx-md-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
    .mx-md-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
    .mx-md-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    .my-md-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    .my-md-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
    .my-md-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    .my-md-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    .my-md-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    .my-md-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
    .my-md-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    .mt-md-0 {
      margin-top: 0 !important;
    }
    .mt-md-1 {
      margin-top: 0.25rem !important;
    }
    .mt-md-2 {
      margin-top: 0.5rem !important;
    }
    .mt-md-3 {
      margin-top: 1rem !important;
    }
    .mt-md-4 {
      margin-top: 1.5rem !important;
    }
    .mt-md-5 {
      margin-top: 3rem !important;
    }
    .mt-md-auto {
      margin-top: auto !important;
    }
    .mr-md-0 {
      margin-right: 0 !important;
    }
    .mr-md-1 {
      margin-right: 0.25rem !important;
    }
    .mr-md-2 {
      margin-right: 0.5rem !important;
    }
    .mr-md-3 {
      margin-right: 1rem !important;
    }
    .mr-md-4 {
      margin-right: 1.5rem !important;
    }
    .mr-md-5 {
      margin-right: 3rem !important;
    }
    .mr-md-auto {
      margin-right: auto !important;
    }
    .mb-md-0 {
      margin-bottom: 0 !important;
    }
    .mb-md-1 {
      margin-bottom: 0.25rem !important;
    }
    .mb-md-2 {
      margin-bottom: 0.5rem !important;
    }
    .mb-md-3 {
      margin-bottom: 1rem !important;
    }
    .mb-md-4 {
      margin-bottom: 1.5rem !important;
    }
    .mb-md-5 {
      margin-bottom: 3rem !important;
    }
    .mb-md-auto {
      margin-bottom: auto !important;
    }
    .ml-md-0 {
      margin-left: 0 !important;
    }
    .ml-md-1 {
      margin-left: 0.25rem !important;
    }
    .ml-md-2 {
      margin-left: 0.5rem !important;
    }
    .ml-md-3 {
      margin-left: 1rem !important;
    }
    .ml-md-4 {
      margin-left: 1.5rem !important;
    }
    .ml-md-5 {
      margin-left: 3rem !important;
    }
    .ml-md-auto {
      margin-left: auto !important;
    }
    .m-md-n1 {
      margin: -0.25rem !important;
    }
    .m-md-n2 {
      margin: -0.5rem !important;
    }
    .m-md-n3 {
      margin: -1rem !important;
    }
    .m-md-n4 {
      margin: -1.5rem !important;
    }
    .m-md-n5 {
      margin: -3rem !important;
    }
    .mx-md-n1 {
      margin-right: -0.25rem !important;
      margin-left: -0.25rem !important;
    }
    .mx-md-n2 {
      margin-right: -0.5rem !important;
      margin-left: -0.5rem !important;
    }
    .mx-md-n3 {
      margin-right: -1rem !important;
      margin-left: -1rem !important;
    }
    .mx-md-n4 {
      margin-right: -1.5rem !important;
      margin-left: -1.5rem !important;
    }
    .mx-md-n5 {
      margin-right: -3rem !important;
      margin-left: -3rem !important;
    }
    .my-md-n1 {
      margin-top: -0.25rem !important;
      margin-bottom: -0.25rem !important;
    }
    .my-md-n2 {
      margin-top: -0.5rem !important;
      margin-bottom: -0.5rem !important;
    }
    .my-md-n3 {
      margin-top: -1rem !important;
      margin-bottom: -1rem !important;
    }
    .my-md-n4 {
      margin-top: -1.5rem !important;
      margin-bottom: -1.5rem !important;
    }
    .my-md-n5 {
      margin-top: -3rem !important;
      margin-bottom: -3rem !important;
    }
    .mt-md-n1 {
      margin-top: -0.25rem !important;
    }
    .mt-md-n2 {
      margin-top: -0.5rem !important;
    }
    .mt-md-n3 {
      margin-top: -1rem !important;
    }
    .mt-md-n4 {
      margin-top: -1.5rem !important;
    }
    .mt-md-n5 {
      margin-top: -3rem !important;
    }
    .mr-md-n1 {
      margin-right: -0.25rem !important;
    }
    .mr-md-n2 {
      margin-right: -0.5rem !important;
    }
    .mr-md-n3 {
      margin-right: -1rem !important;
    }
    .mr-md-n4 {
      margin-right: -1.5rem !important;
    }
    .mr-md-n5 {
      margin-right: -3rem !important;
    }
    .mb-md-n1 {
      margin-bottom: -0.25rem !important;
    }
    .mb-md-n2 {
      margin-bottom: -0.5rem !important;
    }
    .mb-md-n3 {
      margin-bottom: -1rem !important;
    }
    .mb-md-n4 {
      margin-bottom: -1.5rem !important;
    }
    .mb-md-n5 {
      margin-bottom: -3rem !important;
    }
    .ml-md-n1 {
      margin-left: -0.25rem !important;
    }
    .ml-md-n2 {
      margin-left: -0.5rem !important;
    }
    .ml-md-n3 {
      margin-left: -1rem !important;
    }
    .ml-md-n4 {
      margin-left: -1.5rem !important;
    }
    .ml-md-n5 {
      margin-left: -3rem !important;
    }
    .p-md-0 {
      padding: 0 !important;
    }
    .p-md-1 {
      padding: 0.25rem !important;
    }
    .p-md-2 {
      padding: 0.5rem !important;
    }
    .p-md-3 {
      padding: 1rem !important;
    }
    .p-md-4 {
      padding: 1.5rem !important;
    }
    .p-md-5 {
      padding: 3rem !important;
    }
    .px-md-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .px-md-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
    .px-md-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
    .px-md-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    .px-md-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
    .px-md-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
    .py-md-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .py-md-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
    .py-md-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    .py-md-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    .py-md-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
    .py-md-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    .pt-md-0 {
      padding-top: 0 !important;
    }
    .pt-md-1 {
      padding-top: 0.25rem !important;
    }
    .pt-md-2 {
      padding-top: 0.5rem !important;
    }
    .pt-md-3 {
      padding-top: 1rem !important;
    }
    .pt-md-4 {
      padding-top: 1.5rem !important;
    }
    .pt-md-5 {
      padding-top: 3rem !important;
    }
    .pr-md-0 {
      padding-right: 0 !important;
    }
    .pr-md-1 {
      padding-right: 0.25rem !important;
    }
    .pr-md-2 {
      padding-right: 0.5rem !important;
    }
    .pr-md-3 {
      padding-right: 1rem !important;
    }
    .pr-md-4 {
      padding-right: 1.5rem !important;
    }
    .pr-md-5 {
      padding-right: 3rem !important;
    }
    .pb-md-0 {
      padding-bottom: 0 !important;
    }
    .pb-md-1 {
      padding-bottom: 0.25rem !important;
    }
    .pb-md-2 {
      padding-bottom: 0.5rem !important;
    }
    .pb-md-3 {
      padding-bottom: 1rem !important;
    }
    .pb-md-4 {
      padding-bottom: 1.5rem !important;
    }
    .pb-md-5 {
      padding-bottom: 3rem !important;
    }
    .pl-md-0 {
      padding-left: 0 !important;
    }
    .pl-md-1 {
      padding-left: 0.25rem !important;
    }
    .pl-md-2 {
      padding-left: 0.5rem !important;
    }
    .pl-md-3 {
      padding-left: 1rem !important;
    }
    .pl-md-4 {
      padding-left: 1.5rem !important;
    }
    .pl-md-5 {
      padding-left: 3rem !important;
    }
  }
  @media (min-width: 992px) {
    .d-lg-none {
      display: none !important;
    }
    .d-lg-inline {
      display: inline !important;
    }
    .d-lg-inline-block {
      display: inline-block !important;
    }
    .d-lg-block {
      display: block !important;
    }
    .d-lg-table {
      display: table !important;
    }
    .d-lg-table-row {
      display: table-row !important;
    }
    .d-lg-table-cell {
      display: table-cell !important;
    }
    .d-lg-flex {
      display: flex !important;
    }
    .d-lg-inline-flex {
      display: inline-flex !important;
    }
    .flex-lg-fill {
      flex: 1 1 auto !important;
    }
    .flex-lg-row {
      flex-direction: row !important;
    }
    .flex-lg-column {
      flex-direction: column !important;
    }
    .flex-lg-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex-lg-column-reverse {
      flex-direction: column-reverse !important;
    }
    .flex-lg-grow-0 {
      flex-grow: 0 !important;
    }
    .flex-lg-grow-1 {
      flex-grow: 1 !important;
    }
    .justify-content-lg-start {
      justify-content: flex-start !important;
    }
    .justify-content-lg-end {
      justify-content: flex-end !important;
    }
    .justify-content-lg-center {
      justify-content: center !important;
    }
    .justify-content-lg-between {
      justify-content: space-between !important;
    }
    .justify-content-lg-around {
      justify-content: space-around !important;
    }
    .align-items-lg-start {
      align-items: flex-start !important;
    }
    .align-items-lg-end {
      align-items: flex-end !important;
    }
    .align-items-lg-center {
      align-items: center !important;
    }
    .align-items-lg-baseline {
      align-items: baseline !important;
    }
    .align-items-lg-stretch {
      align-items: stretch !important;
    }
    .align-content-lg-start {
      align-content: flex-start !important;
    }
    .align-content-lg-end {
      align-content: flex-end !important;
    }
    .align-content-lg-center {
      align-content: center !important;
    }
    .align-content-lg-between {
      align-content: space-between !important;
    }
    .align-content-lg-around {
      align-content: space-around !important;
    }
    .align-content-lg-stretch {
      align-content: stretch !important;
    }
    .align-self-lg-auto {
      align-self: auto !important;
    }
    .align-self-lg-start {
      align-self: flex-start !important;
    }
    .align-self-lg-end {
      align-self: flex-end !important;
    }
    .align-self-lg-center {
      align-self: center !important;
    }
    .align-self-lg-baseline {
      align-self: baseline !important;
    }
    .align-self-lg-stretch {
      align-self: stretch !important;
    }
    .order-lg-first {
      order: -1 !important;
    }
    .order-lg-0 {
      order: 0 !important;
    }
    .order-lg-1 {
      order: 1 !important;
    }
    .order-lg-2 {
      order: 2 !important;
    }
    .order-lg-3 {
      order: 3 !important;
    }
    .order-lg-4 {
      order: 4 !important;
    }
    .order-lg-5 {
      order: 5 !important;
    }
    .order-lg-last {
      order: 6 !important;
    }
    .m-lg-0 {
      margin: 0 !important;
    }
    .m-lg-1 {
      margin: 0.25rem !important;
    }
    .m-lg-2 {
      margin: 0.5rem !important;
    }
    .m-lg-3 {
      margin: 1rem !important;
    }
    .m-lg-4 {
      margin: 1.5rem !important;
    }
    .m-lg-5 {
      margin: 3rem !important;
    }
    .m-lg-auto {
      margin: auto !important;
    }
    .mx-lg-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    .mx-lg-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
    .mx-lg-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
    .mx-lg-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
    .mx-lg-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
    .mx-lg-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
    .mx-lg-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    .my-lg-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    .my-lg-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
    .my-lg-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    .my-lg-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    .my-lg-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    .my-lg-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
    .my-lg-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    .mt-lg-0 {
      margin-top: 0 !important;
    }
    .mt-lg-1 {
      margin-top: 0.25rem !important;
    }
    .mt-lg-2 {
      margin-top: 0.5rem !important;
    }
    .mt-lg-3 {
      margin-top: 1rem !important;
    }
    .mt-lg-4 {
      margin-top: 1.5rem !important;
    }
    .mt-lg-5 {
      margin-top: 3rem !important;
    }
    .mt-lg-auto {
      margin-top: auto !important;
    }
    .mr-lg-0 {
      margin-right: 0 !important;
    }
    .mr-lg-1 {
      margin-right: 0.25rem !important;
    }
    .mr-lg-2 {
      margin-right: 0.5rem !important;
    }
    .mr-lg-3 {
      margin-right: 1rem !important;
    }
    .mr-lg-4 {
      margin-right: 1.5rem !important;
    }
    .mr-lg-5 {
      margin-right: 3rem !important;
    }
    .mr-lg-auto {
      margin-right: auto !important;
    }
    .mb-lg-0 {
      margin-bottom: 0 !important;
    }
    .mb-lg-1 {
      margin-bottom: 0.25rem !important;
    }
    .mb-lg-2 {
      margin-bottom: 0.5rem !important;
    }
    .mb-lg-3 {
      margin-bottom: 1rem !important;
    }
    .mb-lg-4 {
      margin-bottom: 1.5rem !important;
    }
    .mb-lg-5 {
      margin-bottom: 3rem !important;
    }
    .mb-lg-auto {
      margin-bottom: auto !important;
    }
    .ml-lg-0 {
      margin-left: 0 !important;
    }
    .ml-lg-1 {
      margin-left: 0.25rem !important;
    }
    .ml-lg-2 {
      margin-left: 0.5rem !important;
    }
    .ml-lg-3 {
      margin-left: 1rem !important;
    }
    .ml-lg-4 {
      margin-left: 1.5rem !important;
    }
    .ml-lg-5 {
      margin-left: 3rem !important;
    }
    .ml-lg-auto {
      margin-left: auto !important;
    }
    .m-lg-n1 {
      margin: -0.25rem !important;
    }
    .m-lg-n2 {
      margin: -0.5rem !important;
    }
    .m-lg-n3 {
      margin: -1rem !important;
    }
    .m-lg-n4 {
      margin: -1.5rem !important;
    }
    .m-lg-n5 {
      margin: -3rem !important;
    }
    .mx-lg-n1 {
      margin-right: -0.25rem !important;
      margin-left: -0.25rem !important;
    }
    .mx-lg-n2 {
      margin-right: -0.5rem !important;
      margin-left: -0.5rem !important;
    }
    .mx-lg-n3 {
      margin-right: -1rem !important;
      margin-left: -1rem !important;
    }
    .mx-lg-n4 {
      margin-right: -1.5rem !important;
      margin-left: -1.5rem !important;
    }
    .mx-lg-n5 {
      margin-right: -3rem !important;
      margin-left: -3rem !important;
    }
    .my-lg-n1 {
      margin-top: -0.25rem !important;
      margin-bottom: -0.25rem !important;
    }
    .my-lg-n2 {
      margin-top: -0.5rem !important;
      margin-bottom: -0.5rem !important;
    }
    .my-lg-n3 {
      margin-top: -1rem !important;
      margin-bottom: -1rem !important;
    }
    .my-lg-n4 {
      margin-top: -1.5rem !important;
      margin-bottom: -1.5rem !important;
    }
    .my-lg-n5 {
      margin-top: -3rem !important;
      margin-bottom: -3rem !important;
    }
    .mt-lg-n1 {
      margin-top: -0.25rem !important;
    }
    .mt-lg-n2 {
      margin-top: -0.5rem !important;
    }
    .mt-lg-n3 {
      margin-top: -1rem !important;
    }
    .mt-lg-n4 {
      margin-top: -1.5rem !important;
    }
    .mt-lg-n5 {
      margin-top: -3rem !important;
    }
    .mr-lg-n1 {
      margin-right: -0.25rem !important;
    }
    .mr-lg-n2 {
      margin-right: -0.5rem !important;
    }
    .mr-lg-n3 {
      margin-right: -1rem !important;
    }
    .mr-lg-n4 {
      margin-right: -1.5rem !important;
    }
    .mr-lg-n5 {
      margin-right: -3rem !important;
    }
    .mb-lg-n1 {
      margin-bottom: -0.25rem !important;
    }
    .mb-lg-n2 {
      margin-bottom: -0.5rem !important;
    }
    .mb-lg-n3 {
      margin-bottom: -1rem !important;
    }
    .mb-lg-n4 {
      margin-bottom: -1.5rem !important;
    }
    .mb-lg-n5 {
      margin-bottom: -3rem !important;
    }
    .ml-lg-n1 {
      margin-left: -0.25rem !important;
    }
    .ml-lg-n2 {
      margin-left: -0.5rem !important;
    }
    .ml-lg-n3 {
      margin-left: -1rem !important;
    }
    .ml-lg-n4 {
      margin-left: -1.5rem !important;
    }
    .ml-lg-n5 {
      margin-left: -3rem !important;
    }
    .p-lg-0 {
      padding: 0 !important;
    }
    .p-lg-1 {
      padding: 0.25rem !important;
    }
    .p-lg-2 {
      padding: 0.5rem !important;
    }
    .p-lg-3 {
      padding: 1rem !important;
    }
    .p-lg-4 {
      padding: 1.5rem !important;
    }
    .p-lg-5 {
      padding: 3rem !important;
    }
    .px-lg-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .px-lg-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
    .px-lg-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
    .px-lg-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    .px-lg-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
    .px-lg-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
    .py-lg-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .py-lg-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
    .py-lg-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    .py-lg-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    .py-lg-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
    .py-lg-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    .pt-lg-0 {
      padding-top: 0 !important;
    }
    .pt-lg-1 {
      padding-top: 0.25rem !important;
    }
    .pt-lg-2 {
      padding-top: 0.5rem !important;
    }
    .pt-lg-3 {
      padding-top: 1rem !important;
    }
    .pt-lg-4 {
      padding-top: 1.5rem !important;
    }
    .pt-lg-5 {
      padding-top: 3rem !important;
    }
    .pr-lg-0 {
      padding-right: 0 !important;
    }
    .pr-lg-1 {
      padding-right: 0.25rem !important;
    }
    .pr-lg-2 {
      padding-right: 0.5rem !important;
    }
    .pr-lg-3 {
      padding-right: 1rem !important;
    }
    .pr-lg-4 {
      padding-right: 1.5rem !important;
    }
    .pr-lg-5 {
      padding-right: 3rem !important;
    }
    .pb-lg-0 {
      padding-bottom: 0 !important;
    }
    .pb-lg-1 {
      padding-bottom: 0.25rem !important;
    }
    .pb-lg-2 {
      padding-bottom: 0.5rem !important;
    }
    .pb-lg-3 {
      padding-bottom: 1rem !important;
    }
    .pb-lg-4 {
      padding-bottom: 1.5rem !important;
    }
    .pb-lg-5 {
      padding-bottom: 3rem !important;
    }
    .pl-lg-0 {
      padding-left: 0 !important;
    }
    .pl-lg-1 {
      padding-left: 0.25rem !important;
    }
    .pl-lg-2 {
      padding-left: 0.5rem !important;
    }
    .pl-lg-3 {
      padding-left: 1rem !important;
    }
    .pl-lg-4 {
      padding-left: 1.5rem !important;
    }
    .pl-lg-5 {
      padding-left: 3rem !important;
    }
  }
  @media (min-width: 1200px) {
    .d-xl-none {
      display: none !important;
    }
    .d-xl-inline {
      display: inline !important;
    }
    .d-xl-inline-block {
      display: inline-block !important;
    }
    .d-xl-block {
      display: block !important;
    }
    .d-xl-table {
      display: table !important;
    }
    .d-xl-table-row {
      display: table-row !important;
    }
    .d-xl-table-cell {
      display: table-cell !important;
    }
    .d-xl-flex {
      display: flex !important;
    }
    .d-xl-inline-flex {
      display: inline-flex !important;
    }
    .flex-xl-fill {
      flex: 1 1 auto !important;
    }
    .flex-xl-row {
      flex-direction: row !important;
    }
    .flex-xl-column {
      flex-direction: column !important;
    }
    .flex-xl-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex-xl-column-reverse {
      flex-direction: column-reverse !important;
    }
    .flex-xl-grow-0 {
      flex-grow: 0 !important;
    }
    .flex-xl-grow-1 {
      flex-grow: 1 !important;
    }
    .justify-content-xl-start {
      justify-content: flex-start !important;
    }
    .justify-content-xl-end {
      justify-content: flex-end !important;
    }
    .justify-content-xl-center {
      justify-content: center !important;
    }
    .justify-content-xl-between {
      justify-content: space-between !important;
    }
    .justify-content-xl-around {
      justify-content: space-around !important;
    }
    .align-items-xl-start {
      align-items: flex-start !important;
    }
    .align-items-xl-end {
      align-items: flex-end !important;
    }
    .align-items-xl-center {
      align-items: center !important;
    }
    .align-items-xl-baseline {
      align-items: baseline !important;
    }
    .align-items-xl-stretch {
      align-items: stretch !important;
    }
    .align-content-xl-start {
      align-content: flex-start !important;
    }
    .align-content-xl-end {
      align-content: flex-end !important;
    }
    .align-content-xl-center {
      align-content: center !important;
    }
    .align-content-xl-between {
      align-content: space-between !important;
    }
    .align-content-xl-around {
      align-content: space-around !important;
    }
    .align-content-xl-stretch {
      align-content: stretch !important;
    }
    .align-self-xl-auto {
      align-self: auto !important;
    }
    .align-self-xl-start {
      align-self: flex-start !important;
    }
    .align-self-xl-end {
      align-self: flex-end !important;
    }
    .align-self-xl-center {
      align-self: center !important;
    }
    .align-self-xl-baseline {
      align-self: baseline !important;
    }
    .align-self-xl-stretch {
      align-self: stretch !important;
    }
    .order-xl-first {
      order: -1 !important;
    }
    .order-xl-0 {
      order: 0 !important;
    }
    .order-xl-1 {
      order: 1 !important;
    }
    .order-xl-2 {
      order: 2 !important;
    }
    .order-xl-3 {
      order: 3 !important;
    }
    .order-xl-4 {
      order: 4 !important;
    }
    .order-xl-5 {
      order: 5 !important;
    }
    .order-xl-last {
      order: 6 !important;
    }
    .m-xl-0 {
      margin: 0 !important;
    }
    .m-xl-1 {
      margin: 0.25rem !important;
    }
    .m-xl-2 {
      margin: 0.5rem !important;
    }
    .m-xl-3 {
      margin: 1rem !important;
    }
    .m-xl-4 {
      margin: 1.5rem !important;
    }
    .m-xl-5 {
      margin: 3rem !important;
    }
    .m-xl-auto {
      margin: auto !important;
    }
    .mx-xl-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    .mx-xl-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
    .mx-xl-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
    .mx-xl-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
    .mx-xl-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
    .mx-xl-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
    .mx-xl-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    .my-xl-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    .my-xl-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
    .my-xl-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    .my-xl-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    .my-xl-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    .my-xl-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
    .my-xl-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    .mt-xl-0 {
      margin-top: 0 !important;
    }
    .mt-xl-1 {
      margin-top: 0.25rem !important;
    }
    .mt-xl-2 {
      margin-top: 0.5rem !important;
    }
    .mt-xl-3 {
      margin-top: 1rem !important;
    }
    .mt-xl-4 {
      margin-top: 1.5rem !important;
    }
    .mt-xl-5 {
      margin-top: 3rem !important;
    }
    .mt-xl-auto {
      margin-top: auto !important;
    }
    .mr-xl-0 {
      margin-right: 0 !important;
    }
    .mr-xl-1 {
      margin-right: 0.25rem !important;
    }
    .mr-xl-2 {
      margin-right: 0.5rem !important;
    }
    .mr-xl-3 {
      margin-right: 1rem !important;
    }
    .mr-xl-4 {
      margin-right: 1.5rem !important;
    }
    .mr-xl-5 {
      margin-right: 3rem !important;
    }
    .mr-xl-auto {
      margin-right: auto !important;
    }
    .mb-xl-0 {
      margin-bottom: 0 !important;
    }
    .mb-xl-1 {
      margin-bottom: 0.25rem !important;
    }
    .mb-xl-2 {
      margin-bottom: 0.5rem !important;
    }
    .mb-xl-3 {
      margin-bottom: 1rem !important;
    }
    .mb-xl-4 {
      margin-bottom: 1.5rem !important;
    }
    .mb-xl-5 {
      margin-bottom: 3rem !important;
    }
    .mb-xl-auto {
      margin-bottom: auto !important;
    }
    .ml-xl-0 {
      margin-left: 0 !important;
    }
    .ml-xl-1 {
      margin-left: 0.25rem !important;
    }
    .ml-xl-2 {
      margin-left: 0.5rem !important;
    }
    .ml-xl-3 {
      margin-left: 1rem !important;
    }
    .ml-xl-4 {
      margin-left: 1.5rem !important;
    }
    .ml-xl-5 {
      margin-left: 3rem !important;
    }
    .ml-xl-auto {
      margin-left: auto !important;
    }
    .m-xl-n1 {
      margin: -0.25rem !important;
    }
    .m-xl-n2 {
      margin: -0.5rem !important;
    }
    .m-xl-n3 {
      margin: -1rem !important;
    }
    .m-xl-n4 {
      margin: -1.5rem !important;
    }
    .m-xl-n5 {
      margin: -3rem !important;
    }
    .mx-xl-n1 {
      margin-right: -0.25rem !important;
      margin-left: -0.25rem !important;
    }
    .mx-xl-n2 {
      margin-right: -0.5rem !important;
      margin-left: -0.5rem !important;
    }
    .mx-xl-n3 {
      margin-right: -1rem !important;
      margin-left: -1rem !important;
    }
    .mx-xl-n4 {
      margin-right: -1.5rem !important;
      margin-left: -1.5rem !important;
    }
    .mx-xl-n5 {
      margin-right: -3rem !important;
      margin-left: -3rem !important;
    }
    .my-xl-n1 {
      margin-top: -0.25rem !important;
      margin-bottom: -0.25rem !important;
    }
    .my-xl-n2 {
      margin-top: -0.5rem !important;
      margin-bottom: -0.5rem !important;
    }
    .my-xl-n3 {
      margin-top: -1rem !important;
      margin-bottom: -1rem !important;
    }
    .my-xl-n4 {
      margin-top: -1.5rem !important;
      margin-bottom: -1.5rem !important;
    }
    .my-xl-n5 {
      margin-top: -3rem !important;
      margin-bottom: -3rem !important;
    }
    .mt-xl-n1 {
      margin-top: -0.25rem !important;
    }
    .mt-xl-n2 {
      margin-top: -0.5rem !important;
    }
    .mt-xl-n3 {
      margin-top: -1rem !important;
    }
    .mt-xl-n4 {
      margin-top: -1.5rem !important;
    }
    .mt-xl-n5 {
      margin-top: -3rem !important;
    }
    .mr-xl-n1 {
      margin-right: -0.25rem !important;
    }
    .mr-xl-n2 {
      margin-right: -0.5rem !important;
    }
    .mr-xl-n3 {
      margin-right: -1rem !important;
    }
    .mr-xl-n4 {
      margin-right: -1.5rem !important;
    }
    .mr-xl-n5 {
      margin-right: -3rem !important;
    }
    .mb-xl-n1 {
      margin-bottom: -0.25rem !important;
    }
    .mb-xl-n2 {
      margin-bottom: -0.5rem !important;
    }
    .mb-xl-n3 {
      margin-bottom: -1rem !important;
    }
    .mb-xl-n4 {
      margin-bottom: -1.5rem !important;
    }
    .mb-xl-n5 {
      margin-bottom: -3rem !important;
    }
    .ml-xl-n1 {
      margin-left: -0.25rem !important;
    }
    .ml-xl-n2 {
      margin-left: -0.5rem !important;
    }
    .ml-xl-n3 {
      margin-left: -1rem !important;
    }
    .ml-xl-n4 {
      margin-left: -1.5rem !important;
    }
    .ml-xl-n5 {
      margin-left: -3rem !important;
    }
    .p-xl-0 {
      padding: 0 !important;
    }
    .p-xl-1 {
      padding: 0.25rem !important;
    }
    .p-xl-2 {
      padding: 0.5rem !important;
    }
    .p-xl-3 {
      padding: 1rem !important;
    }
    .p-xl-4 {
      padding: 1.5rem !important;
    }
    .p-xl-5 {
      padding: 3rem !important;
    }
    .px-xl-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .px-xl-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
    .px-xl-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
    .px-xl-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    .px-xl-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
    .px-xl-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
    .py-xl-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .py-xl-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
    .py-xl-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    .py-xl-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    .py-xl-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
    .py-xl-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    .pt-xl-0 {
      padding-top: 0 !important;
    }
    .pt-xl-1 {
      padding-top: 0.25rem !important;
    }
    .pt-xl-2 {
      padding-top: 0.5rem !important;
    }
    .pt-xl-3 {
      padding-top: 1rem !important;
    }
    .pt-xl-4 {
      padding-top: 1.5rem !important;
    }
    .pt-xl-5 {
      padding-top: 3rem !important;
    }
    .pr-xl-0 {
      padding-right: 0 !important;
    }
    .pr-xl-1 {
      padding-right: 0.25rem !important;
    }
    .pr-xl-2 {
      padding-right: 0.5rem !important;
    }
    .pr-xl-3 {
      padding-right: 1rem !important;
    }
    .pr-xl-4 {
      padding-right: 1.5rem !important;
    }
    .pr-xl-5 {
      padding-right: 3rem !important;
    }
    .pb-xl-0 {
      padding-bottom: 0 !important;
    }
    .pb-xl-1 {
      padding-bottom: 0.25rem !important;
    }
    .pb-xl-2 {
      padding-bottom: 0.5rem !important;
    }
    .pb-xl-3 {
      padding-bottom: 1rem !important;
    }
    .pb-xl-4 {
      padding-bottom: 1.5rem !important;
    }
    .pb-xl-5 {
      padding-bottom: 3rem !important;
    }
    .pl-xl-0 {
      padding-left: 0 !important;
    }
    .pl-xl-1 {
      padding-left: 0.25rem !important;
    }
    .pl-xl-2 {
      padding-left: 0.5rem !important;
    }
    .pl-xl-3 {
      padding-left: 1rem !important;
    }
    .pl-xl-4 {
      padding-left: 1.5rem !important;
    }
    .pl-xl-5 {
      padding-left: 3rem !important;
    }
  }
  @media print {
    .d-print-none {
      display: none !important;
    }
    .d-print-inline {
      display: inline !important;
    }
    .d-print-inline-block {
      display: inline-block !important;
    }
    .d-print-block {
      display: block !important;
    }
    .d-print-table {
      display: table !important;
    }
    .d-print-table-row {
      display: table-row !important;
    }
    .d-print-table-cell {
      display: table-cell !important;
    }
    .d-print-flex {
      display: flex !important;
    }
    .d-print-inline-flex {
      display: inline-flex !important;
    }
  }
}

/* Assets/css/themes/density.css */
@layer themes {
  :root {
    --font-density-scale: 1;
    --spacing-density-scale: 1;
  }
  html[data-density=compact] {
    --font-density-scale: 0.875;
    --spacing-density-scale: 0.9;
  }
}

/* Assets/css/themes/light.css */
@layer themes {
  @layer themes {
  }
}

/* Assets/js/vendor/notyf/notyf.min.css */
@layer vendor {
  @-webkit-keyframes notyf-fadeinup {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes notyf-fadeinup {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @-webkit-keyframes notyf-fadeinleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes notyf-fadeinleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @-webkit-keyframes notyf-fadeoutright {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(25%);
    }
  }
  @keyframes notyf-fadeoutright {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(25%);
    }
  }
  @-webkit-keyframes notyf-fadeoutdown {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(25%);
    }
  }
  @keyframes notyf-fadeoutdown {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(25%);
    }
  }
  @-webkit-keyframes ripple {
    0% {
      transform: scale(0) translateY(-45%) translateX(13%);
    }
    to {
      transform: scale(1) translateY(-45%) translateX(13%);
    }
  }
  @keyframes ripple {
    0% {
      transform: scale(0) translateY(-45%) translateX(13%);
    }
    to {
      transform: scale(1) translateY(-45%) translateX(13%);
    }
  }
  .notyf {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    box-sizing: border-box;
    padding: 20px;
  }
  .notyf__icon--error,
  .notyf__icon--success {
    height: 21px;
    width: 21px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative;
  }
  .notyf__icon--error:after,
  .notyf__icon--error:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
    left: 9px;
    height: 12px;
    top: 5px;
  }
  .notyf__icon--error:after {
    transform: rotate(-45deg);
  }
  .notyf__icon--error:before {
    transform: rotate(45deg);
  }
  .notyf__icon--success:after,
  .notyf__icon--success:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
  }
  .notyf__icon--success:after {
    height: 6px;
    transform: rotate(-45deg);
    top: 9px;
    left: 6px;
  }
  .notyf__icon--success:before {
    height: 11px;
    transform: rotate(45deg);
    top: 5px;
    left: 10px;
  }
  .notyf__toast {
    display: block;
    overflow: hidden;
    pointer-events: auto;
    -webkit-animation: notyf-fadeinup .3s ease-in forwards;
    animation: notyf-fadeinup .3s ease-in forwards;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .25);
    position: relative;
    padding: 0 15px;
    border-radius: 2px;
    max-width: 300px;
    transform: translateY(25%);
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .notyf__toast--disappear {
    transform: translateY(0);
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
  }
  .notyf__toast--disappear .notyf__icon,
  .notyf__toast--disappear .notyf__message {
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    opacity: 1;
    transform: translateY(0);
  }
  .notyf__toast--disappear .notyf__dismiss {
    -webkit-animation: notyf-fadeoutright .3s forwards;
    animation: notyf-fadeoutright .3s forwards;
    opacity: 1;
    transform: translateX(0);
  }
  .notyf__toast--disappear .notyf__message {
    -webkit-animation-delay: .05s;
    animation-delay: .05s;
  }
  .notyf__toast--upper {
    margin-bottom: 20px;
  }
  .notyf__toast--lower {
    margin-top: 20px;
  }
  .notyf__toast--dismissible .notyf__wrapper {
    padding-right: 30px;
  }
  .notyf__ripple {
    height: 400px;
    width: 400px;
    position: absolute;
    transform-origin: bottom right;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0) translateY(-51%) translateX(13%);
    z-index: 5;
    -webkit-animation: ripple .4s ease-out forwards;
    animation: ripple .4s ease-out forwards;
  }
  .notyf__wrapper {
    display: flex;
    align-items: center;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-right: 15px;
    border-radius: 3px;
    position: relative;
    z-index: 10;
  }
  .notyf__icon {
    width: 22px;
    text-align: center;
    font-size: 1.3em;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    margin-right: 13px;
  }
  .notyf__dismiss {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 26px;
    margin-right: -15px;
    -webkit-animation: notyf-fadeinleft .3s forwards;
    animation: notyf-fadeinleft .3s forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
    opacity: 0;
  }
  .notyf__dismiss-btn {
    background-color: rgba(0, 0, 0, .25);
    border: none;
    cursor: pointer;
    transition: opacity .2s ease, background-color .2s ease;
    outline: none;
    opacity: .35;
    height: 100%;
    width: 100%;
  }
  .notyf__dismiss-btn:after,
  .notyf__dismiss-btn:before {
    content: "";
    background: #fff;
    height: 12px;
    width: 2px;
    border-radius: 3px;
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 5px);
  }
  .notyf__dismiss-btn:after {
    transform: rotate(-45deg);
  }
  .notyf__dismiss-btn:before {
    transform: rotate(45deg);
  }
  .notyf__dismiss-btn:hover {
    opacity: .7;
    background-color: rgba(0, 0, 0, .15);
  }
  .notyf__dismiss-btn:active {
    opacity: .8;
  }
  .notyf__message {
    vertical-align: middle;
    position: relative;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    line-height: 1.5em;
  }
  @media only screen and (max-width:480px) {
    .notyf {
      padding: 0;
    }
    .notyf__ripple {
      height: 600px;
      width: 600px;
      -webkit-animation-duration: .5s;
      animation-duration: .5s;
    }
    .notyf__toast {
      max-width: none;
      border-radius: 0;
      box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, .13);
      width: 100%;
    }
    .notyf__dismiss {
      width: 56px;
    }
  }
}

/* Assets/js/vendor/videojs/video-js.css */
@layer vendor {
  .vjs-svg-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    fill: currentColor;
    height: 1.8em;
    width: 1.8em;
  }
  .vjs-svg-icon:before {
    content: none !important;
  }
  .vjs-svg-icon:hover,
  .vjs-control:focus .vjs-svg-icon {
    filter: drop-shadow(0 0 0.25em #fff);
  }
  .vjs-modal-dialog .vjs-modal-dialog-content,
  .video-js .vjs-modal-dialog,
  .vjs-button > .vjs-icon-placeholder:before,
  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .vjs-button > .vjs-icon-placeholder:before,
  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    text-align: center;
  }
  @font-face {
    font-family: VideoJS;
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABTsAAsAAAAAIpAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV32Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADtIAABckI4l972hlYWQAABFkAAAAKwAAADYsvIjpaGhlYQAAEZAAAAAdAAAAJA+RCL1obXR4AAARsAAAABcAAAC8Q2YAAGxvY2EAABHIAAAAYAAAAGB7CIGGbWF4cAAAEigAAAAfAAAAIAFAAI9uYW1lAAASSAAAASUAAAIK1cf1oHBvc3QAABNwAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7yDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADaGCyYAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1hU17U+a5/HMA4iA3NmVBDmoQwP5TFnHlFeA4gYiUFRQINoSCBAyK3G2yi+0aipYtFcHYo2xsb4NiY3+VrNxSaX5uvt495ozNdoYoxmem2/L8HGpLc+InB279pnhlGr5mvL4eyz99nrrL32eu1/DQcc/okdYgdHOA6MQKp4r9gx0EcMHMezOalVasW5BM7NcXoSb9fFgE6KtSSBxWz1FYDPG+vMBGcKb9cebu2VS5s2aaTkCvRSf6C7Y+Ppibm5E09v7IDs2/3uZQtbD0zIyppwoHXh/93ukmyYgdePNRp65p5v+3v/9otQl2O7wP34cT88p8Md2YxpYLQZoRcy6FlSBRnwnGAe6BPMSCZo+7NJVqS0cE4uHendzhSnbPH6TDqL1+Nme5LZXkCHnGyoH0kne30WH+gswhm3q+pt/mTas9NLS64GnjmSlTPw0wVQT/ewRaBgxtydy3cuUB9/6SW+vb5yRvr+t0eOfPKJZ/9t3+4tL7xj32Xd3thCxi+ge6ifdsAN+l5+wi5HQ/cCoeull1AszS7CUfEcJzK7sKWJAdJhCd0sPM4+EY7QDm5ov08hXRQXE5bf6PV5Q5+IjW7X7Nku92Ask4l2hCRRD6TPqISiCJeQna3SCFwrhrNzXHzo4yFevBwxpzxk8WCIIfkvVEKVy32SbT8n68gzgaslpaiO2zIGIyuSb7RNf9HSuN26y/7OC1tgEmpiyA6aD4qcgTOiLThwGG0eB694FI8NHLLN6OBlRVaMxNAFS4JdXUG6mW8PwpKuYLCLXKGbu8iwYNdgO06Sn3Th+/vyZAxs8Ro30DjHe9gy8Fywi24OMm7Qyzh3MTZVOMYhLBnoC+J79lpTUyQmorjhnMwlcQ5uPEYGpDjsOkkH49BjQLQBqs3jFtFdJNlksYmoQFDArLh8Xh+Qd6Ghcsb6FUuehDi+U/lqD71K/qiegeV1imcwjl7ExwiSrf4BZyCujV6cVcFo6VX+G9IcPyFjJnUufbU/jzrL1X99as36reXl8K32nFaOr+E8jWJEcJ55DpMVfSMe95/AJaOsGBH2GJCNpiRQbK4C8BjdmQA22QY2j03Em13i2YHqtNLU1NI04Yj2HJgA6fQc6VPNpA/D+Ryks554NnVy2mB72uRUfPLsqR4N0LOBQKArwJYO+5W2fgZX8oC1HR6HjNaQTVIG2FPwnTcXXGZZfNB7TE6pTKZUwaw91XWLAoFFGcnB5PHjsckgBjbWutrL+0h5Y1xw3DRGDumsnXb3MJwXrJIN5U7m0rgJ3yG5w4he5ckFG4pmNEkOm0/xOO4r4yL87wqtQM+hiJIVp+6iG2wPBKD35ElGkDx+UfC2v1mFG1o+M3AjNFty8biKMXwzyxnZLds8wYD2BxmCPHAldPOeLsy/0BugftYhVYFAhO8SqQ0j3oK7dHJZnI/jxmUS4onlxskSF8thmvNZjIrRZwEPxr0lBuLRuz3oy/FOHCsxwOPYh2M+e9u3J5pgPYz9gp6G7C9m0A11F9ddqKMfV+4sbq45/YspOysXvT+3pdFdYNg2fHbW8Dz301MqDVuGrz0Fuh0YMW8mddrpqzST7rV9BcvqPoNvadRndWp0p8HvbiqrFj5yFQ/vNFSXDpxpLEFWp+DcrF3FT1afWshFcmCfeAMjEvO65i0Y6XijQfSRPWx3TV/Df7Km3E1l+kLt56s/rwVzuRusNMhudznkwdLaS+QNdeal2jDPP4l9qHc98vTYZOSkxzD+njBWVWjFPKgipx6DkWvXQiW8OYcewVHE5yukinDMcfGgc0opDltYKDxIGBedkzc6jSfE7tlvESCDFUw0Hx0opS+U0lHCxNottbNWSxX9zZVvEhKWUSyBpaXwBc2a98M6UqPeXAs/GDon8Ax7hsthO8cM5HU7Ad0UvRR9lHmtyQKZ4MAe814X5h9MSUkQmhf96eVJ6p90OjIiqSIjvykvr2l5U55O/fPQKD+jIomYpNyGJQ25uQ2kIikRfAmuBHCPsWqkSDEqgZ5KDI2sifS/R43MbZg0idFHbCPNxXxZws1ACVE6hAhOdJwRkJLFBLPZpRGYJ50pko6XzMkgmSx40ljik6AQcKhFnLcQE6rF7PXFe1Ocoj0T3AXgSgJTDIhHRfHlYZKuSzc6uievOJGXY+i5GJkkTp7UM3y0LqATDbtFcbdBxO7o4T25JYlEjoH0uynUh8rapkxp62QN70svSF+hT4gGPlovlmcm/ComLi7mV4kTykV9NFWjE/QrwgQ4uIcAP0rQF4VZYRP2o3PhHHzfPMJj9Ir+uzKUlrH49ntT18AVvj1sc3YGjUT/Mt2Dxawa8ArcA7bCQIpvfwAYu22vEG/No/5RvPdA7g+AelLrPwzy+LtkLPhnpIxH14m4EYq8eeMHbPEPNm6G7Nv9B4jcFPZ8bJj0SEjP3MPgQdKTqqEoy2v6G32P/Y6dxOv04AxnoAeq+GILvUavtYCBXm+BaIhuodcfrN5B/V2EYMCPh+SxavjGyPwV0x4CJgUPGT0mQaODGBACIJZGsMXwAD0LGXx7l3CdAcKMIKI+f5CepWeD0BvyU/GcdBxPF8SwejC6LGZmAURFdsSWKR5HyHld2kbdIZO1Ixx+bnnzU7n5+blPNV9jnUDWhP2tC68tbN3PVIldsQPxSAcSpjOav7Q05uXn5zW2LLvDXn9B6syscPy9iDLEMmSrJz6nYuWMipukjM0AH8JkGS+XFyMRkzSCH7KD/hwm172SAyZYumHlefr5AddrtA0O0TnwaVZxcRY9Bfukn9Gf05N1r9DV9MoBsJ1f+ZrqUvtPHizJAntWybv7hmqLt6QLuK6ZS9Fqi1jO5rDoWPZXXII5Tgajg53cIXCjDCGIcYrRIY2n6+mXOa/W0bdhau3ryiEYe2FV/5oeaIYK/5w5frCyll6/cYO8DiNhw6t1MBWmznt91QX62UF1N7l0eHBZTRGpKaqpKVIPF9UcIzmReud9TSY75+K899GHbBu6wjoR7RKKZVYiYxSPf5/2wJT5e3NAhmUbVn5KLx1Ujg0+BGvpAIh0DezInTkzF37KVocxrKU3r1+XLtAe2lO3l66kfQfB/unKY+q8N375Ru8bc4pJXfEcESU95q+p8ZNZRTWH1d9FzvUdYXk5rLkcdkEisoKKVHQW/b3GEx6tPaYcoJfOr9wAbSBnv1IHpep0OExr4LPMkpJM+j7sly7UHkOzXjoAZljHCGiyegtNlwljM0v+c19ET9Pvst09a2Mtgcf5/ZSzYO5h1156+eyydfAsxGa9XAuF6vzjh6CssLq6ECysperXX0sX5h5ZdpZe3guxsGIPEtHk/aqXX1hVqP5HYVVVISkrrNqvXorIc+5Ou91Hnr/LcD2afi6eX7UBloOcs7cOpqgGaNfs1g7bNbs9z6wASaylN69d0/TFTIz6Ws8+oGV3mE2612wRTHKcVUbhjKadebloMc+dyXgMVtVK6BwMB/+mVW09igdRBWaRtNQX59d/VD//xdQ0TCiYNj1KT9sq6Wdu5WTbqk3qDXyDaLa1fv621LS01G3z61sD6lH8lAxDLicV921s6Bf92JOYvzNYCL1khbqBXEFUzC521N5NyzNaQIWhjyFyDoBIVrAjmv2UEaLlI+c6zw1jmVIPLLLZZUTj6GxGHW+mq1tgHXR2D85p4Q934+jLbtjVLcyCdS10NVzpHqxp4Q/hK7WopY/NRGx9HGsPGdFjOjcpjBnGYMVqY/4eqT5khWEHWUup2A/pTw7pdWgsWft7ETUERL96nRg0HNFPmCYba6pylECaExX89A9WLUOVB4oKLu/o1oqSYHCgLzBUlAz8hNFDRpeSU1XT+LRmDUgPaKbYdHDn9suF/tu13nHJij0N97LfS0QmqONuyONk7zvUI6Qa0pF9f2+oABL92AT6e0U//z9YqAiWtJLU1JK0gS+1aacwamiNqK067u9ZQ8f1d4qLodMzz3uL89Z68V/Hnr++hXWUuHgw8dfi972PeTyPefu3aNNucemQ74qFuIaJnVkOu4Q+yjuwmmC1FqZpl1i4uzoPxjkpPf3Xv545tl26Rr+dOvUd+omqJzch9dOeU7f10Y64nMcKK137DccIZq2WdXtdZjbEoLSzHwiMtrjYLDxpHQW8gjMX6XFYAE2zSWVD04EGYSs9MbO6sEo20BMEAB4mpvSypsKjZ4Stgzb+c3A9/MQT2+vrBy+qvyFxLUtLlSRF/Ri2wjfZ2dus2Q8lXx4608/jnqK5OOap6NY2PSjYYnECCjiEeLJll/pbmqfeIK+ps3+MxrlEhqmTPipVP7kqlF4VhpEb6r+Q7YOJg38kJ9SHBf3NBl6+9YchfbUjb5ahLSzUM3kPHmwFAsZ5rpai0S7E5xWzZ1j+fW7zsUWP2g5NXTw52ySCTrgG0+lbw60l2Y/CB185CoA8NK+tbRKxfjy6pm5hzQRRR+cMqv1Jbiw6STivtEvt3DRcy0QEh92JlUGo2PG4tSKHl00YD6xc8CK+YPYyy3io2lN8BcSjKRzrIV6ypOAobqxViJPaT9M9Hy5szY33mp7OX/Zu89L/7Ww5vqY2Y8b0pKgoiUhG5cPDPzq8qTV/WkzUOIvXVVA96kmjcBrr3HrYC/Wn+fYP6Z7T1rqy3zknbvqma/FvVk96fNXGkuaXrdHW5JGSxZT/2I/O73v+yNWafMdzc5NdxYurHs6h86e01sLKLz9EBrg+x36rxAaED7hRnAMx7Vzu+9wabh3zG8XLQjx0ablUJzmxdErxYT3kzQSd0SSafVqF5PXgpp0OyYJ1EyNHpGUZmvK575ySzd85JSqF7IBzSAbMM04+MbE58xF3/njXOGecSaermlw2y9PsSQdytLJVr8t+wg+rR8cZYoeNxVIzNdk3Bngi8U5LAlgTFoQnzJCa5EsCgYhCaGL+qPj7TdhG31p9tej3R04N//PXxNwJvyUqwaJqRPJY98TJ5TPndmflRAkAhBfe46sfKW5wizSge08Xb7Ca/GUVs55trngkKkrUS2WPzKttaaqq+idmahugkY+W6fN0I6i3gPt/x88U4wAAeJxjYGRgYADiGU9YXsXz23xl4GZnAIFH7fO+IdMc/WBxDgYmEAUASbMKwAB4nGNgZGBgZwABjj4Ghv//OfoZGBlQgT4ARicDZAAAAHicY2BgYGAfxJijD8Fmu4EqBwCSpgKpAAAAAAAADgBoAH4AzADgAQIBQgFsAZgB7gIuAooC0AL8A2IDjAOoA+AEMASwBNoFCAVaBcAGCAYuBnAGrAb2B04HigfSCCoIcAiGCJwIyAkkCVYJiAmsCfIKIApWCsQLknicY2BkYGDQZ2hmYGcAASYg5gJCBob/YD4DABqrAdAAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2ReVPbMBDF/ULi2EkDBFqO3gdHLxUzDB9IkdexBllydRD49ihO3Ckz7B/a31utZnafkkGyiXnyclxhgB0MMUKKMTLkmGCKV5hhF3vYxxwHOMRrvMERjnGCU7zFO7zHB3zEJ3zGF3zFN5zhHBe4xHf8wE/8wm8w/MEVimTYKv44XR9MSCsUjVoeHE3vjQoNsSZ4mmxZmVWPjSz7jlou6/0qKOWEJdKMtCe793/hQfqxa6XWZHMXFl56RS4TvPXSaDeoy0zUUZB109KstDK8lHo5q6Qi1hcOnqkImubPS6aqRq7mlnaEWabub4iYblba3SRmgldS0+FWdhNtt04F14JUaqkl7tcpOpJtErvNt3Bd9HRT5JWxK25Ldjvp6br4hzfFiIdSmlzTg2fSUzNrLd1LE1ynxq4OVaVoKLjzJ60UPtj1RKzHzsbjly6inVnFBS2MucviPncU7Rr7lfTxRepDs1A2j3ZHRc7PuzFYSfE3ZOd4kjwBy227hA==) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-play,
  .video-js .vjs-play-control .vjs-icon-placeholder,
  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-play:before,
  .video-js .vjs-play-control .vjs-icon-placeholder:before,
  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\f101";
  }
  .vjs-icon-play-circle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-play-circle:before {
    content: "\f102";
  }
  .vjs-icon-pause,
  .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-pause:before,
  .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
    content: "\f103";
  }
  .vjs-icon-volume-mute,
  .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-volume-mute:before,
  .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
    content: "\f104";
  }
  .vjs-icon-volume-low,
  .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-volume-low:before,
  .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
    content: "\f105";
  }
  .vjs-icon-volume-mid,
  .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-volume-mid:before,
  .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
    content: "\f106";
  }
  .vjs-icon-volume-high,
  .video-js .vjs-mute-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-volume-high:before,
  .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: "\f107";
  }
  .vjs-icon-fullscreen-enter,
  .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-fullscreen-enter:before,
  .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f108";
  }
  .vjs-icon-fullscreen-exit,
  .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-fullscreen-exit:before,
  .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f109";
  }
  .vjs-icon-spinner {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-spinner:before {
    content: "\f10a";
  }
  .vjs-icon-subtitles,
  .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js .vjs-subtitles-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-subtitles:before,
  .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
    content: "\f10b";
  }
  .vjs-icon-captions,
  .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,
  .video-js .vjs-captions-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-captions:before,
  .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,
  .video-js .vjs-captions-button .vjs-icon-placeholder:before {
    content: "\f10c";
  }
  .vjs-icon-hd {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-hd:before {
    content: "\f10d";
  }
  .vjs-icon-chapters,
  .video-js .vjs-chapters-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-chapters:before,
  .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
    content: "\f10e";
  }
  .vjs-icon-downloading {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-downloading:before {
    content: "\f10f";
  }
  .vjs-icon-file-download {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-file-download:before {
    content: "\f110";
  }
  .vjs-icon-file-download-done {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-file-download-done:before {
    content: "\f111";
  }
  .vjs-icon-file-download-off {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-file-download-off:before {
    content: "\f112";
  }
  .vjs-icon-share {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-share:before {
    content: "\f113";
  }
  .vjs-icon-cog {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-cog:before {
    content: "\f114";
  }
  .vjs-icon-square {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-square:before {
    content: "\f115";
  }
  .vjs-icon-circle,
  .vjs-seek-to-live-control .vjs-icon-placeholder,
  .video-js .vjs-volume-level,
  .video-js .vjs-play-progress {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-circle:before,
  .vjs-seek-to-live-control .vjs-icon-placeholder:before,
  .video-js .vjs-volume-level:before,
  .video-js .vjs-play-progress:before {
    content: "\f116";
  }
  .vjs-icon-circle-outline {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-circle-outline:before {
    content: "\f117";
  }
  .vjs-icon-circle-inner-circle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-circle-inner-circle:before {
    content: "\f118";
  }
  .vjs-icon-cancel,
  .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-cancel:before,
  .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
    content: "\f119";
  }
  .vjs-icon-repeat {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-repeat:before {
    content: "\f11a";
  }
  .vjs-icon-replay,
  .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-replay:before,
  .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
    content: "\f11b";
  }
  .vjs-icon-replay-5,
  .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-replay-5:before,
  .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
    content: "\f11c";
  }
  .vjs-icon-replay-10,
  .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-replay-10:before,
  .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
    content: "\f11d";
  }
  .vjs-icon-replay-30,
  .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-replay-30:before,
  .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
    content: "\f11e";
  }
  .vjs-icon-forward-5,
  .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-forward-5:before,
  .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
    content: "\f11f";
  }
  .vjs-icon-forward-10,
  .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-forward-10:before,
  .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
    content: "\f120";
  }
  .vjs-icon-forward-30,
  .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-forward-30:before,
  .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
    content: "\f121";
  }
  .vjs-icon-audio,
  .video-js .vjs-audio-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-audio:before,
  .video-js .vjs-audio-button .vjs-icon-placeholder:before {
    content: "\f122";
  }
  .vjs-icon-next-item {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-next-item:before {
    content: "\f123";
  }
  .vjs-icon-previous-item {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-previous-item:before {
    content: "\f124";
  }
  .vjs-icon-shuffle {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-shuffle:before {
    content: "\f125";
  }
  .vjs-icon-cast {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-cast:before {
    content: "\f126";
  }
  .vjs-icon-picture-in-picture-enter,
  .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-picture-in-picture-enter:before,
  .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "\f127";
  }
  .vjs-icon-picture-in-picture-exit,
  .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-picture-in-picture-exit:before,
  .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "\f128";
  }
  .vjs-icon-facebook {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-facebook:before {
    content: "\f129";
  }
  .vjs-icon-linkedin {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-linkedin:before {
    content: "\f12a";
  }
  .vjs-icon-twitter {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-twitter:before {
    content: "\f12b";
  }
  .vjs-icon-tumblr {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-tumblr:before {
    content: "\f12c";
  }
  .vjs-icon-pinterest {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-pinterest:before {
    content: "\f12d";
  }
  .vjs-icon-audio-description,
  .video-js .vjs-descriptions-button .vjs-icon-placeholder {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
  }
  .vjs-icon-audio-description:before,
  .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
    content: "\f12e";
  }
  .video-js {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    position: relative;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    font-family:
      Arial,
      Helvetica,
      sans-serif;
    word-break: initial;
  }
  .video-js:-moz-full-screen {
    position: absolute;
  }
  .video-js:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
  }
  .video-js[tabindex="-1"] {
    outline: none;
  }
  .video-js *,
  .video-js *:before,
  .video-js *:after {
    box-sizing: inherit;
  }
  .video-js ul {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    list-style-position: outside;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .video-js.vjs-fluid,
  .video-js.vjs-16-9,
  .video-js.vjs-4-3,
  .video-js.vjs-9-16,
  .video-js.vjs-1-1 {
    width: 100%;
    max-width: 100%;
  }
  .video-js.vjs-fluid:not(.vjs-audio-only-mode),
  .video-js.vjs-16-9:not(.vjs-audio-only-mode),
  .video-js.vjs-4-3:not(.vjs-audio-only-mode),
  .video-js.vjs-9-16:not(.vjs-audio-only-mode),
  .video-js.vjs-1-1:not(.vjs-audio-only-mode) {
    height: 0;
  }
  .video-js.vjs-16-9:not(.vjs-audio-only-mode) {
    padding-top: 56.25%;
  }
  .video-js.vjs-4-3:not(.vjs-audio-only-mode) {
    padding-top: 75%;
  }
  .video-js.vjs-9-16:not(.vjs-audio-only-mode) {
    padding-top: 177.7777777778%;
  }
  .video-js.vjs-1-1:not(.vjs-audio-only-mode) {
    padding-top: 100%;
  }
  .video-js.vjs-fill:not(.vjs-audio-only-mode) {
    width: 100%;
    height: 100%;
  }
  .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .video-js.vjs-audio-only-mode .vjs-tech {
    display: none;
  }
  body.vjs-full-window,
  body.vjs-pip-window {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  .vjs-full-window .video-js.vjs-fullscreen,
  body.vjs-pip-window .video-js {
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
  body.vjs-pip-window .video-js {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    display: block;
  }
  .video-js.vjs-fullscreen.vjs-user-inactive {
    cursor: none;
  }
  .vjs-pip-container .vjs-pip-text {
    position: absolute;
    bottom: 10%;
    font-size: 2em;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.5em;
    text-align: center;
    width: 100%;
  }
  .vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
  .vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
  .vjs-layout-small.vjs-pip-container .vjs-pip-text {
    bottom: 0;
    font-size: 1.4em;
  }
  .vjs-hidden {
    display: none !important;
  }
  .vjs-disabled {
    opacity: 0.5;
    cursor: default;
  }
  .video-js .vjs-offscreen {
    height: 1px;
    left: -9999px;
    position: absolute;
    top: 0;
    width: 1px;
  }
  .vjs-lock-showing {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .vjs-no-js {
    padding: 20px;
    color: #fff;
    background-color: #000;
    font-size: 18px;
    font-family:
      Arial,
      Helvetica,
      sans-serif;
    text-align: center;
    width: 300px;
    height: 150px;
    margin: 0px auto;
  }
  .vjs-no-js a,
  .vjs-no-js a:visited {
    color: #66A8CC;
  }
  .video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.63332em;
    width: 3em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin-top: -0.81666em;
    margin-left: -1.5em;
    cursor: pointer;
    opacity: 1;
    border: 0.06666em solid #fff;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
    border-radius: 0.3em;
    transition: all 0.4s;
  }
  .vjs-big-play-button .vjs-svg-icon {
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1;
    transform: translate(-50%, -50%);
  }
  .video-js:hover .vjs-big-play-button,
  .video-js .vjs-big-play-button:focus {
    border-color: #fff;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
    transition: all 0s;
  }
  .vjs-controls-disabled .vjs-big-play-button,
  .vjs-has-started .vjs-big-play-button,
  .vjs-using-native-controls .vjs-big-play-button,
  .vjs-error .vjs-big-play-button {
    display: none;
  }
  .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
    display: block;
  }
  .video-js button {
    background: none;
    border: none;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    transition: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .video-js.vjs-spatial-navigation-enabled .vjs-button:focus {
    outline: 0.0625em solid white;
    box-shadow: none;
  }
  .vjs-control .vjs-button {
    width: 100%;
    height: 100%;
  }
  .video-js .vjs-control.vjs-close-button {
    cursor: pointer;
    height: 3em;
    position: absolute;
    right: 0;
    top: 0.5em;
    z-index: 2;
  }
  .video-js .vjs-modal-dialog {
    background: rgba(0, 0, 0, 0.8);
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.8),
        rgba(255, 255, 255, 0));
    overflow: auto;
  }
  .video-js .vjs-modal-dialog > * {
    box-sizing: border-box;
  }
  .vjs-modal-dialog .vjs-modal-dialog-content {
    font-size: 1.2em;
    line-height: 1.5;
    padding: 20px 24px;
    z-index: 1;
  }
  .vjs-menu-button {
    cursor: pointer;
  }
  .vjs-menu-button.vjs-disabled {
    cursor: default;
  }
  .vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
    display: none;
  }
  .vjs-menu .vjs-menu-content {
    display: block;
    padding: 0;
    margin: 0;
    font-family:
      Arial,
      Helvetica,
      sans-serif;
    overflow: auto;
  }
  .vjs-menu .vjs-menu-content > * {
    box-sizing: border-box;
  }
  .vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
    display: none;
  }
  .vjs-menu li {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0.2em 0;
    line-height: 1.4em;
    font-size: 1.2em;
    text-align: center;
    text-transform: lowercase;
  }
  .vjs-menu li.vjs-menu-item:focus,
  .vjs-menu li.vjs-menu-item:hover,
  .js-focus-visible .vjs-menu li.vjs-menu-item:hover {
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
  }
  .vjs-menu li.vjs-selected,
  .vjs-menu li.vjs-selected:focus,
  .vjs-menu li.vjs-selected:hover,
  .js-focus-visible .vjs-menu li.vjs-selected:hover {
    background-color: #fff;
    color: #2B333F;
  }
  .vjs-menu li.vjs-selected .vjs-svg-icon,
  .vjs-menu li.vjs-selected:focus .vjs-svg-icon,
  .vjs-menu li.vjs-selected:hover .vjs-svg-icon,
  .js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
    fill: #000000;
  }
  .video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
  .js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
    background: none;
  }
  .vjs-menu li.vjs-menu-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 2em;
    padding: 0;
    margin: 0 0 0.3em 0;
    font-weight: bold;
    cursor: default;
  }
  .vjs-menu-button-popup .vjs-menu {
    display: none;
    position: absolute;
    bottom: 0;
    width: 10em;
    left: -3em;
    height: 0em;
    margin-bottom: 1.5em;
    border-top-color: rgba(43, 51, 63, 0.7);
  }
  .vjs-pip-window .vjs-menu-button-popup .vjs-menu {
    left: unset;
    right: 1em;
  }
  .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
    position: absolute;
    width: 100%;
    bottom: 1.5em;
    max-height: 15em;
  }
  .vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
  .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 5em;
  }
  .vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 10em;
  }
  .vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 14em;
  }
  .vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
  .vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
  .vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 25em;
  }
  .vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
  .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
    display: block;
  }
  .video-js .vjs-menu-button-inline {
    transition: all 0.4s;
    overflow: hidden;
  }
  .video-js .vjs-menu-button-inline:before {
    width: 2.222222222em;
  }
  .video-js .vjs-menu-button-inline:hover,
  .video-js .vjs-menu-button-inline:focus,
  .video-js .vjs-menu-button-inline.vjs-slider-active {
    width: 12em;
  }
  .vjs-menu-button-inline .vjs-menu {
    opacity: 0;
    height: 100%;
    width: auto;
    position: absolute;
    left: 4em;
    top: 0;
    padding: 0;
    margin: 0;
    transition: all 0.4s;
  }
  .vjs-menu-button-inline:hover .vjs-menu,
  .vjs-menu-button-inline:focus .vjs-menu,
  .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
    display: block;
    opacity: 1;
  }
  .vjs-menu-button-inline .vjs-menu-content {
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  .video-js .vjs-control-bar {
    display: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
  }
  .video-js.vjs-spatial-navigation-enabled .vjs-control-bar {
    gap: 1px;
  }
  .video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
    display: flex !important;
  }
  .vjs-has-started .vjs-control-bar,
  .vjs-audio-only-mode .vjs-control-bar {
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: visibility 0.1s, opacity 0.1s;
  }
  .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: visibility 1s, opacity 1s;
  }
  .vjs-controls-disabled .vjs-control-bar,
  .vjs-using-native-controls .vjs-control-bar,
  .vjs-error .vjs-control-bar {
    display: none !important;
  }
  .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
  .vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .video-js .vjs-control {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 4em;
    flex: none;
  }
  .video-js .vjs-control.vjs-visible-text {
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
  }
  .vjs-button > .vjs-icon-placeholder:before {
    font-size: 1.8em;
    line-height: 1.67;
  }
  .vjs-button > .vjs-icon-placeholder {
    display: block;
  }
  .vjs-button > .vjs-svg-icon {
    display: inline-block;
  }
  .video-js .vjs-control:focus:before,
  .video-js .vjs-control:hover:before,
  .video-js .vjs-control:focus {
    text-shadow: 0em 0em 1em white;
  }
  .video-js *:not(.vjs-visible-text) > .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .video-js .vjs-custom-control-spacer {
    display: none;
  }
  .video-js .vjs-progress-control {
    cursor: pointer;
    flex: auto;
    display: flex;
    align-items: center;
    min-width: 4em;
    touch-action: none;
  }
  .video-js .vjs-progress-control.disabled {
    cursor: default;
  }
  .vjs-live .vjs-progress-control {
    display: none;
  }
  .vjs-liveui .vjs-progress-control {
    display: flex;
    align-items: center;
  }
  .video-js .vjs-progress-holder {
    flex: auto;
    transition: all 0.2s;
    height: 0.3em;
  }
  .video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0 10px;
  }
  .video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.6666666667em;
  }
  .video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
    font-size: 1em;
  }
  .video-js .vjs-progress-holder .vjs-play-progress,
  .video-js .vjs-progress-holder .vjs-load-progress,
  .video-js .vjs-progress-holder .vjs-load-progress div {
    position: absolute;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 0;
  }
  .video-js .vjs-play-progress {
    background-color: #fff;
  }
  .video-js .vjs-play-progress:before {
    font-size: 0.9em;
    position: absolute;
    right: -0.5em;
    line-height: 0.35em;
    z-index: 1;
  }
  .vjs-svg-icons-enabled .vjs-play-progress:before {
    content: none !important;
  }
  .vjs-play-progress .vjs-svg-icon {
    position: absolute;
    top: -0.35em;
    right: -0.4em;
    width: 0.9em;
    height: 0.9em;
    pointer-events: none;
    line-height: 0.15em;
    z-index: 1;
  }
  .video-js .vjs-load-progress {
    background: rgba(115, 133, 159, 0.5);
  }
  .video-js .vjs-load-progress div {
    background: rgba(115, 133, 159, 0.75);
  }
  .video-js .vjs-time-tooltip {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    color: #000;
    float: right;
    font-family:
      Arial,
      Helvetica,
      sans-serif;
    font-size: 1em;
    padding: 6px 8px 8px 8px;
    pointer-events: none;
    position: absolute;
    top: -3.4em;
    visibility: hidden;
    z-index: 1;
  }
  .video-js .vjs-progress-holder:focus .vjs-time-tooltip {
    display: none;
  }
  .video-js .vjs-progress-control:hover .vjs-time-tooltip,
  .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
    display: block;
    font-size: 0.6em;
    visibility: visible;
  }
  .video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
    font-size: 1em;
  }
  .video-js .vjs-progress-control .vjs-mouse-display {
    display: none;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #000;
    z-index: 1;
  }
  .video-js .vjs-progress-control:hover .vjs-mouse-display {
    display: block;
  }
  .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  }
  .vjs-mouse-display .vjs-time-tooltip {
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .video-js .vjs-slider {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 0.45em 0 0.45em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
  }
  .video-js .vjs-slider.disabled {
    cursor: default;
  }
  .video-js .vjs-slider:focus {
    text-shadow: 0em 0em 1em white;
    box-shadow: 0 0 1em #fff;
  }
  .video-js.vjs-spatial-navigation-enabled .vjs-slider:focus {
    outline: 0.0625em solid white;
  }
  .video-js .vjs-mute-control {
    cursor: pointer;
    flex: none;
  }
  .video-js .vjs-volume-control {
    cursor: pointer;
    margin-right: 1em;
    display: flex;
  }
  .video-js .vjs-volume-control.vjs-volume-horizontal {
    width: 5em;
  }
  .video-js .vjs-volume-panel .vjs-volume-control {
    visibility: visible;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin-left: -1px;
  }
  .video-js .vjs-volume-panel {
    transition: width 1s;
  }
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
  .video-js .vjs-volume-panel:active .vjs-volume-control,
  .video-js .vjs-volume-panel:focus .vjs-volume-control,
  .video-js .vjs-volume-panel .vjs-volume-control:active,
  .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control,
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
    visibility: visible;
    opacity: 1;
    position: relative;
    transition:
      visibility 0.1s,
      opacity 0.1s,
      height 0.1s,
      width 0.1s,
      left 0s,
      top 0s;
  }
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
  .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
  .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
  .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
  .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal,
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
    width: 5em;
    height: 3em;
    margin-right: 0;
  }
  .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,
  .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
  .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
  .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
  .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical,
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
    left: -3.5em;
    transition: left 0s;
  }
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
    width: 10em;
    transition: width 0.1s;
  }
  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
    width: 4em;
  }
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
    height: 8em;
    width: 3em;
    left: -3000em;
    transition:
      visibility 1s,
      opacity 1s,
      height 1s 1s,
      width 1s 1s,
      left 1s 1s,
      top 1s 1s;
  }
  .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
    transition:
      visibility 1s,
      opacity 1s,
      height 1s 1s,
      width 1s,
      left 1s 1s,
      top 1s 1s;
  }
  .video-js .vjs-volume-panel {
    display: flex;
  }
  .video-js .vjs-volume-bar {
    margin: 1.35em 0.45em;
  }
  .vjs-volume-bar.vjs-slider-horizontal {
    width: 5em;
    height: 0.3em;
  }
  .vjs-volume-bar.vjs-slider-vertical {
    width: 0.3em;
    height: 5em;
    margin: 1.35em auto;
  }
  .video-js .vjs-volume-level {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
  }
  .video-js .vjs-volume-level:before {
    position: absolute;
    font-size: 0.9em;
    z-index: 1;
  }
  .vjs-slider-vertical .vjs-volume-level {
    width: 0.3em;
  }
  .vjs-slider-vertical .vjs-volume-level:before {
    top: -0.5em;
    left: -0.3em;
    z-index: 1;
  }
  .vjs-svg-icons-enabled .vjs-volume-level:before {
    content: none;
  }
  .vjs-volume-level .vjs-svg-icon {
    position: absolute;
    width: 0.9em;
    height: 0.9em;
    pointer-events: none;
    z-index: 1;
  }
  .vjs-slider-horizontal .vjs-volume-level {
    height: 0.3em;
  }
  .vjs-slider-horizontal .vjs-volume-level:before {
    line-height: 0.35em;
    right: -0.5em;
  }
  .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
    right: -0.3em;
    transform: translateY(-50%);
  }
  .vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
    top: -0.55em;
    transform: translateX(-50%);
  }
  .video-js .vjs-volume-panel.vjs-volume-panel-vertical {
    width: 4em;
  }
  .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
    height: 100%;
  }
  .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
    width: 100%;
  }
  .video-js .vjs-volume-vertical {
    width: 3em;
    height: 8em;
    bottom: 8em;
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
  }
  .video-js .vjs-volume-horizontal .vjs-menu {
    left: -2em;
  }
  .video-js .vjs-volume-tooltip {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    color: #000;
    float: right;
    font-family:
      Arial,
      Helvetica,
      sans-serif;
    font-size: 1em;
    padding: 6px 8px 8px 8px;
    pointer-events: none;
    position: absolute;
    top: -3.4em;
    visibility: hidden;
    z-index: 1;
  }
  .video-js .vjs-volume-control:hover .vjs-volume-tooltip,
  .video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
    display: block;
    font-size: 1em;
    visibility: visible;
  }
  .video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
  .video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
    left: 1em;
    top: -12px;
  }
  .video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
    font-size: 1em;
  }
  .video-js .vjs-volume-control .vjs-mouse-display {
    display: none;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    z-index: 1;
  }
  .video-js .vjs-volume-horizontal .vjs-mouse-display {
    width: 1px;
    height: 100%;
  }
  .video-js .vjs-volume-control:hover .vjs-mouse-display {
    display: block;
  }
  .video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  }
  .vjs-mouse-display .vjs-volume-tooltip {
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .vjs-poster {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
  }
  .vjs-has-started .vjs-poster,
  .vjs-using-native-controls .vjs-poster {
    display: none;
  }
  .vjs-audio.vjs-has-started .vjs-poster,
  .vjs-has-started.vjs-audio-poster-mode .vjs-poster,
  .vjs-pip-container.vjs-has-started .vjs-poster {
    display: block;
  }
  .vjs-poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .video-js .vjs-live-control {
    display: flex;
    align-items: flex-start;
    flex: auto;
    font-size: 1em;
    line-height: 3em;
  }
  .video-js:not(.vjs-live) .vjs-live-control,
  .video-js.vjs-liveui .vjs-live-control {
    display: none;
  }
  .video-js .vjs-seek-to-live-control {
    align-items: center;
    cursor: pointer;
    flex: none;
    display: inline-flex;
    height: 100%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1em;
    line-height: 3em;
    width: auto;
    min-width: 4em;
  }
  .video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
  .video-js:not(.vjs-live) .vjs-seek-to-live-control {
    display: none;
  }
  .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
    cursor: auto;
  }
  .vjs-seek-to-live-control .vjs-icon-placeholder {
    margin-right: 0.5em;
    color: #888;
  }
  .vjs-svg-icons-enabled .vjs-seek-to-live-control {
    line-height: 0;
  }
  .vjs-seek-to-live-control .vjs-svg-icon {
    width: 1em;
    height: 1em;
    pointer-events: none;
    fill: #888888;
  }
  .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
    color: red;
  }
  .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
    fill: red;
  }
  .video-js .vjs-time-control {
    flex: none;
    font-size: 1em;
    line-height: 3em;
    min-width: 2em;
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
  }
  .vjs-live .vjs-time-control,
  .vjs-live .vjs-time-divider,
  .video-js .vjs-current-time,
  .video-js .vjs-duration {
    display: none;
  }
  .vjs-time-divider {
    display: none;
    line-height: 3em;
  }
  .video-js .vjs-play-control {
    cursor: pointer;
  }
  .video-js .vjs-play-control .vjs-icon-placeholder {
    flex: none;
  }
  .vjs-text-track-display {
    position: absolute;
    bottom: 3em;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
  }
  .vjs-error .vjs-text-track-display {
    display: none;
  }
  .video-js.vjs-controls-disabled .vjs-text-track-display,
  .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
    bottom: 1em;
  }
  .video-js .vjs-text-track {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 0.1em;
  }
  .vjs-subtitles {
    color: #fff;
  }
  .vjs-captions {
    color: #fc6;
  }
  .vjs-tt-cue {
    display: block;
  }
  video::-webkit-media-text-track-display {
    transform: translateY(-3em);
  }
  .video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
  .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
    transform: translateY(-1.5em);
  }
  .video-js.vjs-force-center-align-cues .vjs-text-track-cue {
    text-align: center !important;
    width: 80% !important;
  }
  .video-js .vjs-picture-in-picture-control {
    cursor: pointer;
    flex: none;
  }
  .video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
  .vjs-pip-window .vjs-picture-in-picture-control {
    display: none;
  }
  .video-js .vjs-fullscreen-control {
    cursor: pointer;
    flex: none;
  }
  .video-js.vjs-audio-only-mode .vjs-fullscreen-control,
  .vjs-pip-window .vjs-fullscreen-control {
    display: none;
  }
  .vjs-playback-rate > .vjs-menu-button,
  .vjs-playback-rate .vjs-playback-rate-value {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .vjs-playback-rate .vjs-playback-rate-value {
    pointer-events: none;
    font-size: 1.5em;
    line-height: 2;
    text-align: center;
  }
  .vjs-playback-rate .vjs-menu {
    width: 4em;
    left: 0em;
  }
  .vjs-error .vjs-error-display .vjs-modal-dialog-content {
    font-size: 1.4em;
    text-align: center;
  }
  .vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    text-align: left;
    border: 0.6em solid rgba(43, 51, 63, 0.7);
    box-sizing: border-box;
    background-clip: padding-box;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    visibility: hidden;
  }
  .vjs-seeking .vjs-loading-spinner,
  .vjs-waiting .vjs-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: vjs-spinner-show 0s linear 0.3s forwards;
  }
  .vjs-error .vjs-loading-spinner {
    display: none;
  }
  .vjs-loading-spinner:before,
  .vjs-loading-spinner:after {
    content: "";
    position: absolute;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: white;
  }
  .vjs-seeking .vjs-loading-spinner:before,
  .vjs-seeking .vjs-loading-spinner:after,
  .vjs-waiting .vjs-loading-spinner:before,
  .vjs-waiting .vjs-loading-spinner:after {
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
  }
  .vjs-seeking .vjs-loading-spinner:before,
  .vjs-waiting .vjs-loading-spinner:before {
    border-top-color: rgb(255, 255, 255);
  }
  .vjs-seeking .vjs-loading-spinner:after,
  .vjs-waiting .vjs-loading-spinner:after {
    border-top-color: rgb(255, 255, 255);
    animation-delay: 0.44s;
  }
  @keyframes vjs-spinner-show {
    to {
      visibility: visible;
    }
  }
  @keyframes vjs-spinner-spin {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes vjs-spinner-fade {
    0% {
      border-top-color: #73859f;
    }
    20% {
      border-top-color: #73859f;
    }
    35% {
      border-top-color: white;
    }
    60% {
      border-top-color: #73859f;
    }
    100% {
      border-top-color: #73859f;
    }
  }
  .video-js.vjs-audio-only-mode .vjs-captions-button {
    display: none;
  }
  .vjs-chapters-button .vjs-menu ul {
    width: 24em;
  }
  .video-js.vjs-audio-only-mode .vjs-descriptions-button {
    display: none;
  }
  .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
    width: 1.5em;
    height: 1.5em;
  }
  .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: -0.1em;
  }
  .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
    font-family: VideoJS;
    content: "\f10c";
    font-size: 1.5em;
    line-height: inherit;
  }
  .video-js.vjs-audio-only-mode .vjs-subs-caps-button {
    display: none;
  }
  .video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
  .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: -0.1em;
  }
  .video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,
  .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
    font-family: VideoJS;
    content: " \f12e";
    font-size: 1.5em;
    line-height: inherit;
  }
  .video-js.vjs-layout-small .vjs-current-time,
  .video-js.vjs-layout-small .vjs-time-divider,
  .video-js.vjs-layout-small .vjs-duration,
  .video-js.vjs-layout-small .vjs-remaining-time,
  .video-js.vjs-layout-small .vjs-playback-rate,
  .video-js.vjs-layout-small .vjs-volume-control,
  .video-js.vjs-layout-x-small .vjs-current-time,
  .video-js.vjs-layout-x-small .vjs-time-divider,
  .video-js.vjs-layout-x-small .vjs-duration,
  .video-js.vjs-layout-x-small .vjs-remaining-time,
  .video-js.vjs-layout-x-small .vjs-playback-rate,
  .video-js.vjs-layout-x-small .vjs-volume-control,
  .video-js.vjs-layout-tiny .vjs-current-time,
  .video-js.vjs-layout-tiny .vjs-time-divider,
  .video-js.vjs-layout-tiny .vjs-duration,
  .video-js.vjs-layout-tiny .vjs-remaining-time,
  .video-js.vjs-layout-tiny .vjs-playback-rate,
  .video-js.vjs-layout-tiny .vjs-volume-control {
    display: none;
  }
  .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
  .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
  .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
  .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
  .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
  .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
  .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
  .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
  .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
  .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,
  .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
  .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
    width: auto;
    width: initial;
  }
  .video-js.vjs-layout-x-small .vjs-progress-control,
  .video-js.vjs-layout-tiny .vjs-progress-control {
    display: none;
  }
  .video-js.vjs-layout-x-small .vjs-custom-control-spacer {
    flex: auto;
    display: block;
  }
  .vjs-modal-dialog.vjs-text-track-settings {
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.75);
    color: #fff;
    height: 70%;
  }
  .vjs-spatial-navigation-enabled .vjs-modal-dialog.vjs-text-track-settings {
    height: 80%;
  }
  .vjs-error .vjs-text-track-settings {
    display: none;
  }
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: table;
  }
  .vjs-text-track-settings .vjs-track-settings-colors,
  .vjs-text-track-settings .vjs-track-settings-font,
  .vjs-text-track-settings .vjs-track-settings-controls {
    display: table-cell;
  }
  .vjs-text-track-settings .vjs-track-settings-controls {
    text-align: right;
    vertical-align: bottom;
  }
  @supports (display: grid) {
    .vjs-text-track-settings .vjs-modal-dialog-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      padding: 20px 24px 0px 24px;
    }
    .vjs-track-settings-controls .vjs-default-button {
      margin-bottom: 20px;
    }
    .vjs-text-track-settings .vjs-track-settings-controls {
      grid-column: 1/-1;
    }
    .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
    .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
    .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
      grid-template-columns: 1fr;
    }
  }
  .vjs-text-track-settings select {
    font-size: inherit;
  }
  .vjs-track-setting > select {
    margin-right: 1em;
    margin-bottom: 0.5em;
  }
  .vjs-text-track-settings fieldset {
    margin: 10px;
    border: none;
  }
  .vjs-text-track-settings fieldset span {
    display: inline-block;
    padding: 0 0.6em 0.8em;
  }
  .vjs-text-track-settings fieldset span > select {
    max-width: 7.3em;
  }
  .vjs-text-track-settings legend {
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
  }
  .vjs-text-track-settings .vjs-label {
    margin: 0 0.5em 0.5em 0;
  }
  .vjs-track-settings-controls button:focus,
  .vjs-track-settings-controls button:active {
    outline-style: solid;
    outline-width: medium;
    background-image:
      linear-gradient(
        0deg,
        #fff 88%,
        #73859f 100%);
  }
  .vjs-track-settings-controls button:hover {
    color: rgba(43, 51, 63, 0.75);
  }
  .vjs-track-settings-controls button {
    background-color: #fff;
    background-image:
      linear-gradient(
        -180deg,
        #fff 88%,
        #73859f 100%);
    color: #2B333F;
    cursor: pointer;
    border-radius: 2px;
  }
  .vjs-track-settings-controls .vjs-default-button {
    margin-right: 1em;
  }
  .vjs-title-bar {
    background: rgba(0, 0, 0, 0.9);
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 0) 100%);
    font-size: 1.2em;
    line-height: 1.5;
    transition: opacity 0.1s;
    padding: 0.666em 1.333em 4em;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .vjs-error .vjs-title-bar {
    display: none;
  }
  .vjs-title-bar-title,
  .vjs-title-bar-description {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vjs-title-bar-title {
    font-weight: bold;
    margin-bottom: 0.333em;
  }
  .vjs-playing.vjs-user-inactive .vjs-title-bar {
    opacity: 0;
    transition: opacity 1s;
  }
  .video-js .vjs-skip-forward-5 {
    cursor: pointer;
  }
  .video-js .vjs-skip-forward-10 {
    cursor: pointer;
  }
  .video-js .vjs-skip-forward-30 {
    cursor: pointer;
  }
  .video-js .vjs-skip-backward-5 {
    cursor: pointer;
  }
  .video-js .vjs-skip-backward-10 {
    cursor: pointer;
  }
  .video-js .vjs-skip-backward-30 {
    cursor: pointer;
  }
  @media print {
    .video-js > *:not(.vjs-tech):not(.vjs-poster) {
      visibility: hidden;
    }
  }
  .vjs-resize-manager {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: -1000;
  }
  .js-focus-visible .video-js *:focus:not(.focus-visible) {
    outline: none;
  }
  .video-js *:focus:not(:focus-visible) {
    outline: none;
  }
}

/* Components/General/Header/_header.css */
@layer components {
  .fui-header {
    font-weight: 600;
    margin: 0;
    display: flex;
    color: #4b5563;
    &.fui-header-xlarge {
      font-size: var(--font-size-5);
    }
    &.fui-header-large {
      font-size: var(--font-size-4);
    }
    &.fui-header-medium-large {
      font-size: var(--font-size-3);
    }
    &.fui-header-medium {
      font-size: var(--font-size-2);
    }
    &.fui-header-small {
      font-size: var(--font-size-1);
    }
  }
}

/* Components/Navigation/ZoneSwitcher/_zone_switcher.css */
@layer components {
  :root {
    --fui-zone-switcher-trigger-color: #fff;
  }
  .fui-zone-switcher {
    position: inherit;
    margin: 0;
  }
  .fui-zone-switcher-trigger {
    display: flex;
    border: none;
    background-color: transparent;
    outline: none;
    &:hover,
    &:focus {
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.4);
    }
    & svg {
      height: 24px;
      width: 24px;
      color: var(--fui-zone-switcher-trigger-color);
      fill: var(--fui-zone-switcher-trigger-color);
      > * {
        color: var(--fui-zone-switcher-trigger-color);
        fill: var(--fui-zone-switcher-trigger-color);
      }
    }
  }
  .fui-zone-switcher-zones-list {
    position: absolute;
    width: max-content;
    top: 0;
    left: 0;
    min-width: 300px;
    min-height: 300px;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2);
    margin: 0 0 1rem;
    outline: none;
    padding: 2rem 2rem;
    border: none;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 1rem;
    }
  }
  .fui-zone-switcher-zone-item a {
    display: grid;
    grid-template-areas: "icon title" "icon description";
    grid-template-rows: minmax(0, min-content) minmax(0, min-content);
    grid-template-columns: min-content;
    border: 1px solid lightgrey;
    border-radius: 6px;
    padding: 1rem;
    align-items: flex-end;
    cursor: pointer;
    &:hover {
      background-color: #fafaf9;
    }
    .fui-zone-switcher-zone-item-icon {
      grid-area: icon;
      display: flex;
      margin-right: 0.5rem;
    }
    .fui-zone-switcher-zone-item-title {
      grid-area: title;
      display: flex;
      font-weight: 500;
      font-size: 1.2rem;
      color: #0c2d6b;
    }
    .fui-zone-switcher-zone-item-description {
      grid-area: description;
      display: flex;
    }
  }
}

/* Components/Application/PageShell/_page_shell.css */
@layer components {
  :root {
    --fui-page-shell-context-panel-top-offset: 0;
  }
  .fui-page-shell {
    display: grid;
    height: 100%;
    width: 100%;
    gap: var(--space-4);
    &:has(> .fui-page-shell-left-sidebar):has(> .fui-page-shell-right-sidebar) {
      grid-template-areas: "leftsidebar content rightsidebar";
      grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
    }
    &:has(> .fui-page-shell-left-sidebar):not(:has(> .fui-page-shell-right-sidebar)) {
      grid-template-areas: "leftsidebar content";
      grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    }
    &:not(:has(> .fui-page-shell-left-sidebar)):has(> .fui-page-shell-right-sidebar) {
      grid-template-areas: "content rightsidebar";
      grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    }
    &:not(:has(> .fui-page-shell-left-sidebar)):not(:has(> .fui-page-shell-right-sidebar)) {
      grid-template-areas: "content";
      grid-template-columns: 1fr;
    }
    &.fui-page-shell-context-panel-position-inline {
    }
    &.fui-page-shell-context-panel-position-sticky {
      .fui-page-shell-context-panel-container {
        position: sticky;
        top: var(--fui-page-shell-context-panel-top-offset);
      }
    }
  }
  .fui-page-shell-left-sidebar {
    grid-area: leftsidebar;
  }
  .fui-page-shell-content {
    grid-area: content;
  }
  .fui-page-shell-right-sidebar {
    grid-area: rightsidebar;
  }
  .fui-page-shell-context-panel-container {
    grid-column: 2;
    background-color: oklch(92% 0.004 286.32);
  }
  .fui-page-shell-header {
    display: grid;
    grid-template-areas: "breadcrumbs breadcrumbs" "title actions" "subtitle actions" "pagecontrols pagecontrols";
    grid-template-rows: minmax(0, min-content) 1fr minmax(0, min-content);
    grid-template-columns: 1fr minmax(0, min-content);
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-4);
    .fui-page-shell-header-title {
      grid-area: title;
      h1 {
        font-size: var(--font-size-3);
      }
    }
    .fui-page-shell-header-subtitle {
      grid-area: subtitle;
    }
    .fui-page-shell-header-actions {
      grid-area: actions;
      align-items: flex-start;
      justify-content: flex-end;
    }
    .fui-page-shell-header-breadcrumbs {
      grid-area: breadcrumbs;
    }
    .fui-page-shell-header-page-controls {
      grid-area: pagecontrols;
    }
  }
}

/* Components/Navigation/CommandBar/_command_bar_action.css */
@layer components {
  :root {
    --hover-background-color: oklch(97% 0.001 106.424);
  }
  .fui-command-bar-action {
    height: 40px;
    min-width: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-content: center;
    background: transparent;
    border: none;
    outline: none;
    & > * {
      display: flex;
      flex-direction: row;
      align-content: center;
      align-items: center;
    }
    &:hover,
    &:focus-visible {
      cursor: pointer;
      background: var(--hover-background-color);
      & .fui-command-bar-action-icon {
        & svg {
          fill: forestgreen;
        }
      }
    }
  }
  .fui-command-bar-action-icon {
    padding: 0 8px;
  }
  .fui-command-bar-action-label {
    &:has(+ .fui-command-bar-action-label) {
      padding-right: 8px;
    }
  }
}

/* Components/Navigation/CommandBar/_command_bar_menu.css */
@layer components {
  .fui-command-bar-menu-trigger {
    height: 40px;
    min-width: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-content: center;
    background: transparent;
    border: none;
    outline: none;
    & > * {
      display: flex;
      flex-direction: row;
      align-content: center;
      align-items: center;
    }
    &:hover,
    &:focus-visible {
      cursor: pointer;
      background: var(--hover-background-color);
      & .fui-command-bar-menu-trigger-icon {
        & svg {
          fill: forestgreen;
        }
      }
    }
  }
  .fui-command-bar-menu-trigger-icon {
    padding: 0 8px;
  }
  .fui-command-bar-menu-trigger-label {
    &:has(+ .fui-command-bar-menu-trigger-label) {
      padding-right: 8px;
    }
  }
  .fui-command-bar-menu-items {
    position: absolute;
    width: max-content;
    top: 0;
    left: 0;
    min-width: 200px;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2);
    outline: 0;
    margin: 0 0 1rem;
    cursor: pointer;
    padding: 6px 0;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
  .fui-command-bar-menu-item {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    a {
      display: flex;
      flex-direction: row;
      padding: 0.5rem;
    }
  }
}

/* Components/Navigation/NavDrawer/_nav_drawer.css */
@layer components {
  :root {
    --fui-nav-drawer-background-color: "oklch(98.5% 0.001 106.423)";
  }
  .fui-nav-drawer {
    display: flex;
    flex-direction: column;
    background-color: var(--fui-nav-drawer-background-color);
    height: 100%;
    min-width: 250px;
  }
  .fui-nav-drawer-header {
  }
  .fui-nav-drawer-body {
    padding: var(--space-2);
  }
}

/* Components/Application/ApplicationBrand/_application_brand.css */
@layer components {
  .fui-application-brand {
    display: flex;
    flex-direction: row;
    justify-items: center;
    flex: 1 1 auto;
    align-items: center;
  }
  .fui-application-logo {
    display: flex;
    flex: 0 1 auto;
    margin-right: 10px;
  }
  .fui-application-name {
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    flex: 1 1 auto;
  }
}

/* Components/Application/ApplicationHeader/_application_header.css */
@layer components {
  :root {
    --fui-application-header-height: 50px;
    --fui-application-header-background: #fff;
  }
  .fui-application-header {
    flex-grow: 1;
    height: var(--fui-application-header-height);
    background-color: var(--fui-application-header-background);
    display: grid;
    grid-template-areas: "brand navigation content actions";
    flex-direction: row;
    align-items: center;
    grid-template-columns: minmax(0, min-content) minmax(0, min-content) auto minmax(0, min-content);
    &.fui-application-header-color-theme-dark {
      background-color: #000;
      color: #fff;
    }
    &,
    > *,
    a {
      color: var(--fui-text-color);
      text-decoration: none;
    }
  }
  .fui-application-header-brand {
    grid-area: brand;
    display: flex;
    margin-right: 1rem;
    white-space: nowrap;
    align-items: center;
    a {
      display: flex;
      align-items: center;
    }
  }
  .fui-application-header-navigation {
    display: flex;
    flex: 1 1 auto;
    height: var(--fui-application-header-height);
    align-items: center;
    font-size: 1.15rem;
    margin-right: 1.5rem;
    nav > ul,
    nav > li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex: 1 1 auto;
      height: var(--fui-application-header-height);
      align-items: center;
    }
    nav > ul > li {
      a {
        margin: 0;
        padding: 0 0.5rem;
        height: var(--fui-application-header-height);
      }
    }
    > ul > li:last-child {
      &.fui-application-header-navigation-menu {
        &:after {
          display: none;
        }
      }
    }
    &.fui-application-header-navigation-link {
      &:after {
        content: "";
        border-right: 1px solid #fff;
        height: 50%;
        margin: 0 4px;
      }
      a {
        display: flex;
        flex: 1 1 auto;
        height: 3.5rem;
        align-items: center;
        color: #fff;
        word-wrap: normal;
        white-space: nowrap;
        justify-content: center;
        cursor: pointer;
        padding: 0 8px;
        text-decoration: none;
        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
    &.fui-application-header-navigation-menu {
      display: flex;
      flex: 1 1 auto;
      padding: 0;
      &:after {
        content: "";
        border-right: 1px solid #fff;
        height: 50%;
        margin: 0 4px;
      }
      &:has(.fui-dropdown-menu-content:popover-open) {
        background-color: rgba(255, 255, 255, 0.1);
      }
      &.fui-dropdown-menu {
        display: flex;
        flex: 1 1 auto;
      }
      &.fui-dropdown-menu-trigger {
        display: flex;
        flex: 1 1 auto;
        height: 3.5rem;
        align-items: center;
        justify-content: center;
        color: #fff;
        word-wrap: normal;
        white-space: nowrap;
        cursor: pointer;
        padding: 0 8px;
        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
      &.fui-application-header-navigation-link {
        &:hover {
          background-color: #f4f4f5;
        }
        a {
          color: var(--fui-text-color);
          justify-content: flex-start;
        }
      }
    }
  }
  .fui-application-header-content {
    grid-area: content;
    display: flex;
    flex-direction: row;
    min-height: 3.5rem;
    flex: 1 1 auto;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .fui-application-header-actions {
    grid-area: actions;
    display: flex;
    flex-direction: row;
    height: 50px;
    align-items: center;
    &.fui-divider {
      border-right-color: #94a3b8 !important;
    }
    &.fui-application-header-action {
      min-width: 50px;
      min-height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
      }
      & > :first-child {
        height: 50px;
      }
      > a {
        display: flex;
        align-items: center;
      }
    }
  }
}

/* Components/Application/ApplicationShell/_application_shell.css */
@layer components {
  :root {
    --fui-application-shell-header-height: var(--space-6);
    --fui-application-shell-primary-navigation-height: var(--space-6) - 2px;
    --fui-application-shell-footer-height: var(--space-5) - 2px;
  }
  body:has(.fui-application-shell.fui-busy) {
    overflow-y: hidden;
  }
  .fui-application-shell-navigation-indicator {
    z-index: 1000;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: none;
    .loader {
      height: 4px;
      width: calc(100%);
      --c: no-repeat linear-gradient(#6100ee 0 0);
      background:
        var(--c),
        var(--c),
        #d7b8fc;
      background-size: 60% 100%;
      animation: l16 3s infinite;
    }
    @keyframes l16 {
      0% {
        background-position: -150% 0, -150% 0;
      }
      66% {
        background-position: 250% 0, -150% 0;
      }
      100% {
        background-position: 250% 0, 250% 0;
      }
    }
  }
}

/* Components/Application/ApplicationShell/_vertical_navigation_application_shell.css */
@layer components {
  :root {
    --fui-application-shell-header-height: 56px;
    --navigation-width: 0px;
    --fui-application-shell-navigation-background-color: oklch(98.4% 0.003 247.858);
  }
  .fui-vertical-navigation-application-shell:has(.fui-application-shell-navigation:popover-open) {
    --navigation-width: 240px;
  }
  .fui-vertical-navigation-application-shell {
    display: grid;
    min-height: 100vh;
    width: 100%;
    grid-template-rows: var(--fui-application-shell-header-height) 1fr auto;
    overscroll-behavior: none;
    & > * {
      overscroll-behavior: none;
    }
    .fui-application-shell-header {
      display: grid;
      position: sticky;
      top: 0;
      gap: var(--space-2);
      grid-template-areas: "navigationtoggle brand breadcrumbs globalactions";
      padding: 0 var(--space-3);
      grid-template-columns: minmax(0, max-content) minmax(0, min-content) minmax(0, min-content) 1fr;
      border-bottom: solid var(--border-width-1) var(--default-border-color);
      width: 100%;
      z-index: 100;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      .fui-application-shell-navigation-toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .fui-application-shell-brand {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .fui-application-shell-header-breadcrumbs {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .fui-application-shell-header-global-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: auto;
      }
    }
    .fui-application-shell-body {
      display: grid;
      grid-template-columns: auto 1fr;
      min-height: 0;
      background-color: rgb(244, 244, 243);
    }
    .fui-application-shell-navigation {
      background-color: var(--fui-application-shell-navigation-background-color);
      border-right: 1px solid #ddd;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .fui-application-shell-content {
      overflow: auto;
      padding: 1.25rem;
    }
    .fui-application-shell-footer {
    }
    @media (min-width: 900px) {
      .fui-application-shell-body {
        display: grid;
        grid-template-columns: auto 1fr;
        height: calc(100vh - var(--fui-application-shell-header-height));
      }
      .fui-application-shell-navigation {
        width: 260px;
        transition: width 0.25s ease;
        position: relative;
        height: 100%;
        overflow: auto;
      }
      .fui-application-shell-content {
        overflow: auto;
      }
      .fui-application-shell-navigation.collapsed {
        width: 0;
      }
      .fui-application-shell-navigation .label {
        opacity: 1;
        white-space: nowrap;
        transition: opacity 0.2s ease;
      }
      .fui-application-shell-navigation.collapsed .label {
        opacity: 0;
      }
    }
    @media (max-width: 899px) {
      .fui-application-shell-body {
        grid-template-columns: 1fr;
      }
      .fui-application-shell-navigation {
        position: fixed;
        top: var(--fui-application-shell-header-height);
        left: 0;
        height: calc(100vh - var(--fui-application-shell-header-height));
        width: 260px;
        transform: translateX(-260px);
        transition: transform 0.25s ease;
        z-index: 1050;
        margin: 0;
        border: none;
        padding: 0;
      }
      .fui-application-shell-navigation:popover-open {
        transform: translateX(0);
      }
      .fui-application-shell-navigation::backdrop {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.25s ease;
      }
      .fui-application-shell-navigation:popover-open::backdrop {
        opacity: 1;
      }
    }
  }
}

/* Components/Application/ApplicationViewHeader/_application_view_header.css */
@layer components {
  .fui-application-view-header {
  }
  .fui-application-view-header + .fui-application-view-header.fui-application-view-header-fixed {
    position: fixed;
    padding-top: var(--app-header-height);
  }
}

/* Components/Application/Sidebar/_sidebar.css */
@layer components {
  :root {
    --fui-sidebar-background: oklch(0.967 0.0027 286.38);
    --fui-sidebar-primary: var(--fui-text-color);
    --fui-sidebar-accent-foreground: rgba(0, 0, 0, 0.1);
    --fui-sidebar-expanded-width: 100%;
  }
  .fui-sidebar {
    display: flex;
    transition: all 0.35s ease;
    flex-grow: 1;
    flex-direction: column;
    box-sizing: content-box;
    padding: 0;
    background-color: var(--fui-sidebar-background);
    background: var(--fui-sidebar-background);
    width: var(--fui-sidebar-expanded-width);
    &.fui-sidebar-theme-dark {
      background-color: var(--fui-sidebar-background);
    }
    &.fui-sidebar-theme-light {
    }
    & > input[type=checkbox] {
      display: none;
    }
    &.fui-sidebar-header {
      display: flex;
      position: relative;
      flex: 0 1 auto;
      flex-direction: column;
      &.fui-sidebar-header-brand {
        width: 100%;
        display: flex;
        padding: var(--space-1);
        align-items: center;
        justify-content: center;
        img {
          width: var(--space-6) - 8px;
        }
      }
    }
    &.fui-sidebar-content {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      width: 100%;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      &.fui-sidebar-footer {
        margin-top: auto;
        width: 100%;
      }
    }
    &.fui-sidebar-collapsed {
      width: var(--space-7);
      flex-grow: inherit;
      overflow-x: hidden;
      &.fui-sidebar-collapse-toggle {
        margin-right: auto;
        margin-left: auto;
      }
      &.fui-header {
        display: none;
      }
      &.fui-nav-menu-group-header {
        display: none;
      }
      &.fui-sidebar-content {
        &.fui-nav-menu {
          &.fui-nav-menu-item {
            &.fui-nav-menu-item-label {
              display: none;
            }
            &.fui-nav-menu-item-with-submenu {
              &.fui-nav-menu-item-toggle-icon {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .fui-sidebar-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: calc(var(--fui-spacing) * 1);
    display: flex;
    flex-direction: column;
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }
    > * {
      user-select: none;
    }
  }
  .fui-sidebar-group {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
  }
  .fui-sidebar-group-header {
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
  }
  .fui-sidebar-menu-action {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    background-color: transparent;
    text-decoration: none;
    border: none;
    outline: none;
    color: var(--fui-sidebar-primary);
    margin: 0;
    padding: var(--space-2);
    gap: calc(var(--fui-spacing) * 2);
    cursor: pointer;
    &:hover {
      background-color: var(--fui-sidebar-accent-foreground);
      border-radius: var(--space-1);
    }
    &:visited {
      color: var(--fui-sidebar-primary);
    }
    &.fui-sidebar-menu-action-icon {
      display: flex;
      align-items: center;
      svg {
        height: var(--space-3) + 2px;
        width: var(--space-3) + 2px;
      }
    }
    &.fui-sidebar-menu-action-label {
      display: flex;
      flex-grow: 1;
      align-items: center;
    }
  }
  .fui-sidebar-submenu {
    margin: 0 1.5rem;
    padding: var(--space-1) - 2px var(--space-2) + 2px;
    list-style: none;
    gap: calc(var(--fui-spacing) * 1);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-left: 1px solid var(--fui-border);
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }
  }
  .fui-sidebar-submenu-action {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    background-color: transparent;
    text-decoration: none;
    border: none;
    outline: none;
    color: var(--fui-sidebar-primary);
    margin: 0;
    padding: var(--space-2);
    gap: calc(var(--fui-spacing) * 2);
    cursor: pointer;
    &:hover {
      background-color: var(--fui-sidebar-accent-foreground);
      border-radius: var(--space-1);
    }
    &:visited {
      color: var(--fui-sidebar-primary);
    }
    &.fui-sidebar-menu-action-icon {
      display: flex;
      align-items: center;
      svg {
        height: var(--space-3) + 2px;
        width: var(--space-3) + 2px;
      }
    }
    &.fui-sidebar-menu-action-label {
      display: flex;
      flex-grow: 1;
      align-items: center;
    }
  }
}

/* Components/Application/SidebarCollapseToggle/_sidebar_collapse_toggle.css */
@layer components {
  .fui-sidebar-collapse-toggle {
    width: var(--space-7) + var(--space-1);
    height: var(--space-7) + var(--space-1);
    text-align: center;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: center;
    color: var(--color-text);
    margin-right: 0.5rem;
    button {
      border: none;
      background: none;
      outline: none;
      display: flex;
      flex-direction: row;
      cursor: pointer;
      padding: var(--space-1);
      font-size: 1.2rem;
      color: var(--color-text-inverse);
      align-content: center;
      align-items: center;
      border-radius: var(--space-1);
      justify-content: center;
      svg {
        display: flex;
        flex-shrink: 0;
      }
      &:active,
      &:focus {
        outline: none;
        background: none;
      }
      &.fui-sidebar-collapse-toggle-label {
        font-size: 0.9rem;
        color: rgba(var(--color-text), 0.7);
        margin-left: 0.5rem;
        white-space: nowrap;
      }
    }
  }
}

/* Components/Application/ViewContent/_view_content.css */
@layer components {
  .fui-view-content {
    display: grid;
    grid-template-areas: "header header header" "leftsidebar navigation rightsidebar" "leftsidebar toolbar rightsidebar" "leftsidebar content rightsidebar";
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
    grid-template-rows: auto minmax(0, max-content) minmax(0, max-content) 1fr;
  }
  .fui-view-content-header {
    grid-area: header;
  }
  .fui-view-content-left-sidebar {
    grid-area: leftsidebar;
    border-right: 1px solid var(--default-border-color);
    &:has(.fui-view-content-left-sidebar-container > *) {
    }
    &.fui-view-content-left-sidebar-container {
      position: sticky;
      top: 0;
      height: 100%;
    }
  }
  .fui-view-content-navigation {
    grid-area: navigation;
    display: flex;
    flex-direction: column;
  }
  .fui-view-content-toolbar {
    grid-area: toolbar;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--default-border-color);
  }
  .fui-view-content-body {
    grid-area: content;
    display: flex;
    flex-direction: column;
  }
  .fui-view-content-right-sidebar {
    grid-area: rightsidebar;
    border-left: 1px solid var(--default-border-color);
    &.fui-view-content-right-sidebar-container {
      position: sticky;
      top: 0;
      height: 100%;
    }
  }
}

/* Components/Application/ViewToolbar/_view_toolbar.css */
@layer components {
  .fui-view-toolbar {
    display: flex;
    height: var(--space-6);
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--default-border-color);
    background-color: #fff;
    width: 100%;
  }
}

/* Components/DataDisplay/Accordion/_accordion.css */
@layer components {
  .fui-accordion {
    display: flex;
    width: 100%;
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }
  }
  .fui-accordion-item {
    .fui-accordion-item-header {
      display: flex;
      width: 100%;
      padding: 0.5rem 1rem;
      &:hover {
        background-color: #f8fafc;
        cursor: pointer;
      }
      .fui-accordion-item-toggle {
        margin-left: auto;
        padding: 0;
        outline: none;
        background-color: transparent;
        border: none;
        pointer-events: none;
      }
    }
    &.fui-accordion-colour-alert {
      .fui-accordion-item-header {
        background-color: oklch(from var(--color-alert) calc(l/2 + 0.5) c h);
        &:hover {
          background-color: var(--color-alert);
          cursor: pointer;
        }
      }
    }
    &.fui-accordion-colour-danger {
      .fui-accordion-item-header {
        background-color: oklch(from var(--color-danger) calc(l/2 + 0.5) c h);
        &:hover {
          background-color: var(--color-danger);
          cursor: pointer;
        }
      }
    }
    &.fui-accordion-colour-primary {
      .fui-accordion-item-header {
        background-color: oklch(from var(--color-primary) calc(l/2 + 0.5) c h);
        &:hover {
          background-color: var(--color-primary);
          cursor: pointer;
        }
      }
    }
    &.fui-accordion-colour-success {
      .fui-accordion-item-header {
        background-color: oklch(from var(--color-success) calc(l/2 + 0.5) c h);
        &:hover {
          background-color: var(--color-success);
          cursor: pointer;
        }
      }
    }
    input[type=radio] {
      display: none;
      &:checked {
        + .fui-accordion-item-header {
          .fui-accordion-item-expanded-icon {
            display: block;
          }
          .fui-accordion-item-collapsed-icon {
            display: none;
          }
        }
        ~ .fui-accordion-item-content {
          display: block;
        }
      }
      &:not(:checked) {
        + .fui-accordion-item-header {
          .fui-accordion-item-expanded-icon {
            display: none;
          }
          .fui-accordion-item-collapsed-icon {
            display: block;
          }
        }
      }
    }
    input[type=checkbox] {
      display: none;
      &:checked {
        + .fui-accordion-item-header {
          .fui-accordion-item-expanded-icon {
            display: block;
          }
          .fui-accordion-item-collapsed-icon {
            display: none;
          }
        }
        ~ .fui-accordion-item-content {
          display: block;
        }
      }
      &:not(:checked) {
        + .fui-accordion-item-header {
          .fui-accordion-item-expanded-icon {
            display: none;
          }
          .fui-accordion-item-collapsed-icon {
            display: block;
          }
        }
      }
    }
    .fui-accordion-item-content {
      display: none;
    }
  }
}

/* Components/DataDisplay/Badge/_badge.css */
@layer components {
  .fui-badge {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: red;
    color: white;
    border-radius: 1.5rem;
    line-height: var(--space-4);
    height: 1.5rem;
    min-width: 1.5rem;
    justify-content: center;
    .fui-badge-label {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      text-align: center;
      white-space: nowrap;
    }
  }
}

/* Components/DataDisplay/Calendar/_calendar.css */
@layer components {
  :root {
    --calendar-summary-width: 240px;
    --calendar-summary-height: 650px;
  }
  .fui-calendar {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .fui-calendar-header {
    padding: 1rem 0;
    display: grid;
    grid-template-areas: "navigation headercontent";
    grid-template-columns: 1fr 1fr;
    .fui-calendar-header-content {
      display: flex;
      align-items: center;
      grid-area: headercontent;
    }
    .fui-calendar-header-navigation-actions {
      display: flex;
      align-items: center;
      grid-area: navigation;
      justify-content: flex-start;
      .fui-calendar-header-title {
        display: flex;
        margin-left: 1rem;
      }
    }
  }
  .fui-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    border: 1px solid var(--default-border-color);
    input[type=radio] {
      display: none;
    }
  }
  .fui-calendar-column-header {
    padding: var(--space-2);
    border-right: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: oklch(0.923 0.003 48.717);
    &:last-child {
      border-right: none;
    }
    &.current {
      font-weight: 600;
    }
  }
  .fui-calendar-placeholder {
    border-top: var(--border-width-1) solid var(--default-border-color);
    border-right: var(--border-width-1) solid var(--default-border-color);
    padding: var(--space-2);
    border-right: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    min-height: 100px;
    &:has(input[type=radio]:checked) {
      background-color: oklch(0.882 0.059 254.128);
    }
  }
  .fui-calendar-day {
    border-top: var(--border-width-1) solid var(--default-border-color);
    border-right: var(--border-width-1) solid var(--default-border-color);
    padding: var(--space-2);
    border-right: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    flex-direction: column;
    min-height: calc(var(--space-8) + 4px);
    .fui-calendar-day-number {
      display: flex;
      justify-content: flex-start;
      &.fui-calendar-day-first-of-month {
        font-weight: 500;
      }
    }
    &.today {
      border: var(--border-width-2) solid var(--color-primary);
      .fui-calendar-day-number {
        font-weight: 600;
      }
    }
    &:has(input[type=radio]:checked) {
      background-color: oklch(0.882 0.059 254.128);
    }
  }
  .fui-calendar-past {
    background-color: oklch(0.985 0 0);
  }
  .fui-calendar-day-events {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-1);
    &.fui-calendar-day-event {
      display: grid;
      grid-template-areas: "indicator title";
      grid-template-columns: minmax(0, min-content) auto;
      border: var(--border-width-1) solid var(--default-border-color);
      padding: calc(var(--space-1) + 1px) calc(var(--space-1) + 1px);
      border-radius: var(--border-width-2);
      font-size: 0.85rem;
      background-color: #fff;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
      &:has(input[type=radio]:checked) {
      }
      &.fui-calendar-day-event-color-default {
        background-color: oklch(0.443 0.11 240.79);
        color: #fff;
      }
      &:hover {
        cursor: pointer;
      }
      .fui-calendar-day-event-indicator {
      }
      .fui-calendar-day-event-title {
      }
    }
  }
}

/* Components/DataDisplay/Card/_card.css */
@layer components {
  .fui-card {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
    .fui-card-body {
      display: flex;
      flex: 1 1 auto;
    }
  }
}

/* Components/DataDisplay/Chip/_chip.css */
@layer components {
  .fui-chips {
    display: flex;
    flex-direction: row;
  }
  .fui-chip {
    background-color: orange;
    display: flex;
    padding: 0.2em 1rem 0.2rem 1rem;
    border-width: 0;
    align-items: center;
    margin-right: 0.5rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
  }
  .fui-chip-label {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .fui-chip-dismiss {
    justify-content: center;
    justify-items: center;
    cursor: pointer;
    display: flex;
    margin-right: -0.8rem;
    height: 100%;
    button {
      outline: none;
      border: none;
      background: transparent;
      justify-content: center;
      justify-items: center;
      cursor: pointer;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      &:hover {
        svg {
          fill: #f5f5f5;
        }
      }
    }
  }
}

/* Components/DataDisplay/Comments/_comments.css */
@layer components {
  .fui-comments {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .fui-comment {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--default-border-color);
    display: flex;
    background-color: #fff;
    align-items: flex-start;
    &:last-child {
      border-bottom: none;
    }
    .fui-comment-avatar {
      margin-top: calc(var(--space-1) - 2px);
      margin-right: 0.5rem;
    }
    .fui-comment-header {
      display: flex;
      flex-direction: row;
      margin-bottom: var(--space-2);
      .fui-comment-author-name {
        font-weight: bold;
        margin-right: 1rem;
      }
    }
    .fui-comment-content {
      flex: 1 1 auto;
      max-width: 80ch;
      p:first-child {
        margin-top: 0;
      }
      p:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* Components/DataDisplay/DataGrid/_data_grid.css */
@layer components {
  .fui-data-grid {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    background-color: #fff;
    border: var(--border-width-1) solid var(--default-border-color);
    align-items: self-start;
    overflow-x: auto;
    &.fui-data-grid-borderless {
      border-width: 0;
    }
    table {
      width: 100%;
      text-align: left;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      border-collapse: separate;
      border-spacing: 0;
      .fui-data-grid-body {
        tr {
          td {
            border-right-width: 0;
          }
        }
      }
    }
  }
  .fui-data-grid-column-autofit {
    width: 1px;
    white-space: nowrap;
  }
  .fui-data-grid-column-compact {
    padding: 0;
  }
  .fui-data-grid-header {
    tr {
      &.fui-data-grid-column-headers {
        th {
          background-color: #f1f5f9;
        }
      }
      th {
        font-weight: 500;
        text-align: left;
        padding: 0;
        &:has(> *) {
          padding: 0.85rem 1rem;
        }
        &.fui-data-grid-column-compact {
          padding: 0;
        }
        div {
          display: flex;
          button {
            span {
              display: flex;
            }
          }
        }
        .fui-data-grid-header-column-label {
          color: #334155;
          font-size: 1rem;
          display: flex;
          align-items: center;
          &.fui-data-grid-column-horizontal-alignment-start {
            justify-content: start;
          }
          &.fui-data-grid-column-horizontal-alignment-center {
            justify-content: center;
          }
          &.fui-data-grid-column-horizontal-alignment-end {
            justify-content: end;
          }
        }
      }
    }
    .fui-data-grid-all-rows-selector {
      margin-right: var(--space-2);
      label {
        padding: 0.75rem 1rem;
        display: flex;
        &:has(input:checked) {
          .fui-data-grid-all-rows-selected-indicator {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzI1NjNlYiIgY2xhc3M9ImJpIGJpLWNoZWNrLWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xNiA4QTggOCAwIDEgMSAwIDhhOCA4IDAgMCAxIDE2IDBtLTMuOTctMy4wM2EuNzUuNzUgMCAwIDAtMS4wOC4wMjJMNy40NzcgOS40MTcgNS4zODQgNy4zMjNhLjc1Ljc1IDAgMCAwLTEuMDYgMS4wNkw2Ljk3IDExLjAzYS43NS43NSAwIDAgMCAxLjA3OS0uMDJsMy45OTItNC45OWEuNzUuNzUgMCAwIDAtLjAxLTEuMDV6Ii8+Cjwvc3ZnPg==);
          }
        }
      }
      .fui-data-grid-all-rows-selected-indicator {
        display: flex;
        width: calc(var(--space-3) + 2px);
        height: calc(var(--space-3) + 2px);
      }
      &:hover {
        &:not(:has(input:checked)) {
          .fui-data-grid-all-rows-selected-indicator {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2stY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KICA8cGF0aCBkPSJtMTAuOTcgNC45Ny0uMDIuMDIyLTMuNDczIDQuNDI1LTIuMDkzLTIuMDk0YS43NS43NSAwIDAgMC0xLjA2IDEuMDZMNi45NyAxMS4wM2EuNzUuNzUgMCAwIDAgMS4wNzktLjAybDMuOTkyLTQuOTlhLjc1Ljc1IDAgMCAwLTEuMDcxLTEuMDUiLz4KPC9zdmc+);
          }
        }
      }
    }
  }
  .fui-data-grid-column-sorter {
    border: solid 1px transparent;
    background-color: transparent;
    margin-left: calc(var(--space-2) + 2px);
    padding: calc(var(--space-1) - 2px);
    display: flex;
    justify-content: center;
    align-items: center;
    &:focus,
    :hover {
      background-color: transparent;
      outline: none;
      cursor: pointer;
    }
    &:hover {
      background-color: rgba(var(--color-primary), 0.1);
      border-radius: 50%;
      color: var(--color-primary);
    }
    &.active {
      color: var(--color-primary);
    }
  }
  .fui-data-grid-body {
    tr {
      &:hover {
        td {
          background-color: #fffde7 !important;
        }
      }
      &.fui-data-grid-child-row {
        td {
          background-color: #f5f5f5;
          cursor: pointer;
          > div {
            cursor: pointer;
          }
          &:first-child {
            svg {
              margin-right: var(--space-2);
              margin-top: calc(var(--space-1) + 1px);
              margin-left: 0.5rem;
            }
          }
        }
      }
      &:not(.fui-data-grid-no-items-row) {
        td {
          padding: 0.75rem 1rem;
        }
      }
      td {
        &:not(.fui-data-grid-cell-vertical-align) {
          vertical-align: middle;
        }
        &.fui-data-grid-column-compact {
          padding: 0;
        }
        &:not(:last-child) {
          border-right: var(--border-width-1) solid var(--default-border-color);
        }
        &.fui-data-grid-column-horizontal-alignment-start {
          .fui-data-grid-cell {
            justify-content: flex-start;
          }
        }
        &.fui-data-grid-column-horizontal-alignment-center {
          .fui-data-grid-cell {
            justify-content: center;
          }
        }
        &.fui-data-grid-column-horizontal-alignment-end {
          .fui-data-grid-cell {
            justify-content: flex-end;
          }
        }
      }
      &:not(:last-child) {
        td {
          border-bottom: var(--border-width-1) solid var(--default-border-color);
        }
      }
      &.selected {
        td {
          background-color: #e6f7ff;
        }
      }
      &.fui-data-grid-row-selectable {
        &:hover {
          background-color: #f9fafb;
          &:not(:has(.fui-data-grid-row-selector input:checked)) {
            td:first-child:hover {
              .fui-data-grid-row-selected-indicator {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2stY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KICA8cGF0aCBkPSJtMTAuOTcgNC45Ny0uMDIuMDIyLTMuNDczIDQuNDI1LTIuMDkzLTIuMDk0YS43NS43NSAwIDAgMC0xLjA2IDEuMDZMNi45NyAxMS4wM2EuNzUuNzUgMCAwIDAgMS4wNzktLjAybDMuOTkyLTQuOTlhLjc1Ljc1IDAgMCAwLTEuMDcxLTEuMDUiLz4KPC9zdmc+);
              }
            }
            .fui-data-grid-row-selected-indicator {
              content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KPC9zdmc+);
            }
          }
        }
        .fui-data-grid-row-selected-indicator {
          display: flex;
          width: calc(var(--space-3) + 2px);
          height: calc(var(--space-3) + 2px);
        }
        &:has(.fui-data-grid-row-selector input:checked) {
          td {
            background-color: #cbd5e1;
          }
          .fui-data-grid-row-selected-indicator {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzI1NjNlYiIgY2xhc3M9ImJpIGJpLWNoZWNrLWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xNiA4QTggOCAwIDEgMSAwIDhhOCA4IDAgMCAxIDE2IDBtLTMuOTctMy4wM2EuNzUuNzUgMCAwIDAtMS4wOC4wMjJMNy40NzcgOS40MTcgNS4zODQgNy4zMjNhLjc1Ljc1IDAgMCAwLTEuMDYgMS4wNkw2Ljk3IDExLjAzYS43NS43NSAwIDAgMCAxLjA3OS0uMDJsMy45OTItNC45OWEuNzUuNzUgMCAwIDAtLjAxLTEuMDV6Ii8+Cjwvc3ZnPg==);
          }
        }
      }
      &:has(.fui-data-grid-row-selector input:checked) {
        td {
          background-color: #cbd5e1;
        }
      }
      &.expanded,
      &.fui-data-grid-row-expansion {
        td:first-child {
          border-left: solid var(--border-width-3) var(--default-border-color);
        }
      }
    }
    .fui-data-grid-row-selector {
      margin-right: var(--space-2);
      label {
        padding: 0.75rem 1rem;
        display: flex;
      }
    }
    .fui-data-grid-row-expander {
      background: none;
      border: none;
      outline: none;
      color: #94a3b8;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .fui-data-grid-footer {
    tr {
      td {
        padding: var(--space-2);
        border-top: var(--border-width-1) solid var(--default-border-color);
        &:first-child {
          padding-left: 1rem;
        }
        &:last-child {
          padding-right: 1rem;
        }
      }
    }
  }
  .fui-data-grid-column-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    .fui-data-grid-column-action {
      height: var(--space-6) - 8px;
      width: var(--space-6) - 8px;
      display: flex;
      margin-right: 0.5rem;
      justify-content: center;
      &:last-child {
        margin-right: 0;
      }
      button {
        display: flex;
        border: none;
        outline: none;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        height: 100%;
        &:hover {
          cursor: pointer;
          background-color: #e5e7eb;
        }
      }
    }
  }
  .fui-data-grid-no-items-row {
    td {
      padding: 0;
    }
  }
  .fui-data-grid-cell-vertical-align {
    vertical-align: top;
  }
  .fui-data-grid-cell {
    display: flex;
    align-items: center;
    cursor: default;
  }
}

/* Components/DataDisplay/DataList/_data_list.css */
@layer components {
  .fui-data-list {
    display: flex;
    width: 100%;
    ul {
      display: flex;
      width: 100%;
      flex-direction: column;
    }
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }
  .fui-data-list-item {
    &:has(input:checked) {
      box-shadow: inset 3px 0 0 0 var(--color-primary);
    }
    input {
      display: none;
    }
  }
}

/* Components/DataDisplay/DateLabel/_date_label.css */
@layer components {
  .fui-date-label {
    color: #4b5563;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    .fui-date-label-value {
      display: inline-flex;
      flex-direction: column;
    }
    .fui-date-time-value {
      margin-left: calc(var(--space-2) - 2px);
    }
    .fui-date-label-humanized-period {
      display: inline-flex;
      align-items: center;
      font-size: 0.8rem;
      font-style: italic;
      margin-top: calc(var(--space-1) - 2px);
      svg {
        margin-right: var(--space-1);
      }
    }
  }
}

/* Components/DataDisplay/DetailsProperty/_details_property.css */
@layer components {
  .fui-details-property {
    display: flex;
    white-space: nowrap;
    flex-direction: column;
    &.fui-details-property-label-uppercase {
      .fui-details-property-label {
        text-transform: uppercase;
      }
    }
    &.fui-details-property-label-bold {
      .fui-details-property-label {
        font-weight: 600;
      }
    }
    .fui-details-property-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      .fui-details-property-label {
        font-weight: 500;
        display: flex;
        flex-direction: row;
        line-height: calc(var(--space-3) + 2px);
        color: oklch(37.1% 0 0);
        .fui-details-property-locked-icon {
          margin-left: 5px;
        }
        .fui-details-property-tooltip-icon {
          margin-left: 5px;
        }
      }
      .fui-details-property-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        a {
          text-decoration: none;
        }
      }
    }
    .fui-details-property-content {
      margin-top: 0.5rem;
      display: flex;
      flex-direction: column;
      max-width: 90ch;
      white-space: normal;
      > p:first-child {
        margin-top: 0;
      }
    }
    .fui-details-property-hint {
      color: oklch(from var(--color-text) 40% 0 0);
      display: block;
      font-size: 0.9em;
      font-style: italic;
    }
  }
}

/* Components/DataDisplay/DirectoryTree/_directory_tree.css */
@layer components {
  .fui-directory-tree {
    display: flex;
    min-width: fit-content;
    position: relative;
    ul.fui-directory-tree-node-children,
    li.fui-directory-tree-node {
      margin: 0;
      padding: 0;
      list-style: none;
      width: 100%;
    }
    > ul {
      display: flex;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    > ul ul.fui-directory-tree-node-children {
      display: none;
    }
    ul {
      flex-direction: column;
      position: relative;
    }
    .fui-directory-tree-node-rail {
      content: "";
      display: none;
      border-left: var(--border-width-1) solid #d1d5db;
      flex: 1 1 auto;
      position: absolute;
      left: calc(var(--space-2) + 4px);
      top: calc(var(--space-5) + 2px);
      bottom: 0;
      z-index: 2;
    }
    li {
      flex-direction: column;
    }
    .fui-directory-tree-node {
      cursor: default;
      display: flex;
      flex-direction: column;
      position: relative;
      &:has(> label > input[type=radio]:checked) {
        > label {
          background-color: #e2e8f0;
        }
        .fui-directory-tree-node-toggle {
          fill: #fff;
        }
      }
      &:has(input[type=checkbox]:not(:checked)) {
        > ul {
          display: none;
        }
      }
      &:has(> label > label > input[type=checkbox]:checked) {
        > ul {
          display: flex;
        }
      }
      &:has(> label > label > input[type=checkbox]:checked) {
        > .fui-directory-tree-node-rail {
          display: flex;
        }
      }
      label {
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
        padding-right: var(--space-2);
        cursor: pointer;
      }
      .fui-directory-tree-node-toggle {
        width: calc(var(--space-5) - 2px);
        content: "";
        display: flex;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGx1cy1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE0IDFhMSAxIDAgMCAxIDEgMXYxMmExIDEgMCAwIDEtMSAxSDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTF6TTIgMGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlYyYTIgMiAwIDAgMC0yLTJ6Ii8+CiAgPHBhdGggZD0iTTggNGEuNS41IDAgMCAxIC41LjV2M2gzYS41LjUgMCAwIDEgMCAxaC0zdjNhLjUuNSAwIDAgMS0xIDB2LTNoLTNhLjUuNSAwIDAgMSAwLTFoM3YtM0EuNS41IDAgMCAxIDggNCIvPgo8L3N2Zz4K);
        background-repeat: no-repeat;
        background-position: center center;
        min-height: 1px;
        flex-shrink: 0;
        padding: 0;
        &:has(input[type=checkbox]:checked) {
          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZGFzaC1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE0IDFhMSAxIDAgMCAxIDEgMXYxMmExIDEgMCAwIDEtMSAxSDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTF6TTIgMGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlYyYTIgMiAwIDAgMC0yLTJ6Ii8+CiAgPHBhdGggZD0iTTQgOGEuNS41IDAgMCAxIC41LS41aDdhLjUuNSAwIDAgMSAwIDFoLTdBLjUuNSAwIDAgMSA0IDgiLz4KPC9zdmc+Cgo=);
        }
      }
      .fui-directory-tree-node-icon {
        display: flex;
        align-items: center;
        margin-left: var(--space-2);
        svg {
          width: calc(var(--space-3) + 4px);
          height: calc(var(--space-3) + 4px);
          margin-right: var(--space-2);
        }
      }
      .fui-directory-tree-node-label {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        padding: var(--space-2) 0;
        white-space: nowrap;
        font-weight: 450;
      }
      input {
        display: none;
      }
    }
  }
  .fui-directory-tree-node-actions {
    align-items: center;
    display: flex;
    margin-left: var(--space-2);
    position: relative;
    .fuifui-dropdown-menu-trigger button {
      outline: none;
      background-color: transparent;
      border: 1px solid var(--default-border-color);
      border-radius: calc(var(--space-8) + 4px);
      display: flex;
      align-items: center;
      width: var(--space-4);
      height: var(--space-4);
      cursor: pointer;
    }
  }
  .fui-directory-tree-node {
    > label {
      &:hover {
        .fui-directory-tree-node-actions {
          display: flex;
          svg {
            fill: var(--default-border-color);
          }
        }
      }
    }
  }
}

/* Components/DataDisplay/EmailAddress/_emailaddress.css */
@layer components {
  .fui-email-address {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    a {
      text-decoration: none;
    }
    svg {
      margin-right: calc(var(--space-1) + 1px);
      margin-top: calc(var(--space-1) - 2px);
      align-self: center;
    }
  }
}

/* Components/DataDisplay/EntityLabel/_entity_label.css */
@layer components {
  .fui-entity-label {
    display: flex;
    column-gap: var(--space-2);
    align-items: center;
    text-decoration: none;
    background-color: #f9fafb;
    position: relative;
    overflow: hidden;
    border-bottom: var(--border-width-1) solid transparent;
    padding: 0 0.5rem 0 0.5rem;
    &.fui-entity-label-alerted {
      border: var(--border-width-1) solid red;
    }
    &:hover {
      border-bottom-color: var(--color-primary);
      .fui-entity-label-content {
      }
    }
    .fui-entity-label-icon {
      border-radius: 2rem;
      height: calc(var(--space-5) - 2px);
      width: calc(var(--space-5) - 2px);
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        margin-top: calc(var(--space-1) - 2px);
        color: #6b7280;
      }
    }
    .fui-entity-label-content {
      padding: 0.5rem 0 0.5rem 0.25rem;
      font-weight: 500;
    }
    .fui-entity-label-meta {
      display: flex;
      align-items: center;
    }
  }
}

/* Components/DataDisplay/FileLink/_file_link.css */
@layer components {
  .fui-file-link {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    color: var(--color-primary);
    svg {
      margin-right: var(--space-2);
    }
    span {
      color: var(--color-primary);
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* Components/DataDisplay/FileManager/_file_manager.css */
@layer components {
  .fui-file-manager {
    display: grid;
    grid-template-areas: "header header header" "sidebar directorycontents infopane";
    flex: 1 1 auto;
    grid-template-rows: minmax(0, max-content) 1fr;
    grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
    &:has(#show-info-panel[type=checkbox]:checked) {
      .fui-file-manager-details-panel {
        display: flex;
        width: calc((var(--space-8) + 4px) * 4);
      }
    }
    &:has(#view-mode input[type=radio][value=Grid]:checked) {
      .fui-file-manager-folder-directory-contents-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, 200px);
        grid-gap: 2rem;
        background-color: var(--background-secondary);
        align-items: flex-start;
        align-content: flex-start;
        padding: 1.5rem;
        .fui-file-manager-folder-directory-contents-list-view-header {
          display: none;
        }
        .fui-file-manager-directory-item {
          display: flex;
          flex-direction: column;
          height: calc((var(--space-8) + 4px) * 2);
          background-color: #fff;
          border: var(--border-width-1) solid var(--default-border-color);
          &:has(input.selected-state:checked) {
            border-color: var(--color-primary);
          }
          &[data-item-type=folder] {
            .fui-file-manager-directory-item-icon {
              display: none;
            }
            .fui-file-manager-directory-item-name {
              font-weight: 500;
            }
          }
          .fui-file-manager-directory-item-preview {
            display: flex;
            flex: 1 1 auto;
            background: rgb(255, 255, 255);
            background:
              linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.36878501400560226) 83%,
                rgba(153, 153, 153, 0.2147233893557423) 100%);
          }
          .fui-file-manager-directory-item-details {
            display: flex;
            flex-direction: row;
            margin-top: auto;
            border-bottom: 0;
            border-top: var(--border-width-1) solid var(--default-border-color);
            .fui-file-manager-directory-item-icon {
              padding-right: 0;
            }
            .fui-file-manager-directory-item-timestamp {
              display: none;
            }
            .fui-file-manager-directory-item-size {
              display: none;
            }
          }
        }
      }
    }
    .fui-file-manager-details-panel {
      display: none;
      width: 0;
    }
    &:has(.fui-file-manager-search-results) {
      grid-template-areas: "header header" "results infopane";
      grid-template-columns: 1fr 0;
      .fui-file-manager-info-panel > * {
        grid-template-columns: 1fr 400px;
      }
    }
  }
  .fui-file-manager-header {
    grid-area: header;
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .fui-file-manager-search {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .fui-file-manager-view-options {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .fui-file-manager-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    &:has(> *) {
      border-right: var(--border-width-1) solid var(--default-border-color);
      padding: 1rem 1.5rem;
    }
  }
  .fui-file-manager-folder-directory-contents {
    grid-area: directorycontents;
  }
  .fui-file-manager-folder-directory-contents-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  .fui-file-manager-folder-directory-contents-list-view-header {
    display: grid;
    grid-template-columns: calc(var(--space-6) + 2px) 1fr calc(var(--space-8) + 4px) calc(var(--space-9) + var(--space-5)) calc(var(--space-6) + 2px);
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    height: calc(var(--space-5) + 4px);
    line-height: calc(var(--space-5) + 4px);
    font-weight: 500;
    > div {
      padding: 0 1rem;
    }
  }
  .fui-file-manager-directory-item {
    &:has(input.selected-state:checked) {
      background-color: #f3f4f6;
    }
    input.selected-state {
      display: none;
    }
    .fui-file-manager-directory-item-preview {
      display: none;
    }
    .fui-file-manager-directory-item-details {
      display: grid;
      grid-template-columns: var(--space-6) + 2px 1fr var(--space-8) + 4px var(--space-9) + var(--space-5) var(--space-6) + 2px;
      border-bottom: var(--border-width-1) solid var(--default-border-color);
      height: var(--space-5) + 4px;
      line-height: var(--space-5) + 4px;
      cursor: default;
      user-select: none;
      > div {
        padding: 0 1rem;
        white-space: nowrap;
      }
    }
    .fui-file-manager-directory-item-icon {
      padding-right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fui-file-manager-directory-item-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .fui-file-manager-directory-item-actions {
      display: flex;
      align-items: center;
    }
  }
  .fui-file-manager-details-panel {
    grid-area: infopane;
    border-left: var(--border-width-1) solid var(--default-border-color);
    .fui-file-manager-item-details {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      .fui-file-manager-item-details-header {
        padding: 1rem 1.5rem;
        border-bottom: var(--border-width-1) solid var(--default-border-color);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .fui-file-manager-item-details-preview {
        padding: 1rem 1.5rem;
        display: flex;
      }
      .fui-file-manager-item-details-content {
        padding: 0 1.5rem 1rem 1.5rem;
      }
    }
  }
  .fui-file-manager-item-empty {
    justify-content: center;
    margin: 25px auto;
    img {
      width: calc((var(--space-8) + 4px) * 3);
      height: calc((var(--space-8) + 4px) * 3);
    }
  }
}

/* Components/DataDisplay/FixedContent/_fixed_content.css */
@layer components {
  .fui-fixed-content {
    position: sticky;
    &.fui-fixed-content-top-zero {
      top: 0;
    }
    &.fui-fixed-content-top-smaller {
      top: 1rem;
    }
    &.fui-fixed-content-top-small {
      top: 1.5rem;
    }
    &.fui-fixed-content-top-medium {
      top: 3rem;
    }
    &.fui-fixed-content-top-large {
      top: 4.5rem;
    }
    &.fui-fixed-content-top-very-large {
      top: 9rem;
    }
  }
}

/* Components/DataDisplay/FileView/_fileview.css */
@layer components {
  .fui-file-view {
    display: flex;
    flex-direction: row;
  }
  .fui-file-view-contents {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }
  .fui-file-view-header {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    border-bottom: solid var(--border-width-1) var(--default-border-color);
    > * {
      padding: 1rem;
      font-weight: 500;
    }
    .fui-file-view-item-label {
      width: auto;
      flex: 1 1 auto;
    }
    .fui-file-view-item-size {
      width: calc(var(--space-9) + 22px);
    }
    .fui-file-view-item-label {
      width: calc(var(--space-9) + 22px);
    }
    .fui-file-view-item-actions {
      min-width: calc(var(--space-6) + 2px);
    }
  }
  .fui-file-view-item {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    border-bottom: solid var(--border-width-1) var(--default-border-color);
    &:hover:not(:has(.row-selected-toggle:checked)) {
      > * {
      }
    }
    &:has(.row-selected-toggle:checked) {
      background-color: var(--color-primary);
      > *,
      a {
        color: var(--inverted-font-color);
      }
    }
    > * {
      padding: 0.75rem;
      user-select: none;
      display: flex;
      align-items: center;
    }
    .row-selected-toggle {
    }
    .fui-file-view-item-icon {
      padding-right: 0;
    }
    .fui-file-view-item-label {
      width: auto;
      flex: 1 1 auto;
      padding-left: 0.5rem;
    }
    .fui-file-view-item-size {
      width: calc(var(--space-9) + 22px);
    }
    .fui-file-view-item-label {
      width: calc(var(--space-9) + 22px);
    }
    .fui-file-view-item-actions {
      min-width: calc(var(--space-6) + 2px);
      justify-content: center;
    }
  }
}

/* Components/DataDisplay/Hero/_hero.css */
@layer components {
  .fui-hero {
    display: flex;
    flex: 1 1 auto;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* Components/DataDisplay/Image/_image.css */
@layer components {
  .fui-image {
    display: flex;
    img {
      width: 100%;
    }
  }
}

/* Components/DataDisplay/KanbanChart/_kanban_chart.css */
@layer components {
  .fui-kanban-chart {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    ul,
    li {
      list-style: none;
      padding: 0;
    }
    ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-column-gap: 1rem;
      width: 100%;
      margin: 0;
    }
  }
  .fui-kanban-chart-column {
    background-color: #fafafa;
    margin: 0;
    padding: 0;
    section {
      padding: 0;
    }
  }
  .fui-kanban-chart-column-header {
    border-bottom: solid var(--border-width-1) var(--default-border-color);
    height: calc(var(--space-7) - 4px);
    justify-content: center;
    align-items: center;
    display: flex;
    .fui-kanban-chart-column-header-title {
      padding: 1rem;
    }
  }
}

/* Components/DataDisplay/Label/_label.css */
@layer components {
  .fui-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .fui-label {
    border: solid var(--border-width-1) #374151;
    border-radius: var(--space-5);
    padding: var(--space-1) calc(var(--space-2) + 2px);
    font-size: 0.9rem;
    color: #374151;
    background-color: #e5e7eb;
    white-space: nowrap;
    margin: 0;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    font-weight: 500;
    align-self: flex-start;
    height: var(--space-5);
    &.fui-label-style-block {
      border-radius: 0;
    }
    &.fui-label-style-tag {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .fui-label-icon {
      display: flex;
      align-items: center;
      & + .fui-label-text {
        margin-left: calc(var(--space-1) + 1px);
      }
    }
    > span {
      align-items: center;
      display: flex;
      .oi,
      i {
        margin-right: calc(var(--space-1) + 1px);
      }
    }
    .fui-label-action {
      display: flex;
      align-items: center;
      margin-left: calc(var(--space-1) + 1px);
    }
  }
  .fui-label-warning {
    background-color: var(--color-warning);
  }
  .fui-label-green,
  .fui-label-success {
    background-color: #dcfce7;
    color: #15803d;
    border-color: #15803d;
  }
  .fui-label-blue,
  .fui-label-notification {
    background-color: var(--color-primary);
    color: #cbe7e7;
  }
  .fui-label-magenta {
    background-color: #ebc1DD;
    color: #a20185;
    border-color: #a810a8;
  }
  .fui-label-brown {
    background-color: #be8f04;
    color: #000000;
  }
  .fui-label-orange {
    background-color: #fed7aa;
    color: #c2410c;
    border-color: #c2410c;
  }
  .fui-label-yellow {
    background-color: #fef08a;
    color: #a16207;
    border-color: #a16207;
  }
  .fui-label-purple {
    background-color: #c4b5fd;
    color: #7c3aed;
    border-color: #7c3aed;
  }
  .fui-label-red,
  .fui-label-error {
    background-color: #fecaca;
    color: #b91c1c;
    border-color: #b91c1c;
  }
}

/* Components/DataDisplay/List/_list.css */
@layer components {
  .fui-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .fui-list-subheader {
    margin-bottom: var(--space-3);
    .fui-list-subheader-text {
      color: var(--secondary-text-color);
      font-weight: 500;
    }
  }
  .fui-list-item {
    list-style: none;
    padding: var(--space-2);
    margin: 0;
    display: grid;
    flex-direction: row;
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    &:last-child {
      border-bottom: none;
    }
  }
  .fui-list-item-icon {
    display: flex;
    margin-right: var(--space-3);
    align-items: center;
  }
  .fui-list-item-text-secondary {
    margin-top: var(--space-2);
  }
  .fui-list-item-actions {
    display: flex;
    align-items: center;
  }
}

/* Components/DataDisplay/LocaleLabel/_localelabel.css */
@layer components {
  .fui-locale-label {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--space-1) + 2px) var(--space-2);
    background-color: #e2e8f0;
    border-radius: var(--radius-xs);
    .fui-locale-label-icon + span {
      margin-left: calc(var(--space-1) + 1px);
    }
  }
  .fib {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
  }
  .fi {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
  }
  .fi:before {
    content: "\a0";
  }
  .fi.fis {
    width: 1em;
  }
}

/* Components/DataDisplay/MasterDetailsView/_master_details_view.css */
@layer components {
  .fui-master-details-view {
    display: grid;
    grid-template: "master details";
    grid-template-columns: minmax(300px, max-content) minmax(0, 1fr);
    flex: 1 1 auto;
  }
  .fui-master-details-view-master-content {
    display: flex;
    grid-area: master;
    flex-direction: column;
    flex: 1 1 auto;
    border-right: var(--border-width-1) solid var(--default-border-color);
    ul {
      margin: 0;
      padding: 0;
      li {
        border-bottom: var(--border-width-1) solid var(--default-border-color);
        list-style: none;
        cursor: pointer;
        label {
          cursor: pointer;
          padding: var(--space-3);
        }
        input[name=master_item_id] {
          display: none;
        }
        &:has(input[type=radio]:checked) {
          background-color: #e0f2fe;
          box-shadow: 3px 0 0 0 var(--color-primary inset);
        }
        &:hover:not(:has(input[type=radio]:checked)) {
          background-color: #f0f9ff;
          box-shadow: 3px 0 0 0 var(--color-primary inset);
        }
      }
    }
  }
  .fui-master-details-view-master-content-header {
    display: flex;
    border-bottom: var(--border-width-1) solid var(--default-border-color);
  }
  .fui-master-details-view-master-item {
    display: grid;
    grid-template: "icon title actions" "icon description actions" "icon meta actions";
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    align-items: center;
  }
  .fui-master-details-view-master-item-icon {
    grid-area: icon;
    margin-right: var(--space-3);
  }
  .fui-master-details-view-master-item-title {
    grid-area: title;
    margin-bottom: var(--space-2);
  }
  .fui-master-details-view-master-item-description {
    grid-area: description;
    margin-bottom: var(--space-2);
  }
  .fui-master-details-view-master-item-meta {
    grid-area: meta;
  }
  .fui-master-details-view-master-item-actions {
    grid-area: actions;
  }
  .fui-master-details-view-child-content {
    display: flex;
    grid-area: details;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

/* Components/DataDisplay/Masthead/_masthead.css */
@layer components {
  .fui-masthead {
    display: flex;
    min-height: calc((var(--space-8) + 4px) * 2);
    padding: var(--space-6);
    background-repeat: repeat;
    object-fit: none;
    &.fui-masthead-image-center {
      background-position: center;
    }
    &.fui-masthead-image-center-bottom {
      background-position: center bottom;
    }
    &.fui-masthead-image-center-top {
      background-position: center top;
    }
    &.fui-masthead-image-left {
      background-position: left;
    }
    &.fui-masthead-image-left-bottom {
      background-position: left bottom;
    }
    &.fui-masthead-image-left-top {
      background-position: left top;
    }
    &.fui-masthead-image-right {
      background-position: right;
    }
    &.fui-masthead-image-right-bottom {
      background-position: right bottom;
    }
    &.fui-masthead-image-right-top {
      background-position: right top;
    }
  }
}

/* Components/DataDisplay/MediaEmbed/_media_embed.css */
@layer components {
  .fui-media-embed {
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: calc((var(--space-8) + 4px) * 3);
    embed {
      display: flex;
      width: 100%;
      height: calc((var(--space-8) + 4px) * 8);
    }
    img {
      max-height: calc((var(--space-8) + 4px) * 3);
    }
    audio {
      width: 100%;
    }
    video {
      width: 100%;
      max-height: calc((var(--space-8) + 4px) * 3);
    }
  }
  .fui-media-embed:has(embed) {
    max-height: calc((var(--space-8) + 4px) * 8);
  }
}

/* Components/DataDisplay/MultilingualProperty/_multilingual_property.css */
@layer components {
  .fui-multilingual-property {
    display: flex;
    flex: 1 1 auto;
    .fui-multilingual-property-tabs {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      input[type=radio] {
        display: none;
        &:checked {
          + .fui-multilingual-property-tabs-content {
            display: flex;
            order: 1;
            + .fui-multilingual-property-tabs-label {
              border: none;
              label {
                background-color: var(--color-primary);
                border-color: var(--color-primary);
                color: #fff;
              }
            }
          }
        }
      }
      .fui-multilingual-property-tabs-content {
        display: none;
        width: 100%;
        flex-direction: column;
        & > * {
          max-width: 80ch;
        }
        &:has(+ .fui-multilingual-property-tabs-label) {
          margin-bottom: var(--space-2);
          border-bottom: var(--border-width-1) solid var(--default-border-color);
        }
      }
      .fui-multilingual-property-tabs-label {
        display: inline-flex;
        order: 100;
        font-size: 0.8em;
        height: var(--space-5);
        margin-top: var(--space-1);
        label {
          display: flex;
          min-width: calc(var(--space-5) - 2px);
          padding: var(--space-1) calc(var(--space-2) - 2px);
          border-radius: calc(var(--space-3) + 4px);
          margin-right: var(--space-1);
          background-color: #fff;
          border: var(--border-width-1) solid var(--default-border-color);
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}

/* Components/DataDisplay/PageHeader/_page_header.css */
@layer components {
  .fui-page-header {
    flex-direction: row;
    align-content: center;
    display: grid;
    grid-template-areas: "navigation navigation navigation" "icon title meta" "icon subtitle meta" "footer footer footer";
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, min-content);
    grid-template-rows: minmax(0, auto) 1fr minmax(0, auto) minmax(0, auto);
    &:has(.fui-page-header-footer .fui-nav-bar.fui-nav-bar-style-tabs) {
      padding-bottom: 0;
    }
    &.fui-page-header-sticky {
      position: sticky;
      top: 3.5rem;
      background-color: #fff;
      z-index: 1000;
    }
    .fui-page-header-navigation {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: var(--space-3);
      margin-bottom: var(--space-3);
      grid-area: navigation;
    }
    .fui-page-header-icon {
      display: flex;
      flex-direction: column;
      margin-right: var(--space-3);
      justify-content: center;
      border: solid var(--border-width-1) #000;
      border-radius: calc(var(--space-2) - 2px);
      align-items: center;
      padding: var(--space-1);
      align-self: center;
      grid-area: icon;
    }
    .fui-page-header-title-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      grid-area: title;
      .fui-page-header-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        h2 {
          margin-top: var(--space-1) - 2px;
        }
      }
      .fui-page-header-title-flare {
        margin-left: var(--space-2);
      }
    }
    .fui-page-header-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: var(--space-5);
      grid-area: title;
    }
    h1 {
      margin: 0;
      font-size: var(--font-size-3);
      display: flex;
      align-content: center;
      align-items: center;
    }
    .fui-page-header-subtitle {
      max-width: 80ch;
      margin-top: calc(var(--space-1) - 2px);
      grid-area: subtitle;
    }
    .fui-page-header-meta {
      margin-left: auto;
      justify-content: center;
      display: flex;
      align-items: center;
      grid-area: meta;
    }
    .fui-page-header-footer {
      display: flex;
      flex-direction: column;
      grid-area: footer;
    }
  }
}

/* Components/DataDisplay/Panel/_panel.css */
@layer components {
  .fui-panels {
    overflow: hidden;
    margin-bottom: 0;
    border-radius: var(--default-border-radius);
    border: solid var(--border-width-1) var(--default-border-color);
    .fui-panels-header {
      display: flex;
      padding: 0.75rem 1rem 1rem 0.75rem;
      align-items: center;
      justify-content: space-between;
      background-color: #f1f5f9;
      border-bottom: var(--border-width-3) double #d4d4d4;
      &:has(.fui-panels-header-extra) {
        padding: 0.5rem 1rem 0.5rem 1rem;
      }
      .fui-panels-title {
        width: 100%;
        header {
          font-weight: 500;
          font-size: 1.1rem;
          line-height: 1;
        }
      }
    }
    .fui_panels_collapsable {
      .fui-panels-collapsed-state {
        display: none;
        + label .fui-panel-collapsed-state-expanded-icon {
          display: flex;
          cursor: pointer;
          margin-left: var(--space-3);
          align-items: center;
        }
        + label .fui-panel-collapsed-state-collapsed-icon {
          display: none;
          cursor: pointer;
        }
        &:checked + label {
          .fui-panel-collapsed-state-expanded-icon {
            display: none;
          }
          .fui-panel-collapsed-state-collapsed-icon {
            display: block;
            margin-left: var(--space-2);
            align-items: center;
          }
        }
      }
      &:has(.fui-panels-collapsed-state:not(:checked)) {
        .fui-panel-body {
          display: flex;
        }
        .fui-panel-footer {
          display: flex;
        }
      }
      &:has(.fui-panels-collapsed-state:checked) {
        .fui-panel-header {
          margin-bottom: 0;
          border-bottom: none;
        }
        .fui-panel-body {
          display: none;
        }
        .fui-panel-footer {
          display: none;
        }
      }
    }
    > .fui-panel {
      border: none;
      border-bottom: solid var(--border-width-1) #d4d4d4;
      align-self: flex-start;
      border-radius: 0;
      box-shadow: none;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .fui-panel {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: solid var(--border-width-1) var(--default-border-color);
    &.v-expand {
      height: auto;
      > .fui-panel-body {
        height: auto;
      }
    }
    &.fui-panel-compact {
      > .fui-panel-header {
        margin-bottom: 0;
      }
      > .fui-panel-body {
        padding: 0;
      }
    }
    .fui-panel-header {
      display: flex;
      padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
      align-items: center;
      justify-content: space-between;
      border-bottom: var(--border-width-3) double #d4d4d4;
      &:has(+ .fui-panel-toolbar) {
        margin-bottom: 0;
      }
      &:has(.fui-panel-header-extra) {
        padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
      }
      .fui-panel-title {
        width: 100%;
        header {
          font-weight: 500;
          font-size: 1.1rem;
          line-height: 1;
        }
      }
      h1,
      h2,
      h3,
      h4,
      h5 {
        margin: 0;
      }
    }
    .fui-panel-toolbar {
      display: flex;
      background-color: oklch(98.5% 0.002 247.839);
      border-bottom: solid var(--border-width-1) oklch(86.9% 0.005 56.366);
      margin-bottom: var(--space-3);
    }
    .fui-panel-body {
      padding: var(--space-3);
      overflow: hidden;
      height: 100%;
      > .fui-content-view:first-child:last-child {
        height: 100%;
      }
    }
    .fui-panel-footer {
      border-top: solid var(--border-width-1) var(--default-border-color);
      padding: var(--space-3);
      display: flex;
      &:not(:has(> *)) {
        display: none;
        border-top: none;
      }
    }
  }
  .fui-panel-welled {
    background-color: #ebebeb;
    box-shadow: none !important;
  }
  .fui-panel-raised {
    border: var(--border-width-1) solid var(--default-border-color);
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }
  .fui_panel_collapsable {
    .fui-panel-collapsed-state {
      display: none;
      + label .fui-panel-collapsed-state-expanded-icon {
        display: flex;
        cursor: pointer;
        margin-left: var(--space-2);
        align-items: center;
      }
      + label .fui-panel-collapsed-state-collapsed-icon {
        display: none;
        cursor: pointer;
      }
      &:checked + label {
        .fui-panel-collapsed-state-expanded-icon {
          display: none;
        }
        .fui-panel-collapsed-state-collapsed-icon {
          display: block;
          margin-left: var(--space-2);
          align-items: center;
        }
      }
    }
    &:has(.fui-panel-collapsed-state:not(:checked)) {
      .fui-panel-body {
        display: flex;
        flex-direction: column;
      }
      .fui-panel-footer {
        display: flex;
        &:not(:has(> *)) {
          display: none;
          border-top: none;
        }
      }
    }
    &:has(.fui-panel-collapsed-state:checked) {
      .fui-panel-header {
        margin-bottom: 0;
        border-bottom: none;
      }
      .fui-panel-body {
        display: none;
      }
      .fui-panel-footer {
        display: none;
      }
    }
  }
}

/* Components/DataDisplay/Persona/_persona.css */
@layer components {
  .fui-personas {
    display: flex;
    flex-direction: row;
    .fui-persona {
      margin-left: -2.5%;
      overflow: visible;
      .fui-persona-avatar {
        border: var(--border-width-1) solid #fff;
      }
    }
  }
  .fui-persona {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    .fui-persona-avatar {
      border-radius: 100%;
      position: relative;
      color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      background-size: cover;
      flex-shrink: 0;
      border: var(--border-width-1) solid #f3f4f6;
      svg {
        width: 60%;
        height: 60%;
      }
    }
    .fui-persona-description {
      display: flex;
      flex-direction: column;
      .fui-persona-description-secondary-label {
        color: rgba(0, 0, 0, 0.7);
      }
      .fui-persona-description-tertiary-label {
        color: rgba(0, 0, 0, 0.7);
      }
    }
    &.fui-persona-size-very-small {
      font-size: 0.9rem;
      .fui-persona-avatar {
        height: 1.75rem;
        width: 1.75rem;
        line-height: 0.8rem;
        font-size: calc(1.75rem / 2.5);
      }
      .fui-persona-description {
        margin-left: var(--space-2);
        .fui-persona-description-label {
          font-size: 0.875rem;
          font-weight: 500;
        }
        .fui-persona-description-secondary-label {
          font-size: 0.75rem;
        }
      }
    }
    &.fui-persona-size-small {
      font-size: var(--space-3);
      .fui-persona-avatar {
        height: 2.2rem;
        width: 2.2rem;
        line-height: var(--space-3);
        font-size: calc(2.2rem / 2.5);
      }
      .fui-persona-description {
        margin-left: var(--space-2);
        .fui-persona-description-label {
          font-size: 0.875rem;
          font-weight: 500;
        }
        .fui-persona-description-secondary-label {
          font-size: 0.75rem;
        }
      }
    }
    &.fui-persona-size-medium {
      .fui-persona-avatar {
        height: var(--space-6);
        width: var(--space-6);
        line-height: var(--space-3);
        font-size: calc(3rem / 2.5);
      }
      .fui-persona-description {
        margin-left: var(--space-2);
        .fui-persona-description-label {
          font-size: var(--space-3);
          font-weight: 500;
        }
        .fui-persona-description-secondary-label {
          font-size: 0.875rem;
        }
      }
    }
    &.fui-persona-size-large {
      min-height: var(--space-5) + 4px;
      font-size: var(--space-3);
      .fui-persona-avatar {
        width: var(--space-7);
        height: var(--space-7);
        line-height: var(--space-3);
        font-size: calc(4rem / 2.5);
      }
      .fui-persona-description {
        margin-left: 0.75rem;
        .fui-persona-description-label {
          font-size: 1rem;
          font-weight: 500;
        }
        .fui-persona-description-secondary-label {
          font-size: 0.875rem;
        }
        .fui-persona-description-tertiary-label {
          font-size: 0.875rem;
        }
      }
    }
  }
}

/* Components/DataDisplay/ProgressStepper/_progress_stepper.css */
@layer components {
  .fui-progress-stepper {
    display: flex;
    &.fui-progress-stepper-centered {
      &.fui-progress-stepper-horizontal ul {
        width: 100%;
        justify-content: center;
        .fui-progress-stepper-step {
          &:first-child {
            .fui-progress-stepper-step-indicator-container {
              &:before {
                background-color: transparent;
              }
            }
          }
          &:last-child {
            .fui-progress-stepper-step-indicator-container {
              &:after {
                content: "";
                display: flex;
                background-color: transparent;
              }
            }
          }
          .fui-progress-stepper-step-indicator-container {
            &:before {
              content: "";
              display: flex;
              height: calc(var(--space-1) - 2px);
              background-color: var(--default-border-color);
              flex: 1 1 auto;
            }
            &:after {
              content: "";
              display: flex;
              height: calc(var(--space-1) - 2px);
              background-color: var(--default-border-color);
              flex: 1 1 auto;
            }
          }
        }
        .fui-progress-stepper-step-title {
          display: flex;
          justify-content: center;
        }
        .fui-progress-stepper-step-description {
          display: flex;
          justify-content: center;
        }
      }
    }
    &.fui-progress-stepper-horizontal ul {
      flex-direction: row;
      width: 100%;
      flex: 1 1 auto;
      .fui-progress-stepper-step {
        flex-direction: column;
        min-width: var(--space-9);
        &:last-child {
          .fui-progress-stepper-step-indicator-container {
            &:after {
              display: none;
            }
          }
        }
        .fui-progress-stepper-step-indicator-container {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: calc(var(--space-1) + 1px);
          &:after {
            content: "";
            display: flex;
            height: calc(var(--space-1) - 2px);
            background-color: var(--default-border-color);
            flex: 1 1 auto;
          }
          .fui-progress-stepper-step-indicator {
          }
        }
      }
    }
    &.fui-progress-stepper-vertical ul {
      flex-direction: column;
      height: 100%;
      flex: 1 1 auto;
      .fui-progress-stepper-step {
        flex-direction: row;
        min-height: calc(var(--space-6) - 8px);
        .fui-progress-stepper-step-indicator-container {
          display: flex;
          flex-direction: column;
          margin-right: var(--space-2);
          align-items: center;
          &:after {
            content: "";
            display: flex;
            height: 100%;
            border-left: var(--border-width-2) solid var(--default-border-color);
          }
        }
        .fui-progress-stepper-step-content {
        }
        .fui-progress-stepper-step-title {
          margin-top: -4px;
        }
        .fui-progress-stepper-step-body {
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          margin-bottom: 2rem;
          header {
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .fui-progress-stepper-step:last-child {
        .fui-progress-stepper-step-indicator-container {
          &:after {
            display: none;
          }
        }
      }
    }
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .fui-progress-stepper-step {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      .fui-progress-stepper-step-indicator {
        border: var(--border-width-2) solid var(--default-border-color);
        content: "";
        border-radius: 50%;
        width: calc(var(--space-4) + 4px);
        height: calc(var(--space-4) + 4px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }
      .fui-progress-stepper-step-title {
        font-weight: 500;
        font-size: var(--space-3);
      }
      .fui-progress-stepper-step-description {
        color: #71717a;
      }
    }
  }
}

/* Components/DataDisplay/PropertiesTable/_properties_table.css */
@layer components {
  .fui-properties-table {
    display: grid;
    grid-template-columns: minmax(0, min-content) 1fr;
  }
  .fui-property-table-property-label {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg);
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    border-right: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    align-items: center;
    white-space: nowrap;
    &:last-child {
      border-bottom: none;
    }
  }
  .fui-property-table-property-content {
    justify-content: flex-start;
    padding: var(--space-2);
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    align-items: center;
    &:last-child {
      border-bottom: none;
    }
  }
}

/* Components/DataDisplay/SearchCriteriaChips/_search_criteria_chips.css */
@layer components {
  .fui-search-criteria-chips-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    row-gap: var(--space-2);
    .fui-search-criteria-chips-list-label {
      display: flex;
      align-items: center;
      margin-right: var(--space-2);
      font-weight: 500;
      height: calc(var(--space-5) + 4px);
    }
    .fui-search-criteria-chips-clear {
      display: flex;
      align-items: center;
      margin-right: var(--space-2);
      font-weight: 500;
      height: calc(var(--space-5) + 4px);
    }
  }
  .fui-search-criteria-chip {
    display: flex;
    flex-direction: row;
    border-radius: calc(var(--space-3) + 4px);
    overflow: hidden;
    margin: 0 0.5rem 0 0;
    padding: 0;
    list-style: none;
    height: calc(var(--space-5) + 4px);
    &.fui-search-criteria-chip-type-keyword {
      background-color: #fef3c7;
    }
    &.fui-search-criteria-chip-type-filter {
      background-color: #e0f2fe;
    }
  }
  .fui-search-criteria-chip-label {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
    white-space: nowrap;
    &:has(+ .fui-search-criteria-chip-value) {
      &:after {
        content: ":";
        display: flex;
        align-items: center;
        margin-left: var(--space-1);
        margin-right: var(--space-1);
      }
    }
  }
  .fui-search-criteria-chip-value {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-1) var(--space-2) 0;
    white-space: nowrap;
  }
  .fui-search-criteria-chip-dismiss {
    display: flex;
    align-items: center;
    margin-right: var(--space-2);
    margin-left: var(--space-1);
    svg {
      fill: var(--color-primary);
    }
  }
}

/* Components/DataDisplay/Section/_section.css */
@layer components {
  .fui-section {
    display: flex;
    flex-direction: column;
    padding: 0;
    .fui-section-header {
      padding: 0.75rem;
      background-color: #f4f4f5;
      margin-bottom: var(--space-3);
      font-weight: 500;
      border-radius: calc(var(--space-1) - 2px);
    }
  }
}

/* Components/DataDisplay/Statistic/_statistic.css */
@layer components {
  .fui-statistic {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3);
    flex-direction: row;
    border: var(--border-width-1) solid var(--default-border-color);
    border-radius: var(--space-1);
    background-color: #fff;
  }
  .fui-statistic-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: var(--space-3);
    margin-left: var(--space-3);
  }
  .fui-statistic-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .fui-statistic-value {
    font-weight: 700;
    font-size: 2.5rem;
  }
  .fui-statistic-label {
    font-weight: 400;
  }
  .fui-statistic-actions {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    margin-top: var(--space-2);
  }
}

/* Components/DataDisplay/Table/_table.css */
@layer components {
  .fui-table-wrapper {
    flex: 1 1 auto;
    &.fui-table-bordered {
      .fui-table {
        border: var(--border-width-1) solid #e8e8e8;
      }
      .fui-table-title {
        border: var(--border-width-1) solid #e8e8e8;
        border-bottom-width: 0;
      }
      .fui-table-empty {
        border: var(--border-width-1) solid #e8e8e8;
        display: flex;
        padding: 1rem;
      }
      .fui-table-footer {
        border: var(--border-width-1) solid #e8e8e8;
        border-top-width: 0;
      }
    }
    .fui-table-title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: var(--space-2);
      align-items: center;
      h1,
      h2,
      h3,
      h4,
      h5 {
        margin: 0;
      }
      .fui-pagination {
        justify-self: flex-end;
      }
    }
    .fui-table-head {
      tr {
        th {
          font-weight: 500;
          padding: calc(var(--space-2) + 2px);
          text-align: left;
          background: #fafafa;
          border-bottom: var(--border-width-1) solid #e8e8e8;
        }
      }
    }
    .fui-table-footer {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0.5rem;
      .fui-pagination {
        justify-self: flex-end;
      }
    }
    .fui-table {
      width: 100%;
      text-align: left;
      border-radius: var(--space-1) var(--space-1) 0 0;
      border-collapse: separate;
      border-spacing: 0;
      .fui-table-column-collapse {
        width: 1px;
        white-space: nowrap;
      }
      .fui-table-body {
        tr {
          &:hover {
            td {
              background-color: #f9fafb;
            }
          }
          td {
            border-bottom: var(--border-width-1) solid #e8e8e8;
            padding: calc(var(--space-2) + 2px);
          }
          &:last-child {
            td {
              border-bottom-width: 0;
            }
          }
        }
      }
    }
    &.fui-table-style-properties {
      .fui-table-body {
        tr {
          td:first-child {
            background-color: var(--background-secondary);
            font-weight: 500;
          }
        }
      }
    }
  }
}

/* Components/DataDisplay/Tabs/_tab.css */
@layer components {
  :root {
    --tabs-light-gray: #F0F0F0;
  }
  .fui-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    .fui-tab-details {
      display: contents;
      &[open] {
        .fui-tab {
          background-color: #fff;
          font-weight: 500;
          &:after {
            background-color: #fff;
          }
        }
      }
    }
    @supports selector(::details-content) {
      .fui-tab-details[open]::details-content {
        display: contents;
      }
    }
    .fui-tab {
      padding: var(--space-2) var(--space-3);
      display: block;
      order: 0;
      margin-right: 0.35rem;
      cursor: pointer;
      &:hover,
      &:focus {
        border-color: #fff;
      }
      &::-webkit-details-marker {
        display: none;
      }
    }
    .fui-tabs-divider {
      order: 1;
      width: 100%;
      display: block;
      border-top: var(--border-width-1) solid var(--default-border-color);
    }
    .fui-tab-content {
      order: 2;
      width: 100%;
      display: block;
      height: calc(100% - 43px);
    }
  }
  .fui-tabs-style-default {
  }
  .fui-tabs-style-pilled {
    .fui-tab-details {
      &[open] {
        .fui-tab {
          border-bottom-color: #fff;
          border-top-color: var(--color-primary);
          border-top-width: var(--border-width-2);
          &:after {
            border-bottom-color: #fff;
            border-top-color: var(--color-primary);
            border-top-width: var(--border-width-2);
            top: -2px;
          }
        }
      }
    }
    .fui-tab-details .fui-tab {
      height: calc(var(--space-5) - 6px);
      padding: 0.65rem 1rem;
      position: relative;
      border: var(--border-width-1) solid var(--default-border-color);
      margin-right: calc(var(--space-2) + 2px);
      cursor: pointer;
      border-radius: calc(var(--space-5) - 2px);
      align-items: center;
      display: flex;
      box-sizing: border-box;
      background-color: var(--color-bg);
      bottom: -1px;
      &:after {
        width: calc(var(--space-3) + 4px);
        height: calc(var(--space-5) - 6px);
        content: "";
        transform: skewX(15deg);
        position: absolute;
        border-radius: calc(var(--space-5) - 2px);
        right: -6px;
        top: -1px;
        bottom: -1px;
        background-color: var(--color-bg);
      }
      &:first-child {
        margin-left: calc(var(--space-1) - 2px);
      }
      .fui-tab-icon {
        margin-right: calc(var(--space-1) + 1px);
        display: flex;
        margin-left: var(--space-3);
      }
      .fui-tab-label {
      }
    }
    .fui-tab-content {
    }
  }
  .fui-tabs-style-raised {
    .fui-tab-details {
      &[open] {
        .fui-tab {
          border-bottom-color: #fff;
          border-top-color: var(--color-primary);
          border-top-width: var(--border-width-2);
          &:after {
            border-bottom-color: #fff;
            border-top-color: var(--color-primary);
            border-top-width: var(--border-width-2);
            top: -2px;
          }
        }
      }
    }
    .fui-tab-details .fui-tab {
      height: calc(var(--space-6) - 6px);
      padding: 0.65rem 1rem;
      position: relative;
      border: var(--border-width-1) solid var(--default-border-color);
      border-right: none;
      border-top-left-radius: var(--radius-sm);
      border-top-right-radius: var(--radius-sm);
      margin-right: calc(var(--space-2) + 2px);
      cursor: pointer;
      align-items: center;
      display: flex;
      box-sizing: border-box;
      background-color: var(--color-bg);
      bottom: -1px;
      &:after {
        width: calc(var(--space-3) + 4px);
        height: calc(var(--space-6) - 6px);
        content: "";
        transform: skewX(15deg);
        position: absolute;
        right: -6px;
        border-top: var(--border-width-1) solid var(--default-border-color);
        border-right: var(--border-width-1) solid var(--default-border-color);
        border-bottom: var(--border-width-1) solid var(--default-border-color);
        border-top-right-radius: var(--space-1);
        top: -1px;
        bottom: -1px;
        background-color: var(--color-bg);
      }
      &:first-child {
        margin-left: calc(var(--space-1) - 2px);
      }
      .fui-tab-icon {
        margin-right: calc(var(--space-1) + 1px);
        display: flex;
        margin-left: var(--space-3);
      }
      .fui-tab-label {
      }
    }
    .fui-tab-content {
    }
  }
  .fui-tabs-direction-left {
    flex-direction: column;
    summary {
      max-width: calc((var(--space-8) + 4px) * 2);
    }
  }
}

/* Components/DataDisplay/Timeline/_timeline.css */
@layer components {
  .fui-timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    > ul {
      padding: 0;
      margin: 0;
    }
    ul,
    li {
      list-style: none;
    }
  }
  .fui-timeline-event {
    display: flex;
    flex-direction: row;
    &:last-child {
      .fui-timeline-event-connector {
        display: none !important;
      }
      .fui-timeline-event-content {
        margin-bottom: 0 !important;
      }
    }
    .fui-timeline-event-separator {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .fui-timeline-event-marker {
        width: calc(var(--space-2) + 2px);
        height: calc(var(--space-2) + 2px);
        border-radius: calc(var(--radius-md) + 2px);
        border: var(--border-width-2) solid var(--default-border-color);
        content: "";
        display: flex;
      }
      .fui-timeline-event-connector {
        content: "";
        display: flex;
        border-right: solid var(--border-width-1) var(--default-border-color);
        flex: 1 1 auto;
      }
    }
    .fui-timeline-event-content {
      margin-left: var(--space-3);
      margin-top: -4px;
      margin-bottom: var(--space-5);
    }
  }
}

/* Components/DataDisplay/Togglable/_toggable.css */
@layer components {
  .fui-togglable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    &.expanded {
      &.fui-toggable-content {
        display: flex;
      }
    }
  }
  .fui-toggable-trigger {
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    &:hover {
      cursor: pointer;
    }
  }
  .fui-togglable-content {
    display: none;
    flex-direction: column;
    width: 100%;
    &:has(.fui-togglable-checkbox:checked) {
      display: flex;
    }
  }
  .fui-togglable-checkbox {
    display: none;
  }
}

/* Components/DataDisplay/Tooltip/_tooltip.css */
@layer components {
  .fui-tooltip {
    display: inherit;
    position: relative;
  }
  .fui-tooltip-content {
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #4b5563;
    padding: calc(var(--space-1) + 1px) calc(var(--space-2) + 2px);
    border-radius: var(--radius-sm);
    font-size: 90%;
    z-index: 100;
    margin: 0;
    border: var(--border-width-1) solid var(--default-border-color);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
    overflow: visible;
    &.active {
      display: block;
    }
  }
  .fui-tooltip-arrow {
    position: absolute;
    background-color: #4b5563;
    width: var(--space-2);
    height: var(--space-2);
    transform: rotate(45deg);
    overflow: visible;
    z-index: 99;
  }
}

/* Components/DataDisplay/Tree/_tree.css */
@layer components {
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .fui-tree {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--space-3) - 1px);
    width: 100%;
    .fui-tree-branch {
      width: 100%;
      &:hover {
        background-color: rgba(52, 152, 219, 0.2);
        box-shadow: inset 0px 0px 0px 1px rgba(52, 152, 219, 0.4);
      }
      &.activated {
        background-color: rgba(52, 152, 219, 0.2);
        box-shadow: inset 0px 0px 0px 1px rgba(52, 152, 219, 0.4);
      }
      &:has(> .fui-tree-node > .fui-tree-node-expander > input[type=radio]:checked) {
        background-color: rgba(52, 152, 219, 0.2);
        box-shadow: inset 0px 0px 0px 1px rgba(52, 152, 219, 0.4);
      }
      .fui-tree-node {
        cursor: default;
        display: flex;
        align-items: center;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding-bottom: var(--space-1);
        padding-top: var(--space-1);
        white-space: nowrap;
        &:not(.has-children) {
          .fui-tree-node-content.is-root {
            margin-left: var(--space-3);
          }
        }
        .has-children {
          .fui-tree-node-content {
            margin-left: 0;
          }
        }
        .fui-tree-node-expander {
          min-width: var(--space-3);
          display: flex;
          align-items: center;
          align-content: center;
          color: #2C3E50;
          flex: 1 1 auto;
          > input {
            display: none;
          }
        }
        .fui-tree-node-busy-spinner {
          animation-name: spin;
          animation-duration: 5000ms;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        input[type=checkbox] {
          height: var(--space-3);
          width: var(--space-3);
        }
        .fui-tree-node-content {
          padding: var(--space-1);
          font-size: 1.1rem;
          width: 100%;
          display: flex;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            svg {
              margin-right: var(--space-2);
              flex-shrink: 0;
            }
          }
          &:hover {
            cursor: pointer;
          }
          i {
            margin-right: calc(var(--space-1) - 2px);
            color: #7FB3D5;
          }
          &.is-root {
            margin-left: 0;
          }
          &.is-leaf {
            margin-right: var(--space-3);
          }
        }
      }
    }
    .fui-tree-node-child-toggle {
      display: none;
      &:checked {
        + .fui-tree-node-children {
          display: block;
        }
      }
      + .fui-tree-node-children {
        display: none;
      }
    }
  }
}

/* Components/DataDisplay/TreeView/_tree_view.css */
@layer components {
  .fui-tree-view {
    list-style: none;
    ul,
    li {
      list-style: none;
      margin: 0;
    }
    ul {
      padding: 0;
      &:first-child {
        > li {
          margin-left: 0;
        }
      }
    }
    li {
      margin: 0 0 0 1.2rem;
    }
    .fui-tree-view-item-children {
      .fui-tree-view-item {
        padding-left: var(--space-2);
      }
    }
    &.fui-tree-view-lined {
      li {
        border-left: var(--border-width-1) solid #f5f5f4;
      }
      ul {
        padding: 0;
        &:first-child {
          > li {
            border-left: none;
          }
        }
      }
    }
  }
  .fui-tree-view-item {
    display: flex;
    flex-direction: row;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    align-items: center;
    min-height: calc(var(--space-5) + 3px);
    color: rgb(81, 92, 102);
    &:hover {
      cursor: pointer;
      background-color: #eff6ff;
    }
    .fui-tree-view-item-icon {
      width: var(--space-4);
      margin-left: var(--space-1);
      display: flex;
      justify-content: center;
    }
    .fui-tree-view-item-label {
      white-space: nowrap;
      padding-left: calc(var(--space-1) + 1px);
      padding-right: calc(var(--space-1) + 1px);
    }
    .fui-tree-view-item-children {
    }
  }
}

/* Components/DataEntry/Checkbox/_checkbox.css */
@layer components {
  .fui-checkbox-list {
    display: flex;
    flex-direction: column;
    .fui-checkbox {
      margin-bottom: var(--space-2);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .fui-checkbox {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    &:hover input ~ .checkmark {
      border-style: solid;
      border-width: var(--border-width-1);
      border-color: #0094ff;
    }
    &:hover input:not(:checked) ~ .checkmark {
      .hover-icon {
        display: block;
      }
    }
    input:checked ~ .checkmark {
      background-color: var(--color-primary);
      color: #fff;
      .checked-icon {
        display: block;
      }
    }
    .checkmark {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      position: relative;
      height: calc(var(--space-3) + 4px);
      width: calc(var(--space-3) + 4px);
      cursor: pointer;
      border: var(--border-width-1) solid var(--color-text);
      border-radius: var(--radius-md);
      svg {
        display: none;
      }
    }
    .label {
      margin-left: calc(var(--space-2) + 2px);
    }
  }
  .fui-checkbox-style-pushbutton {
    height: var(--default-input-height);
    width: var(--default-input-height);
    input:checked ~ .checkmark {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
      background-color: rgba(var(--color-primary), 0.1);
      svg {
        color: var(--color-primary);
      }
    }
    .checkmark {
      height: var(--default-input-height);
      width: var(--default-input-height);
      svg {
        display: flex;
        color: var(--color-primary);
      }
    }
  }
}

/* Components/DataEntry/DatePicker/_date_picker.css */
@layer components {
  .fui-date-picker {
    height: var(--default-input-height);
    width: 171px;
    border-width: var(--border-width-1);
    border-color: var(--input-border-color);
    border-style: solid;
    overflow: hidden;
    border-radius: var(--input-border-radius);
    &:hover {
      border-color: var(--input-hover-outline-color);
    }
    &:focus-within {
      outline: var(--input-focused-outline-width) solid var(--input-focused-outline-color);
      z-index: 2;
      border-color: var(--input-hover-outline-color);
    }
    &:disabled {
      background-color: #E0E0E0;
    }
    input[type=date] {
      height: var(--default-input-height);
      display: block;
      outline: none;
      appearance: none;
      border: none;
      padding: var(--space-1) 0 var(--space-1) var(--space-3);
    }
  }
}

/* Components/DataEntry/DateRangePicker/_daterange_picker.css */
@layer components {
  .fui-date-range-picker-container {
    container-type: inline-size;
  }
  @container (min-width:800px) {
    .fui-date-range-picker {
      grid-template-columns: calc(var(--space-9) + 22px) max-content;
      .fui-date-range-picker-selections {
        padding: 0 var(--space-3);
        border-left-width: 0;
      }
    }
  }
  .fui-date-range-picker {
    display: grid;
    grid-template-columns: 1fr;
    .fui-date-range-picker-selection {
      height: var(--space-5) + 4px;
      cursor: pointer;
      line-height: 1.1;
      border: solid var(--border-width-1) var(--input-border-color);
      border-radius: var(--input-border-radius);
      flex: 1 1 auto;
      align-items: center;
      width: 100%;
      display: grid;
      grid-template-areas: "select";
      .fui-date-range-picker-selection-label {
        grid-area: select;
        appearance: none;
        outline: none;
        background-color: transparent;
        border: none;
        padding: 0 2em 0 var(--space-3);
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: inherit;
        cursor: inherit;
        line-height: inherit;
        height: calc(var(--space-5) + 2px);
        align-items: center;
        display: flex;
      }
      &:after {
        grid-area: select;
        content: "";
        width: 0.8em;
        height: 0.5em;
        margin-right: var(--space-3);
        background-color: #777;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        justify-self: end;
      }
      &:hover {
        border-color: var(--input-hover-outline-color);
      }
    }
    &:has(.fui-native-select select) {
      &:has(option[value=""]:checked) {
        .fui-date-range-picker-selections {
          background-image:
            linear-gradient(
              -45deg,
              #f5f5f5 25%,
              transparent 25%,
              transparent 50%,
              #f5f5f5 50%,
              #f5f5f5 75%,
              transparent 75%,
              transparent);
          background-size: var(--space-1) var(--space-1);
        }
      }
    }
    .fui-date-range-picker-selections {
      display: flex;
      min-width: calc((var(--space-6) + 2px) * 7);
      justify-content: center;
      align-items: center;
      height: var(--default-input-height);
      border: var(--border-width-1) solid var(--input-border-color);
      border-bottom-right-radius: var(--input-border-radius);
      border-top-right-radius: var(--input-border-radius);
      outline: none;
      &:not(:disabled) {
        cursor: pointer;
      }
      &:disabled {
        color: oklch(55.6% 0 0);
        background-color: #f5f5f5;
      }
      button {
        outline: none;
        border: none;
        height: calc(var(--space-5) + 2px);
        align-items: center;
        background-color: transparent;
        cursor: pointer;
        margin-left: var(--space-2);
        svg {
          margin-top: calc(var(--space-1) - 2px);
          height: calc(var(--space-3) + 2px);
          width: calc(var(--space-3) + 2px);
        }
      }
      .fui-date-picker {
        height: 0;
        border: none;
        padding: 0;
        position: absolute;
        right: 0;
      }
      .fui-date-range-picker-selections-separator {
        display: flex;
        align-items: center;
        width: var(--space-3);
      }
      .fui-date-range-picker-start-selection,
      .fui-date-range-picker-end-selection {
        display: flex;
        flex-direction: row;
      }
      .fui-date-range-picker-start-selection-label,
      .fui-date-range-picker-end-selection-label {
        display: none;
        white-space: pre-wrap;
        align-items: center;
        min-width: calc(var(--space-7) + 16px);
        font-size: 0.9rem;
        &.visible {
          display: flex;
        }
      }
      .fui-date-range-picker-start-control,
      .fui-date-range-picker-end-control {
        display: none;
        position: relative;
        &.active {
          display: flex;
        }
      }
    }
  }
  .fui-date-range-picker-options {
    padding-bottom: var(--space-3);
    min-width: calc((var(--space-6) + 2px) * 7);
    select {
      width: 100%;
    }
  }
}

/* Components/DataEntry/DateRangePicker/_daterange_picker2.css */
@layer components {
  .fui-date-range-picker2 {
    line-height: 1.5;
    display: grid;
    margin-right: auto;
    width: 100%;
    grid-template-columns: max(180px, 1fr) max(180px, 1fr);
    grid-row-gap: 0.2rem;
    > div {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border: var(--border-width-1) solid #ccc;
      label {
        width: calc(var(--space-7) - 4px);
        margin-right: var(--space-3);
        padding-left: var(--space-3);
        padding-right: var(--space-2);
        background-color: #f4f4f5;
        align-items: center;
        display: flex;
        height: calc(var(--default-input-height));
      }
    }
    .fui-date-range-picker2-from {
      display: flex;
      flex-direction: row;
      align-items: center;
      float: left;
      span {
        display: block;
        margin-right: calc(var(--space-1) + 1px);
        width: calc(var(--space-6) - 8px);
      }
    }
    .fui-date-range-picker2-to {
      display: flex;
      flex-direction: row;
      align-items: center;
      float: left;
      span {
        display: block;
        margin-right: calc(var(--space-1) + 1px);
        width: calc(var(--space-6) - 8px);
      }
    }
    input {
      border: none;
      background-color: transparent;
      display: inline-flex;
      font-size: var(--font-size-base);
      line-height: 1.5;
      height: calc(var(--default-input-height) - 2px);
      &:focus {
        outline: none;
      }
    }
    input[type=date]::-webkit-calendar-picker-indicator {
    }
    svg {
      margin: 0 0.5rem;
    }
  }
  .fui-date-range-picker2-dates {
  }
  @container datepicker2 (min-width: 400px) {
    .fui-date-range-picker2-dates {
      flex-direction: row;
      height: calc(var(--default-input-height));
      align-items: center;
    }
  }
}

/* Components/DataEntry/EditableElement/_editable_element.css */
@layer components {
  .fui-editable-element {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    &:hover {
      box-shadow: 0 0 1px 2px #0084BD;
      padding-left: calc(var(--space-1) + 1px);
      .fui-editable-element-trigger {
        display: flex;
      }
    }
  }
  .fui-editable-element-content {
  }
  .fui-editable-element-trigger {
    display: none;
    margin: calc(var(--space-1) + 1px) calc(var(--space-1) + 1px) calc(var(--space-1) + 1px) calc(var(--space-2) + 2px);
  }
}

/* Components/DataEntry/FileDropZone/_file_dropzone.css */
@layer components {
  .fui-file-dropzone {
    display: flex;
    flex: 1 1 auto;
    outline: none;
    position: relative;
    &.fui-file-dropzone-receivable {
      &:after {
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        content: "";
        display: flex;
        background-color: rgba(0, 0, 0, 0.3);
        outline: 2px dashed blue;
        pointer-events: none;
      }
    }
  }
  .fui-file-dropzone-prompt-container {
    display: flex;
    padding: 2rem;
    background-color: #f8fafc;
    border: var(--border-width-1) dashed var(--default-border-color);
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .fui-file-dropzone-prompt-message {
      font-weight: 500;
    }
    svg {
      margin-top: var(--space-2);
    }
  }
  tr.fui-file-dropzone {
    display: table-row;
    position: relative;
    &.fui-file-dropzone-receivable {
      &:after {
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        content: "";
        display: flex;
        background-color: rgba(0, 0, 0, 0.3);
        outline: 2px dashed blue;
        pointer-events: none;
      }
    }
  }
}

/* Components/DataEntry/FileUploader/_file_uploader.css */
@layer components {
  .fui-file-upload-status-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: var(--space-3);
    background-color: #f4f4f5;
    flex-direction: column;
    max-height: calc((var(--space-8) + 4px) * 3);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
  }
  .fui-file-upload-progress-item {
    display: grid;
    grid-template-columns: auto 50px;
    grid-template-rows: auto auto;
    grid-template-areas: "filename percent status actions" "progress-bar progress-bar progress-bar progress-bar";
    gap: calc(var(--space-2) + 2px);
    .fui-file-upload-progress-item-filename {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: calc((var(--space-6) + 2px) * 5);
      grid-area: filename;
    }
    .fui-file-upload-progress-item-percent {
      grid-area: percent;
      margin-left: auto;
    }
    .fui-file-upload-progress-item-status {
      grid-area: status;
      margin-left: auto;
    }
    .fui-file-upload-progress-item-actions {
      grid-area: action;
      margin-left: auto;
    }
  }
  .fui-file-upload-progress-bar {
    margin-bottom: var(--space-3);
    grid-area: progress-bar;
    &.error[value] {
      &::-webkit-progress-value {
        background: red;
      }
      &::-moz-progress-bar {
        background: red;
      }
    }
    &[value] {
      -webkit-appearance: none;
      appearance: none;
      height: calc(var(--space-2) + 2px);
      grid-area: progress-bar;
      background-color: #fff;
      border-radius: calc(var(--radius-xl) - 1px);
      width: calc(100% - 2px);
      overflow: hidden;
      &::-webkit-progress-value {
        border-radius: calc(var(--radius-xl) - 1px);
        background: #1d4ed8;
      }
      &::-moz-progress-bar {
        border-radius: calc(var(--radius-xl) - 1px);
        background: #1d4ed8;
      }
    }
  }
}

/* Components/DataEntry/Form/_form.css */
@layer components {
  .fui-form {
    display: flex;
    position: relative;
    flex-direction: column;
    form {
      display: flex;
      width: 100%;
    }
    .fui-form-item:last-child {
      margin-bottom: 0;
    }
    .row:last-child {
      .fui-form-item {
        margin-bottom: 0;
      }
    }
  }
  .fui-form-item {
    display: grid;
    grid-row-gap: 0.75rem;
    flex-direction: column;
    flex: 1 1 auto;
    grid-template-rows: max-content;
    .fui-form-label {
      display: flex;
      flex-direction: row;
      line-height: calc(var(--space-3) + 2px);
      align-items: center;
      padding: 1px 0 0 0;
      font-weight: var(--form-item-label-font-weight);
      &.required {
        .fui-form-label-content {
          span:first-child {
            &:after {
              content: "*";
              color: red;
            }
          }
        }
      }
      > span + * {
        margin-left: var(--space-2);
      }
      .fui-form-label-content {
        display: flex;
        flex-direction: column;
      }
      .fui-form-label-prompt {
        margin-top: var(--space-1);
        font-size: 0.9rem;
        font-weight: 400;
        color: #475569;
      }
      .fui-tooltip-target {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .fui-form-control {
      width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      .fui-form-control-group {
        display: flex;
        width: 100%;
        span {
          display: flex;
          align-items: center;
          margin: 0 calc(var(--space-1) + 1px);
        }
      }
      &:has(+ .validation-message) {
        .fui-input-wrapper {
          box-shadow: 0 0 2px 2px #D21C09;
          border-radius: calc(var(--radius-sm) + 2px);
        }
        .fui-native-select {
          box-shadow: 0 0 2px 2px #D21C09;
          border-radius: calc(var(--radius-sm) + 2px);
        }
        .fui-date-picker {
          box-shadow: 0 0 2px 2px #D21C09;
          border-radius: calc(var(--radius-sm) + 2px);
        }
        .fui-textarea {
          box-shadow: 0 0 2px 2px #D21C09;
          border-radius: calc(var(--radius-sm) + 2px);
        }
        .fui-multilingual-text-input {
          box-shadow: 0 0 2px 2px #D21C09;
          border-radius: calc(var(--radius-sm) + 2px);
          .fui-input-wrapper {
            box-shadow: inherit;
            border-radius: inherit;
          }
        }
      }
      &.v-expand {
        flex-shrink: 1;
      }
    }
    .validation-message {
      color: var(--color-error);
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      width: 100%;
      font-weight: 600;
      &:before {
        margin-right: calc(var(--space-1) + 2px);
        content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0icmVkIiBjbGFzcz0iYmkgYmktZXhjbGFtYXRpb24tdHJpYW5nbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTcuOTM4IDIuMDE2QS4xMy4xMyAwIDAgMSA4LjAwMiAyYS4xMy4xMyAwIDAgMSAuMDYzLjAxNi4xNS4xNSAwIDAgMSAuMDU0LjA1N2w2Ljg1NyAxMS42NjdjLjAzNi4wNi4wMzUuMTI0LjAwMi4xODNhLjIuMiAwIDAgMS0uMDU0LjA2LjEuMSAwIDAgMS0uMDY2LjAxN0gxLjE0NmEuMS4xIDAgMCAxLS4wNjYtLjAxNy4yLjIgMCAwIDEtLjA1NC0uMDYuMTguMTggMCAwIDEgLjAwMi0uMTgzTDcuODg0IDIuMDczYS4xNS4xNSAwIDAgMSAuMDU0LS4wNTdtMS4wNDQtLjQ1YTEuMTMgMS4xMyAwIDAgMC0xLjk2IDBMLjE2NSAxMy4yMzNjLS40NTcuNzc4LjA5MSAxLjc2Ny45OCAxLjc2N2gxMy43MTNjLjg4OSAwIDEuNDM4LS45OS45OC0xLjc2N3oiLz4KICA8cGF0aCBkPSJNNy4wMDIgMTJhMSAxIDAgMSAxIDIgMCAxIDEgMCAwIDEtMiAwTTcuMSA1Ljk5NWEuOTA1LjkwNSAwIDEgMSAxLjggMGwtLjM1IDMuNTA3YS41NTIuNTUyIDAgMCAxLTEuMSAweiIvPgo8L3N2Zz4=);
        font-size: 20px;
      }
    }
  }
  .fui-grid-layout {
    .row:last-child {
      .fui-form-item {
        margin-bottom: 0;
      }
    }
  }
  .fui-form-instructions {
    display: flex;
    flex: 1 1 auto;
    border-bottom: var(--space-2);
  }
  .fui-form-hint {
    font-size: 0.9rem;
    color: #566573;
  }
  .fui-form-section {
    margin-bottom: var(--space-3);
    padding: 0;
    .fui-form-section-header {
      font-size: var(--form-section-header-font-size);
      font-weight: var(--form-section-header-weight);
      display: flex;
      flex: 1 1 auto;
      padding: var(--space-2) 0;
      border-bottom: var(--border-width-1) solid var(--default-border-color);
      .fui-form-section-subheader {
        font-size: 0.9rem;
        color: oklch(var(--color-text) 30% 0 0);
        white-space: pre-line;
      }
    }
    .fui-form-section-body {
      padding: var(--space-3) 0;
    }
  }
  .fui-tabbed-control-group {
    flex: 1 1 auto;
    .fui-tabbed-control-group-content {
    }
    .fui-tabbed-control-group-labels {
      display: flex;
      .fui-tabbed-control-group-tab-label {
        background-color: #e5e5e5;
        margin-right: calc(var(--space-1) - 2px);
        padding: var(--space-1) var(--space-2);
        &:hover {
          cursor: pointer;
        }
        &.active {
          background-color: var(--color-primary);
          color: var(--inverted-font-color);
        }
      }
    }
  }
  .fui-form-additional-validation-messages {
    color: var(--color-error);
    width: 100%;
    padding: var(--space-2);
    background-color: #E6B0AA;
  }
  .fui-form-additional-general-error-messages {
    color: var(--color-error);
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    background-color: #E6B0AA;
    list-style: none;
    li {
      list-style: none;
      padding: 0;
      margin: var(--space-2) 0;
    }
  }
  .fui-modal {
    .fui-form {
      overflow: hidden;
    }
  }
  .fui-repeatable-form-control-item-delete {
    display: none;
  }
  .fui-repeatable-form-control-items {
    &:has(> :nth-child(2)) {
      .fui-repeatable-form-control-item-delete {
        display: inline-block;
      }
    }
  }
}

/* Components/DataEntry/Input/_input.css */
@layer components {
  .fui-input-wrapper {
    height: var(--default-input-height);
    display: flex;
    width: 100%;
    border: solid var(--border-width-1) var(--input-border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    align-items: center;
    &:has(.fui-input:hover) {
      border-color: var(--input-hover-outline-color);
    }
    &:has(.fui-input:focus-within) {
      outline: var(--focus-ring-width) solid var(--input-focused-outline-color);
      z-index: 2;
      border-color: var(--input-hover-outline-color);
    }
    &.fui-input-disabled {
      background-color: var(--color-bg-muted);
      cursor: not-allowed;
      input {
        cursor: not-allowed;
        color: var(--color-text-muted);
      }
    }
    .fui-input-content-before {
      flex: 0 1 auto;
      display: flex;
      margin-right: 5px;
    }
    .fui-input-content-after {
      flex: 0 1 auto;
      display: flex;
      margin-left: 5px;
    }
    .fui-input {
      flex: 1 1 auto;
      display: flex;
      overflow: hidden;
      margin: 0;
      outline: none;
      border: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      text-overflow: ellipsis;
      box-sizing: border-box;
      line-height: 1.5;
      width: 100%;
      height: calc(var(--default-input-height) - 2px);
      background-color: transparent;
    }
  }
}

/* Components/DataEntry/MultilingualTextInput/_multilingual_text-input.css */
@layer components {
  .fui-multilingual-text-input {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    .fui-dirty-edit-message {
      margin-bottom: var(--space-1);
      background-color: #fbbf24;
      padding: calc(var(--space-1) + 1px);
      font-weight: 500;
      font-size: 1.1rem;
      display: none;
    }
    .fui-multilingual-text-input-tabs {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      input[type=radio] {
        display: none;
        &:checked {
          + .fui-multilingual-text-input-tabs-content {
            display: flex;
            order: 1;
            + .fui-multilingual-text-input-tabs-label {
              border: none;
              label {
                border-color: var(--color-primary);
              }
            }
          }
        }
      }
      .fui-multilingual-text-input-tabs-content {
        display: none;
        width: 100%;
        .fui-textarea {
          width: 100%;
        }
      }
      .fui-multilingual-text-input-tabs-label {
        display: inline-flex;
        order: 100;
        font-size: 0.8em;
        height: calc(var(--space-4) + 2px);
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
        label {
          display: flex;
          min-width: calc(var(--space-5) - 2px);
          padding: var(--space-1) calc(var(--space-1) + 2px);
          border-radius: calc(var(--space-3) + 4px);
          margin-right: var(--space-1);
          background-color: #fff;
          border: var(--border-width-1) solid var(--default-border-color);
          &:hover {
            cursor: pointer;
          }
          span {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}

/* Components/DataEntry/NativeSelect/_native_select.css */
@layer components {
  .fui-native-select {
    display: grid;
    grid-template-areas: "select";
    flex: 1 1 auto;
    height: 36px;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    align-items: center;
    position: relative;
    border: solid var(--border-width-1) var(--input-border-color);
    border-radius: var(--input-border-radius);
    flex-shrink: 0;
    &:hover {
      border-color: var(--input-hover-outline-color);
    }
    &:focus-within {
      outline: var(--input-focused-outline-width) solid var(--input-focused-outline-color);
      z-index: 2;
      border-color: var(--input-hover-outline-color);
    }
    &:disabled {
      background-color: #E0E0E0;
    }
    &:after {
      grid-area: select;
      content: "";
      width: 0.8em;
      height: 0.5em;
      margin-right: var(--space-3);
      background-color: #777;
      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
      justify-self: end;
    }
    select {
      grid-area: select;
      appearance: none;
      outline: none;
      background-color: transparent;
      border: none;
      padding: 0 2em 0 1rem;
      margin: 0;
      width: 100%;
      font-family: inherit;
      font-size: inherit;
      cursor: inherit;
      line-height: inherit;
      height: calc(var(--space-5) + 2px);
    }
  }
}

/* Components/DataEntry/NumericInput/_number_input.css */
@layer components {
  .fui-numeric-input {
    flex: 1 1 auto;
    height: var(--default-input-height);
    display: flex;
    border-width: var(--border-width-1);
    border-color: var(--input-border-color);
    border-style: solid;
    overflow: hidden;
    border-radius: var(--input-border-radius);
    width: 100px;
    &:hover {
      border-color: var(--input-hover-outline-color);
    }
    &:focus-within {
      outline: var(--input-focused-outline-width) solid var(--input-focused-outline-color);
      z-index: 2;
      border-color: var(--input-hover-outline-color);
    }
    &:disabled {
      background-color: #E0E0E0;
    }
    input {
      padding: var(--space-1) var(--space-3);
      margin: 0;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      text-overflow: ellipsis;
      box-sizing: border-box;
      line-height: 1.5;
      width: 100%;
      border: none;
      height: calc(var(--default-input-height) - 2px);
      &:focus {
        border-width: 1px;
        border-color: #0094ff;
      }
      &:hover {
        border-color: oklch(from #ccc 40% 0 0);
      }
    }
  }
}

/* Components/DataEntry/RadioButton/_radio_button.css */
@layer components {
  .fui-radio-button-group {
    display: flex;
    margin-right: auto;
    &.layout-orientation-horizontal,
    &:not(.layout-orientation-vertical) {
      .fui-radio-button-container {
        margin-right: var(--space-3);
        padding: 0 var(--space-2) 0 0;
        &:has(.fui-radio-button-view) {
          padding: 0;
        }
      }
    }
    &.layout-orientation-vertical {
      display: contents;
      .fui-radio-button-container {
        padding: var(--space-2) 0;
      }
    }
    &.fui-radio-button-style-default {
      .fui-radio-button-container {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        &:hover {
          cursor: pointer;
        }
        &:hover input ~ .checkmark {
          background-color: #ccc;
        }
        input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          &:checked + .fui-radio-button-label-container {
            .fui-radio-button-checkmark {
              border-color: var(--input-focused-border-color);
              background-color: var(--color-primary);
              .fui-radio-button-checkmark-dot {
                display: block;
                background-color: #fff;
                width: var(--space-2);
                height: var(--space-2);
                border-radius: calc(var(--space-3) + 4px);
              }
            }
            .fui-radio-button-view {
              box-shadow: 0 0 2px 2px #3596EA;
            }
          }
        }
        .fui-radio-button-label-container {
          display: flex;
          align-items: center;
          &:hover {
            cursor: pointer;
            .fui-radio-button-checkmark {
              border-color: var(--color-primary);
            }
          }
          .fui-radio-button-checkmark {
            display: inline-flex;
            width: calc(var(--space-3) + 4px);
            height: calc(var(--space-3) + 4px);
            background-color: #fff;
            border-radius: 50%;
            border: solid var(--border-width-1) var(--color-text);
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-right: var(--space-2);
            .fui-radio-button-checkmark-dot {
              display: none;
            }
          }
          .fui-radio-button-label {
            color: oklch(var(--color-text) 30% 0 0);
            white-space: nowrap;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
    &.fui-radio-button-style-pill {
      border: var(--default-border-color) var(--border-width-1) solid;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      column-gap: 0.3rem;
      padding: 0.3rem 0.3rem;
      background-color: oklch(98.4% 0.003 247.858);
      border-radius: calc(var(--space-1) + 2px);
      .fui-radio-button-container {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-right: 0;
        padding: 0;
        &:hover input ~ .fui-radio-button-label {
          background-color: #ccc;
        }
        input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          &:checked ~ .fui-radio-button-label-container .fui-radio-button-label {
            border-color: var(--color-primary);
            background-color: var(--color-primary);
            color: var(--inverted-font-color);
            box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.12);
          }
        }
        .fui-radio-button-checkmark {
          display: none;
        }
        .fui-radio-button-label {
          color: oklch(var(--color-text) 30% 0 0);
          white-space: nowrap;
          height: var(--space-5);
          padding: 0 var(--space-3);
          border: 1px solid var(--default-border-color);
          border-radius: var(--space-2);
          display: flex;
          align-items: center;
          justify-content: center;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    &.fui-radio-button-style-toggle {
      height: calc(var(--space-5) + 4px);
      border: var(--border-width-1) solid var(--default-border-color);
      display: grid;
      flex-direction: row;
      border-radius: var(--input-border-radius);
      overflow: hidden;
      flex-shrink: 0;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      .fui-radio-button-container {
        margin-right: 0;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        justify-content: center;
        display: flex;
        border-right: var(--border-width-1) solid var(--default-border-color);
        padding: 0;
        min-width: calc(var(--space-6) - 8px);
        &:last-child {
          border-right: none;
        }
        label {
          justify-content: center;
          display: flex;
          height: var(--default-input-height);
          min-width: var(--default-input-height);
          white-space: pre;
          flex: 1 1 auto;
          align-items: center;
          margin-top: -1px;
          &:hover {
            cursor: pointer;
          }
          .fui-radio-button-view {
            display: flex;
            align-items: center;
            flex-direction: row;
          }
        }
        input {
          display: none;
          &:checked {
            + label {
              background-color: var(--color-primary);
              color: var(--inverted-font-color);
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

/* Components/DataEntry/RangeSlider/_range_slider.css */
@layer components {
  .fui-range-slider-container {
    input[type=range] {
      margin-top: calc(var(--space-1) + 1px);
      width: 90%;
      -webkit-appearance: none;
      appearance: none;
      background: none;
      outline: none;
      height: var(--space-3);
      overflow: hidden;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: var(--border-width-1) solid #373D3F;
      height: calc(var(--space-2) + 2px);
      width: calc(var(--space-2) + 2px);
      border-radius: var(--radius-sm);
      background: #684653;
      cursor: pointer;
      margin-top: -2px;
      box-shadow: 1px 1px 1px #373D3F;
    }
    input[type=range]::-ms-fill-lower {
      background-color: #8f224b;
      height: calc(var(--space-1) + 1px);
    }
    input[type=range]::-ms-fill-upper {
      background-color: #D1D1D1;
      height: calc(var(--space-1) + 1px);
    }
    input[type=range]::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      margin-top: 0px;
      height: calc(var(--space-1) + 1px);
      cursor: pointer;
      background: #D1D1D1;
      color: #8f224b;
    }
  }
}

/* Components/DataEntry/Switch/_switch.css */
@layer components {
  .fui-switch-container {
    display: flex;
    align-content: center;
    align-items: center;
  }
  .fui-switch {
    display: none;
    margin-top: calc(var(--space-1) - 2px);
    &,
    &:after,
    &:before,
    & *,
    & *:after,
    & *:before,
    & + .fui-switch--toggle {
      box-sizing: border-box;
      &::selection {
        background: none;
      }
    }
    + .fui--switch-toggle {
      padding: calc(var(--space-1) - 2px);
      transition: all .2s ease;
      background: var(--input-bg-color);
      border: var(--border-width-1) solid var(--default-border-color);
      border-radius: 2em;
      outline: 0;
      display: block;
      width: calc(var(--space-6) + 2px);
      height: var(--space-4);
      position: relative;
      cursor: pointer;
      user-select: none;
      &:hover {
        border-color: var(--input-hover-outline-color);
      }
      &:focus-within {
        outline: var(--input-focused-outline-width) solid var(--input-focused-outline-color);
        z-index: 2;
        border-color: var(--input-hover-outline-color);
      }
      &:after,
      &:before {
        position: relative;
        display: block;
        content: "";
        width: calc(var(--space-3) + 2px);
        height: 100%;
      }
      &:after {
        left: 1px;
        transition: all .2s ease;
        background: var(--color-text);
        content: "";
        border-radius: 1em;
      }
      &:before {
        display: none;
      }
    }
    &:checked + .fui-switch--toggle {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      &:after {
        left: calc(50% + 4px);
        background: #fff;
      }
    }
    &:checked ~ .fui-switch-state-label .fui-switch-state-label-active {
      display: inline-block !important;
    }
    &:not(:checked) ~ .fui-switch-state-label .fui-switch-state-label-inactive {
      display: inline-block !important;
    }
  }
  .fui-switch-state-label {
    margin-left: var(--space-2);
    > span {
      display: none;
    }
  }
}

/* Components/DataEntry/TextArea/_textarea.css */
@layer components {
  .fui-textarea {
    flex-direction: column;
    overflow: visible;
    .fui-dirty-edit-message {
      margin-bottom: var(--space-1);
      background-color: #fbbf24;
      padding: calc(var(--space-1) + 1px);
      font-weight: 500;
      font-size: 1.1rem;
      display: none;
    }
    .fui-textarea-container {
      display: flex;
      width: 100%;
      border-radius: var(--input-border-radius);
      border: var(--border-width-1) solid var(--input-border-color);
      overflow: hidden;
      min-height: calc(var(--space-7) + 16px);
      &:hover {
        border-color: var(--input-hover-outline-color);
      }
      &:focus-within {
        outline: var(--input-focused-outline-width) solid var(--input-focused-outline-color);
        z-index: 2;
        border-color: var(--input-hover-outline-color);
      }
      &:disabled {
        background-color: #E0E0E0;
      }
      textarea {
        display: flex;
        flex: 1 1 auto;
        resize: none;
        padding: var(--space-3) var(--space-3);
        scroll-padding: var(--space-3);
        font-size: var(--space-3);
        border: 0;
        outline: 0;
      }
    }
    .fui-text-area-dirty-edit-save {
      display: none;
      padding: var(--space-3);
    }
  }
}

/* Components/DataEntry/TimePicker/_time_picker.css */
@layer components {
  @supports selector(::-webkit-calendar-picker-indicator) {
    .fui-time-picker {
      width: calc(var(--space-9) + 32px);
      position: relative;
      display: inline-flex;
      input[type=time] {
        height: var(--default-input-height);
        display: block;
        outline: none;
        appearance: none;
        border: none;
        position: relative;
        padding: var(--space-1) var(--space-3);
        scale: 100%;
        text-align: center;
        &::-webkit-calendar-picker-indicator {
          background: transparent;
          bottom: 0;
          color: transparent;
          cursor: pointer;
          height: auto;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
          width: auto;
        }
      }
    }
    .fui-time-picker-clear {
      padding: revert;
      width: 100%;
    }
    .fui-time-picker-select {
      padding: revert;
      width: 100%;
    }
  }
  @supports not selector(::-webkit-calendar-picker-indicator) {
    .fui-time-picker {
      width: calc(var(--space-9) + 32px);
      position: relative;
      display: inline-flex;
      .fui-time-picker-select {
        display: none;
      }
    }
  }
}

/* Components/DataEntry/VideoSegmentSelector/_video_segment_selector.css */
@layer components {
  .fui-video-segment-selector {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-3);
  }
  .fui-video-segment-selector-source {
    display: flex;
    width: 100%;
    aspect-ratio: auto;
    flex-direction: column;
    .fui-video-segment {
      background-color: black;
      justify-content: center;
      video {
        width: 100%;
        aspect-ratio: auto;
      }
    }
    .fui-video-segment-selector-controls {
      padding: var(--space-2) var(--space-3);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-right: var(--border-width-1) solid var(--default-border-color);
      border-left: var(--border-width-1) solid var(--default-border-color);
      .fui-video-segment-selector-controls-time-position {
        margin-left: var(--space-2);
      }
    }
  }
  .fui-video-segment-selector-timeline-container {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--default-border-color);
    .fui-video-segment-selector-timeline-marker-run {
      width: 100%;
      height: calc(var(--space-5) - 2px);
      background-color: oklch(44.3% 0.11 240.79);
    }
    .fui-video-segment-selector-timeline-run {
      width: 100%;
      height: calc(var(--space-7) + 6px);
      border-top: var(--border-width-1) solid oklch(70.8% 0 0);
      border-bottom: var(--border-width-1) solid oklch(70.8% 0 0);
      background-color: oklch(29.3% 0.066 243.157);
    }
    .fui-video-segment-selector-timeline-label-run {
      width: 100%;
      height: calc(var(--space-5) - 2px);
      background-color: oklch(44.3% 0.11 240.79);
    }
    .fui-video-segment-selector-timeline-marker {
      position: absolute;
      height: calc(var(--space-9) + 2px);
      background:
        linear-gradient(
          to right,
          transparent calc(50% - 0.5px),
          oklch(58.6% 0.253 17.585) calc(50% - 0.5px),
          oklch(58.6% 0.253 17.585) calc(50% + 0.5px),
          transparent calc(50% + 0.5px));
      width: calc(var(--space-5) - 2px);
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.fui-video-segment-selector-timeline-current-position-marker {
        left: calc(var(--space-5) - 2px);
        background:
          linear-gradient(
            to right,
            transparent calc(50% - 0.5px),
            oklch(72.3% 0.219 149.579) calc(50% - 0.5px),
            oklch(72.3% 0.219 149.579) calc(50% + 0.5px),
            transparent calc(50% + 0.5px));
        display: none;
        .fui-video-segment-selector-timeline-marker-indicator {
          border-top-color: oklch(72.3% 0.219 149.579);
        }
      }
      &.fui-video-segment-selector-timeline-start-marker {
        left: 0;
        display: none;
        z-index: 2;
      }
      &.fui-video-segment-selector-timeline-end-marker {
        right: 0;
        display: none;
        z-index: 2;
      }
      &[data-marker-set=true] {
        display: flex;
      }
      &.fui-video-segment-selector-timeline-scrubbing-marker {
        width: 1px;
        display: none;
        .fui-video-segment-selector-timeline-scrubbing-marker-label {
          display: flex;
          background-color: #fff;
          padding: calc(var(--space-1) + 1px);
          height: calc(var(--space-4) + 1px);
          font-size: 80%;
          content: "--:--:--";
          border: var(--border-width-1) solid grey;
          user-select: none;
        }
      }
      .fui-video-segment-selector-timeline-marker-indicator {
        content: "";
        margin-top: calc(var(--space-2) + 2px);
        width: 0;
        height: 0;
        border-left: calc(var(--space-2) + 2px) solid transparent;
        border-right: calc(var(--space-2) + 2px) solid transparent;
        border-top: calc(var(--space-2) + 2px) solid #f00;
      }
      .fui-video-segment-selector-timeline-marker-handle {
        height: calc(var(--space-5) + 8px);
        width: var(--space-3);
        background-color: #fff;
        border: var(--border-width-1) solid grey;
        cursor: grab;
        content: "";
        display: flex;
        margin-top: calc(var(--space-3) - 1px);
        margin-bottom: calc(var(--space-5) + 3px);
      }
      .fui-video-segment-selector-timeline-marker-label {
        width: calc(var(--space-3) + 4px);
        height: calc(var(--space-3) + 4px);
        background-color: orange;
        content: "";
        margin-top: calc(var(--space-7) + 6px);
        display: flex;
        justify-content: center;
        user-select: none;
        -webkit-user-select: none;
        border: var(--border-width-2) solid orange;
        &:hover {
          border: var(--border-width-2) solid #0a53be;
          cursor: pointer;
        }
      }
    }
    .fui-video-segment-selector-timeline {
      display: flex;
      width: 100%;
      flex-direction: column;
      background-color: oklch(98.5% 0.001 106.423);
      position: relative;
      border: var(--border-width-1) solid oklch(70.8% 0 0);
      &:focus,
      &:active {
        outline: none;
        box-shadow: inset 0 0 0 1px blue;
      }
    }
  }
  .fui-video-segment-selector-toolbar {
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    padding: var(--space-3);
    border: var(--border-width-1) solid var(--default-border-color);
    border-top: none;
    justify-content: center;
    .fui-video-segment-selector-start-offset-toolbar,
    .fui-video-segment-selector-end-offset-toolbar {
      display: flex;
      flex-direction: row;
      border: var(--border-width-1) solid var(--default-border-color);
      > div {
        border-right: var(--border-width-1) solid var(--default-border-color);
        white-space: nowrap;
        display: flex;
        align-items: center;
        &:last-child {
          border-right: 0;
        }
      }
      .fui-video-segment-selector-actions-start-offset-label,
      .fui-video-segment-selector-actions-end-offset-label {
        padding: var(--space-2);
        background-color: oklch(93.2% 0.032 255.585);
        font-weight: 500;
        min-width: calc(var(--space-7) - 4px);
        display: flex;
        justify-content: center;
      }
      .fui-video-segment-selector-actions-start-offset-value,
      .fui-video-segment-selector-actions-end-offset-value {
        button {
          background-color: transparent;
          border: none;
          outline: none;
          padding: var(--space-2) var(--space-4);
          width: calc(var(--space-9) + 2px);
          height: 100%;
          display: flex;
          cursor: pointer;
          align-items: center;
          &:hover {
            background-color: oklch(97.7% 0.013 236.62);
          }
        }
      }
    }
  }
}

/* Components/Feedback/Alert/_alert.css */
@layer components {
  .fui-alert {
    display: flex;
    flex-direction: row;
    flex: 0 1 auto;
    padding: 0.75rem var(--space-3);
    align-items: center;
    border-width: 0;
    border-left: var(--border-width-4) solid;
    &.fui-alert-information {
      border-color: var(--color-primary);
      &:not(.fui-application-alert) {
        background-color: oklch(88.2% 0.059 254.128);
        border-color: var(--color-primary);
      }
      &.fui-application-alert {
        background-color: var(--color-primary);
        color: var(--inverted-font-color);
      }
    }
    &.fui-alert-error {
      border-color: var(--color-error);
      &:not(.fui-application-alert) {
        background-color: oklch(from var(--color-error) calc(l/2 + 0.5) c h);
      }
      &.fui-application-alert {
        background-color: var(--color-error);
        color: var(--color-primary);
      }
    }
    &.fui-alert-warning {
      border-color: var(--color-alert);
      &:not(.fui-application-warning) {
        background-color: var(--color-warning);
      }
      &.fui-application-alert {
        background-color: var(--color-alert);
        color: var(--inverted-font-color);
      }
    }
    &.fui-alert-success {
      border-color: var(--color-success);
      &:not(.fui-application-alert) {
        background-color: oklch(from var(--color-success) calc(l/2 + 0.5) c h);
      }
      &.fui-application-alert {
        background-color: var(--color-success);
        color: var(--inverted-font-color);
      }
    }
    .fui-alert-icon {
      margin-right: var(--space-3);
      display: flex;
      align-items: center;
    }
    .fui-alert-message {
      display: flex;
      align-items: center;
    }
  }
}

/* Components/Feedback/CollapsableSidebar/_collapsable_sidebar.css */
@layer components {
  .fui-collapsable-sidebar {
    display: flex;
    flex-direction: row;
    height: 100%;
    > * {
      user-select: none;
    }
    &.fui-collapsable-sidebar-hide-trigger-bar-on-show {
      &:has(.fui-collapsable-sidebar-content.expanded) {
        .fui-collapsable-sidebar-trigger-bar {
          display: none;
        }
      }
    }
    .fui-collapsable-sidebar-trigger-bar {
      background-color: #e4e4e7;
      min-width: calc(var(--space-5) + 4px);
      padding-top: var(--space-2);
    }
    .fui-collapsable-sidebar-content {
      position: relative;
      display: none;
      &.expanded {
        display: flex;
        align-items: flex-start;
        &:after {
          content: "";
        }
      }
      .closer {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        outline: none;
        background-color: transparent;
        display: flex;
        justify-items: center;
        justify-content: center;
        align-items: center;
        border: none;
        z-index: 2;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .fui-collapsable-sidebar-trigger {
    display: flex;
    min-width: calc(var(--space-5) + 4px);
    min-height: calc(var(--space-5) + 4px);
    justify-content: center;
    align-items: center;
    &.fui-collapsable-sidebar-default-trigger {
      height: 100%;
      align-items: flex-start;
    }
    &:hover {
      cursor: pointer;
    }
  }
}

/* Components/Feedback/Collapsible/_collapsible.css */
@layer components {
  .fui-collapsible {
    display: flex;
    flex-direction: column;
    width: 100%;
    input {
      display: none;
    }
    label {
      z-index: 2;
    }
    &:has(> input:checked) {
      .fui-collapsible-trigger-chevron {
        transform: rotate(90deg);
      }
      .fui-collapsible-content {
        display: flex;
      }
    }
  }
  .fui-collapsible-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    > button {
      pointer-events: auto;
      z-index: 1;
    }
    > *:first-child {
      width: auto;
    }
    .fui-collapsible-trigger-chevron {
      position: absolute;
      display: flex;
      align-items: center;
      right: var(--space-2);
      pointer-events: none;
      padding: 0 var(--space-1);
      transition: transform 0.1s ease-in-out;
      transform: rotate(0deg);
    }
  }
  .fui-collapsible-content {
    display: none;
  }
}

/* Components/Feedback/Dialog/_dialog.css */
@layer components {
  .fui-dialog {
    padding: 0;
    background-color: var(--color-bg);
    border: none;
    border-radius: var(--overlay-border-radius);
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    flex-direction: column;
    max-width: calc((var(--space-8) + 4px) * 14);
    max-height: calc(100vh - 6rem);
    width: auto;
    animation: fade-out 0.1s ease-out;
    display: flex;
    color: var(--color-text);
    &::backdrop {
      background-color: var(--overlay-background-color);
    }
    &[open] {
      animation: fade-in 0.1s ease-out;
    }
    .fui-dialog-layout {
      display: flex;
      overflow: hidden;
      flex-direction: column;
      flex: 1 1 auto;
      height: 100%;
      border: none;
    }
    .fui-dialog-header {
      padding: var(--space-3) var(--space-4);
      border-bottom: double var(--border-width-3) oklch(86.9% 0.005 56.366);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 1.2rem;
      font-weight: 500;
      background-color: #f1f5f9;
      .fui-header {
        margin: 0;
      }
      .fui-dialog-dismiss {
        display: flex;
        align-items: center;
        button {
          background: transparent;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 0;
          display: flex;
          flex: 0 0 auto;
          &:hover {
            svg {
              fill: var(--color-primary);
            }
          }
        }
      }
    }
    .fui-dialog-body {
      display: flex;
      flex: 1 1 auto;
      overflow: hidden;
      padding: 0;
    }
    .fui-dialog-footer {
      padding: var(--space-3) var(--space-4);
      border-top: double var(--border-width-3) oklch(86.9% 0.005 56.366);
      display: flex;
      justify-content: end;
      background-color: #f1f5f9;
      .fui-button {
        min-width: calc(var(--space-9) + 22px);
      }
    }
    .fui-scrollview {
      flex: 1 1 auto;
    }
  }
  .fui-confirmation-dialog {
    width: calc((var(--space-8) + 4px) * 6);
    &.fui-confirmation-dialog-alert {
      border-top: var(--border-width-4) solid var(--color-danger);
    }
    &::backdrop {
      background-color: rgb(0 0 0 / 0.25);
    }
    .fui-confirmation-dialog-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: var(--space-5);
      margin-right: var(--space-3);
    }
    .fui-dialog-header {
      background-color: #fff;
    }
    .fui-dialog-container {
      display: flex;
      flex-direction: row;
      width: 100%;
      padding-top: var(--space-2);
      padding-bottom: var(--space-2);
      > div:nth-child(2) {
        flex: auto;
      }
      .fui-dialog-header {
        padding: var(--space-3) var(--space-3) 0 var(--space-3);
        border: none;
      }
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
      transform: scale(0);
      display: none;
    }
    100% {
      opacity: 1;
      transform: scale(1);
      display: block;
    }
  }
  @keyframes fade-out {
    0% {
      opacity: 1;
      transform: scaleY(1);
      display: block;
    }
    100% {
      opacity: 0;
      transform: scaleY(0);
      display: none;
    }
  }
}

/* Components/Feedback/DirtyFormIndicator/_dirty_form_indicator.css */
@layer components {
  .fui-dirty-form-indicator {
    padding: var(--space-2);
    color: var(--color-error);
    font-weight: 500;
    display: none;
    &.visible {
      display: flex;
    }
  }
}

/* Components/Feedback/Drawer/_drawer.css */
@layer components {
  .fui-drawer {
    position: fixed;
    flex-direction: column;
    height: calc(100vh);
    background-color: #fff;
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.2);
    border: none;
    border-left: var(--border-width-1) solid var(--default-border-color);
    pointer-events: auto;
    padding: 0;
    z-index: 1000;
    animation: slide-in 0.250s backwards;
    margin: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    right: 0;
    left: auto;
    &::backdrop {
    }
    .fui-scrollview {
      flex: 1 1 auto;
    }
    &:popover-open {
      animation: slide-out 0.250s forwards;
    }
  }
  .fui-drawer-layout {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .fui-drawer-header {
    padding: var(--space-3) var(--space-3);
    border-bottom: solid var(--border-width-1) var(--default-border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #f1f5f9;
    .fui-header {
      margin: 0;
    }
    .fui-drawer-dismiss {
      display: flex;
      align-items: center;
      button {
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        flex: 0 0 auto;
        &:hover {
          svg {
            fill: var(--color-primary);
          }
        }
      }
    }
  }
  .fui-drawer-body {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
  }
  .fui-drawer-footer {
    padding: var(--space-3) var(--space-3);
    border-top: solid var(--border-width-1) var(--default-border-color);
    display: flex;
    justify-content: end;
    margin-top: auto;
    background-color: #f1f5f9;
    .fui-button {
      min-width: calc(var(--space-9) + 22px);
    }
  }
  @keyframes slide-out {
    0% {
      display: flex;
    }
    100% {
      display: flex;
      transform: translateX(0);
    }
  }
  @keyframes slide-in {
    0% {
      display: flex;
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
      display: none;
    }
  }
  html body:has(.fui-drawer:popover-open) {
    overflow: hidden;
  }
}

/* Components/Feedback/DropdownMenu/_dropdown_menu.css */
@layer components {
  .fui-dropdown-menu-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    &:hover {
      cursor: pointer;
    }
    .fui-dropdown-menu-trigger-chevron {
      margin-left: var(--space-1);
      display: flex;
    }
  }
  .fui-dropdown-menu {
    display: inline-flex;
    position: relative;
  }
  .fui-dropdown-menu-content {
    position: absolute;
    width: max-content;
    top: 0;
    left: 0;
    min-width: calc((var(--space-9) + 4px) * 2);
    border: var(--border-width-1) solid var(--default-border-color);
    border-radius: var(--overlay-border-radius);
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.2);
    outline: 0;
    margin: 0 0 var(--space-3);
    cursor: pointer;
    padding: calc(var(--space-1) + 2px) 0;
  }
  .fui-dropdown-menu-item {
    min-height: calc(var(--space-5) + 4px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    cursor: pointer;
    &:hover,
    &:focus {
      background-color: #f3f4f6;
      border-radius: var(--radius-sm);
    }
    &:last-child {
      border-bottom: none;
    }
    button {
      display: grid;
      grid-template-areas: "icon label meta" "icon description meta";
      grid-template-columns: minmax(0, min-content) auto minmax(0, min-content);
      grid-template-rows: minmax(0, min-content) minmax(0, min-content);
      border: none;
      background-color: transparent;
      align-items: stretch;
      cursor: pointer;
      flex: 1 1 auto;
      padding: calc(var(--space-1) + 1px) var(--space-3);
    }
    label {
      display: grid;
      grid-template-areas: "icon label meta" "icon description meta";
      grid-template-columns: minmax(0, min-content) auto minmax(0, min-content);
      grid-template-rows: minmax(0, min-content) minmax(0, min-content);
      border: none;
      background-color: transparent;
      align-items: center;
      cursor: pointer;
      flex: 1 1 auto;
      padding: calc(var(--space-1) + 1px) var(--space-3);
      min-height: calc(var(--space-5) + 4px);
    }
    a {
      display: grid;
      grid-template-areas: "icon label meta" "icon description meta";
      grid-template-columns: minmax(0, min-content) auto minmax(0, min-content);
      grid-template-rows: minmax(36px, min-content) minmax(0, min-content);
      align-items: center;
      cursor: pointer;
      flex: 1 1 auto;
      padding: 0 var(--space-3);
      text-decoration: none;
      color: var(--color-text);
    }
    .fui-dropdown-menu-item-icon {
      margin-right: var(--space-3);
      margin-left: calc(var(--space-1) - 2px);
      display: flex;
      grid-area: icon;
      align-items: center;
      color: var(--color-text);
    }
    .fui-dropdown-menu-item-label {
      font-size: var(--space-3);
      font-weight: 400;
      grid-area: label;
      display: flex;
      input {
        display: none;
      }
    }
    .fui-dropdown-menu-item-description {
      grid-area: description;
      display: flex;
      white-space: pre-wrap;
      text-align: left;
      font-size: 0.9rem;
      padding-bottom: var(--space-3);
    }
    .fui-dropdown-menu-item-meta {
      grid-area: meta;
      display: flex;
      align-items: center;
    }
  }
  .fui-dropdown-menu-segment {
    display: flex;
    flex: 1 1 auto;
  }
}

/* Components/Feedback/EmptyState/_empty_state.css */
@layer components {
  .fui-empty-state {
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
    background-color: #f8fafc;
  }
  .fui-empty-state-image {
    display: flex;
    position: relative;
    justify-content: center;
    margin-bottom: var(--space-2);
    svg {
    }
  }
  .fui-empty-state-title {
    font-size: 1.3rem;
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: center;
    font-weight: 500;
  }
  .fui-empty-state-body {
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: center;
  }
  .fui-empty-state-actions {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: center;
    .fui-empty-state-action {
      margin-bottom: var(--space-2);
    }
  }
}

/* Components/Feedback/PopOver/_popover.css */
@layer components {
  .fui-popover {
    display: inline-flex;
    > :not(.fui-popover-content) {
      cursor: pointer;
    }
  }
  .fui-popover-content {
    position: absolute;
    border: none;
    background: transparent;
    padding: 0;
    z-index: 1000;
    margin: 0;
    outline: none;
    overflow: visible;
    .fui-popover-content-wrapper {
      position: relative;
      background: white;
      color: black;
      border-radius: var(--radius-sm);
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .fui-popover-content-inner {
      position: relative;
      background-color: #fff;
      padding: var(--space-4);
      border-radius: var(--radius-sm);
      z-index: 10;
    }
    .arrow {
      position: absolute;
      width: var(--space-3);
      height: var(--space-3);
      background: #fff;
      transform: rotate(45deg);
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
  }
  .fui-popover-content:popover-open {
    opacity: 1;
    transition: opacity 0.15s ease-in;
  }
}

/* Components/Feedback/Spinner/_spinner.css */
@layer components {
  .fui-busy.fui-blockable {
    z-index: 20;
    &::before {
      content: "";
      width: var(--space-6);
      height: var(--space-6);
      border: var(--border-width-5) solid #FFF;
      border-bottom-color: #FF3D00;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      position: absolute;
      z-index: 100;
      top: calc(50% - 24px);
      left: calc(50% - 24px);
    }
    &::after {
      content: "";
      position: absolute;
      background-color: rgba(212, 212, 212, 0.9);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 50;
    }
  }
  .fui-spinner-container {
    display: flex;
    position: relative;
    flex: 1 1 auto;
    z-index: 1;
    overflow: hidden;
    height: 100%;
    justify-content: center;
    background-color: #fafafa;
    padding: var(--space-5);
  }
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

/* Components/Feedback/StateView/_state_view.css */
@layer components {
  .fui-state-view {
    display: flex;
    padding: var(--space-5);
    justify-content: center;
    flex-direction: column;
    &.state-empty {
      background-color: #e5e7eb;
    }
    &.state-error {
      background-color: #fecaca;
    }
    &.state-loading {
      background-color: #f7fee7;
    }
    &.layout-direction-horizontal {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .fui-state-view-icon {
        margin-bottom: 0;
        margin-right: var(--space-3);
      }
      .fui-state-view-content {
        flex-direction: column;
        justify-content: flex-start;
        .fui-state-view-title,
        .fui-state-view-message {
          justify-content: flex-start;
        }
      }
    }
  }
  .fui-state-view-icon {
    justify-content: center;
    display: flex;
    margin-bottom: var(--space-2);
    height: 30px;
    width: 30px;
  }
  .fui-state-view-content {
    .fui-state-view-title {
      display: flex;
      font-size: 1.6rem;
      font-weight: 700;
      color: rgba(var(--color-text) 0.9);
      justify-content: center;
      margin-bottom: var(--space-2);
    }
    .fui-state-view-message {
      font-weight: 500;
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-2);
    }
    .fui-state-view-actions {
      display: flex;
      justify-content: center;
    }
  }
}

/* Components/General/Button/_button.css */
@layer components {
  :root {
    --button-styles:
      solid,
      outline,
      link;
    --button-colors-default: var(--color-default);
    --button-colors-primary: var(--color-primary);
    --button-colors-alert: var(--color-alert);
    --button-colors-danger: var(--color-danger);
    --button-colors-success: var(--color-success);
    --button-colors-orange: var(--color-alert);
    --button-colors-purple: var(--color-purple);
    --button-colors-magenta: var(--color-magenta);
  }
  .fui-button {
    font-size: 1rem;
    margin: 0;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: var(--default-input-height);
    min-width: var(--default-input-height);
    min-height: 36px;
    font-weight: 500;
    box-sizing: border-box;
    user-select: none;
    outline: transparent;
    background: var(--color-default);
    border: var(--border-width-1) solid oklch(from var(--color-default) 2% 0 0);
    text-transform: none;
    text-decoration: none;
    -webkit-appearance: button;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 80ms linear;
    color: var(--color-text);
    line-height: var(--space-3);
    cursor: pointer;
    white-space: nowrap;
    padding: var(--space-1) calc(var(--space-3) + 2px);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    &:focus {
      outline: none;
    }
    &:hover {
      background-color: oklch(from var(--color-default) 100%);
      border-color: var(--color-default);
      color: oklch(from var(--color-text) 15% 0 0);
    }
    &.fui-button-style-solid {
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
      &.fui-button-color-default {
        color: var(--inverted-font-color);
        background-color: oklch(from var(--button-colors-default) l c h);
        &:hover {
          background-color: oklch(from var(--button-colors-default) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-alert {
        background-color: var(--button-colors-alert);
        border-color: oklch(from var(--button-colors-alert) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-alert) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-alert);
        }
      }
      &.fui-button-color-primary {
        background-color: var(--button-colors-primary);
        border-color: oklch(from var(--button-colors-primary) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-primary) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-primary);
        }
      }
      &.fui-button-color-danger {
        background-color: var(--button-colors-danger);
        border-color: oklch(from var(--button-colors-danger) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-danger) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-danger);
        }
      }
      &.fui-button-color-success {
        background-color: var(--button-colors-success);
        border-color: oklch(from var(--button-colors-success) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-success) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-success);
        }
      }
      &.fui-button-color-orange {
        background-color: var(--button-colors-orange);
        border-color: oklch(from var(--button-colors-orange) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-orange) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-orange);
        }
      }
      &.fui-button-color-purple {
        background-color: var(--button-colors-purple);
        border-color: oklch(from var(--button-colors-purple) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-purple) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-purple);
        }
      }
      &.fui-button-color-magenta {
        background-color: var(--button-colors-magenta);
        border-color: oklch(from var(--button-colors-magenta) l c h);
        color: var(--inverted-font-color);
        &:hover {
          background-color: oklch(from var(--button-colors-magenta) calc(l/2 + 0.5) c h);
          border-color: var(--button-colors-magenta);
        }
      }
    }
    &.fui-button-style-outline {
      &.fui-button-color-default {
        background-color: transparent;
        border-color: var(--button-colors-default);
        color: var(--button-colors-default);
        &:hover {
          background-color: oklch(from var(--button-colors-default) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-primary {
        background-color: transparent;
        border-color: var(--button-colors-primary);
        color: var(--button-colors-primary);
        &:hover {
          background-color: oklch(from var(--button-colors-primary) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-alert {
        background-color: transparent;
        border-color: var(--button-colors-alert);
        color: var(--button-colors-alert);
        &:hover {
          background-color: oklch(from var(--button-colors-alert) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-danger {
        background-color: transparent;
        border-color: var(--button-colors-danger);
        color: var(--button-colors-danger);
        &:hover {
          background-color: oklch(from var(--button-colors-danger) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-success {
        background-color: transparent;
        border-color: var(--button-colors-success);
        color: var(--button-colors-success);
        &:hover {
          background-color: oklch(from var(--button-colors-success) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-orange {
        background-color: transparent;
        border-color: var(--button-colors-orange);
        color: var(--button-colors-orange);
        &:hover {
          background-color: oklch(from var(--button-colors-orange) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-purple {
        background-color: transparent;
        border-color: var(--button-colors-purple);
        color: var(--button-colors-purple);
        &:hover {
          background-color: oklch(from var(--button-colors-purple) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-magenta {
        background-color: transparent;
        border-color: var(--button-colors-magenta);
        color: var(--button-colors-magenta);
        &:hover {
          background-color: oklch(from var(--button-colors-magenta) calc(l/2 + 0.5) c h);
        }
      }
    }
    &.fui-button-style-link {
      &.fui-button-color-default {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--color-text);
        &:hover {
          color: oklch(from var(--color-text) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-primary {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-primary);
        &:hover {
          color: oklch(from var(--button-colors-primary) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-alert {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-alert);
        &:hover {
          color: oklch(from var(--button-colors-alert) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-danger {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-danger);
        &:hover {
          color: oklch(from var(--button-colors-danger) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-success {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-success);
        &:hover {
          color: oklch(from var(--button-colors-success) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-orange {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-orange);
        &:hover {
          color: oklch(from var(--button-colors-orange) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-purple {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-purple);
        &:hover {
          color: oklch(var(--button-colors-purple) calc(l/2 + 0.5) c h);
        }
      }
      &.fui-button-color-magenta {
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        color: var(--button-colors-magenta);
        &:hover {
          color: oklch(from var(--button-colors-magenta) calc(l/2 + 0.5) c h);
        }
      }
    }
    &:disabled {
      color: oklch(from var(--color-default) calc(l/2 + 0.6) 0 h) !important;
      background-color: oklch(from var(--color-default) calc(l/2 + 0.2) c h) !important;
      border-color: oklch(from var(--color-default) calc(l/2 + 0.2) c h) !important;
      cursor: not-allowed;
    }
    &.attention {
      box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
      animation: pulse 2s infinite;
    }
    &.fui-busy {
      pointer-events: none;
      opacity: 0.7;
      &:has(.fui-button-icon) {
        .fui-button-icon > * {
          opacity: 0;
        }
        .fui-button-icon:first-child {
          &:after {
            content: "";
            position: absolute;
            animation: spinner 0.6s linear infinite;
            height: calc(var(--space-3) + 4px);
            width: calc(var(--space-3) + 4px);
            left: var(--space-2);
            border: var(--border-width-2) solid #fff;
            border-top: var(--border-width-2) solid transparent;
            border-radius: 50%;
            transform: translate(calc(-50% + 8px));
          }
        }
        &:not(.fui-button-style-solid) {
          &:after {
            border-color: var(--color-primary);
            border-top-color: transparent;
          }
        }
      }
      &:not(:has(.fui-button-icon)) {
        &:before {
          content: "";
          animation: spinner 0.6s linear infinite;
          height: calc(var(--space-3) + 4px);
          width: calc(var(--space-3) + 4px);
          left: var(--space-2);
          border: var(--border-width-2) solid #fff;
          border-top: var(--border-width-2) solid transparent;
          border-radius: 50%;
          transform: translate(calc(-50% + 8px));
          margin-right: var(--space-2);
        }
        &:not(.fui-button-style-solid) {
          &:before {
            border-color: var(--color-primary);
            border-top-color: transparent;
          }
        }
      }
      i:not(:last-child) {
        margin-right: var(--space-2);
      }
    }
    + .fui-button {
      margin-left: var(--space-3);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
      box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    }
    70% {
      -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    }
    100% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    }
  }
  @keyframes spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .fui-split-button {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    > .fui-dropdown {
      justify-content: center;
      display: flex;
      > button {
        padding: 0 1rem;
        justify-content: center;
        display: flex;
        height: 100%;
      }
    }
  }
  .fui-button-icon {
    display: flex;
    align-items: center;
    align-content: center;
    height: var(--space-3);
    width: var(--space-3);
    svg {
      height: var(--space-3);
      width: var(--space-3);
    }
  }
  .fui-button-label {
    padding: 0;
    align-items: center;
    display: flex;
    svg {
      margin-left: var(--space-2);
    }
  }
  .fui-button-icon + .fui-button-label {
    margin-left: var(--space-2);
    padding-left: 0;
  }
  .fui-button-postfix {
    margin-left: calc(var(--space-1) + 1px);
    align-items: center;
    display: flex;
  }
  .fui-button-group {
    display: inline-flex;
    align-items: center;
    .fui-button {
      margin-left: 0;
      border-radius: 0;
      &:not(:last-child) {
        border-right: 0;
      }
      &:first-child {
        border-bottom-left-radius: var(--radius-xs);
        border-top-left-radius: var(--radius-xs);
      }
      &:last-child {
        border-bottom-right-radius: var(--radius-xs);
        border-top-right-radius: var(--radius-xs);
      }
    }
  }
  .fui-button-border-pilled {
    border-radius: calc(var(--space-5) - 2px);
  }
}

/* Components/General/FormattedText/_formatted_text.css */
@layer components {
  .fui-text {
    &.fui-text-italics {
      font-style: italic;
    }
    &.fui-text-weight-regular {
      font-weight: 500;
    }
    &.fui-text-weight-semi-bold {
      font-weight: 600;
    }
    &.fui-text-weight-bold {
      font-weight: 700;
    }
    &.fui-text-underline {
      text-decoration: underline;
    }
    &.fui-text-code {
      pre {
        background-color: #f1f5f9;
      }
    }
    &.fui-text-marked {
      mark {
        background-color: yellow;
      }
    }
    &.fui-text-deleted {
      text-decoration: line-through;
    }
    &.fui-text-color-red,
    &.fui-text-color-error {
      color: var(--color-danger);
    }
    &.fui-text-color-green,
    &.fui-text-color-success {
      color: var(--color-success);
    }
    &.fui-text-color-orange {
      color: var(--color-alert);
    }
    &.fui-text-color-brown {
      color: var(--color-brown);
    }
    &.fui-text-color-default {
      color: var(--color-default);
    }
    &.fui-text-color-purple {
      color: var(--color-purple);
    }
    &.fui-text-color-blue {
      color: var(--color-primary);
    }
    &.fui-text-color-yellow,
    &.fui-text-color-warning {
      color: var(--color-warning);
    }
    &.fui-text-color-magenta {
      color: var(--color-magenta);
    }
    &.fui-text-wrap-normal {
      white-space: normal;
    }
    &.fui-text-wrap-nowrap {
      white-space: nowrap;
    }
  }
}

/* Components/General/Icons/_icons.css */
@layer components {
  :root {
    --default-icon-color: #64748b;
  }
  .fui-icon {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .fui-more-options-icon {
    svg {
      fill: var(--default-icon-color);
    }
  }
}

/* Components/General/ImageButton/_image_button.css */
@layer components {
  .fui-image-button {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    width: fit-content;
    &:hover {
      .fui-image-button-hover {
        display: flex;
      }
    }
    button {
      border-width: 0;
      padding: 0;
    }
  }
  .fui-image-button-hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 2rem;
    pointer-events: none;
    cursor: pointer;
  }
}

/* Components/General/SplitButton/_split_button.css */
@layer components {
  :root {
    --button-styles:
      solid,
      outline,
      link;
    --button-colors-default: var(--color-default);
    --button-colors-primary: var(--color-primary);
    --button-colors-alert: var(--color-alert);
    --button-colors-danger: var(--color-danger);
    --button-colors-success: var(--color-success);
  }
  .fui-split-button {
    display: flex;
    flex-direction: row;
    & > .fui-button:first-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      & + .fui-button:last-child {
        margin: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
      & + .fui-dropdown-menu {
        .fui-dropdown-menu-trigger {
          .fui-button {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-left: none;
          }
        }
      }
    }
  }
}

/* Components/Layout/ContentView/_content_view.css */
@layer components {
  .fui-content-view {
    display: flex;
    background-color: #fff;
    align-items: flex-start;
    &.fui-content-view-secondary {
      background-color: var(--background-secondary);
    }
    &.fui-content-view-bordered {
      border: solid var(--border-width-1) var(--default-border-color);
    }
  }
}

/* Components/Layout/Divider/_divider.css */
@layer components {
  .fui-divider {
    content: "";
    display: flex;
    &.fui-divider-vertical {
      border-bottom: none;
      border-right-width: var(--border-width-1);
      border-right-style: solid;
      border-right-color: var(--default-border-color);
      width: 0;
    }
    &:not(.fui-divider-vertical) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      flex-direction: row;
      align-items: center;
      &:not(:has(> *)) {
        grid-template-columns: 1fr 1fr;
      }
      &:before,
      &:after {
        content: "";
        border-bottom: var(--border-width-1) solid var(--default-border-color);
      }
    }
    .fui-divider-label {
      display: flex;
      justify-content: center;
      font-weight: 500;
      font-size: 1.1rem;
      padding: 0 var(--space-2);
      margin-bottom: 1px;
    }
  }
}

/* Components/Layout/GridLayout/_grid_layout.css */
@layer components {
  .fui-grid-layout {
    display: flex;
    flex-direction: column;
  }
  .fui-grid-layout-divided {
    .fui-grid-layout-row:not(:last-child) {
      border-bottom: var(--border-width-1) solid var(--default-border-color);
    }
    .fui-grid-layout-column:not(:last-child) {
      border-right: var(--border-width-1) solid var(--default-border-color);
    }
  }
}

/* Components/Layout/Layout/_grid_layout.css */
@layer components {
  .fui-grid-layout {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .fui-scrollview {
    > .fui-grid-layout {
      overflow: initial;
    }
  }
}

/* Components/Layout/ScrollView/_scroll_view.css */
@layer components {
  .fui-scrollview {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    > .fui-grid-layout {
      width: calc(100% - 1px);
    }
  }
}

/* Components/Layout/StackLayout/_stack_layout.css */
@layer components {
  .fui-stack-layout {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    position: relative;
    &.v-expand {
      flex-grow: 1;
    }
    &.v-shrink {
      height: auto;
    }
    &.fui-stack-layout-horizontal {
      flex-direction: row;
      &:not(.v-expand) {
        height: auto !important;
      }
    }
    &:not(.fui-stack-layout-horizontal) {
      &.justify-center {
        justify-items: center;
        display: block;
      }
      > *:not(:first-child, .fui-form-item) {
        &.fui-scrollview {
          margin-top: 0;
        }
      }
    }
    .flex-row {
      align-items: flex-start;
      > *:not(:first-child) {
        margin-top: 0;
        margin-left: var(--space-3);
      }
    }
    > .fui-form {
      height: auto;
    }
  }
  .fui-scrollview {
    > .fui-stack-layout {
      height: auto;
    }
  }
}

/* Components/Navigation/AnchorNavigation/_anchor_navigation.css */
@layer components {
  .fui-anchor-navigation {
    display: flex;
    flex-direction: column;
    nav {
      border-left: solid var(--border-width-2) var(--default-border-color);
    }
    ul,
    li {
      list-style: none;
      margin: 0;
    }
    ul {
      padding: 0;
    }
  }
  .fui-anchor-navigation-header {
    margin-bottom: var(--space-4);
    font-weight: 600;
  }
  .fui-anchor-navigation-anchor {
    label {
      padding-left: var(--space-3);
      padding-top: var(--space-2);
      padding-bottom: var(--space-2);
      display: flex;
    }
    &:has(a.active) {
      border-left: solid var(--border-width-2) var(--color-primary);
      transform: translateX(-2px);
      a {
        font-weight: 600;
        color: var(--color-primary);
      }
    }
    a {
      text-decoration: none;
      color: var(--color-default);
      display: flex;
      padding: var(--space-2) var(--space-3);
      &:hover {
        color: var(--color-primary);
      }
      &:target {
        font-weight: 500;
      }
      &:active {
        font-weight: 500;
      }
    }
  }
}

/* Components/Navigation/Breadcrumb/_breadcrumbs.css */
@layer components {
  .fui-breadcrumb {
    display: flex;
    flex: 0 0 auto;
    ol {
      width: 100%;
      display: flex;
      padding: 0;
      margin: 0;
    }
  }
  .fui-breadcrumb-item {
    display: flex;
    margin-right: var(--space-2);
    align-items: center;
    padding: 0;
    span {
      display: flex;
      align-items: center;
      &.fui-breadcrumb-item-icon + .fui-breadcrumb-item-label {
        margin-left: calc(var(--space-1) + 2px);
      }
    }
    &:not(:last-child):after {
    }
    a {
      color: #737373;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
      &:hover {
        color: var(--color-primary);
      }
    }
    .nav-link {
      padding: 0;
    }
    .active {
      color: #737373;
      font-weight: 500;
    }
  }
  .fui-breadcrumb-item-seperator {
    margin-left: var(--space-2);
    display: flex;
    flex-grow: 0;
    align-items: center;
    font-weight: 500;
    &.fui-breadcrumb-item-seperator-default {
      content: "/";
    }
  }
  .fui-breadcrumb-extra {
    align-items: center;
    display: flex;
  }
}

/* Components/Navigation/CommandBar/_command_bar.css */
@layer components {
  .fui-command-bar {
    display: flex;
    .fui-split-button {
      .fui-button {
        background-color: transparent;
        border: none;
        color: var(--color-default);
        &:hover {
          cursor: pointer;
          background-color: rgba(75, 85, 99, 0.1);
        }
      }
    }
  }
  .fui-command-bar-label {
    display: flex;
    min-height: calc(var(--space-5) + 6px);
    min-width: calc(var(--space-5) + 6px);
    align-items: center;
    color: var(--color-text);
    justify-content: center;
    padding: var(--space-1) calc(var(--space-1) + 2px);
  }
  .fui-command-bar-item {
    display: flex;
    min-height: calc(var(--space-5) + 8px);
    min-width: calc(var(--space-5) + 6px);
    align-items: center;
    color: rgb(51, 51, 51);
    justify-content: center;
    margin: 0 calc(var(--space-1) + 2px);
    border-radius: var(--radius-sm);
    border-color: var(--default-border-color);
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
    &:hover {
      cursor: pointer;
    }
  }
  .fui-command-bar-separator {
    display: flex;
    min-height: calc(var(--space-5) - 2px);
    border-right: var(--border-width-1) solid var(--default-border-color);
    margin: calc(var(--space-1) + 2px) var(--space-1);
  }
}

/* Components/Navigation/Menu/_menu.css */
@layer components {
  .fui-menu {
  }
}

/* Components/Navigation/NavBar/_navbar.css */
@layer components {
  .fui-nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    &.fui-theme-dark {
      .fui-nav-bar-item-label {
        color: var(--inverted-font-color);
      }
      .fui-nav-bar-item-icon {
        svg {
          fill: var(--inverted-font-color);
        }
      }
      .fui-nav-bar-item {
        &:hover,
        &:focus {
          border-bottom: var(--border-width-2) solid rgba(var(--inverted-font-color) 80%);
        }
        &:hover,
        &:focus,
        &.active {
          .fui-nav-bar-item-label {
            color: rgba(var(--inverted-font-color) 80%);
          }
          .fui-nav-bar-item-icon {
            svg {
              fill: rgba(var(--inverted-font-color) 80%);
            }
          }
        }
      }
    }
    > ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: row;
    }
    > ul {
      column-gap: 1.25rem;
      align-items: center;
    }
    &:has(.fui-nav-bar-item-vertical) {
      li {
        height: calc(var(--space-6) + 2px);
      }
      .fui-nav-bar-divider {
        height: var(--space-5);
      }
    }
    &.fui-nav-bar-style-tabs {
      border-bottom: var(--border-width-1) solid var(--default-border-color);
      justify-content: space-between;
      .fui-nav-bar-item {
        border-bottom: var(--border-width-2) solid transparent;
        margin: -1px;
        padding: 0.75rem 0.2rem;
        &.active {
          border-bottom: var(--border-width-2) solid var(--color-primary);
        }
      }
    }
    &.fui-nav-bar-style-frameless-tabs {
      justify-content: space-between;
      padding-top: var(--space-2);
      border-bottom: var(--border-width-1) solid var(--default-border-color);
      ul {
        column-gap: 0;
        margin-bottom: -1px;
      }
      .fui-nav-bar-item {
        height: calc(var(--space-6) - 6px);
        min-height: calc(var(--space-6) - 6px);
        padding: 0.65rem var(--space-3);
        position: relative;
        border: var(--border-width-1) solid var(--default-border-color);
        border-right: none;
        background-color: transparent;
        border-top-left-radius: var(--radius-sm);
        border-top-right-radius: var(--radius-sm);
        margin-right: calc(var(--space-2) + 2px);
        margin-bottom: 0;
        &:after {
          width: calc(var(--space-3) + 4px);
          height: calc(var(--space-6) - 6px);
          content: "";
          transform: skewX(15deg);
          position: absolute;
          right: -6px;
          border-top: var(--border-width-1) solid var(--default-border-color);
          border-right: var(--border-width-1) solid var(--default-border-color);
          border-bottom: var(--border-width-1) solid var(--default-border-color);
          border-top-right-radius: var(--radius-sm);
          top: -1px;
          bottom: -1px;
        }
        &.active {
          border: var(--border-width-1) solid var(--default-border-color);
          border-bottom: none;
          background-color: #fff;
          border-top-left-radius: var(--radius-sm);
          border-top-right-radius: var(--radius-sm);
          margin-right: calc(var(--space-2) + 2px);
          &:after {
            width: calc(var(--space-3) + 4px);
            height: calc(var(--space-6) - 6px);
            content: "";
            transform: skewX(15deg);
            position: absolute;
            right: -6px;
            border-top: var(--border-width-1) solid var(--default-border-color);
            border-right: var(--border-width-1) solid var(--default-border-color);
            border-bottom: none;
            background-color: #fff;
            border-top-right-radius: var(--radius-sm);
            top: -1px;
            bottom: -1px;
          }
        }
      }
    }
    &.fui-nav-bar-style-pills {
      ul {
        display: grid;
        column-gap: var(--space-3);
        grid-template-columns: repeat(auto-fill, 1fr);
        grid-auto-flow: column;
      }
      .fui-nav-bar-item {
        height: calc(var(--space-5) + 4px);
        min-height: calc(var(--space-5) + 4px);
        padding: 0.65rem var(--space-3);
        position: relative;
        border: 1.8px solid var(--color-primary);
        background-color: transparent;
        border-radius: var(--space-5);
        margin-bottom: 0;
        margin-top: 0;
        .fui-nav-bar-item-label {
          color: var(--color-primary);
        }
      }
    }
  }
  .fui-nav-bar-item {
    line-height: var(--space-4);
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    padding: 0 0 0.2rem 0;
    display: flex;
    flex-direction: row;
    text-decoration: none;
    font-weight: 400;
    column-gap: var(--space-2);
    white-space: nowrap;
    align-items: center;
    min-height: calc(46px - 1rem);
    border-top: var(--border-width-2) solid transparent;
    border-bottom: var(--border-width-2) solid transparent;
    &.fui-nav-bar-item-vertical {
      flex-direction: column;
      height: calc(var(--space-6) + 2px);
      padding: 0;
      align-items: center;
      justify-content: center;
      .fui-nav-bar-item-icon {
        width: auto;
        height: auto;
        max-width: calc(var(--space-3) + 4px);
        max-height: calc(var(--space-3) + 4px);
        margin-top: calc(var(--space-1) - 2px);
        svg {
          width: auto;
          height: auto;
          max-width: calc(var(--space-3) + 4px);
          max-height: calc(var(--space-3) + 4px);
        }
      }
      .fui-nav-bar-item-label {
        font-size: 0.9rem;
      }
    }
    &:hover,
    &:focus,
    &.active {
      .fui-nav-bar-item-icon {
        svg {
          fill: var(--color-primary);
        }
      }
      .fui-nav-bar-item-label {
        color: inherit;
      }
    }
    &.active {
      font-weight: 600;
    }
    .fui-nav-bar-item-icon {
      width: var(--space-3);
      height: var(--space-3);
      display: none;
      justify-items: center;
      align-items: center;
      &:has(> *) {
        display: flex;
      }
      svg {
        width: var(--space-3);
        height: var(--space-3);
        fill: rgba(var(--color-text) 0.5);
      }
    }
    .fui-nav-bar-item-label {
      color: inherit;
    }
  }
  .fui-nav-bar-divider {
    border-right: var(--border-width-1) solid var(--default-border-color);
    display: flex;
    height: var(--space-4);
    content: "";
  }
  .fui-nav-bar-menu-item {
    margin: 0;
    padding: 0 var(--space-2);
    height: var(--fui-application-header-height);
    .fui-dropdown-menu {
      height: var(--fui-application-header-height);
      .fui-nav-bar-item {
        margin: 0;
        padding: 0;
        height: var(--fui-application-header-height);
      }
    }
  }
}

/* Components/Navigation/NavigationRail/_navigation_rail.css */
@layer components {
  .fui-navigation-rail {
    display: flex;
    flex-direction: column;
  }
  .fui-navigation-rail-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    &:has(a.active) {
      &:before {
        display: block;
        content: "";
        position: absolute;
        top: var(--space-1);
        left: calc(var(--space-1) - 2px);
        border-radius: var(--radius-sm);
        border: var(--border-width-1) solid red;
        height: calc(100% - 8px);
      }
      .fui-navigation-rail-item-icon-active {
        display: flex;
      }
      .fui-navigation-rail-item-icon-inactive {
        display: none;
      }
    }
    &:hover,
    &:focus {
      background-color: #fff;
      .fui-navigation-rail-item-icon-active {
        display: flex;
      }
      .fui-navigation-rail-item-icon-inactive {
        display: none;
      }
    }
    &:not(&:has(a.active), &:hover, &:focus) {
      .fui-navigation-rail-item-icon-active {
        display: none;
      }
      .fui-navigation-rail-item-icon-inactive {
        display: flex;
      }
    }
    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      width: calc(var(--space-7) - 4px);
      margin: var(--space-2) var(--space-1);
    }
    .fui-navigation-rail-item-icon {
      display: flex;
      svg {
        height: var(--space-4);
        width: var(--space-4);
        fill: var(--color-text);
      }
    }
    .fui-navigation-rail-item-label {
      display: flex;
      width: 100%;
      justify-content: center;
      font-size: calc(var(--space-2) + 2px);
      text-decoration: none;
      margin: var(--space-1) 0 0 !important;
      padding: 0 2px;
      color: var(--color-text);
      justify-items: center;
      align-items: center;
      text-align: center;
    }
  }
  .fui-navigation-rail-separator {
    margin: var(--space-2) var(--space-2);
    border-bottom: var(--border-width-1) solid var(--default-border-color);
    display: flex;
  }
}

/* Components/Navigation/NavLink/_nav_link.css */
@layer components {
  .fui-nav-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .fui-nav-link-icon {
      margin-right: var(--space-1);
      color: var(--color-primary);
      display: flex;
    }
    .fui-nav-link-label {
      color: var(--color-primary);
      white-space: nowrap;
    }
  }
}

/* Components/Navigation/Nav/_nav.css */
@layer components {
  .fui-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-width: 280px;
    padding: 10px;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      overscroll-behavior: none;
      .fui-nav-body {
        flex: 1 1 auto;
        overflow-y: auto;
      }
    }
  }
  .fui-nav-item a {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    line-height: 20px;
    &:hover {
      background-color: #ffffff;
      cursor: pointer;
    }
    .fui-nav-item-icon {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      svg {
        height: 20px;
        width: 20px;
      }
    }
    .fui-nav-item-label {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      line-height: 20px;
      white-space: nowrap;
    }
  }
  .fui-nav-section-header {
    font-size: calc(var(--font-size-0) * 0.8);
    font-weight: 500;
    margin: 0.5rem 10px;
    white-space: nowrap;
  }
  .fui-nav-category {
    display: flex;
    flex-direction: column;
    &[aria-expanded=true] .fui-nav-category-item-expander-icon {
      svg {
        transform: rotate(180deg);
      }
    }
    .fui-nav-category-item {
      display: flex;
      flex-direction: row;
      flex: 1 1 auto;
      align-items: center;
      gap: 8px;
      padding: 10px;
      line-height: 20px;
      &:hover {
        background-color: #ffffff;
        cursor: pointer;
      }
      .fui-nav-category-item-icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        svg {
          height: 20px;
          width: 20px;
        }
      }
      .fui-nav-category-item-label {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        line-height: 20px;
        white-space: nowrap;
      }
      .fui-nav-category-item-expander-icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        transition: transform 100ms ease-in;
        svg {
          height: 18px;
          width: 18px;
        }
      }
    }
    [aria-expanded=true] > .tree-toggle::after {
      transform: rotate(90deg);
    }
    .fui-nav-sub-item-group {
      .fui-nav-sub-item {
        min-height: 0;
      }
    }
    .fui-nav-sub-item {
      display: flex;
      flex-direction: row;
      flex: 1 1 auto;
      align-items: center;
      gap: 8px;
      padding: 10px 10px 10px 40px;
      line-height: 20px;
      &:hover {
        background-color: #ffffff;
        cursor: pointer;
      }
    }
  }
  [role=treeitem] > [role=group] {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }
  .fui-nav-hamburger {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    svg {
      width: 24px;
      height: 24px;
    }
  }
  @media (max-width: 900px) {
    .fui-nav-hamburger {
      display: inline-flex;
      font-size: 1.5rem;
    }
  }
}

/* Components/Navigation/Pagination/_pagination.css */
@layer components {
  .fui-pagination {
    display: inline-flex;
    font-weight: 400;
    justify-content: space-between;
    width: 100%;
    height: calc(var(--space-5) + 4px);
    align-items: center;
    nav {
      width: auto;
      display: inline-flex;
      height: calc(var(--space-5) + 4px);
    }
    ul {
      display: inline-flex;
      padding: 0;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
    }
  }
  .fui-pagination-pagesize {
    display: flex;
    align-items: center;
    width: auto;
    margin-right: calc(var(--space-3) - 1px);
    white-space: nowrap;
    span {
      margin-right: calc(var(--space-1) + 1px);
    }
  }
  .fui-pagination-item {
    width: calc(var(--space-5) + 4px);
    height: calc(var(--space-5) + 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    &.active {
      cursor: pointer;
      &:hover {
        background-color: rgba(var(--color-primary) 0.2);
      }
      svg {
        fill: var(--color-primary);
        stroke: var(--color-primary);
        stroke-width: 0.5;
      }
    }
    &.inactive {
      cursor: inherit;
    }
    .fui-pagination-nav-link {
      width: calc(var(--space-5) + 4px);
      height: calc(var(--space-5) + 4px);
      display: flex;
      align-items: center;
      justify-content: center;
      .fui-pagination-nav-link-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
          width: calc(var(--space-4) - 2px);
          height: calc(var(--space-4) - 2px);
        }
      }
    }
  }
  .fui-pagination-page-selector {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    > * {
      margin-right: var(--space-1);
      margin-left: var(--space-1);
    }
  }
  .fui-pagination-current-items-range {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    color: #6b7280;
    border-left: var(--border-width-1) solid #e2e8f0;
  }
  .fui-pagination-pagejump {
    margin-left: calc(var(--space-3) - 1px);
    display: flex;
    align-items: center;
    white-space: pre;
    span {
      margin-right: calc(var(--space-1) + 1px);
    }
    .fui-select {
      width: calc(var(--space-7) + 16px);
    }
  }
  .fui-pagination-page-selector {
    &.fui-pagination-page-selector-minimal {
      display: flex;
      flex-direction: row;
      flex: 1 1 auto;
      align-items: center;
      span:not(.fui-pagination-item) {
        display: flex;
        justify-content: center;
      }
      .fui-select2 {
        margin-left: var(--space-2);
      }
      .fui-pagination-item {
        &:hover {
          border: none !important;
          cursor: default;
        }
        &.active {
          background-color: transparent;
          border: none;
          cursor: pointer;
        }
      }
    }
  }
}

/* Components/Navigation/SectionNavigation/_section_navigation.css */
@layer components {
  .fui-section-navigation {
    display: flex;
    flex-direction: row;
    scroll-behavior: smooth;
    overflow: hidden;
    width: 100%;
  }
  .fui-section-navigation-bar {
    display: flex;
    flex-direction: column;
    min-width: calc((var(--space-8) - 6px) * 2);
    flex: 1 0 auto;
    background-color: var(--background-secondary);
  }
  .fui-section-navigation-item {
    display: block;
    width: 100%;
    font-size: var(--space-3);
    padding: calc(var(--space-3) - 2px) 0 calc(var(--space-3) - 2px) var(--space-3);
    text-decoration: none;
    color: #575757;
    white-space: inherit;
    cursor: pointer;
    margin: 0;
    &.active {
      background-color: oklch(from rgb(230, 230, 230) -10% 0 0);
      border-right: calc(var(--border-width-5) * 2) solid var(--color-primary);
      transition: all 0.2s;
    }
  }
  .fui-section-navigation-body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .fui-section-navigation-section {
  }
}

/* Components/Navigation/Wizard/_wizard.css */
@layer components {
  .fui-wizard {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .fui-wizard-steps-bar {
    flex-direction: row;
    display: flex;
    .fui-wizard-step {
    }
    button {
      background-color: #f1f5f9;
      border: solid var(--border-width-1) #64748b;
      outline: none;
      display: flex;
      flex: 1 1 auto;
      padding: var(--space-3);
      &:hover {
        cursor: pointer;
      }
      &:first-child {
        border-left: none;
      }
      &:last-child {
        border-right: none;
      }
      &.fui-wizard-step-active {
        background-color: #334155;
        color: #fff;
      }
    }
  }
  .fui-wizard-active-step-content-pane {
    padding: var(--space-3);
  }
  .fui-wizard-active-step-content-footer {
    display: flex;
    padding: var(--space-2) var(--space-3);
    background-color: #f1f5f9;
    justify-items: flex-end;
    justify-content: flex-end;
  }
}

/* Assets/css/flareui.css */
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*# sourceMappingURL=flareui.css.map */