#notify-container
{
	position: fixed;
	top: 25px;
	right: 25px;

	display: flex;
	flex-direction: column;
	gap: 15px;

	z-index: 999999;
}

.notify
{
	position: relative;

	min-width: 320px;
	max-width: 420px;

	padding: 18px 20px;

	border-radius: 14px;

	color: #fff;

	font-size: 15px;
	font-weight: 500;

	backdrop-filter: blur(12px);

	box-shadow:
		0 10px 40px rgba(0,0,0,.35);

	overflow: hidden;

	animation: notifyShow .35s ease;
}

.notify-title
{
	font-size: 18px;
	font-weight: 700;

	margin-bottom: 6px;
}

.notify-message
{
	opacity: .92;
	line-height: 1.5;
}

.notify-success
{
	background: rgba(55, 170, 90, .92);
}

.notify-error
{
	background: rgba(210, 55, 55, .92);
}

.notify-warning
{
	background: rgba(230, 150, 30, .92);
}

.notify-info
{
	background: rgba(50, 140, 255, .92);
}

.notify-progress
{
	position: absolute;

	left: 0;
	bottom: 0;

	height: 4px;
	width: 100%;

	background: rgba(255,255,255,.35);

	transform-origin: left;
}

.notify.hide
{
	animation: notifyHide .3s ease forwards;
}

@keyframes notifyShow
{
	from
	{
		opacity: 0;
		transform: translateX(60px);
	}

	to
	{
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes notifyHide
{
	to
	{
		opacity: 0;
		transform: translateX(60px);
	}
}