@charset "utf-8";



legend.powermail_legend {
    display: none;
}

.tx-powermail {
    float: left;
    box-sizing: border-box;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 40px;
}

#right .tx-powermail {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: var(--form-right-border-bottom) 1px solid;
}
/*
#right .powermail_create {
    margin: 0 0 0 3%;
}
*/
.tx-powermail h3 {
    display:none;
}

div.tx-powermail fieldset {
    border: 0;
    margin: 0 0 0 0;
    padding: 0;
}


.powermail_fieldwrap_type_check,
.powermail_fieldwrap_type_radio{
    float: left;
    width: 100%;
    margin: 10px 0;
}

.powermail_fieldwrap_type_date{
    float: left;
    width: 100%;
    margin-top: 10px;
}

::placeholder{
  color: var(--color-placeholder);
  opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    var(--color-placeholder);
}



select {
    padding: 2px 10px;
    border: 1px solid var(--form-select-border);
    appearance: none;
    border-radius: var(--radius);
}

.form-control {
  	box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 20px 10px 4px 10px;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.42857143;
    color: var(--form-color-text);
    background-color: var(--color-body-background);
    background-image: none;
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input[type="date" i].form-control {
    width: 182px;
    display: -webkit-inline-box;
    height: 42px;
    padding: 7px 10px;
    margin-top: -10px;
}

.powermail_file {
    width: 100%;
}

#right .form-control {
    background-color: var(--form-right-background);
}

textarea.powermail_textarea {
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    field-sizing: content;
    min-height: 130px;
}

div.powermail_fieldwrap.nolabel >label,
div.powermail_fieldwrap.nolabel >legend{
  display: none;
}

.form-group.powermail_fieldwrap_type_textarea label {
    display: block;
    max-width: 100%;
    font-weight: 700;
    font-size: 17px;
    position: relative;
    margin: 0 0 5px 0;
    color:var(--color-placehoder);
    float:left;
}

.form-control:focus{
    background-color: var(--color-white);
    border: 1px solid var(--form-focus-border);
    outline: none;
}

select:has(option:first-child:checked):not(.powermail_field_error) {
    background-color: var(--color-body-background);
    border-color: var(--color-body-background);
}

.powermail_fieldwrap_type_text {
    display: block;
    float: left;
    margin-top: 10px;
    width: 100%;
}

/* ------ Headline Styles ------*/

.tx-powermail h1 {
    margin: 20px 0 0px 0;
    float: left;
}

.tx-powermail p {
    float: left;
    width: 100%;
    box-sizing: border-box;
}


/* --- Error Fields ---*/


/* ----------- ERROR Messages ---------*/

.powermail-errors-list{
    display: none;
}

#right select.powermail_field_error,
#right input.powermail_field_error,
#right textarea.powermail_field_error,
.powermail_fieldwrap_type_file:has(.powermail_file.powermail_field_error),
select.powermail_field_error,
input.powermail_field_error,
textarea.powermail_field_error {
    border-color: var(--color-red);
    background-color: var(--form-error-background);
    color: var(--color-red-text);
}



select.powermail_field_error + label,
input.powermail_field_error + label {
    color: var(--color-red-text);
}

select.powermail_field_error:focus,
input.powermail_field_error:focus,
textarea.powermail_field_error:focus  {
    background-color: var(--form-error-background);
    border-color: var(--color-red);
}


.radio.powermail_field_error,
.checkbox.powermail_field_error{
    color: var(--color-red-text);
    background-color: var(--form-error-background);
}

.powermail_field_error input[type="checkbox"]:not(:checked) + label:before,
.powermail_field_error input[type="radio"]:not(:checked) + label:before {
    top: 0px;
    width: 19px;
    height: 19px;
    border: 3px solid var(--color-red);
}








legend.powermail_type_check_legend,
legend.powermail_type_radio_legend {
    margin: 10px 0 10px 0;
}

.checkbox,
.radio {
    float: left;
    padding: 0px 20px 0 0;
    border-radius: 3px;
    margin-right: 3px;
}

