/* Responsive.css - mobile/tablet fixes for legacy ASP.NET table layouts */
img { max-width: 100%; height: auto; }

.upp-layout-table,
.payment-page-table,
.payment-section-table {
    max-width: 100%;
}

@media (max-width: 900px) {
    .upp-page-shell { padding: 10px; }

    .upp-layout-table,
    .payment-page-table {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .width20,
    .width200 {
        width: 0 !important;
        display: none !important;
    }

    .width1230 { width: 100% !important; }

    .txtLogo,
    .TopText {
        width: 100% !important;
    }

    .upp-main-content { padding: 0 8px 20px; }

    .payment-section-table td[width="400"],
    .payment-section-table td[width="200"] {
        width: auto !important;
    }
}

@media (max-width: 640px) {
    .upp-page-shell { padding: 0; }

    .upp-layout-table { box-shadow: none; }

    .upp-main-content { padding: 0 8px 16px; }

    .payment-page-table,
    .payment-page-table > tbody,
    .payment-page-table > tbody > tr,
    .payment-page-table > tbody > tr > td,
    .payment-section-table,
    .payment-section-table > tbody,
    .payment-section-table > tbody > tr,
    .payment-section-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .payment-section-table {
        border-radius: 8px;
        margin-bottom: 14px;
    }

    .payment-section-table tr {
        padding: 0 12px;
    }

    .payment-section-table td {
        padding: 4px 0;
        text-align: left !important;
        vertical-align: top !important;
    }

    .payment-section-table td:first-child:empty,
    .payment-section-table td:first-child,
    .payment-section-table td:last-child:empty {
        min-height: 0;
    }

    .payment-section-table .txtLabel {
        text-align: left !important;
    }

    .payment-section-table .FormHeaderRow {
        text-align: center !important;
        padding: 12px !important;
    }

    .payment-page input[type="text"],
    .payment-page select,
    .payment-page textarea {
        width: 100% !important;
        min-height: 38px;
    }

    .payment-page input[type="submit"],
    .payment-page input[type="button"],
    .payment-button {
        width: 100% !important;
        min-height: 42px;
        margin-top: 8px;
    }

    .payment-page br {
        line-height: 1.4;
    }

    #tblBkgd,
    #ctl00_tblBkgd {
        width: 100% !important;
    }
}


/* Responsive support for converted legacy ASPX pages */
.legacy-responsive-page {
    width: 100%;
    max-width: 1056px;
    margin: 0 auto;
    overflow-x: auto;
}

.legacy-responsive-page .legacy-responsive-table,
.legacy-responsive-page table {
    max-width: 100%;
}

.legacy-responsive-page input[type="text"],
.legacy-responsive-page input[type="password"],
.legacy-responsive-page input[type="email"],
.legacy-responsive-page input[type="tel"],
.legacy-responsive-page select,
.legacy-responsive-page textarea {
    max-width: 100%;
}

.legacy-responsive-page input[type="submit"],
.legacy-responsive-page input[type="button"],
.legacy-responsive-page button,
.legacy-responsive-page .FormHeaderRow {
    max-width: 100%;
}

