:root {
  /* copy these from openai-css */
  --bg: 237, 238, 241;
  --fg: 25, 25, 39;
  --sans-serif: ColfaxAI, Helvetica, sans-serif;
  --serif: Charter, Georgia, serif;
  --v: 1.4rem;
  --font-size-medium-small: 0.916667rem;
  --font-size-medium-xsmall: 0.833333rem;
  --font-size-small: 0.75rem;
  --font-size-xsmall: 0.666667rem;
}

@font-face {
  font-family: "ColfaxAI";
  src:
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/ColfaxAIRegular.woff2?v=2.0.0) format("woff2"),
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/ColfaxAIRegular.woff?v=2.0.0) format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ColfaxAI";
  src:
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/ColfaxAIBold.woff2?v=2.0.0) format("woff2"),
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/ColfaxAIBold.woff?v=2.0.0) format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Charter";
  src:
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/Charter-Regular.woff2) format("woff2"),
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/Charter-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Charter";
  src:
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/Charter-Bold.woff2) format("woff2"),
    url(https://cdn.openai.com/miscellaneous/observable-2.1.9/fonts/Charter-Bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

html {
  box-sizing: border-box;
  font-size: 17.5px;
}
@media (min-width: 960px) {
  html {
    font-size: 20px;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  font-family: var(--serif);
}

body {
  font-size: 1em;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(var(--fg), 1);
  background-color: rgba(var(--bg), 1);
  position: relative;
}

.logo-container {
  display: none;
}

#wrapper {
  padding: calc(var(--v) * 3) 0 calc(var(--v) * 4);
  max-width: 36rem;
  width: 93.333333%;
  margin-left: auto;
  margin-right: auto;
}

#main {
  padding: unset;
}

#app_body {
  position: unset;
  padding-left: 0 !important;
  max-width: unset;
  padding-top: calc(var(--v) * 2);
}

#header {
  margin-bottom: var(--v);
  position: relative;
  padding-right: unset;
}

#content a {
  text-decoration: underline;
}
#content a:hover {
  opacity: 0.7;
}

h1 {
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.0175em;
  margin-top: 0;
}
@media (min-width: 960px) {
  h1 {
    font-size: 2.25rem;
    line-height: 1.05;
  }
}
/*@media (min-width: 1280px) {
  h1 {
    font-size: 2.5rem;
  }
}*/
h1,
#app_body h1 {
  margin-bottom: var(--v);
}

.company-name {
  font-size: inherit;
}
.company-name,
.company-name + a {
  position: absolute;
  top: calc(var(--v) * -0.166667);
  transform: translateY(-100%);
  visibility: hidden;
  font-family: var(--sans-serif);
  font-size: var(--font-size-xsmall);
  letter-spacing: 0.05em;
  font-weight: normal;
  text-transform: uppercase;
}
.company-name + a {
  margin-left: 5.3em;
}
.company-name:before,
.company-name + a:before {
  visibility: visible;
}
.company-name:before {
  content: 'OpenAI / ';
}
.company-name + a:before {
  content: 'Jobs';
}

a {
  color: inherit;
}

.location {
  color: rgba(var(--fg), 0.6);
  margin: 0;
  font-family: var(--sans-serif);
  font-size: var(--font-size-medium-small);
}

p,
ul,
.content-intro {
  margin-bottom: var(--v);
}

.accessible #content {
  line-height: inherit;
}

.content-conclusion {
  margin-top: calc(var(--v) * 2);
}

#apply_button {
  visibility: hidden;
}

.accessible #submit_app,
.accessible #apply_button {
  font-family: var(--sans-serif);
  font-size: var(--font-size-xsmall);
  letter-spacing: 0.05em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.7em 1.333333em 0.6em;
  border-radius: 3em;
  background-color: rgba(var(--fg), 1);
  color: rgba(var(--bg), 1) !important
  transition: unset;
}
.accessible #submit_app:hover,
.accessible #apply_button:hover {
  background-color: rgba(var(--fg), 0.875);
}

#application {
  padding: 0;
  background-color: unset;
  max-width: unset;
  font-size: var(--font-size-medium-xsmall);
  font-family: var(--sans-serif);
}