p.red-text {
    color: var(--color-green-box-text);
    background-color: var(--color-green-box-background);
    padding: 20px;
    border: solid 1px var(--color-green-box-border);
    box-sizing: border-box;
    border-radius: var(--radius);
}

/* ------ SPECIALS ------*/

input#powermail_field_vorname,
input#powermail_field_firstname,
input#powermail_field_nfirstname,
input#powermail_field_firstname_01,
input#powermail_field_firstname_02,
input#powermail_field_firstname_03,
input#powermail_field_firstname_04,
input#powermail_field_firstname_05,
input#powermail_field_firstname_06,
input#powermail_field_firstname_07,
input#powermail_field_firstname_08,
input#powermail_field_firstname_09 {
    width: 100%;
    float: left;
}

input#powermail_field_nachname,
input#powermail_field_surname,
input#powermail_field_lastname,
input#powermail_field_nlastname,
input#powermail_field_lastname_01,
input#powermail_field_lastname_02,
input#powermail_field_lastname_03,
input#powermail_field_lastname_04,
input#powermail_field_lastname_05,
input#powermail_field_lastname_06,
input#powermail_field_lastname_07,
input#powermail_field_lastname_08,
input#powermail_field_lastname_09 {
    width: 100%;
    float: left;
}

input#powermail_field_postalcode,
input#powermail_field_npostalcode,
input#powermail_field_postalcode_01,
input#powermail_field_postalcode_02,
input#powermail_field_postalcode_03,
input#powermail_field_postalcode_04,
input#powermail_field_postalcode_05,
input#powermail_field_postalcode_06,
input#powermail_field_postalcode_07,
input#powermail_field_postalcode_08,
input#powermail_field_postalcode_09 {
    width: 100%;
    float: left;
}

input#powermail_field_city,
input#powermail_field_ncity,
input#powermail_field_city_01,
input#powermail_field_city_02,
input#powermail_field_city_03,
input#powermail_field_city_04,
input#powermail_field_city_05,
input#powermail_field_city_06,
input#powermail_field_city_07,
input#powermail_field_city_08,
input#powermail_field_city_09 {
    width: 100%;
    float: left;
}



input#powermail_field_monthlyamount {
    font-size: 22px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-align: center;
}

select#powermail_field_country,
select#powermail_field_country_01,
select#powermail_field_country_02,
select#powermail_field_country_03,
select#powermail_field_country_04,
select#powermail_field_country_05,
select#powermail_field_country_06,
select#powermail_field_country_07 {
    margin-bottom: 20px;
}

.powermail_fieldwrap_monthlyamount {
    width: 55%;
    margin: 0 auto;
}

.form-control:hover{
    background-color: var(--form-control-hover);
}

.form-control:not(:placeholder-shown,.powermail_field_error){
    background-color: var(--color-form-control-green-background);
    border-color: var(--color-form-control-green-border);
}

/* Datepicker */
/*
input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
*/


/* -------- Checkbox Radiobox----------*/

/* Remove default checkbox */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked,
input[type="radio"]:not(:checked),
input[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label,
input[type="radio"]:not(:checked) + label,
input[type="radio"]:checked + label {  
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  width: calc(100% - 35px);

  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
}

/* checkbox aspect */
input[type="checkbox"] + label:before,
input[type="checkbox"] + label:after,
input[type="radio"] + label:before,
input[type="radio"] + label:after {
  content: '';
  position: absolute;
  left: 0;
  z-index: 1;

  -webkit-transition: .2s;
  transition: .2s;
}

/* Unchecked styles */
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:not(:checked) + label:before {
  top: 0px;
  width: 19px; height: 19px;
  border: 3px solid var(--form-input-background);
}

#right input[type="checkbox"]:not(:checked) + label:before,
#right input[type="radio"]:not(:checked) + label:before {
  background-color: var(--color-white);
}


input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
  top: 0px;
  width: 19px; height: 19px;
  border: 3px solid var(--form-input-background);
  z-index: 0;
}

