#tooltip {
    position: fixed;
    background-color: rgb(51, 55, 64);
    border: 1px solid rgb(88, 88, 102);
    padding: .25em .5em;
    border-radius: .5rem;
    animation: fade-in .1s linear;
}
#tooltip::before {
    content: '';
    position: absolute;
    border-left: .75rem solid rgba(0, 0, 0, 0);
    border-right: .75rem solid rgba(0, 0, 0, 0);
    border-top: .75rem solid rgb(51, 55, 64);
}
#tooltip > * {
    color: #FFF;
    display: block;
    white-space: nowrap;
}
#tooltip #tooltip-title {
    text-align: center;
}
#tooltip #tooltip-small {
    text-align: justify;
}
#tooltip.ttd-top {
    margin-top: -1rem;
    transform: translate(-50%, -100%);
}
#tooltip.ttd-bottom {
    margin-top: 1rem;
    transform: translate(-50%, 0);
}
#tooltip.ttd-left {
    margin-left: -1rem;
    transform: translate(-100%, -50%);
    border-radius: .5rem .25rem .25rem .5rem;
}
#tooltip.ttd-right {
    margin-left: 1rem;
    transform: translate(0, -50%);
    border-radius: .25rem .5rem .5rem .25rem;
}
#tooltip.ttd-top::before,
#tooltip.ttd-bottom::before {
    left: 50%;
    margin-left: -.75rem;
}
#tooltip.ttd-top::before {
    bottom: -.75rem;
}
#tooltip.ttd-bottom::before {
    top: -.75rem;
    transform: rotate(-180deg);
}
#tooltip.ttd-left::before,
#tooltip.ttd-right::before {
    top: 50%;
    margin-top: -.4rem;
    border-left-width: .5rem;
    border-right-width: .5rem;
}
#tooltip.ttd-left::before {
    right: -.9rem;
    transform: rotate(-90deg);
}
#tooltip.ttd-right::before {
    left: -.9rem;
    transform: rotate(90deg);
}