@charset "UTF-8";
/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-autosuggest {
    --border-radius: var(--jkl-border-radius-s);
    --jkl-autosuggest-menu-padding: var(--jkl-unit-20) var(--jkl-unit-10) 0;
    --jkl-autosuggest-controller-button-width: auto;
    --jkl-autosuggest-controller-button-padding: 0 var(--jkl-unit-15);
    --jkl-autosuggest-controller-button-icon-size: 1.25rem;
    --jkl-autosuggest-option-padding: var(--jkl-unit-10) 0.75em;
    --jkl-autosuggest-option-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }
  .jkl-autosuggest__no-hits-message {
    padding: var(--jkl-autosuggest-option-padding);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--jkl-color-text-subdued);
  }
  .jkl-autosuggest__menu {
    background-color: var(--jkl-color-background-container-high);
    border: 0.125rem solid var(--jkl-color-border-input-focus);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-sizing: border-box;
    position: absolute;
    inset: 100% -0.0625rem auto;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% + 0.125rem);
    z-index: 7000;
    -webkit-overflow-scrolling: touch;
  }
  .jkl-autosuggest__item-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .jkl-autosuggest__item {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: unset;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--jkl-color-background-interactive);
    min-height: var(--jkl-autosuggest-option-height);
    text-align: left;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, background-color;
    position: relative;
    padding: var(--jkl-autosuggest-option-padding);
    cursor: pointer;
  }
  .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-interactive-hover);
  }
}
@layer jokul.components {
  .jkl-text-input-wrapper {
    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
        var(--jkl-text-input-horizontal-padding);
    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
    --jkl-text-input-action-button-size: var(--jkl-unit-60);
    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --background-color: var(--jkl-color-background-input-base);
    --border-color: var(--jkl-color-border-input);
    --placeholder-color: var(--jkl-color-text-subdued);
    border-radius: var(--jkl-border-radius-s);
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, box-shadow, background-color;
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
  }
  .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
    --background-color: var(--jkl-color-background-input-focus);
  }
  .jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
    --background-color: var(--jkl-color-background-alert-error);
    --text-color: var(--jkl-color-text-on-alert);
    --placeholder-color: color(from currentColor sRGB r g b / 75%);
  }
  .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
    --border-color: var(--jkl-color-border-input-focus);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
      border: 0.125rem solid ButtonText;
    }
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -8px;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
      --border-color: ButtonText;
    }
  }
  .jkl-text-input-wrapper > .jkl-text-input-action-button {
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--jkl-text-input-action-button-padding);
    height: var(--jkl-text-input-action-button-size);
    width: var(--jkl-text-input-action-button-size);
    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
  }
  .jkl-text-input-wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
    height: var(--jkl-text-input-action-button-icon-size);
    width: var(--jkl-text-input-action-button-icon-size);
  }
  .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
      border: 0.125rem inset ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input-wrapper {
      border: 0.125rem inset ButtonText;
    }
  }
  .jkl-text-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .jkl-text-input__input {
    padding: var(--jkl-text-input-padding);
    width: 100%;
    background: none;
    -webkit-appearance: none;
    color: inherit;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text-input__input {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input__input {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-text-input__input:active, .jkl-text-input__input:hover, .jkl-text-input__input:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-text-input__input input[type=number]::-webkit-outer-spin-button,
  .jkl-text-input__input input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .jkl-text-input__input input[type=number] {
    -moz-appearance: textfield;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-input__input {
      outline: none;
      border: none;
    }
    .jkl-text-input__input:focus-visible {
      outline: none;
    }
  }
  .jkl-text-input__input::placeholder {
    opacity: 1;
    color: var(--placeholder-color);
  }
  .jkl-text-input__input--align-right {
    text-align: right;
  }
  .jkl-text-input__unit {
    padding-inline-end: var(--jkl-text-input-horizontal-padding);
    padding-block: var(--jkl-text-input-vertical-padding);
  }
  .jkl-text-input__action-button {
    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
  }
  .jkl-text-input--inline {
    display: inline-block;
    vertical-align: middle;
    margin: -0.125rem 0.25rem;
  }
}
@layer jokul.theme {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-icon-grade: 0;
    }
  }
  [data-theme=light] {
    --jkl-icon-grade: 0;
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-icon-grade: -25;
    }
  }
  [data-theme=dark] {
    --jkl-icon-grade: -25;
  }
}
@layer jokul.components {
  .jkl-icon {
    --jkl-icon-fill: 0;
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
  }
  .jkl-icon--bold {
    --jkl-icon-weight: var(--jkl-icon-weight-bold);
  }
  .jkl-icon--filled {
    --jkl-icon-fill: 1;
  }
  .jkl-icon--animated {
    display: block;
  }
  .jkl-icon-red-cross {
    width: 1.3em;
    height: 1.3em;
    box-sizing: border-box;
    border-radius: 999px;
    background-color: var(--jkl-color-background-alert-error);
    color: var(--jkl-color-text-on-alert);
    display: inline-grid;
    place-items: center;
    font-size: 1em;
    --jkl-icon-weight: var(--jkl-icon-weight-bold);
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-red-cross {
      background-color: Canvas;
      color: CanvasText;
      border: 1px solid CanvasText;
    }
  }
  .jkl-icon-green-check {
    width: 1.3em;
    height: 1.3em;
    box-sizing: border-box;
    border-radius: 999px;
    background-color: var(--jkl-color-background-alert-success);
    color: var(--jkl-color-text-on-alert);
    display: inline-grid;
    place-items: center;
    font-size: 1em;
    --jkl-icon-weight: var(--jkl-icon-weight-bold);
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-green-check {
      background-color: Canvas;
      color: CanvasText;
      border: 1px solid CanvasText;
    }
  }
  .jkl-animated-horizontal-arrows,
  .jkl-animated-vertical-arrows {
    overflow: hidden;
    width: 1.3em;
    height: 1.3em;
  }
  .jkl-animated-horizontal-arrows__slider,
  .jkl-animated-vertical-arrows__slider {
    display: flex;
    transition-timing-function: ease;
    transition-duration: 250ms;
    transition-delay: calc(250ms * 0.3333333333);
    transition-property: transform;
  }
  .jkl-animated-horizontal-arrows__arrow,
  .jkl-animated-vertical-arrows__arrow {
    flex-shrink: 0;
  }
  .jkl-animated-vertical-arrows__slider {
    flex-direction: column;
    height: 2.6em;
  }
  .jkl-animated-vertical-arrows__slider[data-show=up] {
    transform: translate3d(0, 0, 0);
  }
  .jkl-animated-vertical-arrows__slider[data-show=down] {
    transform: translate3d(0, -50%, 0);
  }
  .jkl-animated-horizontal-arrows__slider {
    flex-direction: row;
    width: 2.6em;
  }
  .jkl-animated-horizontal-arrows__slider[data-show=left] {
    transform: translate3d(0, 0, 0);
  }
  .jkl-animated-horizontal-arrows__slider[data-show=right] {
    transform: translate3d(-50%, 0, 0);
  }
  .jkl-icons-animated__plus {
    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
    transition-duration: 250ms;
    transition-property: transform;
    transform-origin: 50% 50%;
  }
  .jkl-icons-animated__plus--plus {
    transform: rotate(0);
  }
  .jkl-icons-animated__plus--close {
    transform: rotate(135deg);
  }
}
@layer jokul.components {
  .jkl-icon-button {
    background-color: transparent;
    cursor: pointer;
    color: inherit;
    position: relative;
    transition-property: box-shadow;
    padding: 0;
    transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
    transition-duration: 100ms;
  }
  .jkl-icon-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-icon-button .jkl-icon {
    display: flex;
    align-items: center;
  }
  .jkl-icon-button .jkl-icon--animated {
    display: revert;
  }
  .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-icon-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-button {
      border: none;
      background: none;
    }
  }
}
@layer jokul.components {
  .jkl-field-group {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-field-group:active, .jkl-field-group:hover, .jkl-field-group:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-field-group {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-field-group:active, .jkl-field-group:hover, .jkl-field-group:focus {
      outline: revert;
      outline-style: revert;
    }
  }
}
@layer jokul.components {
  .jkl-dormant-form-support-label {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  .jkl-form-support-label {
    --jkl-form-support-label-margin: var(--jkl-unit-10) 0 0;
    --jkl-form-support-label-icon-size: 1.25rem;
    --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem 0;
    --color: var(--jkl-color-text-subdued);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 400ms;
    display: flex;
    margin: var(--jkl-form-support-label-margin);
    color: var(--color);
    transition-property: color;
    transition-delay: 150ms;
  }
  .jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
    opacity: 0;
    height: var(--jkl-form-support-label-icon-size);
    margin: var(--jkl-form-support-label-icon-margin);
  }
  @media screen and (forced-colors: active) {
    .jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
      stroke: CanvasText;
      fill: Canvas;
    }
    .jkl-form-support-label__icon svg, .jkl-form-support-label__icon path, .jkl-form-support-label__icon.jkl-icon svg, .jkl-form-support-label__icon.jkl-icon path {
      stroke: CanvasText;
      fill: Canvas;
    }
  }
  .jkl-form-support-label--error, .jkl-form-support-label--warning, .jkl-form-support-label--success {
    --color: var(--jkl-color-text-default);
  }
  .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u5wtga8 forwards;
  }
  .jkl-form-support-label--sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
  .jkl-label {
    display: block;
    margin: 0 0 var(--jkl-spacing-8) 0;
    color: var(--jkl-color-text-default);
  }
  .jkl-label--small {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-label--medium {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-label--large {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-label--sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
  .jkl-label .jkl-help {
    position: relative;
    top: -0.1ex;
  }
  .jkl-input-group-description {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--jkl-color-text-subdued);
    margin-block-end: var(--jkl-spacing-8);
    max-inline-size: 50ch;
    text-wrap: pretty;
  }
  .jkl-label:has(+ .jkl-input-group-description) {
    margin-block-end: var(--jkl-spacing-4);
  }
  @keyframes jkl-support-icon-entrance-u5wtga8 {
    0% {
      margin-right: 0;
      opacity: 0;
      transform: scale(1);
    }
    30% {
      margin-right: 0.5rem;
    }
    50% {
      opacity: 1;
    }
    70% {
      transform: scale(1.1);
    }
    85% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
      opacity: 1;
      margin-right: 0.5rem;
    }
  }
}
@layer jokul.components {
  @media screen and (forced-colors: active) {
    .jkl-text-input-action-button {
      stroke: ButtonText;
      fill: ButtonFace;
    }
    .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
      stroke: ButtonText;
      fill: ButtonFace;
    }
  }
}
@layer jokul.components {
  .jkl-tooltip-trigger {
    all: unset;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  .jkl-tooltip-content {
    --content-padding: var(--jkl-unit-15);
    --background-color: var(--jkl-color-background-container-inverted);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
    background-color: var(--background-color);
    color: var(--jkl-color-text-inverted);
    display: inline-block;
    min-width: min-content;
    max-width: min(19.375rem, 100%);
    padding: var(--content-padding);
    position: absolute;
    z-index: 10000;
  }
  @media screen and (forced-colors: active) {
    .jkl-tooltip-content {
      border: 1px solid CanvasText;
    }
  }
  .jkl-tooltip-question-button {
    transition-timing-function: ease-in;
    transition-duration: 100ms;
    transition-property: color;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    padding: 0;
    display: inline-flex;
    align-items: baseline;
    color: var(--jkl-color-text-interactive);
    transform: translateY(min(0.25em, 0.375rem));
    border-radius: 9999px;
  }
  .jkl-tooltip-question-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-tooltip-question-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-tooltip-question-button:hover {
    --button-color: var(--jkl-color-text-interactive-hover);
  }
  .jkl-tooltip-question-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  .jkl-tooltip-question-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    min-width: 44px;
    min-height: 44px;
  }
}
.jkl-popuptip__content-wrapper:focus {
  outline: none;
}

@layer jokul.components {
  .jkl-breadcrumb a[aria-current],
  .jkl-breadcrumb a[aria-current] * {
    text-decoration: none;
    background-image: none;
  }
  .jkl-breadcrumb a:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
  }
  .jkl-breadcrumb__item {
    margin-bottom: var(--jkl-unit-10);
    white-space: nowrap;
    cursor: pointer;
  }
  .jkl-breadcrumb__item-separator {
    padding-left: var(--jkl-unit-10);
    padding-right: var(--jkl-unit-10);
  }
}
@layer jokul.components {
  .jkl-link {
    --link-color: var(--jkl-color-text-default);
    color: inherit;
    outline: none;
    text-decoration: none;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: color;
  }
  .jkl-link__content {
    text-decoration: underline;
    text-underline-offset: 0.08lh;
    text-decoration-thickness: 0.05em;
    text-decoration-color: rgb(from currentColor r g b/70%);
  }
  .jkl-link__icon {
    margin-inline-start: 0.2em;
    margin-block-start: -0.1em;
    vertical-align: middle;
  }
  .jkl-link--external::after, .jkl-link[target=_blank]::after, .jkl-link[download]::after {
    --jkl-icon-fill: 0;
    --jkl-icon-size: 1em;
    --jkl-icon-opsz: 20;
    content: "\e89e"/"(Åpnes i ny fane)";
    margin-block-start: -0.1em;
    padding-inline-start: 0.2em;
    vertical-align: middle;
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
    display: inline;
  }
  .jkl-link[download]::after {
    content: "\f090"/"(Last ned fil)";
  }
  .jkl-link:hover:not(:focus) {
    --link-color: var(--jkl-color-text-subdued);
  }
  .jkl-link:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  @media screen and (forced-colors: active) {
    .jkl-link:hover:not(:focus) {
      --link-color: HighLight;
    }
  }
}
@layer jokul.components {
  .jkl-button {
    --jkl-button-font-size: var(--jkl-typography-body-base-font-size);
    --jkl-button-line-height: var(--jkl-typography-body-base-line-height);
    --jkl-button-padding-block: var(--jkl-unit-10);
    --jkl-button-padding-text: var(--jkl-unit-30);
    --jkl-button-padding-icon: var(--jkl-unit-20);
    --jkl-button-padding-icon-button: var(--jkl-unit-10);
    --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
    --jkl-button-text-ink-offset: 0.1em;
    --jkl-icon-weight: var(--jkl-icon-weight-bold);
    --text-color: var(--jkl-color-text-default);
    --background-color: transparent;
    --border-radius: 0;
    --border-width: 0.0625rem;
    display: inline-block;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    background: var(--background-color);
    color: var(--text-color);
    border: unset;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--border-radius);
    padding-inline: var(--jkl-button-padding-text);
    padding-block: var(--jkl-button-padding-block);
    position: relative;
    overflow: hidden;
    max-width: 100%;
    animation: a 0.3s linear;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: background-color;
  }
  .jkl-button:has(.jkl-button__text) {
    min-width: 9.5ch;
  }
  .jkl-button:has(.jkl-icon:first-child) {
    padding-inline-start: var(--jkl-button-padding-icon);
  }
  .jkl-button:has(.jkl-icon:last-child) {
    padding-inline-end: var(--jkl-button-padding-icon);
  }
  .jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
    padding-inline: var(--jkl-button-padding-icon-button);
  }
  .jkl-button__label {
    transition-timing-function: ease;
    transition-duration: 250ms;
    transition-property: translate;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--jkl-unit-base) * 0.25);
    pointer-events: none;
  }
  .jkl-button__loader {
    transition-timing-function: ease;
    transition-duration: 250ms;
    transition-property: opacity, translate;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% 350%;
    opacity: 0;
    pointer-events: none;
  }
  .jkl-button__text {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-block-start: var(--jkl-button-text-ink-offset);
    margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .jkl-button[data-loading=true] .jkl-button__label {
    --button-loading-offset: calc(-100% - var(--jkl-button-padding-block) * 2 - var(--jkl-button-text-ink-offset));
    translate: 0 var(--button-loading-offset);
  }
  .jkl-button[data-loading=true] .jkl-button__loader {
    translate: -50% -50%;
    opacity: 1;
  }
  .jkl-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-button:hover {
    background-color: color-mix(in srgb, var(--background-color), var(--text-color) 15%);
  }
  @media (forced-colors: active) {
    .jkl-button:hover {
      outline: 3px solid var(--jkl-color-border-action);
      outline-offset: 3px;
    }
  }
  .jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
    --border-radius: 999px;
  }
  .jkl-button--primary {
    --background-color: var(--jkl-color-background-action);
    --text-color: var(--jkl-color-text-on-action);
  }
  @media (forced-colors: active) {
    .jkl-button--primary {
      border: calc(var(--border-width) * 2) solid Highlight;
    }
  }
  .jkl-button--secondary {
    border: var(--border-width) solid var(--text-color);
  }
  .jkl-button--tertiary {
    border-bottom: var(--border-width) solid var(--text-color);
    padding-inline: var(--jkl-button-tertiary-padding-icon);
  }
  .jkl-button--tertiary:has(.jkl-icon:first-child) {
    padding-inline: var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon) * 2);
  }
  .jkl-button--tertiary:has(.jkl-icon:last-child) {
    padding-inline: calc(var(--jkl-button-tertiary-padding-icon) * 2) var(--jkl-button-tertiary-padding-icon);
  }
}
@layer jokul.components {
  .jkl-loader {
    --jkl-loader-dot-size: var(--jkl-unit-10);
    --jkl-loader-spacing: var(--jkl-unit-20);
    display: flex;
  }
  .jkl-loader--inline {
    display: inline-flex;
  }
  .jkl-loader__dot {
    display: block;
    transform-origin: center;
    background-color: currentColor;
    height: var(--jkl-loader-dot-size);
    width: var(--jkl-loader-dot-size);
    animation: 2500ms linear infinite;
  }
  .jkl-loader__dot--left {
    animation-name: jkl-loader-left-spin-u5wtgaz;
    margin-right: calc(var(--jkl-loader-spacing) * 0.9);
  }
  .jkl-loader__dot--middle {
    animation-name: jkl-loader-middle-spin-u5wtgbc;
    margin-right: var(--jkl-loader-spacing);
  }
  .jkl-loader__dot--right {
    animation-name: jkl-loader-right-spin-u5wtgbf;
  }
  @media screen and (forced-colors: active) {
    .jkl-loader__dot {
      background-color: CanvasText;
    }
  }
  @keyframes jkl-loader-left-spin-u5wtgaz {
    0% {
      transform: rotate(0) scale(0);
    }
    30% {
      transform: rotate(90deg) scale(1);
    }
    70% {
      transform: rotate(180deg) scale(0);
    }
    100% {
      transform: rotate(180deg) scale(0);
    }
  }
  @keyframes jkl-loader-middle-spin-u5wtgbc {
    0% {
      transform: rotate(20deg) scale(0);
    }
    10% {
      transform: rotate(20deg) scale(0);
    }
    40% {
      transform: rotate(110deg) scale(1.4);
    }
    85% {
      transform: rotate(200deg) scale(0);
    }
    100% {
      transform: rotate(200deg) scale(0);
    }
  }
  @keyframes jkl-loader-right-spin-u5wtgbf {
    0% {
      transform: rotate(40deg) scale(0);
    }
    20% {
      transform: rotate(40deg) scale(0);
    }
    50% {
      transform: rotate(130deg) scale(1);
    }
    100% {
      transform: rotate(220deg) scale(0);
    }
  }
}
@layer jokul.components {
  @property --jkl-skeleton-sweeper-position {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
  }
  .jkl-skeleton-animation {
    --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
    --jkl-skeleton-sweep-duration: 4500ms;
    --jkl-skeleton-sweeper-width: 40%;
    mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
    mask-size: 100dvi 100dvb;
    mask-position: center;
    animation: var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;
  }
  .jkl-skeleton-element {
    border-radius: 0.125rem;
    background-color: var(--jkl-skeleton-element-color);
  }
  .jkl-skeleton-element--circle {
    border-radius: 50%;
  }
  @media screen and (forced-colors: active) {
    .jkl-skeleton-element {
      border: 1px solid CanvasText;
      animation: 2s ease infinite jkl-blink-u5wtgbu;
    }
  }
  .jkl-skeleton-input {
    display: flex;
    flex-direction: column;
    gap: var(--jkl-spacing-12);
  }
  .jkl-skeleton-input__checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--jkl-spacing-8);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-skeleton-input {
      gap: var(--jkl-spacing-8);
    }
  }
  .jkl-skeleton-input--compact::after {
    gap: var(--jkl-spacing-8);
  }
  .jkl-skeleton-table {
    display: flex;
    flex-direction: column;
  }
  .jkl-skeleton-table__header, .jkl-skeleton-table__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid 1px var(--jkl-skeleton-element-color);
  }
  .jkl-skeleton-table__header {
    padding: var(--jkl-unit-20) var(--jkl-unit-10);
  }
  .jkl-skeleton-table__row {
    padding: var(--jkl-unit-20) var(--jkl-unit-10);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-skeleton-table__header {
      padding: var(--jkl-unit-10) var(--jkl-unit-05);
    }
    .jkl-skeleton-table__row {
      padding: var(--jkl-unit-20) var(--jkl-unit-05);
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-skeleton-table {
      animation: 2s ease-in-out infinite jkl-blink-u5wtgbu;
    }
  }
  @keyframes jkl-blink-u5wtgbu {
    0% {
      opacity: 1;
    }
    40%, 50% {
      opacity: 0.3;
    }
    70%, 100% {
      opacity: 1;
    }
  }
  @keyframes --jkl-skeleton-sweep {
    0%, 67% {
      --jkl-skeleton-sweeper-position: 0%;
    }
    100% {
      --jkl-skeleton-sweeper-position: calc(100% + var(--jkl-skeleton-sweeper-width));
    }
  }
}
@layer jokul.components {
  .jkl-card {
    --padding-s: var(--jkl-unit-05);
    --padding-m: var(--jkl-unit-15);
    --padding-l: var(--jkl-unit-20);
    --padding-xl: var(--jkl-unit-30);
    --border-radius: var(--jkl-border-radius-m);
    --border-color: transparent;
    --border-width: 0.0625rem;
    --background-color: transparent;
    position: relative;
    overflow: hidden;
    display: block;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    padding: var(--padding, var(--padding-s));
    text-decoration: none;
    color: var(--jkl-color-text-default);
  }
  .jkl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    transition-timing-function: ease;
    transition-duration: 100ms;
    transition-property: border-color, border-size;
  }
  @media (min-width: 680px) {
    .jkl-card {
      --padding-s: var(--jkl-unit-10);
      --padding-m: var(--jkl-unit-20);
      --padding-l: var(--jkl-unit-30);
      --padding-xl: var(--jkl-unit-40);
    }
  }
  .jkl-card[data-padding=s] {
    --padding: var(--padding-s);
  }
  .jkl-card[data-padding=m] {
    --padding: var(--padding-m);
  }
  .jkl-card[data-padding=l] {
    --padding: var(--padding-l);
  }
  .jkl-card[data-padding=xl] {
    --padding: var(--padding-xl);
  }
  .jkl-card--high {
    --background-color: var(--jkl-color-background-container-high);
  }
  .jkl-card--low {
    --background-color: var(--jkl-color-background-container-low);
  }
  .jkl-card--outlined {
    --border-color: var(--jkl-color-border-separator);
  }
  .jkl-card[data-clickable=true] {
    cursor: pointer;
  }
  .jkl-card[data-clickable=true]:hover {
    --border-color: var(--jkl-color-border-separator-hover);
    --border-width: 0.125rem;
  }
  .jkl-card[data-clickable=true]:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-card-image {
    --margin: calc(var(--padding, 0) * -1);
    width: calc(100% + 2 * var(--padding, 0));
    aspect-ratio: var(--image-aspect-ratio, 3/2);
    margin-inline: var(--margin, 0);
    object-fit: cover;
  }
  .jkl-card-image--top {
    margin-top: var(--margin, 0);
  }
  .jkl-card-image--bottom {
    margin-bottom: var(--margin, 0);
  }
  .jkl-card-image--full {
    margin-block: var(--margin, 0);
  }
}
@layer jokul.components {
  .jkl-image {
    display: block;
    overflow: hidden;
    position: relative;
  }
  .jkl-image__placeholder {
    filter: blur(20px);
  }
  .jkl-image__image {
    transition-timing-function: ease;
    transition-duration: 400ms;
    transition-property: opacity;
    opacity: 1;
  }
  .jkl-image__image, .jkl-image__placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
  }
  .jkl-image--loading .jkl-image__image {
    opacity: 0;
  }
}
.jkl-tag {
  --padding: var(--jkl-unit-02) var(--jkl-unit-10);
  --gap: var(--jkl-unit-05);
  --background-color: var(--jkl-color-background-alert-neutral);
  --text-color: var(--jkl-color-text-on-alert);
  font-size: var(--jkl-font-size-2);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
  font-weight: 700;
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--padding);
  gap: var(--gap);
}
.jkl-tag--info {
  --background-color: var(--jkl-color-background-alert-info);
}
.jkl-tag--warning {
  --background-color: var(--jkl-color-background-alert-warning);
}
.jkl-tag--error {
  --background-color: var(--jkl-color-background-alert-error);
}
.jkl-tag--success {
  --background-color: var(--jkl-color-background-alert-success);
}
@media screen and (forced-colors: active) {
  .jkl-tag {
    border: 2px none CanvasText;
    border-bottom-style: dotted;
  }
  .jkl-tag--info {
    border-style: dotted;
  }
  .jkl-tag--warning {
    border-style: dashed;
  }
  .jkl-tag--error {
    border-style: double;
    border-width: 4px;
  }
  .jkl-tag--success {
    border-style: solid;
  }
}

