/* --- MISC --- */

.lightMode,.darkMode{min-height:100vh}
.lightMode{background-color:#edeffd}
.darkMode{background-color:#24242c}

body{overflow:hidden}
body.layout-1,body.layout-2,body#page-45,body#page-51{overflow-y:auto}

main{min-height:100vh}
main > article > .ceItem:first-child{padding-top:0}

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{display:inline-block;position:relative;padding:25px 50px;-webkit-box-shadow:2px 2px 20px rgba(0,0,0,.3);box-shadow:2px 2px 20px rgba(0,0,0,.3);-webkit-border-radius:20px;border-radius:20px}

.lightMode .infoWrap .ceItem.extCont > .itemWrap,.lightMode #savingValues .compArea > .innerWrap{background-color:#f2f2f2}
.darkMode .infoWrap .ceItem.extCont > .itemWrap,.darkMode #savingValues .compArea > .innerWrap{background-color:#384047}

.infoWrap .savingsLogo{display:inline-block;margin-bottom:20px;width:25%}
.infoWrap .savingsLogo img{width:100%!important;height:auto!important}

/* start overlay vars */

#cSavings{margin:0;padding:40px 0;width:100%;height:100%;text-align:center}

#savingOverlay{display:inline-block;margin:0;padding-bottom:40px;text-align:center}

#savingOverlay .hGroup .topTitle{display:inline-block;padding:5px 30px;width:auto;font-size:16px;-webkit-border-radius:20px;border-radius:20px}
#savingOverlay .hGroup h2:last-child{padding-bottom:0}
#savingOverlay .hGroup .mainTitle{display:block;font-size:30px;font-family:jsb,arial,helveticablack,helvetica,awesome,awesome5,microns,sans-serif;font-weight:bold;line-height:1.1}

.lightMode #savingOverlay .hGroup .topTitle{color:#fff!important;background-color:#24292e}
.darkMode #savingOverlay .hGroup .topTitle{color:#1a1a1a!important;background-color:#fff}

#savingOverlay .hGroup{padding-bottom:15px}

#savingOverlay .bodyText *{font-size:16px}
#savingOverlay .bodyText ul{width:100%;padding:5px 30px}
#savingOverlay .bodyText ul li{display:inline-block;position:relative;padding:0 5px 10px 30px;width:49%;text-align:left}
#savingOverlay .bodyText ul li::before{position:absolute;top:0;left:0}
.darkMode #savingOverlay .bodyText ul li::before{content:url(../../img/check-wh.svg)}
.lightMode #savingOverlay .bodyText ul li::before{content:url(../../img/check-bl.svg)}

#savingOverlay table{margin:30px 0 0;border:none}
#savingOverlay table th,#savingOverlay table td{padding:0;text-align:left;background-color:transparent;border:none}
#savingOverlay table td{padding:0 0 10px 30px;background-size:26px;background-position:left top;background-repeat:no-repeat}
#savingOverlay table td:first-of-type{padding-right:10px}

.darkMode #savingOverlay *{color:#fff}
.darkMode #savingOverlay .countSteps,.darkMode #savingOverlay .addText.outer *{color:#aaa!important}
.darkMode #savingOverlay table td{background-image:url(../../img/check-wh.svg)}
.lightMode #savingOverlay table td{background-image:url(../../img/check-bl.svg)}

#savingOverlay .galWrap figure img{width:25%!important}

/* conclusion overlay vars */

#savingContact{display:none}
#savingContact .hGroup{padding:0}

.darkMode #savingContact .hGroup *,.darkMode #savingContact .bodyText *{color:#fff}

#savingLink{display:none}
#savingLink .hGroup{padding:0}

.darkMode #savingLink .hGroup *,.darkMode #savingLink .bodyText *{color:#fff}


/* --- OUTERBOX --- */

.savingBox .outerWrap{padding:20px calc(30% + 60px) 0}
.savingBox .outerWrap *{font-size:12px;line-height:1.4;color:#aaa}
.savingBox .outerWrap p{margin:0 0 10px}

.darkMode .outerWrap *{color:#aaa!important}
.darkMode .outerWrap a{color:#c1c1c1!important}
.darkMode .outerWrap a:hover{color:#fff!important}
.lightMode .outerWrap *{color:#1a1a1a!important}
.lightMode .outerWrap a{color:#aaa!important}
.lightMode .outerWrap a:hover{color:#1a1a1a!important}


/* --- FORM COMPONENTS --- */

.savingComponents .basicData .inputArea select,.savingComponents .basicData .inputArea label,.savingComponents .personalData label{font-size:16px}
.savingComponents .personalData label{font-family:jsr,arial,helvetica,awesome,awesome5,microns,sans-serif;font-weight:normal;text-align:left}
.savingComponents .basicData .inputArea select{display:block;margin:0 0 10px;width:100%;text-align:center!important;cursor:pointer;-webkit-border-radius:7px;border-radius:7px}
.savingComponents .basicData .inputArea textarea{display:block;margin:5px 0 20px;padding:10px;width:100%;text-align:left!important;cursor:pointer;-webkit-border-radius:7px;border-radius:7px}

.darkMode .savingComponents .basicData .inputArea label{color:#fff}
.darkMode #savingValues .compArea .fieldWrap .fieldBody .inputfield input,.savingComponents .basicData .inputArea select,
.darkMode #savingValues .compArea .fieldWrap .fieldBody .textarea textarea{color:#1a1a1a;background-color:#fff;border-color:#fff}
.darkMode #savingValues .compArea .fieldWrap .fieldBody .inputfield input:focus,.darkMode #savingValues .compArea .fieldWrap .fieldBody .textarea textarea:focus{color:#fff;background-color:transparent}


/* --- BUTTONS --- */

.countNavStart{margin-top:10px}
.countNav{padding-top:10px}
.countNav .lnk.back{cursor:pointer}

.savingComponents .compArea.personalData .btn.next.inact{display:none;position:relative}
/* .savingComponents .compArea.personalData .btn.next.inact::after{content:'';display:block;position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;background-color:#f2f2f2;-webkit-opacity:.5;opacity:.5;-webkit-border-radius:7px;border-radius:7px} */
/* .darkMode .savingComponents .compArea.personalData .btn.next.inact::after{background-color:rgba(56,64,71,.5)} */

.savingBox .lnkWrap{margin:20px 0 0!important}
.savingBox #savingOverlay .lnkWrap{margin:10px 0 0!important}
.savingBox .btn.next{display:inline-block;position:relative;width:auto;-webkit-border-radius:7px;border-radius:7px}
.savingBox .btn.next > *{display:block;padding:10px 20px;width:100%;font-size:20px;border:none;cursor:pointer;-webkit-border-radius:7px;border-radius:7px}
.savingBox .btn.next > *::after{position:relative;top:2px;left:0;margin-left:10px;font-family:awesome5}
.savingBox .btn.next script{display:none!important}

.savingComponents .compArea .lnk.back{display:inline-block;width:auto;font-weight:normal;font-family:jsr,arial,helvetica,awesome,awesome5,microns,sans-serif;text-align:left;cursor:pointer}
.savingComponents.noPosting .compArea .lnk.back{display:block;width:100%}
.savingComponents .compArea .lnk.back::before{content:'\e704';padding-right:5px}

.savingComponents .compArea.basicData .inputArea.col-2 > span:not(.btn.next.count){width:48%}

.savingComponents .compArea .lnk.back,.savingComponents .compArea .lnk.back *,.countSteps{color:#aaa}
.lightMode .savingComponents .compArea .lnk.back:hover,.lightMode .savingComponents .compArea .lnk.back:hover *{color:#000}
.darkMode .savingComponents .compArea .lnk.back:hover,.darkMode .savingComponents .compArea .lnk.back:hover *{color:#fff}

#cSavings .btn.next:hover,#cSavings .btn.next:hover > *{filter:brightness(90%)}


/* --- LOADER --- */

.pLoader{position:fixed;z-index:999;top:0;left:0;margin:0;padding:200px 0 0;width:100%;height:100%;text-align:center;background-color:rgba(255,255,255,.3)}
.pLoading{display:inline-block;width:60px;height:60px;border:5px solid #ccc;-webkit-border-radius:50%;border-radius:50%;border-top-color:#2542e4;border-left-color:#2542e4;animation:spin 1s infinite ease-in}

.loader{display:none;position:fixed;z-index:999;top:0;left:0;margin:0;padding:200px 0 0;width:100%;height:100%;text-align:center}
.darkMode .loader{background-color:rgba(255,255,255,.3)}
.lightMode .loader{background-color:rgba(0,0,0,.3)}
.loader .loading{display:inline-block;width:60px;height:60px;border:5px solid #ccc;-webkit-border-radius:50%;border-radius:50%;animation:spin 1s infinite ease-in}

@keyframes spin {
	0% {
		transform: rotate(0deg);
		}
	100% {
		transform: rotate(360deg);
		}
	}


/* --- JOTFORM --- */

.jotformWrap{margin-top:10px;text-align:center}


/* --- OWNFORM --- */

/* .ownWrap fieldset.layout2{display:-webkit-box!important;display:-webkit-flex!important;display:flex!important} */
.ownWrap .checkWrap{-webkit-justify-content:center;justify-content:center}
.ownWrap .checkWrap .checkbox > label,.ownWrap .radioWrap .radio > label{font-size:16px;color:#fff!important}
.ownWrap .fieldwrap.submitBox input{padding:10px 25px;font-size:20px!important;font-weight:normal;font-family:monar,arial,helvetica,helveticablack,awesome,awesome5,microns,sans-serif;color:#fff;background-color:#2542e4;border:none;-webkit-border-radius:7px;border-radius:7px}
.ownWrap .fieldwrap.submitBox input:hover{color:#fff;filter:brightness(90%)}

.ownWrap .powermail_create{display:none}


/* --- VIEWPORTS --- */

@media only screen and (min-width:2400px) {

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{width:30%}
.savingBox .outerWrap{padding:0 calc(30% + 50px)}

}


@media only screen and (max-width:2399px) {

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{width:50%}
.savingBox .outerWrap{padding:20px calc(25% + 50px) 0}

}

@media only screen and (max-width:1800px) {

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{width:60%}
.savingBox .outerWrap{padding:20px calc(20% + 50px) 0}

}

@media only screen and (max-width:1400px) {

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{width:70%}
.savingBox .outerWrap{padding:20px calc(15% + 50px) 0}

}

@media only screen and (max-width:1024px) {

html,body{font-size:14px}

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{padding:20px;width:80%}
.savingBox .outerWrap{padding:20px calc(10% + 20px) 0}

.infoWrap .savingsLogo{width:35%}

#savingOverlay .hGroup .topTitle{font-size:16px}
#savingOverlay .hGroup .mainTitle{font-size:25px}
#savingOverlay .bodyText *{font-size:16px}
#savingOverlay .bodyText ul li{display:block;position:relative;padding:0 0 10px 30px;width:100%}
.darkMode #savingOverlay table,.darkMode #savingOverlay table tbody,.darkMode #savingOverlay table th,.darkMode #savingOverlay table td{display:block;width:100%}

#savingValues .savingsLogo{margin:0;width:25%}

#savingValues .compArea h2 span.title{font-size:25px!important;line-height:auto!important}
#savingValues .compArea.basicData .inputArea h2{padding-top:20px}
#savingValues .compArea.basicData .outputArea h2{padding-top:0}

#savingValues .compArea .fieldWrap .fieldBody,#savingValues .compArea.basicData .inputArea, #savingValues .compArea.basicData .outputArea .innerWrap{padding:0}

#savingValues .compArea .fieldWrap .fieldBody .inputfield *,.savingComponents .compArea.personalData .inputArea .btn.next input{font-size:16px}
#savingValues .compArea .fieldWrap .fieldBody .inputfield{width:100%}

.savingComponents .outputArea > .innerWrap > :not(.ersparnis):not(.btn),.savingComponents .outputArea > .innerWrap > .ersparnis label{margin:0 0 20px;width:100%}
.savingComponents .outputArea > .innerWrap > span > *,.savingComponents .basicData .inputArea select,.savingComponents .basicData .inputArea label,
.savingComponents .outputArea > .innerWrap > .ersparnis label,.savingComponents .outputArea > .innerWrap > .ersparnis label > span.labelTitle{font-size:16px}

main .ceItem.extCont .lnkWrap .button.next > *,.savingComponents .compArea .btn.next > *{width:100%;font-size:16px}

.savingComponents .outputArea > .innerWrap > .ersparnis{margin:20px 0 10px}
.savingComponents .outputArea > .innerWrap > .ersparnis > label.years{margin-top:0}

}

@media only screen and (max-width:850px) {

.infoWrap .ceItem.extCont > .itemWrap,#savingValues .compArea > .innerWrap{padding:20px;width:90%}
.savingBox .outerWrap{padding:20px calc(5% + 20px) 0}

}