/* 
  =============================
  ------    Tool Tips    ------ 
  ============================= 
*/

.tooltip {
  display:block;
  position: relative;
  max-width:fit-content;
  z-index: 100;
}

.tooltip i{
  padding: .4em;
  font-size: 1em;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-60%);
  position: relative;
}

.tooltip .tooltip_content{
  visibility: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-7.2em, 0.7em);
}

.tooltip_content{
  max-width: 480px;
  width: max-content;
  background:rgba(0,0,0,.9);
  border-radius:0.3em;
  padding:1em;
}

.tooltip:hover .tooltip_content{
  visibility:visible;
}

.tooltip .tooltip_content::before {
  content: " ";
  position: absolute;
 
  bottom: 100%; /* At the bottom of the tooltip */

  left:6.3em;

  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black  transparent;
}