@charset "UTF-8";
/* The Bootstrap-4 collapse helper this project ships used to be driven by
   jQuery (`data-toggle="collapse"`). The React migration replaced it with
   a plain useState toggle that adds/removes the `.show` class, so the CSS
   below has to match: hide the collapse when not `.show` on mobile,
   force-show it on desktop regardless. */
@media (max-width: 1024px) {
  .navbar-expand-lg .navbar-collapse:not(.show) {
    display: none !important;
  }
  .navbar-expand-lg .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background-color: #ffffff;
    padding: 12px 0;
  }
}

@media (min-width: 1025px) {
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-wrap: wrap;
    -ms-flex-flow: row nowrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .navbar-expand-lg .navbar-toggler {
    display: inherit;
  }
}

@media (min-width: 1025px) {
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.navbar {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
button svg {
  vertical-align: middle;
}
.app-header a.nav-link {
  font-weight: 600;
  font-size: 16px;
}
button.view-all-btn {
  /* QA row 23 / Figma 2901:1492: "View All" on the saved + applied
     sidebar widgets is a plain centered blue text link (Noto Sans 15/400)
     — not the legacy outline-pill. */
  display: block;
  width: auto;
  margin: 12px auto 0 auto;
  height: auto;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0.2px;
  color: #266adc;
  cursor: pointer;
  transition: text-decoration 0.15s ease;
}
button.view-all-btn:hover {
  text-decoration: underline;
}
button.view-all-btn:focus-visible {
  text-decoration: underline;
  outline: none;
}
.nav-item.dropdown .dropdown-toggle::after {
  display: inline-block;
  margin-left: 10px;
  vertical-align: 0px;
  content: "";
  border-top: 8px solid #000;
  border-right: 5px solid transparent;
  border-bottom: 0;
  border-left: 5px solid transparent;
}
.single-job-container .popup-close-button {
  top: -8px;
  right: 0;
}
header.app-header nav .user-menu-right .user-profile .dropdown-toggle::after {
  display: none;
}
.viewport.d-flex main {
  background-color: #eaf2fd;
}
main {
  background-color: #eaf2fd;
}
.widget .widget-list.widget-jobs-list .widget-job a {
  display: flex;
  align-items: center;
  position: relative;
  /* The anchor is itself a flex item of the `display:flex` `.widget-job`. Its
     automatic minimum size is derived from the `nowrap` job title, so the
     `min-width:0` on `.job-texts` can't shrink it — the title overflows past
     the aside with no ellipsis. Reset the anchor's own minimum so it shrinks
     to the column width and the title truncates. */
  min-width: 0;
}

@media only screen and (min-width: 1025px) {
  button.view-all-btn {
    box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.2);
  }
}
button.view-all-btn span {
  color: #266adc;
}
button.view-all-btn:hover {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  color: #266adc;
  background-color: #f0f8ff;
}

.remove-button {
  background: none;
  border: 0;
  padding: 0;
  height: 24px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.58;
  /* Figma row 25: red text, icon AFTER label (close-circle-line, 16px). */
  color: #f27b7b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.remove-button:hover {
  opacity: 0.85;
}
.remove-button svg {
  flex: 0 0 auto;
}

.signup-button {
  width: 138px;
  height: 54px;
  border-radius: 4px;
  border: solid 1.5px rgba(0, 0, 0, 0.12);
  background-color: #ffba00;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.signup-button.large {
  width: 177px;
  height: 50px;
  font-size: 18px;
}
.signup-button:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: #edad00;
}
.job-salary-flex {
  /* Figma 2901:1492: location + salary live on a single inline row
     ("Company · Austin, TX · $450 - $500"). The legacy `flex-wrap: wrap`
     pushed salary onto its own line whenever the row got narrow, which
     we don't want for the standard card width. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
@media (max-width: 768px) {
  /* Mobile: allow wrapping so cards don't horizontal-overflow. */
  .job-salary-flex {
    flex-wrap: wrap;
  }
}
.job-salary-flex .job-salary-and-close-date,
.job-salary-flex .job-company-location {
  /* Both inline at natural width — separated by the parent's `gap: 12px`
     instead of being forced apart with `flex: 1` (which left a wide gap
     between location and salary). */
  flex: 0 0 auto;
  min-width: 0;
}
.save-button {
  /* Figma 2901:1492: bookmark on listing cards is a bare 24×24 vector,
     not a framed button. We keep a 40×40 hit target for accessibility but
     drop the border, shadow, and white background that read as a "button". */
  width: 40px;
  height: 40px;
  box-shadow: none;
  border: 0;
  background-color: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #266adc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
.save-button span {
  color: #266adc;
}

.save-button.large {
  width: 195px;
  height: 48px;
  font-size: 16px;
}
.save-button.large svg {
  width: 12.7px;
  height: 22px;
  margin-right: 9px;
}
.save-button:hover {
  opacity: 0.7;
}
/* Save button retains its framed look in popup sidebars where it's a
   primary action, not an icon affordance. */
.popup-sidebar .save-button,
.save-button.large {
  border: 1.5px solid #266adc;
  background-color: #ffffff;
  border-radius: 11px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
.popup-sidebar .save-button:hover,
.save-button.large:hover {
  background-color: #f0f8ff;
  opacity: 1;
}
.save-button.saved svg {
  margin-right: 5px;
}
.save-button.saved.large svg {
  margin-right: 7px;
}
.save-button:disabled {
  cursor: not-allowed;
  opacity: 0.2 !important;
  border: solid 1.5px #266adc !important;
  color: #266adc !important;
}

.apply-button {
  /* Figma 2901:1492: Apply Now is 107×42, r=11, Noto Sans 500/15.
     Default (active card / popup) variant: solid blue / white text. */
  width: 107px;
  height: 42px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #266adc;
  border: 1px solid #266adc;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.apply-button span {
  color: #ffffff;
}
.apply-button.apply-button-mobile {
  width: 100%;
  height: 40px;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 26px;
}
.apply-button svg {
  margin-top: -2px;
}
.apply-button.large {
  width: 195px;
  height: 48px;
  font-size: 16px;
}
.apply-button.large svg {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}
.apply-button:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: #f0f8ff;
}
.apply-button:hover span {
  color: #222222;
}
.apply-button.applied {
  color: #ffffff;
  box-shadow: none;
  background-color: #266adc;
  border: 1px solid #266adc;
}
.apply-button.applied span {
  color: #ffffff;
}
.apply-button.applied svg {
  margin-right: 5px;
}
.apply-button:disabled {
  cursor: not-allowed;
  box-shadow: none;
  /* Disabled (mostly Expired) state — the legacy `rgba(0,0,0,0.16)` text on
     `rgba(0,0,0,0.08)` background made "Expired" effectively invisible.
     Use a readable medium-gray text on a light-gray fill so the state
     reads clearly. */
  color: #555555;
  background-color: #e5e7eb;
  border: 1px solid #d1d5db;
}
.apply-button:disabled span {
  color: #555555;
}

button.back-button {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #1e54af;
  background: none;
  padding: 0;
  border: 0;
}
button.back-button svg {
  margin-top: -3px;
  margin-right: 15px;
}

.confirm-button {
  width: 96px;
  height: 35px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #266adc;
  border: none;
  border-radius: 6px;
  /* Slightly rounded for a modern look */
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #ffffff !important;
  /* Ensures text stays white */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.confirm-button span {
  color: #ffffff !important;
  /* Ensures inner span text stays white */
}
.confirm-button.large {
  width: 135px;
  height: 48px;
  font-size: 16px;
}
.confirm-button.large svg {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}
.confirm-button:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: #2567d5;
  /* Explicitly ensuring text stays white on hover */
  color: #ffffff !important;
}
.confirm-button:hover span {
  color: #ffffff !important;
}

.cancel-button {
  width: 96px;
  height: 35px;
  box-shadow: none !important;
  background: none !important;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #595959;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.cancel-button.large {
  width: 135px;
  height: 48px;
  font-size: 16px;
}
.cancel-button:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.05);
}

.delete-icon {
  stroke: gray;
  fill: white;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  cursor: pointer;
}
.delete-icon:hover {
  stroke: #ff0000;
  transform: scale(1.1);
}

