@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap');

@import './css/_variables.css';
@import './css/_grid.css';
@import './css/_graphs.css';
@import './css/_navigation.css';
@import './css/_general.css';

*, *::before, *::after{
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Varela Round, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em 0;
	font-weight: 400;
	line-height: 1.2;
}

h1 {
	font-size: 2em;
}

a {
	color: inherit;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: calc(1em - 2px);
	color: #555;
	background-color: #f0f0f0;
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

.absolute{
	position: absolute;
}

.fixed{
	position: fixed;
}

.absolute.top,
.fixed.top{
	top: 0;
}

.absolute.right,
.fixed.right{
	right: 20px;
}

.bigger{
	font-size: 1.2em;
}

.full-screen-wrapper{
	width: 100%;
	height: 100vh;
}

.flex-wrapper{
	display: flex;
}

.flex-wrapper.inherit-dimensions{
	width: inherit;
	height: inherit;
}

.knowledge-bg{
	background-color: var( --knowledge-color );
	color: #FEFEFE;
}

.simulation-bg{
	background-color: var( --simulation-color );
	color: #FEFEFE;
}

.affectation-bg{
	background-color: var( --affectation-color );
	color: #FEFEFE;
}

.color.bio{
	color: var( --epm-green );
}
.color.soc{
	color: var( --highlight-yellow );
}
.color.phy{
	color: var( --highlight-blue );
}
.stroke-none{
	stroke: none !important;
}
.fill-none{
	fill: none !important;
}
.stroke.white{
	stroke: var( --white );
}
.fill.white{
	fill: var( --white );
}
.stroke.black{
	stroke: var( --black-text );
}
.fill.black{
	stroke: var( --black-text );
}
.stroke.bio{
	stroke: var( --epm-green );
}
.fill.bio{
	fill: var( --epm-green );
}
.stroke.soc{
	stroke: var( --highlight-yellow );
}
.fill.soc{
	fill: var( --highlight-yellow);
}
.stroke.phy{
	stroke: var( --highlight-blue);
}
.fill.phy{
	fill: var( --highlight-blue);
}

.tag{
	padding: 3px 6px;
	margin-right: 5px;
	border-radius: 6px;
}

ul.no-style{
	padding: 0;
	list-style: none;
}

@media (min-width: 400px) {
	body {
		font-size: 16px;
	}
}

.full-screen-wrapper rect.background{
	fill: transparent;
}


.location-indicator rect.background{
	fill: none;
	fill-opacity: 0.5;
}


.location-indicator .map-marker{
	fill: #DEDEDE;
}

.location-indicator .map-marker.highlight{
	fill: #fab20b;
	stroke: #FAFAFA;
}

.location-indicator .map-marker-wrapper .label{
	fill: #FEFEFE;
}

.info-box{
	background-color: #FFFFFF;
	width: 380px;
	padding: 20px;
	color: var( --text-color );
	border-radius: 10px;
	/* max-height: calc( 100vh - 100px ); */
	overflow-y: auto;
}

.info-box .title{
	text-align: center;
}

.info-box.menu{
	width: 200px;
	list-style: none;
	font-size: 1.2em;
}

.info-box.menu.main{
	text-align: center;
}

.menu.main .selected > a,
.menu.management .selected > a{
	color: var( --epm-green-darker );
}

.menu.component{
	font-size: 1em;
}

.menu.component .title{
	margin: 0 0 5px;
	color: var( --highlight );
}


.menu.component .component-options .selected{
	background-color: var( --epm-green );
	padding-left: 30px;
	padding-right: 30px;
	margin-left: -20px;
	margin-right: -20px;
	color: white;
	font-weight: 600;
}

.sample-marker:hover .main-point,
.sample-marker.selected .main-point{
	fill-opacity: 1;
	stroke: var( --highlight );
}

.variable-selector span.selected{
	font-weight: 600;
	color: var( --highlight );
}

#right-bar{
	width: 380px;
}


.move .scroll-button{
	fill: none;
	stroke-width: 2px;
	stroke: white;
}

.metadata.bio .name{
	color: var( --epm-green );
}

.meta-data{
	font-family: var( --mono-font );
	font-size: 11px;
}

.attribution{
	position: absolute;
	bottom: 0;
	right: 0;
}

.attribution.dark{
	background-color: rgba( 13, 13, 13, 0.9 );
	color: #FEFEFE
}

.attribution ul{
	margin: 0;
	padding: 3px 8px;
	list-style: none;
	font-size: 9px;
}

.attribution.dark a{
	color: var( --epm-green );
	text-decoration: none;
}

.attribution button{
	display: none;
}

.ol-scale-line{
	position: absolute;
	top: 50px;
	left:  50%;
	transform: translateX( -50% );
	font-size: 9px;
	padding: 3px 8px;
	background-color:  rgba( 13, 13, 13, 0.9);
}

.ol-scale-line-inner{
	border-bottom: solid 1px var( --epm-green );
	border-left: solid 1px var( --epm-green );
	border-right: solid 1px var( --epm-green );
	text-align: center;
}

.ol-scale-bar{
	position: absolute;
	bottom: 0;
	left:  50%;
	transform: translateX( -50% );
	font-size: 9px;
	padding: 3px 8px 1px;
	background-color:  rgba( 13, 13, 13, 0.9);
	min-width: 100px;
	max-width: 100px;
}

.ol-scale-line-bar{
	border-bottom: solid 1px var( --epm-green );
	border-left: solid 1px var( --epm-green );
	border-right: solid 1px var( --epm-green );
	text-align: center;
}

.ol-scale-text{
	text-align: center;
	min-width: 84px;
	max-width: 84px;
}

.ol-scale-singlebar,
.ol-scale-step-marker,
.ol-scale-step-text{
	display: none;
}

.center-coordinates{
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 9px;
	padding: 3px 8px 1px 8px;
	background-color: rgba(13,13,13,0.9);
}

.center-coordinates p{
	margin: 0 ;
}
.center-coordinates .green{
	color: var( --epm-green );
}

.ol-rotate{
	position: absolute;
	left: 0;
	bottom: 60px;
}

.attributions-logo{
	width: 30px;
}