.menu-item-selected::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background-color: #000;
    opacity: 0.2;
}

.grid-context-menu-item-full-expand,
.grid-context-menu-item-full-collapse,
.grid-context-menu-item-sort-ascending,
.grid-context-menu-item-sort-descending,
.grid-context-menu-item-group-by-column,
.grid-context-menu-item-ungroup-column,
.grid-context-menu-item-clear-grouping,
.grid-context-menu-item-show-group-panel,
.grid-context-menu-item-hide-column,
.grid-context-menu-item-column-chooser,
.grid-context-menu-item-fix-column-left,
.grid-context-menu-item-fix-column-right,
.grid-context-menu-item-unfix-column,
.grid-context-menu-item-clear-filter,
.grid-context-menu-item-expand-row,
.grid-context-menu-item-collapse-row,
.grid-context-menu-item-expand-detail-row,
.grid-context-menu-item-collapse-detail-row,
.grid-context-menu-item-new-row,
.grid-context-menu-item-edit-row,
.grid-context-menu-item-delete-row {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: gray;
}

.dropdown-item:active .grid-context-menu-item-full-expand,
.dropdown-item:active .grid-context-menu-item-full-collapse,
.dropdown-item:active .grid-context-menu-item-sort-ascending,
.dropdown-item:active .grid-context-menu-item-sort-descending,
.dropdown-item:active .grid-context-menu-item-group-by-column,
.dropdown-item:active .grid-context-menu-item-ungroup-column,
.dropdown-item:active .grid-context-menu-item-clear-grouping,
.dropdown-item:active .grid-context-menu-item-show-group-panel,
.dropdown-item:active .grid-context-menu-item-hide-column,
.dropdown-item:active .grid-context-menu-item-column-chooser,
.dropdown-item:active .grid-context-menu-item-fix-column-left,
.dropdown-item:active .grid-context-menu-item-fix-column-right,
.dropdown-item:active .grid-context-menu-item-unfix-column,
.dropdown-item:active .grid-context-menu-item-clear-filter,
.dropdown-item:active .grid-context-menu-item-expand-row,
.dropdown-item:active .grid-context-menu-item-collapse-row,
.dropdown-item:active .grid-context-menu-item-expand-detail-row,
.dropdown-item:active .grid-context-menu-item-collapse-detail-row,
.dropdown-item:active .grid-context-menu-item-new-row,
.dropdown-item:active .grid-context-menu-item-edit-row,
.dropdown-item:active .grid-context-menu-item-delete-row {
    background-color: white;
}

.dropdown-item.disabled .grid-context-menu-item-full-expand,
.dropdown-item.disabled .grid-context-menu-item-full-collapse,
.dropdown-item.disabled .grid-context-menu-item-sort-ascending,
.dropdown-item.disabled .grid-context-menu-item-sort-descending,
.dropdown-item.disabled .grid-context-menu-item-group-by-column,
.dropdown-item.disabled .grid-context-menu-item-ungroup-column,
.dropdown-item.disabled .grid-context-menu-item-clear-grouping,
.dropdown-item.disabled .grid-context-menu-item-show-group-panel,
.dropdown-item.disabled .grid-context-menu-item-unfix-column,
.dropdown-item.disabled .grid-context-menu-item-clear-filter,
.dropdown-item.disabled .grid-context-menu-item-expand-row,
.dropdown-item.disabled .grid-context-menu-item-collapse-row,
.dropdown-item.disabled .grid-context-menu-item-expand-detail-row,
.dropdown-item.disabled .grid-context-menu-item-collapse-detail-row,
.dropdown-item.disabled .grid-context-menu-item-new-row,
.dropdown-item.disabled .grid-context-menu-item-edit-row,
.dropdown-item.disabled .grid-context-menu-item-delete-row {
    background-color: #c3c2c2;
}

.grid-context-menu-item-full-expand {
    mask-image: url(../images/icons/full-expand.svg);
    -webkit-mask-image: url(../images/icons/full-expand.svg);
}

.grid-context-menu-item-full-collapse {
    mask-image: url(../images/icons/full-collapse.svg);
    -webkit-mask-image: url(../images/icons/full-collapse.svg);
}

.grid-context-menu-item-sort-ascending {
    mask-image: url(../images/icons/sort-ascending.svg);
    -webkit-mask-image: url(../images/icons/sort-ascending.svg);
}

.grid-context-menu-item-sort-descending {
    mask-image: url(../images/icons/sort-descending.svg);
    -webkit-mask-image: url(../images/icons/sort-descending.svg);
}

.grid-context-menu-item-group-by-column {
    mask-image: url(../images/icons/group-by-column.svg);
    -webkit-mask-image: url(../images/icons/group-by-column.svg);
}

