@charset "utf-8";
/*
*
*	Innogy - 2019
*	Author: SECONDRED Newmedia GmbH
*	*Author: SECONDBREAD Newmedia GmbH
*	Web: http://www.secondbread.de
*
*/

/* -- Global Reset & Defaults -- */
* {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html[dir="rtl"] {
    direction: rtl;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    height: 100%;
    width: 100%;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}

input.formText, textarea, select, button {
    font-family: "Innogy regular", sans-serif;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select,
input {
    -webkit-box-shadow: none;
    -webkit-border-radius: 0
}

button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
}

textarea {
    resize: vertical;
    overflow: auto
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button:disabled {
    filter: alpha(opacity=30) !important;
    opacity: 0.3 !important;
    pointer-events: none !important
}

::-webkit-input-placeholder {
    color: #777;
    -webkit-transition: color .25s ease
}

:-moz-placeholder {
    color: #777;
    -moz-transition: color .25s ease
}

::-moz-placeholder {
    color: #777;
    -moz-transition: color .25s ease
}

:-ms-input-placeholder {
    color: #777;
    -ms-transition: color .25s ease
}

:focus::-webkit-input-placeholder {
    color: #ccc;
}

:focus:-moz-placeholder {
    color: #ccc;
}

:focus::-moz-placeholder {
    color: #ccc;
}

:focus:-ms-input-placeholder {
    color: #ccc;
}

ul {
    padding-left: 23px;
}

ol {
    padding-left: 23px;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

canvas {
    -ms-touch-action: double-tap-zoom;
}

svg:not(:root) {
    overflow: hidden;
}

a, button, img, input, textarea {
    -webkit-transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, opacity 250ms ease, box-shadow 250ms ease;
    -o-transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, opacity 250ms ease, box-shadow 250ms ease;
    -moz-transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, opacity 250ms ease, box-shadow 250ms ease;
    transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, opacity 250ms ease, box-shadow 250ms ease;
}

.hidettext {
    text-indent: -150%;
    white-space: nowrap;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    font-size: 1px
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

a {
    color: inherit
}

a:active {
    background-color: transparent
}

a:hover {
    text-decoration: none
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*::-webkit-selection {
    background-color: rgba(0, 0, 0, .2);
    color: #333;
}

*::-moz-selection {
    background-color: rgba(0, 0, 0, .2);
    color: #333;
}

*::selection {
    background-color: rgba(0, 0, 0, .2);
    color: #333;
}

/* - Remove the gap - */
audio, canvas, img, svg, video {
    vertical-align: middle;
}

/* -- Global CSS3 Default Styles -- */
.circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden
}

.rounded {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden
}

.shadow {
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .5);
}

.chart-icon {
    font-size: 48px
}

.chart-icon-small {
    font-size: 25px;
    line-height: 25px;
    position: relative;
    top: -2px
}

img.responsive {
    width: 100% !important;
    height: auto !important;
}

/* -- No-JS Overlay -- */
noscript.msg div {
    background-color: #C00;
    color: #fff;
    font-size: 12px;
    padding: 10px 20px;
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 888
}

/* -- Body und Text-Style -- */
body {
    font-family: "Innogy regular", sans-serif;
    font-size: 18px;
    background: #fff;
    color: #333;
}

.sidebar-open body {
    overflow: hidden
}

hr {
    margin: 30px 0;
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.3)
}

h1, h2, h3 {
    margin-bottom: 20px
}

h1 {
    font-size: 30px
}

h2 {
    font-size: 25px
}

h3 {
    font-size: 20px
}

p {
    margin-bottom: 30px
}

/* -- 100% Height Layout -- */
#container {
    min-height: 100vh;
    min-width: 100%;
    background: #EBEBEB;
    padding-left: 300px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

/* -- Layout -- */
.size {
    width: 1200px;
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* -- Header -- */
#header {
    position: relative;
}

#header {
    border-bottom: 1px solid #DBDBDB;
    padding: 10px;
    margin: 0 30px;
    font-family: "Innogy regular";
    text-align: right
}

#header a {
    font-family: "Innogy light";
    font-size: 22px;
    font-weight: normal;
    text-decoration: none
}

#header a i {
    font-size: 25px;
    margin-right: 5px;
    position: relative;
    top: 3px
}

/* -- Inner Layout -- */
#inner {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.svg-wrap {
    max-width: 246px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    -webkit-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    transform: translate(0px, -50%);

}

.svg-wrap svg {
    margin-bottom: 20px
}

.svg-wrap strong {
    display: block;
    text-align: center;
    font-size: 30px;
    color: #cc0099;
    padding-bottom: 20px
}

.error {
    -webkit-animation: moveX 1s steps(13) 1 forwards;
    -moz-animation: moveX 1s steps(13) 1 forwards;
    animation: moveX 1s steps(13) 1 forwards;
    width: 300px;
    height: 280px;
    margin: 30px auto;
}

.error.green {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-green.png);
    background-repeat: no-repeat
}

.error.magenta {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-magenta.png);
    background-repeat: no-repeat
}

.error.blue {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-blue.png);
    background-repeat: no-repeat
}

.error.orange {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-orange.png);
    background-repeat: no-repeat
}

.error.red {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-red.png);
    background-repeat: no-repeat
}

.error.grey {
    background-image: url(../img/graphics/error-sprites/error-image-sprite-grey.png);
    background-repeat: no-repeat
}

.error-text {
    text-align: center;
    font-size: 30px;
    padding-bottom: 20px;
}

.error.green + .error-text {
    color: #64B42D
}

.error.magenta + .error-text {
    color: #cc0099
}

.error.blue + .error-text {
    color: #00AAE1
}

.error.orange + .error-text {
    color: #f59b00
}

.error.red + .error-text {
    color: #e60055
}

.error.grey + .error-text {
    color: #CECECE;
}

@-webkit-keyframes moveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -3900px;
    }
}

@-moz-keyframes moveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -3900px;
    }
}

@keyframes moveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -3900px;
    }
}


@media screen and (min-width: 1280px) and (max-width: 1450px), screen and (min-width: 769px) and (max-width: 910px), screen and (min-width: 315px) and (max-width: 590px) {
    .error {
        width: 150px;
        height: 140px;
        background-size: 2100px 140px;
        -webkit-animation: smallMoveX 1s steps(13) 1 forwards;
        -moz-animation: smallMoveX 1s steps(13) 1 forwards;
        animation: smallMoveX 1s steps(13) 1 forwards;
    }
}

@-webkit-keyframes smallMoveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -1950px;
    }
}

@-moz-keyframes smallMoveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -1950px;
    }
}

@keyframes smallMoveX {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: -1950px;
    }
}

/* -- Sidebar -- */
.sidebar {
}

.sidebar .svg-wrap {
    top: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}

.sidebar .btn-wrao {
}

.sidebar #chart-live-details {
    max-height: 400px
}

.sidebar .btn-wrao button {
    margin-left: 10px
}

/*.sidebar button.icon-info {*/
/*    background: transparent;*/
/*    cursor: pointer;*/
/*    color: #fff;*/
/*    font-size: 35px;*/
/*    border: 0;*/
/*    position: relative;*/
/*    top: 4px;*/
/*    padding: 1px*/
/*}*/

/*.sidebar button.icon-info span {*/
/*    display: none;*/
/*}*/

/*.sidebar button.icon-info:hover {*/
/*    color: #F59B00;*/
/*}*/

.sidebar button.icon-close {
    background: transparent;
    cursor: pointer;
    color: #fff;
    font-size: 35px;
    border: 0;
    position: relative;
    top: 4px;
    padding: 1px
}

.sidebar button.icon-close span {
    display: none
}

.sidebar button.icon-close:hover {
    color: #F59B00;
}

.sidebar.lft {
    font-family: "Innogy regular";
    background: #ea1b0a;
    color: #ffffff;
    min-width: 300px;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    min-height: 670px;

    border-left: 16px solid #1ea2b1;
}

/* -- Widgets Hinzufügen-- */
.sidebar.addItem {
    position: absolute;
    left: 50%;
    margin-left: -420px;
    top: 80px;
    background: #3C3732;
    width: 840px;
    z-index: 999;
    color: #fff;
    padding: 30px;
    -webkit-transform: translate(0%, 20%);
    -moz-transform: translate(0%, 20%);
    transform: translate(0%, 20%);
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: -moz-transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    filter: alpha(opacity=0);
    opacity: 0;
    pointer-events: none
}

.sidebar.addItem h2 {
    font-family: "Innogy light";
    font-size: 40px;
    font-weight: normal
}


/* -- Widgets Sortieren -- */
.sidebar.sort {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background: #3C3732;
    width: 440px;
    z-index: 999;
    color: #fff;
    padding: 30px;
    -webkit-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    transform: translate(100%, 0px);
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: -moz-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
}

.sidebar.sort h2 {
    font-family: "Innogy light";
    font-size: 40px;
    font-weight: normal
}

