/*
Farben

Magenta			#e33073
Hellgrau		#dcdcdc
Dunkelgrau		#3d3d3d
Schrift			#3d3d3d
Eingabefelder inaktiv			#e3e3e3
Eingabefelder aktiv				#ffffff
Produkte Hintergrund Preise		#f3f3f3
Start Button inaktiv			#ededed

*/



/* Schriften */
@font-face {
	font-family: 				'Roboto';
	font-style: 				normal;
	font-weight: 				normal;
	src: 						url("../fonts/Roboto-Regular-webfont.woff");
}

@font-face {
	font-family: 				'Roboto Bold';
	font-style: 				normal;
	font-weight: 				normal;
	src: 						url("../fonts/Roboto-Bold-webfont.woff");
}

@font-face {
	font-family: 				'Roboto Light';
	font-style: 				normal;
	font-weight: 				normal;
	src: 						url("../fonts/Roboto-Light-webfont.woff");
}

@font-face {
	font-family: 				'Roboto Medium';
	font-style: 				normal;
	font-weight: 				normal;
	src: 						url("../fonts/Roboto-Medium-webfont.woff");
}

@font-face {
	font-family: 				'Roboto Thin';
	font-style: 				normal;
	font-weight: 				normal;
	src: 						url("../fonts/Roboto-Thin-webfont.woff");
}

@font-face {
	font-family: 				'Montserrat';
	src: 						url('../fonts/montserrat-light-webfont.woff') format('woff');
	font-weight: 				300;
}

@font-face {
	font-family: 				'Montserrat';
	src: 						url('../fonts/montserrat-regular-webfont.woff') format('woff');
	font-weight: 				400;
}

@font-face {
	font-family: 				'Montserrat';
	src: 						url('../fonts/montserrat-medium-webfont.woff') format('woff');
	font-weight: 				500;
}

@font-face {
	font-family: 				'Montserrat';
	src: 						url('../fonts/montserrat-bold-webfont.woff') format('woff');
	font-weight: 				600;
}



/* Allgemeines */
html, 
body,
#content_wrapper {
	background-color:			transparent;
	color:						#3d3d3d;
	font-family:				'Roboto';
	font-size:					14px;
}

.row {
	margin: 					0 auto;
	max-width: 					1100px;
}

#content_wrapper {
	border-bottom:				none;
	padding-bottom: 			100px;
}

form.double.active {
	margin-top: 25px;
}

.warning {
	border: 					2px solid #e33073 !important;
	outline: 					none;
	border-radius: 				5px;
}

ul.errors,
#calc_error, 
.error {
	border: 					2px solid #e33073 !important;
	background:					#f3f3f3;
	color:						#3d3d3d;
	border-radius:				5px;
}


button, 
.button,
#calculator .button,
#calculator .button:hover,
#calculator .button:focus,
button:hover, 
button:focus, 
.button:hover, 
.button:focus,
.productlist .accept_btn.button,
.productlist .accept_btn.button:hover,
.productlist .accept_btn.button:focus,
#back_wrapper .button,
#back_wrapper .button:hover,
#back_wrapper .button:focus,
.backward.button,
.backward.button:hover,
.backward.button:focus,
.forward.button,
.forward.button:hover,
.forward.button:focus,
.forward.complete.button,
.forward.complete.button:hover,
.forward.complete.button:focus,
input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"],
input[type="button"]:hover,
input[type="button"]:focus {
	background-color: 			#e33073;
	background-image:			none;
	border-radius:				5px;
	font-family: 				'Montserrat';
	font-weight: 				600;
	font-size:					16px;
	height: 					42px;
	padding: 					12px 17px;
	color:						#ffffff;
	box-shadow: 				none;
	border: 					none;
}

span.info_tip{
	color: 						#e33073;
}

form.double.active input[type="submit"],
form.double.active input[type="button"].htntCalBu {
	width:						100%;
	margin:						15px 0;
}

a#back_website {
	margin-top:					25px;
}

.ui-widget-content.ui-tooltip {
	background-color:			#fff;
	font-size:					12px;
	color:						inherit;
}


