@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/fnt/oswald-lighter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/fnt/oswald-lighter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fnt/oswald-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {    
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fnt/oswald-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-size: 90%;
    font-family: 'Oswald', sans-serif;
    color: white;
    background-color: black;
    box-sizing: border-box;
    visibility: hidden;
    overflow-y: hidden;
}

div.container {
    min-width: 320px;
    max-width: 1000px;
    margin: auto;
}

.header {
    position: relative;
    width: 100%;
    /*height: 5%;*/
    background-color: #000000;
    padding: 0.2em 0.3em 0.2em 0.3em;
    font-size: 1.2em;
    font-family: "Oswald";
    font-weight: lighter;
    box-sizing: border-box;
    height: 2em;
}

    .header div {
        display: inline-block;
        text-align: left;
        vertical-align: top;
    }

img#warning {
    position: absolute;
    width: 36px;
    top: 0.2em;
    left: 0.3em;
    visibility: hidden;
    z-index: 10;
}

div#mainview {
}

.header div:nth-child(1) {
    width: 30px;
}

.header div:nth-child(2){
    max-width: calc(100% - 200px);
    overflow: hidden;
    white-space: nowrap;
}

.subscreen div:nth-child(2) {
    max-width: calc(100% - 120px);
}


.header div:nth-child(3) {
    width: 165px;
    cursor: pointer;
    text-align: right;
    float: right;
    overflow: hidden;
}

div.subpage div.header div:nth-child(3){
    width: 80px;
}

.header div img {
    width: 25px;
}

.header div:nth-child(3) img {
    margin-left: 8px;
}

.header div img.carousel {
    vertical-align: top;
    margin: 2px 4px 0 0;
    height: 23px;
}

.header div img.siteSelect {
    vertical-align: middle;
    margin: 0 0 5px 0;
    height: 23px;
}

#name {
    width: 25%;
    display: inline-block;
    box-sizing: border-box;
}

#chart {
    width: 100%;
    position: relative;
    height: 200px;
    background-color: #202020;
}

.MAleft {
    display: inline-block;
    width: 4.3em;
    float: left;
}

.MAright {
    display: inline-block;
    width: 4.3em;
    float: right;
}

#graphMA {
    cursor: pointer;
}

@media screen and (max-height:600px) {
    #chart {
        height: 150px;
    }
}
    #followLeft, #followRight {
        display: inline-block;
        width: 40%;
    }

        #followLeft table {
            width: 100%;
        }

    #MAslopes td {
        width: 14%;
        text-align: center;
        font-size: 0.7em;
    }

    #followInstr {
        display: inline-block;
        width: 19%;
        text-align: center;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }

    #switches {
        display: inline-block;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
        border-spacing: 0;
        vertical-align: top;
    }

        #switches td {
            padding: 0 2em 0 0;
        }

    #scaling {
        float: right;
        margin-right: 2em;
        border-spacing: 0.5em 0;
    }

        #scaling td {
            background-color: #707070;
            border-radius: 0.3em;
            font-size: 0.8em;
            padding-left: 0.6em;
            padding-right: 0.6em;
            cursor: default;
        }

            #scaling td:hover {
                background-color: #eeeeee;
                color: black;
            }

            #scaling td.chosen {
                background-color: #a0f0a0;
                color: black;
            }

    #averages {
        width: 100%;
        background-color: #000000;
        box-sizing: border-box;
        height: 100%;
    }

        #averages ul li {
            font-size: 70%;
        }

            #averages ul li.ui-state-active {
                font-size: 70%;
                border: 1px solid #B0B0B0;
                background: #707070;
            }

    #error_dlg div {
        text-align: center;
        padding: 2px;
    }

    #error_title, #error_text {
        font-weight: bold;
    }

    #error_img {
        margin-left: auto;
        margin-right: auto;
        width: 30%;
        display: inline-block;
    }

    #error_info {
        width: 88%;
        display: inline-block;
        vertical-align: top;
    }

    #nowPrice {
        padding: 0 0.5em 0 0.5em;
    }

    #costNow, #saunaCostToday, #saunaCostTomorrow {
        text-align: center;
        font-size: 2.6em;
        line-height: 1.15em;
        font-family: "Oswald";
    }

        #costNow img {
            height: 0.9em;
            vertical-align: middle;
            margin: 0;
        }

            #costNow img:hover {
                cursor: pointer;
            }

            #costNow img.noshow {
                visibility: hidden;
            }

            #costNow img.stage1 {
                background-color: yellow;
            }

            #costNow img.stage2 {
                background-color: #FFAA00;
                animation: blinker 2s linear infinite;
            }

            #costNow img.stage3 {
                background-color: #FF2222;
                animation: blinker 1s linear infinite;
            }

            #costNow img#eco_info {
                margin-left: 16px;
                height: 0.7em;
            }
            #costNow img.good, .co2_sums.good {
                background-color: #009900;
            }
            #costNow img.worse, .co2_sums.worse {
                background-color: #EE9000;
            }
            #costNow img.bad, .co2_sums.bad {
                background-color: #AA1000;
            }
            #costNow img.olddata {
                background-color: #888888;
            }
.productionBlock .good, div.charging_session_co2.good, tr#charging_history_emission_total .good {
    color: #00FF00;
}
.productionBlock .worse, div.charging_session_co2.worse, tr#charging_history_emission_total .worse {
    color: #FFB000;
}
.productionBlock .bad, div.charging_session_co2.bad, tr#charging_history_emission_total .bad {
    color: #FF1000;
}
#productionStamp {
    font-size: 0.9em;
    font-weight: lighter;
    text-align: right;
    padding: 0.5em;
}

