@property --column-sizes {
    syntax: "*";
    inherits: true;
    initial-value: 0px;
}

@property --resize-handle-width {
    syntax: "*";
    inherits: true;
    initial-value: 8px;
}

html {
    --tw-shadow: 0 20px 102px 10px rgba(0, 0, 0, 0.01), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --resize-handle-width: initial;
    font-family: InterVariable, sans-serif !important;
    /* Smooth transitions for theme changes */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply transitions to common elements */
body, .main, .sidebar, .header, .table-header, .table-row, .table-row-cell,
.quickgrid, .k-card, .k-grid, .k-drawer-item, .tree-view, input, textarea, button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-light-button {
    background-color: #fff;
}

.theme-blue-button {
    background-color: #1e3a8a;
}

.theme-dark-button {
    background-color: #18181b;
}

.theme-purple-dark-button {
    background-color: #581c87;
}

.theme-seafoam-button {
    background-color: #5eead4;
}

.theme-black-button {
    background-color: #0a0a0a;
}

.theme-nord-button {
    background-color: #2e3440;
}

.theme-solarized-button {
    background-color: #073642;
}

.theme-gruvbox-button {
    background-color: #282828;
}

.theme-dracula-button {
    background-color: #282a36;
}

.theme-monokai-button {
    background-color: #272822;
}

.theme-emerald-button {
    background-color: #022c22;
}

.raised {
    box-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 15%), 0 1px 1px rgb(39 44 51 / 8%);
}

/* Light Theme - Clean and professional */
.theme-light {
    --echarts-theme: "light";
    --contrast: #00000008;
    --surface: #f9fafb;
    --background: #ffffff;
    --logo-color: #3b82f6;
    --header: #f3f4f6;
    --highlight: #3b82f6;
    --highlight-text: #ffffff;
    --sidebar: #ffffff;
    --sidebar-sub-menu: #f3f4f6;
    --sidebar-normal-text: #6b7280;
    --sidebar-selected: #eff6ff;
    --sidebar-selected-text: #2563eb;
    --outline: #e5e7eb;
    --title: #111827;
    --subtitle: #6b7280;
    --hint: #9ca3af;
    --input: #ffffff;
    --input-border: #d1d5db;
    --primary: #3b82f6;
    --primary-outline: #60a5fa;
    --primary-text: #ffffff;
    --normal: #ffffff;
    --normal-outline: #e5e7eb;
    --normal-text: #374151;
    --stat: #10b981;
    --table-header: #fff;
    --table-header-text: #374151;
    --table-group-header: #f3f4f6;
    --status: #8b5cf6;
    --status-text: #ffffff;
    --accent: #ff3b3b;
    --secondary: #ec4899;
    --success: #10b981;
    --success-text: #065f46;
    --success-bg: #d1fae5;
    --warning: #f59e0b;
    --warning-text: #92400e;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-text: #991b1b;
    --error-bg: #fee2e2;
    --info: #3b82f6;
    --info-text: #1e40af;
    --info-bg: #dbeafe;
    --badge-bg: #f3f4f6;
    --badge-text: #374151;
    --slicer-selected-bg: #eff6ff;
    --slicer-selected-text: #2563eb;
    --slicer-hover-bg: #f3f4f6;
    --slicer-count-bg: #e5e7eb;
    --slicer-count-text: #374151;
}

/* Dark Theme - Balanced and comfortable */
.theme-dark {
    --echarts-theme: "dark";
    --contrast: #ffffff0f;
    --surface: #333337;
    --background: #2b2b2f;
    --logo-color: #5a9fd4;
    --header: #333337;
    --highlight: #5a9fd4;
    --highlight-text: #ffffff;
    --sidebar: #2b2b2f;
    --sidebar-sub-menu: #333337;
    --sidebar-normal-text: #cccccc;
    --sidebar-selected: #1e5490;
    --sidebar-selected-text: #ffffff;
    --outline: #444448;
    --title: #f0f0f0;
    --subtitle: #cccccc;
    --hint: #999999;
    --input: #333337;
    --input-border: #4a4a4e;
    --primary: #5a9fd4;
    --primary-outline: #7ab8e8;
    --primary-text: #ffffff;
    --normal: #333337;
    --normal-outline: #4a4a4e;
    --normal-text: #e0e0e0;
    --stat: #6cb56c;
    --table-header: #2b2b2f;
    --table-header-text: #e0e0e0;
    --table-group-header: #242428;
    --status: #a97dc4;
    --status-text: #ffffff;
    --accent: #ff9f40;
    --secondary: #e85d8f;
    --success: #6cb56c;
    --success-text: #e0f2e0;
    --success-bg: #2a5a2a;
    --warning: #ff9f40;
    --warning-text: #fff5e0;
    --warning-bg: #8b5a00;
    --error: #e06c6c;
    --error-text: #ffe5e5;
    --error-bg: #8b2a2a;
    --info: #5a9fd4;
    --info-text: #e0f0ff;
    --info-bg: #1e5490;
    --badge-bg: #4a4a4e;
    --badge-text: #e0e0e0;
    --slicer-selected-bg: #1e5490;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #444448;
    --slicer-count-bg: #4a4a4e;
    --slicer-count-text: #e0e0e0;
}

/* Blue Theme - Professional and trustworthy */
.theme-blue {
    --echarts-theme: "dark";
    --contrast: #ffffff11;
    --surface: #1e293b;
    --background: #1e293b;
    --logo-color: #38bdf8;
    --header: #1e293b;
    --highlight: #0ea5e9;
    --highlight-text: #ffffff;
    --sidebar: #0f172a;
    --sidebar-sub-menu: #1e293b;
    --sidebar-normal-text: #cbd5e1;
    --sidebar-selected: #0c4a6e;
    --sidebar-selected-text: #ffffff;
    --outline: #334155;
    --title: #f1f5f9;
    --subtitle: #94a3b8;
    --hint: #64748b;
    --input: #1e293b;
    --input-border: #475569;
    --primary: #0ea5e9;
    --primary-outline: #38bdf8;
    --primary-text: #ffffff;
    --normal: #334155;
    --normal-outline: #475569;
    --normal-text: #e2e8f0;
    --stat: #10b981;
    --table-header: #1e293b;
    --table-header-text: #e2e8f0;
    --table-group-header: #0f172a;
    --status: #8b5cf6;
    --status-text: #ffffff;
    --accent: #f59e0b;
    --secondary: #ec4899;
    --success: #10b981;
    --success-text: #d1fae5;
    --success-bg: #064e3b;
    --warning: #f59e0b;
    --warning-text: #fef3c7;
    --warning-bg: #78350f;
    --error: #ef4444;
    --error-text: #fee2e2;
    --error-bg: #7f1d1d;
    --info: #0ea5e9;
    --info-text: #e0f2fe;
    --info-bg: #075985;
    --badge-bg: #475569;
    --badge-text: #e2e8f0;
    --slicer-selected-bg: #0c4a6e;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #334155;
    --slicer-count-bg: #475569;
    --slicer-count-text: #e2e8f0;
}

