.aqcf {
  position: relative;
  width: 100%;
}

.aqcf *,
.aqcf *::before,
.aqcf *::after {
  box-sizing: border-box;
}

.aqcf__form {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 50px;
}

.aqcf__form fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "name phone email"
    "message message message"
    "resume resume resume";
}

.aqcf__form legend {
  display: none;
}

.aqcf__field {
  position: relative;
  min-width: 0;
  margin: 0;
}

.aqcf__field--name {
  grid-area: name;
}

.aqcf__field--phone {
  grid-area: phone;
}

.aqcf__field--email {
  grid-area: email;
}

.aqcf__field--message {
  grid-area: message;
}

.aqcf__field--resume {
  grid-area: resume;
}

/* Override the legacy career-form nth-child grid areas from base.css. */
.carrer-form .aqcf__form fieldset > .aqcf__field--resume {
  grid-area: resume;
}

.aqcf__field.required-input::before {
  display: none;
}

.aqcf__field > label {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 0;
  color: #fff;
  font: 19px/1 Barlow, sans-serif;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform .4s, opacity .4s;
}

.aqcf__field.is-focus > label,
.aqcf__field.is-filled > label {
  opacity: .66;
  transform: scale(.66) translateY(-12px);
}

.aqcf__field > input:not([type="file"]),
.aqcf__field > textarea {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  padding: 24px 10px 4px;
  border: 1px solid transparent;
  border-bottom: 1px solid #848484;
  border-radius: 0;
  outline: 0;
  background: #9d9c9c;
  color: #333;
  font: 19px/1.2 Barlow, sans-serif;
  transition: border-color .4s, box-shadow .4s;
  -webkit-appearance: none;
  appearance: none;
}

.aqcf__field > textarea {
  min-height: 145px;
  height: 100%;
  max-height: 320px;
  resize: vertical;
  font-size: 16px;
}

.aqcf__field:focus-within > input:not([type="file"]),
.aqcf__field:focus-within > textarea {
  box-shadow: 0 12px 34px -28px rgba(0, 0, 0, .35);
}

.aqcf__field--resume > label {
  position: relative;
  top: 0;
  left: 10px;
  display: block;
  margin: 0 0 4px;
}

.aqcf__field--resume > input[type="file"] {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 16px/1.3 Barlow, sans-serif;
}

.aqcf__field--resume > input[type="file"]::file-selector-button {
  margin-right: 7px;
  padding: 2px 6px;
  border: 0;
  background: #fff;
  color: #000;
  font: inherit;
  cursor: pointer;
}

.aqcf__field--resume > button {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 13px/1.3 Barlow, sans-serif;
  cursor: pointer;
}

.aqcf__field-error {
  position: absolute;
  z-index: 3;
  top: calc(100% + 3px);
  left: 0;
  display: block;
  color: #ffd5d5;
  font-size: 12px;
  line-height: 1.2;
}

.aqcf__field--message .aqcf__field-error,
.aqcf__field--resume .aqcf__field-error {
  top: auto;
  bottom: -18px;
}

.aqcf__field.is-errored > input:not([type="file"]),
.aqcf__field.is-errored > textarea {
  border-bottom-color: #a80000;
}

.aqcf__field.is-errored > input[type="file"] {
  outline: 1px solid #a80000;
}

.aqcf__form .google-recaptcha {
  min-height: 78px;
  margin: 60px 0 15px;
  text-align: left;
}

.aqcf__form .google-recaptcha > div {
  margin-left: 0;
}

.aqcf__form .submit-field {
  position: absolute;
  right: 0;
  bottom: 20px;
  margin: 0;
  text-align: right;
}

.aqcf__form .submit-field::after {
  position: absolute;
  top: 52%;
  right: 35px;
  color: #000;
  content: "\f3d1";
  font: normal 13px/1 Ionicons;
  pointer-events: none;
  transform: translateY(-52%);
}

.aqcf__form input[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 15px 55px 15px 35px;
  border: 1px solid #fff;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .15);
  color: #000;
  font: 500 17px/1.2 Barlow, sans-serif;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s, border-color .4s, color .4s;
  -webkit-appearance: none;
  appearance: none;
}

.aqcf__form input[type="submit"]:hover,
.aqcf__form input[type="submit"]:focus-visible {
  border-color: #000;
  outline: 0;
  background: #000;
  color: #fff;
}

.aqcf__form input[type="submit"]:disabled,
.aqcf__form input[type="submit"].submit-disabled {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
  cursor: wait;
  pointer-events: none;
}

.aqcf__form .form-status {
  display: none;
  order: 4;
  margin: 20px 0 0;
  padding: .65em 1em .75em;
  border: 2px solid #00a0d2;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .05);
  color: #fff;
  font-size: 18px;
  text-align: center;
}

.aqcf__form .form-status.alert-danger {
  display: block;
  border-color: #eb5353;
}

.aqcf__form .form-status.alert-success {
  display: block;
  border-color: #00d259;
}

.aqcf__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .aqcf__form fieldset {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "phone"
      "email"
      "message"
      "resume";
  }

  .aqcf__field {
    margin-bottom: 10px;
  }

  .aqcf__field--message > textarea {
    min-height: 145px;
  }
}

@media (max-width: 900px) {
  .aqcf__form .submit-field {
    right: 0;
  }
}

@media (max-width: 600px) {
  .aqcf__form {
    margin-top: 30px;
  }

  .aqcf__field > label {
    font-size: 17px;
  }

  .aqcf__field > input:not([type="file"]),
  .aqcf__field > textarea {
    font-size: 17px;
  }

  .aqcf__form .google-recaptcha {
    min-height: 61px;
    margin-top: 90px;
  }

  .aqcf__form .google-recaptcha > div {
    transform: scale(.77);
    transform-origin: 0 0;
  }

  .aqcf__form .submit-field {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    text-align: left;
  }

  .aqcf__form .submit-field::after {
    top: 50%;
  }
}