.advanced-chart {
	position:relative;
	height:700px;
	border:1px solid #ddd;
	border-radius: 10px;

	--chart-area-width:100%;
	--chart-filter-width:0px;
	--chart-widget-height:0px;
}

.chart-has-filter {
	--chart-filter-width:250px;
	--chart-area-width:calc(100% - var(--chart-filter-width));
}
.chart-has-widgets {
	--chart-widget-height:250px;
	--chart-area-height:calc(100% - var(--chart-widget-height));
}


.chart-filter {
	position:absolute;
	width:var(--chart-filter-width);
	height:100%;
	border-right:1px solid #ddd;
}

.chart-area {
	position:absolute;
	top:0;
	left:var(--chart-filter-width);
	width:var(--chart-area-width);
	height:100%;
}

.chart-widgets {
	/* background-color:#ff9900; */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:var(--chart-widget-height);
	display:flex;
	gap:20px;
	padding:20px;
}

.chart-widget-item {
	/* background-color:#ff9900; */
	border-radius: 5px;
	padding:10px;
}

.chart-widgets-count-1 .chart-widget-item {
	width:100%;
}
.chart-widgets-count-2 .chart-widget-item {
	width:50%;
}
.chart-widgets-count-3 .chart-widget-item {
	width:33%;
}
.chart-widgets-count-4 .chart-widget-item {
	width:25%;
}

.chart-graph-bar-element {
	font-size: 12px;
	line-height: 16px;
	display:flex;
}

.chart-graph-bar-label {
	text-align: right;
	width: 55px;
	flex-grow: 0;
	flex-shrink: 0;
}
.chart-graph-bar-display {
	flex-grow:1;
}

.chart-graph-bar-display > div {
	empty-cells: show;
	height: 9px;
	margin: 3px 0 0 10px;
	background-color: #f3f3f3;
	border-radius: 20px;
}

.chart-main {
	/* background-color:#ff0000; */
	position:absolute;
	top:var(--chart-widget-height);
	left:0;
	width:100%;
	height:var(--chart-area-height);	
}