/* stylelint-disable */

/* These variables can be used to control values throughout the job board. */
:root {
  @import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Martian+Mono:wght@100..800&display=swap");

  /*  Darker primary color
  WARNING - This can be set in the Ashby admin under theme settings!
  If you modify, you should make sure your colors work with the settings there. */
  --colorPrimary900: rgb(24 29 39);

  /*  Lighter primary color
  WARNING - This can be set in the Ashby admin under theme settings!
  If you modify, you should make sure your colors work with the settings there. */
  --colorPrimary600: rgb(24 29 39);
  --color-border-primary: rgb(164 167 174);

  /*  The max width of the job board container */
  --widthMaxJobBoard: 800px;

  /*  The max width of the application form section */
  /* --widthMaxJobBoard: 800px; */

  /*  Container border radius */
  --borderRadiusContainer: 10px;

  /*  Border radius of control elements (e.g. input boxes) */
  --borderRadiusControl: 10px;

  /*  Button border radius */
  --borderRadiusButton: 10px;

  /*  Font families */
  --fontFamily: "Funnel Sans", sans-serif;

  --colorAppBackground: #fafafa;

  --spacingSmall: 8px;
  --spacingNormal: 8px;
  --widthMaxContent: 1280px;
  --widthMaxJobBoard: 1280px;

  @media (min-width: 768px) {
    --spacingSmall: 16px;
    --spacingNormal: 16px;
  }
}

/* Application autofill input's base layer element. This contains standard copy, a CTA button, and potential validation alerts. */
.ashby-application-form-autofill-input-base-layer {
}

/* Application autofill input's description. */
.ashby-application-form-autofill-input-description {
}

.ashby-application-form-autofill-input-description > div {
  justify-content: flex-end !important;
}

.ashby-application-form-autofill-input-description > div button {
  margin-right: 0 !important;
}

/* Application autofill input's drag state overlay element. Can style [data-state] which can be 'active' or 'hidden'. */
.ashby-application-form-autofill-input-drag-layer {
}

/* Application autofill input form's alert element. Can style [data-highlight] which can be 'negative' or 'positive'. */
.ashby-application-form-autofill-input-form-alert {
}

/* Application autofill input's magic sparkles icon. */
.ashby-application-form-autofill-input-icon {
}

/* Application autofill input's pending state overlay element. Can style [data-state] which can be 'active' or 'hidden'.
.ashby-application-form-autofill-input-pending-layer {}

/* Application autofill input's root element. Can style [data-state] which can be 'pending', 'drag', or 'default'. */
.ashby-application-form-autofill-input-root {
}

/* Application autofill input's title. */
.ashby-application-form-autofill-input-title {
}

/* Container element for application autofill input form. */
.ashby-application-form-autofill-pane {
  background-color: #fff !important;
  padding: 16px !important;
}

/* The resume uploader to auto-fill the application form */
.ashby-application-form-autofill-uploader {
}

/* A container for displaying the custom message to the user */
.ashby-application-form-blocked-application-container {
}

/* A container for the application form. */
.ashby-application-form-container {
  background-color: #fff !important;
  box-shadow: none !important;
  padding: 16px !important;
}

/* A container for the failure message */
.ashby-application-form-failure-container {
}

/* A container for the label and input on an application form. */
.ashby-application-form-field-entry {
}

/* Yes/No toggles. Ashby's unselected colour is rgb(168 174 189), which reads
   as disabled; these use the primary text colour and the standard border,
   with the selected option filled. Selection is via aria-pressed. */
.ashby-application-form-input-yesno-option {
  border-color: var(--color-border-primary) !important;
  color: var(--colorPrimary900) !important;
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background-color: var(--colorPrimary900) !important;
  border-color: var(--colorPrimary900) !important;
  color: #fafafa !important;
}

/* Buttons inside a form field entry keep their resting appearance on hover,
   cancelling the global `button:hover` fill further down. The colours below
   are the values each button renders at rest. */
.ashby-application-form-input-yesno-option:hover {
  background-color: transparent !important;
  color: var(--colorPrimary900) !important;
}

.ashby-application-form-input-yesno-option[aria-pressed="true"]:hover {
  background-color: var(--colorPrimary900) !important;
  color: #fafafa !important;
}

.ashby-application-form-input-file-dropzone-upload:hover {
  background-color: transparent !important;
  color: rgb(10 13 18) !important;
}

.ashby-application-form-input-file-dropzone-upload:hover svg {
  fill: rgb(10 13 18) !important;
}

/* The show/clear toggle inside inputs has no ashby-* hook, so it's matched on
   a partial class; Ashby content-hashes the suffix. */
button[class*="_toggleButton"]:hover {
  background-color: transparent !important;
  color: rgb(55 62 77) !important;
}

