.westfalenwind-widget { background-image: url("../img/windrad.png"); background-repeat: no-repeat; background-size: cover; }

@-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
#loadingAnimation { -webkit-animation: rotating 4s linear infinite; -moz-animation: rotating 4s linear infinite; -ms-animation: rotating 4s linear infinite; -o-animation: rotating 4s linear infinite; animation: rotating 4s linear infinite; }

.loader-container { width: 100%; text-align: center; }

/* autocomplete.js styles */
.autocomplete-suggestions { text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #F9F9F9; /* core styles should not be changed */ position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box; }

.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }

.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }

.autocomplete-suggestion.selected { background: #f0f0f0; }

#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: #E9E9E9; 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: #009EE2; }
#container-bar .bar { flex: 3 0 0%; height: 0px; position: relative; width: 100%; padding-bottom: 2.7%; background-color: #E9E9E9; 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: #009EE2; }
#container-bar .bar-right { flex: 1 0 0%; height: 0px; position: relative; width: 100%; padding-bottom: 2.7%; background-color: #E9E9E9; 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: #009EE2; }
#container-bar .bubble { height: 0; position: relative; width: 100%; flex: 1 0 0%; padding-bottom: 5%; background-color: #E9E9E9; 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: #009EE2; }
#container-bar .active { background-color: #009EE2; }

#container-yearly-consumption { display: flex; margin-top: 23px; }
#container-yearly-consumption input[type='text'] { width: 29%; border-radius: 0px; margin: 0px; text-align: center; }
#container-yearly-consumption .plus { background-color: #F9F9F9; height: 40px; padding: 0px 10px; line-height: 40px; cursor: pointer; }
#container-yearly-consumption .plus a { text-decoration: none; }
#container-yearly-consumption .plus:hover { background-color: #E9E9E9; }
#container-yearly-consumption .minus { background-color: #F9F9F9; height: 40px; padding: 0px 10px; line-height: 40px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; cursor: pointer; }
#container-yearly-consumption .minus a { text-decoration: none; }
#container-yearly-consumption .minus:hover { background-color: #E9E9E9; }
#container-yearly-consumption #consumption-label { height: 40px; line-height: 40px; margin: 0px; padding-left: 12px; padding-right: 7px; color: white; font-family: 'latolight'; background-color: #009EE2; }

#container-persons { display: flex; width: 72%; }
#container-persons .space-left { flex: 1 0 0%; }
#container-persons .person { flex: 1 0 0%; cursor: pointer; }
#container-persons .person #Fill-1, #container-persons .person #Fill-4 { fill: #CBDB83; }
#container-persons .person.active #Fill-1, #container-persons .person.active #Fill-4 { fill: white; }
#container-persons .space-right { flex: 1 0 0%; }
#container-persons .space { flex: 3 0 0%; }

#container-consumption { margin-top: 32px; }

div.tarifrechner-container { display: flex; flex-wrap: wrap; width: 100%; }
div.tarifrechner-container div.tarifrechner-header { flex: 1 0 0%; background-image: url(../img/tarifrechner-header.jpg); background-size: cover; background-position: center center; min-width: 400px; min-height: 300px; }
div.tarifrechner-container div.tarifrechner-header h2 { display: block; margin-top: 60px; padding: 0px; margin-block-start: 60px; margin-block-end: 8px; }
div.tarifrechner-container div.tarifrechner-header h2 span { background-color: white; color: #A1C517; font-family: "latoregular"; font-size: 24.5px; line-height: 39px; text-transform: uppercase; padding: 8px 21px; }
div.tarifrechner-container div.tarifrechner-header h3 { display: block; margin-top: 0px; margin-bottom: 0px; }
div.tarifrechner-container div.tarifrechner-header h3 span { background-color: #A1C517; color: white; font-family: "latoregular"; font-size: 20.5px; padding: 8px 21px; }
div.tarifrechner-container form.tarifrechner-form { flex: 1 0 0%; background-color: #A1C517; margin: 0px; padding-top: 30px; padding-left: 20px; padding-right: 20px; min-height: 470px; min-width: 400px; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container { display: flex; flex-direction: row; align-items: center; width: 100%; margin-bottom: 5px; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container div.legend { flex: 1 0 0%; color: white; font-family: 'latolight'; font-size: 14.5px; line-height: 22px; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container div.inputs { flex: 2.2 0 0%; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container div.inputs input[type='text'] { font-family: 'latoregular'; color: #9C9B9B; font-size: 17px; height: 40px; border: none; border-radius: 7px; background-color: #F9F9F9; padding-left: 11px; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container div.inputs select { font-family: 'latoregular'; color: #9C9B9B; font-size: 17px; height: 40px; border: none; border-radius: 7px; background-color: #F9F9F9; padding-left: 11px; -webkit-appearance: textfield; }
div.tarifrechner-container form.tarifrechner-form div.inputs-container div.inputs select[disabled] { background-color: #E9E9E9; color: #9C9B9B; }
div.tarifrechner-container div.tarifrechner-tariffsBox { background-image: url(../img/tarifrechner-header-rechts.jpg); background-size: cover; background-position: center center; flex: 1 0 0%; background-color: #F9F9F9; min-width: 400px; }

@media screen and (max-width: 1300px) { div.tarifrechner-container div.tarifrechner-header { min-width: 300px; }
  div.tarifrechner-container form.tarifrechner-form { min-width: 300px; }
  div.tarifrechner-container div.tarifrechner-tariffsBox { min-width: 300px; } }
div.tarifrechner-container form.tarifrechner-form input#zip { width: 44%; }
div.tarifrechner-container form.tarifrechner-form select#cityname { width: 100%; }
div.tarifrechner-container form.tarifrechner-form #container-city { margin-bottom: 14px; }
div.tarifrechner-container form.tarifrechner-form #container-streetaddress .inputs { display: flex; }
div.tarifrechner-container form.tarifrechner-form #street { min-width: 0px; flex: 1 0 0%; margin-right: 5px; width: 100%; }
div.tarifrechner-container form.tarifrechner-form #housenumber { min-width: 0px; flex: 0 0 50px; width: 100%; }
div.tarifrechner-container form.tarifrechner-form #container-consumption .legend span { display: block; margin: 6px 0px; padding-left: 5px; }
div.tarifrechner-container form.tarifrechner-form #getTariffsButton { display: flex; flex-wrap: nowrap; align-items: center; height: 48px; width: 64%; padding-left: 15px; padding-right: 15px; border: none; margin-top: 26px; border-radius: 7px; color: white; font-family: 'latoregular'; font-size: 17px; background-color: #009EE2; }
div.tarifrechner-container form.tarifrechner-form #getTariffsButton:disabled { background-color: #CBDB83; color: #F9F9F9; }
div.tarifrechner-container form.tarifrechner-form #getTariffsButton::before { content: ">"; margin-right: 5px; align-items: right; flex-grow: 2; }

.tarifinfo { display: flex; flex-wrap: nowrap; }
.tarifinfo .tarifrechner-priceinfo { flex: 1 0 0%; }
.tarifinfo .tarifrechner-description { flex: 2 0 0%; }

#tarifrechner-tariffs { width: 100%; }
#tarifrechner-tariffs .single-tariff { width: 100%; padding: 50px 20px; margin: 10px 0px; background-color: #F9F9F9; display: flex; }
#tarifrechner-tariffs .single-tariff .general-info { flex: 3 0 0%; display: flex; min-width: 250px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
#tarifrechner-tariffs .single-tariff .general-info .tariffname { display: flex; align-items: center; color: #A1C517; font-family: "latoregular"; font-size: 28px; }
#tarifrechner-tariffs .single-tariff .general-info .tariffname::before { content: url(../img/windrad-klein.png); margin-right: 5px; }
#tarifrechner-tariffs .single-tariff .general-info p { width: 100%; }
#tarifrechner-tariffs .single-tariff .lawtext { flex: 5 0 0%; min-width: 500px; padding-left: 50px; }

.tarifrechner-tariffsBox { padding: 50px 20px; }
.tarifrechner-tariffsBox .price-heading { font-family: "latoregular"; font-size: 22px; }
.tarifrechner-tariffsBox .ww-price { display: flex; align-items: center; color: #A1C517; font-family: "latoregular"; font-size: 28px; }
.tarifrechner-tariffsBox .ww-price .ww-graduation { font-family: "latoregular"; font-size: 16px; color: #9C9B9B; padding-left: 10px; }
.tarifrechner-tariffsBox .ww-price .ww-graduation.kwh-0 { display: none; }
.tarifrechner-tariffsBox .ww-price::before { content: url(../img/windrad-klein.png); margin-right: 5px; }

.order-tariff button { height: 40px; padding: 0px 20px; margin-top: 20px; background-color: #A1C517; color: white; font-family: "latoregular"; font-size: 22px; }

#orderform { width: 100%; background-color: #F9F9F9; padding: 20px; }
#orderform .row { display: flex; flex-wrap: wrap; width: 100%; }
#orderform .row .column { flex: 1 0 0%; padding-right: 10px; min-width: 230px; }
#orderform fieldset { display: block; }
#orderform p { margin-top: 0px; }

.navigation { display: flex; width: 100%; }
.navigation button { display: block; height: 40px; flex: 1 0 0%; background-color: #A1C517; border: none; border-radius: 0px; font-family: 'latoregular'; color: white; font-size: 22px; }

#validationError { width: 100%; color: red; padding: 20px; background-color: #F9F9F9; }

#orderform input { min-width: 66%; border: 1px solid #E9E9E9; border-radius: 7px; height: 40px; background-color: white; padding: 0px 11px; font-family: 'latoregular'; color: #9C9B9B; font-size: 17px; }
#orderform input:disabled { background-color: #FCFCFC; }
#orderform input[type='checkbox'], #orderform input[type='radio'] { height: auto; min-width: auto; }
#orderform select { min-width: 66%; max-width: 100%; display: block; height: 40px; border-radius: 7px; background-color: white; font-family: 'latoregular'; color: #9C9B9B; font-size: 17px; overflow: hidden; }
#orderform label + input { display: block; padding-left: 7px; }
#orderform input + label { display: inline-block; margin-top: 0px; padding-left: 7px; }
#orderform label { display: block; }
#orderform label.flex { display: flex; }
#orderform fieldset { border: 1px solid #E9E9E9; margin: 10px 0px; }
#orderform .housenumber-row { width: 70%; }

#acquisition_billingcity { -webkit-appearance: textfield; min-width: 66%; border: 1px solid #E9E9E9; border-radius: 7px; height: 40px; padding: 0px 11px; font-family: 'latoregular'; color: #9C9B9B; font-size: 17px; }

#orderformnavigation button { margin-right: 20px; }

#orderformnavigation button:last-of-type { margin-right: 0; }

#orderform .overview-container .overview-page-header { width: 100%; display: flex; justify-content: space-between; margin: 10px 0px; background-color: #E9E9E9; padding: 0px 5px; }

.jumplink a { cursor: pointer; }

/*# sourceMappingURL=tarifrechner-styles.css.map */