:root,
[data-bs-theme=light] {
    /*--bs-blue: #7989ff;*/
    /*--bs-blue: #25476a !important;*/ /*Nifty blue*/
}

.dxbl-text-edit {
    border-bottom-color: #d6d6d6;
    /*--dxbl-text-edit-color : #161616;*/
    --dxbl-text-edit-bg: #f7f7f7;
    /*--dxbl-text-edit-disabled-bg: ;*/
}
    /*Editors: input, textarea, combo*/
    /*.dxbl-text-edit > .dxbl-text-edit-input, .dxbl-text-edit.dxbl-memo-edit > textarea,
    dxbl-combo-box.dxbl-text-edit > .dxbl-text-edit-template, input.dxbl-text-edit-input
    dxbl-combo-box.dxbl-text-edit > .dxbl-text-edit-input,
    .dxbl-html-editor .dxbl-widget-container .dx-htmleditor-content {
        background-color: #f7f7f7;*/ /*same as --dxbl-btn-secondary-hover-bg*/
    /*}*/

    /*.dxbl-html-editor .dxbl-widget-container .dx-htmleditor-content {
    color: #161616;
}*/

    .dxbl-text-edit.dxbl-readonly {
        border: 0px solid white;
    }

    .dxbl-text-edit.dxbl-disabled {
        --dxbl-text-edit-disabled-root-bg: #f9f9f9;
    }

dxbl-input-editor.dxbl-text-edit > .dxbl-text-edit-input[readonly], dxbl-input-editor.dxbl-text-edit > textarea[readonly],
dxbl-combo-box.dxbl-text-edit.dxbl-readonly > .dxbl-text-edit-input[readonly],
dxbl-html-editor.dxbl-html-editor > .dxbl-widget-container > textarea.dx-htmleditor-submit-element[readonly] {
    cursor: default;
    background-color: white;
}

.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon).dxbl-disabled,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):disabled,
dxbl-date-edit.dxbl-readonly.dxbl-text-edit > .dxbl-btn-group.dxbl-btn-group-right > button.dxbl-btn.dxbl-disabled.dxbl-edit-btn-dropdown,
dxbl-spinedit.dxbl-readonly.dxbl-text-edit > .dxbl-btn-group-vertical.dxbl-btn-group-right > button.dxbl-btn.dxbl-disabled {
    display: none;
}

.dxbl-text-edit > .dxbl-btn, .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn, .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn {
    --dxbl-btn-bg: white;
}

dxbl-date-edit.dxbl-disabled.dxbl-text-edit > .dxbl-btn-group.dxbl-btn-group-right > button.dxbl-btn.dxbl-disabled.dxbl-edit-btn-dropdown {
    display: block;
}

.dxbl-text-edit-custom-filter {
    background-color: white;
}

/*#region Listbox */

/*.dxbl-list-box {
    --dxbl-list-box-item-selected-bg: #f7f7f7;
    --dxbl-list-box-item-selected-color: white;
}*/

/*.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected,
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected {
    position: relative;
    background-color: white;
    color: #212529;
}*/

/*.dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover,
.dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] >
.dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover {
    position: relative;
    background-color: var(--dxbl-list-box-item-selected-bg, unset);
    color: #212529 !important;
}*/

/*.dxbl-list-box-render-container {
    --dxbl-list-box-item-selected-color: #212529 !important;
    --dxbl-list-box-item-selected-hover-color: #212529 !important;
}*/

/*#endregion Listbox*/


/*#region Menu grid*/