button[class*="_toggleButton"]:hover svg {
  fill: rgb(125 134 153) !important;
}

/* The description of each question on an application form. Will only show if a description is specified. */
.ashby-application-form-question-description {
  display: none;
}

/* The title of each question on an application form. */
.ashby-application-form-question-title {
}

/* A single section on the Ashby application form. All questions will be wrapped in sections, though the default section may not have a title. */
.ashby-application-form-section-container {
}

/* The header for an application form section, possibly containing a title and description. */
.ashby-application-form-section-header {
}

/* The description for an application form section. May not exist if no description was specified. */
.ashby-application-form-section-header-description {
}

/* The title for an application form section. May not exist for the default section. */
.ashby-application-form-section-header-title {
}

/* The application submission button. Will have loading and hover states that should be tested. */
.ashby-application-form-submit-button {
  margin: 1rem;
  width: calc(100% - 2rem);
}

/* A container for the success message */
.ashby-application-form-success-container {
  justify-self: center;
  margin: 2rem;
}

/* The text message consent description. Displayed below phone number fields. Will only show if texting is enabled. */
.ashby-application-form-texting-consent-description {
}

/* The heading of a department, which can have many teams under it. */
.ashby-department-heading {
  display: none;
}

/* The heading of a single team. */
.ashby-department-heading-level {
}

/* The button which allows users to navigate from an individual posting back to the list of all job postings. */
.ashby-job-board-back-to-all-jobs-button {
  background-color: #fafafa !important;
  color: var(--colorPrimary600) !important;
  border: none !important ;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-left: var(--spacingSmall) !important;
}

/* Hover reads as an underlined link rather than a filled pill. Overrides the
   global `button:hover` rules further down the file. */
.ashby-job-board-back-to-all-jobs-button:hover {
  background-color: transparent !important;
  color: var(--colorPrimary900) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.ashby-job-board-back-to-all-jobs-button:hover svg {
  fill: var(--colorPrimary900) !important;
}

/* A select box element for filtering the job board. */
.ashby-job-board-filter {
}

/* Select controls, matched to the design system's Select/Input: 1px inset
   border, subtle shadow, control radius, Funnel Sans at 16px. */
select,
.ashby-job-board-filter select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  border: 1px solid var(--color-border-primary) !important;
  border-radius: var(--borderRadiusControl) !important;
  box-shadow: 0 1px 2px rgb(10 13 18 / 5%) !important;
  color: var(--colorPrimary900) !important;
  cursor: pointer !important;
  font-family: var(--fontFamily) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  /* md control metrics: py-2.5 px-4, with extra right padding for Ashby's
     chevron. */
  padding: 10px 40px 10px 16px !important;
  transition:
    box-shadow 100ms linear,
    border-color 100ms linear !important;

  /* Right padding leaves room for Ashby's own chevron, which it renders in a
     sibling element — so we deliberately don't draw one here. */
}

select:hover {
  border-color: var(--colorPrimary600) !important;
}

select:focus-visible {
  outline: 2px solid var(--colorPrimary600) !important;
  outline-offset: 2px !important;
}

/* The 'Filters' label element in the job board. */
.ashby-job-board-filters-label {
  display: none !important;
}

/* Hide the employment type and location filters. The `:has()` rules also drop
   the wrapping filter element so it doesn't leave an empty gap in the row. */
select[name="employmentType"],
select[name="locationId"],
div:has(> select[name="employmentType"]),
div:has(> select[name="locationId"]) {
  display: none !important;
}

/* On narrow viewports Ashby collapses the filter row (max-height: 0;
   opacity: 0) behind a "Filter Open Positions..." button. Keep the selects
   visible at all widths and drop the toggle.

   These hook onto .ashby-job-board-filters-label rather than Ashby's own
   wrapper classes, which are content-hashed (e.g. _filtersWindow_1dvh9_185)
   and change between their deploys. */
div:has(> div > .ashby-job-board-filters-label) {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;

  /* Ashby drives the collapse with a CSS transition, and a running transition
     outranks `!important` in the cascade. Disabling it is what actually lets
     the opacity override stick. */
  transition: none !important;
}

/* The "Filter Open Positions..." toggle, and the close button that pairs
   with it. Both are redundant once the row is always open. */
div:has(> div > .ashby-job-board-filters-label) + button,
button[title="Close filters"] {
  display: none !important;
}

/* The filters header holds the "Filters:" label and the reset/close buttons.
   Hiding the whole row removes them and the blank space they leave behind.
   Matched on a partial class because Ashby content-hashes the suffix; `*=`
   rather than `^=` so it still matches if another class is prepended. */
div[class*="_filtersHeader"] {
  display: none !important;
}

/* The heading of the entire job board. */
.ashby-job-board-heading {
  display: none;
}

/* The count of job postings on the job board. */
.ashby-job-board-heading-count {
}

