@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-webkit-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		transform: translateY(-15px)
	}

	60% {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px)
	}
}

/* Smartcontainer*/
.ML-WIDGET-Container {
	background-color: var(--background-color-container-active);
	padding: 0px;
	margin: 6px 0px 4px 0px;
	border: solid 1px var(--border-color-container);
	width: 260px;
	min-width: 260px;
	max-width: 260px;
	float: left;
	box-sizing: border-box;
	cursor: pointer;
}

	.ML-WIDGET-Container:hover {
		border: solid 1px var(--border-color-container-hover);
	}

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


	.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] {
		background-color: var(--background-color-container-active-header);
		border-bottom: solid 1px var(--border-color-container);
		text-align: left;
		width: 100%;
		text-decoration: none;
		padding: 2px 0px 2px 10px;
		position: relative;
		display: inline-block;
		white-space: nowrap;
		cursor: pointer;
	}

		/* testo del titolo */
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] span {
			color: var(--label-color-main);
			font-weight: bold;
			cursor: pointer;
		}
			/* testo che indica il numero di avvisi*/
			.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] span:nth-of-type(2) {
				position: absolute;
				top: -7px;
				right: 4px;
				padding: 3px 9px;
				border-radius: 10px;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
				-webkit-animation-timing-function: ease-in-out;
				animation-timing-function: ease-in-out;
				animation-iteration-count: 2;
				-webkit-animation-iteration-count: 2;
			}

		/* effetto bounce*/
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER]:hover span:nth-of-type(2) {
			cursor: pointer;
			animation-name: bounce;
			-moz-animation-name: bounce;
		}

		/* indicatore NotActive -> nessuno attivo*/
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] div[ML_Status=NotActive] span:nth-of-type(2) {
			background-color: grey;
			color: var(--label-color-widget_info);
		}

		/* indicatore info -> tutto ok*/
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] div[ML_Status=Info] span:nth-of-type(2) {
			background-color: var(--label-background-widget_info);
			color: var(--label-color-widget_info);
		}

		/* indicatore warning -> avvisi*/
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] div[ML_Status=Warning] span:nth-of-type(2) {
			background-color: var(--label-background-widget_warning);
			color: var(--label-color-widget_warning);
		}

		/* indicatore warning -> errori*/
		.ML-WIDGET-Container div[ML_PageControl_Type=HEADER] div[ML_Status=Error] span:nth-of-type(2) {
			background-color: var(--label-background-widget_error);
			color: var(--label-color-widget_error);
		}

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


.ML-WIDGET-Container div[ML_PageControl_Type=CONTENT] {
	/*overflow: hidden;*/
	padding: 10px 20px 10px 20px;
	background-color: var(--background-color-container-active);
	text-align: left;
}

	/* testo del contenuto */
	.ML-WIDGET-Container div[ML_PageControl_Type=CONTENT] span {
		cursor: pointer;
		color: var(--label-color-main);
	}

	.ML-WIDGET-Container div[ML_PageControl_Type=CONTENT] [ML_PageControl_Type=trContainer][ML_Status=Error] span {
		color: var(--input-validator-error);
	}