/*
    Shared CSS with link
    NOTE: in order to change this CSS file please edit the CommonUi.css file in the SharedArtifacts folder
    ATTENTION: Variables in CommonUi are used in Infokalf.css and MijnSkv.css files
*/

html {
    font-size: 11px;
}

/* ------------------------------- */
/* --- cui and kendo variables --- */
/* ------------------------------- */

:root {
    /* color scheme, attention variables are used in page and portal specific css */
    --cui-base-color-white-1: #FFFFFF;
    --cui-base-color-grey-1: #666666;
    --cui-base-color-grey-2: #a1a1a1;
    --cui-base-color-grey-3: #eeeeee;
    --cui-base-color-grey-4: #ebebeb;
    --cui-base-color-blue-1: #2882c1;
    --cui-base-color-blue-2: #0c3658;
    --cui-base-color-blue-3: #006BB7;
    --cui-base-color-black-1: #333333;
    /* element styling */
    --cui-color-primary: var(--cui-base-color-blue-3);
    --cui-color-text: var(--cui-base-color-grey-1);
    --cui-color-kendo-on-app-surface: var(--cui-base-color-black-1);
    --cui-color-links: var(--cui-color-kendo-on-app-surface);
    --cui-menu-background-color-dark: var(--cui-base-color-blue-2);
    --cui-menu-background-color-main: var(--cui-base-color-blue-1);
    --cui-menu-color-main: var(--cui-base-color-white-1);
    --cui-color-heading: var(--cui-base-color-blue-1);
    /* font */
    --cui-font-family-main: Verdana, Arial, Helvetica, sans-serif;
    --cui-font-size-main: 1rem; /*variable used in infokalf.css*/
    --cui-fontsize-h1: 1.545rem;
    /* Form labels */
    --cui-label-width-default: 175px;
    --cui-label-width-kendo-window: 20rem;
    /* Form input fields */
    --cui-window-input-field-width: 20rem;
    /* Calendar */
    --cui-calendar-width: 205px;
    --cui-calendar-height: 190px;
    --cui-calendar-cell-size: 26px;
    --cui-calendar-year-cell-size: 46px;
    /* CUI to Kendo variables    */
    --kendo-color-subtle: var(--cui-base-color-grey-2);
    --kendo-color-primary-hover: #0c3658;
    --kendo-color-primary-active: var(--kendo-color-primary-hover);
    --kendo-color-base-active: var(--kendo-color-primary-hover);
    --kendo-color-base-hover: var(--kendo-color-primary-hover);
    --kendo-font-size: var(--cui-font-size-main) !important;
    --kendo-color-on-base: var(--cui-menu-color-main) !important;
    --kendo-color-on-app-surface: var(--cui-base-color-grey-1); /* text inside kendo components */
    --kendo-color-base: var(--cui-menu-background-color-main);
    --kendo-color-primary: var(--cui-base-color-blue-1);
    --kendo-color-primary-on-surface: var(--cui-base-color-blue-1);
    --kendo-color-base: var(--kendo-color-primary);
    --kendo-font-family: var(--cui-font-family-main);
}

/* ------------------------------------ */
/* --- General html element styling --- */
/* ------------------------------------	*/

html, body, div, span, h1, a, img, ul, li, label, table, tbody, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

ol, ul {
    list-style: none;
}

body {
    font-size: var(--cui-font-size-main);
    font-family: var(--cui-font-family-main);
    line-height: 1;
    color: #666666;
    background-image: url(/Content/shared/images/background.jpg);
    background-color: var(--cui-base-color-white-1);
    background-repeat: repeat-x;
    overflow-y: scroll;
}

div.clear {
    clear: both;
    padding: 0;
    margin: 0;
    height: 0;
    width: 0;
}

a {
    text-decoration: none;
    color: var(--cui-color-primary);
    cursor: pointer;
}

    a:hover {
        text-decoration: underline;
    }

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: var(--cui-color-heading);
    padding-bottom: 10px;
    padding-top: 10px;
}

h1 {
    font-size: var(--cui-fontsize-h1);
    padding-top: 0;
    padding-bottom: 10px;
}

h2 {
    font-size: 12px;
    padding-top: 15px;
    padding-bottom: 5px;
}

h3 {
    font-size: 11px;
}

