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

/* After an auto fit, the sum of the column widths can be smaller than the grid container,
   which leaves an empty white area on the right. Forcing the tables to fill the container
   makes the columns stretch to the available width instead. */
.k-grid .k-grid-header-table,
.k-grid .k-grid-table,
.k-grid .k-grid-footer-table {
    min-width: 100%;
}