.successtoast {
    background: #28a745;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
    min-width: 250px;
}

    .successtoast .toast-header {
        background: #28a745
    }

.errortoast {
    background: #dc3545;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
    min-width: 250px;
}

    .errortoast .toast-header {
        background: #dc3545
    }

#carttoast {
    background: #e2e2e2;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1055;
    min-width: 250px;
}
@keyframes fadeLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-left {
    animation: fadeLeft 0.5s ease forwards;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.fade-out-right {
    animation: fadeOutRight 0.5s ease forwards;
}

@keyframes fadeBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-bottom {
    animation: fadeBottom 0.5s ease forwards;
}

@keyframes fadeTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-top {
    animation: fadeTop 0.5s ease forwards;
}