/** colors update **/

body {
    --kendo-color-primary-hover: var(--dark);
    --kendo-color-primary: var(--dark);
    --kendo-color-on-primary: var(--white);
    --material-border-color: gba(0, 0, 0, 0.87);
    /*--kendo-line-height: 2.75rem;*/
    /*--kendo-color-border: var(--wideScreenGrey);*/ /*rgba(0,0,0,.38);*/
}

.k-list-optionlabel::before {
    background-color: var(--dark);
    height: var(--inputHeight);
}

    li.k-list-item.k-selected:hover, .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover {
        background-color: var(--grey-light);
    }

list.k-selected.k-list-optionlabel {
    background-color: var(--dark) !important;
}

.k-window .k-button-solid-primary { 
    border-color: var(--dark);
    background-color: var(--dark);
}

.k-list .k-selected.k-list-optionlabel {
    background-color: var(--dark);
}

.k-window .k-button-solid-primary:hover { 
    border-color: var(--grey-light);
    background-color: var(--grey-light);
}

.k-window .k-dialog-titlebar { 
    border-color: var(--dark);
    color: white;
    background-color: var(--dark);
}

.k-button-flat-primary {
    color: var(--dark) !important;
}

.k-grid-header .k-grid-header-menu.k-active,
.k-grid-header-menu.k-active,
.k-columnmenu-item.k-selected {
    background-color: var(--dark) !important;
}

.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
    color: var(--dark) !important;
}

.k-calendar .k-calendar-td.k-selected .k-link, .k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-checkbox:checked, .k-checkbox.k-checked, .k-button-solid-primary, .k-checkbox:checked {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: white !important;
}
/** colors update **/


.k-overlay {
    background-color: #e2e2e2 !important;
}

/** telerik grid styles*/
div.k-grid-content {
    overflow: hidden !important;
}

div.k-grid-header {
    overflow: hidden !important;
    padding-right: 0px !important;
}

.k-grid td, .k-grid th {
    border-inline-start-width: 0px !important;
    border-block-end-width: 1px !important;
    background: white !important;
}

.k-grid th {
    color: var(--grey);
}

.k-table-row:hover {
    cursor: pointer !important;
}

.k-grid-container .k-table-row:hover > td:not(.k-detail-cell):not(.k-hierarchy-cell) { /* TODO: check if brushing cell with 'expand' arrow (=hirarchy cell is needed*/
    background-color: var(--wideScreenGreyHover) !important;
}
/*    div.k-grid {
        border: 1px solid var(--wideScreenGrey);
    }*/
/*.k-grid-container .k-table-row:hover {
        background-color: yellow !important;
    }*/

.k-grid td:first-child:not(.k-hierarchy-cell), .k-grid th:first-child:not(.k-hierarchy-cell) {
    padding-left: 20px;
}

.k-grid td:last-child, .k-grid th:last-child {
    padding-right: 20px;
}

.k-grid div.k-pager {
    background: white;
}

.k-pager-info {
    color: var(--grey);
}

.k-pager button.k-button {
    color: var(--grey);
}

    .k-pager button.k-button.k-selected {
        color: white;
    }
/** telerik grid styles*/



.inputWeb.k-multiselect, .inputWeb.k-dropdownlist {
    height: var(--inputHeight);
    width: fit-content;
    font-size: 16px;
    border-color: rgba(0,0,0,.38); /*same as in mat blazor*/
    /*todo fix inner text color to be rgba(0,0,0,.87)*/
}

.inputWeb.k-multiselect {
}

    .inputWeb.k-multiselect .k-list-item,
    .inputWeb.k-dropdownlist .k-list-item,
    .k-dropdownlist-popup .k-list-item,
    .k-multiselect-popup .k-list-item {
        height: var(--inputHeight);
        font-size: 14px;
    }
/*
    hierarchy grids icons
*/
.k-hierarchy-cell .k-i-plus:before {
    content: "\e005" !important;
}

.k-hierarchy-cell .k-i-minus:before {
    content: "\e006" !important;
}

.k-table-tbody .k-table-row.k-selected > .k-table-td:not(.k-hierarchy-cell) { /* TODO: check if brushing cell with 'expand' arrow (=hirarchy cell is needed*/
    /*        background-color: #6f42c1 !important;*/
    background-color: darkgray !important;
    color: #ffffff !important;
}

.groupableColumnHeader .k-column-title {
    /*padding: 1px 5px;
        border: 1px solid var(--wideScreenActive);*/
}

.k-grouping-drop-container {
    color: var(--whiteFontOnSolidBackground) !important;
}

div.k-grouping-header {
    font-weight: bold !important;
    font-size: 8pt;
    background-color: var(--lightActionLink) !important;
    /*border: 1px solid var(--wideScreenActive);*/
}

/*styling telerik grid search to meet app design*/
.k-toolbar.k-grid-toolbar {
    padding: 0px 0px var(--sp) 0px;
    background: var(--wideScreenGreyHover);
}

.k-grid-search.k-searchbox.standardBorder {
    border: 1px solid var(--wideScreenGrey);
}

.k-input-solid:focus.standardBorder, .k-toolbar .k-toolbar-item:focus {
    box-shadow: none;
}

.k-toolbar .k-searchbox.standardInput {
    width: auto;
}

.standardInput .k-svg-icon.k-svg-i-search {
    padding-left: 8px;
}

.standardInput .k-clear-value {
    padding-right: 6px;
}




.standardButtonRaised.k-button, .standardButtonRaised.k-button:hover {
    height: var(--buttonHeight);
    color: var(--white);
    background: var(--dark);
    font-weight: 500;
}
.standardButton.k-button {
    height: var(--buttonHeight);
    background: var(--white);
    color: var(--dark);
    font-weight: 500;
}
.k-dropdownlist.k-picker-solid {
    background: var(--white);
    height: var(--inputHeight);
    font-size: 16px;
    border-color: rgba(0,0,0,.38); /*same as in mat blazor*/
}
.k-dropdownlist-popup li.k-list-item.k-selected, .k-dropdownlist-popup li.k-list-item {
    height: var(--inputHeight);
}
span.k-picker-solid:hover {
    background:var(--white);
}
.k-dropdownlist.k-picker-solid button {
    width:var(--inputHeight); /*square size*/
}
.floating-label.k-floating-label-container > label.k-floating-label {
    color: var(--kendo-color-on-app-surface);
    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
    line-height: calc(1.125rem); /*18 px*/
    transform:translate(8px, 5px);
    /*font-size: 16px;*/
}
    /*.k-floating-label-container.k-focus label.k-floating-label, 
    .k-floating-label-container label.k-floating-label[style="top:0"] {*/ /*when label is on top is should be smaller*/
        /*font-size: 12px;
        line-height: unset;
    }*/

.k-input.k-textarea, .k-editor.telerik-blazor {
    border-color: rgba(0,0,0,.38);
    border-radius: 5px;
}


.k-input-value-text {
    line-height: calc(var(--inputHeight) - 10px);
    color: var(--kendo-color-on-app-surface);
    font-size: 14px;
    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
}

.telerik-blazor .k-input, .telerik-blazor .k-input-solid:focus-within {
    box-shadow: initial; /* #4682B4 Border color of inputs */
    /*border-radius: 5px;*/
    /*padding: 10px;*/
    /* margin-bottom: 3px; */
}