/* AUIGrid / AUIPivot functional styles from the original benchmark.
   Keep row rendering, totals and PrintableView behavior when ASPX replaces <style>. */
:where(body[data-cg-layout="aui"]) #Grid,
:where(body[data-cg-layout="aui"]) #Pivot { flex:1 1 0px; min-height:0px; width:100%; overflow:hidden; }
:where(body[data-cg-layout="aui"]) #Grid[hidden],
:where(body[data-cg-layout="aui"]) #Pivot[hidden] { display:none !important; }
:where(body[data-cg-layout="aui"]) #Pivot tr.BenchmarkPivotRow { height:20px !important; }
:where(body[data-cg-layout="aui"]) #Pivot tr.BenchmarkPivotRow > td {
   box-sizing:border-box; padding-top:0px !important; padding-bottom:0px !important;
   height:20px; line-height:18px !important; font-size:12px;
   }
:where(body[data-cg-layout="aui"]) #Pivot tr.BenchmarkPivotRow > td:not([rowspan]) > div {
   box-sizing:border-box !important; height:19px !important; min-height:0px !important;
   max-height:19px !important; line-height:18px !important;
   }
:where(body[data-cg-layout="aui"]) #Totals.PivotNote { font-size:11px; color:#64748b; }
:where(body[data-cg-layout="aui"]) #PrintableView tfoot td { background:#f1f5f9; font-weight:700; }

:where(body[data-cg-layout="aui"]) #Totals {
   flex:0 0 auto; min-height:30px; padding:6px; border-top:1px solid var(--border);
   background:#f5f5f5; color:#202020; font:11px/17px Arial, sans-serif; white-space:normal;
   }
