.notification-wrapper {
	position: absolute;

	top: 100px;
	left: 16px;
	margin-left: auto;
	margin-right: 16px;

	background: transparent;

	z-index: 1800;
}

.notification-wrapper .card {
	display: flex;
	flex-direction: row;

	align-items: center;
	justify-content: space-between;

	gap: 24px;
	padding: 20px 15px;
}

.notification-wrapper .card.error {
	background-color: rgb(227, 30, 36, 0.5);
}

.notification-wrapper .card.success {
	background-color: rgb(30, 227, 60, 0.5);
}

.notification-wrapper .card .content {
	display: flex;
	align-items: center;
	gap: 8px;
}

.notification-wrapper .card .content .icon {
	width: 24px;
	height: 24px;
}

.notification-wrapper .card .content .text {
	font-size: 16px;
}

.notification-wrapper .card .close-button {
	width: 18px;
	height: 18px;
}

@media (min-width: 1440px) {
	.notification-wrapper {
		top: 120px;
		margin-right: 32px;
	}
}