/* SyncForce specific styling for kendo elements */

/* font-color (hard) override of selected row (blue) */
/* Color was changed to black in is_style.css */
.k-state-selected td {
    color: #fff;
}

.k-editor .k-editable-area .k-content {
    border-width: 0 !important;
}

.modal-body .kendo-treeview {
    max-height: calc(100vh - 300px);
    background-color: #f5f5f5;
    padding: 5px 10px;
}

.k-pager-sizes .k-dropdown-wrap .k-input {
    font-weight: normal;
    color: gray;
}

/* needed to remove scrollbar if possible */
.no-scrollbar .k-grid-header {
    padding: 0 !important;
}

.no-scrollbar .k-grid-footer {
    padding: 0 !important;
}

.no-scrollbar .k-grid-content {
    overflow: visible;
}

/* grid headers*/

.k-grid .k-grid-header .k-header {
    white-space: normal;
}

/*numeric input text align right in kendo grid */
.k-grid .k-numerictextbox .k-numeric-wrap .k-input {
    width: 96%;
    padding-right: 5px;
    text-align: right;
}

/* end needed to remove scrollbar if possible */
.k-grid .text-right {
    text-align: right;
}

.k-grid .text-center {
    text-align: center;
}

.k-grid.k-grid {
    font-size: 12px;
    margin-bottom: 20px;
}

    .k-grid tbody tr:hover {
        background-color: #d9edf7 !important;
    }

    .k-grid tr.k-filter-row:hover {
        background-color: transparent;
    }

    .k-grid tr td {
        border-left: 0px;
        border-bottom: 0px;
        border-top: 1px solid #ddd;
        padding: 10px;
        line-height: 1.42857143;
    }

    .k-grid .k-header {
        font-weight: bold !important;
    }

    .k-grid tr th.k-header {
        padding: 10px;
    }

    .k-grid .k-grid-header {
        border-bottom-width: 0px;
        background-color: rgba(0,0,0,0);
    }

        .k-grid .k-grid-header th.k-header > .k-link {
            text-decoration: none !important;
        }

    .k-grid .k-grid-content tr td {
        border-left: 0px;
        border-bottom: 0px;
        border-top: 1px solid #ddd;
        padding: 10px;
        /* border-left-width: 0px !important; */
        line-height: 1.42857143;
    }

/* make sure that row doesn't get a selected color */
.noRowSelectHighlight .k-grid .k-state-selected {
    background-color: inherit !important;
    color: inherit !important;
}

.noRowSelectHighlight .k-grid tr:hover {
    background-color: #d9edf7!important;
}

.noRowSelectHighlight .k-grid td.k-state-selected:hover, .noRowSelectHighlight .k-grid tr.k-state-selected:hover td {
    background-color: rgba(0,0,0,0.0) !important;
    color: inherit !important;
}

.noRowSelectHighlight .k-state-selected td {
    color: inherit;
}

/* ==========================================================================
   Kendo native compatible styling
   ========================================================================== */
/* k-grid
   ========================================================================== */
.k-native-compatible .k-grid {
    font-size: 12px;
    line-height: 1.4285714286;
}

.k-native-compatible .k-grid tr.k-state-selected > td {
    background-color: transparent;
}

/* k-checkbox
   ========================================================================== */
.k-native-compatible .k-grid .k-checkbox {
    position: relative;

    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: top;

    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    opacity: 1;
}
.k-native-compatible .k-grid .k-checkbox:focus,
.k-native-compatible .k-grid .k-checkbox.k-focus {
    border-color: #99bddb;
    box-shadow: 0 0 0 0.25rem rgb(51 122 183 / 25%);
}

.k-native-compatible .k-grid .k-checkbox:disabled,
.k-native-compatible .k-grid .k-checkbox.k-disabled {
    outline: none;
    cursor: default;
    opacity: .65;
    filter: grayscale(.1);
    pointer-events: none;
    box-shadow: none;
}

.k-native-compatible .k-grid .k-checkbox:checked,
.k-native-compatible .k-grid .k-checkbox.k-checked {
    border-color: #337ab7;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-color: #337ab7;
}
.k-native-compatible .k-grid .k-checkbox:checked:focus,
.k-native-compatible .k-grid .k-checkbox.k-checked.k-focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 0.25rem rgb(51 122 183 / 25%);
}

.k-native-compatible .k-grid .k-checkbox::before,
.k-native-compatible .k-grid .k-checkbox-label.k-no-text {
    display: none;
}

/* grid styling simple header */
.simpleKendoHeader .k-grid .k-grid-header th.k-header {
    background-color: #fff;
    border-width: 0 0 0 0;
}

