/* Tooltip title text */
.lp-tooltip__title {
  display: flex;
  align-items: center;
  max-width: 75%;
  margin-bottom: 3em;
}

.lp-tooltip__title p {
  margin: 0;
  font-size: 14px;
  font-weight: 100;
  color: #6a6e73;
}

/* Tooltip icon container */
.lp-tooltip__icon {
  display: flex;
}

/* Tooltip icon */
.lp-tooltip__icon svg {
  width: 18px;
  margin-left: 7px;
  vertical-align: middle;
  fill: #2b9af3;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]::before,
[data-tooltip]::after {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* Position tooltip above the element */
[data-tooltip]::before {
  position: absolute;
  top: 50%;
  left: 3.5em;
  min-width: 20em;
  padding: 1em;
  margin-bottom: 0;
  margin-left: 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  content: attr(data-tooltip);
  background-color: #000;
  transform: translateY(-50%);
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]::after {
  position: absolute;
  top: 50%;
  left: 0.5em;
  width: 0;
  margin-left: 1.7em;
  line-height: 0;
  content: " ";
  border-top: 1em solid transparent;
  border-right: 1em solid #000;
  border-bottom: 1em solid transparent;
  transform: translateY(-50%);
}

/* Show tooltip content on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  [data-tooltip]::after {
    top: 1em;
    margin-left: 0;
    transform: rotate(90deg);
  }
  [data-tooltip]::before {
    top: 5.2em;
    right: -2em;
    left: initial;
  }
}

/*# sourceMappingURL=learning-path-page-tooltip.css.map */