#prompt {
	font-family:inherit;
	text-align:left;
	color:#fff;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:2001;
	transform:translate(0px,-50px);
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

#prompt:before {
	font-weight:900;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	margin-right:10px;
	margin-bottom:2px;
	vertical-align:middle;
}

#prompt:after {
	font-weight:900;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	margin:4px 5px 0px 10px;
	content:"\f00d";
	cursor:pointer;
	float:right;
}

#prompt.success {
	background-color:#080;
	transform:translate(0px,0px);
}

#prompt.success:before {
   content: "\f00c";
}

#prompt.error {
	background-color:#BD362F;
	transform:translate(0px,0px);
}

#prompt.error:before {
   content: "\f06a";
}

#prompt.warning {
	background-color:#F89406;
	transform:translate(0px,0px);
}

#prompt.warning:before {
   content: "\f071";
}

#prompt.info {
	background-color:#2F96B4;
	transform:translate(0px,0px);
}

#prompt.info:before {
   content: "\f05a";
}

#prompt.loading {
	background-color:#2F96B4;
	transform:translate(0px,0px);
}

#prompt.loading:before {
	-webkit-animation: rotate 2s linear infinite;
	-moz-animation: rotate 2s linear infinite;
	-ms-animation: rotate 2s linear infinite;
	-o-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	content: "\f013";
}

@media only screen and (min-width:701px)
{
	#prompt {
		padding:20px 15px;
		font-size:16px;
	}
	
	#prompt:before {
		font-size:22px;
	}
}

@media only screen and (max-width:700px) 
{
	#prompt {
		padding:18px 10px;
		font-size:14px;
	}
	
	#prompt:before {
		font-size:17px;
	}
}