/* Kendo specific css overrides */
.k-grid table[role=grid] tbody a:not(.k-button) {
    color: #3344db;
}

.k-grid table[role=grid] tbody a:not(.k-button):hover {
    color: #CC0000;
}

/* Fix telerik sortable columns to look like links. */
/* Todo: integrate into scss */
th a.k-link {
    color: #007bff;
}

th a.k-link:hover {
    color: #007bff;
    text-decoration: underline;
}

/* Fix telerik selected row to include detail. */
tr.k-master-row.k-state-selected + tr.k-detail-row > td {
    background-color: rgba(0, 123, 255, 0.25);
}

/* Tweak action buttons in grid (*or elswhere) to have larger icons */
/*div.k-grid tbody tr td a.k-button span.k-icon, */
a.k-button span.k-icon {
    font-size: 1.2em;
}

.k-dropdown.form-control .k-dropdown-wrap {
    background-color: rgba(0, 0, 0, 0)
}

.k-dropdown.form-control .k-state-hover {
    border-color: #e4e7eb;
}

.k-dropdown.form-control .k-state-hover.k-state-focused, .k-dropdown.form-control .k-state-focused {
    border-color: rgb(128,189,255);
}

.k-combobox > .k-dropdown-wrap,
.k-dropdown.form-control > .k-dropdown-wrap,
.k-datepicker > .k-picker-wrap,
.k-timepicker > .k-picker-wrap,
.k-datetimepicker > .k-picker-wrap,
.k-numerictextbox > .k-numeric-wrap,
.k-multiselect > .k-multiselect-wrap {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Fix whole bunch of telerik controls (that use spans inside spans) to show focus styles.*/
.k-combobox > .k-dropdown-wrap > input.k-input,
.k-dropdown.form-control,
.k-datepicker > .k-picker-wrap > .k-input,
.k-datepicker > .k-picker-wrap.k-state-focused > .k-input,
.k-timepicker > .k-picker-wrap.k-state-focused > .k-input,
.k-timepicker > .k-picker-wrap > .k-input,
.k-datetimepicker > .k-picker-wrap > .k-input,
.k-datetimepicker > .k-picker-wrap.k-state-focused > .k-input,
.k-numerictextbox > .k-numeric-wrap > .k-input,
.k-numerictextbox > .k-numeric-wrap.k-state-focused > .k-input {
    box-shadow: none;
    outline: none;
    border: none;
}

.k-combobox > .k-dropdown-wrap.k-state-focused,
.k-dropdown.form-control > .k-dropdown-wrap.k-state-focused,
.k-dropdown > .k-dropdown-wrap.k-state-focused,
.k-datepicker > .k-picker-wrap.k-state-focused,
.k-timepicker > .k-picker-wrap.k-state-focused,
.k-datetimepicker > .k-picker-wrap.k-state-focused,
.k-numerictextbox > .k-numeric-wrap.k-state-focused {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.k-multiselect.k-state-focused > .k-multiselect-wrap {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

div.k-upload {
    height: auto;
}

.k-dropdown.kendo-is-invalid .k-dropdown-wrap {
    border: 1px solid #dc3545;
}

.k-dropdown.kendo-is-valid .k-dropdown-wrap {
    border: 1px solid #28a745;
}

.k-dropdown.kendo-is-invalid span.k-input {
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.k-dropdown.kendo-is-valid span.k-input {
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


.k-dropdown.kendo-is-valid > .k-dropdown-wrap.k-state-focused,
.k-datepicker.kendo-is-valid > .k-picker-wrap.k-state-focused,
.k-timepicker.kendo-is-valid > .k-picker-wrap.k-state-focused,
.k-datetimepicker.kendo-is-valid > .k-picker-wrap.k-state-focused,
.k-numerictextbox.kendo-is-valid > .k-numeric-wrap.k-state-focused,
.k-combobox.kendo-is-valid > k-dropdown-wrap.k-state-focused,
.k-upload.kendo-is-valid:focus-within,
.k-dropdown.form-control.kendo-is-valid > k-dropdown-wrap.k-state-focused {
    border-color: #28a745;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* Some elements need .2 rem width instead of .25 */
.form-control.is-valid:focus,
.k-dropdown.kendo-is-valid > .k-dropdown-wrap.k-state-focused,
.k-multiselect.kendo-is-valid.k-state-focused > .k-multiselect-wrap {
    border-color: #28a745;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.k-dropdown.kendo-is-invalid > .k-dropdown-wrap.k-state-focused,
.k-datepicker.kendo-is-invalid > .k-picker-wrap.k-state-focused,
.k-timepicker.kendo-is-invalid > .k-picker-wrap.k-state-focused,
.k-datetimepicker.kendo-is-invalid > .k-picker-wrap.k-state-focused,
.k-numerictextbox.kendo-is-invalid > .k-numeric-wrap.k-state-focused,
.k-combobox.kendo-is-invalid > .k-dropdown-wrap.k-state-focused,
.k-upload.kendo-is-invalid:focus-within,
.k-dropdown.form-control.kendo-is-invalid > k-dropdown-wrap.k-state-focused {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
}

/* Some elements need .2 rem width instead of .25 */
.form-control.is-invalid:focus,
.k-dropdown.kendo-is-invalid > .k-dropdown-wrap.k-state-focused,
.k-multiselect.kendo-is-invalid.k-state-focused > .k-multiselect-wrap {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Tweak kendo numerictextbox for success and failure validation display */
.k-numerictextbox.kendo-is-valid,
.k-numerictextbox.kendo-is-invalid,
.k-datepicker.kendo-is-valid,
.k-datepicker.kendo-is-invalid,
.k-dropdown.kendo-is-valid,
.k-dropdown.kendo-is-invalid,
.k-timepicker.kendo-is-valid,
.k-timepicker.kendo-is-invalid,
k-datetimepicker.kendo-is-valid,
k-datetimepicker.kendo-is-invalid {
    background-image: none;
    padding-right: 0;
}

.k-picker-wrap.k-state-hover > .k-select, .k-numeric-wrap.k-state-hover > .k-select {
    background: #ced3db linear-gradient(180deg, #d5dae0, #ced3db) repeat-x;
}

.k-picker-wrap > .k-select, .k-picker-wrap > .k-select > .k-link, .k-numeric-wrap > .k-select {
    background-color: transparent;
    border-left-width: 1px;
    border-left-color: transparent;
}

.k-numeric-wrap > .k-select > .k-link-increase.k-state-selected {
    border-radius: 0 0.45rem 0 0;
}

.k-numeric-wrap > .k-select > .k-link-decrease.k-state-selected {
    border-radius: 0 0 0.45rem 0;
}

.k-picker-wrap > .k-select > .k-link:last-child {
    border-radius: 0 0.45rem 0.45rem 0;
}

.k-picker-wrap.k-state-hover > .k-select > .k-link {
    border-left-color: rgb(33, 37, 41);
    background: #ced3db linear-gradient(180deg, #d5dae0, #ced3db) repeat-x;
}

.k-picker-wrap.k-state-hover > .k-select > .k-link:first-child {
    border-left-color: transparent;
}

/* Tweak kendo maskedtextbox for no border for correct validation display */
.k-maskedtextbox {
    border: none;
}

.k-numerictextbox.form-control .k-numeric-wrap,
.k-datepicker.form-control .k-picker-wrap,
.k-timepicker.form-control .k-picker-wrap,
.k-datetimepicker.form-control .k-picker-wrap,
k-multiselect.form-control {
    border: none;
}

.k-multiselect.form-control .k-multiselect-wrap {
    padding: 0;
    height: auto;
}

/* Fixes Grid filter options to have some space */
.k-filter-menu-container input[type=radio] {
    margin: 4px;
}

/* Fixes kendo upload to have rounded corners. */
.k-upload {
    border-radius: .45rem;
}

/* Fix telerik button icons to be a bit more centered vertically */
.btn .k-icon {
    font-size: 1.2em;
    margin-top: -.2em;
}


/* Fix telerik grid error tooltips. */
tr.k-grid-edit-row div.k-tooltip-validation.k-invalid-msg {
    margin: 0 !important;
    margin-top: .5em !important;
    width: auto;
    margin-left: -.5rem;
}

tr.k-grid-edit-row span.k-dropdown + script + div.k-tooltip-validation.k-invalid-msg {
    margin-top: 1em !important;
}

.k-grid a.btn-primary {
    color: #fff;
}


/* Fix telerik grid buttons to have cursor showing you can't do something. */
a.k-button[disabled], a.btn[disabled], button.btn[disabled], button.k-button[disabled] {
    cursor: not-allowed;
    pointer-events: all;
}

.k-GridScrollContainer {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* Fix header sort arrows and filter button positions */
.k-grid th, .k-grid td {
    padding: .5rem;
}

.k-grid > table:first-child > thead.k-grid-header th .k-grid-filter {
    bottom: inherit;
    top: 1px;
    padding: 0;
    right: .2rem;
    height: calc(100% - 2px);
    position: absolute;
    margin: 0;
}

/* Fix .k-command-cell (edit, delete, update, etc. dynamically) spacing */
.k-command-cell > .k-button {
    margin-top: auto;
    margin-bottom: auto;
}

.k-command-cell > .k-button:last-child {
    margin-right: 0;
}

.k-grid-header .k-with-icon, .k-grid-header .k-filterable {
    padding-right: calc( calc( 1 * ( 2px + 0.75rem + 1.5em )) + 0.75rem);
}

.k-grid-header .k-header > .k-link > .k-icon.k-i-sort-desc-sm, .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-asc-sm {
    padding-top: .2rem;
    margin-left: .25rem;
}
/* Fix telerik combobox to match bootstrap 4 custom ddl style */
span.k-combobox > span > span.k-select > span.k-i-arrow-60-down:before, .k-dropdown.form-control > .k-dropdown-wrap > .k-select > .k-i-arrow-60-down:before {
    content: none;
}

.k-combobox > .k-dropdown-wrap > .k-select > .k-i-arrow-60-down, .k-dropdown.form-control > .k-dropdown-wrap > .k-select > .k-i-arrow-60-down {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-size: 8px 10px;
    background-origin: padding-box;
    background-clip: border-box;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: transparent;
    background-position-x: center;
}

.k-combobox > .k-dropdown-wrap > .k-select, .k-combobox > .k-dropdown-wrap > .k-select:hover, .k-combobox :hover .k-select, .k-combobox .k-state-active .k-select {
    background-color: transparent;
    border: none;
}

.k-combobox > .k-dropdown-wrap.k-state-disabled {
    background-color: #e9ecef;
}


.k-upload .k-upload-files .k-file-state {
    width: 0;
    display: inline-block;
}

.k-upload .k-upload-files .k-file {
    flex-direction: column;
}

.k-upload .k-upload-files .k-file > div {
    align-self: flex-start;
    display: inline-flex;
    max-width: 100%;
}

.k-upload .k-upload-files .k-file > div .k-file-group-wrapper .k-icon {
    font-size: 2.75rem;
    color: rgba(0,0,0,.5);
}

.k-upload .k-upload-files .k-file .k-file-name-size-wrapper {
    margin-left: .25rem;
    margin-right: 20px;
}

.k-widget.k-upload.k-dropzone-active, .k-widget.k-upload.k-dropzone-active .k-upload-files li {
    background-color: rgba(0,255,0,.25);
}

/* Tweak kendo numberictextbox to have minimum width */
.k-numerictextbox {
    min-width: 150px;
}

/* Tweak kendo multiselect to have height auto instead of default (bootstrap form-control) fixed height */
.k-multiselect {
    height: auto;
}

.k-button[disabled] {
    opacity: .65;
    filter: grayscale(.1);
}