/* DEFAULT */
:root {
--fontFamily: 'Open Sans', Arial, sans-serif !important;
--menuHeight: 40px;
--menuWidth: 220px;
--sidebarWidth: 280px;
--sidebarOffset: 220px;
--sidebarMiniWidth: calc(var(--sidebarWidth) - var(--sidebarOffset));
--topRowHeight: 50px;
--toolbarHeight: 50px;
--modalToolbarHeight: 40px;
--quickSearchTotalHeight: calc( 1.5em + 0.75rem + 2px + var(--generalMargin));
--scrollbarHeight: 14px;
--scrollbarWidth: 14px;
--logoColor: #fff;
--ep-hamburger-color: hsl(210deg, 25%, 88%);
--borderColor: #d3d3d3;
--borderH: 0;
--borderRadius: .25rem;
--borderDivider: 0;
--boxShadow: rgba(0, 0, 0, 0.16) 2px 2px 6px;
--ep-color-app-surface: #fff; /* background color of the application */
--ep-color-surface: #f8f9fa;
--ep-color-surface-alt: #fff;
--ep-color-surface-header: #f1f5f6;
--bodyBG: #050306;
--bodyBG: #fff;
--mainBG: var(--ep-color-app-surface); --mainPanelBG: var(--ep-color-app-surface); --toolbarBG: var(--ep-color-app-surface);
--sidebarBG: hsl(216deg, 32%, 20%); --sidebarMenuText: #afafc0; --sidebarMenuTextHover: #fff;
--topRowGradRight: #201b4c; --topRowGradLeft: #302b63;
--horizontalMenuBG: #1e1b3e;
/* PANELS*/ --panelBG: var(--ep-color-surface); --panelHeaderBG: var(--ep-color-surface-header); --panelFooterBG: var(--ep-color-surface-header);
/* GRIDS*/ --gridHeaderBG: var(--ep-color-surface-header); --gridCellHoverBG: #e1f0ff; --gridCellActiverBG: #f8d0f2; --gridBG: var(--ep-color-surface-alt); --cellHeight: 32px;
/* CARDS*/ --cardBG: var(--ep-color-surface);
/* CALENDAR*/ --calendarCellBG: #fff; --calendarCellHeaderBG: #fff; --calendarCellDisabledBG: whitesmoke;
/* TABS */ --tabsBodyBG: var(--ep-color-surface); --tabsBodyBG_alt: var(--ep-color-surface-alt); --tabsHeaderBG: transparent; --tabsBorder: var(--ep-secondary); --tabBG: transparent; --tabActiveBG: var(--ep-secondary);
/* FILE MANAGER */ --filemanagerBG: var(--ep-color-surface-alt); --filemanagerHeaderBG: var(--ep-color-surface-header);
/*BUTTONS*/ --buttonBG: var(--ep-base); --buttonHoverBG: var(--ep-base-hover); --buttonColor: var(--ep-base-on-subtle); --buttonBorder: var(--ep-base-active); --buttonH: 210deg; --buttonS: 100%;
--smHeight: 24px; --mdHeight: 32px; --lgHeight: 40px; --mdWidth: 27px; --mdPadding: 6px;
/*DROPDOWNS*/ --dropdownItemHoverBG: #e9ecef;
/*INPUTS*/ --inputBG: #FFF; --inputBGH: 0; --inputHoverBG: #f1f5f6;
--ep-base: hsl(210, 100%, 93%); --ep-base-hover: hsl(210, 100%, 87%) ; --ep-base-active: hsl(210, 100%, 80%) ; --ep-base-emphasis: hsla(248, 65%, 32%, 0.4) ; --ep-base-on-subtle: hsl(248, 65%, 52%);
--ep-base-subtle: hsl(210, 100%, 96%) ; --ep-base-subtle-hover: hsl(210, 100%, 93%); --ep-base-subtle-active: hsl(210, 100%, 90%) ; --ep-on-base: hsl(248, 65%, 52%); --ep-base-on-surface: hsl(248, 65%, 52%);
--ep-primary: hsl(309, 72%, 57%); --ep-primary-hover: hsl(309, 70%, 45%); --ep-primary-active: hsl(309, 68%, 40%); --ep-primary-emphasis: hsla(309, 72%, 57%, 0.4); --ep-primary-on-subtle: hsl(292, 37%, 24%);
--ep-primary-subtle: hsl(310, 74%, 92%); --ep-primary-subtle-hover: hsl(310, 74%, 85%); --ep-primary-subtle-active: hsl(310, 74%, 80%); --ep-on-primary: #fff;
--ep-secondary: hsl(238, 66%, 64%); --ep-secondary-hover: hsl(238, 64%, 54%); --ep-secondary-active: hsl(238, 62%, 49%); --ep-secondary-emphasis: hsla(238, 66%, 64%, 0.4); --ep-secondary-on-subtle: hsl(234, 34%, 24%);
--ep-secondary-subtle: hsl(238, 66%, 92%); --ep-secondary-subtle-hover: hsl(238, 64%, 85%); --ep-secondary-subtle-active: hsl(238, 62%, 80%); --ep-on-secondary: #fff;
--ep-tertiary: hsl(142, 29%, 52%); --ep-tertiary-hover: hsl(142, 29%, 42%); --ep-tertiary-active: hsl(142, 29%, 37%); --ep-tertiary-emphasis: hsla(142, 29%, 37%, 0.4); --ep-tertiary-on-subtle: hsl(142, 29%, 17%);
--ep-tertiary-subtle: hsl(142, 29%, 92%); --ep-tertiary-subtle-hover: hsl(142, 29%, 85%); --ep-tertiary-subtle-active: hsl(142, 29%, 80%); --ep-on-tertiary: #fff;
--ep-primaryH: 309deg; --ep-primaryS: 72%; --ep-primaryL: 57%;
--ep-secondaryH: 238deg; --ep-secondaryS: 66%; --ep-secondaryL: 64%;
--ep-warning: hsl(45, 99%, 49%); --ep-warning-hover: hsl(45, 99%, 39%); --ep-warning-active: hsl(45, 99%, 34%); --ep-warning-emphasis: hsla(45, 99%, 49%, 0.4); --ep-warning-on-subtle: hsl(45, 99%, 15%);
--ep-warning-subtle: hsl(46, 96%, 92%); --ep-warning-subtle-hover: hsl(46, 96%, 85%); --ep-warning-subtle-active: hsl(46, 96%, 80%); --ep-on-warning: #fff;
--ep-info: hsl(197, 94%, 58%); --ep-info-hover: hsl(197, 94%, 48%); --ep-info-active: hsl(197, 94%, 43%); --ep-info-emphasis: hsla(197, 94%, 43%, 0.4); --ep-info-on-subtle: hsl(197, 94%, 15%);
--ep-info-subtle: hsl(197, 94%, 92%); --ep-info-subtle-hover: hsl(197, 94%, 85%); --ep-info-subtle-active: hsl(197, 94%, 80%); --ep-on-info: #fff;
--ep-success: hsl(129, 45%, 57%); --ep-success-hover: hsl(129, 45%, 47%); --ep-success-active: hsl(129, 45%, 43%); --ep-success-emphasis: hsla(129, 45%, 57%, 0.4); --ep-success-on-subtle: hsl(129, 45%, 15%);
--ep-success-subtle: hsl(129, 45%, 92%); --ep-success-subtle-hover: hsl(129, 45%, 85%); --ep-success-subtle-active: hsl(129, 45%, 80%); --ep-on-success: #fff;
--ep-danger: hsl(0, 95%, 64%); --ep-danger-hover: hsl(0, 90%, 54%); --ep-danger-active: hsl(0, 90%, 49%); --ep-danger-emphasis: hsla(0, 95%, 64%, 0.4); --ep-danger-on-subtle: hsl(0, 90%, 19%);
--ep-danger-subtle: hsl(0, 95%, 92%); --ep-danger-subtle-hover: hsl(0, 95%, 82%); --ep-danger-subtle-active: hsl(0, 95%, 77%);
--ep-primary-rgb: 224, 66, 200 ;
--ep-secondary-rgb: 102, 106, 223 ;
--ep-success-rgb: 96, 194, 110 ;
--ep-info-rgb: 47, 191, 248 ;
--ep-danger-rgb: 250, 75, 75 ;
--ep-warging-rgb: 248, 186, 1 ;
--textH: 220deg;
--textDefault: hsl(var(--textH), 16%, 48%);
--textStrong: hsl(var(--textH), 16%, 18%);
--textLight: hsl(var(--textH), 16%, 60%);
--textGray: hsl(var(--textH), 16%, 68%);
--ep-disabled-text: hsl(var(--textH), 08%, 50%);
--ep-disabled-bg: hsl(var(--buttonH), 35%, 98%);
--ep-disabled-border: hsl(var(--buttonH), 27%, 90%);
--textDisable: var(--ep-disabled-text);
--ep-link-color: hsl(238, 66%, 64%); --ep-link-color-hover: hsl(238, 64%, 54%);
--ep-red-l: #FFADAD; --ep-red: #FF5C5C; --ep-red-d: #8b0f0f;
--ep-orange-l: #FDC79B; --ep-orange: #FB8423; --ep-orange-d: #A04A03;
--ep-yellow-l: #FFF5AD; --ep-yellow: #FFE51F; --ep-yellow-d: #A39000;
--ep-lime-l: #DFFF99; --ep-lime: #BAFF29; --ep-lime-d: #7DB800;
--ep-green-l: #C8FFC2; --ep-green: #6CFF5C; --ep-green-d: #2f8d25;
--ep-turquoise-l: #A6F2DF; --ep-turquoise: #41E2BA; --ep-turquoise-d: #21a786;
--ep-cyan-l: #D6FFFD; --ep-cyan: #33FFF5; --ep-cyan-d: #019b92;
--ep-blue-l: #9fc8f4; --ep-blue: #2c87e8; --ep-blue-d: #1461b3;
--ep-purple-l: #CDB8F4; --ep-purple: #8F60E6; --ep-purple-d: #581EC2;
--ep-blue: hsl(240, 71%, 55%); --ep-blue-bold: hsl(240, 71%, 39%); --ep-blue-bolder: hsl(240, 71%, 19%); --ep-blue-subtle: hsl(240, 71%, 75%); --ep-blue-subtler: hsl(240, 71%, 90%);
--ep-purple: hsl(328, 52%, 50%); --ep-purple-bold: hsl(328, 52%, 30%); --ep-purple-bolder: hsl(328, 52%, 10%); --ep-purple-subtle: hsl(328, 52%, 70%); --ep-purple-subtler: hsl(328, 52%, 90%);
--ep-cyan: hsl(173, 48%, 45%); --ep-cyan-bold: hsl(173, 48%, 35%); --ep-cyan-bolder: hsl(173, 48%, 25%); --ep-cyan-subtle: hsl(173, 48%, 60%); --ep-cyan-subtler: hsl(173, 48%, 75%);
--ep-green: hsl(138, 51%, 63%); --ep-green-bold: hsl(138, 51%, 46%); --ep-green-bolder: hsl(138, 51%, 21%); --ep-green-subtle: hsl(138, 51%, 73%); --ep-green-subtler: hsl(138, 51%, 87%);
--ep-red: hsl(11, 99%, 64%); --ep-red-bold: hsl(11, 99%, 44%); --ep-red-bolder: hsl(11, 99%, 30%); --ep-red-subtle: hsl(11, 99%, 79%); --ep-red-subtler: hsl(11, 99%, 90%);
--ep-yellow: hsl(53, 100%, 66%); --ep-yellow-bold: hsl(53, 90%, 46%); --ep-yellow-bolder: hsl(53, 90%, 31%); --ep-yellow-subtle: hsl(53, 90%, 81%); --ep-yellow-subtler: hsl(53, 90%, 91%) ;
--ep-orange: hsl(37, 100%, 64%); --ep-orange-bold: hsl(37, 100%, 44%); --ep-orange-bolder: hsl(37, 100%, 31%); --ep-orange-subtle: hsl(37, 100%, 75%); --ep-orange-subtler: hsl(37, 100%, 91%);
--fb: #4267B2;
--tw: #1DA1F2;
--lin: #0077B5;
--ins: #C13584;
--shadeH: 210deg;
--shadeS: 25%;
--shade100: #fff;
--shade98: hsl(var(--shadeH), var(--shadeS), 98%);
--shade96: hsl(var(--shadeH), var(--shadeS), 96%);
--shade94: hsl(var(--shadeH), var(--shadeS), 94%);
--shade92: hsl(var(--shadeH), var(--shadeS), 92%);
--shade90: hsl(var(--shadeH), var(--shadeS), 90%);
--shade88: hsl(var(--shadeH), var(--shadeS), 88%);
--shade86: hsl(var(--shadeH), var(--shadeS), 86%);
--shade84: hsl(var(--shadeH), var(--shadeS), 84%);
--shade82: hsl(var(--shadeH), var(--shadeS), 82%);
--shade80: hsl(var(--shadeH), var(--shadeS), 80%);
--shade70: hsl(var(--shadeH), var(--shadeS), 70%);
--shade60: hsl(var(--shadeH), var(--shadeS), 60%);
--shade50: hsl(var(--shadeH), var(--shadeS), 50%);
--shade40: hsl(var(--shadeH), var(--shadeS), 40%);
--shade30: hsl(var(--shadeH), var(--shadeS), 30%);
--shade20: hsl(var(--shadeH), var(--shadeS), 20%);
--shade18: hsl(var(--shadeH), var(--shadeS), 18%);
--shade16: hsl(var(--shadeH), var(--shadeS), 16%);
--shade14: hsl(var(--shadeH), var(--shadeS), 14%);
--shade12: hsl(var(--shadeH), var(--shadeS), 12%);
--shade10: hsl(var(--shadeH), var(--shadeS), 10%);
--shade08: hsl(var(--shadeH), var(--shadeS), 8%);
--shade06: hsl(var(--shadeH), var(--shadeS), 6%);
--shade04: hsl(var(--shadeH), var(--shadeS), 4%);
--shade02: hsl(var(--shadeH), var(--shadeS), 2%);
--shade000: #000;
}
/* MINIMAL */
:root.themestyle-minimal {
/* --ep-primary: #0257d5; --ep-primary-hover: #0f50b0; --ep-primary-subtle: #7da5e1; --ep-primary-emphasis: #12305e;
--ep-secondary: #555657; --ep-secondaryHover: #353637;
--sidebarMenuText: #555; --sidebarMenuTextHover: #0257d5; --sidebarMenuBGHover: #e4e5e6;
--topRowGradRight: #0f50b0; --topRowGradLeft: #0257d5;
*/
--ep-hamburger-color: hsl(210deg, 25%, 2%);
--topRowGradRight: #fafbfc; --topRowGradLeft: #fff;
--horizontalMenuBG: #fff;
--mainBG: #fff;
--buttonBG: #fff; --buttonHoverBG: #eaebec; --buttonColor: #333; --buttonBorder: #eaebec; --buttonH: 210deg; --buttonS: 5%;
--gridHeaderBG: #eef1f6; --gridCellHoverBG: #e7f0f8; --gridCellActiverBG: #cfe7ff;
--sidebarBG: #f4f5f6;
--panelHeaderBG: #fff;
--logoColor: #212121;
/* TABS */ --tabsBodyBG: #f1f5f6; --tabsBodyBG_alt: #fff; --tabsHeaderBG: transparent; --tabsBorder: var(--ep-primary); --tabBG: transparent; --tabActiveBG: var(--ep-primary); --tabHoverBG: #f1f5f6;
--borderRadius: 0;
/* --ep-primaryH: 216;
--ep-primaryS: 98%;
--ep-primaryL: 42%;
--ep-warningH : 42;
--ep-infoH : 201;
--ep-successH : 132;
--ep-dangerH: 345;
--ep-warning: hsl(var(--ep-warningH),var(--ep-primaryS), var(--ep-primaryL));
--ep-info: hsl(var(--ep-infoH),var(--ep-primaryS), var(--ep-primaryL));
--ep-success: hsl(var(--ep-successH),var(--ep-primaryS), var(--ep-primaryL));
--ep-danger: hsl(var(--ep-dangerH),var(--ep-primaryS), var(--ep-primaryL));*/
/*--textDefault: hsl(var(--textH), 6%, 30%);
--textStrong: hsl(var(--textH), 6%, 15%);
--textLight: hsl(var(--textH), 6%, 50%);*/
}
/* CLASSIC */
:root.themestyle-classic {
--borderRadius: .5rem;
--borderDivider: 1px;
}
/* DARK MODE */
:root.dark-mode {
--shade100: #000;
--shade98: hsl(var(--shadeH), var(--shadeS), 2%);
--shade96: hsl(var(--shadeH), var(--shadeS), 4%);
--shade94: hsl(var(--shadeH), var(--shadeS), 6%);
--shade92: hsl(var(--shadeH), var(--shadeS), 8%);
--shade90: hsl(var(--shadeH), var(--shadeS), 10%);
--shade88: hsl(var(--shadeH), var(--shadeS), 12%);
--shade86: hsl(var(--shadeH), var(--shadeS), 14%);
--shade84: hsl(var(--shadeH), var(--shadeS), 16%);
--shade82: hsl(var(--shadeH), var(--shadeS), 18%);
--shade80: hsl(var(--shadeH), var(--shadeS), 20%);
--shade70: hsl(var(--shadeH), var(--shadeS), 30%);
--shade60: hsl(var(--shadeH), var(--shadeS), 40%);
--shade50: hsl(var(--shadeH), var(--shadeS), 50%);
--shade40: hsl(var(--shadeH), var(--shadeS), 60%);
--shade30: hsl(var(--shadeH), var(--shadeS), 70%);
--shade20: hsl(var(--shadeH), var(--shadeS), 80%);
--shade18: hsl(var(--shadeH), var(--shadeS), 82%);
--shade16: hsl(var(--shadeH), var(--shadeS), 84%);
--shade14: hsl(var(--shadeH), var(--shadeS), 86%);
--shade12: hsl(var(--shadeH), var(--shadeS), 88%);
--shade10: hsl(var(--shadeH), var(--shadeS), 90%);
--shade08: hsl(var(--shadeH), var(--shadeS), 92%);
--shade06: hsl(var(--shadeH), var(--shadeS), 94%);
--shade04: hsl(var(--shadeH), var(--shadeS), 96%);
--shade02: hsl(var(--shadeH), var(--shadeS), 98%);
--shade000: #fff;
color-scheme: dark;
--ep-color-app-surface: #151521; /* background color of the application */
--ep-color-surface: #22222e;
--ep-color-surface-alt: #151521;
--ep-color-surface-header: #f1f5f6;
--logoColor: #FFFFFF;
--ep-hamburger-color: hsl(210deg, 25%, 88%);
/*--toolbarBG: #1a1a27;*/
--sidebarBG: #1e1e2d;
--sidebarMenuText: #757e9b; --sidebarMenuTextHover: #fff; --sidebarMenuBGHover: transparent;
--panelHeaderBG: #2a2a40; --panelFooterBG: #2a2a40;
--borderColor: hsl(238, 17%, 34%); --borderH: 238;
--topRowGradRight: #1e1e2d; --topRowGradLeft: #1e1e2d;
/* TABS */ --tabsBodyBG: #1e1e2d; --tabsBodyBG_alt: #151521; --tabsHeaderBG: #151521; --tabsBorder: var(--ep-secondary); --tabBG: transparent; --tabActiveBG: var(--ep-secondary); --tabHoverBG: transparent;
/* BUTTONS */ --buttonBG: #494a6c; /*--buttonBG: #1b1b29;*/ --buttonHoverBG: #707197; /*--buttonHoverBG: #33333d;*/ --buttonBorder: var(--borderColor); --buttonColor: #ffffff;
--gridHeaderBG: #22222e; --gridCellHoverBG: #3e3f56; --gridCellActiverBG: #474865; --gridBG: #1e1e2d;
--inputBG: #161622; --inputHoverBG: #111215;
--inputBGH: 240;
--textDefault: hsl(var(--textH), 16%, 70%);
--textStrong: hsl(var(--textH), 16%, 100%);
--textLight: hsl(var(--textH), 16%, 50%);
--textGray: hsl(var(--textH), 16%, 40%);
--ep-disabled-text: hsl(var(--textH), 12%, 50%);
--ep-disabled-bg: hsl(var(--buttonH), 35%, 08%);
--ep-disabled-border: hsl(var(--borderH), 27%, 22%);
--calendarCellBG: #1e1e2d; --calendarCellHeaderBG: #12121b; --calendarCellDisabledBG: #2a2a40; --dropdownItemHoverBG: #303045;
--filemanagerBG: #1e1e2d; --filemanagerHeaderBG: #12121b;
--ep-danger-subtle: hsl(0, 95%, 8%); --ep-danger-subtle-hover: hsl(0, 95%, 18%); --ep-danger-subtle-active: hsl(0, 95%, 23%);
}
:root.dark-mode.themestyle-minimal {
--mainBG: #151521;
--horizontalMenuBG: #2e2e40;
--ep-secondary: #151521;
--ep-hamburger-color: hsl(210deg, 25%, 88%);
/* TABS */ --tabsBG: #1e1e2d; --tabsBGalt: #151521; --tabsHeaderBG: #151521;
/* BUTTONS */ --buttonBG: #2a2a40; --buttonHoverBG: #35354b; --borderColor: #2a2a40; --buttonBorder: var(--borderColor);
}
:root.themestyle-modern { --topRowGradRight: #4834d4; --topRowGradLeft: #c423ac; }
:root.themestyle-modern.dark-mode { --topRowGradRight: #4834d4; --topRowGradLeft: #c423ac; }
.menutype-horizontal { --sidebarWidth: 0; }
/* FONT SIZES */
:root { --mainFont: 14px; --txtSizeGiga: calc(1.425rem + 2.1vw); --txtSizeHuge: calc(1.35rem + 1.2vw); --txtSizeXXLarge: calc(1.3125rem + .75vw); --txtSizeXLarge: calc(1.275rem + .3vw); --txtSizeLarge: 1.25rem; --txtSizeTiny: .75rem; --txtSizeSmall: .85rem; --txtSizeNormal: 1rem; --lineHeight: 1.5; }
:root.font-small { --mainFont: 12px; }
:root.font-large { --mainFont: 16px; }
/* PADDINGS */
:root { --contentMargin: 12px; --cellPadding: .4rem .4rem; --generalPadding: 1rem; --generalMargin: 1rem; --controlPadding: .2rem; --controlTopBottomMargin: 1rem; --flex-column-gap: .75rem; --flex-row-gap: .75rem; }
:root.density-compact { --contentMargin: 13px; --cellPadding: .2rem .4rem; --generalPadding: .5rem; --generalMargin: .5rem; --controlPadding: .2rem; --controlTopBottomMargin: .5rem; --flex-column-gap: .5rem; --flex-row-gap: .5rem; }
/* KENDO VARRIABLES */
:root {
--kendo-font-family: var(--fontFamily);
--kendo-font-size: var(--txtSizeNormal);
--kendo-line-height: var(--lineHeight);
--kendo-color-app-surface: var(--ep-color-app-surface);
--kendo-color-on-app-surface: var(--textDefault);
--kendo-color-subtle: var(--textLight);
--kendo-color-surface: var(--ep-color-surface);
--kendo-color-surface-alt: var(--ep-color-surface-alt);
--kendo-color-border: var(--borderColor);
--kendo-color-border-alt: rgba(33,37,41,0.2);
--kendo-color-base-subtle: var(--ep-base-subtle);
--kendo-color-base-subtle-hover: var(--ep-base-subtle-hover);
--kendo-color-base-subtle-active: var(--ep-base-subtle-active);
--kendo-color-base: var(--ep-base);
--kendo-color-base-hover: var(--ep-base-hover);
--kendo-color-base-active: var(--ep-base-active);
--kendo-color-base-emphasis: var(--ep-base-emphasis);
--kendo-color-base-on-subtle: var(--ep-base-on-subtle);
--kendo-color-on-base: var(--ep-on-base);
--kendo-color-base-on-surface: var(--ep-base-on-surface);
--kendo-color-primary-subtle: var(--ep-primary-subtle);
--kendo-color-primary-subtle-hover: var(--ep-primary-subtle-hover);
--kendo-color-primary-subtle-active: var(--ep-primary-subtle-active);
--kendo-color-primary: var(--ep-primary);
--kendo-color-primary-hover: var(--ep-primary-hover);
--kendo-color-primary-active: var(--ep-primary-active);
--kendo-color-primary-emphasis: var(--ep-primary-emphasis);
--kendo-color-primary-on-subtle: var(--ep-primary-on-subtle);
--kendo-color-on-primary: var(--ep-on-primary);
--kendo-color-primary-on-surface: var(--ep-primary);
--kendo-color-secondary-subtle: var(--ep-secondary-subtle);
--kendo-color-secondary-subtle-hover: var(--ep-secondary-subtle-hover);
--kendo-color-secondary-subtle-active: var(--ep-secondary-subtle-active);
--kendo-color-secondary: var(--ep-secondary);
--kendo-color-secondary-hover: var(--ep-secondary-hover);
--kendo-color-secondary-active: var(--ep-secondary-active);
--kendo-color-secondary-emphasis: var(--ep-secondary-emphasis);
--kendo-color-secondary-on-subtle: var(--ep-secondary-subtle);
--kendo-color-on-secondary: var(--ep-secondary-on-subtle);
--kendo-color-secondary-on-surface: var(--ep-secondary);
--kendo-color-tertiary-subtle: var(--ep-tertiary-subtle);
--kendo-color-tertiary-subtle-hover: var(--ep-tertiary-subtle-hover);
--kendo-color-tertiary-subtle-active: var(--ep-tertiary-subtle-active);
--kendo-color-tertiary: var(--ep-tertiary);
--kendo-color-tertiary-hover: var(--ep-tertiary-hover);
--kendo-color-tertiary-active: var(--ep-tertiary-active);
--kendo-color-tertiary-emphasis: var(--ep-tertiary-emphasis);
--kendo-color-tertiary-on-subtle: var(--ep-tertiary-subtle);
--kendo-color-on-tertiary: var(--ep-on-tertiary);
--kendo-color-tertiary-on-surface: var(--ep-tertiary);
--kendo-color-info-subtle: var(--ep-info-subtle);
--kendo-color-info-subtle-hover: var(--ep-info-subtle-hover);
--kendo-color-info-subtle-active: var(--ep-info-subtle-active);
--kendo-color-info: var(--ep-info);
--kendo-color-info-hover: var(--ep-info-hover);
--kendo-color-info-active: var(--ep-info-active);
--kendo-color-info-emphasis: var(--ep-info-emphasis);
--kendo-color-info-on-subtle: var(--ep-info-on-subtle);
--kendo-color-on-info: var(--ep-on-info);
--kendo-color-info-on-surface: var(--ep-info);
--kendo-color-success-subtle: var(--ep-success-subtle);
--kendo-color-success-subtle-hover: var(--ep-success-subtle-hover);
--kendo-color-success-subtle-active: var(--ep-success-subtle-active);
--kendo-color-success: var(--ep-success);
--kendo-color-success-hover: var(--ep-success-hover);
--kendo-color-success-active: var(--ep-success-active);
--kendo-color-success-emphasis: var(--ep-success-emphasis);
--kendo-color-success-on-subtle: var(--ep-success-on-subtle);
--kendo-color-on-success: var(--ep-on-success);
--kendo-color-success-on-surface: var(--ep-success);
--kendo-color-warning-subtle: var(--ep-warning-subtle);
--kendo-color-warning-subtle-hover: var(--ep-warning-subtle-hover);
--kendo-color-warning-subtle-active: var(--ep-warning-subtle-active);
--kendo-color-warning: var(--ep-warning);
--kendo-color-warning-hover: var(--ep-warning-hover);
--kendo-color-warning-active: var(--ep-warning-active);
--kendo-color-warning-emphasis: var(--ep-warning-emphasis);
--kendo-color-warning-on-subtle: var(--ep-warning-on-subtle);
--kendo-color-on-warning: var(--ep-on-warning);
--kendo-color-warning-on-surface: var(--ep-warning);
--kendo-color-error-subtle: var(--ep-danger-subtle);
--kendo-color-error-subtle-hover: var(--ep-danger-subtle-hover);
--kendo-color-error-subtle-active: var(--ep-danger-subtle-active);
--kendo-color-error: var(--ep-danger);
--kendo-color-error-hover: var(--ep-danger-hover);
--kendo-color-error-active: var(--ep-danger-active);
--kendo-color-error-emphasis: var(--ep-danger-emphasis);
--kendo-color-error-on-subtle: var(--ep-danger-on-subtle);
--kendo-color-on-error: var(--ep-on-danger);
--kendo-color-error-on-surface: var(--ep-danger);
--kendo-color-light-subtle: #fff;
--kendo-color-light-subtle-hover: #f8f9fa;
--kendo-color-light-subtle-active: #e9ecef;
--kendo-color-light: #f8f9fa;
--kendo-color-light-hover: #e9ecef;
--kendo-color-light-active: #dee2e6;
--kendo-color-light-emphasis: rgba(33,37,41,0.1);
--kendo-color-light-on-subtle: #495057;
--kendo-color-on-light: #000;
--kendo-color-light-on-surface: #f8f9fa;
--kendo-color-dark-subtle: #495057;
--kendo-color-dark-subtle-hover: #596169;
--kendo-color-dark-subtle-active: #6c757d;
--kendo-color-dark: #212529;
--kendo-color-dark-hover: #343a40;
--kendo-color-dark-active: #495057;
--kendo-color-dark-emphasis: rgba(33,37,41,0.4);
--kendo-color-dark-on-subtle: #fff;
--kendo-color-on-dark: #fff;
--kendo-color-dark-on-surface: #212529;
--kendo-color-inverse-subtle: #495057;
--kendo-color-inverse-subtle-hover: #596169;
--kendo-color-inverse-subtle-active: #6c757d;
--kendo-color-inverse: #212529;
--kendo-color-inverse-hover: #343a40;
--kendo-color-inverse-active: #495057;
--kendo-color-inverse-emphasis: rgba(33,37,41,0.4);
--kendo-color-inverse-on-subtle: #fff;
--kendo-color-on-inverse: #fff;
--kendo-color-inverse-on-surface: #212529;
--kendo-color-series-a: var(--ep-blue);
--kendo-color-series-a-bold: var(--ep-blue-bold);
--kendo-color-series-a-bolder: var(--ep-blue-bolder);
--kendo-color-series-a-subtle: var(--ep-blue-subtle);
--kendo-color-series-a-subtler: var(--ep-blue-subtler);
--kendo-color-series-b: var(--ep-purple);
--kendo-color-series-b-bold: var(--ep-purple-bold);
--kendo-color-series-b-bolder: var(--ep-purple-bolder);
--kendo-color-series-b-subtle: var(--ep-purple-subtle);
--kendo-color-series-b-subtler: var(--ep-purple-subtler);
--kendo-color-series-c: var(--ep-cyan);
--kendo-color-series-c-bold: var(--ep-cyan-bold);
--kendo-color-series-c-bolder: var(--ep-cyan-bolder);
--kendo-color-series-c-subtle: var(--ep-cyan-subtle);
--kendo-color-series-c-subtler: var(--ep-cyan-subtler);
--kendo-color-series-d: var(--ep-green);
--kendo-color-series-d-bold: var(--ep-green-bold);
--kendo-color-series-d-bolder: var(--ep-green-bolder);
--kendo-color-series-d-subtle: var(--ep-green-subtle);
--kendo-color-series-d-subtler: var(--ep-green-subtler);
--kendo-color-series-e: var(--ep-red);
--kendo-color-series-e-bold: var(--ep-red-bold);
--kendo-color-series-e-bolder: var(--ep-red-bolder);
--kendo-color-series-e-subtle: var(--ep-red-subtle);
--kendo-color-series-e-subtler: var(--ep-red-subtler);
--kendo-color-series-f: var(--ep-yellow);
--kendo-color-series-f-bold: var(--ep-yellow-bold);
--kendo-color-series-f-bolder: var(--ep-yellow-bolder);
--kendo-color-series-f-subtle: var(--ep-yellow-subtle);
--kendo-color-series-f-subtler: var(--ep-yellow-subtler);
}
/* DEV EXPRESS VARRIABLES */
:root {
--bs-blue: var(--ep-blue);
--bs-purple: var(--ep-purple);
--bs-red: var(--ep-red);
--bs-green: var(--ep-green);
--bs-yellow: var(--ep-yellow);
--bs-cyan: var(--ep-cyan);
--bs-white: #fff;
--bs-gray: #888;
--bs-gray-dark: #343a40;
--bs-gray-100: #ececec;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #888;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: var(--ep-primary);
--bs-secondary: var(--ep-secondary);
--bs-success: var(--ep-success);
--bs-info: var(--ep-info);
--bs-warning: var(--ep-warning);
--bs-danger: var(--ep-danger);
--bs-light: #ececec;
--bs-dark: #212529;
--bs-primary-rgb: var(--ep-primary-rgb);
--bs-secondary-rgb: var(--ep-secondary-rgb);
--bs-success-rgb: var(--ep-success-rgb);
--bs-info-rgb: var(--ep-info-rgb);
--bs-warning-rgb: var(--ep-warning-rgb);
--bs-danger-rgb: var(--ep-danger-rgb);
--bs-light-rgb: 236,236,236;
--bs-dark-rgb: 33,37,41;
--bs-primary-text-emphasis: var(--ep-primary-on-subtle);
--bs-secondary-text-emphasis: var(--ep-secondary-on-subtle);
--bs-success-text-emphasis: var(--ep-success-on-subtle);
--bs-info-text-emphasis: var(--ep-info-on-subtle);
--bs-warning-text-emphasis: var(--ep-warning-on-subtle);
--bs-danger-text-emphasis: var(--ep-danger-on-subtle);
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: var(--ep-primary-subtle);
--bs-secondary-bg-subtle: var(--ep-secondary-subtle);
--bs-success-bg-subtle: var(--ep-success-subtle);
--bs-info-bg-subtle: var(--ep-info-subtle);
--bs-warning-bg-subtle: var(--ep-warning-subtle);
--bs-danger-bg-subtle: var(--ep-danger-subtle);
--bs-light-bg-subtle: #f6f6f6;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: var(--ep-primary-subtle-hover);
--bs-secondary-border-subtle: var(--ep-secondary-subtle-hover);
--bs-success-border-subtle: var(--ep-success-subtle-hover);
--bs-info-border-subtle: var(--ep-info-subtle-hover);
--bs-warning-border-subtle: var(--ep-warning-subtle-hover);
--bs-danger-border-subtle: var(--ep-danger-subtle-hover);
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255,255,255;
--bs-black-rgb: 34,34,34;
--bs-font-sans-serif: var(--fontFamily);
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--fontFamily);
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33,37,41;
--bs-body-bg: var(--ep-color-surface-alt);
--bs-body-bg-rgb: 255,255,255;
--bs-emphasis-color: #222;
--bs-emphasis-color-rgb: 34,34,34;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33,37,41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233,236,239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33,37,41;
--bs-tertiary-bg: #ececec;
--bs-tertiary-bg-rgb: 236,236,236;
--bs-heading-color: inherit;
--bs-link-color: var(--ep-link-color);
--bs-link-color-rgb: 95,54,141;
--bs-link-decoration: underline;
--bs-link-hover-color: var(--ep-link-color-hover);
--bs-link-hover-color-rgb: 76,43,113;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: var(--borderColor);
--bs-border-color-translucent: rgba(34, 34, 34, 0.175);
--bs-border-radius: var(--borderRadius);
--bs-border-radius-sm: 0.15rem;
--bs-border-radius-lg: 0.3rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(34, 34, 34, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(34, 34, 34, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(34, 34, 34, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(95, 54, 141, 0.25);
--bs-form-valid-color: var(--ep-success);
--bs-form-valid-border-color: var(--ep-success);
--bs-form-invalid-color: var(--ep-danger);
--bs-form-invalid-border-color: var(--ep-danger);
}
/* DEV EXPRESS VARRIABLES DARK MODE */
.dark-mode {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222,226,230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33,37,41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222,226,230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52,58,64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222,226,230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43,48,53;
--bs-primary-text-emphasis: var(--ep-primary-subtle-active);
--bs-secondary-text-emphasis: var(--ep-secondary-subtle-active);
--bs-success-text-emphasis: var(--ep-success-subtle-active);
--bs-info-text-emphasis: var(--ep-info-subtle-active);
--bs-warning-text-emphasis: var(--ep-warning-subtle-active);
--bs-danger-text-emphasis: var(--ep-danger-subtle-active);
--bs-light-text-emphasis: #ececec;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #130b1c;
--bs-secondary-bg-subtle: #1b1b1b;
--bs-success-bg-subtle: #08210e;
--bs-info-bg-subtle: #00222e;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #2b2e31;
--bs-primary-border-subtle: var(--ep-primary-on-subtle);
--bs-secondary-border-subtle: var(--ep-secondary-on-subtle);
--bs-success-border-subtle: var(--ep-success-on-subtle);
--bs-info-border-subtle: var(--ep-info-on-subtle);
--bs-warning-border-subtle: var(--ep-warning-on-subtle);
--bs-danger-border-subtle: var(--ep-danger-on-subtle);
--bs-light-border-subtle: var(--borderColor);
--bs-dark-border-subtle: var(--borderColor);
--bs-heading-color: inherit;
--bs-link-color: var(--ep-link-color);
--bs-link-hover-color: var(--ep-link-color-hover);
--bs-link-color-rgb: 159,134,187;
--bs-link-hover-color-rgb: 178,158,201;
--bs-code-color: #e685b5;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: var(--ep-green-subtle);
--bs-form-valid-border-color: var(--ep-green-subtle);
--bs-form-invalid-color: var(--ep-red-subtle);
--bs-form-invalid-border-color: var(--ep-red-subtle);
}
.dxbl-flyout {
--dxbl-flyout-color: var(--textDefault);
--dxbl-flyout-bg: var(--ep-color-surface-alt);
--dxbl-flyout-border-color: var(--borderColor);
--dxbl-flyout-arrow-color: rgba(34, 34, 34, 0.25);
--dxbl-flyout-arrow-base-border-color: var(--ep-color-surface-alt);
}
@media (min-width: 990px) {
:root { --txtSizeXLarge: 1.5rem; --txtSizeXXLarge: 1.875rem; --txtSizeHuge: 2.25rem; --txtSizeGiga: 3rem; }
}
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ep-success); }
.invalid { outline: 1px solid var(--ep-danger); }
.validation-message { color: var(--ep-danger); }
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 3rem; top: 0.5rem; }
/* --------------------*/
/* ---- =SCROLLBARS ------ */
/* --------------------*/
::-webkit-scrollbar { width: var(--scrollbarWidth); height: var(--scrollbarHeight); /*display: none;*/ background: transparent; }
/*:hover::-webkit-scrollbar { display: block; }*/
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5d6; border-radius: 20px; border: 5px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-corner { background-color: transparent; }
.dark-mode ::-webkit-scrollbar-thumb { background-color: #616566; }
/*
@media (hover: hover) {
.sidebar ::-webkit-scrollbar { display: none; }
.sidebar:hover ::-webkit-scrollbar { display: block; }
}*/
/* --------------------*/
/* ---- =FLOWCHARTS ------ */
/* --------------------*/
:root {
--flow-main: hsl(213deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-after: hsl(193deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-before: hsl(273deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-selected: hsl(25deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-edge: hsl(153deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-replace: hsl(75deg, var(--ep-primaryS), var(--ep-primaryL));
--flow-disabled: hsl(0deg, 0%, 84%);
--node-border: #8f99943b;
}
.ws-node { border: 1px solid #a1a5a6; padding: 15px; border-radius: 20px; box-sizing: border-box; }
.ws-node__wrapper { box-shadow: rgb(0 0 0 / 45%) 4.4px 4.4px 1.2px; border-radius: 12px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); display: flex; padding: .5rem; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 16px; color: var(--textDefault); box-sizing: border-box; text-align: center; }
.ws-node__wrapper::before { content: ""; width: calc(100% + 16px); height: calc(100% + 16px); background: transparent; border: 8px solid var(--flow-main); position: absolute; z-index: -1; top: -8px; left: -8px; border-radius: 20px; box-sizing: border-box; }
.ws-node__header { padding: 0; margin-bottom: 0; background-color: transparent; border-bottom: none; text-align: center; color: var(--textStrong); font-weight: 600; }
.ws-node__body { flex: 1 1 auto; padding: 0 1rem; text-align: center; }
.ws-node__buttons { justify-content: center; gap: .5rem; margin-top: .5rem; }
.ws-node-default { background-color: #fff; }
.ws-node.-before .ws-node__wrapper::before { border-color: var(--flow-before); }
.ws-node.-after .ws-node__wrapper::before { border-color: var(--flow-after); }
.ws-node.-replace .ws-node__wrapper::before { border-color: var(--flow-replace); }
.ws-node.-selected .ws-node__wrapper::before { border-color: var(--flow-selected); }
.ws-node.-disabled:not(.-selected) { opacity: .5; }
.ws-node.-disabled .ws-node__wrapper { box-shadow: none; }
.ws-node .diagram-port { width: 15px; height: 15px; border-radius: 50%; background-color: #fff; border: 1px solid #a1a5a6; cursor: pointer; visibility: hidden; }
.ws-node .diagram-port.bottom { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); }
.ws-node .diagram-port.right { position: absolute; top: 50%; right: -24px; transform: translateY(-50%); }
.ws-node .diagram-port.left { position: absolute; top: 50%; left: -24px; transform: translateY(-50%); }
.ws-node .diagram-port.top { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); }
.ws-node .diagram-port.has-links { visibility: visible; }
.ws-node.-edge { padding: 16px; border-radius: 100%; }
.ws-node.-edge .ws-node__wrapper { height: 100px; width: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: rgb(0 0 0 / 45%) 4.4px 4.4px 1.2px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); font-weight: 600; }
.ws-node.-edge .ws-node__wrapper::before { content: ""; width: calc(100% + 16px); height: calc(100% + 16px); background: transparent; border: 8px solid var(--flow-edge); position: absolute; z-index: -1; top: -8px; left: -8px; border-radius: 100%; box-sizing: border-box; }
.ws-node.-edge.-selected .ws-node__wrapper::before { border-color: var(--flow-selected); }
/*diagram component*/
.ws-diagramnode { border: 1px solid #a1a5a6; box-sizing: border-box; max-width:125px; }
.ws-diagramnode__wrapper { display: flex; padding: .5rem; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); color: var(--textDefault); box-sizing: border-box; text-align: center; }
.ws-diagramnode__wrapper::before { content: ""; width: calc(100% + 6px); height: calc(100% + 6px); background: transparent; border: 2px solid var(--node-border); position: absolute; z-index: -1; top: -3px; left: -3px; box-sizing: border-box; }
.ws-diagramnode__wrapper > div:empty { display: none; }
.ws-diagramnode-default { background-color: #fff; }
.ws-diagramnode.-before .ws-diagramnode__wrapper::before { border-color: var(--flow-before); }
.ws-diagramnode.-after .ws-diagramnode__wrapper::before { border-color: var(--flow-after); }
.ws-diagramnode.-replace .ws-diagramnode__wrapper::before { border-color: var(--flow-replace); }
.ws-diagramnode.-selected .ws-diagramnode__wrapper::before { border-color: var(--textDefault); }
.ws-diagramnode.-disabled:not(.-selected) { opacity: .5; }
.ws-diagramnode.-disabled .ws-diagramnode__wrapper { box-shadow: none; }
.ws-diagramnode .diagram-port { width: 15px; height: 15px; border-radius: 50%; background-color: #fff; border: 1px solid #a1a5a6; cursor: pointer; visibility: hidden; }
.ws-diagramnode .diagram-port.bottom { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); }
.ws-diagramnode .diagram-port.right { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); }
.ws-diagramnode .diagram-port.left { position: absolute; top: 50%; left: -20px; transform: translateY(-50%); }
.ws-diagramnode .diagram-port.top { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }
.ws-diagramnode .diagram-port.has-links { visibility: visible; }
.ws-diagramnode.-square { padding: 0px;}
.ws-diagramnode.-square .ws-diagramnode__wrapper { display: flex; align-items: center; justify-content: center;}
.ws-diagramnode.-square .ws-diagramnode__wrapper::before { content: ""; width: calc(100% + 6px); height: calc(100% + 6px); background: transparent; border: 2px solid var(--node-border); position: absolute; z-index: -1; top: -3px; left: -3px; box-sizing: border-box; }
.ws-diagramnode.-square.-selected .ws-diagramnode__wrapper::before { border-color: var(--textDefault); }
.ws-diagramnode.-circle { border-radius: 10%; }
.ws-diagramnode.-circle div{ width: 100px; height:100px; }
.ws-diagramnode.-circle .ws-diagramnode__wrapper { border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.ws-diagramnode.-circle .ws-diagramnode__wrapper::before { content: ""; width: calc(100% + 6px); height: calc(100% + 6px); border: 2px solid var(--node-border); position: absolute; z-index: -1; top: -3px; left: -3px; border-radius: 100%; box-sizing: border-box; }
.ws-diagramnode.-circle.-selected .ws-diagramnode__wrapper::before { border-color: var(--textDefault); }
/*end diagram component*/
.ws-diagramnode.-noborder { border: none; padding: 10px; }
.ws-diagramnode.-noborder .diagram-port.has-links { visibility: hidden; }
.diagram-canvas .group.default {background-color: #cbcbcb; outline: 2px solid var(--node-border);}
.diagram-canvas .group.default.selected {background-color: #cbcbcb; outline: 2px solid var(--textDefault);}
.ws-node.-noborder { border: none; }
.ws-node.-noborder .diagram-port.has-links { visibility: hidden; }
.dark-mode .ws-node .ws-node__wrapper { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(070,070,070,1) 0%, rgba(030,030,030,1) 100%); }
.dark-mode .diagram-canvas .link { stroke: var(--textStrong)!important; fill: var(--textStrong)!important; }
.dark-mode .diagram-canvas .selection-helper { stroke: var(--textStrong) !important; fill: var(--textStrong) !important; }
.dark-mode .diagram-canvas path { stroke: var(--textStrong) !important; fill: var(--textStrong) !important; }
.diagram-canvas .diagram-link path.selection-helper:hover { stroke-opacity: 0 !important;}
/* --------------------*/
/* ---- =HELPER CLASSES ------ */
/* --------------------*/
.color-primary { color: var(--ep-primary) !important }
.color-secondary { color: var(--ep-secondary) !important }
.color-text { color: var(--textDefault) !important }
.color-text-strong { color: var(--textStrong) !important }
.color-warning { color: var(--ep-warning) !important }
.color-info { color: var(--ep-info) !important }
.color-success { color: var(--ep-success) !important }
.color-danger { color: var(--ep-danger) !important }
.color-disabled { color: var(--textDisabled) !important }
.color-white { color: #fff !important }
.color-black { color: #212223 !important }
svg.color-primary { fill: var(--ep-primary) !important }
svg.color-secondary { fill: var(--ep-secondary) !important }
svg.color-text { fill: var(--textDefault) !important }
svg.color-text-strong { fill: var(--textStrong) !important }
svg.color-warning { fill: var(--ep-warning) !important }
svg.color-info { fill: var(--ep-info) !important }
svg.color-success { fill: var(--ep-success) !important }
svg.color-danger { fill: var(--ep-danger) !important }
svg.color-disabled { fill: var(--textDisabled) !important }
svg.color-white { fill: #fff !important }
svg.color-black { fill: #212223 !important }
.bg-primary { background: var(--ep-primary) !important }
.bg-secondary { background: var(--ep-secondary) !important }
.bg-text { background: var(--textDefault) !important }
.bg-warning { background: var(--ep-warning) !important }
.bg-info { background: var(--ep-info) !important }
.bg-success { background: var(--ep-success) !important }
.bg-danger { background: var(--ep-danger) !important }
.bg-disabled { background: var(--textDisabled) !important }
.bg-black { background: #000 !important }
.bg-light-grey { background-color: #e5e5e5 !important }
.bg-medium-grey { background-color: #cccccc !important }
.bg-grey { background-color: #999999 !important }
.bg-dark-grey { background-color: #222222 !important }
.bg-white, .bg-fff { background-color: white !important }
.bg-none, .no-bg { background: none !important; background-image: none !important; background-color: transparent !important }
.p-0 { padding: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pr-0 { padding-right: 0px !important; }
.pb-0 { padding-bottom: 0px !important; }
.pl-0 { padding-left: 0px !important; }
.pv-0 { padding-block: 0 !important; }
.ph-0 { padding-inline: 0 !important; }
.p-05 { padding: .5rem !important }
.pt-05 { padding-top: .5rem !important }
.pr-05 { padding-right: .5rem !important }
.pb-05 { padding-bottom: .5rem !important }
.pl-05 { padding-left: .5rem !important }
.pv-05 { padding-block: .5rem !important }
.ph-05 { padding-inline: .5rem !important }
.p-1 { padding: 1rem !important }
.pt-1 { padding-top: 1rem !important }
.pr-1 { padding-right: 1rem !important }
.pb-1 { padding-bottom: 1rem !important }
.pl-1 { padding-left: 1rem !important }
.pv-1 { padding-block: 1rem !important }
.ph-1 { padding-inline: 1rem !important }
.p-15 { padding: 1.5rem !important }
.pt-15 { padding-top: 1.5rem !important }
.pr-15 { padding-right: 1.5rem !important }
.pb-15 { padding-bottom: 1.5rem !important }
.pl-15 { padding-left: 1.5rem !important }
.pv-15 { padding-block: 1.5rem !important }
.ph-15 { padding-inline: 1.5rem !important }
.p-2 { padding: 2rem !important }
.pt-2 { padding-top: 2rem !important }
.pr-2 { padding-right: 2rem !important }
.pb-2 { padding-bottom: 2rem !important }
.pl-2 { padding-left: 2rem !important }
.pv-2 { padding-block: 2rem !important }
.ph-2 { padding-inline: 2rem !important }
.p-25 { padding: 2.5rem !important }
.pt-25 { padding-top: 2.5rem !important }
.pr-25 { padding-right: 2.5rem !important }
.pb-25 { padding-bottom: 2.5rem !important }
.pl-25 { padding-left: 2.5rem !important }
.pv-25 { padding-block: 2.5rem !important }
.ph-25 { padding-inline: 2.5rem !important }
.p-3 { padding: 3rem !important }
.pt-3 { padding-top: 3rem !important }
.pr-3 { padding-right: 3rem !important }
.pb-3 { padding-bottom: 3rem !important }
.pl-3 { padding-left: 3rem !important }
.pv-3 { padding-block: 3rem !important }
.ph-3 { padding-inline: 3rem !important }
.p-35 { padding: 3.5rem !important }
.pt-35 { padding-top: 3.5rem !important }
.pr-35 { padding-right: 3.5rem !important }
.pb-35 { padding-bottom: 3.5rem !important }
.pl-35 { padding-left: 3.5rem !important }
.pv-35 { padding-block: 3.5rem !important }
.ph-35 { padding-inline: 3.5rem !important }
.p-4 { padding: 4rem !important }
.pt-4 { padding-top: 4rem !important }
.pr-4 { padding-right: 4rem !important }
.pb-4 { padding-bottom: 4rem !important }
.pl-4 { padding-left: 4rem !important }
.pv-4 { padding-block: 4rem !important }
.ph-4 { padding-inline: 0 4rem !important }
.p-45 { padding: 4.5rem !important }
.pt-45 { padding-top: 4.5rem !important }
.pr-45 { padding-right: 4.5rem !important }
.pb-45 { padding-bottom: 4.5rem !important }
.pl-45 { padding-left: 4.5rem !important }
.pv-45 { padding-block: 4.5rem !important }
.ph-45 { padding-inline: 4.5rem !important }
.p-5 { padding: 5rem !important }
.pt-5 { padding-top: 5rem !important }
.pr-5 { padding-right: 5rem !important }
.pb-5 { padding-bottom: 5rem !important }
.pl-5 { padding-left: 5rem !important }
.pv-5 { padding-block: 5rem !important }
.ph-5 { padding-inline: 5rem !important }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mv-0 { margin-block: 0 !important; }
.mh-0 { margin-inline: 0 !important; }
.m-05 { margin: .5rem !important }
.mt-05 { margin-top: .5rem !important }
.mr-05 { margin-right: .5rem !important }
.mb-05 { margin-bottom: .5rem !important }
.ml-05 { margin-left: .5rem !important }
.mv-05 { margin-block: .5rem !important }
.mh-05 { margin-inline: .5rem !important }
.m-1 { margin: 1rem !important }
.mt-1 { margin-top: 1rem !important }
.mr-1 { margin-right: 1rem !important }
.mb-1 { margin-bottom: 1rem !important }
.ml-1 { margin-left: 1rem !important }
.mv-1 { margin-block: 1rem !important }
.mh-1 { margin-inline: 1rem !important }
.m-15 { margin: 1.5rem !important }
.mt-15 { margin-top: 1.5rem !important }
.mr-15 { margin-right: 1.5rem !important }
.mb-15 { margin-bottom: 1.5rem !important }
.ml-15 { margin-left: 1.5rem !important }
.mv-15 { margin-block: 1.5rem !important }
.mh-15 { margin-inline: 1.5rem !important }
.m-2 { margin: 2rem !important }
.mt-2 { margin-top: 2rem !important }
.mr-2 { margin-right: 2rem !important }
.mb-2 { margin-bottom: 2rem !important }
.ml-2 { margin-left: 2rem !important }
.mv-2 { margin-block: 2rem !important }
.mh-2 { margin-inline: 2rem !important }
.m-25 { margin: 2.5rem !important }
.mt-25 { margin-top: 2.5rem !important }
.mr-25 { margin-right: 2.5rem !important }
.mb-25 { margin-bottom: 2.5rem !important }
.ml-25 { margin-left: 2.5rem !important }
.mv-25 { margin-block: 2.5rem !important }
.mh-25 { margin-inline: 2.5rem !important }
.m-3 { margin: 3rem !important }
.mt-3 { margin-top: 3rem !important }
.mr-3 { margin-right: 3rem !important }
.mb-3 { margin-bottom: 3rem !important }
.ml-3 { margin-left: 3rem !important }
.mv-3 { margin-block: 3rem !important }
.mh-3 { margin-inline: 3rem !important }
.m-35 { margin: 3.5rem !important }
.mt-35 { margin-top: 3.5rem !important }
.mr-35 { margin-right: 3.5rem !important }
.mb-35 { margin-bottom: 3.5rem !important }
.ml-35 { margin-left: 3.5rem !important }
.mv-35 { margin-block: 3.5rem !important }
.mh-35 { margin-inline: 3.5rem !important }
.m-4 { margin: 4rem !important }
.mt-4 { margin-top: 4rem !important }
.mr-4 { margin-right: 4rem !important }
.mb-4 { margin-bottom: 4rem !important }
.ml-4 { margin-left: 4rem !important }
.mv-4 { margin-block: 4rem !important }
.mh-4 { margin-inline: 4rem !important }
.m-45 { margin: 4.5rem !important }
.mt-45 { margin-top: 4.5rem !important }
.mr-45 { margin-right: 4.5rem !important }
.mb-45 { margin-bottom: 4.5rem !important }
.ml-45 { margin-left: 4.5rem !important }
.mv-45 { margin-block: 4.5rem !important }
.mh-45 { margin-inline: 4.5rem !important }
.m-5 { margin: 5rem !important }
.mt-5 { margin-top: 5rem !important }
.mr-5 { margin-right: 5rem !important }
.mb-5 { margin-bottom: 5rem !important }
.ml-5 { margin-left: 5rem !important }
.mv-5 { margin-block: 5rem !important }
.mh-5 { margin-inline: 5rem !important }
.m-auto { margin: auto !important }
.mt-auto { margin-top: auto !important }
.mr-auto { margin-right: auto !important }
.mb-auto { margin-bottom: auto !important }
.ml-auto { margin-left: auto !important }
.mh-auto { margin-inline: auto !important }
.mv-auto { margin-block: auto !important }
.lh-1 { line-height: 1 !important }
.lh-13 { line-height: 1.3 !important }
.lh-15 { line-height: 1.5 !important }
.bold, .strong { font-weight: bold !important }
.no-bold { font-weight: normal !important }
.italic, .em { font-style: italic !important }
.strike { text-decoration: line-through !important }
.normal { font-weight: normal !important; font-style: normal !important }
.uppercase { text-transform: uppercase !important }
.text-left { text-align: left !important }
.text-center { text-align: center !important }
.text-right { text-align: right !important }
.fw100 { font-weight: 100 !important }
.fw200 { font-weight: 200 !important }
.fw300 { font-weight: 300 !important }
.fw400 { font-weight: 400 !important }
.fw500 { font-weight: 500 !important }
.fw600 { font-weight: 600 !important }
.fw700 { font-weight: 700 !important }
.fw800 { font-weight: 800 !important }
.fw900 { font-weight: 900 !important }
.fs9 { font-size: 9px !important }
.fs10 { font-size: 10px !important }
.fs11 { font-size: 11px !important }
.fs12 { font-size: 12px !important }
.fs13 { font-size: 13px !important }
.fs14 { font-size: 14px !important }
.fs15 { font-size: 15px !important }
.fs16 { font-size: 16px !important }
.fs17 { font-size: 17px !important }
.fs18 { font-size: 18px !important }
.fs19 { font-size: 19px !important }
.fs20 { font-size: 20px !important }
.fs30 { font-size: 30px !important }
.fs40 { font-size: 40px !important }
.fs50 { font-size: 50px !important }
.fs60 { font-size: 60px !important }
.fsGiga { font-size: var(--txtSizeGiga) !important }
.fsHuge { font-size: var(--txtSizeHuge) !important }
.fsXXLarge { font-size: var(--txtSizeXXLarge) !important }
.fsXLarge { font-size: var(--txtSizeXLarge) !important }
.fsLarge { font-size: var(--txtSizeLarge) !important }
.fsTiny { font-size: var(--txtSizeTiny) !important }
.fsSmall { font-size: var(--txtSizeSmall) !important }
.fsNormal { font-size: var(--txtSizeNormal) !important }
.size-small { font-size: 75% !important }
.size-normal { font-size: 100% !important }
.size-medium { font-size: 125% !important }
.size-large { font-size: 150% !important }
.size-huge { font-size: 200% !important }
.no-wrap { white-space: nowrap !important }
.text-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.no-ul, .no-ul:hover, .no-ul a, .no-ul a:hover { text-decoration: none !important }
.color-inherit { color: inherit !important }
.clear { clear: both !important }
.clear:after { display: table !important; content: " " !important; clear: both !important }
.f-left { float: left !important }
.f-right { float: right !important }
.f-none { float: none !important }
.d-block { display: block !important }
.d-inline { display: inline !important }
.d-inline-block { display: inline-block !important; *display: inline !important; zoom: 1 !important }
.flex, .d-flex { display: flex !important; }
.inline-flex, d-inline-flex { display: inline-flex !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.-fg1 { flex-grow: 1; }
.-fg2 { flex-grow: 2; }
.-fg3 { flex-grow: 3; }
.-fg4 { flex-grow: 4; }
.-fg5 { flex-grow: 5; }
.-fg6 { flex-grow: 6; }
.-fg7 { flex-grow: 7; }
.-fg8 { flex-grow: 8; }
.-fg9 { flex-grow: 9; }
.d-none, .hide, .hidden { display: none !important }
.rel, .relative { position: relative !important }
.abs, .absolute { position: absolute !important }
.fixed { position: fixed !important }
.static { position: static !important }
.t-0 { top: 0 !important }
.b-0 { bottom: 0 !important }
.l-0 { left: 0 !important }
.r-0 { right: 0 !important }
.tb-0 { top: 0 !important; bottom: 0 !important }
.lr-0 { left: 0 !important; right: 0 !important }
.no-shadow { box-shadow: none !important }
.no-border-radius { border-radius: 0 !important }
.no-border { border-width: 0 !important }
.border-transparent { border-color: transparent !important }
.pointer,
.clickable { cursor: pointer !important}
.pointer-events-none { pointer-events: none !important }
.fullwidth { width: 100% !important }
.nolist { list-style: none !important }
.text-shadow { text-shadow: 1px 1px 1px rgba(0,0,0,0.4) !important }
.radius { border-radius: var(--borderRadius) !important; }
.radius3 { border-radius: 3px !important }
.radius5 { border-radius: 5px !important }
.radius10 { border-radius: 10px !important }
.height100 { height: 100% !important}
/* --------------------*/
/* ---- =STRUCTURE ------ */
/* --------------------*/
.flex-container { column-gap: var(--flex-column-gap, --flex-column-gap); gap: initial; }
div[class*="flex-item-"] { min-width: 0; }
.flex-container:not(.direction-column) > .ep-layout-item > .ep-control,
.flex-container:not(.direction-column) > .ep-layout-item > .ep-tab,
.flex-container:not(.direction-column).ep-row > .ep-tab,
.flex-container:not(.direction-column).ep-row > .ep-fieldset { margin-right: var(--generalMargin); }
.flex-container:not(.direction-column) > .ep-layout-item:last-child > .ep-control,
.flex-container:not(.direction-column) > .ep-layout-item:last-child > .ep-tab,
.flex-container:not(.direction-column).ep-row > .ep-tab:last-child,
.flex-container:not(.direction-column).ep-row > .ep-fieldset:last-child { margin-right: 0; }
.direction-column > div[class*="flex-item-"],
.direction-column[class*="flex-item-"] { /*min-height: 0;*/ height: 100%; min-width: 0; }
.direction-column > div[class*="flex-item-"]:last-child,
.direction-column[class*="flex-item-"]:last-child { margin: 0; }
.flex-container[class*="flex-item-"]:not(.direction-column),
.flex-container[class*="flex-item-"]:not(.direction-column) > div[class*="flex-item-"] { min-height: 0; height: 100%; width: initial; }
/*.flex-item-1 { min-width: 0;*/ /*min-height: 0; height: 100%;*/ /*}
.direction-column > .flex-item-1,
.direction-column.flex-item-1 {*/ /*min-height: 0;*/ /*height: 100%; }
.flex-container.flex-item-1:not(.direction-column),
.flex-container.flex-item-1:not(.direction-column) > .flex-item-1 { min-height: 0; height: 100%; }*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { font-size: var(--mainFont); font-family: var(--fontFamily); }
body { margin: 0; padding: 0; color: var(--textDefault); min-width: 990px; background: var(--bodyBG); background-size: cover; }
.layout-wrapper { background: var(--mainBG); }
.theme-dark body { background: #000; }
.layout-main { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.layout-content { padding: var(--topRowHeight) 0 0 0; flex: 1 1 auto; background: var(--mainBG); }
.density-compact .layout-content { padding-top: var(--topRowHeight); }
.menutype-horizontal .layout-content,
.density-compact.menutype-horizontal .layout-content { padding-top: calc(var(--topRowHeight) + var(--menuHeight) ); }
.-no-menu { --menuHeight: 0; }
.menutype-horizontal .-no-menu .layout-content { padding-top: calc(var(--topRowHeight)); }
.content { overflow: auto; height: calc(100vh - var(--topRowHeight) - 2*var(--contentMargin)); margin-top: var(--contentMargin); margin-bottom: var(--contentMargin); margin-left: var(--contentMargin); margin-right: var(--contentMargin); }
.content.--with-toolbar { height: calc(100vh - var(--topRowHeight) - var(--toolbarHeight) - 2*var(--contentMargin)); margin-top: calc(var(--toolbarHeight) + var(--contentMargin)); margin-bottom: var(--contentMargin); margin-left: var(--contentMargin); margin-right: var(--contentMargin); display: flex; flex-direction: column; min-height: 630px; }
.sidebar-hidden .content { overflow: auto; height: calc(100vh - var(--topRowHeight)); margin: unset; }
.menutype-horizontal .content { height: calc(100vh - var(--topRowHeight) - var(--menuHeight) - 2*var(--contentMargin)); }
.menutype-horizontal .content.--with-toolbar { height: calc(100vh - var(--topRowHeight) - var(--menuHeight) - var(--toolbarHeight) - 2*var(--contentMargin)); }
.content:has(.dx-dashboard-control) { margin: 0; height: calc(100vh - var(--topRowHeight)); }
.menutype-horizontal .content:has(.dx-dashboard-control) { margin: 0; height: calc(100vh - var(--topRowHeight) - var(--menuHeight)); }
.sidebar-hidden.-no-menu .content { height: calc(100vh - var(--topRowHeight) - var(--toolbarHeight) - 2*var(--contentMargin)); margin-top: calc(var(--toolbarHeight) + var(--contentMargin)); margin-bottom: var(--contentMargin); margin-left: var(--contentMargin); margin-right: var(--contentMargin); display: flex; flex-direction: column; }
.main-panel { margin: var(--generalMargin); background: var(--mainPanelBG); padding: var(--generalPadding); /*box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);*/ /*border-radius: var(--borderRadius);*/ }
.main-panel { padding: 0; background: none; box-shadow: none; margin: 0; }
.main-panel.-browser { flex-direction: column; display: flex; overflow-y: auto; height: 100%; }
.main-panel.-form { flex-direction: column; display: flex; overflow-y: auto; height: 100%; width: 100%; }
.main-panel.-report { flex-direction: column; display: block; overflow: auto; height: 100%; width: 100%; background: var(--panelBG); padding: 2rem; box-sizing: border-box; align-items: center; text-align: center; }
.main-panel.-array { display: flex; height: 100%; }
.main-panel .k-splitter { min-height: 0; height: 100%; }
.ep-browser-wrapper { height: 100%; }
/*.density-compact .main-panel.-form,
.density-compact .main-panel.-browser,
.density-compact .main-panel.-array { height: calc(100% - 1rem); }*/
.grid-container { height: 100%; }
.sidebar { width: var(--sidebarWidth); background-color: var(--sidebarBG); z-index: 10002; left: calc(var(--sidebarOffset)*(-1)); position: fixed; bottom: 0; top: var(--topRowHeight); right: auto; overflow: hidden; transition: transform 400ms cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; transform: translate3d(0px, 0px, 0px); height: calc(100% - var(--topRowHeight)); }
.sidebar:hover { transform: translate(var(--sidebarOffset), 0px); }
.themestyle-minimal:not(.dark-mode) .sidebar { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px inset; }
.toggle-sidebar { display: none; line-height: 0; flex-grow: 0; flex-shrink: 0; }
.toggle-sidebar svg { fill: #333; width: 20px; height: 20px; cursor: pointer; }
.hamburger { display: inline-block; overflow: visible; margin: 0; padding: 0; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; background-color: transparent; opacity: .5; line-height: 0; }
.hamburger:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.hamburger-box { position: relative; display: inline-block; width: 20px; height: 20px; }
.hamburger-inner { display: block; margin-top: -2px; top: 2px; transition-timing-function: cubic-bezier(.68,-.55,.265,1.55); transition-duration: .275s; }
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before { position: absolute; width: 20px; height: 2px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: var(--ep-hamburger-color); }
.hamburger-inner:before { display: block; content: ""; top: 8px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; }
.hamburger-inner:after { display: block; content: ""; top: 16px; transition: transform .275s cubic-bezier(.68,-.55,.265,1.55); }
.sidebar-open .hamburger .hamburger-inner,
.sidebar-open .hamburger .hamburger-inner:after,
.sidebar-open .hamburger .hamburger-inner:before { background-color: var(--ep-hamburger-color); }
.sidebar-open .hamburger-inner { transform: translate3d(0,10px,0) rotate( 45deg ); }
.sidebar-open .hamburger-inner:before { transform: rotate( -45deg ) translate3d(-5.71429px,-6px,0); opacity: 0; }
.sidebar-open .hamburger-inner:after { transform: translate3d(0,-16px,0) rotate( -90deg ); }
.menutype-horizontal .main-menu { z-index: 10000; border-bottom: 1px solid var(--borderColor); }
.menutype-horizontal .main-menu .k-menu-horizontal { position: fixed; top: var(--topRowHeight); flex-wrap: nowrap; width: 100%; background-color: var(--sidebarBG); padding: 0 var(--generalPadding); }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu-item { background: none; color: var(--sidebarMenuText); font-weight: 500; border-radius: 0; border-bottom: 3px solid var(--sidebarBG); transition: .1s all ease-in; }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu-item:hover { border-bottom: 3px solid var(--ep-primary); background-color: red; color: var(--shade98); }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu-link { padding: 0 var(--generalPadding); color: inherit; height: calc(3.5rem - 3px); box-sizing: border-box; }
.menutype-horizontal .main-menu .m-menu__icon { margin-right: .5rem; }
.menutype-horizontal .main-menu .m-menu__icon svg { fill: var(--sidebarMenuText); }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu-item:hover .m-menu__icon svg { fill: var(--shade98); }
.k-menu:not(.k-context-menu) > .k-item > .k-active { color: var(--buttonColor); }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item > .k-active,
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item:hover,
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item.k-hover { color: var(--buttonColor); }
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item > .k-active,
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item:hover,
.menutype-horizontal .main-menu .k-menu-horizontal .k-menu:not(.k-context-menu) > .k-item.k-hover { color: #fff; }
.themestyle-minimal.menutype-horizontal .main-menu .k-menu-horizontal .k-menu-item:hover { border-bottom: 3px solid var(--ep-primary); background-color: rgb(0 0 0 / 0.05); color: var(--sidebarMenuText); }
.themestyle-minimal.menutype-horizontal .main-menu { border-bottom: 1px solid var(--borderColor); }
.menutype-horizontal .main-menu { border-bottom: 1px solid var(--sidebarBG); }
.ws-notification { z-index: 100000000; }
/*.k-popup[data-id="61d1e34c-5aad-40e9-8947-d81b8759730b"] .k-menu-group .k-menu-link { padding: .3rem 0.5rem !important; padding-right: calc( 3rem + 16px); }*/
/* --------------------*/
/* ---- =LOGO ------ */
/* --------------------*/
.top-row .logo-container { width: calc(var(--sidebarWidth) - 1rem); position: relative; display: flex; align-items: center; gap: 1rem; }
.top-row .main-logo { height: 35px; aspect-ratio: 552/132; fill: var(--logoColor); }
.top-row .icon-logo { height: 35px; aspect-ratio: 200/200; fill: var(--logoColor); display: none; }
/* --------------------*/
/* ---- =REPORTS ------ */
/* --------------------*/
.ep-toolbar-slash { display: inline-flex; height: var(--mdHeight); align-items: center; opacity: .5; }
.report-current-page .k-input,
.report-total-pages .k-input { width: 50px; }
.report-current-page .k-input-inner,
.report-total-pages .k-input-inner { padding: 3px; }
div#reportViewerContainer { display: inline-block; }
.main-panel.-report div[class*="-body"] { margin-top: 0; }
.main-panel.-report div[class*="-report"] { display: block; }
/* Rules for the buttons to appear inside of the report */
/* .main-panel.-report div[class*="-body"] { overflow: auto; padding-top: 2rem; min-height: 0; flex-shrink: 1; flex-grow: 0; box-sizing: border-box; }
.main-panel.-report .fr-toolbar { position: absolute; top: 0; width: 100%!important; background: var(--panelHeaderBG); border-bottom: 1px solid var(--borderColor); }*/
/*.user-menu { top: 4rem; position: absolute; z-index: 10001; width: 200px; right: 1rem; border-radius: var(--borderRadius); background: var(--mainBG); display: none; }*/
.report-text-filter-list { list-style: none; overflow: auto; margin-top: 5px; margin-bottom: 0px; padding-left: 30px; padding-inline-start: 5px; }
.report-text-filter-list a { color: unset; text-decoration: none; cursor: pointer; width: 100%; display: inline-block; }
.report-text-filter-list a:hover { background-color: var(--gridCellHoverBG); }
.browser-layouts-dropdown, .browser-layouts-filters { min-width: 120px }
@media (min-width: 1200px) {
.report-toolbar-dropdown { max-width: 400px; min-width: 200px }
}
@media (max-width: 1300px) {
.browser-layouts-dropdown,
.browser-layouts-filters { min-width: 50px }
}
@media (max-width: 767px) {
.browser-layouts-dropdown .ep-label,
.browser-layouts-filters .ep-label { display: none!important; }
.browser-layouts-filters .k-input-inner,
.browser-layouts-dropdown .k-input-inner { padding-inline: 0; }
.toolbar { overflow: auto; }
}
.lds-progress { height: 20px; width: 150px; }
/* --------------------*/
/* ---- =MAINMENU ------ */
/* --------------------*/
.main-menu { position: fixed; top: var(--topRowHeight); flex-wrap: nowrap; width: 100%; background-color: var(--horizontalMenuBG); padding: 0 var(--generalPadding); box-sizing: border-box; z-index: 10001; height: var(--menuHeight); }
/* Level 0*/
.menu { padding: 0; margin: 0; }
.menu li { display: inline-block; position: relative; }
.menu li a { font-weight: 600; text-decoration: none; padding: 0 var(--mdPadding); height: var(--menuHeight); line-height: var(--menuHeight); display: block; color: hsl(var(--shadeH), var(--shadeS), 72%); transition: all 0.1s ease-in-out 0s; box-sizing: border-box; }
.menu > li > a { border-bottom: 2px solid var(--sidebarBG); }
.menu > li:hover > a { background-color: rgb(0 0 0 / 0.05); color: hsl(var(--shadeH), var(--shadeS), 99%); }
.menu > li:hover > a svg { fill: var(--ep-primary); }
.menu > li:hover > a i,
.menu > li:hover > a .k-icon { color: var(--ep-primary); }
.menu > li > a.-is-active,
.menu > li.has-submenu:has(.-is-active) > a { border-bottom: 2px solid var(--ep-primary); background-color: hsl(0, 0%, 100%, 0.1); color: hsl(var(--shadeH), var(--shadeS), 99%); }
/* Level 1+ */
.menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: var(--menuWidth); position: absolute; left: 0px; background-color: var(--sidebarBG); z-index: 99; transform: translate(0,20px); transition: all 0.1s ease-out; outline: 1px solid hsl(var(--shadeH), var(--shadeS), 32%); box-sizing: border-box; }
.menu ul.submenu li { display: block; float: none; background: none; margin: 0; padding: 0; }
.menu ul.submenu li a { font-weight: 600; text-decoration: none; display: block; color: hsl(var(--shadeH), var(--shadeS), 72%); background-color: var(--sidebarBG); min-height: 2rem; line-height: 1.2; display: flex; align-items: center; height: auto; padding-block: .5rem; box-sizing: border-box; border-bottom: 1px solid hsl(var(--shadeH), var(--shadeS), 30%); }
.menu ul.submenu li:last-child > a { border-bottom: none; }
/* .menu ul.submenu li a:hover,
.menu ul.submenu li:hover > a,*/
.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.05); color: hsl(var(--ep-primaryH), var(--ep-primaryS), 60%); }
.menu ul.submenu.reversed li a { padding-left: 2rem; }
.menu li:hover > ul,
.sub-menu:hover { visibility: visible; opacity: 1; transform: translate(0,0); }
.menu ul ul { left: calc(var(--menuWidth) + 1px); top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; }
.menu .submenu.reversed { left: calc((var(--menuWidth) + 1px)*(-1)); }
.menu .submenu.reversed .submenu { left: calc((var(--menuWidth) + 1px)*(-1)); }
.menu li > ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); }
.menu > li.has-submenu > a { position: relative; padding-right: 2rem; }
.menu li.has-submenu > a:after { content: ""; border: 1px solid hsl(var(--shadeH), var(--shadeS), 72%); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg) translateY(-100%); position: absolute; right: 1rem; top: 52%; }
.submenu li.has-submenu > a:after { right: 0.2rem; }
.menu li.has-submenu:hover > a:after { border-color: hsl(var(--shadeH), var(--shadeS), 99%); }
.menu > li#more-button.has-submenu > a:after { transform: initial; top: -0.2rem; content: "..."; border: none; right: 0.5rem; }
.menu > li.has-submenu > a:after { transform: rotate( 45deg) translateY(-100%); top: 48%; }
.reversed li.has-submenu > a:after { content: ""; border: 1px solid hsl(var(--shadeH), var(--shadeS), 72%); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate( 135deg) translateY(-100%); position: absolute; right: initial; top: 20%; left: 0.5rem; }
.menu li > a > svg { width: 1rem; height: 1rem; fill: var(--sidebarMenuText); margin-right: .5rem; vertical-align: middle; transition: all 0.2s ease-in 0s; }
.menu li a i { width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: middle; }
.menu li > a > .k-icon { width: 1rem; height: 1rem; fill: var(--sidebarMenuText); margin-right: .5rem; vertical-align: middle; }
.menu li:hover > a > svg { fill: var(--textLight); }
.arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
.arrow.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.arrow.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.arrow.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.arrow.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.menu ul.submenu li a:hover,
.menu ul.submenu li:hover > a { background-color: transparent; color: hsl(var(--shadeH), var(--shadeS), 99%); }
.menu li:hover > a svg { fill: var(--ep-primary); }
.menu li:hover > a i,
.menu li:hover > a .k-icon { color: var(--ep-primary); }
/*Theme Minimal Menu*/
.themestyle-minimal:not(.dark-mode) .menu ul { outline: 1px solid hsl(var(--shadeH), var(--shadeS), 80%); }
.themestyle-minimal:not(.dark-mode) .menu li a { color: hsl(var(--shadeH), var(--shadeS), 65%); border-bottom: 1px solid hsl(var(--shadeH), var(--shadeS), 80%); }
.themestyle-minimal:not(.dark-mode) .menu > li:hover > a { background-color: hsl(var(--shadeH), var(--shadeS), 95%); color: hsl(var(--shadeH), var(--shadeS), 35%); }
.themestyle-minimal:not(.dark-mode) .menu > li:hover > a svg { fill: hsl(var(--shadeH), var(--shadeS), 35%); }
.themestyle-minimal:not(.dark-mode) .menu li.has-submenu > a:after { border-color: hsl(var(--shadeH), var(--shadeS), 65%); }
.themestyle-minimal:not(.dark-mode) .menu.lvl-0 li.has-submenu:hover > a:after { border-color: hsl(var(--shadeH), var(--shadeS), 55%); }
.themestyle-minimal:not(.dark-mode) .menu .lvl-1 li.has-submenu:hover > a:after { border-color: hsl(var(--shadeH), var(--shadeS), 55%); }
.themestyle-minimal:not(.dark-mode) .menu > li > a.-is-active,
.themestyle-minimal:not(.dark-mode) .menu > li.has-submenu:has(.-is-active) > a { border-bottom: 2px solid var(--ep-primary); background-color: hsl(var(--shadeH), var(--shadeS), 95%); color: var(--ep-primary); }
.themestyle-minimal:not(.dark-mode) .menu > li > a.-is-active svg,
.themestyle-minimal:not(.dark-mode) .menu > li.has-submenu:has(.-is-active) > a svg { fill: var(--shade98); }
.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: hsl(var(--shadeH), var(--shadeS), 100%, 0.05); color: hsl(var(--ep-primaryH), var(--ep-primaryS), 60%); }
.themestyle-minimal:not(.dark-mode) .menu ul.submenu { box-shadow: 0 2px 12px 0 rgb(0 0 0 / 16%); }
.themestyle-minimal:not(.dark-mode) .menu ul.submenu li a { color: hsl(var(--shadeH), var(--shadeS), 52%); }
.themestyle-minimal:not(.dark-mode) .menu ul.submenu li a:hover,
.themestyle-minimal:not(.dark-mode) .menu ul.submenu li:hover > a { color: var(--ep-primary); background-color: hsl(var(--shadeH), var(--shadeS), 95%); }
/*Theme Minimal Menu Dark Mode*/
.dark-mode.themestyle-minimal .menu.lvl-0 li.has-submenu > a:after { border-color: var(--textStrong); }
.dark-mode.themestyle-minimal .menu.lvl-0 li.has-submenu:hover > a:after { border-color: var(--textStrong); }
.dark-mode.themestyle-minimal .menu > li > a.-is-active,
.dark-mode.themestyle-minimal .menu > li.has-submenu:has(.-is-active) > a { border-bottom: 2px solid var(--ep-primary); background-color: var(--ep-primary); color: var(--textStrong); }
.dark-mode.themestyle-minimal .menu > li:hover > a.-is-active > i,
.dark-mode.themestyle-minimal .menu > li:hover > a.-is-active > .k-icon,
.dark-mode.themestyle-minimal .menu > li.has-submenu:has(.-is-active) > a > i,
.dark-mode.themestyle-minimal .menu > li.has-submenu:has(.-is-active) > a > .k-icon { color: var(--textStrong); }
/* --------------------*/
/* ---- =TOP-ROW ------ */
/* --------------------*/
.top-row { background-color: var(--topRow); background-image: linear-gradient(310deg,var(--topRowGradRight),var(--topRowGradLeft)); border-bottom: 1px solid rgba(0, 0, 0, 0.07); justify-content: flex-end; height: var(--topRowHeight); display: flex; align-items: center; justify-content: center; padding: 0 1rem; position: fixed; top: 0; width: 100%; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 16%); z-index: 10001; box-sizing: border-box; }
.themestyle-minimal .top-row { box-shadow: none; }
.bg-gradient-dark { }
.top-row__left { display: flex; justify-content: flex-start; margin-right: auto; align-items: center; }
.brand { cursor: pointer; }
.top-row__right { display: flex; justify-content: flex-end; margin-left: auto; align-items: center; min-width: 0; }
.app-drawer-btn { background: var(--topRowGradLeft); color: var(--shade100); width: 30px; height: var(--topRowHeight); display: flex; justify-content: center; align-items: center; margin-right: 1rem; margin-left: -1rem; cursor: pointer; transition: background-color .1s ease-in; }
.app-drawer-btn.icon-link { margin-left: -.5rem; margin-right: .5rem; font-size: .8rem; }
.app-drawer-btn i { opacity: .8; transition: opacity .1s ease-in; }
.app-drawer-btn:hover { background: var(--topRowGradRight); }
.app-drawer-btn:hover i { opacity: 1; }
.app-drawer-container { animation: fade-in-up .4s cubic-bezier(0.39, 0.58, 0.57, 1) 1; }
.dark-mode .k-animation-container.app-drawer-container .k-popup { background-color: var(--panelHeaderBG); }
.app-drawer { display: flex; flex-direction: column; height: 100%; }
.app-drawer__body { flex: 1; padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); grid-gap: 0 8px; max-height: 350px; overflow: auto; }
.app-drawer__footer { display: flex; justify-content: flex-end; padding: 0 1rem 1rem 1rem; }
.single-app { text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: 5px; padding: 5px; transition: .1s ease-in background; border-radius: var(--borderRadius) }
.single-app:hover { background: var(--shade96); }
.dark-mode .single-app:hover { background: var(--shade80); outline: 1px solid var(--bs-primary); }
.single-app__name { font-size: .8rem; color: var(--textDefault); line-height: 1.2; }
.single-app:hover .single-app__name { color: var(--textStrong); }
.single-app__icon { width: 40px; height: 40px; border-radius: 10px; }
.pin { width: 1.8rem; height: 1.8rem; display: flex; line-height: 0; border-radius: 50px; justify-content: center; align-items: center; cursor: pointer; transition: .1s background ease-in; flex-grow: 0; flex-shrink: 0; margin-left: auto; margin-right: 10px; }
.pin svg { fill: hsla(0deg, 100%, 100%, .5); width: 18px; height: 18px; }
.themestyle-minimal .pin svg { fill: var(--ep-primary); opacity: .5; }
.themestyle-minimal .pin:hover svg { fill: var(--ep-primary); opacity: 1; }
.pin:hover { background: hsla(0deg, 100%, 100%, 0.12); }
.pin:hover svg { fill: hsla(0deg, 100%, 100%, 1); opacity: 1; }
.dot { opacity: 0; }
.sidebar-pinned .dot { opacity: 1; }
/*PINNED*/
.sidebar-pinned .pin { opacity: 1; }
.sidebar-pinned .sidebar__header { flex-direction: row; padding: 0 0 0 1rem ; }
/*HOVER*/
.sidebar:hover .sidebar__header { flex-direction: row; padding: 0 0 0 1rem }
.icon-link { cursor: pointer; border-radius: var(--borderRadius); margin: 0 0 0 .5rem; width: 2.5rem; height: 2.5rem; padding: .2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: .1s background ease-in; font-size: 1rem; color: rgba(255, 255, 255, .75); text-decoration: none; }
.icon-link:hover,
.icon-link.-active { background: rgba(255,255,255, .2); color: #fff; }
.themestyle-minimal .icon-link { color: var(--ep-primary); }
.themestyle-minimal .icon-link:hover,
.themestyle-minimal .icon-link.-active { background: var(--shade94); }
.themestyle-minimal.dark-mode .icon-link:hover,
.themestyle-minimal.dark-mode .icon-link.-active { background-color: var(--buttonHoverBG); color: var(--ep-primary); }
.icon-link svg { width: 100%; height: 100%; fill: var(--sidebarMenuText); transition: fill 0.1s linear 0s; margin: .1rem; }
.icon-link > i { font-size: 1.8em; }
.icon-link.-unread > i { animation: wobble-hor-top 5s infinite both; }
@keyframes wobble-hor-top {
0%, 20% {transform: translateX(0%); transform-origin: 50% 50%; }
3% { transform: translateX(-3px) rotate(6deg); }
6% { transform: translateX(2px) rotate(-6deg); }
9% { transform: translateX(-2px) rotate(3.6deg); }
12% { transform: translateX(1px) rotate(-2.4deg); }
15% { transform: translateX(-1px) rotate(1.2deg); }
}
.icon-link.-notifications { position: relative; }
.icon-link.-notifications .k-badge-edge.k-top-end { transform: translate(30%, -20%); }
.themestyle-minimal .icon-link.-notifications .k-badge { border-radius: 0; }
.themestyle-modern .icon-link.-notifications .k-badge { border-radius: 5px; }
.themestyle-minimal .icon-link svg { fill: var(--shade98); }
.themestyle-minimal.dark-mode .icon-link svg { fill: var(--sidebarMenuText); }
.themestyle-minimal.dark-mode .icon-link:hover svg,
.themestyle-minimal.dark-mode .icon-link.-active svg { fill: var(--ep-primary); }
.icon-link:hover svg,
.icon-link.-active svg { fill: #fff; }
/*.icon-link.-user { border: 1px solid var(--sidebarMenuText); }*/
.top-row-btn { border-radius: 4px; padding: 0.5rem 1rem; background-color: #282f48; color: #fff; cursor: pointer; outline: none !important; text-decoration: none; transition: all 0.1s linear 0s; font-size: 1rem; line-height: 1.5; opacity: .8; }
.top-row-btn:hover { opacity: 1; }
.ep-workspace { position: relative; min-width: 0; }
.ep-workspace-link { cursor: pointer; border-radius: var(--borderRadius); padding: .2rem .5rem; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; transition: .1s background ease-in; min-width: 0; }
.ep-workspace-link:hover,
.-visible .ep-workspace__link { background: rgba(255,255,255, .2); color: #fff; }
.dark-mode .ep-workspace-link:hover { background: rgba(255,255,255, .2); }
.themestyle-minimal .ep-workspace-link:hover { background: rgba(255, 255, 255, 0.12); }
.themestyle-minimal.dark-mode .icon-link:hover,
.themestyle-minimal.dark-mode .icon-link.-active { background: var(--buttonHoverBG); }
.ep-workspace__icon { font-size: 1.8rem; }
.ep-workspace-link i { color: rgb(255 255 255 / 50%); transition: color 0.1s linear 0s; margin-right: .5rem; }
.ep-workspace-link:hover i { color: #fff; }
.ep-workspace-link svg { fill: rgb(255 255 255 / 50%); transition: fill 0.1s linear 0s; margin-right: .5rem; width: 2.5rem; height: 2.5rem; }
.ep-workspace-link:hover svg { fill: #fff; }
.themestyle-minimal:not(.dark-mode) .ep-workspace-link i { color: var(--textLight); }
.themestyle-minimal:not(.dark-mode) .ep-workspace-link svg { fill: var(--textLight); }
.themestyle-minimal:not(.dark-mode) .ep-workspace-link:hover i { color: var(--textStrong); }
.themestyle-minimal:not(.dark-mode) .ep-workspace-link:hover svg { fill: var(--textStrong); }
.ep-workspace__user { color: #fff; font-weight: 600; }
.themestyle-minimal .ep-workspace__user { color: var(--textStrong); }
.ep-workspace__company { color: rgb(255 255 255 / 50%); font-weight: 400; margin-left: .5rem; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; }
.themestyle-minimal .ep-workspace__company { color: var(--textDefault); }
.ep-workspace__company::before { content: "["; }
.ep-workspace__company::after { content: "]"; }
.ep-workspace-panel { top: var(--topRowHeight); position: absolute; z-index: 10001; width: 300px; right: 0; border-radius: var(--borderRadius); background: var(--panelBG); box-shadow: 0 1px 10px 1px rgb(69 65 78 / 10%); display: none; border: 1px solid var(--borderColor); }
.ep-workspace-panel.-visible,
.-visible .ep-workspace-panel { display: block; animation: fade-in-up .3s ease 1; }
.ep-workspace-panel__header { background-image: linear-gradient(310deg,var(--topRowGradRight),var(--topRowGradLeft)); text-align: center; padding: 1rem; border-radius: var(--borderRadius) var(--borderRadius) 0 0; color: #fff; display: flex; justify-content: center; }
.ep-workspace-panel__header-icon { margin-right: .5rem; font-size: var(--txtSizeLarge); }
.ep-workspace-panel__header h2 { font-size: 1.2rem; font-weight: 400; white-space: nowrap; margin: 0; }
.themestyle-minimal .ep-workspace-panel__header { background: var(--ep-primary-hover); }
.dark-mode .ep-workspace-panel__header { background: var(--panelHeaderBG); }
.ep-workspace-panel ul { list-style: none; margin: 0; padding: 1rem; display: flex; flex-wrap: wrap; }
.ep-workspace-panel li { margin-bottom: 1rem; position: relative; padding-left: 2rem; flex: 1; flex-basis: 50%; }
.ep-workspace-panel li:last-child { margin-bottom: 0; }
.ep-workspace-panel__title { display: block; font-size: var(--txtSizeSmall); color: var(--textStrong); font-weight: 800; }
/*.dark-mode .ep-workspace-panel__title { color: var(--textStrong); }*/
.ep-workspace-panel__data { display: block; font-size: var(--txtSizeNormal); color: var(--textDefault); line-height: 1.2; }
.ep-workspace-panel__icon { font-size: var(--txtSizeNormal); position: absolute; left: 0; top: 0; color: var(--ep-primary); }
.top-row__center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0 1rem; }
.app-main-title { margin: auto; font-size: 1.5rem; color: var(--logoColor); font-weight: 600; }
@media (max-width: 767px) {
.top-row__center { justify-content: flex-end; padding: 0; }
.ep-workspace-panel { position: fixed; right: 50%; transform: translateX(50%); }
.app-main-title { display: none; }
}
/* --------------------*/
/* ---- =LANGUAGES ------ */
/* --------------------*/
.languages { position: relative; margin-left: .5rem; }
.languages .btn { padding: 0 5px; border-radius: var(--borderRadius); line-height: 0; color: var(--shade88); font-size: 1rem; font-weight: 300; }
.languages .btn:hover { background: rgba(255,255,255, .2); color: var(--shade94); }
.languages .flag-icon { width: 24px; height: 16px; }
.dark-mode .languages .btn { color: var(--shade12); }
.dark-mode .languages .btn:hover { color: var(--shade06); }
.themestyle-minimal .languages .btn { color: var(--shade12); }
.themestyle-minimal .languages .btn:hover { background: var(--shade94); color: var(--shade06); }
.themestyle-minimal.dark-mode .languages .btn:hover { background: var(--buttonHoverBG); }
/*.languages__menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3rem solid var(--ep-primary); border-right: 0.25rem solid transparent; border-bottom: 0; border-left: 0.25rem solid transparent; }
*/
.languages__menu { position: absolute; top: var(--topRowHeight); right: 0; z-index: 1000; display: none; margin: 0 0 0 0; font-size: 1rem; text-align: left; list-style: none; background-clip: padding-box; border: 1px solid var(--borderColor); border-radius: var(--borderRadius); padding: 0; transition: all .2s ease-in; background-color: var(--panelHeaderBG); overflow: hidden; animation: fade-in-up .3s ease 1; }
.languages__menu li { padding: .5rem; border-bottom: 1px solid var(--borderColor); color: var(--textDefault); cursor: pointer; display: flex; align-items: center; flex-direction: row-reverse; gap: .5rem; position: relative; white-space: nowrap; }
.languages__menu li:hover { background: var(--sidebarMenuBGHover); color: var(--textStrong); }
.languages__menu li:last-child { border: none; }
.languages__menu li.-active { font-weight: 600; color: var(--textStrong); }
/*.languages__menu li.-active::after { content: ""; border-right: 0.3rem solid var(--ep-primary); border-top: 0.25rem solid transparent; border-left: 0; border-bottom: 0.25rem solid transparent; position: absolute; right: .7rem; }*/
.languages__menu li .flag-icon { margin-right: 5px; }
.languages__menu.-visible { display: block; }
/* --------------------*/
/* ---- =SEARCH ------ */
/* --------------------*/
.ep-search { --skeletonBG: hsl(240, 10%, 25%); --skeletonBorder: #363756; --searchBG: hsla(240deg, 15%, 10%, 95%) }
.ep-skeleton-searchcard { width: 250px; height: 100px; }
.ep-skeleton-searchcardsmall { width: 250px; height: 70px; }
.ep-search-trigger { display: flex; gap: 3rem; height: var(--mdHeight); border-radius: var(--borderRadius); align-items: center; padding: 0 4px 0 6px; background: var(--inputBG); color: var(--textDefault); transition: .2s all ease-in; border: 1px solid var(--borderColor); }
.ep-search-trigger:hover { background-color: var(--inputHoverBG); border-color: var(--ep-primary); cursor: text; }
.ep-search-trigger__icon { background: var(--ep-primary); color: #fff; padding: 0 8px; height: calc(100% - 6px); display: flex; align-items: center; justify-content: center; border-radius: var(--borderRadius); transition: .2s all ease-in; cursor: pointer; }
.ep-search-trigger__icon:hover { background: var(--ep-primary-hover); }
.ep-search { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:var(--searchBG); color: white; padding: 50px 100px; z-index: 999999; animation: fade-in-top 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; display: flex; flex-direction: column; gap: 2rem; }
@keyframes fade-in-top {
0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; }
100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
.ep-search__input { flex: 1; position: relative; }
.ep-search__input input { border: none; border-radius: 0; border-bottom: 2px solid var(--ep-primary); font-size: 2rem; color: #fff; background: none; width: 100%; }
.ep-search__input input:focus-visible { outline: none; }
.ep-search__clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .5; }
.ep-search__clear:hover { opacity: 1; }
.ep-search__header { display: flex; align-items: center; gap: 2rem; }
.ep-search__close { font-size: 2rem; display: flex; flex-direction: column; opacity: .8; position: absolute; top: 20px; right: 20px; }
.ep-search__close:after { content: "ESC"; font-size: .4em; opacity: .5; }
.ep-search__close:hover { opacity: 1; cursor: pointer; }
.ep-search__options { font-size: 2rem; opacity: .8; }
.ep-search__options:hover { opacity: 1; cursor: pointer; }
.ep-search ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--textDefault); opacity: 1; }
.ep-search ::-moz-placeholder { /* Firefox 19+ */ color: var(--textDefault); opacity: 1; }
.ep-search :-ms-input-placeholder { /* IE 10+ */ color: var(--textDefault); opacity: 1; }
.ep-search :-moz-placeholder { /* Firefox 18- */ color: var(--textDefault); opacity: 1; }
/*.ep-search input:focus::-webkit-input-placeholder {*/ /* Chrome/Opera/Safari */ /*color: transparent; opacity: 0; }
.ep-search input:focus::-moz-placeholder {*/ /* Firefox 19+ */ /*color: transparent; opacity: 0; }
.ep-search input:focus:-ms-input-placeholder {*/ /* IE 10+ */ /*color: transparent; opacity: 0; }
.ep-search input:focus:-moz-placeholder {*/ /* Firefox 18- */ /*color: transparent; opacity: 0; }*/
.ep-search__results { display: flex; gap: 3rem; flex: 1; overflow: auto; padding: 1rem 1px 1px 1px; }
.ep-search__results h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02rem; margin-bottom: 2rem; }
.ep-results-group sup { background: var(--ep-primary); border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; position: relative; right: 0; top: -1em; font-size: .8rem; padding-inline: 5px; font-weight: 600; }
.ep-results-group h3 { font-size: 1.3rem; font-weight: 300; }
.ep-results-group.-data { flex: 1; }
.ep-results-subgroup { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; width: 100%; justify-items: flex-start; margin-bottom: 2rem; }
.ep-results-group.-data .ep-results-subgroup { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ep-result-box { background: #494b57; border-radius: var(--borderRadius); padding: 1rem; width: 100%; cursor: pointer; }
.ep-result-box:hover { background: #535664; outline: 1px solid var(--ep-primary); }
.ep-result-box h3 { font-size: 1rem; border-bottom: 1px solid #aaabac; padding-bottom: .3rem; /*white-space: nowrap; text-overflow: ellipsis; overflow: hidden;*/ }
.ep-result-box__body { display: flex; flex-direction: column; gap: .5rem; }
.ep-result-box p { font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 0; }
.ep-menu-result { background: #494b57; border-radius: var(--borderRadius); padding: 1rem; width: 100%; cursor: pointer; }
.ep-menu-result:hover { background: #535664; outline: 1px solid var(--ep-primary); }
.ep-menu-result h3 { font-size: 1rem; border-bottom: 1px solid #aaabac; padding-bottom: .3rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ep-search__results mark { background: var(--ep-primary-subtle-active); padding: 0; }
@media (max-width: 767px) { .ep-search-trigger__text { display: none; }
.ep-search-trigger { gap: 0; padding: 0; background: none; border: none; }
.ep-search-trigger__icon { padding: 10px; height: 100%; }
}
@media (max-width: 1299px) {
.ep-search { padding: 10px 20px; }
.ep-search__header { gap: 1rem; padding-right: 50px; }
}
/* --------------------*/
/* ---- =TOOLBAR ------ */
/* --------------------*/
.toolbar { background: var(--toolbarBG); margin: 0 calc(-1*var(--contentMargin)); padding: 0 var(--contentMargin); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; box-sizing: border-box; position: fixed; top: calc(var(--topRowHeight)); z-index: 1000; height: var(--toolbarHeight); width: calc(100% - var(--sidebarMiniWidth) + 10px ); border-bottom: 1px solid var(--borderColor); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; flex-wrap: nowrap; }
.-no-menu .toolbar { width: 100%; }
.toolbar .ep-toolbar .k-toolbar { align-items: flex-end; overflow: visible; justify-content: flex-end; }
.toolbar > .toolbar__main,
.toolbar > .toolbar__secondary { flex-grow: 1; flex-shrink: 1; }
.toolbar > .toolbar__secondary .ep-toolbar .k-toolbar { justify-content: flex-start; }
/*.content.--with-toolbar:has(.lookup-toolbar) { --toolbarHeight: 70px; }
.content.--with-toolbar.--with-pagenav { --toolbarHeight: 100px; }*/
.k-toolbar .k-separator { margin: 0; border: none; align-items: center; justify-content: center; padding: 0 .5rem; }
.k-toolbar .k-separator::before { content: "|"; color: var(--shade82); font-weight: 300; font-size: 1.2rem; }
.menutype-horizontal .toolbar { top: calc(var(--topRowHeight) + var(--menuHeight)); width: calc(100%); }
.menutype-horizontal .-no-menu .toolbar { top: calc(var(--topRowHeight)); width: calc(100%); }
.themestyle-minimal .toolbar { box-shadow: none; }
.themestyle-minimal.dark-mode .toolbar { box-shadow: none; border-bottom: 1px solid var(--shade94); }
.k-toolbar .k-toolbar-overflow-button { margin-inline-start: 0; background: var(--ep-primary) !important; color: #fff !important; }
.ep-toolbar .ep-label span { color: hsl(var(--shadeH), var(--shadeS), 60%); font-weight: 300; }
/*.ep-toolbar .k-toolbar .k-separator { margin-bottom: 5px; }*/
.ep-toolbar .k-toolbar > * > label { margin-inline-end: 0; }
.ep-toolbar .k-toolbar > .ep-close-button { align-self: center; order: 1; }
.toolbar .label-left .ep-textbox__input,
.toolbar .label-left .ep-control__wrapper { min-width: initial; }
.ep-toolbar-inner { width: 100%; border: none; background: none; padding: 0; }
.ep-toolbar-inner .k-menu.k-menu-horizontal:not(.k-context-menu) { padding: 0; border: none; color: initial; background: none; }
.dark-mode .toolbar .ep-menu .k-menu-link { color: var(--textStrong); background: var(--buttonBG); border-radius: var(--borderRadius); }
.dark-mode .toolbar .ep-menu .k-menu-link:hover { color: var(--textStrong); background: var(--buttonHoverBG); }
.dark-mode .toolbar .ep-menu .k-menu-item:hover .k-menu-link { color: var(--textStrong); }
.dark-mode .toolbar .ep-label { color: var(--buttonBG); }
.dark-mode.themestyle-minimal .toolbar .ep-label { color: var(--sidebarMenuText); }
/* --------------------*/
/* ---- =PAGETITLE ------ */
/* --------------------*/
.pagetitle { display: flex; align-items: center; margin-bottom: var(--contentMargin); gap: 1rem; }
.pagetitle__icon { color: var(--ep-primary); font-size: 2.5rem; flex-grow: 0; line-height: 1; }
.pagetitle__avatar { width: 50px; height: 50px; border-radius: 100px; overflow: hidden; border: 1px solid var(--buttonBG); }
.pagetitle__avatar img { object-fit: cover; width: 100%; height: 100%; max-width: 100%; }
.pagetitle__headings { display: flex; min-width: 0; flex-grow: 1; justify-content: space-between; align-items: center; }
.pagetitle__headings h1 { color: var(--textStrong); font-weight: 600; font-size: var(--txtSizeXLarge); margin: 0; text-overflow: ellipsis; overflow: hidden; /* width: 100%; line-height: 1; white-space: nowrap;*/ }
.pagetitle__headings h2 { color: var(--textDefault); font-weight: 300; font-size: var(--txtSizeXLarge); margin: 0; letter-spacing: .05em; }
.pagetitle__headings h1 span { font-weight: 600; }
.lookup-toolbar .toolbar__icon { display: none; }
/* =k-picker */
/*.k-picker { border-width: var(--borderDivider); }*/
.k-picker-solid { background-color: var(--buttonBG); }
.k-picker-solid:hover { background-color: var(--buttonHoverBG); }
.dark-mode .k-toolbar { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--toolbarBG); }
.dark-mode .toolbar .k-toolbar { border-color: transparent; color: var(--textDefault); background-color: transparent; }
.ep-quicksearch { margin-bottom: var(--generalMargin) }
.ep-quicksearch .ep-control__wrapper { position: relative; }
.ep-quicksearch .ep-control__wrapper::before { content: '\f002'; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1; margin: 0 1rem; color: var(--textDefault); }
.ep-quicksearch .ep-textbox__input { padding-left: 3rem; }
.ep-quicksearch .ep-control.-focused .ep-control__wrapper::before { color: var(--ep-primary); }
.ep-quicksearch .ep-control .k-button { width: auto; }
@media (max-width: 1400px) {
/*.menutype-tree .ep-toolbar-inner .k-button .button-text { display: none; }
.menutype-tree .ep-toolbar-inner .k-button .k-button-text .k-icon { margin-right: 0; }
.menutype-tree .ep-toolbar-inner .k-button .k-button-text i[class*='fa'] { margin-right: 0; }*/
}
@media (max-width: 989px) {
/*.layout-main { min-height: unset; }*/
/*.content.--with-toolbar { height: calc(100vh - var(--topRowHeight) - (var(--generalMargin)*2) - 2rem ); margin: var(--generalMargin); }*/
/*.toolbar { position: static; width: calc(990px - (var(--generalMargin)*2) ); }*/
/*.toolbar__right .ep-toolbar { margin-bottom: 0; }*/
/*.main-panel.-form { height: calc(100% - 120px); }*/
.ep-layout-item__autohide { display: none; }
}
/* --------------------*/
/* ---- =K-WINDOW ------ */
/* --------------------*/
/* =lookup standard k-window*/
.k-window.lookup-window .k-window-content { padding: 0; display: flex; }
.k-window.lookup-window .toolbar { position: static; width: 100%; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); }
.k-window.lookup-window .popup-content { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 1rem; box-sizing: border-box; gap: 1rem; }
.k-window.lookup-window .main-panel.-array { height: auto; flex: 1; min-height: 0; }
.k-window.lookup-window .main-panel.-browser { height: 100%; margin: 0; padding: 0; height: auto; min-height: 0; flex: 1; }
/* =master k-window */
.k-window.lookup-master-window .k-window-content { padding: 0; display: flex; }
.k-window.lookup-master-window .toolbar { position: static; width: 100%; border-top: 1px solid transparent; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); margin: 0; --toolbarHeight: 60px; }
.k-window.lookup-master-window .popup-content { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 1rem; box-sizing: border-box; gap: 1rem; }
.k-window.lookup-master-window .main-panel.-browser { height: 100%; margin: 0; padding: 0; height: auto; min-height: 0; flex: 1; gap: 1rem; }
/* =lookup standard blazor dialog*/
/*.blazor-dialog-container.lookup-window .popup-content { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; box-sizing: border-box; gap: 1rem; background: var(--mainBG); }
.blazor-dialog-container.lookup-window .toolbar { position: static; width: 100%; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); margin: 0; --toolbarHeight: 60px; padding: 0 1rem; }
*/
/* =array blazor dialog*/
.blazor-dialog-container.lookup-array-window .k-window-content { padding: 0; display: flex; }
/*.blazor-dialog-container.lookup-array-window .popup-content { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; box-sizing: border-box; gap: 1rem; background: var(--mainBG); position: relative; }
.blazor-dialog-container.lookup-array-window .popup-content .pagetitle { position: absolute; top: 1.5rem; z-index: 1000; left: 1rem; margin: 0; }
.blazor-dialog-container.lookup-array-window .toolbar { position: static; width: 100%; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); margin: 0; --toolbarHeight: 60px; padding: 0 1rem; }
*/
.main-panel.-array .k-grid { width: 100% /*!important;*/ }
.browser-grid,
.scrollable-dialog .ep-grid.browser-grid { height: calc(100% - var(--quickSearchTotalHeight)); }
.browser-grid .k-window .toolbar { width: calc( 100% - 2.5rem); position: static; }
/* =custon blazor dialog */
/*.custom-dialog .blazor-dialog-content { display: flex; flex-direction: column; height: calc(100% - 10px); height: 100%; }
.blazor-dialog-body.custom-blazor-dialog-body { display: flex; flex-direction: row; flex: 1; width: 100%; padding: 1rem; box-sizing: border-box; gap: .5rem; }
.scrollable-dialog .blazor-dialog-body.custom-blazor-dialog-body .toolbar { position: static; width: 100%; border-top: 1px solid transparent; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); align-items: center; }*/
/*.k-window.lookup-master-window .browser-header { display: flex; flex-direction: column; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); background: transparent; }
.k-window.lookup-master-window .ep-titlebar { display: flex; justify-content: space-between; align-items: center; padding: 0; box-sizing: border-box; }
.k-window.lookup-master-window .ep-titlebar h1 { font-size: var(--txtSizeXLarge); font-weight: 600; margin: 0; opacity: .8; }
.k-window.lookup-master-window .ep-titlebar .k-button { background: none; border: none; opacity: .5; }
.k-window.lookup-master-window .ep-titlebar .k-button:hover { background: none; border: none; opacity: 1; }
.k-window.lookup-master-window .ep-quicksearch .ep-textbox { margin: 0; }
.k-window.lookup-master-window .browser-grid { min-height: 0; }
.k-window.lookup-master-window .browser-header .toolbar { height: var(--modalToolbarHeight); width: 100%; display: flex; align-items: center; justify-content: space-between; position: static; flex-wrap: nowrap; padding: 0; border-radius: 0; }
.dark-mode .k-window .browser-header .toolbar { box-shadow: none; }
.k-window .browser-header .toolbar .toolbar__left { margin: 0; }
.k-window .browser-header .toolbar .toolbar__right { margin: 0; }
.k-window .ep-toolbar .k-toolbar .ep-dropdownlist.label-above { flex-direction: row-reverse; align-items: center; }
.k-window .ep-toolbar .k-toolbar .ep-control__wrapper { min-width: 100px; }
.k-window .ep-toolbar .k-toolbar label { align-self: center; margin-right: .5rem; }
.k-window .toolbar__right .ep-toolbar { margin-bottom: 0; }
.dark-mode .k-window { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--mainBG); }
.dark-mode .k-window .ep-titlebar h1 { color: var(--textStrong); }
.dark-mode.themestyle-minimal .k-window .ep-titlebar .k-button { color: var(--textLight); }*/
/* =lookup master blazor dialog */
.blazor-dialog-container.lookup-master-window.scrollable-dialog .blazor-dialog-content { flex-direction: row; }
.blazor-dialog-container .main-panel { margin: 0; padding: 0 1rem 1rem 1rem; height: auto; min-height: 0; flex: 1; gap: 1rem; }
.blazor-dialog-container.lookup-window .main-panel.-browser { height: 100%; padding: 0; }
.blazor-dialog-container.lookup-array-window .main-panel.-array .ep-grid__container { gap: 0 !important; }
.blazor-dialog-container.lookup-array-window .main-panel.-array .ep-grid__container > .ep-grid__quickentry { margin-bottom: .5rem; }
.blazor-dialog-container .popup-content { display: flex; flex-direction: column; flex: 1; width: 100%; box-sizing: border-box; gap: 1rem; background: var(--mainBG); padding: 0; }
.blazor-dialog-container .popup-content .pageheader { display: flex; background: var(--toolbarBG); border-bottom: 1px solid var(--borderColor); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; min-width: 0; }
.blazor-dialog-container .popup-content .toolbar { order: 2; position: static; width: auto; background: none; border: none; margin: 0; padding: 1rem; box-shadow: none; flex-grow: 1; }
.blazor-dialog-container .popup-content .pagetitle { order: 1; padding-inline: var(--contentMargin); margin: 0; flex-grow: 1; min-width: 0; }
.blazor-dialog-container .popup-content .pagetitle__avatar { width: 40px; height: 40px; }
.blazor-dialog-container .popup-content .pagetitle__headings { justify-content: flex-start; white-space: nowrap; }
.blazor-dialog-container .popup-content .pagetitle__headings .pagetitle__headings h1 { white-space: nowrap; }
.blazor-dialog-container .popup-content .pagetitle__headings h2::before { content: "-"; margin-inline: .5rem; }
.blazor-dialog-container .ep-quicksearch { margin-bottom: 0; }
.blazor-dialog-container.lookup-master-window .ep-quicksearch { margin-bottom: var(--generalMargin); }
.browser-grid .blazor-dialog-container .toolbar { width: calc( 100% - 2.5rem); position: static; }
/*=master*/
.blazor-dialog-container.lookup-master-window .browser-header { display: flex; flex-direction: column; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); margin: -1rem -1rem 0 -1rem; }
.blazor-dialog-container.lookup-master-window .ep-titlebar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem 0 1rem; box-sizing: border-box; }
.blazor-dialog-container.lookup-master-window .ep-titlebar h1 { font-size: var(--txtSizeXLarge); font-weight: 600; margin: 0; color: var(--textStrong); }
.blazor-dialog-container.lookup-master-window .ep-quicksearch .ep-textbox { margin: 0; }
.blazor-dialog-container.lookup-master-window .browser-grid { min-height: 0; }
.blazor-dialog-container.lookup-master-window .browser-header .toolbar { height: var(--modalToolbarHeight); width: 100%; display: flex; align-items: center; justify-content: space-between; position: static; flex-wrap: nowrap; padding: 0 1rem; margin: 0; border-radius: 0; }
/*=custom*/
.blazor-dialog-container.custom-dialog .blazor-dialog-body { flex-direction: column; width: 100%; }
.blazor-dialog-container.custom-dialog .pageheader { display: flex; background: var(--toolbarBG); border-bottom: 1px solid var(--borderColor); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; width: calc(100% + 2rem); margin: -1rem -1rem 1rem -1rem; }
.blazor-dialog-container.custom-dialog .toolbar { order: 2; position: static; width: auto; background: none; border: none; margin: 0; padding: 1rem; box-shadow: none; flex-grow: 1; }
.blazor-dialog-container.custom-dialog .pagetitle { order: 1; padding-inline: var(--contentMargin); margin: 0; flex-grow: 1; }
.blazor-dialog-container.custom-dialog .main-panel.-form { padding: 0; }
/* rules for embeded pageheader inside a blazor dialog with blazor-dialog-header */
.blazor-dialog-container.custom-dialog:has(.blazor-dialog-header) .pageheader { background: none; border: none; box-shadow: none; margin-bottom: 0; }
.blazor-dialog-container .ep-toolbar .k-toolbar .ep-dropdownlist.label-above { flex-direction: row-reverse; align-items: center; }
/*.blazor-dialog-container .ep-toolbar .k-toolbar .ep-control__wrapper { min-width: 100px; }*/
.blazor-dialog-container .ep-toolbar .k-toolbar label { align-self: center; margin-right: .5rem; }
.blazor-dialog-container .toolbar__right .ep-toolbar { margin-bottom: 0; }
.blazor-dialog-container .k-grid .k-grid-container { position: relative; /*height: 50vh;*/ }
.blazor-dialog-content-wrapper-windowed { height: 90vh; }
.ep-grid__quickentry .blazor-dialog-content-wrapper-windowed { height: auto; }
.ep-treelist__quickentry .blazor-dialog-content-wrapper-windowed { height: auto; }
.actionlogger-dialog .blazor-dialog-content-wrapper-windowed { height: unset; }
.scrollable-dialog.actionlogger-dialog .blazor-dialog-content { height: auto; }
.blazor-dialog-close { color: var(--textDefault); text-shadow: none; }
.dark-mode .blazor-dialog-close:hover { color: var(--textDefault); opacity: 1; }
.dark-mode .blazor-dialog-container { border-color: var(--borderColor); color: var(--textDefault); /*background-color: var(--mainBG);*/ }
.dark-mode .blazor-dialog-container .ep-titlebar h1 { color: var(--textStrong); }
/*.dark-mode.themestyle-minimal .blazor-dialog-container .ep-titlebar { background: var(--ep-primary-hover); }*/
.dark-mode.themestyle-minimal .blazor-dialog-container .ep-titlebar .k-button { color: var(--textLight); }
/* --------------------*/
/* ---- =POPUP =DIALOG ------ */
/* --------------------*/
/*=dialogs*/
.blazor-dialog-content-wrapper { background-color: var(--panelBG); border-color: var(--borderColor); border-radius: var(--borderRadius); color: var(--textDefault); }
.blazor-dialog-content { margin: 0; }
.blazor-dialog-header { background: var(--panelHeaderBG); border-color: var(--borderColor); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; }
.blazor-dialog-footer { background: var(--panelFooterBG); border-color: var(--borderColor); padding: .5rem 1rem; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767px) {
.blazor-dialog-footer { flex-wrap: wrap; gap: .5rem; justify-content: center; }
.blazor-dialog-footer .mr-auto { margin-right: initial !important; }
}
.blazor-dialog-title { display: flex; justify-content: space-between; align-items: center; padding: 0; box-sizing: border-box; flex: 1; color: var(--textStrong); line-height: 1.2; justify-content: space-between; width: 100%; }
.blazor-dialog-title h2 { font-size: var(--txtSizeXLarge); font-weight: 600; color: var(--textStrong); margin: 0; }
.blazor-dialog-body { padding: 1rem; }
.scrollable-dialog .blazor-dialog-content-wrapper { display: flex; }
.scrollable-dialog .blazor-dialog-content { display: flex; flex-direction: column; width: 100%; height: 100%; }
.scrollable-dialog .blazor-dialog-body { display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; flex: 1; min-height: 0; overflow-y: auto; }
.scrollable-dialog .ep-grid { height: 100%; }
.scrollable-dialog .main-panel.-form { /*max-height: 80vh;*/ padding: 0 1rem; box-sizing: border-box; }
.ep-message-dialog .blazor-dialog-content-wrapper-windowed { height: auto; }
.ep-message-dialog .blazor-dialog-header .ep-dialog-icon { font-size: 2rem; }
.ep-message-dialog .blazor-dialog-title > div { display: flex; align-items: center; gap: 1rem; }
.ep-message-dialog .blazor-dialog-body.-has-icon { min-height: 3rem; display: flex; justify-content: flex-start; align-items: center; gap: 2rem; }
.ep-message-dialog .blazor-dialog-body.-has-icon .ep-dialog-icon { font-size: 3rem; line-height: 1; }
.-error .ep-dialog-icon,
.-error .ep-dialog-title { color: var(--ep-danger); }
.-success .ep-dialog-icon,
.-success .ep-dialog-title { color: var(--ep-success); }
.-info .ep-dialog-icon,
.-info .ep-dialog-title { color: var(--ep-info); }
.-warning .ep-dialog-icon,
.-warning .ep-dialog-title { color: var(--ep-warning); }
.actionlogger-list { list-style: none; margin: 0; padding: 0; }
.dialog-text { font-size: var(--txtSizeLarge); }
.actionlogger-item { position: relative; padding: 1rem 1rem 1rem 4rem; }
.actionlogger-item:nth-child(2n+1) { background: var(--shade92); }
.actionlogger-item__icon { position: absolute; left: 1rem; top: 1rem; font-size: 1.8rem; }
.actionlogger-item__title { font-size: var(--txtSizeNormal); margin: 0; font-weight: 600; letter-spacing: 0; }
.actionlogger-item__desc { font-size: var(--txtSizeNormal); margin: 0; overflow-wrap: break-word; white-space: pre-wrap; }
.--exception .actionlogger-item__icon,
.--exception .actionlogger-item__title { color: var(--ep-danger); }
.--ep-info .actionlogger-item__icon,
.--ep-info .actionlogger-item__title { color: var(--ep-info); }
.--ep-warning .actionlogger-item__icon,
.--ep-warning .actionlogger-item__title { color: var(--ep-warning); }
.k-animation-container .k-popup { padding: 0; }
/*.k-animation-container.ep-lookup-grid .k-popup { padding-bottom: 30px;}*/
/*=Dropdown list */
.k-list { border-color: var(--borderColor); color: var(--textStrong); }
.k-list-item:hover,
.k-list-optionlabel:hover,
.k-list-item.k-hover,
.k-hover.k-list-optionlabel { color: var(--textStrong); background-color: var(--dropdownItemHoverBG); }
.k-list-item:focus,
.k-list-optionlabel:focus,
.k-list-item.k-focus,
.k-focus.k-list-optionlabel { box-shadow: inset 0 0 0 3px rgba(33, 37, 41, 0); }
.k-list-item.k-selected,
.k-selected.k-list-optionlabel { color: #fff; background-color: var(--ep-primary); }
.k-list-item.k-selected:hover,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-hover.k-list-optionlabel { color: #fff; background-color: var(--ep-primary-hover); box-shadow: none; }
/*=Menu list */
.k-menu-link-text { align-items: center; }
.k-menu-link-text i[class*='fa'] { margin-right: .3rem; font-size: 1.2rem; }
.k-menu-link-text .k-icon { margin-right: .3rem; }
.k-menu-link-text svg { margin-right: .3rem; width: 1.2rem; height: 1.2rem; fill: var(--textDefault); }
/*=Menu group */
.k-menu-group,
.k-menu.k-context-menu { color: var(--textDefault); }
.k-menu-group .k-item:hover > .k-link,
.k-menu-group .k-item.k-hover > .k-link,
.k-menu.k-context-menu .k-item:hover > .k-link,
.k-menu.k-context-menu .k-item.k-hover > .k-link { color: var(--textStrong); background-color: var(--dropdownItemHoverBG); }
.k-menu-group .k-item:focus > .k-link,
.k-menu-group .k-item.k-focus > .k-link,
.k-menu.k-context-menu .k-item:focus > .k-link,
.k-menu.k-context-menu .k-item.k-focus > .k-link { box-shadow: inset 0 0 0 2px hsl(212deg 100% 95%); }
.k-menu-group .k-item > .k-link:active,
.k-menu-group .k-item > .k-link.k-active,
.k-menu-group .k-item > .k-link.k-selected,
.k-menu.k-context-menu .k-item > .k-link:active,
.k-menu.k-context-menu .k-item > .k-link.k-active,
.k-menu.k-context-menu .k-item > .k-link.k-selected { color: #fff; background-color: var(--ep-primary); }
.k-menu-group .k-item > .k-link:active svg { fill: #fff; }
/*=ep-menu */
.ep-menu .k-menu:not(.k-context-menu) { gap: .5rem; }
.ep-menu .k-menu-item { background: var(--buttonBG); color: var(--ep-secondary); border: 1px solid var(--buttonBorder); border-radius: var(--borderRadius); height: calc(1.5em + .75rem + 2px); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; height: var(--mdHeight); }
.ep-menu .k-menu:not(.k-context-menu) > .k-item { color: var(--ep-secondary); }
.ep-menu .k-menu-item:hover { border-color: var(--buttonHoverBG); background-color: var(--buttonHoverBG); color: var(--ep-secondary); }
.ep-menu .k-menu-link i[class*="fa"] { font-size: 1rem; width: 1em; height: 1em; align-self: center; }
.ep-menu .k-menu-link { padding: 0 0.375rem; color: var(--buttonColor); gap: .3rem; }
.k-popup .k-menu-group .k-menu-link { padding-block: .5rem; height: var(--mdHeight); }
.k-popup .k-menu-group .k-menu-link > i:first-child { width: 1.2rem; height: 1rem; outline: 0; line-height: 1; display: inline-flex; flex-flow: row nowrap; align-items: center; justify-content: center; vertical-align: middle; position: relative; }
.k-animation-container .k-menu-popup { animation: fade-in-up .25s ease-in 1; }
.k-menu:not(.k-context-menu) > .k-item > .k-active { color: var(--buttonColor); }
.k-menu-expand-arrow { margin-left: 0.3rem; margin-right: 0; position: relative; }
.k-menu-group .k-menu-expand-arrow { margin-left: auto; }
.ep-menu .k-menu:not(.k-context-menu) > .k-item > .k-active,
.ep-menu .k-menu:not(.k-context-menu) > .k-item:hover,
.ep-menu .k-menu:not(.k-context-menu) > .k-item.k-hover { color: var(--buttonColor); }
.theme-dark .ep-menu .k-menu:not(.k-context-menu) > .k-item > .k-active,
.theme-dark .ep-menu .k-menu:not(.k-context-menu) > .k-item:hover,
.theme-dark .ep-menu .k-menu:not(.k-context-menu) > .k-item.k-hover { color: #fff; }
.dark-mode .k-menu:not(.k-context-menu) { border-color: transparent; color: var(--sidebarMenuText); background-color: transparent; }
.dark-mode .ep-menu .k-menu-item { background: transparent; color: var(--sidebarMenuText); border-radius: var(--borderRadius); }
.dark-mode .ep-menu .k-menu-item:hover { /*border-color: transparent; background-color: transparent;*/ color: var(--ep-primary); }
.dark-mode .ep-menu .k-menu-link { color: var(--sidebarMenuText); }
.dark-mode .ep-menu:not(.ep-toolbar-menu) .k-menu-item:hover .k-menu-link,
.dark-mode .ep-menu:not(.ep-toolbar-menu) .k-menu-item .k-menu-link.k-active { color: var(--ep-primary); }
.dark-mode .k-animation-container .k-popup,
.dark-mode .k-animation-container .k-list { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--sidebarBG); }
.dark-mode .k-animation-container .k-list .k-item:hover,
.dark-mode .k-animation-container .k-list .k-item.k-hover,
.dark-mode .k-animation-container .k-list-optionlabel:hover,
.dark-mode .k-animation-container .k-list-optionlabel.k-hover { color: var(--ep-primary); background-color: transparent; box-shadow: none; }
.dark-mode .k-animation-container .k-list .k-item.k-selected,
.dark-mode .k-animation-container .k-list-optionlabel.k-selected { color: var(--textStrong); background-color: var(--ep-primary); box-shadow: none; }
.dark-mode .k-animation-container .k-menu-group,
.dark-mode .k-animation-container .k-menu.k-context-menu { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--panelBG); }
/*=k-dialog */
/*.k-dialog-wrapper { z-index: 10000000 !important; } We need to check if this affects smth */
.k-window.k-editor-window { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--cardBG); }
.k-window.k-editor-window .k-window-titlebar { border-color: var(--borderColor); }
.k-window.k-editor-window .k-actions.k-window-actions { justify-content: flex-end; }
.k-window.k-editor-window .k-form { color: var(--textDefault); }
.k-window.k-editor-window .k-form.k-form-horizontal .k-form-field > .k-label { padding-top: 0; width: 35%; line-height: 1; margin: 0; justify-content: center; }
.k-window.k-editor-window .k-form.k-form-horizontal.k-form-horizontal .k-form-field { display: flex; gap: 1rem; }
.k-button.k-window-titlebar-action.k-icon-button { border-radius: 100px; background: none; }
.k-button.k-window-titlebar-action.k-icon-button.k-button-flat::before { opacity: 0; }
/* --------------------*/
/* ---- =CALENDAR ------ */
/* --------------------*/
.k-calendar-header .k-button.k-button-flat::before,
.k-calendar-header .k-button.k-button-flat::before { opacity: 0; }
.k-calendar-header .k-button.k-button-flat:hover::before,
.k-calendar-header .k-button.k-button-flat:hover::before { opacity: .15; }
.k-calendar-title,
.k-calendar-nav-prev,
.k-calendar-nav-next { color: var(--ep-secondary); }
.themestyle-minimal .k-calendar-title,
.themestyle-minimal .k-calendar-nav-prev,
.themestyle-minimal .k-calendar-nav-next { color: var(--buttonColor); }
.dark-mode .k-calendar-title,
.dark-mode .k-calendar-nav-prev,
.dark-mode .k-calendar-nav-next { color: #fff; }
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner:hover,
.k-calendar .k-calendar-td.k-selected .k-link:hover { border-color: var(--ep-primary-hover); color: #fff; background-color: var(--ep-primary); }
.dark-mode .k-calendar { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--panelHeaderBG); }
.dark-mode .k-calendar .k-content { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--panelBG); }
.dark-mode .k-calendar .k-hover .k-link,
.dark-mode .k-calendar td:hover .k-link,
.dark-mode .k-calendar td.k-hover .k-link,
.dark-mode .k-calendar .k-calendar-td:hover .k-link,
.dark-mode .k-calendar .k-calendar-td.k-hover .k-link { border-color: var(--borderColor); color: var(--textStrong); background-color: rgb(255 255 255 / 0.14); }
/* devexpress calendar */
[class^="dx"], [class^="dx"] * { box-sizing: border-box; }
.dxbl-calendar { color: var(--textDefault); background: var(--panelBG); }
.dxbl-calendar .dxbl-calendar-header { border-color: var(--borderColor); border-top-left-radius: var(--bordeRadius); border-top-right-radius: var(--bordeRadius); background-color: var(--panelHeaderBG,unset); color: var(--textDefault); gap: 5px; }
.dxbl-calendar .dxbl-calendar-footer { border-color: var(--borderColor); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); background-color: var(--panelHeaderBG,unset); color: var(--textDefault); }
.dxbl-calendar .dxbl-calendar-content { background: var(--panelBG); }
.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-not-current-month { color: var(--textLight); }
.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-weekend { color: var(--ep-danger); }
.dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number):not(.dxbl-calendar-selected-range):not(.dxbl-disabled):not(:disabled):hover { background-color: var(--ep-primary-emphasis,unset); color: var(--textStrong); }
.dxbl-dropdown > .dxbl-dropdown-dialog, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog { border-color: var(--borderColor); }
.themestyle-minimal .dxbl-calendar .dxbl-btn-secondary { background-color: var(--ep-primary); border-color: var(--ep-primary); }
.themestyle-minimal .dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number):not(.dxbl-calendar-selected-range):not(.dxbl-disabled):not(:disabled):hover { background-color: var(--ep-primary-subtle,unset); color: var(--textStrong); }
/* --------------------*/
/* ---- =APPEARANCE PAGE ------ */
/* --------------------*/
.theme-header { font-size: 1rem; font-weight: 600; color: var(--textStrong); }
.ep-themelist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1rem 0; }
.themelist__sample { display: flex; justify-content: center; align-items: center; padding: 1rem; background: var(--shade98); width: 2rem; height: 2rem; background: #e143c9; border-radius: 5px; cursor: pointer; }
.themelist__sample:hover::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; color: hsla(0deg, 0%, 100%, .5); font-weight: 600; }
.themelist__sample.-active::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; color: #fff; font-weight: 600; }
.themelist__sample.-ocean { background: #54a0ff; }
.themelist__sample.-emerald { background: #84bd20; }
.themelist__sample.-royal { background: #0652DD; }
.ep-darkmode-toggle .k-switch-label-on { display: flex; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden; width: 100%; height: 100%; align-items: center; justify-content: flex-start; padding: 2px 8px; }
.ep-darkmode-toggle .k-switch-label-off { display: flex; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden; width: 100%; height: 100%; align-items: center; justify-content: flex-end; padding: 2px 8px; }
.ep-darkmode-toggle .k-switch-label-on { }
.ep-darkmode-toggle .k-switch-label-on::before { content: "\f186"; font-family: 'Font Awesome 6 Pro'; color: hsla(0deg, 0%, 100%, .8); font-weight: 600; }
.ep-darkmode-toggle .k-switch-label-off::before { content: "\f185"; font-family: 'Font Awesome 6 Pro'; color: hsla(0deg, 0%, 0%, .4); font-weight: 600; }
.option-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.option-list__item { background: var(--panelHeaderBG); padding: 1rem 1rem 1rem 3rem; border-radius: var(--borderRadius); border: 1px solid var(--borderColor); position: relative; cursor: pointer; }
.option-list__item.-active,
.option-list__item:hover { border: 1px solid var(--ep-primary); background: var(--panelBG ); }
.option-list__title { margin-bottom: .2rem; color: var(--textDefault); }
.option-list__item.-active .option-list__title { font-weight: 600; }
.option-list__item:before { content: ""; border-radius: 100px; width: 1rem; height: 1rem; background: var(--panelBG ); position: absolute; left: 1rem; top: 1rem; border: 1px solid var(--borderColor); }
.option-list__item.-active:before { background: var(--ep-primary); }
.option-list__item.-active:hover:before { border-color: var(--ep-primary); }
.option-list__samples { display: flex; align-items: center; padding: 1rem; background: var(--shade98); }
.-default .square-sample { width: 2rem; height: 2rem; background: #e143c9; }
.-default .square-sample:nth-child(2) { background: #686de0; }
.-default .square-sample:nth-child(3) { background: #7ed6df; }
.-default .square-sample:nth-child(4) { background: #badc58; }
.-default .square-sample:nth-child(5) { background: #ffbe76; }
.-ocean .square-sample { width: 2rem; height: 2rem; background: #54a0ff; }
.-ocean .square-sample:nth-child(2) { background: #1dd1a1; }
.-ocean .square-sample:nth-child(3) { background: #48dbfb; }
.-ocean .square-sample:nth-child(5) { background: #feca57; }
.-ocean .square-sample:nth-child(6) { background: #ee5253; }
.ep-control .k-dropdown .k-dropdown-wrap .k-clear-value { background: none; border: none; position: absolute; right: 3px; color: #333; z-index: 1; }
.dark-mode .ep-control .k-dropdown .k-dropdown-wrap .k-clear-value { color: #888; }
.dark-mode .toolbar .k-dropdown .k-dropdown-wrap { border-color: transparent; color: var(--sidebarMenuText); background-color: transparent; }
.dark-mode .toolbar .k-dropdown .k-dropdown-wrap:hover,
.dark-mode .toolbar .k-dropdown .k-dropdown-wrap.k-focused { border-color: transparent; color: var(--ep-primary); background-color: transparent; }
.ep-control .k-clear-value { opacity: .3; }
.ep-control .k-clear-value:hover { opacity: 1; }
.option-list__samples.-dark { background: #202130 }
.-dark .square-sample { width: 2rem; height: 2rem; background: #0f8bfd; }
.-dark .square-sample:nth-child(2) { background: #3a3c49; }
.-dark .square-sample:nth-child(3) { background: #00d0de; }
.-dark .square-sample:nth-child(4) { background: #0bd18a; }
.-dark .square-sample:nth-child(5) { background: #eee500; }
.-dark .square-sample:nth-child(6) { background: #fc6161; }
.-minimal .square-sample { width: 2rem; height: 2rem; background: #0257d5; }
.-minimal .square-sample:nth-child(2) { background: #fff; }
.-minimal .square-sample:nth-child(3) { background: #ececec; }
.-minimal .square-sample:nth-child(4) { background: #333; }
.-minimal .square-sample:nth-child(5) { background: #cfe7ff; }
.-minimal .square-sample:nth-child(6) { background: #f4f5f6; }
.density-example { background: var(--shade96); width: 200px; padding: 8px; border-radius: var(--borderRadius); border: 1px solid var(--borderColor); }
.fake-input { background: var(--shade90); padding: 8px; border-radius: var(--borderRadius); border: 1px solid var(--borderColor); margin-bottom: 8px; }
.fake-input-group { display: flex; }
.fake-input-group .fake-input { width: 50%; margin: 0; }
.fake-input-group .fake-input:first-child { margin-right: 1rem; }
.density-example.-compact { padding: .5rem; }
.-compact .fake-input { padding: 4px; margin-bottom: 4px; }
.-compact .fake-input-group { margin-bottom: .5rem; }
.-compact .fake-input-group .fake-input { margin: 0; }
.-compact .fake-input-group .fake-input:first-child { margin-right: .5rem; }
.-compact > .fake-input-group:last-child { margin: 0; }
.option-list__sample-text { padding: var(--generalPadding) var(--generalPadding) var(--generalPadding) 0; color: var(--textDefault); }
.option-list__sample-text.-small { font-size: 12px; }
.option-list__sample-text.-default { font-size: 14px; }
.option-list__sample-text.-large { font-size: 16px; }
.ep-drawer .option-list.-menus { flex-direction: row; }
.menu-example { font-size: .8rem; }
.menu-example.-tree div:first-child { width: 7em; height: .5em; background: var(--shade30); }
.menu-example.-tree div:nth-child(2) { height: 3em; width: 7em; display: flex; }
.menu-example.-tree > div > div:first-child { background: var(--shade50); height: 100%; width: 30%; }
.menu-example.-tree > div > div:nth-child(2) { background: var(--shade90); height: 100%; width: 70%; }
.menu-example.-horizontal div:first-child { width: 7em; height: .5em; background: var(--shade30); }
.menu-example.-horizontal div:nth-child(2) { background: var(--shade50); height: .5em; width: 7em; }
.menu-example.-horizontal div:nth-child(3) { height: 3em; width: 7em; background: var(--shade90); }
.ep-optiongroup { flex-direction: row; gap: 0; align-items: center; width: 100%; justify-content: flex-start; display: flex; margin: 0; padding: 0; list-style: none; }
.optiongroup__item { flex: 1; background: var(--panelHeaderBG); padding: .5rem 1rem; border-radius: 5px; border: 1px solid var(--borderColor); position: relative; cursor: pointer; display: flex; gap: .5rem; justify-content: center; align-items: center; height: 34px; }
.optiongroup__title { margin-bottom: 0; color: inherit; }
.optiongroup__title.-small { font-size: 12px; }
.optiongroup__title.-default { font-size: 14px; }
.optiongroup__title.-large { font-size: 16px; }
.optiongroup__item::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; font-weight: 600; opacity: 0 }
.optiongroup__item:hover::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; font-weight: 600; opacity: .5 }
.optiongroup__item.-active::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; font-weight: 600; opacity: 1; }
.optiongroup__item.-active { border: 1px solid var(--ep-primary); background: var(--ep-primary); color: #fff; }
.optiongroup__item.-active .optiongroup__title { font-weight: 600; }
/*.optiongroup__item.-active:hover::before { content: "\f00c"; font-family: 'Font Awesome 6 Pro'; color: hsla(0deg, 0%, 100%, .5); font-weight: 600; }*/
.optiongroup__item { border-radius: 0; }
.optiongroup__item:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.optiongroup__item:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
/*.ep-drawer .option-list { flex-direction: column; }*/
.ep-drawer .square-sample { width: 1.5rem; height: 1.5rem; }
.ep-drawer .option-list__item { margin-right: 0; padding: .5rem .5rem .5rem 3rem; margin-bottom: 1rem; flex: 1; }
.ep-drawer .density-example { width: 140px; }
/* --------------------*/
/* ---- =USER =MENU ------ */
/* --------------------*/
.user-menu { top: 4rem; position: absolute; z-index: 10001; width: 250px; right: 1rem; border-radius: var(--borderRadius); background: var(--mainBG); box-shadow: 0 1px 10px 1px rgba(69,65,78,.1); display: none; border: 1px solid var(--borderColor); }
.user-menu.-visible { display: block; animation: fade-in-up .3s ease 1; }
.user-menu__header { background-image: linear-gradient(310deg,var(--topRowGradRight),var(--topRowGradLeft)); border-radius: var(--borderRadius) var(--borderRadius) 0 0; display: flex; justify-content: flex-start; align-items: center; font-size: var(--txtSizeLarge); text-decoration: none; }
.themestyle-minimal .user-menu__header { background: var(--ep-primary); }
.dark-mode .user-menu__header { background: var(--panelHeaderBG); }
.ep-user { font-size: var(--txtSizeNormal); color: #fff; }
.ep-user__icon { width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 100px; background: rgb(255 255 255 / 20%); margin-right: .5rem; font-size: 1.2rem; flex-shrink: 0; flex: 0 0 2rem; }
.ep-user__info { overflow: hidden; }
.ep-user__name,
.ep-user__company { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ep-user__company { font-size: .8em; opacity: .5; }
/*.user-menu__header:hover .ep-user__icon { background: #fff; color: var(--ep-primary); }
.dark-mode .user-menu__header:hover .ep-user__icon { background: var(--ep-primary); color: #fff; }*/
.user-menu__header,
.user-menu__body,
.user-menu__footer { padding: 1rem; }
.user-menu__nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.user-menu__navlink,
.ep-custom-menu__navlink {position: relative;line-height: 1;display: flex;justify-content: flex-start;align-items: flex-start;cursor: pointer;padding: 5px;text-decoration: none;font-size: var(--txtSizeNormal); border-radius: var(--borderRadius);transition: .15s all ease-in;}
.user-menu__navlink svg { width: 1.5rem; height: 1.5rem; margin-right: .5rem; fill: var(--sidebarMenuText); }
.user-menu__navlink i { width: 1.5rem; height: 1.5rem; margin-right: .5rem; color: var(--sidebarMenuText); font-size: 1.5em; text-align: center; }
.user-menu__navtext { color: var(--textDefault); line-height: 1.2; padding-top: 3px; }
.user-menu__navlink:hover { background: var(--dropdownItemHoverBG); }
.user-menu__navlink:hover svg { fill: var(--ep-primary); }
.user-menu__navlink:hover i { color: var(--ep-primary); }
.user-menu__navlink:hover .user-menu__navtext { color: var(--textStrong); }
.user-menu__footer { display: flex; justify-content: center; border-top: 1px solid var(--borderColor); }
.btn.user-menu__logout { display: flex; justify-content: center; align-items: center; border-color: var(--ep-primary); color: #fff; background: var(--ep-primary); width: 100%; }
.btn.user-menu__logout svg { width: 1.5rem; height: 1.5rem; margin-right: .5rem; fill: #fff; }
.btn.user-menu__logout:hover { color: #fff; background: var(--ep-primary-hover); border-color: var(--ep-primary-hover); }
/* Dark Mode */
.dark-mode .user-menu__navlink:hover { background: transparent; color: var(--textStrong); font-weight: 600; }
.dark-mode .user-menu__navlink:hover .user-menu__navtext { color: var(--textStrong); font-weight: 600; }
/* =Custom Actions Drop Down Menu*/
.ep-custom-menu__navitem.k-disabled { opacity: .4; }
.ep-custom-menu__nav { margin: 0; padding: 0; list-style: none; }
.ep-custom-menu__navlink { position: relative; line-height: 1; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; padding: .4rem .8rem; text-decoration: none; font-size: .9rem; color: var(--textDefault) }
.ep-custom-menu__navlink svg { width: 1.5rem; height: 1.5rem; margin-right: .5rem; fill: var(--textDefault); }
.ep-custom-menu__navlink i { width: 1.5rem; height: 1.5rem; margin-right: .5rem; color: var(--textDefault); font-size: 1.4em; text-align: center; }
.ep-custom-menu__navtext { color: var(--textDefault); }
.ep-custom-menu__navlink:hover { background: var(--dropdownItemHoverBG); }
.ep-custom-menu__navlink:hover svg { fill: var(--ep-secondary); }
.ep-custom-menu__navlink:hover i { color: var(--ep-secondary); }
.ep-custom-menu__navlink:hover .user-menu__navtext { color: var(--textStrong); }
.ep-custom-menu .ep-separator { height: 1px; background: var(--borderColor); margin: .25rem 0; }
/* =More Button */
.ep-more .ep-button { background: none !important; border: none; min-width: var(--mdHeight) !important; width: var(--mdHeight); border-radius: 100px !important; }
.ep-more .ep-button:hover { background-color: var(--dropdownItemHoverBG) !important; }
@-webkit-keyframes fade-in-up {
0% { opacity: 0; margin-top: 10px }
to { opacity: 1; margin-top: 0 }
}
@-moz-keyframes fade-in-up {
0% { opacity: 0; margin-top: 10px }
to { opacity: 1; margin-top: 0 }
}
@-o-keyframes fade-in-up {
0% { opacity: 0; margin-top: 10px }
to { opacity: 1; margin-top: 0 }
}
@keyframes fade-in-up {
0% { opacity: 0; margin-top: 10px }
to { opacity: 1; margin-top: 0 }
}
/* --------------------*/
/* ---- =FOOTBAR ------ */
/* --------------------*/
.footbar { height: 3rem; width: calc(100% - 60px); background: var(--topRowGradLeft); display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 0; z-index: 1000; }
.sidebar-pinned .footbar { width: calc(100% - 250px); }
.footbar__left { margin: 0 var(--generalMargin); }
.footbar__right { margin: 0 var(--generalMargin); }
.footbar h2 { font-size: var(--txtSizeLarge); font-weight: 500; color: var(--textStrong); }
/* --------------------*/
/* ---- =SIDEBAR =MENU ------ */
/* --------------------*/
/*.sidebar__header { background: var(--topRowGradLeft); height: var(--topRowHeight); display: flex; align-items: center; justify-content: flex-start; gap: 3rem; padding: 0 .4rem; flex-direction: row-reverse; }*/
/*.m-menu { overflow: hidden; height: calc(100vh - 3.5rem); }*/
.m-menu { overflow: auto; height: calc(100vh - var(--topRowHeight)); }
.m-menu__nav { list-style: none; padding: 0; margin: 0; }
.m-menu__subnav { padding: 0; margin: 0; list-style: none; }
.m-menu__item { position: relative; }
.m-menu__item.-disabled { outline: none; cursor: default; opacity: 0.65; pointer-events: none; }
.m-menu__link { display: flex; align-items: center; text-decoration: none; position: relative; outline: none; padding: 0.5rem 1.5rem 0.5rem 1.8rem; cursor: pointer; }
.m-menu__link:hover { text-decoration: none; background: rgb(255 255 255 / 5%); }
.sidebar:hover .m-menu__link,
.sidebar-open .m-menu__link { padding-right: .7rem; }
.sidebar-open .m-menu__link { pa }
.m-menu__text { font-weight: 600; color: hsl(var(--shadeH), var(--shadeS), 72%); font-size: 1em; white-space: normal; overflow: hidden; text-overflow: ellipsis; /*width: 65%;*/ transition: color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.2s linear 0s !important; margin-right: auto; }
.m-menu__icon { display: inline-block; line-height: 20px; color: var(--sidebarMenuText); font-size: 1.2em; width: 20px; height: 20px; text-align: center; }
.m-menu__icon svg { width: 1.2em; height: 1.2em; fill: var(--sidebarMenuText); transition: fill 0.1s linear 0s !important; }
.m-menu__arrow { display: inline-block; position: absolute; left: .5rem; }
.m-menu__arrow svg { width: 1em; height: 1em; fill: var(--sidebarMenuText); transition: fill 0.1s linear 0s !important; }
.m-menu__bullet { width: 20px; height: 1em; display: inline-block; text-align: center; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.m-menu__bullet:before { content: ""; background: var(--sidebarMenuText); width: 4px; height: 4px; display: inline-block; border-radius: 50px; line-height: 0; transition: all 0.1s linear 0s !important; }
.themestyle-minimal:not(.dark-mode) .m-menu__link:hover { background-color: hsl(var(--shadeH), var(--shadeS), 90%); color: hsl(var(--shadeH), var(--shadeS), 35%); }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link > .m-menu__text { color: hsl(var(--shadeH), var(--shadeS), 45%); }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link.-is-active > .m-menu__text { color: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link.-is-active > .m-menu__arrow svg { fill: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link.-is-active > .m-menu__icon { color: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link.-is-active > .m-menu__icon svg { fill: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item > .m-menu__link.-is-active > .m-menu__bullet:before { background: #fff; }
/*.themestyle-minimal .menu > li:hover > a svg { fill: hsl(var(--shadeH), var(--shadeS), 35%); }*/
/* HOVER STATE */
.m-menu__item:hover > .m-menu__link > .m-menu__text { color: #fff; }
.m-menu__item:hover > .m-menu__link > .m-menu__arrow svg { fill: #fff; }
.m-menu__item:hover > .m-menu__link > .m-menu__icon { color: #fff; }
.m-menu__item:hover > .m-menu__link > .m-menu__icon svg { fill: #fff; }
.m-menu__item:hover > .m-menu__link > .m-menu__bullet:before { background: #fff; }
.m-menu__item:hover > .m-menu__link.-is-active > .m-menu__text { color: #fff; }
.m-menu__item:hover > .m-menu__link.-is-active > .m-menu__arrow svg { fill: #fff; }
.m-menu__item:hover > .m-menu__link.-is-active > .m-menu__icon svg { fill: #fff; }
.m-menu__item:hover > .m-menu__link.-is-active > .m-menu__bullet:before { background: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link > .m-menu__text { color: #333; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link > .m-menu__arrow svg { fill: #333; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link > .m-menu__icon { color: #333; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link > .m-menu__icon svg { fill: #333; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link > .m-menu__bullet:before { background: #333; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link.-is-active > .m-menu__text { color: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link.-is-active > .m-menu__arrow svg { fill: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link.-is-active > .m-menu__icon { color: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link.-is-active > .m-menu__icon svg { fill: #fff; }
.themestyle-minimal:not(.dark-mode) .m-menu__item:hover > .m-menu__link.-is-active > .m-menu__bullet:before { background: #fff; }
/* OPEN STATE */
.m-menu__item.-is-open > .m-menu__link > .m-menu__arrow svg { transform: rotateZ(90deg); transition: all 0.3s ease; fill: #fff; }
.m-menu__item.-is-open > .m-menu__submenu { display: block; }
.m-menu__item.-is-open > .m-menu__toggle .m-menu__text,
.m-menu__item.-is-open > .m-menu__link > .m-menu__icon { color: #fff; }
.m-menu__item.-is-open > .m-menu__toggle .m-menu__arrow svg,
.m-menu__item.-is-open > .m-menu__toggle .m-menu__icon svg { fill: #fff; }
/* Hide the submenus if the sidebar is not pinned */
.layout-wrapper:not(.sidebar-pinned) .sidebar .m-menu__item.-is-open > .m-menu__submenu { display: none; }
.layout-wrapper:not(.sidebar-pinned) .sidebar:hover .m-menu__item.-is-open > .m-menu__submenu { display: block; }
.layout-wrapper:not(.sidebar-pinned) .sidebar:not(:hover) .m-menu__item.-is-open:has(.-is-active) { background: var(--ep-primary); }
.themestyle-minimal:not(.dark-mode) m-menu__item.-is-open > .m-menu__link > .m-menu__arrow svg { fill: #333; }
.themestyle-minimal:not(.dark-mode) m-menu__item.-is-open > .m-menu__toggle .m-menu__text,
.themestyle-minimal:not(.dark-mode) m-menu__item.-is-open > .m-menu__link > .m-menu__icon { color: #333; }
.themestyle-minimal:not(.dark-mode) m-menu__item.-is-open > .m-menu__toggle .m-menu__arrow svg,
.themestyle-minimal:not(.dark-mode) m-menu__item.-is-open > .m-menu__toggle .m-menu__icon svg { fill: #333; }
/* SUBMENU */
.m-menu__submenu { display: none; float: none; margin: 0; padding: 0; background: rgba(13, 27, 45, 0.55); }
.m-menu__nav > .m-menu__item > .m-menu__submenu { border-left: 3px solid var(--ep-primary); }
.themestyle-minimal .m-menu__submenu { background: rgba(13, 27, 45, 0.05) }
.m-menu__submenu .m-menu__item { padding: 0; }
.m-menu__submenu .m-menu__text { font-weight: 400; }
.m-menu__submenu .m-menu__icon svg { width: 1em; height: 1em; }
.m-menu__submenu .m-menu__submenu .m-menu__subnav { padding: 0; }
.m-menu__submenu .m-menu__link { padding-left: 2.5rem; }
.m-menu__submenu .m-menu__arrow { left: 1.2rem; }
.m-menu__submenu .m-menu__submenu .m-menu__link { padding-left: 3.5rem; }
.m-menu__submenu .m-menu__submenu .m-menu__arrow { left: 2.2rem; }
.m-menu__submenu .m-menu__submenu .m-menu__bullet:before { content: ""; background: none; border: 1px solid var(--sidebarMenuText); width: 5px; height: 5px; display: inline-block; border-radius: 50px; line-height: 0; transition: all 0.1s linear 0s !important; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__link { padding-left: 4.5rem; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__arrow { left: 3.2rem; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__bullet:before { content: ""; background: var(--sidebarMenuText); border: none; width: 4px; height: 4px; display: inline-block; border-radius: 0; line-height: 0; transition: all 0.1s linear 0s !important; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__link { padding-left: 5.5rem; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__arrow { left: 4.2rem; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__link { padding-left: 6.5rem; }
.m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__submenu .m-menu__arrow { left: 5.2rem; }
/* ACTIVE STATE */
.-is-active .m-menu__text,
.-is-active .m-menu__icon,
.-is-active:hover .m-menu__text,
.-is-active:hover .m-menu__icon { color: #fff; }
.-is-active .m-menu__icon svg { fill: #fff; }
.-is-active:hover .m-menu__icon svg { fill: #fff; }
.-is-active .m-menu__bullet:before { background: #fff !important; }
.-is-active:hover .m-menu__bullet:before { background: #fff !important; }
a.m-menu__link.-is-active,
a.m-menu__link.-is-active:hover { background: var(--ep-primary) !important; }
.ep-drawer .actions-drawer .drawer__body { padding: 0; }
.actions-menu { height: auto; }
.actions-menu .m-menu__nav { margin: 0; }
.actions-menu .m-menu__toggle > .m-menu__arrow { position: static; }
.actions-menu .m-menu__toggle > .m-menu__text { width: auto; margin: 0; }
.actions-menu .m-menu__link { padding: 0.5rem .5rem .5rem 1rem; height: auto; align-items: flex-start; gap: .5rem; }
.actions-menu .m-menu__text { width: auto; margin: 0; white-space: normal; color: var(--textDefault); font-weight: 400; }
.actions-menu .m-menu__icon { color: var(--ep-primary); }
.actions-menu .m-menu__pin { color: var(--sidebarMenuText); display: inline-block; line-height: 1; font-size: 1.2em; margin-left: .5rem; opacity: 0; transform: rotate(45deg); transition: .1s all ease-in; margin-left: auto; }
.actions-menu .m-menu__pin:hover { color: var(--ep-primary); }
.actions-menu .m-menu__pin-pinned { margin-left: auto; color: var(--ep-primary); opacity: 1; transition: .2s all ease-in; }
.actions-menu .m-menu__pin-pinned:hover { opacity: .75; }
.actions-menu .m-menu__item:hover > .m-menu__link,
.actions-menu .m-menu__item.-pinned > .m-menu__link { background: var(--shade94); }
.actions-menu .m-menu__item:hover > .m-menu__link > .m-menu__arrow svg { fill: var(--textLight); }
.actions-menu .m-menu__item:hover > .m-menu__link > .m-menu__icon { color: var(--ep-primary) !important; }
.actions-menu .m-menu__item:hover > .m-menu__link > .m-menu__text { color: var(--textStrong); }
.actions-menu .m-menu__item:hover > .m-menu__link > .m-menu__pin { color: var(--textStrong); opacity: .2; }
.actions-menu .m-menu__item:hover > .m-menu__link > .m-menu__pin:hover { opacity: 1; }
.actions-menu .m-menu__item.-is-open > .m-menu__toggle .m-menu__arrow svg,
.actions-menu .m-menu__item.-is-open > .m-menu__toggle .m-menu__icon svg { fill: var(--textDefault); }
.actions-menu .m-menu__item.-is-open > .m-menu__toggle .m-menu__text { color: var(--textStrong); }
.actions-menu .m-menu__item.-has-children { padding-left: 1.7rem; }
.actions-menu .m-menu__submenu { background: transparent; }
.actions-menu .m-menu__submenu .m-menu__item { padding: 0 0 0 .5rem; }
.actions-menu .m-menu__subnav { padding: 0; margin: 0 0 0 0; list-style: none; border-left: 2px solid var(--shade90); }
.actions-menu .m-menu__submenu .m-menu__submenu .m-menu__link { padding: .5rem; }
.actions-menu .m-menu__submenu .m-menu__item.-has-children { padding: 0 0 0 2.3rem; }
.actions-menu .m-menu__item.-disabled { opacity: .4; }
.-pinned .m-menu__text,
.-pinned .m-menu__icon { color: var(--ep-primary); }
.-pinned .m-menu__pin { color: var(--ep-primary); opacity: 1; transform: rotate(0); }
.actions-menu .m-menu__item.-pinned:hover > .m-menu__link > .m-menu__text,
.actions-menu .m-menu__item.-pinned:hover > .m-menu__link > .m-menu__icon { color: var(--ep-primary); }
.actions-menu .m-menu__item.-pinned:hover > .m-menu__link > .m-menu__pin { color: var(--ep-primary); opacity: 1; }
.browser-customization-menu .m-menu__text { color: var(--textDefault); }
@media (max-width: 1299px) {
.top-row .main-logo { display: none; }
.top-row .icon-logo { display: block; }
.top-row .logo-container { width: auto; }
.sidebar { width: 250px; z-index: 10000; left: 0 !important; -webkit-transform: translate3d(-250px, 0px, 0px) !important; transform: translate3d(-250px, 0px, 0px) !important; }
.layout-content { transition: transform 0.25s ease; -webkit-transition: -webkit-transform 0.25s ease; }
.sidebar-open .layout-content { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); -ms-transform: translate(0, 0); overflow: hidden; }
.sidebar-open .sidebar { -webkit-transform: translate3d(0px, 0px, 0px) !important; transform: translate3d(0px, 0px, 0px) !important; }
.toggle-sidebar { display: block; }
.pin { display: none; }
.toolbar { width: calc(100% - (var(--generalMargin)*2) ); width: 100%; gap: 1rem; }
.ep-toolbar .k-toolbar .ep-dropdownlist.label-above { flex-direction: row-reverse; align-items: center; }
.ep-toolbar .k-toolbar .ep-control__wrapper { min-width: 100px; }
.ep-toolbar .k-toolbar label { align-self: center; margin-right: .5rem; }
}
@media only screen and (min-width: 1300px) {
.layout-wrapper .layout-content { margin-left: var(--sidebarMiniWidth); }
.layout-wrapper.no-sidebar .layout-content { margin-left: 0; }
.menutype-horizontal .layout-content { margin-left: 0; }
.sidebar-pinned { padding-left: 0; }
.sidebar-pinned .sidebar { transform: translate(var(--sidebarOffset), 0) !important; width: var(--sidebarWidth); transition: .15s all ease-in; }
.sidebar-pinned .m-menu__link,
.sidebar-hoverable .sidebar:hover .m-menu__link { padding-right: 0.7rem; }
/*.sidebar:hover .m-menu__link { padding-right: 0; }*/
.sidebar-pinned .main { padding-left: var(--sidebarWidth); }
.layout-wrapper.sidebar-pinned .layout-content { margin-left: var(--sidebarWidth); transition: margin-left 0.3s; }
.pin { display: flex; }
.layout-wrapper.sidebar-hidden .layout-content { margin-left: 0; }
.sidebar-pinned .toolbar { width: calc(100% - (var(--sidebarWidth))); }
.toolbar__title { width: 100%; }
.k-window .browser-header .toolbar__left .ep-toolbar { margin-left: 0; }
}
@media (hover: hover) and (min-width: 1300px) {
.sidebar-hoverable .sidebar:hover { width: calc(var(--sidebarWidth) + 70px); }
}
@media only screen and (min-width: 990px) {
.toolbar { flex-wrap: nowrap; }
}
@media (max-width: 989px) {
.ep-workspace__icon,
.ep-workspace__company { display: none; }
.toolbar { width: calc(100vw - var(--scrollbarWidth)); } /* 14px*/
}
/* --------------------*/
/* ---- =PANELS ------ */
/* --------------------*/
.ep-panel > .ep-panel__content > .ep-panel__body { overflow: unset; box-sizing: border-box; }
.ep-panel.-overflow > .ep-panel__content > .ep-panel__body { overflow: auto; }
.ep-panel { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--panelBG); color: var(--textDefault); background-clip: border-box; border-radius: var(--borderRadius); border: 1px solid var(--borderColor); margin: 0 0 var(--generalMargin) 0; box-sizing: border-box; gap: 0 !important }
.ep-panel.has-shadow { box-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12) !important; border: none; }
.ep-panel__header { padding: .5rem 1rem; height: 38px; background-color: var(--panelHeaderBG); border-bottom: 1px solid var(--borderColor); border-radius: var(--borderRadius); display: flex; justify-content: space-between; align-items: center; transition: .25s border-radius cubic-bezier(0.250, 0.460, 0.450, 0.940); box-sizing: border-box; gap: 1rem; }
.themestyle-classic .ep-panel__header { border-top: 2px solid var(--ep-primary); border-radius: 0; }
.-open .ep-panel__header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ep-panel__title { font-size: var(--txtSizeNormal); color: var(--textStrong); font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.dark-mode .ep-panel__title { color: #fff; }
.ep-panel__content { max-height: 0; transition: .25s all cubic-bezier(0.250, 0.460, 0.450, 0.940); overflow: hidden; opacity: 0; }
.-open > .ep-panel__content { max-height: 1000px; opacity: 1; transition: .25s all cubic-bezier(0.250, 0.460, 0.450, 0.940); }
.ep-panel__body { padding: .5rem 1rem; color: var(--textDefault); overflow: auto; }
.ep-panel__actions { line-height: 0; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.ep-panel-close { opacity: 1; color: var(--textDefault); }
/* IF THE PANEL IS COLLAPSIBLE */
.ep-toggle { font-size: 18px; cursor: pointer; width: 28px; height: 28px; text-align: center; line-height: 0; border-radius: 100% !important; transition: .15s all ease-in; opacity: .5; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; }
.ep-toggle:hover { opacity: 1; background: var(--shade90) !important; }
.toggle-arrow { height: 12px; width: 12px; position: relative; cursor: pointer; border-radius: 4px; }
.toggle-arrow__left { position: absolute; top: 50%; left: 0; width: 60%; height: 2px; display: block; transform: rotate( 40deg ); border-radius: 2px; }
.toggle-arrow__left:after { content: ""; background-color: var(--textStrong); width: 100%; height: 100%; display: block; border-radius: 10px; transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; }
.toggle-arrow__right { position: absolute; top: 50%; right: -0px; width: 60%; height: 2px; display: block; transform: rotate( -40deg ); border-radius: 2px; }
.toggle-arrow__right:after { content: ""; background-color: var(--textStrong); width: 100%; height: 100%; display: block; border-radius: 10px; transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; }
.ep-panel.-open > .ep-panel__header .toggle-arrow__left:after { transform-origin: center center; transform: rotate(-80deg); }
.ep-panel.-open > .ep-panel__header .toggle-arrow__right:after { transform-origin: center center; transform: rotate(80deg); }
/* IF THE PANEL HAS FOOTER */
.ep-panel__footer { padding: .5rem 1rem; background-color: var(--panelHeaderBG); border-top: 1px solid var(--borderColor); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); display: flex; justify-content: space-between; align-items: center; color: var(--textDefault); }
.ep-panel__footer.-center { justify-content: center; }
.ep-panel__footer.-right { justify-content: flex-end; }
/* --------------------*/
/* ---- =FIELDSET ------ */
/* --------------------*/
.ep-fieldset { border-radius: var(--borderRadius); border-color: var(--borderColor); border-width: 1px; margin: 0; padding: var(--generalPadding) 0; border-style: solid; border: none; box-sizing: border-box; }
.ep-fieldset:only-child { margin: 0; }
.ep-layout:not(.direction-column) > .ep-fieldset + .ep-fieldset { margin-left: var(--generalMargin); }
.ep-layout.direction-column > .ep-fieldset { margin-bottom: var(--generalMargin) }
.ep-fieldset__title { font-size: var(--txtSizeLarge); color: var(--textStrong); font-weight: 600; border-bottom: 2px solid var(--borderColor); display: block; width: 100%; padding: 0; }
.ep-fieldset__title:after { content: ""; display: block; width: 70px; height: 5px; background: var(--ep-primary); margin-top: .3rem; transform: translateY(3px); border-radius: var(--borderRadius); }
.themestyle-classic .ep-fieldset__title { border-color: var(--ep-primary) }
.themestyle-classic .ep-fieldset__title:after { width: 0px; }
.themestyle-minimal .ep-fieldset__title:after { width: 0px; }
.ep-fieldset.-light { border: none; background: var(--mainBG); }
.ep-fieldset.-light .ep-fieldset__title { font-size: calc(1.15 * var(--txtSizeNormal)); color: var(--textStrong); font-weight: 800; border: none; display: block; width: 100%; }
.ep-fieldset.-light .ep-fieldset__title:after { display: none; }
.dark-mode .ep-fieldset.-light { border: none; background: var(--panelHeaderBG); }
/* Nested */
.ep-fieldset .ep-fieldset,
.ep-drawer .ep-fieldset { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.ep-fieldset .ep-fieldset .ep-fieldset__title,
.ep-drawer .ep-fieldset .ep-fieldset__title { font-size: 1.15rem; border-bottom: 1px solid var(--borderColor); }
.ep-fieldset .ep-fieldset .ep-fieldset__title:after,
.ep-drawer .ep-fieldset .ep-fieldset__title:after { width: 35px; }
/* --------------------*/
/* ---- =TABS ------ */
/* --------------------*/
/* SCROLLBARS OR NOT*/
.ep-tab > .ep-tab__host > .k-tabstrip-content,
.ep-tab > .ep-tab__host.k-tabstrip > .k-content { overflow: initial; }
.ep-tab.-overflow > .ep-tab__host > .k-tabstrip-content,
.ep-tab.-overflow > .ep-tab__host.k-tabstrip > .k-content { overflow: auto; }
.ep-tabItem { min-height: 100%; padding: var(--generalPadding); }
.ep-tabItem.-no-padding { padding: 0; }
.k-tabstrip-content,
.k-tabstrip > .k-content { padding: 0; }
.ep-tab.-no-padding .k-tabstrip-content { padding: 0; }
.k-tabstrip { margin: 0 0 var(--generalMargin) 0; font-family: var(--fontFamily); }
.k-tabstrip:only-child { margin: 0; }
.k-tabstrip-items-wrapper { border-color: var(--borderColor); }
.k-tabstrip-items { border-width: 1px; color: var(--textDefault); background: var(--tabsHeaderBG); border-top-left-radius: 0; border-top-right-radius: 0; }
.k-tabstrip-items:has(:focus-visible) { outline: 1px dashed var(--textDefault); }
.k-tabstrip-item.k-item { color: var(--textDefault); }
.k-tabstrip-items .k-link { padding-block: .3rem; padding-inline: .75rem; }
.density-compact .k-tabstrip-items .k-link { padding-block: 0.15rem; padding-inline: .5rem; }
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item { border-width: 0 0 1px 0; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); margin: 0 !important; }
.k-tabstrip-item.k-item:hover { border-color: transparent; color: var(--ep-primary); background: var(--tabHoverBG); border-bottom: 1px solid transparent; }
.k-tabstrip-item.k-item.k-active { border-color: var(--tabsBorder); color: #fff; background-color: var(--tabActiveBG); border-width: 0 0 2px 0; }
.ep-tab:not(.-contains-nested) .k-tabstrip-top > .k-tabstrip-item.k-item.k-active,
.ep-tab:not(.-contains-nested) .k-tabstrip-top > .k-tabstrip-item.k-item.k-item:active { margin-bottom: 0; border-bottom-width: 1px; border-bottom-color: transparent !important; }
.k-tabstrip-content,
.k-tabstrip > .k-content { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--tabsBodyBG); }
.ep-tabItem.-altbg { background: var(--tabsBodyBG_alt); }
.dark-mode .k-tabstrip > .k-content { color: #fff; background-color: var(--panelBG); }
/* Nested tabs */
.ep-tabItem.-nested .k-tabstrip-items { border: none; background: hsl(207deg 36% 89%); border-radius: 0; }
.ep-tabItem.-nested .k-tabstrip.k-tabstrip-top .k-tabstrip-items { padding: 1rem 1rem 0 1rem; }
.ep-tabItem.-nested { margin: -1rem !important; width: calc(100% + 2rem); }
.dark-mode .ep-tabItem.-nested .k-tabstrip-items { background: hsl(207deg 36% 9%); }
/* Vertical tabs */
.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item { border-right-width: 2px; }
.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-active { margin-right: 0; border-bottom-color: transparent; border-right-width: 2px; border-top-left-radius: var(--borderRadius); border-bottom-left-radius: var(--borderRadius); }
.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item { border-left-width: 2px; }
.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-active { margin-left: 0; border-bottom-color: transparent; border-left-width: 2px; border-top-right-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); }
.k-tabstrip-items-wrapper .k-item:focus,
.k-tabstrip-items-wrapper .k-item.k-focus { box-shadow: none; }
/*THEME MINIMAL TABS */
.themestyle-minimal .k-tabstrip-items .k-item { border: none; border-radius: 0; }
.themestyle-minimal .k-tabstrip-items .k-item.k-active { color: #fff; background-color: var(--ep-primary); border: none; }
.themestyle-minimal .k-tabstrip-items .k-item:not(.k-active):hover { background-color: var(--tabsBG); }
.themestyle-minimal .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
.themestyle-minimal .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active { margin-bottom: -1px; border-color: var(--borderColor); border-width: 1px; border-bottom-color: var(--tabsBG) !important; }
.k-tabstrip-top > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 0 1px 0; }
.k-tabstrip-left > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 1px 0 0; }
.k-tabstrip-right > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 0 0 1px; }
.k-tabstrip-bottom > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 1px 0 0 0; }
.themestyle-classic .ep-tab:has(.ep-tabItem.-altbg) > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-item.k-active { background: var(--tabsBodyBG_alt); }
.themestyle-classic .k-tabstrip-top .k-tabstrip-item.k-item.k-active { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--tabsBodyBG); border-width: 1px 1px 0 1px; margin-bottom: -2px !important; }
.themestyle-classic .k-tabstrip-top > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 0 2px 0; }
.themestyle-classic .k-tabstrip-bottom .k-tabstrip-item.k-item.k-active { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--tabsBodyBG); border-width: 0 1px 1px 1px; margin-top: -2px !important; }
.themestyle-classic .k-tabstrip-bottom > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 2px 0 0 0; }
.themestyle-classic .k-tabstrip-left .k-tabstrip-item.k-item.k-active { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--tabsBodyBG); border-width: 1px 0 1px 1px; margin-right: -2px !important; }
.themestyle-classic .k-tabstrip-left > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 2px 0 0; }
.themestyle-classic .k-tabstrip-right .k-tabstrip-item.k-item.k-active { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--tabsBodyBG); border-width: 1px 1px 1px 0; margin-left: -2px !important; }
.themestyle-classic .k-tabstrip-right > .k-tabstrip-items-wrapper { border-color: var(--tabsBorder); border-width: 0 0 0 2px; }
.source-filename { font-size: var(--txtSizeXLarge); color: var(--textStrong); }
/*:not(pre) > code[class*="language-"],
pre[class*="language-"] { background: hsl(207deg 36% 95%); }
.dark-mode :not(pre) > code[class*="language-"],
.dark-mode pre[class*="language-"] { background: hsl(207deg 36% 5%); }
code[class*="language-"],
pre[class*="language-"] { color: #333; }
.dark-mode code[class*="language-"],
.dark-mode pre[class*="language-"] { color: #fff; text-shadow: 0 1px #000; }
.dark-mode .token.operator,
.dark-mode .token.entity,
.dark-mode .token.url,
.dark-mode .language-css .token.string,
.dark-mode .style .token.string { color: #9a6e3a; background: hsla(0, 0%, 0%, .5); }
.dark-mode .param-name { background-color: hsl(0deg 1% 3%); }*/
/* --------------------*/
/* ---- =FILE UPLOAD / SELECT ------ */
/* --------------------*/
.ep-fileselect-container { --dropzoneRadius: 1rem; }
.themestyle-minimal .ep-fileselect-container { --dropzoneRadius: var(--borderRadius); }
.ep-fileselect-container.-full { height: 100%; }
.ep-fileselect-container.-full .ep-fileselect { height: 100%; }
.ep-fileselect-container.-full .ep-fileselect .ep-control__wrapper { height: 100%; }
.ep-fileselect-container.-full .k-upload { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--dropzoneRadius); }
.ep-fileselect-container.-full .k-upload .k-dropzone { flex-direction: column; gap: 1rem; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: var(--dropzoneRadius); display: none; }
.ep-fileselect-container.-full .k-upload.k-upload-empty .k-dropzone { display: flex; }
.ep-fileselect-container.-full .k-upload .k-dropzone .k-dropzone-hint { flex: initial; }
.ep-fileselect-container.-full .k-upload .k-upload-files { border: none; width: 100%; margin: 2rem; }
.ep-fileselect-container.-full .k-upload .k-file { border: 1px solid var(--ep-primary); background: hsla(var(--ep-primaryH), var(--ep-primaryS), var(--ep-primaryL), 2%); border-radius: var(--dropzoneRadius); }
.ep-fileselect-container.-full .k-upload .k-multiple-files-wrapper,
.ep-fileselect-container.-full .k-upload .k-file-single > .k-file-info { align-items: center; display: flex; font-size: 1.15rem; margin: 0; color: var(--textDefault); justify-content: center; }
.ep-fileselect-container.-full .k-upload .k-upload-files .k-file-single { align-items: center; gap: 1rem; }
.ep-fileselect-container.-full .k-upload .k-file-icon-wrapper { color: var(--ep-primary); }
.ep-fileselect-container.-full .k-svg-icon { width: 2rem; height: 2rem; }
.k-upload .k-dropzone,
.k-upload .k-upload-dropzone { background-color: var(--panelHeaderBG); }
.ep-progressbar-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ep-progressbar-container .k-progressbar { height: 50px; }
/* HTML: */
.ep-progressbar-loader { color: var(--ep-primary); width: 4px; aspect-ratio: 1; border-radius: 50%; box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0; transform: translateX(-38px); animation: l21 .5s infinite alternate linear; }
@keyframes l21 {
50% { box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px }
100% { box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px }
}
/* --------------------*/
/* ---- =FILE MANAGER EDITOR ------ */
/* --------------------*/
.k-filemanager { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--filemanagerBG); }
.k-filemanager .k-splitbar { border-color: var(--borderColor); }
.k-filemanager-breadcrumb { background: var(--filemanagerHeaderBG); }
.k-filemanager .k-treeview { color: var(--textStrong); }
.k-filemanager .k-treeview-leaf.k-selected { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
.k-filemanager-search-tool .k-textbox { padding: 0; }
.k-filemanager-search-tool .k-textbox .k-input-inner { padding-inline: 0.2rem; }
.themestyle-minimal .k-filemanager-search-tool .k-textbox .k-input-inner,
.themestyle-minimal .k-filemanager-search-tool .k-textbox { background: none !important; }
.k-filemanager .k-breadcrumb { border-color: var(--borderColor); color: var(--textStrong); }
.k-filemanager .k-listview { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--filemanagerBG); }
.k-filemanager-grid { background-color: var(--filemanagerBG); color: var(--textStrong); border-color: var(--borderColor); }
/* --------------------*/
/* ---- =LIST EDITOR ------ */
/* --------------------*/
.ep-listeditor { margin: 0; padding: var(--generalPadding); list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--generalMargin); }
.ep-listeditor .listeditor-item { border-radius: var(--borderRadius); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; box-sizing: border-box; transition: all .2s ease-in-out; cursor: pointer; background: var(--cardBG); }
.ep-listeditor .listeditor-item:hover { box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px; }
.ep-listeditor .listeditor-item__header { padding: var(--generalPadding); padding-right: 2rem; background: var(--buttonBG); color: var(--buttonColor); font-weight: 600; font-size: 1.1rem; border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); position: relative; min-height: 40px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }
.listeditor-item .listeditor-item__header-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listeditor-item .listeditor-item__remove { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: block; width: 1.8rem; height: 1.8rem; font-size: 1rem; color: var(--buttonColor); background: rgb(255 255 255 / .4); border-radius: 100px; text-align: center; line-height: 1.8rem; opacity: 0; transition: all .1s ease-in-out; }
.listeditor-item__remove:hover { background: #fff; }
.listeditor-item:hover .listeditor-item__remove { opacity: 1; }
.listeditor-item.-primary .listeditor-item__remove { color: var(--ep-primary); }
.dark-mode .listeditor-item .listeditor-item__remove { color: var(--buttonBG); }
.ep-listeditor .-active .listeditor-item__header, .ep-listeditor .listeditor-item.-primary .listeditor-item__header { background: var(--ep-primary); color: #fff; }
.ep-listeditor .listeditor-item__body { padding: var(--generalPadding); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); }
/*.dark-mode .ep-listeditor .listeditor-item__body { background: var(--panelBG) }*/
.ep-listeditor .listeditor__data { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; color: var(--textDefault); min-height: 1.5rem; }
.ep-listeditor .listeditor__data:last-child { margin: 0; }
.ep-listeditor .listeditor-item__body i[class*="fa"] { position: absolute; left: 0; top: .1rem; color: var(--buttonColor); }
.ep-listeditor .listeditor-item__body .listeditor-item:nth-child(2) i[class*="fa"],
.ep-listeditor .-active i[class*="fa"] { color: var(--ep-primary); }
.ep-listeditor .listeditor-item.-create { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e1e5e6' stroke-width='4' stroke-dasharray='6%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); box-shadow: none; color: var(--textDefault); display: flex; justify-content: center; align-items: center; transition: none; min-height: 200px; border: 1px solid var(--cardBG); }
.ep-listeditor .listeditor-item.-create .listeditor__action { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.1rem; }
.ep-listeditor .listeditor__actiontext { text-align: center; }
.ep-listeditor .listeditor-item.-create i[class*="fa"] { position: static; color: var(--textDefault); margin-top: .5rem; font-size: 1.5rem; }
.ep-listeditor .listeditor-item.-create:hover { background-image: none; background-color: var(--shade94); border: 1px solid var(--ep-primary); color: var(--ep-primary); }
.ep-listeditor .listeditor-item.-create:hover i[class*="fa"] { color: var(--ep-primary); }
.ep-listeditor.-vertical { grid-template-columns: 1fr; }
.ep-listeditor.-vertical .listeditor-item.-create { order: 1000; min-height: initial; padding: 0.5rem 0; }
.ep-listeditor.-vertical .listeditor-item.-primary { order: -1000; }
.ep-listeditor.-vertical .listeditor-item.-create .listeditor__action { flex-direction: row-reverse; gap: 1rem; }
.ep-listeditor.-vertical .listeditor-item.-create i[class*="fa"] { margin-top: 0; font-size: 1.4rem; }
/* --------------------*/
/* ---- =LISTVIEW ------ */
/* --------------------*/
.ep-listview .k-listview-item { margin-bottom: 1rem; }
/* --------------------*/
/* ---- =DROP HINT ------ */
/* --------------------*/
.k-drag-clue { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); z-index: 10000000 !important; }
.k-drop-hint.k-drop-hint-h { z-index: 10000000 !important; }
/* --------------------*/
/* ---- =DRAWER ------ */
/* --------------------*/
.ep-drawer { position: fixed; right: 0; top: 0; height: 100vh; width: 100%; z-index: 10002; }
.ep-drawer__content { width: 650px; max-width: 100vw; position: fixed; right: 0; top: 0; height: 100vh; background-color: var(--shade98); display: flex; flex-direction: column; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; }
.ep-drawer__content.actions-drawer { width: 350px; }
.dark-mode .ep-drawer__content { background-color: var(--sidebarBG); }
.ep-drawer::before { content: ""; position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: rgba(0,0,0, .5); }
.ep-drawer .drawer__header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: none; border-radius: 0; position: relative; }
.ep-drawer .drawer__header .blazor-dialog-title { flex: 1; }
.ep-drawer .drawer__header h2 { font-size: var(--txtSizeLarge); color: var(--textStrong); font-weight: 600; border-bottom: 2px solid var(--borderColor); display: block; width: 100%; }
.ep-drawer .drawer__header h2:after { content: ""; display: block; width: 3rem; height: 3px; background: var(--ep-primary); margin-top: .5rem; transform: translateY(2px); }
.ep-drawer .drawer__header h2 i { margin-right: 1rem; font-size: 2rem; color: var(--ep-primary); }
.ep-drawer .drawer__header .ep-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-70%); }
.ep-drawer .list-editor-detail-inner-container { display: flex; flex-direction: column; gap: 1rem; }
.ep-drawer .drawer__body { padding: 1rem; height: 100%; overflow: auto; }
.ep-drawer .drawer__footer { display: flex; justify-content: flex-end; align-items: center; padding: 1rem; border: none; }
.ep-drawer .drawer__footer:has(.footer-left) { justify-content: space-between; }
.ep-drawer__content.-size-xs { width: 280px; }
.ep-drawer__content.-size-sm { width: 350px; }
.ep-drawer__content.-size-md { width: 450px; }
.ep-drawer__content.-size-lg { width: 650px }
.ep-drawer__content.-size-xl { width: 900px; }
.ep-drawer__content.-size-xxl { width: 1100px; }
.ep-drawer__content.-size-full { width: 100vw; }
.slide-in-right { -webkit-animation: slide-in-right .2s cubic-bezier(.25,.46,.45,.94) both; animation: slide-in-right .2s cubic-bezier(.25,.46,.45,.94) both }
@-webkit-keyframes slide-in-right {
0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 }
100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 }
}
@keyframes slide-in-right {
0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 }
100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 }
}
/* --------------------*/
/* ---- =Close button for modals/drawers ------ */
/* --------------------*/
.ep-close,
.ep-close-button.k-button,
.ep-close .k-button { font-size: 18px; cursor: pointer; width: 28px; height: 28px; text-align: center; line-height: 0; border-radius: 100% !important; transition: .15s all ease-in; opacity: .5; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; }
.ep-close:hover,
.ep-close-button.k-button:hover,
.ep-close .k-button:hover { opacity: 1; background: var(--shade96) !important; }
/*.ep-close .k-button-text i[class*='fa'] { font-size: 1em; }*/
/* =Lookup Array / Master */
.ep-lookuparray,
.ep-lookupmaster { position: relative }
.ep-lookuparray.-with-buttons .k-floating-label-container .ep-textbox__input,
.ep-lookupmaster.-with-buttons .k-floating-label-container .ep-textbox__input { width: 100%; }
.ep-lookup__wrapper { position: relative; display: inline-flex; width: 100%; border: none; border-radius: 0; background: none; }
.ep-lookup__wrapper .k-dropdown-wrap { border-width: 0; }
.ep-lookup__wrapper .k-dropdown-wrap .k-select { border-top-width: 1px; border-bottom-width: 1px; border-radius: 0; border-color: var(--borderColor); }
.ep-lookup__wrapper .k-dropdown-multiple-wrap .k-select { border: none; padding: 0; }
.ep-lookup__wrapper .k-dropdown-wrap input:focus-within ~ .k-select { border-color: var(--ep-primary); }
.ep-lookuparray .k-dropdown,
.ep-lookupmaster .k-dropdown { width: 100% }
.ep-lookuparray.label-left .ep-textbox__input,
.ep-lookuparray.label-right .ep-textbox__input { width: 100%; }
.ep-lookupmaster.label-left .ep-textbox__input,
.ep-lookupmaster.label-right .ep-textbox__input { width: 100%; }
.ep-lookup-grid { width: 100%; height: 300px; top: 0; left: 0; z-index: 1500000; }
.ep-dropdown-wrapper { padding: 0 0 30px 0; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 3%), 0 4px 5px 0 rgb(0 0 0 / 4%); height: 100%; }
.ep-dropdown-wrapper .ep-grid { height: 100%; }
.ep-dropdown-wrapper .ep-grid .k-grid { max-height: 100%; }
/*.ep-dropdown-footer { background-color: var(--panelBG); width: 100%; position: absolute; bottom: 0; padding: 0; height: 30px; display: flex; }*/
.ep-dropdown-footer .k-button { transform: scale(.6); }
.ep-dropdown-footer .ep-more-data { line-height: 30px; padding: 0 .5rem; color: var(--textDefault); font-size: var(--txtSizeSmall) }
.ep-dropdown-wrapper .k-toolbar { background: var(--panelBG); }
.ep-lookupmaster .ep-control__buttons .k-button,
.ep-lookuparray .ep-control__buttons .k-button { border-color: var(--borderColor); }
/* 1 button only */
/* .ep-lookupmaster .ep-control__buttons .ep-button:only-child .k-button,
.ep-lookuparray .ep-control__buttons .ep-button:only-child .k-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: var(--borderDivider); }
.ep-lookupmaster .ep-control__buttons .ep-button:only-child:last-child .k-button,
.ep-lookuparray .ep-control__buttons .ep-button:only-child:last-child .k-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.ep-lookupmaster .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button,
.ep-lookuparray .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; border-left-width: var(--borderDivider); border-right-width: 0; }
.ep-lookupmaster .ep-control__buttons .ep-button:not(:only-child):first-child .k-button,
.ep-lookuparray .ep-control__buttons .ep-button:not(:only-child):first-child .k-button { border-radius: 0; border-left-width: 0; border-right-width: 0; }
.ep-lookupmaster .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button,
.ep-lookuparray .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; }*/
/*
.ep-textbox .ep-control__buttons .ep-button:only-child:last-child .k-button,
.ep-textbox .ep-control__buttons .ep-button:only-child:last-child .k-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.ep-textbox .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button,
.ep-textbox .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; border-left-width: var(--borderDivider); border-right-width: 0; }
.ep-textbox .ep-control__buttons .ep-button:not(:only-child):first-child .k-button,
.ep-textbox .ep-control__buttons .ep-button:not(:only-child):first-child .k-button { border-radius: 0; border-left-width: 0; border-right-width: 0; }*/
/* .ep-lookupmaster .k-textbox,
.ep-lookuparray .k-textbox { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }*/
.ep-multiple > .k-floating-label-container { flex-basis: 0; }
/* --------------------*/
/* ---- =TYPOGRAPHY ------ */
/* --------------------*/
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 400; line-height: 1.2; }
.h1, h1 { font-size: var(--txtSizeGiga); font-weight: 700; line-height: 1.2; letter-spacing: -.05rem; }
.h2, h2 { font-size: var(--txtSizeHuge); font-weight: 700; line-height: 1.25; letter-spacing: -.05rem; }
.h3, h3 { font-size: var(--txtSizeXXLarge); font-weight: 600; line-height: 1.25; letter-spacing: -.05rem; }
.h4, h4 { font-size: var(--txtSizeXLarge); font-weight: 500; line-height: 1.25; letter-spacing: -.05rem; }
.h5, h5 { font-size: var(--txtSizeLarge); font-weight: 500; line-height: 1.375; }
.h6, h6 { font-size: var(--textSizeNormal); font-weight: 500; line-height: 1.625; }
h2.divider { font-size: var(--txtSizeXLarge); position: relative; margin: 2rem 0 0.5rem 0; color: var(--textStrong); }
h2.divider span { background: var(--mainPanelBG); z-index: 1; position: relative; padding: 0 1rem 0 0; }
h2.divider:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; background: var(--textLight); top: 50%; }
span.tag.-done { background: #14c057; color: #fff; padding: .2rem .5rem; border-radius: .2rem; font-size: var(--txtSizeNormal); margin: 0 var(--generalMargin); }
a { color: var(--ep-link-color); text-decoration: none; }
a:hover { color: var(--ep-link-color-hover); }
/* --------------------*/
/* ---- =BUTTONS ------ */
/* --------------------*/
.k-button:not(.k-rounded-full) { border-radius: var(--borderRadius); }
/* FOCUS STATE */
.k-button:focus,
.k-button.k-focus,
.k-button.k-focused,
.k-button-secondary:focus,
.k-button-secondary.k-focus,
.k-button-secondary.k-focused { box-shadow: 0 0 0 3px rgb(225 240 255 / 50%); box-shadow: none; }
/* SOLID BUTTONS */
/*primary*/
.k-button-solid-primary { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
.k-button-solid-primary:hover,
.k-button-solid-primary.k-hover,
.k-button-solid-primary:focus,
.k-button-solid-primary.k-focus,
.k-button-solid-primary.k-focused { background: var(--ep-primary-hover); border-color: var(--ep-primary-hover); }
/*secondary*/
.k-button-solid-secondary { background: var(--ep-secondary); border-color: var(--ep-secondary); color: #fff; }
.k-button-solid-secondary:hover,
.k-button-solid-secondary.k-hover,
.k-button-solid-secondary:focus,
.k-button-solid-secondary.k-focus,
.k-button-solid-secondary.k-focused { background: var(--ep-secondary-hover); }
/*base*/
.k-button-solid-base { background: var(--buttonBG); border-color: var(--buttonBorder); color: var(--buttonColor); }
.k-button-solid-base:hover,
.k-button-solid-base.k-hover,
.k-button-solid-base:focus,
.k-button-solid-base.k-focus,
.k-button-solid-base.k-focused { background: var(--buttonHoverBG); border-color: var(--buttonHoverBG); }
/*success*/
.k-button-solid-success { background-color: var(--ep-success); border-color: var(--ep-success); color: #fff; }
.k-button-solid-success:hover,
.k-button-solid-success.k-hover,
.k-button-solid-success:focus,
.k-button-solid-success.k-focus,
.k-button-solid-success.k-focused { background-color: var(--ep-success-hover); border-color: var(--ep-success-hover); }
/*error*/
.k-button-solid-error { background-color: var(--ep-danger); border-color: var(--ep-danger); color: #fff; }
.k-button-solid-error:hover,
.k-button-solid-error.k-hover,
.k-button-solid-error:focus,
.k-button-solid-error.k-focus,
.k-button-solid-error.k-focused { background-color: var(--ep-danger-hover); border-color: var(--ep-danger-hover); }
/*info*/
.k-button-solid-info { background-color: var(--ep-info); border-color: var(--ep-info); color: #fff; }
.k-button-solid-info:hover,
.k-button-solid-info.k-hover,
.k-button-solid-info:focus,
.k-button-solid-info.k-focus,
.k-button-solid-info.k-focused { background-color: var(--ep-info-hover); border-color: var(--ep-info-hover); }
/*warning*/
.k-button-solid-warning { background-color: var(--ep-warning); border-color: var(--ep-warning); color: #fff; }
.k-button-solid-warning:hover,
.k-button-solid-warning.k-hover,
.k-button-solid-warning:focus,
.k-button-solid-warning.k-focus,
.k-button-solid-warning.k-focused { background-color: var(--ep-warning-hover); border-color: var(--ep-warning-hover); }
/* FLAT BUTTONS*/
.k-button-flat-primary { color: var(--ep-primary); }
.k-button-flat-secondary { color: var(--ep-secondary); }
.k-button-flat-base { color: var(--buttonColor); }
.k-button-flat-base::before { background: var(--buttonBorder); }
.k-button-flat-success { color: var(--ep-success); }
.k-button-flat-error { color: var(--ep-danger); }
.k-button-flat-info { color: var(--ep-info); }
.k-button-flat-warning { color: var(--ep-warning); }
/* LINK BUTTONS*/
.k-button-link-primary { color: var(--ep-primary); }
.k-button-link-primary:hover, .k-button-link-primary.k-hover { color: var(--ep-primary-hover); }
.k-button-link-secondary { color: var(--ep-secondary); }
.k-button-link-secondary:hover, .k-button-link-secondary.k-hover { color: var(--ep-secondary-hover); }
.k-button-link-base { color: var(--buttonColor); }
.k-button-link-base:hover, .k-button-link-base.k-hover { color: var(--buttonColor); }
.k-button-link-success { color: var(--ep-success); }
.k-button-link-success:hover, .k-button-link-success.k-hover { color: var(--ep-success-hover); }
.k-button-link-error { color: var(--ep-danger); }
.k-button-link-error:hover, .k-button-link-error.k-hover { color: var(--ep-danger-hover); }
.k-button-link-info { color: var(--ep-info); }
.k-button-link-info:hover, .k-button-link-info.k-hover { color: var(--ep-info-hover); }
.k-button-link-warning { color: var(--ep-warning); }
.k-button-link-warning:hover, .k-button-link-warning.k-hover { color: var(--ep-warning-hover); }
/* OUTLINE BUTTONS*/
.k-button-outline-primary { color: var(--ep-primary); }
.k-button-outline-primary:hover, .k-button-outline-primary.k-hover { border-color: var(--ep-primary); background-color: var(--ep-primary); }
.k-button-outline-secondary { color: var(--ep-secondary); }
.k-button-outline-secondary:hover, .k-button-outline-secondary.k-hover { border-color: var(--ep-secondary); background-color: var(--ep-secondary); }
.k-button-outline-base { color: var(--buttonColor); }
.k-button-outline-base:hover, .k-button-outline-base.k-hover { border-color: var(--buttonColor); background-color: var(--buttonColor); }
.k-button-outline-success { color: var(--ep-success); }
.k-button-outline-success:hover, .k-button-outline-success.k-hover { border-color: var(--ep-success); background-color: var(--ep-success); color: #fff; }
.k-button-outline-error { color: var(--ep-danger); }
.k-button-outline-error:hover, .k-button-outline-error.k-hover { border-color: var(--ep-danger); background-color: var(--ep-danger); }
.k-button-outline-info { color: var(--ep-info); }
.k-button-outline-info:hover, .k-button-outline-info.k-hover { border-color: var(--ep-info); background-color: var(--ep-info); color: #fff; }
.k-button-outline-warning { color: var(--ep-warning); }
.k-button-outline-warning:hover, .k-button-outline-warning.k-hover { border-color: var(--ep-warning); background-color: var(--ep-warning); color: #fff; }
/* LINK BUTTONS */
.k-button:disabled,
.k-button.k-disabled { opacity: 0.4; }
.k-button.k-button-square .k-button-text,
.k-button.k-icon-button .k-button-text { line-height: 1; }
.k-button.k-button-flat::before,
.k-button.k-button-flat::before { opacity: .15; }
.k-button.k-button-flat:hover::before,
.k-button.k-button-flat:hover::before { opacity: .25; }
.k-button-md.k-icon-button > .k-button-icon { min-width: calc( 1rem * 1.5); min-height: calc( 1rem * 1.5); }
.btn { display: inline-block; font-weight: 400; color: var(--textStrong); text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: var(--txtSizeNormal); line-height: 1.5; border-radius: var(--borderRadius); transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; cursor: pointer; height: calc(1.5em + .75rem + 2px); }
.btn.-primary { background: var(--ep-primary); color: #fff; }
.btn.-full { width: 100%; }
.btn-link { color: #0366d6; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
/*.dark-mode .k-button:not([class*="k-button-solid-"]),
.dark-mode .k-button:not([class*="k-button-flat"]),
.dark-mode .k-button:not([class*="k-button-link"]),
.dark-mode .k-button:not([class*="k-button-outline"]),
.dark-mode .k-button-solid-secondary { border-color: var(--buttonBG); color: var(--textStrong); background-color: var(--buttonBG); }
.dark-mode .k-button:not([class*="k-button-solid-"]):hover,
.dark-mode .k-button-solid-secondary:hover { border-color: var(--buttonHoverBG); color: var(--textStrong); background-color: var(--buttonHoverBG); }*/
.dark-mode .k-button-link-base { color: #fff; }
.dark-mode .k-button-outline-base { color: #fff; }
.themestyle-minimal .k-button-flat-secondary { color: #212529; }
.k-button-sm { font-size: 0.875rem; padding: 0.25rem 0.5rem; line-height: 1.5; }
.k-button-md { font-size: 1rem; padding: 0.375rem 0.75rem; line-height: 1.5; height: var(--mdHeight); }
.k-button-lg { font-size: 1.125rem; padding: 0.5rem 1rem; line-height: 1.5; height: var(--lgHeight); }
@media (min-width: 1300px) {
.ep-button:not(.ep-iconbutton) .k-button:not(.ep-iconbutton):not(.ep-control-button),
.ep-toolbar-button:not(.ep-iconbutton) { min-width: 80px; }
.ep-control__buttons .ep-button .k-button.ep-control-button { min-width: 27.5px; }
}
/* .k-button { min-width: 80px; }
.k-button.k-input-button,
.k-button.k-spinner-increase,
.k-button.k-spinner-decrease,
.k-split-button .k-button,
.k-button-group .k-button,
.ep-toolbar-button.ep-iconbutton,
.k-datetimepicker-popup .k-button,
.k-calendar .k-button,
.k-icon-button { min-width: unset; }*/
.k-button-text { display: flex; align-items: center; justify-content: center; line-height: 1; gap: .3rem; }
.k-button-lg .k-button-text { gap: .5rem; }
.ep-iconbutton .k-button,
.ep-iconbutton .k-button-md { padding: 0; line-height: 1; display: flex; justify-content: center; align-items: center; width: var(--mdHeight); height: var(--mdHeight); min-width: unset; flex-grow: 0; flex-shrink: 0; }
.ep-iconbutton .k-button-sm { width: var(--smHeight); height: var(--smHeight); }
.ep-iconbutton .k-button-text i[class*='fa'] { width: 1em; height: 1em; font-size: 1rem; }
.ep-iconbutton .k-button-text .k-font-icon { font-size: 1rem; }
.ep-iconbutton .k-button.k-button-link:hover { background: var(--shade96) !important; }
.themestyle-minimal .k-button-solid-primary.k-selected,
.themestyle-minimal .k-button-solid-secondary.k-selected,
.themestyle-minimal .k-button-solid-primary.k-selected:hover,
.themestyle-minimal .k-button-solid-secondary.k-selected:hover { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
.dark-mode .k-button.k-selected,
.dark-mode .k-button.k-selected:hover,
.dark-mode .k-button.k-active,
.dark-mode .k-button.k-active:hover { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
.dark-mode .k-time-container { border-color: var(--borderColor); color: var(--textStrong); background-color: transparent; }
.dark-mode .k-time-highlight { border-color: var(--borderColor); background-color: var(--borderColor); color: var(--textStrong); }
.k-time-list .k-item:hover { color: var(--ep-primary); }
.dark-mode .k-time-list::before,
.dark-mode .k-time-list::after { box-shadow: 0 0 3em 3em #000; }
.dark-mode .k-time-list-wrapper .k-title { color: var(--textStrong); }
.dark-mode .k-time-list-wrapper.k-focused .k-title { color: var(--textStrong); }
/* =Devexpress Button*/
.dxbl-btn { background-color: var(--buttonBG); border-radius: var(--borderRadius); border-color: var(--borderColor); box-shadow: none; color: var(--buttonColor); font-family: var(--fontFamily); font-size: 1rem; line-height: 1.5; padding: 0.375rem 0.75rem; height: var(--mdHeight); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.dxbl-btn:not(.dxbl-disabled):not(:disabled):hover { background-color: var(--buttonHoverBG); color: var(--buttonColor); border-color: var(--buttonHoverBG); }
.dxbl-btn-secondary { background-color: var(--ep-secondary); border-color: var(--ep-secondary); color: #fff; }
.dxbl-btn-secondary:hover { background-color: var(--ep-secondary-hover); border-color: var(--ep-secondary); color: #fff; }
/* Datepicker Select Button*/
.themestyle-minimal.dark-mode .k-datepicker .k-select,
.themestyle-minimal.dark-mode .k-timepicker .k-select,
.themestyle-minimal.dark-mode .k-datetimepicker .k-select,
.themestyle-minimal.dark-mode .k-dateinput .k-select,
.themestyle-minimal.dark-mode .k-numerictextbox .k-select { border-color: transparent; color: var(--sidebarMenuText); background-color: var(--panelBG); }
.dark-mode .k-datepicker .k-select,
.dark-mode .k-timepicker .k-select,
.dark-mode .k-datetimepicker .k-select,
.dark-mode .k-dateinput .k-select,
.dark-mode .k-numerictextbox .k-select { border-color: var(--buttonBG); color: var(--textStrong); background-color: var(--buttonBG); }
.dark-mode .k-datepicker .k-select:hover,
.dark-mode .k-timepicker .k-select:hover,
.dark-mode .k-datetimepicker .k-select:hover,
.dark-mode .k-dateinput .k-select:hover { border-color: var(--buttonHoverBG); color: var(--textStrong); background-color: var(--buttonHoverBG); }
/* Numeric Button*/
.k-spinner-increase,
.k-spinner-decrease { border-radius: 0 !important; }
.themestyle-minimal.dark-mode .k-numerictextbox .k-select:hover { border-color: transparent; background-color: var(--panelBG); }
.themestyle-minimal.dark-mode .k-numerictextbox .k-select .k-link:hover,
.themestyle-minimal.dark-mode .k-numerictextbox .k-select .k-link.k-hover { border-color: transparent; background-color: var(--panelBG); color: var(--ep-primary) }
/*.theme-default.dark-mode .k-numerictextbox .k-select:hover { border-color: transparent; background-color: transparent; }*/
.dark-mode .k-numerictextbox .k-select .k-link:hover,
.dark-mode .k-numerictext
/*.k-button { height: calc(1.5em + .75rem + 2px); }*/
.k-button-text .k-icon,
.k-select .k-icon { font-size: 1.2em; }
.k-input-spinner .k-svg-icon > svg { width: 16px; }
/* .k-button-text .k-icon,
.k-button-text .k-icon { margin-right: .3rem; }
.k-button-text .k-icon:only-child { margin-right: 0; }
*/
/* .k-button-text i[class*='fa'] { font-size: 1.2em; }
.ep-close-button .k-button-text i[class*='fa'] { font-size: 1em; }*/
.k-button-clear-base { color: var(--buttonColor); }
@media (max-width: 1300px) {
.toolbar .ep-button .k-button-text .button-text { display: none; }
.toolbar .ep-button .k-button-text .k-icon,
.toolbar .ep-button .k-button-text i[class*='fa'] { margin: 0; }
/*.toolbar .ep-menu .k-menu-link i[class*="fa"] { margin: 0; }
.toolbar .ep-menu .k-menu-link .button-text { display: none; }*/
}
/* --------------------*/
/* ---- =BUTTONGROUPS ------ */
/* --------------------*/
.k-button-group .k-button-solid-base.k-selected { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
/* --------------------*/
/* ---- =SPLITBUTTONS ------ */
/* --------------------*/
.k-split-button .k-button-text i[class*='fa'] { margin-right: .3rem; }
.k-split-button .k-button-text .k-icon { margin-right: .3rem; }
.k-split-button .k-button-text svg { margin-right: .3rem; width: 1rem; height: 1rem; fill: var(--buttonColor); }
/* --------------------*/
/* ---- =FORMS ------ */
/* --------------------*/
.k-input-inner { margin: 0; padding: 0.375rem 0.75rem; /*height: auto;*/ }
.k-input { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--inputBG); border-radius: var(--borderRadius); }
.k-input-md,
.k-picker-md { line-height: 1.5; font-size: 1rem; height: var(--mdHeight); }
.k-input:focus-within,
.k-input-solid:focus-within,
.k-picker:focus-within { box-shadow: none; }
.k-input:not(.k-dropdownlist):not(.k-numerictextbox):not(.k-datepicker):not(.k-textarea):focus-within,
.k-picker:not(.k-dropdownlist):focus-within { background: var(--inputBG); }
.themestyle-minimal .k-input-inner { background: var(--buttonBG); }
.themestyle-minimal .k-input-inner:hover { background: var(--buttonHoverBG); }
/* =k-picker */
/*.k-picker { border-width: var(--borderDivider); }*/
.k-picker-solid { background-color: var(--buttonBG); border-color: var(--buttonBorder); }
.k-picker-solid:hover { background-color: var(--buttonHoverBG); }
.k-picker-solid:focus,
.k-picker-solid.k-focus,
.k-picker-solid:focus-within { border-color: var(--ep-primary); background-color: var(--buttonHoverBG); }
.dark-mode .k-input { color: var(--textDefault); background-color: var(--inputBG); border-color: var(--borderColor); }
.dark-mode .k-picker { border-color: var(--buttonBorder); color: var(--textStrong); background-color: var(--buttonBG); }
.dark-mode .k-picker-solid:hover { border-color: var(--buttonHoverBG); color: var(--textStrong); background-color: var(--buttonHoverBG); }
.dark-mode .k-picker-solid:hover .k-button { border-color: var(--buttonHoverBG); color: var(--textStrong); background-color: var(--buttonHoverBG); }
.dark-mode .k-picker-solid:focus,
.dark-mode .k-picker-solid.k-focus,
.dark-mode .k-picker-solid:focus-within { border-color: var(--ep-primary); background-color: var(--buttonHoverBG); }
.ep-textbox,
.ep-datepicker,
.ep-switch,
.ep-checkbox,
.ep-dropdownlist,
.ep-combobox,
.ep-numeric,
.ep-masked-textbox,
.ep-textarea,
.ep-multiselect,
.ep-lookup,
.ep-lookuparray,
.ep-lookupmaster,
.ep-colorpicker { display: flex; }
.k-master-row .ep-textbox,
.k-master-row .ep-datepicker,
.k-master-row .ep-switch,
.k-master-row .ep-checkbox,
.k-master-row .ep-dropdownlist,
.k-master-row .ep-combobox,
.k-master-row .ep-numeric,
.k-master-row .ep-masked-textbox,
.k-master-row .ep-textarea,
.k-master-row .ep-multiselect,
.k-master-row .ep-lookup,
.k-master-row .ep-lookuparray,
.k-master-row .ep-lookupmaster { margin-bottom: 0; }
.k-grid-edit-cell .ep-textbox,
.k-grid-edit-cell .ep-datepicker,
.k-grid-edit-cell .ep-switch,
.k-grid-edit-cell .ep-checkbox,
.k-grid-edit-cell .ep-dropdownlist,
.k-grid-edit-cell .ep-combobox,
.k-grid-edit-cell .ep-numeric,
.k-grid-edit-cell .ep-masked-textbox,
.k-grid-edit-cell .ep-textarea,
.k-grid-edit-cell .ep-multiselect,
.k-grid-edit-cell .ep-lookup,
.k-grid-edit-cell .ep-lookuparray,
.k-grid-edit-cell .ep-lookupmaster,
.ep-grid-column-viewtemplate .ep-colorpicker { margin-bottom: 0; }
.toolbar .ep-control { margin-block: 0; }
/* .ep-textbox__input { height: calc(1.7em + 0.75rem + 2px); line-height: 1.7; }
.ep-numeric__input .k-input { height: calc(1.7em + 0.75rem); line-height: 1.7; }
.ep-dropdownlist .k-input { height: calc( 1.7em + 0.75rem); }
.ep-combobox .k-input { height: calc( 1.7em + 0.75rem); }*/
.ep-combobox__input > .k-button { border-bottom-left-radius: 0; border-top-left-radius: 0; border-radius: 0; }
.-required span:after { content: " *"; color: var(--ep-danger); }
.ep-numeric__input { height: var(--mdHeight); }
.ep-textbox__input { border: 1px solid var(--borderColor); padding: 0.375rem 0.75rem; color: var(--textDefault); background-color: var(--inputBG); border-radius: var(--borderRadius); margin: 0; height: var(--mdHeight); border-width: 1px; border-style: solid; outline: 0; font-size: 1rem; line-height: 1.5; box-sizing: border-box; box-shadow: none; display: inline-flex; flex-flow: row nowrap; align-items: center; vertical-align: middle; position: relative; -webkit-appearance: none; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; max-width: 100%; }
.dark-mode .ep-textbox__input,
.dark-mode .k-textbox { border-color: var(--borderColor); }
.dark-mode .ep-textbox__input:hover,
.dark-mode .k-textbox:hover { background-color: var(--inputHoverBG); }
.dark-mode .ep-numeric__input .k-numeric-wrap,
.dark-mode .k-datepicker .k-picker-wrap,
.dark-mode .k-timepicker .k-picker-wrap,
.dark-mode .k-datetimepicker .k-picker-wrap,
.dark-mode .k-dateinput .k-dateinput-wrap,
.dark-mode .k-multiselect .k-multiselect-wrap,
.dark-mode .k-dropdowntree .k-multiselect-wrap { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--inputBG); }
/*.dark-mode .ep-textarea .k-textarea { border-color: var(--borderColor); background-color: var(--inputBG); }*/
/* INVALID */
.k-textbox.k-invalid,
.ep-textbox__input.k-invalid,
.ep-numeric__input.k-invalid,
.ep-combobox__input.k-invalid,
.ep-multiselect__input.k-invalid,
.ep-textarea__input.k-invalid, .k-floating-label-container.ep-textarea__input .k-textarea.k-invalid,
.ep-masked-textbox__input.k-invalid, .ep-masked-textbox__input .k-textbox.k-invalid,
.ep-datepicker__input.k-invalid,
.k-multiselect-wrap.k-invalid, .k-dropdowntree > .k-multiselect-wrap.k-invalid,
.k-invalid .ep-input { box-shadow: none; border-color: var(--ep-danger); background-color: var(--ep-danger-subtle); }
/* FOCUS */
.k-textbox:focus, .k-textbox:focus-within,
.ep-textbox__input:focus-within, .ep-textbox__input:focus, .-focused .ep-textbox__input,
.ep-numeric__input:focus-within, .ep-numeric__input:focus, .-focused .ep-numeric__input,
.ep-combobox__input:focus-within, .ep-combobox__input:focus, .-focused .ep-combobox__input,
.ep-multiselect__input:focus-within, .ep-multiselect__input:focus, .-focused .ep-multiselect__input,
.ep-textarea__input:focus-within, .ep-textarea__input:focus, .-focused .ep-textarea__input, .k-floating-label-container.ep-textarea__input .k-textarea:focus-within,
.ep-masked-textbox__input:focus-within, .ep-masked-textbox__input .k-textbox:focus-within, .-focused .ep-masked-textbox__input .k-textbox,
.-focused .ep-datepicker__input,
.k-multiselect.k-focused > .k-multiselect-wrap, .k-focused.k-dropdowntree > .k-multiselect-wrap, .-focused .k-multiselect-wrap,
.k-state-focused .ep-input { box-shadow: none; border-color: var(--ep-primary); }
/* FOCUS & INVALID */
.k-textbox.k-invalid:focus, .k-textbox.k-invalid:focus-within,
.ep-textbox__input.k-invalid:focus-within, .ep-textbox__input.k-invalid:focus, .-focused .ep-textbox__input.k-invalid,
.ep-numeric__input.k-invalid.k-focused, .-focused .ep-numeric__input.k-invalid,
.ep-combobox__input.k-invalid.k-focused, .-focused .ep-combobox__input.k-invalid,
.ep-multiselect__input.k-focused.k-invalid, .-focused .ep-multiselect__input.k-invalid,
.ep-textarea__input.k-invalid:focus-within, .ep-textarea__input.k-invalid:focus, .-focused .ep-textarea__input.k-invalid, .k-floating-label-container.ep-textarea__input .k-textarea.k-invalid:focus-within,
.ep-masked-textbox__input.k-invalid:focus-within, .ep-masked-textbox__input .k-textbox.k-invalid:focus-within, .-focused .ep-masked-textbox__input .k-textbox.k-invalid,
.-focused .ep-datepicker__input.k-invalid,
.k-multiselect.k-focused > .k-multiselect-wrap.k-invalid, .k-focused.k-dropdowntree > .k-multiselect-wrap.k-invalid
.-focused .k-multiselect-wrap.k-invalid
.k-state-focused.k-invalid .ep-input { box-shadow: none; border-color: var(--ep-danger); background-color: var(--inputHoverBG); }
/* LABEL COLOR WHEN INVALID */
.ep-control__wrapper:has(.k-invalid) + .ep-label,
.k-invalid + .ep-label { color: var(--ep-danger)!important; }
/* =LABELS */
.ep-label,
.k-label,
.k-textbox-container > .k-label,
.k-floating-label-container > .k-label { font-weight: 500; color: var(--textStrong); font-size: var(--txtSizeNormal); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ep-label > span,
.k-label > span { display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.dark-mode .ep-label,
.dark-mode .k-label,
.dark-mode .k-textbox-container > .k-label,
.dark-mode .k-floating-label-container > .k-label { color: var(--textStrong); }
/* INPUT BUTTONS */
.ep-control__buttons .k-button,
.k-datepicker .k-input-button.k-button,
.k-input-spinner .k-button,
.k-timepicker .k-button { width: auto; border-top-left-radius: 0; border-bottom-left-radius: 0; border-radius: 0; }
.ep-control.-focused .ep-label { color: var(--ep-primary); }
.ep-control__wrapper { display: flex; width: 100%; min-width: 0; align-items: flex-end; }
.ep-control__buttons { display: flex; align-items: stretch; height: var(--mdHeight); }
.ep-control__buttons .ep-button { display: flex; align-items: flex-end; }
.-with-buttons { align-items: flex-end; }
.-with-buttons .ep-input,
.-with-buttons .ep-masked-textbox__input .input,
.-with-buttons .ep-numeric__input .k-numeric-wrap,
.-with-buttons .ep-combobox__input .k-dropdown-wrap,
.-with-buttons .ep-datepicker__input .k-button,
.-with-buttons .ep-masked-textbox__input > .k-textbox { border-right-width: var(--borderDivider); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.-with-buttons .ep-datepicker__input { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.-with-buttons .k-datepicker .k-select,
.-with-buttons .k-timepicker .k-select,
.-with-buttons .k-datepicker .k-input-inner,
.-with-buttons .k-timepicker .k-input-inner { border-width: var(--borderDivider); }
.-with-buttons .k-button { border-color: var(--buttonBorder); padding-inline: var(--mdPadding); }
.-with-buttons .ep-button .k-button { border-radius: 0; border-width: 1px var(--borderDivider) 1px 0; }
.-with-buttons .ep-button:first-child .k-button { border-radius: 0; border-left-width: 0; border-right-width: var(--borderDivider); }
.-with-buttons .ep-button:last-child .k-button { border-right-width: 1px; border-top-right-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); }
.-with-buttons .ep-button:only-child .k-button { border-left-width: 0 !important; border-right-width: 1px !important; }
/*.-with-buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; border-left-width: var(--borderDivider); border-right-width: var(--borderDivider); }*/
.-with-buttons:has(.k-invalid) .ep-button .k-button { border-color: var(--ep-danger)!important; }
/*dropdowns*/
.ep-dropdownlist__input > .k-button,
.ep-colorpicker .k-colorpicker > .k-button { border-width: 0; border-radius: 0; width: var(--mdWidth); }
.ep-dropdownlist__input ~ .ep-control__buttons .k-button:last-child { border-left-width: 0; }
.ep-dropdownlist.-with-buttons .ep-dropdownlist__input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.-with-buttons .k-select { border-radius: 0; }
.-with-buttons .k-numerictextbox { width: 100%; /*border-right-width: 0;*/ }
.-with-buttons .k-numerictextbox .k-select,
.-with-buttons .k-dropdown .k-dropdown-wrap { border-radius: 0; }
.-with-buttons:focus-within .k-button,
.-with-buttons:focus .k-button,
.-with-buttons.-focused .k-button { border-color: var(--ep-primary) !important; }
.k-dropdown .k-dropdown-wrap.k-focused { border-color: var(--ep-primary) !important; box-shadow: none !important; }
.-with-buttons .k-multiselect-wrap .k-button { border-radius: var(--borderRadius) !important; border-left-width: 1px !important; border-right-width: 1px !important; }
.ep-control__info { border-radius: var(--borderRadius); cursor: pointer; background: var(--ep-primary); width: 1rem; height: 1rem; display: inline-flex; justify-content: center; align-items: center; line-height: 0; }
.ep-control__info svg { width: .8rem; height: .8rem; fill: #fff; }
.required { font-weight: 800; color: var(--ep-danger); }
/* =Date Picker / =Numeric / =Combobox */
.ep-datepicker__input,
.ep-numeric__input,
.ep-combobox__input { flex: 2; height: var(--mdHeight); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.ep-datepicker .k-datepicker .k-select,
.ep-datepicker .k-timepicker .k-select,
.ep-datepicker .k-datetimepicker .k-select,
.ep-datepicker .k-dateinput .k-select { padding: 0.375rem; width: calc( 1.5em + 0.75rem + 2px); }
.ep-datepicker .k-datetimepicker .k-link { padding: 0; }
.ep-datepicker .k-dateinput .k-link:hover,
.ep-datepicker .k-dateinput .k-link.k-hover,
.ep-datepicker .k-datetimepicker .k-link:hover,
.ep-datepicker .k-datetimepicker .k-link.k-hover { border-color: transparent; background-color: transparent; }
.k-datetime-container .k-date-tab .k-datetime-buttongroup,
.k-datetime-container .k-date-tab .k-datetime-selector { background-color: var(--panelHeaderBG); }
.k-timeselector { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--panelHeaderBG); }
.-with-buttons .ep-datepicker__input .k-button,
.-with-buttons .ep-numeric__input .k-button,
.-with-buttons .ep-combobox__input .k-button{ border-left-width: var(--borderDivider); }
.ep-datepicker.-with-buttons .k-floating-label-container,
.ep-numeric.-with-buttons .k-floating-label-container,
.ep-combobox.-with-buttons .k-floating-label-container { flex-direction: row; }
/*=Multiselect*/
.ep-multiselect__input { height: var(--mdHeight); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.ep-multiselect .ep-control__wrapper { align-items: flex-start; }
.k-multiselect.ep-textbox__input { align-items: flex-start; height: auto; min-height: calc( 1.5em + 0.75rem + 2px); padding: 0; border-width: 1px; }
/*.k-multiselect.ep-textbox__input .k-input-inner { padding: 0; }*/
/*=Chip*/
.k-chip-solid-base { border-color: var(--borderColor); color: var(--buttonColor); background-color: var(--buttonBG); }
.k-chip-solid-base:hover, .k-chip-solid-base.k-hover { background-color: var(--buttonHoverBG); }
/* Textarea*/
.ep-textarea__input { height: auto; min-height: var(--mdHeight); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.ep-textarea__input.k-input-md { border-right-width: 1px; }
.ep-textarea textarea { height: 100%; }
.ep-textarea .ep-control__wrapper { align-items: flex-start; }
.ep-textarea.-with-buttons .k-floating-label-container + .ep-control__buttons { margin-top: 1.5em; }
.ep-textarea.-with-buttons { align-items: flex-start; }
.no-resize textarea { resize: none; }
.ep-textarea-fill,
.ep-textarea-fill .ep-control__wrapper,
.ep-textarea-fill .ep-textarea__input.k-textarea { height: 100% }
.k-floating-label-container.ep-textarea__input ~ .ep-control__buttons { padding-top: calc( 1.5 * 1rem); }
/* Masked Textbox */
.ep-masked-textbox__input > .k-textbox { width: 100% }
/* Label Above */
.label-above { flex-direction: column-reverse; }
.label-above .ep-input:not(.ep-switch__input):not(.ep-checkbox__input) { width: 100%; }
.label-above .ep-label { height: 1.5rem; width: 100%; }
.density-compact .label-above .ep-label { height: 1.4rem; }
/* Label Left */
.label-left { margin-top: 1.5rem; flex-direction: row-reverse; }
.ep-switch.label-left,
.ep-checkbox.label-left { justify-content: flex-end; }
.label-left .ep-label { flex: 1; display: flex; align-items: center; margin-right: .5rem; align-self: center; min-width: 0; }
.label-left .ep-textarea__label,
.label-left .ep-multiselect__label { align-self: flex-start; height: calc( 1.5em + 0.75rem); }
.ep-switch.label-left .ep-label,
.ep-checkbox.label-left .ep-label { flex: initial; display: flex; align-items: center; margin-right: .5rem; }
.label-left .ep-textbox__input,
.label-left .ep-control__wrapper { flex: 2; justify-content: flex-end; min-width: 0; }
/* Label Right */
.label-right { margin-top: 1.5rem; }
.label-right .ep-label { flex: 1; display: flex; align-items: center; margin-left: .5rem; justify-content: flex-end; align-self: center; min-width: 0; }
.ep-switch.label-right,
.ep-checkbox.label-right { justify-content: flex-start; }
.ep-switch.label-right .ep-control__wrapper,
.ep-checkbox.label-right .ep-control__wrapper { flex-basis: auto; flex-grow: initial; flex-shrink: initial; width: auto; min-width: unset; }
.ep-switch.label-right .ep-label,
.ep-checkbox.label-right .ep-label { flex: initial; display: flex; align-items: center; margin-left: .5rem; }
.label-right .ep-textarea__label,
.label-right .ep-multiselect__label { align-self: flex-start; height: calc( 1.5em + 0.75rem); }
.label-right .ep-textbox__input,
.label-right .ep-control__wrapper { flex: 2; min-width: 0; }
.k-input-solid.k-invalid,
.k-input-solid.ng-invalid.ng-touched,
.k-input-solid.ng-invalid.ng-dirty { border-color: var(--ep-danger); }
/* Floating Label */
.k-floating-label-container { flex: 1 1 auto; width: auto; min-width: 0; }
.k-floating-label-container > .k-label { padding: 0 .8rem; border-radius: 10px; line-height: var(--mdHeight); color: var(--textDefault); position: absolute; transition: .1s all ease-in; pointer-events: none; z-index: 1; width: 100%; }
/* Floating Label when Focused or Completed */
.has-value .k-floating-label-container > .k-label,
.k-floating-label-container:focus-within > .k-label,
.k-floating-label-container.k-focused > .k-label { transform: scale(.85) translate(-.8rem, -2rem); background: none; line-height: 1.7; width: auto; }
/* Floating Label color when focused */
.has-value .k-floating-label-container > .k-label { color: var(--textDefault); }
.k-floating-label-container:focus-within > .k-label,
.k-floating-label-container.k-focused > .k-label { color: var(--ep-primary); }
/* =Disabled Input */
.ep-input.k-disabled:not(.k-switch),
.ep-textbox__input[disabled] { border: 1px solid var(--ep-disabled-border); color: var(--ep-disabled-text); cursor: default; background-color: var(--ep-disabled-bg); }
/* =Switch */
.ep-switch .ep-control__wrapper { padding: 0.375rem 0; border: 1px solid transparent; }
.ep-input.ep-switch__input { width: 3.5rem; height: 21px; min-width: 48px; }
.ep-switch .k-switch-track { width: 100%; transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out; }
.ep-switch .indeterminate .k-switch-thumb { left: calc(50% + 11px); }
.k-switch-on .k-switch-track { border-color: var(--ep-primary); background-color: var(--ep-primary); }
.k-switch-on:hover .k-switch-track { border-color: var(--ep-primary-hover); background-color: var(--ep-primary-hover); }
.k-switch-off:hover .k-switch-track { border-color: var(--ep-primary); }
.k-switch-on .k-switch-thumb { background-color: #fff; }
/*.dark-mode .k-switch-off .k-switch-container { border-color: var(--borderColor); background-color: var(--inputBG); }*/
.dark-mode .k-switch-off .k-switch-track { border-color: var(--borderColor); background-color: var(--inputBG); }
.dark-mode .k-switch-off:hover .k-switch-track { border-color: hsl(var(--shadeH), var(--shadeS), 60%); }
.dark-mode .k-switch-off .k-switch-thumb { background-color: var(--shade70); }
/* =Checkbox */
.ep-checkbox .ep-control__wrapper { padding: 0.375rem 0; border: 1px solid transparent; min-width: unset; }
element.style { padding: 0.3828rem 0; line-height: 1.5; /* border: 1px solid #fff; */ }
.ep-input.ep-checkbox__input { width: 1.5rem; height: 1.5rem; }
.ep-input.ep-checkbox__input.k-checkbox::before { width: 1.5rem; height: 1.5rem; }
.k-checkbox { border-radius: var(--borderRadius); transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out; }
.k-checkbox:hover { border-color: var(--ep-primary);}
.k-checkbox:checked,
.k-checkbox.k-checked { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
.k-checkbox:checked:hover,
.k-checkbox.k-checked:hover { background-color: var(--ep-primary-hover); }
.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
.dark-mode .k-checkbox { border-color: var(--borderColor); color: transparent; background-color: #151521; }
.dark-mode .k-checkbox:checked,
.dark-mode .k-checkbox.k-checked { border-color: var(--ep-primary); color: var(--textStrong); background-color: var(--ep-primary); }
.ep-input.k-disabled.k-checkbox,
.ep-input.k-disabled.k-checkbox { color: white; background-color: var(--ep-disabled-bg); }
.ep-input.k-disabled.k-checkbox:checked,
.ep-input.k-disabled.k-checkbox.k-checked { border-color: var(--ep-primary); color: white; background-color: var(--ep-primary); }
/* =Radio */
.k-radio-list-horizontal,
.k-radio-list.k-list-horizontal { display: flex; flex-flow: row wrap; gap: 1rem; row-gap: 0; }
.k-radio { margin: 0 .2rem; }
.k-radio:checked,
.k-radio.k-checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e"); }
/* =Dropdown */
.k-rounded-md { border-radius: var(--borderRadius); }
.k-dropdown,
.k-dropdowntree { line-height: 1; }
.dark-mode .k-dropdown .k-dropdown-wrap,
.dark-mode .k-dropdowntree .k-dropdown-wrap { border-color: var(--borderColor); color: var(--textDefault); background-color: transparent; }
.dark-mode .k-dropdown .k-dropdown-wrap:hover,
.dark-mode .k-dropdowntree .k-dropdown-wrap:hover { color: var(--ep-primary); }
.dark-mode .ep-lookup .ep-control__buttons .k-button,
.dark-mode .ep-lookupmaster .ep-control__buttons .k-button,
.dark-mode .ep-lookuparray .ep-control__buttons .k-button { border-color: var(--buttonBorder); }
/*.browser-layouts-dropdown .k-dropdownlist,
.browser-layouts-filters .k-dropdownlist { border-top-right-radius: 0; border-bottom-right-radius: 0; }
*/
/* --------------------*/
/* ---- =GRIDS ------ */
/* --------------------*/
.ep-grid > .ep-grid__container > .ep-grid__quickentry { width: unset; min-height: unset; margin: 0; }
.ep-grid > .k-drawer-container.ep-grid__quickentry > .k-drawer > .k-drawer-wrapper { padding: 0.5rem; }
.ep-grid .ep-grid__quickentryActions > .ep-grid__quickentryActionsLeft { gap: .5rem; }
.ep-grid .ep-grid__quickentryActions > .ep-grid__quickentryActionsRight { justify-content: flex-end; gap: .5rem; }
.ep-grid__quickentryControls.-with-actions .ep-layout:last-child { position: relative; }
.ep-grid__quickentryControls.-with-actions .ep-grid__quickentryActions { position: absolute; bottom: 0; margin: 0 0 var(--generalMargin) 0; }
.ep-grid-toolbar,
.ep-treelist-toolbar { column-gap: 0.5rem; height: auto; }
.ep-grid__quickentry + .k-grid { min-height: 0; }
/* =TREELIST */
.ep-treelist { min-height: 0; }
.ep-treelist .ep-grid-column-viewtemplate { display: inline; }
.k-treelist-toggle { padding: 0; }
/* =TREEVIEW */
.ep-treeview ul li { color: var(--textStrong); }
/*.k-grid { min-height: 0!important; }*/
.k-grid th { font-size: 1rem; }
.k-table,
.k-data-table { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--gridBG); }
.k-table-thead,
.k-table-header,
.k-table-group-sticky-header { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--gridHeaderBG); }
.k-grid-header th { font-weight: 600; }
.k-grid-header th[aria-sort="ascending"],
.k-grid-header th[aria-sort="descending"] { color: var(--ep-primary); }
.theme-default:not(.dark-mode) .k-grid-header .k-picker { background: hsl(210deg 100% 90%); }
.theme-default:not(.dark-mode) .k-grid-header .k-picker:hover { background: hsl(210deg 100% 85%); }
.-no-text-wrap.k-grid th.k-header,
.-no-text-wrap.k-grid td[role='gridcell'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-default:not(.dark-mode) .k-grid-toolbar .k-button-solid-base { background-color: hsl(210deg 100% 90%); }
.theme-default:not(.dark-mode) .k-grid-toolbar .k-button-solid-base:hover { background-color: hsl(210deg 100% 85%); }
.theme-default:not(.dark-mode) .k-grid-toolbar .ep-menu .k-menu-item { background-color: hsl(210deg 100% 90%); }
.theme-default:not(.dark-mode) .k-grid-toolbar .ep-menu .k-menu-item:hover { background-color: hsl(210deg 100% 85%); }
.themestyle-minimal .k-grid-header .k-input-inner { background: #fff; }
.themestyle-minimal .k-grid-header .k-input-inner:hover { background: #fff; }
.dark-mode.themestyle-minimal .k-grid-header .k-input-inner { background: var(--inputBG); }
.dark-mode.themestyle-minimal .k-grid-header .k-input-inner:hover { background: var(--inputBG); }
.themestyle-minimal .k-grid-header .k-button,
.themestyle-minimal .k-grid-header .k-button-secondary { background-color: var(--shade82); }
/*.k-grid th,*/
.k-grid td,
.k-grid-md td,
.k-grid .k-grid-md .k-table-td,
.k-grid-md td,
.k-grid-md .k-table-td,
.k-grid-md .k-grid-edit-row td,
.k-grid-md .k-grid-edit-row .k-table-td { padding: var(--cellPadding); height: var(--cellHeight); }
.k-grid tbody .k-master-row td.-cell-checkbox,
.k-grid thead th.k-first { text-align: center; }
.k-grid tbody .k-master-row td.-cell-checkbox .k-checkbox,
.k-grid thead th .k-checkbox { width: 1.2rem; height: 1.2rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.k-grid tbody .k-master-row td.-cell-checkbox .k-checkbox:hover,
.k-grid thead th .k-checkbox:hover { border-color: var(--ep-primary); }
/* =filterable for ep-grid and ep-treelist */
.autohide-filters .k-grid-md .k-grid-header .k-grid-filter-menu,
.autohide-filters .k-grid-md .k-grid-header .k-grid-column-menu { right: 0; }
.autohide-filters .k-grid-md .k-table-th.k-filterable .k-grid-filter-menu,
.autohide-filters .k-grid-md .k-table-th.k-filterable .k-grid-column-menu { opacity: 0; padding: 0; }
.autohide-filters .k-grid-md .k-table-th.k-filterable:hover .k-grid-filter-menu,
.autohide-filters .k-grid-md .k-table-th.k-filterable:hover .k-grid-column-menu { opacity: .5; }
.autohide-filters .k-grid-md .k-table-th.k-filterable:hover .k-grid-filter-menu:hover,
.autohide-filters .k-grid-md .k-table-th.k-filterable:hover .k-grid-column-menu:hover { opacity: 1; }
.autohide-filters .k-grid-md .k-table-th.k-filterable .k-grid-filter-menu.k-active,
.autohide-filters .k-grid-md .k-table-th.k-filterable .k-grid-column-menu.k-active { opacity: 1; }
.autohide-filters .k-grid-md .k-table-th.k-filterable[aria-expanded="true"] .k-grid-filter-menu,
.autohide-filters .k-grid-md .k-table-th.k-filterable[aria-expanded="true"] .k-grid-column-menu { opacity: 1; }
.k-filtercell-operator .k-button.k-disabled { display: none; }
.autohide-filters .k-grid-header .k-column-resizer { z-index: 1; }
.autohide-filters .k-grid-header .k-column-resizer:hover { background: var(--ep-primary-subtle); }
.autohide-filters .k-grid-header .k-column-resizer:active { background: var(--ep-primary); }
/*.ep-grid.autohide-filters .k-grid-md .k-table-th.k-filterable:hover,
.ep-grid.autohide-filters .k-grid-md .k-table-th.k-filterable:has(.k-active),
.ep-grid.autohide-filters .k-grid-md .k-table-th.k-filterable[aria-expanded="true"] { padding-right: 25px; }*/
/* .k-grid .k-alt { background-color: #f6f8fb; }
.k-grid .k-master-row.k-alt .k-grid-content-sticky { background-color: #f6f8fb; }
.k-grid tbody tr:hover,
.k-grid tbody tr.k-hover,
.k-grid tbody .k-master-row:hover .k-grid-content-sticky { color: #1c3a4c; background-color: var(--gridCellHoverBG); }
.k-grid tbody tr.k-selected > td,
.k-grid tbody .k-master-row.k-selected:hover .k-grid-content-sticky { color: #1c3a4c; background-color: var(--gridCellActiverBG) !important; } */
/* =Checkbox in grid */
.k-grid td .ep-checkbox .ep-control__wrapper { padding: 0; }
/* Edit Grid */
.k-grid-edit-row .k-textbox { width: 100%; }
.k-grid-edit-row .k-button { height: var(--mdHeight); }
/* =Grouping */
.k-grouping-header .k-group-indicator { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
/* =Drag Cell */
.k-grid .k-hierarchy-cell > .k-icon,
.k-grid .k-drag-cell > .k-icon { display: inline-flex; }
/* =Pager */
.k-pager { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--panelFooterBG); }
.k-pager .k-button { border-radius: 0; }
.k-pager .k-button.k-button-flat::before,
.k-pager .k-button.k-button-flat::before { opacity: 0; }
.k-pager .k-button:hover::before,
.k-pager .k-button.k-hover::before { opacity: 0.08; }
.k-pager .k-button.k-selected::before,
.k-pager .k-button.k-selected:hover::before { opacity: 0.2; }
.k-treelist .k-table-td .k-icon { transform: translateY(-2px); }
/* Dark Mode */
.dark-mode .ep-grid .k-grid,
.dark-mode .ep-treelist .k-grid { color: var(--textDefault); background-color: var(--panelBG); border-color: var(--borderColor); }
.dark-mode .ep-grid .k-grid-header,
.dark-mode .ep-grid .k-grid-header .k-grid-header-sticky,
.dark-mode .ep-treelist .k-grid-header,
.dark-mode .ep-treelist .k-grid-header .k-grid-header-sticky { color: var(--textStrong); background-color: var(--gridHeaderBG); border-color: var(--borderColor); }
.dark-mode .ep-grid .k-grid td,
.dark-mode .ep-grid .k-grid .k-grid-content,
.dark-mode .ep-grid .k-grid .k-grid-header-locked,
.dark-mode .ep-grid .k-grid .k-grid-content-locked,
.dark-mode .ep-treelist .k-grid td,
.dark-mode .ep-treelist .k-grid .k-grid-content,
.dark-mode .ep-treelist .k-grid .k-grid-header-locked,
.dark-mode .ep-treelist .k-grid .k-grid-content-locked { border-color: var(--borderColor); color: var(--textDefault); }
.dark-mode .ep-grid .k-master-row .k-grid-content-sticky,
.dark-mode .ep-treelist .k-master-row .k-grid-content-sticky { color: var(--textStrong); background-color: var(--panelBG); }
.dark-mode .ep-grid .k-master-row.k-alt .k-grid-content-sticky,
.dark-mode .ep-treelist .k-master-row.k-alt .k-grid-content-sticky { color: var(--textStrong); background-color: rgba(0, 0, 0, 0); }
.dark-mode .ep-grid .k-grid .k-alt,
.dark-mode .ep-treelist .k-grid .k-alt { background-color: rgba(0, 0, 0, 0.25); }
.dark-mode .k-grid tbody tr:hover,
.dark-mode .k-grid tbody tr.k-hover,
/*.dark-mode .k-grid tbody .k-master-row:hover .k-grid-content-sticky,*/
.dark-mode .ep-grid .k-grid .k-alt:hover,
.dark-mode .ep-treelist tbody tr:hover,
.dark-mode .ep-treelist tbody tr.k-hover,
/*.dark-mode .ep-treelist tbody .k-master-row:hover .k-grid-content-sticky,*/
.dark-mode .ep-treelist .ep-treelist .k-alt:hover { color: var(--textDefault); background-color: var(--gridCellHoverBG); }
.dark-mode .k-grouping-row,
.dark-mode .k-group-cell { background-color: var(--calendarCellBG); }
.dark-mode .k-grouping-header { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--calendarCellBG); }
.dark-mode .k-group-footer td,
.dark-mode .k-group-footer .k-grid-footer-sticky { background-color: initial; }
.dark-mode .k-grid-pager { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--gridHeaderBG); }
.dark-mode .k-pager-numbers .k-button { color: var(--ep-primary); }
.dark-mode .k-pager-numbers .k-button:hover { color: var(--ep-primary-hover); }
/*.dark-mode .k-pager-numbers .k-button.k-selected { border-color: var(--ep-primary); color: #ffffff; background-color: var(--ep-primary); }*/
.dark-mode .k-pager-refresh,
.dark-mode .k-pager-nav.k-button { border-color: var(--borderColor); color: var(--ep-primary); background-color: transparent; }
/* Rule tο hide the pager buttons if there is only one page */
.k-pager:has(button:nth-child(1):last-child) .k-pager-numbers-wrap { opacity: 0; visibility: hidden; }
/* Rule to hide the pager if is has data */
.k-pager:not(:has(.k-pager-numbers > button)) { display: none; }
/* Rule to always display the page info */
.k-pager-info { display: block !important; }
/* =selected / focused cell style */
.k-grid td.k-focus, .k-grid th.k-focus, .k-grid th:focus, .k-grid .k-master-row > td:focus, .k-grid .k-grouping-row > td:focus, .k-grid .k-detail-row > td:focus, .k-grid .k-group-footer > td:focus, .k-grid .k-grid-pager.k-focus, .k-grid .k-grid-pager:focus { box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%); }
.dark-mode .k-grid td.k-focus, .dark-mode .k-grid th.k-focus, .dark-mode .k-grid th:focus, .dark-mode .k-grid .k-master-row > td:focus, .dark-mode .k-grid .k-grouping-row > td:focus, .dark-mode .k-grid .k-detail-row > td:focus, .dark-mode .k-grid .k-group-footer > td:focus, .dark-mode .k-grid .k-grid-pager.k-focus, .dark-mode .k-grid .k-grid-pager:focus { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 25%); }
.k-grid .k-table-th.k-selected,
.k-grid td.k-selected,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > td,
.k-grid .k-table-row.k-selected > .k-table-td { color: var(--textStrong); background-color: hsl(var(--ep-primaryH), var(--ep-primaryS), 95%); }
.k-table-row:has(td:focus-within) {
font-weight: bold;
}
.k-master-row.k-table-row.k-selected td.k-grid-content-sticky,
.k-master-row.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
.k-master-row.k-table-row td.k-grid-content-sticky.k-selected,
.k-master-row.k-table-row .k-table-td.k-grid-content-sticky.k-selected { background-color: hsl(var(--ep-primaryH), var(--ep-primaryS), 95%) !important; }
.dark-mode .k-grid .k-table-th.k-selected,
.dark-mode .k-grid td.k-selected,
.dark-mode .k-grid .k-table-td.k-selected,
.dark-mode .k-grid .k-table-row.k-selected > td,
.dark-mode .k-grid .k-table-row.k-selected > .k-table-td { color: var(--textStrong); background-color: hsl(var(--ep-primaryH), var(--ep-primaryS), 10%); }
.dark-mode .k-master-row.k-table-row.k-selected td.k-grid-content-sticky,
.dark-mode .k-master-row.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
.dark-mode .k-master-row.k-table-row td.k-grid-content-sticky.k-selected,
.dark-mode .k-master-row.k-table-row .k-table-td.k-grid-content-sticky.k-selected { background-color: hsl(var(--ep-primaryH), var(--ep-primaryS), 10%) !important; }
.k-master-row .k-grid-content-sticky { border-color: rgba(33, 37, 41, 0.2); box-shadow: rgba(0, 0, 0, 0.10) 1px 0px 3px; }
.k-grid-header .k-grid-header-sticky,
.k-grid-header .k-grid-header-sticky.k-sorted,
.k-grid-footer .k-grid-footer-sticky { border-right-color: rgba(33, 37, 41, 0.2); border-left-color: rgba(33, 37, 41, 0.2); box-shadow: rgba(0, 0, 0, 0.10) 1px 0px 3px; }
/* =Grid Header */
.-no-header .k-grid-header { display: none }
.k-grid-header,
.k-grid-header .k-grid-header-sticky,
.k-grid-footer .k-grid-footer-sticky {
background-color: var(--gridHeaderBG);
}
.k-grid-header .k-grid-filter.k-active,
.k-grid-header .k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-active { color: var(--ep-primary); background-color: transparent; }
/* =Grid footer */
.k-grid-footer,
.k-table-tfoot,
.k-table-footer { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--gridHeaderBG); }
/* =filter grid menu */
/*.k-animation-container:has(.k-column-menu) { z-index: 100!important;}*/
.k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper { border-top-color: var(--borderColor); }
.k-columnmenu-item { color: var(--textStrong); }
.k-column-list-item:hover,
.k-columnmenu-item:hover { color: var(--textStrong); background-color: var(--gridCellHoverBG); }
.k-columnmenu-item.k-selected { color: #fff; background-color: var(--ep-primary); }
/* --------------------*/
/* ---- =TABLE ------ */
/* --------------------*/
.table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #212529;
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: #212529;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #212529;
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%; margin-bottom: 1rem; color: var(--textDefault); vertical-align: top; border-color: var(--borderColor); caption-side: bottom; border-collapse: collapse; }
.table > :not(caption) > * > * { padding: 0.5rem 0.5rem; background-color: var(--bs-table-bg); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }
.table > tbody { vertical-align: inherit; }
.table > thead { vertical-align: bottom; }
.table > :not(:last-child) > :last-child > * { border-bottom-color: currentColor; }
.table thead,
.table tbody,
.table tfoot,
.table tr,
.table td,
.table th { border-color: inherit; border-style: solid; border-width: 0; }
.table-bordered td { border-width: 1px; }
.table code { color: var(--ep-primary); }
.ep-grid-column-viewtemplate.-editable { cursor: pointer; }
a.ep-grid-column__link { color: var(--ep-link-color); cursor: pointer; }
a.ep-grid-column__link:hover { text-decoration: underline; color: var(--ep-link-color-hover); }
/* --------------------*/
/* ---- =SCHEDULER ------ */
/* --------------------*/
/* =k-scheduler telerik*/
.k-scheduler { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--calendarCellBG); }
.k-scheduler-layout-flex .k-scheduler-head,
.k-scheduler-layout-flex .k-sticky-cell { background-color: var(--calendarCellHeaderBG); }
.k-grouping-row,
.k-group-cell { border-color: var(--borderColor); color: var(--textDefault); background-color: var(--calendarCellHeaderBG); }
.k-scheduler .k-heading-cell { background-color: var(--calendarCellHeaderBG); }
.k-scheduler-nonwork, .k-scheduler .k-nonwork-hour { background-color: var(--calendarCellDisabledBG); }
.k-scheduler-cell .k-link { color: var(--ep-primary); }
.k-scheduler .k-event { color: #fff; }
/* to make the flat telerik button in calendar toolbar appear as the other buttons*/
.k-scheduler-toolbar .k-nav-current.k-button-flat { border-color: var(--buttonBG) !important; color: var(--buttonColor); background-color: var(--buttonBG) !important; }
.k-scheduler-toolbar .k-nav-current.k-button.k-button-flat::before,
.k-scheduler-toolbar .k-nav-current.k-button.k-button-flat::before { display: none !important; }
.k-scheduler-toolbar .k-nav-current.k-button-flat:hover { background-color: var(--buttonHoverBG) !important; }
/*dev express*/
.ep-dx-scheduler { display: flex; height: 100%; }
.card.dxbs-scheduler { background-color: var(--panelBG); border: 1px solid var(--borderColor); }
.table.table-bordered.dxbs-sc-horizontal-view,
.table.table-bordered.dxbs-sc-headers { border-color: var(--borderColor); }
.dxsc-today.dxbs-sc-date-hr:before,
.dxsc-today.dxbs-sc-time-cell:before { background-color: var(--ep-primary); }
.bg-light { --bs-bg-opacity: 1; background-color: var(--calendarCellBG) !important; }
.dxbl-toolbar { --dxbl-btn-bg: var(--buttonBG) !important; --dxbl-btn-color: var(--buttonColor) !important; --dxbl-btn-disabled-opacity: 1; }
.dxbl-toolbar-btn { background-color: var(--buttonBG); border-color: var(--buttonBG); color: var(--buttonColor); }
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover { background-color: var(--buttonHoverBG,unset); color: var(--buttonColor); border-color: var(--buttonHoverBG); }
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-toolbar > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-toolbar > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active { background-color: var(--buttonHoverBG,unset); color: var(--buttonColor); border-color: var(--buttonHoverBG); }
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-toolbar > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled).dxbl-active:not(.dxbl-disabled):not(:disabled):hover { background-color: var(--buttonHoverBG,unset); color: var(--buttonColor); border-color: var(--buttonHoverBG); }
.table { border-color: var(--borderColor); }
/* --------------------*/
/* ---- =QUICKSEARCH ------ */
/* --------------------*/
/*.ep-quicksearch { margin: 0 0 1rem 0; }*/
.ep-quicksearch .k-label { display: none; }
.ep-quicksearch .-with-buttons .ep-button:not(:only-child):not(:last-child) .k-button { border: 0; }
/* --------------------*/
/* ---- =QUICKENTRY ------ */
/* --------------------*/
.ep-grid__quickentryActions { margin-top: var(--generalMargin); }
.qe-container .ep-layout-item.ep-grid__quickentryItem > .ep-control { margin-right: 1rem; }
/*.qe-container .flex-container:last-child .ep-layout-item.ep-grid__quickentryItem > .ep-control { margin-right: 0; }*/
/*.qe-container > * { flex-direction: column; }*/
.ep-treelist__quickentryForm { display: flex; flex-direction: column; gap: 1rem; }
/* --------------------*/
/* ---- =DASHBOARD ------ */
/* --------------------*/
.ep-dashboard-card { height: 100%; padding: 1rem; border: 1px solid var(--borderColor); border-radius: var(--borderRadius); box-shadow: var(--boxShadow); background: var(--cardBG); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .2rem; }
.ep-dashboard-card h2 { font-size: 1.25rem; margin: 0; flex-grow: 0; flex-shrink: 0; }
.ep-layout-item:has(.ep-dashboard-card):not(:last-child) { margin-right: 1rem; }
.dashboard__empty .logo__icon { width: 200px; }
.dashboard__empty { color: var(--textDefault); text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; opacity: .8; }
.dashboard__empty h1 { font-weight: 500; }
.dashboard__empty h1 strong { font-weight: 700; color: #fff; }
.dashboard__empty h3 { margin: 1rem 0 0 0; text-transform: uppercase; letter-spacing: .015em; }
.dashboard__empty .logo__name { font-size: 2rem; color: var(--textStrong); }
.dark-mode .logo__text,
.dark-mode .logo__square { fill: var(--textStrong); }
.dark-mode .dashboard__empty .logo__name { color: var(--textStrong); }
.dark-mode .dashboard__empty h3 { color: var(--ep-primary); }
.dx-dashboard-control { background-color: var(--tabsBodyBG); }
/* --------------------*/
/* ---- =FILTERS ------ */
/* --------------------*/
.filter-row { padding: var(--cellPadding); flex-wrap: nowrap !important; max-width: 1200px; column-gap: var(--flex-column-gap, --flex-column-gap); border-radius: var(--borderRadius); }
.filter-row:nth-child(2n+1) { background: hsla(var(--ep-secondaryH), var(--ep-secondaryS), var(--ep-secondaryL), 0.08); }
.filter-row:hover { outline: 1px solid var(--ep-primary); }
.filter-row div[class*="flex-item-"] { flex-basis: auto; align-items: center; display: flex; flex-shrink: 1; padding-left: 2.5rem; position: relative; min-width: initial; }
.filter-row div[class*="flex-item-"]:first-child { width: auto; flex-grow: 0; flex-shrink: 0; padding: 0 }
.filter-row .label-left { margin: 0; }
.filter-row .ep-control__wrapper { min-width: initial; }
.filter-row .ep-control { width: 100%; }
.filter-row .filter-label { width: 200px; line-height: 1.2; word-break: break-word; }
.filter-row .k-numerictextbox,
.filter-row .k-textbox { width: 100%; }
.filter-row .ep-label { padding: 0 !important; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; flex-basis: 2rem; border-radius: 100px; position: absolute; left: 0; }
.filter-row .ep-label svg.k-image { fill: #FFF; width: 22px; height: 22px; }
.filter-row label.ep-label { background: var(--panelHeaderBG) !important; color: var(--ep-primary); }
.filter-row label.ep-label svg.k-image { fill: var(--ep-primary); }
.filter-row .ep-label > span { text-align: center; }
.filter-row .ep-lookuparray,
.filter-row .ep-lookupmaster { position: static; }
.filter-row .k-menu-link { background: var(--ep-primary); padding: 0 !important; border-radius: 100px; color: #fff; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; flex-basis: 2rem; }
.filter-row .k-menu-link.k-active { padding: 0; color: #fff !important; background: var(--ep-primary-hover); }
.filter-row .k-menu-link > .k-image { margin: 0; }
.filter-row .k-menu-expand-arrow { display: none; }
.flex-container.filter-row > .ep-layout-item > .ep-control { margin-right: 0; }
.filter-wheretype-itemcontent { line-height: 0; }
.k-popup .filter-wheretype-itemcontent { position: relative; padding-left: 35px; line-height: 24px; }
.k-popup .filter-wheretype-itemcontent svg.k-image { width: 24px; height: 24px; fill: var(--ep-primary); position: absolute; left: 0; top: 0; }
.k-popup .filter-wheretype-itemcontent i.k-image { width: 24px; height: 24px; color: var(--ep-primary); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; }
/* --------------------*/
/* ---- =DESIGNER ------ */
/* --------------------*/
.theme-default { --ep-primary-h: 309; --ep-primary-s: 88%; --ep-primary-l: 67%; }
.theme-ocean { --ep-primary-h: 213; --ep-primary-s: 100%; --ep-primary-l: 66%; }
.themestyle-minimal { --ep-primary-h: 216; --ep-primary-s: 98%; --ep-primary-l: 42%; }
.-designer { --designer-selected: var(--ep-primary-h) var(--ep-primary-s) var(--ep-primary-l); --designer-hover: calc(var(--ep-primary-h) - 90) var(--ep-primary-s) var(--ep-primary-l); --designer-active: calc(var(--ep-primary-h) - 50) var(--ep-primary-s) var(--ep-primary-l); }
.-designer .layout-content { padding: 0; display: flex; }
/* .-designer .content,
.ep-designer-content { height: calc(100vh - var(--topRowHeight)); padding-top: calc(2*var(--topRowHeight)); height: 100vh; }*/
.ep-layout-designer-host { display: flex; }
.-designer .content,
.ep-designer-content { height: calc(100vh); padding-top: calc(var(--topRowHeight)); width: 100%; }
.ep-designer-bar { position: fixed; top: var(--topRowHeight); display: flex; justify-content: space-between; padding: 0 1rem; width: 100%; height: var(--topRowHeight); align-items: center; background: var(--toolbarBG); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; z-index: 10; box-sizing: border-box; }
.designer-bar__left { display: flex; justify-content: flex-start; align-items: center; column-gap: 2rem; }
.designer-bar__title { display: flex; align-items: center; column-gap: 1rem; }
.designer-bar__icon { color: var(--ep-primary); font-size: 1.8rem; }
.designer-bar__headings { font-weight: 700; color: var(--ep-primary); font-size: 1.5rem; }
.designer-bar__options { display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.designer-bar-option { display: flex; align-items: center; column-gap: .5rem }
.designer-bar-option__icon { font-size: 1.5rem; color: var(--ep-primary); }
.designer-bar-option__title { font-size: 1.2rem; font-weight: 500; color: var(--textStrong); margin: 0; }
.ep-designer-body { display: flex; height: 100%; width: 100%; padding-top: var(--topRowHeight); flex: 1; min-height: 0; }
.ep-designer-main { padding: 1rem; overflow: auto; height: 100%; }
/*.ep-designer-main::after { content:""; display: block; padding: 1rem 0 0 0; }*/
.ep-designer-aside { flex-basis: 400px; display: flex; flex-direction: column; height: 100%; }
.ep-designer-treelist { display: flex; overflow: auto; padding: 1rem; flex-basis: 80%; height: 100%; box-sizing: border-box; }
.ep-designer-properties { padding: 1rem; flex-basis: 20%; display: flex; height: 100%; box-sizing: border-box; }
.ep-designer-properties__toggle { color: var(--ep-primary); cursor: pointer; }
.ep-designer-properties .ep-panel { margin: 0; }
.ep-designer-properties .ep-panel > .ep-panel__content > .ep-panel__body { overflow: auto; }
.ep-designer-properties .label-left { margin-top: 0; }
.ep-designer-properties .label-left .ep-label { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ep-designer-aside.-more-properties .ep-designer-treelist { flex-basis: 40%; }
.ep-designer-aside.-more-properties .ep-designer-properties { flex-basis: 60%; }
.ep-designer-treelist .k-menu.k-menu-horizontal:not(.k-context-menu) { padding: 0; }
.ep-designer-treelist .k-grid-content td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ep-designer-treelist .k-grid-content td:not(.k-drag-cell) { cursor: pointer; }
.ep-designer-treelist .k-grid-content td .k-icon.k-i-none { width: .25em; }
.ep-designer-treelist .k-grid-content .k-drag-cell > .k-icon { height: auto; }
.ep-designer-treelist .k-drag-col { width: 30px; }
.ep-designer-main .ep-layout-item,
.ep-designer-main .ep-label,
.ep-designer-main :disabled,
.ep-designer-main .ep-panel,
.ep-designer-main .ep-fieldset { cursor: pointer; }
.ep-designer-main .ep-layout-item:hover,
.ep-designer-main .ep-layout-item.--hovered { outline: 2px dashed hsl(var(--designer-hover)); background: hsl(var(--designer-hover) / .2); }
.ep-designer-main .ep-panel.--hovered,
.ep-designer-main .ep-fieldset.--hovered,
.ep-designer-main .ep-row.--hovered { outline: 2px dashed hsl(var(--designer-hover)); }
.ep-designer-main .ep-layout-item.--selected { outline: 2px dashed hsl(var(--designer-selected)); background: hsl(var(--designer-selected) / .2); }
.ep-designer-main .ep-row.--selected,
.ep-designer-main .ep-panel.--selected,
.ep-designer-main .ep-fieldset.--selected { outline: 2px dashed hsl(var(--designer-selected)); }
.ep-designer-main .ep-layout-item.--selected.--hovered,
.ep-designer-main .ep-layout-item.--selected:hover { outline: 2px dashed hsl(var(--designer-active)); background: hsl(var(--designer-active) / .2); }
.ep-designer-main .ep-row.--selected.--hovered,
.ep-designer-main .ep-panel.--selected.--hovered,
.ep-designer-main .ep-fieldset.--selected.--hovered { outline: 2px dashed hsl(var(--designer-active)); }
@media (max-width: 1300px) {
.ep-designer-bar { padding: 1rem; height: auto; row-gap: .5rem; flex-wrap: wrap; flex-direction: column; align-items: flex-start; position: static; }
.ep-designer-body { padding-top: 0; }
.designer-bar__left { flex-direction: column; align-items: flex-start; }
.-designer .content, .ep-designer-content { padding-top: 3.5rem; height: 100vh; display: flex; flex-direction: column; flex-grow: 0; }
}
/* --------------------*/
/* ---- =COLORPICKER ------ */
/* --------------------*/
.k-coloreditor { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--panelHeaderBG); }
.k-colorgradient { border-color: var(--borderColor); color: var(--textStrong); background-color: var(--panelHeaderBG); }
.k-coloreditor .k-button-flat { border-color: var(--buttonBorder) !important; color: var(--buttonColor); background: var(--buttonBG) !important; }
.k-coloreditor .k-button.k-button-flat::before, .k-coloreditor .k-button.k-button-flat::before { opacity: 0; }
.k-coloreditor .k-button-flat:hover { border-color: var(--buttonBorder) !important; color: var(--buttonColor); background: var(--buttonHoverBG) !important; }
/* --------------------*/
/* ---- =STEPPER =WIZARD ------ */
/* --------------------*/
.ep-wizard .k-wizard { padding-block: var(--generalMargin); padding-inline: var(--generalMargin); font-family: var(--fontFamily); position: relative; color: var(--textDefault); flex: 1; }
.ep-wizard .k-stepper { color: var(--textStrong); }
.ep-wizard .k-stepper .k-step-current .k-step-indicator { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
.ep-wizard .k-stepper .k-step-done .k-step-indicator { border-color: var(--ep-primary); color: #fff; background-color: var(--ep-primary); }
.ep-wizard .k-stepper .k-step-label .k-step-text { max-width: 100%; white-space: normal; display: block; line-height: 1.2; }
.ep-wizard .k-stepper .k-step-current .k-step-text { color: var(--ep-primary) }
.ep-wizard .k-stepper .k-step-link { cursor: pointer; }
.ep-wizard .k-step-list-horizontal .k-step-link { max-width: initial; }
.ep-wizard .k-step-list-horizontal .k-step-indicator + .k-step-label { padding: 0 .5rem; width: 100%; max-width: initial; }
.ep-wizard.--fullscreen { height: 100%; display: flex; }
.ep-wizard .k-wizard .k-wizard-buttons { margin: 0; background: var(--gridHeaderBG); padding: 1rem; border-radius: var(--borderRadius); }
.ep-wizard .k-wizard .k-wizard-step { padding: 0; }
/* --------------------*/
/* ---- =SPLITTERS ------ */
/* --------------------*/
.k-splitter { border-color: transparent; background-color: transparent; color: var(--textDefault); }
.k-splitbar { color: hsl(210deg 14% 59%); background-color: transparent; transition: .2s all ease-in-out; }
.k-splitbar:hover { color: hsl(210deg 14% 29%); background-color: hsl(210deg 14% 91%); }
.k-splitbar:active { background-color: var(--ep-primary); color: hsl(210deg 14% 89%); }
.dark-mode .k-splitbar { color: hsl(210deg 14% 40%); }
.dark-mode .k-splitbar:hover { color: hsl(210deg 14% 50%); background-color: hsl(210deg 14% 25%); }
.dark-mode .k-splitbar:active { background-color: var(--ep-primary); color: hsl(210deg 14% 89%); }
/* --------------------*/
/* ---- =LOADERS ------ */
/* --------------------*/
.ep-pspinner,
.ep-spinner { position: fixed; z-index: 10000000; width: 100%; }
.dark-mode .k-loader-container-overlay { opacity: 0.2; background: var(--ep-primary); }
/* Main logo loader */
@-webkit-keyframes animate-svg-stroke-1 {
0% { stroke-dashoffset: 171.22865295410156px; stroke-dasharray: 171.22865295410156px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 171.22865295410156px; }
}
@keyframes animate-svg-stroke-1 {
0% { stroke-dashoffset: 171.22865295410156px; stroke-dasharray: 171.22865295410156px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 171.22865295410156px; }
}
@-webkit-keyframes animate-svg-fill-1 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-1 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-2 {
0% { stroke-dashoffset: 135.88575744628906px; stroke-dasharray: 135.88575744628906px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 135.88575744628906px; }
}
@keyframes animate-svg-stroke-2 {
0% { stroke-dashoffset: 135.88575744628906px; stroke-dasharray: 135.88575744628906px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 135.88575744628906px; }
}
@-webkit-keyframes animate-svg-fill-2 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-2 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-3 {
0% { stroke-dashoffset: 120.40000915527344px; stroke-dasharray: 120.40000915527344px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 120.40000915527344px; }
}
@keyframes animate-svg-stroke-3 {
0% { stroke-dashoffset: 120.40000915527344px; stroke-dasharray: 120.40000915527344px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 120.40000915527344px; }
}
@-webkit-keyframes animate-svg-fill-3 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-3 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-4 {
0% { stroke-dashoffset: 191.2911834716797px; stroke-dasharray: 191.2911834716797px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 191.2911834716797px; }
}
@keyframes animate-svg-stroke-4 {
0% { stroke-dashoffset: 191.2911834716797px; stroke-dasharray: 191.2911834716797px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 191.2911834716797px; }
}
@-webkit-keyframes animate-svg-fill-4 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-4 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-5 {
0% { stroke-dashoffset: 196.49386596679688px; stroke-dasharray: 196.49386596679688px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 196.49386596679688px; }
}
@keyframes animate-svg-stroke-5 {
0% { stroke-dashoffset: 196.49386596679688px; stroke-dasharray: 196.49386596679688px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 196.49386596679688px; }
}
@-webkit-keyframes animate-svg-fill-5 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-5 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-6 {
0% { stroke-dashoffset: 740.6034545898438px; stroke-dasharray: 740.6034545898438px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 740.6034545898438px; }
}
@keyframes animate-svg-stroke-6 {
0% { stroke-dashoffset: 740.6034545898438px; stroke-dasharray: 740.6034545898438px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 740.6034545898438px; }
}
@-webkit-keyframes animate-svg-fill-6 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-6 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@-webkit-keyframes animate-svg-stroke-7 {
0% { stroke-dashoffset: 198.40231323242188px; stroke-dasharray: 198.40231323242188px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 198.40231323242188px; }
}
@keyframes animate-svg-stroke-7 {
0% { stroke-dashoffset: 198.40231323242188px; stroke-dasharray: 198.40231323242188px; }
100% { stroke-dashoffset: 0; stroke-dasharray: 198.40231323242188px; }
}
@-webkit-keyframes animate-svg-fill-7 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
@keyframes animate-svg-fill-7 {
0% { fill: transparent; }
100% { fill: rgb(35, 31, 32); }
}
.fullpage-loader { width: 100%; height: 100%; position: fixed; background: rgb(255, 255, 255, 0.25); z-index: 1000000; display: flex; justify-content: center; align-items: center; flex-direction: column; left: 0; top: 0; }
.fullpage-loader .logo-ani { width: 300px; height: 300px; }
/*.svg-elem-1 { -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both, animate-svg-fill-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both; animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both alternate infinite, animate-svg-fill-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both alternate infinite; }
.svg-elem-2 { -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both alternate infinite, animate-svg-fill-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both alternate infinite; animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both alternate infinite, animate-svg-fill-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both alternate infinite; }
.svg-elem-3 { -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both alternate infinite, animate-svg-fill-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both; animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both alternate infinite, animate-svg-fill-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both alternate infinite; }
.svg-elem-4 { -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both alternate infinite, animate-svg-fill-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both alternate infinite; animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both alternate infinite, animate-svg-fill-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both alternate infinite; }
.svg-elem-5 { -webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both, animate-svg-fill-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both; animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both alternate infinite, animate-svg-fill-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both alternate infinite; }
.svg-elem-6 { -webkit-animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both, animate-svg-fill-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both; animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both alternate infinite, animate-svg-fill-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both alternate infinite; }
.svg-elem-7 { -webkit-animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s both alternate infinite, animate-svg-fill-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both alternate infinite; animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s both alternate infinite, animate-svg-fill-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both alternate infinite; }*/
.lds-text { margin-top: 1rem; font-weight: 600; color: var(--textGray); font-size: var(--txtSizeLarge); }
.lds-ripple { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ripple div { position: absolute; border: 4px solid var(--ep-primary); opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.lds-ripple div:nth-child(2) { animation-delay: -0.5s; }
@keyframes lds-ripple {
0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; }
100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; }
}
/* Loading Bar */
.k-progressbar .k-selected { background-color: var(--ep-primary); }
.ep-bar { width: 100%; height: 1rem; background: var(--shade96); border-radius: var(--borderRadius); }
.ep-bar__progress { background: hsl(var(--ep-primaryH), var(--ep-primaryS), var(--ep-primaryL), 1 ); height: 100%; border-radius: var(--borderRadius); animation: loading-bar 1s cubic-bezier(0.645, 0.045, 0.355, 1); position: relative; z-index: 1; }
.ep-bar__progress:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; background-size: 50px 50px; animation: move 2s linear infinite; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; animation: move 2s linear infinite; }
@keyframes loading-bar {
0% { width: 0; }
100% { width: 100%; }
}
@keyframes move {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
/*=loader*/
/* HTML: */
.loader { display: inline-flex; gap: 5px; }
.loader:before,
.loader:after { content: ""; width: 25px; aspect-ratio: 1; box-shadow: 0 0 0 3px inset var(--ep-primary); animation: l4 1.5s infinite; border-radius: 2px; }
.loader:after { --s: -1; animation-delay: 0.75s }
@keyframes l4 {
0% { transform: scaleX(var(--s,1)) translate(0) rotate(0) }
16.67% { transform: scaleX(var(--s,1)) translate(-50%) rotate(0) }
33.33% { transform: scaleX(var(--s,1)) translate(-50%) rotate(90deg) }
50%, 100% { transform: scaleX(var(--s,1)) translate(0) rotate(90deg) }
}
.myform-dialog .blazor-dialog-content { height: 60vh; }
.myform-dialog ul { list-style: none; padding: 0; }
.myform-dialog li { cursor: pointer; line-height: 15px; list-style-type: none; padding: 10px; display: block; float: left; vertical-align: top; text-align: center; width: 90px; height: 70px; font-size: 12px; font-weight: 300; color: #999; }
.myform-dialog li div { margin: 0px auto 10px; font-size: 32px; }
.myform-dialog li div i { color: var(--ep-primary); }
.forminfo-dialog .blazor-dialog-content { height: 80vh; }
/*
Form layout
*/
.ep-formLayoutHost > .ep-layout { height: 100%; }
.monaco-editor-container { height: 500px; border: 1px solid gray; }
/* Lookup Standard */
.ep-lookup { position: relative }
.ep-lookup.-with-buttons .k-floating-label-container .ep-textbox__input { width: 100%; }
.ep-lookup__wrapper { position: relative; display: inline-flex; width: 100%; border: none; border-radius: 0; background: none; }
.ep-lookup__wrapper .k-dropdown-wrap { border-width: 0; }
.ep-lookup__wrapper .k-dropdown-wrap .k-select { border-top-width: 1px; border-bottom-width: 1px; border-radius: 0; border-color: var(--borderColor); }
.ep-lookup__wrapper .k-dropdown-multiple-wrap .k-select { border: none; padding: 0; }
.ep-lookup__wrapper .k-dropdown-wrap input:focus-within ~ .k-select { border-color: var(--ep-primary); }
.ep-lookup .k-dropdown { width: 100% }
.ep-lookup.label-left .ep-textbox__input,
.ep-lookup.label-right .ep-textbox__input { width: 100%; }
.ep-popup .ep-grid { height: 100% }
.ep-popup .ep-grid .k-grid { max-height: 100% }
.ep-lookup-grid { width: 100%; height: 300px; top: 0; left: 0; z-index: 1500000; }
.ep-dropdown-wrapper { padding: 0 0 30px 0; position: relative; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 3%), 0 4px 5px 0 rgb(0 0 0 / 4%); height: 100%; }
.ep-dropdown-wrapper .ep-grid { height: 100%; }
.ep-dropdown-wrapper .ep-grid .k-grid { max-height: 100%; }
.ep-dropdown-footer { background-color: var(--mainPanelBG); width: 100%; position: absolute; bottom: 0; padding: 0; height: 30px; display: flex; }
.ep-dropdown-footer .k-button { transform: scale(.6); }
.ep-dropdown-footer .ep-more-data { line-height: 30px; padding: 0 .5rem; color: var(--textDefault); font-size: var(--txtSizeSmall) }
.ep-dropdown-wrapper .k-toolbar { background: var(--panelBG); }
.ep-lookup .ep-control__buttons .k-button { border-color: var(--borderColor); }
.ep-lookup .ep-control__buttons .ep-button:only-child .k-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: var(--borderDivider); }
.ep-lookup .ep-control__buttons .ep-button:not(:only-child):first-child .k-button { border-radius: 0; border-left-width: 0; border-right-width: 0; }
.ep-lookup .ep-control__buttons .ep-button:last-child .k-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.ep-lookup .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; border-left-width: 0; border-right-width: var(--borderDivider); }
.ep-lookup .ep-control__buttons .ep-button:not(:only-child):not(:last-child) .k-button { border-radius: 0; }
.ep-lookup .k-textbox { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ep-multiple > .k-floating-label-container { flex-basis: 0; }
.big-textarea { height: 450px; }
.tableColumnLeft * { text-align: left; justify-content: left; }
.tableColumnCenter * { text-align: center; justify-content: center; }
.tableColumnRight * { text-align: right; justify-content: right; }
/* Image picker */
.ep-image-picker { display: flex; }
.ep-image-picker .ep-control__wrapper { border: 2px dashed var(--borderColor); border-radius: 10px; justify-content: center; flex-direction: column; align-items: center; padding: 1rem; box-sizing: border-box; gap: 1rem; }
.ep-image-picker__icon { font-size: 8rem; line-height: 1; height: 8rem; }
.ep-image-picker__loader { height: 12rem; width: 100%; display: flex; align-items: center; max-height: 100%; }
.ep-image-picker__img { position: relative; }
.ep-image-picker__img img { /* width: 100%; */ /* max-width: 50%; */ /* height: auto; */ /* max-height: 50%; */ max-height: 200px; border: 1px solid var(--borderColor); }
.ep-image-picker__img .clear-image { position: absolute; top: -10px; right: -10px; }
.ep-image-picker__img .clear-image .k-button { border-radius: 100px; /*transform: scale(.8);*/ color: #fff; }
.ep-image-picker__buttons { display: flex; justify-content: center; }
/* Input text align */
.ep-input__textalign-left .k-input-inner,
.ep-input__textalign-left .ep-textbox__input { text-align: left; }
.ep-input__textalign-center .k-input-inner,
.ep-input__textalign-center .ep-textbox__input { text-align: center; }
.ep-input__textalign-right .k-input-inner,
.ep-input__textalign-right .ep-textbox__input { text-align: right; }
/* --------------------*/
/* ---- =SKELETONS ------ */
/* --------------------*/
:root { --skeletonBG: #dbdbdb; --skeletonTabBG: #f1f5f6; --skeletonCellBG: #dbdbdb; --skeletonBorder: #ebebeb; --skeletonWidth: 125px; --skeletonTabWidth: 80px; --skeletonHeight: calc(2.286*var(--mainFont)); --skeletonIconDimension: calc(2.5*var(--mainFont)); --skGridFooterH: 47px; --skQuickSearchH: 32px; --skGridHeaderH: 76px; --skCardWidth: 300px; --skCardHeight: 300px; }
.dark-mode { --skeletonBG: #494a6c; --skeletonBorder: #363756; --skeletonTabBG: #575883; --skeletonCellBG: #494a6c; }
.font-small { --skGridGooterH: 45px; }
@keyframes ep-skeleton-pulse {
0% { opacity: 1; }
50% { opacity: .4; }
100% { opacity: 1; }
}
/*.skeleton-delay { animation-name: ep-skeleton-opacity; animation-duration: 1s; animation-iteration-count: 1; }
@keyframes ep-skeleton-opacity {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
*/
.ep-skeleton-row { display: flex; gap: 1rem; align-items: center; }
.toolbar__main .ep-skeleton-row { justify-content: flex-end; }
.ep-skeleton { animation: ep-skeleton-pulse 1.5s ease-in-out .5s infinite; background-color: var(--skeletonBG); border-radius: var(--borderRadius); }
.ep-skeleton-text { border-radius: 10px; width: 200px; height: calc(0.6*var(--skeletonHeight)); }
.ep-skeleton-header { border-radius: 10px; width: 200px; height: var(--skeletonHeight); }
.ep-skeleton-rect { width: var(--skeletonWidth); height: var(--skeletonHeight); }
.ep-skeleton-square { width: var(--skeletonHeight); height: var(--skeletonHeight); }
.ep-skeleton-circle { width: var(--skeletonHeight); height: var(--skeletonHeight); border-radius: 100px; }
.ep-skeleton-circle.-icon { width: var(--skeletonIconDimension); height: var(--skeletonIconDimension); }
.ep-skeleton-circle.-check { width: var(--skeletonHeight); height: var(--skeletonHeight); }
.ep-skeleton-tab { width: var(--skeletonTabWidth); height: var(--skeletonHeight); background: var(--skeletonTabBG); }
.ep-skeleton-tab-active { width: var(--skeletonTabWidth); height: var(--skeletonHeight); }
.ep-skeleton-switch { width: 50px; height: var(--skeletonHeight); border-radius: 100px; }
.ep-skeleton.-w40 { width: 40px; }
.ep-skeleton.-w50 { width: 50px; }
.ep-skeleton.-w60 { width: 60px; }
.ep-skeleton.-w150 { width: 150px; }
.ep-skeleton.-wauto { width: auto; }
.pageheader.-skeleton .pagetitle { min-height: 25px; }
.pageheader.-skeleton.-report .pagetitle { min-height: 25px; padding-bottom: 20px; }
.main-panel.-browser.-withfilters { flex-direction: row; gap: 1rem; }
.main-panel.-dashboard-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1rem; width: 100%; height: 100%; }
.ep-quicksearch .ep-skeleton { height: var(--skQuickSearchH); }
.ep-skeleton-grid { display: flex; flex-direction: column; border: 2px solid var(--skeletonBorder); width: 100%; }
.ep-skeleton-grid .d-flex { gap: 1rem; }
.ep-skeleton-gridheader { padding: 1rem; height: 76px; border-bottom: 2px solid var(--skeletonBorder); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ep-skeleton-gridfooter { padding: 1rem; height: var(--skGridFooterH); border-top: 2px solid var(--skeletonBorder); }
.ep-skeleton-gridheader .ep-skeleton { height: 100%; }
.ep-skeleton-gridbody { gap: 1rem; display: flex; flex-direction: column; flex-grow: 1; padding: 1rem; }
.ep-skeleton-gridbody .ep-skeleton { background: var(--skeletonCellBG) }
.ep-skeleton-array .ep-skeleton-grid.array-edit-grid { width: 62%; }
.ep-skeleton-array-details .ep-skeleton-grid.array-edit-grid { width: 50%; }
.ep-skeleton-array-details .array-details { width: 50%; display: flex; flex-direction: column; gap: 1rem; }
.main-panel.-array.ep-skeleton-array,
.main-panel.-array.ep-skeleton-array-details { gap: 1rem; }
.ep-skeleton-panel { display: flex; flex-direction: column; gap: 1rem; }
.ep-skeleton-tabs { display: flex; gap: 1rem; }
.ep-skeleton-filters { padding: 1rem; border: 2px solid var(--skeletonBorder); width: 20%; }
.ep-skeleton-row.master-edit-row { border: 2px solid var(--skeletonBorder); padding: 1rem; align-items: flex-start; flex-grow: 1; }
.ep-skeleton-row.master-edit-row .ep-skeleton-panel { height: 100%; justify-content: space-between; }
/* --------------------*/
/* ---- =QUICK-FILTERS ------ */
/* --------------------*/
.quick-filters-pane .ep-panel { margin: 0; }
.quick-filters-pane .ep-panel__content { overflow: auto; }
.quick-filters-wrapper { display: flex; }
.quick-filters { display: flex; }
:root { --buttonWidth: 3.5rem; --buttonHeight: 3.5rem; --buttonPosition1: calc(var(--buttonHeight)*(-1.4)); --buttonPosition2: calc(var(--buttonHeight)*(-2.8)); --buttonPosition3: calc(var(--buttonHeight)*(-4.2)); --buttonPosition4: calc(var(--buttonHeight)*(-5.6)); --buttonPosition5: calc(var(--buttonHeight)*(-7)); }
.ep-floating-actions-wrapper { position: fixed; bottom: 0; right: 0; /*width: 100px; height: 100px;*/ z-index: 100000; }
.ep-floating-actions-wrapper.-visible { width: 100vw; height: 100vh; }
.ep-floating-actions { position: fixed; right: calc(var(--buttonWidth)*0.5); bottom: calc(var(--buttonWidth)*0.9); filter: url("#shadowed-goo"); width: var(--buttonWidth); height: var(--buttonHeight); z-index: 100001; }
.ep-floating-actions.-open { width: 0px; height: 80vh; }
.ep-floating-actions__overlay { background: rgba(0,0,0, .5); width: 100vw; height: 100vh; position: fixed; bottom: 0; right: 0; z-index: 100000; transition: all ease-in .2s; }
.ep-floating-actions__btn { background: var(--ep-primary); border-radius: 100%; width: var(--buttonWidth); height: var(--buttonHeight); color: white; text-align: center; line-height: var(--buttonHeight); transform: translate3d(0, 0, 0); transition: all ease-out 200ms; z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; position: absolute; bottom: 0; right: 0; font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.ep-floating-actions__btn:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); }
.ep-floating-actions__btn.-disabled { pointer-events: none; opacity: 0.4; }
.-open .ep-floating-actions__btn { transition-timing-function: linear; transition-duration: 200ms; transform: scale(0.8, 0.8) translate3d(0, 0, 0); }
.m-hamburger { width: 20px; height: 3px; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -1.5px; transition: transform 200ms; }
.hamburger-1 { transform: translate3d(0, -8px, 0); }
.hamburger-2 { transform: translate3d(0, 0, 0); }
.hamburger-3 { transform: translate3d(0, 8px, 0); }
.ep-floating-actions__item { position: absolute; text-align: center; line-height: 1; transform: translate3d(0, 0, 0); transition: transform ease-out 200ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; visibility: hidden; }
.ep-floating-actions__item > span { color: #fff; font-weight: 600; display: none; white-space: nowrap; }
.ep-floating-actions__item .k-button { width: var(--buttonWidth); height: var(--buttonHeight); text-align: center; line-height: 1; }
.ep-floating-actions__item .k-button { background: #fff; border-color: #fff; color: var(--ep-primary); }
.ep-floating-actions__item .k-button:hover { background: #e1e5e6; border-color: #fff; color: var(--ep-primary); }
.ep-floating-actions__item .k-button .k-button-text i[class*='fa'] { font-size: 1.5rem; }
.-open .hamburger-1 { transform: translate3d(0, 0, 0) rotate(45deg); }
.-open .hamburger-2 { transform: translate3d(0, 0, 0) scale(0.1, 1); }
.-open .hamburger-3 { transform: translate3d(0, 0, 0) rotate(-45deg); }
.-open .ep-floating-actions__item { transition-duration: 180ms; transform: translate3d(0, 0, 0); visibility: initial; }
.-open .ep-floating-actions__item > span { display: block; }
.-open .ep-floating-actions__item:nth-child(1) { transition-duration: 190ms; transform: translate3d(0, var(--buttonPosition1), 0); }
.-open .ep-floating-actions__item:nth-child(2) { transition-duration: 290ms; transform: translate3d(0, var(--buttonPosition2), 0); }
.-open .ep-floating-actions__item:nth-child(3) { transition-duration: 390ms; transform: translate3d(0, var(--buttonPosition3), 0); }
.-open .ep-floating-actions__item:nth-child(4) { transition-duration: 490ms; transform: translate3d(0, var(--buttonPosition4), 0); }
.-open .ep-floating-actions__item:nth-child(5) { transition-duration: 590ms; transform: translate3d(0, var(--buttonPosition5), 0); }
/*.-open .ep-floating-actions__item:nth-child(4) .k-button { transition-duration: 390ms; transform: translate3d(0, -18px, 0); }*/
/*.-open .ep-floating-actions__item:nth-child(5) .k-button { transition-duration: 490ms; transform: translate3d(0, -0px, 0); }*/
.floating-animation { width: var(--buttonWidth); height: var(--buttonHeight); }
/*.ep-floating-actions__item .k-button { aspect-ratio: 1; }*/
/* --------------------*/
/* ---- =CODE EDITOR ------ */
/* --------------------*/
.ep-code-editor { width: 100%; height: 100%; }
.ep-code-editor .ep-control__wrapper { height: 100%; }
.ep-code-editor__input { width: 100%; min-height: 2rem; height: 100%; border: 1px solid var(--borderColor); }
/* --------------------*/
/* ---- =TIMELINE ------ */
/* --------------------*/
.ep-timeline { --dotsize: 3rem; --borderRadius: .5rem; --lineColor: #c1c5c6; }
.dark-mode .ep-timeline { --lineColor: #424748; }
.timeln-list { position: relative; padding: 0; margin: 0; list-style: none; /* width: 99.8%; */ background: var(--shade98); padding-bottom: 2px; padding-right: 2px; }
.timeln-item { position: relative; color: var(--textDefault); box-sizing: border-box; }
/* line */
.timeln-item::before { content: ""; position: absolute; height: 100%; border-color: var(--lineColor); }
/* arrow*/
.timeln__content:before { content: ""; background: inherit; width: 20px; height: 20px; display: block; position: absolute; transform: rotate(45deg); border-radius: 0 0 0 2px; z-index: 1; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; border: 1px solid transparent; transition: all .2s ease-in-out; }
/* VERTICAL */
.-vertical.-after .timeln-item { padding-left: calc(var(--dotsize) + 2rem ); padding-bottom: 1rem; }
/* line */
.-vertical.-after .timeln-item::before { left: calc(var(--dotsize)/2); top: 1rem; width: 0; height: 100%; border-right: 2px solid var(--lineColor); }
.-vertical.-after .timeln-item:last-child::before { height: 0; }
.-vertical.-after .timeln__icon { left: 0; }
.-vertical.-after .timeln-item:last-child::before { height: 0; }
/* arrow*/
.-vertical.-after .timeln__content:before { left: -5px; top: 15px; }
.-vertical.-before .timeln-item { padding-right: calc(var(--dotsize) + 2rem ); padding-bottom: 1rem; }
/* line */
.-vertical.-before .timeln-item::before { right: calc(var(--dotsize)/2); left: initial; border-right: 2px solid var(--lineColor); }
.-vertical.-before .timeln-item:last-child::before { right: calc(var(--dotsize)/2); left: initial; border-right: initial; }
.-vertical.-before .timeln__icon { position: absolute; right: 0; left: initial; }
/* arrow*/
.-vertical.-before .timeln__content:before { right: -5px; top: 15px; }
.-vertical.-alternate .timeln-item { width: 50%; margin-left: calc(50% - var(--dotsize) - 2px); padding-left: calc(var(--dotsize) + 2rem ); }
.-vertical.-alternate .timeln-item:nth-child(2n+1) { padding-right: calc(var(--dotsize) + 2rem ); padding-left: 0; margin-left: 0; }
.-vertical.-alternate .timeln-item .timeln__icon { position: absolute; left: 0; right: initial; }
.-vertical.-alternate .timeln-item:nth-child(2n+1) .timeln__icon { position: absolute; right: 0; left: initial; }
/* line */
.-vertical.-alternate .timeln-item::before { left: calc(var(--dotsize)/2); right: initial; top: 1rem; width: 0; height: 100%; border-right: 2px solid var(--lineColor); }
.-vertical.-alternate .timeln-item:nth-child(2n+1)::before { right: calc(var(--dotsize)/2); left: initial; }
.-vertical.-alternate .timeln-item:last-child::before { height: 0; }
/* arrow*/
.-vertical.-alternate .timeln-item .timeln__content:before { left: -5px; top: 15px; right: initial; }
.-vertical.-alternate .timeln-item:nth-child(2n+1) .timeln__content:before { right: -5px; top: 15px; left: initial; }
.-vertical .timeln-list.-dotted .timeln-item:not(:last-child)::before { border-style: dotted; border-width: 0 2px 0 0; }
.-vertical .timeln-list.-dashed .timeln-item:not(:last-child)::before { border-style: dashed; border-width: 0 2px 0 0; }
/* HORIZONTAL */
.-horizontal .timeln-list { display: flex; flex-wrap: nowrap; height: auto; align-items: center; }
.-horizontal .timeln-item { padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; flex-basis: 250px; flex-grow: 1; flex-shrink: 0; margin-bottom: 0; height: auto; display: flex; flex-direction: column; justify-content: flex-end; display: flex; justify-content: center; padding: 0 1rem; }
.-horizontal .timeln__content { margin: 0 1rem; text-align: center; /* padding: 2rem 0; */ margin: 2rem 0; }
/*line*/ .-horizontal .timeln-list .timeln-item::before { content: ""; border-top: 2px solid var(--lineColor); border-width: 2px 0 0 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 0; z-index: 1; left: 50%; }
.-horizontal .timeln-item .timeln__icon { position: static; right: initial; left: 50%; bottom: 0; top: initial; transform: initial; z-index: 2; align-self: center; }
/*arrow*/ .-horizontal .timeln-item:nth-child(2n+1) .timeln__content:before { right: initial; left: 50%; top: initial; bottom: -5px; transform: translateX(-50%) rotate(45deg); }
/*arrow*/ .-horizontal .timeln-item:nth-child(2n) .timeln__content:before { right: initial; left: 50%; bottom: initial; top: -5px; transform: translateX(-50%) rotate(45deg); }
.-horizontal.-alternate .timeln-item:nth-child(2n+1) .timeln__content:last-child { visibility: hidden; }
.-horizontal.-alternate .timeln-item:nth-child(2n) .timeln__content:first-child { visibility: hidden; }
.-horizontal.-after .timeln-list { align-items: flex-start; }
.-horizontal.-after .timeln-item .timeln__content:first-child { visibility: hidden; display: none; }
/*line*/ .-horizontal.-after .timeln-list .timeln-item::before { content: ""; border-top: 2px solid var(--lineColor); border-width: 2px 0 0 0; position: absolute; top: calc(var(--dotsize)/2); transform: translateY(-50%); width: 100%; height: 0; z-index: 1; left: 50%; }
/*arrow*/ .-horizontal.-after .timeln-item .timeln__content:before { right: initial; left: 50%; bottom: initial; top: -5px; transform: translateX(-50%) rotate(45deg); }
.-horizontal.-before .timeln-list { align-items: flex-end; }
.-horizontal.-before .timeln-item .timeln__content:last-child { visibility: hidden; display: none; }
/*line*/ .-horizontal.-before .timeln-list .timeln-item::before { content: ""; border-top: 2px solid var(--lineColor); border-width: 2px 0 0 0; position: absolute; top: initial; bottom: calc(var(--dotsize)/2); transform: translateY(-50%); width: 100%; height: 0; z-index: 1; left: 50%; }
/*arrow*/ .-horizontal.-before .timeln-item .timeln__content:before { right: initial; left: 50%; top: initial; bottom: -5px; transform: translateX(-50%) rotate(45deg); }
/*line dotted*/ .-horizontal .timeln-list.-dotted .timeln-item::before { border-style: dotted; }
/*line dashed*/ .-horizontal .timeln-list.-dashed .timeln-item::before { border-style: dashed; }
/*line*/ .-horizontal .timeln-list .timeln-item:last-child::before { border-width: 0; }
/* content */
.timeln__content { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; border-radius: var(--borderRadius); box-sizing: border-box; transition: all .2s ease-in-out; background: var(--cardBG); position: relative; border: 1px solid transparent; }
.timeln__content > div { padding: var(--generalPadding); border-radius: var(--borderRadius); background: var(--cardBG); position: relative; z-index: 2; display: flex; flex-direction: column; gap: .5rem; }
.timeln__header { font-size: 1rem; margin: 0; }
.timeln__header .badge { background: var(--buttonBG); padding: .25rem .5rem; border-radius: var(--borderRadius); color: var(--textDefault); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.timeln__body { font-weight: 300; line-height: 1.5; font-size: 1rem; }
.timeln__footer { font-weight: 300; font-style: italic; opacity: 0.85; font-size: .9rem; }
.timeln__icon { position: absolute; width: var(--dotsize); height: var(--dotsize); border-radius: 100%; text-align: center; font-size: 3rem; background: var(--ep-primary); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--shade96); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; transition: all ease-out 200ms; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform-origin: center; font-size: 1rem; }
.timeln-item:hover .timeln__icon { background: var(--shade82); color: var(--ep-primary); border-color: var(--ep-primary); }
.timeln__content:hover,
.timeln__content:hover:before { border-color: var(--ep-primary); }
/* colors */
.timeln-item.-info .timeln__icon,
.timeln-item.-info .badge { background: var(--ep-info); color: #fff; }
.timeln-item.-info:hover .timeln__icon { background: #fff; color: var(--ep-info); border-color: var(--ep-info); }
.timeln-item.-info .timeln__content:hover,
.timeln-item.-info .timeln__content:hover:before { border-color: var(--ep-info); }
.timeln-item.-danger .timeln__icon,
.timeln-item.-danger .badge { background: var(--ep-danger); color: #fff; }
.timeln-item.-danger:hover .timeln__icon { background: #fff; color: var(--ep-danger); border-color: var(--ep-danger); }
.timeln-item.-danger .timeln__content:hover,
.timeln-item.-danger .timeln__content:hover:before { border-color: var(--ep-danger); }
.timeln-item.-success .timeln__icon,
.timeln-item.-success .badge { background: var(--ep-success); color: #fff; }
.timeln-item.-success:hover .timeln__icon { background: #fff; color: var(--ep-success); border-color: var(--ep-success); }
.timeln-item.-success .timeln__content:hover,
.timeln-item.-success .timeln__content:hover:before { border-color: var(--ep-success); }
.timeln-item.-warning .timeln__icon,
.timeln-item.-warning .badge { background: var(--ep-warning); color: #fff; }
.timeln-item.-warning:hover .timeln__icon { background: #fff; color: var(--ep-warning); border-color: var(--ep-warning); }
.timeln-item.-warning .timeln__content:hover,
.timeln-item.-warning .timeln__content:hover:before { border-color: var(--ep-warning); }
.ep-scriptobject-help { padding: 0 0 0 1rem; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ep-scriptobject-help-host { display: flex; flex-direction: column; min-height: 0; gap: .25rem; }
.ep-scriptobject-help-host h2 { font-size: 1.35rem; word-break: break-word; margin: 0; }
.ep-method { list-style: none; border-bottom: 1px solid var(--borderColor); padding: 0; border-radius: var(--borderRadius); border: 1px solid var(--borderColor); margin: 0 0 1rem 0; background: var(--cardBG); }
.ep-method-line { padding: .2rem .5rem; }
.ep-method-line:nth-child(2n) { background: hsla(0deg, 0%, 0%, 3%); }
.ep-method-line.-name { font-size: 1.25rem; font-weight: 400; display: flex; justify-content: space-between; }
.dark-mode .ep-method-line:nth-child(2n+1) { background: hsla(0deg, 0%, 100%, 5%); }
.ep-method-line a { word-break: break-all; }
.ep-line-title { font-weight: 500; }
.ep-line-data { word-break: break-all; }
.ep-scriptobject-breadcrumbs { display: flex; gap: .2rem .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.ep-scriptobject-breadcrumbs .divider { font-size: .9em; line-height: 1; }
.methods-container { overflow-y: auto; }
/* --------------------*/
/* ---- =DBSYNC ------ */
/* --------------------*/
.ep-dbsync { display: flex; justify-content: center; align-items: center; height: 100vh; }
.ep-synccard { padding: 2rem; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; width: 700px; background: var(--mainBG); }
.ep-synccard__header { font-weight: 400; color: var(--textDefault); margin-bottom: 2rem; }
.ep-dbsync p { font-size: 1.2rem; }
.ep-synccard p.warning { background: var(--ep-warning); color: var(--ep-warning-on-subtle); padding: .5rem; border-radius: var(--borderRadius); font-size: 1rem; text-align: center; }
.ep-dbchart { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; }
.ep-dbitem { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.ep-dbitem > i { font-size: 10rem; }
.ep-dbarrow { font-size: 3rem; padding-bottom: 3rem; }
.ep-dbcheck { font-size: 3rem; padding-bottom: 3rem; color: var(--ep-success); }
.ep-dbver { padding: .5rem; border: 1px dashed var(--borderColor); font-size: 1.5rem; white-space: nowrap; }
.ep-synccard__footer { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 3rem; }
.ep-dbsynching { padding-bottom: 3rem; text-align: center; }
.ep-dbtimer { font-family: monospace; font-size: 2rem; border: 1px dashed var(--borderColor); display: inline-block; padding: 0 .5rem; }
.ep-dbprocess { font-size: 1.5rem; }
.ep-dbmessage { height: 50px; border-radius: var(--borderRadius); background: var(--ep-secondary); color: #fff; margin-bottom: .5rem; text-align: center; line-height: 50px; font-size: 1.2rem; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 1rem; }
.ep-dbmessage .no-message { opacity: .5; font-family: monospace; }
.ep-dbmessage .warning { color: var(--ep-warning); font-family: monospace; }
.ep-dbmessage .success { color: var(--ep-success-subtle); font-family: monospace; }
.ep-dbitem.color-change:first-child .fa-duotone:before { animation: color-change-1 1s linear infinite alternate both; }
.ep-dbitem.color-change:last-child .fa-duotone:before { animation: color-change-2 1s linear 1s infinite alternate both; }
@keyframes color-change-1 {
0% { color: var(--textDefault); }
100% { color: var(--ep-primary); }
}
@keyframes color-change-2 {
0% { color: var(--textDefault); }
100% { color: var(--ep-secondary); }
}
.gradient__start { stop-color: var(--ep-primary); }
.gradient__end { stop-color: var(--ep-secondary); }
.svg-item { width: 100%; font-size: 16px; margin: 0 auto; animation: donutfade 1s; }
@keyframes donutfade {
/* this applies to the whole svg item wrapper */
0% { opacity: .2; }
100% { opacity: 1; }
}
@media (min-width: 992px) {
.svg-item { width: 80%; }
}
.donut-ring { stroke: var(--shade98); }
.donut-segment { transform-origin: center; stroke: var(--ep-primary); }
.segment-message { stroke: var(--ep-info); animation: donut1 3s; }
.segment-warning { stroke: var(--ep-warning); animation: donut2 3s; }
.segment-error { stroke: var(--ep-danger); animation: donut3 3s; }
.donut-item.-message { color: var(--ep-info); }
.donut-item.-warning { color: var(--ep-warning); }
.donut-item.-error { color: var(--ep-danger); }
.donut-item h2 { font-size: 3em; font-weight: 600; line-height: 1; margin: 0; }
.donut-item h3 { font-size: 1em; font-weight: 400; line-height: 1; margin: 0; color: var(--textDefault); }
.donut-hole,
.donut-ring,
.donut-segment { fill: transparent; }
.donut-segment { transition: .2s ease-in-out stroke-dasharray; }
.ep-dbcounters { display: flex; gap: 2rem; justify-content: space-between; align-items: center; }
.donut-item { position: relative; transition: .25s transform ease-in-out; cursor: pointer; }
.donut-item:hover { transform: scale(1.05); }
.donut-item .donut-text { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; margin: 0; padding: 0; line-height: 1; transform: translateY(-50%); display: flex; justify-content: center; flex-direction: column; gap: 5px; }
.ep-synccard__header { font-weight: 600; color: var(--textDefault); border-bottom: 1px solid var(--borderColor); margin: -2rem -2rem 2rem -2rem; padding: 1rem; }
.ep-dbbars .k-progressbar { height: 1.5rem; background-color: var(--shade82); }
.ep-dbbars .k-progress-status { padding-block: 1rem; padding-inline: 0.5rem; min-width: 10px; text-align: center; display: inline-block; white-space: nowrap; color: #fff; font-weight: 600; }
.ep-dbbars .bar-container .k-progressbar .k-selected { background-color: var(--ep-primary); }
.ep-dbbars .bar-container:last-child .k-progressbar .k-selected { background-color: var(--ep-secondary); }
/*@keyframes donut1 {
0% { stroke-dasharray: 0, 100; }
100% { stroke-dasharray: 69, 31; }
}
@keyframes donut2 {
0% { stroke-dasharray: 0, 100; }
100% { stroke-dasharray: 69, 31; }
}
@keyframes donut3 {
0% { stroke-dasharray: 0, 100; }
100% { stroke-dasharray: 69, 31; }
}*/
/* --------------------*/
/* ---- =STATCARS ------ */
/* --------------------*/
.ep-statcard { background-color: #fff; border-radius: var(--borderRadius); flex: 1 1 0; padding: 1rem; border: 1px solid var(--borderColor); box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03); }
.ep-statcard__mainheader { color: var(--textStrong); font-size: 2rem; margin: 0.5rem 0 0 0; font-weight: 400; }
.ep-statcard__mainheader sup { font-size: .6em; }
.ep-statcard__mainheader span { font-weight: 300; }
.ep-statcard__subheader { color: hsla(var(--ep-primaryH), var(--ep-primaryS), 30%,1); font-size: 1.2rem; margin: 0; background: hsla(var(--ep-primaryH), var(--ep-primaryS), 90%,1); border-radius: var(--borderRadius); padding: 3px 5px; display: inline-block }
.ep-statcard p { margin: 0; }
.ep-statcard.-simple .ep-statcard__subheader { color: var(--textGray); font-size: 1rem; margin: 0; background: none; border-radius: var(--borderRadius); padding: 0; display: inline-block; }
.ep-statcard.-simple.-solid .ep-statcard__subheader { color: #fff; opacity: .6; }
.ep-statcard .-text-center { text-align: center; }
.ep-col:not(.ep-layout) { display: flex; flex-direction: column; gap: 1rem; }
.ep-row:not(.ep-layout) { display: flex; gap: 1rem; }
.dark-mode .ep-statcard { background-color: #000; }
.ep-statcard.-green .ep-statcard__subheader { color: var(--ep-green-d); background-color: var(--ep-green-l); }
.ep-statcard.-red .ep-statcard__subheader { color: var(--ep-red-d); background-color: var(--ep-red-l); }
.ep-statcard.-orange .ep-statcard__subheader { color: var(--ep-orange-d); background-color: var(--ep-orange-l); }
.ep-statcard.-lime .ep-statcard__subheader { color: var(--ep-lime-d); background-color: var(--ep-lime-l); }
.ep-statcard.-turquoise .ep-statcard__subheader { color: var(--ep-turquoise-d); background-color: var(--ep-turquoise-l); }
.ep-statcard.-cyan .ep-statcard__subheader { color: var(--ep-cyan-d); background-color: var(--ep-cyan-l); }
.ep-statcard.-blue .ep-statcard__subheader { color: var(--ep-blue-d); background-color: var(--ep-blue-l); }
.ep-statcard.-purple .ep-statcard__subheader { color: var(--ep-purple-d); background-color: var(--ep-purple-l); }
.ep-statcard.-green.-solid { background: var(--ep-green-d); }
.ep-statcard.-red.-solid { background: var(--ep-red); }
.ep-statcard.-orange.-solid { background: var(--ep-orange); }
.ep-statcard.-lime.-solid { background: var(--ep-lime-d); }
.ep-statcard.-turquoise.-solid { background: var(--ep-turquoise); }
.ep-statcard.-cyan.-solid { background: var(--ep-cyan-d); }
.ep-statcard.-blue.-solid { background: var(--ep-blue); }
.ep-statcard.-purple.-solid { background: var(--ep-purple); }
.ep-statcard.-solid { border: none; background: var(--ep-primary) }
.ep-statcard.-solid .ep-statcard__mainheader,
.ep-statcard.-solid p { color: #fff; }
.ep-statcard:not(.-solid) .separator { color: var(--ep-primary) }
.ep-statcard:not(.-solid).-green .separator { color: var(--ep-green-d); }
.ep-statcard:not(.-solid).-red .separator { color: var(--ep-red-d); }
.ep-statcard:not(.-solid).-orange .separator { color: var(--ep-orange-d); }
.ep-statcard:not(.-solid).-lime .separator { color: var(--ep-lime-d); }
.ep-statcard:not(.-solid).-turquoise .separator { color: var(--ep-turquoise-d); }
.ep-statcard:not(.-solid).-cyan .separator { color: var(--ep-cyan-d); }
.ep-statcard:not(.-solid).-blue .separator { color: var(--ep-blue-d); }
.ep-statcard:not(.-solid).-purple .separator { color: var(--ep-purple-d); }
.ep-fake-table { display: flex; flex-direction: column; gap: 0; background-color: #F2F2F2; border-radius: var(--borderRadius); margin-top: 1rem; overflow: hidden; }
.ep-fake-table .ep-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; background: var(--shade90); padding: .5rem; font-size: 1rem; }
.ep-fake-table .ep-row:nth-child(2n+1) { background: var(--shade82); }
.ep-panel.-solid { background-color: var(--ep-primary); }
.ep-panel.-solid.-secondary { background-color: var(--ep-secondary); }
.ep-panel.-solid.-green { background-color: var(--ep-green-d); }
.ep-panel.-solid.-red { background-color: var(--ep-red); }
.ep-panel.-solid.-orange { background-color: var(--ep-orange); }
.ep-panel.-solid.-lime { background-color: var(--ep-lime-d); }
.ep-panel.-solid.-turquoise { background-color: var(--ep-turquoise); }
.ep-panel.-solid.-cyan { background-color: var(--ep-cyan-d); }
.ep-panel.-solid.-blue { background-color: var(--ep-blue); }
.ep-panel.-solid.-purple { background-color: var(--ep-purple); }
.ep-panel.-solid .ep-panel__header { background-color: transparent; border: none; }
.ep-panel.-solid .ep-panel__title { font-size: 1.25rem; color: #fff; }
.ep-panel.-solid .toggle-arrow__left:after,
.ep-panel.-solid .toggle-arrow__right:after { background-color: #fff; }
.ep-panel.-solid .ep-toggle:hover { opacity: 1; background: hsla(210deg, 25%, 96%, 20%) !important }
.ep-panel.-simple { border-color: transparent; background-color: transparent; }
.ep-panel.-simple .ep-panel__header { background-color: transparent; padding: 5px; border-color: transparent; }
.ep-panel.-simple .ep-panel__body { padding: 0; }
.-pattern { position: relative; }
.-pattern.-lines::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='303' height='303' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3.9'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='769' cy='229' r='13'/%3E%3Ccircle cx='539' cy='269' r='13'/%3E%3Ccircle cx='603' cy='493' r='13'/%3E%3Ccircle cx='731' cy='737' r='13'/%3E%3Ccircle cx='520' cy='660' r='13'/%3E%3Ccircle cx='309' cy='538' r='13'/%3E%3Ccircle cx='295' cy='764' r='13'/%3E%3Ccircle cx='40' cy='599' r='13'/%3E%3Ccircle cx='102' cy='382' r='13'/%3E%3Ccircle cx='127' cy='80' r='13'/%3E%3Ccircle cx='370' cy='105' r='13'/%3E%3Ccircle cx='578' cy='42' r='13'/%3E%3Ccircle cx='237' cy='261' r='13'/%3E%3Ccircle cx='390' cy='382' r='13'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .25; background-position: top; background-attachment: fixed; }
.-pattern.-squares::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='463' height='463' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-opacity='0.83'%3E%3Crect x='-40' y='40' width='75' height='75'/%3E%3Crect x='-35' y='45' width='65' height='65'/%3E%3Crect x='-30' y='50' width='55' height='55'/%3E%3Crect x='-25' y='55' width='45' height='45'/%3E%3Crect x='-20' y='60' width='35' height='35'/%3E%3Crect x='-15' y='65' width='25' height='25'/%3E%3Crect x='-10' y='70' width='15' height='15'/%3E%3Crect x='-5' y='75' width='5' height='5'/%3E%3Crect width='35' height='35'/%3E%3Crect x='5' y='5' width='25' height='25'/%3E%3Crect x='10' y='10' width='15' height='15'/%3E%3Crect x='15' y='15' width='5' height='5'/%3E%3Crect x='40' width='75' height='75'/%3E%3Crect x='45' y='5' width='65' height='65'/%3E%3Crect x='50' y='10' width='55' height='55'/%3E%3Crect x='55' y='15' width='45' height='45'/%3E%3Crect x='60' y='20' width='35' height='35'/%3E%3Crect x='65' y='25' width='25' height='25'/%3E%3Crect x='70' y='30' width='15' height='15'/%3E%3Crect x='75' y='35' width='5' height='5'/%3E%3Crect x='40' y='80' width='35' height='35'/%3E%3Crect x='45' y='85' width='25' height='25'/%3E%3Crect x='50' y='90' width='15' height='15'/%3E%3Crect x='55' y='95' width='5' height='5'/%3E%3Crect x='120' y='-40' width='75' height='75'/%3E%3Crect x='125' y='-35' width='65' height='65'/%3E%3Crect x='130' y='-30' width='55' height='55'/%3E%3Crect x='135' y='-25' width='45' height='45'/%3E%3Crect x='140' y='-20' width='35' height='35'/%3E%3Crect x='145' y='-15' width='25' height='25'/%3E%3Crect x='150' y='-10' width='15' height='15'/%3E%3Crect x='155' y='-5' width='5' height='5'/%3E%3Crect x='120' y='40' width='35' height='35'/%3E%3Crect x='125' y='45' width='25' height='25'/%3E%3Crect x='130' y='50' width='15' height='15'/%3E%3Crect x='135' y='55' width='5' height='5'/%3E%3Crect y='120' width='75' height='75'/%3E%3Crect x='5' y='125' width='65' height='65'/%3E%3Crect x='10' y='130' width='55' height='55'/%3E%3Crect x='15' y='135' width='45' height='45'/%3E%3Crect x='20' y='140' width='35' height='35'/%3E%3Crect x='25' y='145' width='25' height='25'/%3E%3Crect x='30' y='150' width='15' height='15'/%3E%3Crect x='35' y='155' width='5' height='5'/%3E%3Crect x='200' y='120' width='75' height='75'/%3E%3Crect x='40' y='200' width='75' height='75'/%3E%3Crect x='80' y='80' width='75' height='75'/%3E%3Crect x='85' y='85' width='65' height='65'/%3E%3Crect x='90' y='90' width='55' height='55'/%3E%3Crect x='95' y='95' width='45' height='45'/%3E%3Crect x='100' y='100' width='35' height='35'/%3E%3Crect x='105' y='105' width='25' height='25'/%3E%3Crect x='110' y='110' width='15' height='15'/%3E%3Crect x='115' y='115' width='5' height='5'/%3E%3Crect x='80' y='160' width='35' height='35'/%3E%3Crect x='85' y='165' width='25' height='25'/%3E%3Crect x='90' y='170' width='15' height='15'/%3E%3Crect x='95' y='175' width='5' height='5'/%3E%3Crect x='120' y='160' width='75' height='75'/%3E%3Crect x='125' y='165' width='65' height='65'/%3E%3Crect x='130' y='170' width='55' height='55'/%3E%3Crect x='135' y='175' width='45' height='45'/%3E%3Crect x='140' y='180' width='35' height='35'/%3E%3Crect x='145' y='185' width='25' height='25'/%3E%3Crect x='150' y='190' width='15' height='15'/%3E%3Crect x='155' y='195' width='5' height='5'/%3E%3Crect x='160' y='40' width='75' height='75'/%3E%3Crect x='165' y='45' width='65' height='65'/%3E%3Crect x='170' y='50' width='55' height='55'/%3E%3Crect x='175' y='55' width='45' height='45'/%3E%3Crect x='180' y='60' width='35' height='35'/%3E%3Crect x='185' y='65' width='25' height='25'/%3E%3Crect x='190' y='70' width='15' height='15'/%3E%3Crect x='195' y='75' width='5' height='5'/%3E%3Crect x='160' y='120' width='35' height='35'/%3E%3Crect x='165' y='125' width='25' height='25'/%3E%3Crect x='170' y='130' width='15' height='15'/%3E%3Crect x='175' y='135' width='5' height='5'/%3E%3Crect x='200' y='200' width='35' height='35'/%3E%3Crect x='200' width='35' height='35'/%3E%3Crect y='200' width='35' height='35'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .1; background-position: top; background-attachment: fixed; background-blend-mode: multiply; }
.-pattern.-pixels::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='46' height='46' fill-opacity='0.6' fill='%23000000'/%3E%3C/svg%3E"); position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .1; background-position: top; background-attachment: fixed; }
.-pattern.-stripes::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 20 20'%3E%3Cg fill-opacity='1'%3E%3Cpolygon fill='%23FFFFFF' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23FFFFFF' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .1; background-position: top; background-attachment: fixed; }
.-pattern.-radial::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cdefs%3E%3CradialGradient id='a' cx='500' cy='500' r='0%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='500' cy='500' r='0%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1000' height='1000'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='4.3' stroke-miterlimit='10' stroke-opacity='1'%3E%3Ccircle cx='500' cy='500' r='725'/%3E%3Ccircle cx='500' cy='500' r='700'/%3E%3Ccircle cx='500' cy='500' r='675'/%3E%3Ccircle cx='500' cy='500' r='650'/%3E%3Ccircle cx='500' cy='500' r='625'/%3E%3Ccircle cx='500' cy='500' r='600'/%3E%3Ccircle cx='500' cy='500' r='575'/%3E%3Ccircle cx='500' cy='500' r='550'/%3E%3Ccircle cx='500' cy='500' r='525'/%3E%3Ccircle cx='500' cy='500' r='500'/%3E%3Ccircle cx='500' cy='500' r='475'/%3E%3Ccircle cx='500' cy='500' r='450'/%3E%3Ccircle cx='500' cy='500' r='425'/%3E%3Ccircle cx='500' cy='500' r='400'/%3E%3Ccircle cx='500' cy='500' r='375'/%3E%3Ccircle cx='500' cy='500' r='350'/%3E%3Ccircle cx='500' cy='500' r='325'/%3E%3Ccircle cx='500' cy='500' r='300'/%3E%3Ccircle cx='500' cy='500' r='275'/%3E%3Ccircle cx='500' cy='500' r='250'/%3E%3Ccircle cx='500' cy='500' r='225'/%3E%3Ccircle cx='500' cy='500' r='200'/%3E%3Ccircle cx='500' cy='500' r='175'/%3E%3Ccircle cx='500' cy='500' r='150'/%3E%3Ccircle cx='500' cy='500' r='125'/%3E%3Ccircle cx='500' cy='500' r='100'/%3E%3Ccircle cx='500' cy='500' r='75'/%3E%3Ccircle cx='500' cy='500' r='50'/%3E%3Ccircle cx='500' cy='500' r='25'/%3E%3C/g%3E%3Crect fill-opacity='1' fill='url(%23b)' width='1000' height='1000'/%3E %3C/svg%3E"); background-size: cover; position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .1; background-position: top; background-attachment: fixed; }
.-pattern.-pixels2::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.2' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23000000'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23000000'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(70) translate(-980 -735)'%3E%3Cg fill='%23000000'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E"); position: absolute; top: 0; left: 0; background-repeat: repeat; opacity: .1; background-position: top; background-attachment: fixed; background-size: cover; }
/* =no comment / =empty comment */
.no-content { text-align: center; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.no-content i { font-size: 5rem; }
.no-content h2 { font-weight: 400; font-size: 2rem; }
/* arrange buttons vertically */
.vertical-buttons { flex-flow: column; }
/* remove default margins and overlapping */
.vertical-buttons .k-button { margin: 0; }
.vertical-buttons.k-button-group > .k-button + .k-button { margin-inline-start: 0; }
/* adjust rounded and square corners */
.vertical-buttons.k-button-group > .k-button:first-child:not(:only-child) { border-radius: 2px 2px 0 0; }
.vertical-buttons.k-button-group > .k-button:last-child:not(:only-child) { border-radius: 0 0 2px 2px; }
/* --------------------*/
/* ---- =KEYBOARD NAVIGATION SHORTCUTS ------ */
/* --------------------*/
.kbc-page { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.kbc-group { flex-grow: 1; max-width: 30%; }
.kbc-group h2 { font-size: 1.5rem; font-weight: 400; margin: 0 0 0.5rem 0; color: var(--textStrong); }
.kbc-list { list-style: none; padding: 0; margin: 0; }
.kbc-list__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borderColor); padding: .5rem 0; }
.kbc-list__item:first-child { border-top: 1px solid var(--borderColor); }
.kbc-title { color: var(--textDefault); font-size: .9rem; line-height: 1.2; }
.kbc-shortcut { display: flex; align-items: center; gap: 5px; justify-content: flex-end; flex-shrink: 0; flex-grow: 0; }
.kbc-button { border: 1px solid var(--borderColor); padding: 3px 5px; border-radius: var(--borderRadius); background: var(--cardBG); box-shadow: var(--shadow); box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px; font-size: .9rem; color: var(--textStrong); }
.dark-mode .kbc-button { background: var(--shade10); color: var(--shade90); }
.kbc-list__item:hover .kbc-title { color: var(--textStrong); }
.kbc-list__item:hover .kbc-button { background: var(--ep-primary); color: var(--shade96)}
.dark-mode .kbc-list__item:hover .kbc-button { color: var(--shade04)}