@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/***
 *** Set the root things we want
 ***/
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;

  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/***
 *** Remove default styles
 ***/
#main, #app_body, #application {
  position: unset;

  min-height: unset;
  max-width: unset;

  margin: unset;
  padding: unset;

  overflow: unset;
}

#app_body {
  /* This has padding-left: 20px inlined */
  padding: unset !important;
}

.logo-container {
  display: none;
}

#application,
.field,
.field label,
.field textarea,
.field select,
.field input,
.field legend,
.field .asterisk,
.field-error-msg,
.button,
.unstyled-button,
.link-container a,
#submission_received a {
  font-size: unset !important;
  line-height: unset !important;

  width: unset !important;
  margin: unset !important;
  padding: unset !important;

  border-radius: unset !important;
}

#application,
.unstyled-button,
.link-container a {
  background-color: unset !important;
}

#application .link-container a {
  /*
  There's a media query that turns these into buttons on small screens. The
  #application is just there to increase specificity
  */
  border: none !important;
  padding: unset;

  font-family: inherit !important;
  font-weight: unset;

  text-align: unset;

  background-image: none;
}

.field label > input {
  /* inputs inside labels are weird */
  width: 100% !important;
}

.field label {
  text-align: unset !important;
}

.select2-container {
  width: unset !important;
}

.select2-choice {
  height: unset !important;
}

.select2-choice, .select2-drop {
  border-radius: unset !important;
}

.select2-arrow {
  display: none !important;
}

.field p {
  margin: unset;
}

/***
 *** Style individual elements
 ***/
.heading, .required-fields {
  display: none;
}

.field, .field fieldset {
  display: flex;
  flex-direction: column;
}

.field label {
  font-weight: 500;
  margin-bottom: 4px !important;
}

.field label > input {
  margin-top: 4px !important;
}

.field input, .field textarea, .field select {
  border: 1px solid #000 !important;
  margin-bottom: 12px !important;
  padding: 8px 16px !important;
  width: 100% !important;
}

.select2-container {
  width: 100% !important;
  margin-bottom: 12px !important;
}

.select2-choice {
  border: 1px solid #000 !important;
  padding: 8px 16px !important;
  width: 100% !important;
}

.select2-drop-active {
  border: 1px solid #000 !important;
  border-top: none !important;
}

.education .field fieldset, .employment .field fieldset {
  display: grid;
  grid-template-columns: 64px 80px;
  grid-template-rows: auto auto;
  column-gap: 5px;
}

.education .field fieldset legend, .employment .field fieldset legend {
 grid-column: span 2;
}

.field input.month, .field input.year {
  text-align: center;
  /* Force this to apply */
  width: inherit !important;
  /* Override a media query that adds margin top to year inputs */
  margin-top: 0 !important;
}

#add_education, #add_employment {
  margin: 0;
  margin-bottom: 15px;
}

.field input:focus, .field textarea:focus, .field select:focus {
  border-color: #3898ec !important;
}

.field label > input[type=checkbox] {
  width: unset !important;
  margin: unset !important;
}

#custom_fields .field {
  margin-bottom: 12px !important;
}

#custom_fields .field > label {
  margin-bottom: unset !important;
}

.link-button {
  color: #297bb3 !important;
}
#application .link-container a {
  /* #application for specificity again */
  color: #297bb3 !important;
}

.link-button:not(:last-child)::after,
.link-container a:not(:last-child)::after {
  content: ",";
}

.link-button:hover,
.link-container a:hover {
  text-decoration: underline !important;
}

.button, #submission_received a {
  /* Allow button text to flow onto 2 lines nicely */
  display: inline-block;
  white-space: normal;

  color: #000 !important;
  font-weight: 400;
  text-shadow: unset !important;
  text-decoration: none;

  background-color: #fff !important;
  background-image: none !important;

  border: 1px solid #00000014 !important;
  border-radius: 320px !important;

  padding: 12px 16px !important;

  transition: color 0.3s, background-color 0.3s !important;
}

.button:hover, #submission_received a:hover {
  color: #fff !important;
  background-color: #000 !important;
}

#application {
  margin-bottom: 100px !important;
}