:root {
     --tooltip-back:#114779;
     --tooltip-color: #ffffff;
     --tooltip-border: 1px solid transparent;
     --tooltip-border-color: transparent;
     --tooltip-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.sr-tooltip {
     position: absolute;
     left: 0;
     top: 0;     

     padding: 2px 8px;
     font-size: 14px;
     line-height: 20px;
     
     width: auto;
     min-width: 100px;
     max-width: 300px;
     
     height: auto;
     min-height: 20px;

     text-align: center;
     background: var(--tooltip-back);
     color: var(--tooltip-color);
     border: 0;
     border-radius: 2px;
     box-shadow: var(--tooltip-shadow);
     z-index: 9999; 
     pointer-events:none;
     transition:opacity 0.3 ease-in-out
}
.sr-tooltip.sr-tooltip-left {
     transform: Translate(-100%, -50%);
}
.sr-tooltip.sr-tooltip-right {
     transform: Translate(0, -50%);
}
.sr-tooltip.sr-hide {display:none;}

@media print {
     .sr-tooltip {
          display: none;
          visibility: hidden;
          width: 0;
          height: 0;
          margin: 0;
          padding: 0;
          opacity:0;
     }
}