.notification-container {
	position: fixed;
	z-index: 9999;
	top: 20px;
	right: 20px;
	max-width: 350px;
	width: 100%;
}


.notification {
	position: relative;
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	padding: 16px;
}

.notification-icon {
	margin-right: 16px;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.notification-content {
	flex-grow: 1;
}

.notification-title {
	font-weight: bold;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.notification-message {
	font-size: 0.75rem;
}

.notification-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100%;
	transform-origin: left;
}

.notification-close {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 1.2rem;
	opacity: 0.7;
	transition: opacity 0.2s;
	padding: 4px;
	margin-left: 8px;
}

.notification-close:hover {
	opacity: 1;
}

/* notification Styles */
/* Style 1: Sass Master */
.notification-style-1 {
	background-color: #ff5252;
	color: white;
}

.notification-style-1 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-1 .notification-progress {
	background-color: #ff1744;
}

/* Style 2: Blue Steel */
.notification-style-2 {
	background-color: #2962ff;
	color: white;
}

.notification-style-2 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-2 .notification-progress {
	background-color: #0039cb;
}

/* Style 3: Toxic Green */
.notification-style-3 {
	background-color: #00c853;
	color: white;
}

.notification-style-3 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-3 .notification-progress {
	background-color: #009624;
}

/* Style 4: Dark Mode */
.notification-style-4 {
	background-color: #212121;
	color: #e0e0e0;
}

.notification-style-4 .notification-icon {
	background-color: rgba(255, 255, 255, 0.1);
}

.notification-style-4 .notification-progress {
	background-color: #484848;
}

/* Style 5: Royal Purple */
.notification-style-5 {
	background-color: #6200ea;
	color: white;
}

.notification-style-5 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-5 .notification-progress {
	background-color: #3700b3;
}

/* Style 6: Sunset Orange */
.notification-style-6 {
	background-color: #ff6d00;
	color: white;
}

.notification-style-6 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-6 .notification-progress {
	background-color: #c43c00;
}

/* Style 7: Cyber Pink */
.notification-style-7 {
	background-color: #d500f9;
	color: white;
}

.notification-style-7 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-7 .notification-progress {
	background-color: #9e00c5;
}

/* Style 8: Business Gray */
.notification-style-8 {
	background-color: #757575;
	color: white;
}

.notification-style-8 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-8 .notification-progress {
	background-color: #494949;
}

/* Style 9: Teal Deal */
.notification-style-9 {
	background-color: #009688;
	color: white;
}

.notification-style-9 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-9 .notification-progress {
	background-color: #00675b;
}

/* Style 10: Gradient Glory */
.notification-style-10 {
	background: linear-gradient(45deg, #ff6b6b, #6b47ff);
	color: white;
}

.notification-style-10 .notification-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.notification-style-10 .notification-progress {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Animations */
/* Animation 1: Slide Right */
@keyframes slideRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideRightOut {
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

.notification-animation-1-in {
	animation: slideRight 0.4s ease-out forwards;
}

.notification-animation-1-out {
	animation: slideRightOut 0.4s ease-in forwards;
}

/* Animation 2: Fade */
@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	to {
		opacity: 0;
	}
}

.notification-animation-2-in {
	animation: fade 0.4s ease-out forwards;
}

.notification-animation-2-out {
	animation: fadeOut 0.4s ease-in forwards;
}

/* Animation 3: Bounce */
@keyframes bounce {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.8;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes bounceOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.8;
	}
	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

.notification-animation-3-in {
	animation: bounce 0.5s ease-out forwards;
}

.notification-animation-3-out {
	animation: bounceOut 0.5s ease-in forwards;
}

/* Animation 4: Slide Top */
@keyframes slideTop {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideTopOut {
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}

.notification-animation-4-in {
	animation: slideTop 0.4s ease-out forwards;
}

.notification-animation-4-out {
	animation: slideTopOut 0.4s ease-in forwards;
}

/* Animation 5: Flip */
@keyframes flip {
	from {
		transform: perspective(400px) rotateX(-90deg);
		opacity: 0;
	}
	to {
		transform: perspective(400px) rotateX(0);
		opacity: 1;
	}
}

@keyframes flipOut {
	to {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

.notification-animation-5-in {
	animation: flip 0.5s ease-out forwards;
	transform-origin: top center;
}

.notification-animation-5-out {
	animation: flipOut 0.5s ease-in forwards;
	transform-origin: top center;
}

/* Animation 6: Zoom */
@keyframes zoom {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes zoomOut {
	to {
		transform: scale(0);
		opacity: 0;
	}
}

.notification-animation-6-in {
	animation: zoom 0.4s ease-out forwards;
}

.notification-animation-6-out {
	animation: zoomOut 0.4s ease-in forwards;
}

/* Animation 7: Slide Left */
@keyframes slideLeft {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideLeftOut {
	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}

.notification-animation-7-in {
	animation: slideLeft 0.4s ease-out forwards;
}

.notification-animation-7-out {
	animation: slideLeftOut 0.4s ease-in forwards;
}

/* Animation 8: Rotate */
@keyframes rotate {
	from {
		transform: rotate(-90deg);
		opacity: 0;
	}
	to {
		transform: rotate(0);
		opacity: 1;
	}
}

@keyframes rotateOut {
	to {
		transform: rotate(90deg);
		opacity: 0;
	}
}

.notification-animation-8-in {
	animation: rotate 0.5s ease-out forwards;
	transform-origin: top left;
}

.notification-animation-8-out {
	animation: rotateOut 0.5s ease-in forwards;
	transform-origin: top left;
}

/* Animation 9: Jello */
@keyframes jello {
	0% {
		transform: scale3d(1, 1, 1);
		opacity: 0;
	}
	30% {
		transform: scale3d(1.25, 0.75, 1);
		opacity: 0.5;
	}
	40% {
		transform: scale3d(0.75, 1.25, 1);
		opacity: 0.7;
	}
	50% {
		transform: scale3d(1.15, 0.85, 1);
		opacity: 0.8;
	}
	65% {
		transform: scale3d(0.95, 1.05, 1);
		opacity: 0.9;
	}
	75% {
		transform: scale3d(1.05, 0.95, 1);
		opacity: 1;
	}
	100% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

@keyframes jelloOut {
	0% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
	30% {
		transform: scale3d(1.25, 0.75, 1);
		opacity: 0.8;
	}
	40% {
		transform: scale3d(0.75, 1.25, 1);
		opacity: 0.6;
	}
	50% {
		transform: scale3d(1.15, 0.85, 1);
		opacity: 0.4;
	}
	65% {
		transform: scale3d(0.95, 1.05, 1);
		opacity: 0.2;
	}
	75% {
		transform: scale3d(1.05, 0.95, 1);
		opacity: 0.1;
	}
	100% {
		transform: scale3d(1, 1, 1);
		opacity: 0;
	}
}

.notification-animation-9-in {
	animation: jello 0.8s ease-out forwards;
}

.notification-animation-9-out {
	animation: jelloOut 0.8s ease-in forwards;
}

/* Animation 10: Swing */
@keyframes swing {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: rotate(15deg);
		opacity: 0.4;
	}
	40% {
		transform: rotate(-10deg);
		opacity: 0.6;
	}
	60% {
		transform: rotate(5deg);
		opacity: 0.8;
	}
	80% {
		transform: rotate(-5deg);
		opacity: 0.9;
	}
	100% {
		transform: rotate(0deg);
		opacity: 1;
	}
}

@keyframes swingOut {
	0% {
		transform: rotate(0deg);
		opacity: 1;
	}
	20% {
		transform: rotate(15deg);
		opacity: 0.8;
	}
	40% {
		transform: rotate(-10deg);
		opacity: 0.6;
	}
	60% {
		transform: rotate(5deg);
		opacity: 0.4;
	}
	80% {
		transform: rotate(-5deg);
		opacity: 0.2;
	}
	100% {
		transform: rotate(0deg);
		opacity: 0;
	}
}

.notification-animation-10-in {
	animation: swing 0.8s ease-out forwards;
	transform-origin: top center;
}

.notification-animation-10-out {
	animation: swingOut 0.8s ease-in forwards;
	transform-origin: top center;
}

/* Animation for progress bar */
@keyframes progress {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

.notification-progress-animate {
	animation: progress 10s linear forwards;
}