:root {
    --tooltip-width: 100px;
    --tooltip-min-width: 50px;
    --tooltip-height: 100px;
    --tooltip-min-height: 50px;
    --tooltip-arrow-border-width: 8px;
    --tooltip-bubble-arrow-border-right: 4px;
    --tooltip-padding: 1em;
}

.tooltip-bubble {
    position: absolute;
    min-width: var(--tooltip-min-width);
    min-height: var(--tooltip-min-height);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-textXS);
    background: var(--kb-color-hsl-blue-200);
    border-radius: 5px;
    padding: var(--tooltip-padding);
    text-align: center;
    color: var(--kb-color-rgb-blue-800);
    z-index: 50;
}

.tooltip-bubble-bottom-left:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: var(--tooltip-arrow-border-width) solid var(--kb-color-hsl-blue-200);
    border-right: calc(0.5*var(--tooltip-arrow-border-width)) solid transparent;
    border-top: calc(0.5*var(--tooltip-arrow-border-width)) solid var(--kb-color-hsl-blue-200);
    border-bottom: calc(0.75*var(--tooltip-arrow-border-width)) solid transparent;
    left: calc(0.5 * var(--tooltip-arrow-border-width));
    bottom: calc(-1.25 * var(--tooltip-arrow-border-width));
}

.tooltip-data-bottom-center {
    visibility: visible;
    position: absolute;
    align-self: center;
    display: inline;
    background-color: var(--kb-color-hsl-blue-200);
    border: 1px solid var(--kb-color-hsl-blue-200);
    width: var(--tooltip-width);
    min-width: 100px;
    min-height: var(--tooltip-min-height);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-textXS);
    padding: var(--tooltip-padding);
    color: var(--kb-color-rgb-blue-800);
    z-index: 50;
    text-align: left;
    text-justify: distribute-center-last;
}

.tooltip-data-arrow-top-center:after {
    content: "";
    position: absolute;
    display: inline;
    border-width: var(--tooltip-arrow-border-width);
    border-style: solid;
    border-color: transparent transparent var(--kb-color-hsl-blue-200) transparent;
    left: calc(50% - var(--tooltip-arrow-border-width));
    top: calc(0% - 2*var(--tooltip-arrow-border-width));
}

.tooltip-data-left-center {
    visibility: visible;
    position: absolute;
    align-self: center;
    display: inline;
    background-color: var(--kb-color-hsl-blue-200);
    border: 1px solid var(--kb-color-hsl-blue-200);
    width: var(--tooltip-width);
    min-width: var(--tooltip-min-width);
    min-height: var(--tooltip-min-height);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-textXS);
    padding: var(--tooltip-padding);
    color: var(--kb-color-rgb-blue-800);
    z-index: 50;
    text-align: right;
    text-justify: distribute-center-last;
}
.tooltip-data-arrow-right-center:after {
    content: "";
    position: absolute;
    display: inline;
    border-width: var(--tooltip-arrow-border-width);
    border-style: solid;
    border-color: transparent transparent transparent var(--kb-color-hsl-blue-200);
    left: 100%;
    top: calc(50% - var(--tooltip-arrow-border-width));
}