/* Purple Dark Theme - Creative and modern */
.theme-purple-dark {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #2e1065;
    --background: #2e1065;
    --logo-color: #c084fc;
    --header: #3b0764;
    --highlight: #a855f7;
    --highlight-text: #ffffff;
    --sidebar: #1e0735;
    --sidebar-sub-menu: #2e1065;
    --sidebar-normal-text: #c4b5fd;
    --sidebar-selected: #6b21a8;
    --sidebar-selected-text: #ffffff;
    --outline: #4c1d95;
    --title: #f3e8ff;
    --subtitle: #c4b5fd;
    --hint: #a78bfa;
    --input: #2e1065;
    --input-border: #5b21b6;
    --primary: #a855f7;
    --primary-outline: #c084fc;
    --primary-text: #ffffff;
    --normal: #4c1d95;
    --normal-outline: #5b21b6;
    --normal-text: #ede9fe;
    --stat: #10b981;
    --table-header: #2e1065;
    --table-header-text: #ede9fe;
    --table-group-header: #1e0735;
    --status: #f59e0b;
    --status-text: #ffffff;
    --accent: #ec4899;
    --secondary: #06b6d4;
    --success: #10b981;
    --success-text: #d1fae5;
    --success-bg: #064e3b;
    --warning: #f59e0b;
    --warning-text: #fef3c7;
    --warning-bg: #78350f;
    --error: #ef4444;
    --error-text: #fee2e2;
    --error-bg: #7f1d1d;
    --info: #3b82f6;
    --info-text: #dbeafe;
    --info-bg: #1e3a8a;
    --badge-bg: #5b21b6;
    --badge-text: #ede9fe;
    --slicer-selected-bg: #6b21a8;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #4c1d95;
    --slicer-count-bg: #5b21b6;
    --slicer-count-text: #ede9fe;
}

/* Seafoam Theme - Fresh and calming */
.theme-seafoam {
    --echarts-theme: "light";
    --contrast: #00000008;
    --surface: #f0fdfa;
    --background: #f0fdfa;
    --logo-color: #0891b2;
    --header: #e6fffa;
    --highlight: #06b6d4;
    --highlight-text: #ffffff;
    --sidebar: #f0fdfa;
    --sidebar-sub-menu: #e6fffa;
    --sidebar-normal-text: #0e7490;
    --sidebar-selected: #cffafe;
    --sidebar-selected-text: #155e75;
    --outline: #a5f3fc;
    --title: #134e4a;
    --subtitle: #0e7490;
    --hint: #0891b2;
    --input: #ffffff;
    --input-border: #a5f3fc;
    --primary: #06b6d4;
    --primary-outline: #0891b2;
    --primary-text: #ffffff;
    --normal: #f0fdfa;
    --normal-outline: #a5f3fc;
    --normal-text: #155e75;
    --stat: #10b981;
    --table-header: #e6fffa;
    --table-header-text: #155e75;
    --table-group-header: #f0fdfa;
    --status: #8b5cf6;
    --status-text: #ffffff;
    --accent: #f59e0b;
    --secondary: #ec4899;
    --success: #10b981;
    --success-text: #065f46;
    --success-bg: #d1fae5;
    --warning: #f59e0b;
    --warning-text: #92400e;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-text: #991b1b;
    --error-bg: #fee2e2;
    --info: #06b6d4;
    --info-text: #164e63;
    --info-bg: #cffafe;
    --badge-bg: #a5f3fc;
    --badge-text: #155e75;
    --slicer-selected-bg: #0891b2;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #e6fffa;
    --slicer-count-bg: #a5f3fc;
    --slicer-count-text: #155e75;
}

/* Black Theme - Ultimate dark mode */
.theme-black {
    --echarts-theme: "dark";
    --contrast: #ffffff05;
    --surface: #171717;
    --background: #0a0a0a;
    --logo-color: #60a5fa;
    --header: #171717;
    --highlight: #60a5fa;
    --highlight-text: #ffffff;
    --sidebar: #0a0a0a;
    --sidebar-sub-menu: #171717;
    --sidebar-normal-text: #a3a3a3;
    --sidebar-selected: #1e40af;
    --sidebar-selected-text: #ffffff;
    --outline: #262626;
    --title: #fafafa;
    --subtitle: #a3a3a3;
    --hint: #737373;
    --input: #0a0a0a;
    --input-border: #404040;
    --primary: #60a5fa;
    --primary-outline: #93bbfc;
    --primary-text: #ffffff;
    --normal: #171717;
    --normal-outline: #262626;
    --normal-text: #e5e5e5;
    --stat: #22c55e;
    --table-header: #0a0a0a;
    --table-header-text: #e5e5e5;
    --table-group-header: #000000;
    --status: #a78bfa;
    --status-text: #ffffff;
    --accent: #fbbf24;
    --secondary: #f472b6;
    --success: #22c55e;
    --success-text: #bbf7d0;
    --success-bg: #14532d;
    --warning: #fbbf24;
    --warning-text: #fef3c7;
    --warning-bg: #713f12;
    --error: #f87171;
    --error-text: #fecaca;
    --error-bg: #7f1d1d;
    --info: #60a5fa;
    --info-text: #bfdbfe;
    --info-bg: #1e3a8a;
    --badge-bg: #404040;
    --badge-text: #e5e5e5;
    --slicer-selected-bg: #1e40af;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #262626;
    --slicer-count-bg: #404040;
    --slicer-count-text: #e5e5e5;
}

