@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/design-system.md

@@ -0,0 +1,403 @@
+# Appsbd UI Library — Design System
+
+**AI Assistant Instructions**:
+This document is the **visual-language counterpart** to [AI_REFERENCE.md](./AI_REFERENCE.md). Where `AI_REFERENCE.md` documents component **APIs** (props, events, slots), this file documents the **design tokens** (colors, typography, spacing, radii, shadows, motion) that those components are built on. Use this file when you need to:
+
+- Pick the right color, font size, radius, or spacing for new UI
+- Style custom layouts that should feel consistent with built-in `Ab*` components
+- Theme the library (light/dark, brand re-skinning)
+- Translate a Figma mock from the Appsbd Design System to library code
+
+**Source of truth.** The visual foundations below are derived from the **Appsbd Design System** folder (`./Appsbd Design System/`) — itself extracted from the **"Kigen design system"** Figma file. The library implements these tokens in SCSS using the `bb-` CSS-variable prefix and the `.apbd-` class prefix. Where a design-system token has a direct library variable, both names are listed.
+
+---
+
+## 1. Design Philosophy
+
+The library follows four rules, in priority order:
+
+1. **Bootstrap variables first.** If a need can be met by overriding a Bootstrap CSS variable (e.g. `--bb-primary`, `--bb-border-radius`), do that.
+2. **Custom tokens second.** When Bootstrap has no matching variable (skeletons, sliders, custom panels), define a new token in `src/styles/_variables.scss` using the **`apbd-`** namespace under the **`bb-`** prefix, e.g. `--bb-apbd-bg-color`.
+3. **Class-variant over new component.** Layout variations of an existing base component (e.g. `tile-card`, `item-card`, `insight-card` for `AbCard`) are **CSS class extensions** in the corresponding `_component.scss`, not new SFCs.
+4. **Dark-mode safe colors.** Use `var(--bb-apbd-bg-color)` and `var(--bb-apbd-border-color)` inside component styles instead of `body-bg` or `border-color`, so light/dark switching just works.
+
+> **Prefix rule.** CSS **class names** use `.apbd-` (e.g. `.apbd-skeleton`). CSS **variables** use `#{$prefix}` interpolation (e.g. `var(--#{$prefix}apbd-border-color)`, which compiles to `var(--bb-apbd-border-color)`).
+
+---
+
+## 2. Brand & Color System
+
+### 2.1 Primary brand color
+
+The library's primary brand color is **Brand/600 — `#155EEF`** (Appsbd blue). It is the value of `--bb-primary` in the default (`blue`) skin and drives the focus ring, primary buttons, active nav, links, and component accents.
+
+### 2.2 Brand blue scale
+
+Used for primary actions, links, focus rings, active states.
+
+| Token       | Hex       | Library variable          | Usage                          |
+| ----------- | --------- | ------------------------- | ------------------------------ |
+| Brand/25    | `#F5F8FF` | —                         | Very light tint                |
+| Brand/50    | `#EFF4FF` | `--bb-primary-light`      | Active nav bg, light highlight |
+| Brand/100   | `#D1E0FF` | —                         | Hover tint                     |
+| Brand/200   | `#B2CCFF` | —                         | Border on blue tint            |
+| Brand/300   | `#84ADFF` | `--bb-apbd-border-color-focus` | Focus ring (light)        |
+| Brand/400   | `#528BFF` | —                         | Secondary interactive          |
+| Brand/500   | `#2970FF` | (dark-mode `--bb-primary`) | Hover on primary              |
+| **Brand/600** | **`#155EEF`** | **`--bb-primary` (light)** | **Primary action, brand blue** |
+| Brand/700   | `#004EEB` | `--bb-primary-btn-hover`  | Pressed / hover-darkened       |
+| Brand/800   | `#0040C1` | —                         | Dark brand                     |
+| Brand/900   | `#00359E` | —                         | Very dark                      |
+| Brand/950   | `#002266` | —                         | Darkest                        |
+
+### 2.3 Neutral / gray scale
+
+Used for text, borders, surfaces, and dividers.
+
+| Token    | Hex       | Usage                          |
+| -------- | --------- | ------------------------------ |
+| Gray/25  | `#FCFCFD` | Subtle backgrounds             |
+| Gray/50  | `#F9FAFB` | Table headers, inputs          |
+| Gray/100 | `#F2F4F7` | Light backgrounds, subtle border |
+| Gray/200 | `#EAECF0` | Default dividers               |
+| Gray/300 | `#D0D5DD` | Borders                        |
+| Gray/400 | `#98A2B3` | Disabled, placeholder          |
+| Gray/500 | `#667085` | Muted text                     |
+| Gray/600 | `#475569` | Secondary text                 |
+| Gray/700 | `#344054` | Body text                      |
+| Gray/800 | `#1D2939` | Heading text                   |
+| Gray/900 | `#101828` | Primary text                   |
+
+### 2.4 Semantic colors
+
+Used by `AbBaseAlert`, `AbBadge`, `AbToast`, `AbButton variant`, form error states.
+
+| Role        | Background | Border    | Text/Icon | Solid     |
+| ----------- | ---------- | --------- | --------- | --------- |
+| **Success** | `#ECFDF3`  | `#ABEFC6` | `#085D3A` | `#00C950` |
+| **Error**   | `#FEF2F2`  | `#FECACA` | `#B91C1C` | `#FB2C36` |
+| **Warning** | `#FFFBEB`  | `#FDE68A` | `#92400E` | `#EEB004` |
+| **Info**    | `#EFF4FF`  | `#B2CCFF` | `#155EEF` | `#2970FF` |
+
+These map to Bootstrap's `--bb-success`, `--bb-danger`, `--bb-warning`, `--bb-info` variants used by `AbButton`'s `variant` prop and `AbBadge`'s `variant` prop.
+
+### 2.5 Surface & layout colors
+
+| Role               | Hex       | Library variable               |
+| ------------------ | --------- | ------------------------------ |
+| App shell bg       | `#EBEFF5` | (page wrapper)                 |
+| Card / panel       | `#FFFFFF` | `--bb-apbd-bg-color` (light)   |
+| Sidebar bg         | `#FFFFFF` | (`AbSidebar` root)             |
+| Topbar bg          | `#FFFFFF` |                                |
+| Table header bg    | `#F9FAFB` | (`AbTable` thead)              |
+| Input bg           | `#FFFFFF` |                                |
+| Active nav-item bg | `#EFF4FF` | `--bb-apbd-sidebar-item-active-bg` |
+
+> **Dark-mode rule.** Component styles must read from `var(--bb-apbd-bg-color)` / `var(--bb-apbd-border-color)` instead of hard-coding `#FFFFFF` / `#EAECF0`, so the values flip cleanly when `[data-bs-theme="dark"]` is set on the root.
+
+### 2.6 Borders
+
+| Role           | Hex       | Library variable               |
+| -------------- | --------- | ------------------------------ |
+| Default        | `#EAECF0` | `--bb-apbd-border-color`       |
+| Strong         | `#D5D7DA` | `--bb-apbd-border-color-strong` |
+| Subtle         | `#F2F4F7` | —                              |
+| Brand / focus  | `#155EEF` | `--bb-primary`                 |
+| Focus ring     | `#84ADFF` | `--bb-apbd-border-color-focus` |
+| Error          | `#FDA29B` | `--bb-apbd-input-error-border` |
+
+### 2.7 Theme skins
+
+The library ships **multiple color skins** under `playground/skins/themes/`. Each is a `_<name>.scss` partial defining `$theme-color`, `$theme-color-light`, `$theme-color-dark`, `$theme-color-hover`, and `$border-color-focus-light`, then re-emitting them as `--bb-primary`, `--bb-primary-light`, `--bb-primary-rgb`, etc.
+
+**Built-in skins:** `blue` (default), `black`, `cyan`, `gray`, `green`, `orange`, `pink`, `purple`, `red`, `violet`.
+
+Skin switching is wired through the `AbColorPicker` in the playground; use the **`add-theme-skin`** project skill to add a new skin so all five wiring steps (theme partial, skin wrapper, vite rollup entry, picker option, `toggleTheme` mapping) are applied consistently.
+
+---
+
+## 3. Typography
+
+### 3.1 Font families
+
+| Role            | Family           | Library token (CSS) | Usage                                    |
+| --------------- | ---------------- | ------------------- | ---------------------------------------- |
+| **Sans (UI)**   | **Inter**        | `--font-sans`       | All body, labels, headings, form fields  |
+| Nav             | Geist            | `--font-nav`        | Sidebar nav items, app brand name        |
+| Display         | Inter            | `--font-display`    | Hero / marketing display text            |
+| Auth headings   | Inter Tight      | `--font-auth`       | Login / register screen titles           |
+| Mono            | Geist            | `--font-mono`       | `<code>`, mono helpers                   |
+
+`Inter` is the variable font shipped in `Appsbd Design System/fonts/`. `Geist` and `Inter Tight` come from Google Fonts.
+
+### 3.2 Display scale
+
+For marketing pages, dashboards' hero numbers, and landing screens.
+
+| Style          | Size | Weight | Line height | Token                          |
+| -------------- | ---- | ------ | ----------- | ------------------------------ |
+| Display 2xl    | 72px | 700    | 1.0         | `--text-display-2xl-*`         |
+| Display xl     | 60px | 600    | 1.1         | `--text-display-xl-*`          |
+| Display lg     | 48px | 600    | 1.1         | `--text-display-lg-*`          |
+| Display md     | 44px | 600    | 1.15        | `--text-display-md-*`          |
+| Display sm     | 30px | 600    | 1.2         | `--text-display-sm-*`          |
+| Display xs     | 24px | 600    | 1.2         | `--text-display-xs-*`          |
+
+### 3.3 Text scale
+
+For app body, labels, captions.
+
+| Style    | Size | Weight | Line height | Library variable                     | Usage                  |
+| -------- | ---- | ------ | ----------- | ------------------------------------ | ---------------------- |
+| Text xl  | 20px | 400    | 30px        | `--bb-apbd-fs-lg` (1.5rem)           | Large body, subheaders |
+| Text lg  | 18px | 400    | 28px        | —                                    | Subheadings            |
+| Text md  | 16px | 400    | 24px        | `--bb-apbd-fs-md` (1rem)             | Body text (default)    |
+| Text sm  | 14px | 400    | 20px        | `--bb-apbd-fs-sm` (0.875rem)         | Labels, nav, hints     |
+| Text xs  | 12px | 400    | 16px        | `--bb-apbd-fs-xs` (0.75rem)          | Captions, meta         |
+| Text xxs | 11px | 400    | 14px        | —                                    | Micro labels           |
+
+### 3.4 Font weights
+
+| Token  | Weight | Library variable              |
+| ------ | ------ | ----------------------------- |
+| Thin   | 300    | `--bb-apbd-fw-thin`           |
+| Normal | 400    | `--bb-apbd-fw-normal`         |
+| Bold   | 500    | `--bb-apbd-fw-bold` (medium)  |
+| Bolder | 600    | `--bb-apbd-fw-bolder` (semi)  |
+| Boldest| 700    | `--bb-apbd-fw-boldest`        |
+
+### 3.5 Semantic type helpers
+
+These class names exist in `Appsbd Design System/colors_and_type.css` as a cheat-sheet for ad-hoc HTML; library components apply equivalent styles internally.
+
+- `.h1` — 24/32 medium, primary text
+- `.h2` — 20/28 semibold, primary text
+- `.h3` — 16/24 bold, primary text
+- `.body` — 16/24 regular, secondary text
+- `.label` — 14/20 medium, primary text
+- `.caption` — 12/16 regular, muted text
+- `.nav-label` / `.nav-label--active` — 16/24 Geist
+- `.auth-heading` — 22/28 Inter Tight medium
+
+### 3.6 Tone & voice
+
+When generating copy for screens built with this library:
+
+- **Professional but approachable** — direct, benefit-led. Not overly casual.
+- **Second person ("you")** — e.g. "Welcome back, Sarah."
+- **Action-oriented labels** — "Add Application", "Renew", "Sign out".
+- **Sentence case for body UI**, **Title Case for nav labels**.
+- **No emoji in production UI copy.**
+- **Numbers used sparingly and cleanly** — `7`, `$13,710`, `2`.
+
+---
+
+## 4. Spacing & Layout
+
+### 4.1 Spacing scale (4px base)
+
+| Token          | Value | CSS var          |
+| -------------- | ----- | ---------------- |
+| `--space-1`    | 4px   |                  |
+| `--space-2`    | 8px   |                  |
+| `--space-2-5`  | 10px  |                  |
+| `--space-3`    | 12px  |                  |
+| `--space-4`    | 16px  |                  |
+| `--space-5`    | 20px  |                  |
+| `--space-6`    | 24px  |                  |
+| `--space-8`    | 32px  |                  |
+| `--space-10`   | 40px  |                  |
+| `--space-12`   | 48px  |                  |
+| `--space-16`   | 64px  |                  |
+
+Common gaps: **4, 8, 12, 16, 24, 32, 48, 64**.
+
+### 4.2 App layout
+
+| Region           | Size              | Note                                                    |
+| ---------------- | ----------------- | ------------------------------------------------------- |
+| Sidebar width    | **256px** fixed   | `AbSidebar` collapsed state managed via provide/inject  |
+| Topbar height    | **80px**          |                                                         |
+| Content padding  | **24px**          | `--bb-apbd-container-page-padding` (≈ 0.937rem default) |
+| Card padding     | **24–32px**       | `--bb-apbd-card-*` variables                            |
+
+### 4.3 Component sizing scale
+
+Many components expose a `size` prop with values **`xs`, `sm`, `md`, `lg`, `xl`, `xxl`** (default `md`). The size is mapped to per-component padding/font tokens in `_variables.scss` (e.g. `--bb-input-field-padding-md`, `--bb-apbd-btn-padding-md-x`). Pick:
+
+- `xs` / `sm` — dense forms, table inline editors, filter panels
+- `md` — default app content, settings forms, modals
+- `lg` / `xl` — auth screens, wizard steps, marketing surfaces
+- `xxl` — display / hero CTAs
+
+---
+
+## 5. Corner Radii
+
+| Token         | Value  | Library variable          | Usage                            |
+| ------------- | ------ | ------------------------- | -------------------------------- |
+| `--radius-xs` | 4px    | —                         | Tags, small pills                |
+| `--radius-sm` | 6px    | `--bb-border-radius-sm`   | Small buttons                    |
+| `--radius-md` | 8px    | `--bb-border-radius`      | Inputs, buttons (sm/md)          |
+| `--radius-lg` | 10px   | `--bb-border-radius-lg`   | Nav items, buttons (lg/xl)       |
+| `--radius-xl` | 12px   | —                         | Search bar, medium cards         |
+| `--radius-2xl`| 14px   | —                         | Icon containers                  |
+| `--radius-3xl`| 16px   | `--bb-apbd-card-border-radius` (≈ 0.875rem) | Cards          |
+| `--radius-pill` | 9999px | —                       | Badges, avatars (`AbAvatar`)     |
+
+---
+
+## 6. Shadows & Elevation
+
+Flat by default. Shadows are reserved for cards, dropdowns, popovers, and elevated modals.
+
+| Token            | Value                                                                                | Usage                              |
+| ---------------- | ------------------------------------------------------------------------------------ | ---------------------------------- |
+| `--shadow-xs`    | `0px 1px 2px 0px rgba(16,24,40,0.05)`                                                | Subtle resting elevation           |
+| `--shadow-sm`    | `0px 1px 2px -1px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1)`                  | Cards (default `AbCard`)           |
+| `--shadow-md`    | `0px 2px 4px -2px rgba(16,24,40,0.06), 0px 4px 8px -2px rgba(16,24,40,0.10)`         | Dropdowns, popovers (`AbPopover`)  |
+| `--shadow-lg`    | `0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08)`       | Modals (`AbModal`, `AbEasyModal`)  |
+| `--shadow-card`  | `0px 2px 2px 0px rgba(0,0,0,0.03)`                                                   | Soft card variant                  |
+
+**No gradients on UI surfaces.** Gradients appear only in design documentation headers, never in app chrome.
+
+---
+
+## 7. Iconography
+
+**Library: [Lucide Icons](https://lucide.dev/)** — installed as the `lucide-vue-next` peer dependency. Bootstrap Icons is also a peer dep and may be used for a few legacy components.
+
+### Sizing
+
+| Size  | Usage                                       |
+| ----- | ------------------------------------------- |
+| 16×16 | Inline / topbar buttons / dense controls    |
+| 20×20 | Nav items (default), most `AbButton` icons  |
+| 24×24 | Larger nav, prominent actions, empty states |
+
+- **Stroke weight:** 1.5–2px (Lucide default).
+- **Color:** inherits text color; active nav/icons = `--bb-primary` (`#155EEF`); muted = `#717680`.
+
+### Common icons in use
+
+`panel-right-open`, `plus`, `arrow-up`, `arrow-right`, `chevron-left`, `chevron-down`, `sparkles`, `house`, `log-out`, `alert-circle`, `x`, `user`, `refresh-ccw`, `mail`, `search`.
+
+**Rules:** All icons are SVG via Lucide. **No emoji in production UI.** No PNG icons. No custom icon font.
+
+---
+
+## 8. Interaction & Motion
+
+### 8.1 Hover / focus / pressed
+
+| State                  | Treatment                                                                  |
+| ---------------------- | -------------------------------------------------------------------------- |
+| Primary button hover   | Darken to Brand/700 `#004EEB` (`--bb-primary-btn-hover`)                   |
+| Nav item hover         | Light blue tint `#EFF4FF` background                                       |
+| Card hover             | Static — no shadow animation by default                                    |
+| Link                   | Brand/600 `#155EEF`; underline on hover                                    |
+| Input focus            | Border `#155EEF`; subtle focus ring `--bb-apbd-input-box-shadow`           |
+| Form check / toggle on | `--bb-apbd-checkbox-checked-form-check-bg` / `--bb-apbd-toggle-checked-bg` |
+
+### 8.2 Motion principles
+
+- **Minimal animation.** No bounces or springs.
+- **Implied CSS ease** (no overrides). Treat `transition: 150–200ms ease` as default.
+- **Sidebar collapse** — toggled via `panel-right-open` icon; uses CSS width transition.
+
+---
+
+## 9. Dark mode
+
+Dark mode is opt-in via `[data-bs-theme="dark"]` on the root and managed by the **`useTheme`** composable + **`AbDarkModeToggler`** component (see [AI_REFERENCE.md §4](./AI_REFERENCE.md#4-composables--directives)).
+
+Each theme partial in `playground/skins/themes/_<name>.scss` re-emits brand variables for dark mode. Authors of new components must:
+
+- Use `var(--bb-apbd-bg-color)` and `var(--bb-apbd-border-color)` for surfaces and dividers.
+- Avoid hard-coded `#FFFFFF` / `#EAECF0` etc.
+- Test both light and dark in the playground before shipping.
+
+---
+
+## 10. Component → Token Map
+
+How design tokens land in built-in components. Use this when generating layouts so the look stays consistent. For full component APIs, follow each link to [AI_REFERENCE.md](./AI_REFERENCE.md).
+
+| Component                                     | Primary tokens                                                                                          |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| [`AbButton`](./AI_REFERENCE.md#abbutton)      | `--bb-primary`, `--bb-primary-btn-hover`, radii via `--bb-border-radius` / `-lg`, `--bb-apbd-btn-padding-*` |
+| [`AbCard`](./AI_REFERENCE.md#abcard)          | `--bb-apbd-card-border-radius` (`16px`), `--shadow-sm`, surface white, border `#D5D7DA`                 |
+| [`AbModal`](./AI_REFERENCE.md#abmodal) / [`AbEasyModal`](./AI_REFERENCE.md#abeasymodal) | `--bb-apbd-modal-*` paddings, backdrop `rgba(0,0,0,0.7)` (`--bb-apbd-modal-bg-opacity`), `--shadow-lg`  |
+| [`AbInputField`](./AI_REFERENCE.md#abinputfield) / [`AbNumberField`](./AI_REFERENCE.md#abnumberfield) / [`AbMultiSelect`](./AI_REFERENCE.md#abmultiselect) | `--bb-input-field-padding-*`, `--bb-apbd-border-color-focus`, `--bb-apbd-input-box-shadow`              |
+| [`AbBadge`](./AI_REFERENCE.md#abbadge)        | Semantic palette (success / error / warning / info), pill radius `9999px`                               |
+| [`AbAvatar`](./AI_REFERENCE.md#abavatar)      | `--radius-pill`, sizing scale `xs–xxl`                                                                  |
+| [`AbSidebar`](./AI_REFERENCE.md#absidebar) / [`AbSideMenuItem`](./AI_REFERENCE.md#absidemenuitem) | width `256px`, active bg `#EFF4FF`, active text `--bb-primary`, font `--font-nav` (Geist)              |
+| [`AbProgressbar`](./AI_REFERENCE.md#abprogressbar) | `--bb-apbd-progressbar-fill-bg-primary`, semantic color variants                                   |
+| [`AbSlider`](./AI_REFERENCE.md#abslider)      | `--bb-apbd-slider-fill-bg`, `--bb-apbd-slider-thumb-border-color`, `--bb-apbd-slider-thumb-focus-shadow` |
+| [`AbToggle`](./AI_REFERENCE.md#abtoggle) / [`AbFormCheck`](./AI_REFERENCE.md#abformcheck--abradioinput) | `--bb-apbd-toggle-checked-bg`, `--bb-apbd-checkbox-checked-form-check-bg`                           |
+| [`AbToast`](./AI_REFERENCE.md#abtoast) (via `useToast`) | Semantic palette, `--shadow-md`                                                              |
+| [`AbTable`](./AI_REFERENCE.md#abtable)        | Header bg `#F9FAFB`, divider `--bb-apbd-border-color`                                                   |
+| [`AbDarkModeToggler`](./AI_REFERENCE.md#abdarkmodetoggler) | Pairs with `useTheme`; flips `[data-bs-theme]` on root                                       |
+
+---
+
+## 11. Implementation Notes
+
+### 11.1 SCSS structure
+
+```
+src/styles/
+├── index.scss            # Main entry; wraps imports in .#{$app_class}
+├── _prefix.scss          # $prefix: "bb-"  /  $app_class: "appsbd-app"
+├── _variables.scss       # All --bb-apbd-* design tokens
+├── _mixins.scss
+├── components/           # Per-component partials (do NOT wrap in .#{$app_class})
+│   ├── _button.scss
+│   ├── _card.scss
+│   └── ...
+└── rtl/                  # RTL-specific overrides
+```
+
+When editing any `.scss` under `src/styles/`, invoke the **`scss-conventions`** project skill — it encodes the prefix-vs-class rule, the no-double-nesting rule for component partials, and the dark-mode tokens.
+
+### 11.2 Adding a new design token
+
+1. Decide whether Bootstrap already has a variable for it. If yes, override there.
+2. Otherwise, add it to `src/styles/_variables.scss` under the `apbd-` namespace: `--#{$prefix}apbd-<component>-<property>`.
+3. Use the new token in component partials via `var(--#{$prefix}apbd-...)`.
+4. If the token participates in theming, add a corresponding line to each `playground/skins/themes/_<color>.scss` partial.
+
+### 11.3 Adding a new color skin
+
+Use the **`add-theme-skin`** project skill — it wires the 5 places a new skin must touch:
+
+1. `playground/skins/themes/_<name>.scss` (defines `$theme-color`, `$theme-color-light`, `$theme-color-dark`, `$theme-color-hover`, `$border-color-focus-light`)
+2. `playground/skins/<name>.scss` (skin wrapper)
+3. `vite.config.js` rollup input + `assetFileNames` allow-list
+4. `AbColorPicker` option in the playground
+5. `toggleTheme` name → CSS mapping
+
+### 11.4 Adding a new component
+
+Use the **`add-ab-component`** project skill — it walks the 9-step wiring (SFC + barrel export, SCSS partial + correct import location, playground docs page, router entry, sidebar menu item, `ComponentsOverview` entry, AI reference files).
+
+### 11.5 Updating tokens or component APIs
+
+Whenever a component's public API or visual tokens change, update **all four** of:
+
+1. The component's playground `*Test.vue` (use the **`write-component-docs`** skill).
+2. [AI_REFERENCE.md](./AI_REFERENCE.md) (component table row + section-3 API block).
+3. `.ai/ai_ref_<ComponentName>.md`.
+4. This file (**`design-system.md`**) if the change adds/renames a public design token.
+
+The **`update-ai-reference`** project skill enforces (2) and (3).
+
+---
+
+## 12. Source materials
+
+- **`Appsbd Design System/README.md`** — design system narrative (foundations, tone, iconography).
+- **`Appsbd Design System/colors_and_type.css`** — CSS-variable form of every token below; copy-paste-ready.
+- **`Appsbd Design System/preview/*.html`** — visual specimens for colors, type, spacing, shadows, buttons, badges, inputs, nav, cards, avatars, tabs.
+- **`Appsbd Design System/ui_kits/system-admin/`** — interactive prototype (Dashboard, Tickets, Auth) that exercises every token in context.
+- **`AI_REFERENCE.md`** — component API reference; the "what props/events/slots" companion to this "what colors/sizes/spacings" document.

package/dist/skins/black.css

@@ -1 +1 @@
-body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-link-color: var(--bb-primary);--bs-link-hover-color: var(--bb-primary-btn-hover);--bb-theme: #101828;--bb-primary: #101828;--bb-primary-light: #F2F4F7;--bb-primary-rgb: 16, 24, 40;--bb-primary-btn-hover: #000000;--bb-primary-btn-hover-border-color: #000000;--bb-primary-outline-btn-hover: #000000;--bb-primary-outline-btn-border: #101828;--bb-primary-outline-btn-hover-bg: rgba(16, 24, 40, .15);--bb-primary-outline-btn-text: var(--bb-primary-btn-hover);--bb-apbd-border-color-focus: #98A2B3;--bb-apbd-input-box-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-checkbox-checked-form-check-bg: #101828;--bb-apbd-toggle-checked-bg: #101828;--bb-apbd-toggle-checked-hover-bg: #000000;--bb-apbd-toggle-checked-hover-border-color: #000000;--bb-apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-sidebar-item-active-text-color: #101828;--bb-apbd-progressbar-fill-bg-primary: #101828;--bb-apbd-slider-fill-bg: #101828;--bb-apbd-slider-thumb-border-color: #101828;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-border-color: #D5D7DA;--bb-apbd-error-border-color: #FDA29B;--bb-apbd-bg-color: #FFFFFF;--bb-apbd-input-bg-color: #FFFFFF;--bb-apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05), 0 0 0 4px rgba(240, 68, 56, .24);--bb-apbd-placeholder-color:#9ca3af;--bb-body-bg:var(--bb-apbd-bg-color);--bb-btn-disabled-text: #A4A7AE;--bb-btn-disabled-bg-color: #F5F5F5;--bb-btn-disabled-border: #E9EAEB;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F5F5F5;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-error-text-color: #bd2a20;--bb-apbd-main-text-color: #181D27;--bb-apbd-sub-text-color: #414651;--bb-btn-icon-divider-color: #cbc1c175;--bb-secondary: #F5F5F5;--bb-secondary-btn-hover: #E9EAEB;--bb-secondary-btn-hover-border-color: #E9EAEB;--bb-secondary-btn-color: #181D27;--bb-secondary-btn-hover-color: #181D27;--bb-secondary-btn-outline-color: #181D27;--bb-secondary-outline-btn-hover: ##E9EAEB;--bb-secondary-outline-btn-disable-bg: #FFF;--bb-secondary-outline-btn-border: #D5D7DA;--bb-secondary-outline-btn-hover-bg: #FAFAFA;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #181D27;--bb-danger: #bd2a20;--bb-danger-btn-hover: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-btn-hover-border-color: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-outline-btn-disable-bg: #FFF;--bb-danger-outline-btn-border: #FDA29B;--bb-danger-outline-btn-hover-bg: #FEF3F2;--bb-danger-outline-btn-text: #B42318;--bb-success: #079455;--bb-success-btn-hover: #067647;--bb-success-btn-hover-border-color: #067647;--bb-success-outline-btn-disable-bg: #FFF;--bb-success-outline-btn-border: #75E0A7;--bb-success-outline-btn-hover-bg: #ECFDF3;--bb-success-outline-btn-text: #067647;--bb-warning: #F79009;--bb-warning-btn-hover: #DC6803;--bb-warning-btn-hover-border-color: #DC6803;--bb-warning-outline-btn-disable-bg: #FFF;--bb-warning-outline-btn-border: #FEC84B;--bb-warning-outline-btn-hover-bg: #FFFAEB;--bb-warning-outline-btn-text: #ff8114;--bb-light-outline-btn-hover-bg: rgb(235 235 235);--bb-info: #0EA5E9;--bb-info-btn-hover: #0284C7;--bb-info-btn-hover-border-color: #0284C7;--bb-info-outline-btn-disable-bg: #FFF;--bb-info-outline-btn-border: #7DD3FC;--bb-info-outline-btn-hover-bg: #F0F9FF;--bb-info-outline-btn-text: #0284C7;--bb-dark: #181D27;--bb-dark-bg: #181D27;--bb-dark-bg-soft: #1F2937;--bb-dark-bg-hover: #9a9ca1;--bb-dark-border: #2D3748;--bb-dark-text: #E5E7EB;--bb-dark-text-muted: #9CA3AF;--bb-input-field-bg: #FFFFFF;--bb-input-field-label-color: #414651;--bb-input-field-disabled-text-color: #717680;--bb-input-field-text-color: #181D27;--bb-input-field-dropdown-select-option-color: #2970FF;--bb-input-field-icon-color: #A4A7AE;--bb-input-field-disable-bg: #F5F5F5;--bb-error-icon-color: #bd2a20;--bb-input-field-mutiselect-tag-bg: #FFFFFF;--bb-input-field-mutiselect-tag-text-color: #414651;--bb-input-field-mutiselect-tag-remove-color: #A4A7AE;--bb-input-field-code-input-text-color:#B3B3B3;--bb-input-field-code-input-text-color-active:#101828;--bb-apbd-checkbox-description-text-color: #717680;--bb-apbd-checkbox-disable-bg: #dddddd;--bb-apbd-checkbox-disable-border-color: #dddddd;--bb-apbd-toggle-bg: #D5D7DA;--bb-apbd-toggle-not-checked-border-color: #E9EAEB;--bb-apbd-toggle-not-checked-bg: #E9EAEB;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");--bb-apbd-modal-overlay: rgba(12, 17, 29, .7);--bb-apbd-modal-bg:#FFFFFF;--bb-apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);--bb-apbd-modal-header-title-color: #181D27;--bb-apbd-modal-header-sub-title-color: #717680;--bb-apbd-modal-header-icon-bg: #155eef29;--bb-apbd-modal-header-icon-color: #00359E;--bb-apbd-modal-header-icon-danger-bg: #FEE4E2;--bb-apbd-modal-header-icon-danger-color: #D92D20;--bb-apbd-modal-header-icon-success-bg: #DCFAE6;--bb-apbd-modal-header-icon-success-color: #079455;--bb-apbd-sidebar-bg: #FFFFFF;--bb-apbd-sidebar-header-text-color: #181D27;--bb-apbd-sidebar-collapbe-btn-bg: #E9EAEB;--bb-apbd-sidebar-section-title-color: #414651;--bb-apbd-sidebar-item-icon-color: #717680;--bb-apbd-sidebar-item-text-color: #717680;--bb-apbd-sidebar-item-hover-bg: var(--bb-primary-light);--bb-apbd-sidebar-item-hover-text-color: #181D27;--bb-apbd-sidebar-item-active-bg: var(--bb-primary-light);--bb-apbd-sidebar-submenu-text-color: #717680;--bb-apbd-sidebar-submenu-active-text-color: #181D27;--bb-apbd-sidebar-submenu-active-bg: #FFFFFF;--bb-apbd-sidebar-signout-icon-color: #D92D20;--bb-apbd-sidebar-signout-text-color: #B42318;--bb-apbd-card-bg: #FFFFFF;--bb-apbd-card-border-color: #E9EAEB;--bb-apbd-tile-card-title-color: #414651;--bb-apbd-tile-card-value-color: #181D27;--bb-apbd-tile-card-icon-bg-purple: #EFF4FF;--bb-apbd-tile-card-icon-bg-blue: #EFF4FF;--bb-apbd-tile-card-icon-bg-green: #ECFDF3;--bb-apbd-tile-card-icon-bg-yellow: #FFFAEB;--bb-apbd-progressbar-bg: #D5D7DA;--bb-apbd-progressbar-fill-bg-secondary: #6C757D;--bb-apbd-progressbar-fill-bg-success: #079455;--bb-apbd-progressbar-fill-bg-danger: #bd2a20;--bb-apbd-progressbar-fill-bg-warning: #F79009;--bb-apbd-progressbar-fill-bg-info: #0EA5E9;--bb-apbd-progressbar-text-color: #181D27;--bb-apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);--bb-apbd-avatar-bg: #D5D7DA;--bb-apbd-avatar-title-color: #414651;--bb-apbd-avatar-sub-title-color: #414651;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #717680;--bb-apbd-avatar-add-hover-bg: #F5F5F5;--bb-apbd-avatar-add-focus-bg: #FFFFFF;--bb-apbd-avatar-add-disable-bg: #F5F5F5;--bb-apbd-avatar-add-disable-content-color: #D5D7DA;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F5F5F5;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-date-picker-color: #717680;--bb-apbd-date-picker-icon-container-color: #fffff;--bb-apbd-badge-gray-bg-text-color: #717680;--bb-apbd-badge-gray-bg: #F5F5F5;--bb-apbd-badge-gray-border-color: #E9EAEB;--bb-apbd-badge-blue-deep-bg-text-color: #004EEB;--bb-apbd-badge-blue-deep-bg: #EFF4FF;--bb-apbd-badge-blue-deep-border-color: #B2CCFF;--bb-apbd-badge-danger-bg-text-color: #B42318;--bb-apbd-badge-danger-bg: #FEE4E2;--bb-apbd-badge-danger-border-color: #FECDCA;--bb-apbd-badge-warning-bg-text-color: #7A2E0E;--bb-apbd-badge-warning-bg: #FFFAEB;--bb-apbd-badge-warning-border-color: #FEDF89;--bb-apbd-badge-success-bg-text-color: #085D3A;--bb-apbd-badge-success-bg: #ECFDF3;--bb-apbd-badge-success-border-color: #ABEFC6;--bb-apbd-badge-gray-blue-bg-text-color: #363F72;--bb-apbd-badge-gray-blue-bg: #F8F9FC;--bb-apbd-badge-gray-blue-border-color: #D5D9EB;--bb-apbd-badge-info-bg-text-color: #026AA2;--bb-apbd-badge-info-bg: #F0F9FF;--bb-apbd-badge-info-border-color: #B9E6FE;--bb-apbd-badge-blue-bg-text-color: #0040C1;--bb-apbd-badge-blue-bg: #EFF8FF;--bb-apbd-badge-blue-border-color: #B2DDFF;--bb-apbd-badge-indigo-bg-text-color: #3538CD;--bb-apbd-badge-indigo-bg: #EEF4FF;--bb-apbd-badge-indigo-border-color: #C7D7FE;--bb-apbd-badge-purple-bg-text-color: #5925DC;--bb-apbd-badge-purple-bg: #F4F3FF;--bb-apbd-badge-purple-border-color: #D9D6FE;--bb-apbd-badge-pink-bg-text-color: #C11574;--bb-apbd-badge-pink-bg: #FDF2FA;--bb-apbd-badge-pink-border-color: #FCCEEE;--bb-apbd-badge-orange-bg-text-color: #B93815;--bb-apbd-badge-orange-bg: #FEF6EE;--bb-apbd-badge-orange-border-color: #F9DBAF;--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #101828;--bb-apbd-tab-button-active-color: #101828;--bb-apbd-tab-button-active-bg: #EFF4FF;--bb-apbd-tab-button-focus-bg: #FFFFFF;--bb-apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-tab-button-underline-color: #101828;--bb-apbd-tab-button-underline-border-color: #E9EAEB;--bb-apbd-tab-button-secondary-hover-color: #181D27;--bb-apbd-tab-button-secondary-active-color: #181D27;--bb-apbd-tab-button-secondary-active-bg: #F5F5F5;--bb-apbd-bg-tab-seondary: #F5F5F5;--bb-apbd-bg-tab-seondary-active-btn-bg: #FFFFFF;--bb-apbd-bg-tab-seondary-active-btn-color: #181D27;--bb-apbd-bg-tab-seondary-active-btn-hover-color: #181D27;--bb-apbd-tab-outline-link-color: #101828;--bb-apbd-tab-outline-link-border-color: #101828;--bb-apbd-tab-outline-hover-link-color: #FFFFFF;--bb-apbd-tab-outline-hover-bg: #101828;--bb-apbd-slider-track-bg: #D5D7DA;--bb-apbd-slider-thumb-bg: #FFFFFF;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .06);--bb-apbd-slider-thumb-hover-border-color: var(--bb-primary-btn-hover);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .1);--bb-apbd-slider-thumb-focus-border-color: var(--bb-primary);--bb-apbd-slider-label-color: #414651;--bb-apbd-alert-bg: #FFFFFF;--bb-apbd-alert-title-color: #181D27;--bb-apbd-alert-message-color: #6b7280;--bb-apbd-alert-close-color: #959595;--bb-apbd-alert-close-hover-color: #181D27;--bb-apbd-alert-close-hover-bg: #f3f4f6;--bb-apbd-alert-cancel-bg: #f3f4f6;--bb-apbd-alert-cancel-color: #344054;--bb-apbd-alert-cancel-hover-bg: #e5e7eb;--bb-apbd-alert-icon-success-bg: #DCFAE6;--bb-apbd-alert-icon-error-bg: #FEE4E2;--bb-apbd-alert-icon-warning-bg: #FEF0C7;--bb-apbd-alert-icon-info-bg: #D1E9FF;--bb-apbd-alert-icon-question-bg: #EDE9FE;--bb-apbd-toast-bg: #FFFFFF;--bb-apbd-toast-text-color: #414651;--bb-apbd-toast-title-color: #181D27;--bb-apbd-toast-border-color: #E9EAEB;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, .14);--bb-apbd-toast-success-color: #079455;--bb-apbd-toast-error-color: #D92D20;--bb-apbd-toast-warning-color: #F79009;--bb-apbd-toast-info-color: #101828;--bb-apbd-toast-close-color: #A4A7AE;--bb-apbd-toast-close-hover-color: #414651;--bb-apbd-toast-close-hover-bg: #F5F5F5;--bb-apbd-toast-progress-bg: #E9EAEB;--bb-apbd-toast-default-progress-color: #A4A7AE;--bb-apbd-imgr-bg: var(--bb-primary);--bb-apbd-imgr-checked-color: var(--bb-primary);--bb-apbd-radio-input-bg: #FFFFFF;--bb-apbd-radio-input-icon-color: #717680;--bb-apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-radio-input-checked-border-color: #528BFF;--bb-apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-radio-input-disabled-bg: #F5F5F5;--bb-apbd-radio-input-disabled-label-color: #717680;--bb-apbd-radio-input-disabled-description-color: #B3B3B3}[data-bs-theme=dark] body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-body-bg: var(--bb-apbd-bg-color);--bs-body-color: var(--bb-apbd-main-text-color);--bs-border-color: var(--bb-apbd-border-color);--bb-theme: #344054;--bb-primary: #344054;--bb-primary-rgb: 52, 64, 84;--bb-primary-outline-btn-hover: #101828;--bb-primary-outline-btn-border: black;--bb-primary-outline-btn-hover-bg: black;--bb-primary-outline-btn-text: #101828;color-scheme:dark;--bb-apbd-border-color: #334155;--bb-apbd-border-color-focus: #334155;--bb-apbd-bg-color: #0F172A;--bb-apbd-input-bg-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);--bb-apbd-main-text-color: #FFFFFF;--bb-apbd-sub-text-color: #9CA3AF;--bb-btn-disabled-text: #98A2B3;--bb-btn-disabled-bg-color: #252B37;--bb-btn-disabled-border: #EAECF0;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F9FAFB;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-secondary-btn-outline-color: #6c757d;--bb-secondary-outline-btn-hover: #E9EAEB;--bb-secondary-outline-btn-border: #585e66;--bb-secondary-outline-btn-hover-bg: #494949;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #D5D7DA;--bb-success-outline-btn-border: #436151;--bb-success-outline-btn-hover-bg: #3e4e45;--bb-success-outline-btn-text: #16b16f;--bb-danger-outline-btn-border: #6e5452;--bb-danger-outline-btn-hover-bg: #3c2e2e;--bb-danger-outline-btn-text: #ef574b;--bb-warning-outline-btn-border: #766a4f;--bb-warning-outline-btn-hover-bg: #514d40;--bb-warning-outline-btn-text: #DC6803;--bb-info-outline-btn-border: #627c88;--bb-info-outline-btn-hover-bg: #2c4250;--bb-info-outline-btn-text: #0284C7;--bb-light-outline-btn-hover-bg: rgb(120 120 120);--bb-input-field-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-input-field-disable-bg: #282828;--bb-input-field-disabled-text-color: #A4A7AE;--bb-input-field-label-color: #FFFFFF;--bb-input-field-text-color: #FFFFFF;--bb-input-field-icon-color: #98A2B3;--bb-input-field-mutiselect-tag-bg: #181D27;--bb-input-field-mutiselect-tag-text-color: #FFFFFF;--bb-input-field-mutiselect-tag-remove-color: #D5D7DA;--bb-input-field-code-input-text-color:#FFFFFF;--bb-input-field-code-input-text-color-active:#FFFFFF;--bb-apbd-checkbox-checked-form-check-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-checkbox-description-text-color: #A4A7AE;--bb-apbd-checkbox-disable-bg:#282828;--bb-apbd-checkbox-disable-border-color:#282828;--bb-apbd-toggle-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-checked-border-color: #334155;--bb-apbd-toggle-checked-hover-bg: #334155;--bb-apbd-toggle-checked-hover-border-color: #334155;--bb-apbd-toggle-not-checked-border-color: #334155;--bb-apbd-toggle-not-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-not-checked-focus-bg: #334155;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");--bb-apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;--bb-apbd-avatar-border-color: #717680;--bb-apbd-avatar-bg: #181D27;--bb-apbd-avatar-title-color: #FFFFFF;--bb-apbd-avatar-sub-title-color: #A4A7AE;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #667085;--bb-apbd-avatar-add-border-color: #A4A7AE;--bb-apbd-avatar-add-hover-bg: #252B37;--bb-apbd-avatar-add-focus-bg: #181D27;--bb-apbd-avatar-add-disable-bg: #252B37;--bb-apbd-avatar-add-disable-content-color: #D0D5DD;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F2F4F7;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-radio-input-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-date-picker-icon-container-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-card-bg: #0F172A;--bb-apbd-modal-bg:#0F172A;--bb-apbd-modal-header-title-color: #FFFFFF;--bb-apbd-modal-header-sub-title-color: #A4A7AE;--bb-apbd-modal-header-icon-color: #3f6cc3;--bb-apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 32px rgba(255, 255, 255, .06);--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #528BFF;--bb-apbd-tab-button-active-color: #528BFF;--bb-apbd-tab-button-active-bg: #00359E;--bb-apbd-progressbar-bg: #334155;--bb-apbd-progressbar-fill-bg: #2970FF;--bb-apbd-progressbar-text-color: #fff;--bb-apbd-slider-track-bg: #334155;--bb-apbd-slider-fill-bg: #344054;--bb-apbd-slider-thumb-bg: #1E293B;--bb-apbd-slider-thumb-border-color: #344054;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--bb-apbd-slider-thumb-hover-border-color: #344054;--bb-apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .4);--bb-apbd-slider-thumb-focus-border-color: #344054;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(52, 64, 84, .24);--bb-apbd-slider-label-color: #D0D5DD;--bb-apbd-sidebar-border-color: #334155;--bb-apbd-sidebar-bg: #0F172A;--bb-apbd-sidebar-header-text-color: #F1F5F9;--bb-apbd-sidebar-collapbe-btn-bg: #1E293B;--bb-apbd-sidebar-section-title-color: #94A3B8;--bb-apbd-sidebar-item-icon-color: #94A3B8;--bb-apbd-sidebar-item-text-color: #CBD5E1;--bb-apbd-sidebar-item-hover-bg: #1E293B;--bb-apbd-sidebar-item-hover-text-color: #F1F5F9;--bb-apbd-sidebar-item-active-bg: #1E293B;--bb-apbd-sidebar-item-active-text-color: var(--bb-primary);--bb-apbd-sidebar-submenu-tree-color: #334155;--bb-apbd-sidebar-submenu-text-color: #94A3B8;--bb-apbd-sidebar-submenu-active-text-color: #F1F5F9;--bb-apbd-sidebar-submenu-active-bg: #1E293B;--bb-apbd-sidebar-signout-icon-color: #F87171;--bb-apbd-sidebar-signout-text-color: #FCA5A5;--bb-apbd-alert-bg: #0F172A;--bb-apbd-alert-title-color: #F1F5F9;--bb-apbd-alert-message-color: #94A3B8;--bb-apbd-alert-close-color: #94A3B8;--bb-apbd-alert-close-hover-color: #F1F5F9;--bb-apbd-alert-close-hover-bg: #1E293B;--bb-apbd-alert-cancel-bg: #1E293B;--bb-apbd-alert-cancel-color: #CBD5E1;--bb-apbd-alert-cancel-hover-bg: #334155;--bb-apbd-alert-icon-success-bg: #132e1c;--bb-apbd-alert-icon-error-bg: #3c1e1e;--bb-apbd-alert-icon-warning-bg: #3d2e10;--bb-apbd-alert-icon-info-bg: #1a2e44;--bb-apbd-alert-icon-question-bg: #2a1f4e;--bb-apbd-toast-bg: #0F172A;--bb-apbd-toast-text-color: #CBD5E1;--bb-apbd-toast-title-color: #F1F5F9;--bb-apbd-toast-border-color: #334155;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);--bb-apbd-toast-success-color: #6EE7A0;--bb-apbd-toast-error-color: #FCA5A5;--bb-apbd-toast-warning-color: #FBBF24;--bb-apbd-toast-info-color: #528BFF;--bb-apbd-toast-close-color: #94A3B8;--bb-apbd-toast-close-hover-color: #F1F5F9;--bb-apbd-toast-close-hover-bg: #334155;--bb-apbd-toast-progress-bg: #334155;--bb-apbd-toast-default-progress-color: #64748B;--bb-apbd-radio-input-disabled-bg: #252B37;--bb-apbd-radio-input-disabled-border-color: #EAECF0}body{--eg-bg: var(--bb-apbd-bg-color,transparent);--eg-cell-padding: 10px;--eg-shodow-rule: 0px 3px 20px -19px rgba(16, 24, 40, .6);--eg-shodow-color: rgba(16, 24, 40, .6);--eg-loader-bg: rgba(0, 0, 0, .55);--eg-cell-header-color:rgba(16, 24, 40, .02);--eg-no-record-color: rgba(16, 24, 40, .8);--eg-row-group-title-color: #41444b;--eg-cell-index-color: #7f848d;--eg-table-border-color: rgba(1.4285714286, 2.1428571429, 3.5714285714, .1);--eg-hover-bg: rgba(16, 24, 40, .02);--eg-pg-border-color:#ccc;--eg-pg-btn-bg: #101828;--eg-pg-btn-color: #FFFFFF;--eg-pg-shodow-color: #ccc;--eg-pagination-shadow: rgba(16, 24, 40, .6)}[data-bs-theme=dark] body{color-scheme:dark;--eg-table-border-color:rgba(0, 0, 0, .25)}
+body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-link-color: var(--bb-primary);--bs-link-hover-color: var(--bb-primary-btn-hover);--bb-theme: #101828;--bb-primary: #101828;--bb-primary-light: #F2F4F7;--bb-primary-rgb: 16, 24, 40;--bb-primary-btn-hover: #000000;--bb-primary-btn-hover-border-color: #000000;--bb-primary-outline-btn-hover: #000000;--bb-primary-outline-btn-border: #101828;--bb-primary-outline-btn-hover-bg: rgba(16, 24, 40, .15);--bb-primary-outline-btn-text: var(--bb-primary-btn-hover);--bb-apbd-border-color-focus: #98A2B3;--bb-apbd-input-box-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-checkbox-checked-form-check-bg: #101828;--bb-apbd-toggle-checked-bg: #101828;--bb-apbd-toggle-checked-hover-bg: #000000;--bb-apbd-toggle-checked-hover-border-color: #000000;--bb-apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-sidebar-item-active-text-color: #101828;--bb-apbd-progressbar-fill-bg-primary: #101828;--bb-apbd-slider-fill-bg: #101828;--bb-apbd-slider-thumb-border-color: #101828;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(16, 24, 40, .24);--bb-apbd-border-color: #D5D7DA;--bb-apbd-error-border-color: #FDA29B;--bb-apbd-bg-color: #FFFFFF;--bb-apbd-input-bg-color: #FFFFFF;--bb-apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05), 0 0 0 4px rgba(240, 68, 56, .24);--bb-apbd-placeholder-color:#9ca3af;--bb-body-bg:var(--bb-apbd-bg-color);--bb-btn-disabled-text: #A4A7AE;--bb-btn-disabled-bg-color: #F5F5F5;--bb-btn-disabled-border: #E9EAEB;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F5F5F5;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-error-text-color: #bd2a20;--bb-apbd-main-text-color: #181D27;--bb-apbd-sub-text-color: #414651;--bb-btn-icon-divider-color: #cbc1c175;--bb-secondary: #F5F5F5;--bb-secondary-btn-hover: #E9EAEB;--bb-secondary-btn-hover-border-color: #E9EAEB;--bb-secondary-btn-color: #181D27;--bb-secondary-btn-hover-color: #181D27;--bb-secondary-btn-outline-color: #181D27;--bb-secondary-outline-btn-hover: ##E9EAEB;--bb-secondary-outline-btn-disable-bg: #FFF;--bb-secondary-outline-btn-border: #D5D7DA;--bb-secondary-outline-btn-hover-bg: #FAFAFA;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #181D27;--bb-danger: #bd2a20;--bb-danger-btn-hover: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-btn-hover-border-color: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-outline-btn-disable-bg: #FFF;--bb-danger-outline-btn-border: #FDA29B;--bb-danger-outline-btn-hover-bg: #FEF3F2;--bb-danger-outline-btn-text: #B42318;--bb-success: #079455;--bb-success-btn-hover: #067647;--bb-success-btn-hover-border-color: #067647;--bb-success-outline-btn-disable-bg: #FFF;--bb-success-outline-btn-border: #75E0A7;--bb-success-outline-btn-hover-bg: #ECFDF3;--bb-success-outline-btn-text: #067647;--bb-warning: #F79009;--bb-warning-btn-hover: #DC6803;--bb-warning-btn-hover-border-color: #DC6803;--bb-warning-outline-btn-disable-bg: #FFF;--bb-warning-outline-btn-border: #FEC84B;--bb-warning-outline-btn-hover-bg: #FFFAEB;--bb-warning-outline-btn-text: #ff8114;--bb-light-outline-btn-hover-bg: rgb(235 235 235);--bb-info: #0EA5E9;--bb-info-btn-hover: #0284C7;--bb-info-btn-hover-border-color: #0284C7;--bb-info-outline-btn-disable-bg: #FFF;--bb-info-outline-btn-border: #7DD3FC;--bb-info-outline-btn-hover-bg: #F0F9FF;--bb-info-outline-btn-text: #0284C7;--bb-dark: #181D27;--bb-dark-bg: #181D27;--bb-dark-bg-soft: #1F2937;--bb-dark-bg-hover: #9a9ca1;--bb-dark-border: #2D3748;--bb-dark-text: #E5E7EB;--bb-dark-text-muted: #9CA3AF;--bb-input-field-bg: #FFFFFF;--bb-input-field-label-color: #414651;--bb-input-field-disabled-text-color: #717680;--bb-input-field-text-color: #181D27;--bb-input-field-dropdown-select-option-color: #2970FF;--bb-input-field-icon-color: #A4A7AE;--bb-input-field-disable-bg: #F5F5F5;--bb-error-icon-color: #bd2a20;--bb-input-field-mutiselect-tag-bg: #FFFFFF;--bb-input-field-mutiselect-tag-text-color: #414651;--bb-input-field-mutiselect-tag-remove-color: #A4A7AE;--bb-input-field-code-input-text-color:#B3B3B3;--bb-input-field-code-input-text-color-active:#101828;--bb-apbd-checkbox-description-text-color: #717680;--bb-apbd-checkbox-disable-bg: #dddddd;--bb-apbd-checkbox-disable-border-color: #dddddd;--bb-apbd-toggle-bg: #D5D7DA;--bb-apbd-toggle-not-checked-border-color: #E9EAEB;--bb-apbd-toggle-not-checked-bg: #E9EAEB;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");--bb-apbd-modal-overlay: rgba(12, 17, 29, .7);--bb-apbd-modal-bg:#FFFFFF;--bb-apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);--bb-apbd-modal-header-title-color: #181D27;--bb-apbd-modal-header-sub-title-color: #717680;--bb-apbd-modal-header-icon-bg: #155eef29;--bb-apbd-modal-header-icon-color: #00359E;--bb-apbd-modal-header-icon-danger-bg: #FEE4E2;--bb-apbd-modal-header-icon-danger-color: #D92D20;--bb-apbd-modal-header-icon-success-bg: #DCFAE6;--bb-apbd-modal-header-icon-success-color: #079455;--bb-apbd-sidebar-bg: #FFFFFF;--bb-apbd-sidebar-header-text-color: #181D27;--bb-apbd-sidebar-collapbe-btn-bg: #E9EAEB;--bb-apbd-sidebar-section-title-color: #414651;--bb-apbd-sidebar-item-icon-color: #717680;--bb-apbd-sidebar-item-text-color: #717680;--bb-apbd-sidebar-item-hover-bg: var(--bb-primary-light);--bb-apbd-sidebar-item-hover-text-color: #181D27;--bb-apbd-sidebar-item-active-bg: var(--bb-primary-light);--bb-apbd-sidebar-submenu-text-color: #717680;--bb-apbd-sidebar-submenu-active-text-color: #181D27;--bb-apbd-sidebar-submenu-active-bg: #FFFFFF;--bb-apbd-sidebar-signout-icon-color: #D92D20;--bb-apbd-sidebar-signout-text-color: #B42318;--bb-apbd-card-bg: #FFFFFF;--bb-apbd-card-border-color: #E9EAEB;--bb-apbd-tile-card-title-color: #414651;--bb-apbd-tile-card-value-color: #181D27;--bb-apbd-tile-card-icon-bg-purple: #EFF4FF;--bb-apbd-tile-card-icon-bg-blue: #EFF4FF;--bb-apbd-tile-card-icon-bg-green: #ECFDF3;--bb-apbd-tile-card-icon-bg-yellow: #FFFAEB;--bb-apbd-tile-card-icon-bg-red: #FFF3F3;--bb-apbd-progressbar-bg: #D5D7DA;--bb-apbd-progressbar-fill-bg-secondary: #6C757D;--bb-apbd-progressbar-fill-bg-success: #079455;--bb-apbd-progressbar-fill-bg-danger: #bd2a20;--bb-apbd-progressbar-fill-bg-warning: #F79009;--bb-apbd-progressbar-fill-bg-info: #0EA5E9;--bb-apbd-progressbar-text-color: #181D27;--bb-apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);--bb-apbd-avatar-bg: #D5D7DA;--bb-apbd-avatar-title-color: #414651;--bb-apbd-avatar-sub-title-color: #414651;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #717680;--bb-apbd-avatar-add-hover-bg: #F5F5F5;--bb-apbd-avatar-add-focus-bg: #FFFFFF;--bb-apbd-avatar-add-disable-bg: #F5F5F5;--bb-apbd-avatar-add-disable-content-color: #D5D7DA;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F5F5F5;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-date-picker-color: #717680;--bb-apbd-date-picker-icon-container-color: #fffff;--bb-apbd-badge-gray-bg-text-color: #717680;--bb-apbd-badge-gray-bg: #F5F5F5;--bb-apbd-badge-gray-border-color: #E9EAEB;--bb-apbd-badge-blue-deep-bg-text-color: #004EEB;--bb-apbd-badge-blue-deep-bg: #EFF4FF;--bb-apbd-badge-blue-deep-border-color: #B2CCFF;--bb-apbd-badge-danger-bg-text-color: #B42318;--bb-apbd-badge-danger-bg: #FEE4E2;--bb-apbd-badge-danger-border-color: #FECDCA;--bb-apbd-badge-warning-bg-text-color: #7A2E0E;--bb-apbd-badge-warning-bg: #FFFAEB;--bb-apbd-badge-warning-border-color: #FEDF89;--bb-apbd-badge-success-bg-text-color: #085D3A;--bb-apbd-badge-success-bg: #ECFDF3;--bb-apbd-badge-success-border-color: #ABEFC6;--bb-apbd-badge-gray-blue-bg-text-color: #363F72;--bb-apbd-badge-gray-blue-bg: #F8F9FC;--bb-apbd-badge-gray-blue-border-color: #D5D9EB;--bb-apbd-badge-info-bg-text-color: #026AA2;--bb-apbd-badge-info-bg: #F0F9FF;--bb-apbd-badge-info-border-color: #B9E6FE;--bb-apbd-badge-blue-bg-text-color: #0040C1;--bb-apbd-badge-blue-bg: #EFF8FF;--bb-apbd-badge-blue-border-color: #B2DDFF;--bb-apbd-badge-indigo-bg-text-color: #3538CD;--bb-apbd-badge-indigo-bg: #EEF4FF;--bb-apbd-badge-indigo-border-color: #C7D7FE;--bb-apbd-badge-purple-bg-text-color: #5925DC;--bb-apbd-badge-purple-bg: #F4F3FF;--bb-apbd-badge-purple-border-color: #D9D6FE;--bb-apbd-badge-pink-bg-text-color: #C11574;--bb-apbd-badge-pink-bg: #FDF2FA;--bb-apbd-badge-pink-border-color: #FCCEEE;--bb-apbd-badge-orange-bg-text-color: #B93815;--bb-apbd-badge-orange-bg: #FEF6EE;--bb-apbd-badge-orange-border-color: #F9DBAF;--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #101828;--bb-apbd-tab-button-active-color: #101828;--bb-apbd-tab-button-active-bg: #EFF4FF;--bb-apbd-tab-button-focus-bg: #FFFFFF;--bb-apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-tab-button-underline-color: #101828;--bb-apbd-tab-button-underline-border-color: #E9EAEB;--bb-apbd-tab-button-secondary-hover-color: #181D27;--bb-apbd-tab-button-secondary-active-color: #181D27;--bb-apbd-tab-button-secondary-active-bg: #F5F5F5;--bb-apbd-bg-tab-seondary: #F5F5F5;--bb-apbd-bg-tab-seondary-active-btn-bg: #FFFFFF;--bb-apbd-bg-tab-seondary-active-btn-color: #181D27;--bb-apbd-bg-tab-seondary-active-btn-hover-color: #181D27;--bb-apbd-tab-outline-link-color: #101828;--bb-apbd-tab-outline-link-border-color: #101828;--bb-apbd-tab-outline-hover-link-color: #FFFFFF;--bb-apbd-tab-outline-hover-bg: #101828;--bb-apbd-slider-track-bg: #D5D7DA;--bb-apbd-slider-thumb-bg: #FFFFFF;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .06);--bb-apbd-slider-thumb-hover-border-color: var(--bb-primary-btn-hover);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .1);--bb-apbd-slider-thumb-focus-border-color: var(--bb-primary);--bb-apbd-slider-label-color: #414651;--bb-apbd-alert-bg: #FFFFFF;--bb-apbd-alert-title-color: #181D27;--bb-apbd-alert-message-color: #6b7280;--bb-apbd-alert-close-color: #959595;--bb-apbd-alert-close-hover-color: #181D27;--bb-apbd-alert-close-hover-bg: #f3f4f6;--bb-apbd-alert-cancel-bg: #f3f4f6;--bb-apbd-alert-cancel-color: #344054;--bb-apbd-alert-cancel-hover-bg: #e5e7eb;--bb-apbd-alert-icon-success-bg: #DCFAE6;--bb-apbd-alert-icon-error-bg: #FEE4E2;--bb-apbd-alert-icon-warning-bg: #FEF0C7;--bb-apbd-alert-icon-info-bg: #D1E9FF;--bb-apbd-alert-icon-question-bg: #EDE9FE;--bb-apbd-toast-bg: #FFFFFF;--bb-apbd-toast-text-color: #414651;--bb-apbd-toast-title-color: #181D27;--bb-apbd-toast-border-color: #E9EAEB;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, .14);--bb-apbd-toast-success-color: #079455;--bb-apbd-toast-error-color: #D92D20;--bb-apbd-toast-warning-color: #F79009;--bb-apbd-toast-info-color: #101828;--bb-apbd-toast-close-color: #A4A7AE;--bb-apbd-toast-close-hover-color: #414651;--bb-apbd-toast-close-hover-bg: #F5F5F5;--bb-apbd-toast-progress-bg: #E9EAEB;--bb-apbd-toast-default-progress-color: #A4A7AE;--bb-apbd-imgr-bg: var(--bb-primary);--bb-apbd-imgr-checked-color: var(--bb-primary);--bb-apbd-radio-input-bg: #FFFFFF;--bb-apbd-radio-input-icon-color: #717680;--bb-apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-radio-input-checked-border-color: #528BFF;--bb-apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-radio-input-disabled-bg: #F5F5F5;--bb-apbd-radio-input-disabled-label-color: #717680;--bb-apbd-radio-input-disabled-description-color: #B3B3B3}[data-bs-theme=dark] body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-body-bg: var(--bb-apbd-bg-color);--bs-body-color: var(--bb-apbd-main-text-color);--bs-border-color: var(--bb-apbd-border-color);--bb-theme: #344054;--bb-primary: #344054;--bb-primary-rgb: 52, 64, 84;--bb-primary-outline-btn-hover: #101828;--bb-primary-outline-btn-border: black;--bb-primary-outline-btn-hover-bg: black;--bb-primary-outline-btn-text: #101828;color-scheme:dark;--bb-apbd-border-color: #334155;--bb-apbd-border-color-focus: #334155;--bb-apbd-bg-color: #0F172A;--bb-apbd-input-bg-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);--bb-apbd-main-text-color: #FFFFFF;--bb-apbd-sub-text-color: #9CA3AF;--bb-btn-disabled-text: #98A2B3;--bb-btn-disabled-bg-color: #252B37;--bb-btn-disabled-border: #EAECF0;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F9FAFB;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-secondary-btn-outline-color: #6c757d;--bb-secondary-outline-btn-hover: #E9EAEB;--bb-secondary-outline-btn-border: #585e66;--bb-secondary-outline-btn-hover-bg: #494949;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #D5D7DA;--bb-success-outline-btn-border: #436151;--bb-success-outline-btn-hover-bg: #3e4e45;--bb-success-outline-btn-text: #16b16f;--bb-danger-outline-btn-border: #6e5452;--bb-danger-outline-btn-hover-bg: #3c2e2e;--bb-danger-outline-btn-text: #ef574b;--bb-warning-outline-btn-border: #766a4f;--bb-warning-outline-btn-hover-bg: #514d40;--bb-warning-outline-btn-text: #DC6803;--bb-info-outline-btn-border: #627c88;--bb-info-outline-btn-hover-bg: #2c4250;--bb-info-outline-btn-text: #0284C7;--bb-light-outline-btn-hover-bg: rgb(120 120 120);--bb-input-field-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-input-field-disable-bg: #282828;--bb-input-field-disabled-text-color: #A4A7AE;--bb-input-field-label-color: #FFFFFF;--bb-input-field-text-color: #FFFFFF;--bb-input-field-icon-color: #98A2B3;--bb-input-field-mutiselect-tag-bg: #181D27;--bb-input-field-mutiselect-tag-text-color: #FFFFFF;--bb-input-field-mutiselect-tag-remove-color: #D5D7DA;--bb-input-field-code-input-text-color:#FFFFFF;--bb-input-field-code-input-text-color-active:#FFFFFF;--bb-apbd-checkbox-checked-form-check-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-checkbox-description-text-color: #A4A7AE;--bb-apbd-checkbox-disable-bg:#282828;--bb-apbd-checkbox-disable-border-color:#282828;--bb-apbd-toggle-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-checked-border-color: #334155;--bb-apbd-toggle-checked-hover-bg: #334155;--bb-apbd-toggle-checked-hover-border-color: #334155;--bb-apbd-toggle-not-checked-border-color: #334155;--bb-apbd-toggle-not-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-not-checked-focus-bg: #334155;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");--bb-apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;--bb-apbd-avatar-border-color: #717680;--bb-apbd-avatar-bg: #181D27;--bb-apbd-avatar-title-color: #FFFFFF;--bb-apbd-avatar-sub-title-color: #A4A7AE;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #667085;--bb-apbd-avatar-add-border-color: #A4A7AE;--bb-apbd-avatar-add-hover-bg: #252B37;--bb-apbd-avatar-add-focus-bg: #181D27;--bb-apbd-avatar-add-disable-bg: #252B37;--bb-apbd-avatar-add-disable-content-color: #D0D5DD;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F2F4F7;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-radio-input-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-date-picker-icon-container-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-card-bg: #0F172A;--bb-apbd-card-box-shadow: rgba(99, 99, 99, .2) 0px 2px 8px 0px;--bb-apbd-modal-bg:#0F172A;--bb-apbd-modal-header-title-color: #FFFFFF;--bb-apbd-modal-header-sub-title-color: #A4A7AE;--bb-apbd-modal-header-icon-color: #3f6cc3;--bb-apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 32px rgba(255, 255, 255, .06);--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #528BFF;--bb-apbd-tab-button-active-color: #528BFF;--bb-apbd-tab-button-active-bg: #00359E;--bb-apbd-progressbar-bg: #334155;--bb-apbd-progressbar-fill-bg: #2970FF;--bb-apbd-progressbar-text-color: #fff;--bb-apbd-slider-track-bg: #334155;--bb-apbd-slider-fill-bg: #344054;--bb-apbd-slider-thumb-bg: #1E293B;--bb-apbd-slider-thumb-border-color: #344054;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--bb-apbd-slider-thumb-hover-border-color: #344054;--bb-apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .4);--bb-apbd-slider-thumb-focus-border-color: #344054;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(52, 64, 84, .24);--bb-apbd-slider-label-color: #D0D5DD;--bb-apbd-sidebar-border-color: #334155;--bb-apbd-sidebar-bg: #0F172A;--bb-apbd-sidebar-header-text-color: #F1F5F9;--bb-apbd-sidebar-collapbe-btn-bg: #1E293B;--bb-apbd-sidebar-section-title-color: #94A3B8;--bb-apbd-sidebar-item-icon-color: #94A3B8;--bb-apbd-sidebar-item-text-color: #CBD5E1;--bb-apbd-sidebar-item-hover-bg: #1E293B;--bb-apbd-sidebar-item-hover-text-color: #F1F5F9;--bb-apbd-sidebar-item-active-bg: #1E293B;--bb-apbd-sidebar-item-active-text-color: var(--bb-primary);--bb-apbd-sidebar-submenu-tree-color: #334155;--bb-apbd-sidebar-submenu-text-color: #94A3B8;--bb-apbd-sidebar-submenu-active-text-color: #F1F5F9;--bb-apbd-sidebar-submenu-active-bg: #1E293B;--bb-apbd-sidebar-signout-icon-color: #F87171;--bb-apbd-sidebar-signout-text-color: #FCA5A5;--bb-apbd-alert-bg: #0F172A;--bb-apbd-alert-title-color: #F1F5F9;--bb-apbd-alert-message-color: #94A3B8;--bb-apbd-alert-close-color: #94A3B8;--bb-apbd-alert-close-hover-color: #F1F5F9;--bb-apbd-alert-close-hover-bg: #1E293B;--bb-apbd-alert-cancel-bg: #1E293B;--bb-apbd-alert-cancel-color: #CBD5E1;--bb-apbd-alert-cancel-hover-bg: #334155;--bb-apbd-alert-icon-success-bg: #132e1c;--bb-apbd-alert-icon-error-bg: #3c1e1e;--bb-apbd-alert-icon-warning-bg: #3d2e10;--bb-apbd-alert-icon-info-bg: #1a2e44;--bb-apbd-alert-icon-question-bg: #2a1f4e;--bb-apbd-toast-bg: #0F172A;--bb-apbd-toast-text-color: #CBD5E1;--bb-apbd-toast-title-color: #F1F5F9;--bb-apbd-toast-border-color: #334155;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);--bb-apbd-toast-success-color: #6EE7A0;--bb-apbd-toast-error-color: #FCA5A5;--bb-apbd-toast-warning-color: #FBBF24;--bb-apbd-toast-info-color: #528BFF;--bb-apbd-toast-close-color: #94A3B8;--bb-apbd-toast-close-hover-color: #F1F5F9;--bb-apbd-toast-close-hover-bg: #334155;--bb-apbd-toast-progress-bg: #334155;--bb-apbd-toast-default-progress-color: #64748B;--bb-apbd-radio-input-disabled-bg: #252B37;--bb-apbd-radio-input-disabled-border-color: #EAECF0}body{--eg-bg: var(--bb-apbd-bg-color,transparent);--eg-cell-padding: 10px;--eg-shodow-rule: 0px 3px 20px -19px rgba(16, 24, 40, .6);--eg-shodow-color: rgba(16, 24, 40, .6);--eg-loader-bg: rgba(0, 0, 0, .55);--eg-cell-header-color:rgba(16, 24, 40, .02);--eg-no-record-color: rgba(16, 24, 40, .8);--eg-row-group-title-color: #41444b;--eg-cell-index-color: #7f848d;--eg-table-border-color: rgba(1.4285714286, 2.1428571429, 3.5714285714, .1);--eg-hover-bg: rgba(16, 24, 40, .02);--eg-pg-border-color:#ccc;--eg-pg-btn-bg: #101828;--eg-pg-btn-color: #FFFFFF;--eg-pg-shodow-color: #ccc;--eg-pagination-shadow: rgba(16, 24, 40, .6)}[data-bs-theme=dark] body{color-scheme:dark;--eg-table-border-color:rgba(0, 0, 0, .25)}

package/dist/skins/cyan.css

@@ -1 +1 @@
-body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-link-color: var(--bb-primary);--bs-link-hover-color: var(--bb-primary-btn-hover);--bb-theme: #00ACC1;--bb-primary: #00ACC1;--bb-primary-light: rgb(233.8, 252.6932642487, 255);--bb-primary-rgb: 0, 172, 193;--bb-primary-btn-hover: #0891B2;--bb-primary-btn-hover-border-color: #0891B2;--bb-primary-outline-btn-hover: #0891B2;--bb-primary-outline-btn-border: #00ACC1;--bb-primary-outline-btn-hover-bg: rgba(0, 172, 193, .15);--bb-primary-outline-btn-text: var(--bb-primary-btn-hover);--bb-apbd-border-color-focus: #A5F3FC;--bb-apbd-input-box-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-checkbox-checked-form-check-bg: #00ACC1;--bb-apbd-toggle-checked-bg: #00ACC1;--bb-apbd-toggle-checked-hover-bg: #0891B2;--bb-apbd-toggle-checked-hover-border-color: #0891B2;--bb-apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-sidebar-item-active-text-color: #00ACC1;--bb-apbd-progressbar-fill-bg-primary: #00ACC1;--bb-apbd-slider-fill-bg: #00ACC1;--bb-apbd-slider-thumb-border-color: #00ACC1;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-border-color: #D5D7DA;--bb-apbd-error-border-color: #FDA29B;--bb-apbd-bg-color: #FFFFFF;--bb-apbd-input-bg-color: #FFFFFF;--bb-apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05), 0 0 0 4px rgba(240, 68, 56, .24);--bb-apbd-placeholder-color:#9ca3af;--bb-body-bg:var(--bb-apbd-bg-color);--bb-btn-disabled-text: #A4A7AE;--bb-btn-disabled-bg-color: #F5F5F5;--bb-btn-disabled-border: #E9EAEB;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F5F5F5;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-error-text-color: #bd2a20;--bb-apbd-main-text-color: #181D27;--bb-apbd-sub-text-color: #414651;--bb-btn-icon-divider-color: #cbc1c175;--bb-secondary: #F5F5F5;--bb-secondary-btn-hover: #E9EAEB;--bb-secondary-btn-hover-border-color: #E9EAEB;--bb-secondary-btn-color: #181D27;--bb-secondary-btn-hover-color: #181D27;--bb-secondary-btn-outline-color: #181D27;--bb-secondary-outline-btn-hover: ##E9EAEB;--bb-secondary-outline-btn-disable-bg: #FFF;--bb-secondary-outline-btn-border: #D5D7DA;--bb-secondary-outline-btn-hover-bg: #FAFAFA;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #181D27;--bb-danger: #bd2a20;--bb-danger-btn-hover: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-btn-hover-border-color: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-outline-btn-disable-bg: #FFF;--bb-danger-outline-btn-border: #FDA29B;--bb-danger-outline-btn-hover-bg: #FEF3F2;--bb-danger-outline-btn-text: #B42318;--bb-success: #079455;--bb-success-btn-hover: #067647;--bb-success-btn-hover-border-color: #067647;--bb-success-outline-btn-disable-bg: #FFF;--bb-success-outline-btn-border: #75E0A7;--bb-success-outline-btn-hover-bg: #ECFDF3;--bb-success-outline-btn-text: #067647;--bb-warning: #F79009;--bb-warning-btn-hover: #DC6803;--bb-warning-btn-hover-border-color: #DC6803;--bb-warning-outline-btn-disable-bg: #FFF;--bb-warning-outline-btn-border: #FEC84B;--bb-warning-outline-btn-hover-bg: #FFFAEB;--bb-warning-outline-btn-text: #ff8114;--bb-light-outline-btn-hover-bg: rgb(235 235 235);--bb-info: #0EA5E9;--bb-info-btn-hover: #0284C7;--bb-info-btn-hover-border-color: #0284C7;--bb-info-outline-btn-disable-bg: #FFF;--bb-info-outline-btn-border: #7DD3FC;--bb-info-outline-btn-hover-bg: #F0F9FF;--bb-info-outline-btn-text: #0284C7;--bb-dark: #181D27;--bb-dark-bg: #181D27;--bb-dark-bg-soft: #1F2937;--bb-dark-bg-hover: #9a9ca1;--bb-dark-border: #2D3748;--bb-dark-text: #E5E7EB;--bb-dark-text-muted: #9CA3AF;--bb-input-field-bg: #FFFFFF;--bb-input-field-label-color: #414651;--bb-input-field-disabled-text-color: #717680;--bb-input-field-text-color: #181D27;--bb-input-field-dropdown-select-option-color: #2970FF;--bb-input-field-icon-color: #A4A7AE;--bb-input-field-disable-bg: #F5F5F5;--bb-error-icon-color: #bd2a20;--bb-input-field-mutiselect-tag-bg: #FFFFFF;--bb-input-field-mutiselect-tag-text-color: #414651;--bb-input-field-mutiselect-tag-remove-color: #A4A7AE;--bb-input-field-code-input-text-color:#B3B3B3;--bb-input-field-code-input-text-color-active:#00ACC1;--bb-apbd-checkbox-description-text-color: #717680;--bb-apbd-checkbox-disable-bg: #dddddd;--bb-apbd-checkbox-disable-border-color: #dddddd;--bb-apbd-toggle-bg: #D5D7DA;--bb-apbd-toggle-not-checked-border-color: #E9EAEB;--bb-apbd-toggle-not-checked-bg: #E9EAEB;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");--bb-apbd-modal-overlay: rgba(12, 17, 29, .7);--bb-apbd-modal-bg:#FFFFFF;--bb-apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);--bb-apbd-modal-header-title-color: #181D27;--bb-apbd-modal-header-sub-title-color: #717680;--bb-apbd-modal-header-icon-bg: #155eef29;--bb-apbd-modal-header-icon-color: #00359E;--bb-apbd-modal-header-icon-danger-bg: #FEE4E2;--bb-apbd-modal-header-icon-danger-color: #D92D20;--bb-apbd-modal-header-icon-success-bg: #DCFAE6;--bb-apbd-modal-header-icon-success-color: #079455;--bb-apbd-sidebar-bg: #FFFFFF;--bb-apbd-sidebar-header-text-color: #181D27;--bb-apbd-sidebar-collapbe-btn-bg: #E9EAEB;--bb-apbd-sidebar-section-title-color: #414651;--bb-apbd-sidebar-item-icon-color: #717680;--bb-apbd-sidebar-item-text-color: #717680;--bb-apbd-sidebar-item-hover-bg: var(--bb-primary-light);--bb-apbd-sidebar-item-hover-text-color: #181D27;--bb-apbd-sidebar-item-active-bg: var(--bb-primary-light);--bb-apbd-sidebar-submenu-text-color: #717680;--bb-apbd-sidebar-submenu-active-text-color: #181D27;--bb-apbd-sidebar-submenu-active-bg: #FFFFFF;--bb-apbd-sidebar-signout-icon-color: #D92D20;--bb-apbd-sidebar-signout-text-color: #B42318;--bb-apbd-card-bg: #FFFFFF;--bb-apbd-card-border-color: #E9EAEB;--bb-apbd-tile-card-title-color: #414651;--bb-apbd-tile-card-value-color: #181D27;--bb-apbd-tile-card-icon-bg-purple: #EFF4FF;--bb-apbd-tile-card-icon-bg-blue: #EFF4FF;--bb-apbd-tile-card-icon-bg-green: #ECFDF3;--bb-apbd-tile-card-icon-bg-yellow: #FFFAEB;--bb-apbd-progressbar-bg: #D5D7DA;--bb-apbd-progressbar-fill-bg-secondary: #6C757D;--bb-apbd-progressbar-fill-bg-success: #079455;--bb-apbd-progressbar-fill-bg-danger: #bd2a20;--bb-apbd-progressbar-fill-bg-warning: #F79009;--bb-apbd-progressbar-fill-bg-info: #0EA5E9;--bb-apbd-progressbar-text-color: #181D27;--bb-apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);--bb-apbd-avatar-bg: #D5D7DA;--bb-apbd-avatar-title-color: #414651;--bb-apbd-avatar-sub-title-color: #414651;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #717680;--bb-apbd-avatar-add-hover-bg: #F5F5F5;--bb-apbd-avatar-add-focus-bg: #FFFFFF;--bb-apbd-avatar-add-disable-bg: #F5F5F5;--bb-apbd-avatar-add-disable-content-color: #D5D7DA;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F5F5F5;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-date-picker-color: #717680;--bb-apbd-date-picker-icon-container-color: #fffff;--bb-apbd-badge-gray-bg-text-color: #717680;--bb-apbd-badge-gray-bg: #F5F5F5;--bb-apbd-badge-gray-border-color: #E9EAEB;--bb-apbd-badge-blue-deep-bg-text-color: #004EEB;--bb-apbd-badge-blue-deep-bg: #EFF4FF;--bb-apbd-badge-blue-deep-border-color: #B2CCFF;--bb-apbd-badge-danger-bg-text-color: #B42318;--bb-apbd-badge-danger-bg: #FEE4E2;--bb-apbd-badge-danger-border-color: #FECDCA;--bb-apbd-badge-warning-bg-text-color: #7A2E0E;--bb-apbd-badge-warning-bg: #FFFAEB;--bb-apbd-badge-warning-border-color: #FEDF89;--bb-apbd-badge-success-bg-text-color: #085D3A;--bb-apbd-badge-success-bg: #ECFDF3;--bb-apbd-badge-success-border-color: #ABEFC6;--bb-apbd-badge-gray-blue-bg-text-color: #363F72;--bb-apbd-badge-gray-blue-bg: #F8F9FC;--bb-apbd-badge-gray-blue-border-color: #D5D9EB;--bb-apbd-badge-info-bg-text-color: #026AA2;--bb-apbd-badge-info-bg: #F0F9FF;--bb-apbd-badge-info-border-color: #B9E6FE;--bb-apbd-badge-blue-bg-text-color: #0040C1;--bb-apbd-badge-blue-bg: #EFF8FF;--bb-apbd-badge-blue-border-color: #B2DDFF;--bb-apbd-badge-indigo-bg-text-color: #3538CD;--bb-apbd-badge-indigo-bg: #EEF4FF;--bb-apbd-badge-indigo-border-color: #C7D7FE;--bb-apbd-badge-purple-bg-text-color: #5925DC;--bb-apbd-badge-purple-bg: #F4F3FF;--bb-apbd-badge-purple-border-color: #D9D6FE;--bb-apbd-badge-pink-bg-text-color: #C11574;--bb-apbd-badge-pink-bg: #FDF2FA;--bb-apbd-badge-pink-border-color: #FCCEEE;--bb-apbd-badge-orange-bg-text-color: #B93815;--bb-apbd-badge-orange-bg: #FEF6EE;--bb-apbd-badge-orange-border-color: #F9DBAF;--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #00ACC1;--bb-apbd-tab-button-active-color: #00ACC1;--bb-apbd-tab-button-active-bg: #EFF4FF;--bb-apbd-tab-button-focus-bg: #FFFFFF;--bb-apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-tab-button-underline-color: #00ACC1;--bb-apbd-tab-button-underline-border-color: #E9EAEB;--bb-apbd-tab-button-secondary-hover-color: #181D27;--bb-apbd-tab-button-secondary-active-color: #181D27;--bb-apbd-tab-button-secondary-active-bg: #F5F5F5;--bb-apbd-bg-tab-seondary: #F5F5F5;--bb-apbd-bg-tab-seondary-active-btn-bg: #FFFFFF;--bb-apbd-bg-tab-seondary-active-btn-color: #181D27;--bb-apbd-bg-tab-seondary-active-btn-hover-color: #181D27;--bb-apbd-tab-outline-link-color: #00ACC1;--bb-apbd-tab-outline-link-border-color: #00ACC1;--bb-apbd-tab-outline-hover-link-color: #FFFFFF;--bb-apbd-tab-outline-hover-bg: #00ACC1;--bb-apbd-slider-track-bg: #D5D7DA;--bb-apbd-slider-thumb-bg: #FFFFFF;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .06);--bb-apbd-slider-thumb-hover-border-color: var(--bb-primary-btn-hover);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .1);--bb-apbd-slider-thumb-focus-border-color: var(--bb-primary);--bb-apbd-slider-label-color: #414651;--bb-apbd-alert-bg: #FFFFFF;--bb-apbd-alert-title-color: #181D27;--bb-apbd-alert-message-color: #6b7280;--bb-apbd-alert-close-color: #959595;--bb-apbd-alert-close-hover-color: #181D27;--bb-apbd-alert-close-hover-bg: #f3f4f6;--bb-apbd-alert-cancel-bg: #f3f4f6;--bb-apbd-alert-cancel-color: #344054;--bb-apbd-alert-cancel-hover-bg: #e5e7eb;--bb-apbd-alert-icon-success-bg: #DCFAE6;--bb-apbd-alert-icon-error-bg: #FEE4E2;--bb-apbd-alert-icon-warning-bg: #FEF0C7;--bb-apbd-alert-icon-info-bg: #D1E9FF;--bb-apbd-alert-icon-question-bg: #EDE9FE;--bb-apbd-toast-bg: #FFFFFF;--bb-apbd-toast-text-color: #414651;--bb-apbd-toast-title-color: #181D27;--bb-apbd-toast-border-color: #E9EAEB;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, .14);--bb-apbd-toast-success-color: #079455;--bb-apbd-toast-error-color: #D92D20;--bb-apbd-toast-warning-color: #F79009;--bb-apbd-toast-info-color: #00ACC1;--bb-apbd-toast-close-color: #A4A7AE;--bb-apbd-toast-close-hover-color: #414651;--bb-apbd-toast-close-hover-bg: #F5F5F5;--bb-apbd-toast-progress-bg: #E9EAEB;--bb-apbd-toast-default-progress-color: #A4A7AE;--bb-apbd-imgr-bg: var(--bb-primary);--bb-apbd-imgr-checked-color: var(--bb-primary);--bb-apbd-radio-input-bg: #FFFFFF;--bb-apbd-radio-input-icon-color: #717680;--bb-apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-radio-input-checked-border-color: #528BFF;--bb-apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-radio-input-disabled-bg: #F5F5F5;--bb-apbd-radio-input-disabled-label-color: #717680;--bb-apbd-radio-input-disabled-description-color: #B3B3B3}[data-bs-theme=dark] body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-body-bg: var(--bb-apbd-bg-color);--bs-body-color: var(--bb-apbd-main-text-color);--bs-border-color: var(--bb-apbd-border-color);--bb-theme: rgb(0, 126.5492227979, 142);--bb-primary: rgb(0, 126.5492227979, 142);--bb-primary-rgb: 0, 127, 142;--bb-primary-outline-btn-hover: #00ACC1;--bb-primary-outline-btn-border: rgb(0, 103.8238341969, 116.5);--bb-primary-outline-btn-hover-bg: rgb(0, 72.0082901554, 80.8);--bb-primary-outline-btn-text: #00ACC1;color-scheme:dark;--bb-apbd-border-color: #334155;--bb-apbd-border-color-focus: #334155;--bb-apbd-bg-color: #0F172A;--bb-apbd-input-bg-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);--bb-apbd-main-text-color: #FFFFFF;--bb-apbd-sub-text-color: #9CA3AF;--bb-btn-disabled-text: #98A2B3;--bb-btn-disabled-bg-color: #252B37;--bb-btn-disabled-border: #EAECF0;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F9FAFB;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-secondary-btn-outline-color: #6c757d;--bb-secondary-outline-btn-hover: #E9EAEB;--bb-secondary-outline-btn-border: #585e66;--bb-secondary-outline-btn-hover-bg: #494949;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #D5D7DA;--bb-success-outline-btn-border: #436151;--bb-success-outline-btn-hover-bg: #3e4e45;--bb-success-outline-btn-text: #16b16f;--bb-danger-outline-btn-border: #6e5452;--bb-danger-outline-btn-hover-bg: #3c2e2e;--bb-danger-outline-btn-text: #ef574b;--bb-warning-outline-btn-border: #766a4f;--bb-warning-outline-btn-hover-bg: #514d40;--bb-warning-outline-btn-text: #DC6803;--bb-info-outline-btn-border: #627c88;--bb-info-outline-btn-hover-bg: #2c4250;--bb-info-outline-btn-text: #0284C7;--bb-light-outline-btn-hover-bg: rgb(120 120 120);--bb-input-field-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-input-field-disable-bg: #282828;--bb-input-field-disabled-text-color: #A4A7AE;--bb-input-field-label-color: #FFFFFF;--bb-input-field-text-color: #FFFFFF;--bb-input-field-icon-color: #98A2B3;--bb-input-field-mutiselect-tag-bg: #181D27;--bb-input-field-mutiselect-tag-text-color: #FFFFFF;--bb-input-field-mutiselect-tag-remove-color: #D5D7DA;--bb-input-field-code-input-text-color:#FFFFFF;--bb-input-field-code-input-text-color-active:#FFFFFF;--bb-apbd-checkbox-checked-form-check-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-checkbox-description-text-color: #A4A7AE;--bb-apbd-checkbox-disable-bg:#282828;--bb-apbd-checkbox-disable-border-color:#282828;--bb-apbd-toggle-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-checked-border-color: #334155;--bb-apbd-toggle-checked-hover-bg: #334155;--bb-apbd-toggle-checked-hover-border-color: #334155;--bb-apbd-toggle-not-checked-border-color: #334155;--bb-apbd-toggle-not-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-not-checked-focus-bg: #334155;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");--bb-apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;--bb-apbd-avatar-border-color: #717680;--bb-apbd-avatar-bg: #181D27;--bb-apbd-avatar-title-color: #FFFFFF;--bb-apbd-avatar-sub-title-color: #A4A7AE;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #667085;--bb-apbd-avatar-add-border-color: #A4A7AE;--bb-apbd-avatar-add-hover-bg: #252B37;--bb-apbd-avatar-add-focus-bg: #181D27;--bb-apbd-avatar-add-disable-bg: #252B37;--bb-apbd-avatar-add-disable-content-color: #D0D5DD;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F2F4F7;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-radio-input-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-date-picker-icon-container-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-card-bg: #0F172A;--bb-apbd-modal-bg:#0F172A;--bb-apbd-modal-header-title-color: #FFFFFF;--bb-apbd-modal-header-sub-title-color: #A4A7AE;--bb-apbd-modal-header-icon-color: #3f6cc3;--bb-apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 32px rgba(255, 255, 255, .06);--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #528BFF;--bb-apbd-tab-button-active-color: #528BFF;--bb-apbd-tab-button-active-bg: #00359E;--bb-apbd-progressbar-bg: #334155;--bb-apbd-progressbar-fill-bg: #2970FF;--bb-apbd-progressbar-text-color: #fff;--bb-apbd-slider-track-bg: #334155;--bb-apbd-slider-fill-bg: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-bg: #1E293B;--bb-apbd-slider-thumb-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--bb-apbd-slider-thumb-hover-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .4);--bb-apbd-slider-thumb-focus-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(0, 127, 142, .24);--bb-apbd-slider-label-color: #D0D5DD;--bb-apbd-sidebar-border-color: #334155;--bb-apbd-sidebar-bg: #0F172A;--bb-apbd-sidebar-header-text-color: #F1F5F9;--bb-apbd-sidebar-collapbe-btn-bg: #1E293B;--bb-apbd-sidebar-section-title-color: #94A3B8;--bb-apbd-sidebar-item-icon-color: #94A3B8;--bb-apbd-sidebar-item-text-color: #CBD5E1;--bb-apbd-sidebar-item-hover-bg: #1E293B;--bb-apbd-sidebar-item-hover-text-color: #F1F5F9;--bb-apbd-sidebar-item-active-bg: #1E293B;--bb-apbd-sidebar-item-active-text-color: var(--bb-primary);--bb-apbd-sidebar-submenu-tree-color: #334155;--bb-apbd-sidebar-submenu-text-color: #94A3B8;--bb-apbd-sidebar-submenu-active-text-color: #F1F5F9;--bb-apbd-sidebar-submenu-active-bg: #1E293B;--bb-apbd-sidebar-signout-icon-color: #F87171;--bb-apbd-sidebar-signout-text-color: #FCA5A5;--bb-apbd-alert-bg: #0F172A;--bb-apbd-alert-title-color: #F1F5F9;--bb-apbd-alert-message-color: #94A3B8;--bb-apbd-alert-close-color: #94A3B8;--bb-apbd-alert-close-hover-color: #F1F5F9;--bb-apbd-alert-close-hover-bg: #1E293B;--bb-apbd-alert-cancel-bg: #1E293B;--bb-apbd-alert-cancel-color: #CBD5E1;--bb-apbd-alert-cancel-hover-bg: #334155;--bb-apbd-alert-icon-success-bg: #132e1c;--bb-apbd-alert-icon-error-bg: #3c1e1e;--bb-apbd-alert-icon-warning-bg: #3d2e10;--bb-apbd-alert-icon-info-bg: #1a2e44;--bb-apbd-alert-icon-question-bg: #2a1f4e;--bb-apbd-toast-bg: #0F172A;--bb-apbd-toast-text-color: #CBD5E1;--bb-apbd-toast-title-color: #F1F5F9;--bb-apbd-toast-border-color: #334155;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);--bb-apbd-toast-success-color: #6EE7A0;--bb-apbd-toast-error-color: #FCA5A5;--bb-apbd-toast-warning-color: #FBBF24;--bb-apbd-toast-info-color: #528BFF;--bb-apbd-toast-close-color: #94A3B8;--bb-apbd-toast-close-hover-color: #F1F5F9;--bb-apbd-toast-close-hover-bg: #334155;--bb-apbd-toast-progress-bg: #334155;--bb-apbd-toast-default-progress-color: #64748B;--bb-apbd-radio-input-disabled-bg: #252B37;--bb-apbd-radio-input-disabled-border-color: #EAECF0}body{--eg-bg: var(--bb-apbd-bg-color,transparent);--eg-cell-padding: 10px;--eg-shodow-rule: 0px 3px 20px -19px rgba(0, 172, 193, .6);--eg-shodow-color: rgba(0, 172, 193, .6);--eg-loader-bg: rgba(0, 0, 0, .55);--eg-cell-header-color:rgba(0, 172, 193, .02);--eg-no-record-color: rgba(0, 172, 193, .8);--eg-row-group-title-color: #41444b;--eg-cell-index-color: #7f848d;--eg-table-border-color: rgba(0, 126.5492227979, 142, .1);--eg-hover-bg: rgba(0, 172, 193, .02);--eg-pg-border-color:#ccc;--eg-pg-btn-bg: #00ACC1;--eg-pg-btn-color: #FFFFFF;--eg-pg-shodow-color: #ccc;--eg-pagination-shadow: rgba(0, 172, 193, .6)}[data-bs-theme=dark] body{color-scheme:dark;--eg-table-border-color:rgba(0, 81.0984455959, 91, .25)}
+body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-link-color: var(--bb-primary);--bs-link-hover-color: var(--bb-primary-btn-hover);--bb-theme: #00ACC1;--bb-primary: #00ACC1;--bb-primary-light: rgb(233.8, 252.6932642487, 255);--bb-primary-rgb: 0, 172, 193;--bb-primary-btn-hover: #0891B2;--bb-primary-btn-hover-border-color: #0891B2;--bb-primary-outline-btn-hover: #0891B2;--bb-primary-outline-btn-border: #00ACC1;--bb-primary-outline-btn-hover-bg: rgba(0, 172, 193, .15);--bb-primary-outline-btn-text: var(--bb-primary-btn-hover);--bb-apbd-border-color-focus: #A5F3FC;--bb-apbd-input-box-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-checkbox-checked-form-check-bg: #00ACC1;--bb-apbd-toggle-checked-bg: #00ACC1;--bb-apbd-toggle-checked-hover-bg: #0891B2;--bb-apbd-toggle-checked-hover-border-color: #0891B2;--bb-apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-sidebar-item-active-text-color: #00ACC1;--bb-apbd-progressbar-fill-bg-primary: #00ACC1;--bb-apbd-slider-fill-bg: #00ACC1;--bb-apbd-slider-thumb-border-color: #00ACC1;--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(0, 172, 193, .24);--bb-apbd-border-color: #D5D7DA;--bb-apbd-error-border-color: #FDA29B;--bb-apbd-bg-color: #FFFFFF;--bb-apbd-input-bg-color: #FFFFFF;--bb-apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05), 0 0 0 4px rgba(240, 68, 56, .24);--bb-apbd-placeholder-color:#9ca3af;--bb-body-bg:var(--bb-apbd-bg-color);--bb-btn-disabled-text: #A4A7AE;--bb-btn-disabled-bg-color: #F5F5F5;--bb-btn-disabled-border: #E9EAEB;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F5F5F5;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-error-text-color: #bd2a20;--bb-apbd-main-text-color: #181D27;--bb-apbd-sub-text-color: #414651;--bb-btn-icon-divider-color: #cbc1c175;--bb-secondary: #F5F5F5;--bb-secondary-btn-hover: #E9EAEB;--bb-secondary-btn-hover-border-color: #E9EAEB;--bb-secondary-btn-color: #181D27;--bb-secondary-btn-hover-color: #181D27;--bb-secondary-btn-outline-color: #181D27;--bb-secondary-outline-btn-hover: ##E9EAEB;--bb-secondary-outline-btn-disable-bg: #FFF;--bb-secondary-outline-btn-border: #D5D7DA;--bb-secondary-outline-btn-hover-bg: #FAFAFA;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #181D27;--bb-danger: #bd2a20;--bb-danger-btn-hover: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-btn-hover-border-color: rgb(145.3846153846, 32.3076923077, 24.6153846154);--bb-danger-outline-btn-disable-bg: #FFF;--bb-danger-outline-btn-border: #FDA29B;--bb-danger-outline-btn-hover-bg: #FEF3F2;--bb-danger-outline-btn-text: #B42318;--bb-success: #079455;--bb-success-btn-hover: #067647;--bb-success-btn-hover-border-color: #067647;--bb-success-outline-btn-disable-bg: #FFF;--bb-success-outline-btn-border: #75E0A7;--bb-success-outline-btn-hover-bg: #ECFDF3;--bb-success-outline-btn-text: #067647;--bb-warning: #F79009;--bb-warning-btn-hover: #DC6803;--bb-warning-btn-hover-border-color: #DC6803;--bb-warning-outline-btn-disable-bg: #FFF;--bb-warning-outline-btn-border: #FEC84B;--bb-warning-outline-btn-hover-bg: #FFFAEB;--bb-warning-outline-btn-text: #ff8114;--bb-light-outline-btn-hover-bg: rgb(235 235 235);--bb-info: #0EA5E9;--bb-info-btn-hover: #0284C7;--bb-info-btn-hover-border-color: #0284C7;--bb-info-outline-btn-disable-bg: #FFF;--bb-info-outline-btn-border: #7DD3FC;--bb-info-outline-btn-hover-bg: #F0F9FF;--bb-info-outline-btn-text: #0284C7;--bb-dark: #181D27;--bb-dark-bg: #181D27;--bb-dark-bg-soft: #1F2937;--bb-dark-bg-hover: #9a9ca1;--bb-dark-border: #2D3748;--bb-dark-text: #E5E7EB;--bb-dark-text-muted: #9CA3AF;--bb-input-field-bg: #FFFFFF;--bb-input-field-label-color: #414651;--bb-input-field-disabled-text-color: #717680;--bb-input-field-text-color: #181D27;--bb-input-field-dropdown-select-option-color: #2970FF;--bb-input-field-icon-color: #A4A7AE;--bb-input-field-disable-bg: #F5F5F5;--bb-error-icon-color: #bd2a20;--bb-input-field-mutiselect-tag-bg: #FFFFFF;--bb-input-field-mutiselect-tag-text-color: #414651;--bb-input-field-mutiselect-tag-remove-color: #A4A7AE;--bb-input-field-code-input-text-color:#B3B3B3;--bb-input-field-code-input-text-color-active:#00ACC1;--bb-apbd-checkbox-description-text-color: #717680;--bb-apbd-checkbox-disable-bg: #dddddd;--bb-apbd-checkbox-disable-border-color: #dddddd;--bb-apbd-toggle-bg: #D5D7DA;--bb-apbd-toggle-not-checked-border-color: #E9EAEB;--bb-apbd-toggle-not-checked-bg: #E9EAEB;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");--bb-apbd-modal-overlay: rgba(12, 17, 29, .7);--bb-apbd-modal-bg:#FFFFFF;--bb-apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);--bb-apbd-modal-header-title-color: #181D27;--bb-apbd-modal-header-sub-title-color: #717680;--bb-apbd-modal-header-icon-bg: #155eef29;--bb-apbd-modal-header-icon-color: #00359E;--bb-apbd-modal-header-icon-danger-bg: #FEE4E2;--bb-apbd-modal-header-icon-danger-color: #D92D20;--bb-apbd-modal-header-icon-success-bg: #DCFAE6;--bb-apbd-modal-header-icon-success-color: #079455;--bb-apbd-sidebar-bg: #FFFFFF;--bb-apbd-sidebar-header-text-color: #181D27;--bb-apbd-sidebar-collapbe-btn-bg: #E9EAEB;--bb-apbd-sidebar-section-title-color: #414651;--bb-apbd-sidebar-item-icon-color: #717680;--bb-apbd-sidebar-item-text-color: #717680;--bb-apbd-sidebar-item-hover-bg: var(--bb-primary-light);--bb-apbd-sidebar-item-hover-text-color: #181D27;--bb-apbd-sidebar-item-active-bg: var(--bb-primary-light);--bb-apbd-sidebar-submenu-text-color: #717680;--bb-apbd-sidebar-submenu-active-text-color: #181D27;--bb-apbd-sidebar-submenu-active-bg: #FFFFFF;--bb-apbd-sidebar-signout-icon-color: #D92D20;--bb-apbd-sidebar-signout-text-color: #B42318;--bb-apbd-card-bg: #FFFFFF;--bb-apbd-card-border-color: #E9EAEB;--bb-apbd-tile-card-title-color: #414651;--bb-apbd-tile-card-value-color: #181D27;--bb-apbd-tile-card-icon-bg-purple: #EFF4FF;--bb-apbd-tile-card-icon-bg-blue: #EFF4FF;--bb-apbd-tile-card-icon-bg-green: #ECFDF3;--bb-apbd-tile-card-icon-bg-yellow: #FFFAEB;--bb-apbd-tile-card-icon-bg-red: #FFF3F3;--bb-apbd-progressbar-bg: #D5D7DA;--bb-apbd-progressbar-fill-bg-secondary: #6C757D;--bb-apbd-progressbar-fill-bg-success: #079455;--bb-apbd-progressbar-fill-bg-danger: #bd2a20;--bb-apbd-progressbar-fill-bg-warning: #F79009;--bb-apbd-progressbar-fill-bg-info: #0EA5E9;--bb-apbd-progressbar-text-color: #181D27;--bb-apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);--bb-apbd-avatar-bg: #D5D7DA;--bb-apbd-avatar-title-color: #414651;--bb-apbd-avatar-sub-title-color: #414651;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #717680;--bb-apbd-avatar-add-hover-bg: #F5F5F5;--bb-apbd-avatar-add-focus-bg: #FFFFFF;--bb-apbd-avatar-add-disable-bg: #F5F5F5;--bb-apbd-avatar-add-disable-content-color: #D5D7DA;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F5F5F5;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-date-picker-color: #717680;--bb-apbd-date-picker-icon-container-color: #fffff;--bb-apbd-badge-gray-bg-text-color: #717680;--bb-apbd-badge-gray-bg: #F5F5F5;--bb-apbd-badge-gray-border-color: #E9EAEB;--bb-apbd-badge-blue-deep-bg-text-color: #004EEB;--bb-apbd-badge-blue-deep-bg: #EFF4FF;--bb-apbd-badge-blue-deep-border-color: #B2CCFF;--bb-apbd-badge-danger-bg-text-color: #B42318;--bb-apbd-badge-danger-bg: #FEE4E2;--bb-apbd-badge-danger-border-color: #FECDCA;--bb-apbd-badge-warning-bg-text-color: #7A2E0E;--bb-apbd-badge-warning-bg: #FFFAEB;--bb-apbd-badge-warning-border-color: #FEDF89;--bb-apbd-badge-success-bg-text-color: #085D3A;--bb-apbd-badge-success-bg: #ECFDF3;--bb-apbd-badge-success-border-color: #ABEFC6;--bb-apbd-badge-gray-blue-bg-text-color: #363F72;--bb-apbd-badge-gray-blue-bg: #F8F9FC;--bb-apbd-badge-gray-blue-border-color: #D5D9EB;--bb-apbd-badge-info-bg-text-color: #026AA2;--bb-apbd-badge-info-bg: #F0F9FF;--bb-apbd-badge-info-border-color: #B9E6FE;--bb-apbd-badge-blue-bg-text-color: #0040C1;--bb-apbd-badge-blue-bg: #EFF8FF;--bb-apbd-badge-blue-border-color: #B2DDFF;--bb-apbd-badge-indigo-bg-text-color: #3538CD;--bb-apbd-badge-indigo-bg: #EEF4FF;--bb-apbd-badge-indigo-border-color: #C7D7FE;--bb-apbd-badge-purple-bg-text-color: #5925DC;--bb-apbd-badge-purple-bg: #F4F3FF;--bb-apbd-badge-purple-border-color: #D9D6FE;--bb-apbd-badge-pink-bg-text-color: #C11574;--bb-apbd-badge-pink-bg: #FDF2FA;--bb-apbd-badge-pink-border-color: #FCCEEE;--bb-apbd-badge-orange-bg-text-color: #B93815;--bb-apbd-badge-orange-bg: #FEF6EE;--bb-apbd-badge-orange-border-color: #F9DBAF;--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #00ACC1;--bb-apbd-tab-button-active-color: #00ACC1;--bb-apbd-tab-button-active-bg: #EFF4FF;--bb-apbd-tab-button-focus-bg: #FFFFFF;--bb-apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-tab-button-underline-color: #00ACC1;--bb-apbd-tab-button-underline-border-color: #E9EAEB;--bb-apbd-tab-button-secondary-hover-color: #181D27;--bb-apbd-tab-button-secondary-active-color: #181D27;--bb-apbd-tab-button-secondary-active-bg: #F5F5F5;--bb-apbd-bg-tab-seondary: #F5F5F5;--bb-apbd-bg-tab-seondary-active-btn-bg: #FFFFFF;--bb-apbd-bg-tab-seondary-active-btn-color: #181D27;--bb-apbd-bg-tab-seondary-active-btn-hover-color: #181D27;--bb-apbd-tab-outline-link-color: #00ACC1;--bb-apbd-tab-outline-link-border-color: #00ACC1;--bb-apbd-tab-outline-hover-link-color: #FFFFFF;--bb-apbd-tab-outline-hover-bg: #00ACC1;--bb-apbd-slider-track-bg: #D5D7DA;--bb-apbd-slider-thumb-bg: #FFFFFF;--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .06);--bb-apbd-slider-thumb-hover-border-color: var(--bb-primary-btn-hover);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .1);--bb-apbd-slider-thumb-focus-border-color: var(--bb-primary);--bb-apbd-slider-label-color: #414651;--bb-apbd-alert-bg: #FFFFFF;--bb-apbd-alert-title-color: #181D27;--bb-apbd-alert-message-color: #6b7280;--bb-apbd-alert-close-color: #959595;--bb-apbd-alert-close-hover-color: #181D27;--bb-apbd-alert-close-hover-bg: #f3f4f6;--bb-apbd-alert-cancel-bg: #f3f4f6;--bb-apbd-alert-cancel-color: #344054;--bb-apbd-alert-cancel-hover-bg: #e5e7eb;--bb-apbd-alert-icon-success-bg: #DCFAE6;--bb-apbd-alert-icon-error-bg: #FEE4E2;--bb-apbd-alert-icon-warning-bg: #FEF0C7;--bb-apbd-alert-icon-info-bg: #D1E9FF;--bb-apbd-alert-icon-question-bg: #EDE9FE;--bb-apbd-toast-bg: #FFFFFF;--bb-apbd-toast-text-color: #414651;--bb-apbd-toast-title-color: #181D27;--bb-apbd-toast-border-color: #E9EAEB;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, .14);--bb-apbd-toast-success-color: #079455;--bb-apbd-toast-error-color: #D92D20;--bb-apbd-toast-warning-color: #F79009;--bb-apbd-toast-info-color: #00ACC1;--bb-apbd-toast-close-color: #A4A7AE;--bb-apbd-toast-close-hover-color: #414651;--bb-apbd-toast-close-hover-bg: #F5F5F5;--bb-apbd-toast-progress-bg: #E9EAEB;--bb-apbd-toast-default-progress-color: #A4A7AE;--bb-apbd-imgr-bg: var(--bb-primary);--bb-apbd-imgr-checked-color: var(--bb-primary);--bb-apbd-radio-input-bg: #FFFFFF;--bb-apbd-radio-input-icon-color: #717680;--bb-apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-radio-input-checked-border-color: #528BFF;--bb-apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, .24);--bb-apbd-radio-input-disabled-bg: #F5F5F5;--bb-apbd-radio-input-disabled-label-color: #717680;--bb-apbd-radio-input-disabled-description-color: #B3B3B3}[data-bs-theme=dark] body{--bs-primary: var(--bb-primary);--bs-primary-rgb: var(--bb-primary-rgb);--bs-body-bg: var(--bb-apbd-bg-color);--bs-body-color: var(--bb-apbd-main-text-color);--bs-border-color: var(--bb-apbd-border-color);--bb-theme: rgb(0, 126.5492227979, 142);--bb-primary: rgb(0, 126.5492227979, 142);--bb-primary-rgb: 0, 127, 142;--bb-primary-outline-btn-hover: #00ACC1;--bb-primary-outline-btn-border: rgb(0, 103.8238341969, 116.5);--bb-primary-outline-btn-hover-bg: rgb(0, 72.0082901554, 80.8);--bb-primary-outline-btn-text: #00ACC1;color-scheme:dark;--bb-apbd-border-color: #334155;--bb-apbd-border-color-focus: #334155;--bb-apbd-bg-color: #0F172A;--bb-apbd-input-bg-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);--bb-apbd-main-text-color: #FFFFFF;--bb-apbd-sub-text-color: #9CA3AF;--bb-btn-disabled-text: #98A2B3;--bb-btn-disabled-bg-color: #252B37;--bb-btn-disabled-border: #EAECF0;--bb-btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);--bb-btn-close-hover-bg: #F9FAFB;--bb-btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, .14);--bb-secondary-btn-outline-color: #6c757d;--bb-secondary-outline-btn-hover: #E9EAEB;--bb-secondary-outline-btn-border: #585e66;--bb-secondary-outline-btn-hover-bg: #494949;--bb-secondary-outline-btn-text: #D5D7DA;--bb-secondary-btn-outline-hover-color: #D5D7DA;--bb-success-outline-btn-border: #436151;--bb-success-outline-btn-hover-bg: #3e4e45;--bb-success-outline-btn-text: #16b16f;--bb-danger-outline-btn-border: #6e5452;--bb-danger-outline-btn-hover-bg: #3c2e2e;--bb-danger-outline-btn-text: #ef574b;--bb-warning-outline-btn-border: #766a4f;--bb-warning-outline-btn-hover-bg: #514d40;--bb-warning-outline-btn-text: #DC6803;--bb-info-outline-btn-border: #627c88;--bb-info-outline-btn-hover-bg: #2c4250;--bb-info-outline-btn-text: #0284C7;--bb-light-outline-btn-hover-bg: rgb(120 120 120);--bb-input-field-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-input-field-disable-bg: #282828;--bb-input-field-disabled-text-color: #A4A7AE;--bb-input-field-label-color: #FFFFFF;--bb-input-field-text-color: #FFFFFF;--bb-input-field-icon-color: #98A2B3;--bb-input-field-mutiselect-tag-bg: #181D27;--bb-input-field-mutiselect-tag-text-color: #FFFFFF;--bb-input-field-mutiselect-tag-remove-color: #D5D7DA;--bb-input-field-code-input-text-color:#FFFFFF;--bb-input-field-code-input-text-color-active:#FFFFFF;--bb-apbd-checkbox-checked-form-check-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-checkbox-description-text-color: #A4A7AE;--bb-apbd-checkbox-disable-bg:#282828;--bb-apbd-checkbox-disable-border-color:#282828;--bb-apbd-toggle-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-checked-border-color: #334155;--bb-apbd-toggle-checked-hover-bg: #334155;--bb-apbd-toggle-checked-hover-border-color: #334155;--bb-apbd-toggle-not-checked-border-color: #334155;--bb-apbd-toggle-not-checked-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-toggle-not-checked-focus-bg: #334155;--bb-apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");--bb-apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;--bb-apbd-avatar-border-color: #717680;--bb-apbd-avatar-bg: #181D27;--bb-apbd-avatar-title-color: #FFFFFF;--bb-apbd-avatar-sub-title-color: #A4A7AE;--bb-apbd-avatar-add-btn-color: #A4A7AE;--bb-apbd-avatar-hover-add-btn-color: #667085;--bb-apbd-avatar-add-border-color: #A4A7AE;--bb-apbd-avatar-add-hover-bg: #252B37;--bb-apbd-avatar-add-focus-bg: #181D27;--bb-apbd-avatar-add-disable-bg: #252B37;--bb-apbd-avatar-add-disable-content-color: #D0D5DD;--bb-apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, .14);--bb-apbd-avatar-overflow-bg: #F2F4F7;--bb-apbd-avatar-overflow-color: #717680;--bb-apbd-radio-input-bg: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-date-picker-icon-container-color: rgb(10.9736842105, 16.8263157895, 30.7263157895);--bb-apbd-card-bg: #0F172A;--bb-apbd-card-box-shadow: rgba(99, 99, 99, .2) 0px 2px 8px 0px;--bb-apbd-modal-bg:#0F172A;--bb-apbd-modal-header-title-color: #FFFFFF;--bb-apbd-modal-header-sub-title-color: #A4A7AE;--bb-apbd-modal-header-icon-color: #3f6cc3;--bb-apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 32px rgba(255, 255, 255, .06);--bb-apbd-tab-button-color: #717680;--bb-apbd-tab-button-hover-color: #528BFF;--bb-apbd-tab-button-active-color: #528BFF;--bb-apbd-tab-button-active-bg: #00359E;--bb-apbd-progressbar-bg: #334155;--bb-apbd-progressbar-fill-bg: #2970FF;--bb-apbd-progressbar-text-color: #fff;--bb-apbd-slider-track-bg: #334155;--bb-apbd-slider-fill-bg: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-bg: #1E293B;--bb-apbd-slider-thumb-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);--bb-apbd-slider-thumb-hover-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .4);--bb-apbd-slider-thumb-focus-border-color: rgb(0, 126.5492227979, 142);--bb-apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(0, 127, 142, .24);--bb-apbd-slider-label-color: #D0D5DD;--bb-apbd-sidebar-border-color: #334155;--bb-apbd-sidebar-bg: #0F172A;--bb-apbd-sidebar-header-text-color: #F1F5F9;--bb-apbd-sidebar-collapbe-btn-bg: #1E293B;--bb-apbd-sidebar-section-title-color: #94A3B8;--bb-apbd-sidebar-item-icon-color: #94A3B8;--bb-apbd-sidebar-item-text-color: #CBD5E1;--bb-apbd-sidebar-item-hover-bg: #1E293B;--bb-apbd-sidebar-item-hover-text-color: #F1F5F9;--bb-apbd-sidebar-item-active-bg: #1E293B;--bb-apbd-sidebar-item-active-text-color: var(--bb-primary);--bb-apbd-sidebar-submenu-tree-color: #334155;--bb-apbd-sidebar-submenu-text-color: #94A3B8;--bb-apbd-sidebar-submenu-active-text-color: #F1F5F9;--bb-apbd-sidebar-submenu-active-bg: #1E293B;--bb-apbd-sidebar-signout-icon-color: #F87171;--bb-apbd-sidebar-signout-text-color: #FCA5A5;--bb-apbd-alert-bg: #0F172A;--bb-apbd-alert-title-color: #F1F5F9;--bb-apbd-alert-message-color: #94A3B8;--bb-apbd-alert-close-color: #94A3B8;--bb-apbd-alert-close-hover-color: #F1F5F9;--bb-apbd-alert-close-hover-bg: #1E293B;--bb-apbd-alert-cancel-bg: #1E293B;--bb-apbd-alert-cancel-color: #CBD5E1;--bb-apbd-alert-cancel-hover-bg: #334155;--bb-apbd-alert-icon-success-bg: #132e1c;--bb-apbd-alert-icon-error-bg: #3c1e1e;--bb-apbd-alert-icon-warning-bg: #3d2e10;--bb-apbd-alert-icon-info-bg: #1a2e44;--bb-apbd-alert-icon-question-bg: #2a1f4e;--bb-apbd-toast-bg: #0F172A;--bb-apbd-toast-text-color: #CBD5E1;--bb-apbd-toast-title-color: #F1F5F9;--bb-apbd-toast-border-color: #334155;--bb-apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--bb-apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);--bb-apbd-toast-success-color: #6EE7A0;--bb-apbd-toast-error-color: #FCA5A5;--bb-apbd-toast-warning-color: #FBBF24;--bb-apbd-toast-info-color: #528BFF;--bb-apbd-toast-close-color: #94A3B8;--bb-apbd-toast-close-hover-color: #F1F5F9;--bb-apbd-toast-close-hover-bg: #334155;--bb-apbd-toast-progress-bg: #334155;--bb-apbd-toast-default-progress-color: #64748B;--bb-apbd-radio-input-disabled-bg: #252B37;--bb-apbd-radio-input-disabled-border-color: #EAECF0}body{--eg-bg: var(--bb-apbd-bg-color,transparent);--eg-cell-padding: 10px;--eg-shodow-rule: 0px 3px 20px -19px rgba(0, 172, 193, .6);--eg-shodow-color: rgba(0, 172, 193, .6);--eg-loader-bg: rgba(0, 0, 0, .55);--eg-cell-header-color:rgba(0, 172, 193, .02);--eg-no-record-color: rgba(0, 172, 193, .8);--eg-row-group-title-color: #41444b;--eg-cell-index-color: #7f848d;--eg-table-border-color: rgba(0, 126.5492227979, 142, .1);--eg-hover-bg: rgba(0, 172, 193, .02);--eg-pg-border-color:#ccc;--eg-pg-btn-bg: #00ACC1;--eg-pg-btn-color: #FFFFFF;--eg-pg-shodow-color: #ccc;--eg-pagination-shadow: rgba(0, 172, 193, .6)}[data-bs-theme=dark] body{color-scheme:dark;--eg-table-border-color:rgba(0, 81.0984455959, 91, .25)}