/* Fetcherr apply form, loaded by the Spark Hire (Comeet) widget through css-url.
   The design follows the contact form on www.fetcherr.io/contact: transparent
   fields with a hairline border, small light labels above them, and a plain
   submit row with a round arrow.

   Two rules the widget enforces on this file:
   1. No imported stylesheets, the whole file is rejected when it finds one,
      so the brand font is declared with font-face and loaded from the one font
      host the page's security policy allows.
   2. Only IDs, classes and descendants in selectors. A child combinator, a
      sibling combinator or :has() is dropped, so none are used here. */

/* The widget page sends a Content-Security-Policy that only allows fonts from
   its own host, a few CDNs and fonts.gstatic.com, so the brand font is pulled
   straight from Google's font host. A url() in font-face is not an import, so
   the widget accepts the file. */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/funnelsans/v3/OpNIno8Dg9bX6Bsp3Wq69Tpyfhg.woff2')
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/funnelsans/v3/OpNIno8Dg9bX6Bsp3Wq69Tp8fhj6yg.woff2')
    format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The display face, used for the title of the "Do you work at Fetcherr?"
   popup, so it matches the "Apply for this role" heading on the page. */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/funneldisplay/v3/B50bF7FGv37QNVWgE0ga--4PbZSRJXrOHcLHLoAYmmPXWA.ttf')
    format('truetype');
}

:root {
  --accent: #00ae5e;
  --text: #dfe1e5;
  --bright: #ffffff;
  --muted: #8b8e92;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.25);
  --error: #ff6a6a;
  --body: 'Funnel Sans', sans-serif;
  --display: 'Funnel Display', sans-serif;
  --gap: 1rem;
  --radius: 0.5rem;
  --field-height: 2.5rem;
  --control: 1.0625rem;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ae5e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* The widget runs on a 10px root, which makes every rem value tiny. The root is
   pinned to the browser default and stays in a rule of its own, because a
   font-size on html inside a shared rule resets it again. */
html {
  font-size: 100% !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.43 !important;
}

/* Every text node starts light, so nothing stays dark grey on the dark card.
   The exceptions below carry a higher specificity and win. Font family is left
   alone here, because the icon glyphs use a font of their own. */
#applyForm *,
#jobFormDiv * {
  color: var(--text) !important;
}

/* The same colour on the blocks by name, in case the universal selector above
   is one of the forms the widget filters out. */
#applyForm .questionnaire,
#applyForm .questionnaires,
#applyForm .question,
#applyForm .questions,
#applyForm .question-header,
#applyForm .question-title,
#applyForm .options,
#applyForm .option-title,
#applyForm .fieldset,
#applyForm .privacyPolicy,
#applyForm .checkboxLabel,
#applyForm .styled-form-component {
  color: var(--text) !important;
}

/* ---------- Layout ----------
   Comeet lays the form out on a Bootstrap grid, which insets every field by the
   column padding. The grid is flattened so the fields line up with the title. */

#applyForm {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Two line breaks sit between the intro and the first field. */
#applyForm br {
  display: none !important;
}

#applyForm .form-group {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
}

#applyForm .mediumText {
  margin: 0 0 1.5rem !important;
  font-size: 0.8125rem !important;
  color: var(--muted) !important;
}

/* Four pairs share a row: the two names, email and phone, resume and personal
   website, cover letter and portfolio. The left one of each pair clears the
   floats above it, the right one does not, and every other group clears both,
   which keeps the rest of the form in a single column. */
#applyForm .field-first-name,
#applyForm .field-email,
#applyForm .field-resume,
#applyForm .field-cover-letter {
  float: left !important;
  clear: both !important;
  width: calc(50% - var(--gap) / 2) !important;
  max-width: calc(50% - var(--gap) / 2) !important;
}

#applyForm .field-last-name,
#applyForm .field-phone,
#applyForm .field-website-url,
#applyForm .field-portfolio {
  float: right !important;
  clear: none !important;
  width: calc(50% - var(--gap) / 2) !important;
  max-width: calc(50% - var(--gap) / 2) !important;
}

/* The grid columns lose their gutter. Bootstrap puts 15px of padding on every
   column, including the wrapper that sits around the whole form, which is what
   indents the card. The widget drops selectors with a combinator, so the
   classes are listed by name. */
