/* general */
div.wiel label {
	font-weight: normal;
}

div.wiel {
	font-family: "Akko W01 Regular", sans-serif;
	font-size: 13px;
	color: #091d23;
}

div.wiel-titel {
	width: 100%;
	margin: 0px 0px 10px 0px;
	font-family: "Soho W01 Medium", serif;
	font-size: 17px;
}

div.wiel-wiel {
	width: 100%;
	position: relative;
	padding-top: 100%;
}

div.wiel-wiel > svg {
	position: absolute;
	top: 0;
	left: 0;
}

/* title and subtitle in the circle */
div.wiel g.wiel-title text,
div.wiel tspan.wiel-subtitle,
div.wiel tspan.wiel-indicator-name {
	font-family: "Soho W01 Medium", serif;
	fill: #091d23;
}

div.wiel g.wiel-title text {
	font-size: 50px;
}

div.wiel tspan.wiel-subtitle {
	font-size: 26px;
}

div.wiel g.wiel-title line,
div.wiel g.wiel-explanation line,
div.wiel .wiel-theme-dividerline {
	stroke-width: 1.5px;
	stroke: #091d23;
	fill: none;
}

/* invisible click triggers */
div.wiel .wiel-indicator-trigger {
	stroke-width: 2px;
	stroke: transparent;
	fill: transparent;
	cursor: pointer;
}

/* themes and indicators on the circle */
div.wiel .wiel-indicator-inner,
div.wiel .wiel-indicator-outer {
	opacity: 100%;
	stroke-width: 2px;
	stroke: #fff;
}

div.wiel .wiel-hover {
	opacity: 0.7;
}

div.wiel .wiel-theme-label {
	font-family: "Akko W01 Regular", sans-serif;
	fill: #091d23;
	font-size: 16px;
}

@media only screen and (max-width: 500px) {
	div.wiel .wiel-theme-label { font-size: 25px; }
}

div.wiel .wiel-indicator-label {
	font-family: "Akko W01 Regular", sans-serif;
	fill: #fff;
	font-size: 11px;
}

@media only screen and (max-width: 640px) {
	div.wiel .wiel-indicator-label { display: none }
}

/* explanation and extra info in the circle */

div.wiel g.wiel-explanation {
	display: none;
}

div.wiel g.wiel-explanation text.wiel-indicator-attribute,
div.wiel g.wiel-explanation text.wiel-indicator-value {
	font-size: 16px;
}

div.wiel g.wiel-explanation text.wiel-indicator-attribute {
	font-family: "Akko W01 Regular", sans-serif;
	fill: #091d23;
	font-size: 16px;
}

div.wiel g.wiel-explanation text.wiel-indicator-value {
	font-family: "Akko W01 Regular", sans-serif;
	font-size: 16px;
}

div.wiel text.wiel-indicator-value tspan.wiel-red {
	fill: #e6382c;
}

div.wiel text.wiel-indicator-value tspan.wiel-green {
	fill: #79b829;
}

div.wiel text.wiel-indicator-value tspan.wiel-gray {
	fill: #878787;
}

@media only screen and (max-width: 500px) {
	div.wiel g.wiel-explanation text.wiel-indicator-attribute,
	div.wiel g.wiel-explanation text.wiel-indicator-value,
	div.wiel g.wiel-explanation rect,
	div.wiel g.wiel-explanation line,
	div.wiel g.wiel-explanation text.wiel-theme-label {
		display: none;
	}

	div.wiel g.wiel-explanation {
		transform: translateY(70px);
	}
}

/* colors */

div.wiel .wiel-red {
	fill: #e6382c;
}

div.wiel .wiel-green {
	fill: #79b729;
}

div.wiel .wiel-gray {
	fill: #c9c9c9;
}

div.wiel .wiel-bbp-red {
	fill: url("#wiel-bbp-stripes-red");
}

div.wiel .wiel-bbp-green {
	fill: url("#wiel-bbp-stripes-green");
}

div.wiel .wiel-bbp-gray {
	fill: url("#wiel-bbp-stripes-gray");
}

div.wiel pattern#wiel-bbp-stripes-red rect {
	fill: #e6382c;
}

