/*TODO: Revist all of these since many imported from previous versions and pre-v4 of Phoenix so confirm still valid*/
/*TODO: Also, now that using Kendo SCSS sources, with access to all variables and layouts, go thru to see if perhaps can override variables instead of the hacks below*/



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


.k-grid-header-wrap th {
    padding: 8px 0;
}

.k-grid-header-wrap th,
.k-grid-header .k-header > .k-link {
    font-weight: 400;
}

/*Move this to */
.k-grid-content td,
.k-grid-content td div {
    font-size: 0.95em;
    font-weight: 600;
}

.k-grid.k-widget {
    border-radius: 8px;
    margin-top: 0.1em; /*1em;*/
    margin-bottom: 0; /*1em;*/
/*    font-weight: bold;*/
}

.k-grid-header .k-header {
    text-align: center;
    line-height: 3em;
}

.k-filter-menu > ul {
    /*so scrollbar doesn't cover text*/
    padding-right: 22px;
}


.k-grid-toolbar {
    border-radius: 8px 8px 0 0;
    padding: .5em .6em;
}

.k-grid-pager {
    border-radius: 0 0 8px 8px;
}

.k-grid-pager {
    margin: 0 -1px;
}

.k-grid td {
    line-height: 2.05em;
    white-space: nowrap;
}

/* HACK: prevent aggregate (count) in first column from being cutoff when actions column is too narrow */
.k-grid .k-footer-template td:first-child {
    overflow: visible;
}

.k-grid .k-footer-template td {
    padding: 0 0 0 5px;
    height: 16px;
}

.k-grid-footer {
    height: 26px;
}

.k-grid-header {
    padding-left: 2px;
}

.k-grid-content {
    overflow-y: auto; /*TODO: Go thru grid docs to see what setting would control this during config*/
}

.k-grid-header th.k-header,
.k-grid-content td {
    border-style: dotted;
    border-width: 0 0 1px 1px;
}
.k-grid-header th.k-header {
    border-width: 0 1px 1px 0;
}
.k-grid-header th.k-header {
    border-color: rgba(200,200,200,0.5); /*#c8c8c8*/
}
.k-grid-content td {
    border-color: rgba(200,200,200,0.8); /*#c8c8c8*/
}

body.is-dark .k-grid-content td {
    border-style: solid;
    border-width: 0 0 1px 0;
}
body.is-dark .k-grid-header th.k-header {
    border-color: rgba(200,200,200,0.3); /*#c8c8c8*/
}
body.is-dark .k-grid-content td {
    border-color: rgba(200,200,200,0.3); /*#c8c8c8*/
}


/*TODO: Figure out proper way to float a set of buttons to the right inside a flex container (and remove right float below); for now, remove flex*/
.k-grid-toolbar {
    display: block;
}
    .k-grid-toolbar .align-right {
        display: inline-flex;
        float: right;
        color: inherit;
    }

.grid-action-refresh,
.grid-action-export,
.grid-action-excel,
.grid-action-pdf {
    float: right;
}

.grid-action-process {
    float: left;
}

.k-pager-wrap > .k-link .k-icon.k-i-refresh {
    opacity: 1;
}

.k-grid-content tr.k-grouping-row {
    color: #FFFFFF;
}
/*Not sure why with 2015 Q1 pager numbers are different height even tho same CSS and cannot find something overriding this setting*/
.k-pager-numbers li .k-link,
.k-pager-numbers li .k-state-selected {
    height: 2em;
}

/*TODO: This appears to be a bug in Kendo, applying hover on footer template when nothing actionable due to wide nete selector (tho why is a footer using a table?)
So block style change on general hover since all wrong - cuz same issue on actual grid rows and not sure why this is an issue now in 2021.1*/
.k-grid .k-grid-footer-wrap tbody tr:hover,
.k-grid .k-grid-footer-wrap tbody tr.k-state-hover {
    color: inherit;
    background-color: inherit;
}


