@charset "UTF-8";
/**
 * Do not edit directly, this file was auto-generated.
 */
@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-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-us5uios;
    margin-right: calc(var(--jkl-loader-spacing) * 0.9);
  }
  .jkl-loader__dot--middle {
    animation-name: jkl-loader-middle-spin-us5uipi;
    margin-right: var(--jkl-loader-spacing);
  }
  .jkl-loader__dot--right {
    animation-name: jkl-loader-right-spin-us5uipx;
  }
  @media screen and (forced-colors: active) {
    .jkl-loader__dot {
      background-color: CanvasText;
    }
  }
  @keyframes jkl-loader-left-spin-us5uios {
    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-us5uipi {
    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-us5uipx {
    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-us5uiqu;
    }
  }
  .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-us5uiqu;
    }
  }
  @keyframes jkl-blink-us5uiqu {
    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-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);
  }
}