body{
    background-color: #4a6c99; /* blue 1 */
}


.dataTitle{
    display: inline-block;
    font-weight: bold;
    padding-top:0.5em;
}

.dataValue{
    display: inline-block;
    padding-top:0.5em;
}

.infoPanelTitle{
    font-size:1.5em;
    color:white;
    font-weight:bold;
}

#generalContainer{
    width: 100%;
}

#mapPanel { 
    display: inline-block;
    height: 97%;
    width: 70%;
    vertical-align:top;
    border:solid;
    border-color: azure;
    border-width: 2px;
    border-radius: 10px;
}
#infoPanel{
    display: inline-block;
    height: 76vh;
    width: 25%;
    vertical-align:top;
    background-color: #4a6c99; /* blue 1 */
    border:solid;
    border-color: azure;
    border-width: 2px;
    border-radius: 10px;
    color:white;
    padding: 1em;
}

@media(width<768px){
    #mapPanel { 
        display: block;
        height: 100vh;
        width: 100%;
        z-index:0;
    }
    #infoPanel{
        display: none;
        position: absolute;
        transition: width 2s;
        right:0px;
        top:0px;
        width: 0%;
        hight:0px;
        z-index:10;
    }
    
}