/* Fix for showing the smaller versions of big headers when viewed in mobile devices. Added by BEMA on 07.11.2019 */
@media (max-width: 767px) {
	.home-slider1-small {
		background-image: url('../img/home-slider1-small.webp') !important;
	}
}

@media (max-width: 767px) {
	.home-slider2-small {
		background-image: url('../img/home-slider2-small.jpg') !important;
	}
}

@media (max-width: 767px) {
	.home-slider3-small {
		background-image: url('../img/home-slider3-small.jpg') !important;
	}
}

@media (max-width: 767px) {
	.home-slider4-small {
		background-image: url('../img/home-slider4-small.webp') !important;
	}
}

@media (max-width: 767px) {
	.home-slider5-small {
		background-image: url('../img/home-slider5-small.jpg') !important;
	}
}

@media (max-width: 767px) {
	.home-stiftung-small {
		background-image: url('../img/home-teaser03-small.jpg') !important;
	}
}

@media (max-width: 767px) {
	.wasserkraft01-small {
		background-image: url('../img/wasserkraft01-small.jpg') !important;
	}
}

@media (max-width: 767px) {
	.co2-small {
		background-image: url('../img/co2-small.jpg') !important;
	}
}

/* Overrride zoom on hover function on big images. Scale value was originally 1.1 */
.bg-full-img:hover .img-wrapper{
	-webkit-transform:scale(1.025);
	transform:scale(1.025)
}

