:root {
    --default-font-size: 16px;
    --blackOrWhiteColor: 0, 0, 0;
    --lightOrDarkColor: 255, 255, 255;
    --borderColor: rgba(var(--blackOrWhiteColor), 0.114); 
    --borderColorMedium: color(display-p3 0.92 0.92 0.92);    
    --borderLightColor: rgba(var(--blackOrWhiteColor), 0.05);
    --borderDividerColor: #CAC4D04a;

    --radiusControl: 10px;
    --radiusSurface: 14px;
    --radiusPanel: 16px;
    --radiusPill: 999px;
    --radiusCircle: 50%;
    
    --inputBorderRadius: 6px;
    --borderRadius: 6px;
    --borderRadiusSmall: 3px;
    --borderRadiusSmaller: 5px;
    --borderRadiusMedium: 8px;
    --borderRadiusBig: 16px;
    --whiteColor: 255, 255, 255; 
    --blackColor: 0, 0, 0;
    --grayColor: 108, 117, 125;
    --phoneBorderRadius: 16px;
    --phoneBorderRadiusBig: 16px;
    --phoneFlatButtonColor: #e5e5e5;
    --presentationBackColor: #e4e4e4;
    --presentationBorderColor:  #f2f2f2;   
    --presentationBackTickColor: #b4b4b4;
    --frameBorder: .0625rem solid var(--borderColor);
    --frameShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
    --gramColor: #0d68c5;
    --opt-accent: #f5b800;      
    --opt-badge-text: var(--opt-accent);
    --opt-badge-border: var(--opt-accent);
    --opt-badge-bg: transparent;
    --appColor: #f4f4f5;  /* faf9f5 f7f7f5 for light, 1c1c1e for dark */ 
    --appColorAlt: #e9e9e9;
    /* --appCalendarColor: #fcfcfe;  */
    --appWindowColor: #fff;
    --appWindowColorLight: #fafafa; /* fcfcfd */
    --appDropdownMenuColor: var(--appWindowColor);
    --appDropdownMenuActiveColor: rgba(var(--blackOrWhiteColor), 0.08);
    --appDropdownMenuHoverColor: rgba(var(--blackOrWhiteColor), 0.05);
    --appDropdownMenuShadow: rgba(28, 40, 64, 0.04) 0px 0px 0px 1px,
        rgba(28, 40, 64, 0.12) 0px 4px 8px -4px,
        rgba(28, 40, 64, 0.16) 0px 4px 12px -2px;
    --appSideColor: #d7dedf;
    --appSideTextColor: var(--textColor); 
    --appSideTextSize: 13px;
    --appSideHotColor: #fff; 
    --appSideHoverColor: /*#fff6;*/ var(--hotBackground);
    --appSideSettingsHotColor: var(--appColor);
    --appSideSettingsHoverColor: var(--appColor);
    --appSideBackColor : #cfcfcf;
    --appSidaBackdropColor: rgba(0, 0, 0, .17);
    --appHeaderSelectedColor: #efedf2; 
    --appHeaderDialogColor: #949495; 
    --textColor: color(display-p3 .13 .13 .13);  
    --textColorLight: color(display-p3 .4 .4 .4);  
    --textMatchColor: var(--eventColor);
    --textLightColor: 106, 109, 112;
    --textBold: 600;
    --textBoldLight: 500;
    --textBoldLighter: 300;
    --textLargeSize: 14px;
    --textSize: 12px;
    --textTitleSize: 18px;
    --textSmallSize: 11px;
    --textSmallerSize: 10px;
    --disabledTextColor: #8c8c8c;
    --eventColor: rgb(36, 91, 198);    
    --eventColorRgba:  36,91,198;  
    --eventBorderColor: #0A6ED1;
    --eventHoverColor: #0759ac;
    --eventHoverBackground: #ebf5fe;
    --focusColor: #e8e8e8;
    --focusBoxShadow: 0px 0px 0px 3px rgba(0, 144, 237, .4);
    --focusBorderColor: #99bbef; 
    --hotBackground: rgba(var(--blackOrWhiteColor), 0.05);
    --hotBackgroundTable: #f5f7f9;
    --hotBackgroundLight: #ebf5fe80;
    --redColor: #F55555;
    --flatBtnColor: var(--textColor);
    --flatBtnBorder: 1px solid transparent;
    --flatBtnBackground: none;
    --flatBtnHoverColor: var(--eventColor);
    --flatBtnHoverBackground: #fff;
    --flatBtnHoverBorder: 1px solid #0854a0;
    --btnColor: green;
    --btnHeight: 30px;
    --btnWidth: 30px;
    --btnSmallHeight: 24px;
    --btnSmallWidth: 24px;
    --btnFilterHeight: 26px;
    --btnFilterWidth: 26px;
    --btnBackground: var(--templateInputBackground);
    --btnShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
    --btnBorderColor: #bbb;
    --btnHoverBackground: #f2f2f2;
    --groupBackground: #f5f5f5;
    --groupBackgroundLight: #dddddd90;
    --searchResultBackground: #dce2f8;
    --modalBackgroundColor: var(--appColor); 
    --notifBackgroundColor: #322F35;
    --notifTextColor: #F5EFF7;
    --notifBorderRadius: var(--borderRadius);
    --rippleWidth: 300px;
    --rippleHeight: 300px;
    --signaturePadColor: #eee;
    --skeletonFirstColor: #f0f0f0;
    --skeletonSecondColor: #CBD5E1;
    --spinner-color: #69717d;
    --spinner-size: 20px;
    --templateScrollBarBackground: #EFEFEF;
    --templateScrollBarThumb: rgba(194, 194, 194, .45);
    --templateScrollBarThumbActive: rgba(113, 113, 113, 1);
    --templateSideBackground: var(--appSideColor);
    --templateAppHeaderBackground: #fff;
    --templateCardHeaderBackground: #FAFAFA;
    --templateCardFooterBackground: #FAFAFA;
    --templateInputBackground: #fff;
    --templateInputDisabledBorder: var(--borderColor);
    --templateInputDisabledColor: #a2a4a6;
    --templateInputDisabledBackground: transparent;
    --templateInputHeight: 30px;
    --templateViewBackground: var(--appColor);
    --templateLayoutBackground: var(--appColor);
    --templateViewContentBackground: #fff;
    --templateRelatedTableHeader: #f5f5f5;
    --templateCalendarWeekDay: linear-gradient(45deg, #f0f0f0 2.50%, #ffffff50 2.50%, #ffffff50 50%, #f0f0f0 50%, #f0f0f0 52.50%, #ffffff50 52.50%, #ffffff50 100%);
    --templateCalendarToday: #e5f4eb;
    --stageBackground: #ccc;
    --stageHoverBackground: #bbb;
    --stageActiveBackground: #4a8cf7;
    --stageActiveHoverBackground: #4a8cf7;
    --stageDoneBackground: #47B972;
    --stageDoneHoverBackground: #389c65;
}
html[data-device="phone"] {
    --appColor:  #f1f1f3;
    --appHeaderSelectedColor: #edebf0;
}
html[data-theme='light'] {
    --appHeaderDownColor: var(--appColor);
    --templateScrollBarBackground: #EFEFEF; 
    --templateSideBackground: var(--appSideColor);
    --templateAppHeaderBackground: #fff;
    --templateCardHeaderBackground: #FAFAFA;
    --templateCardFooterBackground: #FAFAFA;
    --templateInputBackground: #fff;
    --templateSearchInputBackground: #e9eaed;
    --templateViewBackground: var(--appColor);
    --templateViewContentBackground: #fff;
}
html[data-theme='dark'] {
    --badge-bg: color-mix(in srgb, var(--accent) 12%, black);
    --blackOrWhiteColor: 255, 255, 255;
    --lightOrDarkColor: 36, 37, 38;
    --grayColor: 81, 81, 81;
    --eventColor: #6aaaea;
    --eventColorRgba: 106, 170, 234;
    --eventBorderColor: #6aaaea61;
    --focusColor: #3A3B3C;
    --phoneFlatButtonColor: #3a3b3cb3;
    --searchResultBackground: #3e4758;
    --focusBoxShadow: 0px 0px 0px 3px rgba(251, 251, 254, .5);
    --focusBorderColor: #2d64f6;
    --borderColor: #2a2a2a;
    --btnBorderColor: rgba(255, 255, 255, 0.15);
    --borderColorMedium: color(display-p3 .2 .2 .2);
    --borderLightColor: rgba(var(--blackOrWhiteColor), 0.15);
    --borderDividerColor: rgba(var(--blackOrWhiteColor), 0.1);
    --textColor: #E4E6EB;
    --textLightColor: 161, 161, 163;
    --textMatchColor: var(--eventColor);
    --btnHoverBackground: #383838;
    --eventHoverBackground: #2e2f30;
    --hotBackground: #1e1e1eba;
    --hotBackgroundTable: #3C3D3E;
    --hotBackgroundLight: #ebf5fe30;
    --appSideBackColor: #000;
    --appSidaBackdropColor: rgba(0, 0, 0, 0.8);
    --appSideColor: #35363d; 
    --appSideHotColor: #2d2d2d;
    --appSideHoverColor: #3c3b3b4d;
    --appSideSettingsHotColor: #2d2d2d;
    --appSideSettingsHoverColor: #3c3b3b4d;
    /* --appCalendarColor: var(--appWindowColor);    */
    --appHeaderSelectedColor: #2c3232;
    --appHeaderDialogColor: #000;
    --appHeaderDownColor: var(--appColor);
    --appWindowColor:#171719; /* #1c1c1e;*/
    --appWindowColorLight: #000;
    --appColorAlt: #2b2b2b;
    --appDropdownMenuColor: #2d2d2d;
    --appDropdownMenuActiveColor: #353535;
    --appDropdownMenuHoverColor: #353535; 
    --appDropdownMenuShadow: 0 5px 10px rgba(0, 0, 0, .35);
    --appColor: var(--templateViewBackground);
    --modalBackgroundColor:var(--appWindowColor);
    --groupBackground: #2b2b2b;
    --flatBtnHoverBackground: #3A3B3C;
    --presentationBackColor: #191b1f;
    --presentationBorderColor: black;
    --presentationBackTickColor: #292b2f;
    --signaturePadColor: #444;
    --skeletonFirstColor: #272727f2; 
    --skeletonSecondColor: #3a3b3d;
    --notifBackgroundColor: color-mix(in srgb, var(--appWindowColorLight) 90%, var(--textColor) 10%);
    --notifTextColor: var(--textColor);
    --stageBackground: #353535;
    --stageHoverBackground: #8e8e93d9;
    --templateScrollBarBackground: #18191A;
    --templateScrollBarThumb: #232323;
    --templateSideBackground: var(--appWindowColor);
    --templateViewBackground: #000;
    --templateLayoutBackground: #000;
    --templateAppHeaderBackground: #242526;
    --templateCardHeaderBackground: #2d2d2d;
    --templateCardFooterBackground: #2d2d2d;
    --templateInputBackground: #2b2b2b;
    --templateInputDisabledBackground: #222;
    --templateInputDisabledBorder: var(--templateInputDisabledBackground);
    --templateSearchInputBackground: #2b2b2b;
    --templateViewContentBackground: #242526;
    --templateRelatedTableHeader: #2e2f30;
    --templateCalendarWeekDay: linear-gradient(45deg, #242526 2.50%, #ffffff10 2.50%, #ffffff10 50%, #242526 50%, #242526 52.50%, #ffffff10 52.50%, #ffffff10 100%);
    --templateCalendarToday: #ffffff20;
}
html[data-theme='dark'][data-device='desktop'],
html[data-theme='dark'][data-device='browser'] {
    --appWindowColor: #1a1a1a;
    --appWindowColorLight: #242424;/*#3A3B3C;*/
    --appColor: #161612;
    --groupBackground: #2b2b2b;
    --borderColor: rgb(66, 66, 56); /*red;/* rgba(255, 255, 255, 0.15);*/
    --btnBorderColor: rgba(255, 255, 255, 0.15);
    --frameShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    --flatBtnHoverBackground: var(--appWindowColorLight);
    --hotBackground: #2b2b2b;
    --hotBackgroundTable: #2b2b2b;
    --modalBackgroundColor: #1b1b1b;
    --appDropdownMenuColor: #292929;
    --appDropdownMenuActiveColor: #3d3d3d;
    --appDropdownMenuHoverColor: #404040;/*rgba(var(--blackOrWhiteColor), 0.035);*/
    --templateViewBackground: var(--appColor);
    --templateScrollBarBackground: #18191A;
    --templateScrollBarThumb: #1f1f1f;
    --templateScrollBarThumbActive: #2b2b2b;
    --templateSideBackground: var(--appColor);
    --templateAppHeaderBackground: #1f1f1f;
    --templateCardHeaderBackground: #2d2d2d;
    --templateCardFooterBackground: #2d2d2d;
    --templateInputBackground: #292929;
    --templateInputDisabledBackground: #222;
    --templateInputDisabledBorder: #3131319c;
    --templateViewContentBackground: #242526;
    --templateRelatedTableHeader: #2e2f30;
    --templateCalendarWeekDay: linear-gradient(45deg, #242526 2.50%, #ffffff10 2.50%, #ffffff10 50%, #242526 50%, #242526 52.50%, #ffffff10 52.50%, #ffffff10 100%);
    --templateCalendarToday: #ffffff20;
    --appSideHotColor: #484848;
    --appSideHoverColor: #404040;
    --groupBackground: #242424;
    --btnBackground: #313131;
    --templateViewBackground: var(--appColor);
    --templateLayoutBackground: #202020;
    --modalBackgroundColor: #212121;

    --templateInputBackground: #282828;
    --hotBackground: #383838;
    --hotBackgroundTable: #313131;
    --appDropdownMenuColor: #242424;
    --templateScrollBarThumb: #484848;
    --templateScrollBarThumbActive: #383838;
    --frameShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.125), 0px 0px 8px 0px rgba(0, 0, 0, 0.125);
}
html[data-theme='dark'] .app-content {
   border: 1px solid rgb(66, 66, 56);
}

html[data-theme='dark'] .fc-event-main .field-value {
    --textColor: var(--lightOrDarkColor);
}
html[data-theme='dark'] .fld-option .field-option-stage-label>span {
    color: var(--textColor) !important;
}
html[data-theme='dark'] .alert-success {
    --alertSuccessColor: #47B972;
    color: color-mix(in srgb, var(--alertSuccessColor) 46%, var(--textColor) 54%);
    background-color: color-mix(in srgb, var(--alertSuccessColor) 12%, var(--appWindowColor) 88%);
    border-color: color-mix(in srgb, var(--alertSuccessColor) 24%, var(--appWindowColor) 76%);
}
html[data-theme='dark'] .alert-success a {
    color: color-mix(in srgb, var(--alertSuccessColor) 72%, var(--textColor) 28%);
}
html[data-theme='dark'] .alert-danger {
    --alertDangerColor: #F55555;
    color: color-mix(in srgb, var(--alertDangerColor) 58%, var(--textColor) 42%);
    background-color: color-mix(in srgb, var(--alertDangerColor) 16%, var(--appWindowColor) 84%);
    border-color: color-mix(in srgb, var(--alertDangerColor) 28%, var(--appWindowColor) 72%);
}
html[data-theme='dark'] .alert-danger a {
    color: color-mix(in srgb, var(--alertDangerColor) 72%, var(--textColor) 28%);
}
html[data-theme='dark'] .alert-danger .close {
    color: color-mix(in srgb, var(--alertDangerColor) 62%, var(--textColor) 38%);
    opacity: .85;
    text-shadow: none;
}
html[data-theme='dark'] .alert-danger .close:hover,
html[data-theme='dark'] .alert-danger .close:focus {
    color: color-mix(in srgb, var(--alertDangerColor) 78%, var(--textColor) 22%);
    opacity: 1;
}
html[data-theme='dark'] .alert-info {
    --alertInfoColor: #5BC0DE;
    color: color-mix(in srgb, var(--alertInfoColor) 54%, var(--textColor) 46%);
    background-color: color-mix(in srgb, var(--alertInfoColor) 18%, var(--appWindowColor) 82%);
    border-color: color-mix(in srgb, var(--alertInfoColor) 30%, var(--appWindowColor) 70%);
}
html[data-theme='dark'] .alert-info a {
    color: color-mix(in srgb, var(--alertInfoColor) 72%, var(--textColor) 28%);
}
html[data-theme='dark'] .d-visible.layout-side-full::before {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8) !important;
}
html[data-theme='light'] .alert-success a {
    color:#155724;
}
html[data-theme='dark'] {
    .fa, .fad, .fal,
    .gbtn:not(.btn-tool.icon-only),
    .field-option,
    .field-activity-value,
    .view-header-icon,
    .dash-chart,
    .view-chart-container,
    .side-header-logo img,
    .delete,
    .modal-header-warning,
    .related-tree-section-title,
    .stage-content,
    .stage-item-lost {
        filter: saturate(80%);
    }   
}
html,
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-rendering: optimizelegibility;
    height: 100%;
    margin: 0;
    padding: 0;
}
a {
    color: var(--eventColor);
}
a:hover {
    color: var(--eventColor);
}
a:focus,
a:focus-visible {
    outline: none;
}
a.dropdown-toggle,
a.dropdown-toggle:hover{
    color: var(--textColor);
}
a.primary {
    color: rgba(var(--textLightColor), 1);
}
.alert-dark {
    background: rgba(var(--blackOrWhiteColor), .15);
    border-color: rgba(var(--blackOrWhiteColor), .1);
    color: var(--textColor);
}
.overflow-set {
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    color: var(--textColor);
    padding-top: 5px;
    padding-bottom: 5px;
}
h3 {
    font-size: 15px;
}
input:-webkit-autofill {
    -webkit-text-fill-color: rgba(var(--textLightColor), 1);
}
.br-d {
    border-radius: var(--borderRadius) !important;
}
.border-all {
    border: 1px solid var(--borderColor)
}
.border-top {
    border-top: 1px solid var(--borderColor)
}
.border-bottom {
    border-bottom: 1px solid var(--borderColor)
}
html[data-device="browser"] .alert,
html[data-device="desktop"] .alert,
html[data-device="browser"] .view-title *,
html[data-device="desktop"] .view-title *,
html[data-device="browser"] .view-subtitle *,
html[data-device="desktop"] .view-subtitle *,
html[data-device="browser"] .layout-preview .preview-field .preview-value,
html[data-device="desktop"] .layout-preview .preview-field .preview-value,
html[data-device="browser"] .related-tree-right *,
html[data-device="desktop"] .related-tree-right *,
html[data-device="browser"] .related-tree-header a,
html[data-device="desktop"] .related-tree-header a,
html[data-device="browser"] .related-content-tile *,
html[data-device="desktop"] .related-content-tile *,
html[data-device="browser"] .related-footer *,
html[data-device="desktop"] .related-footer *,
html[data-device="browser"] .field-option,
html[data-device="desktop"] .field-option,
html[data-device="browser"] .field-lookup,
html[data-device="desktop"] .field-lookup,
html[data-device="browser"] .field-lbl,
html[data-device="desktop"] .field-lbl,
html[data-device="browser"] .field-value,
html[data-device="desktop"] .field-value {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
html[data-device="tablet"] .related-content-tile *,
html[data-device="phone"] .related-content-tile *,
html[data-device="tablet"] .cardlist-item-value *,
html[data-device="phone"] .cardlist-item-value *,
.table tr td *,
.carditem *,
.assistant-header *,
.assistant-footer *,
.related-tree-header *,
.related-tree-footer *,
.related-tree-body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
[contenteditable]:focus {
    outline: none;
}
body {
    margin: 0;
    color: var(--textColor);
    font-family: Inter, Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--textSize);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1rem;
    height: 100%;
    background-color: var(--templateViewBackground);
}
button:not(.dropdown-toggle) {
    position: relative;
    letter-spacing: -0.02em;
}
/*button sup {
    position: absolute;
    top: -5px;
    font-size: 85%;
}
button sup span {
    position: fixed;
}*/
.c-gram {
    color: var(--gramColor);
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 7 Pro';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.fad {
    font-family: "Font Awesome 7 Duotone";
}
.fad::before {
    font-size: inherit;
}
.fal {
    font-weight: var(--textBoldLighter) !important;
}
.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}
.fa-spin+.fa-spin {
    display: none;
}
.horizontal {
    display: flex !important;
    gap: 5px;
    align-items: center;
}
.disabled-text {
    color: var(--disabledTextColor);
}
.light-text {
    color: rgba(var(--textLightColor), 1)  !important;
}
.pr-12 {
    padding-right: 12px !important;
}
.pl-12 {
    padding-left: 12px !important;
}
.ml-12 {
    margin-left: 12px !important;
}
.mr-12 {
    margin-right: 12px !important;
}

.mention {
    color: var(--eventColor);
    font-weight: var(--textBold);
    padding: 2px 4px;
}
.mention:hover {
    text-decoration: underline;
    cursor: pointer;
}
.inline-variable-body {
    display: inline;
    background-color: rgba(var(--eventColorRgba), 0.15);
    color: var(--textColor);
    border-radius: var(--borderRadius);
    padding: 3px 4px;
    box-decoration-break: clone;
    cursor: pointer;
}
.inline-variable-body:hover {
    box-shadow: rgba(var(--eventColorRgba), 0.3) 0px 0px 0px 1px;
}
.inline-variable{
    white-space: nowrap !important;
}
.onerow:not(.ui-calendar-body):not(.ui-calendar-days){
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}
.vertical {
    display: flex;
    gap: 5px;
    flex-direction: column;
    /*align-items: flex-start;*/
}
.horizontal-line {
    flex: 1 1 100%;
    height: 1px;
    background-color: var(--borderLightColor);
}
.text{
    color: var(--textColor);
}

.text-bold {
    font-weight: var(--textBold);
}

.text-smaller {
    font-size: var(--textSmallerSize) !important;
}

.text-light {
    color: rgba(var(--textLightColor), 1) !important;
}

.gap-0 {
    gap:0 !important;
}
.gap-1 {
    gap: 5px !important;
}
.gap-2 {
    gap: 10px !important;
}
.gap-3 {
    gap: 16px !important;
}
@keyframes pulse {
    0% {
        background-color: var(--skeletonFirstColor);
        color: var(--skeletonFirstColor);
    }
    50% {
        background-color: var(--skeletonSecondColor);
        color: var(--skeletonSecondColor);
    }
    100% {
        background-color: var(--skeletonFirstColor);
        color: var(--skeletonFirstColor);
    }
}
.txt.skeleton {
    animation: pulse 2s infinite ease-in-out;
    border-radius: var(--borderRadius);
}
.app-root {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
}
.app-side {
    color: var(--appSideTextColor);
    width: 210px;
    max-width: 210px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    background-color: var(--appColor);
}
html[data-theme='dark'][data-device='desktop'] .app-side,
html[data-theme='dark'][data-device='browser'] .app-side{
    background: var(--templateSideBackground);
}
html[data-theme='dark'][data-device='desktop'] .app-side.toggled:hover,
html[data-theme='dark'][data-device='browser'] .app-side.toggled:hover {
	border-right: 1px solid var(--borderColor);
}
html[data-device='browser'],
html[data-device='desktop'] {
    .app-side.toggled~.app-main {
        flex-basis: calc(100% - 45px);
        margin-left: 45px;
        transition: flex-basis 0.2s cubic-bezier(0.465, 0.183, 0.153, 0.946);
        transition-delay: unset;
    }
    .app-side {
        transition: width .2s;
        padding-left: 6px;
    }
    .app-side.toggled {
        width: 45px;
        position: absolute;
        left: 0;
        z-index: 999;
        padding-left: 6px;
        padding-right: 5px;
    }
    .app-side.toggled:hover{
        width: 210px;
        box-shadow: 0 0 60px 10px rgba(var(--blackColor), .32);
    }
    .app-side,
    .app-side.toggled:hover{
        padding-right: 0;
    }
    .side-item{
        margin: 0;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .app-side:not(.toggled) .side-header-user,
    .app-side:not(.toggled) .side-item-add,
    .app-side:not(.toggled) .side-item-text,
    .app-side:hover .side-header-user,
    .app-side:hover .side-item-add,
    .app-side:hover .side-item-text{
        opacity: 1;
        transform: none;
    }
    .app-side:not(.toggled) .side-section-title,
    .app-side:hover .side-section-title{
        opacity: 0.6;
    }
    .app-side .side-section-title,
    .app-side .side-header-user,
    .app-side .side-item-add,
    .app-side .side-item-text {
        transition: transform .2s, opacity .2s;
        opacity: 0;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .app-side .side-item-text{
        flex: 1;
    }
    .app-side.toggled .side-section-title{
        margin-left:8px
    }
    .side-item-icon {
        display: flex;
        margin-right: 0;
        position: absolute;
        width: 32px;
        height: 32px;
        justify-content: center;
    }
    .side-item {
        min-height: 32px;
        width: 100%;
        position: relative;
    }
    .app-side:not(:hover).toggled .side-content {
        scrollbar-width: none !important;
    }
    .app-side:not(:hover).toggled .side-content::-webkit-scrollbar{
        display: none !important;
    }
    .side-header button.dropdown-toggle{
        padding: 0;
        margin: 5px 5px 5px 0;
    }
    .app-side:not(:hover).toggled .side-header button.dropdown-toggle::after {
        display: none;
    }
    .app-side:not(:hover).toggled .dropdown-menu.show {
        visibility: hidden;
    }
    @supports (-moz-appearance:none) {
        .app-side:not(.toggled) .side-content,
        .app-side.toggled:hover .side-content {
            padding-right: 8px;
        }
    }
}
.app-main {
    overflow: hidden;
    min-height: 0;
    background-color: var(--templateViewBackground);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "header"
        "info"
        "content";
    flex: 1 1 auto;
    min-width: 0;
}
.app-main.assistant-open {
    grid-template-columns: minmax(0, 1fr) 450px;
    grid-template-areas:
        "header  header"
        "info    info"
        "content assistant";
}
.app-assistant {
    --textSizeAi: calc(var(--textSize) + 1px);
    font-size: var(--textSizeAi);
}
.app-assistant {    
    display: flex; 
    position: relative;
    grid-area: assistant;
    overflow: visible;
}
.app-assistant.toggled{
    flex-direction: row;
    position: relative;
    z-index: 115;
}
.assistant-container {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background: var(--appWindowColor);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 12px 12px 0;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0px 1px 2px 0px #34374214, 0px 2px 4px 0px #3437420a, 0px 0px 0px .75px #34374214;
    user-select: text;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016)), radial-gradient(700px 520px at -20% 18%, rgba(55, 160, 255, 0.063), rgba(0, 0, 0, 0) 20%), radial-gradient(620px 480px at 115% 78%, rgba(160, 90, 255, 0.04), rgba(0, 0, 0, 0) 62%);
    z-index: 111;
    gap: 16px;
}
.app-assistant.toggled .assistant-container {
    box-shadow: rgba(52, 55, 66, 0.08) 0px 1px 2px 0px, rgba(52, 55, 66, 0.04) 0px 2px 4px 0px, rgba(52, 55, 66, 0.08) 0px 0px 0px 0.75px, rgba(0, 0, 0, 0.12) -5px 0px 5px -5px;
}

.ui-frame {
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadiusMedium);
    border: 1px solid var(--borderColorMedium);    
}

.assistant-sidebar {
    position: absolute;
    top: 12px;
    left: 0;
    bottom: 12px;
    width: 300px;
    z-index: 110;
    background-color: var(--appColor);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
    opacity: 1;
    transform: translateX(0);
    transition: transform .15s ease-in-out;
    will-change: transform;
    padding: 16px 8px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    height: calc(100% - 56px);
}
.app-assistant.toggled .assistant-sidebar {
    transform: translateX(-100%);
    border-right: none;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    font-size: var(--textSize);
    box-shadow: rgba(0, 0, 0, 0.1) -2px 0px 12px, rgba(0, 0, 0, 0.05) 2px 0px 2px;
}
.assistant-sidebar-title {
    font-size: calc(var(--textSizeAi) + 2px) !important;
    font-weight: var(--textBold);
    border-bottom: 1px solid var(--borderColorMedium);
    padding-bottom: 8px;
    margin-right: 8px;
    margin-left: 8px;
}
.assistant-sidebar-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    height: 100%;
}
.assistant-sidebar .sidebar-section-title {
    font-weight: var(--textBold);
    padding: 2px 8px 2px 12px;
}
.assistant-sidebar .sidebar-item {
    border-radius: var(--borderRadius);
    color: var(--textColor);
}
.assistant-sidebar .sidebar-item:hover,
.assistant-sidebar .sidebar-item:focus-within {
    background: rgba(var(--blackOrWhiteColor), .04);
    cursor: pointer;
}
.assistant-sidebar .sidebar-item .flex-fill {
    min-width: 0;
    padding: 7px 12px;    
}
.assistant-sidebar .sidebar-item .flex-fill span:not(.icon) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assistant-sidebar .sidebar-item .flex-fill .icon {
    flex-shrink: 0;
}
.assistant-sidebar .sidebar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility .14s ease;
    display: none;
    z-index: 10001;
}
.assistant-sidebar .sidebar-item:hover .sidebar-actions,
.assistant-sidebar .sidebar-item:focus-within .sidebar-actions {
    opacity: 1;
    visibility: visible;
}
.assistant-sidebar .sidebar-item:hover .sidebar-actions{
    display: flex !important;
    flex-shrink: 0;
}
.assistant-sidebar .sidebar-actions .gbtn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}
/* Popis riadku ma triedu .horizontal, ktora nesie `display:flex !important` —
   samotne .d-none by ju neprebilo, preto tato specifickejsia verzia. */
.assistant-sidebar .sidebar-item > .sidebar-item-label.d-none {
    display: none !important;
}

/* inplace premenovanie chatu — nahradza .sidebar-item-label v tom istom riadku */
.assistant-sidebar .sidebar-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 1px 4px 1px 8px;
    padding: 5px 8px;
    font: inherit;
    color: var(--textColor);
    background: var(--appWindowColor);
    border: 1px solid #7c3aed;
    border-radius: var(--borderRadius);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
/* pocas editacie riadok nesmie reagovat na hover ako klikatelny */
.assistant-sidebar .sidebar-item:has(.sidebar-rename-input) {
    background: transparent !important;
    cursor: default;
}
.assistant-sidebar .sidebar-item:has(.sidebar-rename-input) .sidebar-actions {
    display: none !important;
}
.assistant-header {
    font-size: calc(var(--textSizeAi) + 2px);
    font-weight: var(--textBold);
    border-bottom: 1px solid var(--borderColorMedium);
    padding-bottom: 8px;
}
.assistant-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 8px;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: static;
}

.fld-markdown h1,
.fld-markdown h2,
.fld-markdown h3,
.fld-markdown h4,
.fld-markdown h5,
.ai-msg-content h1, 
.ai-msg-content h2, 
.ai-msg-content h3,
.ai-msg-content h4,
.ai-msg-content h5 {
    font-weight: 600;
    font-size: var(--textSizeAi);
}
.ai-msg-content h1, .fld-markdown h1{ font-size: 1.45em; }
.ai-msg-content h2, .fld-markdown h2 { font-size: 1.25em; }
.ai-msg-content h3, .fld-markdown h3 { font-size: 1.15em; }
.ai-msg-content h4, .fld-markdown h4 { font-size: 1.05em; }
.ai-msg-content h5, .fld-markdown h5 { font-size: 1.0em; }
.fld-markdown ul, 
.fld-markdown ol,
.ai-msg-content ul,
.ai-msg-content ol {
    padding-left: 26px;
    margin-bottom: 16px;
}
.fld-markdown li,
.ai-msg-content li {
    padding-left: 6px;
	position: relative;
}
.fld-markdown li:has(input[type="checkbox"]),
.ai-msg-content li:has(input[type="checkbox"]) {
	list-style-type: none; 
	padding-left: 0;
}

.fld-markdown li input[type="checkbox"],
.ai-msg-content li input[type="checkbox"] {
	box-shadow: none;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	top: -1px;
	margin-right: 2px;
	position: relative;
}
.fld-markdown p, 
.fld-markdown li,
.ai-msg-content p, 
.ai-msg-content li {
    line-height: 1.8;
}
.fld-markdown p:has(+ ol),
.fld-markdown p:has(+ ul),
.ai-msg-content p:has(+ ol),
.ai-msg-content p:has(+ ul) {
    margin-bottom: 4px;
}
.fld-markdown p:empty,
.ai-msg-content p:empty {
    display: none;
}
.fld-markdown p:last-child,
.ai-msg-content p:last-child {
    margin-bottom: 0;
}

.fld-markdown code,
.ai-msg-content code{
    background-color: rgba(var(--eventColorRgba), 0.15);
    color: var(--textColor);
    padding: 2px 4px;
    border-radius: var(--borderRadius);
}
.fld-markdown img{
    max-width: 100%;
    height: auto;
}
.fld-markdown strong,
.ai-msg-content strong {
    font-weight: 600;
}
.ai-table-container {
    width: 100%;
    overflow-x: auto;
}

.fld-markdown table,
.ai-msg-content table {
    border-collapse: collapse;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.fld-markdown th,
.ai-msg-content th {
    font-weight: 600;
    text-align: left;
    padding: 0.375rem;
    border-bottom: 1px solid #e5e7eb;
}
.fld-markdown th[align="center"]{
    text-align: center;
}
.fld-markdown th[align="right"]{
    text-align: right;
}
.fld-markdown td,
.ai-msg-content td {
    padding: 0.375rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.fld-markdown tr:last-child td,
.ai-msg-content tr:last-child td {
    border-bottom: none;
}
.fld-markdown th:last-child, 
.fld-markdown td:last-child, 
.ai-msg-content th:last-child, 
.ai-msg-content td:last-child {
    border-right: none;
}
.assistant-footer {
    position: relative;
    z-index: 2;
    gap: 8px;
    flex-direction: column;
}
.assistant-input-wrap {
    position: relative;
    --assistant-focus-border-opacity: 0;
    width: 100%;
    border-radius: 12px;
    background-image:
        linear-gradient(var(--appWindowColor), var(--appWindowColor)),
        linear-gradient(
        to right,
        rgb(99 102 241 / var(--assistant-focus-border-opacity)),
        rgb(236 72 153 / var(--assistant-focus-border-opacity))
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        0 0 0 1px rgba(160, 80, 255, .10),
        0 1px 3px rgba(28, 40, 64, .10);
    overflow: hidden;
    border: 1px solid transparent;
    transition: --assistant-focus-border-opacity .24s ease;
}
@property --assistant-focus-border-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
.assistant-input-wrap:focus-within {
    --assistant-focus-border-opacity: 1;
}
.assistant-input-hint {
    width: 100%;
    padding-left: 12px;
}
.assistant-input-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    background: var(--appWindowColor);
}
.assistant-input-inner.multiline{
    flex-direction: column;
    gap: 0;
}
.assistant-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: 300px;
    field-sizing: content;
    line-height: 1.4;
    font-size: var(--textSizeAi);
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--textColor);
    box-shadow: none;
    padding: 12px 0 12px 12px;
}
.assistant-input::placeholder {
    color: rgba(var(--textLightColor), .78);
}
.assistant-input-inner.multiline .assistant-input{
    margin-right: 12px;
    padding-bottom: 0;
    width: calc(100% - 12px);
}


/* Prompt Templates */
.assistant-prompt-chip-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 0;
    min-height: 0;
}
.assistant-prompt-chip-area:empty {
    padding: 0;
}
.prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 20px;
    padding: 3px 6px 3px 10px;
    font-size: 12px;
    color: #7c3aed;
    max-width: 320px;
}
.prompt-chip-icon {
    font-size: 12px;
    flex: 0 0 auto;
}
.prompt-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prompt-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    color: #7c3aed;
    opacity: 0.6;
    flex: 0 0 auto;
}
.prompt-chip-remove:hover { opacity: 1; }

.prompt-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--appWindowColor);
    border: 1px solid rgba(var(--blackOrWhiteColor), 0.12);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    z-index: 200;
    max-height: 280px;
    display: flex;
    flex-direction: column;
}
.prompt-dropdown-list { overflow-y: auto; flex: 1; }
.prompt-dropdown-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    gap: 10px;
}
.prompt-dropdown-item:hover { background: rgba(var(--blackOrWhiteColor), 0.05); }
.prompt-item-icon { font-size: 13px; width: 16px; text-align: center; flex: 0 0 auto; }
.prompt-dropdown-empty,
.prompt-dropdown-loading {
    padding: 14px;
    font-size: 13px;
    opacity: 0.55;
    text-align: center;
}

/* Prompt settings list */
.prompts-item {
    padding: 8px 4px;
    border-bottom: 1px solid rgba(var(--blackOrWhiteColor), 0.06);
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.prompts-item:last-child { border-bottom: none; }
.prompts-item-icon { font-size: 14px; width: 18px; text-align: center; flex: 0 0 auto; }
.prompt-form-area { margin-top: 8px; }
.prompts-list { margin-top: 4px; }

.ai-msg.ai-msg-user {
    align-self: flex-end;
    background: rgba(var(--blackOrWhiteColor), .06);
    color: var(--appWindowColor);
    color: var(--textColor);
    padding: 10px 16px;
    border-radius: 16px 4px 16px 16px;
    max-width: 80%;
}
.ai-msg.ai-msg-user:not(:first-of-type) {
    margin-top: 20px;
}

.app-main:not(.assistant-open) .app-assistant {
    display: none;
}
/* =========================================================
   AI thinking / reasoning trace
   Header (spinner + title + (i) + chevron) -> collapsible
   timeline panel with tool steps and token usage.
   ========================================================= */
.ai-thinking-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 2px;
}
.ai-thinking-header {
    cursor: pointer;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 8px 3px 6px;
    margin-left: -6px;
    border-radius: 8px;
    transition: background-color .14s ease;
}
.ai-thinking-header:hover {
    background: rgba(var(--blackOrWhiteColor), .05);
}
.thinking-text {
    order: 1;
    min-width: 0;
    color: rgba(var(--textLightColor), .9);
}
.ai-thinking-arrow { order: 2; }

/* --- pulzujuca iskra namiesto klasickeho spinner kruhu --- */
.ai-thinking-spinner {
    order: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: #7c3aed;
    font-size: 12px;
    animation: ai-spark-pulse 1.5s ease-in-out infinite;
}
.ai-thinking-wrap:not(.running) .ai-thinking-spinner {
    display: none;
}
@keyframes ai-spark-pulse {
    0%, 100% { transform: scale(.82) rotate(-8deg); opacity: .5; }
    50%      { transform: scale(1.12) rotate(8deg); opacity: 1; }
}

/* --- pomaly gradientovy prechod v titulku pocas behu --- */
.ai-thinking-wrap.running .thinking-text {
    font-weight: var(--textBold);
    background-image: linear-gradient(100deg,
        #8b5cf6 0%, #8b5cf6 24%, #d946ef 42%, #8b5cf6 60%, #8b5cf6 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ai-shimmer-text 2.6s linear infinite;
}
@keyframes ai-shimmer-text {
    from { background-position: 170% 0; }
    to   { background-position: -170% 0; }
}
.ai-thinking-wrap.failed .thinking-text { color: #b91c1c; }

/* --- (i) ikona s hintom na tokeny, sedi pri riadku "Done" v casovej osi --- */
.ai-thinking-info {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: rgba(var(--textLightColor), .65);
    cursor: help;
    opacity: .8;
    transition: opacity .14s ease, color .14s ease;
}
.ai-thinking-info:hover { opacity: 1; }

/* --- chevron --- */
.ai-thinking-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: 10px;
    color: rgba(var(--textLightColor), .65);
    transform: rotate(-90deg);
    transition: transform .18s ease;
}
.ai-thinking-wrap.expanded .ai-thinking-arrow { transform: rotate(0deg); }

/* --- rozbalitelny panel s casovou osou --- */
.ai-thinking-panel { display: none; }
.ai-thinking-wrap.expanded .ai-thinking-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 2px 3px;
    animation: ai-panel-in .18s ease both;
}
@keyframes ai-panel-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
.ai-thinking-tools {
    display: flex;
    flex-direction: column;
    font-size: var(--textSize);
    color: rgba(var(--textLightColor), .9);
}
/* kazdy krok = bod na osi; spojnicu kreslime ::before na polozke */
.ai-thinking-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 0 10px 24px;
}
.ai-thinking-tool:last-child { padding-bottom: 0; }
.ai-thinking-tool::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: 0;
    width: 1px;
    background: rgba(var(--blackOrWhiteColor), .14);
}
.ai-thinking-tool:last-child::before { display: none; }
.ai-tool-head {
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ai-tool-dot {
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 50%;
    background: var(--appWindowColor);
    color: rgba(var(--textLightColor), .8);
    box-shadow: 0 0 0 1px rgba(var(--blackOrWhiteColor), .14);
}
.ai-thinking-tool.is-tool  .ai-tool-dot { color: #7c3aed; }
.ai-thinking-tool.is-done  .ai-tool-dot { color: #16a34a; }
.ai-tool-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--textColor);
}
.ai-thinking-tool.is-note .ai-tool-name {
    color: rgba(var(--textLightColor), .9);
}
/* na "Done" riadku nesmie nazov roztiahnut riadok — (i) ma sediet hned zaňho */
.ai-thinking-tool.is-done .ai-tool-name { flex: 0 1 auto; }
.ai-thinking-tool.has-args { cursor: pointer; }
.ai-thinking-tool.has-args .ai-tool-head::after {
    content: "\f078";                     /* chevron-down */
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    font-size: 9px;
    flex: 0 0 auto;
    opacity: .5;
    transition: transform .18s ease;
    transform: rotate(-90deg);
}
.ai-thinking-tool.has-args.args-open .ai-tool-head::after { transform: rotate(0); }
.ai-tool-args {
    margin: 0;
    font-size: var(--textSmallSize);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(var(--blackOrWhiteColor), .04);
    border: 1px solid rgba(var(--blackOrWhiteColor), .08);
    border-radius: 8px;
    padding: 8px 10px;
    max-height: 220px;
    overflow: auto;
    color: rgba(var(--textLightColor), .95);
}
/* --- priebeh pred prvym tokenom: popis fazy + neurcity beam --- */
.ai-progress {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 3px;
    max-width: 340px;
}
.ai-progress-stage {
    font-size: var(--textSize);
    color: rgba(var(--textLightColor), .85);
    animation: thinking 2.1s ease-in-out infinite;
}
.ai-progress-beam {
    position: relative;
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--blackOrWhiteColor), .08);
    overflow: hidden;
}
.ai-progress-beam::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), #8b5cf6 45%, #d946ef 60%, rgba(217, 70, 239, 0));
    animation: ai-beam 1.6s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes ai-beam {
    0%   { transform: translateX(-100%) scaleX(.55); }
    100% { transform: translateX(100%)  scaleX(.55); }
}
@keyframes thinking {
  0%, 100% { opacity: 1;   filter: blur(0px); }
  50%      { opacity: 0.45; filter: blur(0.3px); }
}

/* ---- Empty chat state (dekoracia + uvodny text) ---- */
.ai-empty-state {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 24px 20px;
    max-width: 320px;
    user-select: none;
    animation: ai-empty-in .45s ease both;
}
@keyframes ai-empty-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.ai-empty-orb {
    position: relative;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.ai-empty-orb-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .30) 0%, rgba(99, 102, 241, .18) 34%, rgba(236, 72, 153, 0) 68%);
    filter: blur(4px);
    animation: ai-orb-pulse 3.4s ease-in-out infinite;
}
.ai-empty-orb-star {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
    box-shadow: 0 6px 18px rgba(124, 58, 237, .35), inset 0 1px 2px rgba(255, 255, 255, .45);
    animation: ai-orb-float 4.5s ease-in-out infinite;
}
.ai-empty-orb-star .icon {
    font-size: 22px;
    color: #fff;
}
.ai-empty-spark {
    position: absolute;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, .9);
    opacity: .85;
}
.ai-empty-spark.s1 { width: 6px; height: 6px; top: 12px;  right: 20px; animation: ai-spark 2.6s ease-in-out infinite; }
.ai-empty-spark.s2 { width: 4px; height: 4px; bottom: 20px; left: 16px;  background: #ec4899; box-shadow: 0 0 8px rgba(236, 72, 153, .9); animation: ai-spark 3.1s ease-in-out .5s infinite; }
.ai-empty-spark.s3 { width: 5px; height: 5px; top: 26px;  left: 10px;  background: #6366f1; box-shadow: 0 0 8px rgba(99, 102, 241, .9); animation: ai-spark 2.2s ease-in-out 1s infinite; }
@keyframes ai-orb-pulse {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.14); opacity: .55; }
}
@keyframes ai-orb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes ai-spark {
    0%, 100% { transform: scale(.6) translateY(0); opacity: .25; }
    50%      { transform: scale(1) translateY(-4px); opacity: 1; }
}
.ai-empty-title {
    font-size: calc(var(--textSizeAi) + 1px);
    font-weight: var(--textBold);
    color: var(--textColor);
    line-height: 1.35;
}
.ai-empty-subtitle {
    font-size: var(--textSize);
    color: rgba(var(--textLightColor), .85);
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .ai-thinking-spinner,
    .ai-thinking-wrap.running .thinking-text,
    .ai-thinking-wrap.expanded .ai-thinking-panel,
    .ai-progress-stage,
    .ai-progress-beam::after,
    .ai-empty-state,
    .ai-empty-orb-glow,
    .ai-empty-orb-star,
    .ai-empty-spark {
        animation: none;
    }
    /* bez animacie by beam ostal neviditelny — necháme staticky pruh */
    .ai-progress-beam::after { transform: scaleX(.5); }
}

html[data-theme='dark'] {
	.assistant-container {
		border: 1px solid var(--borderColor);
		background-image: none;
	}
	.assistant-input-wrap {
		box-shadow: 0 0 0 1px var(--borderColor), 0 1px 0px var(--borderColor);
	}
	.assistant-input-inner{
		background-color: var(--templateInputBackground);
	}

	/* AI thinking / empty state — svetlejsie akcenty aby drzali kontrast */
	.ai-thinking-spinner { color: #c4b5fd; }
	.ai-thinking-wrap.running .thinking-text {
		background-image: linear-gradient(100deg,
			#c4b5fd 0%, #c4b5fd 24%, #f0abfc 42%, #c4b5fd 60%, #c4b5fd 100%);
	}
	.ai-thinking-wrap.failed .thinking-text { color: #f87171; }
	.ai-thinking-tool.is-tool .ai-tool-dot { color: #c4b5fd; }
	.ai-thinking-tool.is-done .ai-tool-dot { color: #4ade80; }
	.ai-progress-beam::after {
		background: linear-gradient(90deg, rgba(196, 181, 253, 0), #c4b5fd 45%, #f0abfc 60%, rgba(240, 171, 252, 0));
	}
	.ai-empty-orb-star {
		background: radial-gradient(circle at 34% 30%, #c4b5fd 0%, #8b5cf6 55%, #6d28d9 100%);
		box-shadow: 0 6px 20px rgba(139, 92, 246, .45), inset 0 1px 2px rgba(255, 255, 255, .35);
	}
	.ai-empty-orb-glow {
		background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, .34) 0%, rgba(129, 140, 248, .2) 34%, rgba(240, 171, 252, 0) 68%);
	}
	.assistant-sidebar .sidebar-rename-input {
		background: var(--templateInputBackground);
		border-color: #a78bfa;
		box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
	}
	.ai-empty-spark    { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, .9); }
	.ai-empty-spark.s2 { background: #f0abfc; box-shadow: 0 0 8px rgba(240, 171, 252, .9); }
	.ai-empty-spark.s3 { background: #a5b4fc; box-shadow: 0 0 8px rgba(165, 180, 252, .9); }
}

.app-side-mobile {
    flex: 0;
    transition: transform 0.5s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    transition-delay: unset;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}
.app-side-mobile.toggled {
    position: fixed;
    height: 100%;
    width: 240px;
    top: 0;
    left: 0;
    z-index: 1041;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    overflow: inherit;
}
.app-side-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .5;
    transition: opacity .15s linear;
}
.app-header {
    grid-area: header;
    display: flex;
    padding: 16px 14px 16px 6px;
    height: 50px;
    z-index: 150;
}
.app-footer {
    border-bottom: none;
    border-top: none;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 12px;
    pointer-events: none;
    z-index: 3;
}
.app-footer-buttons {
    align-self: flex-end;
    margin-right: 1rem;
    margin-bottom: 1rem;
    pointer-events: auto;
}
.app-footer-buttons button {
    min-width: 56px;
    height: 56px;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, .25);
    background-color: var(--gramColor);
    color: #fff;
    border: none;
    overflow: hidden;
    font-weight: var(--textBoldLight);
    font-size: var(--textLargeSize);
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    border-radius: 38px;
}
.app-footer-buttons button:hover,
.app-footer-buttons button:active,
.app-footer-buttons button:focus {
    background-color: var(--gramColor);
    box-shadow: 2px 5px 5px rgba(0, 0, 0, .25);
}
.app-footer-buttons button.showtitle {
    justify-content: right;
}
.app-footer-buttons button .btn-icon {
    width: var(--textSize);
    height: var(--textSize);
    align-content: center;
    font-size: var(--textSize);
    margin-right: 12px;
}
.app-footer-buttons button:not(.showtitle) .btn-icon {
    font-size: 16px;
    margin-right: 0;
    transition: font-size .1s, margin-right .23s ease;
}
.app-footer-buttons button .btn-lbl {
    max-width: 0;
    display: inline-block;
    -webkit-transition: max-width .2s ease;
    transition: max-width .2s ease;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 0;
    flex: 1;
}
.app-footer-buttons button.showtitle .btn-lbl {
    max-width: 200px;
}
.app-footer-notif {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 5px;
}
.app-footer-notif .toast {
    max-width: 420px;
    width: 100%;
    height: 48px;
    max-height: 48px;
    margin-bottom: 0;
    font-size: var(--textLargeSize);
    border: none;
    align-content: center;
}
.fs-large {
    font-size: var(--textLargeSize);
}
.fs-title {
    font-size: var(--textTitleSize);
}
.app-footer-notif .toast.hide+.toast.show {
    margin-top: 12px;
}
.app-footer-notif .toast.show:first-of-type {
    margin-top: 12px;
}
.app-header .header-menu {
    text-align: right;
    align-self: center;
    flex: 0 0 auto;
    padding-left: 5px;
}
.app-header .header-menu::after{
    display: none;
}
.app-info-panel {
    grid-area: info;
    background-color: var(--appColor);
}
.app-info-panel div {
    margin-bottom: 0;
}
.app-info-content {
    margin: 20px 17px 0;
}
.app-info-content .alert a {
    font-weight: var(--textBold);
    padding: 3px 10px;
    background-color: #15572420;
    border-radius: var(--borderRadiusBig);
    overflow: hidden;
    position: relative;
    line-height: 2;
}
.app-info-panel div button {
    margin-left: 5px
}
.header-left,
.header-main {
    align-self: center;
}
.header-left {
    padding-right: 5px;
}
.wrap-text {
    white-space: initial !important;
}
.app-content {
    grid-area: content;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    flex: 1;
    display: flex;   
    flex-direction: column; 
    flex-direction: row;
    padding-bottom: 0;
    overflow-x: clip;
    box-shadow:0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0px 1px 2px 0px #34374214, 0px 2px 4px 0px #3437420a, 0px 0px 0px .75px #34374214;
    border-radius: 12px;
    margin: 12px 12px 12px 2px;
    background-color: var(--appWindowColorLight);
}
.app-content:has(.layout-panel.d-none){
    flex-direction: column;
}
.app-content:has(.fixed) {
    overflow: hidden;
}
.gram-tooltip {
    position: fixed;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    background: rgba(18, 18, 22, 0.90);
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    max-width: 340px;
    backdrop-filter: blur(4px);
}
/* Dlhy hint (zoznam hodnot filtra) sa do jedneho riadku nezmesti - nowrap by ho
   orezal. Viacriadkovy rezim zapina InitTooltipSystem podla dlzky textu. */
.gram-tooltip.gram-tooltip-multi {
    display: block;
    white-space: pre-line;
    text-align: left;
    max-width: 380px;
}
.gram-tip-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 5px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.28);    
    border-radius: var(--borderRadiusSmaller);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}
html[data-theme='dark'] .gram-tooltip {
    background: color-mix(in srgb, var(--appWindowColorLight) 94%, var(--textColor) 6%);
    color: var(--textColor);
    border: 1px solid color-mix(in srgb, var(--textColor) 12%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}
html[data-theme='dark'] .gram-tip-key {
    background: color-mix(in srgb, var(--appWindowColorLight) 88%, var(--textColor) 12%);
    border-color: color-mix(in srgb, var(--textColor) 16%, transparent);
    color: var(--textColor);
}

.tag-list {    
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tag {
    padding: 8px 8px;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    background: var(--appWindowColor);
    color: var(--textColor);
    font-size: 10px;
    line-height: 1;
    outline: none;
    min-width: 2rem;
}
.tag.selected {
    border-style: solid;
    border-color: #0f8fff; 
    color: #0f8fff;
}
.tag.selected::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--appWindowColor);
}
.tag.selected::after {
    content: "✓";
    position: absolute;
    top: -4px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #0f8fff;
    color: #ffffff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-container {
    min-height: -webkit-min-content;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    flex: 1;
    min-height: 0px;
    position: relative;
    height: 100%; 
    background-color: var(--appWindowColor);
}
.view-container .sidecalendar-footer{
    background-color: transparent;
}
.view-title {
    margin-right: 10px;    
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: var(--textBold);
    line-height: 1.25;
}
.view-title+span {
    margin-right: 10px;
}
.related-view-card {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}
.view-card-item {
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    padding: var(--borderRadius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}
.view-card-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.view-card-item .title-value {
    font-size: 14px;
    font-weight: var(--textBold);
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-size-s {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.card-size-m {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card-size-l {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.view-card-item .title {
    min-height: 54px;
}
.side-header {
    display: flex;
    height: 50px;    
    z-index: 101;
    border-bottom: 1px solid transparent;
}
.scroll {
    border-bottom: 1px solid var(--borderColorMedium);
}
.app-side:not(.toggled) .side-header.scroll,
.app-side.toggled:hover .side-header.scroll {
    margin-right: 8px;
}
.side-header button {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    margin: 5px;
    outline: 0 none;
    color: var(--appSideTextColor);
}
.side-header button:focus {
    outline: 0 none;
}
.side-header button.active.focus,
.side-header button.active:focus,
.side-header button.active:hover,
.side-header button:active.focus,
.side-header button:active:focus,
.side-header button:active:hover,
.side-header button:hover {
    /*background-color: var(--appSideHotColor);*/
    background-color: var(--appSideHoverColor);
    outline: 0 none;
    border-radius: var(--borderRadius);
}
.side-header .dropdown-menu .dropdown-item {
    padding-left: 10px;
}
.side-header button.dropdown-toggle::after {
    vertical-align: 0;
    border-top-color: var(--textColor);
    color: var(--appSideTextColor);
}
.side-header .dropdown-toggle>.dropdown-menu {
    top: 0 !important;
}
.side-header .dropdown-menu button {
    margin: 5px 0;
    color: var(--textColor);
}
.side-header .side-header-logo img {
    vertical-align: middle;
    border-radius: var(--borderRadiusSmaller);
}
.show>.side-header button:focus,
.show>.side-header button:hover,
.show>.side-header button.focus {
    background-color: var(--focusColor);
    outline: none;
    border-radius: var(--borderRadius);
}
.side-header-organization {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    padding-left: 4px;
    gap: 4px;
}
.side-header-user div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-header-user>div {
    line-height: 1;
    max-width: 125px;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    text-align: justify;
}
.side-header-user .org {
    font-size: var(--textSmallSize);
}
.font-small {
    font-size: var(--textSmallSize);
}
.side-header-user .user {
    font-weight: var(--textBold);
}
.side-content {
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    scrollbar-gutter: stable;
}
.side-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.layout-tags {
    display: flex;
    margin: 15px 0;
}
.layout-tags .tag {
    position: relative;
    padding: 2px 5px;
    display: inline-block;
    color: #fff;
    margin-right: 0.5em;
    border-bottom-right-radius: 0.5em;
}
.layout-top-fields {
    display: flex;        
    gap: 16px;
    padding-left: 20px !important;
    background-color: var(--appColor);
    border-radius: var(--borderRadiusMedium);
}
.layout-top-field {
    padding: 0 7px 0 10px;
    overflow: hidden;
}
.layout-top-field:first-child{
    padding-left: 0;
}
.layout-top-field+.layout-top-field {
    border-left: 1px solid var(--borderColor);
}
.layout-preview {
    margin-bottom: 1.5em;
    padding: 7px;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadius);
}
.layout-preview .field-value br {
    display: unset;
}
.layout-related {
    margin-top: 1rem;
    background-color: var(--appWindowColor);
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
    box-shadow: var(--frameShadow);
    padding: 16px;
}
.layout-related button.flat-btn.gbtn .flat-btn-icon{
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.layout-related .related-sm button.flat-btn.gbtn {
    display: inline-flex;
}
.layout-container {
    width: 100%;
    min-height: -webkit-min-content;
    display: flex;
    flex-direction: column;
}
.layout-container.customize{
    padding-right: 28px !important;
}
.layout-container .view-header-left,
.layout-container .view-header-left .view-header-left-top div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-direction: column;
    align-items: baseline;
}
.layout-panel {
    position: sticky;
    top: 0;
    width: 220px;
    z-index: 10;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
}
.layout-panel .field-input {
    min-width: auto !important;
}
.customize-panel {
    overflow-y: scroll;    
}
.layout-content {
    position: relative;
    display: flex;
    flex: 1;
    /*margin-bottom: 18px;*/
}
.layout-content.settings-card-layout {    
    position: initial;
    display: flex;
    flex-direction: column;
}
.layout-content.settings-card-layout .settings-section-header {
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--borderDividerColor);
    margin-bottom: 8px;
}
.layout-content.settings-card-layout .settings-section-header>div {
    min-height: 2rem;
    display: flex;
    align-items: center;
}
.layout-content.settings-card-layout .settings-card-header-title {
    text-transform: uppercase;
    font-weight: var(--textBold);
}
.layout-content.settings-card-layout .settings-section-content {
    gap: 5px;
    display: flex;
    flex-direction: column;
}
.settings-section-content .cardlist-item {
    position: relative;
}
.cardlist-item.running {
    position: relative;
    background: var(--appWindowColor);
}
.cardlist-item.running::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        conic-gradient(
            from var(--angle),
            transparent 0deg,
            transparent 230deg,      
            var(--appColor) 305deg,  
            var(--gramColor) 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
  to { --angle: 360deg; }
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.layout-content .layout-customize-toolbar {
    display: flex;
    position: fixed;
    left: calc(50% + var(--leftMargin, 133px));
	transform: translateX(-50%);
    top: 60px;
    z-index: 1000;
    align-items: center;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadiusBig);
    padding: 6px 12px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.layout-content .layout-customize-toolbar input{
    box-shadow: none;
    height: auto;
    width: auto;
    padding: 0;
    cursor: pointer;
}
.layout-content .layout-customize-toolbar button {
    white-space: nowrap;
}
.layout-main-full {
    width: 100%;
}
.layout-main {
    width: 0;
    flex: 1;
}
.layout-side {
    padding-left: 5px;
    width: 35%;
    max-width: 600px;
    min-width: 440px;
    flex: 0 0 auto;
}
.layout-side .layout-related{
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}
.settings-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: stretch;
}
.container {
    padding-right: 16px;
    padding-left: 16px;
}
.row {
    align-items: baseline;
    margin-right: 0;
    margin-left: 0;
}
.row.tree-cols,
.row.two-cols {
    gap: 5px;
}
.row.tree-cols>* {
    max-width: 100%;
}
.row.tree-cols>* .field-input {
    min-width: 150px;
}
@media (max-width: 955px) {
    .row.tree-cols {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .row.tree-cols:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .row.tree-cols>* {
        flex-basis: 100%;
    }
}
.minor-icon {
    color: rgba( var(--textLightColor), 0.5);
}
.row-icons {
    height: 10px;
    border:1px solid red;
}
.settings-side {
    width: 180px;
    min-width: 180px;    
    overflow: auto;
    overflow-x: clip;
    padding-left: 16px;
    padding-top: 50px;
    padding-right: 20px;
    box-shadow: var(--frameShadow);
    margin-bottom: 0;  
    z-index: 10;
    background-color: var(--appWindowColor);
}
.settings-side-icon {
    font-size: var(--textLargeSize);
}
.settings-side-group {
    padding-bottom: 1rem;
}
.settings-side-group-title {
    color: var(--textColor);
    font-weight: var(--textBold);
    text-transform: uppercase;
    padding: 5px 5px 5px 12px;
}
.settings-side-item {
    min-width: 150px;
}
.settings-side-item a {
    color: var(--textColor);
    display: block;
    padding: 7px 8px;
    position: relative;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    line-height: initial;
}
.settings-side-item a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-side-item a span.fad {
    width: 20px;
    text-align: center;
    margin-right: 5px;
}
.settings-side-item a:hover,
.settings-side-item.selected a {
    background: var(--appSideSettingsHotColor);
    text-decoration: none;
    border-radius: var(--borderRadius);
}
.settings-side-item:not(.selected) a:hover{
    background: var(--appSideSettingsHoverColor);
}
.settings-main {
    flex: 1;
    padding: 0 16px 16px 20px;
    /*! max-width: 900px; */
    /*! min-width: 390px; */
    margin-bottom: 50px;
    overflow: auto;
    overflow-x: clip;
    height: 100%;
}

.settings-main-container {
    margin: 0 auto;
    min-width: 390px;
    max-width: 900px;
    padding: 50px 0 50px 0;
}
.settings-main.full .settings-main-container,
.settings-container.fixed .settings-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: initial;
}
.settings-main.full .settings-main-container{
    height: 100%;
    width: 100%;
    padding-top: 50px;
}

.settings-container.fixed .settings-main .settings-card-layout{
    margin-bottom: 0;
}
.settings-main .settings-header {
    margin-bottom: 0.5rem;
    font-size: 22px;
    display: flex;
    gap: 5px;
    align-items: center;
    min-height: 32px;
}
.settings-container.fixed .settings-header{
    padding-left: 20px;
}
.settings-main .settings-section {
    display: flex;
    flex-direction: column;
    min-height: 32px;
}
.settings-main .settings-section-search:not(.d-none) {
    max-height: 50px;
    opacity: 1;
    transition: max-height .15s ease-out, opacity .15s ease-out;
    margin-bottom: 10px;
} 
.settings-main .settings-section-search.d-none {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .15s ease-out, opacity .15s ease-out;
    display: unset !important;
}
.settings-main .related-header span {
    margin-left: 0.5em;
}
.settings-main .related-content {
    margin: 0.75rem 0;
}
.settings-main .related-item {
    margin: 0.1rem 0;
    padding: 0.5rem;
}
.settings-main .related-item:hover {
    background-color: var(--hotBackground);
    border-radius: var(--borderRadius);
    padding: 0.5rem;
}
.settings-main .related-item .row .col-md-auto {
    max-width: calc(100% - 70px);
}
.settings-main .related-item-row {
    display: grid;
    gap: 16px;
}
.settings-main .related-item-title {
    display: flex;
    align-items: center;
    color: var(--textColor);
    margin-left: 0.2em;
    font-weight: var(--textBold);
    gap: 0.5rem;
}
.settings-main .related-item-title span:not(.field-required) {
    display: flex;
    gap: 5px;
    align-items: center;
}
.settings-main .related-item-body {
    color: var(--textColor);
}
.settings-main .related-item-body div+div:not(.field-caption-line, .input-container) {
    margin-top: 5px;
}
.settings-main .related-item-body span+span {
    padding: 0 0 0 3px;
}
.settings-main .related-item-body .gbtn.gbtn-secondary+.gbtn.gbtn-secondary {
    margin-left: 5px;
}
.settings-title.text-muted {
    font-size: 16px;   
}
.inline-value {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--eventColor);
}
.settings-main .cardlist-item .row {
    align-items: center;
    flex-grow: 1;
}
.settings-main .cardlist-item .row .col:first-child {
    max-width: 50px;
}
.settings-main .cardlist-item .row .col:last-child {
    align-content: center;
    text-align: right;
    flex-grow: 0;
}
@keyframes add-border-tabs {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: var(--borderColorMedium); } 
}
.view-tabs:not(.customize) {
    width: 100%;
    position: sticky;
    top: 65px;
    z-index: 100; 
    background: var(--appWindowColorLight);
    animation: add-border-tabs linear both;
    animation-timeline: scroll();
    animation-range: 0px 270px;
}
.view-tabs.customize {
    border: 1px dashed var(--borderColor);
    margin-bottom: 30px;
    padding-right: 8px;
}
nav,
.settings-card-layout nav {
    width: 100%;
}
.view-header nav {
    padding: 0 16px 0 10px;
}
nav .nav-tabs,
.settings-card-layout nav .nav-tabs {
    border-bottom: none;
    padding-left: 10px;
    margin-bottom: 8px;
}
.nav-tabs .nav-link,
.settings-card-layout .nav-link {
    background: none;
    color: rgba(var(--textLightColor), 1);
    border: none;
    border-bottom: none;
    border-radius: unset;
    border-radius: var(--borderRadius);
    outline: 0;
    padding: 7px 10px;
    margin-right: 0;
    position: relative;
    white-space: nowrap;
}
.view-tabs.customize .nav-tabs .nav-item::after {
    content: "⋮";
    position: absolute;
    left: 3px;
    font-size: var(--textSize);
    font-weight: normal;
}
.nav-tabs .nav-link.active,
.settings-card-layout .nav-link.active {
    background-color: transparent;
    border-radius: var(--borderRadius);
    border: none;
    color: var(--textColor);
    font-weight: var(--textBold);
}
.nav-tabs .nav-item.nav-link.ui-sortable-handle:hover,
.nav-tabs .ui-sortable-placeholder.nav-item.nav-link.ui-sortable-handle{
    padding: 7px 10px !important;
    cursor: grab !important;
}
.nav-tabs .nav-link::before,
.settings-card-layout .nav-link::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    opacity: 0;
    z-index: 1;
    transform: translateX(-50%) scaleX(100%);
    transform-origin: center;
    transition: all .4s ease;
}
.nav-tabs .nav-link:hover::before,
.settings-card-layout .nav-link:hover::before,
.nav-tabs .nav-link.active::before,
.settings-card-layout .nav-link.active::before {
    width: calc(100% - 20px);
    opacity: 1;
    transition: width .3s ease, opacity .3s ease;
}
.nav-tabs .nav-link.active::before,
.settings-card-layout .nav-link.active::before {
    background-color: var(--eventBorderColor);
}
.settings-card-layout .tab-content {
    display: flex;
    flex: 1;
}
.settings-card-layout .tab-content>.active {
    display: flex;
    grid-gap: 16px;
    flex-wrap: wrap;
}
.settings-card-layout .field-row-customize {
    border: 1px solid var(--appWindowColor);    
}
.settings-card-item {
    min-width: 235px;
    max-width: 235px;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadius);
    border: var(--frameBorder);
}
.settings-card-content {
    padding: 0 10px 10px 10px;
    position: relative;
}
.settings-card-content .related-item-row.row.justify-content-end {
    margin-right: 0;
}
.settings-card-content .field-input:not(.field-datetime-time) {
    min-width: 145px;
}
.settings-table-list.table.grid tr th {
    position: sticky;
    z-index: 2;
    background: var(--appWindowColor);
    padding: 5px 10px;
}
.settings-table-list.table th {
    position: inherit;
    overflow: hidden;
    white-space: inherit;
    padding: 12px 4px;
    background-color: var(--appColor);
    font-weight: var(--textBold);
    border-bottom: 1px solid var(--borderColor);
}
.settings-table-list .grid-row-title {
    display: flex;
}
.settings-table-list .grid-row-title-caption span {
    white-space: break-spaces !important;
}
.settings-table-list tr.grid-row-second table td div {
    display: flex;
    align-items: center;
}
.settings-table-list.table tr td:first-child span.fal {
    min-width: 20px;
    text-align: center;
    margin-right: 5px;
}
.settings-table-list.table tbody tr.grid-row-second:hover td::before {
    content: none;
}
.settings-table-list.table tbody tr.grid-row-second table tr:hover:not(.grid-group) td:first-child::before {
    content: '';
    border-left: 3px solid var(--gramColor);
    z-index: 1;
    position: absolute;
    height: 50%;
    left: 6px;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}
.settings-table-list tr th:first-child {
    width: 50%;
}
.settings-table-list tr.grid-row-second td table.settings-table-list tr td:first-child {
    max-width: 400px;
    height: 2.07rem;
    padding: 0.3rem 0.75rem;
    vertical-align: middle;
    padding-left: calc(.75rem + 25px);
    width: 50%;
}
.settings-table-list tr.grid-row-expandable td:first-child {
    cursor: pointer;
}
.settings-table-list tr.grid-row-expandable td .grid-row-title-caption span::after {
    content: "\f107";
    color: var(--textColor);
    font: normal normal normal 15px / 1 'Font Awesome 7 Pro';
    margin-left: 5px;
}
.settings-table-list tr.grid-row-expandable.grid-row-expanded td .grid-row-title-caption span::after {
    content: "\f106";
}
.settings-table-list tbody tr.grid-row-second td {
    padding: 0;
}
.settings-table-list tr.grid-row-expandable.grid-row-expanded td .grid-row-title {
    font-weight: bold;
}
.settings-table-list span.acl-check.chk-checked,
.settings-table-list span.acl-check.chk-unchecked {
    cursor: pointer;
}
.settings-table-list span.acl-check.chk-checked.disabled,
.settings-table-list span.acl-check.chk-unchecked.disabled {
    cursor: unset;
    border-color: var(--focusColor);
    background-color: var(--focusColor);
}
.field-value,
.field-icon-value {
    color: var(--textColor);
    overflow-wrap: anywhere;
}
.field-value-primary {
    color: var(--eventColor);
}
.field-value-primary:hover {
    color: var(--eventColor);
}
.field-date,
.field-datetime-date input,
.field-datetime-time input,
.field-lookup .field-value,
.field-file .field-value {
    width: 100%;
}
.field-lookup .input-field {
    padding-right: 25px;
}
.field-lookup .input-field.has-new-btn {
    padding-right: 105px;
}
.field-lookup:hover,
.field-lookup {
    position: relative;
    color: var(--eventColor);
}
a.field-lookup:hover,
a.field-lookup {
    display: flex;
    align-items: baseline;
    column-gap: 5px;
}
.has-left-icon {
    padding-left: 40px;
}
.field-value.input-field.field-date,
.field-value.input-field.has-left-icon {
    padding-right: 2rem;
}
.field-value.input-field::placeholder {
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallerSize);
}
.inplace .input-field {
    background: initial;
    box-shadow: initial;
    border: initial;
}
.inplace .field-input:not(.field-datetime-time) {
    min-width: auto;
}
.inplace .input-icon {
    visibility: hidden;
}
.inplace .input-icon .gbtn.gbtn-input {
    background: transparent;
}
.inplace .field-input.focused .input-icon,
.inplace:hover .input-icon {
    visibility: visible;
}
.field-datetime-date {
    flex-basis: 66%;
}
.field-datetime-time {
    flex-basis: 33%;
}
.field-main {
    font-weight: var(--textBold);
}
.top-field-icon {
    color: rgba(var(--textLightColor), 1);
    float: right;
    font-size: larger;
    margin-left: 2px;
}
.top-field-lbl {
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallerSize);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inherit;
}
.top-field-value {
    font-weight: var(--textBold);
    color: var(--textColor);
    line-height: initial;
}
.top-field-value .field-lookup-icon,
.top-field-value .field-icon {
    display: none;
}
.top-field-value,
.top-field-value span,
.top-field-value a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.top-field-value a {
    display: block;
}
div.top-field-value a:hover {
    display: block;
}
div.top-field-value .field-option {
    display: flex;
}
.preview-field {
    display: inline-block;
    padding: 5px;
    margin-right: 0.5em;
}
.preview-lbl {
    color: rgba(var(--textLightColor), 1);
    text-transform: uppercase;
    font-size: var(--textSmallerSize);
}
.preview-lookup {
    font-weight: var(--textBold);
    color: var(--eventColor);
}
.preview-value {
    color: var(--textColor);
    font-weight: var(--textBoldLight);
    display: flex;
    align-items: baseline;
    column-gap: 5px;
}
.preview-value.fal.fa-square,
.preview-value.fal.fa-check-square {
    line-height: 1.43;
}
.preview-space {
    height: 1px;
    background-image: linear-gradient(90deg, rgba(var(--blackOrWhiteColor), .3), rgba(var(--lightOrDarkColor)));
    background-size: 30% 1px;
    background-repeat: no-repeat;
}
.related-view {
    margin-bottom: 1.5em;
    position: relative;
}
.related-view.settings {
    background-color: var(--appWindowColor);
    max-width: 600px;
    border-radius: var(--borderRadius);
    box-shadow: var(--frameShadow);
}
.related-view.settings.wftree::after {
    content: '';
    border: var(--frameBorder);
    background: var(--appWindowColor);
    position: absolute;
    height: 16px;
    width: 16px;
    bottom: -8px;
    border-radius: 16px;
    justify-content: center;
    justify-self: auto;
    left: 50%;
    transform: translateX(-50%);
}
.related-view.settings.wftree::before {
    content: '';
    position: absolute;
    border-left: 1px solid var(--borderColor);
    bottom: -20px;
    width: 0;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.related-header {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--textColor);
    background-color: var(--groupBackground);
    padding: 6px 6px 6px 10px;
    border-radius: var(--borderRadius); 
    width: 100%;
}
.related-view-selection.view-selection,
.related-header-container .view-selection {
    display: flex;
    gap: 5px;
    align-items: baseline;
    flex-direction: column;
    position: absolute;
    top: -30px;
    width: 100%;
    background-color: var(--appColor);
    border: var(--frameBorder);
    padding: 15px 5px 5px 22px;
    box-shadow: 0px -6px 5px 0px rgba(0, 0, 0, .06);
    border-radius: var(--borderRadius);
}
.related-view-selection.view-selection {
    border:none
}
html[data-theme='dark'] .related-view-selection.view-selection {
    background-color: var(--groupBackground);
}
.related-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    height: 100%;
    width: 100%;
    justify-content: center;
}
.related-view-empty .empty-icon-search {
    position: absolute;
    left: 50%;
    z-index: 2;
    font-size: 32px;
    color:   rgba(var(--textLightColor), 1); 
    transform: translateX(-10px) translateY(32px);
    text-shadow: -1px -1px 0 var(--appColor), 1px -1px 0 var(--appColor), -1px 1px 0 var(--appColor), 1px 1px 0 var(--appColor);
}
.related-view-empty .empty-icon {
    color:   rgba(var(--textLightColor), 0.5);
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-content: center;
    z-index: 1;
}
.related-view-empty .empty-icon:before {
    content: "\e428";  
    font-family: "Font Awesome 7 Pro"; 
    font-weight: 900; 
    font-size: 55px;
    color:  var(--appColor); 
    position: absolute; 
    z-index: -2;
    left: 50%;
    transform: translateX(-50%);
}
html[data-theme='dark'] .related-view-empty .empty-icon:before{
    color: var(--templateInputBackground);
}
.related-view-empty .empty-icon:after {
    content: "\e428";  
    font-family: "Font Awesome 7 Pro"; 
    font-weight: 100; 
    font-size: 55px;
    color: rgba(var(--textLightColor), 0.3);
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
}
.related-view-calendar {
    height: 100%;
    background-color: var(--appWindowColor);
}
.view-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}
.view-empty-icons {
    position: relative;
}
.view-empty-buttons{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.icon-c::before {
    content: "\f07b" !important;     
}
.icon-c::after {
    content: "\f07b" !important; 
}
.icon-a {
    transform: translate(calc(-50% - 10px), calc(-50% - 16px)) rotate(-18deg) scale(0.8);
}
.icon-b {
    transform: translate(calc(-50% + 12px), calc(-50% - 5px)) rotate(20deg) scale(0.6);
}
.icon-c {
    transform: translate(-50% , calc(-50% + 18px));
}
.related-header-left {
    display: flex;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    gap: 5px;
    max-width: fit-content;
}
.related-header-label {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.related-header-icon {
    display: flex;
    align-items: center;
    color: #fff;
    border-radius: 4px;
    padding: 2px;
    min-width: 18px;
    min-height: 18px;
    justify-content: center;
    color: rgba(var(--lightOrDarkColor), 1);
}
.related-view.side-right .related-header-left {
    max-width: 100%;
    width: auto;
}
.related-view.side-right .related-header-right {
    min-width: none;
}
.layout-container .layout-buttons-container {
    display: flex;
    padding-bottom: 8px;
    width: auto;
}
.layout-container .layout-buttons {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    width: auto;
    box-sizing: border-box;
    gap: 4px;
    padding-bottom: 8px;
}
.layout-container .layout-buttons button {
    flex-shrink: 0;
    border: 1px solid var(--borderColor) !important;
}
.layout-container .layout-buttons button .flat-btn-lbl{
    font-size: var(--textSmallerSize);
}
.layout-tabs {
    flex: 1;
}
.layout-tabs .tab-pane {
    gap: 16px;
    display: none;
}
.layout-tabs .active {
    display: flex;
}
.layout-tab-column {
    display: flex;
    gap: 16px;
    flex-direction: column;
    flex: 1;
}
.view-header.layout-tab-column {
    flex: initial;
}
.layout-tab-section {
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadiusMedium);
    border: 1px solid var(--borderColorMedium);    
    padding: 16px;
    position: relative;
}
.layout-tab-section-add {   
    position: absolute;
    content: "";
    bottom: -32px;
    display: flex;
    justify-content: center;
    right: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.layout-tab-section-add:hover {
    opacity: 1;
}
.layout-tab-section-add .toolbar {
    background-color: rgb(var(--eventColorRgba), 0.1);
    border-radius: 50%;
    position: relative;
}
.layout-tab-section-add .toolbar::before {
    content: "";
    position: absolute;
    background-color: var(--appColor);
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.layout-tab-section-add .decoration {
    position: absolute;
    width: 100%;
    border-top: 1px dashed var(--borderColor);
    bottom: 0;
    height: 15px;
    left: 0;
}
.layout-tab-section-add .flat-btn-icon {
    color: var(--eventColor);
}
.layout-tab-column:first-child .layout-tab-section {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 20px;
}
.layout-tab-column:first-child .layout-tab-section:not(.customize) {
    border-left: none;
}
.layout-tab-column:last-child .layout-tab-section {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.layout-tab-section .layout-section-label {
    font-weight: var(--textBold);
    border-bottom: 1px solid var(--borderDividerColor);
    margin-bottom: 8px;    
    padding-left: 3px;
}
.customize .layout-section-label .label {
    cursor: text;     
}
.layout-tab-section .layout-section-content {
    display: grid;
    grid-auto-rows: minmax(30px, auto);
    gap: 12px 24px;
    min-height: 25px;
    margin:0;
    padding: 0;
}
.layout-section-content{
    padding: 8px 16px;
    margin: 0 16px;
}
.customize-components.layout-section-content{
    padding: 3px;
    margin: 0;
}
.layout-tab-section.customize {
    border: 1px dotted var(--borderColor);
    margin-top: 16px;
}
.layout-tab-section.customize:hover {
    border: 1px dotted var(--eventColor);
    margin-top: 16px;
}
.layout-tab-section.customize .related-header>*{
    overflow: hidden;
    width: 0;
    flex-grow: 1;
}
.layout-tab-section.customize .related-header-right>*{
    float: inline-end;
    justify-items: right;
}
.layout-component.customize > *:not(.customize-toolbar) {
    overflow: hidden;
    overflow-wrap: anywhere;
}
.layout-component.customize button.gbtn.small:not(.icon-only){
    flex-wrap: nowrap !important;
}
.layout-component.customize :not(.fld-multiline)>.field-value,
.layout-component.customize .fld-lookup-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layout-tab-section.customize .section-add-buttons button{
    pointer-events: none;
}
.layout-component {
    position: relative;
    flex-direction: column;
}
.layout-component.customize {
    border: 1px dotted  rgb(var(--textLightColor), 0.4);
    border-radius: var(--borderRadius);
    min-width: 100px;
	width: 100%;
    margin: 0;
    background-color: var(--appWindowColor);
    padding: 3px;
    cursor: grab;
}
.layout-component .inplace-value:not(.top-field-value) {
    background-color: var(--appColor);
    border-radius: var(--borderRadius);
}
.layout-component .table .inplace-value {
    background-color: transparent;
}
.layout-component.preview {
    padding: 6px;
}
.customize-toolbar {
    background-color: var(--appWindowColor);
    border: 1px solid var(--borderColor);
    position: absolute;
    top: -16px;
    margin-left: var(--borderRadius);
    padding: 0 6px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    pointer-events: none;
    cursor: default;
    border-radius: var(--borderRadius);
}
.customize-toolbar.right {
    opacity: 1;
    pointer-events: auto;
    background-color: var(--appColor);
    border: initial;
    right: 0;
    top: -15px;
    z-index: 1;
}
.customize-width-toolbar {
    position: absolute;
    top: -8px;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;    
}
.customize-width-toolbar .toolbar {
    background-color: var(--appColor);
    padding: 0 6px;
    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);
}
.customize-width-toolbar input{
    background-color: transparent;
    border-color: transparent !important;
    border-radius: unset;
    box-shadow: none;
    width: 24px;
    height: 16px;
    text-align: center;
    padding: 0;
}
.customize-frame {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: var(--borderRadius);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}
.layout-component.customize:hover .customize-frame{
    border: 1px solid var(--eventColor);
}
.customize-toolbar-section{
    position: absolute;
    background-color: var(--appWindowColor);
    top: -31px;
    left: 16px;
    padding: 3px 6px;
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    border: 1px dotted var(--eventColor);
    border-bottom: initial;
    opacity: 0;
    pointer-events: none;
}
.customize-toolbar-column {
    position: absolute;
    top: -16px;
    margin-right: 30px;
    background-color: var(--appColor);
    justify-content: center;
    border-radius: var(--borderRadiusBig);
    padding: 3px 6px;
}
.layout-tab-column.customize {
    border: 1px dashed var(--borderColor);    
    margin-top: 12px;
    position: relative;
    padding: 6px;
}
.customize-toolbar-column .decoration {
    position: absolute;
    width: 100%;
    border: 1px dotted var(--eventColor);
    bottom: 0;
    height: 15px;
    left: 0;
    border-bottom-right-radius: var(--borderRadiusBig);
    border-bottom-left-radius: var(--borderRadiusBig);
    border-top: initial;
}
.layout-tab-section:hover .customize-toolbar-section,
.customize-toolbar-section:hover {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    border-bottom: 1px solid var(--appWindowColor);
}
.layout-component:not(.dragging):hover .customize-frame,
.layout-component:not(.dragging) .customize-frame,
.customize-frame:hover,
.layout-component:not(.dragging):hover .customize-toolbar,
.customize-toolbar:hover {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}
.layout-component:hover .customize-frame,
.layout-component.dragging .customize-frame,
.customize-frame:hover {
    cursor: grab;
}
.layout-component.dragging .customize-toolbar {
    display: none;
}
.layout-component.dragging {
    cursor: grab !important;
    opacity: 1 !important;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.layout-component.dragging .customize-frame,
.layout-component.placeholder * {
    visibility: hidden;
}
.layout-component.placeholder {
    background-color: rgba(var(--eventColorRgba), 0.1) !important;
    border: 1px dashed rgba(var(--eventColorRgba), 0.5) !important;
}
.layout-component-view:not(.preview) {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.layout-component.customize.ui-sortable-handle {
    cursor: grab !important;
}
.preview .related-header-right {
    display: none;
}
.component-size-s:not(.preview){
    min-height: 300px;
}
.layout-component-field .label {
    display: flex;
    gap: 5px;
    align-items: center;
}
.layout-label-left .layout-component {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}
.layout-label-left .layout-component-field{
    flex-direction: row;
}
.layout-label-left .label {
    color: red;
    width: clamp(80px, 40%, 125px);
    height: var(--btnHeight);
}
.layout-label-left .inplace-value {
    flex: 1;
}
.layout-label-left .inplace-value:has(.disabled) {
    max-height: var(--btnHeight);
}
.component-size-s .view-chart-data {
    max-height: calc(300px - var(--btnHeight));
    min-height: calc(300px - var(--btnHeight));
}
.component-size-m {
    min-height: 500px;
}
.component-size-m .view-chart-data {
    max-height: 500px;
}
.component-size-l {
    min-height: 700px;
}
.component-size-l .view-chart-data {
    max-height: 700px;
}
.layout-component-field .label,
.view-card-item .label { 
    color: rgba(var(--textLightColor), 1);
    font-size: 10px;
    line-height: 14px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding-left: 3px;   
}
.layout-component-field .label.inplace-edit-active{
    max-height: var(--btnHeight);
} 
.layout-component-field .label,
.layout-component .related-header-label,
.layout-component .related-header-label > span,
.view-card-item .label,
.view-card-item .label .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;     
}
.inplace-value {
    position: relative;
    display: flex;    
    justify-content: space-between;
    justify-content: left;
    align-items: center;
    border-radius: var(--borderRadius);
    padding: 2px 3px;
    min-height: 1.6rem;  
    min-height: 28px;
}
.inplace-value:has(.inplace-edit) {
    padding: 0;
}
.inplace-value:has(.fld-file,.fld-basic) {
    display: flex;
    min-width: 0;
    overflow: hidden;
}
.inplace-value .fld-basic,
.inplace-value .fld-file  {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
}
.inplace-value .fld-basic .fld-lookup-value,
.inplace-value .fld-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; 
}

.inplace-value .i-btn {
    display: none;
    flex-shrink: 0; 
    position: absolute; 
    right: 3px;  
    top: 2px;
}
.inplace-value .i-btn.disabled,
.inplace-value button.gbtn.i-btn.disabled,
.inplace-value:hover button.gbtn.i-btn.disabled {
    opacity: 1;
    background-color: #e5e5e5 !important;
}
html[data-theme='dark'] .inplace-value .i-btn.disabled,
html[data-theme='dark'] .inplace-value button.gbtn.i-btn.disabled,
html[data-theme='dark'] .inplace-value:hover button.gbtn.i-btn.disabled {
    background-color: var(--templateInputBackground) !important;
}
.inplace-value:hover {
    background-color: var(--hotBackground);
}
.inplace-value:hover .i-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: baseline;
}
.inplace-value .field-option .opt-badge span {
    /*display: inline-grid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    position: relative;
    grid-template-columns: minmax(0px, 1fr);
    max-width: calc(100% - 18px);
    min-width: 26px;*/
}
.inplace-edit {
    display: flex;
    padding: 2px 3px 6px 3px;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.inplace-edit-line {
    display: flex;
    flex: 1;
    justify-items: center;
}
.inplace-edit-line .field-row,
.inplace-edit-line .field-row-small{
    flex: 1;
    justify-content: center;
}
.inplace-edit-btns {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: baseline;
}
.related-header-title {
    display: inline-block;
    font-weight: var(--textBold);
    flex: 1;
    text-transform: uppercase;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-header-right {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    white-space: nowrap;
    align-items: baseline;
}
.related-header-right .related-adv-buttons button {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    border: 1px solid var(--borderColor) !important;
}
.related-header-right .related-adv-buttons button .flat-btn-lbl {
    font-size: var(--textSmallerSize);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-header-actions {
    display: flex;
}
.related-adv-buttons,
.related-base-buttons {
    background: var(--groupBackground);
    display: flex;
    gap: 4px;
}
.related-header-counter {
    display: inline-block;
    margin-left: 6px;
}
.related-search {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    margin-bottom: 5px;
}
.related-search>.related-search-input {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.related-search-input {
    padding-right: 27px;
}
.related-content-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    min-height: 150px;
}
.related-content-view .table {
    width: 100%;
}
.related-content-view tr th .tbl-head-sub,
.related-table tr th .tbl-head-main {
    text-overflow: unset;
}
.related-content-table {
    gap: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
}
.related-content-table > table.related-table {
    width: 100%;
    max-width: none;
}
.layout-content,
.layout-tabs,
.tab-pane,
.layout-tab-column,
.layout-tab-section,
.layout-section-content,
.layout-component,
.layout-component-view,
.related-view-content,
.related-content-table {
    min-width: 0;
    max-width: 100%;
}
.related-view-footer,
.related-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}
.related-view-footer-sum,
.related-footer-sum {
    margin-left: auto;
    background-color: var(--groupBackground);
    padding: 4px 10px;
    border-radius: var(--borderRadius);
}
.ui-sortable-helper:not(.layout-component) {
    display: table;
}
.ui-sortable-helper td:first-child {
    border-top-left-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
}
.ui-sortable-helper td:last-child {
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}
.ui-dialog{
    overflow: visible !important;
}
.related-content span+span {
    padding: 0 5px;
}
.related-no-data {
    padding: 0.5rem .75rem;
    text-align: center;
    color: rgba(var(--textLightColor), 1);
    margin: 15px;
}
.flat-btn {
    background: var(--flatBtnBackground) !important;
    border: var(--flatBtnBorder) !important;
    border-radius: var(--borderRadiusBig) !important;
    color: var(--flatBtnColor) !important;
    cursor: pointer;
    font-size: var(--textSize);
    position: relative;
}
.flat-btn:last-child {
    margin-right: 0;
}
.flat-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(var(--blackOrWhiteColor), 0.05);
    transform: translate(-50%, -50%);
    border-radius: var(--borderRadiusBig);
    z-index: 0;
    pointer-events: none;
}
.flat-btn:hover::before {
    width: 100%;
    height: 100%;
}
html[data-theme='dark'][data-device='desktop'] .flat-btn:hover::before,
html[data-theme='dark'][data-device='browser'] .flat-btn:hover::before {
    background: rgba(var(--blackOrWhiteColor), 0.15);
}
.flat-btn.gbtn {
    display: inline-flex;
    justify-content: center;
    line-height: initial;
    padding: 6px;
    height: var(--btnHeight);
    min-height: var(--btnHeight);
    min-width: var(--btnWidth);
    align-items: center;
    box-shadow: none;
}
.btn-icon {
    width: 1.25em;
    text-align: center;
    vertical-align: middle;
}
.fa-times, 
.fa-plus {
    transition: transform 0.3s ease-in-out; 
    min-width: auto !important;
    will-change: transform;
}
div.btn-plus:hover .fa-plus,
button:hover .fa-times, 
button:hover .fa-plus {
    transform: rotate(90deg);    
}
.btn-down {
    background: var(--eventHoverBackground) !important;
}
.btn-separator {
    margin: 6px;
    width: .1px;
    background: var(--borderColor);
    align-self: stretch;
}
.related-tree-row {
    display: flex;
    gap: 7px;
    width: calc(100% - 35px);
    position: relative;
}
.related-tree-row::before {
    content: '';
    position: absolute;
    border-left: 1px solid var(--borderLightColor);
    height: calc(100% - 16px);
    left: 13px;
    top: 35px;
}
.related-tree-row:last-child::before {
    border-left-color: transparent;
}
.related-tree-right {
    border-radius: var(--borderRadius);
    width: 100%;
    position: relative;
    flex-shrink: 0;
}
.related-tree-right.note {
    background-color: #fff6d6;
} 
html[data-theme="dark"] .related-tree-right.note {
    background-color: var(--templateInputBackground)
}
.related-tree-icon {
    font-size: 12px;
    text-align: center;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 49%;
    background: var(--appWindowColor);    
    position: relative;
    color: var(--textColor);
    margin-top: 4px;
}
html[data-theme="dark"] .related-tree-icon {
    color: rgba(var(--blackColor), .6);
}
.related-tree-section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.related-tree-user {
    position: absolute;
    left: 17px;
    top: 18px;
    padding: 3px 4px;
    border-radius: var(--borderRadiusBig);
    background-color: var(--appColor);
    border: 2px solid var(--appWindowColor);
    font-size: 8px;
    z-index: 2;
    line-height: 1.5em;
    font-weight: bold;
}
.related-tree-user:empty{
    display: none;
}

.related-tree-row .header-menu {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}
.related-tree-row:hover .header-menu{
    visibility: visible;
    opacity: 1;
}
.related-content-tree {
    position: relative;
    padding-bottom: 7px;
    width: 100%;
}
.view-container .related-content-tree {    
    padding: 0 16px 7px 18px;
    margin: 0 auto;
    max-width: 850px;    
}
.related-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tree-year {
  font-size: var(--textLargeSize);
  font-weight: var(--textBoldLighter);
  color: rgb(var(--textLightColor), 0.8);
}
.related-tree-section-title {
    background-color: var(--groupBackground);
    color: rgb(var(--textLightColor),1);
    padding: 3px 6px;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderDividerColor);    
    line-height: 1;
    text-wrap: nowrap;
    font-weight: 400;
}
.a-upcoming .related-tree-section-title {
  color: var(--redColor);
  background-color: antiquewhite;
}
.related-tree-content {
    background-color: var(--appWindowColor);
    border: 1px solid var(--borderLightColor);
    border-radius: var(--borderRadiusMedium);}
.related-tree-body {
    padding: 8px 12px; 
    display: flex;
    flex-direction: column;
    gap: 5px;
}    
.related-tree-content .carditem-row>div {
    white-space: inherit;
    text-align: left;
    word-break: normal;
}
.related-tree-header {
    display: flex;
    align-items: baseline;
    padding: 4px 12px;
    border-bottom: 1px solid var(--borderLightColor);
}
.related-tree-header .header-label {
    font-weight: var(--textBold);
    color: var(--eventColor);
}
.related-tree-header .header-label:hover{
    cursor: pointer;
    text-decoration: underline;
}
.activity-upcoming .related-tree-section-title{
    background-color: #cff2bf;
    color: #376800;
    border-color: #37680021;
}
html[data-theme="dark"] .activity-upcoming .related-tree-section-title {
    background-color: #b6d4a8;
}
.activity-overdue .related-tree-section-title{
    background-color: #fee4e2;
    color: #8b4135;
    border-color: #8b403517;
}
html[data-theme="dark"] .activity-overdue .related-tree-section-title {
    background-color: #e8c6c4;
}
.related-tree-header .header-date {
    color: rgb(var(--textLightColor), 0.8);    
    font-weight: initial;
}
.related-tree-header .carditem-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-tree-header .chk-checked,
.related-tree-header .chk-unchecked {
    margin-right: 5px;
    margin-top: 2px;
}
.related-tree-footer {
    padding-right: 30px;
}
.related-tree-footer>span {
    padding-right: 10px;
}
.related-tree-footer>span:last-child {
    padding-right: 0;
}
.related-tree-footer>span span:first-child {
    padding-right: 3px;
}
.related-tree-footer>a span+span {
    padding-left: 3px;
}
.related-tree-footer .field-elapsed-time {
    text-decoration: none;
    cursor: help;
}
.related-buttons {
    position: absolute;
    top: 3px;
    right: 5px;
}
.related-buttons .flat-btn {
    margin-right: 0;
}
.fld-file,
.field-file {
    position: relative;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.fld-file-name,
.field-file-name {
    padding-left: 3px;
}
.fld-file-body-preview,
.field-file-body-preview {
    text-align: left;
    display: inline-block;
}
.fld-file-body-preview span,
.field-file-body-preview span {
    color: var(--eventColor);
}
.file-nopreview{
    position: relative;
    display: inline-block;
}
.file-nopreview .file-nopreview-text{
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgb( var(--textLightColor));
    font-weight: var(--textBold);
    height: 25px;
    transform: translate(-50%, calc(-50% + 5px));
    display: flex;
    justify-content: center;
    align-items: center;
}
a.fld-file:hover .fld-file-name,
a.field-file:hover .field-file-name {
    text-decoration: underline;
}
.fld-file-body-preview img,
.field-file-body-preview img {
    border-radius: var(--borderRadius);
    box-shadow: var(--frameShadow);
    margin-bottom: 0.4rem;
}
a.fld-file:hover .fld-file-body-preview img,
a.field-file:hover .field-file-body-preview img {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .13);
}
.fld-image-preview {
    display: none;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-height: 200px;
    margin-top: 0.4rem;
}
.fld-image-preview img {
    position: absolute;
    width: fit-content;
    object-fit: cover;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}
.field-file-preview {
    display: block;
}
.field-file .progress {
    height: 3px;
    margin-top: -5px;
    padding-left: 5px;
    padding-right: 35px;
}
.field-file .progress .progress-bar {
    border-radius: 0.25rem;
    background-color: var(--gramColor);
}
.lookup-link {
    display: inline-block;
    word-break: break-all;
}
.related-tile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
}
.related-tile .carditem {
    display: flex;
}
.tile-item {
    padding: 0.40rem 30px 0.40rem 0.40rem;
    cursor: pointer;
}
.tile-item,
.related-tile .carditem {
    text-align: center;
    background-color: var(--appWindowColor);
    box-shadow: var(--frameShadow);
    border-radius: var(--borderRadius);
    margin-bottom: 5px;
    position: relative;
    width: calc(33.333% - 5px);
}
.tile-item-buttons {
    position: absolute;
    top: 9px;
    right: 0;
}
.tile-item-buttons .flat-btn {
    margin-right: 4px;
}
.related-compact-buttons .btn-group .dropdown-toggle::after,
.related-buttons .btn-group .dropdown-toggle::after,
.tile-item-buttons .btn-group .dropdown-toggle::after {
    border: none;
    display: none;
}
.tile-item:hover,
.related-compact-row:hover {
    background-color: var(--appDropdownMenuActiveColor);
    border-radius: var(--borderRadius);
}
.grid-contanier-compact {
    overflow-y: auto;
    border: var(--frameBorder);
    box-shadow: var(--frameShadow);
    background-color: var(--appWindowColor);
    padding: 0;
    margin-bottom: 5px;
    flex-direction: column;
    display: flex;
    width: 100%;
}
.grid-compact .carditem {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
}
.related-lg .tile-item:nth-of-type(3n+1),
.related-lg .carditem:nth-of-type(3n+1),
.related-lg .tile-item:nth-of-type(3n+1),
.related-lg .carditem:nth-of-type(3n+1) {
    margin-right: 7px;
}
.related-lg .tile-item:nth-of-type(3n+3),
.related-lg .carditem:nth-of-type(3n+3),
.related-lg .tile-item:nth-of-type(3n+3),
.related-lg .carditem:nth-of-type(3n+3) {
    margin-left: auto;
}
.related-lg .tile-item:nth-of-type(3n+4),
.related-lg .carditem:nth-of-type(3n+4),
.related-lg .tile-item:nth-of-type(3n+4),
.related-lg .carditem:nth-of-type(3n+4) {
    clear: left;
}
.related-md .tile-item,
.related-md .carditem {
    flex-basis: calc(50% - 5px);
}
.related-md .tile-item:nth-of-type(2n+1),
.related-md .carditem:nth-of-type(2n+1) {
    margin-right: 5px;
}
.related-md .tile-item:nth-of-type(2n+2),
.related-md .carditem:nth-of-type(2n+2) {
    margin-left: auto;
}
.related-sm .tile-item,
.related-sm .carditem {
    flex-basis: 100%;
}
.related-sm .tile-item:nth-of-type(1n+1),
.related-sm .carditem:nth-of-type(1n+1) {
    margin-right: 0px;
}
.tile-item-row {
    display: flex;
    align-items: center;
    flex: 0 0 33%;
    padding: 0.375rem;
    font-size: var(--textSmallSize);
}
.tile-item-row:first-child {
    padding-bottom: 0;
    min-height: 27px;
}
.tile-item-row:first-child .item-left {
    font-size: 12px;
}
.tile-item-row:last-child {
    padding-top: 0;
}
.tile-item-row .item-right .field-option {
    justify-content: flex-end;
}
.tile-item-row,
.tile-item-row div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-left,
.item-right {
    min-width: 25%;
    flex-basis: auto;
    flex-shrink: 1;
    flex-grow: 0;
}
.item-left a,
.item-right a {
    color: var(--textColor);
}
.item-left a:hover,
.item-right a:hover {
    text-decoration: none;
}
.item-left span.d-none+span,
.item-right span.d-none+span {
    padding: 0;
}
.item-right,
.item-right>a,
.item-right>span {
    flex: 1;
    justify-content: flex-end;
    flex-grow: 2;
    text-align: right;
    max-width: 100%;
}
.item-right,
.item-right a,
.item-right span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-left {
    max-width: 75%;
    text-align: left;
    margin-right: 5px;
}
.item-left .master {
    color: rgba(0, 0, 0, 0.9);
}
.item-left a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.related-md .field-lbl {
    display: inline-flex;
    max-width: 13.5ch;
}
.related-compact-content .item-left a br {
    display: none;
}
.related-content-compact {
    position: relative;
}
.related-compact {
    border: var(--frameBorder);
    box-shadow: var(--frameShadow);
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadius);
    padding: 0;
    margin-bottom: 5px;
}
.related-compact-row {
    cursor: pointer;
    padding-right: 30px;
    position: relative;
}
.related-compact-row .tile-item-row:first-child {
    padding: 0.25rem 0.375rem 0 0.75rem;
}
.related-compact-row .tile-item-row:last-child {
    padding: 1px 0.375rem 0.25rem 0.75rem;
}
.related-compact-row:last-child {
    border-bottom: none;
}
.related-compact-row .field-option-stage div.stage-box {
    max-width: 20px;
}
.lookup-dropdown .related-compact-row {
    padding-right: 5px;
    margin-left: 3px;
    margin-right: 3px;
}
.related-compact-buttons {
    position: absolute;
    top: 2.5px;
    right: 0;
}
.related-footer-row {
    text-align: right;
}
.related-footer-row span+span {
    padding-left: 5px;
}
.footer-field-lbl {
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallerSize);
    text-transform: uppercase;    
}
.footer-field-value {
    color: var(--textColor);
    font-weight: var(--textBold);
}
.view-header {
    border-radius: var(--borderRadius);
    border-radius: unset;
    padding-bottom: 16px;
    background-color: var(--appWindowColor);
}
.view-header.calendar {
    box-shadow: initial;
    padding-bottom: 0;
    margin-bottom: 0;
}
.view-header-main.customize,
.view-header.customize {
    pointer-events: none;
    opacity: 0.3;
}
.view-header-main {
    display: flex;
    gap: 10px;
    padding: 16px 16px 16px 16px;
    background-color: var(--appWindowColor);
    /* miesto na spodny ramik drzime vzdy, aby jeho zobrazenie pri skrolovani
       neposunulo obsah o 1px */
    border-bottom: 1px solid transparent;
}
/*  Triedu .scroll nastavuje Pascal (SetupScrollHeader) pri scrollTop > 1.
    Predtym to skusalo CSS samo cez `animation-timeline: scroll()`, to ale vie
    zatial len Chrome - vo Firefoxe sa ramik neobjavil nikdy. */
.view-header-main.scroll {
    border-bottom-color: var(--borderColorMedium);
}
.view-header-main:not(.customize) {
    position: sticky;
    top: 0;
    z-index: 101;
    transition: 0.3s;
}
.view-header-main.calendar {
    white-space: nowrap;
    align-items: center;
    padding-bottom: 16px;
}
.view-header-main.calendar .view-header-main.calendar{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-header-buttons {
    display: flex;
}
.related-header-buttons .flat-btn span {
    color: rgba(var(--grayColor), .5);
}
html[data-theme='dark'] .related-header-buttons .flat-btn span {
    color: rgba(var(--grayColor), .85);
}
.related-header-buttons button.flat-btn:hover span {
    color: var(--textColor);
}
.view-header-main.calendar .view-header-left {
    flex-direction: column;
    flex-direction: row;
    align-items: center;
}
.view-header-icon {
    font-size: 14px;        
    border-radius: 4px;
    padding: 4px;
    color: var(--appColor);    
    background-color: var(--elColor);
    align-self: center;
    width:24px;    
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout-container .view-header-icon{
    align-self: baseline;
    margin-top: 1px;
}
.view-subheader {
    margin-top: 15px;
}
.view-subheader p {
    color: var(--textColor);
    margin: 0;
}
.view-header-left-top,
.view-header-left-bottom {
    padding: 0;
    align-items: center;
    line-height: 1.25;
    display: flex;
}
.view-header.calendar .view-header-left-top,
.view-header.calendar .view-header-left-bottom {
    align-self: baseline;
}
.view-header-left-bottom {
    flex: 1;
}
.view-subtitle,
.view-header-left-bottom,
.view-header-main.calendar .view-header-left {
    overflow: hidden;
    text-overflow: ellipsis;
}
.view-header-left {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}
.view-header-right {
    white-space: nowrap;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    transition: all 3s ease;
}
.view-header-main.search .view-header-right,
.view-header-main.search .view-header-right .detail-view-buttons {
    width: 100%;
}
.view-header-main.search .view-header-right .btn-tool.icon-only {
    margin-right: auto;
    transition: margin 0.3s ease;
}
.view-header-right:last-child {
    margin-right: 0;
}
.view-header-right:last-child .btn-group button {
    margin-right: 0;
}
.view-header-right .btn-group+.gbtn.btn-tool {
    margin-right: 0;
}
.view-header-right .dropdown {
    font-size: 1rem;
    text-align: right !important;
    margin-right: 0;
}
.view-subtitle {
    text-transform: uppercase;
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallSize);
    letter-spacing: -0.02em;
}
.view-stage {
    display: flex;
    position: relative;
    padding: 0 16px 8px 16px;
}
.stage-buttons {
    border: 1px solid red;
    flex-grow: 0;
    flex-shrink: 0;
}
.stage-buttons button.btn-tool {
    margin-right: 0;
    margin-left: 16px;
}
.stage-frame {
    flex-grow: 1;
    position: relative;
}
.stage-duration{
    white-space: nowrap;
}
.stage-frame ul {
    list-style: none;
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 0;
    height: 28px;
    margin: 0;
}
.stage-frame ul.stage-history {
    height: unset;
    overflow: unset;
}
.stage-frame ul.stage-history li>div {
    padding-left: 25px;
}
.stage-frame ul.stage-history li:first-child>div {
    padding-left: 10px;
}
.stage-frame ul li {
    flex-basis: 100%;
}
.stage-frame ul li div.stage-item {
    color: rgba(var(--textLightColor), 1);
    text-decoration: none;
    font-size: var(--textSmallSize);
    padding: 5px 0 5px 25px;
    background-color: var(--stageBackground);
    position: relative;
    width: auto;
    cursor: pointer;
    -webkit-transition: font-size 0.5s;
    -moz-transition: font-size 0.5s;
    -o-transition: font-size 0.5s;
    transition: font-size 0.5s;
}
.stage-frame ul li div.stage-item:hover {
    background: var(--stageHoverBackground);
    color: rgba(var(--blackColor),.831);
    font-size: var(--textSize);
}
.stage-frame ul li div.stage-item:hover::after {
    border-left-color: var(--stageHoverBackground);
}
.stage-frame ul li div.stage-item::before,
.stage-frame ul li div.stage-item::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    position: absolute;
    z-index: 1;
    left: 100%;
    margin-top: -24px;
    top: 50%;
}
.stage-frame ul li div.stage-item::after {
    border-left: 16px solid var(--stageBackground);
}
.stage-frame ul li div.stage-item::before {
    border-left: 16px solid var(--templateViewBackground);
    margin-left: 2px;
}
.stage-frame ul li:first-child div.stage-item {
    border-bottom-left-radius: var(--borderRadiusBig);
    border-top-left-radius: var(--borderRadiusBig);
    padding-left: 10px;
}
.stage-frame ul li:last-child div.stage-item {
    border-bottom-right-radius: var(--borderRadiusBig);
    border-top-right-radius: var(--borderRadiusBig);
    padding-right: 10px;
}
.stage-frame ul li:last-child div.stage-item::before{
    margin-left: 0;
}
.stage-frame ul li div div.stage-content {
    display: grid;
    text-align: center;
    justify-content: center;
}
.stage-frame ul li div.stage-content span:not(.stage-duration) {
    height: 18px;
    line-height: 18px;
}
.stage-frame ul li div.stage-content span.stage-duration {
    height: 18px;
    line-height: 18px;
    position: absolute;
    border: 1px solid red;
    left: 50%;
    transform: translate(-50%, -50%);
    top: -1px;
    z-index: 1;
    background: red;
}
.stage-frame ul li div.stage-content span.stage-duration span {
    position: absolute;
}
.stage-frame ul li div.stage-content,
.stage-frame ul li div.stage-content span:not(.stage-duration) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stage-frame ul li div.stage-item-done {
    background: var(--stageDoneBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-done span i {
    margin-right: 5px;
}
.stage-frame ul li div.stage-item-done:hover {
    background-color: var(--stageDoneHoverBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-done::after {
    border-left: 16px solid var(--stageDoneBackground);
}
.stage-frame ul li div.stage-item-done:hover::after {
    border-left: 16px solid var(--stageDoneHoverBackground);
}
.stage-frame ul li div.stage-item-passed-won {
    background: var(--stageDoneBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-passed-won:hover {
    background-color: var(--stageDoneHoverBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-passed-won::after {
    border-left: 16px solid var(--stageDoneBackground);
}
.stage-frame ul li div.stage-item-passed-won:hover::after {
    border-left: 16px solid var(--stageDoneHoverBackground);
}
.stage-frame ul li div.stage-item-passed-lost {
    background: var(--stageBackground);
    color: rgba(var(--blackColor), .831);
}
.stage-frame ul li div.stage-item-passed-lost:hover {
    background: var(--stageHoverBackground);
    color: rgba(var(--blackColor), .831);
}
.stage-frame ul li div.stage-item-passed-lost::after {
    border-left: 16px solid var(--stageBackground);
}
.stage-frame ul li div.stage-item-passed-lost:hover::after {
    border-left: 16px solid var(--stageHoverBackground);
}
.stage-frame ul li div.stage-item-won,
.stage-frame ul li div.stage-item-won:hover {
    background-color: var(--stageDoneHoverBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-won::after,
.stage-frame ul li div.stage-item-won:hover::after {
    border-left: 16px solid var(--stageDoneHoverBackground);
}
.stage-frame ul li div.stage-item-lost,
.stage-frame ul li div.stage-item-lost:hover {
    background: red;
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-lost::after,
.stage-frame ul li div.stage-item-lost:hover::after {
    border-left: 16px solid red;
}
.stage-frame ul li div.stage-item-active,
.stage-frame ul li div.stage-item-active:hover {
    background: var(--stageActiveBackground);
    color: rgba(var(--whiteColor), 1);
}
.stage-frame ul li div.stage-item-active::after,
.stage-frame ul li div.stage-item-active:hover::after {
    border-left: 16px solid var(--stageActiveHoverBackground);
}
.dropdown {
    color: var(--textColor);
    background: none;
    border: none;
    text-align: left !important;
    font-size: 16px;
    font-weight: var(--textBold);
    letter-spacing: -0.02em;
    cursor: pointer;
    border-radius: var(--borderRadius);
}
.dropdown.show {
    cursor: pointer;
}
.dropdown a {
    background: none;
    text-align: left;
    display: block;
    line-height: 1.2;
}
.dropdown-header {
    font-size: 100%;
    color: var(--textColor);
    font-weight: var(--textBold);
    padding: 3px 25px;
    color: rgba(var(--textLightColor), 1);
    border-radius: var(--borderRadius);
    margin: 5px 0;
    background-color: var(--groupBackground);
}
.dropdown-header::first-child {
    margin-top: 0;
}
.dropdown-header .text:empty {
    display: none;
}
.dropdown-header .text {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.dropdown-menu .dropdown-header {
    cursor: default;
}
li[class*='dropdown-header optgroup-'] {
    display: none;
}
.dropdown-item.back::before,
.dropup .dropdown-toggle:after,
.dropdown-toggle:after {
    font: normal normal normal var(--textSize)/1 'Font Awesome 7 Pro';
    border: none;
    vertical-align: baseline;
    margin: 0;
}
.view-selector.dropdown-toggle:after {
    vertical-align: .255em;
}
.side-header .dropdown-toggle::after,
.view-header-left .dropdown .dropdown-toggle::after,
.field-row .bootstrap-select .dropdown-toggle::after,
.input-container .bootstrap-select .dropdown-toggle::after,
.btn-group.arrow > .dropdown-toggle:after {
    content: "\f0d7";
    padding: 0 .45rem;
    /*min-width: var(--templateInputHeight);*/
    font-weight: 900;
    font-size: var(--textSmallSize);
    color: var(--textColor);
}
.view-header-left .dropdown .dropdown-toggle::after,
.btn-group.arrow .dropdown-toggle:after{
    padding: 0 0 0 8px;
}
.dropup .dropdown-toggle:after {
    content: "\f077";
}
.dropdown-toggle.gbtn-primary::after {
    color: #fff;
}
.layout-selector {
    position: inherit;
}
.view-selector,
.view-selector:focus {
    outline: 0 none;
    color: var(--textColor);
}
.view-selector.active.focus,
.view-selector.active:focus,
.view-selector.active:hover,
.view-selector:active.focus,
.view-selector:active:focus,
.view-selector:active:hover,
.view-selector:hover,
.show>.dropdown-toggle.view-selector,
.show>.dropdown-toggle.view-selector.focus,
.show>.dropdown-toggle.view-selector:focus,
.show>.dropdown-toggle.view-selector:hover {
    background-color: var(--focusColor);
    box-shadow: 0 0 0 5px var(--focusColor);
    outline: 0 none;
    border-radius: var(--borderRadiusSmall);
}
.dropdown a:hover,
.show>.dropdown-toggle {
    text-decoration: none;
}
.dropdown-icons {
    position: absolute;
    left: -23px;
}
.ui-sortable-placeholder.dropdown-item.dropdown-item-selected::before,
.ui-sortable a.dropdown-item:hover::before {
    display: none;
}
.dropdown-caption {
    flex-grow: 1;
    margin-right: 15px !important;
}
/* Dvojriadkova polozka menu: nazov + doplnkovy riadok pod nim (napr. drobcekova
   cesta vo vysledkoch hladania). Bez toho sa subtext lepil vedla nazvu a roztahoval
   riadok do sirky. */
.dropdown-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
    margin-right: 15px;
}
/* Vysledky hladania: ikona potrebuje odstup od nazvu (sama o sebe ho nema, len
   `min-width` centrovanie glyfu, co pri sirokych ikonach vyjde na nulu). */
.dd-search-generated .dropdown-item {
    column-gap: 6px;
}
/* Sipka podmenu je `position: absolute` bez `top` - v dvojriadkovej polozke by ju
   flex `align-items: flex-start` zarazil na horny okraj; vycentrujeme na riadok. */
.dd-search-generated .dropdown-item.dropdown-toggle::after {
    top: 50%;
    transform: translateY(-50%);
}
/* Dvojriadkovy variant: ikona patri k prvemu riadku (nazvu), nie do stredu oboch. */
.dropdown-item:has(.dropdown-item-body) {
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
}
.dropdown-item:has(.dropdown-item-body) .dropdown-item-icon {
    line-height: 20px;
}
.dropdown-item-body .dropdown-caption {
    margin-right: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-item .subtext {
    font-size: var(--textSmallSize);
    line-height: 1.35;
    font-weight: 400;
    color: rgba(var(--textLightColor), 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Hladanie na prvej urovni menu (AppendDropDownSearchRoot) - v podmenu sedi vedla
   tlacitka "Spat", tu je samo, takze si berie celu sirku. */
.dropdown-search-root {
    padding: 2px 12px 6px 12px;
}
.dropdown-search-root .dropdown-item-search {
    display: block;
    width: 100%;
}
.dropdown-divider {
    border-top-color: var(--borderDividerColor);
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: var(--borderRadius);
    padding-left: 3px;
    padding-right: 3px;
}
.dropdown-submenu.dropdown-left>.dropdown-menu {
    right: 100%;
    left: inherit;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.dropdown-menu:not(.view-filter-dialog) .dropdown-toggle::after,
.dropdown-menu .dropdown-toggle:not(.bootstrap-select .dropdown-toggle)::after {
    content: "\f054";
    right: 12px;
    position: absolute;
    color: var(--textColorLight);
}
.bootstrap-select .dropdown-menu {
    top: 0 !important;
    padding-left: 0;
    padding-right: 0;
}
.bootstrap-select .dropdown-menu.inner {
    padding-left: 3px;
    padding-right: 3px;
}
.bootstrap-select .dropdown-menu.inner.dropdown-menu {
    max-height: 170px;
}
.bootstrap-select>.dropdown-toggle.bs-placeholder {
    color: var(--textColor);
}
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: var(--textColor);
}
.bootstrap-select .dropdown-toggle .filter-option {
    align-items: center;
    display: flex;
    overflow: visible;
}
.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner-inner {
    gap: 5px;
    display: flex;
    align-items: baseline;
}
.bootstrap-select .dropdown-menu.show{
    width: 100%;
    min-width: fit-content;
}
.bootstrap-select .dropdown-menu.show,
#autocomplete-list.lookup-dropdown,
.main-auto-list {
    margin-top: 2px !important;
    top: 100%;
}
#autocomplete-list.lookup-dropdown::before,
.main-auto-list::before,
.dropdown-menu[x-placement="bottom-end"]::before,
.dropdown-menu[x-placement="bottom-start"]::before,
.dropdown-menu[x-placement="top-end"]::before,
.dropdown-menu[x-placement="top-start"]::before {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
}
.dropdown-menu[x-placement="bottom-end"]::before {
    top: -6px;
    background-color: var(--appDropdownMenuColor);
    transform: rotate(45deg);
    height: 10px;
    width: 10px;
    left: calc(100% - 19px);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.07);
}
.dropdown-menu[x-placement="top-end"]::before,
.dropdown-menu[x-placement="top-start"]::before,
.dropdown-menu[x-placement="bottom-end"]::before,
.dropdown-menu[x-placement="bottom-start"]::before,
#autocomplete-list.lookup-dropdown::before,
.main-auto-list::before {
    display: none;
}
.dropdown-menu[x-placement="top-end"] {
    top: 0 !important;
}
.dropdown-menu[x-placement="top-end"]::before {
    bottom: -5px;
    right: 9px;
    transform: rotate(45deg);
    height: 10px;
    width: 10px;
    background-color: var(--appDropdownMenuColor);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.07);
}
.dropdown-menu[x-placement="top-start"] {
    top: 0 !important;
}
.dropdown-menu[x-placement="top-start"]::before {
    bottom: -5px;
    left: 9px;
    transform: rotate(45deg);
    height: 10px;
    width: 10px;
    background-color: var(--appDropdownMenuColor);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.07);
}
.dropdown-menu {
    font-size: var(--textSize);
    color: var(--textColor);
    margin: 0;
    border-radius: var(--borderRadius);
    top: 5px !important;
    background: var(--appDropdownMenuColor);    
}
.dropdown-menu .scroll-list {
    width: 100%;
    max-height: calc(80vh - 100px);
    overflow: auto;
    overflow-x: hidden;
}
.dropdown-menu .scroll-list a {
    position: relative;
    padding-right: 0;
}
.dropdown-menu .scroll-list .dropdown-row {
    display: flex;
    flex: 1;
    position: relative;
}
.dropdown-menu.show {
    box-shadow: var(--appDropdownMenuShadow);
    padding-left: 3px;
    padding-right: 3px;
    border: initial;
    border-radius: var(--borderRadiusMedium);
    z-index: 998;
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .dropdown-menu.show {
        will-change: auto !important;
    }
}
.dropdown-menu .selected span.check-mark {
    display: none !important;
}
.dropdown-menu a {
    color: var(--textColor);
    padding: 8px 25px;
    font-size: calc(var(--textSize) + 1px);    
    display: flex;
    align-items: center;
    min-width: 100%;
    width: max-content;
}
.dropdown-menu .field-option>span {
    padding: 2px 8px;
}
.dropdown-menu .dropdown-section a {
    padding-left: 30px;
    min-height: 26px;
}
.dropdown-menu li a{
    max-height: var(--templateInputHeight);
}
.dropdown-menu li a span.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-item-container {
    /*max-height: 300px;*/
    /*overflow: hidden;*/
}
.dropdown-root {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borderDividerColor);
}
.dropdown-item-search{
    border: none;
    box-shadow: none;
}
.dropdown-item-holder {
    max-height: 265px;
    overflow-y: auto;
}
.dropdown-item {
    text-transform: none;
    color: var(--textColor);
    font-size: calc(var(--textSize) + 1px);
    cursor: pointer;
    font-weight: 500;
    line-height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 18px;
    padding-left: 18px;
}
.dropdown-item.dropdown-item-selected{
    padding-right: 18px !important;
}   
.dropdown-item:has(.btn-switch) {
	padding-right: 10px;
}
.dropdown-item .btn-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 28px;
	height: 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: background-color 180ms ease;
	vertical-align: middle;
}

.dropdown-item .btn-switch::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform 180ms ease;
}
.dropdown-item .btn-switch[data-state="checked"] {
	background: var(--gramColor);
}

.dropdown-item .btn-switch[data-state="checked"]::before {
	transform: translateX(14px);
}

.dropdown-item .btn-switch-state {
	display: none;
}

.dropdown-item .item-drag {
    visibility: hidden;
    color: var(--eventColor);
    font-size: larger;
}
.dropdown-item:hover .item-drag {
    visibility: visible;
}
.dropdown-item .item-drag.d-none {
    display: block !important;
    visibility: hidden;
}
.dropdown-item-icon {
    font-size: 15px;
}
.dropdown-item.ui-sortable-helper {
    width: calc(100% - 50px) !important;
    display: table;
}
.dropdown-item .text {
    max-width: 380px;
}
.dropdown-item .fal,
.dropdown-item .fa {
    min-width: 1.25em;
    text-align: center;
}
.dropdown-menu li a.dropdown-item.opt {
    padding-left: 25px;
}
.dropdown-menu .dropdown-item.delete span {
    color: var(--redColor);
}
.dropdown-grid {
    display: grid;
    gap: 5px;
    padding: .25rem 1.5rem .5rem 1.5rem;
}
.dropdown-grid button {
    border-radius: var(--borderRadius);
    border: 1px solid rgba(var(--blackOrWhiteColor), 0.114);;
    background-color: transparent;
    outline: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: column;
    padding: var(--borderRadius);
    height: fit-content !important;
}
.dropdown-grid button.selected {
    box-shadow: var(--eventColor) 0px 0px 0px 2px inset;
}
.dropdown-grid button:disabled {
    cursor: default;
    background-color: var(--templateInputDisabledBackground);
    border-color: var(--templateInputDisabledBorder);
    color: var(--templateInputDisabledColor);
    border-radius: var(--inputBorderRadius);
    opacity: .85;
}
.dropdown-grid button:disabled .icon{
    --fa-primary-color: var(--templateInputDisabledColor) !important;
    --fa-secondary-color: #e5e8e9 !important;
}
.dropdown-grid button > span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dropdown-grid span.soon-txt {
    position: absolute;
    font-size: 7px;
    text-transform: uppercase;
    top: -5px;
    right: 2px;
    background: #6aaaea;
    line-height: 1;
    border-radius: 4px;
    color: var(--white);
    padding: 2px;
}
.dropdown-grid button .icon{
    font-size: 18px;
}
.dropdown-grid button .text {
    font-size: 10px;
    line-height: 1;
}

button.btn-tool.active .flat-btn-icon,
button.btn-tool.active .btn-icon{
    color: var(--eventColor);
}
button.btn-tool.active .btn-icon{
    font-weight: var(--textBold);
}
button.gbtn.small {
    height: var(--btnSmallHeight);
    min-height: var(--btnSmallHeight);
    margin: 0;
    align-items: center;
    font-size: 11px;
    letter-spacing: -0.02em;
    border-radius: var(--radiusPill);
}
button.gbtn.small:not(.icon-only){
    height: auto;
    flex-wrap: wrap;
    line-height: 1.4;
    column-gap: 5px;
    row-gap: 2px;
}
button.gbtn.small span+span{
    margin: 0;
}
button.gbtn.small .btn-lbl{
    line-height: normal;
}
button.gbtn.small.icon-only{
    min-width: var(--btnSmallHeight);
    width: var(--btnSmallHeight);
}
.dropdown-item.back::before{
    content: '\f053';
    position: absolute;
    left: 16px;
}
.dropdown-item.back{
    font-size: var(--textSmallSize);
}
.select-color-item {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: var(--borderRadius);
    vertical-align: middle;
}
/* Color / Icon picker (AppendColorPicker, AppendIconPicker) */
.picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
}
.color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: var(--borderRadiusSmaller);
    border: 1px solid var(--borderColor);
}
.color-swatch.none,
.color-grid-item.none {
    background-color: var(--appWindowColor);
    background-image: linear-gradient(to top right, transparent 44%, #c2291c 46%, #c2291c 54%, transparent 56%);
    border: 1px solid var(--borderColor);
}
.color-grid {
    display: grid;
    grid-template-columns: repeat(6, 26px);
    gap: 8px;
    padding: 10px 12px;
}
.color-grid-item {
    width: 26px;
    height: 26px;
    border-radius: var(--borderRadius);
    cursor: pointer;
}
.color-grid-item:hover {
    filter: brightness(0.85);
}
.color-grid-item.selected {
    box-shadow: 0 0 0 2px var(--appWindowColor), 0 0 0 4px var(--gramColor);
}
.picker-icon {
    font-size: 16px;
    color: var(--textColor);
}
.picker-icon.empty {
    opacity: .4;
}
.icon-picker-search {
    padding: 4px 8px;
    border-bottom: 1px solid var(--borderDividerColor);
}
.icon-grid {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 4px;
    padding: 8px 10px;
    max-height: 280px;
    overflow-y: auto;
}
.icon-grid-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadius);
    cursor: pointer;
    font-size: 15px;
    color: var(--textColor);
}
.icon-grid-item:hover {
    background-color: var(--appDropdownMenuHoverColor);
}
.icon-grid-item.selected {
    background-color: var(--appDropdownMenuActiveColor);
    box-shadow: inset 0 0 0 2px var(--gramColor);
}
.field-picker {
    display: flex;
    align-items: center;
}
.dropdown-grid button:hover,
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu a:focus,
.dropdown-menu a:hover {
    color: var(--textColor);
    text-decoration: none;
    background-color: var(--appDropdownMenuHoverColor);
    outline: 0 none;
    border-radius: var(--borderRadius);
}
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:active:hover{
    background-color: var(--appDropdownMenuActiveColor);
}
.dropdown-item:hover.delete {
    background-color: var(--redColor);
    color: rgba(var(--whiteColor), 1);
}
.dropdown-item:hover.delete span {
    color: rgba(var(--whiteColor), 1) !important;
}
.menu-item-selected:before,
.item-selected:before,
.menu-item-selected:before,
.dropdown-item-selected:before,
li.selected .selected::before {
    font: normal normal normal var(--textSize)/1 'Font Awesome 7 Pro';
    content: '\f058';
    right: 10px;
    position: absolute;
    color: var(--textColor);
}
.dropdown-menu .dropdown-item-selected:before,
.dropdown-item-selected:hover::before,
.ui-sortable .dropdown-item-selected:before {
    top: 50%;
    transform: translateY(-50%);
    color: var(--eventColor);
    font-weight: 900;
    display: inline-block !important;
}

.dropdown-item-selected {
    align-items: center;
}
.dropdown-item-selected .dropdown-caption {
    color: var(--eventColor);
}
.grid-entity-type {
    color: rgba(var(--textLightColor), 1);
    text-transform: uppercase;
}
.view-navigation-container {
    padding: 0 16px 0 16px;
}
.view-selection-container {
    position: relative;
}
.view-selection-container .view-selection {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--appColor);
    z-index: 105;
    display: flex;
    align-items: baseline;
    flex-direction: column;
    gap: 5px;
    opacity: 1;
    transition: opacity 0.1s ease-out;
    border-radius: var(--borderRadius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px -6px 5px 0px rgba(0, 0, 0, .06);
    padding: 15px 5px 5px 15px;
}
html[data-theme='dark'] .view-selection-container .view-selection {
    box-shadow: 0px -6px 5px 0px rgba(0, 0, 0, .45);
    background-color: var(--appWindowColor);
}
.view-selection-container .view-selection.d-none {
    margin: 0;
    visibility: hidden;
    height: 0;
    min-height: 0;
    display: flex !important;
    opacity: 0;
}
.view-navigation-search {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.view-navigation-search .lookup-container .lookup-select .list-item {
    align-items: baseline;
}
.search-box {
    width: 100%;
}
.search-box .view-search-input {
    width: 100%;
    border-radius: var(--borderRadiusBig);
    min-height: 29px;
    padding-right: 30px;
}
.search-box .list-content {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    /*align-items: start;*/
    align-items: center;
}
.search-box .list-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;    
}
.search-box .main-auto-list {
    max-width: 800px;
    padding: 0.5rem 0;
}
.search-box .input-icon .gbtn.gbtn-input {
    display: flex;
    align-items: center;
    border-radius: var(--borderRadiusBig);
    height: 27px;
    background-color: inherit;
}
.search-box:hover::after,
.search-box.focused::after {
    content: '';
    width: calc(100%);
    height: calc(100%);
    top: 0;
    left: 0;
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--borderRadiusBig);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
    transition: border 0.15s steps(4, end);
}
.search-box:not(.focused):hover::after {
    border-width: 1px;
}
.view-filter {
    display: flex;
    margin-bottom: 0;
    transition: opacity 0.2s, max-height 0.7s ease-in-out;
}
.related-view-filter.d-visible,
.view-filter.d-visible {
    display: flex;
    border-radius: var(--borderRadiusSmall);
    position: relative;
    opacity: 1;
    max-height: 100%;
}
.view-filter.d-visible {
    padding: 0 18px 12px 18px;
}
.related-view-filter.d-visible{
    margin-bottom: 12px;
}
.related-view-filter.d-none,
.view-filter.d-none{
    display: flex !important;
    margin: 0;
    visibility: hidden;
    height: 0;
    min-height: 0;
    opacity: 0;
    max-height: 0;
}
.view-filter-field {
    font-size: var(--textSmallSize);
    font-weight: var(--textBoldLighter);
}
.view-filter-value {
    max-width: 100px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-size: var(--textSmallSize);
    font-weight: var(--textBold);
    color: var(--textColor);
}
.view-filter-item {
    font-size: inherit;
    position: relative;
    padding: 1px 10px;
    min-width: var(--btnFilterWidth);
    min-height: var(--btnFilterHeight);
    box-shadow: #e6e7ea 0px 0px 0px 1px inset;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadiusBig);
}
html[data-theme='dark'] .view-filter-item{
    box-shadow: #e6e7ea2e 0px 0px 0px 1px inset;
}
.view-filter-item.dropdown {
    padding: 0;
}
.view-filter-item.condition {
  border-radius: var(--borderRadius);
  padding: 3px 0;
}
.view-filter-item.btn-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}
.view-filter-item.btn-plus:hover {
    background-color: var(--btnHoverBackground);
}
.view-filter-item.btn-plus.dropdown>.dropdown-toggle {
    padding: 0;
    min-width: 100%;
    min-height: 100%;
    align-items: center;
    justify-content: inherit;
    height: var(--btnFilterHeight);
    padding: 0 12px;
}
.view-filter-item.btn-plus.dropdown>.dropdown-toggle span {
    align-self: auto;
    font-size: var(--textSmallSize);
}
.view-filter-item:hover {
    background-color: var(--btnHoverBackground);
    color: var(--textColor);
}
.view-filter-item.dropdown .dropdown-toggle {
    padding-left: 12px;
    padding-right: 0;
    text-align: center;
    display: flex;
    height: 100%;
    position: relative;
    min-height: var(--btnFilterHeight);
}
.view-filter-item.dropdown .dropdown-toggle span {
    align-self: center;
}
.view-filter-item.dropdown .dropdown-toggle span.view-filter-op {
    display: inline-flex;
    align-items: center;
    font-size: var(--textSmallSize);
    background-color: var(--groupBackground);
    border-radius: 4px;
    padding: 0 3px;    
}
.view-filter-item.dropdown .dropdown-toggle span.icon,
.view-filter-item.dropdown .dropdown-toggle span.toolbtn {
    margin-top: 0;
    margin-bottom: 0;
}
.view-filter-item.dropdown:not(.btn-plus) .dropdown-toggle>span:last-child:not(:only-child) {
    display: flex;
    align-items: center;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 1.5rem;
    height: var(--btnFilterHeight);
    margin-left: 6px;
    padding: 0;
    justify-content: center;
}
.view-filter-item.dropdown:not(.btn-plus) .dropdown-toggle>span:last-child:not(:only-child):hover {
    color: #c05253;
    border-left-color: rgba(var(--blackOrWhiteColor), 0.1);
}
.view-filter-item span.toolbtn {
    margin-left: 6px;
    padding-right: 6px;
    color: rgba(var(--textLightColor), 0.75);
}
.view-filter-item.dropdown>.dropdown-toggle:after {
    display: none;
}
.view-filter-item a {
    font-size: inherit;
}
/* hladany text (fulltext) v pruhu filtrov - vyzera ako filter, ale nic
   nerozbaluje; jediná akcia je krizik, ktory ho zrusi */
.view-filter-item.fulltext .dropdown-toggle {
    cursor: default;
}
.view-filter-item.fulltext .view-filter-field {
    color: rgba(var(--textLightColor), 0.75);
    font-size: var(--textSmallSize);
}
.view-filter-items {
    display: flex;
    gap: 5px;
    align-self: flex-start;
    flex-wrap: wrap;
}
.view-filter-items span+span {
    margin-left: 5px;
}
.view-filter-dialog {
    padding: 1rem;
}
.view-filter-dialog.dropdown-menu.show {
    top: calc(100% + 2px) !important;
    width: 300px;
    cursor: default;
    padding-left: 1rem;
    padding-right: 1rem;
}
.view-filter-dialog.dropdown-menu.show::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 10px;
    background-color: var(--appDropdownMenuColor);
    transform: rotate(45deg);
    height: 10px;
    width: 10px;
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.07);
}
.view-filter-add .view-filter-item.dropdown {
    min-width: 30px;
}
.view-filter-add .view-filter-item.dropdown .dropdown-toggle {
    padding: 3px 6px;
    justify-content: center;
}
.view-search-input {
    padding-right: 27px;
}
.filter-footer {
    justify-content: flex-end;
}
.toolbtn.icon:before {
    border-left: 1px solid var(--borderColor);
    padding-left: 6px;
    left: 0;
    position: absolute;
}
.input-append,
.input-icon {
    display: -ms-flexbox;
    display: flex;
}
.input-icon {
    position: absolute;
    z-index: 2;
    display: block;
    text-align: center;
    right: 2px;
    top: 2px;
}
.input-icon .gbtn.gbtn-input {
    border-radius: var(--borderRadius);
    padding-top: 0;
    padding-bottom: 0;
    height: calc(var(--templateInputHeight) - 4px);
    min-width: var(--templateInputHeight);
    color: var(--textColor);
    background-color: var(--templateInputBackground);

	/*display: flex;
	align-items: center;
	justify-content: center;*/
}
.input-left-icon {
    position: absolute;
    z-index: 1;
    display: flex;
    left: 0;
    top: 1px;
    height: calc(100% - 2px);
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--borderColor);
    min-width: 35px;
}
.fldvalue-empty .input-left-icon {
    color: var(--disabledTextColor);
}
.fldvalue-filled .input-left-icon {
    color: var(--textColor);
}
.view-navigation-left {
    float: left;
    z-index: 0;
}
.view-navigation-center {
    float: left;
    flex-grow: 1;
    min-width: 320px;
}
.view-navigation-right {
    float: left;
    text-align: right;
    gap: 5px;
    display: flex;
}
.view-navigation-right .btn-tool {
    margin-right: 0;
}
.view-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background-color: var(--appWindowColor);
    border-bottom: var(--frameBorder);
}
.view-chart.d-visible+.view-content-body .view-content{
    border-top-right-radius: var(--borderRadius);
}
.view-content-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.view-table {
    padding-left: 8px;
}
.chart-no-data {
    text-align: center;
}
.chart-no-data span+span {
    padding: 0 5px;
}
.view-body {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    height: 100%;
    justify-content: left;
    position: relative;
    margin-top: 8px;
    z-index: 0;
}
.app-calendar .view-body:has(.view-calendar-side.d-none) {
    box-shadow: var(--frameShadow);
}
.view-calendar .view-body {
    flex-direction: row;
    margin-top: initial;
}
.view-calendar .view-header-right .btn-tool:not(.icon-only) {
    padding: 0 12px;
    height: var(--btnHeight);
    max-height: var(--btnHeight);
}
.view-chart {
    display: flex;
}
.view-chart.d-none {
    flex-basis: auto;
}
.view-chart.d-none+.view-content-body {
    flex-basis: 100%;
    transition: flex-basis 0.1s ease-in-out;
}
.view-chart.d-visible {
    overflow: hidden;
    overflow-y: auto;
    background: var(--appWindowColor);
    box-shadow: var(--frameShadow);
    margin-left: 10px;
    width: calc(40% - 10px);
    position: relative;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    float: right;
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}
.view-chart.d-visible+.view-content-body {
    flex-basis: 60%;
    transition: flex-basis 0.1s ease-in-out;
}
.view-chart-body {
    background: var(--appWindowColor);
    box-shadow: var(--frameShadow);
    width: 100%;
}
.related-view-chart{
    background-color: var(--appWindowColor);
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}
.view-container .related-view-chart {
    padding: 16px 16px 0 16px;
}
.view-chart-submenu{
    display: flex;
}
.view-chart-filter {
    gap: 5px;
    margin-left: auto
}
.view-chart-filter .field-input {
    min-width: 100px;
    max-width: 150px;
}
.view-chart-filter .field-row:last-child .field-input {
    min-width: 180px;
}
.view-chart-data {
    width: 100%;
    position: relative;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.view-chart-data:has(> .loader-container) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.view-content-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
	z-index: 1;
    /*border-top-left-radius: var(--borderRadiusMedium);
    border-top-right-radius: var(--borderRadiusMedium);*/
    border: 1px solid var(--borderColorMedium);
    border-bottom: none;
    border-left: none;
}
.view-chart-header {
    margin: 0;
    color: var(--textColor);
    display: flex;
}
.view-chart-header-left {
    flex: 1;
    align-self: center;
}
.view-chart-header-right {
    align-self: center;
    text-align: end;
}
.view-chart-header-right div:first-child {
    margin-left: 5px;
}
.view-chart-header-right .btn-group .flat-btn {
    margin-right: 0;
}
.view-chart-header-right .btn-group .dropdown-toggle::after {
    border: none;
    display: none;
}
.btn-group {
    vertical-align: unset;
}
.btn-group .gbtn+.gbtn:has(.btn-lbl) {
    width: auto;
    padding: 0 10px;
}
.btn-group .gbtn:not(:first-child) {
    border-left: none;
}
.btn-group>.btn-group:not(:last-child)>.gbtn,
.btn-group>.gbtn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group>.btn-group:not(:first-child)>.gbtn,
.btn-group>.gbtn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group .btn-tool {
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-chart-container {
    padding: 0 15px;
    height: calc(100% - 100px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.view-footer {
    background-color: var(--appWindowColor);
    border-top: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 5px 0;
    padding-left: .75rem;
    padding-right: .75rem;
    min-height: max-content;
    border-bottom-left-radius: var(--borderRadiusMedium);
    border-bottom-right-radius: var(--borderRadiusMedium);
    border: 1px solid var(--borderColorMedium);
    border-top: none;
}
.view-chart.d-visible+.view-content-body .view-footer {
    border-bottom-right-radius: var(--borderRadius);
}
.view-footer-info {
    display: inline-flex;
    padding-left: 0.5rem;
    white-space: nowrap;
    color: rgba(var(--textLightColor), 1);
    gap: 2px;
}
.view-footer-info span {
    margin-right: 2px;
}
.view-sum-item {
    border-radius: var(--borderRadius);
    padding: 2px 6px;
    font-weight: var(--textBold);   
    display: inline-block;
    padding-left: 10px;
    min-height: 20px;    
    cursor: pointer;
}
.view-sum-item:hover {
    background-color: var(--appColor);
}
.view-footer-navigation .gbtn {
    margin-right: 2px;
    line-height: 1.2;
}
.view-footer-navigation .gbtn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.view-sum-items {
    color: var(--textColor);
    font-weight: var(--textBold);
}
.view-sum-lbl {
    padding-right: 2px;
    color: rgba(var(--textLightColor), 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--textSmallerSize);
    text-transform: uppercase;    
}
.view-sum-value {
    color: var(--textColor);
    font-weight: var(--textBold);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Summary (total) polia - spolocny vzhlad pre paticku pohladu, related paticku
   v DetailView a chip v hlavicke kanban stlpca. Kazde pole je bootstrap
   dropdown (dropup) - klik otvori menu na zmenu agregacie / odobranie.
   --------------------------------------------------------------------------- */
.summary-item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.summary-item > .icon,
.summary-item > i {
    color: rgba(var(--textLightColor), 1);
    margin-right: 3px;
}
/* paticka hlavneho pohladu */
.summary-group-view {
    display: inline-flex;
}
.summary-item-view {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* related paticka v DetailView - polozky su pod sebou, zarovnane doprava */
.summary-group-related,
.summary-add-related {
    display: flex;
    justify-content: flex-end;
}
.summary-item-related {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 1px 4px;
    border-radius: var(--borderRadius);
}
.summary-item-related:hover,
.summary-item-kanban:hover {
    background-color: var(--appColor);
}
/* kanban chip - musi vyplnit sirku stlpca */
.summary-group-kanban,
.summary-add-kanban {
    display: flex;
}
.summary-item-kanban {
    flex: 1;
    min-width: 0;
    padding: 1px 2px;
    border-radius: var(--borderRadius);
}
/* tlacitko "+" na pridanie noveho summary pola - diskretne, na hover/otvoreni */
.summary-add > .summary-add-btn {
    opacity: 0;
    transition: opacity .2s ease;
}
.view-footer:hover .summary-add > .summary-add-btn,
.related-view-footer:hover .summary-add > .summary-add-btn,
.related-footer-sum:hover .summary-add > .summary-add-btn,
.kanban-column:hover .summary-add > .summary-add-btn,
.summary-add.show > .summary-add-btn,
.summary-add > .summary-add-btn:focus {
    opacity: 1;
}
/* ak nemame ziadne summary pole, nechceme prazdny ramcek - len samotne "+" */
.view-footer-sum.summary-empty,
.related-footer-sum.summary-empty,
.related-view-footer-sum.summary-empty {
    background-color: transparent;
    padding: 0;
}
.summary-menu {
    min-width: 210px;
    max-height: 60vh;
    overflow-y: auto;
}
.table-info {
    text-align: center;
    background: none;
    font-size: 150%;
    font-weight: 400;
}
.view-header-left-top {
    display: flex;
    gap: 5px;
}
.header-main {
    flex: 1;
}
.header-search-box {
    position: relative;
    margin: auto;
    max-width: 600px;
}
.header-search-box .header-search {
    display: block;
    width: 100%;
    min-width: 200px;
    min-height: 29px;
    border-radius: var(--borderRadiusBig);
    padding-right: 30px;
    background-color: var(--templateInputBackground);
}
html[data-theme='dark'][data-device='desktop'] .header-search-box .header-search,
html[data-theme='dark'][data-device='browser'] .header-search-box .header-search {
    border: none;
}
.header-search-box .input-icon{
	right: 10px;
}
.header-search-box .input-icon .gbtn.gbtn-input {
    display: flex;
    align-items: center;
    border-radius: var(--borderRadiusBig);
    height: 27px;
    background-color: inherit;
}
.header-menu {
    text-align: right;
    flex: 0 0 auto;
}
.header-menu:after {
    content: "";
    margin-right: 2.5px;
    padding-right: 2.5px;
    border-right: 1px solid var(--borderColor);
}
.header-menu button .flat-btn-icon {
    font-size: calc(var(--textSize) + 4px) !important;
}
.side-section-container {
    display: flex;
    flex-direction: column;
    gap: 2px;   
}
.side-section-container.side-main {
	padding-right: 8px;
}
.side-section-container a:hover {
    text-decoration: none;
}
.side-section-title {
    display: inline-block;
    margin: 15px 0 0 8px;
    color: var(--appSideTextColor);
    opacity: 0.6;
    font-size: 11px;
}
.side-section-title-icon {
    border-radius: var(--borderRadius);
    padding: 5px;
    color: #fff;
    display: inline-block;
}
.side-item {
    display: flex;
    align-items: center;
    padding-left: 0;
    font-size: var(--appSideTextSize);    
    cursor: pointer;
    margin-left: 6px;
    margin-right: 5px;
    position: relative;
    color: var(--appSideTextColor);
}
.side-item div {
    padding-top: 0;
    padding-bottom: 0;
}
.side-item.selected, .side-item:hover {
    /*background-color: var(--hotBackground);*/
    background-color: var(--appSideHoverColor);
    border-radius: var(--borderRadiusMedium);
    color: var(--textColor);
}
.side-item:not(.selected):hover {
    background-color: var(--appSideHoverColor);
}
/*.side-item div.side-item-add {
    margin-left: auto;
    margin-right: 8px;
    font-size: calc(var(--textSize) / 2);
    width: calc(var(--textSize) + 2px);
    height: calc(var(--textSize) + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0 !important;
}
.side-item:hover .side-item-add {
    opacity: 1 !important;
    transition: opacity 0.1s ease-in-out !important;
}
.side-item div.side-item-add:hover {
    color: var(--eventColor);
}*/
.side-item button{
    opacity: 0 !important;
    transition: opacity 0.1s ease-in-out !important;
}
.side-item:hover button {
    opacity: 1 !important;
}
.side-item-icon {
    font-size: 14px;
    margin-right: 4px;
    width: 20px;
    text-align: center;
    line-height: 1;
}
.side-item-icon span {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.side-main .side-item-icon span {
    font-size: 13px !important;
}
.side-item-plus {
    margin-right: 20px;
}
.side-item-plus:hover {
    color: #fff;
}
.side-item-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 32px;
    font-weight: var(--textBoldLight);
}

.prev-label {
    font-weight: var(--textBold);
    color: #666;
    margin-right: 6px;
}
.prev-text {
    color: #666;
    margin-right: 6px;
}
.prev-lookup {
    display: inline-block;
    padding: 5px;
    padding-left: 0px;
    color: #0467bb;
    cursor: pointer;
}
.prev-lookup:hover {
    text-decoration: underline;
}
.prev-option {
    padding: 2px 4px 2px 4px;
    border-radius: var(--borderRadius);
    color: #fff;
    font-weight: var(--textBold);
}
.gbtn {
    cursor: pointer;
    padding: .21rem .5rem .19rem .5rem;
    border-radius: var(--borderRadius);
    color: var(--textColor);
    border: 1px solid transparent;
    background: transparent;
    font-weight: var(--textBoldLight);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    overflow: hidden;
}
.gbtn.focus,
.gbtn:focus {
    outline: 0;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.01);
}
.gbtn.gbtn-input {
    background: none;
    padding-bottom: 1px;
    border-radius: var(--borderRadiusBig);
    padding: 4px;
}
.gbtn.gbtn-input:hover {
    background-color: var(--eventHoverBackground);
    color: var(--textColor);
}
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-color: rgba(var(--blackOrWhiteColor), .2);
    animation: ripple .6s linear;
    z-index: 2;
}
.has-ripple {
    overflow: hidden;
    position: relative;
}
.gbtn.btn-tool .ripple {
    background: rgba(0, 0, 0, .5);
}
.gbtn.btn-tool.flat-btn.icon-only:not(.small) {
    font-size: 13px;
}
@keyframes ripple {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100% {
        width: var(--rippleWidth);
        height: var(--rippleWidth);
        opacity: 0;        
    }
}
.gbtn-primary {
    background: var(--gramColor) !important;
    border: 1px solid var(--gramColor) !important;
    border-radius: var(--borderRadiusBig);
    color: rgba(var(--whiteColor), 1) !important;
}
.gbtn-primary:not(:disabled):hover {
    background: #1581f0 !important;
}
.gbtn-secondary:hover {
    background: var(--hotBackground);
}
.gbtn-success {
    color: rgba(var(--whiteColor), 1);
    background-color: #007bff;
    border-color: #007bff;
}
.gbtn-success:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}
.gbtn-danger {
    color: rgba(var(--whiteColor), 1);
    background-color: var(--redColor) !important;
    border-color: #dc3545;
    margin-right: 5px;
    padding: 6px 12px;
    border-radius: var(--borderRadiusBig);
}
.gbtn-danger:not(:disabled):hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}
.gbtn-danger:not(:disabled):focus,
.gbtn-danger:not(:disabled):active{
    border-color: #dc3545 !important;
}
.gbtn-warning {
    color: rgba(var(--whiteColor), 1);
    background-color: #ffc107;
    border-color: #ffc107;
}
.gbtn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}
.gbtn-warning:not(:disabled):focus,
.gbtn-warning:not(:disabled):active {
    border-color: #ffc107;
}
.gbtn-info {
    color: rgba(var(--whiteColor), 1);
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.gbtn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}
.gbtn-dark {
    color: rgba(var(--whiteColor), 1);
    background-color: #343a40;
    border-color: #343a40;
}
.gbtn-dark:hover {
    background-color: #23272b;
    border-color: #1d2124;
}
.gbtn-link {
    text-align: center;
    background: none;
    padding: 0.1rem 0.5rem;
    box-shadow: none;
    border: none;
}
.gbtn-link:hover {
    text-decoration: underline;
}
.btn-success {
    padding: 8px 12px;
    border-radius: var(--borderRadius);
    color: var(--textColor);
    background-color: #28a745;
}
.btn-success:hover {
    background-color: #218838;
}
.rel-header-col:hover {
    color: red;
    background-color: var(--appWindowColor);
}
.btn-flat {
    padding: 5px;
    cursor: pointer;
}
.btn-flat:hover {
    background-color: #e6e6e6;
}
.btn-tool {
    min-height: var(--btnHeight);
    border: 1px solid var(--btnBorderColor);
    box-shadow: var(--btnShadow);
    background-color: var(--btnBackground);
    min-width: var(--btnWidth);
    border-radius: var(--radiusPill);
    display: flex;
    align-items: center;    
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-tool:not(.small){
    padding: 0 12px;
	font-size: var(--textSize);
}
.btn-tool:hover {
    background-color: var(--btnHoverBackground);
}
.field-button {
    border-radius: var(--borderRadius);
}
.icon-only {
    padding: 0;
    width: var(--btnWidth);
    height: var(--btnHeight);
    min-width: var(--btnWidth);
    min-height: var(--btnHeight);
    align-items: center;
}
.flat-btn.s-btn {
    min-height: 22px !important;
    min-width: 22px !important;
    height: 1rem;
    width: 1rem;
}
.icon-green {
    color: var(--gramColor);
}
.icon-red {
    color: var(--redColor);
}
.field-row .bootstrap-select .dropdown-toggle::after,
.input-container .bootstrap-select .dropdown-toggle::after,
.view-header-right .btn-group .dropdown-toggle.arrow::after {
    display: inline-block;
    vertical-align: baseline;
}
.dropdown-item span+span,
.dropdown-menu a span+span,
.chart-preview span+span,
.gbtn span+span,
.btn-tool span+span,
.gbtn-link span+span {
    margin: 0 0 0 5px;
    white-space: nowrap;
}
.flat-btn span.fa-fw+span {
    margin-left: 2px;
    white-space: nowrap;
}
.menu-item {
    padding: 8px;
    cursor: pointer;
    background-color: var(--appWindowColor);
}
.menu-item:hover {
    background-color: #deebff;
}
.rel-grid-row {
    background-color: var(--appWindowColor);
    border: 1px solid #f4f4f4;
    border-top: 0;
    padding: 2px 0 2px 0;
    color: #444;
}
.rel-grid-row:hover {
    background-color: #f2f2f2;
}
.rel-tile {
    color: #666;
    background-color: var(--appWindowColor);
    border: 1px solid #e1e1e1;
    overflow: hidden;
    padding: 0px 10px 10px 10px;
    border-radius: var(--borderRadius);
    flex-grow: 1;
    margin-top: 5px;
}
.rel-tile:hover {
    background-color: #fbfbfb;
}
.rel-title-head {
    display: inline-block;
    font-weight: var(--textBold);
    margin-top: 10px;
    padding-right: 10px;
    cursor: pointer;
}
.rel-title-head:hover {
    text-decoration: underline;
}
.rel-grid-tree {
    color: #666;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
    padding: 0px 10px 10px 10px;
    flex-grow: 1;
    margin-bottom: 3px;
}
.rel-grid-tree:hover {
    background-color: #fbfbfb;
}
.rel-text {
    margin-right: 5px;
}
.rel-lookup {
    color: #0467bb;
    cursor: pointer;
}
.rel-lookup:hover {
    text-decoration: underline;
}
.rel-row {
    display: flex;
    align-items: baseline;
    margin-top: 3px;
    margin-bottom: 3px;
}
.rel-lbl {
    color: #999999;
    margin-right: 4px;
}
.url {
    color: #0467bb;
    cursor: pointer;
}
.url:hover {
    text-decoration: underline;
}
.loader-container {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.loader-icon {
    width: 22px;
    height: 22px;
    border: 4px solid #47B97250;
    border-bottom-color: var(--gramColor);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
body.is-resizing-table {
    cursor: col-resize;
    user-select: none;
}
.tbl-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    touch-action: none;
}
.tbl-resizer:hover,
.tbl-resizer.is-resizing {
    background: rgba(74, 144, 226, .35);
}
.table-spinner {
    justify-content: center;
    align-items: center;
}
.progress-loader {
    position: relative;
    z-index: 1;
}
@keyframes preloader {
    0% {
        left: -100%;
    }
    49% {
        left: 0%;
    }
    50% {
        left: 1%;
    }
    100% {
        left: 100%;
    }
}
.loader {
    height: 10px;
    width: 33%;
    overflow: hidden;
    position: absolute;
    top: -3px;
}
.loader .bar {
    position: relative;
    height: 2px;
    background-color: var(--gramColor);
    border-radius: var(--borderRadius);
    animation-name: preloader;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.overlay {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
}
.ios-spinner {
    font-size: var(--spinner-size);
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
}
.ios-spinner.center {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.ios-spinner .ios-spinner-blade {
    position: absolute;
    left: 0.4629em;
    bottom: 0;
    width: 0.074em;
    height: 0.2777em;
    border-radius: 0.0555em;
    background-color: var(--spinner-color);
    transform-origin: center -0.2222em;
    animation: ios-spinner-fade 1.2s infinite linear;
}
.ios-spinner .ios-spinner-blade:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: 0s;
}
.ios-spinner .ios-spinner-blade:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1.0s;
}
.ios-spinner .ios-spinner-blade:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.ios-spinner .ios-spinner-blade:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.ios-spinner .ios-spinner-blade:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.ios-spinner .ios-spinner-blade:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.ios-spinner .ios-spinner-blade:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.ios-spinner .ios-spinner-blade:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.ios-spinner .ios-spinner-blade:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.ios-spinner .ios-spinner-blade:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.ios-spinner .ios-spinner-blade:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.ios-spinner .ios-spinner-blade:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes ios-spinner-fade {
    0%,
    20% {
        background-color: var(--spinner-color);
    }
    100% {
        background-color: transparent;
    }
}
.table {
    margin-bottom: 0;
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--textColor);
    table-layout: fixed;
}
.table td,
.table th {
    font-weight: 400;
    border-top-color:var(--borderDividerColor);
}
.table tr td {
    max-width: 400px;
    height: 2.07rem;
    padding: 0.3rem 0.75rem;
    vertical-align: middle;
    position: relative;
}
.table tr td .table-item-value {
    line-height: initial;
}
.table-item-value:has(span.chk-checked, span.chk-unchecked) {
    overflow: visible !important;
}
.table tr td .entity-icon {
    margin-right: 5px;
    display: inline-flex;
    vertical-align: baseline;
}
.table tr td br {
    display: contents;
}
.table tr td .table-item-value .field-option-stage-label,
.table tr td .grid-group-value .field-option-stage-label {
    font-weight: var(--textBold);
    font-size: var(--textSmallerSize);
    text-transform: uppercase;
}
.table tr td.button-td,
.table tr td.button-td div,
.table tr td.button-td div span {
    overflow: unset;
    white-space: unset;
}
.table tr td.button-td {
    text-align: center;
}
.table tr td.button-td .gbtn {
    justify-content: center;
}
.table tr td .field-option {
    display: flex;
    line-height: 1em;
}
.table tr td .table-item-value .field-lookup {
    display: inline;
}
.table tr td .table-item-value .field-lookup span+span {
    padding-left: 5px;
}
.table tr td .table-item-value .fld-basic a,
.table tr td .table-item-value .fld-related a,
.table tr td .table-item-value .fld-lookup a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table tr td:not(:first-child):not(.button-td) div,
.table tr td div span:not(.fa):not(.fal) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table tr td div span.fa,
.table tr td div span.fal {
    line-height: initial;
}
.table tbody td:first-child {
    padding-left: .75rem;
}
.table tr th {
    background: var(--appWindowColor);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    vertical-align: baseline;
    z-index: 0;
    padding: 0;
    border-top: none;
    border-bottom:none;
}
.table tr th .tbl-head .btn-group {
    height: 100%;
    width: 100%;
}
.table tr th .tbl-head .btn-group:last-child {
    justify-content: center;
    display: table-cell;
}
.table tr th .tbl-head .btn-group .header {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 6px;
    padding-bottom: 4px;
}
.table tr th .tbl-head-main {
    padding: 0;
    font-weight: var(--textBold);
    display: flex;
    flex-direction: column;
    line-height: var(--textSize);
}
.table tr th .tbl-head-main.wrap-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.table tr th .tbl-head-sub {
    font-weight: normal;
    color: darkgray;
    padding: 0;
    line-height: var(--textSize);
}
.table tr th:last-child {
    border-right: none;
}
.table tr th:last-child.ui-resizable-e {
    right: 5px;
}
.table tr th a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: var(--textColor);
}
.table tr th .tbl-head-main,
.table tr th .tbl-head-sub {
    white-space: nowrap;
    overflow: hidden;
}
.table tr:hover th:last-child {
    border-right: none;
}
.table tr:hover .column-title {
    border-right: 1px solid rgba(var(--blackOrWhiteColor), 0.1);
    transition: all 0.2s ease-in-out;
}
.table tbody tr:hover td:first-child .item-drag {
    visibility: visible;
}
.item-drag.fa-arrow-down-arrow-up:before,
.item-drag.fa-sort-alt:before {
    content: "\e0a3";
}
.table tbody tr.grid-item.selected td,
.table tbody tr:not(.grid-row-second):not(.grid-group):hover td {
    background-color: var(--hotBackgroundTable);
}
.table tbody tr.grid-group {
    position: relative;
}
.grid-group-title,
.grid-group-info {
    background: var(--groupBackground);
    border-radius: var(--borderRadiusMedium);
    padding: 0px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 29px;
}
.grid-group-title span.fa.fa-chevron-down:before {
    font-size: var(--textSmallerSize);
}
.grid-group-value {
    font-weight: bold;
    display: flex;
}
.grid-group-field {
    text-transform: uppercase;
    font-size: smaller;
}
.table tbody tr.grid-group .grid-group-buttons,
.table tbody tr.grid-group .grid-group-header,
.table tbody tr.grid-group .grid-group-info {
    display: flex;
}
.table tbody tr.grid-group .grid-group-header,
.table tbody tr.grid-group .grid-group-info {
    gap: 5px;
    align-items: baseline;
}
.table tbody tr.grid-group .grid-group-info {
    gap: 2px;
    justify-content: end;
}
.table tbody tr.grid-group .grid-group-info span.view-sum-value+span {
    margin-left: 10px;
}
/*.table tbody tr.grid-group .grid-group-count {
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    background-color: var(--appWindowColor);
    padding: 3px 6px;
}*/
.table tbody tr.grid-group .grid-group-buttons > * {
    visibility: hidden;
}
.table tbody tr.grid-group:hover .grid-group-buttons > *,
.table tbody tr.grid-group .grid-group-buttons .btn-group.position-static.show {
    visibility: visible;
}
.column-title {
    border-right: 1px solid rgba(var(--blackOrWhiteColor), 0.0);
    transition: all .2s ease-in-out;
}
.main-table tr th .tbl-head-main {
    overflow: hidden;
    line-height: var(--textSize);
    padding: 1px 0; 
}
.main-table .tbl-head {
    margin: 0 0.75rem;
    padding: 0;
    height: 100%;
    margin-left: 0;
    min-height: 35px;
}
.main-table th:first-child {
    text-align: center;
    left: 0;
    z-index: 1;
}
.main-table tr:not(.grid-group) td:first-child::before,
.main-table th:first-child::before {
    content: "";
    background-color: var(--appWindowColor);
    width: 100%;
    height: 100%;
    position: absolute;
    left: -8px;
    top: 0;
}
.main-table tr:not(.grid-group).grid-item.selected td:first-child::before,
.main-table tr:hover td:first-child::before{
    background-color: var(--hotBackgroundTable);
}
.main-table th:first-child div.tbl-head {
    margin: 0;
    min-height: unset;
}
.main-table th:first-child .tbl-head-main.chk-unchecked {
    margin-left: 0;
}
.main-table th:last-child div.tbl-head .btn-group {
    top: 3px;
}
.table th.action-cell,
.table td.action-cell {
    position: sticky;
    right: 0;
    padding: 0;
    text-align: center;
    overflow: visible;
    border-right: 0;
    box-shadow: -5px 0 9px rgba(0, 0, 0, 0.02);
    background-color: var(--appWindowColor);
}
.main-table tr.grid-group td {
    border-top-color: var(--borderDividerColor);
    padding-left: 5px;
}
.main-table tr td.button-td .btn-group .dropdown-toggle:after {
    border: none;
    display: none;
}
.main-table tr td.button-td .btn-group .icon-only {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    padding: 0;
    margin: 0;
    align-items: center;
    box-shadow: none;
}
.table.main-table tr th .tbl-head .btn-group,
.table.main-table tr th .tbl-head .btn-group .header {
    position: absolute !important;
    height: 100%;
}
.table.main-table tr th:last-child .tbl-head .btn-group .header {
    position: relative !important;
}
.table.main-table tr th:last-child .icon-only {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    padding: 0;
    margin: 0;
    align-items: center;
    box-shadow: none;
}
.related-table tr:not(.grid-group) td:first-child,
.main-table tr:not(.grid-group) td:first-child,
.settings-table-list tr:not(.grid-group) td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--appWindowColor);
    z-index: 1;
}
html[data-theme='dark'] .main-table tr:not(.grid-group) td:last-child,
html[data-theme='dark'] .main-table th:last-child {
    box-shadow: 0 0 5px #ffffff1a;
}
.related-view-calendar .view-calendar-body {
    box-shadow: none;
}
.layout-content .related-view-calendar .view-body {
    height: 100ch;
}
.layout-content .related-view-calendar .view-header-main {
    padding: 0;
    padding-bottom: 4px;
}
.view-container .related-view-calendar .view-calendar-side{
    margin-left: 16px;
}
.related-view-calendar .view-calendar-body,
.related-view-calendar .view-header.calendar,
.related-view-calendar .view-header-main{
    background-color: transparent;
}
.related-view-calendar .table-bordered table.fc-col-header th{
    border-color: transparent !important;
}
.related-table .tbl-head {
    padding: 0;
    height: 100%;
    min-height: 31px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.related-table .tbl-head div {
    height: 100%;
    min-height: max-content;
}
.related-table .tbl-head .header {
    padding-top: 0;
    padding-bottom: 4px;
}
.related-table tr th {
    position: relative;
    vertical-align: inherit;
}
.related-table th:first-child {
    left: 0;
    z-index: 1;
    padding-left: 23px;
    width: 43px;
    vertical-align: middle;
    position: sticky;
}
.related-table th:first-child::after {
    left:5px;
}
.related-table th:first-child div {
    margin-left: 0;
    margin-right: 0;
}
.related-table th:first-child .btn-group {
    position: absolute !important;
    left: -7px;
}
.related-table th:last-child .btn-group {
    display: flex;
    justify-content: center;
}
.related-table th:last-child .btn-group .icon-only {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    padding: 0;
    margin: 0;
    align-items: center;
    box-shadow: none;
}
.related-table th:first-child .tbl-head {
    display: flex;
    align-items: center;
}
.related-table th:first-child .tbl-head .head-check {
    vertical-align: middle;
}
.related-table tr td {
    font-size: var(--textSize);
    background: var(--appWindowColor);
}
.related-table tr td.button-td .btn-group .dropdown-toggle:after {
    border: none;
    display: none;
}
.related-table tr td.button-td .icon-only {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    padding: 0;
    margin: 0;
    align-items: center;
    box-shadow: none;
}
.related-table tr td:first-child {
    padding-left: 23px;
    width: 43px;
    vertical-align: middle;
    margin: 0;
    overflow: visible;
    position: relative;
}
.related-table tr td:first-child .item-drag {
    margin-right: 5px;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.related-table tr td:last-child .btn-group {
    display: flex;
    justify-content: center;
}
.related-table tr.grid-group td {
    padding-left: 13px;
}
.wf-plane {
    position: relative !important;
}
.fixed .wf-layer {
    border-top: var(--frameBorder);    
}    
.wf-layer {    
    overflow: hidden;    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-image: radial-gradient(var(--borderLightColor) 1px, transparent 1px);
    background-size: 20px 20px;    
    cursor: grab;
    position: relative;
    touch-action: none;    
}
.wf-canvas  {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;    
}
.wf-side-layer {
    position: absolute;
    background-color: var(--appWindowColor);
    display: flex;
    flex-direction: column;
    border-top: var(--frameBorder);
    border-left: var(--frameBorder);
    /*width: 450px;*/
    width: 470px;
    min-width: 350px;
    top: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    transform: translateX(calc(100% + 15px));
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 140ms ease-out, opacity 100ms ease-out;    
}
.wf-side-layer.is-open{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    flex: 1 1 auto;
    overflow: hidden;
    overflow-y: auto;
    min-height: 0;
}
.wf-side-layer .body {
    border-top: var(--frameBorder);
    overflow-y: auto;
}
.wf-step-container {
    --wf-outline-duration: 1000ms;
    --wf-connector-delay: 320ms;
    --wf-connector-duration: 400ms;
    --wf-arrow-delay: calc(var(--wf-connector-delay) + var(--wf-connector-duration));
    --wf-arrow-duration: 160ms;
    --wf-badge-delay: 350ms;

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.wf-plus {
    position: relative;
    width: 100%;
    min-height: 55px;
}
.wf-plus button {
    opacity: 0;
    display: flex;
    justify-self: center;
    transition: opacity .1s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.wf-plus:hover button{
    opacity: 1;
}
.wf-plus button:disabled::before,
.wf-plus button.disabled::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: var(--appColor) !important;
}
.wf-plus button:disabled,
.wf-plus button.disabled{
    opacity: 1 !important;
}
.wf-plus button.disabled:hover .fa-plus{
    transform: none;
}
/*.wf-plus::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    border-left: 1px solid var(--borderColor);
    z-index: 0;
    transform: translateY(0) translateX(-50%);
}*/
.wf-plus::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    z-index: 0;
    transform: translateX(-50%);
    border-left: none !important;
    background-image:
        linear-gradient(var(--wf-line-color, transparent), var(--wf-line-color, transparent)),
        linear-gradient(var(--borderColor), var(--borderColor));
    background-repeat: no-repeat;
    background-position: top center, top center;
    background-size: 100% 0%, 1px 100%;
}
.wf-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--borderColor);
    width: 0;
    height: 0;
    pointer-events: none;
    transition:
        border-top-color 80ms ease 0ms;
}
.wf-plus.loop::before {
    width: 1px;
    border-left: 1px dashed var(--borderColor) !important;
    background: none !important;
    animation: none !important;
}
.wf-plus.loop::after {
    display: none;
}
.wf-step-container:has(.wf-switch) > .wf-plus::after {
    border: none;
}
.wf-dot {
    height: 12px;
    background-color: var(--appWindowColor);
    border: var(--frameBorder);
    width: 12px;
    border-radius: 50%;
    z-index: 9;
    margin: 0 auto;
    transform: translateY(-6px);
    position: relative;
    transition: none;
}
.loop .wf-dot  {
    transform: translateY(-6px);
}
.wf-step {
    background-color: var(--appWindowColor);
    padding: 12px 24px 12px 12px;    
    border: var(--frameBorder); 
    width: 300px;
    border-radius: var(--borderRadiusMedium);
    z-index: 2;
    cursor: pointer;
    position: relative;
    box-shadow: var(--frameShadow);
    overflow: visible;
    isolation: isolate;
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 180ms ease,
        background-color 220ms ease;
}
.wf-step.arrow {
    box-shadow: initial;    
    width: initial;
    flex: 1;
    border-radius: var(--borderRadius);
    width: 100%;
}
.wf-step.arrow::after {
    content: "\f054";
    font: normal normal normal var(--textSize) / 1 'Font Awesome 7 Pro';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: rgba(var(--textLightColor), .45);
}
.wf-step.selected::after {
    content: '';
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1px;
    left: -1px;    
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--borderRadiusBig);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}
.wf-step.selected,
.wf-step:hover {
    border: 1px solid var(--focusBorderColor);
}
.wf-step:hover .wf-step-toolbar {
    opacity: 1;
}
.dummy .wf-step {
    height: 75px;
    background-color: var(--eventHoverBackground);
    border: 1px dashed var(--focusBorderColor);
}
.wf-step-finish {
    background-color: var(--appColorAlt);
    border-radius: 50%;
    z-index: 2;
    position: relative;
    border: var(--frameBorder);
    margin-top: 15px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.wf-plus:has(.wf-step-finish)::before {
    height: 50%;
}
.wf-header-icon {
    padding: 3px 6px;
    background-color: var(--appColor);
    border-radius: 6px;
}
.wf-header-text {
    text-align: left;
    font-weight: var(--textBold);
}
.wf-header-base {
    border-radius: var(--borderRadius);
    padding: 3px 12px;
    background-color: var(--appColor);
    font-size: var(--textSmallerSize);
}
.wf-step-toolbar {
    position: absolute;
    right: -18px;
    gap: 2px !important;
    opacity: 0;
    z-index: 2;
}
.wf-description {
    border-top: 1px dotted var(--borderColor);
    flex: 1;
    margin-top: 7px;
    padding-top: 3px;
    text-align: left;
}
.wf-body,
.wf-description {
    display: -webkit-box; 
    line-clamp: 3;   
    -webkit-line-clamp: 3;    
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wf-loop {
    border: 1px dashed var(--borderColor);
    border-radius: var(--borderRadiusBig);
    padding: 30px 30px 0 30px;
    margin-top: -32px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--appColor);    
}
.wf-loop>.wf-step-container:last-child>.wf-plus::before {
    height: calc(100% - 5px);
}
.wf-loop>.wf-step-container:last-child>.wf-plus button {
    opacity: 1;
}
.wf-loop>.wf-step-container:last-child>.wf-plus::after {
    display: none;
}
.wf-switch {
    --wf-switch-accent: #94a3b8;
    --wf-switch-line-color:
        color-mix(in srgb, var(--wf-switch-accent) 88%, #111827 12%);
    --wf-branch-delay: 0ms;
    --wf-branch-duration: 420ms;

    display: grid;
    grid-template-columns: repeat(var(--switchColumns, 2), max-content);
    gap: 20px;
    row-gap: 0;
    width: max-content;
    padding: 40px 16px 0 16px;
    position: relative;
    justify-content: center;
}
.wf-switch .wf-switch-item {
    text-align: center;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    min-width: 125px;
    width: auto;
}
.wf-switch-item:has(> .wf-step-container.dummy) > .wf-switch-item-steps {
    display: none;
}
.wf-switch:has(.wf-step-container) > .wf-switch-item{
    min-width: 310px;
}
.wf-switch:has(.wf-step-container.dummy) > .wf-switch-item {
    min-width: 305px;
}
.wf-switch .wf-switch-item-footer {
    height: calc(100% - 20px);
    border-left: var(--frameBorder);
    position: relative;
}
.wf-switch > .wf-switch-bottom {
    height: 16px;
    bottom: 0;
    display: flex;
    padding: 0 6.55px;
    padding: 0 5px 0 6px;
    padding: 0;
    justify-content: center;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0;
}
.wf-switch .wf-switch-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}
.wf-switch .wf-switch-bottom-item::before,
.wf-switch .wf-switch-bottom-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(50% - 5px);
    border-bottom: var(--frameBorder);
    width: calc(50% + 5px);
    height: 16px;
}
.wf-switch .wf-switch-bottom-item::after {
    right: auto;
    left: 50%;
    border-left: var(--frameBorder)
}
.wf-switch .wf-switch-bottom-item:first-of-type::before,
.wf-switch .wf-switch-bottom-item:nth-last-child(1 of .wf-switch-bottom-item)::after {
    border: 0 none;
    left: calc(50% - 5px);
}
.wf-switch .wf-switch-bottom-item:first-of-type::after {
    border-radius: 0 0 0 var(--borderRadiusBig);
    -webkit-border-radius: 0 0 0 var(--borderRadiusBig);
    -moz-border-radius: 0 0 0 var(--borderRadiusBig);
    left: calc(50% - 5px);
}
.wf-switch .wf-switch-bottom-item:nth-last-child(1 of .wf-switch-bottom-item)::before {
    border-right: var(--frameBorder);
    border-radius: 0 0 var(--borderRadiusBig) 0;
    -webkit-border-radius: 0 0 var(--borderRadiusBig) 0;
    -moz-border-radius: 0 0 var(--borderRadiusBig) 0;
}
.wf-switch .wf-switch-item::before,
.wf-switch .wf-switch-item::after {
    content: '';
    position: absolute;
    top: -40px;
    right: 50%;
    border-top: var(--frameBorder);
    width: calc(50% + 10px);
    height: 60px;
    z-index: 0;
    pointer-events: none;
}
.wf-switch .wf-switch-item::after {
    right: auto;
    left: 50%;
    border-left: var(--frameBorder)
}
.wf-switch .wf-switch-item:only-child {
    padding-top: 0;
}
.wf-switch .wf-switch-item:first-of-type::before,
.wf-switch .wf-switch-item:nth-last-child(1 of .wf-switch-item)::after {
    border: 0 none;
}
.wf-switch .wf-switch-item:first-of-type::after {
    border-radius: var(--borderRadiusBig) 0 0 0;
    -webkit-border-radius: var(--borderRadiusBig) 0 0 0;
    -moz-border-radius: var(--borderRadiusBig) 0 0 0;
}
.wf-switch .wf-switch-item:nth-last-child(1 of .wf-switch-item)::before {
    border-right: var(--frameBorder);
    border-radius: 0 var(--borderRadiusBig) 0 0;
    -webkit-border-radius: 0 var(--borderRadiusBig) 0 0;
    -moz-border-radius: 0 var(--borderRadiusBig) 0 0;
}
.wf-switch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}
.wf-switch-item-label {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);    
    z-index: 3;
    display: flex;
    white-space: nowrap;
}
.wf-switch-item-label > span {
    border: var(--frameBorder);
    padding: 3px 6px;
    border-radius: 6px;
    background-color: var(--appWindowColor);
    position: relative;
    z-index: 4;
}
.wf-switch-item-steps .wf-step-container:last-child .wf-plus::after {
    border: none;
}

html[data-theme='dark'] .wf-switch {
    --wf-switch-line-color:
        color-mix(in srgb, var(--wf-switch-accent) 58%, var(--appWindowColor) 42%);
}
.wf-switch-item,
.wf-switch-bottom-item {
    --wf-branch-accent: #94a3b8;
    --wf-branch-line-color:
        color-mix(in srgb, var(--wf-branch-accent) 88%, #111827 12%);
    --wf-branch-label-text:
        color-mix(in srgb, var(--wf-branch-accent) 72%, #111827 28%);
    --wf-branch-label-bg:
        color-mix(in srgb, var(--wf-branch-accent) 10%, var(--appWindowColor) 90%);
    --wf-branch-label-border:
        color-mix(in srgb, var(--wf-branch-accent) 55%, var(--appWindowColor) 45%);
}
html[data-theme='dark'] .wf-switch-item,
html[data-theme='dark'] .wf-switch-bottom-item {
    --wf-branch-line-color:
        color-mix(in srgb, var(--wf-branch-accent) 58%, var(--appWindowColor) 42%);
    --wf-branch-label-text:
        color-mix(in srgb, var(--wf-branch-accent) 58%, var(--textColor) 42%);
    --wf-branch-label-bg:
        color-mix(in srgb, var(--wf-branch-accent) 14%, var(--appWindowColor) 86%);
    --wf-branch-label-border:
        color-mix(in srgb, var(--wf-branch-accent) 38%, var(--appWindowColor) 62%);
}
.wf-switch.wf-color-green {
    --wf-switch-accent: #22c55e;
}
.wf-switch.wf-color-red {
    --wf-switch-accent: #ef4444;
}
.wf-switch.wf-color-blue {
    --wf-switch-accent: #3b82f6;
}
.wf-switch.wf-color-purple {
    --wf-switch-accent: #8b5cf6;
}
.wf-switch.wf-color-orange {
    --wf-switch-accent: #f59e0b;
}
.wf-switch.wf-color-gray {
    --wf-switch-accent: #94a3b8;
}
.wf-switch.wf-color-muted {
    --wf-switch-accent: #cbd5e1;
}
html[data-theme='dark'] .wf-switch.wf-color-muted {
    --wf-switch-accent: #64748b;
}
.wf-switch.wf-status-completed:not([class*="wf-color-"]) {
    --wf-switch-accent: #22c55e;
}
.wf-switch.wf-status-stopped:not([class*="wf-color-"]) {
    --wf-switch-accent: #94a3b8;
}
.wf-switch-item.wf-color-green,
.wf-switch-bottom-item.wf-color-green {
    --wf-branch-accent: #22c55e;
}
.wf-switch-item.wf-color-red,
.wf-switch-bottom-item.wf-color-red {
    --wf-branch-accent: #ef4444;
}
.wf-switch-item.wf-color-blue,
.wf-switch-bottom-item.wf-color-blue {
    --wf-branch-accent: #3b82f6;
}
.wf-switch-item.wf-color-purple,
.wf-switch-bottom-item.wf-color-purple {
    --wf-branch-accent: #8b5cf6;
}
.wf-switch-item.wf-color-orange,
.wf-switch-bottom-item.wf-color-orange {
    --wf-branch-accent: #f59e0b;
}
.wf-switch-item.wf-color-gray,
.wf-switch-bottom-item.wf-color-gray {
    --wf-branch-accent: #94a3b8;
}
.wf-switch-item.wf-color-muted,
.wf-switch-bottom-item.wf-color-muted {
    --wf-branch-accent: #cbd5e1;
}
html[data-theme='dark'] .wf-switch-item.wf-color-muted,
html[data-theme='dark'] .wf-switch-bottom-item.wf-color-muted {
    --wf-branch-accent: #64748b;
}
.wf-switch-item.wf-status-completed:not([class*="wf-color-"]),
.wf-switch-bottom-item.wf-status-completed:not([class*="wf-color-"]) {
    --wf-branch-accent: #22c55e;
}
.wf-switch-item.wf-status-stopped:not([class*="wf-color-"]),
.wf-switch-bottom-item.wf-status-stopped:not([class*="wf-color-"]) {
    --wf-branch-accent: #94a3b8;
}
.wf-switch-item:is(
    .wf-status-completed,
    .wf-status-stopped
) > .wf-switch-item-label > span {
    background-color: var(--wf-branch-label-bg);
    color: var(--wf-branch-label-text);
    border-color: var(--wf-branch-label-border);
    box-shadow: none;
    transform: none;
    transition:
        background-color 220ms ease var(--wf-branch-delay),
        color 220ms ease var(--wf-branch-delay),
        border-color 220ms ease var(--wf-branch-delay);
}
.wf-switch.wf-status-completed > .wf-switch-item::before,
.wf-switch.wf-status-completed > .wf-switch-item::after {
    transition:
        border-color var(--wf-branch-duration) ease var(--wf-branch-delay);
    border-top-color: var(--wf-switch-line-color);
    border-left-color: var(--wf-switch-line-color);
    border-right-color: var(--wf-switch-line-color);
}
.wf-switch-item.wf-status-completed > .wf-switch-item-footer {
    transition:
        border-left-color var(--wf-branch-duration) ease var(--wf-branch-delay);
    border-left-color: var(--wf-branch-line-color);
}
.wf-switch-bottom-item.wf-status-completed::before,
.wf-switch-bottom-item.wf-status-completed::after {
    transition:
        border-color var(--wf-branch-duration) ease var(--wf-branch-delay);
    border-bottom-color: var(--wf-branch-line-color);
    border-left-color: var(--wf-branch-line-color);
    border-right-color: var(--wf-branch-line-color);
}

html[data-theme='dark'] .wf-layer {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
}
.wf-step,
.wf-step + .wf-plus {
    --wf-accent: #94a3b8;
    --wf-status-color:
        color-mix(in srgb, var(--wf-accent) 88%, #111827 12%);
    --wf-status-shadow:
        color-mix(in srgb, var(--wf-accent) 18%, transparent);
    --wf-badge-color:
        color-mix(in srgb, var(--wf-accent) 72%, #111827 28%);
    --wf-badge-bg:
        color-mix(in srgb, var(--wf-accent) 13%, transparent);
    --wf-badge-border:
        color-mix(in srgb, var(--wf-accent) 58%, transparent);
}
html[data-theme='dark'] .wf-step,
html[data-theme='dark'] .wf-step + .wf-plus {
    --wf-status-color:
        color-mix(in srgb, var(--wf-accent) 58%, var(--appWindowColor) 42%);
    --wf-status-shadow:
        color-mix(in srgb, var(--wf-accent) 13%, transparent);
    --wf-badge-color:
        color-mix(in srgb, var(--wf-accent) 58%, var(--textColor) 42%);
    --wf-badge-bg:
        color-mix(in srgb, var(--wf-accent) 13%, transparent);
    --wf-badge-border:
        color-mix(in srgb, var(--wf-accent) 34%, transparent);
}
.wf-step.wf-color-green,
.wf-step.wf-color-green + .wf-plus {
    --wf-accent: #22c55e;
}
.wf-step.wf-color-red,
.wf-step.wf-color-red + .wf-plus {
    --wf-accent: #ef4444;
}
.wf-step.wf-color-blue,
.wf-step.wf-color-blue + .wf-plus {
    --wf-accent: #3b82f6;
}
.wf-step.wf-color-purple,
.wf-step.wf-color-purple + .wf-plus {
    --wf-accent: #8b5cf6;
}
.wf-step.wf-color-orange,
.wf-step.wf-color-orange + .wf-plus {
    --wf-accent: #f59e0b;
}
.wf-step.wf-color-gray,
.wf-step.wf-color-gray + .wf-plus {
    --wf-accent: #94a3b8;
}
.wf-step.wf-color-muted,
.wf-step.wf-color-muted + .wf-plus {
    --wf-accent: #cbd5e1;
}
html[data-theme='dark'] .wf-step.wf-color-muted,
html[data-theme='dark'] .wf-step.wf-color-muted + .wf-plus {
    --wf-accent: #64748b;
}
.wf-step.wf-status-completed:not([class*="wf-color-"]),
.wf-step.wf-status-completed:not([class*="wf-color-"]) + .wf-plus {
    --wf-accent: #22c55e;
}
.wf-step.wf-status-stopped:not([class*="wf-color-"]),
.wf-step.wf-status-stopped:not([class*="wf-color-"]) + .wf-plus {
    --wf-accent: #94a3b8;
}

.wf-step::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: var(--appWindowColor);
    pointer-events: none;
}
.wf-step > .wf-header,
.wf-step > .wf-body {
    position: relative;
    z-index: 3;
}
.wf-step > .wf-step-toolbar {
    position: absolute;
    top: 14px;
    right: -14px;   
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: auto;
    pointer-events: auto;
}
.wf-step > .wf-run-badge {
    position: absolute;
    top: -31px;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--borderRadiusBig);
    line-height: 1;
    pointer-events: none;
    color: var(--wf-badge-color);
    background: var(--wf-badge-bg);
    border: 1px solid var(--wf-badge-border);
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        visibility 0ms linear 0ms,
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease;
}
.wf-step > .wf-run-badge.d-none {
    display: inline-flex !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.94);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0ms linear 180ms;
}
.wf-step > .wf-run-badge:not(.d-none) {
    animation:
        wf-badge-rollout 760ms cubic-bezier(.22, 1, .36, 1) var(--wf-badge-delay) both;
}
@keyframes wf-badge-rollout {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.wf-step::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--borderRadiusMedium);
    padding: 1px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    background:
        conic-gradient(
            from 0deg,
            var(--wf-status-color) 0deg,
            var(--wf-status-color) var(--wf-outline-angle),
            transparent var(--wf-outline-angle),
            transparent 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
.wf-step:is(
    .wf-status-completed,
    .wf-status-stopped
)::after {
    opacity: 1;
    animation:
        wf-outline-draw var(--wf-outline-duration) ease-out forwards;
}
@keyframes wf-outline-draw {
    from {
        --wf-outline-angle: 0deg;
    }
    to {
        --wf-outline-angle: 360deg;
    }
}
@property --wf-outline-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.wf-step.wf-status-completed + .wf-plus {
    --wf-line-color: var(--wf-status-color);
}
.wf-step.wf-status-completed + .wf-plus::before {
    animation:
        wf-line-grow var(--wf-connector-duration) ease-out var(--wf-connector-delay) forwards;
}
.wf-step.wf-status-completed + .wf-plus::after {
    border-top-color: var(--wf-status-color);
    transition:
        border-top-color var(--wf-arrow-duration) ease var(--wf-arrow-delay);
}
.wf-step.wf-status-completed + .wf-plus > .wf-dot {
    animation:
        wf-dot-status 240ms ease-out var(--wf-connector-delay) forwards;
}
@keyframes wf-line-grow {
    from {
        background-size: 100% 0%, 1px 100%;
    }
    to {
        background-size: 100% 100%, 1px 100%;
    }
}
@keyframes wf-dot-status {
    from {
        border-color: var(--borderColor);
        background-color: var(--appWindowColor);
        box-shadow: none;
    }
    to {
        border-color: var(--wf-status-color);
        background-color: var(--appWindowColor);
        box-shadow: 0 0 0 4px var(--wf-status-shadow);
    }
}

.wf-step-container:has(> .wf-switch) > .wf-plus::after,
.wf-step-container:has(.wf-switch) > .wf-plus::after {
    border: none;
}
.wf-switch-item-steps .wf-step-container:last-child > .wf-plus::after {
    border: none;
}
.settings-table {
    background: var(--appWindowColor);
}
.settings-table tr td:first-child {
    margin: 0;
    overflow: visible;
    position: relative;
    padding-left: 17px;
}
.settings-table tr td:first-child .item-drag {
    margin-right: 5px;
    visibility: hidden;
    position: absolute;
    left: 3px;
    top: 0;
    height: 100%;
    padding: 0 3px 0 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.settings-table tr td:first-child span.fal {
    width: 15px;
}
.settings-table tr td:first-child div+div {
    margin-left: 10px;
}
.settings-table tr td:first-child span+span {
    padding-left: 3px;
}
.settings-table tr.disabled td {
    background: var(--appColor);
    color: var(--disabledTextColor);
}
.settings-table tr.disabled td:first-child {
    border-left-color: var(--appColor);
}
.settings-table tr.disabled td .gbtn {
    color: var(--disabledTextColor);
}
.settings-table tr.disabled td span.field-option>span {
    background: var(--appColor) !important;
}
.settings-table tr.disabled td span.field-option>span span {
    color: var(--disabledTextColor) !important;
}
.settings-table tr th {
    height: 35px;
    line-height: 35px;
    padding: 0 0.75rem;
    position: sticky;
    position: -webkit-sticky;
    background: var(--appWindowColor);
    z-index: 2;
}
.settings-table tr th:first-child {
    padding-left: 27px;
}
.settings-table td:last-child div {
    display: inline;
    word-break: break-word;
    white-space: break-spaces;
    margin-right: 10px;
}
.settings-table td:last-child div:last-child {
    margin-right: 0;
}
.settings-table td:last-child div a {
    display: inline-block;
}
.settings-content-table {
    border-radius: var(--borderRadius);
    width: 100%;
    display: flex;
    flex-direction: column;
}
.option-table {
    max-height: 400px;
    overflow: auto;
    border: var(--frameBorder);
    border-radius: 0.2rem;
}
.option-table .ui-sortable-helper td:last-child {
    text-align: right;
}
.selectpicker {
    z-index: 1100 !important;
    position: relative;
}
.field-option {
    align-items: center;
    min-width: 30px;
    border-radius: var(--borderRadiusBig);
    font-weight: var(--textBold);
    font-size: var(--textSmallerSize);
}
.field-option>span {
    /*color: #fff;*/
    color: color-mix(in srgb, var(--color) 72%, var(--textColor));
    border-radius: var(--borderRadiusBig);
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field-option>span span+span {
    padding-left: 3px;
    margin-left: 0;
}
.field-option span {
    display: inline;
}
.lookup-dropdown .field-option,
.dropdown .field-option {
    display: flex;
}
.item-left .field-option>span,
.item-right .field-option>span {
    padding: 0 0.5rem;
}
.item-left .field-activity-value,
.item-right .field-activity-value {
    padding: 0 0.5rem;
}
.item-left .field-option-stage,
.item-right .field-option-stage {
    justify-content: flex-end;
}
.field-option-stage {
    height: 4px;
    display: flex;
}
.field-option-stage div+div {
    border-left: 1px solid rgba(var(--lightOrDarkColor));
}
.field-option-stage div.stage-box {
    flex-basis: 100%;
    background: var(--appDropdownMenuActiveColor); 
    width: 100%;
    max-width: 20px;
}
.field-option-stage-label span + span {
    padding-left: 5px;
}
.field-option-stage-label > span {
    display: inline-flex;
}
.field-option-stage-label span:not(.fa):not(.fal) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field-option-stage-label span.fa {
    vertical-align: middle;
}
.align-right {
    text-align: right !important;
}
.align-right .table-item-value,
.align-right .fld-basic {
    justify-content: right;
}
.align-center {
    text-align: center !important;
    position: relative;
}
.align-center .table-item-value,
.align-center .fld-basic {
    justify-content: center;
}
.align-center.fa {
    display: block;
}
.table>thead>tr>th.sorting>.tbl-head {
    cursor: pointer;
}
.table>thead>tr>th.sorting:after {
    content: '\f175';
    font: normal normal normal 12px/1 'Font Awesome 7 Pro';
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 0;
    width: 0;
    right: 0.75rem;
    top: 6px;
    font-size: inherit;
    z-index: 3;
    color: var(--appWindowColor);
}
.table>thead>tr>th.sorting.sort-asc:after {
    content: '\f175';
    color: var(--textColor);
}
.table>thead>tr>th.sorting.sort-desc:after {
    content: '\f176';
    color: var(--textColor);
}
.detail-section.ui-sortable-helper {
    background-color: var(--hotBackground);
    border-radius: var(--borderRadius);
    border: 1px solid var(--eventColor);
}
.modal-dialog:not(.modal-customize) .detail-view:not(:has(.form-page + .detail-section)) .detail-section {
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.section-title {
    font-weight: var(--textBold);
    color: var(--textColor);
    text-transform: uppercase;
    margin-bottom: 4px;
    margin-top: 20px;
    position: relative;
}
.ui-sortable-helper .section-title,
.form-page .detail-section:first-child .section-title{
    margin-top: 0;
}
.section-title .section-title-span {
    display: inline-block;
    cursor: pointer;
    color: var(--textColor);
}
.section-title .section-title-span:hover {
    background: var(--focusColor);
    box-shadow: 0 0 0 5px var(--focusColor);
    border-radius: var(--borderRadiusSmall);
}
.section-title .section-title-span::before {
    content: "\f106";
    color: var(--textColor);
    font: normal normal normal 15px/1 'Font Awesome 7 Pro';
    margin-right: 5px;
    font-size: var(--textSmallerSize);
}
.section-title .section-title-span.collapsed::before {
    content: "\f107";
}
.section-content {
    /*display: flex;
    flex-direction: row;*/
    display: grid;
    gap: 1.5rem;
}
.form-page .detail-section:not(:first-child) .section-content {
    padding-top: 10px !important;
}
.section-content .section {
    flex: 1;
    margin-top: 8px;
}
.section-content .list-items {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    width: 100%;
}
.section-content .list-items .list-item {
    padding: 0;
    margin: 0;
    align-items: center;
    display: flex;
}
.section-content .list-items .list-item div {
    padding: 0;
}
.section-content .list-items .list-item .field-row {
    flex-direction: row;
    margin-bottom: 0;
    align-items: center;
    flex: 1;
    gap: 5px;
}
.section-content .list-items .list-item .field-row .field-input {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.section-content .list-items .list-item .field-row>div:nth-child(2),
.section-content .list-items .list-item .field-row>div:nth-child(3) {
    min-width: 65px;
    max-width: 65px;
}
.section-content .list-items .list-item .field-row>div:first-child {
    flex-grow: 1;
    min-width: 180px;
}
.section-content .list-items .list-item .field-buttons {
    display: flex;
}
.section-content .list-items .list-item .field-buttons button {
    visibility: hidden;
}
.section-content .list-items .list-item:hover .field-buttons button {
    visibility: visible;
}
.section-content.multi-column.four {
    grid-template-columns: repeat(4, 1fr);
}
.section-content.multi-column .field-row {
    width: 100%;
}
.section-left {
    flex: 50%;
}
.section-divider {
    width: 2rem;
}
.section-right {
    flex: 50%;
}
.section-right .field-drop-area {
    margin-left: 1rem;
}
.section-one {
    flex: 100%;
}
.section-one .fld-image-preview {
    display: none;
}
a.ui-sortable-placeholder,
div.ui-sortable-placeholder, 
.ui-sortable-placeholder td {
    background-color: rgba(var(--eventColorRgba), 0.1) !important;
    border: 1px dashed rgba(var(--eventColorRgba), 0.5) !important;
    border-radius: var(--borderRadius);
    padding: 0 !important;
    visibility: visible !important;
}
.ui-placeholder,
.ui-sortable-placeholder,
.ui-sortable-placeholder td {
    min-height: 28px;
}
.detail-view .ui-sortable-placeholder.list-item,
.detail-view .field-row-customize.ui-sortable-placeholder,
.detail-view .field-row-customize.ui-sortable-handle.ui-sortable-placeholder {
    min-height: 45px;
}
.detail-view .field-drop-area {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 1, 0, );
    padding: 0 !important;
    border-radius: var(--borderRadius);
    visibility: visible !important;
    background-color: rgba(var(--blackOrWhiteColor), 0.025);
    margin-left: 1rem;
    max-height: 45px;
    height: 45px;
}
.detail-view .section-left .ui-sortable-handle.ui-sortable-placeholder,
.detail-view .section-one .ui-sortable-handle.ui-sortable-placeholder,
.detail-view .section-left .field-drop-area,
.detail-view .section-one .field-drop-area {
    margin-left: 1rem;
}
.detail-view .section-left .fake-label,
.detail-view .section-one .fake-label {
    max-width: 100%;
}
.detail-view .section-left .fake-label {
    max-width: 110px;
}
.detail-view .field-row-customize {
    padding-left: 1.8125rem;
    padding-right: 1rem;
}
.detail-view .field-row-customize .field-row {
    margin-bottom: 0;
    flex-grow: 1;
}
.detail-view .field-row-buttons {
    margin-left: auto;
}
.detail-view .field-row-drag {
    padding: 0 5px;
}
.detail-view-buttons,
.detail-view-buttons>div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.detail-view-buttons {
    gap: 5px;
}
.detail-view-buttons:empty {
    display: none !important;
}
.cardlist-item-edit .detail-view-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--borderDividerColor);
    gap: 5px; 
}
.fixed-footer .detail-view-buttons {
    margin-top: 0;
    padding-top: 0;
    border-top: initial;    
}
.form-page .section-customize,
.form-customize .section-customize,
.form-page .field-row-customize,
.form-customize .field-row-customize {
    display: flex;
    position: relative;
    padding: 5px 16px;
    padding-left: 24px;
    align-items: center;
    max-height: 45px;
    height: 45px;
}
.form-page .section-customize,
.form-customize .section-customize {
    padding-left: 24px;
    padding-right: 5px;
    margin-bottom: 0;
}
.form-page .section-customize .section-input,
.form-customize .section-customize .section-input {
    display: flex;
    min-width: 100%;
}
.form-page .section-customize .section-input:empty,
.form-customize .section-customize .section-input:empty {
    min-width: auto;
}
.form-page .section-customize:hover,
.form-customize .section-customize:hover,
.form-page .field-row-customize:hover,
.form-customize .field-row-customize:hover {
    border-radius: var(--borderRadius);
    background-color: rgba(var(--blackOrWhiteColor), 0.05);
    border-color: rgba(var(--blackOrWhiteColor), 0.05);
}
.form-page .section-customize:hover .field-row-drag,
.form-customize .section-customize:hover .field-row-drag,
.form-page .section-customize:hover .field-row-buttons,
.form-customize .section-customize:hover .field-row-buttons,
.form-page .field-row-customize:hover .field-row-drag,
.form-customize .field-row-customize:hover .field-row-drag,
.form-page .field-row-customize:hover .field-row-buttons,
.form-customize .field-row-customize:hover .field-row-buttons {
    visibility: visible;
}
.form-page .section-customize.ui-sortable-helper,
.form-customize .section-customize.ui-sortable-helper,
.form-page .field-row-customize.ui-sortable-helper,
.form-customize .field-row-customize.ui-sortable-helper {
    background-color: var(--hotBackground);
    border-radius: var(--borderRadius);
}
.form-page .field-row-drag,
.form-customize .field-row-drag {
    color: var(--textLightColor);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
}
.form-page .field-row-fake-input .fa,
.form-customize .field-row-fake-input .fa {
    padding: 0;
}
.form-customize .field-row {
    margin: 0;
}
.form-customize .field-row-customize {
    padding-left: 1.8125rem;
}
.form-customize .ui-sortable-placeholder {
    height: 0 !important;
    min-height: 0;
}
.form-customize .customize-title {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}
.form-customize .customize-title .row {
    display: flex;
    gap: 5px;
}
.field-row-fake-input {
    display: flex;
    align-items: center;
    border-radius: var(--borderRadiusMedium);
    background-color: var(--templateInputBackground);
    border: 1px dashed var(--borderColor);
    transition: border linear 0.2s, box-shadow linear 0.2s;
    color: var(--textColor);
    min-height: 29px;
}
.field-row-fake-input .fake-icon,
.field-row-fake-input .fake-label {
    text-align: center;
}
.field-row-fake-input .fake-icon {
    border-right: 1px solid var(--borderColor);
    min-width: 35px;
    color: var(--disabledTextColor);
}
.field-row-fake-input .fake-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
    padding-right: 5px;
    padding-left: 5px;
    text-transform: uppercase;
    font-size: var(--textSmallerSize);
    color: var(--textColor);
}
.section,
.section-small {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.section-small {
    gap: 10px;
}
.field-row {
    flex-grow: 0;
    width: 100%;
    min-height: var(--templateInputHeight);
}
.field-row-buttons {
    display: flex;
    visibility: hidden;
}
.field-row,
.field-row-small {
    display: flex;
    flex-direction: column;
    position: relative;
}
.field-row:has(.gchk) {
    justify-content: center;
}
.field-row-small {
    width: 50%;
}
.fixed-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--borderDividerColor);
    background: var(--appWindowColor);
    display: flex;
    z-index: 2;
    justify-content: end;
    padding: 10px 0;
}
.fixed-footer .field-row-footer {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}
.card {
    border: 1px solid var(--borderColor);
}
html[data-theme='dark'] .card {
    background-color: rgba(var(--blackOrWhiteColor), 0.15);
}
.cardlist {
    display: grid;
    width: 100%;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cardlist .cardlist-item,
.cardlist .cardlist-item-new {
    box-sizing: border-box;
}
@media (max-width: 992px) {
    .cardlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 576px) {
    .cardlist {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.cardlist-item,
.cardlist-item-new {
    min-height: 70px;
    padding: 0.5rem 1rem;
    flex-basis: 100%;
    display: flex;
    cursor: pointer;
    border-radius: var(--borderRadiusMedium);
    border: var(--frameBorder);
    color: var(--textColor);
    max-width: 100%;
    background-color: var(--appWindowColor);
    line-height: 1.3;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.cardlist-item-new {
    gap:10px;
    background-color: initial;
}
.cardlist-item:hover,
.cardlist-item-new:hover {
    background-color: var(--hotBackground);
}
.cardlist-item-edit {
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadius);
    padding: 1rem;
    padding-top: 1rem;
    border: var(--frameBorder); 
}
.cardlist-item-new {
    align-items: center; 
    border-style: dashed;    
}
.cardlist-item-new>span {
    font-size: 18px;
}

.cardlist-item .cardlist-item-content{
    padding: 0;
}
.cardlist-item-row {
    /*flex: 1;*/
    flex: 1 1 auto;
    min-width: 0;
    /*align-content: center;*/
}
.cardlist-item-icon {
    height: 100%;
    align-content: center;
}
.cardlist-item-icon>span {
    font-size: 20px;
}
.cardlist-item-icon>div {
    margin-right: 15px;
}
.cardlist-item-content {
    display: flex;
    flex-direction: column;
    align-self: center;
    overflow: hidden;
    flex: 1;
    gap: 3px;
    padding: 10px;
}
.cardlist-item-content-title {
    display: flex;
    font-weight: var(--textBold);
}
.cardlist-item-content-rows {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
    column-gap: 16px;
}
.cardlist-item-value {
    line-height: 1.2;
    text-align: left;
    display: flex;
    gap: 3px;
}
.cardlist-item-value:nth-child(2n) {
    justify-content: flex-end;
    display:flex;
}
.cardlist-item-value:nth-child(3n), .cardlist-item-value:nth-child(4n) {
    font-weight: var(--textBold);
}
.cardlist-item-value .field-value, 
.cardlist-item-value .fld-lookup-value,
.cardlist-item-value .fld-option,
.cardlist-item-value .fld-related,
.cardlist-item-value .fld-related-value {
    color: rgba(var(--textLightColor), 1);
}
.cardlist-item-header {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 10px;    
}
.cardlist-item-body {
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallSize);    
    display: flex;
    gap: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cardlist-item-buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: var(--disabledTextColor);
    flex: 0 0 auto;
}
.cardlist-item-buttons .btn-tool:last-child {
    margin-right: 0;
}
.field-required {
    color: red;
    font-size: large;
    margin-left: 0.1em;
    position: absolute;
    font-weight: var(--textBold);
}
.field-required::after {
    content: '*';
}
.field-checkbox-wrapper {
    height: 27.5px;
    line-height: 29px;
}
input,textarea,[contenteditable="true"] {
    caret-color: var(--eventColor);
}
input,
textarea,
.token-editor {
    padding: 3.2px 5px 3.2px 10px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--textColor);
    background-color: var(--templateInputBackground);
    background-clip: padding-box;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    transition: border linear .2s, box-shadow linear .2s;
    font-size: var(--textSize);
    box-shadow: inset 0 1px 2px rgba(33, 36, 44, 0.08);
    height: var(--templateInputHeight);
    width: 100%;
}
.token-editor{
    line-height: inherit;
    height: auto;
    min-height: var(--templateInputHeight);
}
textarea {
    min-height: 78px;
    padding-top: 6px;
    line-height: 1.4;
}
input[type="checkbox"] {
    align-self: baseline;
}
.input-group {
    gap: 5px;
}
.input-group button.icon-only {
    height: var(--templateInputHeight);
    width: var(--templateInputHeight);
}
.input-group>input {
    flex: 1;
}
::placeholder {
    color: var(--disabledTextColor);
    opacity: 1;
    text-overflow: ellipsis;
}
:-ms-input-placeholder {
    color: var(--disabledTextColor);
    opacity: 1;
}
::-ms-input-placeholder {
    color: var(--disabledTextColor);
    opacity: 1;
}
.btn-light:active,
.btn-light.active,
.btn-light:active:focus,
.btn-light.focus,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active {
    outline: 0;
    outline: thin solid \9;
    box-shadow: none !important;
    border-color: var(--focusBorderColor);
    transition: height 0.5s;
    color: var(--textColor);
    background-color: var(--templateInputBackground);
}
.field-input .field-value.input-option.show::after {
    content: '';
    width: calc(100%);
    height: calc(100%);
    top: 0;
    left: 0;
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--borderRadius);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
    transition: border 0.15s steps(4, end);
}
.gal-selected,
.select-gallery-item:hover,
.select-row-item-icon:hover,
.gbtn:focus,
.gchk.chk-switch:hover .state label:before,
.bs-searchbox input.form-control:focus {
    border-color: var(--focusBorderColor);
    outline: 0;
    outline: thin solid \9;
}
html[data-theme="dark"] {
    .gal-selected,
    .select-gallery-item:hover,
    .select-row-item-icon:hover,
    .gbtn:focus,
    .gchk.chk-switch:hover .state label:before,
    .bs-searchbox input.form-control:focus {
        border-color: var(--borderColor);
    }
    .btn-group .gbtn+.gbtn{
        border-left: 1px solid var(--borderColor);
    }
}
.gal-selected,
.select-gallery-item:hover {
    box-shadow: var(--focusBoxShadow);
    transition: height .5s;
}
textarea:focus,
input:focus,
/*.show>.btn-light.dropdown-toggle,
.show>.btn-light.dropdown-toggle:focus,*/
.gchk:not(.chk-switch):hover .state label:before,
.gchk input:focus~.state label:before,
.gchk.chk-switch input:focus~.state:before,
.bs-searchbox input.form-control:focus {
    outline: 0;
    outline: thin solid \9;
    border-color: var(--focusBorderColor);
}
.show>.btn-light.dropdown-toggle,
.show>.btn-light.dropdown-toggle:focus {
    color: var(--textColor);
    background-color: var(--templateInputBackground);
}
.bootstrap-select:hover .dropdown-toggle:active,
.bootstrap-select:hover .dropdown-toggle:focus,
.bootstrap-select.show:hover .show>.btn-light.dropdown-toggle,
.show>.btn-light.dropdown-toggle,
.bootstrap-select:hover .dropdown-toggle {
    border-color:transparent !important;
}
.show>.btn-light.dropdown-toggle::before,
.show>.btn-light.dropdown-toggle:focus::before,
.bootstrap-select:hover .dropdown-toggle::before{
    content: '';
    width: calc(100%);
    height: calc(100%);
    top: 0;
    left: 0;
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--inputBorderRadius);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
}
button.close,
.gbtn-link:focus {
    outline-style: none;
    outline: none;
    outline: 0;
    border: none;
    outline: 0 none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.modal-dialog {
    width: 950px;
    max-width: 950px;
}
.modal-size-l {
    width: 790px;
    max-width: 790px;
}
.modal-size-m {
    width: 640px !important;
    max-width: 640px !important;
}
.modal-size-s {
    width: 500px;
    max-width: 500px;
}
.modal-size-s .detail-section {
    margin-bottom: 0;
}
.field-row .select-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.field-input .select-gallery {
    border: none;
    background-color: var(--appWindowColor);
    padding: 5px;
    display: initial;
}
.modal-size-s .select-gallery-item {
    font-size: var(--textLargeSize);
    padding: 20px 0;
    margin: 0;
    width: 33.33%;
}
.modal-size-s .select-gallery-item:hover {
    background: var(--appWindowColor);
}
.modal-size-s .select-gallery-item .fas {
    font-size: 25px;
    padding-bottom: 10px;
}
.modal-size-s .select-gallery-item div {
    color: #737c90;
}
.modal-size-full {
    width: calc(100% - 60px);
    max-width: 1100px;
    height: calc(100% - 60px);
    margin: 30px auto;
}
.modal-size-full .modal-content {
    height: 100%;
}
.modal-size-full .modal-body {
    flex: 1 1 auto;
}
.modal-size-full .detail-view {
    height: calc(100% - 10px);
}
.modal-size-full .view-container {
    height: 100%;
}
.pdf-canvas {
    border-radius: var(--borderRadiusBig);
    border: 1px solid var(--borderDividerColor);
}
.canvas-buttons {
    position: fixed;
    /*top: 75px;*/
    left: 35px;
    background-color: rgba(var(--blackOrWhiteColor), .2);
    /*padding: 5px;*/
    z-index: 1;
    /*border-radius: var(--borderRadius);*/
    bottom: 68px;
    /*top: unset;*/
    padding: 8px;
    gap: 8px;
    border-radius: var(--borderRadiusBig);
}
.pdf-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.canvas-buttons button {
    height: 3rem;
    width: 3rem;
}
.modal.fade,
.modal.fade.show.modal-stack {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
    display: flex !important;
}
.modal.fade .modal-dialog,
.modal.fade.show.modal-stack .modal-dialog {
    -webkit-transform: scale(0.92);
    -moz-transform: scale(0.92);
    -ms-transform: scale(0.92);
    transform: scale(0.92);
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.modal.fade.show .modal-dialog,
.modal.fade.show.modal-stack.show .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.modal.fade.show.modal-stack {
    z-index: 1001;
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px); 
    border-radius: 14px;
    background-color: var(--modalBackgroundColor);
    box-shadow: 0 13px 120px rgba(0, 0, 0, .8); 
}
.modal-size-full-height .modal-content .detail-view,
.modal-size-full-height .modal-content{
    height: 100%;
    position: relative;
}
html[data-device='browser'][data-theme='dark'] .modal-content {
  position: relative;
  background: rgba(18, 22, 26, 0.92);
  border-radius: 14px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.9);
}
html[data-device='browser'][data-theme='dark'] .modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
  z-index: 2;
}
html[data-device='browser'][data-theme='dark'] .modal-content::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--modalBackgroundColor);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06);
}
.modal-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background-color: var(--modalBackgroundColor);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
html[data-device='browser'] .modal-backdrop.show{
    opacity: 0;
}
.modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: initial;
    position: relative;
    z-index: 3;    
    padding-bottom: 0;
}
.modal-body::-webkit-scrollbar,
.modal-body .view-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.modal-body::-webkit-scrollbar-thumb,
.modal-body .view-content::-webkit-scrollbar-thumb {
    background-color: var(--templateScrollBarThumb);
    border-radius: var(--borderRadiusMedium);
    background-clip: padding-box;
    border: 2px solid transparent;
}
.modal-body::-webkit-scrollbar-thumb:active,
.modal-body .view-content::-webkit-scrollbar-thumb:active {
    background-color: var(--templateScrollBarThumbActive);
}
.modal-body .view-content::-webkit-scrollbar-corner {
    background: transparent;
}
.modal-size-full-height .modal-body {
    flex: 1;
}
.modal-customize .detail-view {
    overflow-x: hidden;
    display: flex;
    height: 100%;
}
.modal-customize .detail-view .form-page {
    flex-grow: 1;
    height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: 66.66%;
    max-width: 66.66%;
    padding-right: 5px;
    padding-left: 5px;
    border-right: var(--frameBorder);
}
.modal-customize .detail-view .form-page .ui-sortable-handle:not(:first-child) +
.ui-sortable-placeholder.detail-section.ui-sortable-handle {
    margin-top:20px
}
.modal-customize .section {
    gap: 0;
}
.modal-customize .section-divider {
    width: 0;
}
.modal-customize .section-content {
    gap: 0;
}
.modal-customize .detail-view .form-customize {
    flex-grow: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    width: 33.33%;
    border-left: 1px solid rgba(var(--blackOrWhiteColor), .06);
    box-shadow: var(--frameShadow);
}
.modal-customize .form-customize .customize-scroll {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    border-right: var(--frameBorder);
}
.modal-customize .form-customize .customize-scroll .fake-label {
    max-width: 115px;
}
.modal-customize .form-customize .customize-scroll .field-row-buttons {
    margin-left: auto;
}
.modal-customize .modal-body {
    padding: 0;
}
.modal-customize .detail-section:not(.ui-sortable-helper):last-child .section-content {
    margin-bottom: 90px;
}
.dialog-text {
    color: var(--textColor);
}
.dialog-text div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-footer {
    border-top-color: var(--borderColor);
    border-bottom-left-radius: var(--borderRadiusBig);
    border-bottom-right-radius: var(--borderRadiusBig);
    z-index: 3;
}
.modal-buttons,
.modal-buttons div:not([class]) {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 16px;
}
.modal-footer .modal-buttons,
.modal-footer .modal-buttons div:not([class]){
    margin-top: 0;
}
.modal-buttons-nav,
.modal-buttons-main {
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-buttons-action {
    align-self: flex-start;
    margin-right: auto;
}
.modal-header {
    align-items: baseline;
    padding: 0.5rem 1rem;
    font-size: larger;
    z-index: 3;
    border-bottom-color: var(--borderColor);
    border-top-left-radius: var(--borderRadiusBig);
    border-top-right-radius: var(--borderRadiusBig);
    border-bottom: none;
}
.modal-header.modal-header-warning {
    background-color: var(--redColor);
}
.modal-header.modal-header-warning .modal-title,
.modal-header.modal-header-warning button span {
    color: #fff;
}
.modal-header .modal-title {
    color: var(--textColor);
    font-weight: var(--textBold);
}
.modal-header .modal-title span+span {
    padding-left: 5px;
}
.field-caption {
    color: rgba(var(--textLightColor), 1);
    text-transform: uppercase;
    font-size: var(--textSmallerSize);
    position: absolute;
    top: -11px;
    z-index: 4;
    left: 6.5px;
    padding: 0 3px;
    font-weight: var(--textBold);
    pointer-events: none;
}
.field-caption::before {
    position: absolute;
    top: 11px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 3px;
    content: "";
    background: var(--templateInputBackground);
    padding: 0 5px;
}
html[data-theme='dark'] .field-caption {
    color: var(--textLightColor);
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .field-caption {
        top: -10px;
    }
    .field-caption::before {
        top: 10px;
    }
}
@-moz-document url-prefix() {
    .field-caption {
        top: -11px;
    }
    .field-caption::before {
        top: 11px;
    }
}
.field-input,
.field-input-token {
    position: relative;
    display: flex;
}
.field-input:not(.field-datetime-time),
.field-input-token {
    /*min-width: 180px;*/
}
.inplace-edit .field-input {
    min-width: 100%;
}
.inplace-edit .field-datetime-date {
    min-width: 105px;
}
.inplace-edit .field-datetime-time {
    min-width: 55px;
}
.field-input>*,
.field-input-token>* {
    flex: 1;
    margin: 0;
}
.layout-component:hover .field-input-body::after,
.field-input:hover::after,
.field-input.focused::after,
.field-input-token:hover::after,
.field-input-token.focused::after {
    content: '';
    width: calc(100%);
    height: calc(100%);
    top: 0;
    left: 0;
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--inputBorderRadius);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
}
.field-input:not(.focused):hover::after,
.field-input-token:not(.focused):hover::after {
    /*border-width: 1px;*/
}
.field-input.disabled input:disabled {
    border-color: var(--templateInputDisabledBorder);
}
.field-input.disabled:hover::after,
.field-input.disabled.focused::after,
.field-input-token.disabled:hover::after,
.field-input-token.disabled.focused::after {
    content: none;
    border: none;
    transition: none;
}
.gram-tiptap-editor {
    overflow-y: auto;
    max-width: 100%;
    width: 100%;
    background-color: var(--templateInputBackground);
}
.gram-tiptap-editor .tiptap.ProseMirror {
    width: 100%;
    min-height: 104px; /* .gram-tiptap-editor's own min-height (120px) minus its 2x8px padding */
    cursor: text;
}
.field-signature .signature-pad {
    background-color: var(--signaturePadColor); 
    border-radius: var(--borderRadius);
    border: 2px solid var(--eventBorderColor);
    transition: border linear .2s, box-shadow linear .2s;
    box-shadow: inset 0 1px 2px rgba(33, 36, 44, 0.08);
    padding: 5px;
}
.signature-pad--text {
    border-top: 1px solid var(--borderColor);
    text-align: center;
}
.dropdown-menu.show div.inner.show {
    overflow: hidden;
}
button.btn.dropdown-toggle {
    font-size: var(--textSize);
}
button.btn-light {
    padding: 3.2px 5px 3.2px 10px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--textColor);
    background-color: var(--templateInputBackground);
    background-clip: padding-box;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    transition: border linear 0.2s, box-shadow linear 0.2s;
    height: var(--templateInputHeight);
}
button.btn-light:hover {
    color: var(--textColor);
    background-color: var(--templateInputBackground);
    border-color: var(--borderColor);
}
button .field-option span {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
}
.bs-searchbox input.form-control {
    height: unset;
    font-size: var(--textSize);
    padding: 3.2px 5px;
    color: var(--textColor);
    background-color: var(--templateInputBackground);
}
.bootstrap-select .no-results {
    background-color: var(--templateAppHeaderBackground);
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0 !important;
}
.bootstrap-select .dropdown-toggle::after {
    color: var(--eventColor);
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}
.input-holder {
    display: flex;
    gap: 6px;
}
.input-container {
    position: relative;
}
.input-required {
    border-bottom-color: #E43859 !important;
    border-bottom-width: 2px;
}
.field-readonly {
    padding: 3px 0 2.2px 10px;
    color: var(--textColor);
    border: 1px solid transparent;
    min-height: var(--templateInputHeight);
}

.field-activity-value {
    background-color: color-mix(in srgb, var(--color) 12%, var(--appWindowColor));
    color: var(--color);
    font-size: var(--textSmallerSize);
    padding: 3px 6px;
    border-radius: var(--borderRadiusMedium);
    font-weight: var(--textBold);
    border: 1px solid color-mix(in srgb, var(--color) 25%, var(--appWindowColor));
}
.field-activity-value.activity-today {
    background-color: #ceedfb;
    color: var(--eventColor);
}
.field-icon-value,
.field-related {
    display: flex;
    align-items: baseline;
    column-gap: 5px;
    color: initial;
}
.fld-basic,
.fld-related,
span.fld-datetime,
span.fld-lookup {
    display: flex;
    align-items: baseline;
    column-gap: 3px;
    min-width: 0;
}
span.fld-lookup:hover,
span.fld-lookup {
    color: var(--textColor);
}
.fld-lookup+.fld-basic,
.fld-related+.fld-basic {
    display: initial;
}
.lookup-dropdown {
    z-index: 999;
    position: absolute;
    background-color: var(--appDropdownMenuColor);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: var(--borderRadiusMedium);
    padding: 0.5rem 0;
    margin-top: 0;
    width: 100%;
    box-shadow: var(--appDropdownMenuShadow);
    font-size: var(--textSize);
    min-width: 230px;
}
.lookup-dropdown .field-icon-value,
.lookup-dropdown .field-related {
    display: inherit;
}
.lookup-dropdown .ui-calendar {
    padding: 0 10px;
}
.lookup-select.scroll-list {
    max-height: 320px;
    overflow: auto;
    position: relative !important;
}
.lookup-container .lookup-select {
    max-height: 400px;
    position: relative !important;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.lookup-container .lookup-select .list-item {
    /*align-items: center;*/
}
.lookup-container .lookup-select .list-content {
    overflow: hidden;
}
.lookup-dropdown .field-lookup,
.lookup-dropdown.scroll-list .field-lookup {
    color: var(--textColor);
}
.lookup-dropdown .field-lookup:hover,
.lookup-dropdown.scroll-list .field-lookup:hover {
    color: var(--textColor);
}
.lookup-select.scroll-list,
.lookup-container.scroll-list {
    width: 100%;
    max-height: 320px;
    overflow: auto;
}
.field-date~.lookup-dropdown,
.field-datetime-date .lookup-dropdown {
    width: 230px;
}
[aria-label][data-balloon-pos]::after {
    padding: 2px 8px 4px 8px !important;    
    border-radius: var(--borderRadiusBig);
    font-size: var(--textSmallSize) !important;
    font-weight:  var(--textBold) !important;
}
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]::before,
[aria-label][data-balloon-pos]::before {
    top: -5px;
}
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
    right: calc(var(--borderRadiusBig) / 1.5);
}
[aria-label][data-balloon-pos][data-balloon-pos^="up"]::after {
    margin-bottom: 5px;
}
[aria-label][data-balloon-pos] {
    cursor: default;
    cursor: unset;
}
.main-auto-list {
    z-index: 998;
    position: absolute;
    background: var(--appDropdownMenuColor);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: var(--borderRadiusMedium);
    margin-top: 0;
    width: 100%;
    box-shadow: var(--appDropdownMenuShadow);
}
.main-search-container {
    display: flex;
    flex-wrap: wrap;
    max-height: 80vh;
}
.main-search-result,
.main-search-preview {
    width: 50%;
    max-height: 80vh;
    padding: .5rem 0;
    overflow-y: auto;
}
.main-search-result {
    width: 100%;
}
.main-search-preview {
    display: none;
    background-color: var(--groupBackground);
}
.list-item {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 3px;
    border-radius: var(--borderRadius);
    padding-left: 12px;
    padding-right: 12px;
}

html[data-device="browser"] .list-item + .list-item::before,
html[data-device="desktop"] .list-item + .list-item::before {
    content: "";
    width: 100%;
    height: 0.5px;
    background: var(--borderColorMedium);    
}

.main-search-result .list-item {
    align-items: center;
}
.main-search-result .list-item:hover {
    background-color: var(--appDropdownMenuActiveColor);
}
.list-item .list-icon,
.list-item .list-content,
.list-item .list-content .list-header,
.list-item .list-content .list-body {
    padding: 3px 0;
}




.list-item.item-active,
.list-item:hover {
    cursor: pointer;
}
.list-item:hover .list-add-text {
    position: absolute;
    display: block;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translate(0%, -50%);
    padding: 0.25rem;
    line-height: 1.5;
    border-radius: 25%;
    cursor: pointer;
    background-color: var(--hotBackground);
}

.list-item .list-select-value {
    border-radius: var(--borderRadiusBig);
    padding: 4px 12px;
    color: var(--textColor);
}

.list-item .list-select-value.list-field-name {
    font-weight: var(--textBold);
    display: flex;
    gap: 8px;
}



.list-item .list-field-name {
    padding: 0.25rem;    
    font-size: var(--textSmallSize);
    line-height: 0.8rem;
    font-weight: var(--textBold);
}
html[data-theme='dark'] .list-item .list-select-value.list-select-value {
    --groupBackground: #313131;
}
.list-item .list-select-value.list-select-value {
    background-color: var(--groupBackground);
    letter-spacing: -0.02rem;
    border: 2px solid var(--groupBackground);
}

.list-item .list-select-value .operator {
    font-weight: var(--textBold);
    padding: 0 3px;
    color: var(--textMatchColor);
}

.list-item-search-icon {
    background-color: var(--eventHoverBackground);
    padding: 4px;
    border-radius: 999px;
    color: var(--eventColor);
    margin-top: 2px;
}

.item-match {
    padding: 0;
    background-color: #ffcf0c;
}


.list-item .list-select-value.opt-active {
    background-color: var(--eventHoverBackground);    
    border: 2px solid var(--focusBorderColor);
}
.list-item.search-fulltext {
    border-bottom: 1px solid var(--borderDividerColor);
    border-radius: 0;
    padding-bottom: 5px;
    margin-bottom: 3px;
}
.search-hint, .search-footer {
    position: sticky;
    bottom: 0;
    padding: 5px 12px;
    margin-top: 3px;
    border-top: 1px solid var(--borderDividerColor);
    background: var(--appDropdownMenuColor);
    color: #75777c;
    font-size: var(--textSmallSize);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-footer {
    padding: 8px 15px 0 15px;
}
.search-hint:empty {
    display: none;
}
.search-controls {
    margin-left: auto;
}
.kbd-group {
    display: inline-flex;
    background-color: var(--btnBackground);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.kbd-group .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    font-weight: var(--textBold);
    background: transparent;
    border: none;
    min-width: 24px;
    min-height: 24px;
}
.kbd-group ~ .kbd-group {
    margin-left: 15px;
}
.kbd-group .icon + .icon {
    border-left: 1px solid var(--borderColor);
}

.list-group {
    padding: 3px 12px;
    color: #75777c;
    margin: 10px 0 4px 4px;
    font-size: var(--textSmallerSize);
    text-transform: uppercase;
    flex-direction: initial;
    gap: 5px;
    align-items: center;
    white-space: nowrap;
    cursor: default;
    font-weight: var(--textBold);
}
.list-group:not(:first-child) {
    margin-top: 5px;
}
.list-icon {
    font-size: 22px;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    width: 39px;
    color: var(--textColor);
}
.list-content {
    flex: 1;
    flex-grow: 1;
    line-height: 1;
    font-size: var(--textSize);
    position: relative;
    flex-wrap: wrap;
}
.list-content .list-header,
.list-content .list-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-add-text {
    display: none;
    position: absolute;
    color: var(--eventColor);
}
.list-header,
.list-body {
    color: var(--textColor);
}
.list-header>span,
.list-body>span {
    padding-right: 3px;
}
.list-header {
    font-weight: var(--textBold);
    padding-bottom: 1px !important;
}
.list-body {
    line-height: .7;
    font-size: 90%;
}
.ui-calendar {
    min-width: 230px;
    position: relative;
}
.view-calendar-side .ui-calendar {
    min-width: 190px;
}
.ui-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(25px, 1fr));
    grid-gap: 0px;
    box-sizing: border-box;
    text-align: center;
    font-size: var(--textSmallerSize);
    color: rgba(var(--textLightColor), 1);
    border-bottom: 1px solid rgba(33, 36, 44, 0.12);
    border-top: 1px solid rgba(33, 36, 44, 0.12);
    border-top: 1px solid rgba(var(--blackOrWhiteColor), 0.08);
    border-bottom: 1px solid rgba(var(--blackOrWhiteColor), 0.08);
    padding: 4px 0;
    margin-bottom: 4px;
}
.ui-calendar-days .active {
    color: var(--eventColor);
    font-weight: var(--textBold);
}
.ui-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(25px, 1fr));
    grid-gap: 0px;
    box-sizing: border-box;
}
.ui-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-width: 22px;
    height: 22px;
    max-width: 22px;
    margin-bottom: 5px;
    color:rgba(var(--textLightColor), 0.3);
    font-weight: var(--textBoldLighter);
}
.ui-calendar-day-this {
    color: var(--textColor);
    font-weight: normal;
}
.ui-calendar-day-current,
.ui-calendar-day-selected,
.ui-calendar-day:hover {
    border-radius: var(--borderRadiusBig);
    cursor: pointer;
}
.ui-calendar-day:hover {
    background-color: rgba(var(--blackOrWhiteColor), 0.05);
}
.ui-calendar-day-selected.ui-calendar-day-current,
.ui-calendar-day-selected.ui-calendar-day-current:hover,
.ui-calendar-day-selected:hover,
.ui-calendar-day-selected {
    background-color: color-mix(in srgb, var(--eventColor) 25%, transparent);
}
.ui-calendar-day-selected:hover {
    border-color: var(--eventColor);
}
.ui-calendar-day-current,
.ui-calendar-day-current:hover {
    color: var(--eventColor);
    font-weight: var(--textBold);
}
.ui-calendar-nav {
    display: flex;
    align-items: center;
}
.ui-calendar-nav-title {
    flex-grow: 1;
    display: flex;
    gap: 5px;
}
.ui-calendar-month,
.ui-calendar-year {
    font-size: larger;
    font-weight: var(--textBold);
    color: var(--textColor);
}
.ui-calendar-year{
    font-weight: var(--textBoldLighter)
}
.dash-container {
    width: 100%;
    height: 100%;      
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.dash-container > .view-header-main {
    flex: 0 0 auto;
}
.dash-container .view-header{
    box-shadow: none;
}
.dash-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 56px;
    grid-gap: 16px;
    align-items: stretch;
    box-sizing: border-box;
    padding: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.dash-item {
    --dashBg: color-mix(in srgb, var(--dashColor, var(--appWindowColor)) 20%, var(--appWindowColor));
    background-color: var(--dashBg);
    border-radius: var(--borderRadiusMedium);
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 3px 1fr;
    position: relative;
    z-index: 1;
    border: 1px solid var(--borderColor);
}
.dash-item:hover {
    box-shadow: var(--frameShadow);
}
.dash-item:hover .dash-item-header-right {
    visibility: visible;
}
.dash-content {
    overflow: auto;
    height: 100%;
    position: relative;
}
.dash-content .view-body{
    margin:0;
}
.dash-content .view-table {
    padding-left:0;
}
.dash-item-header {
    margin: 0 15px;
    font-size: 13px;
    letter-spacing: -0.02em;
    color: var(--textColor);
    display: flex;
    min-width: 100px;
    align-items: flex-start;
    position: relative;
    font-weight: var(--textBold);
}
.dash-item-header-left {
    flex-grow: 1;
    margin-top: 15px;
}
.dash-item-header-left,
.dash-item-header-left>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-item-header-right {
    white-space: nowrap;
    display: flex;
    justify-content: end;
    align-self: center;
    visibility: hidden;
    position: absolute;
    right: 0;
    background-color: var(--dashBg, var(--appWindowColor));
    padding-left: 15px;
}
.dash-view-title {
    display: inline-block;
}
.dash-chart-title {
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSize);
    font-weight: normal;
    margin-top: 4px;
}
.dash-chart {
    margin: 0 15px;
    display: grid;
    align-items: center;
    height: calc(100% - 15px);
    justify-content: center;
}
.dash-dummy {
    border: 3px dashed var(--borderColor);
    margin: 0 15px 15px 15px;
    height: calc(100% - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: var(--appColor);
}
.dash-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.dash-text {
    padding: 0 15px 15px 15px;
    white-space: pre-wrap;
    overflow: auto;
    height: 100%;
    color: var(--dashText, var(--textColor));
}
/*  Popis dlazdice (Props['Description']) - informacna ikona v hlavicke,
    text sa ukaze az v hinte. Dlazdica moze byt vysoka dve bunky, kazdy
    riadok navyse by ubral miesto samotnej hodnote. */
.dash-title-info {
    display: inline-block;
    margin-left: 5px;
    color: rgba(var(--textLightColor), .8);
    cursor: help;
    font-weight: normal;
}
/*  --- metriky (Summary card / Progress / Comparison) -------------------------
    Vsetky tri druhy su ta ista kostra: velke cislo a pod nim doplnok. Rastu
    s vyskou dlazdice, preto je hodnota v `clamp()` a nie v pevnych px. */
.dash-metric {
    --dashUpColor: #22a06b;
    --dashDownColor: var(--redColor);
    --dashLvlColor: var(--eventColor);
    padding: 0 15px 15px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}
.dash-metric.dash-lvl-low  { --dashLvlColor: #e5484d; }
.dash-metric.dash-lvl-mid  { --dashLvlColor: #f2994a; }
.dash-metric.dash-lvl-high { --dashLvlColor: #e3b341; }
.dash-metric.dash-lvl-full { --dashLvlColor: #22a06b; }
html[data-theme='dark'] .dash-metric.dash-lvl-low  { --dashLvlColor: #ff6369; }
html[data-theme='dark'] .dash-metric.dash-lvl-mid  { --dashLvlColor: #ffa657; }
html[data-theme='dark'] .dash-metric.dash-lvl-high { --dashLvlColor: #ffd45e; }
html[data-theme='dark'] .dash-metric.dash-lvl-full { --dashLvlColor: #2ecc8f; }
.dash-metric-summary {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.dash-metric-summary .dash-metric-value {
    max-width: 100%;
}
.dash-metric-value {
    font-size: clamp(14px, 2.6vw, 20px);
    font-weight: var(--textBold);
    line-height: 1.1;
    color: var(--dashText, var(--textColor));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-metric-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.dash-metric-goal {
    font-size: var(--textSize);
    font-weight: var(--textBold);
    color: rgba(var(--textLightColor), .75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.dash-metric-note {
    font-size: var(--textSize);
    font-weight: normal;
    color: rgba(var(--textLightColor), 1);
}
.dash-metric-delta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: var(--textSize);
}
.dash-metric-diff {
    font-weight: var(--textBold);
    color: rgba(var(--textLightColor), 1);
}
.dash-metric-diff.up {
    color: var(--dashUpColor);
}
.dash-metric-diff.down {
    color: var(--dashDownColor);
}
.dash-metric-prev {
    font-size: var(--textSize);
    font-weight: normal;
    color: rgba(var(--textLightColor), 1);
    flex-basis: 100%;
}
.dash-progress {
    height: 8px;
    border-radius: 4px;
    background-color: rgba(var(--blackOrWhiteColor), 0.09);
    overflow: hidden;
}
.dash-progress-bar {
    height: 100%;
    width: var(--dashPct, 0%);
    border-radius: 4px;
    background-color: var(--dashLvlColor, var(--eventColor));
    transition: width .3s ease, background-color .3s ease;
}
.dash-metric-gauge {
    justify-content: center;
}
.dash-gauge {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-gauge-svg {
    width: 100%;
    height: 100%;
    max-height: 220px;
    display: block;
}
.dash-gauge-track {
    stroke: rgba(var(--blackOrWhiteColor), 0.10);
}
.dash-gauge-fill {
    stroke: var(--dashLvlColor, var(--eventColor));
    transition: stroke-dashoffset .3s ease, stroke .3s ease;
}
.dash-gauge-needle,
.dash-gauge-pin {
    stroke: var(--textColor);
    fill: var(--textColor);
}
.dash-gauge-val {
    fill: var(--dashText, var(--textColor));
    font-size: clamp(14px, 2.6vw, 20px);
    font-weight: var(--textBold);
}
.dash-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 24px;
    max-width: 420px;
}
.dash-empty-icon {
    color: var(--borderColor);
}
.dash-empty-text {
    color: rgba(var(--textLightColor), 1);
}
.dash-cell {
    background-color: var(--appColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadiusSmall, 6px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}
.dash-placeholder {
    background-color: rgba(var(--eventColorRgba), 0.12);
    border: 2px dashed var(--eventColor);
    border-radius: var(--borderRadiusMedium);
    z-index: 2;
    pointer-events: none;
}
.dash-drag-handle,
.dash-resize-handle {
    display: none;
    position: absolute;
    z-index: 3;
    touch-action: none;
}
.dash-drag-handle {
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    cursor: move;
}
.dash-resize-handle {
    width: 22px;
    height: 22px;
    border-color: var(--eventColor);
    border-style: solid;
    border-width: 0;
}
.dash-rz-nw { top: -4px;    left: -4px;   cursor: nwse-resize; border-top-width: 4px;    border-left-width: 4px;  border-radius: 8px 0 0 0; }
.dash-rz-ne { top: -4px;    right: -4px;  cursor: nesw-resize; border-top-width: 4px;    border-right-width: 4px; border-radius: 0 8px 0 0; }
.dash-rz-sw { bottom: -4px; left: -4px;   cursor: nesw-resize; border-bottom-width: 4px; border-left-width: 4px;  border-radius: 0 0 0 8px; }
.dash-rz-se { bottom: -4px; right: -4px;  cursor: nwse-resize; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 8px 0; }
.dash-design .dash-drag-handle {
    display: block;
}
.dash-design .dash-item:hover > .dash-resize-handle,
.dash-design .dash-item-dragging > .dash-resize-handle {
    display: block;
}
.dash-design .dash-item {
    box-shadow: var(--frameShadow);
}
.dash-design .dash-item:hover,
.dash-design .dash-item-dragging {
    outline: 2px solid var(--focusBorderColor);
    outline-offset: 0;
}
.dash-design {
    cursor: crosshair;
}
.dash-design .dash-item {
    cursor: default;
}
.dash-design .dash-item-header-right {
    z-index: 4;
}
.dash-item-edit {
    display: none;
}
.dash-design .dash-item-edit {
    display: flex;
    align-items: center;
}
.dash-item-dragging {
    z-index: 4 !important;
    opacity: 0.85;
    box-shadow: var(--frameShadow);
    pointer-events: none;
}
.dash-is-dragging {
    user-select: none;
    cursor: move;
}
.dash-is-dragging .dash-item {
    transition: none;
}
.dash-kind-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--borderRadiusMedium);
    cursor: pointer;
}
.dash-kind-item:hover {
    background-color: var(--appColor);
}
.select-gallery-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    border: 3px dashed var(--borderColor);
    border-radius: 12px;
    color: rgba(var(--textLightColor), 1);
}
.field-hint {
    font-size: var(--textSmallerSize);
    color: rgba(var(--textLightColor), 1);
    padding: 4px 0 10px 0;
}
.chart-preview {
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadiusMedium);
    background-color: var(--appWindowColor);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.select-gallery {
    border-radius: var(--borderRadius);
}
.select-row-item {
    cursor: pointer;
    color: var(--textColor);
    display: flex;
    align-items: center;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadiusBig);
    padding: 15px;
}
.select-row-item:last-child {
    margin-bottom: 5px;
}
.select-row-item:hover {
    background: var(--focusColor);
}
.select-row-item-main {
    flex-grow: 1;    
    display: flex;
    flex-direction: column;
}
.select-row-item-title {
    font-weight: var(--textBold);
    font-size: larger;
}
.select-row-item-desc {
    color: rgba(var(--textLightColor), 1);
}
.select-row-item-side {
    display: flex
}
.select-row-item-icon {
    margin: 5px;
    padding: 5px;
    width: 43px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--borderRadius);
}
.select-row-item-icon:hover {
    background: var(--appWindowColor);
}
.select-row-item-icon i {
    font-size: 30px;
    text-align: center;
}
.select-row-item-icon div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-gallery-item {
    margin: 5px;
    float: left;
    width: calc(33.33% - 10px);
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: var(--borderRadius);
    text-align: center;
    color: var(--textColor);
}
.select-gallery-item:hover {
    background: var(--focusColor);
}
.select-gallery-desc {
    margin-top: 5px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gchk * {
    box-sizing: border-box;
}
.gchk input:not([type="checkbox"]):not([type="radio"]) {
    display: none;
}
.gchk {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    width: 28px;
}
.gchk input {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 1em;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.gchk .state label {
    position: initial;
    display: inline-block;
    font-weight: var(--textBold);
    font-size: var(--textSmallerSize);
    color: rgba(var(--textLightColor), 1);
    text-transform: uppercase;
    cursor: pointer;
    margin: 0;
    text-indent: 1.5em;
    min-width: calc(1em + 2px);
}
.gchk .state label:after,
.gchk .state label:before {
    content: '';
    height: 16px;
    width: 16px;
    display: block;
    box-sizing: border-box;
    border: 1px solid transparent;
    z-index: 0;
    position: absolute;
    left: 0;
    background-color: transparent;
    top: 0;
    border-radius: 20%;
}
.gchk .state label:before {
    border-color: var(--borderColor);
    background-color: var(--appWindowColor);
}
.gchk.chk-checkbox .state span.icon-check {
    opacity: 0;
    position: absolute;
    width: calc(1em + 2px);
    height: calc(1em + 2px);
    top: 1px;
    left: 1px;
    z-index: 1;
    text-align: center;
    line-height: normal;
    transform: scale(0.8);
    background-image: url(/ui/images/checkbox.svg);
    background-repeat: no-repeat;
}
.gchk.chk-checkbox input:checked~.state span.icon-check {
    opacity: 1;
}
.main-table .gchk.chk-checkbox .state span.icon-check,
.related-table .gchk.chk-checkbox .state span.icon-check,
.setting-table .gchk.chk-checkbox .state span.icon-check {
    left: 0;
    top: 0;
}
.main-table .gchk .state label::after,
.main-table .gchk .state label::before,
.related-table .gchk .state label::after,
.related-table .gchk .state label::before,
.setting-table .gchk .state label::after,
.setting-table .gchk .state label::before,
.tbl-head .gchk.chk-checkbox,
.align-center .gchk.chk-checkbox,
.list-view .list-item .gchk.chk-checkbox {
    width: 14px;
    height: 14px;
}
.main-table .tbl-head .gchk.chk-checkbox {
    top: 50%;
    transform: translateY(-50%);
}
.chk-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    min-width: 28px;
    height: 14px;
}
.chk-switch:hover .state::before {
    box-shadow: 0 0 0 2px #99bbef;
}
.gchk.chk-switch input {
    min-width: 28px;
}
.gchk.chk-switch input:checked~.state label:before {
    opacity: 0;
}
.gchk.chk-switch input:checked~.state label:after {
    background-color: rgba(var(--whiteColor), 1) !important;
    left: 14px;
    top: 0;
}
.gchk.chk-switch input:focus~.state label:before {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}
.gchk.chk-switch .state {
    position: relative;
    height: 14px;
    display: block;
}
.gchk.chk-switch .state:before {
    content: '';
    border-radius: 34px;
    width: 28px;
    height: 14px;
    position: absolute;
    z-index: 0;
    transition: all 0.5s ease;
    background: #ccc;
    left: 0;
}
.gchk.chk-switch .state label {
    text-indent: 2rem;
}
.gchk.chk-switch .state label:after,
.gchk.chk-switch .state label:before {
    transition: all 0.5s ease;
    border-radius: 50%;
    left: 0;
    top: 0;
    border-color: transparent;
    -webkit-transform: scale(0.8572);
    -ms-transform: scale(0.8572);
    transform: scale(0.8572);
    width: 14px;
    height: 14px;
}
.gchk.chk-switch .state label:after {
    background-color: rgba(var(--whiteColor), 1) !important;
}
html[data-theme="dark"] .gchk.chk-switch {
    .state::before {
        background-color: color-mix(in srgb, var(--templateInputBackground) 78%, var(--textColor) 22%);
    }
    label:after {
        background-color: rgba(var(--whiteColor), 1) !important;
    }
}
html[data-theme="dark"][data-device="phone"] .gchk.chk-switch .state::before {
    background: rgba(var(--whiteColor), .09);
}

.gchk input[disabled],
.gchk.locked input {
    cursor: not-allowed;
    display: none;
}
.gchk input[disabled]~*,
.gchk.locked input~* {
    opacity: 0.5;
}
.gchk input:checked~.state label:after {
    background-color: var(--gramColor) !important;
}
.gchk.chk-switch input:checked~.state:before {
    border-color: var(--gramColor);
    background: var(--gramColor) !important;
}
.main-table .gchk input:checked~.state label:after,
.related-table .gchk input:checked~.state label:after,
.setting-table .gchk input:checked~.state label:after,
.main-table .gchk input:not(:checked)~.state label:after,
.related-table .gchk input:not(:checked)~.state label:after,
.setting-table .gchk input:not(:checked)~.state label:after {
    transition: background-color 0.4s ease-in-out;
}
.main-table .gchk input:checked~.state label:after,
.related-table .gchk input:checked~.state label:after,
.setting-table .gchk input:checked~.state label:after {
    background-color: var(--eventColor) !important;
}
.main-table .gchk input:not(:checked)~.state label:after,
.related-table .gchk input:not(:checked)~.state label:after,
.setting-table .gchk input:not(:checked)~.state label:after {
    background-color: initial !important;
}
.chk-checked,
.chk-unchecked {
    min-width: 10px;
    width: calc(1em + 2px);
    height: calc(1em + 2px);
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-color: var(--borderColor);
    background-color: var(--appWindowColor);
    border-radius: 20%;
    cursor: pointer;
    align-self: center;
}
.chk-checked.small,
.chk-unchecked.small {
    width: 10px;
    height: 10px;
    border-radius: 25%;
}
.chk-checked.disabled,
.chk-unchecked.disabled {
    border-color: var(--focusColor);
    background-color: var(--focusColor);
}
.chk-checked.chk-checked,
.chk-unchecked.chk-checked {
    background-image: url(/ui/images/checkbox.svg);
    background-repeat: no-repeat;
    background-color: var(--gramColor);
    border-color: var(--gramColor);
}
.related-table th:first-child div,
.related-table tr td:first-child div {
    cursor: pointer;
}
.related-table th:first-child div .chk-checked,
.related-table tr td:first-child div .chk-checked,
.related-table th:first-child div .chk-unchecked,
.related-table tr td:first-child div .chk-unchecked {
    width: calc(1em + 2px);
    height: calc(1em + 2px);
}
.related-table th:first-child .chk-unchecked,
.related-table tr td:first-child .chk-checked {
    transform: translateY(-50%);
}
.main-table th:first-child .chk-checked,
.main-table th:first-child .chk-unchecked {
    cursor: inherit;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
.main-table th:first-child .tbl-head {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.main-table th:last-child .tbl-head {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
td.align-center .chk-checked,
td.align-center .chk-unchecked {
    cursor: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
td.align-center .chk-checked:hover,
td.align-center .chk-unchecked:hover {
    border-color: var(--gramColor);
    outline: 0;
    box-shadow: none;
}
td.align-center .chk-checked.acl-check:hover,
td.align-center .chk-unchecked.acl-check:hover {
    outline: 0;
    outline: thin solid \9;
    box-shadow: var(--focusBoxShadow);
    border-color: var(--focusBorderColor);
    transition: height 0.5s;
}
td.align-center .chk-checked.disabled:hover,
td.align-center .chk-unchecked.disabled:hover {
    border-color: var(--focusColor);
}
td.align-center .chk-checked.disabled:hover {
    background-color: var(--focusColor);
}
:root {
    --fc-small-font-size: var(--textSize);
    --fc-page-bg-color: var(--appWindowColorLight);
    --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
    --fc-neutral-text-color: var(--textColor);
    --fc-border-color: #ddd;
    --fc-border-radius: .375rem;
    --fc-button-text-color: #fff;
    --fc-button-bg-color: #2C3E50;
    --fc-button-border-color: #2C3E50;
    --fc-button-hover-bg-color: #1e2b37;
    --fc-button-hover-border-color: #1a252f;
    --fc-button-active-bg-color: #1a252f;
    --fc-button-active-border-color: #151e27;
    --fc-event-bg-color: #3788d8;
    --fc-event-border-color: #3788d8;
    --fc-event-text-color: #fff;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    --fc-non-business-color: rgba(215, 215, 215, 0.3);
    --fc-bg-event-color: rgb(143, 223, 130);
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: transparent;
    --fc-today-bg-color: var(--templateCalendarToday);
    --fc-now-indicator-color: var(--redColor);
    --fc-daygrid-event-dot-width: 8px;
    --fc-list-event-dot-width: 10px;
    --fc-list-event-hover-bg-color: #f5f5f5;
}
.fc .fc-scroller-liquid-absolute{
    height: calc(100% + 1px);
}
.fc-daygrid-day-frame .fc-highlight,
.fc-gramResourceList-view .fc-highlight,
.fc-dayGridWeek-view .fc-highlight,
.fc-dayGridMonth-view .fc-highlight {
    --fc-highlight-color: #eceef1b0;
}
html[data-theme='dark'] .fc-daygrid-day-frame .fc-highlight,
html[data-theme='dark'] .fc-gramResourceList-view .fc-highlight,
html[data-theme='dark'] .fc-dayGridWeek-view .fc-highlight,
html[data-theme='dark'] .fc-dayGridMonth-view .fc-highlight {
    --fc-highlight-color: var(--hotBackgroundTable);
}
.fc {
    color: var(--textColor);
}
.fc .fc-scrollgrid {
    border-radius: var(--borderRadius);
}
.fc .fc-dayGridWeek-view .fc-daygrid-event-harness{
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
.table-bordered {
    border-color: transparent !important;
}
.table-bordered td,
.table-bordered th {
    border-bottom: none;
    border-right: none;
}
.fc-scrollgrid-sync-table {
    min-width: auto !important;
}
.table-bordered table.fc-scrollgrid-sync-table th,
.table-bordered table.fc-col-header th {
    border: 1px solid;
}
html[data-theme='dark'] .table-bordered table.fc-scrollgrid-sync-table th,
html[data-theme='dark'] .table-bordered table.fc-col-header th,
html[data-theme='dark'] .table-bordered td,
html[data-theme='dark'] .table-bordered th,
html[data-theme='dark'] .fc .fc-popover {
    border-color: var(--borderColor);
}
html[data-theme='light'] .table-bordered table.fc-scrollgrid-sync-table th,
html[data-theme='light'] .table-bordered table.fc-col-header th {
    border-color: #dee2e6;
}
.popover-header {
    font-weight: var(--textBold);
}
.fc .fc-popover{
    border-radius: var(--borderRadius);
    font: inherit;
    border-color: #dee2e6;
    border-radius: var(--borderRadius);
    background: var(--appWindowColorLight);
}
.fc .fc-popover-header {
    padding: 6px 10px;
    font-size: var(--textSize);
    border-top-left-radius: calc(var(--borderRadius) - 1px);
    border-top-right-radius: calc(var(--borderRadius) - 1px);
    background: var(--appWindowColorLight);
    border-bottom: none;
    align-items: center;
}
.fc .fc-more-popover .fc-popover-body {
    padding: 0 10px 10px 10px;
}
.fc .fc-more-popover .fc-popover-body .fc-event-resizer{
    visibility: hidden;
}
.fc-scrollgrid-section-header .fc-scroller {
    overflow: auto !important;
}
.fc-scrollgrid-section-header th {
    vertical-align: middle;
    font-weight: var(--textBold);
    text-transform: uppercase;
}
.fc .fc-timeline-slot-frame {
    justify-content: space-between;
    position: relative;
}
.fc-timeline-slot .fc-timeline-slot-cushion {
    padding: 2px 8px;
    display: flex;
}
.fc .fc-timeline-now-indicator-line {
    border-width: 0;
}
.fc-timeline .fc-timeline-now-indicator-container {
    display: none;
}
.fc .fc-timegrid-now-indicator-line {
    border-width: 3px 0 0;
    box-shadow:  0 0 1px var(--appWindowColorLight);
    transform: translateY(-2px);
}
td .fc-scrollgrid-sync-inner {
    margin: 1px;
    margin-bottom: 0;
}
th .fc-scrollgrid-sync-inner {
    display: flex;
    justify-content: space-between;
}
.fc .fc-col-header-cell-cushion {
    flex: 1;
    padding: 6px 4px 2px 6px;
}
.fc-resource {
    overflow: hidden;
}
.cal-header {
    line-height: initial;
    color: rgba(var(--textLightColor), 1);
    font-size: var(--textSmallerSize);    
    letter-spacing: -0.02em;    
}
.fc-dayGridMonth-view .cal-header {
    flex-direction: column;
    align-items: end;
}
.cal-header-date {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    gap: 4px;
    padding-bottom: 4px;
}
.cal-header .dayname {
    text-align: left;
}
.cal-header .day {
    font-size: 16px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    width: 1.55em;
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
}
.cal-header .day::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.fc-day-today .day {
    justify-content: center;
    color: var(--appWindowColor) !important;
}
.fc-day-today .day::after {
    background-color: var(--eventColor);
}
.cal-header-weather {
    font-size: var(--textSmallerSize);
    display: flex;
    flex-direction: column;
}
.cal-header .icon {
    font-size: 16px;
}
.fc-day-today .dayname{    
    color: var(--eventColor);
}
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timeline-slot-lane.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background-color: transparent !important;
}
.fc .fc-timeline-slot-lane.fc-day-today {
    opacity: 0.5;
}
.fc .fc-daygrid-day.fc-day-sat,
.fc .fc-daygrid-day.fc-day-sun,
.fc .fc-timegrid-col.fc-day-sat,
.fc .fc-timegrid-col.fc-day-sun,
.fc .fc-timegrid-day.fc-day-sat,
.fc .fc-timegrid-day.fc-day-sun {
    background-image: var(--templateCalendarWeekDay);
    background-size: 20.00px 20.00px;
}
.fc .fc-timeline-slot-lane.fc-day-sat,
.fc .fc-timeline-slot-lane.fc-day-sun {
    background-image: var(--templateCalendarWeekDay);
    background-size: 20.00px 20.00px;
}
.fc-timegrid.fc-resourceTimeGridDay-view .fc-day-today,
.fc-timegrid.fc-resourceTimeGridDay-view .fc-day-today,
.fc-timegrid.fc-timeGridDay-view .fc-day-today {
    background-color: transparent !important;
}
.fc .fc-daygrid-event {
    margin-top: 0px;
    margin-bottom: 2px;
}
.fc-event-selected:after,
.fc-event:focus:after{
    background:transparent
}
.fc .fc-daygrid-event,
.fc .fc-timegrid-event {
    font-size: var(--textSize);
    overflow: hidden;
}
.fc-timegrid-event-short .fc-event-title{
    font-size: var(--textSmallSize);
}
.fc-event-marker {
    width: 4px;
    overflow: hidden;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.fc-event-marker-line{
    height: 100%;
    width: var(--fc-border-radius);
    isolation: isolate;
    background: var(--ceBorderColor);
    border-top-left-radius: var(--fc-border-radius);
    border-bottom-left-radius: var(--fc-border-radius);
}
.fc-timegrid-event,
.fc .fc-daygrid-event,
.fc .fc-timeline-event {
    position: relative;
}
.fc-timegrid-event:before,
.fc .fc-daygrid-event:before,
.fc .fc-timeline-event:before {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.fc-timegrid-event:hover:before,
.fc .fc-daygrid-event:hover:before,
.fc .fc-timeline-event:hover:before {
    opacity: 0.35;
}
.fc .fc-daygrid-day-top {
    flex-direction: row-reverse;
    font-size: var(--textSmallSize);
    font-weight: var(--textBold);
    padding: 3px;
}
.fc .fc-daygrid-day-number {
    padding: 2px 4px;
}
.fc-day-today .fc-daygrid-day-number {
    background-color: var(--eventColor);
    color: var(--appWindowColor) !important;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    letter-spacing: -0.02em;
    padding: 0px 5px;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}
.fc-timeline-slot-cushion:hover,
.fc .fc-col-header-cell-cushion:hover,
.fc .fc-daygrid-day-number:hover {
    text-decoration: none;
}
.fc .fc-timegrid-slot {
    height: 2.5em;
    border-bottom: 0 !important;
}
.fc .fc-timegrid .fc-daygrid-body {
    background: var(--groupBackground) !important;
}
.fc-daygrid-body .fc-event-resizing {
    cursor: ew-resize;
}
.fc-timegrid-body .fc-event-resizing {
    cursor: ns-resize;
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 0.1em;
}
.fc .fc-timegrid-axis-cushion {
    font-size: var(--textSmallerSize);
    color: rgba(var(--textLightColor), 1);
    width: 60px;
}
.fc .fc-timegrid-slot-label-cushion {
    font-size: var(--textSmallSize);
    color: rgba(var(--textLightColor), 1);
}
.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor,
.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink {
    border-bottom: 0;
    border-top: 0;
}
.fc-v-event.fc-event-selected .fc-event-resizer-end{
    border: none;
    background: none;
}
.fc-event-selected::after {
    border: 4px solid var(--ceBorderColor);
    background: transparent;
}
.fc-event-resizer.fc-event-resizer-end::after,
.fc-event-resizer.fc-event-resizer-end::before {
    content: "";
    position: absolute;
    border: .625px solid var(--ceTextColor);
    max-width: 10px;
    width: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}
.fc-event-resizer.fc-event-resizer-end::before {
    top: 0px;
    height: 1px;
}
.fc-event-resizer.fc-event-resizer-end::after {
    top: -3px;
}
.fc-timeline-event.fc-h-event .fc-event-resizer.fc-event-resizer-end::after,
.fc-timeline-event.fc-h-event .fc-event-resizer.fc-event-resizer-end::before,
.fc-daygrid-event .fc-event-resizer.fc-event-resizer-end::after,
.fc-daygrid-event .fc-event-resizer.fc-event-resizer-end::before,
.fc-daygrid-day-events .fc-event-resizer.fc-event-resizer-end::after,
.fc-daygrid-day-events .fc-event-resizer.fc-event-resizer-end::before {
    left: -5px;
    top: 50%;
    transform: rotate(90deg);
    transform-origin: center;
}
.fc-timeline-event.fc-h-event .fc-event-resizer.fc-event-resizer-end::before,
.fc-daygrid-event .fc-event-resizer.fc-event-resizer-end::before,
.fc-daygrid-day-events .fc-event-resizer.fc-event-resizer-end::before {
    left: -8px;
}
html[data-theme='dark'] .fc-event-resizer.fc-event-resizer-end::after,
html[data-theme='dark'] .fc-event-resizer.fc-event-resizer-end::before {
    border-color: var(--ceTextColorDark, --textColor);
}
.fc-v-event .fc-event-main-frame,
.fc-h-event .fc-event-main-frame {
    padding: 5px 0;
    color: var(--ceTextColor);        
}
.fc-v-event .fc-event-main-frame {
    display: flow-root;
}
.fc-event .fc-event-main{
    padding-left: 7px;
    padding-right: 5px;
}
html[data-theme='dark'] .fc-v-event .fc-event-main-frame, 
html[data-theme='dark'] .fc-h-event .fc-event-main-frame,
html[data-theme='dark'] .fc-event-detail>div .field-value,
html[data-theme='dark'] .fc-event-detail>div .field-option span,
html[data-theme='dark'] .fc-event-time  {
    color: var(--ceTextColorDark) !important;        
}
.fc-event-dragging .fc-event-title-container,
.fc-event-dragging .fc-event-main-frame {
    position: relative;
}
.fc-v-event.fc-timegrid-event-short .fc-event-main-frame {
    padding-top: 0;
    line-height: 22px;
}
.fc-h-event .fc-event-title,
.fc-v-event .fc-event-title {
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.fc-v-event .fc-event-title {
    display: -webkit-box;
}
.fc-h-event .fc-event-title {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.fc-media-screen .fc-timeline-event,
.fc-media-screen .fc-timegrid-event,
.fc-media-screen .fc-daygrid-event {
    background-color: color-mix(in srgb, var(--ceBaseColor) 20%, var(--appWindowColor));
    border-radius: var(--borderRadiusMedium);
    border: none;
}
.fc-media-screen .fc-timeline-event.done,
.fc-media-screen .fc-timegrid-event.done,
.fc-media-screen .fc-daygrid-event.done {
    background-image: linear-gradient(45deg, #f0f0f0 2.50%, #ffffff50 2.50%, #ffffff50 50%, var(--ceBorderColor) 50%, #f0f0f0 52.50%, #ffffff50 52.50%, #ffffff50 100%);
    background-size: 10.00px 10.00px;
}
html[data-theme='dark'] .fc-media-screen .fc-timeline-event,
html[data-theme='dark'] .fc-media-screen .fc-timegrid-event,
html[data-theme='dark'] .fc-media-screen .fc-daygrid-event,
html[data-theme='dark'] .fc-media-screen .fc-event .fc-event-time {
    background-color: var(--ceColorDark);         
}
.fc-daygrid-event{
    line-height: 1;
}
.fc-daygrid-event>div,
.fc-timegrid-event,
.fc-timeline-event {
    line-height: 1.2;
    padding: 0;
}
.fc-event-header{
    font-weight: var(--textBold);
}
.fc-gramResourceList-view .fc-event-header,
.fc-dayGridMonth-view .fc-event-header {
    display: flex;
    align-items: center;
}
.fc-event-detail > div:empty {
    display: none;
}
.fc-event-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.fc-event-detail>div .field-value {
    overflow-wrap: break-word;
    color: var(--ceTextColor);
}
.fc-event-detail>div .field-option span {
    color: var(--ceTextColor) !important;
    background-color: transparent !important;
    padding: 0;
}
.fc-timegrid-event .fc-event-time {
    font-size: var(--textSmallSize);
    opacity: 0.7;
    margin-top: 2px;
}
.fc-daygrid-event:focus .fc-event-time{
    opacity: 0.75;
}
.fc-timegrid-event:hover .fc-event-time::before{
    opacity: 0.35;
    content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-color: var(--ceColor);
    z-index: -1;
}
html[data-theme='dark'] .fc-timegrid-event:hover .fc-event-time::before{
    background-color: var(--ceColorDark);
}
.fc-event-time {
    flex-shrink: 0;
    margin-right: 0;
    padding: 1px;
}
.fc-timeline-event-harness .fc-timeline-event:not(.fc-event-resizable) .fc-event-title {
    flex: 1;
}
.fc-h-event .fc-event-time {
    position: absolute;
    top: 1.25px;
    right: 0;
    background-color: var(--ceColor);
    font-weight: var(--textBoldLight);
    border-radius: var(--borderRadiusSmall);
}
.fc-event-dragging .fc-event-main-frame .fc-event-icon,
.fc-daygrid-event-harness .fc-event-main-frame .fc-event-icon,
.fc-timeline-event-harness .fc-event-main-frame .fc-event-icon,
.fc-timegrid-event-harness .fc-event-main-frame .fc-event-icon {
    display: inline-flex;
    padding-left: 0;
    vertical-align: baseline;
    margin-right: 3px;
}
.fc-daygrid-event-harness .fc-event-main-frame .fc-event-icon-colored {
    display: inline-block;
    margin-right: 3px;
}
.fc-event-icon,
.fc-event-icon-colored,
.fc-event-detail .field-icon,
.fc-event-detail .field-lookup-icon{
    display: flex;
    font-size: calc(var(--textSize) - 2px);
    font-size: var(--textSmallSize);
    text-align: center;
    line-height: 1.2;
    aspect-ratio: 1;
    padding-bottom: 2px;
    width: 1.25em;
    flex-shrink: 0;
    justify-content: center;
}
.fc-timegrid-event-condensed .fc-event-main-frame .fc-event-title {
    margin-left: 0;
}
.fc-event-detail span.fld-option {
    display: flex;
    flex-direction: column;
}
.fc-event-detail .field-option-stage-label::after {
    content: '';
    display: block;
}
.fc-daygrid-event-harness .fc-event-main-frame .fc-event-detail .field-option-stage,
.fc-timegrid-event-harness .fc-event-main-frame .fc-event-detail .field-option-stage {
    display: inline-flex;
    padding: 1px;
    vertical-align: middle;
    margin-left: 0;
}
.fc-event-detail .field-option-stage div {
    width: 10px
}
.fc-event-detail .field-option-stage div+div {
    margin-left: 1px;
    border-left: none;
}
.fc-event-detail .chk-checked,
.fc-event-detail .chk-unchecked {
    width: 1em;
    height: 1em;
}
.fc-popover-body .fc-daygrid-event-harness a.fc-event-end,
.fc-popover-body .fc-daygrid-event-harness a.fc-event-past,
.fc-daygrid-event-harness a.fc-event-end.fc-event-start.fc-event-past,
.fc-daygrid-event-harness a.fc-event-end.fc-event-start {
    padding-left: 0;
}
.fc-daygrid-event-harness a.fc-daygrid-dot-event {
    padding-top: 5px;
    padding-bottom: 5px;
}
.fc-daygrid-dot-event:hover {
    background: #f0f0f0;
}
.fc-timegrid-event-harness a.fc-timegrid-event-condensed fade {
    display: none;
}
.fc-event-title-container .fc-event-detail a,
.fc-timegrid-event-harness a.fc-timegrid-event-condensed .fc-event-title-container,
.fc-timegrid-event-harness a.fc-timegrid-event-condensed .fc-event-title,
.fc-timegrid-event-harness a.fc-timegrid-event-condensed .fc-event-detail,
.fc-daygrid-event-harness a.fc-daygrid-event .fc-event-title-container,
.fc-daygrid-event-harness a.fc-daygrid-event .fc-event-title,
.fc-daygrid-event-harness a.fc-daygrid-event .fc-event-detail,
.fc-daygrid-event-harness a.fc-daygrid-event .fc-event-main-frame,
.fc-timeline-event-harness a.fc-timeline-event .fc-event-title-container,
.fc-timeline-event-harness a.fc-timeline-event .fc-event-title,
.fc-timeline-event-harness a.fc-timeline-event .fc-event-detail,
.fc-timeline-event-harness a.fc-timeline-event .fc-event-main-frame,
a.fc-daygrid-event.fc-event-dragging .fc-event-detail,
a.fc-daygrid-event.fc-event-dragging .fc-event-title,
a.fc-daygrid-event.fc-event-dragging .fc-event-title-container,
a.fc-daygrid-event.fc-event-dragging .fc-event-main-frame {
    overflow: hidden;
    white-space: nowrap;
}
.fc-h-event .fc-event-title-container,
.fc-timeline-event-harness .fc-event-title-container,
.fc-daygrid-event-harness .fc-event-title-container {
    display: flex;
    align-items: flex-start;
    position: relative;
}
.fc-timeline-event-harness .fc-event-title-container,
.fc-daygrid-event-harness .fc-event-title-container{
    flex-wrap: nowrap;
}
.fc-event-detail .fld-related,
.fc-daygrid-event:not(.fc-h-event) .fc-event-title-container .fc-event-title,
.fc-daygrid-event .fc-event-title-container .fc-event-time {
    gap: 3px;
    text-align: left;
    align-items: center;
}
.fc-event-detail .fld-related {
    align-items: baseline;
}
.fc-event-detail .fld-lookup,
.fc-event-detail .fld-basic {
    font-size: var(--textSmallSize);
}
.fc-gramResourceList-view .fc-timeline-event .fc-event-title-container .fc-event-title,
.fc-gramResourceList-view .fc-timeline-event .fc-event-title-container .fc-event-time,
.fc-dayGridMonth-view .fc-daygrid-event .fc-event-title-container .fc-event-title,
.fc-dayGridMonth-view .fc-daygrid-event .fc-event-title-container .fc-event-time {
    display: flex;
}
.fc-dayGridMonth-view .fc-event-main-frame{
    padding-left:0;
    padding-right: 0;
    margin-right: 0;
}
.fc-timeline-event-harness:not(.fc-timeline-event-harness-abs) .fc-event-title-container .fc-event-time,
.fc-daygrid-event-harness:not(.fc-daygrid-event-harness-abs) .fc-event-title-container .fc-event-time {
    flex: 0 1 30px;
}
.fc-timeline-event-harness:not(.fc-timeline-event-harness-abs) .fc-event-title-container:has(.fc-event-time) .fc-event-title,
.fc-daygrid-event-harness:not(.fc-daygrid-event-harness-abs) .fc-event-title-container:has(.fc-event-time) .fc-event-title {
    flex: 1;
}
.fc-timeline-event-harness:not(.fc-daytimelinegrid-event-harness-abs) .fc-event-title-container .fc-event-detail,
.fc-daygrid-event-harness:not(.fc-daygrid-event-harness-abs) .fc-event-title-container .fc-event-detail{
    width: 100%;
}
.fc-event-detail:empty {
    display: none !important;
}
.fc-event-title-container .fc-event-detail a {
    font-size: var(--textSmallSize);
    z-index: 1;
    pointer-events: auto;
}
.fal.fc-event-icon {
    overflow: visible;
}
.fc-event-title .fc-sticky span {
    padding: 0 3px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 0;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
    margin-left: 0;
}
.fc-daygrid-event:not(.fc-event-start) .fc-event-main-frame:before,
.fc-daygrid-event:not(.fc-event-end) .fc-event-main-frame:after{
    content: "";
    flex-grow: 0;
    flex-shrink: 0;
    opacity: .3;
    width: 0;
    height: 0;
    margin: 0;
    position: absolute;
    border: 4px solid #000;
    top: 50%;
    transform: translateY(-50%);
}
.fc-daygrid-event:not(.fc-event-start) .fc-event-main-frame:before {
    left: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left: 0;
}
.fc-daygrid-event:not(.fc-event-end) .fc-event-main-frame:after {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right: 0;
    right: 0;
}
.fc-direction-ltr .fc-timeline-event .fc-event-time,
.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    font-size: var(--textSmallerSize);
}
.fc-direction-ltr .fc-daygrid-event .fc-event-time{
    margin-right: 0;
    flex-shrink: 0;
    padding-left: 3px;
}
.fc .fc-timeline-event-harness {
    margin-right: 1px;
}
.fc-direction-ltr .fc-timegrid-col-events {
    margin-right: 8px;
    margin-left: 1px;
}
.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
    left: auto;
    right: 0;
}
.fc-daygrid-dot-event .fc-event-title {
    font-weight: 400;
}
.sidecalendar-container {
    margin-left: 5px;
}
.sidecalendar-group {
    margin-top: 10px;
}
.calendar-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    flex-direction: column-reverse;
    background-color: var(--appWindowColor);
}
.view-calendar-divider {
    left: calc(100% - 270px);
    width: 32px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}
.view-calendar-divider.divider-full {
    left: calc(100% - 30px);
}
.view-calendar-divider .divider {
    margin: 0 4px;
    padding: 0;
    width: 24px;
    text-align: center;
    border-radius: var(--borderRadius);
    height: 24px;
    line-height: 24px;
}
.view-calendar-divider .divider:hover {
    background: var(--flatBtnHoverBackground);
}
.view-calendar-side {
    width: 240px; 
    display: flex;
    flex-direction: column;
    padding: 16px;
    position: relative;
    background-color: var(--appWindowColor);
    border-right: 1px solid var(--borderColorMedium);
}
.view-calendar-side.d-none {
    display: flex !important;
    width: 0;
    visibility: hidden;
    margin: 0;
}
.view-calendar-side.d-none .sidecalendar-footer .sidecalendar-side-btn {
    left: -8px;
    visibility: visible;
}
.view-calendar-side .sidecalendar-footer .sidecalendar-side-btn {
    position: absolute;
    right: -35px;
    background-color: var(--templateViewBackground) !important;
    z-index: 10;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}
.view-calendar-side .sideview-title {
    font-size: larger;
    letter-spacing: -0.02em;
    color: var(--textColor);
    margin-bottom: 0;
}
.view-calendar-side .ui-calendar-nav {
    margin-left: 5px;
}
.view-calendar-side .view-chart-header {
    padding: 10px 0 3px 0;
    margin: 0 0 0 10px;
    position: relative;
}
.sidecalendar-list {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 48px;
    margin-top: 10px;
    border-top: 1px solid rgba(var(--blackOrWhiteColor), 0.08);
    display: flex;
    flex-direction: column;
}
.sidecalendar-list:has(> .loader-container) {
    flex: 1;
}
.sidecalendar-footer{
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 8px;
    background-color: var(--templateViewBackground);
    padding-left: 3px;
}
.sidecalendar-footer button {
    box-shadow: none;
}
.sidecalendar-footer > button {
    flex: 0 0 auto;
}
.sidecalendar-footer > .btn-group {
    flex: 1;
    min-width: 0;
    justify-content: center;
}
.sidecalendar-footer>.btn-group button span{
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.sidecalendar-list > .item {
    display: flex;
    flex-direction: column;
}
.view-calendar-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--appWindowColorLight);
    border-radius: var(--borderRadius);
    box-shadow: var(--frameShadow);
    float: left;
}
.view-calendar-side.d-none+.view-calendar-body {
    width: 100%;
}
.view-calendar-side+.view-calendar-body {
    width: calc(100% - 220px);
}
.sidecalendar-list-item {
    display: flex;
    align-items: center;
    cursor: pointer;    
    border-radius: var(--borderRadiusBig);
}
.sidecalendar-list-item:hover {
    background-color: var(--hotBackground);
}
.view-calendar-side .group-header {
    margin-left: 10px;
    color: rgba(var(--textLightColor), 1);
}
.row-item {
    display: flex;
}
.row-item:hover .row-item-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
}
.list-item-main {
    display: flex;
    padding: 0 5px;
    padding-left: 10px;
    align-items: baseline;
    overflow: hidden;
    flex: 1;
    gap: 5px;
    opacity: 0.3;
}
.selected .list-item-main {
    opacity: 1;
}
.row-item-menu {
    margin-left: auto;
    margin-right: 1px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.list-item-menu {
    margin-left: auto;
    margin-right: 1px;
    visibility:hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.cal-section-item,
.cal-section-content {
    display: flex;
    flex-direction: column;
}
.sidecalendar-list-filter,
.cal-section-content{
    transition: max-height 0.2s;
    overflow: hidden;
    max-height: 500px;
    flex: 1;
}
.sidecalendar-list-filter{
    max-height: 1000px;
}
.sidecalendar-list-filter.d-none,
.cal-section-content.d-none {
    display: flex !important;
    flex-direction: column;
    max-height: 0;
    height: 0;
    overflow: hidden;
}
.cal-section-content .item {
    padding: 3px 0 3px 20px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: rgba(var(--textLightColor), 1);
}
.cal-section-content .item.selected {
    color: var(--eventColor);
}
.cal-section-item:not(:last-child) .cal-section-content .item:last-child {
    margin-bottom: 10px;
}
.cal-section-content .item:hover{
    text-decoration: none;
}
.cal-section-content .field-row.inplace {
    padding: 0 0 0 11px;
    display: flex;
    gap: 1px;
}
.cal-section-item {
    padding: 0 0 3px 17px;
}
.cal-section-header {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: var(--textBold);
    line-height: 1;
    font-size: var(--textSmallSize);
    letter-spacing: -0.02em;
    padding: 3px 0;
    color: var(--textColor);
}
.cal-section-header:hover,
.cal-section-content .item:hover {
    cursor: pointer;
    background: var(--hotBackground);
    border-radius: var(--borderRadius);
}
.cal-section-header>span.fa,
.cal-section-content .item>span.fa{
    height: 20px;
    line-height: 20px;
    text-align: center;
}
.cal-section-header>span.fa {
    text-align: center;
    width: 20px;
    min-width: 20px;
}
.sidecalendar-list-color {
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: var(--borderRadius);
    text-align: center;
    background-color: var(--appWindowColor);
    color: rgba(var(--lightOrDarkColor));
}
.cal-section-content .item>span,
.sidecalendar-list-title,
.row-item-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-item-main {
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: 3px;
}
.row-item-main span.title{
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-item-main span:not(.title) {
    flex-shrink: 0;
}
.sidecalendar-list-title {
    color: var(--textColor);
    flex: 1;
    font-size: 12px;
    letter-spacing: -0.02em;
}
.sidecalendar-list-item .list-item-menu .btn-group .dropdown-toggle::after {
    border: none;
    display: none;
}
.calendar-event-tooltip {
    width: 200px;
    background: #f5f6f8;
    position: absolute;
    z-index: 10001;
    transform: translate3d(-50%, -100%, 0);
    border: var(--frameBorder);
    box-shadow: var(--frameShadow);
    border-radius: var(--borderRadius);
}
.calendar-event-tooltip div {
    padding: 10px;
    color: var(--textColor);
}
.calendar-event-tooltip div:first-child {
    background-color: var(--appWindowColor);
}
.calendar-event-tooltip div:last-child {
    position: relative;
}
.calendar-event-tooltip div:last-child::after,
.calendar-event-tooltip div:last-child::before {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    border-bottom: 0;
    border-top-color: #f5f6f8;
    position: absolute;
    display: block;
    content: "";
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.calendar-event-tooltip div:last-child::before {
    border-top-color: var(--borderColor);
    bottom: -5px;
}
.kanban-container {
	width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 16px 16px 16px;
}

.kanban-column {
    --kanbanColor: var(--textColorLight);
    --kanbanTextColor: var(--textColor);
    --kanbanBackColor: var(--appColor);
    --kanbanHotColor: var(--hotBackground);
    --kanbanBorderColor: var(--borderColorMedium);

    display: flex;
    flex-direction: column;
    margin: 0px 12px 0 0;
    width: 300px;
    min-width: 300px;    
    position: relative;    
}

.kanban-column.ui-sortable-helper {   
    transform-origin: center;
    opacity: 0.8;
    transform: rotate(1deg);
}

.kanban-column-placeholder {
    --kanbanColor: var(--textColorLight);
    --kanbanBackColor: var(--appColor);
    --kanbanHotColor: var(--hotBackground);

    display: flex;
    flex-direction: column;
    margin: 0px 12px 0 0;
    width: 300px;
    min-width: 300px;    
    position: relative;
    opacity: 0.5;
}
.kanban-column-placeholder.collapsed {
    width: 40px;
    min-width: 40px;
}

.kanban-column-container {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100%;    
    border-radius: calc(var(--borderRadiusMedium) + 1px);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0px 1px 2px 0px #34374214, 0px 2px 4px 0px #3437420a, 0px 0px 0px .75px #34374214;
    background: var(--modalBackgroundColor);
}

.kanban-column:last-child {
    margin-right: 0;
}

/* Collapsed state styles */
.kanban-column.collapsed {
    width: 40px;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
/* hack pre safari kde sa po collapsovani zobrazi medzera ak PST zapne ramik miesto tienu */
@supports (background: -webkit-named-image(i)) {
	.kanban-column.collapsed .kanban-column-container {
		width: 40px;
		max-width: 40px;
	}
}

.kanban-column.collapsed .kanban-header{
    display: flex;
    border-radius: var(--borderRadiusMedium);

    height: auto; 
    min-height: min-content;
    
    width: 40px;
    justify-content: center;
    align-items: center;
    writing-mode: sideways-lr;
    padding-bottom: 18px;
}

.kanban-column.has-color {
    --kanbanColor: var(--color);
    --kanbanTextColor: color-mix(in srgb, var(--color) 65%, var(--textColor));
/*    --kanbanHotColor: color-mix(in srgb, var(--color) 45%, var(--appColor));*/
    --kanbanBackColor: color-mix(in srgb, var(--color) 70%, var(--appColor));
    --kanbanBorderColor: color-mix(in srgb, var(--color) 35%, var(--appColor));
}
.kanban-column .kanban-header:hover{
	cursor: move !important;
}
.kanban-column.collapsed .kanban-header:hover {
    background-color: var(--kanbanHotColor);
    cursor: pointer !important;
}

.kanban-title {
    display: flex;
    min-width: 0;
}

.kanban-title span {
    /*padding: 3px 8px;*/
    padding: 3px 0;
    border-radius: var(--borderRadiusBig);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--textBold);

    color: var(--kanbanTextColor);
    background-color: color-mix( in srgb, var(--color) 12%, var(--appColor) );
    border: 1px solid color-mix( in srgb, var(--color) 20%, var(--appColor) );
}

.kanban-column.has-color .kanban-title span {
    padding: 4px 8px;
}

.kanban-column.collapsed .kanban-header .kanban-title {
    display: flex;
    width: auto;
    height: auto;
    order: 2;
    padding-top: 8px;
    transform: rotate(180deg);
}
.kanban-column.collapsed .kanban-header .kanban-title span {
    padding: 0;
}
.kanban-column.collapsed .kanban-header .kanban-count {
    order: 1;
    border: none;
    background: none;
    transform: rotate(180deg);
}
.kanban-column.collapsed .kanban-header .kanban-actions {
    order: 3;
    /*padding: 0 0 12px 0;*/
}
/*.kanban-column.collapsed .kanban-actions > :not(.btn-collapse),*/
.kanban-column.collapsed .kanban-actions > *,
.kanban-column.collapsed .kanban-column-container > :not(.kanban-header) {
    display: none;
}
.kanban-column.collapsed .btn-collapse {
    /*pointer-events: 0;*/
    /*visibility: hidden;*/
}
.kanban-column.collapsed .kanban-actions::after {
    content: "\e0a0";
    display: inline-flex;
    justify-content: center;
    height: var(--btnHeight);
    min-height: var(--btnHeight);
    min-width: var(--btnWidth);
    align-items: center;
    font: normal normal normal 14px / 1 'Font Awesome 7 Pro';
    font-size: 11px;
    font-weight: 400;
    transform: rotate(135deg);
}

.kanban-header, .kanban-content, .kanban-footer, .kanban-summ, .kanban-divider {    
    padding: 8px;
}
.kanban-header {
    font-size: var(--textSize);
    color: var(--textColor);
    border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0px 0px;
}
.kanban-count {
    transition: none;
}
.kanban-actions {
    flex-shrink: 0;
}

.kanban-divider {
    position: relative;
    padding: 6px 0;
}
.kanban-divider::before {
    content: '';
    width: calc(100% - 16px);
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-top: 1px solid var(--borderColorMedium);
    z-index: 100;    
}
.kanban-content {
    display: flex;
    flex-direction: column;    
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 0;
}
.kanban-item:not(.is-dragging):hover::after,
.kanban-column.drop-target .kanban-column-container::after {
    content: '';
    width: calc(100%);
    height: calc(100%);
    top: 0;
    left: 0;
    border: 2px solid var(--focusBorderColor);
    border-radius: var(--inputBorderRadius);
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 0;
}

.kanban-placeholder {
    border: 1px dashed rgba(var(--eventColorRgba), 0.5);
    border-radius: var(--borderRadiusMedium);
    height: 50px;
    min-height: 50px;
}

@supports (selector(::-webkit-scrollbar)) {
    .kanban-content {
        scrollbar-gutter: stable;
        padding-right: 1px;
    }
}

/*
.kanban-content::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--color) 45%, var(--appWindowColor));
}
.kanban-content {
	scrollbar-color: color-mix(in srgb, var(--color) 45%, var(--appWindowColor)) transparent !important;
}

.kanban-content::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--color) 85%, var(--appWindowColor));
}
.kanban-content:hover {
	scrollbar-color: color-mix(in srgb, var(--color) 85%, var(--appWindowColor)) transparent !important;
}

.kanban-content:active {
	scrollbar-color: var(--color) transparent !important;
}
*/
.kanban-summ-chip button{
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.kanban-summ-chip:hover button{
    visibility: visible;
    opacity: 1;
    /*margin-left: auto;*/
}
.chip-label {    
    font-size: var(--textSmallerSize);
	max-width: 90px;
	width: 90px;
	display: flex;
}
.chip-label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 1;
	min-width: 0px;
}

.chip-value {    
    color: var(--textColor);
    font-weight: var(--textBold);
}

.kanban-summ {
    padding: 2px 8px 0 8px;
    color: var(--textColorLight);
}

.kanban-footer {
    justify-items: center;
    border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
}
.kanban-item {
    background-color: var(--templateInputBackground);
    border-radius: var(--borderRadiusMedium);
    cursor: pointer;
    display: flex;
    transition: transform ease-in-out 100ms;
    transition: box-shadow ease-in-out 100ms;
    position: relative;
    border: 1px solid var(--borderColorMedium);
    padding: 12px;
}
.kanban-item .card-field {
    grid-template-columns: fit-content(90px) minmax(0, 1fr);
}
.kanban-summ-chip .chip-label::after,
.kanban-item .field-label::after {
    content: ":";
    display: inline-block;
    margin-left: 0;
}
.kanban-item .field-label {
    display: flex; /* Změna na flex, aby ::after drželo u textu */
    overflow: hidden;
}
.kanban-item .field-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* zobrazenie / skrytie labelov */
.kanban-container:not(.show-labels) .kanban-item .field-label {
	display: none;
}
.kanban-container:not(.show-labels) .card-field {
	grid-template-columns: 1fr;
}
/* skrytie prazdnych hodnot */
.kanban-container.hide-empty .card-row.empty {
	display: none;
}

.rotate-45{
    transform: rotate(45deg);
}
.kanban-item.is-dragging {    
    border: 1px solid var(--borderColorMedium);
}
.kanban-item.is-dragging > * {
    opacity: 0.1;
}

.kanban-item .fld-lookup-value {
    color: var(--eventColor);
}
.kanban-item .field-label {
    color: var(--textColorLight);
    font-size: var(--textSmallSize);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    width: 90px;
}

.card-field {
    display: grid;
    grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
    align-items: baseline;      
    text-align: left;
    gap: 5px;
}

.carditem-buttons {
    position: absolute;
    right: 5px;
}
.carditem-buttons .dropdown-toggle::after {
    display: none;
}
.carditem-title {
    padding-right: 20px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carditem-title-row {
    align-items: baseline;
    margin-bottom: 7px;
    padding: 7px 15px;
    border-top-right-radius: var(--borderRadius);
    border-top-left-radius: var(--borderRadius);
}
.carditem-row {
    padding: 1px 0;
    display: flex;
    margin: 0 15px;
    column-gap: 16px;
    flex-wrap: wrap;
}
.carditem-row .carditem-value {
    position: relative;
    text-align: left;
    justify-content: center;
    align-items: baseline;
    white-space: nowrap;
    flex-shrink: 1;
    column-gap: 5px;
}
.carditem-row .carditem-value .field-copy {
    margin-left: 5px;
}
.carditem-row>div:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -7px;
    top: 0;
    width: 2px;
    height: 70%;
}
.tree ul {
    padding-left: 23px;
    margin-bottom: 0;
}
.tree>ul {
    padding-left: 0;
}
.tree>ul>li::before,
.tree>ul>li::after {
    border: 0;
}
.tree li {
    list-style-type: none;
    margin: 0;
    padding: 2px 0;
    position: relative;
}
.tree li::before,
.tree li::after {
    content: '';
    left: -15px;
    position: absolute;
    right: auto;
}
.tree li::before {
    border-left: 1px solid #999;
    height: 100%;
    top: 0;
    width: 1px;
}
.tree li::after {
    border-top: 1px solid #999;
    height: 20px;
    top: 14px;
    width: 15px;
}
.tree li:last-child::before {
    height: 15px;
}
.tree-node-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 5px;
    margin-top: -4px;
}
.tree-node-row:hover {
    background-color: var(--hotBackground);
    border-radius: var(--borderRadius);
}
.tree-node-row:hover .tree-node-btns {
    visibility: visible;
}
.tree-node-btns {
    visibility: hidden;
}
.tree-node-title {
    color: var(--textColor);
    font-weight: var(--textBold);
    padding-left: 5px;
}
.field-file.is-dragover,
.file-drop-area.is-dragover {
    outline-offset: -5px;
    background-color: var(--appWindowColor);
}
.file-drop-area,
.field-file.is-dragover {
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    outline: 1px dashed var(--eventColor);
    border-radius: var(--borderRadius);
}
.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    width: 100%;
    padding: 5px;
    color: var(--textColor);
    align-items: center;
    justify-content: center;
}
.file-drop-list {
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--appWindowColor);
    border-radius: var(--borderRadius);
    flex-grow: 1;
    box-shadow: var(--frameShadow);
    overflow: hidden;
    border: var(--frameBorder);
    flex-direction: column;
}
.file-drop-row,
.file-drop-row .file-drop-text {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    justify-content: space-between;
    width: 100%;
}
.file-drop-row.file-drop-row,
.file-drop-row .file-drop-text.file-drop-row {
    flex-direction: column;
}
.file-drop-row .file-drop-text span:first-child,
.file-drop-row .file-drop-text .file-drop-text span:first-child {
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-drop-row .progress,
.file-drop-row .file-drop-text .progress {
    height: 6px;
    width: 100%;
    margin-bottom: 4px;
    background: var(--hotBackground);
    border-radius: 30px;
}
.file-drop-row .progress .progress-bar,
.file-drop-row .file-drop-text .progress .progress-bar {
    background-color: var(--gramColor);
}
.choose-file-icon {
    flex-shrink: 0;
    padding: 8px 15px;
    font-size: larger;
    color: var(--eventColor);
}
.file-message {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(var(--textLightColor), 1);
}
.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}
.list-view {
    padding: 5px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    color: var(--textColor);
}
.list-view .list-item {
    min-height: 28px;
    gap: 10px;
    padding-left: 29px;
    margin: 0;
    cursor: default;
}
.list-view .ui-sortable .list-item {
    padding-left: 4px;
}
.list-view .ui-sortable .list-item .item-drag {
    visibility: hidden;
}
.list-view .ui-sortable .list-item:hover .item-drag {
    visibility: visible;
}
.list-view::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.list-view::-webkit-scrollbar-thumb {
    background-color: var(--templateScrollBarThumb);
    border-radius: var(--borderRadiusMedium);
    background-clip: padding-box;
    border: 2px solid transparent;
}
.list-view::-webkit-scrollbar-thumb:hover {
    background-color: var(--templateScrollBarThumbHover);
}
.list-view::-webkit-scrollbar-thumb:active {
    background-color: var(--templateScrollBarThumbActive);
}
.list-view::-webkit-scrollbar-corner {
    background: transparent;
}
.manage-columns-container {
    margin-top: 5px;
    max-height: calc(100% - 35px);
    width: 100%
}
html[data-theme='dark'] .manage-columns-container {
    background-color: rgba(var(--blackOrWhiteColor), 0.05);
}
.manage-columns-content .list-item{
    align-items: center;
}
.ui-sortable-handle:hover {
    cursor: ns-resize !important;
}
/*.detail-view .ui-sortable-handle:hover {
    cursor: auto !important;
}*/
.detail-view .list-item.ui-sortable-handle:hover,
.detail-view .field-row-customize.ui-sortable-handle:hover,
.detail-view .ui-sortable-handle:hover .field-row-customize,
.detail-view .ui-sortable-handle:hover .section-customize {
    cursor: move !important;
}
.customize-scroll .field-row-customize:hover,
.customize-scroll .ui-sortable-handle:hover {
    cursor: move !important;
}
.btn.disabled,
.btn:disabled {
    opacity: 1;
}
.dropdown-item.disabled span,
.dropdown-item:disabled input:disabled span,
.field-lookup>input:disabled+.input-left-icon {
    color: var(--templateInputDisabledColor);
}
input:disabled,
textarea:disabled,
.disabled:not(div),
.disabled:hover,
.disabled>div,
.bootstrap-select.disabled,
.bootstrap-select>.disabled,
.bootstrap-select:hover.disabled,
.bootstrap-select:hover>.disabled {
    cursor: default;
    background-color: var(--templateInputDisabledBackground);
    border-color: var(--templateInputDisabledBorder);
    color: var(--templateInputDisabledColor);
    border-radius: var(--inputBorderRadius);
    opacity: .85;
}
.disabled.btn-tool {
    border-radius: var(--borderRadiusBig);
}
.bootstrap-select.disabled{
    box-shadow: inset 0 1px 2px rgba(33, 36, 44, 0.08) !important;
}
.disabled .input-icon .gbtn.gbtn-input,
.gbtn.disabled,
.gbtn:disabled {
    opacity: .65;
    cursor: unset;
}
.disabled .field-row .bootstrap-select .dropdown-toggle::after,
.input-container .bootstrap-select .dropdown-toggle::after,
.disabled .input-icon .gbtn.gbtn-input,
.gbtn.disabled span::before,
.gbtn:disabled span::before {
    color: rgba(var(--textLightColor), 1);
}
.disabled .input-icon .gbtn.gbtn-input,
.gbtn:not(.gbtn-primary):not(.gbtn-danger)[disabled],
.gbtn.disabled:hover span,
.gbtn:disabled:hover span,
.gbtn.disabled:not(.i-btn):not(.gbtn-primary):not(.gbtn-danger):hover,
.gbtn:disabled:not(.gbtn-primary):not(.gbtn-danger):hover {
    background: none !important;
    cursor: default;
}
.flat-btn:disabled::before{
    content: none;
}
.disabled.dropdown-toggle {
    background: transparent !important;
    border-color: var(--templateInputDisabledBorder) !important;
}
.gbtn[disabled]:focus,
.gbtn.disabled:focus,
.gbtn:disabled:focus {
    box-shadow: unset;
    border-color: transparent;
}
.btn-group .gbtn.disabled,
.btn-group .gbtn.disabled:not(.gbtn-primary):not(.gbtn-danger):hover,
.btn-group .gbtn.disabled:focus,
.btn-group .gbtn[disabled],
.btn-group .gbtn[disabled]:hover,
.btn-group .gbtn[disabled]:focus {
    border-color: var(--templateInputDisabledBorder) !important;
    pointer-events: none;
}
.detail-view-buttons .btn-group .gbtn.disabled,
.detail-view-buttons .btn-group .gbtn.disabled * {
    cursor: auto !important;
    pointer-events: none;
}
.opt-badge {
    --opt-badge-bg: color-mix(in srgb, var(--color) 20%, transparent);
    --opt-badge-text: var(--textColor);
    --opt-badge-border: color-mix(in srgb, var(--color) 20%, transparent);
    border: 1px solid var(--opt-badge-border);
    border-radius: 9999px;
    background: var(--opt-badge-bg);
}
.opt-badge > span {    
    font-weight: 600;
    font-size: 11px;
	color: color-mix(in srgb, var(--color) 72%, var(--textColor));
}
.opt-icon {
    padding: 4px 6px !important;
    border: initial !important;
    border-radius: var(--borderRadius) !important;
}
.badge-secondary {
    background-color: rgba(var(--blackOrWhiteColor), 0.15);
    color: var(--textColor);
    font-weight: 500;
}
.rounded-pill {
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    background-color: var(--appWindowColor);
    padding: 3px 6px;
}
.toast.fade:not(.show) {
    opacity: 1;
}
.toast.fade {
    transition: none;
}
.toast{
    background-color: var(--notifBackgroundColor);
    color: var(--notifTextColor);
    border-radius: var(--notifBorderRadius);
    font-weight: 400;
}
.toast.success {
    background-color: #cff2bf;
    color: #376800;
    border:1px solid #37680050;
}
.toast.alert {
    background-color: #fddbde;
    color: #dd0f21;
    border: 1px solid #dd0f2150;
    padding: inherit;
}
html[data-device='tablet']:root,
html[data-device='phone']:root {
    --textSize: 16px;
    --textSmallSize: 12px;
    --textSmallerSize: 10px;
    --appSideTextSize: var(--textSize);
    --templateInputHeight: 52px;
    scroll-behavior: smooth;
}
html[data-device='tablet'] textarea,
html[data-device='phone'] textarea {
    min-height: 100px;
}
html[data-device='tablet'],
html[data-device='phone'] {
    --inputBorderRadius: 8px; 
    body {
        overscroll-behavior: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        touch-action: none;
    }
    html,
    body {
        text-size-adjust: none;
        font-size-adjust: none;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        font-size: 100%;
        transform: scale(1);
        zoom: 1;
    }
    a,
    a:hover {
        text-decoration: none;
        color: var(--textColor);
    }
    .table td, 
    .table th {
        font-size: calc(var(--textSize) - 2px);
    }
    .fc .fc-daygrid-event,
    .fc .fc-timegrid-event,
    .fc .fc-timeline-event {
        font-size: var(--textSmallSize);
    }
    .fc-timegrid-event:hover .fc-event-time::before{
        display: none;
    }
    .app-side {
        width: 260px;
        max-width: 260px;
    }
    .app-side-backdrop{
        opacity: inherit; 
        background-color: var(--appSidaBackdropColor);
    }
    .app-side-mobile.toggled {
        top: 20px;
        height: calc(100% - 30px);
        border-top-right-radius: var(--borderRadiusBig);
        border-bottom-right-radius: var(--borderRadiusBig);
        padding-top: 16px;
        padding-bottom: 16px;
        background: var(--templateSideBackground);
    }
    .app-content {
        padding: 0 8px 32px 8px;
        margin: 0;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow: visible;
        overflow-x: hidden;
        overscroll-behavior: none;   
        flex-direction: column;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
    .app-content.app-calendar{
        padding: 0 0 50px 0;
    }
    .app-main.d-none + .app-main .app-content {
        padding-right: 0;
        padding-left: 0;
    }
    .app-content::-webkit-scrollbar {
        display: none;
    }
    .app-content:has(.settings-container.fixed){
        padding: 0;
    }
    .settings-container.fixed {
        height: 100%;
    }
    .settings-container.fixed .settings-header{
        display: none;
    }
    .settings-container.fixed .settings-main{
        height: calc(100% - 40px);
    }
    .settings-container.fixed .settings-main .settings-card-layout{
        height: calc(100% + 40px);
    }
    .app-footer {
        padding: 12px 0 0;
        z-index: 100;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
        justify-content: end;
        max-height: 150px;
    }
    .app-footer-notif .toast {
        max-width: 100%;
        width: auto;
        height: auto;
        min-height: 40px;
        max-height: none;
        border-radius: var(--borderRadius);
        align-content: center;        
        flex: 0;
        flex-basis: auto;
        margin-bottom: 1rem;
    }
    .app-footer-notif .toast.show:first-of-type {
        margin-top: 0;
    }
    .app-footer.d-none {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
        max-height: 0;
        display: flex !important;
    }
    .app-footer:not(.menu) {
        min-height: 120px;
    }
    .app-footer-buttons,
    .app-footer-notif{
        padding-left: 8px;
        padding-right: 8px;
    }
    .app-footer-buttons{
        max-height: 90px;
        flex: 0 0 auto;
        white-space: nowrap;
        transition: opacity 0.15s ease, visibility 0.15s ease, max-height 0.15s ease;
    } 
    .app-footer:not(.menu) .app-footer-buttons{
        height: 90px;
    }
    .app-footer-menu {
        display: flex;
        border-top: 1px solid var(--borderLightColor);
        align-items: center;
        width: 100%;
        pointer-events: all;
        background-color: var(--appColor);
        max-height: 60px;
        transition: max-height 0.25s ease;
    }
    .app-footer .app-footer-menu{
        max-height: calc(60px + env(safe-area-inset-bottom,20px));
        padding-bottom: calc(env(safe-area-inset-bottom, 10px) - 20px);
    }
    .app-footer-buttons.d-none{
        opacity: 0;
        transition: opacity 0.15s ease, visibility 0.15s ease, max-height 0.15s ease;
    }
    .app-footer-item.selected {
        color: var(--eventColor);
    }
    /* polozka, ktoru uz nevieme otvorit (zmazany pohlad, odobrate pravo) -
       zostava klikatelna, klik ponukne vyber inej */
    .app-footer-item.disabled {
        opacity: 0.5;
    }
    .app-footer-buttons.d-none,
    .app-footer-menu.d-none{
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        padding-bottom: 0;
        padding-top: 0;
        margin-bottom: 0;
        display: flex !important;
        transition: all 0.3s ease;
    }
    .app-footer-menu.d-none .app-footer-item, 
    .app-footer-menu.d-none .app-footer-item span {
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        transition: max-height 0.25s ease, visibility 0.25s ease, opacity 0.3s ease;
    }
    .app-footer-item {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
        max-height: 60px;
        padding-top: 4px;
        height: 56px;
        height: 60px;
        flex: 1; 
        text-align: center;
        flex-direction: column;
        transition: max-height 0.25s ease, visibility 0.25s ease, opacity 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .app-footer-item span{
        max-height: 20px;
        visibility: visible;
        opacity: 1;
    }
    .app-footer-menu .text {
        font-size: var(--textSmallSize);
        white-space: nowrap;
        max-width: 100%;
        padding: 0 2px;
        align-self: center;
        display: flex; 
        overflow: hidden;
    }
    .app-footer-menu span:not(.text) {
        min-height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .app-footer-menu .icon:before{
        font-size: calc(var(--textSize) + 2px);
    }
    @media (min-width: 576px) {
        .app-footer:not(.ios) .app-footer-menu{
            max-height: 42px;
            padding-top: 0;
        }
        .app-footer:not(.ios) .app-footer-menu.d-none{
            max-height: 0;
        }
        .app-footer-menu .app-footer-item {
            flex-direction: row;
            gap: 5px;
            max-height: 42px;
            height: 42px;
        }
        .tablet .app-footer.ios .app-footer-menu .app-footer-item{
            margin-bottom: 14px;
        }
    }
    .has-left-icon {
        padding-left: calc(var(--inputBorderRadius) + 30px);
    }
    .flat-btn-icon,
    .header-menu button .flat-btn-icon {
        font-size: var(--textSize) !important;
    }
    .input-left-icon{
        min-width: auto;
        top: auto;
        bottom: 10px;
        height: auto;
        left: calc(var(--inputBorderRadius) + 5px);
        border-right: none;
    }
    .input-icon{
        top: 50%;
        transform: translateY(-50%);
        width: min-content;
        height: calc(var(--inputBorderRadius)* 2);
        right: calc(var(--inputBorderRadius) + 5px);
        display: flex;
        align-items: baseline;
    }
    .input-icon .gbtn.gbtn-input.d-none {
        display: flex !important;
        visibility: hidden;
    }
    
    .mobile-app-title, 
    .mobile-app-maintitle, 
    .mobile-app-subtitle {
        grid-column: 1;
        grid-row: 1;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .app-header {
        padding: 4px 2px;
        background-color: var(--appColor);
        border: none;
        box-shadow: none;
        gap: 5px;
        flex: 0;
        position: sticky;
        align-items: center;
        min-height: 56px;
    }
    .app-header.ios {
        padding: 8px 0;
    }
    .app-header.ios > button,
    .app-header.ios .modal-buttons button{
        font-weight: normal;
    }
    .app-header.ios .header-menu > button,
    .app-header.ios .header-left > button,
    .app-header.ios .modal-buttons > button {
        width: auto;
        padding: 0.75rem 1rem;
    }
    .item-match {
        padding: 0;
        background-color: initial;
        color: var(--eventColor);
    }
    .app-header.ios button.icon-only, .app-header.ios button.text-only {
        color: #007bfe !important;
        font-weight: normal;
    }
    .app-header.selected {
        background-color: var(--appHeaderSelectedColor);
    }
    .app-header-down {
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
        background-color: var(--appHeaderDownColor);
    }
    .app-header .mobile-app-maintitle,
    .app-header .mobile-app-subtitle {
        transition: opacity 0.2s ease;
    }
    .app-header .mobile-app-maintitle {
        opacity: 0;
    }
    .app-header-down.alttitle .mobile-app-maintitle {
        opacity: 1;
    }
    .app-header-down.alttitle .mobile-app-subtitle {
        opacity: 0;
    }
    .cardlist-item-edit {
        background-color: initial;
        border-radius: initial;
        padding: initial;        
        border: initial;
    }
    .main-search-result {
        width: 100%;
    }
    .main-search-preview {
        display: none;
    }
    .header-left {
        padding-right: 0;
    }
    .app-side.toggled + .app-main .header-left button::before{
        transition: width .1s ease .3s, height .1s ease .3s;
        width: 55%;
        height: 55%;
    }
    .header-main {
        display: grid;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        height: 100%;
        align-items: center;
    }
    .header-main .view-search-input {
        height: 100%;
        padding: 3.2px 0;
        background: inherit;
        box-shadow: none;
    }
    .header-main .mobile-app-title:has(.view-search-input-container){
        height: 100%;
        margin-left: 4px;
    }
    .header-main .view-search-input-container {
        position: relative;
        height: 100%;
    }
    .ios .header-main .view-search-input-container input {
        padding-right: 2rem;
        padding-left: 2rem;
        background-color: var(--templateSearchInputBackground);
    }
    .app-header:not(.ios) .gbtn-primary {
        font-weight: var(--textBold);
        background: transparent !important;
        border: none !important;
        color: var(--textColor) !important;
        padding: 0.75rem !important;
        width: auto;
    }
    .header-main .view-search-input-container .input-left-icon,
    .header-main .view-search-input-container .input-icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .header-main .view-search-input-container .input-icon{
        right: 0;
    }
    .header-main .view-search-input-container .input-icon button{
        right: var(--inputBorderRadius);
        height: min-content;
        min-height: min-content;
        width: min-content;
        padding: 0;
        min-width: calc(var(--textSize) * 1.5);
        justify-content: end;
        align-items: center;
        color: var(--disabledTextColor) !important;
    }
    .header-main .view-search-input-container .input-left-icon{
        left: var(--inputBorderRadius);
        color: var(--disabledTextColor) !important;
    }
    .header-menu {
        flex: 0;
        display: flex;
        align-self: baseline;
        align-items: end;
        align-self: center;
        padding: 0;
        position: relative;
    }
    .ios .header-menu {
        padding-right: 2px;
    }
    .ios .header-menu .fa::before,
    .ios .header-menu .fas::before{
        font-size: calc(var(--textSize) + 4px) !important;
    }
    .ios .header-menu > button{
        padding: 0.75rem !important;
    }
    .header-left button,
    .header-menu button,
    .header-menu .btn-tool {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        min-height: 3rem;
    }
    .header-left button,
    .header-menu button:not(.dropdown-menu button),
    .header-menu .btn-tool:not(.dropdown-menu .btn-tool) {
        border-radius: 100% !important;
    }
    .header-menu button{
        width: 100%;
    }
    .header-search {
        min-width: 200px;
        font-size: 100%;
    }
    .header-main .main-auto-list {
        left: -37px;
        width: calc(100vw - 30px);
        min-width: calc(100vw - 30px);
    }
    .header-menu .spinner-border {
        position: absolute;
        top: calc(50% - 8px); 
        left: -2rem;
    }
    .loader-container{
        justify-content: center;
    }
    .settings-main {
        padding: 0 !important;       
        min-width: initial;
        max-width: initial;
        margin-bottom: 0;
        overflow: initial;
    }
    .settings-main .settings-header {
        padding-left: 12px;
        margin-bottom: 0;
        font-size: calc(var(--textSize) + 2px);
    }
    .settings-desc:not(:empty) {
        padding: 16px 12px 0;
        font-size: calc(var(--textSize) - 2px);
    }
    .layout-content.settings-card-layout{
        margin-bottom: 0;
    }
    #autocomplete-list.lookup-dropdown::before,
    .main-auto-list::before,
    .view-filter-dialog.dropdown-menu.show::before,
    .search-box .main-auto-list::before,
    .header-main .main-auto-list::before {
        left: 50%;
    }
    .wf-body,
    .wf-desctiption,
    .wf-header-text,
    .wf-switch-item-label {
        font-size: calc(var(--textSize) - 2px);
    }
    .search-box .list-content {
        flex-wrap: wrap;
    }
    .search-box .list-item div {
        flex-grow: 1;
        flex-shrink: 1;
    }
    .compact-table-title {
        writing-mode: vertical-rl;
        transform: rotate(180deg);       
        display: inline-block;
        overflow: visible;
    }
    /* na mobile skroluje stranka (pull-to-refresh), telo si scroll neberie */
    .dash-container {
        height: auto;
        display: block;
    }
    .dash-body {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 8px 0;
        flex: none;
        overflow-y: visible;
    }
    .dash-body .dash-item {
        min-height: 400px;
        max-height: 500px;
        margin-right: 0;
        border-radius: var(--phoneBorderRadiusBig);
        border: none;
        box-shadow: none;
    }
    .dash-body .dash-item:last-child {
        margin-bottom: 0;
    }
    .dash-chart-title {
        font-size: var(--textSmallerSize);
    }
    .manage-columns-container {
        margin-top: 40px;    
    }
    .manage-columns-content .list-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 2rem;
    }
    .manage-columns-content.ui-sortable .list-item {
        padding-left: 4px;
    }
    .list-item-search-icon {
        font-size: var(--textSmallSize);
    }
    .list-item .list-field-name,
    .list-item .list-select-value {
        padding: 0.5rem;
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
    }
    .list-item:hover,
    .list-item:hover .list-select-value,
    .list-item .list-select-value:hover{
        background-color: initial !important;
    }
    .app-calendar {
        margin-bottom: 10px;
    }
    .app-calendar .view-body {
        height: 100%;
        min-height: unset;
    }
    .app-side-mobile .side-header {
        margin: 0 10px 20px 10px;
        height: 100px;
        background: no-repeat;
        box-shadow: none;
        border-right: none;
    }
    .side-header-organization {
        padding-left: 0;
    }
    .app-side-mobile .side-header .user {
        font-size: var(--textSize);
    }
    .app-side-mobile .side-header button {
        padding-left: 10px;
        margin-left: 0;
    }
    .side-header-logo img {
        height: 32px !important;
    }
    .side-section-title {
        font-size: 12px;
        color: rgb(var(--textLightColor), 1);
        margin-bottom: 0;
        margin-left: 16px;
    }
    .view-container {
        min-height: -webkit-min-content;
        min-height: min-content;
        background-color: var(--appWindowColorLight);
    }
    .modal-size-full .view-container {
        height: calc(100% - 100px);
    }
    .view-title {
        font-size: calc(var(--textSize) + 2px);
        line-height: calc(var(--textSize) + 4px);
        padding-top: 0;
        padding-bottom: 0;
    }
    .view-header nav {
        padding-bottom: 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--borderColor);
    }   
    .view-header-left-top {
        position: relative;
        line-height: 1.25;
    }
    .dash-container .view-header .view-header-left-top,
    .view-container .view-header-left-top {
        justify-content: end;
    }
    .view-container .view-header-left-top sup{
        top: 5px;
    }
    .view-header .view-header-left-top .view-btns {
        display: flex;
    }
    .view-header .view-header-left-top .btn-tool {
        margin-right: 0;
    }
    .view-calendar.view-container .view-header-left-top{
        justify-content: center;
    }
    .view-header-left-top .dropdown {
        flex-basis: 100%;
        margin-right: 0;
    }
    .view-selector.dropdown-toggle {
        line-height: calc(var(--textSize) + 4px);
        font-size: calc(var(--textSize) + 2px);
        gap: 4px;
        align-items: center;
    }
    .view-header-left-top .dropdown .dropdown-toggle::after{
        padding: 0 4px;
    }
    .view-selector.dropdown-toggle,
    .view-selector:hover, 
    .show>.dropdown-toggle.view-selector,
    .show>.dropdown-toggle.view-selector:hover {
        background: none;
        box-shadow: none;
    }
    .dropdown-menu a,
    .dropdown-menu li a.dropdown-item {
        padding: 10px 30px
    }
    .dropdown-item {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        padding-left: 30px;
        gap: 12px;
        align-items: center;
        min-height: 2.5rem;
        height: 2.5rem;
    }
    .dropdown-item span:not(.dropdown-item-icon):not(.chk-switch):not(.chk-switch span){
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dropdown-item .chk-switch{
        width: 48px;
        height: 24px;
        margin: 0;
    }
    .dropdown-divider {
        margin-top: 0.7rem;
        margin-bottom: 0.7rem;
        border-top-color: var(--borderDividerColor);
    }
    .lookup-dropdown .related-compact-row {
        padding-top: 7px;
        padding-bottom: 7px;
        max-height: initial;
    }
    .side-header .dropdown-toggle>.dropdown-menu {
        left: 0px !important
    }
    .side-header .dropdown-toggle>.dropdown-menu[x-placement="bottom-start"]::before {
        left: 16px;
    }
    .side-header-user>div {
        max-width: 165px
    }
    .side-item {
        padding: 10px 0 10px 10px;
    }
    .side-item:hover{
        background-color: transparent;
    }
    .side-item button {
        display: none;
    }
    .side-item .side-item-icon {
        margin-right: 8px;
    }
    .side-item .side-item-icon span{
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: inherit !important;
        padding: 0;
    }
    .side-item .side-item-text {
        font-weight: 500;
        margin-left: 0;
    }
    .side-item div.side-item-add {
        display: none;
    }
    .section {
        gap: 10px;
    }
    .section-content {
        flex-direction: column !important;
        /* Edit form on phone/tablet: field width is driven ONLY by the screen width, never by
           the desktop ColSpan (the renderer does not emit grid-column spans on mobile).
           Narrow screen = one field per row, wide enough (tablet portrait, landscape, ...) =
           exactly two equal halves - never three, never a content-sized column. */
        grid-template-columns: 1fr;
    }
    .form-page .section-content > .field-wrapper {
        grid-column: auto;
        min-width: 0;
    }
    @media (min-width: 600px) {
        .form-page .section-content {
            grid-template-columns: repeat(2, 1fr);
        }
        /* field that took the whole row on desktop keeps the whole row here too */
        .form-page .section-content > .field-wrapper.full-row {
            grid-column: 1 / -1;
        }
    }
    .settings-side {
        width: 180px;
    }
    .settings-side-item a {
        padding-top: 17px;
        padding-bottom: 17px;
        font-size: var(--textSize);
    }
    .settings-table-list tr td {
        padding: 0.75rem;
    }
    .settings-table-list tr.grid-row-second td {
        padding: 0;
    }
    .settings-table-list.grid{
        margin-left: 8px;
        width: calc(100% - 8px);
    }
    .settings-table-list tr.grid-row-second table td div {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .settings-table-list.table.grid tr th,
    .settings-table-list.table.grid tr td {
        background-color: var(--templateViewBackground);
    }
    .settings-table-list.table.grid tr th {
        top: -5px;
        padding: 20px 10px 5px 10px;
    }
    .settings-table-list.table tbody tr:hover:not(.grid-group, .grid-row-second) td:first-child::before,
    .settings-table-list.table tbody tr.grid-row-second table tr:hover:not(.grid-group) td:first-child::before {
        content: none
    }
    .settings-table-list.table tr td:first-child{
        padding-left: 0;
    }
    .settings-table-list tr.grid-row-second td table.settings-table-list tr td:first-child {
        padding-left: calc(.75rem + 14px);
    }
    .settings-main .related-item-body{
        margin-left: 60px;
    }
    .tree-node-row {
        padding-top: 5px;
        padding-bottom: 5px
    }
    .tree li .tree-node-row .gbtn.flat-btn {
        padding: 0.75rem;
    }
    .tree li .tree-node-btns .gbtn.flat-btn {
        padding: 0.75rem;
    }
    .tree li:last-child::before {
        height: 18px;
    }
    .tree li::after {
        top: 18px;
    }
    .grid-row-title{
        display: flex;
        gap: 5px;
    }
    .grid-row-title-caption span {
        white-space: break-spaces !important;
    }
    .grid-row-title-caption span,
    .grid-row-title span.fa,
    .grid-row-second span,
    .grid-row-second span.fa::before{
        font-size: calc(var(--textSize) - 4px);
    }
    .settings-table-list tr.grid-row-expandable td .grid-row-title::after {
        content: none;
    }
    .settings-table-list tr.grid-row-expandable td .grid-row-title-caption span::after {
        content: "\f107";
        color: var(--textColor);
        font: normal normal normal 15px / 1 'Font Awesome 7 Pro';
        margin-left: 5px;
    }
    .settings-table-list tr.grid-row-expandable.grid-row-expanded td .grid-row-title::after {
        content: none;
    }
    .settings-table-list tr.grid-row-expandable.grid-row-expanded td .grid-row-title-caption span::after {
        content: "\f106";
    }
    .cardlist-section-title{
        display: flex;
        margin-bottom: 4px;
        margin-top: 24px;
        padding-left: 12px;
        font-size: calc(var(--textSize) - 2px);
        align-items: center;
        padding: 4px 10px;
        gap: 10px;
        align-items: center;
        width: fit-content;
    }
    .related-content-table .cardlist-section-title {
        background: var(--groupBackground);
        border-radius: var(--borderRadiusBig);
    }
    .cardlist-section:first-child .cardlist-section-title {
        margin-top: 0;
    }
    .grid-group-value {
        font-weight: normal;
        display: flex;
    }
    .grid-group-count{
        display: flex;
        align-items: center;
        min-width: 20px;
        min-height: 20px;
        justify-content: center;        
        border-radius: 999px;
        padding: 0 4px;
        border: 1px solid var(--borderColor);
        background: var(--appWindowColor);
        font-size: calc(var(--textSize) - 4px);
        line-height: 1;
    }
    .cardlist {
        border-radius: var(--phoneBorderRadiusBig);
    }
    .cardlist-item-new,    
    .cardlist-item {        
        max-width: 100%;
        border: none;
        padding: 0;
        min-height: unset;
        line-height: 1.5;
        position: relative;
        overflow: hidden;
        background: transparent;
    }
    .cardlist-item a,
    .cardlist-item a:hover {
        pointer-events:none
    }
    .cardlist-item-content-rows{
        column-gap: 16px;
    }
    .cardlist-item-content-rows *:not(.field-option span){
        color: rgba(var(--textLightColor), 1);
    }
    .cardlist-item:before {
        border-bottom: 1px solid var(--borderDividerColor);
        content: "";
        display: block;
        width: calc(100% - 16px);
        position: absolute;
        z-index: 100;
        bottom: 0;
        left: 8px;
    }
    .cardlist-item:last-child:before {
        border-bottom:none;
    }
    .cardlist-item.arrow::after{
        content: "\f054";
        font: normal normal normal var(--textSize)/1 'Font Awesome 7 Pro';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;        
        color: rgba(var(--textLightColor), .3);
    }
    .cardlist-item.noborder:before {       
        border-bottom: initial;
    }
    .cardlist-item:hover,
    .cardlist-item-new:hover {
        background-color: var(--appWindowColor);
        background-color: var(--appColor);
    }
    .cardlist-item.selected,
    .cardlist-item.selected  .cardlist-item-content{
        background-color: var(--appHeaderSelectedColor);
    }
    .cardlist-item-desc{
        background-color: var(--appWindowColor);
        height: 100%;
        z-index: 1;
    }
    .cardlist-item-icon>span:not(.chk-switch) {
        padding: 3px;
        max-width: var(--btnWidth);
        max-height: var(--btnHeight);
        height: var(--btnHeight);
        width: var(--btnWidth);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 18px;
        background-color: rgba(var(--blackOrWhiteColor), 0.055);
    }
    .cardlist-item.selected .cardlist-item-icon>span:not(.chk-switch) {
        background-color: rgba(var(--blackOrWhiteColor), 0.05);
    }
    .cardlist-item-icon>div {
        margin: 0;
    }
    .cardlist-item-content {
        padding: 10px 6px;
        z-index: 1;
        gap: 8px;
        background-color: var(--appWindowColor);
        height: 100%;
        min-height: 74px;
    }
    .settings-container .cardlist-item-content,
    .view-container .cardlist-item-content{
        padding: 10px 12px;
    }
    .cardlist-item-content-title{
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
    }
    .cardlist-item-content-title,
    .cardlist-item-value{
        font-size: calc(var(--textSize) - 2px);
    }
    .cardlist-item-icon:not(.d-none)+.cardlist-item-content {
        padding-left: 16px;
        margin: 0;
    }
    .cardlist-item.arrow .cardlist-item-content {
        padding-right: 32px;
    }
    .cardlist-item-buttons {
        position: absolute;
        right: 0;
        background-color: var(--appColor);
        height: 100%;
        padding-left: 8px;
        padding-right: 12px;
        z-index: 0;
        gap: 16px;
    }
    .layout-section-content .cardlist-item-buttons {
        background-color: var(--appWindowColor);
    }
    .cardlist-item-buttons.left {
        left: 0;
        right:  initial;
        padding-left: 1px;
        gap: 2px;
    } 
    .right button.gbtn,   
    .left button.gbtn{
        height: 100%;
        border-radius: initial !important;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: none !important;
        max-width: 110px;
        min-width: 80px;
    }
    .left .flat-btn-lbl,
    .right .flat-btn-lbl {
        font-size: var(--textSmallerSize);
        white-space: normal;
    }
    .cardlist-item-buttons.left .flat-btn-icon,
    .cardlist-item-buttons.right .flat-btn-icon {
        position: absolute;
        top: calc(50% - 16px);
        transform: translateX(-50%);
        left: 50%;
        align-items: baseline;
    }
    .cardlist-item-buttons.left .flat-btn-lbl,
    .cardlist-item-buttons.right .flat-btn-lbl {
        position: absolute;
        top: calc(50% + 6px);
        transform: translateX(-50%);
        left: 50%;
        min-width: 80px;
        padding: 0 calc(var(--phoneBorderRadiusBig) / 2);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .left  button.gbtn,
    .right button.gbtn {
        padding-right: calc(var(--phoneBorderRadiusBig) / 2) !important;
        padding-left: calc(var(--phoneBorderRadiusBig) / 2) !important;
    }
    .left  button.gbtn:last-child,
    .right button.gbtn:last-child{
        height: 100%;
        border-top-right-radius: var(--phoneBorderRadiusBig) !important;
        border-bottom-right-radius: var(--phoneBorderRadiusBig) !important;
        padding-right: var(--phoneBorderRadiusBig) !important;
    }
    .left  button.gbtn:first-child,
    .right button.gbtn:first-child{
        height: 100%;        
        border-top-left-radius: var(--phoneBorderRadiusBig) !important;
        border-bottom-left-radius: var(--phoneBorderRadiusBig) !important;
        padding-left: var(--phoneBorderRadiusBig) !important;
    }
    .cardlist-item-buttons.right {
        right: 0;
        left: initial;
        padding-right: 1px;
        gap: 2px;
    }
    .right button.delete{
        background-color: var(--redColor) !important;
    }
    .cardlist-item-row.drag {
        background-color: transparent !important;
        position: relative;
    }
    .cardlist-item-row.left.drag::before,
    .cardlist-item-row.right.drag::before,
    .cardlist-item-row.left.drag::after,
    .cardlist-item-row.right.drag::after {
        content: " ";
        position: absolute;
        height: calc(var(--phoneBorderRadiusBig) * 2);
        width: 80px;
        background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: top left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    .layout-section-content .cardlist-item-row.left.drag::before,
    .layout-section-content .cardlist-item-row.right.drag::before,
    .layout-section-content .cardlist-item-row.left.drag::after,
    .layout-section-content .cardlist-item-row.right.drag::after {
        background: -webkit-radial-gradient(0 100%, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appWindowColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: top left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    .cardlist-item-row.left.drag::before {  
        left: calc(-1 * calc(var(--phoneBorderRadiusBig) + 8px));
        top: 0;
    }
    .cardlist-item-row.right.drag::before {
        background: -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: top right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        right: calc(-1 * calc(var(--phoneBorderRadiusBig) + 8px));
        top: 0;
    }
    .layout-section-content .cardlist-item-row.right.drag::before{
        background: -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appWindowColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: top right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    .cardlist-item-row.left.drag::after {
        background: -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        left: calc(-1 * calc(var(--phoneBorderRadiusBig) + 8px));
        bottom: 0;
    }
    .layout-section-content .cardlist-item-row.left.drag::after{
        background: -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appWindowColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    .cardlist-item-row.right.drag::after {
        background: -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        right: calc(-1 * calc(var(--phoneBorderRadiusBig) + 8px));
        bottom: 0;
    }
    .layout-section-content .cardlist-item-row.right.drag::after{
        background: -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) var(--phoneBorderRadiusBig), var(--appWindowColor) calc(var(--phoneBorderRadiusBig) + 1px));
        background-position: bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    .drag .cardlist-item-content{
        border-radius: var(--phoneBorderRadiusBig);
    }
    .drag .cardlist-item-desc {
        border-top-left-radius: var(--phoneBorderRadiusBig);
        border-bottom-left-radius: var(--phoneBorderRadiusBig);
    }
    .selected .cardlist-item-desc,
    .selected .cardlist-item-row .cardlist-item-icon,
    .selected .cardlist-item-content {
        background-color: var(--appHeaderSelectedColor) !important;
    }
    .cardlist-item-row.left .cardlist-item-desc:has(.cardlist-item-icon:not(.d-none))~.cardlist-item-content {
        border-radius: 0;
    }
    .cardlist-item-row.right .cardlist-item-desc:has(.cardlist-item-icon:not(.d-none))~.cardlist-item-content {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .right.drag .cardlist-item-content:before,
    .left.drag .cardlist-item-content:before, 
    .right.drag .cardlist-item-desc:before,
    .left.drag .cardlist-item-desc:before{
        content: " ";
        position: absolute;
        height: 100%;
        width: 8px;
        background: var(--appColor);
        top: 0;
        pointer-events: none;
    }
    .layout-section-content .right.drag .cardlist-item-content:before,
    .layout-section-content .left.drag .cardlist-item-content:before,
    .layout-section-content .right.drag .cardlist-item-desc:before,
    .layout-section-content .left.drag .cardlist-item-desc:before{
        background: var(--appWindowColor);
    }
    .left.drag .cardlist-item-content:before,
    .left.drag .cardlist-item-desc:before{
        left: -8px;
    }
    .right.drag .cardlist-item-content:before,
    .right.drag .cardlist-item-desc:before {
        right: -8px;
    }
    .cardlist-item.show-buttons .cardlist-item-buttons {
        right: 0;
    }
    .cardlist-item-buttons button {
        border-radius: 50% !important;
        background: #007aff !important;
    }
    .cardlist-item-buttons button,
    .cardlist-item-buttons button.flat-btn:hover {
        color: white !important;
    }
    .cardlist-item-buttons button.gbtn span+span {
        margin: 0;
    }
    .layout-related button.flat-btn.gbtn{
        display: flex;
    }
    @media (min-width: 993px) {
        .cardlist-item:before {
            border-bottom: none;
        }
        .layout-section-content:not(.layout-label-left):has(.layout-component-field){
            gap: 6px;
            position: relative;
            width: 100%;
        }
    }
    @media (max-width: 992px) {
        .cardlist {
            box-shadow: none;
            gap: 8px;
        }
        .cardlist-item {
            border-radius: var(--phoneBorderRadiusBig);
        }
        .cardlist-item:before {
            border-bottom: none;
        }
        .related-header{
            margin-bottom: 4px;
        }
        .layout-section-content:not(.layout-label-left):has(.layout-component-field){
            grid-template-columns: 1fr 1fr 1fr;
            gap: 6px;
            position: relative;
            margin: 0;
            border: none;
            background: transparent;
        }
        .layout-component{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .layout-component.left-side{
            padding-right:3px;
        }
        .layout-component.right-side{
            padding-left:3px;
        }
        .layout-section-content:not(.layout-label-left) .layout-component-field{
            padding-bottom: 8px;
            padding-top: 8px;
        }
        .layout-component-field.fullwidth:last-of-type,
        .layout-section-content:not(.layout-label-left):not(:has(.fullwidth)) .layout-component-field:nth-last-of-type(1),
        .layout-section-content:not(.layout-label-left):not(:has(.fullwidth)) .layout-component-field:nth-last-of-type(2),
        .layout-section-content:not(.layout-label-left):not(:has(.fullwidth)) .layout-component-field:nth-last-of-type(3) {
            padding-bottom: 0;
        }
    }
    @media (max-width: 576px) {
        .cardlist {
            gap: 0;
            box-shadow: none;
        }
        .cardlist-item {
            border-radius: 0;
            box-shadow: none;
        }
        .cardlist-container .cardlist-item:first-of-type {
            border-top-right-radius: var(--phoneBorderRadiusBig);
            border-top-left-radius: var(--phoneBorderRadiusBig);
        }
        .cardlist-container .cardlist-item:last-of-type {
            border-bottom-right-radius: var(--phoneBorderRadiusBig);
            border-bottom-left-radius: var(--phoneBorderRadiusBig);
        }
        .cardlist-item:before {
            border-bottom: 1px solid var(--borderDividerColor);
        }
        .layout-top-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            padding: 0;
        }
        .layout-top-field {
            border: unset;
            border-bottom: var(--frameBorder);
            padding-bottom: 8px;
            margin-bottom: 8px;
        }
        .layout-top-field:last-child {
            border-bottom: none;
        }
        .layout-top-field:nth-last-child(2):nth-child(odd) {
            border-bottom: none;
        }
        .layout-top-field:not(:last-of-type):nth-child(even) {
            border-bottom: var(--frameBorder);
        }
        .layout-top-field:nth-child(1n) {
            padding-left: 0;
        }
        .layout-top-field:nth-child(2n) {
            display: flex;
            justify-content: right;
            padding-right: 0;
        }
        .layout-section-content:not(.layout-label-left):has(.layout-component-field){
            grid-template-columns: 1fr 1fr;
            gap: 0;
            width: 100%;
        }
        .layout-top-field.layout-component:nth-child(2n),
        .layout-component.right-side {
            display: flex;
            justify-content: right;
            padding-right: 0;
            flex-direction: column;
        }
        .layout-top-field.layout-component:nth-child(2n) .layout-field-mobile-container,
        .layout-component.right-side .layout-field-mobile-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
            width: fit-content;
            margin-left: auto;
        }
        .layout-top-field.layout-component:nth-child(2n) .top-field-lbl,
        .layout-component.right-side .label {
            width: auto;
            text-align: left;
            display: flex;
            justify-content: flex-start;
        }
        .layout-top-field.layout-component:nth-child(2n) .layout-component .inplace-value,
        .layout-component.right-side .inplace-value {
            justify-content: flex-start;
            text-align: right;
            width: auto;
            padding-right: 0;
        }
        .layout-component.right-side .inplace-value{
            padding-left: 0;
            padding-right: 0;
        }
        .layout-component.right-side,
        .layout-component.left-side {
            padding-top: 0;
        }
        .layout-component-field.fullwidth:last-of-type,
        .layout-component.right-side,
        .layout-component.left-side {
            border-color: transparent;
            padding-bottom: 0;
        }
        .layout-component.left-side:has(+ .layout-component.fullwidth),
        .layout-section-content .fullwidth{
            grid-column: span 2 !important;
        }
    }
    @media (min-width: 577px) {
        .row.tree-cols,
        .row.two-cols {
            display: grid;
        }
        .row.two-cols {
            grid-template-columns: repeat(2, 1fr);
        }
        .row.tree-cols {
            grid-template-columns: repeat(3, 1fr);
            border: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }
    .row.tree-cols,
    .row.two-cols {
        gap: 24px;
    }
    .cardlist-item-row {
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        align-items: center;
        background-color: var(--appWindowColor);
    }
    .cardlist-item-row .cardlist-item-icon{
        align-content: baseline;
        padding-top: 8px;
    }
    .cardlist-item-row .cardlist-item-icon:not(:has(.chk-switch)) {
        padding-left: 6px;
    }
    .cardlist-item-row .cardlist-item-icon:has(.chk-switch){
        margin-left: auto;
        order: 2;
    }
    .view-container .cardlist-item-row .cardlist-item-icon {
        padding-left: 12px;
        padding-top: 10px;
    }
    .carditem-row .carditem-value .field-activity-value,
    .carditem-row .carditem-value *,
    .cardlist-item-body,
    .carditem-title-row {
        font-size: calc(var(--textSize) - 4px) !important;
    }
    .carditem-title-row{
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .cardlist-item-buttons .gbtn.flat-btn {
        padding: 1rem;
    }
    .field-row-small {
        width: 100%;
    }
    .dropdown a, 
    .dropdown a span:not(.fa):not(.fal):not(.check-mark), 
    .carditem-value .fld-related-value, 
    .carditem-value .fld-lookup-value, 
    .carditem-value .fld-basic .field-value {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
    }
    .dropdown a .field-option span.fa,
    .dropdown a .field-option span.fal {
        float: left;
    }
    .dropdown a .field-option >span span+span{
        padding: 0;
    }
    .dropdown a {
        max-width: 100%;
        display: flex;
    }
    .dropdown-icons{
        left: -25px;
    }
    .dropdown-menu .dropdown-item-selected::before,
    .ui-sortable .dropdown-item-selected::before {
        left: 10px;
    }
    .view-header {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: baseline;
        background-color: transparent;
        box-shadow: none;
        border: none;
        margin-bottom: 0;
        padding: 16px 12px 8px 12px;
    }
    .view-header.layout-tab-column{
        gap: 0;
    }
    .view-header-main {
        padding: 16px 8px;
        background-color: transparent;
        gap: 6px;
        min-height: var(--btnHeight);
        width: 100%;
        border-radius: 0;
        position: initial;
    }
    .layout-top-fields {
        padding: 0 !important
    }
    .view-navigation-container {
        margin: 0;
        padding: 0;
    }
    .view-navigation {
        justify-content: space-between;
        margin: 16px 0 0;
    }
    .view-navigation button.gbtn.flat-btn{
        background-color: var(--phoneFlatButtonColor) !important;
        font-size: calc(var(--textSize) - 4px);
        padding: .5rem .75rem;
        position: relative;
        display: inline-flex;
    }
    .view-navigation button.gbtn.flat-btn.icon-only{
        padding: .5rem 0;
    }
    .view-navigation button span+span{
        margin: 0;
    }
    .view-navigation button .flat-btn-icon {
        display: inline-block;
        width: 1.5em;
        text-align: center;
        overflow: hidden;
        transition: transform 0.5s;
        transform-style: preserve-3d;
    }
    .view-navigation button .flat-btn-icon.d-none {
        display: inline-block !important;
        width: 0;
        opacity: 0;
        transform: rotateY(180deg);
    }
    .view-navigation button .flat-btn-icon:not(.d-none) {
        opacity: 1;
        transform: rotateY(0deg);
        position: relative;
        pointer-events: auto;
    }
    .view-navigation-right {
        display: flex;
        flex: 0;
        margin: 0;
        text-align: right;
    }
    .view-navigation-right>.btn-tool:first-child {
        margin-left: 0;
    }
    .layout-container .view-header {
        flex-direction: row;
        align-items: center;
        padding: 16px 12px 0 12px;
        background-color: var(--appWindowColor);
        border-radius: var(--phoneBorderRadiusBig);
        position: relative;
    }
    .field-date~.lookup-dropdown,
    .field-datetime-date .lookup-dropdown {
        width: 100%;
        max-width: 360px;
    }
    .ui-calendar-day,
    .ui-calendar-nav button,
    .field-date~.lookup-dropdown .ui-calendar-day {
        height: calc(var(--inputBorderRadius)* 4);
        width: calc(var(--inputBorderRadius)* 4);
        max-width: initial;
    }
    .ui-calendar-day-selected {
        border-radius: unset;
        position: relative;
        background-color: transparent;
    }
    .ui-calendar-day-selected:before {
        border-radius: 999px;
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        width: 32px;
        background-color: color-mix(in srgb, var(--eventColor) 25%, transparent);
    }
    .ui-calendar-day:hover{
        border-radius: unset;
        background: transparent;
    }
    .ui-calendar.side {
        margin-left: 61px;
        overflow: hidden;
    }
    .view-header-left {
        display: flex;
        width: 100%;
        gap: 16px;
        align-items: normal;
    }
    .view-body {
        margin-bottom: 12px;
    }
    .view-calendar .view-body{
        margin-bottom: 0;
    }
    .view-calendar .view-body,
    .view-calendar-body {
        box-shadow: none !important;
    }
    .view-content-body{
        margin-bottom: 65px;
    }
    .related-header-buttons {
        gap: 16px;
    }
    .related-footer{
        margin-top: 8px;
        margin-bottom: 24px;
    }
    .related-view:last-child{
        margin-bottom: 0;
    }
    .related-footer-sum{
        padding: 8px 16px;
        border-radius: var(--phoneBorderRadius);
        margin-right: 0;
        background: var(--appColorAlt);
    }
    .footer-field-value {
        font-size: calc(var(--textSize) - 2px);
    }
    .view-footer {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 62px;
        z-index: 2;
        border: none;
        border-top: var(--frameBorder);
        background: var(--templateCardFooterBackground);
    }
    .view-footer .view-footer-sum {
        padding-right: 10px;
    }
    /* Summary polia na mobile: hover neexistuje, "+" musi byt vzdy viditelne
       a menu potrebuje vacsie tap targety. Paticka je fixed nad spodnou navigaciou,
       preto menu vzdy otvarame nahor (dropup) a obmedzime jeho vysku. */
    .summary-add > .summary-add-btn {
        opacity: 1;
    }
    .summary-item {
        min-height: 32px;
    }
    .summary-menu {
        max-height: 50vh;
        min-width: 220px;
    }
    .summary-menu .dropdown-item {
        min-height: 40px;
    }
    /* paticka ma z-index 2, dropdown musi byt nad obsahom aj nad spodnou navigaciou */
    .view-footer .summary-group.show,
    .view-footer .summary-add.show {
        z-index: 1050;
    }
    .view-chart-header-right {
        align-self: stretch;
        display: flex;
    }
    .grid-contanier-compact {
        overflow: unset;
        height: 100%;
        border: none;
        box-shadow: none;
        background-color: inherit;
    }
    .grid-compact .carditem {
        margin-bottom: 10px;
        background-color: var(--appWindowColor);
        border: var(--frameBorder);
        box-shadow: var(--frameShadow);
        border-radius: var(--borderRadius);
    }
    .grid-compact .carditem:last-child {
        border-bottom: none;
    }
    .layout-container {
        margin-bottom: 50px;
    }
    .layout-container .layout-preview{        
        border-radius: var(--phoneBorderRadiusBig);
        padding: 16px;
    }
    .layout-tab-section {
        box-shadow: initial;
    }
    .layout-tab-section .layout-section-label{
        border-bottom: none;
    }
    .layout-label-left .layout-component-field{
        border-bottom: var(--frameBorder);
        border-color: var(--borderDividerColor);
        padding-bottom: 8px;
    }
    .layout-label-left .layout-component-field:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .layout-label-left .inplace-value {
        justify-content: flex-end;
    }
    .layout-component .inplace-value:hover{
        background: transparent;
    }
    .layout-component .view-mepty-text,
    .layout-component .inplace-value {
        font-size: calc(var(--textSize) - 4px);
    }
    .layout-component .inplace-value {
        background-color: transparent;
        border-radius: unset;
        line-height: initial;
    }
    .layout-component .inplace-value input,
    .layout-component .inplace-value textarea{
        padding-top: 0;
    }
    .layout-component .inplace-value .field-row{
        min-height: 36px;
    }
    .layout-component .inplace-value input{
        height: 36px;
    }
    .inplace-value .field-value:not(textarea){
        white-space: normal;
    }
    .layout-label-left .inplace-value,
    .layout-label-left .inplace-value .fld-lookup-value{
        white-space: unset;
    }
    .layout-tab-section .layout-section-label,
    .layout-component .label,
    .layout-component .inplace-value {
        padding-left: 0;
    }
    .layout-tab-section .layout-section-label,
    .layout-component .label{
        line-height: inherit;
        height: auto;
        display: inherit;
    }
    .layout-tab-section .layout-section-label {
        font-size: calc(var(--textSize) - 4px);
    }
    .layout-label-left .inplace-value .fld-lookup {
        background-color: var(--appColorAlt);
        border-radius: var(--borderRadiusBig);
        overflow: hidden;
        position: relative;
    }
    .layout-container .view-header-left {
        flex-direction: column;
        gap: 0;
    }
    .layout-tab-column .layout-tab-section {
        border-radius: var(--phoneBorderRadiusBig);
        padding: 12px;
        border: none;
    }
    .layout-section-content {
        padding: 0;
        gap: 8px 24px;
    }
    .layout-section-content .fullwidth{
        grid-column: 1 / -1;
        justify-self: left;
        width: 100%;
        align-items: baseline !important;
        flex-direction: column;
        gap: 0;
    }
    .layout-section-content .fullwidth .label,
    .layout-section-content .fullwidth .inplace-value{
        margin-right: auto;
    }
    .app-mobile-footer {
        flex-basis: 100%;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        padding: 12px 16px;
        z-index: 2;
        border-top: 1px solid var(--borderColor);
        background: var(--templateCardFooterBackground);
        overflow: unset;
    }
    .layout-container .view-title {
        padding-bottom: 0;
    }
    .layout-container .view-header-left-bottom {
        margin-top: 0;
    }
    .view-navigation-center .search-box .main-auto-list {
        left: -50px;
        width: calc(100% + 125px);
        min-width: calc(100vw - 34px);
        max-width: 0;
    }
    .stage-frame ul {
        height: 38px;
    }
    .stage-frame ul li div.stage-item {
        padding: 10px 0 10px 25px;
    }
    .btn-group .dropdown-toggle {
        min-width: 34px;
    }
    .dropdown-menu .dropdown-toggle::after {
        right: 16px;
        font-size: 16px;
        color: rgba(var(--textLightColor), .3);
    }
    .view-filter-item {
        width: fit-content;
        min-height: inherit;
        display: flex;
        align-items: center;
        padding: 8px;
    }
    .view-filter-item .toolbtn.icon::before {
        position: relative;
        padding-left: 0;
        border-left: none;
        color: initial;
        margin-left: 8px;
        /*font-size: var(--textSize);*/
        color: var(--textColor);
        font-weight: 100;
    }
    .view-filter-item span.toolbtn {
        padding: 0;
        display: flex;
    }
    .view-filter-item.search {
        gap: 5px;
        background-color: var(--searchResultBackground);
    }
    .view-filter-item.search span {
        font-size: calc(var(--textSize) - 2px);
        line-height: var(--textSize);
        font-weight: var(--textBoldLighter);
    }
    .view-filter-items span+span {
        margin: 0;
    }
    .view-filter-item.search .view-filter-field {
        font-weight: normal;
    }
    .view-filter-item.search .view-filter-value{
        font-weight: var(--textBold);
        max-width: 120px;
    }
    .view-filter-item.dropdown .dropdown-toggle>span:last-child:not(:only-child) {
        width: 2.5rem;
    }
    .view-filter-items {
        align-self: initial;
        flex-direction: row;
        gap: 6px;
        margin-top: 8px;
        padding-right: 16px;
        padding-left: 16px;
    }
    .view-filter.d-visible {
        margin-bottom: 5px;
        flex-direction: column;
        height: unset;
        min-height: unset;
    }
    .view-filter-dialog.dropdown-menu.show {
        width: 100%
    }
    .gbtn.flat-btn {
        padding: 0.75rem;
    }
    .gbtn.flat-btn:hover {
        color: var(--textColor) !important;
    }
    .flat-btn::before {
        content: none;
    }
    .select-gallery {
        padding: 0;
        border: initial;
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 16px;
    }
    .select-row-item-title {
        font-size: calc(var(--textSize) - 2px);
    }
    .select-row-item-desc {
        font-size: calc(var(--textSize) - 2px);
    }
    .field-input .select-gallery   {
        padding: 32px 12px 24px 12px;
    }
    @media (max-width: 578px) {
        .select-gallery {
            grid-template-columns: auto;
        }
    }
    .select-gallery-item {
        margin: initial;
        width: initial;
    }
    .gal-selected,
    .select-gallery-item:hover,
    .select-row-item-icon:hover,    
    .gchk.chk-switch:hover .state label:before,
    .bs-searchbox input.form-control:focus {
        color: var(--textColor) !important;
    }
    .gbtn.gbtn-input {
        height: calc(var(--inputBorderRadius)* 2);
        width: calc(var(--inputBorderRadius)* 2);
        border-radius: var(--inputBorderRadius);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .input-icon .gbtn.gbtn-input {
        border-radius: unset;
        height: min-content;
        width: min-content;
        padding: 0;
        min-width: calc(var(--textSize)* 1.5);
        justify-content: center;
    }
    .main-table .tbl-head {
        min-height: 45px;
    }
    .main-table .gchk .state label::after,
    .main-table .gchk .state label::before,
    .related-table .gchk .state label::after,
    .related-table .gchk .state label::before,
    .setting-table .gchk .state label::after,
    .setting-table .gchk .state label::before,
    .tbl-head .gchk.chk-checkbox,
    .align-center .gchk.chk-checkbox,
    .align-center .chk-checked,
    .align-center .chk-unchecked,
    .gchk .state label::after,
    .gchk .state label::before,
    .list-view .list-item .gchk.chk-checkbox {
        height: 1.5rem;
        width: 1.5rem;
    }
    .gchk {
        line-height: 1.5;
        width: 2.5rem;
        height: 1.5rem;
        box-shadow: none;
    }
    .gchk.chk-switch:has(+ span:not(:empty)) {
        margin-right: 5px;
    }
    .gchk input:focus,
    .gchk input:focus~.state label::before,
    .gchk:not(.chk-switch):hover .state label:before {
        border-color: var(--borderColor);
    }
    .gchk.chk-checkbox .state span.icon-check {
        width: 1.5rem;
        height: 1.5rem;
        transform: scale(0.9);
        left: 0;
        top: 0;
    }
    .checkbox .gchk.chk-switch {
        height: 52px;
        z-index: 1;
        padding: 24px calc(var(--inputBorderRadius) + 5px) 0 29px;
        background-color: var(--templateInputBackground);
        background-clip: padding-box;
        box-shadow: var(--frameShadow);
    }
    .checkbox .gchk.chk-switch input {
        width: 100%;
        height: 52px;
    }
    .gchk.chk-switch input:checked~.state label::after {
        left: 1rem;
    }
    .gchk.chk-switch .state {
        height: 1.5rem;
    }
    .field-row .field-input.checkbox .gchk.chk-switch .state {
        position: absolute;
        width: 2.5rem;
        right: calc(var(--inputBorderRadius) + 5px);
        top: 50%;
        transform: translateY(-50%);
    }
    .gchk.chk-switch .state::before {
        width: 2.5rem;
        height: 1.5rem;
        box-shadow: none;
    }
    .gchk.chk-switch .state label {
        text-indent: 3.2rem;
    }
    .gchk .state label:after,
    .gchk .state label:before {
        border-radius: 100%;
    }
    .gchk .state label:before{
        border-color: var(--borderDividerColor);
    }
    .gchk input:checked~.state label:after,
    .gchk input:not(:checked)~.state label:after {
        transition: background-color 0.4s ease-in-out;
    }
    .gchk.chk-switch input:checked~.state label:before {
        transition: all 0.1s ease-out;
    }
    .gchk.chk-switch input:not(:checked)~.state label:before {
        transition: all 0.5s ease-in;
    }
    .gchk input:checked~.state label:after{
        background-color: var(--eventColor) !important;
    }
    .gchk.chk-switch input:checked~.state label:after {
        background-color: rgba(var(--whiteColor), 1) !important;
    }
    .gchk.chk-switch input:checked~.state label:after{
        transition: all 0.5s ease;
    }
    .gchk.chk-switch input:not(:checked)~.state label:after {
        transition: all 0.5s ease;
    }
    .related-table tr td:last-child,
    .related-table th:last-child,
    .main-table th:last-child {
        width: 50px !important;
        max-width: 50px !important;
    }
    .related-table th:last-child .btn-group .gbtn.flat-btn,
    .main-table th:last-child div.tbl-head .btn-group .gbtn.flat-btn {
        padding: 0.35rem;
    }
    .main-table th:last-child div.tbl-head .btn-group {
        top: 8px;
    }
    .related-table th:first-child,
    .related-table th:first-child,
    .related-table tr td:first-child,
    .related-table tr td:first-child {
        padding-left: 12px;
    }
    .view-calendar-side+.view-calendar-body {
        width: 100%;
    }
    .view-calendar-body{
        border-radius: 0;
    }
    .cal-mobile-panel {
        flex: 0 0 auto;
        overflow: hidden;
        max-height: 0;
        background-color: var(--appColor);
        transition: max-height 0.28s ease;
        /* oddelenie od pruhu dni pod panelom, aby to nebolo nalepene */
        border-bottom: 1px solid var(--borderDividerColor);
    }
    .cal-mobile-panel .ui-calendar {
        min-width: 0;
        padding: 6px 10px 0 10px;
    }
    .cal-mobile-panel .ui-calendar-days {
        border-top: none;
    }    
    .cal-mobile-cal {
        overflow: hidden;
    }
    .cal-mobile-track {
        display: flex;
        width: 300%;
        transform: translateX(-33.3333%);
    }
    .cal-mobile-month {
        flex: 0 0 33.3333%;
        min-width: 0;
    }
    .cal-monthbar {
        /* offsetParent pre polozky - podla toho pocitame scrollLeft na vycentrovanie */
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        /* dole viac miesta, aby lista nesedela nalepena na pruhu dni pod panelom */
        padding: 8px 10px 14px 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .cal-monthbar::-webkit-scrollbar {
        display: none;
    }
    .cal-monthbar-month,
    .cal-monthbar-year {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 16px;
        border-radius: 999px;
    }
    .cal-monthbar-month {
        background-color: rgba(var(--blackOrWhiteColor), 0.05);
        color: var(--textColor);
        cursor: pointer;
    }
    .cal-monthbar-month.selected {
        background-color: color-mix(in srgb, var(--eventColor) 25%, transparent);
        color: var(--eventColor);
        font-weight: var(--textBold);
    }
    .cal-monthbar-year {
        padding: 6px 8px;
        color: rgba(var(--textLightColor), 1);
        font-weight: var(--textBold);
    }
    /* spodny dialog s vyberom kalendarov (rovnaky zoznam ako bocny panel na desktope) */
    .cal-sheet-title {
        text-align: center;
        padding: 2px 0 10px 0;
        font-weight: var(--textBold);
        color: var(--textColor);
    }
    /* Pozor na priamych potomkov: polozky filtrov maju tiez triedu .item a
       dedia align-items: center - v smere column by to centrovalo text. */
    .cal-sheet-list .cal-sheet-group,
    .cal-sheet-list > .cal-sheet-group > .item {
        display: flex;
        flex-direction: column;
    }
    /* prvy nadpis nema odsadzovat tak vysoko ako medzi sekciami */
    .cal-sheet-list .cal-sheet-group:first-child .list-item-title {
        padding-top: 8px;
    }
    /* na dotykovom zariadeni nie je hover - oko musi byt vidiet vzdy */
    .cal-sheet-list .row-item-menu,
    .cal-sheet-list .list-item-menu {
        visibility: visible;
        opacity: 1;
        transition: none;
        margin-left: auto;
        margin-right: 0;
    }
    .cal-sheet-list .list-item .title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* vypnuty kalendar je stlmeny (na desktope to robi .list-item-main) */
    .cal-sheet-list > .cal-sheet-group > .item:not(.selected) .list-item-icon,
    .cal-sheet-list > .cal-sheet-group > .item:not(.selected) > .list-item .title {
        opacity: 0.4;
    }
    /* filtre kalendara - zarovnane pod nazov (40px ikona + 16px medzera) */
    .cal-sheet-list .cal-section-item {
        padding: 0;
    }
    .cal-sheet-list .cal-section-header {
        min-height: 40px;
        padding: 0 16px 0 16px;
        border-radius: 0;
    }
    .cal-sheet-list .cal-section-content .item {
        min-height: 44px;
        padding: 0 16px 0 56px;
        font-size: 16px;
        gap: 12px;
        border-radius: 0;
    }
    .cal-sheet-list .cal-section-content .item:last-child {
        margin-bottom: 0;
    }
    /* text filtra vzdy dolava, fajocka az uplne vpravo */
    .cal-sheet-list .cal-section-content .item,
    .cal-sheet-list .cal-section-content .item .row-item-main {
        justify-content: flex-start;
        text-align: left;
    }
    /* oznaceny filter ma fajocku - rovnako ako ostatne vyberove dialogy */
    .cal-sheet-list .cal-sheet-check {
        margin-left: auto;
        padding-left: 8px;
        visibility: hidden;
        color: var(--eventColor);
    }
    .cal-sheet-list .item.selected > .cal-sheet-check {
        visibility: visible;
    }
    /* vyber polozky spodnej listy (BuildFooterMenu) - riadky su priamo .list-item */
    .cal-sheet-list .list-item.selected > .cal-sheet-check {
        visibility: visible;
    }
    /* kruzok pod ikonou: farba entity cez --color, bez nej vychodzia farba UI */
    .fmenu-sheet .list-item .list-item-icon {
        background-color: var(--color, var(--eventColor));
    }
    /* hlavicka dialogu: tlacidlo Naspat je mimo toku, aby nadpis ostal v strede */
    .fmenu-sheet-head {
        position: relative;
    }
    .fmenu-sheet-head button {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    /* sipka na riadku, ktory sa zanori o uroven nizsie */
    .fmenu-sheet .cal-sheet-more {
        margin-left: auto;
        padding-left: 8px;
        opacity: 0.45;
    }
    .mobile-app-title.cal-title-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: visible;
        cursor: pointer;
    }
    .mobile-app-title.cal-title-toggle > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .mobile-app-title.cal-title-toggle > i {
        font-size: var(--textSmallerSize);
    }
    .view-calendar-body .ui-calendar-days{
        border-top: none;
        border-bottom: none;
    }
    .ui-calendar-row {        
        will-change: transform;
    }
    .ui-calendar-body.onerow{
        height: 32px;
    }
    .ui-calendar-body.onerow,
    .ui-calendar-days.onerow {
        display: flex;
        width: 100%;
        scrollbar-width: none;
	    -ms-overflow-style: none;
        line-height: 1;
    }
    .ui-calendar-days.onerow::-webkit-scrollbar {
        display: none; 
    }
    .ui-calendar-body.onerow.days-7>div,
    .ui-calendar-days.onerow.days-7>div {
        flex: 0 0 calc(100% / 7);
        box-sizing: border-box;
        text-align: center;   
    }
    .ui-calendar-body.onerow.days-3>div,
    .ui-calendar-days.onerow.days-3>div {
        flex: 0 0 calc(100% / 3);
        box-sizing: border-box;
        text-align: center;   
    }
    .ui-calendar-body.onerow.days-5>div,
    .ui-calendar-days.onerow.days-5>div {
        flex: 0 0 calc(100% / 5);
        box-sizing: border-box;
        text-align: center;   
    }
    .ui-calendar-days{
        padding: 2px 0;
        margin-bottom: 0;
    }
    .view-calendar-body .view-header{
        background-color: var(--appColor);
        padding: 0;
    }
    .view-calendar-body .table-bordered {
        border-color: var(--appColor) !important;
    }
    .view-calendar-body .fc .fc-scrollgrid {
        border-radius: 0;   
    }
    .view-calendar-body .fc-timegrid .fc-scroller:has(.fc-daygrid-body){
        background: var(--groupBackground);
    }
    .fc .fc-dayGridWeek-view .fc-daygrid-event-harness{
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0
    }
    .fc-resource-timeline thead[role="rowgroup"] {
        display: none;
    }
    .fc .fc-resource-timeline td[role="gridcell"] .fc-datagrid-cell-frame{   
        position: relative;
    }
    .fc .fc-resource-timeline td[role="gridcell"] {   
        padding-right: 4px;
    } 
    .fc .fc-resource-timeline td[role="gridcell"] .fc-scrollgrid-sync-inner{
        padding-right: 0;
        padding-left: 2px;
        height: 100%;
    }
    .fc .fc-resource-timeline td[role="gridcell"] .fc-scrollgrid-sync-inner span.fc-datagrid-cell-main {
        position: absolute;
        top: 50%;
        transform: translateY(-50%); 
        overflow: hidden;
        padding: 0;  
        padding: 2px 0;
        max-height: 100%;
        width: calc(100% - 2px);
    }
    .fc-gramResourceList-view td .fc-scrollgrid-sync-inner,
    .fc-resourceTimeGridDay-view th .fc-scrollgrid-sync-inner{
        font-size: var(--textSmallerSize);
        line-height: 1;
        text-transform: none;
    }
    .fc-gramResourceList-view th.fc-datagrid-cell {
        font-size: 10px;   
    }
    .fc-gramResourceList-view td .fc-scrollgrid-sync-inner{
        white-space: normal;
        min-height: 18px;
    }
    .fc-resourceTimeGridDay-view th[role="columnheader"] {
        padding-right: 4px;
        text-align: left;
    }
    .fc-resourceTimeGridDay-view th[role="columnheader"] .fc-scrollgrid-sync-inner{
        padding-bottom: 4px;
        position: relative;
    }
    .fc-resourceTimeGridDay-view th[role="columnheader"] .fc-scrollgrid-sync-inner span.fc-col-header-cell-cushion{
        padding-top: 4px;
        padding-left: 4px;
        overflow: hidden;
    }
    .view-calendar-side {
        position: fixed;
        height: 100%;
        width: calc(100% - 50px);
        max-width: 430px;
        z-index: 10;
        right: 0;
        background: var(--templateViewBackground);
        padding: 0 16px;
        box-shadow: 0 10px 10px #000;
        transition: transform 0.5s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    }
    .view-calendar-side.d-none {
        display: unset !important;
        flex: 0;
        padding: 0;
        box-shadow: unset;
        transition: transform 0.3s;
        transition-delay: unset;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    .sidecalendar-list-color {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5;
    }
    .sidecalendar-list {
        height: calc(100% - 570px);
    }
    .related-table tr td,
    .table tr th .tbl-head-main {
        font-size: var(--textSmallerSize);
    }
    body.tablet .modal{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    body.tablet .modal .modal-dialog {
        width: 100%;
        height: 100%;
        padding: 20px;
        max-width: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: transparent;
    }
    body.tablet .modal .modal-dialog .modal-content {
        height: 100vh;
        overflow: auto;
        border-top-right-radius: var(--borderRadiusBig);
        border-top-left-radius: var(--borderRadiusBig);
    }
    body.tablet .modal .modal-dialog.full.tablet .modal-content {
        border-radius: var(--borderRadiusBig);
    }
    body.tablet .modal .modal-dialog.modal-size-m .modal-content {
        height: auto;
    }
    body.tablet .modal .modal-dialog .modal-body {
        padding-bottom: 24px;
    }
    body.tablet .modal .section-content{
        flex-direction: unset !important;
    }
    .modal.modal-phone.show {
        padding: 0 !important;
    }
    .modal-dialog.full {
        margin: 0;
        background-color: var(--appColor);
        width: 100%;
    }
    .modal-dialog.full .modal-content {
        max-height: 100vh;
        box-shadow: none;
        border-radius: unset;
        border: none;
    }
    .modal-body {
        min-height: unset;
        padding: 0 24px;
        box-shadow: none;
    }
    .modal-body.full {        
        padding: 0 12px;
    }
    .modal-dialog.full .app-header,
    .modal-dialog.full.tablet .app-header,
    .modal-dialog.full:not(.modal-bottom) .modal-body{
        background-color: var(--modalBackgroundColor);
    }
    .modal-content .modal-body {
        padding: 0 16px 16px 16px;
    }
    .modal-dialog:not(.modal-bottom) .modal-content .modal-body:not(.full) {
        max-height: 300px;
    }
    .modal-dialog.modal-size-full .modal-content .modal-body:not(.full) {
        max-height: 100%;
    }
    .modal-content .modal-body.full:not(.tablet) {
        height: 100vh;
    }
    .modal-content .modal-body.full:not(.tablet) .section:empty {
        display: none;
    }
    .modal-content .modal-body.full.tablet {
        min-height: 50vh;
        height: 100vh;
    }
    .ios .modal-content .modal-body{
        padding-bottom: 24px;
    }
    .modal-content.select .modal-body,
    .ios .modal-content .modal-body:not(.full) {
        border-bottom: 1px solid var(--borderColor);
    }
    .modal-content.select .modal-body {
        border-top: 1px solid var(--borderColor);
        padding-top: 16px;
        padding-bottom: 24px;
    }
    .modal-dialog.modal-bottom {
        margin: 0;
        -webkit-transform: translate(0,100%);
        -ms-transform: translate(0,100%);
        -o-transform: translate(0,100%);
        transform: translate(0,100%);
    }
    .modal-dialog.modal-bottom .modal-content{
        justify-content: end;
        max-height: 100%;
        height: 100%;
        box-shadow: none;
        background-color: transparent;
        border: none;
    }
    .modal-dialog.modal-bottom .modal-content .modal-body {
        padding: 0;
        border-top-left-radius: var(--borderRadiusBig);
        border-top-right-radius: var(--borderRadiusBig);
        overflow: hidden;
        width: 100vw;
        background-color: var(--modalBackgroundColor);
        box-shadow: 0 13px 120px rgba(0, 0, 0, .8);
    }
    .modal-dialog.tablet .canvas-buttons{
        left: 70px;
        bottom: 60px;
    }
    .modal-dialog:not(.tablet) .canvas-buttons{
        left: 32px;
        bottom: 32px;
    }
    .search-filter-container.d-none +.search-container {
        margin-top: 8px;
    }
    .search-filter-container:not(.d-none) +.search-container {
        margin-top: 32px;
    }
    .search-container .lookup-select {
        display: flex;
        flex-direction: column;        
    }
    .search-container .list-item {        
        padding: 6px 16px;  
        margin: 0;
        border-radius: initial;
        border-bottom: 1px solid var(--borderDividerColor);
    }
    .search-container .list-item.arrow {
        position: relative;
        padding-right: 24px;
        gap: 4px;
        align-items: center;
        min-height: 48px;
    }
    .search-container .list-item.arrow::before {
        top:50%;
        transform: translateY(-50%);
    }
    .search-container .list-item-title,
    .search-container .list-content {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;        
        align-items: baseline;
    }    
    .search-container .list-select-value {
        max-width: initial;
        font-size: calc(var(--textSize) - 2px);  
        font-weight: var(--textBoldLighter);
        border: 1px solid var(--eventColor);
        background-color: initial;
    }
    .search-container .list-field-name {
        background: initial;
        font-size: calc(var(--textSize) - 2px);
        font-weight: initial;
        padding-left: 0;
        padding-right: 0;
    }
    /* na mobile ponuka neroluje vo vlastnom okne ale s celou strankou, takze
       prilepeny hint by sa lepil na spodok obrazovky a prekryval obsah */
    .search-container .search-hint {
        position: static;
        background: initial;
        padding: 8px 16px;
    }
    .search-container .list-item.search-fulltext {
        margin-bottom: 0;
        padding-bottom: 6px;
    }
    .search-container .list-header {
        color: var(--eventColor);
        font-weight: var(--textBoldLighter);
        font-size: calc(var(--textSize) - 2px);
        line-height: var(--textSize);
    }
    .modal-dialog.modal-bottom .list-items {
        max-height: calc(70vh - 107px);
        overflow: auto;
        padding-bottom: 8px;
    }
    .modal-dialog.modal-bottom :not(.layout-title+.layout-buttons-container)+.list-items {
        max-height: calc(70vh - 25px);
    }    
    .modal-phone.ios .modal-dialog.modal-bottom .list-items {
        max-height: calc(70vh - 123px);
        padding-bottom: 24px;
    }
    .modal-phone.ios .modal-dialog.modal-bottom :not(.layout-title+.layout-buttons-container)+.list-items {
        max-height: calc(70vh - 41px);
    }
    .modal.modal-phone.show,
    .modal-dialog.modal-bottom .list-items {
        scrollbar-width: none;
    }
    .modal.modal-phone.show::-webkit-scrollbar,
    .modal-dialog.modal-bottom .list-items::-webkit-scrollbar {
        display: none;
    }
    .modal-dialog.modal-bottom .layout-drag {
        border-bottom: none;
        border-top: none;
    }
    .modal-dialog.modal-bottom .layout-title{
        display: flex;
        align-items: center;
        padding-left: 8px;
    }
    .modal-dialog.modal-bottom .layout-title-caption {
        text-align: center;
        flex: 1;
        margin-right: 40px;
        min-height: 32px;
        align-content: center;
    }
    .layout-title-btn button.d-none{
        display: inline-flex !important;
        visibility: hidden;
    }
    .modal-dialog.full .list-items .list-item,
    .modal-dialog.modal-bottom .list-items .list-item {
        padding: 8px 16px;
        margin: 0;
        border-radius: 0;
        position: relative;
        min-height: 48px;
        align-items: center;
    }
    .modal-dialog.modal-bottom .list-items .list-item {
        flex-wrap: nowrap;
    }
    .modal-dialog.full .list-items .list-item-value,
    .modal-dialog.modal-bottom .list-items .list-item-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .modal-dialog.full .list-items .list-item:has(.list-item-icon, .list-item-value),
    .modal-dialog.modal-bottom .list-items .list-item:has(.list-item-icon, .list-item-value) {
        gap: 16px;
    }
    .modal-body.full:has(.detail-view .list-items) {
        padding: 0 !important;
    }
    .modal-dialog.full .list-item-filter>div {
        width: 100%;
    }
    .modal-dialog.full .list-item-filter-header,
    .modal-dialog.full .list-item-filter,
    .modal-dialog.full .list-item-filter .section-small {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .modal-dialog.full .list-item-filter .section-small.one .field-row{
        width: 100%;
        transition: width 0.2s ease;
    }
    .body:not(.tablet) .modal-dialog.full .list-item-filter .section-small.two .field-row .dropdown.bootstrap-select .dropdown-menu.show{
        min-width: calc(100vw - 32px) !important;
    }
    .tablet .modal-dialog.full .list-item-filter .section-small.two .field-row:first-child,
    .modal-dialog.full .list-item-filter .section-small.two .field-row:first-child{
        transition: width 0.2s ease;
    }
    .body:not(.tablet) .modal-dialog.full .list-item-filter .section-small.two .field-row:first-child{
        width: 35%;
        min-width: 35%;
    }
    .tablet .modal-dialog.full .list-item-filter .section-small.two .field-row:first-child{
        width: 220px;
        min-width: 220px;
    }
    .modal-dialog.full .list-item-filter .section-small.two .field-row:last-child{
        width: -webkit-fill-available;
        width: inherit;
        transition: width 0.2s ease;
    }
    .modal-dialog.full .list-item-filter-header{
        justify-content: space-between;
        margin-top: 6px;
        margin-right: 2px
    }
    .modal-dialog.full .filter-header{
        font-weight: var(--textBold);
    }
    .modal-dialog.full .list-item-filter .section-small {
        flex-direction: row;
    }
    .section-small.two .input-left-icon{
        top: 50%;
        transform: translateY(-50%);
    }
    .section-small.two .input-icon{
        height: initial;
        align-items: center;
    }
    .modal-dialog.full .list-item-filter .dropdown button.btn-light {
        border-radius: var(--inputBorderRadius);
        padding-right: 16px;
    }
    .modal-dialog.full .list-item-filter .dropdown button.btn-light:focus{
        background-color: var(--templateInputBackground);
    }
    .bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bootstrap-select .dropdown-toggle .filter-option .filter-option-inner-inner{
        display: inline;
    }
    .modal-dialog.full .list-item-filter .dropdown >.dropdown-toggle:after{
        margin-top: initial;
    }
    .modal-dialog.full .list-item-filter .section-small input {
        padding-top: initial
    }
    .modal-dialog.modal-bottom .list-items .list-item.selected {
        color: var(--flatBtnHoverColor);
    }
    .list-item.arrow::before,
    .modal-dialog.full .list-items .list-item.plus::before,
    .modal-dialog.modal-bottom .list-items .list-item.arrow::before {
        font-family: 'Font Awesome 7 Pro';
        right: 16px;
        position: absolute;
        color: rgba(var(--textLightColor), .3);
    }
    .list-item.plus {
        align-items: center;
    }
    .list-item.arrow::before,
    .modal-dialog.modal-bottom .list-items .list-item.arrow::before {
        content: "\f054";
    }
    .modal-dialog.full .list-items .list-item.plus::before{
        content: "\2b";
    }
    .modal-dialog.full .list-items .list-item::after,
    .modal-dialog.modal-bottom .list-items .list-item::after {
        content: '';
        border-bottom: 1px solid var(--borderDividerColor);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }
    .list-item-title {
        padding: 32px 16px 4px 16px;
        align-content: center;
        text-transform: uppercase;
        color: rgba(var(--textLightColor), 0.5);
        font-size: var(--textSmallSize);
        border-bottom: 1px solid var(--borderDividerColor);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: 3px;
    }
    .list-item-title-btns button{
        color: var(--eventColor) !important;
        font-size: var(--textSmallSize);
        padding: 0 !important;
    }
    .search-filter-container .list-item-title {
        padding-top: 8px;
    }
    .list-items:not(.filter.d-none)+.list-items .list-item-title{
        padding-top: 32px;
    }
    .modal-dialog.modal-bottom .list-items .list-item .list-item-icon {
        border-radius: 50% !important;
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        line-height: initial;
        padding: 6px 7px;
        min-height: 40px;
        min-width: 40px;
        align-items: center;
        color: rgba(var(--lightOrDarkColor), 1);
    }
    .modal-dialog.modal-bottom .list-items .list-item .title{
        padding: 0;
        font-size: 16px;
        font-weight: 400;
        height: 24px;
        display: flex;
        align-items: flex-end;
    }
    .modal-dialog.modal-bottom .list-items .list-item .subtitle{
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        height: 20px;
        color: rgba(var(--textLightColor));
    }
    .modal-dialog.modal-bottom .list-items .list-item:last-child::after{
        content: none;
    }
    body.tablet .modal .modal-dialog.modal-bottom {
        padding: 0;
        max-width: 100%;
    }
    body.tablet .modal .modal-dialog.modal-bottom .modal-body{
        border-bottom: none;
        padding-bottom: 0;
        max-height: 70%;
    }
    body.tablet .modal .modal-dialog.modal-bottom .modal-content {
        border-radius: 0;
    }
    .modal-phone .modal-size-m {
        margin: auto;
        padding: 0 24px;
    }
    .modal-phone .modal-size-m .modal-content {
        box-shadow: none;
    }
    .modal-footer>* {
        margin: 0;
    }
    .ios .modal-footer {
        padding: 0;
        height: 54px;
    }
    .ios .modal-buttons {
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }
    .ios .modal-buttons-nav {
        width: 100%;
        height: 100%;
        gap: 1px;
    }
    .ios .modal-content .modal-footer .modal-buttons-nav::after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .ios .modal-content .modal-footer .modal-buttons-nav:not(.one)::after {
        border-left: 1px solid var(--borderColor);
    }
    .ios .modal-buttons-nav .gbtn{
        width: 100%;
        height: 100%;
        justify-content: center;
        max-height: unset;
        overflow: hidden;
        border-radius: 0;
    }
    .ios .modal-buttons-nav .gbtn:first-child{
        border-bottom-left-radius: var(--phoneBorderRadiusBig);
    }
    .ios .modal-buttons-nav .gbtn:last-child{
        border-bottom-right-radius: var(--phoneBorderRadiusBig);
    }
    .modal-buttons-nav {
        gap: 8px;
    }
    .modal-buttons-nav .gbtn:not(.gbtn-primary) {
        border: unset;
        background: unset;
        box-shadow: unset;
        color: var(--eventColor);
        margin: 0;
    }
    .modal-buttons-nav .gbtn:not(.gbtn-danger):not(.gbtn-primary) {
        font-weight: normal;
    }
    .gbtn-danger {
        color: #fff !important;
        display: flex;
        align-items: center;
    }
    .ios .gbtn-danger {
        color: var(--redColor) !important;
        background-color: transparent !important;
    }
    .ios .gbtn-primary {
        color: #007bfe !important;
        font-weight: var(--textBold) !important;
        background-color: transparent !important;
        border: none !important;
    }
    .modal-backdrop {
        z-index: 1041;
        transition: none;        
        background: rgba(0, 0, 0, 0.4);        
    }
    .modal-header {
        border-top-left-radius: var(--phoneBorderRadiusBig);
        border-top-right-radius: var(--phoneBorderRadiusBig);
        padding: 0;
        background-color: var(--modalBackgroundColor);
        border-bottom: none;
    }
    .modal-title {
        margin: 24px 24px 16px 24px;
        font-weight: inherit;
    }
    .modal-footer {
        border-bottom-left-radius: var(--phoneBorderRadiusBig);
        border-bottom-right-radius: var(--phoneBorderRadiusBig);
        background-color: var(--modalBackgroundColor);
        border-top: none;
        padding: 24px;
        position: relative;
    }
    .modal-size-full {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
    }
    .modal-size-l .modal-footer,
    .modal-size-full .modal-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .modal-size-full .modal-header,
    .modal-size-full .modal-footer {
        border-radius: 0;
    }
    .modal-footer .spinner-border-sm {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        right: 12px;
    }
    .view-tabs{
        position: relative;
        top: 0;
    }
    .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        font-size: 12px;
        padding-left: 0;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link, .settings-card-layout .nav-link {
        padding: 8px 12px;
    }
    .nav-tabs .nav-link:hover::before,
    .nav-tabs .nav-link.active::before,
    .settings-card-layout .nav-link:hover::before,
    .settings-card-layout .nav-link.active::before {
        width: calc(100% - 24px);
    }
    .nav-tabs .nav-link::before{
        display: none;
    }
    .nav-tabs .nav-link.active{
        background: var(--appColorAlt);
        border-radius: 20px;
    }
    .section-title {
        padding-left: 6px;
        margin-bottom: 0;
        margin-top: 20px;
    }
    .section-title span {
        padding: 8px 20px 8px 6px;
        position: relative;
    }
    .section-title .section-title-span::before{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: calc(var(--textSize) - 4px);
    }
    .section-title .section-title-span:hover{
        border-radius: var(--borderRadiusBig);
    }
    .field-input.checkbox:hover::after,
    .field-input.checkbox.focused::after {
        content: none;
    }
    .field-input:hover::after, 
    .field-input.focused::after {
        border-color: var(--focusBorderColor);
    }
    .field-caption {
        color: var(--eventColor);
        text-transform: initial;
        font-size: var(--textSmallerSize); 
        top: 6px; 
        padding: 0;
        left: calc(var(--inputBorderRadius) + 5px);
        transition: all  0.2s ease 0s;
    }
    .field-caption::before {        
        top: 6px;
        background: transparent;
    }
    .field-caption.full {
        color: rgba(var(--textLightColor), 0.7); 
        top: 18px !important;
        font-size: var(--textSize);
        font-weight: initial;        
    }
    .field-caption.checkbox{
        color: var(--textColor);
        top: 18px !important;
        font-size: var(--textSize);
        font-weight: initial;
    }
    .field-input.textarea {
        padding-top: 22px;
        background-color: var(--templateInputBackground);
        box-shadow: inset 0 1px 2px rgba(33, 36, 44, 0.08);
        border-radius: var(--inputBorderRadius);
    }
    .field-input.textarea textarea{
        padding-top: 0;
        box-shadow: none;
    }
    input, textarea {
        padding: 16px var(--inputBorderRadius) 0 calc(var(--inputBorderRadius) + 5px); 
        border: none; 
        padding: 16px var(--inputBorderRadius) 0 calc(var(--inputBorderRadius) + 5px);
    } 
    .field-row.disabled input:disabled,
    .field-input.disabled input:disabled {
        border: 1px solid var(--templateInputDisabledBorder);
        box-shadow: none;
    }
    .field-input.disabled div span,
    .field-input.disabled button{
        background: transparent;
        color: rgba(var(--textLightColor), .5) !important;
    }
    .checkbox .gchk.chk-switch,
    .bootstrap-select.input-option button.btn-light,
    .field-input .field-value.input-option.show::after,
    .field-row .input-field {
        border-radius: var(--inputBorderRadius);
    }
    .cardlist .checkbox .gchk.chk-switch{
        border-radius: 0;
    }
    .settings-container .bootstrap-select .dropdown-toggle .filter-option,
    .detail-view > :not(:has(.list-item-filter)) .bootstrap-select .dropdown-toggle .filter-option {
        align-items: end;
        padding-bottom: 4px;
    }
    .field-input.focused::after {
        border-radius: var(--inputBorderRadius);
    }
    .field-input .input-option button {
        padding: 16px 6px 0 12px; 
        padding-left: calc(var(--inputBorderRadius) + 5px);
        border-radius: var(--inputBorderRadius);
    }
    button.btn.dropdown-toggle{
        border: none;
        padding-left: 13px;
    }
    .bootstrap-select>.dropdown-toggle:after {
        content: "\f078";
        color: var(--textColor);
        height: calc(var(--inputBorderRadius)* 2);
        padding: 0;
        position: absolute;
        right: calc(var(--inputBorderRadius) + 12px);
        top: 50%;
        transform: translateY(-50%);
    }
    .btn-light {
        border-radius: var(--phoneBorderRadius);        
    }
    .layout-top-field {
        margin-bottom: 8px;
    }
    .d-visible.layout-side-full {
        position: fixed;
        border-bottom: none;
        bottom: 0;
        left: 0;
        z-index: 100;
        max-height: 0;
        background-color: var(--modalBackgroundColor);
        width: 100%;
        border-top-left-radius: var(--borderRadiusBig);
        border-top-right-radius: var(--borderRadiusBig);
    }
    .tablet .d-visible.layout-side-full {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: initial;
    }
    .d-visible.layout-side-full::before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 15px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
        pointer-events: none;
        z-index: -1;
    }
    body:not(.tablet) .d-visible.layout-side-full::before{
        border-top-left-radius: var(--borderRadiusBig);
        border-top-right-radius: var(--borderRadiusBig);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .d-visible.layout-side-full .related-view:last-child .related-footer {
        margin-bottom: 0;
    }
    .layout-footer {
        height: 100vh;
        background-color: var(--modalBackgroundColor);
    }
    .ui-calendar-drag,
    .layout-drag {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .ui-calendar-drag {
        padding-top: 4px;
        padding-bottom: 0;
    }
    body:not(.tablet) .layout-drag{
        border-top-left-radius: var(--borderRadiusBig);
        border-top-right-radius: var(--borderRadiusBig);
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }
    .ui-calendar-drag .item-drag,
    .layout-drag .item-drag { 
        background-color: rgba(var(--blackOrWhiteColor), .2);
        padding: 3px;
        border-radius: var(--borderRadiusSmall);
        width: 10%;
    }
    .layout-preview {
        display: grid;
        grid-template-columns: minmax(auto, 30%) 1fr;
        padding: 8px 16px;
        margin-bottom: 24px;
    }
    .layout-main .layout-related {
        margin-top: 0;
        padding: 0;
        background: none; 
        box-shadow: none;
        height: 100%;
        overflow: auto;
        scrollbar-width: none;
    }
    .layout-buttons::-webkit-scrollbar,
    .layout-related::-webkit-scrollbar {
        display: none;
    }
    .layout-related,
    .layout-buttons {
        scrollbar-width: none;
    }
    .layout-side-full .layout-buttons-container,
    .layout-side-full .layout-buttons,
    .layout-side-full .layout-related,
    .layout-side-full .layout-drag {
        background-color: var(--modalBackgroundColor);
    }
    .layout-side-full .layout-buttons-container + .layout-related {
        margin-top: 0;
        padding-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .modal-bottom .detail-view .layout-buttons-container,
    .layout-container .layout-buttons-container,
    .layout-side-full .layout-buttons-container {
        display: flex;
        justify-content: center;
        padding-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
        width: auto;
    }
    .modal-bottom .detail-view .layout-buttons-container{
        padding: 8px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .modal-bottom .detail-view .layout-buttons,
    .layout-container .layout-buttons,
    .layout-side-full .layout-buttons{
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        width: auto;
        box-sizing: border-box;
        gap: 16px;
    }
    .modal-bottom .detail-view .layout-buttons button,
    .layout-container .layout-buttons button,
    .layout-side-full .layout-buttons button{
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        line-height: initial;
        padding: 6px 7px;
        min-height: 32px;
        min-width: 32px;
        align-items: center;
        border: none !important;
        position: relative;
    }
    .layout-container .layout-buttons button{
        height: 48px;
        width: 48px;
        border-radius: 50% !important;
        background-color: rgba(var(--eventColorRgba), .1) !important;
    }
    .modal-bottom .detail-view .layout-buttons button,
    .layout-side-full .layout-buttons button{
        flex-direction: column;
        gap: 4px;
        overflow: visible;
        height: auto;
    }
    .modal-bottom .detail-view .layout-buttons button:not(:last-child)::after,
    .layout-side-full .layout-buttons button:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -8px;
        height: 70%;
        width: 1px;
        background-color: var(--borderDividerColor);
        top: 15%;
    }
    .modal-bottom .detail-view .layout-buttons button span.flat-btn-lbl,
    .layout-side-full .layout-buttons button span.flat-btn-lbl{
        margin: 0;
        font-size: var(--textSmallerSize);
    }
    .modal-bottom .detail-view .layout-buttons button span.flat-btn-icon,
    .layout-side-full .layout-buttons button span.flat-btn-icon{
        font-size: 24px !important;
    }
    .layout-buttons-container {
        display: flex;
        flex: 1;
    }
    .switch-group {
        display: inline-flex;
        background-color: var(--phoneFlatButtonColor);
        border-radius: var(--borderRadiusBig);
        overflow: hidden;
        width: auto;
        position: relative;
    }
    .switch-group .ripple{
        display: none !important;
    }
    .switch-group::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(50% - 4px);
        height: calc(100% - 4px);
        border-radius: var(--borderRadiusBig);
        transition: transform 0.3s ease, background-color 0.3s ease;
        z-index: 0;
        background-color: rgba(var(--blackOrWhiteColor), 0.2);
        background: var(--gramColor);
    }
    .switch-group.last button:last-child,
    .switch-group.first button:first-child {
        color: rgba(var(--lightOrDarkColor),1) !important;
    }
    .switch-group.first::before{
        transform: translateX(0);
    }
    .switch-group.last::before{
        transform: translateX(calc(100% + 4px));
    }
    .switch-group .gbtn {
        flex: 1;
        text-align: center;
        font-size: calc(var(--textSize) - 2px);
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        background-color: transparent;
        border: none !important;
        position: relative;
        transition: color 0.3s ease;
        z-index: 1;
    }
    .switch-group .selected::before {
        transform: translateX(0%);
    }
    .switch-group button:first-child.selected~ ::before {
        transform: translateX(0);
    }
    .switch-group button:last-child.selected~ ::before {
        transform: translateX(100%);
    }
    .layout-side-full .layout-related {
        padding-bottom: 0;
        overflow: auto;
        display: flex;
        overflow-x: hidden;
        flex-direction: column;
        /* skrolovanie sa nesmie pretiahnut mimo listu - inak potiahnutie dole
           na zaciatku zoznamu spusti refresh (nas aj prehliadacov) */
        overscroll-behavior: contain;
    }
    .d-visible.layout-side-full {
        overscroll-behavior: contain;
    }
    .layout-related .layout-related-scroll::-webkit-scrollbar {
        display: none;
    }
    .layout-side-full.step-1 .layout-related{
        height: 100%;
        overflow: hidden;
    }
    .layout-side-full.step-2 .layout-related{
        height: calc(100% - 40px);
    }
    .layout-side-full.step-3 .layout-related {
        height: calc(100% - 60px);
    }
    .layout-side-full.dragging .layout-related {
        height: 100vh;
        border-bottom-color: blue !important;
    }
    .layout-side-full .layout-related .layout-tab-section {
        all: unset;
    }
    .layout-side-full .layout-related .carditem-value .fld-basic .field-value {
        -webkit-line-clamp: unset;
    }
    .related-view {
        margin-bottom: 0;
    }
    .preview-item {
        border-bottom: var(--frameBorder);
        border-color: var(--borderDividerColor);
        padding-bottom: 8px;
        margin-bottom: 8px;       
        display: flex;
        align-items: center; 
    }
    .preview-item:nth-last-child(2),
    .preview-item:nth-last-child(1) {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }    
    .preview-value {
        font-size: calc(var(--textSize) - 2px);
        display: flex;
        justify-content: flex-end;
    }
    .preview-value .fld-lookup {        
        padding: 3px 10px;
        background-color: var(--appColorAlt);
        border-radius: var(--borderRadiusBig);
        overflow: hidden;
        position: relative;
    }
    .preview-lbl {
        line-height: 1.3em;
    }
    .top-field-icon {
        margin-left: 2px;
        margin-top: 15px;
    }
    .top-field-value {
        font-size: 12px; 
        display: flex;
    }
    .inplace-value .fld-lookup {        
        padding: 6px 12px;
        background-color: var(--appColorAlt);
        border-radius: var(--borderRadiusBig);
        display: flex;
        overflow: hidden;
        position: relative;
    }
    .inplace-value:not(.top-field-value) .fld-lookup{
        background-color: var(--groupBackground);
    }
    .view-header-icon {        
        max-width: 26px;
        max-height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: baseline;
        margin: 0;
    }
    .view-header-icon span:before,
    .view-header-icon span {
        font-size: 12px;
    }
    .related-header-icon {
        margin-right: 0;
        font-size: var(--textSize);
        padding: 0;
        min-width: 26px;
        justify-content: left;
    }
    .side-right .related-header-icon{
        justify-content: center;
    }
    .view-header-left-top > button {
        margin: 0;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .view-selection{
        top: 15px;
    }
    .related-header-container .view-selection{
        top: -50px;
    }
    .view-subtitle {
        font-size: var(--textSmallerSize);
        line-height: 1.25;
    }
    .file-drop-area {
        max-width: 100%;
        margin: 10px auto;
        border: 1px dashed var(--eventColor);
        outline: none;
    }
    .file-message{
        font-size: calc(var(--textSize) - 4px);
    }
    .choose-file-icon {
        padding-left: 0;
    }
    .related-header{
        width: 100%;
        border-radius: var(--borderRadiusMedium);
        margin-top: 8px;
    }
    .related-view-footer{
        margin-bottom: 24px;
        margin-left: auto;
    }
    .related-view.side-right .related-header {
        padding: 0;
    }
    .related-header-left {
        max-width: 65%;
        align-items: center;
        gap: 4px;
        font-size: calc(var(--textSize) - 2px);
        line-height: 1;
    }
    .related-adv-buttons{
        border-radius: var(--borderRadiusBig);
    }
    .related-header-counter {
        font-size: 10px;
        margin-left:0;
    }
    .related-tree-row {
        padding-bottom: 0;
        gap: 12px;
        width: calc(100% - 40px);
    }
    .related-tree-right {
        border-bottom: none;
        margin-bottom: 0;
        border-radius: 0;
    }
    .related-tree-right:hover,
    .related-tree-right.note{
        background-color: transparent;
    }
    .related-tree-row,
    .related-content-tree,
    .related-tree-content {
        padding-bottom: 0;
    }
    .related-tree-header .header-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fullwidth .related-content-tree{
        width: 100%;
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
    }
    .related-tree-row:not(:last-child)::before {
        left: 13px;
        border-color: rgba(var(--blackOrWhiteColor), 0.2);
    }
    .related-tree-content {
        background-color: var(--appWindowColor);
        border: 1px solid var(--borderLightColor);
        border-radius: var(--borderRadiusMedium);
        font-size: calc(var(--textSize) - 2px);
        line-height: 1.5;
        overflow: hidden;
        position: relative;
    }
    .related-tree-content .carditem-row{
        margin: 0;
    }
    .related-tree-content .carditem-value:empty{
        word-break: normal;
        display: block;
    }
    .related-tree-content .carditem-value .fld-basic .field-value {
        white-space: normal;
    }
    .related-tree-header a {
        font-size: calc(var(--textSize) - 2px) !important;
    }
    .header-date .fa.fa-clock:before,
    .related-tree-section-title,
    .related-tree-header .header-label {
        font-size: calc(var(--textSize) - 2px);
    }
    .related-tree-header .header-date {
        font-size: calc(var(--textSize) - 4px);
    }
    .related-tree-icon{
        font-size: var(--textSmallSize);
        width: 26px;
        height: 26px;
        line-height: 26px;
        background-color: var(--templateInputBackground);
    }
    .related-buttons{
        top: 12px;
        right: 0;
    }
    .related-buttons button{
        font-size: calc(var(--textSize) - 2px);
    }
    .view-navigation-center input {
        height: 2rem;
    }
    .related-tree-user{
        left: 12px;
        padding: 4px;
    }
    .view-navigation-right button,
    .view-navigation-right .btn-group.arrow>button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .carditem-value .field-option,
    .related-no-data,
    .related-header-title {
        font-size: calc(var(--textSize) - 4px);
    }
    .carditem {
        margin-bottom: 0;
        box-shadow: unset;
        border-radius: unset;
        border-bottom: unset;
    }
    .carditem:last-child {
        border-bottom: var(--frameBorder);
    }
    .btn-group.arrow>button,
    .settings-table-list tr.grid-row-second td table.settings-table-list tr td:first-child,
    .view-header-right .gbtn.btn-tool,
    .settings-main .related-item,
    .related-view .related-adv-buttons button,
    .layout-container .view-header-right button,
    .filter-footer button,
    .detail-view-buttons button,
    .modal-footer button.gbtn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        max-height: 40px;
        height: auto;
        min-height: auto;
    }
    .settings-main .related-item-title:has(.chk-switch) {
        gap: 30px;
    }
    .ui-placeholder,
    .ui-sortable-placeholder,
    .ui-sortable-placeholder td {
        height: 40px;
    }
    .app-info-content {
        margin: 16px 12px 0;
    }
    .app-info-content .alert{
        padding: 8px 12px;
        border-radius: var(--borderRadius);
        margin-bottom: 8px;
    }
    .app-info-content .alert a{
        font-weight: var(--textBold);
        padding: 3px 10px;
        background-color: #15572420;
        border-radius: var(--borderRadiusBig);
        overflow: hidden;
        position: relative;
        line-height: 2;
    }
    .app-refresh {
        position: absolute;
        z-index: 99;
        width: 100%;
        height: 50px;
        transform: translate(-50%);
        top: 8px;
        left: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .app-refresh-icon {
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: var(--appWindowColor); 
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app-refresh-icon.active {
        animation: spin 1s linear infinite;
    }
    .app-tooltip.d-none{
        opacity: 0;
        visibility: hidden;
        display: flex !important;
        max-height: 0;
    }
    .app-tooltip {
        position: absolute;
        top: 70px;
        z-index: 1000;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 16px;
        border-radius: var(--borderRadiusBig);
        font-size: calc(var(--textSize) - 4px);
        font-weight: 400;
        color: rgba(var(--whiteColor), 1);
        background: rgba(var(--grayColor), .9);
        width: max-content;
        max-width: 250px;
        opacity: 1;
        visibility: visible;
        max-height: 100px;
        transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
    }
}
html[data-device='phone'][data-theme='dark'] .layout-container .layout-buttons button {
    background-color: var(--appColorAlt) !important;
}
html[data-device='phone'][data-theme='light'] .layout-related .related-header {
    background-color: #e5e5e5;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
html[data-device='phone'] {
    .modal-size-full .modal-content{
        max-height: none;
    }
    .view-stage {
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-radius: var(--borderRadius);
        margin-top: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .stage-frame ul li {
        min-width: calc(100vw - 220px);
    }
    .app-side-mobile {
        width: 300px;
        max-width: 300px;
    }
    @media (max-width: 576px) {
        body:not(.tablet) .app-side-mobile {
            width: 70%;
            max-width: 70%;
        }
    }
    .dash-item {
        margin-right: 0;
    }
    .settings-side {
        width: 100% !important;
    }
    .settings-side-item a span.fad {
        font-size: var(--textSize);
        margin-right: 10px;
    }
    .settings-desc {
        text-align: justify;
    }
    .settings-desc a {
        text-decoration: underline !important;
        text-decoration-style: dashed !important;
    }
    .cardlist-item-header {
        font-weight: var(--textBold);
        font-size: calc(var(--textSize) - 2px);
    }
    .cardlist-item-check {
        min-width: 3rem;
    }
    .dropdown-menu.show {
        max-width: 100%;
        border-radius: var(--borderRadiusBig);
        padding: .7rem 0;
    }
    .dropdown.show .dropdown-menu.show{
        left: 0;
    }
    body:not(.tablet) .dropdown-menu.show {
        min-width: 315px;
    }
    body.tablet .dropdown-menu.show {
        min-width: 315px;
    }
    body:not(.tablet) .dropdown.show .dropdown-menu.show {
        min-width: calc(100vw - 10px);
    }
    body:not(.tablet) .modal-body.full .dropdown-menu.show {
        min-width: calc(100vw - 48px);
    }
    .modal-body.full .dropdown.bootstrap-select .dropdown-menu.show {
        min-width: 100%;
    }
    .modal-body.full .dropdown.show>.btn-light.dropdown-toggle, 
    .modal-body.full .dropdown.show>.btn-light.dropdown-toggle:focus,
    .modal-body.full .dropdown.bootstrap-select .dropdown-menu.show {
        background-color: var(--templateInputBackground);
    }    
    .bootstrap-select .dropdown-menu.show {
        left: 0 !important;
    }
    .section-small.two .field-row:last-child .bootstrap-select .dropdown-menu.show{
        left: -10px !important;
    }
    .dropdown-menu[x-placement="bottom-end"]::before {
        left: calc(100% - 25px);
        display: none;
    }
    .dropdown-menu[x-placement="bottom-start"]::before {
        left: 50%;
        display: none;
    }
    body:not(.tablet) #autocomplete-list.lookup-dropdown {
        width: calc(100% - 24px);
        min-width: 280px;
    }
    body:not(.tablet) .modal-phone.show + #autocomplete-list.lookup-dropdown {
        width: calc(100% - 32px);
        min-width: 280px;
    }
    #autocomplete-list.lookup-dropdown::before {
        content: none;
    }
    .app-content .dropdown-menu-right.show,
    .header-menu .dropdown-menu-right.show {
        width: auto;
        min-width: 10rem;
        max-width: calc(100vw - 24px);
        position: fixed !important;
        left: unset !important;
        transform: translateX(-12px) !important;
        top: 50px !important;
        right: 0 !important;
    }
    .dropdown-menu-right.show::before {
        display: none;
    }
    .modal-body::-webkit-scrollbar,
    .modal-body .view-content::-webkit-scrollbar{
        display: none;
    }
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: var(--borderRadiusSmaller);
    background-color: transparent;
}
::-webkit-scrollbar-track {
    width: 8px;
    border-radius: var(--borderRadiusSmaller);
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    width: 8px;
    background-color: var(--templateScrollBarThumb);
    border-radius: var(--borderRadiusSmaller);
    border: 2px solid transparent;
    background-clip: padding-box;
}
@supports (-webkit-touch-callout: none) {
    ::-webkit-scrollbar-thumb{
        scrollbar-width: thin;
    }
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--templateScrollBarThumbActive);
    border-radius: var(--borderRadiusSmaller);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--templateScrollBarThumbActive);
}
::-webkit-scrollbar-corner {
    background: transparent;
}
@supports (-moz-appearance:none) {
    * {
		scrollbar-width: thin;
		scrollbar-color: var(--templateScrollBarThumb) transparent;
	}
}
.body.presentation {
    background-color: var(--presentationBackColor);
    position: relative;
}
.body.presentation.developer {
    background-image: radial-gradient(var(--presentationBackTickColor) 1px, transparent 1px);
    background-size: 20px 20px;    
}
.body.presentation .app-root {
    width: 1280px;
    height: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 20px solid var(--presentationBorderColor);
    border-radius: 30px; 
}
.body.presentation .modal {
    position: absolute;    
    display: none;
    z-index: 100;
}
.body.presentation .modal-dialog {
    align-content: center;
}
.body.presentation .modal.fade.show.modal-stack  {
    z-index: initial;
}
.body.presentation .modal-backdrop.show {
    display: none;
}
.body.presentation .modal-content {
    height: initial;
    margin: auto;
    max-height: 600px;
    max-width: 900px;
}
.body.presentation.app-only .app-side,
.body.presentation.app-only .app-header {
    display: none;
}
.body.presentation .modal-size-full-height .modal-content {
    height: 100%;
}
.body.presentation.gradient {
    background: #2A7B9B;
    background: linear-gradient(135deg, #DFF3E6 0%, #EFF9F2 50%, #DFF3E6 100%);
}
.body.presentation.gradient .app-root {
    border: 10px solid #47B972;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 45px;
}
.ai-col-analyze-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 2rem;
}
.ai-col-analyze-bar {
    width: 100%;
    max-width: 380px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 200% 100%;
    animation: ai-bar-sweep 1.5s linear infinite;
}
@keyframes ai-bar-sweep {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.ai-col-analyze-dots {
    display: flex;
    gap: .55rem;
    margin-top: 1.4rem;
}
.ai-col-analyze-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a855f7;
    animation: ai-dot-bounce 1.4s ease-in-out infinite;
}
.ai-col-analyze-dots span:nth-child(2) { animation-delay: .22s; }
.ai-col-analyze-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes ai-dot-bounce {
    0%, 80%, 100% { transform: scale(.55); opacity: .35; }
    40%           { transform: scale(1);   opacity: 1; }
}

.import-modal-body {
  background-color: var(--appWindowColor);
  padding: 12px;
  border-radius: var(--radiusSurface);
}

.import-dz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 64px 16px 12px;
    border: 2px dashed var(--eventColor);
    border-radius: var(--borderRadiusMedium, 8px);
    transition: background-color .15s linear, border-color .15s linear;
}
.import-dz.is-dragover {
    background-color: var(--appColor);
    border-color: var(--gramColor);
}
.import-dz-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: rgba(var(--textLightColor), .12);
    color: var(--gramColor);
    font-size: 20px;
}
.import-dz-title {
    font-size: calc(var(--textSize) + 2px);
    color: var(--textColor);
}


.import-dz-sub {
    font-size: var(--textSmallSize);
    color: rgba(var(--textLightColor), 1);
    padding: 6px 12px;
    background-color: var(--groupBackground);
    border-radius: var(--radiusControl);
    margin-top: 32px;
}

.import-dz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
/* the invisible file input fills the "Upload file" button */
.import-dz-upload {
    position: relative;
    display: inline-flex;
}
.import-dz-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 14px;
}
.import-dz-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: var(--textSmallSize);
    color: var(--gramColor);
}
.import-dz-link:hover {
    text-decoration: underline;
}
.import-dz-link.disabled {
    cursor: default;
    opacity: .45;
    color: rgba(var(--textLightColor), 1);
    pointer-events: auto;
}
.import-dz-link.disabled:hover {
    text-decoration: none;
}
.import-paste-hint {
    margin-bottom: 8px;
    font-size: var(--textSmallSize);
    color: rgba(var(--textLightColor), 1);
}
.import-paste-area {
    width: 100%;
    min-height: 220px;
    padding: 8px 10px;
    border: var(--frameBorder);
    border-radius: var(--borderRadius);
    background-color: transparent;
    color: var(--textColor);
    font-family: monospace;
    font-size: var(--textSmallSize);
    white-space: pre;
    resize: vertical;
}
.import-col-samples {
    display: block;
    font-size: .72em;
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.fd-section-columns {
    display: grid;
    gap: 12px 24px;
    align-items: start;
}

.fd-designer-body {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}
.fd-sections {
    flex: 1 1 auto;
    min-width: 0;
}
.fd-sections > .fd-section:first-child {
    margin-top: 16px !important;
}
.fd-palette-panel {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--borderColor);
    background: var(--appWindowColor);
    border-top-left-radius: var(--borderRadiusMedium);
    border-top-right-radius: var(--borderRadiusMedium);
    border-bottom: none;
}
.fd-palette-header {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borderColor);
}
.fd-palette-panel .fd-palette {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-left: none;
    align-self: auto;
}
.fd-palette {
    align-self: stretch;
    border-left: 1px solid var(--borderColor);
    padding: 12px 16px;
    gap: 0;
}
.fd-palette > .row {
    font-weight: var(--textBold);
    color: var(--textLightColor);
    margin-bottom: 8px;
}
.fd-palette-item.layout-component {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 4px 0;
    padding: 6px 10px;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: var(--appWindowColor);
    cursor: grab;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    min-height: 30px;
}
.fd-palette-item.layout-component:hover {
    border-color: var(--eventColor);
    background-color: var(--appColor);
}

.modal-size-xl {
    width: 1100px;
    max-width: 95vw;
}

.fd-designer-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: calc(100vh - 150px);
    overflow: hidden;
}
.fd-designer-root > .fd-designer-body {
    flex: 1 1 auto;
    min-height: 0;
}
.fd-designer-root .fd-sections {
    overflow-y: auto;
    min-height: 0;
}
.fd-designer-root .fd-palette {
    overflow-y: auto;
    min-height: 0;
}

.fd-dragging .customize-toolbar,
.fd-dragging .customize-frame {
    opacity: 0 !important;
    transition: none !important;
    pointer-events: none !important;
}
.fd-dragging .layout-component,
.fd-dragging .layout-component * {
    transition: none !important;
}

.layout-component.fd-component-hidden {
    opacity: 0.45;
}

.layout-component .field-row.disabled,
.layout-component .field-row.disabled .field-caption {
    color: var(--disabledTextColor);
}

.fd-mode-toggle .gbtn {
    opacity: 0.45;
}
.fd-mode-toggle .gbtn.fd-mode-active {
    opacity: 1;
    color: var(--eventColor);
}

.datatable {
    display: flex;
    flex-direction: column;
    gap: 8px;
    --datatableSelectedBg: #e8f1fd;
    --datatableSelectedBorder: #4f8fd8;
}
.datatable-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.datatable-toolbar .datatable-search {
    flex: 1 1 220px;
    min-width: 180px;
}
.datatable-toolbar .datatable-search .view-search-input {
    width: 100%;
}
.datatable-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}
.datatable-filter-label {
    white-space: nowrap;
    font-size: var(--textSmallSize);
}
.datatable-filter-menu .dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
}
.datatable-filter-reset {
    cursor: pointer;
    color: var(--eventColor);
    font-weight: var(--textBoldLight);
    white-space: nowrap;
}
.datatable-filter-reset:hover {
    text-decoration: underline;
}
.datatable-filter-menu .dropdown-root {
    padding: 2px 8px 6px 8px;
}
.datatable-filter-menu .dropdown-root .dropdown-item-search {
    flex: 1 1 auto;
    width: 100%;
}
.datatable-filter-menu input.dropdown-item-search {
    height: var(--btnHeight);
    padding: 0 8px;
    border: var(--frameBorder);
    border-radius: var(--inputBorderRadius);
    background: var(--appWindowColor);
    color: var(--textColor);
    font-size: var(--textSize);
}
.datatable-filter-menu .datatable-filter-items {
    min-width: 220px;
}
.datatable-filter-btn.datatable-filter-active {
    border-color: var(--eventColor);
    color: var(--eventColor);
}
.datatable-filter select {
    height: var(--btnHeight);
    border: var(--frameBorder);
    border-radius: var(--inputBorderRadius);
    background: var(--appWindowColor);
    color: var(--textColor);
    font-size: var(--textSize);
    padding: 0 6px;
    max-width: 220px;
}

.datatable-bar {
    position: relative;
    min-height: calc(var(--btnHeight) + 14px);
}
.datatable-footer,
.datatable-selection {
    position: absolute;
    inset: 0;
}
.datatable-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--borderRadius);
    background: var(--hotBackgroundLight);
    border: var(--frameBorder);
    z-index: 2;
}
.datatable-selection-count {
    font-weight: var(--textBoldLight);
    white-space: nowrap;
}

.datatable-wrap {
    overflow-x: auto;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadiusMedium);
}
.datatable-table {
    margin-bottom: 0;
}
.datatable-table.table th {
    text-align: left;
    white-space: nowrap;
    padding-left: .75rem;
}
.datatable-table.table tr th:first-child:not(.datatable-check-col) {
    width: auto;
}
.datatable-table.table td {
    background: var(--appWindowColor);
    border: 1px solid var(--borderColorMedium);
}
.datatable-table.table tr th.datatable-check-col,
.datatable-table.table tr td.datatable-check-col {
    width: 36px;
    min-width: 36px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    white-space: nowrap;
}
.datatable-table.table tr th.datatable-actions-col,
.datatable-table.table tr td.datatable-actions-col {
    width: 44px;
    min-width: 44px;
    padding-left: 2px;
    padding-right: 4px;
    text-align: right;
    white-space: nowrap;
}
.datatable-table.table .datatable-check-col .gchk {
    margin: 0;
    width: 16px;
}

.datatable-table.table tbody tr.datatable-row.selected > td {
    background-color: var(--datatableSelectedBg);
}
.datatable-table.table tbody tr.datatable-row.selected > td:first-child {
    border-left-color: var(--datatableSelectedBorder);
}
.datatable-table.table tbody tr.datatable-row.selected > td:last-child {
    border-right-color: var(--datatableSelectedBorder);
}
.datatable-table.table tbody tr.datatable-row.first-selected > td {
    border-top-color: var(--datatableSelectedBorder);
}
.datatable-table.table tbody tr.datatable-row.last-selected > td {
    border-bottom-color: var(--datatableSelectedBorder);
}
.datatable-table.table tbody tr.datatable-row.first-selected > td:first-child {
    border-top-left-radius: var(--borderRadius);
}
.datatable-table.table tbody tr.datatable-row.first-selected > td:last-child {
    border-top-right-radius: var(--borderRadius);
}
.datatable-table.table tbody tr.datatable-row.last-selected > td:first-child {
    border-bottom-left-radius: var(--borderRadius);
}
.datatable-table.table tbody tr.datatable-row.last-selected > td:last-child {
    border-bottom-right-radius: var(--borderRadius);
}
.datatable-clickable {
    cursor: pointer;
}

.datatable-table.table td.datatable-link-col .grid-row-title-caption,
.datatable-table.table td.datatable-link-col > .field-value {
    color: var(--eventColor);
}
.datatable-table.table td.datatable-link-col:hover .grid-row-title-caption,
.datatable-table.table td.datatable-link-col:hover > .field-value {
    text-decoration: underline;
}
.datatable-table.table .grid-row-title {
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.datatable-table.table .grid-row-title-icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    color: rgba(var(--textLightColor), 1);
}
.datatable-table.table .grid-row-title-caption {
    min-width: 0;
}
.datatable-sortable {
    cursor: pointer;
    user-select: none;
}
/*.datatable-sortable:hover {
    color: var(--eventColor);
}*/
.datatable-sort-icon {
    margin-left: 4px;
}
.datatable-empty {
    text-align: center;
    padding: 24px 8px !important;
}

.datatable-badge {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--borderRadiusSmall);
    font-size: var(--textSmallerSize);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.datatable-badge.badge-warning {
    color: #8a5b00;
    background: #fdf0d0;
}
.datatable-badge.badge-ok {
    color: #1c6b3c;
    background: #dcf3e5;
}

.datatable-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
}
.datatable-footer-info,
.datatable-footer-page {
    font-size: var(--textSmallSize);
    white-space: nowrap;
}
.datatable-footer-nav {
    align-items: center;
    gap: 4px;
}

.settings-info {
    margin-bottom: 10px;
    font-size: var(--textSize);
}

@media (max-width: 576px) {
    .datatable-table .hide-mobile {
        display: none;
    }
    .datatable-toolbar .datatable-filter select {
        max-width: 100%;
    }
    .datatable-bar {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .datatable-footer,
    .datatable-selection {
        position: static;
    }
    .datatable-selection {
        flex-wrap: wrap;
    }
}

html[data-theme='dark'] .datatable {
    --datatableSelectedBg: #22344c;
    --datatableSelectedBorder: #5b8fc9;
}
html[data-theme='dark'] .datatable-badge.badge-warning {
    color: #f2c877;
    background: #4a3a12;
}
html[data-theme='dark'] .datatable-badge.badge-ok {
    color: #8fdcaa;
    background: #14361f;
}


.history-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: var(--borderRadiusSmall);
    font-size: var(--textSmallSize);
    white-space: nowrap;
    color: var(--textColor);
    background: rgba(var(--blackOrWhiteColor), 0.05);
    border-radius: var(--borderRadiusMedium);
    font-weight: var(--textBold);
}
.history-action-create {
    color: #1c6b3c;
    background: #dcf3e5;
}
.history-action-update {
    color: #1d5aa8;
    background: #e2edfb;
}
.history-action-delete {
    color: #9a3126;
    background: #fbe3e0;
}

.history-deleted {
    text-decoration: line-through;
    color: rgba(var(--textLightColor), 1);
}


.datatable-table tr.history-detail-row > td.history-detail-cell {
    max-width: none;
    padding: 0;
    background: var(--hotBackgroundTable);
}
.history-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 14px 10px 46px;
    background-color: var(--appColor);
}
.history-change {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr 20px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--borderRadius);
    background: var(--appWindowColor);
}
.history-change-field {
    font-weight: var(--textBoldLight);
    color: var(--textColor);
    font-weight: var(--textBold);
}
.history-change-old {
    opacity: 0.6;
    text-decoration: line-through;
}
.history-change-arrow {
    text-align: center;
}
.history-value-empty {
    font-style: italic;
}

.history-detail .history-change-old span,
.history-detail .history-change-new span,
.history-detail .history-change-old div,
.history-detail .history-change-new div {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.history-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 576px) {
    .history-detail {
        padding: 8px 10px;
    }
    .history-change {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .history-change-arrow {
        text-align: left;
        transform: rotate(90deg);
        transform-origin: left center;
    }
}

html[data-theme='dark'] .history-action-create {
    color: #8fdcaa;
    background: #14361f;
}
html[data-theme='dark'] .history-action-update {
    color: #9cc4f0;
    background: #16304f;
}
html[data-theme='dark'] .history-action-delete {
    color: #f0a79c;
    background: #431f1a;
}
.history-action-restore {
    color: #7a5a12;
    background: #fbf0d8;
}
html[data-theme='dark'] .history-action-restore {
    color: #e8c983;
    background: #40340f;
}

.datatable-filter-menu .dropdown-item {
    padding-right: 34px;
}
.datatable-filter-menu .dropdown-item.dropdown-item-selected {
    padding-right: 34px !important;
}

.value-picker {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.value-picker-search {
    padding-bottom: 6px;
    align-items: center;
    gap: 10px;
}
.value-picker-reset {
    cursor: pointer;
    color: var(--eventColor);
    font-weight: var(--textBoldLight);
    font-size: var(--textSmallSize);
    white-space: nowrap;
    flex: 0 0 auto;
}
.value-picker-reset:hover {
    text-decoration: underline;
}
input.value-picker-input {
    width: 100%;
    height: var(--btnHeight);
    padding: 0 8px;
    border: var(--frameBorder);
    border-radius: var(--inputBorderRadius);
    background: var(--appWindowColor);
    color: var(--textColor);
    font-size: var(--textSize);
    box-shadow: none;
}
input.value-picker-input:focus {
    outline: none;
    border-color: var(--eventColor);
}
.value-picker-list {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -1rem;
}
.value-picker-sel:not(.d-none) + .value-picker-token:not(.d-none),
.value-picker-sel:not(.d-none) + .value-picker-token.d-none + .value-picker-items:not(.d-none),
.value-picker-token:not(.d-none) + .value-picker-items:not(.d-none) {
    border-top: 1px solid var(--borderDividerColor);
}
.value-picker .dropdown-item {
    padding-right: 34px;
    align-items: flex-start;
}
.value-picker .dropdown-item.dropdown-item-selected {
    padding-right: 34px !important;
}
.value-picker-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
    margin-right: 15px;
}
.value-picker-body .dropdown-caption {
    margin-right: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.value-picker .dropdown-item-selected .dropdown-caption {
    color: var(--textColor);
}
.value-picker-skeleton {
    display: inline-block;
    align-self: flex-start;
    width: var(--w, 70%);
    height: 0.85em;
    margin: 0.15em 0;
}
.value-picker-body .subtext {
    font-size: var(--textSmallSize);
    color: rgba(var(--textLightColor), 1);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.value-picker-mark {
    --color: rgba(var(--textLightColor), 1);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 9px;
    margin-top: 1px;
    min-width: 16px;
    justify-content: center;
}
.value-picker-mark .icon {
    color: var(--color);
}
.value-picker-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color);
}
.value-picker.picker-badge .value-picker-mark {
    padding: 3px 6px;
    border-radius: var(--inputBorderRadius);
    background-color: color-mix(in srgb, var(--color) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--color) 30%, transparent);
}
.value-picker-item-token .dropdown-caption {
    font-style: italic;
}
.value-picker-status {
    padding: 6px 18px;
    font-size: var(--textSmallSize);
}
.view-filter-dialog.dropdown-menu.show:has(.value-picker) {
    width: 340px;
}
.value-picker-loading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-filter {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.date-filter-current {
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-weight: var(--textBoldLighter);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: large;
}
.date-filter-body {
    align-items: flex-start;
    gap: 0;
}
.date-filter-main {
    width: 322px;
    flex: 0 0 auto;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.date-filter-side {
    border-left: 1px solid var(--borderDividerColor);
    margin-left: 12px;
    padding-left: 12px;
    max-height: 60vh;
    overflow-y: scroll;
}
.date-filter-side-title {
    font-size: var(--textSmallSize);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--textLightColor), 1);
    margin-bottom: 5px;
}
.date-filter-section-title {
    font-size: var(--textSmallSize);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--textBoldLight);
    color: rgba(var(--textLightColor), 1);
    margin: 0 0 6px 2px;
}
* + .date-filter-section-title {
    margin-top: 14px;
}
.date-filter-group {
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: var(--borderRadiusMedium);
    background: color-mix(in srgb, var(--df-accent) 5%, transparent);
}
.date-filter-group + .date-filter-group {
    margin-top: 4px;
}
.date-filter-group.df-day    { --df-accent: #2563eb; }
.date-filter-group.df-week   { --df-accent: #16a34a; }
.date-filter-group.df-month  { --df-accent: #7c3aed; }
.date-filter-group.df-year   { --df-accent: #d97706; }
html[data-theme='dark'] .date-filter-group.df-day    { --df-accent: #7aa7f0; }
html[data-theme='dark'] .date-filter-group.df-week   { --df-accent: #4ec98a; }
html[data-theme='dark'] .date-filter-group.df-month  { --df-accent: #b18cf0; }
html[data-theme='dark'] .date-filter-group.df-year   { --df-accent: #e0a94a; }
html[data-theme='dark'] .date-filter-group {
    background: color-mix(in srgb, var(--df-accent) 9%, transparent);
}
.date-filter-group .date-filter-btns {
    min-width: 0;
}
.date-filter-group-head {
    flex: 0 0 76px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--df-accent, var(--textColor));
}
.date-filter-group-name {
    font-weight: var(--textBoldLight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.date-filter-group-title {
    font-size: var(--textSmallSize);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--textLightColor), 1);
    margin-bottom: 5px;
}
.date-filter-btns {
    display: flex;
}
.date-filter-btns.end {
    justify-content: flex-end;
    margin-top: 8px;
}
.date-filter-btns.split {
    gap: 6px;
}
.date-filter-btns.split + .date-filter-btns.split {
    margin-top: 6px;
}
.date-filter-btns .btn-group {
    display: flex;
    width: 100%;
}
.date-filter-btns.end .btn-group {
    width: auto;
}
.date-filter-btns .gbtn {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.date-filter-btns .gbtn.icon-only {
    flex: 0 0 auto;
}
.date-filter-btns button.gbtn.small:not(.icon-only) {
    flex-wrap: nowrap;
}
.date-filter-wide .date-filter-more-arrow {
    margin-left: auto;
}
.date-filter-nav {
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
}
.date-filter-panel {
    padding-top: 2px;
}
.date-filter-panel .date-filter-group-title {
    margin-top: 10px;
}
.date-filter-grid {
    display: grid;
    gap: 5px;
}
.date-filter-grid-month {
    grid-template-columns: repeat(3, 1fr);
    min-width: 200px;
}
.date-filter-week-rows {
    display: flex;
    flex-direction: column;
    min-width: 230px;
}
.date-filter-week-row {
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--borderLightColor);
}
.date-filter-week-month {
    flex: 0 0 75px;
    width: 75px;
    font-size: var(--textSmallSize);
    color: rgba(var(--textLightColor), 1);
    border-right: 1px solid var(--borderColorMedium);
}
.date-filter-week-cells {
    gap: 3px;
}
.date-filter-week-cells .date-filter-cell {
    flex: 0 0 30px;
}
.date-filter-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: var(--inputBorderRadius);
    cursor: pointer;
    font-size: var(--textSize);
    color: var(--textColor);
}
.date-filter-cell:hover {
    background: var(--appHoverColor, rgba(127,127,127,0.12));
}
.date-filter-cell.selected {
    border-color: var(--eventColor);
    color: var(--eventColor);
    background: color-mix(in srgb, var(--eventColor) 12%, transparent);
    font-weight: var(--textBoldLight);
}
.date-filter-cal {
    padding-top: 20px;
}
.date-filter-cal .ui-calendar {
    min-width: 210px;
}
.date-filter-cals {
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
/* Vybrany interval - kalendar sam vie zvyraznit len jeden den (SelectedDay),
   obe hranice aj pas medzi nimi kresli MarkRangeDays po kazdom prekresleni. */
.date-filter-cals .ui-calendar-day.range-edge {
    background-color: var(--eventColor);
    color: #fff;
    font-weight: var(--textBoldLight);
    border-radius: var(--borderRadiusBig);
    cursor: pointer;
}
.date-filter-cals .ui-calendar-day.range-in {
    background-color: color-mix(in srgb, var(--eventColor) 14%, transparent);
    color: var(--textColor);
    border-radius: 0;
    cursor: pointer;
}
.view-filter-dialog.dropdown-menu.show:has(.date-filter) {
    width: auto;
    max-width: min(94vw, 860px);
}