.tooltipContainer {
    height: max-content;
}

.tooltip {
    background-color: transparent;
    pointer-events: none;
}

    .tooltip.show {
        opacity: 1;
    }

.tooltipIcon {
    padding: 6px;
}

.tooltip-inner {
    background-color: #F2F2F2;
    color: var(--primary-color-900);
    font-size: 16px;
    font-family: 'Helvetica Neue';
    text-align: left;
    line-height: normal;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0px 0px 16px 0px rgba(4, 30, 66, 0.3);
    max-width: 250px;
}

.tooltip .arrow {
    width: 1.6rem;
    height: 1rem;
}

    .tooltip .arrow::before {
        border-top-color: #F2F2F2;
        border-bottom-color: #F2F2F2;
    }

/* === BOTTOM === */
.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^="bottom"] .arrow {
    top: -8px;
}

    .bs-tooltip-bottom .arrow::before,
    .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
        bottom: 0;
        border-width: 0 0.8rem 0.8rem;
        z-index: 1;
    }

    .bs-tooltip-bottom .arrow::after {
        content: "";
        position: absolute;
        top: -12px;
        left: -4px;
        border-width: 1rem;
        border-style: solid;
        border-color: transparent transparent #00000008 transparent;
        transform: translateY(-4px);
    }

/* === TOP === */
.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^="top"] .arrow {
    bottom: -8px;
}

    .bs-tooltip-top .arrow::before,
    .bs-tooltip-auto[x-placement^="top"] .arrow::before {
        top: 0;
        border-width: 0.8rem 0.8rem 0;
        z-index: 1;
    }

    .bs-tooltip-top .arrow::after {
        content: "";
        position: absolute;
        bottom: -12px;
        left: -4px;
        border-width: 1rem;
        border-style: solid;
        border-color: #00000008 transparent transparent transparent;
        transform: translateY(4px);
    }

/* === LEFT / START === */
.bs-tooltip-start .arrow,
.bs-tooltip-auto[x-placement^="left"] .arrow {
    right: -8px;
}

    .bs-tooltip-start .arrow::before,
    .bs-tooltip-auto[x-placement^="left"] .arrow::before {
        left: 0;
        border-width: 0.8rem 0 0.8rem 0.8rem;
        z-index: 1;
    }

    .bs-tooltip-start .arrow::after {
        content: "";
        position: absolute;
        top: -4px;
        right: -12px;
        border-width: 1rem;
        border-style: solid;
        border-color: transparent transparent transparent #00000008;
        transform: translateX(4px);
    }

/* === RIGHT / END === */
.bs-tooltip-end .arrow,
.bs-tooltip-auto[x-placement^="right"] .arrow {
    left: -8px;
}

    .bs-tooltip-end .arrow::before,
    .bs-tooltip-auto[x-placement^="right"] .arrow::before {
        right: 0;
        border-width: 0.8rem 0.8rem 0.8rem 0;
        z-index: 1;
    }

    .bs-tooltip-end .arrow::after {
        content: "";
        position: absolute;
        top: -4px;
        left: -12px;
        border-width: 1rem;
        border-style: solid;
        border-color: transparent #00000008 transparent transparent;
        transform: translateX(-4px);
    }