@charset "UTF-8";
/* Entry point for your PostCSS build */
/* Application CSS - Uses PostCSS with cssbundling-rails for proper file watching */
/* File order matches original bin/build-css for consistency */
/* Bootstrap 5.3.3 with custom variables - imported from npm */
/* ========================================
   BOOTSTRAP 5.3.3 CUSTOM CONFIGURATION

   Proper import order for customizing Bootstrap:
   1. Include functions first (for color manipulation)
   2. Override default Bootstrap variables
   3. Include Bootstrap variables (uses our overrides)
   4. Merge custom colors to $theme-colors map
   5. Include maps, mixins, and components

   See: https://getbootstrap.com/docs/5.3/customize/sass/
   ======================================== */
/* ========================================
   Sass built-in modules (modern syntax)
   These replace deprecated global functions like map-merge(), saturate()
   ======================================== */
/* ========================================
   STEP 1: Include functions first
   Required for color manipulation (tint, shade, etc.)
   ======================================== */
/* ========================================
   STEP 2: Override default Bootstrap variables
   Define these BEFORE importing Bootstrap's variables
   ======================================== */
/* ========================================
   CUSTOM BOOTSTRAP SASS VARIABLES

   This file defines Sass variable overrides for Bootstrap.
   These are COMPILE-TIME variables that Bootstrap uses
   when generating its CSS.

   Two types of customization:
   1. Bootstrap variable overrides - standard Bootstrap variables
      with custom values (e.g., $primary, $body-bg)
   2. Custom color definitions - new colors that will be added
      to $theme-colors map for Bootstrap utilities

   See: https://getbootstrap.com/docs/5.3/customize/sass/
   ======================================== */
/* ========================================
   SECTION 1: BOOTSTRAP VARIABLE OVERRIDES
   Override Bootstrap's default variables
   ======================================== */
/* Primary brand color - Main theme */
/* Secondary color - Bootstrap default */
/* Semantic colors - using Bootstrap defaults
   Override these if needed:
   $success: #198754 !default;
   $danger: #dc3545 !default;
   $warning: #ffc107 !default;
   $info: #0dcaf0 !default;
*/
/* Body background - light gray for visual hierarchy */
/* Body text color */
/* ========================================
   SECTION 2: CUSTOM COLOR DEFINITIONS
   New colors that will be added to $theme-colors
   ======================================== */
/* Dark secondary color - darker variant of secondary for headers/topbars
   Used for: topbar, dark panels, etc.
   Will be available as: .btn-dark-secondary, .bg-dark-secondary, .text-dark-secondary, etc. */
/* Add more custom theme colors here:
   Example:
   $goldenrod: #D5A021 !default;

   Then add to $custom-colors map in bootstrap-custom.scss
*/
/* ========================================
   SECTION 3: COMPONENT BACKGROUNDS
   Override component backgrounds after Bootstrap variables are loaded
   These will be set in bootstrap-custom.scss after importing variables
   ======================================== */
/* Note: We override component backgrounds in bootstrap-custom.scss
   after Bootstrap's variables are loaded, so we can reference
   Bootstrap's semantic surface variables ($secondary-bg, $tertiary-bg).

   This ensures components use Bootstrap's elevated surface colors
   which automatically work with dark mode. */
/* ========================================
   BORDERS
   ======================================== */
/* ========================================
   FORMS
   ======================================== */
/* Form controls - white background in light mode (Bootstrap default)
   Note: Since we override $body-bg to gray (#ececec), we need to
   explicitly set inputs to white, otherwise they inherit body-bg */
/* Form selects - inherit from input */
/* ========================================
   TYPOGRAPHY
   ======================================== */
/* Font family - Hebrew support (Open Sans includes Hebrew subset via Google Fonts v2 API) */
/* ========================================
   RTL SUPPORT
   ======================================== */
/* Enable Right-to-Left support for Hebrew */
/* ========================================
   SPACING & SIZING
   ======================================== */
/* ========================================
   DARK MODE OVERRIDES
   Define these BEFORE importing Bootstrap variables-dark

   Bootstrap 5.3+ uses these Sass variables to generate
   dark mode CSS custom properties automatically.
   ======================================== */
/* Dark mode body colors */
/* Dark mode borders */
/* Dark mode form controls */
/* Dark mode component backgrounds */
/* ========================================
   STEP 3: Include Bootstrap variables
   Now Bootstrap's variables use our overrides
   ======================================== */
/* ========================================
   STEP 3.5: Override component backgrounds for dark mode support
   Use CSS custom properties instead of hardcoded values so they
   automatically adjust for dark mode.
   ======================================== */
/* Elevated surfaces - use tertiary-bg for visual hierarchy
   Light mode: #f8f9fa, Dark mode: automatically darker */
/* Form controls - use custom form-bg (defined in colors.scss)
   This gives maximum contrast backgrounds that automatically adjust for dark mode
   Light mode: #ffffff (pure white)
   Dark mode: #3a3f44 (brighter than tertiary-bg for better contrast) */
/* Form selects - inherit from input */
/* ========================================
   STEP 4: Include Bootstrap dark mode variables
   This must come AFTER variables but BEFORE maps
   ======================================== */
/* ========================================
   STEP 5: Merge custom colors to theme map

   This makes your custom colors available for Bootstrap
   utilities like .btn-*, .bg-*, .text-*, .alert-*, etc.

   To add a new custom color:
   1. Define the Sass variable (e.g., $my-color: #ff5733)
   2. Add it to the $custom-colors map below
   3. Add dark mode variants to the dark maps
   4. Run npm run build:css
   5. Use with Bootstrap classes: .btn-my-color, .bg-my-color
   ======================================== */
/* Define custom colors as Sass map
   ONLY add colors that need theme color utilities (.btn-, .bg-, .text-, etc.)
   For component backgrounds, use Bootstrap's semantic surface variables instead
   (--bs-secondary-bg, --bs-tertiary-bg, etc.) */
/* Merge with Bootstrap's $theme-colors map
   Bootstrap will automatically generate utilities for all colors in this map:
   - .btn-{color}, .btn-outline-{color}
   - .bg-{color}, .bg-{color}-subtle
   - .text-{color}, .text-{color}-emphasis
   - .alert-{color}, .badge-{color}
   - .border-{color}, .border-{color}-subtle
   - And many more!
*/
/* ========================================
   STEP 6: Include Bootstrap maps
   This creates all the theme color maps including dark mode variants
   ======================================== */
/* ========================================
   STEP 7: Define dark mode variants for custom colors

   Bootstrap's maps.scss has now created the dark mode maps.
   We can now merge our custom color dark mode variants.

   Bootstrap generates dark mode utilities for custom colors
   using these maps. Define text, background, and border
   colors for each custom color in dark mode.

   Uses Bootstrap's color functions (tint-color, shade-color)
   to generate appropriate dark mode variants.
   ======================================== */
/* Dark mode text colors for custom theme colors
   Uses tint-color() to lighten colors for better visibility on dark backgrounds */
/* Dark mode subtle background colors for custom theme colors
   Uses shade-color() to create darker, more subtle backgrounds */
/* Dark mode subtle border colors for custom theme colors
   Uses shade-color() to create darker, more subtle borders */
/* ========================================
   STEP 8: Include remainder of Bootstrap
   ======================================== */
/* Step 6: Import the rest of Bootstrap */
:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #3f5175;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-dark-secondary: #37434e;
  --bs-primary-rgb: 63, 81, 117;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-dark-secondary-rgb: 55, 67, 78;
  --bs-primary-text-emphasis: rgb(25.2, 32.4, 46.8);
  --bs-secondary-text-emphasis: rgb(43.2, 46.8, 50);
  --bs-success-text-emphasis: rgb(10, 54, 33.6);
  --bs-info-text-emphasis: rgb(5.2, 80.8, 96);
  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
  --bs-danger-text-emphasis: rgb(88, 21.2, 27.6);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(216.6, 220.2, 227.4);
  --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);
  --bs-success-bg-subtle: rgb(209, 231, 220.8);
  --bs-info-bg-subtle: rgb(206.6, 244.4, 252);
  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
  --bs-danger-bg-subtle: rgb(248, 214.6, 217.8);
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(178.2, 185.4, 199.8);
  --bs-secondary-border-subtle: rgb(196.2, 199.8, 203);
  --bs-success-border-subtle: rgb(163, 207, 186.6);
  --bs-info-border-subtle: rgb(158.2, 233.8, 249);
  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
  --bs-danger-border-subtle: rgb(241, 174.2, 180.6);
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #ececec;
  --bs-body-bg-rgb: 236, 236, 236;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #3f5175;
  --bs-link-color-rgb: 63, 81, 117;
  --bs-link-decoration: underline;
  --bs-link-hover-color: rgb(50.4, 64.8, 93.6);
  --bs-link-hover-color-rgb: 50, 65, 94;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(255, 242.6, 205.4);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(63, 81, 117, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #e9ecef;
  --bs-body-color-rgb: 233, 236, 239;
  --bs-body-bg: #1a1a1a;
  --bs-body-bg-rgb: 26, 26, 26;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #e9ecef;
  --bs-secondary-color-rgb: 233, 236, 239;
  --bs-secondary-bg: #1d1f20;
  --bs-secondary-bg-rgb: 29, 31, 32;
  --bs-tertiary-color: rgba(233, 236, 239, 0.5);
  --bs-tertiary-color-rgb: 233, 236, 239;
  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(139.8, 150.6, 172.2);
  --bs-secondary-text-emphasis: rgb(166.8, 172.2, 177);
  --bs-success-text-emphasis: rgb(117, 183, 152.4);
  --bs-info-text-emphasis: rgb(109.8, 223.2, 246);
  --bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
  --bs-danger-text-emphasis: rgb(234, 133.8, 143.4);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-dark-secondary-text-emphasis: rgb(135, 142.2, 148.8);
  --bs-primary-bg-subtle: rgb(12.6, 16.2, 23.4);
  --bs-secondary-bg-subtle: rgb(21.6, 23.4, 25);
  --bs-success-bg-subtle: rgb(5, 27, 16.8);
  --bs-info-bg-subtle: rgb(2.6, 40.4, 48);
  --bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
  --bs-danger-bg-subtle: rgb(44, 10.6, 13.8);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-dark-secondary-bg-subtle: rgb(11, 13.4, 15.6);
  --bs-primary-border-subtle: rgb(37.8, 48.6, 70.2);
  --bs-secondary-border-subtle: rgb(64.8, 70.2, 75);
  --bs-success-border-subtle: rgb(15, 81, 50.4);
  --bs-info-border-subtle: rgb(7.8, 121.2, 144);
  --bs-warning-border-subtle: rgb(153, 115.8, 4.2);
  --bs-danger-border-subtle: rgb(132, 31.8, 41.4);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-dark-secondary-border-subtle: rgb(33, 40.2, 46.8);
  --bs-heading-color: inherit;
  --bs-link-color: rgb(139.8, 150.6, 172.2);
  --bs-link-hover-color: rgb(162.84, 171.48, 188.76);
  --bs-link-color-rgb: 140, 151, 172;
  --bs-link-hover-color-rgb: 163, 171, 189;
  --bs-code-color: rgb(230.4, 132.6, 181.2);
  --bs-highlight-color: #e9ecef;
  --bs-highlight-bg: rgb(102, 77.2, 2.8);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(117, 183, 152.4);
  --bs-form-valid-border-color: rgb(117, 183, 152.4);
  --bs-form-invalid-color: rgb(234, 133.8, 143.4);
  --bs-form-invalid-border-color: rgb(234, 133.8, 143.4);
}

/* Override root-level custom properties for light mode */
:root,
[data-bs-theme=light] {
  /* Form control background - pure white for maximum contrast */
  --bs-form-bg: #ffffff;
  /* Topbar background - uses custom dark-secondary color in light mode */
  --bs-topbar-bg: #37434e;
  /* Sidebar background - uses Bootstrap's tertiary-bg in light mode */
  --bs-sidebar-bg: #f8f9fa;
  /* Secondary sidebar background - darker than Bootstrap's body-secondary-bg for better visual hierarchy
     About 15% darker than default secondary-bg (#e9ecef → #c6c9cb) */
  --bs-secondary-sidebar-bg: #c6c9cb;
  /* Secondary sidebar submenu background - darker than main items for visual hierarchy */
  --bs-secondary-sidebar-submenu-bg: #b0b3b5;
  /* Text colors intended for use on dark-secondary surfaces */
  --bs-dark-secondary-text: rgba(255, 255, 255, 0.9);
  --bs-dark-secondary-text-muted: rgba(255, 255, 255, 0.65);
  /* High-contrast background utility - white in light mode, black in dark mode */
  --bs-contrast-bg: #ffffff;
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend {
  line-height: inherit;
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}
.display-1 {
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}
.display-2 {
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}
.display-3 {
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}
.display-4 {
  font-weight: 300;
  line-height: 1.2;
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}
.display-5 {
  font-weight: 300;
  line-height: 1.2;
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
.display-6 {
  font-weight: 300;
  line-height: 1.2;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: rgb(216.6, 220.2, 227.4);
  --bs-table-border-color: rgb(173.28, 176.16, 181.92);
  --bs-table-striped-bg: rgb(205.77, 209.19, 216.03);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(194.94, 198.18, 204.66);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(200.355, 203.685, 210.345);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: rgb(225.6, 227.4, 229);
  --bs-table-border-color: rgb(180.48, 181.92, 183.2);
  --bs-table-striped-bg: rgb(214.32, 216.03, 217.55);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(203.04, 204.66, 206.1);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(208.68, 210.345, 211.825);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-success {
  --bs-table-color: #000;
  --bs-table-bg: rgb(209, 231, 220.8);
  --bs-table-border-color: rgb(167.2, 184.8, 176.64);
  --bs-table-striped-bg: rgb(198.55, 219.45, 209.76);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(188.1, 207.9, 198.72);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(193.325, 213.675, 204.24);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-info {
  --bs-table-color: #000;
  --bs-table-bg: rgb(206.6, 244.4, 252);
  --bs-table-border-color: rgb(165.28, 195.52, 201.6);
  --bs-table-striped-bg: rgb(196.27, 232.18, 239.4);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(185.94, 219.96, 226.8);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(191.105, 226.07, 233.1);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: rgb(255, 242.6, 205.4);
  --bs-table-border-color: rgb(204, 194.08, 164.32);
  --bs-table-striped-bg: rgb(242.25, 230.47, 195.13);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(229.5, 218.34, 184.86);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(235.875, 224.405, 189.995);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: rgb(248, 214.6, 217.8);
  --bs-table-border-color: rgb(198.4, 171.68, 174.24);
  --bs-table-striped-bg: rgb(235.6, 203.87, 206.91);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(223.2, 193.14, 196.02);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(229.4, 198.505, 201.465);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: rgb(198.4, 199.2, 200);
  --bs-table-striped-bg: rgb(235.6, 236.55, 237.5);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(223.2, 224.1, 225);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(229.4, 230.325, 231.25);
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: rgb(77.4, 80.6, 83.8);
  --bs-table-striped-bg: rgb(44.1, 47.9, 51.7);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: rgb(55.2, 58.8, 62.4);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: rgb(49.65, 53.35, 57.05);
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}

.col-form-label {
  padding-top: calc(0.375rem + var(--bs-border-width));
  padding-bottom: calc(0.375rem + var(--bs-border-width));
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
  font-size: 0.875rem;
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-form-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #9fa8ba;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color.form-control-sm {
  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
.form-control-color.form-control-lg {
  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-form-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #9fa8ba;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

[data-bs-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

.form-check-input {
  --bs-form-check-bg: #fff;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--bs-border-width) solid var(--bs-border-color);
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #9fa8ba;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.form-check-input:checked {
  background-color: #3f5175;
  border-color: #3f5175;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #3f5175;
  border-color: #3f5175;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239fa8ba'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #ececec, 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #ececec, 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  -webkit-appearance: none;
          appearance: none;
  background-color: #3f5175;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: rgb(197.4, 202.8, 213.6);
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  -moz-appearance: none;
       appearance: none;
  background-color: #3f5175;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: rgb(197.4, 202.8, 213.6);
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-moz-placeholder) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-form-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-form-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.form-floating > :disabled ~ label,
.form-floating > .form-control:disabled ~ label {
  color: #6c757d;
}
.form-floating > :disabled ~ label::after,
.form-floating > .form-control:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid #dee2e6;
  border-radius: var(--bs-border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-valid-color);
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid,
.was-validated .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid,
.was-validated .input-group > .form-floating:not(:focus-within):valid,
.input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color);
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--bs-form-invalid-color);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-form-invalid-color);
}

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked:focus-visible + .btn {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3f5175;
  --bs-btn-border-color: #3f5175;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(53.55, 68.85, 99.45);
  --bs-btn-hover-border-color: rgb(50.4, 64.8, 93.6);
  --bs-btn-focus-shadow-rgb: 92, 107, 138;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(50.4, 64.8, 93.6);
  --bs-btn-active-border-color: rgb(47.25, 60.75, 87.75);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3f5175;
  --bs-btn-disabled-border-color: #3f5175;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(91.8, 99.45, 106.25);
  --bs-btn-hover-border-color: rgb(86.4, 93.6, 100);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(86.4, 93.6, 100);
  --bs-btn-active-border-color: rgb(81, 87.75, 93.75);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(21.25, 114.75, 71.4);
  --bs-btn-hover-border-color: rgb(20, 108, 67.2);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(20, 108, 67.2);
  --bs-btn-active-border-color: rgb(18.75, 101.25, 63);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(49.3, 209.95, 242.25);
  --bs-btn-hover-border-color: rgb(37.2, 207.3, 241.5);
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(61.4, 212.6, 243);
  --bs-btn-active-border-color: rgb(37.2, 207.3, 241.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(255, 202.3, 44.2);
  --bs-btn-hover-border-color: rgb(255, 199.2, 31.8);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(255, 205.4, 56.6);
  --bs-btn-active-border-color: rgb(255, 199.2, 31.8);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(187, 45.05, 58.65);
  --bs-btn-hover-border-color: rgb(176, 42.4, 55.2);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(176, 42.4, 55.2);
  --bs-btn-active-border-color: rgb(165, 39.75, 51.75);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-dark-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #37434e;
  --bs-btn-border-color: #37434e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(46.75, 56.95, 66.3);
  --bs-btn-hover-border-color: rgb(44, 53.6, 62.4);
  --bs-btn-focus-shadow-rgb: 85, 95, 105;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(44, 53.6, 62.4);
  --bs-btn-active-border-color: rgb(41.25, 50.25, 58.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #37434e;
  --bs-btn-disabled-border-color: #37434e;
}

.btn-outline-primary {
  --bs-btn-color: #3f5175;
  --bs-btn-border-color: #3f5175;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3f5175;
  --bs-btn-hover-border-color: #3f5175;
  --bs-btn-focus-shadow-rgb: 63, 81, 117;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3f5175;
  --bs-btn-active-border-color: #3f5175;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #3f5175;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #3f5175;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

.btn-outline-dark-secondary {
  --bs-btn-color: #37434e;
  --bs-btn-border-color: #37434e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #37434e;
  --bs-btn-hover-border-color: #37434e;
  --bs-btn-focus-shadow-rgb: 55, 67, 78;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #37434e;
  --bs-btn-active-border-color: #37434e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #37434e;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #37434e;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 92, 107, 138;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-tertiary-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #3f5175;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #3f5175;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}

.btn-group {
  border-radius: var(--bs-border-radius);
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child) {
  margin-left: calc(var(--bs-border-width) * -1);
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: calc(var(--bs-border-width) * -1);
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
}
.nav-link.disabled, .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #3f5175;
}
.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.125rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: currentcolor;
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  font-weight: 700;
  color: var(--bs-nav-underline-link-active-color);
  border-bottom-color: currentcolor;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-tertiary-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2825.2, 32.4, 46.8%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type > .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

.accordion-flush > .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush > .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush > .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
  border-radius: 0;
}
.accordion-flush > .accordion-item > .accordion-collapse {
  border-radius: 0;
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28139.8, 150.6, 172.2%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28139.8, 150.6, 172.2%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-tertiary-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #3f5175;
  --bs-pagination-active-border-color: #3f5175;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(var(--bs-border-width) * -1);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}

.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
  color: var(--bs-alert-link-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

.alert-dark-secondary {
  --bs-alert-color: var(--bs-dark-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-dark-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-dark-secondary-text-emphasis);
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #3f5175;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}

.progress-stacked > .progress {
  overflow: visible;
}

.progress-stacked > .progress > .progress-bar {
  width: 100%;
}

.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #3f5175;
  --bs-list-group-active-border-color: #3f5175;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}

.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: var(--bs-list-group-border-radius);
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-list-group-border-width);
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: calc(-1 * var(--bs-list-group-border-width));
  border-left-width: var(--bs-list-group-border-width);
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
}

.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
}

.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--bs-success-bg-subtle);
  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
}

.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--bs-info-bg-subtle);
  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
}

.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}

.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
}

.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--bs-light-bg-subtle);
  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}

.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
}

.list-group-item-dark-secondary {
  --bs-list-group-color: var(--bs-dark-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-secondary-text-emphasis);
}

.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(63, 81, 117, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}

.btn-close-white {
  filter: var(--bs-btn-close-white-filter);
}

[data-bs-theme=dark] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}
.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-tertiary-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.fade .modal-dialog {
  transform: translate(0, -50px);
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: var(--bs-border-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}

/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}

/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}

.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}
.carousel-dark .carousel-caption {
  color: #000;
}

[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target], [data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] {
  background-color: #000;
}
[data-bs-theme=dark] .carousel .carousel-caption, [data-bs-theme=dark].carousel .carousel-caption {
  color: #000;
}

.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
    visibility: visible;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}

.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}

.placeholder-xs {
  min-height: 0.6em;
}

.placeholder-sm {
  min-height: 0.8em;
}

