@-webkit-keyframes notyf-fadeinup {
0% {
opacity:0;
transform:translateY(0)
}
to {
opacity:1;
transform:translateY(0)
}
}
@keyframes notyf-fadeinup {
0% {
opacity:0;
transform:translateY(0)
}
to {
opacity:1;
transform:translateY(0)
}
}
@-webkit-keyframes notyf-fadeinleft {
0% {
opacity:0;
transform:translateX(0)
}
to {
opacity:1;
transform:translateX(0)
}
}
@keyframes notyf-fadeinleft {
0% {
opacity:0;
transform:translateX(0)
}
to {
opacity:1;
transform:translateX(0)
}
}
@-webkit-keyframes notyf-fadeoutright {
0% {
opacity:1;
transform:translateX(0)
}
to {
opacity:0;
transform:translateX(0)
}
}
@keyframes notyf-fadeoutright {
0% {
opacity:1;
transform:translateX(0)
}
to {
opacity:0;
transform:translateX(0)
}
}
@-webkit-keyframes notyf-fadeoutdown {
0% {
opacity:1;
transform:translateY(0)
}
to {
opacity:0;
transform:translateY(0)
}
}
@keyframes notyf-fadeoutdown {
0% {
opacity:1;
transform:translateY(0)
}
to {
opacity:0;
transform:translateY(0)
}
}
@-webkit-keyframes ripple {
0% {
transform:scale(0) translateY(-45%) translateX(0%)
}
to {
transform:scale(1) translateY(-45%) translateX(0%)
}
}
@keyframes ripple {
0% {
transform:scale(0) translateY(-45%) translateX(0%)
}
to {
transform:scale(1) translateY(-45%) translateX(0%)
}
}
.notyf {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
color:#fff;
z-index:9999;
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:flex-end;
pointer-events:none;
box-sizing:border-box;
padding:20px;

}
.notyf__icon--error,.notyf__icon--success {
height:21px;
width:21px;
background:#fff;
border-radius:50%;
display:block;
margin:0 auto;
position:relative
}
.notyf__icon--error:after,.notyf__icon--error:before {
content: " ";
background:currentColor;
display:block;
position:absolute;
width:3px;
border-radius:3px;
left:9px;
height:12px;
top:5px
}
.notyf__icon--error:after {
transform:rotate(-45deg)
}
.notyf__icon--error:before {
transform:rotate(45deg)
}
.notyf__icon--success:after,.notyf__icon--success:before {
content: " ";
background:currentColor;
display:block;
position:absolute;
width:3px;
border-radius:3px
}
.notyf__icon--success:after {
height:6px;
transform:rotate(-45deg);
top:9px;
left:6px
}
.notyf__icon--success:before {
height:11px;
transform:rotate(45deg);
top:5px;
left:10px
}
.notyf__toast {
display:block;
overflow:hidden;
pointer-events:auto;
-webkit-animation:notyf-fadeinup .3s ease-in forwards;
animation:notyf-fadeinup .3s ease-in forwards;
box-shadow:0 3px 7px 0 rgba(0,0,0,.25);
position:relative;
padding:0 15px;
border-radius:2px;
max-width:600px; /*width of notif*/
transform:translateY(25%);
box-sizing:border-box;
flex-shrink:0;
background:#0872BA;
}
.notyf__toast--disappear {
transform:translateY(0);
-webkit-animation:notyf-fadeoutdown .3s forwards;
animation:notyf-fadeoutdown .3s forwards;
-webkit-animation-delay:.25s;
animation-delay:.25s
}
.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message {
-webkit-animation:notyf-fadeoutdown .3s forwards;
animation:notyf-fadeoutdown .3s forwards;
opacity:1;
transform:translateY(0)
}
.notyf__toast--disappear .notyf__dismiss {
-webkit-animation:notyf-fadeoutright .3s forwards;
animation:notyf-fadeoutright .3s forwards;
opacity:1;
transform:translateX(0)
}
.notyf__toast--disappear .notyf__message {
-webkit-animation-delay:.05s;
animation-delay:.05s
}
.notyf__toast--upper {
margin-bottom:20px
}
.notyf__toast--lower {
margin-top:20px
}
.notyf__toast--dismissible .notyf__wrapper {
padding-right:30px
}
.notyf__ripple {
height:400px;
width:100%;
position:absolute;
transform-origin:bottom right;
right:0;
top:0;
border-radius:0%;
transform:scale(0) translateY(-51%) translateX(13%);
z-index:5;
-webkit-animation:ripple .4s ease-out forwards;
animation:ripple .4s ease-out forwards;
}
.notyf__wrapper {
display:flex;
align-items:center;
padding-top:17px;
padding-bottom:17px;
padding-right:15px;
border-radius:3px;
position:relative;
z-index:10;
}
.notyf__icon {
width:22px;
text-align:center;
font-size:1.3em;
opacity:0;
-webkit-animation:notyf-fadeinup .3s forwards;
animation:notyf-fadeinup .3s forwards;
-webkit-animation-delay:.3s;
animation-delay:.3s;
margin-right:13px
}
.notyf__dismiss {
position:absolute;
top:0;
right:0;
height:100%;
width:26px;
margin-right:-15px;
-webkit-animation:notyf-fadeinleft .3s forwards;
animation:notyf-fadeinleft .3s forwards;
-webkit-animation-delay:.35s;
animation-delay:.35s;
opacity:0
}
.notyf__dismiss-btn {
background-color:rgba(0,0,0,.25);
border:none;
cursor:pointer;
transition:opacity .2s ease,background-color .2s ease;
outline:none;
opacity:.35;
height:100%;
width:100%
}
.notyf__dismiss-btn:after,.notyf__dismiss-btn:before {
content: " ";
background:#fff;
height:12px;
width:2px;
border-radius:3px;
position:absolute;
left:calc(50% - 1px);
top:calc(50% - 5px)
}
.notyf__dismiss-btn:after {
transform:rotate(-45deg)
}
.notyf__dismiss-btn:before {
transform:rotate(45deg)
}
.notyf__dismiss-btn:hover {
opacity:.7;
background-color:rgba(0,0,0,.15)
}
.notyf__dismiss-btn:active {
opacity:.8
}
.notyf__message {
vertical-align:middle;
position:relative;
opacity:0;
-webkit-animation:notyf-fadeinup .3s forwards;
animation:notyf-fadeinup .3s forwards;
-webkit-animation-delay:.25s;
animation-delay:.25s;
line-height:1.5em;
font-family: Lato;
margin-top: 0px;
padding-right: 20px;
}
@media only screen and (max-width:480px) {
    .notyf {
    padding:0
    }
    .notyf__ripple {
    height:1000px;
    width:100%;
    -webkit-animation-duration:.5s;
    animation-duration:.5s
    }
    .notyf__toast {
    max-width:none;
    border-radius:0;
    box-shadow:0 -2px 7px 0 rgba(0,0,0,.13);
    max-width:90%
    }
    .notyf__dismiss {
    width:56px
    }
}	