/*
         Formular V3.0
         Rechnerabfrage
*/

#formular {
         display: block;
         width: calc(100% - 40px);
         max-width: 800px;
         height: 470px;
         height: auto;
         margin: 10px auto;

         overflow: hidden;

         border: 0px #000000 solid;

         font-size: 1.1em;
         font-family: var(--second-font);
}

#formular .hilfe {
         cursor: pointer;

         display: block;
         width: calc(100% - 25px);
         background: rgba(0,0,0,0.0) url(../images/dot_info.png) calc(100% - 8px) center no-repeat;
         background-size: 32px;

         margin: 0px 0px 5px 0px;
         padding: 8px 10px 8px 15px;

         font-family: var(--main-font);
         font-size: 1.3em;
         color: var(--font-color-light);
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
         text-align: left;

         -webkit-border-radius: 40px;
         -moz-border-radius: 40px;
         border-radius: 40px;

         -webkit-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.20);
         -moz-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.20);
         box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.20);
         border-bottom: 1px rgba(255,255,255,0.15) solid;

}
#formular .hilfe.no { background-image: none; }
#formular .hilfe.a_c { text-align: center; }

#formular .hilfe .frage {
         display: inline-block;
         float: right;
         margin-top: -3px;
         cursor: pointer;
}

#formular div[id^="hilfe_info_"] {
         display: none;
         width: calc(100% - 30px - 0px);
         position: relative;

         text-align: left;
         font-size: 0.9em;
         color: var(--formular-white);

         margin: 10px 0px 0px 0px;
         padding: 5px 15px 5px 15px;

         background: var(--formular-black);

         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
}
#formular div[id^="hilfe_info_"]:after {
        bottom: 100%;
        right: 15px;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
        border-bottom-color: #000000;
        border-width: 8px;
        margin-left: -8px;
}
#formular div[id^="hilfe_info_"] b { color: var(--main-color); }
#formular div[id^="hilfe_info_"].show { display: block; }

#formular div[id^="form_step"] {
        text-align: center;
        margin: 0px;
        padding: 0px;
        border: 1px transparent solid;
}

/*
#formular div[id^="form_step"] label, #formular div[id^="form_step"] .label {
         display: inline-block;
         width: calc(100% - 10px);

         padding: 8px 0px 8px 0px;
         margin: 5px 5px 5px 5px;

         background: var(--formular-white);

         -webkit-box-shadow: 0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         -moz-box-shadow:    0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         box-shadow:         0px 12px 8px -8px rgba(0, 0, 0, 0.05);

         border: 0px solid var(--formular-black);
         border-left: 5px solid var(--formular-black);
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;

         font-family: var(--second-font);
         color: var(--formular-font-color);
         transition: all 0.3s ease-in-out;
}
#formular div[id^="form_step"] .label { width: calc(100% - 35px); padding: 8px 10px 8px 15px; }

#formular div[id^="form_step"] label { cursor: pointer; }
#formular div[id^="form_step"] label.short, #formular div[id^="form_step"] .label.short { padding-top: 5px; padding-bottom: 5px; }

#formular div[id^="form_step"] label.checked,
#formular div[id^="form_step"] .label.checked {
         border-left: 5px solid var(--formular-white);
         background: var(--formular-black);
         color: var(--formular-white);
}

#formular div[id^="form_step"] label:hover,
#formular div[id^="form_step"] .label:hover {
         background: var(--second-color);
}
#formular div[id^="form_step"] label.nohover,
#formular div[id^="form_step"] .label.nohover { background: var(--formular-white) !important; }


#formular div[id^="form_step"] label > input[type="radio"] {
          visibility: hidden;
          position: absolute;
}

#formular div[id^="form_step"] label span {
         display: block;

         font-size: 1.0em;
         font-weight: normal;
         text-align: left;
         padding-left: 10px;
}
*/



