.inline-tooltips {
    position: relative;
    cursor: pointer;
    text-decoration: underline dotted;
    display: inline-block;
}

.inline-tooltips::after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    margin-left: 2px;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="%2300adf1" fill-rule="evenodd" d="M58.7,32c0,14.7-11.9,26.7-26.7,26.7S5.3,46.7,5.3,32,17.3,5.3,32,5.3s26.7,11.9,26.7,26.7ZM32,47.3c1.1,0,2-.9,2-2v-16c0-1.1-.9-2-2-2s-2,.9-2,2v16c0,1.1.9,2,2,2ZM32,18.7c1.5,0,2.7,1.2,2.7,2.7s-1.2,2.7-2.7,2.7-2.7-1.2-2.7-2.7,1.2-2.7,2.7-2.7Z"/></svg>'); 
   background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    transition: opacity 0.2s ease-in-out;
}

.inline-tooltips:hover::after {
    opacity: 0.8;
}

/* Tooltip popup container - dynamically created by JavaScript */
.inline-tooltips-popup {
    position: absolute;
    background-color: #FFFFFF;
    color: rgb(70, 70, 74);
    padding: 15px;
    border-radius: 8px;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 10;
    min-width: 350px;
    min-height: 80px;
      white-space: normal; /* allows text wrapping */
    word-wrap: break-word;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
}



/* Tooltip content styling - supports HTML formatting */
.inline-tooltips-popup-content {
    line-height: 1.6;
    width: 100%;
    font-size: 13px;
}

.inline-tooltips-popup-content strong {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.87);
}

.inline-tooltips-popup-content em {
    font-style: italic;
    color: rgba(0, 0, 0, 0.75);
}

.inline-tooltips-popup-content code {
    background-color: #F3F3F3;
    color: #D63384;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85em;
    border: 1px solid #E8E8E8;
}

.inline-tooltips-popup-content a {
    color: #0073AA;
    text-decoration: underline;
    font-weight: 500;
}

.inline-tooltips-popup-content a:hover {
    color: #004C7A;
}

.inline-tooltips-popup-content p {
    margin: 8px 0;
}

.inline-tooltips-popup-content p:first-child {
    margin-top: 0;
}

.inline-tooltips-popup-content p:last-child {
    margin-bottom: 0;
}

/* Position modifiers */
.inline-tooltips-popup.top {
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.inline-tooltips-popup.bottom {
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.inline-tooltips-popup.left {
    right: 125%;
    top: 50%;
    transform: translateY(-50%);
}

.inline-tooltips-popup.right {
    left: 125%;
    top: 50%;
    transform: translateY(-50%);
}

/* Show tooltip on hover */
.inline-tooltips:hover .inline-tooltips-popup {
    opacity: 1;
    visibility: visible;
}