/*
 * evd CSS
 */

/* Whitelabel CSS */

/*
 * Schriftart
 */

/* normal | normal */

@font-face {
	font-family: 'HelveticaNeue';
	src: '../fonts/HelveticaNeueETW01-55Rg.eot';
	src:
        url('../fonts/HelveticaNeueETW01-55Rg.eot') format('embedded-opentype'),
        url('../fonts/HelveticaNeueETW01-55Rg.svg') format('svg'),
        url('../fonts/HelveticaNeueETW01-55Rg.woff2') format('woff2'),
        url('../fonts/HelveticaNeueETW01-55Rg.woff') format('woff'),
        url('../fonts/HelveticaNeueETW01-55Rg.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* normal | italic */

@font-face {
	font-family: 'HelveticaNeue';
	src: '../fonts/HelveticaNeueETW01-45Lt.eot';
	src:
        url('../fonts/HelveticaNeueETW01-45Lt.eot') format('embedded-opentype'),
        url('../fonts/HelveticaNeueETW01-45Lt.svg') format('svg'),
        url('../fonts/HelveticaNeueETW01-45Lt.woff2') format('woff2'),
        url('../fonts/HelveticaNeueETW01-45Lt.woff') format('woff'),
        url('../fonts/HelveticaNeueETW01-45Lt.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

/* bold | normal */

@font-face {
	font-family: 'HelveticaNeue';
	src: '../fonts/HelveticaNeueETW01-75Bd.eot';
	src:
        url('../fonts/HelveticaNeueETW01-75Bd.eot') format('embedded-opentype'),
        url('../fonts/HelveticaNeueETW01-75Bd.svg') format('svg'),
        url('../fonts/HelveticaNeueETW01-75Bd.woff2') format('woff2'),
        url('../fonts/HelveticaNeueETW01-75Bd.woff') format('woff'),
        url('../fonts/HelveticaNeueETW01-75Bd.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

/* bold | italic */

@font-face {
	font-family: 'HelveticaNeue';
	src: '../fonts/HelveticaNeueETW01-65Md.eot';
	src:
        url('../fonts/HelveticaNeueETW01-65Md.eot') format('embedded-opentype'),
        url('../fonts/HelveticaNeueETW01-65Md.svg') format('svg'),
        url('../fonts/HelveticaNeueETW01-65Md.woff2') format('woff2'),
        url('../fonts/HelveticaNeueETW01-65Md.woff') format('woff'),
        url('../fonts/HelveticaNeueETW01-65Md.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}
/*
 * Body
 * - Hintergrundfarbe
 */

body {
    background-color: #fbfbfb;
	font-family: 'HelveticaNeue';
	color: #000;
	text-transform: none;
}

/* Hintergrundbild auf Login-Seite */
body.background-login {
	background-image: url('../img/PassatStromSeite_Titelbild_V1b.jpg');
	background-size: 100% auto;
}

/* Hintergrundbild auf Login-Seite */
body.background-logout {
	background-image: url('../img/PassatStromSeite_Titelbild_V1b.jpg');
	background-size: 100% auto;
}

/* Schriftfarbe Login-Test */
span.login {
    color: #000000;
	text-transform: none;	
}

/* Linkfarbe */

a,
a.underlined,
.nav_secondary .nav-item a,
.widget.widget-radio .widget_extra .widget-extra-item,
.new-registration .register-cta,
.password-forgotten {
	color: #000000;
}

/* Label-Farbe: #666 */

.checker-label,
.form label {
	color: #000;
}

/* Table-Head-Farbe: #666 */

.table-verbrauch .table-head td,
.table-status .table-head td,
.table-wrapper .table-head td {
	color: #000000;
}

/* TD-Farbe: #666 */

.table-verbrauch td,
.table-status td,
.table-wrapper td {
	color: #000000;
}

/*
 * Header-Linie
 * - Linienhöhe: 5px
 * - Linienfarbe: #fff
 */

.header {
	border-top: #ffffff 5px solid;
}

/*
 * Logo
 * - Breite
 * - Höhe
 * - Bild (@1x, @2x)
 */

.header_logo .logo-image {
	background-image: url('../img/PassatEnergie_Logo_170x60.png'); /* Logo @1x */
	width: 340px; /* Logo Breite */
	height: 60px; /* Logo Höhe */
}


/*	Linie auf der Startseite ausblenden */
.back-to-top .border-bottom {
    border-bottom: 0 none;
}

/*
 * Navigation
 * - Hintergrundfarbe
 * - Trenner
 * - Logout-Eintrag (< Desktop)
 * - Sub-Navigation Hintergrundfarbe
 */

.nav_main {
	background-color: #f58220 /* Navigation Hintergrundfarbe Desktop */
	font-family: 'HelveticaNeue';
	color: #fbfbfb;
       text-transform: none; 
}

.desktop .nav_main .level-1 > li:hover > a {
	color: #fbfbfb; /* Navigation, Schriftfarbe, Hover-State */
	background-color: #f58220;
	border-bottom:3px solid #fbfbfb;
}

.nav_main .level-1 > li > a {
	color: #fbfbfb; /* Navigation, Schriftfarbe #005ca1 */
	background-color: #f58220;
}

.nav_main .level-1 {
	border-top: 1px solid #fbfbfb; /* Border der Navigation: #01bae7 */
	color: #fbfbfb;
	background-color: #f58220;	
}

0.nav_main .level-1 li.item-deactivated > a {
	color: #9e9e9e !important;
}

.nav_main .level-1 li.item-deactivated:hover > a {
	color: #b8b8b8 !important;
}
 


.nav_main .level-1 .level-2 {
	background-color: #fbfbfb; /* Sub-Navigation Hintergrundfarbe */
	color: #a2a2a2;
}

.nav_main .level-1 .level-2 > li a {
	color: #a2a2a2; /* Sub-Navigation, Schriftfarbe */
	background-color: #fbfbfb;
}

.nav_main .level-1 .level-2 > li:hover a {
	color: #fbfbfb;
	background-color: #f58220;
}
 

/*
 * Buttons
 * - Schriftfarbe
 * - Hintergrundfarbe
 */

.button {
	background: #f58220; /* Button Hintergrundfarbe */
	color: #fbfbfb; /* Button Schriftfarbe */
	font-family: 'HelveticaNeue';
	border-radius: 0px; 
}

.button:hover {
    background-color: #f58220;
    font-family: 'HelveticaNeue';
    border-radius: 0px; 
    color: #fbfbfb;
}


.button.button-inverted {
    background-color: #58220;
    font-family: 'HelveticaNeue';	
    color: #fbfbfb;
    padding: 11px 10px;
    border-radius: 0px; 
}

.button.button-inverted:hover {
    font-family: 'HelveticaNeue';
    background-color: #fbfbfb;
    border: 2px solid #f58220;
    color: #f58220;
    border-radius: 0px; 
}


.button.button-secondary {
    background-color: #f58220;
    font-family: 'HelveticaNeue';
    color: #fbfbfb;
    border-radius: 0px; 
}

.button.button-secondary:hover {
    background-color: #fbfbfb;
    border: 2px solid #f58220;
    font-family: 'HelveticaNeue';
    color: #f58220;
    border-radius: 0px; 
}

.styled-radio .radio-label {
    background-color: #f58220;
    font-family: 'HelveticaNeue';
    color: #fbfbfb;
}

.styled-radio .radio-label:hover {
    background-color: #fbfbfb;
    border: 2px solid #f58220;
    font-family: 'HelveticaNeue';
    color: #f58220;
}
 
 /* Farbe der Balken im Abschlags-Widget */
.widget_bars .bar.gas {
    background: #f58220;
}
.widget_bars .bar.strom {
    background: #f58220;
}

/*
 * Radio-Buttons Active State
 */

.styled-radio input[type=radio]:checked + label {
    background-color: #f58220;
    font-family: 'HelveticaNeue';
    color: #fbfbfb;
}

.styled-radio input[type=radio]:checked + label:hover {
    background-color: #fbfbfb;
    border: 2px solid #f58220;
    font-family: 'HelveticaNeue';
    color: #f58220;
}

.widget_button.item-deactivated .button,
.widget_button.item-deactivated .styled-radio .radio-label,
.styled-radio .widget_button.item-deactivated .radio-label {
    background-color: #fff;
    border: 2px solid #ffffff;
    border-radius: 0px; 	
    font-family: 'HelveticaNeue'; 
    color: #9e9e9e;   
}


/*
 * Eingabefelder
 * - Date-Input, Hintergrundfarbe
 * - Date-Input, Icon-Farbe
 */

fieldset.date-field .add-on {
	background-color: #f58220 /* Date-Input, Hintergrundfarbe */
       font-family: 'HelveticaNeue';
}

fieldset.date-field .add-on:before {
	color: #fbfbfb; /* Datei-Input Icon-Farbe */
       font-family: 'HelveticaNeue';
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
	background-color: #ffb500;
}

/*
 * Headlines
 */

h1 {
	color: #f58220
       font-family: 'HelveticaNeue';
	font-size: 18px;
	line-height: 20px;
}

.widget_headline {
	color: #f58220;
       font-family: 'HelveticaNeue';
}

h2 {
	color: #f58220;
       font-family: 'HelveticaNeue';
	font-size: 18px;
}

/*
 * Progressleiste (Vertragswechsel)
 */

.progress-item {
	background-color: #f58220;
       font-family: 'HelveticaNeue';
}

.progress-item span,
.progress-item:before {
	color: #000000;
       font-family: 'HelveticaNeue';
}

.progress-item.selected {
	background-color: #f58220;
	color: #ffffff;
       font-family: 'HelveticaNeue';  
}

.progress-item.selected span,
.progress-item.selected:before {
	color: #fff;
       font-family: 'HelveticaNeue';
}

.progress-item.last:after {
	background-image: url(../img/img-progress-after.png);
}

.progress-item.done span, .progress-item.done, .progress-item.done::before {
    color: #ffffff;
    background: #f58220;
}

.info-toggle,
.question-toggle { /* Hintergrundfarbe */
	background-color: #f58220;
}

.nav-trigger {
	color: #fff; /* Schriftfarbe */
       font-family: 'HelveticaNeue';
}


@media all and (min-width: 481px) and (max-width: 768px) {

body {
	background-color: #fff; /* Hintergrundfarbe Tablet */
}

}

@media all and (max-width: 1060px) {

.nav_main,
.nav_main .level-1 {
	background-color: #f58220; /* Navigation Hintergrundfarbe Tablet */
}

.nav_main .level-1 > li {
	border-bottom: 1px solid #f58220; /* Navigation Trenner-Farbe */
}

.nav_main .level-1 > li.sublist.sublist-login {
	background-color: #f58220; /* Navigation Logout-Farbe */
}

.nav_main .level-1 > li:hover > a {
	color: #ffb500;
	background-color: #ffffff;
}

.nav_main .level-1 > li > a {
	color: #ffffff; /* Navigation, Schriftfarbe (< Desktop) */
}

.nav_main .level-1 .level-2 > li a {
	color: #ffffff;
}

.nav_main .level-1 .level-2 > li:hover a {
	color: #ffb500;
	background-color: #ffffff;
}

}

@media all and (max-width: 768px) {

.header_logo .logo-image {
	background-image: url('../img/PassatEnergie_Logo_340x120.png'); /* Logo Retina @2x */
}

}

@media all and (max-width: 480px) {

body {
	background-color: #fff; /* Hintergrundfarbe Mobile */
}

.nav_main,
.nav_main .level-1 {
	background-color: #f58220; /* Navigation Hintergrundfarbe Mobile */
}

.nav_main .level-1 > li:hover > a {
	color: #f58220;
	background-color: #ffffff;
}

.nav_main .level-1 .level-2 > li a {
	color: #ffffff;
}

.nav_main .level-1 .level-2 > li:hover a {
	color: #ffb500;
	background-color: #ffffff;
}

}