/* This file is referenced in the Greenhouse iframe when loaded on the careers page. */
:root {
  --color-steel-ingigo: #183750;
  --color-porcelain: #ffffff;
  --color-graphite: #333333;
  --color-slab: #c9cacd;
  --color-slab-50: #828486;
  --color-accent: #627aec;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-9: 36px;
  --iframe-height: auto;
  --font-size-1: 16px;
  --font-size-2: 18px;
  --font-size-3: 20px;
  --font-size-4: 22px;
  --font-size-4b: 25px;
  --font-size-5: 30px;
  --font-size-6: 34px;
}

/* WRAPPER STYLES */
#main,
#embedded_job_board_wrapper,
#wrapper {
  padding: var(--spacing-0) !important;
}

#wrapper {
  overflow-x: hidden;
}

#embedded_job_board_wrapper {
  height: var(--iframe-height);
  overflow-y: auto;
  max-width: 648px;
  margin: 0 auto;
  background: transparent;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* TYPE STYLES */
#embedded_job_board_wrapper h2,
#embedded_job_board_wrapper h3,
#embedded_job_board_wrapper h4 {
  font-family: Times, serif;
  font-weight: normal;
  color: var(--color-graphite);
}

/* Hide main title as it's not needed. */
#embedded_job_board_wrapper h1 {
  display: none;
}

h2#board_title {
  font-size: var(--font-size-5);
}

.accessible .level-0 h3 {
  font-size: var(--font-size-4b);
  margin-bottom: var(--spacing-4);
}

.opening {
  margin-bottom: var(--spacing-9);
}

/* FILTERS */
.filter-container .filter-label {
  color: var(--color-graphite);
  font-size: var(--font-size-4);
  margin-bottom: var(--spacing-3);
}

.accessible .filter-container {
  width: 100% !important;
  max-width: 312px !important;
  height: unset;
  margin-bottom: var(--spacing-4);
}

.accessible .select2-container {
  width: 100% !important;
}

.accessible .select2-container .select2-chosen {
  color: var(--color-graphite) !important;
}

.select2-container .select2-choice {
  padding: var(--spacing-2);
  font-size: var(--font-size-3);
  height: unset;
  border-radius: 0;
}

.accessible .select2-choice {
  border-color: var(--color-slab);
}

.select2-results .select2-result-label {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.select2-drop ul.select2-results {
  font-size: var(--font-size-3);
}

.accessible .select2-container-active .select2-choice {
  border-color: var(--color-accent);
}

.select2-drop {
  border-radius: 0;
  border-color: var(--color-accent);
}

.select2-results .select2-highlighted {
  background-color: var(--color-accent);
}

/* JOB LISTINGS */
a {
  text-decoration: underline;
  color: var(--color-accent);
}

#embedded_job_board_wrapper a {
  color: var(--color-graphite);
}

.location {
  font-size: var(--font-size-1);
  color: var(--color-graphite) !important;
  display: block;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: var(--spacing-1);
}

::-webkit-scrollbar-track {
  background: var(--color-porcelain);
}

::-webkit-scrollbar-thumb {
  background: var(--color-slab-50);
}

/* === JOB POST STYLES === */

#app_body {
  margin: 0 auto;
}

#header .app-title {
  font-family: Times, serif;
  font-weight: normal;
  font-size: var(--font-size-6);
  color: var(--color-graphite);
}

.company-name {
  font-weight: 500;
  font-size: var(--font-size-3);
  color: var(--color-graphite);
}

#content li,
#content p {
  font-size: var(--font-size-1);
  color: var(--color-graphite);
  line-height: 1.25;
}

#content h4 {
  font-size: var(--font-size-2);
  color: var(--color-graphite);
}

#content li {
  margin-bottom: var(--spacing-3);
}

/* this unsets the unusually large padding on a job post on mobile */
@media (max-width: 640px) {
  #app_body .logo-container {
    height: 0 !important;
  }
}