.pp-inline-tooltip {
    position: relative;
    display: inline-block;
    padding-right: 1.5em;
    /* text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.15em; */
    cursor: help;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39366 5.33366C5.55039 4.8881 5.85976 4.5124 6.26696 4.27308C6.67416 4.03376 7.15292 3.94628 7.61844 4.02613C8.08396 4.10598 8.5062 4.34801 8.81038 4.70934C9.11455 5.07068 9.28103 5.52801 9.28033 6.00033C9.28033 7.33366 7.28033 8.00033 7.28033 8.00033M7.33366 10.667H7.34033M14.0003 7.33366C14.0003 11.0156 11.0156 14.0003 7.33366 14.0003C3.65176 14.0003 0.666992 11.0156 0.666992 7.33366C0.666992 3.65176 3.65176 0.666992 7.33366 0.666992C11.0156 0.666992 14.0003 3.65176 14.0003 7.33366Z' stroke='%23A4A7AE' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: right 0.1em center;
}

.pp-inline-tooltip[data-tooltip]:hover::after,
.pp-inline-tooltip[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    max-width: 260px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    z-index: 1000;
    pointer-events: none;
}

.pp-inline-tooltip[data-tooltip]:hover::before,
.pp-inline-tooltip[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #111111;
    z-index: 999;
    pointer-events: none;
}