.tooltip {
    font: 11px sans-serif;
    position: fixed;
    z-index: 15000;
    display: block;
    width: max-content;
    max-width: 1200px;
    transform: translate(-4px, 10px);
    pointer-events: none;
    border: 1px solid #959FA9;
    border-radius: 3px;
    background-color: #959FA9;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .15);
}

.tooltip__title {
    font-weight: 700;
    display: block;
    overflow: hidden;
    padding: 5px 35px 5px 10px;
    color: #F9F9F9;
    border-radius: 3px 3px 0 0;
    background-image: linear-gradient(#3A79B8, #2E629D);
}

.tooltip__content {
    display: block;
    overflow: hidden;
    padding: 5px 9px;
    border-radius: 0 0 3px 3px;
    background-color: #F9F9F9;
}

.tooltip.tooltip--left {
    transform: translate(calc(-100% + 4px), 10px);
}

.tooltip.tooltip--top {
    transform: translate(-4px, calc(-100% - 10px));
}

.tooltip.tooltip--left.tooltip--top {
    transform: translate(calc(-100% + 4px), calc(-100% - 10px));
}

.tooltip::before, .tooltip::after {
    position: absolute;
    content: '';
}

.tooltip.tooltip--top::before {
    bottom: -9px;
    border-top: 8px solid #959FA9;
}

.tooltip.tooltip--top::after {
    bottom: -7px;
    border-top: 8px solid #F9F9F9;
}

.tooltip:not(.tooltip--top)::before {
    top: -9px;
    border-bottom: 8px solid #959FA9;
}

.tooltip:not(.tooltip--top)::after {
    top: -7px;
    border-bottom: 8px solid #3A79B8;
}

.tooltip.tooltip--left::before {
    right: 3px;
    border-left: 8px solid transparent;
}

.tooltip.tooltip--left::after {
    right: 4px;
    border-left: 8px solid transparent;
}

.tooltip:not(.tooltip--left)::before {
    left: 3px;
    border-right: 8px solid transparent;
}

.tooltip:not(.tooltip--left)::after {
    left: 4px;
    border-right: 8px solid transparent;
}

.tooltipped {
    position: relative;
    display: inline-block;
}

.tooltipped > .tooltip {
    position: absolute;
    top: 100%;
    left: 100%;
    display: none;
}

.tooltipped > .tooltip.tooltip--left {
    left: 0;
}

.tooltipped > .tooltip.tooltip--top {
    top: 0;
}

.tooltipped:hover > .tooltip {
    display: block;
}