/* Breadcrumb */
#breadcrumb {
	margin-bottom: 				47px;
}

#breadcrumb > span {
	display: 					inline-block;
}

#breadcrumb > span.active {
	color: 						#999;
	text-decoration: 			underline;
}

#breadcrumb > div {
	background-image: 			none;
	color: 						#999;
	height: 					13px;
	margin: 					5px 10px 0;
	width: 						7px;
	display: 					inline-block;
	background-repeat: 			no-repeat;
}

#breadcrumb > #top_site a {
    background-image: 			url("../elements/breadcrumb_home.png");
    background-repeat: 			no-repeat;
    display: 					block;
    height: 					13px;
    width: 						16px;
}






/* Schriftstile */
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	color:						#3d3d3d;
	font-family:				'Roboto Medium';
}

h1 {
	border-bottom: 				1px solid #dcdcdc;
	font-size: 					29px;
	font-family: 				'Roboto Medium';
	padding: 					0 0 28px 0;	
	margin:						0;
}

h2 {
	color:						#3d3d3d;
	border:						none;
	font-family:				'Roboto Medium';
	letter-spacing: 			0;
}

h4 {
	font-size: 					18px;
}

#form-calculator h1 {
	font-family:				'Montserrat', sans-serif;
	font-size:					26.6667px;
	font-weight:				700;
	padding-top:				17px;
}

#form-calculator h2 {
	font-size:					16px;
	padding-top:				15px;
	padding-bottom:				10px;
	margin: 					0;
}

p, 
p.legend,
a,
label,
span,
#calc_error a {
	color:						#3d3d3d;
}

a:hover, 
#calc_error a:hover, 
#calc_error a:focus {
	text-decoration: 			none;
	color: 						#e33073;
}



/* Radiobutton */
.radio_list,
.checkbox-list {
	display: 					block;
	position: 					relative;
	padding-left: 				5px;
	margin-bottom: 				4px;
	cursor: 					pointer;
	-webkit-user-select: 		none;
	-moz-user-select: 			none;
	-ms-user-select: 			none;
	user-select: 				none;
	font-size:					14px;
}

.radio_list input,
.checkbox-list input {
	position: 					absolute;
	opacity: 					0;
	cursor: 					pointer;
}

.check {
	position: 					absolute;
	top: 						0;
	right: 						50%;
	height: 					16px;
	width: 						16px;
	background-color: 			#ffffff;
	border:						1px solid #ffffff;
	border-radius: 				50%;
}

.checkbox-list .check {
	position: 					absolute;
	top: 						0;
	right: 						97% !important;
	height: 					16px;
	width: 						16px;
	background-color: 			#ffffff;
	border:						1px solid #ffffff;
	border-radius: 				0;
}

.checkbox-list#use_bank .check {
	right: 						92% !important;
}

.radio_list input:checked ~ .check,
.checkbox-list input:checked ~ .check {
	background-color: 			#ffffff;
}

.check:after {
	content: 					"";
	position: 					absolute;
	display: 					none;
}

.radio_list input:checked ~ .check:after,
.checkbox-list input:checked ~ .check:after {
	display: 					block;
}

.radio_list .check:after {
 	top: 						3px;
	left: 						3px;
	width: 						8px;
	height: 					8px;
	border-radius: 				50%;
	background: 				#3d3d3d;
}

.checkbox-list .check:after {
 	top: 						3px;
	left: 						3px;
	width: 						8px;
	height: 					8px;
	border-radius: 				0;
	background: 				#3d3d3d;
}


/* Eingabefelder */
input[type="text"], 
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"], 
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="time"], 
input[type="url"], 
input[type="color"], 
textarea,
select {
	background:					#ffffff;
	border-radius:				5px;
	border:						1px solid #ffffff;
	font-size: 					17px;
	height: 					34px;
	padding: 					2px 25px;
	color:						#3d3d3d;
}

select {
	background-image:			url("../elements/arrow_select.png");
	background-repeat:			no-repeat;
	background-position: 		calc(100% - 7px) center;
}