.placeholder-lg {
  min-height: 1.2em;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
            mask-position: -200% 0%;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.text-bg-primary {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
  color: #000 !important;
  background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
  color: #000 !important;
  background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-light {
  color: #000 !important;
  background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark {
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark-secondary {
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.link-primary {
  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover, .link-primary:focus {
  color: RGBA(50, 65, 94, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(50, 65, 94, var(--bs-link-underline-opacity, 1)) !important;
}

.link-secondary {
  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
}

.link-success {
  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-success:hover, .link-success:focus {
  color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
}

.link-info {
  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-info:hover, .link-info:focus {
  color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
}

.link-warning {
  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-warning:hover, .link-warning:focus {
  color: RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
}

.link-danger {
  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-danger:hover, .link-danger:focus {
  color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
}

.link-light {
  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-light:hover, .link-light:focus {
  color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark {
  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark:hover, .link-dark:focus {
  color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark-secondary {
  color: RGBA(var(--bs-dark-secondary-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-dark-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark-secondary:hover, .link-dark-secondary:focus {
  color: RGBA(44, 54, 62, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(44, 54, 62, var(--bs-link-underline-opacity, 1)) !important;
}

.link-body-emphasis {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis:hover, .link-body-emphasis:focus {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
}

.focus-ring:focus {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  backface-visibility: hidden;
}
.icon-link > .bi {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .bi {
    transition: none;
  }
}

.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.object-fit-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.object-fit-cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

.object-fit-fill {
  -o-object-fit: fill !important;
     object-fit: fill !important;
}

.object-fit-scale {
  -o-object-fit: scale-down !important;
     object-fit: scale-down !important;
}

.object-fit-none {
  -o-object-fit: none !important;
     object-fit: none !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !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;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-dark-secondary {
  --bs-focus-ring-color: rgba(var(--bs-dark-secondary-rgb), var(--bs-focus-ring-opacity));
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}

.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
}

.border-dark-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}

.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}

.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}

.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle) !important;
}

.border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}

.border-info-subtle {
  border-color: var(--bs-info-border-subtle) !important;
}

.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle) !important;
}

.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}

.border-light-subtle {
  border-color: var(--bs-light-border-subtle) !important;
}

.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle) !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.border-opacity-10 {
  --bs-border-opacity: 0.1;
}

.border-opacity-25 {
  --bs-border-opacity: 0.25;
}

.border-opacity-50 {
  --bs-border-opacity: 0.5;
}

.border-opacity-75 {
  --bs-border-opacity: 0.75;
}

.border-opacity-100 {
  --bs-border-opacity: 1;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !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;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !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;
}

.justify-content-evenly {
  justify-content: space-evenly !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;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

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

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !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;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

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

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.row-gap-3 {
  row-gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem !important;
}

.row-gap-5 {
  row-gap: 3rem !important;
}

.column-gap-0 {
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

.column-gap-1 {
  -moz-column-gap: 0.25rem !important;
       column-gap: 0.25rem !important;
}

.column-gap-2 {
  -moz-column-gap: 0.5rem !important;
       column-gap: 0.5rem !important;
}

.column-gap-3 {
  -moz-column-gap: 1rem !important;
       column-gap: 1rem !important;
}

.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
       column-gap: 1.5rem !important;
}

.column-gap-5 {
  -moz-column-gap: 3rem !important;
       column-gap: 3rem !important;
}

.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-dark-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color) !important;
}

.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color) !important;
}

.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

.link-opacity-10 {
  --bs-link-opacity: 0.1;
}

.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}

.link-opacity-25 {
  --bs-link-opacity: 0.25;
}

.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}

.link-opacity-50 {
  --bs-link-opacity: 0.5;
}

.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}

.link-opacity-75 {
  --bs-link-opacity: 0.75;
}

.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}

.link-opacity-100 {
  --bs-link-opacity: 1;
}

.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}

.link-offset-1 {
  text-underline-offset: 0.125em !important;
}

.link-offset-1-hover:hover {
  text-underline-offset: 0.125em !important;
}

.link-offset-2 {
  text-underline-offset: 0.25em !important;
}

.link-offset-2-hover:hover {
  text-underline-offset: 0.25em !important;
}

.link-offset-3 {
  text-underline-offset: 0.375em !important;
}

.link-offset-3-hover:hover {
  text-underline-offset: 0.375em !important;
}

.link-underline-primary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-success {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-info {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-warning {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-danger {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-light {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-dark {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-dark-secondary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-dark-secondary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}

.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}

.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.user-select-all {
  -webkit-user-select: all !important;
     -moz-user-select: all !important;
          user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}

.rounded-5 {
  border-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}

.rounded-top {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-top-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg) !important;
  border-top-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl) !important;
  border-top-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-top-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-end {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-end-circle {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-bottom-circle {
  border-bottom-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
}

.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  border-top-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
  border-top-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
  border-top-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-start-circle {
  border-bottom-left-radius: 50% !important;
  border-top-left-radius: 50% !important;
}

.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-top-left-radius: var(--bs-border-radius-pill) !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.z-n1 {
  z-index: -1 !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .object-fit-sm-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-sm-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-sm-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-sm-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-sm-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-inline-grid {
    display: inline-grid !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;
  }
  .d-sm-none {
    display: none !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;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !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;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !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;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-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;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !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;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-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;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-sm-3 {
    row-gap: 1rem !important;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-sm-5 {
    row-gap: 3rem !important;
  }
  .column-gap-sm-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-sm-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-sm-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-sm-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-sm-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-sm-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .object-fit-md-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-md-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-md-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-md-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-md-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-inline-grid {
    display: inline-grid !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;
  }
  .d-md-none {
    display: none !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;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !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;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !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;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-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;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !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;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-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;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-md-3 {
    row-gap: 1rem !important;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-md-5 {
    row-gap: 3rem !important;
  }
  .column-gap-md-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-md-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-md-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-md-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-md-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-md-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .object-fit-lg-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-lg-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-lg-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-lg-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-lg-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-inline-grid {
    display: inline-grid !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;
  }
  .d-lg-none {
    display: none !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;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !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;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !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;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-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;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !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;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-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;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-lg-3 {
    row-gap: 1rem !important;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-lg-5 {
    row-gap: 3rem !important;
  }
  .column-gap-lg-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-lg-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-lg-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-lg-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-lg-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-lg-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .object-fit-xl-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-xl-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-xl-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-xl-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-xl-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-inline-grid {
    display: inline-grid !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;
  }
  .d-xl-none {
    display: none !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;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !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;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !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;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-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;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !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;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-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;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xl-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-xl-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-xl-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-xl-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-xl-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .object-fit-xxl-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-xxl-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-xxl-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-xxl-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-xxl-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-inline-grid {
    display: inline-grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xxl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xxl-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-xxl-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-xxl-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-xxl-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-xxl-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !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;
  }
  .d-print-none {
    display: none !important;
  }
}
/* ========================================
   STEP 9: Dark Mode Customizations

   Override CSS custom properties for dark mode.
   These must come AFTER all Bootstrap imports so they
   properly override the generated CSS.
   ======================================== */
/* Dark mode customizations

   Bootstrap overrides component-specific CSS custom properties for dark mode
   (see: .btn-close, .form-select, .form-switch in Bootstrap's _root.scss).

   We follow the same pattern to make theme colors lighter and more saturated
   in dark mode for better visibility on dark backgrounds.

   This is Bootstrap's established pattern for dark mode component customization. */
/* Mixin: Dark mode theme color variant

   Generates all component overrides for a theme color in dark mode.
   Makes the color lighter and optionally more saturated.

   @param $name - Color name (e.g., "primary", "success")
   @param $color - Base color value (e.g., $primary, $success)
   @param $tint - How much to lighten (0-100%, default 50%)
   @param $saturate - How much to saturate (0-100%, default 20%)
   @param $include-link - Whether to override link colors (default false, only primary should do this)

   Usage:
   [data-bs-theme="dark"] {
     @include dark-mode-color-variant("primary", $primary, $include-link: true);
     @include dark-mode-color-variant("success", $success, $tint: 40%);
   } */
/* Apply dark mode variants to theme colors */
[data-bs-theme=dark] {
  /* Primary - lighter and more saturated, includes link colors */
  /* Compute lighter, more saturated variant for dark mode */
  /* Override root-level color variables */
  --bs-primary: rgb(108.75, 134.75, 186.75);
  --bs-primary-rgb: 109, 135, 187;
  /* Button variants - solid button */
}
[data-bs-theme=dark] .btn-primary {
  --bs-btn-bg: rgb(108.75, 134.75, 186.75);
  --bs-btn-border-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-hover-bg: rgb(97.875, 121.275, 168.075);
  --bs-btn-hover-border-color: rgb(95.15625, 117.90625, 163.40625);
  --bs-btn-active-bg: rgb(87, 107.8, 149.4);
  --bs-btn-active-border-color: rgb(81.5625, 101.0625, 140.0625);
  --bs-btn-disabled-bg: rgb(108.75, 134.75, 186.75);
  --bs-btn-disabled-border-color: rgb(108.75, 134.75, 186.75);
}
[data-bs-theme=dark] {
  /* Button variants - outline button */
}
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-border-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-hover-bg: rgb(108.75, 134.75, 186.75);
  --bs-btn-hover-border-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-active-bg: rgb(108.75, 134.75, 186.75);
  --bs-btn-active-border-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-disabled-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-disabled-border-color: rgb(108.75, 134.75, 186.75);
  --bs-btn-focus-shadow-rgb: 109, 135, 187;
}
[data-bs-theme=dark] {
  /* Badge */
}
[data-bs-theme=dark] .badge.bg-primary {
  background-color: rgb(108.75, 134.75, 186.75) !important;
}
[data-bs-theme=dark] {
  /* Alert */
}
[data-bs-theme=dark] .alert-primary {
  --bs-alert-color: rgb(43.5, 53.9, 74.7);
  --bs-alert-bg: rgb(240.375, 242.975, 248.175);
  --bs-alert-border-color: rgb(225.75, 230.95, 241.35);
}
[data-bs-theme=dark] {
  /* List group */
}
[data-bs-theme=dark] .list-group-item-primary {
  --bs-list-group-color: rgb(43.5, 53.9, 74.7);
  --bs-list-group-bg: rgb(240.375, 242.975, 248.175);
  --bs-list-group-border-color: rgb(225.75, 230.95, 241.35);
}
[data-bs-theme=dark] {
  /* Table */
}
[data-bs-theme=dark] .table-primary {
  --bs-table-bg: rgb(240.375, 242.975, 248.175);
  --bs-table-border-color: rgb(225.75, 230.95, 241.35);
}
[data-bs-theme=dark] {
  /* Link colors - only for primary */
  --bs-link-color: rgb(108.75, 134.75, 186.75);
  --bs-link-hover-color: rgb(87, 107.8, 149.4);
  --bs-link-color-rgb: 109, 135, 187;
  --bs-link-hover-color-rgb: 87, 108, 149;
  /* Muted text should be dimmer than body text in dark mode */
  --bs-secondary-color: rgba(233, 236, 239, 0.6);
  --bs-secondary-color-rgb: 233, 236, 239;
  /* Form control background - brighter than tertiary-bg for better contrast
     Overrides Bootstrap's compiled --bs-form-bg from var(--bs-tertiary-bg) */
  --bs-form-bg: #3a3f44;
  /* Topbar background - darker than default dark for better visual hierarchy
     Makes topbar stand out from body background */
  --bs-topbar-bg: #1a1d20;
  /* Sidebar background - matches Bootstrap's dark color for consistency */
  --bs-sidebar-bg: #212529;
  /* Secondary sidebar background - darker than main content's tertiary-bg for visual hierarchy
     Creates layered appearance: main sidebar (darkest) → secondary sidebar → body → cards (lightest) */
  --bs-secondary-sidebar-bg: #1d1f20;
  /* Secondary sidebar submenu background - darker than main items for visual hierarchy */
  --bs-secondary-sidebar-submenu-bg: #1f2326;
  /* Text colors intended for use on dark-secondary surfaces */
  --bs-dark-secondary-text: rgba(255, 255, 255, 0.92);
  --bs-dark-secondary-text-muted: rgba(255, 255, 255, 0.6);
  /* High-contrast background utility - slightly darker than tertiary surfaces */
  --bs-contrast-bg: rgb(38.25, 42.75, 47.25);
  /* Add more colors as needed:
     @include dark-mode-color-variant("success", $success, $tint: 40%);
     @include dark-mode-color-variant("danger", $danger, $tint: 45%);
     @include dark-mode-color-variant("warning", $warning, $tint: 35%);
     @include dark-mode-color-variant("info", $info, $tint: 40%);
  */
}

/* ========================================
   RTL FORM FIXES
   Ensure form hints are properly aligned in RTL context
   ======================================== */
.form-text {
  text-align: start;
}

/* Custom color system - runtime CSS custom properties for dark mode and app-specific colors */
/* ========================================
   RUNTIME CSS CUSTOM PROPERTIES

   Bootstrap 5.3+ automatically generates CSS custom properties
   from Sass variables, including dark mode variants via
   [data-bs-theme="dark"] selector.

   This file should ONLY contain:
   1. App-specific custom properties (not Bootstrap colors)
   2. Additional dark mode tweaks not covered by Bootstrap

   DO NOT duplicate Bootstrap color properties here.
   They are automatically generated from _custom-variables.scss
   and bootstrap-custom.scss.

   ========================================
   HOW TO CREATE DUAL-PURPOSE CSS CUSTOM PROPERTIES
   (Properties that change between light and dark mode)

   For component-specific backgrounds/colors that need different
   values in light vs dark mode, follow this pattern:

   STEP 1: Define the custom property in bootstrap-custom.scss
           (NOT in this file, because it needs to be available at Sass compile time)

   In bootstrap-custom.scss, AFTER the @import 'bootstrap/scss/root' line:

   :root,
   [data-bs-theme="light"] {
     --bs-my-component-bg: #value-for-light-mode;
   }

   STEP 2: Override for dark mode in bootstrap-custom.scss

   In the [data-bs-theme="dark"] section at the bottom of bootstrap-custom.scss:

   [data-bs-theme="dark"] {
     --bs-my-component-bg: #value-for-dark-mode;
   }

   STEP 3: Apply to your component

   Create a component-specific SCSS file (e.g., main/my-component.scss):

   .my-component {
     background-color: var(--bs-my-component-bg) !important;
   }

   NOTE: If your component uses Bootstrap utility classes (like .bg-dark),
   you may need higher specificity to override them:

   .my-component.bg-dark {
     background-color: var(--bs-my-component-bg) !important;
   }

   STEP 4: Import the component SCSS in application.scss

   @use 'main/my-component.scss';

   STEP 5: Rebuild CSS

   npm run build:css

   EXAMPLES IN THIS CODEBASE:
   - Form inputs: --bs-form-bg (white in light, #3a3f44 in dark)
     Definition: bootstrap-custom.scss lines 154, 310
     Applied in: Bootstrap's compiled form styles
     Purpose: Maximum contrast backgrounds for form controls

   - Topbar: --bs-topbar-bg (#37434e in light, #1a1d20 in dark)
     Definition: bootstrap-custom.scss lines 157, 314
     Applied in: main/navbar.scss with .app-topbar.bg-dark-secondary selector
     Purpose: Darker topbar in dark mode for better visual hierarchy

   - Sidebar: --bs-sidebar-bg (#f8f9fa in light, #212529 in dark)
     Definition: bootstrap-custom.scss lines 160, 317
     Applied in: main/sidebar.scss
     Purpose: Distinct sidebar background that matches Bootstrap's surface colors

   WHY THIS PATTERN:
   - CSS custom properties enable runtime theme switching (instant, no page reload)
   - Defining in bootstrap-custom.scss ensures availability during Sass compilation
   - Follows Bootstrap 5.3+ established pattern for dark mode customization
   - Single source of truth: change one value, updates everywhere automatically
   ======================================== */
/* ========================================
   APP-SPECIFIC DARK MODE TWEAKS

   This file contains ONLY app-specific CSS refinements for dark mode.

   DO NOT define custom properties here - they belong in bootstrap-custom.scss!

   All custom properties with light/dark variants (like --bs-form-bg,
   --bs-topbar-bg, --bs-sidebar-bg) are defined in bootstrap-custom.scss
   to keep all dark mode overrides in one place.

   This file should ONLY contain:
   - Component-specific CSS tweaks (not custom property definitions)
   - Fine-tuning of Bootstrap's automatic dark mode
   ======================================== */
[data-bs-theme=dark] {
  /* ========================================
     Form Element Enhancements
     Fine-tune Bootstrap's dark mode form styling
     ======================================== */
  /* Placeholder text - ensure proper contrast and consistency */
}
[data-bs-theme=dark] .form-control::-moz-placeholder, [data-bs-theme=dark] input::-moz-placeholder, [data-bs-theme=dark] textarea::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
[data-bs-theme=dark] .form-control::placeholder,
[data-bs-theme=dark] input::placeholder,
[data-bs-theme=dark] textarea::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
[data-bs-theme=dark] {
  /* Select element placeholders - ensure visibility */
}
[data-bs-theme=dark] select:invalid,
[data-bs-theme=dark] select[value=""] {
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] select:valid {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] select option[value=""],
[data-bs-theme=dark] select option:disabled {
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] {
  /* ========================================
     TomSelect Dark Mode Fixes
     Override TomSelect's Bootstrap 5 theme for dark mode
     ======================================== */
  /* Selected items (tags) in the input area */
}
[data-bs-theme=dark] .ts-wrapper .ts-control .item {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] {
  /* Remove button on selected items */
}
[data-bs-theme=dark] .ts-wrapper.plugin-remove_button .item .remove {
  color: var(--bs-tertiary-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .ts-wrapper.plugin-remove_button .item .remove:hover {
  color: var(--bs-body-color);
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] {
  /* Input control background */
}
[data-bs-theme=dark] .ts-wrapper .ts-control {
  background-color: var(--bs-form-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* Input text inside TomSelect */
}
[data-bs-theme=dark] .ts-wrapper .ts-control input {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* Dropdown menu */
}
[data-bs-theme=dark] .ts-wrapper .ts-dropdown {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* Dropdown options */
}
[data-bs-theme=dark] .ts-wrapper .ts-dropdown .option {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* Dropdown option hover/active states */
}
[data-bs-theme=dark] .ts-wrapper .ts-dropdown .option:hover,
[data-bs-theme=dark] .ts-wrapper .ts-dropdown .option.active {
  background-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme=dark] {
  /* Selected option in dropdown */
}
[data-bs-theme=dark] .ts-wrapper .ts-dropdown .option.selected {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* No results message */
}
[data-bs-theme=dark] .ts-wrapper .ts-dropdown .no-results {
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] {
  /* Focused state */
}
[data-bs-theme=dark] .ts-wrapper.focus .ts-control {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ========================================
   FUTURE: RUNTIME THEME SWITCHING

   If you need additional theme variants beyond light/dark
   (e.g., seasonal themes), add them here as body classes:

   body.summer-theme {
     --bs-primary: #ff6b35;
     --bs-primary-rgb: 255, 107, 53;
     --bs-secondary: #f7931e;
     --bs-secondary-rgb: 247, 147, 30;
   }

   Toggle themes with:
   - HTML: <body class="summer-theme">
   - JavaScript: document.body.classList.add('summer-theme');
   ======================================== */
/* Open Sans - Loaded via Google Fonts CDN (in application layout) */
/* https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&subset=hebrew&display=swap */
/* Includes Hebrew glyphs natively; variable weight 300-800 */
:root {
  --font-family-base: "Open Sans", sans-serif;
}

body {
  font-family: var(--font-family-base);
}

.report-designer-v3 {
  display: flex;
  flex-direction: column;
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: calc(100vh - 220px);
  height: auto;
  max-height: none;
  overflow: hidden;
  margin-bottom: 0;
}

.report-designer-header {
  height: 60px;
  background-color: var(--bs-dark-secondary);
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.report-designer-header .header-content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
}
.report-designer-header .header-tabs-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.report-designer-header .header-details-button {
  flex-shrink: 0;
}
.report-designer-header .header-details-button .tab-button {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--bs-white);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.report-designer-header .header-details-button .tab-button:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
.report-designer-header .header-details-button .tab-button.active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 500;
}
.report-designer-header .header-details-button .tab-button i {
  font-size: 0.875rem;
}
.report-designer-header .header-tabs-wrapper {
  position: relative;
  flex-shrink: 1;
  flex-grow: 0;
  min-width: 0;
  overflow: hidden;
}
.report-designer-header .header-tabs-wrapper .scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--bs-dark-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bs-white);
  width: 28px;
  height: 28px;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.9;
}
.report-designer-header .header-tabs-wrapper .scroll-arrow:hover {
  opacity: 1;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}
.report-designer-header .header-tabs-wrapper .scroll-arrow.scroll-left {
  left: 0;
}
[dir=rtl] .report-designer-header .header-tabs-wrapper .scroll-arrow.scroll-left {
  left: auto;
  right: 0;
}
.report-designer-header .header-tabs-wrapper .scroll-arrow.scroll-right {
  right: 0;
}
[dir=rtl] .report-designer-header .header-tabs-wrapper .scroll-arrow.scroll-right {
  right: auto;
  left: 0;
}
.report-designer-header .header-tabs-wrapper .scroll-arrow i {
  font-size: 0.75rem;
}
.report-designer-header .header-tabs-wrapper:not(.has-overflow) .scroll-arrow {
  display: none;
}
.report-designer-header .header-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 1;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide scrollbar for cleaner look while keeping functionality */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.report-designer-header .header-tabs::-webkit-scrollbar {
  height: 4px;
}
.report-designer-header .header-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.report-designer-header .header-tabs::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.report-designer-header .header-tabs .tab-button {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--bs-white);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.report-designer-header .header-tabs .tab-button:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
.report-designer-header .header-tabs .tab-button.active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 500;
}
.report-designer-header .header-tabs .tab-button.active .btn-link {
  color: var(--bs-emphasis-color);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.report-designer-header .header-tabs .tab-button.active .btn-link:hover {
  opacity: 1;
}
.report-designer-header .header-tabs .tab-button.active .btn-link i {
  font-size: 0.75rem;
}
.report-designer-header .header-tabs .tab-button i {
  font-size: 0.875rem;
}
.report-designer-header .header-tabs .dropdown .dropdown-menu {
  font-size: 0.875rem;
}
.report-designer-header .header-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-grow: 1;
  min-width: 0;
}
.report-designer-header .header-info .report-name,
.report-designer-header .header-info .sheet-name {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-designer-header .header-info .report-name i,
.report-designer-header .header-info .sheet-name i {
  flex-shrink: 0;
  color: var(--bs-secondary-color);
}
.report-designer-header .header-info .report-name {
  font-weight: 600;
}
.report-designer-header .header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.report-designer-header .header-actions .autosave-indicator {
  display: none;
}
.report-designer-header .header-actions .btn {
  font-size: 0.875rem;
}
.report-designer-header .header-actions .btn.btn-save {
  position: relative;
}
.report-designer-header .header-actions .btn.btn-save i {
  transition: all 0.3s ease;
}
.report-designer-header .header-actions .btn.btn-save.saved i::before {
  content: "\f00c";
  color: var(--bs-success);
}
.report-designer-header .header-actions .header-actions-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.report-designer-header .header-actions .header-actions-group > .btn,
.report-designer-header .header-actions .header-actions-group > .dropdown > .btn {
  border-radius: 0;
  margin: 0;
}
.report-designer-header .header-actions .header-actions-group > :only-child .btn,
.report-designer-header .header-actions .header-actions-group > .btn:only-child {
  border-radius: var(--bs-border-radius);
}
.report-designer-header .header-actions .header-actions-group > :first-child:not(:only-child) .btn,
.report-designer-header .header-actions .header-actions-group > .btn:first-child:not(:only-child) {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
[dir=rtl] .report-designer-header .header-actions .header-actions-group > :first-child:not(:only-child) .btn,
[dir=rtl] .report-designer-header .header-actions .header-actions-group > .btn:first-child:not(:only-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
.report-designer-header .header-actions .header-actions-group > :last-child:not(:only-child) .btn,
.report-designer-header .header-actions .header-actions-group > .btn:last-child:not(:only-child) {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}
[dir=rtl] .report-designer-header .header-actions .header-actions-group > :last-child:not(:only-child) .btn,
[dir=rtl] .report-designer-header .header-actions .header-actions-group > .btn:last-child:not(:only-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.report-designer-header .header-actions .header-actions-group > * + * {
  margin-left: -1px;
}
[dir=rtl] .report-designer-header .header-actions .header-actions-group > * + * {
  margin-left: 0;
  margin-right: -1px;
}
.report-designer-header .header-actions .header-actions-group .dropdown {
  display: inline-block;
}

.report-designer-panels {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: stretch;
  gap: 0;
}
.report-designer-panels > * {
  min-height: 0;
}

.panel-left {
  border-right: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-height: 0;
  flex: 0 0 280px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 10;
  /* Above center panel to keep toggle button visible */
}
.panel-left.collapsed {
  transform: translateX(-280px);
  overflow: visible;
  border-right: 1px solid transparent;
}
.panel-left.collapsed .column-library-toggle-btn {
  left: 273px;
  /* LTR: Button moves with panel to stay visible */
}
.panel-left {
  /* RTL collapsed state */
}
[dir=rtl] .panel-left.collapsed {
  transform: translateX(280px);
  /* RTL: Slide out to the right */
}
[dir=rtl] .panel-left.collapsed .column-library-toggle-btn {
  right: 280px;
  /* RTL: Button moves with panel to stay visible */
  left: auto;
}

.panel-center {
  background-color: var(--bs-tertiary-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  transition: margin-left 0.3s ease, margin-right 0.3s ease;
  margin-left: 0;
}
.panel-center .panel-content {
  background-color: var(--bs-secondary-bg);
}
.panel-center.column-library-collapsed {
  margin-left: -280px;
}
@media (min-width: 1200px) {
  .panel-center.properties-open {
    margin-right: 320px;
  }
}

.panel-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 320px;
  background-color: var(--bs-secondary-bg);
  border-left: 1px solid var(--bs-border-color);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease, opacity 0.15s ease, visibility 0.15s ease;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  min-height: 0;
}
.panel-right.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.panel-right .panel-header h6 {
  padding-right: 1.5rem;
  padding-left: 0;
}

.panel-header {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-primary-bg-subtle);
  position: relative;
  min-height: 3rem;
}
.panel-header h6 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}
.panel-header h6 i {
  margin-right: 0.5rem;
  color: var(--bs-secondary-color);
  transition: margin 0.3s ease;
}
.panel-header h6 .header-text {
  transition: opacity 0.3s ease, width 0.3s ease;
}
.panel-header h6 .badge {
  margin-left: auto;
  font-weight: 500;
  transition: opacity 0.3s ease;
}
.panel-header .close-button {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.15s ease;
}
.panel-header .close-button:hover {
  color: var(--bs-body-color);
}

.column-library-toggle-btn {
  position: absolute;
  top: 0;
  right: auto;
  left: calc(280px - 25px);
  /* LTR: Inside panel when expanded */
  z-index: 100;
  /* High z-index to stay above center panel when it shifts */
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  color: var(--bs-secondary-color);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  /* LTR: justify end */
  transition: transform 0.1s ease, left 0.3s ease;
  border-radius: 0 3px 3px 0;
  /* LTR: Rounded on right, flush on left */
}
.column-library-toggle-btn i {
  font-size: 0.75rem;
  margin-top: 5px;
  margin-left: 7px;
  transition: inherit;
}
.column-library-toggle-btn:hover {
  background-color: transparent !important;
  color: var(--bs-body-color);
}
.column-library-toggle-btn:focus, .column-library-toggle-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.column-library-toggle-btn:active {
  transform: scale(0.9);
}
.column-library-toggle-btn {
  /* RTL support - panel on right side */
}
[dir=rtl] .column-library-toggle-btn {
  left: auto;
  right: calc(280px - 20px);
  /* RTL: Inside panel when expanded */
  justify-content: flex-start;
  /* RTL: justify start */
  border-radius: 3px 0 0 3px;
  /* RTL: Rounded on left, flush on right */
  transition: transform 0.1s ease, right 0.3s ease;
}
[dir=rtl] .column-library-toggle-btn i {
  margin-left: 0;
  margin-right: 7px;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panel-content::-webkit-scrollbar {
  width: 8px;
}
.panel-content::-webkit-scrollbar-track {
  background: var(--bs-secondary-bg);
}
.panel-content::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
  border-radius: 4px;
}
.panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary-color);
}

.empty-state-placeholder {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 80%;
  max-width: 400px;
  z-index: 0;
}
.empty-state-placeholder i,
.empty-state-placeholder h5,
.empty-state-placeholder p {
  pointer-events: none;
}

.selected-columns-list {
  flex: 1;
  min-height: 100%;
}
.selected-columns-list ul {
  min-height: 100%;
}

.column-library-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.column-library-wrapper .drag-handle {
  cursor: move;
  color: var(--bs-secondary-color);
  opacity: 0.5;
}
.column-library-wrapper .drag-handle:hover {
  opacity: 1;
}

.search-box {
  padding: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
}
.search-box .form-control {
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.search-box .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.column-library-groups {
  padding: 0;
}

.column-group:last-child {
  border-bottom: none;
}
.column-group .group-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border: none;
  width: 100%;
  text-align: start;
  transition: background-color 0.15s ease;
}
.column-group .group-header:hover {
  background-color: var(--bs-secondary-bg);
}
.column-group .group-header .collapse-icon {
  margin-right: 0.5rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  transition: transform 0.15s ease;
}
.column-group .group-header[aria-expanded=true] .collapse-icon {
  transform: rotate(90deg);
}
.column-group .group-header .group-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  flex-grow: 1;
}
.column-group .group-header .group-name mark {
  background-color: #fff3cd;
  padding: 0.1em 0;
  border-radius: 2px;
}
.column-group .group-header .group-count {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}
.column-group .group-items {
  padding: 0;
}

.column-library-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.5rem 0.1rem 0.75rem;
  transition: background-color 0.15s ease;
}
.column-library-item mark {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  padding: 0.1em 0;
  border-radius: 2px;
}
.column-library-item:hover {
  background-color: var(--bs-tertiary-bg);
}
.column-library-item .column-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  margin: 0 0.225rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}
.column-library-item .column-name {
  flex-grow: 1;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}
.column-library-item .add-button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--bs-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  opacity: 0;
}
.column-library-item .add-button:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.column-library-item:hover .add-button {
  opacity: 1;
}

.sheet-settings-card {
  margin: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--bs-secondary-bg);
  border: 2px solid var(--bs-border-color);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
}
.sheet-settings-card:hover {
  border-color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
}
.sheet-settings-card.selected {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}
.sheet-settings-card .card-icon {
  margin-right: 0.75rem;
  color: var(--bs-primary);
  font-size: 1.25rem;
}
.sheet-settings-card .card-content {
  flex-grow: 1;
}
.sheet-settings-card .card-content .card-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  margin: 0;
}
.sheet-settings-card .card-content .card-subtitle {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin: 0;
}
.sheet-settings-card .card-chevron {
  color: var(--bs-secondary-color);
  font-size: 1rem;
}

.selected-columns-list {
  padding: 0 1rem 1rem;
}
.selected-columns-list ul#selectedColumnsList {
  padding: 0;
}
.selected-columns-list .list-header {
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  letter-spacing: 0.5px;
}

.selected-column-item-v3 {
  display: flex;
  align-items: center;
  padding: 0.225rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: var(--bs-light-bg-subtle);
  border: 2px solid var(--bs-border-color);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.selected-column-item-v3:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.selected-column-item-v3.selected {
  border-color: var(--bs-primary);
  background-color: var(--bs-contrast-bg);
}
.selected-column-item-v3 .drag-handle {
  flex-shrink: 0;
  cursor: move;
  color: var(--bs-secondary-color);
  margin-right: 0.75rem;
  font-size: 1rem;
  opacity: 0.5;
}
.selected-column-item-v3 .drag-handle:hover {
  opacity: 1;
}
.selected-column-item-v3 .column-type-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  margin-right: 0.75rem;
  font-size: 0.875rem;
}
.selected-column-item-v3 .column-type-icon.type-data {
  background-color: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}
.selected-column-item-v3 .column-type-icon.type-input {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.selected-column-item-v3 .column-type-icon.type-formula {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.selected-column-item-v3 .column-type-icon.type-index {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.selected-column-item-v3 .column-lock-icon,
.selected-column-item-v3 .column-unlock-icon {
  flex-shrink: 0;
  margin-right: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.selected-column-item-v3 .column-lock-icon:hover,
.selected-column-item-v3 .column-unlock-icon:hover {
  opacity: 0.7;
}
.selected-column-item-v3 .column-type-input {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.selected-column-item-v3 .column-type-formula {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.selected-column-item-v3 .column-type-index {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
.selected-column-item-v3 .column-type-data {
  background-color: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}
.selected-column-item-v3 .column-title {
  flex-grow: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selected-column-item-v3 .remove-button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--bs-danger);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  opacity: 0;
  transition: all 0.15s ease;
}
.selected-column-item-v3 .remove-button:hover {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.selected-column-item-v3:hover .remove-button {
  opacity: 1;
}
.selected-column-item-v3 .duplicate-button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--bs-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  opacity: 0;
  transition: all 0.15s ease;
}
.selected-column-item-v3 .duplicate-button:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.selected-column-item-v3:hover .duplicate-button {
  opacity: 1;
}

.properties-content {
  padding: 1rem;
}
.properties-content .property-section {
  margin-bottom: 1.5rem;
}
.properties-content .property-section:last-child {
  margin-bottom: 0;
}
.properties-content .property-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
}
.properties-content .property-section .section-header .section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
}
.properties-content .property-section .section-header .section-icon {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  transition: transform 0.15s ease;
}
.properties-content .property-section .section-header[aria-expanded=false] .section-icon {
  transform: rotate(-90deg);
}
.properties-content .property-section .section-body .form-group {
  margin-bottom: 1rem;
}
.properties-content .property-section .section-body .form-group:last-child {
  margin-bottom: 0;
}
.properties-content .property-section .section-body label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}
.properties-content .property-section .section-body .form-control,
.properties-content .property-section .section-body .form-select {
  font-size: 0.875rem;
}

.sheet-properties p:last-child,
.column-properties p:last-child {
  margin-bottom: 0;
}

.sheet-properties .btn {
  margin-top: 0.75rem;
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--bs-secondary-color);
}
.loading-spinner .spinner-border {
  margin-right: 0.5rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--bs-secondary-color);
}
.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

@media (max-width: 1400px) {
  .report-designer-panels {
    grid-template-columns: 240px 1fr;
  }
  .panel-right {
    width: 320px;
  }
}
@media (max-width: 1200px) {
  .header-info {
    display: none !important;
  }
}
[dir=rtl] .panel-right .panel-header h6 {
  padding-left: 1.5rem;
  padding-right: 0;
}
[dir=rtl] .column-library-item {
  padding: 0.1rem 0.75rem 0.1rem 0.5rem;
}
[dir=rtl] .panel-header h6 i {
  margin-left: 0.5rem;
  margin-right: 0;
}
[dir=rtl] .panel-header h6 .badge {
  margin-right: auto;
  margin-left: 0;
}
[dir=rtl] .panel-header h6 {
  padding-right: 0;
}
[dir=rtl] .panel-header .close-button {
  left: 0.6rem;
  right: auto;
}
[dir=rtl] .report-designer-header .header-tabs,
[dir=rtl] .report-designer-header .header-info,
[dir=rtl] .report-designer-header .header-actions {
  direction: rtl;
}
[dir=rtl] .panel-left {
  border-right: none;
  border-left: 1px solid var(--bs-border-color);
}
[dir=rtl] .panel-left.collapsed .panel-header h6 i {
  margin: 0;
}
[dir=rtl] .panel-center {
  transition: margin-right 0.3s ease, margin-left 0.3s ease;
  margin-right: 0;
}
[dir=rtl] .panel-center.column-library-collapsed {
  margin-right: -280px;
  margin-left: 0;
}
@media (min-width: 1200px) {
  [dir=rtl] .panel-center.properties-open {
    margin-left: 320px;
  }
  [dir=rtl] .panel-center.properties-open.column-library-collapsed {
    margin-right: -280px;
  }
}
[dir=rtl] .panel-right {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid var(--bs-border-color);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
}
[dir=rtl] .panel-right.open {
  transform: translateX(0);
}
[dir=rtl] .selected-column-item-v3 .drag-handle {
  margin-right: 0;
  margin-left: 0.5rem;
}
[dir=rtl] .selected-column-item-v3 .column-type-icon {
  margin-right: 0;
  margin-left: 0.5rem;
}
[dir=rtl] .selected-column-item-v3 .column-lock-icon,
[dir=rtl] .selected-column-item-v3 .column-unlock-icon {
  margin-right: 0;
  margin-left: 0.5rem;
}

.formula-input {
  direction: ltr;
  text-align: left;
}

.formula-input-drop-zone {
  margin: -2px;
  border: 2px dashed transparent;
}
.formula-input-drop-zone .formula-drop-ghost {
  opacity: 0 !important;
  display: none !important;
}
.formula-input-drop-zone {
  transition: background-color 0.2s ease;
}

.color-preview-drop-zone {
  border: 2px dashed transparent;
}
.color-preview-drop-zone .color-preview-drop-ghost {
  opacity: 0 !important;
  display: none !important;
}
.color-preview-drop-zone {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.column-library-wrapper .search-box .input-group-text {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.properties-content .column-preview .preview-header-cell,
.properties-content .column-preview .preview-data-cell {
  padding: 0.5rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid var(--bs-border-color);
  margin: -1px 0 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.properties-content .column-preview .preview-header-cell {
  font-weight: 600;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
.properties-content .column-preview .preview-data-cell {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
}
.properties-content .input-group-text {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.properties-content .input-group-text i.fa {
  width: 14px;
  text-align: center;
}
.properties-content .color-picker-input {
  width: 50px;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--bs-border-color);
  cursor: pointer;
}
.properties-content .color-picker-input:hover {
  border-color: var(--bs-primary);
}
.properties-content .form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
}
.properties-content .column-type-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  margin-right: 0.75rem;
  font-size: 0.875rem;
}
.properties-content .column-type-icon.type-data {
  background-color: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}
.properties-content .column-type-icon.type-input {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.properties-content .column-type-icon.type-formula {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.properties-content .column-type-icon.type-index {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

[data-bs-theme=dark] .report-designer-v3 {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .report-designer-header {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .panel-right {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .selected-column-item-v3:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .column-library-item mark,
[data-bs-theme=dark] .column-group .group-name mark {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.predicate-row .predicate-row-draft-chip {
  display: none;
}
.predicate-row.predicate-row--draft {
  border-inline-start: 3px solid var(--bs-warning, #ffc107);
}
.predicate-row.predicate-row--draft .predicate-row-draft-chip {
  display: inline-flex;
  align-items: center;
}

.activities-table {
  & td {
    padding: 1px;
  }
}

.activity {
  padding-top: 0.4em;
  padding-bottom: 0.3em;
  padding-right: 5px;
  background: var(--table-color);
  & .metadata {
    font-size: 0.7em;
    & .date,
    & .owner,
    & .recipient {
      display: inline-block;
    }
    & div:not(:first-child) {
      padding-right: 5px;
    }
  }
}

/* Floating Action Button */
.fab-button {
  bottom: 2rem;
  left: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}
.fab-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3) !important;
}
.fab-button:hover .fab-tooltip-text {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  visibility: visible;
}
.fab-button .fab-tooltip-text {
  position: absolute;
  left: calc(100% + 1rem);
  top: 50%;
  transform: translateY(-50%) translateX(0.5rem);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}
.fab-button .fab-tooltip-text::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 0.375rem solid transparent;
  border-right-color: rgba(0, 0, 0, 0.85);
}

.fab-dropdown {
  z-index: 9999;
}
.fab-dropdown .dropdown-menu {
  min-width: 18rem;
  padding: 0.5rem 0;
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.2);
  margin-bottom: 0.75rem;
}
.fab-dropdown .dropdown-item {
  font-weight: 500;
}
.fab-dropdown .dropdown-item i {
  font-size: 1.1rem;
}
.fab-dropdown .show .fab-tooltip-text {
  display: none;
}

/* Attachment Type Cards */
.attachment-type-card {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
}
.attachment-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.attachment-type-card a.card-header {
  cursor: pointer;
}
.attachment-type-card a.card-header:hover .attachment-type-chevron {
  opacity: 1;
}
.attachment-type-card .card-header h6 {
  font-weight: 600;
}
.attachment-type-card .card-body {
  background-color: #ffffff;
}

/* Template and File Items */
.attachment-item-card {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
  background: var(--bs-body-bg);
  overflow: hidden;
}
.attachment-item-card:hover {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
.attachment-item-card .handle {
  cursor: move;
  transition: color 0.2s ease;
}
.attachment-item-card .handle:hover {
  color: var(--bs-primary) !important;
}
.attachment-item-card .card-body {
  background: var(--bs-card-bg);
  border-radius: inherit;
}

/* Section Headers */
h6.fw-semibold {
  font-weight: 600;
  font-size: 1.1rem;
}

/* Action Buttons */
.btn-outline-primary,
.btn-outline-success {
  transition: all 0.2s ease;
  border-width: 2px;
  font-weight: 500;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Badges */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}
.badge.rounded-pill {
  padding-left: 1em;
  padding-right: 1em;
}
.badge i {
  font-size: 0.875em;
}

/* Drag Handle */
.cursor-move {
  cursor: move;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.cursor-move:hover {
  opacity: 1;
}

/* Sortable Item Styles */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(var(--bs-primary-rgb), 0.1);
}

.sortable-chosen {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
  transform: scale(1.02);
}

.sortable-drag {
  opacity: 0.8;
}

/* Original Styles - Updated */
.at-number {
  display: inline-block;
  font-size: 2.5rem;
  line-height: 1em;
  font-weight: 700;
  vertical-align: top;
  color: rgba(var(--bs-primary-rgb), 0.15);
  margin-left: 10px;
  margin-right: -10px;
  width: 1em;
  text-align: end;
}

.at-title-block {
  display: inline-block;
}

.at-version-spaced {
  padding-right: 3rem;
}

.at-version .text-danger {
  font-size: 0.9rem;
  width: 100%;
}
.at-version .at-version-title {
  font-size: 1.1em;
}

/* Reorder List Enhancements */
.reorder-list .item {
  transition: all 0.3s ease;
}

/* Info Icon Styling */
.fa-info-circle {
  font-size: 1.1em;
}

/* Action Icon Styles */
a[data-turbo-method=delete] {
  transition: all 0.2s ease;
}
a[data-turbo-method=delete]:hover {
  transform: scale(1.1);
}

.hover-text-info:hover {
  color: var(--bs-info) !important;
}

.hover-text-success:hover {
  color: var(--bs-success) !important;
}

.hover-text-danger:hover {
  color: var(--bs-danger) !important;
}

/* Badge Enhancements */
.badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
  font-weight: 600;
}
.badge.bg-secondary {
  background-color: #6c757d !important;
  font-weight: 500;
}
.badge.bg-danger {
  background-color: #dc3545 !important;
  font-weight: 600;
}

/* Improved Link Styling */
.fw-medium.text-decoration-none {
  color: var(--bs-body-color);
  transition: color 0.2s ease;
}
.fw-medium.text-decoration-none:hover {
  color: var(--bs-primary);
  text-decoration: underline !important;
}

/* Gap Utilities Enhancement */
.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

/* Flex Utilities */
.flex-grow-1 {
  flex-grow: 1;
}

/* Opacity Utilities */
.opacity-50 {
  opacity: 0.5;
}

/* Collapse Toggle Styling */
.collapse-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem; /* Add padding for better click target */
}
.collapse-toggle:hover .attachment-type-chevron {
  opacity: 1; /* Lighter variant - full opacity on hover */
}
.collapse-toggle {
  /* Only apply legacy transitions to non-chevron icons (for backward compatibility) */
}
.collapse-toggle i:not(.attachment-type-chevron) {
  transition: all 0.2s ease;
}
.collapse-toggle[aria-expanded=true] i:not(.attachment-type-chevron) {
  transform: rotate(0deg);
}
.collapse-toggle[aria-expanded=false] i:not(.attachment-type-chevron) {
  transform: rotate(180deg);
}

/* Attachment Type Chevron - matches sidebar user menu chevron style */
.attachment-type-chevron {
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  font-size: 1.25rem; /* Match sidebar icon size */
  opacity: 0.7; /* Muted by default */
  margin-left: 0.25rem; /* Small margin */
  /* Starts pointing left (in LTR) when closed */
  /* When rotated, points down (90deg clockwise) */
}
.attachment-type-chevron.rotated {
  transform: rotate(90deg); /* Point down when open (from left, rotate clockwise) */
}
.attachment-type-chevron {
  /* RTL support */
}
[dir=rtl] .attachment-type-chevron {
  transform: rotate(180deg); /* Base rotation for RTL - points right when closed */
  margin-left: 0;
  margin-right: 0.25rem; /* RTL margin */
}
[dir=rtl] .attachment-type-chevron.rotated {
  transform: rotate(270deg); /* In RTL: from right (base 180deg), add 90deg = 270deg total = down */
}

/* Parent collapse toggle - uses aria-expanded for chevron rotation (no JS needed) */
.parent-collapse-toggle .attachment-type-chevron {
  /* Inherit base styles, use aria-expanded for rotation */
}
.parent-collapse-toggle {
  /* LTR: closed = point left, expanded = rotate 90deg down */
}
.parent-collapse-toggle[aria-expanded=true] .attachment-type-chevron {
  transform: rotate(90deg);
}
.parent-collapse-toggle {
  /* RTL: closed = point right (base 180deg), expanded = rotate to down (270deg) */
}
[dir=rtl] .parent-collapse-toggle[aria-expanded=true] .attachment-type-chevron {
  transform: rotate(270deg);
}

/* Process Status Link Styling - Remove borders and match main attachment partial */
.process-status a.process-status {
  border: none !important;
  text-decoration: none;
  outline: none;
}
.process-status a.process-status:hover, .process-status a.process-status:focus, .process-status a.process-status:active {
  border: none !important;
  outline: none;
  text-decoration: none;
}

/* Modern Validation Animations */
.validation-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
}
.validation-loader .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

.validation-success-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

.success-checkmark i.fas.fa-check-circle {
  font-size: 4rem;
  color: #28a745;
  animation: checkmark-pop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: inline-block;
}

@keyframes checkmark-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.modal-dialog {
  /* Target modal header with bg-primary specifically for higher specificity */
}
.modal-dialog .modal-header .title-details {
  font-size: 0.8em;
  margin-bottom: 0;
  margin-right: 2em;
}

/* Stacked-modal support: z-index for both modal and its backdrop is set
   inline by modal_auto_open_controller (Bootstrap 5 doesn't auto-stack).
   The legacy ".modal-darkened" / ".modal-backdrop-darken" hooks below
   stay defined so any stale references still parse; they're no longer
   applied. */
.modal-backdrop-darken {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1055;
  pointer-events: none;
}

/* Footer - base styles */
/* Note: Margin and width adjustments for sidebar are in sidebar.scss */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.8rem;
  z-index: 101; /* Below sidebar (102) but above content */
  /* Horizontal padding matches top bar (px-3 = 1rem) for text alignment.
   * Mobile gets extra inset via the media query below — see comment there
   * for why env(safe-area-inset-left/right) doesn't solve this on its own. */
  padding-left: 1rem;
  padding-right: 1rem;
  /* DO NOT add `padding-bottom: env(safe-area-inset-bottom)` here.
   * With viewport-fit=cover (set in the page's viewport meta tag) the
   * inset is ~34px on iPhones with a home indicator — far larger than
   * the 1.3rem height. With the project-wide `box-sizing: border-box`
   * the padding eats into the content area, collapsing it to ~0 and
   * forcing the line-height: 1.3rem text to overflow upward, half-
   * protruding above the bar. Letting the home indicator render in
   * front of the muted footer text is a deliberate trade — this bar
   * is decorative ancillary content (version + copyright), not a
   * tap target, so visual overlap with the OS chrome is acceptable
   * and far less disruptive than the protruding-text bug. */
  transition: margin-left var(--sidebar-transition, 300ms ease-in-out), margin-right var(--sidebar-transition, 300ms ease-in-out), width var(--sidebar-transition, 300ms ease-in-out);
  /* Flex layout for copyright and version */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Version info - tiny faded text in footer corner */
.version-info {
  font-size: 0.65rem;
  opacity: 0.4;
  color: var(--bs-secondary-color);
}

/* Mobile-only horizontal padding bump so iPhone screen-corner curvature
 * doesn't clip the first chars of the copyright / version. A previous
 * attempt used `env(safe-area-inset-left/right)`, which is the
 * "platform-correct" answer — and is a no-op in portrait orientation,
 * the everyday phone use case. Apple only exposes left/right insets in
 * LANDSCAPE (where the notch sits sideways); in portrait, env() returns
 * 0 on both axes even though the rounded screen corners are still there
 * clipping content at the very bottom edge. So we use a flat media-query
 * bump on narrow viewports — it actually fires in portrait, which is
 * what the user reported clipping in. Desktop padding stays at 1rem. */
@media (max-width: 576px) {
  .footer {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
/* Report Status Overlay - Positioned above footer with sidebar awareness */
#reportStatuses {
  padding: 0.75rem 1rem;
  background: var(--bs-dark-secondary);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-height, 1.3rem);
  opacity: 0;
  z-index: 102; /* Above footer (101) but below modals */
  min-height: auto;
  max-height: none;
  /* Sidebar awareness - match footer pattern */
  margin-left: var(--sidebar-width-expanded);
  width: calc(100% - var(--sidebar-width-expanded));
  transition: margin-left var(--sidebar-transition, 300ms ease-in-out), margin-right var(--sidebar-transition, 300ms ease-in-out), width var(--sidebar-transition, 300ms ease-in-out), opacity 0.3s ease-in-out;
  /* RTL support */
  [dir=rtl] & {
    margin-right: var(--sidebar-width-expanded);
    margin-left: 0;
    width: calc(100% - var(--sidebar-width-expanded));
  }
  /* Collapsed sidebar */
  &.sidebar-collapsed {
    margin-left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
    [dir=rtl] & {
      margin-right: var(--sidebar-width-collapsed);
      margin-left: 0;
      width: calc(100% - var(--sidebar-width-collapsed));
    }
  }
}

/* When sidebar is not present, remove margins */
body:not(.has-sidebar) #reportStatuses {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.report-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.report-status-loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: report-status-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.report-status-message {
  flex: 1;
  line-height: 1.4;
}

.report-status-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.report-status-close:hover {
  opacity: 1;
}

@keyframes report-status-spin {
  to {
    transform: rotate(360deg);
  }
}
#reportStatuses .report-status:not(:last-child) {
  margin-bottom: 0;
}

#reportStatuses.show {
  opacity: 1;
}

/* Secondary sidebar awareness */
.has-secondary-sidebar {
  #reportStatuses {
    margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
    width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
    &.sidebar-collapsed {
      margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
      width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
    }
  }
}

/* RTL secondary sidebar awareness */
[dir=rtl].has-secondary-sidebar {
  #reportStatuses {
    margin-left: 0;
    margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
    width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
    &.sidebar-collapsed {
      margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
      margin-left: 0;
      width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
    }
  }
}

/*
 * Wide secondary sidebar (AI chat history panel — 300px vs 220px).
 * The body gets `has-wide-secondary-sidebar` instead of (well, in
 * addition to) `has-secondary-sidebar` in application.slim — the
 * status overlay needs the wider reservation to keep clear of the
 * chat thread list. Without these rules the overlay would extend
 * 80px under the chat sidebar.
 */
.has-wide-secondary-sidebar {
  #reportStatuses {
    margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
    width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width-wide));
    &.sidebar-collapsed {
      margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
      width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width-wide));
    }
  }
}

[dir=rtl].has-wide-secondary-sidebar {
  #reportStatuses {
    margin-left: 0;
    margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
    width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width-wide));
    &.sidebar-collapsed {
      margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
      margin-left: 0;
      width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width-wide));
    }
  }
}

