html {
    /* === Base theme tokens === */
    --ep-primary: var(--purple-primary) !important;
    --ep-secondary: var(--purple-secondary) !important;
    --ep-tertiary: var(--teal-tertiary) !important;
    /* === Primary variants === */
    --ep-primary-hover: color-mix(in hsl, var(--ep-primary) 85%, black) !important;
    --ep-primary-active: color-mix(in hsl, var(--ep-primary) 70%, black) !important;
    --ep-primary-subtle: color-mix(in hsl, var(--ep-primary) 20%, white) !important;
    --ep-primary-subtle-hover: color-mix(in hsl, var(--ep-primary) 30%, white) !important;
    --ep-primary-subtle-active: color-mix(in hsl, var(--ep-primary) 40%, white) !important;
    /* === Secondary variants === */
    --ep-secondary-hover: color-mix(in hsl, var(--ep-secondary) 85%, black) !important;
    --ep-secondary-active: color-mix(in hsl, var(--ep-secondary) 70%, black) !important;
    --ep-secondary-subtle: color-mix(in hsl, var(--ep-secondary) 20%, white) !important;
    --ep-secondary-subtle-hover: color-mix(in hsl, var(--ep-secondary) 30%, white) !important;
    --ep-secondary-subtle-active: color-mix(in hsl, var(--ep-secondary) 40%, white) !important;
    /* === Tertiary variants === */
    --ep-tertiary-hover: color-mix(in hsl, var(--ep-tertiary) 85%, black) !important;
    --ep-tertiary-active: color-mix(in hsl, var(--ep-tertiary) 70%, black) !important;
    --ep-tertiary-subtle: color-mix(in hsl, var(--ep-tertiary) 20%, white) !important;
    --ep-tertiary-subtle-hover: color-mix(in hsl, var(--ep-tertiary) 30%, white) !important;
    --ep-tertiary-subtle-active: color-mix(in hsl, var(--ep-tertiary) 40%, white) !important;
    /* === Neutral backgrounds & text === */
    --mainBG: hsl(210, 17%, 92%) !important;
    --textStrong: hsl(229, 25%, 9%) !important;
    /* === Buttons === */
    --buttonBG: var(--mainBG) !important;
    --buttonBG: #fff !important;
    --buttonBorder: var(--ep-primary) !important;
    --buttonColor: var(--ep-primary) !important;
    --buttonHoverBG: color-mix(in hsl, var(--ep-primary) 45%, #fff 20%) !important;
    --kendo-color-primary-active: var(--ep-primary-active) !important;
    /* === Layout === */
    --tabActiveBG: var(--ep-secondary) !important;
    --horizontalMenuBG: transparent !important;
    --tabsBodyBG: #eff2f6 !important;
    --panelFooterBG: transparent !important;
}

/* === Dark Mode === */
html.dark-mode {
    --gridHeaderBG: hsl(229, 25%, 9%) !important;
    --mainBG: hsl(229, 25%, 9%) !important;
    --sidebarBG: hsl(229, 25%, 9%) !important;
    --panelBG: var(--sidebarBG) !important;
    --panelHeaderBG: var(--mainBG) !important;
    --textStrong: hsl(210, 17%, 95%) !important;
    --buttonBG: var(--ep-primary) !important;
    --buttonBorder: var(--ep-primary) !important;
    --buttonColor: hsl(210, 17%, 95%) !important;
    --kendo-color-primary-active: var(--ep-primary-active) !important;
    --cardBG: transparent !important;
    --buttonHoverBG: color-mix(in hsl, var(--ep-primary) 75%, #000) !important;
    --tabsBodyBG: var(--tabsHeaderBG) !important;
    --panelFooterBG: transparent !important;
}

/* === Modern Theme === */
html.themestyle-modern,
html.themestyle-classical {
    --topRowGradRight: var(--ep-primary) !important;
    --topRowGradLeft: color-mix(in hsl, var(--ep-primary) 80%, var(--ep-secondary)) !important;
    --sidebarBG: color-mix(in hsl, var(--ep-primary) 20%, #000 90%) !important;
}

html.themestyle-minimal,
html.themestyle-minimal.dark-mode {
    --topRowGradRight: var(--ep-primary) !important;
    --topRowGradLeft: color-mix(in hsl, var(--ep-primary) 80%, var(--ep-secondary)) !important;
}

/* === Modern Dark Mode === */
    html.themestyle-modern.dark-mode {
        --topRowGradRight: var(--ep-primary) !important;
        --topRowGradLeft: color-mix(in hsl, var(--ep-primary) 80%, var(--ep-secondary)) !important;
/*        --sidebarBG: hsl(229, 25%, 7%) !important;*/
        --sidebarBG: hsl(219, 29%, 13%) !important;
/*        --toolbarBG: transparent !important;*/
        --horizontalMenuBG: transparent !important;
    }






html {
    --ep-color-app-surface: #fff; 
    --ep-color-surface: #f8f9fa;
    --ep-color-surface-alt: #fff;
    --ep-color-surface-header: #f1f5f6;
    --ep-base: hsl(215, 47%, 90%);
    --ep-base-hover: hsl(215, 47%, 95%);
    --ep-base-active: hsl(215, 47%, 80%);
    --ep-base-emphasis: hsla(215, 30%, 15%, 0.4);
    --ep-base-on-subtle: hsl(215, 47%, 15%);
    --ep-base-subtle: hsl(215, 47%, 96%);
    --ep-base-subtle-hover: hsl(215, 47%, 93%);
    --ep-base-subtle-active: hsl(215, 55%, 90%);
    --ep-on-base: hsl(215, 47%, 15%);
    --ep-base-on-surface: hsl(215, 47%, 15%);
    --ep-primary: hsl(219, 95%, 45%);
    --ep-primary-hover: hsl(219, 95%, 35%);
    --ep-primary-active: hsl(219, 95%, 28%);
    --ep-primary-emphasis: hsla(219, 95%, 45%, 0.4);
    --ep-primary-on-subtle: hsl(219, 95%, 15%);
    --ep-primary-subtle: hsl(219, 95%, 92%);
    --ep-primary-subtle-hover: hsl(219, 95%, 85%);
    --ep-primary-subtle-active: hsl(219, 95%, 80%);
    --ep-on-primary: #fff;
    --ep-secondary: hsl(335, 57%, 46%);
    --ep-secondary-hover: hsl(335, 57%, 35%);
    --ep-secondary-active: hsl(335, 57%, 28%);
    --ep-secondary-emphasis: hsla(335, 57%, 46%, 0.4);
    --ep-secondary-on-subtle: hsl(335, 57%, 15%);
    --ep-secondary-subtle: hsl(335, 57%, 92%);
    --ep-secondary-subtle-hover: hsl(335, 57%, 85%);
    --ep-secondary-subtle-active: hsl(335, 57%, 80%);
    --ep-on-secondary: #fff;
    
    --ep-tertiary: hsl(209, 26%, 70%);
    --ep-tertiary-hover: hsl(209, 26%, 60%);
    --ep-tertiary-active: hsl(209, 26%, 50%);
    --ep-tertiary-emphasis: hsla(209, 26%, 70%, 0.4);
    --ep-tertiary-on-subtle: hsl(209, 26%, 15%);
    --ep-tertiary-subtle: hsl(209, 26%, 92%);
    --ep-tertiary-subtle-hover: hsl(209, 26%, 85%);
    --ep-tertiary-subtle-active: hsl(209, 26%, 80%);
    --ep-on-tertiary: #fff;
    --ep-primaryH: 219deg;
    --ep-primaryS: 95%;
    --ep-primaryL: 45%;
    --ep-secondaryH: 335deg;
    --ep-secondaryS: 57%;
    --ep-secondaryL: 46%;
    --ep-warning: hsl(38, 96%, 55%);
    --ep-warning-hover: hsl(38, 96%, 46%);
    --ep-warning-active: hsl(38, 96%, 36%);
    --ep-warning-emphasis: hsla(38, 96%, 55%, 0.4);
    --ep-warning-on-subtle: hsl(38, 96%, 15%);
    --ep-warning-subtle: hsl(38, 96%, 92%);
    --ep-warning-subtle-hover: hsl(38, 96%, 85%);
    --ep-warning-subtle-active: hsl(38, 96%, 80%);
    --ep-on-warning: #fff;
    --ep-info: hsl(209, 85%, 67%);
    --ep-info-hover: hsl(209, 85%, 57%);
    --ep-info-active: hsl(209, 85%, 35%);
    --ep-info-emphasis: hsla(209, 85%, 67%, 0.4);
    --ep-info-on-subtle: hsl(209, 85%, 20%);
    --ep-info-subtle: hsl(209, 85%, 92%);
    --ep-info-subtle-hover: hsl(209, 85%, 85%);
    --ep-info-subtle-active: hsl(209, 85%, 80%);
    --ep-on-info: #fff;
    --ep-success: hsl(149, 56%, 45%);
    --ep-success-hover: hsl(149, 56%, 35%);
    --ep-success-active: hsl(129, 56%, 22%);
    --ep-success-emphasis: hsla(129, 56%, 45%, 0.4);
    --ep-success-on-subtle: hsl(129, 56%, 15%);
    --ep-success-subtle: hsl(129, 56%, 92%);
    --ep-success-subtle-hover: hsl(129, 56%, 85%);
    --ep-success-subtle-active: hsl(129, 56%, 80%);
    --ep-on-success: #fff;
    --ep-success-subtle: hsl(129, 56%, 92%);
    --ep-success-subtle-hover: hsl(129, 56%, 85%);
    --ep-success-subtle-active: hsl(129, 56%, 80%);
    --ep-on-info: #fff;
    --ep-danger: hsl(348, 83%, 47%);
    --ep-danger-hover: hsl(348, 83%, 37%);
    --ep-danger-active: hsl(348, 83%, 50%);
    --ep-danger-emphasis: hsl(348, 83%, 47%);
    --ep-danger-on-subtle: hsl(348, 83%, 47%);
    --ep-danger-subtle: hsl(348, 83%, 87%);
    --ep-danger-subtle-hover: hsl(348, 83%, 90%);
    --ep-danger-subtle-active: hsl(348, 83%, 90%);
    --ep-primary-rgb: 5, 82, 223;
    --ep-secondary-rgb: 184, 50, 106;
    --ep-success-rgb: 50, 179, 112;
    --ep-info-rgb: 99, 173, 242;
    --ep-danger-rgb: 184, 50, 106;
    --ep-warging-rgb: 250, 169, 30;
    --ep-link-color: hsl(219, 95%, 45%);
    --ep-link-color: var(--ep-primary) !important;
    --ep-link-color-hover: hsl(219, 95%, 35%);
    --ep-blue: hsl(219, 95%, 45%);
    --ep-blue-bold: hsl(219, 95%, 40%);
    --ep-blue-bolder: hsl(219, 95%, 30%);
    --ep-blue-subtle: hsl(219, 95%, 70%);
    --ep-blue-subtler: hsl(219, 95%, 90%);
    --ep-purple: hsl(269, 90%, 50%);
    --ep-purple-bold: hsl(269, 64%, 38%);
    --ep-purple-bolder: hsl(269, 64%, 25%);
    --ep-purple-subtle: hsl(269, 64%, 75%);
    --ep-purple-subtler: hsl(369, 64%, 90%);
    --ep-cyan: hsl(182, 56%, 56%);
    --ep-cyan-bold: hsl(182, 56%, 40%);
    --ep-cyan-bolder: hsl(182, 56%, 25%);
    --ep-cyan-subtle: hsl(182, 56%, 75%);
    --ep-cyan-subtler: hsl(182, 56%, 90%);
    --ep-green: hsl(149, 56%, 53%);
    --ep-green-bold: hsl(149, 56%, 45%);
    --ep-green-bolder: hsl(149, 56%, 25%);
    --ep-green-subtle: hsl(129, 56%, 75%);
    --ep-green-subtler: hsl(129, 56%, 90%);
    --ep-red: hsl(345, 67%, 55%);
    --ep-red-bold: hsl(345, 67%, 45%);
    --ep-red-bolder: hsl(345, 67%, 30%);
    --ep-red-subtle: hsl(345, 67%, 73%);
    --ep-red-subtler: hsl(345, 67%, 90%);
    --ep-yellow: hsl(50, 98%, 49%);
    --ep-yellow-bold: hsl(50, 98%, 39%);
    --ep-yellow-bolder: hsl(50, 98%, 30%);
    --ep-yellow-subtle: hsl(50, 98%, 75%);
    --ep-yellow-subtler: hsl(50, 98%, 90%);
    --ep-orange: hsl(38, 96%, 55%);
    --ep-orange-bold: hsl(38, 96%, 45%);
    --ep-orange-bolder: hsl(38, 96%, 30%);
    --ep-orange-subtle: hsl(38, 96%, 75%);
    --ep-orange-subtler: hsl(38, 96%, 90%);
    --sidebarBG: hsl(219deg, 55%, 22%);
    --horizontalMenuBG: hsl(219, 65%, 22%);
    /* PANELS*/ 
    --panelBG: #f1f5f6;
    --panelHeaderBG: hsl(var(--ep-primaryH), var(--ep-primaryS), 99%);
    --panelFooterBG: hsl(var(--ep-primaryH), var(--ep-primaryS), 99%);
    /* GRIDS*/ 
    --gridHeaderBG: hsl(193deg, 44%, 97%);
    --gridCellHoverBG: #e1f0ff;
    --gridCellActiverBG: #d0f1f8;
    --gridBG: #fff;
    /* CARDS*/ --cardBG: #f9fafb;
    /* CALENDAR*/ --calendarCellBG: #fff;
    --calendarCellHeaderBG: #fff;
    --calendarCellDisabledBG: whitesmoke;

    /* TABS */ --tabsBodyBG: #f1f5f6;
    --tabsBodyBG_alt: #fff;
    --tabsHeaderBG: transparent;
    --tabsBorder: var(--ep-danger);
    --tabBG: transparent;
    --tabActiveBG: var(--ep-danger);
    /* FILE MANAGER */ --filemanagerBG: #fff;
    --filemanagerHeaderBG: #f8f9fa;
    /*BUTTONS*/ --buttonH: 215deg;
    --buttonS: 47%;
    /*DROPDOWNS*/ --dropdownItemHoverBG: #e9ecef;
    /*INPUTS*/ --inputBG: #FFF;
    --inputHoverBG: #f1f5f6;
    --skeletonBG: hsl(215deg, 47%, 80%);
    --skeletonBorder: hsl(215deg, 47%, 95%);
    --skeletonTabBG: hsl(215deg, 47%, 70%);
    --skeletonCellBG: hsl(215deg, 47%, 75%);
}


html.dark-mode {
    --mainBG: hsl(219, 50%, 8%);
    --panelBG: hsl(219, 50%, 15%);
    --mainPanelBG: hsl(219, 50%, 15%);
    --cardBG: hsl(219, 52%, 11%);
    --toolbarBG: hsl(219deg, 64%, 8%);
    --sidebarBG: hsl(219deg, 45%, 12%);
    --panelHeaderBG: hsl(219deg, 64%, 8%);
    --panelFooterBG: hsl(219deg, 64%, 8%);
    --horizontalMenuBG: hsl(219deg, 65%, 15%);
    --ep-primary: hsl(219, 95%, 55%);
    --ep-primary-hover: hsl(219, 95%, 65%);
    --ep-link-color: hsl(219, 95%, 55%);
    --ep-link-color-hover: hsl(219, 95%, 65%);
    /* TABS */ --tabsBodyBG: #1e1e2d;
    --tabsBodyBG_alt: #151521;
    --tabsHeaderBG: #151521;
    --tabsBorder: var(--ep-secondary);
    --tabBG: transparent;
    --tabActiveBG: var(--ep-secondary);
    --tabHoverBG: transparent;
    /*BUTTONS*/ --buttonBG: hsl(215deg, 47%, 20%);
    --buttonHoverBG: hsl(215deg, 47%, 25%);
    --buttonColor: hsl(215deg, 47%, 87%);
    --buttonBorder: hsl(215deg, 47%, 20%, .5);
    --buttonH: 215deg;
    --buttonS: 47%;
    --gridHeaderBG: hsl(215, 50%, 16%);
    --gridCellHoverBG: hsl(215, 50%, 22%);
    --gridCellActiverBG: hsl(215, 50%, 44%);
    --gridBG: hsl(215, 50%, 15%);
    --inputBG: hsl(215, 50%, 11%);
    --inputHoverBG: hsl(215, 50%, 8%);
    --disabled: hsl(210, 20%, 15%);
    --calendarCellBG: hsl(210, 50%, 15%);
    --calendarCellHeaderBG: hsl(190deg, 64%, 8%);
    --calendarCellDisabledBG: #2a2a40;
    --dropdownItemHoverBG: #303045;
    --filemanagerBG: hsl(210, 50%, 15%);
    --filemanagerHeaderBG: hsl(210deg, 50%, 8%);
    --skeletonBG: hsl(215deg, 65%, 22%);
    --skeletonBorder: hsl(215deg, 65%, 25%);
    --skeletonTabBG: hsl(215deg, 65%, 20%);
    --skeletonCellBG: hsl(215deg, 65%, 20%);
}




html:not(.themestyle-minimal) .pagetitle__icon {
    color: var(--ep-secondary);
}

.ep-fieldset__title:after {
    background: var(--ep-secondary);
}

.themestyle-classic .ep-panel__header {
    border-top: 2px solid var(--ep-secondary);
}

.themestyle-classic .ep-fieldset__title {
    border-color: var(--ep-secondary);
}

.filter-row:nth-child(2n+1) {
    background: hsla(var(--ep-primaryH), var(--ep-primaryS), var(--ep-primaryL), 0.08);
}

html:not(.themestyle-minimal) .menu li:hover > a i,
html:not(.themestyle-minimal) .menu li:hover > a .k-icon {
    color: var(--ep-primary-subtle-hover);
}

.menu ul.submenu li > a.-is-active,
.menu ul.submenu li.has-submenu:has(.-is-active) > a {
    background-color: hsl(var(--shadeH), var(--shadeS), 100%, 0.1);
    color: hsl(var(--ep-primaryH), var(--ep-primaryS), 70%);
}

.themestyle-minimal:not(.dark-mode) .menu ul.submenu li > a.-is-active,
.themestyle-minimal:not(.dark-mode) .menu ul.submenu li.has-submenu:has(.-is-active) > a {
    background-color: var(--ep-primary);
    color: hsl(var(--ep-primaryH), var(--ep-primaryS), 95%);
}



html.dark-mode {
    --mainBG: hsl(219, 32%, 28%) !important;
    --panelBG: hsl(219, 30%, 21%) !important;
    --mainPanelBG: hsl(219, 28%, 16%) !important;
    --cardBG: hsl(219, 24%, 18%) !important;
    --toolbarBG: hsl(219, 30%, 14%) !important;
    --panelHeaderBG: hsl(219, 26%, 15%) !important;
    --panelFooterBG: hsl(219, 26%, 15%) !important;
    --horizontalMenuBG: hsl(219, 28%, 17%) !important;
    --tabsBodyBG: hsl(219, 24%, 17%) !important;
    --tabsBodyBG_alt: hsl(219, 24%, 15%) !important;
    --tabsHeaderBG: hsl(219, 24%, 14%) !important;
    --gridHeaderBG: hsl(215, 26%, 18%) !important;
    --gridBG: hsl(215, 24%, 17%) !important;
    --gridCellHoverBG: hsl(215, 24%, 22%) !important;
    --gridCellActiverBG: hsl(215, 40%, 30%) !important;
    --inputBG: hsl(215, 22%, 16%) !important;
    --inputHoverBG: hsl(215, 22%, 19%) !important;
    --filemanagerBG: hsl(210, 24%, 17%) !important;
    --filemanagerHeaderBG: hsl(210, 24%, 14%) !important;
    --calendarCellBG: hsl(210, 22%, 17%) !important;
    --calendarCellHeaderBG: hsl(210, 22%, 14%) !important;
    --calendarCellDisabledBG: hsl(219, 16%, 22%) !important;
    --textStrong: hsl(210, 20%, 92%) !important;
    --textDefault: #f1f1f1 !important;
    --sidebarBG: hsl(219, 29%, 13%) !important;
    --kendo-color-app-surface: var(--sidebarBG) !important;
    --ep-color-surface-alt: color-mix(in hsl, var(--sidebarBG) 90%, #fff 15%) !important;
    --ep-color-surface-alt: var(--sidebarBG) !important;
    --kendo-color-surface: var(--panelBG) !important;
    /*    --kendo-color-surface: var(--sidebarBG) !important;*/
    /*    --panelHeaderBG:*/
    /*    --ep-color-surface-alt*/
}