.popup-close-button {
  /* Figma 4309:103: 30x30 perfect circle hit-area with a 14x14 X glyph;
     no fill, no border — the icon stands alone in the modal header. */
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.popup-close-button:hover {
  opacity: 0.7;
}
.popup-close-button:focus-visible {
  outline: 2px solid #266adc;
  outline-offset: 2px;
  border-radius: 4px;
}

.saved-jobs-popup-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.saved-jobs-popup-wrapper .popup-header {
  position: relative;
  line-height: 24px;
  padding: 14px 56px 14px 20px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #222222;
  border-bottom: 1px solid #d9d9d9;
  background: #ffffff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.saved-jobs-popup-wrapper .popup-header .popup-header-title {
  display: inline-block;
}
.saved-jobs-popup-wrapper .popup-content {
  width: 100%;
  overflow: hidden;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}
.saved-jobs-popup-wrapper .popup-content .scroll-area {
  max-height: 652px;
  overflow-x: none;
  overflow-y: scroll;
}
/* .modal-open .logged-in-user-navigation{
      margin-top: -160px !important;
    } */
.saved-jobs-popup-wrapper .popup-content .saved-jobs-list {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffffff;
  padding-bottom: 30px;
}
.result-card .card-text-content .result-card-ui-actions button.in-progress {
  width: 140px;
}
.result-card .card-text-content .result-card-ui-actions button.in-progress svg {
  margin-right: 4px;
}
.saved-jobs-popup-wrapper .popup-content .saved-jobs-list .job-item {
  padding: 12px 20px 0;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-item-company-logo {
  float: left;
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 6px;
  margin-right: 10px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-item-company-logo
  img {
  width: 55px;
  height: 55px;
  border-radius: 6px;
  object-fit: contain;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content {
  position: relative;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
  /* Reserve enough vertical room for the absolute-positioned action column
     (Apply 48 + gap 12 + Remove 24 = 84) plus padding so the divider sits
     below them, not through them. */
  min-height: 96px;
  padding-bottom: 10px;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-meta {
  padding-bottom: 6px;
  /* Row 35: reserve space for the absolutely-positioned 200px action
     column at right:0 so long titles/companies clamp instead of running
     under (or past) the Apply Now / Remove buttons. 16px gap matches
     `.job-card-actions` flex gap. */
  padding-right: 216px;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-meta
  .job-title {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #266adc;
  /* Row 35: clamp at 2 lines, ellipsis on overflow, break unbroken
     long words/URLs so they don't push the layout out of the card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-meta
  .company-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #595959;
  /* Row 35: same clamp/break treatment as the title above. The parent
     `.job-card-meta` already reserves 216px on the right for the action
     column, so no max-width is needed here either. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-meta
  .saved-time {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.58;
  color: rgba(0, 0, 0, 0.2);
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions {
  /* Figma row 25: action column is wide enough for the 182px Apply Now
     button + a Remove row stacked beneath it, sitting at the right edge of
     the card without overlapping the divider line. */
  width: 200px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button {
  /* Figma: #266ADC bg, white text, 182×48, 8px radius, Inter 16/700. */
  background: #266adc;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  height: 48px;
  width: 182px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button:disabled {
  background: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button.applied,
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button.in-progress {
  background: #888888;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .remove-button {
  margin-top: 0;
  padding: 0;
  width: auto;
}

.confirm-popup-wrapper {
  display: flex;
  margin: 0 auto;
  border-radius: 20px;
  width: 530px;
  text-align: center;
  background-color: #ffffff;
}
.confirm-popup-wrapper .popup-content {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  border-radius: 16px;
}
.confirm-popup-wrapper .popup-content .popup-header {
  /* Row 21 / 22: relative so the new `.popup-close-button` (top-right ×)
     positions against the header band instead of the whole popup. */
  position: relative;
  padding: 30px 56px 10px 34px;
}
.confirm-popup-wrapper .popup-content .popup-header h1 {
  font-size: 24px;
  letter-spacing: 0.6px;
  color: #222222;
  margin: 0;
}
.confirm-popup-wrapper .popup-content .popup-body {
  padding: 0px 34px 20px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: #222222;
}
.confirm-popup-wrapper .popup-content .popup-body p {
  margin: 0 0 10px;
}
.confirm-popup-wrapper .popup-content .popup-footer {
  padding: 22px 30px 20px;
  background-color: rgb(255 255 255 / 0%);
  text-align: center !important;
  border-top: 1px solid #d9d9d9;
  margin: 10px 0px 0px;
}
.confirm-popup-wrapper .btn.cancel-button {
  background: #f1f1f1 !important;
  margin-right: 15px;
  border: 1px solid #266adc;
  border-radius: 6px;
}
.confirm-popup-wrapper .popup-content .popup-footer button {
  width: 135px;
}
.result-card .card-text-content .job-salary-range {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.result-card .card-text-content .job-salary-range svg {
  margin-right: 7px;
}
.signin-popup-wrapper {
  display: flex;
  margin: 0 auto;
  width: 797px;
  height: 486px;
  border-radius: 1px;
  background-color: #ededed;
}
.signin-popup-wrapper .popup-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.signin-popup-wrapper .popup-content .login-popup-artwork {
  position: absolute;
  right: 0;
  top: 0;
}
.signin-popup-wrapper .popup-content h1 {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 0;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.11;
  letter-spacing: normal;
  color: #222222;
}
.signin-popup-wrapper .popup-content p {
  font-size: 14px;
  width: 381px;
  margin-top: 14px;
  margin-left: 50px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: #595959;
}
.signin-popup-wrapper .popup-content .signup-button {
  margin-top: 40px;
  margin-left: 50px;
}
.signin-popup-wrapper .popup-content .signin-link {
  margin-top: 10px;
  margin-left: 50px;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.3px;
  color: #595959;
}
.signin-popup-wrapper .popup-content .signin-link a {
  color: #266adc;
}
.signin-popup-wrapper .popup-content .popup-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 71px;
  background-image: radial-gradient(circle at 50% 0, #397cd5, #2d69ce);
}
.signin-popup-wrapper .popup-content .popup-footer .login-popup-footer-artwork {
  margin-left: 32px;
}
.signin-popup-wrapper .popup-content .popup-footer span {
  margin-top: 13px;
  margin-left: 30px;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #ffffff;
}
.signin-popup-wrapper .popup-content .popup-footer .popup-app-store-image {
  margin-top: 12px;
  margin-left: 38px;
}
.signin-popup-wrapper .popup-content .popup-footer .google-play-badge {
  margin-top: 12px;
  margin-left: 14px;
}

.popup-wrapper {
  /* Figma 4309:103: container bg #F8FAFF, r=12. */
  background-color: #f8faff;
  border-radius: 12px;
}
.popup-title {
  width: 100%;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}
.popup-title .popup-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.popup-title p {
  margin: 0;
  padding-left: 17px;
  font-weight: bold;
  font-size: 18px;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
    border-radius: 12px;
  }
}
.popup-wrapper .popup-content {
  padding: 28px;
  background-color: #f9faff;
  border-bottom-left-radius: 16px;
}
.popup-wrapper .popup-content .popup-scroll-container {
  overflow-y: scroll;
  height: 540px;
}
span.close-date {
  color: #266adc;
  font-weight: 600;
}
.popup-wrapper .popup-sidebar button.save-button.large img {
  margin-right: 5px;
}
.popup-wrapper .popup-sidebar .job-title {
  color: #000;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content {
    /* Figma 4309:818 / 4309:103: full job-detail popup is 1024px wide,
       split into 704 (main) + 320 (sidebar). */
    width: 704px;
  }
}
/* @media only screen and (max-width: 1024px) {
      .popup-wrapper .popup-content {
        margin-bottom: 93px; } } */
.popup-wrapper .popup-content .popup-header {
  padding-bottom: 20px;
}

.popup-wrapper .popup-content .popup-header .logo {
  width: 65px;
  height: 65px;
  margin: 0 auto;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content .popup-header .logo {
    float: left;
    width: 80px;
    height: 80px;
  }
}
.popup-wrapper .popup-content .popup-header .logo img {
  width: 100%;
  object-fit: contain;
  border-radius: 16px;
}
@media only screen and (max-width: 1024px) {
  .popup-wrapper .popup-content .popup-header .header-content {
    text-align: center;
  }
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content .popup-header .header-content {
    margin-left: 97px;
  }
}
.popup-wrapper .popup-content .popup-header .header-content h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #000;
  margin-bottom: 12px;
}
@media only screen and (max-width: 1024px) {
  .popup-wrapper .popup-content .popup-header .header-content h1 {
    margin-top: 15px;
  }
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .job-company-location,
.popup-wrapper .popup-content .popup-header .header-content .job-salary-range {
  line-height: 17px;
  font-size: 14px;
  margin-bottom: 7px;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper
    .popup-content
    .popup-header
    .header-content
    .job-company-location
    svg,
  .popup-wrapper
    .popup-content
    .popup-header
    .header-content
    .job-salary-range
    svg {
    float: left;
  }
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .job-company-location
  svg {
  margin-top: -2px;
  margin-right: 2px;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper
    .popup-content
    .popup-header
    .header-content
    .job-company-location
    svg {
    margin-top: 2px;
    margin-right: 8px;
  }
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .job-company-location
  div {
  margin-left: 18px;
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .job-salary-range
  svg {
  margin-top: -4px;
  margin-right: 2px;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper
    .popup-content
    .popup-header
    .header-content
    .job-salary-range
    svg {
    margin-top: 3px;
    margin-right: 7px;
  }
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .job-salary-range
  div {
  display: inline-block;
}
.popup-wrapper .popup-content .popup-header .header-content .term-type-wrapper {
  margin-top: 3px;
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .term-type-wrapper
  .term-type {
  line-height: 25px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #595959;
  margin-bottom: 8px;
}
@media only screen and (max-width: 1024px) {
  .popup-wrapper
    .popup-content
    .popup-header
    .header-content
    .term-type-wrapper
    .term-type {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .term-type-wrapper
  .term-type
  .label {
  font-size: 13px;
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .term-type-wrapper
  .term-type
  .tag {
  margin-left: 5px;
  padding: 0 13px;
  height: 25px;
  line-height: 24px;
  display: inline-block;
  font-size: 12px;
  border-radius: 12.5px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .term-type-wrapper
  .term-type:last-child {
  margin-bottom: 0;
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .profile-video-required {
  margin-top: 7px;
  font-size: 14px;
  color: rgb(0 0 0);
}
.popup-wrapper
  .popup-content
  .popup-header
  .header-content
  .profile-video-required
  svg {
  margin-top: -2px;
  margin-right: 6.5px;
}
.popup-wrapper .popup-sidebar .widget-title {
  font-weight: 800 !important;
  font-size: 16px;
  color: #266adc !important;
  text-align: left;
}
.popup-wrapper .popup-content .popup-body {
  font-size: 14px;
  color: #595959;
}
.popup-wrapper .popup-content .popup-body a {
  color: #1e54af;
  text-decoration: underline;
}
.job-salary-range span {
  margin-left: 4px;
}
.popup-wrapper .popup-content .popup-body h2 {
  font-size: 14px;
  color: #222222;
}
.popup-wrapper .popup-content hr {
  margin-top: 30px;
  margin-bottom: 22px;
  border-color: rgba(0, 0, 0, 0.12);
}
.popup-wrapper .popup-content .job-post-footer {
  text-align: center;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content .job-post-footer {
    justify-content: space-between;
    display: flex;
  }
}
.popup-wrapper .popup-content .job-post-footer .job-post-timestamp {
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #595959;
}
.popup-wrapper .popup-content .job-post-footer .more-job-posts {
  height: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #266adc;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content .job-post-footer .more-job-posts {
    text-align: right;
  }
}
.popup-wrapper .popup-sidebar {
  /* Figma 4309:103: aside is 320px wide, bg rgba(38,106,220,0.05), padding 32. */
  width: 320px;
  padding: 32px;
  background-color: rgba(38, 106, 220, 0.05);
  border-bottom-right-radius: 12px;
}
@media only screen and (max-width: 1024px) {
  .popup-wrapper .popup-sidebar {
    display: none;
  }
}
.popup-wrapper .popup-sidebar button {
  margin-bottom: 15px;
}
.popup-wrapper .popup-sidebar .widget-title {
  color: #222222;
}
.popup-wrapper .popup-sidebar .widget-title.title {
  margin-top: 15px;
  color: #266adc;
}
.popup-sidebar label.widget-title.somestyle {
  font-weight: 800 !important;
  font-size: 16px;
  color: #266adc !important;
}
.job-company-location img {
  margin-right: 5px;
}
.input-group-append button.btn {
  padding: 0;
}
.term-type-wrapper {
  margin-top: 30px;
}
.term-type-wrapper .badge-full-time {
  /* Figma popup: same pill spec as listing card chip — r=18, bg #DEE8F9.
     Color darkened to #1E54AF for WCAG AA contrast (5.5:1). */
  min-width: 92px;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background-color: #dee8f9;
  color: #1e54af;
  border: solid 1px #bed5fc;
  border-radius: 18px;
  margin-right: 12px;
  transition: all 0.2s ease;
}
.input-group-append button.btn:focus {
  box-shadow: none;
}
.job-company-location {
  align-items: center;
  display: flex;
}
.popup-description-title {
  font-weight: 800 !important;
  font-size: 16px;
  color: #266adc !important;
  border-bottom: solid 0.6px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.job-company-location img:not(:first-child) {
  margin-left: 12px;
}

@media only screen and (max-width: 1024px) {
  .single-job-container {
    padding: 0;
  }
}

/* @media only screen and (min-width: 1025px) {
  .single-job-container {
    margin-top: 100px; 
  }
} */

.single-job-container .single-job-back {
  background: none;
  margin-bottom: 20px;
}
@media only screen and (max-width: 1024px) {
  .single-job-container .single-job-back {
    padding: 15px;
  }
}
@media only screen and (min-width: 1025px) {
  .single-job-container {
    width: 945px;
    margin-bottom: 22px;
  }
}

.single-job-container .popup-wrapper {
  border-radius: 16px;
}
.single-job-container .popup-sidebar {
  background-color: #fff;
}

.single-job-container .popup-wrapper .popup-content {
  /* width: 680px; */
  border-radius: 16px;
}

/* External-job parity: the inline bookmark + Apply Now buttons inside
   `.popup-header .header-content .result-card-ui-actions` get superseded
   by the new `.popup-sidebar` on desktop, so hide them in that breakpoint
   to avoid duplicate CTAs. The internal Unnanu page already does this for
   `.ui-actions-wrapper-mobile`. */
@media only screen and (min-width: 1025px) {
  .single-job-container
    .popup-wrapper
    .popup-content
    .result-card-ui-actions {
    display: none;
  }
}
@media only screen and (min-width: 1025px) {
  .single-job-container
    .popup-wrapper
    .popup-content
    .ui-actions-wrapper-mobile {
    margin-top: 20px;
  }
  .single-job-container
    .popup-wrapper
    .popup-content
    .ui-actions-wrapper-mobile
    button.apply-button {
    width: 100%;
  }
}
@media only screen and (min-width: 1025px) {
  .single-job-container
    .popup-wrapper
    .popup-content
    .ui-actions-wrapper-mobile {
    display: none;
  }
}
.single-job-container
  .popup-wrapper
  .popup-content
  .ui-actions-wrapper-mobile
  .widget
  .widget-share
  .widget-share-mobile-header {
  margin-top: 20px;
  padding-top: 22px;
  padding-bottom: 19px;
  border-top: solid 0.6px rgba(0, 0, 0, 0.12);
  border-bottom: solid 0.6px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
}
.single-job-container
  .popup-wrapper
  .popup-content
  .ui-actions-wrapper-mobile
  .widget
  .widget-share
  .share-title-mobile {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #222222;
}
.single-job-container
  .popup-wrapper
  .popup-content
  .ui-actions-wrapper-mobile
  .widget
  .widget-share
  .share-platforms {
  width: 167px;
}
.single-job-container
  .popup-wrapper
  .popup-content
  .ui-actions-wrapper-mobile
  .widget
  .widget-share
  .share-url {
  padding-bottom: 20px;
  border-bottom: solid 0.6px rgba(0, 0, 0, 0.12);
}

@-webkit-keyframes rotateSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.load-more-preloader {
  padding: 10px;
}

.preloader-icon {
  -webkit-animation: rotateSpinner 1.2s linear infinite;
  animation: 1.2s linear 0s normal none infinite running rotateSpinner;
  background-color: transparent;
  background-image: url("../../assets/img/icon-preload-gray.png");
  background-repeat: repeat;
  background-position: 100% 75%;
  background-size: cover;
  display: inline-block;
  height: 24px;
  width: 24px;
}

.mobile-menu .navbar-nav li.nav-item a.nav-link {
  color: #fff;
}

.mobile-menu .navbar-nav li.nav-item.active a.nav-link {
  color: #ffffff;
}

.mobile-menu ul {
  margin-bottom: 15px;
}
.navbar-dark .navbar-toggler {
  border-color: rgb(0 0 0) !important;
}
.navbar-dark .navbar-toggler-icon {
  filter: invert(1);
}
.mobile-menu .mobile-download-app-ui {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
  padding-top: 14px;
  border-top: solid 1px rgba(255, 255, 255, 0.2);
  object-fit: contain;
  background-image: radial-gradient(circle at 50% 0, #3475cb, #2d69ce);
  height: 121px;
  margin-bottom: 20px;
}
.mobile-menu .mobile-download-app-ui .download-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.4px;
  text-align: center;
  color: #ffffff;
}
.mobile-menu .mobile-download-app-ui .download-link {
  position: absolute;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
}

.guest-user-navigation,
.logged-in-user-navigation {
  transition: margin-top 0.2s;
  max-width: 1140px;
}

header.app-header
  .guest-user-navigation
  nav
  ul.navbar-nav
  li.nav-item
  a.nav-link {
  color: #89b5ff;
}

header.app-header
  .guest-user-navigation
  nav
  ul.navbar-nav
  li.nav-item.active
  a.nav-link {
  color: #ffffff;
}

.mobile-search-keyword-suggestions {
  padding: 0 15px 10px;
  background-color: #f4f4f4;
  width: 100%;
  height: calc(100vh - 236px);
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
  overflow-y: auto;
}
@media only screen and (min-width: 769px) {
  .mobile-search-keyword-suggestions {
    height: 100vh;
  }
}
.mobile-search-keyword-suggestions .suggestions-empty {
  padding-top: 124px;
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.4px;
  text-align: center;
  color: #595959;
}
.mobile-search-keyword-suggestions .suggestions-header {
  margin-bottom: 9px;
  line-height: 50px;
  height: 50px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}
.mobile-search-keyword-suggestions .suggestions-header .header-icon {
  margin-right: 15px;
}
.mobile-search-keyword-suggestions .suggestions-header .currently-typing {
  font-size: 16px;
  letter-spacing: 0.4px;
  color: #266adc;
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mobile-search-keyword-suggestions .suggestions-no-matches {
  cursor: pointer;
  color: #266adc;
  line-height: 50px;
  height: 50px;
}
.mobile-search-keyword-suggestions .suggestions-result-group .group-title {
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #595959;
}
.mobile-search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list {
  list-style: none;
  padding: 0;
}
.mobile-search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list
  li {
  padding-left: 34px;
  font-size: 16px;
  letter-spacing: 0.4px;
  margin-bottom: 15px;
  color: #266adc;
  cursor: pointer;
}
.mobile-search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list
  li
  svg {
  margin-right: 14px;
  margin-left: -34px;
}

body {
  font-family: "Lato", sans-serif;
  background-color: #ededed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.modal-open {
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  body.modal-open .jobs-container {
    display: none;
  }
  header.app-header .search-wrapper .keyword-search-box:after {
    display: none;
  }
  .single-job-container .popup-wrapper .popup-content {
    width: 100%;
  }
  header.app-header .search-wrapper .keyword-search-box {
    border-radius: 5px !important;
  }
  header.app-header .search-wrapper .location-search-box {
    border-radius: 5px !important;
  }
}

/* .viewport {
  padding-top: 70px; } */

footer.footer {
  line-height: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #595959;
  padding-top: 20px;
  padding-bottom: 30px;
}
@media only screen and (max-width: 1024px) {
  footer.footer {
    display: none;
  }
}
footer.footer a {
  color: #595959;
}
footer.footer .single-job-footer-container {
  max-width: 945px;
}

header.app-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  background-color: #ffffff;
  /* show only a narrow horizontal band of the banner behind the search */
  background-image: url("/legacy/banners/header-background.webp");
  background-repeat: no-repeat;
  /* make the image span the full header width but show a slightly taller band */
  background-size: cover; /* width 100%, height 200px */
  background-position: center 100px; /* vertical offset to center the search area */
  /* create space for nav + search band */
}

/* Logged-in listing hero banner — Figma 2901:1492. Wide office-team photo
   sitting between the top nav (LoggedIn) and the source-tile bar (Filters).
   Asset is the Figma-baked photo with the brand-blue wash already applied,
   so we just size + crop it; no CSS tint overlay needed. Source aspect is
   ~8.6:1 (2880x334); the CSS height is tuned so `cover` shows the photo
   edge-to-edge without surrounding whitespace. */
.app-header .listing-hero-banner {
  position: relative;
  width: 100%;
  height: 140px;
  background-image: url("/legacy/banners/listing-hero-banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 768px) {
  .app-header .listing-hero-banner {
    height: 90px;
  }
}

/* "Showing N <Source> Results" header above the card list, desktop only —
   the mobile filter tab already shows the count via `.result-header-
   mobile-tab`. Figma 2901:1492. */
.results-count-desktop {
  display: none;
  margin: 0 0 12px 0;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  letter-spacing: 0.4px;
}
@media (min-width: 769px) {
  .results-count-desktop {
    display: block;
  }
}

/* "Share this role" widget on the external job modal — Figma 4309:818
   sidebar block. 4 social platforms + copy-link as round outlined icon
   buttons in a horizontal row. */
.share-this-role .widget-title {
  display: block;
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #266adc;
  letter-spacing: 0.4px;
}
.share-this-role .share-platforms {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.share-this-role .share-platforms .platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #ffffff;
  color: #777;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.share-this-role .share-platforms .platform-button:hover {
  background-color: #f6f8ff;
  text-decoration: none;
}
.share-this-role .share-platforms .platform-button svg {
  width: 14px;
  height: 14px;
}
@media only screen and (min-width: 1025px) {
  header.app-header {
    box-shadow: 0 2px 2px 0 rgba(207, 199, 199, 0.5);
  }
}
header.app-header nav {
  height: 100px;
  color: #89b5ff;
}
header.app-header nav .navbar-brand {
  margin-right: 25px;
}
header.app-header nav a {
  font-size: 15px;
}
header.app-header nav a:hover {
  color: #266adc;
}

/* make the nav bar look like a white strip on top of the banner */
header.app-header .guest-user-navigation nav,
header.app-header .logged-in-user-navigation nav {
  background-color: #ffffff;
  box-shadow: none;
}
header.app-header .guest-user-navigation nav a.nav-link,
header.app-header .guest-user-navigation nav .login-link,
header.app-header .guest-user-navigation nav .signup-button {
  color: #222222;
}
header.app-header nav ul.navbar-nav li.nav-item {
  position: relative;
}
header.app-header nav ul.navbar-nav li.nav-item .notifications {
  position: absolute;
  top: 3px;
  right: 0;
  min-width: 18px;
  background-color: #ff4c40;
  font-size: 10px;
  text-shadow: none;
  display: inline;
  padding: 4px;
  border-radius: 100%;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
header.app-header nav ul.navbar-nav li.nav-item a.nav-link {
  color: #ffffff;
  padding-left: 25px;
  padding-right: 25px;
  letter-spacing: 0.4px;
}
header.app-header nav ul.navbar-nav li.nav-item a.nav-link:hover {
  color: #ffffff;
}
header.app-header nav ul.navbar-nav li.nav-item.nav-item-profile svg,
header.app-header nav ul.navbar-nav li.nav-item.nav-item-messages svg,
header.app-header nav ul.navbar-nav li.nav-item.nav-item-interviews svg,
header.app-header nav ul.navbar-nav li.nav-item.nav-item-offers svg {
  margin-right: 6px;
  margin-top: -4px;
}
header.app-header nav ul.navbar-nav li.nav-item.nav-item-find-jobs svg {
  margin-top: -3px;
  margin-right: 5px;
}
header.app-header nav ul.navbar-nav li.nav-item.nav-item-profile.active svg g,
header.app-header nav ul.navbar-nav li.nav-item.nav-item-messages.active svg g,
header.app-header
  nav
  ul.navbar-nav
  li.nav-item.nav-item-interviews.active
  svg
  g {
  fill: #266adc;
}
header.app-header
  nav
  ul.navbar-nav
  li.nav-item.nav-item-offers.active
  svg
  path {
  fill: #266adc;
}
header.app-header nav ul.navbar-nav li.nav-item.active a.nav-link {
  color: #ffffff;
}
header.app-header nav ul.navbar-nav.user-navbar-nav li.nav-item {
  margin-left: 15px;
  margin-right: 15px;
}
header.app-header nav ul.navbar-nav.user-navbar-nav li.nav-item a.nav-link {
  color: #000;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
}
header.app-header
  nav
  ul.navbar-nav.user-navbar-nav
  li.nav-item.active
  a.nav-link {
  color: #266adc;
  border-radius: 5px;
  background-color: #ffffff;
}
header.app-header nav ul.navbar-nav.user-navbar-nav li.nav-item a.nav-link img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-top: 3px;
}
.user-account-menu-name {
  margin-right: 7px;
}
header.app-header nav .navbar-brand img {
  max-width: 143px;
  width: 100%;
}
header.app-header nav .user-menu-right {
  min-width: 115px;
  align-items: center;
}
header.app-header nav .user-menu-right a.nav-link {
  cursor: pointer;
  color: #89b5ff;
  padding-right: 50px;
}
header.app-header nav .user-menu-right a.nav-link:hover {
  color: #ffffff;
}
header.app-header nav .user-menu-right .user-profile button.profile-button {
  padding: 0;
  width: 45%;
  height: 45px;
  border-radius: 100%;
  border: solid 2px #ffffff;
  overflow: hidden;
}
header.app-header nav .user-menu-right .user-profile button.profile-button svg {
  width: 45px;
  height: 45px;
}
header.app-header nav .user-menu-right .user-profile button.profile-button img {
  width: 100%;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  button.profile-button
  .user-menu-profile-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  button.profile-button
  video {
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
}
header.app-header nav .user-menu-right .user-profile .user-account-menu {
  padding-top: 0;
  margin-top: 10px;
  width: 173px;
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
  background-color: #ffffff;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .dropdown-item {
  padding: 7px 16px;
  color: #595959;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .dropdown-item:hover {
  color: #595959;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .dropdown-item.unnanu-pro {
  color: #266adc;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .user-account-menu-hr {
  margin: 9px 16px;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .user-account-menu-header {
  width: 100%;
  float: left;
  border-radius: 1px;
  margin-bottom: 9px;
  background-color: #f3f3f3;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .user-account-menu-header
  .user-account-menu-profile {
  float: left;
  margin: 15px 10px 15px 16px;
  width: 42px;
  height: 42px;
  border: solid 2.6px #ffffff;
  border-radius: 42px;
  object-fit: cover;
}
header.app-header
  nav
  .user-menu-right
  .user-profile
  .user-account-menu
  .user-account-menu-header
  .user-account-menu-name {
  margin-top: 19px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: #222222;
}
header.app-header .search-container {
  max-width: 692px;
}
@media only screen and (min-width: 768px) {
  header.app-header .search-container {
    padding: 0;
  }
}
@media only screen and (min-width: 1025px) {
  header.app-header .search-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
header.app-header .search-wrapper {
  padding: 92px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
header.app-header .search-wrapper .cancel-search-mobile {
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
}
@media only screen and (min-width: 769px) {
  header.app-header .search-wrapper .cancel-search-mobile {
    display: none;
  }
}
header.app-header .search-wrapper .keyword-search-box button svg,
header.app-header .search-wrapper .location-search-box button svg {
  margin-top: -3px;
  vertical-align: middle;
}
header.app-header .search-wrapper .keyword-search-box.has-keyword,
header.app-header .search-wrapper .location-search-box.has-keyword {
  background-color: #ffffff;
}
header.app-header .search-wrapper .keyword-search-box.typing-keyword,
header.app-header .search-wrapper .location-search-box.typing-keyword {
  background-color: #ffffff;
}
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .keyword-input,
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .location-input,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .keyword-input,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .location-input {
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .search-icon-black,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .search-icon-black {
  display: block;
}
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .search-icon-white,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .search-icon-white {
  display: none;
}
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .location-icon-black,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .location-icon-black {
  display: block;
}
header.app-header
  .search-wrapper
  .keyword-search-box.typing-keyword
  .location-icon-white,
header.app-header
  .search-wrapper
  .location-search-box.typing-keyword
  .location-icon-white {
  display: none;
}
header.app-header .search-wrapper .keyword-search-box button,
header.app-header .search-wrapper .keyword-search-box input,
header.app-header .search-wrapper .location-search-box button,
header.app-header .search-wrapper .location-search-box input {
  height: 65px;
}
header.app-header .search-wrapper .keyword-search-box button:focus,
header.app-header .search-wrapper .keyword-search-box input:focus,
header.app-header .search-wrapper .location-search-box button:focus,
header.app-header .search-wrapper .location-search-box input:focus {
  outline: 0;
  box-shadow: none;
}
header.app-header .search-wrapper .keyword-search-box #keyword-search-button,
header.app-header .search-wrapper .keyword-search-box #location-search-button,
header.app-header .search-wrapper .location-search-box #keyword-search-button,
header.app-header .search-wrapper .location-search-box #location-search-button {
  padding-left: 12px;
  padding-right: 0;
  width: 36px;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  #keyword-search-button:hover,
header.app-header
  .search-wrapper
  .keyword-search-box
  #location-search-button:hover,
header.app-header
  .search-wrapper
  .location-search-box
  #keyword-search-button:hover,
header.app-header
  .search-wrapper
  .location-search-box
  #location-search-button:hover {
  background-color: transparent;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  #keyword-search-button
  img,
header.app-header
  .search-wrapper
  .keyword-search-box
  #location-search-button
  img,
header.app-header
  .search-wrapper
  .location-search-box
  #keyword-search-button
  img,
header.app-header
  .search-wrapper
  .location-search-box
  #location-search-button
  img {
  margin-top: -5px;
  filter: brightness(0) saturate(100%) invert(31%) sepia(66%) saturate(1411%)
    hue-rotate(216deg) brightness(99%) contrast(101%);
}
header.app-header .search-wrapper .keyword-search-box .keyword-input,
header.app-header .search-wrapper .keyword-search-box .location-input,
header.app-header .search-wrapper .location-search-box .keyword-input,
header.app-header .search-wrapper .location-search-box .location-input {
  padding-left: 11px;
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input::placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input::placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input::placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input::placeholder {
  color: #3a3333;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input:-moz-placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input:-moz-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input:-moz-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input:-moz-placeholder {
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input::-moz-placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input::-moz-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input::-moz-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input::-moz-placeholder {
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input:-ms-input-placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input:-ms-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input:-ms-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input:-ms-input-placeholder {
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input::-ms-input-placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input::-ms-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input::-ms-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input::-ms-input-placeholder {
  color: #222222;
}
header.app-header
  .search-wrapper
  .keyword-search-box
  .keyword-input::-webkit-input-placeholder,
header.app-header
  .search-wrapper
  .keyword-search-box
  .location-input::-webkit-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .keyword-input::-webkit-input-placeholder,
header.app-header
  .search-wrapper
  .location-search-box
  .location-input::-webkit-input-placeholder {
  color: #222222;
}
header.app-header .search-wrapper .keyword-search-box .search-icon-black,
header.app-header .search-wrapper .location-search-box .search-icon-black {
  margin: 0 !important;
  display: none;
}
header.app-header .search-wrapper .keyword-search-box .location-icon-black,
header.app-header .search-wrapper .location-search-box .location-icon-black {
  margin: 0 !important;
  display: none;
}
header.app-header .search-wrapper .keyword-search-box {
  width: 100%;
  background-color: #ffffff;
  flex: 0 0 auto;
  border-radius: 5px 0 0 5px;
}
.input-group-append .btn.find-jobs-btn {
  height: 53px !important;
  width: 113px !important;
  margin: auto 7px;
  border-radius: 7px;
  background-color: #266adc;
}
header.app-header .search-wrapper .keyword-search-box {
  position: relative;
}
header.app-header .search-wrapper .keyword-search-box:after {
  position: absolute;
  content: "";
  right: 0;
  top: 17px;
  height: 31px;
  width: 1px;
  background-color: #b4b3b3;
}
@media only screen and (min-width: 769px) {
  header.app-header .search-wrapper .keyword-search-box {
    width: 320px;
    flex: 0 0 320px;
  }
}
header.app-header .search-wrapper .location-search-box {
  width: 100%;
  margin-top: 10px;
  background-color: #ffffff;
  flex: 0 0 auto;
  border-radius: 0 5px 5px 0;
}
@media only screen and (min-width: 769px) {
  header.app-header .search-wrapper .location-search-box {
    margin-top: 0;
    margin-left: 0;
    width: 380px;
    flex: 0 0 380px;
  }
}
header.app-header .search-wrapper .find-jobs-btn {
  padding: 10px 20px;
  height: 44px;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop.reset
  .filter-item-button {
  box-shadow: 0 1px 3px 0 rgba(168, 168, 168, 0.12);
  border: solid 1px #266adc;
  padding: 14px 22px;
  border-radius: 25px;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .filter-item-button.dropdown-toggle::before {
  content: "";
  top: 12px;
  right: -12px;
  background-color: #ffffff00;
  border-left: 2px solid #000 !important;
  border: 0;
  width: 0.39em;
  height: 0.36em;
  transform: rotate(315deg);
  position: absolute;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .filter-item-button.dropdown-toggle::after {
  position: absolute;
  content: "";
  top: 12px;
  right: -12px;
  background-color: #ffffff00;
  border-right: 2px solid #000 !important;
  border: 0;
  width: 0.39em;
  height: 0.36em;
  margin: 0;
  transform: rotate(45deg);
}
@media only screen and (min-width: 769px) {
  header.app-header .search-wrapper .find-jobs-btn {
    width: auto;
    flex: 0 0 auto;
  }
}
header.app-header .search-wrapper .find-jobs-btn:hover {
  background-color: #2563d9;
}
header.app-header .search-wrapper .find-jobs-btn:focus {
  outline: 0;
  box-shadow: none;
}

.find-jobs-filters {
  width: 100%;
  font-size: 14px;
  color: #222222;
  height: 41px;
  /* Figma 2901:1102: filter strip bg is #FBFBFB (off-white), not pure white.
     A subtle 3px shadow sits below to lift it off the page bg. */
  background-color: #fbfbfb;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.16);
}
/* The right sidebar (logged-in) used to be a single big white card with all
   the widgets stacked inside. Per QA we now want two visually-distinct
   widget cards (Saved <Source> Jobs + Upload Resume CTA) with breathing
   room between them. The container is transparent and stacks its
   children vertically with a gap; each child gets the white-card chrome. */
.right-sidebar.right-sidebar-logged {
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  top: 150px !important;
}
.right-sidebar.right-sidebar-logged > .widget,
.right-sidebar.right-sidebar-logged > .unnanu-sidebar-cta {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.job-logged-in {
  display: flex;
}
.job-logged-in .company-logo {
  flex-basis: 25%;
}
.job-logged-in .job-texts {
  flex-basis: 70%;
  margin-left: 5%;
}

.filters-container.row.mx-auto.logged-in-layout {
  max-width: 580px;
}
@media (max-width: 769px) {
  .filters-container.row.mx-auto.logged-in-layout {
    max-width: 100%;
  }
}
@media only screen and (min-width: 769px) {
  .find-jobs-filters {
    padding: 15px 12px;
    height: 76px;
    display: flex;
    background-color: #f7f7f7;
    box-shadow: 0 2px 2px 0 rgba(207, 199, 199, 0.5);
  }
}
@media only screen and (min-width: 769px) {
  .find-jobs-filters .filters-container {
    width: 768px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* Bootstrap 5 changed `.row > *` to force `width: 100%; max-width: 100%`
   plus horizontal padding via `--bs-gutter-x` on every direct child of
   `.row`. Bootstrap 4 only applied that to `.col-*` children. The
   `.filters-container` uses `row` only for its flex container reset and
   the source pills inside aren't `.col-*` — under v5 the new default
   makes each pill take the full row and pushes its siblings off the
   visible 580px max-width container, which is why only the first
   one or two are visible on a logged-in header. Restore v4-style
   defaults for this specific container's direct children. */
.find-jobs-filters .filters-container.row > * {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  .input-group-append .btn.find-jobs-btn {
    height: 38px !important;
    line-height: 1;
  }
  .jobs-container .results-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .mobile-filters-ui .filters-list-wrapper .filter-name {
    text-align: center;
  }
}
.find-jobs-filters .filters-container .filters-control-mobile-tab {
  padding: 0 15px;
  line-height: 41px;
  font-size: 14px;
  width: 100%;
  background-color: #fff;
}
.find-jobs-filters
  .filters-container
  .filters-control-mobile-tab
  .result-header-mobile-tab {
  color: #222222;
}
.find-jobs-filters
  .filters-container
  .filters-control-mobile-tab
  .filters-button-mobile-tab {
  height: 41px;
  font-size: 14px;
  color: #266adc;
  border: none;
  box-shadow: none;
  background: none;
  padding: 0;
}
@media only screen and (min-width: 769px) {
  .find-jobs-filters .filters-container {
    width: 100%;
    max-width: 1140px;
  }
}
@media only screen and (min-width: 769px) {
  .find-jobs-filters .filters-container .filters-control-mobile-tab {
    display: none;
  }
}
.find-jobs-filters .filters-container .filter-item-desktop {
  margin-right: 45px;
  display: none;
}
@media (max-width: 1024px) {
  .find-jobs-filters .filters-container .filter-item-desktop {
    margin-right: 20px;
  }
  .find-jobs-filters .filters-container .jobs-for-you-btn {
    width: 140px !important;
    font-size: 14px !important;
  }
}
@media only screen and (min-width: 769px) {
  .find-jobs-filters .filters-container .filter-item-desktop {
    display: block;
  }
}
.find-jobs-filters .filters-container .filter-item-desktop:last-child {
  margin-right: 0;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-toggle::after {
  vertical-align: 0.155em;
}
.find-jobs-filters .filters-container .filter-item-desktop .filter-item-button {
  font-size: 16px;
  font-weight: bold;
  /* QA row 9 / Figma 2901:1102: chip labels render Title Case ("Closing
     Anytime", "All Job Types") even though the underlying filter value
     strings stay lowercase ("Closing anytime", "All job types"). The
     filter-value strings are used as map keys + URL params throughout
     the codebase, so we capitalize at the display layer instead. */
  text-transform: capitalize;
  border-radius: 16px;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  line-height: 1;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .filter-item-button
  .jobs-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 21px;
  height: 21px;
  line-height: 21px;
  border-radius: 10.5px;
  background-color: #d62727;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 0 6px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Figma 2901:1492 source-tab strip — when logged in, every source button is
   a 44×44 white circle with a 1px #F1EFEF border and a soft drop shadow.
   The active source ring inherits the inline ACTIVE_SOURCE_STYLE override. */
.find-jobs-filters
  .filters-container.logged-in-layout
  .filter-item-desktop
  .filter-item-button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #f1efef;
  border-radius: 50%;
  box-shadow: 0 0 8.4px 0 rgba(0, 0, 0, 0.09);
}
.find-jobs-filters
  .filters-container.logged-in-layout
  .filter-item-desktop
  .filter-item-button
  svg {
  width: 22px;
  height: 22px;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .filter-item-button.has-border {
  box-shadow: 0 1px 3px 0 rgba(168, 168, 168, 0.12);
  border: solid 1px #e6e6e6;
}

/* Jobs For You button styling */
.find-jobs-filters .filters-container .jobs-for-you-btn {
  width: 170px;
  height: auto;
  border-radius: 16px;
  padding: 12px 15px;
  font-size: 16px;
  border: 1px solid #daa108;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 991px) {
  .find-jobs-filters
    .filters-container
    .filter-item-desktop
    .filter-item-button {
    padding: 5px 7px;
    font-size: 14px;
  }
  .find-jobs-filters .filters-container .filter-item-desktop svg {
    width: 17px;
    height: 17px;
  }
}
/* .find-jobs-filters .filters-container .filter-item-desktop .filter-item-button:hover {
      background-color: #f5f5f5;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
      .find-jobs-filters .filters-container .filter-item-desktop .filter-item-button:hover .jobs-count {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } */
/* .find-jobs-filters .filters-container .filter-item-desktop .filter-item-button:hover svg {
        transform: scale(1.05); } */
/* .find-jobs-filters .filters-container .filter-item-desktop.show .filter-item-button {
      background-color: #eeeeee; } */
.find-jobs-filters .filters-container .filter-item-desktop .dropdown-menu {
  padding: 9px 0;
  min-width: max-content;
  width: max-content;
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
  background-color: #ffffff;
}
.find-jobs-filters .filters-container .filter-item-desktop .dropdown-menu.show {
  margin-top: 11px;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu.dropdown-salary-estimates {
  padding-top: 15px;
  min-width: 197px;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .range-toggle {
  height: 42px;
  text-align: center;
  margin: 0 15px 5px;
  padding: 0 0 12px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .range-toggle
  .range-toggle-option {
  cursor: pointer;
  width: 50%;
  line-height: 29px;
  float: left;
  height: 30px;
  font-size: 13px;
  color: #369eff;
  border: solid 0.6px #3f7de4;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .range-toggle
  .range-toggle-option.active {
  color: #ffffff;
  background-color: #369eff;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item {
  padding: 6px 15px;
  height: 31px;
  font-size: 14px;
  letter-spacing: 0.4px;
  line-height: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item:active {
  color: #fff;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item:active
  .filter-property-count {
  color: #fff;
  border-color: #fff;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item
  .filter-property-count {
  margin-left: 27px;
  min-width: 25px;
  height: 19px;
  line-height: 19px;
  border-radius: 1px;
  color: #3f7de4;
  border: solid 1px #3f7de4;
  letter-spacing: 0.4px;
  font-size: 12px;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item.no-data {
  cursor: default;
  color: #dcdcdc;
}
.find-jobs-filters
  .filters-container
  .filter-item-desktop
  .dropdown-menu
  .dropdown-item.no-data
  .filter-property-count {
  border: solid 1px #dcdcdc;
  color: #dcdcdc;
}
.find-jobs-filters .filters-container .filter-item-desktop .filter-label {
  vertical-align: middle;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #222222;
  line-height: 32px;
  height: 32px;
  margin-right: 4px;
}
.find-jobs-filters .filters-container .filter-item-desktop svg {
  width: 21px;
  height: 21px;
  transition: transform 0.2s ease;
}

.jobs-container.container {
  margin-top: 440px;
}
/* Logged-in `.app-header` is `position: fixed` and stacks nav (100px) +
   listing-hero-banner (140px) + find-jobs-filters (76px) = 316px. Set the
   container margin to the exact fixed-header height so the first card
   sits flush below the filter tabs (no light-blue gap) without colliding
   with the fixed chrome. */
.jobs-container.container.logged-in {
  margin-top: 316px;
  padding-top: 24px;
}
@media only screen and (max-width: 768px) {
  .jobs-container.has-search-result {
    margin-top: 207px;
  }
  header.app-header .search-wrapper .keyword-search-box button,
  header.app-header .search-wrapper .keyword-search-box input,
  header.app-header .search-wrapper .location-search-box button,
  header.app-header .search-wrapper .location-search-box input {
    height: 45px;
  }
  header.app-header .search-wrapper {
    padding: 60px 0px;
    flex-wrap: wrap;
  }
  .jobs-container.container {
    margin-top: 380px;
  }
  /* Mobile: nav (100) + listing-hero-banner (90px @ ≤768px) +
     filters (~41px) = 231. */
  .jobs-container.logged-in {
    margin-top: 231px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .jobs-container {
    padding: 0;
  }
  .jobs-container .jobs-row-wrap,
  .jobs-container .results-section {
    padding: 0;
  }
}
@media only screen and (min-width: 1025px) {
  .jobs-container {
    max-width: 1140px;
  }
}
.jobs-container .left-sidebar {
  margin-top: 5px;
  margin-bottom: 25px;
  /* Match the right-sidebar widget card sizing
     (`.right-sidebar.right-sidebar-logged > .widget`) so the Applied
     Jobs widget on the left and the Saved Jobs widget on the right
     render as identically sized cards. */
  -ms-flex: 0 0 240px;
  flex: 0 0 240px;
  max-width: 240px;
  width: 240px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  height: max-content;
}
@media only screen and (max-width: 1024px) {
  .jobs-container .left-sidebar {
    display: none;
  }
}
.jobs-container .results-section {
  flex: 1;
  width: 100%;
}
@media only screen and (min-width: 1025px) {
  .jobs-container .results-section {
    padding: 0 17px;
    overflow-x: auto;
  }
}
.jobs-container .results-section .results-empty {
  margin-top: 46px;
}
@media only screen and (max-width: 768px) {
  .jobs-container .results-section .results-empty {
    padding: 0 20px;
  }
}
.jobs-container .results-section .results-empty .results-empty-icon {
  margin-bottom: 25px;
}
.jobs-container .results-section .results-empty .results-empty-title {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: 0.4px;
  color: #222222;
  margin-bottom: 10px;
}
.jobs-container .results-section .results-empty .results-empty-title strong {
  font-weight: bold;
}
.jobs-container .results-section .results-empty .results-empty-suggestions {
  margin-bottom: 15px;
}
.jobs-container .results-section .results-empty .results-empty-suggestions p {
  margin-bottom: 0;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #595959;
  position: relative;
  padding-left: 20px;
}
.jobs-container
  .results-section
  .results-empty
  .results-empty-suggestions
  p::before {
  content: "•";
  font-size: 14px;
  position: absolute;
  left: 0;
}
.jobs-container .results-section .results-empty .results-empty-suggestions li {
  margin-left: 15px;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #595959;
}
.jobs-container .right-sidebar {
  top: 370px;
  align-self: flex-start;
  margin-top: 5px;
  -ms-flex: 0 0 240px;
  flex: 0 0 240px;
  max-width: 240px;
  width: 240px;
}
@media only screen and (max-width: 1024px) {
  .jobs-container .right-sidebar {
    display: none;
  }
}
.jobs-container .right-sidebar .unnanu-links {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #595959;
}
.jobs-container .right-sidebar .unnanu-links a {
  color: #595959;
}
.jobs-container .right-sidebar .copyright-text {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #595959;
}

.widget .widget-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #222222;
  text-align: center;
  width: 100%;
}

/* Figma row 23/25: blue text link, Noto Sans 15/400, no background. */
.widget .widget-view-all {
  display: block;
  margin: 12px auto 0 auto;
  padding: 4px 8px;
  background: none;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #266adc;
  cursor: pointer;
  text-align: center;
}
.widget .widget-view-all:hover {
  text-decoration: underline;
}
.widget .widget-view-all:focus-visible {
  text-decoration: underline;
}

/* The legacy `.widget-job` rule sets `display: inline-block` and then puts
   `flex-basis` on its children — which silently does nothing without a flex
   parent. Override to flex so the logo + texts lay out side-by-side. */
.widget .widget-list.widget-jobs-list .widget-job {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.widget .widget-list.widget-jobs-list .widget-job:last-child {
  margin-bottom: 0;
}
.widget .widget-list.widget-jobs-list .widget-job:after {
  display: none !important;
  border-bottom: 0 !important;
  margin-top: 0 !important;
  content: none !important;
}
.widget .widget-list.widget-jobs-list .widget-job .company-logo {
  flex: 0 0 40px;
  margin-right: 0;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts {
  flex: 1 1 auto;
  min-width: 0;
}
.widget .widget-list.widget-jobs-list .widget-job .widget-job-bookmark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 4px;
  background: none;
  border: 0;
  cursor: pointer;
}
.widget .widget-list.widget-jobs-list .widget-job .widget-job-bookmark img {
  width: 16px;
  height: 16px;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .job-title {
  display: -webkit-box;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .company-name {
  display: -webkit-box;
}

.widget .widget-list.widget-jobs-list {
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.widget .widget-list.widget-jobs-list .empty-text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #595959;
}
.widget .widget-list.widget-jobs-list .widget-job {
  width: 100%;
  min-height: unset;
  border-radius: 8px;
  margin-bottom: 6px;
  display: inline-block;
}

.widget .widget-list.widget-jobs-list .widget-job > a:hover {
  text-decoration: none;
}
.widget .widget-list.widget-jobs-list .widget-job .company-logo {
  display: inline-block;
  flex: 0 0 40px;
  width: 40px;
  margin-right: 10px;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts {
  flex: 1;
  min-width: 0;
}
.widget .widget-list.widget-jobs-list .widget-job .company-logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
}
/* .widget .widget-list.widget-jobs-list .widget-job .job-texts {
      position: relative; } */
.widget .widget-list.widget-jobs-list .widget-job:after {
  margin-top: 16px;
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
  left: 0;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .job-title {
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #266adc;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .company-name {
  font-size: 13px;
  height: 17px;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.4px;
  color: #595959;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.widget .widget-list.widget-jobs-list .view-all-btn {
  margin-top: 5px;
}
.widget .widget-list.widget-jobs-list.empty {
  padding: 20px 13px;
  border-radius: 1px;
  background-color: #f4f4f4;
}

.widget .widget-share .share-platforms {
  display: flex;
  justify-content: space-between;
}
.widget .widget-share .share-platforms .platform-button,
.widget .widget-share .share-platforms button {
  border: 1px solid #e2e8f0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget .widget-share .share-platforms svg {
  width: 13px;
  height: 13px;
}
.widget .widget-share .share-url {
  border-radius: 1px;
  overflow: hidden;
}
.widget .widget-share .share-url input.form-control {
  font-size: 14px;
  color: #222222;
  border-radius: 0;
  height: 33px;
  border: solid 0.8px rgba(0, 0, 0, 0.12);
  background-color: #eaeaea;
}
.widget .widget-share .share-url button.btn {
  border-radius: 0;
  height: 33px;
  width: 33px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  padding: 0;
  margin: 0;
}

.widget-disabled {
  opacity: 0.5;
}

.results-header {
  font-size: 18px;
  padding-bottom: 18px;
  letter-spacing: 0.4px;
  color: #222222;
  margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .results-header {
    display: none;
  }
}
.results-header .loading {
  width: 224px;
  height: 14px;
  border-radius: 1px;
  background-color: #dcdcdc;
}

.result-card {
  padding: 15px;
  background-color: #ffffff;
  /* Figma 2901:1492: card radius is 15px, not 10px. */
  border-radius: 15px;
  /* Figma: shadow rgba(0,0,0,0.03) blur=8.6 — softer than the legacy gray. */
  box-shadow: 0 0 8.6px 0 rgba(0, 0, 0, 0.03);
  position: relative;
  margin-bottom: 15px;
}
@media only screen and (min-width: 1025px) {
  .result-card {
    padding: 20px;
  }
}
.result-card .delete-job-wrapper {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  margin: 2px;
  cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  .result-card .job-score-wrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
  }
}
@media only screen and (min-width: 1025px) {
  .result-card .job-score-wrapper {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
}
.result-card .result-company-logo {
  float: left;
  margin-right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
}
@media only screen and (min-width: 1025px) {
  .result-card .result-company-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }
}
.result-card .result-company-logo img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
}
.result-card .card-text-content .result-card-header .job-title a {
  color: inherit;
  text-decoration: none;
}
.result-card .job-company-location {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.result-card .job-company-location img {
  width: 18px;
  margin-right: 4px;
}
.result-card .job-company-location svg {
  margin-right: 4px;
}
/* @media only screen and (min-width: 1025px) {
    .result-card .card-text-content {
      margin-left: 63px; } } */
@media only screen and (min-width: 1025px) {
  .result-card .card-text-content .result-card-header {
    min-height: unset;
  }
}
.result-card .card-text-content .result-card-header .result-card-description {
  color: #222222;
}
/* Figma 2901:1492: source badge sits at the top-right of each card next
   to the title — was rendering stacked under the title. Flexbox on the
   header pushes the title left and the badge to the right edge. */
.result-card .card-text-content .result-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.result-card .card-text-content .result-card-header .job-title {
  min-width: 0;
}
.result-card .card-text-content .result-card-header .job-source-badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.result-card .card-text-content .result-card-header .job-source-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.result-card .card-text-content .result-card-header .job-title {
  cursor: pointer;
  /* Figma 2901:1492: title is Noto Sans 500 / 20px / lh=23. Color
     darkened from #266ADC to #1E54AF for WCAG AA contrast (5.5:1). */
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0.4px;
  color: #1e54af;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media only screen and (min-width: 1025px) {
  .result-card .card-text-content .result-card-header .job-title {
    max-width: 215px;
  }
}
@media only screen and (min-width: 1110px) {
  .result-card .card-text-content .result-card-header .job-title {
    max-width: 320px;
  }
}
.result-card .card-text-content .result-card-header .job-location-salary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.result-card .card-text-content .result-card-header .job-company-location {
  /* Figma: location/company line is Noto Sans 600 / 16 / #000000. */
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #000000;
}
.result-card .card-text-content .result-card-header .job-company-location svg {
  margin-left: 2px;
  margin-top: 4px;
  float: left;
}
.result-card .card-text-content .result-card-header .job-company-location svg *,
.result-card .card-text-content .result-card-header .job-company-location svg {
  fill: #000000 !important;
  opacity: 1 !important;
}
.result-card .card-text-content .result-card-header .job-company-location div {
  max-width: 320px;
  margin-left: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.result-card .card-text-content .result-card-header .job-salary-range {
  /* Figma: salary line is Noto Sans 600 / 16 / #000000. */
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #000000;
}
.result-card .card-text-content .result-card-header .job-salary-range svg {
  margin-top: 3px;
  float: left;
}
.result-card .card-text-content .result-card-header .job-salary-range div {
  margin-left: 18px;
}
.result-card .card-text-content .result-card-ui-actions {
  position: absolute;
  top: 20px;
  right: 20px;
}
@media only screen and (max-width: 1024px) {
  .result-card .card-text-content .result-card-ui-actions {
    display: none;
  }
}
.result-card .card-text-content .result-card-ui-actions .save-button {
  margin-right: 10px;
}
/* Figma 2901:1492 listing card: Apply Now is solid-blue filled with
   white text, matching the default `.apply-button` style. No override
   needed — the default blue bg + white text is correct. */
.result-card .card-text-content .result-card-ui-actions .timestamp {
  margin-top: 15px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: rgba(0, 0, 0, 0.2);
  text-align: right;
}
.result-card .card-text-content .timestamp-mobile {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: #222222;
  text-align: center;
}
@media only screen and (min-width: 1025px) {
  .result-card .card-text-content .timestamp-mobile,
  .result-card .card-text-content .apply-button-mobile {
    display: none;
  }
}
.result-card .card-text-content .result-card-description {
  max-height: 72px;
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 10px;
  /* Figma: description is Noto Sans 400 / 16 / lh=23 / #323232. */
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0.4px;
  color: #323232;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media only screen and (min-width: 1025px) {
  .result-card .card-text-content .result-card-description {
    margin-bottom: 12px;
  }
}
.result-card .card-text-content .job-type-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.result-card .card-text-content .badge-full-time {
  /* Figma 2901:1492: 92×36 pill, r=18, bg #DEE8F9, border #BED5FC,
     Noto Sans 600 / 13. Color darkened from #266ADC to #1E54AF for
     WCAG AA contrast (5.5:1) on the #DEE8F9 background. */
  min-width: 92px;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background-color: #dee8f9;
  color: #1e54af;
  border: solid 1px #bed5fc;
  border-radius: 18px;
  cursor: default;
  transition: all 0.2s ease;
}
.result-card .card-text-content .badge-full-time:hover {
  background-color: #cfdef7;
}
.result-card .card-text-content .badge-urgent {
  /* Figma: idle Urgent chip — pale yellow bg with amber text. The active
     (solid #FEBA02 / black text) variant lives on `.badge-urgent.active`. */
  min-width: 92px;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background-color: #fef3e0;
  color: #ecaa13;
  border: solid 1px #fae5c2;
  border-radius: 18px;
  cursor: default;
  transition: all 0.2s ease;
}
.result-card .card-text-content .badge-urgent.active {
  background-color: #feba02;
  color: #000000;
  border-color: #e0a507;
}
.result-card .card-text-content .badge-urgent:hover {
  background-color: #fde7c2;
}
.result-card.loading {
  background: none;
  box-shadow: none;
}
.result-card.loading .result-company-logo {
  background-color: #dcdcdc;
}
.result-card.loading .card-text-content .result-card-header {
  line-height: 0;
}
.result-card.loading .card-text-content .result-card-header .job-title {
  margin: 4px 0 0;
  width: 194px;
  height: 16px;
  border-radius: 1px;
  background-color: #dcdcdc;
}
.result-card.loading
  .card-text-content
  .result-card-header
  .job-company-location {
  margin: 12px 0 0;
  width: 104px;
  height: 12px;
  border-radius: 1px;
  background-color: #dcdcdc;
}
.result-card.loading .card-text-content .result-card-header .job-salary-range {
  margin-top: 7px;
  width: 134px;
  height: 12px;
  border-radius: 1px;
  background-color: #dcdcdc;
}
.result-card.loading .card-text-content .result-card-ui-actions {
  line-height: 0;
}
.result-card.loading .card-text-content .result-card-ui-actions .timestamp {
  margin: 53px 0 0;
  width: 75px;
  height: 10px;
  border-radius: 1px;
  background-color: #dcdcdc;
}
.result-card.loading .card-text-content .result-card-description {
  margin-top: 21px;
}
.result-card.loading
  .card-text-content
  .result-card-description
  .result-loading-line {
  margin-bottom: 9px;
  width: 100%;
  height: 10px;
  border-radius: 1px;
  background-color: #dcdcdc;
}
.result-card.loading
  .card-text-content
  .result-card-description
  .result-loading-line:last-child {
  margin-bottom: 0;
}

.unnanu-hire-cta {
  width: 100%;
  padding: 20px;
  border-radius: 12px;
  background-color: #0b63d8;
  color: #ffffff;
}
.unnanu-hire-cta .unnanu-hire-cta-logo {
  background-color: #ffffff;
  /* border-radius: 10px; */
  border-radius: 15px 0 0 15px;
  padding: 8px 8px;
  display: inline-block;
  /* margin: 0 auto 12px; */
  margin: 0 0 12px 89px;
}
.unnanu-hire-cta .unnanu-hire-cta-logo img {
  display: block;
  height: 14px;
  width: auto;
}
.unnanu-hire-cta .unnanu-hire-cta-title {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 8px;
}
.unnanu-hire-cta .unnanu-hire-cta-desc {
  font-family: Lato;
  font-size: 14px;
  line-height: 1.46;
  letter-spacing: 0.2px;
  color: #ffffff;
  margin-bottom: 20px;
}
.unnanu-hire-cta .unnanu-hire-cta-button {
  width: 138px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.unnanu-hire-cta .unnanu-hire-cta-button.large {
  width: 177px;
  height: 50px;
  font-size: 18px;
}
.unnanu-hire-cta .unnanu-hire-cta-button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* "You Want To Hire?" sidebar CTA — Figma node 2901:1815. The card art
   (blue background with concentric rings + dot pattern, baked logo tab,
   headline, body, "Try Unnanu Hire" pill, mail glyph, and woman) is a
   single PNG exported directly from Figma so the visual matches pixel-
   for-pixel. The whole card is one clickable link to Unnanu Hire. */
.unnanu-sidebar-cta.unnanu-hire-cta {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.unnanu-hire-cta .unnanu-hire-cta-art {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(38, 106, 220, 0.18);
}
.unnanu-hire-cta .unnanu-hire-cta-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sidebar "Upload Resume" CTA — the button class is shared with the hire
   CTA above, but the parent container is `.unnanu-sidebar-cta` (white card
   on the right rail) so it needs its own styling: primary blue fill,
   white text, full-width inside the card. */
.unnanu-sidebar-cta .unnanu-hire-cta-button,
.unnanu-resume-cta .unnanu-hire-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin-top: 14px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background-color: #266adc;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.unnanu-sidebar-cta .unnanu-hire-cta-button:hover,
.unnanu-resume-cta .unnanu-hire-cta-button:hover {
  background-color: #1f57b5;
  box-shadow: 0 2px 8px rgba(38, 106, 220, 0.25);
  text-decoration: none;
}
.unnanu-sidebar-cta .unnanu-hire-cta-button:focus-visible,
.unnanu-resume-cta .unnanu-hire-cta-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #266adc;
}
.unnanu-hire-cta .unnanu-hire-cta-image {
  margin-top: 10px;
  margin-bottom: -10px;
  margin-right: -20px;
  text-align: right;
}

/*preloader animation*/
@keyframes placeHolderAnimation {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderAnimation;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #dcdcdc 8%, #cbcbcb 18%, #dcdcdc 33%);
  background-size: 800px 104px;
}

.mobile-filters-ui {
  position: fixed;
  top: 0;
  overflow-y: scroll;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 100vh;
  background-color: #fafafa;
  z-index: 99999999;
}
@media only screen and (min-width: 1025px) {
  .mobile-filters-ui {
    display: none;
  }
}
.mobile-filters-ui .filters-header {
  width: 100%;
  position: fixed;
  top: 0;
  padding: 14px 15px;
  height: 49px;
  border-top: solid 0.6px rgba(0, 0, 0, 0.2);
  border-bottom: solid 0.6px rgba(0, 0, 0, 0.2);
  color: #000000;
  background-color: #f4f4f4;
  font-size: 16px;
  font-weight: 500;
  z-index: 99999999;
}
.mobile-filters-ui .filters-header .title {
  line-height: 19px;
  height: 19px;
}
.mobile-filters-ui .filters-header .close {
  height: 15px;
}
.mobile-filters-ui .filters-list-wrapper {
  padding: 15px;
  background-color: #fafafa;
}
.mobile-filters-ui .filters-list-wrapper .filter-item {
  width: 100%;
  display: inline-block;
  margin-bottom: 15px;
}
.mobile-filters-ui .filters-list-wrapper .filter-item label {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.mobile-filters-ui .filters-list-wrapper .filter-item .filter-name {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: center;
  line-height: 45px;
  height: 45px;
  border-radius: 22.5px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  background-color: #eeeeee;
  font-weight: bold;
  position: relative;
}
.mobile-filters-ui .filters-list-wrapper .filter-item .filter-name svg {
  margin-top: -3px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: rotate(180deg);
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-name.collapsed
  svg {
  transform: rotate(0deg);
}
.mobile-filters-ui .filters-list-wrapper .filter-item .range-toggle {
  height: 40px;
  text-align: center;
  margin: 15px 0 0;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .range-toggle
  .range-toggle-option {
  cursor: pointer;
  width: 50%;
  line-height: 29px;
  float: left;
  height: 40px;
  font-size: 16px;
  color: #369eff;
  border: solid 0.6px #3f7de4;
  background: #ffffff;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .range-toggle
  .range-toggle-option.active {
  color: #ffffff;
  background-color: #369eff;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper {
  width: 100%;
  border-radius: 20px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  padding: 0 17px;
  margin-top: 8px;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list
  li {
  color: #3f7de4;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 15px 0;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list
  li
  .filter-property-count {
  min-width: 30px;
  height: 23px;
  line-height: 19px;
  border-radius: 1px;
  color: #3f7de4;
  border: solid 1px #3f7de4;
  letter-spacing: 0.4px;
  font-size: 14.4px;
  font-weight: 500;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list
  li.disabled {
  color: #dcdcdc;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list
  li.disabled
  .filter-property-count {
  border: solid 1px #dcdcdc;
  color: #dcdcdc;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-items-wrapper
  .filter-select-list
  li:last-child {
  border: none;
}
.mobile-filters-ui .filters-list-wrapper .filter-item .filter-select-wrapper {
  border-radius: 22.5px;
  border: solid 1px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  background-color: #ffffff;
  width: 218px;
  padding: 0 16px;
}
.mobile-filters-ui
  .filters-list-wrapper
  .filter-item
  .filter-select-wrapper
  .filter-select {
  height: 45px;
  border: none;
  box-shadow: none;
  background: transparent;
}
.mobile-filters-ui .filters-list-wrapper hr {
  margin: 0 0 15px;
}

.search-keyword-suggestions {
  width: 100%;
  top: 52px;
  position: absolute;
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
  z-index: 999;
}
.search-keyword-suggestions .suggestions-header {
  line-height: 50px;
  height: 50px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
  padding: 0 20px;
}
.search-keyword-suggestions .suggestions-header .header-icon {
  margin-right: 15px;
}
.search-keyword-suggestions .suggestions-header .currently-typing {
  position: absolute;
  top: 0;
  left: 50px;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: #222222;
  width: 342px;
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.search-keyword-suggestions .suggestions-no-matches {
  cursor: pointer;
  color: #266adc;
  line-height: 50px;
  height: 50px;
  padding: 0 20px;
}
.search-keyword-suggestions .suggestions-result-group {
  margin-top: 14px;
}
.search-keyword-suggestions .suggestions-result-group .group-title {
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #595959;
  padding: 0 20px;
}
.search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list {
  list-style: none;
  padding: 0;
}
.search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list
  li {
  padding: 0 20px;
  font-size: 16px;
  letter-spacing: 0.4px;
  margin-bottom: 15px;
  color: #222222;
  cursor: pointer;
}
.search-keyword-suggestions
  .suggestions-result-group
  .suggestions-results-list
  li
  svg {
  margin-right: 14px;
}
.search-keyword-suggestions.mobile {
  position: fixed;
  bottom: 0;
  top: 236px;
  right: 0;
  left: 0;
  background-color: #f4f4f4;
  overflow-y: auto;
}
.search-keyword-suggestions.mobile .suggestions-result-group {
  margin-top: 0;
}
.search-keyword-suggestions.mobile
  .suggestions-result-group
  .suggestions-results-list
  li {
  padding: 10px 20px;
  color: #266adc;
  margin: 0;
}

.sign-in-up-alert {
  border-radius: 5px 0 0 5px;
  overflow: hidden;
  position: fixed;
  z-index: 999;
  width: 295px;
  height: 214px;
  right: 0;
  bottom: 120px;
  background: #2d69ce;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(50px);
  transition: all 0.8s;
}
.sign-in-up-alert.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sign-in-up-alert.hide {
  opacity: 0;
  transform: translateX(50px);
}
.sign-in-up-alert header {
  position: relative;
  height: 93px;
  overflow: hidden;
}
.sign-in-up-alert header img {
  width: 100%;
}
.sign-in-up-alert header button {
  cursor: pointer;
  width: 22px;
  height: 22px;
  border: none;
  padding: 0;
  box-shadow: none;
  background: none;
  right: 10px;
  top: 10px;
  position: absolute;
}
.sign-in-up-alert .alert-body {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.4px;
  text-align: center;
  color: #ffffff;
}
.sign-in-up-alert .alert-body .alert-apps {
  margin-top: 11px;
}
.sign-in-up-alert .alert-body .alert-apps a {
  margin: 0 5px;
}

.react-autosuggest__container {
  position: absolute;
  width: 100%;
}

.inputContainer {
  display: flex;
}

.react-autosuggest__input {
  width: 100%;
  height: 30px;
  margin-left: 30px;
  padding: 10px 20px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.react-autosuggest__input--focused {
  outline: none;
}

.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
  display: none;
}

.react-autosuggest__suggestions-container--open {
  display: block;
  z-index: 2;
  width: 100%;
  top: 52px;
  padding: 0;
  position: absolute;
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
}

.react-autosuggest__suggestions-list {
  list-style: none;
  padding: 0;
}

.react-autosuggest__suggestions-list li {
  font-size: 16px;
  padding: 7px 20px 7px 54px;
  letter-spacing: 0.4px;
  margin-bottom: 1px;
  color: #222222;
  cursor: pointer;
}

.react-autosuggest__suggestions-list li svg {
  margin-right: 14px;
  margin-left: -34px;
}

.react-autosuggest__suggestion {
  cursor: pointer;
  /*padding: 10px 20px;*/
}

.react-autosuggest__suggestion--highlighted {
  background-color: #eeeeee;
}

.autosuggest-margin {
  margin-left: 35px;
}

.react-autosuggest__suggestions-container .suggestions-header {
  margin: 0 20px;
  line-height: 50px;
  height: 50px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}
.react-autosuggest__suggestions-container .suggestions-header .header-icon {
  margin-right: 15px;
}
.react-autosuggest__suggestions-container
  .suggestions-header
  .currently-typing {
  font-size: 16px;
  letter-spacing: 0.4px;
  color: #222222;
  height: 50px;
  overflow: hidden;
}

.react-autosuggest__section-container {
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
}

.react-autosuggest__suggestions-container--open {
  width: 100%;
  top: 52px;
  position: absolute;
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 1px 3px 0 rgba(169, 169, 169, 0.4);
}
.react-autosuggest__suggestions-container--open .suggestions-no-matches {
  cursor: pointer;
  color: #266adc;
  line-height: 50px;
  height: 50px;
}
.react-autosuggest__suggestions-container--open .suggestions-result-group {
  margin: 14px 20px 0;
}
.react-autosuggest__suggestions-container--open
  .suggestions-result-group
  .group-title {
  margin-bottom: 1px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #595959;
}

.not-found-container {
  margin-top: 138px;
}
.not-found-container h1 {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.11;
  color: #222222;
  font-family: "Frank Ruhl Libre", serif;
  margin: 29px 0 0 14px;
}
.not-found-container p {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: #595959;
  margin: 0;
  margin-bottom: 50px;
}

/* React Confirm */
body.react-confirm-alert-body-element {
  overflow: hidden;
}
.single-job-container.container .popup-title {
  padding: 0px 0px 16px;
  margin-bottom: 20px;
  position: relative;
}
.react-confirm-alert-blur {
  filter: url(#gaussian-blur);
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.react-confirm-alert-body {
  font-family: Arial, Helvetica, sans-serif;
  width: 400px;
  padding: 30px;
  text-align: left;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
  color: #666;
}

.react-confirm-alert-svg {
  position: absolute;
  top: 0;
  left: 0;
}

.react-confirm-alert-body > h1 {
  margin-top: 0;
}

.react-confirm-alert-body > h3 {
  margin: 0;
  font-size: 16px;
}

.react-confirm-alert-button-group {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.react-confirm-alert-button-group > button {
  outline: none;
  background: #333;
  border: none;
  display: inline-block;
  padding: 6px 18px;
  color: #eee;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

@-webkit-keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  width: 100%;
}

.tooltip .tooltiptext {
  visibility: visible;
  width: 100%;
  background-color: #d9534f;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 3px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -50%;
  opacity: 0;
  transition: opacity 1s;
  font-size: small;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #d9534f transparent transparent transparent;
}

.tooltip .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.section {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 5px;
}

.tooltiptext2 {
  visibility: visible;
  width: 100%;
  background-color: #000000;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 3px 5px;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transition: opacity 1s;
  font-size: small;
}

.react-confirm-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.3);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  opacity: 0;
  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
}

.scrollable-container {
  max-height: 100vh;
  overflow-y: auto;
}

.signup-button .shine-button {
  position: relative;
  background: #ffba00;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.signup-button .shine-button::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shine 2s infinite;
}

.signup-button .shine-button:hover {
  background: #e6a700;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.in-progress {
  width: 106px;
  height: 42px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #ffeca1;
  border: 1px solid #ffeca1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.withdraw {
  width: 104px;
  height: 35px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #f9eded;
  border: 1.5px solid #abc8f8;
  border-radius: 4px;
  padding: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #266adc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.withdraw:hover {
  box-shadow: 0 2px 5px 0 rgba(255, 150, 150, 0.3);
  background-color: #ffd6d6;
  border-color: #ff8080;
}
.withdraw.large {
  width: 195px;
  height: 48px;
  font-size: 16px;
}
.withdraw.large svg {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}

.delete {
  width: 40px;
  height: 40px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border: 0;
  border-radius: 7px;
  padding: 0;
  margin-right: 10px;
}

.single-job-container.container {
  margin-top: 120px;
}
/* .job-extract-widget {
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f8f8f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   } */
.job-extract-widget .widget-title {
  padding: 15px 15px 0 15px;
  font-size: 14px;
  font-weight: 600;
  color: #222222;
}
.job-extract-widget .widget-list {
  max-height: 300px;
  overflow-y: scroll;
  /* Show scrollbar always */
  -ms-overflow-style: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}
.job-extract-widget .widget-list::-webkit-scrollbar {
  width: 8px;
  display: block;
}
.job-extract-widget .widget-list::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}
.job-extract-widget .widget-list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.date-group {
  margin-bottom: 15px;
}

.date-group:last-child {
  margin-bottom: 0;
}

.date-header {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  padding: 8px 15px;
  border-bottom: 1px solid #eee;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  transition: background-color 0.2s;
}

.activity-item:hover {
  background-color: #f8f9fa;
}

.job-board-name {
  color: #444;
  font-size: 13px;
}

.job-count {
  color: #666;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .sign-in-up-alert {
    display: none;
  }
  .job-company-location {
    justify-content: center;
  }
  .single-job-container .term-type-wrapper {
    text-align: center;
  }
  .modal-main .term-type-wrapper {
    text-align: center;
  }
  .term-type-wrapper .badge-full-time {
    margin-bottom: 5px;
  }
  .ui-actions-wrapper-mobile {
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
   Figma 4309:818 / 2901:1492 — overrides for the job-search popups & cards.
   Appended below earlier rules so they win the cascade without re-editing
   long historical blocks.
   ------------------------------------------------------------------------- */

/* Similar Jobs heading — Figma 4309:818 spec is uppercase, left-aligned,
   in the brand blue. Job-title rows below the heading render in #000.
   Selector covers BOTH the legacy `.popup-sidebar` location and the new
   `.popup-body-aside` location used by the Figma-aligned modal layout. */
.popup-sidebar label.widget-title.somestyle,
.popup-body-aside label.widget-title.somestyle,
.popup-content--figma .widget.similar-jobs .widget-title {
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.6px;
}
.popup-wrapper .popup-sidebar .widget-list.widget-jobs-list .widget-job .job-title,
.popup-wrapper .popup-sidebar .widget-jobs-list .widget-job .job-texts .job-title,
.popup-body-aside .widget-list.widget-jobs-list .widget-job .job-title,
.popup-body-aside .widget-jobs-list .widget-job .job-texts .job-title {
  color: #000000 !important;
  font-weight: 600;
}

/* "Share this role" inside the unnanu JobDetail popup-sidebar — left-align
   the heading and add a divider above the block (the popup-sidebar already
   has an `<hr>` above this widget; this rule just guards the spacing). */
.popup-wrapper .popup-sidebar .widget.share-this-role {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.popup-wrapper .popup-sidebar .widget.share-this-role .widget-title {
  display: block;
  text-align: left;
  text-transform: none !important;
  color: #266adc !important;
  font-weight: 600;
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Square-with-rounded-corners company logo in the job-detail popup header.
   The legacy `<img>` had only `width: 100%` so a non-square upload rendered
   as a rectangle inside the 80×80 container. Force the image to fill the
   square frame. */
.popup-wrapper .popup-content .popup-header .logo {
  border-radius: 12px;
  background: #ffffff;
}
.popup-wrapper .popup-content .popup-header .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* "View All" link below sidebar widgets — Figma 2901:1492. The component
   uses `.widget-view-all` (not the legacy `.view-all-btn` defined further
   up the file), so the styling has to apply to that class explicitly. */
button.widget-view-all {
  display: block;
  width: auto;
  margin: 12px auto 0 auto;
  padding: 6px 12px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0.2px;
  color: #266adc;
  cursor: pointer;
  text-align: center;
  transition: text-decoration 0.15s ease;
}
button.widget-view-all:hover {
  text-decoration: underline;
}
button.widget-view-all:focus-visible {
  outline: none;
  text-decoration: underline;
}

/* Right-rail Saved Jobs widget — long titles were overflowing the 320px
   widget container. Clamp at 2 lines, ellipsize, and break unbroken
   words/URLs so they don't push the layout sideways. Mirrors the same
   treatment applied inside `.saved-jobs-popup-wrapper .job-card-meta`. */
.widget .widget-list.widget-jobs-list .widget-job .job-texts {
  min-width: 0;
  flex: 1 1 auto;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .job-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.widget .widget-list.widget-jobs-list .widget-job .job-texts .company-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hero banner crispness — the source PNG renders blurry on hi-DPI displays
   when stretched via `background-size: cover`. `image-rendering` keeps the
   browser from applying a smoothing filter when the image is upscaled,
   matching the sharper look the Figma export has. */
.app-header .listing-hero-banner {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Salary $ icon — give the inline currency.svg consistent vertical
   alignment + a 6px gap between the icon and the salary number on the
   listing cards (was visually mis-aligned because the legacy SVG was
   24×24 in a row of 16px text). */
.result-card .card-text-content .job-salary-range img,
.result-card .card-text-content .job-salary-range svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Inline withdraw / remove confirms in the Saved Jobs + Applied Jobs
   modals. Add the close (X) affordance the modal-style ConfirmDialog has,
   so QA row 21/22 (close X missing on withdraw popup) closes out across
   the inline variants too. */
.confirm-popup-wrapper.inline-confirm .popup-content,
.confirm-popup-wrapper .popup-content {
  position: relative;
}
.confirm-popup-wrapper .popup-close-button {
  top: 16px;
  right: 16px;
  transform: none;
}

/* Listing card bookmark — Figma 2901:1492 shows a SQUARE outlined
   icon-button at top-right of each card (next to Apply Now), not a bare
   bookmark glyph. Override the default `.save-button` (40×40 transparent)
   used elsewhere with a 36×36 white-bg, blue-border square. */
.result-card .card-text-content .result-card-ui-actions .save-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 1.2px solid #266adc;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-right: 10px;
  flex-shrink: 0;
}
.result-card .card-text-content .result-card-ui-actions .save-button:hover {
  background-color: #f0f6ff;
  opacity: 1;
}
.result-card .card-text-content .result-card-ui-actions .save-button img {
  width: 18px;
  height: 22px;
}

/* Source-chip count badges — Figma 2901:1492 shows small orange-red
   number badges floating top-right of each chip ("8", "15", "10", "35").
   The current `.jobs-count` rule lives further up the file with neutral
   styling; override with the brand orange the design uses. */
.find-jobs-filters
  .filters-container.logged-in-layout
  .filter-item-desktop
  .filter-item-button
  .jobs-count {
  background-color: #d93025;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  top: -6px;
  right: -6px;
  padding: 0 5px;
  box-shadow: 0 1px 3px rgba(255, 90, 60, 0.4);
}

/* -------------------------------------------------------------------------
   Figma audit (10 May 2026) — overrides after side-by-side review of the
   exported PNG frames. Keep this block separate so it's easy to map back
   to the design source.
   ------------------------------------------------------------------------- */

/* Job Details popup: "Share this role" icons in Figma are bare gray glyphs
   inline, no circular outline. The earlier "circular containers" treatment
   was a misread of the design. */
.share-this-role .share-platforms .platform-button {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 28px;
  height: 28px;
}
.share-this-role .share-platforms .platform-button:hover {
  background: rgba(38, 106, 220, 0.06);
  border-radius: 6px;
}

/* Applied Jobs view-all popup: "Withdraw Application" button is outlined
   blue (white bg, blue border, blue text), not solid filled. The default
   `.submit-button` rule defined further up the file paints it solid. */
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button.withdraw {
  background: #ffffff;
  color: #266adc;
  border: 1.5px solid #266adc;
}
.saved-jobs-popup-wrapper
  .popup-content
  .saved-jobs-list
  .job-item
  .job-card-content
  .job-card-actions
  .submit-button.withdraw:hover {
  background: #f0f6ff;
}

/* Job Details popup tabs — "Job Description" / "Company Info". Underline
   indicator on the active tab; gray label on the inactive tab. */
.job-detail-tabs {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.job-detail-tabs .tab {
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #595959;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.job-detail-tabs .tab:hover {
  color: #266adc;
}
.job-detail-tabs .tab.active {
  color: #266adc;
}
.job-detail-tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: #266adc;
}

/* -------------------------------------------------------------------------
   Job Details popup — Figma-aligned layout (no popup-sidebar column).
   `.popup-content--figma` opts into the new pattern; the legacy
   `.popup-wrapper > .popup-sidebar` rules higher up the file still apply
   to the unconverted single-job page (`/job/...`) until that ports too.
   ------------------------------------------------------------------------- */

/* Container width: ~880px main column total per Figma. The legacy
   `.popup-wrapper .popup-content` rule pins width to 704px and assumes a
   sibling `popup-sidebar`; we override here to give the body the full
   modal width and keep Share + Similar inside the body grid. */
@media only screen and (min-width: 1025px) {
  .popup-wrapper .popup-content.popup-content--figma {
    width: 100%;
    max-width: calc(100vw - 64px);
    border-bottom-right-radius: 12px;
  }
}
.popup-wrapper .popup-content--figma {
  padding: 0;
}
/* The legacy `.popup-scroll-container` pins `height: 540px` for the
   standalone /job/<id> page where the popup occupies a known slot. Inside
   the modal we want the container to fit its content (the Frame already
   handles overflow at the modal level), and we want the popup-title to
   sit flush against the top of the modal — not 160px down. */
.popup-content--figma .popup-scroll-container {
  height: auto;
  overflow-y: visible;
}
/* Remove the legacy 945px fixed width on `.single-job-container` when it's
   rendered inside a modal — the modal-main width is already the source of
   truth. */
.modal-main .single-job-container {
  width: auto;
  margin: 0;
  padding: 0;
}

/* Title row "Job Details" + close X. Inside `.popup-content--figma` we
   reset the legacy padding and let the row sit flush at the top of the
   modal (no white gap above). */
.popup-content--figma .popup-title {
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: transparent;
}
.popup-content--figma .popup-title .popup-flex {
  align-items: center;
  gap: 10px;
}
/* Close-X — make it unambiguously visible. The legacy `.popup-close-button`
   rule sets a transparent 30×30 hit area; we keep the hit area but give
   the X glyph a higher-contrast stroke and a subtle hover bg. */
.popup-content--figma .popup-title .popup-close-button {
  background: transparent;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
.popup-content--figma .popup-title .popup-close-button svg path {
  stroke: #222222;
  stroke-width: 2;
}
.popup-content--figma .popup-title .popup-close-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
  opacity: 1;
}

/* Header row: logo | title block | actions stacked vertically on the right.
   Margin-top ensures it sits below the popup-title border without piling on
   the legacy `.popup-header { padding-bottom: 20px }` rule. */
.popup-content--figma .popup-header.popup-header--figma {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
@media (max-width: 768px) {
  .popup-content--figma .popup-header.popup-header--figma {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }
  .popup-content--figma .popup-header.popup-header--figma .header-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    width: 100%;
  }
}
.popup-content--figma .popup-header--figma .header-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 180px;
}
.popup-content--figma .popup-header--figma .header-actions .apply-button,
.popup-content--figma .popup-header--figma .header-actions .save-button {
  width: 100%;
  margin: 0;
}
.popup-content--figma .popup-header--figma .header-actions .external-link-button {
  width: 100%;
}

/* Body section padding (was 28px from `.popup-wrapper .popup-content`
   rule that I just zeroed). Re-add explicit padding for the body section
   only. */
.popup-content--figma .popup-body {
  padding: 18px 28px 24px;
}
.popup-content--figma .job-detail-tabs {
  padding-left: 0;
}

/* Two-column body: description content on the left, share + similar on
   the right. Mobile collapses to one column. */
.popup-content--figma .popup-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .popup-content--figma .popup-body-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.popup-content--figma .popup-body-main {
  min-width: 0;
}
.popup-content--figma .popup-body-aside {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  padding-left: 24px;
}
@media (max-width: 1024px) {
  .popup-content--figma .popup-body-aside {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 20px;
  }
}
/* Inside the new aside, the share-this-role widget no longer needs its
   own divider rule (the column already has a left border). */
.popup-content--figma .popup-body-aside .widget.share-this-role {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 18px;
  text-align: center;
}
.popup-content--figma .popup-body-aside .widget.share-this-role .widget-title {
  text-align: center;
}
.popup-content--figma .popup-body-aside .widget.share-this-role .share-platforms {
  justify-content: center;
}
.popup-content--figma .popup-body-aside .widget.similar-jobs {
  margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Job detail modal — scrollable content, pinned header.
   Cap the modal-frame at 90 % of the viewport so very long job descriptions
   don't push the modal off-screen. The popup-title ("Job Details" bar) stays
   fixed; only the popup-content area scrolls.
   Scoped to .modal-main--lg to avoid touching sm/md modals (Signup etc.).
   modal-frame is exclusive to JobDetail + ExternalJob, so there is no risk
   of collateral damage to the SavedJobs / AppliedJobs modal variants.
   ------------------------------------------------------------------------- */
.modal-main--lg .modal-frame {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 12px;
}

.modal-main--lg .modal-frame .popup-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-main--lg .modal-frame .popup-content.popup-content--figma {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* WCAG AA contrast fix: Bootstrap 4 .btn-primary (#007bff) has a 4.5:1
   contrast ratio with white text — exactly borderline. Darkening to
   #0062cc ensures 5.6:1 and passes reliably. */
.btn-primary {
  background-color: #0062cc;
  border-color: #0062cc;
}
.btn-primary:hover {
  background-color: #0056b3;
  border-color: #004fa3;
}

/* Signin fallback page */
.signin-fallback {
  min-height: 60vh;
}
.signin-card {
  max-width: 400px;
  width: 100%;
}