@keyframes append-animate-desktop {
    from {
        right: -200px;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes append-animate-mobile {
    from {
        bottom: -200px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

.popup-notifications {
    position: fixed;
    right: 0;
    top: 36px;
    z-index: 1003;
    padding: 36px;
    width: 568px;
    overflow: hidden;
}

.popup-notifications--item {
    padding: 0;
    margin-bottom: 8px;
    position: relative;
    animation: append-animate-desktop .2s linear;
    transition: opacity .2s;
}

.popup-notifications--item.removing {
    opacity: 0;
}

.popup-notifications--toast {
    box-shadow: 0 6px 15px 0 rgba(38,41,70,0.2);
    margin-bottom: 0;
}

@media (max-width:767px) {
    .popup-notifications {
        top: inherit;
        bottom: 0;
        width: 100%;
    }

    .popup-notifications--item {
        margin-bottom: 0;
        margin-top: 8px;
        padding: 28px;
        animation: append-animate-mobile .2s linear;
    }
}