@media (max-width: 700px) {
    .legacy-responsive-page {
        overflow-x: visible;
    }

    .legacy-responsive-page table,
    .legacy-responsive-page tbody,
    .legacy-responsive-page tr,
    .legacy-responsive-page td {
        max-width: 100% !important;
    }

    .legacy-responsive-page > table,
    .legacy-responsive-page .legacy-responsive-table {
        width: 100% !important;
        height: auto !important;
    }

    .legacy-responsive-page td {
        word-break: break-word;
    }

    .legacy-responsive-page td[style*="text-align:right"],
    .legacy-responsive-page td[align="right"] {
        text-align: left !important;
    }

    .legacy-responsive-page input[type="text"],
    .legacy-responsive-page input[type="password"],
    .legacy-responsive-page select,
    .legacy-responsive-page textarea,
    .legacy-responsive-page input[type="submit"],
    .legacy-responsive-page input[type="button"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .legacy-responsive-page img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* Second-pass responsive form cleanup: remove fixed column behavior and stack labels/fields on phones. */
.legacy-responsive-page table {
    table-layout: auto;
}

.legacy-responsive-page td,
.legacy-responsive-page th {
    box-sizing: border-box;
}

.legacy-responsive-page td.txtLabel,
.legacy-responsive-page .txtLabel {
    white-space: normal;
}

.legacy-responsive-page td.legacy-spacer {
    width: 16px;
    min-width: 8px;
}

.legacy-responsive-page td.txtLabel + td.legacy-spacer {
    width: 10px;
}

@media (min-width: 701px) {
    .legacy-responsive-page td.txtLabel {
        width: 190px;
        max-width: 240px;
        padding-right: 8px;
    }

    .legacy-responsive-page td.txtError {
        width: 20px;
        min-width: 20px;
    }
}

@media (max-width: 700px) {
    .legacy-responsive-page table,
    .legacy-responsive-page tbody,
    .legacy-responsive-page tr,
    .legacy-responsive-page td,
    .legacy-responsive-page th {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .legacy-responsive-page tr {
        padding: 6px 0;
    }

    .legacy-responsive-page .FormHeaderRow,
    .legacy-responsive-page td[colspan] {
        display: block;
    }

    .legacy-responsive-page td.legacy-spacer {
        display: none !important;
    }

    .legacy-responsive-page td.txtError {
        display: inline-block;
        width: auto !important;
        min-width: 0 !important;
        margin-right: 4px;
        padding-bottom: 0;
    }

    .legacy-responsive-page td.txtError + td.txtLabel,
    .legacy-responsive-page td.txtLabel {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 2px;
        padding-bottom: 5px;
        text-align: left !important;
        font-weight: 600;
        white-space: normal !important;
    }

    .legacy-responsive-page td.txtLabel + td,
    .legacy-responsive-page td.txtLabel + td + td,
    .legacy-responsive-page td.txtLabel + td.legacy-spacer + td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    .legacy-responsive-page input[type="text"],
    .legacy-responsive-page input[type="password"],
    .legacy-responsive-page input[type="email"],
    .legacy-responsive-page input[type="tel"],
    .legacy-responsive-page select,
    .legacy-responsive-page textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        min-height: 38px;
    }

    .legacy-responsive-page input[type="image"] {
        width: auto !important;
        max-width: 100% !important;
    }

    .legacy-responsive-page input[type="submit"],
    .legacy-responsive-page input[type="button"],
    .legacy-responsive-page button {
        white-space: normal;
        max-width: 100% !important;
    }

    .legacy-responsive-page .txtBody10pt,
    .legacy-responsive-page .txtRedMessage,
    .legacy-responsive-page .txtError {
        word-break: normal;
        overflow-wrap: anywhere;
    }
}


/* Third-pass polish: tighter mobile spacing, required mark beside label, and card section consistency. */
.legacy-responsive-page .FormHeaderRow {
    border-radius: 6px 6px 0 0;
}

.legacy-responsive-page .cc-card-choice,
.legacy-responsive-page .cc-card-logo {
    font-weight: normal;
    text-align: left;
}

@media (max-width: 700px) {
    .legacy-responsive-page tr {
        padding: 3px 0 5px;
    }

    .legacy-responsive-page td {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .legacy-responsive-page td.txtError {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 4px;
        padding: 0 !important;
        vertical-align: baseline;
        line-height: 1.25;
    }

    .legacy-responsive-page td.txtError + td.txtLabel,
    .legacy-responsive-page td.txtLabel {
        display: inline-block !important;
        width: auto !important;
        max-width: calc(100% - 18px) !important;
        padding: 0 0 2px 0 !important;
        margin: 0 !important;
        line-height: 1.25;
        vertical-align: baseline;
    }

    .legacy-responsive-page td.txtLabel[colspan] {
        max-width: 100% !important;
    }

    .legacy-responsive-page td.txtLabel + td,
    .legacy-responsive-page td.txtLabel + td + td,
    .legacy-responsive-page td.txtLabel + td.legacy-spacer + td,
    .legacy-responsive-page td.txtError + td.txtLabel + td,
    .legacy-responsive-page td.txtError + td.txtLabel + td + td,
    .legacy-responsive-page td.txtError + td.txtLabel + td.legacy-spacer + td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 1px !important;
        padding-top: 0 !important;
    }

    .legacy-responsive-page .FormHeaderRow {
        padding: 9px 10px !important;
        margin-top: 8px;
        margin-bottom: 4px;
        text-align: center !important;
    }

    .legacy-responsive-page input[type="text"],
    .legacy-responsive-page input[type="password"],
    .legacy-responsive-page input[type="email"],
    .legacy-responsive-page input[type="tel"],
    .legacy-responsive-page select,
    .legacy-responsive-page textarea {
        margin-top: 0 !important;
    }

    .legacy-responsive-page .txtBody10pt,
    .legacy-responsive-page .cc-card-choice,
    .legacy-responsive-page .cc-card-logo {
        text-align: left !important;
        font-weight: normal !important;
    }

    .legacy-responsive-page input[type="radio"],
    .legacy-responsive-page input[type="checkbox"] {
        width: auto !important;
        min-height: 0 !important;
        margin-right: 4px;
    }
}


/* User control responsive polish */
.legacy-responsive-page .memo-control-table,
.memo-control-table,
.responsive-data-grid {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

.legacy-responsive-page .memo-control-table td,
.memo-control-table td {
    box-sizing: border-box;
}

.legacy-responsive-page .memo-control-table input[type="text"],
.legacy-responsive-page .memo-control-table select,
.legacy-responsive-page .memo-control-table textarea,
.memo-control-table input[type="text"],
.memo-control-table select,
.memo-control-table textarea {
    max-width: 100%;
}

@media (max-width: 700px) {
    .legacy-responsive-page .memo-control-table,
    .legacy-responsive-page .memo-control-table tbody,
    .legacy-responsive-page .memo-control-table tr,
    .legacy-responsive-page .memo-control-table td,
    .memo-control-table,
    .memo-control-table tbody,
    .memo-control-table tr,
    .memo-control-table td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .legacy-responsive-page .memo-control-table tr,
    .memo-control-table tr {
        padding: 3px 0 5px;
    }

    .legacy-responsive-page .memo-control-table td,
    .memo-control-table td {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        text-align: left !important;
    }

    .legacy-responsive-page .memo-control-table td.txtError,
    .memo-control-table td.txtError {
        display: inline-block !important;
        width: auto !important;
        margin-right: 4px;
        padding: 0 !important;
        line-height: 1.25;
    }

    .legacy-responsive-page .memo-control-table td.txtError + td.txtLabel,
    .legacy-responsive-page .memo-control-table td.txtLabel,
    .memo-control-table td.txtError + td.txtLabel,
    .memo-control-table td.txtLabel {
        display: inline-block !important;
        width: auto !important;
        max-width: calc(100% - 18px) !important;
        padding: 0 0 2px 0 !important;
        margin: 0 !important;
        line-height: 1.25;
        font-weight: 600;
        vertical-align: baseline;
    }

    .legacy-responsive-page .memo-control-table td.legacy-spacer,
    .memo-control-table td.legacy-spacer {
        display: none !important;
    }

    .legacy-responsive-page .memo-control-table input[type="text"],
    .legacy-responsive-page .memo-control-table select,
    .legacy-responsive-page .memo-control-table textarea,
    .memo-control-table input[type="text"],
    .memo-control-table select,
    .memo-control-table textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        min-height: 38px;
        margin-top: 0 !important;
    }

    .responsive-data-grid {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* v5: read-only review/receipt pages. Keep label and value on one compact line on phones. */
.receipt-summary-page .txtLabel,
.receipt-summary-page .txtBody {
    line-height: 1.35;
}

@media (max-width: 700px) {
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td.txtLabel + td.txtBody),
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:first-child + td.txtLabel + td.txtBody) {
        display: grid !important;
        grid-template-columns: minmax(120px, 48%) minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
        padding: 2px 8px !important;
        margin: 0 !important;
    }

    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:first-child + td.txtLabel + td.txtBody) > td:first-child {
        display: none !important;
    }

    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td.txtLabel + td.txtBody) > td.txtLabel,
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:first-child + td.txtLabel + td.txtBody) > td.txtLabel,
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td.txtLabel + td.txtBody) > td.txtBody,
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:first-child + td.txtLabel + td.txtBody) > td.txtBody {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        text-align: left !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td.txtLabel + td.txtBody) > td.txtBody,
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:first-child + td.txtLabel + td.txtBody) > td.txtBody {
        text-align: right !important;
    }

    .receipt-summary-page .txtLabel span {
        display: inline !important;
        margin: 0 !important;
    }

    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td[colspan="3"]:only-child),
    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table tr:has(> td:only-child:empty) {
        display: none !important;
    }

    .receipt-summary-page table.legacy-responsive-table table.legacy-responsive-table td[colspan="3"] {
        padding: 2px 0 !important;
        min-height: 0 !important;
    }

    .receipt-summary-page br + br {
        display: none;
    }
}


/* v6: receipt pages use 4-column legacy rows. Keep label/value compact on phones. */
@media (max-width: 700px) {
    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody),
    .receipt-summary-page tr:has(> td.txtLabel + td.legacy-spacer + td.txtBody) {
        display: grid !important;
        grid-template-columns: minmax(120px, 48%) minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
        padding: 2px 8px !important;
        margin: 0 !important;
    }

    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody) > td:first-child,
    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody) > td:nth-child(3),
    .receipt-summary-page tr:has(> td.txtLabel + td.legacy-spacer + td.txtBody) > td.legacy-spacer {
        display: none !important;
    }

    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody) > td.txtLabel,
    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody) > td.txtBody,
    .receipt-summary-page tr:has(> td.txtLabel + td.legacy-spacer + td.txtBody) > td.txtLabel,
    .receipt-summary-page tr:has(> td.txtLabel + td.legacy-spacer + td.txtBody) > td.txtBody {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .receipt-summary-page tr:has(> td:first-child + td.txtLabel + td:nth-child(3) + td.txtBody) > td.txtBody,
    .receipt-summary-page tr:has(> td.txtLabel + td.legacy-spacer + td.txtBody) > td.txtBody {
        text-align: right !important;
    }

    .receipt-summary-page tr:has(> td[colspan="4"]:only-child),
    .receipt-summary-page tr:has(> td[colspan="3"]:only-child) {
        display: none !important;
    }

    .receipt-summary-page .FormHeaderRow,
    .receipt-summary-page .txtProcess,
    .receipt-summary-page .txtLabel6 {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .receipt-summary-page td[colspan="4"],
    .receipt-summary-page td[colspan="3"] {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* v7: keep receipt section header bars visible on phones.
   v6 compact receipt rules intentionally hid generic colspan-only spacer rows,
   but receipt section headings also use a single colspan cell with FormHeaderRow. */
@media (max-width: 700px) {
    .receipt-summary-page tr:has(> td.FormHeaderRow[colspan]:only-child) {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 4px 0 !important;
        padding: 0 !important;
    }

    .receipt-summary-page tr:has(> td.FormHeaderRow[colspan]:only-child) > td.FormHeaderRow[colspan] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
    }
}

/* v8: keep receipt result/success message visible on phones.
   These rows are single colspan cells, so the compact receipt rules hid them as spacer rows. */
@media (max-width: 700px) {
    .receipt-summary-page tr:has(> td.txtLabel6[colspan]:only-child),
    .receipt-summary-page tr:has(> td.txtProcess[colspan]:only-child) {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
        padding: 0 !important;
    }

    .receipt-summary-page tr:has(> td.txtLabel6[colspan]:only-child) > td.txtLabel6[colspan],
    .receipt-summary-page tr:has(> td.txtProcess[colspan]:only-child) > td.txtProcess[colspan] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 8px !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
        white-space: normal !important;
    }
}


/* v9: preserve wide LHCU account grids horizontally on phones.
   These are comparison/data tables, so collapsing each cell into a portrait card
   makes the relationships between columns difficult to read. */
.landscape-data-page .landscape-data-grid,
.landscape-data-grid.memo-lhcu-landscape {
    width: 100% !important;
    min-width: 720px !important;
    table-layout: auto !important;
    white-space: nowrap !important;
}

.landscape-data-page td:has(> .landscape-data-grid),
.landscape-data-page .txtBody:has(> .landscape-data-grid) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.landscape-data-page .landscape-data-grid th,
.landscape-data-page .landscape-data-grid td,
.landscape-data-grid.memo-lhcu-landscape th,
.landscape-data-grid.memo-lhcu-landscape td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 90px;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.landscape-data-page .landscape-data-grid tr,
.landscape-data-grid.memo-lhcu-landscape tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 700px) {
    .landscape-data-page {
        overflow-x: hidden;
    }

    .landscape-data-page .landscape-data-grid,
    .landscape-data-grid.memo-lhcu-landscape {
        display: table !important;
        min-width: 720px !important;
    }

    .landscape-data-page td:has(> .landscape-data-grid) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* MemoControlLHCU can be rendered directly inside a host cell. The control
       itself remains a horizontal table; its nearest page/table container scrolls. */
    .landscape-data-grid.memo-lhcu-landscape {
        overflow: visible !important;
    }
}


