/* Map to display data */
.map {
    width: auto;
    height: 392px;
    margin: 10px 20px 0px 20px;
    position: relative;
    text-align: center;
}

.map:-webkit-full-screen {
    height: 100%;
    margin: 0;
}

.map:fullscreen {
    height: 100%;
}

.map .ol-rotate {
    top: 3em;
}

/* Selection panels */
/* Left panel */
#left_panel, #right_panel {float: left; vertical-align: top;}
#left_panel {width: 20%; margin: 0px 0px 20px 0px;} 

#upper_selection_panel {
    /*width: 180px; */
    width: auto;
    height: auto;
    margin: 20px 0px 0px 0px;
    border-style: solid;
    border-radius: 5px;
    border-color: #CDCDF6;
    background-color: #CDCDF6;
    top: 0%;
}

.selection_items_scenarios {
    width: auto;
    height: auto;
    margin: 3px 3px 3px 5px;
}

.selection_labels {
    display: inline-block;
    text-align: left;
    padding: 7px;
}

#lower_selection_panel {
    width: auto;
    height: auto;
    margin: 0.75em 0px 0px 0px;
    border-style: solid;
    border-radius: 5px;
    border-color: #CDCDF6; 
    background-color: #CDCDF6; 
}

.selection_header_solutions {
    width: auto;
    height: auto;
    margin: 3px 3px 3px 5px;
    padding: 7px;
}

.selection_items_solutions {
    width: auto;
    height: auto;
    margin: -2px 3px 3px 5px;
}

.label_solutions {
    margin-left: 30px;
    display: block;
}

input[type=radio] {
    float: left;
}

/* Right panel */
#right_panel {width: 80%;}

#right_panel_text_boxes {
    /*margin: 30px 0px 0px 20px; */ /* top, right, bottom, left */
    margin: 0px 0px 0px 20px; /* top, right, bottom, left */
}

/* Feature overlays for legend and infobox */
#legend {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.8);
    color: #555;
    border: 0;
    transition: opacity 100ms ease-in;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 12px;
    text-align: left;
}

#infoBox {
    z-index: 1;
    position: absolute;
    top: 70px;
    left: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.8);
    color: #555;
    border: 0;
    transition: opacity 100ms ease-in;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 12px;
    text-align: left;
}

#gaugePopup {
    z-index: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.8);
    color: #555;
    border: 0;
    transition: opacity 100ms ease-in;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 12px;
}


/* Images */
.centered_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:0.5em;"
}


/* OpenLayers control bar */
.ol-control button {
    height: 10em;
}