.dxbl-grid.menu {
    border-top: transparent !important;
    
    --dxbl-grid-font: #212529;
    --dxbl-grid-bg: #f9f9f9;
    --dxbl-grid-border-color: #f2f2f2; /* top line of the grid sme color as the header so it's not noticeable */

    --dxbl-pager-active-page-btn-bg-custom: #f2f2f2;
    --dxbl-tabs-tab-default-active-color: var(--dxbl-grid-font);
    --dxbl-grid-row-bg: #f9f9f9;
    --dxbl-text-edit-btn-bg: var(--dxbl-text-edit-bg);
    --dxbl-grid-search-box-container-padding-y: 10px;
    --dxbl-grid-search-box-container-padding-x: 0px;

    --dxbl-grid-focus-bg: white;
    --dxbl-grid-search-bg: white;
    --dxbl-grid-focus-color: --dxbl-grid-font;
    --dxbl-grid-selection-focus-dark-bg: white;
    --dxbl-grid-selection-focus-dark-color: #212529;
}
    /*header*/
    /*.dxbl-grid.menu > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
        display: none;
    }
    */
    .dxbl-grid.menu, .dxbl-grid.menu, .dxbl-grid table.dxbl-grid-table {
        border-top-style: none !important;
        border-bottom-style: none !important;
    }

    .dxbl-grid.menu .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) {
        font-weight: 600;
    }

    /*search box*/
        .dxbl-grid.menu > .dxbl-grid-top-panel > .dxbl-grid-search-box-container > .dxbl-grid-search-box > .dxbl-text-edit-input,
        .dxbl-grid.menu > .dxbl-grid-top-panel > .dxbl-grid-search-box-container > .dxbl-grid-search-box > .dxbl-btn-icon {
            background-color: var(--dxbl-grid-search-bg) !important;
        }

    .dxbl-grid.menu > .dxbl-grid-top-panel > .dxbl-grid-search-box-container {
        padding-right: 6px !important;
        padding-bottom: 5px;
    }

        .dxbl-grid.menu .dxbl-grid-table > tbody > tr > td.dxbl-grid-indent-cell {
            background-color: var(--dxbl-grid-bg) !important;
        }

    /*.dxbl-grid.menu .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) {*/
        /*background-color: var(--dxbl-grid-selection-focus-dark-bg);
        color: var(--dxbl-grid-selection-focus-dark-color);*        
    }*/

/*#endregion*/
.dxbl-grid {
    --dxbl-grid-font: #212529;
    --dxbl-grid-border-color: #f2f2f2; /* top line of the grid sme color as the header so it's not noticeable */
    --dxbl-grid-focus-bg: #f9f9f9;
    --dxbl-grid-focus-color: #212529;
    --dxbl-pager-active-page-btn-bg: #f2f2f2;
    --dxbl-tabs-tab-default-active-color: var(--dxbl-grid-font);
    border-top: var(--dxbl-grid-border-width) var(--dxbl-grid-border-style) var(--dxbl-grid-border-color) !important;
}

    .dxbl-grid, .dxbl-grid.menu, .dxbl-grid table.dxbl-grid-table {
        border-left-style: none !important;
        border-right-style: none !important;
    }

        .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) {
            font-weight: 600;
        }

        .dxbl-grid .dxbl-grid-header-row {
            border-color: rgba(0, 0, 0, 0.125) !important; /*darker color to make the difference between the header and the first selected row in the grid */
            background-color: #fbfbfb !important;
        }

        /*edition mode row*/
        .dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell), .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
            /*to make this works a parent should have position: relative and z-index: 0 
            http://www.independent-software.com/set-stacking-order-of-pseudo-elements-below-parent-element.html */
            position: relative;
            background-color: #f3f3f3 !important; 
        }

        .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) .dxbl-btn.dxbl-btn-link,
        .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) .dxbl-btn.dxbl-btn-outline-link,
        .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) .dxbl-btn.dxbl-btn-text-link {
            --dxbl-btn-color: --dxbl-grid-focus-color-custom !important;
            --dxbl-btn-hover-color: --dxbl-grid-focus-color-custom !important;
        }

        /*style for checkmark on the focused grid row */
        .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) .dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
            --dxbl-checkbox-check-element-bg: var(--dxbl-checkbox-check-element-check-icon-primary-color-custom);
            --dxbl-checkbox-check-element-check-icon-color: var(--dxbl-grid-font);
            --dxbl-checkbox-check-element-border: 1px solid var(--dxbl-checkbox-check-element-border);
        }