#application:before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(var(--fg), 0.1);
  width: 100vw;
  left: 0;
  right: 0;
  position: absolute;
}

#main_fields {
  margin-top: calc(var(--v) * 3.5);
  padding-top: calc(var(--v) * 3.5);
}

#application .heading {
  float: inherit;
  margin-bottom: calc(var(--v) * 1);
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 960px) {
  #application .heading {
    font-size: 1.666667rem;
  }
}

#application div.required-fields {
  font-size: var(--font-size-small);
  color: inherit;
}

#main_fields div.field label,
#custom_fields div.field label,
#demographic_questions div.field label,
#eeoc_fields div.field label {
  font-size: inherit;
  line-height: inherit;
}

#main_fields div.field label,
#eeoc_fields div.field label {
  float: unset;
  width: unset;
  text-align: unset;
  margin-right: unset;
}

#main_fields .asterisk,
#custom_fields .asterisk,
#demographic_questions .asterisk,
#eeoc_fields .asterisk {
  color: #EF4146;
}

#main_fields div.field,
#custom_fields div.field,
#demographic_questions div.field,
#eeoc_fields div.field {
  margin-bottom: calc(var(--v) * 1);
}

.accessible #custom_fields div.field {
  line-height: unset;
  margin-bottom: calc(var(--v) * 1);
}

#main_fields div.field input[type=text],
#main_fields div.field textarea,
#main_fields div.field .text-field,
#main_fields #custom_fields div.field .select2-container-multi,
#custom_fields #main_fields div.field .select2-container-multi,
#custom_fields div.field input[type=text],
#custom_fields div.field textarea,
#custom_fields div.field .text-field,
#custom_fields div.field .select2-container-multi,
#demographic_questions div.field input[type=text],
#demographic_questions div.field textarea,
#demographic_questions div.field .text-field,
#demographic_questions #custom_fields div.field .select2-container-multi,
#custom_fields #demographic_questions div.field .select2-container-multi,
#eeoc_fields div.field input[type=text],
#eeoc_fields div.field textarea,
#eeoc_fields div.field .text-field,
#eeoc_fields #custom_fields div.field .select2-container-multi,
#custom_fields #eeoc_fields div.field .select2-container-multi {
  border-color: transparent;
  padding-top: 6px;
  padding-bottom: 4px;
  padding-left: 0.5em !important;
  padding-right: 0.5em;
  border-radius: 4px;
}

#main_fields div.field input[type=text]:hover,
#main_fields div.field textarea:hover,
#main_fields div.field .text-field:hover,
#main_fields #custom_fields div.field .select2-container-multi:hover,
#custom_fields #main_fields div.field .select2-container-multi:hover,
#custom_fields div.field input[type=text]:hover,
#custom_fields div.field textarea:hover,
#custom_fields div.field .text-field:hover,
#custom_fields div.field .select2-container-multi:hover,
#demographic_questions div.field input[type=text]:hover,
#demographic_questions div.field textarea:hover,
#demographic_questions div.field .text-field:hover,
#demographic_questions #custom_fields div.field .select2-container-multi:hover,
#custom_fields #demographic_questions div.field .select2-container-multi:hover,
#eeoc_fields div.field input[type=text]:hover,
#eeoc_fields div.field textarea:hover,
#eeoc_fields div.field .text-field:hover,
#eeoc_fields #custom_fields div.field .select2-container-multi:hover,
#custom_fields #eeoc_fields div.field .select2-container-multi:hover {
  border-color: rgba(var(--fg), 0.1);
}

#main_fields div.field input[type=text]:focus,
#main_fields div.field textarea:focus,
#main_fields div.field .text-field:focus,
#main_fields #custom_fields div.field .select2-container-multi:focus,
#custom_fields #main_fields div.field .select2-container-multi:focus,
#custom_fields div.field input[type=text]:focus,
#custom_fields div.field textarea:focus,
#custom_fields div.field .text-field:focus,
#custom_fields div.field .select2-container-multi:focus,
#demographic_questions div.field input[type=text]:focus,
#demographic_questions div.field textarea:focus,
#demographic_questions div.field .text-field:focus,
#demographic_questions #custom_fields div.field .select2-container-multi:focus,
#custom_fields #demographic_questions div.field .select2-container-multi:focus,
#eeoc_fields div.field input[type=text]:focus,
#eeoc_fields div.field textarea:focus,
#eeoc_fields div.field .text-field:focus,
#eeoc_fields #custom_fields div.field .select2-container-multi:focus,
#custom_fields #eeoc_fields div.field .select2-container-multi:focus {
  border-color: rgba(var(--fg), 0.5);
}

