inside an
-------- */
#btnSave, #btnCancel, #btnAddDependent { display: block; text-decoration: none; }
#btnSave .greenButton, #btnCancel .greenButton,
#btnSave .blueButton, #btnCancel .blueButton {
float: none !important; width: 100% !important; min-height: 44px;
line-height: 1.6; box-sizing: border-box; margin: 8px 0 0;
}
/* --- Shared: absolutely-positioned error notations go static ----------- */
.content .notation, .pad25 .notation {
position: static !important; left: auto !important; width: auto !important;
}
/* --- Shared: dialog (colorbox iframe) body fills the phone ------------- */
.pad25 { padding: 12px !important; box-sizing: border-box; max-width: 100%; }
.pad25 > div[style*="max-height"] { max-height: none !important; overflow-y: visible !important; }
/* === STEP 2 census PAGE table: horizontal scroll + sticky first column ==
13-col edit grid (decision B1). Keep the grid, let it scroll; freeze the
first column as the read anchor. Reflow only; no field hidden.
Scoped to :has(.colHeading) so it hits ONLY real data grids (the census
table has a .colHeading header row); single-row LAYOUT tables that reuse
.shoppingCartTable for chrome (e.g. ThankYou's "What Next?" box) have no
.colHeading and keep normal wrapping instead of nowrap-scrolling.
:has() is Baseline 2023; guarded by @supports so a pre-:has() engine skips
the block cleanly (no adjacent-rule fallout) and the grid degrades to
default-wide (scrolls the page) rather than breaking. */
@supports selector(:has(*)) {
.content .shoppingCartTable:has(.colHeading) {
display: block; width: auto; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
}
.content .shoppingCartTable:has(.colHeading) tr > :first-child {
position: sticky; left: 0; z-index: 2;
box-shadow: 2px 0 4px rgba(0,0,0,.10);
}
/* opaque bg ONLY on data cells (td); the .colHeading header th keeps its own
#f9f9f9 background so the frozen first column's header is not painted over. */
.content .shoppingCartTable:has(.colHeading) tr > td:first-child {
background: #fff;
}
}
/* census row action icons (pencil / trash) to a real tap size */
.content .shoppingCartTable .btnEdit,
.content .shoppingCartTable .btnRemove,
.content .shoppingCartTable .fsize1_4 a {
display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px;
text-align: center;
}
/* === STEP final ThankYou: floated 33/60 content columns + 2 nav buttons =====
The "What Next?" box floats a width33 checklist image beside a width60 text
column; both stack on a phone. Buttons already stacked by the .content
button rule above. (Table itself keeps normal wrapping -- no .colHeading.) */
.content .width60, .content .marginLeft1em.width33 {
float: none !important; width: 100% !important; box-sizing: border-box;
margin-left: 0;
}
/* === EDIT-EMPLOYEE dialog forms: STACK into a labeled field list ========
_Employee (8-col) + _Dependent (7-col) inside .pad25. Hide the header
rows; each shows its label via data-label (added in the partials).
Inputs go full-width + 44px. Hazard 1 honored: this restacks FORM tables
by display only on wrappers; no required field's parent is display:none
and every control stays visible. */
.pad25 .shoppingCartTable,
.pad25 .shoppingCartTable tbody,
.pad25 .shoppingCartTable tr,
.pad25 .shoppingCartTable td { display: block; width: 100%; box-sizing: border-box; }
.pad25 .shoppingCartTable .colHeading { display: none; } /* labels -> td::before */
.pad25 .shoppingCartTable .tableTitle {
display: block; width: 100%; box-sizing: border-box;
font-size: 1.2rem; padding: 10px 0 4px;
}
.pad25 .shoppingCartTable td { position: relative; padding: 6px 0 10px; border: 0; }
.pad25 .shoppingCartTable td[data-label]::before {
content: attr(data-label); display: block;
font-weight: 600; font-size: .9rem; margin-bottom: 3px; color: #444;
white-space: normal;
}
/* each dependent becomes a card */
.pad25 .shoppingCartTable .DependentRowItem {
border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; margin: 10px 0;
}
/* full-width, tap-sized controls (beat inline em widths) */
.pad25 .shoppingCartTable input,
.pad25 .shoppingCartTable select {
width: 100% !important; max-width: 100%; box-sizing: border-box;
min-height: 44px; font-size: 16px;
}
.pad25 .shoppingCartTable .selectContainer {
width: 100% !important; height: auto; overflow: visible; top: 0; margin-top: 0 !important;
}
.pad25 #pnlAddDependent td a, .pad25 #pnlAddDependent td {
display: block; min-height: 44px; line-height: 44px; text-align: left;
}
/* dependent delete: full-width tap row under its "Delete" label */
.pad25 .shoppingCartTable .DependentRowItem td:last-child a,
.pad25 .shoppingCartTable a[class*="btnRemoveDependent"] {
display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center;
}
/* === DIALOG SURFACES: shared chrome inside the _LayoutDialog colorbox iframe ==
Cart / Premium / Plan dialogs wrap content in .contentWrapper.quote_wrapper
(_LayoutDialog.cshtml:232) and render their action buttons + tables DIRECTLY
under it -- NO .content and (for the cart/premium) NO .pad25 ancestor, so the
step-page (.content) and edit-form (.pad25) rules above do not reach them.
NOTE: .quote_wrapper is NOT dialog-only -- ALL THREE layouts wrap in it
(_Layout.cshtml:486, _Layout2.cshtml:257, _LayoutDialog.cshtml:232), so every full
page (Step 1, census, ThankYou, PlanResults via root _ViewStart -> _Layout) sits
under it too. That is safe here: every rule below either
targets a child class that exists ONLY on a dialog surface (.flexAlignRight,
.b-feild-label, #planSuggestion_scroll, .compareTable:has..., #btnRecalPremiums),
or is the generic button stack, which is exactly the mobile treatment those full
pages already get from the .content button rule (verified: census + ThankYou gate
clean with this applied). So the overlap is harmless, not a leak.
This also harmlessly re-covers the EditEmployee Save/Cancel buttons with the
same float:none/width:100% they already get from the #btnSave/#btnCancel rules. */
.quote_wrapper .blueButton, .quote_wrapper a.blueButton,
.quote_wrapper .greenButton, .quote_wrapper a.greenButton,
.quote_wrapper .grayButton, .quote_wrapper a.grayButton {
box-sizing: border-box; min-height: 44px; line-height: 1.4;
display: block; float: none !important; width: 100%;
margin: 10px 0 0; text-align: center;
}
.quote_wrapper .width150px, .quote_wrapper .width33 { width: 100% !important; }
/* .flexAlignRight is float:right;display:flex (theme.css:4068) -> the two cart
buttons sit on one row; unfloat + block so they stack full-width. */
.quote_wrapper .flexAlignRight { float: none !important; display: block; }
.quote_wrapper .notation {
position: static !important; left: auto !important; width: auto !important;
}
/* === STEP "Cart": ViewCart 5-col read-only grid -> scroll + sticky first col ==
.shoppingCartTable.pop carries min-width:925px (theme.css:4058) which freezes
the cart wider than the phone. Release it; the wide nowrap grid then scrolls
INSIDE the block (the page does not side-scroll). Freeze the Plan column as the
read anchor so the carrier/plan stays visible while you scroll to the price.
The Plan column wraps (it is wide); the data columns stay nowrap and scroll.
The carrier logo is a FIXED (no href)
is decorative -> hide it (no content loss) so it is not a 3px tap target */
.premiumSummaryDataTD a[href] {
display: block; min-height: 44px; line-height: 44px;
}
.premiumSummaryDataTD a:not([href]) { display: none; }
/* Compare checkbox: 24px box (WCAG 2.2 AA target floor) with a 44px label row */
.resultCompareDiv input[type="checkbox"] { width: 24px; height: 24px; }
.resultCompareDiv label {
display: inline-block; min-height: 44px; line-height: 44px; vertical-align: middle;
}
/* the blue Add-to-Cart block reads as a full-width banner when stacked */
.resultRight, .resultRightSelected { padding: 14px; }
/* featured plans: the absolute 18em tab/backdrop must not push the viewport */
.featuredTab { max-width: 100%; box-sizing: border-box; }
/* === Premium dialog: the 6-col "Employee Premium Details" .compareTable ===
Two .compareTable tables render in PremiumSummary: a 2-col key/value summary
(wraps fine, left alone) and a 6-col read-only details grid. Give ONLY the
6-col grid the scroll+sticky-first-col data-table treatment; identify it by
its .planDetailTableHdrLightBlue header row via :has(). :has() is Baseline
2023; guarded by @supports so a pre-:has() engine skips the block cleanly and
the grid degrades to default-wide. WCAG 1.4.10 exempts data tables from reflow. */
@supports selector(:has(*)) {
.quote_wrapper .compareTable:has(.planDetailTableHdrLightBlue),
.content .compareTable:has(.planDetailTableHdrLightBlue) {
display: block; width: auto; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
}
/* freeze only true first-column cells. Full-width section/total rows use a single
colspan cell -> excluded via :not([colspan]) so their native header style (white
text on blue, e.g. Medical/Hospital/Prescription Drugs) stays visible. */
.quote_wrapper .compareTable:has(.planDetailTableHdrLightBlue) tr > :first-child:not([colspan]),
.content .compareTable:has(.planDetailTableHdrLightBlue) tr > :first-child:not([colspan]) {
position: sticky; left: 0; z-index: 2;
white-space: normal; box-shadow: 2px 0 4px rgba(0,0,0,.10);
}
/* opaque bg ONLY on data cells (td). The first column's HEADER cells are colored
th's with WHITE text -- the dark-blue plan-name header (.planDetailTableHdrDarkBlue)
and the light-blue census header (th inside tr.planDetailTableHdrLightBlue). A white
sticky bg painted those white-on-white = invisible header (a11y-gate catch 2026-06-13).
Leaving th's alone keeps their native colored bg (white text stays legible: 6.7:1 /
4.5:1) AND they still freeze via the sticky rule above. */
.quote_wrapper .compareTable:has(.planDetailTableHdrLightBlue) tr > td:first-child:not([colspan]),
.content .compareTable:has(.planDetailTableHdrLightBlue) tr > td:first-child:not([colspan]) {
background: #fff;
}
}
/* === STEP 3 plan results: the .sortingDiv filter bar ===================
A one-row, |-delimited control strip: Filter By + Carrier/PlanType/
(OfficeCopay)/PlanTier multiselects (jquery.multi-select -> .multi-select-
container/.multi-select-button width:8em, .multi-select-menu absolute,
theme.css:2136) + Premium from/to text inputs + Filter/Reset buttons. Stack
it: each control full-width + tap-sized; constrain the absolute dropdown menu
to the viewport so it cannot render off-screen. font-size:0 on the row kills
the stray bare-text "|" separators + whitespace (they are text nodes, not
elements); children restore their size. */
.sortingDiv { font-size: 0; line-height: 1.4; }
.sortingDiv > strong, .sortingDiv > label,
.sortingDiv input, .sortingDiv button,
.sortingDiv .multi-select-container { font-size: 1rem; }
/* (.sortingDiv span left at font-size:0 on purpose -> collapses the stray
| separator; the plugin's own spans inherit 1rem from
.multi-select-container above, so the widget text stays sized.) */
.sortingDiv > strong, .sortingDiv > label {
display: block; margin: 12px 0 4px;
}
.sortingDiv .multi-select-container { display: block; width: 100%; margin: 4px 0; }
.sortingDiv .multi-select-button {
width: 100% !important; height: auto; min-height: 44px;
box-sizing: border-box; white-space: normal; text-align: left;
}
.sortingDiv .multi-select-menu { min-width: 100%; max-width: 100%; }
.sortingDiv .multi-select-menuitems { max-width: 100%; }
.sortingDiv input[type="text"], .sortingDiv .AmountField, .sortingDiv .PercentField {
display: block; width: 100% !important; box-sizing: border-box;
min-height: 44px; font-size: 16px; margin: 4px 0;
}
.sortingDiv button.blueButton {
display: block; width: 100%; min-height: 44px; box-sizing: border-box;
margin: 8px 0 0; text-align: center; float: none;
}
/* === STEP 3 dialogs: ChangeContribution / PlanContribution ============
These dialog views use classes (.b-feild-label, .cs_tt_button_dialog,
.bblue-box, .plandethed, .epdinfo*, .empl-box ...) that are defined in NO
loaded stylesheet, so the elements are plain block divs; their only mobile
hazards are the INLINE fixed widths/floats. Neutralize those so the dialogs
read as clean full-width stacked field lists. Scoped to .quote_wrapper. */
.quote_wrapper .b-feild-label {
display: block; width: 100% !important; float: none !important;
box-sizing: border-box; margin-bottom: 6px;
}
.quote_wrapper .b-feild-label > div[style*="float"] {
float: none !important; width: 100%;
}
.quote_wrapper .b-feild-label select,
.quote_wrapper .b-feild-label input,
.quote_wrapper .empl-box select,
.quote_wrapper .empl-box input[type="text"] {
width: 100% !important; box-sizing: border-box; min-height: 44px; font-size: 16px;
}
/* Save / Cancel: .cs_tt_button_dialog (inline width:120px) inside a wrapper
with inline float:left;padding-left:27% -> full-width stacked buttons. */
.quote_wrapper .cs_tt_button_dialog {
width: 100% !important; box-sizing: border-box; margin: 8px 0 !important;
min-height: 44px; text-align: center;
}
.quote_wrapper .cs_tt_button_dialog a {
display: block; min-height: 44px; line-height: 44px;
}
.quote_wrapper div[style*="padding-left:27%"],
.quote_wrapper div[style*="padding-left: 27%"] {
padding-left: 0 !important; float: none !important; width: 100%;
}
/* PlanContribution recalculate button (plain