body{
    overflow-x: hidden;
}

div.notification{
    font-family: Helvetica, Arial, sans-serif;
    z-index: 99999;
    position: fixed;
    top: calc(1.5em + 58px);
    right: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform .3s cubic-bezier(.3,-0.23,.2,1.44);
    width: 450px;
    text-align: left;
    vertical-align: middle;
    opacity: .93;
    padding: .75em 1em calc(.75em + 5px) 1em;
    white-space:pre-wrap;
}
div.notification:hover{
    cursor: pointer;
}
div.notification.shown{
    transform: translate3d(-1.7em, 0, 0);
}
div.notification div.line{
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right!important;
}
div.notification.success{
    background-color: #32ca7b;
    color: #fff;
}
div.notification.success div.line{
    background-color: #23a05f;
}
div.notification.error{
    background-color: #ce5140;
    color: #fff;
}
div.notification.error div.line{
    background-color: #8e483e;
}
div.notification.warning{
    background-color: #e6df4e;
    color: #fff;
}
div.notification.warning div.line{
    background-color: #d0b643;
}