/******************************************************
Kendo Window (only .k-window) and Dialog (both .k-window and .k-dialog)
*/

.k-window {
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.6);
    background: var(--theme-color-5) !important;
}

.k-window .k-window-titlebar {
    border-color: var(--border-color-10) !important;
    background: var(--theme-color-1) !important;
}

.k-window .k-window-titlebar .k-window-title {
    color: var(--text-color-normal) !important;
}

.k-window .k-window-titlebar .k-window-actions .k-window-action.k-button-icon,
.k-window .k-window-titlebar .k-window-actions .k-window-action.k-link,
.k-window .k-window-titlebar .k-dialog-action {
    box-shadow: none;
    border-style: none;
    background: inherit !important;
    color: var(--text-color-shallow) !important;
    opacity: 1 !important;
}
.k-window .k-window-titlebar .k-window-actions .k-window-action.k-button-icon:hover,
.k-window .k-window-titlebar .k-window-actions .k-window-action.k-link:hover,
.k-window .k-window-titlebar .k-dialog-action:hover {
    background: var(--hover-button) !important;
    color: var(--text-color-normal) !important;
}

.k-window .k-window-content,
.k-window .k-content {
    background: inherit !important;
    color: var(--text-color-normal) !important;
}

.k-window-content .k-splitter .k-ghost-splitbar-horizontal,
.k-window-content .k-splitter .k-splitbar-horizontal,
.k-window-content .k-splitter .k-ghost-splitbar-vertical,
.k-window-content .k-splitter .k-splitbar-vertical {
    color: var(--text-color-normal) !important;
    background-color: var(--theme-color-1) !important;
    border-color: var(--border-color-10) !important;
}

.k-window-content .k-splitter .k-splitbar-draggable-horizontal .k-resize-handle,
.k-window-content .k-splitter .k-splitbar-draggable-vertical .k-resize-handle {
    background: var(--text-color-normal) !important;
    color: var(--text-color-normal) !important;
}

/* override all.css */
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched button.k-button {
    color: var(--text-color-normal) !important;
}



/******************************************************
Kendo Button 
*/

.k-button,
a.k-button:link,
a.k-button:visited {
    border-color: var(--border-color-4) !important;
    background: var(--theme-color-10) !important;
    color: var(--text-color-normal) !important;
}

.k-button:hover,
a.k-button:hover,
.k-button.k-state-hover {
    border-color: var(--border-color-4) !important;
    background: var(--hover-button) !important;
    color: var(--text-color-hover) !important;
}

.k-button:active,
a.k-button:active,
.k-button.k-state-active,
.k-button.k-sate-selected {
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.25);
    border-color: var(--border-color-4) !important;
    background: var(--theme-color-10) !important;
    color: var(--text-color-hover) !important;
}

/* primary buttons */

    .k-button.k-primary,
    a.k-button.k-primary:link,
    a.k-button.k-primary:visited {
        border-color: var(--button-color-standard) !important;
        background: var(--button-color-standard) !important;
        color: #fff;
    }

.k-button.k-primary:hover,
a.k-button.k-primary:hover,
.k-button.k-primary.k-state-hover {
    border-color: var(--button-color-standard) !important;
    background: var(--button-color-standard) !important;
    color: #fff;
}

        .k-button.k-primary:active,
        a.k-button.k-primary:active,
        .k-button.k-primary.k-state-active,
        .k-button.k-primary.k-sate-selected {
            box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.25) !important;
            border-color: var(--button-border) !important;
            background: var(--selected-highlight) !important;
            color: #fff !important;
        }


/* toolbar buttons */

.k-toolbar .k-button,
.k-toolbar a.k-button {
    /* note: IE does not support rgba */
    border-color: var(--border-color-3) !important;

}

/*    .k-toolbar .k-button:hover,
    .k-toolbar a.k-button:hover,
    .k-toolbar .k-button.k-state-hover {
        border-color:#FFFFFF !important;
        background: var(--hover-button) !important;
        color: var(--text-color-normal) !important;
    }*/

    .k-toolbar .k-button.k-split-button-arrow:hover,
    .k-toolbar .k-button#tb-exportBG:hover,
    .k-toolbar .k-button#createtaskwrapper:hover,
    .k-toolbar #tb-actionBG.k-button:hover{
        background: var(--hover-button) !important;
    }

    /*.k-toolbar .k-button:active,
    .k-toolbar a.k-button:active,
    .k-toolbar .k-button.k-state-active,
    .k-toolbar .k-button.k-state-selected {
        box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.25);
        border-color:#FFFFFF !important;
        background: var(--theme-color-1) !important;
        color: var(--text-color-normal) !important;
    }*/

