#site_container span,
#site_container p,
#site_container td,
#site_container div {
    font-family: "Trebuchet MS", Verdana, Arial;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    color: rgb(60, 60, 59);
    box-sizing: border-box;
}

head {
    width: 100%;
    height: 100%;
}

#site_container {
    padding: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

    #site_container .dark_blue {
        color: rgb(0, 68, 137);
    }

    #site_container .blue {
        color: rgb(0, 123, 209);
    }

    #site_container .background--blue {
        background-color: rgb(0, 123, 209);
    }

    #site_container .background--dark_blue {
        background-color: rgb(0, 68, 137);
    }

    #site_container .background--orange {
        background-color: rgb(232, 119, 34);
    }

    #site_container .light_blue {
        color: rgb(128, 164, 224);
    }

    #site_container .background--light_blue {
        background-color: rgb(128, 164, 224);
    }

    #site_container .orange {
        color: rgb(232, 119, 34);
    }

    #site_container .background--orange {
        background-color: rgb(232, 119, 34);
    }

    #site_container .purple {
        color: rgb(100, 32, 119);
    }

    #site_container .background--purple {
        background-color: rgb(100, 32, 119);
    }

    #site_container .black {
        color: rgb(60, 60, 59);
    }

    #site_container .texterror {
        color: rgb(232, 34, 34);
    }

    #site_container .date_error {
        background-color: #fee;
        border: solid 3px #f88;
    }

    #site_container TD {
        vertical-align: top;
    }

        #site_container TD.value {
            width: 25%;
            padding: 10px;
            border-left: solid 20px #eee;
            border-right: solid 20px #eee;
        }

            #site_container TD.value TABLE {
                width: 100%;
                border-collapse: collapse;
            }

            #site_container TD.value TD {
                text-align: left;
            }

            #site_container TD.value TR.heading TD DIV {
                position: relative;
                float: right;
                color: #fff;
                font-size: x-small;
                padding: 2px 10px 2px 10px;
            }

            #site_container TD.value TR.value TD {
                font-size: larger;
            }

            #site_container TD.value TR.type TD {
                font-size: x-small;
            }

        #site_container td.messages_to_user {
            width: 100%;
            vertical-align: middle;
        }

            #site_container td.messages_to_user DIV {
                color: #fff;
                background-color: rgb(232, 119, 34);
                font-size: smaller;
                padding: 2px 10px 2px 10px;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                margin-right: 2px !important;
            }

#page_container {
    width: 100%;
    background-color: transparent;
    border-collapse: collapse;
}

#main_view {
    padding-left: 16px;
}

.section_container {
    width: 100%;
    text-align: center;
    background-color: white;
    padding: 6px !important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: solid 1px rgb(0, 123, 209);
    margin-top: 6px !important;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

    .section_container:first-of-type {
        margin-top: 0px !important;
    }

    .section_container #section_errormessages {
        border: solid 2px rgb(232, 119, 34);
    }

.white_background {
    background-color: white;
}

/*graphs*/
/*line*/
#linechart-parent {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 350px;
}

    #linechart-parent #line_chart_div, #linechart-parent #chartist_line_chart {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    #linechart-parent table#linechart_graphlegend {
        padding: 2px;
        position: absolute;
        left: 3%;
        top: 5%;
        font-size: small;
        width: 200px;
        text-align: center;
        vertical-align: middle;
        margin: auto;
        border: solid 1px #aaa;
        background-color: white;
        opacity: 0.8;
    }

        #linechart-parent table#linechart_graphlegend td.graphlegendicon {
            width: 15px;
            height: 100%;
            text-align: left;
        }

        #linechart-parent table#linechart_graphlegend td.separator {
            width: 5px;
            height: 100%;
        }

        #linechart-parent table#linechart_graphlegend td.graphlegenddescriptor {
            font-size: small;
            width: 180px;
            height: 100%;
            text-align: left;
        }

        #linechart-parent table#linechart_graphlegend .canvas_icon {
            width: 10px;
            height: 10px;
            text-align: center;
        }