/* Nord Theme - Arctic, north-bluish color palette */
.theme-nord {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #3b4252;
    --background: #3b4252;
    --logo-color: #88c0d0;
    --header: #434c5e;
    --highlight: #88c0d0;
    --highlight-text: #2e3440;
    --sidebar: #2e3440;
    --sidebar-sub-menu: #3b4252;
    --sidebar-normal-text: #d8dee9;
    --sidebar-selected: #5e81ac;
    --sidebar-selected-text: #eceff4;
    --outline: #4c566a;
    --title: #eceff4;
    --subtitle: #d8dee9;
    --hint: #e5e9f0;
    --input: #3b4252;
    --input-border: #4c566a;
    --primary: #88c0d0;
    --primary-outline: #8fbcbb;
    --primary-text: #2e3440;
    --normal: #434c5e;
    --normal-outline: #4c566a;
    --normal-text: #e5e9f0;
    --stat: #a3be8c;
    --table-header: #3b4252;
    --table-header-text: #e5e9f0;
    --table-group-header: #2e3440;
    --status: #b48ead;
    --status-text: #2e3440;
    --accent: #ebcb8b;
    --secondary: #d08770;
    --success: #a3be8c;
    --success-text: #2e3440;
    --success-bg: #3b4252;
    --warning: #ebcb8b;
    --warning-text: #2e3440;
    --warning-bg: #3b4252;
    --error: #bf616a;
    --error-text: #eceff4;
    --error-bg: #3b4252;
    --info: #5e81ac;
    --info-text: #eceff4;
    --info-bg: #3b4252;
    --badge-bg: #4c566a;
    --badge-text: #e5e9f0;
    --slicer-selected-bg: #5e81ac;
    --slicer-selected-text: #eceff4;
    --slicer-hover-bg: #434c5e;
    --slicer-count-bg: #4c566a;
    --slicer-count-text: #e5e9f0;
}

/* Solarized Dark Theme - Precision colors for syntax highlighting */
.theme-solarized {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #073642;
    --background: #073642;
    --logo-color: #268bd2;
    --header: #073642;
    --highlight: #268bd2;
    --highlight-text: #fdf6e3;
    --sidebar: #002b36;
    --sidebar-sub-menu: #073642;
    --sidebar-normal-text: #839496;
    --sidebar-selected: #586e75;
    --sidebar-selected-text: #fdf6e3;
    --outline: #586e75;
    --title: #fdf6e3;
    --subtitle: #93a1a1;
    --hint: #839496;
    --input: #073642;
    --input-border: #586e75;
    --primary: #268bd2;
    --primary-outline: #2aa198;
    --primary-text: #fdf6e3;
    --normal: #073642;
    --normal-outline: #586e75;
    --normal-text: #eee8d5;
    --stat: #859900;
    --table-header: #073642;
    --table-header-text: #eee8d5;
    --table-group-header: #002b36;
    --status: #6c71c4;
    --status-text: #fdf6e3;
    --accent: #cb4b16;
    --secondary: #d33682;
    --success: #859900;
    --success-text: #fdf6e3;
    --success-bg: #073642;
    --warning: #b58900;
    --warning-text: #fdf6e3;
    --warning-bg: #073642;
    --error: #dc322f;
    --error-text: #fdf6e3;
    --error-bg: #073642;
    --info: #268bd2;
    --info-text: #fdf6e3;
    --info-bg: #073642;
    --badge-bg: #586e75;
    --badge-text: #eee8d5;
    --slicer-selected-bg: #268bd2;
    --slicer-selected-text: #fdf6e3;
    --slicer-hover-bg: #073642;
    --slicer-count-bg: #586e75;
    --slicer-count-text: #eee8d5;
}

/* Gruvbox Theme - Retro groove color scheme */
.theme-gruvbox {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #3c3836;
    --background: #3c3836;
    --logo-color: #83a598;
    --header: #3c3836;
    --highlight: #fb4934;
    --highlight-text: #282828;
    --sidebar: #282828;
    --sidebar-sub-menu: #3c3836;
    --sidebar-normal-text: #bdae93;
    --sidebar-selected: #665c54;
    --sidebar-selected-text: #fbf1c7;
    --outline: #504945;
    --title: #fbf1c7;
    --subtitle: #d5c4a1;
    --hint: #bdae93;
    --input: #3c3836;
    --input-border: #504945;
    --primary: #fb4934;
    --primary-outline: #fe8019;
    --primary-text: #282828;
    --normal: #504945;
    --normal-outline: #665c54;
    --normal-text: #ebdbb2;
    --stat: #b8bb26;
    --table-header: #3c3836;
    --table-header-text: #ebdbb2;
    --table-group-header: #282828;
    --status: #d3869b;
    --status-text: #282828;
    --accent: #fabd2f;
    --secondary: #83a598;
    --success: #b8bb26;
    --success-text: #282828;
    --success-bg: #3c3836;
    --warning: #fabd2f;
    --warning-text: #282828;
    --warning-bg: #3c3836;
    --error: #fb4934;
    --error-text: #282828;
    --error-bg: #3c3836;
    --info: #83a598;
    --info-text: #282828;
    --info-bg: #3c3836;
    --badge-bg: #504945;
    --badge-text: #ebdbb2;
    --slicer-selected-bg: #665c54;
    --slicer-selected-text: #fbf1c7;
    --slicer-hover-bg: #504945;
    --slicer-count-bg: #665c54;
    --slicer-count-text: #ebdbb2;
}

/* Dracula Theme - Dark theme for monsters */
.theme-dracula {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #44475a;
    --background: #44475a;
    --logo-color: #bd93f9;
    --header: #44475a;
    --highlight: #ff79c6;
    --highlight-text: #f8f8f2;
    --sidebar: #282a36;
    --sidebar-sub-menu: #44475a;
    --sidebar-normal-text: #f8f8f2;
    --sidebar-selected: #6272a4;
    --sidebar-selected-text: #f8f8f2;
    --outline: #6272a4;
    --title: #f8f8f2;
    --subtitle: #f8f8f2;
    --hint: #6272a4;
    --input: #44475a;
    --input-border: #6272a4;
    --primary: #ff79c6;
    --primary-outline: #ff92df;
    --primary-text: #282a36;
    --normal: #44475a;
    --normal-outline: #6272a4;
    --normal-text: #f8f8f2;
    --stat: #50fa7b;
    --table-header: #44475a;
    --table-header-text: #f8f8f2;
    --table-group-header: #282a36;
    --status: #bd93f9;
    --status-text: #282a36;
    --accent: #f1fa8c;
    --secondary: #8be9fd;
    --success: #50fa7b;
    --success-text: #282a36;
    --success-bg: #44475a;
    --warning: #f1fa8c;
    --warning-text: #282a36;
    --warning-bg: #44475a;
    --error: #ff5555;
    --error-text: #f8f8f2;
    --error-bg: #44475a;
    --info: #8be9fd;
    --info-text: #282a36;
    --info-bg: #44475a;
    --badge-bg: #6272a4;
    --badge-text: #f8f8f2;
    --slicer-selected-bg: #bd93f9;
    --slicer-selected-text: #282a36;
    --slicer-hover-bg: #44475a;
    --slicer-count-bg: #6272a4;
    --slicer-count-text: #f8f8f2;
}