div#schedule_override p {
    margin: 0.3em 0 0.3em 0;
}
p#schedule_override_time span {
    font-size: 2em;
    margin: 0 0.2em 0 0.2em;
}
#overrideSchedule {
    border: 1px solid #999999;
    margin: 0.8em 0 0.8em 0;
}
#overrideSchedule .ui-slider-range {
    background: #26b3f7;
    border: 1px solid white;
}
#overrideSchedule .ui-slider-handle {
    border: 2px solid white;
}
div#override_setplanClocks {
    width: 30%;
    max-width: 300px;
    margin: 0.5em auto 0 auto;
}
div#schedule_restore img {
    height: 2em;
}
@media screen and (max-width:800px) {
    div#override_setplanClocks {
        width: 60%;
    }
}

    @keyframes blinker {
        50% {
            opacity: 0.5;
        }
    }

    div.priceSide {
        display: inline-block;
    }

    .subtitle {
        text-align: center;
        font-size: 0.8em;
        font-family: "Oswald";
        font-weight: lighter;
        color: #EEEEEE;
    }

    .subPrice {
        font-size: 1.5em;
        color: #DDDDDD;
    }

    #detailPrices {
        border: none;
        padding-top: 0.4em;
        padding-bottom: 0.2em;
        line-height: 1.4em;
        width: 100%;
    }

        #detailPrices td {
            border: none;
            text-align: center;
            font-family: "Oswald";
            font-weight: lighter;
            color: #FAFAFA;
            width: 33.33%;
        }
        #detailPrices td:nth-child(4) {
            display: none;
        }

        #detailPrices.ownProduction td {
            width: 25%;
        }
        #detailPrices.ownProduction td:nth-child(4){
            display: table-cell;
            border-left: 1px solid #888888;
        }
            #detailPrices.ownProduction div#sellPrice {
                font-weight: normal;
            }

    .ui-tabs .ui-tabs-panel {
        padding: 0.3em 0.2em 0 0.2em;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        padding: 0.5em 0.7em;
    }

    .ui-tabs-nav {
        font-family: "Oswald";
        font-size: 1.3em;
        line-height: 0.5em;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .averages {
        margin: 0 0 0.2em 0;
        padding: 0;
        background-color: #AAAAAA;
        border-radius: 0.4em;
    }

        .averages div {
            display: flex;
        }

    div#measured_period {
        background-color: #707070;
        padding: 0 0 0.2em 0.6em;
    }

    .averages div div {
        position: relative;
        vertical-align: middle;
        padding-left: 0.1em;
        box-sizing: border-box;
        display: table;
    }

        .averages div div.avg_title {
            padding-left: 0.4em;
        }

        .averages div div:nth-child(2) {
            padding-left: 0.1em;
        }

        .averages div div:nth-child(3) {
            padding-left: 0.2em;
        }

    div#today_all, div#today_day, div#today_night, div#today_evening, div#tomorrow_night, div#tomorrow_all, div.measured_device {
        cursor: pointer;
    }

    .openable_hours {
        cursor: pointer;
    }

    #avg_panel_container div#consumption_title {
        display: none;
    }

    div#measured_devices_block {
        padding-top: 0.3em;
    }

    div.measured_device {
        padding-top: 0.3em;
    }

        div.measured_device:nth-child(1),, div#measured_all {
            padding-top: 0.3em;
        }

    div.measured_co2, div.measured_sell {
        border-top: 1px solid #AAAAAA;
    }

    div#measured_devices {
        padding: 0.2em 0 0 0.6em;
        margin-top: -0.3em;
        font-weight: lighter;
        cursor: pointer;
        font-size: 0.9em;
    }

        div#measured_devices img {
            height: 0.8em;
            vertical-align: bottom;
            margin: 0 0.4em 0.1em 0;
        }

    #avg_panel_container {
        background-color: #707070;
    }

        #avg_panel_container div.section {
            display: block;
            font-family: "Oswald";
            font-weight: lighter;
            font-size: 0.8em;
            text-align: center;
            background-color: #707070;
            margin: 0 0 2px 0;
        }

    .avg_panel div.hourblock {
        font-family: "Oswald";
        font-size: 0.85em;
        display: block;
        border-radius: 0 0 0.4em 0.4em;
        background-color: #333333;
        padding: 0 0.5em 0.2em 1em;
        margin-bottom: 0.5em;
        display: none;
    }

    .avg_panel div.sumblock {
        font-family: "Oswald";
        font-size: 0.85em;
        display: block;
        border-radius: 0.4em 0.4em 0 0;
        background-color: #505050;
        padding: 0 0.5em 0.2em 1em;
        display: none;
    }

        .avg_panel div.hourblock div.hourlist, .avg_panel div.sumblock div.sumlist, .avg_panel div.hourblock div.quarterlist {
            display: flex;
        }

    .avg_panel div.hourblock div.ongoing {
        border-top: 1px solid #FFFFAA;
        border-bottom: 1px solid #FFFFAA;
        background-color: #444444;
    }

.avg_panel div.hourblock div.hourlist div, .avg_panel div.sumblock div.sumlist div, .avg_panel div.hourblock div.quarterlist div {
    flex: 20%;
    text-align: right;
    white-space: nowrap;
}

    .avg_panel div.hourblock div.hourlist div:nth-child(1), .avg_panel div.sumblock div.sumlist div:nth-child(1), .avg_panel div.hourblock div.quarterlist div:nth-child(1) {
        flex: 17%;
        text-align: left;
    }

.avg_panel div.hourblock div.quarterlist {
    font-size: 0.85em;
    font-weight: lighter;
}

.avg_panel div.hourblock div.hourlist {
    border-top: 1px dashed #888888;
}
.avg_panel div.hourblock div.hourlist div img {
    height: 0.6em;
    margin-right: 0.3em;
}
.avg_panel div.hourblock div.hourlist div.measured_qopn {
    cursor: pointer;
}
.avg_panel div.hourblock div.selllist {
    font-size: 0.85em;
    border-top: none;
    line-height: 1.2em;
}
.avg_panel div.hourblock div.selllist div:nth-child(1) {
    font-weight: lighter;
    text-align: right;
}

.avg_panel div.hourblock div.selllist {
    font-size: 0.85em;
}

        .avg_panel div.sumblock div.measured {
            display: flex;
            font-weight: normal;
        }

        .avg_panel div.sumblock div.measured div:nth-child(1) {
            flex: 80%;
            font-weight: lighter;
        }

    .avg_panel div.hourtitle, .avg_panel div.sumtitle {
        font-weight: lighter;
    }

    .avg_panel div.hourblock div.hourlist div.hourblock_transfer {
        color: #DDDDDD;
    }

    .avg_panel div.hourblock div.hourlist div.hourblock_tax {
        color: #DDDDDD;
    }

    .avg_panel div.hourblock div.hourlist div:nth-child(5), .avg_panel div.sumblock div.sumlist div:nth-child(5) {
        flex: 27%;
    }

    .avg_panel div.hourblock div.hourtitle div:nth-child(3) {
        color: white;
    }

    .avg_panel div.hourblock div.hourtitle div:nth-child(4) {
        color: white;
    }

    .avg_title {
        flex: 70%;
        font-family: Oswald;
        line-height: 1.1em;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
    }

    div.measured_cost div.avg_title {
        flex: 35%;
    }

    div.measured_cost div:nth-child(1) {
        flex: 1%;
        border-radius: 0.4em 0 0 0.4em;
    }

div.measured_cost div.measured_sell div:nth-child(1) {
    flex: 1%;
    border-radius: 0 0 0 0.4em;
}

div.measured_cost div.measure_tag.co2_included {
    flex: 1%;
    border-radius: 0.4em 0 0 0;
}

div.measured_cost div.measured_sell div.sell_tag.co2_included  {
    flex: 1%;
    border-radius: 0 0 0 0;
}

    div.measured_cost div.measured_co2 div:nth-child(1) {
        flex: 1%;
        border-radius: 0 0 0 0.4em;
    }


    div.measured_cost div div:nth-child(2) {
        padding-left: 0.3em;
    }

    .avg_title span.asavg {
        font-size: 0.8em;
        display: block;
        font-weight: lighter;
    }

    .avg_price {
        text-align: right;
        padding-right: 0.3em;
        font-size: 1.6em;
        font-family: "Oswald";
        flex-basis: 32%;
        flex-grow: 0;
        flex-shrink: 0;
        border-radius: 0 0.2em 0.2em 0;
        white-space: nowrap;
    }

.measured_sell .avg_title {
    font-weight: lighter;
}

    .measured_sell .avg_price {
    font-size: 0.9em;
    line-height: 1.1em;
    color: #FFFFFF;
    padding: 0.2em 0.4em 0.2em 0;
}

    div.co2_included {
        border-radius: 0 0.2em 0 0;
    }

div.measured_sell div {
    border-radius: 0 0 0.2em 0;
}

div.measured_sell div.co2_included {
    border-radius: 0;
}

    div.co2_sums {
        border-radius: 0 0 0.2em 0;
    }

    .avg_price_divider {
        display: block;
    }

    .avg_price span, .co2 span {
        font-weight: lighter;
    }

    .co2 {
        font-size: 0.9em;
        line-height: 1.1em;
        padding-top: 0.2em;
    }

        .co2.co2_kg {
            font-size: 1.1em;
            padding-right: 0.3em;
        }

        span.sell_value {
            font-size: 1.1em;
            margin-right: 0.2em;
        }

    @media screen and (max-width:350px) {
        .avg_title {
            font-size: 0.9em;
        }

        .avg_price {
            font-size: 1.4em;
        }

        .co2 {
            font-size: 1.3em;
            line-height: 0.7em;
            padding-top: 0;
        }

            .co2 span {
                font-size: 0.7em;
            }

            .co2.co2_kg {
                font-size: 0.7em;
            }
    }

    #today, #month, #year, #measured {
        background-color: #707070;
        padding: 0.3em 0.2em 0 0.2em;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-color: #707070;
    }

    .measured_cost {
        background-color: #505050;
    }

    .averages div#today_euros {
        padding-left: 0.5em;
    }

    span.measured_value {
        font-weight: normal;
        padding-right: 0.2em;
    }

    .high {
        color: #FF2020;
    }

    .higher {
        color: #FF9000;
    }

    .moderate {
        color: #88CCFF;
    }

    .low {
        color: #00FF00;
    }

