/*
 * Color Tweaks
*/

/* // General */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #5867dd;
    --secondary: #e1e1ef;
    --success: #1dc9b7;
    --info: #2786fb;
    --warning: #ffb822;
    --danger: #fd27eb;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1399px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* // Bootstrap */

:root {
    --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: #000000;
    --bs-white: #ffffff;
    --bs-gray: #7E8299;
    --bs-gray-dark: #3F4254;
    --bs-gray-100: #f5f8fa;
    --bs-gray-200: #eff2f5;
    --bs-gray-300: #E4E6EF;
    --bs-gray-400: #B5B5C3;
    --bs-gray-500: #A1A5B7;
    --bs-gray-600: #7E8299;
    --bs-gray-700: #5E6278;
    --bs-gray-800: #3F4254;
    --bs-gray-900: #181C32;
    --bs-light: #f5f8fa;
    --bs-primary: #F9640A;
    --bs-secondary: #E4E6EF;
    --bs-success: #009ef7;
    --bs-info: #7239ea;
    --bs-warning: #ffc700;
    --bs-danger: #f1416c;
    --bs-dark: #181C32;
    --bs-white-rgb: 255, 255, 255;
    --bs-light-rgb: 245, 248, 250;
    --bs-primary-rgb: 249, 100, 10;
    --bs-secondary-rgb: 228, 230, 239;
    --bs-success-rgb: 0, 158, 247;
    --bs-info-rgb: 114, 57, 234;
    --bs-warning-rgb: 255, 199, 0;
    --bs-danger-rgb: 241, 65, 108;
    --bs-dark-rgb: 24, 28, 50;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 24, 28, 50;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #181C32;
    --bs-body-bg: #ffffff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #eff2f5;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    /* Tabler border tokens. ABS toggles dark via [data-theme], not Tabler's own
       [data-bs-theme], so Tabler's dark override never fires and --tblr-border-color
       stays at its light default (#e5e7eb) in dark mode — the white border on cards,
       tables, dropdowns, list-groups, page-headers, dividers, etc. Bind them to the ABS
       border color in both themes so every Tabler-bordered surface tracks the theme. */
    --tblr-border-color: #eff2f5;
    --tblr-border-color-translucent: rgba(9, 30, 66, 0.08);
    --bs-border-radius: 0.475rem;
    --bs-border-radius-sm: 0.425rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-heading-color: #181C32;
    --bs-link-color: #F9640A;
    --bs-link-hover-color: shift-color(#F9640A, 20%);
    --bs-code-color: #b93993;
    --bs-highlight-bg: #fff3cd;
}

[data-theme=dark] {
    --bs-gray-100: #18181b;
    --bs-gray-200: #262629;
    --bs-gray-300: #2a2a2e;
    --bs-gray-400: #3f3f46;
    --bs-gray-500: #71717a;
    --bs-gray-600: #8b8b94;
    --bs-gray-700: #c4c4cc;
    --bs-gray-800: #e4e4e7;
    --bs-gray-900: #FFFFFF;
    --bs-dark: #FFFFFF;
    --bs-light: #262629;
    --bs-secondary: #2a2a2e;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg-rgb: 10, 10, 10;
    --bs-body-color: #FFFFFF;
    --bs-body-bg: #0a0a0a;
    --bs-border-color: #262629;
    --tblr-border-color: #262629;
    --tblr-border-color-translucent: rgba(255, 255, 255, 0.08);
    /* Light-translucent edge in dark (Bootstrap default is a black translucent that
       vanishes on the dark surface — modal/offcanvas/content borders looked edgeless). */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-heading-color: #FFFFFF;
    --bs-link-color: #04c8c8;
    --bs-link-hover-color: shift-color(#04c8c8, 20%);
    --bs-code-color: #b93993;
}


/* // ABS */
:root,
[data-theme=light] {
    --abs-accordion-bg: #ffffff;
    --abs-accordion-border-color: #eff2f5;
    --abs-accordion-button-active-bg: #f5f8fa;
    --abs-accordion-button-active-color: #F9640A;
    --abs-accordion-button-bg: #ffffff;
    --abs-accordion-button-color: #181C32;
    --abs-accordion-button-focus-border-color: #eff2f5;
    --abs-accordion-button-focus-box-shadow: none;
    --abs-accordion-color: #181C32;
    --abs-accordion-icon-active-color: #F9640A;
    --abs-accordion-icon-color: #181C32;
    --abs-active-bg: #F4F6FA;
    --abs-badge-color: #ffffff;
    --abs-black: #000000;
    --abs-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
    --abs-body-bg-rgb: 255, 255, 255;
    --abs-body-bg: #ffffff;
    --abs-body-color: #181C32;
    --abs-border-color: #eff2f5;
    --abs-border-dashed-color: #E4E6EF;
    --abs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --abs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-breadcrumb-active-color: #F9640A;
    --abs-breadcrumb-divider-color: #7E8299;
    --abs-btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --abs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --abs-btn-close-color: #000000;
    --abs-btn-disabled-opacity: 0.65;
    --abs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(249, 100, 10, 0.25);
    --abs-btn-link-color: #F9640A;
    --abs-btn-link-disabled-color: #7E8299;
    --abs-btn-link-hover-color: shift-color(#F9640A, 20%);
    --abs-bullet-bg-color: #B5B5C3;
    --abs-card-bg: #ffffff;
    --abs-card-border-color: #eff2f5;
    --abs-card-border-dashed-color: #E4E6EF;
    --abs-card-box-shadow: 0px 10px 35px 0px rgba(56, 71, 109, 0.075);
    --abs-card-cap-bg: transparent;
    --abs-card-color: #181C32;
    --abs-carousel-custom-bullet-indicator-active-bg-color: #7E8299;
    --abs-carousel-custom-bullet-indicator-default-bg-color: #B5B5C3;
    --abs-carousel-custom-indicator-active-bg-color: #B5B5C3;
    --abs-carousel-custom-indicator-default-bg-color: #eff2f5;
    --abs-code-bg: #F1F3F8;
    --abs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
    --abs-code-color: #b93993;
    --abs-component-active-bg: #F9640A;
    --abs-component-active-color: #ffffff;
    --abs-component-hover-bg: #FFF0E6;
    --abs-component-hover-color: #F9640A;
    --abs-danger-active: #d9214e;
    --abs-danger-inverse: #ffffff;
    --abs-danger-light: #fff5f8;
    --abs-danger-rgb: 241, 65, 108;
    --abs-danger: #f1416c;
    --abs-dark-active: #131628;
    --abs-dark-inverse: #ffffff;
    --abs-dark-light: #eff2f5;
    --abs-dark-rgb: 24, 28, 50;
    --abs-dark: #181C32;
    --abs-drawer-bg-color: #ffffff;
    --abs-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
    --abs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
    --abs-dropdown-bg: #ffffff;
    --abs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-dropdown-color: #181C32;
    --abs-dropdown-divider-bg: #f5f8fa;
    --abs-dropdown-header-color: #7E8299;
    --abs-dropdown-link-active-bg: #F9640A;
    --abs-dropdown-link-active-color: #ffffff;
    --abs-dropdown-link-color: #181C32;
    --abs-dropdown-link-disabled-color: #A1A5B7;
    --abs-dropdown-link-hover-bg: #eff2f5;
    --abs-dropdown-link-hover-color: shade-color(#181C32, 10%);
    --abs-feedback-popup-background-color: #ffffff;
    --abs-feedback-popup-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-figure-caption-color: #7E8299;
    --abs-form-check-btn-check-disabled-opacity: 0.65;
    --abs-form-check-input-active-filter: brightness(90%);
    --abs-form-check-input-bg-solid: #eff2f5;
    --abs-form-check-input-bg: transparent;
    --abs-form-check-input-border: 1px solid #E4E6EF;
    --abs-form-check-input-checked-bg-color-solid: #F9640A;
    --abs-form-check-input-checked-bg-color: #F9640A;
    --abs-form-check-input-checked-border-color: #F9640A;
    --abs-form-check-input-checked-color: #ffffff;
    --abs-form-check-input-disabled-opacity: 0.5;
    --abs-form-check-input-focus-border: #B5B5C3;
    --abs-form-check-input-focus-box-shadow: none;
    --abs-form-check-input-indeterminate-bg-color: #F9640A;
    --abs-form-check-input-indeterminate-border-color: #F9640A;
    --abs-form-check-input-indeterminate-color: #ffffff;
    --abs-form-check-label-disabled-opacity: 0.5;
    --abs-form-file-button-bg: #f5f8fa;
    --abs-form-file-button-color: #5E6278;
    --abs-form-file-button-hover-bg: shade-color(#f5f8fa, 5%);
    --abs-form-label-color: #3F4254;
    --abs-form-select-bg: #ffffff;
    --abs-form-select-border-color: #E4E6EF;
    --abs-form-select-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --abs-form-select-color: #5E6278;
    --abs-form-select-disabled-bg: #eff2f5;
    --abs-form-select-disabled-border-color: #E4E6EF;
    --abs-form-select-focus-border-color: #B5B5C3;
    --abs-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(249, 100, 10, 0.25);
    --abs-form-select-indicator-color: #7E8299;
    --abs-form-switch-checked-color: #ffffff;
    --abs-form-switch-color-solid: #ffffff;
    --abs-form-switch-color: rgba(0, 0, 0, 0.25);
    --abs-form-switch-focus-color: #B5B5C3;
    --abs-form-text-color: #A1A5B7;
    --abs-gray-100-rgb: 245, 248, 250;
    --abs-gray-100: #f5f8fa;
    --abs-gray-200-rgb: 239, 242, 245;
    --abs-gray-200: #eff2f5;
    --abs-gray-300-rgb: 228, 230, 239;
    --abs-gray-300: #E4E6EF;
    --abs-gray-400-rgb: 181, 181, 195;
    --abs-gray-400: #B5B5C3;
    --abs-gray-500-rgb: 161, 165, 183;
    --abs-gray-500: #A1A5B7;
    --abs-gray-600-rgb: 126, 130, 153;
    --abs-gray-600: #7E8299;
    --abs-gray-700-rgb: 94, 98, 120;
    --abs-gray-700: #5E6278;
    --abs-gray-800-rgb: 63, 66, 84;
    --abs-gray-800: #3F4254;
    --abs-gray-900-rgb: 24, 28, 50;
    --abs-gray-900: #181C32;
    --abs-headings-color: #181C32;
    --abs-hover-bg: #F4F6FA;
    --abs-info-active: #5014d0;
    --abs-info-inverse: #ffffff;
    --abs-info-light: #f8f5ff;
    --abs-info-rgb: 114, 57, 234;
    --abs-info: #7239ea;
    --abs-input-bg: #ffffff;
    --abs-input-border-color: #E4E6EF;
    --abs-input-btn-focus-box-shadow: 0 0 0 0.25rem rgba(249, 100, 10, 0.25);
    --abs-input-btn-focus-color-opacity: 0.25;
    --abs-input-btn-focus-color: rgba(249, 100, 10, 0.25);
    --abs-input-color: #5E6278;
    --abs-input-disabled-bg: #eff2f5;
    --abs-input-disabled-border-color: #E4E6EF;
    --abs-input-focus-bg: #ffffff;
    --abs-input-focus-border-color: #B5B5C3;
    --abs-input-focus-color: #5E6278;
    --abs-input-group-addon-bg: #f5f8fa;
    --abs-input-group-addon-border-color: #E4E6EF;
    --abs-input-group-addon-color: #5E6278;
    --abs-input-height: 48px;
    --abs-input-placeholder-color: #A1A5B7;
    --abs-input-plaintext-color: #5E6278;
    --abs-input-solid-bg-focus: #eef3f7;
    --abs-input-solid-bg: #f5f8fa;
    --abs-input-solid-color: #5E6278;
    --abs-input-solid-placeholder-color: #A1A5B7;
    --abs-lg: 992px;
    --abs-light-active: #eff2f5;
    --abs-light-inverse: #7E8299;
    --abs-light-rgb: 245, 248, 250;
    --abs-light: #f5f8fa;
    --abs-link-color: #F9640A;
    --abs-link-hover-color: shift-color(#F9640A, 20%);
    --abs-list-group-action-active-bg: #eff2f5;
    --abs-list-group-action-active-color: #181C32;
    --abs-list-group-action-colorg: #5E6278;
    --abs-list-group-action-hover-color: #5E6278;
    --abs-list-group-active-bg: #F9640A;
    --abs-list-group-active-border-colorg: #F9640A;
    --abs-list-group-active-color: #ffffff;
    --abs-list-group-bg: #ffffff;
    --abs-list-group-border-color: rgba(0, 0, 0, 0.125);
    --abs-list-group-color: #181C32;
    --abs-list-group-disabled-bg: #ffffff;
    --abs-list-group-disabled-color: #7E8299;
    --abs-list-group-hover-bg: #f5f8fa;
    --abs-md: 768px;
    --abs-menu-dropdown-bg-color: #ffffff;
    --abs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-menu-heading-color: #A1A5B7;
    --abs-menu-link-bg-color-active: #F4F6FA;
    --abs-menu-link-bg-color-here: #F4F6FA;
    --abs-menu-link-bg-color-hover: #F4F6FA;
    --abs-menu-link-bg-color-show: #F4F6FA;
    --abs-modal-backdrop-bg: #000000;
    --abs-modal-backdrop-opacity: 0.3;
    --abs-modal-bg: #ffffff;
    --abs-modal-border-color: var(--bs-border-color-translucent);
    --abs-modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    --abs-modal-content-bg: #ffffff;
    --abs-modal-content-border-color: var(--bs-border-color-translucent);
    --abs-modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --abs-modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --abs-modal-content-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    --abs-modal-footer-border-color: #eff2f5;
    --abs-modal-header-border-color: #eff2f5;
    --abs-nav-pills-link-active-bg: #F9640A;
    --abs-nav-pills-link-active-color: #ffffff;
    --abs-nav-tabs-border-color: #eff2f5;
    --abs-nav-tabs-link-active-bg: #ffffff;
    --abs-nav-tabs-link-active-border-color: #E4E6EF #E4E6EF #ffffff;
    --abs-nav-tabs-link-active-color: #5E6278;
    --abs-nav-tabs-link-hover-border-color: #eff2f5 #eff2f5 #eff2f5;
    --abs-offcanvas-backdrop-bg: #000000;
    --abs-offcanvas-backdrop-opacity: 0.3;
    --abs-offcanvas-bg-color: #ffffff;
    --abs-offcanvas-border-color: var(--bs-border-color-translucent);
    --abs-offcanvas-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --abs-overlay-bg: rgba(0, 0, 0, 0.05);
    --abs-pagination-active-bg: #F9640A;
    --abs-pagination-active-border-color: transparent;
    --abs-pagination-active-color: #ffffff;
    --abs-pagination-bg: transparent;
    --abs-pagination-border-color: transparent;
    --abs-pagination-color: #5E6278;
    --abs-pagination-disabled-bg: transparent;
    --abs-pagination-disabled-color: #B5B5C3;
    --abs-pagination-focus-bg: #FFF0E6;
    --abs-pagination-focus-box-shadow: none;
    --abs-pagination-focus-color: #F9640A;
    --abs-pagination-focus-outline: 0;
    --abs-pagination-hover-bg: #FFF0E6;
    --abs-pagination-hover-border-color: transparent;
    --abs-pagination-hover-color: #F9640A;
    --abs-pagination-item-bg: #ffffff;
    --abs-popover-bg: #ffffff;
    --abs-popover-body-color: #3F4254;
    --abs-popover-border-color: #ffffff;
    --abs-popover-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-popover-header-bg: #ffffff;
    --abs-popover-header-border-color: #eff2f5;
    --abs-popover-header-color: #3F4254;
    --abs-primary-active: #E05708;
    --abs-primary-inverse: #ffffff;
    --abs-primary-light: #FFF0E6;
    --abs-primary-rgb: 249, 100, 10;
    --abs-primary: #F9640A;
    --abs-progress-bg: #f5f8fa;
    --abs-progress-box-shadow: none;
    --abs-rating-color-active: #FFAD0F;
    --abs-rating-color-default: #B5B5C3;
    --abs-ribbon-clip-bg: #181C32;
    --abs-ribbon-label-bg: #F9640A;
    --abs-ribbon-label-border-color: #026464;
    --abs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(24, 28, 50, 0.1);
    --abs-scrollbar-color: #eff2f5;
    --abs-scrollbar-height: 0.4rem;
    --abs-scrollbar-hover-color: #e9edf1;
    --abs-scrollbar-space: 0.5rem;
    --abs-scrollbar-width: 0.4rem;
    --abs-scrolltop-bg-color-hover: #F9640A;
    --abs-scrolltop-bg-color: #F9640A;
    --abs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-scrolltop-icon-color-hover: #ffffff;
    --abs-scrolltop-icon-color: #ffffff;
    --abs-scrolltop-opacity-hover: 1;
    --abs-scrolltop-opacity-on: 0.3;
    --abs-scrolltop-opacity: 0;
    --abs-secondary-active: #B5B5C3;
    --abs-secondary-inverse: #3F4254;
    --abs-secondary-light: #f5f8fa;
    --abs-secondary-rgb: 228, 230, 239;
    --abs-secondary: #f5f8fa;
    --abs-sm: 576px;
    --abs-success-active: #47be7d;
    --abs-success-inverse: #ffffff;
    --abs-success-light: #e8fff3;
    --abs-success-rgb: 80, 205, 137;
    --abs-success: #50cd89;
    --abs-symbol-border-color: rgba(255, 255, 255, 0.5);
    --abs-symbol-label-bg: #f5f8fa;
    --abs-symbol-label-color: #3F4254;
    --abs-table-accent-bg: transparent;
    --abs-table-active-bg: #f5f8fa;
    --abs-table-active-color: #181C32;
    --abs-table-bg: transparent;
    --abs-table-border-color: #eff2f5;
    --abs-table-caption-color: #A1A5B7;
    --abs-table-color: #181C32;
    --abs-table-hover-bg: #f5f8fa;
    --abs-table-hover-color: #181C32;
    --abs-table-loading-message-bg: #ffffff;
    --abs-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-table-loading-message-color: #5E6278;
    --abs-table-striped-bg: rgba(245, 248, 250, 0.75);
    --abs-table-striped-color: #181C32;
    --abs-text-danger: #f1416c;
    --abs-input-readonly-bg: #7e8a942e;
    --abs-text-dark: #181C32;
    --abs-text-gray-100: #f5f8fa;
    --abs-text-gray-200: #eff2f5;
    --abs-text-gray-300: #E4E6EF;
    --abs-text-gray-400: #B5B5C3;
    --abs-text-gray-500: #A1A5B7;
    --abs-text-gray-600: #7E8299;
    --abs-text-gray-700: #5E6278;
    --abs-text-gray-800: #3F4254;
    --abs-text-gray-900: #181C32;
    --abs-text-info: #7239ea;
    --abs-text-light: #f5f8fa;
    --abs-text-muted: #A1A5B7;
    --abs-text-primary: #F9640A;
    --abs-text-secondary: #E4E6EF;
    --abs-text-success: #009ef7;
    --abs-text-warning: #ffc700;
    --abs-text-white: #ffffff;
    --abs-thumbnail-bg: #ffffff;
    --abs-thumbnail-border-color: #eff2f5;
    --abs-thumbnail-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-toast-background-color: rgba(255, 255, 255, 0.85);
    --abs-toast-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-toast-header-background-color: rgba(255, 255, 255, 0.85);
    --abs-toast-header-border-color: rgba(0, 0, 0, 0.05);
    --abs-toast-header-color: #7E8299;
    --abs-tooltip-bg: #ffffff;
    --abs-tooltip-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --abs-tooltip-color: #3F4254;
    --abs-tooltip-opacity: 1;
    --abs-warning-active: #f1bc00;
    --abs-warning-inverse: #ffffff;
    --abs-warning-light: #fff8dd;
    --abs-warning-rgb: 255, 199, 0;
    --abs-warning: #ffc700;
    --abs-white-rgb: 255, 255, 255;
    --abs-white: #ffffff;
    --abs-xl: 1200px;
    --abs-xs: 0;
    --abs-xxl: 1400px;
}

[data-theme=dark] {
    --abs-text-muted: #71717a;
    --abs-gray-100: #18181b;
    --abs-gray-200: #262629;
    --abs-gray-300: #2a2a2e;
    --abs-gray-400: #3f3f46;
    --abs-gray-500: #71717a;
    --abs-gray-600: #8b8b94;
    --abs-gray-700: #c4c4cc;
    --abs-gray-800: #e4e4e7;
    --abs-gray-900: #FFFFFF;
    --abs-gray-100-rgb: 27, 27, 41;
    --abs-gray-200-rgb: 43, 43, 64;
    --abs-gray-300-rgb: 50, 50, 72;
    --abs-gray-400-rgb: 71, 71, 97;
    --abs-gray-500-rgb: 86, 86, 116;
    --abs-gray-600-rgb: 109, 109, 128;
    --abs-gray-700-rgb: 146, 146, 159;
    --abs-gray-800-rgb: 205, 205, 222;
    --abs-gray-900-rgb: 255, 255, 255;
    --abs-dark: #FFFFFF;
    --abs-light: #262629;
    --abs-secondary: #2a2a2e;
    --abs-dark-active: white;
    --abs-light-active: #2a2a2e;
    --abs-secondary-active: #3f3f46;
    --abs-primary-light: #1c3238;
    --abs-success-light: #1c3a2b;
    --abs-info-light: #2f264f;
    --abs-warning-light: #392f28;
    --abs-danger-light: #3a2434;
    --abs-dark-light: #262629;
    --abs-secondary-light: #18181b;
    --abs-dark-inverse: #18181b;
    --abs-light-inverse: #8b8b94;
    --abs-secondary-inverse: #e4e4e7;
    --abs-dark-rgb: 255, 255, 255;
    --abs-light-rgb: 43, 43, 64;
    --abs-secondary-rgb: 50, 50, 72;
    --abs-text-dark: #FFFFFF;
    --abs-input-readonly-bg: #326b9a91;
    --abs-text-secondary: #2a2a2e;
    --abs-text-gray-100: #18181b;
    --abs-text-gray-200: #262629;
    --abs-text-gray-300: #2a2a2e;
    --abs-text-gray-400: #3f3f46;
    --abs-text-gray-500: #71717a;
    --abs-text-gray-600: #8b8b94;
    --abs-text-gray-700: #c4c4cc;
    --abs-text-gray-800: #e4e4e7;
    --abs-text-gray-900: #FFFFFF;
    --abs-body-bg: #0a0a0a;
    --abs-body-bg-rgb: 10, 10, 10;
    --abs-body-color: #FFFFFF;
    --abs-link-color: #04c8c8;
    --abs-link-hover-color: shift-color(#04c8c8, 20%);
    --abs-border-color: #262629;
    --abs-border-dashed-color: #2a2a2e;
    --abs-component-active-color: #ffffff;
    --abs-component-active-bg: #04c8c8;
    --abs-component-hover-color: #04c8c8;
    --abs-component-hover-bg: #1c3238;
    --abs-card-color: #b4b8cc;
    --abs-hover-bg: #262629;
    --abs-active-bg: #262629;
    --abs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --abs-headings-color: #FFFFFF;
    --abs-table-color: #FFFFFF;
    --abs-table-bg: transparent;
    --abs-table-striped-color: #FFFFFF;
    --abs-table-striped-bg: rgba(27, 27, 41, 0.75);
    --abs-table-accent-bg: transparent;
    --abs-table-active-color: #FFFFFF;
    --abs-table-active-bg: #18181b;
    --abs-table-hover-colorr: #FFFFFF;
    --abs-table-hover-bg: #18181b;
    --abs-table-border-color: #262629;
    --abs-table-caption-color: #71717a;
    --abs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-table-loading-message-bg: #262629;
    --abs-table-loading-message-color: #c4c4cc;
    --abs-input-btn-focus-color: rgba(4, 200, 200, 0.25);
    --abs-input-btn-focus-color-opacity: 0.25;
    --abs-input-color: #c4c4cc;
    --abs-input-placeholder-color: #71717a;
    --abs-input-plaintext-color: #c4c4cc;
    --abs-btn-disabled-opacity: 0.65;
    --abs-btn-link-color: #04c8c8;
    --abs-btn-link-hover-color: shift-color(#04c8c8, 20%);
    --abs-btn-link-disabled-color: #8b8b94;
    --abs-form-label-color: #e4e4e7;
    --abs-form-text-color: #71717a;
    --abs-input-bg: #0a0a0a;
    --abs-input-disabled-bg: #262629;
    --abs-input-disabled-border-color: #2a2a2e;
    --abs-input-border-color: #2a2a2e;
    --abs-input-focus-bg: #0a0a0a;
    --abs-input-focus-border-color: #3f3f46;
    --abs-input-focus-color: #c4c4cc;
    --abs-input-solid-bg: #18181b;
    --abs-input-solid-bg-focus: #1f1f2f;
    --abs-input-solid-placeholder-color: #71717a;
    --abs-input-solid-color: #c4c4cc;
    --abs-form-check-input-active-filter: brightness(90%);
    --abs-form-check-input-bg: transparent;
    --abs-form-check-input-bg-solid: #262629;
    --abs-form-check-input-border: 1px solid #2a2a2e;
    --abs-form-check-input-focus-border: #3f3f46;
    --abs-form-check-input-focus-box-shadow: none;
    --abs-form-check-input-checked-color: #ffffff;
    --abs-form-check-input-checked-bg-color: #04c8c8;
    --abs-form-check-input-checked-border-color: #04c8c8;
    --abs-form-check-input-indeterminate-color: #ffffff;
    --abs-form-check-input-indeterminate-bg-color: #04c8c8;
    --abs-form-check-input-indeterminate-border-color: #04c8c8;
    --abs-form-check-input-disabled-opacity: 0.5;
    --abs-form-check-label-disabled-opacity: 0.5;
    --abs-form-check-btn-check-disabled-opacity: 0.65;
    --abs-form-switch-color: rgba(255, 255, 255, 0.25);
    --abs-form-switch-color-solid: #A1A5B7;
    --abs-form-switch-focus-color: #3f3f46;
    --abs-form-switch-checked-color: #ffffff;
    --abs-input-group-addon-color: #c4c4cc;
    --abs-input-group-addon-bg: #18181b;
    --abs-input-group-addon-border-color: #2a2a2e;
    --abs-form-select-color: #c4c4cc;
    --abs-form-select-bg: #0a0a0a;
    --abs-form-select-disabled-bg: #262629;
    --abs-form-select-disabled-border-color: #2a2a2e;
    --abs-form-select-indicator-color: #8b8b94;
    --abs-form-select-border-color: #2a2a2e;
    --abs-form-select-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --abs-form-select-focus-border-color: #3f3f46;
    --abs-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(4, 200, 200, 0.25);
    --abs-form-file-button-color: #c4c4cc;
    --abs-form-file-button-bg: #18181b;
    --abs-form-file-button-hover-bg: shade-color(#18181b, 5%);
    --abs-nav-tabs-border-color: #262629;
    --abs-nav-tabs-link-hover-border-color: #262629 #262629 #262629;
    --abs-nav-tabs-link-active-color: #c4c4cc;
    --abs-nav-tabs-link-active-bg: #0a0a0a;
    --abs-nav-tabs-link-active-border-color: #2a2a2e #2a2a2e #0a0a0a;
    --abs-nav-pills-link-active-color: #ffffff;
    --abs-nav-pills-link-active-bg: #04c8c8;
    --abs-dropdown-color: #FFFFFF;
    --abs-dropdown-bg: #0a0a0a;
    --abs-dropdown-divider-bg: #18181b;
    --abs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-dropdown-link-color: #FFFFFF;
    --abs-dropdown-link-hover-color: shade-color(#FFFFFF, 10%);
    --abs-dropdown-link-hover-bg: #262629;
    --abs-dropdown-link-active-color: #ffffff;
    --abs-dropdown-link-active-bg: #04c8c8;
    --abs-dropdown-link-disabled-color: #71717a;
    --abs-dropdown-header-color: #8b8b94;
    --abs-pagination-item-bg: #0a0a0a;
    --abs-pagination-color: #c4c4cc;
    --abs-pagination-bg: transparent;
    --abs-pagination-border-color: transparent;
    --abs-pagination-focus-color: #04c8c8;
    --abs-pagination-focus-bg: #1c3238;
    --abs-pagination-focus-box-shadow: none;
    --abs-pagination-focus-outline: 0;
    --abs-pagination-hover-color: #04c8c8;
    --abs-pagination-hover-bg: #1c3238;
    --abs-pagination-hover-border-color: transparent;
    --abs-pagination-active-color: #ffffff;
    --abs-pagination-active-bg: #04c8c8;
    --abs-pagination-active-border-color: transparent;
    --abs-pagination-disabled-color: #3f3f46;
    --abs-pagination-disabled-bg: transparent;
    --abs-card-bg: #0a0a0a;
    --abs-card-cap-color: #e4e4e7;
    --abs-card-box-shadow: none;
    --abs-card-border-color: #262629;
    --abs-card-border-dashed-color: #2a2a2e;
    --abs-card-cap-bg: transparent;
    --abs-accordion-color: #FFFFFF;
    --abs-accordion-bg: #0a0a0a;
    --abs-accordion-border-color: #262629;
    --abs-accordion-button-color: #FFFFFF;
    --abs-accordion-button-bg: #0a0a0a;
    --abs-accordion-button-active-bg: #18181b;
    --abs-accordion-button-active-color: #04c8c8;
    --abs-accordion-button-focus-border-color: #262629;
    --abs-accordion-button-focus-box-shadow: none;
    --abs-accordion-icon-color: #FFFFFF;
    --abs-accordion-icon-active-color: #04c8c8;
    --abs-tooltip-color: #e4e4e7;
    --abs-tooltip-bg: #262629;
    --abs-tooltip-opacity: 1;
    --abs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-popover-bg: #262629;
    --abs-popover-border-color: #262629;
    --abs-popover-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-popover-header-bg: #262629;
    --abs-popover-header-color: #e4e4e7;
    --abs-popover-header-border-color: #2a2a2e;
    --abs-popover-body-color: #e4e4e7;
    --abs-toast-background-color: rgba(0, 0, 0, 0.85);
    --abs-toast-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-toast-header-color: #8b8b94;
    --abs-toast-header-background-color: rgba(0, 0, 0, 0.85);
    --abs-toast-header-border-color: rgba(255, 255, 255, 0.05);
    --abs-badge-color: #0a0a0a;
    --abs-modal-bg: #0a0a0a;
    --abs-modal-box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.05);
    --abs-modal-content-bg: #0a0a0a;
    --abs-modal-content-box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.05);
    --abs-modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.1);
    --abs-modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba(255, 255, 255, 0.1);
    --abs-modal-header-border-color: #262629;
    --abs-modal-footer-border-color: #262629;
    --abs-modal-backdrop-bg: #000000;
    --abs-modal-backdrop-opacity: 0.4;
    --abs-progress-bg: #18181b;
    --abs-progress-box-shadow: none;
    --abs-list-group-color: #FFFFFF;
    --abs-list-group-bg: #000000;
    --abs-list-group-border-color: rgba(255, 255, 255, 0.125);
    --abs-list-group-hover-bg: #f5f8fa;
    --abs-list-group-active-color: #ffffff;
    --abs-list-group-active-bg: #04c8c8;
    --abs-list-group-active-border-colorg: #04c8c8;
    --abs-list-group-disabled-color: #8b8b94;
    --abs-list-group-disabled-bg: #000000;
    --abs-list-group-action-colorg: #c4c4cc;
    --abs-list-group-action-hover-color: #c4c4cc;
    --abs-list-group-action-active-color: #FFFFFF;
    --abs-list-group-action-active-bg: #262629;
    --abs-thumbnail-bg: #0a0a0a;
    --abs-thumbnail-border-color: #262629;
    --abs-thumbnail-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --abs-figure-caption-color: #8b8b94;
    --abs-breadcrumb-divider-color: #8b8b94;
    --abs-breadcrumb-active-color: #04c8c8;
    --abs-carousel-custom-indicator-default-bg-color: #262629;
    --abs-carousel-custom-indicator-active-bg-color: #3f3f46;
    --abs-carousel-custom-bullet-indicator-default-bg-color: #3f3f46;
    --abs-carousel-custom-bullet-indicator-active-bg-color: #8b8b94;
    --abs-btn-close-color: #ffffff;
    --abs-code-bg: #262629;
    --abs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
    --abs-code-color: #b93993;
    --abs-offcanvas-bg-color: #0a0a0a;
    --abs-offcanvas-box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.1);
    --abs-offcanvas-backdrop-bg: #000000;
    --abs-offcanvas-backdrop-opacity: 0.4;
    --abs-symbol-label-color: #e4e4e7;
    --abs-symbol-label-bg: #18181b;
    --abs-symbol-border-color: rgba(255, 255, 255, 0.5);
    --abs-bullet-bg-color: #3f3f46;
    --abs-scrolltop-opacity: 0;
    --abs-scrolltop-opacity-on: 0.3;
    --abs-scrolltop-opacity-hover: 1;
    --abs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --abs-scrolltop-bg-color: #04c8c8;
    --abs-scrolltop-bg-color-hover: #04c8c8;
    --abs-scrolltop-icon-color: #ffffff;
    --abs-scrolltop-icon-color-hover: #ffffff;
    --abs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    --abs-drawer-bg-color: #0a0a0a;
    --abs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);
    --abs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-menu-dropdown-bg-color: #0a0a0a;
    --abs-menu-link-bg-color-hover: #262629;
    --abs-menu-link-bg-color-show: #262629;
    --abs-menu-link-bg-color-here: #262629;
    --abs-menu-link-bg-color-active: #262629;
    --abs-menu-heading-color: #71717a;
    --abs-feedback-popup-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --abs-feedback-popup-background-color: #0a0a0a;
    --abs-scrollbar-color: #262629;
    --abs-scrollbar-hover-color: #27273a;
    --abs-overlay-bg: rgba(255, 255, 255, 0.05);
    --abs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);
    --abs-rating-color-default: #3f3f46;
    --abs-rating-color-active: #FFAD0F;
    --abs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
    --abs-ribbon-label-bg: #04c8c8;
    --abs-ribbon-label-border-color: #026464;
    --abs-ribbon-clip-bg: #f5f8fa;
}


/* Icons */
:root, 
[data-theme=light] {
    --abs-accordion-button-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2304c8c8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --abs-accordion-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23181C32'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --abs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --abs-form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-check-input-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --abs-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237E8299' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --abs-form-switch-bg-image-solid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    --abs-form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-switch-focus-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B5B5C3'/%3e%3c/svg%3e");
}


[data-theme=dark] {
    --abs-form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-check-input-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --abs-form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
    --abs-form-switch-bg-image-solid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A1A5B7'/%3e%3c/svg%3e");
    --abs-form-switch-focus-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23474761'/%3e%3c/svg%3e");
    --abs-form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --abs-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236D6D80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --abs-accordion-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --abs-accordion-button-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2304c8c8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --abs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}


/* Backgrounds */

.bg-body {
    --bg-color: var(--abs-body-bg-rgb);
    background-color: var(--abs-body-bg) !important;
}

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

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

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

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

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

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

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

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

.bg-white {
    background-color: var(--abs-white) !important;
}

.bg-black {
    background-color: var(--abs-black) !important;
}

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

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


/* ABS Light */
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--abs-primary-active) !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: var(--abs-secondary-active) !important;
}

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: var(--abs-success-active) !important;
}

a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: var(--abs-info-active) !important;
}

a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: var(--abs-warning-active) !important;
}


