/*****************************************
     P O P U P   B O X   O N   H O V E R
     (replaces the old overLIB library)

     <span class='popup' tabindex='0'>Title
       <span class='popup-box'>
         <strong class='popup-caption'>Caption</strong>
         ... content ...
       </span>
     </span>
******************************************/

.popup {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted black;   /* hint that there is more to see */
}

.popup-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 4px;
    padding: 6px 10px;
    background: #ffffcc;
    color: black;
    border: 1px solid #888;
    border-radius: 6px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    text-align: left;
    font-weight: normal;
    font-size: 13px;
    white-space: normal;
    width: max-content;
    max-width: 600px;
    max-height: 70vh;                  /* long texts scroll inside the box */
    overflow: auto;
}

/* Shown when hovering, and when focused (keyboard, or a tap on touch screens) */
.popup:hover .popup-box,
.popup:focus .popup-box,
.popup:focus-within .popup-box {
    display: block;
}

/* Headers aligned to the right open the box towards the left */
th[style*='right'] .popup-box {
    left: auto;
    right: 0;
}

.popup-caption {
    display: block;
    margin-bottom: 4px;
}

.popup-box pre {
    margin: 0;
    font-size: 12px;
}