.top-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.back-btn{

    padding:8px 16px;

    background:
        linear-gradient(
            90deg,
            #7a5cff,
            #00c3ff
        );

    border:none;

    border-radius:20px;

    color:black;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
        0 0 12px rgba(
            0,
            195,
            255,
            .6
        );
}

.back-btn:hover{

    transform:scale(1.05);
}

.header{

    flex:1;

    text-align:center;

    font-size:32px;

    text-shadow:
        0 0 16px #00c3ff;
}

.info-text{

    text-align:center;

    font-size:18px;

    margin-top:5px;

    color:#ccefff;
}

#map{

    width:100%;

    height:600px;

    min-height:600px;

    border-radius:14px;

    background:#00131d;

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

    margin-top:20px;
}

.panel{

    margin-top:25px;

    padding:20px;

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

    border-radius:14px;

    box-shadow:
        0 0 25px rgba(
            0,
            195,
            255,
            .35
        );
}

.panel h2{

    font-size:28px;

    color:#00c3ff;

    margin-bottom:10px;
}

#station_name_display{

    font-size:22px;

    margin-bottom:10px;

    color:#ffeb99;
}

#station_table table{

    width:100%;

    border-collapse:collapse;

    font-size:20px;
}

#station_table th{

    padding:12px;

    font-size:22px;

    background:
        rgba(
            0,
            195,
            255,
            .25
        );
}

#station_table td{

    padding:10px;

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

.row-light{
    background:
        rgba(
            0,
            255,
            213,
            .18
        );
}

.row-matig{
    background:
        rgba(
            255,
            240,
            0,
            .18
        );
}

.row-zwaar{
    background:
        rgba(
            255,
            123,
            0,
            .18
        );
}

.row-zeer{
    background:
        rgba(
            255,
            26,
            26,
            .18
        );
}

.row-dry{
    background:
        rgba(
            0,
            195,
            255,
            .18
        );
}

.chart-wrapper{

    width:100%;

    height: 420px;

    margin-top:20px;

    margin-bottom:40px;

    padding:10px;

    border-radius:12px;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );
}

#station_chart{

    width:100% !important;

    height:100% !important;
}

.btn-download{

    margin-top:15px;

    margin-right:10px;

    padding:10px 18px;

    background:#00c3ff;

    color:black;

    border-radius:10px;

    font-weight:bold;

    border:none;

    cursor:pointer;
}

.btn-download:hover{

    transform:scale(1.05);
}

@media (max-width:768px){

    .top-bar{

        flex-direction:column;

        gap:15px;
    }

    .header{

        font-size:24px;
    }

    #station_table{

        overflow-x:auto;
    }

    #station_table table{

        min-width:600px;
    }

    .btn-download{

        width:100%;

        margin-bottom:10px;
    }

}