#main_fields div.field input[type=text],
#main_fields div.field textarea,
#eeoc_fields div.field input[type=text],
#eeoc_fields div.field textarea {
  width: 100%;
  font-size: inherit;
}

#main_fields div.field textarea.paste,
#eeoc_fields div.field textarea.paste {
  margin-left: unset;
}

#custom_fields div.field input[type=text],
#custom_fields div.field textarea,
#custom_fields div.field .text-field,
#custom_fields div.field .select2-container-multi {
  width: 100%;
}

#main hr {
  margin-top: calc(var(--v) * 1.5);
  margin-bottom: calc(var(--v) * 1.5);
  background-color: rgba(var(--fg), 0.1);
}

#main_fields div.field label:not(:first-child),
#custom_fields div.field label:not(:first-child),
#demographic_questions div.field label:not(:first-child),
#eeoc_fields div.field label:not(:first-child) {
  margin-top: calc(var(--v) * 0.5);
  display: block !important;
}

.link-container {
  margin-top: calc(var(--v) * 0.5);
  margin-bottom: calc(var(--v) * 1);
}

.attach-or-paste .link-container a {
  font-family: var(--sans-serif) !important;
  font-size: var(--font-size-xsmall);
  line-height: inherit;
  letter-spacing: 0.05em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.7em 1.333333em 0.6em;
  border-radius: 3em;
  background-color: rgba(var(--fg), 0.05);
  color: inherit !important;
  border: unset !important;
  background-image: unset;
  transition: unset;
  margin-bottom: calc(var(--v) * 1/3);
}
.attach-or-paste .link-container a:active:not(.disabled-button),
.attach-or-paste .link-container a:active,
.attach-or-paste .link-container a.active {
  box-shadow: unset;
}
.attach-or-paste .link-container a:hover {
  background-color: rgba(var(--fg), 0.08);
  text-decoration: none;
}

.attach-or-paste .link-container a:not(:last-child)::after {
  content: unset;
}

.attach-or-paste .link-container a:not(:last-child) {
  margin-right: 0.5em;
}

label + br {
  display: none;
}
br + label {
  margin-top: 0 !important;
}

.select2-results {
  font-size: var(--font-size-medium-xsmall);
  font-family: var(--sans-serif);
}

#main_fields div.field,
#custom_fields div.field,
#demographic_questions div.field,
#eeoc_fields div.field {
  line-height: inherit;
}

#submit_buttons {
  text-align: unset;
}

#footer {
  display: none;
}

/* jobs index */
.accessible .filter-container {
  display: none;
}

h2 {
  font-weight: normal;
  margin: 0;
  font-size: 1.333333rem;
  line-height: 1.25;
  letter-spacing: -0.0075em;
}
@media (min-width: 960px) {
  h2 {
    font-size: 1.5rem;
  }
}

.accessible .opening {
  line-height: inherit;
  font-family: var(--sans-serif);
  font-size: var(--font-size-medium-xsmall);
}

.opening {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(var(--fg), 0.1);
  border-top: 1px solid rgba(var(--fg), 0.1);
  padding-top: calc(var(--v) * 7/12);
  padding-bottom: calc(var(--v) * 0.5);
}

.opening + .opening {
  border-top: unset;
}

.opening a,
.opening .location {
  font-size: inherit;
}

.accessible .level-0 h2,
.accessible .level-0 h3,
.accessible .level-0 h4,
.accessible .level-0 h5,
.accessible .level-0 h6 {
  font-family: var(--sans-serif);
  font-size: 1rem;
  font-weight: normal;
  margin-top: calc(var(--v) * 2);
  margin-bottom: calc(var(--v) * 1/3);
}
