/**
  Generelle Regeln
**/
#content .prozForm label,
#content .prozForm input:not(.coloredLinks),
#content .prozForm select,
body .select2AboDropdown *,
#content .prozForm .select2AboSelection * {
  font-family: var(--paragraph-font-sansserif);
  font-size: 16px;
  line-height: 23px;
  color: black;
}
@media(max-width: 576px){
  #content .prozForm label {
    font-size: 14px;
    line-height: 20px;
  }
}
#content .prozForm .notoSansBold {
  font-weight: bold;
}
#content .prozForm fieldset {
  border: none;
  padding: 0px;
  margin: 0px;
}
#content .prozForm legend {
  font-family: var(--accent-font-sansserif);
  font-size: 25px;
  line-height: 32px;
  padding: 0px 0px 15px;
}
@media(max-width: 576px){
  #content .prozForm legend {
    font-size: 20px;
    line-height: 23px;
  }
}
#content .prozForm .radioInput,
#content .prozForm .checkboxInput {
  display: flex;
  flex-flow: row;
  gap: 15px;
}
#content .prozForm input[type="radio"] {
  appearance: none;
  margin: 4px 0px 0px;
  padding: 0px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  width: 16px;
  height: 16px;
  transition: all 0.2s linear;
}
@media(max-width: 576px){
  #content .prozForm input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 3px 0px 0px;
  }
}
#content .prozForm input[type="radio"]:checked {
  border: 6px solid var(--accent-color);
}
@media(max-width: 576px){
  #content .prozForm input[type="radio"]:checked {
    border: 5px solid var(--accent-color);
  }
}
#content .prozForm input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-color);
  margin: 0px;
  align-self: center;
  padding: 0px;
}
@media(max-width: 576px){
  #content .prozForm input[type="checkbox"]  {
    width: 14px;
    height: 14px;
  }
}
#content .prozForm input[type=checkbox]:focus {
  border: 2px solid var(--accent-color);
}
#content .prozForm input[type="checkbox"]:checked::before {
  content: "close";
  font-family: 'Material Symbols Sharp';
  color: var(--accent-color);
  font-size: 22px;
  line-height: 22px;
  position: absolute;
  top: -5px;
  left: -5px;
}
@media(max-width: 576px){
  #content .prozForm input[type="checkbox"]:checked::before {
    font-size: 20px;
    line-height: 20px;
  }
}
#content .prozForm .select2AboSelection {
  display: flex;
  position: relative;
  width: 100%;
}
/* hide select2 arrow */
#content .prozForm .select2AboSelection .select2-selection__arrow {
  display: none;
}
/* add custom arrow */
#content .prozForm .select2AboSelection::after {
  content: "arrow_forward_ios";
  font-family: 'Material Symbols Sharp';
  font-size: 24px;
  transition: transform;
  transform: rotate(90deg);
  position: absolute;
  right: 10px;
  top: 13px;
}
@media(max-width: 576px){
  #content .prozForm .select2AboSelection::after {
    font-size: 16px;
    top: 12px;
  }
}
#content .prozForm input:not([type="checkbox"]):not([type="radio"]):not(.coloredLinks),
#content .prozForm .select2AboSelection {
  outline: none;
  height: 50px;
  width: 100%;
  border: 1px solid var(--grey-border-color);
  border-radius: 0px;
  padding: 10px;
  background-color: white;
}
@media(max-width: 576px) {
  #content .prozForm input:not([type="checkbox"]):not([type="radio"]):not(.coloredLinks),
  #content .prozForm .select2AboSelection {
    height: 40px;
    padding: 5px 10px;
  }
}
#content .prozForm input:focus:not([type="checkbox"]):not([type="radio"]):not(.coloredLinks),
#content .prozForm .select2AboSelection:focus {
  outline: none;
  border: 1px solid var(--accent-color);
}
#content .prozForm .select2AboSelection .select2-selection__rendered {
  padding: 0;
}
#content .prozForm input:invalid:not([type="checkbox"]):not([type="radio"]):not(.coloredLinks),
#content .prozForm input.validation-failed:not([type="checkbox"]):not([type="radio"]):not(.coloredLinks),
#content .prozForm select:invalid ~ .select2-container .select2AboSelection,
#content .prozForm select.validation-failed ~ .select2-container .select2AboSelection {
  border: 1px solid red;
}
#content .prozForm .label-field-wrapper{
  display: flex;
  flex-flow: column;
  gap: 5px;
}
#content .prozForm .submit {
  width: 154px;
}
/*select2 dropdown customizing*/
/* readd disabled border-top around dropdown */
body .select2-container .select2AboDropdown {
  border: 1px solid var(--grey-border-color);
}
body .select2-container .select2AboDropdown .select2-search__field {
  outline: none;
}
/* change highlighting on hover */
body .select2-container .select2AboDropdown .select2-results__option--highlighted[aria-selected] {
  background-color: white !important;
  color: var(--accent-color) !important;
}
/*styling of validation message*/
#content .prozForm div.validation-advice {
  display: flex;
  order: 1;
  background-color: #fff;
  color: #f44;
  margin-top: 0px;
  margin-bottom: 6px;
  width: 100%;
  padding: 0px;
}

