/*NOTIFICATIONS*/
.notification {
	position: fixed;
	padding: 1.5rem 1rem;
	right: 1rem;
	bottom: 0;
	background-color: #FFF;
	box-shadow: var(--shadow-default);
	border-radius: 10px;
	z-index: 9999999999999999;
	width: 300px;
	font-style: italic;
	font-size: 1.25rem;

	transform: translateX(120%) translateY(-1rem);
	pointer-events: none;
	opacity: 0;

}

.notification *[data-close] {
	position: absolute;
	cursor: pointer;
	right: .5rem;
	top: 0;
}

.notification.active {
	transform: translateX(0) translateY(-1rem);
	pointer-events: all;
	opacity: 1;
}

.notification.remove {
	opacity: 0;
}

.notification.error {
	background-color: var(--color-error);
	color: #FFF;
}

.notification.error *[data-close]  {
	color: #FFF;
}

.notification.success {
	background-color: var(--color-success);
	color: #FFF;
}

.notification.success *[data-close] {
	color: #FFF;
}

.notification.neutral {
	background-color: var(--color-neutral);
	color: #FFF;
}
/*END NOTIFICATIONS*/