@layer jokul.components {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-checkbox-error-color: #ab2e43;
    }
  }
  [data-theme=light] {
    --jkl-checkbox-error-color: #ab2e43;
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-checkbox-error-color: #d79ba5;
    }
  }
  [data-theme=dark] {
    --jkl-checkbox-error-color: #d79ba5;
  }
  .jkl-checkbox {
    --box-color: var(--jkl-color-border-action);
    --check-color: var(--jkl-color-border-action);
    --text-color: var(--jkl-color-text-default);
    --background-color: transparent;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    display: flex;
    flex-wrap: wrap;
    color: var(--text-color);
    position: relative;
  }
  .jkl-checkbox__input {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 1lh;
    inline-size: 1lh;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
  }
  .jkl-checkbox__input {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-checkbox__input {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-checkbox__label {
    cursor: pointer;
    display: flex;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-checkbox__label::before {
    content: "check_box_outline_blank";
    margin-inline-end: 0.25em;
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
  }
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
    --jkl-icon-weight: 400;
  }
  .jkl-checkbox__input:checked + .jkl-checkbox__label::before {
    content: "check_box";
    --jkl-icon-fill: 1;
  }
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label::before {
    content: "indeterminate_check_box";
    --jkl-icon-fill: 1;
  }
  .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
    color: var(--jkl-checkbox-error-color);
  }
  .jkl-checkbox + .jkl-checkbox {
    margin-top: 0.75em;
  }
  .jkl-checkbox--inline {
    display: inline-flex;
  }
  .jkl-checkbox--inline:not(:last-of-type) {
    margin-right: var(--jkl-unit-30);
  }
}
@layer jokul.components {
  .jkl-input-panel {
    --outer-border-color: var(--jkl-color-border-input);
    --outer-border-thickness: 0.0625rem;
    --background-color: transparent;
    --padding-inline: var(--jkl-unit-25);
    box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
    border-radius: var(--jkl-border-radius-s);
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    interpolate-size: allow-keywords;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: box-shadow;
  }
  .jkl-input-panel__header {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    padding: var(--jkl-unit-20) var(--padding-inline);
  }
  .jkl-input-panel__header .jkl-radio-button,
  .jkl-input-panel__header .jkl-checkbox {
    grid-column: 1/-1;
    grid-row: 1;
    inline-size: 100%;
  }
  .jkl-input-panel__header label {
    inline-size: 100%;
  }
  .jkl-input-panel__header__amount {
    display: flex;
    height: 100%;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    pointer-events: none;
    position: relative;
    z-index: 1;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    font-weight: 700;
  }
  .jkl-input-panel__description {
    height: 0;
    overflow: hidden;
    padding-inline: var(--padding-inline);
    padding-block-end: var(--jkl-spacing-none);
    line-height: initial;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: height;
  }
  .jkl-input-panel:has(:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
    --background-color: var(--jkl-color-background-container-high);
  }
  .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
    height: auto;
    padding-block-end: var(--jkl-unit-20);
  }
  .jkl-input-panel:has(input:hover) {
    --outer-border-color: var(--jkl-color-border-separator-hover);
    --outer-border-thickness: 0.125rem;
    cursor: pointer;
  }
}
@layer jokul.components {
  .jkl-checkbox-panel .jkl-checkbox {
    /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
    margin-inline-start: -0.1em;
  }
  .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
    outline: none;
  }
}
.jkl-chip {
  --padding-inline: var(--jkl-unit-15);
  --padding-icon: var(--jkl-unit-10);
  --height: var(--jkl-unit-40);
  --gap: var(--jkl-unit-05);
  --text-color: var(--jkl-color-text-default);
  --border-color: var(--jkl-color-border-separator);
  --background-color: transparent;
  --border-width: 0.0625rem;
  font-size: var(--jkl-font-size-2);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  background-color: var(--background-color);
  color: var(--text-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: 99999px;
  display: inline-flex;
  align-items: center;
  text-align: initial;
  white-space: nowrap;
  gap: var(--gap);
  padding: 0 var(--padding-inline);
  min-height: var(--height);
}
@media screen and (forced-colors: active) {
  .jkl-chip {
    border: 2px none CanvasText;
    border-bottom-style: dotted;
  }
}
.jkl-chip::after {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--text-color);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: opacity;
}
.jkl-chip:focus-visible {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}
.jkl-chip:hover::after {
  opacity: 0.15;
}
.jkl-chip--filter[aria-pressed=true] {
  --background-color: var(--jkl-color-background-action);
  --text-color: var(--jkl-color-text-on-action);
  --border-color: var(--text-color);
}
@media screen and (forced-colors: active) {
  .jkl-chip--filter[aria-pressed=true] {
    forced-color-adjust: none;
    --background-color: CanvasText;
    --text-color: Canvas;
  }
}
.jkl-chip:has(.jkl-icon) {
  padding-inline-end: var(--padding-icon);
}

@layer jokul.components {
  .jkl-combobox {
    --jkl-combobox-button-padding: var(--jkl-unit-10);
    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10)
        var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
    --jkl-combobox-input-height: 3rem;
    --jkl-combobox-actions-right: var(--jkl-unit-10);
    --jkl-combobox-actions-top: var(--jkl-unit-05);
    --jkl-combobox-chips-gap: var(--jkl-unit-05);
    --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
    --jkl-combobox-native-padding: 0 var(--jkl-unit-50) 0 var(--jkl-unit-10);
    --jkl-combobox-option-padding: var(--jkl-unit-10) var(--jkl-unit-15);
    --jkl-combobox-option-line-height: 2rem;
    --jkl-combobox-search-input-height: 1.75rem;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-combobox {
      --jkl-combobox-input-height: 2.75rem;
    }
  }
  .jkl-combobox {
    position: relative;
  }
  .jkl-combobox {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-combobox:active, .jkl-combobox:hover, .jkl-combobox:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-combobox:active, .jkl-combobox:hover, .jkl-combobox:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-combobox .jkl-combobox__option:focus {
    outline: none;
  }
  .jkl-combobox__wrapper {
    position: relative;
    max-width: 100%;
    display: flex;
    gap: 1ch;
    cursor: pointer;
    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
        var(--jkl-text-input-horizontal-padding);
    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
    --jkl-text-input-action-button-size: var(--jkl-unit-60);
    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --background-color: var(--jkl-color-background-input-base);
    --border-color: var(--jkl-color-border-input);
    --placeholder-color: var(--jkl-color-text-subdued);
    border-radius: var(--jkl-border-radius-s);
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, box-shadow, background-color;
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
  }
  .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
    --background-color: var(--jkl-color-background-input-focus);
  }
  .jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
    --background-color: var(--jkl-color-background-alert-error);
    --text-color: var(--jkl-color-text-on-alert);
    --placeholder-color: color(from currentColor sRGB r g b / 75%);
  }
  .jkl-combobox__wrapper:hover, .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
    --border-color: var(--jkl-color-border-input-focus);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__wrapper:hover, .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
      border: 0.125rem solid ButtonText;
    }
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-combobox__wrapper > .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -8px;
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__wrapper > .jkl-icon-button:focus-visible {
      --border-color: ButtonText;
    }
  }
  .jkl-combobox__wrapper > .jkl-text-input-action-button {
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--jkl-text-input-action-button-padding);
    height: var(--jkl-text-input-action-button-size);
    width: var(--jkl-text-input-action-button-size);
    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
  }
  .jkl-combobox__wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
    height: var(--jkl-text-input-action-button-icon-size);
    width: var(--jkl-text-input-action-button-icon-size);
  }
  .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
      border: 0.125rem inset ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__wrapper {
      border: 0.125rem inset ButtonText;
    }
  }
  .jkl-combobox__wrapper {
    /* Juster padding når det vises chips for valgte elementer */
  }
  .jkl-combobox__wrapper--active-value .jkl-combobox__chips {
    padding: 0.46875rem;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
    background-color: var(--jkl-color-background-input-focus);
  }
  .jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
    outline: none;
  }
  .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
    transform: translateY(calc(-50% + 0.1875rem));
  }
  .jkl-combobox__search-input {
    border: none;
    outline: none;
    padding: 0;
    flex: 1 1 1ch;
    min-width: 0;
    max-height: var(--jkl-combobox-search-input-height);
    background: none;
    -webkit-appearance: none;
    color: inherit;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-combobox__search-input {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-combobox__search-input:active, .jkl-combobox__search-input:hover, .jkl-combobox__search-input:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__search-input {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-combobox__search-input:active, .jkl-combobox__search-input:hover, .jkl-combobox__search-input:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-combobox__search-input input[type=number]::-webkit-outer-spin-button,
  .jkl-combobox__search-input input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .jkl-combobox__search-input input[type=number] {
    -moz-appearance: textfield;
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__search-input {
      outline: none;
      border: none;
    }
    .jkl-combobox__search-input:focus-visible {
      outline: none;
    }
  }
  .jkl-combobox__search-input::placeholder {
    opacity: 1;
    color: var(--placeholder-color);
  }
  .jkl-combobox__arrow {
    pointer-events: none;
    transform: translateY(-50%);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: transform, color;
  }
  @media screen and (forced-colors: active) {
    .jkl-combobox__arrow {
      stroke: CanvasText;
      fill: CanvasText;
    }
    .jkl-combobox__arrow svg, .jkl-combobox__arrow path {
      stroke: CanvasText;
      fill: CanvasText;
    }
  }
  .jkl-combobox__menu {
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: height;
    top: calc(100% - 1px);
    overflow-y: auto;
    position: absolute;
    z-index: 7000;
    left: -0.0625rem;
    right: -0.0625rem;
    background-color: var(--jkl-color-background-container-high);
    border: 0.125rem solid var(--jkl-color-border-input-focus);
    border-radius: 0 0 0.1875rem 0.1875rem;
    box-sizing: border-box;
    max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
  }
  .jkl-combobox__option {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    display: flex;
    align-items: center;
    border: 0;
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-interactive);
    transition-property: color, background-color;
    cursor: pointer;
    padding: var(--jkl-combobox-option-padding);
    width: 100%;
    text-align: left;
    line-height: var(--jkl-combobox-option-line-height);
  }
  .jkl-combobox__option:focus, .jkl-combobox__option:hover {
    background-color: var(--jkl-color-background-interactive-hover);
  }
  .jkl-combobox__option-description {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--jkl-color-text-subdued);
    display: block;
    width: 100%;
  }
  .jkl-combobox__option--selected {
    justify-content: space-between;
  }
  .jkl-combobox__no-option {
    padding: var(--jkl-combobox-option-padding);
  }
  .jkl-combobox__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jkl-combobox-chips-gap);
    min-width: 0;
    box-sizing: border-box;
    padding: var(--jkl-text-input-padding);
  }
  .jkl-combobox__chips .jkl-chip {
    white-space: break-spaces;
  }
  .jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger {
    font-weight: 700;
  }
  .jkl-combobox--invalid .jkl-combobox__search-input,
  .jkl-combobox--invalid .jkl-combobox__wrapper {
    background-color: var(--jkl-color-background-alert-error);
  }
  .jkl-combobox--invalid .jkl-combobox__search-input,
  .jkl-combobox--invalid .jkl-combobox__button,
  .jkl-combobox--invalid .jkl-combobox__wrapper {
    color: var(--jkl-color-text-on-alert);
  }
  .jkl-combobox--menu-closed .jkl-combobox__search-input {
    position: absolute;
    background-color: transparent;
    width: 94%;
    padding-right: 0;
  }
  .jkl-combobox--menu-open .jkl-combobox__wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions {
    transform: translateY(-0.1875rem);
  }
  .jkl-combobox--menu-open .jkl-combobox__search-input {
    cursor: text;
  }
}
@layer jokul.components {
  .jkl-cookie-consent-modal {
    position: fixed;
    z-index: 9000 !important;
  }
  .jkl-cookie-consent-modal[aria-hidden=true] {
    display: none;
  }
  .jkl-cookie-consent-modal > .jkl-cookie-consent-modal__overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    inset: 0;
    transition: 0.2s;
  }
  .jkl-cookie-consent-modal__info-text {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-cookie-consent-modal__checkbox {
    margin-bottom: var(--jkl-unit-10);
    margin-top: var(--jkl-unit-30);
  }
}
/*
 * NOTE: These markers should stay visually aligned with GreenCheckIcon and
 *       RedCrossIcon in the icon package.
 */
