/** Nutrient Balancer
	ACA // 6/6/2017
*/


.NutrientBalancer > * { display: flex; font-size:15px }

.nutrient-group {align-items:center;}
.nutrient-group:not(:last-child) {border-bottom:1px solid lightgrey}
.nutrient-group > span { width: 80px; text-align: center; }


@media screen and (max-width:555px)
{
	.nutrient-group > span {display:none}
}

.NutrientStatusContainer {display:flex; flex:auto; text-align:center}
.NutrientStatusContainer > * {flex: 1; justify-content: center; align-items: center; display:flex; min-height:30px; padding:5px; overflow:hidden}
	.NutrientStatusContainer > * { border-left: 1px solid lightgrey; font-size: 13px; }

.NutrientBalancer a {color:rgba(255,255,255,0.85)}
.NutrientBalancer a[href]:hover {color:white}

.NutrientBalancer span.short { display: none; font-weight: bold; }

@media screen and (max-width:800px) {
	.NutrientBalancer span.short { display: block; }
	.NutrientBalancer span.full { display: none; }
}


@media screen and (max-width:555px) {

	.NutrientStatusContainer[data-count="8"] {flex-wrap:wrap; }
	.NutrientStatusContainer[data-count="8"] > * {width:25%;  flex:none}
	.NutrientStatusContainer[data-count="8"] > *:nth-child(1),
	.NutrientStatusContainer[data-count="8"] > *:nth-child(2),
	.NutrientStatusContainer[data-count="8"] > *:nth-child(3),
	.NutrientStatusContainer[data-count="8"] > *:nth-child(4) {border-bottom:1px solid lightgrey}
	.NutrientStatusContainer > * {max-height:13vh}


	div.NutrientBalancer div.NutrientStatusContainer[data-count="3"] > * {height:calc((100vw - 42px) / 3);}
	div.NutrientBalancer div.NutrientStatusContainer[data-count="2"] > * {height:calc((100vw - 42px) / 2);}
	div.NutrientBalancer div.NutrientStatusContainer[data-count="4"] > *,
	div.NutrientBalancer div.NutrientStatusContainer[data-count="8"] > * {height:calc((100vw - 42px) / 4);}
	div.NutrientBalancer div.NutrientStatusContainer[data-count="7"] > * {height:calc((100vw - 42px) / 7);}
}