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

.k-grid-header tr:not(.k-filter-row) th {
    background-color: #f4f4f5;
    font-size: 13px;
    font-weight: bold;
    padding: 8px !important;
}


    .k-grid-header tr:not(.k-filter-row) th a {
        font-size: 13px;
        font-weight: bold;
    }


        .k-grid-header tr:not(.k-filter-row) th a.k-grid-filter {
            padding: 3px 1px;
            border: solid 1px transparent;
            border-radius: 2px;
            position: relative;
            top: 2px;
            left: -1px;
        }

            .k-grid-header tr:not(.k-filter-row) th a.k-grid-filter .k-icon:before {
                height: 12px;
                width: 12px;
                font-size: 12px !important;
                font-weight: normal !important;
            }

.k-grid-header th a:hover {
    text-decoration: none !important;
}

.k-grid-header tr:not(.k-filter-row) th a.k-grid-filter:hover {
    border-color: #4682ba;
}

.k-state-selected {
    background-color: #888;
    border-color: #888;
}

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

.pro-alternate-row,
.k-grid .k-alt {
    background-color: #f9f9f9;
}

.k-grid tr.pro-grid-data-row td {
    border-color: #fff;
    line-height: 1.5em;
}

.k-grid tr.pro-grid-data-row.pro-alt td {
    border-color: #f9f9f9;
}

.k-grid .pro-multi-row-top {
    padding-top: 4px;
    padding-bottom: 0;
    vertical-align: top;
}

.k-grid .pro-multi-row-inner {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: top;
}

.k-grid .pro-multi-row-bottom {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: top;
}

.k-grid .pro-multi-row-top.pro-grid-priority-image {
    padding-top: 8px;
    text-align: center;
    width: 30px;
    padding-left: 0;
    padding-right: 0;
}

.k-grida .pro-multi-row-top.pro-grid-priority-image {
    padding-top: 8px;
    text-align: center;
    width: 30px;
}


.k-grid .pro-row-hovered td {
    background-color: #ebebeb !important;
    border-left-color: #ebebeb !important;
    border-bottom-color: #ebebeb !important;
}

.k-grid .pro-grid-data-row.pro-current-row td {
    background-color: #ddd !important;
    border-color: #ddd !important;
}

.k-grid .k-state-default {
    color: #535b6a;
}

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

.pro-grid-right {
    text-align: right;
}

.pro-grid-top {
    vertical-align: top !important;
    padding-top: 6px !important;
}

.k-grid th a.k-state-active {
    background-color: #888;
    color: #fff;
}

.k-grid .pro-grid-info .glyphicons:before {
    padding: 0;
    padding-top: 4px;
}


.k-grid .pro-row-selector {
    margin: 0;
    margin-top: 2px;
}

.k-grid .pro-no-search-results-fixed-height {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 16px;
    position: relative;
}


.k-grid .pro-no-search-results {
    min-height: 100px;
    padding-top: 50px;
    text-align: center;
    font-size: 16px;
}

.k-grid .k-filtercell > span > .k-button {
    height: 25px !important;
    right: -6px;
    top: 3px;
}


.k-grid .pro-grid-row-main.pro-bold-result-data td {
    font-weight: bold;
}

.pro-fixed-grid-pager .pro-grid-export-options,
.k-grid .pro-grid-export-options {
    float: right;
    padding: 0 10px;
    font-size: 24px;
    line-height: 20px;
    order: 100; /*make sure it's at the end*/
}

    .pro-fixed-grid-pager .pro-grid-export-options a,
    .k-grid .pro-grid-export-options a {
        display: inline-block;
        padding: 3px;
        border: solid 1px transparent;
        border-radius: 2px;
        font-size: 20px;
    }

        .pro-fixed-grid-pager .pro-grid-export-options a .fa:before,
        .k-grid .pro-grid-export-options a .fa:before {
            padding: 0;
        }

        .pro-fixed-grid-pager .pro-grid-export-options a:hover,
        .k-grid .pro-grid-export-options a:hover {
            background-color: #ddd;
            border-color: #ccc;
        }

