@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-regular.woff2") format("woff2"),
    url("assets/fonts/opensans-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-bold.woff2") format("woff2"),
    url("assets/fonts/opensans-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* - -- -- -- -- DEFAULT STYLE -- -- -- -- -- -- */

.CLvslcalculator,
.CLvslcalculator .formrow button[type=submit],
.CLvslcalculator .formrow.welcome-container .welcome-text-wrapper h1,
.CLvslcalculator .formrow.subfooter span,
.formrow.footer a,
.CLvslcalculator .CLvslresults .resultlist > h3,
.CLvslcalculator .CLvslresults .resultlist .prozentbar p,
.CLvslcalculator .CLvslresults .resultlist .prozentbar.bar-unwirtschaftliche p,
.CLvslcalculator .CLvslresults .resultlist .prozentbar.bar-niedrigeinkommen p,
.CLvslcalculator .formrow input[type=text],
.CLvslcalculator .formrow input[type=num],
.CLvslcalculator .formrow .select-bundesland,
.CLvslcalculator .formrow .radio-wrapper .radiowrap input{
  font-family: "Open Sans";
}


/*  DEFAULT FONT COLOR  */
.CLvslcalculator{
  color: black;
}

/*  LOGO SIZE LIMITATION  */
.CLvslcalculator .formrow.welcome-container .logo-wrapper .logo {
    width: 200px;
    height: auto;
    max-height: 100px;
}

/*  BORDERCOLOR,BACKGROUNDCOLOR, BOXSHADOW AND THE BORDER WHEN THE INPUT FIELD IS CLICKED  */
.CLvslcalculator .formrow input[type=text],
.CLvslcalculator .formrow input[type=num],
.CLvslcalculator .formrow .select-bundesland{
  background:  #fff;
  border: 1px solid #C4C4C4
  box-shadow: inset 2px 2px 4px rgb(0 0 0 / 25%);
  caret-color:  #005AAA;
  /*color: #fff;*/
}

/*  BORDERCOLOR,BACKGROUNDCOLOR, BOXSHADOW AND THE BORDER WHEN THE INPUT FIELD IS IN FOCUS  */
.CLvslcalculator .formrow input[type=text]:focus,
.CLvslcalculator .formrow input[type=num]:focus,
.CLvslcalculator .formrow select:focus{
  background-color: linear-gradient(0deg,  #F06400,  #F06400),  #F06400;
  border: 2px solid  #F06400;
  box-shadow: inset 2px 2px 4px  #F06400;
}
/*  BACKGROUNDCOLOR AND TEXTCOLOR FOR THE KIDS INPUT FIELD   */
.CLvslcalculator .formrow input.number-kids[type=text]{
  background:  rgba(255, 255, 255, .6);
  color: black;
}

/*  TEXTCOLOR FOR "unter 18 Jahren" OVER THE KIDS INPUT FIELD  */
.CLvslcalculator .formrow label span{
  color: black;
}

/*  BACKGROUND,TEXTCOLOR AND BORDERCOLOR FOR THE PLUS/MINUS BUTTONS WITHIN THE KIDS INPUT  */
.CLvslcalculator .formrow .child-num-wrapper .change-value-button{
  background:  #F06400;
  border: 1px solid  #F06400;
  color: #fff;
}

/* BACKGROUND AND TEXTCOLOR FOR BUTTONS ON PAGE  */
.CLvslcalculator .formrow button[type=submit],
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a{
  background:#F06400;
  color: #fff;
  border-radius: 2px;
}

/*  BACKGROUND AND BORDERCOLOR FOR THE VERSICHERUNGS CHECKBOX IF ITS NOT CHECKED   */
.CLvslcalculator .formrow .radio-wrapper .radiowrap input{
  background:  transparent;
  border: 1px solid  #F06400;
}

/*  TEXTCOLOR FOR VERSICHERUNGS CHECKBOX TEXT  */
.CLvslcalculator .formrow .radio-wrapper .radiowrap label span{
  color: black;
}

/*  BACKGROUND FOR THE VERSICHERUNGS CHECKBOX IF ITS CHECKED   */
.CLvslcalculator .formrow .radio-wrapper .radiowrap input:checked{
  background:  #F06400;

}
/*  BACKGROUND FOR THE STARTTAG KRANKENGELD CHECKBOX IF ITS NOT CHECKED   */
.CLvslcalculator .formrow .extrafield_pkv.elmnt-id-JvrPkv .radiowrap input{
  background: #fff;
  border: 1px solid #C4C4C4;
}
/*  BACKGROUND FOR THE STARTTAG KRANKENGELD CHECKBOX IF ITS CHECKED   */
.CLvslcalculator .formrow .extrafield_pkv.elmnt-id-JvrPkv .radiowrap input:checked{
  background: #F06400;
  border: none;
}

/*   COLOR FOR THE STARTDAY KRANKENGELD   */
.CLvslcalculator .formrow .extrafield_pkv.elmnt-id-JvrPkv .radiowrap span{
  color: black;
}

/*   COLOR FOR THE ACTIVE STARTDAY KRANKENGELD   */
.CLvslcalculator .formrow .extrafield_pkv.elmnt-id-JvrPkv .radiowrap span.checked{
  color: #fff;
}

/*  COLOR OF THE ZURÜCK BUTTON AT THE RESULTSPAGE  */
.CLvslresults .change-button{
  color: #F06400;
}

/*  COLOR OF THE ZURÜCK BUTTON ICON AT THE RESULTSPAGE  */
.CLvslresults .change-button svg{
  fill: #F06400;
}

/*  COLOR OF THE ICONS IN BUTTONS  */
.CLvslcalculator .formrow button[type=submit] svg path,
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a.restart-pdf svg path{
  fill: white;
}
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a.auswertung-email svg path,
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a.auswertung-email svg rect,
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a.download-pdf svg path,
.CLvslcalculator .CLvslresults .resultlist.results-infos .information-button-wrapper a.download-pdf svg rect,
.CLvslcalculator .formrow .radio-wrapper .radiowrap svg path{
  stroke: white;
}


















/* ----------- ADVANCED CSS (ENABLE ONLY THAT LINE WHICH U NEED)----------- */


/*  TEXTCOLOR FOR THE INPUT FIELD  */
/*
.CLvslcalculator .formrow input[type=text]::placeholder,
.CLvslcalculator .formrow input[type=num]::placeholder{
  color: #fff;
}


/*  COLOR FOR BUNDESLAND DROPDOWN  */
/*
.edd-root{
  background:#005AAA;
  border: 1px solid #005AAA;
  caret-color:#F06400;
  color: #fff;
}

/*  COLOR FOR BUNDESLAND DROPDOWN AUSWAHL  */
/*
.edd-root .edd-group{
  background:#005AAA;
  color: #fff;
}

/*  CHANGE THIS ONLY IF TEXT IS TOO BIG FOR NAV  */
/*

.CLvslcalculator .CLvslresults .tabs li{
    margin-right: 10px;
}


/* BACKGROUND FOR "Versorgungslücke berechnen" BUTTON */
/*

/* TEXTCOLOR FOR TEXT UNDER "Versorgungslücke berechnen" BUTTON */
/*
.CLvslcalculator .formrow.subfooter span{
  color: black;
}

/* TEXTCOLOR FOR SUBLINE WHICH ARE INFORMATION FOR TEXT WITH A '*' */
/*
.CLvslcalculator .CLvslresults .resultlist .subline{
    color: black;
}

/*  COLOR OF THE LINE WHICH CROSSES OUT THE SALARY ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .resultlist_row.strike::after{
    background:  green;
}

/*  TEXTCOLOR AND BORDER FOR "Fehlbetrag/Monat" ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .resultlist_row.fehlbetrag{
    color: green;
    border-top: 2px solid  green;
}

/*  TEXTCOLOR FOR INFORMATINTEXT UNDER "Fehlbetrag/Monat" ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .resultlist_info{
    color: red;
}

/*  BACKGROUNDCOLOR FOR THE DARK PARTS OFF THE STATISTIC OVERVIEW ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .prozentbar{
    background-color:  green;
}

/*  TEXTCOLOR FOR THE PERCENTAGES IN THE STATISTIC OVERVIEW ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .prozentbar p{
    color: red;
}

/*  BACKGROUNDCOLOR FOR THE LIGHT PARTS OFF THE STATISTIC OVERVIEW ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .prozentbar.bar-unwirtschaftliche,
.CLvslcalculator .CLvslresults .resultlist .prozentbar.bar-niedrigeinkommen{
    background-color:  green;
}

/*  BACKGROUNDCOLOR FOR THE WARNINGCONTAINER ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .warning-container{
  background: green;
}

/*  TEXTCOLOR FOR THE HIGHLIGHTED TEXTPARTS IN THE WARNINGCONTAINER ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist .warning-container .text-warning span{
  color: red;
}

/*  BACKGROUNDCOLOR FOR THE MISSING MONEY BAR ON TOP ON RESULTSPAGE AT DEFAULT ITS THE RED PART ON THE RIGHT  */
/*
.CLvslcalculator .CLvslresults .resultlist_bar{}
.CLvslcalculator .CLvslresults .resultlist_bar .bar{
    background:  red;
}

/*  BACKGROUNDCOLOR FOR THE COMPLETE MISSING MONEY BAR ON TOP ON RESULTSPAGE ITS UNDER THE RED BAR*/
/*
.CLvslcalculator .CLvslresults .resultlist_bar .bar .barground{
    background-color:  #fff;
}

/*  TEXTCOLOR FOR THE TEXT AT THE LEFT OF THE RED MONEY BAR ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist_bar .bar span.txt_left {
    color: red;

/*  TEXTCOLOR FOR THE TEXT AT THE RIGHT OF THE RED MONEY BAR ON RESULTSPAGE  */
/*
}
.CLvslcalculator .CLvslresults .resultlist_bar .bar span.txt_right {
    color: green;
}

/*  TEXTCOLOR FOR THE LIGHT TEXT BELOW THE RED MONEY BAR ON RESULTSPAGE  */
/*
.CLvslcalculator .CLvslresults .resultlist_bar .txt_below > span{
    color: red;
}

/*  BACKGROUNDCOLOR FOR THE HEADER ON STARTPAGE  */
/*
.CLvslcalculator .formrow.welcome-container{
  /*background:  red;*/
  /*
}

/*  COLOR FOR THE € ICON  */
/*
.CLvslcalculator .income-input:before{
  color: #fff;
}

.CLvslcalculator .infotext_more .teaser span,
.CLvslcalculator .infotext_more a,
.CLvslcalculator .infotext_more .full span{
  color: red;
}

/*  COLOR OF THE CLOSE X IN THE ERROR OVERLAY  */
/*
.CLvslerr.visible .closer{
  color: green;
}

/*  BACKGROUNDCOLOR AND TEXTCOLOR FROM THE FOOTER  */
/*
.formrow.footer{
  background:  red;
  color: #fff;
}

/*  TEXTCOLOR FROM LINKS WITHIN THE FOOTER  */
/*
.formrow.footer a{
  color: #fff;
}