/* --- ALL BOXES --- */

#savingValues{display:block;position:relative;width:100%;text-align:center}

#savingValues .insertArea{display:none}

#savingValues .compArea{display:none;padding-bottom:40px;width:100%;-webkit-opacity:1!important;opacity:1!important}
#savingValues .compArea .hGroup h2 + p:first-of-type{margin-top:5px!important;color:#aaa}

#savingValues .personalArea{padding:15px 0 0}

#savingValues .outputArea{padding:10px 0 0}


/* --- INPUT --- */

#savingValues .savingsLogo{display:inline-block;margin-bottom:10px;width:15%}
#savingValues .personalData .savingsLogo{margin-bottom:20px}
#savingValues .savingsLogo img{width:100%!important;height:auto!important}

#savingValues h2{margin:0 0 10px;padding:0;width:100%;font-size:20px!important}
#savingValues h4{margin:10px 0 0;padding:0 0 10px;font-size:16px;font-style:italic}
#savingValues .compArea h2{margin:0!important;padding:0 0 10px;text-align:center}
#savingValues .compArea.basicData h2{padding:0 0 20px}
#savingValues .compArea h2 span.title{font-size:30px!important;line-height:1.1}
.darkMode #savingValues h2,.darkMode #savingValues h4{color:#fff}

#savingValues .compArea .fieldWrap .hGroup p{display:block;padding-bottom:20px;width:100%}

#savingValues .compArea .fieldWrap .fieldBody > *.pos-1{order:1}#savingValues .compArea .fieldWrap .fieldBody > *.pos-2{order:2}#savingValues .compArea .fieldWrap .fieldBody > *.pos-3{order:3}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-4{order:4}#savingValues .compArea .fieldWrap .fieldBody > *.pos-5{order:5}#savingValues .compArea .fieldWrap .fieldBody > *.pos-6{order:6}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-7{order:7}#savingValues .compArea .fieldWrap .fieldBody > *.pos-8{order:8}#savingValues .compArea .fieldWrap .fieldBody > *.pos-9{order:9}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-10{order:10}#savingValues .compArea .fieldWrap .fieldBody > *.pos-11{order:11}#savingValues .compArea .fieldWrap .fieldBody > *.pos-12{order:12}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-13order:13}#savingValues .compArea .fieldWrap .fieldBody > *.pos-14{order:14}#savingValues .compArea .fieldWrap .fieldBody > *.pos-15{order:15}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-16{order:16}#savingValues .compArea .fieldWrap .fieldBody > *.pos-17{order:17}#savingValues .compArea .fieldWrap .fieldBody > *.pos-18{order:18}
#savingValues .compArea .fieldWrap .fieldBody > *.pos-19{order:19}#savingValues .compArea .fieldWrap .fieldBody > *.pos-20{order:20}#savingValues .compArea .fieldWrap .fieldBody > *.pos-x{order:99}
#savingValues .compArea .fieldWrap .fieldBody .field{display:inline-block;margin-bottom:10px;width:49%}
#savingValues .compArea .fieldWrap .fieldBody .field *{font-size:16px;text-align:left}
#savingValues .compArea .fieldWrap .fieldBody .field input{-moz-border-radius:7px;border-radius:7px}
#savingValues .compArea .fieldWrap .fieldBody .textarea{display:block;margin-bottom:20px;width:100%}
#savingValues .compArea .fieldWrap .fieldBody .textarea *{font-size:16px;text-align:left}
#savingValues .compArea .fieldWrap .fieldBody .textarea textarea{-moz-border-radius:7px;border-radius:7px}

.darkMode #savingValues .compArea .fieldWrap .hGroup p{color:#aaa}
.darkMode #savingValues .compArea .fieldWrap .fieldBody .field *{color:#fff}

