#toast-container {
	position: fixed;
	bottom: 28px;
	right: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 9999999;
	pointer-events: none;
}

.toast {
	pointer-events: all;
	display: flex !important;
	flex-direction: column;
	min-width: 240px;
	max-width: 320px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.08);
	padding: 14px 18px 0;
	box-shadow: 0 8px 32px rgba(0,0,0,.35);
	overflow: hidden;
	animation: slideIn .3s cubic-bezier(.22,1,.36,1) forwards;
}

.toast.hiding {
	animation: slideOut .35s cubic-bezier(.4,0,1,1) forwards;
}

.toast.success {
	background: linear-gradient(
		135deg,
		#2e1060 0%,
		#3a1875 60%,
		#2e1060 100%
	);
}

.toast.error {
	background: linear-gradient(
		135deg,
		#2e1500 0%,
		#3d1f00 50%,
		#2e1a00 100%
	);
}
.toast.warning {
	background: linear-gradient(
		135deg, 
		#e66f00 0%, 
		#f57c00 60%, 
		#e66f00 100%
	);
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(60px) scale(.95);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes slideOut {
	from {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateX(60px) scale(.95);
	}
}

.toast-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding-bottom: 12px;
}

.toast-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.toast.success .toast-icon {
	background: rgba(59,200,130,.15);
}

.toast.error .toast-icon {
	background: rgba(234,110,20,.18);
}
.toast.warning .toast-icon {
	color: #ffd166;
	background: rgba(255, 209, 102, 0.12);
	border: 1px solid rgba(255, 209, 102, 0.35);
}

.toast-icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke-width: 2.5;
}

.toast.success .toast-icon svg {
	stroke: #3bc882;
}

.toast.error .toast-icon svg {
	stroke: #f07020;
}

/* MD change (Data verrijken, exam A16): the warning icon had no stroke rule of its own,
   so it relied on `currentColor` resolving from .toast.warning .toast-icon while success
   and error both set theirs explicitly. Stated here too, so all three states are defined
   the same way and the icon cannot go colourless if that inherited colour ever moves. */
.toast.warning .toast-icon svg {
	stroke: #ffd166;
}

.toast-text {
	flex: 1;
}

.toast-title {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

.toast-sub {
	font-size: 11.5px;
	margin-top: 3px;
	line-height: 1.45;
}

.toast.success .toast-sub {
	color: #8b93b5;
}

.toast.error .toast-sub {
	color: #c49070;
}
.toast.warning .toast-sub {
	color: #ffd29a;
}

.toast-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	color: rgba(255,255,255,.45);
	transition: color .15s;
}

.toast-close:hover {
	color: #fff;
}

.toast-bar-track {
	width: calc(100% + 36px);
	height: 3px;
	background: rgba(255,255,255,.06);
	margin: 0 -18px;
	overflow: hidden;
}

.toast-bar-fill {
	height: 100%;
	width: 100%;
	transform-origin: left;
	animation: shrink var(--duration, 4000ms) linear forwards;
}

.toast.success .toast-bar-fill {
	background: linear-gradient(
		90deg,
		#3b5bdb,
		#3bc882
	);
}

.toast.error .toast-bar-fill {
	background: linear-gradient(
		90deg,
		#e8570a,
		#f5a623
	);
}
.toast.warning .toast-bar-fill {
	background: linear-gradient(
		90deg,
		#ffb300,
		#ffd54f
	);
}

@keyframes shrink {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}