/*tooltip Box*/
.VA_Container_Tooltip {
	position: relative;
	border-radius: 9px;
	padding: 0 20px;
	margin: 10px;
	transition: all 0.3s ease-in-out;
	cursor: default;
}

/*tooltip */
.VA_Tooltip {
	visibility: hidden;
	z-index: 1;
	opacity: .40;
	width: 100%;
	padding: 0px 20px;
	position: absolute;
	top: -34%;
	left: 0%;
	border-radius: 9px;
	font: 16px;
	transform: translateY(9px);
	transition: all 0.3s ease-in-out;
	box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
	background: var(--background-color-site-main);
	color: var(--label-color-command-main);
	border: 4px solid var(--background-color-site-main);
	background-color: red;
}



	/* tooltip  after*/
	.VA_Tooltip::after {
		content: " ";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 12.5px 0 12.5px;
		position: absolute;
		left: 40%;
	}

[ML_Style_Selector=Light] .VA_Tooltip::after {
	border-color: var(--background-color-site-main) transparent transparent transparent;
}

[ML_Style_Selector=Dark] .VA_Tooltip::after {
	border-color: var(--background-color-site-main) transparent transparent transparent;
}


.VA_Tiptype_error .VA_Tooltip {
	border: 4px solid red;
}

	.VA_Tiptype_error .VA_Tooltip::after {
		border-color: red transparent transparent transparent;
		top: 106%;
	}

.VA_Tiptype_warning .VA_Tooltip {
	border: 4px solid orange;
}

	.VA_Tiptype_warning .VA_Tooltip::after {
		border-color: orange transparent transparent transparent;
		top: 106%;
	}

.VA_Showtip .VA_Tooltip {
	visibility: visible;
	transform: translateY(-10px);
	opacity: 1;
	transition: .3s linear;
	animation: odsoky 1s ease-in-out infinite alternate;
}

@keyframes odsoky {
	0% {
		transform: translateY(6px);
	}

	100% {
		transform: translateY(1px);
	}
}

/*hover ToolTip*/
.left:hover {
	transform: translateX(-6px);
}

.right:hover {
	transform: translateX(6px);
}

.VA_Tipposition_top {
	transform: translateY(-6px);
}

.VA_Tipposition_bottom {
	transform: translateY(6px);
}



/*left*/

.left .VA_Tooltip {
	top: -20%;
	left: -170%;
}

	.left .VA_Tooltip::after {
		top: 40%;
		left: 90%;
		transform: rotate(-90deg);
	}

/*right*/

.right .VA_Tooltip {
	top: -20%;
	left: 115%;
}

	.right .VA_Tooltip::after {
		top: 40%;
		left: -12%;
		transform: rotate(90deg);
	}


/*bottom*/
.VA_Tipposition_bottom .VA_Tooltip {
	top: 115%;
	left: 0%;
}

	.VA_Tipposition_bottom .VA_Tooltip::after {
		top: -12px;
		left: 40%;
		transform: rotate(180deg);
	}



/* contenitore esterno, in basso a destra */
div[ML_PageControl_Type=VirtualAssistant_externalContainer] {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	z-index: 1001;
}

	div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Type=Message_externalContainer] {
		max-height: calc( 100vh - 30%);
		box-shadow: 0px 0px 25px 7px rgba(0,0,0,0.3);
		border-radius: 25px;
		overflow: auto;
	}

		/* contenitore di tutto il contenuto del messaggio */
		div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=PopUp]) {
			background-color: var(--content-color);
			border: 1px solid rgb(255 255 255);
			border-radius: 8px;
			padding: 15px;
		}

	div[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Idle] {
		display: none;
	}

	div[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Info] {
		position: fixed;
		bottom: 30px;
		left: 30px;
		max-width: calc(100vw - 60px);
	}

	div[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=PopUp] {
		position: fixed;
		/*tolto per problemi su safari 05/05/25*/
		/*		height: fit-content;*/
		width: fit-content;
		max-height: min(8000px, 95vh);
		max-width: min(1000px, 95vw);
	}

