.scale-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scale-title {
  font-weight: 500;
  font-size: 14px;
  text-align: left;
}

.scale {
  display: flex;
  gap: 2px;
  margin-bottom: 5px;
  width: 100%;
  position: relative;
}

.scale div {
  width: calc(100% / 20);
  height: 30px;
}

/* Define colors for each step */
.color-1 {
  background-color: #000000;
}
.color-2 {
  background-color: #140d01;
}
.color-3 {
  background-color: #180f01;
}
.color-4 {
  background-color: #1b1101;
}
.color-5 {
  background-color: #1f1301;
}
.color-6 {
  background-color: #251702;
}
.color-7 {
  background-color: #2c1b03;
}
.color-8 {
  background-color: #331f04;
}
.color-9 {
  background-color: #3a2405;
}
.color-10 {
  background-color: #3d2606;
}
.color-11 {
  background-color: #4b2f09;
}
.color-12 {
  background-color: #5c3b0f;
}
.color-13 {
  background-color: #744d19;
}
.color-14 {
  background-color: #8d6126;
}
.color-15 {
  background-color: #ad7e3f;
}
.color-16 {
  background-color: #ce9e5d;
}
.color-17 {
  background-color: #e4bf7d;
}
.color-18 {
  background-color: #f3d89d;
}
.color-19 {
  background-color: #f1e2c0;
}
.color-20 {
  background-color: #f1ead9;
}

.labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.label {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  flex: 1;
}

/* .scale-selector-left {
  top: -3.5px;
  left: -3.5px;
}

.scale-selector-left,
.scale-selector-right {
  position: absolute;
  width: calc(100% / 20 * 3 + 7px) !important;
  height: calc(100% + 7px) !important;
  background-color: transparent !important;
  border: 2px solid var(--Grey-600);
  z-index: 1;
  box-shadow: 0px 0px 0px 3px white;
}

.scale-selector-right {
  top: -3.5px;
  right: -3.5px;
}
 */

.wrapper {
  box-shadow: 0px 0px 0px 3px white;
  position: absolute;
  height: calc(100% + 7px) !important;
  background-color: transparent !important;
  border: 2px solid var(--Grey-600);
  z-index: 1;
  top: -3.5px
}