a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: var(--abs-danger-active) !important;
}


a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: var(--abs-light-active) !important;
}


a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
    background-color: var(--abs-dark-active) !important;
}


/* Dark */
[data-theme=dark] a.bg-primary:focus,
[data-theme=dark] a.bg-primary:hover,
[data-theme=dark] button.bg-primary:focus,
[data-theme=dark] button.bg-primary:hover {
    background-color: var(--abs-primary-active) !important;
}

[data-theme=dark] a.bg-success:focus,
[data-theme=dark] a.bg-success:hover,
[data-theme=dark] button.bg-success:focus,
[data-theme=dark] button.bg-success:hover {
    background-color: var(--abs-success-active) !important;
}

[data-theme=dark] a.bg-danger:focus,
[data-theme=dark] a.bg-danger:hover,
[data-theme=dark] button.bg-danger:focus,
[data-theme=dark] button.bg-danger:hover {
    background-color: var(--abs-danger-active) !important;
}

[data-theme=dark] a.bg-secondary:focus,
[data-theme=dark] a.bg-secondary:hover,
[data-theme=dark] button.bg-secondary:focus,
[data-theme=dark] button.bg-secondary:hover {
    background-color: var(--abs-secondary-active) !important;
}


[data-theme=dark] p {
    color: var(--abs-white);
}

