.tooltip {
    font-family: var(--font-family-default);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
    transition: opacity 0.8s var(--animation-spring-gentle);
    --tail-size: 24px;
}
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: 304px;
    padding: 8px 7px 8px 8px;
    color: var(--white);
    text-align: left;
    background-color: var(--black);
    border-radius: var(--border-radius-default);
}
.tooltip-fixed .tooltip-inner {
    width: 256px; /*tooltip small has fixed width, as opposed to tooltip that has only max width and below that it is width auto*/
}

@media (max-width: 768px) {
    .tooltip-inner {
        max-width: 150px;
        border-radius: 6px;
    }
    .tooltip-fixed .tooltip-inner {
        width: 135px;
    }
}

.tooltip-r-1 .tooltip-inner {
    transform: translateX(-41%);
}
.tooltip-r-2 .tooltip-inner {
    transform: translateX(-7%);
}
.tooltip-l-1 .tooltip-inner {
    transform: translateX(39%);
}
.tooltip-l-2 .tooltip-inner {
    transform: translateX(32%);
}
.tooltip-l-3 .tooltip-inner {
    transform: translateX(27%);
}
.tooltip-l-4 .tooltip-inner {
    transform: translateX(24%);
}
.tooltip-l-5 .tooltip-inner {
    transform: translateX(19%);
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: var(--tail-size);
    height: calc(0.5 * var(--tail-size)); /*half of tail size*/
}
.tooltip .tooltip-arrow::before {
    position: absolute;
    content: url(/assets/tooltipTail-black-24x24.svg);
    width: var(--tail-size);
    height: var(--tail-size);
    /*z-index: -1;*/
}

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
    padding: calc(0.5 * var(--tail-size)) 0;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
    bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: calc(-0.5 * var(--tail-size)); /* -ve half of tail size*/
    transform: rotate(0deg);
}

.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
    padding: 0 calc(0.5 * var(--tail-size));
}
.bs-tooltip-end .tooltip-inner, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-inner {
    transform: translateY(0%); /*solves the tail overlapping text issue, magically*/
}
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: 0;
    width: calc(0.5 * var(--tail-size)); /*half of tail size*/
    height: var(--tail-size);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: calc(-0.5 * var(--tail-size)); /* -ve half of tail size*/
    transform: rotate(90deg);
}

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
    padding: calc(0.5 * var(--tail-size)) 0;
}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: calc(-0.5 * var(--tail-size)); /* -ve half of tail size*/
    transform: rotate(180deg);
}

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
    padding: 0 calc(0.5 * var(--tail-size));
}
.bs-tooltip-start .tooltip-inner, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-inner {
    transform: translateY(0%); /*solves the tail overlapping text issue, magically*/
}
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: 0;
    width: calc(0.5 * var(--tail-size)); /*half of tail size*/
    height: var(--tail-size);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: calc(-0.5 * var(--tail-size)); /* -ve half of tail size*/
    transform: rotate(270deg);
}

/*.test {
    background-color: red !important;
    color: red !important;
}*/