/* #region znDefaults */
body .znButton .znButtonText,
body .znLinkButton .znButtonText,
body .znFileUpload input[type="file" i],
body .znWindowWrapper .znWindow .znWindowContent,
body .znPopupWrapper .znPopup .znPopupContent,
body .znTable,
body .znSelectWrapper .znSelect,
body .znSelectWrapper .znSelect .znSelectInput,
body .znMultiSelectWrapper .znMultiSelect,
body .znMultiSelectWrapper .znMultiSelect .znMultiSelectInput,
body .znTextArea,
body .znTextBox,
body .znDatePickerWrapper .znDatePicker,
body .znTimePickerWrapper .znTimePicker,
body .znDateTimePickerWrapper .znTimeDatePicker,
body .znRadioButtonList,
body .znCheckBoxList,
body .znTooltip,
body .znIcon,
body .znColorPickerWrapper .znColorPicker,
body .znToggleButton .znToggleButtonText,
body .znSliderWrapper .znSlider,
body .znAlert {
    font-size: 1rem;
}

body .znLink .znLinkIcon,
body .znIconButton,
body .znButton .znButtonIconLeft,
body .znButton .znButtonIconRight,
body .znLink .znLinkIconLeft,
body .znLink .znLinkIconRight {
    font-size: 0.875rem;
}

body .znVisible,
body *[zn-visible='true'] {
    visibility: visible;
}

body .znHidden,
body *[zn-visible='false'] {
    visibility: hidden;
}

body .znVisuallyHidden {
    position: absolute;
    left: -9999px;
    width: 0px;
    height: 0px;
    overflow: hidden;
}

body .znInvalid,
body *[zn-valid='false'] {
    border-color: #B60000;
    background: #fbd3d3;
}

    body *[zn-valid='false'] .znDatePicker,
    body *[zn-valid='false'] .znTimePicker,
    body *[zn-valid='false'] .znTimePickerIcon,
    body *[zn-valid='false'] .znDateTimePicker {
        border-color: #B60000;
    }

body .znResize,
body *[zn-resize="true"] {
    resize: vertical;
    overflow: auto;
    max-width: 100vw;
}

body .znFullWidth,
body *[zn-fullwidth="true"] {
    width: 100vw;
}


body *[zn-draggable="true"] {
    cursor: move;
}

body *[zn-wrap="true"] {
    white-space: normal;
}

body .znFloatLeft {
    float: left;
}

body .znFloatRight {
    float: right;
}

body .znClearBoth {
    clear: both;
}

body .znNoWrap {
    white-space: nowrap;
}

body .znFlexLayout {
    display: flex;
    gap: 10px;
}

    body .znFlexLayout.znFlexDirectionRow {
        flex-direction: row;
    }

    body .znFlexLayout.znFlexDirectionColumn {
        flex-direction: column;
    }

    body .znFlexLayout.znFlexGapNone,
    body .znFlexItem.znFlexGapNone {
        gap: 0px;
    }

    body .znFlexLayout.znFlexGapFivePx,
    body .znFlexItem.znFlexGapFivePx {
        gap: 5px;
    }

    body .znFlexLayout.znFlexGapTenPx,
    body .znFlexItem.znFlexGapTenPx {
        gap: 10px;
    }


    body .znFlexLayout > div {
        flex-shrink: 1;
        flex-grow: unset;
        justify-content: flex-start;
        margin: 0;
    }

    body .znFlexLayout.znFlexGrow > div {
        flex-grow: 1;
    }

    body .znFlexLayout > div.znFlexStart {
        justify-content: flex-start;
        display: flex;
    }

    body .znFlexLayout > div.znFlexCenter {
        justify-content: center;
        display: flex;
    }

    body .znFlexLayout > div.znFlexEnd {
        justify-content: flex-end;
        display: flex;
    }

body .znTableCell .znFlexLayout {
    margin: 0 0;
}

body .znFlexStart {
    display: flex;
    flex: auto;
    justify-content: flex-start;
    align-items: center;
}

body .znFlexCenter {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
}

body .znFlexEnd {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    align-items: center;
}

.znFlexItem.znAlignTop {
    align-items: flex-start;
}

body .znHorizontal {
    display: flex;
}

body .znVertical {
    display: flex;
    flex-direction: column;
}


@keyframes znSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes znShow {
    99% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}




/* #endregion znDefaults */

/* #region znLink */

body a.znLink,
body a.znLink:link,
body a.znLink:visited,
body a.znLink:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    min-height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
}

    body a.znLink:focus-visible {
        outline: 2px dotted;
    }

    body a.znLink:hover,
    body a.znLink:active {
        text-decoration: none;
        outline: 0px none;
    }

    body a.znLink span.znLinkText {
        font-weight: 600;
        text-decoration: underline;
    }

    body a.znLink .znLinkIconRight {
        margin: 0 0 0 5px;
    }

    body a.znLink .znLinkIconLeft {
        margin: 0 5px 0 0;
    }

    body a.znLink:hover span.znLinkText,
    body a.znLink:active span.znLinkText {
        text-decoration: none;
    }

    body a.znLink span.znLinkIcon {
        margin: 0 0 1px 5px;
    }


    body a.znLink.znDisabled {
        cursor: default;
    }

        body a.znLink.znDisabled .znLinkText {
            opacity: 0.5;
        }

        body a.znLink.znDisabled:hover,
        body a.znLink.znDisabled:active,
        body a.znLink.znDisabled:focus {
            outline: 0 none;
            text-decoration: underline;
        }


/* #endregion znLink */

/* #region znIconLink */

body a.znIconLink,
body a.znIconLink:link,
body a.znIconLink:visited,
body a.znIconLink:hover {
    color: #000;
    cursor: pointer;
    min-height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
}

    body a.znIconLink:focus-visible {
        outline: 2px dotted;
    }

body a.znIconLink {
    display: inline-flex;
    padding: 4px 8px;
    box-sizing: border-box;
}

    body a.znIconLink span.znLinkIcon {
        vertical-align: middle;
        margin: 0;
    }

        body a.znIconLink span.znLinkIcon span.znLinkIconText {
            width: 1px;
            height: 1px;
            overflow: hidden;
            position: absolute;
        }

    body a.znIconLink.znDisabled {
        cursor: default;
    }

        body a.znIconLink.znDisabled:hover,
        body a.znIconLink.znDisabled:active,
        body a.znIconLink.znDisabled:focus {
            outline: 0 none;
            text-decoration: underline;
        }

/* #endregion znIconLink */

