.board__user_board {
  display: grid;
  grid-template-columns: auto min-content;
}

.user_board__post_its {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.user_board__number,
.user_board__note_average {
  font-size: 1.5rem;
  font-weight: bold;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}

.user_board__number {
  font-size: xxx-large !important;
}

.user_board__note_average {
  font-size: 7rem !important;
}


.range-field {
  width: 100%;
  max-width: 320px;
}


.user_board__note_range {
  --track-h: 20px;
  --thumb-w: 2px;
  --thumb-h: 2px;
  --track: rgba(255, 255, 255, 0.1);
  --thumb: #fff;

  width: 100%;
  margin: 0;
  padding: 0 2rem;
  box-sizing: border-box;
  appearance: none;
  background: transparent;
  cursor: pointer;

}


.user_board__note_range::-webkit-slider-runnable-track {
  height: var(--track-h);
  background: var(--track);
  border-radius: 999px;
}

.user_board__note_range::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-w);
  height: var(--thumb-h);
  background: var(--thumb);
  border-radius: 1px;
  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2);
}


.user_board__note_range::-moz-range-track {
  height: var(--track-h);
  background: var(--track);
  border-radius: 999px;
}

.user_board__note_range::-moz-range-thumb {
  width: var(--thumb-w);
  height: var(--thumb-h);
  background: var(--thumb);
  border-radius: 1px;
  border: none;
}

.user_board__note {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.user_board__note_range:focus-visible {
  outline: none;
}
.user_board__note_range:focus-visible::-webkit-slider-thumb,
.user_board__note_range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
}


.user_board__note_legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 0.4rem;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  user-select: none;
  height: 1.5rem;
}
.user_board__note_legend span {
font-size: large;
transition: transform 50ms ease, color 50ms ease, font-size 50ms ease;
}
.user_board__note_legend span.active {
  color: white;
  font-size: xx-large;
  transform: translateY(-0.5rem);
}