[bst-tooltip] {
    position: relative
}

[bst-tooltip]::before,
[bst-tooltip]::after {
    text-transform: none;
    font-size: 10px;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
    z-index: 1;
}

[bst-tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1;
}

[bst-tooltip]::after {
    content: attr(bst-tooltip);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    vertical-align: super;
    text-align: center;
    padding: .8em 1em;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 3em;
    max-width: 21em;
    border-radius: 3px;
    box-shadow: 0 1em 2em -.6em rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, .9);
    color: #fff;
    z-index: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

[bst-tooltip]:hover::before,
[bst-tooltip]:hover::after {
    display: block
}

[bst-tooltip='']::before,
[bst-tooltip='']::after {
    display: none !important
}

[bst-tooltip]:not([flow])::before,
[bst-tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, .85);
    margin-bottom: 5px
}

[bst-tooltip]:not([flow])::after,
[bst-tooltip][flow^="up"]::after {
    bottom: calc(100% + 10px)
}

[bst-tooltip]:not([flow])::before,
[bst-tooltip]:not([flow])::after,
[bst-tooltip][flow^="up"]::before,
[bst-tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.6em)
}

[bst-tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: rgba(0, 0, 0, .9);
    margin-top: 5px;
}

[bst-tooltip][flow^="down"]::after {
    top: calc(100% + 10px)
}

[bst-tooltip][flow^="down"]::before,
[bst-tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .6em)
}

[bst-tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: rgba(0, 0, 0, .9);
    left: calc(0em - 10px);
    transform: translate(-.6em, -50%)
}

[bst-tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 10px);
    transform: translate(-.6em, -50%)
}

[bst-tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, .9);
    right: calc(0em - 10px);
    transform: translate(.6em, -50%)
}

[bst-tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 10px);
    transform: translate(.6em, -50%)
}

@keyframes bst-tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0)
    }
}

@keyframes bst-tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%)
    }
}

[bst-tooltip]:not([flow]):hover::before,
[bst-tooltip]:not([flow]):hover::after,
[bst-tooltip][flow^="up"]:hover::before,
[bst-tooltip][flow^="up"]:hover::after,
[bst-tooltip][flow^="down"]:hover::before,
[bst-tooltip][flow^="down"]:hover::after {
    animation: bst-tooltips-vert 400ms ease-out forwards
}

[bst-tooltip][flow^="left"]:hover::before,
[bst-tooltip][flow^="left"]:hover::after,
[bst-tooltip][flow^="right"]:hover::before,
[bst-tooltip][flow^="right"]:hover::after {
    animation: bst-tooltips-horz 400ms ease-out forwards
}