/* v13, based directly on v9: only the intended LHCU grids scroll horizontally. */
.lhcu-grid-scroll,
.memo-lhcu-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.lhcu-grid-scroll > table.landscape-data-grid,
.memo-lhcu-scroll > table.memo-lhcu-landscape {
    display: table !important;
    width: max-content !important;
    min-width: 720px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: auto !important;
    white-space: nowrap !important;
    position: static !important;
    transform: none !important;
}

.lhcu-grid-scroll > table.landscape-data-grid tr,
.memo-lhcu-scroll > table.memo-lhcu-landscape tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lhcu-grid-scroll > table.landscape-data-grid th,
.lhcu-grid-scroll > table.landscape-data-grid td,
.memo-lhcu-scroll > table.memo-lhcu-landscape th,
.memo-lhcu-scroll > table.memo-lhcu-landscape td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 110px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.memo-lhcu-scroll > table.memo-lhcu-landscape th:nth-child(1),
.memo-lhcu-scroll > table.memo-lhcu-landscape td:nth-child(1) { min-width: 150px !important; }
.memo-lhcu-scroll > table.memo-lhcu-landscape th:nth-child(2),
.memo-lhcu-scroll > table.memo-lhcu-landscape td:nth-child(2) { min-width: 140px !important; }
.memo-lhcu-scroll > table.memo-lhcu-landscape th:nth-child(3),
.memo-lhcu-scroll > table.memo-lhcu-landscape td:nth-child(3) { min-width: 180px !important; }
.memo-lhcu-scroll > table.memo-lhcu-landscape th:nth-child(4),
.memo-lhcu-scroll > table.memo-lhcu-landscape td:nth-child(4) { min-width: 155px !important; }