.grid-context-menu-item-ungroup-column {
    mask-image: url(../images/icons/ungroup-column.svg);
    -webkit-mask-image: url(../images/icons/ungroup-column.svg);
}

.grid-context-menu-item-clear-grouping {
    mask-image: url(../images/icons/clear-grouping.svg);
    -webkit-mask-image: url(../images/icons/clear-grouping.svg);
}

.grid-context-menu-item-show-group-panel {
    mask-image: url(../images/icons/show-group-panel.svg);
    -webkit-mask-image: url(../images/icons/show-group-panel.svg);
}

.grid-context-menu-item-hide-column {
    mask-image: url(../images/icons/hide-column.svg);
    -webkit-mask-image: url(../images/icons/hide-column.svg);
}

.grid-context-menu-item-column-chooser {
    mask-image: url(../images/icons/column-chooser.svg);
    -webkit-mask-image: url(../images/icons/column-chooser.svg);
}

.grid-context-menu-item-fix-column-left {
    mask-image: url(../images/icons/fix-column-left.svg);
    -webkit-mask-image: url(../images/icons/fix-column-left.svg);
}

.grid-context-menu-item-fix-column-right {
    mask-image: url(../images/icons/fix-column-right.svg);
    -webkit-mask-image: url(../images/icons/fix-column-right.svg);
}

.grid-context-menu-item-unfix-column {
    mask-image: url(../images/icons/unfix-column.svg);
    -webkit-mask-image: url(../images/icons/unfix-column.svg);
}

.grid-context-menu-item-clear-filter {
    mask-image: url(../images/icons/clear-filter.svg);
    -webkit-mask-image: url(../images/icons/clear-filter.svg);
}

.grid-context-menu-item-expand-row {
    mask-image: url(../images/icons/expand-row.svg);
    -webkit-mask-image: url(../images/icons/expand-row.svg);
}

.grid-context-menu-item-collapse-row {
    mask-image: url(../images/icons/collapse-row.svg);
    -webkit-mask-image: url(../images/icons/collapse-row.svg);
}

.grid-context-menu-item-expand-detail-row {
    mask-image: url(../images/icons/expand-detail-row.svg);
    -webkit-mask-image: url(../images/icons/expand-detail-row.svg);
}

.grid-context-menu-item-collapse-detail-row {
    mask-image: url(../images/icons/collapse-detail-row.svg);
    -webkit-mask-image: url(../images/icons/collapse-detail-row.svg);
}

.grid-context-menu-item-new-row {
    mask-image: url(../images/icons/new-row.svg);
    -webkit-mask-image: url(../images/icons/new-row.svg);
}

.grid-context-menu-item-edit-row {
    mask-image: url(../images/icons/edit-row.svg);
    -webkit-mask-image: url(../images/icons/edit-row.svg);
}

.grid-context-menu-item-delete-row {
    mask-image: url(../images/icons/delete-row.svg);
    -webkit-mask-image: url(../images/icons/delete-row.svg);
}


