.dataanalysis div.chartarea.bowls > div.top, 
.dataanalysis div.chartarea.bowls > div.topleft, 
.dataanalysis div.chartarea.bowls > div.bottom {
	display: block;
	margin: 0;
	padding: 0;
	height: 20px;
	background-color: #22cf83;
}

.dataanalysis div.chartarea.bowls.fact > div.top, 
.dataanalysis div.chartarea.bowls.fact > div.topleft, 
.dataanalysis div.chartarea.bowls.fact > div.bottom, 
.dataanalysis div.chartarea.bowls.fact > div.contenttitle, 
.dataanalysis div.chartarea.bowls.fact > div.marblechart-help,
.dataanalysis div.chartarea.bowls.fact > div.charts > div.marblechart-help {
	background-color: #22CF83;
}

.dataanalysis div.chartarea.bowls.research_fact > div.top, 
.dataanalysis div.chartarea.bowls.research_fact > div.topleft, 
.dataanalysis div.chartarea.bowls.research_fact > div.bottom, 
.dataanalysis div.chartarea.bowls.research_fact > div.contenttitle, 
.dataanalysis div.chartarea.bowls.research_fact > div.marblechart-help,
.dataanalysis div.chartarea.bowls.research_fact > div.charts > div.marblechart-help {
	background-color: #159dd6;
}

.dataanalysis div.chartarea.bowls.position > div.top, 
.dataanalysis div.chartarea.bowls.position > div.topleft, 
.dataanalysis div.chartarea.bowls.position > div.bottom, 
.dataanalysis div.chartarea.bowls.position > div.contenttitle, 
.dataanalysis div.chartarea.bowls.position > div.marblechart-help,
.dataanalysis div.chartarea.bowls.position > div.charts > div.marblechart-help {
	background-color: #ffad08;
}

.dataanalysis div.chartarea.bowls.philosophy > div.top, 
.dataanalysis div.chartarea.bowls.philosophy > div.topleft, 
.dataanalysis div.chartarea.bowls.philosophy > div.bottom, 
.dataanalysis div.chartarea.bowls.philosophy > div.contenttitle, 
.dataanalysis div.chartarea.bowls.philosophy > div.marblechart-help,
.dataanalysis div.chartarea.bowls.philosophy > div.charts > div.marblechart-help {
	background-color: #ff6a1a;
}

.dataanalysis div.chartarea.bowls.concept > div.top, 
.dataanalysis div.chartarea.bowls.concept > div.topleft, 
.dataanalysis div.chartarea.bowls.concept > div.bottom, 
.dataanalysis div.chartarea.bowls.concept > div.contenttitle, 
.dataanalysis div.chartarea.bowls.concept > div.marblechart-help,
.dataanalysis div.chartarea.bowls.concept > div.charts > div.marblechart-help {
	background-color: #ed3c4b;
}

.dataanalysis div.chartarea.bowls > div.top {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px);
	border-radius: 0 20px 0 0;
	margin-left: 20px;
}

.dataanalysis div.chartarea.bowls > div.topleft {
	background-image: radial-gradient(circle at bottom right, rgba(0,0,0,0) 10px, rgba(0,0,0,0.2) 20px);
	width: 20px;
	border-radius: 20px 0 0 0;
	float: left;
}

.dataanalysis div.chartarea.bowls > div.bottom {
	border-radius: 0 0 20px 20px;
	background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px);
}

.dataanalysis div.chartarea.bowls > div.charts div.chartContainer {
	background-color: #ededed;
	background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px);
	padding-left: 20px;
	padding-right: 20px;
}

.dataanalysis div.chartarea.bowls div.contenttitle, .dataanalysis div.chartarea.bowls div.marblechart-help {
	background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px);
}

.dataanalysis div.chartarea.bowls div.contenttitle {
	border-radius: 0;
	padding: 0;
    padding: 15px;
    padding-bottom: 10px;
    height: auto;
    line-height: normal;
}

.dataanalysis div.chartarea.bowls > div.charts {
	background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px);
}

.dataanalysis div.chartarea.bowls > div.charts > div div.percentagechart {
	padding-top: 50px;
	padding-bottom: 50px;
}

.dataanalysis div.chartarea.bowls > div.charts {
	color: #606060;
}

.dataanalysis div.chartarea.bowls > div.charts > div div.percentagechart > div > div > img.ring {
	position: relative;
	width: 100%;
	max-width: 200px;
	z-index: 1;
}

