p11 UI
true-perfect-code
Version: 1.1.69

P11 Common CSS Variables

This page provides a highly condensed list of key CSS variables with their resolved, concrete values based on the **default Bootstrap styling**. This collection is designed to serve as a streamlined template for creating and managing custom themes. By using this compact set, developers can efficiently define their own color schemes and styles without navigating the full, extensive list of Bootstrap variables.
To see how these variables can be used to create and apply themes dynamically at runtime, including practical demo examples, please refer to our P11 Theming & Styling page.

Quick and Efficient Theme Customization

This page offers a condensed list of essential CSS variables, serving as an optimized template for creating custom themes. Instead of navigating the entire, extensive list of Bootstrap variables, this overview focuses on the key variables and their resolved, final values.

The provided lists for both Light and Dark Mode contain only the concrete color and style values, with direct assignments like --bs-accordion-color: var(--bs-body-color); removed and replaced by their final values. This significantly simplifies the process, allowing you to focus directly on the relevant values that define the look and feel of your application.

You can use these lists as a starting point to build your own theme. Simply copy the code blocks, adjust the values, and save the result as your own CSS file. You can then dynamically load this theme at runtime using the P11 ThemeService, for example, with ThemeService.SetThemeFromCssFileAsync("wwwroot/assets/my-custom-theme.css");.

To revert to the default styles and remove the custom theme, simply use ThemeService.ClearCurrentTheme();.

Implementation Details

/* Light mode */
/* Bootstrap v5.3.7 (the information is current as of August 2025) */

/* P11Accordion */
.accordion {
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
}

/* P11AccordionNative */
.tpc-accordion-nativ {
    --tpc-accordion-border-radius: 0.25rem;
    --tpc-accordion-shadow: none;
}

.tpc-accordion-nativ > summary {
    --tpc-accordion-header-padding: 1rem;
}

.tpc-accordion-nativ > summary .fw-bold {
    --tpc-accordion-title-font-weight: bold;
    --tpc-accordion-title-font-size: 1rem;
}

.tpc-accordion-nativ > div {
    --tpc-accordion-content-bg: white;
    --tpc-accordion-content-padding: 1rem;
}

/* P11Button */
/* Base Button Styles */
.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-bg: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
}

/* Solid Buttons */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

/* Outline Buttons */
.btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
}

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

/* (Alle anderen Outline-Buttons nach demselben Muster gek�rzt) */

/* Link Button */
.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
}

/* P11Offcanvas */
.offcanvas {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
}

/* P11FloatingPanel */
.tpc-floating-panel {
    --tpc-panel-bg: #ffffde;
    --tpc-panel-border: 3px solid #bdbdbd;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --tpc-panel-min-width: 250px;
    --tpc-panel-border-radius: 5px;
}

.tpc-floating-panel-header {
    --tpc-panel-header-bg: #00007b;
    --tpc-panel-header-color: #fff;
    --tpc-panel-header-radius: 4px;
    --tpc-panel-header-padding: 3px 10px;
}

.tpc-floating-panel-title {
    --tpc-panel-title-weight: bold;
    --tpc-panel-title-size: 1.1em;
}

.tpc-floating-panel-close {
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-margin-left: 10px;
}

.tpc-floating-panel-close:hover {
    --tpc-panel-close-hover-color: #bdbdbd;
}

.tpc-floating-panel-content {
    --tpc-panel-content-bg: white;
    --tpc-panel-content-color: #333;
    --tpc-panel-content-size: 0.9em;
    --tpc-panel-content-padding: 10px 7px 5px 7px;
}

/* P11Modal */
.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
}

/* P11ProgressBar */
.progress {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #0d6efd;
    --bs-progress-bar-transition: width 0.6s ease;
}

/* P11Toast */
.toast {
    --bs-toast-zindex: 1090;
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
    --bs-toast-spacing: 1.5rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.875rem;
}

