.jsfx-toast {
    --warning: var(--color-warning);
    --error: var(--color-danger);
    --success: var(--color-success);
    --info: var(--color-info);
}
.toast-warning {
    background-color: var(--warning);
    color: #ffffff;
}
.toast-error {
    background-color: var(--danger);
    color: #ffffff;
}
.toast-success {
    background-color: var(--success);
    color: #ffffff;
}
.toast-info {
    background-color: var(--info);
    color: #ffffff;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
    width: 30em;
}
#toast-container > div {
    padding: 12px 12px 12px 50px;
}
#toast-container > div.rtl {
    padding: 12px 50px 12px 12px;
}

@media (max-width: 480px) and (min-width: 241px) {
    #toast-container > div {
        padding: 8px 8px 8px 50px !important;
    }
    #toast-container > div.rtl {
        padding: 8px 50px 8px 8px;
    }
    #toast-container.toast-top-center > div,
    #toast-container.toast-bottom-center > div {
        width: 18em !important;
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    #toast-container > div {
      padding: 10px 10px 10px 50px !important;
    }
    #toast-container > div.rtl {
      padding: 10px 50px 10px 10px;
    }
    #toast-container.toast-top-center > div,
    #toast-container.toast-bottom-center > div {
        width: 25em !important;
    }
}