.snackbar-animated{position: fixed;left:0; width: 100%; bottom:0px; z-index:99;overflow: hidden;}
.snackbar{text-align: center; padding:20px; font-size:0.9em; display: inline-block; width: 100%;}
.snackbar a{text-decoration: underline;}
.snackbar-animated .snackbar {position:relative;left:0px; bottom:0; -webkit-transform:  translate(0, 100%);-ms-transform:  translate(0, 100%);-o-transform:  translate(0, 100%);-moz-transform:  translate(0, 100%); transform:  translate(0, 100%); transition: bottom 0.5s ease; animation-name: snackbar-show; animation-duration: 1s; animation-direction: forwards; animation-timing-function: ease-in-out; animation-delay:1s; animation-fill-mode: forwards;}

/*icon*/
.snackbar-error, .snackbar-error a{background:#D34B4E; color:#fff;}
.snackbar-warning, .snackbar-warning a{background:#E9B344; color:#fff;}
.snackbar-info, .snackbar-info a{background:#0583B5; color:#fff;}
.snackbar-error span:before{content:"\f071";}
.snackbar-warning span:before{content: "\f321";}
.snackbar-info span:before{content:"\f06a";}
.snackbar-close:after{content:"\f00d"; top: 6px; right: -3px; position: fixed;}
.snackbar-close:after, .snackbar-error span:before, .snackbar-warning span:before, .snackbar-info span:before{font-family:"Font Awesome 5 Pro"; font-weight:900; margin-right:10px; font-size:1.2em;}

/*checkbox*/
.snackbar-checkbox{top: 0px;right: -3px; position: absolute;width: 35px; height: 25px; z-index:1; opacity: 0; cursor: pointer; margin:0;}
.snackbar-checkbox:checked~.snackbar{animation-name: snackbar-hide;animation-delay:0s;}
	
@keyframes snackbar-show {
	  0%{ bottom:0%; }
	  100% {bottom:0px; -webkit-transform:  translate(0, 0);-ms-transform:  translate(0, 0);-o-transform:  translate(0, 0);-moz-transform:  translate(0, 0); transform:  translate(0, 0);}
} 
@keyframes snackbar-hide {
	  0% {bottom:0px; -webkit-transform:  translate(0, 0);-ms-transform:  translate(0, 0);-o-transform:  translate(0, 0);-moz-transform:  translate(0, 0); transform:  translate(0, 0);}
	  100% {bottom:0px; -webkit-transform:  translate(0, 100%);-ms-transform:  translate(0, 100%);-o-transform:  translate(0, 100%);-moz-transform:  translate(0, 100%); transform:  translate(0, 100%);}
}