.nouislider-box {
  display: flex;
  flex-direction: column;
  .nouislider-box__body {
    --spacing: 8px;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
  }
}

.nouislider-data {
  display: flex;
  justify-content: space-between;
  margin-left: -8px;
  margin-right: -8px;
  .form-group {
    margin-bottom: 0;
  }
  .input-xs {
    width: 100px;
    height: 24px;
    padding: 8px 4px 5px 4px;
  }
}

.nouislider-custom {
  height: 4px;
  box-shadow: none;
  border: 0;
  background-color: #e1e1e1;
  .noUi-value {
    font-family: "Avenir Book";
    color: inherit;
    font-size: 12px;
    line-height: 1em;
  }

  .noUi-handle:after,
  .noUi-handle:before {
    display: none;
  }

  .noUi-base {
    z-index: inherit;
  }

  .noUi-connect {
    background-color: var(--light-green);
  }

  .noUi-handle {
    width: 16px;
    height: 16px;
    right: -8px;
    top: -6px;
    border-radius: 10em;
    background-color: var(--light-green);
    box-shadow: none;
    border: 0;
    cursor: pointer;
  }

  .noUi-value-horizontal {
    transform: translate(-50%, 0%);
  }

  .noUi-pips-horizontal {
    display: flex;
    height: auto;
    color: inherit;
    .noUi-marker-horizontal.noUi-marker {
      color: inherit;
      width: 1px;
      height: 4px;
      margin-top: -14px;
      background-color: white;
    }

    .noUi-marker-large {
      display: none;
    }
  }
}

.nouislider-custom--center {
  .noUi-pips-horizontal {
    .noUi-marker-large,
    .noUi-value-large:last-child {
      display: none;
    }

    .noUi-value {
      position: static;
      flex: 1;
      transform: translateX(0%);
    }
  }
}

//new nouislider out style
.carat-weight-noUiSlider {
  .noUi-tooltip {
    bottom: auto;
    top: 120%;
    border: 0;
  }
}

//nouislider-custom for carat
.nouislider-custom--carat {
  border-radius: 0;
  background: var(--light-green);
  .noUi-connects {
    border-radius: 0;
  }
  .noUi-handle {
    width: 20px;
    height: 20px;
    right: -10px;
    top: -8px;
  }
}
.modal-slider-tooltip .tooltip {
  display: block;
  opacity: 1;
  position: relative;
  padding: 10px 0 0;
}

.modal-slider-tooltip .tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--light-green);
  border-width: 0 10px 10px;
  margin-left: -10px;
}

.modal-slider-tooltip .tooltip-inner {
  max-width: 100%;
  text-align: left;
  background-color: var(--light-green);
  clear: both;
  padding: 0.5em 1em;
  color: white;
  font-size: 13px;
  border-radius: 0;
  p {
    font-size: 14px;
  }
}