/* Mobile responsive - full width */
@media (max-width: 767.98px) {
  #reportStatuses,
  [dir=rtl] #reportStatuses {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    &.sidebar-collapsed {
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
    }
  }
  .has-secondary-sidebar #reportStatuses,
  [dir=rtl].has-secondary-sidebar #reportStatuses,
  .has-wide-secondary-sidebar #reportStatuses,
  [dir=rtl].has-wide-secondary-sidebar #reportStatuses {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}
.undecorated:hover,
.undecorated:focus {
  text-decoration: none;
}

/* Breadcrumb link styling */
.breadcrumb-link {
  text-decoration: none !important;
}

.breadcrumb-link:hover {
  text-decoration: underline !important;
}

/* ========================================
   NAVBAR / TOPBAR STYLES
   ======================================== */
/* Fine noise texture overlay for the top bar.
   Inline SVG (feTurbulence) keeps it asset-free and crisp at any DPI.
   The feColorMatrix converts the noise to opaque grayscale (R channel copied
   to G/B, alpha forced to 1). Combined with `background-blend-mode: soft-light`,
   mid-gray pixels are neutral, so the average brightness of the bar is
   preserved — dark pixels darken slightly, light pixels lighten slightly,
   producing a true noise texture rather than a brightening haze. */
.app-topbar {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0.5 0 0 0 0.5  0.5 0 0 0 0.5  0.5 0 0 0 0.5  0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* Main top bar header (page title + year selector)
   Uses custom CSS property --bs-topbar-bg that automatically adjusts for dark mode:
   - Light mode: Bootstrap's dark color
   - Dark mode: Darker variant for better visual hierarchy

   Note: Must override Bootstrap's .bg-dark-secondary class which also uses !important */
.app-topbar.bg-dark-secondary {
  background-color: var(--bs-topbar-bg) !important;
}

/* Staging environment indicator - purple background */
.app-topbar.bg-staging {
  background-color: #a336f1 !important; /* Purple - clearly different from production */
}

/* Development environment indicator - wine/burgundy background */
.app-topbar.bg-development {
  background-color: #222222 !important; /* Wine red - clearly different from staging and production */
}

/* Impersonation indicator for mobile */
.app-topbar.impersonating {
  /* Red indicator bar at top (mobile only) */
}
.app-topbar.impersonating .topbar-impersonation-indicator {
  height: 3px;
  background-color: #dc3545;
  z-index: 1;
}
.app-topbar.impersonating {
  /* Badge positioned at upper corner of hamburger icon */
  /* Left in LTR, right in RTL */
}
.app-topbar.impersonating .btn-link.position-relative .badge {
  top: -0.25rem;
  left: -0.75rem;
  right: auto;
  transform: none;
}
[dir=rtl] .app-topbar.impersonating .btn-link.position-relative .badge {
  right: -0.75rem;
  left: auto;
}

/* Year selector dropdown - auto-fit to content width */
.year-selector {
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 200px;
  min-width: -moz-min-content;
  min-width: min-content; /* Ensures it never gets too small */
}

/* Topbar title area: take available space, allow children to shrink */
.app-topbar > .topbar-title-area {
  flex: 1 1 auto;
  min-width: 0;
}

/* Title text — single line, ellipsize when it overflows */
.app-topbar-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Show only the last breadcrumb segment on phones, the full breadcrumb on desktop */
.page-title-short {
  display: none;
}

@media (max-width: 767.98px) {
  .page-title-full {
    display: none;
  }
  .page-title-short {
    display: inline-block;
  }
}
/* Sidebar Navigation - Bootstrap 5 + CSS Custom Properties */
/* CSS Custom Properties for theming */
:root {
  --sidebar-width-expanded: 250px;
  --sidebar-width-collapsed: 70px;
  --sidebar-bg: var(--bs-sidebar-bg, #212529);
  --sidebar-bg-dark: #212529; /* Always dark, for floating menus that must match sidebar */
  --sidebar-submenu-bg: #1A1E21; /* Darker than sidebar for visual distinction */
  --sidebar-text: #f2f4f5;
  --sidebar-text-secondary: #e5e8ea;
  --sidebar-transition: 300ms ease-in-out;
  --topbar-height: 60px;
  --footer-height: 1.3rem;
  --report-status-overlay-height: 0px; /* Dynamically updated via JavaScript */
  --sidebar-link-hover: rgba(255, 255, 255, 0.1);
  --sidebar-link-active: #00c14a;
}

/* Dark mode adjustments */
[data-bs-theme=dark] {
  --sidebar-bg: var(--bs-sidebar-bg, #212529);
  --sidebar-bg-dark: #212529; /* Always dark, for floating menus that must match sidebar */
  --sidebar-submenu-bg: #1A1E21; /* Darker than sidebar for visual distinction */
  --sidebar-text: #e9ecef;
  --sidebar-text-secondary: #adb5bd;
  --sidebar-link-hover: rgba(255, 255, 255, 0.15);
}

/* Top Bar Header */
.app-topbar {
  height: var(--topbar-height);
  z-index: 1020; /* Below sidebar */
  margin-left: var(--sidebar-width-expanded);
  width: calc(100% - var(--sidebar-width-expanded));
  transition: margin-left var(--sidebar-transition), margin-right var(--sidebar-transition), width var(--sidebar-transition);
  /* RTL support - sidebar on right, so margin on right */
}
[dir=rtl] .app-topbar {
  margin-right: var(--sidebar-width-expanded);
  margin-left: 0;
}
.app-topbar.sidebar-collapsed {
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
}
[dir=rtl] .app-topbar.sidebar-collapsed {
  margin-right: var(--sidebar-width-collapsed);
  margin-left: 0;
}

/* When sidebar is not present, remove margins */
body:not(.has-sidebar) .app-topbar {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Main Sidebar Container */
.app-sidebar {
  position: fixed; /* Explicit (don't rely on Bootstrap utility class alone) */
  width: var(--sidebar-width-expanded);
  top: 0; /* Starts from top, logo is inside */
  left: 0; /* LTR: positioned on left edge */
  height: 100vh;
  /* Small bottom padding for both desktop and mobile, with safe area inset for mobile browser UI bars */
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0.5rem);
  z-index: 1030; /* Above top bar */
  background-color: var(--sidebar-bg);
  /* Same fine noise overlay as the top bar — grayscale noise blended with
     soft-light so it modulates rather than brightens. See navbar.scss for
     the rationale. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0.5 0 0 0 0.5  0.5 0 0 0 0.5  0.5 0 0 0 0.5  0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  transition: width var(--sidebar-transition);
  overflow-x: hidden; /* Keep sidebar clean */
  /* RTL positioning */
}
.app-sidebar[dir=rtl], [dir=rtl] .app-sidebar {
  right: 0;
  left: auto;
}
.app-sidebar {
  /* Collapsed state */
}
.app-sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}
.app-sidebar.collapsed .sidebar-nav-text,
.app-sidebar.collapsed .sidebar-submenu-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.app-sidebar.collapsed .sidebar-submenu {
  display: none;
}
.app-sidebar.collapsed .sidebar-chevron {
  opacity: 0;
}

/* Sidebar Logo Section */
.sidebar-logo {
  min-height: var(--topbar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Reduced padding when collapsed - no bottom padding */
}
.app-sidebar.collapsed .sidebar-logo {
  padding: 0.5rem !important; /* Override Bootstrap p-3, no bottom padding */
}

/* Logo images - show/hide based on collapsed state */
.sidebar-logo-image-expanded {
  max-width: calc(var(--sidebar-width-expanded) - 3rem); /* Account for padding */
  max-height: calc(var(--topbar-height) * 1.5);
  height: auto;
  display: block;
  transition: opacity var(--sidebar-transition);
}
.app-sidebar.collapsed .sidebar-logo-image-expanded {
  display: none;
}

.sidebar-logo-image-collapsed {
  max-width: calc(var(--sidebar-width-collapsed) - 1rem); /* Account for smaller padding (0.5rem x 2) */
  height: auto;
  display: none;
  margin: 0; /* No margin */
  transition: opacity var(--sidebar-transition);
}
.app-sidebar.collapsed .sidebar-logo-image-collapsed {
  display: block;
}

/* Sidebar Navigation Items */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
  position: relative;
  min-width: 0; /* Prevent flex items from overflowing */
  max-width: 100%; /* Ensure items don't exceed container width */
}
.sidebar-nav-item:hover {
  background-color: var(--sidebar-link-hover);
  color: #fff;
  text-decoration: none;
}
.sidebar-nav-item.active {
  background-color: var(--sidebar-link-hover);
  color: var(--sidebar-link-active);
}
.sidebar-nav-item.active i {
  color: var(--sidebar-link-active);
}
.sidebar-nav-item i {
  width: 40px;
  text-align: center;
  font-size: 1.25rem;
  color: var(--sidebar-text-secondary);
  flex-shrink: 0;
}

/* Navigation item text */
.sidebar-nav-text {
  flex-grow: 1;
  white-space: nowrap;
  transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
  overflow: hidden;
}

/* Chevron icon for submenu items */
.sidebar-chevron {
  transition: transform 0.2s ease-in-out, opacity var(--sidebar-transition);
  font-size: 0.875rem;
}
.sidebar-chevron.rotated {
  transform: rotate(90deg);
}
.sidebar-chevron {
  /* RTL support */
}
[dir=rtl] .sidebar-chevron {
  transform: rotate(180deg);
}
[dir=rtl] .sidebar-chevron.rotated {
  transform: rotate(270deg);
}

/* User menu chevron - points right when closed, up when open */
.sidebar-user-section .sidebar-chevron {
  /* Starts same as other menus (points right in RTL) */
}
.sidebar-user-section .sidebar-chevron.rotated {
  transform: rotate(-90deg); /* Point up when open (from right, rotate counter-clockwise) */
}
[dir=rtl] .sidebar-user-section .sidebar-chevron.rotated {
  transform: rotate(90deg); /* In RTL: from right (base 180deg), add 90deg = 270deg total = up */
}

/* Submenu Container */
.sidebar-submenu {
  background-color: var(--sidebar-submenu-bg);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}
.sidebar-submenu.show {
  max-height: 500px; /* Large enough for content */
}

/* Submenu Header - only visible in floating menu */
.sidebar-submenu-header {
  display: none; /* Hidden in inline submenu */
  padding: 0.75rem 1rem 0.5rem 3rem;
  color: var(--sidebar-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none; /* Non-clickable */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* RTL support */
}
[dir=rtl] .sidebar-submenu-header {
  padding-right: 3rem;
  padding-left: 1rem;
}

.sidebar-submenu-header-text {
  opacity: 0.7;
}

/* Submenu Separator - only visible in floating menu */
.sidebar-submenu-separator {
  display: none; /* Hidden in inline submenu */
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 1rem 0.5rem 3rem;
  /* RTL support */
}
[dir=rtl] .sidebar-submenu-separator {
  margin-right: 3rem;
  margin-left: 1rem;
}

/* Submenu Items */
.sidebar-submenu-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 3rem;
  color: var(--sidebar-text-secondary);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
  font-size: 0.9rem;
}
.sidebar-submenu-item:hover {
  background-color: var(--sidebar-link-hover);
  color: #fff;
  text-decoration: none;
}
.sidebar-submenu-item.active {
  color: var(--sidebar-link-active);
  font-weight: 500;
}
.sidebar-submenu-item {
  /* Icon spacing */
}
.sidebar-submenu-item i {
  margin-right: 0.5rem;
}
.sidebar-submenu-item {
  /* RTL support */
}
[dir=rtl] .sidebar-submenu-item {
  padding-right: 3rem;
  padding-left: 1rem;
}
[dir=rtl] .sidebar-submenu-item i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.sidebar-submenu-text {
  transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
  overflow: hidden;
  white-space: nowrap;
}

/* Form wrapper for button_to submenu items (e.g., logout) */
.sidebar-submenu-form {
  margin: 0;
  padding: 0;
  /* Style the button to look exactly like sidebar-submenu-item link */
}
.sidebar-submenu-form .sidebar-submenu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 3rem;
  margin: 0;
  background: none;
  border: none;
  color: var(--sidebar-text-secondary);
  text-decoration: none;
  text-align: start;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.sidebar-submenu-form .sidebar-submenu-item:hover {
  background-color: var(--sidebar-link-hover);
  color: #fff;
}
.sidebar-submenu-form .sidebar-submenu-item i {
  margin-right: 0.5rem;
}
[dir=rtl] .sidebar-submenu-form .sidebar-submenu-item {
  padding-right: 3rem;
  padding-left: 1rem;
}
[dir=rtl] .sidebar-submenu-form .sidebar-submenu-item i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Floating Submenu (shown when sidebar is collapsed) */
/* Follows Bootstrap 5 dropdown pattern: solid container, transparent items */
.sidebar-floating-submenu {
  display: block !important; /* Override any display:none from collapsed state */
  max-height: none !important; /* Override max-height from sidebar-submenu - may be set by JS */
  overflow: visible !important; /* Override overflow from sidebar-submenu - may be set to auto by JS */
  position: fixed !important; /* Override any absolute positioning */
  bottom: auto !important; /* Reset bottom positioning */
  width: auto !important; /* Not 100% like inline submenu */
  z-index: 9999; /* Very high to ensure visibility */
  /* Solid dark background - always dark to match sidebar regardless of theme */
  background-color: var(--sidebar-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  max-width: 250px;
  padding: 0.5rem 0;
  animation: slideInFromSidebar 0.2s ease;
  /* Scrollbar styling when menu is tall */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.sidebar-floating-submenu::-webkit-scrollbar {
  width: 6px;
}
.sidebar-floating-submenu::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-floating-submenu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
.sidebar-floating-submenu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.sidebar-floating-submenu {
  /* Items: transparent background, like Bootstrap dropdown-item */
}
.sidebar-floating-submenu .sidebar-submenu-item {
  display: block;
  padding: 0.625rem 1rem;
  background-color: transparent; /* No background - let container's dark bg show through */
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
  white-space: nowrap;
}
.sidebar-floating-submenu .sidebar-submenu-item:hover {
  background-color: var(--sidebar-link-hover); /* Subtle overlay on hover */
  color: #fff;
}
.sidebar-floating-submenu .sidebar-submenu-item.active {
  color: var(--sidebar-link-active);
  font-weight: 500;
}
.sidebar-floating-submenu .sidebar-submenu-text {
  opacity: 1;
  width: auto;
}
.sidebar-floating-submenu {
  /* Form wrapper for button_to in floating submenu */
}
.sidebar-floating-submenu .sidebar-submenu-form {
  margin: 0;
  padding: 0;
}
.sidebar-floating-submenu .sidebar-submenu-form .sidebar-submenu-item {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  margin: 0;
  background: none;
  border: none;
  color: var(--sidebar-text);
  text-decoration: none;
  text-align: start;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  white-space: nowrap;
}
.sidebar-floating-submenu .sidebar-submenu-form .sidebar-submenu-item:hover {
  background-color: var(--sidebar-link-hover);
  color: #fff;
}
.sidebar-floating-submenu {
  /* Header in floating menu - show and override inline padding */
}
.sidebar-floating-submenu .sidebar-submenu-header {
  display: block; /* Show in floating menu */
  padding: 0.75rem 1rem 0.5rem 1rem;
}
[dir=rtl] .sidebar-floating-submenu .sidebar-submenu-header {
  padding: 0.75rem 1rem 0.5rem 1rem;
}
.sidebar-floating-submenu {
  /* Separator in floating menu - show and override inline margins */
}
.sidebar-floating-submenu .sidebar-submenu-separator {
  display: block; /* Show in floating menu */
  margin: 0.5rem 1rem;
}
[dir=rtl] .sidebar-floating-submenu .sidebar-submenu-separator {
  margin: 0.5rem 1rem;
}

/* Slide in animation */
@keyframes slideInFromSidebar {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* RTL version */
[dir=rtl] .sidebar-floating-submenu {
  animation: slideInFromSidebarRTL 0.2s ease;
}

@keyframes slideInFromSidebarRTL {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Toggle Button */
.sidebar-toggle-btn {
  position: fixed; /* Fixed positioning relative to viewport */
  top: 0;
  left: calc(var(--sidebar-width-expanded) - 20px); /* LTR: Inside sidebar when expanded */
  z-index: 1050; /* Above logo and all other sidebar content */
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: transparent !important; /* Always transparent, ignore hover */
  border: none !important; /* No border ever */
  color: #f8f9fa !important; /* Light color - always, doesn't change with theme */
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transition: transform 0.1s ease, right var(--sidebar-transition), left var(--sidebar-transition);
  border-radius: 0 3px 3px 0; /* LTR: No rounding on left (flush with sidebar), rounded on right */
}
.sidebar-toggle-btn i {
  font-size: 0.75rem;
  margin-top: 5px;
  margin-right: 4px;
  transition: inherit;
}
.sidebar-toggle-btn:hover {
  background-color: transparent !important; /* Keep transparent */
  color: #fff !important; /* Brighter on hover - always white */
  border: none !important;
}
.sidebar-toggle-btn:active {
  transform: scale(0.9);
}
.sidebar-toggle-btn:focus, .sidebar-toggle-btn:focus-visible {
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.sidebar-toggle-btn {
  /* RTL support - button on right edge of sidebar (sidebar is on RIGHT in RTL) */
}
[dir=rtl] .sidebar-toggle-btn {
  right: calc(var(--sidebar-width-expanded) - 20px); /* Inside sidebar when expanded */
  left: auto;
  justify-content: flex-start;
  border-radius: 3px 0 0 3px; /* RTL: Rounded on left, no rounding on right (flush with sidebar) */
}
[dir=rtl] .sidebar-toggle-btn i {
  margin-right: 0;
  margin-left: 4px;
}
.sidebar-toggle-btn {
  /* When sidebar is collapsed, move to outer edge but keep same color */
}
.sidebar-toggle-btn.collapsed {
  left: var(--sidebar-width-collapsed); /* LTR: Outside, flush at outer edge of collapsed sidebar */
  /* Color stays the same: #f8f9fa from base rule */
}

/* RTL collapsed state - separate for clarity and specificity */
[dir=rtl] .sidebar-toggle-btn.collapsed {
  right: var(--sidebar-width-collapsed); /* RTL: Outside, flush at outer edge of collapsed sidebar */
  left: auto;
  /* Color stays the same: #f8f9fa from base rule */
}
[dir=rtl] .sidebar-toggle-btn.collapsed i {
  margin-right: 0;
  margin-left: 4px;
}

/* Main Content Area Adjustment */
.main-content-wrapper {
  margin-left: var(--sidebar-width-expanded);
  transition: margin-left var(--sidebar-transition), margin-right var(--sidebar-transition);
  padding-top: var(--topbar-height);
  padding-bottom: var(--footer-height);
  min-height: calc(100vh - var(--topbar-height) - var(--footer-height));
  /* RTL support - sidebar on right, so margin on right */
}
[dir=rtl] .main-content-wrapper {
  margin-right: var(--sidebar-width-expanded);
  margin-left: 0;
}
.main-content-wrapper.sidebar-collapsed {
  margin-left: var(--sidebar-width-collapsed);
}
[dir=rtl] .main-content-wrapper.sidebar-collapsed {
  margin-right: var(--sidebar-width-collapsed);
  margin-left: 0;
}

/* When sidebar is not present, remove margins */
body:not(.has-sidebar) .main-content-wrapper {
  margin-left: 0;
  margin-right: 0;
}

/* Footer Adjustment */
.footer {
  margin-left: var(--sidebar-width-expanded);
  transition: margin-left var(--sidebar-transition), margin-right var(--sidebar-transition), width var(--sidebar-transition);
  width: calc(100% - var(--sidebar-width-expanded));
  /* RTL support - sidebar on right, so margin on right */
}
[dir=rtl] .footer {
  margin-right: var(--sidebar-width-expanded);
  margin-left: 0;
  width: calc(100% - var(--sidebar-width-expanded));
}
.footer.sidebar-collapsed {
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
}
[dir=rtl] .footer.sidebar-collapsed {
  margin-right: var(--sidebar-width-collapsed);
  margin-left: 0;
  width: calc(100% - var(--sidebar-width-collapsed));
}

/* When sidebar is not present, remove margins */
body:not(.has-sidebar) .footer {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
  .app-sidebar {
    width: var(--sidebar-width-expanded);
    transform: translateX(-100%); /* LTR: slide off-screen to the left */
    transition: transform var(--sidebar-transition);
    /* On mobile, use max-height instead of fixed height for better adaptation to browser UI changes */
    max-height: 100vh;
    max-height: 100dvh; /* Use dynamic viewport height if supported (Safari 15.4+) */
    height: auto;
    /* padding-bottom is inherited from desktop (same small margin for both) */
  }
  [dir=rtl] .app-sidebar {
    transform: translateX(100%); /* RTL: slide off-screen to the right */
  }
  .app-sidebar.mobile-open {
    transform: translateX(0); /* Both: slide to natural position (visible) */
  }
  .app-sidebar.collapsed {
    width: var(--sidebar-width-expanded); /* Full width on mobile even when "collapsed" */
  }
  .app-sidebar.collapsed .sidebar-nav-text,
  .app-sidebar.collapsed .sidebar-submenu-text {
    opacity: 1;
    width: auto;
  }
  .app-sidebar.collapsed .sidebar-submenu.show {
    display: block;
  }
  /* Mobile backdrop */
  .sidebar-backdrop {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1019;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }
  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: all;
  }
  /* Lock background scroll while the mobile sidebar is open. Without this,
     scrolling behind the menu drifts the underlying page — and in some
     engines (Firefox responsive mode, certain mobile WebViews) the fixed
     sidebar/backdrop appear to drift along with it. Both html and body
     are pinned because the actual scroll container varies across pages. */
  body.mobile-sidebar-open,
  html:has(body.mobile-sidebar-open) {
    overflow: hidden;
    touch-action: none; /* Stop iOS rubber-band scroll behind the menu */
  }
  /* Don't adjust top bar on mobile */
  .app-topbar,
  [dir=rtl] .app-topbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .app-topbar.sidebar-collapsed,
  [dir=rtl] .app-topbar.sidebar-collapsed {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* Don't adjust main content on mobile */
  .main-content-wrapper,
  [dir=rtl] .main-content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .main-content-wrapper.sidebar-collapsed,
  [dir=rtl] .main-content-wrapper.sidebar-collapsed {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Don't adjust footer on mobile */
  .footer,
  [dir=rtl] .footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .footer.sidebar-collapsed,
  [dir=rtl] .footer.sidebar-collapsed {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}
/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --sidebar-width-expanded: 200px;
  }
}
/* User section at bottom */
.sidebar-user-section {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; /* For absolute positioning of submenu */
  /* Distinct background when impersonating */
}
.sidebar-user-section.impersonating {
  background-color: rgba(220, 53, 69, 0.3) !important; /* Bootstrap danger color with transparency */
  border-top: 2px solid rgba(220, 53, 69, 0.6);
  border-bottom: 2px solid rgba(220, 53, 69, 0.6);
  /* All text colors fixed for dark backdrop (not dark mode responsive) */
}
.sidebar-user-section.impersonating .sidebar-nav-item {
  color: #f2f4f5 !important; /* Fixed light color for dark backdrop */
}
.sidebar-user-section.impersonating .sidebar-nav-text {
  color: #f2f4f5 !important; /* Fixed light color for dark backdrop */
}
.sidebar-user-section.impersonating {
  /* Impersonated user name styling - fixed color for dark backdrop */
}
.sidebar-user-section.impersonating .sidebar-impersonated-name {
  color: #e5e8ea !important; /* Fixed secondary light color, not dark mode responsive */
  opacity: 0.85;
}
.sidebar-user-section.impersonating {
  /* Switch back link text - fixed white for dark backdrop */
}
.sidebar-user-section.impersonating .sidebar-switch-back-link .sidebar-nav-item {
  color: #ffffff !important; /* Fixed white, not dark mode responsive */
}
.sidebar-user-section {
  /* Switch back to admin link - separator border */
}
.sidebar-user-section .sidebar-switch-back-link {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-user-section {
  /* User submenu opens upward */
}
.sidebar-user-section .sidebar-submenu {
  position: absolute;
  bottom: 100%; /* Position above the trigger */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1; /* Above other nav items when opened upward */
}

/* Badge/Counter support in sidebar */
.sidebar-nav-item .fa-icon-with-badge {
  position: relative;
  display: inline-block;
}

.sidebar-nav-item .fa-badge-counter {
  position: absolute;
  top: -0.5em;
  left: 0.2em;
  background-color: #dc3545;
  color: white;
  font-size: 0.6em;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.1em 0.35em;
  border-radius: 8px;
  min-width: 1.3em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--sidebar-bg);
  z-index: 1;
}
[dir=rtl] .sidebar-nav-item .fa-badge-counter {
  left: auto;
  right: 0.2em;
}

.sidebar-nav-item .fa-badge-dot {
  position: absolute;
  top: -0.4em;
  left: 0.25em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #dc3545;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--sidebar-bg);
  z-index: 1;
}
[dir=rtl] .sidebar-nav-item .fa-badge-dot {
  left: auto;
  right: 0.25em;
}

/* Smooth scrolling for nav area */
.sidebar-nav-scroll {
  overflow-x: hidden !important; /* Prevent horizontal scrolling - override Bootstrap's overflow-auto */
  overflow-y: auto !important; /* Allow vertical scrolling only */
  min-width: 0; /* Prevent flex items from overflowing */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Secondary Sidebar Navigation - Bootstrap 5 + CSS Custom Properties */
/* CSS Custom Properties for theming */
:root {
  --secondary-sidebar-width: 220px;
  /* Wide variant for content-heavy slots (AI chat history). The default
     220px works for short nav labels but suffocates chat titles. */
  --secondary-sidebar-width-wide: 300px;
  --secondary-sidebar-text: var(--bs-body-color);
  --secondary-sidebar-transition: 300ms ease-in-out;
}

/* Dark mode adjustments */
[data-bs-theme=dark] {
  --secondary-sidebar-text: var(--bs-body-color);
}

/* Secondary Sidebar Container */
.app-secondary-sidebar {
  width: var(--secondary-sidebar-width);
  top: var(--topbar-height); /* Start below topbar */
  left: var(--sidebar-width-expanded); /* LTR: positioned after main sidebar */
  height: calc(100vh - var(--topbar-height));
  z-index: 1015; /* Below topbar (1020) and main sidebar (1030), above footer (101) */
  background-color: var(--bs-secondary-sidebar-bg);
  transition: left var(--secondary-sidebar-transition), right var(--secondary-sidebar-transition);
  overflow-x: hidden;
  border-left: 1px solid var(--bs-border-color);
  /* RTL positioning - after main sidebar which is on right */
}
.app-secondary-sidebar[dir=rtl], [dir=rtl] .app-secondary-sidebar {
  right: var(--sidebar-width-expanded);
  left: auto;
  border-left: none;
  border-right: 1px solid var(--bs-border-color);
}
.app-secondary-sidebar {
  /* When main sidebar is collapsed */
}
.app-secondary-sidebar.main-sidebar-collapsed {
  left: var(--sidebar-width-collapsed);
}
[dir=rtl] .app-secondary-sidebar.main-sidebar-collapsed {
  right: var(--sidebar-width-collapsed);
  left: auto;
}

/* Secondary Sidebar Navigation Items */
.secondary-sidebar-nav-item {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--secondary-sidebar-text);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.95rem;
}
.secondary-sidebar-nav-item:first-child {
  border-top: 1px solid var(--bs-border-color);
}
.secondary-sidebar-nav-item:hover {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-bg) 90%, var(--bs-primary));
  color: var(--bs-primary);
  text-decoration: none;
}
.secondary-sidebar-nav-item.active {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-bg) 85%, var(--bs-primary));
  color: var(--bs-primary);
  font-weight: 500;
  border-left: 3px solid var(--bs-primary);
  padding-left: calc(1.25rem - 3px); /* Adjust padding to account for border */
  /* RTL support */
}
[dir=rtl] .secondary-sidebar-nav-item.active {
  border-left: none;
  border-right: 3px solid var(--bs-primary);
  padding-left: 1.25rem;
  padding-right: calc(1.25rem - 3px);
}
.secondary-sidebar-nav-item {
  /* Icon spacing if nav items include icons */
}
.secondary-sidebar-nav-item i {
  margin-right: 0.5rem;
}
[dir=rtl] .secondary-sidebar-nav-item i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Smooth scrolling for nav area */
.secondary-sidebar-nav-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
}
.secondary-sidebar-nav-scroll::-webkit-scrollbar {
  width: 6px;
}
.secondary-sidebar-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.secondary-sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 3px;
}
.secondary-sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--bs-border-color) 80%, black);
}