/*TODO: See if any downsides but reverting 2021.1 grid column style back to earlier versions removing this flexbox*/
.k-grid-header th.k-header {
    color: #FFFFFF;
    overflow: hidden;
    padding: .5em .4em .4em .4em;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}
.k-grid-header th.k-header {
    vertical-align: baseline;
}
.k-header > .k-grid-filter {
    float: right;
    margin: 0;
    padding: 0 0.2em 0;
    position: relative;
    z-index: 1;
    top: -0.5em;
    right: 0;
    line-height: inherit;
    display: block;
    width: 1.8em;
    height: 2.5em;
    border-radius: 35%;
}
.k-grid-header th.k-header > .k-link {
    display: block;
    min-height: 18px;
    line-height: 18px;
    margin: -0.5em -0.6em -0.4em -0.2em;
    padding: 0.5em 0.6em 0.4em 0.2em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k-grid-header .k-with-icon, .k-grid-header .k-filterable {
    padding-right: 1em; /*calc(1.4285714286em + 30px); */
}
.k-header > .k-grid-filter .k-icon {
    vertical-align: baseline;
}

.k-grid .k-command-cell .k-button {
    padding: 6px 16px;
}

.k-grid-content td input[type="checkbox"] {
    vertical-align: middle;
}
/*Unclear why Kendo had this to 0??*/
.k-grid-content tr:last-child > td {
    border-bottom-width: 1px;
}

/*TODO: Revisit if this is how we want to set this*/
.k-grid-content tr[role="row"] {
    height: 45px;
}

.k-filter-menu-container .k-multicheck-wrap {
    /*TODO: Anything to do to dress up ugly non-kendo checkboxes*/
}

.k-grid-header,
.k-grid-footer {
    padding-right: 0;
}

.k-grid-footer .k-footer-template > td,
.k-grid-footer .k-footer-template > td div {
    color: #FFFFFF;
}

.k-pager-input .k-textbox {
    cursor: cell; /*Some footer colors hide the thin cursor of a text type, so use something conveying similar intent but not obscured by bg color*/
}

/**********************************/
/*NOTE: To simplify the grid and reduce overall perception of clutter, removing or blending aspects of the grid (header, footer, borders, etc)******************/
.k-grid {
    border-width: 0;
    background-color: transparent;
}
/*For some reason, using CSS to hide footer causes the internal height calc to go way off charts, worse when filtering so apply via JS on fly in _ConfigureBoundGrid*/
/*.k-grid-footer,
div.k-grid-footer {
    display: none;*/ /*NOTE: Already has this count data in the pager anyway, which is 99.5% of the uses*/
/*}*/
.k-grid-toolbar {
    padding: 0 0 1em 0;
    border-width: 0;
}
.k-grid-toolbar .k-button {
   margin-top: 0.5em;
}
.k-toolbar {
    background-color: transparent;
}
.k-grid-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.k-grid-header-wrap {
    border-right-width: 0;
}
.k-grid-pager {
    border-width: 0;
}
/*Remove if not showing a toolbar*/
.k-grid-toolbar .k-button { 
    margin-left: 0.6em;
/*    margin-right: 0.25em;*/
}


/*No idea why Kendo adds this wrapper crap if in mobile but need to override the BG color here too, since our overrides above for transparent are inner elements*/
.k-pane-wrapper,
.k-view {
    border-color: transparent; /*MOD from rgba(255, 255, 255, 0.12); */
    background-color: transparent; /*MOD from #424242;*/
}
/* line 15, src/assets/scss/vendor/kendo/@progress/kendo-theme-default/scss/adaptive/_theme.scss */
.k-pane-wrapper .k-pane > .k-view > .k-content {
    background-color: transparent ; /*MOD from #424242;*/
}


/*END*************************/


/******************Kendo Window***************/
.k-window .k-window-titlebar,
.k-window .k-window-actions,
.k-window .k-dialog-close {
    color: #FFFFFF;
}




/*******************Action Row Bar (in grid)***************/
.action-row-menu {
    box-sizing: content-box;
    list-style: none;
    position: relative;
    line-height: 15px;
    padding-top: 3px;
    opacity: 0.7;
    text-align: center;
}

    .action-row-menu > li {
        padding: 0 5px;
        display: inline;
    }

    .action-row-menu .disabled {
        cursor: default;
        opacity: 0.2;
    }

    .k-grid-header-wrap th[data-title = "Actions"] {
        text-align: center;
    }

.k-grid-content .action-row-menu svg,
.k-grid-content .action-row-menu i {
    height: 20px;
    width: 20px;
    font-size: 20px;
}



/********************* Kendo Main Grid Only Overrides  *********************/
#MainList {
}