select:hover,
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="date"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="month"]:focus, 
input[type="week"]:focus, 
input[type="email"]:focus, 
input[type="number"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="time"]:focus, 
input[type="url"]:focus, 
input[type="color"]:focus, 
textarea:focus {
	border: 					1px solid #e33073;
}

input[type="text"][disabled], 
input[type="text"][readonly], 
fieldset[disabled] input[type="text"], 
input[type="password"][disabled], 
input[type="password"][readonly], 
fieldset[disabled] input[type="password"], 
input[type="date"][disabled], 
input[type="date"][readonly], 
fieldset[disabled] input[type="date"], 
input[type="datetime"][disabled], 
input[type="datetime"][readonly], 
fieldset[disabled] input[type="datetime"], 
input[type="datetime-local"][disabled], 
input[type="datetime-local"][readonly], 
fieldset[disabled] input[type="datetime-local"], 
input[type="month"][disabled], 
input[type="month"][readonly], 
fieldset[disabled] input[type="month"], 
input[type="week"][disabled], 
input[type="week"][readonly], 
fieldset[disabled] input[type="week"], 
input[type="email"][disabled], 
input[type="email"][readonly], 
fieldset[disabled] input[type="email"], 
input[type="number"][disabled], 
input[type="number"][readonly], 
fieldset[disabled] input[type="number"], 
input[type="search"][disabled], 
input[type="search"][readonly], 
fieldset[disabled] input[type="search"], 
input[type="tel"][disabled], 
input[type="tel"][readonly], 
fieldset[disabled] input[type="tel"], 
input[type="time"][disabled], 
input[type="time"][readonly], 
fieldset[disabled] input[type="time"], 
input[type="url"][disabled], 
input[type="url"][readonly], 
fieldset[disabled] input[type="url"], 
input[type="color"][disabled], 
input[type="color"][readonly], 
fieldset[disabled] input[type="color"], 
textarea[disabled], 
textarea[readonly], 
fieldset[disabled] textarea {
	background-color: 			#e3e3e3;
	border-color:				#e3e3e3;
}




/* Calculator Plugin */

#calculator {
	background: 				transparent;
	color:						#3d3d3d;
	margin-top:					0;
	padding:					0;
}

div#select_energytype {
	float:						left;
	padding-right:				0;
}

#form-calculator {
	background:					#dcdcdc;
	border-radius:				5px;
	float:						left;
	padding:					0 15px;
	/*height:						395px;
	max-height:					395px;*/
	height: 					480px;
	max-height: 				480px;
}

#calculator .labeled {
	color:						#3d3d3d;
}

#calculator_wrapper {
	padding-left:				0;
	padding-right:				0;
	height:						395px;
}

#calculator .labeled.columns.no-padding,
.no-padding {
	padding:					0;
}

#input_calculator.columns {
	float:						left;
}

#map_region_product_et {
	padding-left:				5%;
}

#map_region_product_et label.E.active, 
#map_region_product_et label.G.active, 
#map_region_product_et label.E.active::before, 
#map_region_product_et label.G.active::before,
#map_region_product_et label span {
	color: 						transparent;
}

#map_region_product_et label {
	background-color:			#ededed;
	border-radius:				5px 0 0 5px;
	height:						45px;
	color:						transparent;
}

#map_region_product_et label.E {
	border-right:				3px solid #dcdcdc;
	margin-right:				-3px;
}

#map_region_product_et input[type="radio"] {
    display: 					none;
}

#map_region_product_et label.E {
	background:					#ededed url("../elements/strom-new.png") no-repeat center center;
	margin-bottom:				15px;
}

#map_region_product_et label.G {
	background:					#ededed url("../elements/gas-new.png") no-repeat center center;
}

#map_region_product_et label.active {
	background-color:			#dcdcdc;
}

#calculator #input_calculator span.labeled {
	padding-left:				0;
}

#calculator input[type="checkbox"],
#input_calculator input[type="checkbox"] {
	float:						left;
	margin:						13px 0 0;
}

#calculator #label_choose_eco,
#input_calculator #label_choose_eco {
	float:						right;
	margin:						10px 0 0;
	width:						calc(100% - 20px);
}


/* Slider */

#skala,
#slider_wrapper {
	margin-bottom:				15px;	
}