/* -- Widgets - Meine Geräte-- */
.sidebar.myDevices {
    position: absolute;
    left: 50%;
    margin-left: -420px;
    top: 80px;
    background: #fff;
    width: 840px;
    z-index: 999;
    color: #333;
    -webkit-transform: translate(0%, 20%);
    -moz-transform: translate(0%, 20%);
    transform: translate(0%, 20%);
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: -moz-transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: transform 350ms cubic-bezier(0.2, 1, 0.3, 1), opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    filter: alpha(opacity=0);
    opacity: 0;
    pointer-events: none
}

.sidebar.myDevices h2 {
    font-family: "Innogy light";
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 0
}

.sidebar.myDevices .sidebar-head {
    padding: 20px 30px 30px;
    color: #fff
}

.sidebar.myDevices .sidebar-subhead {
    padding: 0 30px 30px;
}

.sidebar.myDevices .sidebar-subhead .current-watt {
    text-align: center;
    font-size: 48px;
    margin-bottom: 30px
}

.sidebar.myDevices .sidebar-subhead .current-watt small {
    font-size: 30px
}

.sidebar.myDevices .sidebar-subhead .active-time {
}

.sidebar.myDevices .sidebar-subhead .active-time .status,
.sidebar.myDevices .sidebar-subhead .active-time .time {
    text-align: center;
    color: #143C8C
}

.sidebar.myDevices .sidebar-subhead .active-time .time.zone1 {
    text-align: left;
    padding-left: 16%;
    padding-left: calc(16% + 20px)
}

.sidebar.myDevices .sidebar-subhead .active-time .time.zone2 {
    text-align: center;
}

.sidebar.myDevices .sidebar-subhead .active-time .time.zone3 {
    text-align: right;
    padding-right: 16%;
    padding-right: calc(16% + 20px);
}

.sidebar.myDevices .sidebar-subhead .active-time .status-wrap {
    display: table;
    width: 570px;
    table-layout: fixed;
    margin: 0 auto
}

.sidebar.myDevices .sidebar-subhead .active-time .status-wrap .status {
    display: table-cell
}

.sidebar.myDevices .sidebar-subhead .active-time .status {
    font-size: 30px;
    margin-bottom: 10px;
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.sidebar.myDevices .sidebar-subhead .active-time .status.active {
    filter: alpha(opacity=100);
    opacity: 1;
}

.sidebar.myDevices .sidebar-subhead .active-time .splitter {
    position: relative;
    text-align: center;
    margin-bottom: 10px
}

.sidebar.myDevices .sidebar-subhead .active-time .splitter:before {
    content: "";
    height: 1px;
    width: 100%;
    background: #26B7E5;
    position: absolute;
    top: 12px;
    left: -30px;
    right: -30px
}

.sidebar.myDevices .sidebar-subhead .active-time .splitter .bar {
    background: #26B7E5;
    height: 9px;
    display: inline-block;
    width: 150px;
    position: relative;
    z-index: 2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 20px;
}

.sidebar.myDevices .sidebar-subhead .active-time .splitter .bar.middle {
    background: #fff
}

.sidebar.myDevices .sidebar-subhead .active-time .time {
    font-size: 18px
}

.sidebar.myDevices .sidebar-subhead .active-time .nodevices {
    text-align: center
}

/* -- Sidebar - Heute -- */
.todaystat-wrap {
    display: table;
    width: 100%
}

.todaystat-wrap > div {
    display: table-cell
}

.todaystat-wrap .lft {
    width: 140px
}

.todaystat-wrap .mid {
    text-align: center
}

.todaystat-wrap .rt {
    width: 140px;
    text-align: right
}

.todaystat-wrap .lft > small {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    margin-bottom: 10px
}

.todaystat-wrap .lft .price {
    font-size: 36px
}

.todaystat-wrap .lft .price small {
    font-size: 30px
}

.todaystat-wrap .lft .khw {
    font-size: 22px
}

.todaystat-wrap .lft .khw small {
    font-size: 18px
}

.todaystat-wrap .rt > small {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    margin-bottom: 10px
}

.todaystat-wrap .rt .price {
    font-size: 48px
}

.todaystat-wrap .rt .price small {
    font-size: 30px
}

.todaystat-wrap .rt .khw {
    font-size: 30px
}

.todaystat-wrap .rt .khw small {
    font-size: 22px
}

.timeline-wrap {
    padding: 40px
}

.timeline-wrap h3 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px
}

.timeline-wrap .time-item {
    display: table;
    width: 100%;
    margin-bottom: 10px;
    font-size: 22px
}

.timeline-wrap .time-item > div {
    display: table-cell;
    padding: 20px;
    background: #E6E6E6
}

.timeline-wrap .time-item .time {
    width: 60%
}

.timeline-wrap .time-item .kwh {
    text-align: right;
    width: 20%
}

.timeline-wrap .time-item .price {
    text-align: right;
    width: 20%
}

/* -- Optionen -- */
.myDevices-options {
    border-bottom: 1px solid #F7F7F7;
    padding: 30px 30px 0
}

.myDevices-options .view-options {
    padding-top: 4px
}

.myDevices-options .view-options a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    padding: 10px 10px 10px;
    float: left;
    position: relative;
    color: #808080;
}

.myDevices-options .view-options a:hover,
.myDevices-options .view-options a.active {
    color: #F59B00;
}

.myDevices-options .view-options a.active:before {
    content: "";
    height: 3px;
    background: #F59B00;
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
}

/* -- Pager -- */
.myDevices-options .zoom {
    width: 250px
}

.myDevices-options .zoom button {
    border: 0;
    cursor: pointer;
    font-size: 35px;
    background: transparent;
    color: #808080;
}

.myDevices-options .zoom button.icon-zoomout {
    float: left
}

.myDevices-options .zoom button.icon-zoomin {
    float: right
}

.myDevices-options .zoom .zoom-level {
    text-align: center;
    padding-top: 5px
}

.myDevices-options .zoom .zoom-level .dot {
    background: #E6E6E6;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 2px;
    cursor: pointer
}

.myDevices-options .zoom .zoom-level .dot.active {
    background: #F59B00;
}

.myDevices-pager {
    padding: 0 30px
}

.myDevices-content + .myDevices-pager {
    margin-top: 30px
}

.myDevices-pager button {
    font-size: 40px;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: #808080;
    padding: 1px
}

.myDevices-pager button:hover {
    color: #F59B00;
}

.myDevices-pager button span {
    display: none
}

.myDevices-pager button.icon-beginn {
    margin-right: 10px
}