/* #region znButtonLink */
body a.znButtonLink,
body a.znButtonLink:hover,
body a.znButtonLink:active,
body a.znButtonLink:focus {
    background: #000;
    color: #FFF;
    border: 0px none;
    padding: 4px 10px;
    min-width: 64px;
    cursor: pointer;
    height: 32px;
    line-height: 1;
    min-height: 24px;
    min-width: 24px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

    body a.znButtonLink:hover,
    body a.znButtonLink:active,
    body a.znButtonLink:focus {
        background: #888;
    }

    body a.znButtonLink:focus-visible {
        outline: 2px dotted #000;
    }

    body a.znButtonLink .znLinkText {
        font-weight: 500;
    }

    body a.znButtonLink .znLinkIconRight {
        margin: 0 0 0 5px;
    }

    body a.znButtonLink .znLinkIconLeft {
        margin: 0 5px 0 0;
    }

    body a.znButtonLink.znDisabled {
        background: #000;
        cursor: default;
        opacity: 0.5;
    }

        body a.znButtonLink.znDisabled:hover,
        body a.znButtonLink.znDisabled:active,
        body a.znButtonLink.znDisabled:focus {
            outline: 0 none;
            background: #000;
            opacity: 0.5;
        }

/* #endregion znButtonLink */

/* #region znButton */

body .znButtonWrapper {
    display: inline-flex;
}

    body .znButtonWrapper .znButton {
        background: #000;
        color: #FFF;
        border: 0px none;
        padding: 4px 10px;
        min-width: 64px;
        vertical-align: middle;
        cursor: pointer;
        height: 32px;
        line-height: 1;
        min-height: 24px;
        min-width: 24px;
    }

        body .znButtonWrapper .znButton.grijs {
            background: #f9f9f9;
            color: #000;
            border: 1px solid #AAA;
        }

        body .znButtonWrapper .znButton:hover,
        body .znButtonWrapper .znButton:active,
        body .znButtonWrapper .znButton:focus {
            background: #888;
        }

        body .znButtonWrapper .znButton.grijs:hover,
        body .znButtonWrapper .znButton.grijs:active,
        body .znButtonWrapper .znButton.grijs:focus {
            background: #e7e7e7;
            color: #000;
            outline: 2px solid #000;
        }

        body .znButtonWrapper .znButton.grijs:focus-visible {
            outline: 2px dotted;
        }

        body .znButtonWrapper .znButton.grijs:hover,
        body .znButtonWrapper .znButton.grijs:active {
            outline: 2px solid #000;
        }

        body .znButtonWrapper .znButton:focus-visible {
            outline: 2px dotted #000;
        }

        body .znButtonWrapper .znButton:hover,
        body .znButtonWrapper .znButton:active {
            outline: 2px solid #000;
        }

        body .znButtonWrapper .znButton .znButtonText {
            font-weight: 500;
        }

        body .znButtonWrapper .znButton .znButtonIconRight {
            margin: 0 0 0 5px;
        }

        body .znButtonWrapper .znButton .znButtonIconLeft {
            margin: 0 5px 0 0;
        }


        body .znButtonWrapper .znButton.znDisabled {
            background: #000;
            cursor: default;
            opacity: 0.5;
        }

            body .znButtonWrapper .znButton.znDisabled:hover,
            body .znButtonWrapper .znButton.znDisabled:active,
            body .znButtonWrapper .znButton.znDisabled:focus {
                outline: 0 none;
                background: #000;
                opacity: 0.5;
            }

    /* #endregion znButton */

    /* #region znLinkButton */

    body .znButtonWrapper .znLinkButton,
    body .znButtonWrapper .znLinkButton:hover,
    body .znButtonWrapper .znLinkButton:active,
    body .znButtonWrapper .znLinkButton:focus {
        border: 0px none;
        box-shadow: 0px 0px 0px;
        background: transparent;
        color: #000;
        outline: 0px none;
        border-radius: 0px;
        cursor: pointer;
        height: 32px;
        padding: 0px;
        text-align: left;
        min-height: 24px;
        min-width: 24px;
    }

        body .znButtonWrapper .znLinkButton:focus-visible {
            outline: 2px dotted #000;
            background: transparent;
        }

        body .znButtonWrapper .znLinkButton:hover,
        body .znButtonWrapper .znLinkButton:active {
            outline: 0px none;
            background: transparent;
        }

        body .znButtonWrapper .znLinkButton .znButtonText {
            font-weight: 600;
            text-decoration: underline;
            display: inline;
        }

        body .znButtonWrapper .znLinkButton:hover .znButtonText {
            text-decoration: none;
        }

        body .znButtonWrapper .znLinkButton .znButtonIconRight {
            margin: 0 0 0 5px;
        }

        body .znButtonWrapper .znLinkButton .znButtonIconLeft {
            margin: 0 5px 0 0;
        }

        body .znButtonWrapper .znLinkButton.znDisabled,
        body .znButtonWrapper .znLinkButton.znDisabled:hover,
        body .znButtonWrapper .znLinkButton.znDisabled:active,
        body .znButtonWrapper .znLinkButton.znDisabled:focus {
            text-decoration: none;
            color: #8f8f8f;
            cursor: default;
        }

            body .znButtonWrapper .znLinkButton.znDisabled .znButtonText,
            body .znButtonWrapper .znLinkButton.znDisabled:hover .znButtonText,
            body .znButtonWrapper .znLinkButton.znDisabled:active .znButtonText,
            body .znButtonWrapper .znLinkButton.znDisabled:focus .znButtonText {
                text-decoration: none;
                outline: 0px none;
            }

    /* #endregion znLinkButton */

    /* #region znIconButton */

    body .znButtonWrapper .znIconButton,
    body .znButtonWrapper .znIconButton:hover,
    body .znButtonWrapper .znIconButton:active,
    body .znButtonWrapper .znIconButton:focus {
        border: 0px none;
        box-shadow: 0px 0px 0px;
        background: transparent;
        color: #000;
        outline: 0px none;
        border-radius: 0px;
        cursor: pointer;
        min-height: 24px;
        min-width: 24px;
    }

        body .znButtonWrapper .znIconButton:focus-visible {
            outline: 2px dotted #000;
            background: transparent;
        }

        body .znButtonWrapper .znIconButton:hover,
        body .znButtonWrapper .znIconButton:active {
            outline: 0px none;
        }

        body .znButtonWrapper .znIconButton span.znLinkIconText {
            width: 1px;
            height: 1px;
            overflow: hidden;
            position: absolute;
        }

        body .znButtonWrapper .znIconButton.znDisabled {
            opacity: 0.5;
            cursor: default;
        }

/* #endregion znIconButton */

/* #region znFileUpload */

body .znFileUploadWrapper {
    position: relative;
}

    body .znFileUploadWrapper.znInvalid {
        border: 0px none;
        background: transparent;
    }

    body .znFileUploadWrapper .znFileUploadDropZone {
        border: 2px dashed;
        left: 0px;
        width: 100%;
        background: #FFF;
        z-index: 100;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
        font-size: 16px;
    }

    body .znFileUploadWrapper .znFileUpload,
    body .znFileUploadWrapper .znFileUploadFile {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    body .znFileUploadWrapper.znInvalid .znFileUpload,
    body .znFileUploadWrapper.znInvalid .znFileUploadFile {
        border: 1px solid #B60000;
        background: #fbd3d3;
        padding-left: 5px;
    }

    body .znFileUploadWrapper[zn-active="true"] .znFileUploadDropZone {
        display: flex;
    }

    body .znFileUploadWrapper[zn-active="true"] .znFileUpload {
        display: none;
    }

    body .znFileUploadWrapper input[type="file"] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        cursor: pointer;
        width: 100%;
        z-index: 0;
    }

    body .znFileUploadWrapper.znInvalid .znFileUpload .znFileUploadButton {
        z-index: 1;
    }

    body .znFileUploadWrapper input[type="file"]
    body .znFileUploadWrapper .znFileUpload .znFileUploadButton {
        cursor: pointer;
    }

    body .znFileUploadWrapper.znDisabled input::file-selector-button {
        cursor: default;
    }

    body .znFileUploadWrapper.znDisabled .znText {
        opacity: 0.5;
    }


    body .znFileUploadWrapper .znFileUploadFile .znFileUploadDelete {
    }

        body .znFileUploadWrapper .znFileUploadFile .znFileUploadDelete .znButtonText {
            font-size: 14px;
        }

        body .znFileUploadWrapper .znFileUploadFile .znFileUploadDelete .znButtonIconLeft {
            font-size: 12px;
        }


body .znFileUpload.znDisabled {
}

    body .znFileUpload.znDisabled:hover,
    body .znFileUpload.znDisabled:active,
    body .znFileUpload.znDisabled:focus {
    }

/* #endregion znFileUpload */

/* #region znMenu */

body div.znMenu {
    padding: 2px;
}

    body div.znMenu .znActivateResponsiveMenu {
        display: none;
    }

    body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton .znIcon {
        font-size: 32px;
    }

    body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton,
    body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:hover,
    body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:focus,
    body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:active {
        color: #FFF;
        color: #000;
        font-size: 32px;
    }

        body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:focus-visible {
            outline: 2px dotted #000;
        }

        body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:hover,
        body div.znMenu .znButtonWrapper.znActivateResponsiveMenu .znIconButton:active {
            outline: 0px none;
        }

    body div.znMenu ul.znMenuItems {
        display: flex;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
        list-style-type: none;
        color: #FFF;
        color: #000;
        text-align: center;
        white-space: nowrap;
    }

        body div.znMenu ul.znMenuItems li.znMenuItem {
            display: block;
            width: 100%;
            position: relative;
        }

            body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink {
                display: flex;
                box-sizing: border-box;
                padding: 5px 0;
                color: #FFF;
                color: #000;
                text-decoration: none;
                width: 100%;
                align-items: center;
                cursor: default;
                min-height: 24px;
                min-width: 24px;
                background: transparent;
                border: 0px none;
            }

        body div.znMenu ul.znMenuItems li:not(.znHasSubmenu) .znMenuLink {
            cursor: pointer;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuItemSubIcon {
            display: none;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:focus-visible {
            outline: 2px dotted #000;
            background: transparent;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:hover,
        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:active {
            outline: 0 none;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink div.znMenuIcon {
            display: flex;
            justify-content: center;
            padding: 10px;
        }

            body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink div.znMenuIcon .znIcon {
                font-size: 50px;
            }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink span.znMenuText {
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:hover span.znMenuText,
        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:focus span.znMenuText {
            text-decoration: underline;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:hover div.znMenuIcon,
        body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:focus div.znMenuIcon {
            padding: 8px;
        }

            body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:hover div.znMenuIcon .znIcon,
            body div.znMenu ul.znMenuItems li.znMenuItem .znMenuLink:focus div.znMenuIcon .znIcon {
                font-size: 54px;
            }

        body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems {
            position: absolute;
            background: #FFF;
            border: 1px solid #EEE;
            z-index: 11;
            padding: 0px;
            display: none;
            visibility: hidden;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem[zn-active="true"] > ul.znSubMenuItems {
            display: block;
            position: fixed;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem > ul.znSubMenuItems[zn-visible="true"] {
            display: block;
            position: absolute;
            visibility: visible;
        }

        body div.znMenu ul.znMenuItems ul.znSubMenuItems li.znMenuItem[zn-active="true"] > ul.znSubMenuItems {
            position: absolute;
        }

        body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem {
            display: flex;
            border-left: 0px none;
            border-left: 0px none;
            text-align: left;
            align-items: center;
            box-sizing: border-box;
        }

            body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem.znHasSubmenu > .znMenuLink:after {
                content: "\f0da";
                font-family: 'Font Awesome 7 Pro';
                font-weight: 600;
                flex: 1;
                display: flex;
                justify-content: flex-end;
                font-size: 12px;
            }

            body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem .znMenuLink {
                margin-right: 5px;
            }

            body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem .znMenuItemSubIcon {
                display: inline-block;
            }

        body div.znMenu ul.znMenuItems ul.znSubMenuItems {
            top: auto;
            left: auto;
        }

            body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems {
                top: 0px;
                left: 100%;
            }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems[zn-position='top-right'],
                body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems[zn-position='top-right'] {
                    top: auto;
                    bottom: 0px;
                }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems[zn-position='middle-right'],
                body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems[zn-position='middle-right'] {
                    top: auto;
                }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems[zn-position='bottom-left'],
                body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems[zn-position='bottom-left'] {
                    top: 0px;
                    right: 100%;
                    left: auto;
                    bottom: auto;
                }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems[zn-position='middle-left'],
                body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems[zn-position='middle-left'] {
                    top: auto;
                    right: 100%;
                    left: auto;
                }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems[zn-position='top-left'],
                body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems[zn-position='top-left'] {
                    top: auto;
                    right: 100%;
                    left: auto;
                    bottom: 0px;
                }

            body div.znMenu ul.znMenuItems ul.znSubMenuItems.znSubMenuOverflow {
                overflow-y: auto;
                max-height: 80dvh
            }

                body div.znMenu ul.znMenuItems ul.znSubMenuItems.znSubMenuOverflow li.znMenuItem ul.znSubMenuItems {
                    position: fixed;
                    background: transparent;
                }

                    body div.znMenu ul.znMenuItems ul.znSubMenuItems.znSubMenuOverflow li.znMenuItem ul.znSubMenuItems[zn-visible="true"] {
                        position: relative;
                        top: auto;
                        left: 0px;
                        right: 0;
                        border: 0 none;
                        padding-left: 15px;
                    }

        body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems.znSubMenuOverflow li.znMenuItem {
            display: block;
        }


    body div.znMenu.znDisabled {
        opacity: 0.5;
        cursor: default;
    }

        body div.znMenu.znDisabled:hover,
        body div.znMenu.znDisabled:active,
        body div.znMenu.znDisabled:focus {
            outline: 0 none;
        }

        body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink {
            cursor: default;
        }

            body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:hover span.znMenuText,
            body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:active span.znMenuText {
                text-decoration: none;
            }

            body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:hover div.znMenuIcon,
            body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:focus div.znMenuIcon {
                padding: 10px;
            }

                body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:hover div.znMenuIcon .znIcon,
                body div.znMenu.znDisabled ul.znMenuItems li.znMenuItem .znMenuLink:focus div.znMenuIcon .znIcon {
                    font-size: 50px;
                }

/* #endregion znMenu */

/* #region znCheckBox */

body .znCheckBoxWrapper {
    display: flex;
    align-items: center;
}

    body .znCheckBoxWrapper.znInvalid {
        border: 0px none;
        background: transparent;
    }

    body .znCheckBoxWrapper .znCheckBox {
        position: relative;
        background: transparent;
        margin-right: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 24px;
        min-height: 24px;
    }

    body .znCheckBoxWrapper.znInvalid .znCheckBox .znCheckBoxIcon {
        border-color: #B60000;
    }

    body .znCheckBoxWrapper .znCheckBox input[type=checkbox] {
        -webkit-appearance: none;
        position: absolute;
        z-index: 1;
        margin: 0;
        cursor: pointer;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        min-width: 24px;
        min-height: 24px;
    }

    body .znCheckBoxWrapper .znCheckBoxText {
        line-height: 0.9;
    }

    body .znCheckBoxWrapper.znDisabled {
        color: #000;
        cursor: default;
    }

        body .znCheckBoxWrapper.znDisabled:hover,
        body .znCheckBoxWrapper.znDisabled:active,
        body .znCheckBoxWrapper.znDisabled:focus {
            outline: 0 none;
        }

        body .znCheckBoxWrapper.znDisabled .znCheckBox {
            opacity: 0.5;
            cursor: default;
        }

            body .znCheckBoxWrapper.znDisabled .znCheckBox input[type=checkbox] {
                cursor: default;
            }


/* #endregion znCheckBox */

/* #region znCheckBoxList */

body .znCheckBoxList {
    color: #000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

    body .znCheckBoxList.znCheckBoxListTextAndIcon .znCheckBoxListItem,
    body .znCheckBoxList.znCheckBoxListIcon .znCheckBoxListItem,
    body .znCheckBoxList.znCheckBoxListText .znCheckBoxListItem {
    }

    body .znCheckBoxList.znCheckBoxListTextAndIcon .znCheckBoxListItem,
    body .znCheckBoxList.znCheckBoxListText .znCheckBoxListItem {
        margin-right: 15px;
    }

    body .znCheckBoxList.znCheckBoxListIcon.znVertical .znCheckBoxListItem {
        margin-bottom: 5px;
    }

    body .znCheckBoxList.znCheckBoxListIcon .znCheckBoxListItem .znCheckBox .znCheckBoxIcon {
        font-size: 24px;
    }

    body .znCheckBoxList.znCheckBoxListTextAndIcon .znCheckBoxListItem .znCheckBox[zn-checked="false"] .znCheckBoxIcon,
    body .znCheckBoxList.znCheckBoxListIcon .znCheckBoxListItem .znCheckBox[zn-checked="false"] .znCheckBoxIcon {
        font-weight: 300;
    }

    body .znCheckBoxList.znCheckBoxListTextAndIcon .znCheckBoxListItem .znCheckBox[zn-checked="true"] .znCheckBoxIcon,
    body .znCheckBoxList.znCheckBoxListIcon .znCheckBoxListItem .znCheckBox[zn-checked="true"] .znCheckBoxIcon {
        font-weight: 600;
    }

    body .znCheckBoxList.znInvalid .znCheckBoxListItem .znCheckBox .znCheckBoxIcon {
        color: #B60000;
        background: #fbd3d3;
    }

    body .znCheckBoxList.znDisabled {
    }

        body .znCheckBoxList.znDisabled:hover,
        body .znCheckBoxList.znDisabled:active,
        body .znCheckBoxList.znDisabled:focus {
        }

/* #endregion znCheckBoxList */

/* #region znOverlay */

body .znOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1001;
    opacity: 0.5;
}

    body .znOverlay.znDisabled {
    }

        body .znOverlay.znDisabled:hover,
        body .znOverlay.znDisabled:active,
        body .znOverlay.znDisabled:focus {
        }

/* #endregion znOverlay */

/* #region znWindow */

body .znWindowWrapper {
    display: flex;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    justify-content: center;
    align-items: center;
}

    body .znWindowWrapper .znWindow {
        display: flex;
        flex-direction: column;
        z-index: 1002;
        min-width: 100px;
        background: #FFF;
        max-height: 90dvh;
        position: absolute;
    }

        body .znWindowWrapper .znWindow,
        body .znWindowWrapper .znWindow .znResize,
        body .znWindowWrapper .znWindow *[zn-resize="true"],
        body .znWindowWrapper .znWindow .znFullWidth,
        body .znWindowWrapper .znWindow *[zn-fullwidth="true"] {
            max-width: 90vw;
        }

.znWindowWrapper .znWindow .znFullWidth {
    width: 80vw;
}


body .znWindowWrapper .znWindow .znWindowTitle {
    background: #000;
    color: #FFF;
    padding: 10px 16px;
    font-size: 18px;
}

    body .znWindowWrapper .znWindow .znWindowTitle h2 {
        color: #FFF;
        font-size: 18px;
        margin: 0;
        padding: 0;
    }

body .znWindowWrapper .znWindow .znWindowContentWrapper {
    overflow-y: auto;
    /*padding-right: 20px;*/
    overflow-x: hidden;
    box-sizing: border-box;
    /*scrollbar-gutter: stable;*/
}

body .znWindowWrapper .znWindow .znWindowContent {
    padding: 10px 15px;
    min-width: 250px;
    min-height: 50px;
    /*width: 100%;*/
    box-sizing: border-box;
}

body .znWindowWrapper .znWindow .znWindowButtons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

    body .znWindowWrapper .znWindow .znWindowButtons .znFlexItem {
        flex-wrap: wrap;
    }

    body .znWindowWrapper .znWindow .znWindowButtons button {
        margin: 8px 10px 8px 0;
    }

body .znWindowWrapper .znWindow.znDisabled {
}

    body .znWindowWrapper .znWindow.znDisabled:hover,
    body .znWindowWrapper .znWindow.znDisabled:active,
    body .znWindowWrapper .znWindow.znDisabled:focus {
    }

/* #endregion znWindow */


/* #region znMessageList */
body ul.znMessageList {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    body ul.znMessageList li {
        display: flex;
        align-items: baseline;
    }

        body ul.znMessageList li span.znMessageIcon {
            margin-right: 5px;
        }

        body ul.znMessageList li span.znMessageText {
        }

/* #endregion znMessageList */

/* #region znPopup */

body .znPopupWrapper {
    display: flex;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

    body .znPopupWrapper .znPopup {
        display: flex;
        flex-direction: column;
        z-index: 1002;
        max-width: 90vw;
        min-width: 100px;
        background: #FFF;
        max-height: 90dvh;
        position: absolute;
    }

        body .znPopupWrapper .znPopup .znPopupTitle {
            background: #000;
            color: #FFF;
            padding: 10px 16px;
            font-size: 18px;
        }

        body .znPopupWrapper .znPopup .znPopupContent {
            display: flex;
            min-width: 250px;
            min-height: 50px;
            overflow-y: auto;
        }

            body .znPopupWrapper .znPopup .znPopupContent .znPopupIcon {
                display: flex;
                align-items: flex-start;
                font-size: 35px;
                padding: 5px 0px 10px 10px;
            }

            body .znPopupWrapper .znPopup .znPopupContent .znPopupMessages {
                padding: 10px;
                display: flex;
                align-items: flex-start;
                min-width: 250px;
                min-height: 50px;
                overflow-y: auto;
                color: #000;
                text-align: left;
                flex-direction: column;
            }


        body .znPopupWrapper .znPopup .znPopupButtons {
            display: flex;
            justify-content: flex-end;
        }

            body .znPopupWrapper .znPopup .znPopupButtons button {
                margin: 8px 10px 8px 0;
            }

    body .znPopupWrapper.znDisabled {
    }

        body .znPopupWrapper.znDisabled:hover,
        body .znPopupWrapper.znDisabled:active,
        body .znPopupWrapper.znDisabled:focus {
        }

/* #endregion znPopup */

/* #region znPager */
body .znPager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    body .znPager ul {
        display: flex;
        list-style-type: none;
        font-size: 15px;
        margin: 0;
        padding: 0;
        align-items: center;
    }

        body .znPager ul li {
            display: inline-flex;
            border: 1px solid #DDD;
            line-height: 1;
            min-width: 26px;
            height: 26px;
            margin-right: 5px;
            padding: 0px;
        }

            /* body .znPager ul li:hover {
                background: #DDD;
            }*/

            body .znPager ul li.znActive {
                background: #000;
            }

            body .znPager ul li.znDisabled:hover {
                background: inherit;
            }

            body .znPager ul li span,
            body .znPager ul li .znButtonWrapper {
                cursor: pointer;
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
            }

                body .znPager ul li .znButtonWrapper button.znButton,
                body .znPager ul li .znButtonWrapper button {
                    background: transparent;
                    border: 0 none;
                    width: 100%;
                    height: 100%;
                }

                    body .znPager ul li .znButtonWrapper button:hover,
                    body .znPager ul li .znButtonWrapper button:focus {
                        background: #DDD;
                    }

            body .znPager ul li.znActive span {
                color: #FFF;
            }

            body .znPager ul li.znDisabled .znIcon {
                cursor: default;
                opacity: 0.4;
                color: #000;
            }

            body .znPager ul li span.znIcon,
            body .znPager ul li span.fa-solid {
                font-size: 10px;
            }

            body .znPager ul li .znButtonWrapper {
                font-size: 12px;
            }

    body .znPager .znPagerItemCount {
        justify-content: end;
        display: flex;
        flex: auto;
    }

/* #endregion znPager */


/* #region znGrid */

body .znGrid {
}

    body .znGrid .znGridContent {
        /*overflow-x: auto;*/
    }

    body .znGrid .znTable {
        color: #000;
        border: 0 none;
        width: 100%;
        border-spacing: 0;
    }

        body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell,
        body .znGrid .znTable .znTableHeaderRow td.znTableHeaderCell {
            text-align: left;
            white-space: nowrap;
        }

        body .znGrid .znTable .znTableHeaderRow.zn-wrap td.znTableHeaderCell,
        body .znGrid .znTable .znTableHeaderRow.zn-wrap th.znTableHeaderCell,
        body .znGrid .znTable .znTableHeaderRow.zn-wrap td.znTableHeaderCell .znButton .znButtonText,
        body .znGrid .znTable .znTableHeaderRow.zn-wrap th.znTableHeaderCell .znButton .znButtonText {
            white-space: normal;
            text-align: left;
        }


        body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell span.znTableHeaderSortable {
            display: flex;
            cursor: pointer;
        }

            body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell span.znTableHeaderSortable .znButton {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }

            body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell span.znTableHeaderSortable .znButtonIconRight.fa-dummy {
                visibility: hidden;
            }
        /*body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell span.znTableHeaderSortable .znButtonIconRight.fa-dummy::before {
                content: " ";
            }*/


        body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell .znButtonWrapper .znButton {
            background: transparent;
            border: 0 none;
            padding: 0px;
        }

            body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell .znButtonWrapper .znButton .znButtonText {
                font-weight: 700;
            }

        body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell span.znTableHeaderText {
            text-align: left;
        }

        body .znGrid .znTable .znTableHeaderRow th.znTableHeaderCell .znTableHeaderSortIcon {
            display: inline-block;
            width: 15px;
            text-align: center;
        }

        body .znGrid .znTable .znTableHeaderRow td.znTableHeaderCell.znTableHeaderCellCheckBox,
        body .znGrid .znTable .znTableHeaderRow td.znTableHeaderCell.znTableHeaderCellEdit,
        body .znGrid .znTable .znTableHeaderRow td.znTableHeaderCell.znTableHeaderCellEmpty,
        body .znGrid .znTable .znTableHeaderRow td.znTableHeaderCell.znTableHeaderCellDelete {
            width: 1px;
            padding: 0;
            max-width: 1.5rem;
            text-align: center;
        }


        body .znGrid .znTable tr.znTableRow:nth-child(2n+1) {
            background: #EEE;
        }

        body .znGrid .znTable tr.znTableRow.znTableRowHighlight {
            background: #AAA;
        }

        body .znGrid .znTable tr.znTableRow td.znTableCell {
            word-break: break-word;
        }

            body .znGrid .znTable tr.znTableRow td.znTableCell.znAlignTop {
                vertical-align: top;
            }


            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCheckBox,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellEdit,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCopy,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellIcon,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellDelete {
                width: 1px;
                padding: 0;
                max-width: 1.75rem;
                text-align: center;
                margin: 0px;
            }

            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellDelete {
                width: 30px;
                max-width: 30px;
            }

                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCheckBox > *,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellEdit > *,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCopy > *,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellIcon > *,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellDelete > * {
                    margin: 0px;
                }

            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellEdit,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCopy,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellDelete,
            body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellIcon {
                vertical-align: middle;
            }

                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellIcon .znFlexLayout {
                    margin: 0;
                }

                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellEdit .znButtonWrapper .znIconButton,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellCopy .znButtonWrapper .znIconButton,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellIcon .znButtonWrapper .znIconButton,
                body .znGrid .znTable tr.znTableRow td.znTableCell.znTableCellDelete .znButtonWrapper .znIconButton {
                    /*padding: 0px;*/
                }

        body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell {
            background: transparent;
            color: #000;
            border-bottom: 1px solid #DDD;
            font-weight: 600;
            text-align: center;
        }

            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znTableGroupCellContent {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znTableGroupCellContent .znIconButton,
                body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znTableGroupCellContent .znIconButton:hover,
                body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znTableGroupCellContent .znIconButton:active,
                body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znTableGroupCellContent .znIconButton:focus {
                    color: #000;
                    padding: 2px;
                }



            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:focus-visible {
                outline: 2px dotted #FFF;
                background: transparent;
            }

            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:hover,
            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:active {
                outline: 0 none;
                background: transparent;
            }

        body .znGrid .znTable th,
        body .znGrid .znTable td {
            padding: 3px 5px;
            text-overflow: unset;
        }

            body .znGrid .znTable th > *,
            body .znGrid .znTable td > * {
                margin: 3px 2px;
            }

            body .znGrid .znTable th > span,
            body .znGrid .znTable td > span {
                display: inline-block;
            }

        body .znGrid .znTable tr.znTableRow td {
            border-bottom: 1px solid #DDD;
        }


    body .znGrid .znGridNoData {
    }

    body .znGrid .znGridFooter {
        display: flex;
        padding: 5px 4px;
        align-items: center;
    }

        body .znGrid .znGridFooter .znGridExport {
            margin-right: 5px;
        }

            body .znGrid .znGridFooter .znGridExport .znIconButton {
                font-size: 16px;
            }




    body .znGrid .znEditWindowContent {
        overflow: hidden;
    }

    body .znGrid.znDisabled {
    }

        body .znGrid.znDisabled:hover,
        body .znGrid.znDisabled:active,
        body .znGrid.znDisabled:focus {
        }


/* #endregion znGrid */

/* #region znSelect en znMultiSelect */

body .znSelectWrapper,
body .znMultiSelectWrapper {
    position: relative;
    height: 32px;
}

    body .znSelectWrapper .znSelect,
    body .znMultiSelectWrapper .znMultiSelect {
        position: relative;
        display: flex;
        height: 32px;
    }

        body .znSelectWrapper .znSelect .znSelectInput,
        body .znMultiSelectWrapper .znMultiSelect .znMultiSelectInput {
            /*position: absolute;*/
            background: transparent;
            z-index: 2;
            width: 100%;
            border: 1px solid #000;
            color: #000;
            box-sizing: border-box;
            padding: 4px 32px 4px 6px;
            border-radius: 2px;
            height: 32px;
            display: inline-flex;
            vertical-align: middle;
            -moz-appearance: textfield;
            text-overflow: ellipsis;
        }

    body .znSelectWrapper.znInvalid .znSelect .znSelectInput,
    body .znMultiSelectWrapper.znInvalid .znMultiSelect .znMultiSelectInput {
        border-color: #B60000;
    }

    body .znSelectWrapper .znSelectArrow,
    body .znMultiSelectWrapper .znMultiSelectArrow {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0px;
        font-size: 13px;
        width: 32px;
        height: 100%;
        box-sizing: border-box;
        background: #EEE;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        top: 0px;
    }


    body .znSelectWrapper .znSelectPopupWrapper,
    body .znMultiSelectWrapper .znMultiSelectPopupWrapper {
        background: #FFF;
        z-index: 1003;
        border: 1px solid #000;
        position: absolute;
        display: none;
        min-width: 100%;
        max-width: 90vw;
        visibility: hidden;
        box-sizing: border-box;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper,
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper {
        display: block;
        position: fixed;
    }

        body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-visible="true"],
        body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-visible="true"] {
            position: absolute;
            visibility: visible;
        }

    body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup,
    body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup {
        overflow-y: auto;
        max-height: 250px;
        overflow-x: auto;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-position='top'],
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-position='top'] {
        bottom: 100%;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-position='bottom-right'],
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-position='bottom-right'] {
        top: 100%;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-position='bottom-left'],
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-position='bottom-left'] {
        top: 100%;
        right: 0px;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-position='top-right'],
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-position='top-right'] {
        bottom: 100%;
    }

    body .znSelectWrapper[zn-expanded="true"] .znSelectPopupWrapper[zn-position='top-left'],
    body .znMultiSelectWrapper[zn-expanded="true"] .znMultiSelectPopupWrapper[zn-position='top-left'] {
        bottom: 100%;
        right: 0px;
    }



    body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul,
    body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul {
        margin: 0;
        list-style-type: none;
        padding: 0px;
        display: inline-block;
        min-width: 100%;
    }


        body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul li {
            height: 30px;
            padding: 4px 6px;
            box-sizing: border-box;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-height: 24px;
        }

        body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li {
            padding: 1px 2px;
            box-sizing: border-box;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-height: 24px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

            body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li .znMultiSelectItemIcon {
                margin-right: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 24px;
                min-height: 24px;
            }

            body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li .znMultiSelectItemText {
                line-height: 0.9;
            }

            body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul li:hover,
            body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul li:focus,
            body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul li.znActive,
            body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li:hover,
            body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li:focus {
                background: #EEE;
            }

    body .znMultiSelectWrapper.znDisabled,
    body .znSelectWrapper.znDisabled {
        background: #EEE;
        color: #000;
        cursor: default;
    }

        body .znMultiSelectWrapper.znDisabled .znTextBox,
        body .znSelectWrapper.znDisabled .znTextBox {
            border: 1px solid #AAA;
        }

        body .znMultiSelectWrapper.znDisabled .znMultiSelectArrow,
        body .znSelectWrapper.znDisabled .znSelectArrow {
            opacity: 0.5;
        }

        body .znMultiSelectWrapper.znDisabled:hover,
        body .znSelectWrapper.znDisabled:hover,
        body .znMultiSelectWrapper.znDisabled:active,
        body .znSelectWrapper.znDisabled:active,
        body .znMultiSelectWrapper.znDisabled:focus,
        body .znSelectWrapper.znDisabled:focus {
            outline: 0 none;
            background: #EEE;
        }

        body .znSelectWrapper.znDisabled .znSelectPopupWrapper .znSelectPopup ul li,
        body .znSelectWrapper.znDisabled .znSelectPopupWrapper .znSelectPopup ul li:hover,
        body .znSelectWrapper.znDisabled .znSelectPopupWrapper .znSelectPopup ul li:focus,
        body .znMultiSelectWrapper.znDisabled .znMultiSelectPopupWrapper .znMultiSelectPopup ul li,
        body .znMultiSelectWrapper.znDisabled .znMultiSelectPopupWrapper .znMultiSelectPopup ul li:hover,
        body .znMultiSelectWrapper.znDisabled .znMultiSelectPopupWrapper .znMultiSelectPopup ul li:focus {
            background: #EEE;
            cursor: default;
        }

            body .znSelectWrapper.znDisabled .znSelectPopupWrapper .znSelectPopup ul li.znActive {
                background: #BBB;
            }


/* #endregion znSelect */

/* #region znTextArea */

body .znTextAreaWrapper {
    position: relative;
}

    body .znTextAreaWrapper .znTextAreaAutoSave {
        position: absolute;
        text-align: right;
        bottom: 5px;
        right: 5px;
        background: rgba(25, 118, 210, 0.75);
        padding: 8px 20px;
        color: #FFF;
        font-weight: 600;
        box-sizing: border-box;
    }

    body .znTextAreaWrapper .znTextArea {
        border: 1px solid #000;
        width: 100%;
        resize: vertical;
        box-sizing: border-box;
        padding: 4px 8px;
        border-radius: 2px;
    }

        body .znTextAreaWrapper .znTextArea:focus-visible {
            outline: 1px solid #000;
        }

        body .znTextAreaWrapper .znTextArea.znInvalid {
            border-color: #B60000;
        }

        body .znTextAreaWrapper .znTextArea.znDisabled {
            background: #EEE;
            color: #000;
            cursor: default;
            border: 1px solid #AAA;
        }

            body .znTextAreaWrapper .znTextArea.znDisabled:hover,
            body .znTextAreaWrapper .znTextArea.znDisabled:active,
            body .znTextAreaWrapper .znTextArea.znDisabled:focus {
                outline: 0 none;
                background: #EEE;
            }

/* #endregion znTextArea */

/* #region znTextBox */

body .znTextBoxWrapper {
}

    body .znTextBoxWrapper .znTextBox {
        border: 1px solid #000;
        color: #000;
        box-sizing: border-box;
        padding: 4px 6px;
        border-radius: 2px;
        height: 32px;
        width: 100%;
        display: inline-flex;
        vertical-align: middle;
        -moz-appearance: textfield;
    }

    body .znTextBoxWrapper.znUppercase .znTextBox {
        text-transform: uppercase;
    }

    /*body .znTextBoxWrapper .znTextBox:invalid {
        border: 1px solid red;
    }*/

    body .znTextBoxWrapper .znTextBox:focus-visible {
        outline: 1px solid #000;
    }

    body .znTextBoxWrapper .znTextBox.znInvalid {
        border-color: #B60000;
    }

    body .znTextBoxWrapper .znTextBox::-webkit-outer-spin-button,
    body .znTextBoxWrapper .znTextBox::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


    body .znTextBoxWrapper .znTextBox.znDisabled {
        background: #EEE;
        color: #000;
        cursor: default;
        border: 1px solid #AAA;
    }

        body .znTextBoxWrapper .znTextBox.znDisabled:hover
        body .znTextBoxWrapper .znTextBox.znDisabled:active
        body .znTextBoxWrapper .znTextBox.znDisabled:focus {
            outline: 0 none;
            background: #EEE;
        }

/* #endregion znTextBox */

/* #region znPasswordTextBox */

body .znTextBoxPasswordWrapper {
    position: relative;
}


    body .znTextBoxPasswordWrapper .znTogglePasswordIcon {
        position: absolute;
        right: 10px;
        top: 6px;
        display: none;
    }

    body .znTextBoxPasswordWrapper .znTextBoxWrapper[zn-focus="true"] .znTogglePasswordIcon {
        display: block;
    }

    body .znTextBoxPasswordWrapper .znTextBoxPassword {
        padding-right: 24px;
    }

        body .znTextBoxPasswordWrapper .znTextBoxPassword::-ms-reveal,
        body .znTextBoxPasswordWrapper .znTextBoxPassword::-ms-clear {
            display: none;
        }


body .znTextBoxPasswordStrength {
    margin-top: 5px;
    text-align: right;
    position: relative;
}

body .znTextBoxPasswordStrengthIndicator {
    content: "";
    width: 100%;
    height: 10px;
    border: 1px solid #000;
    border-radius: 2px;
    display: block;
}

    body .znTextBoxPasswordStrengthIndicator:after {
        content: "";
        display: block;
        height: 100%;
    }

    body .znTextBoxPasswordStrengthIndicator.znPasswordVeryLow:after {
        background: #d90000;
        width: 20%;
    }

    body .znTextBoxPasswordStrengthIndicator.znPasswordLow:after {
        background: orange;
        opacity: 0.5;
        width: 40%;
    }

    body .znTextBoxPasswordStrengthIndicator.znPasswordNormal:after {
        background: orange;
        width: 60%;
    }

    body .znTextBoxPasswordStrengthIndicator.znPasswordStrong:after {
        background: #06880F;
        opacity: 0.5;
        width: 80%;
    }

    body .znTextBoxPasswordStrengthIndicator.znPasswordVeryStrong:after {
        background: #06880F;
        width: 100%;
    }



/* #endregion znTextBox */


/* #region znDateTimePicker */

body .znDatePickerWrapper,
body .znTimePickerWrapper,
body .znDateTimePickerWrapper {
    position: relative;
    height: 32px;
    /*display: flex;*/
}

    body .znDatePickerWrapper .znDatePickerInput,
    body .znTimePickerWrapper .znTimePickerInput,
    body .znDateTimePickerWrapper .znDateTimePickerInput {
        display: flex;
        flex: 1;
    }

    body .znDatePickerWrapper .znDatePickerInput,
    body .znDateTimePickerWrapper .znDateTimePickerInput {
        position: relative;
    }

body .znDateOptionListWrapper,
body .znTimePickerListWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

    body .znDateOptionListWrapper .znSelectWrapper,
    body .znDateOptionListWrapper .znSelectWrapper:hover,
    body .znDateOptionListWrapper .znSelectWrapper:active,
    body .znDateOptionListWrapper .znSelectWrapper:focus,
    body .znDateOptionListWrapper .znSelectWrapper .znSelect,
    body .znDateOptionListWrapper .znSelectWrapper .znSelect .znSelectInput,
    body .znTimePickerListWrapper .znSelectWrapper,
    body .znTimePickerListWrapper .znSelectWrapper:hover,
    body .znTimePickerListWrapper .znSelectWrapper:active,
    body .znTimePickerListWrapper .znSelectWrapper:focus,
    body .znTimePickerListWrapper .znSelectWrapper .znSelect,
    body .znTimePickerListWrapper .znSelectWrapper .znSelect .znSelectInput {
        /*height: 0px;*/
        padding: 0px;
        padding: 0px;
        background: transparent;
    }

        body .znDateOptionListWrapper .znSelectWrapper .znSelect,
        body .znTimePickerListWrapper .znSelectWrapper .znSelect {
            opacity: 0;
        }

body .znDatePickerWrapper input[type="date"],
body .znDateTimePickerWrapper input[type="date"] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 5;
    opacity: 0;
    visibility: visible;
    width: 100%;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-width: 100%;
    cursor: pointer;
}


body .znDatePickerWrapper input[type="date"],
body .znDateTimePickerWrapper input[type="date"] {
    right: 26px;
}


body .znDatePicker,
body .znTimePicker,
body .znDateTimePicker {
    border: 1px solid #000;
    border-right: 0px;
    color: #000;
    box-sizing: border-box;
    padding: 4px 6px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 32px;
    width: 100%;
    vertical-align: middle;
    position: relative;
    z-index: 6;
    background: transparent;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

body .znDatePickerWrapper input[type="date"]::-webkit-inner-spin-button,
body .znDatePickerWrapper input[type="date"]::-webkit-calendar-picker-indicator,
body .znDateTimePickerWrapper input[type="date"]::-webkit-inner-spin-button,
body .znDateTimePickerWrapper input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

body .znDatePicker:focus-visible,
body .znTimePicker:focus-visible,
body .znDateTimePicker:focus-visible {
    outline: 1px solid #000;
}


body .znDatePickerIcon,
body .znTimePickerIcon,
body .znDateTimePickerIcon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0px;
    top: 0px;
    font-size: 13px;
    height: 100%;
    box-sizing: border-box;
    background: #EEE;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
    padding: 2px;
    border: 1px solid #000;
    border-left: 0px;
    height: 32px;
    justify-content: space-around;
}

body .znDatePickerWrapper.znInvalid .znDatePicker,
body .znDatePickerWrapper.znInvalid .znDatePickerIcon,
body .znTimePickerWrapper.znInvalid .znTimePicker,
body .znTimePickerWrapper.znInvalid .znTimePickerIcon,
body .znDateTimePickerWrapper.znInvalid .znDateTimePicker,
body .znDateTimePickerWrapper.znInvalid .znDateTimePickerIcon {
    border-color: #B60000;
}


body .znDatePickerIcon .znButtonWrapper.znCalendarButton,
body .znDateTimePickerIcon .znButtonWrapper.znCalendarButton {
    z-index: 4;
}

body .znDatePickerWrapper .znDateTimePickerIcon .znButtonWrapper.znCalendarButton,
body .znDateTimePickerWrapper .znDateTimePickerIcon .znButtonWrapper.znCalendarButton {
    width: 25px;
}

body .znDatePickerIcon .znButtonWrapperClass.znDateOptionButton,
body .znTimePickerIcon .znButtonWrapper.znClockButton,
body .znDateTimePickerIcon .znButtonWrapper.znClockButton {
    z-index: 6;
}

body .znDatePickerIcon .znIconButton,
body .znTimePickerIcon .znIconButton,
body .znDateTimePickerIcon .znIconButton {
    height: 100%;
    width: 100%;
    border: 0 none;
    cursor: pointer;
    z-index: 6;
}

body .znDatePickerWrapper .znSelectWrapper,
body .znDateTimePickerWrapper .znSelectWrapper {
    position: absolute;
    right: 0px;
    left: 0;
}

    body .znDatePickerWrapper .znSelectWrapper .znSelect,
    body .znDateTimePickerWrapper .znSelectWrapper .znSelect {
        width: 28px;
        z-index: 5;
        display: flex;
        justify-self: end;
    }

        body .znDatePickerWrapper .znSelectWrapper .znSelect .znSelectInput,
        body .znDateTimePickerWrapper .znSelectWrapper .znSelect .znSelectInput {
            border: 0px none;
            background: transparent;
            font-size: 0px;
        }

            body .znDatePickerWrapper .znSelectWrapper .znSelect .znSelectInput:focus-visible,
            body .znDateTimePickerWrapper .znSelectWrapper .znSelect .znSelectInput:focus-visible {
                outline: 2px dotted #000;
            }

        body .znDatePickerWrapper .znSelectWrapper .znSelect .znSelectArrow,
        body .znDateTimePickerWrapper .znSelectWrapper .znSelect .znSelectArrow {
            z-index: 0;
            opacity: 0;
        }



body .znDatePickerWrapper.znDisabled,
body .znTimePickerWrapper.znDisabled,
body .znDateTimePickerWrapper.znDisabled {
    background: #EEE;
    color: #000;
    cursor: default;
}

    body .znDatePickerWrapper.znDisabled:hover,
    body .znDatePickerWrapper.znDisabled:active,
    body .znDatePickerWrapper.znDisabled:focus,
    body .znTimePickerWrapper.znDisabled:hover,
    body .znTimePickerWrapper.znDisabled:active,
    body .znTimePickerWrapper.znDisabled:focus,
    body .znDateTimePickerWrapper.znDisabled:hover,
    body .znDateTimePickerWrapper.znDisabled:active,
    body .znDateTimePickerWrapper.znDisabled:focus {
        outline: 0 none;
        background: #EEE;
    }

    body .znDatePickerWrapper.znDisabled input[type="date"],
    body .znDateTimePickerWrapper.znDisabled input[type="date"] {
        cursor: default;
    }

    body .znDatePickerWrapper.znDisabled input.znDatePicker,
    body .znTimePickerWrapper.znDisabled input.znTimePicker,
    body .znDateTimePickerWrapper.znDisabled input.znDateTimePicker {
        background: #EEE;
    }

/* #endregion znDateTimePicker */

/* #region znRadioButtonList */

body .znRadioButtonList {
    color: #000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

    body .znRadioButtonList.znRadioButtonListTextAndIcon .znRadioButtonListItem,
    body .znRadioButtonList.znRadioButtonListIcon .znRadioButtonListItem,
    body .znRadioButtonList.znRadioButtonListText .znRadioButtonListItem {
    }

    body .znRadioButtonList.znRadioButtonListText .znRadioButtonListItem,
    body .znRadioButtonList.znRadioButtonListTextAndIcon .znRadioButtonListItem {
        margin-right: 15px;
    }

    body .znRadioButtonList.znRadioButtonListIcon.znVertical .znRadioButtonListItem {
        margin-bottom: 5px;
    }


    body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper {
        display: flex;
        align-items: center;
    }

        body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper .znRadioButton {
            position: relative;
            background: #FFF;
            margin-right: 2px;
            cursor: pointer;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 24px;
            min-height: 24px;
        }

            body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper .znRadioButton input[type=radio] {
                -webkit-appearance: none;
                position: absolute;
                z-index: 1;
                margin: 0;
                cursor: pointer;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                min-width: 24px;
                min-height: 24px;
            }

        body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper .znRadioButtonText {
            line-height: 0.9;
        }

    body .znRadioButtonList.znRadioButtonListIcon .znRadioButtonListItem .znRadioButtonIcon {
        font-size: 24px;
    }

    body .znRadioButtonList.znRadioButtonListTextAndIcon .znRadioButtonListItem .znRadioButton[zn-checked="false"] .znRadioButtonIcon,
    body .znRadioButtonList.znRadioButtonListIcon .znRadioButtonListItem .znRadioButton[zn-checked="false"] .znRadioButtonIcon {
        font-weight: 300;
    }

    body .znRadioButtonList.znRadioButtonListTextAndIcon .znRadioButtonListItem .znRadioButton[zn-checked="true"] .znRadioButtonIcon,
    body .znRadioButtonList.znRadioButtonListIcon .znRadioButtonListItem .znRadioButton[zn-checked="true"] .znRadioButtonIcon {
        font-weight: 600;
    }


    body .znRadioButtonList.znInvalid .znRadioButtonListItem .znRadioButton .znRadioButtonIcon {
        border-radius: 50%;
        color: #B60000;
        background: #fbd3d3;
    }

    body .znRadioButtonList.znDisabled .znRadioButton {
        opacity: 0.5;
        cursor: default;
    }

    body .znRadioButtonList.znDisabled:hover,
    body .znRadioButtonList.znDisabled:active,
    body .znRadioButtonList.znDisabled:focus {
        outline: 0 none;
    }

    body .znRadioButtonList.znDisabled .znRadioButtonListItem .znRadioButton input[type=radio] {
        cursor: default;
    }

/* #endregion znRadioButtonList */

/* #region znLoader */

body .znLoaderWrapper {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1003;
}

    body .znLoaderWrapper .znLoader {
        position: fixed;
        opacity: 0.9;
        z-index: 1004;
    }

        body .znLoaderWrapper .znLoader .znLoaderAnimation {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #000;
            border-radius: 50%;
            width: 75px;
            height: 75px;
            animation: znSpin 2s linear infinite;
        }

        body .znLoaderWrapper .znLoader .znLoaderText {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 18px;
            color: #FFF;
            font-weight: 600;
        }

        body .znLoaderWrapper .znLoader.znDisabled {
            background: #EEE;
            color: #000;
            cursor: default;
        }

            body .znLoaderWrapper .znLoader.znDisabled:hover,
            body .znLoaderWrapper .znLoader.znDisabled:active,
            body .znLoaderWrapper .znLoader.znDisabled:focus {
                outline: 0 none;
                background: #EEE;
            }

/* #endregion znLoader*/

/* #region znListView */

body .znListView {
}

    body .znListView.znDisabled {
    }

        body .znListView.znDisabled:hover,
        body .znListView.znDisabled:active
        body .znListView.znDisabled:focus {
        }

    body .znListView .znListViewItem {
    }

        body .znListView .znListViewItem:focus-visible {
            outline: 2px dotted #000;
        }

        body .znListView .znListViewItem[zn-active="true"]:focus-visible {
            outline: 2px solid #000;
        }

    body .znListView .znListViewFooter {
        display: flex;
        padding: 5px 4px;
        align-items: center;
    }

    body .znListView.znDragActive,
    body .znListView.znDragActive .znListViewItem {
        position: relative;
    }

    body .znListView .znListViewEmptyDropZone {
        height: 5px;
    }

    body .znListView.znDragActive .znListViewItemDropZone {
        position: absolute;
        height: 20px;
        width: 100%;
        z-index: 9999;
    }

    body .znListView.znDragActive .znListViewEmptyDropZone {
        position: relative;
        height: 5px;
    }

    body .znListView.znDragActive .znListViewItemDropZone {
        bottom: 0;
    }

        body .znListView.znDragActive .znListViewItemDropZone:first-child {
            top: 0;
        }

        body .znListView.znDragActive .znListViewItemDropZone.znDragEnter {
            border-bottom: 3px dotted;
        }

        body .znListView.znDragActive .znListViewItemDropZone:first-child.znDragEnter {
            border-top: 3px dotted;
            border-bottom: 0px;
        }

    body .znListView .znEditWindowContent {
        overflow: hidden;
    }

/* #endregion znListView */

/* #region znEditor */

body .znEditor {
    width: 100%;
    height: 300px;
    color: #000;
    box-sizing: border-box;
    border-radius: 2px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0px;
    background: #FFF;
    border: 1px solid #000;
    position: relative;
}

    body .znEditor .znEditorInvalidData {
        position: relative;
        background: #fbd3d3;
        padding: 10px 10px 8px 40px;
        box-sizing: border-box;
        margin-bottom: 10px;
        border: 1px solid #D90000;
        line-height: 1;
        color: #000;
    }

        body .znEditor .znEditorInvalidData:before {
            position: absolute;
            top: 6px;
            left: 10px;
            content: "\f321";
            font-family: 'Font Awesome 7 Pro';
            font-size: 25px;
        }

    body .znEditor .znEditorToolbar {
        width: 100%;
        height: 42px;
        padding: 0px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        z-index: 1;
        gap: 10px;
        box-shadow: 0px 2px 3px #DDD;
        padding: 5px 10px;
    }

        body .znEditor .znEditorToolbar .znEditorToolbarItemGroup,
        body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup {
            display: flex;
            border-radius: 3px;
            gap: 3px;
        }

            body .znEditor .znEditorToolbar .znEditorToolbarItemGroup:last-child {
                margin-left: auto;
            }

            body .znEditor .znEditorToolbar .znEditorToolbarItemGroup .znEditorToolbarItem {
            }

                body .znEditor .znEditorToolbar .znEditorToolbarItemGroup .znEditorToolbarItem:first-child {
                    border-left: 0px;
                }


            body .znEditor .znEditorToolbar .znEditorToolbarItem button,
            body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup button {
                background: transparent;
                border: 0px none;
                font-size: 16px;
                display: flex;
                padding: 5px;
                width: 36px;
                height: 30px;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
            }

                body .znEditor .znEditorToolbar .znEditorToolbarItem button:hover,
                body .znEditor .znEditorToolbar .znEditorToolbarItem button:focus,
                body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup button:hover,
                body .znEditor .znEditorToolbar .znEditorToolbarItem button[zn-active="true"],
                body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup[zn-active="true"] button {
                    background: #AAA;
                }

                body .znEditor .znEditorToolbar .znEditorToolbarItem button:focus {
                    outline: 2px solid #000;
                }

        body .znEditor .znEditorToolbar button[zn-disabled="true"],
        body .znEditor .znEditorToolbar button[zn-disabled="true"]:hover {
            background: inherit;
            opacity: 0.5;
            cursor: default;
        }

        body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup .znEditorCustomToolbarItems {
            display: none;
        }

        body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup[zn-active="true"] .znEditorCustomToolbarItems {
            display: block;
        }

        body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup .znEditorCustomToolbarItems {
            background: #FFF;
            min-width: 150px;
            border: 1px solid #e0dfdf;
            position: absolute;
            top: 44px;
        }

            body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup .znEditorCustomToolbarItems .znEditorCustomToolbarItem button {
                display: flex;
                justify-content: flex-start;
                background: transparent;
                width: 100%;
            }

                body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup .znEditorCustomToolbarItems .znEditorCustomToolbarItem button:hover {
                    background: #e0dfdf;
                }

    body .znEditor.znDisabled .znEditorToolbar .znEditorCustomToolbarItemGroup .znEditorCustomToolbarItems .znEditorCustomToolbarItem button:hover {
        background: transparent;
    }

    body .znEditor .znEditorContent {
        border: 0px none;
        border-radius: 0px;
        outline: 0px none;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        background: #FFF;
        display: inline-block;
        flex: 1;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 46px;
        bottom: 0px;
    }

        body .znEditor .znEditorContent:focus-visible {
            outline: 2px auto;
            z-index: 1;
            margin: 2px;
        }

    body .znEditor .znEditorAutoSave {
        position: absolute;
        text-align: right;
        bottom: 5px;
        right: 5px;
        background: rgba(25, 118, 210, 0.75);
        padding: 8px 20px;
        color: #FFF;
        font-weight: 600;
        box-sizing: border-box;
    }

    body .znEditor.znInvalid,
    body .znEditor[zn-valid='false'] {
        border-color: #B60000;
        background: #fbd3d3;
    }

    body .znEditor.znDisabled {
        color: #000;
        cursor: default;
    }

        body .znEditor.znDisabled,
        body .znEditor.znDisabled:hover,
        body .znEditor.znDisabled .znEditorToolbarItem button:hover,
        body .znEditor.znDisabled:active,
        body .znEditor.znDisabled:focus {
            outline: 0 none;
            background: #EEE;
        }

            body .znEditor.znDisabled .znEditorContent {
                background: #fafafa;
            }


body .znEditorEditWindow .znWindowContent {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 10px;
}

/* #endregion znEditor */

/* #region znTooltip */

body .znTooltip {
    box-shadow: 0px 0px 5px #828282;
    position: fixed;
    padding: 5px 10px;
    background: #FFF;
    z-index: 9998;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    word-break: break-word;
    line-height: 1.5;
    top: -100px;
}

    body .znTooltip[zn-visible="true"] {
        position: absolute;
    }

    body .znTooltip[zn-wrap="true"] {
        white-space: normal;
    }

    body .znTooltip ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        body .znTooltip ul li {
            text-align: left;
        }

            body .znTooltip ul li:before {
                content: "\2d";
                font-family: 'FontAwesome';
                margin-right: 5px;
                font-size: 12px;
            }

/* #endregion znTooltip */

/* #region znIcon */

body .znIcon {
}

/* #endregion znIcon */

/* #region znText */

body .znText {
}

    body .znText.znHasTooltip {
        border-bottom: 1px dotted #999;
        cursor: help;
        display: inline-block;
    }

body .znPreFormattedText {
    width: 100%;
    overflow: auto;
    border: 1px solid;
    border-radius: 2px;
    padding: 4px 6px;
    margin: 0px;
    box-sizing: border-box;
    white-space: break-spaces;
}

/* #endregion znText */

/* #region znColorPicker */

body .znColorPickerWrapper {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}


    body .znColorPickerWrapper .znColorPicker {
        position: relative;
        border: 1px solid #000;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        flex: 1;
    }

        body .znColorPickerWrapper .znColorPicker .znColorPickerInput {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            height: 26px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            height: 32px;
            padding: 5px 36px 7px 6px;
            width: 100%;
            border: 0px none;
            position: absolute;
            z-index: 2;
        }

            body .znColorPickerWrapper .znColorPicker .znColorPickerInput::-webkit-color-swatch-wrapper {
                padding: 0;
            }

            body .znColorPickerWrapper .znColorPicker .znColorPickerInput::-webkit-color-swatch {
                border: none;
            }


        body .znColorPickerWrapper .znColorPicker .znColorPickerArrow {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            right: 0px;
            font-size: 13px;
            width: 32px;
            height: 100%;
            box-sizing: border-box;
            background: #EEE;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            top: 0px;
        }

    body .znColorPickerWrapper .znColorPickerClear {
    }

    body .znColorPickerWrapper.znDisabled {
        cursor: default;
    }

        body .znColorPickerWrapper.znDisabled .znColorPicker {
            background: #EEE;
        }

        body .znColorPickerWrapper.znDisabled * {
            cursor: default;
        }

/* #endregion znColorPicker*/

/* #region znToggleButton */

body .znToggleButtonWrapper {
    display: inline-block;
}

    body .znToggleButtonWrapper .znToggleButton {
        line-height: 1;
        align-items: center;
        display: flex;
        gap: 3px;
        justify-content: center;
        min-height: 24px;
        min-width: 24px;
    }

        body .znToggleButtonWrapper .znToggleButton .znToggleButtonIcon .znIcon {
            font-size: 18px;
        }

        body .znToggleButtonWrapper .znToggleButton .znToggleButtonIcon .znToggleButtonIconText {
            width: 1px;
            height: 1px;
            overflow: hidden;
            position: absolute;
        }

    body .znToggleButtonWrapper .znToggleIconButton,
    body .znToggleButtonWrapper .znToggleIconButton:hover,
    body .znToggleButtonWrapper .znToggleIconButton:active,
    body .znToggleButtonWrapper .znToggleIconButton:focus {
        border: 0px none;
        box-shadow: 0px 0px 0px;
        background: transparent;
        color: #000;
        outline: 0px none;
        border-radius: 0px;
        cursor: pointer;
        height: 32px;
        padding: 0px;
    }

        body .znToggleButtonWrapper .znToggleIconButton:focus-visible {
            outline: 2px dotted #000;
            background: transparent;
        }

        body .znToggleButtonWrapper .znToggleIconButton:hover,
        body .znToggleButtonWrapper .znToggleIconButton:active {
            outline: 0px none;
            background: transparent;
        }

        body .znToggleButtonWrapper .znToggleIconButton.znDisabled,
        body .znToggleButtonWrapper .znToggleIconButton.znDisabled:hover,
        body .znToggleButtonWrapper .znToggleIconButton.znDisabled:active,
        body .znToggleButtonWrapper .znToggleIconButton.znDisabled:focus {
            text-decoration: none;
            color: #8f8f8f;
            cursor: default;
        }

            body .znToggleButtonWrapper .znToggleIconButton.znDisabled .znButtonText,
            body .znToggleButtonWrapper .znToggleIconButton:hover .znButtonText,
            body .znToggleButtonWrapper .znToggleIconButton:active .znButtonText,
            body .znToggleButtonWrapper .znToggleIconButton:focus .znButtonText {
                text-decoration: none;
                outline: 0px none;
            }


    body .znToggleButtonWrapper .znToggleTextButton {
        color: #000;
        border: 1px solid #000;
        background: #FFF;
        padding: 4px 10px;
        min-width: 64px;
        vertical-align: middle;
        cursor: pointer;
        height: 32px;
        line-height: 1;
    }

        body .znToggleButtonWrapper .znToggleTextButton.znToggleButtonOn {
            background: #000;
            color: #FFF;
        }

        body .znToggleButtonWrapper .znToggleTextButton:focus-visible {
            outline: 2px dotted #000;
        }

        body .znToggleButtonWrapper .znToggleTextButton:hover,
        body .znToggleButtonWrapper .znToggleTextButton:active {
            outline: 0px none;
            background: #000;
            color: #FFF;
        }

        body .znToggleButtonWrapper .znToggleTextButton.znDisabled {
            cursor: default;
            opacity: 0.5;
        }

            body .znToggleButtonWrapper .znToggleTextButton.znDisabled:hover,
            body .znToggleButtonWrapper .znToggleTextButton.znDisabled:active,
            body .znToggleButtonWrapper .znToggleTextButton.znDisabled:focus {
                outline: 0 none;
                opacity: 0.5;
                background: #FFF;
                color: #000;
            }

        body .znToggleButtonWrapper .znToggleTextButton.znToggleButtonOn.znDisabled:hover,
        body .znToggleButtonWrapper .znToggleTextButton.znToggleButtonOn.znDisabled:active,
        body .znToggleButtonWrapper .znToggleTextButton.znToggleButtonOn.znDisabled:focus {
            outline: 0 none;
            opacity: 0.5;
            background: #000;
            color: #FFF;
        }


/* #endregion znToggleButton */

/* #region znSlider */

body .znSliderWrapper {
    width: 100%;
}

    body .znSliderWrapper .znSlider {
        position: relative;
    }

        body .znSliderWrapper .znSlider ul.znSliderItems {
            list-style-type: none;
            display: flex;
            margin: 0;
            padding: 0;
            justify-content: space-between;
            position: relative;
            user-select: none;
        }

            body .znSliderWrapper .znSlider ul.znSliderItems li {
                display: flex;
                align-items: center;
                flex-direction: column;
                flex: 1;
                position: relative;
            }

                body .znSliderWrapper .znSlider ul.znSliderItems li:before {
                    content: "";
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    opacity: 0;
                    z-index: 1;
                }

                body .znSliderWrapper .znSlider ul.znSliderItems li:first-child {
                    align-items: flex-start;
                    flex: 0.5;
                }

                body .znSliderWrapper .znSlider ul.znSliderItems li:last-child {
                    align-items: flex-end;
                    flex: 0.5;
                }

                body .znSliderWrapper .znSlider ul.znSliderItems li span.znSliderItemSeparator {
                    font-size: 20px;
                    color: #BBB;
                    margin-bottom: 4px;
                    width: 3px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                body .znSliderWrapper .znSlider ul.znSliderItems li span.znSliderItemIcon {
                    font-size: 20px;
                }

                body .znSliderWrapper .znSlider ul.znSliderItems li span.znSliderItemLabel {
                }

        body .znSliderWrapper .znSlider .znSliderTrackWrapper {
            display: flex;
            align-items: center;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            height: 20px;
        }

            body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTrack {
                background: #EEE;
                height: 3px;
                border-radius: 0px;
                position: absolute;
                left: 2px;
                right: 2px;
            }

            body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker {
                transition: width 0.3s ease-out;
                background: #000;
                height: 3px;
                width: 0px;
                position: relative;
                border-radius: 0px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                left: 2px;
                right: 2px;
            }

                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a {
                    display: block;
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    z-index: 2;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    right: -12px;
                    font-size: 0.875rem;
                }

                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:not([aria-valuenow]) {
                        z-index: 0;
                    }

                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a .znIcon {
                        font-size: 0.875rem;
                    }

                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:hover .znIcon,
                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus .znIcon,
                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:active .znIcon,
                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible .znIcon {
                        font-size: 0.9375rem;
                    }

    body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:hover .znIcon,
    body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:focus .znIcon,
    body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:active .znIcon,
    body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible .znIcon {
        font-size: 0.875rem;
    }


    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible {
        outline: 0px none;
    }


    body .znSliderWrapper.znInvalid {
        background: transparent;
        border: 0px none;
    }

        body .znSliderWrapper.znInvalid .znSliderTrackWrapper,
        body .znSliderWrapper.znInvalid .znSliderTrackWrapper .znSliderTracker,
        body .znSliderWrapper.znInvalid .znSliderTrackWrapper .znSliderTracker a {
            background: #fbd3d3;
        }

    body .znSliderWrapper.znDisabled {
        cursor: default;
        opacity: 0.5;
    }

        body .znSliderWrapper.znDisabled:hover,
        body .znSliderWrapper.znDisabled:active,
        body .znSliderWrapper.znDisabled:focus {
            outline: 0 none;
        }

        body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a,
        body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:hover,
        body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:focus,
        body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:active
        body .znSliderWrapper.znDisabled .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible {
            cursor: default;
            outline: 0px none;
            box-shadow: none;
        }

/* #endregion znSlider */

/* #region znStaticSlider*/
body .znStaticSliderWrapper {
    width: 100%;
}

    body .znStaticSliderWrapper .znStaticSlider {
    }

        body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems {
            list-style-type: none;
            display: flex;
            margin: 0;
            padding: 0;
            justify-content: space-between;
            position: relative;
            line-height: 1;
        }

            body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li {
                display: flex;
                background: #EEE;
                align-items: center;
                flex-direction: column;
                flex: 1;
                position: relative;
                cursor: pointer;
                border-right: 1px solid #AAA;
                margin-top: 4px;
            }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:last-child {
                    border-right: 0px none;
                }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li div.znSliderItemBar {
                    height: 8px;
                    width: 100%;
                }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li div.znSliderItemText {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 4px 2px;
                    box-sizing: border-box;
                }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li div.znSliderItemBarBottom {
                    height: 3px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    opacity: 0;
                    transition: opacity 0.25s ease-in;
                    background: #000;
                }


                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:focus div.znSliderItemBarBottom,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:focus-visible div.znSliderItemBarBottom,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:hover div.znSliderItemBarBottom {
                    opacity: 1;
                }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li div.znSliderItemText .znIcon,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li div.znSliderItemText .znText {
                    color: #000;
                }

                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:focus,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:focus-visible,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li:hover,
                body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li[zn-active="true"] {
                    margin-top: 0px;
                    box-shadow: 1px 0px 0px #AAA;
                    z-index: 1;
                }

                    body .znStaticSliderWrapper .znStaticSlider ul.znSliderItems li[zn-active="true"] div.znSliderItemBarBottom {
                        opacity: 1;
                    }

    body .znStaticSliderWrapper.znDisabled {
        cursor: default;
        opacity: 0.5;
    }

        body .znStaticSliderWrapper.znDisabled .znStaticSlider ul.znSliderItems li {
            cursor: default;
        }

            body .znStaticSliderWrapper.znDisabled .znStaticSlider ul.znSliderItems li:focus div.znSliderItemBarBottom,
            body .znStaticSliderWrapper.znDisabled .znStaticSlider ul.znSliderItems li:focus-visible div.znSliderItemBarBottom,
            body .znStaticSliderWrapper.znDisabled .znStaticSlider ul.znSliderItems li:hover div.znSliderItemBarBottom {
                opacity: 0;
            }


/* #endregion znStaticSlider*/


/* #region znTree */

body div.znTree {
    padding: 2px;
}

    body div.znTree ul.znTreeItems {
        margin: 0;
        padding: 0;
        list-style-type: none;
        color: #000;
        white-space: nowrap;
        line-height: 2;
    }

        body div.znTree ul.znTreeItems li {
        }

            body div.znTree ul.znTreeItems li.znTreeItem div.znTreeItemToggle {
                display: inline-flex;
                align-items: center;
                width: 24px;
                box-sizing: border-box;
                justify-content: center;
            }


            body div.znTree ul.znTreeItems li.znTreeItem .znToggleIconButton,
            body div.znTree ul.znTreeItems li.znTreeItem .znTreeItemLink .znLinkButton {
                height: auto;
            }

            body div.znTree ul.znTreeItems li.znTreeItem.znTreeItemActive > .znTreeItemLink .znButtonText {
                font-weight: 600;
            }

            body div.znTree ul.znTreeItems li.znTreeItem .znTreeItemLink .znLinkButton:hover .znButtonText {
                border-bottom: 1px solid transparent;
            }

            body div.znTree ul.znTreeItems li ul.znTreeItems {
                padding: 0px 0px 0px 15px;
            }

            body div.znTree ul.znTreeItems li ul {
                overflow: hidden;
                max-height: fit-content;
                transition: all 0.25s ease-out;
            }

                body div.znTree ul.znTreeItems li ul[zn-visible='false'] {
                    max-height: 0px;
                }

                body div.znTree ul.znTreeItems li ul[zn-visible='true'] {
                    max-height: 10000px;
                }

/* #endregion znTree */

/* #region znAlert */

body .znAlert {
    position: relative;
    padding: 10px 10px 8px 40px;
    box-sizing: border-box;
    margin-bottom: 10px;
    line-height: 1;
    color: #000;
    border: 1px solid #000;
}

    body .znAlert:before {
        position: absolute;
        top: 6px;
        left: 10px;
        font-size: 1.375rem;
        font-family: 'Font Awesome 7 Pro';
    }

    body .znAlert ul li {
        line-height: 140%;
    }

    body .znAlert.znAlertError {
        border-color: #B60000;
        background: #fbd3d3;
    }

        body .znAlert.znAlertError:before {
            content: "\f321";
        }

    body .znAlert.znAlertInfo {
        border-color: #d8d8d8;
        background: #e8f7fc;
    }

        body .znAlert.znAlertInfo:before {
            content: "\f05a";
        }

    body .znAlert.znAlertQuestion {
        border-color: #d8d8d8;
        background: #e8f7fc;
    }

        body .znAlert.znAlertQuestion:before {
            content: "\f059";
        }

    body .znAlert.znAlertSuccess {
        border-color: #06880f;
        background: #e6f3e7;
    }

        body .znAlert.znAlertSuccess:before {
            content: "\f058";
        }

    body .znAlert.znAlertWarning {
        border-color: #f5a91b;
        background: #fce9c6;
    }

        body .znAlert.znAlertWarning:before {
            content: "\f071";
        }

/* #endregion znDialog */

/* #region znTitle */

body .znTitle {
    font-weight: normal;
    font-size: 0.9375rem;
    margin: 0;
    outline: 0 none;
    margin-bottom: 10px;
    color: #000;
    border-bottom: 1px solid #000;
    padding: 2px 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

    body .znTitle h2 {
        margin: 0px;
        line-height: 100%;
        color: #000;
        font-weight: 600;
        font-size: 0.9375rem;
    }


    body .znTitle .znTitleIcon .znIcon {
        font-size: 1.25rem;
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body .znTitle .znTitle-additional {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        font-weight: normal;
    }

        body .znTitle .znTitle-additional .znFlexEnd {
            gap: 10px;
        }

/* #endregion znTitle */

/* #region znColumnLayout */

body .znColumnLayoutBox {
}

body .znColumnLayout {
    display: grid;
    gap: 5px 10px;
    margin: 1px 1px 10px 1px;
}

    body .znColumnLayout .znLabelColumn {
        word-break: break-word;
        min-height: 26px;
    }

        body .znColumnLayout .znLabelColumn.znAlignTop {
            align-self: flex-start;
        }

        body .znColumnLayout .znLabelColumn .znIcon {
            margin-left: 4px;
        }

    body .znColumnLayout .znFullWidthColumn {
        grid-column: 1 / -1;
    }

    body .znColumnLayout.one-column {
        grid-template-columns: 1fr;
    }

    body .znColumnLayout.two-column {
        grid-template-columns: minmax(auto, 240px) auto;
    }

    body .znColumnLayout.three-column {
        grid-template-columns: minmax(auto, 240px) minmax(240px, 240px) auto;
    }

    body .znColumnLayout.two-column.size-auto {
        grid-template-columns: auto auto;
    }

    body .znColumnLayout.two-column .znInputColumn {
        width: 240px;
    }

    body .znColumnLayout.four-column {
        grid-template-columns: minmax(0, 240px) 240px minmax(0, 240px) 240px;
    }

    body .znColumnLayout.six-column {
        grid-template-columns: minmax(0, 200px) minmax(200px, 1fr) minmax(0, 200px) minmax(200px, 1fr) minmax(0, 200px) minmax(200px, 1fr);
    }

    body .znColumnLayout.eight-column {
        grid-template-columns: minmax(0, 200px) minmax(200px, 1fr) minmax(0, 200px) minmax(200px, 1fr) minmax(0, 200px) minmax(200px, 1fr) minmax(0, 200px) minmax(200px, 1fr);
    }

body .znLabelInputIsFullWidth {
    grid-column: 1;
}

body .znColumnLayout.two-column .znInputColumn.znInputColumnFullWidth {
    width: auto;
}

body .znColumnLayout.four-column .znInputColumn.znInputColumnFullWidth {
    grid-column: 2 / span 3;
}

body .znColumnLayout.six-column .znInputColumn.znInputColumnFullWidth {
    grid-column: 2 / span 5;
}

body .znColumnLayout.eight-column .znInputColumn.znInputColumnFullWidth {
    grid-column: 2 / span 7;
}


/* #endregion znColumnLayout */


/* #region znValidationError */

body .znValidationError {
    position: relative;
    box-sizing: border-box;
    line-height: 1;
    color: #B60000;
    font-weight: inherit;
    font-size: 14px;
}

    body .znValidationError[zn-active='false'] {
        display: contents;
    }

    body .znValidationError ul.znValidationErrorList {
        margin: 0;
        padding: 0;
        list-style-type: none;
        gap: 0px;
        display: flex;
        flex-direction: column;
    }

        body .znValidationError ul.znValidationErrorList li {
            display: flex;
            gap: 0px;
        }

            body .znValidationError ul.znValidationErrorList li span.znValidationErrorIcon {
            }

    body .znValidationError span.znValidationErrorText {
        display: inline-flex;
        margin: 3px 0;
    }

/* #endregion znValidationError */

/* #region combined controls */
body .znWindow .znSelectWrapper, body .znWindow .znMultiSelectWrapper {
    position: relative;
}

    body .znWindow .znSelectWrapper.znDisabled,
    body .znWindow .znMultiSelectWrapper.znDisabled {
        position: relative;
    }

    body .znWindow .znSelectWrapper[zn-relative="true"],
    body .znWindow .znMultiSelectWrapper[zn-relative="true"],
    body .znWindow .znDatePickerWrapper[zn-relative="true"],
    body .znWindow .znDateTimePickerWrapper[zn-relative="true"],
    body .znWindow .znTimePickerWrapper[zn-relative="true"],
    body .znWindow .znTimePickerListWrapper[zn-relative="true"],
    body .znWindow .znDateOptionListWrapper[zn-relative="true"] {
        position: relative;
    }

    body .znWindow .znSelectWrapper[zn-relative="false"],
    body .znWindow .znMultiSelectWrapper[zn-relative="false"],
    body .znWindow .znDatePickerWrapper[zn-relative="false"],
    body .znWindow .znDateTimePickerWrapper[zn-relative="false"],
    body .znWindow .znTimePickerWrapper[zn-relative="false"],
    body .znWindow .znTimePickerListWrapper[zn-relative="false"],
    body .znWindow .znDateOptionListWrapper[zn-relative="false"] {
        position: inherit;
    }

body .znWindow .znTimePickerListWrapper .znSelectWrapper,
body .znWindow .znTimePickerListWrapper .znSelectWrapper .znSelect,
body .znWindow .znTimePickerListWrapper .znSelectWrapper .znSelect .znSelectInput,
body .znWindow .znDateOptionListWrapper .znSelectWrapper,
body .znWindow .znDateOptionListWrapper .znSelectWrapper .znSelect,
body .znWindow .znDateOptionListWrapper .znSelectWrapper .znSelect .znSelectInput {
    height: 0px;
}

body .znWindow .znSelectWrapper[zn-relative="false"] .znTooltip[zn-position='bottom-right'],
body .znWindow .znSelectWrapper[zn-relative="false"] .znTooltip[zn-position='bottom-right-wrap'],
body .znWindow .znMultiSelectWrapper[zn-relative="false"] .znTooltip[zn-position='bottom-right'],
body .znWindow .znMultiSelectWrapper[zn-relative="false"] .znTooltip[zn-position='bottom-right-wrap'] {
    top: auto;
    left: auto;
}

body .znWindow .znSelectWrapper .znSelectPopupWrapper,
body .znWindow .znMultiSelectWrapper .znMultiSelectPopupWrapper {
    max-width: 50vw;
    visibility: hidden;
}

    body .znWindow .znSelectWrapper .znSelectPopupWrapper[zn-visible="true"],
    body .znWindow .znMultiSelectWrapper .znMultiSelectPopupWrapper[zn-visible="true"] {
        visibility: visible;
    }


body .znWindow .znSelectWrapper[zn-relative="true"] .znSelectPopupWrapper,
body .znWindow .znMultiSelectWrapper[zn-relative="true"] .znMultiSelectPopupWrapper {
    max-width: 175%;
}

body .znWindow .znSelectWrapper[zn-relative="false"] .znSelectPopupWrapper,
body .znWindow .znMultiSelectWrapper[zn-relative="false"] .znMultiSelectPopupWrapper {
    min-width: fit-content;
    max-width: 100%;
}

/* #endregion combined controls */

/* #region Responsive */

@media (max-width: 1250px) {

    body .znColumnLayout.eight-column,
    body .znColumnLayout.six-column {
        grid-template-columns: minmax(0, 1fr) 2fr minmax(0, 1fr) 2fr minmax(0, 1fr) 2fr;
    }
}

@media (max-width: 900px) {

    body .znColumnLayout.eight-column,
    body .znColumnLayout.six-column,
    body .znColumnLayout.four-column {
        grid-template-columns: minmax(0, 240px) 70dvw;
    }

        body .znColumnLayout.four-column .znInputColumn.znInputColumnFullWidth,
        body .znColumnLayout.six-column .znInputColumn.znInputColumnFullWidth,
        body .znColumnLayout.six-column .znInputColumn.znInputColumnFullWidth {
            grid-column: span 1;
        }
}

@media (max-width: 750px) {

    body .znWindow {
        width: 90vw;
    }


    body div.znMenu[zn-responsive="true"] .znActivateResponsiveMenu {
        display: block;
    }

    body div.znMenu[zn-responsive="true"] ul.znMenuItems {
        display: none;
    }

        body div.znMenu[zn-responsive="true"] ul.znMenuItems ul.znSubMenuItems li.znMenuItem > ul.znSubMenuItems {
            max-height: inherit;
        }

    body div.znMenu.znMenuResponsive ul.znMenuItems {
        display: block;
    }

        body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem .znMenuLink div.znMenuIcon {
            display: none;
        }

        body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem {
            border-left: 0px none;
            border-bottom: 1px solid #FFF;
            padding: 2px;
            text-align: left;
            box-sizing: border-box;
        }


            body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem:last-child {
                border-bottom: 0px none;
            }

            body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem a {
                padding: 10px;
            }

            body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem.znHasSubmenu > a:after {
                content: "\f0da";
                font-family: 'Font Awesome 7 Pro';
                font-weight: 600;
            }

            /*body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem:hover > ul.znSubMenuItems {
                display: none;
            }*/

            body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem.znActive > ul.znSubMenuItems {
                display: block;
            }

            body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem ul.znSubMenuItems {
                position: relative;
                background: transparent;
                border: 0px none;
                z-index: 1;
                padding: 0px;
                min-width: 100%;
            }

    body div.znMenu ul.znMenuItems ul.znSubMenuItems ul.znSubMenuItems {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem {
        display: block;
        padding-right: 0px;
    }
}

@media (max-width: 700px) {
    body .znColumnLayout .column-input {
        width: 240px;
    }
}



/* #endregion*/