/*toolbar button in the detail page*/
.k-toolbar .k-button-group .k-button-icon:focus {
    box-shadow:none;
}

.k-button-solid-primary {
    background-color: #1668dc !important;
    --text-color-normal: #fff;
}

/******************************************************
Kendo NumericTextBox: .k-input
    .k-input styles also affects Kendo DropDownList, AutoComplete, Combobox, DateTimePicker, and MultiSelect
Kendo styles (or widget) for plain textbox: .k-textbox
*/

input.k-input,
input.k-textbox {
    border: var(--light-border);
    box-shadow: var(--box-shadow-2);
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
}

input.k-input::placeholder,
input.k-textbox::placeholder {
    color: var(--text-color-placeholder) !important;
}
input.k-input:-ms-input-placeholder,
input.k-textbox:-ms-input-placeholder {  /* Internet Explorer 10-11 */
    color: var(--text-color-placeholder) !important;
}
input.k-input::-ms-input-placeholder ,
input.k-textbox::-ms-input-placeholder {  /* Microsoft Edge */
    color: var(--text-color-placeholder) !important;
}



/*************************************************
Kendo DropDownList with Server Filtering (Search)
*/

.k-dropdown {
    border: none;
    box-shadow: var(--box-shadow-2);
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
}

.k-dropdown .k-dropdown-wrap {
    border-color: var(--border-color) !important;
    background: inherit !important;
    color: inherit !important; 
}

.k-dropdown .k-dropdown-wrap.k-state-focused {
    background: inherit !important;
}



/******
    The styles below (.k-animation-container ...) for drop-down options 
    are shared by Kendo DropDownList, AutoComplete, Combobox, DateTimePicker, and MultiSelect
*/

.k-animation-container .k-list-container {
    background: var(--theme-color-1) !important;
}

.k-animation-container .k-list-container .k-list-filter {
    background: inherit !important;
}

.k-animation-container .k-list-container .k-list-filter input.k-textbox {
    box-shadow: none;
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
}

.k-animation-container .k-list-container .k-list-filter .k-icon {
    color: var(--text-color-shallow) !important;
}

.k-animation-container .k-list-container .k-group-header {
    background: var(--theme-color-3) !important;
    color: var(--text-color-shallow) !important;
}

.k-animation-container .k-list-container .k-list-scroller  {
    background: inherit !important;
}

.k-animation-container .k-list-container .k-list-scroller .k-item,
.k-animation-container .k-list-container.k-list-scroller .k-item {
    color: var(--text-color-muted) !important;
}

.k-animation-container .k-list-container .k-list-scroller .k-item.k-state-hover,
.k-animation-container .k-list-container.k-list-scroller .k-item.k-state-hover {
    background: var(--theme-color-3) !important;
}

.k-animation-container .k-list-container .k-list-scroller .k-item.k-state-selected,
.k-animation-container .k-list-container.k-list-scroller .k-item.k-state-selected {
    background: var(--selected-highlight) !important;
    color: var(--text-color-normal) !important;
}

.k-animation-container .k-list-container .k-list-scroller .k-item.k-first::before,
.k-animation-container .k-list-container.k-list-scroller .k-item.k-first::before {
    border-color: #101520 !important;
}

.k-animation-container .k-list-container .k-list-scroller .k-item.k-first .k-group,
.k-animation-container .k-list-container.k-list-scroller .k-item.k-first .k-group {
    border-color: #101520 !important;
}

.k-animation-container .k-list-container .k-list-optionlabel {
    color: var(--text-color-muted) !important;
}

.k-animation-container .k-list-container .k-list-optionlabel.k-state-hover {
    background: var(--theme-color-3) !important;
}

.k-animation-container .k-list-container .k-list-optionlabel.k-state-selected {
    border-color: var(--button-border) !important;
    background: var(--selected-highlight) !important;
    color: var(--text-color-normal) !important;
}

.k-animation-container .k-list-container .k-nodata {
    color: var(--text-color-muted) !important;
}



/***************************************************************************
Kendo DateTimePicker: includes DateTime Picker, Date Picker and Time Picker
- Time Picker drop-down shares some of the DropDownList styles above
- Date Picker calendar styles below
*/

.k-datetimepicker,
.k-datepicker,
.k-timepicker {
    border: none;
    box-shadow: var(--box-shadow-2);
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
}

.k-datetimepicker .k-picker-wrap,
.k-datepicker .k-picker-wrap,
.k-timepicker .k-picker-wrap {
    border-color: var(--border-color) !important;
    background: inherit !important;
    color: inherit !important; 
}

.k-picker-wrap .k-select {
    background: inherit !important;
    color: inherit !important;
}

