/* #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 {
    font-size: 16px;
}

body .znLink .znLinkIcon,
body .znIconButton,
body .znButton .znButtonIconLeft,
body .znButton .znButtonIconRight {
    font-size: 14px;
}

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

body .znHidden,
body *[zn-visible='false'] {
    visibility: 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 .znWindow .znResize,
body .znWindow *[zn-resize="true"] {
    max-width: 80vw;
}

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

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

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 > 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;
}

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;
}

    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: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.znLinkIconOnly,
    body a.znLink.znLinkIconOnly:link,
    body a.znLink.znLinkIconOnly:visited,
    body a.znLink.znLinkIconOnly:hover {
        text-decoration: none;
    }

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

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

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

    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 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;
    }

        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;
    }

        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-flex;
        }

        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;
    }

        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%;
    }

        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 #FFF;
            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 a.znMenuLink {
                display: flex;
                box-sizing: border-box;
                padding: 5px 0;
                color: #FFF;
                color: #000;
                text-decoration: none;
                width: 100%;
                align-items: center;
                cursor: default;
            }

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

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

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

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

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

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

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

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

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

            body div.znMenu ul.znMenuItems li.znMenuItem a.znMenuLink:hover div.znMenuIcon .znIcon,
            body div.znMenu ul.znMenuItems li.znMenuItem a.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 > a:after {
                content: "\f0da";
                font-family: 'Font Awesome 6 Pro';
                font-weight: 600;
                flex: 1;
                display: flex;
                justify-content: flex-end;
            }

            body div.znMenu ul.znMenuItems li.znMenuItem ul.znSubMenuItems li.znMenuItem a.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.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 a.znMenuLink {
            cursor: default;
        }

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

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

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

/* #endregion znMenu */

/* #region znCheckBox */

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

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

    body .znCheckBoxWrapper .znCheckBox {
        position: relative;
        background: transparent;
        margin-right: 5px;
    }

        body .znCheckBoxWrapper .znCheckBox .znCheckBoxIcon {
            font-size: 16px;
        }

    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;
    }

    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;
        /*max-width: 650px;*/
        max-width: 90vw;
        min-width: 100px;
        background: #FFF;
        max-height: 90dvh;
        position: absolute;
    }

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

        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;
        }

            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 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 .znPopupContent .znPopupMessages ul.znPopupMessageList {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                }

                    body .znPopupWrapper .znPopup .znPopupContent .znPopupMessages ul.znPopupMessageList li {
                        display: flex;
                        align-items: baseline;
                    }

                        body .znPopupWrapper .znPopup .znPopupContent .znPopupMessages ul.znPopupMessageList li span.znPopupMessageIcon {
                            margin-right: 5px;
                        }

                        body .znPopupWrapper .znPopup .znPopupContent .znPopupMessages ul.znPopupMessageList li span.znPopupMessage {
                        }



        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 span {
                cursor: default;
                opacity: 0.4;
            }

            body .znPager ul li span.fa-solid,
            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 .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 th.znTableHeaderCell span.znTableHeaderSortable {
                display: flex;
                cursor: pointer;
            }

            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: 25px;
                text-align: center;
            }


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

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

            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: 25px;
                text-align: center;
            }

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

            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: #000;
            color: #FFF;
            border-bottom: 2px solid #FFF;
            font-weight: 600;
            text-align: center;
        }

            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton,
            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:hover,
            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:active,
            body .znGrid .znTable tr.znTableGroupRow td.znTableGroupCell .znIconButton:focus {
                color: #FFF;
                float: right;
                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%;
        left: -2px;
    }

    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%;
        left: -2px;
    }

    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,
        body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li {
            height: 30px;
            padding: 4px 6px;
            box-sizing: border-box;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            body .znSelectWrapper .znSelectPopupWrapper .znSelectPopup ul li .znCheckBoxText,
            body .znMultiSelectWrapper .znMultiSelectPopupWrapper .znMultiSelectPopup ul li .znCheckBoxText {
                padding: 0px;
            }


            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;
        }