/* Monokai Theme - Elegant and vibrant */
.theme-monokai {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #3e3d32;
    --background: #3e3d32;
    --logo-color: #66d9ef;
    --header: #3e3d32;
    --highlight: #f92672;
    --highlight-text: #f8f8f2;
    --sidebar: #272822;
    --sidebar-sub-menu: #3e3d32;
    --sidebar-normal-text: #f8f8f2;
    --sidebar-selected: #49483e;
    --sidebar-selected-text: #f8f8f2;
    --outline: #49483e;
    --title: #f8f8f2;
    --subtitle: #f8f8f2;
    --hint: #75715e;
    --input: #3e3d32;
    --input-border: #49483e;
    --primary: #f92672;
    --primary-outline: #fd5ff0;
    --primary-text: #272822;
    --normal: #3e3d32;
    --normal-outline: #49483e;
    --normal-text: #f8f8f2;
    --stat: #a6e22e;
    --table-header: #3e3d32;
    --table-header-text: #f8f8f2;
    --table-group-header: #272822;
    --status: #ae81ff;
    --status-text: #272822;
    --accent: #e6db74;
    --secondary: #66d9ef;
    --success: #a6e22e;
    --success-text: #272822;
    --success-bg: #3e3d32;
    --warning: #e6db74;
    --warning-text: #272822;
    --warning-bg: #3e3d32;
    --error: #f92672;
    --error-text: #f8f8f2;
    --error-bg: #3e3d32;
    --info: #66d9ef;
    --info-text: #272822;
    --info-bg: #3e3d32;
    --badge-bg: #49483e;
    --badge-text: #f8f8f2;
    --slicer-selected-bg: #f92672;
    --slicer-selected-text: #272822;
    --slicer-hover-bg: #49483e;
    --slicer-count-bg: #49483e;
    --slicer-count-text: #f8f8f2;
}