/*style for the checked item  */
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-checked {
    --dxbl-checkbox-check-element-bg: var(--dxbl-checkbox-check-element-check-icon-primary-color-custom);
    --dxbl-checkbox-check-element-check-icon-color: var(--dxbl-grid-font);
    --dxbl-checkbox-check-element-border: 1px solid var(--dxbl-checkbox-check-element-border);
    --dxbl-checkbox-hover-check-element-border: var(--dxbl-checkbox-primary-checked-hover-check-element-border);
    --dxbl-checkbox-hover-check-element-bg: var(--dxbl-checkbox-check-element-check-icon-primary-color-custom);
}

/*style for active checked element*/
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) .dxbl-checkbox-checked .dxbl-checkbox-check-element {
    --dxbl-checkbox-check-element-border: 1px solid var(--dxbl-checkbox-check-element-border);
}

/*.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-focused-row > td .dxbl-checkbox .dxbl-checkbox-check-element, .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td .dxbl-checkbox .dxbl-checkbox-check-element, .dxbl-grid .dxbl-grid-table > tfoot > tr.dxbl-grid-focused-row > td .dxbl-checkbox .dxbl-checkbox-check-element {
    color: var(--dxbl-grid-color);*/ /*not changed yet*/
/*outline: 1px solid var(--dxbl-grid-bg);
}*/


/*#region grid pagination */
.dxbl-grid .dxbl-pager-container {
    justify-content: flex-end !important; /*original is space-between*/
}

.dxbl-grid .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn:not(.dxbl-disabled):not(:disabled):hover {
    position: relative;
    background-color: var(--dxbl-pager-active-page-btn-bg-custom) !important;
    color: var(--dxbl-grid-font) !important;
}

.dxbl-grid .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: var(--dxbl-pager-active-page-btn-bg-custom);
    --dxbl-btn-color: var(--dxbl-grid-font) !important;
    --dxbl-btn-disabled-bg: var(--dxbl-pager-active-page-btn-bg-custom);
    --dxbl-btn-disabled-color: var(--dxbl-pager-active-page-btn-color);
    --dxbl-btn-disabled-background: none;
    --dxbl-pager-page-btn-hover-bg: var(--dxbl-pager-active-page-btn-bg-custom);
    --dxbl-pager-page-btn-hover-color: var(--dxbl-pager-active-page-btn-bg-custom);
    cursor: default;
}
/*#endregion*/

/*#region Tabs*/
.dxbl-tabs .dxbl-tabs-item.dxbl-active {
    --dxbl-tabs-tab-color: #161616; /*same as --dxbl-tabs-tab-selected-hover-color*/
}

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(.dxbl-disabled):not(:disabled):not(.dxbl-disabled):not(:disabled)::before, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(.dxbl-disabled):not(:disabled):not(.dxbl-disabled):not(:disabled)::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-tabs-tab-border-width, 0px)));
    top: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-tabs-tab-border-width, 0px)));
    right: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-tabs-tab-border-width, 0px)));
    bottom: calc(0px - var(--dxbl-border-width-with-scaling, var(--dxbl-tabs-tab-border-width, 0px)));
    border-radius: inherit;
    background-color: #000;
    opacity: 8%; /*increase the value to make tabs background darker*/
}
/*#endregion Tabs*/

/*#region Splitter*/
.dxbl-splitter {
    --dxbl-splitter-pane-padding-y: 0px;
    --dxbl-splitter-pane-padding-x: 0px;
}

/*.dxbl-splitter > .dxbl-splitter-pane > .dxbl-splitter-pane-content {
    height: 100%;
    padding: var(--dxbl-splitter-pane-padding-y) var(--dxbl-splitter-pane-padding-x);
    width: 100%;
}*/

/*#endregion Splitter*/