@layer jokul.components {
  .jkl-list {
    --list-text-color: var(--jkl-color-text-default);
    list-style-type: "•";
    padding-left: var(--jkl-unit-20);
    margin: 0;
  }
  .jkl-list > .jkl-list__item > .jkl-list {
    margin: var(--jkl-unit-10) 0;
  }
  .jkl-list:has(.jkl-list__item--iconed) {
    padding: 0;
  }
  .jkl-list--ordered {
    padding-left: revert;
  }
  .jkl-list--ordered > .jkl-list__item {
    padding-left: revert;
    list-style: decimal;
  }
  .jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
    list-style: lower-alpha;
  }
  .jkl-list__item {
    color: var(--jkl-list-text-color);
    padding-left: var(--jkl-unit-15);
  }
  .jkl-list__item::marker {
    color: var(--jkl-list-text-color);
  }
  .jkl-list__item--iconed {
    display: flex;
    list-style: none;
    position: relative;
    padding-left: 0;
  }
  .jkl-list__item--iconed::before {
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
    display: inline-grid;
    place-items: center;
    width: 1.1875em;
    height: 1.1875em;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 0.5em;
    margin-top: 0.2em;
    font-size: 1em;
    line-height: 1;
    border-radius: 999px;
    color: var(--jkl-color-text-on-alert);
    --jkl-icon-weight: var(--jkl-icon-weight-bold);
  }
  .jkl-list__item--check::before {
    content: "\e5ca";
    content: "\e5ca"/"";
    alt: " ";
    background-color: var(--jkl-color-background-alert-success);
  }
  .jkl-list__item--cross::before {
    content: "\e5cd";
    content: "\e5cd"/"";
    alt: " ";
    background-color: var(--jkl-color-background-alert-error);
  }
  @media screen and (forced-colors: active) {
    .jkl-list .jkl-list__item--check::before, .jkl-list .jkl-list__item--cross::before {
      background-color: Canvas;
      color: CanvasText;
      border: 1px solid CanvasText;
    }
  }
}
@layer jokul.components {
  /* Base layout */
  .jkl-modal-container,
  .jkl-modal-overlay {
    position: fixed;
    inset: 0;
  }
  .jkl-modal-container {
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jkl-modal-container[aria-hidden=true] {
    visibility: hidden;
    pointer-events: none;
  }
}
@layer jokul.components {
  .jkl-modal-overlay {
    background-color: rgba(27, 25, 23, 0.8);
    opacity: 0;
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    transition-property: opacity;
  }
  .jkl-modal-container:not([aria-hidden=true]) .jkl-modal-overlay {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .jkl-modal-overlay {
      transition-duration: 0ms;
    }
  }
}
@layer jokul.components {
  .jkl-modal {
    --margin: var(--jkl-spacing-m);
    container-type: inline-size;
    box-sizing: border-box;
    margin: var(--margin);
    padding: var(--modal-padding, var(--jkl-unit-40));
    z-index: 9000;
    background-color: var(--jkl-color-background-container-high);
    border-radius: var(--jkl-border-radius-l);
    box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
    width: min(100vw - 2 * var(--margin), var(--modal-width, 60ch));
    max-width: none;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  @media screen and (forced-colors: active) {
    .jkl-modal {
      border-color: CanvasText;
    }
  }
}
@layer jokul.components {
  .jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 0px;
    --jkl-modal-slide-y: 12px;
    transition-timing-function: ease-in;
    transition-duration: 250ms;
    transition-property: visibility;
    transition-duration: 0ms;
  }
  .jkl-modal-container--slide-in[aria-hidden=true] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 250ms;
  }
  .jkl-modal-container--slide-in:not([aria-hidden=true]) {
    visibility: visible;
    transition-delay: 0ms;
  }
  .jkl-modal-container--slide-in .jkl-modal {
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    transition-property: transform, opacity;
    transform: translate(var(--jkl-modal-slide-x), var(--jkl-modal-slide-y));
    opacity: 0;
    will-change: transform, opacity;
  }
  .jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal {
    transform: translate(0, 0);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .jkl-modal-container--slide-in .jkl-modal {
      transition-duration: 0ms;
    }
  }
}
@layer jokul.components {
  /* Placement: bottom */
  .jkl-modal-container--placement-bottom {
    align-items: flex-end;
  }
  .jkl-modal-container--placement-bottom.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 0px;
    --jkl-modal-slide-y: 24px;
  }
  .jkl-modal-container--placement-bottom .jkl-modal {
    --margin: 0px;
    width: min(100vw, var(--modal-width, 100vw));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* Placement: left */
  .jkl-modal-container--placement-left {
    justify-content: flex-start;
  }
  .jkl-modal-container--placement-left.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: -24px;
    --jkl-modal-slide-y: 0px;
  }
  .jkl-modal-container--placement-left .jkl-modal {
    height: 100%;
    max-height: 100%;
    margin-block: 0;
    margin-inline-start: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* Placement: right */
  .jkl-modal-container--placement-right {
    justify-content: flex-end;
  }
  .jkl-modal-container--placement-right.jkl-modal-container--slide-in {
    --jkl-modal-slide-x: 24px;
    --jkl-modal-slide-y: 0px;
  }
  .jkl-modal-container--placement-right .jkl-modal {
    height: 100%;
    max-height: 100%;
    margin-block: 0;
    margin-inline-end: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@layer jokul.components {
  .jkl-modal-header {
    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: var(--jkl-modal-header-margin);
  }
  .jkl-modal-body {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-modal-title {
    font-size: var(--jkl-font-size-6);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  .jkl-modal-actions {
    margin-block-start: var(--jkl-unit-50);
    display: flex;
    flex-direction: column;
    gap: var(--jkl-unit-15) var(--jkl-unit-20);
  }
  @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
    .jkl-modal-actions {
      flex-direction: row-reverse;
      align-self: flex-end;
    }
  }
}
@layer jokul.components {
  .jkl-countdown {
    --track-color: var(--jkl-color-border-separator);
    --bar-color: var(--jkl-color-border-input-focus);
    --bar-height: 0.25rem;
    background-color: var(--track-color);
    border-radius: 6.25rem;
    height: var(--bar-height);
    width: 100%;
    overflow: hidden;
  }
  .jkl-countdown__tracker {
    display: block;
    height: var(--bar-height);
    background-color: var(--bar-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-countdown {
      background-color: Canvas;
    }
    .jkl-countdown__tracker {
      background-color: CanvasText;
    }
  }
  .jkl-countdown__tracker {
    animation: jkl-downcount-u5wtgca var(--duration) linear forwards;
    animation-play-state: var(--play-state, running);
  }
  @keyframes jkl-downcount-u5wtgca {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }
}
@layer jokul.components {
  .jkl-calendar {
    --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
    --jkl-calendar-gap: var(--jkl-unit-15);
  }
  @media (width >= 0) and (max-width: 374px) {
    .jkl-calendar {
      --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
    }
  }
  .jkl-calendar {
    display: block;
    background-color: var(--jkl-color-background-container-high);
    color: var(--jkl-color);
  }
  .jkl-calendar__padding {
    display: flex;
    flex-direction: column;
    gap: var(--jkl-calendar-gap);
    box-sizing: border-box;
  }
  @media screen and (forced-colors: active) {
    .jkl-calendar__padding {
      border: 1px solid CanvasText;
    }
  }
}
@layer jokul.components {
  .jkl-calendar-navigation {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
}
@layer jokul.components {
  .jkl-calendar-navigation-dropdown {
    --chevron-size: 1.5rem;
    display: inline-flex;
    align-items: center;
  }
  .jkl-calendar-navigation-dropdown > * {
    cursor: pointer;
  }
  .jkl-calendar-navigation-dropdown__select {
    appearance: none;
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    font-weight: 700;
    background-color: transparent;
    color: inherit;
    border-radius: 0;
    border: none;
    text-align: end;
    text-align-last: end;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    padding-inline-end: var(--chevron-size);
  }
  .jkl-calendar-navigation-dropdown__select {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-calendar-navigation-dropdown__select:active, .jkl-calendar-navigation-dropdown__select:hover, .jkl-calendar-navigation-dropdown__select:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-calendar-navigation-dropdown__select {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-calendar-navigation-dropdown__select:active, .jkl-calendar-navigation-dropdown__select:hover, .jkl-calendar-navigation-dropdown__select:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-calendar-navigation-dropdown__select option {
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-container-high);
    text-align: left;
  }
  .jkl-calendar-navigation-dropdown__select:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-calendar-navigation-dropdown__chevron {
    margin-left: calc(var(--chevron-size) * -1);
    pointer-events: none;
  }
  .jkl-calendar-navigation-dropdown + .jkl-calendar-navigation-dropdown {
    margin-inline-start: var(--jkl-unit-10);
  }
}
@layer jokul.components {
  .jkl-calendar-table th {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    padding-bottom: var(--jkl-unit-10);
  }
  .jkl-calendar-table td {
    text-align: center;
  }
  .jkl-calendar-table td + td,
  .jkl-calendar-table th + th {
    padding-left: calc(var(--jkl-unit-10) / 2);
  }
  .jkl-calendar-table tr + tr > td {
    padding-top: calc(var(--jkl-unit-10) / 2);
  }
}
@layer jokul.components {
  .jkl-calendar-date-button {
    --jkl-calendar-date-size: var(--jkl-unit-50);
  }
  @media (width >= 0) and (max-width: 374px) {
    .jkl-calendar-date-button {
      --jkl-calendar-date-size: var(--jkl-unit-40);
    }
  }
  .jkl-calendar-date-button {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    appearance: none;
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--jkl-calendar-date-size);
    width: var(--jkl-calendar-date-size);
    border-radius: 50%;
    background-color: transparent;
    color: var(--jkl-color);
    margin: var(--jkl-calendar-date-margin);
    padding: 0;
    padding-top: var(--jkl-unit-02);
    transition-timing-function: ease-out;
    transition-duration: 75ms;
    transition-property: color, background-color, box-shadow;
  }
  .jkl-calendar-date-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-calendar-date-button:active, .jkl-calendar-date-button:hover, .jkl-calendar-date-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-calendar-date-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-calendar-date-button:active, .jkl-calendar-date-button:hover, .jkl-calendar-date-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-calendar-date-button[data-adjacent=true] {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    padding: 0;
    color: var(--jkl-color-text-subdued);
  }
  .jkl-calendar-date-button[aria-current=date] {
    font-weight: 700;
  }
  .jkl-calendar-date-button:hover:not(:disabled) {
    background-color: var(--jkl-color-background-interactive-hover);
    cursor: pointer;
  }
  .jkl-calendar-date-button[aria-pressed=true] {
    background-color: var(--jkl-color-background-container-inverted);
    color: var(--jkl-color-text-inverted);
    cursor: pointer;
  }
  .jkl-calendar-date-button[aria-pressed=true]:hover {
    color: var(--jkl-color);
  }
  .jkl-calendar-date-button:disabled {
    color: color(from var(--jkl-color-text-subdued) srgb r g b/70%);
  }
  .jkl-calendar-date-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
}
@layer jokul.components {
  .jkl-datepicker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .jkl-datepicker {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-datepicker:active, .jkl-datepicker:hover, .jkl-datepicker:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-datepicker {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-datepicker:active, .jkl-datepicker:hover, .jkl-datepicker:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-datepicker__input-wrapper {
    position: relative;
    display: contents;
  }
  .jkl-datepicker .jkl-datepicker__input {
    padding-top: calc(var(--jkl-text-input-vertical-padding) + 0.08em);
    padding-bottom: calc(var(--jkl-text-input-vertical-padding) - 0.08em);
  }
  .jkl-datepicker__calendar-wrapper {
    position: absolute;
    top: calc(100% + 0.875rem);
    left: 0;
    z-index: 7000;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-datepicker__calendar-wrapper {
      left: -1.15rem;
    }
  }
  @media (width >= 0) and (max-width: 374px) {
    .jkl-datepicker__calendar-wrapper {
      left: -2.5rem;
    }
  }
}
@layer jokul.components {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
    }
  }
  [data-theme=light] {
    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
    }
  }
  [data-theme=dark] {
    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
  }
  .jkl-popover {
    padding: var(--popover-padding, 0);
    z-index: 10000;
    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
    background-color: var(--jkl-color-background-container-high);
    border-radius: var(--jkl-border-radius-s);
  }
  .jkl-popover:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-popover-trigger:focus {
    outline: 0;
  }
  .jkl-popover-trigger:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
}
@layer jokul.components {
  .jkl-description-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--jkl-unit-05);
  }
  .jkl-description-list .seperator {
    display: none;
  }
  .jkl-description-list__detail + .seperator {
    grid-column: 1/-1;
    width: 100%;
    border: 0 solid transparent;
    margin-block: var(--jkl-unit-05);
  }
  .jkl-description-list__detail + .seperator:not(:first-of-type) {
    display: unset;
  }
  .jkl-description-list__term {
    font-weight: 700;
  }
  .jkl-description-list__detail {
    margin-left: 0;
  }
  @media (min-width: 60ch) {
    .jkl-description-list[data-alignment=horizontal] {
      grid-template-columns: fit-content(40%) 1fr;
      grid-auto-flow: column;
      column-gap: 1.5em;
    }
    .jkl-description-list[data-alignment=horizontal] .jkl-description-list__term {
      grid-column-start: 1;
      margin: 0;
      overflow-wrap: break-word;
    }
    .jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail {
      grid-column-start: 2;
    }
    .jkl-description-list[data-alignment=justified] {
      grid-template-columns: 1fr max-content;
      grid-auto-flow: column;
      column-gap: 1.5em;
    }
    .jkl-description-list[data-alignment=justified] .jkl-description-list__term {
      grid-column-start: 1;
      margin: 0;
      overflow-wrap: break-word;
    }
    .jkl-description-list[data-alignment=justified] .jkl-description-list__detail {
      grid-column-start: 2;
    }
    .jkl-description-list[data-alignment=justified] .jkl-description-list__detail {
      text-align: end;
    }
  }
  .jkl-description-list[data-separators=true] .seperator:not(:first-of-type) {
    margin-block: var(--jkl-unit-15);
    border-top: 1px solid var(--jkl-color-border-separator);
  }
}
@layer jokul.components {
  .jkl-expandable {
    background-color: var(--jkl-color-background-container-low);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }
  .jkl-expandable__content[data-expanded=true] {
    height: auto;
  }
  .jkl-expandable__content[data-expanded=false] {
    height: 0;
  }
  .jkl-expandable[data-visible-content=true] .jkl-expander {
    border-bottom: 1px solid transparent;
  }
  .jkl-expandable__content-wrapper {
    padding: var(--jkl-unit-20);
  }
  .jkl-expandable--stroke {
    border-color: var(--jkl-color-border-separator);
    background-color: transparent;
    border-radius: 0;
    border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
  }
  .jkl-expandable__wrapper {
    --border-radius: 0.25rem;
    --outline-offset: 3px;
    --stroke-outline-offset: 3px;
    --border-top-left-radius: var(--border-radius);
    --border-top-right-radius: var(--border-radius);
    --border-bottom-left-radius: var(--border-radius);
    --border-bottom-right-radius: var(--border-radius);
    position: relative;
  }
  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
    --border-top-left-radius: 0;
    --border-top-right-radius: 0;
    --stroke-outline-offset: -1px;
  }
  .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
    border-top: none;
  }
  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
    --border-bottom-left-radius: 0;
    --border-bottom-right-radius: 0;
    --stroke-outline-offset: -1px;
  }
  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
    --outline-offset: var(--stroke-outline-offset);
  }
  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
    outline-offset: var(--outline-offset);
  }
  .jkl-expandable__focus-container {
    border-radius: var(--border-radius);
    position: absolute;
    inset: 0;
  }
  .jkl-expander {
    box-sizing: border-box;
    background: none;
    appearance: none;
    border: none;
    text-align: left;
    width: 100%;
    padding: var(--jkl-unit-20);
    cursor: pointer;
    color: var(--jkl-color);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    /* Removes the default disclosure triangle without breaking semantics */
    list-style: none;
  }
  .jkl-expander::-webkit-details-marker {
    display: none;
  }
  .jkl-expander__label {
    flex-grow: 1;
  }
  .jkl-expander__chevron {
    user-select: none;
    transition-property: transform;
    transform: rotate(0turn);
    text-align: right;
  }
  .jkl-expander--open .jkl-expander__label {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  .jkl-expander--open .jkl-expander__chevron {
    transform: rotate(-0.5turn);
    transition-timing-function: ease;
    transition-duration: 100ms;
  }
  @media (hover: hover) {
    .jkl-expander:hover {
      background-color: var(--jkl-color-background-interactive-selected);
    }
  }
  .jkl-expander {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-expander {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
      outline: revert;
      outline-style: revert;
    }
  }
}
@layer jokul.components {
  .jkl-feedback {
    max-width: 34.375rem;
  }
  .jkl-feedback__submit-wrapper {
    width: 100%;
    transition-property: height;
    transition-timing-function: ease;
    transition-duration: 250ms;
  }
  .jkl-feedback__submit-wrapper--hidden {
    display: none;
  }
  .jkl-feedback__step-counter {
    color: var(--jkl-color-text-subdued);
    margin-bottom: var(--jkl-unit-20);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-feedback__fade-in {
    animation: jkl-show-u5wtgcd 0.25s ease-out;
  }
  .jkl-feedback__buttons {
    display: flex;
  }
  @keyframes jkl-show-u5wtgcd {
    from {
      transform: translate3d(0, 0.5rem, 0);
      opacity: 0;
    }
  }
  .jkl-feedback-smileys {
    margin-top: var(--jkl-unit-10);
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 22.5rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
  .jkl-feedback-smiley-option {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
    color: var(--jkl-color-text-subdued);
    transform: translate3d(0, 0, 0);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: transform, color;
  }
  @media screen and (forced-colors: active) {
    .jkl-feedback-smiley-option {
      stroke: ButtonFace;
      fill: ButtonText;
    }
    .jkl-feedback-smiley-option svg, .jkl-feedback-smiley-option path {
      stroke: ButtonFace;
      fill: ButtonText;
    }
  }
  .jkl-feedback-smiley-option::before, .jkl-feedback-smiley-option::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: opacity;
  }
  .jkl-feedback-smiley-option::before {
    inset: 0;
    box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
  }
  .jkl-feedback-smiley-option:hover {
    color: var(--jkl-color-text-default);
  }
  input:checked + .jkl-feedback-smiley-option {
    color: var(--jkl-color-text-default);
    transform: translate3d(0, -20%, 0);
  }
  input:checked + .jkl-feedback-smiley-option::before {
    opacity: 1;
  }
  input:focus-visible + .jkl-feedback-smiley-option {
    border-radius: var(--jkl-border-radius-full);
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
}
@layer jokul.components {
  .jkl-message {
    --jkl-message-icon-left: var(--jkl-unit-20);
    --jkl-message-icon-top: var(--jkl-unit-30);
    --jkl-message-title-margin: 0 0 var(--jkl-unit-05) 0;
    --jkl-message-dismiss-button-size: var(--jkl-unit-50);
    --jkl-message-gap: var(--jkl-unit-20);
    --jkl-message-padding: var(--jkl-unit-25) var(--jkl-unit-15);
    --background-color: var(--jkl-color-background-alert-neutral);
    --text-color: var(--jkl-color-text-on-alert);
    width: 100%;
    max-width: 35rem;
    padding: var(--jkl-message-padding);
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 0.25rem;
    box-sizing: border-box;
    display: grid;
    align-items: start;
    grid-template-areas: "icon content dismiss";
    grid-template-columns: auto 1fr auto;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-message:has(.jkl-message__title) {
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  .jkl-message__icon {
    grid-area: icon;
    margin-right: var(--jkl-message-gap);
  }
  @media screen and (forced-colors: active) {
    .jkl-message__icon {
      stroke: CanvasText;
    }
    .jkl-message__icon svg, .jkl-message__icon path {
      stroke: CanvasText;
    }
  }
  .jkl-message__content {
    grid-area: content;
  }
  .jkl-message__message {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    margin-top: -0.125rem;
  }
  .jkl-message__title {
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
    margin: var(--jkl-message-title-margin);
  }
  .jkl-message__title ~ .jkl-message__message {
    margin-top: 0;
  }
  .jkl-message__dismiss-button {
    grid-area: dismiss;
    justify-self: end;
    position: relative;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: grid;
    place-content: center;
  }
  .jkl-message__dismiss-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-message__dismiss-button:active, .jkl-message__dismiss-button:hover, .jkl-message__dismiss-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-message__dismiss-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-message__dismiss-button:active, .jkl-message__dismiss-button:hover, .jkl-message__dismiss-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-message__dismiss-button {
      stroke: ButtonText;
    }
    .jkl-message__dismiss-button svg, .jkl-message__dismiss-button path {
      stroke: ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-message__dismiss-button {
      background-color: ButtonFace;
    }
  }
  .jkl-message__dismiss-button::after {
    content: "";
    position: absolute;
    display: block;
    width: var(--jkl-message-dismiss-button-size);
    height: var(--jkl-message-dismiss-button-size);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .jkl-message__dismiss-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-message__dismiss-button:hover {
      stroke: ButtonText;
    }
    .jkl-message__dismiss-button:hover svg, .jkl-message__dismiss-button:hover path {
      stroke: ButtonText;
    }
  }
  .jkl-message__dismiss-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-message--full {
    max-width: 100%;
  }
  .jkl-message--info {
    --background-color: var(--jkl-color-background-alert-info);
  }
  .jkl-message--warning {
    --background-color: var(--jkl-color-background-alert-warning);
  }
  .jkl-message--error {
    --background-color: var(--jkl-color-background-alert-error);
  }
  .jkl-message--success {
    --background-color: var(--jkl-color-background-alert-success);
  }
  .jkl-message--dismissed {
    animation: jkl-dismiss-u5wtgcw 400ms ease-in-out forwards;
    transition: visibility 0ms 400ms;
    visibility: hidden;
  }
  @media screen and (forced-colors: active) {
    .jkl-message {
      border: 2px solid CanvasText;
    }
    .jkl-message--info {
      border-style: dotted;
    }
    .jkl-message--warning {
      border-style: dashed;
    }
    .jkl-message--error {
      border-style: double;
      border-width: 4px;
    }
  }
  .jkl-form-error-message {
    padding-bottom: calc(var(--jkl-unit-base) * 5);
  }
  @keyframes jkl-dismiss-u5wtgcw {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    to {
      opacity: 0;
      transform: translate3d(0, -50%, 0);
    }
  }
}
@layer jokul.components {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-radio-button-error-color: #ab2e43;
    }
  }
  [data-theme=light] {
    --jkl-radio-button-error-color: #ab2e43;
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-radio-button-error-color: #d79ba5;
    }
  }
  [data-theme=dark] {
    --jkl-radio-button-error-color: #d79ba5;
  }
  .jkl-radio-button {
    display: flex;
    position: relative;
  }
  .jkl-radio-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-radio-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-radio-button__input {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 1lh;
    inline-size: 1lh;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
  }
  .jkl-radio-button__input {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-radio-button__input {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-radio-button__label {
    cursor: pointer;
    display: flex;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-radio-button__label::before {
    content: "radio_button_unchecked";
    margin-inline-end: 0.25em;
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
  }
  .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
    border-radius: var(--jkl-border-radius-full);
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-radio-button__input:is(:hover, :active) + .jkl-radio-button__label, .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
    --jkl-icon-weight: 400;
  }
  .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
    content: "radio_button_checked";
  }
  .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
    color: var(--jkl-radio-button-error-color);
  }
  .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
    margin-top: 0.75lh;
  }
  .jkl-radio-button--inline {
    display: inline-flex;
    margin-right: var(--jkl-unit-30);
  }
  .jkl-radio-button--inline + .jkl-radio-button--inline, .jkl-dormant-form-support-label + .jkl-radio-button--inline, .jkl-form-support-label + .jkl-radio-button--inline {
    margin-top: 0;
  }
  .jkl-radio-button + .jkl-form-support-label {
    margin-left: 1.75em;
    margin-top: 0.25lh;
    margin-bottom: var(--jkl-unit-base);
  }
}
@layer jokul.components {
  .jkl-text-area-wrapper {
    overflow: hidden;
    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
        var(--jkl-text-input-horizontal-padding);
    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
    --jkl-text-input-action-button-size: var(--jkl-unit-60);
    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --background-color: var(--jkl-color-background-input-base);
    --border-color: var(--jkl-color-border-input);
    --placeholder-color: var(--jkl-color-text-subdued);
    border-radius: var(--jkl-border-radius-s);
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, box-shadow, background-color;
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
  }
  .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
    --background-color: var(--jkl-color-background-input-focus);
  }
  .jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
    --background-color: var(--jkl-color-background-alert-error);
    --text-color: var(--jkl-color-text-on-alert);
    --placeholder-color: color(from currentColor sRGB r g b / 75%);
  }
  .jkl-text-area-wrapper:hover, .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
    --border-color: var(--jkl-color-border-input-focus);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area-wrapper:hover, .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
      border: 0.125rem solid ButtonText;
    }
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-text-area-wrapper > .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -8px;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area-wrapper > .jkl-icon-button:focus-visible {
      --border-color: ButtonText;
    }
  }
  .jkl-text-area-wrapper > .jkl-text-input-action-button {
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--jkl-text-input-action-button-padding);
    height: var(--jkl-text-input-action-button-size);
    width: var(--jkl-text-input-action-button-size);
    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
  }
  .jkl-text-area-wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
    height: var(--jkl-text-input-action-button-icon-size);
    width: var(--jkl-text-input-action-button-icon-size);
  }
  .jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
      border: 0.125rem inset ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area-wrapper {
      border: 0.125rem inset ButtonText;
    }
  }
  .jkl-text-area {
    --text-input-height: var(--jkl-unit-60);
    --progress-bar-height: 0.25rem;
    height: auto;
    width: 100%;
  }
  .jkl-text-area__text-area {
    scrollbar-color: var(--jkl-color) transparent;
    box-sizing: border-box;
    resize: none;
    width: 100%;
    padding: var(--jkl-text-input-padding);
    max-height: var(--text-input-height);
    height: var(--text-input-height);
    min-height: var(--text-input-height);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: height, min-height, max-height, padding;
    background: none;
    -webkit-appearance: none;
    color: inherit;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text-area__text-area {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area__text-area {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-text-area__text-area:active, .jkl-text-area__text-area:hover, .jkl-text-area__text-area:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-text-area__text-area input[type=number]::-webkit-outer-spin-button,
  .jkl-text-area__text-area input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .jkl-text-area__text-area input[type=number] {
    -moz-appearance: textfield;
  }
  @media screen and (forced-colors: active) {
    .jkl-text-area__text-area {
      outline: none;
      border: none;
    }
    .jkl-text-area__text-area:focus-visible {
      outline: none;
    }
  }
  .jkl-text-area__text-area::placeholder {
    opacity: 1;
    color: var(--placeholder-color);
  }
  .jkl-text-area .jkl-text-area-wrapper {
    height: auto;
    max-height: 100%;
  }
  .jkl-text-area--start-open .jkl-text-area-wrapper {
    max-height: 100%;
  }
  .jkl-text-area--auto-expand .jkl-text-area__text-area {
    overflow: hidden;
  }
  .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area-wrapper {
    position: relative;
    padding-bottom: calc(var(--text-input-height) + var(--progress-bar-height));
  }
  .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter {
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
    padding: var(--jkl-text-input-padding);
    color: var(--text-color);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
    background-color: transparent;
    height: var(--progress-bar-height);
    width: 100%;
    overflow: hidden;
  }
  .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress::after {
    content: "";
    width: var(--progress-width, 100%);
    display: block;
    height: var(--progress-bar-height);
    background-color: var(--border-color);
    transition-property: width;
    transition-timing-function: ease;
    transition-duration: 400ms;
  }
  .jkl-text-area__text-area--3-rows:focus,
  .jkl-text-area__text-area--3-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--3-rows {
    --height: 3lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--4-rows:focus,
  .jkl-text-area__text-area--4-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--4-rows {
    --height: 4lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--5-rows:focus,
  .jkl-text-area__text-area--5-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--5-rows {
    --height: 5lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--6-rows:focus,
  .jkl-text-area__text-area--6-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--6-rows {
    --height: 6lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--7-rows:focus,
  .jkl-text-area__text-area--7-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--7-rows {
    --height: 7lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--8-rows:focus,
  .jkl-text-area__text-area--8-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--8-rows {
    --height: 8lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--9-rows:focus,
  .jkl-text-area__text-area--9-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--9-rows {
    --height: 9lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
  .jkl-text-area__text-area--10-rows:focus,
  .jkl-text-area__text-area--10-rows:not(:placeholder-shown),
  .jkl-text-area--start-open .jkl-text-area__text-area--10-rows {
    --height: 10lh;
    --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
    min-height: calc(var(--height) + var(--vertical-padding));
    height: calc(var(--height) + var(--vertical-padding));
    max-height: 100%;
  }
}
@layer jokul.components {
  .jkl-file {
    --jkl-file-padding: var(--jkl-unit-10);
    --jkl-file-thumbnail-width: var(--jkl-unit-70);
    --jkl-file-thumbnail-max-height: var(--jkl-unit-90);
    --jkl-file-thumbnail-aspect-ratio: 1;
    --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
    --jkl-file-button-width: var(--jkl-unit-50);
    --text-color: var(--jkl-color-text-default);
    --border: 1px solid var(--jkl-color-border-separator);
    --border-radius: 2px;
    --bg: transparent;
    --transition-time: 250ms;
  }
  .jkl-file__content {
    transition-timing-function: ease;
    transition-duration: 100ms;
    transition-property: background-color, border-color, color;
    color: var(--text-color);
    padding: var(--jkl-file-padding);
    border: var(--border);
    border-radius: var(--border-radius);
    background: var(--bg);
    display: grid;
    grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);
    grid-template-areas: "image text button";
    gap: var(--jkl-file-gap);
    align-items: center;
    height: fit-content;
  }
  .jkl-file__content__name {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
    grid-area: text;
    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
    word-break: break-word;
  }
  .jkl-file__content__name__size {
    word-break: keep-all;
  }
  .jkl-file__content__delete {
    aspect-ratio: 1;
    grid-area: button;
  }
  .jkl-file__content__thumbnail {
    width: 100%;
    aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
    object-fit: cover;
    max-height: var(--jkl-file-thumbnail-max-height);
    grid-area: image;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jkl-color-background-container-low);
    border-radius: 2px;
    overflow: hidden;
    container-type: inline-size;
    anchor-name: --thumb;
    anchor-scope: all;
    outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
  }
  .jkl-file__content__thumbnail::before, .jkl-file__content__thumbnail::after {
    position: absolute;
    z-index: 1;
  }
  .jkl-file__content__thumbnail::after {
    content: ""/"Laster opp";
    position-anchor: --thumb;
    position-area: center;
    height: 25%;
    border-radius: 1px;
    aspect-ratio: 1;
    scale: 0;
    background: var(--text-color);
    animation: spin 5s infinite forwards linear;
    transition: display var(--transition-time) allow-discrete ease-in, scale var(--transition-time) ease-in;
  }
  @starting-style {
    .jkl-file__content__thumbnail::after {
      scale: 0;
    }
  }
  .jkl-file__content__thumbnail img {
    opacity: 1;
    transition: opacity var(--transition-time) ease-in-out;
  }
  .jkl-file__content__thumbnail img[src] {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .jkl-file[class*=card] {
    --jkl-file-thumbnail-width: 100%;
    --jkl-file-thumbnail-aspect-ratio: 16/9;
  }
  .jkl-file[class*=card] .jkl-file__content {
    grid-template-columns: 1fr var(--jkl-file-button-width);
    grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
    grid-template-areas: "image image" "text button";
  }
  .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
    content: attr(data-filetype);
  }
  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
    opacity: 0;
  }
  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail::after {
    display: block;
    scale: 1;
  }
  .jkl-file[data-state=error] {
    --bg: var(--jkl-color-functional-error);
  }
  .jkl-file[data-state=error],
  .jkl-file[data-state=error] a,
  .jkl-file[data-state=error] a:hover,
  .jkl-file[data-state=error] button,
  .jkl-file[data-state=error] span {
    --text-color: var(--jkl-color-text-on-alert);
    --link-color: var(--text-color);
    --jkl-color-border-action: currentColor;
  }
  @keyframes spin {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }
}
@layer jokul.components {
  .jkl-file-input {
    --jkl-file-input-dropzone-padding: var(--jkl-unit-30);
    --jkl-file-input-dropzone-gap: var(--jkl-unit-30);
    --jkl-file-cta-gap: var(--jkl-unit-30);
    --jkl-file-cta-with-files-gap: var(--jkl-unit-15);
    --jkl-file-list-gap: var(--jkl-unit-10);
  }
  .jkl-file-input__dropzone {
    --border-color: var(--jkl-color-border-input);
    --background-color: transparent;
    border: var(--border-color) 1px dashed;
    border-radius: 0.25rem;
    padding: var(--jkl-file-input-dropzone-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--jkl-file-input-dropzone-gap);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: background-color;
    background-color: var(--background-color);
  }
  .jkl-file-input__dropzone--enter {
    --border-color: var(--jkl-color-border-input-focus);
    --background-color: var(--jkl-color-background-container-high);
    border-style: solid;
  }
  .jkl-file-input__dropzone__drag-text {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-file-input__dropzone__drag-text {
      display: none;
    }
  }
  .jkl-file-input__call-to-action {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button {
    transform: scale(1.05);
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active {
    transform: scale(1);
  }
  .jkl-file-input__dropzone-hint {
    margin-top: var(--jkl-unit-30);
  }
  .jkl-file-input--has-files .jkl-file-input__dropzone-hint {
    display: none;
  }
  .jkl-file-input__max-size-text {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--jkl-color-text-subdued);
    margin-top: var(--jkl-unit-30);
  }
  .jkl-file-input__files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--jkl-file-list-gap);
  }
  .jkl-file-input--small .jkl-file-input__dropzone-hint {
    margin: 0;
    display: block;
  }
  .jkl-file-input--small .jkl-file-input__dropzone {
    padding: var(--jkl-unit-20);
    gap: var(--jkl-unit-20);
    margin-bottom: var(--jkl-unit-20);
    justify-content: flex-start;
    flex-direction: row;
    max-width: fit-content;
  }
  .jkl-file-input--small .jkl-file-input__call-to-action {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    gap: calc(var(--jkl-unit-base) * 1.5);
    flex-direction: row;
    justify-content: flex-start;
  }
  .jkl-file-input--small .jkl-file-input__max-size-text {
    margin-top: calc(-1 * var(--jkl-unit-15));
    margin-bottom: var(--jkl-unit-20);
  }
}
@layer jokul.components {
  .jkl-link-list {
    --border: 1px solid var(--jkl-color-border-separator);
    --text-color: var(--jkl-color-text-default);
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-link-list .jkl-link-list-title {
    margin-block-end: var(--jkl-unit-10);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-link-list ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    height: min-content;
    border-radius: var(--jkl-unit-05);
    background: var(--jkl-color-background-container-low);
  }
  .jkl-link-list ul .jkl-link-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jkl-unit-20);
    width: 100%;
    text-decoration: none;
    color: var(--text-color);
    text-wrap: balance;
    box-sizing: border-box;
    padding: var(--jkl-unit-20);
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: background;
  }
  .jkl-link-list ul .jkl-link-list-link::after {
    content: "arrow_forward"/"";
    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-size: 1.3em;
    font-weight: var(--jkl-icon-weight, 300);
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    transition-timing-function: ease;
    transition-duration: 75ms;
    transition-property: font-variation-settings, transform;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: translate;
  }
  .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
    background: var(--jkl-color-background-interactive-selected);
  }
  .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
    translate: 4px 0;
  }
  .jkl-link-list ul .jkl-link-list-link:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-link-list .jkl-link-list-item {
    display: flex;
  }
  .jkl-link-list .jkl-link-list-item:not(:last-of-type) .jkl-link-list-link {
    border-block-end: var(--border);
  }
  .jkl-link-list:has(ul) .jkl-link-list-title {
    margin-inline-start: var(--jkl-unit-05);
  }
}
@layer jokul.components {
  .jkl-logo {
    color: var(--jkl-color-text-default);
  }
  @media screen and (forced-colors: active) {
    .jkl-logo {
      stroke: CanvasText;
      fill: CanvasText;
    }
    .jkl-logo svg, .jkl-logo path {
      stroke: CanvasText;
      fill: CanvasText;
    }
  }
  .jkl-logo__F {
    /* Is connected to the viewbox of the logo, change at your own risk */
    transform-origin: 30px 132px;
  }
  .jkl-logo__F-line {
    /* Must be the same as the line x1 origin, change at your own risk */
    transform-origin: 34.3px;
  }
  .jkl-logo__fremtind {
    opacity: 1;
  }
  .jkl-logo--symbol-only .jkl-logo__F {
    transform: rotate(45deg);
  }
  .jkl-logo--symbol-only .jkl-logo__F-line {
    transform: scaleX(1.5);
  }
  .jkl-logo--symbol-only .jkl-logo__fremtind {
    transition-delay: 0ms;
    opacity: 0;
    transform: translateX(-5%);
  }
  .jkl-logo--animated .jkl-logo__F {
    transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
  }
  .jkl-logo--animated .jkl-logo__F-line {
    transition: transform 250ms ease-in;
  }
  .jkl-logo--animated .jkl-logo__fremtind {
    transition: opacity 250ms 75ms ease-in, transform 250ms ease;
  }
  .jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
    transform: translateX(35%) rotate(45deg);
  }
  .jkl-logo-stamp {
    color: var(--logo-stamp-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-logo-stamp {
      stroke: CanvasText;
      fill: CanvasText;
    }
    .jkl-logo-stamp svg, .jkl-logo-stamp path {
      stroke: CanvasText;
      fill: CanvasText;
    }
  }
  .jkl-logo-stamp--animated .jkl-logo-stamp__text {
    transform-origin: 256px 256px;
    transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
    transition-duration: 150ms;
    transition-property: transform;
  }
  .jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
    transition-duration: 1500ms;
    transform: rotate(360deg);
  }
}
@layer jokul.components {
  .jkl-menu-item {
    --jkl-menu-item-height: var(--jkl-unit-60);
    --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-30);
    --background-color: var(--jkl-color-background-interactive);
    background-color: var(--background-color);
    color: var(--jkl-color-text-default);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    display: flex;
    align-items: center;
    gap: var(--jkl-unit-10);
    width: 100%;
    height: var(--jkl-menu-item-height);
    padding: var(--jkl-menu-item-padding);
  }
  .jkl-menu-item {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-menu-item {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-menu-item__content {
    display: flex;
    gap: var(--jkl-unit-05);
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
  }
  .jkl-menu-item__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .jkl-menu-item__arrow {
    display: flex;
    align-items: center;
  }
  .jkl-menu-item__chevron {
    flex-shrink: 0;
  }
  .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
    --background-color: var(--jkl-color-background-interactive-hover);
  }
}
@layer jokul.components {
  .jkl-menu-divider {
    width: 100%;
    margin-block: 0;
    border: none;
    border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
  }
}
@layer jokul.components {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-menu-border-color: transparent;
    }
  }
  [data-theme=light] {
    --jkl-menu-border-color: transparent;
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-menu-border-color: var(--jkl-color-border-input-focus);
    }
  }
  [data-theme=dark] {
    --jkl-menu-border-color: var(--jkl-color-border-input-focus);
  }
  .jkl-menu {
    background-color: var(--jkl-color-background-container-high);
    width: 100%;
    max-width: 21rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
    border-radius: 0.125rem;
    border: 2px solid var(--jkl-menu-border-color);
    z-index: 7000;
  }
  .jkl-menu:focus-visible {
    outline: none;
  }
  .jkl-menu .jkl-menu[data-placement=bottom-start] {
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 2px 0, rgba(0, 0, 0, 0.14) -1px 2px 2px 0, rgba(0, 0, 0, 0.12) 3px 1px 5px 0;
  }
}
@layer jokul.components {
  .jkl-nav-link {
    color: var(--jkl-color-text-default);
    box-sizing: border-box;
    font-weight: var(--jkl-typography-weight-normal);
    text-decoration: none;
    position: relative;
    padding-right: 0.15rem;
    margin-right: -0.15rem;
  }
  .jkl-nav-link {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-nav-link {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-nav-link:hover:not(:focus) {
    color: var(--jkl-color-text-subdued);
  }
  .jkl-nav-link:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
    transform: translateX(0.3rem);
  }
  .jkl-nav-link__icon {
    margin-inline-start: 0.1em;
    margin-block-start: -0.1em;
    vertical-align: middle;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: transform;
  }
  .jkl-nav-link--active {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  .jkl-nav-link--back {
    padding-right: 0;
    margin-right: 0;
    padding-left: 0.15rem;
    margin-left: -0.15rem;
  }
  .jkl-nav-link--back .jkl-nav-link__icon {
    margin-inline: 0 0.1em;
  }
  .jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
    padding-left: 0;
    transform: translateX(-0.3rem);
  }
}
.jkl-navlink--beta {
  --border-radius: 4px;
  --separator: 1px solid var(--jkl-color-border-separator);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 2em;
  color: inherit;
  text-decoration: none;
  background-color: var(--jkl-color-background-container-low);
  padding: var(--jkl-spacing-s);
  border-radius: 0;
  font-size: var(--jkl-font-size-3);
  line-height: var(--jkl-line-height-relaxed);
  font-weight: 400;
  --jkl-icon-weight: 300;
  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
  transition-duration: 150ms;
  transition-property: background-color;
}
.jkl-navlink--beta .title,
.jkl-navlink--beta .description {
  grid-column: 1;
}
.jkl-navlink--beta:has(.description) .title {
  font-weight: bold;
}
.jkl-navlink--beta::after {
  content: "arrow_forward"/"";
  grid-column: 2;
  grid-row: 1/span 999;
  translate: 0;
  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-size: 1.3em;
  font-weight: var(--jkl-icon-weight, 300);
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  transition-timing-function: ease;
  transition-duration: 75ms;
  transition-property: font-variation-settings, transform;
  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
  transition-duration: 150ms;
  transition-property: translate;
}
.jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
  background-color: var(--jkl-color-background-interactive-selected);
}
.jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
  translate: 4px 0;
}
.jkl-navlink--beta:first-of-type {
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}
.jkl-navlink--beta:last-of-type {
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}
.jkl-navlink--beta:has(+ .jkl-navlink--beta) {
  border-block-end: var(--separator);
}