.k-picker-wrap .k-select .k-icon,
.k-picker-wrap .k-select .k-link {
    color: inherit !important;
}

.k-picker-wrap .k-select .k-icon:hover,
.k-picker-wrap .k-select .k-link:hover {
    /*background: var(--button-color-standard) !important;*/
    color: var(--text-color-normal) !important;
}


.k-animation-container .k-calendar-container {
    background: var(--theme-color-1) !important;
}

.k-animation-container .k-calendar-container .k-calendar {
    background: inherit !important;
}

.k-animation-container .k-calendar .k-header {
    box-shadow: none !important;
    border: none !important;
    background: inherit !important;
}

.k-animation-container .k-calendar .k-header .k-link {
    color: var(--text-color-normal) !important;
}

.k-animation-container .k-calendar .k-calendar-view,
.k-animation-container .k-calendar table.k-content  {
    background: var(--theme-color-3) !important;
    color: var(--text-color-muted) !important;
}

.k-animation-container .k-calendar table.k-month th {
    border-bottom-color: var(--theme-color-8) !important;
    background: var(--theme-color-1) !important;
    color: inherit !important;
    opacity: 1 !important;
}

.k-animation-container .k-calendar table.k-content td {
    background: var(--theme-color-3) !important;
    color: inherit !important;
}
.k-animation-container .k-calendar table.k-content td.k-state-hover {
    background: var(--theme-color-7) !important;
}
.k-animation-container .k-calendar table.k-content td.k-state-selected,
.k-animation-container .k-calendar table.k-year td.k-state-focused {
    background: #1C4F8F !important;
}

.k-animation-container .k-calendar table.k-content td .k-link {
    box-shadow: none !important;
    background: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
}
.k-animation-container .k-calendar table.k-month .k-other-month .k-link,
.k-animation-container .k-calendar table.k-content .k-state-disabled {
    color:  var(--text-color-blended) !important;
}
.k-animation-container .k-calendar table.k-month .k-other-month .k-link.k-state-disabled {
    color: var(--text-color-blended) !important; 
}

.k-animation-container .k-calendar table.k-month td.k-today .k-link {
    color: #60A7FF !important;
}

.k-animation-container .k-calendar .k-footer {
    background: var(--theme-color-3) !important;
}

.k-animation-container .k-calendar .k-footer .k-link {
    text-decoration: none !important;
    color: var(--selected-text-color) !important;
}
.k-animation-container .k-calendar .k-footer .k-link:hover {
    color: #60A7FF !important;
}



/*************************************************
Kendo MultiSelect
*/

.k-multiselect {
    border: none;
    box-shadow: var(--box-shadow-2);
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
}

.k-multiselect .k-multiselect-wrap {
    border-color: var(--border-color) !important;
    background: inherit !important;
}

.k-multiselect li.k-button {
    background: var(--theme-color-1) !important;
}

.k-multiselect li.k-button > span {
    color: var(--text-color-muted) !important;
}

#available-site-selector_taglist > li.k-button > span {
    max-width: 200px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}

.k-multiselect-wrap #available-site-selector_taglist  .k-select {
    position:static;
}

.k-multiselect li.k-button .k-icon {
    color: var(--text-color-shallow) !important;
    opacity: 1 !important;
}

.k-multiselect input.k-input {
    background: var(--theme-color-8) !important;
    color: var(--text-color-muted) !important;
    padding-left: 0px;
    box-shadow: none;
}



/*************************************************
Kendo Sortable
*/

ul[data-role="sortable"] li,
ul[data-role="sortable"] li span { 
    color: var(--text-color-muted) !important;
}
ul[data-role="sortable"] li:hover,
ul[data-role="sortable"] li.placeholder { 
    background: var(--selected-highlight) !important; 
}

li.hint {
    background: var(--button-color-standard) !important;
    color: var(--text-color-normal) !important;
}



/*************************************************
Kendo Treeview
*/

.k-treeview li.k-item {
    color: var(--text-color-muted) !important;
}

    .k-treeview li.k-item .grouping-row.k-state-hover,
    .k-treeview li.k-item .grouping-row.k-state-hover .row-bias {
        background: var(--theme-color-7) !important;
        color: var(--text-color-normal) !important;
    }

    .k-treeview li.k-item .grouping-row.k-state-selected,
    .k-treeview li.k-item .grouping-row.k-state-selected .row-bias {
        background: var(--selected-highlight);
        z-index: 0;
    }

    .k-treeview li.k-item .k-in.k-state-hover .command-row {
        background: var(--theme-color-7);
        color: var(--text-color-normal);
    }

    .k-treeview li.k-item .k-in.k-state-selected .command-row {
        background: var(--selected-highlight);
    }


/*tab*/

