@charset "utf-8";
/* CSS Document */

body{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	margin:0px;
	color:#4a4a4a;
	background:#fff;
}

div.group{
	margin:1em 0;
	display: flex;
	align-items: center;
}

div.group.shade{
	background:#f5f5f5;
}

.block {
	font-size: 1.75rem;
	display: inline-block;
	margin-right: 0.5em;
	flex: 0 0 auto;
}

div.group span.indicator,
div.group span.scale_container{
	background: #fff;
	border: 0.1em solid #4a4a4a;
	border-radius: 0.2em;
	box-sizing: content-box;
	display:inline-block;
}

div.group span.indicator{
	width:0.85em;
	height:1em;
	border-right:none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

div.group span.scale_container{
	width:0.2em;
	height:1em;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	position: relative;
}

div.group span.scale_container div.scale_value{
	width:100%;
	bottom:0px;
	background:#4a4a4a;
	position:absolute;
	bottom:0px;
	margin-right:40px;
}

div.group span.group_name{
	display:inline-block;
}

div.group span.indicator.red,
div#key span.red{background:red;}

div.group span.indicator.amber,
div#key span.amber{background:orange;}

div.group span.indicator.green,
div#key span.green{background:green;}

#key,
.updated {
	color: #626262;
}

.updated {
	font-size: 0.8em;
	margin: 2em 0 1em;
}

div#key{
	display: flex;
	flex-wrap: wrap;
	margin: -1.2em;
	margin-right: 0;
	margin-bottom: 0;
}

div#key span{
	display:inline-block;
	margin-left:30px;

}

.key-item {
	display: flex;
	align-items: center;
	margin: 1.2em;
	margin-right: 0;
	margin-bottom: 0;
}

.example {
	flex: 0 0 auto;
	font-size: 1rem;
	border-radius:5px;
	width:1em;
	height:1em;
	border:2px solid #4a4a4a;
	margin-right: 0.3em;
}

div#key span:first-child {
	margin-left: 0;
}

div#key span.percentage{
	position:relative;
}

div#key span.percentage div{
	position:absolute;
	bottom:0px;
	width:100%;
	height:50%;
	background-color:#4a4a4a;
}