/*  CSS para tooltip creado por css

    Estructura html:
    <div class="tooltip">
      <div class="tooltip-text bottom">
        <p>Texto Tooltip</p>
        <i></i> --> la flecha del tooltip
       </div>
     </div>
*/


.tooltip {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 4px;
  top: 2px;
  cursor: pointer;
  background: url('/assets/img/icons/30_Mas-informacion.svg') no-repeat left top;
  background-size: 20px 20px;
}
.tooltip-text,
.tooltip .tooltip-text i,
.tooltip .tooltip-text i::after{
  position: absolute;

}
.tooltip-text,
.tooltip .tooltip-text i::after {
  background-color: #fff;
}
.tooltip-text {
  font-family: "Lato", sans-serif;
  width: 360px;
  padding: 14px;
  top: 36px;
  left: 50%;
  transform: translate(-50%, 0);
  color: #333;
  z-index: 101;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s;
}
.tooltip-text p {
  margin-bottom: 8px;
}
.tooltip-text p:last-of-type {
  margin-bottom: 0;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.tooltip .tooltip-text i {
  bottom: 100%;
  left: 50%;
  margin-left: -12px;
  width: 24px;
  height: 12px;
  overflow: hidden;
}
.tooltip .tooltip-text i::after {
  content: '';
  width: 12px;
  height: 12px;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 460px) {
  .tooltip-text{
    width: 200px;
  }
}