/* Responsive enhancements for the legacy UPPM Web Forms application.
   This file intentionally avoids changing ASP.NET control IDs or server behavior. */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*, *:before, *:after { box-sizing: inherit; }

html, body { width: 100%; min-width: 0; }

body {
    overflow-x: hidden;
    line-height: 1.4;
}

img, input[type="image"] {
    max-width: 100%;
    height: auto;
}

.upp-page-shell {
    width: 100% !important;
    max-width: 1080px;
    min-width: 0;
    margin: 0 auto;
    table-layout: auto;
}

.upp-page-gutter { width: 10px; }
.upp-main-cell { width: auto !important; min-width: 0; }
.upp-content-scroll { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Override the most common fixed desktop page widths. */
.upp-content-scroll > table,
.upp-content-scroll > div,
.upp-content-scroll table[width="1056px"],
.upp-content-scroll table[width="1060px"],
.upp-content-scroll table[width="1056"],
.upp-content-scroll table[width="1060"] {
    max-width: 100% !important;
}

input, select, textarea, button {
    max-width: 100%;
    font-family: inherit;
}

textarea { resize: vertical; }

/* Keeps data grids and genuinely wide tables usable without cutting off the left side. */
.upp-content-scroll table { border-collapse: collapse; }
.upp-content-scroll .GridView,
.upp-content-scroll table[id*="Grid"],
.upp-content-scroll table[id*="grid"],
.upp-content-scroll table[id*="tPay"] {
    min-width: 640px;
}

@media (max-width: 767px) {
    body { font-size: 14px; }

    .upp-page-shell { height: auto !important; }
    .upp-page-gutter { display: none !important; width: 0 !important; }
    .upp-main-cell { display: table-cell; width: 100% !important; padding: 0 10px; }

    .upp-page-shell > tbody > tr > td[width="1060px"],
    .upp-page-shell > tbody > tr > td[width="1060"] {
        width: 100% !important;
    }

    .FormHeaderRow, .FormHeaderRowOrange {
        padding: 7px 8px;
        font-size: 14px;
    }

    .txtBody, .txtLabel { font-size: 12px; }
    .txtBody10pt, .txtBodyBottom { font-size: 13px; }

    /* Common legacy fixed-width utility classes. */
    .width1230, .width910, .width500, .width470, .width400,
    .width380, .width300, .width250, .width200, .width180, .width100 {
        max-width: 100% !important;
    }

    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], select, textarea {
        min-height: 36px;
        font-size: 16px; /* prevents unwanted iPhone zoom */
    }

    input[type="submit"], input[type="button"], button, .ButtonHTML {
        min-height: 38px;
        max-width: 100%;
        white-space: normal;
    }

    /* Forms made from two-column tables can opt into stacking without changing server controls. */
    table.responsive-form, table.responsive-form > tbody,
    table.responsive-form > tbody > tr,
    table.responsive-form > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    table.responsive-form > tbody > tr > td { padding: 4px 0; }

    .DarkBlueSmallText, .GraySmallText { font-size: 17px; }
    .SmallText { font-size: 16px; }
    .MidText { font-size: 19px; }
    .BigText { font-size: 22px; }
}

@media print {
    body { overflow: visible; }
    .upp-page-shell { max-width: none; }
    .upp-content-scroll { overflow: visible; }
}

.responsive-page-table {
    width: 100% !important;
    max-width: 1056px;
    margin-left: auto;
    margin-right: auto;
}


/* Phone layout v2: explicitly collapse legacy table forms. */
.responsive-form-page {
    width: 100% !important;
    max-width: 1056px;
    min-width: 0 !important;
    table-layout: auto;
}

.responsive-form-section {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    table-layout: auto;
}

.memo-grid-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.memo-grid {
    width: max-content !important;
    min-width: 760px;
    max-width: none !important;
    table-layout: auto;
}

.memo-grid input[type="text"],
.memo-grid select {
    max-width: none !important;
}

