.custom-tooltip {
  position: relative;
  cursor: help;
}

.custom-tooltip::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: 0%; 
  left: 106%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.email::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: 0%; 
  left: 76%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.diagnost::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: 0%; 
  left:123%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.practice::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: 0%; 
  left:124%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.module::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: 0%; 
  left:-54%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.check::after {
  content: attr(data-tooltip)!important;
  position: absolute;
  bottom: -11%; 
  left: -51%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.custom-tooltip:hover::after {
  opacity: 1;
}