/* =========================================
   RAINFALL HOTSPOT
========================================= */

.rainfall-title{

    text-align:center;

    color:#00c3ff;

    font-size:26px;

    letter-spacing:1px;

    margin-bottom:20px;

    text-shadow:
        0 0 12px #00c3ff;

}

/* =========================================
   MAP
========================================= */

#map{

    height:70vh;

    width:100%;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            .1
        );

}

/* =========================================
   TOP CHART PANEL
========================================= */

#top_chart_panel{

    margin:20px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:20px;

    border-radius:12px;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 0 15px rgba(
            0,
            195,
            255,
            .2
        );

}

#top_chart_panel h2{

    margin-top:0;

    color:#00c3ff;

}

/* =========================================
   PANELS
========================================= */

.panel-container{

    padding:20px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    align-items:flex-start;

}

.panel{

    flex:1;

    min-width:350px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    padding:20px;

    border-radius:12px;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 0 15px rgba(
            0,
            195,
            255,
            .2
        );

}

#all_stations_panel{

    flex:1.08;

}

.panel h2{

    margin-top:0;

    color:#00c3ff;

}

/* =========================================
   FORM ELEMENTS
========================================= */

label{

    display:block;

    margin-bottom:12px;

}

input[type="date"]{

    padding:8px;

    border-radius:6px;

    border:none;

    margin-left:5px;

}

/* =========================================
   BUTTONS
========================================= */

.button-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:15px;

}

button{

    margin-top:10px;

    padding:8px 14px;

    border:none;

    border-radius:6px;

    background:#00c3ff;

    color:black;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
        0 0 10px rgba(
            0,
            195,
            255,
            .4
        );

}

button:hover{

    background:#33e6ff;

}

/* =========================================
   TABLES
========================================= */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:10px;

}

th,
td{

    border:1px solid #444;

    padding:8px;

    text-align:center;

}

th{

    background:#00c3ff;

    color:black;

}

#station_table{

    overflow-x:auto;

}

#all_stations_table{

    overflow-x:auto;

}

/* =========================================
   CHARTS
========================================= */

#station_chart{

    height:320px !important;

    width:100% !important;

}

#day_chart{

    height:250px !important;

    width:100% !important;

}

#day_chart_container{

    height:280px;

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    .rainfall-title{

        font-size:20px;

    }

    #map{

        height:45vh;

    }

    #top_chart_panel{

        margin:10px;

        padding:15px;

    }

    #station_chart{

        height:220px !important;

    }

    .panel-container{

        padding:10px;

        gap:15px;

    }

    .panel{

        width:100%;

        min-width:100%;

        padding:15px;

    }

    #all_stations_panel{

        flex:1;

    }

    input[type="date"]{

        width:100%;

        margin-top:5px;

        margin-left:0;

        box-sizing:border-box;

    }

    .button-group{

        flex-direction:column;

    }

    .button-group button{

        width:100%;

    }

    #day_chart{

        height:220px !important;

    }

    #day_chart_container{

        height:240px;

    }

    table{

        font-size:12px;

    }

}