﻿

div[ML_PageControl_Key=VirtualAssistant_Avatar] {
	width: 100px;
	height: 100px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-size: contain;
}

[ML_Style_Selector=Light] div[ML_PageControl_Key=VirtualAssistant_Avatar] {
	background-image: url("Images/Shared/Avatar/girl_1_Light.png");
}

	[ML_Style_Selector=Light] div[ML_PageControl_Key=VirtualAssistant_Avatar][ML_PageContainer_Status=Lazy] {
		background-image: url("Images/Shared/Avatar/girl_1_Light_lazy.png");
	}

[ML_Style_Selector=Dark] div[ML_PageControl_Key=VirtualAssistant_Avatar] {
	background-image: url("Images/Shared/Avatar/girl_1_Black.png");
}

/*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);
}



	/* 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] {
	position: fixed;
	bottom: 5px;
	right: 5px;
	z-index: 1001;
}

	/* immagine dell'avatar */
	div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Key=VirtualAssistant_Avatar] {
		position: fixed;
		bottom: 5px;
		right: 5px;
		width: 50px;
		height: 50px;
		z-index: 99;
	}

		/* immagine dell'avatar */
		div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Key=VirtualAssistant_Avatar][ML_PageContainer_Status=Lazy] {
			width: 50px;
			height: 50px;
		}

	/* contenitore di tutto il contenuto del messaggio */
	div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Type=Message_externalContainer] {
		display: none;
		background-color: var(--background-color-site-main);
		border: 4px solid var(--background-color-site-main);
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
		z-index: 100;
		position: fixed;
		bottom: 52px;
		right: 20px;
		min-width: 250px;
		max-height: calc(80% - 50px);
	}

		/* freccia per il callout */
		div[ML_PageControl_Type=VirtualAssistant_externalContainer] div[ML_PageControl_Type=Message_externalContainer]::after {
			content: " ";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 12px;
			position: absolute;
			border-color: var(--background-color-site-main) transparent transparent transparent;
			right: 6px;
			bottom: -28px;
		}


[ML_PageControl_Key=VA_Title] [ML_PageControl_Type=Icon] {
	font-size: 40px;
	display: none;
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Info] [ML_PageControl_Key=VA_Title] [ML_PageControl_Type=Icon][ML_PageControl_Type_Status=Info] {
	display: inline-flex;
	color: white;
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Warning] [ML_PageControl_Key=VA_Title] [ML_PageControl_Type=Icon][ML_PageControl_Type_Status=Warning] {
	display: inline-flex;
	color: yellow;
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Question] [ML_PageControl_Key=VA_Title] [ML_PageControl_Type=Icon][ML_PageControl_Type_Status=Question] {
	display: inline-flex;
	color: white;
}

[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Error] [ML_PageControl_Key=VA_Title] [ML_PageControl_Type=Icon][ML_PageControl_Type_Status=Error] {
	display: inline-flex;
	color: #a51515;
}


[ML_PageControl_Type=Message_externalContainer][ML_PageControl_Type_Status=Idle] .VA_Layout {
	display: grid;
	grid-template-rows: auto;
	grid-template-areas: "VA_Message";
	height: 100%;
}



[ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=Idle]) .VA_Layout {
	height: 100%;
	display: grid;
	grid-template-rows: 50px auto 28px;
	grid-template-areas: "VA_Title" "VA_Message" "VA_Command";
}

.VA_Title {
	grid-area: VA_Title;
	display: none;
	align-items: center;
	column-gap: 10px;
}

	.VA_Title [ML_PageControl_Key=VA_Title_Text] {
		color: var(--label-color-command-main);
	}

[ML_PageControl_Type=Message_externalContainer]:not([ML_PageControl_Type_Status=Idle]) .VA_Title {
	display: flex;
}

.VA_Message {
	grid-area: VA_Message;
	min-height: 40px;
	color: var(--label-color-command-main);
	overflow-y: auto;
}

	.VA_Message div[ML_PageControl_Key=EntityField_Container]:has(input[ML_PageControl_Key=SearchTextBox]) {
		margin: 2px 0px;
	}


.VA_Command {
	grid-area: VA_Command;
	display: none;
	justify-content: space-between;
	justify-content: flex-end;
	padding-top: 5px;
}

	.VA_Command [ML_PageControl_Type=COMMAND] {
		display: none;
	}


/* comando extra dato da a con href */
[ML_PageControl_Type=ExtraAction] {
	background-color: var(--main-color-contrast);
	border: 1px solid var(--label-color-main);
	padding: 1px 3px;
	text-decoration: none;
	cursor: pointer;
	color: var(--label-color-main);
}

/* Footer Helper*/
[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer] {
	background-color: var(--background-color-site-main);
	color: var(--background-color-site-secondary);
	border: 2px solid var(--command-other-color);
	border-radius: 4px;
	padding: 10px;
	box-shadow: 0 0 3px rgb(56 54 54 / 86%);
	z-index: 100;
	position: fixed;
	bottom: 1px;
	right: 52px;
	max-width: 50%;
	min-width: 350px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 47px;
}

	[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer]:not([ML_PageControl_Type_Status=Idle]) {
		display: normal;
	}

	[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer][ML_PageControl_Type_Status=Idle] {
		display: none !important;
	}

	[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer] [ML_PageControl_Key=VA_FooterTitle] {
		padding-right: 45px;
	}

	[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer] [ML_PageControl_Key=Btn_Close] {
		position: absolute;
		top: 0px;
		right: 0px;
	}

	[ML_PageControl_Type=VirtualAssistant_externalContainer] [ML_PageControl_Type=Message_footerContainer] [ML_PageControl_Key=Btn_Copy] {
		position: absolute;
		top: 19px;
		right: 0px;
	}