.ui-corner-all, 
.ui-corner-bottom, 
.ui-corner-right, 
.ui-corner-br {
	border-radius:				5px;
}

.ui-widget-header {
	background:					#ffffff;
}

.step.strom,
.step.strom label {
	color:						transparent;
}

.step.gas {
	background-image: 			none !important;
	background-color:			transparent;
	height: 					38px;
	width: 						calc((100% - 67px) / 4) !important;
	padding-right:				0;
}

#Step5.step.gas {
	width: 						49px !important;
}

.step.gas label {
	background-image: 			none !important;
	border-radius:				100%;
	border:						3px solid #ffffff;
	background-color:			#ffffff;
	color:						#3d3d3d;
	width: 						38px !important;
	height: 					38px;
	min-width: 					38px !important;
	font-family: 				'Roboto Bold';
	font-size:					15px;
	text-align: 				center;
	padding-top: 				5px;
	padding-right: 				0;
}

#Step5.gas {
	margin-right:				0;
}

.ui-slider .ui-slider-handle {
	width:						27px;
}

#slider_wrapper .ui-state-default, 
#slider_wrapper .ui-widget-content .ui-state-default, 
#slider_wrapper .ui-widget-header .ui-state-default {
	background: 				url(../elements/slider/handle.png) center bottom no-repeat;
	border:						none !important;
}

#slider-range.ui-widget-content .ui-state-default {
	background: 				url(../elements/slider/handle.png) center bottom no-repeat;
	border:						none;
}

#slider-range.ui-widget-content .ui-state-default:focus, #slider-range.ui-widget-content .ui-state-default:hover,
#slider-range.ui-widget-content .ui-state-default.ui-state-active.ui-state-focus {
	border: 					none !important;
	background-color:			transparent;
}


/* Calender */
.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
	border-color:				#e33073;
}

a.ui-state-default.ui-state-hover {
	background-color:			#e33073;
}


/* Productlist */
.productlist #calculator_wrapper,
.customerdata #calculator_wrapper {
	background-color:			#dcdcdc;
	padding:					20px;
	height:						auto;
}

.customerdata #calculator_wrapper h2,
.productlist #calculator_wrapper h2 {
	padding:					0;
	margin:						0;
	font-size:					18px;
}

.productlist #calculator_wrapper #calculator,
.customerdata #calculator_wrapper #calculator {
	padding:					0;
}

.productlist #calculator_wrapper #calculator > .columns,
.customerdata #calculator_wrapper #calculator > .columns,
.customerdata #calculator_wrapper #calculator > .labeled,
.productlist #calculator_wrapper #calculator > .labeled {
	padding:					0;
}

.productlist #calculator_wrapper #calculator .columns.zip {
	/*padding-right:				10px;*/
}

.productlist #calculator_wrapper #calculator input[type="text"],
.productlist #calculator_wrapper #calculator select {
	padding: 					2px 5px;
}

.productlist #face_value {
	float:						left;
	width:						calc(100% - 30px);
}

.productlist .kw {
	float:						right;
	line-height:				34px;
	text-align:					right;
	width:						30px;
}

input[name="calc_face_value"] {
	margin-bottom:				25px;
}

.productlist #content_productlist,
.customerdata .customer_data {
	padding-left:				50px;
}

.productlist #content_productlist h2,
.customerdata .customer_data h2 {
	font-size: 					29px;
	font-family: 				'Roboto Medium';
}

.products_headline_eco {
	color:						#e33073;
	font-size:					20px;
	font-family:				'Roboto Medium';
	margin-bottom:				25px;
}

.productlist #content_productlist .product {
	margin:						0;
	border-bottom:				1px solid #dcdcdc;
}

.productlist #content_productlist .product .columns {
	padding:					0;
}

.productlist div.product_name {
	font-size:					22px;
	font-family:				'Roboto';
}

.productlist div.prices > div > div,
.productlist div.prices > div.price > div {
	border:						none;
	background-color:			#f3f3f3;
	color:						#3d3d3d;
}

.productlist div.prices > div {
    padding: 					5px 5px 0 5px;
}