[data-theme=light] p {
    color: var(--abs-black);
}

[data-theme=dark] b {
    color: var(--abs-gray-600);
    font-weight: 600;
}

[data-theme=light] b {
    color: var(--abs-gray-600);
    font-weight: 600;
}

.bg-white {
    --abs-bg-rgb-color: var(--abs-white-rgb);
    background-color: var(--abs-white) !important;
}

.bg-hover-white {
    cursor: pointer;
}

.bg-hover-white:hover {
    background-color: var(--abs-white) !important;
}

.bg-active-white.active {
    background-color: var(--abs-white) !important;
}

.bg-state-white {
    cursor: pointer;
}

.bg-state-white.active,
.bg-state-white:hover {
    background-color: var(--abs-white) !important;
}

.bg-light {
    --abs-bg-rgb-color: var(--abs-light-rgb);
    background-color: var(--abs-light) !important;
}

.bg-hover-light {
    cursor: pointer;
}

.bg-hover-light:hover {
    background-color: var(--abs-light) !important;
}

.bg-active-light.active {
    background-color: var(--abs-light) !important;
}

.bg-state-light {
    cursor: pointer;
}

.bg-state-light.active,
.bg-state-light:hover {
    background-color: var(--abs-light) !important;
}

.bg-light-primary {
    background-color: var(--abs-primary-light) !important;
}

