/* Header layout */ .site-header { background: var(--card, #fff); border-bottom: 1px solid var(--border, #eceff4); padding: 1.5rem 0; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo */ .site-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .site-logo img, .site-header img.logo { max-height: 56px; width: auto; display: block; } .site-logo-text { display: flex; flex-direction: column; line-height: 1.2; } .site-logo-title { font-weight: 700; font-size: 1rem; color: var(--text, #172b4d); } .site-logo-tagline { font-size: 0.8rem; color: var(--muted, #6b7280); } /* Nav */ .site-nav { display: flex; } .nav-list { display: flex; align-items: center; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { border: none; background: none; font: inherit; color: var(--muted, #4b5563); padding: 0.3rem 0.6rem; border-radius: 999px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; } .nav-link:hover, .nav-link:focus-visible { color: var(--text, #111827); background: rgba(255,122,0,0.08); outline: none; } .nav-caret { font-size: 0.75rem; } /* Dropdown panel */ .nav-dropdown { position: absolute; top: 110%; right: 0; background: #fff; border-radius: 0.75rem; border: 1px solid var(--border, #e5e7eb); box-shadow: 0 18px 40px rgba(15,23,42,0.18); padding: 1rem 1.2rem; min-width: 620px; z-index: 20; display: none; } .nav-dropdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; } .nav-dropdown h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; color: var(--muted, #6b7280); } .nav-dropdown a { display: block; font-size: 0.9rem; color: var(--text, #111827); text-decoration: none; padding: 0.15rem 0; } .nav-dropdown a:hover { color: var(--accent, #ff7a00); } /* Open state */ .nav-has-dropdown.is-open > .nav-dropdown-toggle { background: rgba(255,122,0,0.08); color: var(--text, #111827); } .nav-has-dropdown.is-open > .nav-dropdown { display: block; } /* Mobile nav toggle */ .nav-toggle { display: none; border: none; background: none; cursor: pointer; padding: 0.35rem; border-radius: 999px; } .nav-toggle-bar { display: block; width: 20px; height: 2px; margin: 4px 0; background: var(--text, #111827); border-radius: 999px; } /* Responsive: stack nav on mobile */ @media (max-width: 768px) { .site-header-inner { align-items: center; } .nav-toggle { display: block; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border, #e5e7eb); max-height: 0; overflow: hidden; transition: max-height 0.2s ease; } .site-nav.is-open { max-height: 420px; } .nav-list { flex-direction: column; align-items: stretch; padding: 0.75rem 1rem 1rem; } .nav-item { width: 100%; } .nav-dropdown { position: static; box-shadow: none; border-radius: 0.5rem; border: 1px solid var(--border, #e5e7eb); margin-top: 0.4rem; min-width: 0; } .nav-dropdown-grid { grid-template-columns: 1fr; } } /* ========================= Light / Dark theme tokens ========================= */ :root{ --bg: #f8fafc; --card: #ffffff; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --brand: #f97316; --brand-strong: #ff8a3d; --ring: rgba(249,115,22,.25); --field-bg: #ffffff; --code-bg: #f3f4f6; --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); --shadow-2: 0 10px 25px rgba(0,0,0,.08); } [data-theme="dark"]{ --bg:#0b1220; --card:#0e1729; --text:#e5e7eb; --muted:#9aa3b2; --border:#1f2937; --brand:#f97316; --brand-strong:#ff8a3d; --ring: rgba(249,115,22,.28); --field-bg:#0a1020; --code-bg:#0a1020; } /* Base */ *{box-sizing:border-box} html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container{max-width:960px;margin:0 auto;padding:1.25rem} /* Headings / tagline */ .site-name{ display:inline-block; font-size:1.6rem; font-weight:700; line-height:1.2; margin:0 0 .25rem 0; } .page-dek{ font-size:1.05rem; color:var(--muted); font-weight:400; margin:.35rem 0 1rem; } /* Footer */ .tagline{color:var(--muted)} .site-footer{ border-top:1px solid var(--border); color:var(--muted); padding:2rem 0; background:var(--card); } .footer-links{display:flex;gap:1rem;flex-wrap:wrap} .footer-links a{color:var(--brand);text-decoration:none;border-bottom:1px solid transparent} .footer-links a:hover{border-color:var(--brand)} /* Cards */ .card{ background:var(--card); border:1.5px solid var(--border); padding:1rem; border-radius:12px; margin:1.25rem 0; } /* Modes */ .modes{display:grid;gap:.5rem;margin:.75rem 0 1rem} .mode{display:flex;gap:.5rem;align-items:center;font-weight:600} .mode input{accent-color:var(--brand)} /* Form Grid (responsive) */ .grid{ display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; } @media (max-width: 980px){ .grid{ grid-template-columns:1fr 1fr; } .actions{ grid-column:1 / -1; justify-content:flex-start; } } @media (max-width: 640px){ .grid{ grid-template-columns:1fr; } .actions{ justify-content:stretch; } .actions .btn{ width:100%; } } /* Fields */ .field label{display:block;margin-bottom:.25rem;color:var(--muted);font-size:.9rem} .field input{ width:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid var(--border); background:var(--field-bg); color:var(--text); outline:none; transition:border-color .15s, box-shadow .15s, background-color .15s; } .field input:hover{ border-color:var(--brand); } .field input:focus{ border-color:var(--brand-strong); box-shadow:0 0 0 4px var(--ring); } /* Buttons */ .actions{display:flex;align-items:flex-end} .btn{ display:inline-block; border:1.5px solid var(--brand); background:var(--brand); color:#fff; padding:.55rem 1rem; border-radius:12px; cursor:pointer; transition:background .15s, border-color .15s, transform .02s; text-decoration:none; } .btn:hover{background:var(--brand-strong);border-color:var(--brand-strong)} .btn:active{transform:translateY(1px)} .btn.small{padding:.4rem .75rem;font-size:.9rem} .btn.secondary{ background:transparent; color:var(--brand); } .btn.secondary:hover{ background:color-mix(in srgb, var(--brand) 10%, transparent); } /* Result */ .result-wrap{display:flex;align-items:center;gap:.75rem;margin-top:.75rem} .result{ flex:1; padding:.85rem 1rem; border-radius:12px; border:1.5px solid var(--brand); background:var(--field-bg); min-height:48px; display:flex;align-items:center; } /* Hints */ .hint{color:var(--muted);font-size:.9rem;margin-top:.5rem} /* Article / formulas & blog bits */ .article .snippet{display:flex;gap:.5rem;align-items:stretch;margin:.5rem 0} .article .code{ flex:1; background:var(--code-bg); border:1.5px solid var(--brand); border-radius:12px; padding:.75rem 1rem; font-family:ui-monospace,Menlo,Consolas,monospace; color:inherit; } .article h3{margin:1.1rem 0 .45rem} .snippet{display:flex;gap:.5rem;align-items:stretch;margin:.5rem 0} .snippet .code{ flex:1; background:var(--code-bg); border:1.5px solid var(--brand); border-radius:12px; padding:.75rem 1rem; font-family:ui-monospace,Menlo,Consolas,monospace; } .btn.copy{white-space:nowrap} .copy-toast{ position:fixed;left:50%;bottom:16px;transform:translateX(-50%); background:#111827;color:#fff;border:1px solid rgba(0,0,0,.15); padding:.5rem .75rem;border-radius:12px; opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9999 } .copy-toast.show{opacity:1} .article .example{ background:#fff7ed; border:1px solid #fed7aa; color:var(--text); border-radius:12px; padding:.75rem 1rem; margin:.5rem 0 1rem; word-break:break-word; } .article .example strong{ color: var(--text); } /* Small-screen polish */ @media (max-width:640px){ .container{ padding:1rem; } .card{ padding:.9rem; } } /* Blog presentation upgrades */ .prose { max-width: 78ch; line-height: 1.7; font-size: 1.06rem; } .prose h1 { font-size: clamp(2rem, 3vw, 2.4rem); margin: 1.2rem 0 0.6rem; } .prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 2rem; } .prose p + p { margin-top: 0.75rem; } .toc { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 1rem 1.25rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);} .toc h2 { font-size: 1rem; margin: 0 0 .5rem 0; text-transform: uppercase; letter-spacing: .04em; opacity:.8;} .toc a { text-decoration: none; } .toc ul { margin: 0; padding-left: 1rem; } .toc li { margin: .25rem 0; } .formula-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 1.25rem 1.25rem 1rem; margin: 1.25rem 0 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.06); } .formula-card h2 { margin-top: 0; } .kicker { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; opacity:.7; } code { padding: .1rem .35rem; border-radius: 6px; background: rgba(0,0,0,.04); } .callout { border-left: 4px solid var(--accent, #ff6a00); background: rgba(255,106,0,.06); padding: .75rem .9rem; border-radius: 10px; margin: .75rem 0; } .example { background: #f7f9fc; border: 1px dashed rgba(0,0,0,.12); padding: .75rem .9rem; border-radius: 10px; } .inline-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; padding:0; list-style:none;} .inline-tags li { background: #f2f4f7; border: 1px solid rgba(0,0,0,.06); padding:.2rem .55rem; border-radius: 999px; font-size:.85rem; } a { color: var(--accent, #ff6a00); } a:hover { text-decoration: underline; } main.container { padding-top: 1.25rem; padding-bottom: 3rem; } .table-lite { width: 100%; border-collapse: collapse; margin: .75rem 0 1rem; font-size: 0.98rem; } .table-lite th, .table-lite td { padding: .55rem .6rem; border: 1px solid rgba(0,0,0,.08); } .table-lite thead th { background: #f7f9fc; font-weight: 600; } /* ============================================ MEGA MENU — FINAL STYLES Works with the Percent Calculator Biztools nav ============================================ */ /* --- Nav container --- */ .site-nav { display: flex; align-items: center; gap: 1.25rem; } /* --- Nav list --- */ .nav-list { list-style: none; display: flex; align-items: center; gap: 1.25rem; padding: 0; margin: 0; } /* --- Nav links --- */ .nav-link { background: none; border: none; cursor: pointer; text-decoration: none; color: var(--muted); padding: 0.3rem 0.4rem; font-size: 1rem; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.2rem; } .nav-link:hover, .nav-link:focus-visible { color: var(--text); background: rgba(255,122,0,0.08); } /* --- Dropdown caret --- */ .nav-caret { font-size: 0.75rem; opacity: 0.7; } /* --- Dropdown wrapper --- */ .nav-has-dropdown { position: relative; } /* --- Dropdown panel --- */ .nav-dropdown { position: absolute; top: calc(100% + 12px); right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 1rem 1.25rem; min-width: 700px; z-index: 1000; /* animation */ opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } /* --- Open state --- */ .nav-has-dropdown.open > .nav-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-has-dropdown.open > .nav-link { background: rgba(255,122,0,0.08); color: var(--text); } /* --- Mega menu grid --- */ .nav-dropdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; } /* --- Column headings --- */ .nav-dropdown h3 { font-size: 0.85rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* --- Links inside mega menu --- */ .nav-dropdown a { text-decoration: none; color: var(--text); display: block; padding: 0.25rem 0.15rem; border-radius: 8px; white-space: nowrap; } .nav-dropdown a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } /* ============================================ Mobile behavior ============================================ */ .nav-toggle { display: none; } /* Mobile menu button */ @media (max-width: 768px) { .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; border: none; background: none; cursor: pointer; padding: 0.35rem; } .nav-toggle-bar { width: 24px; height: 2px; background: var(--text); border-radius: 999px; } .site-nav { position: absolute; top: 100%; right: 0; left: 0; background: var(--card); border-bottom: 1px solid var(--border); flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .site-nav.open { max-height: 600px; /* enough to show everything */ } .nav-list { flex-direction: column; width: 100%; padding: 1rem; gap: 0.75rem; } .nav-dropdown { position: static; box-shadow: none; border: 1px solid var(--border); padding: 1rem; min-width: auto; margin-top: 0.5rem; opacity: 1; transform: none; pointer-events: auto; } .nav-dropdown-grid { grid-template-columns: 1fr; } } /* ================================ Mega menu – featured row + icons ================================ */ .menu-featured { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.75rem; align-items: stretch; margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); } .menu-featured-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); align-self: flex-start; padding-top: 0.35rem; } .menu-pill { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 12px; text-decoration: none; background: var(--bg); border: 1px solid transparent; color: var(--text); min-width: 0; } .menu-pill:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); text-decoration: none; } .menu-icon { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: rgba(249, 115, 22, 0.08); flex-shrink: 0; } .menu-pill-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .menu-pill-text strong { font-size: 0.9rem; line-height: 1.2; } .menu-pill-text small { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } /* Mobile: featured row becomes vertical list */ @media (max-width: 768px) { .menu-featured { grid-template-columns: 1fr; margin-bottom: 0.75rem; } .menu-featured-label { padding-top: 0; } .menu-pill { width: 100%; } } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */ .active { background-color: #04AA6D; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } /* Tooltip container */ .tooltip-wrap { position: relative; display: inline-block; } /* Tooltip box */ .tooltip-box { visibility: hidden; opacity: 0; transition: opacity .15s ease; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border); padding: .45rem .7rem; border-radius: 8px; white-space: nowrap; font-size: .85rem; color: var(--muted); z-index: 10; pointer-events: none; } /* Small arrow */ .tooltip-box::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--border) transparent transparent transparent; } /* Show on hover */ .tooltip-wrap:hover .tooltip-box { visibility: visible; opacity: 1; } /* Quick currency answers / currency converter layout */ .article{max-width:960px;margin:0 auto} .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.75rem} @media (max-width:900px){.kpis{grid-template-columns:1fr 1fr}} @media (max-width:640px){.kpis{grid-template-columns:1fr}} .kpi{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:.85rem 1rem} .kpi .label{color:var(--muted);font-size:.9rem;margin-bottom:.25rem} .kpi .value{font-weight:700;font-size:1.15rem} #fx-form .fx-row{display:grid;grid-template-columns:1fr min-content 1fr 1fr;gap:.75rem;align-items:end} #fx-form .swap-cell{display:flex;align-items:center;justify-content:center;min-width:84px;padding-top:1.55rem;} #fx-form select.btn.secondary, #fx-form input, #fx-form #swap.btn{padding:.7rem 1rem;height:44px;line-height:1.2} #fx-form #swap.btn{white-space:nowrap} @media (max-width:900px){ #fx-form .fx-row{grid-template-columns:1fr min-content 1fr;grid-template-areas: "from swap to" "amount amount amount";} #fx-form .from-cell{grid-area:from} #fx-form .swap-cell{grid-area:swap} #fx-form .to-cell{grid-area:to} #fx-form .amt-cell{grid-area:amount} } @media (max-width:640px){ #fx-form .fx-row{grid-template-columns:1fr 1fr;grid-template-areas: "from to" "swap swap" "amount amount";gap:.65rem;} #fx-form .swap-cell{padding-top:0;justify-content:center} #fx-form #swap.btn.small{padding:.5rem .9rem} } #fx-form + .kpis .score-pill{display:inline-block;border-radius:999px;padding:.2rem .6rem;border:1px solid var(--border);font-weight:600} .score-good{background:color-mix(in srgb, var(--brand) 16%, #ffffff)} .score-ok{background:color-mix(in srgb, var(--brand) 10%, #ffffff)} .score-warn{background:color-mix(in srgb, var(--brand) 6%, #ffffff)} .score-bad{background:color-mix(in srgb, var(--brand) 3%, #ffffff)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ===== Salary calculator layout ===== */ .tool-card { max-width: 720px; margin: 1.5rem auto 2.5rem; padding: 1.5rem 1.75rem; background: var(--card, #ffffff); border: 1.5px solid var(--border, #e2e8f0); border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } .tool-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .tool-intro { margin: 0 0 1rem; color: var(--muted, #4b5563); } /* Form layout */ .tool-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .tool-field { flex: 1 1 min(260px, 100%); min-width: 220px; } .tool-field label, .tool-row legend { display: block; font-weight: 600; margin-bottom: 0.2rem; } .tool-field small.hint { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--muted, #6b7280); } /* Radios / fieldset */ .tool-row fieldset { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 0.6rem 0.9rem 0.7rem; min-width: 240px; } .tool-row fieldset legend { font-size: 0.9rem; margin-bottom: 0.25rem; } .tool-row fieldset label { margin-right: 1rem; font-weight: 500; } /* Tables */ .tool-results { margin-top: 1.25rem; } .tool-summary { padding: 0.9rem 1rem; border-radius: 10px; background: rgba(250, 204, 21, 0.06); border: 1px solid var(--border, #e5e7eb); margin-bottom: 1rem; } .tool-summary h3 { margin: 0 0 0.3rem; } .tool-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tool-table th, .tool-table td { padding: 0.25rem 0; } .tool-table th { font-weight: 600; text-align: left; padding-right: 0.75rem; white-space: nowrap; } .tool-table td { text-align: right; } /* Disclaimer */ .tool-disclaimer { margin-top: 1.25rem; font-size: 0.8rem; color: var(--muted, #6b7280); line-height: 1.45; } /* Mobile tweaks */ @media (max-width: 640px) { .tool-card { padding: 1.25rem 1.1rem; margin-top: 1rem; } .tool-row { flex-direction: column; } .tool-field { min-width: 100%; } .tool-table th, .tool-table td { font-size: 0.9rem; } }

/* ------------------------------ */
/* Salary Quick Answer – Example Box Styling */
/* Matches the look of the $30/hour quick answer highlight */
/* ------------------------------ */

.salary-example.card.subtle {
    background: #fff7e6;          /* light warm highlight */
    border: 1px solid #f0d9b5;    /* subtle border */
    border-radius: 10px;
    padding: 24px 28px;
    margin: 32px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.salary-example.card.subtle h2 {
    margin-top: 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.salary-example-status {
    font-size: 1rem;
    color: #444;
    margin-top: 10px;
}

.salary-example strong {
    font-weight: 700;
}

/* When fallback message loads */
.salary-example.is-fallback {
    background: #fafafa;
    border-color: #ddd;
}

.salary-example.is-fallback .salary-example-status {
    color: #666;
    font-style: italic;
}