/* .configuratorform {

} */
/* .configuratorform .spanndecken-container{
    width: 100%;
    max-width: 1140px;
    margin: 0 auto; */
    /* border: 1px solid #505050; */
    /* min-height: 100vh;

} */
/* .configuratorform .configurator-box{
    margin-bottom: 35px;
}
.configuratorform .configurator-box .header{
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: #a51c03;
    text-align: center;
    color: #ffffff;
    padding: 5px;
}
.configuratorform .configurator-box .content{
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #d6d6d6;
    padding: 20px 10px;
}
.configuratorform .configurator-box .content.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.configuratorform .configurator-box .content.grid-2.no-padding{
    grid-gap: 0;
}
.configuratorform .grid-3,
.configuratorform .configurator-box .content.grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.configuratorform .configurator-box .content.grid-3.no-padding{
    grid-gap: 0;
}
.configuratorform .configurator-box .content.grid-4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}
.configuratorform .configurator-box .content.grid-4.no-padding{
    grid-gap: 0;
}
.configuratorform .configurator-box .content.no-padding{
    padding: 0;
}
.configurator-box .content .image-box{
    height: 300px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.configurator-checkbox{
    display: grid;
    grid-template-columns: 30px auto;
}
.configurator-checkbox.reverse{
    display: grid;
    grid-template-columns: auto 30px;
}
.configurator-box .content .image-box .configurator-checkbox{
    display: grid;
    grid-template-columns: auto 30px;
    width: 50%;
}
.configurator-checkbox input{
    display: none;
}
.configurator-checkbox .box{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
}
.configurator-checkbox input:checked+.box{
    background-image: url('icons/check.png');
}
.configurator-checkbox .text{
    display: inline-block;
    height: 30px;
    width: 100%;
    background-color: #606060;
    color: #d6d6d6;
    line-height: 20px;
    padding: 5px 10px;
} */


/* KONFIGURATOR */

/* .konfigurator{
    background-color: #505050;
} */


/* +++++++++++++++++++
    CONFIGURATOR
   +++++++++++++++++++ */

/* 1. SPANNDECKE_DESIGN */
/* disable mandatory start (*) */
.configuratorform .mandatory {
    display: none;
}
/* set label margin-bottom to 0 & set label text-transform to none  */
.configuratorform label {
    margin-bottom: 0;
    text-transform: none !important;
}
/* set error lis to list-style none */
.powermail_field_error_container ul li::before {
    content: '';
}
.powermail_fieldwrap ul.parsley-errors-list li::before {
    content: '';
}

/* ---- "Welches Design soll Ihre neue Decke haben?" ---- */
.configuratorform .powermail_fieldwrap_spanndecke_design {
    width: 100%;
}
.configuratorform .powermail_fieldwrap_spanndecke_design div {
    display: flex;
    flex-wrap: wrap;
}
/* Field -> Radiobuttons */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_spanndecke_design div .radio {
        width: 50%;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_spanndecke_design div .radio {
        width: 100%;
    }
}
/* Label Header */
.configuratorform .powermail_fieldwrap_spanndecke_design > label {
    text-align: center;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    border-radius: 4px 4px 0 0;
}
/* Img */
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label {
    position: relative;
    width: 100%;
    height: 300px;
}
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
/* Label -> Span  */
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span {
    top: 0;
    left: 0;
    text-align: center;
    position: absolute;
    color: #ffffff;
    background-color: #676767bb;
    padding: 3px;
}
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span {
        width: 300px;
    }
    .configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span::before {
        height: 34px;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span {
        width: unset;
    }
    .configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span::before {
        height: 31px;
    }
}
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label div span::before {
    content: "";
    top: 0;
    left: 100%;
    position: absolute;
    background-color: #ffffff;
    width: 38px;
}
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
/* CHECKED */
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label input:checked~div span {
    /* background-color: #a51c03bb; EDIT: 2021-04-20 */
    background-color: #a51c03;
}
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label input:checked~div span::after {
    content: "";
    top: 4px;
    left: calc(100% + 10px);
    position: absolute;
    color: #a51c03;
    border: #a51c03 solid;
    border-width: 0 6px 6px 0;
    border-radius: 4px;
    transform: rotate(45deg);
    height: 20px;
    width: 14px;
}

