.span_tooltip_icon {
  position: relative;
  display: inline;
  color: #898989;;
}

.span_tooltip_icon .span_tooltiptext{
  visibility: hidden;
  background-color: #FFFFFF;
  padding: 20% 50%;
  z-index: 10;
  color: black;
  font-size: 15px;
  font-weight: normal;

  position: absolute;
  text-align: left;

  border: 1px solid black;
  width: 250px;
}

.span_tooltip_icon:hover .span_tooltiptext {
  visibility: visible;
  opacity: 1;
  margin-left: -100px;
  bottom: 40px;
  z-index: 10;

}

.span_tooltip{
  margin: 1% 0px 1% 0px;
  z-index: 10;

}

@media only screen and (max-width: 995px){
  .span_tooltip{
    margin: 1% 0px 1% 0px;
  }
  .span_tooltip_icon .span_tooltiptext{
    padding: 5px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 720px){

  .span_tooltip{
    margin: 0px;
  }
  .span_tooltip_icon .span_tooltiptext{
    padding: 5px;
    font-size: 10px;
  }
}

@media only screen and (max-width: 580px){

  .span_tooltip_icon .span_tooltiptext{
    padding: 5px;
    font-size: 8px;
  }
  .span_tooltip_icon{
    font-size: 15px;
  }
}


@media only screen and (max-width: 455px){
  .span_tooltiptext{
    font-size: 10px;
  }
}