/* #region Variabelen */
:root {
    --rowSize: calc(var(--zoom)*50px);
    --colSize: calc(var(--zoom)*112px);
    --fontSize: calc(var(--zoom)*16px);
    --fontSizeInfoPanel: calc(var(--zoom)*14.5px);
    --fontSizeTitle: calc(var(--zoom)*1.0rem);
}

/* #endregion */

/* #region Algemeen */

.flex {
    display: flex;
}

.w-fit-content {
    width: fit-content !important;
}

.fieldFontSize {
    font-size: var(--fontSize) !important;
}

.infoPanelFieldFontSize {
    font-size: var(--fontSizeInfoPanel) !important;
}

.fieldFontSize-title {
    font-size: var(--fontSizeTitle) !important;
}

/* #endregion */

/* #region Scherm inhoud en structuur */

.rowColumn {
    display: flex;
    --flex-wrap: wrap;
    flex-direction: column;
}

.fieldContainer {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    min-height: var(--rowSize);
}

.field {
    height: 100%;
}

.field-margin {
    margin-left: 4px;
}

.fieldTitle {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: calc(var(--zoom) * 0.95rem);
}

.window .autoSaveArea {
    font-size: 0.9em; /*zoom1=1em*/
    display: flex;
    color: var(--win-autosave-text-color);
}

    .window .autoSaveArea .btnAutoSave {
        font-size: 1.1em;
        color: var(--win-autosave-btn-color);
        margin-left: 0.5rem;
    }

    .window .autoSaveArea .autoSaveMessage {
        margin-left: 1em;
        margin-right: 0.75em;
        color: var(--win-autosave-saved-text-color);
    }

    .window .autoSaveArea .autoSaveWarning {
        color: var(--win-autosave-warning-icon-color);
    }

    .window .memo tbody td {
        padding: unset;
    }

.windowRow .k-picker-wrap {
    height: 100%;
}

.windowRow .lookupcontainer .relatedLookup {
    border-radius: 0.25rem;
    background-color: var(--win-related-lookup-bkg-color) !important;
}

    .windowRow .lookupcontainer .relatedLookup:hover {
        background-color: var(--win-related-lookup-hover-bkg-color) !important;
    }


.windowRow .lookupcontainer,
#SelectionFields .lookupcontainer {
    --position: relative;
    display: flex;
    height: 100%;
}

    .windowRow .lookupcontainer label {
        white-space: nowrap;
        text-overflow: ellipsis;
        align-self: center;
    }

    .windowRow .lookupcontainer .fakeinput,
    #SelectionFields .lookupcontainer .fakeinput {
        display: flex;
        height: 100%;
        border-left: 1px solid var(--lookup-border-color);
    }

@media (max-width: 575px) {
    .windowRow .lookupcontainer .fakeinput,
    #SelectionFields .lookupcontainer .fakeinput {
        border-left: none !important;
    }
}

.windowRow .lookupcontainer .fakeinput input[type=text],
#SelectionFields .lookupcontainer .fakeinput input[type=text] {
    height: 100%;
}

.windowRow .lookupcontainer button:not(.relatedLookup) {
    background-color: var(--lookup-btn-bkg-color) !important;
}

.windowRow .lookupcontainer svg,
#SelectionFields .lookupcontainer svg {
    color: var(--lookup-btn-icon-color);
    height: 20px;
    width: 20px;
}

.windowRow .textbox-noborder, #SelectionFields .textbox-noborder {
    border: 0px;
    outline: none;
}

    .windowRow .textbox-noborder:focus, #SelectionFields .textbox-noborder:focus {
        border: 0px;
        outline: none;
    }

.windowRow fieldset {
    border: 1px solid var(--win-fieldset-border-color);
    padding: 0.75em;
}

    .windowRow fieldset legend {
        width: auto;
        padding: 0px 10px 0px 10px;
    }

.containerSet + .containerSet .fieldContainer .field.sharkCheckbox {
    margin-left: 0.5rem;
}

.colRowGroup:has(.fieldContainer) {
    margin-bottom: 0.5rem;
}

.window .fieldContainer .window .windowRow,
.window .fieldContainer .window .windowRowTitle .bg-white {
    background-color: var(--win-inside-win-bkg-color) !important;
}


/* #endregion */
/* #region Grid/Window */
#lookupdialog {
    width: 80vw;
}

/* #endregion */

/* #region GridView (zelfgemaakt) window */

#GridView table th {
    color: var(--win-gridview-th-color);
}

.centerGridView {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed !important;
}

#gridviewdialog {
    position: absolute;
    z-index: 100000;
    background: var(--win-gridview-dialog-bkg-color);
    display: flex;
    flex-direction: column;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    box-shadow: 0.3rem 0.3rem 0.5rem 0.1rem var(--win-gridview-dialog-boxshadow-color);
    user-select: none;
}

    #gridviewdialog #gridviewtitlebar {
        height: 40px;
        background: var(--win-gridview-dialog-titlebar-bkg-color);
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        font-weight: 700;
    }

    #gridviewdialog #gridviewcontent {
        flex: 1;
    }

    #gridviewdialog #gridviewclose {
        padding: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

        #gridviewdialog #gridviewclose:hover {
            cursor: pointer;
            color: var(--win-gridview-dialog-close-hover-color);
        }

/* #endregion */

/* #region telerik overrides */
#tabbar .k-tabstrip-content.k-state-active {
    overflow-y: auto;
    height: calc(100vh - 87px);
    flex: none;
}

.field.memo .k-editor,
.memoEditor {
    height: 100% !important;
}

    .memoEditor div.k-editor-content div.k-content {
        font-family: var(--shark-font-family);
    }

    .memoEditor ::selection {
        background-color: var(--win-memo-selection-bkg-color);
    }

/* #endregion */

/* #region Shark overrides */

.accordion-fake-button {
    box-shadow: none;
    border: none;
    outline: none;
    transition: none;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    border-radius: 0;
    overflow-anchor: none;
}

/* #endregion*/

/* #region Window splitter met een document */

.k-splitter {
    border: 0;
    background-color: var(--tlk-splitter-bkg-color);
}

#documentOverview .k-splitbar {
    background-color: var(--tlk-splitbar-docoverview-bkg-color);
}

.windowDocumentSplitter .k-splitbar {
    background-color: var(--tlk-splitbar-windoc-bkg-color);
}

.k-splitbar {
    color: var(--tlk-splitbar-text-color);
}


    .k-splitbar:focus,
    .k-splitbar.k-focus,
    .k-splitbar:hover,
    .k-splitbar.k-hover,
    .k-splitbar-horizontal-hover,
    .k-splitbar-vertical-hover {
        background-color: var(--tlk-splitter-hover-bkg-color) !important;
        color: var(--tlk-splitter-hover-text-color);
    }

.windowDocumentSplitter .documentPreview {
    flex: 1;
}

    .windowDocumentSplitter .documentPreview .k-pdf-viewer-canvas {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.windowDocumentSplitter .accordion-item:not(:last-child) {
    border-bottom: 0.5rem solid var(--win-windoc-divideitems-border-color) !important;
    padding-bottom: 8px;
    margin-bottom: 0;
}

.windowDocumentSplitter .autoSaveArea {
    padding-top: 0.5rem;
    padding-left: 1rem;
}

.form-check-input:disabled:not(:checked):not(.k-checked) {
    background: var(--cbx-disabled-bkg-color);
    border-color: var(--cbx-disabled-border-color);
}

.k-checkbox-wrap:has(.form-check-input:disabled) + .k-checkbox-label {
    cursor: default;
    opacity: 0.8;
}

/* #endregion*/