/*
    !IMPORTANT:
    Due to the nature of blazor and telerik code generation, CSS isolation is not working correctly when combining these components.
    Therefore the best practice we state that all CSS is to be defined in global CSS classes.
    This should work in all situations however keep in mind, when using global CSS classes be wary of conflicts with existing CSS tags.

    For more info see: https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
*/

.padding-left-zero {
    padding-left: 0px;
}

.textarea-height {
    height: 86px;
}

.text-align-right,
.text-align-right input {
    text-align: right;
}

.button-width {
    width: 100%;
}

.cell-changed,
.cell-changed input {
    font-weight: bold !important;
    color: #23bde0 !important;
    border-color: black !important;
}

.cell-changed-sticky,
.k-grid-content-sticky.cell-changed-sticky,
.k-grid-content-sticky.cell-changed-sticky:hover {
    font-weight: bold !important;
    color: #23bde0 !important;
    border-color: black !important;
}

.cell-deleted,
.cell-deleted input {
    font-weight: bold !important;
    font-style: italic;
    color: #23bde0 !important;
    text-decoration-line: line-through;
    border-color: black !important;
}

.cell-deleted-sticky,
.k-grid-content-sticky.cell-deleted-sticky,
.k-grid-content-sticky.cell-deleted-sticky:hover {
    font-weight: bold !important;
    font-style: italic;
    color: #23bde0 !important;
    text-decoration-line: line-through;
    border-color: black !important;
}

.cell-error,
.cell-error input {
    font-weight: bold !important;
    color: red !important;
    border-color: black !important;
}

.cell-error-sticky,
.k-grid-content-sticky.cell-error-sticky,
.k-grid-content-sticky.cell-error-sticky:hover {
    font-weight: bold !important;
    color: red !important;
    border-color: black !important;
}

.display-flex {
    display: flex;
    justify-content: space-between;
}

.cursor-pointer {
    cursor: pointer;
}





/* previous rendering */
.cell-changed-nb,
.cell-changed-nb input {
    font-weight: bold !important;
    color: #23bde0;
}

.cell-changed-nb-sticky,
.k-grid-content-sticky.cell-changed-nb-sticky,
.k-grid-content-sticky.cell-changed-nb-sticky:hover {
    font-weight: bold !important;
    color: #23bde0;
}

.cell-deleted-nb,
.cell-deleted-nb input {
    font-weight: bold !important;
    font-style: italic;
    color: #23bde0;
    text-decoration-line: line-through;
}

.cell-deleted-nb-sticky,
.k-grid-content-sticky.cell-deleted-nb-sticky,
.k-grid-content-sticky.cell-deleted-nb-sticky:hover {
    font-weight: bold !important;
    font-style: italic;
    color: #23bde0;
    text-decoration-line: line-through;
}

.cell-error-nb,
.cell-error-nb input {
    font-weight: bold !important;
    color: red;
}

.cell-error-nb-sticky,
.k-grid-content-sticky.cell-error-nb-sticky,
.k-grid-content-sticky.cell-error-nb-sticky:hover {
    font-weight: bold !important;
    color: red;
}


.grid-no-scroll .k-grid-content {
    overflow-y: auto;
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
    padding-right: 0; /* version 2.26 and older requires !important here */
}

.grid-no-scroll .k-grid-header-wrap,
.grid-no-scroll .k-grid-footer-wrap {
    border-right-width: 0;
}








.validation-zi-warning,
.validation-zi-warning input {
    color: red;
}

.validation-hi-error,
.validation-hi-error input {
    background-color: red;
    color: white;
}

.no-dropdown-icon {
    padding-right: 4px;
}

.no-dropdown-icon .k-input-button {
    display: none;
}

.toolbar-items-height {
    height: 30.67px;
}

.button-no-padding {
    padding: 0px !important;
}

.tbl-head-toolbar {
    width: 100%;
    height: 40px;
    padding: 0px !important;
}

.window-width {
    max-width: 536px;
}

.hidden {
    display: none;
}

.cell-content-width {
    width:100%;
}

.margin-filter-text {
    margin-top: 6px;
    margin-bottom: 6px;
}

.k-window .k-edit-form-container {
    max-height: 90vh;
    overflow: auto;
    overflow-x: hidden;
}

.bool-edit-style {
    padding-left: 8px;
}

div.smallerFont .crud-buttons {
    height: 20px;
    padding: 2px;
}

div.smallerFont .to-be-saved {
    background-color: #23bde0; /*@GlobalConstants.BackgroundColor;*/
}

div.smallerFont .to-be-saved-error {
    background-color: red; /*@GlobalConstants.ErrorColor;*/
}

div.smallerFont .checked-color {
    font-weight: bold;
    color: #23bde0; /*@GlobalConstants.Color;*/
}

div.smallerFont .important-color {
    background-color: #23bde0; /*@GlobalConstants.Color;*/
}

div.smallerFont .error-color {
    background-color: red; /*@GlobalConstants.Color;*/
}

div.smallerFont .overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.smallerFont .k-grid th {
    padding: 2px 5px 2px 5px;
}

div.smallerFont .t-button {
    height: 20px;
    background-color: transparent;
    padding: 2px;
    border-color: transparent;
}

div.smallerFont .k-grid-toolbar {
    padding: 4px 4px;
}

div.smallerFont .grid-detail-padding {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #dee2e6;
}

div.smallerFont,
div.smallerFont .k-filtercell * {
    font-size: 9pt;
}

    div.smallerFont .background-color-readonly {
        background-color: gainsboro !important;
    }

    div.smallerFont .k-header {
        height: 32px;
        font-size: 10pt;
    }

    div.smallerFont .t-button .k-button {
        height: 20px;
        font-size: 9pt;
    }

    /*  One example for altering content inside the cells - the inputs in InCell editing mode here
        You can create similar rules as needed by inspecting the rendered HTML. This blog can help you do that
        https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools
    */

div.smallerFont .k-grid-edit-row .k-table-td {
    padding: 0px 4px 0px 4px !important;
}

    div.smallerFont .k-grid-edit-cell input {
        padding: 0px 0px 0px 0px !important;
        font-size: 9pt;
    }
/*
div.smallerFont.k-grid .k-grid-header .k-table-th {
    vertical-align: middle;
}*/

div.smallerFont.k-grid th {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
    padding-top: 4px;
}

    div.smallerFont.k-grid td {
        padding: 0px 4px 0px 4px !important;
        font-size: 9pt;
        border-left: 1px solid;
        border-right: 1px solid;
        border-color: rgba(0, 0, 0, 0.08);
    }