/* WAYBILLS LITE POLISH ACTIVE v1.29062026.88
   View Waybills Lite Polish Batch 4.20.
   This file is loaded after dx-custom.css and is intentionally not touched by
   the View Waybills lightweight dx-custom.css rule suppression. Keep it
   UI-only: no grid options, refresh, repaint, paging, columns, or state changes. */

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    left: auto !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    display: flex !important;
    gap: 8px 12px !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header .ff-page-title-wrap {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header .ff-toolbar {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    min-width: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    > .ff-toolbar-lock-spacer,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header + .ff-toolbar-lock-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header + .container-fullw,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header + .container-fluid.container-fullw,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header + .ff-toolbar-lock-spacer + .container-fullw,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    #page-title.ff-page-header + .ff-toolbar-lock-spacer + .container-fluid.container-fullw {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-dash-buttons-host.ng-hide,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-dash-buttons-host:empty,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-dash-buttons-host > .ff-dash-menu:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-dash-buttons-host > .ff-dash-menu {
    margin-bottom: 2px !important;
    margin-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fullw,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fluid.container-fullw {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fullw > .row.ng-hide,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fluid.container-fullw > .row.ng-hide,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fullw > .progress.ng-hide,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-workspace-visible
    > .container-fluid.container-fullw > .progress.ng-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fullw,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fluid.container-fullw {
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fullw > :is(.ff-view-waybills-dash-buttons-host, .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--closed, .row:has(> .accordion-no-display):not(:has(.panel-collapse.in)):not(.ff-view-waybills-grid-toolbar-row):not(.ff-view-waybills-grid-row)),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fluid.container-fullw > :is(.ff-view-waybills-dash-buttons-host, .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--closed, .row:has(> .accordion-no-display):not(:has(.panel-collapse.in)):not(.ff-view-waybills-grid-toolbar-row):not(.ff-view-waybills-grid-row)) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fullw > .ff-view-waybills-grid-toolbar-row,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills.ff-view-waybills-results-visible
    > .container-fluid.container-fullw > .ff-view-waybills-grid-toolbar-row {
    margin-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    > .container-fullw > .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--open,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    > .container-fluid.container-fullw > .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--open {
    contain: layout paint !important;
    left: auto !important;
    margin: 0 0 2px !important;
    pointer-events: auto !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    z-index: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    > .container-fullw > .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--closed,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    > .container-fluid.container-fullw > .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--closed {
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    top: -2000px !important;
    z-index: -1 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel {
    margin: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-grid-row {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-grid-row > .col-md-12 {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 0 148px !important;
    max-width: 148px !important;
    min-width: 148px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-filter-date-period .ff-date-period-group {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 62px !important;
    min-width: 62px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-filter-date-period .ff-date-period-select {
    flex: 1 1 86px !important;
    min-width: 86px !important;
    padding-left: 5px !important;
    padding-right: 16px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-waybill-filter-row-pending
    :is(.dx-filter-row, .dx-datagrid-filter-row) > td > *,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-waybill-filter-row-pending
    :is(.dx-filter-row, .dx-datagrid-filter-row) :is(.dx-editor, .dx-texteditor, .dx-texteditor-container, .dx-dropdowneditor-icon, .dx-icon, .dx-loadindicator, .dx-loadindicator-wrapper, .dx-loadindicator-icon, input) {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select) {
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-select-checkbox,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 18px !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    min-width: 18px !important;
    overflow: visible !important;
    vertical-align: middle !important;
    width: 18px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-checkbox-container {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    min-height: 18px !important;
    min-width: 18px !important;
    overflow: visible !important;
    width: 18px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-checkbox-icon {
    background-clip: padding-box !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    height: 16px !important;
    justify-content: center !important;
    line-height: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    overflow: visible !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 16px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-checkbox-checked .dx-checkbox-icon::before {
    font-size: 12px !important;
    line-height: 16px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row td:not(.dx-command-select)
    .ff-grid-boolean-checkbox {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: 18px !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row td:not(.dx-command-select)
    .ff-grid-boolean-checkbox :is(.dx-checkbox, .dx-select-checkbox),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row td:not(.dx-command-select)
    .ff-grid-boolean-checkbox .dx-checkbox-container {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    min-width: 18px !important;
    overflow: visible !important;
    width: 18px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row td:not(.dx-command-select)
    .ff-grid-boolean-checkbox .dx-checkbox-icon {
    border-radius: 2px !important;
    box-sizing: border-box !important;
    height: 16px !important;
    line-height: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    width: 16px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-action-buttons {
    align-items: center !important;
    display: flex !important;
    gap: 2px !important;
    height: 100% !important;
    justify-content: center !important;
    min-width: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-open-trigger,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-action-trigger {
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: inherit !important;
    height: 20px !important;
    line-height: 20px !important;
    min-width: 0 !important;
    text-indent: 0 !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-open-trigger {
    color: var(--ff-primary, #3b75f7) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-open-trigger:is(:hover, :focus),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-action-trigger:is(:hover, :focus) {
    background: rgba(59, 117, 247, 0.08) !important;
    outline: 1px solid rgba(59, 117, 247, 0.28) !important;
    outline-offset: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-open-trigger > .fa,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-row-action-trigger > .fa {
    color: inherit !important;
    text-align: center !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row:not(.dx-row-alt) > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row:not(.dx-row-alt) > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row:not(.dx-row-alt) > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row:not(.dx-row-alt) > tr > td {
    background-color: #fff4bd !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row.dx-row-alt > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row.dx-row-alt > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row.dx-row-alt > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row.dx-row-alt > tr > td {
    background-color: #f3edc2 !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row:not(.dx-row-alt):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row:not(.dx-row-alt):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row:not(.dx-row-alt):hover > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row:not(.dx-row-alt):hover > tr > td {
    background-color: #ffef9e !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row.dx-row-alt:hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row.dx-row-alt:hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-data-row.dx-row-alt:hover > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-selection, .ff-dx-row-selected).dx-row.dx-row-alt:hover > tr > td {
    background-color: #ece4ae !important;
    box-shadow: none !important;
}

@keyframes ff-waybill-pager-busy-pulse {
    0% {
        box-shadow: inset 0 0 0 1px rgba(59, 117, 247, 0.35), 0 0 0 0 rgba(59, 117, 247, 0.22);
    }

    70% {
        box-shadow: inset 0 0 0 1px rgba(59, 117, 247, 0.5), 0 0 0 6px rgba(59, 117, 247, 0);
    }

    100% {
        box-shadow: inset 0 0 0 1px rgba(59, 117, 247, 0.35), 0 0 0 0 rgba(59, 117, 247, 0);
    }
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-pager :is(.dx-page, .dx-page-size, .dx-navigate-button).ff-waybill-pager-click-busy {
    animation: ff-waybill-pager-busy-pulse 0.9s ease-out infinite !important;
    background-color: rgba(59, 117, 247, 0.16) !important;
    color: #1f4eb8 !important;
    cursor: progress !important;
    outline: 1px solid rgba(59, 117, 247, 0.42) !important;
    outline-offset: -1px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-pager .dx-selection.ff-waybill-pager-click-busy {
    background-color: #2f73f6 !important;
    color: #fff !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills {
    --ff-standard-grid-filter-height: 24px !important;
    --ff-standard-grid-header-height: 24px !important;
    --ff-standard-grid-pager-height: 28px !important;
    --ff-standard-grid-total-footer-height: 24px !important;
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: clamp(260px, calc(100dvh - 260px), 900px) !important;
    --ff-waybill-scrollbar-track: #eef2f7;
    --ff-waybill-scrollbar-thumb: #8f8f8f;
    --ff-waybill-scrollbar-thumb-hover: #747d86;
    --ff-waybill-scrollbar-size: 14px;
    --ff-waybill-scrollbar-radius: 8px;
    --ff-waybill-scrollbar-button: #d7dce3;
    --ff-waybill-scrollbar-button-hover: #c4cbd4;
    --ff-waybill-scrollbar-arrow: #4d535b;
}

html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills {
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: clamp(260px, calc(100dvh - 280px), 900px) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--open
    ~ .ff-view-waybills-grid-row
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills {
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: clamp(96px, calc(100dvh - 790px), 360px) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills > .dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills .dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills .dx-gridbase-container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills .dx-datagrid,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills .dx-gridbase-container {
    display: flex !important;
    flex-direction: column !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-header-panel, .dx-datagrid-headers, .dx-datagrid-total-footer, .dx-datagrid-pager, .dx-pager) {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview {
    flex: 0 0 var(--ff-standard-grid-effective-rows-height, var(--ff-standard-grid-rows-max-height)) !important;
    height: var(--ff-standard-grid-effective-rows-height, var(--ff-standard-grid-rows-max-height)) !important;
    max-height: var(--ff-standard-grid-effective-rows-height, var(--ff-standard-grid-rows-max-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    height: var(--ff-standard-grid-effective-rows-height, var(--ff-standard-grid-rows-max-height)) !important;
    max-height: var(--ff-standard-grid-effective-rows-height, var(--ff-standard-grid-rows-max-height)) !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar-horizontal, .dx-scrollable-scrollbar-horizontal) {
    left: var(--ff-waybill-scrollbar-size) !important;
    overflow: hidden !important;
    right: calc(var(--ff-waybill-scrollbar-size) + var(--ff-waybill-scrollbar-size)) !important;
    width: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar-vertical, .dx-scrollable-scrollbar-vertical) {
    bottom: calc(var(--ff-waybill-scrollbar-size) + var(--ff-waybill-scrollbar-size)) !important;
    height: auto !important;
    overflow: hidden !important;
    top: var(--ff-waybill-scrollbar-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrows {
    inset: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 24 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrows::after {
    background: var(--ff-waybill-scrollbar-track) !important;
    bottom: 0 !important;
    content: "" !important;
    display: block !important;
    height: var(--ff-waybill-scrollbar-size) !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    width: var(--ff-waybill-scrollbar-size) !important;
    z-index: 1 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow {
    align-items: center !important;
    background: var(--ff-waybill-scrollbar-button) !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: default !important;
    display: inline-flex !important;
    height: var(--ff-waybill-scrollbar-size) !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: var(--ff-waybill-scrollbar-size) !important;
    min-width: var(--ff-waybill-scrollbar-size) !important;
    opacity: 0.98 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    position: absolute !important;
    width: var(--ff-waybill-scrollbar-size) !important;
    z-index: 2 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow:is(:hover, :focus, .ff-waybill-grid-scroll-arrow--active) {
    background: var(--ff-waybill-scrollbar-button-hover) !important;
    outline: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow::before {
    content: "" !important;
    display: block !important;
    height: 0 !important;
    width: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--up {
    right: 0 !important;
    top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--up::before {
    border-bottom: 5px solid var(--ff-waybill-scrollbar-arrow) !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--down {
    bottom: var(--ff-waybill-scrollbar-size) !important;
    right: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--down::before {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid var(--ff-waybill-scrollbar-arrow) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--left {
    bottom: 0 !important;
    left: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--left::before {
    border-bottom: 4px solid transparent !important;
    border-right: 5px solid var(--ff-waybill-scrollbar-arrow) !important;
    border-top: 4px solid transparent !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--right {
    bottom: 0 !important;
    right: var(--ff-waybill-scrollbar-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .ff-waybill-grid-scroll-arrow--right::before {
    border-bottom: 4px solid transparent !important;
    border-left: 5px solid var(--ff-waybill-scrollbar-arrow) !important;
    border-top: 4px solid transparent !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container {
    scrollbar-color: var(--ff-waybill-scrollbar-thumb) var(--ff-waybill-scrollbar-track) !important;
    scrollbar-width: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar {
    height: var(--ff-waybill-scrollbar-size) !important;
    width: var(--ff-waybill-scrollbar-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar-track,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar-corner {
    background: var(--ff-waybill-scrollbar-track) !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar-thumb {
    background: var(--ff-waybill-scrollbar-thumb) !important;
    border: 2px solid var(--ff-waybill-scrollbar-track) !important;
    border-radius: var(--ff-waybill-scrollbar-radius) !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar-thumb:hover,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-scrollable-container::-webkit-scrollbar-thumb:active {
    background: var(--ff-waybill-scrollbar-thumb-hover) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical) {
    background: var(--ff-waybill-scrollbar-track) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical):is(:hover, .dx-state-hover, .dx-state-active, .dx-scrollable-scrollbar-active) {
    background: var(--ff-waybill-scrollbar-track) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical)
    :is(.dx-scrollable-scroll, .dx-scroll) {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: none !important;
    visibility: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical)
    :is(.dx-scrollable-scroll, .dx-scroll).dx-state-invisible {
    opacity: 1 !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical)
    :is(.dx-scrollable-scroll-content) {
    background: var(--ff-waybill-scrollbar-thumb) !important;
    border: 0 !important;
    border-radius: var(--ff-waybill-scrollbar-radius) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar-horizontal, .dx-scrollable-scrollbar-horizontal)
    :is(.dx-scrollable-scroll-content) {
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical):is(:hover, .dx-state-hover, .dx-state-active, .dx-scrollable-scrollbar-active)
    :is(.dx-scrollable-scroll-content) {
    background: var(--ff-waybill-scrollbar-thumb-hover) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview :is(.dx-scrollbar, .dx-scrollbar-horizontal, .dx-scrollbar-vertical, .dx-scrollable-scrollbar, .dx-scrollable-scrollbar-horizontal, .dx-scrollable-scrollbar-vertical)
    :is(.dx-scrollable-scroll, .dx-scroll).dx-state-invisible :is(.dx-scrollable-scroll-content) {
    background: var(--ff-waybill-scrollbar-thumb) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Absolute-last Waybills Date Period width clamp.
   Keep this after all Waybills polish rules so the filter does not stretch
   back to the older wide layout. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-waybill-filter-grid > .ff-filter-date-period {
    align-self: flex-start !important;
    box-sizing: border-box !important;
    flex: 0 0 164px !important;
    max-width: 164px !important;
    min-width: 164px !important;
    width: 164px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-sr-card {
    align-content: flex-start !important;
    row-gap: var(--ff-waybill-ui-row-gap, 4px) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel :is(.ff-waybill-filter-grid, .ff-filter-flow-row, .ff-filter-inline-row) {
    margin-bottom: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-waybill-filter-grid > .ff-filter-date-period > .form-group {
    box-sizing: border-box !important;
    max-width: 164px !important;
    min-width: 164px !important;
    width: 164px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period .ff-date-period-group {
    box-sizing: border-box !important;
    display: flex !important;
    max-width: 164px !important;
    min-width: 164px !important;
    width: 164px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period .ff-date-period-ignore {
    flex: 0 0 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
    padding-left: 4px !important;
    padding-right: 3px !important;
    width: 78px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period .ff-date-period-ignore-label {
    font-size: 11px !important;
    padding-left: 36px !important;
    position: relative !important;
    white-space: nowrap !important;
    width: 78px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    border-radius: 4px !important;
    height: 16px !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 8px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-period .ff-date-period-select {
    flex: 0 0 86px !important;
    max-width: 86px !important;
    min-width: 86px !important;
    padding-left: 5px !important;
    padding-right: 16px !important;
    width: 86px !important;
}

/* Absolute-last Waybills Date Range width clamp.
   Match View Collections exactly: 216px total, 96px per date side,
   and a 24px middle "to" segment. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-waybill-filter-grid > .ff-filter-date-range {
    --ff-waybill-date-range-width-final: 216px;
    --ff-waybill-date-range-divider-width-final: 24px;
    --ff-waybill-date-range-side-width-final: 96px;
    align-self: flex-start !important;
    box-sizing: border-box !important;
    flex: 0 0 var(--ff-waybill-date-range-width-final) !important;
    max-width: var(--ff-waybill-date-range-width-final) !important;
    min-width: var(--ff-waybill-date-range-width-final) !important;
    width: var(--ff-waybill-date-range-width-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range > .form-group,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range .range-picker {
    box-sizing: border-box !important;
    display: flex !important;
    max-width: var(--ff-waybill-date-range-width-final) !important;
    min-width: var(--ff-waybill-date-range-width-final) !important;
    width: var(--ff-waybill-date-range-width-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range .range-picker :is(.start-date, .end-date) {
    box-sizing: border-box !important;
    flex: 0 0 var(--ff-waybill-date-range-side-width-final) !important;
    max-width: var(--ff-waybill-date-range-side-width-final) !important;
    min-width: 0 !important;
    width: var(--ff-waybill-date-range-side-width-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range .range-picker > .input-group-addon {
    flex: 0 0 var(--ff-waybill-date-range-divider-width-final) !important;
    max-width: var(--ff-waybill-date-range-divider-width-final) !important;
    min-width: var(--ff-waybill-date-range-divider-width-final) !important;
    width: var(--ff-waybill-date-range-divider-width-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range .range-picker .input-icon,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-range .range-picker .form-control {
    box-sizing: border-box !important;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Absolute-last Waybills Date Type width clamp.
   Keep the Date Type selector at half the older wide top-row field width. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-waybill-filter-grid > .ff-filter-date-type {
    align-self: flex-start !important;
    box-sizing: border-box !important;
    flex: 0 0 192px !important;
    max-width: 192px !important;
    min-width: 192px !important;
    width: 192px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-waybill-filter-grid > .ff-filter-date-type > .form-group,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-panel .ff-filter-date-type :is(.ui-select-container, .ui-select-bootstrap, .ui-select-match, .ui-select-toggle, .btn, .ui-select-choices) {
    box-sizing: border-box !important;
    max-width: 192px !important;
    min-width: 0 !important;
    width: 192px !important;
}

/* View Waybills v26 sticky blueprint.
   Keep the first three visible columns in the normal grid render path:
   selector, action, then Waybill #. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-waybill-sticky-select-width: 28px;
    --ff-waybill-sticky-action-width: 32px;
    --ff-waybill-sticky-border: #d2d8e0;
    --ff-waybill-sticky-bg: #fff;
    --ff-waybill-sticky-alt-bg: #f5f5f5;
    --ff-waybill-sticky-filter-bg: #fff;
    --ff-waybill-sticky-header-bg: #337bf2;
    --ff-waybill-selection-tint: rgba(255, 219, 73, 0.33);
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.ff-waybill-native-select-checkbox, .ff-waybill-native-select-all) {
    appearance: auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-block !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    max-height: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    min-width: 14px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    width: 14px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-bg);
    background-clip: border-box !important;
    background-color: var(--ff-waybill-sticky-cell-bg) !important;
    border-bottom-color: var(--ff-waybill-sticky-border) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-right-color: var(--ff-waybill-sticky-border) !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: sticky !important;
    transform: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col) {
    left: 0 !important;
    max-width: var(--ff-waybill-sticky-select-width) !important;
    min-width: var(--ff-waybill-sticky-select-width) !important;
    padding: 0 !important;
    text-align: center !important;
    width: var(--ff-waybill-sticky-select-width) !important;
    z-index: 44 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-command-col, th.ff-waybill-command-col) {
    left: calc(var(--ff-waybill-sticky-select-width) - 1px) !important;
    max-width: var(--ff-waybill-sticky-action-width) !important;
    min-width: var(--ff-waybill-sticky-action-width) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: var(--ff-waybill-sticky-action-width) !important;
    z-index: 43 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-key-col, th.ff-waybill-key-col) {
    left: calc(var(--ff-waybill-sticky-select-width) + var(--ff-waybill-sticky-action-width) - 2px) !important;
    z-index: 42 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers .dx-header-row
    :is(td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-header-bg);
    background-color: var(--ff-waybill-sticky-header-bg) !important;
    color: #fff !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers .dx-header-row
    :is(td.ff-waybill-key-col, th.ff-waybill-key-col)
    :is(.dx-datagrid-text-content, .dx-column-indicators, span, div) {
    color: #fff !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers .dx-filter-row, .dx-datagrid-total-footer)
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-filter-bg);
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-alt-bg);
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected)
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-bg);
    box-shadow: inset 0 0 0 9999px var(--ff-waybill-selection-tint) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-freespace-row {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer .dx-row > :is(td, th) {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* View Waybills v26 native-scroll compact lock.
   Keep this last so page-specific Waybills grid rules beat the older managed-scroll layer. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-view-waybills-cell-line-height: 18px !important;
    --ff-view-waybills-row-height: 22px !important;
    --ff-grid-row-height: var(--ff-view-waybills-row-height) !important;
    --ff-standard-grid-cell-line-height: var(--ff-view-waybills-cell-line-height) !important;
    --ff-standard-grid-cell-padding-x: 4px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: clamp(260px, calc(100dvh - 288px), 900px) !important;
    --ff-waybill-sticky-action-width: 24px !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid,
html body.ff-app.ff-app.ff-app[data-grid-font-size="small"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-view-waybills-cell-line-height: 18px !important;
    --ff-view-waybills-row-height: 22px !important;
    --ff-standard-grid-cell-padding-y: 0 !important;
}

html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-standard-grid-rows-max-height: clamp(260px, calc(100dvh - 308px), 900px) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills
    .ff-view-waybills-filter-overlay-row.ff-standard-filter-overlay-row--open
    ~ .ff-view-waybills-grid-row
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-standard-grid-rows-max-height: clamp(96px, calc(100dvh - 800px), 360px) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-standard-grid-native-scroll
    .ff-waybill-grid-scroll-arrows {
    display: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-datagrid-table > tbody > tr.dx-row:not(.dx-data-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-datagrid-table > tbody > tr.dx-row:not(.dx-data-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > td {
    border: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-row:not(.dx-header-row):not(.dx-filter-row):not(.dx-datagrid-filter-row):not(.dx-freespace-row):not(.dx-virtual-row),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-row:not(.dx-header-row):not(.dx-filter-row):not(.dx-datagrid-filter-row):not(.dx-freespace-row):not(.dx-virtual-row) > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td {
    block-size: var(--ff-view-waybills-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-view-waybills-row-height) !important;
    line-height: var(--ff-view-waybills-cell-line-height) !important;
    max-height: var(--ff-view-waybills-row-height) !important;
    min-height: var(--ff-view-waybills-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-left: var(--ff-standard-grid-cell-padding-x) !important;
    padding-right: var(--ff-standard-grid-cell-padding-x) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row {
    block-size: var(--ff-view-waybills-row-height) !important;
    height: var(--ff-view-waybills-row-height) !important;
    max-height: var(--ff-view-waybills-row-height) !important;
    min-height: var(--ff-view-waybills-row-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td > :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-boolean-checkbox, span, a, button, img, .label, .badge),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td > div:not(.dx-checkbox):not(.dx-select-checkbox):not(.dx-dropdownbutton):not(.dx-button):not(.dx-texteditor),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td :is(.dx-link, .dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action, .dx-dropdownbutton-toggle, .btn) {
    box-sizing: border-box !important;
    line-height: var(--ff-view-waybills-cell-line-height) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-view-waybills-cell-line-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    colgroup > col:nth-child(1) {
    max-width: var(--ff-waybill-sticky-select-width) !important;
    min-width: var(--ff-waybill-sticky-select-width) !important;
    width: var(--ff-waybill-sticky-select-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    colgroup > col:nth-child(2) {
    max-width: var(--ff-waybill-sticky-action-width) !important;
    min-width: var(--ff-waybill-sticky-action-width) !important;
    width: var(--ff-waybill-sticky-action-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col) {
    max-width: var(--ff-waybill-sticky-select-width) !important;
    min-width: var(--ff-waybill-sticky-select-width) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-waybill-sticky-select-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-command-col, th.ff-waybill-command-col) {
    max-width: var(--ff-waybill-sticky-action-width) !important;
    min-width: var(--ff-waybill-sticky-action-width) !important;
    width: var(--ff-waybill-sticky-action-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .ff-waybill-row-action-trigger {
    height: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    width: 20px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-standard-grid-native-scroll
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-total-footer)
    .dx-scrollable-container {
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer .dx-datagrid-table {
    table-layout: fixed !important;
}

/* View Waybills v26 final density and alignment guard.
   This mirrors the accepted TEST3 fix: no spacer rows, one compact row height,
   and one measured horizontal surface for body/header/footer/totals. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-view-waybills-cell-line-height: 18px !important;
    --ff-view-waybills-row-height: 22px !important;
    --ff-grid-cell-padding-y: 0 !important;
    --ff-grid-row-height: 22px !important;
    --ff-standard-grid-cell-line-height: 18px !important;
    --ff-standard-grid-cell-padding-x: 4px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-check-size: 14px !important;
    --ff-standard-grid-row-height: 22px !important;
    --ff-waybill-sticky-action-width: 24px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers .dx-datagrid-table > tbody > tr:not(.dx-header-row):not(.dx-filter-row):not(.dx-datagrid-filter-row),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers .dx-datagrid-table > tbody > tr:not(.dx-header-row):not(.dx-filter-row):not(.dx-datagrid-filter-row) > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-datagrid-table > tbody > tr:not(.dx-data-row):not(.dx-group-row):not(.dx-master-detail-row):not(.dx-detail-row):not(.dx-edit-row),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-datagrid-table > tbody > tr:not(.dx-data-row):not(.dx-group-row):not(.dx-master-detail-row):not(.dx-detail-row):not(.dx-edit-row) > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-freespace-row, .dx-virtual-row, .ff-waybill-grid-spacer-row),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-freespace-row, .dx-virtual-row, .ff-waybill-grid-spacer-row) > td {
    border: 0 !important;
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-headers .dx-datagrid-content {
    height: 59px !important;
    max-height: 59px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > td {
    block-size: var(--ff-standard-grid-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-standard-grid-row-height) !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    max-height: var(--ff-standard-grid-row-height) !important;
    min-height: var(--ff-standard-grid-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td > :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-boolean-checkbox, span, a, button, img, .label, .badge),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td > div:not(.dx-checkbox):not(.dx-select-checkbox):not(.dx-dropdownbutton):not(.dx-button):not(.dx-texteditor),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td :is(.dx-link, .dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action, .dx-dropdownbutton-toggle, .btn) {
    box-sizing: border-box !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-standard-grid-cell-line-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.ff-waybill-native-select-checkbox, .ff-waybill-native-select-all) {
    height: var(--ff-standard-grid-check-size) !important;
    max-height: var(--ff-standard-grid-check-size) !important;
    max-width: var(--ff-standard-grid-check-size) !important;
    min-height: var(--ff-standard-grid-check-size) !important;
    min-width: var(--ff-standard-grid-check-size) !important;
    width: var(--ff-standard-grid-check-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer {
    display: block !important;
    flex: 0 0 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer :is(.dx-datagrid-content, .dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container, .dx-scrollable-content) {
    height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer :is(.dx-datagrid-table, .dx-datagrid-table-fixed, tbody, tr, td, .dx-datagrid-summary-item) {
    box-sizing: border-box !important;
    height: 22px !important;
    line-height: 20px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-total-footer
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-grid-has-horizontal-overflow
    :is(.dx-datagrid-headers, .dx-datagrid-total-footer) .dx-scrollable-container {
    overflow-x: hidden !important;
    scrollbar-gutter: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-grid-has-horizontal-overflow
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(.dx-scrollable-content, .dx-datagrid-content, .dx-datagrid-table, .dx-datagrid-table-fixed) {
    min-width: var(--ff-view-waybills-horizontal-width) !important;
    width: var(--ff-view-waybills-horizontal-width) !important;
}

/* Absolute-final View Waybills row-density lock.
   Matches the accepted compact View Invoices/TEST3 row contract without a
   JavaScript row-height sync pass. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px {
    --ff-view-waybills-cell-line-height: 18px !important;
    --ff-view-waybills-row-height: 22px !important;
    --ff-grid-cell-padding-y: 0 !important;
    --ff-grid-row-height: 22px !important;
    --ff-standard-grid-cell-line-height: 18px !important;
    --ff-standard-grid-cell-padding-x: 4px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-check-size: 14px !important;
    --ff-standard-grid-row-height: 22px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview :is(tr.dx-data-row, tr.dx-row.dx-data-row, .dx-row.dx-data-row, .dx-data-row),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview :is(tr.dx-data-row, tr.dx-row.dx-data-row, .dx-row.dx-data-row, .dx-data-row) > :is(td, th) {
    block-size: var(--ff-view-waybills-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-view-waybills-row-height) !important;
    line-height: var(--ff-view-waybills-cell-line-height) !important;
    max-height: var(--ff-view-waybills-row-height) !important;
    min-height: var(--ff-view-waybills-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-headers :is(.dx-datagrid-content, .dx-datagrid-table, .dx-datagrid-table-fixed, tbody),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview :is(.dx-scrollable-content, .dx-datagrid-table, .dx-datagrid-table-fixed, tbody) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th) > :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, .ff-grid-boolean-checkbox, span, a, button, img, i, .fa, .label, .badge),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th) > div:not(.dx-checkbox):not(.dx-select-checkbox):not(.dx-dropdownbutton):not(.dx-button):not(.dx-texteditor),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    :is(.dx-link, .dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action, .dx-dropdownbutton-toggle, .btn) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    line-height: var(--ff-view-waybills-cell-line-height) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-view-waybills-cell-line-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    :is(.ff-waybill-row-action-trigger, .ff-waybill-row-action-trigger > .fa) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    font-size: 14px !important;
    height: var(--ff-view-waybills-cell-line-height) !important;
    justify-content: center !important;
    line-height: var(--ff-view-waybills-cell-line-height) !important;
    margin: 0 !important;
    max-height: var(--ff-view-waybills-cell-line-height) !important;
    max-width: var(--ff-view-waybills-cell-line-height) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: var(--ff-view-waybills-cell-line-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    :is(.ff-grid-boolean-checkbox, .ff-grid-boolean-checkbox > div, .dx-checkbox, .dx-select-checkbox, .dx-checkbox-wrapper, .dx-checkbox-container, input[type="checkbox"]),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    :is(.ff-waybill-native-select-checkbox, .ff-waybill-native-select-all) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-standard-grid-check-size) !important;
    justify-content: center !important;
    line-height: var(--ff-standard-grid-check-size) !important;
    margin: 0 auto !important;
    max-height: var(--ff-standard-grid-check-size) !important;
    max-width: var(--ff-standard-grid-check-size) !important;
    min-height: var(--ff-standard-grid-check-size) !important;
    min-width: var(--ff-standard-grid-check-size) !important;
    padding: 0 !important;
    vertical-align: middle !important;
    width: var(--ff-standard-grid-check-size) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th) .dx-checkbox-icon {
    height: var(--ff-standard-grid-check-size) !important;
    line-height: var(--ff-standard-grid-check-size) !important;
    max-height: var(--ff-standard-grid-check-size) !important;
    max-width: var(--ff-standard-grid-check-size) !important;
    min-height: var(--ff-standard-grid-check-size) !important;
    min-width: var(--ff-standard-grid-check-size) !important;
    width: var(--ff-standard-grid-check-size) !important;
}

/* View Waybills final editor-cell density lock.
   DevExtreme adds a zero-width ::before spacer to read-only editor cells; keep
   it from inflating every data row above the 22px view-grid contract. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid.ff-waybill-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th).dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before {
    box-sizing: border-box !important;
    height: calc(var(--ff-view-waybills-row-height) - 4px) !important;
    line-height: calc(var(--ff-view-waybills-row-height) - 4px) !important;
    max-height: calc(var(--ff-view-waybills-row-height) - 4px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: middle !important;
}

/* Absolute-final v26 converted-grid density lock.
   This file loads after dx-custom.css, so the shared v26 row contract must
   live here as well. Keep this CSS-only: no row-height sync script. */
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page {
    --ff-golden-grid-row-height: 22px !important;
    --ff-grid-cell-padding-y: 0px !important;
    --ff-grid-row-height: 22px !important;
    --ff-image-search-row-height-final: 22px !important;
    --ff-standard-grid-cell-line-height: 18px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-check-size: 14px !important;
    --ff-standard-grid-row-height: 22px !important;
    --ff-view-collections-row-height: 22px !important;
    --ff-view-manifests-row-height-final: 22px !important;
    --ff-view-waybills-row-height: 22px !important;
}

html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview :is(.dx-scrollable-content, .dx-datagrid-content, .dx-datagrid-content-fixed, .dx-datagrid-table, .dx-datagrid-table-fixed, tbody) {
    font-size: 12px !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row),
html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row) > :is(td, th) {
    block-size: var(--ff-standard-grid-row-height) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    height: var(--ff-standard-grid-row-height) !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    max-block-size: var(--ff-standard-grid-row-height) !important;
    max-height: var(--ff-standard-grid-row-height) !important;
    min-block-size: var(--ff-standard-grid-row-height) !important;
    min-height: var(--ff-standard-grid-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    > :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, .ff-grid-boolean-checkbox, span, a, button, img, i, .fa, .label, .badge),
html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th) > div:not(.dx-checkbox):not(.dx-select-checkbox):not(.dx-dropdownbutton):not(.dx-button):not(.dx-texteditor),
html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid.ff-v26-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    :is(.dx-link, .dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action, .dx-dropdownbutton-toggle, .btn) {
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-standard-grid-cell-line-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app
    .ff-v26-grid-blueprint.ff-v26-grid-blueprint.ff-standard-grid-page.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid.ff-v26-density-22px
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    :is(.ff-grid-boolean-checkbox, .ff-grid-boolean-checkbox > div, .dx-checkbox, .dx-select-checkbox, .dx-checkbox-wrapper, .dx-checkbox-container, input[type="checkbox"]) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-standard-grid-check-size) !important;
    justify-content: center !important;
    line-height: var(--ff-standard-grid-check-size) !important;
    margin: 0 auto !important;
    max-height: var(--ff-standard-grid-check-size) !important;
    max-width: var(--ff-standard-grid-check-size) !important;
    min-height: var(--ff-standard-grid-check-size) !important;
    min-width: var(--ff-standard-grid-check-size) !important;
    padding: 0 !important;
    vertical-align: middle !important;
    width: var(--ff-standard-grid-check-size) !important;
}

/* Last-loaded v26 editor-cell density lock.
   DevExtreme can add a zero-width ::before spacer with 7px vertical padding to
   read-only editor cells; keep it inside the 22px view/master row contract. */
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row:not(.dx-edit-row) > :is(td, th).dx-editor-cell.dx-editor-inline-block:not(.dx-command-select):not(.dx-command-edit)::before {
    box-sizing: border-box !important;
    height: calc(var(--ff-standard-grid-row-height, 22px) - 4px) !important;
    line-height: calc(var(--ff-standard-grid-row-height, 22px) - 4px) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: calc(var(--ff-standard-grid-row-height, 22px) - 4px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: middle !important;
}

/* Last-loaded v26 sticky/fixed border normalizer.
   Keep sticky cell borders at 1px; the scroll split is still supplied by the
   normal border at the final sticky column edge. */
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-standard-grid-css-owned.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(td, th) {
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right: 1px solid var(--border, #d0d7de) !important;
    box-shadow: none !important;
}

/* View Collections v26 finals: keep column sizing scrollable, selection visible, and row actions lightweight. */
html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .ff-collection-row-action-trigger {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    line-height: 18px !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 18px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .ff-collection-row-action-trigger:is(:hover, :focus) {
    background: rgba(59, 117, 247, 0.08) !important;
    outline: 1px solid rgba(59, 117, 247, 0.28) !important;
    outline-offset: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .ff-collection-row-action-trigger > .fa {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-backdrop {
    background: transparent !important;
    inset: 0 !important;
    position: fixed !important;
    z-index: 1499 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu {
    background: #fff !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;
    max-width: 190px !important;
    min-width: 170px !important;
    overflow: hidden !important;
    padding: 6px 0 !important;
    position: fixed !important;
    z-index: 1500 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-item {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    text-align: left !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-item:hover,
html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-item:focus {
    background: rgba(59, 117, 247, 0.08) !important;
    outline: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-item[disabled] {
    color: #9aa4b2 !important;
    cursor: default !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections .ff-collection-row-action-menu-item > .fa {
    flex: 0 0 20px !important;
    font-size: 16px !important;
    text-align: center !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview :is(.dx-scrollbar-horizontal, .dx-scrollable-scrollbar-horizontal) {
    display: block !important;
    height: 11px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections.ff-preserve-row-colours
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th),
html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections.ff-preserve-row-colours
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th).ff-dx-preserved-row-colour-cell,
html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th) {
    background-color: #fff4bf !important;
    box-shadow: inset 0 0 0 9999px var(--ff-dx-selection-tint, rgba(255, 214, 0, .20)) !important;
    color: #1f2933 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected):is(:hover, .dx-state-hover) > :is(td, th) {
    box-shadow: inset 0 0 0 9999px var(--ff-dx-selection-tint-hover, rgba(255, 214, 0, .28)) !important;
}

/* View Manifests v26 finals: keep the body table as wide as the header, show
   sticky/fixed cell borders, and give the results viewport 25px more height. */
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page,
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned {
    --ff-grid-cell-padding-y: 1px !important;
    --ff-grid-row-height: 22px !important;
    --ff-standard-grid-action-size: 22px !important;
    --ff-standard-grid-cell-line-height: 18px !important;
    --ff-standard-grid-cell-padding-y: 1px !important;
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-row-height: 22px !important;
    --ff-standard-grid-rows-max-height: max(403px, calc(100dvh - 209px)) !important;
    --ff-view-manifest-eye-width: 22px !important;
    --ff-view-manifests-action-icon-size: 16px !important;
    --ff-view-manifests-action-hit-size: 22px !important;
    --ff-view-manifests-cell-line-height-final: 18px !important;
    --ff-view-manifests-cell-padding-y-final: 1px !important;
    --ff-view-manifests-grid-line: var(--border, #d9dde5) !important;
    --ff-view-manifests-row-height-final: 22px !important;
}

@supports not (height: max(1px, 2px)) {
    html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page,
    html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
        #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned {
        --ff-standard-grid-rows-max-height: calc(100vh - 209px) !important;
    }
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    :is(.dx-datagrid-rowsview, .dx-datagrid-rowsview .dx-scrollable, .dx-datagrid-rowsview .dx-scrollable-wrapper, .dx-datagrid-rowsview .dx-scrollable-container) {
    flex-basis: var(--ff-standard-grid-rows-max-height) !important;
    height: var(--ff-standard-grid-rows-max-height) !important;
    max-height: var(--ff-standard-grid-rows-max-height) !important;
    min-height: var(--ff-standard-grid-rows-max-height) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    :is(.dx-datagrid, .dx-gridbase-container, .dx-datagrid-rowsview),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(.dx-scrollable, .dx-scrollable-wrapper, .dx-scrollable-container) {
    box-sizing: border-box !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-scrollable-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-scrollable-content {
    max-width: none !important;
    min-width: max(100%, var(--ff-view-manifests-columns-content-width-measured, 100%)) !important;
    width: var(--ff-view-manifests-columns-content-width-measured, max-content) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-scrollable-content > .dx-datagrid-content:not(.dx-datagrid-content-fixed),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-scrollable-content > .dx-datagrid-content:not(.dx-datagrid-content-fixed) :is(.dx-datagrid-table, table) {
    max-width: none !important;
    min-width: max(100%, var(--ff-view-manifests-columns-content-width-measured, 100%)) !important;
    width: var(--ff-view-manifests-columns-content-width-measured, max-content) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview)
    :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-id-col, .ff-manifest-select-col, .ff-manifest-command-col, .ff-manifest-key-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(td, th) {
    border-bottom: 1px solid var(--ff-view-manifests-grid-line) !important;
    border-right: 1px solid var(--ff-view-manifests-grid-line) !important;
    box-shadow: inset -1px 0 0 var(--ff-view-manifests-grid-line) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th).ff-v26-sticky-select-col,
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th).ff-v26-sticky-action-col,
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th).ff-v26-sticky-key-col,
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th).ff-v26-sticky-id-col {
    background-clip: padding-box !important;
    opacity: 1 !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row,
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(.dx-datagrid-content, .dx-datagrid-content-fixed)
    :is(.dx-datagrid-table, .dx-datagrid-table-fixed) > tbody > tr.dx-data-row > :is(td, th),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row) > :is(td, th) {
    block-size: var(--ff-standard-grid-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-standard-grid-row-height) !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    max-block-size: var(--ff-standard-grid-row-height) !important;
    max-height: var(--ff-standard-grid-row-height) !important;
    min-block-size: var(--ff-standard-grid-row-height) !important;
    min-height: var(--ff-standard-grid-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    > :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, span, a, button, img, i, .fa, .label, .badge),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    > div:not(.dx-checkbox):not(.dx-select-checkbox):not(.dx-dropdownbutton):not(.dx-button):not(.dx-texteditor) {
    box-sizing: border-box !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-standard-grid-cell-line-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(td.ff-manifest-command-col, td.dx-command-edit, .ff-manifest-command-col)
    :is(.dx-link, .dx-button, .dx-button-content),
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(td.ff-manifest-command-col, td.dx-command-edit, .ff-manifest-command-col)
    :is(.dx-icon, .dx-icon.fa, .dx-icon.fa-eye, .fa, .fa-eye) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-view-manifests-action-hit-size) !important;
    justify-content: center !important;
    line-height: var(--ff-view-manifests-action-hit-size) !important;
    margin: 0 auto !important;
    max-height: var(--ff-view-manifests-action-hit-size) !important;
    max-width: var(--ff-view-manifest-eye-width) !important;
    min-height: var(--ff-view-manifests-action-hit-size) !important;
    min-width: var(--ff-view-manifest-eye-width) !important;
    overflow: visible !important;
    padding: 0 !important;
    vertical-align: middle !important;
    width: var(--ff-view-manifest-eye-width) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(td.ff-manifest-command-col, td.dx-command-edit, .ff-manifest-command-col)
    :is(.dx-icon, .dx-icon.fa, .dx-icon.fa-eye, .fa, .fa-eye) {
    font-size: var(--ff-view-manifests-action-icon-size) !important;
    height: var(--ff-view-manifests-action-icon-size) !important;
    line-height: var(--ff-view-manifests-action-icon-size) !important;
    max-height: var(--ff-view-manifests-action-icon-size) !important;
    max-width: var(--ff-view-manifests-action-icon-size) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: var(--ff-view-manifests-action-icon-size) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple.ff-view-manifests-simple, .ff-view-manifests.ff-view-manifests).ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(td.ff-manifest-command-col, td.dx-command-edit, .ff-manifest-command-col)
    :is(.dx-icon, .dx-icon.fa, .dx-icon.fa-eye, .fa, .fa-eye)::before {
    display: inline-block !important;
    font-size: var(--ff-view-manifests-action-icon-size) !important;
    height: var(--ff-view-manifests-action-icon-size) !important;
    line-height: var(--ff-view-manifests-action-icon-size) !important;
    max-height: var(--ff-view-manifests-action-icon-size) !important;
    max-width: var(--ff-view-manifests-action-icon-size) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: var(--ff-view-manifests-action-icon-size) !important;
}

/* Last-loaded v26 checkbox alignment.
   Keep this paint-only so selector and boolean cells move up without changing
   the compact row-height contract. */
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    > :is(.ff-v26-native-select-checkbox, .ff-invoice-native-select-checkbox, .ff-waybill-native-select-checkbox, input[type="checkbox"], .ff-grid-boolean-checkbox, .dx-checkbox.dx-widget, .dx-select-checkbox),
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th)
    > .dx-template-wrapper
    > :is(.ff-v26-native-select-checkbox, .ff-invoice-native-select-checkbox, .ff-waybill-native-select-checkbox, input[type="checkbox"], .ff-grid-boolean-checkbox, .dx-checkbox.dx-widget, .dx-select-checkbox) {
    position: relative !important;
    top: -4px !important;
    transform: none !important;
}

/* Last-loaded v26 eye icon alignment.
   Keep this paint-only so compact action columns do not affect row height. */
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-v26-sticky-action-col, .ff-invoice-view-command-col, .ff-invoice-view-waybill-command-col, .ff-payments-view-command-col, .ff-quote-command-col, .ff-manifest-command-col, .ff-image-command-col, .ff-tracking-command-col, .dx-command-edit)
    :is(.ff-invoice-view-eye-button, .fa-eye, .fa.fa-eye, .dx-icon.fa-eye, .dx-icon-eye, .dx-icon-eyeopen),
html body.ff-app.ff-app.ff-app .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-v26-sticky-action-col, .ff-invoice-view-command-col, .ff-invoice-view-waybill-command-col, .ff-payments-view-command-col, .ff-quote-command-col, .ff-manifest-command-col, .ff-image-command-col, .ff-tracking-command-col, .dx-command-edit)
    :is(.ff-invoice-view-eye-button, .fa-eye, .fa.fa-eye, .dx-icon.fa-eye, .dx-icon-eye, .dx-icon-eyeopen)::before {
    position: relative !important;
    top: -2px !important;
}

/* Last-loaded Waybill Stages rate-grid header override.
   The Stages rate table is plain HTML, not a DevExtreme grid, and legacy table
   rules were still washing out the header. Keep this direct and theme-aware. */
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture,
body.ff-app:not([data-theme="dark"]) .ff-stages-rate-grid {
    --ff-stages-rate-accent: var(--ff-portal-theme-grid-head-bg, var(--grid-head-bg, var(--primary, #1677ff)));
    --ff-stages-rate-action-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, #1677ff));
    --ff-stages-rate-action-bg: color-mix(in srgb, var(--ff-portal-theme-grid-head-bg, #fff) 12%, #fff);
    --ff-stages-rate-action-bg-hover: color-mix(in srgb, var(--ff-portal-theme-grid-head-bg, #fff) 18%, #fff);
    --ff-stages-rate-action-bg-active: color-mix(in srgb, var(--ff-portal-theme-grid-head-bg, #fff) 24%, #fff);
    --ff-stages-rate-action-border: color-mix(in srgb, var(--ff-stages-rate-action-accent) 64%, #fff);
    --ff-stages-rate-action-fg: color-mix(in srgb, var(--ff-stages-rate-action-accent) 82%, var(--text, #1f1f1f));
}

#wizard.ff-stages-capture table.tableheadernowrap2 > thead,
#wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr,
#wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > th,
#wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > td,
.ff-stages-rate-grid > thead,
.ff-stages-rate-grid > thead > tr,
.ff-stages-rate-grid > thead > tr > th,
.ff-stages-rate-grid > thead > tr > td,
.ff-stages-rate-grid > thead > tr > .ff-stages-rate-header-cell {
    background: var(--ff-stages-rate-accent, var(--grid-head-bg, var(--primary, #1677ff))) !important;
    background-color: var(--ff-stages-rate-accent, var(--grid-head-bg, var(--primary, #1677ff))) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--ff-stages-rate-accent, var(--primary, #1677ff)) 72%, #000) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
}

#wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > th *,
#wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > td *,
.ff-stages-rate-grid > thead > tr > th *,
.ff-stages-rate-grid > thead > tr > td *,
.ff-stages-rate-grid > thead > tr > .ff-stages-rate-header-cell * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
}

body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action,
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action {
    background: var(--ff-stages-rate-action-bg) !important;
    background-color: var(--ff-stages-rate-action-bg) !important;
    background-image: none !important;
    border-color: var(--ff-stages-rate-action-border) !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-action-fg) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-action-fg) !important;
    text-shadow: none !important;
}

body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:hover,
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:hover,
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:focus,
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:focus {
    background: var(--ff-stages-rate-action-bg-hover) !important;
    background-color: var(--ff-stages-rate-action-bg-hover) !important;
    border-color: var(--ff-stages-rate-action-accent) !important;
    color: var(--ff-stages-rate-action-fg) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-action-fg) !important;
}

body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:active,
body.ff-app:not([data-theme="dark"]) #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:active {
    background: var(--ff-stages-rate-action-bg-active) !important;
    background-color: var(--ff-stages-rate-action-bg-active) !important;
    border-color: var(--ff-stages-rate-action-accent) !important;
    color: var(--ff-stages-rate-action-fg) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-action-fg) !important;
}

body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead,
body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr,
body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > th,
body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > td,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > th,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > td,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > .ff-stages-rate-header-cell {
    background: #242b37 !important;
    background-color: #242b37 !important;
    background-image: none !important;
    border-color: #647083 !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > th *,
body.ff-app[data-theme="dark"] #wizard.ff-stages-capture table.tableheadernowrap2 > thead > tr > td *,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > th *,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > td *,
body.ff-app[data-theme="dark"] .ff-stages-rate-grid > thead > tr > .ff-stages-rate-header-cell * {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

/* Last-loaded Waybill Stages rate-footer polish.
   Keep the rate-step footer calm without changing global primary buttons. */
body.ff-app #wizard.ff-stages-capture {
    --ff-stages-rate-footer-action-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-rate-footer-action-bg: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 10%, var(--surface, #fff));
    --ff-stages-rate-footer-action-bg-hover: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 16%, var(--surface, #fff));
    --ff-stages-rate-footer-action-bg-active: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 22%, var(--surface, #fff));
    --ff-stages-rate-footer-action-border: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 55%, var(--surface, #fff));
    --ff-stages-rate-footer-action-fg: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 84%, var(--text, #1f1f1f));
    --ff-stages-rate-footer-label-bg: transparent;
    --ff-stages-rate-footer-label-fg: var(--text, #1f1f1f);
}

body.ff-app[data-theme="dark"] #wizard.ff-stages-capture {
    --ff-stages-rate-footer-action-bg: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 22%, var(--surface, #111827));
    --ff-stages-rate-footer-action-bg-hover: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 30%, var(--surface, #111827));
    --ff-stages-rate-footer-action-bg-active: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 38%, var(--surface, #111827));
    --ff-stages-rate-footer-action-border: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 58%, var(--border, #647083));
    --ff-stages-rate-footer-action-fg: color-mix(in srgb, var(--ff-stages-rate-footer-action-accent) 35%, #f8fafc);
    --ff-stages-rate-footer-label-bg: transparent;
    --ff-stages-rate-footer-label-fg: var(--text, #f8fafc);
}

body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action,
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action,
body.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn {
    background: var(--ff-stages-rate-footer-action-bg) !important;
    background-color: var(--ff-stages-rate-footer-action-bg) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-rate-footer-action-border) !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-footer-action-fg) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-action-fg) !important;
}

body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:hover,
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:hover,
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:focus,
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:focus,
body.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:hover,
body.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:focus {
    background: var(--ff-stages-rate-footer-action-bg-hover) !important;
    background-color: var(--ff-stages-rate-footer-action-bg-hover) !important;
    border-color: var(--ff-stages-rate-footer-action-accent) !important;
    color: var(--ff-stages-rate-footer-action-fg) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-action-fg) !important;
}

body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action:active,
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action:active,
body.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:active {
    background: var(--ff-stages-rate-footer-action-bg-active) !important;
    background-color: var(--ff-stages-rate-footer-action-bg-active) !important;
    border-color: var(--ff-stages-rate-footer-action-accent) !important;
}

body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action[disabled],
body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action[disabled],
body.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn[disabled] {
    cursor: not-allowed !important;
    opacity: .72 !important;
}

body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label,
body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse {
    align-items: center !important;
    background: var(--ff-stages-rate-footer-label-bg) !important;
    background-color: var(--ff-stages-rate-footer-label-bg) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-rate-footer-action-border) !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-footer-label-fg) !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-stages-rate-btn-width, 136px) !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 30px !important;
    margin: 0 !important;
    max-width: var(--ff-stages-rate-btn-width, 136px) !important;
    min-height: 32px !important;
    min-width: var(--ff-stages-rate-btn-width, 136px) !important;
    padding: 0 10px !important;
    text-shadow: none !important;
    width: var(--ff-stages-rate-btn-width, 136px) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-label-fg) !important;
}

body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label strong,
body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label .strong {
    color: inherit !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: inherit !important;
}

@media (max-width: 720px) {
    body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action,
    body.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .btn.ff-service-rate-action,
    body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label,
    body.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse {
        flex: 1 1 calc(50% - 4px) !important;
        max-width: none !important;
        min-width: 120px !important;
        width: auto !important;
    }
}

/* Absolute-last Stages rate footer override.
   This matches the high-specificity dx-custom selectors that were still winning. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture {
    --ff-stages-rate-footer-force-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-rate-footer-force-bg: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 9%, var(--surface, #fff));
    --ff-stages-rate-footer-force-hover: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 15%, var(--surface, #fff));
    --ff-stages-rate-footer-force-active: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 21%, var(--surface, #fff));
    --ff-stages-rate-footer-force-border: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 60%, var(--surface, #fff));
    --ff-stages-rate-footer-force-fg: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 82%, var(--text, #1f1f1f));
    --ff-stages-rate-footer-force-label-fg: var(--text, #1f1f1f);
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] #wizard.ff-stages-capture,
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-waybill #wizard.ff-stages-capture {
    --ff-stages-rate-footer-force-bg: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 22%, var(--surface, #111827));
    --ff-stages-rate-footer-force-hover: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 30%, var(--surface, #111827));
    --ff-stages-rate-footer-force-active: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 38%, var(--surface, #111827));
    --ff-stages-rate-footer-force-border: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 62%, var(--border, #647083));
    --ff-stages-rate-footer-force-fg: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent) 35%, #f8fafc);
    --ff-stages-rate-footer-force-label-fg: var(--text, #f8fafc);
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force {
    align-items: stretch !important;
    clear: both !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-service-rate-nav > .ff-service-rate-action,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn {
    background: var(--ff-stages-rate-footer-force-bg) !important;
    background-color: var(--ff-stages-rate-footer-force-bg) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-rate-footer-force-border) !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-footer-force-fg) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-force-fg) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force {
    align-items: center !important;
    display: flex !important;
    float: none !important;
    flex: 1 1 100% !important;
    font-weight: 600 !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 32px !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:focus,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:focus {
    background: var(--ff-stages-rate-footer-force-hover) !important;
    background-color: var(--ff-stages-rate-footer-force-hover) !important;
    border-color: var(--ff-stages-rate-footer-force-accent) !important;
    color: var(--ff-stages-rate-footer-force-fg) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-force-fg) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:active,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-legend--main .ff-rating-actions > .btn:active {
    background: var(--ff-stages-rate-footer-force-active) !important;
    background-color: var(--ff-stages-rate-footer-force-active) !important;
    border-color: var(--ff-stages-rate-footer-force-accent) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse {
    align-items: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-rate-footer-force-border) !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-footer-force-label-fg) !important;
    display: flex !important;
    float: none !important;
    flex: 1 1 100% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 32px !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    width: 100% !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-force-label-fg) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force strong,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force strong,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force .strong,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-label-force .strong,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse strong,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse strong,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse .strong,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label.label-inverse .strong {
    color: inherit !important;
    display: inline !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: inherit !important;
}

/* Waybill Stages rate tab final fit.
   Match the Full Capture compact rating layout so the four rate panels do not
   stretch into four oversized quarters on smaller monitors. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row::before,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row::after,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row::after {
    content: none !important;
    display: none !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > [class*="col-"],
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > [class*="col-"] {
    box-sizing: border-box !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-charges-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-charges-section {
    flex: 0 1 292px !important;
    max-width: 292px !important;
    min-width: 270px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-vars-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-vars-section {
    flex: 0 1 276px !important;
    max-width: 276px !important;
    min-width: 260px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-fcalc-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-fcalc-section {
    flex: 1 1 380px !important;
    max-width: 560px !important;
    min-width: 320px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-mass-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-mass-section {
    flex: 0 1 184px !important;
    max-width: 184px !important;
    min-width: 164px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > [class*="col-"] > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > [class*="col-"] > fieldset {
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed {
    border-collapse: collapse !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
    width: 216px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 126px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 126px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-charges-section table.table-condensed > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 86px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 86px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed {
    table-layout: fixed !important;
    width: 260px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 136px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    width: 136px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 108px !important;
    padding-left: 4px !important;
    padding-right: 8px !important;
    width: 108px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed {
    margin-left: auto !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
    width: 168px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 86px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 86px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 82px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 82px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-fcalc-section .freight-calc,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row .ff-rating-fcalc-section .freight-calc {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: pre-line !important;
}

@media (max-width: 1120px) {
    html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-fcalc-section,
    html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-row > .ff-rating-fcalc-section {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Final Stages rate-footer button paint. Keep the action outline visible even
   when theme variables are absent or older button rules try to flatten it. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture {
    --ff-stages-rate-footer-force-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-rate-footer-force-bg: #eef5ff;
    --ff-stages-rate-footer-force-hover: #e4efff;
    --ff-stages-rate-footer-force-active: #d8e8ff;
    --ff-stages-rate-footer-force-border: var(--ff-stages-rate-footer-force-accent, #1677ff);
    --ff-stages-rate-footer-force-fg: var(--ff-stages-rate-footer-force-accent, #1677ff);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture,
    html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture {
        --ff-stages-rate-footer-force-bg: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent, #1677ff) 8%, var(--surface, #fff));
        --ff-stages-rate-footer-force-hover: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent, #1677ff) 14%, var(--surface, #fff));
        --ff-stages-rate-footer-force-active: color-mix(in srgb, var(--ff-stages-rate-footer-force-accent, #1677ff) 20%, var(--surface, #fff));
    }
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force {
    background: var(--ff-stages-rate-footer-force-bg, #eef5ff) !important;
    background-color: var(--ff-stages-rate-footer-force-bg, #eef5ff) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-rate-footer-force-border, #1677ff) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ff-stages-rate-footer-force-fg, #1677ff) !important;
    min-height: 34px !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-force-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:focus,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:focus {
    background: var(--ff-stages-rate-footer-force-hover, #e4efff) !important;
    background-color: var(--ff-stages-rate-footer-force-hover, #e4efff) !important;
    border-color: var(--ff-stages-rate-footer-force-accent, #1677ff) !important;
    color: var(--ff-stages-rate-footer-force-fg, #1677ff) !important;
    -webkit-text-fill-color: var(--ff-stages-rate-footer-force-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-footer-force > .ff-stages-rate-footer-action-force:active,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rate-nav > .ff-stages-rate-footer-action-force:active {
    background: var(--ff-stages-rate-footer-force-active, #d8e8ff) !important;
    background-color: var(--ff-stages-rate-footer-force-active, #d8e8ff) !important;
    border-color: var(--ff-stages-rate-footer-force-accent, #1677ff) !important;
}

/* Final Stages navigation button paint.
   Reuse the accepted BASIC-tab outline style on the other wizard tabs. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture {
    --ff-stages-nav-action-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-nav-action-bg: #eef5ff;
    --ff-stages-nav-action-hover: #e4efff;
    --ff-stages-nav-action-active: #d8e8ff;
    --ff-stages-nav-action-fg: var(--ff-stages-nav-action-accent, #1677ff);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture,
    html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture {
        --ff-stages-nav-action-bg: color-mix(in srgb, var(--ff-stages-nav-action-accent, #1677ff) 8%, var(--surface, #fff));
        --ff-stages-nav-action-hover: color-mix(in srgb, var(--ff-stages-nav-action-accent, #1677ff) 14%, var(--surface, #fff));
        --ff-stages-nav-action-active: color-mix(in srgb, var(--ff-stages-nav-action-accent, #1677ff) 20%, var(--surface, #fff));
    }
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn {
    align-items: center !important;
    background: var(--ff-stages-nav-action-bg, #eef5ff) !important;
    background-color: var(--ff-stages-nav-action-bg, #eef5ff) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-nav-action-accent, #1677ff) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ff-stages-nav-action-fg, #1677ff) !important;
    display: inline-flex !important;
    font-weight: 500 !important;
    justify-content: center !important;
    min-height: 34px !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-nav-action-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn:focus,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:focus {
    background: var(--ff-stages-nav-action-hover, #e4efff) !important;
    background-color: var(--ff-stages-nav-action-hover, #e4efff) !important;
    border-color: var(--ff-stages-nav-action-accent, #1677ff) !important;
    color: var(--ff-stages-nav-action-fg, #1677ff) !important;
    -webkit-text-fill-color: var(--ff-stages-nav-action-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn:active,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn:active {
    background: var(--ff-stages-nav-action-active, #d8e8ff) !important;
    background-color: var(--ff-stages-nav-action-active, #d8e8ff) !important;
    border-color: var(--ff-stages-nav-action-accent, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn[disabled],
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn[disabled],
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn[disabled],
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn[disabled] {
    cursor: not-allowed !important;
    opacity: .72 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn .fa,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn .fa,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn .fa,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn .fa {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Plain Sender/Receiver tab footer buttons do not carry the RATE helper
   classes, so catch the raw btn-primary wizard buttons as well. */
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .btn.btn-primary,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary {
    background: var(--ff-stages-nav-action-bg, #eef5ff) !important;
    background-color: var(--ff-stages-nav-action-bg, #eef5ff) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-nav-action-accent, #1677ff) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ff-stages-nav-action-fg, #1677ff) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-nav-action-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:focus,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:focus,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:focus,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:focus {
    background: var(--ff-stages-nav-action-hover, #e4efff) !important;
    background-color: var(--ff-stages-nav-action-hover, #e4efff) !important;
    border-color: var(--ff-stages-nav-action-accent, #1677ff) !important;
    color: var(--ff-stages-nav-action-fg, #1677ff) !important;
    -webkit-text-fill-color: var(--ff-stages-nav-action-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:active,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:active,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:active,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > .btn.btn-primary:active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > button.btn.btn-primary:active {
    background: var(--ff-stages-nav-action-active, #d8e8ff) !important;
    background-color: var(--ff-stages-nav-action-active, #d8e8ff) !important;
    border-color: var(--ff-stages-nav-action-accent, #1677ff) !important;
}

/* Final Waybill Stages basic-row alignment.
   Lock buttons must not add height to labels, and CourierWB actions should read
   as an attached input suffix rather than a separate button column. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .form-group,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .form-group {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label {
    display: block !important;
    height: 18px !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    min-height: 18px !important;
    overflow: visible !important;
    padding-right: 28px !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    justify-content: center !important;
    min-width: 22px !important;
    position: absolute !important;
    right: 0 !important;
    top: -2px !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock {
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier .form-control,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier .form-control {
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    align-self: flex-start !important;
    flex: 0 0 40px !important;
    margin-left: -21px !important;
    max-width: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    position: relative !important;
    width: 40px !important;
    z-index: 2 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    height: var(--ff-control-h, 34px) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h, 34px) !important;
    min-height: var(--ff-control-h, 34px) !important;
    width: 40px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    align-items: center !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0 !important;
}

html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action,
html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 10px !important;
}

/* Final Client-list lock inset.
   Keep lock/unlock away from the ui-select clear/dropdown controls. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-basic-details .form-group:has(.ff-client-lock-label),
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .form-group,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .form-group {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-client-lock-label,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label {
    display: block !important;
    height: 18px !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    min-height: 18px !important;
    overflow: visible !important;
    padding-right: 58px !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-client-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0 !important;
    height: 22px !important;
    justify-content: center !important;
    min-width: 22px !important;
    position: absolute !important;
    right: 28px !important;
    top: -4px !important;
    width: 22px !important;
    z-index: 4 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-client-lock-label .ff-quick-client-lock,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock {
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

@media (max-width: 900px) {
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-client-lock-label,
    html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label,
    html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label {
        padding-right: 58px !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-client-lock-label > .ff-quick-town-label-actions,
    html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions,
    html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions {
        right: 28px !important;
    }
}

/* Restore non-town Full Capture lock buttons to the label line. The lowered
   overlap treatment is only for the tight Origin/Destination town fields. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label {
    line-height: 18px !important;
    margin-bottom: 0 !important;
    min-height: 18px !important;
    overflow: visible !important;
    padding-right: 42px !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label > .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0 !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    position: absolute !important;
    right: 28px !important;
    top: -4px !important;
    width: 22px !important;
    z-index: 4 !important;
}

/* Absolute-final Waybill Stages footer button paint.
   Stages1 and Stages2 use different footer wrappers, so style the stable
   Back/Next/RATE action classes directly. */
html body.ff-app.ff-app.ff-app :is(#wizard.ff-stages-capture, .ff-waybill .ff-stages-capture) {
    --ff-stages-footer-btn-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-footer-btn-bg: #eef5ff;
    --ff-stages-footer-btn-hover: #e4efff;
    --ff-stages-footer-btn-active: #d8e8ff;
    --ff-stages-footer-btn-fg: var(--ff-stages-footer-btn-accent, #1677ff);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html body.ff-app.ff-app.ff-app :is(#wizard.ff-stages-capture, .ff-waybill .ff-stages-capture) {
        --ff-stages-footer-btn-bg: color-mix(in srgb, var(--ff-stages-footer-btn-accent, #1677ff) 8%, var(--surface, #fff));
        --ff-stages-footer-btn-hover: color-mix(in srgb, var(--ff-stages-footer-btn-accent, #1677ff) 14%, var(--surface, #fff));
        --ff-stages-footer-btn-active: color-mix(in srgb, var(--ff-stages-footer-btn-accent, #1677ff) 20%, var(--surface, #fff));
    }
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn {
    align-items: center !important;
    background: var(--ff-stages-footer-btn-bg, #eef5ff) !important;
    background-color: var(--ff-stages-footer-btn-bg, #eef5ff) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-footer-btn-accent, #1677ff) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ff-stages-footer-btn-fg, #1677ff) !important;
    display: inline-flex !important;
    font-weight: 500 !important;
    justify-content: center !important;
    min-height: 34px !important;
    min-width: 120px !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--ff-stages-footer-btn-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:focus,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:hover,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:focus {
    background: var(--ff-stages-footer-btn-hover, #e4efff) !important;
    background-color: var(--ff-stages-footer-btn-hover, #e4efff) !important;
    border-color: var(--ff-stages-footer-btn-accent, #1677ff) !important;
    color: var(--ff-stages-footer-btn-fg, #1677ff) !important;
    -webkit-text-fill-color: var(--ff-stages-footer-btn-fg, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:active,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn:active {
    background: var(--ff-stages-footer-btn-active, #d8e8ff) !important;
    background-color: var(--ff-stages-footer-btn-active, #d8e8ff) !important;
    border-color: var(--ff-stages-footer-btn-accent, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn[disabled],
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn[disabled] {
    cursor: not-allowed !important;
    opacity: .72 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn .fa,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-stages-capture :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn).btn .fa {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Final capture section clear controls.
   Section legends reuse the sender/receiver clear bubble; client labels need the
   same red treatment even when they sit beside a lock icon. */
html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label:has(.ff-client-clear) {
    padding-right: 114px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label > .ff-quick-town-label-actions:has(.ff-client-clear) {
    gap: 4px !important;
    min-width: 50px !important;
    width: auto !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label .ff-client-clear,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-sr-legend .ff-section-clear {
    background: #fff5f6 !important;
    background: color-mix(in srgb, var(--error, #f05161) 6%, var(--surface, #fff)) !important;
    border-color: #f2a7af !important;
    border-color: color-mix(in srgb, var(--error, #f05161) 55%, var(--border, #d7dee8)) !important;
    color: #f05161 !important;
    color: var(--error, #f05161) !important;
    opacity: .88 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label .ff-client-clear:hover,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-sr-legend .ff-section-clear:hover {
    opacity: 1 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label .ff-client-clear,
html body.ff-app.ff-app.ff-app .ff-waybill .ff-client-lock-label .ff-quick-client-lock {
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

/* Final Full/Stages capture lock and Other Details alignment.
   Origin/Destination town locks sit above their lists; Client and Service locks
   share the same inset so the select arrow is not crowded. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-quick-town-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-quick-town-label > .ff-quick-town-label-actions {
    top: -4px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label > .ff-quick-town-label-actions {
    top: -7px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label .ff-quick-town-lock,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-quick-town-label .ff-stages-town-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-quick-town-label .ff-stages-town-lock {
    height: 22px !important;
    line-height: 20px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid {
    padding-left: 23px !important;
    padding-right: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-schedule-field {
    flex: 0 1 162px !important;
    max-width: 182px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-collection-grid {
    flex: 0 1 306px !important;
    max-width: 332px !important;
    min-width: 286px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid {
    flex: 1 1 392px !important;
    max-width: 438px !important;
    min-width: 344px !important;
}

/* POD Details now has Clear in the legend, so the inline action column only
   needs Save POD and POD Person can use the freed horizontal space. */
html body.ff-app.ff-app.ff-app .ff-waybill .ff-pod-row > .ff-pod-person,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-person,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-person {
    flex: 1 1 210px !important;
    min-width: 176px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-person {
    flex: 1 1 240px !important;
    min-width: 190px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-pod-row > .ff-pod-action,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-action,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-action {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 92px !important;
    gap: 0 !important;
    min-width: 92px !important;
    padding-top: 18px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill .ff-pod-action .ff-pod-save-action,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-pod-action .ff-pod-save-action,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-action .ff-pod-save-action {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-width: 84px !important;
    width: 84px !important;
}

/* Absolute-final Stages capture alignment and footer buttons.
   Required markers and lock buttons are overlays here, so they must not change
   field-row height; footer actions must keep the accepted outlined treatment. */
html body.ff-app.ff-app.ff-app :is(#wizard.ff-stages-capture, .ff-waybill #wizard.ff-stages-capture) {
    --ff-stages-inline-label-h: 18px;
    --ff-stages-inline-label-mb: 2px;
    --ff-stages-final-btn-accent: var(--ff-portal-theme-grid-head-bg, var(--primary, var(--primary-seed, #1677ff)));
    --ff-stages-final-btn-bg: #eef5ff;
    --ff-stages-final-btn-hover: #e4efff;
    --ff-stages-final-btn-active: #d8e8ff;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html body.ff-app.ff-app.ff-app :is(#wizard.ff-stages-capture, .ff-waybill #wizard.ff-stages-capture) {
        --ff-stages-final-btn-bg: color-mix(in srgb, var(--ff-stages-final-btn-accent, #1677ff) 8%, var(--surface, #fff));
        --ff-stages-final-btn-hover: color-mix(in srgb, var(--ff-stages-final-btn-accent, #1677ff) 14%, var(--surface, #fff));
        --ff-stages-final-btn-active: color-mix(in srgb, var(--ff-stages-final-btn-accent, #1677ff) 20%, var(--surface, #fff));
    }
}

html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-ui-density="compact"], .ff-ui-density-compact)
    :is(#wizard.ff-stages-capture, .ff-waybill #wizard.ff-stages-capture) {
    --ff-stages-inline-label-h: 12px;
    --ff-stages-inline-label-mb: 0px;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label {
    align-items: normal !important;
    display: block !important;
    gap: 0 !important;
    height: var(--ff-stages-inline-label-h) !important;
    line-height: var(--ff-stages-inline-label-h) !important;
    margin: 0 0 var(--ff-stages-inline-label-mb) !important;
    min-height: var(--ff-stages-inline-label-h) !important;
    overflow: visible !important;
    padding-right: 64px !important;
    position: relative !important;
    white-space: nowrap !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > span:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > span:first-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label > span:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label > span:first-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label > span:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label > span:first-child {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-stages-inline-label-h) !important;
    line-height: var(--ff-stages-inline-label-h) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .symbol.required,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .symbol.required,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .symbol.required,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-stages-inline-label-h) !important;
    line-height: var(--ff-stages-inline-label-h) !important;
    margin-top: 0 !important;
    min-height: var(--ff-stages-inline-label-h) !important;
    vertical-align: baseline !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .symbol.required::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .symbol.required::before,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .symbol.required::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .symbol.required::before {
    height: var(--ff-stages-inline-label-h) !important;
    line-height: var(--ff-stages-inline-label-h) !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-client-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-quick-town-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-full-service-lock-label > .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0 !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    position: absolute !important;
    right: 28px !important;
    top: -4px !important;
    width: 22px !important;
    z-index: 4 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-name .ff-stages-client-lock,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-stages-town-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-stages-town-lock,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-basic-details .ff-stages-service-lock,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-basic-details .ff-stages-service-lock {
    height: 22px !important;
    line-height: 20px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    align-self: flex-start !important;
    flex: 0 0 40px !important;
    margin-left: -21px !important;
    max-width: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: calc(var(--ff-stages-inline-label-h) + var(--ff-stages-inline-label-mb)) !important;
    position: relative !important;
    width: 40px !important;
    z-index: 2 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    height: var(--ff-control-h, 34px) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h, 34px) !important;
    min-height: var(--ff-control-h, 34px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 40px !important;
}

html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-ui-density="compact"], .ff-ui-density-compact)
    #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-ui-density="compact"], .ff-ui-density-compact)
    .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .btn-group,
html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-ui-density="compact"], .ff-ui-density-compact)
    #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
html body.ff-app.ff-app.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-ui-density="compact"], .ff-ui-density-compact)
    .ff-waybill #wizard.ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    height: var(--ff-control-h, 28px) !important;
    max-height: var(--ff-control-h, 28px) !important;
    min-height: var(--ff-control-h, 28px) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn),
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn) {
    align-items: center !important;
    background: var(--ff-stages-final-btn-bg, #eef5ff) !important;
    background-color: var(--ff-stages-final-btn-bg, #eef5ff) !important;
    background-image: none !important;
    border: 1px solid var(--ff-stages-final-btn-accent, #1677ff) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ff-stages-final-btn-accent, #1677ff) !important;
    display: inline-flex !important;
    float: none !important;
    font-weight: 500 !important;
    justify-content: center !important;
    line-height: 20px !important;
    margin: 4px 6px !important;
    min-height: 34px !important;
    min-width: 120px !important;
    padding: 6px 16px !important;
    text-shadow: none !important;
    width: auto !important;
    -webkit-text-fill-color: var(--ff-stages-final-btn-accent, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):hover,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):focus,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):hover,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):focus {
    background: var(--ff-stages-final-btn-hover, #e4efff) !important;
    background-color: var(--ff-stages-final-btn-hover, #e4efff) !important;
    border-color: var(--ff-stages-final-btn-accent, #1677ff) !important;
    color: var(--ff-stages-final-btn-accent, #1677ff) !important;
    -webkit-text-fill-color: var(--ff-stages-final-btn-accent, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):active,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn):active {
    background: var(--ff-stages-final-btn-active, #d8e8ff) !important;
    background-color: var(--ff-stages-final-btn-active, #d8e8ff) !important;
    border-color: var(--ff-stages-final-btn-accent, #1677ff) !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn) .fa,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-step-nav > :is(.back-step, .next-step, .ff-service-rate-action, .ff-stages-rate-footer-action-force, #stageSaveBtn, .btn) .fa {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Waybill Stages rating partial: match Full Capture's compact panel behavior.
   The Charges/Variables wrapper must not keep its Bootstrap width, otherwise
   Rating Variables grows into the space freed by shrinking Charges. */
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row::before,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row::after,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-split-row::before,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-split-row::after,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset > .ff-rating-compact-row::after,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-split-row::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-split-row::after {
    content: none !important;
    display: none !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-col,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-col,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row {
    display: contents !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-compact-row > [class*="col-"],
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-compact-row > [class*="col-"] {
    box-sizing: border-box !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-settings-col,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-settings-col {
    flex: 0 0 222px !important;
    max-width: 222px !important;
    min-width: 222px !important;
    width: 222px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-section {
    flex: 0 0 206px !important;
    max-width: 206px !important;
    min-width: 206px !important;
    width: 206px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-charges-section > fieldset {
    box-sizing: border-box !important;
    width: 206px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section {
    flex: 0 0 276px !important;
    max-width: 276px !important;
    min-width: 260px !important;
    width: 276px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section > fieldset {
    box-sizing: border-box !important;
    max-width: 276px !important;
    width: 276px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed {
    table-layout: fixed !important;
    width: 260px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    width: 136px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    width: 108px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-fcalc-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-fcalc-section {
    flex: 0 0 520px !important;
    max-width: 520px !important;
    min-width: 360px !important;
    width: 520px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-fcalc-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-fcalc-section > fieldset {
    box-sizing: border-box !important;
    max-width: 520px !important;
    width: 520px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section {
    flex: 0 0 184px !important;
    max-width: 184px !important;
    min-width: 170px !important;
    width: 184px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section > fieldset {
    box-sizing: border-box !important;
    max-width: 184px !important;
    width: 184px !important;
}

html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section table.table-condensed,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture fieldset.ff-rating-fieldset .ff-rating-mass-section table.table-condensed {
    margin-left: auto !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
    width: 168px !important;
}

/* View Quotes final eye alignment.
   Keep the compact command column narrow, but center the clickable eye within
   the cell so it does not drift toward the QuoteID border. */
html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-standard-grid-page.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-quote-command-col, .dx-command-edit) {
    box-sizing: border-box !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 34px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-standard-grid-page.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-quote-command-col, .dx-command-edit)
    :is(.dx-link, a, .dx-button, .dx-button-content) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 100% !important;
    justify-content: center !important;
    left: 0 !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    max-width: none !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    right: 0 !important;
    text-align: center !important;
    transform: none !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-standard-grid-page.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-quote-command-col, .dx-command-edit)
    :is(.fa-eye, .fa.fa-eye, .dx-icon.fa-eye, .dx-icon-eye, .dx-icon-eyeopen),
html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-standard-grid-page.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-quote-command-col, .dx-command-edit)
    :is(.fa-eye, .fa.fa-eye, .dx-icon.fa-eye, .dx-icon-eye, .dx-icon-eyeopen)::before {
    display: inline-block !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    position: relative !important;
    right: auto !important;
    text-align: center !important;
    top: -2px !important;
    transform: none !important;
}

/* Dark-mode fixed/sticky row paint.
   Frozen columns are sometimes painted by older light-mode rules after the
   scrollable rows are themed. Mirror the scrollable row colours onto fixed and
   CSS-sticky cells so the frozen area remains readable in dark mode. */
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed,
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-scrollable-content, .dx-datagrid-table, .dx-datagrid-table-fixed, table, tbody) {
    background: var(--surface, #151821) !important;
    background-color: var(--surface, #151821) !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, [class*="-select-col"], [class*="-command-col"], [class*="-key-col"], [class*="-key2-col"], [class*="-id-col"], .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed
    .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected) > :is(td, th) {
    background: var(--surface, #151821) !important;
    background-color: var(--surface, #151821) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, [class*="-select-col"], [class*="-command-col"], [class*="-key-col"], [class*="-key2-col"], [class*="-id-col"], .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed
    .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected) > :is(td, th) {
    background: #1a2231 !important;
    background-color: color-mix(in srgb, var(--surface, #151821) 93%, var(--primary, #6ea8ff) 7%) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid.ff-v26-single-table-sticky-grid
    :is(.dx-datagrid-filter-row, .dx-datagrid-headers .dx-filter-row)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, [class*="-select-col"], [class*="-command-col"], [class*="-key-col"], [class*="-key2-col"], [class*="-id-col"], .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-v26-grid-blueprint.ff-standard-grid-page
    :is(#gridContainer#gridContainer, #gridContainer1#gridContainer1, #gridContainer2#gridContainer2, #clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer, #townMasterGrid#townMasterGrid, #hubMasterGrid#hubMasterGrid).ff-standard-grid
    .dx-datagrid-content-fixed :is(.dx-datagrid-filter-row, .dx-filter-row) > :is(td, th) {
    background: var(--surface-2, #1b2030) !important;
    background-color: var(--surface-2, #1b2030) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

/* Portal-wide dark fixed/sticky grid fallback.
   Some older grids are not on the v26 standard-grid wrapper. Apply the same
   readable dark cell paint to every DevExtreme fixed pane and frozen command
   area without changing normal scrollable columns. */
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed,
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-scrollable-content, .dx-datagrid-table, .dx-datagrid-table-fixed, table, tbody) {
    background: var(--surface, #151821) !important;
    background-color: var(--surface, #151821) !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td, th):is(
        .dx-command-select,
        .dx-command-edit,
        [class*="sticky"],
        [class*="-select-col"],
        [class*="-command-col"],
        [class*="-key-col"],
        [class*="-key2-col"],
        [class*="-id-col"]
    ) {
    background: var(--surface, #151821) !important;
    background-color: var(--surface, #151821) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected) > :is(td, th) {
    background: inherit !important;
    background-color: inherit !important;
    background-image: none !important;
    color: inherit !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td, th):is(
        .dx-command-select,
        .dx-command-edit,
        [class*="sticky"],
        [class*="-select-col"],
        [class*="-command-col"],
        [class*="-key-col"],
        [class*="-key2-col"],
        [class*="-id-col"]
    ) {
    background: #1a2231 !important;
    background-color: color-mix(in srgb, var(--surface, #151821) 93%, var(--primary, #6ea8ff) 7%) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-datagrid-content-fixed .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected) > :is(td, th) {
    background: inherit !important;
    background-color: inherit !important;
    background-image: none !important;
    color: inherit !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-total-footer)
    .dx-datagrid-content-fixed :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    :is(.dx-datagrid-filter-row, .dx-datagrid-headers .dx-filter-row, .dx-datagrid-total-footer)
    > :is(td, th):is(
        .dx-command-select,
        .dx-command-edit,
        [class*="sticky"],
        [class*="-select-col"],
        [class*="-command-col"],
        [class*="-key-col"],
        [class*="-key2-col"],
        [class*="-id-col"]
    ) {
    background: var(--surface-2, #1b2030) !important;
    background-color: var(--surface-2, #1b2030) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

/* View Waybills dark sticky columns.
   View Waybills has a page-specific sticky palette, so keep its frozen select,
   action, and Waybill # cells in step with the scrollable dark rows. */
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-waybill-sticky-bg: #2b2b2b !important;
    --ff-waybill-sticky-alt-bg: #333333 !important;
    --ff-waybill-sticky-filter-bg: var(--surface-2, #1b2030) !important;
    --ff-waybill-sticky-border: #555 !important;
    --ff-waybill-selection-tint: rgba(255, 219, 73, 0.18) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-row-alt):not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-bg) !important;
    background: var(--ff-waybill-sticky-bg) !important;
    background-color: var(--ff-waybill-sticky-bg) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected)
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-alt-bg) !important;
    background: var(--ff-waybill-sticky-alt-bg) !important;
    background-color: var(--ff-waybill-sticky-alt-bg) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers .dx-filter-row, .dx-datagrid-total-footer)
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-filter-bg) !important;
    background: var(--ff-waybill-sticky-filter-bg) !important;
    background-color: var(--ff-waybill-sticky-filter-bg) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected)
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-sticky-bg) !important;
    background: var(--ff-waybill-sticky-bg) !important;
    background-color: var(--ff-waybill-sticky-bg) !important;
    background-image: none !important;
    color: var(--text, #f0f0f0) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview
    :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col)
    :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, .ff-waybill-command-wrap, .ff-waybill-row-action-trigger, a, span, i, button) {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Dark-mode selected-row readability.
   Selected rows use a light yellow tint in both themes; use dark foreground
   text in dark mode so highlighted values stay readable. */
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > tr > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] tr:is(.row-selected, .row-selected-noshadow) > :is(td, th) {
    color: #111 !important;
    text-shadow: none !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > :is(td, th)
    :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, a, span, i, label, button, .btn, .dx-link),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .dx-datagrid
    .dx-datagrid-rowsview .dx-data-row:is(.dx-selection, .ff-dx-row-selected) > tr > :is(td, th)
    :is(.dx-template-wrapper, .dx-datagrid-text-content, .ff-grid-cell-value, a, span, i, label, button, .btn, .dx-link),
html body.ff-app.ff-app.ff-app[data-theme="dark"] tr:is(.row-selected, .row-selected-noshadow) > :is(td, th)
    :is(a, span, i, label, button, .btn, .dx-link) {
    color: #111 !important;
    text-shadow: none !important;
}

/* Full Capture field readability pilot.
   This file loads after dx-custom.css, so keep the final text metrics here.
   Do not set heights: the capture layout remains the single owner of field size. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture {
    --ff-full-capture-readable-font-size: 16.52px;
    --ff-full-capture-readable-line-height: 18.36px;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form input.form-control.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form select.form-control.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form textarea.form-control.form-control {
    font-size: 16.52px !important;
    line-height: 18.36px !important;
    padding: 1.5px 2px 4.5px 4px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .input-icon > input.form-control.form-control:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 33px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-search.form-control {
    font-size: 16.52px !important;
    line-height: 18.36px !important;
    padding-bottom: 4.5px !important;
    padding-top: 1.5px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 4px !important;
    padding-right: 16px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-search.form-control {
    padding-left: 4px !important;
    padding-right: 2px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, span) {
    font-size: inherit !important;
    line-height: 18.36px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, .ui-select-match-text span, .ui-select-placeholder) {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap :is(.ui-select-placeholder.ng-hide, .ui-select-match-text.ng-hide, .ui-select-search.ng-hide, .ui-select-match.ng-hide),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-match-text.ng-hide * {
    display: none !important;
}

/* Full Capture compact final corrections.
   This file loads after dx-custom.css, so repeat the compact-only fixes here. */
@media (min-width: 768px) {
    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-sr-card > .row:first-of-type {
        column-gap: var(--ff-waybill-ui-column-gap, 6px) !important;
        display: grid !important;
        grid-template-columns: minmax(88px, 132px) minmax(0, 1fr) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-3,
    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-9,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-sr-card > .row:first-of-type > .col-md-3,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-sr-card > .row:first-of-type > .col-md-9 {
        float: none !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }
}

@media (min-width: 992px) {
    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-basic-details .ff-full-basic-row,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-basic-details .ff-full-basic-row {
        column-gap: 12px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-basic-details .ff-full-basic-row > .col-md-1,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-basic-details .ff-full-basic-row > .col-md-1 {
        flex: 0 0 120px !important;
        float: none !important;
        max-width: 120px !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 120px !important;
    }

    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-basic-details .ff-full-basic-row > .col-md-3:not(.ff-full-waybill-no-field),
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-basic-details .ff-full-basic-row > .col-md-3:not(.ff-full-waybill-no-field) {
        flex: 0 1 360px !important;
        float: none !important;
        max-width: 360px !important;
        min-width: 260px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 360px !important;
    }

    html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
        .ff-waybill.ff-full-capture .ff-basic-details .ff-full-basic-row > .ff-full-basic-docs,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact .ff-basic-details .ff-full-basic-row > .ff-full-basic-docs {
        flex: 1 1 auto !important;
        float: none !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form input.form-control.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form input.form-control.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form select.form-control.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form select.form-control.form-control,
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form textarea.form-control.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form textarea.form-control.form-control {
    font-size: 15.3px !important;
    line-height: 16.2px !important;
    padding: 2px 2px 5.7px 4px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .input-icon > input.form-control.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form .input-icon > input.form-control.form-control:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 33px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture .ff-basic-details .ff-full-basic-row :is(.ff-waybill-copy-field, .ff-record-copy-field) > .input-group-btn,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact
    .ff-basic-details .ff-full-basic-row :is(.ff-waybill-copy-field, .ff-record-copy-field) > .input-group-btn {
    align-self: center !important;
    display: flex !important;
    flex: 0 0 30px !important;
    height: 32px !important;
    max-height: 32px !important;
    min-height: 32px !important;
    width: 30px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture .ff-basic-details .ff-full-basic-row :is(.ff-waybill-copy-field, .ff-record-copy-field) > .input-group-btn > :is(.ff-waybill-copy-btn, .ff-record-copy-btn),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact
    .ff-basic-details .ff-full-basic-row :is(.ff-waybill-copy-field, .ff-record-copy-field) > .input-group-btn > :is(.ff-waybill-copy-btn, .ff-record-copy-btn) {
    align-self: center !important;
    height: 32px !important;
    line-height: 1 !important;
    max-height: 32px !important;
    min-height: 32px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control,
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-search.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-search.form-control {
    font-size: 15.3px !important;
    line-height: 16.2px !important;
    padding-bottom: 5.7px !important;
    padding-top: 2px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, span),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form
    .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, span) {
    line-height: 16.2px !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, .ui-select-match-text span, .ui-select-placeholder),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form
    .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control :is(.ui-select-match-text, .ui-select-match-text span, .ui-select-placeholder) {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap :is(.ui-select-placeholder.ng-hide, .ui-select-match-text.ng-hide, .ui-select-search.ng-hide, .ui-select-match.ng-hide),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form
    .ui-select-bootstrap.ui-select-bootstrap :is(.ui-select-placeholder.ng-hide, .ui-select-match-text.ng-hide, .ui-select-search.ng-hide, .ui-select-match.ng-hide),
html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture.ff-full-capture #form#form .ui-select-bootstrap.ui-select-bootstrap .ui-select-match-text.ng-hide *,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture.ff-view-compact #form#form
    .ui-select-bootstrap.ui-select-bootstrap .ui-select-match-text.ng-hide * {
    display: none !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label > .ff-quick-town-label-actions,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact
    .ff-sr-card .ff-quick-town-label > .ff-quick-town-label-actions {
    height: 16px !important;
    line-height: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    top: -3px !important;
    transform: none !important;
    width: auto !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label .ff-quick-town-lock,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact
    .ff-sr-card .ff-quick-town-label .ff-quick-town-lock {
    flex: 0 0 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    max-height: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    width: 16px !important;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-full-capture .ff-sr-card .ff-quick-town-label .ff-quick-town-lock i,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-view-compact
    .ff-sr-card .ff-quick-town-label .ff-quick-town-lock i {
    font-size: 9px !important;
}

/* Full Capture sender/receiver identity row.
   Match Account width to the Client Acc# field and give the name list the rest.
   Hide Bootstrap row clearfix pseudo-elements so they cannot become grid cells. */
@media (min-width: 768px) {
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type {
        column-gap: var(--ff-waybill-ui-column-gap, 6px) !important;
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row::before,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row::after,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type::before,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type::after {
        content: none !important;
        display: none !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-account-col,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-3:first-child {
        grid-column: 1 !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-name-col,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-9:nth-child(2) {
        grid-column: 2 !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-account-col,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-name-col,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-3:first-child,
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-9:nth-child(2) {
        float: none !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-account-col :is(.form-control, .ui-select-container),
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-3:first-child :is(.form-control, .ui-select-container) {
        max-width: 120px !important;
        width: 120px !important;
    }

    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .ff-full-sr-identity-row > .ff-full-sr-name-col :is(.ui-select-container, .ui-select-bootstrap, .ui-select-match, .ui-select-search, .btn.form-control),
    html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture .ff-sr-card > .row:first-of-type > .col-md-9:nth-child(2) :is(.ui-select-container, .ui-select-bootstrap, .ui-select-match, .ui-select-search, .btn.form-control) {
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Full Capture Other Details dates: the narrow Col/Del/Book date fields need
   less icon padding so the full date value is not clipped on the right. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form
    .ff-other-details .ff-full-date-field .input-icon > input.form-control.form-control:is([name="collectDate"], [name="deliverDate"], [name="bookDate"]) {
    font-size: 16.2px !important;
    line-height: 22px !important;
    padding-left: 17px !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* Full Capture charges: the VAT total amounts are display cells, not inputs.
   Keep the amounts the same size as the charge fields above, but leave the
   captions matched to the normal charge captions. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main
    .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    font-size: var(--ff-full-capture-readable-font-size, 13px) !important;
    height: calc(var(--ff-full-capture-readable-line-height, 18px) + 2px) !important;
    line-height: var(--ff-full-capture-readable-line-height, 18px) !important;
    white-space: nowrap !important;
}

/* Final shared RATE balance.
   This file loads after dx-custom.css, so mirror the shared Charges/Variables
   balance here to keep Waybill Stages from reverting to its older compact rule. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col {
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 559px !important;
    float: none !important;
    max-width: 559px !important;
    min-width: 559px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 559px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 559px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::before,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::after,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::before,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::after,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::before,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row::after {
    content: none !important;
    display: none !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-charges-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-charges-section,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-charges-section {
    box-sizing: border-box !important;
    flex: 0 0 309px !important;
    float: none !important;
    max-width: 309px !important;
    min-width: 309px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 309px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-charges-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-charges-section > fieldset,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-charges-section > fieldset {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 309px !important;
    min-width: 309px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 309px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-vars-section,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-vars-section,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-vars-section {
    box-sizing: border-box !important;
    flex: 0 0 242px !important;
    float: none !important;
    max-width: 242px !important;
    min-width: 242px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 242px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-vars-section > fieldset,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-vars-section > fieldset,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct .ff-rating-vars-section > fieldset {
    box-sizing: border-box !important;
    max-width: 242px !important;
    width: 242px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: auto !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
    width: 286px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 116px !important;
    padding-left: 2px !important;
    padding-right: 4px !important;
    width: 116px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 168px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 168px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-rating-charges-section input.editable-rates.maxWidth100,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-rating-charges-section input.editable-rates.maxWidth100,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-rating-charges-section input.editable-rates.maxWidth100 {
    max-width: none !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child,
html body.ff-app.ff-app.ff-app #wizard.ff-stages-capture .ff-stages-rating-direct fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    font-size: var(--ff-full-capture-readable-font-size, var(--ff-quick-capture-readable-font-size, 13px)) !important;
    height: calc(var(--ff-full-capture-readable-line-height, var(--ff-quick-capture-readable-line-height, 18px)) + 2px) !important;
    line-height: var(--ff-full-capture-readable-line-height, var(--ff-quick-capture-readable-line-height, 18px)) !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
}

/* Full/Quick Capture RATE trim: keep Stages on its separately tuned layout.
   These are final absolute widths, not further percentage reductions. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page {
    --ff-capture-rate-charges-col-width: 497px;
    --ff-capture-rate-charges-width: 247px;
    --ff-capture-rate-charges-table-width: 224px;
    --ff-capture-rate-charges-label-width: 92px;
    --ff-capture-rate-charges-value-width: 132px;
    --ff-capture-rate-mass-width: 282px;
    --ff-capture-rate-mass-table-width: 260px;
    --ff-capture-rate-mass-label-width: 132px;
    --ff-capture-rate-mass-value-width: 128px;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset > .ff-rating-compact-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col {
    flex: 0 0 var(--ff-capture-rate-charges-col-width) !important;
    max-width: var(--ff-capture-rate-charges-col-width) !important;
    min-width: var(--ff-capture-rate-charges-col-width) !important;
    width: var(--ff-capture-rate-charges-col-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-rating-fieldset .ff-rating-charges-col > .ff-rating-split-row {
    width: var(--ff-capture-rate-charges-col-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-charges-section {
    flex: 0 0 var(--ff-capture-rate-charges-width) !important;
    max-width: var(--ff-capture-rate-charges-width) !important;
    min-width: var(--ff-capture-rate-charges-width) !important;
    width: var(--ff-capture-rate-charges-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-charges-section > fieldset {
    max-width: var(--ff-capture-rate-charges-width) !important;
    min-width: var(--ff-capture-rate-charges-width) !important;
    width: var(--ff-capture-rate-charges-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    width: var(--ff-capture-rate-charges-table-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: var(--ff-capture-rate-charges-label-width) !important;
    width: var(--ff-capture-rate-charges-label-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: var(--ff-capture-rate-charges-value-width) !important;
    width: var(--ff-capture-rate-charges-value-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-mass-section {
    box-sizing: border-box !important;
    flex: 0 0 var(--ff-capture-rate-mass-width) !important;
    float: none !important;
    max-width: var(--ff-capture-rate-mass-width) !important;
    min-width: var(--ff-capture-rate-mass-width) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-capture-rate-mass-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page .ff-rating-mass-section > fieldset {
    box-sizing: border-box !important;
    max-width: var(--ff-capture-rate-mass-width) !important;
    min-width: var(--ff-capture-rate-mass-width) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: var(--ff-capture-rate-mass-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed {
    margin-left: auto !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
    width: var(--ff-capture-rate-mass-table-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: var(--ff-capture-rate-mass-label-width) !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    width: var(--ff-capture-rate-mass-label-width) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: var(--ff-capture-rate-mass-value-width) !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    width: var(--ff-capture-rate-mass-value-width) !important;
}

/* Quick Capture client row: keep the Client list top aligned with Acc #. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row .ff-quick-client-field .form-group {
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row .ff-client-lock-label {
    display: block !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-bottom: 0 !important;
    min-height: 14px !important;
    overflow: visible !important;
    padding-right: 60px !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row .ff-client-lock-label:has(.ff-client-clear) {
    padding-right: 112px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row .ff-client-lock-label > span:first-child {
    display: inline-block !important;
    line-height: 14px !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row .ff-client-lock-label > .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    justify-content: flex-end !important;
    line-height: 22px !important;
    min-height: 22px !important;
    min-width: 50px !important;
    position: absolute !important;
    right: 0 !important;
    top: -5px !important;
    transform: none !important;
    width: auto !important;
    z-index: 6 !important;
}

/* Capture parcel grid: existing rows use custom-form-control, so size them with the new row. */
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid {
    --ff-parcel-grid-readable-font-size: var(--ff-full-capture-readable-font-size, var(--ff-quick-capture-readable-font-size, 18.36px));
    --ff-parcel-grid-readable-line-height: var(--ff-full-capture-readable-line-height, var(--ff-quick-capture-readable-line-height, 18.36px));
    --ff-parcel-grid-vol-mass-font-size: 15.68px;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid {
    --ff-parcel-grid-readable-font-size: var(--ff-quick-capture-readable-font-size, 18.36px);
    --ff-parcel-grid-readable-line-height: var(--ff-quick-capture-readable-line-height, 18.36px);
    --ff-parcel-grid-vol-mass-font-size: 15.68px;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid {
    --ff-parcel-grid-readable-font-size: var(--ff-quick-capture-readable-font-size, 18.36px);
    --ff-parcel-grid-readable-line-height: var(--ff-quick-capture-readable-line-height, 18.36px);
    --ff-parcel-grid-vol-mass-font-size: 15.68px;
}

html body.ff-app.ff-app.ff-app:is(.ff-ui-density-compact, .ff-grid-density-compact, [data-ui-density="compact"], [data-grid-density="compact"], [data-grid-font-size="small"])
    .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid {
    --ff-parcel-grid-readable-font-size: 15.3px;
    --ff-parcel-grid-readable-line-height: 16.2px;
    --ff-parcel-grid-vol-mass-font-size: 14.15px;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td input.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td input.custom-form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td textarea.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td select.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td .ui-select-bootstrap > .ui-select-match > .btn.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td .ui-select-bootstrap .ui-select-search.form-control {
    font-size: var(--ff-parcel-grid-readable-font-size) !important;
    line-height: var(--ff-parcel-grid-readable-line-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td input.form-control.form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td input.custom-form-control:not([type="checkbox"]):not([type="radio"]),
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td textarea.form-control.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td select.form-control.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td .ui-select-bootstrap.ui-select-bootstrap > .ui-select-match > .btn.form-control,
html body.ff-app.ff-app.ff-app .ff-waybill.ff-full-capture.ff-full-capture #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td .ui-select-bootstrap.ui-select-bootstrap .ui-select-search.form-control {
    font-size: var(--ff-parcel-grid-readable-font-size) !important;
    line-height: var(--ff-parcel-grid-readable-line-height) !important;
}

html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td input[name="Vol"],
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page #form#form table.custom-dx-table.ff-parcel-grid > tbody > tr > td input[name="Mass"],
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td input[name="Vol"],
html body.ff-app.ff-app.ff-app .ff-waybill.ff-capture-page table.custom-dx-table.ff-parcel-grid > tbody > tr > td input[name="Mass"] {
    font-size: var(--ff-parcel-grid-vol-mass-font-size) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* View Tracking final command/selector alignment.
   This file loads after dx-custom.css, so keep the page-specific correction here. */
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    :is(.dx-link, .dx-button, .dx-button-content) {
    align-items: center !important;
    display: flex !important;
    float: none !important;
    height: 100% !important;
    justify-content: center !important;
    left: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: var(--ff-grid-row-height, 22px) !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    text-align: center !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    :is(.dx-link-icon, .dx-icon, .fa, .fa-eye, .dx-icon.fa-eye)::before,
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    :is(.dx-link-icon, .dx-icon, .fa, .fa-eye, .dx-icon.fa-eye) {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    text-align: center !important;
    top: auto !important;
    transform: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    :is(.dx-checkbox, .dx-checkbox-container, .dx-select-checkbox) {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: var(--ff-grid-row-height, 22px) !important;
    padding: 0 !important;
    position: relative !important;
    top: 1px !important;
    transform: none !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    > :is(.ff-v26-native-select-checkbox, input[type="checkbox"].ff-v26-native-select-checkbox),
html body.ff-app.ff-app.ff-app .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-v26-single-table-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-tracking-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    > .dx-template-wrapper
    > :is(.ff-v26-native-select-checkbox, input[type="checkbox"].ff-v26-native-select-checkbox) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 1px !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* View Waybills row-click open action.
   The row command column now carries Print + Actions, so keep the sticky offsets
   and rendered colgroup in sync with the wider command slot. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid {
    --ff-standard-grid-command-width: 96px !important;
    --ff-waybill-sticky-action-width: 96px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-command-col, th.ff-waybill-command-col),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    colgroup > col:nth-child(2) {
    max-width: 96px !important;
    min-width: 96px !important;
    width: 96px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview td.ff-waybill-command-col > .dx-template-wrapper {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(td.ff-waybill-command-col, th.ff-waybill-command-col),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview :is(td.ff-waybill-command-col, th.ff-waybill-command-col) > :is(.dx-template-wrapper, .ff-waybill-row-action-buttons) {
    overflow: visible !important;
    text-overflow: clip !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .ff-waybill-row-action-buttons {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 94px !important;
    gap: 2px !important;
    justify-content: center !important;
    max-width: 94px !important;
    min-width: 94px !important;
    overflow: visible !important;
    width: 94px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row > td:not(.dx-command-select):not(.dx-command-edit):not(.ff-waybill-native-select-col):not(.ff-waybill-command-col) {
    cursor: pointer !important;
}

@keyframes ff-waybill-row-opening-pulse {
    0% {
        box-shadow: inset 0 0 0 9999px rgba(59, 117, 247, 0.30), inset 0 0 0 1px rgba(59, 117, 247, 0.60);
    }

    100% {
        box-shadow: inset 0 0 0 9999px rgba(59, 117, 247, 0.12), inset 0 0 0 1px rgba(59, 117, 247, 0.35);
    }
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-opening > :is(td, th),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-opening > tr > :is(td, th) {
    animation: ff-waybill-row-opening-pulse 0.32s ease-out 1 !important;
    background-color: #dceaff !important;
    color: #111 !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-opening > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-opening > tr > :is(td, th) {
    background-color: #263a59 !important;
    color: #f3f7ff !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.ff-waybill-row-open-trigger, .ff-waybill-row-action-trigger) {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 22px !important;
    font-size: 14px !important;
    justify-content: center !important;
    max-width: 22px !important;
    min-width: 22px !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 !important;
    visibility: visible !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .ff-waybill-row-action-trigger > .fa {
    display: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .ff-waybill-row-action-trigger::before {
    color: inherit !important;
    content: "\22EE" !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview
    :is(td.ff-waybill-command-col, th.ff-waybill-command-col)
    :is(.ff-waybill-row-open-trigger, .ff-waybill-row-open-trigger > .fa) {
    background: transparent !important;
    color: var(--ff-primary, #6aa2ff) !important;
}

/* Final View Waybills row action feedback.
   Keep this at the end so dark-mode cell paint and selected-row rules cannot
   hide the working row highlight. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy > :is(td, th),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy.dx-row-alt > :is(td, th),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy.dx-selection > :is(td, th) {
    background-color: #fff0a6 !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 214, 85, 0.24), inset 0 0 0 1px rgba(204, 147, 0, 0.42) !important;
    color: #151515 !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy.dx-row-alt > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.ff-waybill-row-busy.dx-selection > :is(td, th) {
    background-color: #8a6a17 !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0.26), inset 0 0 0 1px rgba(255, 213, 79, 0.62) !important;
    color: #fff8dc !important;
}

/* Final View Waybills inline image action.
   Keep image-less rows aligned without exposing a disabled button. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .ff-waybill-row-image-trigger--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Shared compact row actions for processing view grids. */
html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > td:not(.dx-command-select):not(.dx-command-edit):not(.ff-quote-command-col):not(.ff-collection-command-col):not(.ff-quote-select-col):not(.ff-collection-select-col) {
    cursor: pointer !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .ff-collection-command-col, .dx-command-edit) {
    max-width: 74px !important;
    min-width: 74px !important;
    overflow: visible !important;
    width: 74px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .ff-collection-command-col, .dx-command-edit) .ff-grid-row-action-buttons {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: 22px !important;
    justify-content: center !important;
    max-width: 72px !important;
    min-width: 72px !important;
    overflow: visible !important;
    width: 72px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .ff-collection-command-col, .dx-command-edit) .ff-grid-row-action-button {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ff-primary, #2f75ff) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 22px !important;
    font-size: 14px !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 20px !important;
    max-height: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    opacity: 1 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .ff-collection-command-col, .dx-command-edit) .ff-grid-row-action-button:is(:hover, :focus) {
    background: rgba(47, 117, 255, 0.10) !important;
    border-radius: 4px !important;
    color: var(--ff-primary, #2f75ff) !important;
    outline: 1px solid rgba(47, 117, 255, 0.30) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-collections)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .ff-collection-command-col, .dx-command-edit) .ff-grid-row-action-button:disabled {
    cursor: default !important;
    opacity: 0.35 !important;
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-quote-command-col, .dx-command-edit) .ff-quote-row-action-buttons {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Final View Quotes row-action polish.
   Older quote-specific overrides reserved too much viewport height and still
   carried single-icon command styling. Keep the grid full-height and the new
   three-button row action slot separated from QuoteID. */
html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page,
html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes.ff-standard-grid-css-owned {
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: max(260px, calc(100dvh - 260px)) !important;
    --ff-v26-sticky-action-width: 74px !important;
    --ff-v26-sticky-key-left: calc(var(--ff-v26-sticky-select-width, 28px) + var(--ff-v26-sticky-action-width, 74px)) !important;
    --ff-v26-sticky-key-width: 72px !important;
    --ff-v26-sticky-select-width: 28px !important;
    --ff-view-quotes-grid-line: var(--border, #d9dde5) !important;
}

html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page,
html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes.ff-standard-grid-css-owned {
    --ff-standard-grid-rows-max-height: max(260px, calc(100dvh - 280px)) !important;
}

@supports not (height: max(1px, 2px)) {
    html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page,
    html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page
        #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes.ff-standard-grid-css-owned {
        --ff-standard-grid-rows-max-height: calc(100vh - 260px) !important;
    }

    html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
        .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page,
    html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
        .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint.ff-standard-grid-page
        #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes.ff-standard-grid-css-owned {
        --ff-standard-grid-rows-max-height: calc(100vh - 280px) !important;
    }
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview)
    :is(td, th):is(.ff-quote-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    border-right: 1px solid var(--ff-view-quotes-grid-line, var(--border, #d9dde5)) !important;
    box-shadow: inset -1px 0 0 var(--ff-view-quotes-grid-line, var(--border, #d9dde5)) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview)
    :is(td, th):is(.ff-quote-key-col, .ff-v26-sticky-key-col) {
    border-left: 1px solid var(--ff-view-quotes-grid-line, var(--border, #d9dde5)) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-quote-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    > :is(.ff-v26-native-select-checkbox, input[type="checkbox"], .dx-checkbox.dx-widget, .dx-select-checkbox),
html body.ff-app.ff-app.ff-app .ff-view-quotes.ff-view-quotes.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--quotes
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-quote-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    > .dx-template-wrapper
    > :is(.ff-v26-native-select-checkbox, input[type="checkbox"], .dx-checkbox.dx-widget, .dx-select-checkbox) {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections.ff-v26-grid-blueprint {
    --ff-v26-sticky-action-left: calc(var(--ff-v26-sticky-select-width) + var(--ff-v26-sticky-key-width)) !important;
    --ff-v26-sticky-action-width: 58px !important;
    --ff-v26-sticky-key-left: var(--ff-v26-sticky-select-width) !important;
    --ff-v26-sticky-key-width: 64px !important;
    --ff-v26-sticky-select-width: 30px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-collection-select-col, .ff-v26-sticky-select-col, .dx-command-select) {
    max-width: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th).ff-collection-command-col {
    max-width: 58px !important;
    min-width: 58px !important;
    width: 58px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .ff-collection-command-col .ff-grid-row-action-buttons {
    gap: 2px !important;
    max-width: 58px !important;
    min-width: 58px !important;
    width: 58px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-collections.ff-view-collections
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--collections
    .ff-collection-command-col .ff-grid-row-action-button {
    flex-basis: 18px !important;
    font-size: 12px !important;
    height: 18px !important;
    line-height: 18px !important;
    max-height: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    min-width: 18px !important;
    width: 18px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > td:not(.dx-command-select):not(.dx-command-edit):not(.ff-manifest-command-col):not(.ff-manifest-select-col) {
    cursor: pointer !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-manifest-command-col, .dx-command-edit) {
    max-width: 54px !important;
    min-width: 54px !important;
    overflow: visible !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-manifest-command-col, .dx-command-edit) .ff-grid-row-action-buttons {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: 22px !important;
    justify-content: center !important;
    max-width: 52px !important;
    min-width: 52px !important;
    overflow: visible !important;
    width: 52px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-manifest-command-col, .dx-command-edit) .ff-grid-row-action-button {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ff-primary, #2f75ff) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 22px !important;
    font-size: 14px !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 20px !important;
    max-height: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-view-manifests-native-grid {
    --ff-view-manifest-action-width: 54px !important;
    --ff-view-manifest-select-width: 30px !important;
    --ff-v26-sticky-action-left: var(--ff-view-manifest-select-width) !important;
    --ff-v26-sticky-action-width: var(--ff-view-manifest-action-width) !important;
    --ff-v26-sticky-key-left: calc(var(--ff-view-manifest-select-width) + var(--ff-view-manifest-action-width)) !important;
    --ff-v26-sticky-select-width: var(--ff-view-manifest-select-width) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-view-manifests-native-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-manifest-select-col, .ff-v26-sticky-select-col, .dx-command-select) {
    max-width: 30px !important;
    min-width: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 30px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-view-manifests-native-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-manifest-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    max-width: 54px !important;
    min-width: 54px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-view-manifests-native-grid
    .ff-manifest-command-col > .dx-template-wrapper {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 54px !important;
    min-width: 54px !important;
    overflow: visible !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests.ff-view-manifests-native-grid
    .ff-manifest-row-action-buttons {
    align-items: center !important;
    display: inline-flex !important;
    gap: 2px !important;
    height: 22px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 52px !important;
    min-width: 52px !important;
    overflow: visible !important;
    width: 52px !important;
}

/* Final compact row actions for other view/master grids. */
html body.ff-app.ff-app.ff-app :is(.ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    :is(.ff-grid-row-action-buttons, .ff-image-row-action-buttons, .ff-invoice-row-action-buttons, .ff-crdr-row-action-buttons, .ff-debtors-row-action-buttons, .ff-receivers-row-action-buttons, .ff-town-row-action-buttons, .ff-tracking-row-action-buttons) {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    height: 22px !important;
    justify-content: center !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .ff-grid-row-action-button {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ff-primary, #2f75ff) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 22px !important;
    font-size: 14px !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 20px !important;
    max-height: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    opacity: 1 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 22px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .ff-grid-row-action-button:is(:hover, :focus) {
    background: rgba(47, 117, 255, 0.10) !important;
    border-radius: 4px !important;
    color: var(--ff-primary, #2f75ff) !important;
    outline: 1px solid rgba(47, 117, 255, 0.30) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .ff-grid-row-action-button:disabled {
    cursor: default !important;
    opacity: 0.35 !important;
    outline: 0 !important;
}

html body.ff-app.ff-app.ff-app .ff-tracking #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-parcel-tracking-command-col, .ff-tracking-command-col, .dx-command-edit),
html body.ff-app.ff-app.ff-app .ff-view-invoices #clientGridContainer#clientGridContainer.ff-standard-grid
    :is(.ff-invoice-view-command-col, .dx-command-edit),
html body.ff-app.ff-app.ff-app .ff-view-crdr #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-crdr-command-col, .dx-command-edit),
html body.ff-app.ff-app.ff-app .ff-debtors #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-debtors-summary-command-col, .dx-command-edit),
html body.ff-app.ff-app.ff-app .ff-receivers #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-receivers-command-col, .dx-command-edit) {
    max-width: 54px !important;
    min-width: 54px !important;
    overflow: visible !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-invoices #clientGridContainer#clientGridContainer.ff-standard-grid
    :is(.ff-invoice-view-command-col, .dx-command-edit) {
    max-width: 76px !important;
    min-width: 76px !important;
    overflow: visible !important;
    width: 76px !important;
}

html body.ff-app.ff-app.ff-app .ff-debtors #gridContainer#gridContainer.ff-standard-grid
    .ff-debtors-summary-command-col {
    max-width: 76px !important;
    min-width: 76px !important;
    overflow: visible !important;
    width: 76px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-invoices #waybillGridContainer#waybillGridContainer.ff-standard-grid
    :is(.ff-invoice-view-waybill-command-col, .dx-command-edit) {
    max-width: 98px !important;
    min-width: 98px !important;
    overflow: visible !important;
    width: 98px !important;
}

html body.ff-app.ff-app.ff-app .ff-imaging-list #gridContainer#gridContainer.ff-standard-grid
    :is(.ff-image-command-col, .dx-command-edit) {
    max-width: 74px !important;
    min-width: 74px !important;
    overflow: visible !important;
    width: 74px !important;
}

html body.ff-app.ff-app.ff-app .ff-town-master #townMasterGrid#townMasterGrid.ff-standard-grid
    :is(.ff-town-command-col, .dx-command-edit) {
    max-width: 30px !important;
    min-width: 30px !important;
    overflow: visible !important;
    width: 30px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > td:not(.dx-command-select):not(.dx-command-edit):not(.ff-v26-sticky-action-col):not(.ff-v26-sticky-select-col) {
    cursor: pointer !important;
}

/* Final shared row-action feedback for migrated view grids.
   Collections keep their existing colour-coded row paint, but their clicked
   action button still shows the local busy spinner. */
html body.ff-app.ff-app.ff-app .ff-grid-row-action-button.ff-grid-row-action-button--busy {
    color: transparent !important;
    cursor: wait !important;
    position: relative !important;
}

html body.ff-app.ff-app.ff-app .ff-grid-row-action-button.ff-grid-row-action-button--busy > :is(.fa, .glyphicon, .dx-icon) {
    opacity: 0 !important;
    visibility: hidden !important;
}

html body.ff-app.ff-app.ff-app .ff-grid-row-action-button.ff-grid-row-action-button--busy::after {
    animation: ff-row-action-busy-spin 0.72s linear infinite !important;
    border: 2px solid rgba(47, 117, 255, 0.24) !important;
    border-radius: 50% !important;
    border-top-color: var(--ff-primary, #2f75ff) !important;
    box-sizing: border-box !important;
    content: "" !important;
    height: 13px !important;
    left: 50% !important;
    margin-left: -6.5px !important;
    margin-top: -6.5px !important;
    position: absolute !important;
    top: 50% !important;
    width: 13px !important;
}

@keyframes ff-row-action-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy > :is(td, th),
html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy.dx-row-alt > :is(td, th),
html body.ff-app.ff-app.ff-app :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy.dx-selection > :is(td, th) {
    background-color: #fff0a6 !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 214, 85, 0.24), inset 0 0 0 1px rgba(204, 147, 0, 0.42) !important;
    color: #151515 !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"] :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy.dx-row-alt > :is(td, th),
html body.ff-app.ff-app.ff-app[data-theme="dark"] :is(.ff-view-quotes, .ff-view-manifests-simple, .ff-view-manifests, .ff-tracking, .ff-imaging-list, .ff-view-invoices, .ff-view-crdr, .ff-debtors, .ff-receivers, .ff-town-master)
    :is(#gridContainer, #clientGridContainer, #waybillGridContainer, #townMasterGrid).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row.ff-grid-row-action-busy.dx-selection > :is(td, th) {
    background-color: #8a6a17 !important;
    box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0.26), inset 0 0 0 1px rgba(255, 213, 79, 0.62) !important;
    color: #fff8dc !important;
}

/* Final View Invoices utility-cell alignment. */
html body.ff-app.ff-app.ff-app .ff-view-invoices.ff-view-invoices
    :is(#clientGridContainer, #waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-invoice-native-select-col, .ff-v26-sticky-select-col, .dx-command-select, .ff-invoice-view-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-invoices.ff-view-invoices
    :is(#clientGridContainer, #waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-invoice-native-select-col, .ff-v26-sticky-select-col, .dx-command-select, .ff-invoice-view-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    > .dx-template-wrapper {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: var(--ff-grid-row-height, 22px) !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-invoices.ff-view-invoices
    :is(#clientGridContainer, #waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-invoice-native-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    :is(.ff-invoice-native-select-checkbox, input[type="checkbox"], .dx-checkbox.dx-widget, .dx-select-checkbox) {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-invoices.ff-view-invoices
    :is(#clientGridContainer, #waybillGridContainer).ff-standard-grid
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-invoice-view-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    :is(.ff-invoice-row-action-buttons, .ff-grid-row-action-buttons) {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 22px !important;
    vertical-align: middle !important;
}

/* Final View Credits/Debits utility-column and viewport polish. */
html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page,
html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr.ff-standard-grid-css-owned {
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: max(260px, calc(100dvh - 283px)) !important;
    --ff-v26-sticky-action-left: var(--ff-v26-sticky-select-width, 30px) !important;
    --ff-v26-sticky-action-width: 54px !important;
    --ff-v26-sticky-key-left: calc(var(--ff-v26-sticky-select-width, 30px) + var(--ff-v26-sticky-action-width, 54px)) !important;
    --ff-v26-sticky-key-width: 73px !important;
    --ff-v26-sticky-key2-left: calc(var(--ff-v26-sticky-key-left, 84px) + var(--ff-v26-sticky-key-width, 73px)) !important;
    --ff-v26-sticky-key2-width: 108px !important;
    --ff-v26-sticky-select-width: 30px !important;
    --ff-crdr-guide-action: calc(var(--ff-v26-sticky-select-width, 30px) + var(--ff-v26-sticky-action-width, 54px)) !important;
    --ff-crdr-guide-trans-id: calc(var(--ff-crdr-guide-action) + var(--ff-v26-sticky-key-width, 73px)) !important;
    --ff-crdr-guide-trans-date: calc(var(--ff-crdr-guide-trans-id) + var(--ff-v26-sticky-key2-width, 108px)) !important;
    --ff-crdr-guide-acc: calc(var(--ff-crdr-guide-trans-date) + 72px) !important;
    --ff-crdr-guide-client: calc(var(--ff-crdr-guide-acc) + 240px) !important;
    --ff-crdr-guide-inv: calc(var(--ff-crdr-guide-client) + 72px) !important;
    --ff-crdr-guide-excl-vat: calc(var(--ff-crdr-guide-inv) + 192px) !important;
    --ff-crdr-guide-vat: calc(var(--ff-crdr-guide-excl-vat) + 192px) !important;
    --ff-crdr-guide-incl-vat: calc(var(--ff-crdr-guide-vat) + 192px) !important;
}

html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page,
html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr.ff-standard-grid-css-owned {
    --ff-standard-grid-rows-max-height: max(260px, calc(100dvh - 303px)) !important;
}

@supports not (height: max(1px, 2px)) {
    html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page,
    html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page
        #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr.ff-standard-grid-css-owned {
        --ff-standard-grid-rows-max-height: calc(100vh - 283px) !important;
    }

    html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
        .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page,
    html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
        .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint.ff-standard-grid-page
        #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr.ff-standard-grid-css-owned {
        --ff-standard-grid-rows-max-height: calc(100vh - 303px) !important;
    }
}

html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td, th):is(.ff-crdr-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    max-width: 54px !important;
    min-width: 54px !important;
    width: 54px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr
    .dx-datagrid-rowsview .dx-data-row > :is(td, th):is(.ff-crdr-select-col, .ff-v26-sticky-select-col, .dx-command-select, .ff-crdr-command-col, .ff-v26-sticky-action-col, .dx-command-edit) {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-crdr-select-col, .ff-v26-sticky-select-col, .dx-command-select, .ff-crdr-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    > .dx-template-wrapper {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: var(--ff-standard-grid-row-height, 22px) !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-crdr-select-col, .ff-v26-sticky-select-col, .dx-command-select)
    :is(.ff-v26-native-select-checkbox, input[type="checkbox"], .dx-checkbox.dx-widget, .dx-select-checkbox) {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-crdr.ff-view-crdr.ff-v26-grid-blueprint
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--crdr
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-crdr-command-col, .ff-v26-sticky-action-col, .dx-command-edit)
    :is(.ff-crdr-row-action-buttons, .ff-grid-row-action-buttons) {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 22px !important;
    width: 52px !important;
}

/* Absolute-final View Waybills checkbox and sticky divider lock.
   This file loads after dx-custom.css, so page-specific checkbox and divider
   corrections must live here to survive the lite grid polish rules. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills {
    --ff-waybill-grid-check-size-final: 18px !important;
    --ff-waybill-grid-check-glyph-final: 14px !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    :is(.ff-waybill-native-select-checkbox, .ff-waybill-native-select-all, input[type="checkbox"], .dx-select-checkbox, .dx-checkbox, .dx-checkbox-container, .dx-checkbox-wrapper),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):not(.dx-command-select):not(.dx-command-edit):not(.ff-waybill-native-select-col):not(.ff-waybill-command-col)
    :is(.dx-checkbox, .dx-checkbox-container, .dx-checkbox-wrapper, .dx-select-checkbox),
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):not(.dx-command-select):not(.dx-command-edit):not(.ff-waybill-native-select-col):not(.ff-waybill-command-col)
    .ff-grid-boolean-checkbox :is(.dx-checkbox, .dx-checkbox-container, .dx-checkbox-wrapper, .dx-select-checkbox) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-waybill-grid-check-size-final) !important;
    justify-content: center !important;
    line-height: var(--ff-waybill-grid-check-size-final) !important;
    margin: 0 auto !important;
    max-height: var(--ff-waybill-grid-check-size-final) !important;
    max-width: var(--ff-waybill-grid-check-size-final) !important;
    min-height: var(--ff-waybill-grid-check-size-final) !important;
    min-width: var(--ff-waybill-grid-check-size-final) !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    vertical-align: middle !important;
    width: var(--ff-waybill-grid-check-size-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):not(.dx-command-select):not(.dx-command-edit):not(.ff-waybill-native-select-col):not(.ff-waybill-command-col)
    .ff-grid-boolean-checkbox {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: var(--ff-waybill-grid-check-size-final) !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview)
    :is(td.dx-command-select, th.dx-command-select)
    .dx-checkbox-icon,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):not(.dx-command-select):not(.dx-command-edit):not(.ff-waybill-native-select-col):not(.ff-waybill-command-col)
    :is(.ff-grid-boolean-checkbox .dx-checkbox-icon, .dx-checkbox-icon) {
    background-clip: padding-box !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-waybill-grid-check-size-final) !important;
    justify-content: center !important;
    line-height: var(--ff-waybill-grid-check-size-final) !important;
    max-height: var(--ff-waybill-grid-check-size-final) !important;
    max-width: var(--ff-waybill-grid-check-size-final) !important;
    min-height: var(--ff-waybill-grid-check-size-final) !important;
    min-width: var(--ff-waybill-grid-check-size-final) !important;
    overflow: visible !important;
    position: relative !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: var(--ff-waybill-grid-check-size-final) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-checkbox-checked .dx-checkbox-icon::before {
    font-size: var(--ff-waybill-grid-check-glyph-final) !important;
    left: 50% !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    :is(.dx-datagrid-headers, .dx-datagrid-filter-row, .dx-datagrid-rowsview, .dx-datagrid-total-footer)
    :is(td.ff-waybill-key-col, th.ff-waybill-key-col) {
    border-right-color: var(--ff-waybill-sticky-border, var(--border, #d2d8e0)) !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    box-shadow: inset -2px 0 0 var(--ff-waybill-sticky-border, var(--border, #d2d8e0)) !important;
}

/* Absolute-final View Waybills boolean data cell lock.
   Keep read-only boolean flags the same visual size and centred as selectors. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-grid-boolean-cell, .ff-grid-boolean-col) {
    --ff-waybill-grid-check-size-final: 18px !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-grid-boolean-cell, .ff-grid-boolean-col)
    > .ff-grid-boolean-checkbox {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    max-height: none !important;
    min-height: var(--ff-waybill-grid-check-size-final) !important;
    overflow: visible !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row
    > :is(td, th):is(.ff-grid-boolean-cell, .ff-grid-boolean-col)
    .ff-grid-boolean-checkbox :is(.dx-checkbox, .dx-checkbox-container, .dx-checkbox-wrapper, .dx-select-checkbox, .dx-checkbox-icon, input[type="checkbox"]) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: var(--ff-waybill-grid-check-size-final) !important;
    justify-content: center !important;
    left: auto !important;
    line-height: var(--ff-waybill-grid-check-size-final) !important;
    margin: 0 auto !important;
    max-height: var(--ff-waybill-grid-check-size-final) !important;
    max-width: var(--ff-waybill-grid-check-size-final) !important;
    min-height: var(--ff-waybill-grid-check-size-final) !important;
    min-width: var(--ff-waybill-grid-check-size-final) !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    text-align: center !important;
    top: auto !important;
    transform: none !important;
    vertical-align: middle !important;
    width: var(--ff-waybill-grid-check-size-final) !important;
}

/* View Waybills hover preview.
   CSS-only row hover so mouse movement does not touch Angular or grid state. */
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills {
    --ff-waybill-row-hover-bg: color-mix(in srgb, var(--primary, #337bf2) 8%, var(--surface, #fff)) !important;
    --ff-waybill-row-hover-alt-bg: color-mix(in srgb, var(--primary, #337bf2) 9%, var(--surface-2, #f7f8fa)) !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):hover > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):hover > tr > td {
    background-color: var(--ff-waybill-row-hover-bg) !important;
    box-shadow: none !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):hover > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):hover > tr > td,
html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills
    .dx-datagrid-rowsview .dx-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):hover > tr > td {
    background-color: var(--ff-waybill-row-hover-alt-bg) !important;
    box-shadow: none !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):hover
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-row-hover-bg) !important;
    background-color: var(--ff-waybill-row-hover-bg) !important;
    box-shadow: none !important;
}

html body.ff-app.ff-app.ff-app .ff-view-waybills.ff-view-waybills
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--waybills.ff-waybill-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):hover
    > :is(td.ff-waybill-native-select-col, th.ff-waybill-native-select-col, td.ff-waybill-command-col, th.ff-waybill-command-col, td.ff-waybill-key-col, th.ff-waybill-key-col) {
    --ff-waybill-sticky-cell-bg: var(--ff-waybill-row-hover-alt-bg) !important;
    background-color: var(--ff-waybill-row-hover-alt-bg) !important;
    box-shadow: none !important;
}

/* Shared stale no-data guard.
   DevExtreme can briefly leave the no-data overlay visible after rows render,
   especially on grids with fixed panes. Hide it as soon as data is present. */
html body.ff-app.ff-app.ff-app
    :is(.ff-standard-grid-page, .ff-query-grid-page):not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid):is(.ff-grid-has-data, .ff-grid-has-rendered-data)
    .dx-datagrid-nodata,
html body.ff-app.ff-app.ff-app
    :is(.ff-standard-grid-page, .ff-query-grid-page):not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid):has(.dx-datagrid-rowsview .dx-data-row:not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row))
    .dx-datagrid-nodata {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Shared view-grid row hover.
   Normal panes use CSS :hover; fixed-pane row segments can also receive
   .ff-grid-row-hover-tracked from the lightweight shared view-grid tracker. */
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid) {
    --ff-view-grid-row-hover-bg: color-mix(in srgb, var(--primary, #337bf2) 8%, var(--surface, #fff)) !important;
    --ff-view-grid-row-hover-alt-bg: color-mix(in srgb, var(--primary, #337bf2) 9%, var(--surface-2, #f7f8fa)) !important;
    --ff-view-grid-row-hover-overlay: color-mix(in srgb, var(--primary, #337bf2) 12%, transparent) !important;
}

html body.ff-app.ff-app.ff-app[data-theme="dark"]
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid) {
    --ff-view-grid-row-hover-bg: color-mix(in srgb, var(--primary, #6ea2ff) 18%, var(--surface, #17202a)) !important;
    --ff-view-grid-row-hover-alt-bg: color-mix(in srgb, var(--primary, #6ea2ff) 20%, var(--surface-2, #1d2836)) !important;
    --ff-view-grid-row-hover-overlay: color-mix(in srgb, var(--primary, #6ea2ff) 18%, transparent) !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > tr > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > tr > :is(td, th) {
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > tr > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > tr > :is(td, th) {
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row):hover > tr > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > :is(td, th),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).ff-grid-row-hover-tracked:not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row) > tr > :is(td, th) {
    box-shadow: inset 0 0 0 9999px var(--ff-view-grid-row-hover-overlay) !important;
    transition: none !important;
}

/* Absolute-final View Manifests density guard.
   Keep the manifest view data rows on the same compact row contract as View Invoices. */
html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests {
    --ff-grid-cell-padding-y: 0px !important;
    --ff-standard-grid-cell-line-height: 18px !important;
    --ff-standard-grid-cell-padding-y: 0px !important;
    --ff-standard-grid-row-height: 22px !important;
    --ff-view-manifests-cell-line-height-final: 18px !important;
    --ff-view-manifests-cell-padding-y-final: 0px !important;
    --ff-view-manifests-row-height-final: 22px !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row):not(.dx-freespace-row):not(.dx-virtual-row)
    > :is(td, th) {
    block-size: var(--ff-standard-grid-row-height) !important;
    box-sizing: border-box !important;
    height: var(--ff-standard-grid-row-height) !important;
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    max-height: var(--ff-standard-grid-row-height) !important;
    min-height: var(--ff-standard-grid-row-height) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-standard-grid-cell-padding-y) !important;
    padding-top: var(--ff-standard-grid-cell-padding-y) !important;
    vertical-align: middle !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests
    .dx-datagrid-rowsview :is(tr.dx-row.dx-data-row, tr.dx-data-row, .dx-row.dx-data-row, .dx-data-row):not(.dx-freespace-row):not(.dx-virtual-row)
    > :is(td, th) :is(.dx-template-wrapper, .ff-grid-row-action-buttons, .ff-manifest-row-action-buttons, .ff-grid-row-action-button, .ff-manifest-view-link, a, span, div) {
    line-height: var(--ff-standard-grid-cell-line-height) !important;
    max-height: var(--ff-standard-grid-row-height) !important;
}

html body.ff-app.ff-app.ff-app :is(.ff-view-manifests-simple, .ff-view-manifests)
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--manifests
    .dx-datagrid-rowsview :is(.ff-grid-row-action-button, .ff-manifest-view-link) {
    height: 18px !important;
    line-height: 18px !important;
    max-height: 18px !important;
}

/* Absolute-final View Tracking page fit.
   Keep the grid rows viewport short enough that the page footer and pager fit
   without the browser-level vertical scrollbar. */
html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint.ff-standard-grid-page {
    --ff-standard-grid-effective-rows-height: var(--ff-standard-grid-rows-max-height) !important;
    --ff-standard-grid-rows-max-height: max(220px, calc(100dvh - 288px)) !important;
}

html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
    .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint.ff-standard-grid-page {
    --ff-standard-grid-rows-max-height: max(220px, calc(100dvh - 306px)) !important;
}

html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--tracking.ff-standard-grid-css-owned
    :is(.dx-datagrid-rowsview, .dx-datagrid-rowsview .dx-scrollable, .dx-datagrid-rowsview .dx-scrollable-wrapper, .dx-datagrid-rowsview .dx-scrollable-container) {
    flex-basis: var(--ff-standard-grid-rows-max-height) !important;
    height: var(--ff-standard-grid-rows-max-height) !important;
    max-height: var(--ff-standard-grid-rows-max-height) !important;
}

@supports not (height: 100dvh) {
    html body.ff-app.ff-app.ff-app
        .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint.ff-standard-grid-page {
        --ff-standard-grid-rows-max-height: max(220px, calc(100vh - 288px)) !important;
    }

    html body.ff-app.ff-app.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact)
        .ff-view-tracking.ff-view-tracking.ff-v26-grid-blueprint.ff-standard-grid-page {
        --ff-standard-grid-rows-max-height: max(220px, calc(100vh - 306px)) !important;
    }
}

/* Absolute-final fixed/sticky row-hover parity.
   Some converted view grids keep selector/action/key cells sticky with their own
   backgrounds; paint those cells explicitly so hover follows the complete row. */
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th) {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    --ff-waybill-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    background: var(--ff-view-grid-row-hover-bg) !important;
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-data-row, .dx-row).dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th) {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    --ff-waybill-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    background: var(--ff-view-grid-row-hover-alt-bg) !important;
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .ff-v26-sticky-id-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th) {
    box-shadow: inset 0 0 0 9999px var(--ff-view-grid-row-hover-overlay) !important;
    transition: none !important;
}

/* Absolute-final View Tracking sticky hover parity.
   Tracking has page-specific sticky backgrounds, so override them with the
   same specificity when the hovered/tracked row crosses the fixed columns. */
html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-standard-grid-page.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--tracking.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-tracking-select-col, .ff-tracking-command-col, .ff-tracking-trackid-col, .ff-tracking-waybill-col, .ff-tracking-key-col, .ff-tracking-key2-col, .ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-standard-grid-page.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--tracking.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-data-row, .dx-row):is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th) {
    background: var(--ff-view-grid-row-hover-bg) !important;
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-standard-grid-page.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--tracking.ff-standard-grid-css-owned
    .dx-datagrid-rowsview :is(.dx-data-row, .dx-row).dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-tracking-select-col, .ff-tracking-command-col, .ff-tracking-trackid-col, .ff-tracking-waybill-col, .ff-tracking-key-col, .ff-tracking-key2-col, .ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    .ff-view-tracking.ff-view-tracking.ff-standard-grid-page.ff-standard-grid-page
    #gridContainer#gridContainer.ff-standard-grid.ff-standard-grid--tracking.ff-standard-grid-css-owned
    .dx-datagrid-rowsview .dx-datagrid-content-fixed :is(.dx-data-row, .dx-row).dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th) {
    background: var(--ff-view-grid-row-hover-alt-bg) !important;
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    transition: none !important;
}

/* Absolute-final View Invoices sticky hover parity.
   The invoice sticky shield has page-specific background variables, so repaint
   selector/action/key cells explicitly when the shared tracker marks the row. */
html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-invoice-native-select-col, .ff-invoice-view-command-col, .ff-invoice-view-waybill-command-col, .ff-invoice-view-invoice-key-col, .ff-invoice-view-waybill-key-col, .ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(:nth-child(1), :nth-child(2), :nth-child(3)) {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    background: var(--ff-view-grid-row-hover-bg) !important;
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    box-shadow:
        -2px 0 0 var(--ff-invoice-sticky-cell-bg),
        2px 0 0 var(--ff-invoice-sticky-cell-bg),
        inset -1px 0 0 var(--ff-invoice-sticky-border),
        inset 0 -1px 0 var(--ff-invoice-sticky-border) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(.ff-invoice-native-select-col, .ff-invoice-view-command-col, .ff-invoice-view-waybill-command-col, .ff-invoice-view-invoice-key-col, .ff-invoice-view-waybill-key-col, .ff-v26-sticky-select-col, .ff-v26-sticky-action-col, .ff-v26-sticky-key-col, .ff-v26-sticky-key2-col, .dx-command-select, .dx-command-edit),
html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:is(:hover, .dx-state-hover, .ff-grid-row-hover-tracked):not(.dx-selection):not(.ff-dx-row-selected):not(.ff-grid-row-action-busy):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th):is(:nth-child(1), :nth-child(2), :nth-child(3)) {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    background: var(--ff-view-grid-row-hover-alt-bg) !important;
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    box-shadow:
        -2px 0 0 var(--ff-invoice-sticky-cell-bg),
        2px 0 0 var(--ff-invoice-sticky-cell-bg),
        inset -1px 0 0 var(--ff-invoice-sticky-border),
        inset 0 -1px 0 var(--ff-invoice-sticky-border) !important;
    transition: none !important;
}

/* Absolute-final tracked fixed-cell hover.
   The shared mouse tracker also marks fixed/sticky cells directly so grids with
   protected sticky-cell backgrounds cannot opt out of the row hover tint. */
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > tr > :is(td, th).ff-grid-row-hover-tracked-cell,
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th).ff-grid-row-hover-tracked-cell {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    --ff-waybill-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    background: var(--ff-view-grid-row-hover-bg) !important;
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > tr > :is(td, th).ff-grid-row-hover-tracked-cell,
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page):not(.ff-capture-page):not(.ff-preserve-row-colours)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th).ff-grid-row-hover-tracked-cell {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    --ff-waybill-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    background: var(--ff-view-grid-row-hover-alt-bg) !important;
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    transition: none !important;
}

html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > tr > :is(td, th).ff-grid-row-hover-tracked-cell,
html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-row-alt):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th).ff-grid-row-hover-tracked-cell {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-bg) !important;
    background: var(--ff-view-grid-row-hover-bg) !important;
    background-color: var(--ff-view-grid-row-hover-bg) !important;
    box-shadow:
        -2px 0 0 var(--ff-invoice-sticky-cell-bg),
        2px 0 0 var(--ff-invoice-sticky-cell-bg),
        inset -1px 0 0 var(--ff-invoice-sticky-border),
        inset 0 -1px 0 var(--ff-invoice-sticky-border) !important;
}

html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > tr > :is(td, th).ff-grid-row-hover-tracked-cell,
html body.ff-app.ff-app.ff-app
    .ff-view-invoices.ff-view-invoices.ff-standard-grid-page.ff-standard-grid-page
    :is(#clientGridContainer#clientGridContainer, #waybillGridContainer#waybillGridContainer).ff-invoice-css-sticky-grid
    .dx-datagrid-rowsview .dx-data-row.dx-row-alt:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th).ff-grid-row-hover-tracked-cell {
    --ff-invoice-sticky-cell-bg: var(--ff-view-grid-row-hover-alt-bg) !important;
    background: var(--ff-view-grid-row-hover-alt-bg) !important;
    background-color: var(--ff-view-grid-row-hover-alt-bg) !important;
    box-shadow:
        -2px 0 0 var(--ff-invoice-sticky-cell-bg),
        2px 0 0 var(--ff-invoice-sticky-cell-bg),
        inset -1px 0 0 var(--ff-invoice-sticky-border),
        inset 0 -1px 0 var(--ff-invoice-sticky-border) !important;
}

html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > tr > :is(td, th).ff-grid-row-hover-tracked-cell,
html body.ff-app.ff-app.ff-app
    :is(.ff-page.ff-standard-grid-page, .ff-page.ff-query-grid-page).ff-preserve-row-colours:not(.ff-capture-page)
    :is(.ff-standard-grid, #gridContainer, #gridContainer1, #gridContainer2, #clientGridContainer, #waybillGridContainer, #townMasterGrid, #hubMasterGrid, #integrationEndpointGrid, #integrationDailyGrid, #integrationDetailGrid)
    .dx-datagrid-rowsview .dx-data-row:not(.dx-selection):not(.ff-dx-row-selected):not(.dx-freespace-row):not(.dx-virtual-row):not(.dx-group-row):not(.dx-master-detail-row)
    > :is(td, th).ff-grid-row-hover-tracked-cell {
    box-shadow: inset 0 0 0 9999px var(--ff-view-grid-row-hover-overlay) !important;
    transition: none !important;
}