.charts_collection{
	container-type 	: inline-size;
	container-name  : charts-collection;
	width 			: 100%;
	height 			: auto;
	display 		: inline-block;
	clear 			: both;

	& .one_chart{
		display 		: inline-block;
		float 			: left;
		margin 			: 10px;
		padding 		: 10px;
		box-sizing 		: border-box;
		border-radius 	: 10px;
		background-color: var(--COLOR_GRAY_F8);
		max-width 		: clamp(380px,calc(100svw / 3) - 30px, calc(100svw - 10px));
		width 			: clamp(380px,calc(100svw / 3) - 30px, calc(100svw - 10px));
		height 			: 300px;

		&[hsize=max]{
			max-width 		: calc(100% - 20px);
			width 			: calc(100% - 20px);
		}

		&[hsize=one_half]{
			max-width 		: clamp(380px,calc(100svw / 2) - 40px, calc(100svw - 10px));
			width 			: clamp(380px,calc(100svw / 2) - 40px, calc(100svw - 10px));
		}

		&[hsize=one_third]{
			max-width 		: clamp(380px,calc(100svw / 3) - 30px, calc(100svw - 10px));
			width 			: clamp(380px,calc(100svw / 3) - 30px, calc(100svw - 10px));
		}

		&[hsize=one_quarter]{
			max-width 		: clamp(285px,calc(100% / 4) - 20px, calc(100svw - 10px));
			width 			: clamp(285px,calc(100% / 4) - 20px, calc(100svw - 10px));
		}

		&:hover{
			background-color: var(--COLOR_GRAY_E);
		}

		& .title{
			font-size: 14px;
			font-weight: bold;
		}

		/*& .apexcharts-text.apexcharts-yaxis-label, & .apexcharts-text.apexcharts-yaxis-label tspan, & .apexcharts-text.apexcharts-yaxis-label title {
			color: var(--COLOR_BLACK);
			-webkit-text-stroke: 3px var(--COLOR_WHITE);
			 text-shadow: 
			-1px -1px 0 white,
			1px -1px 0 white,
			-1px  1px 0 white,
			1px  1px 0 white;
		}*/
	}

	&[type=grid_list]{
		& .one_chart{
			max-height 	: 350px;
			height 		: 350px;
			
			& .chart{
				max-width 	: 500px;
				max-height 	: 300px;
				height 		: 100%;
				width 		: 100%;
			}
		}

		& .chart[type=treemap] .apexcharts-datalabel,
		& .chart[type=treemap] .apexcharts-datalabel tspan {
			font-size 	: 10px !important;
			line-height : 20px;
			font-weight : 600 !important;
		}
	}

	&[type=student_stats]{
		& .one_chart{
			height 	: 250px;

			& .chart{
				max-width 	: 100%;
				max-height 	: 100%;
				height 		: 100%;
				width 		: 100%;
			}
		}
	}
}

@container charts-collection (max-width: 1200px) {
	.charts_collection{
		& .one_chart{
			max-width 		: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
			width 			: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));

			&[hsize=max]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
				clear 			: both;
			}

			&[hsize=one_third]{
				max-width 		: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
				width 			: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
			}

			&[hsize=one_quarter]{
				max-width 		: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
				width 			: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
			}
		}
	}
}

@container charts-collection (max-width: 1000px) {
	.charts_collection{
		& .one_chart{
			max-width 		: clamp(290px,calc(100% / 2) - 40px, calc(100% - 10px));
			width 			: clamp(290px,calc(100% / 2) - 40px, calc(100% - 10px));

			&[hsize=max]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
				clear 			: both;
			}

			&[hsize=one_third]{
				max-width 		: clamp(290px,calc(100% / 2) - 60px, calc(100% - 10px));
				width 			: clamp(290px,calc(100% / 2) - 60px, calc(100% - 10px));
			}

			&[hsize=one_quarter]{
				max-width 		: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
				width 			: clamp(290px,calc(100% / 2) - 20px, calc(100% - 10px));
			}
		}
	}
}

@container charts-collection (max-width: 800px) {
	.charts_collection{
		& .one_chart{
			max-width 		: calc(100% - 20px);
			width 			: calc(100% - 20px);
			clear 			: both;

			&[hsize=max]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
			}

			&[hsize=one_half]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
			}

			&[hsize=one_third]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
			}

			&[hsize=one_quarter]{
				max-width 		: calc(100% - 20px);
				width 			: calc(100% - 20px);
			}
		}
	}
}


.ui-modal, .dfi-ui-modal{
	
	& .one_chart{
		max-width 	: none;
		max-width 	: 90svh;
		max-height 	: 90svh;
		width 		: clamp(380px, calc(90svw - 20px), calc(100svw  - 20px));
		margin 		: 10px;
		
		& .title{
			font-size: 14px;
			font-weight: bold;
		}

		& .chart {
			position: relative;
			
			& .apexcharts-canvas{
				opacity : 1;
				background-image: url('../../../../assets/images/logos/educa_city/logo_gray_150b.png');background-repeat: no-repeat;
				background-position: top left; 	/* place in top-left corner */
				background-size: auto; 			/* keep original size */
			}
		}
	}


}