/* The old NRMjobs look (www.nrmjobs.com.au and the old portal), on top of Bootstrap 5.
   Colours and sizes come from the old boot4-5_nrm.css, boot4-5_main_site.css and the portal's appstyle.css. */

:root {
    --nrm-olive: #a6b080;       /* page background, list item edge */
    --nrm-green: #65784a;       /* buttons, labels, form borders */
    --nrm-green-dark: #697d4b;  /* page titles */
    --nrm-link-green: #81995e;  /* menu links */
    --nrm-cream: #f1e7be;       /* menu bar, panels */
    --nrm-cream-light: #f4eece; /* footer */
    --nrm-text: #767676;
    --nrm-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
    --nrm-condensed: "Open Sans Condensed", "Arial Narrow", Verdana, sans-serif;
    --bs-body-font-family: "Open Sans", Verdana, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-font-weight: 300;
    --bs-body-color: var(--nrm-text);
    --bs-link-color-rgb: 51, 122, 183;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
}

body { background-color: var(--nrm-olive); }
/* Bootstrap's "bolder" on a 300-weight body comes out as normal weight, so bold text needs a real weight. */
b, strong { font-weight: 700; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--nrm-green); }

/* Banner: the leaves picture with the logo, a smaller one on phones. _Layout preloads both pictures: keep their addresses the same there. */
.nrm-banner { height: 250px; background: url("../img/leaves_header_1920.webp") center / cover no-repeat; }
.nrm-banner img { height: 240px; width: auto; margin: 5px 0 0 200px; }
@media (max-width: 767.98px) {
    .nrm-banner { height: auto; background-image: url("../img/leaves_header_sm_1400.webp"); text-align: center; padding: 5px 0; }
    .nrm-banner img { height: 120px; margin: 0; }
}

/* Menu bar. */
.nrm-nav { background-color: var(--nrm-cream); box-shadow: var(--nrm-shadow); padding: 0 14px; min-height: 40px; }
.nrm-nav .nav-link, .nrm-nav .btn-link { color: var(--nrm-link-green); font-size: 16px; font-weight: 600; padding: 10px 15px 7px; text-decoration: none; }
.nrm-nav .nav-link:hover, .nrm-nav .nav-link:focus, .nrm-nav .btn-link:hover { color: var(--nrm-green); }
.nrm-nav .nav-item.active { background-color: rgba(166, 176, 128, .3); }
.nrm-nav .dropdown-menu { background-color: var(--nrm-cream); border: 0; box-shadow: var(--nrm-shadow); padding: 0; }
.nrm-nav .dropdown-item { color: var(--nrm-link-green); font-weight: 600; padding: 8px 15px; }
.nrm-nav .dropdown-item:hover, .nrm-nav .dropdown-item:focus { background-color: rgba(166, 176, 128, .3); color: var(--nrm-green); }
.nrm-nav .navbar-toggler { border-color: var(--nrm-link-green); margin: 4px 0; }

