/*---------------- CheckBoxList ----------------*/

div[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] {
	width: 100%;
	border-collapse: separate !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style-type: none;
	padding-inline: 5px;
	margin-block: 0px;
	min-height: 43px;
	border-radius: 5px;
	transition: all 0.3s;
	border: 1px solid var(--content-color);
	outline: 1px solid var(--border-color);
	background-color: var(--trasparent);
}

[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li {
	margin: 9px 2px 2px 2px;
	/*	min-width: 160px;*/
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 30px;
	padding-inline: 5px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--trasparent);
}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li input[type=checkbox] {
		outline-color: transparent !important;
		width: unset !important;
		margin-right: 5px;
	}

		[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li input[type=checkbox] + label {
			color: var(--text-500);
			user-select: none;
		}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li:has(input[type=checkbox]:checked) {
		border-color: var(--primary);
		background-color: var(--primary-50);
		border: 0px;
	}

	[ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li input[type=checkbox]:checked + label {
		color: var(--primary);
	}

/*evidenzio la label dell'entity su hover e focus*/
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container]:not([ML_PageControl_Attributes*=NotEditable]) [ML_PageControl_Type=CheckBoxList]:where(:focus, :hover) ~ span {
	color: var(--primary);
	outline-color: var(--primary);
	cursor: text;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory] [ML_PageControl_Type=CheckBoxList]:not(:has(input:checked)) {
	border-color: var(--error) !important;
	outline-color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory]:has([ML_PageControl_Type=CheckBoxList]) span:has(~[ML_PageControl_Type=RadioButtonList]:not(input:checked)) {
	color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory]:has([ML_PageControl_Type=CheckBoxList]) span:has(~[ML_PageControl_Type=RadioButtonList] input:checked) {
	color: var(--primary) !important;
}


[ML_PageContainer_Status=READONLY] [ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li:not(:has(input[type=checkbox]:checked) ) {
	display: none;
}

[ML_PageContainer_Status=READONLY] [ML_PageControl_Key=EntityField_Container] [ML_PageControl_Type=CheckBoxList] li input[type=checkbox]:checked {
	display: none;
}