#formular div[id^="form_step"] label, #formular div[id^="form_step"] .label {
         cursor: pointer;
         display: inline-block;
         width: calc((100% / 3) - (40px / 3) - 5px);
         height: 100px !important;

         padding: 2px 0px 2px 0px;
         margin: 0px 0px 5px 0px;

         background: #FFFFFF;

         -webkit-box-shadow: 0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         -moz-box-shadow:    0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         box-shadow:         0px 12px 8px -8px rgba(0, 0, 0, 0.05);

         border: 1px solid rgba(0,0,0,0.2);
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;

         font-family: var(--second-font);

         transition: all 0.3s ease-in-out;
}
#formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 5px 20px 5px 20px; }

#formular div[id^="form_step"] label.checked,
#formular div[id^="form_step"] .label.checked {
         border: 1px solid var(--second-color);
         background: var(--second-color);
}

#formular div[id^="form_step"] label:hover,
#formular div[id^="form_step"] .label:hover {
         border: 1px solid var(--second-color);
         background: var(--second-color);
}
#formular div[id^="form_step"] label.nohover,
#formular div[id^="form_step"] .label.nohover { background: #FFFFFF!important; }

#formular div[id^="form_step"] label > input[type="radio"] {
          visibility: hidden;
          position: absolute;
}

#formular div[id^="form_step"] label span {
         display: block;

         font-size: 0.75em;
         font-size: 0.85em;
         font-weight: bold;
}

#formular div[id^="form_step"] label > input[type="radio"] + img {
         cursor: pointer;
         padding: 5px 5px;
         background: transparent;
         border: 2px solid transparent;
         margin-bottom: 0px;

         opacity: 0.7;

         width: 50px;
         height: auto;
}

#formular div[id^="form_step"] label > input[type="radio"]:hover + img {
         opacity: 1.0;
}

#formular div[id^="form_step"] label > input[type="radio"]:checked + img {
          border: 2px solid transparent;
          background: var(--second-color);
          opacity: 1.0;
}


/* Anpassungen */
#formular #form_step_2 label { height: 112px !important; }

#formular #form_step_7 .label.gb { width: calc(100% - 10px); padding: 15px 0px; text-align: center; }
#formular #form_step_7 .label.gb div[class^="gb_"] { float: left; padding: 5px 0px 5px 10px; margin: 0px 0px 2px 12px; font-size: 0.7em; text-transform: uppercase; border: 0px #000000 solid; }
#formular #form_step_7 .label.gb .gb_tag { width: calc(30% - 10px - 20px - 0px); }
#formular #form_step_7 .label.gb .gb_monat { width: calc(30% - 10px - 20px - 0px); }
#formular #form_step_7 .label.gb .gb_jahr { width: calc(40% - 10px - 10px - 0px); }
#formular #form_step_7 .label.gb select[name="geburtsdatum_tag"] { width: calc(30% - 10px - 10px); padding: 5px; margin-right: 10px; font-size: 1.2em; }
#formular #form_step_7 .label.gb select[name="geburtsdatum_monat"] { width: calc(30% - 10px - 10px); padding: 5px; margin-right: 10px; font-size: 1.2em; }
#formular #form_step_7 .label.gb select[name="geburtsdatum_jahr"] { width: calc(40% - 10px); padding: 5px; font-size: 1.2em; }

#formular #form_step_10 .label { width: calc(100% - 30px); padding: 15px 10px 15px 15px; text-align: center; }
#formular #form_step_10 input[name="region_plz"] { width: 80px; margin-top: 10px; padding: 5px; font-size: 1.2em; }
#formular #form_step_10 input[name="region_ort"] { width: calc(100% - 80px - 20px - 20px); margin-top: 10px; padding: 5px; font-size: 1.2em; }
#formular #form_step_10 input[name="region_strasse"] { width: calc(100% - 80px - 20px - 20px); margin-top: 10px; margin-bottom: 10px; padding: 5px; font-size: 1.2em; }
#formular #form_step_10 input[name="region_nr"] { width: 80px;  margin-top: 10px; margin-bottom: 10px; padding: 5px; font-size: 1.2em; }