.sell {
    color: #FFFF00;
}

    .bg-high {
        background-color: #FF0000;
    }

    .bg-higher {
        background-color: #FF9000;
    }

    .bg-moderate {
        background-color: #4488BB;
    }

    .bg-low {
        background-color: #00AA00;
    }

    .bg-off {
        background-color: #888855;
    }

    .tx-high {
        color: #FF9090;
    }

    .tx-higher {
        color: #FFB030;
    }

    .tx-moderate {
        color: #88CCFF;
    }

    .tx-low {
        color: #00AA00;
    }

    #colordata {
        display: none;
    }

    #tabs {
        display: inline-block;
    }

    #browse {
        display: inline-block;
        float: right;
        vertical-align: middle;
    }

    div#browse div {
        display: inline-block;
        padding: 0;
        margin-left: 8px;
        width: 1.7em;
    }
    div#browse div:nth-child(2){
        margin-left: 0.8em;
    }
        /*
        div#browse div {
            display: inline-block;
            color: rgb(238,238,238);
            border: 1px solid #BBBBBB;
            border-radius: 5px;
            background-color: rgb(34,34,34);
            padding: 0.3em;
            margin-top: 3px;
            margin-left: 0.2em;
            margin-right: 5px;
            width: 1em;
        }
                */
        div#browse div:hover {
            cursor: pointer;
        }

        div#browse div.disabled {
            cursor: default;
            opacity: 0.5;
        }

        div#browse div img {
            width: 20px;
            margin-top: 3px;
        }

    div#charging_panel span.dimmed {
        font-weight: lighter;
        color: #AAAA44;
    }

    div#charging_history img {
        height: 1em;
    }

    div.charging_history_sum img {
        height: 0.7em;
        vertical-align: top;
    }

    #charging_history_co2, #charging_history_km {
        font-size: 1.1em;
        margin-left: 0.5em;
    }

    #charging_history_co2_kg, #charging_history_co2_km {
        font-weight: normal;
    }

    div#charging_history_savings {
        background-color: #007700;
        font-family: 'Oswald', sans-serif;
        padding: 2px 0.1em 2px 0.5em;
        border-bottom: 1px solid white;
        white-space: nowrap;
    }

        div#charging_history_savings img {
            margin-right: 0.2em;
            height: 1.5em;
        }

    span#charging_history_savings_sum {
        padding-left: 0.3em;
        font-size: 1.3em;
    }

    @media screen and (max-width:350px) {
        div#charging_history_savings {
            font-size: 0.9em;
        }

        span#charging_history_savings_sum {
            font-size: 1.2em;
        }
    }

    /* Loading wait animation */

    .loading_spinner {
        display: inline-block;
        margin: auto auto auto auto;
        width: 80px;
        height: 80px;
        padding-top: calc(50vh - 40px);
        padding-left: calc(50% - 40px);
    }

        .loading_spinner:after {
            content: " ";
            display: block;
            width: 64px;
            height: 64px;
            margin: 8px;
            border-radius: 50%;
            border: 6px solid #fff;
            border-color: #fff transparent #fff transparent;
            animation: loading_spinner 1.2s linear infinite;
        }

    @keyframes loading_spinner {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .loading_spinner.hidden, #dim_background.hidden {
        display: none;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 998;
        opacity: 1;
        transition: all 2s;
    }

    .offline {
        color: red;
    }

    .initially_hidden {
        display: none;
    }

    .initially_invisible {
        visibility: hidden;
    }

    .settings, .connect_panel {
        font-family: 'Oswald', sans-serif;
    }

        .settings div.connect_panel {
            box-sizing: border-box;
            padding: 0.5em 0.5em 0 0.5em;
        }

            .settings div.connect_panel div.connect_info {
                padding: 0 0.5em 0 0.5em;
            }

            .settings div.connect_panel div.connect_device {
                padding: 0 0.5em 0 0.5em;
            }

                .settings div.connect_panel div.connect_device p.portal_link {
                    text-align: center;
                }

                .settings div.connect_panel div.connect_device a {
                    text-align: center;
                    font-weight: normal;
                    color: #3abdff;
                }

            .settings div.connect_panel table.searchDevice tr td {
                text-align: center;
            }

                .settings div.connect_panel table.searchDevice tr td input[type=text] {
                    width: 11em;
                    font-family: 'Oswald', sans-serif;
                    font-weight: normal;
                }

                .settings div.connect_panel table.searchDevice tr td button {
                    margin-top: 1.1em;
                    font-size: 1.2em;
                    font-family: 'Oswald', sans-serif;
                    background-color: #3abdff;
                    color: white;
                    border-radius: 5px;
                    padding: 0 0.5em 0 0.5em;
                }

                    .settings div.connect_panel table.searchDevice tr td button:hover {
                        cursor: pointer;
                    }

                    .settings div.connect_panel table.searchDevice tr td button:disabled {
                        color: #BBBBBB;
                        background-color: #8080FF;
                        cursor: default;
                    }

        .settings div table {
            border-spacing: 0;
            width: 100%;
        }

            .settings div table tr td {
                white-space: nowrap;
                padding: 0.2em 0.5em 0 0.5em;
                height: 2.4em;
                vertical-align: middle;
            }

                .settings div table tr td:nth-child(1) {
                    padding: 0 0 0 0.5em;
                }
                .settings div table tr td.toppad {
                    padding: 0.7em 0 0 0.5em;
                }


            .settings div table tr.smartChargingEnabled td:nth-child(1), .settings div table tr.directHeatingEnabled td:nth-child(1) {
                padding: 0.2em 0 0.2em 0.5em;
            }

            .settings div table tr td:nth-child(2) {
                padding: 0 0.5em 0 0;
                font-weight: lighter;
                text-align: right;
            }
                .settings div table tr td:nth-child(2) .fixeddata {
                    font-weight: normal;
                }

            .settings div table tr td.additional {
                white-space: normal;
                text-align: right;
                padding: 0 0.5em 0.1em 0.5em;
                height: auto;
                vertical-align: top;
            }

            .settings div table tr td input[type=text] {
                width: 5em;
                border-radius: 5px;
                margin-right: 5px;
            }

            .settings div table tr td input[type=radio], #confirm_device_add_slots input[type=radio] {
                margin-right: 15px;
                transform: scale(2,2);
            }

            .settings div table tr td.hour input {
                width: 3em;
                border-radius: 5px;
                margin-right: 5px;
            }

            .settings div table tr td.kw input {
                width: 4em;
                border-radius: 5px;
                margin-right: 5px;
            }

            .settings div table tr td.co2_limit input {
                width: 4em;
                border-radius: 5px;
                margin-right: 5px;
            }

            .settings div table tr td select {
                width: 100%;
                border-radius: 5px;
                text-align: right;
                margin-right: 5px;
                font-family: 'Oswald', sans-serif;
            }

        .settings div.connect_panel table tr td select {
            width: auto;
        }

        .settings div table tr td select:disabled, .settings div table tr td div.lcs_switch.lcs_disabled, .settings div table tr td span.ui-state-disabled {
            opacity: 1;
        }

        .settings div table tr td select:disabled {
            background-color: white;
        }

        .settings div table tr td input.config_name {
            width: 12em;
            color: white;
            background-color: black;
            font-family: 'Oswald', sans-serif;
            font-weight: normal;
            text-align: right;
            padding-right: 0.3em;
            padding-left: 0.3em;
        }

        .settings div table tr td input#name {
            width: 7em;
        }

        .settings div table tr td input#annualKWh {
            width: 3em;
        }

        .settings div table tr td input.short {
            width: 1.5em;
        }

        .settings div table tr.site td, .settings div table tr.consumption td {
            vertical-align: top;
            padding-top: 0.5em;
        }

            .settings div table tr.site td div {
                padding: 0.5em 0.2em 0.5em 0;
                font-weight: normal;
            }

        .settings div table tr td.user_control {
            text-align: right;
            margin-right: 0.3em;
        }

            .settings div table tr td.user_control div, .settings div table tr td.site_control div {
                height: 4em;
                display: inline;
                padding: 0.3em 0.3em 0.1em 0.5em;
                border: 2px solid #BBBBBB;
                border-radius: 0.2em;
                background-color: #441111;
            }

        .settings div table tr td.datahub_control div {
            height: 4em;
            display: inline;
            padding: 0.3em 0.4em 0.1em 0.4em;
            border: 2px solid #BBBBBB;
            border-radius: 0.2em;
            background-color: #441111;
        }

        .settings div table tr td.user_control img, .settings div table tr td.datahub_control img, .settings div table tr td.site_control img {
            height: 1em;
        }

        .settings div table tr td.user_control div:hover, .settings div table tr td.site_control div:hover {
            background-color: #884444;
            cursor: pointer;
        }

        .settings .customSettings tr td {
            background-color: #444433;
        }

    .smaller {
        font-size: 0.9em;
        font-weight: lighter;
    }

    .settings div table tr td.legal {
        padding: 0.5em 0.5em 0 0.5em;
        white-space: normal;
    }

    div.additional div {
        padding-right: 1em;
        text-align: right;
    }

    p.hint {
        font-size: 0.95em;
        color: #3abdff;
        padding-left: 2em;
        padding-right: 2em;
    }

        p.hint a {
            color: #3abdff;
        }

    .ui-accordion .ui-accordion-content {
        padding: 0;
    }

    .filler {
        margin: 3px;
    }

    #messagebox {
        position: absolute;
        top: 2.5em;
        background-color: white;
        color: black;
        border: 2px solid #8080FF;
        border-radius: 5px;
        text-align: center;
        padding: 0.3em;
        margin-left: 0.3em;
        width: 90%;
        z-index: 10;
    }

    .charging_data {
        font-family: 'Oswald', sans-serif;
        font-size: 1em;
    }

    #charging_panel div.title {
        background-color: #0972a5;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #26b3f7;
        color: white;
        font-family: 'Oswald', sans-serif;
        padding: 0.5em;
    }

    #charging_panel div.info {
        font-family: 'Oswald', sans-serif;
        padding: 0.5em 0 1em 0.5em;
    }

    .charging_data table, #charging_state {
        width: 100%;
        border-spacing: 0;
    }

    .charging_state_offline div {
        font-family: 'Oswald', sans-serif;
        font-size: 1.15em;
        font-weight: normal;
        padding: 0.2em 0.5em 0 0.5em;
        color: yellow;
    }

    .charging_state_offline img {
        height: 3.2em;
    }

    .charging_data table tr td, #charging_state tr th, #charging_state tr td {
        width: 30%;
        padding-left: 0.5em;
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 0.85em;
        text-align: left;
        line-height: 1.3em;
        vertical-align: top;
        white-space: nowrap;
    }

    #charging_state tr th, #charging_state tr td {
        width: 30%;
        padding-left: 0.5em;
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 0.85em;
        text-align: left;
        line-height: 1.4em;
        vertical-align: top;
        white-space: nowrap;
    }

    #charging_state tr th, #charging_state tr td {
        text-align: center;
    }

    .charging_data table tr:nth-child(2) td {
        border-bottom: 1px solid #808080;
    }

    .charging_data table tr td span {
        font-size: 1.0em;
        font-weight: normal;
    }

    #charging_state tr td span {
        font-size: 1.1em;
        font-weight: normal;
    }

    #charging_state_unknown img {
        height: 1.2em;
        display: inline;
        vertical-align: middle;
        margin-right: 1em;
    }
#charging_state_unknown span {
    color: #FFA080;
}

        .charging_data table tr td span.units, #charging_state tr td span.units {
            font-size: 0.85em;
            font-weight: lighter;
        }

    .charging_data table tr:nth-child(1) td:nth-child(3) {
        vertical-align: middle;
    }

    .charging_data table tr td:nth-child(3) {
        text-align: right;
        font-size: 1.5em;
        line-height: 0.9em;
        padding-right: 0.5em;
        vertical-align: top;
    }

        .charging_data table tr td:nth-child(3) span.unitcost {
            font-size: 0.6em;
            font-weight: lighter;
        }

    #charging_state tr td:nth-child(2) span.unitcost {
        font-size: 0.5em;
        font-weight: lighter;
    }

    div.charging_session_co2 {
        padding-top: 0.3em;
    }

        div.charging_session_co2 span {
            font-weight: bold;
        }

    #charging_state tr th, #charging_state tr td {
        padding: 0;
    }

    #charging_state tr:nth-child(1) th {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    #charging_state tr:nth-child(3) td {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    #charging_state tr:nth-child(2) td:nth-child(1), #charging_state tr:nth-child(2) td:nth-child(2) {
        font-size: 2em;
        line-height: 0.9em;
    }

        #charging_state tr:nth-child(2) td:nth-child(1) span.units {
            font-size: 0.5em;
            font-weight: lighter;
        }

    #charging_state tr:nth-child(2) td:nth-child(3) span.unitcost {
        font-size: 0.5em;
        font-weight: lighter;
    }

    .scrollable_panel {
        overflow-y: auto;
        width: 100%;
    }

    #smartChargingLevel {
        padding-right: 0.5em;
    }

    div#directHeatingLevel {
        padding: 0.5em 0 0.5em 0;
    }

    .settings div table tr td.noheight {
        height: auto;
    }

    .settings div table tr td.outer {
        padding: 0;
    }

    #smartChargingCheapestSettings {
        padding-right: 0.5em;
    }

    .hourSpinnerPanel {
        background-color: #444466;
    }

    .settings div table.clockTimes tr td {
        height: 90px;
        width: 20%;
        font-weight: lighter;
        font-size: 1em;
        white-space: nowrap;
    }

        .settings div table.clockTimes tr td:nth-child(1) {
            text-align: right;
        }

        .settings div table.clockTimes tr td.clockbox {
            width: 60%;
            padding-right: 10px;
            padding-left: 10px;
        }

        .settings div table.clockTimes tr td:nth-child(3) {
            text-align: left;
            padding-left: 0;
        }

    div.clockbox div {
        padding: 0;
        margin: 0;
        width: 100%;
    }

        div.clockbox div canvas {
            width: 100%;
            margin: 0;
            padding: 0;
            display: inline-block;
        }

    .tabblock {
        display: inline-block;
        box-sizing: border-box;
        border-radius: 3px;
        margin: 3px 0 5px 2px;
        width: 48%;
        background-color: #444466;
        border: 1px solid #26b3f7;
        color: white;
        font-family: 'Oswald', sans-serif;
        padding: 0 0.5em 0 0.5em;
    }

    div#charging_setplan table {
        position: relative;
        width: 100%;
        border-spacing: 0;
    }

        div#charging_setplan table tr th {
            font-family: 'Oswald', sans-serif;
            font-size: 1em;
            font-weight: normal;
            padding: 0 0.5em 0 0.5em;
            background-color: #777;
            text-align: center;
        }

        div#charging_setplan table tr td {
            font-family: 'Oswald', sans-serif;
            font-size: 0.9em;
            font-weight: lighter;
            width: 65%;
            padding: 0 0.5em 0 0.5em;
        }

            div#charging_setplan table tr td:nth-child(2) {
                width: 35%;
            }

        div#charging_setplan table tr:last-child td {
            padding-bottom: 0.8em;
        }

        div#charging_setplan table tr#charging_setplan_settings td {
            border-top: 1px solid #888888;
            padding: 0.5em 0.5em 0.8em 0.5em;
            width: 25%;
            line-height: 1.2em;
            text-align: right;
        }

            div#charging_setplan table tr#charging_setplan_settings td.hour {
                text-align: left;
            }

                div#charging_setplan table tr#charging_setplan_settings td.hour input {
                    width: 1.5em;
                    border-radius: 5px;
                }

        div#charging_setplan table tr td.timing_clocks {
            width: 30%;
            padding: 0;
            border-left: 1px solid #888888;
        }

        div#charging_setplan table tr td span#charging_setplan_nowbattery {
            float: right;
            font-size: 2em;
        }


    table#charging_history_summary {
        width: 100%;
        border-spacing: 0;
    }

        table#charging_history_summary tr td {
            font-family: 'Oswald', sans-serif;
            font-size: 0.9em;
            font-weight: lighter;
            width: 33%;
            border-bottom: 1px solid #EEE;
            border-left: 1px solid #EEE;
            padding: 0 0.5em 0 0.5em;
            background-color: #222;
        }

            table#charging_history_summary tr td:nth-child(1) {
                border-left: none;
            }

            table#charging_history_summary tr td div.summary {
                width: 100%;
                text-align: right;
                font-size: 1.5em;
                line-height: 1.5em;
                font-weight: normal;
            }

                table#charging_history_summary tr td div.summary span.units {
                    font-size: 0.8em;
                    font-weight: lighter;
                }

    @media screen and (max-width:350px) {
        table#charging_history_summary tr td {
            font-size: 0.8em;
        }

            table#charging_history_summary tr td div.summary span.units {
                font-size: 0.7em;
            }
    }

    #charging_history_nums {
        font-family: 'Oswald', sans-serif;
        font-size: 0.9em;
        font-weight: normal;
        padding: 0.2em 0.5em 0.2em 0.5em;
        background-color: #444466;
        border-bottom: 1px solid #EEE;
    }

        #charging_history_nums img {
            float: right;
            height: 1.3em;
            cursor: pointer;
        }

    .unitblock {
        display: inline-block;
        width: 1.2em;
        text-align: left;
        padding-left: 0.3em;
    }

    .settings div table tr td.hour input#saunaHeatingTime, .settings div table tr td.hour input#saunaKW {
        width: 4.5em;
    }

    .settings div table tr td.hour input#saunaSessionMaxPrice {
        width: 4.5em;
    }

    .settings div table tr td.hour input#waterHeaterKW {
        width: 3.5em;
    }

    .settings div table tr td.hour input#storingHeatingKW, .settings div table tr td.hour input#directHeatingKW {
        width: 4.5em;
    }

    .settings div table tr td.hour input#chargingBatterySize {
        width: 4.5em;
    }

    .settings div table tr td.hour input#chargingAverageKW {
        width: 4.5em;
    }

    .settings div table tr td.hour input#carConsumption {
        width: 4.5em;
    }

    .control_neutral {
        background-color: white;
    }

    .control_suggest {
        background-color: #70FF70;
    }

    .control_deny {
        background-color: #FF7070;
    }

    #sauna_panel, #devices_panel {
        font-family: 'Oswald', sans-serif;
    }

        #sauna_panel div.saunaBlock {
            font-weight: lighter;
            text-align: center;
            font-size: 1.15em;
            padding: 0.5em;
            border-bottom: 1px solid #888;
        }

        #sauna_panel div.energyTotal {
            border-bottom: none;
        }

        #sauna_panel div.title, #devices_panel div.title {
            background-color: #0972a5;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border: 1px solid #26b3f7;
            color: white;
            padding: 0.5em;
        }

            #sauna_panel div.title img, #devices_panel div.title img {
                height: 1.4em;
                margin-right: 0.5em;
                vertical-align: middle;
            }

        #sauna_panel .subtitle {
            font-size: 1em;
        }

        #sauna_panel canvas {
            width: 100%;
            height: 150px;
        }

    #production_panel {
        font-family: 'Oswald', sans-serif;
    }

        #production_panel div.productionBlock {
            font-weight: lighter;
            text-align: center;
            font-size: 1.15em;
            padding: 0.5em;
            border-bottom: 1px solid #888;
        }

        #production_panel div.title {
            background-color: #0972a5;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border: 1px solid #26b3f7;
            color: white;
            padding: 0.5em;
        }

            #production_panel div.title img {
                height: 1.4em;
                margin-right: 0.5em;
                vertical-align: middle;
            }

        #production_panel div.productionBlock div span {
            font-size: 1.8em;
            margin-right: 0.1em;
        }

        #production_panel div.productionBlock table {
            width: 100%;
        }

            #production_panel div.productionBlock table tr td {
                width: 50%;
                text-align: center;
            }

        #production_panel table#productionMethods {
            margin-top: 0.5em;
            border-spacing: 1px;
        }

            #production_panel table#productionMethods tr td:first-child {
                width: 8%;
                text-align: right;
            }

            #production_panel table#productionMethods tr td:nth-child(2) {
                width: 60%;
                font-size: 0.85em;
                text-align: left;
                padding-left: 0.7em;
            }

            #production_panel table#productionMethods tr td:nth-child(3) {
                width: 30%;
                text-align: left;
                padding-right: 0.5em;
            }

                #production_panel table#productionMethods tr td:nth-child(3) div {
                    display: inline-block;
                    width: 100%;
                    height: 1.3em;
                    background-color: gray;
                }

        #production_panel div.productionBlock span.productionValue {
            font-size: 1.3em;
        }

        #production_panel div#carEmission {
            font-size: 0.92em;
            color: #CCCCCC;
            line-height: 1.3em;
        }

        #production_panel span#carEmission_km {
            font-size: 1.2em;
        }

    #timing_panel, #history_panel {
        font-family: 'Oswald', sans-serif;
    }

        #timing_panel div.timingBlock {
            font-weight: lighter;
            font-size: 1.1em;
            padding: 0.2em 0.5em 0.5em 0.5em;
            box-sizing: border-box;
            line-height: 1.2em;
        }

            #timing_panel div.timingBlock img {
                width: 2.5em;
                margin: 0.2em 0.5em 0 0;
            }
            #timing_panel div.timingBlock img.help {
                margin: 0.2em 0 0 0;
            }

            #timing_panel div.timingBlock div {
                display: inline-block;
                width: calc(95% - 3em);
            }

        #timing_panel div.important {
            background-color: #442200;
        }

        #timing_panel div.very_important {
            background-color: #660000;
            font-weight: normal;
        }

        #timing_panel div span#peak_cut_action, #timing_panel div span#peak_reduce_action {
            text-decoration: underline;
            white-space: nowrap;
        }

        #timing_panel div.title, #history_panel div.title {
            background-color: #0972a5;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border: 1px solid #26b3f7;
            color: white;
            padding: 0.5em 0.5em 0.5em 0.5em;
        }

            #timing_panel div.title img, #history_panel div.title img {
                height: 1.4em;
                margin-right: 0.5em;
                vertical-align: middle;
            }


        #timing_panel div#timing_savings {
            font-weight: lighter;
            text-align: left;
            font-size: 1.1em;
            background-color: #006600;
            padding: 0 0 0.2em 0.5em;
        }

        #timing_panel table, #devices_panel table, #history_panel table {
            width: 100%;
            border-spacing: 0;
            border-bottom: 1px solid #888888;
        }

            #timing_panel table tr th, #devices_panel table tr th, #history_panel table tr th {
                padding-left: 0.5em;
                text-align: left;
                font-weight: normal;
                background-color: #444466;
                line-height: 1.2em;
                padding-bottom: 0.2em;
            }

                #timing_panel table tr th img, #devices_panel table tr th img {
                    height: 26px;
                    margin: 3px 0.5em 3px 0;
                    vertical-align: bottom;
                }
                #timing_panel table tr th img.override {
                    height: 20px;
                    width: 20px;
                }

            #timing_panel table tr td {
                font-size: 0.95em;
                font-weight: lighter;
                padding-left: 0.5em;
                line-height: 1.3em;
                padding-bottom: 0.2em;
            }

            #timing_panel table tr td .timing_override{
                font-weight: normal;
                color: #FFFF00;
            }

                #timing_panel table tr:nth-child(2) td {
                padding-bottom: 0.2em;
            }

            #timing_panel table tr td.timing_state {
                width: 12%;
                border-top: 1px solid #888888;
                border-right: 1px solid #888888;
                padding: 0.2em;
            }

                #timing_panel table tr td.timing_state img {
                    width: 77%;
                    vertical-align: middle;
                    margin-left: 0.3em;
                    min-width: 1.5em;
                }

            #timing_panel table tr td.timing_unitprice {
                font-size: 0.85em;
                line-height: 0.95em;
                padding-bottom: 3px;
            }

            #timing_panel table tr td.timing_clocks {
                width: 30%;
                padding: 0;
                border-left: 1px solid #888888;
            }

            #timing_panel table tr td.subtitle {
                font-weight: normal;
                text-align: left;
                background-color: #222233;
                vertical-align: middle;
                padding-top: 0.3em;
            }

                #timing_panel table tr td.subtitle img {
                    height: 1.6em;
                    margin: 0 0.2em 0 0.2em;
                    vertical-align: middle;
                    opacity: 0.6;
                }

                    #timing_panel table tr td.subtitle img:hover {
                        cursor: pointer;
                    }

                    #timing_panel table tr td.subtitle img.chosen {
                        opacity: 1;
                    }

            #timing_panel table tr td.savings {
                background-color: #003300;
            }

            #timing_panel table tr td span.timing_instruction {
                font-weight: normal;
                white-space: nowrap;
            }
            #timing_panel table tr td div.timing_ownprod {
                font-weight: normal;
                white-space: nowrap;
                color: #80FF80;
            }

    div#history_list th img {
        margin: 0 0.5em 0 1em;
        width: 0.7em;
        height: 0.7em;
        vertical-align: bottom;
        float: right;
    }

    div#history_panel div.hint {
        font-weight: lighter;
        font-size: 0.95em;
        padding: 0.5em 1em 0.5em 1em;
    }

    div#history_list table td {
        padding-left: 1em;
    }

    div#history_list table tr:nth-child(2) td:first-child {
        width: 3em;
    }

    div#history_list table tr:nth-child(2) td:nth-child(2) {
        font-weight: lighter;
        padding-bottom: 0.2em;
    }

    table#history_agr_DEFAULT {
        margin: 0.2em 0 1em 0;
    }

        table#history_agr_DEFAULT tr td {
            font-weight: lighter;
            white-space: nowrap;
        }

            table#history_agr_DEFAULT tr td:first-child {
                padding: 0 2em 0 1em;
                width: 20%;
            }

    div#showAgreementHistory {
        padding: 0.5em 0.5em 1em 0.5em;
        text-decoration: underline;
        cursor: pointer;
    }

        div#showAgreementHistory img {
            width: 0.8em;
            margin-right: 0.5em;
        }

    .titlebuttons {
        float: right;
    }

    .titlebutton {
        border: 1px solid #26b3f7;
        display: inline-block;
        padding: 2px;
        margin-left: 0.5em;
        width: 1.5em;
        height: 1.5em;
        border-radius: 6px;
        color: white;
        background-color: #444466;
        font-size: 0.8em;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
    }

        .titlebutton:hover {
            border: 1px solid white;
        }

    .titlebutton-selected {
        background-color: #777;
        border: 1px solid white;
    }

    div.actionbutton {
        border: 1px solid #26b3f7;
        display: inline-block;
        padding: 2px;
        margin-left: 0.5em;
        height: 1.5em;
        border-radius: 6px;
        color: white;
        background-color: #444466;
        font-size: 1em;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
        padding: 0 10px 0 5px;
    }

        div.actionbutton:hover {
            border: 1px solid white;
        }

    div.actionbutton-selected {
        background-color: #777;
        border: 1px solid white;
    }

    div.actionbutton img {
        margin-left: 5px;
        margin-right: 5px;
        height: 1.2em;
        border: none;
        vertical-align: middle;
        background-color: #444466;
    }

    div.actionbutton-selected img {
        background-color: #777;
    }

    #price_date_tabs, #price_date_range {
        height: 2.15em;
    }

    #charging_history_range {
        width: 100%;
        border-spacing: 0;
    }

    #price_date_range table {
        width: 100%;
    }

        #charging_history_range tr th, #price_date_range tr th {
            font-family: 'Oswald', sans-serif;
            font-weight: normal;
            font-size: 1em;
            text-align: left;
            padding: 0.5em 0 0.5em 0.5em;
        }

        #charging_history_range tr td, #price_date_range tr td {
            font-family: 'Oswald', sans-serif;
            font-weight: lighter;
            font-size: 0.9em;
            padding: 0;
            border-bottom: 1px solid #808080;
            vertical-align: bottom;
        }