@layer jokul.components {
  .jkl-number-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .jkl-number-input__wrapper {
    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
        var(--jkl-text-input-horizontal-padding);
    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
    --jkl-text-input-action-button-size: var(--jkl-unit-60);
    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --background-color: var(--jkl-color-background-input-base);
    --border-color: var(--jkl-color-border-input);
    --placeholder-color: var(--jkl-color-text-subdued);
    border-radius: var(--jkl-border-radius-s);
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, box-shadow, background-color;
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
  }
  .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
    --background-color: var(--jkl-color-background-input-focus);
  }
  .jkl-number-input__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
    --background-color: var(--jkl-color-background-alert-error);
    --text-color: var(--jkl-color-text-on-alert);
    --placeholder-color: color(from currentColor sRGB r g b / 75%);
  }
  .jkl-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
    --border-color: var(--jkl-color-border-input-focus);
    box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__wrapper:hover, .jkl-number-input__wrapper:focus-within, .jkl-number-input__wrapper:has([data-focused=true]) {
      border: 0.125rem solid ButtonText;
    }
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-text-area__text-area:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -8px;
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__wrapper > .jkl-icon-button:focus-visible {
      --border-color: ButtonText;
    }
  }
  .jkl-number-input__wrapper > .jkl-text-input-action-button {
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--jkl-text-input-action-button-padding);
    height: var(--jkl-text-input-action-button-size);
    width: var(--jkl-text-input-action-button-size);
    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
  }
  .jkl-number-input__wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
    height: var(--jkl-text-input-action-button-icon-size);
    width: var(--jkl-text-input-action-button-icon-size);
  }
  .jkl-number-input__wrapper > .jkl-text-input-action-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__wrapper > .jkl-text-input-action-button:hover {
      border: 0.125rem inset ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__wrapper {
      border: 0.125rem inset ButtonText;
    }
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-number-input__wrapper:has(.jkl-number-input__input:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-number-input__wrapper:has(.jkl-number-input__input:invalid):not(:focus-within):not(:has([data-focused=true])) {
    --background-color: var(--jkl-color-background-alert-error);
    --text-color: var(--jkl-color-text-on-alert);
    --placeholder-color: color(from currentColor sRGB r g b / 75%);
  }
  .jkl-number-input__wrapper--stepper {
    --jkl-number-input-stepper-min-width: calc(
        3ch + (var(--jkl-text-input-horizontal-padding) * 2)
    );
    --jkl-number-input-stepper-text-color: var(--text-color);
    display: grid;
    grid-template-columns: max-content minmax(var(--jkl-number-input-stepper-min-width), 1fr) max-content;
    overflow: hidden;
  }
  .jkl-number-input__wrapper--stepper:has(button[data-direction]:focus-visible) {
    overflow: visible;
  }
  .jkl-number-input__input {
    padding: var(--jkl-text-input-padding);
    width: 100%;
    appearance: textfield;
    -moz-appearance: textfield;
    background: none;
    -webkit-appearance: none;
    color: inherit;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-number-input__input {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__input {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-number-input__input:active, .jkl-number-input__input:hover, .jkl-number-input__input:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-number-input__input input[type=number]::-webkit-outer-spin-button,
  .jkl-number-input__input input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .jkl-number-input__input input[type=number] {
    -moz-appearance: textfield;
  }
  @media screen and (forced-colors: active) {
    .jkl-number-input__input {
      outline: none;
      border: none;
    }
    .jkl-number-input__input:focus-visible {
      outline: none;
    }
  }
  .jkl-number-input__input::placeholder {
    opacity: 1;
    color: var(--placeholder-color);
  }
  .jkl-number-input__input::-webkit-inner-spin-button, .jkl-number-input__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .jkl-number-input__input--align-right {
    text-align: right;
  }
  .jkl-number-input__input--stepper {
    box-sizing: border-box;
    min-inline-size: var(--jkl-number-input-stepper-min-width);
    text-align: center;
  }
  .jkl-number-input button[data-direction] {
    --text-color: var(--jkl-number-input-stepper-text-color);
    aspect-ratio: 1;
    padding: 0;
    display: inline-grid;
    place-items: center;
    text-align: center;
    height: 100%;
  }
  .jkl-number-input button[data-direction]::before {
    content: "";
    position: absolute;
    width: 1px;
    inset-block: 20%;
    background-color: var(--jkl-color-border-separator);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: inset;
  }
  .jkl-number-input button[data-direction]:hover::before, .jkl-number-input button[data-direction]:focus-visible::before {
    inset-block: 0.0625rem;
  }
  .jkl-number-input button[data-direction]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .jkl-number-input button[data-direction=decrement]::before {
    inset-inline-end: 0;
  }
  .jkl-number-input button[data-direction=increment]::before {
    inset-inline-start: 0;
  }
  .jkl-number-input button[data-direction].jkl-button {
    border-radius: 0;
  }
  .jkl-number-input button[data-direction].jkl-button .jkl-icon {
    margin-block-start: 0.4ex;
  }
}
@layer jokul.components {
  .jkl-pagination {
    display: flex;
  }
  .jkl-pagination__pages {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }
  .jkl-pagination-button {
    --button-size: var(--jkl-unit-40);
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--button-size);
    min-width: var(--button-size);
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-radius: 0.1875rem;
    color: var(--jkl-color-text-interactive);
  }
  .jkl-pagination-button:hover:not(:focus) {
    color: var(--jkl-color-text-interactive-hover);
  }
  .jkl-pagination-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-pagination-button--current {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  .jkl-pagination-button--elipsis {
    display: block;
    user-select: none;
    text-align: center;
    height: var(--button-size);
    width: var(--button-size);
  }
}
@layer jokul.components {
  .jkl-select {
    --jkl-select-arrow-right: var(--jkl-unit-05);
    --border-width: 0.0625rem;
    --border-radius: var(--jkl-border-radius-s);
    --min-option-height: min(var(--jkl-unit-60), 3rem);
    /* Vi må trekke fra bredden til rammen for å få riktig høyde */
    --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
        calc(0.75em - var(--border-width));
    --option-padding: var(--jkl-unit-05) 0.75em;
    display: block;
    position: relative;
  }
  .jkl-select {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-select {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-select *:focus-visible {
    outline: none;
  }
  .jkl-select .jkl-tooltip-question-button:focus {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 0;
  }
  .jkl-select select {
    appearance: none;
  }
  .jkl-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--jkl-color-text-subdued);
  }
  .jkl-select select option {
    font-weight: normal;
    font-family: sans-serif;
    color: var(--jkl-color-text-subdued);
    background-color: var(--jkl-color-background-container-high);
  }
  .jkl-select__outer-wrapper {
    position: relative;
    width: 15rem;
    min-width: 7rem;
    max-width: 100%;
  }
  .jkl-select__search-input {
    box-sizing: border-box;
    color: var(--jkl-color-text-subdued);
  }
  .jkl-select__search-input, .jkl-select__button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: transparent;
    color: var(--jkl-color-text-subdued);
    cursor: pointer;
    height: var(--jkl-select-input-height);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--jkl-color-border-input);
    box-shadow: 0 0 0 0.0625rem transparent;
    text-align: left;
    width: 100%;
    padding: var(--button-padding);
    /* Øk padding for å gi plass til ikonet */
    padding-inline-end: 2.05em;
    transition-property: color, border-color, box-shadow;
    transition-timing-function: ease;
    transition-duration: 150ms;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-select__search-input--active-value, .jkl-select__button--active-value {
    color: var(--jkl-color-text-default);
  }
  .jkl-select__search-input:hover, .jkl-select__button:hover {
    border-color: var(--jkl-color-border-input-focus);
    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
  }
  .jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
    transform: translateY(calc(-50% + 0.1875rem));
  }
  .jkl-select__search-input:focus-visible, .jkl-select__button:focus-visible {
    outline: none;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible) {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-select__arrow {
    pointer-events: none;
    position: absolute;
    right: 0.75em;
    top: 50%;
    color: var(--jkl-color-text-default);
    transform: translateY(-50%);
    transition-property: transform, color;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  @media screen and (forced-colors: active) {
    .jkl-select__arrow {
      stroke: CanvasText;
      fill: CanvasText;
    }
    .jkl-select__arrow svg, .jkl-select__arrow path {
      stroke: CanvasText;
      fill: CanvasText;
    }
  }
  .jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
    color: var(--jkl-color-text-on-alert);
  }
  .jkl-select__options-menu {
    position: absolute;
    left: -0.0625rem;
    right: -0.0625rem;
    top: 100%;
    z-index: 7000;
    background-color: var(--jkl-color-background-container-high);
    border: 0.125rem solid var(--jkl-color-border-input-focus);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-sizing: border-box;
    overflow-y: auto;
    max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
    transition-property: height;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  .jkl-select__option-wrapper {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-overflow-scrolling: touch;
  }
  .jkl-select__option {
    color: unset;
    border: 0;
    width: 100%;
    background-color: inherit;
    min-height: var(--min-option-height);
    text-align: left;
    transition-property: color, background-color;
    position: relative;
    padding: var(--option-padding);
    cursor: pointer;
    transition-timing-function: ease;
    transition-duration: 150ms;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
    komponenten med data-focus="controlled". Uten dette satt vil valgene
    markeres ved hover som normalt. */
  }
  .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-interactive-hover);
  }
  .jkl-select__option-description {
    color: var(--jkl-color-text-subdued);
    display: block;
    width: 100%;
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-select {
    /* --------
    VARIANTS
    -------- */
  }
  .jkl-select--inline {
    display: inline-block;
    vertical-align: top;
  }
  .jkl-select--open .jkl-select__search-input,
  .jkl-select--open .jkl-select__button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--jkl-color-border-input-focus);
    background-color: var(--jkl-color-background-container-high);
    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
  }
  .jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
  .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
    transform: translateY(calc(-50% + -0.1875rem));
  }
  .jkl-select--invalid .jkl-select__search-input,
  .jkl-select--invalid .jkl-select__button {
    background-color: var(--jkl-color-background-alert-error);
    color: var(--jkl-color-text-on-alert-subdued);
  }
  .jkl-select--invalid .jkl-select__search-input--active-value,
  .jkl-select--invalid .jkl-select__button--active-value {
    color: revert;
  }
  @media screen and (forced-colors: active) {
    .jkl-select .jkl-select__button, .jkl-select .jkl-select__search-input {
      color: CanvasText;
      border: 2px solid ButtonText;
      background-color: Canvas;
      outline: revert;
    }
    .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
      border-color: Highlight;
    }
    .jkl-select .jkl-select__option {
      color: CanvasText;
      border-top: 1px solid Canvas;
      border-bottom: 1px solid Canvas;
    }
    .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
      border-top: 1px solid SelectedItem;
      border-bottom: 1px solid SelectedItem;
      --jkl-icon-weight: 400;
      font-weight: 700;
      letter-spacing: -0.014em;
    }
  }
}
@layer jokul.components {
  .jkl-progress-bar {
    --track-color: var(--jkl-color-border-separator);
    --bar-color: var(--jkl-color-border-input-focus);
    --bar-height: 0.25rem;
    background-color: var(--track-color);
    border-radius: 6.25rem;
    height: var(--bar-height);
    width: 100%;
    overflow: hidden;
  }
  .jkl-progress-bar__tracker {
    display: block;
    height: var(--bar-height);
    background-color: var(--bar-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-progress-bar {
      background-color: Canvas;
    }
    .jkl-progress-bar__tracker {
      background-color: CanvasText;
    }
  }
  .jkl-progress-bar {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-progress-bar {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-progress-bar:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-progress-bar__tracker {
    transition-property: width;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  @keyframes jkl-downcount-u5wtgd2 {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }
}
@layer jokul.components {
  .jkl-radio-panel .jkl-radio-button {
    /* Visuell justering pga. rundt ikon */
    margin-inline-start: -0.15em;
  }
  .jkl-radio-panel .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
    outline: none;
  }
}
.jkl-select--beta {
  --border-color: var(--jkl-color-border-input);
  --background-color: transparent;
  --color: var(--jkl-color-text-default);
  --box-shadow: 0 0 0 jkl.rem(1px) transparent;
  --border-width: 0.0625rem;
  --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
  --arrow-right: calc(var(--jkl-unit-base) * 0.25);
  display: block;
  position: relative;
}
.jkl-select--beta {
  outline: 0;
  border-style: none;
  outline-style: none;
}
.jkl-select--beta:active, .jkl-select--beta:hover, .jkl-select--beta:focus {
  outline: 0;
  outline-style: none;
}
@media screen and (forced-colors: active) {
  .jkl-select--beta {
    outline: revert;
    border-style: revert;
    outline-style: revert;
  }
  .jkl-select--beta:active, .jkl-select--beta:hover, .jkl-select--beta:focus {
    outline: revert;
    outline-style: revert;
  }
}
.jkl-select--beta *:focus-visible {
  outline: none;
}
.jkl-select--beta .jkl-tooltip-question-button:focus {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 0;
}
.jkl-select--beta-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.jkl-select--beta select, .jkl-select--beta .jkl-icon {
  grid-row: 1;
}
.jkl-select--beta select {
  background-color: var(--background-color);
  color: var(--color);
  box-shadow: var(--box-shadow);
  padding: var(--button-padding);
  padding-inline-end: calc(var(--button-padding) + 1.3em);
  height: var(--input-height);
  grid-column: 1/-1;
  appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--jkl-border-radius-s);
  text-align: left;
  width: 100%;
  transition-property: color, border-color, box-shadow;
}
.jkl-select--beta select:has(option:checked[value=""]) {
  --color: var(--jkl-color-text-subdued);
}
.jkl-select--beta select:hover {
  --border-color: var(--jkl-color-border-input-focus);
  --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
}
.jkl-select--beta select:invalid {
  --background-color: var(--jkl-color-background-alert-error);
  --color: var(--jkl-color-text-on-alert-subdued);
}
.jkl-select--beta select:focus-visible {
  outline: none;
}
.jkl-select--beta select {
  transition-timing-function: ease;
  transition-duration: 150ms;
  font-size: var(--jkl-font-size-3);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
}
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}

.jkl-select--beta .jkl-icon {
  pointer-events: none;
  grid-column: 2;
  padding-inline-end: var(--button-padding);
}

.jkl-search {
  --icon-size: var(--jkl-text-input-height);
  --border-radius: var(--jkl-border-radius-s);
  --border-width: 1px;
  --border: var(--border-width) solid var(--jkl-color-border-input);
  width: 100%;
  font-size: var(--jkl-font-size-3);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
}
.jkl-search input[type=search] {
  appearance: none;
  padding: 0;
  background-color: transparent;
  color: var(--jkl-color-text-default);
  grid-column: 2/3;
}
.jkl-search input[type=search] {
  outline: 0;
  border-style: none;
  outline-style: none;
}
.jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
  outline: 0;
  outline-style: none;
}
@media screen and (forced-colors: active) {
  .jkl-search input[type=search] {
    outline: revert;
    border-style: revert;
    outline-style: revert;
  }
  .jkl-search input[type=search]:active, .jkl-search input[type=search]:hover, .jkl-search input[type=search]:focus {
    outline: revert;
    outline-style: revert;
  }
}
.jkl-search input[type=search] {
  font-size: var(--jkl-font-size-3);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
}
.jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
  appearance: none;
  display: none !important;
}
.jkl-search .input-wrapper {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.3em 1fr;
  gap: 0.25em;
  border: var(--border);
  border-radius: var(--border-radius);
  padding-inline-end: 0;
  padding: calc(var(--jkl-unit-15) - var(--border-width));
}
.jkl-search .input-wrapper::before {
  content: attr(data-icon)/"";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  grid-column: 1;
  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", monospace;
}
.jkl-search .input-wrapper:has(.clear-button) {
  grid-template-columns: 1.3em 1fr 1.3em;
}
.jkl-search:has(input:not(:valid), input:placeholder-shown) .clear-button {
  display: none;
}
.jkl-search .clear-button {
  position: relative;
  display: grid;
  appearance: none;
  background-color: transparent;
  border: 0;
  height: 100%;
  padding: 0;
  cursor: pointer;
  color: var(--jkl-color-text-default);
  border-radius: 100%;
}
.jkl-search .clear-button::before {
  content: "close"/"";
  display: inline-grid;
  align-items: center;
  justify-content: center;
  place-self: center;
  align-self: center;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-size: 1.3em;
  font-weight: var(--jkl-icon-weight, 300);
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  transition-timing-function: ease;
  transition-duration: 75ms;
  transition-property: font-variation-settings, transform;
}
.jkl-search .clear-button::after {
  --tap-size: 1.25lh;
  content: "";
  position: absolute;
  inset: calc((var(--tap-size) - 100%) / 2 * -1);
  background-color: var(--jkl-color-text-default);
  opacity: 0;
  border-radius: inherit;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: opacity;
}
.jkl-search .clear-button:hover::after {
  opacity: 0.15;
}
.jkl-search .clear-button:focus-visible {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}