/* Emerald Theme - Deep forest green */
.theme-emerald {
    --echarts-theme: "dark";
    --contrast: #ffffff0a;
    --surface: #064e3b;
    --background: #064e3b;
    --logo-color: #34d399;
    --header: #064e3b;
    --highlight: #10b981;
    --highlight-text: #ffffff;
    --sidebar: #022c22;
    --sidebar-sub-menu: #064e3b;
    --sidebar-normal-text: #a7f3d0;
    --sidebar-selected: #047857;
    --sidebar-selected-text: #ffffff;
    --outline: #065f46;
    --title: #ecfdf5;
    --subtitle: #a7f3d0;
    --hint: #6ee7b7;
    --input: #064e3b;
    --input-border: #065f46;
    --primary: #10b981;
    --primary-outline: #34d399;
    --primary-text: #ffffff;
    --normal: #064e3b;
    --normal-outline: #065f46;
    --normal-text: #d1fae5;
    --stat: #fbbf24;
    --table-header: #064e3b;
    --table-header-text: #d1fae5;
    --table-group-header: #022c22;
    --status: #8b5cf6;
    --status-text: #ffffff;
    --accent: #f59e0b;
    --secondary: #06b6d4;
    --success: #10b981;
    --success-text: #ecfdf5;
    --success-bg: #047857;
    --warning: #fbbf24;
    --warning-text: #451a03;
    --warning-bg: #92400e;
    --error: #f87171;
    --error-text: #fef2f2;
    --error-bg: #991b1b;
    --info: #60a5fa;
    --info-text: #dbeafe;
    --info-bg: #1e3a8a;
    --badge-bg: #065f46;
    --badge-text: #d1fae5;
    --slicer-selected-bg: #047857;
    --slicer-selected-text: #ffffff;
    --slicer-hover-bg: #065f46;
    --slicer-count-bg: #065f46;
    --slicer-count-text: #d1fae5;
}
.popover-content {
    background-color: var(--background);
}
/* Kendo UI Variables (preserved for compatibility) */
.theme-light {
    --kendo-color-app-surface: #fff;
    --kendo-color-on-app-surface: #000;
    --kendo-color-subtle: #000;
    --kendo-color-surface: #fff;
    --kendo-color-surface-alt: #ffffff;
    --kendo-color-border: var(--outline);
    --kendo-color-border-alt: rgba(0, 0, 0, 0.15);
    --kendo-color-base-subtle: #ebebeb;
    --kendo-color-base-subtle-hover: #d6d6d6;
    --kendo-color-base-subtle-active: #c2c2c2;
    --kendo-color-base: #fff;
    --kendo-color-base-hover: #ebebeb;
    --kendo-color-base-active: #d6d6d6;
    --kendo-color-base-emphasis: #adadad;
    --kendo-color-base-on-subtle: #212121;
    --kendo-color-on-base: #212121;
    --kendo-color-base-on-surface: #000;
    --kendo-color-primary-subtle: #d1d5ee;
    --kendo-color-primary-subtle-hover: #c5cae8;
    --kendo-color-primary-subtle-active: #b5bde3;
    --kendo-color-primary: var(--highlight);
    --kendo-color-primary-hover: #3a4ba7;
    --kendo-color-primary-active: #354498;
    --kendo-color-primary-emphasis: #97a0d7;
    --kendo-color-primary-on-subtle: #161c3f;
    --kendo-color-on-primary: var(--highlight-text);
    --kendo-color-primary-on-surface: #6178f9;
    --kendo-color-secondary-subtle: #fbcdd9;
    --kendo-color-secondary-subtle-hover: #f9afc3;
    --kendo-color-secondary-subtle-active: #f79bb3;
    --kendo-color-secondary: #e51a5f;
    --kendo-color-secondary-hover: #d31857;
    --kendo-color-secondary-active: #c01650;
    --kendo-color-secondary-emphasis: #f58da9;
    --kendo-color-secondary-on-subtle: #500c22;
    --kendo-color-on-secondary: #fff;
    --kendo-color-secondary-on-surface: #ae1549;
    --kendo-color-tertiary-subtle: #c9dbd8;
    --kendo-color-tertiary-subtle-hover: #a9c6c1;
    --kendo-color-tertiary-subtle-active: #92b8b1;
    --kendo-color-tertiary: #00695c;
    --kendo-color-tertiary-hover: #006155;
    --kendo-color-tertiary-active: #00584d;
    --kendo-color-tertiary-emphasis: #84aea7;
    --kendo-color-tertiary-on-subtle: #002520;
    --kendo-color-on-tertiary: #fff;
    --kendo-color-tertiary-on-surface: #054f46;
    --kendo-color-info-subtle: #c8d7fb;
    --kendo-color-info-subtle-hover: #a7c0f7;
    --kendo-color-info-subtle-active: #8fb0f6;
    --kendo-color-info: #0058e9;
    --kendo-color-info-hover: #0251d6;
    --kendo-color-info-active: #034ac3;
    --kendo-color-info-emphasis: #80a5f4;
    --kendo-color-info-on-subtle: #071f51;
    --kendo-color-on-info: #fff;
    --kendo-color-info-on-surface: #0443b0;
    --kendo-color-success-subtle: #d7f0cc;
    --kendo-color-success-subtle-hover: #bae2ad;
    --kendo-color-success-subtle-active: #a7db97;
    --kendo-color-success: #37b400;
    --kendo-color-success-hover: #33a600;
    --kendo-color-success-active: #2e9704;
    --kendo-color-success-emphasis: #93d775;
    --kendo-color-success-on-subtle: #163f09;
    --kendo-color-on-success: #fff;
    --kendo-color-success-on-surface: #2b8906;
    --kendo-color-warning-subtle: #fff0ce;
    --kendo-color-warning-subtle-hover: #ffe7b0;
    --kendo-color-warning-subtle-active: #ffe19c;
    --kendo-color-warning: #ffc000;
    --kendo-color-warning-hover: #ebb201;
    --kendo-color-warning-active: #d6a202;
    --kendo-color-warning-emphasis: #ffdd8f;
    --kendo-color-warning-on-subtle: #59430a;
    --kendo-color-on-warning: #000;
    --kendo-color-warning-on-surface: #ffc000;
    --kendo-color-error-subtle: #fcc7c2;
    --kendo-color-error-subtle-hover: #feafa8;
    --kendo-color-error-subtle-active: #fe9a91;
    --kendo-color-error: #f31700;
    --kendo-color-error-hover: #e01701;
    --kendo-color-error-active: #cc1505;
    --kendo-color-error-emphasis: #fc8d83;
    --kendo-color-error-on-subtle: #550c07;
    --kendo-color-on-error: #fff;
    --kendo-color-error-on-surface: #b91406;
    --kendo-color-light-subtle: #fafafa;
    --kendo-color-light-subtle-hover: #f5f5f5;
    --kendo-color-light-subtle-active: #eee;
    --kendo-color-light: #f5f5f5;
    --kendo-color-light-hover: #ebebeb;
    --kendo-color-light-active: #d6d6d6;
    --kendo-color-light-emphasis: #e0e0e0;
    --kendo-color-light-on-subtle: #212121;
    --kendo-color-on-light: #000;
    --kendo-color-light-on-surface: #ebebeb;
    --kendo-color-dark-subtle: #c7c7c7;
    --kendo-color-dark-subtle-hover: #c2c2c2;
    --kendo-color-dark-subtle-active: #bdbdbd;
    --kendo-color-dark: #424242;
    --kendo-color-dark-hover: #212121;
    --kendo-color-dark-active: #000;
    --kendo-color-dark-emphasis: #9e9e9e;
    --kendo-color-dark-on-subtle: #212121;
    --kendo-color-on-dark: #fff;
    --kendo-color-dark-on-surface: #616161;
    --kendo-color-inverse-subtle: #c7c7c7;
    --kendo-color-inverse-subtle-hover: #c2c2c2;
    --kendo-color-inverse-subtle-active: #bdbdbd;
    --kendo-color-inverse: #424242;
    --kendo-color-inverse-hover: #212121;
    --kendo-color-inverse-active: #000;
    --kendo-color-inverse-emphasis: #9e9e9e;
    --kendo-color-inverse-on-subtle: #212121;
    --kendo-color-on-inverse: #fff;
    --kendo-color-inverse-on-surface: #616161;
    --kendo-color-series-a: #9c27b0;
    --kendo-color-series-a-bold: #751d84;
    --kendo-color-series-a-bolder: #4e1458;
    --kendo-color-series-a-subtle: #b55dc4;
    --kendo-color-series-a-subtler: #cd93d7;
    --kendo-color-series-b: #2196f3;
    --kendo-color-series-b-bold: #1971b6;
    --kendo-color-series-b-bolder: #114b7a;
    --kendo-color-series-b-subtle: #59b0f6;
    --kendo-color-series-b-subtler: #90cbf9;
    --kendo-color-series-c: #009688;
    --kendo-color-series-c-bold: #007166;
    --kendo-color-series-c-bolder: #004b44;
    --kendo-color-series-c-subtle: #40b0a6;
    --kendo-color-series-c-subtler: #80cbc4;
    --kendo-color-series-d: #ffeb3b;
    --kendo-color-series-d-bold: #bfb02c;
    --kendo-color-series-d-bolder: #80761e;
    --kendo-color-series-d-subtle: #fff06c;
    --kendo-color-series-d-subtler: #fff59d;
    --kendo-color-series-e: #f44336;
    --kendo-color-series-e-bold: #b73229;
    --kendo-color-series-e-bolder: #7a221b;
    --kendo-color-series-e-subtle: #f77268;
    --kendo-color-series-e-subtler: #faa19b;
    --kendo-color-series-f: #4caf50;
    --kendo-color-series-f-bold: #39833c;
    --kendo-color-series-f-bolder: #265828;
    --kendo-color-series-f-subtle: #79c37c;
    --kendo-color-series-f-subtler: #a6d7a8;
}

