/*Toast*/
.atoasts {position: fixed; right: 10px; top: 20px; z-index: 990; display: grid; gap: 20px;}
.atoast {background-color: #fff; color: #000; border-radius: 6px; overflow: hidden;
	position: relative; width: 400px; display: flex; align-items: center; gap: 20px; 
	padding: 16px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); --accent: #00a2ff; 
	animation: showToast 0.5s ease forwards; max-width: calc(100vw - 40px);}
.atoast a {color:red;}
.atoast a:hover {color:#00a8ff;text-decoration:underline;}
.atoast__icon {font-size: 28px; color: var(--accent);}
.atoast__descr {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.atoast__title {font-weight: 700;}
.atoast__text {font-size: 14px;}
.atoast__close {font-size: 18px; margin: 0 -10px; display: grid; place-items: center; 
	cursor: pointer; opacity: 0.6; width: 40px; height: 40px;}
.atoast::after {content: ''; width: 100%; height: 3px; background-color: var(--accent); 
	position: absolute; left: 0; bottom: 0; animation: progressToast var(--toast-timer) linear forwards}
.atoast--success {--accent: #41b92f;}
.atoast--warning {--accent: #f4bd00;}
.atoast--error {--accent: #dd3954;}
.atoast--is-hiding {animation: hideToast 0.5s ease forwards;}
@keyframes progressToast {
	100% {width: 0}
}
@keyframes showToast {
	0% {transform: translateX(calc(100% + 20px));}
	40% {transform: translateX(-5%);}
	80% {transform: translateX(0%);}
	100% {transform: translateX(-10px);}
}
@keyframes hideToast {
	0% {transform: translateX(-10px);}
	40% {transform: translateX(0%);}
	80% {transform: translateX(-5%);}
	100% {transform: translateX(calc(100% + 20px));}
}