.custom-invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: var(--bs-danger);
    border-radius: var(--bs-border-radius) !important;
}

    .custom-invalid-tooltip:empty {
        display: none;
    }

/* apply the bootstrap original color - remove current template overrides */
.alert-danger-bs-default {
    color: #fff;
    font-size: .875rem;
    background-color: var(--bs-danger) !important;
    background-image: none !important;
}