
.fil0 {
	fill: url(#id0);
}

.notification {
&[data-v-3470bfd7] {
	background-color: var(--background-color);
	max-height: 180px;
	border-radius: 20px;
	margin-left: 5vw;
	width: 90vw;
	padding: 15px;
	box-sizing: border-box;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently */
	animation: fadeIn-3470bfd7;
	animation-duration: 0.5s;
	animation-direction: normal;
	box-shadow: var(--shadow-color) 0 0 10px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 20px;
	position: relative;
	cursor: pointer;
}
&[data-v-3470bfd7]:hover {
		filter: saturate(110%);
}
&.fade-out[data-v-3470bfd7] {
		animation: fadeOut-3470bfd7;
		animation-duration: 0.5s;
		animation-direction: normal;
}
&.success {
&[data-v-3470bfd7] {
		background-color: var(--success-color);
		color: white;
}
.xmark[data-v-3470bfd7] {
			fill: white;
}
.shigoto[data-v-3470bfd7] path {
			fill: white;
}
}
&.error {
&[data-v-3470bfd7] {
		background-color: var(--error-color);
		color: white;
}
.xmark[data-v-3470bfd7] {
			fill: white;
}
.shigoto[data-v-3470bfd7] path {
			fill: white;
}
}
&.warning {
&[data-v-3470bfd7] {
		background-color: var(--warning-color);
		color: white;
}
.xmark[data-v-3470bfd7] {
			fill: white;
}
.shigoto[data-v-3470bfd7] path {
			fill: white;
}
}
.xmark {
&[data-v-3470bfd7] {
		cursor: pointer;
		opacity: 0.5;
		transition:
			opacity 0.2s,
			scale 0.2s;
		width: 20px;
		fill: var(--text-color);
		float: right;
		position: absolute;
		right: 15px;
		top: 10px;
		z-index: 100000;
}
&[data-v-3470bfd7]:hover {
			opacity: 1;
			scale: 1.1;
}
}
h1[data-v-3470bfd7] {
		font-size: 1rem;
		margin: 0;
}
p[data-v-3470bfd7] {
		font-size: 0.8rem;
		margin: 0;
		opacity: 0.8;
}
}
@keyframes fadeIn-3470bfd7 {
0% {
		opacity: 0;
		transform: translateX(100%);
}
100% {
		opacity: 1;
		transform: translateX(0);
}
}
@keyframes fadeOut-3470bfd7 {
0% {
		opacity: 1;
		transform: translateX(0);
}
100% {
		opacity: 0;
		transform: translateX(100%);
}
}
