/* [XS] : Phones & portrait tablets */

.snack-bar {
	display: block;
	border-radius: 4px;
	padding: 16px;
	min-width: 300px;
	max-width: 90%;
	max-height: 50%;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	overflow-y: auto;
	
	position: fixed;
	z-index: 9;
	left: 0;
	right: 0;

	font-size: 20px;
	text-align: center;
}

.snack-bar:hover {
	cursor: pointer;
}

/* ## IF MODIFIED, CHANGE THE ANIM_DURATION CONSTANT IN "SnackBar.js" ## */
.snack-bar-shown {
	-webkit-animation: fadein 0.5s forwards;
	-moz-animation: fadein 0.5s forwards;
	animation: fadein 0.5s forwards;
}
.snack-bar-hidden {
	-webkit-animation: fadeout 0.5s forwards;
	-moz-animation: fadeout 0.5s forwards;
	animation: fadeout 0.5s forwards;
}
/* ## ... ## */

.snack-bar.info {
	color: black;
	background-color: #42A5D7;
}

.snack-bar.success {
	color: white;
	background-color: #127B06;
}

.snack-bar.error {
	color: white;
	background-color: #FF1A1A;
}

@-webkit-keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}


/* Tablets [768px, 1024[ */
@media only screen and (min-width: 768px) {
	.output {
		max-width: 70%;
	}
}


/* Laptops [1024px, +[ */
@media only screen and (min-width: 1024px) {
	.output {
		max-width: 55%;
	}
}