/* Custom CSS Tooltip */

/* Default behaviour: appear under the element */
/* Optional: to change the position use an optional descriptor (top, right, left) */

/* Sample Usage 
<div class="custom-tooltip"><i class="material-icons text-info">info</i>
  <span class="custom-tooltip__text">TOOLTIP TEXT HERE</span>
</div> 
*/

.custom-tooltip {
  position: relative;
  display: inline-block;
}

.custom-tooltip .custom-tooltip__text {
  visibility: hidden;
  min-width: 20rem; /* Minimum width set to 20rem */
  max-width: 30rem; /* Maximum width set to 30rem */
  width: auto; /* Adjust width automatically between min-width and max-width */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  padding: 1rem;
  position: absolute;
  z-index: 999999;
  top: 150%;
  left: 50%;
  transform: translateX(-50%); /* Adjusted for dynamic width */
}

.custom-tooltip .custom-tooltip__text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.custom-tooltip:hover .custom-tooltip__text {
  visibility: visible;
}


/* Top Position */
.custom-tooltip.top .custom-tooltip__text {
  top: auto;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
}

.custom-tooltip.top .custom-tooltip__text::after {
  top: 100%;
  bottom: auto;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

/* Right Position */
.custom-tooltip.right .custom-tooltip__text {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.custom-tooltip.right .custom-tooltip__text::after {
  top: 50%;
  left: -5px; /* Adjusted to appear on the left side of the tooltip */
  margin-top: -5px;
  border-color: transparent black transparent transparent;
}

/* Left Position */
.custom-tooltip.left .custom-tooltip__text {
  top: 50%;
  right: 100%;
  left: auto;
  transform: translateY(-50%);
}

.custom-tooltip.left .custom-tooltip__text::after {
  top: 50%;
  right: -5px; /* Adjusted to appear on the right side of the tooltip */
  margin-top: -5px;
  border-color: transparent transparent transparent black;
}