/* /asset/css/toast-popup.css 

inspiration: https://www.w3schools.com/howto/howto_js_snackbar.asp */

#toast-popup {
	
	visibility: hidden; /* Hidden by default. Visible on click */
	width: 100%;
 	background-color: transparent; /* transparent background color */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	bottom: 0px; /* 30px from the bottom */
	text-align: center;
	color: grey;
	font-size: 2em;

}

#toast-popup.show {
	
	visibility: visible; /* Show the snackbar */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 10s;
	animation: fadein 0.5s, fadeout 0.5s 10s;

}

@-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;}

}