#toasts {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 28em;
	box-sizing: border-box;
	padding: 1em;
	z-index: 1000;
}
.toast{
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1em;
	margin-bottom: 0.5em;
	border-left: 4px solid transparent;
	background-color: #4b5955;
}
.toast:last-child{
	margin-bottom: none;
}
.toast.success{
	border-left-color: #34c76d;
}
.toast.info{
	border-left-color: #5a99cd;
}
.toast.warning{
	border-left-color: #ffff5b;
}
.toast.error {
	border-left-color: #ff5555;
}
.toast * {
	font-size: 0.9em;
	color: white;
}
.toast .close {
	position: absolute;
	display: inline-block;
	top: 0;
	right: 0;width: 2.3em;
	height: 100%;
	font-weight: bold;
	cursor: pointer;
	font-size: 2em;
	text-align: center;
	box-sizing: border-box;
	background-color: #546560;
}
.toast .close:hover {
	background-color: #ff5555;
}
.toast .close span {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.toast .close:hover span {
	color: #fff;
}
.toast > div {
	width: calc(100% - 5em);
}
.toast .timeline-bar {
	position: absolute;
	left: -4px;
	bottom: 0;
	display: block;
	width: calc( 100% + 4px);
	height: 3px;
	background-color: white;
	box-sizing: border-box;
}
@media screen and (max-width: 500px) {
	#toasts {width: 100%;}
	.toast > div {width: calc(100% - 1.5em);}
	.toast .close {position: absolute; padding: 0.25em 0.45em; width: 2em; height: 1.6em; font-size: 1.2em;}
	.toast .close span {position: relative; top: auto; transform: unset;}
}