@media (max-width: 767px) {
    html, body, form, .upp-site-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .upp-page-shell {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    .upp-page-shell > tbody,
    .upp-page-shell > tbody > tr {
        display: block;
        width: 100% !important;
    }

    .upp-page-shell > tbody > tr > td:not(.upp-page-gutter) {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    .upp-main-cell {
        display: block !important;
        padding: 0 10px !important;
    }

    .upp-content-scroll {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .responsive-form-page,
    .responsive-form-page > tbody,
    .responsive-form-page > tbody > tr,
    .responsive-form-page > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .responsive-form-section,
    .responsive-form-section > tbody {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .responsive-form-section > tbody > tr {
        display: grid;
        grid-template-columns: 18px minmax(105px, 38%) minmax(0, 1fr);
        width: 100% !important;
        max-width: 100% !important;
        align-items: start;
        gap: 4px 6px;
        padding: 5px 0;
    }

    .responsive-form-section > tbody > tr > td {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 2px 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* Four-column legacy rows: required marker, label, spacer/currency, control. */
    .responsive-form-section > tbody > tr > td:nth-child(1) { grid-column: 1; }
    .responsive-form-section > tbody > tr > td:nth-child(2) { grid-column: 2; }
    .responsive-form-section > tbody > tr > td:nth-child(3) { grid-column: 1; }
    .responsive-form-section > tbody > tr > td:nth-child(4) { grid-column: 3; }

    /* Header, spacer and colspan rows span the phone width. */
    .responsive-form-section > tbody > tr > td[colspan] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

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

    .responsive-form-section input[type="radio"],
    .responsive-form-section input[type="checkbox"] {
        width: auto !important;
        min-height: 0;
    }

    .responsive-form-section input[type="submit"],
    .responsive-form-section input[type="button"] {
        width: auto !important;
        min-width: 120px;
    }

    .memo-grid-scroll {
        width: calc(100vw - 40px);
        max-width: 100%;
        margin: 0;
        border: 1px solid #ddd;
    }

    .memo-grid {
        min-width: 820px;
    }

    .memo-grid td,
    .memo-grid th {
        white-space: normal;
        padding: 4px;
    }
}

@media (max-width: 767px) {
    /* Correct placement for legacy rows that contain only three cells. */
    .responsive-form-section > tbody > tr:has(> td:nth-child(3):last-child) > td:nth-child(3) {
        grid-column: 3;
    }

    .responsive-form-section > tbody > tr:has(> td:nth-child(2):last-child) {
        grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
    }

    .responsive-form-section > tbody > tr:has(> td:nth-child(2):last-child) > td:nth-child(1) {
        grid-column: 1;
    }

    .responsive-form-section > tbody > tr:has(> td:nth-child(2):last-child) > td:nth-child(2) {
        grid-column: 2;
    }

    .responsive-form-section > tbody > tr:has(> td:only-child) {
        display: block;
    }

    .responsive-form-section > tbody > tr > td:only-child {
        width: 100% !important;
    }
}


/* Phone layout v3: page-specific layouts matching the proven responsive pages. */
@media (max-width: 767px) {
    .payment-phone-page,
    .ccform-phone-page {
        padding: 0 8px !important;
    }

    /* PAYMENT.ASPX ------------------------------------------------------- */
    .payment-phone-page .payment-selection-section,
    .payment-phone-page .payment-selection-section > tbody,
    .payment-phone-page .payment-selection-section > tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .payment-phone-page .payment-selection-section > tbody > tr {
        padding: 8px 0 !important;
    }

    .payment-phone-page .payment-selection-section > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 2px 0 !important;
        text-align: left !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .payment-phone-page .payment-selection-section > tbody > tr > td:empty,
    .payment-phone-page .payment-selection-section > tbody > tr > td.legacy-spacer {
        display: none !important;
    }

    .payment-phone-page .payment-selection-section .FormHeaderRow {
        display: block !important;
        width: 100% !important;
        padding: 9px 12px !important;
        text-align: center !important;
        font-size: 20px !important;
    }

    .payment-phone-page .payment-selection-section .txtLabel {
        width: 100% !important;
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    .payment-phone-page .payment-selection-section input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        margin: 5px 6px 5px 0 !important;
        vertical-align: middle;
    }

    .payment-phone-page .payment-selection-section label {
        display: inline !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        font-size: 18px !important;
        line-height: 1.8 !important;
    }

    .payment-phone-page .payment-selection-section input[type="text"] {
        display: block !important;
        width: 100% !important;
        min-height: 54px !important;
        margin: 8px 0 14px !important;
        font-size: 18px !important;
    }

    .payment-phone-page .payment-selection-section input[type="submit"],
    .payment-phone-page .payment-selection-section input[type="button"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        margin: 8px 0 !important;
        font-size: 20px !important;
        text-align: center !important;
    }

    .payment-phone-page .payment-selection-section img,
    .payment-phone-page .payment-selection-section input[type="image"] {
        display: block;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px 0 !important;
    }

    /* CCFORM.ASPX / CCEECUFORM.ASPX ------------------------------------ */
    .ccform-phone-page .responsive-form-section,
    .ccform-phone-page .responsive-form-section > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 4px 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important;
        align-items: center !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 2px 0 !important;
        text-align: left !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td:nth-child(1) {
        grid-column: 1 !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td:nth-child(2) {
        grid-column: 2 !important;
        font-size: 18px !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td:nth-child(3) {
        display: none !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td:nth-child(4) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        padding-top: 5px !important;
    }

    .ccform-phone-page .responsive-form-section > tbody > tr > td[colspan] {
        display: block !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .ccform-phone-page .responsive-form-section .FormHeaderRow {
        padding: 10px 12px !important;
        text-align: center !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .ccform-phone-page .responsive-form-section input[type="text"],
    .ccform-phone-page .responsive-form-section input[type="password"],
    .ccform-phone-page .responsive-form-section input[type="email"],
    .ccform-phone-page .responsive-form-section input[type="tel"],
    .ccform-phone-page .responsive-form-section textarea,
    .ccform-phone-page .responsive-form-section select {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px !important;
        margin: 4px 0 !important;
        font-size: 18px !important;
    }

    .ccform-phone-page .responsive-form-section font,
    .ccform-phone-page .responsive-form-section i,
    .ccform-phone-page .responsive-form-section a {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .ccform-phone-page .responsive-form-section img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Put month and year side-by-side when both fit, like the good layout. */
    .ccform-phone-page select[id$="expirymonth"],
    .ccform-phone-page select[id$="expiryyear"] {
        display: inline-block !important;
        width: calc(50% - 14px) !important;
        vertical-align: middle !important;
    }

    /* Memo grids remain independently scrollable, never widening the page. */
    .ccform-phone-page .memo-grid-scroll {
        width: 100% !important;
        max-width: calc(100vw - 36px) !important;
        overflow-x: auto !important;
    }
}

/* Phone layout v5: consistent action buttons on payment forms, review, and receipts. */
@media (max-width: 767px) {
    /* ASP.NET renders the server IDs with naming-container prefixes, so suffix
       selectors keep these rules stable without changing any server controls. */
    input[type="submit"][id$="btnSubmit"],
    input[type="submit"][id$="btnAgree"],
    input[type="submit"][id$="btnBack"],
    input[type="submit"][id$="btnClearSession"],
    input[type="button"][id$="btnPrint"],
    input[type="button"][id$="btnClose"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 54px !important;
        margin: 10px 0 !important;
        padding: 11px 16px !important;
        border: 2px outset #ffffff !important;
        border-radius: 0 !important;
        font-size: 18px !important;
        font-weight: bold !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Prevent inline non-breaking spaces around legacy buttons from affecting
       button width or forcing multiple actions onto the same line. */
    input[type="submit"][id$="btnSubmit"] + br,
    input[type="submit"][id$="btnAgree"] + br,
    input[type="submit"][id$="btnBack"] + br,
    input[type="submit"][id$="btnClearSession"] + br {
        display: none !important;
    }

    /* Keep all action-button table cells inside the phone viewport. */
    td:has(> input[id$="btnSubmit"]),
    td:has(> input[id$="btnAgree"]),
    td:has(> input[id$="btnClearSession"]),
    td:has(> input[id$="btnPrint"]) {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        text-align: center !important;
    }
}


/* Phone layout v6: prevent iPhone Safari intrinsic-width expansion on PaymentReview. */
@media (max-width: 767px) {
    .payment-review-phone-page {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        table-layout: fixed !important;
    }

    .payment-review-phone-page > tbody,
    .payment-review-phone-page > tbody > tr,
    .payment-review-phone-page > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .payment-review-phone-page > tbody > tr > td {
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .payment-review-phone-page .payment-review-postamble td,
    .payment-review-phone-page .payment-review-agreement td {
        padding: 10px 12px !important;
        text-align: left !important;
        line-height: 1.45 !important;
    }

    .payment-review-phone-page .payment-review-postamble font,
    .payment-review-phone-page .payment-review-postamble span,
    .payment-review-phone-page .payment-review-postamble label,
    .payment-review-phone-page .payment-review-agreement span,
    .payment-review-phone-page .payment-review-agreement label {
        display: inline !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .payment-review-phone-page .payment-review-postamble input[type="checkbox"] {
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin-right: 6px !important;
        vertical-align: middle !important;
    }

    .payment-review-phone-page .payment-review-actions td {
        padding: 0 8px !important;
        overflow: visible !important;
    }

    .payment-review-phone-page .payment-review-actions input[type="submit"],
    .payment-review-phone-page .payment-review-actions input[type="button"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
    }
}


/* Phone layout v7: prevent iPhone Safari from expanding Receipt pages. */
@media (max-width: 767px) {
    .receipt-phone-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        table-layout: fixed !important;
    }

    /* Replace the legacy 20/200/20/flexible desktop columns with phone-safe proportions. */
    .receipt-phone-page > colgroup > col:nth-child(1),
    .receipt-phone-page > col:nth-child(1) { width: 3% !important; }
    .receipt-phone-page > colgroup > col:nth-child(2),
    .receipt-phone-page > col:nth-child(2) { width: 39% !important; }
    .receipt-phone-page > colgroup > col:nth-child(3),
    .receipt-phone-page > col:nth-child(3) { width: 3% !important; }
    .receipt-phone-page > colgroup > col:nth-child(4),
    .receipt-phone-page > col:nth-child(4) { width: 55% !important; }

    .receipt-phone-page > tbody,
    .receipt-phone-page > tbody > tr,
    .receipt-phone-page > tbody > tr > td {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .receipt-phone-page > tbody > tr > td {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    /* Legacy nowrap attributes otherwise influence Safari's intrinsic table width. */
    .receipt-phone-page td[nowrap],
    .receipt-phone-page td[nowrap="nowrap"],
    .receipt-phone-page span,
    .receipt-phone-page label,
    .receipt-phone-page a {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .receipt-phone-page .memo-grid-scroll {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* The memo grid may be wide, but it must not determine the receipt table width. */
    .receipt-phone-page .memo-grid-scroll > table,
    .receipt-phone-page .memo-grid {
        max-width: none !important;
    }

    .receipt-phone-page img,
    .receipt-phone-page input,
    .receipt-phone-page select,
    .receipt-phone-page textarea {
        min-width: 0 !important;
    }

    .receipt-phone-page input[id$="btnClearSession"],
    .receipt-phone-page input[id$="btnPrint"],
    .receipt-phone-page input[id$="btnClose"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
    }
}

/* Phone layout v8: compact forms and remove legacy spacer rows. */
@media (max-width: 767px) {
    /* Legacy pages use rows containing only &nbsp; or <br> for desktop spacing. */
    .payment-phone-page tr.mobile-spacer-row,
    .ccform-phone-page tr.mobile-spacer-row,
    .responsive-form-page tr.mobile-spacer-row,
    .memo-grid tr.mobile-spacer-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    .payment-phone-page tr[height],
    .ccform-phone-page tr[height],
    .responsive-form-page tr[height],
    .payment-phone-page td[height],
    .ccform-phone-page td[height],
    .responsive-form-page td[height] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Reduce vertical gaps between real rows and sections. */
    .payment-phone-page .payment-selection-section > tbody > tr,
    .ccform-phone-page .responsive-form-section > tbody > tr {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        gap: 2px 5px !important;
    }

    .payment-phone-page .payment-selection-section > tbody > tr > td,
    .ccform-phone-page .responsive-form-section > tbody > tr > td {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .payment-phone-page .payment-selection-section .FormHeaderRow,
    .ccform-phone-page .responsive-form-section .FormHeaderRow {
        padding: 6px 9px !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    /* Compact normal form fields while retaining 16px text to prevent iPhone zoom. */
    .payment-phone-page input[type="text"],
    .payment-phone-page input[type="password"],
    .payment-phone-page input[type="email"],
    .payment-phone-page input[type="tel"],
    .payment-phone-page select,
    .payment-phone-page textarea,
    .ccform-phone-page .responsive-form-section input[type="text"],
    .ccform-phone-page .responsive-form-section input[type="password"],
    .ccform-phone-page .responsive-form-section input[type="email"],
    .ccform-phone-page .responsive-form-section input[type="tel"],
    .ccform-phone-page .responsive-form-section select,
    .ccform-phone-page .responsive-form-section textarea {
        min-height: 40px !important;
        height: 40px !important;
        margin: 2px 0 !important;
        padding: 5px 7px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .ccform-phone-page .responsive-form-section textarea {
        height: auto !important;
        min-height: 64px !important;
    }

    .payment-phone-page .payment-selection-section input[type="radio"],
    .ccform-phone-page input[type="radio"],
    .ccform-phone-page input[type="checkbox"] {
        min-height: 0 !important;
        width: auto !important;
        height: auto !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .payment-phone-page .payment-selection-section label,
    .ccform-phone-page .responsive-form-section > tbody > tr > td:nth-child(2) {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .payment-phone-page .payment-selection-section input[type="submit"],
    .payment-phone-page .payment-selection-section input[type="button"] {
        min-height: 44px !important;
        margin: 5px 0 !important;
        padding: 7px 10px !important;
        font-size: 17px !important;
    }

    /* Shared memo controls stay scrollable but no longer have oversized cells/fields. */
    .memo-grid td,
    .memo-grid th {
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 4px !important;
        line-height: 1.2 !important;
        font-size: 13px !important;
    }

    .memo-grid input[type="text"],
    .memo-grid input[type="password"],
    .memo-grid select,
    .memo-grid textarea {
        width: auto !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        font-size: 16px !important;
    }

    .memo-grid input[type="checkbox"],
    .memo-grid input[type="radio"] {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 3px !important;
    }

    .memo-grid-scroll {
        padding-bottom: 2px !important;
    }
}