.bg-primary {
    --abs-bg-rgb-color: var(--abs-primary-rgb);
    background-color: var(--abs-primary) !important;
}

.bg-hover-light-primary {
    cursor: pointer;
}

.bg-hover-light-primary:hover {
    background-color: var(--abs-primary-light) !important;
}

.bg-state-light-primary {
    cursor: pointer;
}

.bg-state-light-primary.active,
.bg-state-light-primary:hover {
    background-color: var(--abs-primary-light) !important;
}

.bg-hover-primary {
    cursor: pointer;
}

.bg-hover-primary:hover {
    background-color: var(--abs-primary) !important;
}

.bg-active-primary.active {
    background-color: var(--abs-primary) !important;
}

.bg-state-primary {
    cursor: pointer;
}

.bg-state-primary.active,
.bg-state-primary:hover {
    background-color: var(--abs-primary) !important;
}

.bg-light-secondary {
    background-color: var(--abs-secondary-light) !important;
}

.bg-secondary {
    --abs-bg-rgb-color: var(--abs-secondary-rgb);
    background-color: var(--abs-secondary) !important;
}

.bg-hover-light-secondary {
    cursor: pointer;
}

.bg-hover-light-secondary:hover {
    background-color: var(--abs-secondary-light) !important;
}

.bg-state-light-secondary {
    cursor: pointer;
}