.d-tab.k-content{
    background: var(--theme-color-5);
}

.d-tab.k-content .k-textbox{
    background:var(--theme-color-8);
}

.k-tabstrip-items{
    background:var(--theme-color-5);
}
.k-tabstrip-items .k-link{
    color:var(--text-color-normal);
}

.k-tabstrip .k-tabstrip-items{
    background:var(--theme-color-7);
}

.k-tabstrip-items .k-item.k-state-active{
    background:var(--theme-color-5);
}

.k-tabstrip-items .k-item{
    background:var(--theme-color-7)
}

/*kendo grid*/

.k-grid{
    background:var(--theme-color-5);
}

.k-grid td{
    border-left:0px;
}
.k-toolbar, .k-grouping-header{
    background:var(--playbook-bar-color-3);
}

.k-grid-norecords-template{
   background:inherit;
}

.k-grid .k-grid-toolbar {
    background: var(--theme-color-3);
}

.k-grid .k-grid-header{
    border-left: var(--border);
    background: var(--theme-color-6);
}

#searchResults .k-grid-header,
#searchResults .k-grid-content {
    margin-left: 12px;
    margin-right: 12px;
}

#searchResults .k-grid-content {
    max-width: calc(100% - 24px);
}

.d-tt-row2 .k-grid-header,
.d-tt-row2 .k-grid-content {
    margin-left: 8px;
}

.k-grid .k-grid-header-wrap {
    height: 33px;
}

.k-grid .k-grid-header table th {
    border-right: var(--border);
    border-top: var(--border);
    border-bottom: var(--border);
    border-left: none;
}

.k-grid .k-grid-header table th a{
    color: var(--text-color-normal);
}

.k-grid .k-grid-header table tr td{
    color: var(--text-color-muted);
}

.k-grid .k-grid-content {
    background: inherit;
    border-left: var(--border);
    border-right: var(--border);
}

.k-grid tbody tr:hover {
    background-color: var(--theme-color-6)!important; 
}

.k-grid tbody tr:active{

}

.k-grid tr.k-state-selected > td {
    background-color: var(--selected-highlight);
}



.k-grid tbody tr:nth-child(2n+1) {
     background: var(--theme-color-4); 
}

.k-grid tbody tr:nth-child(2n) {
     background: var(--theme-color-4); 
}

.k-grid tr td {
    border-bottom: var(--border);
}


.k-pager-wrap.k-grid-pager{
    background:var(--theme-color-6);
    border: var(--border);
} 

.k-grid tbody tr.k-master-row {
     background: var(--theme-color-4); 
}

.k-grid tbody tr.k-alt.k-master-row {
     background: var(--theme-color-4); 
}

.k-grid tbody tr.k-detail-row {
     background: var(--theme-color-4); 
}

/*grouping in the grid*/
.k-group-footer td,
.k-grouping-row td,
tbody .k-group-cell {
    background-color: var(--theme-color-6); 
}

.k-grouping-header .k-group-indicator{
    border:solid 1px #101520;
}

/*pager in the grid*/
/* .k-pager-wrap a.k-link:link, */
.k-pager-wrap a.k-link,
.k-pager-wrap .k-link.k-state-disabled {
	color:var(--text-color-shallow);
}

/*filter in the grid*/
.k-filter-menu.k-popup {
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-color-normal);
  background-color: var(--theme-color-1); }

/*switch button*/
.k-switch-off .k-switch-handle {
    background: #ededed;
}

.k-switch-on k-switch-handle{
    background:var(--text-color-normal);
}

.k-switch-off .k-switch-container{
    background:var(--theme-color-6);
}

.k-switch-on .k-switch-container{
    background:var(--button-color-standard);
}

.k-switch-label-on,
.k-switch-label-off{
    display:none;
}

/*splitter*/
.k-splitbar{
    border-color: #101520;
    background:var(--theme-color-8);
    color:var(--text-color-shallow);
}

.k-splitbar:active{
    border-color:#FFFFFF;
    background:var(--theme-color-1);
}

#pb_playbook_dropdown_listbox .k-item {
    white-space: pre !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
    
.playbook_list_tooltip .k-tooltip-content {
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    white-space: nowrap;
    font-size: 14px;
}

.d-win .d-tabs .d-tab-pane {
    background-color: var(--theme-color-5) !important;
}


#searchResults .k-grouping-header,
#reportingResultList .k-grouping-header {
    background-color: var(--theme-color-8);
}

.k-list-scroller {
    margin-top: -3px;
}

.detail-wrapper {
    color: var(--text-color-normal) !important;
}

.d-toolbar .k-input.pb-task-search-box::placeholder{
    color: var(--text-color-normal) !important;
}