.floating-ui-tooltip-root {
  --color: white;
  --border-color: #fefefe;
  --border-color: red;
  position: absolute;
  z-index: 9999;
  margin: 0;
  padding: 0px;
  box-shadow: 0 0 0 1px rgba(6,44,82,.1), 0 2px 16px rgba(33,43,54,.08);
  line-height: 0px;
  border-radius: 6px;
  backface-visibility: hidden;
  font-size: 90%;
  display: flex;
  max-width: calc(100vw - 10px);
  background: var(--color);
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
  0 4px 80px -8px rgba(36, 40, 47, 0.25),
  0 4px 4px -2px rgba(91, 94, 105, 0.15);

  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  transition-property: transform, visibility, opacity;
}

.floating-ui-tooltip-arrow {
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  height: 14px;
  width: 14px;
  box-shadow: 0 0 0 1px rgba(6,44,82,.1), 0 2px 16px rgba(33,43,54,.08);
  z-index: -1;
}

.floating-ui-tooltip-box {
  position: relative;
  border-radius: inherit;
  line-height: initial;
  margin: 0;
  outline: 0;
}

.floating-ui-tooltip-root[data-state='hidden'] {
  opacity: 0;
}

.floating-ui-tooltip-root[data-state='visible'] {
  opacity: 1;
}

.floating-ui-tooltip-content {
  position: relative;
  background-color: #fff;
  color: #111;
  border-radius: inherit;
  padding: 5px 7px;
  padding: 0;
  z-index: 2;
}

.floating-ui-tooltip-arrow, .floating-ui-tooltip-root {
  background: var(--color);
  /* border: 1px solid var(--border-color); */
}