.pro-grid-totals-row td {
    font-weight: bold;
    color: #000;
    border-top: solid 1px #eee !important;
}


.pro-fixed-grid-container {
    overflow-y: auto;
}

.pro-fixed-grid-pager {
    width: 100%;
}

.pro-fixed-grid-container {
    margin: 0 !important;
}


.k-grid-norecords {
    height: 70% !important;
}

.pro-grid-totals-row td {
    font-weight: bold;
    color: #000;
    border-top: solid 1px #eee !important;
}

.k-grid .k-filter-row .k-numerictextbox {
    max-width: 140px;
}

.k-grid .k-filtercell > span {
    padding-right: 40px !important;
}

    .k-grid .k-filtercell > span.pro-no-operators {
        padding-right: 0px !important;
    }

.k-grid .k-filtercell .k-autocomplete {
    background-color: #fff !important;
}

.k-filter-row .k-dropdown-operator {
    right: 10px;
}




.k-grid .k-filter-row .k-dropdown .k-input,
.k-grid .k-filter-row .k-dropdown .k-select,
.k-grid .k-filter-row .k-numeric-wrap .k-input,
.k-grid .k-filter-row input.k-textbox {
    line-height: 25px !important;
    height: 25px !important;
    padding: 0px !important;
    font-size: 14px;
}

.k-grid .k-filter-row .k-numeric-wrap .k-input {
    line-height: 24px !important;
    height: 24px !important;
    /*width: 80px !important;*/
}

.k-grid .k-filter-row input.k-formatted-value:focus,
.k-grid .k-filter-row input.k-textbox:focus {
    border: solid 1px #1c6cab !important;
    box-shadow: 0 0 1px 1px #c0d6e8 !important;
}

.k-grid .k-filter-row .k-numeric-wrap {
    height: 24px !important;
}

.k-grid .k-filter-row .k-dropdown-operator {
    height: 24px !important;
    width: 24px !important;
}

    .k-grid .k-filter-row .k-dropdown-operator .k-dropdown-wrap {
        height: 24px !important;
    }

.k-grid .k-filter-row .k-numerictextbox .k-icon {
    height: 12px !important;
    line-height: 12px !important;
    font-size: 16px !important;
}

.k-grid .k-filter-row .k-numerictextbox .k-link-decrease {
    top: -3px !important;
    position: relative !important;
}


.k-grid .k-filter-row .k-dropdown-operator .k-select {
    height: 24px !important;
    width: 24px !important;
}

.k-grid .k-filter-row .k-dropdown-operator .k-dropdown-wrap .k-icon {
    top: -3px;
    left: -3px;
}

.k-grid .k-filter-row .k-autocomplete {
    border: solid 1px #ccc !important;
    /*box-shadow: none !important;*/
    /*max-width: 160px !important;*/
}

    .k-grid .k-filter-row .k-autocomplete input {
        max-width: 92% !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .k-grid .k-filter-row .k-autocomplete input:focus {
            max-width: 92% !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }


/****************************************
           Kendo Grid (end of)
****************************************/
/****************************************
           Kendo Auto-Complete
****************************************/
.k-autocomplete-clearable {
    background-image: none !important;
    border: none !important;
}

.pro-auto-complete {
    overflow-x: hidden;
}


.pro-auto-complete-header {
    border-width: 0 0 1px 0;
    background-color: #ebebeb;
}

    .pro-auto-complete-header > span {
        display: inline-block;
        box-sizing: border-box;
        background-color: #ebebeb;
        font-weight: bold;
        padding: 6px;
    }

.pro-auto-complete-footer {
    padding: 8px;
}

.k-multiselect .k-input,
.k-autocomplete .k-input {
    line-height: 24px !important;
    height: 24px !important;
    padding: 0 3px !important;
}

    .k-combobox .k-dropdown-wrap.k-state-focused,
    .k-multiselect.k-state-focused,
    .pro-auto-complete-dropdown,
    .k-autocomplete .k-input:focus {
        border: solid 1px #1c6cab !important;
        border-top: none;
        box-shadow: 0 0 1px 1px #c0d6e8 !important;
    }

        .k-combobox .k-dropdown-wrap.k-state-focused .k-input {
            box-shadow: none !important;
        }

.pro-combo-box-dropdown,
.pro-multi-select-dropdown,
.pro-auto-complete-dropdown {
    background-color: #fff;
    overflow-x: hidden !important;
}

.pro-auto-complete-list .k-item {
    line-height: 1em !important;
    min-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}


.pro-auto-complete-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding: 4px;
    padding-left: 8px;
    color: #333 !important;
    overflow-wrap: break-word;
}

    .pro-auto-complete-item.pro-centre {
        text-align: center;
    }

    .pro-auto-complete-item.pro-right {
        text-align: center;
        text-align: right;
        padding-right: 6px;
    }

