:root {
    --delay-progress: 5000ms;
}

.toastify {
    position: fixed;
    max-width: calc(100% - 2rem);
    bottom: 1rem;
    padding: 1rem 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
    border-radius: 4px;
    background-color: #fff;
    z-index: 99999;
    cursor: pointer;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%), 0 2px 15px 0 rgb(0 0 0 / 5%);
    transform: translateX(-1rem);
    right:0;
}

    .toastify > div:first-child {
        display: flex;
        flex-direction: row;
        max-width: 380px;
        direction: rtl;
    }

    .toastify .iconfy {
        display: flex;
        align-items: center;
    }

    .toastify .msgfy {
        padding: 0 1rem 0 2.5rem;
        color: #757575
    }

        .toastify .msgfy li {
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
        }

    .toastify .closefy {
        border: none;
        background-color: transparent;
        position: absolute;
        left: 5px;
        top: 8px;
    }

        .toastify .closefy svg {
            fill: #ccc;
        }

        .toastify .closefy:hover svg {
            fill: #666;
        }

    .toastify .progressfy {
        position: fixed;
        display: flex;
        justify-content: end;
        width: 100%;
        bottom: 0;
        left: 0;
    }

        .toastify .progressfy div {
            width: 100%;
            height: 5px;
            transition: width var(--delay-progress) linear;
        }

    .toastify.error .progressfy div {
        background-color: var(--clrred);
    }

    .toastify.warning .progressfy div {
        background-color: var(--clryellow);
    }

    .toastify.success .progressfy div {
        background-color: var(--clrgreen);
    }

    .toastify.info .progressfy div {
        background-color: var(--clrblue);
    }

    .toastify .progressfy div.active {
        width: 0 !important;
    }