/*
 * Portal tooltips.
 *
 * Bootstrap 3 ships a cramped black box that snaps in over 150ms of linear
 * opacity. This softens the look (rounded, translucent dark surface, readable
 * left-aligned copy) and makes it fade in while sliding a few pixels away from
 * its anchor.
 */

.tooltip {
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;
}

.tooltip.fade {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Start slightly shifted towards the anchor, then settle into place. */
.tooltip.top,
.tooltip.top-left,
.tooltip.top-right {
    -webkit-transform: translate3d(0, 6px, 0);
    transform: translate3d(0, 6px, 0);
}

.tooltip.bottom,
.tooltip.bottom-left,
.tooltip.bottom-right {
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
}

.tooltip.left {
    -webkit-transform: translate3d(6px, 0, 0);
    transform: translate3d(6px, 0, 0);
}

.tooltip.right {
    -webkit-transform: translate3d(-6px, 0, 0);
    transform: translate3d(-6px, 0, 0);
}

.tooltip.in {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*
 * Light card surface with a leading info icon, instead of the default black
 * box. The icon is drawn as a background SVG so the title stays plain text and
 * the tooltip plugin never needs `html: true`.
 */
.tooltip-inner {
    max-width: 330px;
    padding: 11px 15px 12px 41px;
    border: 1px solid #e3e8ec;
    border-radius: 8px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a969e' stroke-width='1.25'%3E%3Ccircle cx='8' cy='8' r='6.7'/%3E%3Cpath d='M8 7.2v4.2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.8' r='0.85' fill='%238a969e' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px 13px;
    background-size: 16px 16px;
    color: #3f4b53;
    text-align: left;
    letter-spacing: 0.1px;
    box-shadow: 0 8px 24px rgba(15, 34, 45, 0.14);
}

/*
 * Tail. The card has a border, so a single Bootstrap triangle is not enough:
 * the arrow itself is drawn in the border colour and a second, white triangle
 * is layered 1px inside it, leaving a hairline outline that matches the card.
 */
.tooltip.top,
.tooltip.top-left,
.tooltip.top-right {
    padding-bottom: 7px;
}

.tooltip.bottom,
.tooltip.bottom-left,
.tooltip.bottom-right {
    padding-top: 7px;
}

.tooltip.left {
    padding-right: 7px;
}

.tooltip.right {
    padding-left: 7px;
}

/*
 * The Material theme hides Bootstrap tooltip arrows
 * (material.min.css: `.tooltip .tooltip-arrow { display: none }`), so the tail
 * has to be switched back on with a more specific selector.
 */
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow,
.tooltip.left .tooltip-arrow,
.tooltip.right .tooltip-arrow {
    display: block;
}

.tooltip .tooltip-arrow:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    margin-left: -7px;
    border-width: 7px 7px 0;
    border-top-color: #e3e8ec;
}

.tooltip.top .tooltip-arrow:after,
.tooltip.top-left .tooltip-arrow:after,
.tooltip.top-right .tooltip-arrow:after {
    bottom: 1px;
    left: -7px;
    border-width: 7px 7px 0;
    border-top-color: #ffffff;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    margin-left: -7px;
    border-width: 0 7px 7px;
    border-bottom-color: #e3e8ec;
}

.tooltip.bottom .tooltip-arrow:after,
.tooltip.bottom-left .tooltip-arrow:after,
.tooltip.bottom-right .tooltip-arrow:after {
    top: 1px;
    left: -7px;
    border-width: 0 7px 7px;
    border-bottom-color: #ffffff;
}

.tooltip.left .tooltip-arrow {
    margin-top: -7px;
    border-width: 7px 0 7px 7px;
    border-left-color: #e3e8ec;
}

.tooltip.left .tooltip-arrow:after {
    top: -7px;
    right: 1px;
    border-width: 7px 0 7px 7px;
    border-left-color: #ffffff;
}

.tooltip.right .tooltip-arrow {
    margin-top: -7px;
    border-width: 7px 7px 7px 0;
    border-right-color: #e3e8ec;
}

.tooltip.right .tooltip-arrow:after {
    top: -7px;
    left: 1px;
    border-width: 7px 7px 7px 0;
    border-right-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip.fade {
        -webkit-transition: opacity 0.2s ease-out;
        transition: opacity 0.2s ease-out;
    }

    .tooltip.top,
    .tooltip.top-left,
    .tooltip.top-right,
    .tooltip.bottom,
    .tooltip.bottom-left,
    .tooltip.bottom-right,
    .tooltip.left,
    .tooltip.right {
        -webkit-transform: none;
        transform: none;
    }
}