/* Tooltip container */
.DStooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
    .DStooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background: var(--principal-azul-tonos-azul-600, #5078E7);
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        width: 169px;
        top: 100%;
        margin-left: -27px;
        text-align: start;
        padding: 12px;
        font-size: 12px;
        font-family: 'Montserrat', sans-serif !important;
    }

/* Show the tooltip text when you mouse over the tooltip container */
.DStooltip:hover .tooltiptext {
    visibility: visible;
}

 

.DStooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--principal-azul-tonos-azul-600, #5078E7) transparent;
}