blue-web 1.21.0 → 1.21.2

package/dist/merged.scss

@@ -1,56 +1,56 @@
-/*!
- * Blue Web v1.21.0 (https://bruegmann.github.io/blue-web)
- * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
-*/
-
-// Main color theme. E.g. used for background for body and sidebar.
-$theme: hsl(217deg 10% 94%) !default;
-$theme-dark: hsl(217deg 10% 8%) !default;
-$primary: hsl(221, 97%, 53%) !default;
-$white: #fff !default;
-$gray-100: hsl(217deg 17% 98%) !default;
-$gray-200: hsl(217deg 16% 93%) !default;
-$gray-300: hsl(217deg 14% 89%) !default;
-$gray-400: hsl(217deg 14% 83%) !default;
-$gray-500: hsl(217deg 11% 71%) !default;
-$gray-600: hsl(217deg 7% 46%) !default;
-$gray-700: hsl(217deg 9% 31%) !default;
-$gray-800: hsl(217deg 10% 23%) !default;
-$gray-900: hsl(217deg 11% 15%) !default;
-$black: #000 !default;
-
-$light: #ecedf0 !default;
-
-// Components
-//
-
-$font-size-base: 1rem !default;
-
-$h1-font-size: $font-size-base * 2 !default;
-$h2-font-size: $font-size-base * 1.5 !default;
-$h3-font-size: $font-size-base * 1.25 !default;
-$h4-font-size: $font-size-base * 1.125 !default;
-$h5-font-size: $font-size-base * 1.1 !default;
-$h6-font-size: $font-size-base !default;
-
-$border-radius: 0.7rem !default;
-$border-radius-lg: 1rem !default;
-$border-radius-sm: 0.5rem !default;
-
-$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
-
-$link-decoration: none !default;
-$link-hover-decoration: underline !default;
-
-// Tint focus border and shadow in primary color.
-// In a future Bootstrap release, this might not be necessary anymore.
-$focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
-$input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
-
-$enable-button-pointers: false !default;
-$focus-ring-width: 0.125rem !default;
-
-
+/*!
+ * Blue Web v1.21.2 (https://bruegmann.github.io/blue-web)
+ * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
+*/
+
+// Main color theme. E.g. used for background for body and sidebar.
+$theme: hsl(217deg 10% 94%) !default;
+$theme-dark: hsl(217deg 10% 8%) !default;
+$primary: hsl(221, 97%, 53%) !default;
+$white: #fff !default;
+$gray-100: hsl(217deg 17% 98%) !default;
+$gray-200: hsl(217deg 16% 93%) !default;
+$gray-300: hsl(217deg 14% 89%) !default;
+$gray-400: hsl(217deg 14% 83%) !default;
+$gray-500: hsl(217deg 11% 71%) !default;
+$gray-600: hsl(217deg 7% 46%) !default;
+$gray-700: hsl(217deg 9% 31%) !default;
+$gray-800: hsl(217deg 10% 23%) !default;
+$gray-900: hsl(217deg 11% 15%) !default;
+$black: #000 !default;
+
+$light: #ecedf0 !default;
+
+// Components
+//
+
+$font-size-base: 1rem !default;
+
+$h1-font-size: $font-size-base * 2 !default;
+$h2-font-size: $font-size-base * 1.5 !default;
+$h3-font-size: $font-size-base * 1.25 !default;
+$h4-font-size: $font-size-base * 1.125 !default;
+$h5-font-size: $font-size-base * 1.1 !default;
+$h6-font-size: $font-size-base !default;
+
+$border-radius: 0.7rem !default;
+$border-radius-lg: 1rem !default;
+$border-radius-sm: 0.5rem !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
+
+$link-decoration: none !default;
+$link-hover-decoration: underline !default;
+
+// Tint focus border and shadow in primary color.
+// In a future Bootstrap release, this might not be necessary anymore.
+$focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
+$input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
+
+$enable-button-pointers: false !default;
+$focus-ring-width: 0.125rem !default;
+
+
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -353,7 +353,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   }
   @return $result;
 }
-
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -2209,7 +2209,7 @@ $carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !defaul
 
 $btn-close-filter-dark:             $btn-close-white-filter !default;
  // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
-
+
 // Toggles
 //
 // Used in conjunction with global variables to enable certain theme features.
@@ -3650,535 +3650,536 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   }
 }
 
