#mpo38{direction:rtl;margin:20px 0}.mpo38 .scroll{overflow:auto}.mpo38 table{direction:ltr;width:100%;min-width:1100px;table-layout:fixed}.mpo38 th,.mpo38 td{padding:6px 4px;text-align:left}.mpo38 input,.mpo38 textarea,.mpo38 select{width:100%;box-sizing:border-box}.mpo38 .sum{display:flex;justify-content:space-between;gap:20px;padding:10px;background:#f6f7f7;margin-top:10px}.mpo38 tr.bad{background:#fff0f0}.mpo38 tr.ok{background:#f5fff5}#gform_38 .gform_footer,#gform_38 .gform_page_footer{display:none!important} #gform_38 .mpo38-original-list-field{display:none!important;} #gform_38 .mpo38-converted-field .ginput_container{width:100%!important} #gform_38 #mpo38{display:block!important;width:100%!important;margin-top:8px} #gform_38 #mpo38 table{direction:ltr;width:100%;min-width:1150px;table-layout:fixed} #gform_38 #mpo38 th,#gform_38 #mpo38 td{text-align:left} #gform_38 .gform_footer,#gform_38 .gform_page_footer{display:none!important} /* v1.3.1: one table only; Number starts at far left */ #field_38_9 .mpo38, #field_38_9 .mpo38 .scroll, #field_38_9 .mpo38 table { direction:ltr !important; } #field_38_9 .mpo38 table { width:100% !important; min-width:1180px; table-layout:fixed; } #field_38_9 .mpo38 th, #field_38_9 .mpo38 td { direction:ltr !important; text-align:left !important; } #field_38_9 .mpo38 .sum { direction:rtl !important; } /* v1.3.2 hard LTR + duplicate protection */ #field_38_9 #mpo38 .scroll, #field_38_9 #mpo38 table, #field_38_9 #mpo38 thead, #field_38_9 #mpo38 tbody, #field_38_9 #mpo38 tr, #field_38_9 #mpo38 th, #field_38_9 #mpo38 td{ direction:ltr!important; text-align:left!important; } #field_38_9 #mpo38 table{ table-layout:fixed!important; } #field_38_9 #mpo38 th:first-child, #field_38_9 #mpo38 td:first-child{ width:6%!important; } /* v1.3.3: reverse real column DOM so Number is visually leftmost even under RTL theme */ #field_38_9 #mpo38 .scroll, #field_38_9 #mpo38 table, #field_38_9 #mpo38 thead, #field_38_9 #mpo38 tbody, #field_38_9 #mpo38 tr{ direction:rtl!important; } #field_38_9 #mpo38 th, #field_38_9 #mpo38 td{ direction:ltr!important; text-align:left!important; } /* v1.3.4 exact column alignment */ #field_38_9 #mpo38 .scroll{ direction:ltr!important; overflow-x:auto!important; } #field_38_9 #mpo38 table.mpo38-table{ direction:ltr!important; width:1180px!important; min-width:1180px!important; table-layout:fixed!important; border-collapse:collapse!important; } #field_38_9 #mpo38 table.mpo38-table thead, #field_38_9 #mpo38 table.mpo38-table tbody, #field_38_9 #mpo38 table.mpo38-table tr{ direction:ltr!important; } #field_38_9 #mpo38 table.mpo38-table th, #field_38_9 #mpo38 table.mpo38-table td{ direction:ltr!important; text-align:left!important; vertical-align:middle!important; box-sizing:border-box!important; overflow:hidden!important; } /* exact matching widths for header + body */ #field_38_9 #mpo38 .c-number{width:70px!important} #field_38_9 #mpo38 .c-name{width:125px!important} #field_38_9 #mpo38 .c-seq{width:260px!important} #field_38_9 #mpo38 .c-length{width:70px!important} #field_38_9 #mpo38 .c-pur{width:120px!important} #field_38_9 #mpo38 .c-od{width:115px!important} #field_38_9 #mpo38 .c-mod5{width:135px!important} #field_38_9 #mpo38 .c-mod3{width:135px!important} #field_38_9 #mpo38 .c-price{width:110px!important} #field_38_9 #mpo38 .c-status{width:105px!important} #field_38_9 #mpo38 .c-del{width:35px!important} #field_38_9 #mpo38 input, #field_38_9 #mpo38 textarea, #field_38_9 #mpo38 select{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* v1.3.5 */ #field_38_9 #mpo38-add-row{ cursor:pointer!important; } /* v1.3.6 cache-busted layout */ #field_38_9 #mpo38 .c-number .row-number{ display:block!important; width:100%!important; text-align:center!important; font-weight:600!important; } /* v1.3.7 unified modern control sizing */ #field_38_9 #mpo38 table.mpo38-table{ border-collapse:separate!important; border-spacing:0!important; } #field_38_9 #mpo38 table.mpo38-table th{ height:62px!important; padding:10px 8px!important; vertical-align:middle!important; text-align:center!important; white-space:normal!important; } #field_38_9 #mpo38 table.mpo38-table td{ height:72px!important; padding:8px!important; vertical-align:middle!important; } #field_38_9 #mpo38 input.name, #field_38_9 #mpo38 textarea.seq, #field_38_9 #mpo38 select.pur, #field_38_9 #mpo38 select.od, #field_38_9 #mpo38 input.mod5, #field_38_9 #mpo38 input.mod3{ display:block!important; width:100%!important; height:46px!important; min-height:46px!important; max-height:46px!important; margin:0!important; padding:0 10px!important; border:1px solid #cfd7e1!important; border-radius:6px!important; box-sizing:border-box!important; line-height:44px!important; font-size:14px!important; background:#fff!important; } #field_38_9 #mpo38 textarea.seq{ resize:none!important; overflow:hidden!important; line-height:22px!important; padding-top:11px!important; padding-bottom:11px!important; white-space:nowrap!important; } #field_38_9 #mpo38 select.pur, #field_38_9 #mpo38 select.od{ padding-top:0!important; padding-bottom:0!important; line-height:normal!important; } #field_38_9 #mpo38 .c-number, #field_38_9 #mpo38 .c-length, #field_38_9 #mpo38 .c-price, #field_38_9 #mpo38 .c-status{ vertical-align:middle!important; text-align:center!important; } #field_38_9 #mpo38 .row-number, #field_38_9 #mpo38 .len, #field_38_9 #mpo38 .price, #field_38_9 #mpo38 .status{ line-height:46px!important; } #field_38_9 #mpo38 .sum{ margin-top:14px!important; padding:14px 18px!important; border-radius:8px!important; background:#f4f8fc!important; } #field_38_9 #mpo38-add-row{ min-height:44px!important; padding:0 18px!important; border-radius:7px!important; } /* v1.3.8 marker */ /* v1.3.9 wider form/table */ #gform_wrapper_38, #gform_38{ width:min(1500px, 96vw)!important; max-width:1500px!important; margin-left:auto!important; margin-right:auto!important; } #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:none!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1450px!important; min-width:1450px!important; } #field_38_9 #mpo38 .c-number{width:70px!important} #field_38_9 #mpo38 .c-name{width:145px!important} #field_38_9 #mpo38 .c-seq{width:340px!important} #field_38_9 #mpo38 .c-length{width:75px!important} #field_38_9 #mpo38 .c-pur{width:135px!important} #field_38_9 #mpo38 .c-od{width:125px!important} #field_38_9 #mpo38 .c-mod5{width:160px!important} #field_38_9 #mpo38 .c-mod3{width:160px!important} #field_38_9 #mpo38 .c-price{width:120px!important} #field_38_9 #mpo38 .c-status{width:120px!important} #field_38_9 #mpo38 .c-del{width:35px!important} @media (max-width: 1550px){ #gform_wrapper_38,#gform_38{width:96vw!important;} #field_38_9 #mpo38 .scroll{overflow-x:auto!important;} } /* v1.3.10 force wide Form 38 to the viewport center */ #gform_wrapper_38{ position:relative!important; width:min(1500px,96vw)!important; max-width:1500px!important; margin-left:50%!important; margin-right:0!important; transform:translateX(-50%)!important; } #gform_wrapper_38 #gform_38{ width:100%!important; max-width:none!important; margin:0!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; margin-left:auto!important; margin-right:auto!important; } #field_38_9 #mpo38 table.mpo38-table{ margin-left:auto!important; margin-right:auto!important; } /* v1.3.11 safe centering: never push the form outside viewport */ #gform_wrapper_38{ position:static!important; transform:none!important; left:auto!important; right:auto!important; width:100%!important; max-width:1500px!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #gform_wrapper_38 #gform_38{ width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; margin:0 auto!important; box-sizing:border-box!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1450px!important; min-width:1450px!important; margin:0 auto!important; } @media (max-width:1500px){ #gform_wrapper_38{ width:100%!important; max-width:100%!important; padding-left:12px!important; padding-right:12px!important; } } /* v1.4.0 modern wide UI */ #gform_wrapper_38{ width:100%!important; max-width:1540px!important; margin:0 auto!important; padding:0 12px!important; box-sizing:border-box!important; transform:none!important; } #gform_wrapper_38 #gform_38{width:100%!important;max-width:100%!important} #field_38_9 .mpo38-field9-host{width:100%!important;max-width:100%!important} #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; font-family:inherit!important; } #field_38_9 #mpo38 .mpo38-modern-head{ text-align:center!important; margin:4px 0 18px!important; } #field_38_9 #mpo38 .mpo38-modern-title{ font-size:30px!important; line-height:1.25!important; font-weight:800!important; color:#159447!important; direction:ltr!important; } #field_38_9 #mpo38 .mpo38-modern-subtitle{ margin-top:7px!important; font-size:15px!important; color:#5c6470!important; } #field_38_9 #mpo38 .top{ display:flex!important; justify-content:flex-end!important; margin-bottom:12px!important; } #field_38_9 #mpo38-add-row{ min-height:46px!important; padding:0 20px!important; border:0!important; border-radius:8px!important; background:#159447!important; color:#fff!important; font-weight:700!important; box-shadow:none!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; border:1px solid #dfe5eb!important; border-radius:10px!important; background:#fff!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1480px!important; min-width:1480px!important; margin:0 auto!important; border-collapse:collapse!important; table-layout:fixed!important; background:#fff!important; } #field_38_9 #mpo38 table.mpo38-table th{ height:76px!important; padding:10px 7px!important; text-align:center!important; vertical-align:middle!important; background:#f8fafc!important; border-bottom:1px solid #dfe5eb!important; font-weight:700!important; color:#111827!important; } #field_38_9 #mpo38 table.mpo38-table td{ height:82px!important; padding:10px 7px!important; vertical-align:middle!important; border-bottom:1px solid #e7ebef!important; background:#fff!important; } #field_38_9 #mpo38 table.mpo38-table tr:last-child td{border-bottom:0!important} /* Wider Sequence, balanced remaining columns */ #field_38_9 #mpo38 .c-number{width:70px!important;text-align:center!important} #field_38_9 #mpo38 .c-name{width:145px!important} #field_38_9 #mpo38 .c-seq{width:390px!important} #field_38_9 #mpo38 .c-length{width:75px!important;text-align:center!important} #field_38_9 #mpo38 .c-pur{width:130px!important} #field_38_9 #mpo38 .c-od{width:115px!important} #field_38_9 #mpo38 .c-mod5{width:140px!important} #field_38_9 #mpo38 .c-mod3{width:140px!important} #field_38_9 #mpo38 .c-price{width:125px!important;text-align:center!important} #field_38_9 #mpo38 .c-status{width:110px!important;text-align:center!important} #field_38_9 #mpo38 .c-del{width:40px!important;text-align:center!important} #field_38_9 #mpo38 input.name, #field_38_9 #mpo38 textarea.seq, #field_38_9 #mpo38 select.pur, #field_38_9 #mpo38 select.od, #field_38_9 #mpo38 input.mod5, #field_38_9 #mpo38 input.mod3{ width:100%!important; height:48px!important; min-height:48px!important; max-height:48px!important; margin:0!important; padding:0 11px!important; box-sizing:border-box!important; border:1px solid #d4dbe3!important; border-radius:7px!important; background:#fff!important; font-size:14px!important; box-shadow:none!important; } #field_38_9 #mpo38 textarea.seq{ resize:none!important; overflow:hidden!important; white-space:nowrap!important; line-height:24px!important; padding-top:11px!important; padding-bottom:11px!important; } #field_38_9 #mpo38 .row-number, #field_38_9 #mpo38 .len, #field_38_9 #mpo38 .price{ display:block!important; line-height:48px!important; text-align:center!important; font-weight:600!important; } #field_38_9 #mpo38 .sum{ display:grid!important; grid-template-columns:1fr 1fr 1fr!important; gap:12px!important; margin-top:14px!important; padding:16px 18px!important; border:1px solid #e1e7ed!important; border-radius:9px!important; background:#f8fafc!important; } #field_38_9 #mpo38 .sum > div{ text-align:center!important; font-weight:600!important; } #field_38_9 #mpo38 .grand{ margin-top:12px!important; padding:15px 18px!important; border:1px solid #dfe5eb!important; border-radius:9px!important; background:#fff!important; font-weight:700!important; } #field_38_9 #mpo38 .del{ width:34px!important; height:34px!important; min-height:34px!important; padding:0!important; border:0!important; border-radius:7px!important; background:#e53935!important; color:#fff!important; font-size:20px!important; line-height:34px!important; } @media(max-width:1550px){ #gform_wrapper_38{max-width:100%!important} #field_38_9 #mpo38 table.mpo38-table{margin:0!important} } /* v1.4.1: use almost the full content/header width */ #gform_wrapper_38{ width:calc(100vw - 70px)!important; max-width:1680px!important; margin-left:50%!important; margin-right:0!important; transform:translateX(-50%)!important; box-sizing:border-box!important; padding-left:12px!important; padding-right:12px!important; } #gform_wrapper_38 #gform_38, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; } #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; min-width:1480px!important; } @media(max-width:1200px){ #gform_wrapper_38{ width:calc(100vw - 24px)!important; } } /* v1.4.2 SAFE WIDE: never leave page/container */ #gform_wrapper_38{ position:static!important; left:auto!important; right:auto!important; transform:none!important; width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; box-sizing:border-box!important; overflow:visible!important; } #gform_wrapper_38 #gform_38, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ display:block!important; width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; margin:0!important; box-sizing:border-box!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1480px!important; min-width:1480px!important; max-width:none!important; margin:0!important; } /* v1.4.3 wider, but constrained to the actual page */ #gform_wrapper_38{ width:100%!important; max-width:100%!important; margin:0 auto!important; transform:none!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; box-sizing:border-box!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1620px!important; min-width:1620px!important; max-width:none!important; } /* use the extra width where it matters */ #field_38_9 #mpo38 .c-number{width:70px!important} #field_38_9 #mpo38 .c-name{width:160px!important} #field_38_9 #mpo38 .c-seq{width:500px!important} #field_38_9 #mpo38 .c-length{width:75px!important} #field_38_9 #mpo38 .c-pur{width:140px!important} #field_38_9 #mpo38 .c-od{width:125px!important} #field_38_9 #mpo38 .c-mod5{width:155px!important} #field_38_9 #mpo38 .c-mod3{width:155px!important} #field_38_9 #mpo38 .c-price{width:125px!important} #field_38_9 #mpo38 .c-status{width:115px!important} #field_38_9 #mpo38 .c-del{width:40px!important} /* v1.4.4: widen the PAGE CONTENT container safely, based on observed layout */ body:has(#gform_wrapper_38) .site-main, body:has(#gform_wrapper_38) .content-area, body:has(#gform_wrapper_38) .entry-content, body:has(#gform_wrapper_38) .inside-article, body:has(#gform_wrapper_38) .container, body:has(#gform_wrapper_38) .content, body:has(#gform_wrapper_38) main{ max-width:1330px!important; width:100%!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #gform_wrapper_38{ width:100%!important; max-width:1330px!important; margin-left:auto!important; margin-right:auto!important; transform:none!important; box-sizing:border-box!important; } #gform_wrapper_38 #gform_38, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } /* keep modern table wide, but constrained inside the widened content */ #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1330px!important; min-width:1330px!important; margin:0 auto!important; } /* preserve useful column proportions */ #field_38_9 #mpo38 .c-number{width:70px!important} #field_38_9 #mpo38 .c-name{width:145px!important} #field_38_9 #mpo38 .c-seq{width:390px!important} #field_38_9 #mpo38 .c-length{width:75px!important} #field_38_9 #mpo38 .c-pur{width:120px!important} #field_38_9 #mpo38 .c-od{width:105px!important} #field_38_9 #mpo38 .c-mod5{width:130px!important} #field_38_9 #mpo38 .c-mod3{width:130px!important} #field_38_9 #mpo38 .c-price{width:120px!important} #field_38_9 #mpo38 .c-status{width:105px!important} #field_38_9 #mpo38 .c-del{width:40px!important} /* v1.4.5 EXTRA WIDE — widen actual page container, safely */ body:has(#gform_wrapper_38) .site-main, body:has(#gform_wrapper_38) .content-area, body:has(#gform_wrapper_38) .entry-content, body:has(#gform_wrapper_38) .inside-article, body:has(#gform_wrapper_38) main{ width:100%!important; max-width:1450px!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #gform_wrapper_38{ width:100%!important; max-width:1450px!important; margin:0 auto!important; transform:none!important; box-sizing:border-box!important; } #gform_wrapper_38 #gform_38, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1450px!important; min-width:1450px!important; margin:0 auto!important; } #field_38_9 #mpo38 .c-seq{width:430px!important} /* v1.4.6 — target the actual FL Theme / Beaver Builder page wrappers seen in Inspect */ body:has(#gform_wrapper_38) #fl-page-content, body:has(#gform_wrapper_38) .fl-page-content{ width:100%!important; max-width:none!important; } body:has(#gform_wrapper_38) #fl-page-content .fl-content, body:has(#gform_wrapper_38) #fl-page-content .fl-content-left, body:has(#gform_wrapper_38) #fl-page-content .container, body:has(#gform_wrapper_38) #fl-page-content .fl-row-content-wrap, body:has(#gform_wrapper_38) #fl-page-content .fl-row-content{ width:100%!important; max-width:1500px!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } #gform_wrapper_38{ width:100%!important; max-width:1500px!important; margin-left:auto!important; margin-right:auto!important; transform:none!important; box-sizing:border-box!important; } #gform_wrapper_38 #gform_38, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; } #field_38_9 #mpo38 table.mpo38-table{ width:1500px!important; min-width:1500px!important; margin:0 auto!important; } #field_38_9 #mpo38 .c-seq{width:450px!important} /* v1.4.7 optimized column allocation */ #field_38_9 #mpo38 table.mpo38-table{ width:1500px!important; min-width:1500px!important; table-layout:fixed!important; } /* Give space to Oligo Name + Sequence */ #field_38_9 #mpo38 .c-number{width:55px!important} #field_38_9 #mpo38 .c-name{width:165px!important} #field_38_9 #mpo38 .c-seq{width:500px!important} /* Length only contains a number */ #field_38_9 #mpo38 .c-length{width:60px!important} /* Compact selectors */ #field_38_9 #mpo38 .c-pur{width:115px!important} #field_38_9 #mpo38 .c-od{width:90px!important} /* Keep modifications usable but not oversized */ #field_38_9 #mpo38 .c-mod5{width:130px!important} #field_38_9 #mpo38 .c-mod3{width:130px!important} /* Compact price/status/delete to free width */ #field_38_9 #mpo38 .c-price{width:115px!important} #field_38_9 #mpo38 .c-status{width:90px!important} #field_38_9 #mpo38 .c-del{width:50px!important} /* Remove visual waste in status cell */ #field_38_9 #mpo38 .c-status, #field_38_9 #mpo38 .status{ padding-left:4px!important; padding-right:4px!important; text-align:center!important; white-space:normal!important; } /* Make Sequence field really use its new width */ #field_38_9 #mpo38 textarea.seq{ width:100%!important; min-width:100%!important; max-width:100%!important; } /* Oligo name gets the full cell */ #field_38_9 #mpo38 input.name{ width:100%!important; min-width:100%!important; max-width:100%!important; } /* Compact length/OD controls */ #field_38_9 #mpo38 .c-length, #field_38_9 #mpo38 .len{ text-align:center!important; } #field_38_9 #mpo38 select.od{ width:100%!important; min-width:0!important; padding-left:4px!important; padding-right:4px!important; } /* Version marker */ /* v1.4.9 STABLE: layout-only changes, no renderer/HTML changes */ #field_38_9 #mpo38 table.mpo38-table{ table-layout:auto!important; } /* Allocate less space to numeric/status/delete columns */ #field_38_9 #mpo38 th.c-length, #field_38_9 #mpo38 td.c-length{width:55px!important;min-width:55px!important;padding-left:3px!important;padding-right:3px!important} #field_38_9 #mpo38 th.c-od, #field_38_9 #mpo38 td.c-od{width:82px!important;min-width:82px!important;padding-left:3px!important;padding-right:3px!important} #field_38_9 #mpo38 th.c-price, #field_38_9 #mpo38 td.c-price{width:90px!important;min-width:90px!important;padding-left:3px!important;padding-right:3px!important} #field_38_9 #mpo38 th.c-status, #field_38_9 #mpo38 td.c-status{width:95px!important;min-width:95px!important;padding-left:3px!important;padding-right:3px!important} #field_38_9 #mpo38 th.c-del, #field_38_9 #mpo38 td.c-del{width:38px!important;min-width:38px!important;padding-left:2px!important;padding-right:2px!important} /* Sequence gets the freed space without changing the renderer */ #field_38_9 #mpo38 th.c-seq, #field_38_9 #mpo38 td.c-seq{ width:520px!important; min-width:520px!important; } #field_38_9 #mpo38 textarea.seq{ width:100%!important; box-sizing:border-box!important; } /* Keep the existing boxes/UI from the stable version intact */ /* v1.5.0 — fit the complete table inside its container: no horizontal scrollbar */ #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; } #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; min-width:0!important; max-width:100%!important; table-layout:fixed!important; } /* Percentage allocation: Sequence gets most of the available width */ #field_38_9 #mpo38 .c-number{width:4%!important;min-width:0!important} #field_38_9 #mpo38 .c-name{width:10%!important;min-width:0!important} #field_38_9 #mpo38 .c-seq{width:34%!important;min-width:0!important} #field_38_9 #mpo38 .c-length{width:4%!important;min-width:0!important} #field_38_9 #mpo38 .c-pur{width:8%!important;min-width:0!important} #field_38_9 #mpo38 .c-od{width:6%!important;min-width:0!important} #field_38_9 #mpo38 .c-mod5{width:8%!important;min-width:0!important} #field_38_9 #mpo38 .c-mod3{width:8%!important;min-width:0!important} #field_38_9 #mpo38 .c-price{width:7%!important;min-width:0!important} #field_38_9 #mpo38 .c-status{width:8%!important;min-width:0!important} #field_38_9 #mpo38 .c-del{width:3%!important;min-width:0!important} #field_38_9 #mpo38 th, #field_38_9 #mpo38 td{ box-sizing:border-box!important; padding-left:4px!important; padding-right:4px!important; } #field_38_9 #mpo38 textarea.seq, #field_38_9 #mpo38 input.name, #field_38_9 #mpo38 select.pur, #field_38_9 #mpo38 select.od, #field_38_9 #mpo38 input.mod5, #field_38_9 #mpo38 input.mod3{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* FORCE v1.5.3 badge - proves the new CSS is loaded */ #field_38_9 #mpo38-force-badge{ display:inline-block!important; margin-right:10px!important; padding:4px 8px!important; border-radius:5px!important; background:#111827!important; color:#fff!important; font-size:11px!important; font-weight:700!important; direction:ltr!important; } /* ========================================================= v1.5.4 FINAL COLUMN DISTRIBUTION Force actual table geometry, not just controls. ========================================================= */ #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; box-sizing:border-box!important; } #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; min-width:0!important; max-width:100%!important; table-layout:fixed!important; border-collapse:collapse!important; } /* Kill old fixed/min widths from previous versions */ #field_38_9 #mpo38 table.mpo38-table th, #field_38_9 #mpo38 table.mpo38-table td{ min-width:0!important; max-width:none!important; box-sizing:border-box!important; overflow:hidden!important; padding-left:3px!important; padding-right:3px!important; } /* Exact 100% width distribution 1 Number 3.5% 2 Oligo Name 10% 3 Sequence 45% 4 Length 3% 5 Purification 7% 6 OD 5% 7 Mod 5 6.5% 8 Mod 3 6.5% 9 Price 5.5% 10 Status 5.5% 11 Delete 2.5% */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){width:3.5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(2), #field_38_9 #mpo38 table.mpo38-table td:nth-child(2){width:10%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:45%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:3%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(5), #field_38_9 #mpo38 table.mpo38-table td:nth-child(5){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(6), #field_38_9 #mpo38 table.mpo38-table td:nth-child(6){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(7), #field_38_9 #mpo38 table.mpo38-table td:nth-child(7){width:6.5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:6.5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9){width:5.5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10){width:5.5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:2.5%!important} /* Remove wasted inner space from the compact columns */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4), #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9), #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10), #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){ padding-left:1px!important; padding-right:1px!important; text-align:center!important; } /* Sequence must visibly occupy its much larger cell */ #field_38_9 #mpo38 textarea.seq{ width:100%!important; max-width:100%!important; min-width:0!important; display:block!important; box-sizing:border-box!important; } /* Compact controls */ #field_38_9 #mpo38 select.od{ width:100%!important; min-width:0!important; max-width:100%!important; padding-left:1px!important; padding-right:1px!important; } #field_38_9 #mpo38 select.pur{ width:100%!important; min-width:0!important; max-width:100%!important; padding-left:2px!important; padding-right:2px!important; } /* Price / status / delete have no artificial blank block */ #field_38_9 #mpo38 .price, #field_38_9 #mpo38 .status, #field_38_9 #mpo38 .len{ width:100%!important; margin:0!important; padding:0!important; text-align:center!important; } #field_38_9 #mpo38 .del{ margin:0 auto!important; display:block!important; } /* Proof that this exact layout CSS loaded */ #field_38_9 #mpo38-force-badge{ background:#0b6b3a!important; } /* ========================================================= v1.5.5 COLUMN ALIGNMENT + LENGTH VISIBILITY FIX Final override: balanced widths and guaranteed Length output. Total = 100% ========================================================= */ #field_38_9 #mpo38 table.mpo38-table{ table-layout:fixed!important; direction:ltr!important; } #field_38_9 #mpo38 table.mpo38-table th, #field_38_9 #mpo38 table.mpo38-table td{ vertical-align:middle!important; } #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){width:4%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(2), #field_38_9 #mpo38 table.mpo38-table td:nth-child(2){width:12%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:37%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(5), #field_38_9 #mpo38 table.mpo38-table td:nth-child(5){width:8%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(6), #field_38_9 #mpo38 table.mpo38-table td:nth-child(6){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(7), #field_38_9 #mpo38 table.mpo38-table td:nth-child(7){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:2%!important} /* Length is a real visible numeric cell, centered under its header. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td.c-length, #field_38_9 #mpo38 table.mpo38-table td.len{ text-align:center!important; white-space:nowrap!important; overflow:visible!important; font-weight:700!important; padding-left:2px!important; padding-right:2px!important; } #field_38_9 #mpo38 table.mpo38-table td.len{ color:#111827!important; font-size:13px!important; line-height:1.2!important; } /* Keep each control inside its own column. */ #field_38_9 #mpo38 table.mpo38-table input, #field_38_9 #mpo38 table.mpo38-table textarea, #field_38_9 #mpo38 table.mpo38-table select{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* ========================================================= v1.5.6 PRICE VISIBILITY + SLIGHTLY WIDER FORM Fix legacy display:block on table cells and add ~0.5cm per side. ========================================================= */ /* Widen only the Metabion form by about 10mm total (5mm each side). */ #field_38_9 .mpo38-field9-host{ width:calc(100% + 38px)!important; max-width:none!important; margin-left:-19px!important; margin-right:-19px!important; } #field_38_9 #mpo38{ width:100%!important; max-width:none!important; } /* Final balanced width distribution. Price gets extra room. Total = 100%. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){width:4%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(2), #field_38_9 #mpo38 table.mpo38-table td:nth-child(2){width:11%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:35%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(5), #field_38_9 #mpo38 table.mpo38-table td:nth-child(5){width:8%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(6), #field_38_9 #mpo38 table.mpo38-table td:nth-child(6){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(7), #field_38_9 #mpo38 table.mpo38-table td:nth-child(7){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9){width:10%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:2%!important} /* CRITICAL: these are TD elements, never turn them into blocks. */ #field_38_9 #mpo38 table.mpo38-table td.len, #field_38_9 #mpo38 table.mpo38-table td.price, #field_38_9 #mpo38 table.mpo38-table td.status{ display:table-cell!important; vertical-align:middle!important; text-align:center!important; } /* Make calculated price unmistakably visible. */ #field_38_9 #mpo38 table.mpo38-table td.price{ color:#111827!important; font-size:13px!important; font-weight:700!important; line-height:1.35!important; white-space:nowrap!important; overflow:visible!important; direction:ltr!important; unicode-bidi:plaintext!important; padding-left:2px!important; padding-right:2px!important; } /* Keep the extra width safe on small screens. */ @media (max-width: 900px){ #field_38_9 .mpo38-field9-host{ width:100%!important; margin-left:0!important; margin-right:0!important; } } /* ========================================================= v1.5.7 EXTRA WIDTH + FULL DELETE BUTTON Add another ~0.5cm on each side and give delete column room. ========================================================= */ #field_38_9 .mpo38-field9-host{ width:calc(100% + 76px)!important; max-width:none!important; margin-left:-38px!important; margin-right:-38px!important; } /* Give the delete/X column a real usable width; trim sequence slightly. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:34%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:3%!important;min-width:42px!important} #field_38_9 #mpo38 table.mpo38-table td.c-del, #field_38_9 #mpo38 table.mpo38-table td:last-child{ overflow:visible!important; padding-left:3px!important; padding-right:3px!important; } #field_38_9 #mpo38 table.mpo38-table td:last-child button, #field_38_9 #mpo38 table.mpo38-table .del, #field_38_9 #mpo38 table.mpo38-table .delete, #field_38_9 #mpo38 table.mpo38-table .mpo38-del{ min-width:30px!important; width:30px!important; max-width:30px!important; box-sizing:border-box!important; } @media (max-width: 900px){ #field_38_9 .mpo38-field9-host{ width:100%!important; margin-left:0!important; margin-right:0!important; } } /* ========================================================= v1.5.8 SUMMARY COLUMN ALIGNMENT Summary uses the same 11-column geometry as the table: row count under Number, nucleotide count under Length, grand total under Price. ========================================================= */ #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ display:grid!important; grid-template-columns:4fr 11fr 34fr 5fr 8fr 6fr 7fr 7fr 10fr 5fr 3fr!important; gap:0!important; direction:ltr!important; align-items:stretch!important; margin-top:14px!important; padding:12px 0!important; box-sizing:border-box!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned > span{ display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; text-align:center!important; direction:rtl!important; min-width:0!important; padding:4px 2px!important; line-height:1.45!important; white-space:normal!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned > span b{ display:block!important; margin-top:3px!important; font-size:15px!important; white-space:nowrap!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned .mpo38-summary-count{ grid-column:1 / 2!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned .mpo38-summary-nt{ grid-column:6 / 7!important; } #gform_38 .mpo38-required-error{ border-color:#dc2626!important; box-shadow:0 0 0 2px rgba(220,38,38,.14)!important; background-color:#fff7f7!important; } #gform_38 .mpo38-required-box-error .gfield_label{ color:#b91c1c!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned .mpo38-summary-grand{ grid-column:9 / 10!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned .mpo38-summary-grand b{ color:#15803d!important; font-weight:800!important; } /* ========================================================= v1.5.9 FORM + GRAVITY FORM PAGE WIDTH Add ~5mm total usable width and widen the parent GF area too, so long fields such as IR Number stay on one line. ========================================================= */ /* Widen the whole Gravity Forms wrapper/content area, not only the primer table. */ #gform_wrapper_38{ width:calc(100vw - 32px)!important; max-width:1760px!important; margin-left:50%!important; margin-right:0!important; transform:translateX(-50%)!important; box-sizing:border-box!important; } #gform_wrapper_38 #gform_38, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #gform_wrapper_38 .gform_fields{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } /* Another ~5mm total for the Metabion table itself. */ #field_38_9 .mpo38-field9-host{ width:calc(100% + 95px)!important; max-width:none!important; margin-left:-47.5px!important; margin-right:-47.5px!important; } /* Keep ordinary form inputs from wrapping their entered value unnecessarily. */ #gform_wrapper_38 input[type="text"], #gform_wrapper_38 input[type="tel"], #gform_wrapper_38 input[type="email"]{ box-sizing:border-box!important; max-width:100%!important; } /* Desktop: give common field containers all available horizontal space. */ @media (min-width:901px){ #gform_wrapper_38 .gfield, #gform_wrapper_38 .ginput_container{ max-width:100%!important; } } /* Small screens remain contained. */ @media (max-width:900px){ #gform_wrapper_38{ width:calc(100vw - 20px)!important; margin-left:auto!important; margin-right:auto!important; transform:none!important; } #field_38_9 .mpo38-field9-host{ width:100%!important; margin-left:0!important; margin-right:0!important; } } /* ========================================================= v1.6.0 CENTERED / NO LEFT OVERFLOW Keep the wider layout but never let the form leave viewport. ========================================================= */ html, body{ overflow-x:hidden!important; } #gform_wrapper_38{ width:min(1760px, calc(100vw - 24px))!important; max-width:calc(100vw - 24px)!important; margin-left:auto!important; margin-right:auto!important; transform:none!important; position:relative!important; left:auto!important; right:auto!important; box-sizing:border-box!important; } /* Table host may use available width, but must stay inside the form/page. */ #field_38_9 .mpo38-field9-host{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } /* If the table needs more room on narrower screens, scroll inside its own area. */ #field_38_9 #mpo38 .scroll{ overflow-x:auto!important; overflow-y:visible!important; } @media (max-width:900px){ #gform_wrapper_38{ width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important; } } /* ========================================================= v1.6.1 HARD CONTAINMENT Final authority: no transform, no negative margins, no width larger than the viewport/content box. ========================================================= */ /* Never allow the Gravity Forms wrapper or its ancestors to overflow left/right. */ #gform_wrapper_38, #gform_wrapper_38 *, #field_38_9, #field_38_9 *, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ box-sizing:border-box!important; } #gform_wrapper_38{ display:block!important; position:relative!important; left:0!important; right:0!important; transform:none!important; translate:none!important; width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; overflow:visible!important; } /* Use the parent page/container width exactly. */ #gform_wrapper_38 #gform_38, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #gform_wrapper_38 .gform_fields, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; left:0!important; right:0!important; transform:none!important; position:relative!important; } /* Table stays within form; only its own inner area can scroll horizontally. */ #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; margin:0!important; overflow-x:auto!important; overflow-y:visible!important; -webkit-overflow-scrolling:touch!important; } /* Do not force the TABLE wider than its scroll container on desktop. */ #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; position:static!important; left:auto!important; right:auto!important; transform:none!important; } /* Remove any legacy negative margin / viewport-width tricks from the host. */ #field_38_9 .mpo38-field9-host{ margin-inline:0!important; inset:auto!important; overflow:visible!important; } /* The page itself should not be pushed horizontally by this form. */ body:has(#gform_wrapper_38){ overflow-x:hidden!important; } /* On narrower screens, allow a minimum table width only INSIDE the scroll box. */ @media (max-width:1100px){ #field_38_9 #mpo38 table.mpo38-table{ min-width:1100px!important; width:1100px!important; max-width:none!important; } } /* ========================================================= v1.6.2 WIDER UPPER + LOWER FORM / IR NUMBER NO WRAP Expand the entire Form 38 inside the viewport, symmetrically. ========================================================= */ /* Use nearly all viewport width while keeping safe gutters. */ #gform_wrapper_38{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; margin-left:50%!important; margin-right:0!important; transform:translateX(-50%)!important; padding-left:4px!important; padding-right:4px!important; overflow:visible!important; } /* Upper Gravity Forms fields and lower Metabion table use the same full width. */ #gform_wrapper_38 #gform_38, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #gform_wrapper_38 .gform_fields, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; } /* Prevent IR / registration-number style fields and labels from breaking into 2 lines. */ #gform_wrapper_38 input[type="text"], #gform_wrapper_38 input[type="tel"]{ white-space:nowrap!important; } #gform_wrapper_38 .gfield_label, #gform_wrapper_38 legend, #gform_wrapper_38 .ginput_container{ min-width:0!important; } /* Give the Number column a little more room; take it from Sequence. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){ width:5%!important; white-space:nowrap!important; } #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){ width:33%!important; } /* Summary grid follows the new Number/Sequence geometry. */ #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ grid-template-columns:5fr 11fr 33fr 5fr 8fr 6fr 7fr 7fr 10fr 5fr 3fr!important; } /* Keep everything within screen on all desktop widths. */ @media (min-width:901px){ body:has(#gform_wrapper_38){ overflow-x:hidden!important; } } @media (max-width:900px){ #gform_wrapper_38{ width:calc(100vw - 10px)!important; max-width:calc(100vw - 10px)!important; margin-left:50%!important; transform:translateX(-50%)!important; } } /* ========================================================= v1.6.3 SAFE CENTERED WIDE Fix v1.6.2 left overflow: NO viewport centering transform. Width is controlled by the real page/container only. ========================================================= */ #gform_wrapper_38{ position:relative!important; left:auto!important; right:auto!important; transform:none!important; translate:none!important; width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; box-sizing:border-box!important; } /* All upper and lower sections must respect the actual page column. */ #gform_wrapper_38 #gform_38, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #gform_wrapper_38 .gform_fields, #gform_wrapper_38 .gfield, #gform_wrapper_38 .ginput_container, #field_38_9, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; transform:none!important; left:auto!important; right:auto!important; box-sizing:border-box!important; } /* Do not let this plugin create page-level horizontal overflow. */ #gform_wrapper_38{ overflow-x:hidden!important; } #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:visible!important; } /* Desktop table uses full available page width. */ @media (min-width:1101px){ #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; max-width:100%!important; min-width:0!important; } } /* Narrower screens: overflow belongs to table scroll area, never the page. */ @media (max-width:1100px){ #field_38_9 #mpo38 table.mpo38-table{ width:1100px!important; min-width:1100px!important; max-width:none!important; } } /* Keep Number / IR-like values on one line where their field has enough room. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1), #gform_wrapper_38 input[type="text"], #gform_wrapper_38 input[type="tel"]{ white-space:nowrap!important; } /* ========================================================= v1.6.4 NO SCROLL + RESTORE ORIGINAL GRAVITY FORM LAYOUT Keep original multi-column (three-box) Gravity Forms layout. Only the primer table is fitted to available width. Number may wrap to two lines. ========================================================= */ /* Restore Gravity Forms own layout engine; do not force every gfield/container to 100%. */ #gform_wrapper_38 .gform_fields{ width:100%!important; max-width:100%!important; } #gform_wrapper_38 .gfield{ width:auto!important; max-width:none!important; margin-left:initial!important; margin-right:initial!important; } #gform_wrapper_38 .ginput_container{ width:auto!important; max-width:none!important; margin-left:initial!important; margin-right:initial!important; } /* Re-enable Gravity Forms grid spans/classes so three fields can sit side by side. */ #gform_wrapper_38 .gfield.gfield--width-third{ grid-column:span 4!important; } #gform_wrapper_38 .gfield.gfield--width-half{ grid-column:span 6!important; } #gform_wrapper_38 .gfield.gfield--width-full{ grid-column:1 / -1!important; } /* Older Gravity Forms helper classes. */ #gform_wrapper_38 .gf_left_third, #gform_wrapper_38 .gf_middle_third, #gform_wrapper_38 .gf_right_third{ width:31.5%!important; display:inline-block!important; vertical-align:top!important; box-sizing:border-box!important; } #gform_wrapper_38 .gf_left_third{margin-right:2%!important} #gform_wrapper_38 .gf_middle_third{margin-right:2%!important} #gform_wrapper_38 .gf_right_third{margin-right:0!important} /* Primer area uses available form width only. No page/table horizontal scroll. */ #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; overflow-x:visible!important; } #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; max-width:100%!important; min-width:0!important; table-layout:fixed!important; } /* Fit all columns inside width: Number may wrap to two lines as requested. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){ width:4%!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:break-word!important; line-height:1.15!important; } #field_38_9 #mpo38 table.mpo38-table th:nth-child(2), #field_38_9 #mpo38 table.mpo38-table td:nth-child(2){width:11%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:33%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(5), #field_38_9 #mpo38 table.mpo38-table td:nth-child(5){width:8%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(6), #field_38_9 #mpo38 table.mpo38-table td:nth-child(6){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(7), #field_38_9 #mpo38 table.mpo38-table td:nth-child(7){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9){width:10%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:3%!important} /* Summary follows the same fitted table geometry. */ #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ grid-template-columns:4fr 11fr 33fr 5fr 8fr 6fr 7fr 7fr 10fr 6fr 3fr!important; } /* Never create horizontal scroll for this form. */ body:has(#gform_wrapper_38), #gform_wrapper_38{ overflow-x:hidden!important; } /* Mobile can stack naturally. */ @media (max-width:767px){ #gform_wrapper_38 .gf_left_third, #gform_wrapper_38 .gf_middle_third, #gform_wrapper_38 .gf_right_third{ width:100%!important; display:block!important; margin-right:0!important; } } /* ========================================================= v1.6.5 REMOVE EXTRA VERTICAL SCROLL Keep page's normal browser scroll only; remove internal scrollbar. ========================================================= */ #gform_wrapper_38, #gform_wrapper_38 #gform_38, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll{ height:auto!important; max-height:none!important; min-height:0!important; overflow-y:visible!important; } /* Prevent any plugin-internal scroll container from showing a vertical scrollbar. */ #field_38_9 #mpo38 .scroll{ overflow-x:visible!important; overflow-y:visible!important; scrollbar-width:auto!important; } /* No internal scrollbars on the Metabion block itself. */ #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38{ overflow:visible!important; } /* ========================================================= v1.6.6 REMOVE ALL INTERNAL SCROLLBARS Only the browser/page may scroll vertically. ========================================================= */ /* Gravity Forms and Metabion containers must expand naturally. */ #gform_wrapper_38, #gform_wrapper_38 form, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #gform_wrapper_38 .gform_page_fields, #gform_wrapper_38 .gform_fields, #gform_wrapper_38 .gfield, #gform_wrapper_38 .ginput_container, #gform_wrapper_38 .gfield_html, #field_38_9, #field_38_9 .ginput_container, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll, #field_38_9 #mpo38 table, #field_38_9 #mpo38 tbody{ height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; } /* Explicitly neutralize scrollable/viewport-like legacy behavior. */ #gform_wrapper_38, #gform_wrapper_38 form, #gform_wrapper_38 .gform-body, #gform_wrapper_38 .gform_page, #field_38_9 .mpo38-field9-host, #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll{ position:relative!important; top:auto!important; bottom:auto!important; inset:auto!important; } /* Firefox/Chromium: do not reserve scrollbar gutter inside this form. */ #gform_wrapper_38, #gform_wrapper_38 *, #field_38_9 #mpo38, #field_38_9 #mpo38 *{ scrollbar-gutter:auto!important; } /* Never create a scrollbar on the form itself. */ #gform_wrapper_38::-webkit-scrollbar, #gform_wrapper_38 form::-webkit-scrollbar, #field_38_9 .mpo38-field9-host::-webkit-scrollbar, #field_38_9 #mpo38::-webkit-scrollbar, #field_38_9 #mpo38 .scroll::-webkit-scrollbar{ width:0!important; height:0!important; display:none!important; } /* Keep normal page scrolling. */ html{ overflow-y:auto!important; } body{ overflow-y:visible!important; } /* ========================================================= v1.6.7 LOWER PRIMER TABLE ~5mm WIDER Only widen the custom lower Metabion table area. Upper Gravity Forms layout remains unchanged. ========================================================= */ @media (min-width:1101px){ #field_38_9 .mpo38-field9-host{ width:calc(100% + 19px)!important; /* about 5mm total */ max-width:none!important; margin-left:-9.5px!important; margin-right:-9.5px!important; overflow:visible!important; } #field_38_9 #mpo38, #field_38_9 #mpo38 .scroll, #field_38_9 #mpo38 table.mpo38-table{ width:100%!important; max-width:100%!important; min-width:0!important; overflow:visible!important; } } /* Number gets the extra breathing room and may stay on one line when possible. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){ white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; } /* ========================================================= v1.6.8 LOWER TABLE EXTRA WIDTH Add a little more width only to the custom lower table, so the missing/cut-off "R" in Number is fully visible. ========================================================= */ @media (min-width:1101px){ #field_38_9 .mpo38-field9-host{ width:calc(100% + 30px)!important; max-width:none!important; margin-left:-15px!important; margin-right:-15px!important; } } /* Give Number slightly more share; reduce Sequence by the same amount. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){ width:4.8%!important; white-space:nowrap!important; overflow:visible!important; word-break:normal!important; } #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){ width:32.2%!important; } /* Keep summary aligned with the adjusted columns. */ #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ grid-template-columns:4.8fr 11fr 32.2fr 5fr 8fr 6fr 7fr 7fr 10fr 6fr 3fr!important; } /* v1.7.1 CLEAN: never display legacy Metabion/version marker above the form. */ #field_38_9 .mpo38-field9-host::before, #field_38_9 .mpo38-field9-host:before, #field_38_9 #mpo38-field9-host::before, #field_38_9 #mpo38-field9-host:before{ content:none!important; display:none!important; } /* v1.7.2 Continue button on the left */ #field_38_9 #mpo38 .mpo38-pay-wrap{ width:100%!important; display:flex!important; justify-content:flex-start!important; direction:ltr!important; text-align:left!important; } #field_38_9 #mpo38 .mpo38-pay-now{ margin-left:0!important; margin-right:auto!important; } /* v1.7.17: Pishgam column order Number, Name, 5' Mod, Sequence, 3' Mod, Length, Purification, OD, Price, Status, Delete */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(1), #field_38_9 #mpo38 table.mpo38-table td:nth-child(1){width:4.8%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(2), #field_38_9 #mpo38 table.mpo38-table td:nth-child(2){width:11%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(3), #field_38_9 #mpo38 table.mpo38-table td:nth-child(3){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:32.2%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(5), #field_38_9 #mpo38 table.mpo38-table td:nth-child(5){width:7%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(6), #field_38_9 #mpo38 table.mpo38-table td:nth-child(6){width:5%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(7), #field_38_9 #mpo38 table.mpo38-table td:nth-child(7){width:8%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(9), #field_38_9 #mpo38 table.mpo38-table td:nth-child(9){width:10%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(10), #field_38_9 #mpo38 table.mpo38-table td:nth-child(10){width:6%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(11), #field_38_9 #mpo38 table.mpo38-table td:nth-child(11){width:3%!important} #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ grid-template-columns:4.8fr 11fr 7fr 32.2fr 7fr 5fr 8fr 6fr 10fr 6fr 3fr!important; } /* v1.7.21: wider Scale/OD column for the full OD + µmol labels. */ #field_38_9 #mpo38 table.mpo38-table th:nth-child(4), #field_38_9 #mpo38 table.mpo38-table td:nth-child(4){width:28.2%!important} #field_38_9 #mpo38 table.mpo38-table th:nth-child(8), #field_38_9 #mpo38 table.mpo38-table td:nth-child(8){width:10%!important} #field_38_9 #mpo38 table.mpo38-table .od{ white-space:nowrap!important; font-size:12px!important; padding-left:4px!important; padding-right:4px!important; } #field_38_9 #mpo38 .sum.mpo38-summary-aligned{ grid-template-columns:4.8fr 11fr 7fr 28.2fr 7fr 5fr 8fr 10fr 10fr 6fr 3fr!important; } /* v1.7.23: keep mixed OD, decimal and µmol text in its intended order. */ #field_38_9 #mpo38 select.od, #field_38_9 #mpo38 select.od option{ direction:ltr!important; text-align:left!important; unicode-bidi:isolate!important; } /* v1.7.22: make the complete Gravity Form, including the upper fields and the custom Metabion table, about 5mm wider on each side on desktop. */ @media (min-width:1101px){ #gform_wrapper_38{ width:calc(100% + 38px)!important; max-width:none!important; margin-left:-19px!important; margin-right:-19px!important; } #gform_wrapper_38 form#gform_38{ width:100%!important; max-width:none!important; } } .mpo38-proforma-wait-banner{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:18px 0 22px!important; padding:0!important; direction:rtl!important; } .mpo38-proforma-wait-inner{ display:flex!important; flex-direction:column!important; gap:6px!important; padding:14px 16px!important; border:1px solid #d7d7d7!important; border-radius:8px!important; background:#fafafa!important; text-align:right!important; line-height:1.9!important; } .mpo38-proforma-wait-inner strong{font-size:16px!important;} #mpo38 .mpo38-file-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0;padding:16px;background:#f5f7fa;border:1px solid #d8dee8;border-radius:10px} #mpo38 .mpo38-file-tools p{flex-basis:100%;margin:0;white-space:pre-line} #mpo38 .mpo38-file-tools input[type=file]{max-width:100%;width:260px} #mpo38 .mpo38-file-tools button,#mpo38 .mpo38-file-tools a{padding:10px 16px;border-radius:6px} #mpo38 .mpo38-file-tools a.button, #mpo38 #mpo38-import-button{ display:inline-flex!important; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; padding:10px 16px!important; border:1px solid #172b4d!important; border-radius:6px!important; background:#172b4d!important; color:#fff!important; font:inherit; font-weight:600; line-height:1.6!important; text-align:center; text-decoration:none!important; cursor:pointer; } #mpo38 .mpo38-file-tools a.button:hover, #mpo38 #mpo38-import-button:hover{ background:#243f68!important; border-color:#243f68!important; } #mpo38 .mpo38-file-tools a.button:focus-visible, #mpo38 #mpo38-import-button:focus-visible{ outline:3px solid #6098df!important; outline-offset:3px; } #mpo38 #mpo38-import-button:disabled{ opacity:.6; cursor:wait; } /* v1.7.64: compact navy buttons with instructions between them. */ #mpo38 .mpo38-file-tools{ flex-direction:column!important; align-items:flex-start!important; } #mpo38 .mpo38-file-tools p{ flex-basis:auto!important; width:100%; text-align:right; line-height:1.9; } #mpo38 .mpo38-file-tools .mpo38-file-button{ width:auto!important; min-width:0!important; max-width:100%!important; flex:0 0 auto!important; align-self:flex-start!important; padding:10px 16px!important; background:#2f64a3!important; background-image:none!important; border-color:#2f64a3!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:none!important; } #mpo38 .mpo38-file-tools .mpo38-file-button::before, #mpo38 .mpo38-file-tools .mpo38-file-button::after{ content:none!important; }