/****************** Tooltip Modal *****************************/

.summary-tooltip {
    position: relative;
}

    /* Tooltip text */
    .summary-tooltip .tooltiptext {
        visibility: hidden;
        width: fit-content;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 0.5rem;
        border-radius: 6px;
        opacity: 0.7;
        font-size: 0.65rem;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        bottom: 110%;
        margin-left: 0.2rem;
    }

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

    .summary-tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 12%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

.ink-tooltip {
    position: relative;
    z-index: 1;
}

    /* Tooltip text */
    .ink-tooltip .tooltiptext {
        visibility: hidden;
        width: fit-content;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 0.5rem;
        border-radius: 6px;
        opacity: 0.7;
        font-size: 0.65rem;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        bottom: 110%;
        margin-left: 0.2rem;
    }

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

    .ink-tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 12%;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }