#toast {
	visibility: hidden;
	max-width: 200px;
	max-height: 200px;
	margin: auto;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	background-color: #000;
	position: fixed;
	z-index: 9999;
	left: 0;
	right: 0;
	top: 30px;
	font-size: 16px;
	padding: 8px;
	overflow: auto;
	word-wrap: break-word
}

#toast:hover {
	cursor: pointer
}

#toast.error {
	visibility: visible;
	background-color: #d25380;
	animation: fadein .5s, stay 3s 1s, fadeout .5s 4.5s
}

#toast.success {
	visibility: visible;
	background-color: #1b9c85;
	animation: fadein .5s, stay 3s 1s, fadeout .5s 4.5s
}

#toast.log {
	visibility: visible;
	background-color: #8294c4;
	animation: fadein .5s, stay 3s 1s, fadeout .5s 4.5s
}

#toast.warn {
	visibility: visible;
	background-color: #ffd3a3;
	color: #000;
	animation: fadein .5s, stay 3s 1s, fadeout .5s 4.5s
}

@keyframes fadein {
	0% {
		top: 0;
		opacity: 0
	}

	to {
		top: 30px;
		opacity: 1
	}
}

@keyframes stay {
	0% {
		min-width: 200px
	}

	to {
		min-width: 200px
	}
}

@keyframes fadeout {
	0% {
		top: 30px;
		opacity: 1
	}

	to {
		top: 60px;
		opacity: 0
	}
}