/********************* Kendo Treeview Overrides  *********************/
.k-treeview-lines .k-plus {
    background-position: -161px -192px;
}

.k-treeview-lines .k-minus {
    background-position: -161px -209px;
}

.k-widget .k-treeview-lines {
    color: #ffffff;
    padding: 1em;
}

.k-treeview-lines li .k-image {
    float: left;
    margin-right: 7px;
    height: 16px;
    width: 16px;
}

.k-treeview-lines li span.k-in:hover {
    cursor: pointer;
}

.k-treeview .k-in {
    padding: 3px 4px 1px 3px;
    border-width: 0px;
}

.k-treeview .k-state-hover,
.k-treeview .k-state-selected {
    padding: 3px 4px 1px 3px;
}

.k-widget ul.k-treeview-lines {
    -moz-border-radius: 0.7em;
    -webkit-border-radius: 0.7em;
    -webkit-background-clip: padding-box;
    border-radius: 0.7em;
}

.k-treeview .k-item .k-icon {
    background-image: url('/themes/current/images/kendo/sprite.png');
    font-size: 26px;
    /*TODO: Not particularly sure why this is all messed up - figure out*/
    height: 20px; 
    width: 20px;
}

/*TODO: These really are an app-centric and probably shouldnt be here
	Also create a sprite for these once settled on short-list of app icons*/

.k-treeview-lines a.treeview-action svg {
    height: 16px;
    width: 16px;
}

.k-treeview .k-item {
    padding: 4px 0 4px 24px;
}

.k-treeview .k-item .k-icon {
    background-image: url('/themes/current/images/kendo/sprite.png');
}





/********************* Kendo Control (and general input) Overrides  *********************/
/*TODO: This is for boolean filters in grid - figure out if this change is necessary across all radio groups and/or if a variable in SCSS could apply instead
but at moment, margin: 0 is applied and at input/select/button level, that is causing this and nothing added in specific contexts */
input[type="radio"] {
    margin: 0 5px;
}
input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: text-top;
}
.k-switch.k-widget.k-input {
    width: 40px;
}

/*TODO: Figure out why Kendo example shows this working properly but this below is requried to have selectors applied to right level (Kendo demo has .k-state-invalid selectors at the .k-textbox level for the transition)??*/
.k-maskedtextbox.k-state-invalid > .k-textbox + .k-i-warning {
    display: inline-block;
}

.k-textarea > .k-input {
    padding-left: 0;
    padding-right: 2px;
}

.k-multiselect .k-multiselect-wrap .k-button, 
.k-dropdowntree .k-multiselect-wrap .k-button {
    font-size: 1em;
}

/*Keep all controls consistent in height; dropdowns seem to have 2.5px more gap between line and text than other controls*/
.k-widget.k-dropdown,
.k-widget.k-combobox,
.k-widget.k-datepicker,
.k-widget.k-timepicker,
.k-widget.k-switch {
    height: 31.5px; /*TODO: Not sure if best way to handle this; very rigid*/
}
.k-widget.k-switch {
    padding-top: 10px;
}

.k-upload {
    border-radius: 8px;
}
.k-upload .k-dropzone {
    border-radius: 8px;
}



/********************* Slider  *********************/