:where(body[data-cg-layout="aui"]) #Totals:empty { display:none; }
:where(body[data-cg-layout="aui"]) #Totals b { color:#53534a; font-size:12px; font-weight:700; }
:where(body[data-cg-layout="aui"]) #Totals .BalancePositive,
:where(body[data-cg-layout="aui"]) #PrintableView .BalancePositive { color:#0000ff; }
:where(body[data-cg-layout="aui"]) #Totals .BalanceNegative,
:where(body[data-cg-layout="aui"]) #PrintableView .BalanceNegative { color:#ff0000; }
:where(body[data-cg-layout="aui"]) .Toolbar,
:where(body[data-cg-layout="aui"]) h1,
:where(body[data-cg-layout="aui"]) h2 { flex-shrink:0; }
:where(body[data-cg-layout="aui"]) #PrintableView { display:none; }
html.Printing { height:auto; overflow:auto; }
body:where([data-cg-layout="aui"]).Printing { display:block; height:auto; min-height:100%; overflow:visible; background:#ffffff; }
body:where([data-cg-layout="aui"]).Printing > :not(#PrintableView) { display:none !important; }
body:where([data-cg-layout="aui"]).Printing #PrintableView { display:block; position:relative; width:max-content; min-width:100%; padding:8px; overflow:visible; background:#ffffff; color:#172033; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintInfo { padding:0px 0px 8px 0px; font-size:12px; }
:where(body[data-cg-layout="aui"]) #PrintableView table { border-collapse:collapse; table-layout:fixed; font:12px/18px Arial, sans-serif; }
:where(body[data-cg-layout="aui"]) #PrintableView th,
:where(body[data-cg-layout="aui"]) #PrintableView td { box-sizing:border-box; height:20px; padding:0px 4px; overflow:hidden; border:1px solid #d4d4d4; white-space:nowrap; vertical-align:middle; }
:where(body[data-cg-layout="aui"]) #PrintableView th { height:30px; background:#eeeeee; font-weight:600; }
:where(body[data-cg-layout="aui"]) #PrintableView td .PrintValue { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
:where(body[data-cg-layout="aui"]) #PrintableView td[rowspan] { vertical-align:middle; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintVariable td { height:20px; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintGroupBlank { border-left-color:transparent; border-right-color:transparent; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintWrap .PrintValue { white-space:normal; overflow-wrap:normal; word-break:normal; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintGroup td { background:#f1f5f9; }
:where(body[data-cg-layout="aui"]) #PrintableView img { display:inline-block; vertical-align:middle; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintTotals { padding:6px; background:#f5f5f5; font:11px/17px Arial, sans-serif; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintTotals b { color:#53534a; font-size:12px; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintTotals .BalancePositive { color:#0000ff; }
:where(body[data-cg-layout="aui"]) #PrintableView .PrintTotals .BalanceNegative { color:#ff0000; }
:where(body[data-cg-layout="aui"]) .PrintCheck { display:inline-block; width:13px; height:13px; box-sizing:border-box; border:1px solid #888888; border-radius:2px; background:#ffffff; vertical-align:middle; }
:where(body[data-cg-layout="aui"]) .PrintCheck.Checked { background:#1677ff; border-color:#1677ff; }
:where(body[data-cg-layout="aui"]) .PrintCheck.Checked::after { content:""; display:block; width:4px; height:7px; margin:0px 0px 0px 3px; border:solid #ffffff; border-width:0px 2px 2px 0px; transform:rotate(45deg); }
:where(body[data-cg-layout="aui"]) .BenchmarkLeft { text-align:left !important; }
:where(body[data-cg-layout="aui"]) .BenchmarkRight { text-align:right !important; }
:where(body[data-cg-layout="aui"]) .BenchmarkCenter { text-align:center !important; }
:where(body[data-cg-layout="aui"]) .BenchmarkPanelCell,
:where(body[data-cg-layout="aui"]) .BenchmarkPanelHeader { text-align:left !important; padding-left:3px !important; padding-right:3px !important; }
:where(body[data-cg-layout="aui"]) .BenchmarkPanelHeader { font:12px/18px Arial, sans-serif !important; cursor:pointer; }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkPanelCell img { display:inline-block !important; width:12px !important; height:12px !important; max-width:12px !important; max-height:12px !important; vertical-align:middle !important; }
:where(body[data-cg-layout="aui"]) .aui-grid-my-footer { color:#334155; background:#f8fafc; font-weight:700; }
:where(body[data-cg-layout="aui"]) .aui-grid-income { color:#1d4ed8; background:#f8fafc; font-weight:700; }
:where(body[data-cg-layout="aui"]) .aui-grid-expense { color:#dc2626; background:#f8fafc; font-weight:700; }
:where(body[data-cg-layout="aui"]) .aui-grid-balance-positive { color:#1d4ed8; background:#f8fafc; font-weight:700; }
:where(body[data-cg-layout="aui"]) .aui-grid-balance-negative { color:#dc2626; background:#f8fafc; font-weight:700; }
:where(body[data-cg-layout="aui"]) .aui-grid-cell-red { color:#dc2626; text-align:right !important; }
:where(body[data-cg-layout="aui"]) .aui-grid-cell-blue { color:#1d4ed8; text-align:right !important; }
/* Keep renderer content inside the 19px area above the row border. */
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkRow,
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkGroupRow { height:20px !important; }
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkRow > td,
:where(body[data-cg-layout="aui"]) #Grid td.BenchmarkRow,
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkGroupRow > td,
:where(body[data-cg-layout="aui"]) #Grid td.BenchmarkGroupRow {
   box-sizing:border-box; padding-top:0px !important; padding-bottom:0px !important;
   line-height:18px !important; vertical-align:middle; font-size:12px;
   }
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkRow > td:not([rowspan]),
:where(body[data-cg-layout="aui"]) #Grid td.BenchmarkRow:not([rowspan]),
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkGroupRow > td:not([rowspan]),
:where(body[data-cg-layout="aui"]) #Grid td.BenchmarkGroupRow:not([rowspan]) { height:20px !important; }
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkRow > td:not([rowspan]) > div,
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkGroupRow > td:not([rowspan]) > div {
   box-sizing:border-box !important; height:19px !important; min-height:0px !important;
   max-height:19px !important; line-height:18px !important; padding-top:0px !important; padding-bottom:0px !important;
   }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkRow img,
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupRow img { vertical-align:middle; }
:where(body[data-cg-layout="aui"]) #Grid input[type="checkbox"] {
   box-sizing:border-box !important; width:13px !important; height:13px !important;
   min-width:13px !important; min-height:13px !important; max-width:13px !important; max-height:13px !important;
   margin:0px !important; padding:0px !important; vertical-align:middle !important; line-height:13px !important;
   }
:where(body[data-cg-layout="aui"]) .aui-grid-edit-renderer-base input:not([type="checkbox"]):not([type="radio"]),
:where(body[data-cg-layout="aui"]) .aui-grid-edit-renderer-base select {
   box-sizing:border-box !important; min-height:0px !important; height:19px !important;
   line-height:17px !important; padding-top:0px !important; padding-bottom:0px !important;
   }
/* Visual group spanning only. Native tree controls and hit testing stay intact.
   AUIGrid does not support body colSpan in tree mode. Do not rewrite virtual TDs. */
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree {
   position:relative; z-index:2; overflow:visible !important;
   border-right-color:transparent !important; text-align:left !important; color:#172033 !important; font-weight:700;
   }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree > div,
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree > span {
   overflow:visible !important; white-space:nowrap !important; text-overflow:clip !important;
   }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree [class*="tree"],
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree [class*="Tree"] {
   overflow:visible !important; white-space:nowrap !important; text-overflow:clip !important;
   }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupBlank {
   color:transparent !important; border-right-color:transparent !important; border-left-color:transparent !important;
   }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupBlank > * { visibility:hidden !important; }
:where(body[data-cg-layout="aui"]) .BenchmarkGroupTree { color:#172033; text-align:left !important; font-weight:700; }
:where(body[data-cg-layout="aui"]) #Grid tr.BenchmarkGroupRow > td,
:where(body[data-cg-layout="aui"]) #Grid td.BenchmarkGroupRow,
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree,
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupBlank { background:#f1f5f9; }
:where(body[data-cg-layout="aui"]) #Grid .BenchmarkGroupTree > div { width:max-content !important; max-width:none !important; }


/* Kendo UI functional styles from the original head stylesheet. */
:where(body[data-cg-layout="kendo"]) #GridFrame { flex:1 1 0; display:flex; flex-direction:column; min-height:140px; margin:0px 14px 14px 14px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) { flex:1 1 0; width:100%; min-height:0px; height:100%; margin:0px; border:0px; border-radius:0px; box-shadow:none; font-size:12px; }
:where(body[data-cg-layout="kendo"]) #TotalsBar { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:5px 14px; padding:5px 10px; border-top:1px solid var(--border); background:var(--surface-soft); font-size:12px; }
:where(body[data-cg-layout="kendo"]) #TotalsBar > #Totals { flex:1 1 600px; }
:where(body[data-cg-layout="kendo"]) #Mode { width:100%; color:var(--muted); font-size:11px; }
:where(body[data-cg-layout="kendo"]) #Pager { border:0px; padding:0px; background:transparent; }
:where(body[data-cg-layout="kendo"]) #Pager:empty { display:none; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-toolbar { display:none; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-filter-menu,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-filter { display:none !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-header th { height:30px; padding:3px 5px; white-space:nowrap; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-filter-row th { height:24px; padding:1px 2px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content table,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content-locked table {
   font-size:12px; line-height:18px; border-spacing:0px;
   }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid):not(.Heights) .k-grid-content tr,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid):not(.Heights) .k-grid-content-locked tr { height:20px !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content td,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content-locked td {
   box-sizing:border-box; height:20px !important; min-height:0px; padding:0px 4px !important; font-size:12px; line-height:18px !important;
   border-top-width:0px !important; border-bottom-width:1px !important; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
   }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content td[rowspan="2"],
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-content-locked td[rowspan="2"] { height:40px !important; vertical-align:middle; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td > .k-input,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td > .k-picker,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td > .k-button { vertical-align:top; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td.PaymentPanel { font-size:0px; line-height:0px !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentPanel .k-button { display:inline-flex; align-items:center; justify-content:center; vertical-align:top; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentPanel .k-button > .k-svg-icon,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentPanel .k-button > .k-icon { display:block; flex:none; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentRowCheck {
   display:block; width:13px; height:13px; min-width:13px; margin:0px; padding:0px; box-sizing:border-box; pointer-events:none; flex:none;
   }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td[hidden] { display:none !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td.k-edit-cell { padding:0px !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-input,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-picker,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-input-inner,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-input-button,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-button {
   min-height:18px; height:18px; padding-top:0px; padding-bottom:0px; font-size:12px; line-height:16px;
   }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-input-inner { padding-left:3px; padding-right:3px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-input-button { width:18px; padding:0px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-checkbox,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentCheck { width:13px; height:13px; min-width:13px; margin:0px; vertical-align:middle; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-command-cell,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td.PaymentPanel { padding:0px 2px !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-command-cell .k-button,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentPanel .k-button { width:19px; min-width:19px; padding:0px; margin:0px 1px 0px 0px; border:0px; background:transparent; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-svg-icon,
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-icon { width:15px; height:15px; font-size:15px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grid-remove-command .k-svg-icon { padding-top:2px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grouping-header { padding:4px 8px; min-height:30px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .k-grouping-row p { margin:0px; padding:0px; line-height:19px; }
:where(body[data-cg-layout="kendo"]) .k-list-item { min-height:20px; padding-top:0px; padding-bottom:0px; line-height:20px; font-size:12px; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentStatus { display:flex; height:18px; min-height:0px; line-height:0px; align-items:center; justify-content:center; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) .PaymentStatus svg { display:block; width:17px; height:17px; flex:none; }
:where(body[data-cg-layout="kendo"]) .PaymentPositive { color:blue; }
:where(body[data-cg-layout="kendo"]) .PaymentNegative { color:red; }
:where(body[data-cg-layout="kendo"]) .PaymentCenter { text-align:center; }
:where(body[data-cg-layout="kendo"]) .PaymentNumber { text-align:right; }
:where(body[data-cg-layout="kendo"]) .PaymentEditor { width:100%; height:18px; min-height:18px; padding:0px 3px; font:inherit; }
@media (max-width:600px) {
   :where(body[data-cg-layout="kendo"]) #GridFrame { margin:0px 8px 8px 8px; border-radius:10px; }
   :where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) { margin:0px; border-radius:0px; }
   }

/* Variable heights need ordinary paging: virtual scrolling assumes uniform heights.
   https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/scrolling/virtual-scrolling
   Kendo synchronizes the locked and scrollable row heights with inline
   heights. Do not override those TR heights with !important.
   https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/columns/locked-columns */
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid).Heights tbody tr { height:auto; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid).Heights tbody td { height:auto !important; }
:where(body[data-cg-layout="kendo"]) :is(#Grid, #PrintableGrid) td.PaymentWrap {
   width:50px; white-space:normal !important; overflow-wrap:normal;
   word-break:normal; hyphens:none; text-overflow:clip;
}
html.PrintableMode { height:100%; overflow:hidden !important; }
body:where([data-cg-layout="kendo"]).PrintableMode {
   display:block; height:100%; overflow:auto !important;
}
body:where([data-cg-layout="kendo"]).PrintableMode #GridFrame { display:none !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost { margin:0 14px 14px; width:max-content; min-width:calc(100% - 28px); overflow:visible; }
:where(body[data-cg-layout="kendo"]) #PrintableHint { margin:8px 0; color:var(--muted); font-size:12px; }
:where(body[data-cg-layout="kendo"]) #PrintableGrid { font-size:12px; background:var(--surface); }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid * {
   max-height:none !important; overflow:visible !important;
}
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-grid-content,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-grid-container {
   height:auto !important; max-width:none !important;
}
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid table {
   width:100% !important; table-layout:fixed; border-spacing:0;
   font-size:12px; line-height:18px;
}
/* scrollable:false renders a direct table without .k-grid-content.
   Apply the compact cell rules to that table as well. Only Wrap wraps. */
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid th {
   height:30px; padding:3px 5px; white-space:nowrap;
   overflow:hidden !important; text-overflow:ellipsis;
}
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid tbody td {
   box-sizing:border-box; min-height:0; padding:0 4px !important;
   font-size:12px; line-height:18px !important; vertical-align:middle;
   white-space:nowrap; overflow-wrap:normal; word-break:normal;
   overflow:hidden !important; text-overflow:ellipsis;
   border-top-width:0 !important; border-bottom:1px solid var(--border);
}
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid:not(.Heights) tbody tr,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid:not(.Heights) tbody td { height:20px !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid tbody td[rowspan="2"] { height:40px !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid.Heights tbody tr { height:auto; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid.Heights tbody td { height:auto !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid.Heights td.PaymentWrap {
   width:50px; white-space:normal !important; overflow-wrap:normal;
   word-break:normal; text-overflow:clip;
}
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid td.PaymentPanel,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid td.k-command-cell { padding:0 2px !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid td.PaymentPanel { font-size:0; line-height:0 !important; }
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-scrollbar,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-grid-pager,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-grouping-header,
:where(body[data-cg-layout="kendo"]) #PrintableHost #PrintableGrid .k-grid-toolbar { display:none !important; }

/* Shared benchmark page layout. */

:root {
   --bg: #f4f6f9;
   --surface: #fff;
   --surface-soft: #f8fafc;
   --border-strong: #cbd5e1;
   --border: #dce3ec;
   --text: #252830;
   --muted: #627186;
   --primary: #0a284d
}

* {
   box-sizing: border-box
}

html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%
}

body {
   display: flex;
   flex-direction: column;
   background: var(--bg);
   color: var(--text);
   font: 14px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

.cg-header, .cg-summary, .Toolbar, .cg-empty {
   font-family: Montserrat,Arial,sans-serif
}

.cg-header {
   height: 48px;
   min-height: 48px;
   display: flex;
   align-items: center;
   gap: 22px;
   padding: 0 16px;
   background: #0a284d;
   color: white;
   flex-shrink: 0
}

.cg-brand {
   display: flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
   font-size: 19px;
   letter-spacing: -.8px;
   font-weight: 400
}

   .cg-brand svg {
      width: 30px;
      height: 30px;
      flex-shrink: 0
   }

   .cg-brand > span > span {
      font-weight: 400
   }

.cg-header a {
   color: white;
   text-decoration: none
}

.cg-header nav {
   display: flex;
   gap: 20px;
   align-items: center;
   margin-left: auto
}

   .cg-header nav a {
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      padding: 6px 0;
      border-bottom: 2px solid transparent
   }

      .cg-header nav a:hover {
         border-color: white
      }

.cg-cta {
   font-size: 12px;
   border: 1px solid #61748e;
   border-radius: 6px;
   padding: 6px 10px;
   white-space: nowrap
}

.cg-header a:focus-visible, .cg-summary a:focus-visible {
   outline: 2px solid #8dbbfa;
   outline-offset: 3px
}

.cg-main {
   display: flex;
   flex-direction: column;
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
   padding: 0 10px 10px;
   gap: 7px
}

.cg-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-shrink: 0;
   padding: 10px 2px 1px
}

   .cg-summary h1 {
      font-size: 21px;
      font-weight: 600;
      line-height: 1.2;
      margin: 0 0 4px;
      letter-spacing: -.5px;
      padding:0px;
      text-align:left;
   }

      .cg-summary h1 a {
         color: #1a488d;
         text-decoration: none
      }
         .cg-summary h1 a:hover {
            text-decoration: underline;
         }

   .cg-summary h2 {
      font-size: 11px;
      color: #627186;
      line-height: 1.4;
      margin: 0;
      padding:0px;
      text-align:left;
      font-weight:400;
   }

      .cg-summary h2 strong {
         font-weight: 600;
         color: #34445b
      }

.cg-scores {
   display: flex;
   align-items: center;
   gap: 20px;
   white-space: nowrap
}

.cg-score {
   display: flex;
   flex-direction: column;
   gap: 2px
}

   .cg-score dt {
      font-size: 10px;
      color: #627186
   }

   .cg-score dd {
      font-size: 19px;
      line-height: 1.2;
      font-weight: 600;
      color: #0a284d;
      margin: 0;
      font-variant-numeric: tabular-nums
   }

   .cg-score .negative {
      color: #b42318
   }

   .cg-score .rank {
      color: #16803c;
   }

.cg-scores dl {
   margin: 0
}

.cg-download {
   font-size: 12px; line-height:16px;
   color: #1a488d;
   border: 1px solid #dce3ec;
   border-radius: 4px;
   padding: 4px 6px;
   text-decoration: none;
   font-weight: 600;
}
.cg-download:hover {
   text-decoration: underline;
   }

.Toolbar {
   display: grid;
   grid-template-columns: repeat(4,minmax(0,1fr));
   gap: 5px 8px;
   padding: 8px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 7px;
   flex-shrink: 0;
   margin:0px;
   box-shadow:none;
}

   .Toolbar > span {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0; 
      min-height:0;
      white-space: nowrap;
      margin:0px; 
      padding:0px;
      border:0px none;
   }

   .Toolbar label {
      font-size: 11px;
      font-weight: 600;
      color: #42536b;
      min-width: 47px;
      margin:0px;
   }

   .Toolbar button {
      font: 600 11px Montserrat,Arial,sans-serif;
      line-height: 1.2;
      min-height: 25px;
      padding: 4px 7px;
      background: #f6f8fb;
      border: 1px solid #d4deea;
      border-radius: 4px;
      color: #0a284d;
      cursor: pointer
   }

      .Toolbar button:hover {
         background: #e4effc;
         border-color: #7e9cbe
      }

      .Toolbar button:focus-visible {
         outline: 2px solid #2360a1;
         outline-offset: 1px
      }

      .Toolbar button:disabled {
         opacity: .5;
         cursor: wait
      }

   .Toolbar > span:nth-last-child(2) {
      grid-column: 1/-1;
      flex-wrap: wrap;
      border-top: 1px solid #e8edf4;
      padding-top: 5px
   }

      .Toolbar > span:nth-last-child(2) label {
         min-width: 61px
      }

   .Toolbar #Info {
      grid-column: 1/-1;
      display: block;
      min-height: 18px;
      line-height: 18px;
      white-space: normal;
      font-size: 11px;
      color: #627186
   }

      .Toolbar #Info b {
         color: #0a284d
      }

      .Toolbar #Info i {
         font-style: normal;
         color: #0a284d
      }


/* The outer canvas is FastGrid itself, AUIGrid's shell or Kendo's frame. */
.cg-main > #Grid,
.cg-main > #GridShell,
.cg-main > #GridFrame,
.cg-main > #GridArea {
   position: relative;
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
   width: 100%;
   margin: 0;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow:none;
}

#GridShell,
#GridFrame {
   display: flex;
   flex-direction: column
}

/* The active widget grows; external totals retain their natural height. */
#GridShell > #Grid,
#GridShell > #Pivot,
#GridFrame > #Grid {
   position: relative;
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
   width: 100%;
   height: auto;
   margin: 0;
   border: 0;
   border-radius: 0;
   overflow: hidden
}

#GridShell > #Grid[hidden],
#GridShell > #Pivot[hidden] {
   display: none !important
}


.cg-empty {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   color: #6b7a8d;
   font-size: 13px
}

@media(min-width:1440px) {
   .Toolbar {
      grid-template-columns: repeat(8,minmax(0,1fr))
   }

      .Toolbar > span {
         gap: 3px
      }

      .Toolbar label {
         min-width: 0;
         margin-right: 2px
      }

      .Toolbar button {
         padding-inline: 5px
      }

   .cg-header {
      padding-inline: 22px
   }
}

@media(min-width:1024px) and (min-height:768px) {
   html, body {
      overflow: hidden
   }

   .cg-main {
      overflow: hidden
   }
}

@media(max-width:1200px) {
   .cg-header {
      gap: 14px;
      padding-inline: 12px
   }

      .cg-header nav {
         gap: 13px
      }

         .cg-header nav a {
            font-size: 10px
         }

   .cg-cta {
      font-size: 10px
   }

   .cg-brand {
      font-size: 18px
   }
}

@media(max-width:1023px),(max-height:767px) {
   html {
      height: 100%;
      overflow: auto
   }

   body {
      min-width: 1022px;
      height: 100%;
      min-height: 100vh
   }

   /* Use the actual header/toolbar height, not a fixed 255px deduction.
      On short screens the 382px canvas minimum causes page scrolling. */
   .cg-main {
      flex: 1 0 auto;
      min-height: 0
   }

   .cg-main > #Grid,
   .cg-main > #GridShell,
   .cg-main > #GridFrame,
   .cg-main > #GridArea {
      flex: 1 0 382px;
      min-width: 1002px;
      min-height: 382px
   }
}

@media print {
   html, body {
      height: auto;
      overflow: visible
   }

   .cg-header, .cg-summary, .Toolbar {
      display: none
   }

   .cg-main {
      padding: 0;
      display: block
   }

   .cg-main > #Grid,
   .cg-main > #GridShell,
   .cg-main > #GridFrame,
   .cg-main > #GridArea,
   #GridFrame > #Grid,
   #GridShell > #Grid,
   #GridShell > #Pivot {
      flex: none;
      min-width: 0;
      min-height: 0;
      border: 0;
      overflow: visible;
      height: auto
   }
}

/* Keep the page navigation within the viewport even when the test canvas is wider. */
@media screen and (max-width:1150px) {
   .cg-header {
      width: 100vw;
      max-width: 100%;
      height: auto;
      min-height: 48px;
      flex-wrap: wrap;
      gap: 4px 12px;
      padding: 8px 12px
   }

      .cg-header nav {
         order: 3;
         width: 100%;
         min-width: 0;
         margin: 0;
         flex-wrap: wrap;
         overflow: visible;
         gap: 2px 18px
      }

         .cg-header nav a {
            font-size: 12px;
            padding: 4px 0
         }

   .cg-cta {
      margin-left: auto
   }
}

@media screen and (max-width:360px) {
   .cg-brand {
      font-size: 17px
   }

   .cg-header {
      column-gap: 8px
   }

   .cg-cta {
      padding-inline: 7px
   }
}

/* Kendo footer is not the AUIGrid totals strip. */
#GridFrame > #TotalsBar {
   flex: 0 0 auto;
   min-width: 0;
   margin: 0
}

/* Kendo's original preview is appended directly to body. Keep the page
   controls visible, let the body scroll, and remove the collapsed canvas gap. */
body[data-cg-layout="kendo"].PrintableMode .cg-main {
   flex: none;
   min-height: 0;
   overflow: visible
}

body[data-cg-layout="kendo"].PrintableMode #GridFrame {
   display: none !important
}

body[data-cg-layout="kendo"] > #PrintableHost {
   margin: 0 10px 10px;
   min-width: calc(100% - 20px)
}


/* AntV S2: the ASPX uses a dedicated layout, never the Kendo footer rules.
   Shared .cg-main / GridFrame flex sizing and small-screen minimums stay intact. */
body[data-cg-layout="antv-s2"] .cg-main > #GridFrame {
   height: auto;
}

body[data-cg-layout="antv-s2"] .cg-main > #Totals {
   flex: 0 0 auto;
   min-width: 0;
   margin: 0;
   border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow: none;
}

/* Keep S2's native PNG preview outside main and let the document scroll. */
body[data-cg-layout="antv-s2"].Printing {
   display: block;
   height: auto;
   min-height: 0;
   min-width: 0;
   overflow: visible;
}

/* Wijmo FlexGrid / PivotGrid: Totals is a direct child of GridFrame,
   not a growing Kendo footer item. Keep the existing shared frame sizing. */
body[data-cg-layout="wijmo"] #GridFrame > #Totals {
   flex: 0 0 auto;
   min-width: 0;
   margin: 0;
}

body[data-cg-layout="wijmo"] #GridFrame > #GroupPanel {
   flex: 0 0 auto;
}

body[data-cg-layout="wijmo"] #GroupPanel[hidden] {
   display: none;
}

/* The native Wijmo preview is inserted after GridFrame, inside cg-main.
   Remove the normal viewport constraint so the full table can scroll. */
body[data-cg-layout="wijmo"].PrintableMode .cg-main {
   flex: none;
   min-height: 0;
   overflow: visible;
}

body[data-cg-layout="wijmo"] .cg-main > #PrintableGrid {
   flex: none;
   margin: 0;
}

/* Perspective: only the viewport grows. Filters, group controls and totals
   retain their natural height. Keep the original hidden/loading lifecycle. */
body[data-cg-layout="perspective"] #GridFrame > #Totals {
   flex: 0 0 auto;
   min-width: 0;
   margin: 0;
}

body[data-cg-layout="perspective"] #GridFrame > #GroupToolbar,
body[data-cg-layout="perspective"] #GridFrame > #FilterRow {
   flex: 0 0 auto;
}

/* Do not force GridFrame to display: it is initially hidden and is revealed
   by Start(). Printable remains a direct body child with its original CSS. */

/* RevoGrid: Grid is a runtime-created <revo-grid> inside GridHost.
   GridArea is the complete static wrapper, including group controls/preview/totals. */
body[data-cg-layout="revogrid"] #GridArea > #GridHost {
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
}
body[data-cg-layout="revogrid"] #GridHost > revo-grid#Grid {
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
}
body[data-cg-layout="revogrid"] #GridArea > #Totals {
   flex: 0 0 auto;
   min-width: 0;
}
body[data-cg-layout="revogrid"].PrintableMode .cg-main {
   flex: none;
   min-height: 0;
   overflow: visible;
}

/* KendoReact owns ALL descendants of App. display:contents changes only box
   layout: no reparenting, MutationObserver, alternate React root or JS rewrite.
   The server-owned score panel stays outside App and survives React renders. */
body[data-cg-layout="kendoreact"] .cg-react-main {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   grid-template-rows: auto auto auto minmax(0, 1fr);
   gap: 7px 20px;
   padding-top: 10px;
}
body[data-cg-layout="kendoreact"] #App {
   display: contents;
}
body[data-cg-layout="kendoreact"] #App > h1 {
   grid-column: 1;
   grid-row: 1;
   min-width: 0;
   margin: 0;
   padding: 0;
   text-align: left;
   font-family: Montserrat,Arial,sans-serif;
   font-size: 21px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -.5px;
}
body[data-cg-layout="kendoreact"] #App > h1 a {
   color: #1a488d;
}
body[data-cg-layout="kendoreact"] #App > h2 {
   grid-column: 1;
   grid-row: 2;
   min-width: 0;
   max-width: none;
   margin: 0;
   padding: 0;
   text-align: left;
   font-family: Montserrat,Arial,sans-serif;
   font-size: 11px;
   font-weight: 400;
   line-height: 1.4;
   color: #627186;
}
body[data-cg-layout="kendoreact"] .cg-react-scores {
   grid-column: 2;
   grid-row: 1 / 3;
   align-self: center;
   padding: 0;
}
body[data-cg-layout="kendoreact"] #App > .Toolbar {
   grid-column: 1 / -1;
   grid-row: 3;
   min-width: 0;
}
body[data-cg-layout="kendoreact"] #App > #GridFrame {
   grid-column: 1 / -1;
   grid-row: 4;
   position: relative;
   min-width: 0;
   min-height: 0;
   width: 100%;
   height: auto;
   margin: 0;
   overflow: hidden;
   border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow: none;
}
body[data-cg-layout="kendoreact"] #GridFrame > #GridHost {
   flex: 1 1 0px;
   min-width: 0;
   min-height: 0;
}
body[data-cg-layout="kendoreact"] #App > pre {
   grid-column: 1 / -1;
   grid-row: 3;
}
@media (max-width:1023px), (max-height:767px) {
   body[data-cg-layout="kendoreact"] .cg-react-main {
      grid-template-rows: auto auto auto minmax(382px, 1fr);
   }
   body[data-cg-layout="kendoreact"] #App > #GridFrame {
      min-width: 1002px;
      min-height: 382px;
   }
}
@media print {
   body[data-cg-layout="kendoreact"] .cg-react-main {
      display: block;
      padding: 0;
   }
}


/* Center the localhost-only warning over the complete Grid viewport. */
.cg-localhost-warning {
   position: absolute;
   inset: 0;
   z-index: 100000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba(255,255,255,.96);
   color: #9a3412;
   text-align: center;
   font: 600 16px/1.5 Montserrat,Arial,sans-serif;
}
.cg-localhost-warning > span {
   
}