div[ML_PageControl_Key=EntityField_Container] {
	margin: 0px 0px;
	padding: 5px;
	text-align: left;
	position: relative;
}


	div[ML_PageControl_Key=EntityField_Container].Error {
		--primary: var(--error);
	}

	.ML-FORMTABLE-Container.NotRequired,
	div[ml_pagecontrol_key=EntityField_Container].NotRequired,
	div[ml_pagecontrol_key=EntityField_Container].NotRequired [ml_pagecontrol_entityfield] {
		border-color: var(--secondary-500);
		outline-color: var(--secondary-500);
		--primary: var(--secondary-500);
	}

		div[ml_pagecontrol_key=EntityField_Container].NotRequired [ml_pagecontrol_entityfield] {
			background-color: var(--secondary-50);
		}

	/* textbox con dato entity*/
	div[ML_PageControl_Key=EntityField_Container] :where(input, textarea, div[ml_pagecontrol_entityfield]) {
		padding: 12px 5px 8px 10px;
		border-radius: 5px;
		font-size: 14px;
		width: 100%;
		transition: all 0.3s;
		color: var(--text) !important;
		border: 1px solid var(--content-color);
		outline: 1px solid var(--border-color);
		background-color: var(--trasparent);
	}

	/* textbox con dato entity*/
	div[ML_PageControl_Key=EntityField_Container] input[type=color] {
		padding: 3px 10px 1px;
	}

		div[ML_PageControl_Key=EntityField_Container] input[type=color]::-webkit-color-swatch {
			border: 1px solid var(--text);
			border-radius: 5px;
		}

	div[ML_PageControl_Key=EntityField_Container] :where(input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:active) {
		-webkit-background-clip: text;
	}

	div[ML_PageControl_Key=EntityField_Container] input[type="color"] {
		height: 43px;
	}


/*evidenzio la entity su over e focus*/
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container]:not([ML_PageControl_Attributes*=NotEditable]) :where(input, textarea, div[ml_pagecontrol_entityfield]):where(:focus, :hover) {
	border-color: var(--primary);
	outline-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]) :where(input, textarea, div[ml_pagecontrol_entityfield]):where(:focus, :hover) ~ span {
		color: var(--primary);
		outline-color: var(--primary);
		cursor: text;
	}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] input:not(:placeholder-shown) {
	outline-color: var(--primary);
}

/* label dell'entity*/
div[ML_PageControl_Key=EntityField_Container] > span,
span[ML_PageControl_Type=FloatingLabel] {
	position: absolute;
	left: 8px;
	top: 17px;
	font-size: 14px;
	font-style: italic;
	display: inline-block;
	padding: 0px 5px;
	pointer-events: none;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*sposto la label in alto quanto ho il focus nella textbox oppure ho un valore scritto*/
div[ML_PageControl_Key=EntityField_Container] input:not(:placeholder-shown) ~ span:not([ML_PageControl_Key=Info]),
div[ML_PageControl_Key=EntityField_Container] input:-webkit-autofill ~ span:not([ML_PageControl_Key=Info]),
div[ML_PageControl_Key=EntityField_Container] textarea:not(:placeholder-shown) ~ span:not([ML_PageControl_Key=Info]),
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container]:not([ML_PageControl_Attributes*=NotEditable]) input:focus ~ span:not([ML_PageControl_Key=Info]),
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container] textarea:focus ~ span:not([ML_PageControl_Key=Info]),
span[ML_PageControl_Type=FloatingLabel] {
	top: -4px !important;
	font-style: normal !important;
	left: 12px !important;
	font-size: 12px !important;
	color: var(--primary);
	background: linear-gradient(360deg, var(--trasparent) 44%, var(--content-color) 45%, var(--content-color) 56%, var(--trasparent) 57%)
}


div[ML_PageControl_Key=EntityField_Container] span[ML_PageControl_Key=Info] {
	left: unset;
	right: 20px;
	font-size: 12px;
	line-height: 12px;
	background: linear-gradient(360deg, var(--trasparent) 44%, var(--content-color) 45%, var(--content-color) 56%, var(--trasparent) 57%)
}

div[ML_PageControl_Key=EntityField_Container] :where(input) ~ span[ML_PageControl_Key=Info] {
	top: 42px;
}

div[ML_PageControl_Key=EntityField_Container] :where(textarea) ~ span[ML_PageControl_Key=Info] {
	bottom: -1px;
}

div[ML_PageControl_Key=EntityField_Container] span[ML_PageControl_Type=Icon] {
	left: unset;
	right: 16px;
	top: unset;
	bottom: 16px;
	font-style: normal !important;
	font-size: 17px;
}

/**************************************************************
Validatori
***************************************************************/
[ML_PageContainer_Status=EDITING] input:not(:placeholder-shown):valid {
	border-color: var(--primary) !important;
	outline-color: var(--primary) !important;
}

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

[ML_PageContainer_Status=EDITING] input:invalid {
	border-color: var(--error) !important;
	outline-color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory] :where(input, textarea):placeholder-shown {
	border-color: var(--error) !important;
	outline-color: var(--error) !important;
}

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

[ML_PageContainer_Status=EDITING] :is(input, textarea)[ML_Status*=Error] {
	border-color: var(--error) !important;
	outline-color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] :where(input:invalid) span {
	color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] :is(input, textarea)[ML_Status*=Error] span {
	color: var(--error) !important;
}

[ML_PageContainer_Status=EDITING] :where(div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory] :where(input, textarea):placeholder-shown) ~ span {
	color: var(--error) !important;
}

/**************************************************************
Numerico
***************************************************************/
div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Numeric] input {
	text-align: right;
}
/**************************************************************
Obbligatorio
***************************************************************/
[ML_PageContainer_Status=EDITING] div[ML_PageControl_Key=EntityField_Container][ML_PageControl_Attributes*=Mandatory] :where(input, textarea, ul) {
	border-left-width: 5px;
	border-right-width: 5px;
}

/**************************************************************
Disabilitato
***************************************************************/
div[ML_PageControl_Key=EntityField_Container].Disabled {
	pointer-events: none;
}

/**************************************************************
DataInfo
***************************************************************/
div[ML_PageControl_Key=EntityField_Container] div[ML_PageControl_Type=DataInfo] {
	font-size: 13px;
	color: var(--text-500);
	padding: 3px 5px;
}

	div[ML_PageControl_Key=EntityField_Container] div[ML_PageControl_Type=DataInfo] ul {
		margin: 0;
	}

	div[ML_PageControl_Key=EntityField_Container] div[ML_PageControl_Type=DataInfo] p {
		margin-top: 1em;
		margin-bottom: 1em;
	}

		div[ML_PageControl_Key=EntityField_Container] div[ML_PageControl_Type=DataInfo] p:where(:first-child, :last-child) {
			margin: 0;
		}
/**************************************************************
TextArea
***************************************************************/
textarea {
	resize: none;
}

/**************************************************************
Password
***************************************************************/
div[ML_PageControl_Key=EntityField_Container] .Button[ML_PageControl_Key=Btn_RevealPassword] {
	position: absolute;
	top: 9px;
	right: 7px;
}

	div[ML_PageControl_Key=EntityField_Container] .Button[ML_PageControl_Key=Btn_RevealPassword] span[ML_PageControl_Type=Icon] {
		right: unset;
		bottom: unset;
	}