:root {
    --noti-success-color: #24bd58;
    --noti-success-background: #e7f9f1;
    --noti-warning-color: #cd9904;
    --noti-warning-background: #fff8e3;
    --noti-error-color: #cf494e;
    --noti-error-background: #faeded;
    --noti-info-color: #457cbf;
    --noti-info-background: #ebf1f8;
}

.toastify {
    padding: 1rem;
    min-width: 340px;
    max-width: 25%;
    border: 1px dashed;
    border-radius: 6px;
    border-left: 6px solid;
    padding-left: 2.5rem;
    display: flex;
}

    .toastify .toast-close {
        opacity: 1;
        display: none;
        vertical-align: top;
        margin-left: auto;
        margin-bottom: auto;
    }

    .toastify:hover .toast-close {
        display: block;
    }

    .toastify.success {
        border-color: var(--noti-success-color);
        color: var(--noti-success-color);
        background: var(--noti-success-background);
    }

        .toastify.success .toast-close {
            color: var(--noti-success-color);
        }

    .toastify.error {
        border-color: var(--noti-error-color);
        color: var(--noti-error-color);
        background: var(--noti-error-background);
    }

        .toastify.error .toast-close {
            color: var(--noti-error-color);
        }

    .toastify.warning {
        border-color: var(--noti-warning-color);
        color: var(--noti-warning-color);
        background: var(--noti-warning-background);
    }

        .toastify.warning .toast-close {
            color: var(--noti-warning-color);
        }

    .toastify.info {
        border-color: var(--noti-info-color);
        color: var(--noti-info-color);
        background: var(--noti-info-background);
    }

        .toastify.info .toast-close {
            color: var(--noti-info-color);
        }


.toastify-toast {
    position: relative;
}

.custom-close-icon {
    position: absolute;
    right: 10px;
    top: 20px;
    cursor: pointer;
}

.toastify .noti-title {
    font-family: "Roboto Condensed";
    font-size: 19.2px;
}

    .toastify .noti-title:before {
        position: absolute;
        left: 1rem;
        top: 20px;
        font-size: 14px;
        font-weight: 900;
        font-family: "Font Awesome 6 Pro";
    }

.toastify.error .noti-title:before {
    content: '\f071';
}

.toastify.success .noti-title:before {
    content: "\f058";
}

.toastify.info .noti-title:before {
    content: "\f06a";
}

.toastify .noti-desc {
    font-family: "Roboto Condensed";
    font-size: 14px;
}