.k-slider.k-slider-horizontal {
    margin: 0.5em 2px;
}

.k-slider-horizontal .k-slider-track,
.k-slider-horizontal .k-slider-selection {
    height: 9px;
    margin-top: -3px;
}

.k-slider-horizontal .k-slider-items {
    padding: 5px 0;
}
/*TODO: Figure out why in this version of sources, unlike the demo, this gif is not included nor do see any CSS for it 
    (tho SCSS looks like it is baking the image data into the compilation but still see no reference*/
.k-slider-horizontal .k-tick {
    background-image: url(/assets/vendor/kendo/img/slider-h.gif);
}

.k-slider-vertical .k-tick {
    background-image: url(/assets/vendor/kendo/img/slider-v.gif);
}
/*Confirm we dont want the hashes in the line, in any scenario*/
.k-slider .k-tick::after {
    background-color: transparent;
}
.k-slider-horizontal.slider-tick-small-hide li.k-tick:not(.k-tick-large) {
    background: none;
}
.k-slider-horizontal.slider-tick-label-smallest li.k-tick.k-tick-large > .k-label {
    font-size: .45em; /*overriding 0.92em*/
}
.k-slider-horizontal.slider-tick-label-small li.k-tick.k-tick-large > .k-label {
    font-size: .7em; /*overriding 0.92em*/
}
.k-slider-horizontal .k-draghandle {
    width: 18px;
    height: 18px;
}


.k-rating {
    margin-top: 1em;
}


/********************* HTML Editor  *********************/
.k-editor.k-editor-widget {
    border-radius: 8px;
}
.k-editor .k-editable-area {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.k-editor .k-editor-toolbar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}



/********************* Timeline (since completely re-implemented  *********************/
.k-timeline-event .k-card-subtitle,
.k-timeline-event .k-card-description {
    font-size: 1.3em;
}
.k-timeline-track .k-timeline-circle {
    height: 36px;
    width: 36px;
    font-size: 14px; /*reset back to true 1em*/
    align-items: center;
    display: flex;
    justify-content: center;
}
.k-timeline-horizontal .k-timeline-track-wrap .k-timeline-track {
    margin-bottom: -10px;
}


/********************* HTML Editor  *********************/
body:not(.is-dark) form .k-toolbar .k-editor-widget .k-dropdown-wrap,
body:not(.is-dark) form .detail-form .k-editor-widget .k-dropdown-wrap {
    color: white;
}


/********************* Specific Right-Side Layout Overrides (with some generic disabled logic sprinkled in) *********************/

/*Make disabled a little more obvious - should this be global or just this layout??*/
/*Making these couple global because seems like will be global issue*/
.k-widget.disabled .k-state-disabled .k-select {
    display: none;
    width: 0;
}
/*TODO: Two different modes here, one we want this to be 1, and the other, like in a popup detail form, we want to be 0.6 - figure out how to isolate properly*/
.k-textbox:disabled, 
.k-textbox[disabled], 
.k-textbox.k-state-disabled {
     opacity: 0.6;  
}
/*Not sure why textbox has this inconsistently applied; revert Opacity from 0.6*/
.right-side-layout .k-textbox:disabled,
.right-side-layout .k-textbox[disabled],
.right-side-layout .k-textbox.k-state-disabled {
    opacity: 1;
}

/*TODO: Look into how this one has fallen thru but literally every other type has this set - possibly add it to the Kendo sources*/
.k-widget.k-textbox.disabled.k-state-disabled {
    border-bottom-style: dashed;
}


/*TODO: Do these only for inline read-only field but consider if want to be consistent*/
.label-inline-wrapper .k-widget.disabled .k-state-disabled,
.label-inline-wrapper .k-widget.disabled.k-state-disabled,
.label-inline-wrapper .k-widget.disabled input.disabled {
    border-bottom-width: 0;
    align-items: start;
}