/* Page body: white and cream panels on the olive background. */
.nrm-main { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.nrm_white_container { background: #fff; padding: 10px 15px; margin-bottom: 10px; }
.nrm-default-container { background: var(--nrm-cream); padding: 0 15px 10px; margin-bottom: 10px; }
.nrm-page-title, .nrm-default-container > h1:first-child, .nrm_white_container > h1:first-child {
    font-family: var(--nrm-condensed); font-size: 45px; font-weight: normal; color: var(--nrm-green-dark); margin: 0; padding-top: 10px;
}
/* Information pages: big title with a button on the right, then white sections with the old sage left border. */
.nrm-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; }
.nrm-section { background: #fff; border-left: 15px solid var(--nrm-olive); padding: 15px 20px; margin-bottom: 15px; color: #333; font-size: 15px; line-height: 1.6; }
.nrm-section h2 { color: var(--nrm-green-dark); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.nrm-section > :last-child { margin-bottom: 0; }
.nrm-section ul { padding-left: 1.4rem; }
.nrm-section li { margin-bottom: 4px; }
/* The old portal's sage "Looking for a job?" box. */
.nrm-section-highlight { background: #8aaa94; border-left-color: var(--nrm-green); color: #fff; }
.nrm-section-highlight h2, .nrm-section-highlight a { color: #fff; }
.nrm-section-highlight a { font-weight: 700; }
.nrm-section-title { color: var(--nrm-green-dark); font-family: var(--nrm-condensed); font-size: 26px; font-weight: bold; padding: 12px 0 6px; margin: 0; }
.nrm_form_label, .form-label { color: var(--nrm-green); font-size: 16px; font-weight: bold; }
/* Typed text dark and hints light grey: Bootstrap's placeholder grey was darker than the light body text, so hints looked like typed values. */
.form-control, .form-select { border: 1px solid var(--nrm-green); color: #333; }
.form-control::placeholder { color: #999; }
.form-control:focus, .form-select:focus { border-color: var(--nrm-green); box-shadow: 0 0 0 .2rem rgba(101, 120, 74, .25); }
.form-control:focus { color: #333; }
.form-check-input:checked { background-color: var(--nrm-green); border-color: var(--nrm-green); }

/* Buttons: square, green, condensed, with the old shadow. */
.btn { font-family: var(--nrm-condensed); font-weight: 600; }
.btn-success, .btn-primary {
    --bs-btn-bg: var(--nrm-green); --bs-btn-border-color: var(--nrm-green); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--nrm-green-dark); --bs-btn-hover-border-color: var(--nrm-green-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #55663e; --bs-btn-active-border-color: #55663e; --bs-btn-disabled-bg: var(--nrm-green); --bs-btn-disabled-border-color: var(--nrm-green);
    box-shadow: var(--nrm-shadow);
}
.btn-outline-success, .btn-outline-primary {
    --bs-btn-color: var(--nrm-green); --bs-btn-border-color: var(--nrm-green);
    --bs-btn-hover-bg: var(--nrm-green); --bs-btn-hover-border-color: var(--nrm-green); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nrm-green); --bs-btn-active-border-color: var(--nrm-green);
}
.text-success { color: var(--nrm-green) !important; }
.bg-success { background-color: var(--nrm-green) !important; }
.nrm_label { background-color: var(--nrm-green); color: #fff; font-size: 10.5px; padding: .2em .6em .3em; display: inline-block; }

/* Cards, tables and tabs inside pages stay white with no rounded corners. */
.card { border: 0; box-shadow: var(--nrm-shadow); }
.card-header { background: var(--nrm-cream); color: var(--nrm-green); font-weight: 600; border-bottom: 0; }
.table { --bs-table-bg: #fff; }
.nav-tabs .nav-link { color: var(--nrm-green); }
.nav-tabs .nav-link.active { color: var(--nrm-green-dark); font-weight: 600; }
.pagination { --bs-pagination-color: var(--nrm-green); --bs-pagination-active-bg: var(--nrm-green); --bs-pagination-active-border-color: var(--nrm-green); }

/* Job list: white rows with an olive left edge. */
.job-list-item { background: #fff; padding: 5px 10px 5px 15px; margin: 3px 0; border-left: 15px solid var(--nrm-olive); display: block; color: #000; font-weight: normal; text-decoration: none; }
.job-list-item:hover { border-left-color: var(--nrm-green); }
.job-list-item .item-title { color: var(--nrm-green-dark); font-weight: bold; }
.job-list-item:hover .item-title { text-decoration: underline; }
.job-list-item .closing-date { text-align: right; font-size: 13px; font-style: italic; }

/* White cards inside a cream panel, as on the old login page. */
.nrm-card { background: #fff; padding: 20px; box-shadow: var(--nrm-shadow); color: #000; font-weight: normal; }
.nrm-login .nrm-card ul { padding-left: 1.4rem; }
.nrm-card-title { color: var(--nrm-green); font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.nrm-login .nrm-card a { color: var(--nrm-green); }
[data-toggle-password] svg { width: 16px; height: 16px; }
[data-toggle-password] .when-shown, [data-toggle-password].shown .when-hidden { display: none; }
[data-toggle-password].shown .when-shown { display: inline; }

/* Advert form logo picker: the current and previous logos as tiles, ticked one outlined. */
.logo-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-choice { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 120px; min-height: 60px; padding: 6px 10px; border: 1px solid var(--nrm-green); background: #fff; cursor: pointer; }
.logo-choice img { max-width: 120px; max-height: 48px; }
.logo-choice:has(input:checked) { outline: 3px solid var(--nrm-green); }
/* Search filters: drop-downs of tick boxes. */
.nrm-matches { color: var(--nrm-green); font-size: 16px; font-weight: bold; margin: 10px 0; }
.nrm-multi .form-select { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nrm-multi .dropdown-menu { max-height: 320px; overflow-y: auto; }
.nrm-multi .dropdown-item { white-space: normal; cursor: pointer; }

/* Noticeboard down the right-hand side. */
.noticeboard-item { background: #fff; margin-top: 10px; position: relative; display: block; text-decoration: none; }
.noticeboard-item img { width: 100%; height: auto; display: block; }
.noticeboard-item > .nrm_label { position: absolute; right: 5px; top: -5px; }
.noticeboard-item .notice-text { padding: 12px 10px 8px; color: #337ab7; font-weight: 600; }
.social-buttons { margin-top: 15px; }
.social-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.social-buttons .btn { color: #fff; width: 50px; height: 35px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--nrm-shadow); }
.social-buttons .btn:hover { color: #fff; filter: brightness(1.1); }
.social-buttons svg { width: 16px; height: 16px; }
.btn-social-bg { background-color: #e8a38a; }
.btn-social-fb { background-color: #3b5998; }
.btn-social-x { background-color: #000; }
.btn-social-li { background-color: #0077b5; }
.btn-social-ig { background-color: #cd486b; }

/* Advert page, like the old site: white boxes on cream, green labels beside the values. */
.listing-page { padding-bottom: 15px; }
/* In the portal the advert sits in its own beige box: keep the first white box's top margin inside it (owner, 25 Oct 2026). */
.portal-content .listing-page { display: flow-root; }
.listing-page .listing-box { padding: 15px; margin: 15px 0 0; color: #000; font-size: 14px; }
.listing-id { font-style: italic; font-weight: bold; font-size: 12px; margin-bottom: 10px; }
.listing-logo { display: block; max-height: 200px; max-width: 100%; height: auto; margin-bottom: 15px; }
.listing-row + .listing-row { margin-top: 6px; }
.listing-label { color: #395c29; font-weight: bold; }
.listing-title { font-size: 14px; font-weight: bold; margin: 0; color: #000; font-family: inherit; }
.listing-body > :last-child { margin-bottom: 0; }

/* Advert text editor (Quill) on the portal form. Quill's own styles run paragraphs and lists together, so space them like the advert page. */
.rich-text .ql-editor { min-height: 10rem; font-size: 1rem; line-height: 1.5; color: #333; }
.rich-text .ql-editor.ql-blank::before { color: #999; }
.rich-text .ql-editor p, .rich-text .ql-editor ol, .rich-text .ql-editor ul { margin-bottom: .75em; }
.rich-text .ql-editor li + li { margin-top: .25em; }
.rich-text .ql-editor > :last-child { margin-bottom: 0; }

/* Clickable map of Australia (from the old site). */
.svg-container { position: relative; height: 0; width: 100%; padding: 0 0 100%; }
.scaling-svg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; }
g > a:hover { text-decoration: none; }
.vic { fill: #85b29c; } .nsw { fill: #a6b080; } .qld { fill: #f4da6d; } .wa { fill: #d69444; } .sa { fill: #d16469; }
.nt { fill: #e8a38a; } .tas { fill: #9ab86e; } .act { fill: #fff; } .int { fill: #a6b080; }
.vic:hover, .nsw:hover, .qld:hover, .wa:hover, .sa:hover, .nt:hover, .tas:hover, .act:hover, .inthover:hover { opacity: .5; }
.textint { transition: fill .5s; visibility: hidden; fill: #fff; font-weight: bold; }
.inthover:hover .textint { fill: var(--nrm-green-dark); visibility: visible; opacity: 1; }
.nrm-map { max-width: 420px; margin: 0 auto; }

/* Footer. */
.nrm-footer { background-color: var(--nrm-cream-light); padding: 30px; margin-top: 1.5rem; }
.nrm-footer h2 { font-size: 1.1em; font-weight: bold; color: var(--nrm-green); margin: 0 0 .4em; }
.nrm-footer h2 a { color: inherit; text-decoration: none; }
.nrm-footer ul { list-style: none; padding: 0; margin: 0 0 1.5em; }
.nrm-footer li { line-height: 1.6em; }
.nrm-footer li a { color: var(--nrm-green); text-decoration: none; }
.nrm-footer li a:hover { font-weight: bold; }
.nrm-footer .copyright a { color: var(--nrm-text); }

/* Advertiser portal (the old portal: cream top bar, olive menu down the left). */
.portal-shell { display: flex; min-height: calc(100vh - 50px); }
.portal-sidebar { width: 250px; flex-shrink: 0; background: #a7b081; padding-top: 10px; }
.portal-sidebar .menu-group { color: #f4eece; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 14px 20px 4px; }
.portal-sidebar a { display: block; color: #fff; font-size: 1.15rem; padding: 6px 20px; text-decoration: none; }
.portal-sidebar a .fa { margin-right: 8px; }
.portal-sidebar a:hover, .portal-sidebar a.active { background: rgba(255, 255, 255, .18); }
.portal-content { flex: 1; min-width: 0; padding: 20px 25px; background: #fff; color: var(--nrm-green-dark); }
.portal-topbar { background: #f0e7be; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; box-shadow: var(--nrm-shadow); }
.portal-topbar img { height: 42px; }
.portal-topbar a, .portal-topbar .btn-link { color: var(--nrm-link-green); font-weight: 600; text-decoration: none; margin-left: 15px; }
.portal-content h1 { color: #697d4a; font-weight: 600; }
@media (max-width: 767.98px) {
    .portal-shell { flex-direction: column; }
    .portal-sidebar { width: auto; display: flex; flex-wrap: wrap; padding: 0; }
    .portal-sidebar .menu-group { display: none; }
    .portal-sidebar a { font-size: 1rem; padding: 8px 12px; }
}

/* Pricing pages (the old /pricing, /pricing/adverts, /pricing/notices, /pricing/job-packs). */
.pricing-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0 14px; }
.pricing-head h1 { font-family: var(--nrm-condensed); font-size: 45px; font-weight: normal; color: var(--nrm-green-dark); margin: 0 auto 0 0; }
.pricing-tabs { display: flex; flex-wrap: wrap; box-shadow: var(--nrm-shadow); }
.pricing-tabs a { background: #a6b080; color: #fff; font-family: var(--nrm-condensed); font-size: 18px; text-transform: uppercase; padding: 8px 12px; text-decoration: none; }
.pricing-tabs a:hover { background: var(--nrm-green-dark); }
.pricing-tabs a.active { background: var(--nrm-green); }
.pricing-place { font-size: 18px; text-transform: uppercase; padding: 8px 18px; margin-left: auto; }
.pricing-box { background: #fff; box-shadow: var(--nrm-shadow); padding: 20px 25px; margin-bottom: 15px; color: #333; }
.pricing-lead .pricing-standard { font-family: var(--nrm-condensed); font-size: 28px; color: var(--nrm-green-dark); margin-bottom: 12px; }
.pricing-lead .pricing-standard b { color: #333; font-size: 36px; }
.pricing-card { background: #fff; box-shadow: var(--nrm-shadow); height: 100%; display: flex; flex-direction: column; padding-bottom: 15px; color: #333; }
.pricing-card > .list-group, .pricing-card > p, .pricing-card > .btn { margin: 15px 15px 0; }
.pricing-card > .btn { margin-top: auto; }
.pricing-card-head { display: block; color: #fff; font-family: var(--nrm-condensed); font-size: 30px; text-align: center; padding: 12px; text-decoration: none; }
.pricing-card-head:hover { color: #fff; text-decoration: underline; }
.pricing-card-picture { height: 175px; background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.pricing-small { font-family: var(--nrm-condensed); font-style: italic; font-size: 28px; line-height: 1; }
.pricing-big { font-family: var(--nrm-condensed); font-weight: bold; font-size: 58px; line-height: 1.1; }
.pricing-gst { font-size: 14px; }
.pricing-panel { background: #fff; box-shadow: var(--nrm-shadow); height: 100%; padding-bottom: 15px; color: #333; }
.pricing-panel h2 { color: #fff; font-family: var(--nrm-condensed); font-size: 30px; font-weight: normal; text-align: center; padding: 14px 10px; margin: 0 0 15px; }
.pricing-panel > .list-group, .pricing-panel > p { margin: 0 15px; }
.pricing-panel-price { text-align: center; font-family: var(--nrm-condensed); font-size: 22px; padding: 20px 0; }
.pricing-panel-price b { font-size: 52px; }
.pricing-pack h2 { text-align: left; font-weight: bold; font-size: 26px; }
.pricing-pack-price { font-family: var(--nrm-condensed); font-weight: bold; font-size: 26px; margin-bottom: 4px !important; }

/* Pay an invoice: the old secure payments page's narrow form. */
.pay-form { max-width: 350px; }
.pay-form .card { max-width: none; }
/* Job seeker account: the old grey status strip for the Bulletin. */
.bulletin-status { background: #f1f1f1; padding: 8px 12px; }
.account-email { margin-bottom: 12px; }
.account-email .form-label { display: block; margin-bottom: 2px; }
.account-email strong { color: #333; font-size: 15px; word-break: break-all; }
/* Salary guide graph: a column per $10k band, like the old salary graphs. */
.salary-graph { background: #fff; padding: 15px 15px 5px; margin-bottom: 10px; overflow-x: auto; }
.salary-graph-hint { color: #333; font-weight: 700; margin-bottom: 8px; }
.salary-columns { display: flex; align-items: flex-end; gap: 4px; height: 240px; min-width: 480px; }
.salary-band { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-decoration: none; color: #555; text-align: center; }
.salary-count { font-size: 12px; }
.salary-bar { display: block; min-height: 2px; }
.salary-label { font-size: 11px; white-space: nowrap; padding-top: 4px; border-top: 1px solid #888; }
.salary-band:hover .salary-bar, .salary-band.active .salary-bar { outline: 2px solid var(--nrm-green-dark); }
.salary-band.active .salary-label { font-weight: 700; color: var(--nrm-green-dark); }
/* Saved jobs on My account: a row per job with Remove on the right. */
.saved-jobs { list-style: none; padding: 0; }
.saved-jobs li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.saved-expired { background: #8a8a8a; font-weight: 600; }
.logo-preview { max-width: 100%; max-height: 200px; border: 1px solid var(--nrm-green); }