.chartWrapper {padding-bottom: 50px; padding: 20px 20px 40px 20px; box-sizing: border-box; float: left;}
.legendIconWrapper {clear: both; color: #666;display: table-cell;width: 100%;float: left;/* vertical-align: middle; */margin-bottom: 20px;}
.legendIcon {width: 16px; height: 16px; /* display: block; */ float: left; background-color: #ccc; margin-top: 4px; /* margin-right: 5px; */vertical-align: middle;}
.legendText {font-size: 18px;}
.chartContent {position: relative; width: 100%;}
.chartContent .chartPie { width: 400px; height: 200px; /*float: left;*/ position: absolute; z-index: 11; /*left: 0;*/}
.chartContent .legendItem, .chartContent .legendItem2 {width: 60%; position:relative; z-index: 1; padding: 0 0 0 200px; margin-top: 20px;}
.totalChartValue, .totalChartValue2 { position: absolute; text-align: center; font-size: 14px; z-index: 9; width: 160px; text-align: center; color: #9E9E9E; top: 45px; left: 20px;}
.totalChartValue span , .totalChartValue2 span {font-size: 100px; display: block; color: #333333;}
.chart1 .totalChartValue span { line-height: 85px;}
.chart2 .totalChartValue span { line-height: 85px; }
.chartTitle {font-size: 20px; text-align:center; padding-bottom: 20px; color: #000;}
div.google-visualization-tooltip { width: 50px; z-index: 10; }
.chartT, .chartV {float: left;  margin-top: 5px;}
.chartV {font-size: 22px; text-align:center;  }
.chartT { font-size: 12px; vertical-align: middle;display: table-cell;float: left; }

.chart1 { background: #FFFFFF; width: 48%; border: 1px solid #EEEEEE; border-radius: 6px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;}
.chart1 .legendText { width: 190px;}
.chart1 .chartV { width: 50px;}
.chart1 .chartT { width: 120px;}
.chart2 { background: #F0F0F0; width: 52%; border: 1px solid #EEEEEE; border-radius: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0;}
.chart2 .legendText { width: 250px;}
.chart2 .chartV { width: 100px;}
.chart2 .chartT {  width: 120px;}

.chartContainer .tabChart { display: table;  background: #CCCCCC; width: 100%;}
.chartContainer .chartWrapper { position: relative; }
.chartContainer .chartWrapper a.arrow.red { position: absolute; right: 20px; bottom: 20px; color: #000000; z-index: 99; line-height: 18px;}

.chartWrapper .chartTitle { display: none;}
.chartContainer .chartWrapper a.arrow.red:hover{text-decoration: underline;}
.chartContainer .tabChart .chartTitle { display: table-cell; background: #CCCCCC; text-align: center; padding: 20px 10px;  vertical-align: middle; line-height: 24px;  border-bottom: 0; cursor: pointer;}


@media only screen and (max-width: 1023px) {
	.chartContainer .tabChart .chartTitle { display: table-cell; background: #CCCCCC; text-align: center; padding: 20px 10px;  vertical-align: middle; line-height: 24px; border-bottom: 0; cursor: pointer;}
	.chartContent .legendItem, .chartContent .legendItem2 { width: 60%;}

	.chart1 .chartV, .chart2 .chartV { width: 10%; min-width: 50px;}
	.chart1 .chartT, .chart2 .chartT { width: 70%;}
}

@media only screen and (max-width:767px) {
	
	.chartWrapper {padding: 0;}
	.chartContent .legendItem, .chartContent .legendItem2 {padding: 0 0 0 150px;}
	
	.totalChartValue, .totalChartValue2 {  top: 45px;  left: 0; right:12px; font-size: 12px;margin: 0 auto;}
	.chart1 .totalChartValue, .chart2 .totalChartValue { top: 50px;}
	.chart1 .totalChartValue span, .chart2 .totalChartValue span { line-height: 70px;}
	.totalChartValue span, .totalChartValue2 span { font-size: 66px; line-height: 55px;}
	
	.chartContainer .tabChart .chartTitle { font-size: 14px; line-height: 20px;}
	.legendIcon { width: 13px; height: 13px; margin-top: 3px;}
	.chartV {  font-size: 15px; margin-top: 2px;}
	.chartT { margin-top: 3px;}
	.chart2 .chartT { width: 60% !important;}

	.chartContent .chartPie {width:200px; height:200px; position: relative; float:none; margin:0 auto;}

	/*.totalChartValue, .totalChartValue2 {top:65px; left: 0;right:12px;}*/
	.legendIconWrapper{width:100%;}
	.chartContent .legendItem, .chartContent .legendItem2{ padding:0; margin: 20px auto 0 auto;  width: 80%;}

}

@media only screen and (max-width:480px) {
	.chartIconContainer { width: 3%; float: left; min-width: 16px; margin-top: 2px;}
	.chart1 .legendText, .chart2 .legendText { float: left; width: 90% !important; margin-top:3px;}
	
	.chart1 .chartV { width: 30px;  box-sizing: border-box; max-width: 50px; margin-right: 2%;}
	.chart1 .chartT { width: 70% !important;}
	.chart2 .chartV { width: 55px; text-align: center; box-sizing: border-box; max-width: 100px;}
	.chart2 .chartT { width: 70% !important;}
	
}
@media only screen and (max-width:375px) {
	.chart2 .chartT { width: 60% !important;}
}

@media only screen and (max-width:320px) {
	.chartIconContainer { width: 3%;}
	.chart2 .chartT { width: 70% !important;}
}