/*
    !IMPORTANT:
    Due to the nature of blazor and telerik code generation, CSS isolation is not working correctly when combining these components.
    Therefore the best practice we state that all CSS is to be defined in global CSS classes.
    This should work in all situations however keep in mind, when using global CSS classes be wary of conflicts with existing CSS tags.

    For more info see: https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
*/


.group-styles .k-list-group-item,
.group-styles .k-list-group-sticky-header {
    font-weight: bold;
}


/* Selected item */
.group-styles .k-list-item.k-selected {
    background-color: #23bde0;
    color: white;
}

    /* Hover on selected item */
    .group-styles .k-list-item.k-selected:hover,
    .group-styles .k-list-item.k-selected.k-hover {
        background-color: #1aa7c7; /* slightly darker hover */
        color: white;
    }



.filter-button-width {
    width: 175px;
    height: 24px;
    justify-content: left !important;
    font-size: 10pt !important;
    overflow: hidden;
}

.execute-button-width {
    width: auto;
    height: 24px;
    justify-content: left !important;
    font-size: 10pt !important;
    overflow: hidden;
}

/*
.ftr-empty-settings .k-input-values {
    width: 200px !important;
    height: 30px;
    justify-content: left !important;
    overflow: hidden;
    color: #23bde0 !important;
}*/

.filter-background-color,
.filter-background-color .k-input-values {
    background-color: tomato !important;
    color: white !important; /*@GlobalConstants.Color;*/
}

.fltr-single-tag-mode .k-input-values {
    float: left;
    color: #23bde0;
    font-weight: bold;
    font-size: 9pt;
    overflow: hidden;
}

    /* hide the standalone selected items */
    .fltr-single-tag-mode .k-input-values div.k-chip {
        display: none;
    }

/* display the total number of selected items */
.fltr-single-tag-mode div.k-input-values:before {
    display: inline-block;
    overflow: hidden;
    line-height: 1.6em;
    padding: 0 5px;
    margin: 0px;
    vertical-align: bottom;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}