/*Show or no? Could still be helpful to explain what field is and what means regardless if editable; but for now, just cleaning up and minimizing noise*/
/*TODO: Why is this in Kendo and not Standard?*/
div.disabled.label-inline-wrapper > .info-bubble {
    display: none;
}
div.disabled.label-inline-wrapper > h4.is-link {
    text-decoration: underline;
    -ms-text-underline-position: below;
    text-underline-position: under;
    cursor: pointer;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
div.disabled.label-inline-wrapper > h4.is-link:hover {
    opacity: 0.7;
}


/*TODO: Figure out why these next few only bork in Right-Side AND popups only; doesnt make sense what is different that is messing with inherit - also only in LIGHT mode, not dark*/
.k-textbox {
    border-color: inherit; /*from rgba(255, 255, 255, 0.7)*/
    color: inherit; /*from white*/
}
body:not(.is-dark) .k-dropdown .k-dropdown-wrap,
body:not(.is-dark) .k-dropdowntree .k-dropdown-wrap {
    border-color: inherit; /*from rgba(255, 255, 255, 0.7)*/
    color: inherit; /*from white*/
}
/*HACK HACK TODO: Just need to move on and punt for now - manually set color here but need to figure out what is overriding this on right-layout popups only, in dark mode*/
body.is-dark .k-dropdown .k-dropdown-wrap,
body.is-dark .k-dropdowntree .k-dropdown-wrap {
    border-color: #a2a5b9; /*from rgba(255, 255, 255, 0.7)*/
}
body:not(.is-dark) .k-dropdown .k-dropdown-wrap .k-select, 
body:not(.is-dark) .k-dropdowntree .k-dropdown-wrap .k-select {
    color: inherit; /*from rgba(255, 255, 255, 0.7)*/
}
.k-dropdown .k-dropdown-wrap:hover, 
.k-dropdowntree .k-dropdown-wrap:hover, 
.k-dropdown .k-dropdown-wrap.k-state-hover, 
.k-dropdowntree .k-dropdown-wrap.k-state-hover {
    border-color: inherit; /*from white*/
}
.k-dropdown .k-dropdown-wrap:hover .k-select, 
.k-dropdowntree .k-dropdown-wrap:hover .k-select, 
.k-dropdown .k-dropdown-wrap.k-state-hover .k-select, 
.k-dropdowntree .k-dropdown-wrap.k-state-hover .k-select {
    color: inherit; /*from white*/
    opacity: 0.7; /*added*/
}
/*HACK TODO: Figure out why these are all messed up; too many overrides and contexts overlapping likely*/
body.is-dark .k-dropdown .k-dropdown-wrap:hover .k-select,
body.is-dark .k-dropdowntree .k-dropdown-wrap:hover .k-select,
body.is-dark .k-dropdown .k-dropdown-wrap.k-state-hover .k-select,
body.is-dark .k-dropdowntree .k-dropdown-wrap.k-state-hover .k-select {
    opacity: 0.5; /*added*/
}

.k-dropdown .k-dropdown-wrap.k-state-focused .k-select, 
.k-dropdowntree .k-dropdown-wrap.k-state-focused .k-select,
.k-state-focused > .k-dropdown .k-dropdown-wrap .k-select,
.k-state-focused > .k-dropdowntree .k-dropdown-wrap .k-select {
    color: inherit; /*from white*/
}
.k-numerictextbox .k-numeric-wrap {
    border-color: inherit; /*from rgba(255, 255, 255, 0.7)*/
    color: inherit; /*from white*/
}
body:not(.is-dark) .k-numerictextbox .k-select {
    color: inherit; /*from rgba(255, 255, 255, 0.7)*/
}
.k-numerictextbox .k-numeric-wrap:hover,
.k-numerictextbox .k-numeric-wrap.k-state-hover {
    border-color: inherit; /*from white*/
}
.k-numerictextbox .k-select .k-link:hover,
.k-numerictextbox .k-select .k-link.k-state-hover {
    color: inherit; /*from white*/
    opacity: 0.7; /*added*/
}