.theme-dark,
.theme-blue,
.theme-purple-dark,
.theme-black,
.theme-nord,
.theme-solarized,
.theme-gruvbox,
.theme-dracula,
.theme-monokai,
.theme-emerald {
    --kendo-color-app-surface: var(--background);
    --kendo-color-on-app-surface: var(--title);
    --kendo-color-subtle: var(--subtitle);
    --kendo-color-surface: var(--surface);
    --kendo-color-surface-alt: var(--background);
    --kendo-color-border: var(--outline);
    --kendo-color-border-alt: var(--outline);
    --kendo-color-base-subtle: var(--surface);
    --kendo-color-base-subtle-hover: var(--background);
    --kendo-color-base-subtle-active: var(--header);
    --kendo-color-base: var(--background);
    --kendo-color-base-hover: var(--surface);
    --kendo-color-base-active: var(--header);
    --kendo-color-base-emphasis: var(--subtitle);
    --kendo-color-base-on-subtle: var(--title);
    --kendo-color-on-base: var(--title);
    --kendo-color-base-on-surface: var(--title);
    --kendo-color-primary-subtle: var(--primary);
    --kendo-color-primary-subtle-hover: var(--primary-outline);
    --kendo-color-primary-subtle-active: var(--primary);
    --kendo-color-primary: var(--primary);
    --kendo-color-primary-hover: var(--primary-outline);
    --kendo-color-primary-active: var(--primary);
    --kendo-color-primary-emphasis: var(--primary-outline);
    --kendo-color-primary-on-subtle: var(--primary-text);
    --kendo-color-on-primary: var(--primary-text);
    --kendo-color-primary-on-surface: var(--primary);
    --kendo-color-secondary-subtle: var(--secondary);
    --kendo-color-secondary-subtle-hover: var(--secondary);
    --kendo-color-secondary-subtle-active: var(--secondary);
    --kendo-color-secondary: var(--secondary);
    --kendo-color-secondary-hover: var(--secondary);
    --kendo-color-secondary-active: var(--secondary);
    --kendo-color-secondary-emphasis: var(--secondary);
    --kendo-color-secondary-on-subtle: var(--primary-text);
    --kendo-color-on-secondary: var(--primary-text);
    --kendo-color-secondary-on-surface: var(--secondary);
    --kendo-color-tertiary-subtle: var(--accent);
    --kendo-color-tertiary-subtle-hover: var(--accent);
    --kendo-color-tertiary-subtle-active: var(--accent);
    --kendo-color-tertiary: var(--accent);
    --kendo-color-tertiary-hover: var(--accent);
    --kendo-color-tertiary-active: var(--accent);
    --kendo-color-tertiary-emphasis: var(--accent);
    --kendo-color-tertiary-on-subtle: var(--primary-text);
    --kendo-color-on-tertiary: var(--primary-text);
    --kendo-color-tertiary-on-surface: var(--accent);
    --kendo-color-info-subtle: var(--info-bg);
    --kendo-color-info-subtle-hover: var(--info);
    --kendo-color-info-subtle-active: var(--info);
    --kendo-color-info: var(--info);
    --kendo-color-info-hover: var(--info);
    --kendo-color-info-active: var(--info);
    --kendo-color-info-emphasis: var(--info);
    --kendo-color-info-on-subtle: var(--info-text);
    --kendo-color-on-info: var(--info-text);
    --kendo-color-info-on-surface: var(--info);
    --kendo-color-success-subtle: var(--success-bg);
    --kendo-color-success-subtle-hover: var(--success);
    --kendo-color-success-subtle-active: var(--success);
    --kendo-color-success: var(--success);
    --kendo-color-success-hover: var(--success);
    --kendo-color-success-active: var(--success);
    --kendo-color-success-emphasis: var(--success);
    --kendo-color-success-on-subtle: var(--success-text);
    --kendo-color-on-success: var(--success-text);
    --kendo-color-success-on-surface: var(--success);
    --kendo-color-warning-subtle: var(--warning-bg);
    --kendo-color-warning-subtle-hover: var(--warning);
    --kendo-color-warning-subtle-active: var(--warning);
    --kendo-color-warning: var(--warning);
    --kendo-color-warning-hover: var(--warning);
    --kendo-color-warning-active: var(--warning);
    --kendo-color-warning-emphasis: var(--warning);
    --kendo-color-warning-on-subtle: var(--warning-text);
    --kendo-color-on-warning: var(--warning-text);
    --kendo-color-warning-on-surface: var(--warning);
    --kendo-color-error-subtle: var(--error-bg);
    --kendo-color-error-subtle-hover: var(--error);
    --kendo-color-error-subtle-active: var(--error);
    --kendo-color-error: var(--error);
    --kendo-color-error-hover: var(--error);
    --kendo-color-error-active: var(--error);
    --kendo-color-error-emphasis: var(--error);
    --kendo-color-error-on-subtle: var(--error-text);
    --kendo-color-on-error: var(--error-text);
    --kendo-color-error-on-surface: var(--error);
    --kendo-color-light-subtle: var(--surface);
    --kendo-color-light-subtle-hover: var(--background);
    --kendo-color-light-subtle-active: var(--header);
    --kendo-color-light: var(--surface);
    --kendo-color-light-hover: var(--background);
    --kendo-color-light-active: var(--header);
    --kendo-color-light-emphasis: var(--outline);
    --kendo-color-light-on-subtle: var(--title);
    --kendo-color-on-light: var(--title);
    --kendo-color-light-on-surface: var(--surface);
    --kendo-color-dark-subtle: var(--background);
    --kendo-color-dark-subtle-hover: var(--surface);
    --kendo-color-dark-subtle-active: var(--background);
    --kendo-color-dark: var(--background);
    --kendo-color-dark-hover: var(--surface);
    --kendo-color-dark-active: var(--background);
    --kendo-color-dark-emphasis: var(--subtitle);
    --kendo-color-dark-on-subtle: var(--title);
    --kendo-color-on-dark: var(--title);
    --kendo-color-dark-on-surface: var(--background);
    --kendo-color-inverse-subtle: var(--surface);
    --kendo-color-inverse-subtle-hover: var(--background);
    --kendo-color-inverse-subtle-active: var(--header);
    --kendo-color-inverse: var(--title);
    --kendo-color-inverse-hover: var(--subtitle);
    --kendo-color-inverse-active: var(--hint);
    --kendo-color-inverse-emphasis: var(--subtitle);
    --kendo-color-inverse-on-subtle: var(--background);
    --kendo-color-on-inverse: var(--background);
    --kendo-color-inverse-on-surface: var(--title);
    --kendo-color-series-a: var(--primary);
    --kendo-color-series-a-bold: var(--primary-outline);
    --kendo-color-series-a-bolder: var(--primary);
    --kendo-color-series-a-subtle: var(--primary);
    --kendo-color-series-a-subtler: var(--primary-outline);
    --kendo-color-series-b: var(--secondary);
    --kendo-color-series-b-bold: var(--secondary);
    --kendo-color-series-b-bolder: var(--secondary);
    --kendo-color-series-b-subtle: var(--secondary);
    --kendo-color-series-b-subtler: var(--secondary);
    --kendo-color-series-c: var(--success);
    --kendo-color-series-c-bold: var(--success);
    --kendo-color-series-c-bolder: var(--success);
    --kendo-color-series-c-subtle: var(--success);
    --kendo-color-series-c-subtler: var(--success);
    --kendo-color-series-d: var(--warning);
    --kendo-color-series-d-bold: var(--warning);
    --kendo-color-series-d-bolder: var(--warning);
    --kendo-color-series-d-subtle: var(--warning);
    --kendo-color-series-d-subtler: var(--warning);
    --kendo-color-series-e: var(--error);
    --kendo-color-series-e-bold: var(--error);
    --kendo-color-series-e-bolder: var(--error);
    --kendo-color-series-e-subtle: var(--error);
    --kendo-color-series-e-subtler: var(--error);
    --kendo-color-series-f: var(--accent);
    --kendo-color-series-f-bold: var(--accent);
    --kendo-color-series-f-bolder: var(--accent);
    --kendo-color-series-f-subtle: var(--accent);
    --kendo-color-series-f-subtler: var(--accent);
}

