Examples
This section is your playground for exploring the full potential of Dynamic Framework. Discover a collection of interactive examples showcasing various layout patterns, component interactions, and even form implementations. Each example comes with complete source code, ready for you to copy, paste, and adapt to your own projects.
Experience the magic of theming firsthand with our interactive theme switcher. Seamlessly toggle between different themes in real-time to witness how effortlessly you can transform the look and feel of your entire application. This dynamic showcase demonstrates the power of CSS variables and their impact on your design system.
New movie is released!
Click the button to watch on Jetflix app.
Contact us
Curious about something? Let us know!
Whether you have questions or you would just like to say hello, contact us.
Code
:root,[data-bs-theme=dynamic] {
--bs-blue-rgb: 13, 110, 253;
--bs-indigo-rgb: 102, 16, 242;
--bs-purple-rgb: 72, 72, 183;
--bs-pink-rgb: 216, 27, 96;
--bs-red-rgb: 220, 53, 69;
--bs-orange-rgb: 253, 126, 20;
--bs-yellow-rgb: 255, 193, 7;
--bs-green-rgb: 25, 135, 84;
--bs-teal-rgb: 32, 201, 151;
--bs-cyan-rgb: 13, 202, 240;
--bs-black-rgb: 0, 0, 0;
--bs-white-rgb: 255, 255, 255;
--bs-gray-rgb: 109, 109, 130;
--bs-gray-dark-rgb: 43, 43, 52;
--bs-gray-25-rgb: 251, 251, 252;
--bs-gray-50-rgb: 240, 240, 242;
--bs-gray-100-rgb: 225, 225, 230;
--bs-gray-200-rgb: 196, 196, 205;
--bs-gray-300-rgb: 167, 167, 180;
--bs-gray-400-rgb: 138, 138, 155;
--bs-gray-500-rgb: 109, 109, 130;
--bs-gray-600-rgb: 87, 87, 104;
--bs-gray-700-rgb: 65, 65, 78;
--bs-gray-800-rgb: 43, 43, 52;
--bs-gray-900-rgb: 21, 21, 26;
--bs-surface-gray-rgb: 240, 240, 242;
--bs-surface-primary-rgb: 251, 232, 239;
--bs-surface-secondary-rgb: 237, 237, 248;
--bs-surface-success-rgb: 232, 243, 238;
--bs-surface-info-rgb: 231, 241, 255;
--bs-surface-warning-rgb: 255, 249, 230;
--bs-surface-danger-rgb: 252, 235, 236;
--bs-gray-soft-rgb: 251, 251, 252;
--bs-primary-soft-rgb: 253, 244, 247;
--bs-secondary-soft-rgb: 246, 246, 251;
--bs-success-soft-rgb: 244, 249, 246;
--bs-info-soft-rgb: 243, 248, 255;
--bs-warning-soft-rgb: 255, 252, 243;
--bs-danger-soft-rgb: 253, 245, 246;
--bs-primary-25-rgb: 253, 244, 247;
--bs-primary-50-rgb: 251, 232, 239;
--bs-primary-100-rgb: 247, 209, 223;
--bs-primary-200-rgb: 239, 164, 191;
--bs-primary-300-rgb: 232, 118, 160;
--bs-primary-400-rgb: 224, 73, 128;
--bs-primary-500-rgb: var(--bs-primary-rgb);
--bs-primary-600-rgb: 173, 22, 77;
--bs-primary-700-rgb: 130, 16, 58;
--bs-primary-800-rgb: 86, 11, 38;
--bs-primary-900-rgb: 43, 5, 19;
--bs-secondary-25-rgb: 246, 246, 251;
--bs-secondary-50-rgb: 237, 237, 248;
--bs-secondary-100-rgb: 218, 218, 241;
--bs-secondary-200-rgb: 182, 182, 226;
--bs-secondary-300-rgb: 145, 145, 212;
--bs-secondary-400-rgb: 109, 109, 197;
--bs-secondary-500-rgb: var(--bs-secondary-rgb);
--bs-secondary-600-rgb: 58, 58, 146;
--bs-secondary-700-rgb: 43, 43, 110;
--bs-secondary-800-rgb: 29, 29, 73;
--bs-secondary-900-rgb: 14, 14, 37;
--bs-success-25-rgb: 244, 249, 246;
--bs-success-50-rgb: 232, 243, 238;
--bs-success-100-rgb: 209, 231, 221;
--bs-success-200-rgb: 163, 207, 187;
--bs-success-300-rgb: 117, 183, 152;
--bs-success-400-rgb: 71, 159, 118;
--bs-success-500-rgb: var(--bs-success-rgb);
--bs-success-600-rgb: 20, 108, 67;
--bs-success-700-rgb: 15, 81, 50;
--bs-success-800-rgb: 10, 54, 34;
--bs-success-900-rgb: 5, 27, 17;
--bs-info-25-rgb: 243, 248, 255;
--bs-info-50-rgb: 231, 241, 255;
--bs-info-100-rgb: 207, 226, 255;
--bs-info-200-rgb: 158, 197, 254;
--bs-info-300-rgb: 110, 168, 254;
--bs-info-400-rgb: 61, 139, 253;
--bs-info-500-rgb: var(--bs-info-rgb);
--bs-info-600-rgb: 10, 88, 202;
--bs-info-700-rgb: 8, 66, 152;
--bs-info-800-rgb: 5, 44, 101;
--bs-info-900-rgb: 3, 22, 51;
--bs-warning-25-rgb: 255, 252, 243;
--bs-warning-50-rgb: 255, 249, 230;
--bs-warning-100-rgb: 255, 243, 205;
--bs-warning-200-rgb: 255, 230, 156;
--bs-warning-300-rgb: 255, 218, 106;
--bs-warning-400-rgb: 255, 205, 57;
--bs-warning-500-rgb: var(--bs-warning-rgb);
--bs-warning-600-rgb: 204, 154, 6;
--bs-warning-700-rgb: 153, 116, 4;
--bs-warning-800-rgb: 102, 77, 3;
--bs-warning-900-rgb: 51, 39, 1;
--bs-danger-25-rgb: 253, 245, 246;
--bs-danger-50-rgb: 252, 235, 236;
--bs-danger-100-rgb: 248, 215, 218;
--bs-danger-200-rgb: 241, 174, 181;
--bs-danger-300-rgb: 234, 134, 143;
--bs-danger-400-rgb: 227, 93, 106;
--bs-danger-500-rgb: var(--bs-danger-rgb);
--bs-danger-600-rgb: 176, 42, 55;
--bs-danger-700-rgb: 132, 32, 41;
--bs-danger-800-rgb: 88, 21, 28;
--bs-danger-900-rgb: 44, 11, 14;
--bs-blue: rgb(var(--bs-blue-rgb));
--bs-indigo: rgb(var(--bs-indigo-rgb));
--bs-purple: rgb(var(--bs-purple-rgb));
--bs-pink: rgb(var(--bs-pink-rgb));
--bs-red: rgb(var(--bs-red-rgb));
--bs-orange: rgb(var(--bs-orange-rgb));
--bs-yellow: rgb(var(--bs-yellow-rgb));
--bs-green: rgb(var(--bs-green-rgb));
--bs-teal: rgb(var(--bs-teal-rgb));
--bs-cyan: rgb(var(--bs-cyan-rgb));
--bs-black: rgb(var(--bs-black-rgb));
--bs-white: rgb(var(--bs-white-rgb));
--bs-gray: rgb(var(--bs-gray-rgb));
--bs-gray-dark: rgb(var(--bs-gray-dark-rgb));
--bs-gray-25: rgb(var(--bs-gray-25-rgb));
--bs-gray-50: rgb(var(--bs-gray-50-rgb));
--bs-gray-100: rgb(var(--bs-gray-100-rgb));
--bs-gray-200: rgb(var(--bs-gray-200-rgb));
--bs-gray-300: rgb(var(--bs-gray-300-rgb));
--bs-gray-400: rgb(var(--bs-gray-400-rgb));
--bs-gray-500: rgb(var(--bs-gray-500-rgb));
--bs-gray-600: rgb(var(--bs-gray-600-rgb));
--bs-gray-700: rgb(var(--bs-gray-700-rgb));
--bs-gray-800: rgb(var(--bs-gray-800-rgb));
--bs-gray-900: rgb(var(--bs-gray-900-rgb));
--bs-surface-gray: rgb(var(--bs-surface-gray-rgb));
--bs-surface-primary: rgb(var(--bs-surface-primary-rgb));
--bs-surface-secondary: rgb(var(--bs-surface-secondary-rgb));
--bs-surface-success: rgb(var(--bs-surface-success-rgb));
--bs-surface-info: rgb(var(--bs-surface-info-rgb));
--bs-surface-warning: rgb(var(--bs-surface-warning-rgb));
--bs-surface-danger: rgb(var(--bs-surface-danger-rgb));
--bs-gray-soft: rgb(var(--bs-gray-soft-rgb));
--bs-primary-soft: rgb(var(--bs-primary-soft-rgb));
--bs-secondary-soft: rgb(var(--bs-secondary-soft-rgb));
--bs-success-soft: rgb(var(--bs-success-soft-rgb));
--bs-info-soft: rgb(var(--bs-info-soft-rgb));
--bs-warning-soft: rgb(var(--bs-warning-soft-rgb));
--bs-danger-soft: rgb(var(--bs-danger-soft-rgb));
--bs-primary: rgb(var(--bs-primary-rgb));
--bs-secondary: rgb(var(--bs-secondary-rgb));
--bs-success: rgb(var(--bs-success-rgb));
--bs-info: rgb(var(--bs-info-rgb));
--bs-warning: rgb(var(--bs-warning-rgb));
--bs-danger: rgb(var(--bs-danger-rgb));
--bs-light: rgb(var(--bs-light-rgb));
--bs-dark: rgb(var(--bs-dark-rgb));
--bs-primary-rgb: var(--bs-pink-rgb);
--bs-secondary-rgb: var(--bs-purple-rgb);
--bs-success-rgb: var(--bs-green-rgb);
--bs-info-rgb: var(--bs-blue-rgb);
--bs-warning-rgb: var(--bs-yellow-rgb);
--bs-danger-rgb: var(--bs-red-rgb);
--bs-light-rgb: var(--bs-gray-100-rgb);
--bs-dark-rgb: var(--bs-gray-900-rgb);
--bs-primary-25: rgb(var(--bs-primary-25-rgb));
--bs-primary-50: rgb(var(--bs-primary-50-rgb));
--bs-primary-100: rgb(var(--bs-primary-100-rgb));
--bs-primary-200: rgb(var(--bs-primary-200-rgb));
--bs-primary-300: rgb(var(--bs-primary-300-rgb));
--bs-primary-400: rgb(var(--bs-primary-400-rgb));
--bs-primary-500: rgb(var(--bs-primary-500-rgb));
--bs-primary-600: rgb(var(--bs-primary-600-rgb));
--bs-primary-700: rgb(var(--bs-primary-700-rgb));
--bs-primary-800: rgb(var(--bs-primary-800-rgb));
--bs-primary-900: rgb(var(--bs-primary-900-rgb));
--bs-secondary-25: rgb(var(--bs-secondary-25-rgb));
--bs-secondary-50: rgb(var(--bs-secondary-50-rgb));
--bs-secondary-100: rgb(var(--bs-secondary-100-rgb));
--bs-secondary-200: rgb(var(--bs-secondary-200-rgb));
--bs-secondary-300: rgb(var(--bs-secondary-300-rgb));
--bs-secondary-400: rgb(var(--bs-secondary-400-rgb));
--bs-secondary-500: rgb(var(--bs-secondary-500-rgb));
--bs-secondary-600: rgb(var(--bs-secondary-600-rgb));
--bs-secondary-700: rgb(var(--bs-secondary-700-rgb));
--bs-secondary-800: rgb(var(--bs-secondary-800-rgb));
--bs-secondary-900: rgb(var(--bs-secondary-900-rgb));
--bs-success-25: rgb(var(--bs-success-25-rgb));
--bs-success-50: rgb(var(--bs-success-50-rgb));
--bs-success-100: rgb(var(--bs-success-100-rgb));
--bs-success-200: rgb(var(--bs-success-200-rgb));
--bs-success-300: rgb(var(--bs-success-300-rgb));
--bs-success-400: rgb(var(--bs-success-400-rgb));
--bs-success-500: rgb(var(--bs-success-500-rgb));
--bs-success-600: rgb(var(--bs-success-600-rgb));
--bs-success-700: rgb(var(--bs-success-700-rgb));
--bs-success-800: rgb(var(--bs-success-800-rgb));
--bs-success-900: rgb(var(--bs-success-900-rgb));
--bs-info-25: rgb(var(--bs-info-25-rgb));
--bs-info-50: rgb(var(--bs-info-50-rgb));
--bs-info-100: rgb(var(--bs-info-100-rgb));
--bs-info-200: rgb(var(--bs-info-200-rgb));
--bs-info-300: rgb(var(--bs-info-300-rgb));
--bs-info-400: rgb(var(--bs-info-400-rgb));
--bs-info-500: rgb(var(--bs-info-500-rgb));
--bs-info-600: rgb(var(--bs-info-600-rgb));
--bs-info-700: rgb(var(--bs-info-700-rgb));
--bs-info-800: rgb(var(--bs-info-800-rgb));
--bs-info-900: rgb(var(--bs-info-900-rgb));
--bs-warning-25: rgb(var(--bs-warning-25-rgb));
--bs-warning-50: rgb(var(--bs-warning-50-rgb));
--bs-warning-100: rgb(var(--bs-warning-100-rgb));
--bs-warning-200: rgb(var(--bs-warning-200-rgb));
--bs-warning-300: rgb(var(--bs-warning-300-rgb));
--bs-warning-400: rgb(var(--bs-warning-400-rgb));
--bs-warning-500: rgb(var(--bs-warning-500-rgb));
--bs-warning-600: rgb(var(--bs-warning-600-rgb));
--bs-warning-700: rgb(var(--bs-warning-700-rgb));
--bs-warning-800: rgb(var(--bs-warning-800-rgb));
--bs-warning-900: rgb(var(--bs-warning-900-rgb));
--bs-danger-25: rgb(var(--bs-danger-25-rgb));
--bs-danger-50: rgb(var(--bs-danger-50-rgb));
--bs-danger-100: rgb(var(--bs-danger-100-rgb));
--bs-danger-200: rgb(var(--bs-danger-200-rgb));
--bs-danger-300: rgb(var(--bs-danger-300-rgb));
--bs-danger-400: rgb(var(--bs-danger-400-rgb));
--bs-danger-500: rgb(var(--bs-danger-500-rgb));
--bs-danger-600: rgb(var(--bs-danger-600-rgb));
--bs-danger-700: rgb(var(--bs-danger-700-rgb));
--bs-danger-800: rgb(var(--bs-danger-800-rgb));
--bs-danger-900: rgb(var(--bs-danger-900-rgb));
--bs-primary-text-emphasis: var(--bs-primary-600);
--bs-secondary-text-emphasis: var(--bs-secondary-600);
--bs-success-text-emphasis: var(--bs-success-600);
--bs-info-text-emphasis: var(--bs-info-600);
--bs-warning-text-emphasis: var(--bs-warning-600);
--bs-danger-text-emphasis: var(--bs-danger-600);
--bs-light-text-emphasis: var(--bs-gray-600);
--bs-dark-text-emphasis: var(--bs-gray-600);
--bs-primary-bg-subtle: var(--bs-primary-100);
--bs-secondary-bg-subtle: var(--bs-secondary-100);
--bs-success-bg-subtle: var(--bs-success-100);
--bs-info-bg-subtle: var(--bs-info-100);
--bs-warning-bg-subtle: var(--bs-warning-100);
--bs-danger-bg-subtle: var(--bs-danger-100);
--bs-light-bg-subtle: var(--bs-gray-100);
--bs-dark-bg-subtle: var(--bs-gray-400);
--bs-primary-border-subtle: var(--bs-primary-100);
--bs-secondary-border-subtle: var(--bs-secondary-100);
--bs-success-border-subtle: var(--bs-success-100);
--bs-info-border-subtle: var(--bs-info-100);
--bs-warning-border-subtle: var(--bs-warning-100);
--bs-danger-border-subtle: var(--bs-danger-100);
--bs-light-border-subtle: var(--bs-gray-100);
--bs-dark-border-subtle: var(--bs-gray-400);
--bs-font-sans-serif: "Source Sans 3", sans-serif;
--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-root-font-size: 16px;
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: var(--bs-fw-normal);
--bs-body-line-height: 1.5;
--bs-body-color: rgb(var(--bs-body-color-rgb));
--bs-body-color-rgb: var(--bs-gray-900-rgb);
--bs-body-bg: rgb(var(--bs-body-bg-rgb));
--bs-body-bg-rgb: var(--bs-secondary-soft-rgb);
--bs-emphasis-color: rgb(var(--bs-emphasis-color-rgb));
--bs-emphasis-color-rgb: var(--bs-black-rgb);
--bs-secondary-color: rgba(var(--bs-secondary-color-rgb), .75);
--bs-secondary-color-rgb: var(--bs-body-color-rgb);
--bs-secondary-bg: rgb(var(--bs-secondary-bg-rgb));
--bs-secondary-bg-rgb: var(--bs-gray-200);
--bs-tertiary-color: rgba(var(--bs-tertiary-color-rgb), .5);
--bs-tertiary-color-rgb: var(--bs-body-color-rgb);
--bs-tertiary-bg: rgb(var(--bs-tertiary-bg-rgb));
--bs-tertiary-bg-rgb: var(--bs-gray-100);
--bs-heading-color: inherit;
--bs-link-color: rgb(var(--bs-link-color-rgb));
--bs-link-color-rgb: var(--bs-primary-rgb);
--bs-link-decoration: none;
--bs-link-hover-color: rgb(var(--bs-link-hover-color-rgb));
--bs-link-hover-color-rgb: var(--bs-primary-700-rgb);
--bs-link-hover-decoration: underline;
--bs-code-color: rgb(var(--bs-code-color-rgb));
--bs-code-color-rgb: var(--bs-primary-rgb);
--bs-highlight-bg: var(--bs-warning-100);
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: var(--bs-gray-300);
--bs-border-color-translucent: rgba(var(--bs-black-rgb), 0.175);
--bs-border-radius: 1rem;
--bs-border-radius-sm: 0.5rem;
--bs-border-radius-lg: 1.5rem;
--bs-border-radius-xl: 2rem;
--bs-border-radius-xxl: 2.5rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 12px 14px 0 rgba(21, 21, 26, 0.2);
--bs-box-shadow-sm: 0 8px 12px 0 rgba(21, 21, 26, 0.05);
--bs-box-shadow-lg: 0 20px 22px 0 rgba(21, 21, 26, 0.25);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.75);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-border-color-rgb: var(--bs-secondary-300-rgb);
--bs-focus-ring-border-color: rgb(var(--bs-focus-ring-border-color-rgb));
--bs-focus-ring-base-color-rgb: var(--bs-secondary-rgb);
--bs-focus-ring-base-color: rgb(var(--bs-focus-ring-base-color-rgb));
--bs-focus-ring-color: rgba(var(--bs-focus-ring-base-color-rgb), var(--bs-focus-ring-opacity));
--bs-form-valid-color: var(--bs-success);
--bs-form-valid-border-color: var(--bs-success);
--bs-form-invalid-color: var(--bs-danger);
--bs-form-invalid-border-color: var(--bs-danger);
--bs-heading-line-height: 1.2;
--bs-rfs-display-1: calc(1.725rem + 5.7vw);
--bs-fs-display-1: var(--bs-rfs-display-1);
--bs-rfs-display-2: calc(1.675rem + 5.1vw);
--bs-fs-display-2: var(--bs-rfs-display-2);
--bs-rfs-display-3: calc(1.625rem + 4.5vw);
--bs-fs-display-3: var(--bs-rfs-display-3);
--bs-rfs-display-4: calc(1.575rem + 3.9vw);
--bs-fs-display-4: var(--bs-rfs-display-4);
--bs-rfs-display-5: calc(1.525rem + 3.3vw);
--bs-fs-display-5: var(--bs-rfs-display-5);
--bs-rfs-display-6: calc(1.475rem + 2.7vw);
--bs-fs-display-6: var(--bs-rfs-display-6);
--bs-rfs-fs-1: calc(1.425rem + 2.1vw);
--bs-fs-1: var(--bs-rfs-fs-1);
--bs-rfs-fs-2: calc(1.375rem + 1.5vw);
--bs-fs-2: var(--bs-rfs-fs-2);
--bs-rfs-fs-3: calc(1.325rem + 0.9vw);
--bs-fs-3: var(--bs-rfs-fs-3);
--bs-rfs-fs-4: calc(1.275rem + 0.3vw);
--bs-fs-4: var(--bs-rfs-fs-4);
--bs-rfs-fs-5: 1.25rem;
--bs-fs-5: var(--bs-rfs-fs-5);
--bs-rfs-fs-6: 1rem;
--bs-fs-6: var(--bs-rfs-fs-6);
--bs-rfs-fs-small: 0.875em;
--bs-fs-small: var(--bs-rfs-fs-small);
--bs-rfs-fs-body-large: calc(1.275rem + 0.3vw);
--bs-fs-body-large: var(--bs-rfs-fs-body-large);
--bs-rfs-fs-body-medium: 1.25rem;
--bs-fs-body-medium: var(--bs-rfs-fs-body-medium);
--bs-rfs-fs-body-normal: 1rem;
--bs-fs-body-normal: var(--bs-rfs-fs-body-normal);
--bs-rfs-fs-body-small: 0.875rem;
--bs-fs-body-small: var(--bs-rfs-fs-body-small);
--bs-rfs-fs-body-tiny: 0.8125rem;
--bs-fs-body-tiny: var(--bs-rfs-fs-body-tiny);
--bs-fw-lighter: lighter;
--bs-fw-light: 200;
--bs-fw-normal: 400;
--bs-fw-semibold: 600;
--bs-fw-bold: 700;
--bs-fw-bolder: 800;
--bs-label-padding-y: var(--bs-ref-spacer-0);
--bs-label-padding-x: var(--bs-ref-spacer-2);
--bs-label-font-size: var(--bs-fs-small);
--bs-label-font-weight: var(--bs-fw-normal);
--bs-label-color: var(--bs-gray-700);
--bs-btn-border-radius: var(--bs-border-radius-pill);
--bs-btn-lg-border-radius: var(--bs-border-radius-pill);
--bs-btn-sm-border-radius: var(--bs-border-radius-pill);
--bs-btn-primary-color: var(--bs-white);
--bs-btn-primary-bg: var(--bs-primary-500);
--bs-btn-primary-border-color: var(--bs-primary-500);
--bs-btn-primary-box-shadow: 0 0 0 transparent;
--bs-btn-primary-hover-color: var(--bs-white);
--bs-btn-primary-hover-bg: var(--bs-primary-600);
--bs-btn-primary-hover-border-color: var(--bs-primary-600);
--bs-btn-primary-focus-color: var(--bs-white);
--bs-btn-primary-focus-bg: var(--bs-primary-600);
--bs-btn-primary-focus-border-color: var(--bs-primary-600);
--bs-btn-primary-focus-shadow-rgb: var(--bs-primary-500-rgb);
--bs-btn-primary-active-color: var(--bs-white);
--bs-btn-primary-active-bg: var(--bs-primary-700);
--bs-btn-primary-active-border-color: var(--bs-primary-700);
--bs-btn-primary-active-box-shadow: 0 0 0 transparent;
--bs-btn-primary-disabled-color: var(--bs-white);
--bs-btn-primary-disabled-bg: var(--bs-primary-500);
--bs-btn-primary-disabled-border-color: var(--bs-primary-500);
--bs-btn-primary-disabled-opacity: 0.65;
--bs-btn-outline-primary-color: var(--bs-primary-500);
--bs-btn-outline-primary-bg: transparent;
--bs-btn-outline-primary-border-color: var(--bs-primary-500);
--bs-btn-outline-primary-box-shadow: 0 0 0 transparent;
--bs-btn-outline-primary-hover-color: var(--bs-white);
--bs-btn-outline-primary-hover-bg: var(--bs-primary-600);
--bs-btn-outline-primary-hover-border-color: var(--bs-primary-600);
--bs-btn-outline-primary-focus-color: var(--bs-white);
--bs-btn-outline-primary-focus-bg: var(--bs-primary-600);
--bs-btn-outline-primary-focus-border-color: var(--bs-primary-600);
--bs-btn-outline-primary-focus-shadow-rgb: var(--bs-primary-500-rgb);
--bs-btn-outline-primary-active-color: var(--bs-white);
--bs-btn-outline-primary-active-bg: var(--bs-primary-700);
--bs-btn-outline-primary-active-border-color: var(--bs-primary-700);
--bs-btn-outline-primary-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-primary-disabled-color: var(--bs-primary-500);
--bs-btn-outline-primary-disabled-bg: transparent;
--bs-btn-outline-primary-disabled-border-color: var(--bs-primary-500);
--bs-btn-outline-primary-disabled-opacity: 0.65;
--bs-btn-link-primary-bg: transparent;
--bs-btn-link-primary-border-color: transparent;
--bs-btn-link-primary-color: var(--bs-primary-500);
--bs-btn-link-primary-box-shadow: 0 0 0 transparent;
--bs-btn-link-primary-hover-bg: transparent;
--bs-btn-link-primary-hover-border-color: transparent;
--bs-btn-link-primary-hover-color: var(--bs-primary-600);
--bs-btn-link-primary-focus-bg: transparent;
--bs-btn-link-primary-focus-border-color: transparent;
--bs-btn-link-primary-focus-color: var(--bs-primary-600);
--bs-btn-link-primary-focus-shadow-rgb: var(--bs-primary-500-rgb);
--bs-btn-link-primary-active-bg: var(--bs-primary-200);
--bs-btn-link-primary-active-border-color: transparent;
--bs-btn-link-primary-active-color: var(--bs-primary-700);
--bs-btn-link-primary-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-primary-disabled-bg: transparent;
--bs-btn-link-primary-disabled-border-color: transparent;
--bs-btn-link-primary-disabled-color: var(--bs-primary-500);
--bs-btn-link-primary-disabled-opacity: 0.65;
--bs-btn-secondary-color: var(--bs-white);
--bs-btn-secondary-bg: var(--bs-secondary-500);
--bs-btn-secondary-border-color: var(--bs-secondary-500);
--bs-btn-secondary-box-shadow: 0 0 0 transparent;
--bs-btn-secondary-hover-color: var(--bs-white);
--bs-btn-secondary-hover-bg: var(--bs-secondary-600);
--bs-btn-secondary-hover-border-color: var(--bs-secondary-600);
--bs-btn-secondary-focus-color: var(--bs-white);
--bs-btn-secondary-focus-bg: var(--bs-secondary-600);
--bs-btn-secondary-focus-border-color: var(--bs-secondary-600);
--bs-btn-secondary-focus-shadow-rgb: var(--bs-secondary-500-rgb);
--bs-btn-secondary-active-color: var(--bs-white);
--bs-btn-secondary-active-bg: var(--bs-secondary-700);
--bs-btn-secondary-active-border-color: var(--bs-secondary-700);
--bs-btn-secondary-active-box-shadow: 0 0 0 transparent;
--bs-btn-secondary-disabled-color: var(--bs-white);
--bs-btn-secondary-disabled-bg: var(--bs-secondary-500);
--bs-btn-secondary-disabled-border-color: var(--bs-secondary-500);
--bs-btn-secondary-disabled-opacity: 0.65;
--bs-btn-outline-secondary-color: var(--bs-secondary-500);
--bs-btn-outline-secondary-bg: transparent;
--bs-btn-outline-secondary-border-color: var(--bs-secondary-500);
--bs-btn-outline-secondary-box-shadow: 0 0 0 transparent;
--bs-btn-outline-secondary-hover-color: var(--bs-white);
--bs-btn-outline-secondary-hover-bg: var(--bs-secondary-600);
--bs-btn-outline-secondary-hover-border-color: var(--bs-secondary-600);
--bs-btn-outline-secondary-focus-color: var(--bs-white);
--bs-btn-outline-secondary-focus-bg: var(--bs-secondary-600);
--bs-btn-outline-secondary-focus-border-color: var(--bs-secondary-600);
--bs-btn-outline-secondary-focus-shadow-rgb: var(--bs-secondary-500-rgb);
--bs-btn-outline-secondary-active-color: var(--bs-white);
--bs-btn-outline-secondary-active-bg: var(--bs-secondary-700);
--bs-btn-outline-secondary-active-border-color: var(--bs-secondary-700);
--bs-btn-outline-secondary-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-secondary-disabled-color: var(--bs-secondary-500);
--bs-btn-outline-secondary-disabled-bg: transparent;
--bs-btn-outline-secondary-disabled-border-color: var(--bs-secondary-500);
--bs-btn-outline-secondary-disabled-opacity: 0.65;
--bs-btn-link-secondary-bg: transparent;
--bs-btn-link-secondary-border-color: transparent;
--bs-btn-link-secondary-color: var(--bs-secondary-500);
--bs-btn-link-secondary-box-shadow: 0 0 0 transparent;
--bs-btn-link-secondary-hover-bg: transparent;
--bs-btn-link-secondary-hover-border-color: transparent;
--bs-btn-link-secondary-hover-color: var(--bs-secondary-600);
--bs-btn-link-secondary-focus-bg: transparent;
--bs-btn-link-secondary-focus-border-color: transparent;
--bs-btn-link-secondary-focus-color: var(--bs-secondary-600);
--bs-btn-link-secondary-focus-shadow-rgb: var(--bs-secondary-500-rgb);
--bs-btn-link-secondary-active-bg: var(--bs-secondary-200);
--bs-btn-link-secondary-active-border-color: transparent;
--bs-btn-link-secondary-active-color: var(--bs-secondary-700);
--bs-btn-link-secondary-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-secondary-disabled-bg: transparent;
--bs-btn-link-secondary-disabled-border-color: transparent;
--bs-btn-link-secondary-disabled-color: var(--bs-secondary-500);
--bs-btn-link-secondary-disabled-opacity: 0.65;
--bs-btn-success-color: var(--bs-white);
--bs-btn-success-bg: var(--bs-success-500);
--bs-btn-success-border-color: var(--bs-success-500);
--bs-btn-success-box-shadow: 0 0 0 transparent;
--bs-btn-success-hover-color: var(--bs-white);
--bs-btn-success-hover-bg: var(--bs-success-600);
--bs-btn-success-hover-border-color: var(--bs-success-600);
--bs-btn-success-focus-color: var(--bs-white);
--bs-btn-success-focus-bg: var(--bs-success-600);
--bs-btn-success-focus-border-color: var(--bs-success-600);
--bs-btn-success-focus-shadow-rgb: var(--bs-success-500-rgb);
--bs-btn-success-active-color: var(--bs-white);
--bs-btn-success-active-bg: var(--bs-success-700);
--bs-btn-success-active-border-color: var(--bs-success-700);
--bs-btn-success-active-box-shadow: 0 0 0 transparent;
--bs-btn-success-disabled-color: var(--bs-white);
--bs-btn-success-disabled-bg: var(--bs-success-500);
--bs-btn-success-disabled-border-color: var(--bs-success-500);
--bs-btn-success-disabled-opacity: 0.65;
--bs-btn-outline-success-color: var(--bs-success-500);
--bs-btn-outline-success-bg: transparent;
--bs-btn-outline-success-border-color: var(--bs-success-500);
--bs-btn-outline-success-box-shadow: 0 0 0 transparent;
--bs-btn-outline-success-hover-color: var(--bs-white);
--bs-btn-outline-success-hover-bg: var(--bs-success-600);
--bs-btn-outline-success-hover-border-color: var(--bs-success-600);
--bs-btn-outline-success-focus-color: var(--bs-white);
--bs-btn-outline-success-focus-bg: var(--bs-success-600);
--bs-btn-outline-success-focus-border-color: var(--bs-success-600);
--bs-btn-outline-success-focus-shadow-rgb: var(--bs-success-500-rgb);
--bs-btn-outline-success-active-color: var(--bs-white);
--bs-btn-outline-success-active-bg: var(--bs-success-700);
--bs-btn-outline-success-active-border-color: var(--bs-success-700);
--bs-btn-outline-success-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-success-disabled-color: var(--bs-success-500);
--bs-btn-outline-success-disabled-bg: transparent;
--bs-btn-outline-success-disabled-border-color: var(--bs-success-500);
--bs-btn-outline-success-disabled-opacity: 0.65;
--bs-btn-link-success-bg: transparent;
--bs-btn-link-success-border-color: transparent;
--bs-btn-link-success-color: var(--bs-success-500);
--bs-btn-link-success-box-shadow: 0 0 0 transparent;
--bs-btn-link-success-hover-bg: transparent;
--bs-btn-link-success-hover-border-color: transparent;
--bs-btn-link-success-hover-color: var(--bs-success-600);
--bs-btn-link-success-focus-bg: transparent;
--bs-btn-link-success-focus-border-color: transparent;
--bs-btn-link-success-focus-color: var(--bs-success-600);
--bs-btn-link-success-focus-shadow-rgb: var(--bs-success-500-rgb);
--bs-btn-link-success-active-bg: var(--bs-success-200);
--bs-btn-link-success-active-border-color: transparent;
--bs-btn-link-success-active-color: var(--bs-success-700);
--bs-btn-link-success-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-success-disabled-bg: transparent;
--bs-btn-link-success-disabled-border-color: transparent;
--bs-btn-link-success-disabled-color: var(--bs-success-500);
--bs-btn-link-success-disabled-opacity: 0.65;
--bs-btn-info-color: var(--bs-white);
--bs-btn-info-bg: var(--bs-info-500);
--bs-btn-info-border-color: var(--bs-info-500);
--bs-btn-info-box-shadow: 0 0 0 transparent;
--bs-btn-info-hover-color: var(--bs-white);
--bs-btn-info-hover-bg: var(--bs-info-600);
--bs-btn-info-hover-border-color: var(--bs-info-600);
--bs-btn-info-focus-color: var(--bs-white);
--bs-btn-info-focus-bg: var(--bs-info-600);
--bs-btn-info-focus-border-color: var(--bs-info-600);
--bs-btn-info-focus-shadow-rgb: var(--bs-info-500-rgb);
--bs-btn-info-active-color: var(--bs-white);
--bs-btn-info-active-bg: var(--bs-info-700);
--bs-btn-info-active-border-color: var(--bs-info-700);
--bs-btn-info-active-box-shadow: 0 0 0 transparent;
--bs-btn-info-disabled-color: var(--bs-white);
--bs-btn-info-disabled-bg: var(--bs-info-500);
--bs-btn-info-disabled-border-color: var(--bs-info-500);
--bs-btn-info-disabled-opacity: 0.65;
--bs-btn-outline-info-color: var(--bs-info-500);
--bs-btn-outline-info-bg: transparent;
--bs-btn-outline-info-border-color: var(--bs-info-500);
--bs-btn-outline-info-box-shadow: 0 0 0 transparent;
--bs-btn-outline-info-hover-color: var(--bs-white);
--bs-btn-outline-info-hover-bg: var(--bs-info-600);
--bs-btn-outline-info-hover-border-color: var(--bs-info-600);
--bs-btn-outline-info-focus-color: var(--bs-white);
--bs-btn-outline-info-focus-bg: var(--bs-info-600);
--bs-btn-outline-info-focus-border-color: var(--bs-info-600);
--bs-btn-outline-info-focus-shadow-rgb: var(--bs-info-500-rgb);
--bs-btn-outline-info-active-color: var(--bs-white);
--bs-btn-outline-info-active-bg: var(--bs-info-700);
--bs-btn-outline-info-active-border-color: var(--bs-info-700);
--bs-btn-outline-info-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-info-disabled-color: var(--bs-info-500);
--bs-btn-outline-info-disabled-bg: transparent;
--bs-btn-outline-info-disabled-border-color: var(--bs-info-500);
--bs-btn-outline-info-disabled-opacity: 0.65;
--bs-btn-link-info-bg: transparent;
--bs-btn-link-info-border-color: transparent;
--bs-btn-link-info-color: var(--bs-info-500);
--bs-btn-link-info-box-shadow: 0 0 0 transparent;
--bs-btn-link-info-hover-bg: transparent;
--bs-btn-link-info-hover-border-color: transparent;
--bs-btn-link-info-hover-color: var(--bs-info-600);
--bs-btn-link-info-focus-bg: transparent;
--bs-btn-link-info-focus-border-color: transparent;
--bs-btn-link-info-focus-color: var(--bs-info-600);
--bs-btn-link-info-focus-shadow-rgb: var(--bs-info-500-rgb);
--bs-btn-link-info-active-bg: var(--bs-info-200);
--bs-btn-link-info-active-border-color: transparent;
--bs-btn-link-info-active-color: var(--bs-info-700);
--bs-btn-link-info-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-info-disabled-bg: transparent;
--bs-btn-link-info-disabled-border-color: transparent;
--bs-btn-link-info-disabled-color: var(--bs-info-500);
--bs-btn-link-info-disabled-opacity: 0.65;
--bs-btn-warning-color: var(--bs-gray-700);
--bs-btn-warning-bg: var(--bs-warning-500);
--bs-btn-warning-border-color: var(--bs-warning-500);
--bs-btn-warning-box-shadow: 0 0 0 transparent;
--bs-btn-warning-hover-color: var(--bs-black);
--bs-btn-warning-hover-bg: var(--bs-warning-600);
--bs-btn-warning-hover-border-color: var(--bs-warning-600);
--bs-btn-warning-focus-color: var(--bs-black);
--bs-btn-warning-focus-bg: var(--bs-warning-600);
--bs-btn-warning-focus-border-color: var(--bs-warning-600);
--bs-btn-warning-focus-shadow-rgb: var(--bs-warning-500-rgb);
--bs-btn-warning-active-color: var(--bs-black);
--bs-btn-warning-active-bg: var(--bs-warning-700);
--bs-btn-warning-active-border-color: var(--bs-warning-700);
--bs-btn-warning-active-box-shadow: 0 0 0 transparent;
--bs-btn-warning-disabled-color: var(--bs-gray-700);
--bs-btn-warning-disabled-bg: var(--bs-warning-500);
--bs-btn-warning-disabled-border-color: var(--bs-warning-500);
--bs-btn-warning-disabled-opacity: 0.65;
--bs-btn-outline-warning-color: var(--bs-warning-500);
--bs-btn-outline-warning-bg: transparent;
--bs-btn-outline-warning-border-color: var(--bs-warning-500);
--bs-btn-outline-warning-box-shadow: 0 0 0 transparent;
--bs-btn-outline-warning-hover-color: var(--bs-black);
--bs-btn-outline-warning-hover-bg: var(--bs-warning-600);
--bs-btn-outline-warning-hover-border-color: var(--bs-warning-600);
--bs-btn-outline-warning-focus-color: var(--bs-black);
--bs-btn-outline-warning-focus-bg: var(--bs-warning-600);
--bs-btn-outline-warning-focus-border-color: var(--bs-warning-600);
--bs-btn-outline-warning-focus-shadow-rgb: var(--bs-warning-500-rgb);
--bs-btn-outline-warning-active-color: var(--bs-black);
--bs-btn-outline-warning-active-bg: var(--bs-warning-700);
--bs-btn-outline-warning-active-border-color: var(--bs-warning-700);
--bs-btn-outline-warning-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-warning-disabled-color: var(--bs-warning-500);
--bs-btn-outline-warning-disabled-bg: transparent;
--bs-btn-outline-warning-disabled-border-color: var(--bs-warning-500);
--bs-btn-outline-warning-disabled-opacity: 0.65;
--bs-btn-link-warning-bg: transparent;
--bs-btn-link-warning-border-color: transparent;
--bs-btn-link-warning-color: var(--bs-warning-500);
--bs-btn-link-warning-box-shadow: 0 0 0 transparent;
--bs-btn-link-warning-hover-bg: transparent;
--bs-btn-link-warning-hover-border-color: transparent;
--bs-btn-link-warning-hover-color: var(--bs-warning-600);
--bs-btn-link-warning-focus-bg: transparent;
--bs-btn-link-warning-focus-border-color: transparent;
--bs-btn-link-warning-focus-color: var(--bs-warning-600);
--bs-btn-link-warning-focus-shadow-rgb: var(--bs-warning-500-rgb);
--bs-btn-link-warning-active-bg: var(--bs-warning-200);
--bs-btn-link-warning-active-border-color: transparent;
--bs-btn-link-warning-active-color: var(--bs-warning-700);
--bs-btn-link-warning-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-warning-disabled-bg: transparent;
--bs-btn-link-warning-disabled-border-color: transparent;
--bs-btn-link-warning-disabled-color: var(--bs-warning-500);
--bs-btn-link-warning-disabled-opacity: 0.65;
--bs-btn-danger-color: var(--bs-white);
--bs-btn-danger-bg: var(--bs-danger-500);
--bs-btn-danger-border-color: var(--bs-danger-500);
--bs-btn-danger-box-shadow: 0 0 0 transparent;
--bs-btn-danger-hover-color: var(--bs-white);
--bs-btn-danger-hover-bg: var(--bs-danger-600);
--bs-btn-danger-hover-border-color: var(--bs-danger-600);
--bs-btn-danger-focus-color: var(--bs-white);
--bs-btn-danger-focus-bg: var(--bs-danger-600);
--bs-btn-danger-focus-border-color: var(--bs-danger-600);
--bs-btn-danger-focus-shadow-rgb: var(--bs-danger-500-rgb);
--bs-btn-danger-active-color: var(--bs-white);
--bs-btn-danger-active-bg: var(--bs-danger-700);
--bs-btn-danger-active-border-color: var(--bs-danger-700);
--bs-btn-danger-active-box-shadow: 0 0 0 transparent;
--bs-btn-danger-disabled-color: var(--bs-white);
--bs-btn-danger-disabled-bg: var(--bs-danger-500);
--bs-btn-danger-disabled-border-color: var(--bs-danger-500);
--bs-btn-danger-disabled-opacity: 0.65;
--bs-btn-outline-danger-color: var(--bs-danger-500);
--bs-btn-outline-danger-bg: transparent;
--bs-btn-outline-danger-border-color: var(--bs-danger-500);
--bs-btn-outline-danger-box-shadow: 0 0 0 transparent;
--bs-btn-outline-danger-hover-color: var(--bs-white);
--bs-btn-outline-danger-hover-bg: var(--bs-danger-600);
--bs-btn-outline-danger-hover-border-color: var(--bs-danger-600);
--bs-btn-outline-danger-focus-color: var(--bs-white);
--bs-btn-outline-danger-focus-bg: var(--bs-danger-600);
--bs-btn-outline-danger-focus-border-color: var(--bs-danger-600);
--bs-btn-outline-danger-focus-shadow-rgb: var(--bs-danger-500-rgb);
--bs-btn-outline-danger-active-color: var(--bs-white);
--bs-btn-outline-danger-active-bg: var(--bs-danger-700);
--bs-btn-outline-danger-active-border-color: var(--bs-danger-700);
--bs-btn-outline-danger-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-danger-disabled-color: var(--bs-danger-500);
--bs-btn-outline-danger-disabled-bg: transparent;
--bs-btn-outline-danger-disabled-border-color: var(--bs-danger-500);
--bs-btn-outline-danger-disabled-opacity: 0.65;
--bs-btn-link-danger-bg: transparent;
--bs-btn-link-danger-border-color: transparent;
--bs-btn-link-danger-color: var(--bs-danger-500);
--bs-btn-link-danger-box-shadow: 0 0 0 transparent;
--bs-btn-link-danger-hover-bg: transparent;
--bs-btn-link-danger-hover-border-color: transparent;
--bs-btn-link-danger-hover-color: var(--bs-danger-600);
--bs-btn-link-danger-focus-bg: transparent;
--bs-btn-link-danger-focus-border-color: transparent;
--bs-btn-link-danger-focus-color: var(--bs-danger-600);
--bs-btn-link-danger-focus-shadow-rgb: var(--bs-danger-500-rgb);
--bs-btn-link-danger-active-bg: var(--bs-danger-200);
--bs-btn-link-danger-active-border-color: transparent;
--bs-btn-link-danger-active-color: var(--bs-danger-700);
--bs-btn-link-danger-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-danger-disabled-bg: transparent;
--bs-btn-link-danger-disabled-border-color: transparent;
--bs-btn-link-danger-disabled-color: var(--bs-danger-500);
--bs-btn-link-danger-disabled-opacity: 0.65;
--bs-btn-light-color: var(--bs-gray-700);
--bs-btn-light-bg: var(--bs-gray-100);
--bs-btn-light-border-color: var(--bs-gray-100);
--bs-btn-light-box-shadow: 0 0 0 transparent;
--bs-btn-light-hover-color: var(--bs-gray-700);
--bs-btn-light-hover-bg: var(--bs-gray-200);
--bs-btn-light-hover-border-color: var(--bs-gray-200);
--bs-btn-light-focus-color: var(--bs-gray-700);
--bs-btn-light-focus-bg: var(--bs-gray-200);
--bs-btn-light-focus-border-color: var(--bs-gray-200);
--bs-btn-light-focus-shadow-rgb: var(--bs-gray-100-rgb);
--bs-btn-light-active-color: var(--bs-black);
--bs-btn-light-active-bg: var(--bs-gray-300);
--bs-btn-light-active-border-color: var(--bs-gray-300);
--bs-btn-light-active-box-shadow: 0 0 0 transparent;
--bs-btn-light-disabled-color: var(--bs-gray-700);
--bs-btn-light-disabled-bg: var(--bs-gray-100);
--bs-btn-light-disabled-border-color: var(--bs-gray-100);
--bs-btn-light-disabled-opacity: 0.65;
--bs-btn-outline-light-color: var(--bs-gray-100);
--bs-btn-outline-light-bg: transparent;
--bs-btn-outline-light-border-color: var(--bs-gray-100);
--bs-btn-outline-light-box-shadow: 0 0 0 transparent;
--bs-btn-outline-light-hover-color: var(--bs-gray-700);
--bs-btn-outline-light-hover-bg: var(--bs-gray-200);
--bs-btn-outline-light-hover-border-color: var(--bs-gray-200);
--bs-btn-outline-light-focus-color: var(--bs-gray-700);
--bs-btn-outline-light-focus-bg: var(--bs-gray-200);
--bs-btn-outline-light-focus-border-color: var(--bs-gray-200);
--bs-btn-outline-light-focus-shadow-rgb: var(--bs-gray-100-rgb);
--bs-btn-outline-light-active-color: var(--bs-black);
--bs-btn-outline-light-active-bg: var(--bs-gray-300);
--bs-btn-outline-light-active-border-color: var(--bs-gray-300);
--bs-btn-outline-light-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-light-disabled-color: var(--bs-gray-100);
--bs-btn-outline-light-disabled-bg: transparent;
--bs-btn-outline-light-disabled-border-color: var(--bs-gray-100);
--bs-btn-outline-light-disabled-opacity: 0.65;
--bs-btn-link-light-bg: transparent;
--bs-btn-link-light-border-color: transparent;
--bs-btn-link-light-color: var(--bs-gray-100);
--bs-btn-link-light-box-shadow: 0 0 0 transparent;
--bs-btn-link-light-hover-bg: transparent;
--bs-btn-link-light-hover-border-color: transparent;
--bs-btn-link-light-hover-color: var(--bs-gray-200);
--bs-btn-link-light-focus-bg: transparent;
--bs-btn-link-light-focus-border-color: transparent;
--bs-btn-link-light-focus-color: var(--bs-gray-200);
--bs-btn-link-light-focus-shadow-rgb: var(--bs-gray-100-rgb);
--bs-btn-link-light-active-bg: var(--bs-gray-300);
--bs-btn-link-light-active-border-color: transparent;
--bs-btn-link-light-active-color: var(--bs-black);
--bs-btn-link-light-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-light-disabled-bg: transparent;
--bs-btn-link-light-disabled-border-color: transparent;
--bs-btn-link-light-disabled-color: var(--bs-gray-100);
--bs-btn-link-light-disabled-opacity: 0.65;
--bs-btn-dark-color: var(--bs-white);
--bs-btn-dark-bg: var(--bs-gray-900);
--bs-btn-dark-border-color: var(--bs-gray-900);
--bs-btn-dark-box-shadow: 0 0 0 transparent;
--bs-btn-dark-hover-color: var(--bs-white);
--bs-btn-dark-hover-bg: var(--bs-gray-800);
--bs-btn-dark-hover-border-color: var(--bs-gray-800);
--bs-btn-dark-focus-color: var(--bs-white);
--bs-btn-dark-focus-bg: var(--bs-gray-800);
--bs-btn-dark-focus-border-color: var(--bs-gray-800);
--bs-btn-dark-focus-shadow-rgb: var(--bs-gray-900-rgb);
--bs-btn-dark-active-color: var(--bs-white);
--bs-btn-dark-active-bg: var(--bs-gray-700);
--bs-btn-dark-active-border-color: var(--bs-gray-700);
--bs-btn-dark-active-box-shadow: 0 0 0 transparent;
--bs-btn-dark-disabled-color: var(--bs-white);
--bs-btn-dark-disabled-bg: var(--bs-gray-900);
--bs-btn-dark-disabled-border-color: var(--bs-gray-900);
--bs-btn-dark-disabled-opacity: 0.65;
--bs-btn-outline-dark-color: var(--bs-gray-900);
--bs-btn-outline-dark-bg: transparent;
--bs-btn-outline-dark-border-color: var(--bs-gray-900);
--bs-btn-outline-dark-box-shadow: 0 0 0 transparent;
--bs-btn-outline-dark-hover-color: var(--bs-white);
--bs-btn-outline-dark-hover-bg: var(--bs-gray-800);
--bs-btn-outline-dark-hover-border-color: var(--bs-gray-800);
--bs-btn-outline-dark-focus-color: var(--bs-white);
--bs-btn-outline-dark-focus-bg: var(--bs-gray-800);
--bs-btn-outline-dark-focus-border-color: var(--bs-gray-800);
--bs-btn-outline-dark-focus-shadow-rgb: var(--bs-gray-900-rgb);
--bs-btn-outline-dark-active-color: var(--bs-white);
--bs-btn-outline-dark-active-bg: var(--bs-gray-700);
--bs-btn-outline-dark-active-border-color: var(--bs-gray-700);
--bs-btn-outline-dark-active-box-shadow: 0 0 0 transparent;
--bs-btn-outline-dark-disabled-color: var(--bs-gray-900);
--bs-btn-outline-dark-disabled-bg: transparent;
--bs-btn-outline-dark-disabled-border-color: var(--bs-gray-900);
--bs-btn-outline-dark-disabled-opacity: 0.65;
--bs-btn-link-dark-bg: transparent;
--bs-btn-link-dark-border-color: transparent;
--bs-btn-link-dark-color: var(--bs-gray-900);
--bs-btn-link-dark-box-shadow: 0 0 0 transparent;
--bs-btn-link-dark-hover-bg: transparent;
--bs-btn-link-dark-hover-border-color: transparent;
--bs-btn-link-dark-hover-color: var(--bs-gray-800);
--bs-btn-link-dark-focus-bg: transparent;
--bs-btn-link-dark-focus-border-color: transparent;
--bs-btn-link-dark-focus-color: var(--bs-gray-800);
--bs-btn-link-dark-focus-shadow-rgb: var(--bs-gray-900-rgb);
--bs-btn-link-dark-active-bg: var(--bs-gray-700);
--bs-btn-link-dark-active-border-color: transparent;
--bs-btn-link-dark-active-color: var(--bs-white);
--bs-btn-link-dark-active-box-shadow: 0 0 0 transparent;
--bs-btn-link-dark-disabled-bg: transparent;
--bs-btn-link-dark-disabled-border-color: transparent;
--bs-btn-link-dark-disabled-color: var(--bs-gray-900);
--bs-btn-link-dark-disabled-opacity: 0.65;
--bs-ref-spacer-0: 0;
--bs-ref-spacer-1: 0.25rem;
--bs-ref-spacer-2: 0.5rem;
--bs-ref-spacer-3: 0.75rem;
--bs-ref-spacer-4: 1rem;
--bs-ref-spacer-5: 1.25rem;
--bs-ref-spacer-6: 1.5rem;
--bs-ref-spacer-7: 1.75rem;
--bs-ref-spacer-8: 2rem;
--bs-ref-spacer-9: 2.25rem;
--bs-ref-spacer-10: 2.5rem;
--bs-ref-spacer-11: 2.75rem;
--bs-ref-spacer-12: 3rem;
--bs-ref-spacer-13: 3.25rem;
--bs-ref-spacer-14: 3.5rem
}