/* ============================================================ OE GCI Top 100 Rankings — block styles Rebuilt from the Global Cities Index 2026 microsite (styles.css §11 "Results 02 — Top 100 table" + §13 "Compare tray & modal", plus the button primitives from §04). Everything is prefixed oe-block-gci-rankings__* and the microsite design tokens are inlined onto the block root (scoped custom properties), so the block is fully self-contained and never inherits or leaks site variables. Fonts are intentionally NOT set — they inherit from the site. NOTE: view.js portals the .oe-block-gci-rankings__modal AND the .oe-block-gci-rankings__tray (docked compare bar) out to so their position:fixed layout works regardless of any transformed ancestor. Because each is then no longer a descendant of the block root, the tokens are declared on ALL THREE roots below, and their rules are scoped under their own class rather than the block. ============================================================ */ .oe-block-gci-rankings, .oe-block-gci-rankings__modal, .oe-block-gci-rankings__tray{ /* --- brand --- */ --oe-heritage-blue:#003466; --oe-sky-blue:#008AC8; --oe-sky-blue-60:#66BDE0; --oe-sky-blue-30:#B2DEF0; /* --- category colours (score bars + radar swatches) --- */ --oe-block-gci-rankings-cat-overall:#003466; --oe-block-gci-rankings-cat-economics:#008AC8; --oe-block-gci-rankings-cat-human:#B3107A; --oe-block-gci-rankings-cat-qol:#B38D2F; --oe-block-gci-rankings-cat-environment:#8BA612; --oe-block-gci-rankings-cat-governance:#30B5AE; /* --- surfaces / lines --- */ --bg-subtle:#F5F8FA; --bg-tint:#EDF5FB; --line:rgba(0,52,102,0.10); --line-strong:rgba(0,52,102,0.18); /* --- text --- */ --text-heading:#003466; --text-body:#455055; --text-muted:#7C8891; /* --- elevation --- */ --shadow-xs:0 1px 2px rgba(9,25,57,0.05); --shadow-sm:0 2px 8px rgba(9,25,57,0.06); --shadow-md:0 10px 28px rgba(9,25,57,0.09); --shadow-lg:0 22px 54px rgba(9,25,57,0.13); --shadow-focus:0 0 0 3px rgba(0,138,200,0.30); /* --- radii --- */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* --- spacing --- */ --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-9:48px; /* --- type sizes --- */ --fs-2xs:0.7rem; --fs-xs:0.775rem; --fs-sm:0.85rem; --fs-base:0.925rem; /* --- motion --- */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,.84,.44,1); --dur-fast:140ms; --dur:240ms; --dur-slow:420ms; } .oe-block-gci-rankings *, .oe-block-gci-rankings__modal *, .oe-block-gci-rankings__tray *{ box-sizing:border-box; } .oe-block-gci-rankings__sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ============================================================ Panel + toolbar ============================================================ */ .oe-block-gci-rankings__panel{ background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow-sm); overflow:hidden; } .oe-block-gci-rankings__toolbar{ display:flex;flex-wrap:wrap;gap:var(--sp-4); align-items:center;justify-content:space-between; padding:var(--sp-5); border-bottom:1px solid var(--line); background:#fff; } .oe-block-gci-rankings__field{ position:relative;display:flex;align-items:center;flex:1 1 240px;max-width:330px; } .oe-block-gci-rankings__field .oe-block-gci-rankings__icon{ position:absolute;left:14px;width:16px;height:16px;z-index:1; color:var(--text-muted);pointer-events:none; } /* element+class specificity so a theme's own input padding can't override the left inset and let the placeholder slide under the search icon. */ .oe-block-gci-rankings__field input.oe-block-gci-rankings__search{ /* 12/10 top/bottom padding optically centres the placeholder in Poppins, whose glyphs sit high under line-height:normal. */ width:100%;padding:12px var(--sp-4) 10px 42px; border:1px solid var(--line-strong);border-radius:var(--oe-border-radius-base,8px); background:#fff;color:var(--text-body);font-size:var(--fs-sm);font-family:inherit; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .oe-block-gci-rankings__search::placeholder{color:var(--text-muted);} .oe-block-gci-rankings__search:hover{border-color:var(--oe-sky-blue-60);} .oe-block-gci-rankings__search:focus{outline:none;border-color:var(--oe-sky-blue);box-shadow:var(--shadow-focus);} .oe-block-gci-rankings__pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);} .oe-block-gci-rankings__pill{ display:inline-flex;align-items:center;gap:var(--sp-2); padding:9px var(--sp-4); border:1px solid var(--line-strong);border-radius:var(--oe-border-radius-base,8px); background:#fff;color:var(--text-body);font-family:inherit; font-size:var(--fs-xs);font-weight:500;cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease), border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .oe-block-gci-rankings__pill:hover{border-color:var(--oe-sky-blue);color:var(--oe-sky-blue);background:var(--bg-tint);} .oe-block-gci-rankings__pill[aria-pressed="true"]{ background:var(--oe-heritage-blue);border-color:var(--oe-heritage-blue);color:#fff; box-shadow:var(--shadow-xs); } /* ============================================================ Table ============================================================ */ .oe-block-gci-rankings__table-scroll{ overflow:auto; max-height:clamp(340px,calc(100vh - 270px),560px); overscroll-behavior:contain; } .oe-block-gci-rankings__table{ /* min-width:0 lets the table shrink to its own min-content (~760px with the condensed columns below) instead of a hard 900px floor, so a desktop window needs no horizontal scrollbar down to ~900px wide. Below that, the table's min-content still forces a horizontal scroll (columns stay readable). */ width:100%;border-collapse:separate;border-spacing:0;min-width:0;font-size:var(--fs-sm); } .oe-block-gci-rankings__th{ position:sticky;top:0;z-index:3; padding:10px 6px; text-align:left;vertical-align:bottom;user-select:none;cursor:pointer; background:var(--oe-heritage-blue);color:#fff; font-size:0.6rem;font-weight:600;letter-spacing:0;text-transform:uppercase;line-height:1.25; transition:background var(--dur-fast) var(--ease); } .oe-block-gci-rankings__th:hover{background:#00447F;} .oe-block-gci-rankings__th--compare{cursor:default;text-align:center;} .oe-block-gci-rankings__th--compare:hover{background:var(--oe-heritage-blue);} .oe-block-gci-rankings__th-arrow{margin-left:2px;opacity:.45;font-size:0.5rem;} .oe-block-gci-rankings__th[aria-sort] .oe-block-gci-rankings__th-arrow{opacity:1;color:var(--oe-sky-blue-60);} .oe-block-gci-rankings__th:focus-visible{outline:2px solid var(--oe-sky-blue-60);outline-offset:-3px;} .oe-block-gci-rankings__table tbody tr{ cursor:pointer; transition:background var(--dur-fast) var(--ease); } .oe-block-gci-rankings__table tbody td{ padding:10px 6px; border-bottom:1px solid var(--line); color:var(--text-body);white-space:nowrap;vertical-align:middle; } .oe-block-gci-rankings__th:first-child, .oe-block-gci-rankings__table tbody td:first-child{padding-left:12px;} .oe-block-gci-rankings__th:last-child, .oe-block-gci-rankings__table tbody td:last-child{padding-right:12px;} .oe-block-gci-rankings__table tbody tr:hover td{background:var(--bg-tint);} .oe-block-gci-rankings__table tbody tr.is-selected td{background:var(--oe-sky-blue-30);} .oe-block-gci-rankings__table tbody tr:last-child td{border-bottom:none;} .oe-block-gci-rankings__rank{font-weight:700;color:var(--oe-heritage-blue);font-variant-numeric:tabular-nums;width:30px;} .oe-block-gci-rankings__city-cell{white-space:normal;min-width:96px;max-width:116px;} .oe-block-gci-rankings__city-name{display:block;font-weight:600;color:var(--oe-heritage-blue);line-height:1.3;} .oe-block-gci-rankings__country-name{display:block;font-size:var(--fs-2xs);color:var(--text-muted);} .oe-block-gci-rankings__score{font-variant-numeric:tabular-nums;} .oe-block-gci-rankings__score-cell{display:flex;align-items:center;gap:5px;} .oe-block-gci-rankings__score-bar{ flex:0 0 20px;height:5px;border-radius:3px; background:rgba(0,52,102,0.09);overflow:hidden; } .oe-block-gci-rankings__score-bar span{display:block;height:100%;border-radius:3px;} .oe-block-gci-rankings__score-val{font-weight:600;min-width:27px;text-align:right;} .oe-block-gci-rankings__score.is-sorted .oe-block-gci-rankings__score-val{color:var(--oe-heritage-blue);font-weight:700;} .oe-block-gci-rankings__col-compare{text-align:center;width:48px;} /* element+class specificity + explicit padding/min-width reset so a theme's own button padding or min-width can't stretch the checkbox out of its 1:1 square. */ .oe-block-gci-rankings button.oe-block-gci-rankings__select-check{ display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;min-width:0;padding:0;flex:0 0 auto;box-sizing:border-box; border-radius:var(--r-xs);line-height:1; border:1.5px solid var(--line-strong);background:#fff; color:#fff;cursor:pointer; transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } .oe-block-gci-rankings__select-check:hover{border-color:var(--oe-sky-blue);} .oe-block-gci-rankings__table tbody tr:hover .oe-block-gci-rankings__select-check{border-color:var(--oe-sky-blue);} .oe-block-gci-rankings__table tbody tr.is-selected .oe-block-gci-rankings__select-check{ background:var(--oe-heritage-blue);border-color:var(--oe-heritage-blue); } /* Force the tick white regardless of any inherited theme button colour, so it reads on the navy selected background (was a dark-on-dark invisible tick). */ .oe-block-gci-rankings .oe-block-gci-rankings__select-check svg{ width:10px;height:10px;color:#fff;stroke:#fff; } .oe-block-gci-rankings__footer{ display:flex;flex-wrap:wrap;gap:var(--sp-3); align-items:center;justify-content:space-between; padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line); background:var(--bg-subtle); font-size:var(--fs-xs);color:var(--text-muted); } .oe-block-gci-rankings__count strong{color:var(--oe-heritage-blue);font-weight:600;} .oe-block-gci-rankings__empty{ padding:var(--sp-9) var(--sp-5);text-align:center;color:var(--text-muted);font-size:var(--fs-sm); } /* ============================================================ Buttons (primitives from §04, scoped) ============================================================ */ .oe-block-gci-rankings__btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); font-family:inherit;font-size:var(--fs-base);font-weight:600;line-height:1; padding:14px var(--sp-6); border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer;white-space:nowrap; transition:background var(--dur) var(--ease),color var(--dur) var(--ease), border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .oe-block-gci-rankings__btn svg{width:16px;height:16px;flex-shrink:0;} .oe-block-gci-rankings__btn:hover{transform:translateY(-2px);} .oe-block-gci-rankings__btn:active{transform:translateY(0);} .oe-block-gci-rankings__btn--primary{background:var(--oe-heritage-blue);color:#fff;box-shadow:var(--shadow-sm);} .oe-block-gci-rankings__btn--primary:hover{background:var(--oe-sky-blue);box-shadow:var(--shadow-md);} .oe-block-gci-rankings__btn--light{background:#fff;color:var(--oe-heritage-blue);box-shadow:var(--shadow-sm);} .oe-block-gci-rankings__btn--light:hover{box-shadow:var(--shadow-md);color:var(--oe-sky-blue);} .oe-block-gci-rankings__btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.42);} .oe-block-gci-rankings__btn--outline-light:hover{background:rgba(255,255,255,0.12);border-color:#fff;} .oe-block-gci-rankings__btn--sm{padding:10px var(--sp-4);font-size:var(--fs-sm);} .oe-block-gci-rankings__btn--sm svg{width:14px;height:14px;} .oe-block-gci-rankings__btn[disabled], .oe-block-gci-rankings__btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;} /* The tray buttons are small by default. */ .oe-block-gci-rankings__clear, .oe-block-gci-rankings__compare{padding:10px var(--sp-4);font-size:var(--fs-sm);} .oe-block-gci-rankings__clear svg, .oe-block-gci-rankings__compare svg{width:14px;height:14px;} /* ============================================================ Compare tray — docked action bar ============================================================ */ /* The tray is portaled to by view.js and pinned to the bottom of the viewport (position:fixed) so the "Compare cities" CTA is always visible when cities are selected, regardless of screen height or where the block sits in the page. view.js sets left/width to line the bar up with the block, and hides it (.is-docked-hidden) whenever the block is scrolled out of view so it never floats over unrelated page sections. It slides up + fades in when cities are selected (.is-visible) and slides back down otherwise. The design tokens (heritage-blue bg, radius, shadow, spacing) are declared on .oe-block-gci-rankings__tray in the token block at the top of this file, so they still resolve once the bar is portaled out of the block root. */ .oe-block-gci-rankings__tray{ position:fixed;z-index:200;box-sizing:border-box; left:16px;right:16px;bottom:16px; /* JS overrides left/width to match the block */ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); background:var(--oe-color-sky-blue, var(--oe-sky-blue));color:#fff; border-radius:var(--r-lg);box-shadow:0 0 6px 10px rgba(255,255,255,0.85); opacity:0;pointer-events:none;transform:translateY(140%); transition:opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out); } .oe-block-gci-rankings__tray.is-visible{ opacity:1;pointer-events:auto;transform:translateY(0); } /* Block scrolled out of view: force the bar off-screen even when cities are selected, so it doesn't hover over the rest of the page. */ .oe-block-gci-rankings__tray.is-docked-hidden{ opacity:0;pointer-events:none;transform:translateY(140%); } @media (prefers-reduced-motion: reduce){ .oe-block-gci-rankings__tray{transition:opacity var(--dur) var(--ease);transform:none;} .oe-block-gci-rankings__tray.is-visible{transform:none;} .oe-block-gci-rankings__tray.is-docked-hidden{transform:none;} } .oe-block-gci-rankings__tray-copy{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;} .oe-block-gci-rankings__tray-label{ font-size:var(--fs-2xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.7); } .oe-block-gci-rankings__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);} .oe-block-gci-rankings__chip{ display:inline-flex;align-items:center;gap:var(--sp-2); padding:6px 8px 6px 12px;border-radius:var(--oe-border-radius-base,8px); background:rgba(255,255,255,0.16);font-size:var(--fs-xs);font-weight:500; } /* Docked-bar buttons (Clear / Compare cities) use the brand base radius. Scoped to the tray so the modal's shared __btn CTA keeps its own radius. */ .oe-block-gci-rankings__tray .oe-block-gci-rankings__btn{ border-radius:var(--oe-border-radius-base,8px); } .oe-block-gci-rankings__chip button{ display:flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%;border:0;padding:0; background:transparent;color:#fff;cursor:pointer;opacity:.7; transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease); } .oe-block-gci-rankings__chip button:hover{opacity:1;background:rgba(255,255,255,0.2);} .oe-block-gci-rankings__chip button svg{width:8px;height:8px;} .oe-block-gci-rankings__cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;} /* ============================================================ Compare modal + radar (portaled to by view.js) ============================================================ */ .oe-block-gci-rankings__modal{ position:fixed;inset:0;z-index:300; display:none;align-items:center;justify-content:center; padding:var(--sp-5); font-family:inherit;color:var(--text-body); } .oe-block-gci-rankings__modal[hidden]{display:none;} .oe-block-gci-rankings__modal.is-open{display:flex;} .oe-block-gci-rankings__backdrop{ position:absolute;inset:0; background:rgba(9,25,57,0.6);backdrop-filter:blur(4px); animation:oe-block-gci-rankings-fade-in var(--dur) var(--ease); } @keyframes oe-block-gci-rankings-fade-in{from{opacity:0;}to{opacity:1;}} @keyframes oe-block-gci-rankings-panel-in{ from{opacity:0;transform:translateY(16px) scale(.98);} to{opacity:1;transform:none;} } .oe-block-gci-rankings__modal-panel{ position:relative; width:100%;max-width:900px;max-height:88vh;overflow-y:auto; padding:var(--oe-spacing-medium,24px); background:#fff;border-radius:var(--oe-border-radius-large,16px);box-shadow:var(--shadow-lg); animation:oe-block-gci-rankings-panel-in var(--dur-slow) var(--ease-out); } .oe-block-gci-rankings__close{ position:absolute;top:var(--sp-5);right:var(--sp-5); display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--bg-subtle);color:var(--oe-heritage-blue); transition:background var(--dur-fast) var(--ease); } .oe-block-gci-rankings__close:hover{background:var(--oe-sky-blue-30);} .oe-block-gci-rankings__close svg{width:14px;height:14px;} .oe-block-gci-rankings__eyebrow{ margin:0 0 var(--sp-2);font-size:var(--fs-2xs);font-weight:600; letter-spacing:0.13em;text-transform:uppercase;color:var(--oe-sky-blue); } .oe-block-gci-rankings__modal-title{ margin:0 0 var(--sp-2);padding-right:48px; color:var(--oe-heritage-blue);font-weight:600;line-height:1.2; } .oe-block-gci-rankings__modal-sub{font-size:var(--fs-sm);color:var(--text-muted);margin:0;} .oe-block-gci-rankings__compare-body{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); gap:clamp(24px,3vw,40px);align-items:stretch;margin-top:var(--sp-5); } .oe-block-gci-rankings__radar{width:100%;height:auto;} .oe-block-gci-rankings__compare-side{display:flex;flex-direction:column;gap:var(--sp-4);} .oe-block-gci-rankings__legend{display:grid;gap:var(--sp-3);} .oe-block-gci-rankings__legend .row{ display:flex;align-items:flex-start;gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line);border-radius:var(--r-md); font-size:var(--fs-sm); } .oe-block-gci-rankings__legend .swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:5px;} .oe-block-gci-rankings__legend b{display:block;color:var(--oe-heritage-blue);} .oe-block-gci-rankings__legend .meta{font-size:var(--fs-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums;} /* CTA box — benchmarking report register-interest prompt. Sits at the bottom of the right-hand column, beneath the city cards. */ .oe-block-gci-rankings__cta{ margin-top:auto; /* pin to the bottom of the side column */ display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3); padding:var(--sp-4); background:var(--bg-subtle);border:1px solid var(--line); border-radius:var(--oe-border-radius-large,16px); } .oe-block-gci-rankings__cta-heading{ margin:0; font-size:var(--fs-base);font-weight:600;line-height:1.3;color:var(--oe-heritage-blue); } .oe-block-gci-rankings__cta-btn{ flex-shrink:0;text-decoration:none; padding:10px var(--sp-4);font-size:var(--fs-sm); border-radius:var(--oe-border-radius-base,8px); /* match the site's button radius */ } /* ============================================================ Responsive ============================================================ */ /* Defaults for the custom-scrollbar scaffold (declared before the media block so the <=900px rule can switch the overlay on). The wrap always exists once view.js runs; the overlay bar only shows on small screens. */ .oe-block-gci-rankings__scroll-wrap{position:relative;} .oe-block-gci-rankings__vscroll{display:none;} @media (max-width:900px){ /* Keep the table's own capped vertical scroll on tablet/mobile. Previously this was max-height:none, which rendered all 1,000 rows into one giant block with no internal scroll — impossible to touch-scroll. Now ~8–9 rows are visible and a prominent scrollbar makes it obvious there's more to scroll. The header stays sticky within the box (base rule), so column labels don't scroll away. */ .oe-block-gci-rankings__table-scroll{ max-height:540px; max-height:min(540px,72svh); overflow-y:scroll; -webkit-overflow-scrolling:touch; /* Native vertical scrollbar is hidden here — it's overlay on touch (fades away), so we replace it with the always-visible custom bar below. The horizontal scrollbar (for the off-screen columns) is kept and styled. */ scrollbar-width:none; /* Firefox: hide native (custom bar replaces it) */ } .oe-block-gci-rankings__table-scroll::-webkit-scrollbar{width:0;height:11px;-webkit-appearance:none;} .oe-block-gci-rankings__table-scroll::-webkit-scrollbar-thumb{ background:var(--oe-heritage-blue);border-radius:6px;border:2px solid #fff; } .oe-block-gci-rankings__table-scroll::-webkit-scrollbar-track{background:rgba(0,52,102,0.08);} /* Custom always-visible vertical scrollbar (built by view.js). It overlays the right edge of the scroll box, stays put while the box scrolls, and is draggable. Shown only at <=900px; on desktop the native scrollbar is used. */ .oe-block-gci-rankings__vscroll{ display:block;position:absolute;top:0;right:3px;width:9px;height:100%; z-index:4;pointer-events:none;padding:4px 0;box-sizing:border-box; } .oe-block-gci-rankings__vscroll-track{ position:absolute;inset:4px 0;width:9px;border-radius:6px; background:rgba(0,52,102,0.12); } .oe-block-gci-rankings__vscroll-thumb{ position:absolute;top:0;right:0;width:9px;min-height:28px;border-radius:6px; background:var(--oe-heritage-blue);border:1.5px solid rgba(255,255,255,0.9); box-shadow:0 1px 3px rgba(9,25,57,0.25); pointer-events:auto;cursor:grab;touch-action:none;will-change:transform; } .oe-block-gci-rankings__vscroll-thumb:active{cursor:grabbing;} } @media (max-width:640px){ .oe-block-gci-rankings__toolbar{flex-direction:column;align-items:stretch;justify-content:flex-start;} /* In the column layout the search field's flex-basis (240px) becomes a HEIGHT, stretching the box to 240px tall and leaving a big whitespace gap. Reset it so the field is just its natural input height. */ .oe-block-gci-rankings__field{max-width:none;flex:0 0 auto;} .oe-block-gci-rankings__tray{flex-direction:column;align-items:stretch;} .oe-block-gci-rankings__cta-row{justify-content:stretch;} .oe-block-gci-rankings__cta-row .oe-block-gci-rankings__btn{flex:1;} .oe-block-gci-rankings__compare-body{grid-template-columns:minmax(0,1fr);} } @media (prefers-reduced-motion: reduce){ .oe-block-gci-rankings__tray, .oe-block-gci-rankings__backdrop, .oe-block-gci-rankings__modal-panel, .oe-block-gci-rankings__btn, .oe-block-gci-rankings__pill{animation:none !important;transition:none !important;} }