/* Overrride the background color of the odometer value from blue to green */
.odometer-value { background-color:#4C9E44 !important; }

@media (min-width: 1200px) {
	/* Overrride the height of the odometer box */
	.bg-split-img-vertical .img-holder { min-height:325px; }
	
	/* Adjust the top margin of the "Spendesumme bottom text" */
	.spendesumme-bottom-text { margin-top:-90px; }
}

/* Overrride paddings of the content section 
#content section {
	padding-top: 60px;
    padding-bottom: 40px;
}
*/

/* Override the mouse cursor for the main nav items */
.default-cursor { cursor:default !important; }

/* Override main nav menu properties */
.header .dropdown-multicol {z-index:1000;}

/* Override phone number color */
h5.phone a,
p a.phone { color:rgb(75, 75, 75) !important; }

p a.phone { border-bottom: none !important; }
p a.phone:hover { color: red; text-decoration: underline; !important; }

/* Override the active and inactive colors of the calculator tabs (Reiter) on the main page */
.calculator .nav-tabs>li>a.tab-power{ background-color:#6cb2cf }
.calculator .nav-tabs>li>a.tab-gas {background-color:#6cb2cf }
.calculator .nav-tabs>li>a.tab-heat-flow{ background-color:#6cb2cf }
.calculator .nav-tabs>li>a.active{ background-color:#1481ad;color:#fff }

/* Override character errors from new CSS files from SIGNALFEUER */
.slick-prev:before{content:"\64"}[dir="rtl"] .slick-prev:before{content:"\65"}
.slick-next:before{content:"\65"}[dir="rtl"] .slick-next:before{content:"\64"}
.slick-dots li button:before{position:absolute;top:0;left:0;content:"•";width:20px;height:20px;font-family:"gruenwelt";font-size:6px;line-height:20px;text-align:center;color:#000;opacity:.25;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li button:before{content:"•";width:10px;height:10px;font-size:28px;opacity:1;color:#fff;transition:all 0.3s cubic-bezier(0.29, 1.23, 0.46, 1)}
#counter-spenden.odometer .odometer-inside:after{content:"€";margin-left:4px;position:relative;color:dimgray}

/* Override dt font-weght from new CSS files from SIGNALFEUER */
dt { font-weight: 400 }

/* Service Nav Mods */
.rueckruf-link { font-family: "Salda Soft Bold",sans-serif !important; }
.mid-div-corr { margin-top:-24px !important; }
.mid-div-p { margin-bottom:9px !important; }
.rueckruf-p { margin-bottom:20px !important; }
.bestell-hotline-p  { margin-bottom:34px !important; }

/* Service Nav overrides */
.services .service-panel .panel-body {
    padding: 0px 20px 16px 20px;
}

/* Terifrechner subpage overrides 14.06.2022*/
@media (min-width: 768px) {
	.calculator.subpage {
		margin-top:-32px;
		height:455px; /*height:550px;*/
		margin-bottom:-100px;
	}
}
@media (min-width: 992px) {
	.col-lg-1{flex:0 0 13%;max-width:13%}	
}

/* KÜNDIGUNG */
/* Error handling. By BEMA on 23.06.2022 */
/* List error */
ul.icon.bullet.error li {
    color: #F03700;
}

ul.icon.bullet.error li:before {
    content: "\E013";
    color: #F03700;
    font-size: 16px !important;
    position: relative;
    top: 0px;
}

ul.error li{
	font-size: 18px !important;
	font-weight: 700 !important;
}

ul.icon.check.success li {
    color: #86A70C;
}

ul.icon.check.success li:before {
    content: "\E020";
    color: #86A70C;
    font-size: 16px !important;
    position: relative;
    top: 0px;
}

ul.success li{
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* FORM fields (INPUT, SELECT) error */
.form-control.error,
.custom-select.error {
    /*border-color: #F03700;*/
	border: 2px solid #F03700;
    padding-right: 20px;
}
.form-control.success,
.custom-select.success {
    border-color: #DDD9D9;
    padding-right: 20px;
}

/* Error icon for FORM fields (INPUT, SELECT) */
.icon-cross-sm:before {
	/* content: "\E013"; */
}
i.icon-cross-sm.error,
i.icon-correct-sm.success {
    position: absolute;
    height: 48px;
    width: 20px;   
    top: 0px;
    right: 5px;
    display: block;
    font-size: 11px !important;
    color: #F03700;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    padding-top: 15px;
    text-align: center;
}

div.tarif-details-modal { z-index: 3000 !important; }
div.tarif-details-border { border: 1px solid gray !important; }

/* Override character errors from new CSS files from SIGNALFEUER */
.slick-prev:before{content:"\64"}[dir="rtl"] .slick-prev:before{content:"\65"}
.slick-next:before{content:"\65"}[dir="rtl"] .slick-next:before{content:"\64"}
.slick-dots li button:before{position:absolute;top:0;left:0;content:"•";width:20px;height:20px;font-family:"gruenwelt";font-size:6px;line-height:20px;text-align:center;color:#000;opacity:.25;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li button:before{content:"•";width:10px;height:10px;font-size:28px;opacity:1;color:#fff;transition:all 0.3s cubic-bezier(0.29, 1.23, 0.46, 1)}
#counter-spenden.odometer .odometer-inside:after{content:"€";margin-left:4px;position:relative;color:dimgray}
#counter-spenden-2.odometer .odometer-inside:after{content:"";margin-left:4px;position:relative;color:dimgray}

/* Override dt font-weght from new CSS files from SIGNALFEUER */
dt { font-weight: 400 }

/* Overrides for the footnotes section */
.mt-7,.my-7 {margin-top: 1rem !important}
.footnote-left-margin {margin-left:-15px }

/* Override the font-family of dl.list-table */
dl.list-table dt{font-family:"Salda Soft Bold"}

/* Override phone number color */
h5.phone a,
p a.phone { color:rgb(75, 75, 75) !important; }

p a.phone { border-bottom: none !important; }
p a.phone:hover { color: red; text-decoration: underline; !important; }

/* Overrides for the primary "outline" button */
.btn-outline-primary2{color:#ffffff;border-color:#ffffff}.btn-outline-primary2:hover{color:#ffffff;background-color:#70b169;border-color:#ffffff}

p.registerBtn {font-family:'FFDINRoundWebProMedium';color:white !important;}

/* Override ERROR text properties */
ul.error li {
   font-size: 16px !important;
   font-weight: 700 !important;
}

/* Correct last ul li item bottom margin */
ul.icon.bullet.error li:last-child,
ul.icon.check.success li:last-child {
    margin-bottom:-15px !important;
} 

/* A fix to center the errormessages in some pages */
.errorDiv { margin: 15px 0 0 -30px; }
.errorDivLogin { margin-top: 15px; }

/* Cursor for disabled FORM elements */
input:disabled:hover, button:disabled:hover {
    cursor:not-allowed
}
  
/* FORM fields (INPUT, SELECT) error */
.custom-control-input.error {
    /*border-color: #F03700;*/
	border: 2px solid #F03700;
}

/* Datepicker */

.datepicker {
    border-bottom: 1px solid #DDD9D9;
    border-color: #DDD9D9;
    padding: 12px !important;
}

.datepicker-dropdown.datepicker-orient-top:before {
    border-top: 7px solid #DDD9D9 !important;
    
}

.datepicker-switch {
    font-family: "Salda Soft Bold", sans-serif;
    color: #4f4f4f;
    text-transform: uppercase;
}

.datepicker table thead tr {
    border-bottom: 1px solid #DDD9D9 !important;
    border-top: 1px solid #DDD9D9 !important;
}

.datepicker table thead>tr {
    border-bottom: 1px solid #DDD9D9 !important;
    border-top: 0px solid #DDD9D9 !important;
}

.datepicker table tr td {
    color: #4f4f4f !important;
}

.datepicker .cw {
    color: #89A502 !important;
}

.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background-color: #fff !important;
    background-image: none !important;
    color: #89A502;
    border-radius: 2px;
}

.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover,
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
    background-color: #EBEBDB !important;
    background-image: none !important;
    color: #4f4f4f;
    border-radius: 2px;
}

.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled],
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled],
.datepicker table tr td span.focused, .datepicker table tr td span:hover {
    background-color: #89A502 !important;
    background-image: none;
    color: #fff !important;
    border-radius: 2px;
}

.datepicker table tr td.today.active:hover {
    color: #fff;    
}

.datepicker table tr td.highlighted {
    background-color: #F9F9F4 !important;
}

.datepicker table tr td.new, .datepicker table tr td.old {
    color: #DDD9D9 !important;
}

.datepicker table tr td.disabled,.datepicker table tr td.disabled:hover{background:0 0;color:#CCCCCC !important;cursor:not-allowed !important}
.datepicker table tr td span.disabled,.datepicker table tr td span.disabled:hover{background:0 0;color:#CCCCCC !important;cursor:not-allowed !important}

/* Service Nav Mods */
.rueckruf-link { font-family: "Salda Soft Bold",sans-serif !important; }
.mid-div-corr { margin-top:-24px !important; }
.mid-div-p { margin-bottom:9px !important; }
.rueckruf-p { margin-bottom:20px !important; }
.bestell-hotline-p  { margin-bottom:34px !important; }

/* Service Nav overides */
.services .service-panel .panel-body {
    padding: 0px 20px 16px 20px;
}

/* Text Color for price notice */
.text-price-notice {
	color: #4C9E44 !important;
}

/* Text properties for the Strompreisbremse Modal Window */
.preisBremseTxt {
	font-weight:bold;
	font-size:18px;
}


/* Position the icons in the Strompreisbremse Text so that they will be level with the text */
.icon-Preisbremse { top:4px !important; }

/* Override the padding of the Strompreisbremse Text Box so that it won't look big */
.paddingPreisbremseBox { padding: 12px 10px 10px 10px !important; }

/* Overrides, Styles for Awards Bar */
@media (min-width: 768px) {
    .trust {
		padding-top:40px !important;
		padding-bottom: 40px !important;
		padding-left: 60px !important;
    }
    .trust-items img {
        margin-right: 65px;
        height: 110px;
    }
    .trust-items img:hover {
		-webkit-transform:scale(2.1);
		transform:scale(2.1);
		transition:all 0.15s ease;
		box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
		z-index:2
    }	
}

/* Overrides, Styles for Erparnis via Abschlag by BEMA on 14.03.2023 */

/* Automatically adjust the height of the Tarifrechner in the Einzeltarifseiten */
@media (min-width: 768px) {
    .calculator.subpage {
        height: auto;
        margin-bottom: -160px
    }
}
@media (min-width: 992px) {
    .calculator.subpage {
        height: auto;
        margin-bottom: -120px
    }
}
@media (min-width: 1200px) {
    .calculator.subpage {
        height: auto;
        margin-bottom: -130px
    }
}

.tuevSiegelMargin { margin-right:-5px !important; }

/* SVG graphics on the main page */
.svgImg { 
	height: 80px !important;	
	margin-bottom:20px;
}

/* Changes regarding the Tarifrechner in the Tarifdetailseite 
by BEMA on 21.11.2023. Last Update 21.11.2023 */

/* Fill the Tarifrechner bodywith color */
.bg-gradient-trsub {
    /*background-color: #CCCCCC !important;*/
	background-image: linear-gradient(90deg, #68ad51 0%, #7eba57 50%, #93c95e 100%)
}
.trsub-title { text-align: center; }

/* Jetzt berechnen Button */
.btn-tr-btn {
  color: #fff;
  background-color: #1877a4;
  border-color: #1877a4;
}
.btn-tr-btn:hover {
  color: #fff;
  background-color: #0093c4;
  border-color: #0093c4;
}

/* Power and Gas Slider */
#gas-slider,
#power-slider-2 {
    width: calc(100% - 92px);
    left: 48px
}
#gas-slider .noUi-marker-horizontal.noUi-marker,
#power-slider-2 .noUi-marker-horizontal.noUi-marker {
    top: 14px
}
#gas-slider .noUi-value,
#power-slider-2 .noUi-value {
    display: none
}
#gas-slider .decrease,
#gas-slider .increase,
#power-slider-2 .decrease,
#power-slider-2 .increase {
    width: 32px;
    height: 24px;
    display: block;
    position: absolute;
    top: -11px;
    cursor: pointer;
    transition: all .2s ease;
    z-index: 10 !important
}
#gas-slider .decrease,
#power-slider-2 .decrease {
    left: -47px
}
#gas-slider .increase,
#power-slider-2 .increase {
    right: -46px
}
#gas-slider .decrease:after,
#gas-slider .increase:after,
#power-slider-2 .decrease:after,
#power-slider-2 .increase:after {
    font-family: 'gruenwelt';
    color: #1877a4;
    font-size: 32px;
    text-align: center;
    transition: all .2s ease;
    position: relative;
    display: inline-block;
    width: 32px;
    height: 24px;
    vertical-align: middle;
    top: 0;
    font-weight: normal !important;
    border-radius: 4px
}
#gas-slider .decrease:after,
#gas-slider .increase:after,
#power-slider-2 .decrease:after,
#power-slider-2 .increase:after {
    display: block;
    position: relative;
    color: #fff;
    font-size: 28px;
    font-family: "Salda Soft Medium", sans-serif;
    top: 1px;
    width: 100%;
    text-align: center;
    line-height: 24px;
    background-color: #1877a4
}
#gas-slider .decrease:after,
#power-slider-2 .decrease:after {
    content: '-'
}
#gas-slider .increase:after,
#power-slider-2 .increase:after {
    content: '+'
}
#power-slider-2 {
    margin-bottom: 30px
}
/* Slider Circle */
.noUi-horizontal .noUi-handle {
    border: 2px solid #1877a4;
}
/* Slider Horizontal Line */
.noUi-connect {
  background: #1877a4;
}

