diff --git a/docs/plans/2026-05-11-templates-folder-hierarchy-design.md b/docs/plans/2026-05-11-templates-folder-hierarchy-design.md
index d81a9b6..9656d31 100644
--- a/docs/plans/2026-05-11-templates-folder-hierarchy-design.md
+++ b/docs/plans/2026-05-11-templates-folder-hierarchy-design.md
@@ -6,7 +6,7 @@
 
 ## Goal
 
-Replace the current single-list view at `/design/templates` with a tree-organized authoring surface modeled on the Wonderware ArchestrA Template Toolbox. Users organize templates into nested folders, see composition children inline under their owning template, and edit templates in a persistent split-pane layout.
+Replace the current single-list view at `/design/templates` with a tree-organized browser modeled on the Wonderware ArchestrA Template Toolbox. Users organize templates into nested folders, see composition children inline under their owning template, and navigate to a dedicated edit page (`/design/templates/{id}`) when authoring a specific template. The tree page itself does not host the editor.
 
 ## Reference
 
@@ -22,13 +22,14 @@ Inheritance is **not** rendered as tree nesting in the image, and it is not rend
 
 | Decision | Choice |
 |---|---|
-| Inheritance in tree | Not shown as nesting; shown as text on the template node label. |
+| Inheritance in tree | Not shown as nesting; **not shown on the node label either** (label is name only). Inheritance is visible in the TemplateEdit page when a template is selected. |
 | Folder model | New `TemplateFolder` entity with self-referencing `ParentFolderId`. `Template.FolderId` nullable. |
-| Reorganization UX | Context menus + native HTML5 drag-drop. |
+| Reorganization UX | **Right-click context menus only** (no drag-drop). Modal dialog pickers for move targets. |
 | Composition rendering | Read-only leaves with navigation; right-click → Open composed template / Remove composition. |
 | Root-level templates | Allowed (`FolderId` nullable). Existing templates migrate with `FolderId = null`. |
 | Folder delete with contents | Blocked; structured error lists child counts. |
-| Page layout | Persistent split pane: tree on left (~25–33% width), template detail/editor on right. |
+| Page layout | **Tree browser only** — no split-pane editor. Selecting a template navigates to `/design/templates/{id}` (TemplateEdit page); creating navigates to `/design/templates/create`. |
+| Tree node visuals | Per `Component-TreeView.md` Visual Design Guide V7: Bootstrap Icons (`bi-folder` / `bi-folder2-open` / `bi-file-earmark-text` / `bi-arrow-return-right`), name-only labels (no count/inherit badges on template nodes), folder child-count pill, composition `→ $Target` muted secondary text. |
 
 ## Data model
 
