:root {
    --PAGE_CONTAINER_MARGIN: 32px;
    
    --HEADER_HEIGHT: 58px;
    
    --MAP_HEIGHT: 50%;
    --SUMMARY_BAR_HEIGHT: 96px;

    --FOOTER_HEIGHT: 48px;

    --PANEL_SHADOW: 0 10px 24px rgba(16, 40, 73, 0.08);
    --RADIUS_COMMON: 6px;
    --PADDING_COMMON: 6px;

    --COLOR_BG_PRIMARY: #e6ece5;

    --COLOR_TEXT_PRIMARY: #2e2e2e;

    --COLOR_DARK_GRAY: rgb(80,80,80);
    --COLOR_LIGHT_GRAY: rgb(145, 145, 145);
    --COLOR_LIGHT_LIGIHT_GRAY: rgb(220, 220, 220);

    --PRIMARY_COLOR: #177ddc;

    --AQI_TH_CLASS_1_COLOR: rgba(130, 215, 255, 0.75);
    --AQI_TH_CLASS_2_COLOR: rgba(155, 255, 208, 0.75);
    --AQI_TH_CLASS_3_COLOR: rgba(255, 249, 165, 0.75);
    --AQI_TH_CLASS_4_COLOR: rgba(255, 221, 183, 0.75);
    --AQI_TH_CLASS_5_COLOR: rgba(255, 161, 161, 0.75);
    --AQI_TH_CLASS_1_COLOR_HOVERED: rgba(130, 215, 255, 1.00);
    --AQI_TH_CLASS_2_COLOR_HOVERED: rgba(155, 255, 208, 1.00);
    --AQI_TH_CLASS_3_COLOR_HOVERED: rgba(255, 249, 165, 1.00);
    --AQI_TH_CLASS_4_COLOR_HOVERED: rgba(255, 221, 183, 1.00);
    --AQI_TH_CLASS_5_COLOR_HOVERED: rgba(255, 161, 161, 1.00);
}

* {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

/**
 * ELEMENT WIDTH
 */
.width_10pct { width: calc(10%) !important; }

.icon_info {
  font-size: 14px;
  cursor: pointer;
}

/*********************************************************************
 * DEVICE INFO
 *********************************************************************/
/**
 * ALIGNEMENT
 */

#page_container {
    background-color: #edf2e9;
    background-image:
        radial-gradient(circle, rgba(235, 166, 190, 0.34) 0 2px, transparent 2.2px),
        radial-gradient(circle, rgba(146, 202, 145, 0.32) 0 2px, transparent 2.2px),
        radial-gradient(circle at 12% 18%, rgba(250, 131, 173, 0.78) 0%, rgba(248, 211, 224, 0) 42%),
        radial-gradient(circle at 88% 82%, rgb(173, 255, 162) 0%, rgba(210, 233, 207, 0) 44%),
        linear-gradient(125deg, #f8e9ee 0%, #eef3e9 48%, #e3f0e2 100%);
    background-size: 16px 16px, 19px 19px, auto, auto, auto;
    background-position: 0 0, 9px 9px, center, center, center;
    width: calc(100vw) !important;
    height: calc(100vh) !important;
    padding: var(--PAGE_CONTAINER_MARGIN);
    margin: 0;
}

#content_container {
    background-color: white;
    border: var(--PADDING_COMMON) solid white;
    display: block;
    width: calc(100%) !important;
    height: calc(100%) !important;
    border-radius: 16px;
    overflow: hidden;

    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.1));
}

#header_container {
    display: flex;
    color: var(--COLOR_TEXT_PRIMARY);
    width: calc(100%) !important;
    height: calc(var(--HEADER_HEIGHT));
    padding: var(--PADDING_COMMON);
}
#header_container .header_logo {
    flex: 1;
    gap: 16px;
}
#header_container .header_title {
    flex: 20;
    font-size: 32px;
    font-family: "IBM Plex Sans Thai Looped", sans-serif;
    font-optical-sizing: auto;
    text-align: right;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    padding-right: calc(var(--PADDING_COMMON));
}

#footer_container {
    display: block;
    background-color: rgba(240,245,245,1.0);
    border-top: 1px solid rgba(230,235,230,1.0);
    color: var(--COLOR_TEXT_PRIMARY);
    width: calc(100%) !important;
    height: calc(var(--FOOTER_HEIGHT));
    text-align: center;
    font-size: 16px;
    padding-top: 14px;
}

/**
 * BUTTON
 */
.active {
    background: var(--PRIMARY_COLOR);
    color: white;
}

/**
 * TABLE
 */
/**
 * STATION TYPE
 */

/**
 * TOP TOOLBOX
 */

/**
 * STATISTIC CARD
 */

/**
 * FORM
 */

/**
 * GENERIC ADMIN TABLE
 */
/**
 *
 */
/**
 * PAGE HEADER/TOP-BAR
 */

@media (max-width: 640px) {
    :root {
        --PAGE_CONTAINER_MARGIN: 10px;
        --HEADER_HEIGHT: 54px;
        --FOOTER_HEIGHT: 44px;
    }

    #page_container {
        width: 100%;
        min-height: 100vh;
        height: auto !important;
        padding: var(--PAGE_CONTAINER_MARGIN);
    }

    #content_container {
        height: auto !important;
        min-height: calc(100vh - 2 * var(--PAGE_CONTAINER_MARGIN));
        border-radius: 8px;
    }

    #header_container {
        align-items: center;
        min-height: var(--HEADER_HEIGHT);
        height: auto;
        padding: 5px;
    }

    #header_container .header_logo {
        flex: 0 0 40px;
        width: 40px;
    }

    #header_container .header_logo img {
        display: block;
        max-width: 36px;
        height: auto;
    }

    #header_container .header_title {
        flex: 1;
        min-width: 0;
        font-size: 20px;
        line-height: 1.1;
        text-align: left;
        padding: 0 4px;
    }

    #footer_container {
        height: auto;
        min-height: var(--FOOTER_HEIGHT);
        padding: 12px 8px;
        font-size: 12px;
    }
}