/* Smartcontainer Form Editable-OFF*/

[ML_PageControl_Type=FORM_EDIT] {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	width: 100%;
	height: 100vh;
	float: left;
}

	/*******************************************************
Header
*******************************************************/
	[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER] {
		overflow: hidden;
		text-align: center;
		border-bottom: 1px solid var(--border-color);
		background-color: var(--neutral-color);
		position: sticky;
		top: 0px;
		z-index: 11;
		height: var( --header-FORM_EDIT);
	}

		/*span che è il titolo */
		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER] div[ML_PageControl_Key=Title] span[ml_pagecontrol_key=txtTitle] {
			font-size: 16px;
			font-weight: bold;
			cursor: default;
			margin: 0px 5px;
		}

	/*******************************************************
	Content
*******************************************************/

	[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=CONTENT] {
		overflow: auto;
		padding: 20px;
		background-color: var(--background);
		width: 100%;
		height: calc( 100vh - var( --header-FORM_EDIT));
	}

		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=CONTENT] [ML_PageControl_Type=CONTENT_CONTAINER_FULL] {
			display: flex;
			gap: 20px;
			flex-direction: column;
		}


			[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=CONTENT] [ML_PageControl_Type=CONTENT_CONTAINER_FULL] [ML_PageControl_Type=CONTENT_CONTAINER] {
				padding: 20px;
				background-color: var(--content-color);
				border: 1px solid var(--border-color);
				border-radius: 16px;
			}

				[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=CONTENT] [ML_PageControl_Type=CONTENT_CONTAINER_FULL] [ML_PageControl_Type=CONTENT_CONTAINER]:hover {
					border: 1px solid var(--primary);
				}

	/*Gioele
					Per tabella default consent 

					Spero non rompa nulla

				*/
	/*				[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=CONTENT] [ML_PageControl_Type=CONTENT_CONTAINER_FULL] [ML_PageControl_Type=CONTENT_CONTAINER] table {
					color: var(--primary);
				}*/

	/*-----------------------------
	From - Header - Contenitore
-----------------------------*/
	[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] {
		display: grid;
		grid-template-columns: 20% 60% 20%;
		grid-template-areas:
			"LeftHeaderContainer TitleHeaderContainer RightHeaderContainer"
			"ExtraHeaderContainer ExtraHeaderContainer ExtraHeaderContainer";
		grid-template-rows: 50px min-content;
		padding: 5px;
		padding-inline: 20px;
	}

		/*From - Header - Contenitore - parte sinistra con icone*/
		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .LeftHeaderContainer {
			grid-area: LeftHeaderContainer;
			text-align: start;
			align-content: center;
			justify-content: center;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 5px;
		}

			[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .LeftHeaderContainer :where([ML_PageControl_Key=CommandMaximize], [ML_PageControl_Key=CommandMinimize]) {
				display: none;
			}

		/*From - Header - Contenitore - parte centrale con titolo*/
		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .TitleHeaderContainer {
			grid-area: TitleHeaderContainer;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary);
			font-size: large;
		}

		/*From - Header - Contenitore - parte destra con icone*/
		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .RightHeaderContainer {
			grid-area: RightHeaderContainer;
			display: flex;
			justify-content: flex-end;
			flex-direction: row;
			gap: 8px;
			align-items: center;
		}

		/*From - Header - Contenitore - parte sotto opzionale con tasti aggiuntivi*/
		[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .ExtraHeaderContainer {
			grid-area: ExtraHeaderContainer;
			display: flex;
			justify-content: flex-end;
			flex-direction: row;
			gap: 8px;
			align-items: center;
		}

			[ML_PageControl_Type=FORM_EDIT] div[ML_PageControl_Type=HEADER_CONTAINER] .ExtraHeaderContainer .Button {
				padding: 2px 6px;
			}

	/*Se ha un extra container aumento l'altezza dell'header*/
	/*Anche al twin, perche se c'è un twin significa che c'è un extra container per forza...*/
	[ML_PageControl_Type=FORM_EDIT]:has([ml_pagecontrol_type=HEADER_CONTAINER] .ExtraHeaderContainer),
	[ML_PageControl_Type=FORM_EDIT]:has([ml_pagecontrol_type=HEADER_CONTAINER][ml_pagecontrol_key=TwinHeader]) {
		/*61px + 24px*/
		--header-FORM_EDIT: 85px;
	}

	[ML_PageControl_Type=FORM_EDIT] .HeaderFlag {
		height: 26px;
		border-radius: 50% 0%;
		border: 2px solid var(--primary);
	}

		[ML_PageControl_Type=FORM_EDIT] .HeaderFlag[ML_PageControl_Key] {
			transition: all ease-in-out 0.2s;
			cursor: pointer;
		}

			[ML_PageControl_Type=FORM_EDIT] .HeaderFlag[ML_PageControl_Key]:hover {
				transform: scale(1.1);
				opacity: 0.8;
			}

	/*******************************************************
Content
*******************************************************/

	[ML_PageControl_Type=FORM_EDIT][ml_pagecontrol_type_status=READONLY] > div[ML_PageControl_Type=CONTENT] {
		--primary: var(--text-500);
	}

	/*******************************************************
Footer
*******************************************************/

	[ML_PageControl_Type=FORM_EDIT] > div[ML_PageControl_Type=FOOTER] {
		overflow: hidden;
		padding: 20px;
	}


	[ML_PageControl_Type=FORM_EDIT] > div[ML_PageControl_Type=FOOTER] {
		padding: 12px;
		border-top: 1px solid var(--border-color);
		background-color: var(--background-color);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
		/**/
		[ML_PageControl_Type=FORM_EDIT] > div[ML_PageControl_Type=FOOTER] > div {
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 10px;
		}

			[ML_PageControl_Type=FORM_EDIT] > div[ML_PageControl_Type=FOOTER] > div > .Button {
				display: none;
				font-size: 17px;
				justify-content: center;
				align-items: center;
				flex-grow: 1;
				max-width: 220px;
				container-type: inline-size;
				container-name: button;
			}
		/**/
		[ML_PageControl_Type=FORM_EDIT] > div[ML_PageControl_Type=FOOTER] table {
			width: 100%;
		}

@container button (width < 100px) {
	span:not([ml_pagecontrol_type=Icon]) {
		display: none;
	}
}

.SwitchDISABLED_FOR_EDIT {
	pointer-events: none;
}

[ML_PageControl_Type=FORM_EDIT]:where([ml_pagecontrol_type_status=READONLY], [ml_pagecontrol_type_status=VIEW]) [ML_PageControl_Switch*=HIDE_ON_VIEW] {
	display: none !important;
}

[ML_PageControl_Type=FORM_EDIT]:not([ml_pagecontrol_type_status=EDITING]) .ShowOnEdit {
	display: none;
}

[ML_PageControl_Type=FORM_EDIT]:not([ml_pagecontrol_type_status=EDITING]) .VisibleOnEdit {
	opacity: 0;
	visibility: hidden;
}

[ML_PageControl_Type=FORM_EDIT][ml_pagecontrol_type_status=EDITING] .HiddenOnEdit {
	opacity: 0;
	visibility: hidden;
}

[ML_PageControl_Type=FORM_EDIT][ml_pagecontrol_type_status=EDITING] .HideOnEdit {
	display: none;
}

[ML_PageControl_Type=FORM_EDIT]:not([ml_pagecontrol_type_status=EDITING][data-UniqueID="0"]) .ShowOnNew {
	display: none;
}

[ML_PageControl_Type=FORM_EDIT]:not([ml_pagecontrol_type_status=EDITING][data-UniqueID="0"]) .VisibleOnNew {
	opacity: 0;
	visibility: hidden;
}

[ML_PageControl_Type=FORM_EDIT][ml_pagecontrol_type_status=EDITING][data-UniqueID="0"] .HiddenOnNew {
	opacity: 0;
	visibility: hidden;
}

[ML_PageControl_Type=FORM_EDIT][ml_pagecontrol_type_status=EDITING][data-UniqueID="0"] .HideOnNew {
	display: none;
}