:root {
    --opacity: 1;
    --min-annotation-opacity: 1;
  }

.custom-tooltip {
  position: absolute;
  background: rgba(59, 72, 80, 0.9);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 210px;
  z-index: 9999;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  pointer-events: none;
  transform: translateX(-50%);
}

  /* 
    You want a simple and fancy tooltip?
    Just copy all [data-tooltip] blocks:
  */
  .annotationBtn {
    cursor: default;
    width: 40px;
    height: 40px;
    margin-left: -14px;
    margin-top: -14px;
    border-radius: 20px;
    background-color: rgba(64, 64, 64, 0.75);
    color: white;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid rgb(255, 255, 255, 0.75);
  }

  .annotationBtn:hover, 
  .annotationBtn.active {
    cursor: pointer;
    color: rgb(185, 163, 66);
    border: 2px solid rgb(185, 163, 66);
  }

  /* Positioning and visibility settings of the tooltip */
  .annotationBtn:before,
  .annotationBtn:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    margin-left: -7px;
    bottom: calc(100% + 5px); /* 5px is the size of the arrow */
    pointer-events: none;
    transition: 0.2s;
    will-change: transform;
  }

  /* The actual tooltip with a dynamic width */
  .annotationBtn:before {
    content: attr(data-tooltip);
    padding: 10px 18px;
    min-width: 50px;
    max-width: 300px;
    width: max-content;
    width: -moz-max-content;
    border-radius: 6px;
    font-size: 14px;
    background-color: rgba(59, 72, 80, 0.9);
    background-image: linear-gradient(30deg,
      rgba(59, 72, 80, 0.44),
      rgba(59, 68, 75, 0.44),
      rgba(60, 82, 88, 0.44));
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: left;
    white-space: pre-wrap;
    transform: translate(-50%, -5px) scale(0.5);
  }

  /* Tooltip arrow */
  .annotationBtn:after {
    content: '';
    border-style: solid;
    border-width: 5px 5px 0px 5px; /* CSS triangle */
    border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
    transition-duration: 0s; /* If the mouse leaves the element, 
                                the transition effects for the 
                                tooltip arrow are "turned off" */
    transform-origin: top;   /* Orientation setting for the
                                slide-down effect */
    transform: translateX(-50%) scaleY(0);
  }

  /* Tooltip becomes visible at hover */
  .annotationBtn:hover:before,
  .annotationBtn:hover:after,
  .annotationBtn.active:before,
  .annotationBtn.active:after {
    visibility: visible;
    opacity: var(--opacity);
  }
  /* Scales from 0.5 to 1 -> grow effect */
  .annotationBtn:hover:before,
  .annotationBtn.active:before {
    transition-delay: 0.3s;
    transform: translate(-50%, -5px) scale(1);
    z-index: 9999;
  }
  /* 
    Arrow slide down effect only on mouseenter (NOT on mouseleave)
  */
  .annotationBtn:hover:after,
  .annotationBtn.active:after {
    transition-delay: 0.5s; /* Starting after the grow effect */
    transition-duration: 0.2s;
    transform: translateX(-50%) scaleY(1);
  }
  /*
    That's it for the basic tooltip.

    If you want some adjustability
    here are some orientation settings you can use:
  */

  /* LEFT */
  /* Tooltip + arrow */
  .annotationBtn[data-tooltip-location="left"]:before,
  .annotationBtn[data-tooltip-location="left"]:after {
    left: auto;
    right: calc(100% + 19px);
    bottom: 50%;
  }

  /* Tooltip */
  .annotationBtn[data-tooltip-location="left"]:before {
    transform: translate(-5px, 50%) scale(0.5);
  }
  .annotationBtn[data-tooltip-location="left"]:hover:before,
  .annotationBtn[data-tooltip-location="left"].active:before {
    transform: translate(-5px, 50%) scale(1);
  }

  /* Arrow */
  .annotationBtn[data-tooltip-location="left"]:after {
    border-width: 5px 0px 5px 5px;
    border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
    transform-origin: left;
    transform: translateY(50%) scaleX(0);
  }
  .annotationBtn[data-tooltip-location="left"]:hover:after {
    transform: translateY(50%) scaleX(1);
  }

  /* RIGHT */
  .annotationBtn[data-tooltip-location="right"]:before,
  .annotationBtn[data-tooltip-location="right"]:after {
    left: calc(100% + 12px);
    bottom: 50%;
  }

  .annotationBtn[data-tooltip-location="right"]:before {
    transform: translate(5px, 50%) scale(0.5);
  }
  .annotationBtn[data-tooltip-location="right"]:hover:before,
  .annotationBtn[data-tooltip-location="right"].active:before {
    transform: translate(5px, 50%) scale(1);
  }

  .annotationBtn[data-tooltip-location="right"]:after {
    border-width: 5px 5px 5px 0px;
    border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0);
  }
  .annotationBtn[data-tooltip-location="right"]:hover:after {
    transform: translateY(50%) scaleX(1);
  }

  /* BOTTOM */
  .annotationBtn[data-tooltip-location="bottom"]:before,
  .annotationBtn[data-tooltip-location="bottom"]:after {
    top: calc(100% + 5px);
    bottom: auto;
  }

  .annotationBtn[data-tooltip-location="bottom"]:before {
    transform: translate(-50%, 5px) scale(0.5);
  }
  .annotationBtn[data-tooltip-location="bottom"]:hover:before,
  .annotationBtn[data-tooltip-location="bottom"].active:before {
    transform: translate(-50%, 5px) scale(1);
  }

  .annotationBtn[data-tooltip-location="bottom"]:after {
    border-width: 0px 5px 5px 5px;
    border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
    transform-origin: bottom;
  }
    
  button[slot="annotation-default"]:not([data-visible]) {
    background-color: transparent;
  }

  :not(:defined) > * {
    display: none;
  }