@charset "UTF-8";

:root {
  --echo-control-color: #007896;
  --echo-site-bg-color: #283264;
  --echo-footer-color: #87c6c6;
  --echo-slidercontrol-column-gap: 4em;
}


.ec-widget, .ec-widget:hover, .ec-widget:focus, .ec-widget:active {
	background: unset;
	background-color: var(--echo-control-color);
	color: white;
	border: 0;
	border-radius: 0;
	padding: 0.5em 0.7em;
	outline: none;
	box-shadow: none;
}

.ec-widget:hover {
	background-color: var(--echo-site-bg-color);
}

.ec-slidecontrol {
	margin-top: 1em;
	margin-left: 2em;
	margin-right: 2em;
	display: inline-flex;
	flex-flow: row nowrap;
}

.ec-slidecontrol-multi-container {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
/* non funziona in safari e epiphany (webkit) agosto 2020 (https://bugs.webkit.org/show_bug.cgi?id=206767) */
/* 	column-gap: var(--echo-slidercontrol-column-gap); */
/* 	-webkit-column-gap: var(--echo-slidercontrol-column-gap); */
}

.ec-slidecontrol-counter-countainer {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	margin-left: 0.3em;
}

.ec-slidecontrol-button-container{
	display: inline-flex;
	justify-content: space-between;
	flex-flow: column nowrap;
	margin-left: 0.3em;
}

.ec-slidecontrol-dual-parent {
	margin-top: 1em;
}

.ec-slidecontrol-select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ec-slidecontrol-select option {
	font-weight:normal;
	background-color: white;
	color: black;
}

.ec-slidecontrol-image {
	padding-top: 1em;
}

.ec-slidecontrol-image img {
	width: 100%;
 	height: auto;
	border-radius: 0.5em;
}

.ec-slider {
	margin-top: 2em;
}

.ec-slider img {
	width: 100%;
}

.ec-grid-container {
	display: inline-grid;
	margin-top: 2em;
	grid-template-columns: repeat(3, 1fr);
}

.ec-grid-container img {
	width: 100%;
}

/* 
 * COLORBAR
 */

