.dw-grid {
    --dxbl-grid-focus-frame-color: var(--border-border-color-50);
    /* Header */
    --dxbl-grid-header-font-weight: 500;
    --dxbl-grid-header-bg: var(--neutrals-neutral-2);
    --dxbl-grid-header-color: var(--text-text_primary);
    /* Border */
    --dxbl-grid-border-width: 0.5px;
    --dxbl-grid-border-color: var(--border-border_light);
    /* Text*/
    --dxbl-grid-text-cell-padding-x: 8px;
    --dxbl-grid-text-cell-padding-y: 8px;
    --dxbl-grid-font-size: 16px;
    --dxbl-grid-line-height: normal;
    --dxbl-grid-color: var(--text-text_tertiary);
    --dxbl-grid-expand-btn-padding-x: 1px;
    --dxbl-grid-expand-btn-padding-y: 1px;
    /* Filter Input */
    --dxbl-grid-editor-cell-padding-x: 0px;
    --dxbl-grid-editor-cell-padding-y: 0px;
    --dxbl-text-edit-color: var(--text-text_tertiary);
    /* Grid Detail */
    --dxbl-grid-detail-cell-padding-x: 0;
    --dxbl-grid-detail-cell-padding-y: 0;
}

.dw-grid-nested-1 {
    --dxbl-grid-header-bg: var(--neutrals-neutral-1);
}

.dw-grid-nested-2 {
    --dxbl-grid-header-bg: var(--neutrals-light-2);
}

.dw-grid .dxbl-grid-detail-cell {
    --dxbl-grid-header-bg: var(--neutrals-neutral-2);
}


/* Pager */
.dw-grid .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-page-btn {
    --dxbl-btn-bg: var(--neutrals-Light);
    --dxbl-btn-color: var(--text-text_primary);
    --dxbl-btn-disabled-bg: var(--button-bt_disable);
    --dxbl-btn-disabled-color: var(--text-text_disable);
    --dxbl-pager-page-btn-hover-bg: var(--button-bt_light_hv);
    --dxbl-pager-page-btn-hover-color: var(--text-text_primary);
    font-weight: 500;
}

.dw-grid .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: var(--button-bt_primary);
    --dxbl-btn-color: var(--text-text_primary);
    --dxbl-btn-disabled-bg: var(--button-bt_disable);
    --dxbl-btn-disabled-color: var(--text-text_disable);
    --dxbl-pager-page-btn-hover-bg: var(--button-bt_primary_hv);
    --dxbl-pager-page-btn-hover-color: var(--text-text_primary);
}

.dw-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
    background-color: transparent;
    opacity: 1;
}

.dw-grid table tr td a {
    color: var(--icons-icons_neutral);
}

.dw-grid .dxbl-grid-table .dxbl-grid-expand-button-cell + td {
    border-left: solid 0.5px var(--border-border_light);
}

.dw-grid .dxbl-grid-table .dxbl-grid-expand-button-cell .dxbl-grid-expand-button svg {
    width: 20px;
    height: 20px;
}

.dw-grid .dxbl-grid-table > tbody > tr > td > a {
    color: var(--icons-icons_neutral);
}

.dw-grid .dxbl-grid-table thead tr th .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: var(--button-bt_primary);
}

.dw-grid .dxbl-grid-table thead tr th .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate:not(.dxbl-disabled):not(:disabled):hover .dxbl-checkbox-check-element {
    background: var(--button-bt_primary_ac);
}

.dw-grid .dxbl-grid-table thead tr th .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-indeterminate .dxbl-checkbox-check-element::before {
    width: 10px;
    height: 2px;
}

.dw-grid .dxbl-grid-table > tbody > tr > td dxbl-check svg {
    fill: #FFF;
    stroke: #FFF;
}

.dw-grid .dxbl-grid-table > thead .dxbl-grid-filter-row td > dxbl-input-editor {
    padding: 0.25003125rem 0.375rem 0.25003125rem 0.375rem;
}

    .dw-grid .dxbl-grid-table > thead .dxbl-grid-filter-row td > dxbl-input-editor dxbl-spinedit {
        margin: 0 4px 0 2px;
    }

    .dw-grid .dxbl-grid-table > thead .dxbl-grid-filter-row td > dxbl-input-editor .dxbl-text-edit-input,
    .dw-grid .dxbl-grid-table > thead > tr.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell) > .dxbl-text-edit {
        border-radius: 4px;
        border: 1px solid var(--border-border_light);
        background: var(--neutrals-Light);
    }

.dw-grid .dxbl-grid-table > thead > tr.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell) > .dxbl-text-edit {
    width: calc(100% - 2px);
}

.dw-grid-form-edit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(312px), 1fr));
    gap: 16px 24px;
}

.start-edit-grid-button {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border-radius: 100%;
}

    .start-edit-grid-button i {
        font-size: 18px;
        color: var(--icons-icons_neutral);
    }

    .start-edit-grid-button:hover {
        background-color: #eeeeee;
    }

/* Nested Grid Padding */
.dw-grid .dxbl-grid-table .dxbl-grid-detail-cell {
    padding: 0 0 0 24px;
}

.background-light-1 {
    background-color: var(--neutrals-light-1);
}



.dw-grid-light {
    border-collapse: collapse;
    border: none;
    background: var(--surface-surface-light-2, #ECEBEB);
}

    .dw-grid-light .dxbl-grid-empty-data-area {
        padding: 0 !important;
    }

    .dw-grid-light > .dxbl-scroll-viewer {
        background-color: var(--surface-surface-light-2, #ECEBEB);
    }

        .dw-grid-light > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th:first-child {
            background: white;
            border: none;
            background: var(--surface-surface-light-2, #ECEBEB);
            border-top: 1px solid var(--border-border_light);
        }

    .dw-grid-light .dxbl-grid-table > thead > tr:last-child > th {
        background: white;
        border: none;
        border-top: 1px solid var(--border-border_light);
    }

    .dw-grid-light .dxbl-grid-table > tbody > tr > td {
        background: white;
        border: none;
        border-top: 1px solid var(--border-border_light);
        background: var(--surface-surface-light-2, #ECEBEB);
    }