.bg-state-light-secondary.active,
.bg-state-light-secondary:hover {
    background-color: var(--abs-secondary-light) !important;
}

.bg-hover-secondary {
    cursor: pointer;
}

.bg-hover-secondary:hover {
    background-color: var(--abs-secondary) !important;
}

.bg-active-secondary.active {
    background-color: var(--abs-secondary) !important;
}

.bg-state-secondary {
    cursor: pointer;
}

.bg-state-secondary.active,
.bg-state-secondary:hover {
    background-color: var(--abs-secondary) !important;
}

.bg-light-success {
    background-color: var(--abs-success-light) !important;
}

.bg-success {
    --abs-bg-rgb-color: var(--abs-success-rgb);
    background-color: var(--abs-success) !important;
}

.bg-hover-light-success {
    cursor: pointer;
}

.bg-hover-light-success:hover {
    background-color: var(--abs-success-light) !important;
}

.bg-state-light-success {
    cursor: pointer;
}

.bg-state-light-success.active,
.bg-state-light-success:hover {
    background-color: var(--abs-success-light) !important;
}

.bg-hover-success {
    cursor: pointer;
}

.bg-hover-success:hover {
    background-color: var(--abs-success) !important;
}

.bg-active-success.active {
    background-color: var(--abs-success) !important;
}