/* Component-specific styles (preserved from original) */
.k-drawer-mini .k-drawer-wrapper {
    width: calc(var(--kendo-spacing-4, 1rem) * 2 + 55px);
}

.k-item-text {
    margin-top: 5px;
}

.k-drawer {
    background-color: var(--sidebar);
}

.k-appbar-static {
    background-color: var(--sidebar);
}

.k-drawer-item {
    column-gap: 0px;
    row-gap: 0px;
    flex-direction: column;
    align-items: center;
    font-size: var(--kendo-font-size-sm, inherit);
    color: var(--sidebar-normal-text)
}

.k-drawer-item .k-icon {
    width: 24px;
    height: 24px;
}

.k-drawer-content {
    border-color: var(--kendo-color-border);
}

.k-drawer-container {
    border-width: 0px;
}

.k-bottom-nav-item-text {
    overflow: hidden;
    text-overflow: unset;
    max-width: 100%;
}

.grid-stack-item {
    border-size: 1px;
}

.k-card {
    border-width: 1px;
}

.k-drawer-item:hover, .k-drawer-item.k-hover, .k-drawer-item:focus, .k-drawer-item.k-focus {
    color: var(--sidebar-selected-text);
    background-color: var(--sidebar-selected);
}

.dashboard-toolbar {
    border-color: inherit;
    box-shadow: none;
    background-color: inherit;
}

.breadcrumb-toolbar {
    padding: 0;
    background-color: var(--kendo-color-surface-alt);
}

.k-card-body {
    overflow: hidden;
    padding: 0;
}
.k-card-header {
    border-width: 0;
}
.grid-stack-item-content .k-table-td {
    padding: 6px 8px !important;
}

.detail-pane-tabstrip {

}

.k-tabstrip-items {
    margin-top: 10px;
    margin-left: 10px;
}

.detail-pane-body-center {
    border-color: var(--kendo-color-border);
}

.detail-pane-body-left {
    border-width: 0px 1px 1px 0px;
    border-color: var(--kendo-color-border);
}

.detail-pane-body-right {
    border-width: 0px 0px 1px 1px;
    border-color: var(--kendo-color-border);
}

.detail-pane-body-bottom {
    border-width: 0px 1px 0px 1px;
    border-color: var(--kendo-color-border);
}

.k-splitter {
    border-width: 0;
}

.k-grid {
    border-width: 0px;
}

.panel-bar-side-menu {
    border-width: 0px 1px 0px 0px;
    height: 100%;
    width: 275px;
}