/* ROOT (true-perfect-code) */
:root {
    --tpc-accordion-border-radius: 0.25rem;
    --tpc-accordion-shadow: none;
    --tpc-accordion-header-padding: 1rem;
    --tpc-accordion-title-font-weight: bold;
    --tpc-accordion-title-font-size: 1rem;
    --tpc-accordion-content-bg: white;
    --tpc-accordion-content-padding: 1rem;
    --tpc-drawer-transition-duration: 0.3s;
    --tpc-drawer-z-index: 1060;
    --tpc-drawer-width: 300px;
    --tpc-drawer-height: 250px;
    --tpc-drawer-padding: 1rem;
    --tpc-drawer-title-font-size: 1.25rem;
    --tpc-drawer-title-font-weight: 500;
    --tpc-drawer-close-hover-opacity: 0.75;
    --tpc-drawer-close-top-offset: 1rem;
    --tpc-drawer-close-right-offset: 1rem;
    --tpc-drawer-overlay-z-index: 1059;
    --tpc-panel-bg: #ffffde;
    --tpc-panel-border: 3px solid #bdbdbd;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --tpc-panel-min-width: 250px;
    --tpc-panel-border-radius: 5px;
    --tpc-panel-header-bg: #00007b;
    --tpc-panel-header-color: #fff;
    --tpc-panel-header-radius: 4px;
    --tpc-panel-header-padding: 3px 10px;
    --tpc-panel-title-weight: bold;
    --tpc-panel-title-size: 1.1em;
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-hover-color: #bdbdbd;
    --tpc-panel-close-margin-left: 10px;
    --tpc-panel-content-bg: white;
    --tpc-panel-content-color: #333;
    --tpc-panel-content-size: 0.9em;
    --tpc-panel-content-padding: 10px 7px 5px 7px;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", 
        "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
        "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}
/* Dark mode */
/* Bootstrap v5.3.7 (the information is current as of August 2025) */

[data-bs-theme="dark"] {
  /* P11Accordion */
  .accordion {
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%236ea8fe' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
  }

  /* P11AccordionNative */
  .tpc-accordion-nativ {
    --tpc-accordion-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }

  .tpc-accordion-nativ > div {
    --tpc-accordion-content-bg: #212529;
    --tpc-accordion-content-color: #dee2e6;
  }

  /* P11Button - Base */
  .btn {
    --bs-btn-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  }

  /* Solid Buttons */
  .btn-primary {
    --bs-btn-bg: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #5a93e4;
    --bs-btn-hover-border-color: #4d89e0;
    --bs-btn-active-bg: #4d89e0;
    --bs-btn-active-border-color: #3f7fdc;
    --bs-btn-disabled-bg: #6ea8fe;
    --bs-btn-disabled-border-color: #6ea8fe;
  }

  .btn-secondary {
    --bs-btn-bg: #5a6268;
    --bs-btn-border-color: #5a6268;
    --bs-btn-hover-bg: #4a5156;
    --bs-btn-hover-border-color: #42484d;
    --bs-btn-active-bg: #42484d;
    --bs-btn-active-border-color: #3a4044;
    --bs-btn-disabled-bg: #5a6268;
    --bs-btn-disabled-border-color: #5a6268;
  }

  .btn-success {
    --bs-btn-bg: #1aa05c;
    --bs-btn-border-color: #1aa05c;
    --bs-btn-hover-bg: #168a4f;
    --bs-btn-hover-border-color: #137a45;
    --bs-btn-active-bg: #137a45;
    --bs-btn-active-border-color: #106a3b;
  }

  .btn-danger {
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #a52834;
    --bs-btn-active-bg: #a52834;
    --bs-btn-active-border-color: #8f232e;
  }

  .btn-warning {
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-bg: #e0a800;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-active-bg: #d39e00;
    --bs-btn-active-border-color: #c69500;
  }

  .btn-info {
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-bg: #0da5d8;
    --bs-btn-hover-border-color: #0b9bcc;
    --bs-btn-active-bg: #0b9bcc;
    --bs-btn-active-border-color: #0a91c0;
  }

  .btn-light {
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
  }

  .btn-dark {
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-bg: #373b3e;
    --bs-btn-hover-border-color: #2c3034;
    --bs-btn-active-bg: #2c3034;
    --bs-btn-active-border-color: #212529;
  }

  /* Outline Buttons */
  .btn-outline-primary {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #6ea8fe;
    --bs-btn-active-bg: #6ea8fe;
    --bs-btn-disabled-color: #6ea8fe;
  }

  .btn-outline-secondary {
    --bs-btn-color: #5a6268;
    --bs-btn-border-color: #5a6268;
    --bs-btn-hover-bg: #5a6268;
    --bs-btn-active-bg: #5a6268;
    --bs-btn-disabled-color: #5a6268;
  }

  /* Link Button */
  .btn-link {
    --bs-btn-color: #6ea8fe;
    --bs-btn-hover-color: #8bb9fe;
    --bs-btn-disabled-color: #5a6268;
  }

  /* P11Offcanvas */
  .offcanvas {
    --bs-offcanvas-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }

  /* P11FloatingPanel */
  .tpc-floating-panel {
    --tpc-panel-bg: #1a1d20;
    --tpc-panel-border: 3px solid #495057;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  .tpc-floating-panel-header {
    --tpc-panel-header-bg: #0d6efd;
    --tpc-panel-header-color: #ffffff;
  }

  .tpc-floating-panel-content {
    --tpc-panel-content-bg: #212529;
    --tpc-panel-content-color: #dee2e6;
  }

  /* P11Modal */
  .modal {
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }

  /* P11ProgressBar */
  .progress {
    --bs-progress-bar-bg: #6ea8fe;
    --bs-progress-bg: #343a40;
  }

  /* P11Toast */
  .toast {
    --bs-toast-bg: rgba(33, 37, 41, 0.95);
    --bs-toast-border-color: rgba(255, 255, 255, 0.1);
  }
}

/* ROOT (true-perfect-code) */
:root {
    --tpc-accordion-content-bg: #212529;
    --tpc-panel-bg: #343a40;
    --tpc-panel-border: 3px solid #495057;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --tpc-panel-header-bg: #1a1d20;
    --tpc-panel-header-color: #fff;
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-hover-color: #dee2e6;
    --tpc-panel-content-bg: #212529;
    --tpc-panel-content-color: #dee2e6;

    --bs-primary: #6ea8fe;
    --bs-secondary: #adb5bd;
    --bs-success: #75b798;
    --bs-info: #6edff6;
    --bs-warning: #ffda6a;
    --bs-danger: #ea868f;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --bs-primary-rgb: 110, 168, 254;
    --bs-secondary-rgb: 173, 181, 189;
    --bs-success-rgb: 117, 183, 152;
    --bs-info-rgb: 110, 223, 246;
    --bs-warning-rgb: 255, 218, 106;
    --bs-danger-rgb: 234, 134, 143;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;

    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;

    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;

    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}
An unhandled error has occurred. Reload 🗙