
#flashMessageContainer {
	position: fixed;
	z-index: 999999;
	top: 50px;
	width: 60%;
	left: 20%;

	@media screen and (max-width: 768px) {
		left: 5%;
		width: 90%;
	}

	.flashMessage {
		position: absolute;
		width: 100%;
		display: none;
		background-color: map_get($ui-colors, light-accent);
		transition: all 0.5s ease;

		&.error {
			color: map_get($ui-colors, light-shade);
			background-color: map_get($ui-color-states, danger);

			a, .btn {
				color: map_get($ui-colors, light-shade);
				text-decoration: underline;

				&:hover {
					text-decoration: inherit;
				}
			}
		}

		&.warn {
			background-color: map_get($ui-color-states, warning);

			a, .btn {
				color: map_get($ui-colors, dark-shade);
				text-decoration: underline;

				&:hover {
					text-decoration: inherit;
				}
			}
		}

		&.success {
			background-color: map_get($ui-color-states, success);
			a, .btn {
				color: map_get($ui-colors, dark-shade);
				text-decoration: underline;

				&:hover {
					text-decoration: inherit;
				}
			}
		}


		&:nth-child(1) {
			top: 0;
			left: 0;
			z-index: 1000;
		}

		&:nth-child(2) {
			top: -5px;
			left: 5px;
			z-index: 900;
		}

		&:nth-child(3) {
			top: -10px;
			left: 10px;
			z-index: 800;
		}

		&:nth-child(4) {
			top: -15px;
			left: 15px;
			z-index: 700;
		}
	}
}