/* Main Content Area Adjustment when secondary sidebar is present */
/* This is applied via body class or conditional logic in layout */
/* LTR (sidebars on left) */
.has-secondary-sidebar .main-content-wrapper {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
}
.has-secondary-sidebar .main-content-wrapper.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
}
.has-secondary-sidebar .footer {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
}
.has-secondary-sidebar .footer.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
}
.has-secondary-sidebar {
  /* Note: .app-topbar should NOT account for secondary sidebar - it only adjusts for main sidebar
     The topbar is above the secondary sidebar in z-order */
}

/* RTL (sidebars on right) */
[dir=rtl].has-secondary-sidebar .main-content-wrapper {
  margin-left: 0;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
}
[dir=rtl].has-secondary-sidebar .main-content-wrapper.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
}
[dir=rtl].has-secondary-sidebar .footer {
  margin-left: 0;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
}
[dir=rtl].has-secondary-sidebar .footer.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
}
[dir=rtl].has-secondary-sidebar {
  /* Note: .app-topbar should NOT account for secondary sidebar - it only adjusts for main sidebar
     The topbar is above the secondary sidebar in z-order */
}

/* Wide variant — applied when @secondary_sidebar_partial is set (AI chat).
   Overrides every margin computation that the default .has-secondary-sidebar
   block does, swapping the wide width in. Mirrors the LTR/RTL +
   collapsed-main-sidebar matrix above. */
.has-wide-secondary-sidebar .app-secondary-sidebar {
  width: var(--secondary-sidebar-width-wide);
}
.has-wide-secondary-sidebar .main-content-wrapper {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
}
.has-wide-secondary-sidebar .main-content-wrapper.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
}
.has-wide-secondary-sidebar .footer {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width-wide));
}
.has-wide-secondary-sidebar .footer.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width-wide));
}

[dir=rtl].has-wide-secondary-sidebar .main-content-wrapper {
  margin-left: 0;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
}
[dir=rtl].has-wide-secondary-sidebar .main-content-wrapper.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
}
[dir=rtl].has-wide-secondary-sidebar .footer {
  margin-left: 0;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width-wide));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width-wide));
}
[dir=rtl].has-wide-secondary-sidebar .footer.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width-wide));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width-wide));
}

/* Mobile Responsive - hide desktop secondary sidebar on mobile */
@media (max-width: 767.98px) {
  .app-secondary-sidebar {
    display: none !important;
  }
  /* Reset main content/footer adjustments on mobile */
  .has-secondary-sidebar .main-content-wrapper,
  .has-secondary-sidebar [dir=rtl] .main-content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .has-secondary-sidebar .footer,
  .has-secondary-sidebar [dir=rtl] .footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .has-secondary-sidebar .app-topbar,
  .has-secondary-sidebar [dir=rtl] .app-topbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}
/* Mobile Secondary Navigation Styles (Horizontal Pills) */
.secondary-sidebar-mobile {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Horizontal scrollable container */
.secondary-nav-mobile-scroll {
  /* Hide scrollbar for cleaner look, but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-overflow-scrolling: touch;
}
.secondary-nav-mobile-scroll::-webkit-scrollbar {
  height: 4px;
}
.secondary-nav-mobile-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.secondary-nav-mobile-scroll::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 2px;
}
.secondary-nav-mobile-scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--bs-border-color) 70%, black);
}
.secondary-nav-mobile-scroll {
  /* Show scrollbar on hover for better UX */
}
.secondary-nav-mobile-scroll:hover {
  scrollbar-color: var(--bs-border-color) transparent;
}

/* Mobile nav items */
.secondary-nav-mobile-item {
  white-space: nowrap;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  /* Ensure icons are displayed properly */
}
.secondary-nav-mobile-item i {
  margin-right: 0.4rem;
}
[dir=rtl] .secondary-nav-mobile-item i {
  margin-right: 0;
  margin-left: 0.4rem;
}
.secondary-nav-mobile-item {
  /* Active state */
}
.secondary-nav-mobile-item.active {
  font-weight: 500;
}

/* Collapsible Submenu Styles */
.secondary-sidebar-nav-group {
  /* Container for collapsible group */
  /* Remove top border on subsequent groups to avoid double lines */
}
.secondary-sidebar-nav-group + .secondary-sidebar-nav-group .secondary-sidebar-nav-toggle {
  border-top: none;
}

.secondary-sidebar-nav-toggle {
  /* Toggle button for submenu (looks like nav item but is a button) */
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background: none;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--secondary-sidebar-text);
  text-align: start;
  font-size: 0.95rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
  /* RTL support - chevron should be on left (start), text on right (end) */
}
[dir=rtl] .secondary-sidebar-nav-toggle {
  flex-direction: row-reverse;
}
.secondary-sidebar-nav-toggle:hover {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-bg) 90%, var(--bs-primary));
  color: var(--bs-primary);
}
.secondary-sidebar-nav-toggle {
  /* Icon chevron styles */
}
.secondary-sidebar-nav-toggle .secondary-sidebar-nav-chevron {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  /* In LTR: chevron on right (after text) */
  margin-left: 0.5rem;
  /* In RTL: chevron on left (before text, but visually after due to flex-direction) */
}
[dir=rtl] .secondary-sidebar-nav-toggle .secondary-sidebar-nav-chevron {
  margin-left: 0;
  margin-right: 0.5rem;
}
.secondary-sidebar-nav-toggle {
  /* Chevron rotation based on expanded state */
}
.secondary-sidebar-nav-toggle[aria-expanded=false] .secondary-sidebar-nav-chevron {
  transform: rotate(0deg); /* Collapsed: points right */
}
.secondary-sidebar-nav-toggle[aria-expanded=true] .secondary-sidebar-nav-chevron {
  transform: rotate(90deg); /* Expanded: points down */
}

.secondary-sidebar-nav-submenu {
  /* Container for submenu items - darker than main items */
  background-color: var(--bs-secondary-sidebar-submenu-bg);
  border-left: 3px solid var(--bs-primary);
}
[dir=rtl] .secondary-sidebar-nav-submenu {
  border-left: none;
  border-right: 3px solid var(--bs-primary);
}

.secondary-sidebar-nav-subitem {
  /* Individual submenu items (indented) */
  padding-left: 2rem;
  font-size: 0.9rem;
  background-color: var(--bs-secondary-sidebar-submenu-bg);
}
[dir=rtl] .secondary-sidebar-nav-subitem {
  padding-left: 1.25rem;
  padding-right: 2rem;
}
.secondary-sidebar-nav-subitem {
  /* Remove double borders at start and end of submenu */
}
.secondary-sidebar-nav-subitem:first-child {
  border-top: none;
}
.secondary-sidebar-nav-subitem:last-child {
  border-bottom: none;
}
.secondary-sidebar-nav-subitem:hover {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-submenu-bg) 85%, var(--bs-primary));
}
.secondary-sidebar-nav-subitem.active {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-submenu-bg) 75%, var(--bs-primary));
}

/* Title Table Styles */
.title-table tr {
  border-bottom: 1px solid #dee2e6;
}
.title-table td,
.title-table th {
  padding-right: 0;
  padding-left: 0;
  border: none;
  vertical-align: bottom;
}
.title-table td .btn.btn-sm,
.title-table th .btn.btn-sm {
  padding: 0 0.5rem;
}
.title-table td h1, .title-table td h2, .title-table td h3, .title-table td h4, .title-table td h5, .title-table td h6,
.title-table td .h1, .title-table td .h2, .title-table td .h3, .title-table td .h4, .title-table td .h5, .title-table td .h6,
.title-table th h1,
.title-table th h2,
.title-table th h3,
.title-table th h4,
.title-table th h5,
.title-table th h6,
.title-table th .h1,
.title-table th .h2,
.title-table th .h3,
.title-table th .h4,
.title-table th .h5,
.title-table th .h6 {
  margin-bottom: 0;
}
.title-table th {
  font-weight: bold;
  color: var(--color-dark);
}
.title-table th h1, .title-table th h2, .title-table th h3, .title-table th h4, .title-table th h5, .title-table th h6,
.title-table th .h1, .title-table th .h2, .title-table th .h3, .title-table th .h4, .title-table th .h5, .title-table th .h6 {
  font-weight: bold;
}
.title-table th .nav {
  flex-wrap: wrap;
  margin: 0 -1em;
}
.title-table th .nav .nav-link {
  padding: 0 1em;
}
.title-table th .nav .nav-link.active {
  color: var(--color-primary);
}
.title-table th .nav .nav-item .nav-link {
  flex: 1 0 100px;
  padding: 0;
  margin: 0 1em;
}
.title-table th .nav .nav-item .nav-link:not(.active):hover {
  color: var(--color-primary);
}

.subtitle {
  font-size: 1rem;
  font-weight: bold;
}
.subtitle .col .underlined {
  border-bottom: 1px solid #dee2e6;
}
.subtitle .sub-subtitle {
  font-weight: normal;
}

/* Data Tables - Custom Features for Frozen Headers and Fixed Footer
   Relies on Bootstrap's built-in table classes:
   - .table for base styling
   - .table-striped for row striping
   - .table-hover for hover effects
   - .table-bordered for borders (optional)
   - .pagination for pagination styling

   This file only contains custom features NOT provided by Bootstrap */
/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
  --data-table-footer-height: 60px;
  --data-table-header-row-height: 48px;
}

/* ========================================
   Data Table Container
   Custom flex layout for proper scrolling with fixed footer
   ======================================== */
.data-table-container {
  padding-bottom: calc(var(--data-table-footer-height) + 1rem);
}
.data-table-container .card-body {
  overflow: visible;
  /* Allow vertical overflow for sticky headers */
  /* Horizontal overflow is controlled by .data-table-scroll-wrapper */
}

/* ========================================
   Scroll Wrapper
   Custom scrollbar styling
   ======================================== */
.data-table-scroll-wrapper {
  position: relative;
  /* Enable horizontal scrolling within the container to prevent table overflow */
  overflow-x: auto;
  overflow-y: visible;
  /* Allow vertical overflow for sticky headers and dropdowns */
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
  /* Dropdown menus in table cells - basic styling when in DOM */
  /* Note: The table-dropdown controller moves menus to body when shown (portal pattern) */
}
.data-table-scroll-wrapper .dropdown-menu {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  min-width: 10rem;
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--bs-body-color);
  background-color: transparent;
  border: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item:hover, .data-table-scroll-wrapper .dropdown-menu .dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  text-decoration: none;
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item i {
  margin-inline-end: 0.5rem;
  width: 1.25rem;
  text-align: center;
  color: var(--bs-secondary-color);
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item:hover i, .data-table-scroll-wrapper .dropdown-menu .dropdown-item:focus i {
  color: var(--bs-body-color);
}
.data-table-scroll-wrapper .dropdown-menu .dropdown-item:active i {
  color: var(--bs-white);
}
.data-table-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}
.data-table-scroll-wrapper::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
  border-radius: 4px;
}
.data-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 4px;
}
.data-table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-secondary);
}

/* ========================================
   Frozen/Sticky Table Headers
   Custom feature - Bootstrap doesn't provide this
   ======================================== */
.data-table {
  margin-bottom: 0;
  border-collapse: collapse; /* Ensure no gaps between cells */
  /* Add bottom border to all rows as separator */
}
.data-table tbody tr td,
.data-table tbody tr th {
  border-bottom-width: var(--bs-border-width);
}
.data-table {
  /* Remove top border on first row to prevent double line with thead */
}
.data-table tbody tr:first-child td,
.data-table tbody tr:first-child th {
  border-top: none !important;
}
.data-table {
  /* Also ensure aggregate row doesn't have bottom border bleeding through */
}
.data-table thead .aggregate-row td {
  border: none;
}
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Match card header style: .card-header.pt-3.pb-3.text-bg-dark-secondary.border-bottom */
  /* Use Bootstrap's generated CSS variable for dark-secondary theme color */
  background-color: var(--bs-dark-secondary, #37434e);
  color: var(--bs-white);
  /* Note: border-bottom removed - was causing dark line to show in cell gaps */
  /* Shadow to show header is floating */
}
.data-table thead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}
.data-table thead tr {
  background-color: var(--bs-dark-secondary, #37434e);
}
.data-table thead th {
  background-color: var(--bs-dark-secondary, #37434e);
  color: var(--bs-white);
  vertical-align: bottom;
  line-height: 1.2;
  /* Match card header padding: .pt-3.pb-3 = padding-top: 1rem; padding-bottom: 1rem; */
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* Match card header typography: h6.mb-0.fw-semibold */
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0;
  /* Ensure form controls (checkboxes) are visible on dark background */
}
.data-table thead th input[type=checkbox] {
  filter: brightness(1.2);
  /* Slightly brighten checkbox for visibility */
}
.data-table {
  /* Sortable headers - custom interactive feature */
}
.data-table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease-in-out;
  position: relative;
  padding-inline-end: 1.5rem;
  /* Make room for the icon */
}
.data-table th.sortable:hover {
  /* Darken the dark-secondary background on hover */
  background-color: color-mix(in srgb, var(--bs-dark-secondary, #37434e) 90%, black);
}
.data-table {
  /* Dark mode - lighten hover instead of darken */
}
[data-bs-theme=dark] .data-table th.sortable:hover {
  background-color: color-mix(in srgb, var(--bs-dark-secondary, #37434e) 110%, white);
}
.data-table {
  /* Sort icon styling - absolutely positioned */
}
.data-table .sort-icon {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  /* RTL-aware positioning */
  width: 12px;
  /* Use lighter color for visibility on dark background */
  color: rgba(255, 255, 255, 0.7);
}
.data-table .sort-icon i {
  font-size: 0.875rem;
}
.data-table {
  /* Filter row - custom feature */
  /* Use a darker shade (mix of dark-secondary and secondary-bg) for better visual hierarchy */
  /* Darker than secondary-bg but lighter than the header for form control readability */
}
.data-table .filter-row {
  background-color: color-mix(in srgb, var(--bs-dark-secondary, #37434e) 15%, var(--bs-secondary-bg));
}
.data-table .filter-row td {
  padding: 0.5rem;
  background-color: color-mix(in srgb, var(--bs-dark-secondary, #37434e) 15%, var(--bs-secondary-bg));
  vertical-align: bottom; /* Align filter inputs at bottom for consistent layout */
  border: none; /* Remove Bootstrap's default borders to prevent gaps showing thead background */
}
.data-table .filter-row td .form-control,
.data-table .filter-row td .form-select {
  font-size: 0.875rem;
}
.data-table {
  /* Aggregate row - shows SUM/COUNT totals (in thead, after filter row) */
}
.data-table thead .aggregate-row {
  /* When hidden, ensure completely invisible - must override all table styling */
}
.data-table thead .aggregate-row.d-none {
  display: none !important;
  height: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Also hide all child cells */
}
.data-table thead .aggregate-row.d-none td, .data-table thead .aggregate-row.d-none th {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.data-table thead .aggregate-row td {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  border: none;
}
.data-table thead .aggregate-row .aggregate-cell {
  text-align: end; /* RTL-aware: right in LTR, left in RTL */
  direction: ltr; /* Numbers always LTR even in RTL layouts */
  font-family: var(--bs-font-monospace);
  color: var(--bs-primary);
}

/* Aggregate toggle button active state */
.data-table-footer button[data-data-table-target=aggregateToggle].active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}
.data-table-footer button[data-data-table-target=aggregateToggle].active:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
}

/* ========================================
   Fixed Activities Filter Card
   Custom feature for has_activities index pages
   Fixed positioning because main content uses overflow-auto
   Same pattern as data-table-footer
   ======================================== */
.activities-filter-card {
  position: fixed;
  top: calc(var(--topbar-height, 60px) + 1rem);
  /* Add 1rem margin from topbar */
  left: 0;
  right: 0;
  z-index: 15;
  /* Above table headers (10), below topbar (1020), below footer (1000) */
  /* Match data table header row styling */
  background-color: var(--bs-dark-secondary, #37434e);
  color: var(--bs-white);
  border: 1px solid var(--bs-border-color);
  /* Sidebar awareness - EXACT same pattern as data-table-footer */
  margin-left: calc(var(--sidebar-width-expanded) + 0.75rem);
  /* Sidebar + content padding */
  margin-right: 0.75rem;
  /* Content padding */
  transition: margin-left var(--sidebar-transition), margin-right var(--sidebar-transition);
  /* RTL support */
}
[dir=rtl] .activities-filter-card {
  margin-right: calc(var(--sidebar-width-expanded) + 0.75rem);
  margin-left: 0.75rem;
}
.activities-filter-card {
  /* Collapsed sidebar - class applied directly to element via JavaScript */
}
.activities-filter-card.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + 1rem);
}
[dir=rtl] .activities-filter-card.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + 1rem);
  margin-left: 1rem;
}
.activities-filter-card {
  /* Shadow to show card is floating */
}
.activities-filter-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
  opacity: 1;
}
.activities-filter-card {
  /* Card body should inherit the background and text color */
}
.activities-filter-card .card-body {
  background-color: transparent;
  color: inherit;
}
.activities-filter-card {
  /* Ensure form labels are visible on dark background */
}
.activities-filter-card .form-label {
  color: var(--bs-white);
  font-weight: 600;
}
.activities-filter-card {
  /* Ensure form controls maintain proper styling */
}
.activities-filter-card .form-control,
.activities-filter-card .form-select {
  /* Form controls keep their default light background for readability */
}

/* Secondary sidebar awareness - adjust filter card when secondary sidebar is present */
.has-secondary-sidebar .activities-filter-card {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width) + 1rem);
}
.has-secondary-sidebar .activities-filter-card.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width) + 1rem);
}

/* RTL secondary sidebar awareness */
[dir=rtl].has-secondary-sidebar .activities-filter-card {
  margin-left: 1rem;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width) + 1rem);
}
[dir=rtl].has-secondary-sidebar .activities-filter-card.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width) + 1rem);
}

/* Add top padding to data-table-container to prevent content from hiding under fixed card */
/* Padding = filter card height + mb-2 (0.5rem) spacing */
/* XL (≥1200px): 4 columns in 1 row = ~1 field height + card padding + mb-2 = ~6.5rem */
/* MD (768px-1199px): 2 columns per row = 2 rows = ~2 fields + gap + card padding + mb-2 = ~11.5rem */
/* SM (<768px): position static, no padding needed */
.data-table-container:has(.activities-filter-card) {
  /* Default XL: 4 columns in 1 row */
  padding-top: 7.5rem;
  /* mb-3 + card padding + 1 field + mb-2 spacing */
  transition: padding-top 0.2s ease;
}

/* Medium breakpoint: 2 columns per row = 2 rows */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .data-table-container:has(.activities-filter-card) {
    padding-top: 12.5rem;
    /* mb-3 + card padding + 2 fields + gap + mb-2 spacing */
  }
}
/* Large breakpoint: back to 4 columns in 1 row */
@media (min-width: 1200px) {
  .data-table-container:has(.activities-filter-card) {
    padding-top: 7.5rem;
    /* mb-3 + card padding + 1 field + mb-2 spacing */
  }
}
/* Mobile - full width filter card (reset secondary sidebar adjustments) */
@media (max-width: 767.98px) {
  .has-secondary-sidebar .activities-filter-card,
  [dir=rtl].has-secondary-sidebar .activities-filter-card,
  .activities-filter-card {
    position: static;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }
  .data-table-container:has(.activities-filter-card) {
    padding-top: 0;
  }
}
/* ========================================
   Loading Overlay
   Custom feature for async data loading
   ======================================== */
.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  min-height: 200px;
}
.table-loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* ========================================
   Fixed Footer with Sidebar Awareness
   Custom feature - sticky footer that adjusts for sidebar
   ======================================== */
.data-table-footer {
  position: fixed;
  bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--bs-tertiary-bg);
  border-top: 1px solid var(--bs-border-color);
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 1000;
  min-height: var(--data-table-footer-height);
  /* Sidebar awareness */
  margin-left: var(--sidebar-width-expanded);
  width: calc(100% - var(--sidebar-width-expanded));
  transition: margin-left var(--sidebar-transition), margin-right var(--sidebar-transition), width var(--sidebar-transition), bottom var(--sidebar-transition, 300ms ease-in-out);
  /* RTL support */
}
[dir=rtl] .data-table-footer {
  margin-right: var(--sidebar-width-expanded);
  margin-left: 0;
  width: calc(100% - var(--sidebar-width-expanded));
}
.data-table-footer {
  /* Collapsed sidebar */
}
.data-table-footer.sidebar-collapsed {
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
}
[dir=rtl] .data-table-footer.sidebar-collapsed {
  margin-right: var(--sidebar-width-collapsed);
  margin-left: 0;
  width: calc(100% - var(--sidebar-width-collapsed));
}

/* Secondary sidebar awareness - adjust data table footer when secondary sidebar is present */
.has-secondary-sidebar .data-table-footer {
  margin-left: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
}
.has-secondary-sidebar .data-table-footer.sidebar-collapsed {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
}

/* RTL secondary sidebar awareness */
[dir=rtl].has-secondary-sidebar .data-table-footer {
  margin-left: 0;
  margin-right: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-expanded) - var(--secondary-sidebar-width));
}
[dir=rtl].has-secondary-sidebar .data-table-footer.sidebar-collapsed {
  margin-right: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
  width: calc(100% - var(--sidebar-width-collapsed) - var(--secondary-sidebar-width));
}

