/* Styles for the career portal pages proxied below /jobs/, taken over from the layout the previous
   site added around the portal: no portal branding, brand colours, the page's own spacing. */

/* The portal paints its content area light grey (#fafafa); the site is white. */
#frame_zone {
  padding: 2rem 4rem;
  background: #fff;
}

#frame_zone button,
#frame_zone .css_button a {
  background-color: #5ba9d9;
  color: #fff;
  border-radius: 0;
}

#frame_zone button:hover,
#frame_zone .css_button a:hover,
#frame_zone .css_button.cvparser_hover a {
  background-color: #7cbae1 !important;
  color: #fff;
}

#frame_zone .scheme-border {
  border: none;
}

#frame_zone h1 {
  text-align: left;
  margin-top: 2.5rem;
}

#frame_zone .row {
  display: block;
}

#frame_zone legend,
#frame_zone h2 {
  color: #000 !important;
}

span[role='combobox'] {
  border-radius: 0;
}

#agreement a {
  color: #5ba9d9 !important;
  font-size: 16px !important;
}

#agreement a:hover {
  color: #5ba9d9 !important;
}

/* The previous site showed the list heading as a centred 40px heading and let the list use the
   whole width; the portal itself renders an h1 and a 1140px container. */
#frame_zone .container {
  max-width: 100%;
}

#jobslisting h1,
#jobslisting h2,
#headline_first {
  margin: 0;
  padding: 10px 0;
  color: #000;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

#jobslisting p a {
  color: #5ba9d9;
  font-weight: 500;
}

#jobslisting p a:hover {
  color: #7cbae1;
}

/* Portal branding, the job alert box and the grey shadow line under the list heading. */
#joboffers tfoot,
#jobalert_box,
#jobslisting img[src*='img0.php?id=42'] {
  display: none;
}

/* Phones: the portal keeps 64px side paddings and a narrow column, so text gets cut off. Use
   the screen width, wrap long words and shrink the headings. */
@media (max-width: 767px) {
  #frame_zone {
    padding: 1.5rem 1rem;
  }

  #frame_zone .container,
  #frame_zone .row,
  #frame_zone #main_content,
  #frame_zone #pageframework_content,
  #frame_zone .inner_content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  #frame_zone h1,
  #frame_zone h2,
  #frame_zone h3,
  #frame_zone p,
  #frame_zone li,
  #frame_zone td {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  #frame_zone h1 {
    font-size: 26px;
    line-height: 1.25;
    margin-top: 1.5rem;
  }

  #frame_zone h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  #jobslisting h1,
  #jobslisting h2 {
    font-size: 28px;
  }

  #frame_zone ul,
  #frame_zone ol {
    padding-left: 1.25rem;
  }

  #frame_zone img {
    max-width: 100%;
    height: auto;
  }
}

#jobIntroText p {
  margin: 0;
  color: #000;
}

#content_zone b,
#content_zone strong {
  font-weight: 700;
}

strong {
  color: #000;
}