.conversejs {
    converse-toasts {
        position: fixed;
        top: 1em;
        right: 1em;

        converse-toast {
            --converse-toast-border-width: 0;

            .toast {
                color: var(--converse-toast-color) !important;
                background-color: var(--converse-toast-bg) !important;
                &.text-bg-success {
                    background-color: rgba(var(--converse-success-rgb), 0.85) !important;
                }
                &.text-bg-danger {
                    background-color: rgba(var(--converse-danger-rgb), 0.85) !important;
                }
                &.text-bg-info{
                    background-color: rgba(var(--converse-info-rgb), 0.85) !important;
                }
                position: relative;
                margin-block-start: 1em;
                margin-inline-end: 1em;
                .toast-header {
                    img {
                        height: 1.5em;
                    }
                }
                .toast-body__container {
                    .fa-times {
                        svg {
                            fill: var(--converse-toast-color);
                        }
                    }
                }
            }
        }
    }
}