.jkl-search:has(button.jkl-search-submit) {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: end;
}
.jkl-search:has(button.jkl-search-submit) .input-wrapper {
  border-inline-end: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit {
  height: 100%;
  border: var(--border);
  border-inline-start: 0;
  border-radius: var(--jkl-border-radius-s);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-width: unset;
}
.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit::before {
  content: "";
  position: absolute;
  width: 1px;
  inset: 0;
  inset-block: 20%;
  background-color: var(--jkl-color-border-separator);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: inset;
}
.jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
  inset-block: 0;
}

@layer jokul.components {
  .jkl-segmented-control {
    --jkl-segmented-controls-padding: var(--jkl-unit-10) var(--jkl-unit-20);
    --jkl-segmented-controls-margin: 1.5ch;
  }
  .jkl-segmented-control .jkl-segmented-control-legend {
    margin-block-end: 0.25lh;
  }
  .jkl-segmented-control .jkl-segmented-control-item {
    --jkl-segmented-control-border-width: 1px;
    --jkl-segmented-controls-border-radius: 2lh;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: var(--jkl-color-background-interactive);
    border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);
    border-radius: 0;
    margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
    margin-block-end: 0.5lh;
    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
    transition-duration: 250ms;
    transition-property: border background;
  }
  .jkl-segmented-control .jkl-segmented-control-item label {
    cursor: pointer;
    padding: var(--jkl-segmented-controls-padding);
  }
  .jkl-segmented-control .jkl-segmented-control-item:hover {
    background-color: var(--jkl-color-background-interactive-hover);
    border-color: var(--jkl-color-border-separator-hover);
    z-index: 2;
  }
  .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
    background-color: var(--jkl-color-background-container-high);
    border-color: var(--jkl-color-border-separator);
    z-index: 1;
  }
  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
    border-radius: var(--jkl-segmented-controls-border-radius);
    margin-inline-start: var(--jkl-segmented-controls-margin);
  }
  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type {
    margin-inline-start: 0;
  }
  .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) + span + .jkl-segmented-control-item {
    border-end-start-radius: var(--jkl-segmented-controls-border-radius);
    border-start-start-radius: var(--jkl-segmented-controls-border-radius);
    margin-inline-start: var(--jkl-segmented-controls-margin);
  }
  .jkl-segmented-control .jkl-segmented-control-item:first-of-type {
    border-end-start-radius: var(--jkl-segmented-controls-border-radius);
    border-start-start-radius: var(--jkl-segmented-controls-border-radius);
  }
  .jkl-segmented-control .jkl-segmented-control-item:last-of-type {
    border-end-end-radius: var(--jkl-segmented-controls-border-radius);
    border-start-end-radius: var(--jkl-segmented-controls-border-radius);
  }
  .jkl-segmented-control .jkl-segmented-control-item:has(+ span + .jkl-segmented-control-item > input[data-separated=true]) {
    border-end-end-radius: var(--jkl-segmented-controls-border-radius);
    border-start-end-radius: var(--jkl-segmented-controls-border-radius);
  }
}
@layer jokul.components {
  .jkl-summary-table {
    display: flex;
    flex-direction: column;
    overflow-wrap: anywhere;
    width: 100%;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-summary-table tr {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--jkl-unit-10);
  }
  .jkl-summary-table th,
  .jkl-summary-table td {
    flex-basis: 50%;
    padding-right: var(--jkl-unit-20);
  }
  .jkl-summary-table th:first-child,
  .jkl-summary-table td:first-child {
    text-align: left;
  }
  .jkl-summary-table th:last-child,
  .jkl-summary-table td:last-child {
    text-align: right;
    padding-right: 0;
  }
  .jkl-summary-table > tbody th {
    font-weight: 400;
  }
  .jkl-summary-table > tfoot {
    border-top: 0.0625rem solid var(--jkl-color-border-separator-strong);
    border-bottom: 0.0625rem solid var(--jkl-color-border-separator-strong);
    padding-top: var(--jkl-unit-10);
  }
  .jkl-summary-table > tfoot th,
  .jkl-summary-table > tfoot td {
    font-weight: var(--jkl-typography-weight-bold);
  }
}
@layer jokul.components {
  .jkl-system-message {
    --jkl-system-message-content-padding: var(--jkl-unit-30);
    --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
    --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
        auto;
    --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
    --background-color: var(--jkl-color-background-alert-neutral);
    --text-color: var(--jkl-color-text-on-alert);
    width: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
    transition-behavior: allow-discrete;
    box-sizing: border-box;
  }
  .jkl-system-message__content {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    box-sizing: border-box;
    padding: var(--jkl-system-message-content-padding);
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    align-items: start;
    width: 100%;
    margin: 0 auto;
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__icon {
      stroke: CanvasText;
    }
    .jkl-system-message__icon svg, .jkl-system-message__icon path {
      stroke: CanvasText;
    }
  }
  .jkl-system-message__message {
    margin: var(--jkl-system-message-message-margin);
  }
  .jkl-system-message__dismiss-button {
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-content: center;
    position: relative;
    color: inherit;
  }
  .jkl-system-message__dismiss-button::after {
    content: "";
    position: absolute;
    display: block;
    width: var(--jkl-system-message-dismiss-button-size);
    height: var(--jkl-system-message-dismiss-button-size);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__dismiss-button {
      stroke: ButtonText;
    }
    .jkl-system-message__dismiss-button svg, .jkl-system-message__dismiss-button path {
      stroke: ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__dismiss-button {
      background-color: ButtonFace;
    }
  }
  .jkl-system-message__dismiss-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-system-message__dismiss-button:active, .jkl-system-message__dismiss-button:hover, .jkl-system-message__dismiss-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__dismiss-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-system-message__dismiss-button:active, .jkl-system-message__dismiss-button:hover, .jkl-system-message__dismiss-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-system-message__dismiss-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__dismiss-button:hover {
      stroke: ButtonText;
    }
    .jkl-system-message__dismiss-button:hover svg, .jkl-system-message__dismiss-button:hover path {
      stroke: ButtonText;
    }
  }
  .jkl-system-message__dismiss-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message__dismiss-button:focus-visible {
      outline: 2px solid ButtonText;
      outline-offset: 2px;
    }
  }
  .jkl-system-message__message, .jkl-system-message__message:last-child {
    margin-bottom: 0;
  }
  .jkl-system-message--dismissed {
    animation: jkl-dismiss-u5wtgeh 400ms forwards;
    transition: block 400ms 400ms;
  }
  .jkl-system-message--info {
    --background-color: var(--jkl-color-background-alert-info);
  }
  .jkl-system-message--warning {
    --background-color: var(--jkl-color-background-alert-warning);
  }
  .jkl-system-message--error {
    --background-color: var(--jkl-color-background-alert-error);
  }
  .jkl-system-message--success {
    --background-color: var(--jkl-color-background-alert-success);
  }
  @media screen and (forced-colors: active) {
    .jkl-system-message {
      border: 2px solid CanvasText;
    }
    .jkl-system-message--info {
      border-style: dotted;
    }
    .jkl-system-message--warning {
      border-style: dashed;
    }
    .jkl-system-message--error {
      border-style: double;
      border-width: 4px;
    }
  }
  @keyframes jkl-dismiss-u5wtgeh {
    from {
      opacity: 1;
      transform: translateY(0);
      filter: saturate(1);
      display: block;
    }
    to {
      opacity: 0;
      transform: translateY(-10%);
      filter: saturate(0.7);
      display: none;
    }
  }
}
@layer jokul.components {
  .jkl-table-caption--sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
}
@layer jokul.components {
  .jkl-table-cell {
    --jkl-table-cell-padding: var(--jkl-unit-15);
    --jkl-table-expand-padding: var(--jkl-unit-20);
    padding: var(--jkl-table-cell-padding);
    position: relative;
    text-align: left;
    vertical-align: top;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-table-cell:has(.jkl-button) {
    --jkl-table-cell-padding: var(--jkl-unit-05);
  }
  .jkl-table-cell:has(.jkl-button) .jkl-button {
    padding-block: var(--jkl-unit-10);
  }
  .jkl-table-cell:has(.jkl-button) .jkl-button .jkl-button__text {
    overflow: visible;
  }
  .jkl-table-cell--vertical-align-center {
    vertical-align: baseline;
  }
  .jkl-table-cell--align-center {
    text-align: center;
  }
  .jkl-table-cell--align-right {
    text-align: right;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list .jkl-table-cell--align-right {
      text-align: unset;
    }
  }
  .jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right {
    text-align: unset;
  }
  .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
    display: none;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
      content: attr(data-th);
      display: block;
      font-size: var(--jkl-font-size-4);
      line-height: var(--jkl-line-height-tight);
      font-weight: 700;
      --jkl-icon-weight: 400;
    }
  }
  .jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text)::before {
    content: attr(data-th);
    display: block;
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  @media (min-width: 680px) {
    .jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text {
      display: none;
    }
  }
  .jkl-table-cell .jkl-table-row-expand-button {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-block: calc(var(--jkl-table-cell-padding) * -1);
    padding: var(--jkl-table-expand-padding);
  }
  .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button {
    color: var(--expand-button-focus-color);
  }
}
@layer jokul.components {
  @media screen and (prefers-color-scheme: light) {
    :root {
      --jkl-table-head-sticky-color: var(--jkl-background-color);
    }
  }
  [data-theme=light] {
    --jkl-table-head-sticky-color: var(--jkl-background-color);
  }
  @media screen and (prefers-color-scheme: dark) {
    :root {
      --jkl-table-head-sticky-color: var(--jkl-background-color);
    }
  }
  [data-theme=dark] {
    --jkl-table-head-sticky-color: var(--jkl-background-color);
  }
  .jkl-table-head--sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
  .jkl-table-head--sticky > .jkl-table-row {
    position: sticky;
    top: var(--jkl-table-head-sticky-offset, 0);
    z-index: 1;
    background-color: var(--jkl-table-head-sticky-color);
    border-bottom: none;
    box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-color-border-separator-strong);
    background-clip: padding-box;
    vertical-align: bottom;
    height: 2.3em;
  }
}
@layer jokul.components {
  .jkl-table-header {
    --jkl-table-header-padding-inline: var(--jkl-unit-15);
    --jkl-table-header-padding-block: var(--jkl-unit-10);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    font-weight: 700;
    padding-block: var(--jkl-table-header-padding-block);
    padding-inline: var(--jkl-table-header-padding-inline);
    text-align: left;
    white-space: nowrap;
  }
  .jkl-table-header--align-center {
    text-align: center;
  }
  .jkl-table-header--align-right {
    text-align: right;
  }
  .jkl-table-header--bold {
    font-weight: var(--jkl-typography-weight-bold);
  }
  .jkl-table-header__arrows {
    display: flex;
    gap: var(--jkl-spacing-4);
    align-items: center;
  }
  .jkl-table-header__arrows[data-align=center] {
    justify-content: center;
  }
  .jkl-table-header__arrows[data-align=right] {
    justify-content: end;
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list .jkl-table-header {
      display: none;
    }
  }
}
@layer jokul.components {
  .jkl-table-pagination {
    display: flex;
    gap: var(--jkl-unit-15);
    flex-direction: column;
    width: 100%;
  }
  @media (min-width: 680px) {
    .jkl-table-pagination {
      flex-direction: row;
      gap: var(--jkl-unit-30);
      justify-content: space-between;
      align-items: center;
    }
  }
  .jkl-table-pagination__left {
    flex-shrink: 1;
  }
  .jkl-table-pagination__right {
    flex-grow: 1;
    display: flex;
    flex-wrap: nowrap;
  }
  .jkl-table-pagination__total-rows {
    white-space: nowrap;
  }
  .jkl-table-pagination__picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
  }
  .jkl-table-pagination__picker--page {
    padding-inline-end: var(--jkl-unit-30);
    width: min(12rem, 100%);
  }
  @media (min-width: 680px) {
    .jkl-table-pagination__picker--page {
      justify-content: flex-end;
    }
  }
  .jkl-table-pagination__picker--page .jkl-table-pagination__picker-input {
    width: min(4rem, 100%);
  }
  .jkl-table-pagination__picker-label {
    margin-inline-end: var(--jkl-unit-10);
  }
  .jkl-table-pagination__nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--jkl-unit-base) * 2);
  }
  @media (min-width: 680px) {
    .jkl-table-pagination__nav {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .jkl-table-pagination__nav ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }
  .jkl-table-pagination__nav li {
    margin: 0;
    padding: 0;
  }
  .jkl-table-pagination__previous, .jkl-table-pagination__next, .jkl-table-pagination__page {
    background: transparent;
    color: var(--jkl-link-color);
    border-radius: 0.1875rem;
    cursor: pointer;
    user-select: none;
    padding: 0;
    height: 2rem;
    min-width: 2rem;
  }
  .jkl-table-pagination__previous, .jkl-table-pagination__next, .jkl-table-pagination__page {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-table-pagination__previous:active, .jkl-table-pagination__previous:hover, .jkl-table-pagination__previous:focus, .jkl-table-pagination__next:active, .jkl-table-pagination__next:hover, .jkl-table-pagination__next:focus, .jkl-table-pagination__page:active, .jkl-table-pagination__page:hover, .jkl-table-pagination__page:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-table-pagination__previous, .jkl-table-pagination__next, .jkl-table-pagination__page {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-table-pagination__previous:active, .jkl-table-pagination__previous:hover, .jkl-table-pagination__previous:focus, .jkl-table-pagination__next:active, .jkl-table-pagination__next:hover, .jkl-table-pagination__next:focus, .jkl-table-pagination__page:active, .jkl-table-pagination__page:hover, .jkl-table-pagination__page:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-table-pagination__previous:hover:not(:focus), .jkl-table-pagination__next:hover:not(:focus), .jkl-table-pagination__page:hover:not(:focus) {
    color: var(--jkl-link-hover-color);
  }
  html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not([data-mousenavigation]) .jkl-table-pagination__next:focus, html:not([data-mousenavigation]) .jkl-table-pagination__page:focus {
    outline: 0.125rem solid var(--jkl-link-active-color);
  }
  .jkl-table-pagination__previous, .jkl-table-pagination__next {
    padding-top: 0.125rem;
  }
  .jkl-table-pagination__ellipsis {
    text-align: center;
    vertical-align: bottom;
    display: inline-block;
    height: 2rem;
    width: 2rem;
  }
  .jkl-table-pagination__page--active {
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
}
@layer jokul.components {
  .jkl-table-row {
    --jkl-table-row-border-color: var(--jkl-color-border-separator);
    --jkl-table-row-border-none-color: transparent;
    --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
    --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
    border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
  }
  .jkl-table-head > .jkl-table-row {
    border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
  }
  .jkl-table-row {
    /* stylelint-disable-next-line selector-not-notation */
  }
  :not(.jkl-table-head, .jkl-table-foot) > .jkl-table-row {
    border-top: solid 0.0625rem transparent;
  }
  :not(.jkl-table-head, .jkl-table-foot) > .jkl-table-row:hover {
    /*
    * Det er viktig at hover her har double border style i motsetning til default,
    * ellers vinner ikke border-top "spesifisitetskampen" i border-collapse.
    * Under testing i Chrome, Firefox og Safari på macOS ble border fremdeles
    * rendret som solid. ¯\_(ツ)_/¯
    *
    * https://stackoverflow.com/a/36239151
    * https://stackoverflow.com/a/4096554
    * https://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
    */
    border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
    border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list > .jkl-table-head > .jkl-table-row {
      border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
    }
  }
  .jkl-table--collapse-to-list[data-collapse] > .jkl-table-head > .jkl-table-row {
    border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row {
      padding-top: var(--jkl-unit-15);
      padding-bottom: var(--jkl-unit-15);
    }
    .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row:first-of-type {
      border-top: solid 0.0625rem var(--jkl-table-row-border-color);
    }
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row {
    padding-top: var(--jkl-unit-15);
    padding-bottom: var(--jkl-unit-15);
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row:first-of-type {
    border-top: solid 0.0625rem var(--jkl-table-row-border-color);
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
    transition-property: border, padding;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded {
    border-bottom-color: var(--jkl-table-row-border-none-color);
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button {
    margin-left: auto;
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable:hover + tr {
    background-color: var(--jkl-table-row-highlight-color);
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable:hover + tr .jkl-table-row {
    border-bottom-color: var(--jkl-table-row-hover-border-color);
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
    /* stylelint-disable-next-line selector-max-specificity -- selector needs to nest itself to select sub tables with the same properties */
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
    transition-property: border;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + [aria-hidden=false] .jkl-table-row {
    border-top-color: var(--jkl-table-row-border-none-color);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row:hover {
      /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
      border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
      border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
    }
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row:hover {
    /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
    border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
    border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
  }
  .jkl-table-row--clickable {
    outline: 0;
  }
  .jkl-table-row--clickable:hover, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus {
    cursor: pointer;
    background-color: var(--jkl-table-row-highlight-color);
    border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
    border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
  }
  @media (width >= 0) and (max-width: 679px) {
    .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row--clickable:hover {
      /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
      border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
      border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
    }
  }
  .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row--clickable:hover {
    /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
    border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
    border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-table-row--clickable {
      outline: revert;
      color: ButtonText;
    }
    .jkl-table-row--clickable:hover {
      background-color: ButtonFace;
    }
  }
  .jkl-table-row--clicked {
    background-color: var(--jkl-table-row-highlight-color);
  }
  .jkl-table-row--clicked.jkl-table-row--expandable + [aria-hidden=false] {
    background-color: var(--jkl-table-row-highlight-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-table-row--clicked {
      background-color: ButtonFace;
    }
  }
  .jkl-expandable-table-row__expanded-row {
    display: none;
    transition-timing-function: ease-in;
    transition-duration: 250ms;
    transition-property: height;
  }
  .jkl-expandable-table-row__expanded-row--expanded {
    transition-timing-function: ease-out;
    transition-duration: 400ms;
    display: block;
  }
}
.jkl-table {
  border-collapse: collapse;
  position: relative;
}
.jkl-table--full-width {
  width: 100%;
}
.jkl-table--collapse-to-list[data-collapse] {
  display: block;
}
.jkl-table--collapse-to-list[data-collapse] > caption {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}
.jkl-table--collapse-to-list[data-collapse] > thead, .jkl-table--collapse-to-list[data-collapse] > thead > tr, .jkl-table--collapse-to-list[data-collapse] > thead > tr > th {
  display: none;
}
.jkl-table--collapse-to-list[data-collapse] > tbody, .jkl-table--collapse-to-list[data-collapse] > tbody > tr, .jkl-table--collapse-to-list[data-collapse] > tbody > tr > td {
  display: block;
}
.jkl-table--collapse-to-list[data-collapse] > tfoot, .jkl-table--collapse-to-list[data-collapse] > tfoot > tr, .jkl-table--collapse-to-list[data-collapse] > tfoot > tr > td {
  display: block;
}
@media (width >= 0) and (max-width: 679px) {
  .jkl-table--collapse-to-list {
    display: block;
  }
  .jkl-table--collapse-to-list > caption {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
  .jkl-table--collapse-to-list > thead, .jkl-table--collapse-to-list > thead > tr, .jkl-table--collapse-to-list > thead > tr > th {
    display: none;
  }
  .jkl-table--collapse-to-list > tbody, .jkl-table--collapse-to-list > tbody > tr, .jkl-table--collapse-to-list > tbody > tr > td {
    display: block;
  }
  .jkl-table--collapse-to-list > tfoot, .jkl-table--collapse-to-list > tfoot > tr, .jkl-table--collapse-to-list > tfoot > tr > td {
    display: block;
  }
}

@layer jokul.components {
  .jkl-table-of-contents {
    --ordered-item-padding: var(--jkl-unit-10);
    --border: 1px solid var(--jkl-color-border-separator);
    --text-color: var(--jkl-color-text-default);
  }
  .jkl-table-of-contents .jkl-table-of-contents-title {
    margin-block-end: var(--jkl-unit-05);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-table-of-contents .jkl-table-of-contents-item {
    display: flex;
  }
  .jkl-table-of-contents .jkl-table-of-contents-item:not(:last-of-type) .jkl-table-of-contents-link {
    border-block-end: var(--border);
  }
  .jkl-table-of-contents .jkl-table-of-contents-link {
    display: flex;
    align-items: center;
    gap: var(--jkl-unit-20);
    width: 100%;
    text-decoration: none;
    color: var(--text-color);
    text-wrap: balance;
    box-sizing: border-box;
  }
  .jkl-table-of-contents:has(ol) .jkl-table-of-contents-title {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    clip-path: inset(50%) !important; /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; /* 3 */
  }
  .jkl-table-of-contents ol {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    height: min-content;
    border-block: var(--border);
    counter-reset: table-of-contents;
  }
  .jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover, :focus-visible)) {
    --text-color: rgb(from currentColor r g b / 60%);
  }
  .jkl-table-of-contents ol:has(.jkl-table-of-contents-link:is(:hover, :focus-visible)) .jkl-table-of-contents-link:is(:hover, :focus-visible) {
    --text-color: rgb(from currentColor r g b / 100%);
  }
  .jkl-table-of-contents ol .jkl-table-of-contents-item {
    counter-increment: table-of-contents;
  }
  .jkl-table-of-contents ol .jkl-table-of-contents-link {
    padding-inline-end: var(--jkl-unit-20);
    padding-block: var(--ordered-item-padding);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color;
  }
  .jkl-table-of-contents ol .jkl-table-of-contents-link::before {
    content: counter(table-of-contents, decimal-leading-zero);
    font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
    color: inherit;
    font-size: var(--jkl-small-font-size);
  }
}
@layer jokul.components {
  .jkl-tabs {
    width: 100%;
  }
  .jkl-tablist {
    --padding-inline-end: var(--jkl-unit-50);
    --text-color: var(--jkl-color-text-interactive);
    --line-color: var(--jkl-color-border-separator);
    --indicator-color: var(--jkl-color-border-separator-hover);
    scroll-snap-type: x proximity;
    overflow: scroll hidden;
    scrollbar-width: none;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--line-color);
    width: fit-content;
    max-width: 100%;
  }
  @media screen and (forced-colors: active) {
    .jkl-tablist {
      border-color: GrayText;
    }
  }
  .jkl-tablist::-webkit-scrollbar {
    display: none;
  }
  @supports (position-anchor: --active-tab) {
    .jkl-tablist::after {
      content: "";
      position: absolute;
      position-anchor: --active-tab;
      height: 2px;
      width: calc(anchor-size(inline) - var(--padding-inline-end));
      inset-block-start: calc(anchor(end) - 2px);
      inset-inline-start: calc(anchor(--active-tab start));
      background-color: var(--indicator-color);
      transition-timing-function: ease;
      transition-duration: 400ms;
    }
  }
  .jkl-tab {
    --padding-inline-end: var(--jkl-unit-50);
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--text-color);
    padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    scroll-margin-inline-start: var(--jkl-unit-20);
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
  }
  .jkl-tab {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-tab {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-tab:hover {
    --text-color: var(--jkl-color-text-interactive-hover);
  }
  .jkl-tab:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -2px;
  }
  .jkl-tab[aria-selected=true] {
    anchor-name: --active-tab;
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  @supports not (position-anchor: --active-tab) {
    .jkl-tab[aria-selected=true] {
      position: relative;
    }
    .jkl-tab[aria-selected=true]::after {
      content: "";
      position: absolute;
      height: 2px;
      width: calc(100% - var(--padding-inline-end));
      inset-block-end: 0;
      inset-inline-start: 0;
      background-color: var(--indicator-color);
      transition-timing-function: ease;
      transition-duration: 400ms;
    }
  }
}
@layer jokul.components {
  .jkl-toast-region {
    z-index: 10000;
    background: transparent;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: var(--jkl-unit-30);
    right: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
  }
  .jkl-toast-region__toasts {
    min-width: 18rem;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jkl-unit-20);
  }
  .jkl-toast-region--left {
    justify-content: flex-start;
    left: var(--jkl-unit-30);
  }
  .jkl-toast {
    --background-color: var(--jkl-color-background-container-high);
    --text-color: var(--jkl-color-text-default);
    --jkl-toast-padding: var(--jkl-unit-20);
    color: var(--text-color);
    background-color: var(--background-color);
    border-radius: 4px;
    box-sizing: border-box;
    align-items: start;
    overflow: hidden;
    width: clamp(15em, 100%, min(30rem, 85vw));
    padding: var(--jkl-toast-padding);
    position: relative;
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-toast__progress {
    --bar-color: var(--text-color);
    --track-color: transparent;
    border-radius: 0;
    position: absolute;
    inset: 0 0 auto;
  }
  @media screen and (forced-colors: active) {
    .jkl-toast__icon {
      stroke: CanvasText;
    }
    .jkl-toast__icon svg, .jkl-toast__icon path {
      stroke: CanvasText;
    }
  }
  .jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon {
    margin-block-start: 0.0625rem;
  }
  .jkl-toast:has(.jkl-toast__title) .jkl-toast__icon {
    margin-block-start: 0;
  }
  .jkl-toast__content {
    flex-grow: 1;
    flex-basis: 100vw;
  }
  .jkl-toast__action {
    margin-top: var(--jkl-unit-15);
  }
  .jkl-toast__title {
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  .jkl-toast__dismiss-button {
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
  }
  @media screen and (forced-colors: active) {
    .jkl-toast__dismiss-button {
      stroke: ButtonText;
    }
    .jkl-toast__dismiss-button svg, .jkl-toast__dismiss-button path {
      stroke: ButtonText;
    }
  }
  @media screen and (forced-colors: active) {
    .jkl-toast__dismiss-button {
      background-color: ButtonFace;
    }
  }
  .jkl-toast__dismiss-button::after {
    --tap-size: 44px;
    content: "";
    position: absolute;
    inset: calc((var(--tap-size) - 100%) / 2 * -1);
  }
  .jkl-toast--info, .jkl-toast--warning, .jkl-toast--error, .jkl-toast--success {
    --text-color: var(--jkl-color-text-on-alert);
  }
  .jkl-toast--info {
    --background-color: var(--jkl-color-background-alert-info);
  }
  .jkl-toast--warning {
    --background-color: var(--jkl-color-background-alert-warning);
  }
  .jkl-toast--error {
    --background-color: var(--jkl-color-background-alert-error);
  }
  .jkl-toast--success {
    --background-color: var(--jkl-color-background-alert-success);
  }
  @media screen and (forced-colors: active) {
    .jkl-toast {
      border: 2px solid CanvasText;
    }
    .jkl-toast--info {
      border-style: dotted;
    }
    .jkl-toast--warning {
      border-style: dashed;
    }
    .jkl-toast--error {
      border-style: double;
      border-width: 4px;
    }
  }
  .jkl-toast[data-animation=entering],
  .jkl-toast[data-animation=queued] {
    animation: jkl-entering-u5wtgf4 200ms ease-out forwards;
  }
  .jkl-toast[data-animation=exiting] {
    animation: jkl-exiting-u5wtgft 150ms ease-in forwards;
  }
  @keyframes jkl-entering-u5wtgf4 {
    from {
      opacity: 0;
      transform: translate3d(0, 50%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes jkl-exiting-u5wtgft {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    to {
      opacity: 0;
      transform: translate3d(0, 50%, 0);
    }
  }
}
@layer jokul.components {
  :root {
    --container-m: 43.75rem;
    --container-l: 60rem;
    --container-xl: 75rem;
    --container-2xl: 90rem;
    --container-full: 100%;
  }
}
@layer jokul.components {
  :is(.jkl-flex) {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  :where(.fill > *) {
    flex-grow: 1;
  }
  :where(.jkl-flex > *) {
    --jkl-flex-gap: 0px;
    --jkl-flex-layout: auto;
    box-sizing: border-box;
    flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
    min-width: calc(var(--jkl-flex-layout) * 0px);
    min-height: calc(var(--jkl-flex-layout) * 0px);
  }
  :where(.wrap-nowrap > *) {
    flex-shrink: calc(var(--jkl-flex-layout) * 0);
  }
}
@layer jokul.components {
  .display-inline-flex {
    display: inline-flex;
  }
  .flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .flex-wrap-nowrap {
    flex-wrap: nowrap;
  }
  .flex-direction-column {
    flex-direction: column;
  }
  .flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .text-align-left {
    text-align: left;
  }
  .text-align-center {
    text-align: center;
  }
  .text-align-right {
    text-align: right;
  }
  .align-items-start {
    align-items: start;
  }
  .align-items-center {
    align-items: center;
  }
  .align-items-end {
    align-items: end;
  }
  .align-items-baseline {
    align-items: baseline;
  }
  .align-items-stretch {
    align-items: stretch;
  }
  .align-content-start {
    align-content: start;
  }
  .align-content-center {
    align-content: center;
  }
  .align-content-end {
    align-content: end;
  }
  .align-content-stretch {
    align-content: stretch;
  }
  .align-content-baseline {
    align-content: baseline;
  }
  .align-content-space-around {
    align-content: space-around;
  }
  .align-content-space-between {
    align-content: space-between;
  }
  .align-content-space-evenly {
    align-content: space-evenly;
  }
  .justify-content-start {
    justify-content: start;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-end {
    justify-content: end;
  }
  .justify-content-space-around {
    justify-content: space-around;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }
  .justify-content-space-evenly {
    justify-content: space-evenly;
  }
  :is(.center-m, .center-l, .center-xl, .center-2xl) {
    box-sizing: border-box;
    margin-inline: auto;
    width: calc(100% - var(--jkl-unit-50));
  }
  @media (width >= 0) {
    .center-small {
      max-width: var(--container-m);
    }
  }
  @media (width >= 680px) {
    .center-medium {
      max-width: var(--container-l);
    }
  }
  @media (width >= 1200px) {
    .center-large {
      max-width: var(--container-xl);
    }
  }
  @media (width >= 1600px) {
    .center-xl {
      max-width: var(--container-2xl);
    }
  }
  .screen-small-2\.10 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 2;
  }
  .screen-small-2\.10 > :where(:nth-child(even)) {
    --jkl-flex-layout: 10;
  }
  .screen-small-10\.2 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 10;
  }
  .screen-small-10\.2 > :where(:nth-child(even)) {
    --jkl-flex-layout: 2;
  }
  .screen-small-3\.9 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 3;
  }
  .screen-small-3\.9 > :where(:nth-child(even)) {
    --jkl-flex-layout: 9;
  }
  .screen-small-9\.3 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 9;
  }
  .screen-small-9\.3 > :where(:nth-child(even)) {
    --jkl-flex-layout: 3;
  }
  .screen-small-4\.8 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 4;
  }
  .screen-small-4\.8 > :where(:nth-child(even)) {
    --jkl-flex-layout: 8;
  }
  .screen-small-8\.4 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 8;
  }
  .screen-small-8\.4 > :where(:nth-child(even)) {
    --jkl-flex-layout: 4;
  }
  .screen-small-5\.7 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 5;
  }
  .screen-small-5\.7 > :where(:nth-child(even)) {
    --jkl-flex-layout: 7;
  }
  .screen-small-7\.5 > :where(:nth-child(odd)) {
    --jkl-flex-layout: 7;
  }
  .screen-small-7\.5 > :where(:nth-child(even)) {
    --jkl-flex-layout: 5;
  }
  .screen-small-0 > * {
    --jkl-flex-layout: auto;
  }
  .screen-small-1 > * {
    --jkl-flex-layout: 12;
  }
  .screen-small-2 > * {
    --jkl-flex-layout: 6;
  }
  .screen-small-3 > * {
    --jkl-flex-layout: 4;
  }
  .screen-small-4 > * {
    --jkl-flex-layout: 3;
  }
  .screen-small-6 > * {
    --jkl-flex-layout: 2;
  }
  .screen-small-row-gap-none {
    row-gap: var(--jkl-spacing-none);
  }
  .screen-small-col-gap-none {
    column-gap: var(--jkl-spacing-none);
  }
  .screen-small-col-gap-none > * {
    --jkl-flex-gap: var(--jkl-spacing-none);
  }
  .screen-small-row-gap-2xs {
    row-gap: var(--jkl-spacing-2xs);
  }
  .screen-small-col-gap-2xs {
    column-gap: var(--jkl-spacing-2xs);
  }
  .screen-small-col-gap-2xs > * {
    --jkl-flex-gap: var(--jkl-spacing-2xs);
  }
  .screen-small-row-gap-xs {
    row-gap: var(--jkl-spacing-xs);
  }
  .screen-small-col-gap-xs {
    column-gap: var(--jkl-spacing-xs);
  }
  .screen-small-col-gap-xs > * {
    --jkl-flex-gap: var(--jkl-spacing-xs);
  }
  .screen-small-row-gap-s {
    row-gap: var(--jkl-spacing-s);
  }
  .screen-small-col-gap-s {
    column-gap: var(--jkl-spacing-s);
  }
  .screen-small-col-gap-s > * {
    --jkl-flex-gap: var(--jkl-spacing-s);
  }
  .screen-small-row-gap-m {
    row-gap: var(--jkl-spacing-m);
  }
  .screen-small-col-gap-m {
    column-gap: var(--jkl-spacing-m);
  }
  .screen-small-col-gap-m > * {
    --jkl-flex-gap: var(--jkl-spacing-m);
  }
  .screen-small-row-gap-l {
    row-gap: var(--jkl-spacing-l);
  }
  .screen-small-col-gap-l {
    column-gap: var(--jkl-spacing-l);
  }
  .screen-small-col-gap-l > * {
    --jkl-flex-gap: var(--jkl-spacing-l);
  }
  .screen-small-row-gap-xl {
    row-gap: var(--jkl-spacing-xl);
  }
  .screen-small-col-gap-xl {
    column-gap: var(--jkl-spacing-xl);
  }
  .screen-small-col-gap-xl > * {
    --jkl-flex-gap: var(--jkl-spacing-xl);
  }
  .screen-small-row-gap-2xl {
    row-gap: var(--jkl-spacing-2xl);
  }
  .screen-small-col-gap-2xl {
    column-gap: var(--jkl-spacing-2xl);
  }
  .screen-small-col-gap-2xl > * {
    --jkl-flex-gap: var(--jkl-spacing-2xl);
  }
  .screen-small-row-gap-0 {
    row-gap: var(--jkl-spacing-0);
  }
  .screen-small-col-gap-0 {
    column-gap: var(--jkl-spacing-0);
  }
  .screen-small-col-gap-0 > * {
    --jkl-flex-gap: var(--jkl-spacing-0);
  }
  .screen-small-row-gap-2 {
    row-gap: var(--jkl-spacing-2);
  }
  .screen-small-col-gap-2 {
    column-gap: var(--jkl-spacing-2);
  }
  .screen-small-col-gap-2 > * {
    --jkl-flex-gap: var(--jkl-spacing-2);
  }
  .screen-small-row-gap-4 {
    row-gap: var(--jkl-spacing-4);
  }
  .screen-small-col-gap-4 {
    column-gap: var(--jkl-spacing-4);
  }
  .screen-small-col-gap-4 > * {
    --jkl-flex-gap: var(--jkl-spacing-4);
  }
  .screen-small-row-gap-8 {
    row-gap: var(--jkl-spacing-8);
  }
  .screen-small-col-gap-8 {
    column-gap: var(--jkl-spacing-8);
  }
  .screen-small-col-gap-8 > * {
    --jkl-flex-gap: var(--jkl-spacing-8);
  }
  .screen-small-row-gap-12 {
    row-gap: var(--jkl-spacing-12);
  }
  .screen-small-col-gap-12 {
    column-gap: var(--jkl-spacing-12);
  }
  .screen-small-col-gap-12 > * {
    --jkl-flex-gap: var(--jkl-spacing-12);
  }
  .screen-small-row-gap-16 {
    row-gap: var(--jkl-spacing-16);
  }
  .screen-small-col-gap-16 {
    column-gap: var(--jkl-spacing-16);
  }
  .screen-small-col-gap-16 > * {
    --jkl-flex-gap: var(--jkl-spacing-16);
  }
  .screen-small-row-gap-20 {
    row-gap: var(--jkl-spacing-20);
  }
  .screen-small-col-gap-20 {
    column-gap: var(--jkl-spacing-20);
  }
  .screen-small-col-gap-20 > * {
    --jkl-flex-gap: var(--jkl-spacing-20);
  }
  .screen-small-row-gap-24 {
    row-gap: var(--jkl-spacing-24);
  }
  .screen-small-col-gap-24 {
    column-gap: var(--jkl-spacing-24);
  }
  .screen-small-col-gap-24 > * {
    --jkl-flex-gap: var(--jkl-spacing-24);
  }
  .screen-small-row-gap-28 {
    row-gap: var(--jkl-spacing-28);
  }
  .screen-small-col-gap-28 {
    column-gap: var(--jkl-spacing-28);
  }
  .screen-small-col-gap-28 > * {
    --jkl-flex-gap: var(--jkl-spacing-28);
  }
  .screen-small-row-gap-32 {
    row-gap: var(--jkl-spacing-32);
  }
  .screen-small-col-gap-32 {
    column-gap: var(--jkl-spacing-32);
  }
  .screen-small-col-gap-32 > * {
    --jkl-flex-gap: var(--jkl-spacing-32);
  }
  .screen-small-row-gap-40 {
    row-gap: var(--jkl-spacing-40);
  }
  .screen-small-col-gap-40 {
    column-gap: var(--jkl-spacing-40);
  }
  .screen-small-col-gap-40 > * {
    --jkl-flex-gap: var(--jkl-spacing-40);
  }
  .screen-small-row-gap-48 {
    row-gap: var(--jkl-spacing-48);
  }
  .screen-small-col-gap-48 {
    column-gap: var(--jkl-spacing-48);
  }
  .screen-small-col-gap-48 > * {
    --jkl-flex-gap: var(--jkl-spacing-48);
  }
  .screen-small-row-gap-56 {
    row-gap: var(--jkl-spacing-56);
  }
  .screen-small-col-gap-56 {
    column-gap: var(--jkl-spacing-56);
  }
  .screen-small-col-gap-56 > * {
    --jkl-flex-gap: var(--jkl-spacing-56);
  }
  .screen-small-row-gap-64 {
    row-gap: var(--jkl-spacing-64);
  }
  .screen-small-col-gap-64 {
    column-gap: var(--jkl-spacing-64);
  }
  .screen-small-col-gap-64 > * {
    --jkl-flex-gap: var(--jkl-spacing-64);
  }
  .screen-small-row-gap-72 {
    row-gap: var(--jkl-spacing-72);
  }
  .screen-small-col-gap-72 {
    column-gap: var(--jkl-spacing-72);
  }
  .screen-small-col-gap-72 > * {
    --jkl-flex-gap: var(--jkl-spacing-72);
  }
  .screen-small-row-gap-80 {
    row-gap: var(--jkl-spacing-80);
  }
  .screen-small-col-gap-80 {
    column-gap: var(--jkl-spacing-80);
  }
  .screen-small-col-gap-80 > * {
    --jkl-flex-gap: var(--jkl-spacing-80);
  }
  .screen-small-row-gap-104 {
    row-gap: var(--jkl-spacing-104);
  }
  .screen-small-col-gap-104 {
    column-gap: var(--jkl-spacing-104);
  }
  .screen-small-col-gap-104 > * {
    --jkl-flex-gap: var(--jkl-spacing-104);
  }
  .screen-small-row-gap-168 {
    row-gap: var(--jkl-spacing-168);
  }
  .screen-small-col-gap-168 {
    column-gap: var(--jkl-spacing-168);
  }
  .screen-small-col-gap-168 > * {
    --jkl-flex-gap: var(--jkl-spacing-168);
  }
  @media (width >= 680px) {
    .screen-medium-2\.10 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 2;
    }
    .screen-medium-2\.10 > :where(:nth-child(even)) {
      --jkl-flex-layout: 10;
    }
    .screen-medium-10\.2 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 10;
    }
    .screen-medium-10\.2 > :where(:nth-child(even)) {
      --jkl-flex-layout: 2;
    }
    .screen-medium-3\.9 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 3;
    }
    .screen-medium-3\.9 > :where(:nth-child(even)) {
      --jkl-flex-layout: 9;
    }
    .screen-medium-9\.3 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 9;
    }
    .screen-medium-9\.3 > :where(:nth-child(even)) {
      --jkl-flex-layout: 3;
    }
    .screen-medium-4\.8 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 4;
    }
    .screen-medium-4\.8 > :where(:nth-child(even)) {
      --jkl-flex-layout: 8;
    }
    .screen-medium-8\.4 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 8;
    }
    .screen-medium-8\.4 > :where(:nth-child(even)) {
      --jkl-flex-layout: 4;
    }
    .screen-medium-5\.7 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 5;
    }
    .screen-medium-5\.7 > :where(:nth-child(even)) {
      --jkl-flex-layout: 7;
    }
    .screen-medium-7\.5 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 7;
    }
    .screen-medium-7\.5 > :where(:nth-child(even)) {
      --jkl-flex-layout: 5;
    }
    .screen-medium-0 > * {
      --jkl-flex-layout: auto;
    }
    .screen-medium-1 > * {
      --jkl-flex-layout: 12;
    }
    .screen-medium-2 > * {
      --jkl-flex-layout: 6;
    }
    .screen-medium-3 > * {
      --jkl-flex-layout: 4;
    }
    .screen-medium-4 > * {
      --jkl-flex-layout: 3;
    }
    .screen-medium-6 > * {
      --jkl-flex-layout: 2;
    }
    .screen-medium-row-gap-none {
      row-gap: var(--jkl-spacing-none);
    }
    .screen-medium-col-gap-none {
      column-gap: var(--jkl-spacing-none);
    }
    .screen-medium-col-gap-none > * {
      --jkl-flex-gap: var(--jkl-spacing-none);
    }
    .screen-medium-row-gap-2xs {
      row-gap: var(--jkl-spacing-2xs);
    }
    .screen-medium-col-gap-2xs {
      column-gap: var(--jkl-spacing-2xs);
    }
    .screen-medium-col-gap-2xs > * {
      --jkl-flex-gap: var(--jkl-spacing-2xs);
    }
    .screen-medium-row-gap-xs {
      row-gap: var(--jkl-spacing-xs);
    }
    .screen-medium-col-gap-xs {
      column-gap: var(--jkl-spacing-xs);
    }
    .screen-medium-col-gap-xs > * {
      --jkl-flex-gap: var(--jkl-spacing-xs);
    }
    .screen-medium-row-gap-s {
      row-gap: var(--jkl-spacing-s);
    }
    .screen-medium-col-gap-s {
      column-gap: var(--jkl-spacing-s);
    }
    .screen-medium-col-gap-s > * {
      --jkl-flex-gap: var(--jkl-spacing-s);
    }
    .screen-medium-row-gap-m {
      row-gap: var(--jkl-spacing-m);
    }
    .screen-medium-col-gap-m {
      column-gap: var(--jkl-spacing-m);
    }
    .screen-medium-col-gap-m > * {
      --jkl-flex-gap: var(--jkl-spacing-m);
    }
    .screen-medium-row-gap-l {
      row-gap: var(--jkl-spacing-l);
    }
    .screen-medium-col-gap-l {
      column-gap: var(--jkl-spacing-l);
    }
    .screen-medium-col-gap-l > * {
      --jkl-flex-gap: var(--jkl-spacing-l);
    }
    .screen-medium-row-gap-xl {
      row-gap: var(--jkl-spacing-xl);
    }
    .screen-medium-col-gap-xl {
      column-gap: var(--jkl-spacing-xl);
    }
    .screen-medium-col-gap-xl > * {
      --jkl-flex-gap: var(--jkl-spacing-xl);
    }
    .screen-medium-row-gap-2xl {
      row-gap: var(--jkl-spacing-2xl);
    }
    .screen-medium-col-gap-2xl {
      column-gap: var(--jkl-spacing-2xl);
    }
    .screen-medium-col-gap-2xl > * {
      --jkl-flex-gap: var(--jkl-spacing-2xl);
    }
    .screen-medium-row-gap-0 {
      row-gap: var(--jkl-spacing-0);
    }
    .screen-medium-col-gap-0 {
      column-gap: var(--jkl-spacing-0);
    }
    .screen-medium-col-gap-0 > * {
      --jkl-flex-gap: var(--jkl-spacing-0);
    }
    .screen-medium-row-gap-2 {
      row-gap: var(--jkl-spacing-2);
    }
    .screen-medium-col-gap-2 {
      column-gap: var(--jkl-spacing-2);
    }
    .screen-medium-col-gap-2 > * {
      --jkl-flex-gap: var(--jkl-spacing-2);
    }
    .screen-medium-row-gap-4 {
      row-gap: var(--jkl-spacing-4);
    }
    .screen-medium-col-gap-4 {
      column-gap: var(--jkl-spacing-4);
    }
    .screen-medium-col-gap-4 > * {
      --jkl-flex-gap: var(--jkl-spacing-4);
    }
    .screen-medium-row-gap-8 {
      row-gap: var(--jkl-spacing-8);
    }
    .screen-medium-col-gap-8 {
      column-gap: var(--jkl-spacing-8);
    }
    .screen-medium-col-gap-8 > * {
      --jkl-flex-gap: var(--jkl-spacing-8);
    }
    .screen-medium-row-gap-12 {
      row-gap: var(--jkl-spacing-12);
    }
    .screen-medium-col-gap-12 {
      column-gap: var(--jkl-spacing-12);
    }
    .screen-medium-col-gap-12 > * {
      --jkl-flex-gap: var(--jkl-spacing-12);
    }
    .screen-medium-row-gap-16 {
      row-gap: var(--jkl-spacing-16);
    }
    .screen-medium-col-gap-16 {
      column-gap: var(--jkl-spacing-16);
    }
    .screen-medium-col-gap-16 > * {
      --jkl-flex-gap: var(--jkl-spacing-16);
    }
    .screen-medium-row-gap-20 {
      row-gap: var(--jkl-spacing-20);
    }
    .screen-medium-col-gap-20 {
      column-gap: var(--jkl-spacing-20);
    }
    .screen-medium-col-gap-20 > * {
      --jkl-flex-gap: var(--jkl-spacing-20);
    }
    .screen-medium-row-gap-24 {
      row-gap: var(--jkl-spacing-24);
    }
    .screen-medium-col-gap-24 {
      column-gap: var(--jkl-spacing-24);
    }
    .screen-medium-col-gap-24 > * {
      --jkl-flex-gap: var(--jkl-spacing-24);
    }
    .screen-medium-row-gap-28 {
      row-gap: var(--jkl-spacing-28);
    }
    .screen-medium-col-gap-28 {
      column-gap: var(--jkl-spacing-28);
    }
    .screen-medium-col-gap-28 > * {
      --jkl-flex-gap: var(--jkl-spacing-28);
    }
    .screen-medium-row-gap-32 {
      row-gap: var(--jkl-spacing-32);
    }
    .screen-medium-col-gap-32 {
      column-gap: var(--jkl-spacing-32);
    }
    .screen-medium-col-gap-32 > * {
      --jkl-flex-gap: var(--jkl-spacing-32);
    }
    .screen-medium-row-gap-40 {
      row-gap: var(--jkl-spacing-40);
    }
    .screen-medium-col-gap-40 {
      column-gap: var(--jkl-spacing-40);
    }
    .screen-medium-col-gap-40 > * {
      --jkl-flex-gap: var(--jkl-spacing-40);
    }
    .screen-medium-row-gap-48 {
      row-gap: var(--jkl-spacing-48);
    }
    .screen-medium-col-gap-48 {
      column-gap: var(--jkl-spacing-48);
    }
    .screen-medium-col-gap-48 > * {
      --jkl-flex-gap: var(--jkl-spacing-48);
    }
    .screen-medium-row-gap-56 {
      row-gap: var(--jkl-spacing-56);
    }
    .screen-medium-col-gap-56 {
      column-gap: var(--jkl-spacing-56);
    }
    .screen-medium-col-gap-56 > * {
      --jkl-flex-gap: var(--jkl-spacing-56);
    }
    .screen-medium-row-gap-64 {
      row-gap: var(--jkl-spacing-64);
    }
    .screen-medium-col-gap-64 {
      column-gap: var(--jkl-spacing-64);
    }
    .screen-medium-col-gap-64 > * {
      --jkl-flex-gap: var(--jkl-spacing-64);
    }
    .screen-medium-row-gap-72 {
      row-gap: var(--jkl-spacing-72);
    }
    .screen-medium-col-gap-72 {
      column-gap: var(--jkl-spacing-72);
    }
    .screen-medium-col-gap-72 > * {
      --jkl-flex-gap: var(--jkl-spacing-72);
    }
    .screen-medium-row-gap-80 {
      row-gap: var(--jkl-spacing-80);
    }
    .screen-medium-col-gap-80 {
      column-gap: var(--jkl-spacing-80);
    }
    .screen-medium-col-gap-80 > * {
      --jkl-flex-gap: var(--jkl-spacing-80);
    }
    .screen-medium-row-gap-104 {
      row-gap: var(--jkl-spacing-104);
    }
    .screen-medium-col-gap-104 {
      column-gap: var(--jkl-spacing-104);
    }
    .screen-medium-col-gap-104 > * {
      --jkl-flex-gap: var(--jkl-spacing-104);
    }
    .screen-medium-row-gap-168 {
      row-gap: var(--jkl-spacing-168);
    }
    .screen-medium-col-gap-168 {
      column-gap: var(--jkl-spacing-168);
    }
    .screen-medium-col-gap-168 > * {
      --jkl-flex-gap: var(--jkl-spacing-168);
    }
  }
  @media (width >= 1200px) {
    .screen-large-2\.10 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 2;
    }
    .screen-large-2\.10 > :where(:nth-child(even)) {
      --jkl-flex-layout: 10;
    }
    .screen-large-10\.2 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 10;
    }
    .screen-large-10\.2 > :where(:nth-child(even)) {
      --jkl-flex-layout: 2;
    }
    .screen-large-3\.9 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 3;
    }
    .screen-large-3\.9 > :where(:nth-child(even)) {
      --jkl-flex-layout: 9;
    }
    .screen-large-9\.3 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 9;
    }
    .screen-large-9\.3 > :where(:nth-child(even)) {
      --jkl-flex-layout: 3;
    }
    .screen-large-4\.8 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 4;
    }
    .screen-large-4\.8 > :where(:nth-child(even)) {
      --jkl-flex-layout: 8;
    }
    .screen-large-8\.4 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 8;
    }
    .screen-large-8\.4 > :where(:nth-child(even)) {
      --jkl-flex-layout: 4;
    }
    .screen-large-5\.7 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 5;
    }
    .screen-large-5\.7 > :where(:nth-child(even)) {
      --jkl-flex-layout: 7;
    }
    .screen-large-7\.5 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 7;
    }
    .screen-large-7\.5 > :where(:nth-child(even)) {
      --jkl-flex-layout: 5;
    }
    .screen-large-0 > * {
      --jkl-flex-layout: auto;
    }
    .screen-large-1 > * {
      --jkl-flex-layout: 12;
    }
    .screen-large-2 > * {
      --jkl-flex-layout: 6;
    }
    .screen-large-3 > * {
      --jkl-flex-layout: 4;
    }
    .screen-large-4 > * {
      --jkl-flex-layout: 3;
    }
    .screen-large-6 > * {
      --jkl-flex-layout: 2;
    }
    .screen-large-row-gap-none {
      row-gap: var(--jkl-spacing-none);
    }
    .screen-large-col-gap-none {
      column-gap: var(--jkl-spacing-none);
    }
    .screen-large-col-gap-none > * {
      --jkl-flex-gap: var(--jkl-spacing-none);
    }
    .screen-large-row-gap-2xs {
      row-gap: var(--jkl-spacing-2xs);
    }
    .screen-large-col-gap-2xs {
      column-gap: var(--jkl-spacing-2xs);
    }
    .screen-large-col-gap-2xs > * {
      --jkl-flex-gap: var(--jkl-spacing-2xs);
    }
    .screen-large-row-gap-xs {
      row-gap: var(--jkl-spacing-xs);
    }
    .screen-large-col-gap-xs {
      column-gap: var(--jkl-spacing-xs);
    }
    .screen-large-col-gap-xs > * {
      --jkl-flex-gap: var(--jkl-spacing-xs);
    }
    .screen-large-row-gap-s {
      row-gap: var(--jkl-spacing-s);
    }
    .screen-large-col-gap-s {
      column-gap: var(--jkl-spacing-s);
    }
    .screen-large-col-gap-s > * {
      --jkl-flex-gap: var(--jkl-spacing-s);
    }
    .screen-large-row-gap-m {
      row-gap: var(--jkl-spacing-m);
    }
    .screen-large-col-gap-m {
      column-gap: var(--jkl-spacing-m);
    }
    .screen-large-col-gap-m > * {
      --jkl-flex-gap: var(--jkl-spacing-m);
    }
    .screen-large-row-gap-l {
      row-gap: var(--jkl-spacing-l);
    }
    .screen-large-col-gap-l {
      column-gap: var(--jkl-spacing-l);
    }
    .screen-large-col-gap-l > * {
      --jkl-flex-gap: var(--jkl-spacing-l);
    }
    .screen-large-row-gap-xl {
      row-gap: var(--jkl-spacing-xl);
    }
    .screen-large-col-gap-xl {
      column-gap: var(--jkl-spacing-xl);
    }
    .screen-large-col-gap-xl > * {
      --jkl-flex-gap: var(--jkl-spacing-xl);
    }
    .screen-large-row-gap-2xl {
      row-gap: var(--jkl-spacing-2xl);
    }
    .screen-large-col-gap-2xl {
      column-gap: var(--jkl-spacing-2xl);
    }
    .screen-large-col-gap-2xl > * {
      --jkl-flex-gap: var(--jkl-spacing-2xl);
    }
    .screen-large-row-gap-0 {
      row-gap: var(--jkl-spacing-0);
    }
    .screen-large-col-gap-0 {
      column-gap: var(--jkl-spacing-0);
    }
    .screen-large-col-gap-0 > * {
      --jkl-flex-gap: var(--jkl-spacing-0);
    }
    .screen-large-row-gap-2 {
      row-gap: var(--jkl-spacing-2);
    }
    .screen-large-col-gap-2 {
      column-gap: var(--jkl-spacing-2);
    }
    .screen-large-col-gap-2 > * {
      --jkl-flex-gap: var(--jkl-spacing-2);
    }
    .screen-large-row-gap-4 {
      row-gap: var(--jkl-spacing-4);
    }
    .screen-large-col-gap-4 {
      column-gap: var(--jkl-spacing-4);
    }
    .screen-large-col-gap-4 > * {
      --jkl-flex-gap: var(--jkl-spacing-4);
    }
    .screen-large-row-gap-8 {
      row-gap: var(--jkl-spacing-8);
    }
    .screen-large-col-gap-8 {
      column-gap: var(--jkl-spacing-8);
    }
    .screen-large-col-gap-8 > * {
      --jkl-flex-gap: var(--jkl-spacing-8);
    }
    .screen-large-row-gap-12 {
      row-gap: var(--jkl-spacing-12);
    }
    .screen-large-col-gap-12 {
      column-gap: var(--jkl-spacing-12);
    }
    .screen-large-col-gap-12 > * {
      --jkl-flex-gap: var(--jkl-spacing-12);
    }
    .screen-large-row-gap-16 {
      row-gap: var(--jkl-spacing-16);
    }
    .screen-large-col-gap-16 {
      column-gap: var(--jkl-spacing-16);
    }
    .screen-large-col-gap-16 > * {
      --jkl-flex-gap: var(--jkl-spacing-16);
    }
    .screen-large-row-gap-20 {
      row-gap: var(--jkl-spacing-20);
    }
    .screen-large-col-gap-20 {
      column-gap: var(--jkl-spacing-20);
    }
    .screen-large-col-gap-20 > * {
      --jkl-flex-gap: var(--jkl-spacing-20);
    }
    .screen-large-row-gap-24 {
      row-gap: var(--jkl-spacing-24);
    }
    .screen-large-col-gap-24 {
      column-gap: var(--jkl-spacing-24);
    }
    .screen-large-col-gap-24 > * {
      --jkl-flex-gap: var(--jkl-spacing-24);
    }
    .screen-large-row-gap-28 {
      row-gap: var(--jkl-spacing-28);
    }
    .screen-large-col-gap-28 {
      column-gap: var(--jkl-spacing-28);
    }
    .screen-large-col-gap-28 > * {
      --jkl-flex-gap: var(--jkl-spacing-28);
    }
    .screen-large-row-gap-32 {
      row-gap: var(--jkl-spacing-32);
    }
    .screen-large-col-gap-32 {
      column-gap: var(--jkl-spacing-32);
    }
    .screen-large-col-gap-32 > * {
      --jkl-flex-gap: var(--jkl-spacing-32);
    }
    .screen-large-row-gap-40 {
      row-gap: var(--jkl-spacing-40);
    }
    .screen-large-col-gap-40 {
      column-gap: var(--jkl-spacing-40);
    }
    .screen-large-col-gap-40 > * {
      --jkl-flex-gap: var(--jkl-spacing-40);
    }
    .screen-large-row-gap-48 {
      row-gap: var(--jkl-spacing-48);
    }
    .screen-large-col-gap-48 {
      column-gap: var(--jkl-spacing-48);
    }
    .screen-large-col-gap-48 > * {
      --jkl-flex-gap: var(--jkl-spacing-48);
    }
    .screen-large-row-gap-56 {
      row-gap: var(--jkl-spacing-56);
    }
    .screen-large-col-gap-56 {
      column-gap: var(--jkl-spacing-56);
    }
    .screen-large-col-gap-56 > * {
      --jkl-flex-gap: var(--jkl-spacing-56);
    }
    .screen-large-row-gap-64 {
      row-gap: var(--jkl-spacing-64);
    }
    .screen-large-col-gap-64 {
      column-gap: var(--jkl-spacing-64);
    }
    .screen-large-col-gap-64 > * {
      --jkl-flex-gap: var(--jkl-spacing-64);
    }
    .screen-large-row-gap-72 {
      row-gap: var(--jkl-spacing-72);
    }
    .screen-large-col-gap-72 {
      column-gap: var(--jkl-spacing-72);
    }
    .screen-large-col-gap-72 > * {
      --jkl-flex-gap: var(--jkl-spacing-72);
    }
    .screen-large-row-gap-80 {
      row-gap: var(--jkl-spacing-80);
    }
    .screen-large-col-gap-80 {
      column-gap: var(--jkl-spacing-80);
    }
    .screen-large-col-gap-80 > * {
      --jkl-flex-gap: var(--jkl-spacing-80);
    }
    .screen-large-row-gap-104 {
      row-gap: var(--jkl-spacing-104);
    }
    .screen-large-col-gap-104 {
      column-gap: var(--jkl-spacing-104);
    }
    .screen-large-col-gap-104 > * {
      --jkl-flex-gap: var(--jkl-spacing-104);
    }
    .screen-large-row-gap-168 {
      row-gap: var(--jkl-spacing-168);
    }
    .screen-large-col-gap-168 {
      column-gap: var(--jkl-spacing-168);
    }
    .screen-large-col-gap-168 > * {
      --jkl-flex-gap: var(--jkl-spacing-168);
    }
  }
  @media (width >= 1600px) {
    .screen-xl-2\.10 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 2;
    }
    .screen-xl-2\.10 > :where(:nth-child(even)) {
      --jkl-flex-layout: 10;
    }
    .screen-xl-10\.2 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 10;
    }
    .screen-xl-10\.2 > :where(:nth-child(even)) {
      --jkl-flex-layout: 2;
    }
    .screen-xl-3\.9 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 3;
    }
    .screen-xl-3\.9 > :where(:nth-child(even)) {
      --jkl-flex-layout: 9;
    }
    .screen-xl-9\.3 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 9;
    }
    .screen-xl-9\.3 > :where(:nth-child(even)) {
      --jkl-flex-layout: 3;
    }
    .screen-xl-4\.8 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 4;
    }
    .screen-xl-4\.8 > :where(:nth-child(even)) {
      --jkl-flex-layout: 8;
    }
    .screen-xl-8\.4 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 8;
    }
    .screen-xl-8\.4 > :where(:nth-child(even)) {
      --jkl-flex-layout: 4;
    }
    .screen-xl-5\.7 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 5;
    }
    .screen-xl-5\.7 > :where(:nth-child(even)) {
      --jkl-flex-layout: 7;
    }
    .screen-xl-7\.5 > :where(:nth-child(odd)) {
      --jkl-flex-layout: 7;
    }
    .screen-xl-7\.5 > :where(:nth-child(even)) {
      --jkl-flex-layout: 5;
    }
    .screen-xl-0 > * {
      --jkl-flex-layout: auto;
    }
    .screen-xl-1 > * {
      --jkl-flex-layout: 12;
    }
    .screen-xl-2 > * {
      --jkl-flex-layout: 6;
    }
    .screen-xl-3 > * {
      --jkl-flex-layout: 4;
    }
    .screen-xl-4 > * {
      --jkl-flex-layout: 3;
    }
    .screen-xl-6 > * {
      --jkl-flex-layout: 2;
    }
    .screen-xl-row-gap-none {
      row-gap: var(--jkl-spacing-none);
    }
    .screen-xl-col-gap-none {
      column-gap: var(--jkl-spacing-none);
    }
    .screen-xl-col-gap-none > * {
      --jkl-flex-gap: var(--jkl-spacing-none);
    }
    .screen-xl-row-gap-2xs {
      row-gap: var(--jkl-spacing-2xs);
    }
    .screen-xl-col-gap-2xs {
      column-gap: var(--jkl-spacing-2xs);
    }
    .screen-xl-col-gap-2xs > * {
      --jkl-flex-gap: var(--jkl-spacing-2xs);
    }
    .screen-xl-row-gap-xs {
      row-gap: var(--jkl-spacing-xs);
    }
    .screen-xl-col-gap-xs {
      column-gap: var(--jkl-spacing-xs);
    }
    .screen-xl-col-gap-xs > * {
      --jkl-flex-gap: var(--jkl-spacing-xs);
    }
    .screen-xl-row-gap-s {
      row-gap: var(--jkl-spacing-s);
    }
    .screen-xl-col-gap-s {
      column-gap: var(--jkl-spacing-s);
    }
    .screen-xl-col-gap-s > * {
      --jkl-flex-gap: var(--jkl-spacing-s);
    }
    .screen-xl-row-gap-m {
      row-gap: var(--jkl-spacing-m);
    }
    .screen-xl-col-gap-m {
      column-gap: var(--jkl-spacing-m);
    }
    .screen-xl-col-gap-m > * {
      --jkl-flex-gap: var(--jkl-spacing-m);
    }
    .screen-xl-row-gap-l {
      row-gap: var(--jkl-spacing-l);
    }
    .screen-xl-col-gap-l {
      column-gap: var(--jkl-spacing-l);
    }
    .screen-xl-col-gap-l > * {
      --jkl-flex-gap: var(--jkl-spacing-l);
    }
    .screen-xl-row-gap-xl {
      row-gap: var(--jkl-spacing-xl);
    }
    .screen-xl-col-gap-xl {
      column-gap: var(--jkl-spacing-xl);
    }
    .screen-xl-col-gap-xl > * {
      --jkl-flex-gap: var(--jkl-spacing-xl);
    }
    .screen-xl-row-gap-2xl {
      row-gap: var(--jkl-spacing-2xl);
    }
    .screen-xl-col-gap-2xl {
      column-gap: var(--jkl-spacing-2xl);
    }
    .screen-xl-col-gap-2xl > * {
      --jkl-flex-gap: var(--jkl-spacing-2xl);
    }
    .screen-xl-row-gap-0 {
      row-gap: var(--jkl-spacing-0);
    }
    .screen-xl-col-gap-0 {
      column-gap: var(--jkl-spacing-0);
    }
    .screen-xl-col-gap-0 > * {
      --jkl-flex-gap: var(--jkl-spacing-0);
    }
    .screen-xl-row-gap-2 {
      row-gap: var(--jkl-spacing-2);
    }
    .screen-xl-col-gap-2 {
      column-gap: var(--jkl-spacing-2);
    }
    .screen-xl-col-gap-2 > * {
      --jkl-flex-gap: var(--jkl-spacing-2);
    }
    .screen-xl-row-gap-4 {
      row-gap: var(--jkl-spacing-4);
    }
    .screen-xl-col-gap-4 {
      column-gap: var(--jkl-spacing-4);
    }
    .screen-xl-col-gap-4 > * {
      --jkl-flex-gap: var(--jkl-spacing-4);
    }
    .screen-xl-row-gap-8 {
      row-gap: var(--jkl-spacing-8);
    }
    .screen-xl-col-gap-8 {
      column-gap: var(--jkl-spacing-8);
    }
    .screen-xl-col-gap-8 > * {
      --jkl-flex-gap: var(--jkl-spacing-8);
    }
    .screen-xl-row-gap-12 {
      row-gap: var(--jkl-spacing-12);
    }
    .screen-xl-col-gap-12 {
      column-gap: var(--jkl-spacing-12);
    }
    .screen-xl-col-gap-12 > * {
      --jkl-flex-gap: var(--jkl-spacing-12);
    }
    .screen-xl-row-gap-16 {
      row-gap: var(--jkl-spacing-16);
    }
    .screen-xl-col-gap-16 {
      column-gap: var(--jkl-spacing-16);
    }
    .screen-xl-col-gap-16 > * {
      --jkl-flex-gap: var(--jkl-spacing-16);
    }
    .screen-xl-row-gap-20 {
      row-gap: var(--jkl-spacing-20);
    }
    .screen-xl-col-gap-20 {
      column-gap: var(--jkl-spacing-20);
    }
    .screen-xl-col-gap-20 > * {
      --jkl-flex-gap: var(--jkl-spacing-20);
    }
    .screen-xl-row-gap-24 {
      row-gap: var(--jkl-spacing-24);
    }
    .screen-xl-col-gap-24 {
      column-gap: var(--jkl-spacing-24);
    }
    .screen-xl-col-gap-24 > * {
      --jkl-flex-gap: var(--jkl-spacing-24);
    }
    .screen-xl-row-gap-28 {
      row-gap: var(--jkl-spacing-28);
    }
    .screen-xl-col-gap-28 {
      column-gap: var(--jkl-spacing-28);
    }
    .screen-xl-col-gap-28 > * {
      --jkl-flex-gap: var(--jkl-spacing-28);
    }
    .screen-xl-row-gap-32 {
      row-gap: var(--jkl-spacing-32);
    }
    .screen-xl-col-gap-32 {
      column-gap: var(--jkl-spacing-32);
    }
    .screen-xl-col-gap-32 > * {
      --jkl-flex-gap: var(--jkl-spacing-32);
    }
    .screen-xl-row-gap-40 {
      row-gap: var(--jkl-spacing-40);
    }
    .screen-xl-col-gap-40 {
      column-gap: var(--jkl-spacing-40);
    }
    .screen-xl-col-gap-40 > * {
      --jkl-flex-gap: var(--jkl-spacing-40);
    }
    .screen-xl-row-gap-48 {
      row-gap: var(--jkl-spacing-48);
    }
    .screen-xl-col-gap-48 {
      column-gap: var(--jkl-spacing-48);
    }
    .screen-xl-col-gap-48 > * {
      --jkl-flex-gap: var(--jkl-spacing-48);
    }
    .screen-xl-row-gap-56 {
      row-gap: var(--jkl-spacing-56);
    }
    .screen-xl-col-gap-56 {
      column-gap: var(--jkl-spacing-56);
    }
    .screen-xl-col-gap-56 > * {
      --jkl-flex-gap: var(--jkl-spacing-56);
    }
    .screen-xl-row-gap-64 {
      row-gap: var(--jkl-spacing-64);
    }
    .screen-xl-col-gap-64 {
      column-gap: var(--jkl-spacing-64);
    }
    .screen-xl-col-gap-64 > * {
      --jkl-flex-gap: var(--jkl-spacing-64);
    }
    .screen-xl-row-gap-72 {
      row-gap: var(--jkl-spacing-72);
    }
    .screen-xl-col-gap-72 {
      column-gap: var(--jkl-spacing-72);
    }
    .screen-xl-col-gap-72 > * {
      --jkl-flex-gap: var(--jkl-spacing-72);
    }
    .screen-xl-row-gap-80 {
      row-gap: var(--jkl-spacing-80);
    }
    .screen-xl-col-gap-80 {
      column-gap: var(--jkl-spacing-80);
    }
    .screen-xl-col-gap-80 > * {
      --jkl-flex-gap: var(--jkl-spacing-80);
    }
    .screen-xl-row-gap-104 {
      row-gap: var(--jkl-spacing-104);
    }
    .screen-xl-col-gap-104 {
      column-gap: var(--jkl-spacing-104);
    }
    .screen-xl-col-gap-104 > * {
      --jkl-flex-gap: var(--jkl-spacing-104);
    }
    .screen-xl-row-gap-168 {
      row-gap: var(--jkl-spacing-168);
    }
    .screen-xl-col-gap-168 {
      column-gap: var(--jkl-spacing-168);
    }
    .screen-xl-col-gap-168 > * {
      --jkl-flex-gap: var(--jkl-spacing-168);
    }
  }
}
.jkl-toggle-slider {
  --jkl-slider-bg: var(--jkl-color-background-container-low);
  --jkl-slider-pill: var(--jkl-color-background-container-high);
  --jkl-slider-text: var(--jkl-color-text-default);
  --jkl-slider-text--active: var(--jkl-color-text-default);
  --jkl-slider-focus-color: var(--jkl-color-border-action);
  --jkl-slider-hover-color: var(--jkl-color-border-action);
  font-size: var(--jkl-slider-font-size);
  line-height: var(--jkl-slider-line-height);
  font-weight: var(--jkl-slider-font-weight);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex-direction: column;
  user-select: none;
}
html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill {
  box-shadow: inset 0 0 0 0.125rem var(--jkl-slider-focus-color);
}
.jkl-toggle-slider__legend {
  margin-bottom: 0.5rem;
  font-size: var(--jkl-slider-legend-font-size);
  line-height: var(--jkl-slider-legend-line-height);
  font-weight: var(--jkl-slider-legend-font-weight);
}
.jkl-toggle-slider__legend--sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}
.jkl-toggle-slider__inputs {
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: var(--jkl-slider-bg);
  border-radius: 6.25rem;
  border: 2px solid var(--jkl-slider-bg);
}
.jkl-toggle-slider__input {
  position: absolute;
  opacity: 0;
}
.jkl-toggle-slider__label {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
  padding: var(--jkl-unit-02) var(--jkl-unit-20);
  color: var(--jkl-slider-pill-text);
  -webkit-tap-highlight-color: transparent;
  /* Prevent really short labels to look like circles */
  min-width: 30px;
}
.jkl-toggle-slider__label:hover {
  color: var(--jkl-slider-hover-color);
}
.jkl-toggle-slider__label--selected {
  --jkl-icon-weight: 400;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--jkl-slider-pill-text--active);
}
.jkl-toggle-slider__pill {
  height: 100%;
  background-color: var(--jkl-slider-pill);
  position: absolute;
  transition-property: width, transform;
  border-radius: 6.25rem;
  transition-timing-function: ease;
  transition-duration: 250ms;
}
@media (min-width: 680px) {
  .jkl-toggle-slider {
    flex-direction: row;
    align-items: center;
  }
  .jkl-toggle-slider__legend {
    margin-bottom: 0;
    margin-right: 1.2em;
  }
}
@media screen and (forced-colors: active) {
  .jkl-toggle-slider .jkl-toggle-slider__inputs {
    background-color: Canvas;
  }
  .jkl-toggle-slider .jkl-toggle-slider__pill {
    background-color: ButtonFace;
  }
}