body .SITE-LOADER-Container:has(+ form [ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=PopUp]) {
	opacity: 0;
	/*transition: all .5s ease;*/
}

[ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=Idle]) .VA_Layout {
	height: 100%;
	display: grid;
	grid-template-rows: min-content auto min-content;
	grid-template-areas:
		"VA_Title"
		"VA_Message"
		"VA_Command";
}

.VA_Title {
	grid-area: VA_Title;
	align-items: center;
	column-gap: 10px;
}

	.VA_Title [ML_PageControl_Key=VA_Title_Text] {
		font-weight: bold;
		font-size: larger;
	}

.VA_Message {
	grid-area: VA_Message;
	overflow-y: auto;
}

	.VA_Message:has( [ml_pagecontrol_type=TextAreaCKEDITOR]) {
		overflow-y: unset;
	}

[ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=PopUp]) .VA_Message {
	padding: 10px 0px;
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=PopUp]:has( .VA_Message > [ML_PageControl_Type^=SEARCH]) {
	padding: 10px;
	background-color: var(--content-color)
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=PopUp] .VA_Message [ML_PageControl_Type^=SEARCH] [ml_pagecontrol_type=ML_CONTROLRENDER_Container] {
	max-height: min(410px, 95vh);
	overflow: auto;
}

[ml_pagecontrol_type=Message_externalContainer] [ML_PageControl_Type^=SEARCH] {
	/*Paolo ha commentato qua il 22/10 se nessuno rompe, cancellare.     p.s. 57vh da dove è stato tirato fuori?*/
	/*	max-height: 57vh;*/
	/*	overflow: auto*/
}

.VA_Command {
	grid-area: VA_Command;
	display: none;
	gap: 7px;
	justify-content: end;
	padding-top: 5px;
}

[ml_pagecontrol_type=Message_externalContainer][ml_pagecontrol_type_status=PopUp] .VA_Command {
	background-color: var(--content-color);
	overflow: hidden;
	padding: 5px;
}

/*********************
		TOAST
*********************/
[ML_PageControl_Type=Toast_externalContainer] {
	position: fixed;
	bottom: 30px;
	left: 30px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

	[ML_PageControl_Type=Toast_externalContainer] .ToastTemplate {
		display: none;
	}

	[ML_PageControl_Type=Toast_externalContainer] .Toast {
		--toast-accent-color: var(--success);
		display: flex;
		width: fit-content;
		height: 36px;
		background: var(--content-color);
		border-radius: 8px;
		align-items: center;
		padding: 2px 15px;
		gap: 20px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		border-left: 8px solid var(--toast-accent-color);
		overflow: hidden;
		transform: translateX(-400px);
		transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
	}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.Success {
			--toast-accent-color: var(--success);
		}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.Error {
			--toast-accent-color: var(--error);
		}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.Info {
			--toast-accent-color: var(--info);
		}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.Neutral {
			--toast-accent-color: var(--neutral);
		}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.Warning {
			--toast-accent-color: var(--warning);
		}

		[ML_PageControl_Type=Toast_externalContainer] .Toast.ToastVisible {
			transform: translateX(0);
		}


			[ML_PageControl_Type=Toast_externalContainer] .Toast.ToastVisible .ToastProgressBar {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 3px;
				width: 100%;
				background: var(--content-color);
			}

				[ML_PageControl_Type=Toast_externalContainer] .Toast.ToastVisible .ToastProgressBar::before {
					content: "";
					position: absolute;
					bottom: 0;
					right: 0;
					height: 100%;
					width: 100%;
					background-color: var(--toast-accent-color);
				}

				[ML_PageControl_Type=Toast_externalContainer] .Toast.ToastVisible .ToastProgressBar::before {
					animation: progress 6s linear forwards;
				}

@keyframes progress {
	100% {
		right: 100%;
	}
}

div[ML_PageControl_Type=VirtualAssistant_externalContainer]:has([ML_PageControl_Type=Toast_externalContainer] .Toast ) {
	display: unset;
}

div[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=Idle]) + [ML_PageControl_Type=Toast_externalContainer] {
	display: none;
}