/* vinny.css by Vinny Fonseca for The Surname Tree 2021 */

.image-container {
    display: inline-block; /* NECESSARY FOR CORRECT INLINE COORDINATES */
    position: relative; /* NECESSARY FOR CORRECT INLINE COORDINATES */
}

.tst-tooltip {
    display: block;
    position: absolute;
    /* background-color: rgba(255, 0, 0, 0.15); /* REMOVE THIS FOR PROD */
}

.tst-tooltip:after,
.tst-tooltip:before {
    transition: all 0.2s ease-in-out;
}

.tst-tooltip:after{
    display: block;
    position: absolute;
    visibility: hidden;
    content: attr(data-tooltip);
    opacity: 0;
    padding: 5px 8px;
    min-width: 100px;
    height: auto;
    left: 50%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.75);
    transform: translateX(-50%);
}
.tst-tooltip:before {
    position: absolute;
    visibility: hidden;
    content: "";
    opacity: 0;
    width: 0;
    height: 0;
    left: 50%;
    border-style: solid;
}

.tst-tooltip:hover:after,
.tst-tooltip:hover:before {
    visibility: visible;
    opacity: 1;
}

.tst-tooltip--top:after {
    bottom: 100%;
}
.tst-tooltip--top:before {
    bottom: 100%;
    border-width: 6px 6px 0 6px;
    border-color: rgba(0,0,0,0.75) transparent transparent transparent;
    transform: translateX(-50%) translateY(6px);
}

.tst-tooltip--top:hover:after {
    transform: translateX(-50%) translateY(-10px);
}
.tst-tooltip--top:hover:before {
    transform: translateX(-50%) translateY(-4px);
}

.tst-tooltip--bottom:after {
    top: 100%;
}
.tst-tooltip--bottom:before {
    top: 100%;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(0,0,0,0.75) transparent;
    transform: translateX(-50%) translateY(-6px);
}

.tst-tooltip--bottom:hover:after {
    transform: translateX(-50%) translateY(10px);
}
.tst-tooltip--bottom:hover:before {
    transform: translateX(-50%) translateY(4px);
}