.toast{
	position: fixed;
	top: calc(var(--header-height) + 5px);
	right: 35px;
	background: #ffffff;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	padding: var(--card-padding);
	border-radius: var(--card-border-radius);
	overflow: hidden;
	transform: translateX( calc(100% + 35px ));
	transition: all cubic-bezier(0.71, -0.32, 0.34, 1.37) .8s;
	max-width: calc(100vw - 70px);
	z-index: 99;
}
.toast.succes{
	border-left: 6px solid var(--positive-color);
}
.toast.failure{
	border-left: 6px solid var(--negative-color);
}
.toast.active{
	transform: translateX(0%);
}
.toast .toast-content{
	display: flex;
	align-items: center;
}
.toast-content .check{
	color: var(--positive-color);
	font-size: 2rem;
	padding: var(--card-padding);
}
.toast-content .cross{
	color: var(--negative-color);
	font-size: 2rem;
	padding: var(--card-padding);
}
.toast-content .message{
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	margin: 0 20px;
}

.message .text{
	font-size: 1rem;
	font-weight: 400;
}
.message .text.text-1{
	font-weight: bold;
}

.toast .close{
	position: absolute;
	top: 10px;
	right: 15px;
	cursor: pointer;
	opacity: 0.7;
}
.toast .close:hover{
	opacity: 1;
}

/* progress bar */
.toast .progress{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: #fff;
}
.progress.active:before{
	animation: progress 5s linear forwards;
}
.toast .progress:before{
	content: '';
	position: absolute;
	bottom:0;
	right: 0;
	height: 100%;
	width: 100%;
	background: #fff;
}
.toast.succes .progress.active:before{
	background: var(--positive-color);
}
.toast.failure .progress.active:before{
	background: var(--negative-color);
}

@keyframes progress{
	100%{
		right: 100%;
	}
}