.notificationsContainer {
		position: fixed;
		height: calc(100% - 100px);
		width: 450px;
		top: 0px;
		right: 0px;
		padding-bottom: 10px;
		padding-top: 10px;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		pointer-events: none;
	}

	.notification {
		min-height: 60px;
		width: 400px;
		margin-top: 5px;
		margin-bottom: 5px;
		display: flex;
		flex-direction: row;
		/* cursor: pointer; */
		/* animation: 1s linear fadein; */
		animation-name: fadein;
		animation-duration: 1s;
		animation-timing-function: ease-out;
		position: relative;
		/*border-width: 2px;
		border-style: solid;
		border-color: #000;*/
		border-radius: var(--border-radius);
		pointer-events: all;
	}

	.notificationFadeOut {
		/* animation: 0.5s linear fadeout; */
		/* animation: 0.5s linear fadeheight; */
		animation-name: fadeout, fadeheight;
		animation-duration: 0.3s, 0.3s;
		animation-timing-function: ease-out, cubic-bezier(0.6, -0.28, 0.735, 0.045);
		animation-delay: 0s, 0.3s;
		pointer-events: none;
	}

	.errorNotification {
		background: var(--status-rejected-color);
		/*border-color: color-mix(in srgb, var(--status-rejected-color) 100%, #000 50%);*/
		color: #FFFFFF;
	}

	.warningNotification {
		background: var(--status-pending-color);
		/*border-color: color-mix(in srgb, var(--status-pending-color) 100%, #000 50%);*/
		color: #FFFFFF;
	}

	.successNotification {
		background: var(--status-completed-color);
		/*border-color: color-mix(in srgb, var(--status-completed-color) 100%, #000 50%);*/
		color: #FFFFFF;
	}

	.infoNotification {
		background: var(--gui-background-color);
		/*border-color: color-mix(in srgb, var(--gui-background-color) 100%, #000 50%);*/
		color: var(--gui-text-color);
	}

	.closeContainer{
		/* background: yellow; */
		width: 40px;
		text-align: center;
		/* align-content: flex-top; */
		margin-top: 10px;
		cursor: pointer;
	}

	.closeContainer svg {
		/* color: var(--secondary-text-color); */
		height: 14px;
		width: 14px;
		pointer-events: none;
	}
	
	.closeContainer:hover svg {
		height: 16px;
		width: 16px;
	}

	.textContainer {
		/* background: green; */
		width: calc(100% - 20px);
		padding-left: 20px;
		/*color: var(--secondary-text-color);*/
	}

	.titleContainer {
		/* background: turquoise; */
		width: 100%;
		align-content: end;
		font-weight: 600;
	}

	.messageContainer {
		/* background: purple; */
		width: 100%;
		align-content: baseline;
		text-overflow: ellipsis;
		overflow: auto;
		white-space: normal;
	}

	@keyframes fadein {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeout {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes fadeheight {
		from {
			height: 60px;
			opacity: 0;
		}
		to {
			height: 0px;
			opacity: 0;
		}
	}

	.notificationsContainer br {
		display: none;
	}