/* Smartcontainer box*/
.ML-BOX-Container {
	background-color: var(--content-color);
	border: solid 2px var(--content-color);
	border-radius: 10px;
	width: 100%;
	float: left;
	box-shadow: 0px 0px 20px -3px var(--background-200);
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

	/*******************************************************
	Header
*******************************************************/


	.ML-BOX-Container [ML_PageControl_Type=HEADER] {
		text-align: left;
		padding: 10px 20px;
		border-top-right-radius: inherit;
		border-top-left-radius: inherit;
	}

		/* testo del titolo */
		.ML-BOX-Container [ML_PageControl_Type=HEADER] div[ML_PageControl_Key=Title] span {
			font-weight: bolder;
			cursor: default;
			color: var(--primary);
			background-color: inherit;
			font-size: large;
		}

	.ML-BOX-Container div[ML_PageControl_Type=HEADER_CONTAINER] {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "LeftHeaderContainer RightHeaderContainer";
	}

		.ML-BOX-Container div[ML_PageControl_Type=HEADER_CONTAINER]:has(+ [ML_PageControl_Type=HEADER_ICON]) {
			margin-left: 42px;
		}

	.ML-BOX-Container .LeftHeaderContainer {
		grid-area: LeftHeaderContainer;
		justify-content: flex-start;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		min-height: 36px;
	}

	/*Gioele - Se serve va in conflitto con btn info tutorial*/
	/*		.ML-BOX-Container .LeftHeaderContainer [ml_pagecontrol_type=Icon]:first-child {
			font-size: 24px;
			background: var(--primary);
			color: var(--content-color)
		}*/

	.ML-BOX-Container .RightHeaderContainer {
		grid-area: RightHeaderContainer;
		text-align: right;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
		gap: 3px;
	}

	.ML-BOX-Container div[ML_PageControl_Type=HEADER_ICON] {
		font-size: 26px;
		background: var(--primary);
		color: var(--content-color);
		padding: 5px;
		border-radius: 8px;
		position: absolute;
		left: 5px;
		width: 48px;
		height: 48px;
		text-align: center;
		top: 3px;
		transition: all .5s ease-in-out
	}

	.ML-BOX-Container:hover div[ML_PageControl_Type=HEADER_ICON] {
		background: var(--accent);
	}

	.ML-BOX-Container:has( div[ML_PageControl_Type=HEADER_ICON]) {
		/*		margin-top: 30px;
		margin-left: 30px;
		position: relative;*/
	}


	/*******************************************************
	Content
*******************************************************/
	/*.ML-BOX-Container [ML_PageControl_Type=CONTENT] {*/
	/*overflow: hidden;*/
	/*padding: 10px 20px 10px 20px;
		background-color: var(--background-color-container-active);
		text-align: left;
		min-height: calc(100% - 71px);
	}*/


	/*******************************************************
	Footer
*******************************************************/
	.ML-BOX-Container [ML_PageControl_Type=FOOTER] {
		overflow: hidden;
		padding: 10px 10px 10px 10px;
	}