/**
  Abo Formular
**/
#content #aboForm #aboFormWrapper {
  display: flex;
  flex-flow: column;
  gap: 25px;
  max-width: 850px;
}
#content #aboForm #aboFormWrapper #aboChoice {
  display: flex;
  flex-flow: column;
  gap: 25px;
}
#content #aboForm #aboFormWrapper #mainAbos,
#content #aboForm #aboFormWrapper #discountedAbos,
#content #aboForm #aboFormWrapper .fieldset-content.open,
#content #aboForm #aboFormWrapper #attachmentInfoWrapper,
#content #aboForm #aboFormWrapper #geschenkAboChoice {
  display: flex;
  flex-flow: column;
  gap: 15px;
}
#content #aboForm #aboFormWrapper #aboChoice .radioInput label span.notoSansBold {
  margin-right: 8px;
}
#content #aboForm #aboFormWrapper .fieldset-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
#content #aboForm #aboFormWrapper .fieldset-content.open {
  max-height: 100%;
  transition: max-height 0.3s ease-out;
  width: 100%;
}
#content #aboForm #aboFormWrapper #ausweiskopieWrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
#content #aboForm #aboFormWrapper #ausweiskopieWrapper.open {
  max-height: 100%;
  transition: max-height 0.3s ease-out;
}
#content #aboForm #aboFormWrapper #attachmentListWrapper {
  display: flex;
  flex-flow: row;
  gap: 20px;
}
#content #aboForm #aboFormWrapper .coloredLinks.upload {
  width: 234px;
}
#content #aboForm #aboFormWrapper input#attachmentFile {
  opacity: 0;
  height: 0px;
  padding: 0px;
}
#content #aboForm #aboFormWrapper #anredeTitelWrapper1,
#content #aboForm #aboFormWrapper #inv2PhonesWrapper,
#content #aboForm #aboFormWrapper #invPlzOrtWrapper,
#content #aboForm #aboFormWrapper #anredeTitelWrapper2,
#content #aboForm #aboFormWrapper #delPlzOrtWrapper,
#content #aboForm #aboFormWrapper #geschenkPlzOrtWrapper {
  display: flex;
  flex-flow: row;
  gap: 4%;
  width: 100%;
}
@media(max-width: 576px){
  #content #aboForm #aboFormWrapper #anredeTitelWrapper1,
  #content #aboForm #aboFormWrapper #inv2PhonesWrapper,
  #content #aboForm #aboFormWrapper #invPlzOrtWrapper,
  #content #aboForm #aboFormWrapper #anredeTitelWrapper2,
  #content #aboForm #aboFormWrapper #delPlzOrtWrapper,
  #content #aboForm #aboFormWrapper #geschenkPlzOrtWrapper  {
    display: flex;
    flex-flow: column;
    gap: 15px;
    width: 100%;
  }
}
#content #aboForm #aboFormWrapper #invAnredeWrapper,
#content #aboForm #aboFormWrapper #invTitelWrapper,
#content #aboForm #aboFormWrapper #invTelefonWrapper,
#content #aboForm #aboFormWrapper #invMobileWrapper,
#content #aboForm #aboFormWrapper #geschenkAnredeWrapper,
#content #aboForm #aboFormWrapper #geschenkTitelWrapper {
  width: 48%;
}
#content #aboForm #aboFormWrapper #invPlzWrapper,
#content #aboForm #aboFormWrapper #delPlzWrapper,
#content #aboForm #aboFormWrapper #geschenkPlzWrapper {
  width: 32%;
}
#content #aboForm #aboFormWrapper #invOrtWrapper,
#content #aboForm #aboFormWrapper #delOrtWrapper,
#content #aboForm #aboFormWrapper #geschenkOrtWrapper {
  width: 64%;
}
@media(max-width: 576px){
  #content #aboForm #aboFormWrapper #invAnredeWrapper,
  #content #aboForm #aboFormWrapper #invTitelWrapper,
  #content #aboForm #aboFormWrapper #invTelefonWrapper,
  #content #aboForm #aboFormWrapper #invMobileWrapper,
  #content #aboForm #aboFormWrapper #geschenkAnredeWrapper,
  #content #aboForm #aboFormWrapper #geschenkTitelWrapper,
  #content #aboForm #aboFormWrapper #invPlzWrapper,
  #content #aboForm #aboFormWrapper #delPlzWrapper,
  #content #aboForm #aboFormWrapper #geschenkPlzWrapper,
  #content #aboForm #aboFormWrapper #invOrtWrapper,
  #content #aboForm #aboFormWrapper #delOrtWrapper,
  #content #aboForm #aboFormWrapper #geschenkOrtWrapper  {
    width: 100%
  }
}

