.tooltip {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  position: relative !important;
}
.tooltip:hover .tooltip-drop {
  opacity: 1;
}
.tooltip:hover .tooltip-drop.tooltip-top, .tooltip:hover .tooltip-drop.tooltip-bottom {
  transform: translate(-50%, 0);
}
.tooltip:hover .tooltip-drop.tooltip-left, .tooltip:hover .tooltip-drop.tooltip-right {
  transform: translate(0, -50%);
}
.tooltip .tooltip-drop {
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  opacity: 0;
  padding: 0.75rem 0.875rem;
  background-color: #000;
  font-size: 0.875rem;
  text-align: left;
  z-index: 1;
  transition: all 0.15s ease-in-out;
  border-radius: 0.188rem;
  color: #fff;
  pointer-events: none;
}
.tooltip .tooltip-drop::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0.375rem solid transparent;
  border-top-color: #000;
}
.tooltip .tooltip-drop.tooltip-left, .tooltip .tooltip-drop.tooltip-right {
  top: 50%;
}
.tooltip .tooltip-drop.tooltip-left:before, .tooltip .tooltip-drop.tooltip-right:before {
  top: 50%;
}
.tooltip .tooltip-drop.tooltip-left {
  right: calc(100% + 0.625rem);
  transform: translate(-0.25rem, -50%);
}
.tooltip .tooltip-drop.tooltip-left:before {
  left: 100%;
  transform: translate(0, -50%) rotate(-90deg);
}
.tooltip .tooltip-drop.tooltip-right {
  left: calc(100% + 0.625rem);
  transform: translate(0.25rem, -50%);
}
.tooltip .tooltip-drop.tooltip-right:before {
  right: 100%;
  transform: translate(0, -50%) rotate(90deg);
}
.tooltip .tooltip-drop.tooltip-top, .tooltip .tooltip-drop.tooltip-bottom {
  left: 50%;
  transform: translate(-50%, 0.625rem);
}
.tooltip .tooltip-drop.tooltip-top:before, .tooltip .tooltip-drop.tooltip-bottom:before {
  left: 50%;
}
.tooltip .tooltip-drop.tooltip-top {
  bottom: calc(100% + 0.625rem);
}
.tooltip .tooltip-drop.tooltip-top:before {
  top: 100%;
  transform: translate(-50%, 0);
}
.tooltip .tooltip-drop.tooltip-bottom {
  top: calc(100% + 0.625rem);
}
.tooltip .tooltip-drop.tooltip-bottom:before {
  bottom: 100%;
  transform: translate(-50%, 0) rotate(180deg);
}