and override only the
accent tokens under .cp-YOURPAGE (see .cp-2gig at the bottom). Give a page
its OWN css file only if it grows large/unique — otherwise it lives here.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
/* ---- tokens: inherit from Varsity, fall back to its literal values --------- */
#peContentPage .cp{
--cp-brand: var(--vty-brand,#0d3b66);
--cp-brand-dark: var(--vty-brand-dark,#07294d);
--cp-ink: var(--vty-ink,#181818);
--cp-soft: var(--vty-soft,#5a5f66);
--cp-line: var(--vty-line,#e4e6e9);
--cp-field: var(--vty-field,#f1f2f4);
--cp-field-line: var(--vty-field-line,#c9ced4);
--cp-sale: var(--vty-sale,#c40b0b);
--cp-save: var(--vty-save,#0a7d36);
--cp-shadow: var(--vty-shadow,0 14px 30px rgba(13,28,48,.14));
--cp-hsans: var(--vty-hsans,'Archivo','Trebuchet MS',Arial,sans-serif);
--cp-bsans: var(--vty-bsans,'Inter','Segoe UI',Arial,sans-serif);
/* accent defaults to the DWG brand; per-page modifiers override these two */
--cp-accent: var(--cp-brand);
--cp-accent-dark: var(--cp-brand-dark);
--cp-accent-2: var(--cp-brand);
--cp-maxw:1120px;
font-family:var(--cp-bsans);
color:var(--cp-ink);
line-height:1.6;
}
/* ---- wall the block off from legacy #peContentPage element rules ---- */
#peContentPage .cp div{padding:0;margin:0;}
#peContentPage .cp p{margin:0;padding:0;text-align:left;color:inherit;font-family:var(--cp-bsans);font-size:inherit;line-height:1.6;}
#peContentPage .cp ul,#peContentPage .cp ol{margin:0;padding:0;list-style:none;}
#peContentPage .cp li{padding:0;text-align:left;font-family:var(--cp-bsans);font-size:inherit;}
#peContentPage .cp h1,#peContentPage .cp h2,#peContentPage .cp h3{background:none !important;border:0 !important;display:block;text-transform:none;padding:0;margin:0;}
#peContentPage .cp .cp-benefits li{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;}
#peContentPage .cp .cp-benefits li > span:last-child{flex:1;display:block;text-align:left;}
#peContentPage .cp *{box-sizing:border-box;}
#peContentPage .cp img{max-width:100%;display:block;border:0;}
/* center the whole block inside #peContentPage (defeats legacy left-align / float / flex) */
#peContentPage .cp{
max-width:1500px;
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
width:100%;
align-self:center; /* if #peContentPage is a flex container */
}
/* if #peContentPage lays children out with flex, center them on the main axis */
#peContentPage:has(> .cp){justify-content:center;}
#peContentPage .cp .cp-wrap,
#peContentPage .cp .cp-hero-frame{
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
}
/* neutralize an inherited text-align:left on centered text blocks only */
#peContentPage .cp .cp-sec-title,
#peContentPage .cp .cp-sec-lead,
#peContentPage .cp .cp-ql-title,
#peContentPage .cp .cp-cta{text-align:center;}
/* defeat pcStorefront's #peContentPage link colors inside our block */
#peContentPage .cp a,#peContentPage .cp a:link,#peContentPage .cp a:visited{color:inherit;text-decoration:none;}
#peContentPage .cp a:hover{text-decoration:none;}
/* ---- layout + type -------------------------------------------------------- */
#peContentPage .cp .cp-wrap{max-width:var(--cp-maxw);margin:0 auto;padding:0 20px;}
#peContentPage .cp h1, #peContentPage .cp h2, #peContentPage .cp h3{font-family:var(--cp-hsans);font-weight:800;line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--cp-ink);}
#peContentPage .cp p{margin:0;}
#peContentPage .cp .cp-section{padding:46px 0;}
#peContentPage .cp .cp-band{background:var(--cp-field);border-top:1px solid var(--cp-line);border-bottom:1px solid var(--cp-line);}
/* ---- buttons (mirror .btn-primary-store / .btn-secondary-store) ------------ */
#peContentPage .cp .cp-btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font-family:var(--cp-hsans);font-weight:800;font-size:15px;
padding:13px 26px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
transition:background .15s,color .15s,border-color .15s,transform .12s;
}
#peContentPage .cp .cp-btn:hover{transform:translateY(-1px);}
#peContentPage .cp .cp-btn:focus-visible{outline:3px solid var(--cp-accent);outline-offset:2px;}
#peContentPage .cp .cp-btn-accent{background:var(--cp-accent);color:#fff;}
#peContentPage .cp .cp-btn-accent:hover{background:var(--cp-accent-dark);color:#fff;}
#peContentPage .cp .cp-btn-brand{background:var(--cp-accent-2);color:#fff;}
#peContentPage .cp .cp-btn-brand:hover{filter:brightness(.92);color:#fff;}
#peContentPage .cp .cp-btn-out{background:#fff;color:var(--cp-accent-2);border-color:var(--cp-field-line);}
#peContentPage .cp .cp-btn-out:hover{border-color:var(--cp-accent-2);}
#peContentPage .cp .cp-btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
/* ---- hero ----------------------------------------------------------------- */
#peContentPage .cp .cp-hero{padding-top:8px;}
#peContentPage .cp .cp-hero-frame{max-width:none;margin:0 auto;padding:0;}
#peContentPage .cp .cp-hero-img{width:100%;height:auto;display:block;border-radius:10px;}
/* ---- intro + benefits ----------------------------------------------------- */
#peContentPage .cp .cp-kicker{color:var(--cp-accent);font-family:var(--cp-hsans);font-weight:800;font-size:clamp(22px,3vw,28px);margin-bottom:6px;}
#peContentPage .cp .cp-sub{font-size:17px;color:var(--cp-ink);margin-bottom:22px;}
#peContentPage .cp .cp-benefits{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px;}
#peContentPage .cp .cp-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:16px;}
#peContentPage .cp .cp-ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--cp-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:2px;}
#peContentPage .cp .cp-benefits b{color:var(--cp-accent-2);}
#peContentPage .cp .cp-subres{margin:8px 0 0 0;padding:0;list-style:none;display:grid;gap:8px;}
#peContentPage .cp .cp-subres li{font-size:15px;color:var(--cp-soft);}
#peContentPage .cp .cp-subres a{font-weight:600;color:var(--cp-accent);}
#peContentPage .cp .cp-subres a:hover{text-decoration:underline;}
/* tier chips */
#peContentPage .cp .cp-tiers{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px 0;}
#peContentPage .cp .cp-tier{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--cp-line);background:#fff;color:var(--cp-ink);display:inline-flex;align-items:center;gap:7px;}
#peContentPage .cp .cp-tier i{width:9px;height:9px;border-radius:50%;display:inline-block;}
#peContentPage .cp .cp-tier.t1 i{background:#8a94a3;} .cp .cp-tier.t2 i{background:#c0813f;}
#peContentPage .cp .cp-tier.t3 i{background:#c6cdd8;} .cp .cp-tier.t4 i{background:#e7be55;}
#peContentPage .cp .cp-tier.t5 i{background:#cfd8e6;} .cp .cp-tier.t6{border-color:var(--cp-accent);color:var(--cp-accent);} .cp .cp-tier.t6 i{background:var(--cp-accent);}
/* ---- centered section head ------------------------------------------------ */
#peContentPage .cp .cp-sec-title{text-align:center;color:var(--cp-accent-2);font-family:var(--cp-hsans);font-weight:800;font-size:clamp(22px,3vw,30px);margin-bottom:8px;}
#peContentPage .cp .cp-sec-lead{text-align:center;color:var(--cp-ink);font-size:16px;max-width:52ch;margin:0 auto 26px;}
/* ---- promo pair ----------------------------------------------------------- */
#peContentPage .cp .cp-promo-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
#peContentPage .cp .cp-promo-card{background:#fff;border:1px solid var(--cp-line);border-radius:12px;padding:16px;text-align:center;box-shadow:0 6px 22px -16px rgba(0,0,0,.35);}
#peContentPage .cp .cp-promo-card .cp-btn{width:100%;}
#peContentPage .cp .cp-fineprint{text-align:center;color:var(--cp-soft);font-size:12.5px;max-width:60ch;margin:22px auto 0;line-height:1.55;}
#peContentPage .cp .cp-fineprint b{color:var(--cp-ink);}
/* ---- showcase + quick links ---------------------------------------------- */
#peContentPage .cp .cp-showcase{display:grid;gap:18px;}
#peContentPage .cp .cp-quicklinks{margin-top:24px;}
#peContentPage .cp .cp-ql-title{text-align:center;font-family:var(--cp-hsans);font-weight:700;color:var(--cp-ink);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
#peContentPage .cp .cp-ql-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
#peContentPage .cp .cp-ql{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:1px solid var(--cp-line);border-radius:10px;padding:16px 10px;background:#fff;color:var(--cp-accent-2);font-family:var(--cp-hsans);font-weight:700;font-size:13px;transition:border-color .15s,box-shadow .15s,transform .12s;}
#peContentPage .cp .cp-ql:hover{border-color:var(--cp-accent);box-shadow:0 8px 22px -16px rgba(0,0,0,.4);transform:translateY(-2px);}
#peContentPage .cp .cp-ql .cp-qic{color:var(--cp-accent);}
/* image placeholder (until official assets are dropped in) */
#peContentPage .cp .cp-imgph{position:relative;border:1px dashed var(--cp-accent);border-radius:10px;background:repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 12px,rgba(0,0,0,.015) 12px 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--cp-accent);text-align:center;padding:24px 16px;min-height:150px;}
#peContentPage .cp .cp-imgph .cp-ph-ico{width:34px;height:34px;opacity:.8;}
#peContentPage .cp .cp-imgph .cp-ph-lab{font-family:var(--cp-hsans);font-weight:700;font-size:13px;color:var(--cp-accent-2);}
#peContentPage .cp .cp-imgph .cp-ph-hint{font-size:11px;color:var(--cp-soft);max-width:26ch;}
#peContentPage .cp .cp-showcase .cp-imgph{min-height:210px;}
/* ---- CTA band ------------------------------------------------------------- */
#peContentPage .cp .cp-cta{background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2));color:#fff;text-align:center;}
#peContentPage .cp .cp-cta h2{color:#fff;font-size:clamp(24px,3.4vw,32px);margin-bottom:10px;}
#peContentPage .cp .cp-cta p{color:rgba(255,255,255,.9);font-size:16px;max-width:54ch;margin:0 auto 24px;}
#peContentPage .cp .cp-cta .cp-btnrow{justify-content:center;}
#peContentPage .cp .cp-cta .cp-btn-white{background:#fff;color:var(--cp-accent-2);}
#peContentPage .cp .cp-cta .cp-btn-white:hover{background:#eef4f8;color:var(--cp-accent-2);}
#peContentPage .cp .cp-cta .cp-btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
#peContentPage .cp .cp-cta .cp-btn-line:hover{background:rgba(255,255,255,.14);color:#fff;}
/* ---- responsive: match the storefront's real BS3 breakpoints -------------- */
@media (max-width:991px){
#peContentPage .cp .cp-section{padding:38px 0;}
#peContentPage .cp .cp-promo-pair{grid-template-columns:1fr;}
#peContentPage .cp .cp-ql-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
#peContentPage .cp .cp-wrap, #peContentPage .cp .cp-hero-frame{padding:0 16px;}
#peContentPage .cp .cp-btnrow .cp-btn{flex:1 1 100%;}
}
@media (max-width:600px){
#peContentPage .cp .cp-section{padding:30px 0;}
#peContentPage .cp .cp-tiers{margin-left:0;}
#peContentPage .cp .cp-subres{margin-left:26px;}
}
@media (prefers-reduced-motion:reduce){
#peContentPage .cp .cp-btn, #peContentPage .cp .cp-ql{transition:none;}
}
/* ============================================================================
PER-PAGE MODIFIER — 2GIG Dealer Loyalty landing
Keeps the store's structure/fonts/breakpoints; overrides only the accent to
mirror the 2GIG email (teal + Nice blue). Chrome (header/footer) stays navy.
============================================================================ */
#peContentPage .cp-2gig{
--cp-accent:#007fa3; /* 2GIG teal */
--cp-accent-dark:#00647f;
--cp-accent-2:#004a93; /* Nice blue */
}
/* ---- layout hardening: beat legacy #peContentPage rules & lock font ---- */
#peContentPage .cp,
#peContentPage .cp p,
#peContentPage .cp li,
#peContentPage .cp span,
#peContentPage .cp a,
#peContentPage .cp b{font-family:var(--cp-bsans) !important;}
/* benefit rows: text block sits in normal flow; chips/sub-lists go BELOW, left-aligned */
#peContentPage .cp .cp-benefits li{align-items:flex-start;}
#peContentPage .cp .cp-benefits li > span:last-child{display:block;width:100%;}
#peContentPage .cp .cp-tiers{margin:12px 0 4px 0 !important;justify-content:flex-start;}
#peContentPage .cp .cp-subres{margin:8px 0 0 0 !important;}
#peContentPage .cp .cp-subres li{margin:0 !important;}
/* ============================================================
AUTHORITATIVE benefit-row layout (last = wins).
Block layout with an absolutely-positioned check, so the
bold + trailing text always flow as one wrapping line and
can never be flex-split to opposite edges.
============================================================ */
#peContentPage .cp .cp-benefits{list-style:none;margin:0 0 26px 0;padding:0;display:block;}
#peContentPage .cp .cp-benefits li{
display:block;position:relative;margin:0 0 14px 0;padding:0 0 0 34px;
font-size:16px;line-height:1.6;text-align:left;font-family:var(--cp-bsans);
}
#peContentPage .cp .cp-benefits li > .cp-ck{
position:absolute;left:0;top:3px;width:22px;height:22px;margin:0;
}
#peContentPage .cp .cp-benefits li > span:last-child{display:block;width:auto;text-align:left;}
#peContentPage .cp .cp-tiers{margin:12px 0 4px 0;justify-content:flex-start;}
#peContentPage .cp .cp-subres{margin:8px 0 0 0;padding:0;list-style:none;}
/* store chrome block-ifies inline tags inside #peContentPage; force them inline
so bold text flows within its sentence instead of stacking on its own line.
(Component links like .cp-btn/.cp-ql keep their own higher-specificity display.) */
#peContentPage .cp b,#peContentPage .cp strong,#peContentPage .cp i,
#peContentPage .cp em,#peContentPage .cp u,#peContentPage .cp a,
#peContentPage .cp .cp-benefits li > span:last-child *{display:inline !important;float:none !important;}
/* the benefit text wrapper stays block, normal whitespace, so bold flows inline */
#peContentPage .cp .cp-benefits li{float:none !important;width:auto !important;display:block !important;}
#peContentPage .cp .cp-benefits li > span:last-child{display:block !important;float:none !important;width:100% !important;white-space:normal !important;text-align:left !important;}
/* ---- promo card: force clean vertical stack (image over button, no overlap) ---- */
#peContentPage .cp .cp-promo-card{display:flex !important;flex-direction:column !important;gap:14px;align-items:stretch;}
#peContentPage .cp .cp-promo-card .cp-imgph{position:relative;float:none !important;width:auto !important;margin:0 !important;}
#peContentPage .cp .cp-promo-card .cp-btn{position:static !important;float:none !important;margin:0 !important;align-self:stretch;}
#peContentPage .cp .cp-promo-pair{align-items:start;}
/* benefit emphasis uses a span (store block-ifies
, not spans) */
#peContentPage .cp .cp-benefits .cp-em{display:inline !important;float:none !important;font-weight:700;color:var(--cp-ink);}
/* ============================================================
Reclaim page width for content landing pages.
pe-pcHeaderFooter11.css sets:
#PageContentContainer{width:1200px} (outer, centered)
#pcMainArea-CENTER{margin:12px 192px;padding:8px;border:1px solid #e1e1e1}
The 192px side margins choke content to ~800px. When a .cp block
is present, let it use the full 1200px column and drop the box.
============================================================ */
#pcMainArea-CENTER:has(.cp){
margin:12px 0 !important;
padding:0 !important;
border:0 !important;
}
/* block width is governed by the max-width:1500px rule near the top */
/* ---- real product/promo imagery (replaces dashed placeholders) ---- */
#peContentPage .cp .cp-promo-img{display:block;width:100%;height:auto;border-radius:10px;}
#peContentPage .cp .cp-promo-card .cp-btn{margin-top:auto !important;} /* align buttons at card bottom */
#peContentPage .cp .cp-showcase{display:flex !important;flex-direction:column;gap:18px;align-items:center;}
#peContentPage .cp .cp-showimg{display:block;width:100%;max-width:1160px;height:auto;margin:0 auto;border-radius:10px;}
/* ---- promo images: uniform box, fill edge-to-edge so both cards match ---- */
#peContentPage .cp .cp-promo-img{
width:100% !important;height:200px !important;object-fit:cover !important;
object-position:center;border-radius:10px;display:block;
}
/* single showcase banner (GC Touch) centered, not stretched */
#peContentPage .cp .cp-showimg{max-width:1100px;}
/* ============================================================
"Why Switch to GC Touch" section
============================================================ */
#peContentPage .cp .cp-accent-txt{color:var(--cp-accent);}
#peContentPage .cp .cp-award-row{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px 0;
}
#peContentPage .cp .cp-award{
display:inline-block;font-family:var(--cp-hsans);font-weight:700;font-size:12px;
letter-spacing:.02em;color:var(--cp-accent-2);background:#fff;
border:1px solid var(--cp-line);border-radius:999px;padding:7px 14px;text-align:center;
}
#peContentPage .cp .cp-feature-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 28px 0;
}
#peContentPage .cp .cp-feature{
background:#fff;border:1px solid var(--cp-line);border-radius:12px;
padding:20px 22px;box-shadow:0 6px 22px -16px rgba(0,0,0,.35);text-align:left;
}
#peContentPage .cp .cp-feature-title{
font-family:var(--cp-hsans);font-weight:800;font-size:17px;color:var(--cp-accent-2);
margin:0 0 10px 0;
}
#peContentPage .cp .cp-feature-list{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
#peContentPage .cp .cp-feature-list li{
position:relative;padding-left:18px;font-size:15px;line-height:1.5;color:var(--cp-ink);text-align:left;
}
#peContentPage .cp .cp-feature-list li::before{
content:"▸";position:absolute;left:0;top:0;color:var(--cp-accent);font-size:12px;line-height:1.55;
}
@media (max-width:600px){
#peContentPage .cp .cp-feature-grid{grid-template-columns:1fr;}
}
/* ============================================================================
PER-PAGE MODIFIER — Alarm.com pages
Wrapper: (Partner Program, idpage 10433)
(Alarm+2GIG+DWG Success, 10427)
Same pattern as .cp-2gig above: overrides only the accent tokens. Accent =
Alarm.com blue; accent-2 stays DWG navy so titles + the CTA gradient read as
a DWG co-brand. Chrome stays navy.
============================================================================ */
#peContentPage .cp-alarm{
--cp-accent:#0093d0; /* Alarm.com blue */
--cp-accent-dark:#0072a8;
--cp-accent-2:#0d3b66; /* DWG navy */
}
/* optional 3-across feature grid (the Success page's three brand pillars);
own mobile stack so source order can't break it */
#peContentPage .cp-trio .cp-feature-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:767px){
#peContentPage .cp-trio .cp-feature-grid{grid-template-columns:1fr;}
}
/* ============================================================================
PER-PAGE MODIFIER — Vivotek Channel Partner (idpage 8351, wrapper .cp-vivotek)
Accent = Vivotek red; accent-2 = DWG navy.
============================================================================ */
#peContentPage .cp-vivotek{
--cp-accent:#e2231a; /* Vivotek red */
--cp-accent-dark:#b81b13;
--cp-accent-2:#0d3b66; /* DWG navy */
}
/* ============================================================================
PER-PAGE MODIFIER — Xsponse Dealer (idpage 10506, wrapper .cp-xsponse)
Accent = safety orange; accent-2 = DWG navy. (One-line swap if Xsponse has
an official brand hex.) Uses .cp-trio for the 3-across "why" pillars.
============================================================================ */
#peContentPage .cp-xsponse{
--cp-accent:#e8590c; /* safety orange */
--cp-accent-dark:#c2410c;
--cp-accent-2:#0d3b66; /* DWG navy */
}
/* ============================================================================
PER-PAGE MODIFIER — Digital Watchdog Channel Partner (idpage 10432, .cp-dw)
Accent = DW red; accent-2 = DWG navy.
============================================================================ */
#peContentPage .cp-dw{
--cp-accent:#c8102e; /* Digital Watchdog red */
--cp-accent-dark:#a00d24;
--cp-accent-2:#0d3b66; /* DWG navy */
}
/* ============================================================================
PER-PAGE MODIFIER — Uniview Dealer Partner (idpage 10436, .cp-uniview)
Accent = Uniview green; accent-2 = DWG navy.
============================================================================ */
#peContentPage .cp-uniview{
--cp-accent:#4f9d2a; /* Uniview green (adjust to exact UNV hex) */
--cp-accent-dark:#3d7d20;
--cp-accent-2:#0d3b66; /* DWG navy */
}
/* ----------------------------------------------------------------------------
COMPARISON TABLE component (.cp-table) — reusable tier / spec grid.
Wrap in .cp-table-wrap for horizontal scroll on small screens.
First column is a sticky
(attribute names). Use .cp-yes / .cp-no
for check / dash cells.
---------------------------------------------------------------------------- */
#peContentPage .cp .cp-table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
margin:22px 0 4px;border:1px solid var(--cp-line);border-radius:14px;
box-shadow:var(--cp-shadow);
}
#peContentPage .cp .cp-table{
border-collapse:collapse;width:100%;min-width:780px;
color:var(--cp-ink);font-family:var(--cp-bsans);font-size:14px;
}
#peContentPage .cp .cp-table th,
#peContentPage .cp .cp-table td{
padding:11px 14px;text-align:center;border-bottom:1px solid var(--cp-line);
vertical-align:middle;line-height:1.4;
}
#peContentPage .cp .cp-table thead th{
background:var(--cp-accent);color:#fff;font-family:var(--cp-hsans);
font-weight:800;font-size:14px;border-bottom:none;white-space:nowrap;
}
#peContentPage .cp .cp-table thead th:first-child{
background:var(--cp-accent-2);text-align:left;
}
#peContentPage .cp .cp-table tbody th{
text-align:left;font-weight:700;color:var(--cp-accent-2);
background:var(--cp-field);position:sticky;left:0;z-index:1;
min-width:190px;font-family:var(--cp-bsans);
}
#peContentPage .cp .cp-table tbody tr:nth-child(even) td{background:#fbfcfa;}
#peContentPage .cp .cp-table tbody tr:last-child td,
#peContentPage .cp .cp-table tbody tr:last-child th{border-bottom:none;}
#peContentPage .cp .cp-table .cp-yes{color:var(--cp-accent-dark);font-weight:800;}
#peContentPage .cp .cp-table .cp-no{color:#c4cbd2;font-weight:700;}
#peContentPage .cp .cp-table-hint{
font-size:12.5px;color:var(--cp-soft);margin:8px 2px 0;text-align:center;
}
@media (max-width:600px){
#peContentPage .cp .cp-table{font-size:13px;}
#peContentPage .cp .cp-table th,
#peContentPage .cp .cp-table td{padding:9px 10px;}
#peContentPage .cp .cp-table tbody th{min-width:150px;}
}
|