/*********************************************************************
 * AQI SUMMARY BAR
 *********************************************************************/
#aqi_summary_bar_container {
    display: flex;
    gap: calc(var(--PADDING_COMMON));
    padding: calc(var(--PADDING_COMMON));
    position: absolute;
    left: 48px;
    top: 0;
    width: calc(100% - 48px) !important;
    height: 56px !important;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.1));
    z-index: 99;
}

.aqi_summary_card {
    display: flex;
    flex: 1;
    min-width: 0;
    color: black;
    border: 2px solid white;
    height: 100% !important;
    border-radius: calc(var(--PADDING_COMMON));
    margin-top: calc(1.0*var(--PADDING_COMMON));
    padding: calc(1.5*var(--PADDING_COMMON));
    overflow: hidden;
    backdrop-filter: blur(3px);
}
.aqi_summary_card .aqi_summary_name {
    flex: 1;
    font-size: 12px;
    text-align: left;
    color: rgb(0, 0, 0);
    padding: 0;
}
.aqi_summary_card .aqi_summary_count {
    flex: 1;
    font-family: Oswald;
    font-size: 22px;
    text-align: right;
    color: rgb(0, 0, 0);
}
.summary_bar_card_class_1 {
    background-color: var(--AQI_TH_CLASS_1_COLOR);
}
.summary_bar_card_class_2 {
    background-color: var(--AQI_TH_CLASS_2_COLOR);
}
.summary_bar_card_class_3 {
    background-color: var(--AQI_TH_CLASS_3_COLOR);
}
.summary_bar_card_class_4 {
    background-color: var(--AQI_TH_CLASS_4_COLOR);
}
.summary_bar_card_class_5 {
    background-color: var(--AQI_TH_CLASS_5_COLOR);
}
.summary_bar_card_class_1:hover {
    background-color: var(--AQI_TH_CLASS_1_COLOR_HOVERED);
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
.summary_bar_card_class_2:hover {
    background-color: var(--AQI_TH_CLASS_2_COLOR_HOVERED);
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
.summary_bar_card_class_3:hover {
    background-color: var(--AQI_TH_CLASS_3_COLOR_HOVERED);
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
.summary_bar_card_class_4:hover {
    background-color: var(--AQI_TH_CLASS_4_COLOR_HOVERED);
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
.summary_bar_card_class_5:hover {
    background-color: var(--AQI_TH_CLASS_5_COLOR_HOVERED);
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}

/*********************************************************************
 * DEVICE INFO
 *********************************************************************/
#device_info_container {
    background-color: rgba(255,255,255,0.95);
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto !important;
    flex-direction: column;
    overflow-y: auto;
    z-index: 99;
}
#device_info_header #device_info_close_button {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}
#device_info_header #device_info_close_button::before,
#device_info_header #device_info_close_button::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 6px;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--COLOR_DARK_GRAY);
}
#device_info_header #device_info_close_button::before {
    transform: rotate(45deg);
}
#device_info_header #device_info_close_button::after {
    transform: rotate(-45deg);
}
#device_info_header #device_info_close_button:hover::before,
#device_info_header #device_info_close_button:hover::after,
#device_info_header #device_info_close_button:focus-visible::before,
#device_info_header #device_info_close_button:focus-visible::after {
    background-color: var(--PRIMARY_COLOR);
}
#device_info_container #device_info_body {
    padding: var(--PADDING_COMMON);
}
.device_info_row {
    display: flex;
    gap: 0px;
    border-bottom: 1px solid rgb(209, 209, 209);
    padding: calc(0.5*var(--PADDING_COMMON));
}

.device_info_field {
    flex: 1;
    font-size: 14px;
    color: var(--COLOR_LIGHT_GRAY);
}

