.profile-image {
    border-radius: 50%; /* Circular profile image */
    cursor: pointer; /* Indicates it's clickable */
    border: 2px solid var(--profile-image-border); /* Adjusted border color */
    padding: 2px; /* Space between image and border */
    width: 40px;
    height: 40px;
}
@keyframes rotate-wait {
  0%, 50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-spin-wait {
  animation: rotate-wait 3s infinite;
  transform-origin: center 17px;
}
.hover-trigger:hover + .hover-target,
.hover-target:hover {
    display: block;
}

.profile-image {
    /* Add any specific styling for your profile image here */
}

.merge_tooltip {
  position: relative;
}

.merge_tooltip:hover::after {
  content: attr(tooltip);
  /* styles for the tooltip */
  background-color: #0f0f0f; /* adjust the background color */
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  white-space: pre; /* preserve newlines */
  font-size: 16px;
  padding: 1em;
  line-height: 1.2;
  transition: opacity 0.1s; /* adjust the delay to 0.1 seconds */
  opacity: 0;
  pointer-events: none; /* prevent click events from propagating */
  top: 100%; /* position the tooltip below the element */
  left: 0; /* align the tooltip with the left edge of the element */
  transform: translateY(10px); /* add some space between the element and the tooltip */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* add a subtle shadow */
  color: #BBB; /* adjust the text color */
}

.merge_tooltip:hover::after {
  opacity: 1;
}