/*chartist charts*/
/*#line_chart_div, #chartist_line_chart {
    width: 100%;
    height: 350px;
}*/

.ct-label {
    font-size: small !important;
}

.ct-series-a .ct-line {
    /* Control the thikness of your lines */
    stroke-width: 1px;
    stroke: rgb(0, 123, 209);
}

.ct-series-b .ct-line {
    /* Control the thickness of your lines */
    stroke-width: 2px;
    stroke: rgb(232, 119, 34);
}

.ct-series-a .ct-bar {
    stroke-width: 6%;
    stroke: rgb(0, 123, 209);
}

.ct-series-b .ct-bar {
    stroke-width: 6%;
    stroke: rgb(0, 98, 167);
}

#bar_chart_div, #chartist_bar_chart {
    width: 100%;
    height: 150px;
}


#site_container div.panel_section {
    display: inline-block;
    xbackground-color: #f0f0f0;
    padding: 0.25%;
    margin-top: 3px;
    xborder: solid 1px #ccc;
    text-align: center;
    xheight: 65px;
}

#site_container div.value_panel {
    border-collapse: collapse;
    display: inline-block;
    background-color: #f8f8f8;
    xpadding: 0.25%;
    xmargin-top: 3px;
    border: solid 1px #ccc;
    border-bottom-color: #999;
    border-right-color: #999;
    vertical-align: middle;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: smaller;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    height: 30px;
}

    #site_container div.value_panel.value_panel-groupA, div.value_panel.value_panel-groupB, div.value_panel.value_panel-groupC {
        width: 23%;
        text-align: center;
        vertical-align: middle;
    }

    #site_container div.value_panel.value_panel-groupD {
        width: 96%;
        height: 55px;
        text-align: center;
        vertical-align: middle;
    }

    #site_container div.value_panel.value_panel-groupE {
        width: 32%;
        text-align: center;
        vertical-align: middle;
    }

#site_container div.value_panel_contents {
    width: 100%;
    padding: 0.25%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#site_container table.value_panel {
    width: 100%;
    font-size: smaller;
    padding: 0.25%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#site_container td.value_panel_value {
    width: 70%;
    vertical-align: middle;
}

#site_container td.value_panel_attribute {
    width: 30%;
    vertical-align: middle;
}

    #site_container td.value_panel_attribute DIV {
        color: #fff;
        font-size: smaller;
        padding: 2px 10px 2px 10px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        margin-right: 2px !important;
    }

#site_container .widthA {
    width: 50px;
    text-align: right;
    vertical-align: middle;
}

#site_container .widthB {
    width: 200px;
    text-align: left;
    vertical-align: middle;
}

#site_container .widthC {
    width: 180px;
    vertical-align: middle;
}

#site_container DIV#panel_section_1 .delta-negative, #site_container DIV#panel_section_5_dp .delta-negative, #site_container DIV#panel_section_5_diag .delta-negative {
    color: rgb(232, 34, 34);
    padding-left: 15px;
    font-size: smaller;
}

#site_container DIV#panel_section_1 .delta-positive, #site_container DIV#panel_section_5_dp .delta-positive, #site_container DIV#panel_section_5_diag .delta-positive {
    color: rgb(32, 160, 32);
    padding-left: 15px;
    font-size: smaller;
}

#site_container DIV#panel_section_2 .delta-negative {
    color: rgb(232, 34, 34);
    padding-left: 15px;
    font-size: smaller;
}

#site_container DIV#panel_section_2 .delta-positive {
    color: rgb(32, 160, 32);
    padding-left: 15px;
    font-size: smaller;
}

/*section 3 and 4*/
#site_container #averagesoptions-parent {
    display: block;
    margin: auto;
    vertical-align: middle;
    background-color: #fff;
    text-align: center;
    padding: 5px;
    overflow: hidden;
}

#site_container #csvdownload-parent {
    display: block;
    margin: auto;
    vertical-align: middle;
    background-color: #fff;
    text-align: center;
    padding: 5px;
    overflow: hidden;
}

#site_container .csvdownload-parent-cell {
    display: inline-block;
}

