#ctr-chart
{
	display: flex;
	height: 500px; /* will be overridden by the JS, based on the percentages in each particular case */
	position: relative;
}

/* toplabels */

#ctr-toplabels,
#ctr-bottomlabels
{
	display: flex;
}

.ctr-toplabel {
	flex: 0 0 11.1%;
	height: 90px;
	display: flex;
	justify-content: center;
}

.ctr-toplabel .label {
	width: 30%;
	flex: 0 0 30%;
	text-align: center;
}

.ctr-toplabel .label.lightblue {
	color: #2299D1;
}

.ctr-toplabel .label .rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
	font-size: 85%;
	width: 30px;
	margin-top: 50px;
	height: 15px;
}

/* bottomlabels */

.ctr-bottomlabel {
	flex: 0 0 11.1%;
	/*height: 100px;*/
	padding: 10px 0 20px 0;
}

.ctr-bottomlabel .label
 {
	font-size: 80%;
	text-align: center;
	min-height: 30px;
}

.ctr-bottomlabel .labelmodus
 {
	font-size: 80%;
	text-align: center;
	font-weight: bold;
	line-height: 100%;
	min-height: 60px;
	position: relative; /* prevent text inside this div from being hidden by the div next to it, which it overlaps */
}

.ctr-bottomlabel .labelicon
{
	display: flex;
	justify-content: center;
	position: relative; /* prevent image inside this div from being hidden by the div next to it, which it overlaps */
}

.doublewidth {
	width: 200%;
}



.ctr-bar
{
	flex: 0 0 11.1%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.opaque
{
	background-color: #EEF5FF;
}

.bar {
	position: relative;
	width: 30%;
	flex: 0 0 30%;
	z-index: 900;
}

.bar.overall {
	background-color: #022F46;
}

.bar.school {
	background-color: #2299D1;
}

.ctr-chart-line
{
	position: absolute;
	left: 0;
	right: 60px;
	bottom: 0; /* will be set by the JS */
	top: auto;
	border-bottom: 1px solid #FFDD00;
	z-index: 899;
}

.ctr-chart-label-y
{
	position: absolute;
	left: auto;
	right: 10px;
	bottom: 0; /* will be set by the JS */
	top: auto;
}

#ctr-tooltip {
	position: absolute;
	display: none;
	background-color: #FFDD00;
	width: 70px;
	text-align: center;
	padding: 15px 0;
	color: #022F46;
	z-index: 999;
}

#ctr-tooltip:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 70%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #FFDD00;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}