/**
 * UI Tooltip
 ________________________________________________________________*/
.ui-tip {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.ui-tip > :not(.ui-tip-panel) {
    font-size: 1.5em;
    padding: .5em;
    border: 2px solid white;
    border-radius: 6px;
    transition: border .3s;
}

.ui-tip:hover > :not(.ui-tip-panel) {
    border-color: transparent;
}

.ui-tip .ui-tip-panel {
    background: rgba(255, 255, 255, .9);
    border: 2px solid white;
    border-radius: 6px;
    color: #444;
    display: block;
    font-size: 1.25em;
    padding: 1em;
    left: 0; bottom: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: left;
    transition: transform .3s, opacity .3s;
    transform: translate3d(0, 1.5em, 0) scale3d(0, 0, 0);
    transform-origin: 0 calc(100% - 1.5em);
    white-space: nowrap;
}

.ui-tip .ui-tip-panel.right {
    left: auto; right: 0;
}

.ui-tip .ui-tip-panel.bottom {
    bottom: auto; top: 100%;
    transform-origin: calc(100% - 1.5em) 0;
}

.ui-tip:hover .ui-tip-panel,
.ui-tip:active .ui-tip-panel {
    cursor: hand;
    opacity: 1;
    transform: none;
}