.mosaic-stats-container {
  text-align: center;
  font-family: Fira Sans;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: white;
}
.mosaic-stats-container-a {
  display: flex;
  margin: auto;
  width: fit-content;
  font-family: Fira Sans;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.mosaic-stat-a {
  border: solid black 2px;
  margin: 3px;
  border-radius: 3px;
  position: relative;
}
.mosaic-stat-a img {
  width: 50px;
}
.mosaic-stat-label-a {
  padding: 0 20px 0 5px;
  display: inline-block;
}
.grayscale {
  filter: grayscale(100%);
}

.mosaic-piece-position-container-a {
  position: absolute;
  top: 25px;
  left: 25px;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 30px;
  overflow: hidden;
  height: 30px;
}
.mosaic-piece-position-a {
  width: 30px;
  font-size: 18px;
  line-height: 26px;
  background: white;
  border-radius: 50%;
  height: 30px;
  color: #000;
  border: 3px #000 solid;
  vertical-align: middle;
  display: inline-block;
}
/* bar chart */
body, table, input, select, textarea {
}
.nee-graph {
	margin: auto;
	margin-bottom:1em;
	font:normal 100%/150% fira,arial,helvetica,sans-serif;
}
.nee-graph caption {
	text-align: center;
	font:bold 150%/120% fira,arial,helvetica,sans-serif;
	padding-bottom:0.33em;
}
.nee-graph tbody th {
	text-align:right;
}
@supports (display:grid) {
	@media (min-width:32em) {
		.nee-graph {
			display:block;
			width:100%;
			max-width:600px;
			height:300px;
		}
		.nee-graph caption {
			display:block;
		}
		.nee-graph thead {
			display:none;
		}
		.nee-graph tbody {
			position:relative;
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(2em, 1fr));
			column-gap:2.5%;
			align-items:end;
			height:100%;
			padding:0 1em;
			border-left:5px solid rgba(0,0,0,0.8);
			border-bottom:5px solid rgba(0,0,0,0.8);
			background:repeating-linear-gradient(
				180deg,
				rgba(170,170,170,0.7) 0,
				rgba(170,170,170,0.7) 1px,
				transparent 1px,
				transparent 20%
			);
		}
		.nee-graph tbody:before,
		.nee-graph tbody:after {
			position:absolute;
			left:-3.2em;
			width:2.8em;
			text-align:right;
			font:bold 80%/120% fira,arial,helvetica,sans-serif;
		}
		.nee-graph tr {
			position:relative;
			display:block;
		}
		.nee-graph tr:hover {
			z-index:999;
		}
		.nee-graph th,
		.nee-graph td {
			display:block;
			text-align:center;
		}
		.nee-graph tbody th {
			position:absolute;
			top:-2em;
			left:0;
			width:100%;
			font-weight:normal;
			text-align:center;
			white-space:nowrap;
			text-indent:0;
			color: #000;
		}
		.nee-graph tbody th:after {
			content:"";
		}
		.nee-graph td {
			width:100%;
			height:100%;
			border-radius:0.5em 0.5em 0 0;
			transition:background 0.5s;
		}
		.nee-graph td span {
			overflow:hidden;
			position:absolute;
			left:50%;
			top:50%;
			width:0;
			padding:0.5em 0;
			margin:-1em 0 0;
			font:normal 85%/120% arial,helvetica,sans-serif;
			font-weight:bold;
			opacity:1;
			transition:opacity 0.5s;
		}
		.toggleGraph:checked + table td span,
		.nee-graph tr:hover td span {
			width:4em;
			margin-left:-2em; /* 1/2 the declared width */
			opacity:1;
		}
		.nee-1 {
		  background: #c32526;
		  color: #fff;
		}
		.nee-2 {
		  background: #e86f28;
		  color: #fff;
		}
		.nee-3 {
		  background: #f2d321;
		  color: #000;
		}
		.nee-4 {
		  background: #cfdb53;
		  color: #000;
		}
		.nee-5 {
		  background: #366eab;
		  color: #fff;
		}
		.nee-6 {
		  background: #274a9b;
		  color: #fff;
		}
		.nee-7 {
		  background: #3d215e;
		  color: #fff;
		}
	} /* min-width:32em */
} /* grid only */