.toastCustomContain {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
    min-width: 280px;
}


.toastCustom {
    margin-top: -2.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.75);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    opacity: 0;
    transform: scale(0.9) translateY(50px);
    transition: margin-top 0.5s, height 0.5s, transform 0.5s, opacity 0.5s;
    pointer-events: auto;
    background-clip: padding-box;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

}

    /* how the.toastCustom transitions when it's transitioned in */
    .toastCustom.open {
        margin-top: 0.5rem;
        transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
        opacity: 100;
    }

    /* Create different.toastCustoms by providing extraClasses and styling them here. */
    .toastCustom.success {
    }

    .toastCustom.failure {
    }

    .toastCustom.warning {
    }