@import url('/assets/fonts/font-awesome/css/all.min.css');

.side-toasters{
	overflow: auto;
	display: block;
	position: fixed;
	right: 0;
}

.side-toaster{
	position: fixed;
	top: 20%;
	z-index: 9000;
	max-width: 40%;
	max-height: 50%;
	border-bottom: 1px solid #888;
	border-radius: 5px 0px 0px 5px;
	border-left: 2rem solid #00000044;
	background: #EEF;
	animation: pisca 1.5s infinite, carregar 1.5s normal;
    animation-delay: 7s;
	transition: right .1s, left .1s;
	color: #FFF !important;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.side-toaster .box{
	padding: 1rem 1rem 1rem 2rem;
}

.side-toaster .content{
	text-align: justify;
}
.side-toaster:hover{
	right: 0px !important;	
	transition: right .2s linear;
}

.side-toaster .title{
	padding-top: 1rem;
}
.side-toaster .title *{
	color: #FFF !important;
	font-weight: bold !important;
}
.side-toaster .icon{
	font-family: "Font Awesome 5 Free";
	-webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
	float: left;
	padding: 1rem 1rem 0 0;
}
.side-toaster .icon::before{
    font-family: "Font Awesome 5 Free";
	font-size: 3rem;
	display: block;
	float: left;
	font-weight: 900;
	color: #22222266;
}

.side-toaster.info .icon::before{
	content: "\f129";
}
.side-toaster.warning .icon::before{
	content: "\f071";
}
.side-toaster.success .icon::before{
	content: "\f164";
	font-weight: 400;
}
.side-toaster.danger .icon::before{
	content: "\f12a";
}
.side-toaster.default .icon::before{
	content: "\f4ad";
}
.side-toaster.secondary .icon::before{
	content: "\f4ad";
}
.side-toaster.primary .icon::before{
	content: "\f0e7";
}

.side-toaster.default .title *{
	color: #222 !important;	
}
.side-toaster.default{
	color: #222 !important;
}
.side-toaster.primary{
	background: #007bff !important;
}
.side-toaster.secondary{
	background: #6c757d !important;
}
.side-toaster.success{
	background: #28a745 !important;
}
.side-toaster.danger{
	background: #dc3545 !important;
	animation: pisca 1s infinite, /*mexe 2.5s 3s infinite, */treme 20s  infinite;
}
.side-toaster.danger:hover{
	animation: pisca 10.5s infinite;
}
.side-toaster.danger .content, .side-toaster.danger .content a{
	color: #FFF;
}
.side-toaster.warning{
	background: #ffc107 !important;
	color: #000 !important;
}
.side-toaster.warning .title *{
	color: #000 !important;
}
.side-toaster.info{
	background: #17a2b8 !important;
}

@keyframes carregar {
    0% { transform: translateX(120%); }
    50% { transform: translateX(0%); }
    80% { transform: translateX(-15%); }
    95% { transform: translateX(1%); }
    100% { transform: translateX(0%); }
}

@keyframes treme {
    0% { transform: translateY(0%) rotate(0deg); }
    95.4% { transform: translateY(0%) rotate(0deg); }
    95.5% { transform: translateY(-6%) rotate(-2deg); }
    96% { transform: translateY(0%) rotate(-1deg); }
    96.5% { transform: translateY(6%) rotate(3deg); }
    97% { transform: translateY(0%) rotate(-4deg); }
    97.5% { transform: translateY(-6%) rotate(0deg); }
    98% { transform: translateY(0%) rotate(-2deg); }
    98.5% { transform: translateY(6%) rotate(1deg); }
    99% { transform: translateY(0%) rotate(-1deg); }
    100% { transform: translateY(0%) rotate(0deg); }
}
@keyframes mexe {
    0% { transform: translateX(0%); }
    50% { transform: translateX(0%); }
    80% { transform: translateX(-1.5%) rotate(-3deg); }
    95% { transform: translateX(1%) rotate(1deg);; }
    100% { transform: translateX(0%); }
}
@keyframes pisca {
    0% { border-left: 2rem solid #00000044; }
    50% { border-left: 2rem solid #00000066;}
    100% { border-left: 2rem solid #00000044;}
}

@media (max-width: 400px){
	.side-toaster{
		max-width: 70% !important;
	}
}