label {
    display: inline-block;
    margin-bottom: 10px;
    width: 175px;
    padding-top: 5px;
}

img {
    vertical-align: text-bottom;
}

/* ------------------------ */
/* --- Main page layout --- */
/* ------------------------	*/

.wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-image: url(/Content/shared/images/wrapperbackground.png);
    background-repeat: repeat-y;
    width: 981px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

    .wrapper .header {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 198px;
        border-bottom: #006bb7 5px solid;
    }

        .wrapper .header .row-top {
            display: flex;
            flex-direction: row;
            background-color: var(--cui-menu-background-color-dark);
            height: 25px;
        }

            .wrapper .header .row-top .userinfo {
                display: flex;
                height: 19px;
                width: 700px;
                color: var(--cui-base-color-white-1);
                padding-top: 6px;
                padding-left: 25px;
            }

                .wrapper .header .row-top .userinfo .welcome-name-block {
                    max-width: 650px;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .wrapper .header .row-top .userinfo .username {
                    font-weight: bold;
                }

                .wrapper .header .row-top .userinfo a {
                    font-weight: bold;
                    color: #FFCC33;
                    margin-left: 35px;
                    padding-right: 10px;
                    background-image: url(/Content/shared/images/arrowrightyellow.png);
                    background-repeat: no-repeat;
                    background-position: right;
                }

            .wrapper .header .row-top .flags {
                height: 19px;
                color: var(--cui-menu-color-main);
                padding-top: 6px;
                padding-right: 20px;
                margin-left: auto;
            }

                .wrapper .header .row-top .flags span {
                    margin-right: 15px;
                    vertical-align: top;
                }

                .wrapper .header .row-top .flags a img {
                    border: var(--cui-base-color-white-1) 1px solid;
                    margin-right: 5px;
                }

        .wrapper .header .row-logo {
            background-image: url(/Content/shared/images/headerbackground.jpg);
            background-repeat: no-repeat;
            height: 146px;
        }

            .wrapper .header .row-logo .logo {
                margin-left: 55px;
                margin-top: 15px;
                height: 116px;
                width: 82px;
            }

        .wrapper .header .row-tabs {
            background-color: var(--cui-menu-background-color-dark);
            height: 27px
        }

            .wrapper .header .row-tabs ul {
                display: flex;
                flex-direction: row;
                margin-top: 4px;
            }

                .wrapper .header .row-tabs ul li {
                    padding-left: 15px;
                    padding-right: 15px;
                }

                    .wrapper .header .row-tabs ul li:hover,
                    .wrapper .header .row-tabs ul li.active {
                        background-image: url(/Content/shared/images/mainmenuactivebackground.jpg);
                        background-repeat: repeat-x;
                        background-position: bottom center;
                        background-size: auto;
                    }

                    .wrapper .header .row-tabs ul li a {
                        font-size: 12px;
                        font-weight: bold;
                        color: var(--cui-menu-color-main);
                        text-transform: uppercase;
                        line-height: 23px;
                    }

                    .wrapper .header .row-tabs ul li:hover a,
                    .wrapper .header .row-tabs ul li.active a {
                        color: #FFCC33;
                        text-decoration: none;
                    }

    .wrapper .content {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        width: 100%;
        padding: 0px 10px;
        background-image: url(/Content/shared/images/contentbackground.jpg);
        background-repeat: repeat-x;
        background-color: var(--cui-base-color-white-1);
    }

        .wrapper .content .leftmenu {
            display: flex;
            flex-direction: column;
            width: 190px;
        }

            .wrapper .content .leftmenu ul {
                padding-top: 10px;
            }

                .wrapper .content .leftmenu ul li {
                    background-image: url(/Content/shared/images/sepperatorglow.png);
                    background-repeat: no-repeat;
                    background-position: center top;
                    line-height: 32px;
                }

            .wrapper .content .leftmenu .leftblock .leftheading ul li a,
            .wrapper .content .leftmenu .leftheading ul li a:hover {
                background-image: none !important;
                color: var(--cui-menu-color-main);
                display: block;
                font-size: 15px;
                font-weight: bold;
                padding-bottom: 0;
                padding-left: 0;
                padding-top: 0;
            }

            .wrapper .content .leftmenu .leftblock {
                display: flex;
                flex-direction: column;
                width: 190px;
                background-color: var(--cui-base-color-blue-3);
                min-height: 100px;
            }

                .wrapper .content .leftmenu .leftblock .leftheading ul li {
                    background-image: none !important;
                    line-height: 32px;
                }

            .wrapper .content .leftmenu ul li a {
                background-image: url(/Content/shared/images/arrowrightwhite.png);
                background-position: 0 13px;
                background-repeat: no-repeat;
                padding-left: 10px;
                margin-left: 10px;
                color: var(--cui-menu-color-main);
                font-weight: bold;
                display: block;
            }

                .wrapper .content .leftmenu ul li a.active,
                .wrapper .content .leftmenu ul li a:hover,
                .wrapper .content .leftmenu ul li ul.submenu li a.active {
                    background-image: url(/Content/shared/images/arrowrightyellow.png) !important;
                    color: #FFCC33;
                    text-decoration: none;
                }

            .wrapper .content .leftmenu .image {
                padding-bottom: 5px;
                background-color: var(--cui-base-color-white-1);
            }

                .wrapper .content .leftmenu .image img {
                    margin-top: 5px;
                    width: 190px;
                }

        .wrapper .content .maincontentcontainer {
            display: flex;
            flex-direction: row;
            width: 771px;
            min-height: 500px;
        }

            .wrapper .content .maincontentcontainer .maincontent {
                display: block;
                flex: 0 1 100%;
                max-width: calc(100% - 30px);
                background-color: var(--cui-base-color-white-1);
                padding: 10px;
                margin: 10px 0px 10px 10px;
                min-height: 500px;
                line-height: 15px;
            }

                .wrapper .content .maincontentcontainer .maincontent .k-grid {
                    max-width: 100%;
                }

                    .wrapper .content .maincontentcontainer .maincontent .k-grid .k-table {
                        max-width: 100%;
                    }

                .wrapper .content .maincontentcontainer .maincontent h1,
                .wrapper .content .maincontentcontainer .maincontent h2,
                .wrapper .content .maincontentcontainer .maincontent h3 {
                    display: block;
                }

                /***User impersonation melding***/

                .wrapper .content .maincontentcontainer .maincontent .user-impersonation-message {
                    background-color: #FFCC33;
                    color: var(--cui-base-color-blue-3);
                    padding: 10px;
                    margin-bottom: 15px;
                    display: block;
                    min-height: 35px;
                    vertical-align: middle;
                    font-size: 12px;
                    font-weight: bold;
                    line-height: 16px;
                }

                    .wrapper .content .maincontentcontainer .maincontent .user-impersonation-message h2 {
                        display: inline;
                        float: left;
                        padding: 0;
                        margin: 0;
                        margin-right: 5px;
                        line-height: 14px;
                    }

                    .wrapper .content .maincontentcontainer .maincontent .user-impersonation-message span {
                        float: left;
                        color: var(--cui-base-color-blue-3);
                        font-size: 11px;
                        font-weight: normal;
                        line-height: 20px;
                    }

                        .wrapper .content .maincontentcontainer .maincontent .user-impersonation-message span a {
                            text-decoration: underline;
                        }


                /**** Start Tabs ****/
                .wrapper .content .maincontentcontainer .maincontent ul.tabs {
                    border-bottom: #AAAAAA 1px solid;
                    min-height: 21px;
                    margin-top: 10px;
                    margin-bottom: 20px;
                }

                    .wrapper .content .maincontentcontainer .maincontent ul.tabs li {
                        float: left;
                        color: #AAAAAA;
                        font-size: 12px;
                        margin-right: 20px;
                        padding-bottom: 3px;
                    }

                        .wrapper .content .maincontentcontainer .maincontent ul.tabs li.active {
                            color: var(--cui-base-color-blue-3);
                            border-bottom: var(--cui-base-color-blue-3) 4px solid;
                        }

            .wrapper .content .maincontentcontainer.has-rightcolumn .maincontent {
                flex: 0 1 75%;
                max-width: 75%;
            }

            .wrapper .content .maincontentcontainer .right-content {
                flex: 0 1 25%;
                max-width: 25%;
                display: none; /* Hidden by default */
                background-color: transparent;
                margin: 0px 0px 0px 10px;
                padding: 0px 0px 0px 0px;
            }


            .wrapper .content .maincontentcontainer.has-rightcolumn .right-content {
                display: flex; /* Show right-content - unhide */
                flex-direction: column;
                max-height: 100%;
            }


                .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box {
                    background-color: var(--cui-base-color-blue-3);
                    color: var(--cui-menu-color-main);
                    line-height: 15px;
                    padding: 20px 10px 10px 10px;
                    overflow-wrap: break-word;
                }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box a {
                        color: #7694cb;
                        font-size: 10px;
                        text-decoration: underline;
                        font-weight: bold;
                        padding-top: 5px;
                        padding-left: 0;
                        display: block;
                    }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box h1,
                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box h2,
                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box h3 {
                        display: block;
                        color: var(--cui-menu-color-main);
                    }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box .validation-summary-errors {
                        color: red;
                        display: block;
                        margin: 5px 5px 5px 0;
                    }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box .cui-newsbox hr {
                        background-image: url(/Content/shared/images/sepperatorboxglow.png);
                        border: none;
                        height: 15px;
                    }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box .cui-newsbox h3 {
                        padding-bottom: 0;
                    }

                    .wrapper .content .maincontentcontainer.has-rightcolumn .right-content .cui-box .cui-newsbox p {
                        padding: 10px;
                    }

.footer {
    background-image: url(/Content/shared/images/footerbackground.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-color: var(--cui-base-color-white-1);
    width: 1013px;
    padding-top: 20px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ---------------------------------------- */
/* --- General elements - functionality --- */
/* ---------------------------------------- */

/* errors and error fields */
.field-validation-error:not(.k-tooltip-error) {
    color: red;
}

.validation-summary-errors {
    color: red;
}

/* ------------------------------------------------	*/
/* --- Common user interface customization cui- --- */
/* ------------------------------------------------	*/

/* Colors */
.cui-bgcolor-lightgrey-1 {
    background-color: #ebebeb;
}

.cui-bgcolor-lightgrey-2 {
    background-color: #aaa;
}

.cui-color-lightgrey-1 {
    color: #ebebeb;
}

.cui-color-lightgrey-2 {
    color: #aaa;
}

.cui-color-primary {
    color: var(--cui-color-primary)
}

.cui-color-grey {
    color: var(--cui-base-color-grey-1);
}

.cui-color-white {
    color: var(--cui-base-color-white-1);
}

.cui-color-red {
    color: red;
}

.cui-color-lightblue {
    color: #7694cb;
}

/* CUI - Label text styling */

.cui-label-text-styling {
    display: inline-block;
    margin-bottom: 10px;
    padding-top: 5px;
}

/* ------------------------------------------------------------- */
/* --- General kendo customization directly on kendo classes --- */
/* ------------------------------------------------------------- */

/* kendo k-input */
span.k-input {
    width: 12em;
    height: 25px;
}

    span.k-input.confirmation-input-field {
        width: 16em;
        height: 25px;
    }

.k-input-inner .k-input-value-text {
    overflow: visible;
}

/* kendo k-picker */
span.k-datepicker .k-button-solid {
    background: white;
    border: white;
    color: black;
}

span.k-picker.k-dropdownlist {
    height: 25px;
}

/* kendo version does not grey out the calendar icon, temp fix */
span.k-datepicker.k-disabled .k-svg-i-calendar {
    color: var(--cui-base-color-grey-4);
}

/* kendo forms */
.k-form span.k-input {
    width: 100%
}

/* kendo grid */

/* grid pager bar customization */
/* No border, unless it's a scrollable grid */
.k-grid:not(:has(.k-auto-scrollable)) {
    border: none;
}

.k-grid .k-grid-table.k-table {
    border: 1px solid var(--kendo-color-border) !important;
}

.k-grid .k-grid-table.k-table .k-table-tbody .k-table-row span.k-dirty {
    display: none;
}

.k-grid .k-pager.k-grid-pager {
    border: none;
    background-color: transparent !important;
}

.k-grid .k-pager-numbers-wrap {
    border: 1px solid var(--kendo-color-border) !important;
    border-radius: var(--kendo-border-radius-md);
}

    .k-grid .k-pager-numbers-wrap button:not(.k-pager-first) {
        border: none;
        border-left: 1px solid var(--kendo-color-border) !important;
    }

/* end grid pager bar customization  */

.k-grid a {
    color: var(--cui-color-primary);
    cursor: pointer;
}

    .k-grid a.k-icon {
        color: inherit;
    }

.k-grid tr.k-table-row td.k-table-td > div.twoLineGrid {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--kendo-lineheight);
    min-height: calc(var(--kendo-line-height) * 2 * 1em);
    max-height: calc(var(--kendo-line-height) * 3 * 1em);
    max-width: 100%;
    overflow-wrap: break-word;    
    vertical-align: top !important;
}

.k-grid .k-grid-header th.k-header {
    text-align: left;
    overflow-wrap: break-word;
    vertical-align: top !important;
}

.k-grid .k-grid-norecords {
    border: 1px solid var(--kendo-color-border) !important;
    
}

    .k-grid .k-grid-norecords-template {
        border: none !important;
        height: 100%;
        width: 100%;
        line-height: normal !important;
        box-sizing: border-box;
        padding: 1rem;
        text-align: center;
    }

.k-grid .k-grid-content.k-auto-scrollable {
    overflow-x: inherit;
}

tr.k-table-row:hover {
    background-color: inherit;
}

.k-grid-header .k-header .k-link:hover {
    cursor: default;
}

.k-grid tbody > tr:not(.k-detail-row):hover {
    background-color: color-mix(in srgb, var(--kendo-color-primary, #212529) 9%, transparent);
}

.k-grid td, .k-grid .k-table-td {
    vertical-align: top;
}

/* Kendo Loader */
.k-i-loading::before, .k-loading-image::before {
    border-color: var(--kendo-color-primary);
    border-inline-end-color: rgba(0, 0, 0, 0) !important;
}

/* kendo button */
.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base:not(.k-tool, .k-icon-button),
.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary {
    box-shadow: none;
    font-weight: bold;
    border: none;
    min-width: 12em;
    height: 25px;
}

/* Kendo Upload */

.k-upload-selected, .k-clear-selected, .k-upload-button {
    width: 11em;
}

.k-upload-button-wrap {
    margin-right: 1em;
}

/* kendo tooltip */
.k-child-animation-container .k-tooltip.k-popup:has(> .k-tooltip-content) {
    background: var(--cui-base-color-white-1);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    font-size: 1em;
}


.k-tooltip .k-callout {
    border-top-color: #fff !important; /* for the tooltip arrow */
    color: var(--cui-base-color-black-1) !important;
}

/* kendo Calendar */
.k-calendar .k-calendar-view {
    --INTERNAL--kendo-calendar-view-width: var(--cui-calendar-width);
    --INTERNAL--kendo-calendar-cell-size: var(--cui-calendar-cell-size);
    /* andere cellen 46px */
    min-height: var(--cui-calendar-height);
}

.k-calendar .k-year-calendar .k-calendar-td,
.k-calendar-yearview .k-calendar-td,
.k-calendar-decadeview .k-calendar-td,
.k-calendar-centuryview .k-calendar-td {
    block-size: var(--cui-calendar-year-cell-size, --INTERNAL--kendo-calendar-cell-size);
    width: var(--cui-calendar-year-cell-size, --INTERNAL--kendo-calendar-cell-size);
}

/* ----------------------------------------------------------------------------------------------------------- */
/* --- Kendo styling inside CUI class - prefered workflow - easier to find and contain kendo customization --- */
/* ----------------------------------------------------------------------------------------------------------- */
/* CUI - Kendo forms */
.cui-kendo-form-horizontal .k-form-field {
    display: flex;
    align-items: center;
}

.cui-kendo-form-horizontal .k-form-label {
    min-width: 175px;
    max-width: 175px;
    width: 175px;
    margin-right: 8px;
    flex-shrink: 0;
}

.cui-kendo-form-horizontal span.k-input {
    width: 100%;
}

.cui-kendo-form-horizontal.k-form-md .k-form-field {
    margin-block-start: 0.3rem;
}

.cui-kendo-form-horizontal .k-form-field-wrap {
    flex: 1 1 auto;
    width: 100%;
}

.cui-kendo-form-default.k-form {
    color: #666666;
}

.cui-kendo-form-default .k-form-field {
    /*field layout*/
}

.cui-kendo-form-default .k-form-buttons {
    margin-top: 10px !important;
}

/*
    CUI form layout 1 - to define
*/

.cui-frm-layout-1 span.k-input,
.cui-frm-layout-1 span.k-datepicker {
    width: 12em;
    height: 25px;
}

/* CUI Common form */
.cui-form-button-bar-default {
    display: flex;
    margin-top: 1rem;
    justify-content: flex-start;
    gap: 0.5rem;
}

.cui-form-button-bar-right {
    display: flex;
    margin-top: 1rem;
    justify-content: flex-end;
    gap: 0.5rem;
}

/*
    CUI form layout 2 - to define
*/

.cui-frm-layout-2 span.k-input,
.cui-frm-layout-2 span.k-datepicker {
    width: 12em;
    height: 25px;
}

/* CUI - Kendo form fields */
.cui-kendo-form-field-md {
    width: 12em;
    height: 25px;
}

.cui-color-white.k-form {
    color: white;
}

/*  CUI -  Kendo specific forms */
.cui-kendo-login-form {
    color: var(--cui-menu-color-main)
}

    .cui-kendo-login-form .k-form-field {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

/* CUI - Kendo window - modal window */
.cui-kendo-window-centered .k-window {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50000;
    width: 490px;
}

    .cui-kendo-window-centered .k-window .k-window-content {
        overscroll-behavior: contain;
    }

    /* Kendo window when default kendo title is used */
    .cui-kendo-window-with-title .k-window .k-window-titlebar {
        height: 25px;
        background-color: var(--cui-base-color-grey-3);
    }

.cui-kendo-window-with-title .k-window .k-window-title {
    font-size: var(--cui-fontsize-h1);
    padding: 7px 0 0 0;
    color: var(--cui-color-heading);
    font-weight: bold;
}

.cui-kendo-window-with-title .k-window .k-window-content {
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
}

.cui-kendo-window-with-title .cui-kendo-window-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

    .cui-kendo-window-with-title .cui-kendo-window-content label {
        width: var(--cui-label-width-kendo-window);
    }

.cui-kendo-window-with-title .k-window .cui-kendo-window-buttonbar {
    display: flex;
    margin: 1rem -1rem 0 -1rem;
    padding: 1rem 1rem 0 1rem;
    justify-content: flex-end;
    border-top: 1px solid var(--kendo-color-border);
    gap: 1rem;
}

/* When kendo title is not used, title is in the content part */
.cui-kendo-window-no-title .k-window-content {
    display: flex !important;
    flex-direction: column;
}


.cui-kendo-window-no-title .k-window-titlebar {
    display: none
}

.cui-kendo-window-no-title .cui-kendo-window-titlebar {
    margin: -1rem -1rem 0 -1rem;
    max-height: 10rem;
    background-color: var(--cui-base-color-grey-3);
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

    .cui-kendo-window-no-title .cui-kendo-window-titlebar h1 {
        font-size: var(--cui-fontsize-h1);
        color: var(--cui-color-heading);
        font-weight: bold;
    }

.cui-kendo-window-no-title .cui-kendo-window-content {
    overflow: hidden;
    padding: 1rem;
    flex: 1 1 auto;
}

    .cui-kendo-window-no-title .cui-kendo-window-content label {
        width: var(--cui-label-width-kendo-window);
    }

    .cui-kendo-window-no-title .cui-kendo-window-content span.k-input {
        width: var(--cui-window-input-field-width);
    }

    .cui-kendo-window-no-title .cui-kendo-window-content span.k-picker {
        width: var(--cui-window-input-field-width);
    }

.cui-kendo-window-no-title .cui-kendo-window-buttonbar {
    display: flex;
    margin: 0 -1rem 0 -1rem;
    padding: 1rem 1rem 0 1rem;
    justify-content: flex-end;
    border-top: 1px solid var(--kendo-color-border);
    gap: 1rem;
}

/* CUI - Icons */
.cui-icon-link {
    color: var(--cui-base-color-blue-3);
    font-weight: bold;
    cursor: pointer;
}

    .cui-icon-link[disabled] {
        color: #ebebeb;
        font-weight: normal;
        cursor: default;
    }

/* CUI - Buttons */
.k-grid .cui-kgrid-row-button {
    height: 1.8rem !important;
    min-width: unset !important;
    width: 70px
}

/* Cui utils - last in css cascading */

.cui-display-flex {
    display: flex;
}