.helptext-wrapper { position: relative; display: inline-flex; align-items: center; } /* Green dot icon — matches reference HTML */ .info-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #ecf6e3; color: #4f8a24; box-shadow: 0 1px 4px rgba(95,168,50,.35); font-size: 10px; font-weight: 800; flex: 0 0 auto; cursor: pointer; } /* Tooltip box */ .sw-tooltip { position: absolute; background: linear-gradient(120deg, #5fa832, #2f8fb0); color: #fff; padding: 14px 16px; border-radius: 10px; font-size: 13px; font-weight: 400; line-height: 1.6; width: 300px; top: -8px; left: calc(100% + 10px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; text-align: justify; white-space: normal; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.2); } /* Arrow pointing left toward icon */ .sw-tooltip::before { content: ""; position: absolute; top: 14px; left: -12px; border-width: 6px; border-style: solid; border-color: transparent #5fa832 transparent transparent; } /* Show tooltip on hover */ .helptext-wrapper:hover .sw-tooltip { opacity: 1; visibility: visible; } /* Link styling */ .slds-text-link { /* color: #ff4d4d; */ color: black; text-decoration: none; font-weight: 600; display: inline; margin-left: 4px; } .slds-text-link:hover { /* color: #ff4d4d; */ color: black; text-decoration: underline; }