:root{
	--row-height:40px;
	--col-width:6px;
	--col-gap:1px;
	--col-full:calc(var(--col-width) + var(--col-gap));
}

#graph #bars li{
	--bar-col:#7fb2cc;
	--res-col:#d0d0d0;
	--pct-col:#808080;
}

#graph #bars li.stage1{
	--res-col:#cccc00;
	--pct-col:#999900;
}

#graph #bars li.stage2{
	--res-col:#00cc00;
	--pct-col:#008000;
}

#graph #bars li:hover{
	--bar-col:#006699;
	--res-col:#00ccff;
	--pct-col:#ffcc00;
}

#graph #bars li.click{
	--bar-col:#dd3333;
	--res-col:#00ccff;
	--pct-col:#ffcc00;
}

#graph, #graph *{
	margin:0;
	padding:0;
	list-style-type:none;
}

#graph{
	width:calc(var(--col,127) * var(--col-full,8px) + 52px);
	margin:2em auto;
	padding:10px 0 60px 0;
	position:relative;
	vertical-align:bottom;
	font-size:0;
}
#graph::after{
	content:"";
	display:block;
	clear:both;
}

#graph li{
	font-size:medium;
}

#graph #bars{
	display:inline-block;
	padding-right:2px;
	border-bottom:1px solid #444;
	position:relative;
	vertical-align:bottom;
}

#graph #bars li{
	width:var(--col-width, 7px);
	height:calc(var(--row-height, 50px) * var(--row, 2));
	border-bottom:calc(var(--row-height,50px) * (var(--row, 2) - var(--res, 0))) solid var(--bar-col, #7fb2cc);
	margin-right:var(--col-gap, 1px);
	display:inline-block;
	background-image: linear-gradient(var(--res-col, #d0d0d0) 0 50%, var(--pct-col, #808080) 50% 100%);
	background-size: 100% 200%;
	background-position: 0 var(--pct, 0);
	box-sizing:border-box;
	background-position: 0 min(0%, max(100%, var(--pct, 0%)));
}

#graph #bars li::after, #graph #bars.nohovers li:hover::after, #graph #bars li *, #graph #bars.nohovers li:hover *{
	visibility:hidden;
}
#graph #bars li:hover::after, #graph #bars li:hover *{
	visibility:visible;
}

#graph #bars.nohovers li.click::after, #graph #bars li.click::after, #graph #bars.nohovers li.click *, #graph #bars li.click *{
	visibility:visible;
}

#graph #bars li::before, #graph #bars li::after{
	content:"";
	display:block;
	position:absolute;
	top:100%;
	left:calc(var(--col-full, 8px) / 2 - 1px);
	width:calc(var(--col-full, 8px) * var(--num, 0));
	line-height:0;
	border-style:solid;
	border-color:#444;
	pointer-events:none;
}

#graph #bars li::before{
	height:6px;
	border-width:0 1px 0 0;
}

#graph #bars li::after{
	margin-top:6px;
	height:17px;
	border-width:0 1px 1px 0;
}

#graph #bars li p{
	position:absolute;
	top:100%;
	margin-top:23px;
	left:calc(var(--col-full, 8px) / 2 - 1px);
	padding:0.7em 0 0 1em;
	text-indent:0;
}

#graph #bars li p::before{
	content:"";
	display:block;
	float:left;
	width:0.75em;
	height:1.4em;
	line-height:0;
	border:#444 solid;
	border-width:0 0 1px 1px;
	margin-right:-1em;
	position:relative;
	top:-0.7em;
	left:-1em;
}

#scale{
	height:calc(var(--row-height, 50px) * var(--row, 6));
	display:inline-block;
	width:27px;
	margin-left:23px;
	position:relative;
	font-family:sans-serif;
	border-bottom:1px solid #444;
}

#scale::before{
	content:"";
	position:absolute;
    bottom:calc(var(--row-height,50px) / 2 - 11px);
	left:0;
	width:21px;
	height:21px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 20 20'><path d='M 10,0.5 L 19.5,5 L 0.5,15 L 10,19.5' fill='none' stroke='rgb(68,68,68)' stroke-width='0.6' vector-effect='non-scaling-stroke' /></svg>");
	background-size: 100% 100%;
}

#scale::after{
	content:"";
	display:block;
	width: 7px;
	height: 7px;
	border-radius:4px;
	border:1px solid #444;
	margin-top:-4px;
	position:absolute;
	left:6px;
	top:100%;
}

#scale li{
	width:26px;
	height:var(--row-height, 50px);
	text-align:right;
	position:relative;
	top:-9px;
	left:-23px;
}

#scale li::before{
	content:"";
	display:block;
	position:absolute;
	top:9px;
	right:-8px;
	width:5px;
	height:100%;
	border:1px solid #444;
	border-width:1px 1px 0 0;
}

#scale li:last-child::before{
	content:"";
	display:block;
	position:absolute;
	top:9px;
	right:-8px;
	width:5px;
	height:calc((var(--row-height, 50px) - 20px) / 2);
	border:1px solid #444;
	border-width:1px 1px 0 0;
}

#scale li:last-child::after{
	content:"";
	display:block;
	position:absolute;
	bottom:-20px;
	right:-8px;
	width:5px;
	height:calc((var(--row-height, 50px) - 20px) / 2 + 11px);
	border-right:1px solid #444;
}