﻿
.dashboard_content {
    width: 100%;
    height: 100%;
    max-height: 890px;
    background-color: @secondary-color;
    box-sizing: border-box;
    .display-flex();
}

.dashboard_left_column {
    width: 50%;
    height: 100%;
    float: left;
    padding: 14px 7px 14px 14px;
    display: inline-block;
    box-sizing: border-box;
}

.dashboard_right_column {
    width: 50%;
    height: 100%;
    padding: 14px 14px 14px 7px;
    float: right;
    display: inline-block;
    box-sizing: border-box;
}

.dashboard_device_map {
    width: ~"calc(100% - 20px)"; // 10px border subject 20px from the width
    height: 456px;
    float: left;
    .display-flex();
    margin-bottom: 15px;
    border: 10px solid @background-color;
}

.static_map {
    width: ~"calc(100% - 20px)"; // 10px border subject 20px from the width
    height: 50%;
    min-width: 311.5px;
    min-height: 256px;
    max-height: 548px;
    float: left;
    .display-flex();
    border: 10px solid @background-color;
    margin-bottom: 15px;
}

.dashboard_alert_history {
    width: 100%;
    background-color: @background-color;
    float: left;
    border: none;
}

/*This style needs to remain in traditional CSS instead of BEM because the datatables are currently driven
    by CSS and the override rules prevent a BEM implementation from taking precedence. i.e. we don't get
    highlighted rules because this rule is overridden by the more specific rule provided in datatables.css.
    ('table.dataTable tbody tr' overrides '.alert_history_table__alert_row--selected')
*/
table#alertHistoryTable {
    tr.selectedAlert {
        background-color: lightblue;
    }
}

.dashboard_alert_history--static_height {
    height: 263px;
}

.dashboard_alert_history--dynamic_height {
    height: 317px;
}

@media screen and (max-width:1100px) {
    .dashboard_alert_history--dynamic_height {
        height: 463px;
    }
}

@media screen and (min-width:1500px) {
    .dashboard_alert_history--dynamic_height {
        height: 171px;
    }
}

.dashboard_alert_history__alertHeader {
    background-color: @background-color;
    height: 36px;
    line-height: normal;
    z-index: 0;
}

/*
    It seems this style needs to remain on the id instead of on a class, contrary to BEM practice, because
    the element in question is built by the datatables library and given this id. The class given to the element
    is more general and would apply to all data tables
*/
#alertHistoryTable_info {
    font-weight: 400;
    font-size: 1.5em;
}

.dashboard_telemetry_history {
    width: 100%;
    height: 715px;
    padding: 6px 6px 6px 6px;
    margin-bottom: 12px;
    background-color: @background-color;
    display: inline-block;
    box-sizing: border-box;
}

.dashboard_telemetry_history__telemetry_history_title {
    font-size: 1.4em;
    font-weight: 400;
}

.dashboard_telemetry_history__telemetry_history_graph {
    width: 100%;
    height: 100%;
    margin-left: 25px;
    box-sizing: border-box;
    background-color: @background-color;
}

.dashboard_device_selection {
    display: inline-block;
    width: 100%;
    margin-bottom: 6px;
}

.dashboard_device_selection__selection_form {
    .display-inline-flex();
}

.dashboard_device_selection__selection_form__label {
    float: left;
    font-size: 1.3em;
    font-weight: 400;
    white-space: nowrap;
    margin-right: 10px;
    width: auto;
}

.dashboard_device_selection__selection_form__selection_dropdown {
    margin: 0 0 0 0;
    min-height: 0;
    float: right;
    font-size: 1.2em;
    display: block;
    border-color: @form-textbox-border;
    background-color: @form-textbox-background;
    border-width: 1px;
    padding: 0 5px;
    box-sizing: content-box;
}

.dashboard_telemetry_history_summary {
    width: 100%;
    box-sizing: border-box;
    .display-inline-flex();
}

.dashboard_telemetry_history_summary__dashboard_telemetry_history_gauge {
    background-color: @background-color;
    height: 120px;
    width: 33.333%;
    box-sizing: border-box;
    padding: 6px;
    margin: 0;
    display: inline-block;
    border-top-width: 0;
    border-bottom-width: 0;
}

.dashboard_telemetry_history_gauge--leftGauge {
    border-right: 6px solid @body-background-color;
}

.dashboard_telemetry_history_gauge--centerGauge {
    border-right: 6px solid @body-background-color;
    border-left: 6px solid @body-background-color;
}

.dashboard_telemetry_history_gauge--rightGauge {
    border-left: 6px solid @body-background-color;
}

.dashboard_telemetry_history_gauge__telemetry_summary_gauge_control {
    width: 100%;
    height: 100%;
    background-color: @background-color;
    float: left;
}

.telemetry_summary_gauge_control__gauge_header {
    border: none;
    font-weight: 400;
    font-size: 0.9em;
}

.dashboard_job_indicators {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 6px;
}

.dashboard_job_indicator_container {
    background-color: @background-color;
    box-sizing: border-box;
    padding: 6px;
    display: inline-block;
    float: left;
    height: 120px;
    border-right: 6px solid @body-background-color;
    border-left: 6px solid @body-background-color;
}

.dashboard_job_indicator_container:first-child {
    border-left: 0px none @background-color;
}

.dashboard_job_indicator_container:last-child {
    border-right: 0px none @background-color;
}

.dashboard_job_indicator_title {
    font-size: 0.9em;
    text-align: left;
    color: @text-color;
    height: 2em;
}

.dashboard_job_indicator_value {
    font-size: 2em;
    text-align: center;
    color: @text-color;
    padding-top: 0.6em;
}