/* https://wpforms.com/developers/how-to-center-a-form/ */

/* Form nicht anzeigen, erst bei klick auf fragebogen starten */
#form-section {
  display: none;
}

/* Stern nicht anzeigen bei required */
.wpforms-required-label {
  display: none;
}

/* Continer mittig */
div.wpforms-container.wpforms-bewerbung {
  margin: 0 auto;
}

/* Label Text mittig bei mobile */
@media screen and (max-width: 768px) {
  div.wpforms-container.wpforms-bewerbung .wpforms-field-label {
    text-align: center;
  }
}

/* Text size angleichen mit restlicher page */
div.wpforms-container .wpforms-form .wpforms-field-label-inline,
div.wpforms-container .wpforms-form .wpforms-field-label {
  font-size: 20px;
}

/* Kriterien unpassend Danke text */
div.wpforms-container .wpforms-form .kriterien-unpassend-danke {
  text-align: center;
}

/* Field spacing */
div.wpforms-bewerbung .wpforms-form .wpforms-page .wpforms-field {
  padding: 0;
}

/* Buttons */
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"],
.button,
.wpforms-submit,
body div.wpforms-container .wpforms-form input[type="submit"],
body div.wpforms-container .wpforms-form button[type="submit"],
body div.wpforms-container .wpforms-form .wpforms-page-button {
  font-size: 20px;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  border-radius: 2px;
  background-color: var(--perscon-black);
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover,
.wpforms-submit:hover,
body div.wpforms-container .wpforms-form input[type="submit"]:hover,
body div.wpforms-container .wpforms-form button[type="submit"]:hover,
body div.wpforms-container .wpforms-form .wpforms-page-button:hover {
  background-color: var(--perscon-red);
  color: var(--button-hover);
}

/* Fragetext */
div.wpforms-bewerbung .wpforms-form .wpforms-field-label {
  margin-bottom: 20px;
}

/* Absenden Button */
div.wpforms-bewerbung .wpforms-form button[type="submit"].wpforms-submit {
  width: 100%;
  padding: 18px 0 !important;
  margin-top: 10px;
  border-radius: 2px;
}

div.wpforms-bewerbung .wpforms-form button[type="submit"].wpforms-submit:hover {
  border: none;
}

/* submit fields */
div.wpforms-bewerbung
  .wpforms-form
  .submit-field
  input[type="text"]::placeholder,
div.wpforms-bewerbung
  .wpforms-form
  .submit-field
  input[type="tel"]::placeholder,
div.wpforms-bewerbung
  .wpforms-form
  .submit-field
  input[type="email"]::placeholder,
div.wpforms-bewerbung .wpforms-form .submit-field textarea::placeholder {
  color: var(--perscon-grey);
}

div.wpforms-bewerbung .wpforms-form .submit-field {
  border-radius: 2px;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  margin: 15px 0 !important;
  transition: all 0.3s ease;
}

.submit-text {
  box-shadow: none !important;
}

div.wpforms-bewerbung .wpforms-form .submit-field input {
  border: none;
  font-size: 20px;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
}

div.wpforms-bewerbung .wpforms-form .submit-field input.wpforms-error {
  border: none;
}

div.wpforms-bewerbung
  .wpforms-form
  .submit-field:not(.datenschutz-checkbox):focus-within {
  border: 2px solid var(--perscon-red);
  color: var(--perscon-black);
  box-shadow: none;
  transition: all 0.3s ease;
}

div.wpforms-bewerbung .wpforms-form input[type="text"],
div.wpforms-bewerbung .wpforms-form input[type="tel"],
div.wpforms-bewerbung .wpforms-form input[type="email"] {
  padding: 18px 15px !important;
  height: 60px;
}

/* error messages */
div.wpforms-bewerbung .wpforms-form label.wpforms-error {
  color: var(--perscon-red);
  padding-left: 15px;
}

/* multiple choice / checkbox */
div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  ul
  li {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 18px 15px !important;
  margin: 20px 0 !important;
}

div.wpforms-bewerbung .wpforms-form .wpforms-field-checkbox ul li label:hover {
  cursor: pointer;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  ul
  li:first-of-type {
  margin-top: 0 !important;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  ul
  li:last-of-type {
  margin-bottom: 0 !important;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  input[type="checkbox"],
div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  input[type="checkbox"].wpforms-error {
  border: 2px solid var(--perscon-red);
  border-radius: 2px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px 0 0;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-page
  .wpforms-field-checkbox
  input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  box-shadow: inset 1em 1em var(--perscon-red);
  border-radius: 2px;
  margin-bottom: 0;
  display: none;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-field-checkbox
  input[type="checkbox"]:checked::before {
  display: inline-block;
}

/* single choice(radio) */
div.wpforms-bewerbung .wpforms-form .wpforms-field-radio input[type="radio"] {
  display: none !important;
}

div.wpforms-bewerbung .wpforms-form .wpforms-field-radio ul li {
  text-align: center;
  margin: 15px 0 !important;
}

div.wpforms-bewerbung .wpforms-form .wpforms-field-radio ul li:last-of-type {
  margin-bottom: 0 !important;
}

div.wpforms-bewerbung .wpforms-form .wpforms-field-radio ul li:first-of-type {
  margin-top: 0 !important;
}

div.wpforms-bewerbung .wpforms-form input[type="radio"] + label {
  display: block;
  padding: 15px 20px !important;
  background-color: var(--perscon-black) !important;
  color: var(--perscon-white) !important;
  transition: background-color 0.3s ease-in-out !important;
  border-radius: 2px;
}

div.wpforms-bewerbung .wpforms-form input[type="radio"]:checked + label {
  background-color: var(--perscon-red) !important;
}

div.wpforms-bewerbung .wpforms-form input[type="radio"] + label:hover {
  cursor: pointer;
  background-color: var(--perscon-red) !important;
  color: var(--button-hover) !important;
}

/* multiple choice(radio) fragen mit icons*/
div.wpforms-bewerbung
  .wpforms-form
  .wpforms-icon-choices
  li.wpforms-icon-choices-item
  label.wpforms-field-label-inline {
  background-color: var(--perscon-black) !important;
  color: var(--perscon-white) !important;
  transition: all 0.3s ease-in-out !important;
  box-shadow: none !important;
  border-radius: 2px;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-icon-choices
  li.wpforms-icon-choices-item
  label.wpforms-field-label-inline:hover {
  background-color: var(--perscon-red) !important;
  color: var(--button-hover) !important;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-icon-choices
  li.wpforms-icon-choices-item
  label.wpforms-field-label-inline:hover
  svg {
  fill: var(--button-hover) !important;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-icon-choices
  li.wpforms-icon-choices-item
  label.wpforms-field-label-inline
  .wpforms-icon-choices-icon
  svg {
  fill: var(--perscon-white);
  transition: all 0.3s ease-in-out !important;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-icon-choices
  li.wpforms-icon-choices-item.wpforms-selected
  label.wpforms-field-label-inline {
  background-color: var(--perscon-red) !important;
}

/* multple choice mit icons wird zu groß auf mobile 
und bekommen anscheinend overflow-x hidden, wobei das eigentlich fehler produziert */
@media only screen and (max-width: 600px) {
  div.wpforms-container
    .wpforms-form
    .wpforms-field:not(.wpforms-field-phone):not(
      .wpforms-field-select-style-modern
    ) {
    overflow-x: visible;
  }
}

/* weiter und zurueck buttons */
div.wpforms-bewerbung .wpforms-form .wpforms-field.wpforms-field-pagebreak div {
  margin-top: 15px;
  display: flex;
  border-radius: 2px;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-field.wpforms-field-pagebreak
  div
  button:disabled {
  border: none !important;
  background-color: var(--perscon-black);
  cursor: not-allowed;
  opacity: 0.7;
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-field.wpforms-field-pagebreak
  div
  button.wpforms-page-button {
  background-color: var(--perscon-black);
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-field.wpforms-field-pagebreak
  div
  button.wpforms-page-button:hover {
  border: none !important;
  background-color: var(--perscon-red);
  color: var(--button-hover);
}

div.wpforms-bewerbung
  .wpforms-form
  .wpforms-field.wpforms-field-pagebreak
  div
  .wpforms-page-button.wpforms-page-next {
  margin-left: auto;
}

/* Progress bar */
div.wpforms-bewerbung .wpforms-page-indicator-page-progress-wrap {
  display: none !important;
}

div.wpforms-bewerbung .wpforms-page-1 .wpforms-field-pagebreak:first-child {
  display: none !important;
}

div.wpforms-bewerbung .wpforms-page-indicator.progress {
  margin-bottom: 10px;
  text-align: center;
}