/* ==========================================================================
   Ixelle2026 - site styles
   Header and footer reproduce www.ixelles.be (main menu bar, banner, shortcut card, footer);
   the jobsite pages reproduce https://jobs.ixelles.be (left menu, job categories, job cards,
   job details, forms).
   Upload to <CDN>/Ixelle2026/Ressources/Styles/ixelle2026.css and link it AFTER
   Ixelle2026/Ressources/Styles/default.css (the site still links the ProfileGroup2021
   default.css, which does not exist: replace that link).
   Images are loaded from https://cdn.talentfinder.be/Ixelle2026/Ressources/Images/assets/.

   Reused as they are from NewCommon.css (not redefined here):
     - page skeleton of the WCAG engine (#header, #wrap-container, #sidebar-left, #main, #footer)
     - pager arrows (.pagePrec, .pageSuiv, .pageFirst, .pageLast) and pager flex layout
     - from the template's own default.css (to link before this file): upload box (.tableBox,
       #upload-cv-container), Material UI field layout grids of the forms
     - My Profile step bar (.myjobsite-breadcrumb) and left menu structure (#leftMenu)
     - theme variables: --primary-color, --heading-color, --text-color, --font-family
   Added here: fonts, header (menu bar, panels, banner, shortcut card), left column (jobsite
   menu, job categories), footer, and the Ixelles look of titles, cards, buttons, pager, job
   details, forms, login, profile and cookie banner.
   Measured on the references: green #4aa091 (commune site) / #4a938f (jobsite, same colour to
   the eye: #4aa091 is used everywhere), title bars #696969, light grey #e9e6e6, page #f1f1f1.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@500;700&family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");

/* ---------- Variables ----------
   Theme form (back office): primary #4aa091, heading #4aa091, text #3e3e3e, font Montserrat. */
:root {
  --ix-green: #4aa091;
  --ix-green-dark: #289084;        /* list arrows of the job texts */
  --ix-title-bar: #696969;         /* page title bars */
  --ix-light: #e9e6e6;             /* sub-categories, share bar, side card, card hover */
  --ix-page: #f1f1f1;
  --ix-muted: #6c757d;
  --ix-ink: #333;                  /* header and footer texts */
  --ix-font-site: "Open Sans", sans-serif;                          /* header and footer */
  --ix-font-title: "Expletus Sans", "Trebuchet MS", Arial, sans-serif;
  --ix-font: Montserrat, "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* The site prints the theme form as a :root block inside <body>, after this file. Setting the
   colours on body makes them win even when the theme form holds other values; NewCommon.css
   reads the same variables, so its rules follow too. */
body {
  --primary-color: #4aa091;
  --heading-color: #4aa091;
  --text-color: #3e3e3e;
  --font-family: var(--ix-font);
  --bs-link-color: #4aa091;
  --bs-link-color-rgb: 74, 160, 145;
  --bs-link-hover-color: #3a8072;
  --bs-link-hover-color-rgb: 58, 128, 114;
}

/* ---------- Base ---------- */
html, body { font-family: var(--ix-font); }
body { background: var(--ix-page) !important; color: var(--text-color); font-size: 0.8125rem; line-height: 1.5; }
#wrap-container { background: transparent; }
body a { color: var(--primary-color); text-decoration: none; }
body a:hover { color: var(--primary-color); text-decoration: underline; }
body :is(strong, b) { font-weight: 700; }
body :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }

#main-content, #main-content > .row { --bs-gutter-x: 30px; }
@media (min-width: 1200px) {
  #main-content { max-width: 1180px; }
}
body #main-content { padding-top: 48px !important; padding-bottom: 48px !important; }

/* Left column (jobsite menu) on every page, whatever layout the page has in the builder
   ("Wide" hides it), as on jobs.ixelles.be. */
body:not(.myjobsite) #sidebar-left { display: block; }
@media (min-width: 992px) {
  body:is(.full-wide, .center-sidebar):not(.myjobsite) #main.col-xs-12.col-sm-12.col-md-12.col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
}
@media (max-width: 991.98px) {
  #sidebar-left { margin-bottom: 30px; }
}

/* Bootstrap 4 classes still used by component markup, dead in Bootstrap 5 */
.text-right { text-align: right; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }

/* Page titles: grey bar with white text, as on jobs.ixelles.be */
body .main-title { padding: 0 0 16px; }
body .main-title h1, body h1.greenH1 {
  margin: 0; padding: 8px 20px;
  background: var(--ix-title-bar); color: #fff;
  font-family: var(--ix-font-title); font-size: 1rem; font-weight: 700 !important; line-height: 1.2; text-transform: none;
}
body .main-title h1 b { font-weight: 700; }
body #main .title-Myjob-h1 {
  margin: 30px 0 15px;
  color: var(--primary-color) !important;
  font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-transform: none;
}

/* Cards: flat white blocks */
#main .card { border: 0; border-radius: 0 !important; background: #fff; box-shadow: none; }
#main .card > .card-body { padding: 20px; }

/* Buttons drawn by the components: green, turn white with a green border on hover
   (.btn-primary:hover of the reference) */