#jobFormDiv .col-xs-1,
#jobFormDiv .col-xs-2,
#jobFormDiv .col-xs-3,
#jobFormDiv .col-xs-4,
#jobFormDiv .col-xs-5,
#jobFormDiv .col-xs-6,
#jobFormDiv .col-xs-7,
#jobFormDiv .col-xs-8,
#jobFormDiv .col-xs-9,
#jobFormDiv .col-xs-10,
#jobFormDiv .col-xs-11,
#jobFormDiv .col-xs-12,
#jobFormDiv .col-sm-1,
#jobFormDiv .col-sm-2,
#jobFormDiv .col-sm-3,
#jobFormDiv .col-sm-4,
#jobFormDiv .col-sm-5,
#jobFormDiv .col-sm-6,
#jobFormDiv .col-sm-7,
#jobFormDiv .col-sm-8,
#jobFormDiv .col-sm-9,
#jobFormDiv .col-sm-10,
#jobFormDiv .col-sm-11,
#jobFormDiv .col-sm-12,
#jobFormDiv .col-md-1,
#jobFormDiv .col-md-2,
#jobFormDiv .col-md-3,
#jobFormDiv .col-md-4,
#jobFormDiv .col-md-5,
#jobFormDiv .col-md-6,
#jobFormDiv .col-md-7,
#jobFormDiv .col-md-8,
#jobFormDiv .col-md-9,
#jobFormDiv .col-md-10,
#jobFormDiv .col-md-11,
#jobFormDiv .col-md-12,
#jobFormDiv .col-lg-1,
#jobFormDiv .col-lg-2,
#jobFormDiv .col-lg-3,
#jobFormDiv .col-lg-4,
#jobFormDiv .col-lg-5,
#jobFormDiv .col-lg-6,
#jobFormDiv .col-lg-7,
#jobFormDiv .col-lg-8,
#jobFormDiv .col-lg-9,
#jobFormDiv .col-lg-10,
#jobFormDiv .col-lg-11,
#jobFormDiv .col-lg-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#jobFormDiv .row,
#jobFormDiv .form-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inside the form the label column and the field column also go full width, so
   the label sits on top of the field. */
#applyForm .col-xs-12,
#applyForm .col-sm-3,
#applyForm .col-sm-9,
#applyForm .col-sm-12,
#applyForm .col-md-3,
#applyForm .col-md-9,
#applyForm .col-md-12,
#applyForm .col-lg-3,
#applyForm .col-lg-9,
#applyForm .col-lg-12 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}

#applyForm ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#applyForm li {
  list-style: none !important;
}

/* ---------- Labels ---------- */

#applyForm .control-label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
  font-family: var(--body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.43 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

#applyForm .required-asterisk,
#applyForm .mandatory,
.required-asterisk {
  color: var(--accent) !important;
}

/* ---------- Text fields ---------- */

#applyForm .form-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--field-height) !important;
  min-height: var(--field-height) !important;
  margin: 0 !important;
  padding: 0.375rem 1rem !important;
  border: 0.0625rem solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.43 !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

#applyForm textarea.form-control {
  height: auto !important;
  min-height: 6rem !important;
  padding: 0.75rem 1rem !important;
  resize: vertical !important;
}

/* The border is redeclared in full, because Comeet widens it to 2px on focus. */
#applyForm .form-control:focus {
  border: 0.0625rem solid var(--accent) !important;
  box-shadow: none !important;
}

#applyForm .form-control::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Validation messages. The widget prints them in a dark red that disappears on
   this card, and the colour rule above would otherwise lighten them, so they
   are set here with a class in the selector to outrank it. */
#applyForm .error,
#applyForm .error span,
#applyForm .control-tip.error,
#applyForm .has-error .control-label {
  color: var(--error) !important;
}

#applyForm .control-tip {
  display: block !important;
  margin: 0.25rem 0 0 !important;
  font-family: var(--body) !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
}

#applyForm .has-error .form-control {
  border-color: var(--error) !important;
}

/* ---------- Attach controls ----------
   The file input itself stays hidden, the label is the visible box and matches
   the height and the border of a text field. */