.jkl-toggle-switch {
  --jkl-toggle-switch-height: var(--jkl-unit-40);
  --jkl-toggle-switch-width: var(--jkl-unit-60);
  --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
  --border-width: 0.0625rem;
  --switch-padding: var(--jkl-unit-05);
  --knob-position: 0;
  --switch-border-color: var(--jkl-color-border-action);
  --indicator-color: var(--jkl-color-background-container-high);
  --knob-border-color: var(--jkl-color-border-action);
  --knob-color: var(--jkl-color-background-container-high);
  --text-color: var(--jkl-color-text-default);
  --icon-color: var(--jkl-color-text-inverted);
  background: transparent;
  color: var(--text-color);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--jkl-unit-10);
  touch-action: none;
  font-size: var(--jkl-font-size-3);
  line-height: var(--jkl-line-height-tight);
  font-weight: 400;
  --jkl-icon-weight: 300;
}
.jkl-toggle-switch {
  outline: 0;
  border-style: none;
  outline-style: none;
}
.jkl-toggle-switch:active, .jkl-toggle-switch:hover, .jkl-toggle-switch:focus {
  outline: 0;
  outline-style: none;
}
@media screen and (forced-colors: active) {
  .jkl-toggle-switch {
    outline: revert;
    border-style: revert;
    outline-style: revert;
  }
  .jkl-toggle-switch:active, .jkl-toggle-switch:hover, .jkl-toggle-switch:focus {
    outline: revert;
    outline-style: revert;
  }
}
@media screen and (forced-colors: active) {
  .jkl-toggle-switch {
    border-color: transparent;
    border-style: none;
  }
}
.jkl-toggle-switch[aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch {
  --indicator-color: var(--jkl-color-background-container-inverted);
  --knob-color: var(--jkl-color-text-inverted);
  --knob-position: calc(
      var(--jkl-toggle-switch-width) - var(
              --jkl-toggle-switch-knob-size
          ) - var(--switch-padding) *
          2
  );
}
.jkl-toggle-switch[disabled] {
  cursor: revert;
  --text-color: var(--jkl-color-text-subdued);
  --switch-border-color: var(--jkl-color-border-subdued);
  --knob-border-color: var(--jkl-color-border-subdued);
}
.jkl-toggle-switch[disabled][aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch[disabled] {
  --indicator-color: var(--jkl-color-border-subdued);
}

.jkl-toggle-switch-widget {
  --jkl-toggle-switch-height: var(--jkl-unit-40);
  --jkl-toggle-switch-width: var(--jkl-unit-60);
  --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--jkl-toggle-switch-height);
  width: var(--jkl-toggle-switch-width);
  border-radius: 9999px;
  border: var(--border-width) solid var(--switch-border-color);
  overflow: hidden;
  user-select: none;
  padding: var(--switch-padding);
  background-color: var(--indicator-color);
  pointer-events: none;
}
@media screen and (forced-colors: active) {
  .jkl-toggle-switch-widget {
    border: 0.0625rem solid ButtonText;
  }
}
.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 3px;
}
.jkl-toggle-switch-widget__slider {
  position: relative;
  box-sizing: border-box;
  height: var(--jkl-toggle-switch-knob-size);
  width: var(--jkl-toggle-switch-knob-size);
  color: var(--icon-color);
  font-size: var(--jkl-font-size-1);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: translate;
  translate: var(--knob-position);
}
.jkl-toggle-switch-widget__knob {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: var(--border-width) solid var(--knob-border-color);
  background-color: var(--knob-color);
}
.jkl-toggle-switch-widget__indicator {
  position: absolute;
  top: 50%;
  right: 100%;
  font-size: var(--jkl-unit-20);
  transform: translate(0, -50%);
}

