div.tooltip-wrapper {
position: relative;
display: inline;
}

input.tooltip-checkbox {
display: none;
}

label.tooltip-label {
cursor: pointer;
display: inline-block;
color: #56a0e3;
-webkit-user-select: none;
user-select: none;
font-size: 90%;
}

label.tooltip-label:hover {
text-decoration: underline;
}

label.tooltip-label:active {
color: #ef3d45;
}

label.tooltip-label.highlight {
color: #fff;
background-color: #56a0e3;
}

span.tooltip {
display: none;
position: absolute;
width: max-content;
max-width: 30em;
margin: 2.2em 0 0 -1.2em;
padding: 3px 0.8em;
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
text-align: start;
background: #f3f3f3;
z-index: 2;
}

span.tooltip:before {
content: "";
display: block;
position: absolute;
top: -7px;
left: 1.5em;
z-index: -1;
width: 10px;
height: 10px;
background: #f3f3f3;
border: 1px solid rgba(0,0,0,0.1);
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
box-shadow: inset 1px 1px 0 #fff;
}

input.tooltip-checkbox:checked + span.tooltip {
display: inline-block;
}

span.tooltip.reverse {
left: auto;
right: -1.2em;
}

span.tooltip.reverse:before {
left: auto;
right: 1.5em;
}

span.corr-wrapper {
margin-right: 0.4em;
user-select: none;
}

span.corr-wrapper a {
display: inline-block;
}

span.corr-wrapper a.corr {
vertical-align: super;
margin-left: 0.3em;
font-size: 90%;
font-style: italic;
}