@keyframes appearDisappear5s
{
	0%		{ opacity: 0; visibility: visible; transform: scale(0, 0); }
	3%		{ opacity: 1; transform: scale(1, 1); }
	92%		{ opacity: 1; transform: scale(1, 1); }
	100%	{ opacity: 0; visibility: hidden; transform: scale(0, 0); }
}

@keyframes appearDisappear2s
{
	0%		{ opacity: 0; visibility: visible; transform: scale(0, 0); }
	10%		{ opacity: 1; transform: scale(1, 1); }
	75%		{ opacity: 1; transform: scale(1, 1); }
	100%	{ opacity: 0; visibility: hidden; transform: scale(0, 0); }
}

.ux-Message											{ position: relative; }
.ux-Message ul.messages								{ position: absolute; width: 100%; bottom: 8px; margin: 0; padding: 0px 4px; overflow: hidden; z-index: 10; box-sizing: border-box; }
.ux-Message ul.messages > li						{ text-align: center; list-style: none; background: #666; color: #FFF; max-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px; border-radius: 4px; animation-name: appearDisappear5s; animation-fill-mode: forwards; border: 1px solid #FFF; filter: drop-shadow(0 0 .5em rgba(0,0,0,0.25)); padding: 3px 10px; font: 14px "Arial"; }
.ux-Message ul.messages > li.info					{ background: #09E; color: #FFF; animation-name: appearDisappear2s; animation-duration: 2s; }
.ux-Message ul.messages > li.ok						{ background: #4C3; color: #FFF; animation-name: appearDisappear2s; animation-duration: 2s; }
.ux-Message ul.messages > li.error					{ background: #D41; color: #FFF; font-weight: bold; animation-name: appearDisappear5s; animation-duration: 5s; }