/* CHECK Checked styles */
input[type="checkbox"]:checked + label:before {
  top: 2px;
  width: 6px; height: 12px;
  border-top: 3px solid var(--transparent);
  border-left: 3px solid var(--transparent);
  border-right: 3px solid var(--form-input-green-border-2);
  border-bottom: 3px solid var(--form-input-green-border-2);
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);

  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%;
}

input[type="checkbox"]:checked + label:after {
  top: 0px;
  width: 19px; height: 19px;
  border: 3px solid var(--color-white);
  background-color: var(--color-white);
  z-index: 0;
}

/* RADIO Checked styles */
input[type="radio"]:not(:checked) + label:after{
    border-radius: 15px;
}

input[type="radio"]:not(:checked) + label:before {
  border-radius: 15px;
}

input[type="radio"]:checked + label:before {
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: var(--form-input-green-border-2);
}

input[type="radio"]:checked + label:after {
  top: 0px;
  width: 19px; height: 19px;
  border-radius: 13px;
  border: 3px solid var(--form-input-green-border-2);
  /*background-color: var(--color-red-hover);*/
  z-index: 0;
}

/* disabled checkbox */
input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
  top: 0;
  box-shadow: none;
  background-color: var(--form-checkbox-dark-brown);
  width: 19px; height: 19px;
  border: 3px solid var(--form-checkbox-dark-brown);
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}

input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
  color: var(--form-color-text);
}

input[type="checkbox"]:disabled:not(:checked) + label:hover:before,
input[type="radio"]:disabled:not(:checked) + label:hover:before {
  border-color: var(--form-checkbox-dark-brown);
}

/* hover style just for information */
input[type="checkbox"]:not(:checked) + label:hover:before,
input[type="radio"]:not(:checked) + label:hover:before {
  border-color: var(--form-input-border-2);
}


/* secure ssl obsolet*/

.ssl-icon, #right .ssl-icon {
    width: 8%;
    float: left;
    margin: 0 2% 0 0;
}

img.ssl-icon + p, #right img.ssl-icon + p {
    font-size: 12px;
    line-height: 17px;
    width: 88%;
    margin: 5px 0 20px 0;
    max-width: 340px;
}


/* NEU SSL */
.powermail_fieldwrap_ssl:after {
    width: 78%;
    float: left;
    color: var(--color-black-text);
    margin: 9px 0 0 12px;
    font-size: 11px;
    line-height: 15px;
}

.powermail_fieldwrap_ssl:lang(en):after {
    content: "Secure donation – Data is transferred over an encrypted SSL (Secure Socket Layer) internet connection and is securely protected.";
}

.powermail_fieldwrap_ssl:lang(de):after {
    content: "Sicheres spenden – Die Daten werden über eine sichere SSL (Secure Socket Layer) Internet-Verbindung übertragen und sind zu jedem Zeitpunkt sicher.";
}


.powermail_fieldwrap_ssl .powermail_field {
    background: url(../sysimages/secure-ssl.png);
    width: 48px;
    height: 70px;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    float: left;
}


/* ------------ FOOTER ----------*/

#footer .tx-powermail {
    padding: 0;
}


#footer .powermail_fieldwrap_type_select,
#footer .powermail_fieldwrap_type_check,
#footer .powermail_fieldwrap_type_radio,
#footer .powermail_fieldwrap_type_date {
    margin: 0;
}

#footer input[type="checkbox"]:not(:checked) + label:before,
#footer input[type="radio"]:not(:checked) + label:before {
    border-color: var(--color-body-background);
}

#footer input[type="checkbox"]:not(:checked) + label:hover:before,
#footer input[type="radio"]:not(:checked) + label:hover:before {
    border-color: var(--color-white);
}


/* ---- Lagos Upload Formular ----*/

.powermail_fieldwrap.powermail_fieldwrap_type_file.powermail_fieldwrap_uploadidcopy.form-group {
    float: left;
    width: 90%;
    margin-bottom: 20px;
    background-color: var(--color-body-background);
    padding: 20px 5% 20px 5%;
    border: solid 1px var(--form-focus-border);
    border-radius: var(--radius);
}