.simpleKendoHeader .k-grid .k-grid-footer td {
    /* background-color: #fff; */
    border-left-width: 0;
    border-right-width: 0;
}

.simpleKendoHeader .k-grid-footer-wrap {
    border-width: 0 0 0 0;
}

.simpleKendoHeader .k-grid .k-grid-header-wrap {
    border-width: 0;
}

.simpleKendoHeader .k-grid {
    border-width: 0 0 0 0;
}

/* Hide group header if needed */
.hideGroupHeader .k-grid .k-grouping-header {
    display: none;
}

/* clickable rows */
.clickableRow .k-grid td[role='gridcell'] {
    cursor: pointer;
}

/* Add error styling to kendo inputs */
.has-error .k-datepicker .k-picker-wrap, .has-error .k-numeric-wrap {
    border-color: #a94442 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

/* remove loading icon */
.noLoadingIcon .k-loading-image {
    /*Hide loading spinner on grid refresh*/
    background-image: none !important;
}

.noLoadingIcon .k-loading-mask {
    /*Hide fadein() animation on grid refresh*/
    display: none !important;
    visibility: hidden !important;
    background-color: transparent !important;
    opacity: 0.0 !important;
    height: 0px !important;
    overflow: hidden !important;
}

/* dropdown menu within kendo grid with 'pointer' */
.sfclass.kendo.dropdown ul.dropdown-menu {
    top: 22px;
    right: -6px;
}

    .sfclass.kendo.dropdown ul.dropdown-menu:before {
        content: "";
        border-bottom: 10px solid #fff;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: -10px;
        right: 8px;
        z-index: 10;
    }

    .sfclass.kendo.dropdown ul.dropdown-menu:after {
        content: "";
        border-bottom: 12px solid #ccc;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        position: absolute;
        top: -12px;
        right: 6px;
        z-index: 9;
    }

/* dropup menu within kendo grid with 'pointer' */
.sfclass.kendo.dropup ul.dropdown-menu {
    right: -6px;
}

    .sfclass.kendo.dropup ul.dropdown-menu:before {
        content: "";
        border-top: 10px solid #fff;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: 88px;
        right: 6px;
        z-index: 10;
    }

    .sfclass.kendo.dropup ul.dropdown-menu:after {
        content: "";
        border-top: 12px solid #ccc;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        position: absolute;
        top: 88px;
        right: 4px;
        z-index: 9;
    }

.sfclass.kendo.dropdown-inline {
    display: inline-block;
}

    .sfclass.kendo.dropdown-inline > .btn {
        padding: 0px;
        color: black;
    }

.k-dropdown .k-state-disabled {
    cursor: not-allowed !important;
}

/*make sure alert has text aligned left*/
.k-grid-norecords .alert {
    text-align: left;
    flex-grow: 1; /* this is needed when syncforce_kendo-native-bs3.css is also loaded on the same page */
}

/*fix bootstrap toggle plugin styling*/
.k-grid .toggle {
    box-sizing: border-box;
}

/* fix black outline in bs input */
input[type=checkbox]:focus {
    /*outline: initial !important;*/
}


/*
    Kendo 2022 style patches
*/

/* add border-box to dropdownlist items so that they are properly centered */
/* .k-list-item is a unique 2022 class */
.k-list li.k-list-item {
    box-sizing: border-box;
    /* border-radius: 3px; */
}

/* override default k-list font-size of 14px, instead use the <body> font-size */
.k-popup .k-list {
    font-size: inherit;
    /* padding: 2px; */
}

/* add border radius to the bottom of dropdowns, popups etc., just like 2017 kendo */
/* .k-popup {
    border-radius: 0 0 4px 4px;
    overflow: hidden;
} */

/* make the caret in a filterable dropdown closer to the search icon */
/* .k-searchbox .k-input-inner {
    padding-left: 6px
} */

/* make sticky header option label (often '- Select -') styled the same as 2017 kendo */
/* .k-list-group-sticky-header, .k-list-optionlabel {
    font-weight: inherit !important;
    border-color: #ccc !important;
    border-bottom: 0 !important;
    border-radius: 3px;
    padding: 2px 8px !important;
} */

/* make sticky header option label (often '- Select -') styled the same as 2017 kendo */
/* .k-list-group-sticky-header, .k-list-optionlabel.k-selected {
    color: #fff;
    background-color: rgb(66, 139, 202);
} */

/* make sticky header option label (often '- Select -') styled the same as 2017 kendo */
/* .k-list-group-sticky-header, .k-list-optionlabel.k-selected:hover {
    background-color: rgba(66, 139, 202, 0.8);
} */