.dataanalysis div.chartarea.bowls > div.charts > div div.percentagechart > div > div > div.background {
	background-image: radial-gradient(circle at bottom right, rgba(0,0,0,0.5), rgba(255,255,255,0.5));
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	max-width: 190px;
/*	padding-top: 100%;*/
	height: 190px;
}

.dataanalysis div.chartarea.bowls > div.charts > div div.percentagechart > div > div > div {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%); /* IE 9 */
	-webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
	z-index: 1;
	color: white;
	font-size: 32pt;
}

div.marblechart.bowls {
	display: table;
	width: 100%;
	table-layout: fixed;
    border-collapse: separate;
    border-spacing: 50px 20px;
}

div.marblechart.bowls > div {
	display: table-row;
	text-align: center;
}

div.marblechart.bowls > div.title {
	display: table-caption;
	font-size: 18pt;
	padding: 20px;
	line-height: 140%;
}

div.marblechart.bowls > div > div {
	display: table-cell;
	position: relative;
	text-align: center;
}

div.marblechart.bowls div.label.gradient {
	margin-top: auto;
	margin-bottom: auto;
	height: auto;
	vertical-align: middle;
	color: white;
}

div.marblechart.bowls div.glass {
	position: relative;
	text-align: center;
	height: 180px;
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
}

div.marblechart.bowls div.glassbox {
	position: relative;
}

div.marblechart.bowls div.glass.excluded {
}
	
div.marblechart.bowls div.glass.excluded::before {
	position: absolute;
	content: '\f05e';
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: grey;
	font-size: 120px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-style: normal;
}
	
div.marblechart.bowls div.glass div.background,
div.marblechart.bowls div.glass div.foreground {
	position: absolute;
	width: 100%;
	height: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7e8b99+20,afc4d6+50,7e8b99+81&1+1,0.4+15,0.2+20,0.2+81,0.4+85,1+100 */
	background: -moz-linear-gradient(left,  rgba(126,139,153,1) 1%, rgba(126,139,153,0.4) 15%, rgba(126,139,153,0.2) 20%, rgba(175,196,214,0.2) 50%, rgba(126,139,153,0.2) 81%, rgba(126,139,153,0.4) 85%, rgba(126,139,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(126,139,153,1) 1%,rgba(126,139,153,0.4) 15%,rgba(126,139,153,0.2) 20%,rgba(175,196,214,0.2) 50%,rgba(126,139,153,0.2) 81%,rgba(126,139,153,0.4) 85%,rgba(126,139,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(126,139,153,1) 1%,rgba(126,139,153,0.4) 15%,rgba(126,139,153,0.2) 20%,rgba(175,196,214,0.2) 50%,rgba(126,139,153,0.2) 81%,rgba(126,139,153,0.4) 85%,rgba(126,139,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e8b99', endColorstr='#7e8b99',GradientType=1 ); /* IE6-9 */
}

div.marblechart.bowls div.glass div.background {
	z-index: -1000;
}

div.marblechart.bowls div.glass div.foreground {
	z-index: 1000;
	pointer-events: none;
}

div.marblechart.bowls div.glass div.bottom {
	position: absolute;
	width: 100%;
	height: 5%;
	bottom: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7e8b99+20,7e8b99+54&0.2+0,0.8+54 */
	background: -moz-linear-gradient(top,  rgba(126,139,153,0.2) 0%, rgba(126,139,153,0.42) 20%, rgba(126,139,153,0.8) 54%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(126,139,153,0.2) 0%,rgba(126,139,153,0.42) 20%,rgba(126,139,153,0.8) 54%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(126,139,153,0.2) 0%,rgba(126,139,153,0.42) 20%,rgba(126,139,153,0.8) 54%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#337e8b99', endColorstr='#cc7e8b99',GradientType=0 ); /* IE6-9 */
}

div.marblechart.bowls div.glass div.content {
	position: relative;
	height: 96%;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

/* http://codepen.io/badcat/pen/lrdhb */
div.marblechart.bowls div.glass div.content > div.marble {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	text-align: center;
	line-height: 125%;
	border-radius: 50%;
	background-image: -webkit-radial-gradient(13px 13px, farthest-side, #eeeeee 0%, #ff0000 40%, #400000 100%);
	transition: margin-bottom 1.5s ease-in;
}

div.marble {
	text-align: center;
	color: white;
}

.highcharts-markers {
	stroke: none;
}

.highcharts-markers text {
	font-size: 16px;
	stroke: none;
	fill: white;
	text-anchor: middle;
	alignment-baseline: central;
}