's content edges. */
.shoppingCartTable th.tdRowHeading,
.shoppingCartTable td.tdRowHeading{
display:block;
margin:-.7em -.85em;
padding:.65em 1em !important;
border-radius:0;
box-sizing:border-box;
}
}
/* =========================================================================
4. My_Enrollment — 5-column applications table → responsive cards
========================================================================= */
@media only screen and (max-width: 799px) {
/* Wrap the shoppingCartTable as block; hide column header row */
/* NOTE: .shoppingCartTable base card rules from Section 2 above apply here
since this page also uses that class. We add enrollment-specific rules. */
/* The Plan cell is full-width (col 1 in a 2-col card grid) */
.shoppingCartTable td[data-label="Plan"]{
grid-column:1 / -1;
border-bottom:1px dotted #c5d9ef;
padding-bottom:.6em;
margin-bottom:.25em;
}
/* Carrier logo within the Plan cell */
.shoppingCartTable td[data-label="Plan"] .resultCarrierLogo{
width:20em;
max-width: 20em;
margin-bottom:.4em;
}
.shoppingCartTable td[data-label="Plan"] .resultCarrierLogo img{
width:100% !important;
height:auto;
}
.shoppingCartTable td[data-label="Plan"] .resultPlanName{
font-size:1.1em;
font-weight:700;
margin:.3em 0 .4em;
color:#222;
}
/* Enrollment Status: full-width, highlighted */
.shoppingCartTable td[data-label="Enrollment Status"]{
grid-column:1 / -1;
border-top:1px dotted #c5d9ef;
padding-top:.6em;
margin-top:.25em;
}
/* Action buttons inside enrollment status cells */
.shoppingCartTable td[data-label="Enrollment Status"] .blueButton,
.shoppingCartTable td[data-label="Enrollment Status"] .greenButton{
min-height:44px;
box-sizing:border-box; /* without this, min-height measures content only and
theme.css's padding (8px top/bottom) stacks on top of
it - a plain a.blueButton.floatRight rule elsewhere
happens to set border-box too, which is why the one
button in this group that carries .floatRight ("Continue
Application") looked right while the other three (no
float class) rendered ~16px taller. Setting it here
directly makes all four consistent regardless of that
unrelated rule. */
margin:.35em 0;
float:none !important; /* neutralizes .floatRight (SmallGroups_My_Enrollment.html's
"Continue Application" button) - floated, it sits outside
normal flow and "Change Plan | Remove" (which follows it
in the HTML but isn't floated) renders above/beside it
instead of below. */
}
/* This block used to be display:inline-flex + align-items:center, with the
rule below adding margin-left to the icon to compensate for flex
dropping the whitespace-only text node between the button's label and
its built-in raquo icon. Removing the flex context (min-height/
box-sizing/margin/float above are unaffected) restores that gap
naturally, so the compensating margin-left rule is gone too - keeping
it would now stack a second gap on top of the real one. */
/* Enrolled/Complete/status icons */
.greenEnrolled{ font-size:1.05em; }
/* Totals rows (congratulations / pending messages) */
.shoppingCartTable tr.totals td::before{ display:none; }
}
/* =========================================================================
5. PremiumSummary — Plan Premium Summary 2-col table: readable on phones
========================================================================= */
@media only screen and (max-width: 799px) {
/* The plan tile sits at the top of the summary — use full width.
.planTiles kept for back-compat; .planTileDetail is the current markup */
.planTiles, .planTileDetail{
margin:0 0 1em;
}
/* Plan Premium Summary table: the compareTable rule (Section 13 in
mobile.css) handles horizontal scroll + sticky col.
We just tighten the font and padding on this page. */
.compareTable.fsize1_25{
font-size:1em;
}
.compareTable .planDetailTableHdrDarkBlue{
font-size:1em;
}
/* Recalculate button: full-width on phone, 44px tap */
a.blueButton.width33{
display:block;
float:none !important;
width:100% !important;
min-height:44px;
box-sizing:border-box;
text-align:center;
margin:.5em 0;
}
@media only screen and (max-width: 480px) {
/* Tighten table cell padding for widest content coverage on very small screens */
.compareTable td, .compareTable th{
padding:.3em .45em;
}
}
/* =========================================================================
6. 360px — absolute minimum: prevent any overflow, keep tap targets
========================================================================= */
@media only screen and (max-width: 359px) {
/* Buttons: ensure they never overflow viewport */
a.blueButton, a.greenButton, a.redButton, button{
max-width:100%;
box-sizing:border-box;
}
/* Font-size floor: nothing smaller than 14px (≈.875rem) on body text */
body{ font-size:12px; }
/* Input/select floor */
input, select{
font-size:1rem !important;
}
/* Card grid always single-column at 360 */
.shoppingCartTable tr:not(.colHeading):not(.totals){
grid-template-columns:1fr !important;
}
/* Plan cell full-width (already set, but make explicit) */
.shoppingCartTable td{ grid-column:1 !important; }
}
/* Close the outer @media (max-width:799px) block opened by Section 5
(PremiumSummary). The nested 480px and 359px blocks above close their
own @media wrappers, but the Section 5 outer block was missing its
final }. Without this, every subsequent rule in the file is silently
nested inside that @media and has no effect at desktop widths. */
}
/* =========================================================================
2b. EECensus — unified div-card layout (mobile, < 800px)
Same .censusList/.censusGroup/.censusEmpRow/.censusDepRow structure
used by the desktop grid (sg_census_table.css).
Flex-wrap layout: all cells full-width, edit+delete share a 50/50 row.
========================================================================= */
/* ---- Column header row: hidden on mobile ---- */
.censusColHeaders{ display:none; }
/* ---- List container ---- */
.censusList{
margin:0 0 1em;
}
/* ---- Section title ---- */
.censusSectionTitle{
background:#0B5EA2;
border-radius:9px;
overflow:hidden;
margin-bottom:1em;
}
.censusSectionH2{
color:#fff;
font-family:'Costco Sans Micro','apple-system','BlinkMacSystemFont','Segoe UI','Roboto',sans-serif;
font-weight:600;
font-size:1.6em;
margin:0;
padding:.75em 1em;
}
/* ---- Employee group wrapper ---- */
.censusGroup{
border:1px solid #b3ccec;
border-radius:8px;
overflow:hidden;
box-shadow:0 1px 4px rgba(0,93,171,.10);
margin-bottom:1.25em;
}
/* ---- Employee row: flex-wrap so cells stack, buttons pair up ---- */
.censusEmpRow{
background:#fff;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:stretch;
}
/* Card header: full-width blue bar */
.censusCardHeader{
flex:0 0 100%;
width:100%;
background:#0078c7;
color:#fff;
font-size:1.2em;
font-weight:700;
margin:0;
padding:.6em 1em;
letter-spacing:.01em;
box-sizing:border-box;
}
/* All data cells: full-width label/value row */
.censusEmpRow .censusCell{
flex:0 0 100%;
width:100%;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:.5em;
padding:.38em 1em;
border-bottom:1px dotted #dbe9f9;
box-sizing:border-box;
}
/* Hide the # cell — shown in the card header instead */
.censusEmpRow .censusCell--num{ display:none; }
/* Edit/Delete: half-width side-by-side, with padding so links look like inset buttons */
.censusEmpRow .censusCell--edit,
.censusEmpRow .censusCell--delete{
flex:0 0 50%;
width:50%;
display:flex;
align-items:center;
border-bottom:none;
box-sizing:border-box;
background:#f7fafd;
border-top:1px solid #d8e2ec;
padding:.55em .35em;
}
.censusEmpRow .censusCell--edit { padding-left:.65em; padding-right:.2em; }
.censusEmpRow .censusCell--delete{ padding-left:.2em; padding-right:.65em; }
/* ---- Action links: actual rounded buttons ---- */
.censusActionLink{
display:flex;
align-items:center;
justify-content:center;
gap:.45em;
flex:1 1 auto;
width:100%;
min-height:44px;
font-weight:700;
font-size:1.05em;
letter-spacing:.04em;
text-decoration:none;
text-transform:uppercase;
transition:background .18s ease;
border-radius:6px;
box-sizing:border-box;
}
.censusActionLink--edit{
background:#005dab;
color:#fff;
}
.censusActionLink--edit:hover,
.censusActionLink--edit:focus{ background:#004386; color:#fff; }
.censusActionLink--delete{
background:#DE2127;
color:#fff;
border-left:1px solid rgba(255,255,255,.25);
}
.censusActionLink--delete:hover,
.censusActionLink--delete:focus{ background:#b81118; color:#fff; }
.censusActionLink:focus-visible{
outline:3px solid #ffbf47;
outline-offset:2px;
}
/* FA icons inside buttons: force white so they show on coloured backgrounds */
.censusActionLink .fa{
color:#fff !important;
font-size:1em;
}
/* Action label text: visible on mobile */
.censusActionLabel{ display:inline; }
/* ---- Cell label (left) and value (right) ---- */
.censusLabel{
flex:0 0 45%;
font-size:.88em;
font-weight:700;
color:#005dab;
text-transform:uppercase;
letter-spacing:.02em;
min-width:0;
}
.censusVal{
flex:1 1 auto;
text-align:right;
font-weight:500;
color:#222;
min-width:0;
}
/* ---- Dependent sub-cards ---- */
.censusDepRow{
background:#F9FcFD;
border-top:1px solid #cccccc;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.censusDependentHeader{
flex:0 0 100%;
width:100%;
background:#f9f9f9;
color:#333333;
font-size:1.05em;
font-weight:700;
margin:0;
padding:.4em 1em;
border-bottom:1px solid #dbe9f9;
box-sizing:border-box;
}
.censusDepRow .censusCell{
flex:0 0 100%;
width:100%;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:.5em;
padding:.38em 1em;
border-bottom:1px dotted #dbe9f9;
box-sizing:border-box;
}
/* These dependent fields are structurally empty — hide on mobile */
.censusDepRow .censusCell--num,
.censusDepRow .censusCell--status,
.censusDepRow .censusCell--spouse,
.censusDepRow .censusCell--child,
.censusDepRow .censusCell--zip,
.censusDepRow .censusCell--edit,
.censusDepRow .censusCell--delete{ display:none; }
/* ---- Add Group Member row ---- */
.censusAddRow{
text-align:right;
padding:.75em 0 .4em;
}
.censusAddRow .blueButton::before{
content:"+ ";
font-weight:700;
}
/* ---- 360px floor ---- */
@media only screen and (max-width:360px){
.censusCardHeader{ font-size:1.05em; }
.censusLabel{ font-size:.82em; }
.censusActionLink{ font-size:1em; }
.censusEmpRow .censusCell--edit,
.censusEmpRow .censusCell--delete{ flex:0 0 50%; width:50%; }
}
/* =========================================================================
SECTION 18 - Premium Summary pages (SmallGroups_PremiumSummary.html,
PremiumSummary.html popup, ExecPremiumSummary.html popup)
Rules outside media queries apply at ALL viewport widths.
========================================================================= */
/* ── Total rows: white background + bold (replaces trLightGrey1+Grey333) ── */
.psTotalRow{
background:#f9f9f9;
}
.psTotalRow th,
.psTotalRow td{
font-weight:700 !important;
color:#1a1a1a;
}
/* ── Table section title (replaces colspan=6 header row inside table) ── */
/* Sits above the .tableScrollWrap so it never scrolls away with the data */
.psTableTitle{
background:#0b5ea2;
color:#fff;
font-size:1.15em;
font-weight:700;
line-height:1.3;
padding:.55em .85em;
margin:1.25em 0 0;
border-radius:4px 4px 0 0;
white-space:normal;
word-break:break-word;
}
/* Remove any top gap between title div and scroll wrapper */
.psTableTitle + .tableScrollWrap{
margin-top:0;
}
/* ── Sticky-column bg for psTotalRow so white shows through on scroll ── */
@media only screen and (max-width:899px){
.compareTable .psTotalRow .tdRowHeading{
background:#f9f9f9;
}
/* Ensure planDetailTableHdrDarkBlue cells wrap on narrow viewports */
.compareTable .planDetailTableHdrDarkBlue{
white-space:normal;
word-break:break-word;
}
/* ── Every first-column cell in Employee Premium Details tables ──
.psTableTitle + .tableScrollWrap uniquely targets the 6-column
premium summary employee tables (not the 2-col summary table or
plan detail tables that use compareTable).
EVERY row's first cell is made sticky and given a light-blue bg
so it stays visible and opaque as the table scrolls right. */
.psTableTitle + .tableScrollWrap .compareTable tr > td:first-child,
.psTableTitle + .tableScrollWrap .compareTable tr > th:first-child{
position:sticky;
left:0;
z-index:2;
background:#eff7ff; /* light blue – sticky column identity */
}
/* planDetailTableHdrLightBlue Census header keeps its medium blue */
.psTableTitle + .tableScrollWrap .compareTable
.planDetailTableHdrLightBlue th:first-child{
background:#4079B9; /* restore header row color */
z-index:3;
}
/* psTotalRow sticky cell keeps its grey-white tone */
.psTableTitle + .tableScrollWrap .compareTable
.psTotalRow td:first-child,
.psTableTitle + .tableScrollWrap .compareTable
.psTotalRow th:first-child{
background:#f9f9f9;
}
}
/* ── Popup-specific adjustments (≤799px, inside .pad25) ── */
@media only screen and (max-width:799px){
.psTableTitle{
font-size:1.1rem; /* rem bypasses .pad25 fsize chain */
margin:.75em 0 0;
}
/* planTileDetail inside .pad25 popup context */
.pad25 .planTileDetail{
margin:0 0 1em;
}
}
/* =========================================================================
COLORBOX FRAME – allow close button to display outside the popup border.
#colorbox and #cboxWrapper have overflow:hidden in colorbox.css which
clips the absolutely-positioned close button. Making them overflow:visible
lets the button sit outside the frame while #cboxContent still clips the
iframe content (it has its own overflow rule).
========================================================================= */
#colorbox,
#cboxWrapper{
overflow:visible !important;
}
/* =========================================================================
COLORBOX CLOSE BUTTON – dark navy, red on rollover (all widths).
Overrides the close_icon.png background-image from colorbox.css.
The #cboxClose element is injected into the main page by colorbox.js,
so this rule lives in mobile.css (loaded by all SmallGroups pages).
========================================================================= */
#cboxClose{
background-image:none !important;
background-color:#0b5ea2 !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
top:-13px !important;
right:-10px !important;
box-shadow:0 2px 8px rgba(0,0,0,.3) !important;
transition:background-color .18s ease !important;
cursor:pointer !important;
text-indent:0 !important;
}
#cboxClose::after{
content:'\00d7'; /* × multiplication sign */
color:#fff;
font-size:1.45rem;
font-weight:700;
line-height:1;
pointer-events:none;
}
#cboxClose:hover,
#cboxClose:focus{
background-color:#DE2127 !important;
outline:none !important;
}
#cboxClose:focus-visible{
outline:3px solid #ffbf47 !important;
outline-offset:2px !important;
}
/* ============================================================
SECTION 19 - Miscellaneous Detail Page Mobile Adjustments
============================================================ */
/* ---- Global form-field boxes (all mobile screens) ----
theme.css styles text inputs/selects with only a bottom border + a
transparent background, so on mobile they read as underlines rather
than fields (per the Individuals hero form screenshot). Give every
text-like input, select and textarea a full outline + 5px radius +
>=44px tap height on phones. Focus highlighting already exists in
theme.css (input:focus / select:focus) and is intentionally NOT
overridden here. Checkboxes/radios/buttons are excluded. */
@media only screen and (max-width:799px){
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
input[type="search"],
input:not([type]),
select,
textarea{
border:1px solid #0B5EA2 !important;
border-radius:5px !important;
background-color:#fff !important;
min-height:44px;
box-sizing:border-box;
padding:.4em .6em;
}
textarea{ min-height:6em; }
.hmSGWMArrows {display:none;}
.boxVertMargin{margin-top: 0; margin-bottom: 0;}
}
/* ---- Detail-page hero banners + forms (IF + SG *Detail_Pg_* pages) ----
Every one of these hero wrappers (.IF*HeroWrapper / .SG*HeroWrapper)
shares the same desktop pattern: a fixed height:30em box with the
white .benefitHeroContent card position:absolute'd to its bottom.
On a phone the fixed height clips and the absolute card (being out of
normal flow) can't make the wrapper grow, so stacked content overflows.
Fix mirrors Section 8's .homeHeroContent.Individuals approach:
wrapper -> height:auto, card -> position:static so the wrapper grows
to contain it, and the hero form (where present, e.g. Dental) stacks
one field per row with >=44px targets. */
@media only screen and (max-width:799px){
.IFMedicalHeroWrapper,
.IFDentalHeroWrapper,
.IFVisionHeroWrapper,
.IFShortTermHeroWrapper,
.IFLifeHeroWrapper,
.IFAccidentHeroWrapper,
.IFCriticalIllnessHeroWrapper,
.IFHospitalHeroWrapper,
.SGMedicalHeroWrapper,
.SGICHRAHeroWrapper,
.SGDentalHeroWrapper,
.SGVisionHeroWrapper,
.SGLifeHeroWrapper,
.SGDisabilityHeroWrapper{
height:auto !important;
padding:1.25em 0;
background-position:center top;
}
.benefitHeroContent{
position:static;
width:92%;
margin:0 auto;
box-sizing:border-box;
font-size:1.25em;
border-radius:.5em; /* all four corners now it isn't pinned to the wrapper bottom */
}
/* Hero form (Dental has real fields; others are just a CTA button) */
.benefitHeroContent form{ width:100%; box-sizing:border-box; }
.benefitHeroContent form label{ display:block; margin:.5em 0 .2em; font-size:1rem; }
.benefitHeroContent form select,
.benefitHeroContent form input{
width:100% !important; max-width:22em; box-sizing:border-box;
min-height:44px; margin-top:.15em; font-size:1rem;
}
.benefitHeroContent form br{ display:none; }
/* Hero CTA button: full-width, un-floated, 48px */
.benefitHeroContent .largeGroupHeroButton{
float:none !important; display:block;
width:100%; max-width:22em; margin:1em auto 0 !important;
min-height:48px; box-sizing:border-box; text-align:center;
display:flex; align-items:center; justify-content:center;
}
}
/* ---- LFA Overview hero (SmallGroups_LFA_Overview.html) ----
.LFAContentWrapper is a fixed height:31.375em hero. theme.css already
shrinks the font at <=820px but never lets the box grow, so the H1 +
CTA can clip on a phone. Let it grow and un-float the CTA. */
@media only screen and (max-width:799px){
.LFAContentWrapper{
height:auto !important;
padding-bottom:1.25em;
background-position:left top;
}
.LFAHeroContent{ width:100%; box-sizing:border-box; }
.LFAHeroText{ padding-left:.75em; padding-right:.5em; }
.LFAContentWrapper .redButton{
float:none !important; display:inline-block; text-align:center;
min-height:44px; box-sizing:border-box; margin-left:.75em;
}
}
@media only screen and (max-width:560px){
.benefitHeroContent{font-size:1.5em;}
.benefitHeroContent h1{font-size: 1.25em;}
.largeGroupHeroButton {font-size:1.4em;}
.comparisonTable{font-size: .84em;}
.comparisonTable td, .comparisonTable th, .comparisonTable th.tophdr{padding:5px;}
.comparisonTable th.tophdr, .comparisonTable th{font-size: 1.2em;}
.homeContent h2{font-size: 1.6em;}
}
@media only screen and (max-width:389px){
.benefitHeroContent{font-size:1.4em;}
.benefitHeroContent h1{font-size: 1.25em;}
.comparisonTable{font-size: .75em;}
}
/* ---- Medicare funnel embedded card (Individuals_Medicare_Quote_01.html) ----
At mobile widths the card can't stay at 52% width alongside the hero photo.
Stack full-width inside the hero wrapper; the background photo shows behind
the card or collapses once the card covers the full banner width. ---- */
.mfEmbed{
width:100% !important;
max-width:100% !important;
margin:0 !important;
}
/* Unwrap the hero wrapper's flex so the card stacks normally */
body.cbcSite .quoteContentWrapperForm.Medicare{
display:block !important;
padding:1em 0 !important;
}
body.cbcSite .quoteContent{
padding:0 4% !important;
}
/* =========================================================================
SECTION 20 - Carrier Partner pages
(Individuals_Carriers.html, SmallGroups_Carriers.html,
LargeGroups_Carriers.html)
Shared template: a big blue .staticContentHdr title (now marked up as
on all three pages), a bordered .staticContentDiv panel, and one or
more .carrierTable tables (logo + name/address, 2 fixed-width columns).
SmallGroups_Carriers.html additionally has an A-Z jump nav (.glossy_top /
.glossy_hed) and repeated "Top" links (.top_links) between letter groups.
None of these classes had prior mobile rules - the two-column table and
the 26-cell single-row A-Z nav simply didn't fit on a phone.
========================================================================= */
@media only screen and (max-width: 799px){
/* Page title: scale down from the desktop 2.688em so it doesn't force
horizontal scroll on narrow phones. Still well above any other
heading on the page (h2 mobile-nav labels, h3 - none on this page). */
.staticContentHdr{
font-size:2rem !important;
line-height:1.25;
padding:.6em .55em;
}
/* Content panel: desktop padding (2em) and font-size (1.4em) eat too
much of a phone's width. Keep body text safely above the .9em floor. */
.staticContentDiv{
padding:1em .7em;
font-size:1rem;
box-sizing:border-box;
}
/* Carrier table: stack logo above name/address instead of two fixed-
width side-by-side columns (34/66% etc. - too narrow to be legible
under ~360px). One visible divider per complete row, not per cell. */
.carrierTable,
.carrierTable tbody,
.carrierTable tr,
.carrierTable td{
display:block;
width:100%;
box-sizing:border-box;
}
.carrierTable tr{
border-bottom:1px solid #ccc;
padding:.75em 0 1em;
}
.carrierTable tr:last-child{ border-bottom:none; }
.carrierTable td{
border-bottom:none; /* was set per-cell in theme.css; moved to tr above */
padding:.3em 0;
text-align:center;
}
.carrierTable img{
display:block;
margin:0 auto .5em;
max-height:3em;
}
/* A-Z jump nav (SmallGroups_Carriers.html): 26 cells at width:3.8% each
are unusable on a phone - wrap them into a proper tap-target grid. */
.glossy_top{
display:flex;
flex-wrap:wrap;
justify-content:center;
width:100%;
}
.glossy_top .glossy_hed{
display:flex;
width:auto;
min-width:44px;
min-height:44px;
flex:0 0 auto;
padding:.2em .3em;
font-size:1rem;
}
.glossy_top .glossy_hed a{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-height:44px;
}
/* "Top" links between lettered sections: theme.css padding (8px 24px)
plus a 1em line-height computes to ~35px total - short of 44px. */
.top_links{
min-height:44px;
padding:.85em 1.1em;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* "Go back to small group quoting" link above the A-Z nav
(SmallGroups_Carriers.html): text-only anchor with no vertical
padding - add a tap-height floor without changing its inline flow. */
.content .floatLeft.fsize1_25 a{
display:inline-flex;
align-items:center;
min-height:44px;
padding:.3em 0;
}
}
/* =========================================================================
SECTION 21 - SmallGroups_TC_SGMap.html filter controls
"Coverage Type:" / "Carrier:" selects sit float-left with a desktop-only
-6px nudge and a bare
between them; the "Coverage / No Coverage"
map-color legend sits float-right beside them. On a phone all of this
collapses into one cramped, overlapping cluster. Scoped via direct-child
selectors under .staticContentDiv - both blocks are unique to this page
(verified: single occurrence each), so no wrapper div was needed.
========================================================================= */
@media only screen and (max-width: 799px){
/* Filter block: un-float, let each label+select take its own full-width row */
.staticContentDiv > .floatLeft.alignRight{
float:none;
display:block;
width:100%;
text-align:left;
}
/* The desktop
between "Coverage Type" and "Carrier" is redundant
once the selects below are full-width blocks - hide it to avoid an
extra blank line, spacing is handled by the select's own margin. */
.staticContentDiv > .floatLeft.alignRight br{ display:none; }
.staticContentDiv > .floatLeft.alignRight .selectContainer{
display:block;
width:100%;
height:auto;
overflow:visible;
position:static;
margin:.35em 0 .9em !important; /* overrides inline margin-top:-6px */
}
.staticContentDiv > .floatLeft.alignRight select{
width:100% !important;
min-height:44px;
border:1px solid #358DD9;
border-radius:5px;
padding:.5em .6em;
box-sizing:border-box;
background-color:#fff;
}
/* Map-color legend: un-float, lay the two swatches side by side below
the filters instead of colliding with them. */
.staticContentDiv > .floatRight{
float:none;
display:flex;
gap:.6em;
flex-wrap:wrap;
margin:0 0 1em;
}
.staticContentDiv > .floatRight .keyBlockDarkBlue,
.staticContentDiv > .floatRight .keyBlockGrey{
width:auto !important; /* overrides inline width:7em */
flex:1 1 auto;
text-align:center;
}
.staticContentDiv > .floatRight .marginLeft1em{ margin-left:0; }
}
/* =========================================================================
SECTION 22 — SmallGroups_LFA_Overview.html: Rx pharmacy comparison table
The 4-column .comparisonTable.fsize_65em inherits font-size through
.homeContent (1.75em) → fsize_65em (.65em !important) → td (1.25em) =
~21px computed — with padding:1em that makes each cell ~43px wide just
for padding alone. Four columns × 43px = 172px padding before any text.
Fix: target the class pair to break the em chain with rem units +
tighten padding. Specificity 0,2,1 beats both .comparisonTable td
(0,1,1) and the fsize1em !important on the th elements (handled by
adding our own !important on font-size only).
Corner badge: 60px triangle overflows a narrow mobile th, causing the
hypotenuse to be clipped at the cell right edge (flat extension).
Fix: reduce --size to 32px + add overflow:hidden on the th.
========================================================================= */
@media only screen and (max-width:799px){
/* Table: override the width="95%" HTML attribute; word-break so long
header text ("AT COSTCO PHARMACY", "AT RETAIL PHARMACY") wraps
inside narrow columns rather than forcing the table wider. */
.comparisonTable.fsize_65em{
width:100% !important;
box-sizing:border-box;
word-break:break-word;
}
/* Break the em inheritance chain with rem — these values are absolute
regardless of .homeContent's 1.75em scaling. 0.85rem = 13.6px at
the 16px root — above the practical 11px AA floor.
!important required to override fsize1em's "font-size:1em !important"
that is present on the th elements in the HTML. */
.comparisonTable.fsize_65em td,
.comparisonTable.fsize_65em th{
padding:6px 5px;
font-size:0.85rem !important;
white-space:normal;
word-break:break-word;
}
.comparisonTable.fsize_65em th.tophdr{
font-size:0.85rem !important;
padding:6px 5px;
position:relative; /* re-affirm so corner-badge position:absolute
anchors to this cell, not a distant ancestor */
overflow:hidden; /* clip the badge triangle cleanly at the cell
boundary — without this the hypotenuse is
clipped by the adjacent cell rendering as
a flat vertical edge ("flat extension"). */
}
/* Corner badge: reduce from the default 60px to 32px so the right-
angle triangle fits fully within the narrow mobile th. The SVG star
positions are computed from --size via calc() in theme.css, so
updating the three border/position values here is sufficient. */
.comparisonTable.fsize_65em .corner-badge{
--size:32px;
border-top:var(--size) solid #d61f2a;
border-left:var(--size) solid transparent;
}
.comparisonTable.fsize_65em .corner-badge svg{
top:calc(var(--size) * -0.82);
right:calc(var(--size) * 0.18);
width:calc(var(--size) * 0.35);
height:calc(var(--size) * 0.35);
}
}
@media only screen and (max-width:389px){
/* Tighten further at the 360px floor: 0.80rem = 12.8px — above floor. */
.comparisonTable.fsize_65em td,
.comparisonTable.fsize_65em th,
.comparisonTable.fsize_65em th.tophdr{
padding:4px 3px;
font-size:0.80rem !important;
}
}
/* =========================================================================
SECTION 23 — Content pages: CCPA.html / PrivacyPolicy.html /
InterestBasedAds.html / sitemap.html
Root cause (shared across all four pages): theme.css uses a CSS table
layout — .divTable(display:table) > .divTR(table-row) > .staticContentDiv
(table-cell). A table-cell expands to fit its content, so when a wide
compareTable or a set of floated form fields lives inside it, the cell
(and therefore the page) blows past the viewport on mobile.
Three distinct issues fixed here:
a) CSS table layout blown out by wide children (all four pages).
b) compareTable column min-width forces 384px+ on 360px viewport
(PrivacyPolicy, InterestBasedAds).
c) CCPA form: State selectContainer + Zip textInputDiv both float:left,
clashing with selectContainer overflow:hidden (same root cause as
createAccount popups).
d) Sitemap: three 30%-wide float:left columns with no tap-height on links.
========================================================================= */
@media only screen and (max-width:799px){
/* ── a) CSS table layout → block flow ──────────────────────────── */
/* Convert display:table/table-row/table-cell to plain block so
no child can force the container wider than the viewport. */
.divTable{
display:block !important;
width:100%;
box-sizing:border-box;
}
.divTR{
display:block !important;
width:100%;
}
.staticContentDiv{
display:block !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
}
/* ── b) compareTable inside content pages ───────────────────────── */
/* Section 13 (<=899px) already makes .compareTable display:block;
overflow-x:auto and sets min-width:8em on cells. Three cols x 8em
(128px) = 384px — wider than 360px viewport before any content.
Scope an override to .staticContentDiv context only: reduce to 4em
and add word-break so text/URLs wrap rather than expanding the table.
Specificity 0,2,1 beats Section 13 0,1,1 cleanly without !important. */
.staticContentDiv .compareTable td,
.staticContentDiv .compareTable th{
min-width:4em;
word-break:break-word;
overflow-wrap:break-word;
}
/* ── c) CCPA form: un-float field containers ─────────────────────── */
/* .textInputDiv is float:left in theme.css; un-float on mobile so
each field stacks full-width. Section 19 already handles
border/radius/44px/padding on inputs — only float + width added. */
.textInputDiv{
float:none !important;
display:block !important;
width:100% !important;
box-sizing:border-box;
line-height:1.5;
}
.textInputDiv label{
display:block;
margin-bottom:.25em;
}
/* Override inline style widths on every text/email/tel input in
the form (Full Name:14em, Address:15em, Zip:6em, etc.) */
.disclaimer_main form input[type="text"],
.disclaimer_main form input[type="email"],
.disclaimer_main form input[type="tel"]{
width:100% !important;
max-width:100%;
}
/* State label + selectContainer sit outside .textInputDiv — same fix.
The selectContainer also needs the overflow/height/position reset
from theme.css (.selectContainer: height:1.5em; overflow:hidden;
position:relative; top:6px) to stop it clipping the dropdown. */
label.floatLeft[data-group="State"]{
float:none !important;
display:block;
margin:.75em 0 .25em;
}
div.selectContainer.floatLeft[data-group="State"]{
float:none !important;
display:block !important;
width:100% !important;
height:auto !important; /* was 1.5em */
overflow:visible !important; /* was hidden */
position:static !important; /* was relative top:6px */
margin:.0 0 .75em !important; /* clear the inline margin-top:1px */
}
div.selectContainer.floatLeft[data-group="State"] select{
width:100% !important;
max-width:100%;
}
/* ── d) Sitemap: 30% float columns → full-width stacked ──────────── */
.disclaimer_main > div[style*="float:left"]{
float:none !important;
width:100% !important;
padding-right:0 !important;
box-sizing:border-box;
}
/* Tighten the
margins so links are compact but not crowded */
.disclaimer_main > div[style*="float:left"] p{
margin:.1em 0;
padding:0;
}
/* 44px tap targets: each sitemap link is in a
— use flex
so the anchor fills the line and vertically centers the text. */
.disclaimer_main > div[style*="float:left"] p a{
display:flex;
align-items:center;
min-height:44px;
padding:.2em 0;
box-sizing:border-box;
line-height:1.3;
}
/* Section headings get a blue underline to separate groups clearly */
.disclaimer_main > div[style*="float:left"] h3{
margin:1em 0 .35em;
padding:.4em 0;
border-bottom:2px solid #005dab;
}
/* First section heading needs no top margin */
.disclaimer_main > div[style*="float:left"]:first-child h3{
margin-top:0;
}
}
/* =========================================================================
SECTION 24 — Blog pages (Blog_*.html + Blog_Archives.html)
========================================================================= */
@media only screen and (max-width:799px){
/* ── blogContent: remove desktop positioning/sizing ──────────────── */
.blogContent{
position:static !important;
top:0 !important;
min-width:0 !important;
min-height:0 !important;
width:100%;
box-sizing:border-box;
z-index:auto;
}
/* ── blogHeaderBar: simple blue bar, no pseudo-element ───────────── */
.blogHeaderBar{
background:#0b5ea2 !important;
overflow:hidden;
}
.blogHeaderBar::before{
display:none !important;
}
/* The .content div inside blogHeaderBar has min-height:340px from
theme.css — this creates the large empty blue area after "Health News".
Collapse it to content height. */
.blogHeaderBar .content{
min-height:0 !important;
min-width:0 !important;
}
/* "Health News" watermark */
.blogTitle{
font-size:2rem;
line-height:1.6;
padding-left:.75rem;
display:block;
}
/* ── Main article column: NO horizontal padding ──────────────────── */
/* Padding is removed at the column level so the h1 and img can span
full column width without negative-margin arithmetic. Side padding
is restored on text content via direct-child selectors below. */
.blogLargeCol{
width:100% !important;
float:none !important;
font-size:1rem;
padding:0 0 .75em 0;
box-sizing:border-box;
margin:0;
}
.blogLargeCol .accordion{
width:92vw;
margin:4vw;
}
/* Full-width blue h1 title panel — no negative margins needed since
the column itself has no horizontal padding. */
.blogLargeCol > h1:first-child{
background-color:#0b5ea2;
padding:.6em .75rem;
margin:0 0 .5em;
width:100%;
box-sizing:border-box;
font-size:1.4rem !important;
line-height:1.3;
color:#fff;
}
.blogLargeCol > h1:first-child span{
font-size:.85em;
display:block;
font-weight:300;
margin-top:.25em;
}
/* Restore .75rem side padding to direct-child text content.
Uses > (direct-child) so blogLargeColHeader's children — which
already have their own padding — are not double-padded. */
.blogLargeCol > p,
.blogLargeCol > h2,
.blogLargeCol > h3,
.blogLargeCol > h4,
.blogLargeCol > ul,
.blogLargeCol > ol,
.blogLargeCol > blockquote,
.blogLargeCol > table{
padding-left:.75rem;
padding-right:.75rem;
box-sizing:border-box;
}
/* Images fill the full column width */
.blogLargeCol > img{
width:100%;
display:block;
padding-left:0 !important;
padding-right:0 !important;
}
/* .blogLargeColHeader wrapper (Blog_04_11_2022): un-clip titles.
Its own padding (.6em .75rem) already handles side spacing — the
> combinator above keeps its h1/h2 children from getting extra padding. */
.blogLargeColHeader{
height:auto !important;
overflow:visible !important;
padding:.6em .75rem;
box-sizing:border-box;
width:100%;
}
.blogLargeColHeader h1{
font-size:1.4rem !important;
line-height:1.3;
margin:.1em 0;
}
.blogLargeColHeader h2{
font-size:1rem !important;
margin:.2em 0 0;
}
/* Body text hierarchy */
.blogLargeCol p,
.blogLargeCol li{
font-size:1rem;
line-height:1.55;
}
.blogLargeCol h2{
font-size:1.25rem;
}
.blogLargeCol h3{
font-size:1.1rem;
}
/* ── Sidebar / archive column: full-width stacked ──────────────────── */
.blogSmallCol{
width:100% !important;
float:none !important;
margin:0 !important;
padding:.5em .75rem;
box-sizing:border-box;
font-size:1rem;
}
.blogSmallCol h2{
font-size:1.25rem;
padding-top:.75em;
}
.blogSmallCol h3{
font-size:1rem;
}
/* ── Tile cards: single-column, flex ─────────────────────────────── */
.recentBlogPost{
width:100% !important;
float:none !important;
margin-right:0 !important;
height:auto !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column;
margin-bottom:1.25em;
}
.recentBlogPost img{
width:100%;
height:auto;
display:block;
flex-shrink:0;
}
.recentBlogPost > br{
display:none;
}
.recentBlogPost h3{
font-size:1rem;
padding:.45em .7em .3em;
flex:1;
}
.recentBlogPost .redButton,
.recentBlogPost .blueButton{
position:static !important;
display:inline-block; /* was inline-flex - see the Save for Later note
near the top of this file for why; .redButton
has no display in its own theme.css base rule
(defaults to plain `inline`, which ignores
min-height), so this is restated explicitly
rather than left to fall back */
text-align:center;
float:none !important;
align-self:flex-end; /* .recentBlogPost is its OWN flex column
(display:flex!important above); this pins the
button to its bottom regardless of the
button's own display value, which only ever
governs ITS OWN children, not its position in
its parent's flex layout */
min-height:44px;
margin:.3em .5em .5em;
box-sizing:border-box;
}
/* ── Blog Archives blue hero: collapse .content min-height ────────── */
div[style*="height:292px"]{
height:auto !important;
padding:.75em 0;
}
div[style*="height:292px"] .content{
min-height:0 !important;
min-width:0 !important;
}
div[style*="height:292px"] h1{
font-size:1.75rem !important;
margin-top:0 !important;
margin-left:.75rem;
}
}
@media only screen and (max-width:389px){
.blogTitle{
font-size:1.6rem;
}
.blogLargeCol > h1:first-child,
.blogLargeColHeader h1{
font-size:1.2rem !important;
}
}
/* =========================================================================
SECTION 25 — LargeGroups_Case_Studies.html
Page reuses the shared .divTable > .divTR > .staticContentHdr /
.staticContentDiv template (see Section 20/23), plus a floated hero
photo and six .shoppingCartTable "Case Study" tables — five with a
, the sixth using a
row instead of a caption.
Every selector below is scoped to markup unique to this page (the hero
photo's src / inline offset, or .shoppingCartTable nested inside
.staticContentDiv) rather than to the bare shared classes, so nothing
here touches the Carrier pages (Section 20) or Content pages
(Section 23) that reuse the same .staticContentHdr/.staticContentDiv
template.
========================================================================= */
@media only screen and (max-width:799px){
/* ---- a) "Case Studies" H1: full width -------------------------------
Section 23 blockifies .divTable/.divTR/.staticContentDiv, but the H1
sits in its OWN .divTR, above (not inside) .staticContentDiv, and was
never included. Left at its default display:table-cell with no table/
table-row ancestor, it becomes an orphaned cell that shrinks to fit
"Case Studies" instead of filling the row — the blue bar rendered far
short of the panel's width. Same root cause, same fix, for each
"Case Study N" and Case Study 6's dark-blue header td. ---- */
.divTable:has(table.shoppingCartTable) .staticContentHdr{
display:block !important;
width:100% !important;
box-sizing:border-box;
}
.staticContentDiv .shoppingCartTable caption.tableTitle2{
display:block;
width:100%;
box-sizing:border-box;
}
.staticContentDiv .shoppingCartTable td.QLEdarkBlueHdrBlock{
display:block;
width:100% !important;
box-sizing:border-box;
}
/* ---- b) Hero photo: re-bleed to the mobile panel corner -------------
The wrapping div is inline-styled float:right; position:relative;
top:-2.03em; right:-2.03em — offsets sized for the desktop 2em
.staticContentDiv padding so the photo bleeds flush to the panel's
border. Section 20 shrinks that padding to 1em .7em on mobile, and
the photo's fixed 348px width is wider than the padded content
column, so the same desktop offset instead pushes the photo past the
container's right edge. Re-bleed using the new mobile padding values
and cap the photo to the available column width. ---- */
.staticContentDiv div[style*="float:right"][style*="-2.03em"]{
top:0 !important;
right:0 !important;
margin:-1em -.7em 0 0 !important;
}
.staticContentDiv div[style*="float:right"][style*="-2.03em"] img{
width:100%;
height:auto;
display:block;
}
/* ---- c) Case Study tables: two labeled cards instead of a merged
two-column table -----------------------------------------------------
Neutralize the generic tr-card rule (Section 9) for this page's
tables — bare .shoppingCartTable tr borders/pads the WHOLE row,
which is what merged "Services Employed"/"Results" (two shrink-
wrapped boxes, from | — Section 9 only styles | )
and the bullets + italic summary (no labels at all) into one box,
and padded the View Details | |
itself (see (d) below). ---- */
/* !important throughout: Section 17's bare .shoppingCartTable tr rule
(display:grid, 2-column) is higher specificity than a plain class
selector here, and it only "accidentally" stacks below its own
640px tier — between 640-799px it would render our two cards
side-by-side as a 2-column grid instead. !important guarantees a
single stacked column across the full 360-799px mobile range. */
.staticContentDiv .shoppingCartTable tr{
display:block !important;
border:0 !important;
border-radius:0 !important;
margin:0 !important;
padding:0 !important;
background:none !important;
}
/* Hide the original column-heading rows — the | version (Case
Studies 1-5) and the |
version (Case Study 6). Their labels are re-added via ::before on
the data cells below instead, so each label stays attached to its
own content in a single card. */
.staticContentDiv .shoppingCartTable tr:has(th.tableSubTitle),
.staticContentDiv .shoppingCartTable tr:has(td.planDetailTableHdrLightBlue){
display:none !important;
}
/* Each data cell becomes its own card: label on top, content below,
one border wrapping both. */
.staticContentDiv .shoppingCartTable td.Grey555,
.staticContentDiv .shoppingCartTable td.black{
display:block;
width:100% !important;
box-sizing:border-box;
border:1px solid #ddd;
border-radius:8px;
margin:0 0 .7em;
padding:.7em .85em;
background:#fff;
}
.staticContentDiv .shoppingCartTable td.Grey555::before,
.staticContentDiv .shoppingCartTable td.black::before{
display:block;
font-size:.85em;
font-weight:700;
color:#005DAB;
text-transform:uppercase;
letter-spacing:.02em;
margin-bottom:.4em;
}
.staticContentDiv .shoppingCartTable td.Grey555::before{ content:"Services Employed"; }
.staticContentDiv .shoppingCartTable td.black::before{ content:"Results"; }
/* ---- d) View Details row: padding on the | , not the |
, which
inset the grey bgcolor short of the row's true edges on top of
the td's own padding — a double-padding gap. ---- */
.staticContentDiv .shoppingCartTable td[bgcolor]{
display:block;
width:100% !important;
box-sizing:border-box;
padding:.7em .85em;
margin:0 0 1.4em;
text-align:right !important;
}
/* 44px ADA tap target for the link itself, not just its text line */
.staticContentDiv .shoppingCartTable td[bgcolor] a{
display:inline-flex;
align-items:center;
min-height:44px;
}
}
/* =========================================================================
SECTION 26 — Individuals_Resources_Glossary.html
Page reuses the shared .divTable > .divTR > .staticContentHdr /
.staticContentDiv template (see Section 20/23/25), plus the same
.glossy_top / .glossy_hed A-Z jump-nav classes Section 20 already
flex-wraps for SmallGroups_Carriers.html. Here, though, the 26
.glossy_hed letter cells sit inside an EXTRA nested
between .glossy_top and the cells
themselves. Section 20's .glossy_top{display:flex} only lays out its
DIRECT child (that nested divTable) as a single flex item; Section 23's
global .divTable{display:block!important} then blockifies that nested
divTable, so each individually-flexed .glossy_hed (still matched by
Section 20's descendant selector) renders as its own full-width flex
row instead of wrapping into a grid — the tall stacked blue bars.
All selectors below are scoped via .glossy_cnt (unique to this page's
glossary-entry markup) so nothing here touches SmallGroups_Carriers.html,
which reuses .glossy_top/.glossy_hed without the extra nested divTable.
========================================================================= */
@media only screen and (max-width:799px){
/* ---- a) "Glossary" header: full width -------------------------------
Same orphaned-table-cell fix as Section 25 - this page marks the
title up as a , not an , but it's the same .staticContentHdr
class sitting in its own .divTR above .staticContentDiv, and gets
left as a shrink-wrapped table-cell the same way. ---- */
.staticContentHdr{
display:block !important;
width:100% !important;
box-sizing:border-box;
}
/* ---- b) A-Z jump nav: condensed, tappable grid ----------------------
Reworked per request: plain black letters, no background fill, laid
out in a compact wrapped grid instead of the old blue
table-row/table-cell bar. The nested divTable (the actual direct
parent of the 26 .glossy_hed cells) becomes the grid container;
Section 20's .glossy_top flex/background treatment is superseded
here since it never reached the actual cells on this page anyway. */
.glossy_top{
display:block !important;
background:none !important;
width:100%;
}
.divTable:has(.glossy_top) .glossy_top .divTable{
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(44px,1fr));
gap:.5em;
width:100%;
box-sizing:border-box;
padding:.5em 0 1em;
}
.glossy_top .glossy_hed{
display:block !important;
width:auto;
height:auto;
min-width:0;
min-height:44px;
padding:0;
background:none !important;
}
.glossy_top .glossy_hed a{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-height:44px;
box-sizing:border-box;
border:1px solid #ccc;
border-radius:6px;
color:#000 !important;
font-size:1.1rem;
font-weight:700;
text-decoration:none;
}
}
|