.device_info_value {
    flex: 2;
}
#cbo_sel_chart_data_source {
    width: 100%;
    padding: var(--PADDING_COMMON);
}
#device_info_chart_container {
    display: flex;
    flex-direction: column;
    gap: var(--PADDING_COMMON);
    /* fill the remaining panel space below the device information */
    flex: 1 1 auto;
    min-height: 200px;
    width: 100% !important;
    padding: var(--PADDING_COMMON);
}
#device_info_chart_container > div:last-child {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
#device_info_chart {
    display: block;
    border: 1px solid rgb(194, 194, 194);
    width: 100% !important;
    height: 100% !important;
}
/*********************************************************************
 * SUMMARY BAR
 *********************************************************************/
#summary_bar_container {
    display: block;
    width: calc(100%);
    height: calc(var(--SUMMARY_BAR_HEIGHT));
}

.summary_bar_card_container {
    display: flex;
    gap: var(--PADDING_COMMON);
    width: 100%;
    height: 100%;
    padding: var(--PADDING_COMMON);
}

.summary_bar_card {
    flex: 1;
    border: 1px solid rgb(233, 233, 233);
    background-color: rgb(243, 243, 243);
    color:rgb(97, 97, 97);
    gap: var(--PADDING_COMMON);
    border-radius: calc(2*var(--RADIUS_COMMON));
    padding: calc(2*var(--PADDING_COMMON));
}
.summary_bar_card:hover {
    border: 1px solid rgba(255, 142, 231, 0.911);
    background-color: rgb(189, 21, 204);
    color: rgb(255, 255, 255);
}

.summary_bar_card .summary_card_name {
    font-size: 14px;
}
.summary_bar_card .summary_card_value {
    font-size: 32px;
    font-family: Oswald;
}
/*********************************************************************
 * DATA TABLE
 *********************************************************************/
#data_table_container {
    display: block;
    background-color: white;
    padding: calc(4*var(--PADDING_COMMON));
    width: calc(100%) !important;
    height: calc(100vh - 2*var(--PAGE_CONTAINER_MARGIN) - var(--HEADER_HEIGHT) - var(--SUMMARY_BAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--MAP_HEIGHT));
    overflow: hidden;
}

#data_table_container h3 {
    font-size: 22px;
    padding-bottom: calc(var(--PADDING_COMMON));
}

#data_table {
    width: calc(100%) !important;
}

#data_table th{
    border-top: 1px solid rgb(175, 175, 175);
    padding: var(--PADDING_COMMON);
}

#data_table td{
    border-top: 1px solid rgb(216, 215, 215);
    padding: calc(1.5*var(--PADDING_COMMON));
    text-align: center;
    font-size: 14px;
}

#data_table tbody tr:hover td {
    background-color: #fff5f8;
}

/*********************************************************************
 * AQI DATA STATUS
 *********************************************************************/
@media (max-width: 640px) {
    #aqi_summary_bar_container {
        position: absolute;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--PADDING_COMMON);
        left: 48px;
        top: 0;
        width: calc(100% - 48px) !important;
        height: auto !important;
        padding: var(--PADDING_COMMON);
    }

    .aqi_summary_card {
        min-width: 0;
        height: 48px !important;
        margin-top: 0;
        padding: var(--PADDING_COMMON);
    }

    .aqi_summary_card .aqi_summary_name {
        font-size: 11px;
        white-space: nowrap;
    }

    .aqi_summary_card .aqi_summary_count {
        font-size: 18px;
    }

    #device_info_container {
        right: 0;
        top: 0;
        bottom: 0;
        width: auto !important;
        height: auto !important;
        overflow-y: auto;
    }

    #device_info_chart_container {
        min-height: 220px;
    }

    #summary_bar_container {
        height: auto;
    }

    .summary_bar_card_container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
    }

    .summary_bar_card {
        min-width: 0;
        padding: var(--PADDING_COMMON);
    }

    .summary_bar_card .summary_card_name {
        font-size: 12px;
        white-space: nowrap;
    }

    .summary_bar_card .summary_card_value {
        font-size: 30px;
    }

    #data_table_container {
        height: auto;
        min-height: 0;
        padding: calc(2 * var(--PADDING_COMMON));
        overflow: visible;
    }

    #data_table_container h3 {
        font-size: 18px;
    }

    .responsive_table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #data_table {
        min-width: 720px;
    }
}