#applyForm .clickableLink {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--field-height) !important;
  margin: 0 !important;
  padding: 0.375rem 1rem !important;
  border: 0.0625rem solid var(--line) !important;
  border-radius: var(--radius) !important;
  outline: none !important;
  background: transparent !important;
  color: var(--accent) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

#applyForm .clickableLink:hover {
  border-color: var(--accent) !important;
}

/* ---------- Questionnaire ---------- */

#applyForm .questionnaire-header {
  display: none !important;
}

#applyForm .fieldset,
#applyForm .question-header {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#applyForm .question-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.43 !important;
  color: var(--text) !important;
}

/* ---------- Checkboxes and radios ----------
   The real input is invisible and Comeet draws the control with icon glyphs:
   fa-circle for one choice, fa-square for a checkbox, and fa-check on top,
   which carries ng-hide until the option is picked. Each glyph is turned into
   a box of its own, so no parent or sibling selector is needed. */

#applyForm .styled-form-component {
  position: relative !important;
  margin: 0 0 0.625rem !important;
  padding: 0 !important;
}

#applyForm .checkboxLabel {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 1.75rem !important;
  outline: none !important;
  font-family: var(--body) !important;
  font-size: 0.9375rem !important;
  font-weight: 300 !important;
  line-height: 1.43 !important;
  color: var(--text) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  cursor: pointer !important;
}

#applyForm .option-title {
  display: block !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* The widget also sets a min-height on this box, so both ends are pinned. */
#applyForm .fa-stack {
  position: absolute !important;
  top: 0.125rem !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: var(--control) !important;
  min-width: var(--control) !important;
  max-width: var(--control) !important;
  height: var(--control) !important;
  min-height: var(--control) !important;
  max-height: var(--control) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1 !important;
}

/* The glyph itself is replaced by an empty box. */
#applyForm .fa-circle,
#applyForm .fa-square,
#applyForm .fa-check {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  text-indent: -999rem !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}

#applyForm .fa-circle,
#applyForm .fa-square {
  border: 0.0625rem solid var(--line-strong) !important;
  background: transparent !important;
}

#applyForm .fa-circle {
  border-radius: 50% !important;
}

#applyForm .fa-square {
  border-radius: 0.1875rem !important;
}

/* The tick shows only once the widget takes ng-hide off this element. */
#applyForm .fa-check {
  border: 0 !important;
  background: var(--check) center / 0.6875rem auto no-repeat !important;
}

#applyForm .checkboxLabel:hover .fa-circle,
#applyForm .checkboxLabel:hover .fa-square {
  border-color: var(--accent) !important;
}

/* ---------- Consent and links ---------- */

#applyForm .privacyPolicy,
#applyForm .privacyPolicy .questionnaire {
  margin: 0 !important;
  padding: 0 !important;
}

#applyForm a {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

/* ---------- Submit ---------- */

#applyForm .submit-button {
  width: 100% !important;
  margin: 0.5rem 0 0 !important;
  padding: 1.25rem 0 0 !important;
  border-top: 0.0625rem solid var(--line) !important;
  background: transparent !important;
  text-align: left !important;
}

#applyForm .applyButton {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bright) !important;
  font-family: var(--body) !important;
  font-size: clamp(1.125rem, 4.5vw, 1.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

#applyForm .applyButton::after {
  content: '';
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border: 0.0625rem solid var(--line-strong);
  border-radius: 50%;
  background: var(--arrow) center / 0.75rem 0.75rem no-repeat;
  transition: background-color 0.2s ease;
}

#applyForm .applyButton:hover::after {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Share widget ----------
   The social widget loads this same file in its own iframe. It holds the
   "Do you work at Fetcherr?" link (employee login and referrals) and the share
   buttons. The buttons use Comeet's coloured icon sprite, so the icons are
   turned white with a filter, and the network colours on hover are replaced by
   the brand accent. */

#jobShareDiv .shareHeader {
  margin: 0 0 1rem !important;
}

#jobShareDiv .clearAfter {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Bootstrap clearfix pieces. Inside a flex row they act as extra items: in the
   header they push the link to the middle, in the button row they add a gap at
   both ends and make the last button overflow the iframe. */
#jobShareDiv .clearAfter::before,
#jobShareDiv .clearAfter::after,
#jobShareDiv .rowGroup::before,
#jobShareDiv .rowGroup::after {
  display: none !important;
  content: none !important;
}