/*#region Treeview */
.dxbl-treeview .dxbl-treeview-item .dxbl-treeview-item-container:not(.dxbl-disabled).dxbl-active {
    --dxbl-treeview-item-color: #161616;
    --dxbl-treeview-item-bg: white;
}
/*#endregion Treeview */

/*#region  */
.btn-secondary:not(:disabled):not(.disabled):active, :not([class*=input-group]) > .btn-secondary:focus {
    background-color: #26a69a !important;
    border-color: #26a69a !important;
    color: white !important;
}

:not([class*=input-group]) > .btn-secondary:focus, :not([class*=input-group]) > .btn-secondary.focus, :not([class*=input-group]) > .btn-secondary:not(:disabled):not(.disabled):hover {
    background-color: #208d83 !important;
    border-color: #1e857b !important;
}

.dxbl-checkbox {
    --dxbl-checkbox-radio-checked-border-color: rgba(242, 242, 242, 0.5) !important;
    --dxbl-checkbox-radio-check-bg: rgba(242, 242, 242, 0.5) !important;
}
/*html editor colorpicker*/
/*this is section of css is regarding the colorpickers dropdown in the html editor*/
.dx-blazor-colorpicker {
    padding: 0.5rem;
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    .dx-blazor-colorpicker .dx-blazor-colorpicker-custom-color-area {
        margin-top: 0.5rem;
    }

        .dx-blazor-colorpicker .dx-blazor-colorpicker-custom-color-area .btn {
            width: 100%;
        }

        .dx-blazor-colorpicker .dx-blazor-colorpicker-custom-color-area .dx-blazor-colorpicker-table {
            margin-top: 0.5rem;
        }

.dx-blazor-colorpicker-automatic-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 0.5rem;
    cursor: pointer;
}

    .dx-blazor-colorpicker-automatic-container .dx-blazor-colorpicker-cell {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

.dx-blazor-colorpicker-automatic-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-blazor-colorpicker-table {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.dx-blazor-colorpicker-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .dx-blazor-colorpicker-row:not(:last-child) {
        margin-bottom: 0.25rem;
    }

.dx-blazor-colorpicker-cell {
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
}

    .dx-blazor-colorpicker-cell:not(:last-child) {
        margin-right: 0.25rem;
    }

    .dx-blazor-colorpicker-cell.dx-blazor-colorpicker-selected-color {
        outline: 2px solid var(--primary);
        outline-offset: -1px;
    }

    .dx-blazor-colorpicker-cell:hover {
        outline: 2px solid var(--primary);
        outline-offset: -1px;
    }

.dx-blazor-colorpicker-pallete {
    width: 12.5rem;
    height: 12.5rem;
    position: relative;
    cursor: crosshair;
}

.dx-blazor-colorpicker-pallete-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dx-blazor-colorpicker-pallete-gradient-white {
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(white));
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#fff));
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
    background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff);
}

.dx-blazor-colorpicker-pallete-gradient-black {
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
}

.dx-blazor-colorpicker-hue-scale-wrapper {
    height: 12.5rem;
    width: 1.75rem;
    margin-left: 0.5rem;
    position: relative;
}

.dx-blazor-colorpicker-hue-scale {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
    background-image: -webkit-linear-gradient(bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background-image: -o-linear-gradient(bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background-image: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
}

.dx-blazor-colorpicker-custom-color {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.dx-blazor-colorpicker-hue-selection-rect {
    position: absolute;
    width: 100%;
    left: 0;
    height: 0.65rem;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    z-index: 1;
}

.dx-blazor-colorpicker-color-selection {
    position: absolute;
    width: 1rem;
    height: 1rem;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.dx-blazor-colorpicker-editors-container {
    padding-top: 0.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .dx-blazor-colorpicker-editors-container .dxbs-textbox:first-child {
        padding-bottom: 0.35rem;
    }

.dx-blazor-colorpicker-btn-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

    .dx-blazor-colorpicker-btn-container .btn:first-child {
        margin-right: 0.25rem;
    }