.datagrid table { 
	font-family: "Roboto";
	border-collapse: collapse; 
	width: 100% !important;
	border-bottom: 1px solid #000;
} 
.datagrid {
	width: 100%;
    font: normal 13px/150% 'Roboto', Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    -moz-border-radius: 3px;
}
.datagrid table td, .datagrid table th {
 padding-top: 7px;
 padding-bottom: 7px;
 text-align: center; 
 }

.datagrid table th {
 padding: 10px 8px;
 text-align: center; 
 }

 .datagrid table thead th {
    color: #000;
    font-size: 16px;
    border-top: 1px solid #000;
 	border-bottom: 1px solid #000;
 	font-weight: bold; 
 } 
/* .datagrid table thead th:first-child { 

 }*/
 .datagrid table tbody td { 
 	color: #000; 
 	font-size: 16px;
 	font-weight: normal; 
 }

 /*.datagrid table tbody tr td {
 	 white-space: nowrap;
 }*/


 .datagrid table tbody .alt td {
background: #EAF9E8; 
/*border-top: 1px solid #eee;*/
color: #000;
 }

 .datagrid table tbody td:first-child { 
 	border-left: none; 
 }

 .datagrid table tbody tr:last-child td { 
 	border-bottom: none; 
 }

 .feature {
 	font-weight: bold !important;
 }

/*--------------------this is the SVG-------------------*/
.cross {
  font-size: 200% !important;
  color: #db5f3b !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

.check {
  font-size: 210% !important;
  color: #92af6d !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

.extra {
	margin-bottom: -15px;
}

.invisible{
	visibility: hidden;
}

#large {
	font-size: 13px;
}

.holder {
  font-size: 13px !important;
/*  margin-top: -8px;
  line-height: 15px;*/
}

#chart1, #chart2 {
	width: 100%;
}

.datagrid > img {
	display:none;
}


@media screen and (max-width: 900px) {
.datagrid table tbody td {
	font-size: 16px;
}
}


@media screen and (max-width: 580px) {
.datagrid table tbody td {
	font-size: 14px;
}
.cross {
  font-size: 120% !important;
}

.check {
  font-size: 120% !important;
}

}


/*--------------------Highchart style-------------------*/

.myCon {
	width: 100%;
	height:auto;
	min-height: 500px;
}

.myHeader {
	width: 100%;
	height:auto;
	min-height: 50px;
	font-weight: bold;
  	font-size: 1.8em;
}

#chart1, #chart2 {
	width: 100%;
}

.chart_source {
	width: 100%;
	height: 30px;
	padding-top: 10px;
  	color: #777;
  	font-style: italic;
}

.chart_note {
	width: 100%;
	height: 30px;
	margin-top: -10px;
  	color: #777;
  	font-style: italic;
}


@media screen and (max-width: 580px) {
	#chart1, #chart2 {
		width: 100% !important;
	}

	#chart2 {
		width: 100% !important;
	}

	.datagrid table {
		width: 100%;
	}

	.datagrid table thead th {
		font-size: 14px;
	}

	.myHeader {
		font-size: 17px; 
	}
}