/* 
=============================
TF TOOLTIP STYLES
=============================
*/

.tf-tooltip {
    position: absolute;
    font-family: monospace;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    z-index: 1000;
    transform: translateX(0%);
    /* Adjusted to center the tooltip properly */
    width: auto;
    max-width: 250px;
}

.tf-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.tf-tooltip-top::before {
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #555 transparent;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.tf-tooltip-bottom::before {
    border-width: 5px 5px 0 5px;
    border-color: #555 transparent transparent transparent;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.tf-tooltip-left::before {
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent #555;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.tf-tooltip-right::before {
    border-width: 5px 5px 5px 0;
    border-color: transparent #555 transparent transparent;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}