/*Event logs*/
#site_container DIV.eventlog-container {
    text-align: center;
    background-color: white;
}

    #site_container DIV.eventlog-container DIV.eventlog-table-container {
        overflow-y: auto;
        height: 215px;
        text-align: center;
        background-color: white;
    }

        #site_container DIV.eventlog-container DIV.eventlog-table-container thead th {
            position: sticky;
            top: 0;
            font-size: inherit !important;
            xborder-top: solid 1px #bbb;
            xborder-bottom: solid 1px rgb(60,60,59);
            padding: 2px 0 2px 0;
        }

#site_container DIV.eventlog-title {
    text-align: center;
    padding: 2px 0px 2px 0px;
    xbackground-color: #eee;
    width: 100%;
    margin: auto;
    color: #000;
    font-size: larger;
    font-weight: bold;
}

#site_container TABLE#event_log {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3px;
}

    #site_container table#event_log th {
        background-color: #eee;
    }

    #site_container TABLE#event_log * {
        text-align: center;
        vertical-align: middle;
    }

    #site_container TABLE#event_log tr:last-of-type td {
        border-bottom: solid 1px rgb(60,60,59);
    }

    #site_container TABLE#event_log .error, #site_container TABLE.event_log .event-severity--2 {
        background-color: rgb(232, 34, 34);
        color: #fff;
        padding: 2px;
        margin: 2px;
    }

    #site_container TABLE#event_log .warning, #site_container TABLE.event_log .event-severity--1 {
        background-color: rgb(255, 170, 0);
        color: #fff;
        padding: 2px;
        margin: 2px;
    }

    #site_container TABLE#event_log .info, #site_container TABLE.event_log .event-severity--0 {
        background-color: rgb(32, 160, 32);
        color: #fff;
        padding: 2px;
        margin: 2px;
    }

#site_container TABLE.time_span {
    margin: auto;
}

    #site_container TABLE.time_span TD {
        font-size: small;
        border: solid 1px #ddd;
        text-align: center;
        padding: 2px;
        background-color: #eee;
    }

        #site_container TABLE.time_span TD.clickable:hover {
            background-color: #ddd;
        }

        #site_container TABLE.time_span TD.scaleHour, #site_container TABLE.time_span TD.scaleDay, #site_container TABLE.time_span TD.scaleWeek, #site_container TABLE.time_span TD.scaleMonth, #site_container TABLE.time_span TD.scaleQuarter, #site_container TABLE.time_span TD.scaleYear {
            width: 100px;
        }

#site_container .clickable {
    cursor: pointer;
}

/*buttons*/
#site_container .clarity-button {
    position: relative;
    display: inline-block;
    padding: 5px 15px;
    cursor: pointer;
    color: #222;
    background: #f8f8f8 none repeat scroll 0% 0%;
    border: 1px solid #999;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 rgba(0, 0, 0, 0.2) inset, 0 1.25rem 0 rgba(255, 255, 255, 0.08) inset, 0 -1.25rem 1.25rem rgba(0, 0, 0, 0.2) inset, 0 1.25rem 1.25rem rgba(255, 255, 255, 0.1) inset;
    transition: all 0.2s linear 0s;
    text-align: center;
    text-decoration: none;
    margin: 3px;
}

    #site_container .clarity-button:disabled {
        background-color: #e8e8e8;
        border: solid 1px #ddd;
        display: none;
    }

    #site_container .clarity-button:hover {
        background-color: rgb(0, 123, 209);
        color: #fff;
    }

#site_container #showoptions.clarity-button {
    background-color: rgb(0, 123, 209);
    color: #fff;
}

    #site_container #showoptions.clarity-button:hover {
        background-color: rgb(0, 68, 137);
    }

#site_container .selected {
    background-color: rgb(0, 123, 209) !important;
    color: #fff;
    font-weight: bold;
}

#site_container .frame {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    /* this is required unless you put the helper span closely near the img */
    text-align: center;
    margin: 1em 0;
}

#site_container .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#site_container .legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#site_container .legendLayer .background {
    fill: rgba(255, 255, 255, 0.85);
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 1;
}

/*Options window*/
#site_container .user_personalised_layout_load_information {
    padding: 2px;
    margin-right: 5px;
    font-size: small;
    color: #fff;
}

#plot_options_window.hidden_soft {
    transform: translateY(-100%);
}

#site_container DIV.menu-button {
    width: 18px;
    height: 3px;
    background-color: #fff; /*rgb(0, 123, 209);*/
    margin: 2px 0;
}

#plot_options_window {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    transform: translateY(0);
    -webkit-transition-property: all;
    -webkit-transition-duration: .75s;
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -moz-transition-property: all;
    -moz-transition-duration: .75s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -ms-transition-property: all;
    -ms-transition-duration: .75s;
    -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-property: all;
    transition-duration: .75s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

    #plot_options_window > div {
        background-color: #e0ecfa;
        border: solid 4px rgb(0, 123, 209);
    }

    #plot_options_window thead {
        position: sticky;
        top: 0;
        text-align: center;
        padding: 2px 0px 2px 0px;
        background-color: #eee;
        width: 100%;
        border-collapse: collapse;
        margin-top: 3px;
        color: #eee;
        font-size: larger;
        font-weight: bold;
    }

    #plot_options_window tbody {
        top: 0;
        text-align: center;
        vertical-align: middle;
        padding: 2px 0px 2px 0px;
        width: 100%;
        border-collapse: collapse;
        margin-top: 3px;
    }

    #plot_options_window .instrument {
        xcolor: rgb(0, 123, 209);
        text-align: center;
        background-color: transparent;
    }

    #plot_options_window .tablecontainer_variableoptions {
        overflow-y: auto;
        text-align: center;
        background-color: white;
    }

    #plot_options_window .variable_options {
        width: 80%;
        text-align: center;
        margin: auto;
    }

    #plot_options_window table.variable_options .variable_timebased {
        width: 40%;
    }

    #plot_options_window table.variable_options .options_timebased {
        width: 15%;
    }

    #plot_options_window table.variable_options .variable_correlation {
        width: 40%;
    }

    #plot_options_window table.variable_options .options_correlation {
        width: 20%;
    }

    #plot_options_window .tablecontainer_bandoptions {
        overflow-y: auto;
        text-align: center;
        background-color: white;
    }

    #plot_options_window .band_options {
        width: 80%;
        text-align: center;
        margin: auto;
    }

        #plot_options_window .band_options td {
            padding-bottom: 2px;
        }

        #plot_options_window .band_options input.input_values {
            width: 80%;
            xfont-size: small;
            text-align: center;
        }

    #plot_options_window table.band_options .variable_sigma {
        width: 60%;
    }

    #plot_options_window table.band_options .options_sigma {
        width: 40%;
    }

    #plot_options_window table.band_options .limit_userdefined {
        width: 25%;
    }

    #plot_options_window table.band_options .options_userdefined {
        width: 50%;
    }


    #plot_options_window .table_errormessages {
        overflow-y: auto;
        text-align: center;
        background-color: white;
    }

    #plot_options_window .errormessages {
        width: 80%;
        text-align: center;
        margin: auto;
    }

    #plot_options_window table.errormessages .count {
        width: 10%;
        text-align: center;
    }

    #plot_options_window table.errormessages .message {
        width: 90%;
        text-align: left;
    }

#site_container TABLE.borderless_edges {
    border-collapse: collapse;
}

    #site_container TABLE.borderless_edges > TBODY > TR > TD:first-child {
        border-left: none !important;
    }

    #site_container TABLE.borderless_edges > TBODY > TR > TD:last-child {
        border-right: none !important;
    }

#site_container .device-description {
    background-color: darkred;
}

.toolTip {
    font-family: "Trebuchet MS", Verdana, Arial;
    color: rgb(60, 60, 59);
    text-align: center;
    border: 1px solid #ccc;
    padding: 4px;
    background-color: #eee;
    opacity: 0.95;
}

#debug * {
    font-size: small;
}