/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.grade_result_wrapper {
    text-align: center;
}
.radar-chart {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
.radar-chart .legend {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 20px;
}
.radar-chart .legend div {
 display: flex;
 align-items: center;
 margin-right: 10px;
}
.radar-chart .legend div span.your-score,.legend div span.market-average {
 width: 30px;
 height: 20px;
 display: inline-block;
 margin-right: 5px;
}
.radar-chart .legend .lagend-label{
 width: 120px;
 font-size:15px
}
.radar-chart .your-score {
 background-color: #7bc6d6;
}
.radar-chart .market-average {
 background-color: #ccc;
}
.radar-chart text {
 font-size: 6px;
 text-anchor: middle;
}
.radar-chart polygon, line {
 stroke-width: 0.5;
}
.radar-chart .custom-content-top-title text {
	font-size: 40px;
}
.radar-chart .custom-content-bottom-title text {
	font-size: 29px;
}
			 
@media screen and (max-width: 520px){
 .radar-chart svg.spider-graph {
    width: 400px !important;
	height: 150px !important;
 }
 .radar-chart .custom-content-top-title text {
    font-size: 30px;
}
.radar-chart .custom-content-bottom-title text {
    font-size: 23px;
}
.radar-chart .legend .lagend-label {
    width: 100px;
    font-size: 12px;
}
.radar-chart .legend div {
    margin-right: 0px;
}
}