:root {
    --White: #FFF;
    --cip-font-fa: "Font Awesome 6 Pro";
    --GridHeaderBkgGray: #fafafa; /*"#fafafa" --kendo-color-surface */
    --KGridToolbarBkgWhite: #FFF; /*"#FFF" --kendo-color-base */
}

.filter-bar {
    border-bottom: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    padding-left: 12px; /* same padding that the content margin with shadow */
    padding-right: 12px; /* same padding that the content margin with shadow */
}

.filter-bar-small {
    line-height: 40px;
    height: 40px;
    align-items: center;
    border-bottom: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 2px;
}

    .filter-bar-small h5 {
        /*color: red;*/
        padding: 0px;
        margin: 0px;
    }

.content { /* TODO: to put in MainLayout in fact..*/
    /*border: 1px solid red; */
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
    background: var(--Secondary-25, #F5F6F8) !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.k-grid-toolbar .k-button {
    background: #FFF;
    color: var(--Secondary-500, #424B5A);
    font-weight: 600;
    /*backgground-color: #ffffff;*/
    background: var(--kendo-color-base,#f5f5f5);
}

    .k-grid-toolbar .k-button:hover {
        /* border: 1px solid red !important; */
        color: var(--Primary-500, #006BB4);
        border: 1px solid var(--Primary-500, #006BB4);
    }

    .k-grid-toolbar .k-button:active {
        border: 1px solid var(--Primary-600, #005690);
        background: var(--Primary-500, #006BB4);
        color: var(--White, #FFF);
    }

        /*== > Seems better with:*/
    .k-grid-toolbar .k-button:disabled, .k-grid-toolbar .k-button.k-disabled {
        box-shadow: none;
        border: 1px solid var(--Gray-300, #D0D5DD) !important;
        color: var(--Gray-300, #D0D5DD) !important;
        background: var(--Gray-100, #F2F4F7) !important;
        opacity: 1 !important;
    }

.gridpage-container  .k-grid-toolbar {
    background-color: var(--KGridToolbarBkgWhite, #FFF);
    margin: 0px;
    padding: 0px;
    padding: 10px;
    padding-left: 8px; /* wants finally same left padding that in cell telerik grid */
    padding-right: 8px; /* wants finally same left padding that in cell telerik grid */
}

/* grid headers */
.k-column-title {
    /*color: red;*/ /* toremove*/
    /* Text xs / Bold */
    font-family: "Open Sans";
    font-size: 12px;
    font-style: normal;
    /*font-weight: 700;*/ /* TOSEE: this weight is not "nice" in the UI in our screens */
    font-weight: 400;
    line-height: 18px; /* 150% */
    background-color: var(--GridHeaderBkgGray); /*var(--White, #FFF);*/
}

.k-cell-inner { /* finally rollback the size as in 26.02 we lost too places or to see if only in gridpage-container */
    /* height: 46px;*/
    /* padding-top: 8px;*/
    /* padding-bottom: 8px;*/
}

.k-grid-filter-menu.k-grid-header-menu,
.k-grid .k-table-thead {
    /*background-color: red;*/
    background: var(--GridHeaderBkgGray);
}

    .k-grid-filter-menu.k-grid-header-menu.k-active,
    .k-cell-inner:has(.k-grid-filter-menu.k-active) .k-grid-filter-menu.k-grid-header-menu,
    .k-cell-inner:has(.k-sort-icon) .k-grid-filter-menu.k-grid-header-menu {
        /*background-color: red;*/
        background: var(--Lavender-25, #EFF3F8);
        color: var(--Primary-500, #006BB4);
    }

    .k-grid-filter-menu.k-grid-header-menu:hover {
        background-color: var(--GridHeaderBkgGray);
    }

    .k-cell-inner:has(.k-grid-filter-menu.k-active) .k-grid-filter-menu.k-grid-header-menu:hover {
        font-weight:900;
    }

    .k-grid-filter-menu.k-grid-header-menu.k-active:hover,
    .k-cell-inner:has(.k-grid-filter-menu.k-active) .k-grid-filter-menu.k-grid-header-menu:hover,
    .k-cell-inner:has(.k-sort-icon) .k-grid-filter-menu.k-grid-header-menu:hover {
        background: var(--Lavender-25, #EFF3F8);
    }



/* Header grid if filter selected or sort icon selected */
/* TODO: the Lavender-XX is not defined in roots*/
    .k-cell-inner:has(.k-grid-filter-menu.k-active) ,
    .k-cell-inner:has(.k-sort-icon) {
        /*border-bottom: 1px solid var(--Lavender-50, #E0E6F1); 
        border-left: 1px solid var(--Lavender-50, #E0E6F1);*/
        background: var(--Lavender-25, #EFF3F8); 
    }


        .k-cell-inner:has(.k-grid-filter-menu.k-active) .k-column-title,
        .k-cell-inner:has(.k-sort-icon) .k-column-title {
            color: var(--Primary-500, #006BB4);
            background: var(--Lavender-25, #EFF3F8);
        }

/* header grid icon filter : hack to use font awesome instead of the SVG
   (cf. https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-change-expand-collapse-icons )
*/
.k-grid-filter-menu span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter svg {
    display: none;
}

.k-grid-filter-menu.k-active span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter::before,
.k-grid-filter-menu span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter::before {
    content: "\f0b0";
    font-family: var(--cip-font-fa,"Font Awesome 6 Pro");
}

.k-grid-filter-menu.k-active span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter::before {
    font-weight: 900; /* e.g: 900 => solid*/
    color: var(--Primary-500, #006BB4);
}

.k-grid-filter-menu span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter::before {
    font-weight: 300;
}

.k-grid-filter-menu span.telerik-blazor.k-icon.k-svg-icon.k-svg-i-filter:hover::before {
    font-weight: 900;
}

.k-grid-header .k-grid-header-menu:focus {
    box-shadow: none;
}