[data-tippy] {
    position: relative
}

[data-tippy]:after, [data-tippy]:before {
    position: absolute;
    display: block;
    opacity: 0;
    font-family: inherit;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transform-origin: top;
    transform-origin: top;
    top: 100%;
    left: 50%;
    pointer-events: none
}

[data-tippy]:before {
    content: attr(data-tippy);
    color: #fff;
    font-size: 14px;
    background-color: #000;
    z-index: 1;
    padding: 4px 16px;
    border-radius: 0;
    white-space: nowrap;
    margin-top: 10px;
    font-weight: 400
}

[data-tippy]:after {
    content: '';
    border: 5px solid transparent;
    border-bottom-color: #000
}

[data-tippy]:hover:after, [data-tippy]:hover:before {
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

[data-tippy][data-tippy-pos]:after, [data-tippy][data-tippy-pos]:before {
    top: auto;
    left: auto;
    margin-top: auto;
    -webkit-transform: none;
    transform: none
}

[data-tippy][data-tippy-pos]:after {
    border-bottom-color: transparent
}

[data-tippy][data-tippy-pos=down]:after, [data-tippy][data-tippy-pos=down]:before, [data-tippy][data-tippy-pos=up]:after, [data-tippy][data-tippy-pos=up]:before {
    left: 50%
}

[data-tippy][data-tippy-pos=up]:after, [data-tippy][data-tippy-pos=up]:before {
    bottom: 100%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

[data-tippy][data-tippy-pos=up]:before {
    margin-bottom: 10px
}

[data-tippy][data-tippy-pos=up]:after {
    border-top-color: #000;
    border-bottom-color: transparent
}

[data-tippy][data-tippy-pos=down]:after, [data-tippy][data-tippy-pos=down]:before {
    top: 100%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

[data-tippy][data-tippy-pos=down]:before {
    margin-top: 10px
}

[data-tippy][data-tippy-pos=down]:after {
    border-bottom-color: #000;
    border-top-color: transparent
}

[data-tippy][data-tippy-pos=left]:after, [data-tippy][data-tippy-pos=left]:before, [data-tippy][data-tippy-pos=right]:after, [data-tippy][data-tippy-pos=right]:before {
    top: 50%
}

[data-tippy][data-tippy-pos=left]:after, [data-tippy][data-tippy-pos=left]:before {
    right: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-tippy][data-tippy-pos=left]:before {
    margin-right: 10px
}

[data-tippy][data-tippy-pos=left]:after {
    border-left-color: #000
}

[data-tippy][data-tippy-pos=right]:after, [data-tippy][data-tippy-pos=right]:before {
    left: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-tippy][data-tippy-pos=right]:before {
    margin-left: 10px
}

[data-tippy][data-tippy-pos=right]:after {
    border-right-color: #000
}

[data-tippy]:hover:after, [data-tippy]:hover:before {
    opacity: 1
}

[data-tippy][data-tippy-animate]:after, [data-tippy][data-tippy-animate]:before {
    transition: all .15s ease-out;
    transition-delay: 0s
}

[data-tippy][data-tippy-animate]:hover:after, [data-tippy][data-tippy-animate]:hover:before {
    transition-delay: .15s
}

[data-tippy][data-tippy-animate=slide]:after, [data-tippy][data-tippy-animate=slide]:before {
    -webkit-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px)
}

[data-tippy][data-tippy-animate=slide]:hover:after, [data-tippy][data-tippy-animate=slide]:hover:before {
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:after, [data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:before {
    -webkit-transform: translate(-92%, 10px);
    transform: translate(-92%, 10px)
}

[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:after, [data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:before {
    -webkit-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px)
}

[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:after, [data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:before, [data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:after, [data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:before {
    -webkit-transform: translate(-92%);
    transform: translate(-92%)
}

[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:after, [data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:before {
    -webkit-transform: translate(10px, -50%);
    transform: translate(10px, -50%)
}

[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:after, [data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:before {
    -webkit-transform: translate(-10px, -50%);
    transform: translate(-10px, -50%)
}

[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:after, [data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:before, [data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:after, [data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:before {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-tippy][data-tippy-animate=bubble]:after, [data-tippy][data-tippy-animate=bubble]:before {
    opacity: 1;
    visibility: hidden
}

[data-tippy][data-tippy-animate=bubble]:hover:after, [data-tippy][data-tippy-animate=bubble]:hover:before {
    visibility: visible
}

[data-tippy][data-tippy-animate=bubble]:before {
    -webkit-clip-path: circle(10% at 50% 0);
    clip-path: circle(10% at 50% 0)
}

[data-tippy][data-tippy-animate=bubble]:hover:before {
    -webkit-clip-path: circle(100% at 50%);
    clip-path: circle(100% at 50%)
}

[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:before {
    -webkit-clip-path: circle(10% at 50% 100%);
    clip-path: circle(10% at 50% 100%)
}

[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:hover:before {
    -webkit-clip-path: circle(100% at 50%);
    clip-path: circle(100% at 50%)
}

[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:before {
    -webkit-clip-path: circle(10% at 50% 0);
    clip-path: circle(10% at 50% 0)
}

[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:hover:before {
    -webkit-clip-path: circle(100% at 50%);
    clip-path: circle(100% at 50%)
}

[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:before {
    -webkit-clip-path: circle(10% at 100% 50%);
    clip-path: circle(10% at 100% 50%)
}

[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:hover:before {
    -webkit-clip-path: circle(100% at 50%);
    clip-path: circle(100% at 50%)
}

[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:before {
    -webkit-clip-path: circle(10% at 0 50%);
    clip-path: circle(10% at 0 50%)
}

[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:hover:before {
    -webkit-clip-path: circle(100% at 50%);
    clip-path: circle(100% at 50%)
}

[data-tippy][data-tippy-visible]:after, [data-tippy][data-tippy-visible]:before {
    opacity: 1;
    visibility: visible
}

[data-tippy][data-tippy-size=tiny]:before {
    font-size: 10px
}

[data-tippy][data-tippy-size=small]:before {
    font-size: 12px
}

[data-tippy][data-tippy-size=large]:before {
    font-size: 16px
}

[data-tippy][data-tippy-size=jumbo]:before {
    font-size: 20px
}