#toast-success, #toast-error{
	visibility: hidden;
	height: auto;
	position: fixed;
	z-index: 1;
	left: 0;
	right:0;
	bottom: calculateRem(30px);
}
.toast-error-msg, .toast-success-msg{
	padding: 0.5rem;
	margin: auto;
	background-color: transparent;
	color: var(--sm-base-white-color);
	border-radius: 0.4rem;
	font-size: calculateRem(14px);
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	& .toast-icon {
		width: calculateRem(24px);
		height: calculateRem(24px);
		& svg {
			& path {
				fill: var(--sm-base-white-color);
			}
		}
	}
	& .toast-description {
		text-align: left;
	}

}
.toast-error-msg {
	background-color: $error-color;
	border: 1px solid $error-color;
	max-width: calculateRem(150px);
}

.toast-success-msg {
	background-color: $success-color;
	border: 1px solid $success-color;
	max-width: calculateRem(150px);
}

#toast-success.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

#toast-error.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
	from {min-width: 50px}
	to {min-width: 350px}
}

@keyframes expand {
	from {min-width: 50px}
	to {min-width: 350px}
}
@-webkit-keyframes stay {
	from {min-width: 350px}
	to {min-width: 350px}
}

@keyframes stay {
	from {min-width: 350px}
	to {min-width: 350px}
}
@-webkit-keyframes shrink {
	from {min-width: 350px;}
	to {min-width: 50px;}
}

@keyframes shrink {
	from {min-width: 350px;}
	to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 60px; opacity: 0;}
}