.pro-no-data {
    color: #000;
    font-weight: 500;
    text-transform: none;
    font-size: 14px;
}

.k-list > .k-state-hover {
    background-color: #ebebeb !important;
    border-color: #ebebeb !important;
}



/* RJP 14/02/2018 */
/* The issue with the below is that it is more generic than just auto-complete. */
/* It is causing weird issues with the main menu whereby the Home menu item blocks out with colour #ebebeb when clicking any other sub-menu. */
/*
.k-state-focused,
.k-list > .k-state-focused {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #ebebeb;
    border-color: #ebebeb;
}
*/

/* Fixed css of stop impact on main menu */

:not(.mainMenuItem):not(.pro-environment):not(.k-list.pro-multiselect):not(.k-state-selected).k-state-focused,
:not(.mainMenuItem):not(.pro-environment).k-list:not(.pro-multiselect) > .k-state-focused {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #ebebeb;
    border-color: #ebebeb;
}

.mainMenuItem.k-state-focused,
.pro-environment.k-state-focused {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* End of "Fixed css of stop impact on main menu" */


.pro-error-field {
    box-shadow: 0 0 3px #d59696 !important;
    box-shadow: 0 0 3px #db7d7d !important;
    border: solid 1px darkred !important;
}




/****************************************
      Kendo Auto-Complete (end of)
****************************************/



/****************************************
      Kendo Multi-Select (start)
****************************************/



.k-multiselect {
    display: inline-block;
}

    .k-multiselect .k-select {
        top: 2px;
    }

    .k-multiselect .k-input {
        height: 30px;
        margin-top: 1px;
        margin-bottom: 1px;
        margin-left: 1px;
    }

    .k-multiselect .k-button {
        height: 24px;
    }

        .k-multiselect .k-button .k-icon:before {
            top: -5px;
        }

.pro-multi-select-list.k-list > .k-state-focused {
    border-radius: 0;
}

.pro-multi-select-list.k-list > .k-state-selected {
    background-image: none !important;
    background-color: #ddd;
    border-top: solid 1px #ccc;
    border-radius: 0;
    color: #333;
}

.pro-multi-select-list.k-list > .k-state-focused.k-state-selected {
    background-image: none !important;
    background-color: #d0d0d0 !important;
    -webkit-box-shadow: none;
    box-shadow: none none;
}

.pro-multi-select-header {
    border-width: 0 0 1px 0;
    background-color: #ebebeb;
}

    .pro-multi-select-header > span {
        display: inline-block;
        box-sizing: border-box;
        background-color: #ebebeb;
        font-weight: bold;
        padding: 6px;
    }

.pro-multi-select-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding: 0;
    padding-left: 8px;
    color: #333 !important;
}

    .pro-multi-select-item.pro-centre {
        text-align: center;
    }

    .pro-multi-select-item.pro-right {
        text-align: center;
        text-align: right;
        padding-right: 6px;
    }

.pro-multi-select-dropdown {
    border: solid 1px #1c6cab !important;
    border-top: none;
    box-shadow: 0 0 1px 1px #c0d6e8 !important;
}



