@keyframes zr_move {
    0%   {opacity: 0; right: -400px;}
    10%  {opacity: .1; right: -300px;}
    20%  {opacity: .2; right: -200px;}
    30%  {opacity: .3; right: -100px;}
    40%  {opacity: .4; right: 0;}
    50%  {opacity: .5; right: 25px;}
    75%  {opacity: .75; right: 0;}
    100% {opacity: 1; right: 0;}
}

@keyframes zr_hide {
    0%   {opacity: 1; right: 0;}
    100% {opacity: 0; right: -400px;}
}
.zr-notification-subbox{
    text-align: center;
    justify-content: center;
    left: 5%;
    position: relative;
    top: 25%;
}
.zr-notifications {
    display: flex;
    max-width: 500px;
    position: fixed;
    left: 0;
    bottom: 10px;
    margin-left: 16px;
    flex-flow: column nowrap;
    align-items: flex-end;
    z-index: 3;
    
    
}
.zr-notification-img{
    display: block;
    width: 150px;
    height: auto;
    top: 100%;
}
.zr-notifications-time{
    display: flex;
    
}
.zr-notification-box{
    display: flex;
   
    
    
}
.zr-notification-parent-box{
    display: flex;
    height: 100px;
}
.zr-notification-parent-box2{
    display: flex;
    
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
}
.zr-notification {
    
    position: relative;
    width: 450px;
    
    align-items: center;
    
    
    animation: zr_move 1s;
    background-color: white;
    border-right: 5px solid #4EBEF4;
    display: flex;
    box-shadow: 6px 6px 20px rgba(60, 60, 60, 0.5);
}

.zr-notification-watch{
    position: relative;
    top: 10px;
}
.zr-notification.hide {
    right: -400px;
    animation-name: zr_hide;
    opacity: 0;
}

.zr-notification-close{
   
    line-height: 13px;
    font-size: 15px;
    left: 300px;
    position: absolute;
    /* bottom: 20px; */
    top: 0px;

}

.zr-notification-close:hover{
    cursor: pointer;
    color: red;
}

.zr-notification-date{
    
    margin-left: 10px;
    margin-top: 10px;
    font-size: 10px;
    
}
.zr-notification-divider{
    display: block;
    width: 80%;
    border-top: 1px solid rgb(51, 153, 255, 0.5);
    margin: 20px;
}
.zr-notification-message{
    padding-right: 1.1rem;
    align-items: center;
    line-height: 1.4;
    font-size: 16px;
    position: relative;
    
}