/* Dette er egentlig det eneste som skal til */


/* Tving hele Ion.RangeSlider til å følge containerens bredde */
.irs, .irs-line, .irs-bar, .irs-slider, .irs-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobil-spesifikk fiks */
@media (max-width: 600px) {

  /* Skaler ned etikettene under slideren */
  .irs-grid-text {
    font-size: 0.75rem !important;
    white-space: normal !important;   /* gjør at de kan bryte linje */
    line-height: 1.1;
  }

  /* Hindrer at grid-linjene utvider hele komponenten */
  .irs-grid-pol {
    max-width: 100% !important;
  }

  /* Sørger for at selve slider-boksen ikke trekker seg større enn skjermen */
  .irs-with-grid {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}


.scale-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #666;
    padding: 0 4px;   /* litt luft, juster om ønskelig */
}

.scale-labels span {
    text-align: center;
    flex: 1;               /* alle får lik bredde */
}

/* på mobil: litt mindre font, men samme logikk */
@media (max-width: 600px) {
    .scale-labels {
        font-size: 0.8em;
        margin-bottom: 8px;
    }
}

/* Venstre */
.scale-labels span:first-child {
  text-align: left;
}

/* Høyre */
.scale-labels span:last-child {
  text-align: right;
}