/*
 * 
 */

/* Whitelabel CSS */

/*
 * Schriftart
 */

/* bold | normal */

@font-face {
	font-family: 'Open Sans';
	src: '../fonts/opensans-semibold-webfont.eot?#iefix';
	src:
        url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/opensans-semibold-webfont.woff') format('woff'),
        url('../fonts/opensans-semibold-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}



/*
 * Body
 * - Hintergrundfarbe
 */

body {
    background-color: #ffffff;
	font-family: Arial;
	color: #666;
}

/* Hintergrundbild auf Login-Seite */
body.background-login {
	background-image: url('../img/Hintergrund Netzportal.jpg');
}

/* Linkfarbe */

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

/* Label-Farbe: #666 */

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

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

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

/* TD-Farbe: #666 */

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

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

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

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

.header_logo .logo-image {
	background-image: url('../img/RZ_energienetze_logo_Unternehmenszusatz Textform orange grau.jpg'); /* Logo @1x */
	width: 340px; /* Logo Breite */
	height: 70px; /* Logo Höhe */
}

.back-to-top .border-bottom {
    border-bottom: 0 none;
}

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

.nav_main {
	background-color: #565656; /* Navigation Hintergrundfarbe Desktop */
	font-family: 'Open Sans', Arial;
}

.desktop .nav_main .level-1 > li:hover > a {
	color: #f39100; /* Navigation, Schriftfarbe, Hover-State */
	background-color: #565656;
}

.nav_main .level-1 > li > a {
	color: #fff; /* Navigation, Schriftfarbe */
	background-color: #565656; 
}

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

.nav_main .level-1 .level-2 {
	background-color: #fff; /* Sub-Navigation Hintergrundfarbe */
	color: #565656;
	border: 1px solid #565656;
	
}

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

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

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

.button {
	background: #f39100; /* Button Hintergrundfarbe */
	color: #fff; /* Button Schriftfarbe */
}

.button:hover {
    background-color: #ec6504;
}

.button.button-inverted {
    background-color: #f39100;
    border: 2px solid #f39100;
    color: #fff;
    padding: 11px 10px;
}

.button.button-inverted:hover {
    background-color: #ec6504;
    border: 2px solid #ec6504;
    color: #fff;
}

.button.button-secondary {
    background-color: #f39100;
    color: #ffffff;
}

.button.button-secondary:hover {
    background-color: #ec6504;
}

.styled-radio .radio-label {
    background-color: #f39100;
	border: 0;
	color: #fff;
}

.styled-radio .radio-label:hover {
	border: 0;
    background-color: #ec6504;
	color: #fff;
}

/*
 * Radio-Buttons Active State
 */

.styled-radio input[type=radio]:checked + label {
    background-color: #ec6504;
	border: 0;
	color: #fff;
}

.styled-radio input[type=radio]:checked + label:hover {
    background-color: #ec6504;
	border: 0;
	color: #fff;
}
/*
 * Widget_Button
 * - Schriftfarbe
 * - Hintergrundfarbe
 */

.widget_button.item-deactivated .button,
.widget_button.item-deactivated .styled-radio .radio-label,
.styled-radio .widget_button.item-deactivated .radio-label {
    background: #f39100;
    color: #fff;
}

.widget_button.item-deactivated .button:hover, .widget_button.item-deactivated .styled-radio .radio-label:hover, .styled-radio .widget_button.item-deactivated .radio-label:hover {
    background-color: #f39100;
    border: 2px solid #f39100;
    color: #fff;
}
  
 
/*
 * Eingabefelder
 * - Date-Input, Hintergrundfarbe
 * - Date-Input, Icon-Farbe
 */

fieldset.date-field .add-on {
	background-color: #0689cd; /* Date-Input, Hintergrundfarbe */
}

fieldset.date-field .add-on:before {
	color: #fff; /* Datei-Input Icon-Farbe */
}

.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: #0689cd;
}

/*
 * Headlines
 */

h1 {
	color: #666;
	font-family: 'Open Sans', Arial;
	font-size: 18px;
	line-height: 20px;
}

.widget_headline {
	font-family: 'Open Sans', Arial;
	color: #666;
}

h2 {
	font-family: 'Open Sans', Arial;
	font-size: 18px;
}

/*
 * Progressleiste (Vertragswechsel)
 */

.progress-item {
	background-color: #fff;
}

.progress-item span,
.progress-item:before {
	color: #565656;
}

.progress-item.selected {
	background-color: #565656;
}

.progress-item.selected span,
.progress-item.selected:before {
	color: #fff;
}

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

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

/* Farbe der Balken im Abschlags-Widget */
.widget_bars .bar.gas {
    background: #e8ac00;
}
.widget_bars .bar.strom {
    background: #afcb23;
}

@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: #565656; /* Navigation Hintergrundfarbe Tablet */
}

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

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

.nav_main .level-1 > li:hover > a {
	color: #fff;
}

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

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

.nav_main .level-1 .level-2 > li:hover a {
	color: #0083c5;
}

}

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

.header_logo .logo-image {
	background-image: url('../img/RZ_energienetze_logo_Unternehmenszusatz Textform orange grau.jpg'); /* Logo Retina @2x */
}

}

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

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

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

.nav_main .level-1 > li:hover > a {
	color: #fff;
}

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

.nav_main .level-1 .level-2 > li:hover a {
	color: #0083c5;
}

}