/* Continue with data-table-footer sub-elements */
.data-table-footer {
  /* Three-column layout */
}
.data-table-footer-start {
  display: flex;
  align-items: center;
  gap: 0;
  /* Remove gap to match pagination (buttons are adjacent) */
  flex-wrap: wrap;
  /* Style dropdown buttons to match pagination appearance */
}
.data-table-footer-start .dropdown {
  /* Style dropdown buttons to match pagination .page-link appearance */
}
.data-table-footer-start .dropdown button.btn {
  /* Match pagination button styling */
  background-color: var(--bs-pagination-bg, var(--bs-tertiary-bg));
  border: var(--bs-pagination-border-width, 1px) solid var(--bs-pagination-border-color, var(--bs-border-color));
  color: var(--bs-pagination-color, var(--bs-primary));
  padding: var(--bs-pagination-padding-y, 0.375rem) var(--bs-pagination-padding-x, 0.75rem);
  font-size: var(--bs-pagination-font-size, 1rem);
  line-height: var(--bs-pagination-line-height, 1.5);
  border-radius: 0;
  /* Remove rounded corners for adjacent buttons */
  margin: 0;
  /* Remove any margin */
  position: relative;
  /* Enable z-index stacking */
  z-index: 1;
  /* Base z-index for inactive buttons */
  /* Match pagination hover state */
}
.data-table-footer-start .dropdown button.btn:hover:not(:disabled):not(.disabled):not([aria-expanded=true]) {
  background-color: var(--bs-pagination-hover-bg, var(--bs-tertiary-bg));
  border-color: var(--bs-pagination-hover-border-color, var(--bs-border-color));
  color: var(--bs-pagination-hover-color, var(--bs-primary));
}
.data-table-footer-start .dropdown button.btn {
  /* Match pagination focus state */
}
.data-table-footer-start .dropdown button.btn:focus {
  box-shadow: var(--bs-pagination-focus-box-shadow, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25));
  z-index: 2;
  /* Bring to front on focus */
}
.data-table-footer-start .dropdown button.btn {
  /* Match pagination active state (when dropdown is open) */
}
.data-table-footer-start .dropdown button.btn[aria-expanded=true] {
  background-color: var(--bs-pagination-active-bg, var(--bs-primary));
  border-color: var(--bs-pagination-active-border-color, var(--bs-primary));
  color: var(--bs-pagination-active-color, var(--bs-white));
  z-index: 3;
  /* Higher z-index to ensure active button appears above inactive ones */
}
.data-table-footer-start .dropdown button.btn {
  /* Keep active state even on hover when menu is open */
}
.data-table-footer-start .dropdown button.btn[aria-expanded=true]:hover:not(:disabled):not(.disabled) {
  background-color: var(--bs-pagination-active-bg, var(--bs-primary));
  border-color: var(--bs-pagination-active-border-color, var(--bs-primary));
  color: var(--bs-pagination-active-color, var(--bs-white));
}
.data-table-footer-start .dropdown button.btn {
  /* Icon styling to match pagination icons */
}
.data-table-footer-start .dropdown button.btn i {
  color: inherit;
  /* Use button's color */
}
.data-table-footer-start .dropdown {
  /* First button - add start border radius (RTL-aware) */
}
.data-table-footer-start .dropdown:first-child button.btn {
  border-top-left-radius: var(--bs-pagination-border-radius, 0.375rem);
  border-bottom-left-radius: var(--bs-pagination-border-radius, 0.375rem);
}
.data-table-footer-start .dropdown {
  /* Last dropdown button - add end border radius (RTL-aware) */
  /* Use :last-of-type to select last dropdown even if selection counter comes after */
}
.data-table-footer-start .dropdown:last-of-type button.btn {
  border-top-right-radius: var(--bs-pagination-border-radius, 0.375rem);
  border-bottom-right-radius: var(--bs-pagination-border-radius, 0.375rem);
}
.data-table-footer-start .dropdown {
  /* RTL: Flip border radius for first/last buttons */
}
[dir=rtl] .data-table-footer-start .dropdown:first-child button.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-pagination-border-radius, 0.375rem);
  border-bottom-right-radius: var(--bs-pagination-border-radius, 0.375rem);
}
[dir=rtl] .data-table-footer-start .dropdown:last-of-type button.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-pagination-border-radius, 0.375rem);
  border-bottom-left-radius: var(--bs-pagination-border-radius, 0.375rem);
}
.data-table-footer-start .dropdown {
  /* Adjacent buttons - remove double borders (RTL-aware) */
}
.data-table-footer-start .dropdown:not(:first-child) button.btn {
  margin-left: calc(-1 * var(--bs-pagination-border-width, 1px));
  /* Overlap borders */
}
[dir=rtl] .data-table-footer-start .dropdown:not(:first-child) button.btn {
  margin-left: 0;
  margin-right: calc(-1 * var(--bs-pagination-border-width, 1px));
  /* Overlap borders in RTL */
}
.data-table-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  min-width: 150px;
}
.data-table-footer-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.data-table-footer {
  /* When start section is empty, adjust layout */
}
.data-table-footer.no-start-content {
  justify-content: flex-start;
}
.data-table-footer.no-start-content .data-table-footer-center {
  justify-content: flex-start;
  text-align: start;
  margin-inline-end: auto;
}
.data-table-footer {
  /* Custom text styling */
}
.data-table-footer .selection-counter {
  font-weight: 600;
  color: var(--bs-primary);
  white-space: nowrap;
}
.data-table-footer .table-info-text {
  font-size: 0.875rem;
  color: var(--bs-secondary);
  white-space: nowrap;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
/* Tablet and below - vertical footer layout */
@media (max-width: 991.98px) {
  .data-table-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .data-table-footer-start, .data-table-footer-center, .data-table-footer-end {
    justify-content: center;
    width: 100%;
  }
  .data-table-footer-center {
    order: -1;
    /* Stats on top */
  }
}
/* Mobile - full width footer (reset secondary sidebar adjustments) */
@media (max-width: 767.98px) {
  .has-secondary-sidebar .data-table-footer,
  [dir=rtl].has-secondary-sidebar .data-table-footer,
  .data-table-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0.5rem;
  }
  .has-secondary-sidebar .data-table-footer-start,
  [dir=rtl].has-secondary-sidebar .data-table-footer-start,
  .data-table-footer-start {
    flex-direction: column;
    align-items: stretch;
  }
  .has-secondary-sidebar .data-table-footer-start .btn-group,
  .has-secondary-sidebar .data-table-footer-start .dropdown,
  [dir=rtl].has-secondary-sidebar .data-table-footer-start .btn-group,
  [dir=rtl].has-secondary-sidebar .data-table-footer-start .dropdown,
  .data-table-footer-start .btn-group,
  .data-table-footer-start .dropdown {
    width: 100%;
  }
  .has-secondary-sidebar .data-table-footer-start .btn-group .btn,
  .has-secondary-sidebar .data-table-footer-start .dropdown .btn,
  [dir=rtl].has-secondary-sidebar .data-table-footer-start .btn-group .btn,
  [dir=rtl].has-secondary-sidebar .data-table-footer-start .dropdown .btn,
  .data-table-footer-start .btn-group .btn,
  .data-table-footer-start .dropdown .btn {
    width: 100%;
  }
  .data-table-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 600px;
  }
}
/* ========================================
   Floating Action Button (FAB) Positioning
   When data-table-footer is present, FAB sits above it
   ======================================== */
.fab-button {
  /* Default positioning - bottom right corner */
  position: fixed;
  /* Default: position above data-table-footer when present, accounting for report status overlay */
  bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px) + var(--data-table-footer-height) + 1rem);
  inset-inline-end: 1.5rem;
  /* RTL-aware: right in LTR, left in RTL */
  width: 56px;
  height: 56px;
  z-index: 1001;
  /* Above data-table-footer (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: bottom var(--sidebar-transition), margin-inline-start var(--sidebar-transition), margin-inline-end var(--sidebar-transition);
  /* Sidebar awareness - adjust position when sidebar is present */
  /* LTR: sidebar on left, FAB on right - add margin to left */
  margin-inline-start: var(--sidebar-width-expanded);
  margin-inline-end: 0;
  /* Explicit positioning for LTR - FAB on right side */
  right: 1.5rem;
  left: auto;
  /* RTL support */
  /* RTL: sidebar on right, FAB on left - no margin needed on left */
}
[dir=rtl] .fab-button {
  margin-inline-start: 0;
  margin-inline-end: 0;
  /* Explicit positioning for RTL - FAB on left side */
  left: 1.5rem;
  right: auto;
}
.fab-button {
  /* Collapsed sidebar - check body or parent for collapsed state */
}
body.sidebar-collapsed .fab-button, .sidebar-collapsed .fab-button {
  /* LTR: collapsed sidebar - smaller margin */
  margin-inline-start: var(--sidebar-width-collapsed);
}
[dir=rtl] body.sidebar-collapsed .fab-button, [dir=rtl] .sidebar-collapsed .fab-button {
  /* RTL: sidebar on right, no margin needed on left */
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.fab-button {
  /* Tooltip text styling */
}
.fab-button .fab-tooltip-text {
  position: absolute;
  inset-inline-end: calc(100% + 0.75rem);
  white-space: nowrap;
  background-color: var(--bs-dark);
  color: var(--bs-white);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1002;
  /* Arrow pointing to button */
}
.fab-button .fab-tooltip-text::after {
  content: "";
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-inline-start-color: var(--bs-dark);
}
.fab-button {
  /* Show tooltip on hover */
}
.fab-button:hover .fab-tooltip-text {
  opacity: 1;
}

/* Secondary sidebar awareness - adjust FAB when secondary sidebar is present */
.has-secondary-sidebar .fab-button {
  margin-inline-start: calc(var(--sidebar-width-expanded) + var(--secondary-sidebar-width));
}
body.sidebar-collapsed .has-secondary-sidebar .fab-button, .sidebar-collapsed .has-secondary-sidebar .fab-button {
  margin-inline-start: calc(var(--sidebar-width-collapsed) + var(--secondary-sidebar-width));
}

/* RTL secondary sidebar awareness */
[dir=rtl].has-secondary-sidebar .fab-button {
  /* RTL: sidebar on right, FAB on left - no margin needed */
  margin-inline-start: 0;
  margin-inline-end: 0;
}
body.sidebar-collapsed [dir=rtl].has-secondary-sidebar .fab-button, .sidebar-collapsed [dir=rtl].has-secondary-sidebar .fab-button {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* When no data-table-footer is present, use default bottom positioning, accounting for report status overlay */
body:not(:has(.data-table-footer)) .fab-button {
  bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px) + 1rem);
}

/* Mobile - adjust FAB position */
@media (max-width: 767.98px) {
  .fab-button {
    bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px) + var(--data-table-footer-height) + 0.5rem);
    inset-inline-end: 1rem;
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}
/* ========================================
   Print Styles
   ======================================== */
@media print {
  .data-table-scroll-wrapper {
    overflow: visible;
  }
  .data-table thead {
    position: static;
  }
  .data-table-footer,
  .table-loading-overlay {
    display: none;
  }
}
/* ========================================
   Portaled Dropdown Menus (moved to body)
   The table-dropdown controller moves dropdown menus to body when shown
   to escape overflow:auto containers. These styles apply globally.
   ======================================== */
body > .dropdown-menu.show {
  /* High z-index to appear above all other elements */
  z-index: 1055;
  /* Ensure proper styling when detached from original parent */
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  min-width: 10rem;
}
body > .dropdown-menu.show .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--bs-body-color);
  background-color: transparent;
  border: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
body > .dropdown-menu.show .dropdown-item:hover, body > .dropdown-menu.show .dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  text-decoration: none;
}
body > .dropdown-menu.show .dropdown-item:active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
body > .dropdown-menu.show .dropdown-item i {
  margin-inline-end: 0.5rem;
  width: 1.25rem;
  text-align: center;
  color: var(--bs-secondary-color);
}
body > .dropdown-menu.show .dropdown-item:hover i, body > .dropdown-menu.show .dropdown-item:focus i {
  color: var(--bs-body-color);
}
body > .dropdown-menu.show .dropdown-item:active i {
  color: var(--bs-white);
}

/* ========================================
   Column Selector Modal
   Searchable modal for managing column visibility
   ======================================== */
/* Column Selector Modal - use class selector since ID is dynamic */
/* ========================================
   Column Selector Panel - Two-Panel Drag-and-Drop Interface
   Modeled after report editor design
   ======================================== */
.column-selector-panel-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 70vh;
  /* Similar height to report editor */
  padding: 1rem;
  background-color: var(--bs-body-bg);
  /* Two-column layout - use unique class names to avoid conflicts with report editor */
}
.column-selector-panel-wrapper .column-panel-left,
.column-selector-panel-wrapper .column-panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  overflow: hidden;
  /* Prevent content from overflowing rounded corners */
}
.column-selector-panel-wrapper {
  /* Panel headers - match report editor styling */
}
.column-selector-panel-wrapper .panel-header {
  background-color: var(--bs-primary-bg-subtle);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.column-selector-panel-wrapper .panel-header h6 {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}
.column-selector-panel-wrapper .panel-header h6 .header-text {
  flex-grow: 1;
}
.column-selector-panel-wrapper .panel-header h6 .badge {
  font-size: 0.75rem;
  font-weight: normal;
}
.column-selector-panel-wrapper .panel-header {
  /* Drop zone indicator - hidden by default, moved inside panel */
}
.column-selector-panel-wrapper .panel-header .drop-zone-indicator {
  display: none;
}
.column-selector-panel-wrapper {
  /* Available panel positioning for drop zone overlay */
}
.column-selector-panel-wrapper .column-panel-left {
  position: relative;
}
.column-selector-panel-wrapper {
  /* Drop zone active state - show indicator when dragging from Visible */
}
.column-selector-panel-wrapper .drop-zone-active {
  /* Full panel overlay - use opacity instead of border to avoid layout shift */
}
.column-selector-panel-wrapper .drop-zone-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--bs-danger-rgb), 0.15);
  border-radius: var(--bs-border-radius);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: fade-in-drop-zone 0.2s ease-in forwards;
}
.column-selector-panel-wrapper .drop-zone-active .drop-zone-indicator {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bs-danger);
  color: white;
  padding: 1rem 2rem;
  border-radius: var(--bs-border-radius);
  font-weight: 600;
  font-size: 1rem;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.column-selector-panel-wrapper .drop-zone-active .drop-zone-indicator i {
  font-size: 1.2rem;
}
.column-selector-panel-wrapper .drop-zone-active {
  /* Ensure group items are still droppable */
}
.column-selector-panel-wrapper .drop-zone-active .group-items {
  position: relative;
  z-index: 2;
}
.column-selector-panel-wrapper {
  /* Fade in animation for drop zone */
}
@keyframes fade-in-drop-zone {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.column-selector-panel-wrapper {
  /* Panel content - scrollable */
}
.column-selector-panel-wrapper .panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
}
.column-selector-panel-wrapper .panel-content::-webkit-scrollbar {
  width: 8px;
}
.column-selector-panel-wrapper .panel-content::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
  border-radius: 4px;
}
.column-selector-panel-wrapper .panel-content::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 4px;
}
.column-selector-panel-wrapper .panel-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-secondary);
}
.column-selector-panel-wrapper {
  /* Search box styling - match report editor */
}
.column-selector-panel-wrapper .search-box .input-group-text {
  background-color: var(--bs-tertiary-bg);
  border-inline-end: none;
  padding: 0.375rem 0.75rem;
}
.column-selector-panel-wrapper .search-box .form-control {
  border-inline-start: none;
}
.column-selector-panel-wrapper .search-box .form-control:focus {
  border-color: var(--bs-border-color);
  box-shadow: none;
}
.column-selector-panel-wrapper .search-box .form-control:focus + .input-group-text {
  border-color: var(--bs-primary);
}
.column-selector-panel-wrapper {
  /* Column groups styling - match report editor */
}
.column-selector-panel-wrapper .column-groups .column-group {
  margin-bottom: 0;
  /* Removed: border, border-radius to match report editor */
  background-color: transparent;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.25rem 0.75rem;
  background-color: var(--bs-secondary-bg);
  border: none;
  text-align: start;
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color 0.15s ease;
  font-size: 0.875rem;
  font-weight: 600;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header:hover {
  background-color: var(--bs-secondary-bg);
}
.column-selector-panel-wrapper .column-groups .column-group .group-header:focus {
  box-shadow: none;
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header .group-name {
  font-size: 0.875rem;
  font-weight: 600;
  flex-grow: 1;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header .group-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header .group-count {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  font-weight: normal;
  background-color: var(--bs-secondary-bg);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header {
  /* Collapse icon rotation - chevron-right rotates 90deg when expanded */
}
.column-selector-panel-wrapper .column-groups .column-group .group-header .collapse-icon {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  margin-right: 0.5rem;
}
.column-selector-panel-wrapper .column-groups .column-group .group-header[aria-expanded=true] .collapse-icon {
  transform: rotate(90deg);
}
.column-selector-panel-wrapper .column-groups .column-group {
  /* Empty groups (all columns selected) - hide but keep in DOM for position */
}
.column-selector-panel-wrapper .column-groups .column-group.group-empty {
  display: none;
}
.column-selector-panel-wrapper .column-groups .group-items {
  padding: 0;
}
.column-selector-panel-wrapper {
  /* Column items - draggable - match report editor styling */
}
.column-selector-panel-wrapper .column-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.5rem 0.1rem 0.75rem;
  /* Removed: margin-bottom, border, border-radius to match report editor */
  background-color: transparent;
  transition: background-color 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.column-selector-panel-wrapper .column-item:hover {
  background-color: var(--bs-tertiary-bg);
}
.column-selector-panel-wrapper .column-item .drag-handle {
  margin-inline-end: 0.5rem;
  color: var(--bs-secondary-color);
  cursor: move;
  font-size: 0.875rem;
  opacity: 0.5;
}
.column-selector-panel-wrapper .column-item .drag-handle:active {
  cursor: grabbing;
}
.column-selector-panel-wrapper .column-item .drag-handle:hover {
  opacity: 1;
}
.column-selector-panel-wrapper .column-item .column-name {
  flex-grow: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  /* Highlight search matches - matches report editor style */
}
.column-selector-panel-wrapper .column-item .column-name mark {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  padding: 0.1em 0;
  border-radius: 2px;
}
.column-selector-panel-wrapper .column-item .remove-button {
  margin-inline-start: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: none;
  border: none;
  color: var(--bs-danger);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  font-size: 0.875rem;
}
.column-selector-panel-wrapper .column-item .remove-button:hover {
  opacity: 1;
}
.column-selector-panel-wrapper .column-item .remove-button:focus {
  outline: 2px solid var(--bs-danger);
  outline-offset: 2px;
}
.column-selector-panel-wrapper {
  /* Available column items - no remove button, has add button - match report editor */
}
.column-selector-panel-wrapper .available-column-item .remove-button {
  display: none;
}
.column-selector-panel-wrapper .available-column-item .add-button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--bs-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: all 0.15s ease;
  font-size: 0.875rem;
}
.column-selector-panel-wrapper .available-column-item .add-button:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.column-selector-panel-wrapper .available-column-item:hover .add-button {
  opacity: 1;
}
.column-selector-panel-wrapper {
  /* Visible column items - no add button */
}
.column-selector-panel-wrapper .visible-column-item .add-button {
  display: none;
}
.column-selector-panel-wrapper {
  /* SortableJS styles - match report editor (no borders) */
}
.column-selector-panel-wrapper .sortable-ghost {
  opacity: 0.4;
  background-color: var(--bs-primary-bg-subtle);
}
.column-selector-panel-wrapper .sortable-drag {
  opacity: 0.8;
}
.column-selector-panel-wrapper .sortable-chosen {
  background-color: var(--bs-primary-bg-subtle);
}
.column-selector-panel-wrapper {
  /* Empty state for visible columns */
}
.column-selector-panel-wrapper .empty-state-placeholder {
  pointer-events: none;
  /* Allow drag events to pass through */
  z-index: 0;
}
.column-selector-panel-wrapper .empty-state-placeholder i {
  opacity: 0.3;
}
.column-selector-panel-wrapper .empty-state-placeholder h5,
.column-selector-panel-wrapper .empty-state-placeholder p {
  color: var(--bs-secondary-color);
}
.column-selector-panel-wrapper .column-selector-visible .column-item {
  padding: 0.225rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: var(--bs-light-bg-subtle);
  border: 2px solid var(--bs-border-color);
  border-radius: 0.375rem;
}
.column-selector-panel-wrapper {
  /* Footer with action buttons */
}
.column-selector-panel-wrapper .column-selector-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}

/* RTL adjustments for column selector panel */
[dir=rtl] .column-selector-panel-wrapper .search-box .input-group-text {
  border-inline-start: none;
  border-inline-end: 1px solid var(--bs-border-color);
}
[dir=rtl] .column-selector-panel-wrapper .search-box .form-control {
  border-inline-start: 1px solid var(--bs-border-color);
  border-inline-end: none;
}
[dir=rtl] .column-selector-panel-wrapper .column-item {
  padding: 0.1rem 0.75rem 0.1rem 0.5rem;
}
[dir=rtl] .column-selector-panel-wrapper .column-group .group-header .collapse-icon {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Modal version adjustments */
.column-selector-panel-modal .column-selector-panel-wrapper.modal-version {
  height: 60vh;
  /* Slightly shorter in modal */
  padding: 0;
  /* No padding in modal (modal-body has padding) */
  /* Remove footer (modal has its own footer) */
}
.column-selector-panel-modal .column-selector-panel-wrapper.modal-version .column-selector-footer {
  display: none;
}

/* Mobile adjustments for column selector panel */
@media (max-width: 767.98px) {
  .column-selector-panel-wrapper {
    flex-direction: column;
    height: auto;
    max-height: 80vh;
  }
  .column-selector-panel-wrapper .column-panel-left,
  .column-selector-panel-wrapper .column-panel-right {
    max-height: 40vh;
  }
  .column-selector-panel-wrapper .column-selector-footer {
    flex-direction: column;
    gap: 0.5rem;
  }
  .column-selector-panel-wrapper .column-selector-footer .btn {
    width: 100%;
  }
  /* Modal version on mobile */
  .column-selector-panel-modal .column-selector-panel-wrapper.modal-version {
    max-height: 70vh;
  }
  .column-selector-panel-modal .column-selector-panel-wrapper.modal-version .column-panel-left,
  .column-selector-panel-modal .column-selector-panel-wrapper.modal-version .column-panel-right {
    max-height: 35vh;
  }
}
/* ========================================
   Column Properties Panel
   Slide-in panel for configuring column parameters
   ======================================== */
.column-properties-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--bs-body-bg);
  border-left: 1px solid var(--bs-border-color);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
}
.column-properties-panel.open {
  transform: translateX(0);
}
.column-properties-panel .panel-header {
  padding: 0.75rem 1rem;
  background: var(--bs-primary-bg-subtle);
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.column-properties-panel .panel-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
}
.column-properties-panel .panel-header .btn-close {
  font-size: 0.75rem;
}
.column-properties-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
}
.column-properties-panel .panel-content::-webkit-scrollbar {
  width: 6px;
}
.column-properties-panel .panel-content::-webkit-scrollbar-track {
  background: transparent;
}
.column-properties-panel .panel-content::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 3px;
}
.column-properties-panel .empty-state {
  padding: 2rem 1rem;
}
.column-properties-panel .empty-state i {
  display: block;
}
.column-properties-panel {
  /* Form styling inside properties panel */
}
.column-properties-panel .column-properties-form .form-group {
  margin-bottom: 1rem;
}
.column-properties-panel .column-properties-form .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.375rem;
}
.column-properties-panel .column-properties-form .form-control,
.column-properties-panel .column-properties-form .form-select {
  font-size: 0.875rem;
}

/* RTL support for properties panel */
[dir=rtl] .column-properties-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--bs-border-color);
  transform: translateX(-100%);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}
[dir=rtl] .column-properties-panel.open {
  transform: translateX(0);
}

/* When properties panel is open, shrink visible panel instead of expanding modal */
.column-selector-panel-modal .modal-dialog.properties-open {
  /* Keep modal same size - don't expand */
}
.column-selector-panel-modal .modal-dialog.properties-open .column-selector-panel-wrapper {
  /* Visible panel shrinks to make room for properties panel */
}
.column-selector-panel-modal .modal-dialog.properties-open .column-selector-panel-wrapper .column-panel-right {
  flex: 0 0 calc(50% - 280px);
  min-width: 200px;
  transition: flex 0.3s ease;
}
.column-selector-panel-modal .modal-dialog.properties-open .column-selector-panel-wrapper {
  /* Available panel stays same size */
}
.column-selector-panel-modal .modal-dialog.properties-open .column-selector-panel-wrapper .column-panel-left {
  flex: 0 0 50%;
}

/* Selected column highlight in visible list */
.column-selector-panel-wrapper {
  position: relative; /* For absolute positioning of properties panel */
}
.column-selector-panel-wrapper .visible-column-item.selected {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary) !important;
}
.column-selector-panel-wrapper {
  /* Columns with parameters - show cursor pointer */
}
.column-selector-panel-wrapper .visible-column-item[data-has-parameters=true] {
  cursor: pointer;
}
.column-selector-panel-wrapper .visible-column-item[data-has-parameters=true]:hover {
  border-color: var(--bs-primary-border-subtle);
}
.column-selector-panel-wrapper {
  /* Config indicator styling */
}
.column-selector-panel-wrapper .config-indicator {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.column-selector-panel-wrapper .visible-column-item:hover .config-indicator,
.column-selector-panel-wrapper .visible-column-item.selected .config-indicator {
  opacity: 1;
}
.column-selector-panel-wrapper {
  /* Column item actions container */
}
.column-selector-panel-wrapper .column-item-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.column-selector-panel-wrapper {
  /* Duplicate button styling */
}
.column-selector-panel-wrapper .duplicate-button {
  padding: 0.25rem 0.5rem;
  background: none;
  border: none;
  color: var(--bs-secondary);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
  font-size: 0.875rem;
}
.column-selector-panel-wrapper .duplicate-button:hover {
  opacity: 1;
  color: var(--bs-primary);
}
.column-selector-panel-wrapper .duplicate-button:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Mobile adjustments for properties panel */
@media (max-width: 767.98px) {
  .column-properties-panel {
    width: 100%;
    position: fixed;
    top: auto;
    bottom: 0;
    height: 50vh;
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
  }
  .column-properties-panel.open {
    transform: translateY(0);
  }
  [dir=rtl] .column-properties-panel {
    transform: translateY(100%);
    border-right: none;
  }
  [dir=rtl] .column-properties-panel.open {
    transform: translateY(0);
  }
  .column-selector-panel-modal .modal-dialog.properties-open {
    max-width: none;
  }
}
/* RTL Fixes for Bootstrap and UI Components */
/* This file contains all RTL-specific fixes and overrides */
[dir=rtl] {
  /* ========================================
     Pagination Fixes
     ======================================== */
  /* Fix pagination arrow icons - flip direction for RTL */
}
[dir=rtl] .pagination .page-link {
  /* Flip backward/forward icons in RTL */
}
[dir=rtl] .pagination .page-link .fa-fast-backward::before {
  content: "\f050";
  /* fa-fast-forward */
}
[dir=rtl] .pagination .page-link .fa-fast-forward::before {
  content: "\f049";
  /* fa-fast-backward */
}
[dir=rtl] .pagination .page-link .fa-step-backward::before {
  content: "\f051";
  /* fa-step-forward */
}
[dir=rtl] .pagination .page-link .fa-step-forward::before {
  content: "\f048";
  /* fa-step-backward */
}
[dir=rtl] .pagination .page-link {
  /* Also handle chevron icons if used elsewhere */
}
[dir=rtl] .pagination .page-link .fa-chevron-left::before {
  content: "\f054";
  /* fa-chevron-right */
}
[dir=rtl] .pagination .page-link .fa-chevron-right::before {
  content: "\f053";
  /* fa-chevron-left */
}
[dir=rtl] .pagination .page-link {
  /* Also handle angle icons if used */
}
[dir=rtl] .pagination .page-link .fa-angle-left::before {
  content: "\f105";
  /* fa-angle-right */
}
[dir=rtl] .pagination .page-link .fa-angle-right::before {
  content: "\f104";
  /* fa-angle-left */
}
[dir=rtl] .pagination {
  /* Fix border radius on first/last pagination items */
}
[dir=rtl] .pagination .page-item:first-child .page-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}
[dir=rtl] .pagination .page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
[dir=rtl] {
  /* ========================================
     Dropdown Menu Fixes
     ======================================== */
}
[dir=rtl] .dropdown-menu {
  /* Ensure proper text alignment */
  text-align: right;
  direction: rtl;
  /* Dropdown items */
}
[dir=rtl] .dropdown-menu .dropdown-item {
  text-align: right;
  direction: rtl;
  /* Icons should have margin on the left in RTL (after text) */
}
[dir=rtl] .dropdown-menu .dropdown-item i,
[dir=rtl] .dropdown-menu .dropdown-item .fa,
[dir=rtl] .dropdown-menu .dropdown-item .fas,
[dir=rtl] .dropdown-menu .dropdown-item .far,
[dir=rtl] .dropdown-menu .dropdown-item .fab {
  /* Remove any left margin, add right margin */
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}
[dir=rtl] .dropdown-menu .dropdown-item {
  /* Labels with checkboxes/radios */
}
[dir=rtl] .dropdown-menu .dropdown-item label {
  display: inline-block !important;
  direction: rtl !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  text-align: right !important;
}
[dir=rtl] .dropdown-menu .dropdown-item label input[type=checkbox],
[dir=rtl] .dropdown-menu .dropdown-item label input[type=radio] {
  float: right !important;
  /* Float checkbox to right in RTL */
  margin-left: 0.5rem !important;
  /* Space between checkbox and text */
  margin-right: 0 !important;
}
[dir=rtl] .dropdown-menu {
  /* Dropdown header */
}
[dir=rtl] .dropdown-menu .dropdown-header {
  text-align: right;
}
[dir=rtl] .dropdown-menu {
  /* Dropdown divider is fine as-is */
}
[dir=rtl] {
  /* Fix dropdown toggle button icons */
}
[dir=rtl] .dropdown-toggle {
  /* Caret/chevron icon spacing */
}
[dir=rtl] .dropdown-toggle .fa,
[dir=rtl] .dropdown-toggle .fas,
[dir=rtl] .dropdown-toggle i {
  margin-right: 0.25rem;
  margin-left: 0;
}
[dir=rtl] .dropdown-toggle::after {
  margin-right: 0.255em;
  margin-left: 0;
}
[dir=rtl] {
  /* ========================================
     Form Select Multiple Fixes
     ======================================== */
  /* Fix padding for multiple select elements in RTL
     In RTL, scrollbar appears on the LEFT (visual left), so we need padding on the LEFT
     (between scrollbar and content). Bootstrap might be applying padding-right which
     pushes content away from the right edge, but we need padding-left for the scrollbar. */
}
[dir=rtl] .form-select[multiple],
[dir=rtl] select.form-select[multiple],
[dir=rtl] select[multiple] {
  /* In RTL: scrollbar is on visual LEFT, content flows RIGHT to LEFT
     We need minimal padding-right (for text edge) and MORE padding-left (for scrollbar) */
  padding-right: 0.5rem !important;
  /* Minimal padding for text edge */
  padding-left: 1.5rem !important;
  /* Extra padding for scrollbar on left side */
  /* Ensure text alignment is right */
  text-align: right;
  direction: rtl;
}
[dir=rtl] {
  /* ========================================
     TomSelect Dropdown Fixes (for autocomplete/tag inputs)
     These apply app-wide to all TomSelect instances
     ======================================== */
  /* Fix dropdown arrow/caret position in single-select RTL */
}
[dir=rtl] .ts-wrapper.single .ts-control::after,
[dir=rtl] .ts-wrapper.input-hidden.single .ts-control::after {
  right: auto !important;
  left: 0.75rem !important;
}
[dir=rtl] .ts-wrapper.single .ts-control,
[dir=rtl] .ts-wrapper.input-hidden.single .ts-control {
  /* Fix input padding in single-select mode (text on right, arrow on left) */
  padding-right: 0.75rem !important;
  /* Text side */
  padding-left: 2rem !important;
  /* Arrow side */
}
[dir=rtl] {
  /* Fix tag/item removal button position in multi-select mode */
}
[dir=rtl] .ts-wrapper .ts-control .item .remove {
  border-left: 0 !important;
  margin-left: -0.25rem !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
[dir=rtl] .ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 5px !important;
}
[dir=rtl] {
  /* Fix dropdown arrow in multi-select with items */
}
[dir=rtl] .ts-wrapper.multi .ts-control::after,
[dir=rtl] .ts-wrapper.plugin-remove_button .ts-control::after {
  right: auto !important;
  left: 0.75rem !important;
}
[dir=rtl] {
  /* Fix dropdown menu alignment */
}
[dir=rtl] .ts-wrapper .ts-dropdown {
  text-align: right !important;
  direction: rtl !important;
}
[dir=rtl] {
  /* Fix normal padding for ts-control in RTL (should be on right, not left) */
  /* Exclude single-select mode which has its own padding rules */
}
[dir=rtl] .ts-wrapper:not(.single) .ts-control {
  padding-right: 0.75rem !important;
  /* Normal padding on right in RTL */
  padding-left: 0 !important;
  /* Remove left padding */
}
[dir=rtl] {
  /* Fix placeholder padding when input is invalid (error icon on right/start in RTL) */
  /* Bootstrap's error icon appears on the right side in RTL, so we need padding-right */
}
[dir=rtl] .ts-wrapper.is-invalid .ts-control,
[dir=rtl] .ts-wrapper.is-invalid.multi .ts-control,
[dir=rtl] .ts-wrapper.is-invalid.single .ts-control {
  padding-right: calc(1.5em + 0.25rem) !important;
  /* Account for error icon on right */
}
[dir=rtl] .ts-wrapper.is-invalid .ts-control input,
[dir=rtl] .ts-wrapper.is-invalid.single .ts-control input {
  padding-right: 0 !important;
  /* Remove input padding, ts-control handles it */
}
[dir=rtl] {
  /* ========================================
     Form Select Dropdown Fixes (regular <select> elements)
     These apply app-wide to all standard Bootstrap dropdowns
     ======================================== */
  /* Fix dropdown arrow/caret position in standard select elements */
}
[dir=rtl] .form-select,
[dir=rtl] select.form-select {
  background-position: left 0.4rem center !important;
  padding-right: 0.4rem !important;
  padding-left: 2.25rem !important;
}
[dir=rtl] .ts-wrapper.is-invalid.single,
[dir=rtl] .ts-wrapper.is-invalid.single .ts-control {
  background-position: left 0.4rem center, right 0.4rem center !important;
  padding-left: 2.25rem !important;
}
[dir=rtl] .ts-wrapper.is-invalid.multi {
  --bs-form-select-bg-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
  background-repeat: no-repeat !important;
  background-position: left 0.4rem center, right 0.4rem center !important;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
[dir=rtl] {
  /* Multiple select dropdowns (already handled above, but ensure no background arrow) */
}
[dir=rtl] .form-select[multiple],
[dir=rtl] select.form-select[multiple],
[dir=rtl] select[multiple] {
  background-image: none !important;
}
[dir=rtl] {
  /* ========================================
     Datepicker Input Group Fixes
     These apply app-wide to all input groups with datepickers
     ======================================== */
  /* Fix border radius on input groups with datepicker
     In RTL: icon (visually on right) has left corners rounded, input (visually on left) has right corners rounded */
}
[dir=rtl] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: calc(var(--bs-border-width) * -1);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
[dir=rtl] .input-group {
  /* Input/select first child (visually on right in RTL) - round RIGHT
     corners (visually far edge), sharp LEFT corners (visually junction
     with the append). Also covers .form-select since the criteria/
     ingredients tables wrap a SelectField in input-group when critical. */
}
[dir=rtl] .input-group > .form-control:first-child,
[dir=rtl] .input-group > .form-select:first-child {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
[dir=rtl] .input-group {
  /* Icon/button (last child in HTML, visually on right in RTL) - round LEFT corners */
}
[dir=rtl] .input-group > .input-group-text:last-child {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
[dir=rtl] {
  /* ========================================
     Margin and Padding Utility Swaps
     Swap me-* / ms-* and pe-* / ps-* utilities for proper RTL support
     ======================================== */
  /* Margin End (me-*) - In RTL, end is left, so swap to margin-left */
}
[dir=rtl] .me-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
[dir=rtl] .me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}
[dir=rtl] .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}
[dir=rtl] .me-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}
[dir=rtl] .me-4 {
  margin-right: 0 !important;
  margin-left: 1.5rem !important;
}
[dir=rtl] .me-5 {
  margin-right: 0 !important;
  margin-left: 3rem !important;
}
[dir=rtl] .me-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}
[dir=rtl] {
  /* Margin Start (ms-*) - In RTL, start is right, so swap to margin-right */
}
[dir=rtl] .ms-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[dir=rtl] .ms-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}
[dir=rtl] .ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}
[dir=rtl] .ms-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}
[dir=rtl] .ms-4 {
  margin-left: 0 !important;
  margin-right: 1.5rem !important;
}
[dir=rtl] .ms-5 {
  margin-left: 0 !important;
  margin-right: 3rem !important;
}
[dir=rtl] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
[dir=rtl] {
  /* Padding End (pe-*) - In RTL, end is left, so swap to padding-left */
}
[dir=rtl] .pe-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
[dir=rtl] .pe-1 {
  padding-right: 0 !important;
  padding-left: 0.25rem !important;
}
[dir=rtl] .pe-2 {
  padding-right: 0 !important;
  padding-left: 0.5rem !important;
}
[dir=rtl] .pe-3 {
  padding-right: 0 !important;
  padding-left: 1rem !important;
}
[dir=rtl] .pe-4 {
  padding-right: 0 !important;
  padding-left: 1.5rem !important;
}
[dir=rtl] .pe-5 {
  padding-right: 0 !important;
  padding-left: 3rem !important;
}
[dir=rtl] {
  /* Padding Start (ps-*) - In RTL, start is right, so swap to padding-right */
}
[dir=rtl] .ps-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[dir=rtl] .ps-1 {
  padding-left: 0 !important;
  padding-right: 0.25rem !important;
}
[dir=rtl] .ps-2 {
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}
[dir=rtl] .ps-3 {
  padding-left: 0 !important;
  padding-right: 1rem !important;
}
[dir=rtl] .ps-4 {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}
[dir=rtl] .ps-5 {
  padding-left: 0 !important;
  padding-right: 3rem !important;
}
[dir=rtl] {
  /* ========================================
     Future RTL fixes go here
     ======================================== */
}

