/*--------------------------------------*/
/*     yec water levels
/*     June 16, 2025
/*--------------------------------------*/

.water-levels .tab-container {
  padding: 0;
  margin: 4em 0 0;
}

.water-levels .tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.water-levels .tab {
  padding: 10px 20px;
  cursor: pointer;
  background: rgb(120, 190, 32);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(120, 190, 32);
  text-transform: uppercase;
}

.water-levels .tab.active {
	position: relative;
	background: rgb(255, 255, 255);
	color: rgb(120, 190, 32);
	border-bottom: 1px solid rgb(255, 255, 255)!important;
}
.water-levels .tab.active::after {
	content: '';
	width: 100%;
	background: rgb(255, 255, 255);
	height:2px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
}

.water-levels .tab-content {
  display: none;
  padding: 50px 30px;
  border: 1px solid rgb(120, 190, 32);
}

.water-levels .tab-content.active {
  display: block;
}


.water-levels .alert-success p{
	color: rgb(120, 190, 32);
	font-weight: 600;
}
.water-levels .errors{
	list-style-type: none;
	color: red;
}


.water-levels-comment{
	margin-top: 20px;
	margin-bottom: 40px;
}
	.water-levels-comment .highlight{
		margin-bottom: 10px;
	}






/**
 * GENERAL TEXT
 */

	.water-levels h2,
	.water-levels h3,
	.water-levels h4 {
		font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
		font-weight: 300;
		text-transform: uppercase;
	}
		.water-levels h2 {
			color: rgb(120, 190, 32);
			font-weight: 600;
			font-size: 125%;
			margin: 0 0 0.15em;
		}
		.water-levels h4 {
			color: rgb(76, 76, 76);
			font-size: 90%;
			font-weight: 600;
			line-height: 1.4em;
		}

	.water-levels p.reference {
		font-size: 90%;
		font-style: italic;
		margin: 1.5em 0 -1.5em;
	}


/**
 * CHARTS
 */

	.chart-pane {
		margin: 0 0 3.5em;
	}
		.chart-container {
		}
			.chart-container > div.chart {
				height: 40vw;
			}
			@media only screen and (min-width: 600px) { .chart-container > div.chart { height: 35vw; } }
			@media only screen and (min-width: 900px) { .chart-container > div.chart { height: 30vw; } }
			@media only screen and (min-width: 1250px) and (min-height: 760px) { .chart-container > div.chart { height: 30vw; } }




/**
 * CHART LEGEND
 */

	ul.chart-legend {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		margin-left: -15px;
		margin-right: -15px;
		list-style: none;
	}
		ul.chart-legend li {
			padding: 0.5em 1em;
		}
		@media only screen and (min-width: 600px) {
			ul.chart-legend li {
				padding-left: 1.5em;
				padding-right: 1.5em;
			}
		}

		ul.chart-legend li h4 {
			margin: 0;
		}
		ul.chart-legend li p {
			text-transform: none;
			margin: 0;
		}

		ul.chart-legend li h4::after {
			content: '';
			display: block;
			height: 3px;
			width: 25px;
		}
			ul.chart-legend li.year_4		h4::after { background-color: #66CFE7; }
			ul.chart-legend li.year_3		h4::after { background-color: #9ACF58; }
			ul.chart-legend li.year_2		h4::after { background-color: #F4C65A; }
			ul.chart-legend li.year_1		h4::after { background-color: #F78E47; }