.toaststrap-container {
    position: fixed;
    display: none;
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer
}

.toaststrap-container:is(.show) {
    display: block
}

.toaststrap-container:is(.show) .toast {
    display: block;
    opacity: 1
}

.toaststrap-container .toast>.toast-header:is(.text-light) .btn-close {
    background: transparent url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23ffffff%27><path d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/></svg>") center/1em auto no-repeat;
    color: #fff
}

.toaststrap-top {
    position: fixed !important; /* Tetap pada posisi layar */
    top: 10px; /* Atur jarak dari atas */
    left: auto; /* Tambahkan jika tidak ada */
    right: auto; /* Tambahkan jika tidak ada */
    z-index: 1050; /* Pastikan elemen muncul di atas elemen lainnya */
}

.toaststrap-bottom {
    position: fixed !important; /* Tetap pada posisi layar */
    bottom: 10px; /* Atur jarak dari bawah */
    left: auto;
    right: auto;
    z-index: 1050;
}

.toaststrap-middle {
    top: 50%;
    margin-top: -50px
}

.toaststrap-start-5 {
    left: 5px
}

[dir=rtl] .toaststrap-start-5 {
    left: unset;
    right: 5px
}

.toaststrap-end-5 {
    right: 5px
}

[dir=rtl] .toaststrap-end-5 {
    right: unset;
    left: 5px
}

.toaststrap-center-5 {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0
}

.toaststrap-center-5 .toast {
    margin: auto
}

.toaststrap-start-10 {
    left: 10px
}

[dir=rtl] .toaststrap-start-10 {
    left: unset;
    right: 10px
}

.toaststrap-end-10 {
    right: 10px
}

[dir=rtl] .toaststrap-end-10 {
    right: unset;
    left: 10px
}

.toaststrap-center-10 {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0
}

.toaststrap-center-10 .toast {
    margin: auto
}

.toaststrap-start-15 {
    left: 15px
}

[dir=rtl] .toaststrap-start-15 {
    left: unset;
    right: 15px
}

.toaststrap-end-15 {
    right: 15px
}

[dir=rtl] .toaststrap-end-15 {
    right: unset;
    left: 15px
}

.toaststrap-center-15 {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0
}

.toaststrap-center-15 .toast {
    margin: auto
}

.toaststrap-start-20 {
    left: 20px
}

[dir=rtl] .toaststrap-start-20 {
    left: unset;
    right: 20px
}

.toaststrap-end-20 {
    right: 20px
}

[dir=rtl] .toaststrap-end-20 {
    right: unset;
    left: 20px
}

.toaststrap-center-20 {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0
}

.toaststrap-center-20 .toast {
    margin: auto
}

.toast-footer {
    height: 3px;
    overflow: hidden
}

.toast-footer-inner {
    width: 0;
    height: inherit;
    background-color: rgb(var(--bs-secondary-rgb));
    animation: move-progress infinite
}

.toaststrap-container:hover .toast-footer-inner {
    animation-play-state: paused
}

[data-type=primary] .toast-footer-inner {
    background-color: rgb(var(--bs-primary-rgb)) !important
}

[data-type=info] .toast-footer-inner {
    background-color: rgb(var(--bs-info-rgb)) !important
}

[data-type=success] .toast-footer-inner {
    background-color: rgb(var(--bs-success-rgb)) !important
}

[data-type=warning] .toast-footer-inner {
    background-color: rgb(var(--bs-warning-rgb)) !important
}

[data-type=danger] .toast-footer-inner {
    background-color: rgb(var(--bs-danger-rgb)) !important
}

[data-type=dark] .toast-footer-inner {
    background-color: rgb(var(--bs-dark-rgb)) !important
}

[data-type=sweet] .toast-footer-inner {
    background-color: #f4a3c4 !important
}

[data-snackbar=true] .toast-footer-inner {
    background-color: rgba(255, 255, 255, .85) !important
}

.bg-primary {
    background-color: rgb(var(--bs-primary-rgb)) !important
}

.bg-info {
    background-color: rgb(var(--bs-info-rgb)) !important
}

.bg-success {
    background-color: rgb(var(--bs-success-rgb)) !important
}

.bg-warning {
    background-color: rgb(var(--bs-warning-rgb)) !important
}

.bg-danger {
    background-color: rgb(var(--bs-danger-rgb)) !important
}

.bg-dark {
    background-color: rgb(var(--bs-dark-rgb)) !important
}

.bg-sweet {
    background-color: #f4a3c4 !important
}

@media(max-width: 575.98px) {
    .toaststrap-top,
    .toaststrap-bottom {
        margin-left: 0;
        margin-right: 0;
        left: 0;
        right: 0
    }
    .toaststrap-top .toast,
    .toaststrap-bottom .toast {
        margin: auto
    }
}

@keyframes move-progress {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}