/********************/
/*Kendo Grid Filters*/
/********************/

/********************/
/*Toggle filter view*/
/********************/
.k-filtercell span.k-widget span.k-dropdown-wrap,
.k-filtercell span.k-dropdown span.k-dropdown-wrap {
    height: 3.8rem;
}

.k-filtercell .phoenix-drop-down-list .k-dropdown-wrap span span.k-icon,
.k-filtercell .k-dropdown .k-dropdown-wrap span span.k-icon {
    color: var(--inputfield-arrow-down-font);
}

.k-filtercell .phoenix-drop-down-list .k-dropdown-wrap span.k-select,
.k-filtercell .k-dropdown .k-dropdown-wrap span.k-select {
    background-color: var(--inputfield-arrow-down-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border-radius: 0 2px 2px 0;
    width: 4rem;
}

.k-filtercell .k-dropdown-operator .k-dropdown-wrap {
    border-radius: 0 2px 2px 0;
}

span.k-filtercell span span.k-picker-wrap,
span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default {
    border-radius: 2px;
    border-color: var(--inputfield-border);
}

span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default .k-select {
    border-radius: 0 2px 2px 0;
}

span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default.k-state-hover {
    box-shadow: none;
}

span.k-filtercell span span.k-picker-wrap.k-state-default:hover,
span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default:hover {
    box-shadow: var(--small-shadow);
}

span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default input:hover,
span.k-filtercell span span.k-combobox span.k-dropdown-wrap.k-state-default input,
span.k-filtercell span span.k-picker-wrap.k-state-default input {
    box-shadow: none;
}

form.k-filter-menu .k-filter-menu-container ul.k-multicheck-wrap,
.k-filter-menu .k-filter-menu-container ul.k-multicheck-wrap {
    margin: 0;
}

form.k-filter-menu .k-filter-menu-container div.k-action-buttons .foot,
.k-filter-menu .k-filter-menu-container div.k-action-buttons .foot {
    display: flex;
    flex-flow: row nowrap;
}

form.k-filter-menu .k-filter-menu-container div.k-action-buttons,
.k-filter-menu .k-filter-menu-container div.k-action-buttons {
    margin: 0;
    border: none;
    text-align: right;
}

form.k-filter-menu .k-filter-menu-container div.k-action-buttons button,
.k-filter-menu .k-filter-menu-container div.k-action-buttons button {
    height: 3rem;
    box-shadow: none;
    border-radius: 3px;
    font-weight: 500;
    text-transform: none;
    border: none;
    font-size: 1.6rem;
    line-height: 2rem;
    padding: 8px 14px;
    margin: 0;
    align-items: center;
    display: inline-flex;
    vertical-align: middle;
    flex: 0 0 auto;
    background-color: unset;
    cursor: pointer;
    opacity: 1;
    color: var(--btn-font);
    background-color: var(--btn-active-background);
    margin: 10px 0 10px 10px;
    width: auto;
}

form.k-filter-menu .k-filter-menu-container div.k-action-buttons button:hover,
.k-filter-menu .k-filter-menu-container div.k-action-buttons button:hover {
    color: var(--btn-font);
    background-color: var(--btn-hover-background);
    box-shadow: none;
    border: none;
}

.k-filtercell .k-picker-wrap.k-state-focused,
.k-filtercell .k-dropdown-wrap.k-state-focused {
    box-shadow: none;
}

/********************/
/*Search for strings*/
/********************/
form.k-filter-menu .k-filter-menu-container input[type=text] {
    width: 100%;
    resize: none;
    background-color: var(--inputfield-background);
    border-color: var(--inputfield-border);
    border-radius: 2px;
    height: 4rem;
    font-size: 1.8rem;
    margin: 4px 0 4px 0;
}

form.k-filter-menu .k-filter-menu-container input[type=text]:hover {
    box-shadow: var(--small-shadow);
}

/*****************/
/*Chose operation*/
/*****************/
form.k-filter-menu .k-filter-menu-container select {
    height: 4rem;
    background-color: var(--inputfield-background);
    border-color: var(--inputfield-border);
    border-radius: 2px;
    margin: 4px 0 4px 0;
    padding: 0 3px 0 3px;
}

form.k-filter-menu .k-filter-menu-container select:hover {
    box-shadow: var(--small-shadow);
}

/*************************/
/*Listview for checkboxes*/
/*************************/
li.k-filter-item .k-animation-container ul.k-popup li .k-filterable.k-content {
    box-shadow: var(--small-shadow);
}

form.k-filter-menu div.k-widget {
    overflow-y: auto ;
}

form.k-filter-menu .k-filter-menu-container .k-listview-content {
    overflow-y: auto !important;
    height: auto !important;
}

form.k-filter-menu .k-filter-menu-container .k-listview-content > div {
    padding: 5px;
    overflow-y: auto !important;
}

.k-popup .k-animation-container li.k-filter-item .k-animation-container ul {
    box-shadow: none;
}

form.k-filter-menu .k-filter-menu-container .k-listview-content > div:nth-of-type(odd) {
    background: var(--item-alternate-background);
}

form.k-filter-menu .k-filter-menu-container .k-listview-content > div:hover {
    background: var(--item-hover-background);
}

form.k-filter-menu .k-filter-menu-container .k-listview-content > div.k-listview-item {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

form.k-filter-menu .k-filter-menu-container .k-listview-content > div input[type=checkbox] {
    margin-right: 5px;
}

/******************************/
/*Kendo Grid Multicheck filter*/
/******************************/
form.k-filter-menu ul.k-multicheck-wrap {
    max-height: 300px;
}

form.k-filter-menu ul.k-multicheck-wrap .kendo-multicheck-item {
    padding: 5px;
}

form.k-filter-menu ul.k-multicheck-wrap div:nth-of-type(odd) {
    background-color: var(--item-alternate-background);
}

form.k-filter-menu ul.k-multicheck-wrap .kendo-multicheck-item:hover {
    background-color: var(--item-hover-background);
}

form.k-filter-menu ul.k-multicheck-wrap .kendo-multicheck-item label {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0;
}

form.k-filter-menu ul.k-multicheck-wrap .kendo-multicheck-item label input {
    margin-right: 10px;
}

/********************/
/*Custom Date Filter*/
/********************/
.k-filter-menu-container .phoenix-date-picker {
    border: 1px solid var(--inputfield-border);
    border-radius: 2px;
    width: 100%;
    height: 3rem;
}

.k-filter-menu-container .phoenix-date-picker:hover {
    box-shadow: var(--small-shadow);
}