.ig-chart-container {
	width: 100%;
	max-width: 100%;
}

.canvasContainer {
	display: inline-block;
	width: 100%;
}

/**
 * For pie and doughnut charts with legend, the legend will be
 * placed to the right of the chart.
 */
.chart-pie .canvasContainer.hasLegend,
.chart-doughnut .canvasContainer.hasLegend {
    width: 50%;
}

.ig-chart {
	width: 100% !important;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.chart-legend {
	list-style: none;
	margin: 0;
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

.pie-legend li span:before,
.doughnut-legend li span:before {
	content: '';
	width: 20px;
	height: auto;
	display: inline-block;
}
.pie-legend li,
.doughnut-legend li{
    margin-bottom: 2px;
    justify-content: space-between;
    cursor: pointer;
}
.pie-legend li span,
.doughnut-legend li span {
    margin-right: 0.6em;
    border-radius: 0.25em;
    height: 20px;
    width: 20px;
}
.pie-legend li .chart-legend-btn,
.doughnut-legend li .chart-legend-btn{
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}
.pie-legend li.disabled,
.doughnut-legend li.disabled{
    text-decoration: line-through;
}
.pie-legend li .chart-legend-btn::before,
.doughnut-legend li .chart-legend-btn::before{
    content: attr(data-open);
}
.pie-legend li .chart-legend-btn.active::before,
.doughnut-legend li .chart-legend-btn.active::before{
    content: attr(data-close);
}

.pie-legend li .content,
.doughnut-legend li .content {
    display: none;
}
.pie-legend li .content.active,
.doughnut-legend li .content.active {
    display: block;
}

.radar-legend, .bar-legend, .line-legend {
	display: none;
}

.stat-table-legend .stat-legend-value {
    text-align: right;
}

@media screen and (max-width: 600px) {

    .chart-pie .canvasContainer.hasLegend,
    .chart-doughnut .canvasContainer.hasLegend {
        width: 100%;
    }

    .chart-legend {
        width: 100%;
    }
}