/* iOS-style Toggle Switches
   Modern toggle switch styling for boolean inputs
   Applied globally to all form-check form-switch elements
*/
.form-check.form-switch {
  /* Ensure proper spacing */
  padding-left: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Toggle and text stay together at start */
  gap: 0.5rem; /* Space between toggle and text */
}
.form-check.form-switch .form-check-input {
  /* iOS-style toggle switch */
  width: 3rem !important;
  height: 1.75rem !important;
  background-color: #cbd5e0 !important; /* Light gray when off */
  border: none !important;
  border-radius: 1.75rem !important; /* Fully rounded */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  position: relative;
  margin-top: 0 !important;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  background-image: none !important; /* Remove Bootstrap's default background image */
  /* Circular handle using ::after since Bootstrap uses ::before */
}
.form-check.form-switch .form-check-input::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
  top: 0.125rem;
  left: 0.125rem;
  transform: translateX(0);
}
.form-check.form-switch .form-check-input {
  /* When checked (on state) */
}
.form-check.form-switch .form-check-input:checked {
  background-color: var(--bs-primary, #3f5175) !important;
  border-color: var(--bs-primary, #3f5175) !important;
  background-image: none !important;
}
.form-check.form-switch .form-check-input:checked::after {
  transform: translateX(1.25rem); /* Move handle to the right */
}
.form-check.form-switch .form-check-input {
  /* Focus state */
}
.form-check.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 63, 81, 117), 0.25) !important;
  border-color: transparent !important;
}
.form-check.form-switch .form-check-input {
  /* Disabled state */
}
.form-check.form-switch .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-check.form-switch .form-check-input {
  /* Order - toggle comes first (before text) */
  order: 1;
}
.form-check.form-switch .form-check-label {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 0;
  padding-right: 0;
  padding-left: 0;
  order: 2; /* Label comes after toggle */
}
.form-check.form-switch {
  /* RTL support - keep toggle before text (on right side in RTL) */
}
[dir=rtl] .form-check.form-switch {
  padding-right: 0;
  padding-left: 0;
}
[dir=rtl] .form-check.form-switch .form-check-input {
  margin-right: 0;
  margin-left: 0;
  order: 1; /* Toggle stays first (on right side in RTL) */
}
[dir=rtl] .form-check.form-switch .form-check-input::after {
  left: auto;
  right: 0.125rem;
}
[dir=rtl] .form-check.form-switch .form-check-input:checked::after {
  transform: translateX(-1.25rem); /* Move handle to the left in RTL */
}
[dir=rtl] .form-check.form-switch .form-check-label {
  padding-right: 0;
  padding-left: 0;
  order: 2; /* Label comes after toggle (on left side in RTL) */
}

/* Dark mode support */
[data-bs-theme=dark] .form-check.form-switch .form-check-input {
  background-color: #4a5568 !important; /* Darker gray when off in dark mode */
}
[data-bs-theme=dark] .form-check.form-switch .form-check-input:checked {
  background-color: var(--bs-primary, #8b96ac) !important; /* Lighter primary in dark mode */
}

/* Small toggle switches - standalone modifier class */
/* Use .form-switch-sm for smaller toggles outside dropdowns */
.form-check.form-switch.form-switch-sm {
  margin-bottom: 0;
  gap: 0.25rem;
}
.form-check.form-switch.form-switch-sm .form-check-input {
  /* Smaller size - 60% of default */
  width: 1.8rem !important;
  height: 1.05rem !important;
}
.form-check.form-switch.form-switch-sm .form-check-input::after {
  width: 0.9rem;
  height: 0.9rem;
  top: 0.075rem;
  left: 0.075rem;
}
.form-check.form-switch.form-switch-sm .form-check-input:checked::after {
  transform: translateX(0.75rem);
}
.form-check.form-switch.form-switch-sm {
  /* RTL support for smaller toggles */
}
[dir=rtl] .form-check.form-switch.form-switch-sm .form-check-input::after {
  left: auto;
  right: 0.075rem;
}
[dir=rtl] .form-check.form-switch.form-switch-sm .form-check-input:checked::after {
  transform: translateX(-0.75rem);
}

/* Small toggle switches for dropdown items */
/* Smaller size with toggle AFTER text (at the end) */
.dropdown-item .form-check.form-switch {
  margin-bottom: 0; /* Remove bottom margin in dropdown items */
  padding: 0; /* Remove padding to let dropdown-item handle spacing */
  gap: 0.25rem; /* Reduced gap between toggle and text (from 0.5rem) */
  width: 100%; /* Full width to allow proper spacing */
  justify-content: space-between !important; /* Toggle at opposite end from text */
}
.dropdown-item .form-check.form-switch .form-check-label {
  flex: 1; /* Label takes remaining space */
  order: 1 !important; /* Label appears first (at start) */
}
.dropdown-item .form-check.form-switch .form-check-input {
  /* Smaller size for dropdown menus - 60% of default */
  width: 1.8rem !important; /* 3rem * 0.6 */
  height: 1.05rem !important; /* 1.75rem * 0.6 */
  flex-shrink: 0; /* Don't shrink the toggle */
  order: 2 !important; /* Toggle appears last (at end) */
}
.dropdown-item .form-check.form-switch .form-check-input::after {
  /* Smaller handle - 60% of default */
  width: 0.9rem; /* 1.5rem * 0.6 */
  height: 0.9rem; /* 1.5rem * 0.6 */
  top: 0.075rem; /* 0.125rem * 0.6 */
  left: 0.075rem; /* 0.125rem * 0.6 */
}
.dropdown-item .form-check.form-switch .form-check-input:checked::after {
  /* Adjusted movement for smaller size */
  transform: translateX(0.75rem); /* 1.25rem * 0.6 */
}
.dropdown-item .form-check.form-switch {
  /* RTL support for smaller toggles - toggle stays at end (left side in RTL) */
}
[dir=rtl] .dropdown-item .form-check.form-switch .form-check-label {
  order: 1 !important; /* Label appears first (at right side in RTL) */
}
[dir=rtl] .dropdown-item .form-check.form-switch .form-check-input {
  order: 2 !important; /* Toggle appears last (at left side in RTL) */
}
[dir=rtl] .dropdown-item .form-check.form-switch .form-check-input::after {
  left: auto;
  right: 0.075rem; /* 0.125rem * 0.6 */
}
[dir=rtl] .dropdown-item .form-check.form-switch .form-check-input:checked::after {
  transform: translateX(-0.75rem); /* -1.25rem * 0.6 */
}

/* Cursor utilities (Bootstrap 5 doesn't include these by default) */
.cursor-pointer {
  cursor: pointer !important;
}

.text-on-dark-secondary {
  color: var(--bs-dark-secondary-text) !important;
}

.text-on-dark-secondary-muted {
  color: var(--bs-dark-secondary-text-muted) !important;
}

.bg-contrast {
  background-color: var(--bs-contrast-bg) !important;
}

/* Floating Action Button (FAB) Styles */
/* Note: Positioning for .fab-button is handled in data_tables.scss */
/* This file only contains visual/interaction styles */
.fab-button {
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}
.fab-button:active {
  transform: scale(0.95);
}
.fab-button i {
  line-height: 1;
}
.fab-button .fab-tooltip-text {
  display: none;
}

/* Material Design Speed Dial FAB */
.fab-speed-dial {
  position: relative;
  display: inline-block;
}
.fab-speed-dial .fab-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1010;
  pointer-events: none;
}
.fab-speed-dial .fab-menu-items {
  position: fixed;
  bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px) + var(--data-table-footer-height) + 1rem + 56px + 24px);
  right: 1.5rem;
  transform: translateX(calc(-50% + 28px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 1056;
  transition: bottom var(--sidebar-transition, 300ms ease-in-out);
}
.fab-speed-dial .fab-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: scale(0) translateY(20px);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}
.fab-speed-dial .fab-menu-item[data-index="0"] {
  transition-delay: 0s;
}
.fab-speed-dial .fab-menu-item[data-index="1"] {
  transition-delay: 0.05s;
}
.fab-speed-dial .fab-menu-item[data-index="2"] {
  transition-delay: 0.1s;
}
.fab-speed-dial .fab-menu-item[data-index="3"] {
  transition-delay: 0.15s;
}
.fab-speed-dial .fab-menu-item[data-index="4"] {
  transition-delay: 0.2s;
}
.fab-speed-dial .fab-menu-item[data-index="5"] {
  transition-delay: 0.25s;
}
.fab-speed-dial .fab-menu-item[data-index="6"] {
  transition-delay: 0.3s;
}
.fab-speed-dial .fab-menu-item[data-index="7"] {
  transition-delay: 0.35s;
}
.fab-speed-dial .fab-menu-item[data-index="8"] {
  transition-delay: 0.4s;
}
.fab-speed-dial .fab-menu-item[data-index="9"] {
  transition-delay: 0.45s;
}
.fab-speed-dial .fab-menu-item[data-index="10"] {
  transition-delay: 0.5s;
}
.fab-speed-dial .fab-mini-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--bs-body-color);
  text-decoration: none;
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
}
.fab-speed-dial .fab-mini-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: var(--bs-body-color);
}
.fab-speed-dial .fab-mini-button i {
  line-height: 1;
}
.fab-speed-dial .fab-label {
  position: absolute;
  right: 52px;
  font-size: 14px;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  transition: font-weight 0.2s ease, transform 0.2s ease;
  font-weight: normal;
  color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  padding: 4px 12px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--bs-border-color);
}
.fab-speed-dial .fab-menu-item {
  position: relative;
}
.fab-speed-dial .fab-menu-item:hover .fab-label {
  font-weight: 600;
  color: var(--bs-body-color);
  transform: translateY(-50%) translateX(0);
}
.fab-speed-dial .fab-main-icon,
.fab-speed-dial .fab-close-icon {
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.fab-speed-dial .fab-close-icon {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
}
.fab-speed-dial.fab-open .fab-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fab-speed-dial.fab-open .fab-menu-item {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.fab-speed-dial.fab-open .fab-main-icon {
  transform: rotate(90deg);
  opacity: 0;
}
.fab-speed-dial.fab-open .fab-close-icon {
  transform: rotate(0deg);
  opacity: 1;
}

body:not(:has(.data-table-footer)) .fab-speed-dial .fab-menu-items {
  bottom: calc(var(--footer-height, 1.3rem) + var(--report-status-overlay-height, 0px) + 1rem + 56px + 24px);
}

[dir=rtl] .fab-button {
  right: auto;
  left: 24px;
}
[dir=rtl] .fab-speed-dial .fab-menu-items {
  right: auto;
  left: 1.5rem;
  transform: translateX(calc(-50% + 28px));
}
[dir=rtl] .fab-speed-dial .fab-label {
  right: auto;
  left: 52px;
  transform: translateY(-50%) translateX(-4px);
}
[dir=rtl] .fab-speed-dial .fab-menu-item:hover .fab-label {
  transform: translateY(-50%) translateX(0);
}

/* Modern OTP Input Styles */
.otp-input-container .otp-digit {
  width: 48px;
  height: 56px;
  font-size: 1.5rem;
  border-radius: 8px;
  border: 2px solid var(--bs-border-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-input-container .otp-digit:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  outline: none;
}
.otp-input-container .otp-digit::-moz-placeholder {
  color: transparent;
}
.otp-input-container .otp-digit::placeholder {
  color: transparent;
}
.otp-input-container .otp-digit::-webkit-outer-spin-button, .otp-input-container .otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-input-container .otp-digit[type=number] {
  -moz-appearance: textfield;
}

[dir=rtl] .otp-input-container .d-flex {
  flex-direction: row-reverse;
}

/* Email Content Preview - reset Bootstrap styles to match email rendering */
/* Adapts to light/dark mode using Bootstrap CSS variables */
.email-content-preview {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
}
.email-content-preview h1, .email-content-preview h2, .email-content-preview h3, .email-content-preview h4, .email-content-preview h5, .email-content-preview h6 {
  color: var(--bs-body-color);
}
.email-content-preview h1 {
  font-size: 1.5em;
  margin: 0.5em 0;
  font-weight: 600;
}
.email-content-preview h2 {
  font-size: 1.25em;
  margin: 0.5em 0;
  font-weight: 600;
}
.email-content-preview h3 {
  font-size: 1.1em;
  margin: 0.5em 0;
  font-weight: 600;
}
.email-content-preview h4, .email-content-preview h5, .email-content-preview h6 {
  font-size: 1em;
  margin: 0.5em 0;
  font-weight: 600;
}
.email-content-preview p {
  margin: 0.5em 0;
  color: var(--bs-body-color);
}
.email-content-preview a {
  color: var(--bs-link-color);
  text-decoration: underline;
}
.email-content-preview table {
  border-collapse: collapse;
  color: var(--bs-body-color);
}
.email-content-preview table td, .email-content-preview table th {
  padding: 4px 8px;
  color: var(--bs-body-color);
}
.email-content-preview [style*=color] {
  color: var(--bs-body-color) !important;
}
.email-content-preview [style*=background] {
  background-color: transparent !important;
}
.email-content-preview ul, .email-content-preview ol {
  margin: 0.5em 0;
  padding-right: 1.5em;
  padding-left: 0;
}
.email-content-preview img {
  max-width: 100%;
  height: auto;
}

.progress-circle-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circle {
  transform: rotate(-90deg);
}

.progress-circle-bg {
  fill: none;
  stroke: var(--bs-secondary-bg);
  stroke-width: 3;
}

.progress-circle-progress {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.progress-circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.progress-circle-on-dark .progress-circle-bg {
  stroke: rgba(255, 255, 255, 0.2);
}
.progress-circle-on-dark .progress-circle-text {
  color: white;
}
.progress-circle-on-dark .text-success {
  color: #6bdf6b !important;
}
.progress-circle-on-dark .text-warning {
  color: #ffc107 !important;
}
.progress-circle-on-dark .text-danger {
  color: #ff6b6b !important;
}

.progress-circle-on-light .progress-circle-bg {
  stroke: #dee2e6;
}
[data-bs-theme=dark] .progress-circle-on-light .progress-circle-bg {
  stroke: rgba(255, 255, 255, 0.15);
}

[data-bs-theme=light] .modal .table-light, :root:not([data-bs-theme=dark]) .modal .table-light {
  --bs-table-bg: #fafbfc;
  --bs-table-hover-bg: #ffffff;
}
[data-bs-theme=light] .modal .table-info, :root:not([data-bs-theme=dark]) .modal .table-info {
  --bs-table-hover-bg: #cff4fc;
}

[data-bs-theme=dark] .modal .table-warning {
  --bs-table-bg: rgba(255, 193, 7, 0.15);
  --bs-table-border-color: rgba(255, 193, 7, 0.3);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255, 193, 7, 0.25);
  --bs-table-hover-color: var(--bs-body-color);
}
[data-bs-theme=dark] .modal .table-success {
  --bs-table-bg: rgba(25, 135, 84, 0.15);
  --bs-table-border-color: rgba(25, 135, 84, 0.3);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(25, 135, 84, 0.25);
  --bs-table-hover-color: var(--bs-body-color);
}
[data-bs-theme=dark] .modal .table-info {
  --bs-table-bg: rgba(13, 202, 240, 0.15);
  --bs-table-border-color: rgba(13, 202, 240, 0.3);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(13, 202, 240, 0.25);
  --bs-table-hover-color: var(--bs-body-color);
}
[data-bs-theme=dark] .modal .table-light {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--bs-body-color);
}
[data-bs-theme=dark] .modal .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] .modal .table th, [data-bs-theme=dark] .modal .table td {
  color: var(--bs-body-color);
}

.min-width-0 {
  min-width: 0;
}

select.is-invalid {
  background-image: none !important;
  padding-right: inherit !important;
}

.photo-rot-wrap {
  display: inline-block;
}
.photo-rot-wrap > img {
  transform-origin: center center;
}

@media (min-width: 992px) {
  .col-form-label-std {
    flex: 0 0 auto;
    width: 40%;
  }
  .col-form-input-std {
    flex: 0 0 auto;
    width: 60%;
  }
}
.ts-wrapper.is-invalid {
  border-color: var(--bs-danger) !important;
  border-radius: var(--bs-border-radius);
}

.calendar-cell-outside {
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.08) !important;
}

.calendar-cell-past {
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.04) !important;
}

.calendar-cell-today {
  background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

.calendar-add-control {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.calendar-cell:hover .calendar-add-control {
  opacity: 1;
}

.calendar-badge-in-progress {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35) 4px, transparent 4px, transparent 8px);
}

.calendar-badge-incomplete {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 35%, transparent) 0, color-mix(in srgb, currentColor 35%, transparent) 1px, transparent 1px, transparent 7px);
}

#calendar-grid .badge {
  font-weight: 700;
}

.bg-score-orange {
  background-color: #fd7e14 !important;
  color: #fff !important;
}

.text-score-orange {
  color: #fd7e14 !important;
}

.border-score-orange {
  border-color: #fd7e14 !important;
}

