.range-slider-tooltip {
  display: none;
  position: absolute;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 4px;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04),
    0px 8px 24px -2px rgba(0, 0, 0, 0.08);
  border: 0.5px solid  #d3d3d3;
  gap: 10px;
}

.item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.item-tooltip {
  width: max-content;
  display: none;
  position: absolute;
  background: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  transform: translateX(-50%);
  font-size: 14px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04),
    0px 8px 24px -2px rgba(0, 0, 0, 0.08);
  z-index: 100;
  margin-right: 70px;
  color: var(--color-grey-900);
  text-align: center;
  font-family: Satoshi;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
}

.item-tooltip::after,
.item-tooltip-paraphrase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}
.feature-items-1 span {
  width: fit-content;
}

.item:hover .item-tooltip {
  display: flex;
}

.item-tooltip-paraphrase {
  width: max-content;
  display: none;
  position: absolute;
  background: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  transform: translateX(-115%);
  font-size: 14px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04),
    0px 8px 24px -2px rgba(0, 0, 0, 0.08);
  z-index: 100;
  color: var(--color-grey-900);
  text-align: center;
  font-family: Satoshi;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
}

.tooltip-paraphrase:hover .item-tooltip-paraphrase {
  display: flex;
}

.download-tooltip-paraphrase {
  transform: translateX(-85%);
}

.copy-tooltip-paraphrase {
  transform: translateX(-0%);
  top: -30px;
}

@media (max-width: 990px) {
  .copy-tooltip-paraphrase {
    display: none !important;
  }
    .range-slider-container:hover .range-slider-tooltip {
      display: flex;
      flex-direction: row;
    }
  
    .range-slider-tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
      border-width: 8px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04),
        0px 8px 24px -2px rgba(0, 0, 0, 0.08);
    }
  
    .slider-tooltip-left,
    .slider-tooltip-right {
      gap: 3px;
    }
  
    .slider-tooltip-left h3,
    .slider-tooltip-right h3 {
      color: var(--color-grey-900);
      text-align: center;
      font-family: Satoshi;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 150%;
      margin: 0px;
    }
  
    .slider-tooltip-left p,
    .slider-tooltip-right p {
      color: var(--color-gray-900);
      font-family: Satoshi;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      margin: 0px;
    }
}

.copy-tooltip-paraphrase::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent; /* Top border is arrow color, others transparent */
  box-shadow: none;
}

.fluency-tooltips {
  width: 250px;
  position: absolute;
  transform: translateX(12%);
  top: 22%;
}

.fluency-tooltips::after {
    content: "";
    position: absolute;
    top: 60%;
    left: -6%;
    margin-top: -8px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    box-shadow: none;
}

.difference-tooltips {
    width: 250px;
    position: absolute;
    transform: translateX(10%);
    top: 64.6%;
}

.difference-tooltips::after{
  content: "";
  position: absolute;
  top: 60%;
  left: -6%;
  margin-top: -8px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  box-shadow: none;
}


.tooltip-custom {
  display: none;
  width: 250px;
  position: fixed;
  background: #fff;
  color: #000;
  padding: 2px 12px;
  border-radius: 8px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(108, 43, 215, 0.08);
  text-align: center;
  font-family: Satoshi;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
}

.tooltip-custom::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff; /* Arrow color matches tooltip */
}

#wordCounter:hover .item-tooltip-paraphrase {
  display: flex;
  background: black;
}

#wordTooltip{
  top: 93%;
}

.up-tooltip-paraphrase {
  transform: translateX(-0%);
  top: 88.5%;
  right: 38%;
}

.down-tooltip-paraphrase {
  transform: translateX(-0%);
  top: 88.5%;
  right: 41.7%;
}
.up-tooltip-paraphrase::after, .down-tooltip-paraphrase::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent; /* Top border is arrow color, others transparent */
  box-shadow: none;
}

#tooltipCustomFluency{
    /* left: 96%;
    top: 57.3%; */
}
#tooltipCustomDifference{
    /* left: 76%;
    top: 57.5%; */
}

/* .tooltip-paraphrase:hover .tooltip-custom {
  display: flex;
} */

#tooltip-wrap[data-tooltip]::after {
  width: 250px;
}