div.wiel pattern#wiel-bbp-stripes-green rect {
	fill: #79b729;
}

div.wiel pattern#wiel-bbp-stripes-gray rect {
	fill: #c9c9c9;
}

div.wiel pattern path {
	stroke: #fff;
	opacity: 0.3;
	stroke-width: 14px;
}

div.wiel text.wiel-red,
div.wiel tspan.wiel-red,
div.wiel text.wiel-green,
div.wiel tspan.wiel-green {
	fill: #fff;
}

div.wiel text.wiel-gray,
div.wiel tspan.wiel-gray {
	fill: #091d23;
}

/* slideDown: general */

div.wiel div.wiel-uitvouw {
	margin: 30px 0px;
	padding: 16px 0px;
	border-top: 1px dashed #878787;
	border-bottom: 1px dashed #878787;
	display: none;
}

/* slideDown: theme-level */

div.wiel div.wiel-thema-sluit {
	float: right;
	width: 24px;
	height: 26px;
	text-align: center;
	margin-right: 6px;
	padding-top: 4px;
	border-radius: 2px;
}

div.wiel div.wiel-thema-sluit:hover {
	background-color: #e9e9e9;
	cursor: pointer;
}

div.wiel div.wiel-thema-sluit > svg {
	width: 8px;
	height: 8px;
	stroke-width: 2px;
	stroke: #091d23;
}

div.wiel div.wiel-thema-titel {
	font-family: "Akko W01 Regular", sans-serif;
	font-size: 14px;
	height: 24px;
	padding-top: 6px;
}

div.wiel div.wiel-thema-toelichting {
	margin: 10px 0px 0px 0px;
}

div.wiel div.wiel-thema-indicatoren {
	margin: 20px 0px 10px 0px;
}

div.wiel div.wiel-thema-indicatoren > a {
	cursor: pointer;
	color: #0581a2;
}

div.wiel div.wiel-thema-indicatoren > a:hover {
	text-decoration: underline;
}

/* slideDown: indicator-level */

div.wiel div.wiel-indicator {
	margin: 20px 0px 0px 0px;
}

div.wiel div.wiel-indicator-toelichting {
	margin-top: 20px;
	font-size: 12px;
}

div.wiel div.wiel-indicator-toelichting sup {
	font-size: 8px;
	vertical-align: top;
	line-height: normal;
	position: unset;
}

/* slideDown: highcharts */

div.wiel span.highcharts-title sup {
	font-size: 9px;
	vertical-align: top;
	line-height: normal;
	position: unset;
}

div.wiel div.wiel-indicator-tijdreeks {
	height: 350px;
}

div.wiel div.wiel-indicator-internationaal {
	height: 500px;
}

div.wiel .BE,
div.wiel .BE .highcharts-point,
div.wiel .BE .highcharts-halo {
	stroke: #00a1cd;
	fill: #00a1cd;
}

div.wiel .BG,
div.wiel .BG .highcharts-point,
div.wiel .BG .highcharts-halo {
	stroke: #0058b8;
	fill: #0058b8;
}

div.wiel .CY,
div.wiel .CY .highcharts-point,
div.wiel .CY .highcharts-halo {
	stroke: #afcb05;
	fill: #afcb05;
}

div.wiel .DK,
div.wiel .DK .highcharts-point,
div.wiel .DK .highcharts-halo {
	stroke: #53a31d;
	fill: #53a31d;
}

div.wiel .NL,
div.wiel .NL .highcharts-point,
div.wiel .NL .highcharts-halo {
	stroke: #f39200;
	fill: #f39200;
}

div.wiel .NL .highcharts-graph {
	stroke-width: 3px;
}

div.wiel .DE,
div.wiel .DE .highcharts-point,
div.wiel .DE .highcharts-halo {
	stroke: #d9328a;
	fill: #d9328a;
}

div.wiel .EE,
div.wiel .EE .highcharts-point,
div.wiel .EE .highcharts-halo {
	stroke: #7d4791;
	fill: #7d4791;
}

div.wiel .FI,
div.wiel .FI .highcharts-point,
div.wiel .FI .highcharts-halo {
	stroke: #c90c0f;
	fill: #c90c0f;
}