.myDevices-pager button.current {
    height: 40px;
    border: 2px solid #808080;
    font-size: 21px;
    width: 80px;
    margin-left: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.myDevices-pager button.current span {
    display: block;
}

.myDevices-pager button.current:hover {
    border: 2px solid #F59B00;
}

.myDevices-pager .current-month {
    text-align: center;
    font-size: 30px;
    padding-top: 5px;
}

/* -- Content  -- */
.myDevices-content .myDevices-pager {
    padding: 30px 30px
}

.myDevices-content .chart-stat {
    padding: 30px 30px
}

.chart-stat .chart-entry {
    margin-bottom: 10px;
    color: #fff;
    padding: 15px;
    font-size: 22px
}

.chart-stat .chart-entry > div {
    float: left
}

.chart-stat .chart-entry .ico {
    width: 40px;
    font-size: 25px;
    line-height: 22px;
    min-height: 25px;
}

.chart-stat .chart-entry .name {
    width: calc(100% - 340px)
}

.chart-stat .chart-entry .wastage {
    width: 200px;
    text-align: right;
    white-space: nowrap
}

.chart-stat .chart-entry .price {
    width: 100px;
    text-align: right
}

.chart-entry.magenta {
    background: #C81E82
}

.chart-entry.purple {
    background: #780A5F
}

.chart-entry.grey {
    background: #888
}

.chart-entry.lightgrey {
    background: #ccc
}

/* -- Sidebar Themes -- */
.sidebar.magenta .myDevices-options .zoom button:hover {
    color: #C81E82
}

.sidebar.magenta .sidebar-head,
.sidebar.magenta .sidebar-subhead {
    background: #C81E82;
    color: #fff
}

/* -- Blau -- */
.sidebar.blue .myDevices-options .zoom button:hover {
    color: #00AAE1
}

.sidebar.blue .sidebar-head,
.sidebar.blue .sidebar-subhead {
    background: #00AAE1;
    color: #fff
}

/* -- Grün  -- */
.sidebar.green .myDevices-options .zoom button:hover {
    color: #64B42D
}

.sidebar.green .sidebar-head,
.sidebar.green .sidebar-subhead {
    background: #64B42D;
    color: #fff
}

.sidebar.green .sidebar-head {
    background: -moz-linear-gradient(top, #64b42d 0%, #00875a 100%);
    background: -webkit-linear-gradient(top, #64b42d 0%, #00875a 100%);
    background: linear-gradient(to bottom, #64b42d 0%, #00875a 100%);
}

/* -- Orange -- */
.sidebar.orange .sidebar-head {
    background: #f59b00;
    background: -moz-linear-gradient(top, #f59b00 0%, #d27300 100%);
    background: -webkit-linear-gradient(top, #f59b00 0%, #d27300 100%);
    background: linear-gradient(to bottom, #f59b00 0%, #d27300 100%);
}

/* -- Rot -- */
.sidebar.red .myDevices-options .zoom button:hover {
    color: #E60055
}

.sidebar.red .sidebar-head,
.sidebar.red .sidebar-subhead {
    background: #E60055;
    color: #fff
}

.sidebar.red .sidebar-head {
    background: #e60055;
    background: -moz-linear-gradient(top, #e60055 0%, #a50032 100%);
    background: -webkit-linear-gradient(top, #e60055 0%, #a50032 100%);
    background: linear-gradient(to bottom, #e60055 0%, #a50032 100%);
}

.sidebar.indigo .sidebar-head {
    background: rgb(0, 170, 225);
    background: -moz-linear-gradient(top, rgb(0, 170, 225) 0%, #143c8c 100%);
    background: -webkit-linear-gradient(top, rgb(0, 170, 225) 0%, #143c8c 100%);
    background: linear-gradient(to bottom, rgb(0, 170, 225) 0%, #143c8c 100%);
}

/* -- Mint -- */
.sidebar.mint .myDevices-options .zoom button:hover {
    color: #009BA5
}

.sidebar.mint .sidebar-head,
.sidebar.mint .sidebar-subhead {
    background: #E60055;
    color: #fff
}

.sidebar.mint .sidebar-head {
    background: #009BA5;
    background: -moz-linear-gradient(top, #009BA5 0%, #005F69 100%);
    background: -webkit-linear-gradient(top, #009BA5 0%, #005F69 100%);
    background: linear-gradient(to bottom, #009BA5 0%, #005F69 100%);
}

.sidebar.orangeish .sidebar-head {
    background: -moz-linear-gradient(top, #EB4B0A 0%, #B9280A 100%);
    background: -webkit-linear-gradient(top, #EB4B0A 0%, #B9280A 100%);
    background: linear-gradient(to bottom, #EB4B0A 0%, #B9280A 100%);
}

.sidebar.phase-red .sidebar-head {
    background: -moz-linear-gradient(top, #EB4B0A 0%, #B9280A 100%);
    background: -webkit-linear-gradient(top, #EB4B0A 0%, #B9280A 100%);
    background: linear-gradient(to bottom, #EB4B0A 0%, #B9280A 100%);
}


/* -- Overlay Zählerstand -- */
.sidebar.meter-stat {
}

.sidebar.meter-stat .sidebar-head {
}

.sidebar.meter-stat .sidebar-head h4 {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 40px
}

.sidebar.meter-stat .sidebar-head .meter-wrap {
    text-align: center
}

.sidebar.meter-stat .sidebar-head .meter-wrap .kwh {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 15px;
    font-size: 48px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.sidebar.meter-stat .sidebar-head .meter-wrap .kwh small {
    font-size: 30px
}

.sidebar.meter-stat .sidebar-head .meter-wrap .meter-serial-number {
    font-size: 22px;
    margin-bottom: 30px
}

.sidebar.meter-stat .sidebar-head .meter-wrap .meter-serial-number .label {
    display: inline-block
}

.sidebar.meter-stat .sidebar-head .meter-wrap .meter-serial-number strong {
}

.sidebar.meter-stat .sidebar-head .connected {
    text-align: center;
    font-size: 22px
}

.sidebar.meter-stat .sidebar-head .connected i {
    font-size: 35px;
    position: relative;
    top: 10px;
    margin-right: 10px
}

.sidebar.meter-stat .myDevices-content .msg-wrap {
    padding-bottom: 0
}

.sidebar.meter-stat .meter-content-wrap {
    padding: 40px
}

.sidebar.meter-stat .myDevices-content h4 {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: normal
}

.sidebar.meter-stat .myDevices-content fieldset {
    width: 530px;
    margin: 0 auto
}

.sidebar.meter-stat .myDevices-content fieldset label {
    float: left;
    margin-right: 20px;
    padding: 10px 0
}

.sidebar.meter-stat .myDevices-content fieldset select,
.sidebar.meter-stat .myDevices-content fieldset input {
    width: 150px;
    border: 2px solid #D9D9D9;
    font-size: 22px;
    font-family: "Innogy regular";
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #fff;
    color: #D9D9D9;
    padding: 5px 10px;
}

.sidebar.meter-stat .myDevices-content fieldset input {
    width: 230px
}

.sidebar.meter-stat .myDevices-content .meter-result-wrap {
    text-align: center
}

.sidebar.meter-stat .myDevices-content .meter-result {
    display: inline-block;
    background: #F2F2F2;
    padding: 10px 15px;
    font-size: 48px;
    color: #E60055;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.sidebar.meter-stat .myDevices-content .meter-result span {
    font-size: 30px
}

/* -- Rechnungscheck  -- */
.sidebar.invoice-stat {
}

.sidebar.invoice-stat .sidebar-head {
}

.sidebar.invoice-stat .sidebar-head h4 {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 40px
}

.sidebar.invoice-stat .incident-wrap {
    width: 262px;
    height: 262px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    margin-bottom: 30px
}

.sidebar.invoice-stat .incident-wrap i {
    z-index: 2;
    font-size: 65px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.sidebar.invoice-stat .incident-wrap .incident-stat {
    background: rgba(255, 255, 255, 0.15);
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.sidebar.invoice-stat .incident-wrap .incident-outline {
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -moz-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.sidebar.invoice-stat .sidebar-head .price {
    text-align: center;
    font-size: 30px
}

.sidebar.invoice-stat .myDevices-content .msg-wrap {
    padding-bottom: 0
}

.sidebar.invoice-stat .invoice-content-wrap {
    padding: 40px;
    font-size: 22px;
}

.sidebar.invoice-stat .invoice-content-wrap h4 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px
}

.sidebar.invoice-stat .invoice-content-wrap p.time-range {
    color: #009BA5;
    font-size: 30px
}

/* -- Verbrauchalarm  -- */
.sidebar.wastage-alert .sidebar-head h4 {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 0;
}

.sidebar.wastage-alert .myDevices-options {
    padding: 30px
}

.sidebar.wastage-alert .myDevices-options h5 {
    font-size: 22px;
    color: #009BA5;
    font-weight: normal
}

.sidebar.wastage-alert .myDevices-options h5:before {
    font-size: 18px;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.sidebar.wastage-alert .content-wrap {
    padding: 40px;
    font-size: 22px;
}

.sidebar.wastage-alert .content-wrap h4 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px
}

.sidebar.wastage-alert .content-wrap p.time-range {
    color: #009BA5;
    font-size: 30px
}

/* -- Hotline Box-- */
.hotline-msg {
    text-align: center;
    background: #F2F2F2;
    padding: 35px;
    font-size: 22px
}

.hotline-msg p {
    margin-bottom: 0
}

.hotline-msg .number {
    position: relative;
    font-size: 30px;
    padding-left: 75px;
    display: inline-block;
    margin-bottom: 30px
}

.hotline-msg .number i {
    position: absolute;
    left: 0;
    top: 57%;
    font-size: 60px;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.hotline-msg .number .call {
}

/* -- Overlay Aktive-- */
.sidebar.visible {
    -webkit-transform: translate(0%, 0px);
    -moz-transform: translate(0%, 0px);
    transform: translate(0%, 0px);
}

.sidebar.addItem.visible,
.sidebar.myDevices.visible {
    filter: alpha(opacity=100);
    opacity: 1;
    pointer-events: all;
    top: 0
}

.orange-chart-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.orange-chart-wrap img {
    margin: 0 auto
}

.orange-chart-wrap .label.date {
    font-size: 18px;
    font-family: "Innogy light";
    text-align: center
}

.block-tile .orange-chart-wrap {
    bottom: 80px;
}

.block-tile .orange-chart-wrap + h4 {
    position: absolute;
    left: 30px;
    bottom: 30px
}

/* -- Tabs -- */
nav.tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 30px
}

nav.tabs ul {
}

nav.tabs ul li {
    margin-right: 20px
}

nav.tabs ul li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 0;
    display: block;
    position: relative
}

nav.tabs ul li a:hover {
    color: #fff
}

nav.tabs ul li a:before {
    height: 5px;
    width: 100%;
    background: #F59B00;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: -moz-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
}

nav.tabs ul li.active a {
    color: #F59B00;
}

nav.tabs ul li.active a:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.tab-content {
    display: none;
}

.tab-content.open {
    display: block
}

.tab-content h3 {
    color: #F59B00;
    font-size: 30px;
    font-family: "Innogy light";
    font-weight: normal
}

.tab-content p {
}

.widget-grid {
}

.widget-grid .box {
    margin-bottom: 30px
}

.widget-grid .box img {
    height: auto !important;
    max-width: 100%;
    cursor: pointer;
    margin-bottom: 20px
}

.widget-grid .box.selected {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.widget-grid h3 {
    color: #F59B00;
    font-size: 30px;
    font-family: "Innogy light";
    font-weight: normal;
    margin-bottom: 10px
}

.widget-grid p {
    color: #fff;
    font-size: 16px;
}

/* -- Inhalt -- */
#mainContent {
    padding: 20px 30px;
    min-height: calc(100vh - 48px);
    position: relative
}

#mainContent .dashboard {
    min-height: calc(100vh - 48px);
    position: relative
}

.page-full #mainContent {
    margin: 0;
}

/* -- Content Part -- */
.content-part {
    text-align: left
}

.content-part .cp-inner {
    padding: 30px
}

.sb-overlay {
    position: fixed;
    z-index: 77;
    left: 0;
    right: 0;
    top: -9999em;
    height: auto;
    overflow: auto;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: opacity 350ms cubic-bezier(0.2, 1, 0.3, 1);
    padding: 80px;
}

.sb-overlay:before {
    background: #EBEBEB;
    filter: alpha(opacity=95);
    opacity: 0.95;
    bottom: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.sb-overlay.visible {
    display: block;
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
    bottom: 0
}

.sb-overlay .sidebar {
    top: -9999em;
}

.sb-overlay .sidebar.visible {
    position: relative;
    margin: 0 auto;
    left: 0;
    top: 0
}

.sb-overlay.align-right {
    padding: 0
}

.sb-overlay.align-right .sidebar {
    margin: 0 0 0 300px;
    width: auto;
    background: #EBEBEB;
    padding: 40px 80px;
    height: 100vh
}

/* -- Elemente & Blöcke -- */
.node {
    overflow: hidden;
    margin-bottom: 20px
}

/* -- Blöcke -- */
.block {
}

.block .img {
}

.block .img img {
    display: block
}

.block h3 {
}

.block h3 a {
}

.block h3 a:hover {
}

.block .inner {
}

.block .inner p {
}

/* -- Block User -- */
.block-user .img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: 0 auto 20px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.block-user .inner {
    font-family: "Innogy medium";
    text-align: center;
    color: #fff;
    font-size: 16px
}

/* -- Block Menü -- */
.block-menu {
    padding: 40px 40px 240px;
    font-family: "Eon Regular";
}

.block-menu nav ul {
    padding-left: 0;
    list-style: none
}

.block-menu nav ul li {
}

.block-menu nav ul li a {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 0;
    display: block;
    text-decoration: none
}

.block-menu nav ul li:first-child a {
    border-top: 0
}

.block-menu nav ul li a:hover {
    color: rgba(255, 255, 255, 1);
    background: transparent
}

.block-menu nav ul li a.active {
    color: #F59B00
}

/* -- -- */
.dashboard {
    margin: 0 -20px
}

.dashboard:before {
    content: '';
    display: table;
}

.dashboard:after {
    content: '';
    display: table;
    clear: both;
}

/* -- Block Tite-- */
.cardwrap {
    position: relative;
    float: left;
}

.cardwrap button.icon-close {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 3;
    font-size: 25px;
    border: 0;
    background: transparent;
    color: #333;
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 1px;
}

.cardwrap:hover button.icon-close {
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.cardwrap button.icon-close span {
    display: none
}

.cardwrap button.icon-close:hover {
    color: #46413D;
    filter: alpha(opacity=100);
    opacity: 1;
}

.cardwrap.small {
    width: 25%;
    min-height: 242px
}

.cardwrap.middle {
    width: 50%;
    min-width: 420px
}

.cardwrap.large {
    width: 50%;
    min-width: 420px
}

.grid-sizer {
    width: 25%;
}

@media screen and (max-width: 1294px) {
    .grid-sizer {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    .grid-sizer {
        width: 50%;
    }
}

/* -- Pie Chart -- */
.pie-chart-wrap {
    width: 360px;
    height: 360px;
    margin: 0 auto
}

.pie-chart-wrap > div {
    width: 50%;
    float: left;
    padding-bottom: 100%
}

.pie-chart-wrap .pie-chart-left {
    background: rgba(255, 255, 255, 0.4);
    -webkit-border-radius: 180px 0 0 180px;
    -moz-border-radius: 180px 0 0 180px;
    border-radius: 180px 0 0 180px;
    -webkit-transform-origin: 60% 50%;
    -moz-transform-origin: 60% 50%;
    transform-origin: 60% 50%;
}

.pie-chart-wrap .pie-chart-right {
    background: #fff;
    -webkit-border-radius: 0 180px 180px 0;
    -moz-border-radius: 0 180px 180px 0;
    border-radius: 0 180px 180px 0;
    -webkit-transform-origin: 40% 50%;
    -moz-transform-origin: 40% 50%;
    transform-origin: 40% 50%;
}

/* --  Block Tile -- */
.block-tile {
    background: #fff;
    position: relative;
    margin: 0 20px 40px
}

.block-tile h3 {
    padding: 20px 30px 10px;
    font-size: 40px;
    font-weight: normal;
    font-family: "Innogy light";
    margin-bottom: 0
}

.block-tile h4 {
    padding: 0 30px;
    font-size: 30px;
    font-weight: normal;
    font-family: "Innogy light";
    margin-bottom: 10px
}

.block-tile .inner {
    padding-bottom: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.block-tile .inner p:last-child {
    margin-bottom: 0
}

.block-tile .inner figure.alert-wrap {
    position: absolute;
    left: 50%;
    top: 55%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.block-tile a.today-details {
    position: absolute;
    right: 20px;
    bottom: 180px;
    color: #F59B00;
    font-size: 45px;
    text-decoration: none;
    width: 45px;
    height: 45px;
    animation: pulse 2s infinite;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(245, 155, 0, 0.4);
}

.block-tile a.today-details span {
    display: none
}

.block-tile a.today-details:hover {
    color: #333;
    animation: none;
}

.block-tile a.consumption-details,
.block-tile a.live-details,
.block-tile a.compare-details,
.block-tile a.finance-details,
.block-tile a.meter-details,
.block-tile a.appliances-details,
.block-tile a.powerchecker-details,
.block-tile a.phase-checker-details,
.block-tile a.mvp-details {
    position: absolute;
    right: 20px;
    bottom: 60px;
    color: #F59B00;
    font-size: 45px;
    text-decoration: none;
    z-index: 3;
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 rgba(245, 155, 0, 0.4);
    width: 45px;
    height: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(245, 155, 0, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 15px rgba(245, 155, 0, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(245, 155, 0, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(245, 155, 0, 0.4);
        box-shadow: 0 0 0 0 rgba(245, 155, 0, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(245, 155, 0, 0);
        box-shadow: 0 0 0 15px rgba(245, 155, 0, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(245, 155, 0, 0);
        box-shadow: 0 0 0 0 rgba(245, 155, 0, 0);
    }
}

.block-tile a.consumption-details span,
.block-tile a.live-details span,
.block-tile a.compare-details span,
.block-tile a.finance-details span,
.block-tile a.meter-details span,
.block-tile a.powerchecker-details span,
.block-tile a.phase-checker-details span,
.block-tile a.mvp-details span,
.block-tile a.appliances-details span {
    display: none
}

.block-tile a.consumption-details:hover,
.block-tile a.live-details:hover,
.block-tile a.compare-details:hover,
.block-tile a.finance-details:hover,
.block-tile a.meter-details:hover,
.block-tile a.powerchecker-details:hover,
.block-tile a.phase-checker-details:hover,
.block-tile a.mvp-details:hover,
.block-tile a.appliances-details:hover {
    color: #333;
    animation: none;
}

.block-tile a.consumption-details,
.block-tile a.meter-details,
.block-tile a.finance-details,
.block-tile a.live-details,
.block-tile a.compare-details,
.block-tile a.today-details,
.block-tile a.powerchecker-details,
.block-tile a.phase-checker-details,
.block-tile a.mvp-details,
.block-tile a.appliances-details {
    filter: alpha(opacity=0);
    opacity: 0;
}

.block-tile:hover a.consumption-details,
.block-tile:hover a.meter-details,
.block-tile:hover a.finance-details,
.block-tile:hover a.live-details,
.block-tile:hover a.compare-details,
.block-tile:hover a.today-details,
.block-tile:hover a.powerchecker-details,
.block-tile:hover a.phase-checker-details,
.block-tile:hover a.mvp-details,
.block-tile:hover a.appliances-details {
    filter: alpha(opacity=100);
    opacity: 1;
}

.block-tile .chart-stat-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.block-tile .chart-stat {
    width: 100%;
    display: table;
    table-layout: fixed
}

.block-tile .chart-stat .stat-item {
    display: table-cell;
    text-align: center;
    font-size: 18px;
    vertical-align: bottom
}

.block-tile .chart-stat .stat-item .ico {
    font-size: 25px;
    position: relative;
    top: 3px
}

.block-tile .chart-stat .stat-item i,
.block-tile .chart-stat .stat-item span {
    display: block;
    vertical-align: middle;
    text-align: center
}

.block-tile .chart-stat .stat-item .bar {
    display: block;
    content: "";
    height: 10px;
    margin-top: 15px;
    margin-left: 1px
}

.block-tile .chart-stat .stat-item:first-child .bar {
    margin-left: 0
}

.block-tile .pie-chart-wrap {
    width: 40%;
    padding-bottom: 100%;
    height: auto
}

.block-tile .pie-chart-wrap > div {
}

.block-tile .pie-chart-wrap .pie-chart-left {
    background: #00875A;
}

.block-tile .pie-chart-wrap .pie-chart-right {
    background: #64B42D;
}

/* -- Sidebar - Heute -- */
.block-tile .chart-wrap img {
    margin: 0 auto
}

.block-tile .todaystat-wrap {
    position: absolute;
    left: 0;
    bottom: 30px;
    right: 0;
    width: 100%
}

.block-tile .todaystat-wrap > div {
}

.block-tile .todaystat-wrap .lft {
    color: #00875A;
    padding-left: 30px;
    width: 180px
}

.block-tile .todaystat-wrap .mid {
    text-align: center
}

.block-tile .todaystat-wrap .rt {
    color: #64B42D;
    padding-right: 30px;
    width: 180px
}

.block-tile .todaystat-wrap .lft > small,
.block-tile .todaystat-wrap .rt > small {
    font-size: 22px;
    color: #64B42D;
    border-bottom: 2px solid rgba(80, 80, 80, 0.2);
}

.block-tile .todaystat-wrap .price {
    font-size: 36px
}

.block-tile .todaystat-wrap .price small {
    font-size: 30px
}

.block-tile .todaystat-wrap .khw {
    font-size: 22px
}

.block-tile .todaystat-wrap .khw small {
    font-size: 18px
}

@media screen and (min-width: 1281px) and (max-width: 1450px) {

    .block-tile h4 {
        font-size: 20px
    }

    .block-tile .todaystat-wrap .lft,
    .block-tile .todaystat-wrap .rt {
        width: 120px
    }

    .block-tile .todaystat-wrap .lft > small,
    .block-tile .todaystat-wrap .rt > small {
        font-size: 18px;
    }

    .block-tile .todaystat-wrap .price {
        font-size: 28px
    }

    .block-tile .todaystat-wrap .price small {
        font-size: 25px
    }

    .block-tile .todaystat-wrap .khw {
        font-size: 18px
    }

    .block-tile .todaystat-wrap .khw small {
        font-size: 14px
    }
}

@media screen and (max-width: 576px) {

    .block-tile h4 {
        font-size: 18px
    }

    .block-tile .todaystat-wrap .lft,
    .block-tile .todaystat-wrap .rt {
        width: 120px
    }

    .block-tile .todaystat-wrap .lft > small,
    .block-tile .todaystat-wrap .rt > small {
        font-size: 14px;
    }

    .block-tile .todaystat-wrap .price {
        font-size: 20px
    }

    .block-tile .todaystat-wrap .price small {
        font-size: 14px
    }

    .block-tile .todaystat-wrap .khw {
        font-size: 16px
    }

    .block-tile .todaystat-wrap .khw small {
        font-size: 14px
    }
}

@media screen and (max-width: 359px) {

    .block-tile h4 {
        font-size: 16px
    }

    .block-tile .todaystat-wrap .lft,
    .block-tile .todaystat-wrap .rt {
        width: 90px
    }

    .block-tile .todaystat-wrap .lft {
        padding-left: 15px
    }

    .block-tile .todaystat-wrap .rt {
        padding-right: 15px
    }

    .block-tile .todaystat-wrap .lft > small,
    .block-tile .todaystat-wrap .rt > small {
        font-size: 12px;
    }

    .block-tile .todaystat-wrap .price {
        font-size: 18px
    }

    .block-tile .todaystat-wrap .price small {
        font-size: 12px
    }

    .block-tile .todaystat-wrap .khw {
        font-size: 14px
    }

    .block-tile .todaystat-wrap .khw small {
        font-size: 12px
    }
}

.block-tile .meter-wrap {
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: -100px;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.block-tile .meter-wrap .kwh {
    color: #E60055;
    background: #F2F2F2;
    font-size: 65px;
    display: inline-block;
    margin-bottom: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px 40px;
}

.block-tile .meter-wrap .kwh small {
    font-size: 40px
}

.block-tile .meter-wrap .meter-serial-number {
    font-size: 30px
}

/* -- -- */
.block-tile .connected {
    display: block;
    vertical-align: middle;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.block-tile .connected i {
    font-size: 35px;
    display: block;
    float: left
}

.block-tile .connected span {
    display: block;
    margin-left: 50px;
    padding: 5px 0;
    font-size: 22px;
}

.block-submenu {
    padding: 0 40px 40px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.block-submenu .presentbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: right;
}

.block-submenu .presentbar small {
}

.block-submenu .presentbar .innogy-logo {
    width: 40px;
    height: 60px;
    background: url(../gfx/innogy-logo@2x.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .envia-logo {
    width: 40px;
    height: 21px;
    background: url(../gfx/enviam-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .eprimo-logo {
    width: 40px;
    height: 11px;
    background: url(../gfx/eprimo-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .energis-logo {
    width: 50px;
    height: 13px;
    background: url(../gfx/energis-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .lew-logo {
    width: 50px;
    height: 40px;
    background: url(../gfx/lew-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .eon-logo {
    width: 50px;
    height: 40px;
    background: url(../gfx/eon-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .avacon-logo {
    width: 50px;
    height: 17px;
    background: url(../gfx/avacon-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .shn-logo {
    width: 50px;
    height: 17px;
    background: url(../gfx/shn-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .bn-logo {
    width: 50px;
    height: 17px;
    background: url(../gfx/bw-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.block-submenu .presentbar .edis-logo {
    width: 50px;
    height: 17px;
    background: url(../gfx/edis-logo.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.submenu {
    font-size: 18px;
}

.submenu ul {
    display: table;
    padding-left: 0;
    width: 100%
}

.submenu ul li {
    display: table-cell
}

.submenu ul li a {
    text-decoration: none
}

.submenu ul li a:hover {
    color: #fff
}

/* -- Block Content  -- */
.block-content {
    background: #fff;
    height: inherit
}

.block-content .inner {
    padding: 35px 40px;
}

.block-content h3 {
    font-size: 30px;
    font-weight: normal
}

.block-content p {
    line-height: 24pt
}

.block-content address {
    font-style: normal;
    margin-bottom: 20px;
    line-height: 24pt
}

.block-content a {
    color: #F59B00
}

.block-content button {
    border: 0;
    cursor: pointer;
    background: #F59B00;
    color: #fff;
    font-size: 22px;
    width: 360px;
    height: 55px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
}

/* -- -- */
.invoice-status-wrap {
    width: 60%;
    margin: 0 auto;
    padding-top: 30px
}

.invoice-status {
    width: 100%;
    padding-bottom: 100%;
    overflow: visible;
    position: relative;
    z-index: 1
}

.invoice-status i {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 85px;
    z-index: 3;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.invoice-status .status-circle {
    z-index: 1;
    background: #009BA5;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.invoice-status .status-circle-outline {
    z-index: 2;
    border: 3px solid #005F69;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* -- Block Farben -- */
.block-tile.blue {
    background: #143C8C;
    color: #fff
}

.block-tile.green {
    background: #64B42D;
    color: #fff
}

.block-tile.purple {
    background: #780A5F;
    color: #fff
}

.block-tile.orange {
    background: #F59B00;
    color: #fff
}

.block-tile.magenta {
    background: #E60055;
    color: #fff
}

.block-tile.grey {
    background: #E1E1E1
}

/* -- Block Größen -- */
.block-tile.large {
    padding-bottom: 100%;
    padding-bottom: calc(100% - 40px)
}

.block-tile.large img {
    display: block
}

.block-tile.large .live-chartwrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.block-tile.large .live-chartwrap .highcharts-container {
    position: relative;
    z-index: 1;
}

.block-tile.large .live-chartwrap .watt {
    position: absolute;
    color: #00AAE1;
    font-size: 48px;
    z-index: 2;
    right: 40px;
    top: -60px;
    -webkit-text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    -moz-text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.block-tile.large .live-chartwrap .watt small {
    font-size: 30px;
    padding-left: 5px
}

/*.block-tile.large .live-chartwrap {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*}*/

.highcharts-container .large,
.highcharts-container .small {
    font-family: "Innogy regular", sans-serif;
}

.highcharts-container .large {
    font-size: 30px;
    margin-bottom: 5px
}

.highcharts-container .small {
    font-size: 18px;
}

/* -- Tile Hinzufügen -- */
.block-tile.add .inner {
    bottom: 0
}

.block-tile.add a {
    color: #808080;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-decoration: none;
    font-size: 22px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.block-tile.add a span {
    display: block;
    padding-top: 30px
}

.block-tile.add a:before {
    display: block;
    font-size: 50px
}

/* -- -- */
.sort-list {
    margin: 0 -21px
}

.sort-list-item {
    width: 422px;
    height: 57px;
    padding: 17px 20px;
    cursor: move;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.sort-list-item:before {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 0;
    left: 21px;
    right: 21px;
}

.sort-list-item > div {
    float: left;
    font-size: 22px;
    line-height: 22px
}

.sort-list-item .points {
    color: #808080;
    width: 10px;
}

.sort-list-item .pos {
    font-family: "Innogy medium", sans-serif;
    width: 42px;
    text-align: center
}

.sort-list-item .name {
    font-family: "Innogy light", sans-serif;
    width: 260px
}

.sort-list-item .btn {
    width: 70px
}

.sort-list-item .btn .wigetsize {
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background-size: 25px;
    background-color: transparent;
    border: 0;
    float: left;
    margin-right: 15px
}

.sort-list-item .btn .icon-trash {
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background-size: 25px;
    background-color: transparent;
    border: 0;
    font-size: 25px;
    color: #808080
}

.sort-list-item .btn .icon-trash:hover {
    color: #fff
}

.sort-list-item.sortable-ghost {
    background: #46413D;
    -webkit-box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.15);
    box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.15);
    color: #F59B00;
    z-index: 444
}

.sort-list-item.sortable-ghost:before {
    display: none
}

.sort-list-item.sortable-ghost .points {
    color: #F59B00
}

/* -- Kontakt -- */
.einstellungen {
    padding-top: 72px
}

.einstellungen .head {
}

.einstellungen .head h2 {
    font-size: 40px;
    font-weight: normal
}

.einstellungen fieldset {
    padding: 0
}

.einstellungen .btn-wrap {
    text-align: center;
    padding-top: 20px
}

.einstellungen .btn-wrap a {
    font-size: 22px;
    width: 360px
}

.einstellungen .grid {
    margin-bottom: 30px
}

/* -- Meine Innogy -- */
.meine-innogy {
    padding-top: 72px
}

.meine-innogy .head {
}

.meine-innogy .head h2 {
    font-size: 40px;
    font-weight: normal
}

.meine-innogy ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 40px;
}

.meine-innogy ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px
}

.meine-innogy ul li:before {
    content: "";
    width: 10px;
    height: 10px;
    background: #F59B00;
    position: absolute;
    left: 0;
    top: 6px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* -- Kontakt -- */
.kontakt {
    padding-top: 72px
}

.kontakt .head {
}

.kontakt .head h2 {
    font-size: 40px;
    font-weight: normal
}

/* -- Meine Daten -- */
.meine-daten {
    padding-top: 72px
}

.meine-daten .head {
}

.meine-daten .head h2 {
    font-size: 40px;
    font-weight: normal
}

/* -- Mein Haushalt -- */
.mein-haushalt-wrap {
    padding-top: 72px
}

.mein-haushalt-wrap h2 {
    font-size: 40px;
    font-weight: normal
}

.mein-haushalt-wrap .btn-wrap {
    text-align: center;
    position: relative;
    margin-top: -40px;
    padding-top: 40px;
}

/*.mein-haushalt-wrap .btn-wrap:before {content:""; background: #DBDBDB; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px} */
.mein-haushalt-wrap .btn-wrap button.formSubmit {
    font-size: 21px;
    padding: 13px 10px;
    border: 0;
    width: 240px;
    margin: 0 20px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    background: #F59B00;
    color: #fff;
    cursor: pointer
}

.mein-haushalt {
    padding-left: 60px;
    position: relative
}

.mein-haushalt:before {
    content: "";
    background: #DBDBDB;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 1px
}

.eigenschaft {
    background: #fff;
    padding: 30px 40px;
    position: relative;
    margin-bottom: 40px
}

.eigenschaft:before {
    position: absolute;
    top: 50%;
    left: -55px;
    font-size: 30px;
    margin-top: -15px;
    color: #F59B00;
    background: #EBEBEB;
}

.eigenschaft .box {
    position: relative;
}

.eigenschaft .box > input {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer

}

.eigenschaft.icon-empty:before {
    color: #ccc
}

.eigenschaft .btn-option {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 140px
}

.eigenschaft .btn-option span {
    display: block
}

.eigenschaft .btn-option .icon {
    padding-bottom: 100%;
    position: relative;
}

.eigenschaft .btn-option .icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.eigenschaft .btn-option .label,
.eigenschaft .btn-option label {
    font-size: 22px;
    font-family: "Innogy light", sans-serif;
    display: block;
    text-align: center
}

/* -- Active Default -- */
.eigenschaft .btn-option.active {
    color: #F59B00
}

.eigenschaft .btn-option.active .fill-active {
    fill: #F59B00;
    -webkit-transition: fill 250ms ease;
    -o-transition: fill 250ms ease;
    -moz-transition: fill 250ms ease;
    transition: fill 250ms ease;
}

.eigenschaft .btn-option.active .stroke-active {
    -webkit-transition: stroke 250ms ease;
    -o-transition: stroke 250ms ease;
    -moz-transition: stroke 250ms ease;
    transition: stroke 250ms ease;
    stroke: #F59B00;
}

/* -- Active Input -- */
.eigenschaft input[type="radio"]:checked + .btn-option {
    color: #F59B00
}

.eigenschaft input[type="radio"]:checked + .btn-option .fill-active {
    fill: #F59B00;
    -webkit-transition: fill 250ms ease;
    -o-transition: fill 250ms ease;
    -moz-transition: fill 250ms ease;
    transition: fill 250ms ease;
}

.eigenschaft input[type="radio"]:checked + .btn-option .stroke-active {
    -webkit-transition: stroke 250ms ease;
    -o-transition: stroke 250ms ease;
    -moz-transition: stroke 250ms ease;
    transition: stroke 250ms ease;
    stroke: #F59B00;
}

/* -- Counter -- */
.eigenschaft .counter-wrap {
    width: 100px;
    margin: 0 auto;
    padding-top: 10px;
    display: none
}

.eigenschaft .counter-wrap button {
    font-size: 25px;
    color: #ccc;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 0;
    background: transparent
}

.eigenschaft .counter-wrap button:hover {
    color: #333
}

.eigenschaft .counter-wrap button.icon-c-minus {
    float: left
}

.eigenschaft .counter-wrap button.icon-c-plus {
    float: right
}

.eigenschaft .counter-wrap button span {
    display: none
}

.eigenschaft .counter-wrap input {
    width: 40px;
    border: 0;
    font-size: 22px;
    font-family: "Innogy regular", sans-serif;
    color: #F59B00;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    display: block;
    margin: 0 auto
}

.eigenschaft .counter-wrap input[type=number]::-webkit-inner-spin-button,
.eigenschaft .counter-wrap input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.eigenschaft button.active + .counter-wrap {
    display: block
}

/* -- Spalten Layout -- */
.row {
}

.row .lft,
.row .mid,
.row .rt {
    float: left
}

.twoCols .lft,
.twoCols .rt {
    width: 50%
}

.threeCols {
}

.threeCols .lft,
.threeCols .mid,
.threeCols .rt {
    width: 33.3%
}

/* -- Grid System -- */
.grid .box {
    float: left;
}

.grid.two .box {
    width: 50%
}

.grid.two .box:nth-child(odd) {
    padding-right: 15px;
}

.grid.two .box:nth-child(even) {
    padding-left: 15px
}

.grid.three .box {
    width: 33.333333%;
}

.grid.three .box:nth-child(3n-2) {
    padding-right: 15px
}

.grid.three .box:nth-child(3n-1) {
    padding-left: 10px;
    padding-right: 10px
}

.grid.three .box:nth-child(3n) {
    padding-left: 15px
}

.grid.four .box {
    width: 25%
}

.grid.five .box {
    width: 20%
}

.grid.six .box {
    width: 16.666666%
}

@media screen and (max-width: 1366px) {
    .grid.four .box {
        width: 33.333333%
    }

    .grid.five .box {
        width: 25%
    }

    .grid.six .box {
        width: 20%
    }
}

@media screen and (max-width: 1290px) {
    .grid.six .box {
        width: 25%
    }
}

@media screen and (max-width: 1200px) {
    .grid.five .box,
    .grid.six .box {
        width: 33.333333%
    }
}

@media screen and (max-width: 1024px) {
    .grid.four .box,
    .grid.five .box,
    .grid.six .box {
        width: 50%
    }
}

.btn-grid {
    margin-bottom: 30px
}

.btn-grid button {
    width: 100%;
}

/* -- Formular Elemente -- */
fieldset {
    border: 0;
    padding: 0 20px 10px;
}

fieldset .formItem {
    margin-bottom: 15px
}

fieldset .formItem > label {
    display: block
}

fieldset .formItem select,
fieldset .formItem input.formText,
fieldset .formItem textarea {
    padding: 10px;
    width: 100%;
    border: 1px solid #ddd
}

fieldset .formItem select:focus,
fieldset .formItem input.formText:focus,
fieldset .formItem textarea:focus {
    border-color: #999
}

fieldset .formItem input.formText {
}

fieldset .formItem textarea {
}

/* -- Radio Checkbox Replacement -- */
fieldset .radio-wrap label i,
fieldset .checkbox-wrap label i {
    display: block;
    width: 33px;
    height: 33px;
    border: 2px solid #D9D9D9;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* -- Checkbox -- */
fieldset .checkbox-wrap {
    position: relative
}

fieldset .checkbox-wrap input {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}

fieldset .checkbox-wrap label {
    position: relative;
    padding-left: 50px;
    display: block
}

fieldset .checkbox-wrap label span {
    display: block
}

fieldset .checkbox-wrap label small {
    display: block;
    font-size: 18px;
    line-height: 24px
}

fieldset .checkbox-wrap label strong {
    display: block;
    font-weight: normal;
    font-size: 22px;
    padding: 4px 0;
    margin-bottom: 10px
}

fieldset .checkbox-wrap label i:before,
fieldset .checkbox-wrap label i:after {
    content: " ";
    width: 25px;
    height: 2px;
    background: #666;
    display: block;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -12px;
    margin-top: -1px;
    filter: alpha(opacity=0);
    opacity: 0;
}

fieldset .checkbox-wrap label i:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

fieldset .checkbox-wrap label i:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

fieldset .checkbox-wrap input[type=checkbox]:checked + label i:before,
fieldset .checkbox-wrap input[type=checkbox]:checked + label i:after {
    filter: alpha(opacity=100);
    opacity: 1;
}

/* -- Rechnungs Benachrichtung  -- */
fieldset.invoice-alert {
    padding: 0
}

/* -- Filterbar -- */
fieldset.filterbar {
    text-align: center;
    padding: 20px 0 20px 90px
}

fieldset.filterbar .formItem {
    display: inline-block;
    padding: 0 10px
}

fieldset.filterbar .splitter {
    width: 100px
}

fieldset.filterbar label {
    display: none
}

fieldset.filterbar select {
    border: 2px solid #D9D9D9;
    height: 40px;
    padding: 0 40px 0 20px;
    background: url(../gfx/select-arrow.png) right center no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #808080;
    font-size: 18px
}

fieldset.filterbar.day {
    padding: 20px 0 20px 20px
}

fieldset.filterbar.day .splitter {
    width: 60px
}

fieldset.filterbar.day .formItem {
    padding: 0 5px
}

fieldset.filterbar.day select {
    max-width: 150px;
    padding: 0 40px 0 15px
}

fieldset.filterbar.week {
    padding: 20px 0 20px 30px
}

fieldset.filterbar.month {
    padding: 20px 0 20px 30px
}

fieldset.filterbar.year {
    padding: 20px 0 20px 0
}

fieldset.filterbar.year .splitter {
    width: 290px
}

/* -- Filterbar -- */
fieldset.selectbar {
    padding: 0;
    margin-bottom: 0;
    margin: -15px 0 -5px
}

fieldset.filterbar .formItem {
    display: inline-block;
    padding: 0 10px
}

fieldset.filterbar .splitter {
    width: 100px
}

fieldset.selectbar label {
    display: none
}

fieldset.selectbar select {
    border: 2px solid #D9D9D9;
    height: 40px;
    padding: 0 40px 0 20px;
    background: url(../gfx/select-arrow.png) right center no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #808080;
    font-size: 21px
}

/* -- -- */
fieldset.change-email {
    padding: 0;
    margin-bottom: 0
}

fieldset.change-email label {
    display: none
}

fieldset.change-email .formItem {
    width: 60%;
    float: left;
    margin-right: 5%
}

fieldset.change-email input.formText {
    padding: 0 20px;
    height: 55px;
    font-size: 22px;
    background: transparent;
    color: #333333;
    border: 2px solid #D9D9D9;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}

fieldset.change-email button {
    width: 35%
}

/* -- Form Submit Button -- */
.formSubmit {
    border: 0;
    background: #666;
    padding: 10px 15px;
    font-size: 20px;
    color: #fff
}

fieldset.change-password {
    padding: 0;
    margin-bottom: 0
}

fieldset.change-password label {
    display: none
}

fieldset.change-password input.formText {
    padding: 0 20px;
    height: 55px;
    font-size: 22px;
    background: transparent;
    color: #333333;
    border: 2px solid #D9D9D9;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}


fieldset.change-password button {
    width: 100%
}


fieldset.date-select {
    margin-bottom: 30px
}

fieldset.date-select label {
    display: none
}

/* -- -- */
#login {
    min-width: 100%;
    background: url(../gfx/login-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 50px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 900px;
}

#login .login-logo {
    width: 194px;
    height: 185px;
    background: url(../gfx/login-logo.png) no-repeat;
    background-size: contain;
    margin: 0 auto 5px
}

#login .app-name {
    text-align: center;
    font-size: 40px;
    margin-bottom: 30px;
    font-family: "Innogy medium";
}

#login ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    -webkit-transition: color .25s ease
}

#login :-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
    -moz-transition: color .25s ease
}

#login ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
    -moz-transition: color .25s ease
}

#login :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
    -ms-transition: color .25s ease
}

#login :focus::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#login :focus:-moz-placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#login :focus::-moz-placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#login :focus:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#login fieldset {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    /*color: #fff;*/
    width: 470px;
    left: 50%;
    margin-left: -235px;
    position: absolute;
    z-index: 2;
    padding: 50px 75px 50px
}

#login fieldset label {
    display: none
}

#login fieldset .formItem {
    margin-bottom: 30px
}

#login fieldset .formText {
    padding: 0 20px;
    height: 55px;
    font-size: 22px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}

#login fieldset button.formSubmit {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    display: block;
    margin: 50px auto 20px;
    width: 100%;
    height: 55px;
    font-size: 22px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}

#login fieldset button.formSubmit:hover {
    color: #333;
    background: #fff
}

#login fieldset .register {
    font-size: 22px;
    color: #fff;
    /*color: #333333;*/
    font-family: "Innogy light";
    padding-top: 35px
}

#login fieldset .register p {
    margin-bottom: 5px;
}

#login fieldset .register a {
    color: #fff;
    /*color: #333333;*/
    text-decoration: none;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid #fff;
}

#login fieldset .register a:hover {
    border-bottom-color: #F59B00
}

#login fieldset .forget-pw {
    text-align: right;
    padding-top: 15px
}

#login fieldset .forget-pw a {
    color: #fff;
    text-decoration: none;
    position: relative;
    display: inline-block
}

#login fieldset .forget-pw a:before {
    content: "";
    width: 100%;
    bottom: -5px;
    position: absolute;
    background: #fff;
    height: 1px;
    left: 0;
    pointer-events: none;
    -webkit-transition: bottom 350ms cubic-bezier(0.2, 1, 0.3, 1), color 350ms cubic-bezier(0.2, 1, 0.3, 1);
    -moz-transition: bottom 350ms cubic-bezier(0.2, 1, 0.3, 1), color 350ms cubic-bezier(0.2, 1, 0.3, 1);
    transition: bottom 350ms cubic-bezier(0.2, 1, 0.3, 1), color 350ms cubic-bezier(0.2, 1, 0.3, 1);
}

#login fieldset .forget-pw a:hover {
    color: #fff
}

#login fieldset .forget-pw a:hover:before {
    background: #F59B00;
    bottom: -10px
}

#login fieldset .demo {
    text-align: center;
    padding-top: 40px;
    font-size: 22px;
    cursor: pointer
}

/* -- Registieren -- */
#register-wrap {
    min-width: 100%;
    height: 100vh;
    background: url(../gfx/login-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: end;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 50px 0;
}

#register-wrap .bg {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#register-wrap .bg video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#register-wrap .msg.info {
    margin-bottom: 30px
}

fieldset.register {
    width: 840px;
    position: relative;
    z-index: 2
}

fieldset.register h2 {
    font-weight: normal;
    font-size: 40px;
    font-family: "Innogy light";
}

fieldset.register .form-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 40px;
    color: #fff
}

fieldset.register .form-header .logo {
    width: 78px;
    height: 74px;
    background: url(../gfx/login-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

fieldset.register .form-header .app-name {
    font-size: 33px;
    padding-top: 15px
}

fieldset.register .form-header .logo,
fieldset.register .form-header .app-name {
    float: left
}

fieldset.register .form-content {
    background: #fff;
    padding: 30px 35px;
    position: relative
}

fieldset.register .form-content.meter-status-form .btn-wrap {
    min-height: 55px
}

fieldset.register .form-content h2 {
}

fieldset.register .form-content p {
}

fieldset.register figure {
    margin: 0 -35px
}

fieldset.register .formItem .formText {
    padding: 0 20px;
    height: 55px;
    font-size: 22px;
    background: transparent;
    color: #333;
    border: 2px solid #D9D9D9;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
}

fieldset.register .formItem .formText::placeholder {
    color: #dddddd;
}

fieldset.register .formItem.formCenter .formText {
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
    display: block
}

fieldset.register.forgot .formItem.formCenter .formText {
    max-width: 400px;
}

fieldset.register .formItem label {
    display: none
}

fieldset.register .formSubmit {
    background: #F59B00;
    color: #fff;
    display: block;
    margin: 50px auto 20px;
    height: 55px;
    font-size: 22px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
    width: 240px;
    cursor: pointer;
}

fieldset.register a.btn {
    background: #F59B00;
    color: #fff;
    display: block;
    margin: 50px auto 20px;
    height: 55px;
    font-size: 22px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 27px;
    text-decoration: none;
    text-align: center; /*line-height: 55px; */
    border: 0 !important;
}

fieldset.register a.btn.outline {
    /*background: transparent;*/
    /*color: #333*/
    /*color: #333*/
}

fieldset.register .btn-wrap {
    text-align: center;
    padding-top: 0
}

fieldset.register .btn-wrap a.btn {
    max-width: 240px
}

fieldset.register .btn-wrap a.btn.outline {
    background: transparent
}

fieldset.register .btn-wrap a.skip {
    font-size: 21px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid #000;
    padding-bottom: 5px
}

fieldset.register .connect-wrap {
    text-align: center;
    font-size: 30px;
    padding-top: 20px
}

fieldset.register .connect-wrap img {
    display: block;
    margin: 0 auto 40px;
}

fieldset.register .btn-wrap.align-left {
    text-align: left;
}

fieldset.register .btn-wrap.align-left a.btn {
    display: inline-block;
    min-width: 240px;
    margin-right: 30px
}

fieldset.register .helpbtn-wrap {
    text-align: right;
    padding-top: 20px
}

fieldset.register a.helpme {
    font-size: 21px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid #000;
    padding-bottom: 5px
}

fieldset.register .msg-wrap {
    padding: 0
}

fieldset.register .msg-wrap .msg:before,
fieldset.register .msg-wrap h3 {
    color: #F59B00
}

fieldset.register .msg-wrap button.icon-close {
    background: transparent;
    cursor: pointer;
    font-size: 35px;
    border: 0;
    padding: 1px;
    position: absolute;
    top: 40px;
    right: 40px;
    color: #ccc;
}

fieldset.register .msg-wrap button.icon-close span {
    display: none
}

/* -- Connect Progress -- */

.loading-smartmeter {
    background: rgba(0, 0, 0, 0.05);
    height: 108px;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    display: block;
}

ul.connect-progress {
    padding-left: 0;
    list-style: none;
    font-size: 18px
}

ul.connect-progress li {
    color: #999;
    position: relative;
    margin-bottom: 2px;
}

ul.connect-progress li input {
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px
}

ul.connect-progress li i {
    position: relative;
    top: 4px;
    display: inline-block;
    margin-right: 5px;
}

ul.connect-progress li i::before {
    font-family: "Innogy Icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
}

ul.connect-progress li i::before {
    content: "\4b";
    filter: alpha(opacity=0);
    opacity: 0;
}

ul.connect-progress li.finished,
ul.connect-progress li.progress {
    color: #333
}

ul.connect-progress li.finished i::before,
ul.connect-progress li.progress i::before {
    filter: alpha(opacity=100);
    opacity: 1;
}

ul.connect-progress li.finished i::before {
    content: "\43";
}

ul.connect-progress li.progress i::before {
    content: "\79";
}

/* -- Loading Overlay -- */
.loading-overlay {
    background: white;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999
}

.loading-overlay .loading-box {
    /*color: #fff;*/
    /*color: rgba(255, 255, 255, 0.5);*/
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    text-align: center;
    /*font-family: "Innogy light";*/
}

.loading-overlay .loading-box h1 {
    display: none
}

.loading-overlay .loading-box .innogy-logo {
    /*width: 67px;*/
    width: 120px;
    height: 100px;
    background-size: contain;
    /*background-image: url(../gfx/innogy-logo@2x.png);*/
    background-image: url(../gfx/login-logo.png);
    background-repeat: no-repeat;
    margin: 0 auto 30px;
}

/* -- Overlay für Informationen -- */
.overlay-infos {
    background: rgba(70, 65, 61, 0.6);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999
}

.overlay-infos .overlay-box {
    padding: 30px;
    background: #fff;
    overflow: auto;
    max-height: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.4);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.overlay-infos .overlay-box h4 {
    font-weight: bold;
    margin-bottom: 20px
}

.overlay-infos .overlay-box button.icon-close {
    background: transparent;
    cursor: pointer;
    color: #F59B00;
    font-size: 25px;
    border: 0;
    position: relative;
    top: 0
}

.overlay-infos .overlay-box button.icon-close span {
    display: none
}

.overlay-infos .overlay-box button.icon-close:hover {
    color: #46413D;
}

.overlay-infos .overlay-box ul {
    margin-bottom: 20px
}

.overlay-infos .overlay-box ul li {
    margin-left: 20px
}

.overlay-infos .overlay-box ul li.head {
    font-weight: bold;
    list-style: none;
    margin-left: 0;
    margin-bottom: 15px
}

.overlay-infos button.btn {
    font-size: 21px;
    background: transparent;
    padding: 13px 10px;
    border: 0;
    width: 240px;
    margin: 0 20px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    cursor: pointer
}

.overlay-infos button.outline {
    border: 2px solid #ccc;
    color: #000;
}

.overlay-infos button.orange {
    background: #F59B00;
    color: #fff;
}

#chart-appliance-large {
    padding: 0 30px;
    position: absolute;
    top: 100px;
    bottom: 50px;
    left: 0;
    right: 0
}

#chart-appliance-large svg {
    width: 100% !important;
}

#overlay-logout .overlay-box {
    width: 630px
}

/* -- Overlay Zählerstand -- */
.meter-stat {
}

/* -- Mitteilung -- */
.msg-wrap {
    padding: 40px
}

.msg-wrap.hidden {
    display: none
}

.msg.info {
    background: #F2F2F2;
    padding: 50px 90px;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.msg.info p:last-child {
    margin-bottom: 0
}

.msg.info button.icon-close {
    position: absolute;
    top: 40px;
    right: 40px;
    color: #ccc
}

.msg.info:before {
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 35px;
}

.green .msg.info:before,
.green .msg.info h3 {
    color: #64B42D
}

.orange .msg.info:before,
.orange .msg.info h3 {
    color: #F59B00
}

.magenta .msg.info:before,
.magenta .msg.info h3 {
    color: #E60055
}

.blue .msg.info:before,
.blue .msg.info h3 {
    color: #00AAE1
}

.red .msg.info:before,
.red .msg.info h3 {
    color: #E60055
}

.mint .msg.info:before,
.mint .msg.info h3 {
    color: #009BA5
}

/* -- Footer -- */
#footer {
    padding: 20px 30px;
    background: #ddd;
}

#footer p.copy {
    margin: 0;
    padding: 0;
}

/* -------------------------------
*	Pages
* -----------------*/
.highcharts-container {
    /*  position: inherit !important; */
}

#chart-appliance-large .highcharts-tooltip {
    z-index: 9998;
    left: 50% !important;
    top: 50% !important;
    margin-top: -15px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#chart-appliance-large .highcharts-tooltip > span {
    position: static !important;
    white-space: normal !important
}

#chart-appliance-large .highcharts-tooltip .ico {
    font-size: 2.4vw;
    line-height: 2.4vw;
    margin: 0 auto 10px
}

#chart-appliance-large .highcharts-tooltip h3 {
    font-size: 2.5vw;
    line-height: 2.5vw;
    padding: 4px 0;
    margin: 0
}

#chart-appliance-large .highcharts-tooltip h4 {
    font-size: 2.0vw;
    line-height: 2.0vw;
    margin-bottom: 0
}

#chart-appliance-large .highcharts-tracker .label {
    font-size: 18px;
    font-family: "Innogy light", sans-serif;
}

#chart-appliances-details .highcharts-tracker .label {
    font-size: 18px;
    font-family: "Innogy light", sans-serif;
}

#chart-appliances-details .highcharts-tooltip {
    z-index: 9998;
    left: 50% !important;
    top: 50% !important;
    margin-top: -15px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#chart-appliances-details .highcharts-tooltip > span {
    position: static !important;
    white-space: normal !important
}

#chart-appliances-details .highcharts-tooltip div {
    font-family: "Innogy light", sans-serif;
}

#chart-appliances-details .highcharts-tooltip h3 {
    padding: 4px 0;
    margin: 0;
    font-size: 40px;
    font-weight: normal
}

#chart-appliances-details .highcharts-tooltip h4 {
    margin-bottom: 0;
    font-size: 40px;
    font-weight: normal
}

#chart-appliances-details .highcharts-tooltip hr {
    margin: 10px 0
}

/* -- Mein Haushalt Wizard -- */
.wizard-steps {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    padding: 0 40px;
    margin-bottom: 50px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.wizard-steps:before {
    content: "";
    height: 1px;
    background: #DBDBDB;
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 1
}

.wizard-steps .step {
    width: 35px;
    height: 35px;
    border: 2px solid #ccc;
    background: #EBEBEB;
    position: relative;
    z-index: 2
}

.wizard-steps .step.active:before {
    content: "";
    width: 10px;
    height: 10px;
    background: #F59B00;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.wizard-content {
}

.wizard-content h2 {
    margin-bottom: 30px !important
}

.wizard-content h3 {
    font-weight: normal
}

.wizard-content .eigenschaft {
    margin: 0 40px 40px
}

.wizard-btns {
    text-align: center;
}

.wizard-btns button {
    font-size: 21px;
    background: transparent;
    padding: 13px 10px;
    border: 0;
    width: 240px;
    margin: 0 20px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
}

.wizard-btns button.outline {
    border: 2px solid #ccc;
    color: #000
}

.wizard-btns button.orange {
    background: #F59B00;
    color: #fff
}

/* -- Startseite -- */
.front {
}

#login + .bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

#login + .bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    #login + .bg video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #login + .bg video {
        width: auto;
        height: 100%;
    }
}

/* -- Kontakt -- */
.contact {
}

a.btn {
    font-size: 21px;
    background: transparent;
    padding: 13px 10px;
    border: 0;
    width: 240px;
    text-align: center;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    display: inline-block;
    text-decoration: none;
}

a.btn.outline {
    border: 2px solid #ccc;
    color: #000
}

a.btn.orange {
    background: #F59B00;
    color: #fff
}

/* -- Wiederverwendabr-- */
.fltrt {
    float: right;
}

.fltlft {
    float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}