/* Initial styling taken from: https://www.phoenixcontact.com/l/evalanche-formular?formId=h38n1.2fke3g0 then modified for CRISP */
#form, #form_response {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#form_error_validation, #form_error_mandatory, #form_error_mandatory_title, #form_error_validation_title {
  white-space: pre-line;
  padding: 5px 50px;
}

#form_shorttext {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 300;
  display: block;
  color: #3a3a3a;
  margin-bottom: 24px;
}

#form_container {
  width: auto;
}

#form_error {
  scroll-margin-top: 175px;
}

@media (min-width: 576px) {
  #form_container {
    width: 600px;
  }
}

@media (min-width: 768px) {
  #form, #form_response {
    padding: 30px 100px;
  }

  #form_error_mandatory, #form_error_validation, #form_error_mandatory_title, #form_error_validation_title {
    padding: 5px 50px;
  }

  #form_shorttext {
    padding: 10px 100px;
  }

  #form_container {
    width: 700px;
  }
}

@media (min-width: 900px) {
  #form, #form_response {
    padding: 0px 0px;
  }

  #form_error_mandatory, #form_error_validation, #form_error_mandatory_title, #form_error_validation_title {
    padding: 5px 0px;
  }

  #form_shorttext {
    padding: 10px 0px;
  }

  #form_container {
    width: 750px;
  }
}

#form_title {
  display: none;
}

#form_response {
  font-size: 1.4em;
}

.mandatory-error, #form_error_mandatory,
#form_error_mandatory_title, #form_error,
.mandatory.validation_error + div.validation_error_message,
.mandatory.validation_error + label.validation_error_message,
.mandatory.validation_error + label,
.field_validation_error > label.mandatory {
  color: #F00;
}

#form_error_validation,
#form_error_validation_title {
  color: #ff9a00 !important;
}

#form_error_mandatory_title,
#form_error_validation_title,
#mandatory_error,
.field_validation_error > label.mandatory {
  font-weight: bold;
}

label.mandatory {
  font-weight: bold;
}

.form_col {
  padding-bottom: 10px;
}

.form_col label {
  margin-bottom: 5px;
}

#form input,
#form textarea {
  box-sizing: border-box;
  padding: 24px 0 0 16px;
  resize: none;
  color: #202020;
  background: #f4f4f4;
  width: 100%;
  border: none;
  overflow: auto;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  caret-color: #007c84;
  line-height: 2;
  box-shadow: inset 0 -1px #a6a6a6;
}

#form input:focus,
#form select:focus,
#form textarea:focus {
  box-shadow: inset 0 -2px 0 1px #007c84, inset 0 1px #007c84;
}

#form select {
  box-sizing: border-box;
  padding: 27px 49px 8px 16px;
  resize: none;
  color: #202020;
  background: #f4f4f4;
  width: 100%;
  border: none;
  overflow: auto;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  caret-color: #007c84;
  line-height: 2;
  box-shadow: inset 0 -1px #a6a6a6;
}

#form input[type="checkbox"], #form input[type="radio"] {
  height: 15px;
  width: 15px;
  -webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
  margin-left: 5px;
  margin-right: 0.5rem;
}

#form textarea {
  height: 80px;
}

#form input[type="submit"] {
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.25;
  font-family: inherit;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(32, 32, 32, .30196);
  cursor: pointer;
  transition-property: color, background-color, box-shadow;
  transition-duration: .15s;
  transition-timing-function: ease-in-out;
  font-size: 1.2rem;
  padding: 16px 24px;
  display: flex;
  width: auto;
  background-color: #007c84;
  color: #fff !important;
  float: right;
}

#form input[type="submit"]:disabled {
  opacity: 1;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
  background-color: #f4f4f4;
  color: #d2d2d2 !important;
}

.frc-banner {
  right: 0px !important;
  position: relative !important;
}