/* div with background-image */
.configuratorform .powermail_fieldwrap_spanndecke_design .radio label div {
    top: 0;
    left: 0;
    position: absolute;
    color: #ffffff;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 2. ZIMMER */
/* Label Header */
.configuratorform .powermail_fieldwrap_zimmer > label {
    text-align: center;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    border-radius: 4px 4px 0 0;
}
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_zimmer .radio {
        width: 300px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    /* .configuratorform .powermail_fieldwrap_zimmer .radio label {
        font-size: 22px; EDIT: 2021-04-20
    } */
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_zimmer .radio {
        width: 250px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    .configuratorform .powermail_fieldwrap_zimmer .radio label {
        font-size: 16px;
    }
}
.configuratorform .powermail_fieldwrap_zimmer .configuratorform-col {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #99999933;
    border-radius: 0 0 4px 4px;
}

/* Label */
.configuratorform .powermail_fieldwrap_zimmer .radio label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    height: 35px;
    color: #ffffff;
    font-weight: 200;
}

/* Hide the browser's default checkbox */
.configuratorform .powermail_fieldwrap_zimmer .radio label input {
    position: absolute;
    /* opacity: 0; */
    cursor: pointer;
    height: 0;
    width: 0;
    left: -99999px;
}

/* Create a custom checkbox */
.configuratorform .powermail_fieldwrap_zimmer .radio label input[type=radio]~.configuratorform-check::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.configuratorform .powermail_fieldwrap_zimmer .radio label:hover input~.configuratorform-check::after {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.configuratorform .powermail_fieldwrap_zimmer .radio label input:checked~.configuratorform-check::after {
    /* background-color: #2196F3; */
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.configuratorform .powermail_fieldwrap_zimmer .radio label input[type=radio]~.configuratorform-check::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.configuratorform .powermail_fieldwrap_zimmer .radio label input:checked~.configuratorform-check::after {
    display: block;
}

/* Style the checkmark/indicator */
.configuratorform .powermail_fieldwrap_zimmer .radio label input[type=radio]~.configuratorform-check::after {
    left: 10px;
    top: 5px;
    width: 12px;
    height: 18px;
    color: #a51c03;
    border: #a51c03 solid;
    border-width: 0 6px 6px 0;
    border-radius: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.configuratorform .powermail_fieldwrap_zimmer .radio label {
    background-color: #575757;
    width: 300px;
}

.configuratorform .powermail_fieldwrap_zimmer .radio label::before {
    content: "";
    width: 30px;
    height: 35px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
}

/* 3. DECKE_BISHER */
/* Label Header */
.configuratorform .powermail_fieldwrap_decke_bisher > label {
    text-align: center;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    border-radius: 4px 4px 0 0;
}
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_decke_bisher .radio {
        width: 300px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    /* .configuratorform .powermail_fieldwrap_decke_bisher .radio label {
        font-size: 22px; EDIT: 2021-04-2021
    } */
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_decke_bisher .radio {
        width: 250px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    .configuratorform .powermail_fieldwrap_decke_bisher .radio label {
        font-size: 16px;
    }
}
.configuratorform .powermail_fieldwrap_decke_bisher .configuratorform-col {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #99999933;
    border-radius: 0 0 4px 4px;
}

/* Label */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    height: 35px;
    color: #ffffff;
    font-weight: 200;
}

/* Hide the browser's default checkbox */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input {
    position: absolute;
    /* opacity: 0; */
    cursor: pointer;
    height: 0;
    width: 0;
    left: -9999999px;
}

/* Create a custom checkbox */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input[type=radio]~.configuratorform-check::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label:hover input~.configuratorform-check::after {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input:checked~.configuratorform-check::after {
    /* background-color: #2196F3; */
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input[type=radio]~.configuratorform-check::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input:checked~.configuratorform-check::after {
    display: block;
}

/* Style the checkmark/indicator */
.configuratorform .powermail_fieldwrap_decke_bisher .radio label input[type=radio]~.configuratorform-check::after {
    left: 10px;
    top: 5px;
    width: 12px;
    height: 18px;
    color: #a51c03;
    border: #a51c03 solid;
    border-width: 0 6px 6px 0;
    border-radius: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.configuratorform .powermail_fieldwrap_decke_bisher .radio label {
    background-color: #575757;
    width: 300px;
}

.configuratorform .powermail_fieldwrap_decke_bisher .radio label::before {
    content: "";
    width: 30px;
    height: 35px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
}

/* 4. BELEUCHTUNG */
/* Label Header */
.configuratorform .powermail_fieldwrap_beleuchtung > label {
    text-align: center;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    border-radius: 4px 4px 0 0;
}
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_beleuchtung .radio {
        width: 300px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    /* .configuratorform .powermail_fieldwrap_beleuchtung .radio label {
        font-size: 22px; EDIT: 2021-04-20
    } */
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_beleuchtung .radio {
        width: 250px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    .configuratorform .powermail_fieldwrap_beleuchtung .radio label {
        font-size: 16px;
    }
}
.configuratorform .powermail_fieldwrap_beleuchtung .configuratorform-col {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #99999933;
    border-radius: 0 0 4px 4px;
}

/* Label */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    height: 35px;
    color: #ffffff;
    font-weight: 200;
}

/* Hide the browser's default checkbox */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input {
    position: absolute;
    /* opacity: 0; */
    cursor: pointer;
    height: 0;
    width: 0;
    left: -999999px;
}

/* Create a custom checkbox */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input[type=radio]~.configuratorform-check::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label:hover input~.configuratorform-check::after {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input:checked~.configuratorform-check::after {
    /* background-color: #2196F3; */
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input[type=radio]~.configuratorform-check::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input:checked~.configuratorform-check::after {
    display: block;
}

/* Style the checkmark/indicator */
.configuratorform .powermail_fieldwrap_beleuchtung .radio label input[type=radio]~.configuratorform-check::after {
    left: 10px;
    top: 5px;
    width: 12px;
    height: 18px;
    color: #a51c03;
    border: #a51c03 solid;
    border-width: 0 6px 6px 0;
    border-radius: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.configuratorform .powermail_fieldwrap_beleuchtung .radio label {
    background-color: #575757;
    width: 300px;
}

.configuratorform .powermail_fieldwrap_beleuchtung .radio label::before {
    content: "";
    width: 30px;
    height: 35px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
}

/* 5. Laenge */
/* Field wrap */
@media screen and (min-width: 1201px) {
    .configuratorform .configurator-field-input-laenge {
        width: 33%;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .configurator-field-input-laenge {
        width: 100%;
    }
}
.configuratorform .configurator-field-input-laenge {
    background-color: #99999933;
    padding: 0 0 20px 0;
    margin-bottom: 30px;
    border-radius: 4px;
    /* width: 33%; */
    display: inline-block;
}
/* header */
.configuratorform .configurator-field-input-laenge::before {
    content: "Wie groß ist die Decke?";
    text-align: center;
    position: relative;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 700;
    /* padding: 5px; */
    border-radius: 4px 4px 0 0;
    display: block;
    margin-bottom: 20px;
}
/* label */
.configuratorform .powermail_fieldwrap_laenge > label {
    display: inline-block;
    width: 90px;
}
.configuratorform .powermail_fieldwrap_laenge > div {
    display: inline-block;
}
/* "m" after input */
.configuratorform .configurator-field-input-laenge .powermail_fieldwrap_laenge {
    position: relative;
}
.configuratorform .configurator-field-input-laenge .configuratorform-col input {
    padding-right: 25px;
    margin-left: 3px;
}
@media screen and (min-width: 1201px) {
    .configuratorform .configurator-field-input-laenge .configuratorform-col::after {
        display: unset;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .configurator-field-input-laenge .configuratorform-col::after {
        display: none;
    }
}
.configuratorform .configurator-field-input-laenge .configuratorform-col::after {
    content: "m";
    color: #777777;
    position: absolute;
    right: 20px;
    top: 4px;

}
.configuratorform .configurator-field-input-laenge .powermail_fieldwrap_laenge {
    margin-bottom: 20px;
}

/* 6. Breite */
/* label */
.configuratorform .powermail_fieldwrap_breite > label {
    display: inline-block;
    width: 90px;
}
.configuratorform .powermail_fieldwrap_breite > div {
    display: inline-block;
}
/* "m" after input */
.configuratorform .configurator-field-input-laenge .powermail_fieldwrap_breite {
    position: relative;
    margin-bottom: 10px;
}


/* 7. Ecken */
/* fields wrap */
@media screen and (min-width: 1201px) {
    .configuratorform .configurator-field-input-ecken {
        width: 66%;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .configurator-field-input-ecken {
        width: 100%;
    }
}
.configuratorform .configurator-field-input-ecken {
    display: inline-block;
    /* width: 66%; */
    transform: translateY(2px);
}
/* Field wrap */
@media screen and (min-width: 1201px) {
    .configuratorform .configuratorform_field_input_ecken {
        width: calc(50% - 10px);
        margin-left: 10px;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .configuratorform_field_input_ecken {
        width: 100%;
        margin-left: 0;
    }
}
.configuratorform .configuratorform_field_input_ecken {
    background-color: #99999933;
    padding: 0 0 28px 0;
    border-radius: 4px;
    /* width: 33%; */
    /* width: calc(50% - 10px); */
    display: inline-block;
}
/* header */
.configuratorform .configuratorform_field_input_ecken::before {
    content: "Wie viele Ecken hat der Raum?";
    text-align: center;
    position: relative;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    display: block;
    margin-bottom: 20px;
}
/* text */
.configuratorform .powermail_fieldwrap_ecken > label::before {
    content: "z.B. für Kamin, Rolladenkästen, Trennwände, etc.";
    text-align: center;
    position: absolute;
    top: -70px;
    left: 50%;
    text-transform: none;
    color: #000000;
    display: block;
    width: 130%;
    transform: translateX(-25%);
}
/* label */
.configuratorform .powermail_fieldwrap_ecken > label {
    display: inline-block;
    /* width: 200px; */
    width: 65%;
}
.configuratorform .powermail_fieldwrap_ecken > div {
    display: inline-block;
    width: 25%;
    margin: 60px 2.5% 0 2.5%;
}
.configuratorform .powermail_fieldwrap_ecken > div input {
    display: inline-block;
    width: 100%;
}

/* 8. Postleitzahl */
/* Field wrap */
@media screen and (min-width: 1201px) {
    .configuratorform .configuratorform_field_input_postleitzahl {
        width: calc(50% - 10px);
        margin-left: 10px;
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .configuratorform_field_input_postleitzahl {
        width: 100%;
        margin-left: 0;
    }
}
.configuratorform .configuratorform_field_input_postleitzahl {
    background-color: #99999933;
    padding: 0 0 28px 0;
    border-radius: 4px;
    /* width: 33%; */
    display: inline-block;
}
/* header */
.configuratorform .configuratorform_field_input_postleitzahl::before {
    content: "Wo liegt der Projektstandort?";
    text-align: center;
    position: relative;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    display: block;
    margin-bottom: 20px;
}
/* label */
.configuratorform .powermail_fieldwrap_postleitzahl > label {
    display: inline-block;
    width: 140px;
}
.configuratorform .powermail_fieldwrap_postleitzahl > div {
    display: inline-block;
    width: 50%;
    margin-top: 60px;
}
.configuratorform .powermail_fieldwrap_postleitzahl > div input {
    display: inline-block;
    /* width: 50%; */
}


/* 9. Projekt realisiert */
/* Label Header */
.configuratorform .powermail_fieldwrap_wann_realisiert > label {
    text-align: center;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    border-radius: 4px 4px 0 0;
}
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_wann_realisiert .radio {
        width: 460px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    .configuratorform .powermail_fieldwrap_wann_realisiert .radio label {
        /* height: 35px; */
        /* font-size: 22px; EDIT: 2021-04-20 */
    }
}
@media screen and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_wann_realisiert .radio {
        width: 260px;
        display: flex;
        flex-wrap: wrap;
        margin: 5px;
    }
    .configuratorform .powermail_fieldwrap_wann_realisiert .radio label {
        /* height: max-content; */
        font-size: 16px;
    }
}
.configuratorform .powermail_fieldwrap_wann_realisiert .configuratorform-col {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #99999933;
    border-radius: 0 0 4px 4px;
}

/* Label */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    height: 35px;
    color: #ffffff;
    font-weight: 200;
}

/* Hide the browser's default checkbox */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input {
    position: absolute;
    /* opacity: 0; */
    cursor: pointer;
    height: 0;
    width: 0;
    left: -999999px;
}

/* Create a custom checkbox */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input[type=radio]~.configuratorform-check::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label:hover input~.configuratorform-check::after {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input:checked~.configuratorform-check::after {
    /* background-color: #2196F3; */
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input[type=radio]~.configuratorform-check::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input:checked~.configuratorform-check::after {
    display: block;
}

/* Style the checkmark/indicator */
.configuratorform .powermail_fieldwrap_wann_realisiert .radio label input[type=radio]~.configuratorform-check::after {
    left: 10px;
    top: 5px;
    width: 12px;
    height: 18px;
    color: #a51c03;
    border: #a51c03 solid;
    border-width: 0 6px 6px 0;
    border-radius: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.configuratorform .powermail_fieldwrap_wann_realisiert .radio label {
    background-color: #575757;
    width: 460px;
}

.configuratorform .powermail_fieldwrap_wann_realisiert .radio label::before {
    content: "";
    width: 30px;
    height: 35px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
}


/* 10. Name */
/* Field wrap */
.configuratorform .configurator-field-input-name {
    background-color: #99999933;
}
/* header */
.configuratorform .configurator-field-input-name::before {
    content: "Ihre persönlichen Angaben";
    text-align: center;
    position: relative;
    background-color: #a51c03;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    display: block;
    /* margin-bottom: 10px; */
}
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_name {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_name {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_name {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_name {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_name > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_name > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_name > div input {
    width: 100%;
}

/* 11. Vorname */
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_vorname {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_vorname {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_vorname {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_vorname {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_vorname > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_vorname > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_vorname > div input {
    width: 100%;
}


/* 12. Telefon */
/* Field wrap */
.configuratorform .configurator-field-input-telefon {
    background-color: #99999933;
    /* padding: 0 0 28px 0; */
    /* border-radius: 0 0 4px 4px; */
}
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_telefon {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_telefon {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_telefon {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_telefon {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_telefon > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_telefon > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_telefon > div input {
    width: 100%;
}

/* 13. E-Mail */
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_e_mail {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_e_mail {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_e_mail {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_e_mail {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_e_mail > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_e_mail > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_e_mail > div input {
    width: 100%;
}


/* 14. Straße */
/* Field wrap */
.configuratorform .configurator-field-input-strasse {
    background-color: #99999933;
    /* padding: 0 0 28px 0; */
    /* border-radius: 0 0 4px 4px; */
}
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_strasse {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_strasse {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_strasse {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_strasse {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_strasse > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_strasse > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_strasse > div input {
    width: 100%;
}

/* 15. PLZ Ort */
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_plzort {
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_plzort {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_plzort {
        width: 100%;
    }
}
.configuratorform .powermail_fieldwrap_plzort {
    margin-bottom: 0;
    display: inline-block;
    /* width: 33%; */
}
.configuratorform .powermail_fieldwrap_plzort > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_plzort > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_plzort > div input {
    width: 100%;
}


/* 16. Datei */
/* Field wrap */
@media screen and (min-width: 1201px) {
    .configuratorform .configurator-field-file-datei {
        padding: 0 0 20px 0;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .configurator-field-file-datei {
        padding: 0 0 20px 0;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .configurator-field-file-datei {
        padding: 0 0 60px 0;
    }
}
.configuratorform .configurator-field-file-datei {
    background-color: #99999933;
    border-radius: 0 0 4px 4px;
}
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_datei {
        width: 66%;
        margin: 20px;
    }
}
@media screen and (max-width: 1200px) {
    .configuratorform .powermail_fieldwrap_datei {
        width: 100%;
        margin: 20px 20px 0 20px;
    }
}
.configuratorform .powermail_fieldwrap_datei {
    margin-bottom: 0;
    display: inline-block;
    /* width: 66%; */
}
.configuratorform .powermail_fieldwrap_datei > label {
    text-transform: none;
    background-color: #afafaf;
    color: #ffffff;
    width: calc(100% - 40px);
    cursor: pointer;
}
.configuratorform .powermail_fieldwrap_datei > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_datei > div input {
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    visibility: hidden;
    position: absolute;
}
.configuratorform .powermail_fieldwrap_datei .configuratorform-col {
    margin: 0;
}

/* 17. Text */
/* label */
/* hide input label */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_textueberbutton {
        margin-bottom: 0;
        display: inline-block;
        width: 33%;
        position: absolute;
        transform: translate(-40px,-240px);
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_textueberbutton {
        display: inline-block;
        width: 100%;
        position: relative;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_textueberbutton {
        display: inline-block;
        width: 100%;
        position: relative;
        margin-bottom: 30px;
    }
}
.configuratorform .powermail_fieldwrap_textueberbutton > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_textueberbutton > div {
    display: inline-block;
    margin: 20px;
    width: calc(100% - 40px);
}
.configuratorform .powermail_fieldwrap_textueberbutton > div input {
    width: 100%;
}
/* checkbox */
.configuratorform .powermail_fieldwrap_datenschutz > label {
    display: none;
}
.configuratorform .powermail_fieldwrap_datenschutz .col-sm-10 {
    padding-left: 20px;
}
.configuratorform .powermail_fieldwrap_datenschutz .col-sm-10 ul.parsley-errors-list li {
    display: none;
}

@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_datenschutz {
        position: relative;
        margin: 0;
    }
    .configuratorform .powermail_fieldwrap_datenschutz .col-sm-10 .checkbox label {
        width: 33%;
        right: 0;
        top: 0;
        position: absolute;
        transform: translate(120px,-325px);
    }
}
@media screen and (max-width: 1200px) {
    .configuratorform .powermail_fieldwrap_datenschutz .col-sm-10 .checkbox label {
        width: 100%;
    }
}

/* 18. Submit */
@media screen and (min-width: 1201px) {
    .configuratorform .powermail_fieldwrap_anfrageabsenden {
        transform: translate(620px, -104px);
        width: 33%;
    }
}
@media screen and (min-width: 801px) and (max-width:1200px) {
    .configuratorform .powermail_fieldwrap_anfrageabsenden {
        transform: translateY(-80px);
        width: 50%;
        padding: 0 5px 0 5px;
    }
}
@media screen and (max-width: 800px) {
    .configuratorform .powermail_fieldwrap_anfrageabsenden {
        transform: translateY(-80px);
        width: 100%;
        padding: 0 5px 0 5px;
    }
}
.configuratorform .powermail_fieldwrap_anfrageabsenden input {
    width: 100%;
}
.configuratorform .configurator-field-submit-submit {
    height: 0;
}
.configuratorform .configurator-field-submit-submit input[type="submit"] {
    background-color: #a70e10;
    color: #ffffff;
    border: #a70e10 solid 2px;
    transition: .3s;
}
.configuratorform .configurator-field-submit-submit input[type="submit"]:hover,
.configuratorform .configurator-field-submit-submit input[type="submit"]:focus {
    background-color: #ffffff33;
    color: #a70e10;
    border: #a70e10 solid 2px;
}


/* KONFIGURATOR */

.spanndecken-container{
    /* background-color: #3c3c3c; */

}
.bg-softWhite > #konfigurator{
    background-color: #3c3c3c;

}
.text-center{
    text-align: center;
}
.konfigurator{
    /* max-width: 1200px; */
    /* background-color: #424242; */
    /* padding: 50px;
    box-sizing: border-box; */
    /* color: #ffffff; */
    /* margin: 0 auto; */
}
.konfigurator-grid{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto 50px;
    grid-gap: 10px;
    grid-template-areas:    "topbar ."
                            "image sidebar";

    margin-top: 25px;
}
.konfigurator-grid .konfigurator-image{
    grid-area: image;
}
.konfigurator .konfigurator-custom-select{
    color: #ffffff;
    width: 100%;
    position: relative;
    /* z-index: 500; */
    cursor: pointer;
}
.konfigurator .konfigurator-custom-select .placeholder{
    display: grid;
    grid-template-columns: 20px auto;
    border: 1px solid #ffffff;
    padding: 10px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    background-color: #3c3c3c;
}
.konfigurator .konfigurator-custom-select .options{
    display: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    /* background-color: #3c3c3c; */
    z-index: 1;
    background-color: #ffffff;
    color: #424242;
    transition: all 0.2s ease;
}
.konfigurator .konfigurator-custom-select.select .options{
    opacity: 1;
}
.konfigurator .konfigurator-custom-select .options div{
    border-bottom: 1px solid #424242;
    padding: 10px;
    transition: all 0.2s ease;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.konfigurator .konfigurator-custom-select .options div:hover{
    background-color: rgba(0,0,0,0.1);
}
.konfigurator .konfigurator-custom-select .options div[disabled]{
    cursor: default;
    pointer-events: none;
    background-color: rgba(0,0,0,0.2);
    color: #606060;
}
/* topbar */
.konfigurator-grid .topbar{
    grid-area: topbar;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-column-gap: 10px;
}
.konfigurator-grid .topbar .konfigurator-select{
    height: 30px;
    width: 100%;
    margin: 10px auto;
}
.konfigurator-grid .topbar .konfigurator-radio{
    display: grid;
    grid-template-columns: 50px auto;
    grid-column-gap: 10px;
}
.konfigurator-grid .topbar .konfigurator-radio.disabled{
    visibility: hidden;
}
.konfigurator-grid .topbar .konfigurator-radio .box{
    background-color: #a70e10;
    width: 30px;
    height: 30px;
    margin: 10px;
    border-radius: 3px;
    border: 1px solid #3c3c3c;
}
.konfigurator-grid .topbar .konfigurator-radio.selected .box{
    border: 2px solid #3c3c3c;
}
.konfigurator-grid .topbar .konfigurator-radio[value='02'] .box{
    background-image: url("/fileadmin/data/images/konfigurator_img/icons/glanz.png");
}
.konfigurator-grid .topbar .konfigurator-radio .text{
    line-height: 50px;
    text-align: left;
}
/* img */
/* .konfigurator-grid .konfigurator-image img{
    width: 100%;
} */
.konfigurator-grid .konfigurator-image{
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 100%; */
    background-position: center center;
    transition: height 0.2s ease;
    border-radius: 3px;
}
.konfigurator-grid .konfigurator-image .inner-fade{
    /* background-image: url("img_code/01-01--01-.png"); */
    transition: all 0.2s ease;
    opacity: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    background-position: center center;
    border-radius: 3px;
}
/* sidebar */
.konfigurator-grid .sidebar{
    grid-area: sidebar;
    display: grid;
    grid-auto-rows: 50px;
}
.konfigurator-grid .sidebar .colorpicker{
    margin: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #3c3c3c;
    transition: border 0.1s ease;
}
.konfigurator-grid .sidebar .colorpicker.disabled{
    visibility: hidden;
}
.konfigurator-grid .sidebar .colorpicker.selected{
    border: 2px solid #3c3c3c;
}
.konfigurator-grid .sidebar .motivpicker{
    margin: 10px;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #3c3c3c;
    transition: border 0.1s ease;
}
.konfigurator-grid .sidebar .motivpicker.disabled{
    visibility: hidden;
}
.konfigurator-grid .sidebar .motivpicker.selected{
    border: 2px solid #3c3c3c;
}
.konfigurator-grid .sidebar .colorpicker[type="weiss"]{
    background-color: #FFFFFF;
}
.konfigurator-grid .sidebar .colorpicker[type="grau"]{
    background-color: #a7a7a7;
}
.konfigurator-grid .sidebar .colorpicker[type="schwarz"]{
    background-color: #424242;
}
.konfigurator-grid .sidebar .colorpicker[type="rot"]{
    background-color: #dd2e08;
    transition: background-color 0.2s ease;
}
.konfigurator-grid .sidebar .colorpicker.orange[type="rot"]{
    background-color: #f97b18;
}
.konfigurator-grid .sidebar .colorpicker[type="blau"]{
    background-color: #2366d2;
}
.konfigurator-grid .sidebar .colorpicker[type="gruen"]{
    background-color: #21b44a;
}
.konfigurator-grid .sidebar .colorpicker[type="gelb"]{
    background-color: #cebb00;
}
.konfigurator-grid .sidebar .motivpicker[type="weiss"]{
    background-color: #FFFFFF;
}
.konfigurator-grid .sidebar .motivpicker[type="himmel"]{
    background-color: #2020F0;
    background-image: url("/fileadmin/data/images/konfigurator_img/icons/wolken.jpg");
    background-position: 50% 50%;

}
.konfigurator-grid .sidebar .motivpicker[type="baumkronen"]{
    background-color: #20E020;
    background-image: url("/fileadmin/data/images/konfigurator_img/icons/baumwipfel.jpg");
    background-position: 50% 50%;

}
.spanndecken-container span.reset{
    text-decoration: underline;
    margin-top: 30px;
    display: inline-block;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .konfigurator-grid{
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        grid-template-areas:    "topbar"
                                "sidebar"
                                "image";

        margin-top: 25px;
    }
    .konfigurator-grid .topbar{
        grid-area: topbar;
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
    }
    .konfigurator-grid .topbar .konfigurator-custom-select{
        grid-column: span 2;
    }
    .konfigurator-grid .sidebar{
        grid-area: sidebar;
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(7, 40px);
        /* grid-template-rows: 50px 50px; */
    }

    .konfigurator-grid .sidebar .colorpicker,
    .konfigurator-grid .sidebar .motivpicker{
        margin: 10px 5px;
    }
    .konfigurator-grid .topbar .konfigurator-radio.disabled,
    .konfigurator-grid .sidebar .colorpicker.disabled,
    .konfigurator-grid .sidebar .motivpicker.disabled{
        display: none;
    }
}



.powermail_form h3 {
    font-size: 3.75rem;
    text-align: center;
    margin-bottom: 60px;
}