/* Comeet pulls the button row 10px past the right edge, which clips the last
   button. */
#jobShareDiv .socialWidget {
  margin: 0 !important;
}

#jobShareDiv .smallTitle,
.shareTitle {
  margin: 0 !important;
  color: var(--bright) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.43 !important;
  letter-spacing: -0.02em !important;
}

#jobShareDiv .suggestEmployee {
  margin-left: auto !important;
}

#jobShareDiv .suggestEmployee,
#jobShareDiv .suggestEmployee span {
  float: none !important;
  color: var(--muted) !important;
  font-family: var(--body) !important;
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

#jobShareDiv .suggestEmployee:hover,
#jobShareDiv .suggestEmployee:hover span {
  color: var(--accent) !important;
}

#jobShareDiv .socialWidget .rowGroup {
  display: flex !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

#jobShareDiv .shareButton {
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#jobShareDiv .shareButton a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--field-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0.0625rem solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

#jobShareDiv .shareButton a:hover {
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#jobShareDiv .shareButton .socialIcon {
  filter: brightness(0) invert(1) !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}

#jobShareDiv .shareButton a:hover .socialIcon {
  opacity: 1 !important;
}

/* ---------- Employee popup ----------
   The "Do you work at Fetcherr?" link opens this form in a popup. Comeet does
   not pass css-url to popups, so the Comeet Apply component adds it back.
   The dark card around the form is drawn by the component on the page, the
   page background here stays transparent. The same rules cover the later
   steps of the popup (code entry, refer a friend), which reuse these classes. */

#userWrapperInIframe * {
  font-family: var(--body) !important;
  color: var(--text) !important;
}

#userWrapperInIframe .employeeProfileModal {
  padding: 0 !important;
}

#userWrapperInIframe .modal-header {
  margin: 0 !important;
  padding: 0 2.5rem 0 0 !important;
  border: 0 !important;
}

#userWrapperInIframe #modalTitle,
#userWrapperInIframe #modalTitle span {
  margin: 0 0 1.5rem !important;
  font-family: var(--display) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--bright) !important;
  text-align: left !important;
}

#userWrapperInIframe .modal-body,
#userWrapperInIframe .row,
#userWrapperInIframe .form-container,
#userWrapperInIframe .col-xs-12,
#userWrapperInIframe .col-sm-12,
#userWrapperInIframe .col-md-12 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#userWrapperInIframe .form-item {
  margin: 0 0 1.25rem !important;
}

#userWrapperInIframe .form-item__label {
  display: block !important;
  margin: 0 0 0.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.43 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

#userWrapperInIframe .form-control {
  width: 100% !important;
  height: var(--field-height) !important;
  padding: 0.375rem 1rem !important;
  border: 0.0625rem solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

#userWrapperInIframe .form-control:focus {
  border: 0.0625rem solid var(--accent) !important;
}

#userWrapperInIframe .form-control::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Same look as the newsletter subscribe button on the site. */
#userWrapperInIframe .okButton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--field-height) !important;
  margin: 0.5rem 0 0 !important;
  padding: 0 1.5rem !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-out !important;
}

#userWrapperInIframe .okButton span {
  font-family: var(--display) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--bright) !important;
  text-transform: none !important;
}

#userWrapperInIframe .okButton:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#userWrapperInIframe .okButton.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#userWrapperInIframe .privacy-policy {
  margin: 1rem 0 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  text-align: left !important;
}

#userWrapperInIframe .alignCenter {
  text-align: left !important;
}

#userWrapperInIframe a {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

/* The close cross is two thin bars drawn with ::before and ::after. */
#userWrapperInIframe .closeButton {
  top: 0.25rem !important;
  right: 0 !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}

#userWrapperInIframe .closeButton::before,
#userWrapperInIframe .closeButton::after {
  background-color: var(--bright) !important;
}

#userWrapperInIframe .closeButton:hover {
  opacity: 1 !important;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 34rem) {
  #applyForm .field-first-name,
  #applyForm .field-last-name,
  #applyForm .field-email,
  #applyForm .field-phone,
  #applyForm .field-resume,
  #applyForm .field-website-url,
  #applyForm .field-cover-letter,
  #applyForm .field-portfolio {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}