@@ -138,72 +139,65 @@ private record TmplNode(
 | `KeySelector` | `n => (object)n.Key` |
 | `StorageKey` | `"templates-tree"` (preserved from current usage) |
 | `Selectable` | `true` |
-| `SelectedKeyChanged` | dispatch on key prefix: `t:` → load template into right pane; `f:` → no-op; `c:` → reveal + select composed template |
+| `SelectedKeyChanged` | dispatch on key prefix: `t:` → `NavigationManager.NavigateTo($"/design/templates/{id}")` (TemplateEdit page); `f:` → no-op; `c:` → `NavigateTo` the composed template's edit page |
 
-**Inline node labels:**
-- Folder: glyph + name + child-count badge.
-- Template: `<strong>$Name</strong>` + optional "inherits $Parent" muted text + existing attr/alarm/script/comp count badges.
-- Composition: `<span>InstanceName</span>` + muted `→ $ComposedTemplateName`.
+**Inline node labels** (see `Component-TreeView.md` V7 for the canonical recipe):
+- Folder: `<i class="bi bi-folder">` (closed) or `<i class="bi bi-folder2-open">` (expanded) + name (semibold when has children) + count-pill badge of direct children.
+- Template: `<i class="bi bi-file-earmark-text">` + `$Name` (semibold when has compositions). **No** inheritance hint, **no** attr/alarm/script count, **no** composition count on the node.
+- Composition: `<i class="bi bi-arrow-return-right">` + composition instance name + muted `→ $ComposedTemplateName` secondary text.
 
 **Search/filter:** out of scope for v1; the underlying component supports external filtering (per `Component-TreeView.md` R8) so it can be added later without component changes.
 
 ## Page layout
 
-Two-column split inside the existing page container:
+`/design/templates` is a **single-column tree browser** — no inline editor, no split pane.
 
 ```
-+-------------------------------+----------------------------------------+
-| Templates                     | $TestMachine                           |
-| [+Folder][+Template][Expand]  |  inherits $gMachine                    |
-|                               |  [Properties] [Validate]               |
-| ▶ 📁 _Default Templates       |                                        |
-| ▼ 📁 Dev                      |  Tabs: Attributes | Alarms | Scripts   |
-|     $TestMachine              |        | Compositions                  |
-|       DelmiaReceiver → ...    |  ...                                   |
-|       MESReceiver   → ...     |                                        |
-|     $TestObject               |                                        |
-| ▶ 📁 System                   |                                        |
-| $UnfiledTemplate              |                                        |
-+-------------------------------+----------------------------------------+
++--------------------------------------------+
+| Templates                                  |
+| [+Folder] [+Template] [Expand] [Collapse]  |
+|                                            |
+| ▶ 📁 _Default Templates                    |
+| ▼ 📂 Dev                                   |
+|     📄 $TestMachine                        |
+|        ↪ DelmiaReceiver → $DelmiaSvc       |
+|        ↪ MESReceiver   → $MesSvc           |
+|     📄 $TestObject                         |
+| ▶ 📁 System                                |
+| 📄 $UnfiledTemplate                        |
++--------------------------------------------+
 ```
 
-- Left column: ~25–33% (`col-md-4 col-lg-3`), scrollable (`max-height: calc(100vh - 160px); overflow-y: auto`).
-- Right column: existing template properties card, validation block, four-tab editor (Attributes / Alarms / Scripts / Compositions) lifted unchanged into `RenderTemplateDetail()`.
-- "Back to List" button is removed — the tree is always visible.
-- Empty state in the right column when nothing is selected.
-- URL contract preserved: `/design/templates/{id}` selects + reveals the template on load via `TreeView.RevealNode("t:" + id, select: true)`.
+- Tree scrollable region: `max-height: calc(100vh - 160px); overflow-y: auto`. The 25–33% sidebar width constraint is removed; the tree uses the page's main container width.
+- Selecting a template node navigates to `/design/templates/{id}` (TemplateEdit page).
+- Selecting a composition node navigates to the composed template's edit page.
+- Selecting a folder node is a no-op (still allowed; expansion and context-menu still work).
+- Creating a template: toolbar "+ Template" button (or folder context-menu "New Template") navigates to `/design/templates/create?folderId={id}`. After successful create, the create page navigates to `/design/templates/{newId}`.
+- URL contract for deep links: `/design/templates/{id}` resolves to the TemplateEdit page directly — the browser doesn't need to be on the tree page first.
 
 ## Context menus
 
-Per-node-kind `ContextMenu` fragment driven by `node.Kind`:
+The context menu is the **only** reorganization mechanism. Per-node-kind `ContextMenu` fragment driven by `node.Kind`:
 
-**Folder:** New Folder · New Template · Rename · Delete
-**Template:** Edit · Move to Folder… (modal with folder-only mini-tree, "(Root)" option) · Delete
+**Folder:** New Folder · New Template · Rename · Move to Folder… · Delete
+**Template:** Edit · Move to Folder… · Delete
 **Composition:** Open composed template · Remove composition
 
-The "New Template" modal collects name + description and creates with `FolderId = thisFolder.Id`. Root-level "+Folder" and "+Template" buttons live in the tree-sidebar toolbar above the tree.
+- **Move to Folder…** opens a modal (`MoveFolderDialog` / `MoveTemplateDialog`) with a flat folder picker. The list includes "(Root)" as the first entry. For folder-move, the dialog client-side prunes the folder being moved and its descendants from the candidate list to prevent obvious cycles; the server still validates (authoritative). For template-move, all folders are valid targets.
+- **Edit** on a template navigates to `/design/templates/{id}` (TemplateEdit page) — equivalent to clicking the node, kept in the menu for discoverability.
+- Root-level "+ Folder" and "+ Template" buttons live in the toolbar above the tree.
 
-## Drag-drop
-
-Native HTML5 drag-drop, no library.
-
-**Draggability:** folders and templates are `draggable="true"`. Composition nodes are not draggable.
-**Drop targets:** folder nodes and the root sidebar wrapper. Template/composition nodes are not drop targets in v1.
-**Payload:** `_dragPayload = (kind, id)` held in component state on `@ondragstart`.
-**Visual feedback:** CSS `drag-over` class toggled via `@ondragenter` / `@ondragleave`; compositions dimmed to 0.5 opacity while drag in progress.
-
-**Server-side validation (authoritative):**
+**Server-side validation (authoritative)**:
 - Folder onto descendant → reject (cycle).
-- Folder onto itself → no-op.
-- Drop on a composition → ignored.
-- Template-onto-template → **ignored** (no sibling reordering, no surprising "drop into parent's folder").
+- Folder onto itself → no-op (client prunes).
+- Template-onto-template → not a valid target (templates aren't shown in the folder picker).
 
 ## Edge cases
 
-- Deep-link route reveals ancestors via `RevealNode`.
+- Deep-link route `/design/templates/{id}` resolves directly to the TemplateEdit page; the tree page is not involved. If the user navigates back, the tree's sessionStorage-persisted expansion state is restored.
 - Stale `f:{id}` keys in `sessionStorage` after folder delete are harmless (ignored on next render).
 - Selected template moved to another folder → tree rebuilds; selection preserved by stable key.
-- Selected template deleted → right pane clears to empty state.
+- Template deleted from the TemplateEdit page → page navigates back to `/design/templates`; the tree rebuilds without the deleted node.
 - Last-write-wins on concurrent folder edits, matching existing template policy.
 - Tree fully rebuilt on every CRUD; expected scale (dozens to low hundreds) makes this trivially cheap.
 
@@ -226,14 +220,16 @@ Native HTML5 drag-drop, no library.
 
 **bUnit (`tests/ScadaLink.CentralUI.Tests/`):**
 - Tree renders folders / templates / compositions in correct nesting.
-- Empty state when no selection.
-- Selecting a template node loads the detail pane.
-- Selecting a composition reveals + selects the composed template.
-- Right-click menus differ by node kind.
-- Folder-delete-non-empty surfaces structured error toast.
-- Deep link selects + reveals.
+- Empty state when no roots exist (no folders, no root templates).
+- Selecting a template node invokes `NavigationManager.NavigateTo($"/design/templates/{id}")`.
+- Selecting a composition node invokes `NavigateTo` for the composed template's edit page.
+- Selecting a folder node is a no-op (no navigation).
+- Right-click menus differ by node kind (Folder / Template / Composition each have distinct items).
+- Folder context menu includes "Move to Folder…"; the dialog excludes the folder being moved and its descendants from candidates.
+- Folder-delete-non-empty surfaces a structured error toast.
+- Bootstrap Icons render in the glyph slot for each node kind (`bi-folder` / `bi-folder2-open` / `bi-file-earmark-text` / `bi-arrow-return-right`).
 
-**Manual smoke (per `CLAUDE.md`):** nested folder creation, drag-drop reorg, cycle rejection, refresh persistence, composition navigation.
+**Manual smoke (per `CLAUDE.md`):** nested folder creation, context-menu reorg (folder + template Move-to-Folder dialogs), cycle rejection, refresh persistence, composition navigation, navigation from tree to TemplateEdit and back.
 
 ## Documentation updates
 
@@ -247,6 +243,6 @@ Native HTML5 drag-drop, no library.
 
 - Tree search / filter input (component already supports it; add when needed).
 - CLI commands for folder operations (message contracts make this trivial later).
-- Sibling reorder via drag-drop (sort stays alphabetical).
+- Sibling reorder (sort stays alphabetical).
 - Root context menu (right-click in empty tree area).
-- Bootstrap Icons CDN — current pages don't use it, so this design uses Unicode glyphs.
+- (Removed from out-of-scope.) Bootstrap Icons are now adopted (static files at `wwwroot/lib/bootstrap-icons/`) — see `Component-TreeView.md` V4.
diff --git a/docs/requirements/Component-TreeView.md b/docs/requirements/Component-TreeView.md
index 18addcf..6d327ba 100644
--- a/docs/requirements/Component-TreeView.md
+++ b/docs/requirements/Component-TreeView.md
@@ -64,10 +64,9 @@ The `NodeContent` fragment receives the `TItem` and is responsible for rendering
 
 ### R4 — Indentation and Visual Structure
 
-- Each depth level is indented by a fixed amount (default 24px, configurable via `IndentPx` parameter).
-- Vertical guide lines connect parent to children at each depth level (thin left-border or CSS pseudo-element).
-- The toggle icon is inline with the node content, left-aligned at the current depth.
-- Leaf nodes align with sibling branch labels (the content starts at the same horizontal position, with empty space where the toggle would be).
+The component renders the structural chrome: indent gutters per depth, the toggle slot, and ancestor guide lines. Leaf nodes render an empty toggle placeholder so labels align across siblings.
+
+The exact tokens (indent unit, toggle glyph, guide-line treatment) are specified in **V2** of the Visual Design Guide.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
@@ -132,12 +131,11 @@ This keeps filter logic in the page (domain-specific) while the component handle
 
 ### R9 — Styling
 
-- Uses Bootstrap 5 utility classes only (no third-party frameworks).
-- No hardcoded colors — uses standard Bootstrap text/background utilities.
-- Toggle icons: Unicode characters (`+` / `−`) in a `<span>` with `cursor: pointer`, or a small SVG chevron. No icon library dependency.
-- Compact row height for dense data (matching `table-sm` density).
-- Hover effect on rows: subtle background highlight (`bg-light` or similar).
-- CSS scoped to the component via Blazor CSS isolation (`TreeView.razor.css`).
+- Uses Bootstrap 5 utility classes and CSS variables. No third-party Blazor component frameworks.
+- Adds one icon-library dependency: **Bootstrap Icons** (static files at `wwwroot/lib/bootstrap-icons/`). Distribution rules in **V4** of the Visual Design Guide.
+- Hardcoded colors are forbidden; use Bootstrap utility classes (`bg-primary bg-opacity-10`, `text-muted`) or CSS variables (`var(--bs-tertiary-bg)`, `var(--bs-border-color)`).
+- Component-local CSS lives in `TreeView.razor.css` (Blazor CSS isolation).
+- All visual tokens (row density, indent, state visuals, glyphs, labels, badges) are specified in the **Visual Design Guide** (V1–V7). This requirement is non-normative summary; the Guide is authoritative.
 
 ### R10 — No Internal Scrolling
 
@@ -296,7 +294,183 @@ Future enhancement. Single selection (R5) covers current needs. A future version
 - Shift+click for range select, Ctrl+click for toggle
 - Use case: bulk operations (select multiple instances → deploy/disable all)
 
-## Component API Summary
+## Visual Design Guide
+
+This section is the canonical visual specification for the TreeView. It is normative: any change to the chrome (row layout, indentation, glyphs, state visuals, badge styling) must update this section. Consumers' `NodeContent` fragments follow the label and badge recipes in V5–V6; `/design/templates` is the worked example in V7.
+
+R4 and R9 above describe *that* the component renders structural chrome and uses Bootstrap utilities. This section says *exactly how*.
+
+### V1 — Density & Row Anatomy
+
+Each `<li role="treeitem">` renders one row. The row is a flexbox so trailing meta can right-align cleanly and the entire row width is a hover/selected/drop-target surface.
+
+**Row container** (replaces today's `.tv-row` styling):
+
+```html
+<div class="tv-row d-flex align-items-center"
+     style="gap:.25rem; padding:.25rem .5rem; padding-left: calc(.5rem + var(--tv-indent, 0px));">
+    <span class="tv-toggle">…chevron or placeholder…</span>
+    <span class="tv-glyph">…Bootstrap Icon or placeholder…</span>
+    <span class="tv-label">…primary + secondary…</span>
+    <span class="tv-meta ms-auto">…badges…</span>
+</div>
+```
+
+| Token | Value | Notes |
+|---|---|---|
+| Row vertical padding | `py-1` (0.25rem top/bottom) | Yields ~32px row height at base font-size + line-height 1.5. |
+| Row horizontal padding | `px-2` (0.5rem left/right) | Selected/hover background spans full row including this padding. |
+| Inter-slot gap | `gap: .25rem` | Between toggle, glyph, label. The meta slot is offset by `margin-left: auto`. |
+| Font size | inherits (1rem base) | Compact pages may opt into `small` per-page, not at the component level. |
+| Line height | inherits (1.5) | Aligns the chevron, glyph, and label baselines correctly. |
+| Toggle slot width | 20px (`width: 1.25rem`) | Always present, even on leaves (which render an empty placeholder). |
+| Glyph slot width | 20px (`width: 1.25rem`) | Always present; consumer may render an empty span to preserve alignment. |
+| Label slot | `flex: 1 1 auto; min-width: 0;` | `min-width: 0` is required for ellipsis truncation to work in a flex child. |
+| Meta slot | `margin-left: auto;` | Pushes badges to the right edge of the row. |
+
+**Hit semantics**:
+- The full row (`tv-row`) is the surface for hover, selected, focus-visible, and drop-target backgrounds.
+- Click-to-select fires only on the **label slot** (preserves R5: toggle clicks do not select).
+- The toggle slot's invisible tap target is enlarged by negative margins inside the 20px slot so it remains a comfortable 24×24px target.
+
+### V2 — Depth, Indent & Guide Lines
+
+| Token | Value |
+|---|---|
+| Indent per depth | 24px (`IndentPx` default, unchanged) |
+| Toggle glyph (collapsed) | `<i class="bi bi-chevron-right">` |
+| Toggle glyph (expanded) | `<i class="bi bi-chevron-down">` (or `bi-chevron-right` rotated 90° via CSS) |
+| Guide line color | `var(--bs-border-color)` |
+| Guide line width | 1px |
+| Guide line style | solid, vertical-only (no horizontal stubs) |
+| Guide line position | one line per ancestor depth, drawn down the indent column (left edge of each 24px indent slot) |
+| Guide lines enabled | `ShowGuideLines` parameter (default true) |
+| Leaf alignment | identical depth gutter as siblings; the toggle slot renders an empty placeholder so glyphs and labels align across leaves and branches |
+
+Implementation note: guide lines are drawn by repeating a `linear-gradient` background or by stacking `border-left` on indent spacers — both are pure CSS, no extra DOM. The current `tv-guides` class is the hook.
+
+### V3 — State Visuals
+
+States compose: focus rings layer on top of hover/selected; drop-target overrides hover and selected. All states paint the full row width (V1).
+
+| State | Visual | Implementation |
+|---|---|---|
+| Default | none | — |
+| Hover | full-row tint | `background: var(--bs-tertiary-bg);` on `:hover` of `.tv-row` |
+| Focus-visible | inset 2px primary ring | `box-shadow: inset 0 0 0 2px var(--bs-primary);` on `:focus-visible` |
+| Selected | full-row primary tint | `class="bg-primary bg-opacity-10"` (existing `SelectedCssClass` default, unchanged) |
+| Selected + hover | selected tint persists; hover does not deepen | hover background applies only when not selected (`:hover:not(.bg-primary)`) |
+| Selected + focus | tint + ring both visible | focus ring layers via box-shadow |
+| Drop-target (valid) | `bg-info bg-opacity-25` | overrides hover/selected backgrounds; opt-in per consumer |
+| Drop-target (invalid) | cursor `not-allowed`, no tint change | absence of valid-tint is the cue |
+| Dragging source | `opacity: 0.5` | applied to the row currently being dragged |
+| Dimmed (non-droppable while a drag is in progress) | `opacity: 0.5` | applied to nodes the consumer marks as unsuitable drop targets |
+
+Drag-drop is **not** part of the TreeView component's intrinsic behavior — it is opt-in per consuming page. The drag-related state visuals (drop-target, dragging, dimmed) are documented here so consumers that *do* implement DnD share the same visual language. The `/design/templates` page (V7) explicitly does **not** use drag-drop; reorganization happens via the right-click context menu.
+
+### V4 — Glyph & Icon System
+
+**Distribution**: Bootstrap Icons ships as static files under `src/ScadaLink.CentralUI/wwwroot/lib/bootstrap-icons/` (`bootstrap-icons.css` + `fonts/*.woff2`). Referenced once from `MainLayout.razor`:
+
+```html
+<link rel="stylesheet" href="~/lib/bootstrap-icons/bootstrap-icons.css" />
+```
+
+No CDN dependency — works on air-gapped industrial deployments. Version pinned in the file path or filename.
+
+**Rules**:
+- Glyphs are inline `<i class="bi bi-…"></i>` elements inside the 20px glyph slot.
+- Branches render an **open/closed pair**: a `closed` glyph when collapsed, an `open` glyph when expanded (consumer chooses both via `NodeContent`). The chevron toggle reinforces the same state.
+- Leaves render a single static glyph or no glyph (empty span preserves alignment).
+- **Color**: glyphs inherit `color` from their row. Default is body text; consumers may apply `text-muted` for de-emphasis. Kind is communicated by *shape*, not by color, to keep the palette available for status badges.
+- **Size**: glyphs render at `1em` (inherits row font-size). No fixed pixel size.
+
+### V5 — Label Recipe & Typography
+
+The label slot contains, in order: **[primary] [secondary modifiers]**. Trailing meta lives in the separate `.tv-meta` slot (V1).
+
+| Element | Style |
+|---|---|
+| Primary label (branches) | `class="fw-semibold"` |
+| Primary label (leaves) | normal weight |
+| Secondary modifiers | `class="text-muted small ms-1"` |
+| Overflow handling | `.tv-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }` |
+| Tooltip | `title` attribute on the primary label span, set to the full name on every row (cheap, helps when the row is narrower than the name) |
+
+**Rule of thumb**: font-weight tracks *has children*, not *kind*. A folder with no children renders regular weight; a leaf-template promoted to a branch by adding compositions becomes semibold automatically.
+
+### V6 — Badge Taxonomy
+
+Three semantic badge roles. The meta slot holds **at most two** badges per row. All badges live in `.tv-meta`, right-aligned (V1).
+
+| Role | Purpose | Markup | Examples |
+|---|---|---|---|
+| Count | numeric child aggregation | `<span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">@N</span>` | folder child count; area instance count |
+| Status | semantic state | `<span class="badge bg-{success\|warning\|danger\|info}">@Label</span>` | Enabled / Disabled / Stale / Error |
+| Kind | category / type tag | same filled semantic style, used sparingly | Protocol (OPC UA), Source (Inherited) |
+
+**Rules**:
+- Counts represent **direct children only**. Never transitive descendants.
+- A count of 0 **renders nothing** — no badge at all.
+- Status uses Bootstrap semantic colors; do not introduce custom palettes.
+- The component does not enforce the 2-badge cap; it is a documented convention. PR review should catch violations.
+
+### V7 — Worked Example: `/design/templates`
+
+**Page model**: the templates page is a **tree browser only**. Selecting a template in the tree navigates to a dedicated edit page (`/design/templates/{id}`); creating a template navigates to `/design/templates/create`. No split-pane editor. Reorganization (move folder, move template) happens exclusively through the **right-click context menu** with modal dialog pickers — there is no drag-and-drop on this page.
+
+Three node kinds; concrete recipes following V1–V6.
+
+| Kind | Glyph (collapsed) | Glyph (expanded) | Primary | Secondary | Badges |
+|---|---|---|---|---|---|
+| Folder | `bi-folder` | `bi-folder2-open` | folder name (semibold when has children, regular otherwise) | — | count of direct children (subtle pill), only if ≥ 1 |
+| Template | `bi-file-earmark-text` | same (templates with compositions still use the same glyph — chevron carries state) | `$Name` (semibold when has compositions, regular otherwise) | — | none |
+| Composition | `bi-arrow-return-right` | n/a (leaf, no expanded state) | composition instance name (regular weight) | `<span class="text-muted small ms-1">→ $TargetName</span>` | none |
+
+**`NodeContent` fragment** for the templates page (replaces the current `RenderNodeLabel` in `Templates.razor`):
+
+```razor
+@switch (node.Kind)
+{
+    case TmplNodeKind.Folder:
+        var folderOpen = _tree.IsExpanded(node.Key);
+        <span class="tv-glyph"><i class="bi @(folderOpen ? "bi-folder2-open" : "bi-folder")"></i></span>
+        <span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
+              title="@node.Label">@node.Label</span>
+        @if (node.Children.Count > 0)
+        {
+            <span class="tv-meta ms-auto">
+                <span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">@node.Children.Count</span>
+            </span>
+        }
+        break;
+
+    case TmplNodeKind.Template:
+        <span class="tv-glyph"><i class="bi bi-file-earmark-text"></i></span>
+        <span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
+              title="@node.Label">@node.Label</span>
+        break;
+
+    case TmplNodeKind.Composition:
+        var composedName = _templates.FirstOrDefault(t => t.Id == node.Composition!.ComposedTemplateId)?.Name
+                           ?? $"#{node.Composition!.ComposedTemplateId}";
+        <span class="tv-glyph"><i class="bi bi-arrow-return-right"></i></span>
+        <span class="tv-label" title="@node.Label">
+            @node.Label
+            <span class="text-muted small ms-1">→ @composedName</span>
+        </span>
+        break;
+}
+```
+
+**Locked subtractions from the previous design**:
+- Template node "inherits $Parent" muted text — **removed**. Inheritance is shown in the right pane only.
+- Template node "X attr, Y alm, Z scr" compound badge — **removed**.
+- Template node "N comp" accent badge — **removed**.
+
+These subtractions are deliberate: templates are leaves-from-the-tree's-perspective (their inner attributes/alarms/scripts are not tree-navigable), so the tree row should carry only what's needed to identify and pick the template. All counts and inheritance information live in the right detail pane.
+
+
 
 ```csharp
 @typeparam TItem
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor
index dd5ccac..d8551a2 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateCreate.razor
@@ -56,6 +56,8 @@
 </div>
 
 @code {
+    [SupplyParameterFromQuery] public int? FolderId { get; set; }
+
     private List<Template> _templates = new();
     private bool _loading = true;
 
@@ -87,11 +89,12 @@
             var user = await GetCurrentUserAsync();
             var result = await TemplateService.CreateTemplateAsync(
                 _createName.Trim(), _createDescription?.Trim(),
-                _createParentId == 0 ? null : _createParentId, user);
+                _createParentId == 0 ? null : _createParentId, user,
+                folderId: FolderId);
 
             if (result.IsSuccess)
             {
-                NavigationManager.NavigateTo("/design/templates");
+                NavigationManager.NavigateTo($"/design/templates/{result.Value.Id}");
             }
             else
             {
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
new file mode 100644
index 0000000..1a14f48
--- /dev/null
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
@@ -0,0 +1,860 @@
+@page "/design/templates/{Id:int}"
+@using ScadaLink.Security
+@using ScadaLink.Commons.Entities.Templates
+@using ScadaLink.Commons.Interfaces.Repositories
+@using ScadaLink.Commons.Types.Enums
+@using ScadaLink.TemplateEngine
+@using ScadaLink.TemplateEngine.Services
+@using ScadaLink.TemplateEngine.Validation
+@attribute [Authorize(Policy = AuthorizationPolicies.RequireDesign)]
+@inject ITemplateEngineRepository TemplateEngineRepository
+@inject TemplateService TemplateService
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager NavigationManager
+
+<div class="container-fluid mt-3">
+    <ToastNotification @ref="_toast" />
+    <ConfirmDialog @ref="_confirmDialog" />
+
+    <div class="mb-3">
+        <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Templates</button>
+    </div>
+
+    @if (_loading)
+    {
+        <LoadingSpinner IsLoading="true" />
+    }
+    else if (_loadError != null)
+    {
+        <div class="alert alert-danger">@_loadError</div>
+    }
+    else if (_selectedTemplate == null)
+    {
+        <div class="alert alert-warning">Template not found.</div>
+    }
+    else
+    {
+        @RenderTemplateDetail()
+    }
+</div>
+
+@code {
+    [Parameter] public int Id { get; set; }
+
+    private List<Template> _templates = new();
+    private Template? _selectedTemplate;
+    private List<TemplateAttribute> _attributes = new();
+    private List<TemplateAlarm> _alarms = new();
+    private List<TemplateScript> _scripts = new();
+    private List<TemplateComposition> _compositions = new();
+
+    private bool _loading = true;
+    private string? _loadError;
+    private string _activeTab = "attributes";
+
+    // Edit properties
+    private string _editName = string.Empty;
+    private string? _editDescription;
+    private int _editParentId;
+
+    // Validation
+    private bool _validating;
+    private Commons.Types.Flattening.ValidationResult? _validationResult;
+
+    // Member add forms
+    private bool _showAttrForm;
+    private string _attrName = string.Empty;
+    private string? _attrValue;
+    private DataType _attrDataType;
+    private bool _attrIsLocked;
+    private string? _attrDataSourceRef;
+    private string? _attrFormError;
+
+    private bool _showAlarmForm;
+    private string _alarmName = string.Empty;
+    private int _alarmPriority;
+    private AlarmTriggerType _alarmTriggerType;
+    private string? _alarmTriggerConfig;
+    private bool _alarmIsLocked;
+    private string? _alarmFormError;
+
+    private bool _showScriptForm;
+    private string _scriptName = string.Empty;
+    private string _scriptCode = string.Empty;
+    private string? _scriptTriggerType;
+    private string? _scriptTriggerConfig;
+    private bool _scriptIsLocked;
+    private string? _scriptFormError;
+
+    private bool _showCompForm;
+    private int _compComposedTemplateId;
+    private string _compInstanceName = string.Empty;
+    private string? _compFormError;
+
+    private ToastNotification _toast = default!;
+    private ConfirmDialog _confirmDialog = default!;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await LoadAsync();
+    }
+
+    private async Task LoadAsync()
+    {
+        _loading = true;
+        _loadError = null;
+        try
+        {
+            _templates = (await TemplateEngineRepository.GetAllTemplatesAsync()).ToList();
+
+            _selectedTemplate = await TemplateEngineRepository.GetTemplateWithChildrenAsync(Id)
+                                ?? _templates.FirstOrDefault(t => t.Id == Id);
+            if (_selectedTemplate == null) { _loading = false; return; }
+
+            _editName = _selectedTemplate.Name;
+            _editDescription = _selectedTemplate.Description;
+            _editParentId = _selectedTemplate.ParentTemplateId ?? 0;
+
+            _attributes = (await TemplateEngineRepository.GetAttributesByTemplateIdAsync(Id)).ToList();
+            _alarms = (await TemplateEngineRepository.GetAlarmsByTemplateIdAsync(Id)).ToList();
+            _scripts = (await TemplateEngineRepository.GetScriptsByTemplateIdAsync(Id)).ToList();
+            _compositions = (await TemplateEngineRepository.GetCompositionsByTemplateIdAsync(Id)).ToList();
+
+            _validationResult = null;
+        }
+        catch (Exception ex)
+        {
+            _loadError = $"Failed to load template: {ex.Message}";
+        }
+        _loading = false;
+    }
+
+    private void GoBack()
+    {
+        NavigationManager.NavigateTo("/design/templates");
+    }
+
+    private async Task<string> GetCurrentUserAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        return authState.User.FindFirst("Username")?.Value ?? "unknown";
+    }
+
+    private RenderFragment RenderTemplateDetail() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <div>
+                <h4 class="d-inline mb-0">@_selectedTemplate!.Name</h4>
+                @if (_selectedTemplate.ParentTemplateId.HasValue)
+                {
+                    <span class="text-muted ms-2">inherits @(_templates.FirstOrDefault(t => t.Id == _selectedTemplate.ParentTemplateId)?.Name)</span>
+                }
+            </div>
+            <div>
+                <button class="btn btn-outline-info btn-sm me-1" @onclick="RunValidation" disabled="@_validating">
+                    @if (_validating)
+                    {
+                        <span class="spinner-border spinner-border-sm me-1"></span>
+                    }
+                    Validate
+                </button>
+                <button class="btn btn-outline-danger btn-sm" @onclick="DeleteTemplate">Delete</button>
+            </div>
+        </div>
+
+        @* Validation results *@
+        @if (_validationResult != null)
+        {
+            <div class="mb-3">
+                @if (_validationResult.Errors.Count > 0)
+                {
+                    <div class="alert alert-danger py-2">
+                        <strong>Validation Errors (@_validationResult.Errors.Count)</strong>
+                        <ul class="mb-0 small">
+                            @foreach (var err in _validationResult.Errors)
+                            {
+                                <li>[@err.Category] @err.Message @(err.EntityName != null ? $"({err.EntityName})" : "")</li>
+                            }
+                        </ul>
+                    </div>
+                }
+                @if (_validationResult.Warnings.Count > 0)
+                {
+                    <div class="alert alert-warning py-2">
+                        <strong>Warnings (@_validationResult.Warnings.Count)</strong>
+                        <ul class="mb-0 small">
+                            @foreach (var warn in _validationResult.Warnings)
+                            {
+                                <li>[@warn.Category] @warn.Message</li>
+                            }
+                        </ul>
+                    </div>
+                }
+                @if (_validationResult.Errors.Count == 0 && _validationResult.Warnings.Count == 0)
+                {
+                    <div class="alert alert-success py-2">Validation passed with no errors or warnings.</div>
+                }
+            </div>
+        }
+
+        @* Template info edit *@
+        <div class="card mb-3">
+            <div class="card-header">Template Properties</div>
+            <div class="card-body">
+                <div class="row g-2 align-items-end">
+                    <div class="col-md-3">
+                        <label class="form-label small">Name</label>
+                        <input type="text" class="form-control form-control-sm" @bind="_editName" />
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label small">Description</label>
+                        <input type="text" class="form-control form-control-sm" @bind="_editDescription" />
+                    </div>
+                    <div class="col-md-3">
+                        <label class="form-label small">Parent Template</label>
+                        <select class="form-select form-select-sm" @bind="_editParentId">
+                            <option value="0">(None)</option>
+                            @foreach (var t in _templates.Where(t => t.Id != _selectedTemplate.Id))
+                            {
+                                <option value="@t.Id">@t.Name</option>
+                            }
+                        </select>
+                    </div>
+                    <div class="col-md-2">
+                        <button class="btn btn-primary btn-sm" @onclick="UpdateTemplateProperties">Save Properties</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        @* Tabs: Attributes, Alarms, Scripts, Compositions *@
+        <ul class="nav nav-tabs mb-3">
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "attributes" ? "active" : "")" @onclick='() => _activeTab = "attributes"'>
+                    Attributes <span class="badge bg-secondary">@_attributes.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "alarms" ? "active" : "")" @onclick='() => _activeTab = "alarms"'>
+                    Alarms <span class="badge bg-secondary">@_alarms.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "scripts" ? "active" : "")" @onclick='() => _activeTab = "scripts"'>
+                    Scripts <span class="badge bg-secondary">@_scripts.Count</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link @(_activeTab == "compositions" ? "active" : "")" @onclick='() => _activeTab = "compositions"'>
+                    Compositions <span class="badge bg-secondary">@_compositions.Count</span>
+                </button>
+            </li>
+        </ul>
+
+        @if (_activeTab == "attributes")
+        {
+            @RenderAttributesTab()
+        }
+        else if (_activeTab == "alarms")
+        {
+            @RenderAlarmsTab()
+        }
+        else if (_activeTab == "scripts")
+        {
+            @RenderScriptsTab()
+        }
+        else if (_activeTab == "compositions")
+        {
+            @RenderCompositionsTab()
+        }
+    };
+
+    private async Task DeleteTemplate()
+    {
+        if (_selectedTemplate == null) return;
+        var confirmed = await _confirmDialog.ShowAsync(
+            $"Delete template '{_selectedTemplate.Name}'? This will fail if instances or child templates reference it.",
+            "Delete Template");
+        if (!confirmed) return;
+
+        try
+        {
+            var user = await GetCurrentUserAsync();
+            var result = await TemplateService.DeleteTemplateAsync(_selectedTemplate.Id, user);
+            if (result.IsSuccess)
+            {
+                _toast.ShowSuccess($"Template '{_selectedTemplate.Name}' deleted.");
+                NavigationManager.NavigateTo("/design/templates");
+            }
+            else
+            {
+                _toast.ShowError(result.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Delete failed: {ex.Message}");
+        }
+    }
+
+    private async Task UpdateTemplateProperties()
+    {
+        if (_selectedTemplate == null) return;
+        try
+        {
+            var user = await GetCurrentUserAsync();
+            var result = await TemplateService.UpdateTemplateAsync(
+                _selectedTemplate.Id, _editName.Trim(), _editDescription?.Trim(),
+                _editParentId == 0 ? null : _editParentId, user);
+
+            if (result.IsSuccess)
+            {
+                _toast.ShowSuccess("Template properties updated.");
+                _selectedTemplate = result.Value;
+            }
+            else
+            {
+                _toast.ShowError(result.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Update failed: {ex.Message}");
+        }
+    }
+
+    private async Task RunValidation()
+    {
+        if (_selectedTemplate == null) return;
+        _validating = true;
+        _validationResult = null;
+        try
+        {
+            var validationService = new ValidationService();
+            var flatConfig = new Commons.Types.Flattening.FlattenedConfiguration
+            {
+                InstanceUniqueName = $"validation-{_selectedTemplate.Name}",
+                TemplateId = _selectedTemplate.Id,
+                Attributes = _attributes.Select(a => new Commons.Types.Flattening.ResolvedAttribute
+                {
+                    CanonicalName = a.Name,
+                    Value = a.Value,
+                    DataType = a.DataType.ToString(),
+                    IsLocked = a.IsLocked,
+                    DataSourceReference = a.DataSourceReference
+                }).ToList(),
+                Alarms = _alarms.Select(a => new Commons.Types.Flattening.ResolvedAlarm
+                {
+                    CanonicalName = a.Name,
+                    PriorityLevel = a.PriorityLevel,
+                    IsLocked = a.IsLocked,
+                    TriggerType = a.TriggerType.ToString(),
+                    TriggerConfiguration = a.TriggerConfiguration
+                }).ToList(),
+                Scripts = _scripts.Select(s => new Commons.Types.Flattening.ResolvedScript
+                {
+                    CanonicalName = s.Name,
+                    Code = s.Code,
+                    IsLocked = s.IsLocked,
+                    TriggerType = s.TriggerType,
+                    TriggerConfiguration = s.TriggerConfiguration,
+                    ParameterDefinitions = s.ParameterDefinitions,
+                    ReturnDefinition = s.ReturnDefinition
+                }).ToList()
+            };
+            _validationResult = validationService.Validate(flatConfig);
+
+            var collisions = await TemplateService.DetectCollisionsAsync(_selectedTemplate.Id);
+            if (collisions.Count > 0)
+            {
+                var collisionErrors = collisions.Select(c =>
+                    Commons.Types.Flattening.ValidationEntry.Error(
+                        Commons.Types.Flattening.ValidationCategory.NamingCollision, c)).ToArray();
+                var collisionResult = new Commons.Types.Flattening.ValidationResult { Errors = collisionErrors };
+                _validationResult = Commons.Types.Flattening.ValidationResult.Merge(_validationResult, collisionResult);
+            }
+        }
+        catch (Exception ex)
+        {
+            _toast.ShowError($"Validation error: {ex.Message}");
+        }
+        _validating = false;
+    }
+
+    // ---- Attributes Tab ----
+    private RenderFragment RenderAttributesTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Attributes</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showAttrForm = true; _attrFormError = null; _attrName = string.Empty; _attrValue = null; _attrIsLocked = false; _attrDataSourceRef = null; }">Add Attribute</button>
+        </div>
+
+        @if (_showAttrForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-2">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Data Type</label>
+                            <select class="form-select form-select-sm" @bind="_attrDataType">
+                                @foreach (var dt in Enum.GetValues<DataType>())
+                                {
+                                    <option value="@dt">@dt</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Value</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrValue" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Data Source Ref</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_attrDataSourceRef" placeholder="Tag path" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" @bind="_attrIsLocked" id="attrLocked" />
+                                <label class="form-check-label small" for="attrLocked">Locked</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddAttribute">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAttrForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_attrFormError != null) { <div class="text-danger small mt-1">@_attrFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th>Value</th>
+                    <th>Data Source</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var attr in _attributes)
+                {
+                    <tr>
+                        <td>@attr.Name</td>
+                        <td><span class="badge bg-light text-dark">@attr.DataType</span></td>
+                        <td class="small">@(attr.Value ?? "—")</td>
+                        <td class="small text-muted">@(attr.DataSourceReference ?? "—")</td>
+                        <td>
+                            @if (attr.IsLocked)
+                            {
+                                <span class="badge bg-danger" title="Locked">L</span>
+                            }
+                            else
+                            {
+                                <span class="badge bg-light text-dark" title="Unlocked">U</span>
+                            }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteAttribute(attr)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Alarms Tab ----
+    private RenderFragment RenderAlarmsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Alarms</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showAlarmForm = true; _alarmFormError = null; _alarmName = string.Empty; _alarmPriority = 500; _alarmTriggerConfig = null; _alarmIsLocked = false; }">Add Alarm</button>
+        </div>
+
+        @if (_showAlarmForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-2">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_alarmName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Trigger Type</label>
+                            <select class="form-select form-select-sm" @bind="_alarmTriggerType">
+                                @foreach (var tt in Enum.GetValues<AlarmTriggerType>())
+                                {
+                                    <option value="@tt">@tt</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-1">
+                            <label class="form-label small">Priority</label>
+                            <input type="number" class="form-control form-control-sm" @bind="_alarmPriority" min="0" max="1000" />
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_alarmTriggerConfig" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" @bind="_alarmIsLocked" id="alarmLocked" />
+                                <label class="form-check-label small" for="alarmLocked">Locked</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddAlarm">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAlarmForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_alarmFormError != null) { <div class="text-danger small mt-1">@_alarmFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Trigger</th>
+                    <th>Priority</th>
+                    <th>Config</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var alarm in _alarms)
+                {
+                    <tr>
+                        <td>@alarm.Name</td>
+                        <td><span class="badge bg-light text-dark">@alarm.TriggerType</span></td>
+                        <td>@alarm.PriorityLevel</td>
+                        <td class="small text-muted text-truncate" style="max-width: 200px;">@(alarm.TriggerConfiguration ?? "—")</td>
+                        <td>
+                            @if (alarm.IsLocked) { <span class="badge bg-danger">L</span> }
+                            else { <span class="badge bg-light text-dark">U</span> }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteAlarm(alarm)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Scripts Tab ----
+    private RenderFragment RenderScriptsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Scripts</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showScriptForm = true; _scriptFormError = null; _scriptName = string.Empty; _scriptCode = string.Empty; _scriptTriggerType = null; _scriptTriggerConfig = null; _scriptIsLocked = false; }">Add Script</button>
+        </div>
+
+        @if (_showScriptForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2">
+                        <div class="col-md-3">
+                            <label class="form-label small">Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptName" />
+                        </div>
+                        <div class="col-md-2">
+                            <label class="form-label small">Trigger Type</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
+                        </div>
+                        <div class="col-md-3">
+                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerConfig" />
+                        </div>
+                        <div class="col-md-1">
+                            <div class="form-check mt-4">
+                                <input class="form-check-input" type="checkbox" @bind="_scriptIsLocked" id="scriptLocked" />
+                                <label class="form-check-label small" for="scriptLocked">Locked</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <label class="form-label small">Code</label>
+                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_scriptCode"
+                                  style="font-size: 0.8rem;"></textarea>
+                    </div>
+                    <div class="mt-2">
+                        <button class="btn btn-success btn-sm me-1" @onclick="AddScript">Add</button>
+                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showScriptForm = false">Cancel</button>
+                    </div>
+                    @if (_scriptFormError != null) { <div class="text-danger small mt-1">@_scriptFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Name</th>
+                    <th>Trigger</th>
+                    <th>Code (preview)</th>
+                    <th>Lock</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var script in _scripts)
+                {
+                    <tr>
+                        <td>@script.Name</td>
+                        <td class="small">@(script.TriggerType ?? "—")</td>
+                        <td class="small text-muted text-truncate font-monospace" style="max-width: 300px;">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
+                        <td>
+                            @if (script.IsLocked) { <span class="badge bg-danger">L</span> }
+                            else { <span class="badge bg-light text-dark">U</span> }
+                        </td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteScript(script)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- Compositions Tab ----
+    private RenderFragment RenderCompositionsTab() => __builder =>
+    {
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <h6 class="mb-0">Compositions</h6>
+            <button class="btn btn-primary btn-sm" @onclick="() => { _showCompForm = true; _compFormError = null; _compInstanceName = string.Empty; _compComposedTemplateId = 0; }">Add Composition</button>
+        </div>
+
+        @if (_showCompForm)
+        {
+            <div class="card mb-2">
+                <div class="card-body">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-md-3">
+                            <label class="form-label small">Instance Name</label>
+                            <input type="text" class="form-control form-control-sm" @bind="_compInstanceName" />
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label small">Composed Template</label>
+                            <select class="form-select form-select-sm" @bind="_compComposedTemplateId">
+                                <option value="0">Select template...</option>
+                                @foreach (var t in _templates.Where(t => _selectedTemplate == null || t.Id != _selectedTemplate.Id))
+                                {
+                                    <option value="@t.Id">@t.Name</option>
+                                }
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-success btn-sm me-1" @onclick="AddComposition">Add</button>
+                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showCompForm = false">Cancel</button>
+                        </div>
+                    </div>
+                    @if (_compFormError != null) { <div class="text-danger small mt-1">@_compFormError</div> }
+                </div>
+            </div>
+        }
+
+        <table class="table table-sm table-striped">
+            <thead class="table-light">
+                <tr>
+                    <th>Instance Name</th>
+                    <th>Composed Template</th>
+                    <th style="width: 80px;">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (var comp in _compositions)
+                {
+                    <tr>
+                        <td><code>@comp.InstanceName</code></td>
+                        <td>@(_templates.FirstOrDefault(t => t.Id == comp.ComposedTemplateId)?.Name ?? $"#{comp.ComposedTemplateId}")</td>
+                        <td>
+                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                    @onclick="() => DeleteComposition(comp)">Delete</button>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    };
+
+    // ---- CRUD handlers ----
+
+    private async Task AddAttribute()
+    {
+        if (_selectedTemplate == null) return;
+        _attrFormError = null;
+        if (string.IsNullOrWhiteSpace(_attrName)) { _attrFormError = "Name is required."; return; }
+
+        var attr = new TemplateAttribute(_attrName.Trim())
+        {
+            DataType = _attrDataType,
+            Value = _attrValue?.Trim(),
+            IsLocked = _attrIsLocked,
+            DataSourceReference = _attrDataSourceRef?.Trim()
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddAttributeAsync(_selectedTemplate.Id, attr, user);
+        if (result.IsSuccess)
+        {
+            _showAttrForm = false;
+            _toast.ShowSuccess($"Attribute '{_attrName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _attrFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteAttribute(TemplateAttribute attr)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete attribute '{attr.Name}'?", "Delete Attribute");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteAttributeAsync(attr.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Attribute '{attr.Name}' deleted.");
+            await LoadAsync();
+        }
+        else
+        {
+            _toast.ShowError(result.Error);
+        }
+    }
+
+    private async Task AddAlarm()
+    {
+        if (_selectedTemplate == null) return;
+        _alarmFormError = null;
+        if (string.IsNullOrWhiteSpace(_alarmName)) { _alarmFormError = "Name is required."; return; }
+
+        var alarm = new TemplateAlarm(_alarmName.Trim())
+        {
+            TriggerType = _alarmTriggerType,
+            PriorityLevel = _alarmPriority,
+            TriggerConfiguration = _alarmTriggerConfig?.Trim(),
+            IsLocked = _alarmIsLocked
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddAlarmAsync(_selectedTemplate.Id, alarm, user);
+        if (result.IsSuccess)
+        {
+            _showAlarmForm = false;
+            _toast.ShowSuccess($"Alarm '{_alarmName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _alarmFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteAlarm(TemplateAlarm alarm)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete alarm '{alarm.Name}'?", "Delete Alarm");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteAlarmAsync(alarm.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Alarm '{alarm.Name}' deleted.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+
+    private async Task AddScript()
+    {
+        if (_selectedTemplate == null) return;
+        _scriptFormError = null;
+        if (string.IsNullOrWhiteSpace(_scriptName)) { _scriptFormError = "Name is required."; return; }
+        if (string.IsNullOrWhiteSpace(_scriptCode)) { _scriptFormError = "Code is required."; return; }
+
+        var script = new TemplateScript(_scriptName.Trim(), _scriptCode)
+        {
+            TriggerType = _scriptTriggerType?.Trim(),
+            TriggerConfiguration = _scriptTriggerConfig?.Trim(),
+            IsLocked = _scriptIsLocked
+        };
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddScriptAsync(_selectedTemplate.Id, script, user);
+        if (result.IsSuccess)
+        {
+            _showScriptForm = false;
+            _toast.ShowSuccess($"Script '{_scriptName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _scriptFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteScript(TemplateScript script)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Delete script '{script.Name}'?", "Delete Script");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteScriptAsync(script.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Script '{script.Name}' deleted.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+
+    private async Task AddComposition()
+    {
+        if (_selectedTemplate == null) return;
+        _compFormError = null;
+        if (string.IsNullOrWhiteSpace(_compInstanceName)) { _compFormError = "Instance name is required."; return; }
+        if (_compComposedTemplateId == 0) { _compFormError = "Select a template."; return; }
+
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.AddCompositionAsync(
+            _selectedTemplate.Id, _compComposedTemplateId, _compInstanceName.Trim(), user);
+        if (result.IsSuccess)
+        {
+            _showCompForm = false;
+            _toast.ShowSuccess($"Composition '{_compInstanceName}' added.");
+            await LoadAsync();
+        }
+        else
+        {
+            _compFormError = result.Error;
+        }
+    }
+
+    private async Task DeleteComposition(TemplateComposition comp)
+    {
+        var confirmed = await _confirmDialog.ShowAsync($"Remove composition '{comp.InstanceName}'?", "Delete Composition");
+        if (!confirmed) return;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateService.DeleteCompositionAsync(comp.Id, user);
+        if (result.IsSuccess)
+        {
+            _toast.ShowSuccess($"Composition '{comp.InstanceName}' removed.");
+            await LoadAsync();
+        }
+        else { _toast.ShowError(result.Error); }
+    }
+}
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor b/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
index b02bc59..64079ac 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor
@@ -1,13 +1,9 @@
 @page "/design/templates"
-@page "/design/templates/{TemplateIdParam:int}"
 @using ScadaLink.Security
 @using ScadaLink.Commons.Entities.Templates
 @using ScadaLink.Commons.Interfaces.Repositories
-@using ScadaLink.Commons.Types.Enums
 @using ScadaLink.TemplateEngine
 @using ScadaLink.TemplateEngine.Services
-@using ScadaLink.TemplateEngine.Validation
-@using ScadaLink.TemplateEngine.Flattening
 @attribute [Authorize(Policy = AuthorizationPolicies.RequireDesign)]
 @inject ITemplateEngineRepository TemplateEngineRepository
 @inject TemplateService TemplateService
@@ -30,11 +26,6 @@
                      ErrorMessage="@_newFolderError"
                      OnSubmit="SubmitNewFolder" />
 
-    <NewTemplateDialog @bind-IsVisible="_showNewTemplateDialog"
-                       FolderId="_newTemplateFolderId"
-                       ErrorMessage="@_newTemplateError"
-                       OnSubmit="SubmitNewTemplate" />
-
     <MoveTemplateDialog @bind-IsVisible="_showMoveTemplateDialog"
                         TemplateId="_moveTemplateId"
                         TemplateName="@_moveTemplateName"
@@ -42,6 +33,13 @@
                         ErrorMessage="@_moveTemplateError"
                         OnSubmit="SubmitMoveTemplate" />
 
+    <MoveFolderDialog @bind-IsVisible="_showMoveFolderDialog"
+                      FolderId="_moveFolderId"
+                      FolderName="@_moveFolderName"
+                      FolderOptions="EnumerateFolderOptionsExcluding(_moveFolderId)"
+                      ErrorMessage="@_moveFolderError"
+                      OnSubmit="SubmitMoveFolder" />
+
     @if (_loading)
     {
         <LoadingSpinner IsLoading="true" />
@@ -52,55 +50,34 @@
     }
     else
     {
-        <div class="row g-2">
-            <div class="col-md-4 col-lg-3">
-                <h6 class="mb-2">Templates</h6>
-                <div class="btn-group btn-group-sm w-100 mb-2">
-                    <button class="btn btn-outline-secondary" title="New folder at root"
-                            @onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
-                    <button class="btn btn-outline-secondary" title="New template at root"
-                            @onclick="() => OpenNewTemplateDialog(null)">+ Template</button>
-                    <button class="btn btn-outline-secondary" @onclick="() => _tree.ExpandAll()">Expand</button>
-                    <button class="btn btn-outline-secondary" @onclick="() => _tree.CollapseAll()">Collapse</button>
-                </div>
+        <h6 class="mb-2">Templates</h6>
+        <div class="btn-group btn-group-sm mb-2">
+            <button class="btn btn-outline-secondary" title="New folder at root"
+                    @onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
+            <button class="btn btn-outline-secondary" title="New template at root"
+                    @onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>+ Template</button>
+            <button class="btn btn-outline-secondary" @onclick="() => _tree.ExpandAll()">Expand</button>
+            <button class="btn btn-outline-secondary" @onclick="() => _tree.CollapseAll()">Collapse</button>
+        </div>
 
-                <div style="max-height: calc(100vh - 160px); overflow-y: auto;">
-                    <div class="templates-root-dropzone"
-                         @ondragover:preventDefault="true" @ondrop="OnDropOnRoot"
-                         style="min-height: 100%; padding: 4px;">
-                        <TreeView @ref="_tree" TItem="TmplNode" Items="_treeRoots"
-                                  ChildrenSelector="n => n.Children"
-                                  HasChildrenSelector="n => n.Kind != TmplNodeKind.Composition && n.Children.Count > 0"
-                                  KeySelector="n => (object)n.Key"
-                                  StorageKey="templates-tree"
-                                  Selectable="true"
-                                  SelectedKeyChanged="OnTreeNodeSelected">
-                            <NodeContent Context="node">
-                                @RenderNodeLabel(node)
-                            </NodeContent>
-                            <ContextMenu Context="node">
-                                @RenderNodeContextMenu(node)
-                            </ContextMenu>
-                            <EmptyContent>
-                                <span class="text-muted fst-italic">No templates yet. Use the buttons above to create a folder or template.</span>
-                            </EmptyContent>
-                        </TreeView>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-8 col-lg-9">
-                @if (_selectedTemplate == null)
-                {
-                    <div class="text-muted fst-italic mt-3">
-                        Select a template on the left to view or edit.
-                    </div>
-                }
-                else
-                {
-                    @RenderTemplateDetail()
-                }
-            </div>
+        <div style="max-height: calc(100vh - 160px); overflow-y: auto; padding: 4px;">
+            <TreeView @ref="_tree" TItem="TmplNode" Items="_treeRoots"
+                      ChildrenSelector="n => n.Children"
+                      HasChildrenSelector="n => n.Kind != TmplNodeKind.Composition && n.Children.Count > 0"
+                      KeySelector="n => (object)n.Key"
+                      StorageKey="templates-tree"
+                      Selectable="true"
+                      SelectedKeyChanged="OnTreeNodeSelected">
+                <NodeContent Context="node">
+                    @RenderNodeLabel(node)
+                </NodeContent>
+                <ContextMenu Context="node">
+                    @RenderNodeContextMenu(node)
+                </ContextMenu>
+                <EmptyContent>
+                    <span class="text-muted fst-italic">No templates yet. Use the buttons above to create a folder or template.</span>
+                </EmptyContent>
+            </TreeView>
         </div>
     }
 </div>
@@ -112,58 +89,11 @@
         return authState.User.FindFirst("Username")?.Value ?? "unknown";
     }
 
-    [Parameter] public int TemplateIdParam { get; set; }
-
     private List<Template> _templates = new();
     private List<TemplateFolder> _folders = new();
-    private Template? _selectedTemplate;
-    private List<TemplateAttribute> _attributes = new();
-    private List<TemplateAlarm> _alarms = new();
-    private List<TemplateScript> _scripts = new();
-    private List<TemplateComposition> _compositions = new();
 
     private bool _loading = true;
     private string? _errorMessage;
-    private string _activeTab = "attributes";
-
-    // Edit properties
-    private string _editName = string.Empty;
-    private string? _editDescription;
-    private int _editParentId;
-
-    // Validation
-    private bool _validating;
-    private Commons.Types.Flattening.ValidationResult? _validationResult;
-
-    // Member add forms
-    private bool _showAttrForm;
-    private string _attrName = string.Empty;
-    private string? _attrValue;
-    private DataType _attrDataType;
-    private bool _attrIsLocked;
-    private string? _attrDataSourceRef;
-    private string? _attrFormError;
-
-    private bool _showAlarmForm;
-    private string _alarmName = string.Empty;
-    private int _alarmPriority;
-    private AlarmTriggerType _alarmTriggerType;
-    private string? _alarmTriggerConfig;
-    private bool _alarmIsLocked;
-    private string? _alarmFormError;
-
-    private bool _showScriptForm;
-    private string _scriptName = string.Empty;
-    private string _scriptCode = string.Empty;
-    private string? _scriptTriggerType;
-    private string? _scriptTriggerConfig;
-    private bool _scriptIsLocked;
-    private string? _scriptFormError;
-
-    private bool _showCompForm;
-    private int _compComposedTemplateId;
-    private string _compInstanceName = string.Empty;
-    private string? _compFormError;
 
     private ToastNotification _toast = default!;
     private ConfirmDialog _confirmDialog = default!;
@@ -171,21 +101,6 @@
     protected override async Task OnInitializedAsync()
     {
         await LoadTemplatesAsync();
-        if (TemplateIdParam > 0)
-        {
-            await SelectTemplate(TemplateIdParam);
-        }
-    }
-
-    private bool _revealApplied;
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (!_revealApplied && TemplateIdParam > 0 && _tree != null)
-        {
-            _revealApplied = true;
-            await _tree.RevealNode($"t:{TemplateIdParam}", select: true);
-        }
     }
 
     private async Task LoadTemplatesAsync()
@@ -298,298 +213,59 @@
         });
     }
 
-    private async Task SelectTemplate(int templateId)
-    {
-        try
-        {
-            _selectedTemplate = await TemplateEngineRepository.GetTemplateWithChildrenAsync(templateId)
-                                ?? _templates.FirstOrDefault(t => t.Id == templateId);
-            if (_selectedTemplate == null) return;
-
-            _editName = _selectedTemplate.Name;
-            _editDescription = _selectedTemplate.Description;
-            _editParentId = _selectedTemplate.ParentTemplateId ?? 0;
-
-            _attributes = (await TemplateEngineRepository.GetAttributesByTemplateIdAsync(templateId)).ToList();
-            _alarms = (await TemplateEngineRepository.GetAlarmsByTemplateIdAsync(templateId)).ToList();
-            _scripts = (await TemplateEngineRepository.GetScriptsByTemplateIdAsync(templateId)).ToList();
-            _compositions = (await TemplateEngineRepository.GetCompositionsByTemplateIdAsync(templateId)).ToList();
-
-            _validationResult = null;
-        }
-        catch (Exception ex)
-        {
-            _toast.ShowError($"Failed to load template: {ex.Message}");
-        }
-    }
-
     private TreeView<TmplNode> _tree = default!;
 
-    // ---- Drag-and-drop state ----
-    private (TmplNodeKind kind, int id)? _dragPayload;
-    private string? _dragOverKey;
-
-    private void OnDragStart(TmplNode node)
-    {
-        if (node.Kind == TmplNodeKind.Composition) return;
-        _dragPayload = (node.Kind, node.EntityId);
-    }
-
-    private void OnDragEnd()
-    {
-        _dragPayload = null;
-        _dragOverKey = null;
-    }
-
-    private void OnDragEnter(TmplNode targetFolder)
-    {
-        if (_dragPayload == null) return;
-        if (targetFolder.Kind != TmplNodeKind.Folder) return;
-        _dragOverKey = targetFolder.Key;
-    }
-
-    private void OnDragLeave(TmplNode targetFolder)
-    {
-        if (_dragOverKey == targetFolder.Key) _dragOverKey = null;
-    }
-
-    private async Task OnDrop(TmplNode targetFolder)
-    {
-        if (_dragPayload is not { } payload) return;
-        if (targetFolder.Kind != TmplNodeKind.Folder) return;
-
-        var user = await GetCurrentUserAsync();
-        if (payload.kind == TmplNodeKind.Folder)
-        {
-            var result = await TemplateFolderService.MoveFolderAsync(payload.id, targetFolder.EntityId, user);
-            if (result.IsFailure) _toast.ShowError(result.Error);
-        }
-        else if (payload.kind == TmplNodeKind.Template)
-        {
-            var result = await TemplateService.MoveTemplateAsync(payload.id, targetFolder.EntityId, user);
-            if (result.IsFailure) _toast.ShowError(result.Error);
-        }
-
-        OnDragEnd();
-        await LoadTemplatesAsync();
-    }
-
-    private async Task OnDropOnRoot()
-    {
-        if (_dragPayload is not { } payload) return;
-
-        var user = await GetCurrentUserAsync();
-        if (payload.kind == TmplNodeKind.Folder)
-        {
-            var result = await TemplateFolderService.MoveFolderAsync(payload.id, null, user);
-            if (result.IsFailure) _toast.ShowError(result.Error);
-        }
-        else if (payload.kind == TmplNodeKind.Template)
-        {
-            var result = await TemplateService.MoveTemplateAsync(payload.id, null, user);
-            if (result.IsFailure) _toast.ShowError(result.Error);
-        }
-
-        OnDragEnd();
-        await LoadTemplatesAsync();
-    }
-
-    private RenderFragment RenderTemplateDetail() => __builder =>
-    {
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <div>
-                <h4 class="d-inline mb-0">@_selectedTemplate!.Name</h4>
-                @if (_selectedTemplate.ParentTemplateId.HasValue)
-                {
-                    <span class="text-muted ms-2">inherits @(_templates.FirstOrDefault(t => t.Id == _selectedTemplate.ParentTemplateId)?.Name)</span>
-                }
-            </div>
-            <div>
-                <button class="btn btn-outline-info btn-sm me-1" @onclick="RunValidation" disabled="@_validating">
-                    @if (_validating)
-                    {
-                        <span class="spinner-border spinner-border-sm me-1"></span>
-                    }
-                    Validate
-                </button>
-            </div>
-        </div>
-
-        @* Validation results *@
-        @if (_validationResult != null)
-        {
-            <div class="mb-3">
-                @if (_validationResult.Errors.Count > 0)
-                {
-                    <div class="alert alert-danger py-2">
-                        <strong>Validation Errors (@_validationResult.Errors.Count)</strong>
-                        <ul class="mb-0 small">
-                            @foreach (var err in _validationResult.Errors)
-                            {
-                                <li>[@err.Category] @err.Message @(err.EntityName != null ? $"({err.EntityName})" : "")</li>
-                            }
-                        </ul>
-                    </div>
-                }
-                @if (_validationResult.Warnings.Count > 0)
-                {
-                    <div class="alert alert-warning py-2">
-                        <strong>Warnings (@_validationResult.Warnings.Count)</strong>
-                        <ul class="mb-0 small">
-                            @foreach (var warn in _validationResult.Warnings)
-                            {
-                                <li>[@warn.Category] @warn.Message</li>
-                            }
-                        </ul>
-                    </div>
-                }
-                @if (_validationResult.Errors.Count == 0 && _validationResult.Warnings.Count == 0)
-                {
-                    <div class="alert alert-success py-2">Validation passed with no errors or warnings.</div>
-                }
-            </div>
-        }
-
-        @* Template info edit *@
-        <div class="card mb-3">
-            <div class="card-header">Template Properties</div>
-            <div class="card-body">
-                <div class="row g-2 align-items-end">
-                    <div class="col-md-3">
-                        <label class="form-label small">Name</label>
-                        <input type="text" class="form-control form-control-sm" @bind="_editName" />
-                    </div>
-                    <div class="col-md-4">
-                        <label class="form-label small">Description</label>
-                        <input type="text" class="form-control form-control-sm" @bind="_editDescription" />
-                    </div>
-                    <div class="col-md-3">
-                        <label class="form-label small">Parent Template</label>
-                        <select class="form-select form-select-sm" @bind="_editParentId">
-                            <option value="0">(None)</option>
-                            @foreach (var t in _templates.Where(t => t.Id != _selectedTemplate.Id))
-                            {
-                                <option value="@t.Id">@t.Name</option>
-                            }
-                        </select>
-                    </div>
-                    <div class="col-md-2">
-                        <button class="btn btn-primary btn-sm" @onclick="UpdateTemplateProperties">Save Properties</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        @* Tabs: Attributes, Alarms, Scripts, Compositions *@
-        <ul class="nav nav-tabs mb-3">
-            <li class="nav-item">
-                <button class="nav-link @(_activeTab == "attributes" ? "active" : "")" @onclick='() => _activeTab = "attributes"'>
-                    Attributes <span class="badge bg-secondary">@_attributes.Count</span>
-                </button>
-            </li>
-            <li class="nav-item">
-                <button class="nav-link @(_activeTab == "alarms" ? "active" : "")" @onclick='() => _activeTab = "alarms"'>
-                    Alarms <span class="badge bg-secondary">@_alarms.Count</span>
-                </button>
-            </li>
-            <li class="nav-item">
-                <button class="nav-link @(_activeTab == "scripts" ? "active" : "")" @onclick='() => _activeTab = "scripts"'>
-                    Scripts <span class="badge bg-secondary">@_scripts.Count</span>
-                </button>
-            </li>
-            <li class="nav-item">
-                <button class="nav-link @(_activeTab == "compositions" ? "active" : "")" @onclick='() => _activeTab = "compositions"'>
-                    Compositions <span class="badge bg-secondary">@_compositions.Count</span>
-                </button>
-            </li>
-        </ul>
-
-        @if (_activeTab == "attributes")
-        {
-            @RenderAttributesTab()
-        }
-        else if (_activeTab == "alarms")
-        {
-            @RenderAlarmsTab()
-        }
-        else if (_activeTab == "scripts")
-        {
-            @RenderScriptsTab()
-        }
-        else if (_activeTab == "compositions")
-        {
-            @RenderCompositionsTab()
-        }
-    };
-
     private RenderFragment RenderNodeLabel(TmplNode node) => __builder =>
     {
-        var draggable = node.Kind != TmplNodeKind.Composition;
-        var isDropTarget = node.Kind == TmplNodeKind.Folder;
-        var classes = "d-inline-block " + (_dragOverKey == node.Key ? "bg-info bg-opacity-25" : "");
-        var style = node.Kind == TmplNodeKind.Composition && _dragPayload != null
-            ? "opacity: 0.5;" : "";
-
-        <div class="@classes" style="@style"
-             draggable="@(draggable ? "true" : "false")"
-             @ondragstart="() => OnDragStart(node)"
-             @ondragend="OnDragEnd"
-             @ondragenter="() => OnDragEnter(node)"
-             @ondragleave="() => OnDragLeave(node)"
-             @ondragover:preventDefault="@isDropTarget"
-             @ondrop="() => OnDrop(node)"
-             @ondrop:stopPropagation="true">
-            @switch (node.Kind)
-            {
-                case TmplNodeKind.Folder:
-                    <span class="me-1">📁</span>
-                    <span>@node.Label</span>
-                    <span class="badge bg-light text-dark ms-2">@node.Children.Count</span>
-                    break;
-                case TmplNodeKind.Template:
-                    <strong>@node.Label</strong>
-                    if (node.Template?.ParentTemplateId is int pid)
-                    {
-                        <span class="text-muted small ms-1">inherits @(_templates.FirstOrDefault(t => t.Id == pid)?.Name)</span>
-                    }
-                    <span class="badge bg-light text-dark ms-2">
-                        @node.Template!.Attributes.Count attr,
-                        @node.Template.Alarms.Count alm,
-                        @node.Template.Scripts.Count scr
+        switch (node.Kind)
+        {
+            case TmplNodeKind.Folder:
+                var folderOpen = _tree?.IsExpanded(node.Key) ?? false;
+                <span class="tv-glyph"><i class="bi @(folderOpen ? "bi-folder2-open" : "bi-folder")"></i></span>
+                <span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
+                      title="@node.Label">@node.Label</span>
+                @if (node.Children.Count > 0)
+                {
+                    <span class="tv-meta">
+                        <span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">@node.Children.Count</span>
                     </span>
-                    if (node.Template.Compositions.Count > 0)
-                    {
-                        <span class="badge bg-info text-dark ms-1">@node.Template.Compositions.Count comp</span>
-                    }
-                    break;
-                case TmplNodeKind.Composition:
-                    var composedName = _templates.FirstOrDefault(t => t.Id == node.Composition!.ComposedTemplateId)?.Name
-                                       ?? $"#{node.Composition!.ComposedTemplateId}";
-                    <span>@node.Label</span>
+                }
+                break;
+
+            case TmplNodeKind.Template:
+                <span class="tv-glyph"><i class="bi bi-file-earmark-text"></i></span>
+                <span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
+                      title="@node.Label">@node.Label</span>
+                break;
+
+            case TmplNodeKind.Composition:
+                var composedName = _templates.FirstOrDefault(t => t.Id == node.Composition!.ComposedTemplateId)?.Name
+                                   ?? $"#{node.Composition!.ComposedTemplateId}";
+                <span class="tv-glyph"><i class="bi bi-arrow-return-right"></i></span>
+                <span class="tv-label" title="@node.Label">
+                    @node.Label
                     <span class="text-muted small ms-1">→ @composedName</span>
-                    break;
-            }
-        </div>
+                </span>
+                break;
+        }
     };
 
-    private async Task OnTreeNodeSelected(object? key)
+    private void OnTreeNodeSelected(object? key)
     {
         if (key is not string s) return;
         if (s.StartsWith("t:") && int.TryParse(s[2..], out var tid))
         {
-            await SelectTemplate(tid);
+            NavigationManager.NavigateTo($"/design/templates/{tid}");
         }
         else if (s.StartsWith("c:") && int.TryParse(s[2..], out var cid))
         {
             var comp = _templates.SelectMany(t => t.Compositions).FirstOrDefault(c => c.Id == cid);
             if (comp != null)
             {
-                // Reveal + select the composed template.
-                await _tree.RevealNode($"t:{comp.ComposedTemplateId}", select: true);
-                await SelectTemplate(comp.ComposedTemplateId);
+                NavigationManager.NavigateTo($"/design/templates/{comp.ComposedTemplateId}");
             }
         }
-        // Folder selection: no-op (Section 4 design — folder click does not load detail).
+        // Folder selection is intentionally a no-op (use right-click for folder actions).
     }
 
     private RenderFragment RenderNodeContextMenu(TmplNode node) => __builder =>
@@ -598,23 +274,21 @@
         {
             case TmplNodeKind.Folder:
                 <button class="dropdown-item" @onclick="() => OpenNewFolderDialog(node.EntityId)">New Folder</button>
-                <button class="dropdown-item" @onclick="() => OpenNewTemplateDialog(node.EntityId)">New Template</button>
+                <button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/create?folderId={node.EntityId}")'>New Template</button>
                 <button class="dropdown-item" @onclick="() => OpenRenameFolderDialog(node.EntityId, node.Label)">Rename</button>
+                <button class="dropdown-item" @onclick="() => OpenMoveFolderDialog(node.EntityId, node.Label)">Move to Folder…</button>
                 <div class="dropdown-divider"></div>
                 <button class="dropdown-item text-danger" @onclick="() => DeleteFolder(node.EntityId, node.Label)">Delete</button>
                 break;
 
             case TmplNodeKind.Template:
-                <button class="dropdown-item" @onclick="() => SelectTemplate(node.EntityId)">Edit</button>
                 <button class="dropdown-item" @onclick="() => OpenMoveTemplateDialog(node.EntityId, node.Label)">Move to Folder…</button>
                 <div class="dropdown-divider"></div>
                 <button class="dropdown-item text-danger" @onclick="() => DeleteTemplate(node.Template!)">Delete</button>
                 break;
 
             case TmplNodeKind.Composition:
-                var composedKey = $"t:{node.Composition!.ComposedTemplateId}";
-                <button class="dropdown-item" @onclick="() => OnTreeNodeSelected(composedKey)">Open composed template</button>
-                <button class="dropdown-item text-danger" @onclick="() => DeleteComposition(node.Composition)">Remove composition</button>
+                <button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/{node.Composition!.ComposedTemplateId}")'>Open composed template</button>
                 break;
         }
     };
@@ -648,37 +322,6 @@
         }
     }
 
-    // New-template dialog state
-    private bool _showNewTemplateDialog;
-    private int? _newTemplateFolderId;
-    private string? _newTemplateError;
-
-    private void OpenNewTemplateDialog(int? folderId)
-    {
-        _newTemplateFolderId = folderId;
-        _newTemplateError = null;
-        _showNewTemplateDialog = true;
-    }
-
-    private async Task SubmitNewTemplate((int? FolderId, string Name, string? Description) req)
-    {
-        _newTemplateError = null;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.CreateTemplateAsync(
-            req.Name, req.Description, null, user, folderId: req.FolderId);
-        if (result.IsSuccess)
-        {
-            _showNewTemplateDialog = false;
-            _toast.ShowSuccess($"Template '{result.Value.Name}' created.");
-            await LoadTemplatesAsync();
-            await SelectTemplate(result.Value.Id);
-        }
-        else
-        {
-            _newTemplateError = result.Error;
-        }
-    }
-
     // Move-template dialog state
     private bool _showMoveTemplateDialog;
     private int _moveTemplateId;
@@ -714,20 +357,61 @@
     private IEnumerable<(int? Id, string Label)> EnumerateFolderOptions()
     {
         yield return (null, "(Root)");
-        foreach (var f in WalkFolderHierarchy(_folders.Where(f => f.ParentFolderId == null), 0))
+        foreach (var f in WalkFolderHierarchy(_folders.Where(f => f.ParentFolderId == null), 0, excludeFolderId: null))
             yield return f;
     }
 
-    private IEnumerable<(int? Id, string Label)> WalkFolderHierarchy(IEnumerable<TemplateFolder> level, int depth)
+    // Same as EnumerateFolderOptions, but prunes the given folder and all its descendants
+    // so the move dialog can't surface an obvious cycle target (server still validates).
+    private IEnumerable<(int? Id, string Label)> EnumerateFolderOptionsExcluding(int excludeFolderId)
+    {
+        yield return (null, "(Root)");
+        foreach (var f in WalkFolderHierarchy(_folders.Where(f => f.ParentFolderId == null), 0, excludeFolderId))
+            yield return f;
+    }
+
+    private IEnumerable<(int? Id, string Label)> WalkFolderHierarchy(IEnumerable<TemplateFolder> level, int depth, int? excludeFolderId)
     {
         foreach (var f in level.OrderBy(f => f.Name, StringComparer.OrdinalIgnoreCase))
         {
+            if (excludeFolderId.HasValue && f.Id == excludeFolderId.Value) continue;
             yield return ((int?)f.Id, new string(' ', depth * 2) + f.Name);
-            foreach (var sub in WalkFolderHierarchy(_folders.Where(c => c.ParentFolderId == f.Id), depth + 1))
+            foreach (var sub in WalkFolderHierarchy(_folders.Where(c => c.ParentFolderId == f.Id), depth + 1, excludeFolderId))
                 yield return sub;
         }
     }
 
+    // Move-folder dialog state
+    private bool _showMoveFolderDialog;
+    private int _moveFolderId;
+    private string _moveFolderName = string.Empty;
+    private string? _moveFolderError;
+
+    private void OpenMoveFolderDialog(int folderId, string label)
+    {
+        _moveFolderId = folderId;
+        _moveFolderName = label;
+        _moveFolderError = null;
+        _showMoveFolderDialog = true;
+    }
+
+    private async Task SubmitMoveFolder((int FolderId, int? NewParentId) req)
+    {
+        _moveFolderError = null;
+        var user = await GetCurrentUserAsync();
+        var result = await TemplateFolderService.MoveFolderAsync(req.FolderId, req.NewParentId, user);
+        if (result.IsSuccess)
+        {
+            _showMoveFolderDialog = false;
+            _toast.ShowSuccess($"Folder '{_moveFolderName}' moved.");
+            await LoadTemplatesAsync();
+        }
+        else
+        {
+            _moveFolderError = result.Error;
+        }
+    }
+
     // Rename folder dialog state
     private bool _showRenameFolderDialog;
     private int _renameFolderId;
@@ -803,570 +487,4 @@
             _toast.ShowError($"Delete failed: {ex.Message}");
         }
     }
-
-    private async Task UpdateTemplateProperties()
-    {
-        if (_selectedTemplate == null) return;
-        try
-        {
-            var user = await GetCurrentUserAsync();
-            var result = await TemplateService.UpdateTemplateAsync(
-                _selectedTemplate.Id, _editName.Trim(), _editDescription?.Trim(),
-                _editParentId == 0 ? null : _editParentId, user);
-
-            if (result.IsSuccess)
-            {
-                _toast.ShowSuccess("Template properties updated.");
-                await LoadTemplatesAsync();
-                _selectedTemplate = result.Value;
-            }
-            else
-            {
-                _toast.ShowError(result.Error);
-            }
-        }
-        catch (Exception ex)
-        {
-            _toast.ShowError($"Update failed: {ex.Message}");
-        }
-    }
-
-    private async Task RunValidation()
-    {
-        if (_selectedTemplate == null) return;
-        _validating = true;
-        _validationResult = null;
-        try
-        {
-            // Use the full validation pipeline via TemplateService
-            // This performs flattening, collision detection, script compilation,
-            // trigger reference validation, and connection binding checks
-            var validationService = new ValidationService();
-            var flatConfig = new Commons.Types.Flattening.FlattenedConfiguration
-            {
-                InstanceUniqueName = $"validation-{_selectedTemplate.Name}",
-                TemplateId = _selectedTemplate.Id,
-                Attributes = _attributes.Select(a => new Commons.Types.Flattening.ResolvedAttribute
-                {
-                    CanonicalName = a.Name,
-                    Value = a.Value,
-                    DataType = a.DataType.ToString(),
-                    IsLocked = a.IsLocked,
-                    DataSourceReference = a.DataSourceReference
-                }).ToList(),
-                Alarms = _alarms.Select(a => new Commons.Types.Flattening.ResolvedAlarm
-                {
-                    CanonicalName = a.Name,
-                    PriorityLevel = a.PriorityLevel,
-                    IsLocked = a.IsLocked,
-                    TriggerType = a.TriggerType.ToString(),
-                    TriggerConfiguration = a.TriggerConfiguration
-                }).ToList(),
-                Scripts = _scripts.Select(s => new Commons.Types.Flattening.ResolvedScript
-                {
-                    CanonicalName = s.Name,
-                    Code = s.Code,
-                    IsLocked = s.IsLocked,
-                    TriggerType = s.TriggerType,
-                    TriggerConfiguration = s.TriggerConfiguration,
-                    ParameterDefinitions = s.ParameterDefinitions,
-                    ReturnDefinition = s.ReturnDefinition
-                }).ToList()
-            };
-            _validationResult = validationService.Validate(flatConfig);
-
-            // Also check for naming collisions across the inheritance/composition graph
-            var collisions = await TemplateService.DetectCollisionsAsync(_selectedTemplate.Id);
-            if (collisions.Count > 0)
-            {
-                var collisionErrors = collisions.Select(c =>
-                    Commons.Types.Flattening.ValidationEntry.Error(
-                        Commons.Types.Flattening.ValidationCategory.NamingCollision, c)).ToArray();
-                var collisionResult = new Commons.Types.Flattening.ValidationResult { Errors = collisionErrors };
-                _validationResult = Commons.Types.Flattening.ValidationResult.Merge(_validationResult, collisionResult);
-            }
-        }
-        catch (Exception ex)
-        {
-            _toast.ShowError($"Validation error: {ex.Message}");
-        }
-        _validating = false;
-    }
-
-    // ---- Attributes Tab ----
-    private RenderFragment RenderAttributesTab() => __builder =>
-    {
-        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Attributes</h6>
-            <button class="btn btn-primary btn-sm" @onclick="() => { _showAttrForm = true; _attrFormError = null; _attrName = string.Empty; _attrValue = null; _attrIsLocked = false; _attrDataSourceRef = null; }">Add Attribute</button>
-        </div>
-
-        @if (_showAttrForm)
-        {
-            <div class="card mb-2">
-                <div class="card-body">
-                    <div class="row g-2 align-items-end">
-                        <div class="col-md-2">
-                            <label class="form-label small">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrName" />
-                        </div>
-                        <div class="col-md-2">
-                            <label class="form-label small">Data Type</label>
-                            <select class="form-select form-select-sm" @bind="_attrDataType">
-                                @foreach (var dt in Enum.GetValues<DataType>())
-                                {
-                                    <option value="@dt">@dt</option>
-                                }
-                            </select>
-                        </div>
-                        <div class="col-md-2">
-                            <label class="form-label small">Value</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrValue" />
-                        </div>
-                        <div class="col-md-2">
-                            <label class="form-label small">Data Source Ref</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrDataSourceRef" placeholder="Tag path" />
-                        </div>
-                        <div class="col-md-1">
-                            <div class="form-check">
-                                <input class="form-check-input" type="checkbox" @bind="_attrIsLocked" id="attrLocked" />
-                                <label class="form-check-label small" for="attrLocked">Locked</label>
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddAttribute">Add</button>
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAttrForm = false">Cancel</button>
-                        </div>
-                    </div>
-                    @if (_attrFormError != null) { <div class="text-danger small mt-1">@_attrFormError</div> }
-                </div>
-            </div>
-        }
-
-        <table class="table table-sm table-striped">
-            <thead class="table-light">
-                <tr>
-                    <th>Name</th>
-                    <th>Type</th>
-                    <th>Value</th>
-                    <th>Data Source</th>
-                    <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var attr in _attributes)
-                {
-                    <tr>
-                        <td>@attr.Name</td>
-                        <td><span class="badge bg-light text-dark">@attr.DataType</span></td>
-                        <td class="small">@(attr.Value ?? "—")</td>
-                        <td class="small text-muted">@(attr.DataSourceReference ?? "—")</td>
-                        <td>
-                            @if (attr.IsLocked)
-                            {
-                                <span class="badge bg-danger" title="Locked">L</span>
-                            }
-                            else
-                            {
-                                <span class="badge bg-light text-dark" title="Unlocked">U</span>
-                            }
-                        </td>
-                        <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                    @onclick="() => DeleteAttribute(attr)">Delete</button>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    };
-
-    // ---- Alarms Tab ----
-    private RenderFragment RenderAlarmsTab() => __builder =>
-    {
-        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Alarms</h6>
-            <button class="btn btn-primary btn-sm" @onclick="() => { _showAlarmForm = true; _alarmFormError = null; _alarmName = string.Empty; _alarmPriority = 500; _alarmTriggerConfig = null; _alarmIsLocked = false; }">Add Alarm</button>
-        </div>
-
-        @if (_showAlarmForm)
-        {
-            <div class="card mb-2">
-                <div class="card-body">
-                    <div class="row g-2 align-items-end">
-                        <div class="col-md-2">
-                            <label class="form-label small">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_alarmName" />
-                        </div>
-                        <div class="col-md-2">
-                            <label class="form-label small">Trigger Type</label>
-                            <select class="form-select form-select-sm" @bind="_alarmTriggerType">
-                                @foreach (var tt in Enum.GetValues<AlarmTriggerType>())
-                                {
-                                    <option value="@tt">@tt</option>
-                                }
-                            </select>
-                        </div>
-                        <div class="col-md-1">
-                            <label class="form-label small">Priority</label>
-                            <input type="number" class="form-control form-control-sm" @bind="_alarmPriority" min="0" max="1000" />
-                        </div>
-                        <div class="col-md-3">
-                            <label class="form-label small">Trigger Config (JSON)</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_alarmTriggerConfig" />
-                        </div>
-                        <div class="col-md-1">
-                            <div class="form-check">
-                                <input class="form-check-input" type="checkbox" @bind="_alarmIsLocked" id="alarmLocked" />
-                                <label class="form-check-label small" for="alarmLocked">Locked</label>
-                            </div>
-                        </div>
-                        <div class="col-md-3">
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddAlarm">Add</button>
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAlarmForm = false">Cancel</button>
-                        </div>
-                    </div>
-                    @if (_alarmFormError != null) { <div class="text-danger small mt-1">@_alarmFormError</div> }
-                </div>
-            </div>
-        }
-
-        <table class="table table-sm table-striped">
-            <thead class="table-light">
-                <tr>
-                    <th>Name</th>
-                    <th>Trigger</th>
-                    <th>Priority</th>
-                    <th>Config</th>
-                    <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var alarm in _alarms)
-                {
-                    <tr>
-                        <td>@alarm.Name</td>
-                        <td><span class="badge bg-light text-dark">@alarm.TriggerType</span></td>
-                        <td>@alarm.PriorityLevel</td>
-                        <td class="small text-muted text-truncate" style="max-width: 200px;">@(alarm.TriggerConfiguration ?? "—")</td>
-                        <td>
-                            @if (alarm.IsLocked) { <span class="badge bg-danger">L</span> }
-                            else { <span class="badge bg-light text-dark">U</span> }
-                        </td>
-                        <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                    @onclick="() => DeleteAlarm(alarm)">Delete</button>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    };
-
-    // ---- Scripts Tab ----
-    private RenderFragment RenderScriptsTab() => __builder =>
-    {
-        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Scripts</h6>
-            <button class="btn btn-primary btn-sm" @onclick="() => { _showScriptForm = true; _scriptFormError = null; _scriptName = string.Empty; _scriptCode = string.Empty; _scriptTriggerType = null; _scriptTriggerConfig = null; _scriptIsLocked = false; }">Add Script</button>
-        </div>
-
-        @if (_showScriptForm)
-        {
-            <div class="card mb-2">
-                <div class="card-body">
-                    <div class="row g-2">
-                        <div class="col-md-3">
-                            <label class="form-label small">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptName" />
-                        </div>
-                        <div class="col-md-2">
-                            <label class="form-label small">Trigger Type</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
-                        </div>
-                        <div class="col-md-3">
-                            <label class="form-label small">Trigger Config (JSON)</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerConfig" />
-                        </div>
-                        <div class="col-md-1">
-                            <div class="form-check mt-4">
-                                <input class="form-check-input" type="checkbox" @bind="_scriptIsLocked" id="scriptLocked" />
-                                <label class="form-check-label small" for="scriptLocked">Locked</label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-2">
-                        <label class="form-label small">Code</label>
-                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_scriptCode"
-                                  style="font-size: 0.8rem;"></textarea>
-                    </div>
-                    <div class="mt-2">
-                        <button class="btn btn-success btn-sm me-1" @onclick="AddScript">Add</button>
-                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showScriptForm = false">Cancel</button>
-                    </div>
-                    @if (_scriptFormError != null) { <div class="text-danger small mt-1">@_scriptFormError</div> }
-                </div>
-            </div>
-        }
-
-        <table class="table table-sm table-striped">
-            <thead class="table-light">
-                <tr>
-                    <th>Name</th>
-                    <th>Trigger</th>
-                    <th>Code (preview)</th>
-                    <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var script in _scripts)
-                {
-                    <tr>
-                        <td>@script.Name</td>
-                        <td class="small">@(script.TriggerType ?? "—")</td>
-                        <td class="small text-muted text-truncate font-monospace" style="max-width: 300px;">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
-                        <td>
-                            @if (script.IsLocked) { <span class="badge bg-danger">L</span> }
-                            else { <span class="badge bg-light text-dark">U</span> }
-                        </td>
-                        <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                    @onclick="() => DeleteScript(script)">Delete</button>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    };
-
-    // ---- Compositions Tab ----
-    private RenderFragment RenderCompositionsTab() => __builder =>
-    {
-        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Compositions</h6>
-            <button class="btn btn-primary btn-sm" @onclick="() => { _showCompForm = true; _compFormError = null; _compInstanceName = string.Empty; _compComposedTemplateId = 0; }">Add Composition</button>
-        </div>
-
-        @if (_showCompForm)
-        {
-            <div class="card mb-2">
-                <div class="card-body">
-                    <div class="row g-2 align-items-end">
-                        <div class="col-md-3">
-                            <label class="form-label small">Instance Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_compInstanceName" />
-                        </div>
-                        <div class="col-md-4">
-                            <label class="form-label small">Composed Template</label>
-                            <select class="form-select form-select-sm" @bind="_compComposedTemplateId">
-                                <option value="0">Select template...</option>
-                                @foreach (var t in _templates.Where(t => _selectedTemplate == null || t.Id != _selectedTemplate.Id))
-                                {
-                                    <option value="@t.Id">@t.Name</option>
-                                }
-                            </select>
-                        </div>
-                        <div class="col-md-3">
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddComposition">Add</button>
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showCompForm = false">Cancel</button>
-                        </div>
-                    </div>
-                    @if (_compFormError != null) { <div class="text-danger small mt-1">@_compFormError</div> }
-                </div>
-            </div>
-        }
-
-        <table class="table table-sm table-striped">
-            <thead class="table-light">
-                <tr>
-                    <th>Instance Name</th>
-                    <th>Composed Template</th>
-                    <th style="width: 80px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var comp in _compositions)
-                {
-                    <tr>
-                        <td><code>@comp.InstanceName</code></td>
-                        <td>@(_templates.FirstOrDefault(t => t.Id == comp.ComposedTemplateId)?.Name ?? $"#{comp.ComposedTemplateId}")</td>
-                        <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                    @onclick="() => DeleteComposition(comp)">Delete</button>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    };
-
-    // ---- CRUD handlers ----
-
-    private async Task AddAttribute()
-    {
-        if (_selectedTemplate == null) return;
-        _attrFormError = null;
-        if (string.IsNullOrWhiteSpace(_attrName)) { _attrFormError = "Name is required."; return; }
-
-        var attr = new TemplateAttribute(_attrName.Trim())
-        {
-            DataType = _attrDataType,
-            Value = _attrValue?.Trim(),
-            IsLocked = _attrIsLocked,
-            DataSourceReference = _attrDataSourceRef?.Trim()
-        };
-
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.AddAttributeAsync(_selectedTemplate.Id, attr, user);
-        if (result.IsSuccess)
-        {
-            _showAttrForm = false;
-            _toast.ShowSuccess($"Attribute '{_attrName}' added.");
-            await SelectTemplate(_selectedTemplate.Id);
-        }
-        else
-        {
-            _attrFormError = result.Error;
-        }
-    }
-
-    private async Task DeleteAttribute(TemplateAttribute attr)
-    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete attribute '{attr.Name}'?", "Delete Attribute");
-        if (!confirmed) return;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.DeleteAttributeAsync(attr.Id, user);
-        if (result.IsSuccess)
-        {
-            _toast.ShowSuccess($"Attribute '{attr.Name}' deleted.");
-            if (_selectedTemplate != null) await SelectTemplate(_selectedTemplate.Id);
-        }
-        else
-        {
-            _toast.ShowError(result.Error);
-        }
-    }
-
-    private async Task AddAlarm()
-    {
-        if (_selectedTemplate == null) return;
-        _alarmFormError = null;
-        if (string.IsNullOrWhiteSpace(_alarmName)) { _alarmFormError = "Name is required."; return; }
-
-        var alarm = new TemplateAlarm(_alarmName.Trim())
-        {
-            TriggerType = _alarmTriggerType,
-            PriorityLevel = _alarmPriority,
-            TriggerConfiguration = _alarmTriggerConfig?.Trim(),
-            IsLocked = _alarmIsLocked
-        };
-
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.AddAlarmAsync(_selectedTemplate.Id, alarm, user);
-        if (result.IsSuccess)
-        {
-            _showAlarmForm = false;
-            _toast.ShowSuccess($"Alarm '{_alarmName}' added.");
-            await SelectTemplate(_selectedTemplate.Id);
-        }
-        else
-        {
-            _alarmFormError = result.Error;
-        }
-    }
-
-    private async Task DeleteAlarm(TemplateAlarm alarm)
-    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete alarm '{alarm.Name}'?", "Delete Alarm");
-        if (!confirmed) return;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.DeleteAlarmAsync(alarm.Id, user);
-        if (result.IsSuccess)
-        {
-            _toast.ShowSuccess($"Alarm '{alarm.Name}' deleted.");
-            if (_selectedTemplate != null) await SelectTemplate(_selectedTemplate.Id);
-        }
-        else { _toast.ShowError(result.Error); }
-    }
-
-    private async Task AddScript()
-    {
-        if (_selectedTemplate == null) return;
-        _scriptFormError = null;
-        if (string.IsNullOrWhiteSpace(_scriptName)) { _scriptFormError = "Name is required."; return; }
-        if (string.IsNullOrWhiteSpace(_scriptCode)) { _scriptFormError = "Code is required."; return; }
-
-        var script = new TemplateScript(_scriptName.Trim(), _scriptCode)
-        {
-            TriggerType = _scriptTriggerType?.Trim(),
-            TriggerConfiguration = _scriptTriggerConfig?.Trim(),
-            IsLocked = _scriptIsLocked
-        };
-
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.AddScriptAsync(_selectedTemplate.Id, script, user);
-        if (result.IsSuccess)
-        {
-            _showScriptForm = false;
-            _toast.ShowSuccess($"Script '{_scriptName}' added.");
-            await SelectTemplate(_selectedTemplate.Id);
-        }
-        else
-        {
-            _scriptFormError = result.Error;
-        }
-    }
-
-    private async Task DeleteScript(TemplateScript script)
-    {
-        var confirmed = await _confirmDialog.ShowAsync($"Delete script '{script.Name}'?", "Delete Script");
-        if (!confirmed) return;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.DeleteScriptAsync(script.Id, user);
-        if (result.IsSuccess)
-        {
-            _toast.ShowSuccess($"Script '{script.Name}' deleted.");
-            if (_selectedTemplate != null) await SelectTemplate(_selectedTemplate.Id);
-        }
-        else { _toast.ShowError(result.Error); }
-    }
-
-    private async Task AddComposition()
-    {
-        if (_selectedTemplate == null) return;
-        _compFormError = null;
-        if (string.IsNullOrWhiteSpace(_compInstanceName)) { _compFormError = "Instance name is required."; return; }
-        if (_compComposedTemplateId == 0) { _compFormError = "Select a template."; return; }
-
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.AddCompositionAsync(
-            _selectedTemplate.Id, _compComposedTemplateId, _compInstanceName.Trim(), user);
-        if (result.IsSuccess)
-        {
-            _showCompForm = false;
-            _toast.ShowSuccess($"Composition '{_compInstanceName}' added.");
-            await SelectTemplate(_selectedTemplate.Id);
-        }
-        else
-        {
-            _compFormError = result.Error;
-        }
-    }
-
-    private async Task DeleteComposition(TemplateComposition comp)
-    {
-        var confirmed = await _confirmDialog.ShowAsync($"Remove composition '{comp.InstanceName}'?", "Delete Composition");
-        if (!confirmed) return;
-        var user = await GetCurrentUserAsync();
-        var result = await TemplateService.DeleteCompositionAsync(comp.Id, user);
-        if (result.IsSuccess)
-        {
-            _toast.ShowSuccess($"Composition '{comp.InstanceName}' removed.");
-            if (_selectedTemplate != null) await SelectTemplate(_selectedTemplate.Id);
-        }
-        else { _toast.ShowError(result.Error); }
-    }
 }
diff --git a/src/ScadaLink.CentralUI/Components/Shared/NewTemplateDialog.razor b/src/ScadaLink.CentralUI/Components/Shared/MoveFolderDialog.razor
similarity index 56%
rename from src/ScadaLink.CentralUI/Components/Shared/NewTemplateDialog.razor
rename to src/ScadaLink.CentralUI/Components/Shared/MoveFolderDialog.razor
index b0009d7..cb2d7a8 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/NewTemplateDialog.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/MoveFolderDialog.razor
@@ -4,23 +4,21 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h6 class="modal-title">New Template</h6>
+                    <h6 class="modal-title">Move '@FolderName' to…</h6>
                     <button type="button" class="btn-close" @onclick="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <div class="mb-2">
-                        <label class="form-label small">Name</label>
-                        <input class="form-control form-control-sm" @bind="_name" />
-                    </div>
-                    <div class="mb-2">
-                        <label class="form-label small">Description</label>
-                        <input class="form-control form-control-sm" @bind="_description" />
-                    </div>
+                    <select class="form-select form-select-sm" @bind="_targetParentId">
+                        @foreach (var opt in FolderOptions)
+                        {
+                            <option value="@opt.Id">@opt.Label</option>
+                        }
+                    </select>
                     @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
-                    <button class="btn btn-primary btn-sm" @onclick="Submit">Create</button>
+                    <button class="btn btn-primary btn-sm" @onclick="Submit">Move</button>
                 </div>
             </div>
         </div>
@@ -30,21 +28,20 @@
 @code {
     [Parameter] public bool IsVisible { get; set; }
     [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
-    [Parameter] public int? FolderId { get; set; }
+    [Parameter] public int FolderId { get; set; }
+    [Parameter] public string FolderName { get; set; } = string.Empty;
+    [Parameter] public IEnumerable<(int? Id, string Label)> FolderOptions { get; set; } = Array.Empty<(int?, string)>();
     [Parameter] public string? ErrorMessage { get; set; }
-    [Parameter] public EventCallback<(int? FolderId, string Name, string? Description)> OnSubmit { get; set; }
+    [Parameter] public EventCallback<(int FolderId, int? NewParentId)> OnSubmit { get; set; }
 
     private bool _wasVisible;
-    private string _name = string.Empty;
-    private string? _description;
+    private int? _targetParentId;
 
     protected override void OnParametersSet()
     {
-        // Reset internal state on transition from hidden -> visible.
         if (IsVisible && !_wasVisible)
         {
-            _name = string.Empty;
-            _description = null;
+            _targetParentId = null;
         }
         _wasVisible = IsVisible;
     }
@@ -56,6 +53,6 @@
 
     private async Task Submit()
     {
-        await OnSubmit.InvokeAsync((FolderId, _name.Trim(), _description?.Trim()));
+        await OnSubmit.InvokeAsync((FolderId, _targetParentId));
     }
 }
diff --git a/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor b/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor
index 67c1121..a7ef5b3 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor
@@ -11,7 +11,7 @@
 }
 else
 {
-    <ul role="tree" class="tv-root @(ShowGuideLines ? "tv-guides" : "")" style="list-style:none;padding-left:0;margin:0;">
+    <ul role="tree" class="tv-root @(ShowGuideLines ? "tv-guides" : "")">
         @foreach (var item in _items)
         {
             RenderNode(item, 0);
@@ -22,7 +22,8 @@ else
 @if (_showContextMenu && _contextMenuItem != null && ContextMenu != null)
 {
     <div class="tv-ctx-overlay" @onclick="DismissContextMenu" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1049;background:transparent;"></div>
-    <div class="dropdown-menu show" style="position:fixed;top:@(_contextMenuY)px;left:@(_contextMenuX)px;z-index:1050;">
+    <div class="dropdown-menu show" tabindex="-1" @ref="_contextMenuRef" @onkeydown="OnContextMenuKeyDown"
+         style="position:fixed;top:@(_contextMenuY)px;left:@(_contextMenuX)px;z-index:1050;outline:none;">
         @ContextMenu(_contextMenuItem)
     </div>
 }
@@ -33,19 +34,21 @@ else
         var children = ChildrenSelector(item);
         var isBranch = HasChildrenSelector(item);
         var isExpanded = _expandedKeys.Contains(KeyStr(key));
+        var isSelected = Selectable && SelectedKey != null && SelectedKey.Equals(key);
+        var rowClasses = "tv-row" + (isSelected ? " tv-selected " + SelectedCssClass : "");
 
         <li role="treeitem" @key="key"
             aria-expanded="@(isBranch ? (isExpanded ? "true" : "false") : null)"
-            aria-selected="@(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? "true" : null)">
-            <div class="tv-row @(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? SelectedCssClass : "")" style="padding-left: @(depth * IndentPx)px"
+            aria-selected="@(isSelected ? "true" : null)">
+            <div class="@rowClasses" style="padding-left: @(depth * IndentPx)px; --tv-depth: @depth;"
                 @oncontextmenu="(e) => OnContextMenu(e, item)" @oncontextmenu:preventDefault="@(ContextMenu != null)">
                 @if (isBranch)
                 {
-                    <span class="tv-toggle" style="display:inline-block;width:1.2em;text-align:center;cursor:pointer;" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation>@(isExpanded ? "\u2212" : "+")</span>
+                    <span class="tv-toggle" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation><i class="bi bi-chevron-right"></i></span>
                 }
                 else
                 {
-                    <span class="tv-spacer" style="display:inline-block;width:1.2em;"></span>
+                    <span class="tv-spacer"></span>
                 }
                 <span class="tv-content" @onclick="() => OnContentClick(key)" @onclick:stopPropagation>
                     @NodeContent(item)
@@ -53,7 +56,7 @@ else
             </div>
             @if (isBranch && isExpanded && children is { Count: > 0 })
             {
-                <ul role="group" style="list-style:none;padding-left:0;margin:0;">
+                <ul role="group">
                     @foreach (var child in children)
                     {
                         RenderNode(child, depth + 1);
@@ -76,6 +79,8 @@ else
     private double _contextMenuX;
     private double _contextMenuY;
     private bool _showContextMenu;
+    private bool _contextMenuNeedsFocus;
+    private ElementReference _contextMenuRef;
 
     [Parameter, EditorRequired] public IReadOnlyList<TItem> Items { get; set; } = [];
     [Parameter, EditorRequired] public Func<TItem, IReadOnlyList<TItem>> ChildrenSelector { get; set; } = default!;
@@ -117,6 +122,12 @@ else
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (_contextMenuNeedsFocus && _showContextMenu)
+        {
+            _contextMenuNeedsFocus = false;
+            try { await _contextMenuRef.FocusAsync(); } catch { /* element may have been disposed if dismissed during render */ }
+        }
+
         if (firstRender && StorageKey != null)
         {
             var json = await JSRuntime.InvokeAsync<string?>("treeviewStorage.load", StorageKey);
@@ -212,6 +223,7 @@ else
         _contextMenuX = e.ClientX;
         _contextMenuY = e.ClientY;
         _showContextMenu = true;
+        _contextMenuNeedsFocus = true;
     }
 
     private void DismissContextMenu()
@@ -220,6 +232,17 @@ else
         _contextMenuItem = default;
     }
 
+    private void OnContextMenuKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            DismissContextMenu();
+        }
+    }
+
+    /// <summary>Whether the node with the given key is currently expanded.</summary>
+    public bool IsExpanded(object key) => _expandedKeys.Contains(KeyStr(key));
+
     /// <summary>Expand every branch node in the tree.</summary>
     public void ExpandAll()
     {
diff --git a/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css b/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css
new file mode 100644
index 0000000..9c62ee0
--- /dev/null
+++ b/src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css
@@ -0,0 +1,135 @@
+/* TreeView component styling — see docs/requirements/Component-TreeView.md "Visual Design Guide" (V1–V7). */
+
+/* Root list — no list styling. */
+.tv-root,
+.tv-root ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+/* V1 — Row anatomy. Flex container; full-width hit surface; ~32px row. */
+.tv-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    cursor: default;
+    border-radius: 0.25rem;
+    transition: background-color 0.08s linear;
+}
+
+/* V1 — slot widths. Toggle and glyph are always present so labels align across siblings. */
+.tv-row .tv-toggle,
+.tv-row .tv-spacer {
+    flex: 0 0 auto;
+    width: 1.25rem;          /* 20px */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--bs-secondary-color);
+    user-select: none;
+}
+
+.tv-row .tv-spacer {
+    cursor: default;
+}
+
+.tv-row .tv-content {
+    flex: 1 1 auto;
+    min-width: 0;            /* required so child label can ellipsis-truncate inside a flex item */
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+/* V5 — primary label truncation. Consumers add their own bold class for branches. */
+.tv-row .tv-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* V1 — meta slot right-aligns trailing badges/text against row edge. */
+.tv-row .tv-meta {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 0 0 auto;
+}
+
+/* V4 — glyph slot. Bootstrap Icons render at 1em, inherit text color. */
+.tv-row .tv-glyph {
+    flex: 0 0 auto;
+    width: 1.25rem;          /* 20px, same slot size as toggle */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* V3 — hover. Subtle gray wash; suppressed when row is selected. */
+.tv-row:hover:not(.tv-selected) {
+    background-color: var(--bs-tertiary-bg);
+}
+
+/* V3 — selected. Bootstrap utility `bg-primary bg-opacity-10` is the SelectedCssClass default;
+   the .tv-selected hook is provided for consumers that prefer scoped styling. */
+.tv-row.tv-selected {
+    background-color: rgba(var(--bs-primary-rgb), 0.1);
+}
+
+/* V3 — keyboard focus. Inset ring composes with hover/selected without layout shift. */
+.tv-row:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--bs-primary);
+}
+
+/* V3 — drop-target (valid). Overrides hover/selected. */
+.tv-row.tv-drop-target {
+    background-color: rgba(var(--bs-info-rgb), 0.25);
+}
+
+/* V3 — dimmed (e.g. non-droppable while a drag is in progress; reserved for future use). */
+.tv-row.tv-dimmed {
+    opacity: 0.5;
+}
+
+/* V2 — guide lines. A pseudo-element overlays the row's depth gutter and draws
+   one vertical line per ancestor depth at 24px intervals. The `--tv-depth` variable
+   is set inline per row; lines never extend into the content area. */
+.tv-guides .tv-row {
+    position: relative;
+}
+
+.tv-guides .tv-row::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: calc(var(--tv-depth, 0) * 1.5rem);
+    pointer-events: none;
+    background-image: linear-gradient(
+        to right,
+        transparent calc(0.625rem - 0.5px),
+        var(--bs-border-color) calc(0.625rem - 0.5px),
+        var(--bs-border-color) calc(0.625rem + 0.5px),
+        transparent calc(0.625rem + 0.5px)
+    );
+    background-size: 1.5rem 100%;
+    background-repeat: repeat-x;
+}
+
+/* Branch chevron rotates on expand via the aria-expanded attribute on the parent treeitem.
+   Consumers using `bi-chevron-right` get the down-rotation for free. */
+.tv-row .tv-toggle .bi-chevron-right {
+    transition: transform 0.1s linear;
+}
+
+[role="treeitem"][aria-expanded="true"] > .tv-row .tv-toggle .bi-chevron-right {
+    transform: rotate(90deg);
+}
diff --git a/src/ScadaLink.Host/Components/App.razor b/src/ScadaLink.Host/Components/App.razor
index ceb5f8e..f9213d6 100644
--- a/src/ScadaLink.Host/Components/App.razor
+++ b/src/ScadaLink.Host/Components/App.razor
@@ -6,6 +6,8 @@
     <base href="/" />
     <title>ScadaLink</title>
     <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
+    <link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
     <style>
         .sidebar {
             min-width: 220px;
diff --git a/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/bootstrap-icons.css b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/bootstrap-icons.css
new file mode 100644
index 0000000..bc84a5f
--- /dev/null
+++ b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/bootstrap-icons.css
@@ -0,0 +1,2078 @@
+/*!
+ * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
+ * Copyright 2019-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
+ */
+
+@font-face {
+  font-display: block;
+  font-family: "bootstrap-icons";
+  src: url("./fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
+url("./fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
+}
+
+.bi::before,
+[class^="bi-"]::before,
+[class*=" bi-"]::before {
+  display: inline-block;
+  font-family: bootstrap-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -.125em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bi-123::before { content: "\f67f"; }
+.bi-alarm-fill::before { content: "\f101"; }
+.bi-alarm::before { content: "\f102"; }
+.bi-align-bottom::before { content: "\f103"; }
+.bi-align-center::before { content: "\f104"; }
+.bi-align-end::before { content: "\f105"; }
+.bi-align-middle::before { content: "\f106"; }
+.bi-align-start::before { content: "\f107"; }
+.bi-align-top::before { content: "\f108"; }
+.bi-alt::before { content: "\f109"; }
+.bi-app-indicator::before { content: "\f10a"; }
+.bi-app::before { content: "\f10b"; }
+.bi-archive-fill::before { content: "\f10c"; }
+.bi-archive::before { content: "\f10d"; }
+.bi-arrow-90deg-down::before { content: "\f10e"; }
+.bi-arrow-90deg-left::before { content: "\f10f"; }
+.bi-arrow-90deg-right::before { content: "\f110"; }
+.bi-arrow-90deg-up::before { content: "\f111"; }
+.bi-arrow-bar-down::before { content: "\f112"; }
+.bi-arrow-bar-left::before { content: "\f113"; }
+.bi-arrow-bar-right::before { content: "\f114"; }
+.bi-arrow-bar-up::before { content: "\f115"; }
+.bi-arrow-clockwise::before { content: "\f116"; }
+.bi-arrow-counterclockwise::before { content: "\f117"; }
+.bi-arrow-down-circle-fill::before { content: "\f118"; }
+.bi-arrow-down-circle::before { content: "\f119"; }
+.bi-arrow-down-left-circle-fill::before { content: "\f11a"; }
+.bi-arrow-down-left-circle::before { content: "\f11b"; }
+.bi-arrow-down-left-square-fill::before { content: "\f11c"; }
+.bi-arrow-down-left-square::before { content: "\f11d"; }
+.bi-arrow-down-left::before { content: "\f11e"; }
+.bi-arrow-down-right-circle-fill::before { content: "\f11f"; }
+.bi-arrow-down-right-circle::before { content: "\f120"; }
+.bi-arrow-down-right-square-fill::before { content: "\f121"; }
+.bi-arrow-down-right-square::before { content: "\f122"; }
+.bi-arrow-down-right::before { content: "\f123"; }
+.bi-arrow-down-short::before { content: "\f124"; }
+.bi-arrow-down-square-fill::before { content: "\f125"; }
+.bi-arrow-down-square::before { content: "\f126"; }
+.bi-arrow-down-up::before { content: "\f127"; }
+.bi-arrow-down::before { content: "\f128"; }
+.bi-arrow-left-circle-fill::before { content: "\f129"; }
+.bi-arrow-left-circle::before { content: "\f12a"; }
+.bi-arrow-left-right::before { content: "\f12b"; }
+.bi-arrow-left-short::before { content: "\f12c"; }
+.bi-arrow-left-square-fill::before { content: "\f12d"; }
+.bi-arrow-left-square::before { content: "\f12e"; }
+.bi-arrow-left::before { content: "\f12f"; }
+.bi-arrow-repeat::before { content: "\f130"; }
+.bi-arrow-return-left::before { content: "\f131"; }
+.bi-arrow-return-right::before { content: "\f132"; }
+.bi-arrow-right-circle-fill::before { content: "\f133"; }
+.bi-arrow-right-circle::before { content: "\f134"; }
+.bi-arrow-right-short::before { content: "\f135"; }
+.bi-arrow-right-square-fill::before { content: "\f136"; }
+.bi-arrow-right-square::before { content: "\f137"; }
+.bi-arrow-right::before { content: "\f138"; }
+.bi-arrow-up-circle-fill::before { content: "\f139"; }
+.bi-arrow-up-circle::before { content: "\f13a"; }
+.bi-arrow-up-left-circle-fill::before { content: "\f13b"; }
+.bi-arrow-up-left-circle::before { content: "\f13c"; }
+.bi-arrow-up-left-square-fill::before { content: "\f13d"; }
+.bi-arrow-up-left-square::before { content: "\f13e"; }
+.bi-arrow-up-left::before { content: "\f13f"; }
+.bi-arrow-up-right-circle-fill::before { content: "\f140"; }
+.bi-arrow-up-right-circle::before { content: "\f141"; }
+.bi-arrow-up-right-square-fill::before { content: "\f142"; }
+.bi-arrow-up-right-square::before { content: "\f143"; }
+.bi-arrow-up-right::before { content: "\f144"; }
+.bi-arrow-up-short::before { content: "\f145"; }
+.bi-arrow-up-square-fill::before { content: "\f146"; }
+.bi-arrow-up-square::before { content: "\f147"; }
+.bi-arrow-up::before { content: "\f148"; }
+.bi-arrows-angle-contract::before { content: "\f149"; }
+.bi-arrows-angle-expand::before { content: "\f14a"; }
+.bi-arrows-collapse::before { content: "\f14b"; }
+.bi-arrows-expand::before { content: "\f14c"; }
+.bi-arrows-fullscreen::before { content: "\f14d"; }
+.bi-arrows-move::before { content: "\f14e"; }
+.bi-aspect-ratio-fill::before { content: "\f14f"; }
+.bi-aspect-ratio::before { content: "\f150"; }
+.bi-asterisk::before { content: "\f151"; }
+.bi-at::before { content: "\f152"; }
+.bi-award-fill::before { content: "\f153"; }
+.bi-award::before { content: "\f154"; }
+.bi-back::before { content: "\f155"; }
+.bi-backspace-fill::before { content: "\f156"; }
+.bi-backspace-reverse-fill::before { content: "\f157"; }
+.bi-backspace-reverse::before { content: "\f158"; }
+.bi-backspace::before { content: "\f159"; }
+.bi-badge-3d-fill::before { content: "\f15a"; }
+.bi-badge-3d::before { content: "\f15b"; }
+.bi-badge-4k-fill::before { content: "\f15c"; }
+.bi-badge-4k::before { content: "\f15d"; }
+.bi-badge-8k-fill::before { content: "\f15e"; }
+.bi-badge-8k::before { content: "\f15f"; }
+.bi-badge-ad-fill::before { content: "\f160"; }
+.bi-badge-ad::before { content: "\f161"; }
+.bi-badge-ar-fill::before { content: "\f162"; }
+.bi-badge-ar::before { content: "\f163"; }
+.bi-badge-cc-fill::before { content: "\f164"; }
+.bi-badge-cc::before { content: "\f165"; }
+.bi-badge-hd-fill::before { content: "\f166"; }
+.bi-badge-hd::before { content: "\f167"; }
+.bi-badge-tm-fill::before { content: "\f168"; }
+.bi-badge-tm::before { content: "\f169"; }
+.bi-badge-vo-fill::before { content: "\f16a"; }
+.bi-badge-vo::before { content: "\f16b"; }
+.bi-badge-vr-fill::before { content: "\f16c"; }
+.bi-badge-vr::before { content: "\f16d"; }
+.bi-badge-wc-fill::before { content: "\f16e"; }
+.bi-badge-wc::before { content: "\f16f"; }
+.bi-bag-check-fill::before { content: "\f170"; }
+.bi-bag-check::before { content: "\f171"; }
+.bi-bag-dash-fill::before { content: "\f172"; }
+.bi-bag-dash::before { content: "\f173"; }
+.bi-bag-fill::before { content: "\f174"; }
+.bi-bag-plus-fill::before { content: "\f175"; }
+.bi-bag-plus::before { content: "\f176"; }
+.bi-bag-x-fill::before { content: "\f177"; }
+.bi-bag-x::before { content: "\f178"; }
+.bi-bag::before { content: "\f179"; }
+.bi-bar-chart-fill::before { content: "\f17a"; }
+.bi-bar-chart-line-fill::before { content: "\f17b"; }
+.bi-bar-chart-line::before { content: "\f17c"; }
+.bi-bar-chart-steps::before { content: "\f17d"; }
+.bi-bar-chart::before { content: "\f17e"; }
+.bi-basket-fill::before { content: "\f17f"; }
+.bi-basket::before { content: "\f180"; }
+.bi-basket2-fill::before { content: "\f181"; }
+.bi-basket2::before { content: "\f182"; }
+.bi-basket3-fill::before { content: "\f183"; }
+.bi-basket3::before { content: "\f184"; }
+.bi-battery-charging::before { content: "\f185"; }
+.bi-battery-full::before { content: "\f186"; }
+.bi-battery-half::before { content: "\f187"; }
+.bi-battery::before { content: "\f188"; }
+.bi-bell-fill::before { content: "\f189"; }
+.bi-bell::before { content: "\f18a"; }
+.bi-bezier::before { content: "\f18b"; }
+.bi-bezier2::before { content: "\f18c"; }
+.bi-bicycle::before { content: "\f18d"; }
+.bi-binoculars-fill::before { content: "\f18e"; }
+.bi-binoculars::before { content: "\f18f"; }
+.bi-blockquote-left::before { content: "\f190"; }
+.bi-blockquote-right::before { content: "\f191"; }
+.bi-book-fill::before { content: "\f192"; }
+.bi-book-half::before { content: "\f193"; }
+.bi-book::before { content: "\f194"; }
+.bi-bookmark-check-fill::before { content: "\f195"; }
+.bi-bookmark-check::before { content: "\f196"; }
+.bi-bookmark-dash-fill::before { content: "\f197"; }
+.bi-bookmark-dash::before { content: "\f198"; }
+.bi-bookmark-fill::before { content: "\f199"; }
+.bi-bookmark-heart-fill::before { content: "\f19a"; }
+.bi-bookmark-heart::before { content: "\f19b"; }
+.bi-bookmark-plus-fill::before { content: "\f19c"; }
+.bi-bookmark-plus::before { content: "\f19d"; }
+.bi-bookmark-star-fill::before { content: "\f19e"; }
+.bi-bookmark-star::before { content: "\f19f"; }
+.bi-bookmark-x-fill::before { content: "\f1a0"; }
+.bi-bookmark-x::before { content: "\f1a1"; }
+.bi-bookmark::before { content: "\f1a2"; }
+.bi-bookmarks-fill::before { content: "\f1a3"; }
+.bi-bookmarks::before { content: "\f1a4"; }
+.bi-bookshelf::before { content: "\f1a5"; }
+.bi-bootstrap-fill::before { content: "\f1a6"; }
+.bi-bootstrap-reboot::before { content: "\f1a7"; }
+.bi-bootstrap::before { content: "\f1a8"; }
+.bi-border-all::before { content: "\f1a9"; }
+.bi-border-bottom::before { content: "\f1aa"; }
+.bi-border-center::before { content: "\f1ab"; }
+.bi-border-inner::before { content: "\f1ac"; }
+.bi-border-left::before { content: "\f1ad"; }
+.bi-border-middle::before { content: "\f1ae"; }
+.bi-border-outer::before { content: "\f1af"; }
+.bi-border-right::before { content: "\f1b0"; }
+.bi-border-style::before { content: "\f1b1"; }
+.bi-border-top::before { content: "\f1b2"; }
+.bi-border-width::before { content: "\f1b3"; }
+.bi-border::before { content: "\f1b4"; }
+.bi-bounding-box-circles::before { content: "\f1b5"; }
+.bi-bounding-box::before { content: "\f1b6"; }
+.bi-box-arrow-down-left::before { content: "\f1b7"; }
+.bi-box-arrow-down-right::before { content: "\f1b8"; }
+.bi-box-arrow-down::before { content: "\f1b9"; }
+.bi-box-arrow-in-down-left::before { content: "\f1ba"; }
+.bi-box-arrow-in-down-right::before { content: "\f1bb"; }
+.bi-box-arrow-in-down::before { content: "\f1bc"; }
+.bi-box-arrow-in-left::before { content: "\f1bd"; }
+.bi-box-arrow-in-right::before { content: "\f1be"; }
+.bi-box-arrow-in-up-left::before { content: "\f1bf"; }
+.bi-box-arrow-in-up-right::before { content: "\f1c0"; }
+.bi-box-arrow-in-up::before { content: "\f1c1"; }
+.bi-box-arrow-left::before { content: "\f1c2"; }
+.bi-box-arrow-right::before { content: "\f1c3"; }
+.bi-box-arrow-up-left::before { content: "\f1c4"; }
+.bi-box-arrow-up-right::before { content: "\f1c5"; }
+.bi-box-arrow-up::before { content: "\f1c6"; }
+.bi-box-seam::before { content: "\f1c7"; }
+.bi-box::before { content: "\f1c8"; }
+.bi-braces::before { content: "\f1c9"; }
+.bi-bricks::before { content: "\f1ca"; }
+.bi-briefcase-fill::before { content: "\f1cb"; }
+.bi-briefcase::before { content: "\f1cc"; }
+.bi-brightness-alt-high-fill::before { content: "\f1cd"; }
+.bi-brightness-alt-high::before { content: "\f1ce"; }
+.bi-brightness-alt-low-fill::before { content: "\f1cf"; }
+.bi-brightness-alt-low::before { content: "\f1d0"; }
+.bi-brightness-high-fill::before { content: "\f1d1"; }
+.bi-brightness-high::before { content: "\f1d2"; }
+.bi-brightness-low-fill::before { content: "\f1d3"; }
+.bi-brightness-low::before { content: "\f1d4"; }
+.bi-broadcast-pin::before { content: "\f1d5"; }
+.bi-broadcast::before { content: "\f1d6"; }
+.bi-brush-fill::before { content: "\f1d7"; }
+.bi-brush::before { content: "\f1d8"; }
+.bi-bucket-fill::before { content: "\f1d9"; }
+.bi-bucket::before { content: "\f1da"; }
+.bi-bug-fill::before { content: "\f1db"; }
+.bi-bug::before { content: "\f1dc"; }
+.bi-building::before { content: "\f1dd"; }
+.bi-bullseye::before { content: "\f1de"; }
+.bi-calculator-fill::before { content: "\f1df"; }
+.bi-calculator::before { content: "\f1e0"; }
+.bi-calendar-check-fill::before { content: "\f1e1"; }
+.bi-calendar-check::before { content: "\f1e2"; }
+.bi-calendar-date-fill::before { content: "\f1e3"; }
+.bi-calendar-date::before { content: "\f1e4"; }
+.bi-calendar-day-fill::before { content: "\f1e5"; }
+.bi-calendar-day::before { content: "\f1e6"; }
+.bi-calendar-event-fill::before { content: "\f1e7"; }
+.bi-calendar-event::before { content: "\f1e8"; }
+.bi-calendar-fill::before { content: "\f1e9"; }
+.bi-calendar-minus-fill::before { content: "\f1ea"; }
+.bi-calendar-minus::before { content: "\f1eb"; }
+.bi-calendar-month-fill::before { content: "\f1ec"; }
+.bi-calendar-month::before { content: "\f1ed"; }
+.bi-calendar-plus-fill::before { content: "\f1ee"; }
+.bi-calendar-plus::before { content: "\f1ef"; }
+.bi-calendar-range-fill::before { content: "\f1f0"; }
+.bi-calendar-range::before { content: "\f1f1"; }
+.bi-calendar-week-fill::before { content: "\f1f2"; }
+.bi-calendar-week::before { content: "\f1f3"; }
+.bi-calendar-x-fill::before { content: "\f1f4"; }
+.bi-calendar-x::before { content: "\f1f5"; }
+.bi-calendar::before { content: "\f1f6"; }
+.bi-calendar2-check-fill::before { content: "\f1f7"; }
+.bi-calendar2-check::before { content: "\f1f8"; }
+.bi-calendar2-date-fill::before { content: "\f1f9"; }
+.bi-calendar2-date::before { content: "\f1fa"; }
+.bi-calendar2-day-fill::before { content: "\f1fb"; }
+.bi-calendar2-day::before { content: "\f1fc"; }
+.bi-calendar2-event-fill::before { content: "\f1fd"; }
+.bi-calendar2-event::before { content: "\f1fe"; }
+.bi-calendar2-fill::before { content: "\f1ff"; }
+.bi-calendar2-minus-fill::before { content: "\f200"; }
+.bi-calendar2-minus::before { content: "\f201"; }
+.bi-calendar2-month-fill::before { content: "\f202"; }
+.bi-calendar2-month::before { content: "\f203"; }
+.bi-calendar2-plus-fill::before { content: "\f204"; }
+.bi-calendar2-plus::before { content: "\f205"; }
+.bi-calendar2-range-fill::before { content: "\f206"; }
+.bi-calendar2-range::before { content: "\f207"; }
+.bi-calendar2-week-fill::before { content: "\f208"; }
+.bi-calendar2-week::before { content: "\f209"; }
+.bi-calendar2-x-fill::before { content: "\f20a"; }
+.bi-calendar2-x::before { content: "\f20b"; }
+.bi-calendar2::before { content: "\f20c"; }
+.bi-calendar3-event-fill::before { content: "\f20d"; }
+.bi-calendar3-event::before { content: "\f20e"; }
+.bi-calendar3-fill::before { content: "\f20f"; }
+.bi-calendar3-range-fill::before { content: "\f210"; }
+.bi-calendar3-range::before { content: "\f211"; }
+.bi-calendar3-week-fill::before { content: "\f212"; }
+.bi-calendar3-week::before { content: "\f213"; }
+.bi-calendar3::before { content: "\f214"; }
+.bi-calendar4-event::before { content: "\f215"; }
+.bi-calendar4-range::before { content: "\f216"; }
+.bi-calendar4-week::before { content: "\f217"; }
+.bi-calendar4::before { content: "\f218"; }
+.bi-camera-fill::before { content: "\f219"; }
+.bi-camera-reels-fill::before { content: "\f21a"; }
+.bi-camera-reels::before { content: "\f21b"; }
+.bi-camera-video-fill::before { content: "\f21c"; }
+.bi-camera-video-off-fill::before { content: "\f21d"; }
+.bi-camera-video-off::before { content: "\f21e"; }
+.bi-camera-video::before { content: "\f21f"; }
+.bi-camera::before { content: "\f220"; }
+.bi-camera2::before { content: "\f221"; }
+.bi-capslock-fill::before { content: "\f222"; }
+.bi-capslock::before { content: "\f223"; }
+.bi-card-checklist::before { content: "\f224"; }
+.bi-card-heading::before { content: "\f225"; }
+.bi-card-image::before { content: "\f226"; }
+.bi-card-list::before { content: "\f227"; }
+.bi-card-text::before { content: "\f228"; }
+.bi-caret-down-fill::before { content: "\f229"; }
+.bi-caret-down-square-fill::before { content: "\f22a"; }
+.bi-caret-down-square::before { content: "\f22b"; }
+.bi-caret-down::before { content: "\f22c"; }
+.bi-caret-left-fill::before { content: "\f22d"; }
+.bi-caret-left-square-fill::before { content: "\f22e"; }
+.bi-caret-left-square::before { content: "\f22f"; }
+.bi-caret-left::before { content: "\f230"; }
+.bi-caret-right-fill::before { content: "\f231"; }
+.bi-caret-right-square-fill::before { content: "\f232"; }
+.bi-caret-right-square::before { content: "\f233"; }
+.bi-caret-right::before { content: "\f234"; }
+.bi-caret-up-fill::before { content: "\f235"; }
+.bi-caret-up-square-fill::before { content: "\f236"; }
+.bi-caret-up-square::before { content: "\f237"; }
+.bi-caret-up::before { content: "\f238"; }
+.bi-cart-check-fill::before { content: "\f239"; }
+.bi-cart-check::before { content: "\f23a"; }
+.bi-cart-dash-fill::before { content: "\f23b"; }
+.bi-cart-dash::before { content: "\f23c"; }
+.bi-cart-fill::before { content: "\f23d"; }
+.bi-cart-plus-fill::before { content: "\f23e"; }
+.bi-cart-plus::before { content: "\f23f"; }
+.bi-cart-x-fill::before { content: "\f240"; }
+.bi-cart-x::before { content: "\f241"; }
+.bi-cart::before { content: "\f242"; }
+.bi-cart2::before { content: "\f243"; }
+.bi-cart3::before { content: "\f244"; }
+.bi-cart4::before { content: "\f245"; }
+.bi-cash-stack::before { content: "\f246"; }
+.bi-cash::before { content: "\f247"; }
+.bi-cast::before { content: "\f248"; }
+.bi-chat-dots-fill::before { content: "\f249"; }
+.bi-chat-dots::before { content: "\f24a"; }
+.bi-chat-fill::before { content: "\f24b"; }
+.bi-chat-left-dots-fill::before { content: "\f24c"; }
+.bi-chat-left-dots::before { content: "\f24d"; }
+.bi-chat-left-fill::before { content: "\f24e"; }
+.bi-chat-left-quote-fill::before { content: "\f24f"; }
+.bi-chat-left-quote::before { content: "\f250"; }
+.bi-chat-left-text-fill::before { content: "\f251"; }
+.bi-chat-left-text::before { content: "\f252"; }
+.bi-chat-left::before { content: "\f253"; }
+.bi-chat-quote-fill::before { content: "\f254"; }
+.bi-chat-quote::before { content: "\f255"; }
+.bi-chat-right-dots-fill::before { content: "\f256"; }
+.bi-chat-right-dots::before { content: "\f257"; }
+.bi-chat-right-fill::before { content: "\f258"; }
+.bi-chat-right-quote-fill::before { content: "\f259"; }
+.bi-chat-right-quote::before { content: "\f25a"; }
+.bi-chat-right-text-fill::before { content: "\f25b"; }
+.bi-chat-right-text::before { content: "\f25c"; }
+.bi-chat-right::before { content: "\f25d"; }
+.bi-chat-square-dots-fill::before { content: "\f25e"; }
+.bi-chat-square-dots::before { content: "\f25f"; }
+.bi-chat-square-fill::before { content: "\f260"; }
+.bi-chat-square-quote-fill::before { content: "\f261"; }
+.bi-chat-square-quote::before { content: "\f262"; }
+.bi-chat-square-text-fill::before { content: "\f263"; }
+.bi-chat-square-text::before { content: "\f264"; }
+.bi-chat-square::before { content: "\f265"; }
+.bi-chat-text-fill::before { content: "\f266"; }
+.bi-chat-text::before { content: "\f267"; }
+.bi-chat::before { content: "\f268"; }
+.bi-check-all::before { content: "\f269"; }
+.bi-check-circle-fill::before { content: "\f26a"; }
+.bi-check-circle::before { content: "\f26b"; }
+.bi-check-square-fill::before { content: "\f26c"; }
+.bi-check-square::before { content: "\f26d"; }
+.bi-check::before { content: "\f26e"; }
+.bi-check2-all::before { content: "\f26f"; }
+.bi-check2-circle::before { content: "\f270"; }
+.bi-check2-square::before { content: "\f271"; }
+.bi-check2::before { content: "\f272"; }
+.bi-chevron-bar-contract::before { content: "\f273"; }
+.bi-chevron-bar-down::before { content: "\f274"; }
+.bi-chevron-bar-expand::before { content: "\f275"; }
+.bi-chevron-bar-left::before { content: "\f276"; }
+.bi-chevron-bar-right::before { content: "\f277"; }
+.bi-chevron-bar-up::before { content: "\f278"; }
+.bi-chevron-compact-down::before { content: "\f279"; }
+.bi-chevron-compact-left::before { content: "\f27a"; }
+.bi-chevron-compact-right::before { content: "\f27b"; }
+.bi-chevron-compact-up::before { content: "\f27c"; }
+.bi-chevron-contract::before { content: "\f27d"; }
+.bi-chevron-double-down::before { content: "\f27e"; }
+.bi-chevron-double-left::before { content: "\f27f"; }
+.bi-chevron-double-right::before { content: "\f280"; }
+.bi-chevron-double-up::before { content: "\f281"; }
+.bi-chevron-down::before { content: "\f282"; }
+.bi-chevron-expand::before { content: "\f283"; }
+.bi-chevron-left::before { content: "\f284"; }
+.bi-chevron-right::before { content: "\f285"; }
+.bi-chevron-up::before { content: "\f286"; }
+.bi-circle-fill::before { content: "\f287"; }
+.bi-circle-half::before { content: "\f288"; }
+.bi-circle-square::before { content: "\f289"; }
+.bi-circle::before { content: "\f28a"; }
+.bi-clipboard-check::before { content: "\f28b"; }
+.bi-clipboard-data::before { content: "\f28c"; }
+.bi-clipboard-minus::before { content: "\f28d"; }
+.bi-clipboard-plus::before { content: "\f28e"; }
+.bi-clipboard-x::before { content: "\f28f"; }
+.bi-clipboard::before { content: "\f290"; }
+.bi-clock-fill::before { content: "\f291"; }
+.bi-clock-history::before { content: "\f292"; }
+.bi-clock::before { content: "\f293"; }
+.bi-cloud-arrow-down-fill::before { content: "\f294"; }
+.bi-cloud-arrow-down::before { content: "\f295"; }
+.bi-cloud-arrow-up-fill::before { content: "\f296"; }
+.bi-cloud-arrow-up::before { content: "\f297"; }
+.bi-cloud-check-fill::before { content: "\f298"; }
+.bi-cloud-check::before { content: "\f299"; }
+.bi-cloud-download-fill::before { content: "\f29a"; }
+.bi-cloud-download::before { content: "\f29b"; }
+.bi-cloud-drizzle-fill::before { content: "\f29c"; }
+.bi-cloud-drizzle::before { content: "\f29d"; }
+.bi-cloud-fill::before { content: "\f29e"; }
+.bi-cloud-fog-fill::before { content: "\f29f"; }
+.bi-cloud-fog::before { content: "\f2a0"; }
+.bi-cloud-fog2-fill::before { content: "\f2a1"; }
+.bi-cloud-fog2::before { content: "\f2a2"; }
+.bi-cloud-hail-fill::before { content: "\f2a3"; }
+.bi-cloud-hail::before { content: "\f2a4"; }
+.bi-cloud-haze-fill::before { content: "\f2a6"; }
+.bi-cloud-haze::before { content: "\f2a7"; }
+.bi-cloud-haze2-fill::before { content: "\f2a8"; }
+.bi-cloud-lightning-fill::before { content: "\f2a9"; }
+.bi-cloud-lightning-rain-fill::before { content: "\f2aa"; }
+.bi-cloud-lightning-rain::before { content: "\f2ab"; }
+.bi-cloud-lightning::before { content: "\f2ac"; }
+.bi-cloud-minus-fill::before { content: "\f2ad"; }
+.bi-cloud-minus::before { content: "\f2ae"; }
+.bi-cloud-moon-fill::before { content: "\f2af"; }
+.bi-cloud-moon::before { content: "\f2b0"; }
+.bi-cloud-plus-fill::before { content: "\f2b1"; }
+.bi-cloud-plus::before { content: "\f2b2"; }
+.bi-cloud-rain-fill::before { content: "\f2b3"; }
+.bi-cloud-rain-heavy-fill::before { content: "\f2b4"; }
+.bi-cloud-rain-heavy::before { content: "\f2b5"; }
+.bi-cloud-rain::before { content: "\f2b6"; }
+.bi-cloud-slash-fill::before { content: "\f2b7"; }
+.bi-cloud-slash::before { content: "\f2b8"; }
+.bi-cloud-sleet-fill::before { content: "\f2b9"; }
+.bi-cloud-sleet::before { content: "\f2ba"; }
+.bi-cloud-snow-fill::before { content: "\f2bb"; }
+.bi-cloud-snow::before { content: "\f2bc"; }
+.bi-cloud-sun-fill::before { content: "\f2bd"; }
+.bi-cloud-sun::before { content: "\f2be"; }
+.bi-cloud-upload-fill::before { content: "\f2bf"; }
+.bi-cloud-upload::before { content: "\f2c0"; }
+.bi-cloud::before { content: "\f2c1"; }
+.bi-clouds-fill::before { content: "\f2c2"; }
+.bi-clouds::before { content: "\f2c3"; }
+.bi-cloudy-fill::before { content: "\f2c4"; }
+.bi-cloudy::before { content: "\f2c5"; }
+.bi-code-slash::before { content: "\f2c6"; }
+.bi-code-square::before { content: "\f2c7"; }
+.bi-code::before { content: "\f2c8"; }
+.bi-collection-fill::before { content: "\f2c9"; }
+.bi-collection-play-fill::before { content: "\f2ca"; }
+.bi-collection-play::before { content: "\f2cb"; }
+.bi-collection::before { content: "\f2cc"; }
+.bi-columns-gap::before { content: "\f2cd"; }
+.bi-columns::before { content: "\f2ce"; }
+.bi-command::before { content: "\f2cf"; }
+.bi-compass-fill::before { content: "\f2d0"; }
+.bi-compass::before { content: "\f2d1"; }
+.bi-cone-striped::before { content: "\f2d2"; }
+.bi-cone::before { content: "\f2d3"; }
+.bi-controller::before { content: "\f2d4"; }
+.bi-cpu-fill::before { content: "\f2d5"; }
+.bi-cpu::before { content: "\f2d6"; }
+.bi-credit-card-2-back-fill::before { content: "\f2d7"; }
+.bi-credit-card-2-back::before { content: "\f2d8"; }
+.bi-credit-card-2-front-fill::before { content: "\f2d9"; }
+.bi-credit-card-2-front::before { content: "\f2da"; }
+.bi-credit-card-fill::before { content: "\f2db"; }
+.bi-credit-card::before { content: "\f2dc"; }
+.bi-crop::before { content: "\f2dd"; }
+.bi-cup-fill::before { content: "\f2de"; }
+.bi-cup-straw::before { content: "\f2df"; }
+.bi-cup::before { content: "\f2e0"; }
+.bi-cursor-fill::before { content: "\f2e1"; }
+.bi-cursor-text::before { content: "\f2e2"; }
+.bi-cursor::before { content: "\f2e3"; }
+.bi-dash-circle-dotted::before { content: "\f2e4"; }
+.bi-dash-circle-fill::before { content: "\f2e5"; }
+.bi-dash-circle::before { content: "\f2e6"; }
+.bi-dash-square-dotted::before { content: "\f2e7"; }
+.bi-dash-square-fill::before { content: "\f2e8"; }
+.bi-dash-square::before { content: "\f2e9"; }
+.bi-dash::before { content: "\f2ea"; }
+.bi-diagram-2-fill::before { content: "\f2eb"; }
+.bi-diagram-2::before { content: "\f2ec"; }
+.bi-diagram-3-fill::before { content: "\f2ed"; }
+.bi-diagram-3::before { content: "\f2ee"; }
+.bi-diamond-fill::before { content: "\f2ef"; }
+.bi-diamond-half::before { content: "\f2f0"; }
+.bi-diamond::before { content: "\f2f1"; }
+.bi-dice-1-fill::before { content: "\f2f2"; }
+.bi-dice-1::before { content: "\f2f3"; }
+.bi-dice-2-fill::before { content: "\f2f4"; }
+.bi-dice-2::before { content: "\f2f5"; }
+.bi-dice-3-fill::before { content: "\f2f6"; }
+.bi-dice-3::before { content: "\f2f7"; }
+.bi-dice-4-fill::before { content: "\f2f8"; }
+.bi-dice-4::before { content: "\f2f9"; }
+.bi-dice-5-fill::before { content: "\f2fa"; }
+.bi-dice-5::before { content: "\f2fb"; }
+.bi-dice-6-fill::before { content: "\f2fc"; }
+.bi-dice-6::before { content: "\f2fd"; }
+.bi-disc-fill::before { content: "\f2fe"; }
+.bi-disc::before { content: "\f2ff"; }
+.bi-discord::before { content: "\f300"; }
+.bi-display-fill::before { content: "\f301"; }
+.bi-display::before { content: "\f302"; }
+.bi-distribute-horizontal::before { content: "\f303"; }
+.bi-distribute-vertical::before { content: "\f304"; }
+.bi-door-closed-fill::before { content: "\f305"; }
+.bi-door-closed::before { content: "\f306"; }
+.bi-door-open-fill::before { content: "\f307"; }
+.bi-door-open::before { content: "\f308"; }
+.bi-dot::before { content: "\f309"; }
+.bi-download::before { content: "\f30a"; }
+.bi-droplet-fill::before { content: "\f30b"; }
+.bi-droplet-half::before { content: "\f30c"; }
+.bi-droplet::before { content: "\f30d"; }
+.bi-earbuds::before { content: "\f30e"; }
+.bi-easel-fill::before { content: "\f30f"; }
+.bi-easel::before { content: "\f310"; }
+.bi-egg-fill::before { content: "\f311"; }
+.bi-egg-fried::before { content: "\f312"; }
+.bi-egg::before { content: "\f313"; }
+.bi-eject-fill::before { content: "\f314"; }
+.bi-eject::before { content: "\f315"; }
+.bi-emoji-angry-fill::before { content: "\f316"; }
+.bi-emoji-angry::before { content: "\f317"; }
+.bi-emoji-dizzy-fill::before { content: "\f318"; }
+.bi-emoji-dizzy::before { content: "\f319"; }
+.bi-emoji-expressionless-fill::before { content: "\f31a"; }
+.bi-emoji-expressionless::before { content: "\f31b"; }
+.bi-emoji-frown-fill::before { content: "\f31c"; }
+.bi-emoji-frown::before { content: "\f31d"; }
+.bi-emoji-heart-eyes-fill::before { content: "\f31e"; }
+.bi-emoji-heart-eyes::before { content: "\f31f"; }
+.bi-emoji-laughing-fill::before { content: "\f320"; }
+.bi-emoji-laughing::before { content: "\f321"; }
+.bi-emoji-neutral-fill::before { content: "\f322"; }
+.bi-emoji-neutral::before { content: "\f323"; }
+.bi-emoji-smile-fill::before { content: "\f324"; }
+.bi-emoji-smile-upside-down-fill::before { content: "\f325"; }
+.bi-emoji-smile-upside-down::before { content: "\f326"; }
+.bi-emoji-smile::before { content: "\f327"; }
+.bi-emoji-sunglasses-fill::before { content: "\f328"; }
+.bi-emoji-sunglasses::before { content: "\f329"; }
+.bi-emoji-wink-fill::before { content: "\f32a"; }
+.bi-emoji-wink::before { content: "\f32b"; }
+.bi-envelope-fill::before { content: "\f32c"; }
+.bi-envelope-open-fill::before { content: "\f32d"; }
+.bi-envelope-open::before { content: "\f32e"; }
+.bi-envelope::before { content: "\f32f"; }
+.bi-eraser-fill::before { content: "\f330"; }
+.bi-eraser::before { content: "\f331"; }
+.bi-exclamation-circle-fill::before { content: "\f332"; }
+.bi-exclamation-circle::before { content: "\f333"; }
+.bi-exclamation-diamond-fill::before { content: "\f334"; }
+.bi-exclamation-diamond::before { content: "\f335"; }
+.bi-exclamation-octagon-fill::before { content: "\f336"; }
+.bi-exclamation-octagon::before { content: "\f337"; }
+.bi-exclamation-square-fill::before { content: "\f338"; }
+.bi-exclamation-square::before { content: "\f339"; }
+.bi-exclamation-triangle-fill::before { content: "\f33a"; }
+.bi-exclamation-triangle::before { content: "\f33b"; }
+.bi-exclamation::before { content: "\f33c"; }
+.bi-exclude::before { content: "\f33d"; }
+.bi-eye-fill::before { content: "\f33e"; }
+.bi-eye-slash-fill::before { content: "\f33f"; }
+.bi-eye-slash::before { content: "\f340"; }
+.bi-eye::before { content: "\f341"; }
+.bi-eyedropper::before { content: "\f342"; }
+.bi-eyeglasses::before { content: "\f343"; }
+.bi-facebook::before { content: "\f344"; }
+.bi-file-arrow-down-fill::before { content: "\f345"; }
+.bi-file-arrow-down::before { content: "\f346"; }
+.bi-file-arrow-up-fill::before { content: "\f347"; }
+.bi-file-arrow-up::before { content: "\f348"; }
+.bi-file-bar-graph-fill::before { content: "\f349"; }
+.bi-file-bar-graph::before { content: "\f34a"; }
+.bi-file-binary-fill::before { content: "\f34b"; }
+.bi-file-binary::before { content: "\f34c"; }
+.bi-file-break-fill::before { content: "\f34d"; }
+.bi-file-break::before { content: "\f34e"; }
+.bi-file-check-fill::before { content: "\f34f"; }
+.bi-file-check::before { content: "\f350"; }
+.bi-file-code-fill::before { content: "\f351"; }
+.bi-file-code::before { content: "\f352"; }
+.bi-file-diff-fill::before { content: "\f353"; }
+.bi-file-diff::before { content: "\f354"; }
+.bi-file-earmark-arrow-down-fill::before { content: "\f355"; }
+.bi-file-earmark-arrow-down::before { content: "\f356"; }
+.bi-file-earmark-arrow-up-fill::before { content: "\f357"; }
+.bi-file-earmark-arrow-up::before { content: "\f358"; }
+.bi-file-earmark-bar-graph-fill::before { content: "\f359"; }
+.bi-file-earmark-bar-graph::before { content: "\f35a"; }
+.bi-file-earmark-binary-fill::before { content: "\f35b"; }
+.bi-file-earmark-binary::before { content: "\f35c"; }
+.bi-file-earmark-break-fill::before { content: "\f35d"; }
+.bi-file-earmark-break::before { content: "\f35e"; }
+.bi-file-earmark-check-fill::before { content: "\f35f"; }
+.bi-file-earmark-check::before { content: "\f360"; }
+.bi-file-earmark-code-fill::before { content: "\f361"; }
+.bi-file-earmark-code::before { content: "\f362"; }
+.bi-file-earmark-diff-fill::before { content: "\f363"; }
+.bi-file-earmark-diff::before { content: "\f364"; }
+.bi-file-earmark-easel-fill::before { content: "\f365"; }
+.bi-file-earmark-easel::before { content: "\f366"; }
+.bi-file-earmark-excel-fill::before { content: "\f367"; }
+.bi-file-earmark-excel::before { content: "\f368"; }
+.bi-file-earmark-fill::before { content: "\f369"; }
+.bi-file-earmark-font-fill::before { content: "\f36a"; }
+.bi-file-earmark-font::before { content: "\f36b"; }
+.bi-file-earmark-image-fill::before { content: "\f36c"; }
+.bi-file-earmark-image::before { content: "\f36d"; }
+.bi-file-earmark-lock-fill::before { content: "\f36e"; }
+.bi-file-earmark-lock::before { content: "\f36f"; }
+.bi-file-earmark-lock2-fill::before { content: "\f370"; }
+.bi-file-earmark-lock2::before { content: "\f371"; }
+.bi-file-earmark-medical-fill::before { content: "\f372"; }
+.bi-file-earmark-medical::before { content: "\f373"; }
+.bi-file-earmark-minus-fill::before { content: "\f374"; }
+.bi-file-earmark-minus::before { content: "\f375"; }
+.bi-file-earmark-music-fill::before { content: "\f376"; }
+.bi-file-earmark-music::before { content: "\f377"; }
+.bi-file-earmark-person-fill::before { content: "\f378"; }
+.bi-file-earmark-person::before { content: "\f379"; }
+.bi-file-earmark-play-fill::before { content: "\f37a"; }
+.bi-file-earmark-play::before { content: "\f37b"; }
+.bi-file-earmark-plus-fill::before { content: "\f37c"; }
+.bi-file-earmark-plus::before { content: "\f37d"; }
+.bi-file-earmark-post-fill::before { content: "\f37e"; }
+.bi-file-earmark-post::before { content: "\f37f"; }
+.bi-file-earmark-ppt-fill::before { content: "\f380"; }
+.bi-file-earmark-ppt::before { content: "\f381"; }
+.bi-file-earmark-richtext-fill::before { content: "\f382"; }
+.bi-file-earmark-richtext::before { content: "\f383"; }
+.bi-file-earmark-ruled-fill::before { content: "\f384"; }
+.bi-file-earmark-ruled::before { content: "\f385"; }
+.bi-file-earmark-slides-fill::before { content: "\f386"; }
+.bi-file-earmark-slides::before { content: "\f387"; }
+.bi-file-earmark-spreadsheet-fill::before { content: "\f388"; }
+.bi-file-earmark-spreadsheet::before { content: "\f389"; }
+.bi-file-earmark-text-fill::before { content: "\f38a"; }
+.bi-file-earmark-text::before { content: "\f38b"; }
+.bi-file-earmark-word-fill::before { content: "\f38c"; }
+.bi-file-earmark-word::before { content: "\f38d"; }
+.bi-file-earmark-x-fill::before { content: "\f38e"; }
+.bi-file-earmark-x::before { content: "\f38f"; }
+.bi-file-earmark-zip-fill::before { content: "\f390"; }
+.bi-file-earmark-zip::before { content: "\f391"; }
+.bi-file-earmark::before { content: "\f392"; }
+.bi-file-easel-fill::before { content: "\f393"; }
+.bi-file-easel::before { content: "\f394"; }
+.bi-file-excel-fill::before { content: "\f395"; }
+.bi-file-excel::before { content: "\f396"; }
+.bi-file-fill::before { content: "\f397"; }
+.bi-file-font-fill::before { content: "\f398"; }
+.bi-file-font::before { content: "\f399"; }
+.bi-file-image-fill::before { content: "\f39a"; }
+.bi-file-image::before { content: "\f39b"; }
+.bi-file-lock-fill::before { content: "\f39c"; }
+.bi-file-lock::before { content: "\f39d"; }
+.bi-file-lock2-fill::before { content: "\f39e"; }
+.bi-file-lock2::before { content: "\f39f"; }
+.bi-file-medical-fill::before { content: "\f3a0"; }
+.bi-file-medical::before { content: "\f3a1"; }
+.bi-file-minus-fill::before { content: "\f3a2"; }
+.bi-file-minus::before { content: "\f3a3"; }
+.bi-file-music-fill::before { content: "\f3a4"; }
+.bi-file-music::before { content: "\f3a5"; }
+.bi-file-person-fill::before { content: "\f3a6"; }
+.bi-file-person::before { content: "\f3a7"; }
+.bi-file-play-fill::before { content: "\f3a8"; }
+.bi-file-play::before { content: "\f3a9"; }
+.bi-file-plus-fill::before { content: "\f3aa"; }
+.bi-file-plus::before { content: "\f3ab"; }
+.bi-file-post-fill::before { content: "\f3ac"; }
+.bi-file-post::before { content: "\f3ad"; }
+.bi-file-ppt-fill::before { content: "\f3ae"; }
+.bi-file-ppt::before { content: "\f3af"; }
+.bi-file-richtext-fill::before { content: "\f3b0"; }
+.bi-file-richtext::before { content: "\f3b1"; }
+.bi-file-ruled-fill::before { content: "\f3b2"; }
+.bi-file-ruled::before { content: "\f3b3"; }
+.bi-file-slides-fill::before { content: "\f3b4"; }
+.bi-file-slides::before { content: "\f3b5"; }
+.bi-file-spreadsheet-fill::before { content: "\f3b6"; }
+.bi-file-spreadsheet::before { content: "\f3b7"; }
+.bi-file-text-fill::before { content: "\f3b8"; }
+.bi-file-text::before { content: "\f3b9"; }
+.bi-file-word-fill::before { content: "\f3ba"; }
+.bi-file-word::before { content: "\f3bb"; }
+.bi-file-x-fill::before { content: "\f3bc"; }
+.bi-file-x::before { content: "\f3bd"; }
+.bi-file-zip-fill::before { content: "\f3be"; }
+.bi-file-zip::before { content: "\f3bf"; }
+.bi-file::before { content: "\f3c0"; }
+.bi-files-alt::before { content: "\f3c1"; }
+.bi-files::before { content: "\f3c2"; }
+.bi-film::before { content: "\f3c3"; }
+.bi-filter-circle-fill::before { content: "\f3c4"; }
+.bi-filter-circle::before { content: "\f3c5"; }
+.bi-filter-left::before { content: "\f3c6"; }
+.bi-filter-right::before { content: "\f3c7"; }
+.bi-filter-square-fill::before { content: "\f3c8"; }
+.bi-filter-square::before { content: "\f3c9"; }
+.bi-filter::before { content: "\f3ca"; }
+.bi-flag-fill::before { content: "\f3cb"; }
+.bi-flag::before { content: "\f3cc"; }
+.bi-flower1::before { content: "\f3cd"; }
+.bi-flower2::before { content: "\f3ce"; }
+.bi-flower3::before { content: "\f3cf"; }
+.bi-folder-check::before { content: "\f3d0"; }
+.bi-folder-fill::before { content: "\f3d1"; }
+.bi-folder-minus::before { content: "\f3d2"; }
+.bi-folder-plus::before { content: "\f3d3"; }
+.bi-folder-symlink-fill::before { content: "\f3d4"; }
+.bi-folder-symlink::before { content: "\f3d5"; }
+.bi-folder-x::before { content: "\f3d6"; }
+.bi-folder::before { content: "\f3d7"; }
+.bi-folder2-open::before { content: "\f3d8"; }
+.bi-folder2::before { content: "\f3d9"; }
+.bi-fonts::before { content: "\f3da"; }
+.bi-forward-fill::before { content: "\f3db"; }
+.bi-forward::before { content: "\f3dc"; }
+.bi-front::before { content: "\f3dd"; }
+.bi-fullscreen-exit::before { content: "\f3de"; }
+.bi-fullscreen::before { content: "\f3df"; }
+.bi-funnel-fill::before { content: "\f3e0"; }
+.bi-funnel::before { content: "\f3e1"; }
+.bi-gear-fill::before { content: "\f3e2"; }
+.bi-gear-wide-connected::before { content: "\f3e3"; }
+.bi-gear-wide::before { content: "\f3e4"; }
+.bi-gear::before { content: "\f3e5"; }
+.bi-gem::before { content: "\f3e6"; }
+.bi-geo-alt-fill::before { content: "\f3e7"; }
+.bi-geo-alt::before { content: "\f3e8"; }
+.bi-geo-fill::before { content: "\f3e9"; }
+.bi-geo::before { content: "\f3ea"; }
+.bi-gift-fill::before { content: "\f3eb"; }
+.bi-gift::before { content: "\f3ec"; }
+.bi-github::before { content: "\f3ed"; }
+.bi-globe::before { content: "\f3ee"; }
+.bi-globe2::before { content: "\f3ef"; }
+.bi-google::before { content: "\f3f0"; }
+.bi-graph-down::before { content: "\f3f1"; }
+.bi-graph-up::before { content: "\f3f2"; }
+.bi-grid-1x2-fill::before { content: "\f3f3"; }
+.bi-grid-1x2::before { content: "\f3f4"; }
+.bi-grid-3x2-gap-fill::before { content: "\f3f5"; }
+.bi-grid-3x2-gap::before { content: "\f3f6"; }
+.bi-grid-3x2::before { content: "\f3f7"; }
+.bi-grid-3x3-gap-fill::before { content: "\f3f8"; }
+.bi-grid-3x3-gap::before { content: "\f3f9"; }
+.bi-grid-3x3::before { content: "\f3fa"; }
+.bi-grid-fill::before { content: "\f3fb"; }
+.bi-grid::before { content: "\f3fc"; }
+.bi-grip-horizontal::before { content: "\f3fd"; }
+.bi-grip-vertical::before { content: "\f3fe"; }
+.bi-hammer::before { content: "\f3ff"; }
+.bi-hand-index-fill::before { content: "\f400"; }
+.bi-hand-index-thumb-fill::before { content: "\f401"; }
+.bi-hand-index-thumb::before { content: "\f402"; }
+.bi-hand-index::before { content: "\f403"; }
+.bi-hand-thumbs-down-fill::before { content: "\f404"; }
+.bi-hand-thumbs-down::before { content: "\f405"; }
+.bi-hand-thumbs-up-fill::before { content: "\f406"; }
+.bi-hand-thumbs-up::before { content: "\f407"; }
+.bi-handbag-fill::before { content: "\f408"; }
+.bi-handbag::before { content: "\f409"; }
+.bi-hash::before { content: "\f40a"; }
+.bi-hdd-fill::before { content: "\f40b"; }
+.bi-hdd-network-fill::before { content: "\f40c"; }
+.bi-hdd-network::before { content: "\f40d"; }
+.bi-hdd-rack-fill::before { content: "\f40e"; }
+.bi-hdd-rack::before { content: "\f40f"; }
+.bi-hdd-stack-fill::before { content: "\f410"; }
+.bi-hdd-stack::before { content: "\f411"; }
+.bi-hdd::before { content: "\f412"; }
+.bi-headphones::before { content: "\f413"; }
+.bi-headset::before { content: "\f414"; }
+.bi-heart-fill::before { content: "\f415"; }
+.bi-heart-half::before { content: "\f416"; }
+.bi-heart::before { content: "\f417"; }
+.bi-heptagon-fill::before { content: "\f418"; }
+.bi-heptagon-half::before { content: "\f419"; }
+.bi-heptagon::before { content: "\f41a"; }
+.bi-hexagon-fill::before { content: "\f41b"; }
+.bi-hexagon-half::before { content: "\f41c"; }
+.bi-hexagon::before { content: "\f41d"; }
+.bi-hourglass-bottom::before { content: "\f41e"; }
+.bi-hourglass-split::before { content: "\f41f"; }
+.bi-hourglass-top::before { content: "\f420"; }
+.bi-hourglass::before { content: "\f421"; }
+.bi-house-door-fill::before { content: "\f422"; }
+.bi-house-door::before { content: "\f423"; }
+.bi-house-fill::before { content: "\f424"; }
+.bi-house::before { content: "\f425"; }
+.bi-hr::before { content: "\f426"; }
+.bi-hurricane::before { content: "\f427"; }
+.bi-image-alt::before { content: "\f428"; }
+.bi-image-fill::before { content: "\f429"; }
+.bi-image::before { content: "\f42a"; }
+.bi-images::before { content: "\f42b"; }
+.bi-inbox-fill::before { content: "\f42c"; }
+.bi-inbox::before { content: "\f42d"; }
+.bi-inboxes-fill::before { content: "\f42e"; }
+.bi-inboxes::before { content: "\f42f"; }
+.bi-info-circle-fill::before { content: "\f430"; }
+.bi-info-circle::before { content: "\f431"; }
+.bi-info-square-fill::before { content: "\f432"; }
+.bi-info-square::before { content: "\f433"; }
+.bi-info::before { content: "\f434"; }
+.bi-input-cursor-text::before { content: "\f435"; }
+.bi-input-cursor::before { content: "\f436"; }
+.bi-instagram::before { content: "\f437"; }
+.bi-intersect::before { content: "\f438"; }
+.bi-journal-album::before { content: "\f439"; }
+.bi-journal-arrow-down::before { content: "\f43a"; }
+.bi-journal-arrow-up::before { content: "\f43b"; }
+.bi-journal-bookmark-fill::before { content: "\f43c"; }
+.bi-journal-bookmark::before { content: "\f43d"; }
+.bi-journal-check::before { content: "\f43e"; }
+.bi-journal-code::before { content: "\f43f"; }
+.bi-journal-medical::before { content: "\f440"; }
+.bi-journal-minus::before { content: "\f441"; }
+.bi-journal-plus::before { content: "\f442"; }
+.bi-journal-richtext::before { content: "\f443"; }
+.bi-journal-text::before { content: "\f444"; }
+.bi-journal-x::before { content: "\f445"; }
+.bi-journal::before { content: "\f446"; }
+.bi-journals::before { content: "\f447"; }
+.bi-joystick::before { content: "\f448"; }
+.bi-justify-left::before { content: "\f449"; }
+.bi-justify-right::before { content: "\f44a"; }
+.bi-justify::before { content: "\f44b"; }
+.bi-kanban-fill::before { content: "\f44c"; }
+.bi-kanban::before { content: "\f44d"; }
+.bi-key-fill::before { content: "\f44e"; }
+.bi-key::before { content: "\f44f"; }
+.bi-keyboard-fill::before { content: "\f450"; }
+.bi-keyboard::before { content: "\f451"; }
+.bi-ladder::before { content: "\f452"; }
+.bi-lamp-fill::before { content: "\f453"; }
+.bi-lamp::before { content: "\f454"; }
+.bi-laptop-fill::before { content: "\f455"; }
+.bi-laptop::before { content: "\f456"; }
+.bi-layer-backward::before { content: "\f457"; }
+.bi-layer-forward::before { content: "\f458"; }
+.bi-layers-fill::before { content: "\f459"; }
+.bi-layers-half::before { content: "\f45a"; }
+.bi-layers::before { content: "\f45b"; }
+.bi-layout-sidebar-inset-reverse::before { content: "\f45c"; }
+.bi-layout-sidebar-inset::before { content: "\f45d"; }
+.bi-layout-sidebar-reverse::before { content: "\f45e"; }
+.bi-layout-sidebar::before { content: "\f45f"; }
+.bi-layout-split::before { content: "\f460"; }
+.bi-layout-text-sidebar-reverse::before { content: "\f461"; }
+.bi-layout-text-sidebar::before { content: "\f462"; }
+.bi-layout-text-window-reverse::before { content: "\f463"; }
+.bi-layout-text-window::before { content: "\f464"; }
+.bi-layout-three-columns::before { content: "\f465"; }
+.bi-layout-wtf::before { content: "\f466"; }
+.bi-life-preserver::before { content: "\f467"; }
+.bi-lightbulb-fill::before { content: "\f468"; }
+.bi-lightbulb-off-fill::before { content: "\f469"; }
+.bi-lightbulb-off::before { content: "\f46a"; }
+.bi-lightbulb::before { content: "\f46b"; }
+.bi-lightning-charge-fill::before { content: "\f46c"; }
+.bi-lightning-charge::before { content: "\f46d"; }
+.bi-lightning-fill::before { content: "\f46e"; }
+.bi-lightning::before { content: "\f46f"; }
+.bi-link-45deg::before { content: "\f470"; }
+.bi-link::before { content: "\f471"; }
+.bi-linkedin::before { content: "\f472"; }
+.bi-list-check::before { content: "\f473"; }
+.bi-list-nested::before { content: "\f474"; }
+.bi-list-ol::before { content: "\f475"; }
+.bi-list-stars::before { content: "\f476"; }
+.bi-list-task::before { content: "\f477"; }
+.bi-list-ul::before { content: "\f478"; }
+.bi-list::before { content: "\f479"; }
+.bi-lock-fill::before { content: "\f47a"; }
+.bi-lock::before { content: "\f47b"; }
+.bi-mailbox::before { content: "\f47c"; }
+.bi-mailbox2::before { content: "\f47d"; }
+.bi-map-fill::before { content: "\f47e"; }
+.bi-map::before { content: "\f47f"; }
+.bi-markdown-fill::before { content: "\f480"; }
+.bi-markdown::before { content: "\f481"; }
+.bi-mask::before { content: "\f482"; }
+.bi-megaphone-fill::before { content: "\f483"; }
+.bi-megaphone::before { content: "\f484"; }
+.bi-menu-app-fill::before { content: "\f485"; }
+.bi-menu-app::before { content: "\f486"; }
+.bi-menu-button-fill::before { content: "\f487"; }
+.bi-menu-button-wide-fill::before { content: "\f488"; }
+.bi-menu-button-wide::before { content: "\f489"; }
+.bi-menu-button::before { content: "\f48a"; }
+.bi-menu-down::before { content: "\f48b"; }
+.bi-menu-up::before { content: "\f48c"; }
+.bi-mic-fill::before { content: "\f48d"; }
+.bi-mic-mute-fill::before { content: "\f48e"; }
+.bi-mic-mute::before { content: "\f48f"; }
+.bi-mic::before { content: "\f490"; }
+.bi-minecart-loaded::before { content: "\f491"; }
+.bi-minecart::before { content: "\f492"; }
+.bi-moisture::before { content: "\f493"; }
+.bi-moon-fill::before { content: "\f494"; }
+.bi-moon-stars-fill::before { content: "\f495"; }
+.bi-moon-stars::before { content: "\f496"; }
+.bi-moon::before { content: "\f497"; }
+.bi-mouse-fill::before { content: "\f498"; }
+.bi-mouse::before { content: "\f499"; }
+.bi-mouse2-fill::before { content: "\f49a"; }
+.bi-mouse2::before { content: "\f49b"; }
+.bi-mouse3-fill::before { content: "\f49c"; }
+.bi-mouse3::before { content: "\f49d"; }
+.bi-music-note-beamed::before { content: "\f49e"; }
+.bi-music-note-list::before { content: "\f49f"; }
+.bi-music-note::before { content: "\f4a0"; }
+.bi-music-player-fill::before { content: "\f4a1"; }
+.bi-music-player::before { content: "\f4a2"; }
+.bi-newspaper::before { content: "\f4a3"; }
+.bi-node-minus-fill::before { content: "\f4a4"; }
+.bi-node-minus::before { content: "\f4a5"; }
+.bi-node-plus-fill::before { content: "\f4a6"; }
+.bi-node-plus::before { content: "\f4a7"; }
+.bi-nut-fill::before { content: "\f4a8"; }
+.bi-nut::before { content: "\f4a9"; }
+.bi-octagon-fill::before { content: "\f4aa"; }
+.bi-octagon-half::before { content: "\f4ab"; }
+.bi-octagon::before { content: "\f4ac"; }
+.bi-option::before { content: "\f4ad"; }
+.bi-outlet::before { content: "\f4ae"; }
+.bi-paint-bucket::before { content: "\f4af"; }
+.bi-palette-fill::before { content: "\f4b0"; }
+.bi-palette::before { content: "\f4b1"; }
+.bi-palette2::before { content: "\f4b2"; }
+.bi-paperclip::before { content: "\f4b3"; }
+.bi-paragraph::before { content: "\f4b4"; }
+.bi-patch-check-fill::before { content: "\f4b5"; }
+.bi-patch-check::before { content: "\f4b6"; }
+.bi-patch-exclamation-fill::before { content: "\f4b7"; }
+.bi-patch-exclamation::before { content: "\f4b8"; }
+.bi-patch-minus-fill::before { content: "\f4b9"; }
+.bi-patch-minus::before { content: "\f4ba"; }
+.bi-patch-plus-fill::before { content: "\f4bb"; }
+.bi-patch-plus::before { content: "\f4bc"; }
+.bi-patch-question-fill::before { content: "\f4bd"; }
+.bi-patch-question::before { content: "\f4be"; }
+.bi-pause-btn-fill::before { content: "\f4bf"; }
+.bi-pause-btn::before { content: "\f4c0"; }
+.bi-pause-circle-fill::before { content: "\f4c1"; }
+.bi-pause-circle::before { content: "\f4c2"; }
+.bi-pause-fill::before { content: "\f4c3"; }
+.bi-pause::before { content: "\f4c4"; }
+.bi-peace-fill::before { content: "\f4c5"; }
+.bi-peace::before { content: "\f4c6"; }
+.bi-pen-fill::before { content: "\f4c7"; }
+.bi-pen::before { content: "\f4c8"; }
+.bi-pencil-fill::before { content: "\f4c9"; }
+.bi-pencil-square::before { content: "\f4ca"; }
+.bi-pencil::before { content: "\f4cb"; }
+.bi-pentagon-fill::before { content: "\f4cc"; }
+.bi-pentagon-half::before { content: "\f4cd"; }
+.bi-pentagon::before { content: "\f4ce"; }
+.bi-people-fill::before { content: "\f4cf"; }
+.bi-people::before { content: "\f4d0"; }
+.bi-percent::before { content: "\f4d1"; }
+.bi-person-badge-fill::before { content: "\f4d2"; }
+.bi-person-badge::before { content: "\f4d3"; }
+.bi-person-bounding-box::before { content: "\f4d4"; }
+.bi-person-check-fill::before { content: "\f4d5"; }
+.bi-person-check::before { content: "\f4d6"; }
+.bi-person-circle::before { content: "\f4d7"; }
+.bi-person-dash-fill::before { content: "\f4d8"; }
+.bi-person-dash::before { content: "\f4d9"; }
+.bi-person-fill::before { content: "\f4da"; }
+.bi-person-lines-fill::before { content: "\f4db"; }
+.bi-person-plus-fill::before { content: "\f4dc"; }
+.bi-person-plus::before { content: "\f4dd"; }
+.bi-person-square::before { content: "\f4de"; }
+.bi-person-x-fill::before { content: "\f4df"; }
+.bi-person-x::before { content: "\f4e0"; }
+.bi-person::before { content: "\f4e1"; }
+.bi-phone-fill::before { content: "\f4e2"; }
+.bi-phone-landscape-fill::before { content: "\f4e3"; }
+.bi-phone-landscape::before { content: "\f4e4"; }
+.bi-phone-vibrate-fill::before { content: "\f4e5"; }
+.bi-phone-vibrate::before { content: "\f4e6"; }
+.bi-phone::before { content: "\f4e7"; }
+.bi-pie-chart-fill::before { content: "\f4e8"; }
+.bi-pie-chart::before { content: "\f4e9"; }
+.bi-pin-angle-fill::before { content: "\f4ea"; }
+.bi-pin-angle::before { content: "\f4eb"; }
+.bi-pin-fill::before { content: "\f4ec"; }
+.bi-pin::before { content: "\f4ed"; }
+.bi-pip-fill::before { content: "\f4ee"; }
+.bi-pip::before { content: "\f4ef"; }
+.bi-play-btn-fill::before { content: "\f4f0"; }
+.bi-play-btn::before { content: "\f4f1"; }
+.bi-play-circle-fill::before { content: "\f4f2"; }
+.bi-play-circle::before { content: "\f4f3"; }
+.bi-play-fill::before { content: "\f4f4"; }
+.bi-play::before { content: "\f4f5"; }
+.bi-plug-fill::before { content: "\f4f6"; }
+.bi-plug::before { content: "\f4f7"; }
+.bi-plus-circle-dotted::before { content: "\f4f8"; }
+.bi-plus-circle-fill::before { content: "\f4f9"; }
+.bi-plus-circle::before { content: "\f4fa"; }
+.bi-plus-square-dotted::before { content: "\f4fb"; }
+.bi-plus-square-fill::before { content: "\f4fc"; }
+.bi-plus-square::before { content: "\f4fd"; }
+.bi-plus::before { content: "\f4fe"; }
+.bi-power::before { content: "\f4ff"; }
+.bi-printer-fill::before { content: "\f500"; }
+.bi-printer::before { content: "\f501"; }
+.bi-puzzle-fill::before { content: "\f502"; }
+.bi-puzzle::before { content: "\f503"; }
+.bi-question-circle-fill::before { content: "\f504"; }
+.bi-question-circle::before { content: "\f505"; }
+.bi-question-diamond-fill::before { content: "\f506"; }
+.bi-question-diamond::before { content: "\f507"; }
+.bi-question-octagon-fill::before { content: "\f508"; }
+.bi-question-octagon::before { content: "\f509"; }
+.bi-question-square-fill::before { content: "\f50a"; }
+.bi-question-square::before { content: "\f50b"; }
+.bi-question::before { content: "\f50c"; }
+.bi-rainbow::before { content: "\f50d"; }
+.bi-receipt-cutoff::before { content: "\f50e"; }
+.bi-receipt::before { content: "\f50f"; }
+.bi-reception-0::before { content: "\f510"; }
+.bi-reception-1::before { content: "\f511"; }
+.bi-reception-2::before { content: "\f512"; }
+.bi-reception-3::before { content: "\f513"; }
+.bi-reception-4::before { content: "\f514"; }
+.bi-record-btn-fill::before { content: "\f515"; }
+.bi-record-btn::before { content: "\f516"; }
+.bi-record-circle-fill::before { content: "\f517"; }
+.bi-record-circle::before { content: "\f518"; }
+.bi-record-fill::before { content: "\f519"; }
+.bi-record::before { content: "\f51a"; }
+.bi-record2-fill::before { content: "\f51b"; }
+.bi-record2::before { content: "\f51c"; }
+.bi-reply-all-fill::before { content: "\f51d"; }
+.bi-reply-all::before { content: "\f51e"; }
+.bi-reply-fill::before { content: "\f51f"; }
+.bi-reply::before { content: "\f520"; }
+.bi-rss-fill::before { content: "\f521"; }
+.bi-rss::before { content: "\f522"; }
+.bi-rulers::before { content: "\f523"; }
+.bi-save-fill::before { content: "\f524"; }
+.bi-save::before { content: "\f525"; }
+.bi-save2-fill::before { content: "\f526"; }
+.bi-save2::before { content: "\f527"; }
+.bi-scissors::before { content: "\f528"; }
+.bi-screwdriver::before { content: "\f529"; }
+.bi-search::before { content: "\f52a"; }
+.bi-segmented-nav::before { content: "\f52b"; }
+.bi-server::before { content: "\f52c"; }
+.bi-share-fill::before { content: "\f52d"; }
+.bi-share::before { content: "\f52e"; }
+.bi-shield-check::before { content: "\f52f"; }
+.bi-shield-exclamation::before { content: "\f530"; }
+.bi-shield-fill-check::before { content: "\f531"; }
+.bi-shield-fill-exclamation::before { content: "\f532"; }
+.bi-shield-fill-minus::before { content: "\f533"; }
+.bi-shield-fill-plus::before { content: "\f534"; }
+.bi-shield-fill-x::before { content: "\f535"; }
+.bi-shield-fill::before { content: "\f536"; }
+.bi-shield-lock-fill::before { content: "\f537"; }
+.bi-shield-lock::before { content: "\f538"; }
+.bi-shield-minus::before { content: "\f539"; }
+.bi-shield-plus::before { content: "\f53a"; }
+.bi-shield-shaded::before { content: "\f53b"; }
+.bi-shield-slash-fill::before { content: "\f53c"; }
+.bi-shield-slash::before { content: "\f53d"; }
+.bi-shield-x::before { content: "\f53e"; }
+.bi-shield::before { content: "\f53f"; }
+.bi-shift-fill::before { content: "\f540"; }
+.bi-shift::before { content: "\f541"; }
+.bi-shop-window::before { content: "\f542"; }
+.bi-shop::before { content: "\f543"; }
+.bi-shuffle::before { content: "\f544"; }
+.bi-signpost-2-fill::before { content: "\f545"; }
+.bi-signpost-2::before { content: "\f546"; }
+.bi-signpost-fill::before { content: "\f547"; }
+.bi-signpost-split-fill::before { content: "\f548"; }
+.bi-signpost-split::before { content: "\f549"; }
+.bi-signpost::before { content: "\f54a"; }
+.bi-sim-fill::before { content: "\f54b"; }
+.bi-sim::before { content: "\f54c"; }
+.bi-skip-backward-btn-fill::before { content: "\f54d"; }
+.bi-skip-backward-btn::before { content: "\f54e"; }
+.bi-skip-backward-circle-fill::before { content: "\f54f"; }
+.bi-skip-backward-circle::before { content: "\f550"; }
+.bi-skip-backward-fill::before { content: "\f551"; }
+.bi-skip-backward::before { content: "\f552"; }
+.bi-skip-end-btn-fill::before { content: "\f553"; }
+.bi-skip-end-btn::before { content: "\f554"; }
+.bi-skip-end-circle-fill::before { content: "\f555"; }
+.bi-skip-end-circle::before { content: "\f556"; }
+.bi-skip-end-fill::before { content: "\f557"; }
+.bi-skip-end::before { content: "\f558"; }
+.bi-skip-forward-btn-fill::before { content: "\f559"; }
+.bi-skip-forward-btn::before { content: "\f55a"; }
+.bi-skip-forward-circle-fill::before { content: "\f55b"; }
+.bi-skip-forward-circle::before { content: "\f55c"; }
+.bi-skip-forward-fill::before { content: "\f55d"; }
+.bi-skip-forward::before { content: "\f55e"; }
+.bi-skip-start-btn-fill::before { content: "\f55f"; }
+.bi-skip-start-btn::before { content: "\f560"; }
+.bi-skip-start-circle-fill::before { content: "\f561"; }
+.bi-skip-start-circle::before { content: "\f562"; }
+.bi-skip-start-fill::before { content: "\f563"; }
+.bi-skip-start::before { content: "\f564"; }
+.bi-slack::before { content: "\f565"; }
+.bi-slash-circle-fill::before { content: "\f566"; }
+.bi-slash-circle::before { content: "\f567"; }
+.bi-slash-square-fill::before { content: "\f568"; }
+.bi-slash-square::before { content: "\f569"; }
+.bi-slash::before { content: "\f56a"; }
+.bi-sliders::before { content: "\f56b"; }
+.bi-smartwatch::before { content: "\f56c"; }
+.bi-snow::before { content: "\f56d"; }
+.bi-snow2::before { content: "\f56e"; }
+.bi-snow3::before { content: "\f56f"; }
+.bi-sort-alpha-down-alt::before { content: "\f570"; }
+.bi-sort-alpha-down::before { content: "\f571"; }
+.bi-sort-alpha-up-alt::before { content: "\f572"; }
+.bi-sort-alpha-up::before { content: "\f573"; }
+.bi-sort-down-alt::before { content: "\f574"; }
+.bi-sort-down::before { content: "\f575"; }
+.bi-sort-numeric-down-alt::before { content: "\f576"; }
+.bi-sort-numeric-down::before { content: "\f577"; }
+.bi-sort-numeric-up-alt::before { content: "\f578"; }
+.bi-sort-numeric-up::before { content: "\f579"; }
+.bi-sort-up-alt::before { content: "\f57a"; }
+.bi-sort-up::before { content: "\f57b"; }
+.bi-soundwave::before { content: "\f57c"; }
+.bi-speaker-fill::before { content: "\f57d"; }
+.bi-speaker::before { content: "\f57e"; }
+.bi-speedometer::before { content: "\f57f"; }
+.bi-speedometer2::before { content: "\f580"; }
+.bi-spellcheck::before { content: "\f581"; }
+.bi-square-fill::before { content: "\f582"; }
+.bi-square-half::before { content: "\f583"; }
+.bi-square::before { content: "\f584"; }
+.bi-stack::before { content: "\f585"; }
+.bi-star-fill::before { content: "\f586"; }
+.bi-star-half::before { content: "\f587"; }
+.bi-star::before { content: "\f588"; }
+.bi-stars::before { content: "\f589"; }
+.bi-stickies-fill::before { content: "\f58a"; }
+.bi-stickies::before { content: "\f58b"; }
+.bi-sticky-fill::before { content: "\f58c"; }
+.bi-sticky::before { content: "\f58d"; }
+.bi-stop-btn-fill::before { content: "\f58e"; }
+.bi-stop-btn::before { content: "\f58f"; }
+.bi-stop-circle-fill::before { content: "\f590"; }
+.bi-stop-circle::before { content: "\f591"; }
+.bi-stop-fill::before { content: "\f592"; }
+.bi-stop::before { content: "\f593"; }
+.bi-stoplights-fill::before { content: "\f594"; }
+.bi-stoplights::before { content: "\f595"; }
+.bi-stopwatch-fill::before { content: "\f596"; }
+.bi-stopwatch::before { content: "\f597"; }
+.bi-subtract::before { content: "\f598"; }
+.bi-suit-club-fill::before { content: "\f599"; }
+.bi-suit-club::before { content: "\f59a"; }
+.bi-suit-diamond-fill::before { content: "\f59b"; }
+.bi-suit-diamond::before { content: "\f59c"; }
+.bi-suit-heart-fill::before { content: "\f59d"; }
+.bi-suit-heart::before { content: "\f59e"; }
+.bi-suit-spade-fill::before { content: "\f59f"; }
+.bi-suit-spade::before { content: "\f5a0"; }
+.bi-sun-fill::before { content: "\f5a1"; }
+.bi-sun::before { content: "\f5a2"; }
+.bi-sunglasses::before { content: "\f5a3"; }
+.bi-sunrise-fill::before { content: "\f5a4"; }
+.bi-sunrise::before { content: "\f5a5"; }
+.bi-sunset-fill::before { content: "\f5a6"; }
+.bi-sunset::before { content: "\f5a7"; }
+.bi-symmetry-horizontal::before { content: "\f5a8"; }
+.bi-symmetry-vertical::before { content: "\f5a9"; }
+.bi-table::before { content: "\f5aa"; }
+.bi-tablet-fill::before { content: "\f5ab"; }
+.bi-tablet-landscape-fill::before { content: "\f5ac"; }
+.bi-tablet-landscape::before { content: "\f5ad"; }
+.bi-tablet::before { content: "\f5ae"; }
+.bi-tag-fill::before { content: "\f5af"; }
+.bi-tag::before { content: "\f5b0"; }
+.bi-tags-fill::before { content: "\f5b1"; }
+.bi-tags::before { content: "\f5b2"; }
+.bi-telegram::before { content: "\f5b3"; }
+.bi-telephone-fill::before { content: "\f5b4"; }
+.bi-telephone-forward-fill::before { content: "\f5b5"; }
+.bi-telephone-forward::before { content: "\f5b6"; }
+.bi-telephone-inbound-fill::before { content: "\f5b7"; }
+.bi-telephone-inbound::before { content: "\f5b8"; }
+.bi-telephone-minus-fill::before { content: "\f5b9"; }
+.bi-telephone-minus::before { content: "\f5ba"; }
+.bi-telephone-outbound-fill::before { content: "\f5bb"; }
+.bi-telephone-outbound::before { content: "\f5bc"; }
+.bi-telephone-plus-fill::before { content: "\f5bd"; }
+.bi-telephone-plus::before { content: "\f5be"; }
+.bi-telephone-x-fill::before { content: "\f5bf"; }
+.bi-telephone-x::before { content: "\f5c0"; }
+.bi-telephone::before { content: "\f5c1"; }
+.bi-terminal-fill::before { content: "\f5c2"; }
+.bi-terminal::before { content: "\f5c3"; }
+.bi-text-center::before { content: "\f5c4"; }
+.bi-text-indent-left::before { content: "\f5c5"; }
+.bi-text-indent-right::before { content: "\f5c6"; }
+.bi-text-left::before { content: "\f5c7"; }
+.bi-text-paragraph::before { content: "\f5c8"; }
+.bi-text-right::before { content: "\f5c9"; }
+.bi-textarea-resize::before { content: "\f5ca"; }
+.bi-textarea-t::before { content: "\f5cb"; }
+.bi-textarea::before { content: "\f5cc"; }
+.bi-thermometer-half::before { content: "\f5cd"; }
+.bi-thermometer-high::before { content: "\f5ce"; }
+.bi-thermometer-low::before { content: "\f5cf"; }
+.bi-thermometer-snow::before { content: "\f5d0"; }
+.bi-thermometer-sun::before { content: "\f5d1"; }
+.bi-thermometer::before { content: "\f5d2"; }
+.bi-three-dots-vertical::before { content: "\f5d3"; }
+.bi-three-dots::before { content: "\f5d4"; }
+.bi-toggle-off::before { content: "\f5d5"; }
+.bi-toggle-on::before { content: "\f5d6"; }
+.bi-toggle2-off::before { content: "\f5d7"; }
+.bi-toggle2-on::before { content: "\f5d8"; }
+.bi-toggles::before { content: "\f5d9"; }
+.bi-toggles2::before { content: "\f5da"; }
+.bi-tools::before { content: "\f5db"; }
+.bi-tornado::before { content: "\f5dc"; }
+.bi-trash-fill::before { content: "\f5dd"; }
+.bi-trash::before { content: "\f5de"; }
+.bi-trash2-fill::before { content: "\f5df"; }
+.bi-trash2::before { content: "\f5e0"; }
+.bi-tree-fill::before { content: "\f5e1"; }
+.bi-tree::before { content: "\f5e2"; }
+.bi-triangle-fill::before { content: "\f5e3"; }
+.bi-triangle-half::before { content: "\f5e4"; }
+.bi-triangle::before { content: "\f5e5"; }
+.bi-trophy-fill::before { content: "\f5e6"; }
+.bi-trophy::before { content: "\f5e7"; }
+.bi-tropical-storm::before { content: "\f5e8"; }
+.bi-truck-flatbed::before { content: "\f5e9"; }
+.bi-truck::before { content: "\f5ea"; }
+.bi-tsunami::before { content: "\f5eb"; }
+.bi-tv-fill::before { content: "\f5ec"; }
+.bi-tv::before { content: "\f5ed"; }
+.bi-twitch::before { content: "\f5ee"; }
+.bi-twitter::before { content: "\f5ef"; }
+.bi-type-bold::before { content: "\f5f0"; }
+.bi-type-h1::before { content: "\f5f1"; }
+.bi-type-h2::before { content: "\f5f2"; }
+.bi-type-h3::before { content: "\f5f3"; }
+.bi-type-italic::before { content: "\f5f4"; }
+.bi-type-strikethrough::before { content: "\f5f5"; }
+.bi-type-underline::before { content: "\f5f6"; }
+.bi-type::before { content: "\f5f7"; }
+.bi-ui-checks-grid::before { content: "\f5f8"; }
+.bi-ui-checks::before { content: "\f5f9"; }
+.bi-ui-radios-grid::before { content: "\f5fa"; }
+.bi-ui-radios::before { content: "\f5fb"; }
+.bi-umbrella-fill::before { content: "\f5fc"; }
+.bi-umbrella::before { content: "\f5fd"; }
+.bi-union::before { content: "\f5fe"; }
+.bi-unlock-fill::before { content: "\f5ff"; }
+.bi-unlock::before { content: "\f600"; }
+.bi-upc-scan::before { content: "\f601"; }
+.bi-upc::before { content: "\f602"; }
+.bi-upload::before { content: "\f603"; }
+.bi-vector-pen::before { content: "\f604"; }
+.bi-view-list::before { content: "\f605"; }
+.bi-view-stacked::before { content: "\f606"; }
+.bi-vinyl-fill::before { content: "\f607"; }
+.bi-vinyl::before { content: "\f608"; }
+.bi-voicemail::before { content: "\f609"; }
+.bi-volume-down-fill::before { content: "\f60a"; }
+.bi-volume-down::before { content: "\f60b"; }
+.bi-volume-mute-fill::before { content: "\f60c"; }
+.bi-volume-mute::before { content: "\f60d"; }
+.bi-volume-off-fill::before { content: "\f60e"; }
+.bi-volume-off::before { content: "\f60f"; }
+.bi-volume-up-fill::before { content: "\f610"; }
+.bi-volume-up::before { content: "\f611"; }
+.bi-vr::before { content: "\f612"; }
+.bi-wallet-fill::before { content: "\f613"; }
+.bi-wallet::before { content: "\f614"; }
+.bi-wallet2::before { content: "\f615"; }
+.bi-watch::before { content: "\f616"; }
+.bi-water::before { content: "\f617"; }
+.bi-whatsapp::before { content: "\f618"; }
+.bi-wifi-1::before { content: "\f619"; }
+.bi-wifi-2::before { content: "\f61a"; }
+.bi-wifi-off::before { content: "\f61b"; }
+.bi-wifi::before { content: "\f61c"; }
+.bi-wind::before { content: "\f61d"; }
+.bi-window-dock::before { content: "\f61e"; }
+.bi-window-sidebar::before { content: "\f61f"; }
+.bi-window::before { content: "\f620"; }
+.bi-wrench::before { content: "\f621"; }
+.bi-x-circle-fill::before { content: "\f622"; }
+.bi-x-circle::before { content: "\f623"; }
+.bi-x-diamond-fill::before { content: "\f624"; }
+.bi-x-diamond::before { content: "\f625"; }
+.bi-x-octagon-fill::before { content: "\f626"; }
+.bi-x-octagon::before { content: "\f627"; }
+.bi-x-square-fill::before { content: "\f628"; }
+.bi-x-square::before { content: "\f629"; }
+.bi-x::before { content: "\f62a"; }
+.bi-youtube::before { content: "\f62b"; }
+.bi-zoom-in::before { content: "\f62c"; }
+.bi-zoom-out::before { content: "\f62d"; }
+.bi-bank::before { content: "\f62e"; }
+.bi-bank2::before { content: "\f62f"; }
+.bi-bell-slash-fill::before { content: "\f630"; }
+.bi-bell-slash::before { content: "\f631"; }
+.bi-cash-coin::before { content: "\f632"; }
+.bi-check-lg::before { content: "\f633"; }
+.bi-coin::before { content: "\f634"; }
+.bi-currency-bitcoin::before { content: "\f635"; }
+.bi-currency-dollar::before { content: "\f636"; }
+.bi-currency-euro::before { content: "\f637"; }
+.bi-currency-exchange::before { content: "\f638"; }
+.bi-currency-pound::before { content: "\f639"; }
+.bi-currency-yen::before { content: "\f63a"; }
+.bi-dash-lg::before { content: "\f63b"; }
+.bi-exclamation-lg::before { content: "\f63c"; }
+.bi-file-earmark-pdf-fill::before { content: "\f63d"; }
+.bi-file-earmark-pdf::before { content: "\f63e"; }
+.bi-file-pdf-fill::before { content: "\f63f"; }
+.bi-file-pdf::before { content: "\f640"; }
+.bi-gender-ambiguous::before { content: "\f641"; }
+.bi-gender-female::before { content: "\f642"; }
+.bi-gender-male::before { content: "\f643"; }
+.bi-gender-trans::before { content: "\f644"; }
+.bi-headset-vr::before { content: "\f645"; }
+.bi-info-lg::before { content: "\f646"; }
+.bi-mastodon::before { content: "\f647"; }
+.bi-messenger::before { content: "\f648"; }
+.bi-piggy-bank-fill::before { content: "\f649"; }
+.bi-piggy-bank::before { content: "\f64a"; }
+.bi-pin-map-fill::before { content: "\f64b"; }
+.bi-pin-map::before { content: "\f64c"; }
+.bi-plus-lg::before { content: "\f64d"; }
+.bi-question-lg::before { content: "\f64e"; }
+.bi-recycle::before { content: "\f64f"; }
+.bi-reddit::before { content: "\f650"; }
+.bi-safe-fill::before { content: "\f651"; }
+.bi-safe2-fill::before { content: "\f652"; }
+.bi-safe2::before { content: "\f653"; }
+.bi-sd-card-fill::before { content: "\f654"; }
+.bi-sd-card::before { content: "\f655"; }
+.bi-skype::before { content: "\f656"; }
+.bi-slash-lg::before { content: "\f657"; }
+.bi-translate::before { content: "\f658"; }
+.bi-x-lg::before { content: "\f659"; }
+.bi-safe::before { content: "\f65a"; }
+.bi-apple::before { content: "\f65b"; }
+.bi-microsoft::before { content: "\f65d"; }
+.bi-windows::before { content: "\f65e"; }
+.bi-behance::before { content: "\f65c"; }
+.bi-dribbble::before { content: "\f65f"; }
+.bi-line::before { content: "\f660"; }
+.bi-medium::before { content: "\f661"; }
+.bi-paypal::before { content: "\f662"; }
+.bi-pinterest::before { content: "\f663"; }
+.bi-signal::before { content: "\f664"; }
+.bi-snapchat::before { content: "\f665"; }
+.bi-spotify::before { content: "\f666"; }
+.bi-stack-overflow::before { content: "\f667"; }
+.bi-strava::before { content: "\f668"; }
+.bi-wordpress::before { content: "\f669"; }
+.bi-vimeo::before { content: "\f66a"; }
+.bi-activity::before { content: "\f66b"; }
+.bi-easel2-fill::before { content: "\f66c"; }
+.bi-easel2::before { content: "\f66d"; }
+.bi-easel3-fill::before { content: "\f66e"; }
+.bi-easel3::before { content: "\f66f"; }
+.bi-fan::before { content: "\f670"; }
+.bi-fingerprint::before { content: "\f671"; }
+.bi-graph-down-arrow::before { content: "\f672"; }
+.bi-graph-up-arrow::before { content: "\f673"; }
+.bi-hypnotize::before { content: "\f674"; }
+.bi-magic::before { content: "\f675"; }
+.bi-person-rolodex::before { content: "\f676"; }
+.bi-person-video::before { content: "\f677"; }
+.bi-person-video2::before { content: "\f678"; }
+.bi-person-video3::before { content: "\f679"; }
+.bi-person-workspace::before { content: "\f67a"; }
+.bi-radioactive::before { content: "\f67b"; }
+.bi-webcam-fill::before { content: "\f67c"; }
+.bi-webcam::before { content: "\f67d"; }
+.bi-yin-yang::before { content: "\f67e"; }
+.bi-bandaid-fill::before { content: "\f680"; }
+.bi-bandaid::before { content: "\f681"; }
+.bi-bluetooth::before { content: "\f682"; }
+.bi-body-text::before { content: "\f683"; }
+.bi-boombox::before { content: "\f684"; }
+.bi-boxes::before { content: "\f685"; }
+.bi-dpad-fill::before { content: "\f686"; }
+.bi-dpad::before { content: "\f687"; }
+.bi-ear-fill::before { content: "\f688"; }
+.bi-ear::before { content: "\f689"; }
+.bi-envelope-check-fill::before { content: "\f68b"; }
+.bi-envelope-check::before { content: "\f68c"; }
+.bi-envelope-dash-fill::before { content: "\f68e"; }
+.bi-envelope-dash::before { content: "\f68f"; }
+.bi-envelope-exclamation-fill::before { content: "\f691"; }
+.bi-envelope-exclamation::before { content: "\f692"; }
+.bi-envelope-plus-fill::before { content: "\f693"; }
+.bi-envelope-plus::before { content: "\f694"; }
+.bi-envelope-slash-fill::before { content: "\f696"; }
+.bi-envelope-slash::before { content: "\f697"; }
+.bi-envelope-x-fill::before { content: "\f699"; }
+.bi-envelope-x::before { content: "\f69a"; }
+.bi-explicit-fill::before { content: "\f69b"; }
+.bi-explicit::before { content: "\f69c"; }
+.bi-git::before { content: "\f69d"; }
+.bi-infinity::before { content: "\f69e"; }
+.bi-list-columns-reverse::before { content: "\f69f"; }
+.bi-list-columns::before { content: "\f6a0"; }
+.bi-meta::before { content: "\f6a1"; }
+.bi-nintendo-switch::before { content: "\f6a4"; }
+.bi-pc-display-horizontal::before { content: "\f6a5"; }
+.bi-pc-display::before { content: "\f6a6"; }
+.bi-pc-horizontal::before { content: "\f6a7"; }
+.bi-pc::before { content: "\f6a8"; }
+.bi-playstation::before { content: "\f6a9"; }
+.bi-plus-slash-minus::before { content: "\f6aa"; }
+.bi-projector-fill::before { content: "\f6ab"; }
+.bi-projector::before { content: "\f6ac"; }
+.bi-qr-code-scan::before { content: "\f6ad"; }
+.bi-qr-code::before { content: "\f6ae"; }
+.bi-quora::before { content: "\f6af"; }
+.bi-quote::before { content: "\f6b0"; }
+.bi-robot::before { content: "\f6b1"; }
+.bi-send-check-fill::before { content: "\f6b2"; }
+.bi-send-check::before { content: "\f6b3"; }
+.bi-send-dash-fill::before { content: "\f6b4"; }
+.bi-send-dash::before { content: "\f6b5"; }
+.bi-send-exclamation-fill::before { content: "\f6b7"; }
+.bi-send-exclamation::before { content: "\f6b8"; }
+.bi-send-fill::before { content: "\f6b9"; }
+.bi-send-plus-fill::before { content: "\f6ba"; }
+.bi-send-plus::before { content: "\f6bb"; }
+.bi-send-slash-fill::before { content: "\f6bc"; }
+.bi-send-slash::before { content: "\f6bd"; }
+.bi-send-x-fill::before { content: "\f6be"; }
+.bi-send-x::before { content: "\f6bf"; }
+.bi-send::before { content: "\f6c0"; }
+.bi-steam::before { content: "\f6c1"; }
+.bi-terminal-dash::before { content: "\f6c3"; }
+.bi-terminal-plus::before { content: "\f6c4"; }
+.bi-terminal-split::before { content: "\f6c5"; }
+.bi-ticket-detailed-fill::before { content: "\f6c6"; }
+.bi-ticket-detailed::before { content: "\f6c7"; }
+.bi-ticket-fill::before { content: "\f6c8"; }
+.bi-ticket-perforated-fill::before { content: "\f6c9"; }
+.bi-ticket-perforated::before { content: "\f6ca"; }
+.bi-ticket::before { content: "\f6cb"; }
+.bi-tiktok::before { content: "\f6cc"; }
+.bi-window-dash::before { content: "\f6cd"; }
+.bi-window-desktop::before { content: "\f6ce"; }
+.bi-window-fullscreen::before { content: "\f6cf"; }
+.bi-window-plus::before { content: "\f6d0"; }
+.bi-window-split::before { content: "\f6d1"; }
+.bi-window-stack::before { content: "\f6d2"; }
+.bi-window-x::before { content: "\f6d3"; }
+.bi-xbox::before { content: "\f6d4"; }
+.bi-ethernet::before { content: "\f6d5"; }
+.bi-hdmi-fill::before { content: "\f6d6"; }
+.bi-hdmi::before { content: "\f6d7"; }
+.bi-usb-c-fill::before { content: "\f6d8"; }
+.bi-usb-c::before { content: "\f6d9"; }
+.bi-usb-fill::before { content: "\f6da"; }
+.bi-usb-plug-fill::before { content: "\f6db"; }
+.bi-usb-plug::before { content: "\f6dc"; }
+.bi-usb-symbol::before { content: "\f6dd"; }
+.bi-usb::before { content: "\f6de"; }
+.bi-boombox-fill::before { content: "\f6df"; }
+.bi-displayport::before { content: "\f6e1"; }
+.bi-gpu-card::before { content: "\f6e2"; }
+.bi-memory::before { content: "\f6e3"; }
+.bi-modem-fill::before { content: "\f6e4"; }
+.bi-modem::before { content: "\f6e5"; }
+.bi-motherboard-fill::before { content: "\f6e6"; }
+.bi-motherboard::before { content: "\f6e7"; }
+.bi-optical-audio-fill::before { content: "\f6e8"; }
+.bi-optical-audio::before { content: "\f6e9"; }
+.bi-pci-card::before { content: "\f6ea"; }
+.bi-router-fill::before { content: "\f6eb"; }
+.bi-router::before { content: "\f6ec"; }
+.bi-thunderbolt-fill::before { content: "\f6ef"; }
+.bi-thunderbolt::before { content: "\f6f0"; }
+.bi-usb-drive-fill::before { content: "\f6f1"; }
+.bi-usb-drive::before { content: "\f6f2"; }
+.bi-usb-micro-fill::before { content: "\f6f3"; }
+.bi-usb-micro::before { content: "\f6f4"; }
+.bi-usb-mini-fill::before { content: "\f6f5"; }
+.bi-usb-mini::before { content: "\f6f6"; }
+.bi-cloud-haze2::before { content: "\f6f7"; }
+.bi-device-hdd-fill::before { content: "\f6f8"; }
+.bi-device-hdd::before { content: "\f6f9"; }
+.bi-device-ssd-fill::before { content: "\f6fa"; }
+.bi-device-ssd::before { content: "\f6fb"; }
+.bi-displayport-fill::before { content: "\f6fc"; }
+.bi-mortarboard-fill::before { content: "\f6fd"; }
+.bi-mortarboard::before { content: "\f6fe"; }
+.bi-terminal-x::before { content: "\f6ff"; }
+.bi-arrow-through-heart-fill::before { content: "\f700"; }
+.bi-arrow-through-heart::before { content: "\f701"; }
+.bi-badge-sd-fill::before { content: "\f702"; }
+.bi-badge-sd::before { content: "\f703"; }
+.bi-bag-heart-fill::before { content: "\f704"; }
+.bi-bag-heart::before { content: "\f705"; }
+.bi-balloon-fill::before { content: "\f706"; }
+.bi-balloon-heart-fill::before { content: "\f707"; }
+.bi-balloon-heart::before { content: "\f708"; }
+.bi-balloon::before { content: "\f709"; }
+.bi-box2-fill::before { content: "\f70a"; }
+.bi-box2-heart-fill::before { content: "\f70b"; }
+.bi-box2-heart::before { content: "\f70c"; }
+.bi-box2::before { content: "\f70d"; }
+.bi-braces-asterisk::before { content: "\f70e"; }
+.bi-calendar-heart-fill::before { content: "\f70f"; }
+.bi-calendar-heart::before { content: "\f710"; }
+.bi-calendar2-heart-fill::before { content: "\f711"; }
+.bi-calendar2-heart::before { content: "\f712"; }
+.bi-chat-heart-fill::before { content: "\f713"; }
+.bi-chat-heart::before { content: "\f714"; }
+.bi-chat-left-heart-fill::before { content: "\f715"; }
+.bi-chat-left-heart::before { content: "\f716"; }
+.bi-chat-right-heart-fill::before { content: "\f717"; }
+.bi-chat-right-heart::before { content: "\f718"; }
+.bi-chat-square-heart-fill::before { content: "\f719"; }
+.bi-chat-square-heart::before { content: "\f71a"; }
+.bi-clipboard-check-fill::before { content: "\f71b"; }
+.bi-clipboard-data-fill::before { content: "\f71c"; }
+.bi-clipboard-fill::before { content: "\f71d"; }
+.bi-clipboard-heart-fill::before { content: "\f71e"; }
+.bi-clipboard-heart::before { content: "\f71f"; }
+.bi-clipboard-minus-fill::before { content: "\f720"; }
+.bi-clipboard-plus-fill::before { content: "\f721"; }
+.bi-clipboard-pulse::before { content: "\f722"; }
+.bi-clipboard-x-fill::before { content: "\f723"; }
+.bi-clipboard2-check-fill::before { content: "\f724"; }
+.bi-clipboard2-check::before { content: "\f725"; }
+.bi-clipboard2-data-fill::before { content: "\f726"; }
+.bi-clipboard2-data::before { content: "\f727"; }
+.bi-clipboard2-fill::before { content: "\f728"; }
+.bi-clipboard2-heart-fill::before { content: "\f729"; }
+.bi-clipboard2-heart::before { content: "\f72a"; }
+.bi-clipboard2-minus-fill::before { content: "\f72b"; }
+.bi-clipboard2-minus::before { content: "\f72c"; }
+.bi-clipboard2-plus-fill::before { content: "\f72d"; }
+.bi-clipboard2-plus::before { content: "\f72e"; }
+.bi-clipboard2-pulse-fill::before { content: "\f72f"; }
+.bi-clipboard2-pulse::before { content: "\f730"; }
+.bi-clipboard2-x-fill::before { content: "\f731"; }
+.bi-clipboard2-x::before { content: "\f732"; }
+.bi-clipboard2::before { content: "\f733"; }
+.bi-emoji-kiss-fill::before { content: "\f734"; }
+.bi-emoji-kiss::before { content: "\f735"; }
+.bi-envelope-heart-fill::before { content: "\f736"; }
+.bi-envelope-heart::before { content: "\f737"; }
+.bi-envelope-open-heart-fill::before { content: "\f738"; }
+.bi-envelope-open-heart::before { content: "\f739"; }
+.bi-envelope-paper-fill::before { content: "\f73a"; }
+.bi-envelope-paper-heart-fill::before { content: "\f73b"; }
+.bi-envelope-paper-heart::before { content: "\f73c"; }
+.bi-envelope-paper::before { content: "\f73d"; }
+.bi-filetype-aac::before { content: "\f73e"; }
+.bi-filetype-ai::before { content: "\f73f"; }
+.bi-filetype-bmp::before { content: "\f740"; }
+.bi-filetype-cs::before { content: "\f741"; }
+.bi-filetype-css::before { content: "\f742"; }
+.bi-filetype-csv::before { content: "\f743"; }
+.bi-filetype-doc::before { content: "\f744"; }
+.bi-filetype-docx::before { content: "\f745"; }
+.bi-filetype-exe::before { content: "\f746"; }
+.bi-filetype-gif::before { content: "\f747"; }
+.bi-filetype-heic::before { content: "\f748"; }
+.bi-filetype-html::before { content: "\f749"; }
+.bi-filetype-java::before { content: "\f74a"; }
+.bi-filetype-jpg::before { content: "\f74b"; }
+.bi-filetype-js::before { content: "\f74c"; }
+.bi-filetype-jsx::before { content: "\f74d"; }
+.bi-filetype-key::before { content: "\f74e"; }
+.bi-filetype-m4p::before { content: "\f74f"; }
+.bi-filetype-md::before { content: "\f750"; }
+.bi-filetype-mdx::before { content: "\f751"; }
+.bi-filetype-mov::before { content: "\f752"; }
+.bi-filetype-mp3::before { content: "\f753"; }
+.bi-filetype-mp4::before { content: "\f754"; }
+.bi-filetype-otf::before { content: "\f755"; }
+.bi-filetype-pdf::before { content: "\f756"; }
+.bi-filetype-php::before { content: "\f757"; }
+.bi-filetype-png::before { content: "\f758"; }
+.bi-filetype-ppt::before { content: "\f75a"; }
+.bi-filetype-psd::before { content: "\f75b"; }
+.bi-filetype-py::before { content: "\f75c"; }
+.bi-filetype-raw::before { content: "\f75d"; }
+.bi-filetype-rb::before { content: "\f75e"; }
+.bi-filetype-sass::before { content: "\f75f"; }
+.bi-filetype-scss::before { content: "\f760"; }
+.bi-filetype-sh::before { content: "\f761"; }
+.bi-filetype-svg::before { content: "\f762"; }
+.bi-filetype-tiff::before { content: "\f763"; }
+.bi-filetype-tsx::before { content: "\f764"; }
+.bi-filetype-ttf::before { content: "\f765"; }
+.bi-filetype-txt::before { content: "\f766"; }
+.bi-filetype-wav::before { content: "\f767"; }
+.bi-filetype-woff::before { content: "\f768"; }
+.bi-filetype-xls::before { content: "\f76a"; }
+.bi-filetype-xml::before { content: "\f76b"; }
+.bi-filetype-yml::before { content: "\f76c"; }
+.bi-heart-arrow::before { content: "\f76d"; }
+.bi-heart-pulse-fill::before { content: "\f76e"; }
+.bi-heart-pulse::before { content: "\f76f"; }
+.bi-heartbreak-fill::before { content: "\f770"; }
+.bi-heartbreak::before { content: "\f771"; }
+.bi-hearts::before { content: "\f772"; }
+.bi-hospital-fill::before { content: "\f773"; }
+.bi-hospital::before { content: "\f774"; }
+.bi-house-heart-fill::before { content: "\f775"; }
+.bi-house-heart::before { content: "\f776"; }
+.bi-incognito::before { content: "\f777"; }
+.bi-magnet-fill::before { content: "\f778"; }
+.bi-magnet::before { content: "\f779"; }
+.bi-person-heart::before { content: "\f77a"; }
+.bi-person-hearts::before { content: "\f77b"; }
+.bi-phone-flip::before { content: "\f77c"; }
+.bi-plugin::before { content: "\f77d"; }
+.bi-postage-fill::before { content: "\f77e"; }
+.bi-postage-heart-fill::before { content: "\f77f"; }
+.bi-postage-heart::before { content: "\f780"; }
+.bi-postage::before { content: "\f781"; }
+.bi-postcard-fill::before { content: "\f782"; }
+.bi-postcard-heart-fill::before { content: "\f783"; }
+.bi-postcard-heart::before { content: "\f784"; }
+.bi-postcard::before { content: "\f785"; }
+.bi-search-heart-fill::before { content: "\f786"; }
+.bi-search-heart::before { content: "\f787"; }
+.bi-sliders2-vertical::before { content: "\f788"; }
+.bi-sliders2::before { content: "\f789"; }
+.bi-trash3-fill::before { content: "\f78a"; }
+.bi-trash3::before { content: "\f78b"; }
+.bi-valentine::before { content: "\f78c"; }
+.bi-valentine2::before { content: "\f78d"; }
+.bi-wrench-adjustable-circle-fill::before { content: "\f78e"; }
+.bi-wrench-adjustable-circle::before { content: "\f78f"; }
+.bi-wrench-adjustable::before { content: "\f790"; }
+.bi-filetype-json::before { content: "\f791"; }
+.bi-filetype-pptx::before { content: "\f792"; }
+.bi-filetype-xlsx::before { content: "\f793"; }
+.bi-1-circle-fill::before { content: "\f796"; }
+.bi-1-circle::before { content: "\f797"; }
+.bi-1-square-fill::before { content: "\f798"; }
+.bi-1-square::before { content: "\f799"; }
+.bi-2-circle-fill::before { content: "\f79c"; }
+.bi-2-circle::before { content: "\f79d"; }
+.bi-2-square-fill::before { content: "\f79e"; }
+.bi-2-square::before { content: "\f79f"; }
+.bi-3-circle-fill::before { content: "\f7a2"; }
+.bi-3-circle::before { content: "\f7a3"; }
+.bi-3-square-fill::before { content: "\f7a4"; }
+.bi-3-square::before { content: "\f7a5"; }
+.bi-4-circle-fill::before { content: "\f7a8"; }
+.bi-4-circle::before { content: "\f7a9"; }
+.bi-4-square-fill::before { content: "\f7aa"; }
+.bi-4-square::before { content: "\f7ab"; }
+.bi-5-circle-fill::before { content: "\f7ae"; }
+.bi-5-circle::before { content: "\f7af"; }
+.bi-5-square-fill::before { content: "\f7b0"; }
+.bi-5-square::before { content: "\f7b1"; }
+.bi-6-circle-fill::before { content: "\f7b4"; }
+.bi-6-circle::before { content: "\f7b5"; }
+.bi-6-square-fill::before { content: "\f7b6"; }
+.bi-6-square::before { content: "\f7b7"; }
+.bi-7-circle-fill::before { content: "\f7ba"; }
+.bi-7-circle::before { content: "\f7bb"; }
+.bi-7-square-fill::before { content: "\f7bc"; }
+.bi-7-square::before { content: "\f7bd"; }
+.bi-8-circle-fill::before { content: "\f7c0"; }
+.bi-8-circle::before { content: "\f7c1"; }
+.bi-8-square-fill::before { content: "\f7c2"; }
+.bi-8-square::before { content: "\f7c3"; }
+.bi-9-circle-fill::before { content: "\f7c6"; }
+.bi-9-circle::before { content: "\f7c7"; }
+.bi-9-square-fill::before { content: "\f7c8"; }
+.bi-9-square::before { content: "\f7c9"; }
+.bi-airplane-engines-fill::before { content: "\f7ca"; }
+.bi-airplane-engines::before { content: "\f7cb"; }
+.bi-airplane-fill::before { content: "\f7cc"; }
+.bi-airplane::before { content: "\f7cd"; }
+.bi-alexa::before { content: "\f7ce"; }
+.bi-alipay::before { content: "\f7cf"; }
+.bi-android::before { content: "\f7d0"; }
+.bi-android2::before { content: "\f7d1"; }
+.bi-box-fill::before { content: "\f7d2"; }
+.bi-box-seam-fill::before { content: "\f7d3"; }
+.bi-browser-chrome::before { content: "\f7d4"; }
+.bi-browser-edge::before { content: "\f7d5"; }
+.bi-browser-firefox::before { content: "\f7d6"; }
+.bi-browser-safari::before { content: "\f7d7"; }
+.bi-c-circle-fill::before { content: "\f7da"; }
+.bi-c-circle::before { content: "\f7db"; }
+.bi-c-square-fill::before { content: "\f7dc"; }
+.bi-c-square::before { content: "\f7dd"; }
+.bi-capsule-pill::before { content: "\f7de"; }
+.bi-capsule::before { content: "\f7df"; }
+.bi-car-front-fill::before { content: "\f7e0"; }
+.bi-car-front::before { content: "\f7e1"; }
+.bi-cassette-fill::before { content: "\f7e2"; }
+.bi-cassette::before { content: "\f7e3"; }
+.bi-cc-circle-fill::before { content: "\f7e6"; }
+.bi-cc-circle::before { content: "\f7e7"; }
+.bi-cc-square-fill::before { content: "\f7e8"; }
+.bi-cc-square::before { content: "\f7e9"; }
+.bi-cup-hot-fill::before { content: "\f7ea"; }
+.bi-cup-hot::before { content: "\f7eb"; }
+.bi-currency-rupee::before { content: "\f7ec"; }
+.bi-dropbox::before { content: "\f7ed"; }
+.bi-escape::before { content: "\f7ee"; }
+.bi-fast-forward-btn-fill::before { content: "\f7ef"; }
+.bi-fast-forward-btn::before { content: "\f7f0"; }
+.bi-fast-forward-circle-fill::before { content: "\f7f1"; }
+.bi-fast-forward-circle::before { content: "\f7f2"; }
+.bi-fast-forward-fill::before { content: "\f7f3"; }
+.bi-fast-forward::before { content: "\f7f4"; }
+.bi-filetype-sql::before { content: "\f7f5"; }
+.bi-fire::before { content: "\f7f6"; }
+.bi-google-play::before { content: "\f7f7"; }
+.bi-h-circle-fill::before { content: "\f7fa"; }
+.bi-h-circle::before { content: "\f7fb"; }
+.bi-h-square-fill::before { content: "\f7fc"; }
+.bi-h-square::before { content: "\f7fd"; }
+.bi-indent::before { content: "\f7fe"; }
+.bi-lungs-fill::before { content: "\f7ff"; }
+.bi-lungs::before { content: "\f800"; }
+.bi-microsoft-teams::before { content: "\f801"; }
+.bi-p-circle-fill::before { content: "\f804"; }
+.bi-p-circle::before { content: "\f805"; }
+.bi-p-square-fill::before { content: "\f806"; }
+.bi-p-square::before { content: "\f807"; }
+.bi-pass-fill::before { content: "\f808"; }
+.bi-pass::before { content: "\f809"; }
+.bi-prescription::before { content: "\f80a"; }
+.bi-prescription2::before { content: "\f80b"; }
+.bi-r-circle-fill::before { content: "\f80e"; }
+.bi-r-circle::before { content: "\f80f"; }
+.bi-r-square-fill::before { content: "\f810"; }
+.bi-r-square::before { content: "\f811"; }
+.bi-repeat-1::before { content: "\f812"; }
+.bi-repeat::before { content: "\f813"; }
+.bi-rewind-btn-fill::before { content: "\f814"; }
+.bi-rewind-btn::before { content: "\f815"; }
+.bi-rewind-circle-fill::before { content: "\f816"; }
+.bi-rewind-circle::before { content: "\f817"; }
+.bi-rewind-fill::before { content: "\f818"; }
+.bi-rewind::before { content: "\f819"; }
+.bi-train-freight-front-fill::before { content: "\f81a"; }
+.bi-train-freight-front::before { content: "\f81b"; }
+.bi-train-front-fill::before { content: "\f81c"; }
+.bi-train-front::before { content: "\f81d"; }
+.bi-train-lightrail-front-fill::before { content: "\f81e"; }
+.bi-train-lightrail-front::before { content: "\f81f"; }
+.bi-truck-front-fill::before { content: "\f820"; }
+.bi-truck-front::before { content: "\f821"; }
+.bi-ubuntu::before { content: "\f822"; }
+.bi-unindent::before { content: "\f823"; }
+.bi-unity::before { content: "\f824"; }
+.bi-universal-access-circle::before { content: "\f825"; }
+.bi-universal-access::before { content: "\f826"; }
+.bi-virus::before { content: "\f827"; }
+.bi-virus2::before { content: "\f828"; }
+.bi-wechat::before { content: "\f829"; }
+.bi-yelp::before { content: "\f82a"; }
+.bi-sign-stop-fill::before { content: "\f82b"; }
+.bi-sign-stop-lights-fill::before { content: "\f82c"; }
+.bi-sign-stop-lights::before { content: "\f82d"; }
+.bi-sign-stop::before { content: "\f82e"; }
+.bi-sign-turn-left-fill::before { content: "\f82f"; }
+.bi-sign-turn-left::before { content: "\f830"; }
+.bi-sign-turn-right-fill::before { content: "\f831"; }
+.bi-sign-turn-right::before { content: "\f832"; }
+.bi-sign-turn-slight-left-fill::before { content: "\f833"; }
+.bi-sign-turn-slight-left::before { content: "\f834"; }
+.bi-sign-turn-slight-right-fill::before { content: "\f835"; }
+.bi-sign-turn-slight-right::before { content: "\f836"; }
+.bi-sign-yield-fill::before { content: "\f837"; }
+.bi-sign-yield::before { content: "\f838"; }
+.bi-ev-station-fill::before { content: "\f839"; }
+.bi-ev-station::before { content: "\f83a"; }
+.bi-fuel-pump-diesel-fill::before { content: "\f83b"; }
+.bi-fuel-pump-diesel::before { content: "\f83c"; }
+.bi-fuel-pump-fill::before { content: "\f83d"; }
+.bi-fuel-pump::before { content: "\f83e"; }
+.bi-0-circle-fill::before { content: "\f83f"; }
+.bi-0-circle::before { content: "\f840"; }
+.bi-0-square-fill::before { content: "\f841"; }
+.bi-0-square::before { content: "\f842"; }
+.bi-rocket-fill::before { content: "\f843"; }
+.bi-rocket-takeoff-fill::before { content: "\f844"; }
+.bi-rocket-takeoff::before { content: "\f845"; }
+.bi-rocket::before { content: "\f846"; }
+.bi-stripe::before { content: "\f847"; }
+.bi-subscript::before { content: "\f848"; }
+.bi-superscript::before { content: "\f849"; }
+.bi-trello::before { content: "\f84a"; }
+.bi-envelope-at-fill::before { content: "\f84b"; }
+.bi-envelope-at::before { content: "\f84c"; }
+.bi-regex::before { content: "\f84d"; }
+.bi-text-wrap::before { content: "\f84e"; }
+.bi-sign-dead-end-fill::before { content: "\f84f"; }
+.bi-sign-dead-end::before { content: "\f850"; }
+.bi-sign-do-not-enter-fill::before { content: "\f851"; }
+.bi-sign-do-not-enter::before { content: "\f852"; }
+.bi-sign-intersection-fill::before { content: "\f853"; }
+.bi-sign-intersection-side-fill::before { content: "\f854"; }
+.bi-sign-intersection-side::before { content: "\f855"; }
+.bi-sign-intersection-t-fill::before { content: "\f856"; }
+.bi-sign-intersection-t::before { content: "\f857"; }
+.bi-sign-intersection-y-fill::before { content: "\f858"; }
+.bi-sign-intersection-y::before { content: "\f859"; }
+.bi-sign-intersection::before { content: "\f85a"; }
+.bi-sign-merge-left-fill::before { content: "\f85b"; }
+.bi-sign-merge-left::before { content: "\f85c"; }
+.bi-sign-merge-right-fill::before { content: "\f85d"; }
+.bi-sign-merge-right::before { content: "\f85e"; }
+.bi-sign-no-left-turn-fill::before { content: "\f85f"; }
+.bi-sign-no-left-turn::before { content: "\f860"; }
+.bi-sign-no-parking-fill::before { content: "\f861"; }
+.bi-sign-no-parking::before { content: "\f862"; }
+.bi-sign-no-right-turn-fill::before { content: "\f863"; }
+.bi-sign-no-right-turn::before { content: "\f864"; }
+.bi-sign-railroad-fill::before { content: "\f865"; }
+.bi-sign-railroad::before { content: "\f866"; }
+.bi-building-add::before { content: "\f867"; }
+.bi-building-check::before { content: "\f868"; }
+.bi-building-dash::before { content: "\f869"; }
+.bi-building-down::before { content: "\f86a"; }
+.bi-building-exclamation::before { content: "\f86b"; }
+.bi-building-fill-add::before { content: "\f86c"; }
+.bi-building-fill-check::before { content: "\f86d"; }
+.bi-building-fill-dash::before { content: "\f86e"; }
+.bi-building-fill-down::before { content: "\f86f"; }
+.bi-building-fill-exclamation::before { content: "\f870"; }
+.bi-building-fill-gear::before { content: "\f871"; }
+.bi-building-fill-lock::before { content: "\f872"; }
+.bi-building-fill-slash::before { content: "\f873"; }
+.bi-building-fill-up::before { content: "\f874"; }
+.bi-building-fill-x::before { content: "\f875"; }
+.bi-building-fill::before { content: "\f876"; }
+.bi-building-gear::before { content: "\f877"; }
+.bi-building-lock::before { content: "\f878"; }
+.bi-building-slash::before { content: "\f879"; }
+.bi-building-up::before { content: "\f87a"; }
+.bi-building-x::before { content: "\f87b"; }
+.bi-buildings-fill::before { content: "\f87c"; }
+.bi-buildings::before { content: "\f87d"; }
+.bi-bus-front-fill::before { content: "\f87e"; }
+.bi-bus-front::before { content: "\f87f"; }
+.bi-ev-front-fill::before { content: "\f880"; }
+.bi-ev-front::before { content: "\f881"; }
+.bi-globe-americas::before { content: "\f882"; }
+.bi-globe-asia-australia::before { content: "\f883"; }
+.bi-globe-central-south-asia::before { content: "\f884"; }
+.bi-globe-europe-africa::before { content: "\f885"; }
+.bi-house-add-fill::before { content: "\f886"; }
+.bi-house-add::before { content: "\f887"; }
+.bi-house-check-fill::before { content: "\f888"; }
+.bi-house-check::before { content: "\f889"; }
+.bi-house-dash-fill::before { content: "\f88a"; }
+.bi-house-dash::before { content: "\f88b"; }
+.bi-house-down-fill::before { content: "\f88c"; }
+.bi-house-down::before { content: "\f88d"; }
+.bi-house-exclamation-fill::before { content: "\f88e"; }
+.bi-house-exclamation::before { content: "\f88f"; }
+.bi-house-gear-fill::before { content: "\f890"; }
+.bi-house-gear::before { content: "\f891"; }
+.bi-house-lock-fill::before { content: "\f892"; }
+.bi-house-lock::before { content: "\f893"; }
+.bi-house-slash-fill::before { content: "\f894"; }
+.bi-house-slash::before { content: "\f895"; }
+.bi-house-up-fill::before { content: "\f896"; }
+.bi-house-up::before { content: "\f897"; }
+.bi-house-x-fill::before { content: "\f898"; }
+.bi-house-x::before { content: "\f899"; }
+.bi-person-add::before { content: "\f89a"; }
+.bi-person-down::before { content: "\f89b"; }
+.bi-person-exclamation::before { content: "\f89c"; }
+.bi-person-fill-add::before { content: "\f89d"; }
+.bi-person-fill-check::before { content: "\f89e"; }
+.bi-person-fill-dash::before { content: "\f89f"; }
+.bi-person-fill-down::before { content: "\f8a0"; }
+.bi-person-fill-exclamation::before { content: "\f8a1"; }
+.bi-person-fill-gear::before { content: "\f8a2"; }
+.bi-person-fill-lock::before { content: "\f8a3"; }
+.bi-person-fill-slash::before { content: "\f8a4"; }
+.bi-person-fill-up::before { content: "\f8a5"; }
+.bi-person-fill-x::before { content: "\f8a6"; }
+.bi-person-gear::before { content: "\f8a7"; }
+.bi-person-lock::before { content: "\f8a8"; }
+.bi-person-slash::before { content: "\f8a9"; }
+.bi-person-up::before { content: "\f8aa"; }
+.bi-scooter::before { content: "\f8ab"; }
+.bi-taxi-front-fill::before { content: "\f8ac"; }
+.bi-taxi-front::before { content: "\f8ad"; }
+.bi-amd::before { content: "\f8ae"; }
+.bi-database-add::before { content: "\f8af"; }
+.bi-database-check::before { content: "\f8b0"; }
+.bi-database-dash::before { content: "\f8b1"; }
+.bi-database-down::before { content: "\f8b2"; }
+.bi-database-exclamation::before { content: "\f8b3"; }
+.bi-database-fill-add::before { content: "\f8b4"; }
+.bi-database-fill-check::before { content: "\f8b5"; }
+.bi-database-fill-dash::before { content: "\f8b6"; }
+.bi-database-fill-down::before { content: "\f8b7"; }
+.bi-database-fill-exclamation::before { content: "\f8b8"; }
+.bi-database-fill-gear::before { content: "\f8b9"; }
+.bi-database-fill-lock::before { content: "\f8ba"; }
+.bi-database-fill-slash::before { content: "\f8bb"; }
+.bi-database-fill-up::before { content: "\f8bc"; }
+.bi-database-fill-x::before { content: "\f8bd"; }
+.bi-database-fill::before { content: "\f8be"; }
+.bi-database-gear::before { content: "\f8bf"; }
+.bi-database-lock::before { content: "\f8c0"; }
+.bi-database-slash::before { content: "\f8c1"; }
+.bi-database-up::before { content: "\f8c2"; }
+.bi-database-x::before { content: "\f8c3"; }
+.bi-database::before { content: "\f8c4"; }
+.bi-houses-fill::before { content: "\f8c5"; }
+.bi-houses::before { content: "\f8c6"; }
+.bi-nvidia::before { content: "\f8c7"; }
+.bi-person-vcard-fill::before { content: "\f8c8"; }
+.bi-person-vcard::before { content: "\f8c9"; }
+.bi-sina-weibo::before { content: "\f8ca"; }
+.bi-tencent-qq::before { content: "\f8cb"; }
+.bi-wikipedia::before { content: "\f8cc"; }
+.bi-alphabet-uppercase::before { content: "\f2a5"; }
+.bi-alphabet::before { content: "\f68a"; }
+.bi-amazon::before { content: "\f68d"; }
+.bi-arrows-collapse-vertical::before { content: "\f690"; }
+.bi-arrows-expand-vertical::before { content: "\f695"; }
+.bi-arrows-vertical::before { content: "\f698"; }
+.bi-arrows::before { content: "\f6a2"; }
+.bi-ban-fill::before { content: "\f6a3"; }
+.bi-ban::before { content: "\f6b6"; }
+.bi-bing::before { content: "\f6c2"; }
+.bi-cake::before { content: "\f6e0"; }
+.bi-cake2::before { content: "\f6ed"; }
+.bi-cookie::before { content: "\f6ee"; }
+.bi-copy::before { content: "\f759"; }
+.bi-crosshair::before { content: "\f769"; }
+.bi-crosshair2::before { content: "\f794"; }
+.bi-emoji-astonished-fill::before { content: "\f795"; }
+.bi-emoji-astonished::before { content: "\f79a"; }
+.bi-emoji-grimace-fill::before { content: "\f79b"; }
+.bi-emoji-grimace::before { content: "\f7a0"; }
+.bi-emoji-grin-fill::before { content: "\f7a1"; }
+.bi-emoji-grin::before { content: "\f7a6"; }
+.bi-emoji-surprise-fill::before { content: "\f7a7"; }
+.bi-emoji-surprise::before { content: "\f7ac"; }
+.bi-emoji-tear-fill::before { content: "\f7ad"; }
+.bi-emoji-tear::before { content: "\f7b2"; }
+.bi-envelope-arrow-down-fill::before { content: "\f7b3"; }
+.bi-envelope-arrow-down::before { content: "\f7b8"; }
+.bi-envelope-arrow-up-fill::before { content: "\f7b9"; }
+.bi-envelope-arrow-up::before { content: "\f7be"; }
+.bi-feather::before { content: "\f7bf"; }
+.bi-feather2::before { content: "\f7c4"; }
+.bi-floppy-fill::before { content: "\f7c5"; }
+.bi-floppy::before { content: "\f7d8"; }
+.bi-floppy2-fill::before { content: "\f7d9"; }
+.bi-floppy2::before { content: "\f7e4"; }
+.bi-gitlab::before { content: "\f7e5"; }
+.bi-highlighter::before { content: "\f7f8"; }
+.bi-marker-tip::before { content: "\f802"; }
+.bi-nvme-fill::before { content: "\f803"; }
+.bi-nvme::before { content: "\f80c"; }
+.bi-opencollective::before { content: "\f80d"; }
+.bi-pci-card-network::before { content: "\f8cd"; }
+.bi-pci-card-sound::before { content: "\f8ce"; }
+.bi-radar::before { content: "\f8cf"; }
+.bi-send-arrow-down-fill::before { content: "\f8d0"; }
+.bi-send-arrow-down::before { content: "\f8d1"; }
+.bi-send-arrow-up-fill::before { content: "\f8d2"; }
+.bi-send-arrow-up::before { content: "\f8d3"; }
+.bi-sim-slash-fill::before { content: "\f8d4"; }
+.bi-sim-slash::before { content: "\f8d5"; }
+.bi-sourceforge::before { content: "\f8d6"; }
+.bi-substack::before { content: "\f8d7"; }
+.bi-threads-fill::before { content: "\f8d8"; }
+.bi-threads::before { content: "\f8d9"; }
+.bi-transparency::before { content: "\f8da"; }
+.bi-twitter-x::before { content: "\f8db"; }
+.bi-type-h4::before { content: "\f8dc"; }
+.bi-type-h5::before { content: "\f8dd"; }
+.bi-type-h6::before { content: "\f8de"; }
+.bi-backpack-fill::before { content: "\f8df"; }
+.bi-backpack::before { content: "\f8e0"; }
+.bi-backpack2-fill::before { content: "\f8e1"; }
+.bi-backpack2::before { content: "\f8e2"; }
+.bi-backpack3-fill::before { content: "\f8e3"; }
+.bi-backpack3::before { content: "\f8e4"; }
+.bi-backpack4-fill::before { content: "\f8e5"; }
+.bi-backpack4::before { content: "\f8e6"; }
+.bi-brilliance::before { content: "\f8e7"; }
+.bi-cake-fill::before { content: "\f8e8"; }
+.bi-cake2-fill::before { content: "\f8e9"; }
+.bi-duffle-fill::before { content: "\f8ea"; }
+.bi-duffle::before { content: "\f8eb"; }
+.bi-exposure::before { content: "\f8ec"; }
+.bi-gender-neuter::before { content: "\f8ed"; }
+.bi-highlights::before { content: "\f8ee"; }
+.bi-luggage-fill::before { content: "\f8ef"; }
+.bi-luggage::before { content: "\f8f0"; }
+.bi-mailbox-flag::before { content: "\f8f1"; }
+.bi-mailbox2-flag::before { content: "\f8f2"; }
+.bi-noise-reduction::before { content: "\f8f3"; }
+.bi-passport-fill::before { content: "\f8f4"; }
+.bi-passport::before { content: "\f8f5"; }
+.bi-person-arms-up::before { content: "\f8f6"; }
+.bi-person-raised-hand::before { content: "\f8f7"; }
+.bi-person-standing-dress::before { content: "\f8f8"; }
+.bi-person-standing::before { content: "\f8f9"; }
+.bi-person-walking::before { content: "\f8fa"; }
+.bi-person-wheelchair::before { content: "\f8fb"; }
+.bi-shadows::before { content: "\f8fc"; }
+.bi-suitcase-fill::before { content: "\f8fd"; }
+.bi-suitcase-lg-fill::before { content: "\f8fe"; }
+.bi-suitcase-lg::before { content: "\f8ff"; }
+.bi-suitcase::before { content: "\f900"; }
+.bi-suitcase2-fill::before { content: "\f901"; }
+.bi-suitcase2::before { content: "\f902"; }
+.bi-vignette::before { content: "\f903"; }
diff --git a/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff
new file mode 100644
index 0000000..51204d2
Binary files /dev/null and b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff differ
diff --git a/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff2 b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff2
new file mode 100644
index 0000000..92c4830
Binary files /dev/null and b/src/ScadaLink.Host/wwwroot/lib/bootstrap-icons/fonts/bootstrap-icons.woff2 differ
diff --git a/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs b/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
index 5b43802..d1dc4c4 100644
--- a/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
+++ b/tests/ScadaLink.CentralUI.Tests/TemplatesPageTests.cs
@@ -1,7 +1,6 @@
 using System.Security.Claims;
 using Bunit;
 using Microsoft.AspNetCore.Components.Authorization;
-using Microsoft.AspNetCore.Components.Web;
 using Microsoft.Extensions.DependencyInjection;
 using NSubstitute;
 using ScadaLink.Commons.Entities.Templates;
@@ -120,41 +119,6 @@ public class TemplatesPageTests : BunitContext
         Assert.Contains("→", cut.Markup);
     }
 
-    [Fact]
-    public async Task DragTemplateOntoRoot_CallsMoveTemplateAsync_WithNullFolderId()
-    {
-        // Arrange: one template currently parented to a folder; the test simulates
-        // the user dragging that template onto the root drop-zone, which should
-        // result in TemplateService.MoveTemplateAsync(..., newFolderId: null) being
-        // invoked. We keep the template at the root in the rendered tree (FolderId
-        // null) so it renders without needing an expand-click; the drag payload only
-        // cares about the in-memory id captured by OnDragStart, not the visual
-        // parent.
-        var template = new Template("RootDragTarget") { Id = 5, FolderId = null };
-        _repo.GetAllTemplatesAsync(Arg.Any<CancellationToken>())
-            .Returns(Task.FromResult<IReadOnlyList<Template>>(new List<Template> { template }));
-        _repo.GetAllFoldersAsync(Arg.Any<CancellationToken>())
-            .Returns(Task.FromResult<IReadOnlyList<TemplateFolder>>(new List<TemplateFolder>()));
-        _repo.GetTemplateByIdAsync(5, Arg.Any<CancellationToken>())
-            .Returns(Task.FromResult<Template?>(template));
-
-        var cut = Render<TemplatesPage>();
-
-        // Act: fire ondragstart on the template's draggable <div> (RenderNodeLabel
-        // emits draggable="true" for template/folder nodes), then ondrop on the
-        // root wrapper marked with the test-affordance class added to the page.
-        var templateNode = cut.Find("div[draggable='true']");
-        await templateNode.TriggerEventAsync("ondragstart", new DragEventArgs());
-
-        var rootDropZone = cut.Find("div.templates-root-dropzone");
-        await rootDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
-
-        // Assert: TemplateService.MoveTemplateAsync delegates to the repository's
-        // UpdateTemplateAsync with FolderId set to null.
-        await _repo.Received(1).UpdateTemplateAsync(
-            Arg.Is<Template>(t => t.Id == 5 && t.FolderId == null),
-            Arg.Any<CancellationToken>());
-    }
 }
 
 internal sealed class TestAuthStateProvider : AuthenticationStateProvider
diff --git a/tests/ScadaLink.CentralUI.Tests/TreeViewTests.cs b/tests/ScadaLink.CentralUI.Tests/TreeViewTests.cs
index 0f55d49..2f33b1a 100644
--- a/tests/ScadaLink.CentralUI.Tests/TreeViewTests.cs
+++ b/tests/ScadaLink.CentralUI.Tests/TreeViewTests.cs
@@ -127,7 +127,8 @@ public class TreeViewTests : BunitContext
         Assert.Equal("false", alphaLi.GetAttribute("aria-expanded"));
         var toggle = alphaLi.QuerySelector(".tv-toggle");
         Assert.NotNull(toggle);
-        Assert.Equal("+", toggle!.TextContent);
+        // V2 spec: toggle uses Bootstrap Icons chevron-right; CSS rotates on aria-expanded.
+        Assert.NotNull(toggle!.QuerySelector("i.bi.bi-chevron-right"));
     }
 
     [Fact]
@@ -610,6 +611,43 @@ public class TreeViewTests : BunitContext
         Assert.Equal("Alpha", btn!.TextContent);
     }
 
+    [Fact]
+    public void ContextMenu_EscapeKeyDismissesMenu()
+    {
+        var cut = RenderTreeView(contextMenu: node => builder =>
+        {
+            builder.AddMarkupContent(0, $"<button class=\"ctx-btn\">{node.Label}</button>");
+        });
+
+        var row = cut.Find(".tv-row");
+        row.TriggerEvent("oncontextmenu", new MouseEventArgs { ClientX = 100, ClientY = 200 });
+
+        Assert.NotNull(cut.Find(".dropdown-menu"));
+
+        // Press Escape on the menu — R15 spec requires it to dismiss.
+        var menu = cut.Find(".dropdown-menu");
+        menu.TriggerEvent("onkeydown", new KeyboardEventArgs { Key = "Escape" });
+
+        Assert.Empty(cut.FindAll(".dropdown-menu"));
+    }
+
+    [Fact]
+    public void ContextMenu_NonEscapeKey_DoesNotDismiss()
+    {
+        var cut = RenderTreeView(contextMenu: node => builder =>
+        {
+            builder.AddMarkupContent(0, $"<button class=\"ctx-btn\">{node.Label}</button>");
+        });
+
+        var row = cut.Find(".tv-row");
+        row.TriggerEvent("oncontextmenu", new MouseEventArgs { ClientX = 100, ClientY = 200 });
+
+        var menu = cut.Find(".dropdown-menu");
+        menu.TriggerEvent("onkeydown", new KeyboardEventArgs { Key = "ArrowDown" });
+
+        Assert.NotEmpty(cut.FindAll(".dropdown-menu"));
+    }
+
     [Fact]
     public void ContextMenu_RightClickDifferentNode_ReplacesMenu()
     {