.inline-bar-female {
  display: inline-block;
  width: 1.5em;         /* bredden på stolpen */
  height: 0.8em;        /* høyden på stolpen */
  background-color: #5D3A9B; /* fargen du ønsket */
  border-radius: 2px;   /* litt avrunding for penere utseende */
  vertical-align: -0.1em; /* juster vertikalt ift. tekstlinjen */
  margin: 0 .1em;       /* lite mellomrom mot teksten */
}

/* Smal numerisk input, ~5 tegn bredde */
.num-5 {
  width: 7ch;
  text-align: right;
}
/* Ikoner (valgfritt) */
.checkmark, .crossmark {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -0.2em;
  margin-right: 0.35rem;
  animation: pop 180ms ease-out both;
}
.checkmark circle, .checkmark path, .crossmark path {
  fill: none;
  stroke-width: 2;
}
.checkmark circle, .checkmark path { stroke: #198754; }  /* success */
.crossmark path { stroke: #dc3545; }                     /* danger */
.checkmark circle {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: draw 600ms ease-out forwards;
}
.checkmark path {
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: draw 400ms 200ms ease-out forwards;
}
.crossmark path {
  stroke-linecap: round;
  stroke-dasharray: 18; stroke-dashoffset: 18;
  animation: draw 300ms ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .checkmark, .crossmark,
  .checkmark circle, .checkmark path, .crossmark path {
    animation: none !important;
  }
  .checkmark circle, .checkmark path, .crossmark path {
    stroke-dashoffset: 0 !important;
  }
}