.inputs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inputs-container .legend {
  max-width: 125px;
  width: 100%;
  margin-right: 20px;
}
.inputs-container #zip {
  border-radius: 10px;
  border: none;
  min-height: 50px;
}

#container-bar {
  display: flex;
  padding: 4% 0px;
  flex-direction: row;
  align-items: center;
  width: 72%;
  height: 5px;
}
#container-bar .bar-left {
  flex: 1 0 0%;
  height: 0px;
  position: relative;
  width: 100%;
  padding-bottom: 2.7%;
  background-color: gray;
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 2;
  margin-right: -4px;
}
#container-bar .bar-left.active {
  background-color: #78BB4B;
}
#container-bar .bar {
  flex: 3 0 0%;
  height: 0px;
  position: relative;
  width: 100%;
  padding-bottom: 2.7%;
  background-color: gray;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  z-index: 2;
  margin-left: -4px;
  margin-right: -4px;
}
#container-bar .bar.active {
  background-color: #78BB4B;
}
#container-bar .bar-right {
  flex: 1 0 0%;
  height: 0px;
  position: relative;
  width: 100%;
  padding-bottom: 2.7%;
  background-color: gray;
  border-top: 3px solid white;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
  margin-left: -4px;
}
#container-bar .bar-right.active {
  background-color: #78BB4B;
}
#container-bar .bubble {
  height: 0;
  position: relative;
  width: 100%;
  flex: 1 0 0%;
  padding-bottom: 5%;
  background-color: gray;
  border: 3px solid white;
  border-radius: 100px;
  z-index: 1;
  cursor: pointer;
}
#container-bar .bubble.big {
  flex: 1.5 0 0%;
  padding-bottom: 7.5%;
}
#container-bar .bubble.active {
  background-color: #78BB4B;
}
#container-bar .active {
  background-color: #78BB4B;
}

#container-yearly-consumption {
  display: flex;
  width: 220px;
}
#container-yearly-consumption .container-yearly-consumption-wrapper {
  display: flex;
  border: 1px solid #9498B1;
  border-radius: 15px;
  max-width: 150px;
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 0;
}
#container-yearly-consumption .container-yearly-consumption-wrapper input[type=text] {
  width: calc(100% - 80px);
  border-radius: 0px;
  margin: 0px;
  text-align: center;
  border: none;
  box-shadow: none;
  padding: 0;
}
#container-yearly-consumption .container-yearly-consumption-wrapper .plus, #container-yearly-consumption .container-yearly-consumption-wrapper .minus {
  height: 40px;
  padding: 0px 10px;
  line-height: 40px;
  cursor: pointer;
  width: 40px;
  text-align: center;
}
#container-yearly-consumption .container-yearly-consumption-wrapper .plus a, #container-yearly-consumption .container-yearly-consumption-wrapper .minus a {
  text-decoration: none;
  color: #9498B1;
}
#container-yearly-consumption #consumption-label {
  line-height: 55px;
  margin-left: 10px;
  font-size: 16px;
  color: #283063;
}

#container-persons {
  display: flex;
  width: 72%;
  margin-bottom: 5px;
}
#container-persons .space-left {
  flex: 1 0 0%;
  margin-left: 3px;
}
#container-persons .person.active {
  color: #78BB4B;
}
#container-persons .person {
  flex: 2 0 0%;
  cursor: pointer;
}
#container-persons .person img.active {
  display: none;
}
#container-persons .person img.inactive {
  display: block;
}
#container-persons .person #Fill-1, #container-persons .person #Fill-4 {
  fill: #fff;
}
#container-persons .person.active #Fill-1, #container-persons .person.active #Fill-4 {
  fill: #78BB4B;
}
#container-persons .person.active img.active {
  display: block;
}
#container-persons .person.active img.inactive {
  display: none;
}
#container-persons .space-right {
  flex: 1 0 0%;
}
#container-persons .space {
  flex: 3 0 0%;
}