/**
  Newsletter Formular
**/
#content #tagesagenda_form .editable_content {
  display: flex;
  flex-flow: column;
  gap: 25px;
  max-width: 850px;
}
#content #tagesagenda_form.unterbruchForm .cr_ipe_item input {
  width: 240px;
}
#content #tagesagenda_form .badge {
  display: none;
}
#content #tagesagenda_form.unterbruchForm div.validation-advice {
  width: 236px;
}
#content #tagesagenda_form div#advice-required-recaptcha_v2_widget.validation-advice {
  margin-left: auto;
  margin-right: auto;
  width: 296px;
  float: none;
}

/**
  Registrierung Formular
**/
#content #regForm {
  display: flex;
  flex-flow: column;
  gap: 25px;
  max-width: 850px;
}
#content #regForm #regPlzOrtWrapper {
  display: flex;
  flex-flow: row;
  gap: 4%;
  width: 100%;
}
@media(max-width: 576px){
  #content #regForm #regPlzOrtWrapper{
    display: flex;
    flex-flow: column;
    gap: 15px;
    width: 100%;
  }
}
#content #regForm #regPlzWrapper {
  width: 32%;
}
#content #regForm #regOrtWrapper {
  width: 64%;
}
@media(max-width: 576px){
  #content #regForm #regPlzWrapper,
  #content #regForm #regOrtWrapper {
    width: 100%
  }
}
#content #regForm textarea {
  outline: none;
  height: 140px;
  width: 100%;
  border: 1px solid var(--grey-border-color);
  border-radius: 0px;
  padding: 10px;
  background-color: white;
}
#content #regForm textarea:focus {
  outline: none;
  border: 1px solid var(--accent-color);
}

/**
  Login Formular
**/
#content .loginscreen {
  padding: 0px;
  width: auto;
}
#content #loginForm .prozForm {
  display: flex;
  flex-flow: column;
  gap: 25px;
  max-width: 485px;
}
#content #loginForm .coloredLinks,
#content li.cel_nav_nodeName_E-Paper-Registrierung .coloredLinks {
  width: 160px;
  padding: 0px;
}
#content #loginForm .prozForm legend {
  padding: 0px;
}