/* The 'Reset filters' label element in the job board. The reset filters label element in the job board. */
.ashby-job-board-reset-filters-label {
}

/* The container of the job posting details pane. */
.ashby-job-posting-brief {
  background-color: #fafafa !important;
  border-radius: var(--borderRadiusControl);
  border: 1px solid var(--color-border-primary);
  border-top: 1px solid var(--color-border-primary) !important;
  box-shadow: none !important;
  /* This adds some space between posting briefings. */
  margin-bottom: var(--spacingLarge);
  padding: var(--spacingLarge);
}

.ashby-job-posting-brief:hover {
  background-color: #f5f5f5 !important;
}

/* The heading of a department name. Departments group teams. */
.ashby-job-posting-brief-department-heading {
}

/* The heading of a single team. */
.ashby-job-posting-brief-department-heading-level {
}

/* The container for the details of the job posting, in the details pane. */
.ashby-job-posting-brief-details {
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* The container for the list of job post briefings. */
.ashby-job-posting-brief-list {
  padding-left: var(--spacingSmall);
  padding-right: var(--spacingSmall);
}

/* The title of the job posting in the details pane. */
.ashby-job-posting-brief-title {
  font-size: 20px !important;
}

/* The main header on the job posting page */
.ashby-job-posting-header {
  box-shadow: none !important;
}

/* The heading of a job post */
.ashby-job-posting-heading {
  box-shadow: none !important;
  margin-bottom: 24px !important;
}

/* The left pane of the job posting, with the job posting details */
.ashby-job-posting-left-pane {
  background-color: #fafafa !important;
  box-shadow: none !important;
  padding-right: 32px !important;

  /* Ashby ships 64px of top margin and 24px of top padding here, which drops
     the details list well below the right pane. Clearing both lines the first
     row up with the top of the white box. */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The right pane of the job posting, containing the tabs, overview, and application form */
.ashby-job-posting-right-pane {
  background-color: #ffffff !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border-primary) !important;
  border-radius: var(--spacingLarge) !important;
  overflow: hidden !important;
}

.ashby-job-posting-right-pane div:first {
  background-color: #fafafa !important;
}

/* The application tab in the right pane of the job posting */
.ashby-job-posting-right-pane-application-tab {
  box-shadow: none !important;
  border-bottom: none !important;
  margin-left: 0 !important;
  padding-left: 16px !important;
}

/* The overview tab in the right pane of the job posting */
.ashby-job-posting-right-pane-overview-tab {
  box-shadow: none !important;
  border-bottom: none !important;
  margin-left: 0 !important;
  padding-left: 16px !important;
}

/* The tabs slider in the right pane of the job posting */
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--colorPrimary900) !important;
  box-shadow: none !important;
  margin-left: 0;
}

/* A container for any surveys specified for this application form. */
.ashby-survey-form-container {
  box-shadow: none !important;
}

button {
  box-shadow: none !important;
  font-family:
    "Martian Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border: 1px solid var(--color-border-primary);
  border-width: 1px !important;
  border-radius: 9999px !important;
  display: flex !important;
  line-height: 20px !important;
  padding: 10px 14px !important;
  justify-content: center;
  margin-right: 0.5rem !important;
}

button:hover {
  background-color: var(--colorPrimary600) !important;
  color: #fafafa !important;
}

button:hover svg {
  fill: #fafafa !important;
}

[role="tablist"] {
  background-color: transparent !important;
  box-shadow: none;
  margin-top: 0 !important;
  top: 0;
}

/* Anchor-based tabs, matched to the design system's nav/tab treatment:
   Funnel Sans 16px semibold, secondary by default, primary when selected,
   with the selected item underlined rather than filled. */
[role="tablist"] a {
  color: rgb(65 70 81) !important;
  font-family: var(--fontFamily) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-decoration: none !important;
  transition: color 100ms linear !important;
}

/* Active state is colour only. The underline comes from Ashby's slider span
   (.ashby-job-posting-right-pane-tab-slider), so adding a border here would
   render two underlines. */
[role="tablist"] a:hover,
[role="tablist"] a[aria-selected="true"],
[role="tablist"] a[aria-current="page"] {
  color: var(--colorPrimary900) !important;
}

[role="tablist"] a:focus-visible {
  border-radius: var(--borderRadiusControl) !important;
  outline: 2px solid var(--colorPrimary600) !important;
  outline-offset: -2px !important;
}

[role="tab"] {
  /* CSS styles */
  justify-content: center;
  display: flex;
  margin-left: 0 !important;
  padding: 16px !important;
}

[role="tabpanel"] {
  background-color: #ffffff !important;
}

body {
  padding-top: 0;
}

h2 {
  margin-top: 2rem !important;
}

h2:first-of-type {
  margin-top: 0 !important;
}