.hover-tip{position:relative;color:#007cba;cursor:help;border-bottom:1px dotted #007cba;font-weight:500;outline:none}.hover-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:20px 24px;border-radius:10px;font-size:18px;line-height:1.5;white-space:normal;overflow-wrap:break-word;width:max-content;max-width:min(90vw,400px);box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:9999;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;text-align:left}.hover-tip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#333;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.hover-tip:hover::after,.hover-tip:hover::before,.hover-tip:focus::after,.hover-tip:focus::before{opacity:1;visibility:visible}@media (max-width:768px){.hover-tip::after{top:calc(100% + 10px);bottom:auto}.hover-tip::before{top:100%;bottom:auto;border-top-color:transparent;border-bottom-color:#333}}