[data-toggle='tooltip'][data-trigger='click'] {
    cursor: pointer;
}

.tooltip {
    --arrow-height: 10px;
    --arrow-width: 20px;
    --arrow-height-shadow: 4px;
    --arrow-width-shadow: 8px;
    position: absolute;
    z-index: var(--z-index-tooltip);
    display: block;
    text-align: left;
    word-wrap: break-word;
    opacity: 0;
}

    .tooltip.show {
        opacity: 1;
    }

    .tooltip .arrow {
        position: absolute;
        display: block;
        width: var(--arrow-width);
        height: var(--arrow-height);
    }

        .tooltip .arrow::before,
        .tooltip .arrow::after {
            content: '';
            position: absolute;
            border-color: transparent;
            border-style: solid;
        }

        .tooltip .arrow::after {
            z-index: -1;
            transform: rotate(-45deg);
            box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.15);
        }

/* Top */
.bs-tooltip-top,
.bs-tooltip-auto[x-placement^='top'] {
    padding: var(--arrow-height) 0;
}

    .bs-tooltip-top .arrow,
    .bs-tooltip-auto[x-placement^='top'] .arrow {
        bottom: 0;
    }

        .bs-tooltip-top .arrow::before,
        .bs-tooltip-auto[x-placement^='top'] .arrow::before {
            top: -1px;
            border-width: var(--arrow-height) var(--arrow-height) 0;
            border-top-color: var(--color-white);
        }

        .bs-tooltip-top .arrow::after,
        .bs-tooltip-auto[x-placement^='top'] .arrow::after {
            border-width: var(--arrow-height) var(--arrow-height) 0;
            bottom: var(--arrow-width-shadow);
            left: var(--arrow-height-shadow);
        }

/* Right */
/***************************  */
.bs-tooltip-right,
.bs-tooltip-auto[x-placement^='right'] {
    padding: 0 var(--arrow-height);
}

    .bs-tooltip-right .arrow,
    .bs-tooltip-auto[x-placement^='right'] .arrow {
        left: 0;
        width: var(--arrow-height);
        height: var(--arrow-width);
    }

        .bs-tooltip-right .arrow::before,
        .bs-tooltip-auto[x-placement^='right'] .arrow::before {
            right: -1px;
            border-width: var(--arrow-height) var(--arrow-height) var(--arrow-height) 0;
            border-right-color: var(--color-white);
        }

        .bs-tooltip-right .arrow::after,
        .bs-tooltip-auto[x-placement^='right'] .arrow::after {
            border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-height);
            top: var(--arrow-height-shadow);
            left: var(--arrow-width-shadow);
        }

/***************************  */

/* Bottom */
.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^='bottom'] {
    padding: var(--arrow-height) 0;
}

    .bs-tooltip-bottom .arrow,
    .bs-tooltip-auto[x-placement^='bottom'] .arrow {
        top: 0;
    }

        .bs-tooltip-bottom .arrow::before,
        .bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
            bottom: -1px;
            border-width: 0 var(--arrow-height) var(--arrow-height);
            border-bottom-color: var(--color-white);
        }

        .bs-tooltip-bottom .arrow::after,
        .bs-tooltip-auto[x-placement^='bottom'] .arrow::after {
            border-width: 0 var(--arrow-height) var(--arrow-height);
            top: var(--arrow-width-shadow);
            right: var(--arrow-height-shadow);
        }

/* Left */
.bs-tooltip-left,
.bs-tooltip-auto[x-placement^='left'] {
    padding: 0 var(--arrow-height);
}

    .bs-tooltip-left .arrow,
    .bs-tooltip-auto[x-placement^='left'] .arrow {
        right: 1px;
        width: var(--arrow-height);
        height: var(--arrow-width);
    }

        .bs-tooltip-left .arrow::before,
        .bs-tooltip-auto[x-placement^='left'] .arrow::before {
            left: 0;
            border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-height);
            border-left-color: var(--color-white);
        }

        .bs-tooltip-left .arrow::after,
        .bs-tooltip-auto[x-placement^='left'] .arrow::after {
            border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-height);
            bottom: var(--arrow-height-shadow);
            right: var(--arrow-width-shadow);
        }

/* Inner */
.tooltip-inner {
    max-width: 300px;
    padding: 25px;
    color: var(--color-secondary);
    text-align: left;
    background-color: var(--color-white);
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    border: 1px solid rgb(234, 234, 234);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 22px;
    color: var(--color-secondary-3);
}

    /* RTE content */
    .tooltip-inner h1,
    .tooltip-inner h2,
    .tooltip-inner h3,
    .tooltip-inner h4,
    .tooltip-inner h5,
    .tooltip-inner h6 {
        font-size: 18px;
        line-height: 24px;
        color: var(--color-secondary);
        margin: 0;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .tooltip-inner p:last-child {
        margin-bottom: 0;
    }

    .tooltip-inner ol,
    .tooltip-inner ul {
        --list-padding: 5px;
        --paragraph-spacing: 15px;
    }