:is(#main, #sidebar-left) .btn-primary {
  display: inline-block; padding: 6px 12px;
  border: 1px solid var(--primary-color); border-radius: 4px;
  background-color: var(--primary-color); box-shadow: none;
  color: #fff !important; font-family: var(--ix-font); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  text-align: center; text-transform: none; text-decoration: none !important;
}
:is(#main, #sidebar-left) .btn-primary:is(:hover, :focus, :active) {
  border-color: var(--primary-color) !important; background-color: transparent !important; color: #212529 !important;
}
#main .btn-primary.apply-btn { width: 100%; padding: 10px !important; }

/* ==========================================================================
   Header (www.ixelles.be)
   ========================================================================== */
#header { background: #fff; font-family: var(--ix-font-site); }
.ix-skip:focus { position: absolute; top: 4px; left: 4px; z-index: 1100; padding: 6px 12px; border-radius: 4px; background: #fff; }
.ix-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 64px; }

/* checkboxes that act as buttons (menu, "Je suis...", search): hidden but focusable */
.ix-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.ix-toggle:focus-visible + label { outline: 2px solid var(--ix-ink); outline-offset: 2px; }

/* ---------- Main menu bar (Header-Level-1) ---------- */
.ix-header { position: relative; z-index: 100; }
.ix-bar { position: relative; z-index: 2; background: #fff; box-shadow: 0 0 20px 6px rgba(0, 0, 0, 0.09); }
.ix-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 96px; padding: 1rem 0; }
.ix-bar__logo { flex: 0 0 auto; margin-right: 2rem; }
.ix-bar__logo img { display: block; width: 153px; height: 56px; }

.ix-search { display: flex; height: 40px; margin: 0 auto; }
.ix-search__input {
  width: 30vw; height: 40px; margin: 0; padding: 1px 2px 1px 1.5rem;
  border: 1px solid #ccc; border-right: 0; border-radius: 40px 0 0 40px; outline: 0;
  background: #fff; color: var(--ix-ink); font-family: var(--ix-font-site); font-size: 14px;
}
.ix-search__input:focus { border-color: var(--ix-green); }
.ix-search__button {
  height: 40px; padding: 8px 24px; border: 0; border-radius: 0 20px 20px 0;
  background: var(--ix-green); color: #fff; font-family: var(--ix-font-site); font-size: 16px; line-height: 1.5; cursor: pointer;
}

/* auto margins on both sides, as the Webflow dropdown of www.ixelles.be: the free space of the bar
   is shared between the search bar and the language switch */
