.animation-in {
    animation: movein 0.5s ease forwards;
}

.animation-out {
    animation: moveout 0.5s ease forwards;
}

#armNotify {
    height: 64px;
    border-radius: 10px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 75px;
    right: -100vw;
    max-width: 455px;
    height: auto;
    cursor: pointer;
}

    #armNotify.info {
        background-color: #EDEEFF;
        color: rgba(0, 0, 0, 0.76);
    }

        #armNotify.info .bi-x {
            color: #543EA3;
        }

    #armNotify.success {
        background-color: #D2F4DE;
        color: #006742;
    }

    #armNotify.warning {
        background-color: #FFE5CD;
        color: rgba(0, 0, 0, 0.76);
    }

        #armNotify.warning .bi-x {
            color: #B45200;
        }

    #armNotify.error {
        background-color: #FFDCDF;
        color: #9E000F;
    }

    #armNotify i {
        display: flex;
        border-radius: 100%;
        font-size: 19px !important;
        width: 32px;
        height: 32px;
    }

    #armNotify.info i {
        border: solid 7px #8B77EF;
        color: #8B77EF;
        background-color: #FFFFFF;
    }

    #armNotify.success i {
        border: solid 7px #A1E4B8;
        color: #A1E4B8;
        background-color: #FFFFFF;
    }

    #armNotify.warning i {
        border: solid 7px #FF9E44;
        color: #FF9E44;
        background-color: #FFFFFF;
    }

    #armNotify.error i {
        border: solid 7px #FF7B87;
        color: #FF7B87;
        background-color: #FFFFFF;
    }

    #armNotify .icon {
        position: absolute;
        padding: 16px 40px 16px 16px;
    }

    #armNotify #armNotifyText {
        padding: 21px 40px 21px 64px;
    }

    #armNotify .bi-x {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 30px;
        font-size: 24px;
    }

@keyframes movein {
    from {
        right: -100vw;
    }

    to {
        right: 75px;
    }
}

@keyframes moveout {
    from {
        right: 75px;
    }

    to {
        right: -100vw;
    }
}
/*@keyframes movein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes moveout {
  from { opacity: 1; }
  to   { opacity: 0; }
}*/