input#powermail_field_uploadidcopy {
    padding: 10px 0px 10px 0;
}


/* --------- Float Label ---------*/

.powermail_field{
    position: relative;
    width: 100%;
    float: left;
}

.form-group label {
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 100;
    font-size: 16px;
    color: var(--color-placeholder);
    margin-top: 12px;
    margin-left: 15px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.form-group {
    position: relative;
}

.form-control:focus~label, .form-control:not(:placeholder-shown)~label, .form-select~label {
    opacity: 0.45;
    transform: scale(0.75) translateY(-0.7rem) translateX(-0.35rem);
}

.powermail_fieldwrap_firstname,
.powermail_fieldwrap_nfirstname,
.powermail_fieldwrap_firstname_01,
.powermail_fieldwrap_firstname_02,
.powermail_fieldwrap_firstname_03,
.powermail_fieldwrap_firstname_04 {
    width: calc(50% - 3px);
    margin-right: 3px;
    float: left;
}

.powermail_fieldwrap_lastname,
.powermail_fieldwrap_nlastname,
.powermail_fieldwrap_lastname_01,
.powermail_fieldwrap_lastname_02,
.powermail_fieldwrap_lastname_03,
.powermail_fieldwrap_lastname_04 {
    width: 50%;
    float: left;
}

.powermail_fieldwrap_postalcode,
.powermail_fieldwrap_npostalcode,
.powermail_fieldwrap_postalcode_01,
.powermail_fieldwrap_postalcode_02,
.powermail_fieldwrap_postalcode_03,
.powermail_fieldwrap_postalcode_04 {
    width: calc(40% - 3px);
    margin-right: 3px;
    float: left;
}

.powermail_fieldwrap_city,
.powermail_fieldwrap_ncity,
.powermail_fieldwrap_city_01,
.powermail_fieldwrap_city_02,
.powermail_fieldwrap_city_03,
.powermail_fieldwrap_city_04 {
    width: 60%;
    float: left;
}



::placeholder{
   color: transparent;
}

#charCount { float: right; }

.powermail_fieldwrap_type_textarea .powermail-errors-list {
    display: inline;
    list-style: none;
    background-color: var(--color-red);
    float: left;
    margin: 0;
    padding: 5px 10px;
    color:var(--color-white-text);
    border: solid 1px var(--color-red);
    border-radius: 0px 0px var(--radius) var(--radius);
    margin-top: -6px;
    width: 45%;
    max-width: fit-content;
    font-size: 13px;
    line-height: 17px;
}




.powermail_field:has(textarea) {
    margin-bottom: 15px;
}
.powermail_field:has(.checkbox) {
    margin-bottom: 20px;
}



/* ------------- mobile ab360px ---------*/

@media (min-width: 360px) {

}





/* ------------- mobile ab550px ---------*/


@media (min-width: 550px) {

#right .form-control{
   font-size: clamp(13px,1.3vw,16px);
}

#right .form-group label {
    font-size: clamp(13px,1.3vw,16px);
}

#right input[type="checkbox"]:not(:checked) + label,
#right input[type="checkbox"]:checked + label,
#right input[type="radio"]:not(:checked) + label,
#right input[type="radio"]:checked + label {
    font-size: clamp(14px,1.3vw,17px);
}


}

/* ------------- mobile ab720px ---------*/

@media (min-width: 720px) {
.tx-powermail {
    padding-left: 20%;
}

.powermail_fieldwrap_monthlyamount {
    width: 45%;
}

/* ------- Floating LABEL --------*/

.powermail_fieldwrap_iban {
    width: calc(60% - 3px);
    float: left;
    margin-right: 3px;
}

.powermail_field_iban,
.powermail_field_bankaccount{
    width: 100%;
    float: left;
}

.powermail_fieldwrap_bic {
    width: 40%;
    float: left;
}

}


/* ------------- mobile ab 960px ---------*/

@media (min-width: 960px){

.powermail_fieldwrap_type_textarea .powermail-errors-list { width: 63%; }

}


/* ------------- mobile ab 1180px ---------*/

@media (min-width: 1180px){



}