#formular #form_step_12 .label { width: calc(100% - 40px); height: auto !important; padding: 15px 15px; text-align: center; border: 1px solid rgba(0,0,0,0.2) !important; }
#formular #form_step_12 .label #box_datenschutz { width: calc(100% - 5px - 0px - 2px); margin: 10px auto; padding: 5px 0px !important; font-size: 0.8em; border: 1px transparent solid; }
#formular #form_step_12 .label #box_datenschutz label { height: auto !important; padding: 2px 0px 4px 0px !important; }

#formular #form_step_12 .label input { margin: 4px 0px 4px 0px; padding: 4px 10px; font-size: 1.2em; }
#formular #form_step_12 .label input[name="vorname"], #formular #form_step_12 .label input[name="nachname"] { width: calc(50% - 5px - 20px - 2px); }
#formular #form_step_12 .label input[name="telefon"], #formular #form_step_12 .label input[name="email"] { width: calc(100% - 5px - 20px - 2px); }

#formular #form_step_12 .label input[name="strasse"], #formular #form_step_12 .label input[name="ort"] { width: calc(65% - 5px - 20px - 2px);}
#formular #form_step_12 .label input[name="nr"], #formular #form_step_12 .label input[name="plz"] { width: calc(35% - 5px - 20px - 2px); }
#formular #form_step_12 .label input[type="submit"] { display: inline-block; margin: 0px auto 10px auto; padding: 6px 40px 6px 15px; }

#formular input.error,
#formular select.error,
#formular #box_datenschutz.error, #formular #grc-box.error
{ border: 1px #DF0000 solid; }


#formular .button {
         cursor: pointer;
         width: 205px;
         background: #74c011 url(../images/arrow.png) right center no-repeat;
         padding: 5px 35px 5px 10px;
         margin: 5px auto 0px auto;

         color: #FFFFFF;
         font-weight: 700;

         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
}


#formular #tarif_info_counter {
        font-size: 1.1em;
         font-weight: bold;
         height: 30px;
         vertical-align: middle;
         margin-bottom: 0px;
         text-align: center;
         line-height: 30px;
}

#formular #tarif_info_counter .counter {
         display: inline-block;
         width: 30px;
         height: 30px;
         line-height: 30px;
         background-color: var(--formular-black);
         color: var(--formular-white);
         padding: 0px 10px;
         text-align: center;
}

#formular #tarife_laden img.versicherer { width: 100%; height: auto; max-width: 300px; }
#formular #tarife_check, #tarif_info_counter { font-size: 1.3em; text-align: center; }

/* Datenblock über Formular */
#formular #daten_info {
         display: inline-block;
         width: calc(100% - 2px - 16px - 30px);
         text-align:left;
}

#formular #daten_info .counter {
         display: inline-block;

         margin: 10px 5px 5px 5px;
         padding: 0px;

         line-height: 100px;
         width: 100px;

         background-color: #000000;

         border-radius: 50%;

         font-size:1.8em;
         font-weight: bold;
         vertical-align: middle;
         text-align: center;
         color: var(--font-color-light);
         text-shadow: rbga(0,0,0,0,1) 1px 1px 1px;
}

#formular #daten_info .tarif_info {
         display: block;
         width: calc(100% - 0px);

         background: rgba(255,255,255,0.1);
         margin-top: 15px;
         padding: 6px 8px;

         line-height: 1.1em;
          text-align: center;
         font-size: 0.8em;
         color: #000000;
         text-shadow: rgba(0,0,0,0.0) 1px 1px 0px;

         border: 1px rgba(255,255,255,0.4) solid;
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;
}

/*
#formular .select_check {
         display: inline-block;
         position: absolute;
         width: 24px;
         height: 24px;

         background-color: #FFFFFF;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 20px 20px;

         padding: 0px 0px;
         margin: -24px 0px 0px -30px;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#formular label:hover .select_check.no { background-color: #DFDFDF; background-image: url(../images/dot_select_yes_hover.png);  }
#formular .select_check.no { background-image: none; }
#formular .select_check.yes { background-color:  var(--formular-white); background-image: url(../images/dot_select_yes_black.png); }
*/