.tippy-box[data-theme~=control-summary-tip] {
  max-width: 22rem !important;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
  border-radius: 0.5rem;
}
.tippy-box[data-theme~=control-summary-tip] > .tippy-svg-arrow {
  fill: var(--bs-body-bg);
}
.tippy-box[data-theme~=control-summary-tip] > .tippy-arrow {
  color: var(--bs-body-bg);
}
.tippy-box[data-theme~=control-summary-tip] .tippy-content {
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip {
  text-align: start;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-code {
  font-size: 0.72rem;
  color: var(--bs-tertiary-color, #6c757d);
  background: var(--bs-tertiary-bg, #f1f3f5);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-sub {
  font-size: 0.78rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.15rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-meta {
  font-size: 0.78rem;
  color: var(--bs-secondary-color, #6c757d);
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.05rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-score-pct {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-score-sep {
  color: var(--bs-tertiary-color, #adb5bd);
  font-size: 1rem;
  line-height: 1.1;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-score-flag {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-score-flag .fa-flag {
  margin-inline-end: 0.15rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip-summary {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--bs-border-color, #dee2e6);
  white-space: pre-wrap;
  color: var(--bs-body-color, #212529);
  font-size: 0.78rem;
}
.tippy-box[data-theme~=control-summary-tip] .control-tip > .control-tip-summary:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.table-control-form {
  border-collapse: collapse;
}
.table-control-form th, .table-control-form td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--bs-border-color);
}
.table-control-form thead th {
  border-bottom: 2px solid var(--bs-border-color);
}
.table-control-form th:first-child,
.table-control-form td:first-child {
  padding-inline-start: 1rem;
}
.table-control-form th:last-child,
.table-control-form td:last-child {
  padding-inline-end: 1rem;
}

body.control-fullscreen .app-topbar,
body.control-fullscreen .app-sidebar,
body.control-fullscreen .sidebar-toggle-btn,
body.control-fullscreen .app-secondary-sidebar,
body.control-fullscreen .secondary-sidebar-mobile,
body.control-fullscreen #flash-container,
body.control-fullscreen footer.footer {
  display: none !important;
}
body.control-fullscreen .main-content-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.control-fullscreen .container-fluid {
  padding: 0 !important;
}
body.control-fullscreen #reportStatuses {
  margin-inline-start: 0 !important;
  width: 100% !important;
}
body.control-fullscreen .card {
  overflow: visible !important;
}

.control-perform-cards .card {
  overflow: visible !important;
}

.main-content-wrapper:has(.control-perform-cards) {
  overflow: visible !important;
}

.control-perform-cards .card-header.sticky-top {
  top: 76px;
  box-shadow: 0 -20px 0 0 var(--bs-body-bg);
}

.control-perform-cards .section-header-sticky {
  top: 132px;
}

.control-fullscreen .control-perform-cards .card-header.sticky-top {
  top: 0;
}

.control-fullscreen .control-perform-cards .section-header-sticky {
  top: 56px;
}

.score-section-chevron {
  transition: transform 0.2s ease;
}

[data-bs-toggle=collapse][data-bs-target^="#score-section-"] {
  cursor: pointer;
}
[data-bs-toggle=collapse][data-bs-target^="#score-section-"][aria-expanded=true] .score-section-chevron {
  transform: rotate(90deg);
}

/* Empty-required indicator badge — JS injects an <i.score-empty-badge>
   element next to the upload button on photo/file wrappers marked
   .is-invalid.score-empty. Drawn as a small outlined red circle with an
   exclamation mark inside (no FontAwesome dependency, sits inline with
   the button). */
.score-empty-badge {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3crect x='5.4' y='2.6' width='1.2' height='4.4' rx='.5' fill='%23dc3545' stroke='none'/%3e%3ccircle cx='6' cy='8.7' r='.9' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Slider field — hide the browser's default spinner arrows on the
   number input half. The range slider is the discoverable way to change
   the value; typing is the precise way. Native arrows clutter the small
   value display and fight the slider visually. */
.slider-field [data-slider-field-target=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.slider-field [data-slider-field-target=number]::-webkit-outer-spin-button,
.slider-field [data-slider-field-target=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Slider field — required-empty visual. Red outline on the input so the
   missing-required state reads at a glance without flooding the row
   with color. No fill tint; the "—" placeholder itself picks up the
   danger color for extra contrast. */
.slider-field.score-empty [data-slider-field-target=number] {
  border-color: var(--bs-danger, #dc3545) !important;
}

.slider-field.score-empty [data-slider-field-target=number]::-moz-placeholder {
  color: var(--bs-danger, #dc3545);
  opacity: 1;
}

.slider-field.score-empty [data-slider-field-target=number]::placeholder {
  color: var(--bs-danger, #dc3545);
  opacity: 1;
}

/* Floating "jump to first missing required field" button on control
   pages. Icon-only circle pinned at the bottom-end of the viewport
   (RTL-aware via inset-inline-end). z-index sits above sticky section
   headers (90) and the sticky card header (100) but below modals /
   SweetAlert. control_score_controller toggles .d-none based on the
   live missing-required count; its arrow icon flips up/right/down to
   point toward the first missing field as the user scrolls. */
.control-missing-fab {
  inset-inline-end: 1.5rem;
  bottom: 3rem;
  z-index: 1040;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  line-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.control-missing-fab .fab-count {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

/* Non-critical fail-with-value decoration. Critical failures use
   Bootstrap's `is-invalid` (red) — they share the visual weight of the
   empty-required state because both are gating signals. Non-critical
   failures only affect the ratio score, so we paint them orange to
   distinguish them from "missing required" at a glance.

   Mirrors the Bootstrap `.is-invalid` rules but in $orange (#fd7e14,
   same shade used by .bg-score-orange / .text-score-orange) and without
   the trailing chevron icon. Selects fall through `select.is-invalid`'s
   icon-suppression rule above; we apply the same to score-warning. */
.score-warning {
  border-color: #fd7e14 !important;
}
.score-warning:focus {
  border-color: #fd7e14 !important;
  box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
}

select.score-warning {
  background-image: none !important;
  padding-right: inherit !important;
}

/* Critical-field flag indicator — hidden by default, revealed when the
   field is in any error state (missing-required `score-empty` OR
   failing `score-warning`). Whichever marker the score controller
   added, the flag should appear on critical fields.

   Border-radius gets tricky because the flag's display:none keeps it as
   :last-child in the DOM, so Bootstrap's :first-/:last-child corner
   rules don't match the *visible* end of the group. Three layouts to
   handle (described in RTL terms — mirror rules cover LTR):

     1. [input][flag-hidden]                — input is the only visible
        child. Restore all 4 corners so it doesn't look square on the
        end side.
     2. [input][clock-icon][flag-hidden]    — clock is the visual end.
        Input keeps its Bootstrap-default flat end (it abuts the clock);
        the clock needs its end-side rounded.
     3. [input][...][flag-visible]          — flag is both DOM and visual
        end; Bootstrap's defaults are already correct, no override.

   The `[dir="rtl"]`/`[dir="ltr"]` prefixes are needed to beat the
   specificity of the existing rtl_fixes input-group corner overrides. */
.critical-flag-indicator {
  display: none;
  /* Override the slim templates' Bootstrap `bg-danger-subtle` (light red
     tint) with a light orange tint so the surrounding background matches
     the orange failing-state outline. The flag glyph itself stays red
     (via the template's `.text-danger`) — the contrast is what makes
     "critical issue" pop against the orange context. */
  background-color: rgba(253, 126, 20, 0.2) !important;
}

.input-group :is(.score-empty, .score-warning) ~ .critical-flag-indicator {
  display: flex;
}

/* Layout 1: no clock-icon append, flag hidden — input becomes the only
   visible child, round all 4 corners. The :not(:has(.input-group-text:not(.critical-flag-indicator)))
   excludes input-groups that have a non-flag append (clock, calendar). */
[dir=rtl] .input-group:not(:has(.score-empty, .score-warning)):not(:has(.input-group-text:not(.critical-flag-indicator))) > .form-control,
[dir=rtl] .input-group:not(:has(.score-empty, .score-warning)):not(:has(.input-group-text:not(.critical-flag-indicator))) > .form-select,
[dir=ltr] .input-group:not(:has(.score-empty, .score-warning)):not(:has(.input-group-text:not(.critical-flag-indicator))) > .form-control,
[dir=ltr] .input-group:not(:has(.score-empty, .score-warning)):not(:has(.input-group-text:not(.critical-flag-indicator))) > .form-select {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

/* Layout 2: clock-icon present, flag VISIBLE — clock becomes a true
   middle element. rtl_fixes.scss rounds the end-side (left in RTL,
   right in LTR) of every :not(:first-child), which is correct when the
   clock is the visual end (flag hidden) but wrong once the flag appears
   right next to it. Flatten the end-side so the clock doesn't curve
   into the flag. The :has(.score-empty, .score-warning) gate makes
   this kick in only when the flag is actually visible.
   :nth-last-child(2) targets the clock (the flag follows as :last-child).

   No matching layout is needed for "flag hidden" — rtl_fixes' default
   already rounds the clock's end-side correctly (it acts as the visual
   last child when the flag is display:none).

   No LTR rule is needed at all — Bootstrap's LTR defaults flatten both
   sides of middle elements out of the box, so the clock is already
   correct in LTR for both flag-hidden and flag-visible cases. */
[dir=rtl] .input-group:has(.score-empty, .score-warning) > .input-group-text:not(.critical-flag-indicator):nth-last-child(2) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

turbo-frame#control_form_body {
  display: block;
  position: relative;
  min-height: 200px;
}
turbo-frame#control_form_body[aria-busy=true]::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: control-form-loading-slide 1.1s ease-in-out infinite;
  pointer-events: none;
}
turbo-frame#control_form_body[aria-busy=true] {
  pointer-events: none;
}

@keyframes control-form-loading-slide {
  0% {
    background-position: -40% 0;
  }
  100% {
    background-position: 140% 0;
  }
}
.control-form-skeleton {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.control-form-skeleton .skeleton-block {
  display: block;
  height: 1rem;
  border-radius: var(--bs-border-radius-sm);
  background-color: var(--bs-secondary-bg);
  opacity: 0.65;
  animation: control-form-skeleton-pulse 1.6s ease-in-out infinite;
}
.control-form-skeleton .skeleton-block--header {
  height: 1.25rem;
  width: 40%;
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.18);
}
.control-form-skeleton .skeleton-block--short {
  width: 60%;
}
.control-form-skeleton .skeleton-block--tall {
  height: 4.5rem;
}

@keyframes control-form-skeleton-pulse {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.65;
  }
}
textarea[data-controller~=autogrow] {
  resize: none;
  overflow: hidden;
}

.control-perform-cards.control-edit-locked .card-body {
  opacity: 0.6;
}
.control-perform-cards.control-edit-locked a,
.control-perform-cards.control-edit-locked button {
  pointer-events: none !important;
  cursor: not-allowed;
  opacity: 0.6;
}
.control-perform-cards.control-edit-locked [data-control-presence-target=banner],
.control-perform-cards.control-edit-locked [data-control-presence-target=banner] *,
.control-perform-cards.control-edit-locked [data-control-presence-target=banner] a,
.control-perform-cards.control-edit-locked [data-control-presence-target=banner] button {
  pointer-events: auto !important;
  cursor: pointer;
  opacity: 1;
}

.stale-overwrite-highlight {
  animation: stale-overwrite-pulse 1.6s ease-in-out 0s 2;
  background-color: #fff3cd !important;
}

@keyframes stale-overwrite-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.45);
  }
}
.bg-overview {
  background-color: #6f42c1 !important;
}

.bg-feeding-visit {
  background-color: #14b8a6 !important;
}

.ai-data-field-trigger {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.4rem;
  z-index: 4;
  border: 0;
  background: transparent;
  color: var(--bs-primary, #0d6efd);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.ai-data-field-trigger:hover {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  color: var(--bs-primary-text-emphasis, #052c65);
}

.ai-data-field-trigger:disabled {
  color: var(--bs-secondary-color, #6c757d);
  background: transparent;
  cursor: wait;
  opacity: 0.55;
}

.ai-data-field-textarea {
  padding-inline-end: 2.25rem;
}

.ai-data-field-copy {
  position: absolute;
  bottom: 0.25rem;
  inset-inline-end: 0.4rem;
  z-index: 4;
}

.ai-data-field-refine {
  display: none;
}

.ai-data-field-refine.is-active {
  display: block;
}

.ai-data-field-drafting {
  display: none;
}

.ai-data-field.is-streaming .ai-data-field-trigger,
.ai-data-field.is-streaming .ai-data-field-textarea,
.ai-data-field.is-streaming .ai-data-field-copy,
.ai-data-field.is-streaming .ai-data-field-refine {
  display: none !important;
}
.ai-data-field.is-streaming .ai-data-field-drafting {
  display: block;
  position: relative;
  min-height: 8.25rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
}

.ai-data-field-drafting-label {
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
}

.ai-data-field-drafting-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-info, #0dcaf0);
  animation: ai-generation-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.ai-data-field-drafting-text {
  padding: 2rem 0.75rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bs-body-color, #212529);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-data-field-drafting.has-content .ai-data-field-drafting-label {
  display: none;
}
.ai-data-field-drafting.has-content .ai-data-field-drafting-text {
  padding-top: 0.75rem;
}

/* AI Chat Assistant (display name in ai_chat.title) — full-page, ChatGPT-style layout */
.ai-chat-page {
  display: flex;
  flex-direction: column;
  /* Chrome accounted for: navbar (~56px) + footer (~36px) + container py-3
     (32px) ≈ 7.5rem. Use dvh so mobile UI bars don't push the composer
     below the viewport. */
  height: calc(100dvh - 7.5rem);
  max-width: 56rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--bs-body-color);
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.ai-chat-dev-override {
  /* Compact developer affordance for switching provider / model per
     thread. Lives under the composer (alongside the new-conversation
     footer); border-top separates it from the input field above.
     Folded by default; expands to reveal selects + buttons. */
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--bs-border-color);
}
.ai-chat-dev-override summary {
  cursor: pointer;
  line-height: 1.4;
}
.ai-chat-dev-override[open] summary {
  margin-bottom: 0.25rem;
}

.ai-chat-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  flex-grow: 1;
}

.ai-chat-status {
  font-size: 0.85rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  min-width: 6rem;
  text-align: end;
}

.ai-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-chat-message-row {
  display: flex;
  width: 100%;
}

/* Both bubbles span full width — ChatGPT-style. The role-label distinguishes
   user from assistant, not alignment. */
.ai-chat-bubble {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border-radius: 0.625rem;
  line-height: 1.6;
  word-break: break-word;
  border: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-chat-bubble-user {
  background: var(--bs-tertiary-bg, #f1f3f5);
}

.ai-chat-bubble-assistant {
  background: var(--bs-form-bg);
}

.ai-chat-role-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, var(--bs-secondary));
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-chat-role-label .fas {
  font-size: 0.85rem;
}

.ai-chat-content {
  font-size: 0.95rem;
}

/* Comfortable reading rhythm — markdown paragraphs separated enough to
   scan, but not so much that one bubble feels like several sections.
   Trim the first/last child so the bubble hugs its content. */
.ai-chat-content :where(p, ul, ol, table, pre, blockquote) {
  margin-top: 0;
  margin-bottom: 0.65em;
}

.ai-chat-content :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.85em;
  margin-bottom: 0.4em;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.ai-chat-content > :first-child {
  margin-top: 0;
}

.ai-chat-content > :last-child {
  margin-bottom: 0;
}

.ai-chat-content li {
  margin-bottom: 0.2em;
}

.ai-chat-content code {
  background: var(--bs-tertiary-bg);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

.ai-chat-content pre {
  background: var(--bs-tertiary-bg);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.ai-chat-content pre code {
  background: transparent;
  padding: 0;
}

.ai-chat-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.ai-chat-content th,
.ai-chat-content td {
  border: 1px solid var(--bs-border-color);
  padding: 0.4rem 0.6rem;
  text-align: start;
}

.ai-chat-content thead th {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  font-weight: 600;
}

.ai-chat-content tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

.ai-chat-content blockquote {
  border-inline-start: 3px solid var(--bs-border-color);
  padding-inline-start: 0.75rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
}

/* Tool-status pills are rendered in DEV-only audit modes; the default
   chat surface hides them. The CSS lives here in case we re-enable. */
.ai-chat-tool-pills {
  display: none;
}

/* Live progress wrapper: dot first (line-leading), faded plain-text
   status trailing. Sourced from each thinking block's STATUS: line so
   the user sees "מחפש נתונים…" / "סופר מוסדות ייחודיים…" updating
   live instead of dead air or leaked technical reasoning. No pill,
   no border — the text inherits the bubble's typographic line. */
.ai-chat-progress {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  vertical-align: baseline;
  margin-inline-start: 0.35rem;
}

.ai-chat-progress.d-none {
  display: none;
}

.ai-chat-status-text {
  display: inline;
  color: var(--bs-secondary-color, var(--bs-secondary));
  opacity: 0.7;
  font-style: italic;
  font-size: 0.92em;
  max-width: 28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease;
}

.ai-chat-status-text.d-none {
  display: none;
}

/* Auto-append "…" unless the model's text already ends in trailing
   ellipsis or sentence-ending punctuation. */
.ai-chat-status-text:not(:empty)[data-ends-with-punctuation=false]::after {
  content: "…";
}

/* Pulsing dot pinned to the trailing edge of the active assistant
   bubble for the entire duration of the turn. Pure CSS, inline so it
   sits at the end of streaming text like a typewriter cursor. */
.ai-chat-thinking {
  display: inline-block;
  vertical-align: baseline;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bs-primary);
  animation: aiChatPulse 1.1s ease-in-out infinite;
  transform-origin: center;
}

.ai-chat-thinking.d-none {
  display: none;
}

@keyframes aiChatPulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.35;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.ai-chat-copy-btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  text-decoration: none;
}

.ai-chat-copy-btn:hover {
  color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

/* Row of secondary actions (copy + feedback) rendered at the end of an
   assistant bubble. Lives inside the bubble so it scrolls with the
   message. The thumb buttons mirror the copy button's affordance. */
.ai-chat-message-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  align-self: flex-end;
}

.ai-chat-message-feedback {
  display: inline-flex;
  gap: 0.1rem;
}

.ai-chat-feedback-btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  text-decoration: none;
}

.ai-chat-feedback-btn:hover {
  color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.ai-chat-feedback-btn[data-ai-chat-feedback-target=up].active {
  color: var(--bs-success);
}

.ai-chat-feedback-btn[data-ai-chat-feedback-target=down].active {
  color: var(--bs-danger);
}

.ai-chat-report-card {
  font-size: 0.9rem;
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color) !important;
}

/* Thinking blocks: model's internal reasoning, shown dim & collapsible
   so the user can ignore them by default and expand to peek. */
.ai-chat-thinking-block {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  border-inline-start: 2px solid var(--bs-border-color);
  padding-inline-start: 0.6rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
}

.ai-chat-thinking-toggle {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.85;
}

.ai-chat-thinking-toggle:hover {
  opacity: 1;
}

.ai-chat-thinking-body {
  margin-top: 0.3rem;
  white-space: pre-wrap;
  font-style: italic;
  line-height: 1.5;
  display: none;
  direction: ltr;
  text-align: left;
}

.ai-chat-thinking-block.ai-chat-thinking-block-open .ai-chat-thinking-body {
  display: block;
}

.ai-chat-empty {
  text-align: center;
  margin: auto;
  color: var(--bs-secondary-color, var(--bs-secondary));
}

.ai-chat-empty-icon {
  font-size: 3rem;
  opacity: 0.25;
  margin-bottom: 1rem;
}

.ai-chat-empty-title {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: var(--bs-body-color);
}

.ai-chat-empty-subtitle {
  font-size: 0.9rem;
}

.ai-chat-empty-divider {
  width: 4rem;
  margin: 1.25rem auto 0.75rem;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
  opacity: 1;
}

.ai-chat-resume-previous-form {
  margin: 0;
}

.ai-chat-resume-previous-btn {
  font-size: 0.9rem;
  padding: 0;
  text-decoration: none;
  color: var(--bs-secondary-color, var(--bs-secondary));
  line-height: 1.4;
}

.ai-chat-resume-previous-btn:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Composer pinned at the bottom */
.ai-chat-composer-wrap {
  flex: 0 0 auto;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.ai-chat-composer {
  width: 100%;
}

.ai-chat-composer-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.ai-chat-textarea {
  resize: none;
  min-height: 2.75rem;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  line-height: 1.45;
  background: var(--bs-form-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.ai-chat-textarea:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.ai-chat-send-btn,
.ai-chat-stop-btn {
  border-radius: 0.625rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Footer row beneath the composer: hint on the trailing edge (right
   in RTL), "שיחה חדשה" link on the leading edge (left in RTL). Both
   share the same baseline so they read as a single utility strip. */
.ai-chat-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  gap: 0.5rem;
}

.ai-chat-composer-hint {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  text-align: end;
}

.ai-chat-new-conversation-form {
  margin: 0;
}

.ai-chat-new-conversation-btn {
  font-size: 0.75rem;
  padding: 0;
  text-decoration: none;
  color: var(--bs-secondary-color, var(--bs-secondary));
  line-height: 1;
}

.ai-chat-new-conversation-btn:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Queued messages — muted styling so the user understands they're not
   yet sent. The remove button (✕) sits at the trailing edge. */
.ai-chat-bubble-queued {
  opacity: 0.65;
  border: 1px dashed var(--bs-border-color);
  position: relative;
}

.ai-chat-queued-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  font-weight: 500;
}

.ai-chat-queue-remove {
  position: absolute;
  top: 0.25rem;
  inset-inline-end: 0.25rem;
  padding: 0.1rem 0.35rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  text-decoration: none;
  line-height: 1;
}

.ai-chat-queue-remove:hover {
  color: var(--bs-danger);
}

/* API / provider error notice. Rendered outside the message-bubble
   flow so users can tell at a glance that this is system feedback,
   not part of the conversation. Same look for live (showError) and
   historical (server-rendered _message.slim) errors. */
.ai-chat-error-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.15));
  border: 1px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.4));
  color: var(--bs-warning-text-emphasis, #664d03);
  font-size: 0.9rem;
}

.ai-chat-error-row > i {
  flex-shrink: 0;
  color: var(--bs-warning, #ffc107);
}

.ai-chat-error-row > span {
  flex-grow: 1;
}

.ai-chat-error-dismiss {
  flex-shrink: 0;
  padding: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

.ai-chat-error-dismiss:hover {
  opacity: 1;
}

[data-bs-theme=dark] .ai-chat-error-row {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
  color: rgba(255, 220, 130, 0.95);
}

/* Inline notice INSIDE an assistant bubble — used when a turn was
   cancelled (or errored) after some content had streamed. Same info-
   block visual language as .ai-chat-error-row but tucked into the
   bottom of the bubble instead of standing on its own. */
.ai-chat-inline-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.625rem;
  border-radius: 0.4rem;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color, var(--bs-secondary));
  font-size: 0.8rem;
  font-style: italic;
}

.ai-chat-inline-notice > i {
  flex-shrink: 0;
  color: var(--bs-secondary-color, var(--bs-secondary));
}

[data-bs-theme=dark] .ai-chat-inline-notice {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

/* Dark-mode tweaks: Bootstrap variables already give us correct
   bg/border/text in dark mode — we just need a slightly lighter
   user bubble to keep separation from the surrounding background. */
[data-bs-theme=dark] .ai-chat-bubble-user {
  background: rgba(255, 255, 255, 0.03);
}

/* Assistant bubble background is var(--bs-form-bg), which already
   resolves correctly per theme (white in light, #3a3f44 in dark) — no
   dark-mode override needed. */
[data-bs-theme=dark] .ai-chat-tool-pill,
[data-bs-theme=dark] .ai-chat-report-card,
[data-bs-theme=dark] .ai-chat-content code,
[data-bs-theme=dark] .ai-chat-content pre {
  background: rgba(255, 255, 255, 0.06);
}

/* Markdown tables in dark mode: explicit header bg + alternating row
   tint, since the default --bs-secondary-bg resolves to a near-white
   shade against the dark bubble. */
[data-bs-theme=dark] .ai-chat-content thead th {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .ai-chat-content tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

/* =======================================================================
   AI chat sidebar (chat history panel)

   Uses Bootstrap's `offcanvas-md` responsive helper: at md+ the panel
   renders inline as a fixed-position desktop sidebar; below md it
   becomes a slide-in drawer triggered by the mobile toolbar's history
   button. Desktop positioning lives inside a min-width media query so
   we don't fight Bootstrap's offcanvas rules at the mobile breakpoint.
   ======================================================================= */
@media (min-width: 768px) {
  .app-ai-chat-sidebar {
    width: var(--secondary-sidebar-width-wide);
    position: fixed;
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    z-index: 1015;
    background-color: var(--bs-secondary-sidebar-bg);
    overflow-x: hidden;
    border-left: 1px solid var(--bs-border-color);
    display: flex !important; /* override .d-none from base secondary-sidebar markup */
    /* RTL: sidebar sits on the right after the main sidebar. */
  }
  [dir=rtl] .app-ai-chat-sidebar {
    right: var(--sidebar-width-expanded);
    left: auto;
    border-left: none;
    border-right: 1px solid var(--bs-border-color);
  }
  .app-ai-chat-sidebar {
    /* LTR: after main sidebar on the left. */
  }
  .app-ai-chat-sidebar:not([dir=rtl]) {
    left: var(--sidebar-width-expanded);
  }
  .app-ai-chat-sidebar.main-sidebar-collapsed {
    left: var(--sidebar-width-collapsed);
  }
  [dir=rtl] .app-ai-chat-sidebar.main-sidebar-collapsed {
    right: var(--sidebar-width-collapsed);
    left: auto;
  }
}
/* Mobile: Bootstrap offcanvas-md owns ALL positioning, transform, and
   visibility below md. We must undo every layout property set by the
   base .app-secondary-sidebar rule (right/left/top/height/z-index) so
   Bootstrap's offcanvas rules take full control of the drawer geometry.

   Without these resets the base rule's `right: var(--sidebar-width-
   expanded)` (250 px) pushes the drawer 250 px from the right edge,
   leaving the panel mostly off-screen even when ".show" is active. */
@media (max-width: 767.98px) {
  .app-ai-chat-sidebar.offcanvas-md {
    /* Width: 85 vw feels natural on a phone; cap at 360 px so it never
       crowds the backdrop on wide phones (e.g. iPhone Plus/Max). */
    --bs-offcanvas-width: 85vw;
    max-width: 360px;
    /* Reset every positional property that the base .app-secondary-sidebar
       rule sets outside any media query. Without these, those values beat
       Bootstrap's offcanvas positioning and put the drawer off-screen. */
    position: fixed !important; /* Bootstrap offcanvas default */
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    height: 100% !important;
    /* Bootstrap controls z-index via --bs-offcanvas-zindex (default 1045),
       which is above both the topbar (1020) and the main sidebar (1030).
       Remove our lower override so the drawer sits on top. */
    z-index: var(--bs-offcanvas-zindex, 1045) !important;
    /* Remove the desktop border — Bootstrap's offcanvas has its own chrome. */
    border: none !important;
  }
  /* Defeat the base .app-secondary-sidebar { display: none !important }
     rule that hides all secondary sidebars on mobile, but only when
     Bootstrap has actively made this drawer visible. */
  .app-ai-chat-sidebar.offcanvas-md.showing,
  .app-ai-chat-sidebar.offcanvas-md.show {
    display: flex !important;
  }
}
.app-ai-chat-sidebar {
  /* Cross-breakpoint background tint. `!important` is required because
     Bootstrap's `.offcanvas-md` rule applies `background-color: transparent
     !important` at md+ (it expects the surrounding inline layout to
     supply the background). Without our own !important, the secondary-
     sidebar's main scrolling region inherits the body bg and the panel
     blends into the chat area. Same color used cross-breakpoint so the
     mobile drawer matches the desktop sidebar instead of switching to
     Bootstrap's default offcanvas body-bg. */
  background-color: var(--bs-secondary-sidebar-bg) !important;
  /* Cross-breakpoint: header chrome, scroll area, bucket headers. */
}
.app-ai-chat-sidebar .ai-chat-sidebar-header {
  background: var(--bs-secondary-sidebar-bg);
}
.app-ai-chat-sidebar .ai-chat-sidebar-nav {
  /* Override the secondary-nav-scroll default padding — bucket headers
     set their own top padding for visual rhythm. */
  padding-top: 0 !important;
}
.app-ai-chat-sidebar .ai-chat-sidebar-group-header {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.app-ai-chat-sidebar .ai-chat-sidebar-empty {
  margin-top: 2rem;
}
.app-ai-chat-sidebar {
  /* Lazy-loaded next-page placeholder — replaced in place by the
     server response once the turbo-frame's src loads. */
}
.app-ai-chat-sidebar .ai-chat-sidebar-page-placeholder {
  opacity: 0.6;
}

/* -----------------------------------------------------------------------
   Mobile floating controls — two fixed circles below the topbar,
   symmetrically pinned to opposite corners (d-md-none on both):

     LEFT  → FAB (+)       : start a new chat, filled primary circle
     RIGHT → History toggle: open the drawer, ghost circle + chevron-left
   ----------------------------------------------------------------------- */
/* Shared style for both mobile floating controls. Both buttons are
   ghost circles: body-bg fill, subtle border, muted icon. The + FAB
   and the chevron history toggle look identical so the pair reads as
   a matched set. */
.ai-chat-history-btn, .ai-chat-fab {
  position: fixed;
  top: calc(var(--topbar-height, 60px) + 0.75rem);
  /* 1018: below sidebar-backdrop (1019), topbar (1020), main sidebar
     (1030), and offcanvas (1045). The circles disappear behind both the
     dark overlay and the sidebar panel when either opens. */
  z-index: 1018;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--bs-border-color);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-size: 1rem;
  opacity: 0.8;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-chat-history-btn:hover, .ai-chat-fab:hover, .ai-chat-history-btn:focus-visible, .ai-chat-fab:focus-visible {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  outline: none;
}
.ai-chat-history-btn:active, .ai-chat-fab:active {
  transform: scale(0.95);
}

/* FAB: start a new chat — pinned top-left. */
.ai-chat-fab {
  left: 1rem;
}

/* button_to wraps in <form class="ai-chat-fab">. Reset block margin. */
form.ai-chat-fab {
  margin: 0;
}

/* History toggle: open the drawer — pinned top-right, mirror of FAB. */
.ai-chat-history-btn {
  right: 1rem;
  left: auto;
}

/* Drawer close button: replicates the main sidebar's fa-times btn-link.
   First in DOM → sits before "שיחות" in RTL flow (physically on the
   right, matching where the main sidebar's own X appears). */
.ai-chat-sidebar-close {
  line-height: 1;
  opacity: 0.75;
}
.ai-chat-sidebar-close:hover {
  opacity: 1;
}

/* On mobile the toolbar context is enough — the drawer close button
   and the FAB replace what the header title + status row provided.
   Hiding the header reclaims ~50 px for the messages scroll area. */
@media (max-width: 767.98px) {
  .ai-chat-header {
    display: none;
  }
}
/* Sidebar row — title, time, optional processing spinner, delete button.
   Layout is a flex row: the link grows, the delete button is a fixed-size
   trash icon that fades in on row hover. */
.ai-chat-sidebar-row {
  display: flex;
  align-items: stretch;
  position: relative;
  border-bottom: 1px solid var(--bs-border-color);
}
.ai-chat-sidebar-row:first-child {
  border-top: 1px solid var(--bs-border-color);
}
.ai-chat-sidebar-row:hover {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-bg) 90%, var(--bs-primary));
}
.ai-chat-sidebar-row.active {
  background-color: color-mix(in srgb, var(--bs-secondary-sidebar-bg) 80%, var(--bs-primary));
  border-left: 3px solid var(--bs-primary);
  padding-left: 0; /* link handles its own padding */
}
[dir=rtl] .ai-chat-sidebar-row.active {
  border-left: none;
  border-right: 3px solid var(--bs-primary);
}
.ai-chat-sidebar-row.active .ai-chat-sidebar-row-title {
  font-weight: 600;
}

.ai-chat-sidebar-row-link {
  flex: 1 1 auto;
  min-width: 0; /* lets the title truncate inside flex */
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--bs-body-color);
  text-decoration: none;
}
.ai-chat-sidebar-row-link:hover {
  color: var(--bs-primary);
}

.ai-chat-sidebar-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.92rem;
  line-height: 1.25;
  word-break: break-word;
}

.ai-chat-sidebar-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  opacity: 0.7;
}

.ai-chat-sidebar-row-processing i {
  color: var(--bs-primary);
}

.ai-chat-sidebar-row-delete {
  align-self: flex-start;
  margin: 0.4rem 0.25rem;
  padding: 0.25rem 0.4rem;
  color: var(--bs-secondary-color);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.ai-chat-sidebar-row-delete:hover {
  color: var(--bs-danger);
}
.ai-chat-sidebar-row-delete {
  /* The Rails button_to wrapper form interferes with flexbox spacing —
     reset it to a passive container. */
}
.ai-chat-sidebar-row-delete.ai-chat-sidebar-row-delete-form, .ai-chat-sidebar-row-delete form {
  margin: 0;
}

/* On devices with true hover capability (desktop, mouse-driven), reveal the
   trash icon only when the row is hovered or focused — keeps the resting
   state visually quiet.

   On touch devices (`hover: none`) the same `:hover` rule produces a
   double-tap navigation bug: the first tap arms the hover state (revealing
   the trash) and the second tap actually navigates. Solution: skip the
   reveal-on-hover entirely on touch and show the icon at a constant low
   opacity instead. The icon stays unobtrusive but tappable on the first try. */
@media (hover: hover) {
  .ai-chat-sidebar-row:hover .ai-chat-sidebar-row-delete,
  .ai-chat-sidebar-row:focus-within .ai-chat-sidebar-row-delete {
    opacity: 1;
  }
}
@media (hover: none) {
  .ai-chat-sidebar-row-delete {
    opacity: 0.55;
  }
}
/* button_to renders a wrapper <form>. Float the trash icon inside it
   without collapsing the row. */
.ai-chat-sidebar-row-delete-form {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

/* Developer-only toggle: when a developer flips off the "show dev panels"
   switch in the chat sidebar, hide both the inline override panel below
   the composer AND any "מחשבות" thinking blocks already rendered in the
   conversation. The body class is applied server-side on initial page
   load (from current_user.settings.ai_chat_show_dev_panels) and flipped
   client-side by ai_chat_controller.js#toggleDevPanels for instant
   feedback. Future thinking deltas are dropped in the JS short-circuit. */
body.ai-chat-hide-dev-panels .ai-chat-dev-override,
body.ai-chat-hide-dev-panels .ai-chat-thinking-block {
  display: none !important;
}

/* ===== AI Generation streaming target =====
   Sibling-of-chat surface (see docs/AI_GENERATION_SYSTEM.md). One target
   per generation thread; subscribed via ai-generation-stream Stimulus
   controller. Visual states: processing (subtle pulse), idle (settled),
   error (warning tint). */
.ai-generation-target {
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
  min-height: 2.5rem;
  transition: background 200ms ease, border-color 200ms ease;
}

.ai-generation-target.ai-generation-processing {
  background: var(--bs-info-bg-subtle, #cff4fc);
  border-color: var(--bs-info-border-subtle, #9eeaf9);
}

.ai-generation-target.ai-generation-processing::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.75rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-info, #0dcaf0);
  animation: ai-generation-pulse 1.2s ease-in-out infinite;
}

.ai-generation-target.ai-generation-error {
  background: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffe69c);
}

.ai-generation-status {
  font-style: italic;
}

.ai-generation-text:empty::before {
  content: attr(data-empty-placeholder);
  color: var(--bs-secondary, #6c757d);
}

@keyframes ai-generation-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
/* ===== Control AI summary — icon-only assistant trigger =====
   Sits in the top-end corner of the summary textarea. No outline, no
   label — just the brain icon. Tooltip carries the explanation.
   Logical positioning (inset-inline-end) so it lands on the visual
   right side in RTL Hebrew layout. */
.control-ai-summary-trigger {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.4rem;
  z-index: 4;
  border: 0;
  background: transparent;
  color: var(--bs-primary, #0d6efd);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.control-ai-summary-trigger:hover {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
  color: var(--bs-primary-text-emphasis, #052c65);
}

.control-ai-summary-trigger:disabled {
  color: var(--bs-secondary-color, #6c757d);
  background: transparent;
  cursor: wait;
  opacity: 0.55;
}

/* Make room for the floating trigger so streamed/typed text doesn't
   collide with the icon at the top of the field. */
.control-ai-summary-textarea {
  padding-inline-end: 2.25rem;
}

/* ===== Control AI summary — swap-while-streaming =====
   Two visual states on `.control-ai-summary-field`:
     1. default      → textarea + brain trigger visible; stream slot hidden.
     2. is-streaming → textarea + brain hidden; the stream slot
                       (placeholder at click, then turbo-stream-replaced
                       with the real ai_chat/_generation_target partial)
                       is visible in their place, so the user watches
                       tokens land live. On idle the controller mirrors
                       innerText into the textarea once and removes
                       `is-streaming` — back to default. */
.control-ai-summary-field {
  position: relative;
}

/* Slot is hidden until the controller enters the `is-streaming` state.
   Once streaming, the slot becomes the visible surface; textarea, brain
   trigger, and overlay all hide so the user sees the live tokens with
   no double-content. Min-height holds the layout so the field doesn't
   collapse to its content while waiting for the first delta — roughly
   matches the textarea at rows=5 (5 lines × 1.5 line-height + form
   padding ≈ 8.25rem). */
.control-ai-summary-field #control_ai_summary_target {
  display: none;
}

.control-ai-summary-field.is-streaming #control_ai_summary_target {
  display: block;
}
.control-ai-summary-field.is-streaming .ai-generation-target {
  min-height: 8.25rem;
  /* Neutral surface — the shared `.ai-generation-processing`
     background is a light blue (`--bs-info-bg-subtle`) tuned for
     admin / chat surfaces. In the control summary the streaming
     surface sits inline with form fields, so a tinted box looks
     like a status callout; neutralize to body-tertiary. */
  background: var(--bs-tertiary-bg, #f8f9fa) !important;
  border-color: var(--bs-border-color) !important;
}
.control-ai-summary-field.is-streaming {
  /* Hide the shared `::before` pulsing dot inside our streaming
     surface — we render our own dot inline alongside the drafting
     label below, so they read as a single visual unit. Without
     this, the shared dot sits abandoned in a corner of the box
     while the label floats elsewhere, looking disconnected. */
}
.control-ai-summary-field.is-streaming .ai-generation-target.ai-generation-processing::before {
  content: none !important;
}
.control-ai-summary-field.is-streaming {
  /* Drafting indicator — pulsing dot + "מנסח סיכום…" text rendered
     as one flex row, anchored at the inline-start top of the box.
     Removed by _syncDraftingLabel once tokens arrive in
     .ai-generation-text. Positioned absolutely so the streamed text
     below doesn't jump when the indicator appears/disappears. */
}
.control-ai-summary-field.is-streaming .control-ai-summary-drafting-label {
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
}
.control-ai-summary-field.is-streaming .control-ai-summary-drafting-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-info, #0dcaf0);
  animation: ai-generation-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.control-ai-summary-field.is-streaming .control-ai-summary-textarea,
.control-ai-summary-field.is-streaming .control-ai-summary-trigger {
  display: none !important;
}

/* Whole AI-summary block is hidden until the lazy #control_form_body
   turbo-frame finishes loading. Without this gate, the textarea + brain
   button appear before required-field detection is wired up, so the
   first interactions race the page. The controller (`_updateBlockVisibility`)
   adds `is-ready` once `turbo:frame-load` fires for the form body. */
.control-ai-summary-block {
  display: none;
}

.control-ai-summary-block.is-ready {
  display: block;
}

/* Refinement bar — hidden by default; the controller flips `is-active`
   on once the first generation completes (state idle + a thread id was
   captured). Same bar handles every follow-up turn — submitting empties
   the input and shows the overlay over the textarea again. */
.control-ai-summary-refine {
  display: none;
}

.control-ai-summary-refine.is-active {
  display: block;
}

/* Refine submit button — uses `.input-group-text` on a <button> so it
   matches the canonical Bootstrap input-group pattern (and therefore
   the app-wide `rtl_fixes` corner rules for
   `.input-group > .input-group-text:last-child`). The base
   `.input-group-text` styling already provides the form-control
   border color, padding, and font; we only need to add the
   button-specific traits: pointer cursor, hover state, and the
   disabled treatment that mirrors the brain trigger above. */
.control-ai-summary-refine-submit {
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.control-ai-summary-refine-submit:hover:not(:disabled) {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-primary, #0d6efd);
}
.control-ai-summary-refine-submit:disabled {
  opacity: 0.55;
  cursor: wait;
}

.dev-ai-chat thead.table-light {
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
}
.dev-ai-chat pre.text-monospace {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color);
}
.dev-ai-chat code {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.dev-ai-chat .dev-ai-chat-bar-track {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  height: 14px;
  width: 200px;
  border-radius: 2px;
  overflow: hidden;
}
.dev-ai-chat .dev-ai-chat-bar-fill {
  background-color: var(--bs-primary);
  height: 100%;
  opacity: 0.7;
}
.dev-ai-chat .card-header {
  background-color: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}
.dev-ai-chat details > summary {
  cursor: pointer;
}
.dev-ai-chat details > summary:hover {
  color: var(--bs-primary);
}
.dev-ai-chat .dev-ai-chat-md-shell {
  position: relative;
}
.dev-ai-chat .dev-ai-chat-md-switch {
  cursor: pointer;
  float: inline-end;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.25rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dev-ai-chat .dev-ai-chat-md-toggle:checked ~ .dev-ai-chat-md-switch .form-check-input {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.dev-ai-chat .dev-ai-chat-md-toggle:checked ~ .dev-ai-chat-md-switch .form-check-input::after {
  transform: translateX(1.25rem);
}
[dir=rtl] .dev-ai-chat .dev-ai-chat-md-toggle:checked ~ .dev-ai-chat-md-switch .form-check-input::after {
  transform: translateX(-1.25rem);
}
.dev-ai-chat .dev-ai-chat-md-raw {
  display: none;
}
.dev-ai-chat .dev-ai-chat-md-toggle:not(:checked) ~ .dev-ai-chat-md-rendered {
  display: none;
}
.dev-ai-chat .dev-ai-chat-md-toggle:not(:checked) ~ .dev-ai-chat-md-raw {
  display: block;
}
.dev-ai-chat .dev-ai-chat-md-rendered p:last-child {
  margin-bottom: 0;
}
.dev-ai-chat .dev-ai-chat-md-rendered ul, .dev-ai-chat .dev-ai-chat-md-rendered ol {
  padding-inline-start: 1.5rem;
}
.dev-ai-chat .dev-ai-chat-md-rendered code {
  background-color: var(--bs-tertiary-bg);
}
.dev-ai-chat .dev-ai-chat-md-rendered table {
  margin-top: 0.5rem;
  width: auto;
  border-collapse: collapse;
  font-size: 0.875em;
}
.dev-ai-chat .dev-ai-chat-md-rendered table th, .dev-ai-chat .dev-ai-chat-md-rendered table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bs-border-color);
}
.dev-ai-chat .dev-ai-chat-md-rendered table thead th {
  background-color: var(--bs-tertiary-bg);
}
.dev-ai-chat .dev-ai-chat-md-raw .text-pre-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.apexcharts-tooltip-title,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-label,
.apexcharts-tooltip-text-z-value {
  color: var(--bs-body-color) !important;
}

.apexcharts-text,
.apexcharts-legend-text {
  fill: var(--bs-body-color) !important;
  color: var(--bs-body-color) !important;
}

.apexcharts-gridline,
.apexcharts-grid line {
  stroke: var(--bs-border-color-translucent) !important;
}

.dev-ai-chat-first-question-cell {
  max-width: 16rem;
}

.dev-ai-chat-first-question {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-link-color);
}
.dev-ai-chat-first-question:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline !important;
}

.audit-chip .audit-chip-x-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.18s ease-in-out, margin-inline-start 0.18s ease-in-out;
}
.audit-chip:hover .audit-chip-x-form, .audit-chip:focus-within .audit-chip-x-form {
  max-width: 1.25rem;
  margin-inline-start: 0.25rem;
}
.audit-chip .audit-chip-x {
  background: transparent;
  border: 0;
  padding: 0 0.15rem;
  line-height: 1;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}
.audit-chip .audit-chip-x:hover, .audit-chip .audit-chip-x:focus {
  opacity: 1;
  outline: none;
}

.dev-ai-chat [id^=message-] {
  scroll-margin-top: calc(var(--topbar-height, 60px) + 0.5rem);
}

.dashboard-results-wrapper {
  position: relative;
  min-height: 120px;
}

.dashboard-loading-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.dashboard-loading-bar__indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
  animation: dashboard-loading-slide 1.1s ease-in-out infinite;
}

@keyframes dashboard-loading-slide {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
.dashboard-results-wrapper:has(> turbo-frame[aria-busy=true]) .dashboard-loading-bar {
  opacity: 1;
}
.dashboard-results-wrapper:has(> turbo-frame[aria-busy=true]) > turbo-frame {
  pointer-events: none;
}

.dashboard-section-header {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding: 0.6rem 1rem;
}
.dashboard-section-header h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
}
.dashboard-section-header p.small {
  font-size: 0.8rem;
  line-height: 1.3;
  margin-top: 0.15rem;
}
.dashboard-section-header i {
  font-size: 1rem;
}

.dashboard-grade-card {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(to top, var(--dashboard-grade-color, transparent) 0%, var(--dashboard-grade-color, transparent) var(--dashboard-grade-fill, 0%), transparent var(--dashboard-grade-fill, 0%), transparent 100%);
}

.dashboard-grade-card__value {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-block: 0.25rem;
}

.dashboard-grade-card__caption {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.dashboard-grade-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.dashboard-grade-badge--success {
  background-color: #198754;
}
.dashboard-grade-badge--warning {
  background-color: #f59e0b;
  color: #1a1a1a;
}
.dashboard-grade-badge--danger {
  background-color: #dc3545;
}

.dashboard-grade-badge__value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.dashboard-grade-badge__max {
  font-size: 0.55rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
}

.score-pill-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 32px;
  border-radius: 999px;
  clip-path: inset(0 round 999px);
  transform: translateZ(0);
  border: 1px solid var(--bs-border-color-translucent);
}

.score-pill-bar__segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.score-pill-bar__segment:last-child {
  flex-grow: 1;
}

.score-pill-bar__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  z-index: 2;
  position: relative;
}

.score-pill-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: center;
  margin-top: 0.6rem;
}

.score-pill-bar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--bs-body-color);
}

.score-pill-bar__legend-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.score-pill-bar__legend-text {
  white-space: nowrap;
}

.score-pill-bar__legend-stat {
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.dashboard-comparable-table {
  table-layout: fixed;
  width: 100%;
  min-width: 810px;
}
.dashboard-comparable-table th:nth-child(1), .dashboard-comparable-table td:nth-child(1) {
  width: 3rem;
}
.dashboard-comparable-table th:nth-child(2), .dashboard-comparable-table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-comparable-table th:nth-child(3), .dashboard-comparable-table td:nth-child(3) {
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-comparable-table th:nth-child(4), .dashboard-comparable-table td:nth-child(4),
.dashboard-comparable-table th:nth-child(5), .dashboard-comparable-table td:nth-child(5) {
  width: 5rem;
}
.dashboard-comparable-table th:nth-child(6), .dashboard-comparable-table td:nth-child(6) {
  width: 240px;
}

.dashboard-rank-col {
  width: 2.5rem;
  padding-inline-end: 0.25rem;
  text-align: center;
}

.dashboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 1.75rem;
  min-height: 1.75rem;
}
.dashboard-rank i.fa-medal {
  font-size: 1.1rem;
}
.dashboard-rank--gold {
  color: #c9a227;
}
.dashboard-rank--silver {
  color: #8a9ba8;
}
.dashboard-rank--bronze {
  color: #a0652a;
}
.dashboard-rank--plain {
  color: var(--bs-secondary-color);
}
.dashboard-rank--attention {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.dashboard-offense-bar {
  position: relative;
  height: 26px;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color-translucent);
  overflow: hidden;
}

.dashboard-offense-bar__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  height: 100%;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: width 0.3s ease;
}
.dashboard-offense-bar__fill.dashboard-bar--high {
  background-color: #dc3545;
}
.dashboard-offense-bar__fill.dashboard-bar--mid {
  background-color: #f59e0b;
}
.dashboard-offense-bar__fill.dashboard-bar--low {
  background-color: #0d9488;
}
.dashboard-offense-bar__fill.dashboard-bar--passer {
  background-color: #198754;
}

.dashboard-show-more-btn {
  text-decoration: none;
  color: var(--bs-secondary-color);
}
.dashboard-show-more-btn:hover {
  color: var(--bs-body-color);
}
.dashboard-show-more-btn .dashboard-show-more-btn__less {
  display: none;
}
.dashboard-show-more-btn[aria-expanded=true] .dashboard-show-more-btn__more {
  display: none;
}
.dashboard-show-more-btn[aria-expanded=true] .dashboard-show-more-btn__less {
  display: inline;
}

.dashboard-bar-cell {
  vertical-align: middle;
}

.dashboard-bar-cell__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dashboard-bar-cell__inner .dashboard-offense-bar {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-bar-cell__pct {
  flex-shrink: 0;
  min-width: 3.2rem;
  text-align: end;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
}

.dashboard-bar-cell__pct-max,
.dashboard-group-grade__max {
  font-size: 0.7rem;
  font-weight: 400;
  margin-inline-start: 0.05rem;
}

.dashboard-comparable-table tbody.collapsing,
.dashboard-group-fields.collapsing {
  transition: none !important;
}

.dashboard-badge-critical {
  font-size: 0.7rem;
  white-space: nowrap;
}

.dashboard-badge-standard {
  font-size: 0.7rem;
  white-space: nowrap;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}

.dashboard-group-card {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.06) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

.dashboard-group-card__header {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent);
  font-size: 0.875rem;
}

.dashboard-group-bar {
  transition: width 0.3s ease;
}

.dashboard-group-fields {
  padding: 0;
  margin-inline: -1rem;
}

.dashboard-group-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.35rem;
  padding-inline-start: 1rem;
  padding-inline-end: 0.2rem;
  font-size: 0.82rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color-translucent) 50%, transparent);
  background-image: linear-gradient(to left, var(--field-tier-color, transparent) 0%, var(--field-tier-color, transparent) var(--field-grade, 0%), transparent var(--field-grade, 0%), transparent 100%);
}
.dashboard-group-field--first {
  border-top: 1px solid color-mix(in srgb, var(--bs-border-color-translucent) 50%, transparent);
}

.dashboard-group-field__info {
  font-size: 0.68rem;
  width: 0.9rem;
  text-align: center;
  color: var(--bs-secondary-color);
  opacity: 0.3;
  margin-inline-start: 0.25rem;
  cursor: help;
}
.dashboard-group-field__info:hover {
  opacity: 0.75;
}

.dashboard-group-field__label {
  min-width: 0;
  color: var(--bs-body-color);
}

.dashboard-group-field__rate {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.dashboard-group-more {
  padding: 0.4rem 0 0.1rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  text-align: center;
  letter-spacing: 0.01em;
}

.dashboard-visibility-toggle-card {
  background-color: var(--bs-tertiary-bg);
}

.dashboard-table-head {
  background-color: var(--bs-tertiary-bg);
}
.dashboard-table-head th {
  background-color: inherit;
  color: var(--bs-body-color);
  border-bottom-color: var(--bs-border-color);
  font-weight: 600;
}

.dashboard-filters-clear {
  position: absolute;
  top: 0.25rem;
  inset-inline-end: 0.25rem;
  padding: 0.15rem 0.4rem;
  z-index: 2;
  text-decoration: none;
}
.dashboard-filters-clear:hover .fa-times-circle {
  filter: brightness(1.1);
}

@media (min-width: 1200px) {
  .dashboard-filter--narrow {
    flex: 0 0 auto;
    width: 12.5%;
    max-width: 12.5%;
  }
}
.card-overflow-visible .dashboard-date-range-trigger,
.card-overflow-visible .dashboard-score-dropdown__toggle {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.card-overflow-visible .ts-wrapper.form-select-sm .ts-control {
  min-height: calc(1.5em + 0.5rem + var(--bs-border-width) * 2);
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  color: var(--bs-body-color);
}
.card-overflow-visible .ts-wrapper.form-select-sm .ts-control .item,
.card-overflow-visible .ts-wrapper.form-select-sm .ts-control input {
  color: var(--bs-body-color);
}

.dashboard-date-range-trigger {
  cursor: pointer;
  background-color: var(--bs-form-bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.6rem center;
  background-size: 14px;
  padding-inline-end: 2rem;
}
.dashboard-date-range-trigger[readonly] {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
  opacity: 1;
}

.flatpickr-calendar .flatpickr-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  background-color: var(--bs-tertiary-bg);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.flatpickr-calendar .flatpickr-months {
  position: relative;
}

.flatpickr-presets__btn {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.55rem;
  --bs-btn-font-size: 0.75rem;
  border-radius: 999px;
  direction: rtl;
  unicode-bidi: embed;
}

.dashboard-score-dropdown .dashboard-score-dropdown__toggle {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-width) solid var(--bs-border-color);
  min-height: 2rem;
  text-align: start;
}
.dashboard-score-dropdown .dashboard-score-dropdown__toggle::after {
  display: none;
}
.dashboard-score-dropdown .dashboard-score-dropdown__toggle:hover, .dashboard-score-dropdown .dashboard-score-dropdown__toggle:focus, .dashboard-score-dropdown .dashboard-score-dropdown__toggle:active, .dashboard-score-dropdown .dashboard-score-dropdown__toggle.show {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  box-shadow: none;
}
.dashboard-score-dropdown .dashboard-score-dropdown__chevron {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.dashboard-score-dropdown .dashboard-score-dropdown__menu {
  min-width: 12rem;
}

.dashboard-score-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.dashboard-score-dot--green {
  background-color: #198754;
}
.dashboard-score-dot--yellow {
  background-color: #ffc107;
}
.dashboard-score-dot--orange {
  background-color: #fd7e14;
}
.dashboard-score-dot--red {
  background-color: #dc3545;
}

.dashboard-score-chips {
  align-items: center;
}

.dashboard-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  cursor: pointer;
  font-size: 0.85rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.dashboard-score-chip:hover {
  border-color: var(--bs-secondary);
}
.dashboard-score-chip.active {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}
.dashboard-score-chip .dashboard-score-chip__dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.dashboard-score-chip--green .dashboard-score-chip__dot {
  background: #198754;
}
.dashboard-score-chip--green.active {
  background: rgba(25, 135, 84, 0.12);
  border-color: #198754;
}
.dashboard-score-chip--yellow .dashboard-score-chip__dot {
  background: #ffc107;
}
.dashboard-score-chip--yellow.active {
  background: rgba(255, 193, 7, 0.18);
  border-color: #ffc107;
}
.dashboard-score-chip--orange .dashboard-score-chip__dot {
  background: #fd7e14;
}
.dashboard-score-chip--orange.active {
  background: rgba(253, 126, 20, 0.15);
  border-color: #fd7e14;
}
.dashboard-score-chip--red .dashboard-score-chip__dot {
  background: #dc3545;
}
.dashboard-score-chip--red .dashboard-score-chip__icon {
  color: #dc3545;
  font-size: 0.85rem;
}
.dashboard-score-chip--red.active {
  background: rgba(220, 53, 69, 0.12);
  border-color: #dc3545;
}

.dashboard-drilldown-trigger {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.dashboard-drilldown-trigger:hover, .dashboard-drilldown-trigger:focus-visible {
  background-color: color-mix(in srgb, var(--bs-tertiary-bg) 60%, transparent);
}

.dashboard-group-field.dashboard-drilldown-trigger:hover, .dashboard-group-field.dashboard-drilldown-trigger:focus-visible {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--bs-secondary-border-subtle);
}

.dashboard-drilldown-modal__dialog {
  max-width: min(92vw, 1080px);
  max-height: 84vh;
}
.dashboard-drilldown-modal__header {
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding: 0.6rem 1rem;
}
.dashboard-drilldown-modal__header .modal-title {
  font-size: 1rem;
}
.dashboard-drilldown-modal__body {
  background-color: var(--bs-body-bg);
}

.dashboard-drilldown-scope-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color-translucent);
  white-space: nowrap;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-drilldown-section__title {
  letter-spacing: 0.04em;
}

.dashboard-drilldown-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dashboard-drilldown-distribution__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  padding-block: 0.2rem;
}
.dashboard-drilldown-distribution__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-drilldown-distribution__bar-wrap {
  height: 0.55rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-drilldown-distribution__bar {
  height: 100%;
  background: linear-gradient(90deg, #6366F1 0%, #818CF8 100%);
  border-radius: 999px;
}
.dashboard-drilldown-distribution__count {
  font-variant-numeric: tabular-nums;
  text-align: end;
  min-width: 4rem;
}

.dashboard-drilldown-breakdown-table {
  font-size: 0.85rem;
}
.dashboard-drilldown-breakdown-table td,
.dashboard-drilldown-breakdown-table th {
  vertical-align: middle;
}
.dashboard-drilldown-breakdown-table td.text-center {
  font-variant-numeric: tabular-nums;
}

.dashboard-drilldown-breakdown-link {
  color: inherit;
  text-decoration: none;
}
.dashboard-drilldown-breakdown-link:hover {
  color: var(--bs-link-color);
  text-decoration: underline;
}

.dashboard-drilldown-tabs .btn {
  font-size: 0.78rem;
  padding-inline: 0.65rem;
}

.dashboard-drilldown-controls-table {
  font-size: 0.85rem;
}
.dashboard-drilldown-controls-table__value {
  font-variant-numeric: tabular-nums;
}
.dashboard-drilldown-controls-table td {
  vertical-align: middle;
}

.dashboard-drilldown-controls-row__value {
  max-width: 22rem;
}
.dashboard-drilldown-controls-row__comment {
  max-width: 22rem;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.dashboard-drilldown-loading {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dashboard-drilldown-content-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.dashboard-drilldown-breakdown-row {
  position: relative;
}

.dashboard-drilldown-breakdown-rate-cell {
  position: relative;
  z-index: 2;
}

.dashboard-drilldown-trend-tooltip {
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  font-family: inherit;
  line-height: 1.45;
  color: var(--bs-body-color);
}
.dashboard-drilldown-trend-tooltip__title {
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-drilldown-trend-tooltip__line {
  display: block;
  font-variant-numeric: tabular-nums;
  margin-block: 0.1rem;
}

@keyframes dashboard-drilldown-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.dashboard-drilldown-skeleton {
  --skeleton-bg: var(--bs-tertiary-bg);
  animation: dashboard-drilldown-pulse 1.6s ease-in-out infinite;
}
.dashboard-drilldown-skeleton__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dashboard-drilldown-skeleton__title-block {
  flex-grow: 1;
  min-width: 0;
}
.dashboard-drilldown-skeleton__line {
  height: 0.65rem;
  border-radius: 999px;
  background-color: var(--skeleton-bg);
  margin-block: 0.4rem;
}
.dashboard-drilldown-skeleton__line--xs {
  height: 0.55rem;
}
.dashboard-drilldown-skeleton__line--sm {
  height: 0.7rem;
}
.dashboard-drilldown-skeleton__line--lg {
  height: 1.2rem;
  margin-block: 0.5rem 0.6rem;
}
.dashboard-drilldown-skeleton__chips {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.dashboard-drilldown-skeleton__chip {
  display: inline-block;
  width: 5.5rem;
  height: 1.1rem;
  border-radius: 999px;
  background-color: var(--skeleton-bg);
}
.dashboard-drilldown-skeleton__badge {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--skeleton-bg);
  flex-shrink: 0;
}
.dashboard-drilldown-skeleton__bar {
  height: 32px;
  border-radius: 999px;
  background-color: var(--skeleton-bg);
}
.dashboard-drilldown-skeleton__chart {
  height: 220px;
  border-radius: 0.5rem;
  background-color: var(--skeleton-bg);
}
.dashboard-drilldown-skeleton__card {
  height: 180px;
  border-radius: 0.5rem;
  background-color: var(--skeleton-bg);
}
.dashboard-drilldown-skeleton__rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dashboard-drilldown-skeleton__row-line {
  height: 2rem;
  border-radius: 0.4rem;
  background-color: var(--skeleton-bg);
}

.dashboard-state-pie-canvas {
  min-height: 240px;
  width: 100%;
}

.dashboard-state-legend {
  font-size: 0.82rem;
}
.dashboard-state-legend__dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.data-field-group-header-dropzone {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  border: 2px dashed transparent;
  border-radius: 0.5rem;
  background-color: rgba(var(--bs-primary-rgb), 0.18);
  color: var(--bs-light);
  font-weight: 600;
  pointer-events: auto;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

body[data-sortable-dragging=data_field] .data-field-group-header-dropzone {
  display: flex;
  border-color: var(--bs-primary);
}

.data-field-group-header-dropzone.sortable-chosen,
.data-field-group-header-dropzone:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.32);
}

/* Trix Editor Custom Styling */
/* Make editor taller and resizable */
trix-editor {
  min-height: 150px;
  resize: vertical;
  overflow-y: auto;
}

/* Hide attachments button - not needed for system messages */
trix-toolbar .trix-button--icon-attach {
  display: none;
}

/* Fix button group spacing for RTL - reduce padding */
[dir=rtl] trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
  margin-right: 0.5vw;
}

@media (max-width: 768px) {
  [dir=rtl] trix-toolbar .trix-button-group:not(:first-child) {
    margin-right: 0;
  }
}
/* Reduce button padding in toolbar */
trix-toolbar .trix-button {
  padding: 0 0.3em;
}

/* Match Trix editor heading sizes to Trix's default (which matches rendered content) */
trix-editor h1 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

trix-editor h2 {
  font-size: 1.15em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

trix-editor h3 {
  font-size: 1.1em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

trix-editor h4 {
  font-size: 1.05em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

trix-editor h5 {
  font-size: 1em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

trix-editor h6 {
  font-size: 0.95em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Match rendered Trix content heading sizes - keep Trix defaults */
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.trix-content h2 {
  font-size: 1.15em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.trix-content h3 {
  font-size: 1.1em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.trix-content h4 {
  font-size: 1.05em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.trix-content h5 {
  font-size: 1em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.trix-content h6 {
  font-size: 0.95em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Fix RTL margins for lists and indents in rendered content */
[dir=rtl] .trix-content li {
  margin-left: 0;
  margin-right: 0.75em;
}

[dir=rtl] .trix-content ul,
[dir=rtl] .trix-content ol {
  padding-left: 0;
  padding-right: 1rem;
}

/* Fix RTL for nested lists */
[dir=rtl] .trix-content ul ul,
[dir=rtl] .trix-content ol ol,
[dir=rtl] .trix-content ul ol,
[dir=rtl] .trix-content ol ul {
  margin-left: 0;
  margin-right: 0.75em;
}

/* Fix blockquote margins for RTL */
[dir=rtl] .trix-content blockquote {
  border-left-width: 0;
  border-right-width: 0.3em;
  margin-left: 0;
  margin-right: 0.3em;
  padding-left: 0;
  padding-right: 0.5em;
}

/* Also set padding for LTR lists */
.trix-content li {
  margin-left: 0.75em;
}

[dir=ltr] .trix-content li {
  margin-left: 0.75em;
  margin-right: 0;
}

.trix-content ul,
.trix-content ol {
  padding-left: 1rem;
  padding-right: 0;
}

[dir=ltr] .trix-content ul,
[dir=ltr] .trix-content ol {
  padding-left: 1rem;
  padding-right: 0;
}

.trix-content blockquote {
  padding-left: 0.5em;
  padding-right: 0;
}

/* Trix already handles button icons via ::before pseudo-elements */
/* The default Trix CSS uses text-indent: -9999px to hide text */
/* Icons are automatically displayed via background-image in ::before */
/* No custom button styling needed - Trix handles it correctly */
/* Custom color picker dropdown */
.trix-color-picker {
  direction: rtl;
  /* Ensure it stays within viewport */
  max-width: calc(100vw - 20px);
  /* RTL positioning adjustments */
}
[dir=rtl] .trix-color-picker {
  left: auto !important;
  right: auto !important;
}

/* Color picker swatches hover effect */
.trix-color-picker > div[style*=background-color]:hover {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/**
 * Flash Message System Styles
 * 
 * Modern flash message system with:
 * - Fixed positioning at top of viewport
 * - Smooth animations (slide-down entrance, fade-out exit)
 * - RTL support for Hebrew
 * - Auto-dismiss for success/info, manual dismiss for errors/warnings
 * - Multiple message stacking support
 */
/* Flash container - fixed at top of viewport */
#flash-container {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 9999; /* Above everything including modals (Bootstrap modals are 1055) */
  pointer-events: none; /* Allow clicks through empty space */
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* RTL adjustment for Hebrew */
[dir=rtl] #flash-container {
  left: 1rem;
  right: 1rem;
}

/* Individual flash messages */
#flash-container .alert {
  pointer-events: auto; /* Re-enable clicks on actual alerts */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 0; /* Gap is handled by container */
  border: none;
  border-radius: 0.5rem;
}

/* Entrance animation - slide down from top */
@keyframes flash-slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.flash-enter {
  animation: flash-slide-down 0.3s ease-out;
}

/* Exit animation - fade out */
@keyframes flash-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
.flash-exit {
  animation: flash-fade-out 0.3s ease-in;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #flash-container {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
  }
  #flash-container .alert {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
}
/* Ensure flash messages work with sidebar layout */
body.has-sidebar #flash-container {
  /* Adjust left margin when sidebar is visible */
  margin-left: 0;
  margin-right: 0;
}

/* Dark mode support (if theme system is implemented) */
[data-bs-theme=dark] #flash-container .alert {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Improve readability of close button */
#flash-container .btn-close {
  opacity: 0.8;
}

#flash-container .btn-close:hover {
  opacity: 1;
}

/* Global Search Component */
.global-search {
  position: relative;
  width: 400px;
  max-width: 100%;
}

/* Toggle button is desktop-hidden by default */
.global-search-toggle {
  display: none;
}

/* Phones (< md): collapse to an icon, expand as overlay when focused */
@media (max-width: 767.98px) {
  .global-search {
    width: auto;
  }
  /* Collapsed: only the toggle icon is visible */
  .global-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
  }
  .global-search:not(.mobile-expanded) .input-group {
    display: none;
  }
  /* Expanded: search overlays the entire topbar */
  .global-search.mobile-expanded {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: var(--topbar-height, 60px);
    padding-inline: 0.75rem;
    display: flex;
    align-items: center;
    background-color: inherit;
    z-index: 10;
  }
  .global-search.mobile-expanded .global-search-toggle {
    display: none;
  }
  .global-search.mobile-expanded .input-group {
    flex: 1;
  }
}
/* Search input styling - rounded pill-like appearance */
.global-search .input-group {
  border-radius: 1.5rem;
  overflow: hidden;
  transition: border-radius 0.05s ease-out;
}

.global-search .form-control {
  border-radius: 0 1.5rem 1.5rem 0;
  padding: 0.5rem 1rem;
  border: none;
  transition: border-radius 0.05s ease-out;
}

.global-search .input-group-text {
  border-radius: 1.5rem 0 0 1.5rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border: none;
  transition: border-radius 0.05s ease-out;
}

/* RTL adjustments */
[dir=rtl] .global-search .form-control {
  border-radius: 1.5rem 0 0 1.5rem;
}

[dir=rtl] .global-search .input-group-text {
  border-radius: 0 1.5rem 1.5rem 0;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
}

/* When dropdown is open - flatten bottom corners to connect with dropdown (desktop only) */
@media (min-width: 769px) {
  .global-search.dropdown-open .input-group {
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .global-search.dropdown-open .form-control {
    border-radius: 0 1.5rem 0 0;
  }
  .global-search.dropdown-open .input-group-text {
    border-radius: 1.5rem 0 0 0;
  }
  /* RTL adjustments when dropdown is open */
  [dir=rtl] .global-search.dropdown-open .form-control {
    border-radius: 1.5rem 0 0 0;
  }
  [dir=rtl] .global-search.dropdown-open .input-group-text {
    border-radius: 0 1.5rem 0 0;
  }
}
/* Light mode input styling (default) */
.global-search .form-control {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.global-search .input-group-text {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

.global-search .form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
}

.global-search .form-control::placeholder {
  color: var(--bs-secondary-color);
}

.global-search .form-control:focus {
  background-color: var(--bs-body-bg);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Top bar (always dark background) - override for dark input style */
.app-topbar .global-search .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.app-topbar .global-search .input-group-text {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.app-topbar .global-search .form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.app-topbar .global-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.app-topbar .global-search .form-control:focus {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
}

/* Dropdown container - flush with search input, matching width */
.global-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 400px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem;
  /* Height transition for smooth grow effect */
  transition: height 0.2s ease-out;
}

/* Allow scrolling only after animation completes */
.global-search-dropdown.can-scroll {
  overflow-y: auto;
}

/* Full-width dropdown on mobile */
@media (max-width: 768px) {
  .global-search-dropdown,
  [dir=rtl] .global-search-dropdown {
    /* Use fixed positioning to span full viewport width */
    position: fixed;
    top: var(--topbar-height, 60px);
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    width: 100vw;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
/* Group header */
.global-search-group-header {
  background-color: var(--bs-light);
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Dark mode group header */
[data-bs-theme=dark] .global-search-group-header {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color);
}

/* Individual search result */
.global-search-result {
  color: var(--bs-body-color);
  transition: background-color 0.15s ease, transform 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  animation: fadeInResult 0.2s ease-out backwards;
}

/* Staggered animation for results */
.global-search-result:nth-child(1) {
  animation-delay: 0.02s;
}

.global-search-result:nth-child(2) {
  animation-delay: 0.04s;
}

.global-search-result:nth-child(3) {
  animation-delay: 0.06s;
}

.global-search-result:nth-child(4) {
  animation-delay: 0.08s;
}

.global-search-result:nth-child(5) {
  animation-delay: 0.1s;
}

.global-search-result:nth-child(n+6) {
  animation-delay: 0.12s;
}

@keyframes fadeInResult {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* RTL: slide from left */
[dir=rtl] .global-search-result {
  animation-name: fadeInResultRTL;
}

@keyframes fadeInResultRTL {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.global-search-result:last-child {
  border-bottom: none;
}

.global-search-result:hover,
.global-search-result.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.global-search-result:hover i,
.global-search-result.active i {
  color: var(--bs-primary) !important;
}

/* Result title and subtitle */
.global-search-result-title,
.global-search-result-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 1.3;
}

.global-search-result-title {
  font-weight: 500;
}

.global-search-result-subtitle {
  font-size: 0.8em;
  margin-top: 0.1rem;
}

/* Match highlighting */
.global-search-result mark {
  background-color: rgba(255, 193, 7, 0.4);
  color: inherit;
  padding: 0;
  border-radius: 0.15em;
}

.global-search-result:hover mark,
.global-search-result.active mark {
  background-color: rgba(255, 193, 7, 0.6);
}

/* Loading, no results, and error states */
.global-search-loading,
.global-search-no-results,
.global-search-error {
  color: var(--bs-secondary-color);
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.global-search-loading i {
  color: var(--bs-primary);
}

/* Pulse animation for loading text */
.global-search-loading {
  animation: fadeIn 0.15s ease-out, pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* Sidebar year selector */
.sidebar-year-selector {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-year-selector .form-select {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  /* Fix caret visibility - use white caret */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.sidebar-year-selector .form-select:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  color: #fff;
  /* Keep white caret on focus */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.sidebar-year-selector .form-select option {
  background-color: var(--bs-dark);
  color: #fff;
}

/* Hide year selector when sidebar is collapsed */
.app-sidebar.collapsed .sidebar-year-selector {
  display: none !important;
}

/* Institution autocomplete (Tom Select) — rich two-line dropdown rows */
.institution-autocomplete-option {
  display: block;
  line-height: 1.3;
}

.institution-autocomplete-title,
.institution-autocomplete-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.institution-autocomplete-title {
  font-weight: 500;
}

.institution-autocomplete-subtitle {
  font-size: 0.8em;
  margin-top: 0.1rem;
  opacity: 0.75;
}

/* Tom Select active/hover row keeps subtitle readable */
.ts-dropdown .active .institution-autocomplete-subtitle {
  opacity: 0.95;
}

/* Trix editor styles are loaded separately via layout for proper icon display */
/* Global Body Styles */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Card Enhancements
   Background is set via Bootstrap's $card-bg variable (see bootstrap-custom.scss)
   which uses --bs-tertiary-bg for automatic dark mode support */
.card {
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Clip content to rounded corners */
  border-radius: 0.75rem; /* Rounded corners for all cards */
}

/* Allow overflow for cards with dropdowns (tom-select, flatpickr, etc) */
.card-overflow-visible {
  overflow: visible !important;
}

/* Input styling is handled by Bootstrap's form control styles
   Background, color, and border are set via CSS custom properties
   that automatically support dark mode */
/* Input group text (icons and addon text) - ensure proper dark mode support */
.input-group-text {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Dark mode - fix form control focus state to maintain dark background */
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  background-color: var(--bs-form-bg);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] {
  /* File-input's inline "browse" button. Bootstrap defaults to
     --bs-tertiary-bg / --bs-body-color, which in dark mode renders as
     near-black text on a near-black chip — invisible. Pin both ends to
     surfaces that have actual contrast in the dark palette. */
}
[data-bs-theme=dark] .form-control::file-selector-button {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-tertiary-bg);
}