#charging_history_range tr td, #price_date_range tr td:first-child {
    padding: 0 0 0.3em 0.5em;
}
        #price_date_range tr td {
            border: none;
        }

            #charging_history_range tr td input, #price_date_range tr td input {
                font-size: 1em;
                font-family: 'Oswald', sans-serif;
                background-color: black;
                color: white;
                width: 4.5em;
                border-radius: 5px;
            }

            #charging_history_range tr td img, #price_date_range tr td img {
                margin-left: 0.5em;
                vertical-align: bottom;
            }

            #price_date_range tr td:nth-child(5) {
                text-align: right;
                padding-right: 0.2em;
            } 
            #price_date_range tr td:nth-child(5) img {
                width: 30px;
                margin: 0;
            } 

    h3 img {
        float: right;
        height: 1em;
        vertical-align: bottom;
    }

    @media screen and (max-width:360px) {
        div#settings_panel {
            font-size: 97%;
        }

        #charging_history_range tr td img {
            width: 1.3em;
        }
        #price_date_range tr td input {
            font-size: 0.8em;
        }

    }

@media screen and (max-width:415px) {
    #price_date_range tr td img {
        width: 1.3em;
    }
}

    @media screen and (min-width:405px) {
        body {
            font-size: 100%;
        }

        div#browse div img {
            width: 20px;
        }

        .header {
            font-size: 1.4em;
        }

            .header div:nth-child(2) {
                max-width: calc(100% - 250px);
                overflow: hidden;
                white-space: nowrap;
            }

        .subscreen div:nth-child(2) {
            max-width: calc(100% - 125px);
        }

        .header div:nth-child(3) {
            width: 210px;
        }

        .header div img {
            width: 32px;
        }

        .header div:nth-child(1) {
            width: 40px;
        }


        img#warning {
            width: 42px;
        }

        .header div img.carousel {
            vertical-align: middle;
            margin: 2px 4px 7px 0;
            height: 31px;
        }


        .header div:nth-child(3) img {
            margin-left: 10px;
        }
    }

    @media screen and (min-width:500px) {
        body {
            font-size: 120%;
        }

        div#browse div img {
            width: 25px;
        }
        #price_date_range tr td:nth-child(5) img {
            width: 37.5px;
        } 
    }

    @media screen and (min-width:700px) {
        body {
            font-size: 150%;
        }

        div#browse div img {
            width: 30px;
        }
        #price_date_range tr td:nth-child(5) img {
            width: 45px;
            margin: 0;
        } 
    }

    .settings div table tr td#chargerDetails {
        padding-bottom: 0.5em;
        padding-right: 1em;
    }

    table#charging_multicharger {
        width: 100%;
        font-size: 0.9em;
    }

    #charging_multicharger_list div.multicharger_title {
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 1em;
        text-align: center;
        padding: 0.3em;
        vertical-align: bottom;
    }

        #charging_multicharger_list div.multicharger_title:nth-child(1) {
            padding-top: 0;
        }

        #charging_multicharger_list div.multicharger_title span {
            font-weight: normal;
            font-size: 1.3em;
        }

    #charging_multicharger_list div {
        display: inline-block;
    }

        #charging_multicharger_list div.multicharger_title {
            display: block;
        }

    #charging_multicharger_list td {
        padding: 0 1em 0 1em;
        border-left: 1px solid white;
        text-align: center;
    }

        #charging_multicharger_list td:nth-child(1) {
            border-left: none;
        }

    div.popup_dialog {
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 1.2em;
        text-align: center;
    }

        div.popup_dialog img {
            height: 3em;
            display: block;
            margin: 0 auto 1em auto;
        }

    div.popup_info {
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 1.1em;
        text-align: left;
    }

    div.subscrollable {
        height: 60vh;
    }

    .ui-dialog .ui-dialog-title, .ui-dialog .ui-dialog-buttonpane button {
        font-family: 'Oswald', sans-serif;
        font-weight: normal;
        font-size: 1.2em;
    }

    .ui-tooltip {
        font-family: 'Arial', 'Helvetica', sans-serif;
        font-weight: normal;
        font-size: 14px;
        box-shadow: none;
        background: #EEEEEE;
        color: black;
    }

    .ui-widget.ui-widget-content.ui-autocomplete {
        max-height: 8em;
        overflow-y: auto;
        overflow-x: hidden;
        font-family: 'Oswald', sans-serif;
        font-weight: normal;
        font-size: 1.1em;
        border: 2px solid white;
        border-radius: 5px;
    }

    img.help {
        margin: 0 0.5em 0 0.5em;
        height: 1em;
        cursor: pointer;
    }

    div#appinfo {
        text-align: center;
        font-weight: lighter;
    }

        div#appinfo p img {
            width: 25%;
        }

    input#keycode {
        display: block;
        margin: 1em auto 0.5em auto;
        font-family: 'Oswald', sans-serif;
        font-size: 2.5em;
        font-weight: lighter;
        text-align: center;
        border-radius: 5px;
        border: 2px solid #8080FF;
        padding: 0 0 0 0;
        width: 6em;
        text-align: center;
        background-color: #444444;
        color: white;
    }

    div#codeStatus {
        font-family: 'Oswald', sans-serif;
        font-size: 1.1em;
        padding: 0.5em;
        text-align: center;
        height: 2em;
    }

    div#wrongCode {
        display: none;
        color: red;
    }

    div#rightCode {
        display: none;
        color: green;
    }

    p#confirm_device_add_specs, div#confirm_device_add_choose, div#confirm_device_add_slots {
        text-align: left;
    }

    img.delete {
        margin: 0 0 0.5em 1em;
        height: 1em;
        padding: 0.3em;
        border: 2px solid #EEEEEE;
        border-radius: 5px;
        vertical-align: middle;
        background-color: #660000;
    }

        img.delete:hover {
            cursor: pointer;
        }

    img.delete_off {
        background-color: #777777;
    }

        img.delete_off:hover {
            cursor: default;
        }

    span.update_date {
        margin-left: 2em;
        font-weight: lighter;
        font-size: 0.9em;
        color: #BBBBBB;
        display: none;
    }

    div.update_older {
        display: none;
    }

    #chargerThrottling table {
        width: 100%;
        margin: 0.3em 0 0.5em 0;
    }

        #chargerThrottling table td {
            height: auto;
            width: 33%;
            text-align: center;
            font-weight: lighter;
            font-size: 0.9em;
        }

        #chargerThrottling table tr:nth-child(2) td {
            font-size: 1.3em;
        }

    .chargingSlider {
        margin: 0.5em 1.3em 0 1.3em;
    }

    #chargerThrottle.chargingSlider {
        border: 1px solid #777777;
    }

    #chargerThrottle .ui-slider-range {
        background: #26b3f7;
        border: 1px solid white;
    }

    #chargerThrottle .ui-slider-handle {
        border: 2px solid white;
    }

    #charging_setplan_batterylevel {
        border: 1px solid #999999;
    }

        #charging_setplan_batterylevel .ui-slider-range {
            background: #26b3f7;
            border: 1px solid white;
        }

        #charging_setplan_batterylevel .ui-slider-handle {
            border: 2px solid white;
        }

    div#charging_options {
        float: right;
    }

    img#charging_quick_plan, img#charging_force_on {
        margin-left: 0.8em;
    }

    img.override {
        float: right;
        margin-left: 0.5em;
    }

    div#charging_history_error {
        font-family: 'Oswald', sans-serif;
        font-size: 1em;
        padding: 0.5em;
        text-align: left;
        color: #FFFF33;
    }

        div#charging_history_error img {
            width: 1.5em;
            margin-right: 1em;
            vertical-align: bottom;
        }

    div#add_user, div#add_site {
        width: 100%;
        padding: 0 0.5em 0 0.5em;
        text-align: left;
        box-sizing: border-box;
    }

        div#add_user div.user_info {
            text-align: center;
            padding-top: 1em;
        }

        div#add_user div.label {
            padding-bottom: 0.5em;
        }

        div#add_user input.adduser_field {
            display: block;
            margin: auto auto 1em auto;
            border: 2px solid #8080FF;
            border-radius: 5px;
            width: 85%;
            max-width: 10em;
            color: white;
            font-size: 1em;
            font-family: 'Oswald', sans-serif;
            background-color: #444444;
        }

        div#add_user input#adduser_email {
            max-width: 20em;
        }

            div#add_user input#adduser_email.valid {
                background-color: #006600;
            }

        div#add_user table tr td:first-child {
            text-align: left;
        }

        div#add_user table tr td:nth-child(2) {
            text-align: right;
        }

        div#add_user button {
            margin-top: 1.1em;
            font-size: 1.2em;
            font-family: 'Oswald', sans-serif;
            background-color: #3abdff;
            color: white;
            border-radius: 5px;
            padding: 0 0.5em 0 0.5em;
        }

            div#add_user button:hover {
                cursor: pointer;
            }

            div#add_user button:disabled {
                color: #BBBBBB;
                background-color: #8080FF;
                cursor: default;
            }

        div#add_user div.note {
            padding-top: 1em;
            font-size: 0.9em;
            font-weight: lighter;
        }

    div#parallelUsers, div#userSites {
        font-weight: lighter;
        padding-bottom: 0.5em;
    }

    div#userSites {
        padding-top: 0.5em;
    }

    span.parallel_email {
        font-size: 0.9em;
    }

    @media screen and (max-width:360px) {
        .lcs_wrap {
            margin-bottom: 5px;
        }
    }

    #devices_panel table tr td {
        font-size: 0.95em;
        font-weight: lighter;
        padding-left: 0.4em;
        line-height: 0.4em;
    }

    #devices_panel table tr.measured td {
        line-height: 1.7em;
        padding-bottom: 5px;
        white-space: nowrap;
    }

    table.deviceData td, table.deviceDataFuses td {
        text-align: right;
    }

    table.deviceData tr:first-child td:nth-child(2), table.deviceDataFuses td:first-child {
        text-align: left;
    }

    table.deviceData tr:first-child td:nth-child(3) {
        width: 5em;
    }

    table.deviceData td:first-child, table.deviceData td:nth-child(4) {
        width: 1.7em;
    }

    table.deviceData tr.measured td:nth-child(2), table.deviceData tr.measured td:nth-child(3) {
        width: 30%;
    }

    table.deviceData img {
        background-color: #444444;
        height: 1.8em;
        margin-top: 5px;
        margin-right: 4px;
    }

        table.deviceData img.on {
            background-color: #00FF70;
        }

        table.deviceData img.error {
            background-color: #FF0040;
        }

    table.deviceData tr.measured td, table.deviceDataFuses tr.measured td {
        color: #CCCCFF;
    }

