@import url("ol.acc3c7c2254b.css");
@import url("ol-ext.0d39995da2aa.css");

:root {
    --map-menu-width: 12rem;
}

#main-content-block {
	min-height: unset;
}

#map {
	position: fixed;
	inset: var(--header-height) var(--map-menu-width) 0 0;
}

#map-menu {
    position: fixed;
    width: var(--map-menu-width);
	right: 0;
	top: var(--header-height);
	bottom: 0;
	overflow: auto;
}

#overlay-toggle {
	display: block;
	width: 70%;
	margin: 1em auto;
	font-size: 1.2em;
}

.variable-display {
	text-align: center;
	padding: 0 0.5em;
	margin-bottom: 1em;
}

.primary-variable, .secondary-variable {
	display: block;
}

.primary-variable {
	font-size: 2em;
}

.secondary-variable {
	font-size: 0.85em;
}

.uninitialized-variable {
	margin-top: 0.5em;
	font-size: 0.9em;
	font-weight: 300
}

#colorbar {
    display: block;
    margin: 0 auto;
    margin-top: 1.5em;
    padding: 0.2em 0;
    /* See to avoid getting crazy : https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container */
    height: 15em;
}

.ol-overlay {
    background-color: rgba(0,0,0,0.7);
}

#map-overlay-content {
    display: flex;
    height: 100%;
}

#visu-type-menu {
    width: 10em;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}

#visu-type-menu img {
    max-width: 100%;
}

#visu-type-menu button {
    background-color: rgba(255, 255, 255, 0);
    border: unset;
    opacity: 0.6;
    transition: opacity 0.5s;
}

#visu-type-menu button:hover {
    opacity: 1;
}

#visu-type-menu button.active {
    opacity: 1;
}

#visu-type-menu > * {
    flex: 1 1 auto;
}

#ds-select-container-1, #ds-select-container-2 {
    flex: 1 1 0;
    padding: 0 2em;
    text-align: center;
	overflow: auto;
}

#ds-select-container-2 {
    border-left: solid 0.2em;
}

.ds-select {
    margin: 0 auto;
    max-width: 65%;
}

#ds-select-container-1 label, #ds-select-container-2 label{
    font-size:1.3em;
}

.field-panel-select {
    max-width: 10em;
    margin: 0 auto;
}

.dataset-description {
    margin-top: 1em;
    font-weight: 600;
}

.dataset-link {
    display: block;
    margin-bottom: 1em;
}

button.active {
	background-color: deeppink;
}