@media (pointer: coarse) {
 abbr[title], acronym[title] {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
 }

 acronym[title]:hover::after,
 acronym[title]:focus::after,
 abbr[title]:hover::after,
 abbr[title]:focus::after {
  content: attr(title);
  position: absolute;
  left: 0;
  bottom: -30px;
  width: auto;
  white-space: nowrap;

  background-color: #cccccc;
  color: #000000;
  border-radius: 10px;
  padding: 0px;
 }
}

@media not print {
/* Tooltip container */
 .tooltip {
  position: relative;
  border-bottom: 1px dashed black;
  /* display: inline-block; */
 }

/* Tooltip text */
 .tooltip .tooltiptext {
   visibility: hidden;
   min-width: 375px;
   max-width: 875px;
   background-color: black;
   color: #fff;
   text-align: left;
   padding: 5px;
   border-radius: 6px;
   line-height:1.2;

   z-index: 1;
  
   /* Position the tooltip text */
   position: absolute; 
   left: 50px; 
   /* bottom: 100%; */

   white-space: pre-line;
 }
}

@media print
{
 .tooltip {
 }

 .tooltiptext {
   color: #999; !important;
  -webkit-print-color-adjust: exact;
   color-adjust: exact;
 }
 .tooltiptext::before {
   content: " [";
 }
 .tooltiptext::after {
   content: "]";
 }
 .noprint {
   content: "";
   visibility: hidden;
   position: absolute;
   z-index: 1;
 }
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}