div.wiel .FR,
div.wiel .FR .highcharts-point,
div.wiel .FR .highcharts-halo {
	stroke: #0581a2;
	fill: #0581a2;
}

div.wiel .GR,
div.wiel .GR .highcharts-point,
div.wiel .GR .highcharts-halo {
	stroke: #163a72;
	fill: #163a72;
}

div.wiel .HU,
div.wiel .HU .highcharts-point,
div.wiel .HU .highcharts-halo {
	stroke: #899d0c;
	fill: #899d0c;
}

div.wiel .IE,
div.wiel .IE .highcharts-point,
div.wiel .IE .highcharts-halo {
	stroke: #488225;
	fill: #488225;
}

div.wiel .IT,
div.wiel .IT .highcharts-point,
div.wiel .IT .highcharts-halo {
	stroke: #af0e80;
	fill: #af0e80;
}

div.wiel .HR,
div.wiel .HR .highcharts-point,
div.wiel .HR .highcharts-halo {
	stroke: #56217a;
	fill: #56217a;
}

div.wiel .LV,
div.wiel .LV .highcharts-point,
div.wiel .LV .highcharts-halo {
	stroke: #da5914;
	fill: #da5914;
}

div.wiel .LT,
div.wiel .LT .highcharts-point,
div.wiel .LT .highcharts-halo {
	stroke: #9c1006;
	fill: #9c1006;
}

div.wiel .LU,
div.wiel .LU .highcharts-point,
div.wiel .LU .highcharts-halo {
	stroke: #00a1cd;
	fill: #00a1cd;
	stroke-dasharray: 3, 3;
}

div.wiel .MT,
div.wiel .MT .highcharts-point,
div.wiel .MT .highcharts-halo {
	stroke: #0058b8;
	fill: #0058b8;
	stroke-dasharray: 3, 3;
}

div.wiel .AT,
div.wiel .AT .highcharts-point,
div.wiel .AT .highcharts-halo {
	stroke: #afcb05;
	fill: #afcb05;
	stroke-dasharray: 3, 3;
}

div.wiel .PL,
div.wiel .PL .highcharts-point,
div.wiel .PL .highcharts-halo {
	stroke: #53a31d;
	fill: #53a31d;
	stroke-dasharray: 3, 3;
}

div.wiel .PT,
div.wiel .PT .highcharts-point,
div.wiel .PT .highcharts-halo {
	stroke: #d9328a;
	fill: #d9328a;
	stroke-dasharray: 3, 3;
}

div.wiel .RO,
div.wiel .RO .highcharts-point,
div.wiel .RO .highcharts-halo {
	stroke: #7d4791;
	fill: #7d4791;
	stroke-dasharray: 3, 3;
}

div.wiel .SI,
div.wiel .SI .highcharts-point,
div.wiel .SI .highcharts-halo {
	stroke: #f39200;
	fill: #f39200;
	stroke-dasharray: 3, 3;
}

div.wiel .SK,
div.wiel .SK .highcharts-point,
div.wiel .SK .highcharts-halo {
	stroke: #c90c0f;
	fill: #c90c0f;
	stroke-dasharray: 3, 3;
}

div.wiel .ES,
div.wiel .ES .highcharts-point,
div.wiel .ES .highcharts-halo {
	stroke: #0581a2;
	fill: #0581a2;
	stroke-dasharray: 3, 3;
}

div.wiel .CZ,
div.wiel .CZ .highcharts-point,
div.wiel .CZ .highcharts-halo {
	stroke: #163a72;
	fill: #163a72;
	stroke-dasharray: 3, 3;
}

div.wiel .UK,
div.wiel .UK .highcharts-point,
div.wiel .UK .highcharts-halo {
	stroke: #899d0c;
	fill: #899d0c;
	stroke-dasharray: 3, 3;
}

div.wiel .SE,
div.wiel .SE .highcharts-point,
div.wiel .SE .highcharts-halo {
	stroke: #488225;
	fill: #488225;
	stroke-dasharray: 3, 3;
}

div.wiel .highcharts-data-label-box {
	fill: #fff;
}

div.wiel .highcharts-markers > .highcharts-point {
	stroke-dasharray: none;
}