.k-panelbar-item.k-selected .k-link:hover {
    background-color: var(--kendo-color-primary-hover, #ea5a51);
    color: var(--kendo-color-on-primary, #ffffff);
}

.k-panelbar-item.k-selected .k-link {
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #ff6358);
}

.cards-card-label {
    font-weight: 400;
    font-size: 14px;
    color: #222;
}
.cards-card-value {
    font-size: 20px;
}
.cards-card {
    background-color: var(--background);
    color: var(--kendo-color-base-on-surface);
    flex-grow: 1;
    border-top: solid 4px #000;
    border-left: solid 1px var(--outline);
    border-right: solid 1px var(--outline);
    border-bottom: solid 1px var(--outline);
    border-radius: 0.5em;
    min-width: 136px;
}

.table-group-header {
    font-size: 1.0rem !important;
    line-height: 1.5rem !important;
    text-align: center !important;
    padding: 5px !important;
    margin: 10px !important;
    font-weight: bold !important;
}

.telerik-header-center .k-cell-inner > .k-link {
    justify-content: center;
}

.telerik-header-left .k-cell-inner > .k-link {
    justify-content: start;
}
.telerik-cell-left, .telerik-header-left .k-cell-inner > .k-link {
    padding-left: 8px;
}
.telerik-header-right .k-cell-inner > .k-link {
    justify-content: end;
}
.k-card-title {
    font-weight: bold;
    font-size: 16px;
}

.grid-stack-item-content:has(> :first-child.k-card) {
    --tw-shadow: 0 0px 18px 0px rgba(0, 0, 0, 0.03), 0 0px 0px 0px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dashboard-title {
    font-size: 26px;
    font-weight: bold;
    color: var(--kendo-color-base-on-surface) !important;
    line-height: 1em;
    margin-top: 12px;
    margin-bottom: 8px;
}

.dashboard-subtitle {
    font-size: 22px;
    color: var(--kendo-color-on-app-surface) !important;
}

.grid-stack-item-content {
    margin: 0;
    position: absolute;
    width: auto;
    overflow-x: hidden;
    overflow-y: hidden !important;
}

.progress-bar-container {
    padding: 1px;
    background-color: var(--kendo-color-base-active) !important;
}

.progress-bar-text {
    color: var(--kendo-color-on-base) !important;
}

.k-tabstrip-items-wrapper .k-item {
    color: var(--kendo-color-base-emphasis);
}

.detail-section-toolbar {
    border-width: 0px 0px 0px 0px;
    overflow: unset;
    box-shadow: none !important;
}

.navigation-tabstrip {
    background-color: var(--sidebar);
}

.detail-pane-tabstrip {
    background-color: var(--kendo-color-surface, #242424);
    border-width: 0px 0px 0px 0px;
}

.k-drawer-mini .k-drawer.k-drawer-start, .k-drawer-expanded .k-drawer.k-drawer-start {
    border-inline-end-width: 0px;
}

.main {
    border-left: solid 1px var(--kendo-color-border);
    border-top: solid 1px var(--kendo-color-border);
}

.k-window-content .k-wizard {
    padding: 0 !important;
}

.k-stepper {
    height: 75px !important;
}

.k-window-content, .k-prompt-container {
    padding: 0;
}

.detail-card {
    margin-bottom: 10px;
}

.k-grid .k-grid-header .k-table-th {
    padding: 10px;
}

.grid-stack {
    max-width: 1896px;
}

.dashboard-container {
    max-width: 1896px;
}

.intercom-lightweight-app-launcher {
    left: 20px !important;
}

.large-notification .k-notification-content {
    font-size: 22px;
    padding: 10px;
}

.large-notification {
    margin: 20px !important;
}

.svg-icon-lg {
    height: 24px;
    width: 24px;
    font-size: 20px;
}

.k-card {
    border: solid 1px var(--outline) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.k-button-group {
    box-shadow: none;
}

.table-layout-slices {
    min-width: 220px;
    overflow-x: hidden;
    background-color: var(--background);
    scrollbar-width: thin;
    gap: 0.25rem;
    padding: 0.5rem;
    overflow-y: auto;
    border-top: 1px solid var(--outline);
    border-right: 1px solid var(--outline);
    border-bottom: 1px solid var(--outline);
}

.slice-container {
    cursor: pointer;
    color: var(--kendo-color-on-app-surface);
    font-size: 14px;
    border-bottom: solid 1px var(--outline);
    margin-right: 6px;
    padding: 12px;
}

.slice-count {
    border-radius: 4px;
    padding: 4px;
    background-color: var(--outline);
}

.slice-container-selected .slice-count {
    background-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.slice-container-selected {
    font-weight: bold;
    background-color: var(--contrast);
    border-radius: 8px;
}

.view-list-container {
    padding-left: 10px;
    background-color: var(--background);
}

.resize-handle {
    height: 100%;
    background: transparent;
    cursor: ew-resize;
    flex-basis: var(--resize-handle-width);
    flex-grow: 0; 
    flex-shrink: 0;
}

.resize-handle:hover {
    background: var(--kendo-color-primary);
}

.header-cell-label {
    padding: 12px 12px 12px calc(12px - var(--resize-handle-width));
}

.header-cell.dragging {
    opacity: 0.5;
}

.header-cell.drag-over {
    border-left: 2px solid blue;
}

.k-separator {
    border-bottom: 1px solid var(--outline);
}

.k-dialog-wrapper {
    overflow: auto;
}

.page-header {
    background: var(--sidebar);
    padding: 20px;
}
.page-header-actions {
    gap: 0.625rem;
}
.text-page-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--kendo-color-on-app-surface);
}

.k-table-td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.k-table-row:first-child {
    text-align: left;
}

.filter-item {
    font-size: 15px;
    color: var(--kendo-color-on-app-surface);
    align-items: center;
}
.filter-item-enabled  {
    background-color: var(--highlight);
    color: var(--highlight-text);
    border-radius: 10px;
}

.filter-button {
    padding: 0 10px ;
    cursor: pointer;
    align-items: center;
}
.date-between-arrow {
    padding: 2px 10px 6px 10px;
}
.filter-button:hover {
    border-radius: 8px;
    background-color: var(--outline);
}
.filter-separator {
    margin-left: 8px;
    margin-right:8px;
    width: 1px;
    height: 30px;
    background-color: var(--outline);
}

.filter-container {
    border: 1px solid var(--outline);
    border-radius: 4px;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
    min-width: 200px;
}

.search-box {
    margin-bottom: 10px;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px;
}
.checkbox-item:hover {
    cursor: pointer;
    background: var(--outline); 
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.k-grid-header .k-table-th {
    font-weight: normal;
}

.nav-tab-item  {
    font-weight: bold;
    font-size: 15px;
    padding: 14px 24px;
    cursor: pointer;
}
.nav-tab-item-selected {
    border-bottom: solid 3px var(--kendo-color-on-app-surface);
}
.view-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-right: solid 1px var(--outline);
    cursor: pointer;
}
.view-list-item .view-list-item-label {
    font-size: 14px;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    margin-right:8px;
    margin-left:8px;
}
.view-list-item-selected .view-list-item-label {
    background-color: var(--highlight);
    color: var(--highlight-text);
    font-weight: bold;
}

.table-link {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

.avatar-hack {
    transform: translate(-4px, 0px);
}

.metric-label {
    font-size: 14px;
}
.metric-value-label {
    height: 30px;
}
.metric-bar-track {
    position: relative;
    background-color: var(--surface);
    border-radius: 18px;
    height: 22px;
    overflow: hidden;
    margin-bottom: 5px;
}

.metric-bar-fill {
    background-color: var(--primary);
    height: 100%;
    border-radius: 20px 0 0 20px;
}

.metric-bar-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--title);
}

.metric-bar-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.metric-value {
    color: #1e90ff;
    font-weight: bold;
}

.map-info-label {
    font-size: 16px;
    font-weight: bold;
}
.map-info-value {
    font-size: 16px;
}

.dashboard-toolbar.k-toolbar .k-toolbar-item:focus {
    /*Hack that removes silly shadow whern telerik toolbar item is focused*/
    box-shadow: none;
}

.loading-spinner-overlay-container {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffad;
}

.menu-item-badge {
    padding: 2px 4px;
    background-color: #f55;
    color: white;
    border-radius: 4px;
    font-size: 13px;
}

.menu-item-badge-superscript {
    font-size: 10px;
    position: absolute;
    overflow: visible;
    top: 0;
    right: 0;
    translate: 50%;
}

.spinme {
    width: 24px;
    height: 24px;
    border: 5px solid var(--kendo-color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spinme-rotation 1s linear infinite;
}

@keyframes spinme-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.side-menu-item {
    font-size: 14px;
    font-weight: bold;
}

.side-menu-item .sidebar-fa-icon {
    color: #a8a2b1;
}
.side-menu-item-selected .sidebar-fa-icon {
    color: var(--highlight) !important;
}

.k-splitter {
    background-color: var(--background) !important;
}