.grid-context-menu-item-filter-row,
.grid-context-menu-item-footer {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.menu-item-selected .grid-context-menu-item-filter-row,
.menu-item-selected .grid-context-menu-item-footer {
    background-color: gray;
}

.menu-item-selected.dropdown-item:active .grid-context-menu-item-filter-row,
.menu-item-selected.dropdown-item:active .grid-context-menu-item-footer {
    background-color: white;
}

.menu-item-selected .grid-context-menu-item-filter-row,
.menu-item-selected .grid-context-menu-item-footer {
    mask-image: url(../images/icons/item-checked.svg);
    -webkit-mask-image: url(../images/icons/item-checked.svg);
}

.simple-exgrid-icon {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    min-width: 0.875rem;
    min-height: 0.875rem;
    background-size: contain;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    vertical-align: middle;
    opacity: 0.75;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.dxbl-grid-command-column-item:hover .simple-exgrid-icon {
    transform: scale(1.2);
    opacity: 1;
    color: var(--fluent-primary);
}

.simple-exgrid-icon-add {
    mask-image: url(../images/icons/new-row.svg);
    -webkit-mask-image: url(../images/icons/new-row.svg);
}

.simple-exgrid-icon-delete {
    mask-image: url(../images/icons/delete-row.svg);
    -webkit-mask-image: url(../images/icons/delete-row.svg);
}


.grid-icon {
    background-size: contain;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 16px;
    width: 16px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.dxbl-btn:hover .grid-icon {
    transform: scale(1.1);
    color: var(--fluent-primary);
}

.grid-icon-edit {
    -webkit-mask-image: url("../images/icons/edit-row.svg");
    mask-image: url("../images/icons/edit-row.svg");
}

.grid-icon-delete {
    -webkit-mask-image: url("../images/icons/grid-delete.svg");
    mask-image: url("../images/icons/grid-delete.svg");
}

.grid-icon-add {
    -webkit-mask-image: url("../images/icons/grid-add.svg");
    mask-image: url("../images/icons/grid-add.svg");
}

.tb-icon {
    background-size: contain;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 18px;
    width: 18px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, color 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}

/* Hover effects for toolbar and button icons */
.dxbl-toolbar-item:not(.dxbl-disabled) .tb-icon,
.dxbl-toolbar-item:not(.dxbl-disabled) .oi,
.dxbl-btn:not(.dxbl-disabled) .oi {
    opacity: 0.85;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, color 0.2s ease;
}

.dxbl-toolbar-item:not(.dxbl-disabled):hover .tb-icon,
.dxbl-toolbar-item:not(.dxbl-disabled):hover .oi,
.dxbl-btn:not(.dxbl-disabled):hover .oi {
    transform: scale(1.15);
    color: var(--fluent-primary);
    opacity: 1;
}

.icon-xls {
    -webkit-mask-image: url("../images/icons/xls.svg");
    mask-image: url("../images/icons/xls.svg");
}

.icon-pdf {
    -webkit-mask-image: url("../images/icons/pdf.svg");
    mask-image: url("../images/icons/pdf.svg");
}

.icon-csv {
    -webkit-mask-image: url("../images/icons/csv.svg");
    mask-image: url("../images/icons/csv.svg");
}

.icon-calculate {
    -webkit-mask-image: url("../images/icons/calculate.svg");
    mask-image: url("../images/icons/calculate.svg");
}

.icon-column-chooser {
    -webkit-mask-image: url("../images/icons/column_chooser.svg");
    mask-image: url("../images/icons/column_chooser.svg");
}

.icon-print {
    -webkit-mask-image: url("../images/icons/print.svg");
    mask-image: url("../images/icons/print.svg");
}

.icon-column-field {
    -webkit-mask-image: url("../images/icons/column_field.svg");
    mask-image: url("../images/icons/column_field.svg");
}

.icon-row-field {
    -webkit-mask-image: url("../images/icons/row_field.svg");
    mask-image: url("../images/icons/row_field.svg");
}

.icon-row-expand {
    -webkit-mask-image: url("../images/icons/expand.svg");
    mask-image: url("../images/icons/expand.svg");
}

.icon-filter {
    -webkit-mask-image: url("../images/icons/filter.svg");
    mask-image: url("../images/icons/filter.svg");
}

.icon-redirect {
    -webkit-mask-image: url("../images/icons/redirect.svg");
    mask-image: url("../images/icons/redirect.svg");
}

.icon-group-panel {
    -webkit-mask-image: url("../images/icons/group_panel.svg");
    mask-image: url("../images/icons/group_panel.svg");
}

.icon-remove-table {
    -webkit-mask-image: url("../images/icons/remove_table.svg");
    mask-image: url("../images/icons/remove_table.svg");
}

.icon-list {
    -webkit-mask-image: url("../images/icons/list.svg");
    mask-image: url("../images/icons/list.svg");
}

.icon-card {
    -webkit-mask-image: url("../images/icons/card.svg");
    mask-image: url("../images/icons/card.svg");
}

.icon-new-doc {
    -webkit-mask-image: url("../images/icons/new_doc.svg");
    mask-image: url("../images/icons/new_doc.svg");
}

.icon-copy {
    -webkit-mask-image: url("../images/icons/copy.svg");
    mask-image: url("../images/icons/copy.svg");
}

.icon-edit {
    -webkit-mask-image: url("../images/icons/edit.svg");
    mask-image: url("../images/icons/edit.svg");
}

.icon-cancel {
    -webkit-mask-image: url("../images/icons/cancel.svg");
    mask-image: url("../images/icons/cancel.svg");
}

.icon-save {
    -webkit-mask-image: url("../images/icons/save.svg");
    mask-image: url("../images/icons/save.svg");
}

.icon-delete {
    -webkit-mask-image: url("../images/icons/delete.svg");
    mask-image: url("../images/icons/delete.svg");
}

.icon-confirm {
    -webkit-mask-image: url("../images/icons/confirm.svg");
    mask-image: url("../images/icons/confirm.svg");
}

.icon-auto-new {
    -webkit-mask-image: url("../images/icons/auto_new.svg");
    mask-image: url("../images/icons/auto_new.svg");
}

.icon-simple {
    -webkit-mask-image: url("../images/logo.svg");
    mask-image: url("../images/logo.svg");
}

.normalize-btn-icon {
    -webkit-mask-image: url("../images/icons/normalize-btn.svg");
    mask-image: url("../images/icons/normalize-btn.svg");
}

.maximize-btn-icon {
    -webkit-mask-image: url("../images/icons/maximize-btn.svg");
    mask-image: url("../images/icons/maximize-btn.svg");
}

.icon-fingerprint,
.bi-fingerprint {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='black'%3E%3Cpath d='M481-781q106 0 200 45.5T838-604q7 9 4.5 16t-8.5 12q-6 5-14 4.5t-14-8.5q-55-78-141.5-119.5T481-741q-97 0-182 41.5T158-580q-6 9-14 10t-14-4q-7-5-8.5-12.5T126-602q62-85 155.5-132T481-781Zm0 94q135 0 232 90t97 223q0 50-35.5 83.5T688-257q-51 0-87.5-33.5T564-374q0-33-24.5-55.5T481-452q-34 0-58.5 22.5T398-374q0 97 57.5 162T604-121q9 3 12 10t1 15q-2 7-8 12t-15 3q-104-26-170-103.5T358-374q0-50 36-84t87-34q51 0 87 34t36 84q0 33 25 55.5t59 22.5q34 0 58-22.5t24-55.5q0-116-85-195t-203-79q-118 0-203 79t-85 194q0 24 4.5 60t21.5 84q3 9-.5 16T208-205q-8 3-15.5-.5T182-217q-15-39-21.5-77.5T154-374q0-133 96.5-223T481-687Zm0-192q64 0 125 15.5T724-819q9 5 10.5 12t-1.5 14q-3 7-10 11t-17-1q-53-27-109.5-41.5T481-839q-58 0-114 13.5T260-783q-8 5-16 2.5T232-791q-4-8-2-14.5t10-11.5q56-30 117-46t124-16Zm0 289q93 0 160 62.5T708-374q0 9-5.5 14.5T688-354q-8 0-14-5.5t-6-14.5q0-75-55.5-125.5T481-550q-76 0-130.5 50.5T296-374q0 81 28 137.5T406-123q6 6 6 14t-6 14q-6 6-14 6t-14-6q-59-62-90.5-126.5T256-374q0-91 66-153.5T481-590Zm-1 196q9 0 14.5 6t5.5 14q0 75 54 123t126 48q6 0 17-1t23-3q9-2 15.5 2.5T744-191q2 8-3 14t-13 8q-18 5-31.5 5.5t-16.5.5q-89 0-154.5-60T460-374q0-8 5.5-14t14.5-6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='black'%3E%3Cpath d='M481-781q106 0 200 45.5T838-604q7 9 4.5 16t-8.5 12q-6 5-14 4.5t-14-8.5q-55-78-141.5-119.5T481-741q-97 0-182 41.5T158-580q-6 9-14 10t-14-4q-7-5-8.5-12.5T126-602q62-85 155.5-132T481-781Zm0 94q135 0 232 90t97 223q0 50-35.5 83.5T688-257q-51 0-87.5-33.5T564-374q0-33-24.5-55.5T481-452q-34 0-58.5 22.5T398-374q0 97 57.5 162T604-121q9 3 12 10t1 15q-2 7-8 12t-15 3q-104-26-170-103.5T358-374q0-50 36-84t87-34q51 0 87 34t36 84q0 33 25 55.5t59 22.5q34 0 58-22.5t24-55.5q0-116-85-195t-203-79q-118 0-203 79t-85 194q0 24 4.5 60t21.5 84q3 9-.5 16T208-205q-8 3-15.5-.5T182-217q-15-39-21.5-77.5T154-374q0-133 96.5-223T481-687Zm0-192q64 0 125 15.5T724-819q9 5 10.5 12t-1.5 14q-3 7-10 11t-17-1q-53-27-109.5-41.5T481-839q-58 0-114 13.5T260-783q-8 5-16 2.5T232-791q-4-8-2-14.5t10-11.5q56-30 117-46t124-16Zm0 289q93 0 160 62.5T708-374q0 9-5.5 14.5T688-354q-8 0-14-5.5t-6-14.5q0-75-55.5-125.5T481-550q-76 0-130.5 50.5T296-374q0 81 28 137.5T406-123q6 6 6 14t-6 14q-6 6-14 6t-14-6q-59-62-90.5-126.5T256-374q0-91 66-153.5T481-590Zm-1 196q9 0 14.5 6t5.5 14q0 75 54 123t126 48q6 0 17-1t23-3q9-2 15.5 2.5T744-191q2 8-3 14t-13 8q-18 5-31.5 5.5t-16.5.5q-89 0-154.5-60T460-374q0-8 5.5-14t14.5-6Z'/%3E%3C/svg%3E");
}