/*tooltip*/
.tooltip {
  background: #222;
  color: white;
  font-size: 10px; /* Mobile default */
  border-radius: 2px;
  padding: 4px 8px;
  max-width: 200px;
  width: max-content;
  z-index: 100;
}

@media screen and (min-width: 768px) {
  .tooltip {
    font-size: 12px; /* Desktop size */
  }
}

/*tooltip arrow*/
.tooltip-arrow,
.tooltip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.tooltip-arrow {
  visibility: hidden;
}

.tooltip-arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
    bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
    top: -4px;
}

.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
    right: -4px;
}

.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
    left: -4px;
}