/* WEB.DE/GMX Campaign modifications */
@media (max-width: 767px) {
	.webde-small {
		background-image: url('../img/webde/home-slider1-small.jpg') !important;
	}
}
@media (max-width: 767px) {
	.gmx-small {
		background-image: url('../img/gmx/home-slider1-small.jpg') !important;
	}
}
.bg-gradient-trsub-gas {
    /*background-color: #CCCCCC !important;*/
	background-image: linear-gradient(90deg, #38a75b 0%, #3da391 50%, #3da391 100%)
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.trsub-bottom { margin-bottom: 80px !important; }

.card-section-bottom { padding-bottom: 100px !important; }

/* Show arrow at the base of the headline box */
#headline_box:after {
	content:'';
	position: absolute;
	top: 100%;
	left: 18%;
	width: 0;
	height: 0;
	border-top: solid 50px #4c9e44;
	border-left: solid 50px transparent;
	border-right: solid 50px transparent;
}

/* Desktop only - Fix the position of Tarifrechner on the main page on top when scrolling */
@media all and (min-width: 768px) {
	.sticky { 
		position: sticky; 
		top:-10px;
		z-index: 100;	
	} 
}

/* Change the z-index of the Siegel on the Siegelleiste so that it won't be covered by the Tarifrechner on mouse rollover */
.trust-items img:hover {
	z-index: 10000;
}


/* Small Slider for Kunden werben Kunden */
@media (max-width: 767px) {
	.kwk-slider-small {
		background-image: url('../img/kwk-slider-small.webp') !important;
	}
}

/* Desktop only - Styles for the Abschlag box  */
@media all and (min-width: 1200px) {
	#abschlag-box { 
		border:1px solid #4C9E44;
		border-radius:5px;
		padding:0 5px 0px 5px; 

		color:white;
		background-color:#4C9E44;
	}
	
	.abschlag-bottom { margin-bottom:5px; }
	
	.label-spacer { display: inline; margin-right:35px; }
}

/* Ladestrom styles */
@media (max-width: 767px) {
	.ladestrom-header-small {
		background-image: url('../img/ladestrom-small.webp') !important;
	}
}

/* Small Slider for Harry Wijnvoord  */
@media (max-width: 767px) {
	.harry-slider3-small {
		background-image: url('../img/harry-slider3-small.webp') !important;
	}
}

/* Corporate Benefits Campaign modifications */
@media (max-width: 767px) {
	.corporate-benefits-small {
		background-image: url('../img/corporate-benefits/home-slider1-small.png') !important;
	}
}