.ec-colorbar-container {
	margin-top: 2em;
	width: 100%;
	margin-left: auto;	
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.ec-h-colorbar-rainbow {
	width: 100%;
	height: 30px;
	background: linear-gradient(to left,
		 #800000 0%
		,#800000 4.16667%
		,#b20000 4.16667%
		,#b20000 8.33333%
		,#e40000 8.33333%
		,#e40000 12.5%
		,#ff2600 12.5%
		,#ff2600 16.6667%
		,#ff4f00 16.6667%
		,#ff4f00 20.8333%
		,#ff7800 20.8333%
		,#ff7800 25%
		,#ffa100 25%
		,#ffa100 29.1667%
		,#ffca00 29.1667%
		,#ffca00 33.3333%
		,#f9f400 33.3333%
		,#f9f400 37.5%
		,#d5ff22 37.5%
		,#d5ff22 41.6667%
		,#b1ff46 41.6667%
		,#b1ff46 45.8333%
		,#8dff6a 45.8333%
		,#8dff6a 50%
		,#6aff8d 50%
		,#6aff8d 54.1667%
		,#46ffb1 54.1667%
		,#46ffb1 58.3333%
		,#22ffd5 58.3333%
		,#22ffd5 62.5%
		,#00e3f9 62.5%
		,#00e3f9 66.6667%
		,#00b7ff 66.6667%
		,#00b7ff 70.8333%
		,#008bff 70.8333%
		,#008bff 75%
		,#005eff 75%
		,#005eff 79.1667%
		,#0032ff 79.1667%
		,#0032ff 83.3333%
		,#0006ff 83.3333%
		,#0006ff 87.5%
		,#0000e4 87.5%
		,#0000e4 91.6667%
		,#0000b2 91.6667%
		,#0000b2 95.8333%
		,#000080 95.8333%
		,#000080 100%
		,transparent
	);
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

/* awk '{printf("\t,%s %g%\n", $1, sup); sup=(NR/24)*100; printf("\t,%s %g%\n", $1, sup);}' */
.ec-h-colorbar-viridis {
	width: 100%;
	height: 30px;
	background: linear-gradient(to left,
		 #fde725 0%
		,#fde725 4.16667%
		,#e2e418 4.16667%
		,#e2e418 8.33333%
		,#c5e021 8.33333%
		,#c5e021 12.5%
		,#a8db34 12.5%
		,#a8db34 16.6667%
		,#8bd646 16.6667%
		,#8bd646 20.8333%
		,#70cf57 20.8333%
		,#70cf57 25%
		,#58c765 25%
		,#58c765 29.1667%
		,#42be71 29.1667%
		,#42be71 33.3333%
		,#2fb47c 33.3333%
		,#2fb47c 37.5%
		,#24aa83 37.5%
		,#24aa83 41.6667%
		,#1fa088 41.6667%
		,#1fa088 45.8333%
		,#1f958b 45.8333%
		,#1f958b 50%
		,#228b8d 50%
		,#228b8d 54.1667%
		,#26818e 54.1667%
		,#26818e 58.3333%
		,#2a768e 58.3333%
		,#2a768e 62.5%
		,#2f6c8e 62.5%
		,#2f6c8e 66.6667%
		,#34608d 66.6667%
		,#34608d 70.8333%
		,#3a548c 70.8333%
		,#3a548c 75%
		,#3f4889 75%
		,#3f4889 79.1667%
		,#443b84 79.1667%
		,#443b84 83.3333%
		,#472e7c 83.3333%
		,#472e7c 87.5%
		,#482071 87.5%
		,#482071 91.6667%
		,#471164 91.6667%
		,#471164 95.8333%
		,#440154 95.8333%
		,#440154 100%
		,transparent
	);
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.ec-colorbar-labels-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 100%;
}

.ec-colorbar-labels-grid span {
	float: left;
	font-size: 80%;
}

.ec-colorbar-label {
	text-indent: -0.3em;
}

.ec-colorbar-labels-grid span.ec-colorbar-label-first {
	float: right;
	position: relative;
	left: 0.3em;
}

.ec-colorbar-ticks-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: 0.3em;
	width: 100%;
}

.ec-colorbar-ticks-grid  div {
	border-left: 1px solid black;
}

.ec-colorbar-ticks-grid  div:last-of-type {
	border-right: 1px solid black;
}

.ec-colorbar-unit {
	font-size: 80%;
	text-align: center;
}

.maps a {
 	text-decoration: underline;
}

/*
 * SLIDER
 */
.bx-wrapper .bx-pager {
	font-size: unset;
	font-weight: bold;
	color: #666;
	padding-top: unset;
	padding-left: 3em;
	padding-right: 3em;
}

.bx-start, .bx-stop {
	text-indent: unset !important;
	background: unset !important;
	font-size: 2em;
	color: var(--echo-control-color) !important;
	display: inline-flex !important;
	text-decoration: none;
	width: unset !important;
	height: unset !important;
}

.bx-start:hover, .bx-stop:hover {
	text-decoration: none;
}

.bx-start:link, .bx-stop:link {
	text-decoration: none;
}

.bx-controls {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.bx-controls-auto {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	bottom: unset !important;
}

.bx-pager {
	position: unset !important;
	width: unset !important;
}

.bx-pager-link {
	width: 1em !important;
	height: 1em !important;
	margin: 0 !important;
	margin-left: 0.1em !important;
	margin-right: 0.1em !important;
}

.bx-pager-link.active {
	border-color: var(--echo-footer-color) !important;
}

@media all  and ( max-width: 768px) {

	.ec-grid-container {
		grid-template-columns: repeat(1, 1fr);
	}

}