/*Position*/
#atoastBox{
	position: fixed;
	top: 3px;
	right: 3px;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	overflow: hidden;
	padding: 5px;
	z-index: 9;
}
/*Design*/
.atoast{
	width: 250px;
	height: 50px;
	background: #fff;
	font-weight: 500;
	margin: 5px 0;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	border-radius: 5px;
	position: relative;
}

/*Design of icon with Text*/
.atoast i{
	margin: 0 20px;
	font-size: 25px;
	color: green;
}

.atoast.aerror i{
	color: red;
}

.atoast.awarning i{
	color: #FF6633;
}	

.atoast::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: green;
	animation: anim 1s linear forwards;
}

@keyframes anim {
	100%{
		width: 0;
		}
}
.atoast.aerror::after{
	background: red;
}

.atoast.awarning::after{
	background: #FF9933;
}