.productlist div.prices > div.price > div {
	padding:					11px 15px;
}

.productlist div.prices > div > label,
.productlist div.product .provider {
	font-family:				'Roboto Medium';
}

.productlist div.product .provider {
	color:						#3d3d3d;
}

.productlist .accept_btn.button,
#back_wrapper .button {
	background-image: 			none;
	margin-bottom: 				0;
}

.productlist div.details_button::before {
	color: 						#e33073;
	font-weight:				normal;
	margin-left: 				-20px;
}

.productlist div.details_button.show::before {
	color: 						#e33073;
	margin-left: 				-20px;
}

.productlist div.prop span.prop {
	font-weight:				500;
}

.productlist #content_productlist .product .columns.details_button {
	padding-left:				20px;
}

.productlist .info {
	cursor:						pointer;
}

.productlist .info_popup {
	background-color:			#fff;
	background-image:			url("../elements/delete.png");
	background-position:		98% 5px;
	background-repeat:			no-repeat;
	border:						1px solid #3d3d3d;
	cursor:						pointer;
	display:					none;
	max-width:					300px;
	padding:					10px 20px 10px 15px;
	position:					absolute;
}


/* Customerdata */
#calc_changedata table td {
	color: 						#3d3d3d;
}

#calc_changedata table td.first {
	font-weight:				500;
	padding-right: 				10px;
}

div.bubbles {
	position: 					absolute;
	border:						none;
	top: 						-80px;
	right:						0;
}

div.bubbles > div {
	width:						50px;
	margin-right: 				0px;
}

div.bubbles .active div.bubble {
	background: 				#e33073 none repeat scroll 0 0;
}

div.bubbles div.bubble {
	font-family: 				'Roboto Bold';
	font-size: 					25px;
	height: 					40px;
	line-height: 				40px;
	width: 						40px;
}

div.step div.white_wrapper {
	background-color:			#f3f3f3;
	padding:					20px;
	margin-bottom:				25px;
}

div.step div.white_wrapper .check {
	right:						90%;
}

div.step div.white_wrapper .radio_list.spacerLabel {
	margin-bottom:				25px;
}

.white_wrapper > .columns.data_input label.checkbText1 {
	margin-left:				0;
}

.white_wrapper > .columns.data_input label.radio_list.checkbText1 .check {
	right: 						97%;
}

div.step h2 {
	padding-top:				0;
	font-size:					24px !important;
}

div.inputInfo {
	margin-bottom:				5px;
}

input._zusatzL {
	margin-left: 				0;
	width: 						100%;
}

div.controlInfo {
	background-color:			#e3e3e3;
	border-radius:				5px;
	padding:					7px 25px;
	font-size: 					17px;
	height: 					34px;
}

.step3 .inputSpacer {
	min-width:					33%;
}

.step4 .data_input .columns.controlInfo_right {
	padding-left:				10px;
}

input.name.last_provider {
	padding: 					2px 15px;
}

.step4 .title {
	padding:					23px 10px;
}

.agbetc .data_input > div {
	padding:					0 10px 20px;
}

.step4 h5 {
	border:						none;
	font-family:				Roboto Medium;
	font-size:					16px;
	font-weight:				400;
	margin:						0 0 10px;
}

.white_wrapper > .columns.data_input input[type="checkbox"] {
	float:						left;
}

.white_wrapper > .columns.data_input label.checkbText1 {
	display:					block;
	float:						right;
	margin:						0;
	width:						calc(100% - 30px);
}

.step4 .dropdown::before {
	color:						#e33073;
	content:					"+";
	font-size:					24px;
	font-weight:				normal;
	margin:						-2px 5px 0 -30px;
	position:					absolute;
	text-decoration:			none;
}

.step4 .dropdown.open::before {
	content:					"-";
}

.step4 .dropdown {
	cursor:						pointer;
	font-family:				Roboto Medium;
	padding-left:				30px;
}

.step4 .detail_wrapper{
	color:						#7f7f7f;
	display:					none;
}

.step4 .detail_wrapper p {
	color:						#7f7f7f;
}


/* Complete */
p.goodbye_text {
	margin-top:					25px;
}