.bg-state-success {
    cursor: pointer;
}

.bg-state-success.active,
.bg-state-success:hover {
    background-color: var(--abs-success) !important;
}

.bg-light-info {
    background-color: var(--abs-info-light) !important;
}

.bg-info {
    --abs-bg-rgb-color: var(--abs-info-rgb);
    background-color: var(--abs-info) !important;
}

.bg-hover-light-info {
    cursor: pointer;
}

.bg-hover-light-info:hover {
    background-color: var(--abs-info-light) !important;
}

.bg-state-light-info {
    cursor: pointer;
}

.bg-state-light-info.active,
.bg-state-light-info:hover {
    background-color: var(--abs-info-light) !important;
}

.bg-hover-info {
    cursor: pointer;
}

.bg-hover-info:hover {
    background-color: var(--abs-info) !important;
}

.bg-active-info.active {
    background-color: var(--abs-info) !important;
}

.bg-state-info {
    cursor: pointer;
}

.bg-state-info.active,
.bg-state-info:hover {
    background-color: var(--abs-info) !important;
}

.bg-light-warning {
    background-color: var(--abs-warning-light) !important;
}

.bg-warning {
    --abs-bg-rgb-color: var(--abs-warning-rgb);
    background-color: var(--abs-warning) !important;
}