/****************************************
      Kendo Multi-Select (end of)
****************************************/





/****************************************
      Kendo Combo-Box (start)
****************************************/


.pro-combobox {
    height: 27px;
}


.pro-combo-boxlist li {
    padding: 0 !important;
    margin: 0 !important;
    background-color: orange !important;
    border: none !important;
}



.pro-combo-box-list.k-list > .k-state-focused {
    border-radius: 0;
}

.pro-combo-boxlist.k-list > .k-state-selected {
    background-image: none !important;
    background-color: #ddd;
    border-top: solid 1px #ccc;
    border-radius: 0;
    color: #333;
}


.pro-combo-box-list.k-list > .k-state-focused.k-state-selected {
    background-image: none !important;
    background-color: #d0d0d0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.pro-combo-box-header {
    border-width: 0 0 1px 0;
    background-color: #ebebeb;
}

    .pro-combo-box-header > span {
        display: inline-block;
        box-sizing: border-box;
        background-color: #ebebeb;
        font-weight: bold;
        padding: 6px;
    }

.pro-combo-box-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    padding: 0;
    padding-left: 8px;
    color: #333 !important;
    border-right: solid 1px #ddd;
}


    .pro-combo-box-item:last-of-type {
        border-right: none;
    }


    .pro-combo-box-item.pro-centre {
        text-align: center;
    }

    .pro-combo-box-item.pro-right {
        text-align: center;
        text-align: right;
        padding-right: 6px;
    }


.pro-combo-box-dropdown {
    border: solid 1px #1c6cab !important;
    border-top: none;
    box-shadow: 0 0 1px 1px #c0d6e8 !important;
    margin-top: 4px !important;
}

.pro-combo-box-header > span {
    box-sizing: border-box !important;
}



.k-popup .k-list.pro-combo-box-list .k-item {
    border: none;
    margin: 0;
    padding: 0;
}

.k-autocomplete .k-input {
    padding: 0;
}

.k-combobox-clearable .k-input {
    height: 2em;
}

.k-combobox .k-dropdown-wrap .k-select {
    height: 2em;
    line-height: 1em;
}

.k-combobox .k-dropdown-wrap .k-input {
    padding: 0;
}

.k-combobox .k-dropdown-wrap:before, .k-picker-wrap:before, .k-numeric-wrap:before {
    line-height: 1em;
    height: 1em;
}

.k-combobox .k-icon:before {
    top: 0.5em;
}

.k-pager-sizes .k-icon {
    position: static;
}


/****************************************
      Kendo Combo-Box (end of)
****************************************/




/****************************************
      Kendo Menu
****************************************/

/* We dislike the silver gradient that is the default for this style */
.k-menu .k-state-hover > .k-link,
.k-menu .k-menu-scroll-button:hover,
.k-menu.k-header {
    background-image: none;
}

/****************************************
      Kendo Menu (end of)
****************************************/


/****************************************
      Kendo Date-Picker 
****************************************/



.k-datepicker {
    width: 114px !important;
}

    .k-datepicker .k-input,
    .k-datepicker .k-select {
        height: 24px !important;
        padding: 0 !important;
        line-height: 24px;
    }

    .k-datepicker .k-select {
        line-height: 24px;
    }

.k-picker-wrap .k-input {
    width: 88px !important;
    font-size: 14px;
}

.k-picker-wrap .k-select {
    width: 24px !important;
}

/****************************************
      Kendo Date-Picker (end of)
****************************************/


/****************************************
      General
****************************************/


/* This styling has been done for the grid filter menu lists */
/* These list were displayiong a white font and a blue shadow border for the current list item. */
.k-list:not(.pro-multiselect) > .k-state-selected,
.k-list:not(.pro-multiselect) > .k-state-highlight {
    color: #333;
}

/* This styling has been done for the grid filter menu lists */
/* These list were displayiong a white font and a blue shadow border for the current list item. */
.k-list:not(.pro-multiselect) > .k-state-focused.k-state-selected {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #ddd;
}