@layer jokul.components {
  :where(.jkl-text) {
    font-weight: var(--jkl-typography-weight-normal);
    line-height: var(--jkl-line-height-relaxed);
  }
  .jkl-text[data-text-size] {
    margin-block: 0;
  }
  .jkl-text[data-text-size=xs] {
    font-size: var(--jkl-font-size-1);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text[data-text-size=s] {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-text[data-text-size=m] {
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text[data-text-size=l] {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  .jkl-text[data-bold],
  strong.jkl-text[data-text-size] {
    font-weight: var(--jkl-typography-weight-bold);
    --jkl-icon-weight: 400;
  }
  .jkl-text[data-short] {
    line-height: var(--jkl-line-height-tight);
  }
  :is(code, kbd, samp, var).jkl-text {
    font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
  }
  label.jkl-text {
    display: block;
    margin-block-end: var(--jkl-spacing-8);
  }
}
@layer jokul.components {
  :where(.jkl-title) {
    font-weight: var(--jkl-typography-weight-normal);
    line-height: var(--jkl-line-height-tight);
  }
  .jkl-title[data-text-size] {
    margin-block: 0;
  }
  .jkl-title[data-text-size=xs],
  .jkl-heading-xs {
    font-size: var(--jkl-font-size-4);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  :where(.jkl-heading-xs) {
    margin-block: 0;
  }
  .jkl-title[data-text-size=s],
  .jkl-heading-s {
    font-size: var(--jkl-font-size-5);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  :where(.jkl-heading-s) {
    margin-block: 0;
  }
  .jkl-title[data-text-size=m],
  .jkl-heading-m {
    font-size: var(--jkl-font-size-6);
    line-height: var(--jkl-line-height-tight);
    font-weight: 700;
    --jkl-icon-weight: 400;
  }
  :where(.jkl-heading-m) {
    margin-block: 0;
  }
  .jkl-title[data-text-size=l],
  .jkl-heading-l {
    font-size: var(--jkl-font-size-7);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  :where(.jkl-heading-l) {
    margin-block: 0;
  }
  .jkl-title[data-text-size=xl],
  .jkl-heading-xl {
    font-size: var(--jkl-font-size-8);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
  }
  :where(.jkl-heading-xl) {
    margin-block: 0;
  }
  :is(label, legend).jkl-title[data-text-size] {
    font-weight: var(--jkl-typography-weight-normal);
    line-height: var(--jkl-line-height-relaxed);
  }
  label.jkl-title[data-text-size] {
    display: block;
    margin-block-end: var(--jkl-spacing-8);
  }
}
@layer jokul.components {
  .jkl-help {
    anchor-scope: all;
    display: inline;
  }
  .jkl-help-trigger {
    vertical-align: middle;
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
    overflow: visible !important;
    anchor-name: --trigger;
  }
  .jkl-help-trigger::after {
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    inset-inline: -50%;
    inset-block: -20%;
  }
  .jkl-help-popover {
    width: max-content;
    max-width: min(40ch, 80vw);
    padding: var(--jkl-unit-30);
    margin: var(--jkl-unit-05);
    position-anchor: --trigger;
    background-color: var(--jkl-color-background-container-inverted);
    color: var(--jkl-color-text-inverted);
    anchor-name: --help-box;
  }
  .jkl-help-popover[data-position=top] {
    position-area: top center;
    position-try: top, bottom, right, left;
  }
  .jkl-help-popover[data-position=bottom] {
    position-area: bottom center;
    position-try: bottom, top, right, left;
  }
  .jkl-help-popover[data-position=left] {
    position-area: left center;
    position-try: left, right, top, bottom;
  }
  .jkl-help-popover[data-position=right] {
    position-area: right center;
    position-try: right, left, top, bottom;
  }
}