@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

:root {
  --color-primary-green: #299145;
  --color-primary-yellow: #ffda57;
  --color-primary-red: #ec1e28;
  --color-primary-beige: #f2eee7;
}

.path-webform {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 16px;
  color: #000;

  .block-page-title-block {
    display: none;
  }

  label {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  legend {
    font-size: 20px;
  }

  .form-description {
    opacity: 40%;
    font-style: italic;
  }

  .js-form-type-radio {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    label {
      margin-bottom: 0;
    }
  }

  input[type='radio']:after {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    top: -2px;
    left: -2px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: block;
    visibility: visible;
    border: 2px solid white;
  }

  input[type='radio']:checked:after {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    top: -2px;
    left: -2px;
    position: relative;
    background-color: var(--color-primary-red);
    content: '';
    display: block;
    visibility: visible;
    border: 2px solid white;
  }

  /* Target Safari on touch devices (iPhones, iPads) */
  @supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
    @media (hover: none) and (pointer: coarse) {
      input[type='radio']:after {
        top: 0px;
        left: 0px;
      }

      input[type='radio']:checked:after {
        top: 0px;
        left: 0px;
      }
    }
  }

  #edit-comments {
    min-height: 236px;
  }

  .btn-primary {
    background: var(--color-primary-red);
    color: #fff;
    border: 2px solid #fff;
    -webkit-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    border-radius: calc(infinity * 1px);
    padding: 8px 16px;
    width: 254px;
    height: 48px;
    font-size: 18px;
    font-weight: bold;
    &:hover {
      background: transparent;
      color: var(--color-primary-red);
      border: 2px solid var(--color-primary-red);
    }
  }

  /* Careers Page */
  h2 {
    font-size: 26px;
    color: var(--color-primary-red);
    text-transform: uppercase;
    font-weight: bold;
  }

  h3 {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  #edit-high-school > legend .fieldset-legend,
  #edit-college > legend .fieldset-legend,
  #edit-other > legend .fieldset-legend,
  #edit-previous-employment-1 > legend .fieldset-legend,
  #edit-previous-employment-2 > legend .fieldset-legend,
  #edit-previous-employment-3 > legend .fieldset-legend,
  #edit-reference-1 > legend .fieldset-legend,
  #edit-reference-2 > legend .fieldset-legend {
    color: var(--color-primary-green);
    font-weight: bold;
    margin-bottom: 20px;
  }

  .mt-50 {
    margin-top: 50px;
  }
}