.glossary-tooltip {
display: inline;
position: relative;
z-index: 999;
} .glossary-tooltip a,
.glossary-underline {
cursor: pointer;
display: inline-block;
font-weight: 700;
-webkit-transition: color 0.3s;
transition: color 0.3s;
color: #fff;
}
.glossary-tooltip .glossary-link a,
a.glossary-content-footnote {
color: #000;
}
.glossary-tooltip.glossary-external-link::after {
content: "";
display: inline-block;
margin-right: 5px;
width: 14px;
height: 16px;
background-size: 14px 16px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%221024%22%20width%3D%22768%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M640%20768H128V257.90599999999995L256%20256V128H0v768h768V576H640V768zM384%20128l128%20128L320%20448l128%20128%20192-192%20128%20128V128H384z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
mask-image: url("data:image/svg+xml,%3Csvg%20height%3D%221024%22%20width%3D%22768%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M640%20768H128V257.90599999999995L256%20256V128H0v768h768V576H640V768zM384%20128l128%20128L320%20448l128%20128%20192-192%20128%20128V128H384z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
-webkit-mask-size: cover;
mask-size: cover;
background: black;
}
.glossary-tooltip a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
-webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
transition: transform 0s 0.3s, opacity 0.2s;
}
.glossary-tooltip:hover a::before,
.glossary-tooltip:focus a::before,
.glossary-tooltip:active a::before {
opacity: 1;
position: absolute;
display: block !important;
visibility: visible !important;
top: unset;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.1s;
transition: transform 0.3s, opacity 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
} .glossary-tooltip-content {
position: absolute;
z-index: 9999;
width: 360px;
left: 50%;
margin: 0 0 20px -180px;
bottom: 60%;
text-align: left;
box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),
0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
background: #1d1c21;
opacity: 0;
cursor: default;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
display: none;
}
.glossary-tooltip:hover .glossary-tooltip-content,
.glossary-tooltip:focus .glossary-tooltip-content,
.glossary-tooltip:active .glossary-tooltip-content {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0), rotate3d(0, 0, 0, 0);
transform: translate3d(0, 0, 0), rotate3d(0, 0, 0, 0);
display: block;
} .glossary-tooltip-content::after {
content: "";
position: absolute;
bottom: -9px;
left: 50%;
width: 0;
height: 0px;
border-left: solid 8px transparent;
border-right: solid 8px transparent;
margin-left: -9px;
border-top: solid 9px #1d1c21;
} .glossary-tooltip-content img {
position: relative;
height: 150px;
display: block;
float: left;
margin-right: 1em;
}
.glossary-tooltip-text {
display: block;
padding: 1.1em 1em 1em 1.1em;
color: #fff;
}
.glossary-tooltip-text a {
font-weight: bold;
}
.glossary-underline {
text-decoration: underline;
}
.rtl .glossary-tooltip-content {
text-align: right;
}