.notification-component {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #CA472E;
	border-radius: 5px;
	opacity: 0;
	height: 0;
	transition: all 0.2s ease-in-out;
}

.notification-component.active {
	opacity: 1;
	height: 80px;
}

.notification-component > .inner {
	display: flex;
	padding: 24px 35px;
	gap: 25px;
}

.notification-component > .inner .notification-text-wrap {
	display: flex;
	flex-direction: column;
	color: #fff;
}

.notification-component .notification-text-wrap .main-text {
	font-size: 16px;
	font-weight: 400;
}

.notification-component .notification-text-wrap .secondary-text {
	font-size: 14px;
	opacity: 0.8;
}

.notification-component > .inner .close-button {
	position: absolute;
	font-size: 35px;
	color: #acacac;
	top: 30px;
	right: 30px;
	transform: rotate(45deg);
	cursor: pointer;
}