.CL_CHART_TABLE {
    height: 400px;
    width: 100%;
    border-spacing: collapse;
    text-align: center !important;
}
.CL_CHART_TABLE td {
	/*border: 1px solid grey;*/
    padding: 0;
    text-align: center !important;
}
.CL_CHART_TABLE td {
    padding: 0;
    text-align: center !important;
}
@media screen and (max-width: 768px) {
    .CL_CHART_TABLE tr td:nth-child(3) {
        display: block;
    }
    table tr td:nth-child(1), table tr td:nth-child(2) {
        display: inline-block;
    }
}
@media screen and (max-width: 576px) {
    .CL_CHART_TABLE tr td:nth-child(3) {
        display: block;
    }
    .CL_CHART_TABLE tr td:nth-child(1), .CL_CHART_TABLE tr td:nth-child(2) {
        display: inline-block;
    }
}

.CL_CHART_IMG, .CL_CHART_IMG2, .CL_CHART_IMG3
{
	padding: 2px !important; 
	margin: 2px !important;
}

@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG {	width:350px; height:auto;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG {	width:420px; height:auto;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG {	width:140px; height:auto;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG {	width:180px; height:auto;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG {	width:220px; height:auto;} }


@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG2 {	width:350px; height:auto;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG2 {	width:420px; height:auto;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG2 {	width:100px; height:auto;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG2 {	width:140px; height:auto;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG2 {	width:160px; height:auto;} }


@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG3 {	width:350px; height:auto;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG3 {	width:420px; height:auto;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG3 {	width:80px; height:auto;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG3 {	width:100px; height:auto;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG3 {	width:140px; height:auto;} }


@media screen and (min-width: 0px) and (max-width: 576px)    	{ . CL_CHART_IMG5_DIV {	max-width:350px; max-height:350px;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ . CL_CHART_IMG5_DIV {	max-width:420px; max-height:420px;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ . CL_CHART_IMG5_DIV {	max-width:200px; max-height:200px;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ . CL_CHART_IMG5_DIV {	max-width:250px; max-height:250px;} }
@media screen and (min-width: 1201px) 							{ . CL_CHART_IMG5_DIV {	max-width:300px; max-height:300px;} }


. CL_CHART_IMG5_DIV
{
/*	object-fit: scale-down;*/
	padding: 10px;
	margin: 10px;
}

/*
@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG5 {	width:350px;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG5 {	width:420px;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG5 {	width:20px; } }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG5 {	width:250px;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG5 {	width:300px;} }

 
 *
@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG5 {	width:350px;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG5 {	width:420px;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG5 {	width:20px; } }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG5 {	width:250px;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG5 {	width:300px;} }

/*
@media screen and (min-width: 0px) and (max-width: 576px)    	{ .CL_CHART_IMG5 {	width:350px; height:auto;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .CL_CHART_IMG5 {	width:420px; height:auto;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .CL_CHART_IMG5 {	width:20px; height:auto;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .CL_CHART_IMG5 {	width:250px; height:auto;} }
@media screen and (min-width: 1201px) 							{ .CL_CHART_IMG5 {	width:300px; height:auto;} }
*/


@media screen and (min-width: 0px) and (max-width: 576px)    	{ .seven-cols {	font-size:16px;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .seven-cols {	font-size:18px;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .seven-cols {	font-size:10px;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .seven-cols {	font-size:11px;} }
@media screen and (min-width: 1201px) 							{ .seven-cols {	font-size:12px;} }


@media screen and (min-width: 0px) and (max-width: 576px)    	{ .eight-cols {	font-size:16px;} }
@media screen and (min-width: 577px) and (max-width: 768px)	 	{ .eight-cols {	font-size:18px;} }
@media screen and (min-width: 767px) and (max-width: 992px) 	{ .eight-cols {	font-size:8px;} }
@media screen and (min-width: 993px)  and (max-width: 1200px)	{ .eight-cols {	font-size:9px;} }
@media screen and (min-width: 1201px) 							{ .eight-cols {	font-size:10px;} }



@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}









@media (min-width: 768px){
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1 {
    width: 12.5%;
    *width: 12.5%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .eight-cols .col-md-1,
  .eight-cols .col-sm-1,
  .eight-cols .col-lg-1 {
    width: 12.5%;
    *width: 12.5%;
  }
}