@media (max-width: 700px) {
    /* Undo v9's generic parent-cell scroller only for the now explicitly wrapped grid. */
    .landscape-data-page td:has(> .lhcu-grid-scroll),
    .landscape-data-page .txtBody:has(> .lhcu-grid-scroll) {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .lhcu-grid-scroll,
    .memo-lhcu-scroll {
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .lhcu-grid-scroll > table.landscape-data-grid,
    .memo-lhcu-scroll > table.memo-lhcu-landscape {
        display: table !important;
    }
}


/* v14: AccountPresentmentLHCU single-account tBill summary.
   Keep tPay as the horizontal multi-account grid, but display tBill like PaymentReview. */
.single-account-summary .txtLabel,
.single-account-summary .txtblue10ptb,
.single-account-summary .txtBody {
    line-height: 1.35;
}

@media (max-width: 700px) {
    table.single-account-summary {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    table.single-account-summary > tbody {
        display: table-row-group !important;
    }

    table.single-account-summary > tbody > tr:not(:has(> td.FormHeaderRow)):not(:has(> td[colspan])) {
        display: grid !important;
        grid-template-columns: minmax(120px, 48%) minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
        padding: 2px 8px !important;
        margin: 0 !important;
    }

    table.single-account-summary > tbody > tr:not(:has(> td.FormHeaderRow)):not(:has(> td[colspan])) > td:first-child {
        display: none !important;
    }

    table.single-account-summary > tbody > tr:not(:has(> td.FormHeaderRow)):not(:has(> td[colspan])) > td.txtLabel,
    table.single-account-summary > tbody > tr:not(:has(> td.FormHeaderRow)):not(:has(> td[colspan])) > td.txtBody {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.single-account-summary > tbody > tr:not(:has(> td.FormHeaderRow)):not(:has(> td[colspan])) > td.txtBody {
        text-align: right !important;
    }

    table.single-account-summary > tbody > tr:has(> td.FormHeaderRow),
    table.single-account-summary > tbody > tr:has(> td[colspan]) {
        display: table-row !important;
    }

    table.single-account-summary > tbody > tr > td.FormHeaderRow,
    table.single-account-summary > tbody > tr > td[colspan] {
        display: table-cell !important;
        width: auto !important;
    }
}