.flash-notification {
	bottom: 0;
	margin: 10px;
	opacity: 1;
	position: fixed;
	right: 0;
	transition: opacity 0.5s ease-in-out;
	z-index: 101;

	&.notification-closed {
		opacity: 0;
	}

	.success,
	.error {
		align-items: center;
		border-radius: 3px;
		color: white;
		display: flex;
		height: auto;
		justify-content: center;
		width: 300px;

		.icon {
			left: 18px;
			margin-right: 5px;
			position: relative;
		}
	}

	.success {
		background-color: $color-slate;

		.icon {
			&::before {
				content: '\f058';
				font-family: 'FontAwesome';
				font-size: 1.2rem;
			}
		}
	}

	.error {
		background-color: $color-red;

		.icon {
			&::before {
				content: '\f06a';
				font-family: 'FontAwesome';
				font-size: 1.2rem;
			}
		}
	}

	.close-notification-container {
		align-self: flex-start;
		position: relative;

		.closeNotification {
			background: none;
			border: none;
			height: 20px;
			margin: 10px 5px 0 -28px;
			width: 20px;

			.close-icon {
				fill: white;
				height: 14px;
				position: relative;
				right: 4px;
				top: -4px;
				width: 14px;
			}
		}
	}
}

.text-content {
	font-size: 13px;
	line-height: 1.3;
	margin: 10px auto;
	max-width: 220px;

	.title-text,
	.body-text {
		margin: auto;
	}

	.title-text {
		font-weight: $rubik-medium;
		padding: 10px 0;
	}

	.body-text {
		font-weight: $rubik-regular;
		padding: 0 0 10px;
	}
}