{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-virtual-scrolling",
  "framework": "angular",
  "type": "registry:component",
  "component": "Grid",
  "variant": "virtual-scrolling",
  "dependencies": [
    "@syncfusion/ej2-angular-grids"
  ],
  "description": "Data grid with virtual scrolling that lazy-loads a large order dataset and reports load timing.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/grid-virtual-scrolling.md"
  },
  "files": [
    {
      "target": "src/components/grid-virtual-scrolling/virtualization.component.ts",
      "content": "import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';\nimport { VirtualScrollService, GridComponent, EditService, ToolbarService, GridModule, LoadEventArgs } from '@syncfusion/ej2-angular-grids';\nimport { createVirtualOrderData, virtualOrderData } from '../data';\nimport { RatingModule } from '@syncfusion/ej2-angular-inputs';\nimport { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';\nimport { NgIf } from '@angular/common';\n\n@Component({\n    selector: 'ej2-gridvirtual',\n    templateUrl: 'virtualization.html',\n    styleUrls: ['virtualization.style.css'],\n    encapsulation: ViewEncapsulation.None,\n    providers: [VirtualScrollService, EditService, ToolbarService],\n    standalone: true,\n    imports: [ ButtonModule, GridModule, NgIf, RatingModule]\n})\nexport class VirtualizationComponent implements OnInit {\n    public vData: Object[] = virtualOrderData;\n    @ViewChild('grid')\n    public grid!: GridComponent;\n    @ViewChild('load')\n    public loadButton!: ButtonComponent;\n    public date1!: number;\n    public date2!: number;\n    public flag: boolean = true;\n    public ngOnInit(): void { }\n    public validationSno: Object = { required: true, digits: true };\n    public validationRules: Object = { required: true };\n    public toolbar: string[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n    public editSettings: Object = { allowEditing: true, allowDeleting: true, newRowPosition: 'Top' };\n    public editparams?: Object = { params: { showSpinButton: false } };\n\n    onClick = (args: any) => {\n        this.loadButton.disabled = true\n        this.show();\n        if (!this.vData.length) {\n            createVirtualOrderData();\n            this.grid.dataSource = this.vData;\n            this.grid.editSettings.allowAdding = true;\n        }\n        this.flag = true;\n        this.date1 = new Date().getTime();\n        this.grid.refresh();\n    }\n    onLoad(args: LoadEventArgs): void {\n        if (this.grid.enableVirtualization) {\n            args.enableSeamlessScrolling = true;\n        }\n    }\n    show(): void {\n        document.getElementById('popup')!.style.display = 'inline-block';\n    }\n    hide(): void {\n        if (this.flag && this.date1) {\n            this.date2 = new Date().getTime();\n            document.getElementById('performanceTime')!.innerHTML = 'Time Taken: ' + (this.date2 - this.date1) + 'ms';\n            this.flag = false;\n        }\n        document.getElementById('popup')!.style.display = 'none';\n    }\n}\n"
    },
    {
      "target": "src/components/grid-virtual-scrolling/virtualization.html",
      "content": "<div class='control-section'>\n    <div class='div-button'>\n        <button #load id=\"load\" ejs-button (click)='onClick($event)' cssClass='e-info'>Load 100K Data</button>\n        <span id='popup'>\n            <span id='gif' class='image'></span>\n        </span>\n        <span id='performanceTime'>Time Taken: 0 ms</span>\n    </div>\n    <ejs-grid #grid [dataSource]='vData' (load)='onLoad($event)' [enableVirtualization]='true' clipMode=\"EllipsisWithTooltip\" [enableColumnVirtualization]='true' [editSettings]='editSettings' [toolbar]='toolbar' height='400' rowHeight='50' (dataBound)='hide()'>\n        <e-columns>\n            <e-column field='OrderID' headerText='Order ID' width='110' isPrimaryKey='true'\n                [validationRules]='validationRules'></e-column>\n            <e-column field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='Right'\n                editType='datepickeredit'></e-column>\n            <e-column field='ShipDate' headerText='Ship Date' width='140' format='yMd' textAlign='Right'\n                editType='datepickeredit'></e-column>\n            <e-column field='OrderStatus' headerText='Order Status' width='140' textAlign='Center' editType='dropdownedit' [validationRules]='validationRules'>\n                <ng-template #template let-data>\n                    <div *ngIf=\"data.OrderStatus === 'Delivered'; else shipped\"\n                        class='virtual-statustemp e-deliveredcolor'>\n                        <span class='virtual-statustxt e-deliveredcolor'>{{\n                            data.OrderStatus\n                            }}</span>\n                    </div>\n\n                    <ng-template #shipped>\n                        <div *ngIf=\"data.OrderStatus === 'Shipped'; else packed\"\n                            class='virtual-statustemp e-shippedcolor'>\n                            <span class='virtual-statustxt e-shippedcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #packed>\n                        <div *ngIf=\"data.OrderStatus === 'Packed'; else processing\"\n                            class='virtual-statustemp e-packedcolor'>\n                            <span class='virtual-statustxt e-packedcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                    <ng-template #processing>\n                        <div *ngIf=\"data.OrderStatus === 'Processing'; else canceled\"\n                            class='virtual-statustemp e-processingcolor'>\n                            <span class='virtual-statustxt e-processingcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                    <ng-template #canceled>\n                        <div *ngIf=\"data.OrderStatus === 'Canceled'; else returned\"\n                            class='virtual-statustemp e-cancelcolor'>\n                            <span class='virtual-statustxt e-cancelcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                    <ng-template #returned>\n                        <div *ngIf=\"data.OrderStatus === 'Returned'; else ordered\"\n                            class='virtual-statustemp e-returnedcolor'>\n                            <span class='virtual-statustxt e-returnedcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                    <ng-template #ordered>\n                        <div class='virtual-statustemp e-orderedcolor'>\n                            <span class='virtual-statustxt e-orderedcolor'>{{\n                                data.OrderStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </e-column>\n            <e-column field='Priority' headerText='Priority' width='120' textAlign='Center' editType='dropdownedit' [validationRules]='validationRules'>\n                <ng-template #template let-data>\n                    <div *ngIf=\"data.Priority === 'High'; else low\" class='virtual-statustemp e-highcolor'>\n                        <span class='virtual-statustxt e-highcolor'>{{ data.Priority }}</span>\n                    </div>\n\n                    <ng-template #low>\n                        <div *ngIf=\"data.Priority === 'Low'; else medium\" class='virtual-statustemp e-lowcolor'>\n                            <span class='virtual-statustxt e-lowcolor'>{{ data.Priority }}</span>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #medium>\n                        <div *ngIf=\"data.Priority === 'Medium'; else critical\" class='virtual-statustemp e-mediumcolor'>\n                            <span class='virtual-statustxt e-mediumcolor'>{{ data.Priority }}</span>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #critical>\n                        <div class='virtual-statustemp e-criticalcolor'>\n                            <span class='virtual-statustxt e-criticalcolor'>{{ data.Priority}}</span>\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </e-column>\n            <e-column field='CustomerName' headerText='Customer Name' width='190'\n                [validationRules]='validationRules'></e-column>\n            <e-column field='CustomerID' headerText='Customer ID' width='110' [visible]='false'></e-column>\n            <e-column field='Email' headerText='Email' width='200'></e-column>\n            <e-column field='Phone' headerText='Phone Number' width='140' textAlign='Right'></e-column>\n            <e-column field='ShipAddress' headerText='Ship Address' width='180'></e-column>\n            <e-column field='ShipCity' headerText='Ship City' width='120'></e-column>\n            <e-column field='ShipState' headerText='Ship State Code' width='130'></e-column>\n            <e-column field='ShipPostalCode' headerText='Ship Postal Code' width='130'\n                textAlign='Right'></e-column>\n            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>\n            <e-column field='ProductName' headerText='Product Name' width='250'></e-column>\n            <e-column field='ProductID' headerText='Product ID' width='110' [visible]='false'></e-column>\n            <e-column field='Category' headerText='Category' width='120'></e-column>\n            <e-column field='Warehouse' headerText='Ware house' width='110' editType='dropdownedit' [visible]='false'></e-column>\n            <e-column field='InventoryCount' headerText='Inventory Count' width='150' textAlign='Right'\n                [visible]='false'></e-column>\n            <e-column field='Quantity' headerText='Quantity' width='100' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='UnitPrice' headerText='Unit Price' width='110' format='C2' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='Discount' headerText='Discount (%)' width='120' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='Tax' headerText='Tax (%)' width='100' textAlign='Right' editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='SubTotal' headerText='Sub Total' width='110' format='C2' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='TaxAmount' headerText='Tax Amount' width='110' format='C2' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='ShipFee' headerText='Ship Fee' width='120' format='C2' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='TotalAmount' headerText='Total Amount' width='120' format='C2' textAlign='Right'\n                editType='numericedit' [edit]='editparams'></e-column>\n            <e-column field='PaymentMethod' headerText='Payment Method' width='140' editType='dropdownedit' [validationRules]='validationRules'>\n                <ng-template #template let-data>\n                    <div class='e-payment-info'>\n                        <img src='./assets/grid/images/payment/{{ data.PaymentMethod }}.svg'\n                            [alt]='data.PaymentMethod' />\n                        <span>{{ data.PaymentMethod }}</span>\n                    </div>\n                </ng-template>\n            </e-column>\n            <e-column field='PaymentStatus' headerText='Payment Status' width='140' textAlign='Center' editType='dropdownedit' [validationRules]='validationRules'>\n                <ng-template #template let-data>\n                    <div *ngIf=\"data.PaymentStatus === 'Paid'; else pending\" class='virtual-statustemp e-paidcolor'>\n                        <span class='virtual-statustxt e-paidcolor'>{{ data.PaymentStatus }}</span>\n                    </div>\n\n                    <ng-template #pending>\n                        <div *ngIf=\"data.PaymentStatus === 'Pending'; else refunded\"\n                            class='virtual-statustemp e-pendingcolor'>\n                            <span class='virtual-statustxt e-pendingcolor'>{{\n                                data.PaymentStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #refunded>\n                        <div *ngIf=\"data.PaymentStatus === 'Refunded'; else failed\"\n                            class='virtual-statustemp e-refundcolor'>\n                            <span class='virtual-statustxt e-refundcolor'>{{\n                                data.PaymentStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n\n                    <ng-template #failed>\n                        <div class='virtual-statustemp e-failedcolor'>\n                            <span class='virtual-statustxt e-failedcolor'>{{\n                                data.PaymentStatus\n                                }}</span>\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </e-column>\n            <e-column field='Rating' headerText='Delivery Rating' [visible]='false' width='160' textAlign='Center'\n                editType='dropdownedit'>\n                <ng-template #template let-data>\n                    <div class='rate'>\n                        <div class='rating'>\n                            <input ejs-rating [readOnly]='true' value='{{ data.Rating }}' cssClass='custom-rating' />\n                        </div>\n                    </div>\n                </ng-template>\n            </e-column>\n        </e-columns>\n    </ejs-grid>\n</div>"
    },
    {
      "target": "src/components/grid-virtual-scrolling/virtualization.style.css",
      "content": ".custom-rating.e-rating-container .e-rating-item-container,\n.e-bigger .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon,\n.e-bigger.custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {\n    font-size: 11px;\n}\n\n.custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {\n    -webkit-text-fill-color: lightgrey;\n    -webkit-text-stroke: 1px lightgrey;\n}\n\n.custom-rating.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon {\n    background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    -webkit-text-stroke: 1px #ffa600;\n}\n\n.virtual-statustemp {\n    position: relative;\n    padding: 15px 0;\n    border-radius: 5px;\n    text-align: center\n}\n\n.virtual-statustemp.e-highcolor {\n    background-color: #f8d7da;\n}\n\n.virtual-statustemp.e-lowcolor {\n    background-color: #d4edda;\n}\n\n.virtual-statustemp.e-mediumcolor {\n    background-color: #fff3cd;\n}\n\n.virtual-statustemp.e-criticalcolor {\n    background-color: #efacac;\n}\n\ntd.e-rowcell .virtual-statustxt.e-highcolor {\n    color: #b21f2d;\n}\n\ntd.e-rowcell .virtual-statustxt.e-lowcolor {\n    color: #155724;\n}\n\ntd.e-rowcell .virtual-statustxt.e-mediumcolor {\n    color: #856404;\n}\n\ntd.e-rowcell .virtual-statustxt.e-criticalcolor {\n    color: darkred;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-highcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-highcolor {\n    color: #FF6F61;\n}\n\n.material3-dark .virtual-statustemp.e-highcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-highcolor,\n.fluent2-dark .virtual-statustemp.e-highcolor,\n.tailwind3-dark .virtual-statustemp.e-highcolor,\n.fluent2-highcontrast .virtual-statustemp.e-highcolor,\n.fluent-dark .virtual-statustemp.e-highcolor,\n.highcontrast .virtual-statustemp.e-highcolor {\n    background-color: #3E1F1F;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor {\n    color: #81C784;\n}\n\n.material3-dark .virtual-statustemp.e-lowcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-lowcolor,\n.fluent2-dark .virtual-statustemp.e-lowcolor,\n.tailwind3-dark .virtual-statustemp.e-lowcolor,\n.fluent2-highcontrast .virtual-statustemp.e-lowcolor,\n.fluent-dark .virtual-statustemp.e-lowcolor,\n.highcontrast .virtual-statustemp.e-lowcolor {\n    background-color: #1F3A2E;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor {\n    color: #FFD54F;\n}\n\n.material3-dark .virtual-statustemp.e-mediumcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-mediumcolor,\n.fluent2-dark .virtual-statustemp.e-mediumcolor,\n.tailwind3-dark .virtual-statustemp.e-mediumcolor,\n.fluent2-highcontrast .virtual-statustemp.e-mediumcolor,\n.fluent-dark .virtual-statustemp.e-mediumcolor,\n.highcontrast .virtual-statustemp.e-mediumcolor {\n    background-color: #3A2E1F;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor {\n    color: #F28B82;\n}\n\n.material3-dark .virtual-statustemp.e-criticalcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-criticalcolor,\n.fluent2-dark .virtual-statustemp.e-criticalcolor,\n.tailwind3-dark .virtual-statustemp.e-criticalcolor,\n.fluent2-highcontrast .virtual-statustemp.e-criticalcolor,\n.fluent-dark .virtual-statustemp.e-criticalcolor,\n.highcontrast .virtual-statustemp.e-criticalcolor {\n    background-color: #5A1A1A;\n}\n\n.image {\n    position: absolute;\n    background-repeat: no-repeat;\n    background-image: url('/assets/grid/images/spinner.gif');\n    background-position: center;\n    width: 16px;\n    height: 28px;\n}\n\n.e-bigger .image {\n    height: 36px;\n}\n\n#popup {\n    position: absolute;\n    background-color: transparent;\n    display: none;\n    z-index: 100;\n}\n\n.div-button {\n    margin: 5px 5px 5px 0;\n}\n\n#performanceTime {\n    float: right;\n    margin-top: 3px;\n}\n\n.e-bigger #performanceTime {\n    margin-top: 8px;\n}\n\n.virtual-statustemp.e-paidcolor {\n    background-color: #e6f4ea;\n}\n\n.virtual-statustxt.e-paidcolor {\n    color: #155724;\n}\n\n.virtual-statustemp.e-pendingcolor {\n    background-color: #fff8e1;\n}\n\n.virtual-statustxt.e-pendingcolor {\n    color: #856404;\n}\n\n.virtual-statustemp.e-refundcolor {\n    background-color: #fff0f0;\n}\n\n.virtual-statustxt.e-refundcolor {\n    color: #b21f2d;\n}\n\n.virtual-statustemp.e-deliveredcolor {\n    background-color: #e6f3ea;\n}\n\n.virtual-statustxt.e-deliveredcolor {\n    color: #2e7d32;\n}\n\n.virtual-statustemp.e-shippedcolor {\n    background-color: #e7f0fb;\n}\n\n.virtual-statustxt.e-shippedcolor {\n    color: #1565c0;\n}\n\n.virtual-statustemp.e-processingcolor {\n    background-color: #fff8e6;\n}\n\n.virtual-statustxt.e-processingcolor {\n    color: #ff9800;\n}\n\n.virtual-statustemp.e-packedcolor {\n    background-color: #fff7ed;\n}\n\n.virtual-statustxt.e-packedcolor {\n    color: #d97706;\n}\n\n.virtual-statustemp.e-returnedcolor {\n    background-color: #FCE4E4;\n}\n\n.virtual-statustxt.e-returnedcolor {\n    color: #8B0000;\n}\n\n.virtual-statustemp.e-cancelcolor {\n    background-color: #f2f2f2;\n}\n\n.virtual-statustxt.e-cancelcolor {\n    color: #6b6b6b;\n}\n\n.virtual-statustemp.e-orderedcolor {\n    background-color: #E0F2F1;\n}\n\n.virtual-statustxt.e-orderedcolor {\n    color: #00796B;\n}\n\n.virtual-statustemp.e-failedcolor {\n    background-color: #f2f2f2;\n}\n\n.virtual-statustxt.e-failedcolor {\n    color: #6b6b6b;\n}\n\n.material3-dark .virtual-statustemp.e-paidcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-paidcolor,\n.fluent2-dark .virtual-statustemp.e-paidcolor,\n.tailwind3-dark .virtual-statustemp.e-paidcolor,\n.fluent2-highcontrast .virtual-statustemp.e-paidcolor,\n.fluent-dark .virtual-statustemp.e-paidcolor,\n.highcontrast .virtual-statustemp.e-paidcolor {\n    background-color: #133b2b;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor {\n    color: #81C784;\n}\n\n.material3-dark .virtual-statustemp.e-pendingcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-pendingcolor,\n.fluent2-dark .virtual-statustemp.e-pendingcolor,\n.tailwind3-dark .virtual-statustemp.e-pendingcolor,\n.fluent2-highcontrast .virtual-statustemp.e-pendingcolor,\n.fluent-dark .virtual-statustemp.e-pendingcolor,\n.highcontrast .virtual-statustemp.e-pendingcolor {\n    background-color: #3a331f;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor {\n    color: #FFD54F;\n}\n\n.material3-dark .virtual-statustemp.e-refundcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-refundcolor,\n.fluent2-dark .virtual-statustemp.e-refundcolor,\n.tailwind3-dark .virtual-statustemp.e-refundcolor,\n.fluent2-highcontrast .virtual-statustemp.e-refundcolor,\n.fluent-dark .virtual-statustemp.e-refundcolor,\n.highcontrast .virtual-statustemp.e-refundcolor {\n    background-color: #3a1f1f;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor {\n    color: #FF8A80;\n}\n\n.material3-dark .virtual-statustemp.e-deliveredcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-deliveredcolor,\n.fluent2-dark .virtual-statustemp.e-deliveredcolor,\n.tailwind3-dark .virtual-statustemp.e-deliveredcolor,\n.fluent2-highcontrast .virtual-statustemp.e-deliveredcolor,\n.fluent-dark .virtual-statustemp.e-deliveredcolor,\n.highcontrast .virtual-statustemp.e-deliveredcolor {\n    background-color: #173924;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor {\n    color: #A5D6A7;\n}\n\n.material3-dark .virtual-statustemp.e-shippedcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-shippedcolor,\n.fluent2-dark .virtual-statustemp.e-shippedcolor,\n.tailwind3-dark .virtual-statustemp.e-shippedcolor,\n.fluent2-highcontrast .virtual-statustemp.e-shippedcolor,\n.fluent-dark .virtual-statustemp.e-shippedcolor,\n.highcontrast .virtual-statustemp.e-shippedcolor {\n    background-color: #12321f;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor {\n    color: #A5D6A7;\n}\n\n.material3-dark .virtual-statustemp.e-processingcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-processingcolor,\n.fluent2-dark .virtual-statustemp.e-processingcolor,\n.tailwind3-dark .virtual-statustemp.e-processingcolor,\n.fluent2-highcontrast .virtual-statustemp.e-processingcolor,\n.fluent-dark .virtual-statustemp.e-processingcolor,\n.highcontrast .virtual-statustemp.e-processingcolor {\n    background-color: #332f1f;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {\n    color: #FFD54F;\n}\n\n.material3-dark .virtual-statustemp.e-cancelcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-cancelcolor,\n.fluent2-dark .virtual-statustemp.e-cancelcolor,\n.tailwind3-dark .virtual-statustemp.e-cancelcolor,\n.fluent2-highcontrast .virtual-statustemp.e-cancelcolor,\n.fluent-dark .virtual-statustemp.e-cancelcolor,\n.highcontrast .virtual-statustemp.e-cancelcolor {\n    background-color: #3a1a1a;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor {\n    color: #F28B82;\n}\n\n/* additional dark-theme overrides for new badge classes */\n.material3-dark .virtual-statustemp.e-packedcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-packedcolor,\n.fluent2-dark .virtual-statustemp.e-packedcolor,\n.tailwind3-dark .virtual-statustemp.e-packedcolor,\n.fluent2-highcontrast .virtual-statustemp.e-packedcolor,\n.fluent-dark .virtual-statustemp.e-packedcolor,\n.highcontrast .virtual-statustemp.e-packedcolor {\n    background-color: #5c3a11;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor {\n    color: #FFD54F;\n}\n\n.material3-dark .virtual-statustemp.e-processingcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-processingcolor,\n.fluent2-dark .virtual-statustemp.e-processingcolor,\n.tailwind3-dark .virtual-statustemp.e-processingcolor,\n.fluent2-highcontrast .virtual-statustemp.e-processingcolor,\n.fluent-dark .virtual-statustemp.e-processingcolor,\n.highcontrast .virtual-statustemp.e-processingcolor {\n    background-color: #5a3a00;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {\n    color: #FFD54F;\n}\n\n.material3-dark .virtual-statustemp.e-returnedcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-returnedcolor,\n.fluent2-dark .virtual-statustemp.e-returnedcolor,\n.tailwind3-dark .virtual-statustemp.e-returnedcolor,\n.fluent2-highcontrast .virtual-statustemp.e-returnedcolor,\n.fluent-dark .virtual-statustemp.e-returnedcolor,\n.highcontrast .virtual-statustemp.e-returnedcolor {\n    background-color: #3a2a28;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor {\n    color: #FFCDD2;\n}\n\n.material3-dark .virtual-statustemp.e-orderedcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-orderedcolor,\n.fluent2-dark .virtual-statustemp.e-orderedcolor,\n.tailwind3-dark .virtual-statustemp.e-orderedcolor,\n.fluent2-highcontrast .virtual-statustemp.e-orderedcolor,\n.fluent-dark .virtual-statustemp.e-orderedcolor,\n.highcontrast .virtual-statustemp.e-orderedcolor {\n    background-color: #2b2b2b;\n    border-color: #444;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor {\n    color: #ECEFF1;\n}\n\n.material3-dark .virtual-statustemp.e-failedcolor,\n.bootstrap5\\.3-dark .virtual-statustemp.e-failedcolor,\n.fluent2-dark .virtual-statustemp.e-failedcolor,\n.tailwind3-dark .virtual-statustemp.e-failedcolor,\n.fluent2-highcontrast .virtual-statustemp.e-failedcolor,\n.fluent-dark .virtual-statustemp.e-failedcolor,\n.highcontrast .virtual-statustemp.e-failedcolor {\n    background-color: #4a4a4a;\n}\n\n.material3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n.bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n.fluent2-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n.tailwind3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n.fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor,\n.fluent-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n.highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor {\n    color: #ffffff;\n}\n\ntd.e-rowcell .e-payment-info {\n    display: flex;\n    align-items: center;\n}\n\ntd.e-rowcell .e-payment-info img {\n    margin-right: 5px;\n}\n\n.material3-dark td.e-rowcell .e-payment-info img,\n.bootstrap5\\.3-dark td.e-rowcell .e-payment-info img,\n.fluent2-dark td.e-rowcell .e-payment-info img,\n.tailwind3-dark td.e-rowcell .e-payment-info img,\n.fluent2-highcontrast td.e-rowcell .e-payment-info img,\n.fluent-dark td.e-rowcell .e-payment-info img,\n.highcontrast td.e-rowcell .e-payment-info img {\n    filter: brightness(0) invert(1);\n}\n\n.fluent2-highcontrast td.e-rowcell .e-row:hover .e-payment-info img,\n.fluent2-highcontrast td.e-rowcell .e-rowcell.e-selectionbackground .e-payment-info img {\n    filter: none;\n}"
    }
  ]
}