-
-$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$theme-colors: map-merge(
-    (
-        "theme": $theme
-    ),
-    $theme-colors
-);
-
-// Alpha value (RGBA) e.g. for header background.
-$shimmering: 0.8 !default;
-
-// Thumb color of scrollbar.
-$scrollbar-thumb-color: white !default;
-
-// Thumb color of scrollbar as RGB (like `255, 255, 255`).
-$scrollbar-thumb-color-rgb:
-    red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
-
-// Default size for many components, like sidebar menu items.
-$normal-size: calc(
-    var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
-        (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
-        var(--bs-btn-border-width, 1px)
-) !default;
-
-// Height of actions menu when it is expanded, like on mobile devices.
-$actions-height: 7.5rem !default;
-
-// Background color of menu toggle button.
-$bla-button-bg-normal: rgba(0, 0, 0, 0.1) !default;
-
-// Background color of menu toggle button on hover state.
-$bla-button-bg-hover: rgba(white, 0.25) !default;
-
-// Font size for sidebar menu items.
-$bla-btn-font-size: 1em !default;
-
-// Padding for action menu items.
-$bla-header-nav-padding: 0.75rem !default;
-
-// Width of the sidebar.
-$bla-sidebar-width: 16.563rem !default;
-
-// Background of sidebar.
-$sidebar-bg: $theme !default;
-$sidebar-bg-dark: $theme-dark !default;
-
-// Background of sidebar when it's opened (on mobile devices).
-$sidebar-open-bg: darken($sidebar-bg, 30%) !default;
-
-// Background of sidebar menu dropdown menus
-$sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
-
-// Text color of sidebar.
-$sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
-$sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
-
-// Color of indicator for active menu item in sidebar.
-$sidebar-indicator-color: $primary !default;
-$sidebar-indicator-color-dark: $white !default;
-
-// Background of search control in sidebar.
-$sidebar-search-bg: $input-bg !default;
-
-// Background of the body element
-$app-bg: $theme !default;
-$app-bg-dark: $theme-dark !default;
-
-// Background color of Header
-$header-bg: $theme !default;
-$header-bg-dark: $theme-dark !default;
-
-// Text color of header elements
-$header-color: color-contrast($header-bg, $gray-900) !default;
-$header-color-dark: color-contrast($header-bg-dark, $gray-900) !default;
-
-// Background of header action menu dropdown menus
-$header-deep-bg: darken($header-bg, 4%) !default;
-
-// Background color, when hovering action menu item.
-$actions-control-bg-hover: $bla-button-bg-hover !default;
-
-// Shrink sidebar on smaller screens
-$sidebar-shrink: true !default;
-
-// Breakpoint for sidebar shrink
-$sidebar-shrink-breakpoint: 600px !default;
-
-// Breakpoint for sidebar fully expanded
-$sidebar-expanded-breakpoint: 1400px !default;
-
-$corner-shape: #{round} !default;
-
-:root {
-    --blue-app-bg: #{$app-bg};
-
-    --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
-
-    --blue-sidebar-width: #{$bla-sidebar-width};
-    --blue-sidebar-color: #{$sidebar-color};
-    --blue-theme: var(--theme, #{$theme});
-    --blue-shimmering: 0.9;
-
-    --blue-sidebar-bg: #{$sidebar-bg};
-    --blue-header-bg: #{$header-bg};
-
-    --blue-header-color: #{$header-color};
-    --blue-action-link-bg-color: var(--blue-theme);
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
-    --blue-menu-item-height: #{$normal-size};
-
-    --blue-corner-shape: #{$corner-shape};
-}
-
-@include color-mode(dark, true) {
-    --blue-app-bg: #{$app-bg-dark};
-
-    --blue-sidebar-color: #{$sidebar-color-dark};
-
-    --blue-sidebar-bg: #{$sidebar-bg-dark};
-    --blue-header-bg: #{$header-bg-dark};
-
-    --blue-header-color: #{$header-color-dark};
-
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-}
-
-
-@mixin header-bg() {
-    background-image: linear-gradient(
-        var(--blue-header-bg, $header-bg),
-        rgba(var(--blue-header-bg-rgb, var(--bs-theme-rgb)), var(--blue-shimmering, $shimmering))
-    );
-    backdrop-filter: blur(3px) saturate(125%);
-}
-
-@mixin blue-menu-item-background() {
-    content: "";
-    position: absolute;
-    top: 0.125rem;
-    right: 0.125rem;
-    bottom: 0.125rem;
-    left: 0.125rem;
-    background-color: currentColor;
-    border-radius: $border-radius;
-    transform: scale(0.9);
-    opacity: 0;
-    transition: all 0.2s;
-
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
-
-@mixin blue-menu-item-indicator() {
-    content: "";
-    position: absolute;
-    top: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.125rem;
-    right: initial;
-    width: 3px;
-    height: auto;
-    background-color: var(--blue-menu-item-indicator-bg);
-    border-radius: 1rem;
-    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-}
-
-@mixin blue-menu-item-indicator-horizontal() {
-    top: initial;
-    bottom: 0.125rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 2em;
-    height: 3px;
-    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-}
-
-@mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
-    & > .blue-menu-item-wrapper {
-        display: block;
-        position: relative;
-
-        &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
-            .blue-menu-item-label {
-                &::before,
-                & {
-                    animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-
-                    @media (prefers-reduced-motion) {
-                        animation-duration: 0s;
-                    }
-                }
-
-                &::before {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    border: 5px solid transparent;
-                    z-index: 1001;
-
-                    top: 50%;
-                    border-left-width: 0;
-                    border-right-color: var(--bs-tooltip-bg, #353539);
-                    left: calc(0em - 5px);
-                    transform: translate(0.5em, -50%);
-                    opacity: 0;
-                }
-
-                display: block;
-                text-transform: none;
-                line-height: 1;
-                font-size: 0.9em;
-                -webkit-user-select: none;
-                user-select: none;
-                pointer-events: none;
-                position: absolute;
-                font-family: var(--bs-font-sans-serif);
-                text-align: center;
-                min-width: 3em;
-                max-width: var(--bs-tooltip-max-width, 21em);
-                padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
-                border-radius: var(--bs-tooltip-border-radius, 0.3em);
-                box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
-                background: var(--bs-tooltip-bg, #353539);
-                color: var(--bs-tooltip-color, #fff);
-                z-index: 1000;
-                width: auto;
-                top: 50%;
-                left: calc(100% + 5px);
-                transform: translate(-0.5em, -50%);
-                overflow: visible;
-                opacity: 0;
-            }
-        }
-
-        & > .blue-menu-item-dropdown,
-        & > .blue-outside > .blue-menu-item-dropdown {
-            @extend .ms-1;
-            @extend .rounded;
-            @extend .shadow;
-            @extend .blue-menu-item-dropdown-from-start;
-
-            position: absolute;
-            top: 0;
-            width: $bla-sidebar-width;
-            left: $normal-size;
-            max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
-            overflow-y: auto;
-            overflow-x: hidden;
-            background-color: var(--blue-sidebar-bg);
-
-            &::before {
-                content: none;
-            }
-        }
-
-        &:has(.blue-menu-item-dropdown) {
-            & > .blue-menu-item {
-                @extend .highlighted;
-            }
-        }
-    }
-}
-
-@mixin show-action-menu-again() {
-    max-height: initial;
-    overflow: initial;
-
-    .blue-actions-menu {
-        max-width: initial;
-    }
-}
-
-@mixin actions($breakpoint) {
-    @media (max-width: #{$breakpoint + 1px}) {
-        &.open {
-            display: block;
-            width: auto;
-            position: absolute;
-            z-index: 1;
-            left: unset;
-            top: 0.25rem;
-            box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
-            animation: fadeInDown 0.5s;
-
-            @media (prefers-reduced-motion) {
-                animation-duration: 0s;
-            }
-
-            border-radius: $border-radius;
-
-            @include show-action-menu-again();
-
-            .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
-                display: flex;
-            }
-
-            .blue-actions-menu {
-                flex-direction: column;
-                .blue-menu-item-dropdown {
-                    --blue-sidebar-bg: #{darken($theme, 34%)};
-                }
-            }
-        }
-
-        .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
-            display: none;
-        }
-    }
-
-    @media (min-width: $breakpoint) {
-        @include show-action-menu-again();
-
-        .blue-actions-menu .blue-actions-label {
-            display: inline;
-        }
-
-        .blue-actions-menu-toggle {
-            display: none;
-        }
-
-        .blue-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown,
-        .blue-actions-menu > .blue-menu-item-wrapper > * > .blue-menu-item-dropdown {
-            position: absolute;
-            right: 0;
-        }
-    }
-}
-
-@mixin switch($width: 35px, $height: 20px, $padding: 3px, $color: $body-color, $color-active: $success) {
-    $slider-size: $height - ($padding * 2);
-
-    & {
-        position: relative;
-        display: inline-block;
-        width: $width;
-        height: $height;
-
-        input {
-            display: none;
-        }
-
-        &.disabled {
-            opacity: 0.8;
-        }
-
-        &:not(.disabled) {
-            .slider {
-                cursor: pointer;
-            }
-        }
-
-        .slider {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: $input-group-addon-bg;
-            transition: 0.4s;
-
-            @media (prefers-reduced-motion) {
-                transition: none;
-            }
-
-            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: $slider-size;
-                width: $slider-size;
-                left: $padding;
-                bottom: $padding;
-                background-color: $color;
-                transition: 0.4s;
-
-                @media (prefers-reduced-motion) {
-                    transition: none;
-                }
-            }
-
-            &::after {
-                content: attr(data-label);
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                margin-left: ($slider-size * 0.5);
-                transition: margin-left 0.4s;
-
-                @media (prefers-reduced-motion) {
-                    transition: none;
-                }
-
-                color: $color;
-            }
-        }
-
-        input:checked {
-            & + .slider {
-                background-color: $color-active;
-                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
-
-                &::before {
-                    transform: translateX($width - $slider-size - ($padding * 2));
-                    background-color: white;
-                }
-
-                &::after {
-                    color: white;
-                    margin-left: ($slider-size * 0.5) * -1;
-                }
-            }
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px $color-active;
-        }
-    }
-}
-
-@mixin customProperty($name, $value) {
-    // fallback for older browser who do not support custom properties / css variables
-    #{$name}: #{$value};
-
-    // create a css variable (this might override the variable on any of the ancestor elements)
-    --#{$name}: #{$value};
-
-    // use the css variable on the property
-    #{$name}: var(--#{$name}, #{$value});
-}
-
-@mixin scroll-shadow($bg, $light-base: white) {
-    background: linear-gradient($bg 30%, rgba($light-base, 0)),
-        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
-        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
-        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-    background-attachment: local, local, scroll, scroll;
-}
-
-
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes blAppearUp {
-    from {
-        margin-top: 2.5rem;
-    }
-    to {
-        margin-top: 0;
-    }
-}
-
-@keyframes blue-menu-item-dropdown {
-    from {
-        transform: translateY(-50%);
-        opacity: 0;
-    }
-}
-
-@keyframes enabledBlueAppPage {
-    from {
-        transform: scale(0.98);
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-@keyframes alert-in {
-    from {
-        transform: scale(0, 0);
-        opacity: 0.2;
-        transition: 0s;
-    }
-}
-
-@keyframes circlebounce {
-    0%,
-    100% {
-        transform: scale(0);
-    }
-    50% {
-        transform: scale(1);
-    }
-}
-
-@keyframes scrolling {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(100%);
-    }
-}
-
-
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+    (
+        "theme": $theme
+    ),
+    $theme-colors
+);
+
+// Alpha value (RGBA) e.g. for header background.
+$shimmering: 0.8 !default;
+
+// Thumb color of scrollbar.
+$scrollbar-thumb-color: white !default;
+
+// Thumb color of scrollbar as RGB (like `255, 255, 255`).
+$scrollbar-thumb-color-rgb:
+    red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
+
+// Default size for many components, like sidebar menu items.
+$normal-size: calc(
+    var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
+        (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
+        var(--bs-btn-border-width, 1px)
+) !default;
+
+// Height of actions menu when it is expanded, like on mobile devices.
+$actions-height: 7.5rem !default;
+
+// Background color of menu toggle button.
+$bla-button-bg-normal: rgba(0, 0, 0, 0.1) !default;
+
+// Background color of menu toggle button on hover state.
+$bla-button-bg-hover: rgba(white, 0.25) !default;
+
+// Font size for sidebar menu items.
+$bla-btn-font-size: 1em !default;
+
+// Padding for action menu items.
+$bla-header-nav-padding: 0.75rem !default;
+
+// Width of the sidebar.
+$bla-sidebar-width: 16.563rem !default;
+
+// Background of sidebar.
+$sidebar-bg: $theme !default;
+$sidebar-bg-dark: $theme-dark !default;
+
+// Background of sidebar when it's opened (on mobile devices).
+$sidebar-open-bg: darken($sidebar-bg, 30%) !default;
+
+// Background of sidebar menu dropdown menus
+$sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
+
+// Text color of sidebar.
+$sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
+$sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
+
+// Color of indicator for active menu item in sidebar.
+$sidebar-indicator-color: $primary !default;
+$sidebar-indicator-color-dark: $white !default;
+
+// Background of search control in sidebar.
+$sidebar-search-bg: $input-bg !default;
+
+// Background of the body element
+$app-bg: $theme !default;
+$app-bg-dark: $theme-dark !default;
+
+// Background color of Header
+$header-bg: $theme !default;
+$header-bg-dark: $theme-dark !default;
+
+// Text color of header elements
+$header-color: color-contrast($header-bg, $gray-900) !default;
+$header-color-dark: color-contrast($header-bg-dark, $gray-900) !default;
+
+// Background of header action menu dropdown menus
+$header-deep-bg: darken($header-bg, 4%) !default;
+
+// Background color, when hovering action menu item.
+$actions-control-bg-hover: $bla-button-bg-hover !default;
+
+// Shrink sidebar on smaller screens
+$sidebar-shrink: true !default;
+
+// Breakpoint for sidebar shrink
+$sidebar-shrink-breakpoint: 600px !default;
+
+// Breakpoint for sidebar fully expanded
+$sidebar-expanded-breakpoint: 1400px !default;
+
+$corner-shape: #{round} !default;
+
+:root {
+    --blue-app-bg: #{$app-bg};
+
+    --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
+
+    --blue-sidebar-width: #{$bla-sidebar-width};
+    --blue-sidebar-color: #{$sidebar-color};
+    --blue-theme: var(--theme, #{$theme});
+    --blue-shimmering: 0.9;
+
+    --blue-sidebar-bg: #{$sidebar-bg};
+    --blue-header-bg: #{$header-bg};
+
+    --blue-header-height: 3.429rem;
+    --blue-header-color: #{$header-color};
+    --blue-action-link-bg-color: var(--blue-theme);
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --blue-menu-item-height: #{$normal-size};
+
+    --blue-corner-shape: #{$corner-shape};
+}
+
+@include color-mode(dark, true) {
+    --blue-app-bg: #{$app-bg-dark};
+
+    --blue-sidebar-color: #{$sidebar-color-dark};
+
+    --blue-sidebar-bg: #{$sidebar-bg-dark};
+    --blue-header-bg: #{$header-bg-dark};
+
+    --blue-header-color: #{$header-color-dark};
+
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+}
+
+
+@mixin header-bg() {
+    background-image: linear-gradient(
+        var(--blue-header-bg, $header-bg),
+        rgba(var(--blue-header-bg-rgb, var(--bs-theme-rgb)), var(--blue-shimmering, $shimmering))
+    );
+    backdrop-filter: blur(3px) saturate(125%);
+}
+
+@mixin blue-menu-item-background() {
+    content: "";
+    position: absolute;
+    top: 0.125rem;
+    right: 0.125rem;
+    bottom: 0.125rem;
+    left: 0.125rem;
+    background-color: currentColor;
+    border-radius: $border-radius;
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.2s;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+}
+
+@mixin blue-menu-item-indicator() {
+    content: "";
+    position: absolute;
+    top: 0.625rem;
+    bottom: 0.625rem;
+    left: 0.125rem;
+    right: initial;
+    width: 3px;
+    height: auto;
+    background-color: var(--blue-menu-item-indicator-bg);
+    border-radius: 1rem;
+    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+}
+
+@mixin blue-menu-item-indicator-horizontal() {
+    top: initial;
+    bottom: 0.125rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2em;
+    height: 3px;
+    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+}
+
+@mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
+    & > .blue-menu-item-wrapper {
+        display: block;
+        position: relative;
+
+        &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
+            .blue-menu-item-label {
+                &::before,
+                & {
+                    animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+                    @media (prefers-reduced-motion) {
+                        animation-duration: 0s;
+                    }
+                }
+
+                &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    border: 5px solid transparent;
+                    z-index: 1001;
+
+                    top: 50%;
+                    border-left-width: 0;
+                    border-right-color: var(--bs-tooltip-bg, #353539);
+                    left: calc(0em - 5px);
+                    transform: translate(0.5em, -50%);
+                    opacity: 0;
+                }
+
+                display: block;
+                text-transform: none;
+                line-height: 1;
+                font-size: 0.9em;
+                -webkit-user-select: none;
+                user-select: none;
+                pointer-events: none;
+                position: absolute;
+                font-family: var(--bs-font-sans-serif);
+                text-align: center;
+                min-width: 3em;
+                max-width: var(--bs-tooltip-max-width, 21em);
+                padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
+                border-radius: var(--bs-tooltip-border-radius, 0.3em);
+                box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+                background: var(--bs-tooltip-bg, #353539);
+                color: var(--bs-tooltip-color, #fff);
+                z-index: 1000;
+                width: auto;
+                top: 50%;
+                left: calc(100% + 5px);
+                transform: translate(-0.5em, -50%);
+                overflow: visible;
+                opacity: 0;
+            }
+        }
+
+        & > .blue-menu-item-dropdown,
+        & > .blue-outside > .blue-menu-item-dropdown {
+            @extend .ms-1;
+            @extend .rounded;
+            @extend .shadow;
+            @extend .blue-menu-item-dropdown-from-start;
+
+            position: absolute;
+            top: 0;
+            width: $bla-sidebar-width;
+            left: $normal-size;
+            max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
+            overflow-y: auto;
+            overflow-x: hidden;
+            background-color: var(--blue-sidebar-bg);
+
+            &::before {
+                content: none;
+            }
+        }
+
+        &:has(.blue-menu-item-dropdown) {
+            & > .blue-menu-item {
+                @extend .highlighted;
+            }
+        }
+    }
+}
+
+@mixin show-action-menu-again() {
+    max-height: initial;
+    overflow: initial;
+
+    .blue-actions-menu {
+        max-width: initial;
+    }
+}
+
+@mixin actions($breakpoint) {
+    @media (max-width: #{$breakpoint + 1px}) {
+        &.open {
+            display: block;
+            width: auto;
+            position: absolute;
+            z-index: 1;
+            left: unset;
+            top: 0.25rem;
+            box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
+            animation: fadeInDown 0.5s;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
+
+            border-radius: $border-radius;
+
+            @include show-action-menu-again();
+
+            .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
+                display: flex;
+            }
+
+            .blue-actions-menu {
+                flex-direction: column;
+                .blue-menu-item-dropdown {
+                    --blue-sidebar-bg: #{darken($theme, 34%)};
+                }
+            }
+        }
+
+        .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
+            display: none;
+        }
+    }
+
+    @media (min-width: $breakpoint) {
+        @include show-action-menu-again();
+
+        .blue-actions-menu .blue-actions-label {
+            display: inline;
+        }
+
+        .blue-actions-menu-toggle {
+            display: none;
+        }
+
+        .blue-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown,
+        .blue-actions-menu > .blue-menu-item-wrapper > * > .blue-menu-item-dropdown {
+            position: absolute;
+            right: 0;
+        }
+    }
+}
+
+@mixin switch($width: 35px, $height: 20px, $padding: 3px, $color: $body-color, $color-active: $success) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+
+        input {
+            display: none;
+        }
+
+        &.disabled {
+            opacity: 0.8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: 0.4s;
+
+            @media (prefers-reduced-motion) {
+                transition: none;
+            }
+
+            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: 0.4s;
+
+                @media (prefers-reduced-motion) {
+                    transition: none;
+                }
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size * 0.5);
+                transition: margin-left 0.4s;
+
+                @media (prefers-reduced-motion) {
+                    transition: none;
+                }
+
+                color: $color;
+            }
+        }
+
+        input:checked {
+            & + .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX($width - $slider-size - ($padding * 2));
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size * 0.5) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}
+
+@mixin customProperty($name, $value) {
+    // fallback for older browser who do not support custom properties / css variables
+    #{$name}: #{$value};
+
+    // create a css variable (this might override the variable on any of the ancestor elements)
+    --#{$name}: #{$value};
+
+    // use the css variable on the property
+    #{$name}: var(--#{$name}, #{$value});
+}
+
+@mixin scroll-shadow($bg, $light-base: white) {
+    background: linear-gradient($bg 30%, rgba($light-base, 0)),
+        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
+        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
+        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+}
+
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes blAppearUp {
+    from {
+        margin-top: 2.5rem;
+    }
+    to {
+        margin-top: 0;
+    }
+}
+
+@keyframes blue-menu-item-dropdown {
+    from {
+        transform: translateY(-50%);
+        opacity: 0;
+    }
+}
+
+@keyframes enabledBlueAppPage {
+    from {
+        transform: scale(0.98);
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes alert-in {
+    from {
+        transform: scale(0, 0);
+        opacity: 0.2;
+        transition: 0s;
+    }
+}
+
+@keyframes circlebounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+    50% {
+        transform: scale(1);
+    }
+}
+
+@keyframes scrolling {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+
 @mixin bsBanner($file) {
   /*!
    * Bootstrap #{$file} v5.3.8 (https://getbootstrap.com/)
@@ -4186,14 +4187,14 @@ $corner-shape: #{round} !default;
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
 }
-
-@include bsBanner("");
-
-// scss-docs-start import-stack
-// Configuration
-
-
-
+
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+
+
+
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@@ -4368,8 +4369,8 @@ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "l
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 $gutters: $spacers !default;
-
-
+
+
 // Utilities
 
 $utilities: () !default;
@@ -5176,9 +5177,9 @@ $utilities: map-merge(
   ),
   $utilities
 );
-
-
-// Layout & components
+
+
+// Layout & components
 :root,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -5366,7 +5367,7 @@ $utilities: map-merge(
     // scss-docs-end root-dark-mode-vars
   }
 }
-
+
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 
@@ -5984,7 +5985,7 @@ progress {
 [hidden] {
   display: none !important;
 }
-
+
 //
 // Headings
 //
@@ -6091,7 +6092,7 @@ progress {
     content: "\2014\00A0"; // em dash, nbsp
   }
 }
-
+
 // Responsive images (ensure images don't scale beyond their parents)
 //
 // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
@@ -6134,7 +6135,7 @@ progress {
   @include font-size($figure-caption-font-size);
   color: $figure-caption-color;
 }
-
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
@@ -6176,7 +6177,7 @@ progress {
     }
   }
 }
-
+
 // Row
 //
 // Rows contain your columns.
@@ -6216,7 +6217,7 @@ progress {
 @if $enable-grid-classes {
   @include make-grid-columns();
 }
-
+
 //
 // Basic Bootstrap table
 //
@@ -6388,7 +6389,7 @@ progress {
     }
   }
 }
-
+
 //
 // Labels
 //
@@ -7260,7 +7261,7 @@ textarea {
 }
 // scss-docs-end form-validation-states-loop
 
-
+
 //
 // Base styles
 //
@@ -7477,7 +7478,7 @@ textarea {
 .btn-sm {
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
-
+
 .fade {
   @include transition($transition-fade);
 
@@ -7505,7 +7506,7 @@ textarea {
   }
 }
 // scss-docs-end collapse-classes
-
+
 // The dropdown wrapper (`<div>`)
 .dropup,
 .dropend,
@@ -7756,7 +7757,7 @@ textarea {
   --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
   // scss-docs-end dropdown-dark-css-vars
 }
-
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
@@ -7904,7 +7905,7 @@ textarea {
     @include border-top-radius(0);
   }
 }
-
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with
@@ -8102,7 +8103,7 @@ textarea {
     display: block;
   }
 }
-
+
 // Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -8392,7 +8393,7 @@ textarea {
     }
   }
 }
-
+
 //
 // Base styles
 //
@@ -8631,7 +8632,7 @@ textarea {
     }
   }
 }
-
+
 //
 // Base styles
 //
@@ -8785,7 +8786,7 @@ textarea {
     }
   }
 }
-
+
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
@@ -8826,7 +8827,7 @@ textarea {
     color: var(--#{$prefix}breadcrumb-item-active-color);
   }
 }
-
+
 .pagination {
   // scss-docs-start pagination-css-vars
   --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
@@ -8936,7 +8937,7 @@ textarea {
 .pagination-sm {
   @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
 }
-
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and
@@ -8975,7 +8976,7 @@ textarea {
   position: relative;
   top: -1px;
 }
-
+
 //
 // Base styles
 //
@@ -9044,7 +9045,7 @@ textarea {
   }
 }
 // scss-docs-end alert-modifiers
-
+
 // Disable animation if transitions are disabled
 
 // scss-docs-start progress-keyframes
@@ -9113,7 +9114,7 @@ textarea {
     }
   }
 }
-
+
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
@@ -9313,7 +9314,7 @@ textarea {
   }
 }
 // scss-docs-end list-group-modifiers
-
+
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
@@ -9380,7 +9381,7 @@ textarea {
     @include btn-close-white();
   }
 }
-
+
 .toast {
   // scss-docs-start toast-css-vars
   --#{$prefix}toast-zindex: #{$zindex-toast};
@@ -9454,7 +9455,7 @@ textarea {
   padding: var(--#{$prefix}toast-padding-x);
   word-wrap: break-word;
 }
-
+
 // stylelint-disable function-disallowed-list
 
 // .modal-open      - body class for killing the scroll
@@ -9695,7 +9696,7 @@ textarea {
   }
 }
 // scss-docs-end modal-fullscreen-loop
-
+
 // Base class
 .tooltip {
   // scss-docs-start tooltip-css-vars
@@ -9815,7 +9816,7 @@ textarea {
   background-color: var(--#{$prefix}tooltip-bg);
   @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }
-
+
 .popover {
   // scss-docs-start popover-css-vars
   --#{$prefix}popover-zindex: #{$zindex-popover};
@@ -10012,7 +10013,7 @@ textarea {
   padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
   color: var(--#{$prefix}popover-body-color);
 }
-
+
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@@ -10239,7 +10240,7 @@ textarea {
     @include carousel-dark();
   }
 }
-
+
 //
 // Rotating border
 //
@@ -10326,7 +10327,7 @@ textarea {
     }
   }
 }
-
+
 // stylelint-disable function-disallowed-list
 
 %offcanvas-css-vars {
@@ -10474,7 +10475,7 @@ textarea {
   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
   overflow-y: auto;
 }
-
+
 .placeholder {
   display: inline-block;
   min-height: 1em;
@@ -10526,9 +10527,9 @@ textarea {
     mask-position: -200% 0%;
   }
 }
-
-
-// Helpers
+
+
+// Helpers
 .clearfix {
   @include clearfix();
 }
@@ -10726,24 +10727,23 @@ textarea {
   opacity: $hr-opacity;
 }
 
-
-
-// Custom added utilities for Blue Web
-$utilities: map-merge(
-    $utilities,
-    (
-        "position":
-            map-merge(
-                map-get($utilities, "position"),
-                (
-                    responsive: true
-                )
-            )
-    )
-);
-
-// Utilities
-// Loop over each breakpoint
+
+
+// Enable responsive for position
+$utilities: map-merge(
+    $utilities,
+    (
+        "position": map-merge(
+                map-get($utilities, "position"),
+                (
+                    responsive: true
+                )
+            )
+    )
+);
+
+// Utilities
+// Loop over each breakpoint
 @each $breakpoint in map-keys($grid-breakpoints) {
 
   // Generate media query if needed
@@ -10774,1026 +10774,848 @@ $utilities: map-merge(
         @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
           @include generate-utility($utility, $infix, true);
         }
-      }
+      }
+    }
+  }
+}
+
+
+// Print utilities
+@media print {
+  @each $key, $utility in $utilities {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Then check if the utility needs print styles
+    @if type-of($utility) == "map" and map-get($utility, print) == true {
+      @include generate-utility($utility, "-print");
+    }
+  }
+}
+
+// scss-docs-end import-stack
+
+
+// Make it overridable via CSS variables, as it is not yet possible in Bootstrap.
+// Check with a newer Bootstrap version to see if it is still necessary.
+.form-check-input:checked {
+    background-color: var(--bs-primary, #{$form-check-input-checked-bg-color});
+    border-color: var(--bs-primary, #{$form-check-input-checked-border-color});
+}
+
+// Resets cursor from Bootstrap' _reboot.scss based on option.
+@if ($enable-button-pointers: false) {
+    summary,
+    [role="button"] {
+        cursor: unset;
+    }
+}
+
+// In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
+// Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.
+.blue-page-header,
+.page-header {
+    padding-bottom: 0.563rem;
+    margin: 2.5rem 0 1.25rem;
+    border-bottom: 0.25rem solid var(--blue-page-header-border-color, $table-border-color);
+}
+
+// Vertically alignment, especially for Bootstrap Icons.
+.blue-icon,
+.bi {
+    display: inline-block;
+    vertical-align: -0.125em;
+}
+
+* {
+    scrollbar-width: thin;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    background: var(--blue-app-bg, #{$app-bg});
+}
+
+// Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
+.btn,
+.nav-pills > li > a,
+.pager li > a,
+.pagination > li > a,
+.list-group a.list-group-item {
+    &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
+        transition:
+            background-color 0.3s,
+            color 0.15s,
+            box-shadow 0.3s,
+            opacity 0.3s;
+        position: relative;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            z-index: 1;
+        }
+    }
+}
+
+// .blue-header-title.sidebar {
+//     width: $bla-sidebar-width;
+//     padding-left: calc(#{$normal-size} + #{$spacer});
+//     transform: translateX(-100%);
+//     transition: transform 0.4s;
+//     background: var(--blue-sidebar-bg);
+//     color: $sidebar-color;
+
+//     @media (prefers-reduced-motion) {
+//         transition: none;
+//     }
+// }
+
+.blue-scroll-shadow {
+    @include scroll-shadow(var(--bs-body-bg));
+}
+
+// Sets `margin: 0` to last child.
+// Useful for creating a gap between items together with `mb-3`.
+// Inspired by Tailwind CSS class `last:m-0`.
+.m-last-0:last-child {
+    margin: 0 !important;
+}
+
+// Shows empty message if the element has no children.
+// Can be used for lists and such.
+// For localization you should override CSS variable `--message` dynamically.
+.blue-empty-message {
+    --message: "No items found.";
+    &:empty::before {
+        content: var(--message);
+        color: var(--bs-secondary-color);
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+    }
+}
+
+.blue-loading {
+    background-color: $primary;
+}
+
+.blue-status-alert,
+.blue-status-circle {
+    position: fixed;
+    display: none;
+    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
+}
+
+.blue-status-alert,
+.blue-status-circle {
+    z-index: 6000;
+}
+
+.blue-status-alert {
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 50%;
+        left: 0;
+        pointer-events: none;
+        background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
+        background-repeat: no-repeat;
+        background-position: 50%;
+        animation: alert-in 1s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+
+        & {
+            transform: scale(10, 10);
+            opacity: 0;
+            transition:
+                transform 0.5s,
+                opacity 1s;
+        }
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+    }
+
+    & {
+        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+        white-space: pre-wrap;
+
+        bottom: 2.5rem + 4rem + 0.938rem;
+        left: 1rem;
+        right: 1rem;
+
+        max-height: calc(100vh - 15rem);
+        max-height: calc(100dvh - 15rem);
+    }
+
+    .alert-body {
+        max-height: calc(100vh - 16rem);
+        max-height: calc(100dvh - 16rem);
+        overflow-y: auto;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .blue-status-alert {
+        left: calc(50% - 18.75rem);
+        right: calc(50% - 18.75rem);
+    }
+}
+
+.blue-status-circle {
+    bottom: 2.5rem;
+    left: calc(50% - 1.25rem);
+    border-radius: 50%;
+    width: 4rem;
+    height: 4rem;
+    color: #fff;
+
+    &:not(.blue-loading) {
+        align-items: center;
+        justify-content: center;
+        font-size: 2.5em;
+    }
+}
+
+.blue-status-success {
+    background-color: #5cb85c;
+}
+
+.blue-status-info {
+    background-color: #5bc0de;
+}
+
+.blue-status-warning {
+    background-color: #d58512;
+}
+
+.blue-status-danger {
+    background-color: #d43f3a;
+}
+
+.spinner-bounce-circle {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+    margin: 0;
+}
+
+.spinner-bounce-circle div {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    animation: circlebounce 2s infinite ease-in-out;
+}
+
+.spinner-bounce-circle div:nth-child(1) {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+}
+
+.blue-menu-item {
+    display: inline-flex;
+    align-items: center;
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
+    color: inherit;
+    border-color: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-border-color: transparent;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+        }
+    }
+
+    &::before {
+        --visual-padding: 0.125rem;
+
+        content: "";
+        position: absolute;
+        top: var(--visual-padding);
+        right: var(--visual-padding);
+        bottom: var(--visual-padding);
+        left: var(--visual-padding);
+        background-color: currentColor;
+        border-radius: var(--bs-btn-border-radius);
+        transform: scale(0.9);
+        opacity: 0;
+        transition: all 0.2s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.active,
+    &:has(+ :popover-open) {
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.active,
+    &:has(+ :popover-open) {
+        &::before {
+            opacity: 0.16;
+        }
+    }
+
+    &.current {
+        position: relative;
+        &::after {
+            @include blue-menu-item-indicator();
+        }
+    }
+}
+
+.blue-horizontal {
+    .blue-menu-item.current::after {
+        @include blue-menu-item-indicator-horizontal();
+    }
+}
+
+.blue-menu-item-current-hidden {
+    &:is(:where(.blue-menu-item):is(.current) *) {
+        display: none !important;
+    }
+}
+.blue-menu-item-default-hidden {
+    &:is(:where(.blue-menu-item):is(:not(.current)) *) {
+        display: none !important;
+    }
+}
+
+.blue-header-title {
+    a {
+        color: inherit;
+
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}
+
+.blue-header-title-image {
+    width: var(--blue-header-title-image-width, var(--blue-header-title-image-size, 2rem));
+    height: var(--blue-header-title-image-height, var(--blue-header-title-image-size, 2rem));
+}
+
+.blue-input-group {
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $input-bg;
+
+    &.focus,
+    &:has(input:focus) {
+        box-shadow: $input-btn-focus-box-shadow;
+        border-color: $input-focus-border-color;
+
+        .input-group-text {
+            color: #{var(--bs-primary-text-emphasis)};
+        }
+    }
+
+    .input-group-text {
+        border-color: transparent;
+        background-color: transparent;
+    }
+
+    .form-control {
+        border: none;
+        background-color: transparent !important;
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+}
+
+.blue-actions {
+    --max-width: calc(
+        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-font-size, 1rem) +
+            var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-border-width, 1px)
+    );
+
+    max-height: var(--blue-header-height);
+    overflow: hidden;
+
+    .blue-actions-menu {
+        max-width: var(--max-width);
+        & > .blue-menu-item-wrapper {
+            display: block;
+            position: relative;
+        }
+    }
+
+    &.open {
+        left: 0;
+        right: 0;
+        top: 0;
+        background-color: var(--blue-menu-item-dropdown-bg);
+    }
+
+    &.none {
+        @include actions(0px);
+    }
+
+    &.sm {
+        @include actions(768px);
+    }
+
+    &.md {
+        @include actions(992px);
+    }
+
+    &.lg {
+        @include actions(1200px);
+    }
+
+    // Support for MenuItems
+    .blue-menu-item {
+        width: auto;
+
+        &.active::after {
+            @include blue-menu-item-indicator-horizontal();
+        }
+    }
+
+    .blue-menu-item-dropdown-toggle .blue-menu-item-label {
+        margin-right: 0.5rem;
+    }
+
+    .blue-menu-item-label {
+        display: initial;
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-start,
+.blue-tooltip-end,
+.blue-tooltip-up,
+.blue-tooltip-down {
+    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+    --#{$prefix}tooltip-color: #{$tooltip-color};
+    --#{$prefix}tooltip-bg: #{$tooltip-bg};
+    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+
+    // @apply relative inline-block;
+    position: relative;
+    display: inline-block;
+
+    --tt-bg: var(--#{$prefix}tooltip-bg, black);
+    --tt-off: calc(100% + 0.5rem);
+    --tt-tail: calc(100% + 1px + 0.25rem);
+
+    > :where(.blue-tooltip-content),
+    &[data-tooltip]:before {
+        // @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
+
+        @include reset-text();
+        @include font-size(var(--#{$prefix}tooltip-font-size));
+
+        color: var(--#{$prefix}tooltip-color);
+        @include border-radius(var(--#{$prefix}tooltip-border-radius));
+        position: absolute;
+        max-width: var(--#{$prefix}tooltip-max-width);
+        padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+        text-align: center;
+        white-space: normal;
+        opacity: 0;
+
+        line-height: 1.25em;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+        background-color: var(--tt-bg);
+        width: max-content;
+        pointer-events: none;
+        z-index: var(--#{$prefix}tooltip-zindex);
+        --tw-content: attr(data-tooltip);
+        content: var(--tw-content);
+    }
+
+    &:after {
+        // @apply absolute opacity-0;
+        position: absolute;
+        opacity: 0;
+
+        background-color: var(--tt-bg);
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+        content: "";
+        pointer-events: none;
+        width: 0.625rem;
+        height: 0.25rem;
+        display: block;
+        position: absolute;
+        mask-repeat: no-repeat;
+        mask-position: -1px 0;
+        --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
+        mask-image: var(--mask-tooltip);
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-up {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+        inset: auto auto var(--tt-off) 50%;
+    }
+}
+
+.blue-tooltip-down {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+        inset: var(--tt-off) auto auto 50%;
+    }
+}
+
+.blue-tooltip-start {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+        inset: 50% var(--tt-off) auto auto;
+    }
+}
+
+.blue-tooltip-end {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+        inset: 50% auto auto var(--tt-off);
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-start,
+.blue-tooltip-end,
+.blue-tooltip-up,
+.blue-tooltip-down {
+    &.blue-tooltip-open,
+    &[data-tooltip]:hover,
+    &:hover,
+    &:has(:focus-visible) {
+        > .blue-tooltip-content,
+        &[data-tooltip]:before,
+        &:after {
+            // @apply opacity-100;
+            opacity: var(--#{$prefix}tooltip-opacity);
+            --tt-pos: 0rem;
+            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        }
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-up {
+    &:after {
+        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+        inset: auto auto var(--tt-tail) 50%;
+    }
+}
+
+.blue-tooltip-down {
+    &:after {
+        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+        inset: var(--tt-tail) auto auto 50%;
+    }
+}
+
+.blue-tooltip-start {
+    &:after {
+        transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+        inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    }
+}
+
+.blue-tooltip-end {
+    &:after {
+        transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+        inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    }
+}
+
+@media (hover: hover) {
+    .blue-d-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
+            .blue-d-hover-content-active {
+                display: none !important;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active,
+        &:focus-within {
+            .blue-d-hover-content-default {
+                display: none !important;
+            }
+        }
+    }
+
+    .blue-opacity-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
+            .blue-opacity-hover-content-active {
+                opacity: 0;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active,
+        &:focus-within {
+            .blue-opacity-hover-content-default {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+// Extending `.icon-link > .bi` by Bootstrap to allow wrapped icons.
+
+.blue-btn-icon-wrapper {
+    display: contents;
+
+    & > * {
+        flex-shrink: 0;
+        @include transition($icon-link-icon-transition);
+    }
+    & > svg {
+        width: $icon-link-icon-size;
+        height: $icon-link-icon-size;
+        fill: currentcolor;
+    }
+}
+
+.icon-link-hover {
+    &:hover,
+    &:focus-visible {
+        .blue-btn-icon-wrapper > * {
+            transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+        }
+    }
+}
+
+.blue-btn-square {
+    padding: calc(var(--bs-btn-padding-y) + #{$icon-link-underline-offset});
+}
+
+// Inspired by Bootstrap's button system but extended with more variants
+
+// Soft buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: shade-color($value, 60%);
+
+    .blue-btn-soft-#{$color} {
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        @include button-variant(
+            $bg,
+            $bg,
+            $text-color,
+            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-active-border-shade-amount)
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 60%);
+
+        .blue-btn-soft-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            @include button-variant(
+                $bg,
+                $bg,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}
+
+// Plain buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: $value;
+
+    $active-background: if(
+        $color == $color-contrast-light,
+        shade-color($value, $btn-active-bg-shade-amount),
+        tint-color($value, $btn-active-bg-tint-amount)
+    );
+
+    .blue-btn-plain-#{$color} {
+        &:not(:hover) {
+            box-shadow: none;
+            background-image: none;
+        }
+
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        // More contrast for secondary plain button
+        @if $color == "secondary" {
+            $text-color: shade-color($value, 60%);
+        }
+
+        @include button-variant(
+            transparent,
+            transparent,
+            $text-color,
+            $hover-background: tint-color($value, 80%),
+            $hover-border: tint-color($value, 80%),
+            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
+            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $disabled-background: transparent,
+            $disabled-border: transparent,
+            $disabled-color: $text-color
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 40%);
+
+        .blue-btn-plain-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            // More contrast for secondary plain button
+            @if $color == "secondary" {
+                $text-color: tint-color($value, 60%);
+            }
+
+            @include button-variant(
+                transparent,
+                transparent,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+    .col {
+        flex: initial;
+        max-width: initial;
+        width: 100%;
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @for $i from 1 through $columns {
+            .col#{$infix}-#{$i} {
+                @extend .col;
+            }
+        }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        // @for $i from 1 through $columns {
+        //     .col#{$infix}-#{$i} {
+        //         flex: initial;
+        //         max-width: initial;
+        //         width: 100%;
+        //     }
+        // }
+
+        @if breakpoint-min($breakpoint, $breakpoints) {
+            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
+                @for $i from 1 through $columns {
+                    .col#{$infix}-#{$i} {
+                        @include make-col($i, $columns);
+                    }
+                }
+            }
+        }
     }
-  }
 }
 
-
-// Print utilities
-@media print {
-  @each $key, $utility in $utilities {
-    // The utility can be disabled with `false`, thus check if the utility is a map first
-    // Then check if the utility needs print styles
-    @if type-of($utility) == "map" and map-get($utility, print) == true {
-      @include generate-utility($utility, "-print");
-    }
-  }
+.blue-container-grid {
+    container-type: inline-size;
+    @include make-grid-columns-cq();
 }
-
-// scss-docs-end import-stack
-
-
-// Make it overridable via CSS variables, as it is not yet possible in Bootstrap.
-// Check with a newer Bootstrap version to see if it is still necessary.
-.form-check-input:checked {
-    background-color: var(--bs-primary, #{$form-check-input-checked-bg-color});
-    border-color: var(--bs-primary, #{$form-check-input-checked-border-color});
-}
-
-// Resets cursor from Bootstrap' _reboot.scss based on option.
-@if ($enable-button-pointers: false) {
-    summary,
-    [role="button"] {
-        cursor: unset;
-    }
-}
-
-// In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
-// Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.
-.blue-page-header,
-.page-header {
-    padding-bottom: 0.563rem;
-    margin: 2.5rem 0 1.25rem;
-    border-bottom: 0.25rem solid var(--blue-page-header-border-color, $table-border-color);
-}
-
-// Vertically alignment, especially for Bootstrap Icons.
-.blue-icon,
-.bi {
-    display: inline-block;
-    vertical-align: -0.125em;
-}
-
-* {
-    scrollbar-width: thin;
-}
-
-html,
-body {
-    height: 100%;
-}
-
-body {
-    background: var(--blue-app-bg, #{$app-bg});
-}
-
-// Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
-.btn,
-.nav-pills > li > a,
-.pager li > a,
-.pagination > li > a,
-.list-group a.list-group-item {
-    &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
-        transition:
-            background-color 0.3s,
-            color 0.15s,
-            box-shadow 0.3s,
-            opacity 0.3s;
-        position: relative;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-
-        &:hover,
-        &:active,
-        &:focus {
-            z-index: 1;
-        }
-    }
-}
-
-.sign-in-screen {
-    padding-top: $normal-size;
-
-    .sign-in-container {
-        animation: enabledBlueAppPage 0.5s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
-    }
-
-    @media screen and (min-width: 768px) {
-        .sign-in-container {
-            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
-            width: var(--blue-sign-in-container-md-width, auto);
-        }
-    }
-}
-
-.blue-header-title.sidebar {
-    width: $bla-sidebar-width;
-    padding-left: calc(#{$normal-size} + #{$spacer});
-    transform: translateX(-100%);
-    transition: transform 0.4s;
-    background: var(--blue-sidebar-bg);
-    color: $sidebar-color;
-
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
-
-.blue-scroll-shadow {
-    @include scroll-shadow(var(--bs-body-bg));
-}
-
-// Sets `margin: 0` to last child.
-// Useful for creating a gap between items together with `mb-3`.
-// Inspired by Tailwind CSS class `last:m-0`.
-.m-last-0:last-child {
-    margin: 0 !important;
-}
-
-// Shows empty message if the element has no children.
-// Can be used for lists and such.
-// For localization you should override CSS variable `--message` dynamically.
-.blue-empty-message {
-    --message: "No items found.";
-    &:empty::before {
-        content: var(--message);
-        color: var(--bs-secondary-color);
-        display: flex;
-        padding: 1rem;
-        justify-content: center;
-    }
-}
-
-.blue-loading {
-    background-color: $primary;
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    position: fixed;
-    display: none;
-    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    z-index: 6000;
-}
-
-.blue-status-alert {
-    &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 50%;
-        left: 0;
-        pointer-events: none;
-        background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
-        background-repeat: no-repeat;
-        background-position: 50%;
-        animation: alert-in 1s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
-
-        & {
-            transform: scale(10, 10);
-            opacity: 0;
-            transition:
-                transform 0.5s,
-                opacity 1s;
-        }
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    & {
-        transform: translate3d(0, 0, 0);
-        overflow: hidden;
-        white-space: pre-wrap;
-
-        bottom: 2.5rem + 4rem + 0.938rem;
-        left: 1rem;
-        right: 1rem;
-
-        max-height: calc(100vh - 15rem);
-        max-height: calc(100dvh - 15rem);
-    }
-
-    .alert-body {
-        max-height: calc(100vh - 16rem);
-        max-height: calc(100dvh - 16rem);
-        overflow-y: auto;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .blue-status-alert {
-        left: calc(50% - 18.75rem);
-        right: calc(50% - 18.75rem);
-    }
-}
-
-.blue-status-circle {
-    bottom: 2.5rem;
-    left: calc(50% - 1.25rem);
-    border-radius: 50%;
-    width: 4rem;
-    height: 4rem;
-    color: #fff;
-
-    &:not(.blue-loading) {
-        align-items: center;
-        justify-content: center;
-        font-size: 2.5em;
-    }
-}
-
-.blue-status-success {
-    background-color: #5cb85c;
-}
-
-.blue-status-info {
-    background-color: #5bc0de;
-}
-
-.blue-status-warning {
-    background-color: #d58512;
-}
-
-.blue-status-danger {
-    background-color: #d43f3a;
-}
-
-.spinner-bounce-circle {
-    width: 100%;
-    height: 100%;
-
-    position: relative;
-    margin: 0;
-}
-
-.spinner-bounce-circle div {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #fff;
-    opacity: 0.6;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    animation: circlebounce 2s infinite ease-in-out;
-}
-
-.spinner-bounce-circle div:nth-child(1) {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-}
-
-.blue-menu-item {
-    display: inline-flex;
-    align-items: center;
-    transition:
-        width 0.5s,
-        background-color 0.3s,
-        color 0.15s,
-        box-shadow 0.3s,
-        opacity 0.3s !important;
-    color: inherit;
-    border-color: transparent;
-    --bs-btn-active-border-color: transparent;
-    --bs-btn-disabled-border-color: transparent;
-
-    @media (prefers-reduced-motion) {
-        transition: none !important;
-    }
-
-    &:focus-visible {
-        &,
-        &.active {
-            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-        }
-    }
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
-        background-color: currentColor;
-        border-radius: $border-radius;
-        transform: scale(0.9);
-        opacity: 0;
-        transition: all 0.2s;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    &:hover,
-    &:active,
-    &.active,
-    &:has(+ :popover-open) {
-        &::before {
-            transform: scale(1);
-            opacity: 0.25;
-        }
-    }
-
-    &.active,
-    &:has(+ :popover-open) {
-        &::before {
-            opacity: 0.16;
-        }
-    }
-
-    &.current {
-        position: relative;
-        &::after {
-            @include blue-menu-item-indicator();
-        }
-    }
-}
-
-.blue-horizontal {
-    .blue-menu-item.current::after {
-        @include blue-menu-item-indicator-horizontal();
-    }
-}
-
-.blue-menu-item-current-hidden {
-    &:is(:where(.blue-menu-item):is(.current) *) {
-        display: none !important;
-    }
-}
-.blue-menu-item-default-hidden {
-    &:is(:where(.blue-menu-item):is(:not(.current)) *) {
-        display: none !important;
-    }
-}
-
-// @keyframes blue-menu-item-indicator-in-from-side {
-//     from {
-//         transform: translateX(-100%);
-//     }
-//     to {
-//         transform: translateX(1);
-//     }
-// }
-
-// @keyframes blue-menu-item-indicator-in-from-below {
-//     from {
-//         transform: translateY(100%);
-//     }
-//     to {
-//         transform: translateY(1);
-//     }
-// }
-
-// .blue-menu-item {
-//     transition:
-//         width 0.5s,
-//         background-color 0.3s,
-//         color 0.15s,
-//         box-shadow 0.3s,
-//         opacity 0.3s !important;
-
-//     @media (prefers-reduced-motion) {
-//         transition: none !important;
-//     }
-
-//     & {
-//         border: none;
-//         box-shadow: none;
-//         background-image: none;
-//     }
-
-//     &:focus {
-//         box-shadow: none;
-//     }
-
-//     &:focus-visible {
-//         &,
-//         &.active {
-//             box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-//         }
-//     }
-// }
-
-// .blue-menu-item-icon {
-//     display: inline-block;
-
-//     & > * {
-//         display: block;
-//         width: 1.5rem;
-//     }
-// }
-
-// .blue-menu-item-icon.iconForActive {
-//     display: none;
-// }
-
-// .blue-menu-item.active {
-//     .blue-menu-item-icon.hasIconForActive {
-//         display: none;
-//     }
-//     .blue-menu-item-icon.iconForActive {
-//         display: inline-block;
-//     }
-// }
-
-// .blue-menu-item-dropdown {
-//     margin-left: 1rem;
-//     animation: blue-menu-item-dropdown 0.15s;
-//     position: relative;
-
-//     @media (prefers-reduced-motion) {
-//         animation-duration: 0s;
-//     }
-
-//     &::before {
-//         content: "";
-//         position: absolute;
-//         top: 0.125rem;
-//         right: 0.125rem;
-//         bottom: 0.125rem;
-//         left: 0.125rem;
-//         border-radius: $border-radius;
-//         box-shadow: $box-shadow;
-//         border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-//         background-color: var(--blue-menu-item-dropdown-bg);
-//     }
-
-//     &[popover] {
-//         position: fixed;
-//         margin: 0;
-//         padding: 0;
-//         z-index: 1000;
-//         border: none;
-//         background: transparent;
-//         border-radius: calc(#{$border-radius} + 0.1rem);
-//         box-shadow: $box-shadow;
-//     }
-// }
-
-// .blue-menu-item {
-//     color: inherit;
-//     width: auto;
-//     height: $normal-size;
-//     font-size: $bla-btn-font-size;
-//     display: flex;
-//     align-items: center;
-//     border-color: transparent;
-//     --bs-btn-padding-x: 0.437rem;
-
-//     &::before {
-//         @include blue-menu-item-background();
-//     }
-
-//     &[draggable] {
-//         cursor: grab;
-
-//         &:active {
-//             box-shadow: inset 0 0 0.25rem;
-//         }
-//     }
-
-//     &:hover,
-//     &:active,
-//     &.highlighted,
-//     &:has(+ :popover-open) {
-//         color: inherit;
-//         border-color: transparent;
-
-//         &::before {
-//             transform: scale(1);
-//             opacity: 0.25;
-//         }
-//     }
-
-//     &.highlighted,
-//     &:has(+ :popover-open) {
-//         &::before {
-//             opacity: 0.16;
-//         }
-//     }
-
-//     &:hover,
-//     &:active {
-//         &::before {
-//             opacity: 0.25;
-//         }
-//     }
-
-//     &.active::after {
-//         @include blue-menu-item-indicator();
-//     }
-
-//     & > * + .blue-menu-item-label {
-//         margin-left: 0.5rem;
-//     }
-// }
-
-// .blue-menu-item-wrapper {
-//     display: contents;
-// }
-
-// .blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
-// .blue-menu-item-dropdown > .blue-menu-item {
-//     width: 100%;
-// }
-
-.blue-header-title {
-    a {
-        color: inherit;
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-}
-
-.blue-header-title-image {
-    width: var(--blue-header-title-image-width, var(--blue-header-title-image-size, 2rem));
-    height: var(--blue-header-title-image-height, var(--blue-header-title-image-size, 2rem));
-}
-
-.blue-input-group {
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $input-bg;
-
-    &.focus,
-    &:has(input:focus) {
-        box-shadow: $input-btn-focus-box-shadow;
-        border-color: $input-focus-border-color;
-
-        .input-group-text {
-            color: #{var(--bs-primary-text-emphasis)};
-        }
-    }
-
-    .input-group-text {
-        border-color: transparent;
-        background-color: transparent;
-    }
-
-    .form-control {
-        border: none;
-        background-color: transparent !important;
-
-        &:focus {
-            box-shadow: none;
-        }
-    }
-}
-
-.blue-actions {
-    --max-width: calc(
-        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-font-size, 1rem) +
-            var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-border-width, 1px)
-    );
-
-    max-height: $normal-size;
-    overflow: hidden;
-
-    .blue-actions-menu {
-        max-width: var(--max-width);
-        & > .blue-menu-item-wrapper {
-            display: block;
-            position: relative;
-        }
-    }
-
-    &.open {
-        left: 0;
-        right: 0;
-        top: 0;
-        background-color: var(--blue-menu-item-dropdown-bg);
-    }
-
-    &.none {
-        @include actions(0px);
-    }
-
-    &.sm {
-        @include actions(768px);
-    }
-
-    &.md {
-        @include actions(992px);
-    }
-
-    &.lg {
-        @include actions(1200px);
-    }
-
-    // Support for MenuItems
-    .blue-menu-item {
-        width: auto;
-
-        &.active::after {
-            @include blue-menu-item-indicator-horizontal();
-        }
-    }
-
-    .blue-menu-item-dropdown-toggle .blue-menu-item-label {
-        margin-right: 0.5rem;
-    }
-
-    .blue-menu-item-label {
-        display: initial;
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-start,
-.blue-tooltip-end,
-.blue-tooltip-up,
-.blue-tooltip-down {
-    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-    --#{$prefix}tooltip-color: #{$tooltip-color};
-    --#{$prefix}tooltip-bg: #{$tooltip-bg};
-    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-
-    // @apply relative inline-block;
-    position: relative;
-    display: inline-block;
-
-    --tt-bg: var(--#{$prefix}tooltip-bg, black);
-    --tt-off: calc(100% + 0.5rem);
-    --tt-tail: calc(100% + 1px + 0.25rem);
-
-    > :where(.blue-tooltip-content),
-    &[data-tooltip]:before {
-        // @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
-
-        @include reset-text();
-        @include font-size(var(--#{$prefix}tooltip-font-size));
-
-        color: var(--#{$prefix}tooltip-color);
-        @include border-radius(var(--#{$prefix}tooltip-border-radius));
-        position: absolute;
-        max-width: var(--#{$prefix}tooltip-max-width);
-        padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-        text-align: center;
-        white-space: normal;
-        opacity: 0;
-
-        line-height: 1.25em;
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-        background-color: var(--tt-bg);
-        width: max-content;
-        pointer-events: none;
-        z-index: var(--#{$prefix}tooltip-zindex);
-        --tw-content: attr(data-tooltip);
-        content: var(--tw-content);
-    }
-
-    &:after {
-        // @apply absolute opacity-0;
-        position: absolute;
-        opacity: 0;
-
-        background-color: var(--tt-bg);
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-        content: "";
-        pointer-events: none;
-        width: 0.625rem;
-        height: 0.25rem;
-        display: block;
-        position: absolute;
-        mask-repeat: no-repeat;
-        mask-position: -1px 0;
-        --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
-        mask-image: var(--mask-tooltip);
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-up {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-        inset: auto auto var(--tt-off) 50%;
-    }
-}
-
-.blue-tooltip-down {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
-        inset: var(--tt-off) auto auto 50%;
-    }
-}
-
-.blue-tooltip-start {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
-        inset: 50% var(--tt-off) auto auto;
-    }
-}
-
-.blue-tooltip-end {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
-        inset: 50% auto auto var(--tt-off);
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-start,
-.blue-tooltip-end,
-.blue-tooltip-up,
-.blue-tooltip-down {
-    &.blue-tooltip-open,
-    &[data-tooltip]:hover,
-    &:hover,
-    &:has(:focus-visible) {
-        > .blue-tooltip-content,
-        &[data-tooltip]:before,
-        &:after {
-            // @apply opacity-100;
-            opacity: var(--#{$prefix}tooltip-opacity);
-            --tt-pos: 0rem;
-            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        }
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-up {
-    &:after {
-        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-        inset: auto auto var(--tt-tail) 50%;
-    }
-}
-
-.blue-tooltip-down {
-    &:after {
-        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
-        inset: var(--tt-tail) auto auto 50%;
-    }
-}
-
-.blue-tooltip-start {
-    &:after {
-        transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
-        inset: 50% calc(var(--tt-tail) + 1px) auto auto;
-    }
-}
-
-.blue-tooltip-end {
-    &:after {
-        transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
-        inset: 50% auto auto calc(var(--tt-tail) + 1px);
-    }
-}
-
-@media (hover: hover) {
-    .blue-d-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
-            .blue-d-hover-content-active {
-                display: none !important;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active,
-        &:focus-within {
-            .blue-d-hover-content-default {
-                display: none !important;
-            }
-        }
-    }
-
-    .blue-opacity-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
-            .blue-opacity-hover-content-active {
-                opacity: 0;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active,
-        &:focus-within {
-            .blue-opacity-hover-content-default {
-                opacity: 0;
-            }
-        }
-    }
-}
-
-// Extending `.icon-link > .bi` by Bootstrap to allow wrapped icons.
-
-.blue-btn-icon-wrapper {
-    display: contents;
-
-    & > * {
-        flex-shrink: 0;
-        @include transition($icon-link-icon-transition);
-    }
-    & > svg {
-        width: $icon-link-icon-size;
-        height: $icon-link-icon-size;
-        fill: currentcolor;
-    }
-}
-
-.icon-link-hover {
-    &:hover,
-    &:focus-visible {
-        .blue-btn-icon-wrapper > * {
-            transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
-        }
-    }
-}
-
-.blue-btn-square {
-    padding: calc(var(--bs-btn-padding-y) + #{$icon-link-underline-offset});
-}
-
-// Inspired by Bootstrap's button system but extended with more variants
-
-// Soft buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: shade-color($value, 60%);
-
-    .blue-btn-soft-#{$color} {
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        @include button-variant(
-            $bg,
-            $bg,
-            $text-color,
-            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-active-border-shade-amount)
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 60%);
-
-        .blue-btn-soft-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            @include button-variant(
-                $bg,
-                $bg,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
-
-// Plain buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: $value;
-
-    $active-background: if(
-        $color == $color-contrast-light,
-        shade-color($value, $btn-active-bg-shade-amount),
-        tint-color($value, $btn-active-bg-tint-amount)
-    );
-
-    .blue-btn-plain-#{$color} {
-        &:not(:hover) {
-            box-shadow: none;
-            background-image: none;
-        }
-
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        @include button-variant(
-            transparent,
-            transparent,
-            $text-color,
-            $hover-background: tint-color($value, 80%),
-            $hover-border: tint-color($value, 80%),
-            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
-            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $disabled-background: transparent,
-            $disabled-border: transparent,
-            $disabled-color: $text-color
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 40%);
-
-        .blue-btn-plain-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            @include button-variant(
-                transparent,
-                transparent,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
-
-
-
-
-
-
-
-
-
-@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-    .col {
-        flex: initial;
-        max-width: initial;
-        width: 100%;
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        @for $i from 1 through $columns {
-            .col#{$infix}-#{$i} {
-                @extend .col;
-            }
-        }
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        // @for $i from 1 through $columns {
-        //     .col#{$infix}-#{$i} {
-        //         flex: initial;
-        //         max-width: initial;
-        //         width: 100%;
-        //     }
-        // }
-
-        @if breakpoint-min($breakpoint, $breakpoints) {
-            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
-                @for $i from 1 through $columns {
-                    .col#{$infix}-#{$i} {
-                        @include make-col($i, $columns);
-                    }
-                }
-            }
-        }
-    }
-}
-
-.blue-container-grid {
-    container-type: inline-size;
-    @include make-grid-columns-cq();
-}
-
+
 // Customize style of Bootstrap's nav-underline
 .nav-underline {
     .nav-link {
@@ -11882,662 +11704,687 @@ input.blue-tab:checked + .blue-tab-content {
 .blue-tabs.nav-underline {
     row-gap: 0;
 }
-
-/**
- * Allows to use Bootstrap Modals but with the native dialog element 
- * without the need of Bootstrap's JavaScript.
- * Even works with Bootstrap's Offcanvas classes.
- */
-
-@keyframes blue-modal-open {
-    from {
-        opacity: 0;
-        scale: var(--ani-scale-from, 95%);
-        translate: var(--ani-translate-from, 0 0);
-    }
-    to {
-        opacity: 1;
-        scale: var(--ani-scale-to, 100%);
-        translate: var(--ani-translate-to, 0 0);
-    }
-}
-
-@keyframes blue-modal-close {
-    from {
-        opacity: 1;
-        scale: var(--ani-scale-to, 100%);
-        translate: var(--ani-translate-to, 0 0);
-    }
-    to {
-        opacity: 0;
-        scale: var(--ani-scale-from, 95%);
-        translate: var(--ani-translate-from, 0 0);
-    }
-}
-
-dialog.blue-modal {
-    --ani-scale-from: 95%;
-    --ani-scale-to: 100%;
-    --ani-translate-from: 0 0;
-    --ani-translate-to: 0 0;
-
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    max-width: none;
-    max-height: none;
-    transition:
-        display 0.2s allow-discrete,
-        overlay 0.2s allow-discrete;
-    animation: blue-modal-close 0.2s forwards;
-
-    .offcanvas-backdrop {
-        display: none;
-    }
-}
-
-dialog.blue-modal[open] {
-    display: block;
-    animation: blue-modal-open 0.2s forwards;
-}
-
-dialog.blue-modal::backdrop {
-    --bs-backdrop-bg: #000;
-    --bs-backdrop-opacity: 0.5;
-    background-color: var(--bs-backdrop-bg);
-    transition: opacity 0.2s;
-    opacity: 0;
-}
-
-dialog.blue-modal[open]::backdrop {
-    opacity: var(--bs-backdrop-opacity);
-}
-
-.blue-modal-backdrop {
-    color: #0000;
-    z-index: -1;
-    grid-row-start: 1;
-    grid-column-start: 1;
-    place-self: stretch stretch;
-    display: grid;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.blue-modal-backdrop > button {
-    opacity: 0;
-    cursor: default;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    dialog.blue-modal,
-    dialog.blue-modal[open],
-    dialog.blue-modal::backdrop {
-        transition: none;
-        animation: none;
-    }
-}
-
-dialog.blue-modal:has(.offcanvas) {
-    --ani-scale-from: 100%;
-}
-
-dialog.blue-modal:has(.offcanvas-top) {
-    --ani-translate-from: 0 -100%;
-}
-
-dialog.blue-modal:has(.offcanvas-end) {
-    --ani-translate-from: 100% 0;
-}
-
-dialog.blue-modal:has(.offcanvas-bottom) {
-    --ani-translate-from: 0 100%;
-}
-
-dialog.blue-modal:has(.offcanvas-start) {
-    --ani-translate-from: -100% 0;
-}
-
-/**
- * The new approach for a global layout with a sidebar, header and main content.
- * Checkboxes are used for states for expanded or drawer.
- */
-
-.blue-layout {
-    --spacing: 0.25rem;
-    --drawer-side-shadow:
-        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
-    --toggler-size: calc(
-        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
-            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
-            var(--bs-btn-border-width, 1px)
-    );
-    --side-width: 18rem;
-    --base-z-index: 0;
-
-    --base-z-index: 500;
-    --side-width: var(--blue-sidebar-width);
-    --toggler-size: var(--blue-menu-item-height);
-
-    --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
-    --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
-
-    height: 100dvh;
-    position: relative;
-    display: grid;
-
-    grid-template-rows: var(--toggler-size) auto;
-    grid-template-areas: "header" "main";
-
-    color: var(--blue-sidebar-color);
-    background-color: var(--blue-sidebar-bg);
-
-    &:has(> .blue-layout-toggle) {
-        grid-template-columns: 0 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) 1fr;
-        grid-template-rows: var(--toggler-size) auto;
-        grid-template-areas:
-            "state .    toggle header header"
-            ".     side main   main   main";
-    }
-}
-
-@include color-mode(dark, false) {
-    .blue-layout {
-        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-        --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color-dark)};
-    }
-}
-
-@media (width >= 64rem) {
-    .blue-layout {
-        &:has(> .blue-layout-state-expand:checked) {
-            grid-template-areas:
-                "state .    toggle header header"
-                ".     side side   side   main";
-        }
-    }
-}
-
-.blue-layout-state {
-    grid-area: state;
-    position: absolute;
-    --size: 0;
-    height: var(--size);
-    width: var(--size);
-    appearance: none;
-    opacity: 0;
-}
-
-.blue-layout-toggle {
-    grid-area: toggle;
-    color: var(--blue-sidebar-color);
-    background-color: var(--blue-sidebar-bg);
-}
-
-.blue-layout-state:focus-visible + .blue-layout-toggle {
-    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
-    box-shadow: var(--trigger-box-shadow);
-}
-
-@media (width < 64rem) {
-    .blue-layout-toggle-expand,
-    #layout-expand {
-        display: none !important;
-    }
-}
-
-@media (width >= 64rem) {
-    .blue-layout-toggle-drawer,
-    #layout-drawer {
-        display: none !important;
-    }
-}
-
-.blue-layout-header {
-    grid-area: header;
-
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    z-index: var(--blue-layout-header-z-index, 4);
-    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
-}
-
-.blue-layout-side {
-    grid-area: side;
-    overflow: auto;
-    background: inherit;
-    scrollbar-color: transparent transparent;
-
-    &:hover,
-    &:focus-within {
-        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
-    }
-}
-
-@media (width < 64rem) {
-    .blue-layout-side {
-        translate: -100% 0;
-        height: 100%;
-        transition: translate 0.2s ease;
-    }
-
-    .blue-layout-state-drawer:checked ~ .blue-layout-side {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: calc(var(--base-z-index) + 1);
-        translate: 0;
-        width: calc(var(--spacing) * 80);
-        box-shadow: var(--drawer-side-shadow);
-    }
-}
-
-.blue-layout-main {
-    overflow: auto;
-    grid-area: main;
-}
-
-.blue-layout-body {
-    --spacing: 0.25rem;
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
-    --bs-link-hover-color: #{$link-hover-color};
-
-    width: calc(100% - var(--spacing) * 2);
-    height: calc(100% - var(--spacing));
-    margin-left: auto;
-    margin-right: auto;
-    overflow: auto;
-    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
-    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
-    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
-    box-shadow: var(--bs-box-shadow-sm);
-    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
-    border-radius: var(--bs-border-radius-lg);
-}
-
-@include color-mode(dark, false) {
-    .blue-layout-body {
-        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-        --bs-link-hover-color: #{$link-hover-color-dark};
-    }
-}
-
-.blue-layout-overlay {
-    position: fixed;
-    z-index: var(--base-z-index);
-    inset: 0;
-    display: none;
-}
-
-@media (width < 64rem) {
-    .blue-layout-state-drawer:checked ~ .blue-layout-overlay {
-        display: block;
-    }
-}
-
-// Collapse with details and animated
-.blue-collapse {
-    interpolate-size: allow-keywords;
-
-    summary {
-        list-style: none;
-    }
-
-    summary::-webkit-details-marker {
-        display: none;
-    }
-
-    .blue-collapse-chevron {
-        transition: transform 0.2s;
-    }
-
-    &[open] > summary .blue-collapse-chevron {
-        --blue-collapse-chevron-rotate: 90deg;
-        transform: rotate(var(--blue-collapse-chevron-rotate));
-    }
-
-    &::details-content {
-        block-size: 0;
-        opacity: 0;
-        translate: 0 -4rem;
-        transition:
-            block-size 0.2s,
-            content-visibility 0.2s,
-            opacity 0.2s,
-            translate 0.2s;
-        transition-behavior: allow-discrete;
-    }
-
-    &[open]::details-content {
-        block-size: auto;
-        opacity: 1;
-        translate: 0;
-    }
-}
-
-@media (prefers-reduced-motion) {
-    .blue-collapse .blue-collapse-chevron,
-    .blue-collapse::details-content {
-        transition: none;
-    }
-}
-
-.blue-collapse-indent {
-    // 0.5em is half of icon width
-    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
-    margin-inline-start: var(--margin-inline-start);
-}
-
-// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
-.blue-collapse-group {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: minmax(0, 1fr);
-    max-width: 100%;
-
-    & > details {
-        display: contents;
-
-        & > summary {
-            grid-column: 2;
-
-            & + * {
-                width: calc(100% + var(--margin-inline-start) - 3px);
-            }
-        }
-    }
-}
-
-.BLUE-actions {
-    display: flex;
-    white-space: nowrap;
-    // overflow-x: auto;
-    // overflow-y: visible;
-}
-
-.BLUE-actions-menu {
-    display: flex;
-    max-width: 100%;
-}
-
-.BLUE-actions-collapse {
-    position: relative;
-}
-
-.BLUE-actions-collapse:not(:has(.BLUE-actions-collapse-visible)) {
-    display: none;
-}
-
-.BLUE-actions-collapse-menu {
-    position: absolute;
-}
-
-.BLUE-actions-collapse-menu:popover-open {
-    display: var(--display);
-}
-
-// Compatibility with MenuItems having dropdowns
-.BLUE-actions-menu > .blue-menu-item-wrapper:has(> .blue-menu-item-dropdown) {
-    display: block;
-    position: relative;
-}
-
-.BLUE-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown {
-    position: absolute;
-}
-
-.blue-anchored {
-    position-try: flip-inline;
-    position-area: bottom span-right;
-    position: fixed;
-
-    // Normalize popover
-    &[popover] {
-        margin: 0;
-        padding: 0;
-        border: 0;
-    }
-}
-
-.blue-anchored-start {
-    position-area: bottom span-right;
-}
-
-.blue-anchored-end {
-    position-area: bottom span-left;
-}
-
-@supports not (anchor-name: --anchor-1) {
-    .blue-anchored-fallback {
-        left: 50%;
-        top: 50%;
-        translate: -50% -50%;
-
-        &::backdrop {
-            --bs-backdrop-bg: #000;
-            --bs-backdrop-opacity: 0.5;
-            background-color: var(--bs-backdrop-bg);
-            transition: opacity 0.2s;
-            opacity: var(--bs-backdrop-opacity);
-        }
-    }
-}
-
-.btn:has(+ :popover-open):not(:focus-visible):not(.blue-menu-item) {
-    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
-    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);
-}
-
-.blue-scrollspy {
-    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
-    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
-    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
-    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-    --#{$prefix}nav-link-color: #{$nav-link-color};
-    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
-
-    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
-    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
-    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
-
-    @media (prefers-reduced-motion: no-preference) {
-        scroll-behavior: smooth;
-    }
-
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
-    scroll-snap-type: y mandatory;
-
-    scroll-marker-group: before;
-
-    &::scroll-marker-group {
-        display: flex;
-        min-height: calc(
-            (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
-                (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
-        );
-        margin-bottom: 0.25rem;
-        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
-        gap: var(--blue-scrollspy-marker-group-gap);
-    }
-
-    & > :is(section, .blue-scrollspy-group) {
-        &::scroll-marker {
-            content: attr(aria-label);
-
-            font-size: var(--#{$prefix}nav-link-font-size);
-            box-sizing: border-box;
-            text-decoration: none;
-
-            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
-
-            border-radius: var(--#{$prefix}nav-tabs-border-radius);
-
-            &:is(:hover, :focus) {
-                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
-            }
-
-            &:target-current,
-            &:is(:active) {
-                color: var(--#{$prefix}nav-tabs-link-active-color);
-                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
-                border-color: var(--#{$prefix}border-color);
-            }
-        }
-    }
-}
-
-.blue-scrollspy-after {
-    scroll-marker-group: after;
-
-    &::scroll-marker-group {
-        margin-bottom: 0;
-        margin-top: 0.25rem;
-    }
-}
-
-
-/* Make DevExpress components look more like Bootstrap/Blue */
-[class^="dxbl-"] {
-    --dxbl-text-edit-border-radius: var(--bs-border-radius) !important;
-    --dxbl-text-edit-padding-x: 0.75rem !important;
-    --dxbl-text-edit-padding-y: 0.375rem !important;
-    --dxbl-text-edit-line-height: 1.5 !important;
-    --dxbl-text-edit-focus-shadow-spread: 0.25rem !important;
-    --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
-    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
-    --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
-    --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
-    --dxbl-btn-border-radius: var(--bs-border-radius) !important;
-    --dxbl-context-menu-border-radius: var(--bs-border-radius) !important;
-    --dxbl-btn-padding-x: 0.75rem !important;
-    --dxbl-btn-padding-y: 0.375rem !important;
-
-    --dxbl-btn-font-size: 1rem;
-    --dxbl-checkbox-font-size: 1rem;
-    --dxbl-calendar-font-size: 1rem;
-    --dxbl-listbox-font-size: 1rem;
-    --dxbl-list-box-font-size: 1rem;
-    --dxbl-list-box-item-drag-hint-font-size: 1rem;
-    --dxbl-color-palette-font-size: 1rem;
-    --dxbl-text-edit-font-size: 1rem;
-    --dxbl-edit-dropdown-font-size: 1rem;
-    --dxbl-pager-font-size: 1rem;
-    --dxbl-grid-font-size: 1rem;
-    --dxbl-grid-draggable-header-font-size: 1rem;
-    --dxbl-grid-row-drag-hint-font-size: 1rem;
-    --dxbl-flyout-font-size: 1rem;
-    --dxbl-popup-font-size: 1rem;
-    --dxbl-dropdown-font-size: 1rem;
-    --dxbl-window-font-size: 1rem;
-    --dxbl-group-font-size: 1rem;
-    --dxbl-fl-font-size: 1rem;
-    --dxbl-fl-group-font-size: 1rem;
-    --dxbl-fl-tab-group-font-size: 1rem;
-    --dxbl-fl-tab-group-content-font-size: 1rem;
-    --dxbl-toolbar-font-size: 1rem;
-    --dxbl-tabs-font-size: 1rem;
-    --dxbl-tabs-content-font-size: 1rem;
-    --dxbl-accordion-group-font-size: 1rem;
-    --dxbl-accordion-group-item-font-size: 1rem;
-    --dxbl-accordion-group-header-font-size: 1rem;
-    --dxbl-treeview-font-size: 1rem;
-    --dxbl-navigation-badge-font-size: 1rem;
-    --dxbl-radio-group-font-size: 1rem;
-    --dxbl-context-menu-font-size: 1rem;
-    --dxbl-menu-item-font-size: 1rem;
-    --dxbl-scheduler-font-size: 1rem;
-    --dxbl-toast-text-font-size: 1rem;
-    --dxbl-toast-header-font-size: 1rem;
-    --dxbl-drawer-panel-font-size: 1rem;
-    --dxbl-progress-bar-label-font-size: 1rem;
-    --dxbl-pivot-font-size: 1rem;
-    --dxbl-pivot-field-font-size: 1rem;
-    --dxbl-pivot-header-font-size: 1rem;
-    --dxbl-pivot-total-font-size: 1rem;
-    --dxbl-pivot-table-font-size: 1rem;
-    --dxbl-pivot-table-header-field-font-size: 1rem;
-    --dxbl-pivot-table-row-field-font-size: 1rem;
-    --dxbl-pivot-table-total-font-size: 1rem;
-    --dx-chatui-message-font-size: 1rem;
-    --dx-chatui-suggestion-item-title-font-size: 1rem;
-    --dx-chatui-attachment-list-item-font-size: 1rem;
-    --dx-chatui-suggestion-item-text-font-size: 1rem;
-    --dxbl-message-box-body-text-font-size: 1rem;
-    --dxbl-message-box-header-font-size: 1rem;
-    --dxbl-splitter-font-size: 1rem;
-    --dxbl-filter-builder-font-size: 1rem;
-}
-
-.dxbl-grid {
-    --dxbl-grid-font-size: 1rem;
-    border: none;
-}
-
-.dxbl-pager-page-edit {
-    min-width: 2.5em;
-}
-
-.dxbl-toolbar {
-    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
-    font-size: var(--dxbl-toolbar-font-size);
-}
-
-body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
-    z-index: 1056 !important;
-}
-
-@if ($enable-button-pointers: false) {
-    .dxbl-context-menu.dxbl-context-menu-dropdown
-        > .dxbl-dropdown-body
-        ul
-        li:not(.dxbl-context-menu-separator)
-        > .dxbl-context-menu-item,
-    .dxbl-context-menu-submenu.dxbl-context-menu-dropdown
-        > .dxbl-dropdown-body
-        ul
-        li:not(.dxbl-context-menu-separator)
-        > .dxbl-context-menu-item {
-        cursor: default;
-    }
-}
-
-:root {
-    --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
-    --blue-font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, "cv07" 1, "tnum" 1, "zero" 1;
-    font-feature-settings: var(--blue-font-feature-settings);
-    font-size: 14px;
-}
-@supports (font-variation-settings: normal) {
-    :root {
-        --bs-font-sans-serif: InterVariable, #{$font-family-sans-serif};
-    }
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-    font-feature-settings: inherit;
-}
-
-
-*,
-*:before,
-*:after {
-    corner-shape: var(--blue-corner-shape);
-}
+
+/**
+ * Allows to use Bootstrap Modals but with the native dialog element 
+ * without the need of Bootstrap's JavaScript.
+ * Even works with Bootstrap's Offcanvas classes.
+ */
+
+@keyframes blue-modal-open {
+    from {
+        opacity: 0;
+        scale: var(--ani-scale-from, 95%);
+        translate: var(--ani-translate-from, 0 0);
+    }
+    to {
+        opacity: 1;
+        scale: var(--ani-scale-to, 100%);
+        translate: var(--ani-translate-to, 0 0);
+    }
+}
+
+@keyframes blue-modal-close {
+    from {
+        opacity: 1;
+        scale: var(--ani-scale-to, 100%);
+        translate: var(--ani-translate-to, 0 0);
+    }
+    to {
+        opacity: 0;
+        scale: var(--ani-scale-from, 95%);
+        translate: var(--ani-translate-from, 0 0);
+    }
+}
+
+dialog.blue-modal {
+    --ani-scale-from: 95%;
+    --ani-scale-to: 100%;
+    --ani-translate-from: 0 0;
+    --ani-translate-to: 0 0;
+
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    transition:
+        display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete;
+    animation: blue-modal-close 0.2s forwards;
+
+    .offcanvas-backdrop {
+        display: none;
+    }
+}
+
+dialog.blue-modal[open] {
+    display: block;
+    animation: blue-modal-open 0.2s forwards;
+}
+
+dialog.blue-modal::backdrop {
+    --bs-backdrop-bg: #000;
+    --bs-backdrop-opacity: 0.5;
+    background-color: var(--bs-backdrop-bg);
+    transition: opacity 0.2s;
+    opacity: 0;
+}
+
+dialog.blue-modal[open]::backdrop {
+    opacity: var(--bs-backdrop-opacity);
+}
+
+.blue-modal-backdrop {
+    color: #0000;
+    z-index: -1;
+    grid-row-start: 1;
+    grid-column-start: 1;
+    place-self: stretch stretch;
+    display: grid;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.blue-modal-backdrop > button {
+    opacity: 0;
+    cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    dialog.blue-modal,
+    dialog.blue-modal[open],
+    dialog.blue-modal::backdrop {
+        transition: none;
+        animation: none;
+    }
+}
+
+dialog.blue-modal:has(.offcanvas) {
+    --ani-scale-from: 100%;
+}
+
+dialog.blue-modal:has(.offcanvas-top) {
+    --ani-translate-from: 0 -100%;
+}
+
+dialog.blue-modal:has(.offcanvas-end) {
+    --ani-translate-from: 100% 0;
+}
+
+dialog.blue-modal:has(.offcanvas-bottom) {
+    --ani-translate-from: 0 100%;
+}
+
+dialog.blue-modal:has(.offcanvas-start) {
+    --ani-translate-from: -100% 0;
+}
+
+/**
+ * The new approach for a global layout with a sidebar, header and main content.
+ * Checkboxes are used for states for expanded or drawer.
+ */
+
+.blue-layout {
+    --spacing: 0.25rem;
+    --drawer-side-shadow:
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+    --side-width: 18rem;
+    --base-z-index: 0;
+
+    --base-z-index: 500;
+    --side-width: var(--blue-sidebar-width);
+    --toggler-width: 2.714rem;
+    --toggler-height: var(--blue-header-height);
+
+    --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
+    --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
+
+    height: 100dvh;
+    position: relative;
+    display: grid;
+
+    grid-template-rows: var(--toggler-height) auto;
+    grid-template-areas: "header" "main";
+
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+
+    &:has(> .blue-layout-toggle) {
+        grid-template-columns: 0 0 var(--toggler-width) calc(var(--side-width) - var(--toggler-width)) 1fr;
+        grid-template-rows: var(--toggler-height) auto;
+        grid-template-areas:
+            "state .    toggle header header"
+            ".     side main   main   main";
+    }
+}
+
+@include color-mode(dark, false) {
+    .blue-layout {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color-dark)};
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout {
+        &:has(> .blue-layout-state-expand:checked) {
+            grid-template-areas:
+                "state .    toggle header header"
+                ".     side side   side   main";
+        }
+    }
+}
+
+.blue-layout-state {
+    grid-area: state;
+    position: absolute;
+    --size: 0;
+    height: var(--size);
+    width: var(--size);
+    appearance: none;
+    opacity: 0;
+}
+
+.blue-layout-toggle {
+    grid-area: toggle;
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+}
+
+.blue-layout-state:focus-visible + .blue-layout-toggle {
+    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
+    box-shadow: var(--trigger-box-shadow);
+}
+
+@media (width < 64rem) {
+    .blue-layout-toggle-expand,
+    #layout-expand {
+        display: none !important;
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout-toggle-drawer,
+    #layout-drawer {
+        display: none !important;
+    }
+}
+
+.blue-layout-header {
+    grid-area: header;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: var(--blue-layout-header-z-index, 4);
+    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
+}
+
+.blue-layout-side {
+    grid-area: side;
+    overflow: auto;
+    background: inherit;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    }
+}
+
+@media (width < 64rem) {
+    .blue-layout-side {
+        translate: -100% 0;
+        height: 100%;
+        transition: translate 0.2s ease;
+    }
+
+    .blue-layout-state-drawer:checked ~ .blue-layout-side {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: calc(var(--base-z-index) + 1);
+        translate: 0;
+        width: calc(var(--spacing) * 80);
+        box-shadow: var(--drawer-side-shadow);
+    }
+}
+
+.blue-layout-main {
+    overflow: auto;
+    grid-area: main;
+}
+
+.blue-layout-body {
+    --spacing: 0.25rem;
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --bs-link-hover-color: #{$link-hover-color};
+
+    width: calc(100% - var(--spacing) * 2);
+    height: calc(100% - var(--spacing));
+    margin-left: auto;
+    margin-right: auto;
+    overflow: auto;
+    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
+    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
+    box-shadow: var(--bs-box-shadow-sm);
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+}
+
+@include color-mode(dark, false) {
+    .blue-layout-body {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{$link-hover-color-dark};
+    }
+}
+
+.blue-layout-overlay {
+    position: fixed;
+    z-index: var(--base-z-index);
+    inset: 0;
+    display: none;
+}
+
+@media (width < 64rem) {
+    .blue-layout-state-drawer:checked ~ .blue-layout-overlay {
+        display: block;
+    }
+}
+
+// Collapse with details and animated
+.blue-collapse {
+    interpolate-size: allow-keywords;
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .blue-collapse-chevron {
+        transition: transform 0.2s;
+    }
+
+    &[open] > summary .blue-collapse-chevron {
+        --blue-collapse-chevron-rotate: 90deg;
+        transform: rotate(var(--blue-collapse-chevron-rotate));
+    }
+
+    &::details-content {
+        block-size: 0;
+        opacity: 0;
+        translate: 0 -4rem;
+        transition:
+            block-size 0.2s,
+            content-visibility 0.2s,
+            opacity 0.2s,
+            translate 0.2s;
+        transition-behavior: allow-discrete;
+    }
+
+    &[open]::details-content {
+        block-size: auto;
+        opacity: 1;
+        translate: 0;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .blue-collapse .blue-collapse-chevron,
+    .blue-collapse::details-content {
+        transition: none;
+    }
+}
+
+.blue-collapse-indent {
+    // 0.5em is half of icon width
+    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
+    margin-inline-start: var(--margin-inline-start);
+}
+
+// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
+.blue-collapse-group {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
+
+    & > details {
+        display: contents;
+
+        & > summary {
+            grid-column: 2;
+
+            & + * {
+                width: calc(100% + var(--margin-inline-start) - 3px);
+            }
+        }
+    }
+}
+
+.BLUE-actions {
+    display: flex;
+    white-space: nowrap;
+    // overflow-x: auto;
+    // overflow-y: visible;
+}
+
+.BLUE-actions-menu {
+    display: flex;
+    max-width: 100%;
+}
+
+.BLUE-actions-collapse {
+    position: relative;
+}
+
+.BLUE-actions-collapse:not(:has(.BLUE-actions-collapse-visible)) {
+    display: none;
+}
+
+.BLUE-actions-collapse-menu {
+    position: absolute;
+}
+
+.BLUE-actions-collapse-menu:popover-open {
+    display: var(--display);
+}
+
+// Compatibility with MenuItems having dropdowns
+.BLUE-actions-menu > .blue-menu-item-wrapper:has(> .blue-menu-item-dropdown) {
+    display: block;
+    position: relative;
+}
+
+.BLUE-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown {
+    position: absolute;
+}
+
+.blue-anchored {
+    position-try: flip-inline;
+    position-area: bottom span-right;
+    position: fixed;
+
+    // Normalize popover
+    &[popover] {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
+}
+
+.blue-anchored-start {
+    position-area: bottom span-right;
+}
+
+.blue-anchored-end {
+    position-area: bottom span-left;
+}
+
+@supports not (anchor-name: --anchor-1) {
+    .blue-anchored-fallback {
+        left: 50%;
+        top: 50%;
+        translate: -50% -50%;
+
+        &::backdrop {
+            --bs-backdrop-bg: #000;
+            --bs-backdrop-opacity: 0.5;
+            background-color: var(--bs-backdrop-bg);
+            transition: opacity 0.2s;
+            opacity: var(--bs-backdrop-opacity);
+        }
+    }
+}
+
+.btn:has(+ :popover-open):not(:focus-visible):not(.blue-menu-item) {
+    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
+    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);
+}
+
+.blue-scrollspy {
+    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
+    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: #{$nav-link-color};
+    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+
+    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+    @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+    }
+
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+
+    scroll-marker-group: before;
+
+    &::scroll-marker-group {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        min-height: calc(
+            (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
+                (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
+        );
+        margin-bottom: 0.25rem;
+        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
+        gap: var(--blue-scrollspy-marker-group-gap);
+    }
+
+    & > :is(section, .blue-scrollspy-group) {
+        &::scroll-marker {
+            content: attr(aria-label);
+            white-space: nowrap;
+
+            font-size: var(--#{$prefix}nav-link-font-size);
+            box-sizing: border-box;
+            text-decoration: none;
+
+            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+
+            border-radius: var(--#{$prefix}nav-tabs-border-radius);
+
+            &:is(:hover, :focus) {
+                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+            }
+
+            &:target-current,
+            &:is(:active) {
+                color: var(--#{$prefix}nav-tabs-link-active-color);
+                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+                border-color: var(--#{$prefix}border-color);
+            }
+        }
+    }
+}
+
+.blue-scrollspy-after {
+    scroll-marker-group: after;
+
+    &::scroll-marker-group {
+        margin-bottom: 0;
+        margin-top: 0.25rem;
+    }
+}
+
+.sign-in-screen {
+    padding-top: var(--blue-header-height);
+
+    &:last-child {
+        padding-bottom: var(--blue-header-height);
+    }
+
+    .sign-in-container {
+        animation: enabledBlueAppPage 0.5s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+    }
+
+    @media screen and (min-width: 768px) {
+        .sign-in-container {
+            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
+            width: var(--blue-sign-in-container-md-width, auto);
+        }
+    }
+}
+
+
+/* Make DevExpress components look more like Bootstrap/Blue */
+[class^="dxbl-"] {
+    --dxbl-text-edit-border-radius: var(--bs-border-radius) !important;
+    --dxbl-text-edit-padding-x: 0.75rem !important;
+    --dxbl-text-edit-padding-y: 0.375rem !important;
+    --dxbl-text-edit-line-height: 1.5 !important;
+    --dxbl-text-edit-focus-shadow-spread: #{$focus-ring-width} !important;
+    --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-context-menu-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-padding-x: 0.75rem !important;
+    --dxbl-btn-padding-y: 0.375rem !important;
+
+    --dxbl-btn-font-size: 1rem;
+    --dxbl-checkbox-font-size: 1rem;
+    --dxbl-calendar-font-size: 1rem;
+    --dxbl-listbox-font-size: 1rem;
+    --dxbl-list-box-font-size: 1rem;
+    --dxbl-list-box-item-drag-hint-font-size: 1rem;
+    --dxbl-color-palette-font-size: 1rem;
+    --dxbl-text-edit-font-size: 1rem;
+    --dxbl-edit-dropdown-font-size: 1rem;
+    --dxbl-pager-font-size: 1rem;
+    --dxbl-grid-font-size: 1rem;
+    --dxbl-grid-draggable-header-font-size: 1rem;
+    --dxbl-grid-row-drag-hint-font-size: 1rem;
+    --dxbl-flyout-font-size: 1rem;
+    --dxbl-popup-font-size: 1rem;
+    --dxbl-dropdown-font-size: 1rem;
+    --dxbl-window-font-size: 1rem;
+    --dxbl-group-font-size: 1rem;
+    --dxbl-fl-font-size: 1rem;
+    --dxbl-fl-group-font-size: 1rem;
+    --dxbl-fl-tab-group-font-size: 1rem;
+    --dxbl-fl-tab-group-content-font-size: 1rem;
+    --dxbl-toolbar-font-size: 1rem;
+    --dxbl-tabs-font-size: 1rem;
+    --dxbl-tabs-content-font-size: 1rem;
+    --dxbl-accordion-group-font-size: 1rem;
+    --dxbl-accordion-group-item-font-size: 1rem;
+    --dxbl-accordion-group-header-font-size: 1rem;
+    --dxbl-treeview-font-size: 1rem;
+    --dxbl-navigation-badge-font-size: 1rem;
+    --dxbl-radio-group-font-size: 1rem;
+    --dxbl-context-menu-font-size: 1rem;
+    --dxbl-menu-item-font-size: 1rem;
+    --dxbl-scheduler-font-size: 1rem;
+    --dxbl-toast-text-font-size: 1rem;
+    --dxbl-toast-header-font-size: 1rem;
+    --dxbl-drawer-panel-font-size: 1rem;
+    --dxbl-progress-bar-label-font-size: 1rem;
+    --dxbl-pivot-font-size: 1rem;
+    --dxbl-pivot-field-font-size: 1rem;
+    --dxbl-pivot-header-font-size: 1rem;
+    --dxbl-pivot-total-font-size: 1rem;
+    --dxbl-pivot-table-font-size: 1rem;
+    --dxbl-pivot-table-header-field-font-size: 1rem;
+    --dxbl-pivot-table-row-field-font-size: 1rem;
+    --dxbl-pivot-table-total-font-size: 1rem;
+    --dx-chatui-message-font-size: 1rem;
+    --dx-chatui-suggestion-item-title-font-size: 1rem;
+    --dx-chatui-attachment-list-item-font-size: 1rem;
+    --dx-chatui-suggestion-item-text-font-size: 1rem;
+    --dxbl-message-box-body-text-font-size: 1rem;
+    --dxbl-message-box-header-font-size: 1rem;
+    --dxbl-splitter-font-size: 1rem;
+    --dxbl-filter-builder-font-size: 1rem;
+}
+
+.dxbl-grid {
+    --dxbl-grid-font-size: 1rem;
+    border: none;
+}
+
+.dxbl-pager-page-edit {
+    min-width: 2.5em;
+}
+
+.dxbl-toolbar {
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    font-size: var(--dxbl-toolbar-font-size);
+}
+
+body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
+    z-index: 1056 !important;
+}
+
+@if ($enable-button-pointers: false) {
+    .dxbl-context-menu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item,
+    .dxbl-context-menu-submenu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item {
+        cursor: default;
+    }
+}
+
+:root {
+    --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
+    --blue-font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, "cv07" 1, "tnum" 1, "zero" 1;
+    font-feature-settings: var(--blue-font-feature-settings);
+    font-size: 14px;
+}
+@supports (font-variation-settings: normal) {
+    :root {
+        --bs-font-sans-serif: InterVariable, #{$font-family-sans-serif};
+    }
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+    font-feature-settings: inherit;
+}
+
+
+*,
+*:before,
+*:after {
+    corner-shape: var(--blue-corner-shape);
+}