abbr{
  cursor:help;
}

.tooltip{
  min-width:250px;
  color:#000000;
  font-size:0.875rem;
  line-height:1.4;
  background-color:#ffffff;
  border-radius:3px;
  position:absolute;
  z-index:100;
  padding:0.75rem;
  border:solid 2px #28A0FE;
  -webkit-filter:drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
          filter:drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}
@media print, screen and (min-width: 84.375rem){
  .tooltip{
    min-width:0;
    max-width:250px;
  }
}
.tooltip ul{
  margin-bottom:5px;
}
.tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(-12px - 2px);
  margin-left:-12px;
  width:0;
  height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid #28A0FE;
  -webkit-filter:drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
          filter:drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}
.tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  margin-left:-12px;
  width:0;
  height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid #ffffff;
}
.tooltip.top::before{
  border-top:none;
  border-bottom:13px solid #28A0FE;
  top:calc(-12px - 2px);
  bottom:auto;
  -webkit-filter:drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.15));
          filter:drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.15));
}
.tooltip.top::after{
  border-top:none;
  border-bottom:12px solid #ffffff;
  top:-12px;
  bottom:auto;
}

.tooltip.left:after{
  left:30px;
  margin:0;
}

.tooltip.right:after{
  right:30px;
  left:auto;
  margin:0;
}