.bg-hover-light-warning {
    cursor: pointer;
}

.bg-hover-light-warning:hover {
    background-color: var(--abs-warning-light) !important;
}

.bg-state-light-warning {
    cursor: pointer;
}

.bg-state-light-warning.active,
.bg-state-light-warning:hover {
    background-color: var(--abs-warning-light) !important;
}

.bg-hover-warning {
    cursor: pointer;
}

.bg-hover-warning:hover {
    background-color: var(--abs-warning) !important;
}

.bg-active-warning.active {
    background-color: var(--abs-warning) !important;
}

.bg-state-warning {
    cursor: pointer;
}

.bg-state-warning.active,
.bg-state-warning:hover {
    background-color: var(--abs-warning) !important;
}

.bg-light-danger {
    background-color: var(--abs-danger-light) !important;
}

.bg-danger {
    --abs-bg-rgb-color: var(--abs-danger-rgb);
    background-color: var(--abs-danger) !important;
}

.bg-hover-light-danger {
    cursor: pointer;
}

.bg-hover-light-danger:hover {
    background-color: var(--abs-danger-light) !important;
}

.bg-state-light-danger {
    cursor: pointer;
}

.bg-state-light-danger.active,
.bg-state-light-danger:hover {
    background-color: var(--abs-danger-light) !important;
}

.bg-hover-danger {
    cursor: pointer;
}

.bg-hover-danger:hover {
    background-color: var(--abs-danger) !important;
}

.bg-active-danger.active {
    background-color: var(--abs-danger) !important;
}

.bg-state-danger {
    cursor: pointer;
}

.bg-state-danger.active,
.bg-state-danger:hover {
    background-color: var(--abs-danger) !important;
}

.bg-light-dark {
    background-color: var(--abs-dark-light) !important;
}

.bg-dark {
    --abs-bg-rgb-color: var(--abs-dark-rgb);
    background-color: var(--abs-dark) !important;
}

.bg-hover-light-dark {
    cursor: pointer;
}

.bg-hover-light-dark:hover {
    background-color: var(--abs-dark-light) !important;
}

.bg-state-light-dark {
    cursor: pointer;
}

.bg-state-light-dark.active,
.bg-state-light-dark:hover {
    background-color: var(--abs-dark-light) !important;
}

.bg-hover-dark {
    cursor: pointer;
}

.bg-hover-dark:hover {
    background-color: var(--abs-dark) !important;
}

.bg-active-dark.active {
    background-color: var(--abs-dark) !important;
}

.bg-state-dark {
    cursor: pointer;
}

.bg-state-dark.active,
.bg-state-dark:hover {
    background-color: var(--abs-dark) !important;
}

.bg-gray-100 {
    background-color: var(--abs-gray-100);
}

.bg-gray-100i {
    background-color: var(--abs-gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--abs-gray-200);
}

.bg-gray-200i {
    background-color: var(--abs-gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--abs-gray-300);
}

.bg-gray-300i {
    background-color: var(--abs-gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--abs-gray-400);
}

.bg-gray-400i {
    background-color: var(--abs-gray-400) !important;
}

.bg-gray-500 {
    background-color: var(--abs-gray-500);
}

.bg-gray-500i {
    background-color: var(--abs-gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--abs-gray-600);
}

.bg-gray-600i {
    background-color: var(--abs-gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--abs-gray-700);
}

.bg-gray-700i {
    background-color: var(--abs-gray-700) !important;
}

.bg-gray-800 {
    background-color: var(--abs-gray-800);
}

.bg-gray-800i {
    background-color: var(--abs-gray-800) !important;
}

.bg-gray-900 {
    background-color: var(--abs-gray-900);
}

.bg-gray-900i {
    background-color: var(--abs-gray-900) !important;
}

.bg-opacity-0 {
    background-color: rgba(var(--abs-bg-rgb-color), 0) !important;
}

.bg-hover-opacity-0:hover {
    background-color: rgba(var(--abs-bg-rgb-color), 0) !important;
}

.bg-active-opacity-0.active {
    background-color: rgba(var(--abs-bg-rgb-color), 0) !important;
}

.bg-state-opacity-0 .active,
.bg-state-opacity-0:hover {
    background-color: rgba(var(--abs-bg-rgb-color), 0) !important;
}

.bg-opacity-5 {
    background-color: rgba(var(--abs-bg-rgb-color), .05) !important;
}

.bg-hover-opacity-5:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .05) !important;
}

.bg-active-opacity-5.active {
    background-color: rgba(var(--abs-bg-rgb-color), .05) !important;
}

.bg-state-opacity-5 .active,
.bg-state-opacity-5:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .05) !important;
}

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

.bg-hover-opacity-10:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .1) !important;
}

.bg-active-opacity-10.active {
    background-color: rgba(var(--abs-bg-rgb-color), .1) !important;
}

.bg-state-opacity-10 .active,
.bg-state-opacity-10:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .1) !important;
}

.bg-opacity-15 {
    background-color: rgba(var(--abs-bg-rgb-color), .15) !important;
}

.bg-hover-opacity-15:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .15) !important;
}

.bg-active-opacity-15.active {
    background-color: rgba(var(--abs-bg-rgb-color), .15) !important;
}

.bg-state-opacity-15 .active,
.bg-state-opacity-15:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .15) !important;
}

.bg-opacity-20 {
    background-color: rgba(var(--abs-bg-rgb-color), .2) !important;
}

.bg-hover-opacity-20:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .2) !important;
}

.bg-active-opacity-20.active {
    background-color: rgba(var(--abs-bg-rgb-color), .2) !important;
}

.bg-state-opacity-20 .active,
.bg-state-opacity-20:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .2) !important;
}

.bg-opacity-25 {
    background-color: rgba(var(--abs-bg-rgb-color), .25) !important;
}

.bg-hover-opacity-25:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .25) !important;
}

.bg-active-opacity-25.active {
    background-color: rgba(var(--abs-bg-rgb-color), .25) !important;
}

.bg-state-opacity-25 .active,
.bg-state-opacity-25:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .25) !important;
}

.bg-opacity-50 {
    background-color: rgba(var(--abs-bg-rgb-color), .5) !important;
}

.bg-hover-opacity-50:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .5) !important;
}

.bg-active-opacity-50.active {
    background-color: rgba(var(--abs-bg-rgb-color), .5) !important;
}

.bg-state-opacity-50 .active,
.bg-state-opacity-50:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .5) !important;
}

.bg-opacity-75 {
    background-color: rgba(var(--abs-bg-rgb-color), .75) !important;
}

.bg-hover-opacity-75:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .75) !important;
}

.bg-active-opacity-75.active {
    background-color: rgba(var(--abs-bg-rgb-color), .75) !important;
}

.bg-state-opacity-75 .active,
.bg-state-opacity-75:hover {
    background-color: rgba(var(--abs-bg-rgb-color), .75) !important;
}

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

