.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1;
}

.tippy-box[data-animation=shift-away][data-state=hidden] {
    opacity: 0
}

    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
        transform: translateY(10px)
    }

    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
        transform: translateY(-10px)
    }

    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
        transform: translateX(10px)
    }

    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
        transform: translateX(-10px)
    }

.tippy-box[data-animation=shift-toward][data-state=hidden] {
    opacity: 0
}

    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
        transform: translateY(-10px)
    }

    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
        transform: translateY(10px)
    }

    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
        transform: translateX(-10px)
    }

    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
        transform: translateX(10px)
    }

.tippy-box[data-animation=scale][data-placement^=top] {
    transform-origin: bottom
}

.tippy-box[data-animation=scale][data-placement^=bottom] {
    transform-origin: top
}

.tippy-box[data-animation=scale][data-placement^=left] {
    transform-origin: right
}

.tippy-box[data-animation=scale][data-placement^=right] {
    transform-origin: left
}

.tippy-box[data-animation=scale][data-state=hidden] {
    transform: scale(.5);
    opacity: 0
}

.tippy-box[data-animation=perspective][data-placement^=top] {
    transform-origin: bottom
}

    .tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] {
        transform: perspective(700px) translateY(8px) rotateX(60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=bottom] {
    transform-origin: top
}

    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
        transform: perspective(700px) translateY(-8px) rotateX(-60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=left] {
    transform-origin: right
}

    .tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] {
        transform: perspective(700px) translateX(8px) rotateY(-60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=right] {
    transform-origin: left
}

    .tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
        transform: perspective(700px) translateX(-8px) rotateY(60deg)
    }

.tippy-box[data-animation=perspective][data-state=hidden] {
    opacity: 0
}

.tippy-box[data-placement^=top] > .tippy-svg-arrow {
    bottom: 0
}

    .tippy-box[data-placement^=top] > .tippy-svg-arrow:after, .tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
        top: 16px;
        transform: rotate(180deg)
    }

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow {
    top: 0
}

    .tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg {
        bottom: 16px
    }

.tippy-box[data-placement^=left] > .tippy-svg-arrow {
    right: 0
}

    .tippy-box[data-placement^=left] > .tippy-svg-arrow:after, .tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
        transform: rotate(90deg);
        top: calc(50% - 3px);
        left: 11px
    }

.tippy-box[data-placement^=right] > .tippy-svg-arrow {
    left: 0
}

    .tippy-box[data-placement^=right] > .tippy-svg-arrow:after, .tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
        transform: rotate(-90deg);
        top: calc(50% - 3px);
        right: 11px
    }

.tippy-box[data-theme=contactpicker] {
    border-radius: 1rem;
    padding: .5rem;
}

.tippy-svg-arrow {
    width: 16px;
    height: 16px;
    fill: #333;
    text-align: initial
}

    .tippy-svg-arrow, .tippy-svg-arrow > svg {
        position: absolute
    }