#savingValues .personalData .errorHint{width:100%;text-align:left}
#savingValues .personalData .errorHint *{display:none;margin:5px 0 0;width:100%;font-size:12px;text-align:left;color:#f00}
#savingValues .personalData .errorHint *::before{content:'\e75a';display:inline-block;position:relative;top:2px;padding:0 2px 0 5px;font-size:14px;font-family:microns}


/* --- OUTPUT --- */

.savingComponents .outputArea > *:not(.ersparnis):not(.btn){display:inline-block;margin:0 0 15px;width:48%;text-align:center}
.savingComponents .outputArea > span > *{display:inline-block;font-size:16px;text-align:center}
.savingComponents .outputArea > span > span,.savingComponents .outputArea > .ersparnis label > span:not(.labelTitle){padding:5px 10px;width:100%;color:#1a1a1a;border:2px solid #1a1a1a;-webkit-border-radius:7px;border-radius:7px}

.savingComponents .outputArea > span > label.hasHint{position:relative}
.savingComponents .outputArea > span > label.hasHint::after{content:'\f05a';display:none;margin-left:5px;width:18px;height:18px;font-family:awesome5s;color:#1a1a1a;cursor:pointer}
.savingComponents .outputArea > span > label.hasHint > span.hint{display:none;position:absolute;z-index:2;top:100%;right:0;padding:10px;text-align:left;background-color:#eaeaea;-webkit-border-radius:7px;border-radius:7px}
/* .savingComponents .outputArea > span > label.hasHint:hover > span.hint{display:block} */

.savingComponents .outputArea > span > span:not(.labelTitle)::after,.savingComponents .outputArea > span > label.euro > span::after,
.savingComponents .outputArea > span > label.years > span::after{padding-left:5px}
.savingComponents .outputArea > span.stk > span:not(.labelTitle)::after{content:'Stk.'}
.savingComponents .outputArea > span.kwp > span:not(.labelTitle)::after{content:'kWp'}
.savingComponents .outputArea > span.kwh > span:not(.labelTitle)::after{content:'kWh'}
.savingComponents .outputArea > span.perc > span:not(.labelTitle)::after{content:'%'}
.savingComponents .outputArea > span.euro > span:not(.labelTitle)::after,
.savingComponents .outputArea > span > label.euro > span:not(.labelTitle)::after{content:'€'}
.savingComponents .outputArea > span > label.approx > span:not(.labelTitle)::before{content:'~ '}
.savingComponents .outputArea > span > label.years > span:not(.labelTitle)::after{content:'Jahre'}

.savingComponents .outputArea > .ersparnis{margin:10px 0 20px;padding-top:10px;width:100%;border-top:2px solid #1a1a1a}
/* .savingComponents .outputArea > .ersparnis > label.years{display:block;margin-top:20px;width:100%} */
/* .savingComponents .outputArea > .ersparnis.years20{margin:0;padding:0;border:none} */
.savingComponents .outputArea > .ersparnis *{display:inline-block;width:auto;text-align:center;font-size:16px}
.savingComponents .outputArea > .ersparnis label{display:inline-block;padding:0;width:31.33%;font-weight:bold;text-align:center}
.savingComponents .outputArea > .ersparnis label > span.labelTitle{display:block;padding-bottom:5px;width:100%;font-size:16px}
.savingComponents .outputArea > .ersparnis label > span:not(.labelTitle){padding:5px 10px;text-align:center}

.savingComponents .outputArea > span.einspeisung,.savingComponents .outputArea > span.bezug{display:none!important}

.darkMode .savingComponents .outputArea > span > label,
.darkMode .savingComponents .outputArea > .ersparnis label > span.labelTitle{color:#fff}
.darkMode .savingComponents .outputArea > span > span:not(.request),
.darkMode .savingComponents .outputArea > .ersparnis label > span:not(.labelTitle){color:#1a1a1a;background-color:#fff;border-color:#fff}
.darkMode .savingComponents .outputArea > .ersparnis{border-color:#fff}