:root {
    --gtt-tooltip-max-width: 280px;
    --gtt-tooltip-text-color: #fff;
    --gtt-tooltip-bg: #555;
    --gtt-tooltip-border: #2271b2;
    --gtt-tooltip-gap: 10px;
    --gtt-tooltip-arrow-size: 8px
}

.glossary-tooltip {
    position: relative;
    display: inline;
    cursor: help
}

.glossary-tooltip.gtt-active {
    cursor: pointer
}

.gtt-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--gtt-tooltip-gap));
    display: inline-block;
    width: max-content;
    max-width: var(--gtt-tooltip-max-width);
    padding: 10px 12px;
    background: var(--gtt-tooltip-bg);
    color: var(--gtt-tooltip-text-color);
    border: 1px solid var(--gtt-tooltip-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
    backface-visibility: hidden;
    will-change: opacity,transform;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,6px);
    transition: opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1),visibility 0s linear .18s;
    z-index: 9999
}

.gtt-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: var(--gtt-tooltip-arrow-size) solid transparent;
    border-top-color: var(--gtt-tooltip-bg)
}

.glossary-tooltip.gtt-active>.gtt-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0);
    transition-delay: 0s
}

@media (hover:hover) {
    .glossary-tooltip:focus-visible>.gtt-tooltip,.glossary-tooltip:hover>.gtt-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%,0);
        transition-delay: 0s
    }
}

.gtt-bottom>.gtt-tooltip {
    top: calc(100% + var(--gtt-tooltip-gap));
    bottom: auto;
    transform: translate(-50%,-6px)
}

.gtt-bottom>.gtt-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--gtt-tooltip-bg)
}

.glossary-tooltip.gtt-bottom.gtt-active>.gtt-tooltip {
    transform: translate(-50%,0)
}

@media (hover:hover) {
    .glossary-tooltip.gtt-bottom:focus-visible>.gtt-tooltip,.glossary-tooltip.gtt-bottom:hover>.gtt-tooltip {
        transform: translate(-50%,0)
    }
}

.gtt-left>.gtt-tooltip {
    left: auto;
    right: calc(100% + var(--gtt-tooltip-gap));
    top: 50%;
    bottom: auto;
    transform: translate(6px,-50%)
}

.gtt-left>.gtt-tooltip::after,.gtt-right>.gtt-tooltip::after {
    top: 50%;
    transform: translateY(-50%);
    border-top-color: transparent
}

.gtt-left>.gtt-tooltip::after {
    left: 100%;
    border-left-color: var(--gtt-tooltip-bg)
}

.glossary-tooltip.gtt-left.gtt-active>.gtt-tooltip {
    transform: translate(0,-50%)
}

@media (hover:hover) {
    .glossary-tooltip.gtt-left:focus-visible>.gtt-tooltip,.glossary-tooltip.gtt-left:hover>.gtt-tooltip {
        transform: translate(0,-50%)
    }
}

.gtt-right>.gtt-tooltip {
    left: calc(100% + var(--gtt-tooltip-gap));
    top: 50%;
    bottom: auto;
    transform: translate(-6px,-50%)
}

.gtt-right>.gtt-tooltip::after {
    left: auto;
    right: 100%;
    border-right-color: var(--gtt-tooltip-bg)
}

.glossary-tooltip.gtt-right.gtt-active>.gtt-tooltip {
    transform: translate(0,-50%)
}

@media (hover:hover) {
    .glossary-tooltip.gtt-right:focus-visible>.gtt-tooltip,.glossary-tooltip.gtt-right:hover>.gtt-tooltip {
        transform: translate(0,-50%)
    }
}

.glossary-tooltip:focus {
    outline: 0
}

.glossary-tooltip:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {
    .gtt-tooltip {
        transition: none
    }
}