#formular .select_check {
         display: inline-block;
         position: relative;
         width: 24px;
         height: 24px;

         background-color: #FFFFFF;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 20px 20px;

         padding: 0px 0px;
         /*margin: -87px 0px 0px calc(100% - 34px);*/

         margin: -87px 0px 0px calc(100% - 34px);

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#formular #form_step_2 label .select_check {  margin: -107px 0px 0px calc(100% - 34px); }

#formular label:hover .select_check.no { background-color: #DFDFDF; background-image: url(../images/dot_select_yes_hover.png);  }
#formular .select_check.no { background-image: none; }
#formular .select_check.yes { background-color: #6a9b24; background-image: url(../images/dot_select_yes_hover.png); }


/* Datenschutz Label unter Formular */
#formular .datenschutz { text-align: left; font-size: 0.75em; margin: 20px 0px 10px 0px; }
#formular .datenschutz b { display: block; }
#formular .datenschutz img { float:left; margin-right: 10px; margin-bottom: 20px; width: 50px; height: 50px; }
#formular .datenschutz .hilfe { text-align: left !important; margin-top: 10px; margin-bottom: 0px; font-weight: bold; font-size: 1.0em; }
#formular .datenschutz .hilfe img { width: 20px; height: 20px;}


#formular table { font-size: 0.9em; }
#formular td:nth-child(odd) { text-align: right; border-bottom: 2px #EFEFEF dotted; }
#formular td:nth-child(even) { text-align: left; border-bottom: 2px #EFEFEF dotted; color: #000000; }

/* Error Handling */
#formular div[id^="error_"] {
         position: relative;
        background: #DF0000;

         font-size: 0.7em;
         color: #FFFFFF;

         padding: 2px 5px;
         margin: 0px 0px 0px 0px;
}
/*
#formular #form_step_12 div[id^="error_"] { margin: -20px 0px 0px 0px; }  */


/* Pfeile  */
#formular #button_panel {
         display: block;
         height: 36px;
         border: 0px #000000 solid;
         margin-top: 20px;
         text-align: center;
         padding: 3px;

         border: 0px var(--formular-black) solid;
         -webkit-border-radius: 40px;
         -moz-border-radius: 40px;
         border-radius: 40px;
}
#formular #button_panel .kill { display: inline-block; height: 30px; margin-top: 8px; }

#formular #button_panel button {
         display: inline-block;
         cursor: pointer;
         width: 100px;
         height: 36px;

         background-repeat: no-repeat;
         background-size: 30px;

         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;

         border: 0px #000000 solid;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         font-size: 0.9em;
         font-weight: bold;
         color: rgba(255,255,255,1.0);
         text-shadow: 0px 0px 3px rgba(0,0,0,0.2);

         transition: all 0.3s ease-in-out;
}
#formular #button_panel button span { display: block; width: 92px; height: 18px; border: 0px #000000 solid; padding: 8px 0px 8px 18px; text-align: left; }

#formular #button_panel button.f_b {
         float:left;
         background-color: rgba(0,0,0,0.12);
         background-image: url(../images/dot_back.png);
         background-position: center left;
         padding-left: 35px;
         text-align: left;
}
#formular #button_panel button.f_b:hover { background-color: rgba(0,0,0,0.20); }


#formular #button_panel .f_n {
         float:right;
         background-color: var(--second-color);
         background-image: url(../images/dot_next.png);
         background-position: 78px center;
         padding-right: 40px;
         text-align: right;

         width: 110px;
         height: 36px;
}
#formular #button_panel .f_n:hover { background-color: var(--formular-black); }

#formular #button_panel button[disabled]{ opacity: 1.0; }
#formular #button_panel button.none { cursor: default; opacity: 0.0; filter: alpha(opacity=0); }

#formular .bg.error, #formular .big.error {
         border: 2px #DF0000 solid;
         margin-bottom: 10px;
}