/*
 * CSS
 */

/* Whitelabel CSS */

/*
 * Schriftart
 */

/* normal | normal */


/*
 * Body
 * - Hintergrundfarbe
 */

body {
    background-color: #ffe500;
	font-family: Arial;
	color: #004BAD;
}

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

article.infobox section h2 a{
	background-color: #FEEAB2;
	color: #000000;
}


/*Linie auf der Startseite ausblenden */
.back-to-top .border-bottom {
    border-bottom: 0 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: #004BAD;
}

/* Label-Farbe: #666 */

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

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

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

/* TD-Farbe: #666 */

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

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

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

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

.header_logo .logo-image {
	background-image: url('../img/MAINGAU-Dachmarke-V1-CMYK-Blau-Gelb.jpg'); /* Logo @1x */
	width: 170px; /* Logo Breite */
	height: 55px; /* Logo H�he */
}

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

.nav_main {
    background-color: #FEEAB2; /* Navigation Hintergrundfarbe Desktop */
   	text-transform: none;
	color: #004BAD;    /* #FBBB00;  */
}

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

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

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

.nav_main .level-1 .level-2 {
	background-color: #FEEAB2; /* Sub-Navigation Hintergrundfarbe */
	color: #004BAD;
	border: 1px solid #A4C333;	
}

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

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

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

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

.button {
	background-color: #CCD7EA; /* Button Hintergrundfarbe */
	color: #004BAD;
	border: 2px solid #004BAD;	
}

.button:hover {
    background-color: #CCD7EA;
	color: #004BAD;
}

.button.button-inverted {
    background-color: #CCD7EA;
    color: #004BAD;
	border: 2px solid #004BAD;	
    padding: 11px 10px;
}

.button.button-inverted:hover {
    background-color: #CCD7EA;
    color: #004BAD;
	border: 2px solid #004BAD;	
}

.button.button-secondary {
    background-color: #CCD7EA;
    color: #004BAD;
}

.button.button-secondary:hover {
    background-color: #CCD7EA;
    color: #004BAD;
}

.styled-radio .radio-label {
    background-color: #CCD7EA;
	border: 0;
	color: #004BAD;
}

.styled-radio .radio-label:hover {
	border: 0;
    background-color: #CCD7EA;
	color:#004BAD;
}

/*
 * Radio-Buttons Active State
 */

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

.styled-radio input[type=radio]:checked + label:hover {
    background-color: #CCD7EA;
	border: 0;
	color: #004BAD;
}


/* Im Service Verbrauchst�bersicht die Balkenfarbe �ndern */
.table-verbrauch .anzeige-verbrauch {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #0099cc 0%, #0099cc 100%) repeat scroll 0 0;
    height: 30px;
    margin: 6px 0;
    padding: 6px;
}

/*
 * Widget_Button
 * - Schriftfarbe
 * - Hintergrundfarbe
 */

 .widget_body p {
    color: black;
    font-size: 14px;
}


.widget_button.item-deactivated .button,
.widget_button.item-deactivated .styled-radio .radio-label,
.styled-radio .widget_button.item-deactivated .radio-label {
    background: #CCD7EA;
    color: #004BAD;
}

.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: #CCD7EA;
    color:#004BAD;
}

.button.button-forward::after, .styled-radio .button-forward.radio-label::after {
    background: #CCD7EA;
    color: #004BAD;
} 
 /* Farbe der Balken im Abschlags-Widget */
.widget_bars .bar.gas {
    background: #ffcc00;
}
.widget_bars .bar.strom {
    background: #98c00e;
}

.widget_bars .bar.wasser {
    background: #226FB3;
}

.widget.widget-small .widget_body {
    min-height: 140px;
}

/* Farbe der Schrift auf der logout Seite */


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

fieldset.date-field .add-on {
	background-color: #FEEAB2; /* 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: #cccccc;
}

.form-help {
    color: #004BAD;
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    margin-bottom: 20px;
}

/*
 * Headlines
 */

h1 {
	color: #004BAD;
	font-size: 18px;
	line-height: 20px;
}

.widget_headline {
	color: #004BAD;
}

h2 {
    font-family: Calibri, Arial;
	font-size: 18px;
}

/*
 * Progressleiste (Vertragswechsel)
 */

.progress-item {
	background-color: #0095B1;
}

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

.progress-item.selected {
	background-color: #0095B1;
	color: #666666;
}

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

.nav-trigger {
	color: #0065A6; /* Schriftfarbe */
}


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

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

}

@media all and (max-width: 1060px) {
	
.nav_main .level-1 > li {
	border-bottom: 1px solid #cccccc; /* Navigation Trenner-Farbe */
}

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

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

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

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

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

}

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


.header_logo .logo-image {
	background-image: url('../img/MAINGAU-Dachmarke-V1-CMYK-Blau-Gelb.jpg'); /* Logo Retina @2x */
	width: 340px; /* Logo Breite */
	height: 110px; /* Logo H�he */	
}

}

.nav_main .level-1 .level-2 > li a {
	color: #004BAD;
	cursor: pointer;
}
.nav_main .level-1 > li a {
	color: #004BAD;
	cursor: pointer;
}

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

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

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

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

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

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

}