.tooltip-custom {
    position: relative;
    cursor: pointer;
}

    .tooltip-custom::after {
        content: attr(data-tooltip);
        position: absolute;
        /*bottom: 125%;*/
        bottom: 35px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #039f03;
        color: #FFFFFF;
        padding: 6px 10px;
        border-radius: 6px;
        white-space: nowrap;
        font-size: 13px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-in-out;
        z-index: 9999;
        max-width: 700px;
        min-width: 150px;
        height: auto;
        white-space: normal;
        text-align: left;
        word-wrap: break-word;
    }

    /*Seta do balão (triângulo apontando para o elemento) */
    .tooltip-custom::before {
        content: "";
        position: absolute;
        /*bottom: 70%;*/
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: #039f03 transparent transparent transparent;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        pointer-events: none;
        z-index: 9998;
    }


    .tooltip-custom:hover::after,
    .tooltip-custom:hover::before {
        opacity: 1;
    }