.toast {
    width: 400px;
    height: 120px;
    background: var(--dark-green-two);
    position: fixed;
    z-index: 999999;
    border-radius: 10px;
    bottom: 20px;
    right: 20px;
    transition:.5s;
    
}

.visible {
    right:20px;
}

    .hidden {
        right:-500px;
    }

    .toast .toast-header button {
        position: absolute;
        right: 10px;
        top:10px;
        background: transparent;
        border: 0;
        cursor:pointer;
    }

    .toast .toast-content {
        width: 100%;
        height: 100%;
        align-items: center;
        display: grid;
        grid-template-columns: 15% 75%;
        grid-column-gap: 20px;
        padding: 10px;
    }

    .toast .toast-content .icon {
        height:60px;
        width:60px;
    }

    .toast .toast-content .icon img {
        width:100%;
        height:100%;
        object-fit:contain;
    }


        .toast .toast-content .toast-text .title-toast{
            font-size:20px;
            font-weight:700;
            margin-bottom:8px;
        }

        .toast .toast-content .toast-text .toast-msg {
            font-size: 14px;
            font-weight: 400;
            text-align:justify-all;

        }

        .toast .toast-content .toast-text .title-toast,
        .toast .toast-content .toast-text .toast-msg {
            color: var(--white);
        }