.bg-hover-opacity-100:hover {
    background-color: rgba(var(--abs-bg-rgb-color), 1) !important;
}

.bg-active-opacity-100.active {
    background-color: rgba(var(--abs-bg-rgb-color), 1) !important;
}

.bg-state-opacity-100 .active,
.bg-state-opacity-100:hover {
    background-color: rgba(var(--abs-bg-rgb-color), 1) !important;
}


/* ─────────────────────────────────────────────────────────────
 * Dark revamp (shadcn) — neutral white primary; teal kept for
 * links/focus only. Loaded last in this file so it wins.
 * ───────────────────────────────────────────────────────────── */
[data-theme=dark] {
    --bs-primary: #fafafa;
    --bs-primary-rgb: 250, 250, 250;
    --abs-primary: #fafafa;
    --abs-primary-active: #e4e4e7;
    --abs-primary-inverse: #0a0a0a;
    --abs-primary-rgb: 250, 250, 250;
    --abs-primary-light: #18181b;
    --abs-component-active-bg: #fafafa;
    --abs-component-active-color: #0a0a0a;
    --abs-nav-pills-link-active-bg: #fafafa;
    --abs-nav-pills-link-active-color: #0a0a0a;
    --abs-list-group-active-bg: #fafafa;
    --abs-list-group-active-color: #0a0a0a;
    --abs-list-group-active-border-colorg: #fafafa;
    --abs-pagination-active-bg: #fafafa;
    --abs-pagination-active-color: #0a0a0a;
    --abs-pagination-active-border-color: transparent;
    /* softened near-white text + zinc-400 muted for readability */
    --bs-body-color: #fafafa;
    --bs-heading-color: #fafafa;
    --abs-body-color: #fafafa;
    --abs-headings-color: #fafafa;
    --abs-text-muted: #a1a1aa;
    --bs-border-color: #262629;
    --abs-border-color: #262629;
}

[data-theme=dark] body {
    letter-spacing: -0.006em;
}
/* Studio chrome surfaces (page / header / aside) — override here in the linked
 * stylesheet so the near-black ground applies even if abs.studio.css is bundled. */
[data-theme=dark] {
    --abs-page-bg: #0a0a0a;
    --abs-header-desabsop-fixed-bg-color: #0a0a0a;
    --abs-header-tablet-and-mobile-fixed-bg-color: #0a0a0a;
    --abs-aside-bg-color: #0a0a0a;
    --abs-docs-page-bg-color: #0a0a0a;
    --abs-docs-aside-bg-color: #0a0a0a;
}

/* Light-mode Studio canvas — nudge it off pure/near white to a subtle cool-neutral
 * gray so white surfaces lift off the ground instead of blending in. The visible
 * canvas is the main content region, which the layout renders as a full-bleed
 * `.content.card` — so it was painted #fff by --abs-card-bg (body / --abs-page-bg
 * are NOT the painted surface in the shipped bundle). We recolor ONLY
 * `.content.card` (specificity 0,2,0 beats plain `.card`), so inner real cards stay
 * #fff and pop, while the menu/aside, header, subheader, commandbar and footer —
 * all separate elements, none of them `.content` — are left untouched. The canvas
 * tracks the --abs-page-bg token; dial it with the one value below: deeper/more
 * card-pop (#e8ebf0), or a faintly-warm greige (#f0efeb). Dark is unaffected —
 * page-bg is #0a0a0a there, so `.content.card` resolves to the same near-black
 * surface it already used. */
html:not([data-theme=dark]) {
    --abs-page-bg: #FDFDFD;
}

.content.card {
    background-color: var(--abs-page-bg);
}

/* =====================================================================
   Contextual (left) menu — align the Blazor host to the React chrome
   ---------------------------------------------------------------------
   The Blazor host (AsideMenuContextualMenuTabComponent) wraps the React
   menu in a fat `mx-*` gutter (~20px) that a React-bundle refresh can't
   touch (it's server-rendered). Zero it so the React menu owns the gutter
   (a consistent 10px, matching the header/search/divider/nav). The
   "Context Menu" heading STAYS (every aside tab has a title) — we only
   tame its huge mb-10 (2.5rem) margin and align it to the 10px gutter.
   Scoped to the contextual tab pane by id, so no other aside tab shifts.
   ===================================================================== */
#abs_aside_nav_tab_menu_context > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#abs_aside_nav_tab_menu_context > div > h3 {
    margin-bottom: 0.6rem !important;
    padding-left: 10px;
}

/* =====================================================================
   Inter (self-hosted, variable) — the modern SaaS typeface for the Studio menu (and later, platform-wide).
   ---------------------------------------------------------------------
   The woff2 live under ABS.Assets/wwwroot/fonts/inter/. This stylesheet is loaded directly (per-file) in dev, so
   the relative url() resolves from css/tweaks/ up to fonts/inter/. The menu applies the family via the React bundle
   (FluentUI fontFamilyBase override + menuRoot font-family = 'Inter Variable'). No external CDN. font-weight 100 900
   = the single variable axis covers every weight. Two subsets: Latin + Latin-Extended (covers EN/FR/ES glyphs).
   ===================================================================== */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../../fonts/inter/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   Studio-wide thin, always-visible, themed scrollbars
   ---------------------------------------------------------------------
   The shell's original "pretty scrollbar" block (abs.studio.css) is gated
   behind @media (min-width:992px) and only recolors on :hover, and the
   .hover-scroll-overlay-y containers hide the bar until hover — so most
   scroll surfaces show no themed bar (or none below 992px). This override
   loads after that bundle (this tweaks file is linked last in the Studio
   head) and simply EXTENDS the same treatment to ALL viewports, always
   visible, reusing the --abs-scrollbar-* tokens defined above (light + dark
   both resolve automatically via [data-theme=dark]). Thin and tasteful;
   the track stays transparent. Same element scope as the original block so
   it layers cleanly rather than fighting it. */

div,
main,
ol,
pre,
span,
ul {
    scrollbar-width: thin;
    scrollbar-color: var(--abs-scrollbar-color) transparent;
}

div::-webkit-scrollbar,
main::-webkit-scrollbar,
ol::-webkit-scrollbar,
pre::-webkit-scrollbar,
span::-webkit-scrollbar,
ul::-webkit-scrollbar {
    width: var(--abs-scrollbar-width);
    height: var(--abs-scrollbar-height);
}

div::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
ol::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
span::-webkit-scrollbar-track,
ul::-webkit-scrollbar-track,
div::-webkit-scrollbar-corner,
main::-webkit-scrollbar-corner,
ol::-webkit-scrollbar-corner,
pre::-webkit-scrollbar-corner,
span::-webkit-scrollbar-corner,
ul::-webkit-scrollbar-corner {
    background-color: transparent;
}

div::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
ol::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
span::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb {
    background-color: var(--abs-scrollbar-color);
    border-radius: 999px;
}

div::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
ol::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
span::-webkit-scrollbar-thumb:hover,
ul::-webkit-scrollbar-thumb:hover {
    background-color: var(--abs-scrollbar-hover-color);
}