.ix-lang { position: relative; margin: 0 auto; }
.ix-lang__current {
  display: block; padding: 20px 40px 20px 20px; color: #222; font-size: 16px; line-height: 1.5; cursor: pointer; list-style: none;
}
.ix-lang__current::-webkit-details-marker { display: none; }
.ix-lang__current::after {
  content: ""; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.ix-lang[open] .ix-lang__current::after { margin-top: -2px; transform: rotate(-135deg); }
.ix-lang__list { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 100%; margin: 0; padding: 0; background: #fff; list-style: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.ix-lang__list a { display: block; padding: 10px 20px; color: #222; font-size: 16px; text-decoration: none; }
.ix-lang__list a:hover { color: var(--ix-green); text-decoration: none; }

.ix-bar__iam { margin: 0; padding: 1rem; color: var(--ix-green); font-size: 16px; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ix-bar__menu, .ix-bar__search-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; margin: 0 0 0 2rem; padding: 0.5rem 1.5rem;
  border-radius: 100px; background: var(--ix-green); color: #fff; font-size: 16px; line-height: 1.5; cursor: pointer;
}
.ix-bar__search-btn { display: none; min-width: 40px; padding: 0; }
.ix-bar__search-btn img { width: 24px; height: 24px; object-fit: none; }
:is(.ix-bar__iam, .ix-bar__menu, .ix-bar__search-btn, .ix-search__button, .ix-lang__current):hover { opacity: 0.85; }
.ix-toggle:checked + .ix-bar__menu, .ix-toggle:checked + .ix-bar__search-btn { opacity: 0.85; }
.ix-toggle:checked + .ix-bar__iam { text-decoration: none; }

/* ---------- Panels opened by "Menu", "Je suis..." and the phone search button ---------- */
/* they drop over the banner, as on the commune site */
.ix-panel { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 1; max-height: calc(100vh - 96px); overflow-y: auto; background: #fff; box-shadow: inset 4px 4px 20px 0 rgba(0, 0, 0, 0.07), 0 12px 20px rgba(0, 0, 0, 0.12); }
.ix-panel--iam { background: var(--ix-green); }
.ix-header:has(#ix-toggle-menu:checked) .ix-panel--menu,
.ix-header:has(#ix-toggle-iam:checked) .ix-panel--iam { display: block; }

/* icon + title lists: menu panel, "Je suis..." panel, banner card, footer card */
.ix-icons { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.ix-icons__item { flex: 0 0 auto; align-self: baseline; margin: 2rem 0; padding: 0 1.5rem; }
.ix-icons__link { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none !important; }
/* each icon keeps its own size (35x37, 40x33, 36x36...), as on www.ixelles.be */
.ix-icons__icon { display: block; width: auto; max-width: none; height: auto; }
.ix-icons__title { display: block; margin-top: 16px; color: var(--ix-ink); font-family: var(--ix-font-site); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; }
.ix-icons--white .ix-icons__title { color: #fff; }
.ix-icons__link:hover { opacity: 0.85; }
.ix-icons__link:hover .ix-icons__title { text-decoration: underline; }

/* ---------- Banner (Header-Level-3) ----------
   Banner of the inner pages of www.ixelles.be (107-Offres-d-emploi): one photo, 40vh high
   (min. 300px), shortcut card 80px over its bottom edge. */
.ix-hero { position: relative; height: 40vh; min-height: 300px; margin-bottom: 80px; background: #6b7f6a; }
.ix-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* white card of six shortcuts, half over the bottom of the banner */
.ix-hero__shortcuts { position: absolute; bottom: -80px; left: 50%; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); }
.ix-icons--card { flex-wrap: nowrap; align-items: stretch; padding: 0 1.5rem; border-radius: 1rem; background: #fff; }

/* ==========================================================================
   Footer (Footer-Sub-Footer, www.ixelles.be)
   ========================================================================== */
#footer { margin: 0; padding: 0; background: transparent; }
.ix-footer { position: relative; margin-top: 64px; font-family: var(--ix-font-site); }
.ix-footer__shortcuts { position: absolute; top: -4rem; left: 50%; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); }
.ix-footer__band { padding: 8rem 0 4rem; background: var(--ix-green); color: #fff; }
.ix-footer__copyright { margin: 0.5rem 0; color: #fff; font-size: 16px; line-height: 1.7; text-align: center; }
.ix-footer__copyright a { color: #fff; text-decoration: underline; }
.ix-footer__copyright a:hover { color: #fff; opacity: 0.85; }

/* ---------- Header and footer on smaller screens (breakpoints of www.ixelles.be) ---------- */
@media (max-width: 1199.98px) {
  .ix-container { padding: 0 32px; }
  .ix-search__input { width: 24vw; }
}
@media (max-width: 991.98px) {
  .ix-bar .ix-search { display: none; }
  .ix-bar__search-btn { display: inline-flex; margin-left: 1rem; }
  .ix-bar__menu { margin-left: 1rem; }
  .ix-lang { margin-left: auto; }
  .ix-header:has(#ix-toggle-search:checked) .ix-panel--search { display: block; padding: 1.4rem 0; }
  .ix-search--mobile { width: 100%; }
  .ix-search--mobile .ix-search__input { flex: 1 1 auto; width: 100%; min-width: 0; }
  .ix-icons__item { margin: 1rem 0; padding: 0 1.1rem; }
  /* the shortcut cards are left out, as on the commune site (the Menu panel has the links) */
  .ix-hero__shortcuts, .ix-footer__shortcuts { display: none; }
  .ix-hero { margin-bottom: 0; overflow: hidden; }
  .ix-footer { margin-top: 48px; }
  .ix-footer__band { padding: 3rem 0; }
}
@media (max-width: 575.98px) {
  .ix-container { padding: 0 16px; }
  .ix-bar__inner { min-height: 72px; padding: 0.75rem 0; }
  .ix-bar__logo { margin-right: 0.5rem; }
  .ix-bar__logo img { width: 90px; height: auto; }
  .ix-bar__iam { display: none; }
  .ix-lang__current { padding: 12px 30px 12px 8px; }
  .ix-lang__current::after { right: 12px; }
  .ix-bar__search-btn, .ix-bar__menu { margin-left: 0.5rem; }
  .ix-bar__menu { padding: 0.5rem 1rem; }
  .ix-footer__copyright { font-size: 14px; }
}

/* ==========================================================================
   Left column: jobsite menu and job categories (Sidebar-Left, jobs.ixelles.be)
   ========================================================================== */
.ix-sidemenu { margin-bottom: 15px; background: #fff; }
.ix-sidemenu__title { margin: 0; padding: 8px 20px; background: var(--primary-color); color: #fff; font-family: var(--ix-font-title); font-size: 0.975rem; font-weight: 700; line-height: 1.2; }
.ix-sidemenu ul { margin: 0; padding: 0; list-style: none; }
.ix-sidemenu li { padding-left: 10px; border-bottom: 1px solid rgba(74, 160, 145, 0.45); }
.ix-sidemenu li:last-child { border-bottom: 0; }
.ix-sidemenu li a { display: block; color: var(--primary-color); font-size: 0.8125rem; line-height: 35px; }
.ix-sidemenu li a:hover { text-decoration: underline; }
.ix-sidemenu li.is-active a { font-weight: 700; }

/* Job categories: jobs-category-filter plugin (display mode "List") redrawn as the reference:
   parent category in a green bar, children on light grey with an arrow and their job count. */
.ix-categories:not(:has(a.link)) { display: none; }
/* spare copy of the listing page: only when the sidebar did not draw the categories */
body:has(#sidebar-left .ix-categories a.link) .ix-categories--spare { display: none; }
.ix-categories--spare { margin-bottom: 15px; }
.ix-categories .jobs-category-filter.card { margin: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ix-categories .jobs-category-filter .card-body { padding: 0; }
.ix-categories .jobs-category-filter :is(.reset-link, input, i.icon, .plugins-title) { display: none !important; }
.ix-categories .jobs-category-filter .head-panel { display: block !important; height: auto !important; margin: 0 0 15px; padding: 0; border: 0; background: transparent; }
.ix-categories .jobs-category-filter .head-panel:last-child { margin-bottom: 0; }
.ix-categories .jobs-category-filter .custom-control { display: block; min-height: 0; margin: 0; padding: 0; }
.ix-categories .jobs-category-filter .custom-control-label { display: block; margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }
.ix-categories .jobs-category-filter .custom-control-label::before, .ix-categories .jobs-category-filter .custom-control-label::after { display: none !important; }
.ix-categories .jobs-category-filter .main-category a.link { display: block; padding: 8px 20px; background: var(--primary-color); color: #fff; font-size: 0.975rem; line-height: 1.5; }
.ix-categories .jobs-category-filter .main-category .cat-item-count { display: none; }
.ix-categories .jobs-category-filter .sub-category { padding: 0; background: var(--ix-light); }
.ix-categories .jobs-category-filter .sub-item { position: relative; margin: 0 0 0 10px; padding: 8px 20px 8px 30px; }
.ix-categories .jobs-category-filter .sub-item::before {
  content: "\f178"; position: absolute; top: 8px; left: 0;
  color: var(--ix-green-dark); font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-size: 0.8125rem; font-weight: 900; line-height: 1.6;
}
.ix-categories .jobs-category-filter .sub-item .custom-control-label { display: inline; }
.ix-categories .jobs-category-filter .sub-item a.link { color: var(--text-color); font-size: 0.875rem; }
.ix-categories .jobs-category-filter a.link:hover { text-decoration: underline; }
.ix-categories .jobs-category-filter .sub-item .cat-item-count { display: inline; margin: 0; padding: 0; border-radius: 0; background: transparent !important; color: var(--text-color) !important; font-size: 0.875rem; font-weight: 400; line-height: inherit; word-spacing: -0.3em; vertical-align: baseline; }
/* category the list is filtered on: bold. NewCommon.css styles the active item with
   #collapse-cat, five classes and !important, hence the long selectors here. */
.ix-categories.ix-categories .jobs-category-filter.card #collapse-cat .isActive a.link,
.ix-categories.ix-categories .jobs-category-filter.card #collapse-cat .isActive .cat-item-count,
.ix-categories.ix-categories .jobs-category-filter.card #collapse-cat .isActive .cat-item-count * { color: var(--text-color) !important; font-weight: 700; text-decoration: none !important; }
.ix-categories.ix-categories .jobs-category-filter.card #collapse-cat .main-category.isActive a.link { color: #fff !important; }
.ix-categories.ix-categories .jobs-category-filter.card #collapse-cat .isActive .cat-item-count.badge { background-color: transparent !important; }

/* ==========================================================================
   Job listing
   ========================================================================== */
.ix-title-filter { font-weight: 700; }
.modules-jobs-listing.ourjobs .job-count h3 { margin: 0 0 15px; color: var(--text-color); font-size: 0.8125rem; font-weight: 400; line-height: 1.5; text-align: left; }

body.jobs-listing div.jobs-list-container { display: flex; flex-wrap: wrap; gap: 0; }
body.jobs-listing div.jobs-list-container div.jobs-items { display: block; flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; }
body.jobs-listing div.jobs-list-container div.jobs-items a.title-overflow-card { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
body.jobs-listing div.jobs-list-container div.jobs-items .card { height: 100%; border-radius: 0 !important; background: #fff; color: var(--text-color); }
body.jobs-listing #main div.jobs-list-container div.jobs-items .card .card-body,
body.jobs-listing #main div.jobs-list-container div.jobs-items .card .card-body:hover { padding: 20px; border: 0; border-right: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-color); transition: 0.3s ease-in-out; }
/* hover, as on the reference: light grey card with a green bar on the right */
body.jobs-listing #main div.jobs-list-container div.jobs-items:hover .card { background: var(--ix-light); }
body.jobs-listing #main div.jobs-list-container div.jobs-items:hover .card .card-body { border-right-color: var(--primary-color); }

.jobs-items .job-title-container.has-logo { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.jobs-items .card-logo { flex: 0 0 auto; width: auto; max-width: 120px; max-height: 40px; }
body.jobs-listing .jobs-items .card .card-body h3.job-title {
  min-width: 0; margin: 0 !important; padding: 0 0 8px !important;
  color: var(--primary-color); font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2;
}
body.jobs-listing .jobs-items .card .card-body h3.job-title .title-overflow { display: block; max-height: none; overflow: hidden; line-height: inherit; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; }

.jobs-items .job-info-container { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 !important; }
.jobs-items .job-info-container > div { display: flex; flex: 0 0 50%; gap: 10px; max-width: 50%; padding: 0 15px 0 0 !important; margin: 0 !important; }
.jobs-items .job-info-container i { flex: 0 0 14px; margin: 3px 0 0; color: var(--primary-color); font-size: 0.8125rem; text-align: center; }
body.jobs-listing .jobs-items .card .job-info-container span { color: var(--text-color); }

.jobs-items .job-cat-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.jobs-items .job-cat span { display: inline-block; padding: 2px 8px; background: var(--ix-light); color: var(--text-color); font-size: 0.75rem; line-height: 1.4; }
body.jobs-listing .jobs-items:hover .job-cat span { background: #fff; }

body.jobs-listing .jobs-items .card .card-body .teaser.job-teaser {
  flex-grow: 0; margin: 0 !important; padding-top: 8px !important;
  color: var(--text-color); font-size: 0.8125rem; line-height: 1.5;
}
.jobs-items .unpublished-date { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); color: var(--text-color); }
.jobs-items .unpublished-date i { margin-right: 8px; }
.jobs-items .unpublished-date .undate-text { margin-right: 8px; color: var(--ix-muted); }

body.jobs-listing .jobs-items .card .mission-picture-container { height: 180px; overflow: hidden; border-radius: 0; background-position: center; background-size: cover; }
.jobs-items .mission-picture-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0; }

/* "Columns" setting of the page (1 = the reference layout) */
@media (min-width: 576px) {
  body.jobs-listing div.jobs-list-container:is(.columns-2, .columns-3, .columns-4, .columns-5) { margin: 0 -8px; }
  body.jobs-listing div.jobs-list-container:is(.columns-2, .columns-3, .columns-4, .columns-5) div.jobs-items { flex: 0 0 50%; max-width: 50%; padding: 0 8px; }
}
@media (min-width: 1200px) {
  body.jobs-listing div.jobs-list-container.columns-3 div.jobs-items { flex: 0 0 33.3333%; max-width: 33.3333%; }
  body.jobs-listing div.jobs-list-container.columns-4 div.jobs-items { flex: 0 0 25%; max-width: 25%; }
  body.jobs-listing div.jobs-list-container.columns-5 div.jobs-items { flex: 0 0 20%; max-width: 20%; }
}
.jobs-list-container:is(.columns-2, .columns-3, .columns-4, .columns-5) .job-info-container > div { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 575.98px) {
  .jobs-items .job-info-container > div { flex: 0 0 100%; max-width: 100%; }
}

/* Empty state */
.jobs #modules-jobs-listing .modules-jobs-listing.ourjobs .content-container .card .card-body.no-job-found { padding: 30px 20px; border: 0; border-radius: 0; background: #fff; }
.jobs #modules-jobs-listing .modules-jobs-listing.ourjobs .content-container .card .card-body.no-job-found .card-title { margin: 0 0 10px; color: var(--primary-color); font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.jobs #modules-jobs-listing .modules-jobs-listing.ourjobs .content-container .card .card-body.no-job-found .card-text p { margin: 0; color: var(--text-color); font-size: 0.8125rem; line-height: 1.5; }

/* Pager: hover turns green, as on the reference */
.pager-container.ourjobsinfo { padding: 10px 0 30px; }
.pager-container.ourjobsinfo .showing { color: var(--text-color); line-height: 1.5; }
.pager-container.ourjobsinfo .showing span { margin: 0 0.3em; }
.pager-content .pager-container.ourjobsinfo .showing span,
.pager-content .pager-container.ourjobsinfo .showing span a,
.pager-content .pager-container.ourjobsinfo .showing span a:hover { color: var(--primary-color) !important; font-weight: 700; text-decoration: none; }
.pager-content span.pageNumDisabled { padding: 4px 9px; border: 1px solid var(--primary-color); background-color: var(--primary-color); color: #fff !important; }
.pager-content a.pageNumActive, .pager-content a.page { padding: 4px 9px; border: 1px solid #dee2e6; background-color: #fff; color: var(--primary-color); text-decoration: none; }
.pager-content a.pageNumActive:hover, .pager-content a.page:hover { border-color: var(--primary-color); background-color: var(--primary-color); color: #fff; text-decoration: none; }
.pager-content a.page :is(.pagePrec, .pageSuiv, .pageFirst, .pageLast),
.pager-content a.page :is(.pagePrec, .pageSuiv, .pageFirst, .pageLast):hover { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }

/* ==========================================================================
   Job details
   ========================================================================== */
.jobdetail .main { min-width: 0; overflow-wrap: break-word; }
.jobdetail .row-share { margin: 0; }
.jobdetail .row-share .share { padding: 0; }
.jobdetail .share ul { overflow: hidden; margin: 15px 0 30px; padding: 0; background: var(--ix-light); list-style: none; }
.jobdetail .share ul:empty { display: none; }
.jobdetail .share li { float: left; border: 0; }
.jobdetail .share li a { display: block; padding: 15px; background: var(--ix-light); color: var(--primary-color) !important; font-size: 0.875rem !important; line-height: 1; text-decoration: none; }
.jobdetail .share li a:is(:hover, :focus, :active) { background: var(--primary-color) !important; color: #fff !important; text-decoration: none; }

.jobdetail .job-banner { margin-bottom: 30px; }
.jobdetail .job-banner img { display: block; width: 100%; height: auto; }

.jobdetail .main .job-section + .job-section { margin-top: 48px; }
.jobdetail .main h3, .jobdetail .main .job-section__body :is(h2, h3) {
  margin: 0 0 8px; color: var(--primary-color);
  font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-transform: none;
}
.jobdetail .main .job-section__body :is(h2, h3) { margin-top: 16px; }
.jobdetail .main .job-section__body :is(h2, h3) strong { font-weight: inherit; }
.jobdetail .main h4 { margin: 10px 0; color: var(--text-color); font-size: 1rem; font-weight: 600; line-height: 1.2; }
.jobdetail .main p { margin: 0 0 16px; line-height: 1.5; }
.jobdetail .main p:empty { display: none; }
/* lists: green arrows instead of bullets */
.jobdetail .main ul { margin: 13px 0; padding: 0 0 0 20px; list-style: none; }
.jobdetail .main ul > li { position: relative; padding-left: 19.5px; line-height: 1.5; }
.jobdetail .main ul > li::before {
  content: "\f178"; position: absolute; top: 0; left: 0;
  color: var(--ix-green-dark); font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-size: 0.8125rem; font-weight: 900; line-height: 1.5;
}
.jobdetail .main ol { margin: 13px 0; padding-left: 40px; }
.jobdetail .main table { max-width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.jobdetail .main td, .jobdetail .main th { padding: 4px 8px; border: 1px solid #dee2e6; vertical-align: top; }
.jobdetail .main td p { margin: 0; }
.jobdetail .main img { max-width: 100%; height: auto; }
.jobdetail .file-section__download { font-weight: 600; }

/* side card: light grey, apply button, dates, place and address */
#main .jobdetail .aside .card > .card-body { padding: 20px; background: var(--ix-light); }
.jobdetail .aside .apply-option-container { padding-bottom: 8px !important; }
.jobdetail .aside .card-body .well { min-height: 20px; margin: 16px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.jobdetail .aside .postion-opening ul { margin: 0; padding: 0; list-style: none; }
.jobdetail .aside .postion-opening :is(li, .extra-info-content, .organization-info-content) { padding-bottom: 4px; line-height: 1.5; }
.jobdetail .aside .postion-opening :is(strong, .content-title) { margin-right: 8px; color: var(--ix-muted) !important; font-weight: 400; }
.jobdetail .aside .postion-opening h3,
.jobdetail .aside .organization-info-content.organization-name { margin: 0 0 12px; padding: 0; color: var(--text-color); font-size: 1rem; font-weight: 500; line-height: 1.2; }

/* bottom of the page: recruiter card */
.modules-jobs-details .section_1 { padding-top: 15px; }
.jobs-details-apply.card h3 { margin: 0 0 10px; border: 0; color: var(--primary-color) !important; font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-transform: none; }
.jobs-details-apply.card .text-apply { line-height: 1.5; }
.jobs-details-apply.card .apply-btn { width: auto !important; min-width: 180px; }

/* ==========================================================================
   Component pages: application forms, login, password pages, My Profile
   Markup is drawn by components (Material UI); only CSS here.
   body.fta = application + spontaneous form, body.account = login / password pages,
   body.myjobsite = logged-in profile pages.
   ========================================================================== */
:is(body.fta, body.account, body.myjobsite) #main :is(.MuiTypography-root, .MuiInputBase-root, .MuiButton-root, .MuiFormLabel-root, .MuiAutocomplete-root) { font-family: inherit; letter-spacing: inherit; }

/* page title of the forms (grey bar, like the job pages) */
:is(body.fta, body.account) #main .main-title h1 { margin-bottom: 0; }

/* intro texts */
:is(body.fta, body.myjobsite) #main .intro > br,
body.account #main .content-container > br { display: none; }
:is(body.fta, body.account, body.myjobsite) #main :is(.intro p, p.contentBlue) { margin: 0 0 10px; color: var(--text-color); font-size: 0.8125rem; line-height: 1.5; }
body.account #main p.contentBlue { margin-bottom: 30px; }

/* section titles */
:is(body.fta, body.myjobsite) #main .form-template .title-Myjob-h1 { margin-top: 40px; }
:is(body.fta, body.myjobsite) #main #fast-track-forms > .title-Myjob-h1 { margin-top: 25px; }

/* labels */
:is(body.fta, body.account, body.myjobsite) #main :is(.talentfinder-textfield-label, .talentfinder-select-label, .talentfinder-autocompleter, .radio-group, .checkbox-group) > label,
:is(body.fta, body.account, body.myjobsite) #main .col-form-label {
  padding-top: 7px; margin-bottom: 0;
  color: var(--text-color); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; text-transform: none;
}

/* fields */
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root { border-radius: 4px; background: #fff; color: var(--text-color); font-size: 0.8125rem; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root .MuiOutlinedInput-input { height: 20px; padding: 7px 12px; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root.MuiInputBase-multiline { padding: 7px 12px; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root.MuiInputBase-multiline .MuiOutlinedInput-input { height: auto; padding: 0; }
:is(body.fta, body.account, body.myjobsite) #main .MuiAutocomplete-root .MuiOutlinedInput-root { padding: 0 39px 0 0; }
:is(body.fta, body.account, body.myjobsite) #main .MuiSelect-select.MuiOutlinedInput-input { min-height: 20px; padding-right: 32px; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-notchedOutline { border: 1px solid #ccc; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #999; }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 160, 145, 0.25); }
:is(body.fta, body.account, body.myjobsite) #main .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: #a94442; }
:is(body.fta, body.account, body.myjobsite) #main .form-control { border: 1px solid #ccc; border-radius: 4px; color: var(--text-color); font-size: 0.8125rem; }
:is(body.fta, body.account, body.myjobsite) #main .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 160, 145, 0.25); }

@media (max-width: 575.98px) {
  /* NewCommon.css puts label and field side by side; stack them on phones */
  :is(body.fta, body.myjobsite) #main .form-template .line :is(.radio-group, .checkbox-group, .talentfinder-textfield-label, .talentfinder-select-label, .talentfinder-autocompleter) { grid-template-columns: 1fr !important; }
}

/* radios and checkboxes */
:is(body.fta, body.account, body.myjobsite) #main .MuiFormControlLabel-label { color: var(--text-color); font-size: 0.8125rem; line-height: 1.5; }
:is(body.fta, body.account, body.myjobsite) #main :is(.MuiRadio-root, .MuiCheckbox-root).Mui-checked svg { fill: var(--primary-color) !important; }
:is(body.fta, body.account, body.myjobsite) #main :is(.custom-control-label, .gdpr-logon .text) { font-weight: 400; line-height: 1.5; }
:is(body.fta, body.account, body.myjobsite) #main :is(.custom-control-label, .gdpr-logon .text) :is(p, span, a, u) { margin-top: 0; font-family: inherit !important; font-size: inherit !important; color: inherit; }
:is(body.fta, body.account, body.myjobsite) #main :is(.custom-control-label, .gdpr-logon .text) a { color: var(--primary-color) !important; }

/* upload boxes (layout reused from NewCommon.css / default.css) */
:is(body.fta, body.myjobsite) #main .tableBox .tableFoot { border-radius: 4px; }
:is(body.fta, body.myjobsite) #main .tableBox .tableFoot:hover { background: #edf6f4 !important; }
:is(body.fta, body.myjobsite) #main .tableBox .tableTitle { border-color: #ddd; color: var(--text-color); font-weight: 600; }
:is(body.fta, body.myjobsite) #main .message-container .title-file { color: var(--text-color); }
:is(body.fta, body.myjobsite) #main .message-container .extension-file { color: var(--ix-muted); }
:is(body.fta, body.myjobsite) #main #upload-cv-container button,
:is(body.fta, body.myjobsite) #main .MuiButton-containedPrimary {
  height: auto; padding: 6px 12px; border: 1px solid var(--primary-color) !important; border-radius: 4px; white-space: nowrap;
  background: var(--primary-color) !important; box-shadow: none; color: #fff !important;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none;
}
:is(body.fta, body.myjobsite) #main .tableFoot:hover #upload-cv-container button,
:is(body.fta, body.myjobsite) #main .MuiButton-containedPrimary:hover { background: #fff !important; color: #212529 !important; }
:is(body.fta, body.myjobsite) #main :is(table, .table) { color: var(--text-color); }

/* uploaded file row (application form, spontaneous form, My Profile).
   Markup: .curriculum-vitae > .file > .name + .size + .descripion + span.delete ("delete" as text).
   The delete text becomes a round bin button at the right end of the row, in the third column,
   so the three columns stay aligned with the table header. */
:is(body.fta, body.myjobsite) #main .tableBox .file { align-items: center; }
:is(body.fta, body.myjobsite) #main .tableBox .file .name { min-width: 0; padding-right: 16px; overflow-wrap: anywhere; }
:is(body.fta, body.myjobsite) #main .tableBox .file .name a { color: var(--primary-color); font-weight: 600; }
:is(body.fta, body.myjobsite) #main .tableBox .file .name a:hover { text-decoration: underline; }
:is(body.fta, body.myjobsite) #main .tableBox .file .descripion { grid-column: 3; grid-row: 1; min-width: 0; }
:is(body.fta, body.myjobsite) #main .tableBox .file:has(> .delete) .descripion { padding-right: 46px; }
:is(body.fta, body.myjobsite) #main .tableBox .file > .delete {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0 !important;
  border: 1px solid #a94442; border-radius: 50%;
  background: #fff; color: #a94442; cursor: pointer;
  font-size: 0; line-height: 1;
  transition: all 0.2s;
}
:is(body.fta, body.myjobsite) #main .tableBox .file > .delete::before {
  content: "\f2ed"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-size: 14px; font-weight: 900;
}
:is(body.fta, body.myjobsite) #main .tableBox .file > .delete:hover { background: #a94442; color: #fff; }
@media (max-width: 575.98px) {
  /* phones: file name on its own line, size and description under it, bin at the top right */
  :is(body.fta, body.myjobsite) #main .tableBox .file { grid-template-columns: 1fr auto; row-gap: 4px; padding: 1rem; }
  :is(body.fta, body.myjobsite) #main .tableBox .file > :is(.name, .size, .descripion) { grid-column: 1; grid-row: auto; padding-right: 0; }
  :is(body.fta, body.myjobsite) #main .tableBox .file:has(> .delete) .descripion { padding-right: 0; }
  :is(body.fta, body.myjobsite) #main .tableBox .file > .delete { grid-column: 2; grid-row: 1; }
  :is(body.fta, body.myjobsite) #main .tableBox .tableTitle { display: none; }
  /* drop zone: text above, button below */
  :is(body.fta, body.myjobsite) #main .tableBox .tableFoot { padding: 16px; }
  :is(body.fta, body.myjobsite) #main #upload-cv-container { flex-direction: column; align-items: flex-start; }
  :is(body.fta, body.myjobsite) #main #upload-cv-container .message-container { width: 100%; }
}

/* submit button of the forms: full width in a light grey block, like the side card of a job */
body.fta #main .jobs-details-apply-free-container { margin-top: 30px; padding: 20px; background: var(--ix-light); }
body.fta #main .jobs-details-apply-free-container .btn-primary { width: 100%; padding: 10px; }

/* login and password pages */
body.account #main div.content-Login { margin-top: 30px !important; border: 0; border-radius: 0; }
body.account #main .my-jobsite-logon-form.card-body { padding: 20px; }
body.account #main .my-jobsite-logon-form .left { padding: 0 40px 0 15px !important; }
body.account #main .my-jobsite-logon-form .right { padding: 0 15px 0 40px !important; border-left: 1px solid var(--ix-light); }
body.account #main .my-jobsite-logon-form .talentfinder-textfield-label { display: block; margin-bottom: 15px; }
body.account #main div.content-Login .my-jobsite-logon-form :is(#MyJobSiteLogonFrmSubmit, #lostPasswordFrmSubmit, #MyJobSiteResetFrmSubmit) {
  display: inline-block; width: 100%; padding: 8px 12px; border-radius: 4px;
}
body.account #main .my-jobsite-logon-form .alert { border: 0; border-radius: 4px; }
@media (max-width: 767.98px) {
  body.account #main .my-jobsite-logon-form .left { padding: 0 15px !important; }
  body.account #main .my-jobsite-logon-form .right { margin-top: 20px; padding-top: 20px !important; padding-left: 15px !important; border-top: 1px solid var(--ix-light); border-left: 0; }
}

/* My Profile */
body.myjobsite #leftMenu { margin-bottom: 30px; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
#leftMenu #myjob-site-menu :is(.sub-item, .leftMenuMyJobSite) { border-bottom: 1px solid rgba(74, 160, 145, 0.45); }
#leftMenu #myjob-site-menu :is(.sub-item, .leftMenuMyJobSite) a { color: var(--primary-color) !important; }
#leftMenu #myjob-site-menu :is(.sub-item, .leftMenuMyJobSite):is(.active, :hover) { background-color: var(--primary-color) !important; }
#leftMenu #myjob-site-menu :is(.sub-item, .leftMenuMyJobSite):is(.active, :hover) a { color: #fff !important; }
body.myjobsite .row.myjobsite-breadcrumb h3 { margin-top: 0; font-size: 0.8125rem; font-weight: 700; text-transform: none; }
body.myjobsite #main .modules-myjobsite-history h3.title { margin: 0; color: var(--primary-color) !important; font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
body.myjobsite #main .modules-myjobsite-history .jobs-items { margin-bottom: 16px !important; }
body.myjobsite #main .modules-myjobsite-history .jobs-items .card { height: auto; }
body.myjobsite #main div.content-Login { padding: 20px; border: 0; border-radius: 0; background: #fff; }
body.myjobsite #main div.content-Login h2 { margin: 0 0 10px; color: var(--primary-color); font-family: var(--ix-font-title); font-size: 1.125rem; font-weight: 700; text-transform: none; }
body.myjobsite #main .successBox { margin: 10px 0; padding: 10px 15px; border-radius: 4px; background: #dff0d8; color: #3c763d; }
body.myjobsite #main form .my-jobsite-btn-container { gap: 15px; margin-top: 30px; }
body.myjobsite #main form .my-jobsite-btn-container button:is(.myjobsite-submit, .myjobsite-back) { width: auto; min-width: 160px; }
body.myjobsite #main :is(.btnChangeAcces, .reset-container) .btn-primary { width: auto; min-width: 160px; }
body.myjobsite #main .reset-container .btn-primary { margin-top: 10px; }

/* ---------- Cookie banner ---------- */
/* pinned to the top of the screen, over the header (the component pins it to the bottom).
   Green bar, white text, "decline" as a plain white link, "accept" as a white button. */
.rhc-banner.consent-banner { top: 0; bottom: auto !important; padding: 12px 0; border-top: 0; background: var(--ix-green) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-family: var(--ix-font-site); }
.rhc-banner.consent-banner .rhc-banner__content { align-items: center; gap: 16px; padding: 0 20px; }
.rhc-banner.consent-banner .rhc-banner__content__message { margin: 0 auto 0 0; padding: 0; color: #fff !important; font-size: 0.8125rem; line-height: 1.5; text-align: left; }
.rhc-banner.consent-banner .rhc-banner__content__message a { margin-left: 4px; color: #fff !important; font-weight: 400; text-decoration: underline; }
.rhc-banner.consent-banner .rhc-banner__content__message a:hover { text-decoration: none; }
.rhc-banner.consent-banner .rhc-banner__content :is(.consent-approve, .consent-decline) {
  flex: 0 0 auto; width: auto; min-width: 0; height: auto; margin: 0; box-shadow: none;
  font-family: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.rhc-banner.consent-banner .rhc-banner__content .consent-decline { padding: 6px 4px; border: 0; border-radius: 0; background-color: transparent !important; color: #fff !important; }
.rhc-banner.consent-banner .rhc-banner__content .consent-decline:hover { background-color: transparent !important; text-decoration: underline; }
.rhc-banner.consent-banner .rhc-banner__content .consent-approve { padding: 6px 14px; border: 1px solid #fff; border-radius: 3px; background-color: #fff !important; color: #222 !important; }
.rhc-banner.consent-banner .rhc-banner__content .consent-approve:hover { background-color: transparent !important; color: #fff !important; }
@media (max-width: 767.98px) {
  .rhc-banner.consent-banner .rhc-banner__content { flex-wrap: wrap; justify-content: flex-end; }
  .rhc-banner.consent-banner .rhc-banner__content__message { flex: 0 0 100%; }
}

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  .pager-container.ourjobsinfo .pager-container.ourjobsinfo { flex-wrap: wrap; row-gap: 10px; padding: 0; }
  .pager-content .pager-center { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; }
  body .main-title h1, body h1.greenH1 { overflow-wrap: anywhere; }
}