@media screen and (max-width: 768px) {
  #container-consumption {
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
#container-consumption .legend {
  max-width: 210px;
  font-size: 20px;
  line-height: normal;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  #container-consumption .legend {
    width: 100%;
    max-width: none;
  }
}
#container-consumption .inputs {
  width: 250px;
}
#container-consumption .gas-only, #container-consumption .strom-only {
  display: none;
}
#container-consumption[data-type=strom] .inactive_gas, #container-consumption[data-type=strom] .active_gas {
  display: none !important;
}
#container-consumption[data-type=strom] .strom-only {
  display: block;
}
#container-consumption[data-type=gas] .inactive_strom, #container-consumption[data-type=gas] .active_strom {
  display: none !important;
}
#container-consumption[data-type=gas] .gas-only {
  display: block;
}

.tarifrechner-form {
  display: flex;
  gap: 50px;
}
@media screen and (max-width: 1100px) {
  .tarifrechner-form {
    flex-direction: column;
  }
}
.tarifrechner-form .left-wrapper {
  width: 33.3%;
}
@media screen and (max-width: 1100px) {
  .tarifrechner-form .left-wrapper {
    width: 100%;
    max-width: 400px;
  }
}
.tarifrechner-form .left-wrapper .button-container {
  display: flex;
  margin-bottom: 40px;
}
.tarifrechner-form .left-wrapper .button-container button {
  background: rgba(234, 234, 234, 0.47);
  min-height: 79px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 700;
  color: #283063;
}
.tarifrechner-form .left-wrapper .button-container button#stromButton {
  border-radius: 20px 0 0 20px;
}
.tarifrechner-form .left-wrapper .button-container button#gasButton {
  border-radius: 0 20px 20px 0;
}
.tarifrechner-form .left-wrapper .button-container button span {
  color: #283063;
  font-size: 20px;
}
.tarifrechner-form .left-wrapper .button-container button img {
  margin-right: 10px;
}
.tarifrechner-form .left-wrapper .button-container button .inactive-btn {
  display: block;
}
.tarifrechner-form .left-wrapper .button-container button .active-btn {
  display: none;
}
.tarifrechner-form .left-wrapper .button-container button.active {
  background: #70BDE2;
  color: #fff;
}
.tarifrechner-form .left-wrapper .button-container button.active .inactive-btn {
  display: none;
}
.tarifrechner-form .left-wrapper .button-container button.active .active-btn {
  display: block;
}
.tarifrechner-form .left-wrapper #container-city #container-zip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.tarifrechner-form .left-wrapper #container-city #container-zip .legend {
  font-size: 20px;
  font-weight: 400;
}
.tarifrechner-form .left-wrapper #container-city #container-zip .inputs input {
  background: #fff;
  border: 1px solid #9498B1;
  border-radius: 15px;
  max-width: 180px;
  width: 100%;
}
.tarifrechner-form .right-wrapper {
  width: 66.6%;
}
@media screen and (max-width: 1100px) {
  .tarifrechner-form .right-wrapper {
    width: 100%;
  }
}
.tarifrechner-form .right-wrapper .top-wrapper {
  margin-bottom: 50px;
}
.tarifrechner-form .bottom-wrapper {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 700px) {
  .tarifrechner-form .bottom-wrapper {
    flex-direction: column;
    gap: 30px;
  }
}
.tarifrechner-form .bottom-wrapper .container-datenschutz {
  width: 60%;
}
@media screen and (max-width: 700px) {
  .tarifrechner-form .bottom-wrapper .container-datenschutz {
    width: 100%;
  }
}
.tarifrechner-form .bottom-wrapper .container-datenschutz .datenschutz {
  display: flex;
  align-items: flex-start;
}
.tarifrechner-form .bottom-wrapper .container-datenschutz .datenschutz input {
  margin-right: 5px;
}
.tarifrechner-form .bottom-wrapper .container-datenschutz label {
  font-size: 16px;
  font-weight: 400;
}
.tarifrechner-form .bottom-wrapper #container-button {
  width: 40%;
  justify-content: right;
}
@media screen and (max-width: 700px) {
  .tarifrechner-form .bottom-wrapper #container-button {
    width: 100%;
    justify-content: center;
  }
}
.tarifrechner-form .bottom-wrapper #container-button button {
  background-color: #78BB4B;
  border-radius: 50px;
  color: #fff;
  min-width: 230px;
  min-height: 58px;
}
.tarifrechner-form .bottom-wrapper #container-button button div {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  justify-content: center;
}
.tarifrechner-form .bottom-wrapper #container-button button div img {
  margin-left: 5px;
}

/*# sourceMappingURL=preisrechner.css.map */