/* #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 {
            border: 2px solid #000;
            outline: 0 none;
        }

        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 {
        border: 2px solid #000;
        outline: 0 none;
    }

    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,
    body .znTimePickerWrapper .znTimePickerInput,
    body .znDateTimePickerWrapper .znDateTimePickerInput {
        display: flex;
        flex: 1;
    }

    body .znDateTimePickerWrapper .znDateTimePickerInput {
        position: relative;
    }

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

    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 .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 {
    border: 2px solid #000;
    outline: 0 none;
}


body .znDatePickerIcon,
body .znTimePickerIcon,
body .znDateTimePickerIcon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0px;
    top: 0px;
    font-size: 13px;
    width: 32px;
    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;
}

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 .znDateTimePickerIcon {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 64px;
}


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

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

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 .znDateTimePickerWrapper .znSelectWrapper {
    position: absolute;
    right: 0px;
    left: 0;
}

    body .znDateTimePickerWrapper .znSelectWrapper .znSelect {
        width: 28px;
        right: 0px;
        position: absolute;
        z-index: 8;
    }

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

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

        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: flex-start;
    }

        body .znRadioButtonList .znRadioButtonListItem .znRadioButtonWrapper .znRadioButton {
            position: relative;
            background: #FFF;
            margin-right: 5px;
            cursor: pointer;
            background: transparent;
        }

            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;
            }

    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;
    animation: znShow 1s forwards;
    visibility: hidden;
    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 .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: 5px;
    background: #EEE;
    border: 1px solid #AAA;
    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 6 Pro';
            font-size: 25px;
        }

    body .znEditor .znEditorToolbar {
        width: 100%;
        height: 35px;
        padding: 0px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        z-index: 1;
        gap: 10px;
    }

        body .znEditor .znEditorToolbar .znEditorToolbarItemGroup,
        body .znEditor .znEditorToolbar .znEditorCustomToolbarItemGroup {
            display: flex;
            border: 1px solid #AAA;
            border-radius: 3px;
        }

            body .znEditor .znEditorToolbar .znEditorToolbarItemGroup .znEditorToolbarItem {
                border-left: 1px solid #AAA;
            }

                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 .znEditorCustomToolbarItemGroup button:hover {
                    background: #AAA;
                }

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

        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 .znEditorContent {
        border: 0px none;
        border-radius: 0px;
        outline: 0px none;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        background: #FFF;
        display: inline-block;
        border: 1px solid #DDD;
        position: absolute;
        top: 44px;
        right: 5px;
        left: 5px;
        bottom: 5px;
    }

    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: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: absolute;
    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-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;
    max-height: 200px;
    border: 1px solid;
    border-radius: 2px;
    padding: 4px 6px;
    margin: 0px;
    box-sizing: border-box;
}

/* #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;
        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;
    }

        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;
                }

                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: 2px;
            right: 2px;
            top: 0px;
            height: 20px;
        }

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

            body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker {
                transition: width 0.3s ease-out;
                background: #000;
                height: 3px;
                width: 0px;
                position: relative;
                border-radius: 5px;
            }

                body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a {
                    display: block;
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    right: -6px;
                    top: -5px;
                    z-index: 2;
                    cursor: pointer;
                    background: #000;
                    outline: 1px solid #000;
                }

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

                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:hover,
                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus,
                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:active {
                        box-shadow: 0px 0px 2px #000;
                    }

                    body .znSliderWrapper .znSlider .znSliderTrackWrapper .znSliderTracker a:focus-visible {
                        outline: 1px solid #000;
                        opacity: 1;
                    }

    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 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: 22px;
                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: 1000px;
                }

/* #endregion znTree */

/* #region znValidationError */

body .znValidationError {
    position: relative;
    /*background: #fbd3d3;*/
    /*padding: 6px;*/
    box-sizing: border-box;
    margin: 10px 0 0 0;
    line-height: 1;
    /*border: 1px solid #D90000;*/
    color: #B60000;
    font-weight: inherit;
    font-size: 14px;
}

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

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

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

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

/* #endregion znValidationError */

/* #region znAdditionalInfo */
body .znAdditionalInfo {
    margin-left: 4px;
}
/* #endregion znAdditionalInfo */
/* #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 .znDateTimePickerWrapper[zn-relative="true"],
    body .znWindow .znTimePickerWrapper[zn-relative="true"],
    body .znWindow .znTimePickerListWrapper[zn-relative="true"] {
        position: relative;
    }

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

        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: 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.znMenuResponsive ul.znMenuItems {
        display: block;
    }

        body div.znMenu.znMenuResponsive ul.znMenuItems li.znMenuItem a.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 6 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;
    }
}


/* #endregion*/