style.css

.map {
    height: 600px;
    width: 100%;
    padding-bottom: 10px;
}

div.map div.ol-zoom {
    top: 30px;
}

#loadingBar {
    top:0;  
    left:100px;
    width: 80%;
    height: 60%;
    display:table;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
}
#loadingBar i {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.loading-icon {
    font-size: 50px;
    color:white;
    height: 50px;
    width: 50px;	
}	

div.mapControls input{
    color: #fff;
    background-color: #17a2b8;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 12px;
}

input.btn-zoom{
    cursor:pointer;
}
        
div.banner{
    width: 100%;
    text-align: center;
    background: #0d457b;
    background: -moz-linear-gradient(-45deg, #0d457b 0%, #798eea 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #0d457b), color-stop(100%, #798eea));
    background: -webkit-linear-gradient(-45deg, #0d457b 0%, #798eea 100%);
    background: -o-linear-gradient(-45deg, #0d457b 0%, #798eea 100%);
}

input.btn-icon{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: white;			
    border: none;  
    padding: 5px;
    text-align: center;
    text-decoration: none;   
    margin: 2px 1px;
    border-radius: 50%;
}

span.date-info{
    color: #fff;			
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 14px;
}

.selection-panel{
    display: flex; 
    gap: 5%;
}