table.deviceData tr.offline td, table.deviceDataFuses tr.offline td {
    color: #8888CC;
}

    table.deviceData span.value, table.deviceDataFuses span.value {
        font-size: 1.6em;
    }

table.deviceDataFuses td:first-child span.value {
    font-size: 1.2em;
}
    table.deviceData td.ticked {
        color: #CCCCCC;
        white-space: nowrap;
    }

    table.deviceDataFuses td {
        width: 20%;
        max-width: 10em;
        padding-right: 1em;
    }

    table.deviceDataFuses td:nth-child(5) {
        width: 1em;
    }

    div.devdata_error {
        background-color: #331100;
        font-family: 'Oswald', sans-serif;
        padding: 2px 0.1em 0.5em 0.5em;
        white-space: nowrap;
    }

        div.devdata_error img {
            margin-right: 0.2em;
            height: 1.5em;
            vertical-align: bottom;
        }

    .color_all {
        background-color: white;
    }

    .color_charger {
        background-color: #66DDFF;
    }

    .color_waterHeater {
        background-color: #DDDD44;
    }

    .color_storingHeating {
        background-color: #FFBB33;
    }

    .color_directHeating {
        background-color: #FF6611;
    }

.color_sell {
    background-color: #FFFF00;
}

    div#device_removed p {
        margin: 0.3em;
    }


    div#device_removed .device_removed_vendor {
        font-size: 0.9em;
    }

    div#device_removed_popup img, div#confirm_agreement img {
        height: 2em;
        margin: 0.2em auto 0.5em auto;
    }

    div#device_removed .portal_link a {
        font-weight: normal;
        color: #3abdff;
    }

    #confirm_agreement .smaller {
        font-size: 0.8em;
    }

    #confirm_agreement p#agreement_start input {
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
        background-color: black;
        color: white;
        width: 5.0em;
        text-align: center;
        border-radius: 5px;
        margin-top: 0.4em;
    }

    #confirm_agreement p#agreement_start img {
        display: inline;
        margin: 0.5em 0 0 0.5em;
        vertical-align: top;
        height: 1.2em;
    }

    div#upload_history {
        padding: 0 1em 0 1em;
        font-weight: lighter;
        font-size: 1.1em;
    }

        div#upload_history .portal_link a {
            font-weight: normal;
            color: #3abdff;
            text-align: center;
        }

    input[type="file"] {
        display: none;
    }

    div#upload_history p.portal_link, p#history_file {
        text-align: center;
    }

    label.file-upload {
        font-family: 'Oswald', sans-serif;
        font-weight: normal;
        border: 2px solid #BBBBBB;
        border-radius: 0.2em;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
        background-color: #441111;
    }

        label.file-upload img {
            height: 1.5em;
            margin: 3px 10px 0 0;
        }

    span#multipleSites img {
        width: 0.6em;
    }

    span.selectable {
        cursor: pointer;
    }

    div#siteList {
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
        font-size: 1em;
        text-align: center;
        border: 3px solid #BBBBBB;
        border-radius: 0.4em;
        position: fixed;
        width: auto;
        top: 2.5em;
        left: 1em;
        max-height: calc(90vh - 5em);
        right: auto;
        cursor: pointer;
        z-index: 999;
        background-color: #EEEEEE;
        color: black;
        overflow-y: auto;
    }

    @media screen and (min-width:1000px) {
        div#siteList {
            left: calc(1em + (100vw - 1000px) / 2);
        }
    }

    div#siteDrop {
        font-size: 1.5em;
        text-align: left;
        background-color: #222222;
        color: white;
    }

        div#siteDrop div:hover {
            background-color: #888888;
        }

        div#siteDrop div.selected {
            background-color: white;
            color: black;
        }

        div#siteDrop div p {
            margin: 0;
            padding: 0 0.4em 0 0.4em;
        }


    div#newSite p, div#newSiteAgreements p {
        margin: 0.2em 0 0.2em 0;
        line-height: 1.3em;
    }

        div#newSite p.note {
            font-weight: lighter;
            font-size: 0.9em;
            text-align: center;
        }

    div#newSite div#sitelocation, div#newSiteAgreements div#new_agreements {
        font-weight: normal;
        text-align: center;
        padding-top: 0.2em;
    }

        div#newSite div#sitelocation .label {
            padding-top: 0.5em;
        }

    div#newSiteAgreements div#new_agreements {
        font-weight: normal;
        text-align: center;
        padding-top: 0.8em;
        padding-bottom: 1em;
    }

    div#sitelocation input {
        display: block;
        margin: 0.5em auto 0 auto;
        border: 2px solid #8080FF;
        border-radius: 5px;
        width: 95%;
        max-width: 12em;
        color: white;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
        background-color: #444444;
    }

        div#sitelocation input#new_municipality {
            width: 7em;
            margin-bottom: 1.5em;
        }

    div.locked {
        opacity: 0.5;
    }

    div#newSite button, div#newSiteAgreements button {
        margin: 1.1em 0 1.1em 0;
        font-size: 1.2em;
        font-family: 'Oswald', sans-serif;
        background-color: #3abdff;
        color: white;
        border-radius: 5px;
        padding: 0 0.5em 0 0.5em;
    }

        div#newSite button:hover, div#newSiteAgreements button:hover {
            cursor: pointer;
        }

        div#newSite button:disabled, div#newSiteAgreements button:disabled {
            color: #BBBBBB;
            background-color: #8080FF;
            cursor: default;
        }

    input#new_municipality.valid, input#new_address.valid {
        background-color: #006600;
    }

    div#new_agreements table {
        width: 100%;
        border-spacing: 0;
    }

        div#new_agreements table td:nth-child(1) {
            text-align: left;
        }

        div#new_agreements table td:nth-child(2) {
            text-align: right;
        }

        div#new_agreements table td input, div#new_agreements table td select {
            font-family: 'Oswald', sans-serif;
            font-size: 1em;
            border-radius: 5px;
            border: 2px solid #8080FF;
            margin-bottom: 5px;
            min-width: 8em;
            text-align: right;
            background-color: #444444;
            color: white;
        }

        div#new_agreements table#names {
            margin-top: 0.5em;
            padding-top: 0.5em;
            border-top: 1px solid #CCCCCC;
            border-spacing: 0;
        }

            div#new_agreements table#names td input, div#new_agreements input#new_annualKWh {
                padding-right: 0.5em;
                min-width: 5em;
                width: 5em;
            }

                div#new_agreements table#names td input#username {
                    width: 8em;
                }

    @media screen and (max-width:375px) {
        div#new_agreements table td:nth-child(1) {
            border-spacing: 0;
        }

            div#new_agreements table td:nth-child(1) img.help {
                margin: 0 0 0 0.5em;
            }

        div#userSites table tr td:nth-child(1) {
            max-width: 190px;
            overflow-x: hidden;
        }

        div#newSiteAgreements div#new_agreements {
            font-size: 0.95em;
        }
    }

div#searchingDevice {
    display: none;
    position: absolute;
    top: 2.5em;
    width: 100%;
    z-index: 999;
}
#searchingDevice div {
    width: 70%;
    margin: 0 auto 0 auto;
    border: 2px solid #3abdff;
    border-radius: 8px;
    font-size: 1.5em;
    background-color: #777777;
    color: white;
    text-align: center;
    padding: 0.5em;
}
div#debugInfo {
    display: none;
    position: absolute;
    bottom: 1em;
    width: 100%;
    z-index: 999;
}
#debugInfo div {
    width: 90%;
    margin: 0 auto 0 auto;
    border: 3px solid yellow;
    border-radius: 8px;
    font-size: 1em;
    font-weight: lighter;
    background-color: #333333;
    color: white;
    text-align: left;
    padding: 0.5em;
}