@charset "UTF-8";
/**
    Colors

    Changes in colors must be changed accordingly in static\shared\utils\constants.ts
*/
/* Primary */
/* Neutrals */
/* Extended */
/* Other */
/**
    Box-shadow
*/
/* Number not correct according to Figma */
/* Number correct according to Figma */
/**
    Drop shadow
*/
/**
    Whitespaces
*/
/**
    Widths
*/
/**
    Breakpoints
*/
/**
    Font breakpoints
*/
/**
    Font variables
*/
/**
    Font paragraph and caption
*/
/**
    Headings
*/
/* Not in figma */
/* Not in figma */
/*
 * FOCUS MIXINS
 */
/*
 * ACCESSILIBITY MIXINS
 */
/*
 * 
 */
/**
  * Buttons
  */
/*
 * Button focus
 */
/*
 * INPUT MIXINS
 */
/*
 * LABEL MIXINS
 */
.listcontainer {
  padding: 0;
}
.listcontainer .listitemholder {
  display: block;
  border-radius: 5px;
  margin-bottom: 15px;
  position: relative;
  background: rgb(255, 255, 255);
  padding: 24px 32px;
  transition: box-shadow 0.2s linear, padding 0.2s linear, background 0.2s linear;
  list-style: none;
}
.listcontainer .listitemholder .read-more-container {
  text-align: center;
  margin: 32px 0;
}
.listcontainer .listitemholder:hover {
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.listcontainer .listitemholder .heading {
  cursor: pointer;
}
.listcontainer .listitemholder .heading .topline h2 {
  font-size: 1.25rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  margin: 0;
  transition: font-size 0.1s linear;
  will-change: font-size;
  width: calc(100% - 48px);
}
.listcontainer .listitemholder .heading .topline button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  cursor: pointer;
  width: 48px;
  height: 48px;
  text-align: center;
  position: absolute;
  top: 15px;
  right: 20px;
}
.listcontainer .listitemholder .heading .topline button::before {
  content: "";
  display: inline-block;
  background: url(../img/icons/icon_plus--blue.svg) no-repeat center;
  height: 48px;
  width: 48px;
  line-height: 1;
  will-change: transform;
}
.listcontainer .listitemholder .heading .topline button:focus {
  outline: 2px solid rgb(66, 139, 255);
}
.listcontainer .listitemholder .heading .topline p {
  padding: 0;
  margin: 0;
}
.listcontainer .listitemholder .heading .registryownerlink {
  font-size: 1rem;
  line-height: 1.5;
}
.listcontainer .listitemholder .heading .registryownerlink a {
  display: none;
  color: rgb(82, 30, 255);
}
.listcontainer .listitemholder .heading .registryownerlink a:hover, .listcontainer .listitemholder .heading .registryownerlink a:focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.listcontainer .listitemholder .heading .registryownerlink a:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.listcontainer .listitemholder .heading .registryownerlink a:active {
  color: rgb(38, 32, 69);
}
.listcontainer .listitemholder .heading .registryownerlink a:disabled {
  opacity: 0.3;
}
.listcontainer .listitemholder .heading .registryownerlink > .registryownername {
  color: rgb(81, 84, 123);
}
.listcontainer .listitemholder .body {
  overflow: hidden;
  transition: max-height 0.08s linear, visibility 0.08s linear;
  max-height: 0;
  visibility: hidden;
}
.listcontainer .listitemholder .body .content {
  padding: 50px 0 0 0;
}
.listcontainer .listitemholder .body .content .col {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}
.listcontainer .listitemholder .body .content .col .info,
.listcontainer .listitemholder .body .content .col .addresslinks {
  flex: 1 1 auto;
  width: 60%;
  padding: 20px;
  font-size: 1.125rem;
  line-height: 1.4;
}
.listcontainer .listitemholder .body .content .col .info {
  clear: both;
  padding-top: 40px;
  position: relative;
  max-height: 415px;
  overflow: hidden;
}
.listcontainer .listitemholder .body .content .col .info:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(rgba(255, 255, 255, 0) 304px, white);
  pointer-events: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks {
  width: 40%;
  display: flex;
  flex-direction: column;
}
.listcontainer .listitemholder .body .content .col .addresslinks h3 {
  margin-top: 0;
  font: normal 0.875rem/1.4 graphik, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: rgb(81, 84, 123);
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo {
  margin-bottom: 56px;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address {
  font-style: normal;
  word-break: break-all;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail {
  display: flex;
  text-decoration: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span {
  color: rgb(82, 30, 255);
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span:hover, .listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span:focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span:active {
  color: rgb(38, 32, 69);
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span:disabled {
  opacity: 0.3;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail span {
  vertical-align: super;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactemail::before {
  content: "";
  background: url(../img/icons/icon_email.svg) 0 0/24px 24px no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactpersonicon {
  display: flex;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactpersonicon::before {
  content: "";
  background: url(../img/icons/icon_user-outline.svg) 0 0/24px 24px no-repeat;
  background-size: 24px 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactphone {
  display: flex;
}
.listcontainer .listitemholder .body .content .col .addresslinks .contactinfo address .contactphone::before {
  content: "";
  background: url(../img/icons/icon_phone.svg) 0 0/24px 24px no-repeat;
  background-size: 24px 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links {
  display: flex;
  flex-direction: column;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a {
  margin-top: 16px;
  text-decoration: none;
  display: inline-flex;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a:first-of-type {
  margin-top: 0;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span {
  color: rgb(82, 30, 255);
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span:hover, .listcontainer .listitemholder .body .content .col .addresslinks .links a span:focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span:active {
  color: rgb(38, 32, 69);
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span:disabled {
  opacity: 0.3;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a span {
  vertical-align: super;
}
.listcontainer .listitemholder .body .content .col .addresslinks .links a::before {
  content: "";
  background: url(../img/icons/icon_link.svg) 0 0 no-repeat;
  background-size: 24px 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.listcontainer .listitemholder .taglist {
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 6px;
}
.listcontainer .listitemholder .taglist span {
  margin: 0 5px;
}
.listcontainer .listitemholder .taglist span:first-child {
  margin-left: 0;
}
.listcontainer .listitemholder .taglist .taglistitem {
  color: rgb(82, 30, 255);
}
.listcontainer .listitemholder .taglist .taglistitem:hover, .listcontainer .listitemholder .taglist .taglistitem:focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.listcontainer .listitemholder .taglist .taglistitem:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.listcontainer .listitemholder .taglist .taglistitem:active {
  color: rgb(38, 32, 69);
}
.listcontainer .listitemholder .taglist .taglistitem:disabled {
  opacity: 0.3;
}
.listcontainer .listitemholder .taglist .taglistitem {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  color: rgb(82, 30, 255);
  border-bottom: 1px solid rgb(82, 30, 255);
  outline: inherit;
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 8px;
}
.listcontainer .listitemholder.active {
  box-shadow: 0px 11px 22px rgba(33, 42, 190, 0.12);
  transition: box-shadow 0.2s linear, padding 0.2s linear, background 0.2s linear;
}
.listcontainer .listitemholder.active:hover {
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.listcontainer .listitemholder.active .heading {
  padding: 0;
}
.listcontainer .listitemholder.active .heading .topline {
  padding: 0 0 16px;
}
.listcontainer .listitemholder.active .heading .topline h2 {
  font-size: 1.875rem;
  transition: font-size 0.15s linear;
}
.listcontainer .listitemholder.active .heading .topline button::before {
  background-size: 24px;
  transform: rotate(135deg);
  animation: 0.2s linear rotate360a;
}
.listcontainer .listitemholder.active .heading .registryownerlink a {
  display: inline;
}
.listcontainer .listitemholder.active .body {
  transition: max-height 0.2s linear;
  visibility: visible;
  margin-top: 40px;
}
.listcontainer .listitemholder.active .body .content {
  padding: 0;
  max-width: none;
}
.listcontainer .listitemholder.minimized .heading .topline button::before {
  background-size: 24px;
  animation: 0.2s linear backwards rotate360b;
}

@media all and (max-width: 1280px) {
  .listcontainer .listitemholder {
    padding: 24px 32px;
  }
  .listcontainer .listitemholder .body .content {
    margin: 0;
  }
  .listcontainer .listitemholder .taglist {
    padding-top: 0 !important;
  }
}
@media (max-width: 1200px) {
  .listcontainer .listitemholder .body .content .col {
    flex-direction: column;
  }
  .listcontainer .listitemholder .body .content .col .info {
    width: 100%;
  }
  .listcontainer .listitemholder .body .content .col .addresslinks {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .listcontainer .listitemholder .body .content .col .addresslinks .links {
    width: auto;
    align-items: flex-start;
  }
}
@media all and (max-width: 767px) {
  .listcontainer .listitemholder {
    padding: 16px;
  }
  .listcontainer .listitemholder .heading .topline h2 {
    width: calc(100% - 25px);
    font-size: 1rem;
    overflow: hidden;
    overflow-wrap: break-word;
  }
  .listcontainer .listitemholder .heading .topline button {
    right: 12px;
    width: 24px;
    height: 24px;
  }
  .listcontainer .listitemholder .heading .topline button::before {
    height: 16px;
    width: 16px;
  }
  .listcontainer .listitemholder .taglist {
    padding: 6px 0 0 0;
  }
  .listcontainer .listitemholder .taglist .taglistitem {
    font-size: 0.75rem;
  }
  .listcontainer .listitemholder.active {
    padding: 16px;
  }
  .listcontainer .listitemholder.active .heading {
    padding: 0;
  }
  .listcontainer .listitemholder.active .heading .topline {
    padding: 0;
  }
  .listcontainer .listitemholder.active .heading .topline h2 {
    font-size: 1.25rem;
    text-overflow: ellipsis;
  }
  .listcontainer .listitemholder.active .heading .topline button {
    padding-top: 0;
    font-size: 1.25rem;
  }
  .listcontainer .listitemholder.active .body .content {
    padding: 0;
    margin: 0;
  }
  .listcontainer .listitemholder.active .body .content .col .info,
  .listcontainer .listitemholder.active .body .content .col .addresslinks {
    padding: 20px 0;
  }
  .listcontainer .listitemholder.active .body .content .col .info .links a,
  .listcontainer .listitemholder.active .body .content .col .addresslinks .links a {
    margin: 0 0 10px;
  }
  .listcontainer .listitemholder.active .body .content ul {
    padding-left: 20px;
  }
}
@keyframes slideIn {
  0% {
    width: 0%;
  }
  100% {
    width: 20%;
  }
}
@keyframes rotate360a {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(135deg);
    transform-origin: 50% 50%;
  }
}
@keyframes rotate360b {
  0% {
    transform: rotate(135deg);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}
@keyframes pulsate {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  }
  0% {
    box-shadow: none;
  }
}
@keyframes rightmenuin {
  0% {
    display: block;
    transform: translateX(320px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes rightmenuout {
  100% {
    transform: translateX(320px);
  }
  0% {
    display: none;
    transform: translateX(0px);
  }
}
@keyframes fadein {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
.application-summary {
  padding: 32px;
  margin-bottom: 40px;
}
.application-summary__project-leader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 192px;
  text-align: center;
}
.application-summary__project-leader p {
  margin: 0;
}
.application-summary__project-leader__text {
  margin: 24px 0 64px 0;
}
.application-summary__project-leader__title {
  margin-bottom: 12px;
  margin-top: 32px;
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .application-summary__project-leader__title {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-summary__project-leader__title {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.application-summary__project-leader__buttons {
  display: flex;
  flex-direction: row;
}
.application-summary__project-leader__button {
  width: fit-content;
  min-width: 188px;
  margin-bottom: 64px;
  margin-right: 24px;
}
.application-summary--dark {
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}
.application-summary--dark ul {
  margin: 0 0 40px 0;
}
.application-summary--dark li span {
  color: rgb(255, 255, 255);
}
.application-summary--dark li a {
  margin-left: 8px;
}
.application-summary--dark a {
  color: rgb(255, 255, 255);
  margin-left: 8px;
}
.application-summary--dark a:focus {
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
}
.application-summary--dark .application-summary__case {
  color: rgb(255, 255, 255);
}
@media all and (max-width: 767px) {
  .application-summary--dark {
    margin-right: -16px;
    margin-left: -16px;
    padding: 32px 16px;
  }
  .form-wrapper .application-summary--dark {
    margin-left: -32px;
    margin-right: -32px;
  }
}
.application-summary--light {
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
}
.application-summary--light ul {
  margin: 0;
}
.application-summary--light li span {
  color: rgb(38, 32, 69);
}
.application-summary--light li a {
  margin-left: 8px;
}
.application-summary--light .application-summary__case {
  color: rgb(38, 32, 69);
}
@media all and (max-width: 767px) {
  .form-wrapper .application-summary--light {
    margin-left: -32px;
    margin-right: -32px;
  }
}
.application-summary ul {
  padding: 0;
  list-style: none;
}
.application-summary li {
  margin-bottom: 16px;
  display: flex;
  word-break: break-word;
  max-width: 100%;
  align-items: flex-start;
  font-size: 1.125rem;
}
@media all and (max-width: 767px) {
  .application-summary li {
    flex-direction: column;
  }
}
.application-summary li span {
  width: 10rem;
  flex-shrink: 0;
}
.application-summary__case {
  margin: 0 0 40px;
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .application-summary__case {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-summary__case {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-summary__case {
    font-size: 1.25rem;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
  }
}
.application-summary__case #infobox-case-number {
  margin-right: 8px;
  font-family: "graphik", Arial, Helvetica, sans-serif;
}

.breadcrumbs {
  margin-bottom: 48px;
}
@media all and (max-width: 767px) {
  .breadcrumbs {
    display: none;
  }
}
.breadcrumbs__list {
  padding: 0;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.breadcrumbs__list-item {
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
}
.breadcrumbs__list-item a,
.breadcrumbs__list-item button,
.breadcrumbs__list-item .breadcrumbs__last-crumb {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .breadcrumbs__list-item a,
  .breadcrumbs__list-item button,
  .breadcrumbs__list-item .breadcrumbs__last-crumb {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .breadcrumbs__list-item a,
  .breadcrumbs__list-item button,
  .breadcrumbs__list-item .breadcrumbs__last-crumb {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.breadcrumbs__list-item a,
.breadcrumbs__list-item button,
.breadcrumbs__list-item .breadcrumbs__last-crumb {
  text-decoration: none;
  color: rgb(81, 84, 123);
  line-height: 1;
}
.breadcrumbs__list-item button {
  border: none;
  background-color: transparent;
  padding: 0;
}
.breadcrumbs__list-item button:focus {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
  box-shadow: none;
}
.breadcrumbs__list-item a,
.breadcrumbs__list-item button {
  text-decoration: underline;
}
.breadcrumbs__list-item a:hover,
.breadcrumbs__list-item button:hover {
  color: rgb(82, 30, 255);
  text-decoration: none;
}
.breadcrumbs__list-item a:focus,
.breadcrumbs__list-item button:focus {
  color: rgb(82, 30, 255);
}
.breadcrumbs__homelink {
  display: flex;
  align-items: center;
}
.breadcrumbs__divider {
  background-size: 24px;
  width: 32px;
}

.color--primary {
  color: rgb(82, 30, 255);
}
.color--primary-dark {
  color: rgb(50, 55, 141);
}
.color--dark {
  color: rgb(38, 32, 69);
}
.color--accent {
  color: rgb(155, 233, 243);
}
.color--white {
  color: rgb(255, 255, 255);
}
.color--focus {
  color: rgb(66, 139, 255);
}
.color--grey10 {
  color: rgb(246, 247, 252);
}
.color--grey20 {
  color: rgb(239, 240, 250);
}
.color--grey30 {
  color: rgb(230, 230, 237);
}
.color--grey40 {
  color: rgb(187, 184, 201);
}
.color--grey50 {
  color: rgb(114, 113, 150);
}
.color--grey60 {
  color: rgb(81, 84, 123);
}
.color--grey70 {
  color: rgb(42, 45, 80);
}

.dialogue {
  max-height: 90%;
  width: 720px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(230, 230, 237);
  box-shadow: 0px 16px 32px 0px rgba(33, 42, 190, 0.12);
  border-radius: 8px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  outline: none;
  animation: 0.2s modal-in forwards;
  position: relative;
}
.dialogue--wide {
  width: 960px;
}
.dialogue__footer {
  padding: 1rem 2rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  justify-content: flex-end;
}
.dialogue__footer .hd-button {
  min-width: 200px;
}

.dialogue__header {
  width: 100%;
  padding: 2.5rem 6rem 1rem 2.5rem;
}

.dialogue__header-text {
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  padding-top: 1rem;
  margin: 0;
}

.dialogue__body {
  padding: 1rem 2.5rem 4rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 100px;
}
.dialogue__body h3 {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.dialogue__body-heading {
  margin: 0;
  font-size: 2rem;
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.dialogue__body-subheading {
  margin: 0 0 36px 0;
  font-size: 1.125rem;
  color: rgb(81, 84, 123);
  font-family: "graphik", Arial, Helvetica, sans-serif;
}

.dialogue__body-icon {
  width: 100%;
  display: flex;
}
.dialogue__body-icon--center {
  justify-content: center;
}
.dialogue__body-icon--left {
  justify-content: flex-start;
}
.dialogue__body-icon--right {
  justify-content: flex-end;
}

.dialogue__text {
  margin: 0 0 24px 0;
  word-break: break-word;
}
.dialogue__text > p {
  margin: 0;
}
@media all and (max-width: 767px) {
  .dialogue__text {
    font-size: 1.125rem;
  }
}
.dialogue__text:last-of-type {
  margin: 0;
}
.dialogue__text--nomargin {
  margin: 0;
}
.dialogue__text--dark-grey {
  color: rgb(81, 84, 123);
}
.dialogue__text--confirmation-text {
  color: rgb(81, 84, 123);
}
.dialogue__text--confirmation-text-strong {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.dialogue__text--bold {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}

.dialogue-text--medium {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.dialogue__text--graye {
  margin: 0;
  color: rgb(114, 113, 150);
}

.dialogue__text--questionmark-after:after {
  content: "?";
  font-family: "graphik", Arial, Helvetica, sans-serif;
}

.dialogue__text--flexwrap {
  display: flex;
}
.dialogue__text--flexwrap button {
  margin-left: 16px;
}

.dialogue-textinput {
  margin-top: 40px;
}

@media all and (max-width: 767px) {
  .dialogue__text--flexwrap {
    flex-wrap: wrap;
    margin: 0 -8px 24px;
    min-height: 116px;
  }
  .dialogue__text--flexwrap button,
  .dialogue__text--flexwrap a {
    flex: 1 1 0;
    margin: 8px;
  }
}
.dialogue__project-code {
  display: block;
}

.dialogue__inputgroup {
  display: flex;
  flex-direction: column-reverse;
}

.new-project-dialogue__add-new-list-button {
  margin-right: 16px;
}

.save-variables-dialogue__no-list-text--hidden {
  display: none;
}

.save-variables-dialogue__header-newlist--hidden {
  display: none;
}

@media all and (max-width: 767px) {
  .dialogue {
    max-height: 100%;
    height: 100%;
    width: 100%;
    border-radius: 0;
  }
  .dialogue__header,
  .dialogue__footer {
    padding: 16px;
  }
  .dialogue__footer {
    padding: 8px;
  }
  .dialogue__footer button,
  .dialogue__footer a {
    margin: 8px;
  }
  .dialogue__body {
    padding: 24px 16px;
    flex: 1 1 0;
  }
  .dialogue__project-code {
    display: none;
  }
}
@font-face {
  font-family: "graphik";
  src: url("../fonts/graphik-web/Graphik-Regular.woff") format("woff");
}
@font-face {
  font-family: "graphik-medium";
  src: url("../fonts/graphik-web/Graphik-Medium.woff") format("woff");
}
/* `$font-family-light` har stått i `abstracts/_variables.scss` siden før dette repoet ble delt,
   uten en `@font-face` bak seg og uten en eneste bruker: den som hadde satt den, hadde fått Arial.
   `Graphik-Light.woff` har ligget i `wwwroot/fonts/graphik-web/` hele tida. Her kobles de sammen.

   Eget familienavn og ikke `font-weight: 300` på `graphik`: en vektdeskriptor på den familien ville
   gjort at hvilken som helst `font-weight: 300` andre steder i porteføljen — også i vertens egne
   ark, som vi ikke eier — stille byttet skriftsnitt. Et eget navn kan bare treffe den som ber om
   det. Filen lastes ikke ned før noen bruker den. */
@font-face {
  font-family: "graphik-light";
  src: url("../fonts/graphik-web/Graphik-Light.woff") format("woff");
}
.font-normal {
  font-family: "graphik", Arial, Helvetica, sans-serif;
}

.font-bold {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.page-container {
  max-width: 1488px;
  width: 100%;
  padding: 0 24px;
  margin: 0 auto;
}

.content-container {
  max-width: 1200px;
  width: 100%;
  padding: 0 24px;
  margin: 0 auto;
}
.content-container--max900 {
  max-width: 900px;
}
.content-container--max600 {
  max-width: 600px;
}
@media all and (max-width: 767px) {
  .content-container {
    padding: 0 16px;
  }
}
.content-container--max900 {
  max-width: 900px;
  margin: 0 auto;
}
.content-container__info-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 64px 0;
}
.content-container__info-text p {
  margin: 0;
}

.article-container {
  max-width: 800px;
  width: 100%;
  padding: 0 24px;
  margin: 0 auto;
}
@media all and (max-width: 767px) {
  .article-container {
    padding: 0;
  }
}

* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}
* strong {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.editor-content-text > p {
  margin: 0px;
}

button::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
select::-moz-focus-inner,
input[type=file] > input[type=button]::-moz-focus-inner {
  border: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  body {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  body {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
body {
  color: rgb(38, 32, 69);
  background: rgb(246, 247, 252);
}
body #oldbrowsererror {
  display: none;
  z-index: 2000;
}

#maincontent {
  padding-top: 62px;
}

/*
 * TABLE STYLING
 */
th {
  font-weight: normal;
}

/**

/*
 * LINK STYLING
 */
a {
  text-decoration: underline;
  color: rgb(50, 55, 141);
}
a:hover {
  color: rgb(82, 30, 255);
  text-decoration: none;
}
a:focus {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
}

a[target=_blank]:not(.hd-button-square) {
  text-decoration: underline;
  color: rgb(50, 55, 141);
}
a[target=_blank]:not(.hd-button-square):hover {
  color: rgb(82, 30, 255);
  text-decoration: none;
}
a[target=_blank]:not(.hd-button-square):focus {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
}
a[target=_blank]:not(.hd-button-square)::after {
  content: "";
  width: 1em;
  height: 1em;
  background-size: 1em;
  display: inline-block;
  vertical-align: text-bottom;
  margin: 0 0 0 8px;
  background-image: url(../img/icons/icon_link--primary-dark.svg);
}
a[target=_blank]:not(.hd-button-square):hover::after {
  background-image: url(../img/icons/icon_link--primary.svg);
}
a[target=_blank]:not(.hd-button-square):focus::after {
  text-decoration: none;
  background-image: url(../img/icons/icon_link--primary.svg);
}

a.standalone-icon-link {
  display: block;
  text-decoration: none;
}
a.standalone-icon-link::after {
  width: 1.25em;
  height: 1.25em;
  background-size: 1.25em;
  vertical-align: text-bottom;
}
a.standalone-icon-link:hover {
  text-decoration: underline;
}
a.standalone-icon-link:hover:focus {
  text-decoration: none;
}

.pagecontent-end-padding {
  padding-bottom: 9rem;
}

.screenreader-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media all and (max-width: 767px) {
  .screenreader-only-mobile {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

/*
 * SKIPLINK STYLING
 */
.skiplink.screenreader-only.skiplink.screenreader-only {
  top: 64px;
}
@media (min-width: 1680px) {
  .skiplink.screenreader-only.skiplink.screenreader-only {
    top: 10px;
  }
}
.skiplink.screenreader-only.skiplink.screenreader-only:focus, .skiplink.screenreader-only.skiplink.screenreader-only:active {
  box-shadow: 0 0 0 2px rgb(38, 32, 69), 0 0 0 6px rgb(66, 139, 255);
}

.skiplink.screenreader-only:focus, .skiplink.screenreader-only:active {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skiplink.screenreader-only:focus:focus, .skiplink.screenreader-only:active:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skiplink.screenreader-only:focus, .skiplink.screenreader-only:active {
  background-color: rgb(82, 30, 255);
}
.skiplink.screenreader-only:focus:hover, .skiplink.screenreader-only:focus:active, .skiplink.screenreader-only:active:hover, .skiplink.screenreader-only:active:active {
  background-color: rgb(50, 55, 141);
}
.skiplink.screenreader-only:focus, .skiplink.screenreader-only:active {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: absolute;
  left: 10px;
  top: 10px;
  overflow: hidden;
  z-index: 300;
  width: auto;
  padding: 20px 16px;
}

.preload {
  visibility: hidden;
  height: 0;
  width: 0;
  position: absolute;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

#wrapper {
  min-height: 100%;
  display: flex;
  flex-flow: column;
}

.wrapper,
.contentwrapper {
  flex-grow: 1;
}
.wrapper--alert,
.contentwrapper--alert {
  display: none;
}
.wrapper--message,
.contentwrapper--message {
  display: block;
}
.wrapper--alert, .wrapper--message,
.contentwrapper--alert,
.contentwrapper--message {
  position: relative;
  top: 64px;
  background-color: rgb(38, 32, 69);
}
.wrapper--alert-content, .wrapper--message-content,
.contentwrapper--alert-content,
.contentwrapper--message-content {
  max-width: 1488px;
  width: 100%;
  padding: 0 24px 16px;
  margin: 0 auto;
}

.contentwrapper--mh950 {
  min-height: 950px;
}

.loader-wrapper {
  display: flex;
  padding: 64px 0;
  align-items: center;
  justify-content: center;
}

.main-aside {
  z-index: 25;
}

.main-styles {
  margin: 0 auto;
  padding: 104px 0 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
}
.main-styles h1 {
  margin: 0 0 40px 0;
}
.main-styles div.breadcrumbs {
  width: calc(100% - 248px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-styles div.breadcrumbs.varlistopen {
  width: calc(100% - 598px);
}
.main-styles div.breadcrumbs nav.breadcrumbs ol {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .main-styles div.breadcrumbs nav.breadcrumbs ol {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .main-styles div.breadcrumbs nav.breadcrumbs ol {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.main-styles div.breadcrumbs nav.breadcrumbs ol {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol li {
  list-style: none;
  float: left;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a {
  text-decoration: none;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a.homelink {
  position: relative;
  padding-left: 24px;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a.homelink img {
  position: absolute;
  top: -7px;
  left: 0;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol .lastbreadcrumb {
  color: rgb(38, 32, 69);
}
.main-styles div.breadcrumbs nav.breadcrumbs ol span.divider {
  margin: 0 10px;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink) {
  color: rgb(82, 30, 255);
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):hover, .main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):active {
  color: rgb(38, 32, 69);
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):disabled {
  opacity: 0.3;
}
.main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):hover {
  font-size: 1rem !important;
}
@media all and (max-width: 1679px) {
  .main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):hover {
    font-size: 0.875rem !important;
  }
}
@media all and (max-width: 767px) {
  .main-styles div.breadcrumbs nav.breadcrumbs ol a:not(.homelink):hover {
    font-size: 0.8125rem !important;
  }
}
.main-styles > .content {
  flex: 1 1 auto;
  margin: 0 auto;
  max-width: 100%;
}

@media (min-width: 1680px) {
  .main-styles .content {
    margin: 0 auto;
  }
}
@media all and (max-width: 1280px) {
  .main-styles {
    margin: 0;
    height: auto;
  }
  .main-styles .breadcrumbs {
    margin-top: 24px;
  }
  .main-styles .content {
    margin: 0 20px;
    max-width: calc(100% - 40px);
  }
  #epi-quickNavigator {
    display: none !important;
  }
}
@media all and (max-width: 767px) {
  .main-styles {
    padding-left: 16px;
    padding-right: 16px;
  }
  .main-styles .content {
    max-width: 100%;
    margin: 0;
  }
}
.strong {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.fieldset {
  padding: 0;
  border: none;
}

.legend {
  display: flex;
  flex-direction: column;
  font-weight: normal;
  margin-bottom: 8px;
}
.legend__label {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.legend__sub-label {
  font-size: 1rem;
}

.radio {
  width: 100%;
  display: inline-flex;
  cursor: pointer;
  margin-bottom: 16px;
}
.radio__icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.radio__icon:before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../img/icons/radio/icon_off.svg) no-repeat 50%/32px;
  cursor: pointer;
  border: none;
}
.radio__input {
  position: absolute;
  opacity: 0;
  height: 1px;
}
.radio__input:checked + .radio__icon::before {
  background-image: url(../img/icons/radio/icon_on.svg);
}
.radio__input:focus + .radio__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.radio__label {
  margin-left: 16px;
  word-break: break-word;
  align-self: center;
}

.checkbox {
  width: 100%;
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  height: 1px;
}

.checkbox__label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -2px 10px 0 0;
  vertical-align: middle;
  border-radius: 3px;
  background: url(../img/icons/checkbox/icon_checkbox-off--dark-grey.svg) center no-repeat;
  cursor: pointer;
  border: none;
  margin: 2px;
}

.checkbox__label {
  display: inline-block;
}

.checkbox__input:checked + .checkbox__label::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on.svg);
}

.checkbox__input:focus-visible + .checkbox__label {
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  border-radius: 1px;
}

.checkbox__input:checked + .checkbox__label + .filter-list__filter-name {
  color: rgb(38, 32, 69);
}

.checkbox__input:checked + .checkbox__label + .filter-list__filter--inactive {
  color: rgb(187, 184, 201);
}

.document-modal {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

@media all and (max-width: 767px) {
  .document-modal {
    position: fixed;
  }
}
.mainlink {
  color: rgb(82, 30, 255);
}
.mainlink:hover, .mainlink:focus {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.mainlink:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.mainlink:active {
  color: rgb(38, 32, 69);
}
.mainlink:disabled {
  opacity: 0.3;
}

.error-box {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(255, 243, 205);
  border: 1px solid rgb(255, 238, 186);
  width: 100%;
  height: auto;
  z-index: 200;
}

.error-box__container {
  width: 100%;
  color: rgb(38, 32, 69);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: normal;
  display: flex;
  justify-content: space-between;
  padding: 26px 16px 27px 16px;
  align-items: center;
}

.error-box__message {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.error-box__close-icon {
  align-self: flex-start;
  cursor: pointer;
}

#maincontent:focus,
#results:focus {
  outline: none;
}

#search-results:focus {
  box-shadow: none;
  outline: none;
}

#search-results:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

button:focus:not(:focus-visible),
button:focus:not(:focus-visible) + span,
a:focus:not(:focus-visible),
a:focus:not(:focus-visible) + span {
  outline: none !important;
  box-shadow: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(38, 32, 69);
  margin: 16px 0;
}

.h1--white,
.h2--white,
.h3--white,
.h4--white,
.h5--white,
.h6--white {
  color: rgb(255, 255, 255);
}

h1,
.h1 {
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h1,
  .h1 {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h1,
  .h1 {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

h2,
.h2 {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h2,
  .h2 {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h2,
  .h2 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

h3,
.h3 {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h3,
  .h3 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h3,
  .h3 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

h4,
.h4 {
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h4,
  .h4 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h4,
  .h4 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

h5,
.h5 {
  font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h5,
  .h5 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h5,
  .h5 {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

h6,
.h6 {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  h6,
  .h6 {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  h6,
  .h6 {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

/* Icons alphabetical order */
.icon-add {
  background: url(../img/icons/icon_add.svg) no-repeat center/1.5rem;
}

.icon-add--grey {
  background: url(../img/icons/icon_add--grey.svg) no-repeat center/1.5rem;
}

.icon-alert-circle {
  background: url(../img/icons/icon_alert-circle.svg) no-repeat center/1.5rem;
}

.icon-alert-circle--red {
  background: url(../img/icons/icon_alert-circle--red.svg) no-repeat center/1.5rem;
}

.icon-alert-circle--white {
  background: url(../img/icons/icon_alert-circle--white.svg) no-repeat center/1.5rem;
}

.icon-alert-triangle {
  background: url(../img/icons/icon_alert-triangle.svg) no-repeat center/1.5rem;
}

.icon-alert-triangle--red {
  background: url(../img/icons/icon_alert-triangle--red.svg) no-repeat center/1.5rem;
}

.icon-archive {
  background: url(../img/icons/icon_archive.svg) no-repeat center/1.5rem;
}

.icon-arrow-back {
  background: url(../img/icons/arrow/icon_back.svg) no-repeat center/1.5rem;
}

.icon-arrow-back--blue {
  background: url(../img/icons/arrow/icon_back--blue.svg) no-repeat center/1.5rem;
}

.icon-arrow-back--dark-grey {
  background: url(../img/icons/arrow/icon_back--dark-gray.svg) no-repeat center/1.5rem;
}

.icon-arrow-back--white {
  background: url(../img/icons/arrow/icon_back--white.svg) no-repeat center/1.5rem;
}

.icon-arrow-down {
  background: url(../img/icons/arrow/icon_down.svg) no-repeat center/1.5rem;
}

.icon-arrow-forward {
  background: url(../img/icons/arrow/icon_forward.svg) no-repeat center/1.5rem;
}

.icon-arrow-forward--blue {
  background: url(../img/icons/arrow/icon_forward--blue.svg) no-repeat center/1.5rem;
}

.icon-arrow-forward--grey {
  background: url(../img/icons/arrow/icon_forward--grey.svg) no-repeat center/1.5rem;
}

.icon-arrow-up {
  background: url(../img/icons/arrow/icon_up.svg) no-repeat center/1.5rem;
}

.icon-arrow-up--blue {
  background: url(../img/icons/arrow/icon_up--blue.svg) no-repeat center/1.5rem;
}

.icon-arrow-up--white {
  background: url(../img/icons/arrow/icon_up--white.svg) no-repeat center/1.5rem;
}

.icon-bell {
  background: url(../img/icons/icon_bell.svg) no-repeat center/1.5rem;
}

.icon-bell-alarmfill {
  background: url(../img/icons/icon_bell-alarmfill.svg) no-repeat center/1.5rem;
}

.icon-bell-fill {
  background: url(../img/icons/icon_bell-fill.svg) no-repeat center/1.5rem;
}

.icon-bookmark {
  background: url(../img/icons/icon_bookmark.svg) no-repeat center/1.5rem;
}

.icon-bookmark-fill {
  background: url(../img/icons/icon_bookmark-fill.svg) no-repeat center/1.5rem;
}

.icon-calendar {
  background: url(../img/icons/icon_calendar.svg) no-repeat center/1.5rem;
}

.icon-calendar--dark-grey {
  background: url(../img/icons/icon_calendar--dark-grey.svg) no-repeat center/1.5rem;
}

.icon-check {
  background: url(../img/icons/icon_check.svg) no-repeat center/1.5rem;
}

.icon-check--white {
  background: url(../img/icons/icon_check--white.svg) no-repeat center/1.5rem;
}

.icon-check-circle {
  background: url(../img/icons/icon_check-circle.svg) no-repeat center/1.5rem;
}

.icon-check-circle--grey {
  background: url(../img/icons/icon_check-circle--grey.svg) no-repeat center/1.5rem;
}

.icon-check-circle--filled {
  background: url(../img/icons/icon_check-circle--filled.svg) no-repeat center/1.5rem;
}

.icon-check-square {
  background: url(../img/icons/Icon_check-square.svg) no-repeat center/1.5rem;
}

.icon-check-square--blue {
  background: url(../img/icons/icon_check-square--blue.svg) no-repeat center/1.5rem;
}

.icon-chevrons-left {
  background: url(../img/icons/icon_chevrons-left.svg) no-repeat center/1.5rem;
}

.icon-chevrons-left--white {
  background: url(../img/icons/icon_chevrons-left--white.svg) no-repeat center/1.5rem;
}

.icon-chevrons-left--grey {
  background: url(../img/icons/icon_chevrons-left--grey.svg) no-repeat center/1.5rem;
}

.icon-chevrons-right {
  background: url(../img/icons/icon_chevrons-right.svg) no-repeat center/1.5rem;
}

.icon-chevrons-right--white {
  background: url(../img/icons/icon_chevrons-right--white.svg) no-repeat center/1.5rem;
}

.icon-chevrons-right--grey {
  background: url(../img/icons/icon_chevrons-right--grey.svg) no-repeat center/1.5rem;
}

.icon-clipboard {
  background: url(../img/icons/icon_clipboard.svg) no-repeat center/1.5rem;
}

.icon-close {
  background: url(../img/icons/icon_close.svg) no-repeat center/1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.icon-close--white {
  background: url(../img/icons/icon_close--white.svg) no-repeat center/1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.icon-close--blue {
  background: url(../img/icons/icon_close--blue.svg) no-repeat center/1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.icon-close--dark-grey {
  background: url(../img/icons/icon_close--dark-grey.svg) no-repeat center/1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.icon-document {
  background: url(../img/icons/icon_document.svg) no-repeat center/1.5rem;
}

.icon-disconnected-cloud--dark {
  background: url(../img/icons/disconnected-cloud.svg) no-repeat center/1.5rem;
}

.icon-disconnected-cloud--grey {
  background: url(../img/icons/disconnected-cloud-grey.svg) no-repeat center/1.5rem;
}

.icon-download {
  background: url(../img/icons/icon_download.svg) no-repeat center/1.5rem;
}

.hd-button:hover .icon-download--hover-dark,
.button-square--inverted:hover .icon-download--hover-dark {
  background: url(../img/icons/icon_download.svg) no-repeat center/1.5rem;
}
.hd-button:hover .icon-link--white,
.button-square--inverted:hover .icon-link--white {
  background: url(../img/icons/icon_link.svg) no-repeat center/1.5rem;
}

.icon-download--blue {
  background: url(../img/icons/icon_download--blue.svg) no-repeat center/1.5rem;
}

.icon-download--white {
  background: url(../img/icons/icon_download--white.svg) no-repeat center/1.5rem;
}

.icon-download-csv {
  background: url(../img/icons/filetype/icon_csv.svg) no-repeat center/1.5rem;
}

.icon-download-docx {
  background: url(../img/icons/filetype/icon_docx.svg) no-repeat center/1.5rem;
}

.icon-download-jpeg {
  background: url(../img/icons/filetype/icon_jpeg.svg) no-repeat center/1.5rem;
}

.icon-download-pdf {
  background: url(../img/icons/filetype/icon_pdf.svg) no-repeat center/1.5rem;
}

.icon-download-png {
  background: url(../img/icons/filetype/icon_png.svg) no-repeat center/1.5rem;
}

.icon-download-unknown {
  background: url(../img/icons/filetype/icon_unknown.svg) no-repeat center/1.5rem;
}

.icon-download-xls {
  background: url(../img/icons/filetype/icon_xls.svg) no-repeat center/1.5rem;
}

.icon-download-xlsx {
  background: url(../img/icons/filetype/icon_xlsx.svg) no-repeat center/1.5rem;
}

.icon-duplicate {
  background: url(../img/icons/icon_duplicate.svg) no-repeat center/1.5rem;
}

.icon-duplicate--blue {
  background: url(../img/icons/icon_duplicate--blue.svg) no-repeat center/1.5rem;
}

.icon-edit-textstyle {
  background: url(../img/icons/icon_edit-textstyle.svg) no-repeat center/1.5rem;
}

.icon-edit-underline {
  background: url(../img/icons/icon_edit-underline.svg) no-repeat center/1.5rem;
}

.icon-edit-underline--blue {
  background: url(../img/icons/icon_edit-underline--blue.svg) no-repeat center/1.5rem;
}

.icon-edit-underline--gray {
  background: url(../img/icons/icon_edit-underline--gray.svg) no-repeat center/1.5rem;
}

.icon-email {
  background: url(../img/icons/icon_email.svg) no-repeat center/1.5rem;
}

.icon-email--white {
  background: url(../img/icons/icon_email--white.svg) no-repeat center/1.5rem;
}

.icon-email--gray {
  background: url(../img/icons/icon_email--gray.svg) no-repeat center/1.5rem;
}

.icon-eye {
  background: url(../img/icons/icon_eye.svg) no-repeat center/1.5rem;
}

.icon-eye--blue {
  background: url(../img/icons/icon_eye--blue.svg) no-repeat center/1.5rem;
}

.icon-filter {
  background: url(../img/icons/icon_filter.svg) no-repeat center/1.5rem;
}

.icon-filter--white {
  background: url(../img/icons/icon_filter--white.svg) no-repeat center/1.5rem;
}

.icon-filter-outline {
  background: url(../img/icons/icon_filter-outline.svg) no-repeat center/1.5rem;
}

.icon-filter-outline--white {
  background: url(../img/icons/icon_filter-outline--white.svg) no-repeat center/1.5rem;
}

.icon-git-commit {
  background: url(../img/icons/icon_git-commit.svg) no-repeat center/1.5rem;
}

.icon-globe {
  background: url(../img/icons/globe/icon_globe.svg) no-repeat center/1.5rem;
}

.icon-globe--white {
  background: url(../img/icons/globe/icon_globe--white.svg) no-repeat center/1.5rem;
}

.icon-help-circle {
  background: url(../img/icons/icon_help-circle.svg) no-repeat center/1.5rem;
}

.icon-help-circle--dark-grey {
  background: url(../img/icons/icon_help-circle--dark-grey.svg) no-repeat center/1.5rem;
}

.icon-home {
  background: url(../img/icons/icon_home.svg) no-repeat center/1.5rem;
}

.icon-info {
  background: url(../img/icons/icon_info.svg) no-repeat center/1.5rem;
}

.icon-info--white {
  background: url(../img/icons/icon_info--white.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-left {
  background: url(../img/icons/keyboard-arrow/icon_left.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-left--blue {
  background: url(../img/icons/keyboard-arrow/icon_left--blue.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-left--grey {
  background: url(../img/icons/keyboard-arrow/icon_left--grey.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-down {
  background: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-down--blue {
  background: url(../img/icons/keyboard-arrow/icon_down--blue.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-down--gray {
  background: url(../img/icons/keyboard-arrow/icon_down--gray.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-down--white {
  background: url(../img/icons/keyboard-arrow/icon_down--white.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-left-dark-gray {
  background: url(../img/icons/keyboard-arrow/icon_left--dark-gray.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-right {
  background: url(../img/icons/keyboard-arrow/icon_right.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-right-blue {
  background: url(../img/icons/keyboard-arrow/icon_right--blue.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-right-dark-gray {
  background: url(../img/icons/keyboard-arrow/icon_right--dark-gray.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-right-gray {
  background: url(../img/icons/keyboard-arrow/icon_right--gray.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-up {
  background: url(../img/icons/keyboard-arrow/icon_up.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-up--blue {
  background: url(../img/icons/keyboard-arrow/icon_up--blue.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-up--gray {
  background: url(../img/icons/keyboard-arrow/icon_up--gray.svg) no-repeat center/1.5rem;
}

.icon-keyboard-arrow-up--white {
  background: url(../img/icons/keyboard-arrow/icon_up--white.svg) no-repeat center/1.5rem;
}

.icon-layout {
  background: url(../img/icons/icon_layout.svg) no-repeat center/1.5rem;
}

.icon-link {
  background: url(../img/icons/icon_link.svg) no-repeat center/1.5rem;
}

.icon-link--gray {
  background: url(../img/icons/icon_link--gray.svg) no-repeat center/1.5rem;
}

.icon-link--primary {
  background: url(../img/icons/icon_link--primary.svg) no-repeat center/1.5rem;
}

.icon-link--primary-dark {
  background: url(../img/icons/icon_link--primary-dark.svg) no-repeat center/1.5rem;
}

.icon-link--white {
  background: url(../img/icons/icon_link--white.svg) no-repeat center/1.5rem;
}

.icon-list {
  background: url(../img/icons/icon_list.svg) no-repeat center/1.5rem;
}

.icon-list--gray {
  background: url(../img/icons/icon_list--gray.svg) no-repeat center/1.5rem;
}

.icon-list--white {
  background: url(../img/icons/icon_list--white.svg) no-repeat center/1.5rem;
}

.icon-lock {
  background: url(../img/icons/icon_lock.svg) no-repeat center/1.5rem;
}

.icon-logout {
  background: url(../img/icons/icon_logout.svg) no-repeat center/1.5rem;
}

.icon-menu {
  background: url(../img/icons/icon_menu.svg) no-repeat center/1.5rem;
}

.icon-menu--gray {
  background: url(../img/icons/icon_menu--gray.svg) no-repeat center/1.5rem;
}

.icon-menu--white {
  background: url(../img/icons/icon_menu--white.svg) no-repeat center/1.5rem;
}

.icon-message-square {
  background: url(../img/icons/icon_message-square.svg) no-repeat center/1.5rem;
}

.icon-message-square--grey {
  background: url(../img/icons/icon_message-square--grey.svg) no-repeat center/1.5rem;
}

.icon-minus {
  background: url(../img/icons/icon_minus.svg) no-repeat center/1.5rem;
}

.icon-minus--grey {
  background: url(../img/icons/icon_minus--grey.svg) no-repeat center/1.5rem;
}

.icon-more-horizontal {
  background: url(../img/icons/icon_more-horizontal.svg) no-repeat center/1.5rem;
}

.icon-more-vertical {
  background: url(../img/icons/icon_more-vertical.svg) no-repeat center/1.5rem;
}

.icon-ordered-list {
  background: url(../img/icons/icon_ordered-list.svg) no-repeat center/1.5rem;
}

.icon-paperclip {
  background: url(../img/icons/icon_paperclip.svg) no-repeat center/1.5rem;
}

.icon-phone {
  background: url(../img/icons/icon_phone.svg) no-repeat center/1.5rem;
}

.icon-phone--gray {
  background: url(../img/icons/icon_phone--gray.svg) no-repeat center/1.5rem;
}

.icon-plus {
  background: url(../img/icons/icon_plus.svg) no-repeat center/1.5rem;
}

.icon-plus--blue {
  background: url(../img/icons/icon_plus--blue.svg) no-repeat center/1.5rem;
}

.icon-plus--white {
  background: url(../img/icons/icon_plus--white.svg) no-repeat center/1.5rem;
}

.icon-plus--dark {
  background: url(../img/icons/icon_plus--dark.svg) no-repeat center/1.5rem;
}

.icon-register-old {
  background: url(../img/icons/icon_register-old.svg) no-repeat center/1.5rem;
}

.icon-rotate-ccw {
  background: url(../img/icons/icon_rotate-ccw.svg) no-repeat center/1.5rem;
}

.icon-rotate-ccw--blue {
  background: url(../img/icons/icon_rotate-ccw--blue.svg) no-repeat center/1.5rem;
}

.icon-save {
  background: url(../img/icons/icon_save.svg) no-repeat center/1.5rem;
}

.icon-save--white {
  background: url(../img/icons/icon_save--white.svg) no-repeat center/1.5rem;
}

.icon-search {
  background: url(../img/icons/icon_search.svg) no-repeat center/1.5rem;
}

.icon-search--white {
  background: url(../img/icons/icon_search--white.svg) no-repeat center/1.5rem;
}

.icon-search-circle {
  background: url(../img/icons/searchcircle.svg) no-repeat center/1.5rem;
}

.icon-send {
  background: url(../img/icons/icon_send.svg) no-repeat center/1.5rem;
}

.icon-settings {
  background: url(../img/icons/icon_settings.svg) no-repeat center/1.5rem;
}

.icon-share {
  background: url(../img/icons/icon_share.svg) no-repeat center/1.5rem;
}

.icon-smile {
  background: url(../img/icons/icon_smile.svg) no-repeat center/1.5rem;
}

.icon-social-facebook {
  background: url(../img/icons/icon_social-facebook.svg) no-repeat center/1.5rem;
}

.icon-social-linkedin {
  background: url(../img/icons/icon_social-linkedIn.svg) no-repeat center/1.5rem;
}

.icon-social-twitter {
  background: url(../img/icons/icon_social-twitter.svg) no-repeat center/1.5rem;
}

.icon-sort-default {
  background: url(../img/icons/sort/icon_not-active.svg) no-repeat center/1.5rem;
  margin-left: 4px;
  margin-right: 0px;
}

.icon-sort-desc {
  background: url(../img/icons/sort/icon_decending.svg) no-repeat center/1.5rem;
  margin-left: 4px;
  margin-right: 0px;
}

.icon-sort-asc {
  background: url(../img/icons/sort/icon_acending.svg) no-repeat center/1.5rem;
  margin-left: 4px;
  margin-right: 0px;
}

.icon-thumbs-up {
  background: url(../img/icons/icon_thumbs-up.svg) no-repeat center/1.5rem;
}

.icon-to-the-top {
  background: url(../img/icons/icon_to-the-top.svg) no-repeat center/1.5rem;
}

.icon-trash {
  background: url(../img/icons/icon_trash.svg) no-repeat center/1.5rem;
  background-size: 1.375rem;
}

.icon-trash--grey {
  background: url(../img/icons/icon_trash-grey.svg) no-repeat center/1.5rem;
  background-size: 1.375rem;
}

.icon-trending-up {
  background: url(../img/icons/icon_trending-up.svg) no-repeat center/1.5rem;
}

.icon-upload {
  background: url(../img/icons/icon_upload.svg) no-repeat center/1.5rem;
}

.icon-upload--white {
  background: url(../img/icons/icon_upload--white.svg) no-repeat center/1.5rem;
}

.icon-upload--dark-grey {
  background: url(../img/icons/icon_upload--dark-grey.svg) no-repeat center/1.5rem;
}

.icon-user-outline {
  background: url(../img/icons/icon_user-outline.svg) no-repeat center/1.5rem;
}

.icon-user-outline--gray {
  background: url(../img/icons/icon_user-outline--gray.svg) no-repeat center/1.5rem;
}

.icon-user-fill {
  background: url(../img/icons/icon_user-fill.svg) no-repeat center/1.5rem;
}

.icon-user-fill--white {
  background: url(../img/icons/icon_user-fill--white.svg) no-repeat center/1.5rem;
}

.icon-users {
  background: url(../img/icons/icon_users.svg) no-repeat center/1.5rem;
}

.icon-x-circle {
  background: url(../img/icons/icon_x-circle.svg) no-repeat center/1.5rem;
}

.icon-x-circle--red {
  background: url(../img/icons/icon_x-circle--red.svg) no-repeat center/1.5rem;
}

.icon-x-square {
  background: url(../img/icons/icon_x-square.svg) no-repeat center/1.5rem;
}

.icon-zap {
  background: url(../img/icons/icon_zap.svg) no-repeat center/1.5rem;
}

/* Icons media specific */
@media all and (max-width: 1280px) {
  .icon-search--desktop {
    height: 1.5rem;
    width: 1.5rem;
  }
}
/* Generic icon */
.icon {
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  position: relative;
  margin-right: 8px;
}
.icon--nomargin {
  margin: 0;
}
.icon--right {
  margin-right: 0;
  margin-left: 8px;
}
.icon--right-4px {
  margin-right: 0;
  margin-left: 4px;
}
.hd-button-icon .icon--right-4px {
  margin-right: -4px;
}
.icon--left-4px {
  margin-right: 4px;
  margin-left: 0;
}
.hd-button-icon .icon--left-4px {
  margin-left: -4px;
}
.icon--right-12px {
  margin-right: 0;
  margin-left: 12px;
}
.icon--left-12px {
  margin-right: 12px;
  margin-left: 0;
}
.icon--default-12px {
  margin-left: 12px;
  margin-right: 12px;
}
.icon {
  /* Icon sizes */
}
.icon-size--16 {
  background-size: 1rem;
}
.icon-size--18 {
  background-size: 1.125rem;
}
.icon-size--20 {
  background-size: 1.25rem;
}
.icon-size--22 {
  background-size: 1.375rem;
}
.icon-size--26 {
  background-size: 1.625rem;
}
.icon-size--28 {
  background-size: 1.75rem;
}
.icon-size--30 {
  background-size: 1.875rem;
}
.icon-size--40 {
  background-size: 2.25rem;
  height: 2.5rem;
  width: 2.5rem;
}
.icon-size--56 {
  height: 3.5rem;
  width: 3.5rem;
  background-size: 3.5rem;
}

.illustration {
  content: "";
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  height: 7.75rem;
  width: 7.75rem;
}
.illustration-balance {
  background: url(../img/illustrations/illustration_balance.svg) center/7.75rem no-repeat;
}
.illustration-binoculars {
  background: url(../img/illustrations/illustration_binoculars.svg) center/7.75rem no-repeat;
}
.illustration-calendar {
  background: url(../img/illustrations/illustration_calender.svg) center/7.75rem no-repeat;
}
.illustration-celebrate {
  background: url(../img/illustrations/illustration_celebrate.svg) center/7.75rem no-repeat;
}
.illustration-check-boxes {
  background: url(../img/illustrations/illustration_check-boxes.svg) center/7.75rem no-repeat;
}
.illustration-coffee {
  background: url(../img/illustrations/illustration_coffee.svg) center/7.75rem no-repeat;
}
.illustration-cogweel {
  background: url(../img/illustrations/illustration_cogwheel.svg) center/7.75rem no-repeat;
}
.illustration-colours {
  background: url(../img/illustrations/illustration_colours.svg) center/7.75rem no-repeat;
}
.illustration-document {
  background: url(../img/illustrations/illustration_documents.svg) center/7.75rem no-repeat;
}
.illustration-error-connection {
  background: url(../img/illustrations/illustration_error-connection.svg) center/7.75rem no-repeat;
}
.illustration-error-ice-cream {
  background: url(../img/illustrations/illustration_error_ice_cream.svg) center/7.75rem no-repeat;
}
.illustration-eye {
  background: url(../img/illustrations/illustration_eye.svg) center/7.75rem no-repeat;
}
.illustration-ice-cream {
  background: url(../img/illustrations/illustration_ice-cream.svg) center/7.75rem no-repeat;
}
.illustration-judge {
  background: url(../img/illustrations/illustration_judge.svg) center/7.75rem no-repeat;
}
.illustration-lock {
  background: url(../img/illustrations/illustration_lock.svg) center/7.75rem no-repeat;
}
.illustration-magazine {
  background: url(../img/illustrations/illustration_magazine.svg) center/7.75rem no-repeat;
}
.illustration-money {
  background: url(../img/illustrations/illustration_money.svg) center/7.75rem no-repeat;
}
.illustration-mountain {
  background: url(../img/illustrations/illustration_mountain.svg) center/7.75rem no-repeat;
}
.illustration-magnifying-glass {
  background: url(../img/illustrations/illustration_sources-magnifying-glass.svg) center/7.75rem no-repeat;
}
.illustration-open-lock {
  background: url(../img/illustrations/illustration_open-lock.svg) center/7.75rem no-repeat;
}
.illustration-paper-airplane {
  background: url(../img/illustrations/illustration_paper-airplane.svg) center/7.75rem no-repeat;
}
.illustration-personal {
  background: url(../img/illustrations/illustration_personal.svg) center/7.75rem no-repeat;
}
.illustration-researcher {
  background: url(../img/illustrations/illustration_researcher.svg) center/7.75rem no-repeat;
}
.illustration-rock-n-roll {
  background: url(../img/illustrations/illustration_rock_n_roll.svg) center/7.75rem no-repeat;
}
.illustration-scientist {
  background: url(../img/illustrations/illustration_scientist.svg) center/7.75rem no-repeat;
}
.illustration-sign {
  background: url(../img/illustrations/illustration_sign.svg) center/7.75rem no-repeat;
}
.illustration-stars {
  background: url(../img/illustrations/illustration_stars.svg) center/7.75rem no-repeat;
}
.illustration-statistics {
  background: url(../img/illustrations/illustration_statistic.svg) center/7.75rem no-repeat;
}
.illustration-thumbs-up {
  background: url(../img/illustrations/illustration_thumbs-up.svg) center/7.75rem no-repeat;
}
.illustration-tree {
  background: url(../img/illustrations/illustration_tree.svg) center/7.75rem no-repeat;
}
.illustration-variablelist {
  background: url(../img/illustrations/illustration_variabel.svg) center/7.75rem no-repeat;
}
.illustration-writer {
  background: url(../img/illustrations/illustration_writer.svg) center/7.75rem no-repeat;
}

.illustration.illustration-size--48 {
  background-size: 3rem;
  height: 3rem;
  width: 3rem;
}
.illustration.illustration-size--54 {
  background-size: 3.375rem;
  height: 3.375rem;
  width: 3.375rem;
}
.illustration.illustration-size--80 {
  background-size: 5rem;
  height: 5rem;
  width: 5rem;
}

.illustration_brand {
  height: 4rem;
  width: 4rem;
}
.illustration_brand-balance {
  background: url(../img/illustrations/brand/illustration_brand_balance.svg) center/4rem no-repeat;
}
.illustration_brand-binoculars {
  background: url(../img/illustrations/brand/illustration_brand_binoculars.svg) center/4rem no-repeat;
}
.illustration_brand-calendar {
  background: url(../img/illustrations/brand/illustration_brand_calender.svg) center/4rem no-repeat;
}
.illustration_brand-celebrate {
  background: url(../img/illustrations/brand/illustration_brand_celebrate.svg) center/4rem no-repeat;
}
.illustration_brand-check-boxes {
  background: url(../img/illustrations/brand/illustration_brand_check-boxes.svg) center/4rem no-repeat;
}
.illustration_brand-coffee {
  background: url(../img/illustrations/brand/illustration_brand_coffee.svg) center/4rem no-repeat;
}
.illustration_brand-cogweel {
  background: url(../img/illustrations/brand/illustration_brand_cogwheel.svg) center/4rem no-repeat;
}
.illustration_brand-colours {
  background: url(../img/illustrations/brand/illustration_brand_colours.svg) center/4rem no-repeat;
}
.illustration_brand-document {
  background: url(../img/illustrations/brand/illustration_brand_documents.svg) center/4rem no-repeat;
}
.illustration_brand-error-connection {
  background: url(../img/illustrations/brand/illustration_brand_error-connection.svg) center/4rem no-repeat;
}
.illustration_brand-eye {
  background: url(../img/illustrations/brand/illustration_brand_eye.svg) center/4rem no-repeat;
}
.illustration_brand-ice-cream {
  background: url(../img/illustrations/brand/illustration_brand_ice-cream.svg) center/4rem no-repeat;
}
.illustration_brand-judge {
  background: url(../img/illustrations/brand/illustration_brand_judge.svg) center/4rem no-repeat;
}
.illustration_brand-lock {
  background: url(../img/illustrations/brand/illustration_brand_lock.svg) center/4rem no-repeat;
}
.illustration_brand-magazine {
  background: url(../img/illustrations/brand/illustration_brand_magazine.svg) center/4rem no-repeat;
}
.illustration_brand-sm-magnifying-glass {
  background: url(../img/illustrations/brand/illustration_brand_kilder.svg) center/4rem no-repeat;
}
.illustration_brand-magnifying-glass {
  height: 7.75rem;
  width: 7.75rem;
  background: url(../img/illustrations/brand/illustration_brand_kilder.svg) center/7.75rem no-repeat;
}
.illustration_brand-money {
  background: url(../img/illustrations/brand/illustration_brand_money.svg) center/4rem no-repeat;
}
.illustration_brand-open-lock {
  background: url(../img/illustrations/brand/illustration_brand_open-lock.svg) center/4rem no-repeat;
}
.illustration_brand-paper-airplane {
  background: url(../img/illustrations/brand/illustration_brand_paper-airplane.svg) center/4rem no-repeat;
}
.illustration_brand-personal {
  background: url(../img/illustrations/brand/illustration_brand_personal.svg) center/4rem no-repeat;
}
.illustration_brand-researcher {
  background: url(../img/illustrations/brand/illustration_brand_researcher.svg) center/4rem no-repeat;
}
.illustration_brand-rock-n-roll {
  background: url(../img/illustrations/brand/illustration_brand_rock-n-roll.svg) center/4rem no-repeat;
}
.illustration_brand-scientist {
  background: url(../img/illustrations/brand/illustration_brand_scientist.svg) center/4rem no-repeat;
}
.illustration_brand-sign {
  background: url(../img/illustrations/brand/illustration_brand_sign.svg) center/4rem no-repeat;
}
.illustration_brand-stars {
  background: url(../img/illustrations/brand/illustration_brand_stars.svg) center/4rem no-repeat;
}
.illustration_brand-statistics {
  background: url(../img/illustrations/brand/illustration_brand_statistic.svg) center/4rem no-repeat;
}
.illustration_brand-thumbs-up {
  background: url(../img/illustrations/brand/illustration_brand_thumbs-up.svg) center/4rem no-repeat;
}
.illustration_brand-tree {
  background: url(../img/illustrations/brand/illustration_brand_tree.svg) center/4rem no-repeat;
}
.illustration_brand-variablelist {
  background: url(../img/illustrations/brand/illustration_brand_variabel.svg) center/4rem no-repeat;
}
.illustration_brand-writer {
  background: url(../img/illustrations/brand/illustration_brand_writer.svg) center/4rem no-repeat;
}

.infobox {
  display: flex;
  position: relative;
  background-color: rgb(230, 230, 237);
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 720px;
  margin: auto;
  word-break: break-word;
  color: rgb(38, 32, 69);
}
@media all and (max-width: 767px) {
  .infobox {
    flex-direction: column;
  }
}
@media all and (min-width: 768px) {
  .infobox {
    padding-right: 72px;
  }
}
.infobox_illustration {
  background-size: 4rem;
}
.infobox--bg-grey {
  background-color: rgb(230, 230, 237);
}
.infobox--bg-yellow {
  background-color: rgb(255, 243, 205);
}
.infobox--bg-blue {
  background-color: rgb(228, 238, 255);
}
.infobox--bg-cyan {
  background-color: rgb(155, 233, 243);
}
.infobox--mw-720 {
  max-width: 720px;
}
.infobox--mw-none {
  max-width: none;
}

.infobox .illustration {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  margin-right: 16px;
}

.infobox__heading {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .infobox__heading {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .infobox__heading {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.infobox__heading {
  margin-top: 0;
  margin-bottom: 4px;
}

.infobox__content {
  display: flex;
}
.infobox__content > p {
  margin: 0;
}

.infobox .editor-content p {
  margin-top: 0;
}

.infobox .button--close-x {
  top: 16px;
  right: 16px;
}

.infobox__info-type {
  background-color: rgb(228, 238, 255);
}

#infobox__user-survey {
  margin-bottom: 9rem;
  display: none;
}

.infobox__information-blocks {
  display: none;
  margin-top: 16px;
  margin-bottom: 16px;
}
.infobox__information-blocks .editor-content {
  margin-top: 8px;
  margin-bottom: 8px;
}
.infobox__information-blocks .editor-content > p {
  margin: 0;
}
.infobox__information-blocks .editor-content > h1,
.infobox__information-blocks .editor-content h2,
.infobox__information-blocks .editor-content h3,
.infobox__information-blocks .editor-content h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
.infobox__information-blocks .button--close-x:hover, .infobox__information-blocks .button--close-x:focus {
  background: rgb(255, 255, 255);
}

.infobox__information-link-blocks {
  margin-top: 16px;
  margin-bottom: 16px;
}
.infobox__information-link-blocks p {
  margin-bottom: 8px;
}
.infobox__information-link-blocks .editor-content > h1,
.infobox__information-link-blocks .editor-content h2,
.infobox__information-link-blocks .editor-content h3,
.infobox__information-link-blocks .editor-content h4 {
  margin-top: 0;
  margin-bottom: 8px;
}

.information-block_width {
  padding: 0;
}
.information-block_width .infobox {
  max-width: 100%;
}

.infobox__datasources-block {
  background-color: rgb(228, 238, 255);
  max-width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}
.infobox__datasources-block .editor-content {
  margin-top: 8px;
  margin-bottom: 8px;
}
.infobox__datasources-block .editor-content > p {
  margin: 0;
}
.infobox__datasources-block .editor-content > h1,
.infobox__datasources-block .editor-content h2,
.infobox__datasources-block .editor-content h3,
.infobox__datasources-block .editor-content h4,
.infobox__datasources-block .editor-content h5 {
  margin-top: 0;
  margin-bottom: -10px;
}
.infobox__datasources-block .datasourcesblock__heading {
  margin-top: 0;
  margin-bottom: -4px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 48px;
}

.loader {
  display: flex;
  height: fit-content;
  flex-flow: column;
  width: 20rem;
  align-items: center;
}
.modal__content__body .loader {
  width: 100%;
}
.loader__dots {
  display: flex;
  margin-bottom: 1rem;
  justify-content: center;
}
.loader__dot {
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgb(38, 32, 69);
  border-radius: 50%;
  transform: translateX(-100%);
  animation: loader-dot 2s linear infinite;
}
.loader__square {
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgb(78, 87, 241);
  animation: loader-square 2s linear infinite;
}
.loader--small .loader__dot,
.loader--small .loader__square {
  width: 1rem;
  height: 1rem;
}
.loader--container {
  width: 100%;
  height: 50vh;
  justify-content: center;
}

@keyframes loader-dot {
  0% {
    transform: translateX(-100%);
  }
  25% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loader-square {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0);
  }
}
.lottie-animation-container {
  position: relative;
  width: 100%;
  max-height: 100%;
}
.lottie-animation-play-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lottie-animation-play-button:focus {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.lottie-animation-play-button__icon-container {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgb(50, 55, 141);
  border-radius: 50%;
  height: 64px;
  width: 64px;
}
.lottie-animation-play-button:hover .lottie-animation-play-button__icon-container {
  display: flex;
}
.lottie-animation-play-button:focus-visible .lottie-animation-play-button__icon-container {
  display: flex;
}
.lottie-animation-play-button__icon {
  position: relative;
  background-color: rgb(255, 255, 255);
}
.lottie-animation-play-button--play .lottie-animation-play-button__icon {
  text-align: left;
  transform: rotate(-90deg) skewX(-30deg) scale(1, 0.866);
  top: -3px;
  left: -2px;
}
.lottie-animation-play-button--play .lottie-animation-play-button__icon:before, .lottie-animation-play-button--play .lottie-animation-play-button__icon:after {
  content: "";
  position: absolute;
  background-color: inherit;
}
.lottie-animation-play-button--play .lottie-animation-play-button__icon:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}
.lottie-animation-play-button--play .lottie-animation-play-button__icon:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
.lottie-animation-play-button--pause .lottie-animation-play-button__icon {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 24px;
  border-color: transparent transparent transparent rgb(255, 255, 255);
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.lottie-animation-play-button--play .lottie-animation-play-button__icon, .lottie-animation-play-button--play .lottie-animation-play-button__icon:before, .lottie-animation-play-button--play .lottie-animation-play-button__icon:after {
  width: 16px;
  height: 16px;
  border-top-right-radius: 30%;
}

.main-footer {
  background: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
  padding: 96px 0 48px;
  display: flex;
  position: relative;
  z-index: 20;
  width: 100%;
  font-size: 1rem;
}
@media all and (max-width: 767px) {
  .main-footer {
    padding: 48px 0;
  }
}
.main-footer__logo {
  width: 180px;
}
@media all and (max-width: 767px) {
  .main-footer__logo {
    margin-bottom: 48px;
  }
}
.main-footer__columns {
  display: flex;
  margin-bottom: 64px;
}
@media all and (max-width: 767px) {
  .main-footer__columns {
    display: block;
  }
}
.main-footer__column {
  width: 33.3333%;
}
@media all and (max-width: 767px) {
  .main-footer__column {
    width: auto;
  }
}
.main-footer__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-footer__column li {
  margin-bottom: 24px;
}
.main-footer__column a {
  color: rgb(255, 255, 255);
  text-decoration: underline;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.main-footer__column a:hover {
  text-decoration: none;
}
.main-footer__column a:focus {
  outline-color: rgb(255, 255, 255);
}

.main-menu {
  overflow: auto;
}
.main-menu__item-link {
  padding: 1.25rem 2.25rem;
  color: rgb(230, 230, 237);
  font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  display: block;
}
.main-menu__item-link--active {
  box-shadow: inset 4px 0 0 0 rgb(255, 255, 255);
}
.main-menu__item-link:hover, .main-menu__item-link--active {
  background-color: rgb(50, 55, 141);
  color: rgb(230, 230, 237);
}
.main-menu__item-link:focus {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
  color: rgb(230, 230, 237);
}
.main-menu__item-link::-moz-focus-inner {
  border: 0;
}
.main-menu__language-selector-mobile {
  display: none;
}
@media all and (max-width: 1024px) {
  .main-menu__language-selector-mobile {
    display: block;
  }
}
.main-menu__item-button {
  padding: 1.25rem 2.25rem;
  color: rgb(230, 230, 237);
  font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  width: 100%;
  border: none;
  background: none;
  display: flex;
  cursor: pointer;
}
.main-menu__item-button:hover, .main-menu__item-button--active {
  background-color: rgb(50, 55, 141);
}
.main-menu__item-button:focus {
  outline: none;
}
.main-menu__item-button::-moz-focus-inner {
  border: 0;
}
.main-menu__menu-list--languages {
  color: rgb(255, 255, 255);
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: rgb(81, 84, 123);
  display: none;
}
.main-menu__menu-list--languages--visible {
  display: block;
}
.main-menu__item-button-language:after {
  background: url(../img/icons/keyboard-arrow/icon_down--white.svg) 0 0 no-repeat;
  content: "";
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.main-menu__item-button-language--open {
  background-color: rgb(50, 55, 141);
}
.main-menu__item-button-language--open:after {
  background: url(../img/icons/keyboard-arrow/icon_up--white.svg) 0 0 no-repeat;
  content: "";
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.main-menu__item-button--language-item {
  padding: 1rem 2.25rem;
  width: 100%;
}
.main-menu__item-button--language-item:hover {
  background-color: rgb(50, 55, 141);
}
.main-menu__item-button--language-item--active-language {
  cursor: default;
}
.main-menu__item-button--language-item__link {
  width: 100%;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.main-menu__item-button--language-item__link--inactive {
  pointer-events: none;
  cursor: default;
}
.main-menu__item-button--language-item__title {
  display: inline-flex;
  align-items: center;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  width: 100%;
}
.main-menu__item-button--language-item__title > .icon {
  visibility: hidden;
}
.main-menu__item-button--language-item__title > .icon-visible {
  visibility: visible;
}
.main-menu__item-button--language-item__title > .icon-visible-warning {
  visibility: visible;
  top: 2rem;
}
.main-menu__item-button--language-item__title--text {
  margin: 0;
}
.main-menu__item-button--language-item__information {
  font-size: 0.875rem;
  color: rgb(255, 255, 255);
  margin: 0;
  margin-left: 2rem;
  display: none;
  width: 100%;
}
.main-menu__item-button--language-item__information--visible {
  display: block;
}
.main-menu__item-button--language-item__homepage {
  border: none;
  text-decoration: underline;
  background: inherit;
  color: rgb(255, 255, 255);
  padding: 0;
  font-size: 0.875rem;
}
.main-menu__item-button--language-item__homepage:hover {
  cursor: pointer;
}
.main-menu-container {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  width: 22.5rem;
  background-color: rgb(38, 32, 69);
  z-index: 200;
  animation: 0.3s main-menu-in ease-out;
  animation-fill-mode: forwards;
  display: none;
  flex-flow: column;
  filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.4666666667));
}
.menu-open .main-menu-container {
  display: flex;
}
@media all and (max-width: 767px) {
  .main-menu-container {
    left: 0;
    width: 100%;
    filter: none;
  }
}
.main-menu__header {
  display: flex;
  justify-content: flex-end;
  padding: 0 1.5rem;
}
.main-menu__header button {
  height: 4rem;
  display: flex;
  align-items: center;
}
.main-menu-dimmer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 150;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: 0.3s opacity;
}
.menu-open .main-menu-dimmer {
  pointer-events: all;
  opacity: 1;
}
@media all and (max-width: 767px) {
  .main-menu-dimmer {
    display: none;
  }
}
.main-menu__menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@keyframes main-menu-in {
  from {
    opacity: 0;
    transform: translate3d(20%, 0, 0);
  }
}
.main-header {
  background-color: rgb(38, 32, 69);
  position: absolute;
  z-index: 20;
  top: 0;
  width: 100%;
}
@media all and (max-width: 767px) {
  .main-header .page-container {
    padding: 0 4px;
  }
}
.main-header__content {
  color: rgb(255, 255, 255);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.main-header__content__container {
  display: flex;
  align-items: center;
  height: 100%;
}
.main-header__content__container > .languageselector,
.main-header__content__container > .profilemenu {
  align-self: stretch;
}
.main-header__content__logo {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
}
.main-header__content__logo__img {
  height: 32px;
}
@media all and (max-width: 767px) {
  .main-header__content__logo__img {
    content: url("../img/logo_white_sm.svg");
  }
}
@media all and (max-width: 767px) {
  .main-header__content__logo {
    padding: 12px;
  }
}
.main-header__content__logo:hover {
  background-color: rgb(50, 55, 141);
}
.main-header__content__logo:focus {
  border: none;
  outline: 4px solid rgb(66, 139, 255);
  outline-offset: -6px;
  box-shadow: none;
}
.main-header__content__logo::-moz-focus-inner {
  border: 0;
}
.main-header__content__react {
  display: flex;
  height: 100%;
}

.main-menu-toggle-button .icon--hamburger {
  display: block;
}
.main-menu-toggle-button .icon-close--white,
.main-menu-toggle-button .main-menu-toggle-button__name--close {
  display: none;
}
body.menu-open .main-menu-toggle-button .main-menu-toggle-button__name--open,
body.menu-open .main-menu-toggle-button .icon-menu--white {
  display: none;
}
body.menu-open .main-menu-toggle-button .main-menu-toggle-button__name--close,
body.menu-open .main-menu-toggle-button .icon-close--white {
  display: block;
}
.main-menu-toggle-button::-moz-focus-inner {
  border: 0;
}

.main-menu-toggle-button--open .main-menu-toggle-button__name--close {
  display: inline;
}
.main-menu-toggle-button--open .main-menu-toggle-button__name--open {
  display: none;
}

@media all and (max-width: 447px) {
  .profilemenu-button__name {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
@media all and (max-width: 401px) {
  .languageselector-button__name,
  .Loginselector-button__name,
  .main-menu-toggle-button__name--open,
  .main-menu-toggle-button__name--close {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
.message__wrapper {
  display: flex;
  background-color: rgb(255, 243, 205);
  padding: 16px;
  width: 100%;
  word-break: break-word;
  font-size: 1rem;
  color: rgb(38, 32, 69);
  border-radius: 8px;
}
.message__wrapper--error {
  background-color: rgb(255, 224, 224);
}
.message__content {
  display: flex;
  width: 100%;
  margin: 16px 8px;
  justify-content: space-between;
  align-items: center;
}
@media all and (max-width: 1024px) {
  .message__content {
    margin-right: 16px;
  }
}
.message__content--left {
  display: flex;
  padding-right: 16px;
}
.message__content--left .icon {
  flex-shrink: 0;
}
.message__content--right {
  display: flex;
}
.message__content__heading {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  margin-right: 8px;
}
.message__content .hd-button-close {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  margin-left: 8px;
}
.message__content .hd-button-close::before {
  content: "";
  background: url(../img/icons/icon_close.svg) center no-repeat;
  background-size: 20px;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}
.message__content .hd-button-close:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.message__content .hd-button-close:hover {
  background-color: rgb(230, 230, 237);
}
.message__content .hd-button-close::-moz-focus-inner {
  border: 0;
}

.modal p.caption {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .modal p.caption {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .modal p.caption {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.modal p.lead {
  font: normal 1.5rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .modal p.lead {
    font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .modal p.lead {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.modal p {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .modal p {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .modal p {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.modal {
  z-index: 2000;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: rgb(38, 32, 69);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  animation: modal-dimmer-in 0.2s forwards;
  cursor: default;
}
.modal__dimmer {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.55);
  animation: modal-dimmer-in 0.2s forwards;
}
.modal__subtitle {
  color: rgb(114, 113, 150);
  margin-top: 8px;
}
.modal__content {
  position: absolute;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  width: 100%;
  animation: modal-in 0.2s forwards;
  max-height: 95%;
  overflow: auto;
  text-align: left;
}
.modal__content:focus {
  outline: none;
}
@media all and (max-width: 767px) {
  .modal__content {
    top: 0;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
  }
}
@media all and (-ms-high-contrast: none) {
  .modal__content {
    position: static;
  }
}
.modal__content .button--close-x {
  z-index: 10;
}
.modal__content--grey {
  color: rgb(81, 84, 123);
}
.modalsize--small .modal__content {
  max-width: 600px;
}
.modalsize--medium .modal__content {
  max-width: 840px;
}
.modalsize--large .modal__content {
  max-width: 960px;
}
.modalsize--xlarge .modal__content {
  max-width: 1280px;
}
.modal__content--rich-text {
  margin-bottom: 16px;
  word-break: break-word;
}
.modal__content--rich-text a:focus {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
}
.modal__content__body {
  padding: 24px 40px;
  position: relative;
}
.modal__content__body .button-group {
  padding-top: 16px;
}
.modal__content__body .button-group :first-of-type {
  margin-right: 16px;
}
@media all and (max-width: 767px) {
  .modal__content__body {
    padding: 8px 24px;
  }
}
.modal__content__body .modal__content__footer {
  padding: 32px 0 24px;
  justify-content: flex-end;
}
.modal__content__body .modal__content__footer.space-between {
  justify-content: space-between;
}
@media all and (max-width: 767px) {
  .modal__content__body .modal__content__footer {
    padding: 16px 0;
  }
  .modal__content__body .modal__content__footer .div,
  .modal__content__body .modal__content__footer .hd-button {
    width: 100%;
  }
}
.modal__content__body .modal__content__footer button:first-of-type {
  margin-right: 16px;
}
.modal__content__header {
  padding: 40px 96px 8px 40px;
  word-break: break-word;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
@media all and (max-width: 767px) {
  .modal__content__header {
    padding: 40px 96px 8px 24px;
  }
}
.modal__content__header .illustration {
  margin-right: 16px;
}
.modal__content__header__title {
  display: flex;
  align-items: center;
}
.modal__content__header__subtitle {
  display: block;
}
.modal__content__footer {
  padding: 32px 40px 40px 32px;
  display: flex;
  justify-content: flex-end;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
}
.modal__content__footer.space-between {
  justify-content: space-between;
}
.modal__content__footer .hd-button,
.modal__content__footer .hd-button-square {
  min-width: 200px;
  text-wrap: auto;
}
.modal__content__footer .hd-button:first-of-type,
.modal__content__footer .hd-button-square:first-of-type {
  margin-right: 16px;
}
@media all and (max-width: 767px) {
  .modal__content__footer {
    padding: 16px 32px;
  }
  .modal__content__footer .hd-button,
  .modal__content__footer .hd-button-square {
    width: 100%;
    min-width: 0;
  }
}
@media all and (max-width: 600px) {
  .modal__content__footer {
    flex-direction: column-reverse;
  }
  .modal__content__footer .hd-button,
  .modal__content__footer .hd-button-square {
    margin-top: 16px;
  }
}
.modal__content--padding-top {
  padding-top: 64px;
}
.modal__content--padding-top-mobile {
  padding-top: 0;
}
@media all and (max-width: 767px) {
  .modal__content--padding-top-mobile {
    padding-top: 64px;
  }
}
.modal__content--padding-bottom {
  padding-bottom: 64px;
}
@media all and (max-width: 767px) {
  .modal__content--padding-bottom {
    padding-bottom: 16px;
  }
}
.modal__content--long-content > p:first-of-type,
.modal__content--long-content > div > p:first-of-type {
  margin-top: 0;
}
.modal__content--long-content > p:last-of-type,
.modal__content--long-content > div > p:last-of-type {
  margin-bottom: 0;
}
.modal__content--long-content > span > p {
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .modal__content--long-content {
    min-height: calc(100% - 96px);
    height: calc(100% - 96px);
    overflow-y: auto;
    padding-left: 8px;
    padding-right: 18px;
  }
}
.modal__content--tip-text {
  margin: 24px 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.modal__content--tip-text > .icon {
  flex-shrink: 0;
}
.modal__content--tip-text > p {
  margin: 0;
}
.modal__content--tip-text > span > p {
  margin: 0;
}
@media all and (max-width: 767px) {
  .modal__content--tip-text {
    margin-bottom: 0;
  }
}
.modal__name-label {
  display: block;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 8px;
  margin-top: 32px;
}
.modal__name-label + .modal__name-label__subtext {
  margin-top: -8px;
}
.modal__name-label__subtext {
  display: block;
  line-height: 1.5;
  font-size: 1rem;
  margin-bottom: 8px;
}
.modal__name-label__subtitle {
  line-height: 1.5;
  font-size: 1rem;
  color: rgb(81, 84, 123);
  margin-top: 8px;
  margin-bottom: 0;
}
.modal__name-label .checkbox__label {
  display: inline-flex;
  align-items: center;
}
.modal-btn-back.modal-btn-back {
  width: fit-content;
  min-width: fit-content;
}

@keyframes modal-dimmer-in {
  from {
    opacity: 0;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
}
.modal .modal__content__header h1 {
  color: rgb(38, 32, 69);
}

.page-header {
  background-color: rgb(38, 32, 69);
  background-image: url(../img/datakilder_bg_wide.svg);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  color: rgb(255, 255, 255);
  /* Adjusted header-background for My page */
}
#reactmypageroot > #maincontent > .page-header {
  background-position: 50% 75%;
}
.page-header {
  /* Adjusted header-background for datasource explorer page */
}
#maincontent > #reactroot-datasources > .datasource-explorer > .page-header {
  background-position: 50% 85%;
}
.page-header__content {
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 48px 40px 12px 40px;
  word-break: break-word;
  font: normal 1.5rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .page-header__content {
    font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .page-header__content {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 1024px) {
  .page-header__content {
    padding: 48px 0 12px;
  }
}
@media all and (max-width: 767px) {
  .page-header__content {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 8px 0;
  }
}
.page-header__content h1 {
  color: rgb(255, 255, 255);
  margin: 0 0 36px;
}
@media all and (max-width: 767px) {
  .page-header__content h1 {
    margin: 0 0 24px;
  }
}
.page-header__content a {
  margin-bottom: 16px;
  display: inline-flex;
}
.page-header__content__header {
  padding: 32px 0 40px;
}
.page-header__tabs {
  display: flex;
  align-items: center;
  background-color: rgb(38, 32, 69);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: stretch;
}
@media all and (max-width: 1024px) {
  .page-header__tabs {
    display: block;
  }
}
.page-header__tabs li {
  flex-grow: 1;
  text-align: center;
  position: relative;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
.page-header__tabs li:not(.current):not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background-color: rgb(50, 55, 141);
}
@media all and (max-width: 1024px) {
  .page-header__tabs li:not(.current):not(:last-child):after {
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    height: 2px;
    width: auto;
  }
}
.page-header__tabs li.current a {
  background-color: rgb(246, 247, 252);
  color: rgb(38, 32, 69);
}
.page-header__tabs li.current a:focus {
  background-color: rgb(246, 247, 252);
  box-shadow: inset 0 0 0 2px rgb(246, 247, 252), inset 0 0 0 4px rgb(66, 139, 255);
}
@media all and (max-width: 1024px) {
  .page-header__tabs li {
    text-align: center;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}
.page-header__tabs li a {
  display: block;
  background-color: rgb(82, 30, 255);
  padding: 16px 8px;
  white-space: nowrap;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  outline: none;
}
.page-header__tabs li a:hover {
  background-color: rgb(50, 55, 141);
}
.page-header__tabs li a:focus {
  box-shadow: inset 0 0 0 2px rgb(82, 30, 255), inset 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}

.page-section {
  padding: 120px 0 140px;
}
.page-section .headline {
  text-align: center;
  margin-bottom: 48px;
}
.page-section__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}
.page-section__content {
  display: flex;
  align-items: center;
  text-align: left;
}
.page-section--bg-white {
  background-color: rgb(255, 255, 255);
}
.page-section--bg-grey {
  background-color: rgb(246, 247, 252);
}
.page-section--bg-dark {
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}
.page-section--bg-dark a,
.page-section--bg-dark h1,
.page-section--bg-dark h2,
.page-section--bg-dark h3,
.page-section--bg-dark h4 {
  color: rgb(255, 255, 255);
}

@media all and (max-width: 767px) {
  .page-tabs #reactroot-variables .variable-search-list-view--white {
    background-color: rgb(255, 255, 255);
  }
}

.page-tabs {
  display: flex;
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: stretch;
}
@media all and (max-width: 767px) {
  .page-tabs {
    display: block;
    margin: 0 -24px;
    padding: 16px 16px 0;
    background-color: rgb(246, 247, 252);
    overflow: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .page-tabs::-webkit-scrollbar {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .page-tabs {
    display: flex;
    margin: 0 -16px;
  }
}
.page-tabs li {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
  position: relative;
  font-size: 1rem;
  max-width: 100%;
}
@media all and (max-width: 767px) {
  .page-tabs li {
    text-align: center;
    display: inline-block;
  }
  .page-tabs li:not(:last-child) {
    margin-right: 8px;
  }
}
.page-tabs__content {
  display: none;
}
.page-tabs__content.current {
  display: block;
}
.page-tabs__content.current:focus {
  outline: none;
}

.page-tabs__tab {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: rgb(230, 230, 237);
  font-size: 1rem;
  line-height: 38px;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  color: rgb(38, 32, 69);
  padding: 0.5625rem 1rem;
  white-space: nowrap;
  text-decoration: none;
  outline: none;
  margin: 0;
  border: none;
  cursor: pointer;
  transition: padding 0.3s ease-in-out, margin 0.3s ease-in-out, border-radius 0.3s ease-in-out, background-color 0.15s ease-in-out;
}
.page-tabs__tab:hover {
  background-color: rgb(187, 184, 201);
  color: rgb(38, 32, 69);
}
.page-tabs__tab:focus {
  box-shadow: inset 0 0 0 4px rgb(66, 139, 255);
  outline: none;
  color: rgb(38, 32, 69);
}
@media all and (max-width: 767px) {
  .page-tabs__tab {
    padding: 9px 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    line-height: 1.625rem;
    border-radius: 4px;
    text-align: left;
    box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
    background-color: rgb(230, 230, 237);
  }
  .page-tabs__tab:focus {
    box-shadow: 0 0 0 2px rgb(246, 247, 252), 0 0 0 6px rgb(66, 139, 255);
    outline: none;
  }
}
.page-tabs__tab .headline {
  line-height: 38px;
}
@media all and (max-width: 767px) {
  .page-tabs__tab .headline__mypage {
    line-height: 1.625rem;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .variablename-tab {
    max-width: 20rem;
  }
}

@media all and (min-width: 768px) {
  .page-tabs li:last-child .page-tabs__tab {
    border-radius: 0 0.5rem 0 0;
  }
  .page-tabs li:first-child .page-tabs__tab {
    border-radius: 0.5rem 0 0 0;
  }
}
.page-tabs__tab * {
  pointer-events: none;
}

.current .page-tabs__tab {
  color: rgb(38, 32, 69);
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
}
@media all and (min-width: 768px) {
  .current .page-tabs__tab {
    background-color: rgb(246, 247, 252);
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding-top: calc(0.5rem + 0.5625rem);
    margin-top: -0.5rem;
  }
  .current .page-tabs__tab:focus {
    box-shadow: inset 0 0 0 4px rgb(66, 139, 255);
    outline: none;
  }
  .current .page-tabs__tab:hover {
    background-color: rgb(246, 247, 252);
  }
  .current .page-tabs__tab:after {
    content: "";
    width: 100%;
    height: 8px;
    background-color: rgb(246, 247, 252);
    position: absolute;
    bottom: -8px;
    left: 0;
  }
}
@media all and (max-width: 767px) {
  .current .page-tabs__tab {
    background-color: rgb(255, 255, 255);
  }
  .current .page-tabs__tab:focus {
    box-shadow: 0 0 0 2px rgb(246, 247, 252), 0 0 0 6px rgb(66, 139, 255);
    outline: none;
  }
  .current .page-tabs__tab:hover {
    background-color: rgb(255, 255, 255);
  }
}
@media all and (min-width: 768px) {
  .current--white .page-tabs__tab {
    background-color: rgb(255, 255, 255);
  }
  .current--white .page-tabs__tab:after {
    background-color: rgb(255, 255, 255);
  }
}

.current .page-tabs__tab:not(:focus-visible) {
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16) !important;
}

.page-tabs li:not(.current) + li:not(.current)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background-color: rgb(81, 84, 123);
}
@media all and (max-width: 767px) {
  .page-tabs li:not(.current) + li:not(.current)::after {
    content: none;
  }
}

.page-tabs__tab > span:first-child {
  display: flex;
  max-width: 100%;
}

.current .page-tabs__tab > span:first-child {
  background-image: linear-gradient(0deg, rgb(82, 30, 255), rgb(82, 30, 255));
  background-position: bottom;
  background-size: 100% 4px;
  background-repeat: no-repeat;
  animation: line 0.35s ease-in-out forwards alternate;
}

@keyframes line {
  0% {
    background-size: 0% 4px;
  }
  100% {
    background-size: 100% 4px;
  }
}
.page-tabs__tab .with-count {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-tabs__tab .counter-badge {
  margin: 5px 0 -2px 5px;
}
@media all and (max-width: 767px) {
  .page-tabs__tab .counter-badge {
    margin: 0 0 -2px 5px;
  }
}

.pagetopbg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: calc(-100vh + 64px);
  left: 0;
  background-color: rgb(38, 32, 69);
}

.pagebanner {
  background-color: rgb(38, 32, 69);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  color: rgb(255, 255, 255);
  padding-top: 62px;
  margin-bottom: -88px;
}
@media all and (max-width: 767px) {
  .pagebanner {
    margin-bottom: -152px;
  }
}
.pagebanner.datasources-bannerbg {
  background-image: url(../img/datakilder_bg_wide.svg);
}
.pagebanner__content {
  text-align: center;
  padding: 80px 0;
}
@media all and (max-width: 767px) {
  .pagebanner__content {
    padding: 24px 0;
  }
}
.pagebanner__content h1 {
  font-size: 2.5rem;
  color: rgb(255, 255, 255);
  margin: 0 0 36px;
}
@media all and (max-width: 767px) {
  .pagebanner__content h1 {
    padding: 2rem 0 1rem;
    font-size: 1.5rem;
  }
}
.pagebanner__content a {
  margin-bottom: 16px;
  display: inline-flex;
}
.play-button {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  border: 1px solid rgb(187, 184, 201);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
}
.play-button:hover {
  background-color: rgb(50, 55, 141);
  border: none;
}
.play-button:hover .play-button__icon {
  background-color: rgb(255, 255, 255);
}
.play-button__icon {
  position: relative;
  background-color: rgb(38, 32, 69);
  text-align: left;
  transform: rotate(-90deg) skewX(-30deg) scale(1, 0.866);
  top: -3px;
  left: -2px;
}
.play-button__icon:before, .play-button__icon:after {
  content: "";
  position: absolute;
  background-color: inherit;
}
.play-button__icon:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}
.play-button__icon:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
.play-button__icon, .play-button__icon:before, .play-button__icon:after {
  width: 16px;
  height: 16px;
  border-top-right-radius: 30%;
}

#hd-react-select__input--id {
  box-shadow: none !important;
}

#projectChange-select--id {
  margin-bottom: 24px;
}

.hd-react-select__option {
  border-color: rgb(187, 184, 201) !important;
}
.hd-react-select__control {
  height: 3.5rem !important;
  border-radius: 8px !important;
  border-color: rgb(187, 184, 201) !important;
}
.hd-react-select__value-container {
  padding: 0px 16px !important;
  cursor: pointer !important;
  font-size: 1.125rem !important;
}
.hd-react-select__placeholder {
  color: rgb(81, 84, 123) !important;
}

/* Logout component is hidden */
#reactroot-logout {
  position: absolute;
}
#reactroot-logout .modal {
  z-index: 2001;
}

.hd-button--back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(230, 230, 237);
  color: rgb(255, 255, 255);
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  min-width: 0;
}
.hd-button--back-to-top:hover {
  background-color: rgb(187, 184, 201);
}
.hd-button--back-to-top:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
}
.hd-button--back-to-top:focus:not(:focus-visible) {
  box-shadow: none;
}

.floating-top-button-container {
  z-index: 25;
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  justify-content: flex-end;
  display: none;
  pointer-events: none;
}
.floating-top-button-container .hd-button--back-to-top {
  pointer-events: auto;
}
.variablesearchpage .floating-top-button-container {
  width: auto;
  right: 0;
  margin: 0;
  padding: 0;
  left: auto;
}
.floating-top-button-container.is-visible {
  display: flex;
  animation: show-floating-top-button 0.4s forwards;
}

@keyframes show-floating-top-button {
  from {
    transform: translate3d(-50%, 200%, 0);
    opacity: 0;
  }
}
.icon-arrow-up {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMjYyMDQ1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEyIDE5VjVNNSAxMmw3LTcgNyA3Ii8+PC9zdmc+) no-repeat 50%/1.5rem;
}

.button--blue {
  background-color: rgb(82, 30, 255);
  color: rgb(255, 255, 255);
}
.button--blue:hover {
  background-color: rgb(50, 55, 141);
  color: rgb(255, 255, 255);
}
.button--blue:focus {
  color: rgb(255, 255, 255);
}
.button--blue[disabled] {
  background-color: rgb(230, 230, 237) !important;
  color: rgb(81, 84, 123);
}
.button--blue[disabled]:hover {
  color: rgb(81, 84, 123);
}

/*Remove global ::after icon for <a> button elements */
a.button--action::after {
  display: none;
}

.button--action {
  height: 44px;
  border-radius: 8px;
}
.button--action:hover {
  background-color: rgb(230, 230, 237);
  color: inherit;
}
.button--action-blue {
  color: rgb(82, 30, 255);
}
.button--action-blue:hover, .button--action-blue:focus {
  color: rgb(82, 30, 255);
}
.button--action-border {
  padding: 0 25px;
  border: 1px solid rgba(35, 23, 94, 0.08);
}

.hd-button-reset {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
}
.hd-button-reset[disabled] {
  cursor: default;
}

.button--close-x {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  height: 48px;
  width: 48px;
  order: 2;
  position: absolute;
  right: 32px;
  top: 32px;
  border-radius: 50%;
}
.button--close-x:before {
  content: "";
  background: url(../img/icons/icon_close.svg) center no-repeat;
  background-size: 20px;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}
.button--close-x:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.button--close-x:hover {
  background-color: rgb(230, 230, 237);
}
.button--close-x::-moz-focus-inner {
  border: 0;
}

.button--error-dark {
  background-color: rgb(180, 0, 44);
  color: rgb(255, 255, 255);
}
.button--error-dark:hover {
  background-color: rgb(144, 0, 35);
  color: rgb(255, 255, 255);
}
.button--error-dark:focus {
  color: rgb(255, 255, 255);
}

.button--ghost {
  border: none;
  color: rgb(38, 32, 69);
}
.button--ghost:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.button--ghost:focus {
  color: rgb(38, 32, 69);
}
.button--ghost--inverted {
  color: rgb(255, 255, 255);
}
.button--ghost--inverted:hover {
  background-color: rgb(47.5940594059, 40.0792079208, 86.4207920792);
}
.button--ghost[disabled] {
  color: rgb(187, 184, 201);
  border-color: rgb(230, 230, 237);
}
.button--ghost[disabled]:hover {
  background: none;
}

.button--inverted {
  border: 1px solid rgb(255, 255, 255);
}
.button--inverted:focus {
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0 2px rgb(42, 45, 80), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.button--inverted:hover {
  background-color: rgb(239, 240, 250);
  border: 1px solid rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}
.button--inverted:disabled {
  color: rgb(187, 184, 201);
  background-color: transparent;
  border: 1px solid rgb(230, 230, 237);
}

.button--light-grey {
  background-color: rgb(246, 247, 252);
  color: rgb(38, 32, 69);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
}
.button--light-grey:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.button--light-grey:focus {
  color: rgb(38, 32, 69);
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
}
.button--light-grey:focus:not(:focus-visible) {
  background-color: rgb(230, 230, 237);
}
.button--light-grey .icon {
  color: rgb(38, 32, 69);
}
.button--light-grey[disabled] {
  background-color: rgb(187, 184, 201);
  color: rgb(246, 247, 252);
  border: rgb(230, 230, 237);
  opacity: 0.7;
  mix-blend-mode: normal;
}

.button--link {
  color: rgb(82, 30, 255);
  text-decoration: none;
  border-bottom: 1px solid rgb(82, 30, 255);
  display: inline-block;
  border-radius: 0;
  height: 30px;
}
.button--link:hover {
  border-bottom: 1px solid rgb(82, 30, 255);
}
.button--link:focus {
  border-bottom: 1px solid rgb(82, 30, 255) !important;
}
.button--link::-moz-focus-inner {
  border: 0;
}
.button--link:first-of-type {
  margin-right: 10px;
}

.hd-button-menu {
  cursor: pointer;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  font-size: 1rem;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  border-radius: 0;
  justify-content: center;
  font-family: "graphik", Arial, Helvetica, sans-serif;
}
.hd-button-menu:hover {
  background-color: rgb(50, 55, 141);
  color: rgb(255, 255, 255);
}
.hd-button-menu:focus {
  color: rgb(255, 255, 255);
  border: none;
  outline: 4px solid rgb(66, 139, 255);
  outline-offset: -6px;
  box-shadow: none;
}
@media all and (max-width: 767px) {
  .hd-button-menu {
    padding: 0 12px;
    font-size: 0.875rem;
  }
  .hd-button-menu .icon-search--white {
    margin-left: 0;
  }
}

.hd-button--noborder-link {
  color: rgb(82, 30, 255);
  text-decoration: none;
  display: inline-block;
}
.hd-button--noborder-link:hover {
  color: rgb(82, 30, 255);
}

.hd-button__round {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  margin: 0 8px;
  overflow: visible;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  outline: none;
}
.hd-button__round:focus {
  box-shadow: none;
  outline: none;
}
.hd-button__round:focus .hd-button__round-content {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
}
.hd-button__round:focus:not(:focus-visible) .hd-button__round-content {
  box-shadow: none;
}
.hd-button__round--xsmall {
  min-width: 3rem;
  min-height: 3rem;
}
.hd-button__round--small {
  min-width: 3.5rem;
  min-height: 3.5rem;
}
.hd-button__round--medium {
  min-width: 3.75rem;
  min-height: 3.75rem;
}
.hd-button__round--large {
  min-width: 4rem;
  min-height: 4rem;
}
.hd-button__round:hover {
  background-color: inherit;
}
.hd-button__round:hover .hd-button__round-content--blue {
  background-color: rgb(50, 55, 141);
}
.hd-button__round:hover .hd-button__round-content--gray {
  background-color: rgb(187, 184, 201);
}
.hd-button__round:hover .hd-button__round-content--dark-gray {
  background-color: rgb(50, 55, 141);
}
.hd-button__round:hover .hd-button__round-content--ghost {
  background-color: rgb(230, 230, 237);
}
.hd-button__round-content {
  border-radius: 50%;
  background-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-button__round--xsmall .hd-button__round-content {
  width: 2rem;
  height: 2rem;
}
.hd-button__round--small .hd-button__round-content {
  width: 2.5rem;
  height: 2.5rem;
}
.hd-button__round--medium .hd-button__round-content {
  width: 2.75rem;
  height: 2.75;
}
.hd-button__round--large .hd-button__round-content {
  width: 3rem;
  height: 3rem;
}
.hd-button__round-content--blue {
  background-color: rgb(82, 30, 255);
}
.hd-button__round-content--gray {
  background-color: rgb(230, 230, 237);
}
.hd-button__round-content--dark-gray {
  background-color: rgb(81, 84, 123);
}
.hd-button__round-content-text {
  position: absolute;
  padding: 18px 8px 0 8px;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  font-size: 1rem;
}
.hd-button__round--xsmall .hd-button__round-content-text {
  top: 32px;
}
.hd-button__round--small .hd-button__round-content-text {
  top: 40px;
}
.hd-button__round--medium .hd-button__round-content-text {
  top: 44px;
}
.hd-button__round--large .hd-button__round-content-text {
  top: 48px;
}
.hd-button__round:hover .hd-button__round-content-text {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.hd-button__round-content-text--dark {
  color: rgb(38, 32, 69);
}
.hd-button__round-content-text--white {
  color: rgb(255, 255, 255);
}

.hd-button-square {
  cursor: pointer;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8125rem 1rem;
  height: 2.75rem;
  border-radius: 0.5rem;
}
.hd-button-square[disabled] {
  cursor: default;
}
.hd-button-square:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.hd-button-square::-moz-focus-inner {
  border: 0;
}
.hd-button-square.flex-start {
  justify-content: flex-start;
}
.hd-button-square.margin-left {
  margin-left: 16px;
}
.hd-button-square.margin-right {
  margin-right: 16px;
}
.hd-button-square.margin-top {
  margin-top: 16px;
}
.hd-button-square.margin-bottom {
  margin-bottom: 16px;
}

.button-square--primary {
  background-color: rgb(82, 30, 255);
  color: rgb(255, 255, 255);
}
.button-square--primary:hover {
  background-color: rgb(50, 55, 141);
  color: rgb(255, 255, 255);
}
.button-square--primary:focus {
  color: rgb(255, 255, 255);
}
.button-square--primary[disabled] {
  background-color: rgb(230, 230, 237);
  color: rgb(81, 84, 123);
}
.button-square--primary[disabled]:hover {
  color: rgb(81, 84, 123);
}
.button-square--secondary {
  background: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}
.button-square--secondary:hover {
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}
.button-square--secondary:focus {
  color: rgb(255, 255, 255);
}
.button-square--secondary[disabled] {
  background-color: rgb(230, 230, 237) !important;
  color: rgb(81, 84, 123);
}
.button-square--secondary[disabled]:hover {
  color: rgb(81, 84, 123);
}
.button-square--inverted {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
}
.button-square--inverted:focus {
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0 2px rgb(42, 45, 80), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.button-square--inverted:hover {
  background-color: rgb(239, 240, 250);
  border: 1px solid rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}
.button-square--inverted:disabled {
  color: rgb(187, 184, 201);
  background-color: transparent;
  border: 1px solid rgb(230, 230, 237);
}
.button-square--tertiary {
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
}
.button-square--tertiary:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.button-square--tertiary:focus {
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
}
.button-square--tertiary--inverted {
  color: rgb(255, 255, 255);
}
.button-square--tertiary--inverted:hover {
  background-color: rgb(47.5940594059, 40.0792079208, 86.4207920792);
}
.button-square--tertiary[disabled] {
  color: rgb(187, 184, 201);
  border-color: rgb(230, 230, 237);
}
.button-square--tertiary[disabled]:hover {
  background: none;
}
.button-square--grey {
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
  background-color: rgb(246, 247, 252);
}
.hd-button-square.button-square--grey.persident-trigger {
  border: 1px solid rgb(187, 184, 201);
  background-color: rgb(246, 247, 252);
}
.hd-button-square.button-square--grey.persident-trigger:hover, .hd-button-square.button-square--grey.persident-trigger:active {
  background-color: rgb(230, 230, 237);
}

.button-square--grey:focus {
  color: rgb(38, 32, 69);
  border: 1px solid rgb(187, 184, 201);
}
.button-square--grey:hover, .button-square--grey:active {
  color: rgb(38, 32, 69);
  background-color: rgb(230, 230, 237);
}
.button-square--ghost {
  border: none;
  color: rgb(38, 32, 69);
}
.button-square--ghost:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.button-square--ghost:focus {
  color: rgb(38, 32, 69);
}
.button-square--ghost--inverted {
  color: rgb(255, 255, 255);
}
.button-square--ghost--inverted:hover {
  background-color: rgb(47.5940594059, 40.0792079208, 86.4207920792);
}
.button-square--ghost[disabled] {
  color: rgb(187, 184, 201);
  border-color: rgb(230, 230, 237);
}
.button-square--ghost[disabled]:hover {
  background: none;
}
@media all and (max-width: 767px) {
  .button-square--ghost {
    border: 1px solid rgba(35, 23, 94, 0.08);
  }
}
.button-square--ghost-blue {
  border: none;
  color: rgb(82, 30, 255);
}
.button-square--ghost-blue:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(82, 30, 255);
}
.button-square--ghost-blue:focus {
  color: rgb(82, 30, 255);
}
.button-square--ghost-blue[disabled] {
  color: rgb(187, 184, 201);
  border-color: rgb(230, 230, 237);
}
.button-square--ghost-blue[disabled]:hover {
  background: none;
}
@media all and (max-width: 767px) {
  .button-square--ghost-blue {
    border: 1px solid rgba(35, 23, 94, 0.08);
  }
}
.button-square--inverted-ghost:focus {
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0 2px rgb(42, 45, 80), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.button-square--inverted-ghost:hover {
  background-color: rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}
.button-square--inverted-ghost:disabled {
  color: rgb(187, 184, 201);
  background-color: transparent;
  border: 1px solid rgb(230, 230, 237);
}
.button-square--error {
  background-color: rgb(180, 0, 44);
  color: rgb(255, 255, 255);
}
.button-square--error:hover {
  background-color: rgb(144, 0, 35);
  color: rgb(255, 255, 255);
}
.button-square--error:focus {
  color: rgb(255, 255, 255);
}
.button-square--error:disabled {
  color: rgb(187, 184, 201);
  background-color: transparent;
  border: 1px solid rgb(230, 230, 237);
}

.hd-button-square.button-square--primary {
  background-color: rgb(82, 30, 255);
  color: rgb(255, 255, 255);
}
.hd-button-square.button-square--primary:hover {
  background-color: rgb(50, 55, 141);
  color: rgb(255, 255, 255);
}

.hd-button-square.button-square--secondary {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}
.hd-button-square.button-square--secondary:hover {
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}

.hd-button-square.button-square--inverted {
  border: 1px solid rgb(255, 255, 255);
}
.hd-button-square.button-square--inverted:hover {
  border-color: rgb(239, 240, 250);
}
.hd-button-square.button-square--inverted:disabled {
  border-color: rgb(230, 230, 237);
}

.hd-button-square.button-square--tertiary {
  border: 1px solid rgb(187, 184, 201);
}

/* En påslått av/på-knapp tegnes, uansett om markupen husker å bytte variantklasse. `aria-pressed`
   sto riktig og ingenting ble tegnet, så knappen leste som en løs tekstetikett; en ARIA-test
   passerer mot nettopp den feilen.
   FLATA BÆRER TILSTANDEN, ikke kanten: 1px forskjell på en 44px høy knapp er under det en leser
   merker i sidesynet. Verdiene er `--secondary` sine egne, så dette er ingen ny farge og ingen ny
   form — $white på $grey60 måler 7.23:1. Endrer $grey60 seg, følger begge med.
   Regelen står SIST i fila med vilje: `.button-square--ghost:hover` har samme spesifisitet, og
   ligger den etter, ville en påslått ghost-knapp mistet flata si under musepekeren.
   Hovertilstanden til `--secondary` over er (0,3,0) og står urørt. */
.hd-button-square[aria-pressed=true] {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}

.button--tertiary {
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
}
.button--tertiary:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.button--tertiary:focus {
  color: rgb(38, 32, 69);
}
.button--tertiary--inverted {
  color: rgb(255, 255, 255);
}
.button--tertiary--inverted:hover {
  background-color: rgb(47.5940594059, 40.0792079208, 86.4207920792);
}
.button--tertiary[disabled] {
  color: rgb(187, 184, 201);
  border-color: rgb(230, 230, 237);
}
.button--tertiary[disabled]:hover {
  background: none;
}

.tertiary-button {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.tertiary-button:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.tertiary-button {
  color: rgb(38, 32, 69);
  background-color: rgb(246, 247, 252);
  border: 1px solid rgb(187, 184, 201);
}
.tertiary-button:focus {
  border: 1px solid rgb(187, 184, 201);
}
.tertiary-button:hover, .tertiary-button:active {
  color: rgb(38, 32, 69);
  background-color: rgb(230, 230, 237);
}

.link-as-button {
  text-decoration: none !important;
}
.link-as-button[target=_blank]::after, .link-as-button[target=_blank]:focus::after, .link-as-button[target=_blank]:hover::after {
  background-image: url(../img/icons/icon_link.svg);
}
.link-as-button.tertiary-button:hover, .link-as-button.tertiary-button:focus {
  color: rgb(38, 32, 69);
  border: 1px solid rgb(187, 184, 201) !important;
}

.button--tooltip {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: transparent;
  position: relative;
}
.button--tooltip .icon {
  margin: 0;
}
.button--tooltip__tooltip {
  position: absolute;
  display: none;
  padding: 8px 16px;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
  border-radius: 8px;
  font-size: 0.875rem;
}
.button--tooltip:hover {
  background-color: rgb(230, 230, 237);
}
.button--tooltip:hover .button--tooltip__tooltip {
  display: block;
}

button:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
button[disabled] {
  cursor: default;
}

.hd-button {
  cursor: pointer;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.8125rem 16px;
  height: 2.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  min-height: unset;
  width: unset;
}
.hd-button:hover {
  box-shadow: none;
}
.hd-button-icon {
  padding: 11px 16px;
}
.hd-button p {
  line-height: 1.5;
}
.hd-button[disabled] {
  cursor: default;
}
.hd-button:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.hd-button::-moz-focus-inner {
  border: 0;
}
.hd-button.flex-start {
  justify-content: flex-start;
}
.hd-button.margin-left {
  margin-left: 16px;
}
.hd-button.margin-right {
  margin-right: 16px;
}

body.aboutpage main {
  background: inherit;
}
body.aboutpage main article#maincontent > header {
  position: relative;
}
body.aboutpage main article#maincontent > header h1 {
  padding-top: 0px;
}
body.aboutpage main article#maincontent > .main > h2 {
  font: normal 1.875rem/1.5 graphik-medium, Helvetica, Arial, sans-serif;
  margin: 0;
  margin-top: 56px;
}
body.aboutpage main article#maincontent > .main > .ingress {
  font-size: 1.25rem;
  line-height: 1.5;
}
body.aboutpage main article#maincontent > .main blockquote {
  margin: 40px 0;
  padding: 20px 30px;
  background: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  line-height: 150%;
  max-width: 80%;
}
body.aboutpage main article#maincontent > .main > .sectionlist {
  list-style: none;
  margin: 56px 0 0;
  padding: 0 0 0 20px;
  counter-reset: section;
}
body.aboutpage main article#maincontent > .main > .sectionlist h2 {
  margin-top: 0;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li {
  position: relative;
  padding: 0 20px 56px 64px;
  border-left: 2px solid rgb(230, 230, 237);
  font-size: 1.125rem;
  line-height: 1.5;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li > p {
  margin-top: 0;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li ul,
body.aboutpage main article#maincontent > .main > .sectionlist > li ol {
  margin: 40px 0;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li ul li,
body.aboutpage main article#maincontent > .main > .sectionlist > li ol li {
  padding: 10px 0;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li:last-child {
  border-left: 2px solid transparent;
  padding-bottom: 0;
}
body.aboutpage main article#maincontent > .main > .sectionlist > li::before {
  text-align: center;
  position: absolute;
  left: -21px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
  counter-increment: section;
  content: counter(section);
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 10px;
}
body.aboutpage main article#maincontent > .main .bottomcontent .block.freetextblock p {
  background-color: rgb(255, 255, 255);
  padding: 24px 32px 26px;
}

@media all and (max-width: 767px) {
  body.aboutpage main .content {
    margin: 0;
  }
  body.aboutpage main article#maincontent > header h1 {
    padding-top: 0;
  }
  body.aboutpage main article#maincontent > header h2 {
    font-size: 1.5rem;
    line-height: 1.4;
    padding-top: 4px;
  }
  body.aboutpage main article#maincontent > .main h2 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
  }
  body.aboutpage main article#maincontent > .main .ingress {
    font-size: 1rem;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist {
    padding: 0;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist > li {
    padding: 0;
    border-left: 0;
    font-size: 1rem;
    line-height: 1.5;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist > li *:first-child {
    text-indent: 32px;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist > li ol,
  body.aboutpage main article#maincontent > .main > .sectionlist > li ul {
    padding: 0 20px;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist > li ol *,
  body.aboutpage main article#maincontent > .main > .sectionlist > li ol *:first-child,
  body.aboutpage main article#maincontent > .main > .sectionlist > li ul *,
  body.aboutpage main article#maincontent > .main > .sectionlist > li ul *:first-child {
    text-indent: 0;
  }
  body.aboutpage main article#maincontent > .main > .sectionlist > li::before {
    left: 0px;
    top: 0px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    font-size: 1rem;
    text-indent: 0;
    padding-top: 5px;
  }
  body.aboutpage main > .content {
    max-width: 100%;
    padding-top: 20px;
  }
}
.application-guidance-page {
  padding-top: 32px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media all and (max-width: 767px) {
  .application-guidance-page {
    flex-direction: column;
  }
}
.application-guidance-page * {
  word-break: break-word;
}
.application-guidance-page__formnav #application-guidance__navigation {
  width: 240px;
}

@media all and (max-width: 767px) {
  #application-guidance-breadcrumbs {
    display: none;
  }
}

.application-guidance-page__intro-content {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 48px;
  font: normal 1.5rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .application-guidance-page__intro-content {
    font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-guidance-page__intro-content {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 1024px) {
  .application-guidance-page__intro-content {
    margin-bottom: 16px;
  }
}

.application-guidance-page__keywordsmenu {
  color: rgb(81, 84, 123);
  margin: 16px 0 20px;
  margin-bottom: 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .application-guidance-page__keywordsmenu {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-guidance-page__keywordsmenu {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.application-guidance-page__keywordsmenu a {
  color: rgb(81, 84, 123);
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .application-guidance-page__keywordsmenu a {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .application-guidance-page__keywordsmenu a {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.application-guidance-page__keywordsmenu a:hover {
  color: rgb(82, 30, 255);
}
.application-guidance-page__keywordsmenu--point {
  display: inline-block;
}
@media all and (max-width: 767px) {
  .application-guidance-page__keywordsmenu--point {
    margin-bottom: 8px;
  }
}
.application-guidance-page__keywordsmenu .dot {
  height: 5px;
  width: 5px;
  background-color: rgb(81, 84, 123);
  border-radius: 50%;
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 2px;
}
@media all and (max-width: 767px) {
  .application-guidance-page__keywordsmenu .dot {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .application-guidance-page__keywordsmenu .replace-dot__mobile {
    margin-right: 8px;
  }
}

.application-guidance-page__page-navigation {
  position: sticky;
  top: 32px;
  padding-right: 32px;
  width: 300px;
  max-width: 100%;
  flex-shrink: 0;
}
@media all and (max-width: 1024px) {
  .application-guidance-page__page-navigation {
    position: static;
    padding-right: 0;
    width: 100%;
    margin-bottom: 16px;
  }
}
.application-guidance-page__page-navigation h2 {
  font-size: 1.125rem;
  margin-top: 12px;
}
.application-guidance-page__page-navigation ul {
  list-style-type: none;
  padding-inline-start: 0;
}
.application-guidance-page__page-navigation a {
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
}

.application-guidance-page__section > h2:first-child {
  margin-top: 0;
}

.application-guidance-page__body-text {
  padding-bottom: 144px;
  max-width: 45rem;
  flex: 1;
}
.application-guidance-page__body-text h1,
.application-guidance-page__body-text h2,
.application-guidance-page__body-text h3,
.application-guidance-page__body-text h4,
.application-guidance-page__body-text h5 {
  margin-top: 40px;
}
.application-guidance-page__body-text .editor-content > p > img {
  width: 100%;
  height: auto;
}
.application-guidance-page__body-text iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

.application-guidance-page__contact-box {
  background: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
}
.application-guidance-page__contact-box h3 {
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  margin-top: 26px;
}

.application-guidance-page__contact-item {
  padding: 4px 0;
}

.application-guidance-page__nav-icon-button {
  display: inline-flex;
}

.application-guidance-page__footer {
  width: 100%;
}

.application-guidance-page__nav-icon::before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-size: 1.25em;
  vertical-align: text-bottom;
}

.application-guidance-page__nav-icon--phone::before {
  background-image: url(../img/icons/icon_phone--primary-dark.svg);
}

.application-guidance-page__nav-icon--email::before {
  background-image: url(../img/icons/icon_email--primary-dark.svg);
}

.application-guidance-page__nav-icon--user::before {
  background-image: url(../img/icons/icon_user-outline--primary-dark.svg);
}

.application-guidance-page__nav-icon--phone:hover::before {
  background-image: url(../img/icons/icon_phone--primary.svg);
}

.application-guidance-page__nav-icon--email:hover::before {
  background-image: url(../img/icons/icon_email--primary.svg);
}

@media all and (max-width: 767px) {
  .register-page__nav-text, .register-page__nav-link {
    margin-top: 4px;
  }
}
.applicationpage main {
  padding: 0;
  max-width: none;
}
.applicationpage main .content {
  margin: 0;
  max-width: 100%;
}
.applicationpage main .application-no-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 64px 0;
}
.applicationpage main .application-no-access__heading {
  font-size: 2rem;
  margin: 40px 0 16px 0;
}
.applicationpage main .application-no-access__text {
  margin: 0 0 40px 0;
}

.application-flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.applicationpage__form-container {
  max-width: 100%;
}

.dropzone__files .dropzone__files__file {
  height: 3.325rem;
}

.applicationsummary__wrong-state {
  margin: 64px auto;
}
@media all and (max-width: 767px) {
  .applicationsummary__wrong-state {
    padding: 0 16px;
    margin: 32px auto;
  }
}
.applicationsummary__wrong-state__info-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 64px 0;
}
.applicationsummary__wrong-state__info-text span {
  margin-top: 40px;
  margin-bottom: 40px;
}
.applicationsummary__wrong-state__buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.dialog-message__main {
  margin: 0;
  padding: 0;
  max-width: none;
  display: block;
}
.dialog-message__main .content {
  margin: auto;
  max-width: unset;
}
.dialog-message__main .mypage-content.content-container {
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  margin: 0 auto;
}
@media all and (max-width: 767px) {
  .dialog-message__main .mypage-content.content-container {
    padding: 0 16px;
  }
}
.dialog-message__header {
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  margin-left: -16px;
}
@media all and (max-width: 767px) {
  .dialog-message__header {
    margin-left: 0;
    padding: 0;
    margin-bottom: 16px;
  }
  .dialog-message__header .hd-button-square {
    border: rgb(187, 184, 201);
  }
}
.dialog-message__intro {
  margin-top: 0;
  margin-bottom: 40px;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-message__intro {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-message__intro {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.dialog-message_new-message {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  box-sizing: border-box;
  border-radius: 8px;
}
.dialog-message__summary-box {
  background-color: rgb(255, 255, 255);
  padding: 32px;
  margin: 48px 0;
}
@media all and (max-width: 767px) {
  .dialog-message__summary-box {
    padding: 16px;
  }
}
.dialog-message__summary-box h2 {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-message__summary-box h2 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-message__summary-box h2 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.dialog-message__summary-box h2 {
  margin-top: 0;
}
.dialog-message__summary-box div {
  display: flex;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-message__summary-box div {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-message__summary-box div {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.dialog-message__summary-box div span:first-child {
  flex-basis: 10rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.dialog-message__summary-box div:not(:last-child) {
  margin-bottom: 1em;
}
.dialog-message__going-forward-section {
  margin-bottom: 48px;
}
.dialog-message__going-forward-section h2 {
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-message__going-forward-section h2 {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-message__going-forward-section h2 {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.dialog-message__going-forward-section ul {
  padding-inline-start: 20px;
}
.dialog-message__going-forward-section li {
  margin-bottom: 24px;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-message__going-forward-section li {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-message__going-forward-section li {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.dialog-message__going-forward-section li span:first-child {
  display: block;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.new-dialog-message-page {
  padding-bottom: 48px;
}
@media all and (max-width: 767px) {
  .new-dialog-message-page {
    padding-top: 32px;
  }
}

.new-dm__field-section {
  margin-bottom: 40px;
}
.new-dm__field-section .input__string-label span,
.new-dm__field-section .input__string-label div {
  font-family: "graphik", Arial, Helvetica, sans-serif;
}
.new-dm__field-section .input__string-label span {
  color: rgb(81, 84, 123);
  font-size: 1rem;
}
.new-dm__field-section .input__string-label div {
  margin: 16px 0;
}
@media all and (max-width: 767px) {
  .new-dm__field-section .input__string-label div {
    line-height: 1.3125rem;
    margin: 8px 0;
  }
}
@media all and (max-width: 767px) {
  .new-dm__field-section {
    margin-bottom: 16px;
  }
  .new-dm__field-section .input__string-label,
  .new-dm__field-section .input__string-input {
    font-size: 0.875rem;
  }
  .new-dm__field-section input.input__string-input {
    height: 3.125rem;
  }
  .new-dm__field-section .customfileupload__errortext {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}
.new-dm__fileuploader .input__string-label span {
  color: rgb(81, 84, 123);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
.new-dm__fileuploader .input__string-label div {
  font-family: "graphik", Arial, Helvetica, sans-serif;
  margin: 16px 0;
}
@media all and (max-width: 767px) {
  .new-dm__fileuploader .input__string-label div {
    line-height: 1.3125rem;
    margin: 8px 0;
  }
}
@media all and (max-width: 767px) {
  .new-dm__fileuploader {
    margin-bottom: 16px;
  }
  .new-dm__fileuploader .input__string-label,
  .new-dm__fileuploader .input__string-input {
    font-size: 0.875rem;
  }
  .new-dm__fileuploader input.input__string-input {
    height: 3.125rem;
  }
  .new-dm__fileuploader .customfileupload__errortext {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}
.new-dm__sub-label {
  margin: 0 0 8px;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .new-dm__sub-label {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .new-dm__sub-label {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.new-dm__sub-label > p {
  margin: 0;
}
.new-dm__textarea {
  display: block;
  line-height: 1.5;
  padding: 16px;
  height: auto;
  max-width: 100%;
}
.new-dm__textarea:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.new-dm__input-counter {
  text-align: right;
  color: rgb(81, 84, 123);
  line-height: 2;
}
@media all and (max-width: 767px) {
  .new-dm__input-counter {
    font-size: 0.875rem;
  }
}
.new-dm__field-section.--error input,
.new-dm__field-section.--error textarea {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
}
.new-dm__field-section.--error input:focus,
.new-dm__field-section.--error textarea:focus {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44), 0 0 0 4px rgb(66, 139, 255);
}
.new-dm__field-footer {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.new-dm__field-footer label {
  display: flex;
  line-height: 2rem;
  align-items: center;
}
.new-dm__file-upload-section input {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.new-dm__file-upload-section input:focus + label {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.new-dm__file-upload-button--dark {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.new-dm__file-upload-button--dark:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.new-dm__file-upload-button--dark {
  background-color: rgb(81, 84, 123);
}
.new-dm__file-upload-button--dark:hover, .new-dm__file-upload-button--dark:active {
  background-color: rgb(38, 32, 69);
}
.new-dm__file-upload-button--dark {
  display: inline-flex;
}
.new-dm__form-footer {
  border-top: 1px solid rgb(114, 113, 150);
  margin-top: 64px;
  display: flex;
  flex-direction: column;
}
@media all and (max-width: 767px) {
  .new-dm__form-footer {
    margin-top: 32px;
  }
}
.new-dm__form-footer__error-message {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 16px;
  height: 64px;
}
.new-dm__form-footer__error-message .icon {
  flex-shrink: 0;
}
@media all and (max-width: 767px) {
  .new-dm__form-footer__error-message {
    height: 32px;
  }
}
.new-dm__form-footer__buttons {
  display: flex;
  justify-content: space-between;
}
.new-dm__form-footer__buttons__end {
  justify-content: flex-end;
}
.new-dm__form-footer__buttons__end button {
  min-width: 188px;
}
@media all and (max-width: 767px) {
  .new-dm__form-footer__buttons {
    display: flex;
    flex-direction: column-reverse;
  }
  .new-dm__form-footer__buttons .hd-button-square {
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid rgb(187, 184, 201);
  }
  .new-dm__form-footer__buttons__end {
    display: flex;
    flex-direction: column-reverse;
  }
}
.new-dm__buttons {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media all and (max-width: 767px) {
  .new-dm__buttons {
    display: block;
  }
}
.new-dm__submit-button {
  margin-bottom: 16px;
  align-self: flex-end;
  min-width: 188px;
}
@media all and (max-width: 767px) {
  .new-dm__submit-button {
    align-self: flex-start;
  }
}
.new-dm__footer {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(114, 113, 150);
  padding-bottom: 64px;
  margin-bottom: 64px;
}
@media all and (max-width: 767px) {
  .new-dm__footer {
    padding-bottom: 32px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
  }
}
.new-dm__footer button {
  margin-top: 64px;
  min-width: 188px;
}
@media all and (max-width: 767px) {
  .new-dm__footer button {
    width: 100%;
  }
}
.new-dm__save-indicator {
  display: flex;
  justify-content: flex-end;
  margin-top: -170px;
  margin-bottom: 150px;
  align-items: center;
  min-height: 2rem;
}

.dialog-messages__card {
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(33, 42, 190, 0.12);
  padding: 32px;
  margin-bottom: 32px;
  overflow-wrap: break-word;
}
.dialog-messages__card:hover {
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
  cursor: pointer;
}
@media all and (max-width: 767px) {
  .dialog-messages__card {
    padding: 24px;
  }
}
.dialog-messages__card h3 {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .dialog-messages__card h3 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .dialog-messages__card h3 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.dialog-messages__card h3 {
  margin: 0.25rem 0 0.5rem 0;
}
.dialog-messages__card-id, .dialog-messages__card-timestamp {
  display: inline-block;
  color: rgb(81, 84, 123);
  font-size: 1rem;
  margin: 0;
}
@media all and (max-width: 767px) {
  .dialog-messages__card-id, .dialog-messages__card-timestamp {
    font-size: 0.875rem;
  }
}
.dialog-messages__card-timestamp.timestamp {
  font-size: 1rem;
}
@media all and (max-width: 767px) {
  .dialog-messages__card-timestamp.timestamp {
    font-size: 0.875rem;
  }
}
.dialog-messages__card-id:after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 4px 12px;
  border-radius: 50%;
  background-color: rgb(81, 84, 123);
}
.dialog-messages-hover {
  background-color: rgb(230, 230, 237);
}

.new-dialog-message__top-bar {
  position: relative;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
  padding: 16px 0;
}
@media all and (max-width: 767px) {
  .new-dialog-message__top-bar {
    padding: 8px 0;
  }
}
.new-dialog-message__top-bar .breadcrumbs {
  margin-bottom: 0;
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .new-dialog-message__top-bar .breadcrumbs {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .new-dialog-message__top-bar .hd-button {
    margin-left: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media all and (min-width: 768px) {
  .new-dialog-message__top-bar .hd-button {
    display: none;
  }
}
.new-dialog-message__top-bar .tooltip-wrapper {
  position: absolute;
  top: 0;
  right: 8px;
}
@media all and (max-width: 767px) {
  .new-dialog-message__top-bar .tooltip-wrapper {
    right: 0;
  }
}
.new-dialog-message__top-bar .form-control-bar__save-time {
  height: 57px;
}

.dialog-messages-page {
  position: relative;
}
.dialog-messages-page__add-button {
  position: absolute;
  top: -4px;
  right: 0;
}
@media all and (max-width: 767px) {
  .dialog-messages-page__add-button {
    top: -32px;
    transform: translateY(-100%);
  }
}
@media all and (max-width: 400px) {
  .dialog-messages-page__add-button {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 16px;
  }
}
.dialog-messages-page__add-button__empty-state {
  position: relative;
}
.dialog-messages-page__top-bar {
  margin: -16px;
  margin-bottom: 16px;
}
.dialog-messages-page__error-block {
  background-color: rgb(255, 243, 205);
  padding: 32px;
  margin-bottom: 32px;
  border-radius: 8px;
}
.dialog-messages-page__error-block > p {
  margin: 0;
}
@media all and (max-width: 767px) {
  .dialog-messages-page__error-block {
    padding: 24px;
  }
}

.message-card {
  background-color: rgb(255, 255, 255);
}
.message-card__bg-answer {
  background-color: rgb(239, 240, 250);
}
.message-card {
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
}
@media all and (max-width: 767px) {
  .message-card {
    padding: 24px;
  }
}
.message-card__timestamp {
  position: absolute;
  right: 0;
}
@media all and (max-width: 767px) {
  .message-card__timestamp {
    font-size: 0.875rem;
  }
}
.message-card-content {
  width: 100%;
  position: relative;
}
.message-card-content__header {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
}
@media all and (max-width: 767px) {
  .message-card-content__header {
    margin-top: 24px;
  }
}
.message-card-content__header h3 {
  font-size: 1.125rem;
  margin: 0;
}
@media all and (max-width: 767px) {
  .message-card-content__header h3 {
    font-size: 1rem;
  }
}
.message-card-content__senderinfo {
  margin-left: 8px;
}
.message-card-content__body {
  margin-left: 48px;
  word-break: break-word;
}
.message-card-content__body p {
  margin: 0;
}
@media all and (max-width: 767px) {
  .message-card-content__body {
    margin-left: 0;
  }
}
.message-card-content__body .dm-card__attachments {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}
.message-card-content__body .dm-card__attachments .dm_card__each-attachment {
  display: inline-flex;
  margin-bottom: 8px;
}
.message-card-metainfo {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
.message-card-metainfo h3 {
  font-size: 1.125rem;
}
@media all and (max-width: 767px) {
  .message-card-metainfo h3 {
    font-size: 1rem;
  }
}
.message-card-senderinfo {
  display: flex;
  align-items: center;
}
.message-card-senderinfo__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.message-card-forvalter {
  color: rgb(81, 84, 123);
  font-size: 1rem;
  margin-top: -8px;
}
@media all and (max-width: 767px) {
  .message-card-forvalter {
    font-size: 0.875rem;
  }
}

.dm__metainfo-circle {
  height: 40px;
  width: 40px;
  background-color: rgb(255, 243, 205);
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 16px;
  padding-top: 8px;
}

.submitted-dm-page {
  overflow-wrap: break-word;
}
.submitted-dm-page__sub-label {
  margin: 0 0 8px;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .submitted-dm-page__sub-label {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .submitted-dm-page__sub-label {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.submitted-dm-page__sub-label > p {
  margin: 0;
}
.submitted-dm-page__disabled-input, .submitted-dm-page__disabled-textarea {
  padding: 12px 16px;
  background-color: rgb(230, 230, 237);
  margin: 0 0 64px;
  border-radius: 8px;
  white-space: pre-wrap;
}
.submitted-dm-page__disabled-textarea {
  min-height: 150px;
}
.submitted-dm-page__empty-input {
  margin: 0 0 32px;
}
.submitted-dm-page__attachment-list {
  list-style-type: none;
  padding: 0 0 32px;
  margin: 0;
}
.submitted-dm-page__attachment-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.submitted-dm-page__attachment-list a {
  display: inline-flex;
  align-items: center;
}
.submitted-dm-page__attachment-list > li > span:not(.icon) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.submitted-dm-page__attachment-list .hd-button-square {
  margin-left: 16px;
  flex-shrink: 0;
}
.submitted-dm-page__attachment-list .icon {
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
  flex-shrink: 0;
}
.submitted-dm-page .input__string-label {
  margin-top: 0;
}

@media all and (max-width: 767px) {
  .submitted-dm-page .input__string-label,
  .submitted-dm-page__disabled-input,
  .submitted-dm-page__disabled-textarea,
  .submitted-dm-page__sub-label,
  .submitted-dm-page__empty-input {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}

.dm-card__header, .dm-card__teaser {
  display: flex;
  line-height: 24px;
  align-items: center;
}
.dm-card__header {
  justify-content: space-between;
}
.dm-card__header__heading {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dm-card__header_status {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
  border-radius: 8px;
  font-size: 1rem;
  padding: 4px 8px;
}
.dm-card__teaser {
  margin-top: 16px;
  white-space: nowrap;
}
.dm-card__teaser .dm__metainfo-circle {
  width: 24px;
  height: 24px;
  position: absolute;
}
.dm-card__teaser-sender {
  margin-left: 8px;
  margin-right: 4px;
  font-weight: 600;
}
.dm-card__teaser-body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-card__teaser-attachments {
  display: flex;
  margin-left: 32px;
  margin-top: 8px;
}
.dm-card__footer {
  margin: -12px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dm-card__footer-notifications {
  display: flex;
  align-items: center;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 400px) {
  .dm-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.customfileupload_button {
  margin: 0;
}
.customfileupload_button:before {
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  background: url(../img/icons/icon_upload--white.svg) center no-repeat;
  background-size: 24px;
  position: relative;
  top: 6px;
  margin-right: 8px;
}
.customfileupload .customfileupload__label {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 100%;
  color: #000000;
  padding-bottom: 8px;
}
.customfileupload .customfileupload__optinal {
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 150%;
  color: rgb(81, 84, 123);
  padding-left: 8px;
}
.customfileupload .customfileupload__inputWrapper {
  position: relative;
  overflow: hidden;
  width: 310px;
  background-color: rgb(255, 255, 255);
}
.customfileupload .customfileupload__Description {
  font-size: 1.125rem;
  color: rgb(38, 32, 69);
  position: relative;
  padding-bottom: 16px;
}
.customfileupload .customfileupload__Description--error {
  padding-bottom: 8px;
}
.customfileupload .customfileupload__input {
  height: 100%;
  width: 185px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  border: 0;
  padding: 0 10px 1px;
  margin: 0;
}
.customfileupload .customfileupload__input:hover {
  cursor: pointer;
}
.customfileupload .ul {
  padding: 0;
  padding-bottom: 24px;
  margin: 0;
  list-style-type: none;
}
.customfileupload .ul .li {
  display: flex;
  padding-bottom: 8px;
  align-items: center;
}
.customfileupload .ul .li > p {
  margin: 0 8px 0 0;
}
.customfileupload .customfileupload__errortext {
  color: rgb(180, 0, 44);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 32px;
  padding-bottom: 24px;
}
.customfileupload--validation-error {
  background-color: rgb(255, 224, 224);
  border-left: 4px solid rgb(180, 0, 44);
  padding: 40px 32px;
  margin-top: 0;
  background-size: 100% 200%;
  background-position: 0 0;
  margin-bottom: 8px;
  position: relative;
  transition: background-position 0.3s ease-out;
  word-break: normal;
}
.customfileupload--validation-error:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  transition: transform 0.3s ease-out 0s;
  transform: scaleY(0);
  transform-origin: top;
  left: calc(-1rem + 1px);
  border-left: 4px solid rgb(180, 0, 44);
}

.app-sum__menu-button__back-button {
  border: none;
}

.application-page-tab-content.tab-hidden {
  visibility: hidden;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.mypage__h2-heading {
  margin-top: 0;
}

.applicationpage__menu-buttons-container {
  margin-left: -16px;
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
}
@media all and (max-width: 1024px) {
  .applicationpage__menu-buttons-container {
    margin-left: 0;
  }
}
@media all and (max-width: 1024px) {
  .applicationpage__menu-buttons-container__right-side button,
  .applicationpage__menu-buttons-container__right-side a {
    margin: 0 8px 8px 0;
    border: 1px solid rgba(35, 23, 94, 0.08);
  }
}
.applicationpage__menu-buttons-container .app-sum__menu-button__back-button {
  border: none;
}

body.articlepage .content #ingress {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}

@media all and (max-width: 767px) {
  body.articlepage main .content {
    margin: 0;
  }
}
body.errorpage .error {
  color: rgb(114, 113, 150);
}

.errorpage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.errorpage-content * {
  margin: 0;
}
.errorpage-content__heading {
  margin: 56px 0 24px 0;
}
.errorpage-content__home-link {
  margin: 66px 0;
}

body.frontpage #wrapper {
  display: block;
  padding-top: 0;
}
body.frontpage #wrapper > .wrapper {
  width: 100%;
}

.frontpage__top {
  padding: 4rem 0 6rem;
  background-color: rgb(38, 32, 69);
  background-image: url(../img/frontpage_top_bg.svg);
  background-position: 50% 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
@media all and (max-width: 1024px) {
  .frontpage__top {
    padding: 2rem 0 3rem;
  }
}
.frontpage__top h2 {
  color: rgb(255, 255, 255);
  margin: 0 0 4rem 0;
  text-align: center;
  font-size: 3rem;
}
@media all and (max-width: 767px) {
  .frontpage__top h2 {
    font-size: 2rem;
  }
}
.frontpage__top .block {
  color: rgb(38, 32, 69);
  display: flex;
  align-items: stretch;
}

.frontpage-sections .block:nth-child(odd) {
  background-color: rgb(239, 240, 250);
}

.frontpage main {
  max-width: none;
  display: block;
  padding: 0;
}

.global-search-main#maincontent {
  padding-top: 104px;
}

.global-search-entry-container {
  display: contents;
}

.global-search-entry {
  display: flex;
  align-items: center;
  height: 100%;
}

.global-search-input {
  position: relative;
}

.global-search-modal {
  height: 100vh;
  width: 100vw;
  max-height: unset;
  max-width: unset;
  border: none;
  background-color: rgb(38, 32, 69);
  z-index: 999;
  color: rgb(255, 255, 255);
}
.global-search-modal__content {
  display: flex;
  flex-direction: column-reverse;
  padding-top: 124px;
}
.global-search-modal__content .form-element__label {
  color: rgb(255, 255, 255);
}
.global-search-modal__close-button {
  align-self: flex-end;
  font-size: 1rem;
}
.global-search-modal__close-button:hover .icon {
  background: url(../img/icons/icon_close.svg) no-repeat 50%/1.5rem;
}
.global-search-modal__reset-button--hidden.icon {
  display: none;
}

.main-styles .global-search-heading {
  max-width: 600px;
}

.global-search-input-container {
  max-width: 600px;
}

.global-search-results-container {
  margin: 80px 0;
}

.global-search-results {
  padding: 0;
  list-style: none;
}
.global-search-results-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgb(230, 230, 237);
}
.global-search-results-item:first-of-type {
  border-top: 1px solid rgb(230, 230, 237);
}
.global-search-results-item__link {
  color: rgb(38, 32, 69);
  padding: 16px 16px 40px;
  text-decoration: none;
}
.global-search-results-item__link:hover, .global-search-results-item__link:focus {
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
}
.global-search-results-item__link:hover .global-search-results-item__heading, .global-search-results-item__link:focus .global-search-results-item__heading {
  text-decoration: none;
  color: rgb(82, 30, 255);
}
.global-search-results-item__link:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.global-search-results-item__heading {
  font-size: 1.25rem;
  margin: 0;
  color: rgb(50, 55, 141);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  text-decoration: underline;
}
.global-search-results-item__intro {
  margin: 16px 0 0;
  font-size: 1rem;
}
.global-search-results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.global-search-results-empty__content {
  align-self: flex-start;
}
.global-search-results-empty .editor-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guidanceintropage .ingress {
  max-width: 40rem;
  margin: 0px auto 3rem;
}
.guidanceintropage .cardblockholder {
  margin-top: 48px;
}
.guidanceintropage .cardblockholder > div {
  margin: 0 -1rem 0 -1rem;
  display: flex;
  flex-wrap: wrap;
}
.guidanceintropage .cardblockholder > div .block {
  width: 50%;
  padding: 0 16px;
  display: flex;
}
@media all and (max-width: 1024px) {
  .guidanceintropage .cardblockholder > div .block {
    width: 100%;
    margin-bottom: 2rem;
  }
}

.guidepage main {
  background: inherit;
}
.guidepage__wrapper,
.guidepage .maincontent {
  outline: none;
  width: 100%;
}
.guidepage__item:target .guidepage__item__content {
  display: block;
}
.guidepage__item__content {
  display: none;
  padding: 4rem 0;
}
@media all and (max-width: 767px) {
  .guidepage__item__content {
    padding: 2rem 0;
  }
}
.guidepage__item__content p:first-child {
  margin-top: 0;
}
.is-expanded .guidepage__item__content {
  display: block;
}
.guidepage__item__content .editor-content * {
  max-width: 100%;
}
.guidepage__item__content .editor-content h1:first-child,
.guidepage__item__content .editor-content h2:first-child,
.guidepage__item__content .editor-content h3:first-child,
.guidepage__item__content .editor-content h4:first-child {
  margin-top: 0;
}
.guidepage__item__content .inline-block--tip {
  margin-left: 0;
  margin-right: 0;
}
.guidepage__item-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0;
  text-align: left;
  outline: none;
  cursor: pointer;
}
@media all and (max-width: 767px) {
  .guidepage__item-expand {
    padding: 1rem 0;
    font-size: 1rem;
  }
}
.guidepage__item-expand:hover, .guidepage__item-expand:focus {
  color: rgb(82, 30, 255);
}
.is-expanded .guidepage__item-expand .icon {
  transform: rotate(180deg);
}
.guidepage__item-expand .headline {
  line-height: 1.3;
}
.guidepage__item {
  border-width: 1px 0 0;
  border-color: rgb(38, 32, 69);
  border-style: solid;
}
.guidepage__item:last-child {
  border-bottom-width: 1px;
}
.guidepage__items {
  padding-top: 4rem;
}
.guidepage blockquote {
  background-color: rgb(239, 240, 250);
  padding: 2rem;
}
.guidepage__floating-button-container {
  z-index: 100;
  position: fixed;
  bottom: 48px;
  left: calc(50% - 5.5rem);
  padding-right: 0;
  transform: translate3d(-50%, 0, 0);
  display: flex;
  justify-content: flex-end;
  display: none;
  height: 48px;
  align-items: center;
  pointer-events: none;
}
.guidepage__floating-button-container.is-visible {
  display: flex;
  animation: 0.4s show-floating-button forwards;
}
@media all and (max-width: 767px) {
  .guidepage__floating-button-container {
    display: none !important;
  }
}
.guidepage__floating-button-container a {
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  pointer-events: visible;
}

@keyframes show-floating-button {
  from {
    transform: translate3d(-50%, 200%, 0);
    opacity: 0;
  }
}
.logoutpage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}
.logoutpage-content__links {
  padding: 48px 32px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.logoutpage-content__links--home {
  margin-right: 16px;
}
.logoutpage-content__links a {
  padding: 0 24px;
}
@media all and (max-width: 767px) {
  .logoutpage-content__links .hd-button {
    margin: 16px 0 0 0;
    width: 100%;
    min-width: 0;
    max-width: 300px;
  }
  .logoutpage-content__links .hd-button:first-child {
    margin-bottom: 16px;
  }
}

#logoutpage-content__heading {
  margin: 48px 0 16px 0;
}

.onboarding-page {
  max-width: none;
  display: block;
  padding: 0;
  padding-top: 64px;
}

.profile-form {
  width: 384px;
}

.profile-form__input,
.profile-form__name {
  display: flex;
  height: 48px;
  width: 100%;
  padding-left: 10px;
  border-radius: 8px 8px 8px 8px;
  position: relative;
}

.profile-form__input {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  font-size: 1.125rem;
}

.profile-form__input--error {
  background: #fcf5f6;
  border: 1px solid #d1324f;
}

.profile-form-submit-container {
  padding-top: 40px;
}

.profile-form__submit {
  margin: auto;
  display: block;
}

@media all and (max-width: 767px) {
  .profile-form__input {
    width: 100%;
  }
}
.form-element--error .input__field,
.form-element--error .input__field--error {
  border-color: #c30000;
  outline-color: #c30000;
}
.form-element--error .input__field:focus,
.form-element--error .input__field--error:focus {
  border-color: #c30000;
  box-shadow: 0 0 0 2px rgba(195, 0, 0, 0.2);
}

.input__field--error {
  border-color: #c30000 !important;
}
.input__field--error:focus {
  border-color: #c30000 !important;
  box-shadow: 0 0 0 2px rgba(195, 0, 0, 0.2);
}

.input__validation--error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.input__validation--error p {
  margin: 0;
}

.projectleader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 48px;
}
.projectleader__content .hd-button {
  margin-top: 16px;
}
.projectleader .form-element {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 600px;
}
@media all and (max-width: 767px) {
  .projectleader .form-element {
    width: 350px;
  }
}
@media all and (max-width: 400px) {
  .projectleader .form-element {
    width: 250px;
  }
}
.projectleader .form-element #phoneValidationMessage,
.projectleader .form-element #emailValidationMessage {
  display: none;
}
.projectleader .form-element--error #phoneValidationMessage {
  display: inline-block;
}
.projectleader .form-element--error #emailValidationMessage {
  display: inline-block;
}
.projectleader .input__field {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .projectleader .input__field {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .projectleader .input__field {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.projectleader .input__field {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.projectleader .input__field:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.projectleader__label {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .projectleader__label {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .projectleader__label {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.projectleader__label {
  color: rgb(38, 32, 69);
  margin-top: 16px;
  margin-bottom: 8px;
}
.projectleader__label__first {
  margin-top: 48px;
}
.projectleader #input-projectleader--phone {
  width: 204px;
}
.projectleader #projectLeaderRequestButton {
  align-self: center;
}

.receipt {
  margin: 64px auto;
}
@media all and (max-width: 767px) {
  .receipt {
    padding: 0 16px;
    margin: 32px auto;
  }
}
.receipt__header {
  text-align: center;
  margin: 32px 0 0px;
}
.receipt__info-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 64px 0;
}
.receipt__info-text p {
  margin: 0;
}
.receipt__summary {
  margin-top: 64px;
}
.receipt h1:not(:first-child) {
  margin-bottom: 12px;
  margin-top: 32px;
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .receipt h1:not(:first-child) {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .receipt h1:not(:first-child) {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.receipt .intro {
  font-size: 1.125rem;
  margin-top: 0;
}
.receipt .editor-content ul {
  padding-left: 24px;
}
.receipt__buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.register-page {
  padding-top: 32px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media all and (max-width: 767px) {
  .register-page {
    flex-direction: column;
  }
}
.register-page * {
  word-break: break-word;
}

@media all and (max-width: 767px) {
  #datasource-breadcrumbs {
    display: none;
  }
}

.register-page__intro-content {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 48px;
  font: normal 1.5rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .register-page__intro-content {
    font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .register-page__intro-content {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}

.register-page__keywordsmenu {
  color: rgb(81, 84, 123);
  margin: 16px 0 20px;
  margin-bottom: 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .register-page__keywordsmenu {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .register-page__keywordsmenu {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.register-page__keywordsmenu a {
  color: rgb(81, 84, 123);
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .register-page__keywordsmenu a {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .register-page__keywordsmenu a {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.register-page__keywordsmenu a:hover {
  color: rgb(82, 30, 255);
}
.register-page__keywordsmenu--point {
  display: inline-block;
  word-break: normal;
}
@media all and (max-width: 767px) {
  .register-page__keywordsmenu--point {
    margin-bottom: 8px;
  }
}
.register-page__keywordsmenu .dot {
  height: 5px;
  width: 5px;
  background-color: rgb(81, 84, 123);
  border-radius: 50%;
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 2px;
}
@media all and (max-width: 767px) {
  .register-page__keywordsmenu .dot {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .register-page__keywordsmenu .replace-dot__mobile {
    margin-right: 8px;
  }
}

.register-page__main-content {
  display: flex;
  align-items: flex-start;
}
@media all and (max-width: 767px) {
  .register-page__main-content {
    flex-direction: column;
  }
}

.register-page__category-navigation {
  display: flex;
  flex-wrap: wrap;
}

.category-box {
  background: rgb(230, 230, 237);
  border-radius: 50px;
  padding: 8px 16px;
  margin-right: 8px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(38, 32, 69);
  text-decoration: none;
}

#register-page__page-navigation {
  position: sticky;
  top: 32px;
  padding-right: 32px;
  width: 300px;
  max-width: 100%;
  flex-shrink: 0;
}
@media all and (max-width: 1024px) {
  #register-page__page-navigation {
    width: 250px;
  }
}
@media all and (max-width: 767px) {
  #register-page__page-navigation {
    position: static;
    padding-right: 0;
    width: 100%;
  }
}
#register-page__page-navigation h2 {
  font-size: 1.125rem;
  margin-top: 12px;
}
#register-page__page-navigation ul {
  list-style-type: none;
  padding-inline-start: 0;
}
#register-page__page-navigation li {
  margin-bottom: 8px;
}
#register-page__page-navigation a {
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 1rem;
  line-height: 1.25rem;
}
#register-page__page-navigation a span:first-child {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}
#register-page__page-navigation a:hover {
  text-decoration: underline;
}

.register-page__body-text {
  max-width: 45rem;
  flex: 1;
}
.register-page__body-text .editor-content:first-child > h2 {
  margin-top: 0;
}
.register-page__body-text h1,
.register-page__body-text h2,
.register-page__body-text h3,
.register-page__body-text h4,
.register-page__body-text h5 {
  margin-top: 40px;
}

.register-page__contact-box {
  background: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
}
.register-page__contact-box h3 {
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  margin-top: 26px;
}

.register-page__contact-item {
  padding: 4px 0;
}

.register-page__nav-icon-button {
  display: inline-flex;
}

.register-page__footer {
  width: 100%;
}

.register-page__nav-icon::before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-size: 1.25em;
  vertical-align: text-bottom;
}

.register-page__nav-icon--phone::before {
  background-image: url(../img/icons/icon_phone--primary-dark.svg);
}

.register-page__nav-icon--email::before {
  background-image: url(../img/icons/icon_email--primary-dark.svg);
}

.register-page__nav-icon--user::before {
  background-image: url(../img/icons/icon_user-outline--primary-dark.svg);
}

.register-page__nav-icon--phone:hover::before {
  background-image: url(../img/icons/icon_phone--primary.svg);
}

.register-page__nav-icon--email:hover::before {
  background-image: url(../img/icons/icon_email--primary.svg);
}

@media all and (max-width: 767px) {
  .register-page__nav-text, .register-page__nav-link {
    margin-top: 4px;
  }
}
body.registerownerlistpage main,
body.registerownerpage main {
  background: inherit;
  flex: 0 1 auto;
  margin: auto;
}
body.registerownerlistpage main header h1,
body.registerownerpage main header h1 {
  overflow: hidden;
}
body.registerownerlistpage main header .listtype,
body.registerownerpage main header .listtype {
  display: flex;
}
body.registerownerlistpage main header .listtype span,
body.registerownerpage main header .listtype span {
  font-size: 1.5rem;
  cursor: pointer;
  color: rgb(38, 32, 69);
}
body.registerownerlistpage main header .listtype span:first-of-type,
body.registerownerpage main header .listtype span:first-of-type {
  margin-right: 5px;
}
body.registerownerlistpage main header .listtype span.active,
body.registerownerpage main header .listtype span.active {
  color: rgb(187, 184, 201);
  pointer-events: none;
}
body.registerownerlistpage main > .content,
body.registerownerpage main > .content {
  margin: 0;
  max-width: 1200px;
  width: 100%;
}
body.registerownerlistpage .main,
body.registerownerpage .main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body.registerownerlistpage .main .editorial,
body.registerownerlistpage .main aside.linklist,
body.registerownerpage .main .editorial,
body.registerownerpage .main aside.linklist {
  flex: 1 1 auto;
  width: 70%;
}
body.registerownerlistpage .main aside.linklist,
body.registerownerpage .main aside.linklist {
  width: 30%;
  flex: 1 1 auto;
}
body.registerownerlistpage .main aside.linklist ul,
body.registerownerpage .main aside.linklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.registerownerlistpage .main aside.linklist ul li,
body.registerownerpage .main aside.linklist ul li {
  padding: 0;
}
body.registerownerlistpage .main aside.linklist ul li a,
body.registerownerpage .main aside.linklist ul li a {
  display: block;
  padding: 10px 20px;
  border: 1px solid rgb(230, 230, 237);
  background: rgb(255, 255, 255);
  margin-top: -1px;
  text-decoration: none;
}
body.registerownerlistpage .main aside.linklist ul li a:hover,
body.registerownerpage .main aside.linklist ul li a:hover {
  text-decoration: underline;
}
body.registerownerlistpage .main aside.linklist ul li:first-child a,
body.registerownerpage .main aside.linklist ul li:first-child a {
  border-radius: 10px 10px 0 0;
}
body.registerownerlistpage .main aside.linklist ul li:last-child a,
body.registerownerpage .main aside.linklist ul li:last-child a {
  border-radius: 0 0 10px 10px;
}
body.registerownerlistpage .main .ingress,
body.registerownerpage .main .ingress {
  font-size: 1.25rem;
}
body.registerownerlistpage .main .editorial,
body.registerownerpage .main .editorial {
  padding: 0 40px 0 0;
}
body.registerownerlistpage .main .editorial ul li,
body.registerownerpage .main .editorial ul li {
  margin: 20px 0;
}
body.registerownerlistpage .main .listofregister,
body.registerownerpage .main .listofregister {
  width: 100%;
  margin-top: 32px;
}

article.registerOwnerListPage table.registerlist,
article.registerOwnerPage table.registerlist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  margin: 0 -10px 40px;
}
article.registerOwnerListPage table.registerlist tbody,
article.registerOwnerListPage table.registerlist thead,
article.registerOwnerPage table.registerlist tbody,
article.registerOwnerPage table.registerlist thead {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
article.registerOwnerListPage table.registerlist thead th,
article.registerOwnerPage table.registerlist thead th {
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
}
article.registerOwnerListPage table.registerlist tbody tr.content,
article.registerOwnerPage table.registerlist tbody tr.content {
  cursor: pointer;
}
article.registerOwnerListPage table.registerlist tbody tr.content:hover,
article.registerOwnerPage table.registerlist tbody tr.content:hover {
  background-color: rgb(255, 255, 255);
}
article.registerOwnerListPage table.registerlist tbody tr.content:hover .register::after,
article.registerOwnerPage table.registerlist tbody tr.content:hover .register::after {
  content: "";
  background: url(../img/icons/arrow/icon_forward--blue.svg);
  background-size: cover;
  height: 22px;
  align-self: center;
  width: 22px;
  display: inline-block;
  position: relative;
  left: 48px;
}
article.registerOwnerListPage table.registerlist.listview,
article.registerOwnerPage table.registerlist.listview {
  display: flex;
  width: 100%;
}
article.registerOwnerListPage table.registerlist.listview tr,
article.registerOwnerPage table.registerlist.listview tr {
  display: flex;
  width: 100%;
  max-width: none;
  padding: 0;
  border-bottom: 1px solid rgb(230, 230, 237);
}
article.registerOwnerListPage table.registerlist.listview tr a,
article.registerOwnerPage table.registerlist.listview tr a {
  text-decoration: none;
}
article.registerOwnerListPage table.registerlist.listview tr a:focus,
article.registerOwnerPage table.registerlist.listview tr a:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
article.registerOwnerListPage table.registerlist.listview tr h2,
article.registerOwnerPage table.registerlist.listview tr h2 {
  color: rgb(82, 30, 255);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  line-height: 22px;
  margin: 18px 0;
}
article.registerOwnerListPage table.registerlist.listview tr h2::first-letter,
article.registerOwnerPage table.registerlist.listview tr h2::first-letter {
  text-transform: uppercase;
}
article.registerOwnerListPage table.registerlist.listview tr .owner,
article.registerOwnerListPage table.registerlist.listview tr .register,
article.registerOwnerPage table.registerlist.listview tr .owner,
article.registerOwnerPage table.registerlist.listview tr .register {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button,
article.registerOwnerListPage table.registerlist.listview tr .register button,
article.registerOwnerPage table.registerlist.listview tr .owner button,
article.registerOwnerPage table.registerlist.listview tr .register button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button:focus,
article.registerOwnerListPage table.registerlist.listview tr .register button:focus,
article.registerOwnerPage table.registerlist.listview tr .owner button:focus,
article.registerOwnerPage table.registerlist.listview tr .register button:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button::-moz-focus-inner,
article.registerOwnerListPage table.registerlist.listview tr .register button::-moz-focus-inner,
article.registerOwnerPage table.registerlist.listview tr .owner button::-moz-focus-inner,
article.registerOwnerPage table.registerlist.listview tr .register button::-moz-focus-inner {
  border: 0;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button .sorticon,
article.registerOwnerListPage table.registerlist.listview tr .register button .sorticon,
article.registerOwnerPage table.registerlist.listview tr .owner button .sorticon,
article.registerOwnerPage table.registerlist.listview tr .register button .sorticon {
  height: 24px;
  width: 24px;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button .sorticon.asc::before,
article.registerOwnerListPage table.registerlist.listview tr .register button .sorticon.asc::before,
article.registerOwnerPage table.registerlist.listview tr .owner button .sorticon.asc::before,
article.registerOwnerPage table.registerlist.listview tr .register button .sorticon.asc::before {
  content: "";
  background: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
}
article.registerOwnerListPage table.registerlist.listview tr .owner button .sorticon.desc::before,
article.registerOwnerListPage table.registerlist.listview tr .register button .sorticon.desc::before,
article.registerOwnerPage table.registerlist.listview tr .owner button .sorticon.desc::before,
article.registerOwnerPage table.registerlist.listview tr .register button .sorticon.desc::before {
  content: "";
  background: url(../img/icons/keyboard-arrow/icon_up.svg) no-repeat center;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
}
article.registerOwnerListPage table.registerlist.listview tr .owner,
article.registerOwnerPage table.registerlist.listview tr .owner {
  width: 80%;
}
article.registerOwnerListPage table.registerlist.listview tr .register,
article.registerOwnerPage table.registerlist.listview tr .register {
  width: 20%;
}
article.registerOwnerListPage table.registerlist.listview tr .register p,
article.registerOwnerPage table.registerlist.listview tr .register p {
  color: rgb(42, 45, 80);
  font-size: 1rem;
  line-height: 18px;
  width: 36px;
  text-align: right;
}
article.registerOwnerListPage table.registerlist.listview tr.content,
article.registerOwnerPage table.registerlist.listview tr.content {
  background: none;
  padding: 0 20px;
  width: 100%;
}
article.registerOwnerListPage table.registerlist.listview tr.head,
article.registerOwnerPage table.registerlist.listview tr.head {
  padding: 10px 20px;
  align-items: center;
}
article.registerOwnerListPage table.registerlist.listview tr.head td,
article.registerOwnerPage table.registerlist.listview tr.head td {
  font-size: 0.875rem;
}
article.registerOwnerListPage table.registerlist.listview tr.head td:hover, article.registerOwnerListPage table.registerlist.listview tr.head td:focus, article.registerOwnerListPage table.registerlist.listview tr.head td:active,
article.registerOwnerPage table.registerlist.listview tr.head td:hover,
article.registerOwnerPage table.registerlist.listview tr.head td:focus,
article.registerOwnerPage table.registerlist.listview tr.head td:active {
  color: rgb(82, 30, 255);
}
article.registerOwnerListPage table.registerlist.listview tr.head td.clickable:hover,
article.registerOwnerPage table.registerlist.listview tr.head td.clickable:hover {
  cursor: pointer;
}
article.registerOwnerListPage table.registerlist.listview tr.head td .sortable:hover,
article.registerOwnerPage table.registerlist.listview tr.head td .sortable:hover {
  cursor: pointer;
}
article.registerOwnerListPage table.registerlist.listview tr.head td .sortable,
article.registerOwnerPage table.registerlist.listview tr.head td .sortable {
  font-family: "graphik", Arial, Helvetica, sans-serif;
  display: inline !important;
}
article.registerOwnerListPage table.registerlist.listview tr a:focus,
article.registerOwnerListPage table.registerlist.listview tr a:hover,
article.registerOwnerPage table.registerlist.listview tr a:focus,
article.registerOwnerPage table.registerlist.listview tr a:hover {
  color: rgb(82, 30, 255);
  text-decoration: underline;
}

@media all and (max-width: 1280px) {
  body.registerownerlistpage table td.owner,
  body.registerownerlistpage table th.owner {
    padding-left: 5px;
  }
  body.registerownerlistpage table tbody tr.content {
    padding: 0 !important;
  }
  body.registerownerlistpage table tbody tr.content:hover::after {
    margin-left: -40px !important;
    margin-right: 20px;
  }
  body.registerownerpage main {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.registerownerpage main > .content {
    max-width: 100%;
  }
}
@media all and (max-width: 767px) {
  body.registerownerlistpage main,
  body.registerownerpage main {
    padding-left: 20px;
  }
  body.registerownerlistpage main > .content,
  body.registerownerpage main > .content {
    max-width: 100%;
  }
  body.registerownerlistpage .main .editorial,
  body.registerownerpage .main .editorial {
    padding: 0;
  }
  body.registerownerlistpage .main .editorial .content,
  body.registerownerpage .main .editorial .content {
    margin: 0;
  }
  body.registerownerlistpage .main .listofregister,
  body.registerownerpage .main .listofregister {
    margin-top: 16px;
  }
  body.registerownerlistpage .main aside.linklist,
  body.registerownerpage .main aside.linklist {
    flex: 0 0 auto;
    width: 100%;
    margin: 40px 0;
  }
}
.register-page__page-navigation {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  width: 250px;
  flex-shrink: 0;
}

.register-page__body-text > .register-page__section:last-child {
  min-height: calc(60vh - 120px);
}

.register-page__section[data-nav-section] {
  scroll-margin-top: 140px;
}

.register-page__body-text {
  margin-left: 40px;
}

.register-page__page-navigation ul {
  list-style-type: none;
  padding-inline-start: 0;
}

/* Navigation list styles */
.form-menu__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.form-menu__list a {
  color: #262045;
  display: block;
  margin: 0;
  padding: 8px 4px 8px 24px;
  position: relative;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

/* Remove the problematic :after pseudo-element approach */
.form-menu__list a:after {
  display: none; /* Disable the :after approach */
}

/* Active state - direct styling without :after */
.form-menu__list__item--active > a {
  color: #262045;
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
  background-color: #fff;
  border-left: 3px solid #262045;
  padding-left: 21px; /* Adjust for border */
}

/* Hover state */
.form-menu__list a:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Keyboard focus: inset ring (outline would be clipped by the sticky nav) */
.form-menu__list a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
}

/* Active-child state (if needed) */
.form-menu__list__item--active-child > a {
  color: #262045;
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
}

.register-page * {
  word-break: break-word;
}

a {
  color: #32378d;
  text-decoration: underline;
}

.form-menu__list a:after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: -24px;
  top: 0;
  z-index: -1;
}

.form-menu__list__item--active > a:after {
  background-color: #fff;
}

:after, :before {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.pagecontent-end-padding {
  padding-bottom: 9rem;
}

.register-page__intro-content {
  flex-shrink: 0;
  font: normal 1.5rem/160% graphik, Arial, Helvetica, sans-serif;
  margin-bottom: 48px;
  width: 100%;
}

nav {
  display: block;
  unicode-bidi: isolate;
}

div {
  display: block;
  unicode-bidi: isolate;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

/* `.icon` hører hjemme i `base/_icons.scss` og skal ikke gjentas her: en kopi på (0,1,0) i `pages/`
   lastes etter base og slår ut alle `.icon--*`-modifikatorene som er nøstet under originalen. */
.icon-keyboard-arrow-right-gray {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0JCQjhDOSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yOTMgNS4yOTNhMSAxIDAgMCAxIDEuNDE0IDBsNiA2YTEgMSAwIDAgMSAwIDEuNDE0bC02IDZhMSAxIDAgMCAxLTEuNDE0LTEuNDE0TDEzLjU4NiAxMiA4LjI5MyA2LjcwN2ExIDEgMCAwIDEgMC0xLjQxNCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) no-repeat 50%/1.5rem;
}

.breadcrumbs__divider {
  background-size: 24px;
  width: 32px;
}

.breadcrumbs__list-item {
  align-items: center;
  display: flex;
  height: 100%;
  list-style: none;
}

@media (max-width: 1024px) {
  .register-page {
    flex-direction: column;
  }
  /* Hide the navigation menu on smaller screens */
  .register-page__page-navigation {
    display: none;
  }
  /* Remove left margin when nav is hidden */
  .register-page__body-text {
    margin-left: 0;
    width: 100%;
  }
  /* Reduce min-height for last section */
  .register-page__body-text > .register-page__section:last-child {
    min-height: auto;
    padding-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .register-page__intro-content {
    font-size: 1.25rem;
  }
  .register-page__section[data-nav-section] {
    scroll-margin-top: 80px;
  }
}
@media (max-width: 480px) {
  .register-page__intro-content {
    font-size: 1rem;
  }
}
.mypagecard {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 3px 6px rgba(33, 42, 190, 0.12);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
  max-width: 1200px;
  padding: 2rem 1rem 1.5rem 2rem;
  position: relative;
  width: 100%;
}

.mypagecard__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.mypagecard__body {
  align-items: center;
  display: flex;
  font: normal 1.125rem/160% graphik, Arial, Helvetica, sans-serif;
}

.mypagecard__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 1.5rem -0.5rem 0;
}

.mypagecard__action-buttons,
.mypagecard__main-actions {
  align-items: center;
  display: flex;
}

.applicationcard-status--grey10 {
  background-color: #f6f7fc;
}

.applicationcard-status {
  border-radius: 0.25rem;
  color: #262045;
  flex-shrink: 0;
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.5;
  margin: 0;
  padding: 0.25rem;
  width: 12rem;
}

.applicationcard-status, .variablelistcard__goto-button {
  align-items: center;
  display: flex;
}

.icon-arrow-up--white {
  background: url(../img/icons/arrow/icon_up--white.svg) no-repeat center/1.5rem;
}

/* Listeseksjonen rundt .mypagecard-kortene. Brukes allerede av frontend
   (Features/MineSoknader/Views/ApplicationListComponent.razor og
   Features/Dialog samtalelista), men manglet regel i pakken — kortlistene fikk
   derfor ingen bunnluft og overskriften ingen typografi. Portert uendret fra
   dagens helsedata.no (dist/mypage.css). */
.mypage-cardlist {
  padding-bottom: 6rem;
}

.mypage-cardlist:last-of-type {
  padding-bottom: 0;
}

.mypage-cardlist__heading {
  font-size: 2rem;
  margin: 0 0 2rem;
}

@media all and (max-width: 767px) {
  .mypage-cardlist__heading {
    font-size: 1.5rem;
  }
}
/* Knapperaden over søknadslista («Opprett ny søknad» i
   Features/MineSoknader/Views/ApplicationListComponent.razor). Flyter til høyre
   slik at første listeoverskrift står på samme linje; på mobil ligger knappen
   i full bredde over lista. */
.mypage-cardlist__actions {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

@media all and (max-width: 767px) {
  .mypage-cardlist__actions {
    float: none;
    margin: 0 0 1.5rem;
  }
  .mypage-cardlist__actions .hd-button-square {
    justify-content: center;
    width: 100%;
  }
}
.mypage-cardlist__intro {
  align-items: center;
  border-radius: 0.5rem;
  display: flex;
  margin: 0;
}

.mypage-cardlist__intro--alert {
  background-color: #fff3cd;
  padding: 2.5rem 6rem 2.5rem 2rem;
}

.mypage-cardlist__intro * {
  margin: 0;
}

@media (max-width: 1280px) {
  .datasource-explorer__container {
    flex-wrap: nowrap;
    padding-left: 40px;
    padding-right: 40px;
  }
}
.datasource-explorer__container {
  padding-left: 24px;
  padding-right: 48px;
  width: 100%;
}

@media (max-width: 1024px) {
  .datasource-explorer__container, .datasource-explorer__loader {
    padding: 48px 0;
  }
}
.datasource-explorer__container, .datasource-explorer__loader {
  display: flex;
  justify-content: center;
  padding: 64px 0;
}

@media (max-width: 1280px) {
  .datasource-explorer__filter-search {
    width: 392px;
  }
}
.datasource-explorer__filter-search {
  padding-right: 32px;
  width: 456px;
}

.searchbox__freetext-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px 0;
  position: relative;
}

.datasource-filters {
  display: block;
}

.datasource-filters .filters--facets-container {
  border-right: 2px solid #e6e6ed;
  margin-right: -32px;
}

.datasource-filters .filters--facets-container .filter-list-container {
  margin-bottom: 32px;
  margin-left: 0;
  margin-right: 32px;
}

.filter-list-header {
  align-items: center;
  display: flex;
  height: 32px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hd-checkbox {
  cursor: pointer;
  display: inline-flex;
  width: 100%;
}

input[type=checkbox i] {
  background-color: initial;
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}

.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__input {
  display: none;
}

.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__icon {
  display: inline-block;
  height: 1.375rem;
  width: 1.375rem;
}

.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__text {
  line-height: 1.375rem;
}

.hd-checkbox__text {
  align-self: center;
  margin-left: 16px;
}

@media (max-width: 2881px) {
  .datasource-filters .filters--facets-container .facet {
    font: normal 0.875rem/160% graphik, Arial, Helvetica, sans-serif;
  }
}
.datasource-filters .filters--facets-container .facet__name {
  margin-right: 8px;
}

.datasource-filters .filters--facets-container .facet__count {
  color: #51547b;
}

.filter-list__collapse-toggle {
  bottom: 6px;
  font-size: 0.875rem;
  padding: 0 16px;
  position: relative;
  right: 10px;
}

.button-square--ghost-blue {
  border: none;
  color: #521eff;
}

.hd-button-square {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0.5rem;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  padding: 0.8125rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.hd-checkbox {
  cursor: pointer;
  display: inline-flex;
  width: 100%;
}

.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__icon:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzcyNzE5NiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNCAyMGgxNlY0SDR6TTIgMy45OUMyIDIuODkyIDIuODk4IDIgMy45OSAyaDE2LjAyQzIxLjEwOCAyIDIyIDIuODk4IDIyIDMuOTl2MTYuMDJjMCAxLjA5OS0uODk4IDEuOTktMS45OSAxLjk5SDMuOTlDMi44OTIgMjIgMiAyMS4xMDIgMiAyMC4wMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 1.375rem;
  border: none;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 1.375rem;
  width: 1.375rem;
}

.button-square--ghost-blue {
  color: rgb(82, 30, 255);
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
}

.blazorcomponentpage .contentwrapper > :not(.contentwrapper--alert):first-child,
.blazorcomponentpage .contentwrapper > .contentwrapper--alert + * {
  padding-top: 62px;
}

.attachment-section {
  margin-top: 48px;
}
.attachment-section .headline {
  color: rgb(81, 84, 123);
}
.attachment-section + .attachment-section {
  margin-top: 64px;
}
.attachment-section__heading {
  display: flex;
  align-items: center;
}
.attachment-section__heading h3,
.attachment-section__heading h4 {
  margin: 0;
}
.attachment-section__heading .information-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255) !important;
  border-radius: 35px;
}
.attachment-section__heading .hd-button__round {
  margin-left: 16px;
}
.attachment-section__emptystate {
  text-align: center;
}

.attachment-text-chapter {
  margin: 32px 0 8px;
}

.attachment-text-subchapter {
  margin: 16px 0;
}

.attachment-application-section,
.attachment-application-section--subsection {
  margin-top: 8px;
}

.attachment__date-sent {
  text-transform: capitalize;
  margin: 24px 0 16px;
}

.attachment-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 16px 12px 0;
  align-items: center;
  border-top: 1px solid rgb(230, 230, 237);
}
.attachment-item:last-of-type {
  border-bottom: 1px solid rgb(230, 230, 237);
}
.attachment-item:hover {
  background-color: rgb(255, 255, 255);
}
.attachment-item .hd-button__round {
  margin: 0;
}
.attachment-item .icon-download-pdf, .attachment-item__buttons {
  align-self: flex-start;
}
@media all and (max-width: 1024px) {
  .attachment-item {
    align-items: start;
  }
}
@media all and (max-width: 767px) {
  .attachment-item {
    flex-direction: column;
    padding: 12px 4px;
  }
}
.attachment-item__information {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .attachment-item__information {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__information {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.attachment-item__information__text {
  display: block;
  width: inherit;
  margin-right: 16px;
}
.attachment-item__information-attachment-name {
  max-width: calc(100% - 64px);
  word-break: break-word;
}
.attachment-item__information-message-thread {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .attachment-item__information-message-thread {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__information-message-thread {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.attachment-item__information-message-thread {
  line-height: 1.25rem;
  margin: 4px 0 0 0;
}
.attachment-item__information__time-from {
  display: flex;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .attachment-item__information__time-from {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__information__time-from {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__information__time-from {
    flex-direction: column;
    margin-top: 4px;
  }
}
.attachment-item__information__timestamp.timestamp {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .attachment-item__information__timestamp.timestamp {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__information__timestamp.timestamp {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.attachment-item__information__name {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 767px) {
  .attachment-item__icon {
    display: none;
  }
}
.attachment-item__mobile-icon {
  display: none;
  flex-shrink: 0;
}
@media all and (max-width: 767px) {
  .attachment-item__mobile-icon {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
  }
}
.attachment-item__buttons {
  display: flex;
  margin-left: 16px;
}
@media all and (max-width: 767px) {
  .attachment-item__buttons {
    width: 100%;
    margin: 8px 0 0;
  }
}
@media all and (max-width: 1024px) {
  .attachment-item__buttons .button-square--ghost {
    border: 1px solid rgba(35, 23, 94, 0.08);
  }
  .attachment-item__buttons .button-square--ghost:first-of-type {
    margin: 0 4px;
  }
}
@media all and (max-width: 767px) {
  .attachment-item__buttons .button-square--ghost {
    width: 100%;
  }
}

@media all and (max-width: 767px) {
  .attachment-item-dot {
    display: none;
  }
}

.alert-blocks {
  display: none;
  min-height: 60px;
  width: 100%;
  word-break: break-word;
  position: relative;
  line-height: 150%;
  font-size: 1rem;
  color: rgb(38, 32, 69);
  padding: 16px;
  padding-right: 80px;
  border-radius: 8px;
}
.alert-blocks:first-of-type {
  margin-bottom: 4px;
}
.alert-blocks__content {
  display: inline-flex;
}
.alert-blocks__content .icon {
  flex-shrink: 0;
  margin-right: 16px;
}
.alert-blocks--text {
  align-self: center;
}
.alert-blocks--infogrey {
  background-color: rgb(230, 230, 237);
}
.alert-blocks--infoblue {
  background-color: rgb(228, 238, 255);
}
.alert-blocks--warningyellow {
  background-color: rgb(255, 243, 205);
}
.alert-blocks--errorred {
  background-color: rgb(255, 224, 224);
}

.alert-blocks .button--close-x {
  height: 2.5rem;
  width: 2.5rem;
  top: 10px;
  right: 8px;
}
.alert-blocks .button--close-x:hover, .alert-blocks .button--close-x:focus {
  background-color: rgb(255, 255, 255);
}

.alert-blocks .editor-content p {
  margin: 0;
}

.guidance-intro-card-block {
  border-radius: 0.5rem;
  border: 1px solid rgb(230, 230, 237);
  padding: 8px 16px 16px;
  width: 100%;
  transition: 0.2s all;
  text-decoration: none;
  color: rgb(38, 32, 69);
  background-color: rgb(255, 255, 255);
  margin-top: 32px;
}
.guidance-intro-card-block:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
  color: rgb(38, 32, 69);
  border: 1px solid rgb(230, 230, 237);
}
@media all and (max-width: 1024px) {
  .guidance-intro-card-block {
    max-width: 40rem;
    margin: 0 auto;
  }
}
@media all and (max-width: 767px) {
  .guidance-intro-card-block {
    padding: 1rem;
  }
}
.guidance-intro-card-block:hover {
  transform: translate3d(0, -0.25rem, 0);
  color: rgb(38, 32, 69);
}
.guidance-intro-card-block:hover:not(:focus) {
  box-shadow: 0px 11px 22px rgba(33, 42, 190, 0.12);
}
.guidance-intro-card-block img {
  width: 3.5rem;
}
.guidance-intro-card-block h2 {
  flex-grow: 1;
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .guidance-intro-card-block h2 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .guidance-intro-card-block h2 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.guidance-intro-card-block h2 {
  hyphens: auto;
}
.guidance-intro-card-block__content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  word-break: break-word;
}
.guidance-intro-card-block__content .illustration {
  background-size: 4rem;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  margin-right: 16px;
  margin-top: 16px;
}
.guidance-intro-card-block__content p {
  margin-top: 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
.guidance-intro-card-block__content__header {
  width: 100%;
}
@media all and (max-width: 1024px) {
  .guidance-intro-card-block__content__header {
    display: flex;
    align-items: center;
  }
  .guidance-intro-card-block__content__header img {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}
@media all and (max-width: 767px) {
  .guidance-intro-card-block__content__header {
    flex-wrap: wrap;
  }
}

.hero-section {
  padding: 120px 0 140px 0;
}
.hero-section .editor-content p:first-of-type {
  margin-top: 0;
}
.onbaordingpage .hero-section {
  padding: 80px 0;
}
.hero-section--no-padding {
  padding: 0;
}
.onbaordingpage .hero-section--no-padding {
  padding: 0;
}
.onbaordingpage .hero-section--small-padding {
  padding: 32px 0;
}
.hero-section--bg-img {
  padding: 0;
}
.onbaordingpage .hero-section--bg-img {
  padding: 0;
}
.hero-section--white {
  background-color: rgb(255, 255, 255);
}
.hero-section--white .hero-section-content__heading,
.hero-section--white .hero-section-content__text {
  color: rgb(38, 32, 69);
}
.hero-section--grey10 {
  background-color: rgb(246, 247, 252);
}
.hero-section--grey10 .hero-section-content__heading,
.hero-section--grey10 .hero-section-content__text {
  color: rgb(38, 32, 69);
}
.hero-section--dark {
  background-color: rgb(38, 32, 69);
}
.hero-section--dark .hero-section-content__heading,
.hero-section--dark .hero-section-content__text,
.hero-section--dark .hero-section-content__onboarding-button {
  color: rgb(255, 255, 255);
}
.hero-section--dark .hero-section-content__onboarding-button:hover .icon {
  background: url(../img/icons/icon_link.svg) no-repeat center/1.5rem;
}
.hero-section--dark .hero-section-content__onboarding-button:focus {
  color: rgb(255, 255, 255);
}
.hero-section--dark .hero-section-content__onboarding-button:focus:hover {
  color: rgb(38, 32, 69);
}
.hero-section__bg-image {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-section__bg-image--contain {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-section__bg-image {
  padding: 120px 0 140px 0;
}
.onbaordingpage .hero-section__bg-image {
  padding: 80px 0;
}
.hero-section__bg-image--top {
  background-position: center top;
}
.hero-section__bg-image--bottom {
  background-position: center-bottom;
}
.hero-section-content-container {
  display: flex;
  width: 100%;
}
.hero-section-content-container--right {
  justify-content: flex-end;
}
@media all and (max-width: 1024px) {
  .hero-section-content-container {
    flex-direction: column;
  }
}
.hero-section-media {
  flex: 1;
  position: relative;
}
.hero-section-media__video, .hero-section-media__img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.hero-section-media__video--external {
  border: none;
}
.hero-section-media__video--internal {
  border: none;
  outline: none;
}
.hero-section-media__video--internal:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.hero-section-media__video-container {
  position: relative;
  cursor: pointer;
}
.hero-section-media__video-container:hover .play-button {
  background-color: rgb(50, 55, 141);
  border: none;
}
.hero-section-media__video-container:hover .play-button__icon {
  background-color: rgb(255, 255, 255);
}
.hero-section-media .play-button {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
}
.hero-section-content {
  flex: 1;
  margin-right: 40px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
}
.hero-section-content__button-container {
  margin-top: 40px;
}
.hero-section-content__button-container a:first-of-type {
  margin-right: 16px;
}
.hero-section-content--half, .hero-section-content--halfright {
  max-width: 50%;
}
.hero-section-content-container--reverse .hero-section-content {
  margin-left: 40px;
}
@media all and (max-width: 1024px) {
  .hero-section-content-container--reverse .hero-section-content {
    margin: 0;
  }
}
.hero-section-content__heading {
  margin: 0 0 40px;
}
@media all and (max-width: 1024px) {
  .hero-section-content {
    margin: 0;
    max-width: 800px;
  }
}

.inline-block {
  padding: 40px;
  margin: 40px 0 64px;
}
@media all and (max-width: 767px) {
  .inline-block {
    padding: 24px;
  }
}
.inline-block__header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.inline-block__header h3,
.inline-block__header h4 {
  font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .inline-block__header h3,
  .inline-block__header h4 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .inline-block__header h3,
  .inline-block__header h4 {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.inline-block__header h3,
.inline-block__header h4 {
  margin: 0 !important;
}
.inline-block__header img {
  margin-right: 16px;
}
.inline-block__header .icon {
  margin-right: 16px;
  height: 32px;
  width: 32px;
  background-size: 32px;
}
.inline-block--tip {
  background-color: rgb(78, 87, 241);
  color: rgb(255, 255, 255);
  border-radius: 8px;
}
@media all and (max-width: 767px) {
  .inline-block--tip {
    margin-left: 0;
    margin-right: 0;
  }
}
.inline-block--tip h3,
.inline-block--tip h4,
.inline-block--tip a,
.inline-block--tip a:hover,
.inline-block--tip a:focus,
.inline-block--tip a[target=_blank],
.inline-block--tip a[target=_blank]:hover,
.inline-block--tip a[target=_blank]:focus {
  color: rgb(255, 255, 255);
}
.inline-block--tip h3:after,
.inline-block--tip h4:after,
.inline-block--tip a:after,
.inline-block--tip a:hover:after,
.inline-block--tip a:focus:after,
.inline-block--tip a[target=_blank]:after,
.inline-block--tip a[target=_blank]:hover:after,
.inline-block--tip a[target=_blank]:focus:after {
  background-image: url(../img/icons/icon_link--white.svg);
}
.inline-block--tip a:focus,
.inline-block--tip a[target=_blank]:focus {
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
}
.inline-block--info {
  background-color: rgb(239, 240, 250);
}
.inline-block--warning {
  background-color: rgb(255, 243, 205);
}

.logout-block {
  width: 50%;
  margin: 0 auto;
}

.teaser-list {
  width: 100%;
}
.teaser-list h2 {
  text-align: left;
  margin: 16px 0;
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .teaser-list h2 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .teaser-list h2 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 1024px) {
  .teaser-list h2 {
    margin: 0;
  }
}
.teaser-list > div {
  margin: 0 -1rem 0 -1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.teaser-list > div .block {
  width: 33.3333%;
  padding: 0 16px;
  display: flex;
}
@media all and (max-width: 1024px) {
  .teaser-list > div .block {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.teaser-list--bg-dark .teaser-block, .page-section--bg-dark .teaser-list .teaser-block {
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
}
.teaser-list--bg-dark .teaser-block h2, .page-section--bg-dark .teaser-list .teaser-block h2 {
  color: rgb(38, 32, 69);
  text-align: left;
}
.teaser-list--bg-grey .teaser-block, .page-section--bg-grey .teaser-list .teaser-block {
  background-color: rgb(255, 255, 255);
}

.teaserlistblock .page-section .content-container .teaser-list + div .infobox__information-blocks {
  margin-top: 120px;
  margin-bottom: 0;
  padding: 0;
}

.teaserlistblock .page-section .content-container .infobox__information-blocks {
  margin-bottom: 120px;
  margin-top: 0;
  padding: 0;
}

.teaser-block {
  border-radius: 0.5rem;
  padding: 32px;
  width: 100%;
  transition: 0.2s all;
  display: flex;
  text-decoration: none;
  color: rgb(38, 32, 69);
  position: relative;
  border: 1px solid #ddd;
}
.teaser-block:focus {
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
  outline: none;
  color: rgb(38, 32, 69);
  border: 1px solid #ddd;
}
@media all and (max-width: 1024px) {
  .teaser-block {
    max-width: 40rem;
    margin: 0 auto;
  }
}
@media all and (max-width: 767px) {
  .teaser-block {
    padding: 1rem;
  }
}
.teaser-block:hover {
  transform: translate3d(0, -0.25rem, 0);
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
}
.teaser-block:hover:not(:focus) {
  box-shadow: 0px 11px 22px rgba(33, 42, 190, 0.12);
}
.teaser-block img {
  width: 3.5rem;
}
.teaser-block span {
  background-color: rgb(82, 30, 255);
  color: rgb(255, 255, 255);
  padding: 8px 32px;
  border-radius: 0.5rem;
  margin-top: 1rem;
  display: inline-block;
  text-align: center;
}
@media all and (max-width: 1024px) {
  .teaser-block span {
    display: none;
  }
}
.teaser-block h2 {
  flex-grow: 1;
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .teaser-block h2 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .teaser-block h2 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.teaser-block__content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: column;
  word-break: break-word;
}
.teaser-block__content .editor-content {
  flex-grow: 1;
}
.teaser-block__content p {
  margin-top: 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
.teaser-block__content__header {
  width: 100%;
}
@media all and (max-width: 1024px) {
  .teaser-block__content__header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .teaser-block__content__header img {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}
@media all and (max-width: 767px) {
  .teaser-block__content__header {
    flex-wrap: wrap;
  }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
}
.avatar--mini {
  height: 24px;
  width: 24px;
  min-width: 24px;
}
.avatar__initials {
  font-size: 1.125rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  line-height: 1;
}

.caption {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .caption {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .caption {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.caption {
  color: rgb(81, 84, 123);
}
.caption.margin--none {
  margin: 0;
}
.caption.margin--bottom {
  margin: 0 0 16px 0;
}
.caption.margin--top {
  margin: 16px 0 0 0;
}

.dot-divider {
  display: list-item;
  list-style-position: inside;
  margin-left: 16px;
  margin-right: -4px;
  position: relative;
  top: -1px;
}

.card {
  border-radius: 5px;
  margin-bottom: 40px;
  position: relative;
  background: rgb(255, 255, 255);
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 24px;
  color: rgb(38, 32, 69);
  text-decoration: none;
  cursor: pointer;
}
.card:hover {
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.card:hover:focus-within {
  box-shadow: 0 0 0 2px rgb(66, 139, 255), 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.card__heading {
  margin: 0 80px 0 0;
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .card__heading {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .card__heading {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.card__heading {
  overflow-wrap: break-word;
  margin-bottom: 24px;
}
.card__footer {
  display: flex;
}

.choice-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-card {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 0 40px;
  padding: 40px 32px;
  text-align: left;
  text-decoration: none;
  color: rgb(38, 32, 69);
  background-color: rgb(246, 247, 252);
  border: 1px solid rgb(239, 240, 250);
  border-radius: 8px;
}
.choice-card:first-of-type {
  margin-top: 16px;
}
.choice-card::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 16px);
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 8px;
  background: url(../img/icons/keyboard-arrow/icon_right.svg) no-repeat center/1.5rem;
}
.choice-card:hover {
  background-color: rgb(239, 240, 250);
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.choice-card:hover::after {
  background-image: url(../img/icons/keyboard-arrow/icon_right--blue.svg);
}
.choice-card:focus {
  outline: none;
  border: 1px solid rgb(239, 240, 250);
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.choice-card__title {
  display: block;
  margin: 0 0 16px;
  color: rgb(82, 30, 255);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.6;
}
.choice-card__text, .choice-card .choice-card__text {
  display: block;
  width: calc(100% - 40px);
  margin: 0;
  white-space: normal;
  color: rgb(38, 32, 69);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.choice-card--disabled, .choice-card[aria-disabled=true] {
  cursor: not-allowed;
}
.choice-card--disabled:hover, .choice-card[aria-disabled=true]:hover {
  background-color: rgb(246, 247, 252);
  box-shadow: none;
}
.choice-card--disabled:hover::after, .choice-card[aria-disabled=true]:hover::after {
  background-image: url(../img/icons/keyboard-arrow/icon_right.svg);
}
@media all and (max-width: 767px) {
  .choice-card {
    margin-bottom: 24px;
    padding: 24px;
  }
  .choice-card::after {
    background-image: url(../img/icons/keyboard-arrow/icon_right--blue.svg);
  }
  .choice-card__text, .choice-card .choice-card__text {
    font-size: 0.875rem;
  }
}

.dropdown-choicepicker {
  padding: 0;
  border-radius: 0.5rem;
  background-color: rgb(38, 32, 69);
  list-style: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 28px;
}
.dropdown-choicepicker--right {
  right: 0;
}
.dropdown-choicepicker--left {
  left: 0;
}
.dropdown-choicepicker__item {
  color: rgb(255, 255, 255);
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}
.dropdown-choicepicker__item:hover {
  background-color: rgb(50, 55, 141);
}
.dropdown-choicepicker__item:first-of-type {
  padding-top: 24px;
  border-radius: 8px 8px 0 0;
}
.dropdown-choicepicker__item:last-of-type {
  padding-bottom: 24px;
  border-radius: 0 0 8px 8px;
}
.dropdown-choicepicker__item .form-control__label {
  word-break: normal;
}

.collapsebox {
  position: relative;
  height: auto;
  border-radius: 8px;
}
.collapsebox--grey10 {
  background-color: rgb(246, 247, 252);
  color: rgb(38, 32, 69);
}
.collapsebox--dark {
  background-color: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}
.collapsebox--dark h1,
.collapsebox--dark h2,
.collapsebox--dark h3,
.collapsebox--dark h4,
.collapsebox--dark h5,
.collapsebox--dark h6 {
  color: rgb(255, 255, 255);
}
.collapsebox__content {
  padding: 0 24px 24px;
}
.collapsebox--collapsed .collapsebox__content {
  padding-bottom: 0;
}
.collapsebox__button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
}
.collapsebox__motion-icon {
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-badge {
  flex-shrink: 0;
  display: inline-flex;
  border: none;
  height: 24px;
  min-width: 24px;
  line-height: calc(24px - 2px);
  font-size: 0.875rem;
  border-radius: 15px;
  justify-content: center;
}
.counter-badge--accent {
  background-color: rgb(155, 233, 243);
}
.counter-badge--accent .counter-badge__number {
  color: rgb(38, 32, 69);
}
.counter-badge--error-dark {
  background-color: rgb(180, 0, 44);
}
.counter-badge--error-dark .counter-badge__number {
  color: rgb(255, 255, 255);
}
.counter-badge__number {
  padding: 2px 4px 0;
  margin: 0 2px;
  display: inline-flex;
}

.badge-label {
  font-size: 1rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.badge-label--left {
  margin-right: 8px;
}
.badge-label--right {
  margin-left: 8px;
}

.datasourcecard:focus-within {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.datasourcecard:focus-within .datasourcecard__link {
  text-decoration: none;
  box-shadow: none;
}

.datasource-explorer .datasourcecard {
  width: 944px;
  max-width: 944px;
}
@media all and (max-width: 1679px) {
  .datasource-explorer .datasourcecard {
    width: 750px;
  }
}
@media all and (max-width: 1439px) {
  .datasource-explorer .datasourcecard {
    width: 600px;
  }
}
@media all and (max-width: 1280px) {
  .datasource-explorer .datasourcecard {
    width: 550px;
  }
}
@media all and (max-width: 1024px) {
  .datasource-explorer .datasourcecard {
    padding: 32px 24px;
    width: 100%;
  }
}
@media all and (max-width: 767px) {
  .datasource-explorer .datasourcecard {
    padding: 32px 16px;
  }
  .datasource-explorer .datasourcecard__icon-datasource-page {
    padding-left: 16px;
  }
}

.datasourcecard {
  border-radius: 5px;
  margin-bottom: 40px;
  position: relative;
  background: rgb(255, 255, 255);
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 24px;
  color: rgb(38, 32, 69);
  text-decoration: none;
  cursor: pointer;
}
.datasourcecard__icon-datasource-page {
  position: absolute;
  right: 32px;
  background: url(../img/icons/keyboard-arrow/icon_right.svg) center no-repeat;
  width: 24px;
  height: 24px;
}
@media all and (max-width: 1024px) {
  .datasourcecard__icon-datasource-page {
    right: 24px;
  }
}
body.registerownerpage .datasourcecard {
  margin-bottom: 40px;
}
.datasourcecard:hover {
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.datasourcecard:hover .datasourcecard__icon-datasource-page {
  background: url(../img/icons/keyboard-arrow/icon_right--blue.svg) center no-repeat;
}
.datasourcecard:hover:focus-within {
  box-shadow: 0 0 0 2px rgb(66, 139, 255), 0px 6px 11px rgba(33, 42, 190, 0.18);
}
.datasourcecard__link {
  text-decoration: none;
  color: rgb(38, 32, 69);
}
.datasourcecard__link:hover {
  color: rgb(38, 32, 69);
}
.datasourcecard__link:focus {
  text-decoration: underline;
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.datasourcecard-list {
  padding: 0;
}
.datasourcecard-list__item {
  position: relative;
  display: block;
  list-style: none;
}
.datasourcecard-list__item-loading {
  opacity: 0.6;
}
.datasourcecard__heading {
  margin: 0 40px 0 0;
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .datasourcecard__heading {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .datasourcecard__heading {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.datasourcecard__heading {
  overflow-wrap: break-word;
}
.datasourcecard__info {
  color: rgb(81, 84, 123);
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .datasourcecard__info {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .datasourcecard__info {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.datasourcecard__info {
  margin: 16px 0 20px;
}
.datasourcecard__info--no-bottom-margin {
  margin-bottom: 0;
}
@media all and (max-width: 1280px) {
  .datasourcecard__info {
    display: flex;
    flex-direction: column;
  }
}
.datasourcecard__info--text {
  display: inline-block;
}
.datasourcecard__info .dot {
  height: 5px;
  width: 5px;
  background-color: rgb(81, 84, 123);
  border-radius: 50%;
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 2px;
}
@media all and (max-width: 1280px) {
  .datasourcecard__info .dot {
    margin-left: 0;
    margin-bottom: 0;
    position: relative;
    bottom: 2.5px;
  }
}
.datasourcecard__intro p,
.datasourcecard__intro strong,
.datasourcecard__intro p strong {
  margin: 0;
  display: block;
  line-height: 150%;
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .datasourcecard__intro p,
  .datasourcecard__intro strong,
  .datasourcecard__intro p strong {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .datasourcecard__intro p,
  .datasourcecard__intro strong,
  .datasourcecard__intro p strong {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.datasourcecard__intro p,
.datasourcecard__intro strong,
.datasourcecard__intro p strong {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.datasourcecard__intro .editor-content {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .datasourcecard__intro .editor-content {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .datasourcecard__intro .editor-content {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.datasourcecard__intro .editor-content strong {
  font-family: "graphik", Arial, Helvetica, sans-serif;
  display: block;
}

.emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 48px;
  text-align: center;
  word-break: break-word;
}
.emptystate__title {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .emptystate__title {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .emptystate__title {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.emptystate__title {
  margin: 24px 0;
}
.emptystate__subTitle {
  margin: 0;
  margin-bottom: 24px;
}
.emptystate__body {
  margin: auto;
  margin-bottom: 32px;
}
.emptystate__body > p {
  margin: 0;
}
.emptystate__body ul {
  padding: 0;
  list-style-position: inside;
  width: max-content;
  max-width: 100%;
}
.emptystate__body li {
  text-align: left;
  margin-bottom: 8px;
}

.emptystate__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 48px;
  text-align: center;
  word-break: break-word;
}
.emptystate__search__heading {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .emptystate__search__heading {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .emptystate__search__heading {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.emptystate__search__heading {
  margin: 24px 0;
}
.emptystate__search__heading > p {
  margin: 0;
}
.emptystate__search__information-text {
  margin: 0;
  margin-bottom: 24px;
}

.export-variablelist-list {
  padding: 0;
  list-style: none;
  margin-top: -4px;
}
@media all and (max-width: 767px) {
  .export-variablelist-list {
    margin: 0 8px;
  }
}
.export-variablelist-list__item {
  margin-top: 8px;
}
.export-variablelist-list__item:first-of-type {
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .export-variablelist-list__item {
    margin-left: -16px;
  }
}
.export-variablelist-list__label {
  background-color: rgb(246, 247, 252);
  padding: 16px 32px;
  margin-bottom: 32px;
  border-radius: 8px;
  width: 100%;
  display: block;
}
@media all and (max-width: 767px) {
  .export-variablelist-list__label {
    padding: 1rem 1rem;
  }
}
.export-variablelist-list__label:last-of-type {
  margin-bottom: 24px;
}
.export-variablelist-list__label-text {
  margin-top: 0;
  margin-left: 16px;
  font-size: 1.125rem;
  line-height: 150%;
}
@media all and (max-width: 767px) {
  .export-variablelist-list__label-text {
    margin-left: 0;
  }
}
.export-variablelist-list__information {
  margin: 0 0 28px;
}
.export-variablelist-list__information > p {
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .export-variablelist-list__information {
    margin: 0 8px;
  }
}
.export-variablelist-list__button {
  border: none;
  color: rgb(82, 30, 255);
  white-space: normal;
  text-align: left;
}
.export-variablelist-list__button > .icon {
  flex-shrink: 0;
}
.export-variablelist-list__button:focus {
  color: rgb(82, 30, 255);
}
.export-variablelist-list__button:hover {
  background-color: rgb(230, 230, 237);
  color: rgb(82, 30, 255);
}

.feedback-component {
  width: 100%;
  padding: 10rem 0;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}
.feedback-component--grey .feedback-component {
  background-color: rgb(246, 247, 252);
}
.feedback-component .illustration {
  background-size: 124px;
  width: 124px;
  height: 124px;
}
.feedback-component .illustration-thumbs-up {
  margin-bottom: 16px;
}
.feedback-component__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-width: 600px;
  width: 100%;
  text-align: center;
}
@media all and (max-width: 767px) {
  .feedback-component__content-wrapper {
    padding: 0 16px;
  }
}
.feedback-component__content-wrapper h2.headline {
  margin: 16px 0 24px 0;
}
.feedback-component__buttons {
  margin-top: 32px;
}
@media all and (max-width: 767px) {
  .feedback-component__buttons {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }
  .feedback-component__buttons > button {
    margin: 0rem;
  }
  .feedback-component__buttons > button:first-child {
    margin-top: 16px;
  }
}
.feedback-component__answer-button {
  min-width: 3.75rem;
}

.feedback__introtext {
  margin: 0;
  text-align: center;
}
.feedback__textarea {
  background: rgb(255, 255, 255);
  border-radius: 8px;
  border: 1px solid rgb(187, 184, 201);
  width: 100%;
  padding: 16px;
  margin-top: 24px;
  resize: vertical;
}
.feedback__textarea--warning {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
  box-sizing: border-box;
  border-radius: 8px;
}
.feedback__textarea--warning:focus {
  border: 1px solid rgb(180, 0, 44) !important;
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
}
.feedback__textarea-wrapper {
  width: 100%;
}
.feedback__infotext {
  color: rgb(81, 84, 123);
}
.feedback__infotext > p {
  margin: 0;
}
.feedback__contact-infotext > :first-child {
  margin: 0;
}
.feedback__contact-infotext > p {
  margin: 8px 0 16px 0;
  color: rgb(81, 84, 123);
  font-family: "graphik", Arial, Helvetica, sans-serif;
}
.feedback__contact-form {
  padding-bottom: 4px;
}
.feedback__contact-form__nested-fieldset {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 32px;
  border-left: 4px solid rgb(187, 184, 201);
  margin-top: 16px;
  margin-left: 16px;
}
.feedback__contact-form__label {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  line-height: 1;
  font-size: 1.125rem;
  margin: 8px 0;
}
.feedback__contact-form__input {
  border-radius: 8px;
  border: 1px solid rgb(187, 184, 201);
  letter-spacing: 0;
  text-align: left;
  height: 56px;
  padding-left: 16px;
  margin: 0;
}
.feedback__contact-form__input.--error {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
}
.feedback__contact-form__input.--error:focus {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44), 0 0 0 4px rgb(66, 139, 255);
}

.hd-checkbox {
  width: 100%;
  display: inline-flex;
  cursor: pointer;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--dark-grey.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 2rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on.svg);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__text {
  line-height: 2rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__icon {
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--dark-grey.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 1.375rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on.svg);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__text {
  line-height: 1.375rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--dark-grey.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 1.5rem;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on.svg);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__text {
  line-height: 1.5rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--white.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 2rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on--white.svg);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__text {
  line-height: 2rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__icon {
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--white.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 1.375rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on--white.svg);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__text {
  line-height: 1.375rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__icon::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/checkbox/icon_checkbox-off--white.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 1.5rem;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__input {
  display: none;
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__input:checked + .hd-checkbox__icon::before {
  background-image: url(../img/icons/checkbox/icon_checkbox-on--white.svg);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__input:focus-visible + .hd-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}
.hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__text {
  line-height: 1.5rem;
}
.hd-checkbox__text {
  margin-left: 16px;
  align-self: center;
}

.form-control {
  width: 100%;
  display: inline-flex;
  cursor: pointer;
}
.form-control__label {
  margin-left: 16px;
  word-break: break-word;
  align-self: center;
}
.form-control__radio-icon, .form-control__radio-icon--dark {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}
.form-control__radio-icon::before, .form-control__radio-icon--dark::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url(../img/icons/radio/icon_off.svg) no-repeat 50%/2rem;
  cursor: pointer;
  border: none;
}
.form-control__radio-icon--dark::before {
  background: url(../img/icons/radio/icon_off--dark-grey.svg) no-repeat 50%/2rem;
}
.form-control__radio--small {
  height: 1.5rem;
  width: 1.5rem;
}
.form-control__radio--small::before {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
}
.form-control__input {
  position: absolute;
  opacity: 0;
  height: 1px;
}
.form-control__input:checked + .form-control__radio-icon::before,
.form-control__input:checked + .form-control__radio-icon--dark::before {
  background-image: url(../img/icons/radio/icon_on.svg);
}
.form-control__input:checked + .form-control__radio-icon--light::before {
  background-image: url(../img/icons/radio/icon_on--light.svg);
}

.form-control__input:focus-visible + .form-control__radio-icon,
.form-control__input:focus-visible + .form-control__radio-icon--dark {
  outline: none;
  box-shadow: 0 0 0 4px rgb(66, 139, 255);
}

.form-element__label {
  display: inline-block;
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .form-element__label {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .form-element__label {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.form-element__label {
  color: rgb(38, 32, 69);
  margin-top: 16px;
  margin-bottom: 8px;
}
.form-element__label + .form-element__sublabel {
  margin-top: -8px;
}
.form-element__sublabel {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .form-element__sublabel {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .form-element__sublabel {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.form-element__sublabel {
  margin-bottom: 8px;
}
.form-element__caption {
  margin: 0 0 8px;
  color: rgb(81, 84, 123);
}
@media all and (max-width: 767px) {
  .form-element__caption {
    font-size: 0.875rem;
  }
}
.form-element__caption > p {
  margin: 0;
}

.form-group {
  margin-top: 48px;
}
.form-group .form-element {
  margin-bottom: 16px;
}
.form-group__heading h1,
.form-group__heading h2,
.form-group__heading h3,
.form-group__heading h4,
.form-group__heading h5,
.form-group__heading h6 {
  margin: 0;
}
.form-group__heading {
  margin-bottom: 32px;
}
.form-group__intro {
  margin-bottom: 64px;
}
.form-group__error {
  background-color: rgb(255, 224, 224);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  position: relative;
}
.form-group__error-text {
  max-width: calc(100% - 80px);
}
.form-group__error .icon-info {
  margin-right: 16px;
}
.form-group__error .button--close-x {
  position: absolute;
  top: 5px;
  right: 5px;
}
.form-group__footer {
  margin-top: 48px;
  display: flex;
}
@media all and (max-width: 767px) {
  .form-group__footer {
    flex-direction: column;
    justify-content: flex-start;
  }
  .form-group__footer button {
    width: 100%;
  }
}
.form-group__footer--right {
  justify-content: flex-end;
}
.form-group__footer--space-between {
  justify-content: space-between;
}
.form-group__footer--center {
  justify-content: center;
}
.form-group__footer button {
  margin-right: 16px;
}
.form-group__footer button:last-of-type {
  margin-right: 0;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.form-fieldset__legend {
  padding: 0;
  margin: 0;
}

.headline {
  margin: 16px 0;
}
.headline.margin--none {
  margin: 0;
}
.headline.margin--top {
  margin: 16px 0 0 0;
}
.headline.margin--bottom {
  margin: 0 0 16px 0;
}
.headline.margin--left {
  margin: 0 0 0 16px;
}
.headline.margin--right {
  margin: 0 16px 0 0;
}

.hero {
  font: normal 4.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .hero {
    font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .hero {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-1 {
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-1 {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-1 {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-2 {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-2 {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-2 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-3 {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-3 {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-3 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-4 {
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-4 {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-4 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-5 {
  font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-5 {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-5 {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-6 {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-6 {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-6 {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-7 {
  font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .headline-7 {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .headline-7 {
    font: normal 0.875rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.headline-xxs {
  font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}

.headline-s {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}

.help-infobox {
  background-color: rgb(230, 230, 237);
  border-radius: 8px;
  overflow: hidden;
  transition: height 0.2s;
  word-break: break-word;
}
.help-infobox__text {
  visibility: hidden;
  margin: 0;
  padding: 16px 16px;
}
.help-infobox__text > p {
  margin: 0;
}
.help-infobox--visible {
  transition: margin-top 0.1s, height 0.2s;
  transition-timing-function: ease-in;
  margin: 4px 0 16px 0;
}
.help-infobox--visible .help-infobox__text {
  visibility: visible;
}

.input-container {
  position: relative;
  width: 100%;
}
.input-container > .icon {
  position: absolute;
  left: 1rem;
  top: calc(50% - 0.75rem);
}

input[type=text],
input[type=tel],
input[type=email],
input[type=search],
select,
textarea {
  color: rgb(38, 32, 69);
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
}
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=search]::placeholder,
select::placeholder,
textarea::placeholder {
  color: rgb(81, 84, 123);
}

.input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.input__field[type=email]:focus, .input__field[type=tel]:focus, .input__field[type=text]:focus, .input__field:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
  width: 100%;
}
@media all and (max-width: 767px) {
  .input__field[type=email], .input__field[type=tel], .input__field[type=text], .input__field {
    font-size: 0.875rem;
  }
}
.form-element--error .input__field[type=email], .form-element--error .input__field[type=tel], .form-element--error .input__field[type=text], .form-element--error .input__field {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
  border-radius: 8px;
  outline: none;
}
.form-element--error .input__field[type=email]:focus, .form-element--error .input__field[type=tel]:focus, .form-element--error .input__field[type=text]:focus, .form-element--error .input__field:focus {
  border: 1px solid rgb(180, 0, 44);
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.input__field[type=email]:focus, .input__field[type=tel]:focus, .input__field[type=text]:focus, .input__field:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.input__field[type=email]:disabled, .input__field[type=tel]:disabled, .input__field[type=text]:disabled, .input__field:disabled {
  background: rgb(239, 240, 250);
  opacity: 0.75;
}
.input__field[type=email]::placeholder, .input__field[type=tel]::placeholder, .input__field[type=text]::placeholder, .input__field::placeholder {
  color: rgb(81, 84, 123);
}
.input__container {
  display: flex;
  flex-direction: column;
}
.input__container--readonly > p {
  margin: 0 0 8px 0;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .input__container--readonly > p {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .input__container--readonly > p {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.input__text {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .input__text {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .input__text {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.input__text {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.input__text:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.input__text {
  line-height: 56px;
  padding-left: 16px;
  width: 100%;
  height: 3.5rem;
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.input__text.--error {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
  border-radius: 8px;
  outline: none;
}
.input__text.--error:focus {
  border: 1px solid rgb(180, 0, 44);
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.input__information {
  display: flex;
}
.input__information--without-counter {
  justify-content: flex-start;
  flex-direction: row;
}
.input__information--with-counter {
  justify-content: space-between;
  flex-direction: row-reverse;
}
.input__information__counter {
  color: rgb(81, 84, 123);
  line-height: 32px;
  margin: 0;
  font-size: 1.125rem;
}
.input__validation--error {
  margin-top: 8px;
  display: inline-flex;
}
.input__validation--error > .icon {
  flex-shrink: 0;
}
.input__validation--error > p {
  margin: 0;
}
.input--icon .input__field {
  padding-left: 3.25rem;
}
.input-search__cancel-button, .input-search__submit-button {
  position: absolute;
  top: calc(50% - 1.75rem);
}
.input-search__submit-button {
  right: 0;
}
.input-search__cancel-button {
  right: 56px;
}

.input__field--small[type=email], .input__field--small[type=tel], .input__field--small[type=text] {
  width: 12.75rem;
}

.input__string-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  transition: all 0.1s ease-in-out;
}
.input__string-container--error {
  background-color: #f3dfdf;
  border-left: 4px solid rgb(180, 0, 44);
  padding: 16px;
  width: 100%;
  transition: all 0.1s ease-in-out;
}
.input__string-container.disabled {
  opacity: 0.5;
}

.input__string-label {
  display: inline-block;
  color: rgb(38, 32, 69);
  font-size: 1.125rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  margin-bottom: 8px;
}

.input__string-input {
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  height: 56px;
  line-height: 56px;
  padding-left: 16px;
  margin: 0;
}
.input__string-input:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
  border: 1px solid rgb(66, 139, 255);
}
.input__string-input--error {
  border: 2px solid rgb(180, 0, 44);
}

.input__string-input[type=text i] {
  line-height: 57px;
}

.languageselector {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
.languageselector > a {
  padding: 0 0.5rem;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  border-radius: 0;
  height: auto;
}
.languageselector > a:hover {
  background-color: rgb(42, 45, 80);
  color: rgb(255, 255, 255);
}
.languageselector-button {
  max-width: 18rem;
  height: 100%;
  padding: 0 0.5rem;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  border-radius: 0;
}
.languageselector-button:hover {
  background-color: rgb(50, 55, 141);
}
.languageselector-button .icon {
  flex-shrink: 0;
}
.languageselector__name {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "graphik", Arial, Helvetica, sans-serif;
}
.languageselector-list {
  list-style: none;
  padding: 0;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
  position: absolute;
  width: 300px;
  margin: 0;
  top: 3.25rem;
  right: 0;
  overflow: hidden;
}
.languageselector-list__item {
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
  position: relative;
}
.languageselector-list__item:first-of-type .languageselector-list__link {
  border-radius: 8px 8px 0 0;
}
.languageselector-list__item:last-of-type .languageselector-list__link {
  border-radius: 0 0 8px 8px;
}
.languageselector-list__item:hover {
  background-color: rgb(246, 247, 252);
}
.languageselector-list__link {
  display: inline-flex;
  flex-direction: column;
  padding: 1.5rem 1rem 0rem 3rem;
  height: 100%;
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  border-radius: 0;
  align-items: baseline;
}
.languageselector-list__link > .icon {
  left: 1rem;
  top: 1rem;
  position: absolute;
}
.languageselector-list__link > .unavailable-language {
  top: 2.5rem;
}
.languageselector-list__link:hover {
  color: rgb(38, 32, 69);
}
.languageselector-list__link:focus {
  color: rgb(38, 32, 69);
  box-shadow: inset 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}
.languageselector-list__link--disabled {
  cursor: default;
}
.languageselector-list__content {
  position: relative;
  top: -0.5rem;
  margin-bottom: -0.5rem;
  text-align: left;
}
.languageselector-list__information {
  font-size: 0.875rem;
  color: rgb(81, 84, 123);
  margin: 0;
  white-space: break-spaces;
  margin-bottom: 1rem;
}
.languageselector-list__language {
  margin: 0;
}
.languageselector-list__language--active-language {
  margin: 0;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.languageselector-list__homepage {
  border: none;
  background: inherit;
  color: rgb(50, 55, 141);
  font-size: 0.875rem;
  padding: 0;
}
.languageselector-list__homepage:hover {
  cursor: pointer;
}

.languageselector-mobile .hd-button {
  border-radius: 0;
}
.languageselector-mobile-button {
  padding: 2.25rem 2.25rem;
  font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
  white-space: nowrap;
  border: none;
  background: none;
  display: flex;
  cursor: pointer;
  width: 100%;
  justify-content: flex-start;
}
.languageselector-mobile-button:hover {
  background-color: rgb(50, 55, 141);
}
.languageselector-mobile-button:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
}
.languageselector-mobile-button::-moz-focus-inner {
  border: 0;
}
.languageselector-mobile-button--open {
  background-color: rgb(50, 55, 141);
}
.languageselector-mobile-list {
  color: rgb(255, 255, 255);
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: rgb(81, 84, 123);
}
.languageselector-mobile-list:hover, .languageselector-mobile-list:focus {
  color: rgb(255, 255, 255);
}
.languageselector-mobile-list__item:hover {
  background-color: rgb(50, 55, 141);
}
.languageselector-mobile-list__content {
  position: relative;
  margin: 1rem 0rem;
  text-align: left;
}
.languageselector-mobile-list__link {
  width: 100%;
  height: auto;
  padding: 0rem 0rem 0rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.languageselector-mobile-list__link > .icon {
  left: 2.5rem;
  top: 1rem;
  position: absolute;
}
.languageselector-mobile-list__link:hover, .languageselector-mobile-list__link:focus {
  color: rgb(255, 255, 255);
}
.languageselector-mobile-list__link > .unavailable-language {
  top: 3rem;
}
.languageselector-mobile-list__link--disabled {
  cursor: default;
}
.languageselector-mobile-list__link:focus {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
}
.languageselector-mobile-list__language {
  position: relative;
  margin: 0;
  font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
}
.languageselector-mobile-list__information {
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  margin: 0;
  margin-top: 0.5rem;
  white-space: break-spaces;
}
.languageselector-mobile-list__homepage {
  border: none;
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: underline;
  background: inherit;
  padding: 0;
  margin: 0.5rem 0rem 1rem 0rem;
}
.languageselector-mobile-list__homepage:hover {
  cursor: pointer;
}
.languageselector-mobile-list__homepage:hover, .languageselector-mobile-list__homepage:focus {
  color: rgb(255, 255, 255);
}
.languageselector-mobile-list__homepage:focus {
  outline: 1px solid rgb(255, 255, 255);
}

.lead {
  font: normal 1.5rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .lead {
    font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .lead {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.lead {
  margin: 0 0 80px 0;
}
.lead.margin--none {
  margin: 0;
}

/* Munin-utforskeren — variabelutforskeren og kildeutforskeren som helsedata.no bygger inn.

   Komponenten er en Blazor RCL (`Fhi.Munin.Explorer`) som med vilje ikke sender med CSS: den
   skriver klassenavn og lar stilarket kle dem. De navnene deler seg i to, og bare den ene halvdelen
   bor her.

   Den andre halvdelen låner den fra vertssiden — `variable-data-list`, `variable-dataitem-*`,
   `variable-meta*` og de seks `variable-explorer-*` som helsedatas egen variabelside eier. Dem
   ligger i helsedatas `variables.css`, ikke i Stiler, og de er med vilje ikke kopiert hit: så
   lenge komponenten står på en side som laster den bundlen, arver den utseendet derfra gratis.

   Denne fila er den halvdelen som er Munins egen: 44 navn under `munin-explorer`-prefikset som
   ingen andre definerer. De hadde ingen plass å bo før nå — de har bare eksistert i utforskerens
   eget eksempelstilark, som ingen faktisk vert laster — så en hvilken som helst vert utenom
   helsedata.no tegnet dem i nakne nettleserstandarder. Munin er den verten.

   `munin`-prefikset er valgt fordi `variable-explorer` er helsedatas navnerom, ikke vårt.
   Stiler DEFINERER det ikke - `_searchbox.scss` viser bare til `.variable-explorer-header` som
   en forelder-selektor - men navnet er deres å definere, og det er definert ingen steder i dette
   repoet. Det komponenten finner opp selv hører hjemme under et prefiks vi eier.

   Verdiene er Stilers egne — reglene ble skrevet mot en kopi av paletten og er her satt tilbake
   på `$primary`, `$grey*`, `$dark` og `$focus` slik at de følger med når Stiler endrer seg.

   DELT I PARTIALS 2026-08-21. Fila var 1326 linjer - størst av 113 i repoet, tre ganger deres
   største side. `components/buttons/` viser husmønsteret for akkurat dette, så den følger det.

   REKKEFØLGEN UNDER ER BETYDNINGSBÆRENDE, og det er hele grunnen til at denne kommentaren står
   her. `_columns` skal lastes SIST: kolonnebreddene er spesifikke for oppsettet vårt, og reglene
   i `_results` er generelle for familien. Kommer de generelle etterpå, tar de bredden tilbake.
   Da fila var én lang fil var det synlig i rekkefølgen; nå er det denne lista som holder det.

   Samme felle traff kodeverk-tabellen en gang: den lå tidligere i fila enn `_results`, med samme
   spesifisitet, og fikk stilltiende statistikktabellens luftige celleluft og sebrastriper. Den er
   nå løftet i spesifisitet i stedet for å stole på rekkefølge - se `_kodeverk`. */
/* ---- ghost-knappene inne i Munin-utforskeren ----

   `.button-square--ghost` har `border: none` og ingen bakgrunn før `:hover`. Teksten er $dark mot
   sidebunnen (14.28:1) og fullt lesbar, så dette er ikke et brudd på WCAG 1.4.11 — det som mangler
   er affordansen: ingenting sier «trykkbar» før musepekeren er over, og en leser uten mus får
   dermed ingen beskjed i det hele tatt. En tester leste den som «just a bold text» uten å inspisere
   noe.

   EGEN PARTIAL, IKKE EN ENDRING I `buttons/_squarebutton.scss`. Ghost-formen er helsedatas og
   brukes langt utenfor Munin; nedslagsfeltet for en endring der er ikke talt opp, og det er ikke
   vår avgjørelse å ta på deres vegne. Skulle helsedata siden gi ghost en kant, skal denne fila
   slettes og Munin arve den formen.

   $grey60 måles mot sidebunnen $grey10 (#f6f7fc) og ikke mot hvitt — utforskeren står på
   sidebunnen, ikke på et kort, som er samme regel nivålinjene følger. Det gir 6.76:1, godt over
   kravet på 3:1. $grey30 (1.24:1) og $grey40 (1.94:1) faller.

   BARE HANDLINGENE, IKKE VALGENE. `:not([aria-pressed])` er skillet, og det står allerede i
   markupen: utforskeren setter `aria-pressed` på alt som er en av/på-tilstand — fasettverdiene,
   sidestørrelsene, kolonnevelgeren, nivålinjer og lagreknappen — og på ingenting som bare utfører
   noe. De tilstandene tegnes flate når de er av og fylte (`--secondary`) når de er på, og en kant
   rundt av-tilstanden visker ut nettopp den forskjellen: hver ufylte fasettverdi ble en rute, og
   panelet leste som en vegg av knapper. Første forsøk dekket hele komponenten og gjorde det.
   (Avgjort 2. september.)

   Tilbake-lenkene treffes ikke: de bruker `--ghost-blue`, som er et eget klassenavn.

   Bryteren treffes heller ikke, og `.hd-button-square` er alt som skal til: Nivålinjer skriver
   `munin-explorer-switch` alene. Da bryteren kom, fikk regelen et `:not(.munin-explorer-switch)` mot
   at den skulle beholde husets knappeklasser, og det gjør den ikke — leddet er derfor fjernet. */
.munin-explorer .hd-button-square.button-square--ghost:not([aria-pressed]) {
  border: 1px solid rgb(81, 84, 123);
}

/* Den inaktive tilstanden tegnes fra aria-disabled, ikke fra `disabled` — knappene tas aldri av
   siden, av fokusgrunnen filterpanelet og pagineringen allerede beskriver. Teksten er da $grey40,
   og en full $grey60-kant rundt grå tekst ville lest som en knapp som fortsatt virker. */
.munin-explorer .hd-button-square.button-square--ghost:not([aria-pressed])[aria-disabled=true] {
  border-color: rgb(187, 184, 201);
}

/* ---- den fylte knappen: «Prøv igjen» ----

   Den bærer `--secondary` og gjøres inert med aria-disabled og aldri med `disabled` — en disabled
   knapp kan ikke holde fokus, så et trykk ville kastet leseren til <body>.
   Uten en regel her ser inert nøyaktig ut som virksom.

   BAKGRUNNEN MÅ MED. Den gamle regelen lå i `_results` og satte bare `color: $grey60` — men
   `--secondary` har $grey60 som BAKGRUNN, så den fargen på den flaten er 1:1 og usynlig.

   $grey60 på $grey30 måler 5.82:1, godt over 4.5:1 for brødtekst, og er paret husets egen
   `--secondary[disabled]` allerede bruker i `buttons/_squarebutton.scss`. Virksom tilstand er
   $white på $grey60 (7.23:1), så de to skiller seg i både flate og tekst.

   :hover og :focus står med fordi `--secondary` setter begge selv: uten dem ville en inert knapp
   blitt mørk under musepekeren og lest som virksom igjen.

   «Tøm søket» delte denne regelen da den òg var en fylt `--secondary`-knapp under feltet. Den er
   nå et kryss inne i feltet uten flate, og har sin egen blokk under; en $grey30-flate på et blankt
   glyf ville tegnet en grå rute rundt krysset. */
.munin-explorer-retry[aria-disabled=true] {
  background-color: rgb(230, 230, 237);
  color: rgb(81, 84, 123);
  cursor: default;
}

.munin-explorer-retry[aria-disabled=true]:hover,
.munin-explorer-retry[aria-disabled=true]:focus {
  background-color: rgb(230, 230, 237);
  color: rgb(81, 84, 123);
}

/* ---- «Tøm søket»: krysset inne i søkefeltet ----

   Utforskeren tegner det som et bart `munin-explorer-search__clear` uten en eneste Stiler-klasse:
   `hd-button-square` er 2.75rem høy og får ikke plass i feltet. Uten regelen her faller krysset ut
   av feltet og legger seg på egen linje som en nettleserstandard-knapp — målt på helsedata-montasjen:
   `position: static`, x = feltets venstrekant, og beholderen vokste fra 72px til 93px.

   TALLENE ER STILERS EGNE, IKKE eksempelvertens. Feltet reserverer `padding-right: 104px`, og
   `&-submit-button` står på `right: $ws-s` og måler 60.6px — altså er «Søk» sin venstrekant 68.6px
   inn. $ws-xxxxl (72px) legger krysset i glipa mellom de to, og $ws-l (32px) bredt ender det på
   104px: klar av «Søk», og akkurat innenfor reservasjonen, så det aldri legger seg over teksten
   leseren har skrevet. En overlegg-variant ble avvist tidligere nettopp fordi den
   bar ORDET «Tøm søket» og var bredere enn hele reservasjonen.

   Samme absoluttform som `&-submit-button` ved siden av, så de to sitter på samme midtlinje. */
.munin-explorer-search__clear {
  position: absolute;
  top: 50%;
  right: 72px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  /* $dark og ikke $grey60: et glyf er en ikke-tekstlig kontroll som skylder 3:1 etter WCAG 1.4.11,
     og det som betyr «lukk» skal ikke lese som «avslått» mens det virker. */
  color: rgb(38, 32, 69);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.munin-explorer-search__clear:hover {
  background-color: rgb(230, 230, 237);
}

/* Fortsatt fokuserbart og fortsatt hoverbart, fordi det er aria-disabled og ikke disabled — så
   begge må slutte å se ut som invitasjoner mens et trykk ikke gjør noe. */
.munin-explorer-search__clear[aria-disabled=true] {
  color: rgb(81, 84, 123);
  cursor: default;
}

.munin-explorer-search__clear[aria-disabled=true]:hover {
  background-color: transparent;
}

/* Innoverringen framfor husets vanlige: krysset står inne i et felt som har sin egen fokuskant, og
   en utoverring av vanlig form ville lest som feltets. */
.munin-explorer-search__clear:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
  outline: none;
}

/* ---- nedtrekkslistene: «Velg liste» og «Variabler per side» ----

   Helsedata har ingen egen <select> å låne. Målt på test-1-opt 2026-10-16 (forsida, Kelda, Runa,
   priser, kontakt, søknadsveiledningen, om, personvern): den eneste <select> på de sidene er
   utforskerens egen sidestørrelse, og resten er menyer — språk, innlogging og Kolonner-folden.
   `components/_select.scss` kler react-select (`.hd-react-select__control`), som er en egen
   kombinasjonsboks og ikke treffer et ekte <select>. Derfor får de to listene samme drakt som
   knappene de står ved, Kolonner og Last ned: $grey60-kanten, husets knappehøyde, radius og skrift.
   ADO 122467. Bakgrunn, pil og luft settes nå i `_page` for alle tre
   <select>; her står skriften, hoveren, fokusen og den inerte tilstanden.

   (0,1,1) med elementet i selektoren, så den slår den globale `select` i `components/_input`
   (0,0,1) på skriftstørrelsen; `:focus` under er (0,2,1) mot husets `select:focus` (0,1,1).
   Bredden er ikke satt her: «Velg liste» har sin 20rem i `_page`, og sidestørrelsen er så bred
   som valget. */
.munin-explorer select {
  appearance: none;
  height: 2.75rem;
  max-width: 100%;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid rgb(81, 84, 123);
  border-radius: 0.5rem;
  background: transparent url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat right 0.5rem center/1.5rem;
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.munin-explorer select:hover:not([aria-disabled=true]) {
  background-color: rgb(230, 230, 237);
}

/* Fokus som husets felt (`text-input-focus`, som den globale `select:focus`): 1px $focus-kant og
   1px skygge, for mus og tastatur likt. Chrome regner et musetrykk på <select> som :focus-visible,
   så knappens store ring kom på hvert klikk (valgt 19.10). */
.munin-explorer select:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}

/* Sidestørrelsen gjøres inert med aria-disabled mens en side hentes, aldri med `disabled`; samme
   lysere kant som ghost-knappene får i den tilstanden. */
.munin-explorer select[aria-disabled=true] {
  border-color: rgb(187, 184, 201);
  cursor: default;
}

/* ---- the filter panel ----

   The filter panel is built from `<details>`, `<summary>`, nested `<ul>`s and a checkbox inside its
   own `<label>` rather than from class names, because Stiler has no accordion and no tree — and a
   name it has never heard of renders as a raw browser default, which is the failure the whole
   approach exists to avoid. The package emits `munin-explorer-filters` as a handle for exactly
   this and styles nothing itself, so the dressing has to come from here.

   A consumer on an older Stiler still gets a working panel — the nesting carries the hierarchy
   on its own. What it loses is the indentation that makes a delkilde look like it sits under
   its kilde. Scoped to the panel so none
   of it can reach the results list, which is helsedata's own variable-data-list. */
.munin-explorer-filters {
  margin-bottom: 24px;
  padding: 8px;
}

/* Verktøyrada i panelet: Utvid alle, Skjul alle, Nivålinjer og Ikoner. Egen beholder og ikke fire
   kontroller i vanlig inline-flyt — der talte den siste knappens etterslepende margin med i linja,
   og rada brøt opp så snart det utvidede panelet fikk rullefelt.

   RADA BRYTER TIL NESTE LINJE. Den ble fire kontroller bred da Ikoner kom til, og bare de to
   foldeknappene tar `min-width: 0` rett nedenfor — bryterne beholder sin egen bredde. Uten
   `flex-wrap` hadde rada ingen annen utveg enn å krympe de to som kan krympe: målt på riggen ved
   320px sto Utvid alle og Skjul alle på 11,7 × 114 px, med etiketten brutt til omtrent ett tegn i
   linja. Merknaden her sa før at ombrekking var uønsket fordi knappene da krymper. Det er omvendt:
   de krymper nettopp når rada ikke får bryte. */
.munin-explorer-filters__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.munin-explorer-filters__toolbar > .hd-button-square {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tre like innrammede knapper i verktøyrada, der bare den ene er en tilstand.

   Målt på riggen bar Utvid alle, Skjul alle og Nivålinjer alle `hd-button-square` og sto på 105,4 x
   44, 101,8 x 44 og 104,3 x 44 — tre nesten like brede primærknapper øverst i en 384px fasettkolonne,
   og hver av dem høyere enn fasettradene under. Formen sier «hovedhandling» om husholdning, og den
   sier det tre ganger.

   SAMME AVVEINING SOM SØKEFELTET under her, og med samme utfall: husets fulle kontrollhøyde er målt
   mot en side, ikke mot et smalt panel, og 44px blir en tredje overskrift i denne kolonna. Der ble
   34px målt mot fasettradene; her blir det 24px for teksthandlingene og 32px for bryteren.

   `[aria-pressed]` SKILLER DEM, ikke rekkefølgen. Nivålinjer er den eneste av de tre som bærer en
   tilstand, og pakken skriver attributtet på den og bare den. `:nth-child` ville knyttet stilen til
   plasseringa i markupen, som denne saken ikke eier. Kelda har bare paret og ingen Nivålinjer, så
   der treffer teksthandlingsregelen begge og bryterregelen ingen — ingen tom plass etter en knapp
   som ikke er der, fordi `gap` bare måler mellom barn som finnes.

   UNDERSTREKET I LENKEFARGE, nøyaktig som sidetallene i `_pagination`: tar man ramma fra en knapp,
   er det ingen affordans igjen med mindre teksten selv bærer en. Samme begrunnelse og samme to
   erklæringer, så de to stedene i komponenten som gjør dette gjør det likt.

   `min-height` og ikke `height`: 24px er trykkmålet (WCAG 2.5.5), ikke en høyde å tegne. Blekket er
   14px tekst; boksen rundt er større enn blekket med vilje. Bryter etiketten over to linjer på en
   lang oversettelse, vokser boksen i stedet for å klippe.

   `[aria-pressed]` ER HELE SKILLET, OG DET HOLDER ALENE.
   Da bryteren kom, fikk regelen et `:not(.munin-explorer-switch)` i tillegg, mot at Nivålinjer skulle
   beholde `hd-button-square` ved siden av det nye bryternavnet. Det gjør den ikke: bryteren skriver
   `munin-explorer-switch` alene, så selektoren her kan ikke treffe den — den forlanger
   `.hd-button-square`, og de to navnene står aldri på samme element. Leddet var altså ikke inert,
   det var uoppnåelig, og et `:not()` i et delt stilark leser som en levende betingelse. */
.munin-explorer-filters__toolbar > .hd-button-square:not([aria-pressed]) {
  background: none;
  color: rgb(50, 55, 141);
  font-size: 0.875rem;
  height: auto;
  min-height: 1.5rem;
  padding: 4px 8px;
  border-radius: 0;
  text-decoration: underline;
}

/* Ghost-kanten i `_buttons.scss` må vike for nettopp disse to, og bare for dem. Den regelen gir
   hver ghost-knapp som IKKE er en tilstand en $grey60-kant, fordi en ghost uten kant ikke sier
   «trykkbar» før musepekeren er over — en tester leste den som «just a bold text». Teksthandlingene
   her mister ramma, men ikke affordansen: de bytter den mot lenkefarge og understreking, som sier
   det samme uten mus og uten ramme. Affordansen er flyttet, ikke fjernet.

   (0,5,0) mot regelens (0,4,0). SPESIFISITET OG IKKE LASTEREKKEFØLGE: `_buttons` lastes riktignok
   før `_filters`, så en uavgjort ville falt riktig vei i dag, men `munin-explorer.scss` sier selv
   at rekkefølge er feil bærebjelke for dette — kodeverk-tabellen ble løftet i spesifisitet av
   nettopp den grunnen. Målt: uten denne regelen sto teksthandlingene med 1px $grey60 rundt seg.

   `border-color` og ikke `border: none`: den gjennomsiktige kanten holder boksen like stor, så
   trykkmålet ikke krymper med to piksler når ramma slukner. */
.munin-explorer .munin-explorer-filters__toolbar > .hd-button-square.button-square--ghost:not([aria-pressed]) {
  border-color: transparent;
}

.munin-explorer-filters__toolbar > .hd-button-square:not([aria-pressed]):hover {
  background: none;
  color: rgb(82, 30, 255);
}

.munin-explorer .munin-explorer-filters .hd-button-square:focus-visible,
.munin-explorer .munin-explorer-filters .munin-explorer-switch:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

/* Nivålinjer er en bryter, og skal ha form som en. Pilleforma er hele endringen: en 999px radius
   leser som noe som står PÅ eller AV, der 8px-ruta leser som noe man TRYKKER. Ingen ny komponent —
   dette er den samme `hd-button-square` pakken alt skriver, med en annen radius og et mindre mål.

   FYLLET ER URØRT. Den trykte flaten ble målt og valgt tidligere — $grey60 med hvit tekst, målt
   7,23:1 — og pakken bytter selv mellom `--secondary` og `--ghost` etter tilstanden. Regelen her
   rører verken farge eller bakgrunn, så begge tilstandene beholder kontrasten de ble målt med.

   Prikken er den andre kjennetegnet, og den er der for en kjent felle: knappen hadde før et
   `aria-pressed` som var satt riktig uten at noe ble tegnet. Fylt prikk = på, hul prikk = av, i
   `currentColor` så den følger tekstfargen i begge tilstandene og ikke innfører en tredje verdi å
   måle. En leser som ikke skiller de to flatene har fortsatt prikken igjen. */
.munin-explorer-filters__toolbar > .hd-button-square[aria-pressed] {
  border-radius: 999px;
  font-size: 0.875rem;
  gap: 8px;
  height: auto;
  min-height: 2rem;
  padding: 4px 12px;
}

.munin-explorer-filters__toolbar > .hd-button-square[aria-pressed]::before {
  background: currentColor;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 10px;
  width: 10px;
}

.munin-explorer-filters__toolbar > .hd-button-square[aria-pressed=false]::before {
  background: none;
}

/* Fritekstsøket inne i en fasett. Panelets eneste feltregel til nå var
   `li > label input[type="checkbox"]`, så et tekstfelt her sto i nettleserens egen form.

   HUSETS `.input`/`.searchbox__freetext` BLE VURDERT OG VALGT BORT. Den formen er
   `text-input-styles` + `text-input-border`, 3.5rem høy med `line-height: 56px` — 56px er
   SIDESØKETS høyde. Inne i et 384px filterpanel, over fasettrader på 32px, blir et 56px felt en
   tredje overskrift. `.searchbox__freetext` bærer dessuten `padding-right: 104px` til en absolutt
   plassert «Søk»-knapp som ikke finnes her. 34px er målt mot fasettradene i stedet.

   Bredden er panelets: 294x34 ved 1440 og 1024, 952x34 ved 1000, 712x34 ved 760 og 342x34 ved 390.
   Feltet er 34px høyt i hele spennet og strekker seg med panelet, så det trenger ingen
   mediespørring.

   `input` FORAN KLASSENAVNET, og det er ikke pynt. Den globale lista i `components/_input.scss`
   er `input[type=search]` — (0,1,1) — og et bart klassenavn er (0,1,0). Uten elementet vant den
   globale `font-size: 1.125rem` over de målte 0.875rem; målt på localhost 2026-09-09: 18px før,
   14px etter. Med elementet står de likt, og `_input` lastes før `munin-explorer` i `main.scss`,
   så denne vinner. Fokusregelen `input[type=search]:focus` er (0,2,1) og skal fortsatt vinne over
   kanten her — feltet beholder husets fokusbehandling.

   KANTEN ER $grey50 OG IKKE $grey30. Målt på riggen 2026-09-11 mot feltets
   egen hvite flate: $grey30 ga 1,24:1, og mot panelbunnen $grey10 bak det 1,16:1 — begge langt
   under de 3:1 WCAG 1.4.11 krever av en kontrollavgrensning. $grey50 gir 4,65:1 og 4,34:1. Samme
   verdi som kildeutforskerens felt under, målt og levert først — de to er den
   samme kontrollen i det samme panelet og skal ikke ha hver sin kant.

   Ingen hovertilstand tegner en annen kant her: målt med pekeren på feltet står den på de samme
   1,24:1 før byttet, så det er én verdi å flytte og ikke to. */
input.munin-explorer-filters__search {
  border: 1px solid rgb(114, 113, 150);
  border-radius: 7px;
  font-size: 0.875rem;
  height: 34px;
  margin: 8px 0 4px;
  padding: 0 10px;
  width: 100%;
}

/* `type="search"` gir WebKit og Blink et innebygd kryss inne i feltet. Utforskeren tegner sitt
   eget, og uten denne står det to tømmekontroller i et 294px bredt felt. Huset nuller allerede
   `.searchbox__freetext::-ms-clear`, men ikke denne. */
input.munin-explorer-filters__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* KILDEUTFORSKERENS fasettsøk er det SAMME feltet uten klassenavnet.
   Variabelutforskeren skriver `munin-explorer-filters__search`; kildeutforskeren skriver et bart
   `<input type="text">` med skjult `<label>`, bevisst — et element hver nettleser tegner, i stedet
   for et navn Stiler aldri har hørt om. Uten en regel her falt feltet ned på nettleserens egen
   form: målt på riggen 2026-09-11, 222x26px i et 384px panel, `border: 2px inset #767676`, radius
   0, `font-size: 18px` fra den globale lista i `_input.scss`, margin 0.

   SELEKTOREN ER ELEMENT + ATTRIBUTT UNDER PANELKLASSEN — (0,2,1). Den globale `input[type=text]`
   er (0,1,1), så denne vinner uten `!important`, og den kan ikke nå et eneste felt utenfor
   `.munin-explorer-filters`: vertens egne skjemaer står utenfor panelet.

   FORMEN ER FASETTSØKETS, ikke en ny: samme høyde, radius, margin og skriftstørrelse som
   `__search` over, fordi de to er den samme kontrollen i det samme panelet.

   KANTEN ER $grey50 OG IKKE $grey30. Målt mot feltets egen hvite flate: $grey30 gir 1,24:1,
   $grey50 gir 4,65:1, mot 3:1 som WCAG 1.4.11 krever av en kontrollavgrensning.

   `__search` over sto igjen på $grey30 da denne regelen ble lagt, og er flyttet i en egen
   endring. De to feltene bærer nå den samme kanten, som de skal — ingenting her
   avhenger av at de er ulike. */
.munin-explorer-filters input[type=text] {
  border: 1px solid rgb(114, 113, 150);
  border-radius: 7px;
  font-size: 0.875rem;
  height: 34px;
  margin: 8px 0 4px;
  padding: 0 10px;
  width: 100%;
}

/* DATAPERIODE-FASETTENS to datofelt gjør den samme handelen og hadde ingen regel i det hele tatt.
   `input[type=date]` står ikke i den globale lista i `_input.scss` — bare text, tel, email og
   search — så de sto på nettleserens egen form HELT ut: målt på riggen 2026-09-11, 116,3x21,3px,
   `13.3333px monospace`, svart tekst, `border: 2px inset #767676`, midt i et Graphik-panel.

   `display: block` er det som skiller dem fra feltet over: etikettene «Fra og med» og «Til og med»
   er husets `.form-element__label` og står i innlinjeflyt, så uten den sto etikett og felt om
   hverandre — målt før: felt 1 på x=120 etter etiketten si, felt 2 på x=24 på ei linje for seg. Et
   blokkelement gir hvert felt si egen linje under si egen etikett uten å røre husets klasse. */
.munin-explorer-filters input[type=date] {
  border: 1px solid rgb(114, 113, 150);
  border-radius: 7px;
  color: rgb(38, 32, 69);
  display: block;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  height: 34px;
  margin: 4px 0 8px;
  padding: 0 10px;
  width: 100%;
}

/* FOKUS MÅ SKRIVES UT HER, og det er ikke pynt. Husets `input[type=text]:focus` er (0,2,1), akkurat
   som regelen over, og `_input` lastes FØR `munin-explorer` i `main.scss` — så kanten her ville
   vunnet også mens feltet har fokus, og fokusmarkeringa vært borte. Datofeltet har aldri hatt noen.
   Denne er (0,3,1) og henter husets egen `text-input-focus`, så begge feltene får nøyaktig den
   markeringa resten av helsedata.no bruker: 1px $focus kant og 1px $focus boksskygge. */
.munin-explorer-filters input[type=text]:focus,
.munin-explorer-filters input[type=date]:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}

.munin-explorer-filters details {
  border-bottom: 1px solid rgb(230, 230, 237);
  padding: 8px 0;
}

/* Fasettlinja: tittel til venstre, markør til høyre, alt på én linje. Overskrifta er et
   blokkelement — Kelda tegner en <h4>, fordi et fasettpanel navigeres på overskrift — og i vanlig
   flyt tvinger den nettleserens egen markør ned på ei linje for seg selv. Målt på localhost
   2026-09-09: utregnet `display: list-item`, summary 54,4px høy, overskrifta 28,8px under markøren.

   MARKØREN MÅ TEGNES PÅ NYTT, og det er ikke et valg. `display: flex` gjør elementet til noe annet
   enn et listeelement, og da lager ingen nettleser `::marker` i det hele tatt — målt i
   variabelutforskeren rett før og etter: etiketten flyttet fra 19,1px til 0px fra summaryens
   venstrekant, og trekanten var borte. Markøren skal dessuten stå til HØYRE for tittelen, og en
   `::marker` står alltid først.

   GLYFEN ER NÅ HUSETS CHEVRON OG IKKE NETTLESERENS TREKANT. Markøren tegnes
   med de samme to SVG-ene kildetabellen folder ut med — `keyboard-arrow/icon_down.svg` foldet og
   `icon_up.svg` åpen — i det samme målet, 16x16. Trekanten og chevronen var to ULIKE MEKANISMER, en
   tellestil mot vår egen tegning, så ingen størrelse kunne gjort den ene om til den andre. Målt på
   rigg: markøren var 11,9x28,8px før og er 16x16px etter, mot tabellens 16x16.

   `content: ""` ER LIKE TOM SOM `/ ""` VAR, og det er hele grunnen til at det står slik. Generert
   innhold TELLER MED i det tilgjengelige navnet: målt mot Chromes tilgjengelighetstre 2026-09-09 med
   en prøvestreng het alle ti fasettene i variabelutforskeren «Type datakilde ZZZSENTINEL». En tom
   streng legger ingenting til, og et bakgrunnsbilde kommer aldri inn i navnet. `content: ">"` ville
   gjort begge deler galt. Målt etter byttet: fasettene heter fortsatt «Kildetype» og «Kategori».

   `display: flex` over står fortsatt der, og den er grunnen til at det ikke blir to markører:
   et flekselement lager ingen `::marker`, så nettleserens egen trekant er borte uansett innhold her.

   IKKE SKOPET TIL KELDA. Selektoren deles med variabelutforskerens panel med vilje
   (KildeSearch.razor:214-216). Der sto markøren allerede på linje med etiketten, men til venstre;
   etter dette står de to panelene likt. Kolonnevelgeren er også en <details>, men ligger i
   `.munin-explorer-header` og nås ikke herfra. */
.munin-explorer-filters summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 4px 8px;
}

.munin-explorer-filters summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  background: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/1rem;
}

.munin-explorer-filters details[open] > summary::after {
  background-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

.munin-explorer-filters summary .form-element__label {
  margin-top: 0;
  cursor: pointer;
}

.munin-explorer-filters summary:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

.munin-explorer-filters ul {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: none;
}

.munin-explorer-filters > details > ul {
  padding-left: 0;
}

/* Én fasettverdi, i begge panelene: både Kelda og variabelutforskeren tegner nå en bar
   avkrysningsboks inni sin egen etikett, uten klassenavn — elementparet hvert stilark alt kler.
   Regelen henger derfor på panelet og ikke på `__facets`, som bare Kelda har.

   Etiketten bryter på vilkårlig sted. Den lengste databehandlerverdien i katalogen er en setning på
   over 200 tegn, og komponenten kutter den på 60 nettopp fordi ingen vert er forpliktet til å ha en
   regel som denne. Begge beltene er på.

   `font-size` FORDI ARVEN KOMMER FRA `body`. Etiketten satte ingen selv, og `base/_global.scss:43`
   gir kroppen `responsiveParagraph1` — 21px over 2881px, 18px under. Målt i den fiendtlige verten
   2026-09-10: Keldas fasettoverskrift er `headline-xxs`, 16px fast, så verdiene sto 21px under ei
   16px overskrift på 3798 og 18px under den samme 16px på 1689, 1440, 1024 og 843. Hierarkiet leste
   baklengs på hver eneste bredde, ikke bare på den brede skjermen feilen ble sett på.

   0.875rem er størrelsen fasettpanelets eget småstoff alt står i: `__chosen` under er 0.875rem, og
   kildetabellen i `_kilder.scss` likeså. Én størrelse for hele panelet, i stedet for en verdi som
   følger kroppens brødtekst opp og ned og krysser overskrifta si på veien.

   TALLET ETTER VERDIEN ARVER DENNE. `__count` setter ingen egen `font-size` — den satsen sier bare
   farge, kolonne og sifferbredde — så tallet er nøyaktig like stort som etiketten det står i, før
   som etter. Målt: 21px/21px før, 14px/14px etter. Sett ingen størrelse der: det ville vært to tall
   å holde i takt der ett holder seg selv. */
.munin-explorer-filters li > label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 8px;
  line-height: 150%;
  overflow-wrap: anywhere;
  padding: 2px 0;
}

/* Separate columns keep long group names and counts on the disclosure's row. */
.munin-explorer-filters__branch {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 4px;
  font-size: 0.875rem;
  line-height: 150%;
}

.munin-explorer-filters__branch > span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-top: 2px;
}

.munin-explorer-filters__branch > .munin-explorer-filters__groupcount {
  grid-column: 3;
}

.munin-explorer-filters__branch > label {
  grid-column: 2/-1;
  grid-row: 1;
  min-width: 0;
}

.munin-explorer-filters__branch > ul {
  grid-column: 1/-1;
  min-width: 0;
}

/* A missing disclosure must not pull a leaf back to its parent's apparent depth. */
.munin-explorer-filters__branch > ul > li:not(.munin-explorer-filters__branch) > label,
.munin-explorer-filters ul:has(> .munin-explorer-filters__branch) > li:not(.munin-explorer-filters__branch) > label {
  margin-left: 28px;
}

.munin-explorer-filters__disclosure {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(81, 84, 123);
  line-height: 24px;
  cursor: pointer;
}

.munin-explorer-filters__disclosure > span[aria-hidden=true] {
  width: 16px;
  height: 16px;
  font-size: 0;
  background-color: currentColor;
  mask: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/contain;
}

.munin-explorer-filters__disclosure[aria-expanded=true] > span[aria-hidden=true] {
  mask-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

.munin-explorer-filters__disclosure:hover {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}

.munin-explorer-filters__disclosure:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
  background: none;
  color: rgb(81, 84, 123);
}

.munin-explorer-filters li > label input[type=checkbox] {
  flex: none;
  margin-top: 4px;
}

/* Halvhaken tegnes grå som på helsedata.no prod, ikke som Chromes blå «−».
   Begge velgerne trengs: `data-mixed` står i serverrenderen før JS-modulen setter `indeterminate`.
   13px er den native boksen, så den flukter med naboene. #8382a3 er prods egen verdi uten token,
   og gir 3.7:1 mot hvitt (WCAG 1.4.11 krever 3:1). I Windows høykontrast forsvinner bakgrunnen ved
   `appearance: none`, og «delvis» ville sett ut som «ikke valgt» — derfor native boks der. */
.munin-explorer-filters li > label input[type=checkbox]:indeterminate,
.munin-explorer-filters li > label input[type=checkbox][data-mixed=true]:not(:checked) {
  appearance: none;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1px solid rgb(114, 113, 150);
  border-radius: 2px;
  background: rgb(255, 255, 255) linear-gradient(#8382a3, #8382a3) center/7px 7px no-repeat;
}

@media (forced-colors: active) {
  .munin-explorer-filters li > label input[type=checkbox]:indeterminate,
  .munin-explorer-filters li > label input[type=checkbox][data-mixed=true]:not(:checked) {
    appearance: auto;
  }
}
/* Tallet i parentes etter fasettverdien — hvor mange treff verdien har. Det fikk
   sitt eget element nettopp for at det skulle kunne dempes; det elementet har stått udekket siden,
   så «Aktiv (3)» har lest som én streng i stedet for som en etikett med et stille tall etter seg.

   INGEN AV DEM RØRER `display`, OG DET ER MED VILJE. Tallet ligger som en <span> INNE i etiketten, og
   avkrysningsboksens tilgjengelige navn regnes ut av innholdet i den etiketten. `display: none` og
   `visibility: hidden` tar tallet ut av det navnet — målt mot Chromes tilgjengelighetstre
   2026-09-03 — så avkrysningsboksen ville hett «Aktiv» og leseren mistet tallet uten å vite det.
   Layoutegenskaper gjør det ikke. Ingen av de to brukes her, og regelen rører verken `display`
   eller boksen tallet opptar.

   $grey60 OG IKKE $grey50. Et dempet tall er nøyaktig den formen som inviterer til å gå ett trinn
   for langt: den samme opptellingen på Munin-sida gikk ut på 4.33:1 mot hvitt og strøk på
   axe-porten, som vil ha 4.5:1, samme dag. $grey50 måler 4.34:1 mot sidebunnen
   $grey10 og stryker på det samme. $grey60 gir 6.76:1 mot sidebunnen og 7.23:1 mot hvitt, mot
   etikettens $dark på 14.28:1 — dempet, og med god margin innenfor.

   `tabular-nums` fordi tallene leses nedover som en kolonne, og proporsjonale siffer gir «(1)» og
   «(7)» hver sin bredde.

   `flex: none` retter noe som var synlig fra første render mot testdata: etiketten er en
   flex-beholder, tallet er sitt eget flex-element, og etiketten bærer `overflow-wrap: anywhere`
   for de lange databehandlerverdiene. Da er tallets minstebredde ett tegn, og på hver fasett med
   en etikett som brytes over to linjer ble tallet klemt sammen og delt — «(2696» på én linje og
   «)» på neste. Målt i utforskeren mot Runa 2026-09-03: 6 av de 40 øverste fasettene sto slik.
   Uten krymping blir tallet stående helt. Layout, ikke `display` — det tilgjengelige navnet er
   kontrollert etterpå og er fortsatt «Biobank (34)».

   `margin-left: auto` er kolonnen, og den er hele grunnen til at `tabular-nums` over betyr noe:
   sifre i tabellbredde retter seg mot hverandre bare når de faktisk står i en kolonne. `flex: none`
   alene ga kolonnen til de etikettene som bryter, og til ingen andre — et tekstelement som fyller
   raden dytter tallet ut til høyrekanten, et kort ett gjør det ikke. Målt på Kelda 2026-09-03 ved
   1674 med sidefeltet på 384px: 23 av 53 tall sto 0px fra etikettens høyrekant, de 30 andre
   fordelte seg over 4,3 til 263,8px — 31 posisjoner i alt.

   Ut til kanten, og ikke inntil teksten: å holde tallet inntil teksten krever at tekstelementet
   krymper til sitt eget innhold, og det slåss mot brytingen etiketten trenger for
   «ehds-cat:registries-quality-of-healthcare». `overflow-wrap: anywhere` på etiketten står
   urørt, og marginen rører den ikke: med og uten `margin-left` bryter de samme 32 etikettene i
   variabelutforskeren. */
.munin-explorer-filters__count {
  flex: none;
  margin-left: auto;
  color: rgb(81, 84, 123);
  font-variant-numeric: tabular-nums;
}

/* Datakategoriglyfene på ei datasamlingsrad og kildetypemerket på ei kilderad. Dette er stildelen;
   markupen kommer fra Explorer og må skrive nøyaktig disse navnene.

   Rekkefølgen følger markupen: avkrysningsboks, glyfer, navn og antall. Ingen `order` her.

   INGEN FARGE PER DATAKATEGORI, samme avgjørelse som `_hierarchy.scss` og av samme grunn: pakken
   skriver `stroke="currentColor"`, så glyfen arver radas egen tekstfarge og følger hver tilstand
   gratis. Settes farge her, brytes arven og hver tone må settes på nytt for hver tilstand.

   `1em` og ikke px: glyfen binder seg til teksten den merker og følger radas skala. */
.munin-explorer-filters__icons {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 4px;
  /* Match the first text line, including when the name wraps. */
  height: 1.5em;
}

.munin-explorer-filters__icon {
  flex: none;
  height: 1em;
  width: 1em;
}

/* Biobank/Prøvesamling på ei kilderad. Teksten er MENINGSBÆRENDE og hører med i avkrysningsboksens
   tilgjengelige navn — «Biobank» er ikke pynt ved siden av navnet, det er hva kilda er — så regelen
   rører verken `display` eller `visibility`. Begge tar teksten ut av det navnet, målt mot Chromes
   tilgjengelighetstre 2026-09-03 for `__count` rett over, og fella står like åpen her.

   INGEN FLATE, i motsetning til husets andre merker. `munin-explorer-versions__badge` fyller
   kapselen med $grey20, og det står på et hvitt kort.
   Her er bunnen sidebunnen $grey10, og $grey20 måler 1,06:1 mot den — en kapsel ingen ser. $grey30
   når 1,16:1 og faller på det samme. Kanten er derfor $grey60, den ene tonen denne fila allerede
   har målt mot nettopp denne bunnen: 6,76:1, samme valg nivålinjene over tok da $grey30 og $grey40
   falt.

   0,75rem mot radas 0,875rem og $grey60 mot etikettens $dark: merket skal leses som en kategori og
   ikke som en del av navnet. 6,38:1 mot $grey20 og 6,76:1 mot sidebunnen — dempet, og godt over de
   4,5:1 meningsbærende tekst krever. $grey50 ville strøket på 4,34:1 mot den samme bunnen. */
.munin-explorer-filters__badge {
  flex: none;
  padding: 1px 9px;
  border: 1px solid rgb(81, 84, 123);
  border-radius: 999px;
  color: rgb(81, 84, 123);
  font-size: 0.75rem;
}

/* «2 valgt» på fasettlinja, så en foldet fasett sier at noe inni den siler lista. Dette er
   stildelen; markupen kommer fra Explorer og må skrive nøyaktig dette navnet — en
   <span> INNI <summary> og SØSKEN av overskrifta, ikke inni den. Et tall inni overskrifta blir en
   del av overskriftsteksten, og et fasettpanel navigeres nettopp på overskrift.

   EGET NAVN, og ikke `__count` over. De to står på samme linje så snart en fasett er både foldet og
   filtrert, og `__count` bærer `margin-left: auto` — verdiens treffall skal ut til kanten. Det gjør
   markøren her, så «2 valgt» skal stå inntil tittelen. Samme navn hadde gitt de to motsatt oppgave.

   $grey60 av samme grunn som tallet over: 6,76:1 mot sidebunnen $grey10 og 7,23:1 mot hvitt, mot
   overskriftas $dark. `flex: none` fordi tittelen ved siden av er det som skal krympe.

   Tallet HØRER MED i det tilgjengelige navnet, i motsetning til markøren — «Kildetype 2 valgt» er
   nettopp det en leser som ikke ser lista trenger å høre. Derfor er dette markup og ikke `content`.

   `__groupcount` ER GRUPPAS STØRRELSE OG IKKE ET VALG. Variabelutforskerens
   kildetypegrupper skrev til nå `__chosen` på tallet i gruppeoverskrifta — «Annen datakilde 1»,
   «Nasjonalt medisinsk kvalitetsregister 45» — med ingenting valgt. Formen var riktig, navnet løy:
   en som leser `__chosen` leser valgtilstand, og skriver før eller siden en regel eller en test mot
   den lesningen. Kildeutforskerens «1 valgt» beholder `__chosen`, som er det den faktisk er.

   DETTE ER STILER-HALVDELEN, OG DEN MÅ INN FØRST. `__groupcount` er et nytt elementnavn og ikke en
   modifikator: uten en regel her står spanet uten stil og mister $grey60, 14px og tabulærsifrene —
   en synlig regresjon. RCL-halvdelen skriver navnet først etter at
   denne er ute. Navnet er avtalt i begge repoene og skal ikke skrives om i det ene.

   ÉN SATS FOR BEGGE, MED VILJE. De to er det samme småstoffet på den samme linja i det samme
   panelet, og oppdraget her var å skille navnene og ikke formene. En egen kopi av de fire linjene
   ville vært fire linjer å holde i takt — og `font-variant-numeric` er den ene som forsvinner uten
   at noen ser det: i variabelutforskerens liste står 45 rett over 13, og uten tabulærsifre skjelver
   kolonna mens fasetten siles. Skal de en dag se ulike ut, er det en egen sak, og da splittes
   selektoren her. */
.munin-explorer-filters__chosen,
.munin-explorer-filters__groupcount {
  flex: none;
  color: rgb(81, 84, 123);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Nivålinjer: én hjelpelinje per nivå i filtertreet, tegnet bare mens leseren har bryteren på.
   Pakken setter `data-level-lines` på panelet i stedet for et eget klassenavn, og det er markøren
   vi henger regelen på. Bare nestede lister — øverste nivå har ingenting å ligge under.

   $grey60, ikke $grey30 som de andre kantene i blokka. En hjelpelinje er en ikke-tekstlig kontroll
   etter WCAG 1.4.11 og må klare 3:1 mot det som ligger bak, og her er det sidebunnen $grey10, ikke
   et kort: $grey30 måler 1.16:1, $grey40 når 1.82:1 og faller også, $grey60 gir 6.76:1.

   Innrykket er Runas: 16px per nivå, ikke de 20 lista ellers bruker. Runa tegner ett spor per
   nivå — Tailwinds `w-4 border-l`, altså en 16px rail med kanten inni seg — og målt mot ei full
   utfoldet fasettrekke på 1440px ga vår 20px med linjene av og 21px med dem på.

   Derfor 15px luft PLUSS en 1px kant som alltid står der, gjennomsiktig til bryteren slås på.
   Da er sporet 16px uansett, og treet flytter seg ikke når leseren trykker på Nivålinjer — Runas
   gjør heller ikke det. Før dette hoppet hvert nivå ett piksel til høyre av at kanten kom til.

   Bare `ul ul`. Ytterste lista har ingenting å ligge under, og Keldas fasettverdier er ikke
   nestet i det hele tatt, så de beholder sine 20px og røres ikke av dette.

   FARGEN følger IKKE Runa. Runas #e5e7eb måler 1,24:1 mot hvitt og faller for WCAG 1.4.11 sitt
   3:1-krav for ikke-tekstlige kontroller; $grey60 gir 6,76:1 mot sidebunnen $grey10 og blir
   stående. Bredde og utstrekning er Runas, tonen er vår. */
.munin-explorer-filters ul ul {
  border-left: 1px solid transparent;
  padding-left: 15px;
}

.munin-explorer-filters[data-level-lines=true] ul ul {
  border-left-color: rgb(81, 84, 123);
}

/* Ikonforklaringa under fasettpanelet: glyfene i treet er `aria-hidden` dekorasjon, og en seende
   leser som ikke kjenner dem har ikke noe sted å slå dem opp. Dette er stildelen; markupen kommer
   fra Explorer og henter både settet og rekkefølgen fra `DataCategoryIcons.Order`, så
   forklaringa og treet ikke kan komme i utakt.

   Ei liste og ikke ei rad: kategoriene med norske navn får aldri plass på ei linje, og ei forklaring
   som må rulles vannrett er ingen forklaring. `columns` og ikke `grid` fordi oppføringene er ulike
   lengder og skal fylle etter hverandre — i et rutenett ville «Biobank» fått like mye plass som
   «Registerdata om kvalitet i helsetjenesten». `break-inside: avoid` holder glyfen og orda sine i
   samme kolonne.

   `columns: 20ch auto` trenger ingen mediespørring: to kolonner krever 20ch + $ws-default + 20ch,
   og under det regner nettleseren seg selv ned til ei. Tallet er målt og ikke gjettet — 1ch er
   7,55px her, så vinduet som gir to kolonner på 384px og ei på 240px er 14,8ch til 24,4ch, og 20ch
   ligger midt i det. Begge endene er prøvd: 14ch holdt to kolonner helt ned på 240px, der
   «Registerdata om kvalitet i helsetjenesten» fikk 112px å bryte på, og 22ch falt til ei kolonne
   allerede på 384px. Kolonnebredda må tåle det lengste navnet i settet, ikke det korteste.

   `align-items: flex-start` og ikke `center`: ei oppføring som bryter over to linjer skal ha glyfen
   ved den første av dem. Nudgen under er den samme 4px avkrysningsboksen over får, og av samme
   grunn — en 1em glyf i ei 21px linje (0,875rem × 150%) står 3,5px for høyt uten den. */
.munin-explorer-filters__legend {
  margin-top: 16px;
  columns: 20ch auto;
  column-gap: 16px;
  font-size: 0.875rem;
}

.munin-explorer-filters__legend-item {
  align-items: flex-start;
  break-inside: avoid;
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.munin-explorer-filters__legend-item > .munin-explorer-filters__icon {
  margin-top: 4px;
}

/* The clear button is never `disabled` — the same focus reason as the pager's — so its unavailable
   state has to be drawn from aria-disabled. */
.munin-explorer-filters [aria-disabled=true] {
  color: rgb(187, 184, 201);
  cursor: default;
}

.munin-explorer-filters [aria-disabled=true]:hover {
  background: none;
  color: rgb(187, 184, 201);
}

/* ---- Keldas fasettpanel ----

   Kildeutforskerens filtre er avkrysningsbokser i et panel som folder seg ut. Hver fasett er en
   <details>, som variabelsidens, i stedet for det gamle <div role="group">-omslaget. Hele
   panelet er dessuten foldet som standard og en knapp åpner det; regelen lenger ned tar folden
   bort igjen når verten har plass til en sidekolonne. Knappen går med: "Vis filtre" over et panel
   som ikke kan foldes er en kontroll som ikke gjør noe.

   Avstanden mellom fasettene kommer nå fra den uskopede `.munin-explorer-filters details`-regelen
   over, den samme variabelpanelet bruker. Regelen som stod her,
   `.munin-explorer-filters__facets > [role="group"] { margin-bottom: 16px }`, traff derfor
   ingenting og er borte. Målt på rigg: null treff på både Kelda og Runa.
   `VariableListFilters.razor` skriver fortsatt `role="group"`, men som barn av
   `.munin-explorer-filters` og ikke av `__facets` — ikke innenfor selektoren.

   Prøvekopiene i Fhi.Munin.Explorer (ModernHost og LegacyHost sin host.css) bærer fortsatt linja. De kan ikke
   ryddes før denne pakka er sluppet: `assert-sample-css-matches-stiler.sh` måler dem mot den
   pinna Stiler-versjonen, og en tidlig sletting ville meldt avvik. */
.munin-explorer-filters__toggle {
  margin-bottom: 8px;
}

/* Folden virket ikke i det hele tatt. Fasettpanelet er en <div>, og
   pages/_healthregisterpage.scss:118 har en bar `div { display: block }` — en
   normaliseringsblokk. En forfatterregel slår nettleserens egen `[hidden] { display: none }`
   uansett spesifisitet, så panelet sto åpent mens knappen sa «Vis filtre».

   Markupen var aldri feil: `hidden` var satt og `aria-expanded` sa "false" hele tida. Det er
   verdt å vite for den som skal etterprøve dette, for en test på attributtene passerer mot den
   ødelagte koden. Målt utregnet `display` og høyde i stedet, i den fiendtlige verten på 900px:
   `display: block` og 430px høyt før, `display: none` og 0px etter.

   Regelen står FØR mediespørringa under med vilje. De to har samme spesifisitet, så
   rekkefølgen er det eneste som skiller dem, og den under skal fortsatt vinne der verten har
   plass til en sidekolonne — der er folden ment å være uvirksom. Målt på 1024: panelet er
   384x484px både før og etter. */
.munin-explorer-filters__facets[hidden] {
  display: none;
}

/* Har verten plass til en sidekolonne, er fasettene bare der: [hidden] er overstyrbar, og knappen
   som folder går av skjermen med den, så aria-expanded aldri er uenig med det leseren ser.
   1024px, ikke $desktop-all (1025px) - _detail.scss:91 flytter panelet inn i sidekolonnen ved
   akkurat 1024, og ett piksel unna sto det foldet i en sidekolonne. */
@media (min-width: 1024px) {
  .munin-explorer-filters__toggle {
    display: none;
  }
  .munin-explorer-filters__facets[hidden] {
    display: block;
  }
}
/* Breddefolden (vedtatt 2026-10-16): på brede skjermer kan panelet også
   foldes bort med Explorers egen «Skjul filtre / Vis filtre», `__collapse`, som står ved siden av
   panelet. Den finnes bare der panelet er en sidekolonne; på telefon har panelet sin egen «Vis filtre». */
@media not all and (min-width: 1024px) {
  .munin-explorer-filters__collapse {
    display: none;
  }
}
/* Foldet (`--collapsed` på panelet) går panelet, og treffene får kolonnen: ett spor og ingen
   filterflate, og alt som sto i spor 2 strekker seg over hele. Står etter `[hidden]`-regelen
   over, som har samme vekt, så Runas fieldset med begge klassene skjules. Knappen legger seg til
   venstre i stedet for å strekke seg over sporet. */
@media (min-width: 1024px) {
  .munin-explorer > .munin-explorer-filters__collapse {
    justify-self: start;
  }
  .munin-explorer:has(> .munin-explorer-filters--collapsed) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "search" "results";
  }
  .munin-explorer:has(> .munin-explorer__lede):has(> .munin-explorer-filters--collapsed) {
    grid-template-areas: "head" "lede" "search" "results";
  }
  .munin-explorer > .munin-explorer-filters--collapsed {
    display: none;
  }
  .munin-explorer:has(> .munin-explorer-filters--collapsed) > *:not(:is(h1, h2, h3, h4, h5, h6)):not(form):not(.munin-explorer-filters):not(.munin-explorer-drilldown):not(.munin-explorer__lede) {
    grid-column: 1/-1;
  }
}
/* ---- aktive filtre: brikkene over trefflista ----

   Kelda sier i dag ikke hvilke filtre som er på. Forslaget
   (skuld.munin.skytest.fhi.no/kildeutforsker-forslag.html) viser dem som fjernbare brikker over
   tabellen, under «Aktive filtre» og med en «Fjern alle» ved siden av. Dette er stildelen;
   markupen kommer fra Explorer og må skrive nøyaktig disse navnene.

   INGEN AV HUSETS TAGGSTILER KLER DETTE. `.taglist`/`.taglistitem` er skopet under
   `.listcontainer .listitemholder`, og Keldas markup har ingen av dem — gjenbruk hadde betydd to
   meningsløse innpakninger for å tilfredsstille en selektor. `.badge-label` og `.counter-badge` er
   frittstående, men kler en etikett med et tall etter seg og har ingen plass til en lukkekontroll.
   `.button--close-x` er 48x48 og tegner krysset fra en SVG-fil — for stor for en brikke, og
   avhengig av at verten serverer bildet.

   RADA ER EN FLEKS-RAD, av samme grunn som `.munin-explorer-selection` i `_kilder.scss`: i
   inline-flyt står brikkene fra hverandre med mellomrommet mellom taggene i markupen — 4,8px der,
   en avstand ingen bestemte — og et <p> ved siden av legger seg under i stedet for inntil.

   16px og ikke forslagets 8px, og det er fokusringen som setter tallet: «Fjern alle» er en
   `hd-button-square`, og `:focus` tegner den 6px utenfor knappekanten. Samme utregning som
   handlingsrada over tabellen står på.

   «FJERN ALLE» FIKK INGEN EGEN REGEL HER — den får den under, i teksthandlingsforma til
   Utvid alle og Skjul alle. Overskrifta er `.caption margin--none` — $grey60 mot sidebunnen $grey10,
   6,76:1 — og heller ikke et nytt navn. To nye navn her, ikke fire.

   Ingen toppmarg: det som står over eier avstanden ned, og en margin-top ville målt ulikt på hver
   side av 1024px, der `.munin-explorer` går fra blokkflyt til rutenett. */
.munin-explorer .munin-explorer-filters__active {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px;
}

/* «Fjern alle filtre» er den samme SLAGS handling som Utvid alle og Skjul alle: husholdning på
   filtertilstanden. Den sto igjen som den eneste innrammede knappen blant teksthandlinger, og leste
   dermed som rekkas viktigste kontroll når den er den minst viktige. Målt før: 142,56 x 44 med
   1px $grey60-kant, 8px radius og 16px tekst, ved siden av Utvid alle på 64,48 x 24.

   FORMA ER .78s, IKKE UTLEDET PÅ NYTT. De sju erklæringene under er de samme sju som står på
   `__toolbar > .hd-button-square:not([aria-pressed])` lenger oppe i fila, og de to blokkene skal
   endres sammen om de først skal endres. Derfor står begrunnelsen for hver enkelt verdi der og
   gjentas ikke her.

   KONTROLLEN HAR INGEN EGEN KLASSE, og den får ingen herfra. Målt på riggen skriver pakken
   `<button class="hd-button-square button-square--ghost" type="button">` — bare husets to navn.
   Regelen henger derfor på FORELDEREN, `munin-explorer-filters__active`, som er komponentens eget
   navn og alt definert over. Ingen oppfunne navn: et navn Stiler har en regel for og pakken aldri
   skriver, er like ubrukelig som det motsatte. `>` og ikke etterkommer, fordi kapslenes egen
   lukkeknapp ligger dypere inne og ikke skal ha denne forma.

   SAMME SPESIFISITETSPAR SOM TEKSTHANDLINGENE I VERKTØYRADEN, med `__toolbar` byttet mot `__active`: (0,3,0) for forma, og
   (0,5,0) for kanten, som må slå `_buttons.scss` sin (0,4,0). Uavgjort ville falt riktig vei i dag
   siden `_buttons` lastes først, men `munin-explorer.scss` sier selv at rekkefølge er feil
   bærebjelke for dette. */
.munin-explorer-filters__active > .hd-button-square {
  background: none;
  color: rgb(50, 55, 141);
  font-size: 0.875rem;
  height: auto;
  min-height: 1.5rem;
  padding: 4px 8px;
  border-radius: 0;
  text-decoration: underline;
}

.munin-explorer .munin-explorer-filters__active > .hd-button-square.button-square--ghost:not([aria-pressed]) {
  border-color: transparent;
}

.munin-explorer-filters__active > .hd-button-square:hover {
  background: none;
  color: rgb(82, 30, 255);
}

/* Kapselen. $grey20 er flata forslaget bruker (#eff0fa er tokenet som ligger på verdien), men den
   måler 1,06:1 mot sidebunnen $grey10 og er dermed usynlig alene. Kanten er det som tegner kapselen.

   $grey60 OG IKKE $grey30. En kapselkant er en ikke-tekstlig kontroll etter WCAG 1.4.11 og skylder
   3:1 mot det som ligger bak, og bak er sidebunnen: $grey30 måler 1,16:1 og $grey40 1,82:1, begge
   stryker. $grey60 gir 6,76:1 mot sidebunnen og 6,38:1 mot brikkas egen flate. Samme utregning
   nivålinjene over står på, og samme token som ghost-kanten i `_buttons.scss`.

   Kanten slåss ikke med `:not([aria-pressed])` der. Den regelen holder kant unna AV-tilstandene
   fordi en kant rundt hver ukrysset fasettverdi visker ut skillet mot de påslåtte. En brikke har
   ingen av-tilstand — den finnes bare mens filteret er på — så det er ingen forskjell å viske ut.
   Brikka bærer heller ikke `aria-pressed` og treffes ikke av regelen uansett.

   Teksten er $dark, 13,47:1 mot $grey20, og skifter aldri: kapselen har ingen hovertilstand, bare
   lukkekontrollen inni har det. Rada står dessuten OVER tabellen og ikke på en kilderad, så
   $grey20-radhoveret på kilderadene kan ikke ligge under den — selektoren der krever
   `.munin-explorer-kilder > tbody > tr`, og brikkene er ikke etterkommere av tabellen.

   `overflow-wrap` og `max-width` fordi fasettverdiene er lange: komponenten kutter dem på 60 tegn
   nettopp fordi den lengste databehandlerverdien i katalogen er en setning på over 200. Uten dem
   dytter én brikke rada bredere enn kolonnen og sida ruller vannrett (WCAG 1.4.10). */
.munin-explorer .munin-explorer-filters__chip {
  align-items: center;
  background: rgb(239, 240, 250);
  border: 1px solid rgb(81, 84, 123);
  border-radius: 999px;
  color: rgb(38, 32, 69);
  display: inline-flex;
  font-size: 0.875rem;
  gap: 4px;
  line-height: 150%;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 4px 4px 4px 8px;
}

/* Lukkekontrollen. 24x24 SATT I REGELEN, ikke overlatt til glyfen. Utvidknappen i kildetabellen hadde
   nøyaktig denne feilen: et tegn i en knapp med liten sideluft målte 20x24 og strøk på
   WCAG 2.5.8. Her er `width`/`height` $ws-m og `flex: none`, så boksen er 24x24 uansett hvilket
   tegn markupen sender. Målt: 24x24. Forslagets egne 22x22 ville strøket.

   `font: inherit` før `font-size`, fordi markupen kan sende en naken <button>: uten den er skrifta
   nettleserens egen og ikke sidas.

   HOVER OG FOKUS TEGNES LIKT, OG FYLT. Forslaget legger en #ddd9f5-flate under krysset, men den
   måler 1,10:1 mot brikkas $grey20 — en tilstandsendring som ikke er til å se. En $grey60-flate gir
   6,38:1 mot flata i ro, og krysset blir $white på $grey60, 7,23:1. I ro er krysset $dark på $grey20,
   13,47:1. En dempet glyf frister og stryker: $grey50 måler 4,10:1 mot brikkas flate i ro og 3,74:1
   mot $grey30, som er den flata en hovertilstand i husets vanlige form ville lagt under den — samme
   felle som ble funnet på tallkolonnene, der én måling i ro sa god for en farge som
   strøk under pekeren. Farge og ikke opacity: en sammensatt verdi måtte måles på nytt for hver
   flate en vert kan finne på å sette.

   `:focus-visible` DELER HELE HOVERTILSTANDEN, og flata bærer den: $focus måler 2,91:1 mot $grey20
   og ville stått under 3:1 som eneste fokusmarkør, så ringen kommer i tillegg. Kapselen får ingen
   `:focus-within`: den har ingen hovertilstand å speile.

   Ringen er 2px og brikkas luft 4px, så den får plass inne i kapselen uten å bli klippet. */
.munin-explorer .munin-explorer-filters__chip-remove {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: rgb(38, 32, 69);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: inherit;
  font-size: 1rem;
  height: 24px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 24px;
}

.munin-explorer .munin-explorer-filters__chip-remove:hover,
.munin-explorer .munin-explorer-filters__chip-remove:focus-visible {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}

.munin-explorer .munin-explorer-filters__chip-remove:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

/* ---- bryteren: spor og kule ----

   Stiler har ikke hatt en bryter. Lett opp før regelen ble skrevet: ingen `role="switch"`, ingen
   `track`, ingen `thumb`, verken her eller i `Fhi.Helsedata.Optimizely` sin markup — de eneste
   treffene på «toggle» er `.filter-list__collapse-toggle`, som er en sammenleggingslenke, og en
   C#-`@switch`. Dette er altså en ny primitiv i et ark hver eneste helsedata.no-side laster, og det
   er grunnen til å gå varsomt fram, ikke at det er vanskelig.

   DERFOR ER DEN SKOPET UNDER `munin-explorer` OG IKKE GLOBAL. Stiler er Waels designsystem. En
   global `.switch` legger beslag på delt grunn og krever deres gjennomgang; en navnsatt gjør det
   ikke, og kan forfremmes seinere om de vil ha den. Navnene er avtalt med utforskerens markup og
   må stå likt i begge halvdelene.

   TILSTANDEN LESES FRA MARKUPEN, ALDRI FRA EN MODIFIKATORKLASSE. Pakken skriver `role="switch"`
   med `aria-checked`, og reglene under henger på `[aria-checked="true"]`. En `--on`-klasse ved
   siden av ville gitt to sannheter om én tilstand, og det er nettopp slik en kontroll ender opp
   tegnet PÅ og annonsert AV. Nivålinjer-knappen har hatt den feilen én gang alt.

   FORMA ER SKULD-SKISSA, VERDIENE ER STILERS. Skissa
   (`forgeBench/skuld/chart/site/skisse.css`, `.switch`) tegner 30x18 spor med 12px kule og 12px
   vandring. Tokenene der er husets egne under andre navn — `--muted` er $grey60, `--chip` er
   $grey20, `--ink` er $dark — så de er satt tilbake på Stiler-tokenene, slik resten av komponenten
   gjør. Skissas `--accent` ($primary) er IKKE brukt som påslått flate: fyllet er det
   som ble målt og valgt for Nivålinjer-knappens trykte tilstand, $grey60 med hvitt oppå, og det tallet står ikke til å
   flyttes for en farge skissa valgte før målinga. */
/* Omslaget er både etiketten og trykkflata. 30x18 STRYKER PÅ WCAG 2.5.5 ALENE — det er hele grunnen
   til at dette ikke bare er «tegn en 30x18-boks». Sporet blir stående på 30x18 fordi det er det
   skissa tegner; flata som tar trykket er omslaget rundt, og den er polstret opp. De to tallene skal
   være ulike, og begge er målt hver for seg i saken.

   `min-height` og ikke `height`: bryter etiketten over to linjer på en lang oversettelse, skal
   boksen vokse i stedet for å klippe.

   `line-height` MÅ SETTES, og det er målt. `font: inherit` arver også linjehøyden, og den er 33,6px
   inne i utforskeren — bryteren målte 41,59px høy mot pillas 32 før denne erklæringa, altså høyere
   enn kontrollen den erstatter. 150% er den samme linjehøyden filterkapselen står på. */
.munin-explorer .munin-explorer-switch {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgb(81, 84, 123);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.875rem;
  gap: 8px;
  line-height: 150%;
  min-height: 2rem;
  padding: 4px 8px;
  text-align: left;
}

.munin-explorer .munin-explorer-switch[aria-checked=true] {
  color: rgb(38, 32, 69);
}

/* HOVER OG FOKUS ER IKKE LENGER SAMME FLATE. Da de delte $grey20, var
   fokusmarkøren et flateskifte på 1,06:1 mot sidebunnen $grey10 — målt på riggen, ikke regnet ut
   fra paletten. En hoverflate som også skal gjøre tjeneste som fokusmarkør er ingen fokusmarkør
   (WCAG 2.4.7, nivå AA). Hoveret står som det var: $grey20 er musas kvittering og skal ikke rope.

   FLATA BÆRER FOKUS, RINGEN KOMMER I TILLEGG — som `__chip-remove` og `__disclosure` i
   `_filters.scss`. `base/_global.scss` fjerner ringen bare ved pekerfokus (`:focus:not(:focus-visible)`),
   men flata avhenger ikke av hva en vert gjør med ringen. */
.munin-explorer .munin-explorer-switch:hover {
  background-color: rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}

.munin-explorer .munin-explorer-switch:focus-visible {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

/* Sporet. `border-box` er satt globalt, så 30x18 ER de tegnede tallene, kanten iberegnet.

   KANTEN ER DET SOM TEGNER SPORET I AV-TILSTAND, ikke fyllet. Av-fyllet er $grey20, og omslagets
   egen hoverflate er også $grey20 — der måler fyllet 1,00:1 mot det som ligger under og finnes
   ikke. $grey60-kanten måler 6,38:1 mot den samme flata og 6,76:1 mot sidebunnen $grey10. Nøyaktig
   samme utregning som filterkapselen står på, og av samme grunn. */
.munin-explorer .munin-explorer-switch__track {
  background: rgb(239, 240, 250);
  border: 1px solid rgb(81, 84, 123);
  border-radius: 999px;
  display: inline-block;
  flex: none;
  height: 18px;
  position: relative;
  width: 30px;
}

/* Kula. 12px med 2px luft hele veien rundt inne i sporets 28x16 polstringsboks, og 12px vandring
   setter den 2px fra motsatt kant. Ett tall, ikke to: endres kula, endres vandringa med den.

   STILLINGA ER SIGNALET, ikke fargen. Venstre = av, høyre = på, og det leses med all farge borte —
   som er kravet i saken, og den samme leseren pille-og-prikk-forma ble valgt for. Flateskiftet
   under er et ANDRE signal oppå det, ikke det eneste. */
.munin-explorer .munin-explorer-switch__thumb {
  background: rgb(81, 84, 123);
  border-radius: 50%;
  height: 12px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.12s;
  width: 12px;
}

.munin-explorer .munin-explorer-switch[aria-checked=true] .munin-explorer-switch__track {
  background: rgb(81, 84, 123);
  border-color: rgb(81, 84, 123);
}

.munin-explorer .munin-explorer-switch[aria-checked=true] .munin-explorer-switch__thumb {
  background: rgb(255, 255, 255);
  transform: translateX(12px);
}

/* SPORET OG KULA PÅ FOKUSFLATA. $grey60-kanten og $grey60-kula forsvinner i en $grey60-flate —
   kontrollen ville blitt borte for nøyaktig den leseren som nettopp tabbet til den. Begge går
   hvite: 7,23:1 mot fyllet.

   STILLINGA ER FORTSATT AV/PÅ-SIGNALET. Kula vandrer de samme 12px som før, og av og på skilles
   av hvor den står, ikke av farge — nettopp fordi begge fargene nå er like på fokusflata.

   ETTER `[aria-checked="true"]`-reglene over MED VILJE. Begge veier måler (0,4,0), så det er
   rekkefølgen i fila som avgjør, og fokus skal vinne over på-tilstanden. Flyttes disse opp, blir
   sporet stående $grey60-på-$grey60 når bryteren er på. */
.munin-explorer .munin-explorer-switch:focus-visible .munin-explorer-switch__track {
  background: rgb(81, 84, 123);
  border-color: rgb(255, 255, 255);
}

.munin-explorer .munin-explorer-switch:focus-visible .munin-explorer-switch__thumb {
  background: rgb(255, 255, 255);
}

@media (prefers-reduced-motion: reduce) {
  .munin-explorer .munin-explorer-switch__thumb {
    transition: none;
  }
}
/* ---- the detail panel ----

   The same reason as the filter panel above. The panel a row opens is a <dl> of labels and values,
   an <ol> for the kilde trail and a <ul> for the variabelgrupper and kodeverk, because Stiler has
   no definition list, no breadcrumb and no key/value block that can be read back off its compiled
   stylesheet — and a name it has never heard of renders as a raw browser default. The package emits `munin-explorer-detail` as a handle for exactly
   this and styles nothing itself, so the dressing has to come from here.

   A consumer on an older Stiler still gets a panel that reads correctly: each value sits under
   the label that names it. What it loses is the trail reading as a trail rather than as a
   numbered list.

   NO BORDER-TOP HERE, deliberately. The row above closes itself with a border-bottom
   (`.munin-explorer-data-list__item__row` in `_results`), and a border here drew a second line 8px
   under it whenever a panel was open. The row's is the one to keep: it separates the rows whether
   or not anything is expanded, while this one only ever existed in the expanded state. */
.munin-explorer-detail {
  margin-top: 8px;
  padding-top: 16px;
}

/* The panel's status line holds one message at a time and is empty when there is nothing to
   report — it stays in the document so a failure replaces text in a region that is already
   there, which is what makes it announced. Empty, it should take up no room. */
.munin-explorer-detail > p:empty {
  display: none;
}

.munin-explorer-detail dl {
  margin: 0;
}

.munin-explorer-detail dt {
  margin-top: 12px;
}

.munin-explorer-detail dd {
  margin: 0;
}

.munin-explorer-detail dd ul {
  margin: 0;
  padding-left: 20px;
}

/* The kilde trail, drawn as one: a chevron between the steps rather than the numbers a bare <ol>
   would carry. Generated content, so the separator is decoration — not announced, and not copied
   out with the text. */
.munin-explorer-detail dd ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.munin-explorer-detail dd ol li + li::before {
  content: "›";
  margin: 0 8px;
  color: rgb(81, 84, 123);
}

/* Empty when there is nothing to report, and in the document either way — the same arrangement,
   and the same reason, as the detail panel's own status line. */
.munin-explorer-drilldown > p:empty {
  display: none;
}

/* The drill-in's own heading — the placeholder it keeps while the payload is still on its way, for
   a kilde and a datasamling alike. Both bring their own heading once they arrive: KildeView has
   always done so, and DatasamlingView has since put it inside
   `munin-explorer-datasamling__header`, which `_trail` dresses. Rendered at whatever level keeps
   the host page's outline unbroken, so it is matched by level rather than by element. Only the
   page margin is overridden: the size comes from Stiler's own headline classes, which the heading
   also wears.

   Direct children throughout, so none of this reaches into KildeView: its <dl>s wear helsedata's
   variable-meta__grid and are styled by that further down, and a descendant selector here would
   out-specify it and take its spacing away. */
.munin-explorer-drilldown > h2, .munin-explorer-drilldown > h3, .munin-explorer-drilldown > h4, .munin-explorer-drilldown > h5, .munin-explorer-drilldown > h6 {
  margin: 0 0 8px;
}

.munin-explorer-drilldown > dl {
  margin: 0;
}

.munin-explorer-drilldown > dl > dt {
  margin-top: 12px;
}

.munin-explorer-drilldown > dl > dd {
  margin: 0;
}

/* Etikettene må kunne brekke, samme sak som handoverknappen i `_kilder.scss:546` og samme løsning.
   `.hd-button-square` er `white-space: nowrap` med fast `height: 2.75rem`, og drill-innens andre
   knapp heter «Vis bare variabler fra denne datakilden» — 39 tegn på én ubrytelig linje.

   Målt på riggen mot denne fila sin egen bygging, HostileHost på 320px med regelen av: knappen er
   325px brei og høyrekanten står på 349, så `document.scrollWidth` blir 349 mot 320 i utsnittet.
   Det er WCAG 1.4.10 Reflow, oppgitt nettopp ved 320px. Den engelske etiketten er lengre ennå.
   Ved 390px passer sida (375), så dette er et smal-skjerm-tilfelle og ikke en feil i rada.

   `min-height` og ikke bare `height: auto`: uten golvet faller en étlinjes knapp til 42px og tar
   trykkmålet under WCAG 2.5.5 sine 24x24 — 2,75rem er husets knappehøyde. Ingen ny farge og ingen
   ny flate, så ingen ny kontrastmåling; dette flytter bare hvor teksten får brekke.

   DIREKTE BARN, som resten av denne fila: en etterkommerselektor ville også truffet knappene inne i
   KildeView — «Prøv å laste strukturen på nytt» i hierarkiet er den samme klassen — og de står i
   sine egne rader med sine egne mål. Tre klasser av samme grunn som `_kilder.scss` skriver opp:
   (0,3,0) kan ikke tas tilbake av en senere regel med lik spesifisitet. Ingen `!important`. */
.munin-explorer .munin-explorer-drilldown > .hd-button-square {
  height: auto;
  min-height: 2.75rem;
  white-space: normal;
}

/* ---- the complete record ----

   The catch-all at the foot of every detail page: a lead sentence, then a collapsed native
   <details> over every field Munin holds about the row. The package invents all three names
   (`DetailBlocks.cs:227-229`) and ships no CSS of its own, so until this block existed they
   rendered at the browser's own defaults on helsedata — the summary as text that happens to fold,
   the lead at helsedata's 18px paragraph margin, and the field list as an indented <dl> drawing
   one row per line where it was drawn as two columns.

   The values are the sample stylesheets' stand-in, which both hosts carry byte-identical
   (`samples/ModernHost/wwwroot/host.css:1572-1602`) precisely so this partial can adopt them
   unchanged. Nothing here was tuned.

   THE SPECIFICITY IS LEFT AT (0,1,0), and that is measured rather than assumed. `_page.scss:248`
   forbids strengthening the sibling grid's selector, and the fight this block was once thought to
   have does not occur: `munin-explorer-detail` is emitted as a class in exactly one place, the
   variabel drill-in row panel (`VariableSearch.razor:707`), while the complete record is built
   only by the three detail views. Measured on the rig: a kilde detail page carries ZERO nodes
   matching `.munin-explorer-detail`, so `.munin-explorer-detail dl { margin: 0 }` at (0,1,1)
   never meets this grid. Were one ever rendered inside that panel, the fix is a rule scoped to
   the panel and not more weight here. */
.munin-explorer-complete-record > summary {
  cursor: pointer;
  padding: 4px 0;
}

/* Samme ring som hierarkiet og handlingsfolden: fokusnullstillingen i `_global.scss` gjelder bare `button` og `a`,
   så «Alle felt» fikk bare nettleserens tynne standardring (WCAG 2.4.7). */
.munin-explorer-complete-record > summary:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* Ledeteksten sto uten tak: 110 tegn på linja ved 1280 og 132 ved 1440. Taket er komponentens
   felles mål, og hvorfor det er 45ch står ved `.munin-explorer__lede` lenger ned. */
.munin-explorer-complete-record__lead {
  margin: 0 0 8px;
  max-width: 45ch;
}

/* Setningen under Kodeverk-overskriften fikk nettleserens p-marg på 1em. Samme luft som
   ledeteksten over, godkjent av UI 2026-09-17: bare margen, som prøvestilarkene også har. */
.munin-explorer-lead {
  margin: 0 0 8px;
}

/* Avsnitta i seksjonene er den samme brødteksten som ledeteksten over, og de sto like uten tak —
   110 tegn ved 1280, 132 ved 1440. Samme tak og samme måling. Regelen bor her hos ledeteksten
   framfor blant `__section`-reglene i `_page.scss` fordi den kler den samme brødteksten på den
   samme siden. */
.munin-explorer-page__section > p {
  max-width: 45ch;
}

.munin-explorer-complete-record__fields {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 8px 0 0;
}

/* A value here may be one unbroken token — a Lovdata URL, a variable code — and the grid item is
   the unclassed <div> wrapping each dt/dd pair, whose default `min-width: auto` floors its track
   at min-content. `anywhere` and not `break-word`, because only `anywhere` lowers min-content,
   and that is the whole of the fix. Measured with `scripts/check-hostile-host.sh`:
   without this declaration a lovdata.no link spans 64..380 inside a 320px mount
   and fails the reflow step (WCAG 1.4.10) in all three kilde-hierarchy states. The same
   declaration, for the same reason, is what `_page.scss:286` gives the chassis grid, and neither
   needs a `min-width: 0` companion. */
.munin-explorer-complete-record__fields dd {
  overflow-wrap: anywhere;
  margin: 0;
  /* Komponentens felles mål, begrunnet ved `.munin-explorer__lede`. Uten det sto verdiene på
     117 tegn per linje ved 1280 og 125 ved 1024, der rutenettet har én kolonne. */
  max-width: 45ch;
}

/* One column below the desktop step, the same threshold and the same token as the chassis grid's
   own step at `_page.scss:303`. The sample writes it as a literal `max-width: 1280px`, and
   `$xs-desktop` IS `all and (max-width: 1280px)` — so this is the sample's own breakpoint spelled
   with the token rather than a second loose copy of the number. */
@media all and (max-width: 1280px) {
  .munin-explorer-complete-record__fields {
    grid-template-columns: auto;
  }
}
/* ---- beholderen ----

   Utforskeren er en <section> verten legger rett inn i innholdsområdet uten å gi den en bredde, og
   uten denne regelen gikk den helt ut i skjermkanten: 1703px på x=0 i et vindu på 1718px, mens
   resten av nettstedet står på 1488px. Kjeden fra html og ned er ubeskåret hele veien, og
   div.container rundt seksjonen i .cshtml-en er et dødt klassenavn som ingen regel treffer. Den
   utrullede sida har ikke engang den div-en, så rettingen hører hjemme her og ikke i verten.

   1920px FOR LISTENE, på Kelda og Runa likt. Valgt 2026-10-16;
   en åpnet kilde, datasamling eller hel variabel står i husets kolonne, se regelen under. Før sto utforskeren på sidas egen 1488px
   ($page-container-width) og trefflista i Runa på 1760px via `:has(> fieldset.munin-explorer-filters)`;
   begge er borte, og unntaket med dem. Resten av nettstedet og
   $page-container-width står urørt. Bredden er border-box, så marginen ligger innenfor de 1920.

   Marginen er 40/24/16px på desktop/nettbrett/telefon, trappet med husets egne $tablet og $mobile.
   Lesebredden flytter seg ikke: brødteksten har sine egne ch-tak (45ch og 70ch), og kildesidas
   hovedkolonne sitt, så en bredere beholder gir mer luft og ikke lengre linjer.

   Bredden skal ikke ned på .content-container sine 1200px. Det ble målt: der
   falt resultatkolonnen til 694px og mistet fire kolonner. */
.munin-explorer {
  max-width: 1920px;
  width: 100%;
  padding: 0 40px;
  margin: 0 auto;
}
@media all and (max-width: 1024px) {
  .munin-explorer {
    padding: 0 24px;
  }
}
@media all and (max-width: 767px) {
  .munin-explorer {
    padding: 0 16px;
  }
}

/* Én kilde, datasamling eller hel variabel står i husets sidekolonne (`.page-container`: 1488px,
   24px på hver side), så kanten flukter med logoen; listene beholder 1920px (valgt 19.10).
   Telefonen beholder 16px; instrumentvisningen har ingen rotklasse. */
.munin-explorer:has(.munin-explorer-kilde, .munin-explorer-datasamling, .munin-explorer-whole) {
  max-width: 1488px;
  padding: 0 24px;
}
@media all and (max-width: 767px) {
  .munin-explorer:has(.munin-explorer-kilde, .munin-explorer-datasamling, .munin-explorer-whole) {
    padding: 0 16px;
  }
}

/* ---- ledeteksten under overskrifta ----

   En endring i pakken gir begge utforskerne en valgfri ledetekst verten selv fyller ut, og
   pakken skriver den som `<p class="munin-explorer__lede">` rett etter h2-en. FRAM TIL DEN
   ENDRINGA ER UTE TREFFER DENNE REGELEN OG PLASSERINGA LENGER NED INGENTING.

   45ch, ETT TALL FOR HELE KOMPONENTEN. `ch` er bredden på «0», og i graphik rommer én ch om lag
   1,45 tegn løpende tekst ved 14, 16 og 18px likt, så 45ch tegner 59–71 tegn på linja og det gamle
   taket 96–102. Alle ni måltak i komponenten har dette tallet.

   INGEN EGEN SKRIFTSTØRRELSE, og det er en måling som avgjorde det. `.ingress` gir ingenting
   her: i bundlen er hver eneste ingress-regel skopet til en sidetype — `body.aboutpage`,
   `.guidanceintropage`, `body.registerownerlistpage`/`registerownerpage` — og ingen av dem setter
   et mål. Avsnittet tegner alt 18px/28,8px inne i utforskeren, målt på riggen, altså større enn
   brødteksten og tydelig skilt fra den. Et fjerde tall her ville vært funnet på.

   Ingen bunnmarg, som de tre over. Søkeskjemaet under bærer sin egen toppmarg, og marger faller
   ikke sammen mellom to ruteceller. */
.munin-explorer__lede {
  margin: 12px 0 0;
  max-width: 45ch;
}

@media (min-width: 1024px) {
  /* Kolonneoppsettet deler bredden beholderen over gir det: taket minus luften på sidene.
     Tre rader, uendra. Den fjerde kommer bare når det faktisk står en ledetekst i dokumentet, og
     hvorfor den MÅ være betinga står i regelen under. */
  .munin-explorer {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
    grid-template-areas: "head head" "search search" "filters results";
    column-gap: 24px;
    align-items: start;
  }
  /* Ledeteksten spenner begge spor, i sin egen rad rett under overskrifta.

     UTEN EI EGEN RAD LANDER DEN I RESULTATKOLONNA. Fanget av regelen nederst i blokka fikk den
     `grid-column: 2` — målt på riggen ved 1440 og 1025, på både Kelda og Runa: boksen sto på
     x=432 med 969px bredde, altså ved siden av filtrene i stedet for under tittelen.

     OG AUTOPLASSERING LØSER DET IKKE. Keldas filterpanel er plassert over 99 rader, så et barn
     som spenner begge spor ikke finner plass før rad 102.

     MEN RADA KAN IKKE STÅ FAST I MALEN, OG DET ER EI MÅLING SOM SA FRA. Første utgave la rada inn
     i grunnoppsettet og flyttet filtersporet ned til rad 4. Ei tom rad måler riktignok 0px — men
     den er ikke tom: verktøyrada over trefflista har `grid-column: 2` og AUTO rad, så uten en
     ledetekst å fylle cella med falt den ned i ledetekstrada i stedet. Målt på Kelda ved 1440:
     filterpanelet gikk fra y=217,6 til y=268, altså 50,4px, som er nøyaktig verktøyradas egen
     høyde, og sto ikke lenger i flukt med den. Runa skjulte feilen fordi dens første auto-plasserte
     barn er 0px høyt — to sider, og bare den ene viste det.

     DERFOR ER HELE RADA BETINGA AV AT LEDETEKSTEN FINNES. Uten den er oppsettet bokstavelig talt
     det gamle: samme tre rader, samme `grid-row: 3` på filtrene, og hver eneste boks målt tilbake
     på sin gamle plass. Med den flytter filtrene og resultatene seg like langt ned, målt til 98,4px
     på begge, så de to sporene blir stående i flukt. `:has()` er alt i bruk i komponenten
     (`_kilder.scss`, `_page.scss`), og der den ikke støttes står oppsettet igjen på tre rader —
     den trygge retninga å falle tilbake i. */
  .munin-explorer:has(> .munin-explorer__lede) {
    grid-template-areas: "head head" "lede lede" "search search" "filters results";
  }
  /* Filtersporet følger med ned når rada kommer til. `filters-start` og ikke `4`: linjenavnet
     kommer fra området selv, så tallet kan aldri komme i utakt med malen over. (0,3,0) mot
     grunnregelens (0,2,0), så rekkefølgen i fila avgjør ingenting. */
  .munin-explorer:has(> .munin-explorer__lede) > .munin-explorer-filters {
    grid-row: filters-start/span 99;
  }
  .munin-explorer > .munin-explorer__lede {
    grid-area: lede;
    min-inline-size: 0;
  }
  .munin-explorer > :is(h1, h2, h3, h4, h5, h6) {
    grid-area: head;
  }
  .munin-explorer > form {
    grid-area: search;
  }
  /* Klebrig filterpanel. Panelet beholder sitt eget rullefelt — resultatlista er lang, og et
     panel uten tak dyttet tabellen langt ned så snart fasettene ble foldet ut — men før denne
     regelen var panelet bare kappet til vindushøyden midt i ei side som selv rullet: rullet
     leseren ned, forsvant filtrene oppover mens resultatene ble stående å filtrere på.

     Sticky fester panelet i vinduet i stedet. Rutenettområdet går fra rad 3 og ut, altså like
     høyt som hele resultatkolonnen, så panelet har noe å kleble langs. `top: 20px` og
     `calc(100vh - 40px)` er de samme tallene som `.register-page__page-navigation` i
     pages/_healthregisterpage — samme mønster, samme luft. Ingen fast topplinje å klarere:
     vertens meny ruller med sida, og `position: fixed` i layout/_main-menu gjelder bare
     utslåsmenyen. */
  .munin-explorer > .munin-explorer-filters {
    grid-area: filters;
    grid-row: 3/span 99;
    min-inline-size: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
  /* Verktøyrada følger med. Den ligger inne i rullefeltet, og uten dette forsvant Utvid alle,
     Skjul alle og Nivålinjer oppover så snart leseren rullet i fasettlista — altså akkurat når
     ei lang liste gjør dem nyttige. Bare her, inne i mediespørringa: under 1024px har panelet
     verken tak eller rullefelt, og sticky ville festet rada i vinduet i stedet.

     $grey10 er sidebunnen utforskeren står på, så fasettene som ruller under blir borte i
     stedet for å skinne gjennom. Bunnmarginen blir til fyll av samme grunn: som margin ville
     de 16 pikslene vært et gjennomsiktig belte rett under rada. */
  .munin-explorer > .munin-explorer-filters > .munin-explorer-filters__toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 0;
    padding-bottom: 16px;
    background: rgb(246, 247, 252);
  }
  /* The drill-in replaces the list rather than sitting beside it — the filter panel is not
     rendered at all in this state — so it spans both tracks the way the heading and the search
     form already do. Caught by the catch-all below it was placed in the results column and left
     the filter track standing empty: 408px of gutter, and the content overflowing what was left.
     `min-inline-size: 0` for the same reason as the other tracks: the definition-list rows carry
     their own minimum width and would otherwise push past the grid area. */
  .munin-explorer > .munin-explorer-drilldown {
    grid-column: 1/-1;
    min-inline-size: 0;
  }
  /* `__lede` er unntatt av nøyaktig samme grunn som `__drilldown` over: den har si egen
     plassering, og uten unntaket vinner denne regelen over den. Regelen står på (0,3,2) — tre
     klasser og to elementnavn inne i `:not()`-ene — mot `.munin-explorer > .munin-explorer__lede`
     sine (0,2,0), så et unntak er den eneste veien som ikke krever `!important`.

     UNNTAKET FLYTTER INGENTING ANNET. Det legger én klasse til denne selektoren og fjerner én
     node fra den; resultatlista står på `grid-column: 2` før og etter, målt på begge sidene. */
  .munin-explorer > *:not(:is(h1, h2, h3, h4, h5, h6)):not(form):not(.munin-explorer-filters):not(.munin-explorer-drilldown):not(.munin-explorer__lede) {
    grid-column: 2;
    min-inline-size: 0;
  }
}
.munin-explorer-filters .hd-button-square {
  white-space: normal;
  text-align: left;
  height: auto;
}

/* ---- kildens hierarki: delkilder, datasamlinger og variabelgrupper ----

   Treet under «Delkilder og datasamlinger» i kildens detaljvisning. Markupen kommer fra
   KildeHierarchyView og er nestede <ul>-er der en gren er en ekte <details> med sin egen <summary>
   og et blad er en <span>. Pakken sender ingen CSS, og fram til nå fantes det ingen regel for
   navnene her i det hele tatt: målt på localhost 2026-09-09 sto treet i nakne nettleserstandarder,
   18px arvet fra den globale brødteksten og 40px innrykk per nivå fra <ul>-ens egen padding.

   Kelda er fasit for oppførsel og ikonbetydning, ikke for utseende. Verdiene under er Stilers egne
   tokens, og formen er lånt fra fasettpanelet i `_filters.scss` og raden i `_kilder.scss` — de to
   nærmeste slektningene i denne mappa. */
.munin-explorer-hierarchy {
  color: rgb(38, 32, 69);
  font-size: 0.875rem;
  margin-bottom: 16px;
  /* Datasamlingsnavn er ikke ord, de er koder: «MRSKJERNE», «K_LKG». `anywhere` og ikke
     `break-word`, fordi bare `anywhere` teller med i minsteinnholdsbredden — og det er nettopp
     den som lar navnet krympe når det står som flex-element i en rad. Uten den ber en lang kode
     om sin fulle bredde og dytter sida vannrett (WCAG 1.4.10). */
  overflow-wrap: anywhere;
}

/* Statuslinja bærer én melding om gangen og er tom når det ikke er noe å melde. Den blir stående i
   dokumentet så en feil erstatter tekst i et område som allerede finnes — det er det som gjør den
   annonsert. Tom skal den ikke ta plass. Samme ordning, og samme grunn, som `_detail.scss`. */
.munin-explorer-hierarchy > p:empty {
  display: none;
}

.munin-explorer-hierarchy__nodes {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* INNRYKKET LIGGER PÅ LISTA, IKKE PÅ RADEN, og det er hele poenget: et innrykk som var padding på
   navnet ville flyttet seg med om raden tilfeldigvis har en glyf foran seg. Her kommer det av
   nestingen alene, så en variabelgruppe uten ikonspor og en datasamling med tre glyfer rykkes inn
   nøyaktig like mye.

   Nivålinja er $grey60 og ikke $grey30 som de andre kantene i mappa. En hjelpelinje er en
   ikke-tekstlig kontroll etter WCAG 1.4.11 og skylder 3:1 mot flata bak, og bak er sidebunnen
   $grey10: $grey30 måler 1,16:1 og $grey40 1,82:1, begge stryker, mens $grey60 gir 6,76:1. Samme
   utregning nivålinjene i fasettpanelet står på, og samme token. */
.munin-explorer-hierarchy__nodes .munin-explorer-hierarchy__nodes {
  border-left: 1px solid rgb(81, 84, 123);
  padding-left: 16px;
}

/* Lenka som åpner datasamlingas egen side fra treet. Pakken skriver den som SØSKEN av <details>-en,
   aldri inni <summary>-en (`KildeHierarchyView.razor.cs:204`): en lenke der er nøstet interaktivt
   innhold, den smelter inn i sammendragets tilgjengelige navn, og Blink fritar bare
   skjemakontroller — så et Ctrl+klikk ville åpnet ei fane OG foldet ut noden under fingeren.

   DERFOR LIGGER RUTENETTET PÅ <li>-EN OG IKKE PÅ LENKA. Nettopp fordi lenka følger etter et
   <details> på blokknivå, faller en udekorert lenke ned på ei linje for seg selv under noden — og
   under nodens barn når greina står åpen. Plasseringa er hovedsaken her, og den kan ingen regel på
   lenka alene rette.

   `minmax(0, 1fr)` på første spor og ikke `1fr`: navnet bærer `overflow-wrap: anywhere` fra
   `.munin-explorer-hierarchy` over, og et `1fr`-spor med standard `min-width: auto` ville likevel
   bedt om hele minsteinnholdsbredda og gjort den arven virkningsløs. Andre spor er `auto`, så en
   rad uten lenke — og det er de aller fleste — måler 0px der og står nøyaktig som før. */
.munin-explorer-hierarchy__nodes > li {
  align-items: baseline;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* REGELEN ER MED VILJE IKKE SKOPET TIL GREINFORMA. Samme klasse skrives både på grein- og
   bladformen av en datasamling, så en regel under `.munin-explorer-hierarchy__branch` ville tapt
   hver eneste datasamling uten variabelgrupper.

   $link OG IKKE $primary, og det er husets eget valg framfor stand-in-en. Stand-in-stilarket setter
   `var(--primary)` og måler 6,57:1 mot sidebunnen, men de to andre lenkene i denne mappa —
   sidetallene i `_pagination.scss:109` og nullstillinga i `_filters.scss:68` — står på $link, som
   måler 9,50:1 mot samme bunn. Understreking i tillegg til farge, så lenka skiller seg fra teksten
   rundt uten å lene seg på farge alene (WCAG 1.4.1).

   Fyllet er radens eget mål speilvendt, $ws-s over og under: «Åpne» på 0,875rem blir da høy og bred
   nok til å klarere 24x24 (WCAG 2.5.5) — lenka er et nytt tabulatorstopp ved siden av foldinga som
   allerede har ett. */
.munin-explorer-hierarchy__open {
  color: rgb(50, 55, 141);
  grid-column: 2;
  grid-row: 1;
  margin-left: 8px;
  padding: 8px 4px;
  text-decoration: underline;
}

.munin-explorer-hierarchy__open:hover {
  color: rgb(82, 30, 255);
}

/* Samme ring som greinene under. `_global.scss` fjerner ringen på `a` bare ved pekerfokus. */
.munin-explorer-hierarchy__open:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* Raden, og de to formene den kommer i er med vilje i samme regel: en gren er en <summary> og et
   blad en <span>, og de skal tegnes likt eller så vandrer venstrekanten nedover treet.

   `display: flex` fordi luft mellom ikonsporet og navnet SKAL være `gap` og ikke margin på glyfen
   eller padding på navnet. Sporet finnes ikke i det hele tatt på en rad uten glyf — pakken skriver
   ingen tom <span> å kollapse — så padding ville gitt de radene et innrykk for et spor som ikke er
   der. Med `gap` faller luften bort sammen med glyfen.

   `align-items: center` fordi en innebygd 1em-SVG ellers står på grunnlinja og henger under
   teksten. */
.munin-explorer-hierarchy__branch > summary,
.munin-explorer-hierarchy__leaf {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 4px 8px;
}

.munin-explorer-hierarchy__branch > summary {
  cursor: pointer;
}

/* MARKØREN MÅ TEGNES PÅ NYTT. `display: flex` gjør elementet til noe annet enn et listeelement, og
   da lager ingen nettleser `::marker` — målt i fasettpanelet rett før og etter da den regelen ble
   skrevet, og det gjelder her av samme grunn.

   GLYFEN ER HUSETS CHEVRON OG IKKE NETTLESERENS TREKANT. Fasettpanelet
   byttet til chevronen først, og disse to fulgte ikke med, så siden sto igjen med to
   foldeidiomer der den før hadde ett. Markøren tegnes nå med de samme to SVG-ene kildetabellen og
   fasettpanelet folder ut med — `keyboard-arrow/icon_down.svg` foldet og `icon_up.svg` åpen — i det
   samme målet, 16x16. Målt på rigg: 9,23x28,80px for grenen og 11,88x28,80px for metadataraden før,
   16x16px for begge etter.

   `content: ""` ER LIKE TOM SOM `/ ""` VAR, og det er hele grunnen til at det står slik: generert
   innhold TELLER MED i det tilgjengelige navnet, mens et bakgrunnsbilde aldri kommer inn i det.
   `content: ">"` ville lagt en glyf inn i navnet på hver eneste rad. Målt mot Chromes
   tilgjengelighetstre: alle tolv navnene på Norsk pasientregister er byte-identiske før og etter,
   foldet og åpen.

   TIL HØYRE, OG DET ER MÅLINGEN SOM BESTEMMER DET. Bladjusteringen måles mot NAVNET: en datasamling
   uten variabelgrupper er et blad og en med dem er en gren, og de to står side om side i samme
   liste. Med markøren først står grenens navn én trekantbredde til høyre for bladets, og
   venstrekanten vandrer. En markør til høyre bidrar ingenting til venstrekanten, så de to formene
   får samme navnposisjon uten et eneste kompensasjonspiksel — målt på localhost 2026-09-09 mot
   samme markup: 196,50px for grenen og 196,50px for bladet, 0px imellom. Samme plass som markøren
   har i fasettpanelet, så de to trærne på samme nettsted står likt.

   `order: 2` er ikke pynt. Et ::after ligger på order 0, og med glyfene flyttet bak navnet
   (`__icons` under) ville markøren lagt seg FORAN dem. Den skal være radens siste element.
   `margin-left: auto` står som før og holder den helt til høyre. */
.munin-explorer-hierarchy__branch > summary::after,
.munin-explorer-hierarchy__metadata > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  order: 2;
  width: 1rem;
  height: 1rem;
  background: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/1rem;
}

.munin-explorer-hierarchy__branch[open] > summary::after,
.munin-explorer-hierarchy__metadata[open] > summary::after {
  background-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

/* $grey30 OG IKKE $grey20, og det er flata under som avgjør det. Radhoveret i `_kilder.scss` er
   $grey20, men den tabellen står på hvitt: 1,13:1, som er nok til å bli sett. Treet står på
   sidebunnen $grey10 — målt både på localhost og på test-1-opt, der kroppen er
   `blazorcomponentpage` — og der måler $grey20 1,06:1 og er praktisk talt usynlig. Det er samme
   måling `_filters.scss` gjør om brikkas flate. $grey30 gir 1,16:1 mot sidebunnen, altså samme
   trinn som husets radhover tar på hvitt.

   IKKE $grey40, som ville vært tydeligere på 1,82:1: tallet ved siden av er $grey60 og faller da
   til 3,72:1 og stryker på 4,5:1. Det er nøyaktig fella `_filters.scss` beskriver — en farge som
   måles god i ro og stryker under pekeren. På $grey30 står tallet på 5,82:1 og navnet på 12,30:1.

   Bare grenene — et blad er ikke noe å trykke på, og en flate under det lover en handling som ikke
   finnes.

   `:focus-visible` deler flata fordi et hover uten tastaturmotstykke bare finnes for musa
   (WCAG 2.4.7). Den kommer i tillegg til ringen under, ikke i stedet for den. */
.munin-explorer-hierarchy__branch > summary:hover,
.munin-explorer-hierarchy__branch > summary:focus-visible,
.munin-explorer-hierarchy__metadata > summary:hover,
.munin-explorer-hierarchy__metadata > summary:focus-visible {
  background: rgb(230, 230, 237);
}

/* Samme ring som fasettpanelet. Fokusnullstillinga i `_global.scss` gjelder bare `button` og `a`,
   ikke <summary>. */
.munin-explorer-hierarchy__branch > summary:focus-visible,
.munin-explorer-hierarchy__metadata > summary:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* Ikonsporet. `flex: none` så glyfene aldri klemmes sammen når navnet ved siden av bryter — samme
   feil `__count` i fasettpanelet ble målt til. `gap` og ikke margin også her: en datasamling kan
   bære flere datakategorier, og de skal skilles fra hverandre uten at den første eller siste får
   luft den ikke skal ha.

   GLYFENE STÅR BAK NAVNET, og det er en måling og ikke en smakssak. Ett nivå koster
   `padding-left: $ws-default` pluss 1px nivålinje = 17px. Én glyf koster 1em pluss `gap` $ws-tiny
   = 18px når raden står på 0,875rem. De to ligger innenfor én piksel av hverandre, så en rad ett
   nivå dypere med N glyfer landet på samme x som en rad ett nivå grunnere med N+1 — og vannrett
   posisjon er den eneste kodingen av dybde i et tre. Et varierende glyftall forfalsket altså et
   nivå. Bak navnet koster glyftallet 0px, og venstrekanten koder dybde og bare dybde.

   Hele sporet flyttes, mappa til delkilden med: pakken legger alle glyfene i én <span>, så de to
   rollene deler posisjon selv om de ikke deler farge. Det er også det som stemmer her — en delkilde
   og en datasamling havner i samme liste (`Delkilder` og `DirectDatasamlinger` slås sammen på hvert
   nivå), så en mappe foran navnet ville skilt delkildens navn 18px fra datasamlingens på samme
   nivå: nettopp den forfalskningen regelen fjerner. */
.munin-explorer-hierarchy__icons {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 4px;
  order: 1;
}

/* INGEN FARGE PER DATAKATEGORI, og det er en avgjørelse og ikke en forglemmelse. Pakken skriver
   `stroke="currentColor"`, så glyfen arver radens egen tekstfarge og følger hver tilstand gratis.
   Kelda gir hver kategori sin egen Tailwind-tone, men de atten navnene løser seg opp i omtrent seks
   familier ved 16px og 2px strek — fire grønne, tre gule, tre blå, fire røde/lilla — og WCAG 1.4.11
   ville tvunget dem alle mørkere og dermed likere. Ordene står dessuten allerede i den
   skjermleser-bare teksten etter navnet, og formene er lucides egne og skiller seg fra hverandre.
   Setter man farge her, brytes arven og atten toner må spesifiseres på nytt for hver tilstand.

   `1em` og ikke px: glyfen skal binde seg til teksten den merker og følge radens skala. */
.munin-explorer-hierarchy__icon {
  flex: none;
  height: 1em;
  width: 1em;
}

/* Det ene unntaket, og det er en rolle og ikke en kategori: mappa en delkilde bærer er stillas,
   ikke innhold. Kelda gjør samme deling i sin egen fil — `datakategoriIcons.ts` gir grupperingsnoden
   `text-muted-foreground` og holder den utenfor fargesystemet — og $grey60 er tokenet i Stiler som
   ligger nærmest den. 7,23:1 mot hvitt og 6,76:1 mot sidebunnen; glyfen er dessuten aria-hidden
   dekorasjon ved siden av et navn som allerede sier hva raden er. De sytten datakategoriene får
   INGEN fargeerklæring — ikke en som tilfeldigvis er lik tekstfargen, for den ville sett lik ut i
   ro og brutt arven i alle andre tilstander. */
.munin-explorer-hierarchy__icon[data-node-icon=kilde] {
  color: rgb(81, 84, 123);
}

/* Tallet. Ingen kapsel: en fylt brikke på hver eneste rad i et tett tre er pynt, og flata måtte
   dessuten skiftet tone under radhoveret for ikke å forsvinne i det. Dempet tekst i stedet, samme
   form som `__count` i fasettpanelet, og de to målingene som trengs er allerede gjort der: $grey60
   gir 6,76:1 mot sidebunnen $grey10 og 5,82:1 mot $grey30-hoveret, begge godt over 4,5:1. $grey50
   måler 4,34:1 mot sidebunnen og stryker.

   `flex: none` retter det samme fasettpanelet ble målt til: navnet ved siden av bærer
   `overflow-wrap: anywhere`, og uten dette blir tallets minstebredde ett tegn og «103» deles over
   to linjer på hver rad der navnet brytes.

   `tabular-nums` fordi tallene leses nedover som en kolonne.

   Tallet står inntil navnet og ikke ute ved kanten, i motsetning til fasettpanelets: der er
   tallet en trefftelling for hele lista, her hører det til den ene noden. Markøren over tar
   høyrekanten. */
.munin-explorer-hierarchy__count {
  color: rgb(81, 84, 123);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Den beholdte metadatatabellen under treet — beskrivelser og gyldighetsperioder, foldet bort til
   den trengs. En $grey30-strek over, samme skille fasettpanelet setter mellom sine <details>.
   Tabellen inni er allerede kledd i `_trail.scss` og røres ikke herfra. */
.munin-explorer-hierarchy__metadata {
  border-top: 1px solid rgb(230, 230, 237);
  margin-bottom: 16px;
  padding-top: 8px;
}

.munin-explorer-hierarchy__metadata > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 4px 8px;
}

/* ---- the panel's group headings ----

   The period bar that used to live here is gone: Explorer stopped drawing it in 0.1.0-alpha.15
   when the row drawer was trimmed, and helsedata pins that release. The group heading
   is not ours to name. It wears the host's own `headline headline-xxs margin--none`, and Runa's 11px bold
   uppercase eyebrow was written over the top of that — which is what drew a group heading
   smaller than the 16px values it introduces. As decided on 2026-08-31, the eyebrow
   comes off and the heading inherits headline-xxs and the h1..h6 house colour, as the Explorer
   samples already did.

   Qualified with `.headline` because that is what the heading wears: `.headline.margin--none`
   in base/_headline.scss is two classes to a bare `.munin-explorer-group`'s one, so the space
   between one group and the next never applied here at all. At equal weight the later rule
   wins, and components/ is emitted after base/ in main.scss. */
.headline.munin-explorer-group {
  margin: 20px 0 8px;
}

/* The kilde step of the trail is a control, not a link — this component has no routes, so it
   discloses the kilde in place instead of navigating to it. Drawn as a link anyway, because that
   is what it behaves like from the reader's side. */
.munin-explorer-crumb {
  color: rgb(50, 55, 141);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.munin-explorer-crumb:hover {
  color: rgb(82, 30, 255);
}

/* ---- the hierarchy trail over the results ----

   The same shape as the kilde trail in the panel above, and for the same reason: Stiler has no
   breadcrumb rule that can be read back off its compiled stylesheet, so the steps are an <ol> and
   the chevrons between them are generated content — decoration, not announced, and not copied out
   with the text. The steps wear `munin-explorer-crumb` too, so the two trails on one screen
   cannot end up looking like different kinds of thing.

   A consumer on an older Stiler still gets a working trail: a numbered list of buttons and a ×
   after it, in the right order, with the right names. What it loses is the shape that says
   "path" rather than "list". */
.munin-explorer-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.munin-explorer-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.munin-explorer-breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: rgb(81, 84, 123);
}

/* The step the selection actually stands on. It is still a button — pressing the step above it
   makes THIS one the last, and a last step drawn as plain text would take the pressed control out
   of the document — so what says it is inert is aria-current, exactly as aria-disabled says it for
   the pager's ends. */
.munin-explorer-breadcrumb [aria-current=true] {
  color: rgb(38, 32, 69);
  text-decoration: none;
  cursor: default;
}

/* `munin-explorer-breadcrumb__clear` STOD HER og er borte. Den kledde × -en
   som tømte hierarkiet; Explorer fjernet selve kontrollen 2026-09-10,
   og pakka skriver ikke lenger navnet til DOM-en — kontrollert mot `origin/main` i
   Fhi.Munin.Explorer 2026-09-11: `munin-explorer-breadcrumb` er det eneste namnet lista over
   stien skriver. Reglane var 4 + 1 erklæring og traff ingenting.

   PRØVESTILARKA I EXPLORER BEHOLDT SIN KOPI med vilje, fordi vakta
   `assert-sample-css-matches-stiler.sh` leser den PUBLISERTE pakka (0.1.42 i dag), ikke Stilers
   `main`. Når pinnen flyttes forbi versjonen denne endringa havner i, blir prøvearkets regel en
   selektor bare prøvearket har — og vakta sier ingenting om dem. Den må derfor slettes i den samme
   endringa som flytter pinnen, i Explorer-repoet. */
/* The drill-in view. A kilde or datasamling takes over the component's area rather than nesting
   a third panel inside an open row — Runa navigates to a page for this, and a component with no
   router gets closest by giving the reader the full width and a way back. The base element styling
   for what it holds — the heading, the status line, the <dl> — is up under "base element styling
   for the kilde and datasamling drill-in"; this is the separation from the chrome above it. */
.munin-explorer-drilldown {
  padding: 4px 0 24px;
}

/* Three prefixes share the selector lists from here down: `kilde` is KildeView, `whole` is the
   variable explorer's own panel, and `datasamling` is DatasamlingView. The three surfaces are the
   same shape, and a reader meeting two of them on one screen should not be able to tell which
   component drew which, so they share one set of rules rather than each carrying a copy of it.

   The fourth selector is the chassis's own name, worn by variabellister: that surface is the one
   detail page with no prefix of its own, and a name block drawn four ways would read as four
   components. Added to this group rather than restated next door, so the four cannot drift. */
.munin-explorer-kilde__header,
.munin-explorer-whole__header,
.munin-explorer-datasamling__header,
.munin-explorer-page__header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* Kildesida har faktarekka rett under navneblokka, med sin egen strek over: to streker 30px fra
   hverandre. Faktarekkas strek står alene. (forhåndssjekk 2026-10-19) */
.munin-explorer-kilde__header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* The page name stays above section headings in the visual hierarchy even when the host
   mounts the view deeper in its document outline. Not the shared chassis
   header: on the saved lists it names a list inside the explorer, and as H1 outranked the page. */
:is(.munin-explorer-kilde__header, .munin-explorer-whole__header,
.munin-explorer-datasamling__header, .munin-explorer-instrument__header) > :is(h1, h2, h3, h4, h5, h6):first-child {
  font: normal 3.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  :is(.munin-explorer-kilde__header, .munin-explorer-whole__header,
  .munin-explorer-datasamling__header, .munin-explorer-instrument__header) > :is(h1, h2, h3, h4, h5, h6):first-child {
    font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  :is(.munin-explorer-kilde__header, .munin-explorer-whole__header,
  .munin-explorer-datasamling__header, .munin-explorer-instrument__header) > :is(h1, h2, h3, h4, h5, h6):first-child {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
:is(.munin-explorer-kilde__header, .munin-explorer-whole__header,
.munin-explorer-datasamling__header, .munin-explorer-instrument__header) > :is(h1, h2, h3, h4, h5, h6):first-child {
  overflow-wrap: anywhere;
}

/* The identifiers are what a reader looks the kilde up by elsewhere, so they are set the way the
   kodeverk reference is: a run of digits reads as an identifier rather than as prose. */
.munin-explorer-kilde__identifiers,
.munin-explorer-whole__code,
.munin-explorer-datasamling__identifiers {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.8125rem;
}

.munin-explorer-whole__description,
.munin-explorer-datasamling__description {
  margin: 12px 0 0;
  /* prose, and prose the full width of a wide window is unreadable */
  max-width: 45ch;
}

/* The kilde description is the long one and folds behind «Les mer» past about eight lines, so it
   takes a wider measure than the two short ones above. */
.munin-explorer-kilde__description {
  margin: 12px 0 0;
  max-width: 70ch;
}

/* The held-back paragraphs. The Explorer hides them inline while folded, because `div` here is
   `display: block` and outranks [hidden]; this only keeps the wrapper from adding space. */
.munin-explorer-kilde__description-rest {
  margin: 0;
}

/* «Les mer» / «Vis mindre» wears `hd-button-reset`, which leaves it reading as plain text, so it is
   dressed as a link. Same specificity as the reset and loaded after it. */
.munin-explorer-kilde__description-toggle {
  color: rgb(50, 55, 141);
  cursor: pointer;
  margin: 8px 0 0;
  padding: 0;
  text-decoration: underline;
}

.munin-explorer-kilde__description-toggle:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* Skulds to hopplenker under beskrivelsen («Vis N variabler →» og datasamlingene), side om side og
   brutt over flere linjer på en telefon. Tallene
   er eksempelarkenes. Elementet er en `p.margin--none`, og `margin--none` har ingen regel
   alene (bare `.caption`/`.headline`/`.lead.margin--none`), så toppmarginen her står. */
.munin-explorer-kilde__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 12px;
}

/* Explorer setter en «·» mellom lenkene for vertsark uten denne regelen; her
   gir `gap` avstanden, og prikken ville doblet den og blitt stående alene når rekka brytes. */
.munin-explorer-kilde__jumps > span {
  display: none;
}

/* «Søk om tilgang» på kildesiden: Utforskeren skriver par, en setning og så knappen med lenkene.
   Knappen står alene og hver lenke på sin egen linje under den; en lenke ved siden av knappen
   leses som en del av den. */
.munin-explorer-kilde__access {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* `p.margin--none` har ingen regel alene, så margen nulles her; ellers blir 8px til 44px. */
.munin-explorer-kilde__access > p {
  margin: 0;
}

.munin-explorer-kilde__access > p:nth-child(even) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.munin-explorer-kilde__access > p:nth-child(odd):not(:first-child) {
  margin-top: 16px;
}

/* På telefonbredde er registerets «Søk om tilgang hos registeret» med ikon bredere enn boksens kolonne,
   og knappens nowrap ville skjøvet den ut; her brytes teksten i stedet. */
@media all and (max-width: 767px) {
  .munin-explorer-kilde__access .hd-button-square {
    height: auto;
    min-height: 2.75rem;
    white-space: normal;
  }
}

/* Kildesidas «← Tilbake til kildeutforsker» trengs bare der stien ikke vises: under 768px
   (`.breadcrumbs` i layout) og mens kilden hentes eller ikke kom. Fra 768px, og bare med en sti i
   samme region, er stien veien tilbake; på telefonen er lenken den eneste veien tilbake. */
@media all and (min-width: 768px) {
  .munin-explorer-drilldown:has(.breadcrumbs) > .munin-explorer-kilder__back {
    display: none;
  }
}

/* A grid track is `min-width: auto` by default, so the widest thing in the column sets the floor.
   The datasamlinger table has four columns of Norwegian names in it and would push the column
   past the right edge of the page rather than shrink. Same trap the filter panel meets, same fix.
   The column sits in the chassis body's grid now (`_page.scss`), and the guard is what keeps it
   inside that track. */
.munin-explorer-kilde__main, .munin-explorer-whole__main, .munin-explorer-datasamling__main {
  min-inline-size: 0;
}

/* Who is in the data and who is not — prose in the main column rather than a row in a metadata
   grid, because it is the first question a researcher asks and an answer of that length does not
   belong in a two-column field list. The main column is 1359px wide at 1718px and a paragraph
   that wide is unreadable, so it takes the same cap, and for the same reason, as the description
   above. KildeView has no counterpart: its criteria arrive inside the metadata grid, already
   measured to a column. */
.munin-explorer-datasamling__criteria {
  max-width: 45ch;
  overflow-wrap: anywhere;
}

/* The datasamlinger table. Same shape as the Data tab's code table — the two are the same kind of
   thing, a list of rows with a heading each — with the name column left to wrap, because a
   datasamling name is a Norwegian sentence and nowrap on it is a horizontal scrollbar. */
.munin-explorer-kilde__datasamlinger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.munin-explorer-kilde__datasamlinger th, .munin-explorer-kilde__datasamlinger td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(230, 230, 237);
}

.munin-explorer-kilde__datasamlinger thead th {
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-weight: 600;
}

/* The name is a <th scope="row">, which browsers centre and bold by default. It is a label for
   the row, not a heading over it. */
.munin-explorer-kilde__datasamlinger tbody th {
  font-weight: 600;
}

/* Uten bredder ga auto-layout all plassen til beskrivelsen, og periode og antall brøt på hver
   rad. Bare de to får bredde: antall som width: 1% + nowrap, periode i prosent så den brytes
   ved tankestreken i stedet for inni en dato. Målingene ligger i PR 38959. */
.munin-explorer-kilde__datasamlinger tr > :nth-child(3) {
  width: 24%;
}

.munin-explorer-kilde__datasamlinger tbody td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
}

/* FØRSTE kolonne, som blokka over med vilje lar være — og grunnen til at den avgjørelsen tas opp
   igjen i stedet for å overkjøres i stillhet: den ble tatt da seksjonen var ÉN tabell. Da er det
   riktig å la navn og beskrivelse dele resten etter innhold, og at en tom beskrivelse faller
   sammen så navnet får plassen er en fordel.

   Utforskeren tegner nå én tabell per nivå i delkildetreet, og auto-layout
   måler hver tabell mot sitt eget innhold. På Tromsø ga det fem tabeller med navnekolonner på 903,
   1426, 270, 1409 og 1479 piksler, og bølgen hvis beskrivelse er en vegg av markdown klemte de tre
   andre ned til splinter. Ingenting står på linje nedover siden.

   Med navn festet er beskrivelsen den eneste frie kolonnen, og da er alle nivåene enige. Prisen er
   tilfellet over: en datasamling uten beskrivelse utvider ikke lenger navnet. Det er et reelt tap
   og et bevisst et — på tvers av nivåer er det verdt mer at kolonnene står på linje.
   `table-layout: fixed` løser det samme og brukes ikke, fordi det kaster bort `width: 1%`-trikset
   på antall-kolonnen: under fixed er en bredde en bredde. */
.munin-explorer-kilde__datasamlinger tr > :nth-child(1) {
  width: 30%;
}

/* Katalogen lagrer beskrivelse som markdown, så cellene bærer bare URL-er — én ubrutt tekstbit lang
   nok til å skyve en kolonne forbi sin andel og tabellen forbi containeren sin. */
.munin-explorer-kilde__datasamlinger td,
.munin-explorer-kilde__datasamlinger th {
  overflow-wrap: anywhere;
}

/* Kort på mobil: på 320px fikk beskrivelsen 37px og en bokstav eller to per linje. Hver celle bærer
   kolonnenavnet i data-label; `/ ""` holder det unna skjermleseren, som har <th> fra før. Panelet i
   kildelisten er med siden kildelisten selv ble kort og ikke ruller sidelengs lenger. */
@media all and (max-width: 767px) {
  .munin-explorer-kilde__datasamlinger, .munin-explorer-kilde__datasamlinger tbody, .munin-explorer-kilde__datasamlinger tr, .munin-explorer-kilde__datasamlinger th, .munin-explorer-kilde__datasamlinger td {
    display: block;
  }
  .munin-explorer-kilde__datasamlinger thead {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .munin-explorer-kilde__datasamlinger tr > :nth-child(n) {
    border-bottom: 0;
    padding: 0 0 8px;
    white-space: normal;
    width: auto;
  }
  .munin-explorer-kilde__datasamlinger tbody td:nth-child(n) {
    white-space: normal;
    width: auto;
  }
  .munin-explorer-kilde__datasamlinger tbody tr {
    border-bottom: 1px solid rgb(230, 230, 237);
    padding: 12px 0 4px;
  }
  .munin-explorer-kilde__datasamlinger td::before {
    color: rgb(81, 84, 123);
    content: attr(data-label);
    content: attr(data-label)/"";
    display: block;
  }
  .munin-explorer-kilde__datasamlinger td:empty {
    display: none;
  }
}
/* ---- avkryssingskolonna i panelet ----

   Kelda lar leseren merke datasamlinger i det utfoldede panelet og sende utvalget videre til
   variabelutforskeren. Da tegner tabellen en kolonne FORAN de fire
   den har fra før, og modifikatoren er det som sier at kolonnen er der.

   MODIFIKATOREN ER IKKE ET NAVN FOR NAVNETS SKYLD — den er det reglene over trenger. Kolonnene her
   er adressert etter POSISJON: `:nth-child(1)` er navnet, `:nth-child(3)` er gyldigheten og
   `tbody td:nth-child(4)` er antallet. En kolonne foran flytter alle tre ett hakk, så uten skoping
   ville de 30 prosentene truffet avkryssingsboksen, de 24 beskrivelsen og `nowrap` gyldigheten.
   Målt på riggen med markupen limt inn i en utfoldet rad, før reglene under fantes: første kolonne
   268,8px på en boks som trenger 32, og navnet klemt ned til 148,7px av de 268,8 det skal ha.
   Derfor festes hver posisjonsregel på nytt her, ett hakk ut, og beskrivelsen nullstilles til
   `auto` fordi den er den frie kolonnen i den vanlige tabellen også.

   TABELLEN UTEN MODIFIKATOR ER RØRT AV INGENTING HER. KildeView tegner den samme tabellen
   (DatasamlingTable.For) og skal aldri få hverken kolonnen eller modifikatoren, og Keldas egen
   drill-in likeså. Derfor står ingen av reglene under uten `--selectable`; reglene over gjelder
   begge tabellene.

   Begge klassenavnene er avtalt med Fhi.Munin.Explorer og skal ikke døpes om i bare det ene
   repoet. Navnet er dessuten med vilje et ANNET enn kildetabellens `munin-explorer-kilder__select`:
   panelet ligger inne i `.munin-explorer-kilder`, så den etterkommerregelen ville nådd hit av seg
   selv — og `_kilder.scss` teller kolonner med `:has(.munin-explorer-kilder__select)`, så et
   gjenbrukt navn ville flyttet kildetabellens egne brekkpunkter. Målt: ingen regel i Stiler treffer
   den nye cella før reglene under. */
.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tr > :nth-child(1) {
  width: 32px;
}

.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tr > :nth-child(2) {
  width: 30%;
}

.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tr > :nth-child(3) {
  width: auto;
}

.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tr > :nth-child(4) {
  width: 24%;
}

/* Gyldigheten arver `width: 1%` og `nowrap` fra regelen som mener ANTALLET, og bredden slås av
   regelen rett over. `nowrap` gjør den ikke — den må slås av her, ellers står datoparet på én linje
   og skyver tabellen forbi panelet sitt. */
.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tbody td:nth-child(4) {
  white-space: normal;
}

.munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tbody td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
}

/* På mobil er tabellen kort (over), og breddene over gjelder kolonner som ikke finnes der; uten denne
   fikk navnet 30 % av kortet og ble brutt midt i ordet. */
@media all and (max-width: 767px) {
  .munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tr > :nth-child(n),
  .munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable tbody td:nth-child(n) {
    width: auto;
    white-space: normal;
  }
  .munin-explorer-kilde__datasamlinger.munin-explorer-kilde__datasamlinger--selectable .munin-explorer-kilde__datasamling-select {
    text-align: left;
  }
}
/* Sjølve cella, i samme form som kildetabellens `__select`: 4px sideluft, midtstilt boks, og
   bredden er kildetabellens 32px og ikke en egen måling — de to avkryssingskolonnene skal være
   like breie. To klassenavn (0,2,0) slår celleregelen over, som har både klasse og element
   (0,1,1) og ellers ville holdt boksen venstrestilt. Ingen `!important`. */
.munin-explorer-kilde__datasamlinger--selectable .munin-explorer-kilde__datasamling-select {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  vertical-align: top;
}

/* Boksen selv, av samme grunn som i kildetabellen: Stilers eneste regel for elementet er
   nettleserens egen `input[type=checkbox i]`, som tegner 13 x 13, og WCAG 2.5.5 ber om 24 x 24.
   Her finnes ingen etikett rundt boksen å gjøre stor i stedet. 32px kolonne minus 2x4px sideluft er
   nøyaktig de 24px som skal inn, og margen må nullstilles fordi nettleserens 3px 3px 3px 4px er
   skjev. (0,3,1) mot (0,1,1). */
.munin-explorer-kilde__datasamlinger--selectable .munin-explorer-kilde__datasamling-select input[type=checkbox] {
  height: 24px;
  margin: 0;
  width: 24px;
}

/* ---- delkildetreet ----

   En studieserie holder datasamlingene sine én per bølge, og bølgene er studiens organiserende
   faktum, så seksjonen er en nestet <ul> av <li> — én per delkilde, hver med sin egen
   datasamlingstabell og eventuelle delkilder under seg. En ekte liste framfor innrykkede <div>-er:
   en <ul> bærer forelder/barn-forholdet til en skjermleser av seg selv, mens innrykk bare bærer det
   til en seende leser, og en automatisk tilgjengelighetssjekk er blind for struktur som aldri ble
   merket opp.

   Formen er filterpanelets, ikke funnet på her: `_filters.scss` kler allerede en nestet <ul> av
   delkilder i tre deklarasjoner — `list-style: none`, `padding-left: 20px` på lista, og
   `padding-left: 0` på TOPPNIVÅET. Den siste er hele lærdommen: <ul>-en er SØSKEN av tabellen over
   seg, så et innrykk der påstår en forelder den ikke har. Uten regelen lå toppnivåbølgene 36px inn
   rett under siste rad i den tabellen og ble lest som barn av den. Innrykk brukes bare på dybde
   INNE i treet. */
.munin-explorer-kilde__delkilder {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.munin-explorer-kilde__main > .munin-explorer-kilde__delkilder,
.munin-explorer-whole__main > .munin-explorer-kilde__delkilder {
  padding-left: 0;
  margin-top: 28px;
}

/* En $grey30-strek mellom bølgene — samme skille filterpanelet setter mellom sine <details>. */
.munin-explorer-kilde__delkilde {
  padding-top: 14px;
  border-top: 1px solid rgb(230, 230, 237);
}

.munin-explorer-kilde__delkilde + .munin-explorer-kilde__delkilde {
  margin-top: 14px;
}

.munin-explorer-kilde__delkilde > .munin-explorer-kilde__delkilder {
  margin-top: 14px;
}

/* headline-xxs, samme størrelse som en metadatagruppes overskrift: skalaen har ingenting verifisert
   mellom den og headline-s som seksjonsoverskriften over bærer. Dybden bæres av overskriftsNIVÅET
   og av innrykket, ikke av en størrelse funnet opp for å fylle gapet. */
.munin-explorer-kilde__delkilde-name {
  margin-top: 0;
}

/* Delkildens egne ord, mellom navnelinja og tabellen. Navnet over bærer headline-xxs — `font:
   $heading-xxs`, 16px graphik-medium — så beskrivelsen tar trinnet under på samme skala, `$font-s`:
   14px, vanlig graphik, og $grey60 som beskrivelsen av kilden lenger opp. Størrelse, snitt og farge
   skiller dem alle tre, med vilje: i katalogen gjentar Tromsø-delkildene navnet sitt i beskrivelsen
   og to like linjer skilt bare av farge leses som en dobbeltføring.

   <p>-en kommer uten klasse fra utforskeren, og Stiler kler ingen naken <p>, så regelen må sette
   familie, linjehøyde og marg selv — ellers arver avsnittet nettleserens standarder. Derfor
   `font:`-kortformen framfor `font-size`, og en eksplisitt marg. */
.munin-explorer-kilde__delkilde-description {
  margin: 8px 0 0;
  max-width: 45ch;
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  color: rgb(81, 84, 123);
}

.munin-explorer-kilde__delkilde > .munin-explorer-kilde__datasamlinger {
  margin-top: 10px;
}

/* An identifier line is set in monospace around a code, and a code can run to 40 characters or
   more: V_LMR.VARE_ADMINISTRASJONSVEI_BESKRIVELSE is 293px, and at a 320px viewport it ran 21px past
   the header's right edge. Kept apart from the font rule above so the line references into this file
   from `_page.scss` stay true. */
.munin-explorer-kilde__identifiers,
.munin-explorer-whole__code,
.munin-explorer-datasamling__identifiers {
  overflow-wrap: anywhere;
}

/* ---- the shared detail chassis: sections a contents nav can anchor to ----

   The four detail surfaces (Kelda's kilde, Runa's variabel, datasamling, and the whole-variable
   panel) render their main column as a flat run of heading, dl, heading, dl — twenty sibling
   elements with no wrapper of any kind, and one heading in twelve carries an id. A contents nav
   has nothing to link to and a scroll-spy has nothing to observe. The RCL half of this pair
   wraps each section heading and its content in

     <section class="munin-explorer-page__section" id="metadata" data-nav-section>

   and this file is the stylesheet half. THAT HALF HAS SHIPPED, so these rules are LIVE: the
   chassis names went out in Explorer 0.1.0-alpha.13, which helsedata pins (Fhi.Helsedata main,
   4b3e1b6, 2026-09-22). Checked against the packages themselves — alpha.8 carries none of these
   names and alpha.13 carries all of them. Measured on the rig at 1440 across the three detail
   surfaces, `.munin-explorer-page__body` renders once on each and `.munin-explorer-page__fields`
   7 / 6 / 3 times (kilde / datasamling / variabel). This comment used to say the rules matched
   nothing, which was true when it was written; deleting a rule on that reasoning would now strip
   a live page.

   THE PREFIX IS `munin-explorer-page`, NOT `munin-explorer-detail`. The latter is taken and means
   something else — it is the drill-in panel inside a result row (VariableSearch.razor:707), it
   carries about forty rules in `_detail.scss` next door, and `munin-explorer-detail-{instance}` is
   separately an element id written by KildeSearch.razor.cs:557. `munin-explorer-page` was checked
   against all 145 munin-explorer names in this repo and is free.

   THE NUMBERS ARE BORROWED FROM helsedata's OWN REGISTER PAGES, not from the redesign mockups.
   `pages/_healthregisterpage.scss` already carries this exact pattern, down to the attribute:

     :15-17    .register-page__section[data-nav-section] { scroll-margin-top: 140px; }
     :201-203  @media (max-width: 768px) { … { scroll-margin-top: 80px; } }
     :11-13    .register-page__body-text > .register-page__section:last-child {
                   min-height: calc(60vh - 120px); }

   The mockups say 110px for the first of those. 110 matches nothing this repo owns; 140 is what
   the host's own anchored pages have used all along, and a Munin detail page sits in the same
   chrome. Where the mockup and Stiler disagree, Stiler wins — do not "correct" these back.

   `data-nav-section` is helsedata's attribute too, so the hook is borrowed rather than invented.
   `_detail.scss:144-147` records the previous time the explorer borrowed from this same file
   (`top: 20px` / `calc(100vh - 40px)` for the sticky filter panel). */
/* Clearance for an anchor jump. Nothing in the explorer's chrome is fixed, but the host's is, and
   a section scrolled flush to the viewport top lands under it. */
.munin-explorer-page__section[data-nav-section],
.munin-explorer-page__anchor {
  scroll-margin-top: 140px;
}

/* The last section needs room under it, or the final entry of a contents list can never become
   the active one: the reader hits the bottom of the document while the last heading is still low
   in the viewport, the scroll-spy never sees it cross, and the list stays stuck one entry short.
   Same fix and the same number as the register pages. */
.munin-explorer-page__section:last-child {
  min-height: calc(60vh - 120px);
}

/* Style only the main column's sections: nested metadata groups retain their smaller headings.
   Empty sections awaiting asynchronous content must not reserve a gap. */
.munin-explorer-page__main > .munin-explorer-page__section > :is(h2, h3, h4, h5, h6):first-child {
  font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  margin: 40px 0 16px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(230, 230, 237);
  overflow-wrap: anywhere;
}
@media all and (max-width: 767px) {
  .munin-explorer-page__main > .munin-explorer-page__section > :is(h2, h3, h4, h5, h6):first-child {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.munin-explorer-page__section:first-child > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Kildesidas seksjoner ett trinn opp og streken over i stedet for under (godkjent
   2026-10-16): 1.75rem, 1.5rem under 768px, 32px luft over streken og 16px mellom streken og
   teksten. Uten strek under trenger overskrifta ingen luft under seg utover marginen, så
   `padding-bottom` går til 0 og overskrifta står nærmere sitt eget innhold enn streken over.

   Bare kildesida: datasamling, variabel og den hele variabelen beholder regelen over. Samme vekt
   (0,3,1) som `:first-child`-regelen over og senere, så den første seksjonens nullmargin må sies på
   nytt, med én klasse til. Den første får ingen strek: faktarekkas strek under står rett over den. */
.munin-explorer-kilde__main > .munin-explorer-page__section > :is(h2, h3, h4, h5, h6):first-child {
  font-size: 1.75rem;
  margin-top: 32px;
  padding-top: 16px;
  padding-bottom: 0;
  border-top: 1px solid rgb(230, 230, 237);
  border-bottom: none;
}
@media all and (max-width: 767px) {
  .munin-explorer-kilde__main > .munin-explorer-page__section > :is(h2, h3, h4, h5, h6):first-child {
    font-size: 1.5rem;
  }
}

.munin-explorer-kilde__main > .munin-explorer-page__section:first-child > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Feltetikettene (Formål, Lovverk …) som små versaler, med faktarekkas etikett som forbilde
   (`__facts dt` under): 600, store bokstaver, 0.07em sperring og $grey60. 0.75rem og ikke faktarekkas
   0.6875rem, fordi etiketten her står over brødtekst i 1rem og ikke over en tall-linje. $grey60 på
   sidebunnen $grey10 er 6.76:1 mot kravet 4.5:1 for 12px tekst. */
.munin-explorer-kilde .munin-explorer-page__fields dt {
  color: rgb(81, 84, 123);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Less chrome overhead on a phone, so less clearance is needed. 80px is the register pages'
   number; the breakpoint is Stiler's own `$mobile` token (max-width: 767px) rather than the 768px
   that file hardcodes, because every other media query under `components/munin-explorer/` already
   steps at 767/768 through this token and a second, one-pixel-off threshold in the same family is
   how a layout ends up disagreeing with itself at exactly one width. */
@media all and (max-width: 767px) {
  .munin-explorer-page__section[data-nav-section],
  .munin-explorer-page__anchor {
    scroll-margin-top: 80px;
  }
}
/* ---- the body: a contents rail on the left, one content column on the right ----

   The detail body WAS a two-track grid whose second track was a 320px sidebar (measured live
   2026-09-11 at 1440px: `grid-template-columns: 1033px 320px`, gap 24). The redesign turns that
   around: the contents nav moves to the LEFT and what is left on the right is one column, full
   width.

   THE NUMBERS ARE helsedata's, FROM `pages/_healthregisterpage.scss:3-21`, where their own
   register pages already carry this layout:

     nav width    250px                 :7    width: 250px
     gap          40px                  :20   .register-page__body-text { margin-left: 40px }
     sticky top   20px                  :4    top: 20px
     max-height   calc(100vh - 40px)    :5
     breakpoint   1024px                :173  @media (max-width: 1024px) — nav leaves the row

   The redesign mockups say 236 / 56 / 78 / 900 for those four. None of the four matches anything
   this repo owns, and a Munin detail page sits inside the same chrome as a register page, a
   click away from one. Where the mockup and the host disagree, the host wins.
   `_detail.scss:144-147` records the previous time the explorer borrowed from this same file -
   the sticky filter panel took `top: 20px` and `calc(100vh - 40px)` from it — so this is the
   second borrow of the same pair of numbers, not a new invention.

   ONE DELIBERATE DEPARTURE, IN MECHANISM ONLY. helsedata lays this out with flex: the nav is
   `flex-shrink: 0` at a fixed 250px and the body text carries `margin-left: 40px`. This is a
   GRID, because `minmax(0, 1fr)` on the content track is the thing that keeps a wide table
   inside the page. A flex item and a bare `1fr` track are both floored at min-content, so the
   widest table in the column would set the page width and the page would scroll sideways — the
   same trap `_trail.scss:118-125` and the filter panel in `_detail.scss` already carry a guard
   for, and a fault filed several times against these pages. The numbers are theirs; only the
   mechanism is ours.

   THE CONTENTS LIST ITSELF GETS NOTHING HERE. `form-menu__list`, `form-menu__list__item--active`
   and `--active-child` live at `pages/_healthregisterpage.scss:29-67` as GLOBAL, unscoped
   classes — they are not nested under `.register-page`. The RCL half wears them directly and
   inherits the host's link, hover, active and active-child styling for free. A second copy
   scoped to the explorer is the duplication this file exists to avoid, so there is deliberately
   no rule below for any `form-menu` name.

   The three old `__body` rules for `-kilde`, `-whole` and `-datasamling` are GONE:
   the RCL stopped emitting those elements, and every detail surface now
   lays out through the rule below. Measured on the rig at 1440px, kilde, datasamling and
   variabel all draw `grid-template-columns: 250px 1085px`. */
.munin-explorer-page__body {
  display: grid;
  gap: 40px;
  padding-top: 40px;
}

/* One column below the breakpoint, and the nav simply stays in the flow above the content. The
   register pages reach for `display: none` there instead; a contents list is the only map of a
   long page, so it is kept and unstuck rather than hidden. Sticky is what has to go: a 250px
   rail pinned to the viewport on a 320px phone would stand over a third of the screen.

   `$desktop-all` (min-width: 1025px) rather than a literal, and deliberately not the 1024px the
   retired `__body` grid hardcoded. It is the exact complement of `$tablet` (max-width: 1024px), so
   there is no width at which both a min- and a max- rule apply, and it puts the fold on the same
   pixel as the register pages' own `@media (max-width: 1024px)`. */
@media all and (min-width: 1025px) {
  /* GATED ON THE COLUMN BEING THERE, because `__toc` is emitted only when something fills it and
     one detail surface never fills it at all: variabellister has no contents nav by decision, the
     Kilde filter beside it does that job. Ungated — as this rule shipped — a one-child body takes
     the FIRST track, so that page's whole table, scroller and pager lay out in 250px of a 1440px
     window. `display: grid` and `gap` stay unscoped above: a lone child in a single track costs
     nothing.

     FIRST USE OF `:has()` UNDER THIS PREFIX. Where it is unsupported the rule simply does not
     match and the body stays one full-width track, which is the safe direction to degrade in. A
     modifier class would do the same job, but it would be a new name in the RCL, a README
     inventory row and a host note; this needs none of the three. */
  .munin-explorer-page__body:has(> .munin-explorer-page__toc) {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
  }
  /* 47em is the reading measure of Skuld's detail page (846px here), in the side-by-side layout
     only: stacked at 1024 and narrower, a capped main sat 846px wide under a full-width contents
     list. Variabellister has no contents list and keeps its full-width table. */
  .munin-explorer-page__body:has(> .munin-explorer-page__toc) > .munin-explorer-page__main {
    max-width: 47em;
  }
  /* `max-height` alone only clips in theory — without a scroller a contents list longer than the
     viewport spills over whatever follows it. `overflow-y: auto` is what the explorer's own
     sticky panel pairs it with (`_detail.scss:153-156`), so this is the same pair. Both clear the
     sticky name bar above, whose height grows as a long name wraps: the Explorer's module measures
     it into `--munin-explorer-stuckbar-height`, 0 without the module, so the list never slides under
     the bar. */
  .munin-explorer-page__toc {
    position: sticky;
    top: calc(var(--munin-explorer-stuckbar-height, 0px) + 20px);
    max-height: calc(100vh - 40px - var(--munin-explorer-stuckbar-height, 0px));
    overflow-y: auto;
  }
}
.munin-explorer-page__toc h2 {
  font: 0.6875rem/160% graphik-medium, Arial, Helvetica, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(81, 84, 123);
  margin: 0 0 10px;
}

/* Innholdslisten foldes på mobil, der den ellers fyller skjermen. Explorer tegner to overskrifter: den vanlige, og
   en knapp i en overskrift med antallet (WAI-ARIA-mønsteret for en disclosure). Bredere enn 767px vises
   bare den vanlige; på mobil bare knappen, og listen er skjult til knappen er åpnet. */
.munin-explorer-page__toc .munin-explorer-page__toc-toggle {
  display: none;
}

@media all and (max-width: 767px) {
  .munin-explorer-page__toc h2:not(.munin-explorer-page__toc-toggle) {
    display: none;
  }
  .munin-explorer-page__toc .munin-explorer-page__toc-toggle {
    display: block;
    margin: 0;
  }
  .munin-explorer-page__toc-toggle button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .munin-explorer-page__toc-toggle button:focus-visible {
    box-shadow: 0 0 0 2px rgb(66, 139, 255);
    outline: none;
  }
  .munin-explorer-page__toc-toggle button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }
  .munin-explorer-page__toc-toggle button[aria-expanded=true]::before {
    transform: rotate(45deg);
  }
  .munin-explorer-page__toc-toggle:has(> [aria-expanded=false]) + ul {
    display: none;
  }
}
.munin-explorer-page__toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `li a`, not `a`: the nav borrows helsedata's own list class, whose `a` rules sit at (0,1,1). */
.munin-explorer-page__toc li a {
  display: block;
  min-height: 24px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid rgb(230, 230, 237);
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  color: rgb(38, 32, 69);
}

.munin-explorer-page__toc li a:hover {
  border-left-color: rgb(187, 184, 201);
  background-color: transparent;
}

/* Presence, not a value: the RCL omits the attribute on every other entry. */
.munin-explorer-page__toc li a[aria-current] {
  border-left-color: rgb(82, 30, 255);
  color: rgb(82, 30, 255);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

/* A grid track is floored at `min-width: auto`, so without this the widest thing in the column -
   the datasamlinger table, four columns of Norwegian names — sets the floor and pushes the page
   wider than the window. Same guard as `_trail.scss:124`. */
.munin-explorer-page__main {
  min-inline-size: 0;
}

/* ---- the chassis's own fact list ----

   Every fact list on every detail surface is rendered `<dl class="munin-explorer-meta__grid">`
   (`DetailBlocks.cs:50` and `:152`) — but `munin-explorer-meta` is the ROW DRILL-IN PANEL, the
   thing that opens inside a result row, and its rules live in `_results.scss:808-838` directly
   under the panel's own padding at `:797-799`. Measured on the rig before this change: Kelda's kilde
   page carries nine `dl.munin-explorer-meta__grid`, and not one of them is inside a
   `.munin-explorer-meta`. The detail pages have been borrowing the panel's typography and grid
   since they were built.

   The coupling is not theoretical, it has already cost an override: `_trail.scss` carried a rule
   whose whole job was forcing the panel's two-column default back to one column when the dl
   turned up in a detail aside. That override went with the aside it was scoped to,
   but the coupling it was paying for has not: until the two surfaces
   have separate names, no later change can touch a detail fact list without silently
   restyling the results drill-in.

   THIS IS A SEPARATION, NOT A REDESIGN. Every number below is copied from `_results.scss:808-815`
   unchanged; nothing here was tuned. The RCL half moved the detail pages
   onto these names and HAS SHIPPED, in Explorer 0.1.0-alpha.13 — so these rules are LIVE rather
   than the intended-inert state this comment used to describe, exactly as for the section rules
   above. Measured on the rig at 1440, `.munin-explorer-page__fields` renders 7 times on kilde,
   6 on datasamling and 3 on variabel. `munin-explorer-meta__grid` is left untouched and keeps
   serving the panel.

   THE SPECIFICITY IS DELIBERATELY LEFT AT (0,1,0), matching the panel's bare class rather than
   beating it. `_detail.scss:31` is `.munin-explorer-detail dl { margin: 0 }` at (0,1,1), so inside
   the drill-in the panel's `margin-bottom: 24px` loses and the grid measures 0px — which is what
   the rig reports. A `dl.munin-explorer-page__fields` here would WIN that fight and hand the
   whole-variable view a bottom margin it does not have today. Copying the behaviour means copying
   the losses too; do not "strengthen" this selector.

   ONE COLUMN AT EVERY WIDTH. The two columns came from the narrow drill-in drawer and were never
   decided for a full-width page (auto-fill gave two tracks from about 1100px).
   One column was chosen on 2026-09-28, as in Skuld's mockup: each value is already capped at 45ch,
   so two tracks never gave a value more room, only a shorter page read in a zig-zag. The column's
   measure is set on `.munin-explorer-page__main` above. Measured on the rig before the change: at
   1280 and 1760 the kilde page grows 12-17%, datasamling 14-18% and variabel 5-7%, and nothing
   changes at 768 or below, where auto-fill already gave one track. */
.munin-explorer-page__fields {
  display: grid;
  grid-row-gap: 40px;
  grid-column-gap: 24px;
  font: normal 1rem/160% graphik, Arial, Helvetica, sans-serif;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 24px;
}

/* The panel's `__grid p` rule. This is the only thing dressing the per-language line that
   `DetailBlocks.cs:98` puts on `p.munin-explorer-meta__language` inside a dd — measured on the
   rig, that paragraph's whole computed contribution is `margin: 0`, because Stiler has never
   carried a rule for the class itself. */
.munin-explorer-page__fields p {
  margin: 0;
}

/* A value may be one unbroken token: a variable code, a Lovverk URL. Without a break point it sets
   the track's min-content, so the single `auto` column below grows past the page (606px at a 320px
   viewport on Tromsøundersøkelsen), and on a desktop it pulls the two `1fr` columns uneven.
   `anywhere`, not `break-word`: only `anywhere` lowers min-content, which is what sizes the track.

   MÅLET ER KOMPONENTENS FELLES 45ch; hvorfor står ved `.munin-explorer__lede` i `_detail.scss`.
   Det bor sammen med `anywhere` fordi en kappet boks med et ubrytelig barn renner over i stedet
   for å brekke.

   NULLSTILLINGEN AV MARGENEN ER EN ANNEN SAK, og står her fordi den gjelder nøyaktig samme `dd`.
   Nettleserens egen `dd { margin-inline-start: 40px }` sto urørt, så hver verdi lå 40px inn fra
   etiketten sin — 16 % av linjen ved 320px. Regelen er skopet til pakkens faktaliste og ikke til
   `dd` på helsedata.no ellers: den partialen er delt med resten av nettstedet. `_datasamling.scss:25`
   nullstiller allerede hele margen for den nestede prosagruppen, på (0,3,1), og er uberørt. */
.munin-explorer-page__fields dd {
  margin-inline-start: 0;
  max-width: 45ch;
  overflow-wrap: anywhere;
}

/* The chassis counterpart to `munin-explorer-meta__language`, carrying the one declaration its
   panel-prefixed twin effectively has. Stated directly rather than left to the descendant rule
   above, so the name is settled for the RCL half to move onto and the line keeps rendering
   identically if it is ever placed outside the dl. */
.munin-explorer-page__language {
  margin: 0;
}

/* Tighter spacing on anything narrower than a desktop, copied from the panel's own step at
   `_results.scss:830-838`. That step is written as a literal `@media (max-width:1280px)`; this one
   uses `$xs-desktop`, which is `all and (max-width: 1280px)` — the same threshold, spelled with
   the token, exactly as the section rules above prefer `$mobile` over a hardcoded 767. A literal
   that drifts one pixel off its paired min-width token is how a layout ends up disagreeing with
   itself at a single width.

   THE COLUMN COUNT IS NOT STEPPED HERE: the list is one column at every width (see above). Only the
   spacing remains, which is why the media query is kept rather than deleted. */
@media all and (max-width: 1280px) {
  .munin-explorer-page__fields {
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
  }
}
/* ---- det katalogen ikke har noe på ----

   `munin-explorer-absent` er klassen pakken setter på en verdi katalogen ikke har noe å fylle
   (`DetailBlocks.cs:99`), og lesteksten er «Ingen». Målt på riggen før denne regelen, med markøren
   parkert i hjørnet og begge i SAMME `dl.munin-explorer-page__fields` på
   /MuninKelda?kilde=8dee8189…:

     fraværende  «Ingen»  rgb(38, 32, 69)   opacity 1  font-style normal  font-weight 400
     med verdi   «0»      rgb(38, 32, 69)   opacity 1  font-style normal  font-weight 400

   Alle 20 `dd` i de sju faktalistene på den sida hadde nøyaktig én farge, rgb(38, 32, 69) — altså
   brødtekstblekket. Kontrollen er det beste paret som kunne oppstått: en ekte verdi som ser like
   tom ut som en fraværende, og som tegnes identisk med den. Leseren kan i dag ikke skille «katalogen
   ble spurt og har ingenting» fra «katalogen ble spurt og svaret er 0». Repoet har alt bestemt at de
   to er ulike fakta — `KildeSummary.cs:77-88` bruker `int?` nettopp for å holde dem fra hverandre —
   og dempinga er den samme avgjørelsen sagt visuelt.

   BARE FARGE. Ingen størrelse, ingen marg, ingen vekt, ingen kursiv: elementet beholder alt det
   allerede har, og dempinga er hele signalet. En fraværende verdi er tekst, ikke en kontroll som er
   slått av.

   KONTRAST PÅ BEGGE GRUNNER, for regelen er uskopet og lander på to flater. Faktalista står på
   `body` = `$grey10` rgb(246, 247, 252), målt; radpanelets Data-fane står på hvitt. `$grey60`
   (#51547B) gir 6,76:1 på `$grey10` og 7,23:1 på hvitt, mot 4,5:1-kravet i WCAG 1.4.3 for 16px.
   `$grey50` (#727196) er IKKE godt nok: 4,65:1 på hvitt, men 4,34:1 på `$grey10`, altså strykkarakter
   på detaljsida. Målt på riggen har `dd`-en ingen hover-flate — bakgrunnen er rgb(246, 247, 252) både
   med og uten markøren over — så det er én farge å svare for, ikke to.

   DEN ANDRE BRUKSSTADEN TRENGER DEN IKKE. `p.caption.munin-explorer-absent`
   (`VariableSearch.razor:883`) bærer også `.caption`, og Stiler setter `.caption { color: $grey60 }`
   uskopet i `base/_caption.scss` — målt til rgb(81, 84, 123) på hver eneste `p.caption` på riggen.
   Den linja er alt dempa, i akkurat denne fargen. Regelen under endrer bare faktalistene. */
.munin-explorer-absent {
  color: rgb(81, 84, 123);
}

/* ---- the page chrome: what sits ABOVE the detail header ----

   The mockups wrap every detail page in three pieces of furniture the RCL emits none of today: a
   small label above the title, a breadcrumb trail, and a row of actions beside the heading. The
   detail header block itself (`__header` and friends, `_trail.scss:76-116`) already exists and is
   NOT part of this — the chrome sits above it. Like the rest of this file, THESE RULES MATCH
   NOTHING until the RCL half ships.

   THERE IS NO `__crumbs` RULE BELOW, AND THAT IS THE POINT. helsedata already owns a breadcrumb
   pattern and it is live in their own Razor views, not a leftover:

     layout/_breadcrumbs.scss:3-68   .breadcrumbs, __list, __list-item, __homelink, __divider
                                     and __last-crumb — global, unscoped classes, exactly like
                                     `form-menu__list` two blocks up
     ApplicationGuidancePage.cshtml:40-63   the markup that wears them, separator included
                                            (`icon-keyboard-arrow-right-gray`)

   Their crumb links are already `$grey60` with `responsiveCaption` and a `$primary` hover, which
   is what the mockup's `.crumbs` asks for in its own words (`kilde-detalj.css:50-53`: 14px, in
   its muted custom property). The RCL half WEARS `.breadcrumbs` and inherits the host's hover
   and focus treatment for free. Only the separator and the bottom margin need rules of their
   own, below. A second breadcrumb style on a site that already has one is the exact thing that
   makes an embedded component look embedded, so this partial adds only the eyebrow, the action row
   and those two rules.

   NO SHELL WIDTH HERE EITHER, DELIBERATELY. The mockup's shell centres itself in a fixed width
   with 24px of side padding (`kilde-detalj.css:30`) because a standalone mockup has to invent a
   content width. The component renders inside helsedata's own page container, which already has
   one, so a second one here would either fight it or silently win. No selector below declares a
   width cap of any kind, and the mockup's shell number appears nowhere in this file. */
/* Stien har likevel én regel, for fargen alene: i utforskeren er lenkene helsedatas lenkeblå, og
   stien var den eneste som sto i $grey60 (godkjent 2026-10-16). Form,
   skille, størrelse og fokus er fortsatt husets. Understreken blir stående ved hover, der huset
   tar den bort, fordi L2 vil ha den nettopp der; fargen skifter til $link-hover som husets egen.
   (0,2,1) og (0,3,1) mot husets `.breadcrumbs__list-item a` (0,1,1) og `:hover` (0,2,1). */
.munin-explorer .breadcrumbs__list-item a,
.munin-explorer .breadcrumbs__list-item button {
  color: rgb(50, 55, 141);
}

.munin-explorer .breadcrumbs__list-item a:hover,
.munin-explorer .breadcrumbs__list-item button:hover {
  color: rgb(82, 30, 255);
  text-decoration: underline;
}

/* Skillet mellom leddene er husets grå pil. Husets egen markup tar den med en ekstra klasse
   (`icon-keyboard-arrow-right-gray`) som utforskeren ikke bærer, så `__divider` alene var 32px tomrom
   uten høyde. Samme fil og størrelse som `base/_icons.scss`. */
.munin-explorer .breadcrumbs__divider {
  flex: none;
  height: 1.5rem;
  background: url(../img/icons/keyboard-arrow/icon_right--gray.svg) no-repeat center/1.5rem;
}

/* Husets `.breadcrumbs` har 48px under seg, laget for en sti over et sidehode. Her står kildetypen
   rett under, med 16px over seg selv, så stien får 16px: til sammen 32px, ikke 64px. */
.munin-explorer .breadcrumbs {
  margin-bottom: 16px;
}

/* The eyebrow KEEPS THE GEOMETRY OF THE RETIRED KILDETYPE BADGE: `border-radius: 999px` on
   `$grey20` with `$grey60` text at `0.8125rem` in 2px/10px padding. The badge's rule was removed
   once no package helsedata pins emitted it; these declarations never read
   from it, so its removal moved the eyebrow by nothing. The mockup's `.eyebrow`
   (`kilde-detalj.css:56`) draws the same pill a half-pixel differently — 13.5px text in 4px/13px
   padding on the mockup's chip colour, which IS `$grey20` (#eff0fa, exactly) — and Stiler's
   numbers are kept rather than a second pill a pixel of padding apart.

   `font-weight: 500` from the mockup is dropped rather than translated. `graphik` ships one
   upright file, so a 500 has no file to come from and the browser either rounds it to the regular
   it already draws or synthesises a smear — the same trap `_kilder.scss` records for the lighter
   direction. The badge next door sets no weight either.

   Contrast, at the size it is actually drawn: `$grey60` on `$grey20` is 6.38:1, and on the white
   and `$grey10` the explorer sits on 7.23:1 and 6.76:1. 0.8125rem is 13px and therefore not large
   text, so the bar is 4.5:1 (WCAG 1.4.3) and all three clear it. The eyebrow is a label and not a
   control, so it has no hover state to measure. */
.munin-explorer-page__eyebrow {
  display: inline-block;
  margin: 1rem 0 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(239, 240, 250);
  color: rgb(81, 84, 123);
  font-size: 0.8125rem;
}

/* The action row. `margin: 24px 0 0` and `gap: 12px` are the mockup's (`kilde-detalj.css:63`),
   with the 24 spelled as `$ws-m`, which is exactly 24px, and the 12 as rem because Stiler has no
   token on it.

   `flex-wrap: wrap` is what keeps this off a long title: the row is a block under the heading, so
   a title that needs three lines simply pushes it down, and a set of actions too wide for the
   column breaks onto a second line instead of forcing the page sideways.

   NOT `munin-explorer-header__actions`, which is the results toolbar's row and looks close enough
   to borrow. It is not: `_results.scss:215-223` carries `position: relative`, `left: -12px` and
   `width: 100%` on it, plus `_results.scss:234-242` forcing any `.dropdown` inside it to full
   width. Those are corrections for standing in the toolbar above the table, documented as such at
   `_results.scss:101-167`, and every one of them is wrong beside a heading. Borrowing the name
   would import the corrections with it.

   Nothing here sizes the controls. The row sets layout only, so each button keeps whatever height
   and padding its own class gives it and the 24x24 target minimum (WCAG 2.5.5) stays the
   button's business, not something this rule can shrink. */
.munin-explorer-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 24px 0 0;
}

/* En <select> er like bred som sitt lengste valg, og ingenting holdt den inne i raden: listevelgeren
   målte 386px i en 320px visning, og fanen rullet sidelengs. */
.munin-explorer-page__actions > label,
.munin-explorer-page__actions > label > select {
  max-width: 100%;
}

/* Listevelgeren på en linje for seg med ledeteksten over, og knappene som et bånd under den, så
   knappene står likt enten det er én liste eller flere. */
.munin-explorer-page__actions > label {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
}

.munin-explorer-page__actions > label > select {
  font-size: 1rem;
  width: 20rem;
}

/* Explorerens tre <select> (listevelgeren, sidestørrelsen og sorteringen i verktøyraden): 8px hjørner,
   helsedatas pil og husets knappehøyde, så de står likt med knappene ved siden av.
   Rammen er $grey60 og ikke helsedatas $grey40, som er 1.94:1 mot hvitt og under 3:1 (WCAG 1.4.11). */
.munin-explorer-page__actions > label > select,
.munin-explorer-pagination-size select,
.munin-explorer-results__toolbar select {
  appearance: none;
  background: rgb(255, 255, 255) url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat right 14px center/1rem;
  border: 1px solid rgb(81, 84, 123);
  border-radius: 8px;
  box-sizing: border-box;
  color: rgb(38, 32, 69);
  height: 2.75rem;
  padding: 0 40px 0 16px;
}
.munin-explorer-page__actions > label > select:focus,
.munin-explorer-pagination-size select:focus,
.munin-explorer-results__toolbar select:focus {
  border-color: rgb(66, 139, 255);
}
@media (forced-colors: active) {
  .munin-explorer-page__actions > label > select,
  .munin-explorer-pagination-size select,
  .munin-explorer-results__toolbar select {
    appearance: auto;
    background-image: none;
    padding: 0 8px;
  }
}

/* ---- en fold i handlingsraden ----

   `VariableListView` til og med Fhi.Munin.Explorer 1.0.x legger nedlastingsvalgene bak en naken
   `<details>` i denne raden, ellers tegnet som nettleserens standard. Nyere versjoner bruker en knapp
   med panel; reglene står for verter som ennå kjører 1.0.x. Stiler kler folder med ETTERKOMMERSELEKTORER under et prefiks og ikke med
   egne klassenavn: `_filters.scss` har seks slike regler for `.munin-explorer-filters`, og denne
   raden hadde null. Det er hele forskjellen — fasettfoldene er like nakne `<details>` og tegner
   riktig, mens denne ble stående med nettleserens egen trekant. Målt på riggen før regelen, med
   markupen lagt inn i en ekte `.munin-explorer`: `display: list-item`,
   `list-style-type: disclosure-closed`, `cursor: auto` og ingen `::after` i det hele tatt.

   INGEN NYE KLASSENAVN. Et `munin-explorer-*`-navn her ville kostet en rad i README-inventaret, et
   vertsnotat og en oppdatering av eksempelarket — og pakken skriver allerede
   `munin-explorer-page__actions`. `> details` og ikke ` details`: raden skal ikke kle en fold som
   seinere måtte havne inni en av knappene sine.

   IKKE SLÅTT SAMMEN MED `.munin-explorer-filters`-reglene. De to foldene står på hver sin flate og
   gjør hver sin jobb; en delt selektor ville gjort fasettpanelet til gissel for handlingsradens
   luft. Målt begge veier — fasettfolden er uendret av reglene under.

   `min-height` bærer trykkflata: summaryen er en kontroll, og WCAG 2.5.5 vil ha 24x24. 2rem er
   samme mål som bryteren i `_switch.scss` står på. */
.munin-explorer-page__actions > details > summary {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 2rem;
  padding: 4px 8px;
}

/* MARKØREN MÅ TEGNES PÅ NYTT. `display: flex` gjør elementet til noe annet enn et listeelement, og
   da lager ingen nettleser `::marker` — samme mekanikk og de samme to SVG-ene som fasettlinja i
   `_filters.scss:283-294` og hierarkiet i `_hierarchy.scss:165-170`, i det samme målet 16x16.

   MASKE OG IKKE `background-image`, og det er den ene forskjellen fra fasettlinja. En maske fylles
   med `currentColor`, så chevronen følger `color`: på fokusflata under blir den hvit av seg selv i
   stedet for å bli en mørk chevron på $grey60, som ville målt under 3:1 (WCAG 1.4.11). Mønsteret
   er `_filters.scss:403-412` sitt eget, så dette er et lån og ikke en ny mekanisme. */
.munin-explorer-page__actions > details > summary::after {
  background-color: currentColor;
  content: "";
  flex: none;
  height: 1rem;
  margin-left: auto;
  mask: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/contain;
  width: 1rem;
}

.munin-explorer-page__actions > details[open] > summary::after {
  mask-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

/* Samme todeling som bryteren i `_switch.scss`, og av samme grunn: hover og fokus skal ikke være
   samme flate, og fokus skal ikke henge på en ring alene.

   `<summary>` er VERKEN `button` ELLER `a`, så `base/_global.scss:565-573` treffer den ikke — målt
   på riggen med et ekte Tab-trykk regner en fokusert `.munin-explorer-filters summary` ut
   `outline: 2px solid #428bff`, altså tegnes den ringen faktisk her. Flata bærer markøren likevel:
   da står folden likt med bryteren ved siden av, og den overlever uansett hvordan
   `is-tabbing`-regelen ender (ADO 121012). Ringen kommer i tillegg, ikke i stedet. */
.munin-explorer-page__actions > details > summary:hover {
  background-color: rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}

.munin-explorer-page__actions > details > summary:focus-visible {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* ---- the hero fact row: the six facts a reader needs before scrolling ----

   The mockup opens every detail page with a rule-bounded row of six facts directly under the name,
   before the contents nav and the body (`kilde-detalj.css:74-80`). It answers "what IS this source"
   without a scroll, which the body's fact lists on their own did not. `munin-explorer-meta__grid` is
   NOT this and is left untouched: it is the drill-in panel's two-column label/value grid, a
   different thing on a different surface. THESE RULES ARE LIVE, and this comment said the opposite
   until it was measured: the RCL half shipped in Explorer 0.1.0-alpha.12 (`Blazor/DetailFacts.cs:61`
   builds the class), helsedata's main pins 0.1.0-alpha.13, and on the rig at 1440 `__facts` renders
   once on kilde, once on datasamling and once on variabel.

   THE MOCKUP'S PALETTE IS ALREADY STILER'S, IN HEX. Its `:root` (`kilde-detalj.css:5-7`) sets
   `--muted: #51547b` and `--line: #e6e6ed`, which are `$grey60` and `$grey30` to the byte. So
   these are not approximations of the sketch, they are the sketch's own colours written with the
   names this repo has for them. Sizes go to rem the way the rest of `components/munin-explorer/`
   is written; the 1px borders stay 1px, as every other hairline in the component does
   (`_trail.scss:76-83` is the same border on the same page).

   ONE SIZE IS NOT THE MOCKUP'S: the secondary line is `0.875rem` and not the mockup's 13.5px.
   This component has no half-pixel size anywhere — every size in these eleven partials is a clean
   sixteenth — and 0.875rem is the size its own secondary text already uses, in the very rule these
   rules take `$grey60` from (`_filters.scss:433-438`). Half a pixel of fidelity is not worth
   being the one odd number in the file. */
.munin-explorer-page__facts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.625rem;
  margin: 1.875rem 0 0;
  padding: 1.375rem 0;
  border-top: 1px solid rgb(230, 230, 237);
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* `min-width: 0` on the cell and `minmax(0, 1fr)` on the track are one guard, not two. A grid
   track is floored at min-content, so without both of them the longest institution name in the
   row — "Nasjonalt medisinsk kvalitetsregister" and its kind — sets its own column wider than the
   other five and the row bursts out of the page. Same floor, same fix, as `__main` above. */
.munin-explorer-page__facts > div {
  min-width: 0;
}

/* The label. Uppercase micro-type needs the letter-spacing or it sets solid; both numbers are the
   mockup's. `$grey60` at 0.6875rem is 11px and so not large text: 7.23:1 on white and 6.76:1 on
   `$grey10` against a 4.5:1 bar. */
.munin-explorer-page__facts dt {
  margin: 0 0 0.3125rem;
  color: rgb(81, 84, 123);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* `overflow-wrap: anywhere` is load-bearing and not cosmetic — it is the half of the long-name
   guard that lives on the text rather than on the track.

   `font-variant-numeric: tabular-nums` is NOT in the mockup and should be. Half these cells are
   counts — "630 variabler" sits in a row beside other counts — and proportional digits make a
   column of numbers shuffle as the page re-renders. The component already reaches for exactly
   this, for exactly this reason, at `_filters.scss:433-438` and again on the table's own count
   column in `_kilder.scss`. It costs nothing on the cells that hold text. */
.munin-explorer-page__facts dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.munin-explorer-page__facts small {
  display: block;
  margin-top: 0.1875rem;
  color: rgb(81, 84, 123);
  font-size: 0.875rem;
  font-weight: 400;
}

/* 1080px IS NOT STILER'S 1024, AND IS KEPT ON PURPOSE. Six equal columns run out of room before
   `$tablet` does. Measured on the rig with these cells injected, six across gives a 142,33px
   track at 1440px and 82,5px at 1081px, the last width this fold keeps six of them; holding out
   for 1024 would go on narrowing to 76,5px, and the longest value in the row - "Nasjonalt
   medisinsk kvalitetsregister" - goes from three lines to five across that stretch. Folding at
   1080 hands that same value a 193,33px track one pixel later. This is the only place in the
   component with a third threshold, and it is the only place with six tracks to fit. */
@media all and (max-width: 1080px) {
  .munin-explorer-page__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.375rem;
  }
}
/* Fem spor på kildesida over 1080px: Lovverk er ute av kildens faktarekke fordi den lange
   friteksten gjorde rekken opptil 175px høy og står allerede i «Rettslig grunnlag», og
   med seks spor sto det sjette tomt til høyre. `:not(:has(> :nth-child(6)))` gjør at regelen bare
   treffer en rekke med fem celler eller færre, så en Explorer som ennå skriver seks beholder seks
   spor i stedet for å brekke den sjette cella ned på en egen linje. Trinnene på 3 og 2 under står
   urørt; mediespørringa holder denne regelen (0,3,0) unna dem. */
@media all and (min-width: 1081px) {
  .munin-explorer-kilde .munin-explorer-page__facts:not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* To på telefon bare når hver får 12rem; smalere står de én og én, så «universitetssykehus» ikke
   brytes midt i ordet. Trinnet er `$s-mobile` (600px), husets token nær
   skissas 640px, og ikke et fjerde tall. */
@media all and (max-width: 600px) {
  .munin-explorer-page__facts {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 1.125rem;
  }
}
/* ---- the sticky fact bar: the hero row condensed, once the hero has scrolled away ----

   The mockup keeps the six facts reachable after the reader has scrolled past the hero row by
   condensing them into a bar pinned to the top of the window (`kilde-detalj.css:37-48`). The RCL
   half emits the markup and lets its JS module add the revealed
   state. IT HAS SHIPPED, so THESE RULES ARE LIVE rather than the inert state this comment used to
   describe: Explorer 0.1.0-alpha.12 is the first release carrying the bar (`Blazor/DetailPage.razor:12`)
   and helsedata's main pins 0.1.0-alpha.13. Measured on the rig at 1440, `__stuckbar` renders once
   on kilde, once on datasamling and once on variabel, each with one `__stuckbar-inner` and one
   `__stuckbar-name` inside it.

   THE DEFAULT STATE IS FULLY HIDDEN, AND THAT IS THE WHOLE DESIGN, NOT AN OPTIMISATION. The
   mockup's own comment says it outright: without JavaScript the bar simply never appears, and
   nothing is lost, because every fact in it is already on the page in `__facts` above. So the base
   rule below hides it on five independent counts — zero height, clipped overflow, no pointer
   events, translated out of its own box, fully transparent — and the revealed state gives back all
   but the height, which stays 0 so the bar never pushes the page and a jump lands right. Get this the wrong way round and the failure mode is not a cosmetic one: a
   transparent bar that still occupies height is an invisible band swallowing every click along the
   top of the page, on every detail surface, for every reader whose script did not load. That is
   close to undiagnosable from a bug report, which is why `pointer-events: none` is load-bearing
   here rather than decoration.

   MEASURED, on the rig at 1440px with the markup injected and no revealed state: the bar's
   `getBoundingClientRect()` is 0px high, and `document.elementFromPoint()` along the top edge of
   the viewport returns the host's own header, never the bar.

   THE BORDER IS ON THE REVEALED STATE AND NOT ON THE BASE, and that split is the reason. A
   `border-bottom: 1px` on a `height: 0` box is a ONE-PIXEL box, not a zero-height one — measured at
   1px before the border was moved — so the hairline lives with the state that is actually drawn,
   on the revealed row (`__stuckbar-inner`) now that the bar itself stays 0px high.

   z-index 10, NOT THE MOCKUP'S 40. 40 is the mockup's number in a document whose only furniture is
   the mockup's own. Measured on the rig's detail page, everything on it that carries both a z-index
   and a position: `.main-header` 20 (absolute), `.main-footer` 20, the floating top button 25,
   `.main-menu-dimmer` 150 and `.main-menu-container` 200 (both fixed). The mockup's 40 would stand
   OVER the host's header and over its scroll-to-top control. 10 clears everything the component
   itself puts into the page — `_list.scss:83` and `_detail.scss:170` are both 1, the dataitem focus
   ring at `_results.scss:472` is 4 — and stays ten clear of the lowest thing belonging to the host.
   The one explorer layer above it is the results toolbar's column picker at `_results.scss:319`
   (99), which is on the LIST page and not on a detail surface; and if the bar ever turns up beside
   it, an open picker over a fact bar is the right way round anyway.

   THE BACKGROUND IS `$grey10`, MEASURED, AND NOT THE MOCKUP'S. The mockup fills the bar with its
   own `--bg: #fff`, because a standalone page chose white for its body. helsedata's did not:
   measured on the rig, every node from the detail root up to `body` is transparent except `body`
   itself, which is `rgb(246, 247, 252)` — `$grey10` exactly. Opacity is the point rather than the
   shade, because content scrolling under the bar has to disappear behind it instead of showing
   through — the same requirement, and the same token, as the sticky filter toolbar in
   `_detail.scss`. The mockup's `--line: #e6e6ed` is `$grey30` to the byte, the hairline the detail
   header already draws (`_trail.scss:76-83`). Both are on the revealed `__stuckbar-inner` below. */
/* The host's div rule overrides the browser's hidden rule; opacity and clipping leave
   the compact action in the Tab order under aria-hidden. */
.munin-explorer-page__stuckbar[hidden] {
  display: none;
}

.munin-explorer-page__stuckbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.15s;
}

/* Doubled deliberately, (0,2,0) against the base rule's (0,1,0). The two are a pair, and their
   order inside one file is otherwise the only thing deciding which of them wins; a modifier any
   later rule of equal weight can take back is the fault `_kilder.scss` records against its own
   (0,2,0) selectors. No `!important`. */
.munin-explorer-page__stuckbar.munin-explorer-page__stuckbar--on {
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* The row draws the bar, which stays 0px high when shown: a bar taking its height in the flow pushed
   the page 77px down each time it appeared, so a jump landed short. */
.munin-explorer-page__stuckbar--on .munin-explorer-page__stuckbar-inner {
  background: rgb(246, 247, 252);
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* The fade goes; the bar stays. Dropping the whole reveal instead would take the facts with it, and
   a reader who asked for less motion still wants them. Same construction as the only other
   reduced-motion rule in the component, `_switch.scss:121-125`; the query is spelled out because
   Stiler has no token for it. */
@media (prefers-reduced-motion: reduce) {
  .munin-explorer-page__stuckbar {
    transition: none;
  }
}
/* NO SIDE PADDING, AND THAT IS A MEASUREMENT RATHER THAN A PREFERENCE. The mockup's inner row is
   `padding: 9px 24px` inside a 1240px shell, because a standalone mockup has to invent both. Here
   the bar renders inside the component's own container, which already carries the page's gutter:
   measured on the rig at 1440px, `.munin-explorer` is `max-width: 1488px` with `padding: 0 24px`,
   and the detail root inside it is 1392px. A second 24px here would stand the bar's row 48px from
   the window edge while the title above it stands at 24px — a visible 24px disagreement between two
   rows of one page. The vertical 9px is the mockup's and is kept, as `0.5625rem`.

   THE WIDTH CAP IS STILER'S OWN, `$page-container-width` — 1488px, from `abstracts/_variables:82`,
   owned by `.page-container` in `layout/_framework` and already borrowed once by this component at
   `_detail.scss:114` for this same reason. NOT the mockup's 1240px, which matches nothing this repo
   owns. Nested where the bar sits today the cap never binds, and that is fine: it costs nothing,
   and it is what keeps the row flush with the rest of the site if the bar is ever mounted
   full-bleed, which is the only arrangement in which a sticky top bar can span the window. */
.munin-explorer-page__stuckbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  max-width: 1488px;
  margin: 0 auto;
  padding: 0.5625rem 0;
}

.munin-explorer-page__stuckbar-name {
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.munin-explorer-page__stuckbar-name small {
  display: inline-block;
  max-width: 100%;
}

.munin-explorer-page__stuckbar dl {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  font-size: 0.875rem;
}

/* Each fact is one label-and-value pair and has to stay one. Let a two-word label break across the
   gap and it reads as two facts. */
.munin-explorer-page__stuckbar dl div {
  white-space: nowrap;
}

/* The same uppercase micro-label as the hero row's `__facts dt` above, in every declaration of type:
   it is the same label, on the same page, for the same reader, one scroll apart. 0.6875rem and
   0.07em are therefore that rule's numbers rather than the mockup's 10.5px and .06em — a size this
   component has nowhere else, and a second tracking for one shape. Contrast is remeasured on the
   surface this copy stands on: `$grey60` on `$grey10` is 6.76:1 against a 4.5:1 bar, since 11px is
   not large text (WCAG 1.4.3). The bar has no hover state of its own; the buttons the action group
   brings carry theirs. */
.munin-explorer-page__stuckbar dt {
  color: rgb(81, 84, 123);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The mockup's `font-weight: 500` is dropped rather than translated, for the reason the eyebrow
   above already records: `graphik` ships one upright file, so a 500 has no file to come from and
   the browser either rounds it back to the regular it already draws or synthesises a smear. */
.munin-explorer-page__stuckbar dd {
  margin: 0;
}

/* THE ACTION GROUP IS `munin-explorer-page__actions`, THE ROW THIS FILE ALREADY HAS. The mockup
   calls it `.go` and gives it `margin-left: auto`, `display: flex` and `gap: 8px`; the existing rule
   is that row already, so the bar adds only what is about standing in a bar — pushed to the far end
   of it, with the block margin the beside-the-heading placement needs taken back off. (0,2,0) over
   that rule's (0,1,0), so no `!important`, and the RCL half wears one class in both placements
   instead of Stiler carrying two nearly identical rows. */
.munin-explorer-page__stuckbar .munin-explorer-page__actions {
  margin: 0 0 0 auto;
}

/* Below the desktop fold the bar keeps the name and the first two facts and drops the rest. A bar
   that wraps onto three lines is not a bar any more — it is the hero row again, pinned over the text
   the reader is trying to read, and every fact it drops is still in `__facts` one scroll up.

   `$tablet` (max-width: 1024px) is both the mockup's own 1024 and Stiler's token for it, so for once
   the two agree; it is also the fold the chassis grid above steps at, through the exact complement
   `$desktop-all`. `nth-child(n + 3)` counts the fact groups inside the dl rather than the bar's own
   children, so the name and the action group are never among the things it can hide. */
@media all and (max-width: 1024px) {
  .munin-explorer-page__stuckbar dl div:nth-child(n+3) {
    display: none;
  }
  .munin-explorer-page__stuckbar .munin-explorer-page__actions {
    display: none;
  }
}
/* The name alone on a phone: with the facts the row wraps to 187px, over the 80px line a jump puts
   a heading on, and the bar sits over the page rather than in it. */
@media all and (max-width: 767px) {
  .munin-explorer-page__stuckbar dl {
    display: none;
  }
}
/* ---- the Data tab's kodeverk ----

   All five names below are ours, and every one is a handle: neither Stiler nor helsedata's
   variables.css has a kodeverk section to borrow from, because their variable page has no such
   panel at all. So this file supplies the arrangement, and nothing more.

   The list is a plain <ul> with its bullets off, because the group heading above it already says
   these are kodeverk of one kind and a bullet per line adds nothing. */
.munin-explorer-kodeverk {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.munin-explorer-kodeverk__item {
  padding: 12px 0;
  border-bottom: 1px solid rgb(230, 230, 237);
}

.munin-explorer-kodeverk__item:last-child {
  border-bottom: 0;
}

/* Kodelinjene i forhåndsvisningen står inne i denne, og «11002 Stavanger/Sandnes» har ingen
   bruddmulighet: ved 320 rullet Data-fanen 9px sidelengs. */
.munin-explorer-kodeverk__name {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Et kildekodeverk uten navn viser de første kodene i navnets sted, én <li> per kode med kode og
   navn i hvert sitt <span>. Lista er rutenettet og hver rad et subgrid av det, så kodekolonnen blir
   like bred som den bredeste koden og alle navnene starter på samme x. Uten subgrid
   faller raden tilbake til én kolonne, koden over navnet. Vanlig vekt, ikke navnets 600: dette er
   et utdrag av kodetabellen, ikke et navn. `:has(> li > span)` gjør at dagens markup med én
   tekstnode per <li> ser ut som før, til Explorer-versjonen med <span> er pinnet. */
.munin-explorer-kodeverk__name > ul:has(> li > span) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 400;
}

.munin-explorer-kodeverk__name > ul:has(> li > span) > li {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.munin-explorer-kodeverk__name > ul:has(> li > span) > li > span:first-child {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

/* The reference is the thing a reader can look the kodeverk up by, so it is set in a monospace
   face — a run of digits like 2336 or a dotted OID reads as an identifier rather than as prose. */
.munin-explorer-kodeverk__reference {
  margin: 2px 0 8px;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

/* The open code list. Capped in height and scrolled rather than left to run: Kommunenummer is 885
   codes, and a list that pushes the rest of the page out of reach is worse than one you scroll. */
.munin-explorer-codes {
  margin: 8px 0 4px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgb(230, 230, 237);
  border-radius: 4px;
}

/* One of the two tables this component emits — the other is the datasamlinger list in KildeView —
   and the reason it is a table at all: four columns of code values have no honest alternative
   shape. What makes that safe is that an element has a browser
   default to fall back on — a host that styles nothing still gets aligned columns, where an
   invented class name would render as nothing. */
.munin-explorer-codes__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* På mobil får kolonnene sin naturlige bredde, og boksen over ruller sidelengs: presset inn i
   panelet brøt "Gyldig fra" seg bokstav for bokstav. */
@media all and (max-width: 767px) {
  .munin-explorer-codes__table {
    min-width: 100%;
    width: max-content;
  }
  .munin-explorer-codes__table :is(th, td) {
    white-space: nowrap;
  }
}
/* Scoped under the meta panel on purpose, and it is not decoration.

   The kodeverk table is rendered INSIDE the detail panel, which wears `munin-explorer-meta`. The
   ported table rules further down - `.munin-explorer-meta td, .munin-explorer-meta th` - have the
   same specificity as a bare `.munin-explorer-codes__table td` and come later in the file, so they
   win. Unscoped, this table silently got helsedata's roomy 16px/32px cell padding, their zebra
   striping and their first-column indent: three treatments meant for the statistics table, applied
   to a dense code list that wants none of them.

   The file already carries one comment about ordering hazards, for the column widths kept last.
   This is the same hazard, one the author did not catch, and specificity is the fix that survives
   the file being split into partials - where source order stops being obvious at a glance. */
.munin-explorer-meta .munin-explorer-codes__table th,
.munin-explorer-meta .munin-explorer-codes__table td,
.munin-explorer-codes__table th,
.munin-explorer-codes__table td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* Same reason: the striping below is for the statistics table, and a code list reads worse with it. */
.munin-explorer-meta .munin-explorer-codes__table tbody tr {
  background-color: transparent;
}

/* Sticky, so the columns stay named while a long kodeverk is scrolled past them. */
.munin-explorer-codes__table thead th {
  position: sticky;
  top: 0;
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-weight: 600;
}

.munin-explorer-codes__table td:first-child {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  white-space: nowrap;
}

/* The sidebar's lists — variabelgrupper and datasamlinger. Bulletless because each is one fact
   about the variable rather than an enumeration a reader counts, and tight because the sidebar is
   320px and a hanging indent wastes a fifth of it. */
.munin-explorer-whole__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.munin-explorer-whole__list li + li {
  margin-top: 6px;
}

/* The statistics table. Same shape as the datasamlinger table above it, with the numbers right
   aligned and tabular: these columns are read down, comparing magnitudes, and proportional digits
   put the same number in two different widths on two rows. */
.munin-explorer-statistics {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.munin-explorer-statistics th, .munin-explorer-statistics td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(230, 230, 237);
}

.munin-explorer-statistics thead th {
  background: rgb(246, 247, 252);
}

.munin-explorer-statistics td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- den kategoriske frekvenstabellen ----

   Én tabell per statistikk under statistikktabellen over, med samme celleluft og samme
   $grey10-hode: de to står rett under hverandre og skal leses som samme slags ting.

   SKALERT SOM KODEVERKTABELLEN, av samme grunn og med samme selektorpar. Frekvenstabellen tegnes to
   steder — inne i radens Data-fane, som bærer `munin-explorer-meta`, og i den fulle variabelvisningen,
   som ikke gjør det. `.munin-explorer-meta td` i `_results` har samme spesifisitet som en bar
   `.munin-explorer-frequency td` og kommer seinere i fila, så uskjermet ville tabellen fått
   helsedatas romslige 16px/32px celleluft og førstekolonneinnrykk i den ene visningen og denne
   luften i den andre. Se kommentaren over kodeverktabellen: dette er den samme fella.

   `table.` står der og er ikke pynt. Kodeverktabellens par når (0,2,1) og taper mot
   `.munin-explorer-meta th:first-child` og `td:first-child`, som er like spesifikke og kommer
   seinere; målt i utforskeren ga det 16px innrykk i Data-fanen mot 12px i den fulle visningen.
   Elementet i selektoren løfter paret til (0,2,2) og tar hele bolken i `_results` med én gang,
   innrykkene inkludert. */
.munin-explorer-frequency {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.875rem;
}

.munin-explorer-meta table.munin-explorer-frequency th,
.munin-explorer-meta table.munin-explorer-frequency td,
.munin-explorer-frequency th,
.munin-explorer-frequency td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(230, 230, 237);
}

.munin-explorer-frequency thead th {
  background: rgb(246, 247, 252);
}

/* Bare siste kolonne, antallet. Statistikktabellen høyrestiller alle cellene sine, men her er andre
   kolonne kategoriens navn og tredje bærer stolpen, som skal starte i venstrekanten. Skjermet mot
   `.munin-explorer-meta td:last-child`, som venstrestiller. */
.munin-explorer-meta .munin-explorer-frequency td:last-child,
.munin-explorer-frequency td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- andelsstolpen ----

   `display: block` er hele poenget. Begge er <span>, og fyllet bærer bare en bredde satt som
   inline-stil; uten `display` og en høyde tegner det ingenting i det hele tatt, og en vert på Stiler
   alene får prosenten som tekst og ingen stolpe.

   Sporet er det fyllet leses mot. Fyllet klippes til 0–100 % fordi én statistikk
   i prod summerer til 22,7 ganger sitt eget gyldige antall; uten et spor bak seg skiller en stolpe
   på 12 % og en på 96 % seg bare i hvor langt de rekker ut i tomrommet.

   $grey40 OG IKKE $grey20, som prøvestilarkene bruker. Stolpen står på tre forskjellige bunner: hvit
   i den utvidede raden, $grey10 i den fulle variabelvisningen, og $grey20 på annenhver rad fordi
   `.munin-explorer-meta tbody tr:nth-child(odd)` sebrastriper tabellen. $grey20 måler 1.06:1 mot
   $grey10 og 1.00:1 mot seg selv — altså usynlig i to av de tre. $grey40 gir 1.94:1 mot hvitt,
   1.82:1 mot $grey10 og 1.71:1 mot sebrastripa.

   Kravet på 3:1 i WCAG 1.4.11 gjelder ikke sporet: prosenten står som tekst i den samme cella, så
   stolpen er en gjentakelse av et tall leseren allerede har, ikke noe innholdet ikke kan forstås
   uten. Det som faktisk bærer avlesningen er fyllet mot sporet, og $primary mot $grey40 er 3.62:1. */
.munin-explorer-frequency__track {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
  background-color: rgb(187, 184, 201);
}

.munin-explorer-frequency__fill {
  display: block;
  height: 100%;
  background-color: rgb(82, 30, 255);
}

/* The version history. A list of disclosures rather than a table: each row is one version and the
   thing under it is that version's own record, which is a shape a table cell cannot hold. */
.munin-explorer-versions {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(230, 230, 237);
}

.munin-explorer-versions > li {
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* Name, badge and period on one line, with the name taking the slack. The period is pushed to the
   end so the dates line up down the list and can be read as a column. */
.munin-explorer-versions__toggle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.munin-explorer-versions__toggle:hover {
  background: rgb(246, 247, 252);
}

.munin-explorer-versions__toggle:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

.munin-explorer-versions__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 600;
}

/* Reads as a state, not as part of the name — the same move the retired kildetype tag made. */
.munin-explorer-versions__badge {
  flex: 0 0 auto;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgb(239, 240, 250);
  color: rgb(81, 84, 123);
  font-size: 0.75rem;
}

/* Fixed widths so the two dates make columns down the list rather than drifting with the length
   of each name. tabular-nums for the same reason: proportional digits put "24." and "9." in
   different widths and the column stops being one. */
.munin-explorer-versions__from, .munin-explorer-versions__to {
  flex: 0 0 auto;
  inline-size: 7.5rem;
  color: rgb(81, 84, 123);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* On a phone the two fixed 7.5rem dates, the badge and the gaps are 356px before the name gets any:
   at 320px the name was 0px wide and the row ran 84px past the viewport. So there the name takes a
   line of its own and badge and dates share the next, at their natural width so both dates fit
   beside the badge at 320px. The columns the fixed width lines up are already gone once rows wrap,
   because the badge in front of them is "Gjeldende" on one row and a status on the others, each its
   own width. The one-line row is unchanged from 768px up. */
@media all and (max-width: 767px) {
  .munin-explorer-versions__toggle {
    flex-wrap: wrap;
  }
  .munin-explorer-versions__name {
    flex-basis: 100%;
  }
  .munin-explorer-versions__from, .munin-explorer-versions__to {
    inline-size: auto;
  }
}
.munin-explorer-versions__detail {
  padding: 0 4px 14px;
}

/* The panel wears `hidden` while its version is collapsed, and the browser's own
   `[hidden] { display: none }` loses to the bare `div { display: block }` in
   pages/_healthregisterpage.scss:118 — an author rule beats the user agent whatever the
   specificity. Class plus attribute is (0,2,0) and takes it back. Measured while hidden:
   `display: block` and 42.8px before, `display: none` and 0px after. */
.munin-explorer-versions__detail[hidden] {
  display: none;
}

/* ---- kildeutforskerens resultatliste ----

   Kelda tegner treffene som en <table>, ikke som kortene variabelsiden bruker. Åtte kolonner med
   samme bredde på tvers av rader leses raskere enn åtte kort, og en tabell er dessuten det
   skjermleseren kan navigere kolonnevis.

   Fortsatt delvis: Kelda har fire kolonner bak en kolonnevelger som ikke er navngitt her. De to
   kontrollkolonnene foran er det derimot nå — `__expand` og `__select` under. */
.munin-explorer-kilder {
  border-collapse: collapse;
  font-size: 0.875rem;
  width: 100%;
}

.munin-explorer-kilder th,
.munin-explorer-kilder td {
  border-bottom: 1px solid rgb(230, 230, 237);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

/* HODETS TYPOGRAFI: store bokstaver i mikrostørrelse, ikke radenes egen størrelse i halvfet.

   Målt før endringa, på riggen ved 1440px mot hele katalogen: hodecellene sto på 14px — NØYAKTIG
   samme størrelse som tallene og navnene i radene under — og skilte seg fra dem bare med vekt 600
   og $grey10-flata. Et hode som måler likt med innholdet sitt leses som en rad til, og det er
   nettopp den forvekslinga det klistrede hodet lenger opp i fila gjør varig: raden som blir
   stående.

   Størrelsen er `munin-explorer-page__facts dt` sin, ikke skissas. `_page.scss` la nettopp den samme
   etiketten — feltnavn i store bokstaver, $grey60 — på 0.6875rem, og dette er samme slags etikett
   for samme leser: der står feltnavnet over verdien, her står kolonnenavnet over kolonnen. Skissa
   sier 11,5px (kildeutforsker-forslag.html:130), men fila har ingen halve piksler noe sted.

   MEN IKKE SPERRINGA, OG DET ER EN MÅLING SOM AVGJORDE DET. `__facts dt` bærer `letter-spacing:
   0.07em`, skissa .05em, og hodet her har ingen. Grunnen er brekkpunkttabellen under: den er målt
   som tabellens min-content-bredde, og i en tabell er et hode ofte det breieste i kolonnen sin, så
   sperring på hodet er sperring på KOLONNEBREDDA. Målt med 0.07em på: «Grad av
   personidentifikasjon» gikk fra 156,7 til 168,0px, og alle elleve tersklene måtte opp, 4,3px
   nederst og 37,4px øverst. Og da traff det standardoppsettet: terskelen for tre valgte kolonner
   måtte fra 957 til 972px, mens beholderen måler NØYAKTIG 968px i et vindu på 1440. Kelda mistet
   altså det klistrede hodet sitt på den vanligste skjermbredda som finnes, for å sperre et hode.
   Uten sperring blir hver av de åtte hodestyrte kolonnene SMALERE enn før, tabellen står urørt, og
   hodet er fortsatt skilt fra radene med både størrelse og kasus. Skal sperringa inn, hører den
   sammen med en ny måling av hele tabellen og en avgjørelse om det klistrede hodet ved 1440 — det
   er en samtale, ikke en erklæring.

   INGEN `white-space: nowrap`, som skissa ellers setter på den samme cella, og av samme grunn: nowrap
   ville flyttet hver eneste av de elleve målingene uten at ett av tallene ble skrevet om. Det er en
   stille ugyldiggjøring av en målt tabell, og den er ikke verdt et hode som ikke brekker.

   Ingen farge og ingen flate røres, så kontrasten står der den sto: $grey60 på $grey10 er 6,76:1.
   Radhoveret ($grey20, 6,38:1) treffer ikke hodet — regelen for det er skopet til `> tbody > tr` —
   men begge tallene står her fordi kravet er 4,5:1 og 11px ikke er stor tekst (WCAG 1.4.3), så
   cella klarerer det mot begge flatene en vert kan finne på å gi den. */
.munin-explorer-kilder thead th {
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-weight: 600;
}

/* DIREKTE BARN, OG DET ER EN SKJERMDUMP SOM SA FRA. Regelen over er en etterkommer-selektor, så den
   treffer også datasamlingstabellen inne i det utfoldede panelet — det er nettopp derfor det indre
   hodet må ta tilbake sin egen størrelse nederst i fila. De to nye erklæringene har ikke noe der å
   gjøre: målt med regelen skrevet på samme form sto det indre hodet på 13px i STORE BOKSTAVER, altså
   både breiere og skrikende ved siden av det ytre hodets 11px, og «Totalt antall variabler» brakk
   over tre linjer. `> thead` slipper det: det ytre hodet er barn av `.munin-explorer-kilder`, det
   indre er barn av sin egen tabell. Samme grep som radhoveret og det klistrede hodet over bruker,
   og av nøyaktig samme grunn.

   Delt i to regler i stedet for å skrive om den over, fordi flata, fargen og vekta SKAL fortsette å
   gjelde begge hodene — det er bare størrelsen og kasusen som er den ytre tabellens egne. (0,1,2),
   samme vekt som regelen over og etter den i fila. */
.munin-explorer-kilder > thead th {
  font-size: 0.6875rem;
  text-transform: uppercase;
}

/* SORTERINGSKNAPPEN ARVER ALT UNNTATT VEKTA, OG DET ER `hd-button-reset` SOM TAR DEN.

   Fire av åtte hoder er knapper siden kildelisten fikk klikk-for-sortering — `munin-explorer-kilder__sort`, på
   Navn, Variabler, Opprettet og Sist endret. Knappen bærer `hd-button-reset`, som er `@include
   button` fra abstracts/_mixins:141, og mixinen setter `font-weight: normal` etter `font: inherit`.
   Målt på riggen med den markupen pakken skriver i dag: de fire sorterbare hodene tegnet vekt 400
   mens de fire andre i samme rad tegnet 600. Ei halv hoderad et hakk lettere enn den andre halva,
   uten at noe i markupen sier at de to halvdelene er forskjellige.

   STORE BOKSTAVER MÅ GJENTAS, og det var en måling som sa fra. `text-transform` er en arvelig
   egenskap, og verken mixinen eller `hd-button-reset` rører den — men nettleserens EGEN standardstil
   for skjemakontroller gjør det: `text-transform: none` og `letter-spacing: normal` står på `button`
   hos alle tre motorene. Målt på riggen før `inherit` ble lagt inn: hodecella svarte `uppercase`
   mens knappen inni den svarte `none`. Fire hoder i store bokstaver og fire i vanlig setningsskrift,
   i samme rad. Skissa traff det samme og skriver begge linjene ut på sin egen sorteringsknapp
   (kildeutforsker-forslag.html:176).

   `letter-spacing: inherit` står igjen selv om hodet ikke sperrer i dag. Den nullstillinga er ekte
   og den gjelder samme egenskap, så uten linja ville en sperring lagt på hodet senere stille blitt
   liggende utenfor de fire knappene — nøyaktig den feilen denne kommentaren beskriver, funnet igjen.

   `min-height` er trykkmålet og ikke pynt. Mixinen gir knappen `padding: 0`, så flata som tar
   trykket ER tekstboksen: målt 47,2 x 28,8px på Navn med 14px hode. Linjehøyden arves som faste
   28,8px og følger derfor ikke hodet ned til 11px, men golvet står her likevel, fordi neste endring
   av hodestørrelsen ellers kan ta trykkmålet under de 24px WCAG 2.5.5 ber om uten at noe sier fra.
   Bredden er etiketten si og ligger langt over 24px på alle fire.

   `inline-flex` av samme grunn som `__expand-toggle` over: `min-height` på en inline-boks er uten
   virkning, og ei flatboks er dessuten det som lar pila stå midtstilt ved siden av ordet i stedet
   for på grunnlinja. `gap` erstatter mellomrommet pila ikke har, siden den står i sitt eget span.

   (0,2,1) — to klasser og ett element — mot `hd-button-reset` sin (0,1,0). Ingen `!important`. */
.munin-explorer-kilder > thead .munin-explorer-kilder__sort {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 4px;
  letter-spacing: inherit;
  min-height: 24px;
  text-transform: inherit;
}

/* Radens <th> er en etikett for raden, ikke en overskrift over den. Knappen inni bærer vekten. */
.munin-explorer-kilder tbody th {
  font-weight: 400;
}

/* Hele raden svarer på pekeren, ikke bare navnet: over 66 rader og ti kolonner mister leseren
   raden si, og da er det en annen rad de leser av. Flata merker raden
   leseren står på.

   $grey20 og ikke $grey10, av samme grunn som panelet under: mot den hvite tabellen er $grey10 for
   svakt til å bli sett. Målt mot hvitt gir $grey10 1.07:1 og $grey20 1.13:1, og forslaget denne
   saken kommer fra bruker #f2f2f7, som måler 1.12:1 - $grey20 er tokenet som ligger på den verdien.

   Flata ligger på cellene og ikke på <tr>. Verten kan sette sin egen bakgrunn på td, og en
   cellebakgrunn males over radens uansett hvor spesifikk radregelen er. Skopet under tabellen av
   samme grunn som `__count` under: celleregelen den må slå har både klasse og element.

   :focus-within fordi et hover uten tastaturmotstykke bare finnes for musa (WCAG 2.4.7). Navnet er
   en ekte knapp, så raden ser lik ut enten leseren kom dit med pekeren eller med Tab.

   To celler står utenfor. Ekspander-cella, fordi navneknappen åpner kilden mens knappen i denne
   cella folder ut datasamlingene - én flate over begge sier at det er ett utfall. Og panelcella, som allerede står
   på $grey20 og ikke skal skifte tone av at raden over blir pekt på.

   Bare direkte barn hele veien ned: datasamlingstabellen inne i panelet har sin egen tbody, og med
   etterkommer-kombinator ville radene i den plukket opp radhoveret fra tabellen de ligger inni. */
.munin-explorer-kilder > tbody > tr:hover > th,
.munin-explorer-kilder > tbody > tr:hover > td:not(.munin-explorer-kilder__expand):not(.munin-explorer-kilder__expanded),
.munin-explorer-kilder > tbody > tr:focus-within > th,
.munin-explorer-kilder > tbody > tr:focus-within > td:not(.munin-explorer-kilder__expand):not(.munin-explorer-kilder__expanded) {
  background: rgb(239, 240, 250);
}

/* Raden ER et klikkmål nå. Utforskeren ga <tr> en behandler som folder ut
   datasamlingene, akkurat som chevronen i den, og pakken sender ingen CSS: uten regelen her
   regner pekeren seg til `auto` og ingenting sier at raden kan trykkes.

   Bare de radene som faktisk åpner noe. Kelda tegner ingen chevron på en kilde uten
   datasamlinger, og en pekerkursor over en rad som ikke gjør noe er en påstand som ikke holder.
   Markupen har ikke noe klassenavn for den forskjellen, men den har chevronen: `:has()` spør
   etter knappen i ekspander-cella og slipper resten. Målt på rigg: 63 av 98 rader har den. Det
   er derfor ingen RCL-endring i denne — alternativet, en tilstandsmarkør i pakka, trengs ikke.
   `:has()` er alt i bruk i fila, på rulleboksen over.

   Panelraden går fri av seg selv: den har bare `__expanded`-cella og ingen ekspander-celle, så
   `:has()` treffer den ikke. Og direkte barn hele veien, som radhoveret over — datasamlings-
   tabellen inne i panelet har sin egen tbody. */
.munin-explorer-kilder > tbody > tr:has(> .munin-explorer-kilder__expand > button) {
  cursor: pointer;
}

/* Ingen kolonnebredder her, i motsetning til _trail.scss: tallkolonnene står allerede på én
   linje, og det som bryter er setninger som skal bryte. Tabellen ber likevel om 779px på sitt
   smaleste, målt over 66 ekte kilder, og under det får den en beholder å rulle i - se under. */
/* Beholderen tabellen ruller i. Uten denne regelen havner overflyten på SIDEN, og hele
   helsedata.no ruller vannrett under en komponent som bare er en del av én side. Det er WCAG
   1.4.10 (Reflow) og ikke bare stygt.

   Regelen er den ene halvparten av rettingen og markupen den andre. Fhi.Munin.Explorer
   pakker tabellen i <div class="munin-explorer-kilder-scroll" role="region"
   tabindex="0">, men pakken sender med vilje ingen CSS. Uten regelen her er innpakningen en
   naken <div> uten overflyt, og målingen er den samme som før den fantes: scrollWidth 1172 mot
   clientWidth 1024 i samples/HostileHost. To kilder til tall her, og de er ikke sammenlignbare:
   779px er hele katalogens 66 kilder på helsedata, 1172/1024 er eksempelvertens tre.

   Rundt tabellen alene, ikke rundt .munin-explorer-results. Kolonnevelgeren står i samme spor,
   og en leser som rullet tabellen sidelengs ville tatt kontrollen for å velge kolonner ut av
   skjermen med den.

   Fokusringen er ikke pynt. Markupen gir beholderen tabindex="0" så et tastatur kan rulle den,
   og et fokuspunkt leseren ikke ser er WCAG 2.4.7 - da er én feil byttet mot en annen. Samme
   erklæring som navneknappens under.

   overflow-x og ikke overflow, men vit hva det gjør: settes bare den ene aksen, regner den
   andre seg til auto. Det er uskadelig her fordi boksen ikke har noe høydetak og vokser med
   innholdet - måler man en utvidet rad er boksen 1917px, har null loddrett rullbart innhold,
   og panelet på 1539px ligger helt innenfor. Gir noen den en max-height senere, begynner
   datasamlingene inni å rulle eller bli klippet, og ingenting i koden sier at overflow-y var
   på. Derfor står det her. */
.munin-explorer-kilder-scroll {
  overflow-x: auto;
}

.munin-explorer-kilder-scroll:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 4px;
}

/* Hodet som blir stående — og hvorfor det bare gjør det noen ganger.

   Regelen over gjør beholderen til en rulleboks på BEGGE akser: settes bare overflow-x, regner
   overflow-y seg til auto. Da er beholderen nærmeste rullende forelder for `position: sticky`,
   men den har ikke noe høydetak, så den ruller aldri loddrett, og et klistret hode inni den
   flytter seg derfor aldri — det renner ut av skjermen sammen med sida. Sidelengs rulling og et
   hode som blir stående er gjensidig utelukkende på det samme elementet. Ikke en avveining å
   balansere, men hva de to erklæringene betyr sammen.

   Et høydetak på beholderen løser det ikke: da klippes eller ruller datasamlingspanelet inni
   den, som er nettopp det kommentaren over sier den står uten høydetak for å unngå.

   Utveien er å gjøre overflyten BETINGET. Er det plass til tabellen, er beholderen ikke en
   rulleboks i det hele tatt, sida blir den klistrende forelderen, og hodet blir stående uten at
   noe må få et høydetak. Er det ikke plass, beholder den overflow-x: auto og hodet blir ikke
   stående — og det er riktig vei rundt: det er på den smale skjermen et fastlåst hode spiser
   plassen som skal leses.

   BEHOLDERSPØRRING, ikke mediespørring. Komponenten står bygget inn i helsedatas side, så det er
   ikke vindusbredden som avgrenser den — et bredt vindu kan gi tabellen 600px, og et smalt kan gi
   den alt. Et vindusbrekkpunkt ville tatt feil på nøyaktig de breddene som avgjør.

   Beholderen er `.munin-explorer-results`, forelderen, og ikke rulleboksen selv: et element kan
   ikke spørre om sin egen størrelse, reglene inne i @container treffer bare etterkommere.
   Spørringen måler beholderens INNHOLDSBOKS, og rulleboksen er et flex-barn som fyller den, så
   det som måles er rulleboksens egen bredde. `:has()` holder `container-type` unna variabellista,
   som deler `.munin-explorer-results` og ikke har bruk for noe av dette.

   `container-type: inline-size` bærer med seg layout- og størrelsesinneslutning, men uten virkning
   her: elementet står med width: 100% som eneste flex-barn i `.munin-explorer-container`, så
   bredden var aldri innholdsstyrt, og det er allerede `position: relative` og dermed containing
   block for det som ligger absolutt plassert inni.

   BREKKPUNKTET FØLGER KOLONNETALLET. 780px var standardoppsettets tall,
   målt da katalogen var 66 kilder; slo leseren på kolonner i kolonnevelgeren, ba tabellen om mer, og
   over brekkpunktet rant den ut av beholderen i stedet for å rulle inni den — og tok vertssidas
   vannrette rullefelt med seg. Katalogen er 98 kilder i dag, og det samme standardoppsettet ber om
   813,1px, så tallet var dessuten for lavt for sitt eget oppsett. Det står igjen under som reserve
   for pakker som ikke skriver ned kolonnetallet, og ellers avløst av tabellen med ett brekkpunkt
   per tall lenger ned.

   `top` leses fra `--munin-explorer-sticky-top` med 0 som standard. En vert med sin egen klistrede
   toppmeny må kunne skyve hodet ned under den, og komponenten kan ikke vite hvor høy den er.

   Bare tabellens eget `thead`: datasamlingstabellen inne i det utfoldede panelet er en etterkommer
   av `.munin-explorer-kilder`, og med etterkommer-kombinator ville dens hode blitt klistret også —
   midt inni en rad.

   Flata hodet trenger for at radene ikke skal synes gjennom det, står allerede i regelen over
   ($grey10). Streken under må derimot tegnes på nytt: med border-collapse hører den til tabellen
   og ikke til cella, så den blir liggende igjen der hodet stod da rullingen begynte. */
.munin-explorer-results:has(> .munin-explorer-kilder-scroll) {
  container-name: munin-explorer-kilder;
  container-type: inline-size;
}

/* Reserven, og bare den: `--cols-N` kom i en nyere Fhi.Munin.Explorer, og en vert
   som oppdaterer Stiler uten å oppdatere pakken ville mistet det klistrede hodet helt om denne
   regelen ble borte. Den gjør det regelen gjorde før, for nøyaktig de rulleboksene som ikke bærer
   noen modifikator. Attributtselektoren treffer stammen, ikke et enkelt tall, så den slår av seg
   selv i samme øyeblikk pakken begynner å skrive tallet. */
@container munin-explorer-kilder (min-width: 780px) {
  .munin-explorer-kilder-scroll:not([class*=munin-explorer-kilder-scroll--cols-]) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll:not([class*=munin-explorer-kilder-scroll--cols-]) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
/* Ett brekkpunkt per kolonnetall — og hvorfor nøkkelen er antall VALGTE kolonner og ikke tallet i
   klassenavnet.

   Pakken skriver ned N, antallet <th> hodet faktisk tegnet: fire kolonner alltid (utfold, Navn,
   Status, Opprettet), pluss avkryssingskolonnen hos en vert som har koblet opp overleveringen,
   pluss dem kolonnevelgeren har på. Samme N er derfor to ulike tabeller: verten uten avkryssing har
   én INNHOLDSKOLONNE mer ved samme N, og innholdskolonner er brede der avkryssingen måler 32,0px i
   hver eneste konfigurasjon som ble målt. `:has()` skiller dem, og de to selektorene som deler ett
   brekkpunkt er nettopp de to som har like mange valgte kolonner.

   Brekkpunktet er bredden verten MED avkryssing trenger. Verten uten får de samme 32px i overkant,
   altså for mye og aldri for lite: den ruller i et 32px bredt bånd der den kunne stått klistret, og
   renner aldri ut.

   TALLENE ER MÅLT, ikke regnet ut fra en kolonnebredde — kolonnene er ikke like brede, og Navn
   holder navn som «Nasjonalt kvalitetsregister for ryggkirurgi (NKR), degenerativ nakke». Målt på
   riggen mot hele katalogen, 98 kilder, som tabellens min-content-bredde i hver av de elleve
   tilstandene. Ti valgfrie kolonner er 1024 kombinasjoner, så tallet for k valgte er den BREDESTE
   kombinasjonen med k kolonner: de k dyreste, rangert etter hva hver enkelt koster alene —
   Dataansvarlig og Databehandler 166,2px, Grad av personidentifikasjon 156,7px, Kildetype 145,5px,
   Datasamlinger 118,5px, Gyldighet 89,0px, Importert 86,4px, Variabler 82,2px, Delkilder 81,7px,
   Sist endret 72,3px. Terskelen er målingen rundet opp til første hele piksel OVER den, samme
   margin som 780 hadde mot 779.

   PRISEN, sagt rett ut: standardoppsettet ber om 813,1px, men deler brekkpunkt med de tre dyreste
   kolonnene, som ber om 956,0px. Mellom de to breddene mister standardoppsettet det klistrede hodet
   det har i dag. Det er den eneste veien rundt som finnes: et brekkpunkt kan ikke måle hvilke
   kolonner som står på, bare hvor mange. Et for lavt brekkpunkt er nettopp feilen saken gjelder —
   tabellen ut av beholderen og sida i vannrett rulling — mens et for høyt bare er mindre klistret.

   TALLENE ER ETTERMÅLT 2026-09-15 og står uendret. Hodets nye typografi ble målt per kolonne med
   samme metode som da brekkpunktene ble satt, og metoden gjenskaper disse tallene på hundredelen
   (466,97 -> 467, 1631,58 -> 1632). INGEN kolonne ble breiere: sju ble smalere — Datasamlinger
   118,5 -> 112,4, Opprettet 88,8 -> 83,6, Grad av personidentifikasjon 156,7 -> 152,6, Importert
   86,4 -> 83,8, Status 65,4 -> 63,4, Delkilder 81,7 -> 80,3, Variabler 82,2 -> 81,1 — og resten sto
   stille, fordi der er den lengste VERDIEN breiere enn hodet. Hele tabellen gikk fra 1631,6 til
   1609,2px. Terskler som er for HØYE er den ufarlige retninga — «mindre klistret», som avsnittet
   over sier — så tabellen trengte ikke røres.

   NØKKEL 11 KOM MED KODE-KOLONNEN, OG DEN ER MÅLT MED SAMME METODE. Fhi.Munin.Explorer
   gjorde kildekoden om til en valgfri kolonne i kolonnevelgeren, avslått som
   standard, og flyttet den dermed ut av navnecella, der den sto som en `caption` under navnet. Med
   alle elleve valgfrie kolonnene på og avkryssingskolonnen tegnet, skriver pakken `--cols-16`, og
   tabellen måler 1814,7px på sitt smaleste. Målt på riggen 2026-09-22 mot hele katalogen, 97
   kilder, som tabellens min-content-bredde, og rundet opp til første hele piksel over: 1815px.
   Samme metode og samme avrunding som de elleve over.

   Den samme tabellen uten avkryssingskolonne måler 1782,7px, altså NØYAKTIG 32,0px mindre — de
   samme 32px avsnittet over sier avkryssingen koster i hver eneste konfigurasjon, ettermålt her.
   Verten uten avkryssing får dermed også på dette trinnet for mye og aldri for lite.

   KODE-KOLONNEN GJORDE DE ELLEVE OVER LITT ROMSLIGE, OG DET ER DEN UFARLIGE RETNINGA. Koden under navnet var
   det breieste i navnecella: standardoppsettet gikk fra 798,9px til 771,5px da den forsvant, målt
   på riggen før og etter samme pakkebytte. Navnekolonna er altså ~27px smalere i hver eneste av de
   elleve tilstandene, så tersklene over er nå for høye og ikke for lave. De står derfor urørt — se
   avsnittet over om hvorfor det er den retninga som ikke koster noe.

   ENDRES HODETS STØRRELSE, SPERRING ELLER KASUS IGJEN, SKAL DENNE TABELLEN MÅLES OM I SAMME
   ÅNDEDRAG, og sperring er den dyre av de tre: 0.07em på hodet alene la 11,3px på «Grad av
   personidentifikasjon» og løftet hver av de elleve tersklene med 4,3 til 37,4px. Se hodets egen
   kommentar over for hva det kostet. Dette er ikke en tabell som kan regnes ut fra en
   kolonnebredde. */
/* Tabellen over gjelder bare en pakke uten kolonnehåndtak (eldre Fhi.Munin.Explorer). Stiler
   publiseres ved merge og verten kan ligge etter med pakken, så den må oppføre seg nøyaktig som før. */
@container munin-explorer-kilder (min-width: 467px) {
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 634px) {
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 800px) {
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 957px) {
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1102px) {
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1220px) {
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1310px) {
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1396px) {
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1478px) {
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1560px) {
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1632px) {
  .munin-explorer-kilder-scroll--cols-15:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-15:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1815px) {
  .munin-explorer-kilder-scroll--cols-16:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)),
  .munin-explorer-kilder-scroll--cols-15:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-16:has(.munin-explorer-kilder__select):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-15:not(:has(.munin-explorer-kilder__select)):not(:has(.munin-explorer-kilder-header__navn)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
/* Med håndtak: står ingen av de fire bredeste kolonnene (Kode, Dataansvarlig, Databehandler,
   Grad) på, gjelder den lette stigen, ellers den brede. Hvert trinn er den bredeste målte tabellen
   med k valgte kolonner i sitt eget utvalg, 97 kilder, rundet opp til første hele piksel over. */
@container munin-explorer-kilder (min-width: 433px) {
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 578px) {
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 691px) {
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 780px) {
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 864px) {
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 945px) {
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1026px) {
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1106px) {
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1186px) {
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1259px) {
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)),
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):not(:has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 666px) {
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 832px) {
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 998px) {
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1151px) {
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1296px) {
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1409px) {
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1498px) {
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1582px) {
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1663px) {
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1744px) {
  .munin-explorer-kilder-scroll--cols-15:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-15:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1824px) {
  .munin-explorer-kilder-scroll--cols-16:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-15:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-16:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-15:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1904px) {
  .munin-explorer-kilder-scroll--cols-17:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-16:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-17:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-16:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
@container munin-explorer-kilder (min-width: 1977px) {
  .munin-explorer-kilder-scroll--cols-18:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad),
  .munin-explorer-kilder-scroll--cols-17:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-18:has(.munin-explorer-kilder__select):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-17:not(:has(.munin-explorer-kilder__select)):has(.munin-explorer-kilder-header__navn):has(.munin-explorer-kilder-header__kode, .munin-explorer-kilder-header__dataansvarlig, .munin-explorer-kilder-header__databehandler, .munin-explorer-kilder-header__grad) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
/* Nettleseren ruller bare den fokuserte kontrollen inn i vinduet, så Shift+Tab kunne legge rada
   under det klistrede hodet på 52px (WCAG 2.4.11). 4rem er hodet pluss
   kontrollens avstand til radtoppen, 8,5px, og gjelder også der hodet ikke klistrer. */
.munin-explorer-kilder-scroll > .munin-explorer-kilder > tbody :is(a, button, input, select, summary, [tabindex]) {
  scroll-margin-top: calc(var(--munin-explorer-sticky-top, 0px) + 4rem);
}

/* Tallkolonner høyrestilles med tabularsiffer, ellers står samme tall i to bredder på to rader.
   Skopet under tabellen fordi regelen den må slå er celleregelen over, som har både klasse og
   element - et bart klassenavn taper og tallene blir stille stående til venstre. */
.munin-explorer-kilder .munin-explorer-kilder__count {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Et null i de kolonnene er et fravær, ikke en verdi. Står det i samme tone som tallene rundt,
   teller øyet det med, og en kolonne av nuller ser befolket ut. Derfor dempes det. Det er fortsatt
   lesbart, fortsatt markerbar tekst og fortsatt lest opp av skjermleseren; bare tonen endres.

   $grey60 og ikke en lysere grå valgt på øyemål. Forslaget saken kommer fra setter dempet tekst til
   #51547b, og $grey60 er tokenet som ligger på den verdien. Målt mot begge flatene cella faktisk
   står på: 7,23:1 mot den hvite tabellen og 6,38:1 mot $grey20, som radhoveret (39197) legger på
   nettopp disse cellene. Kravet er 4,5:1 - teksten er 0,875rem og dermed ikke stor tekst, så
   unntaket på 3:1 gjelder ikke (WCAG 1.4.3). $grey50 frister, med 4,65:1 mot hvitt, men faller til
   4,10:1 på den hoverte raden og stryker der. Det er en feil som ser grei ut i ro og bare oppstår
   under pekeren, så den hvite målingen alene sier ingenting.

   Farge og ikke opacity: opacity blander mot flata under, og den flata skifter når raden hoveres.
   Da måtte den sammensatte verdien måles på nytt for hver bakgrunn en vert kan finne på å sette.

   Skopet under tabellen med to klasser, som `__count` over. Her er det ikke celleregelen over som
   må slås - den setter ingen farge - men et bart klassenavn ville ligget under enhver vertsregel
   med både klasse og element på den samme cella, og fargen ville da stille blitt stående. To
   klasser gir samme vekt som resten av registeret i fila. Ingen `!important`. */
/* VEKTTRINNET, lagt til uten at én eneste farge flytter seg. Målt før: null-cellene sto på $grey60
   med 6,76:1 mot sidebunnen og 6,38:1 på den hoverte raden, ikke-nullene på arvet $dark med 14,28:1
   og 13,47:1. Alle fire skal stå uendret etter denne regelen — flytter ett av tallene seg, er det
   feil endring. Derfor rører den bare snittet.

   Etter dette bærer skillet to signaler, farge og vekt, og hvert av dem holder alene. Det var
   ærendet: dempe nullene et hakk til, ikke flate ut de 123 målte tallene ned til nullenes tone.

   `graphik-light` og ikke `font-weight`: familien `graphik` har én snittfil, så en lettere vekt har
   ingen fil å hente og nettlesere syntetiserer ikke lettere — tallet ville stått uendret. Målt på
   riggen tegner Light 25 % mindre blekk enn Regular på «000» (18471 mot 24785 i en canvas-prøve),
   og — dette er grunnen til at nettopp denne fila kan brukes her — den har NØYAKTIG samme
   sifferbredde: «0 8 245» måler 50,406px i begge. Tabularsifrene fra regelen over overlever altså
   trinnet uendret. */
.munin-explorer-kilder .munin-explorer-kilder__count--zero {
  color: rgb(81, 84, 123);
  font-family: "graphik-light", Arial, Helvetica, sans-serif;
}

/* STOLPEN LIGGER UNDER SIFRENE OG IKKE VED SIDEN AV DEM, og det er brekkpunkttabellen over som
   bestemmer det. Skissa tegner den ved siden av tallet, men da blir Variabler-kolonna breiere, og
   målingen av tallkolonnene viste hva noen få piksler koster: terskelen for tre valgte kolonner ligger
   på 957px, og beholderen måler 951px i et vindu på 1440. Et innslag på egen linje legger seg i
   cellehøyda som alt finnes og rører ingen bredde: målt med stolpen limt inn i alle 64 ikke-null-
   cellene sto Variabler-kolonna på 81,13px og tabellen på 951,0px — uendret til hundredelen — og
   INGEN av de 97 radene endret høyde. Laveste rad måler 68,2px, så de 6 + 4px får plass i det som
   allerede er der.

   Forankret til høyre med `margin-left: auto`, så stolpen ender der sifrene ender: cella er
   høyrestilt fra `__count`-regelen over. Målt avvik mot sifrenes høyrekant: 0,00px ved 100 %, 16 %
   og 1 %. Formen ellers er `munin-explorer-frequency__track` / `__fill` sin (_kodeverk.scss:203 og
   :211) — samme figur inne i ei tabellcelle.

   INGEN BREDDE PÅ FYLLET. Pakken setter den som innstilt stil, en hel prosent 1-100 av den største
   Variabler-verdien blant radene som er tegnet. En regel her ville overstyrt
   den for hver eneste rad.

   HØYDE OG FARGE ER HUSETS EGNE, ikke skissas: `kildeutforsker-forslag.html` finnes ikke i noe
   utsjekket repo lenger, så 6px, $grey40 og $primary er hentet fra frekvensstolpen som er den
   nærmeste slektningen. Sporet måler 1,94:1 mot den hvite rada og 1,71:1 mot $grey20-hoveret, altså
   synlig på begge; fyllet mot sporet 3,62:1. Stolpen er `aria-hidden` og dekorativ — tallet ved
   siden av er fakta — så 3:1-kravet i WCAG 1.4.11 gjelder den ikke.

   Skopet under tabellen av samme grunn som `__count` over: celleregelen den må slå har både klasse
   og element, og et bart klassenavn taper. */
.munin-explorer-kilder .munin-explorer-kilder__bar {
  background-color: rgb(187, 184, 201);
  display: block;
  height: 6px;
  margin-top: 4px;
  width: 100%;
}

.munin-explorer-kilder .munin-explorer-kilder__bar-fill {
  background-color: rgb(82, 30, 255);
  display: block;
  height: 100%;
  margin-left: auto;
}

/* Navnet er en <button> som ser ut som en lenke - samme behandling som variabelradenes navn.
   En vert som hopper over dette mister utseendet, ikke funksjonen: elementet under er en knapp,
   så den er fortsatt betjenbar og fortsatt åpenbart betjenbar. */
.munin-explorer-kilder__name {
  appearance: none;
  background: none;
  border: 0;
  color: rgb(50, 55, 141);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin: 0;
  padding: 0;
  text-align: left;
}

.munin-explorer-kilder__name:hover {
  text-decoration: underline;
}

.munin-explorer-kilder__name:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* ---- handlingsrada over trefflista ----

   Utforskeren pakker de tre tingene som hører sammen over tabellen i én <div>: knappen som sender
   utvalget videre, nullstillingsknappen, og linja som teller hvor mange kilder som er huket av.
   Navnet har stått i markupen siden radutvalget kom, uten en regel noe sted, og markupens egen
   kommentar sier hvorfor det er feil: «everything that comes and goes is to the right of everything
   that does not». «Til høyre» er en rad, og uten en regel her er innpakningen en blokk - telleteksten
   er et <p> og legger seg UNDER knappene i stedet for ved siden av. Målt mot Stiler 0.1.42 med ekte
   graphik: innpakningen 1032x66,4px, telleteksten på egen linje 44px lenger ned.

   16px, og det er fokusringen som setter tallet. `.hd-button-square:focus` tegner
   `box-shadow: 0 0 0 2px $white, 0 0 0 6px $focus` - 6px utenfor knappekanten, og en boksskygge tar
   ikke plass i oppsettet. Med $ws-s ville to naboknappers ringer overlappet med 4px; 16px lar dem stå
   4px fra hverandre. Samme tall begge veier, fordi ringen er like høy som bred. Før denne regelen
   stod knappene 4,8px fra hverandre - mellomrommet mellom taggene, ikke en avstand noen bestemte.

   `wrap` fordi `hd-button-square` er `white-space: nowrap` og etiketten er én av tre: «Utforsk alle
   variabler» måler 189,2px, «Utforsk variabler for utvalget» 250,6px. På en smal kolonne skal
   telleteksten ned på neste linje og ikke dyttes ut av den - WCAG 1.4.10, samme grunn som
   rullebeholderen over.

   Ingen loddrett marg, med vilje. Under rada eier `.munin-explorer-container` avstanden med
   `padding-top: 40px`, og over står statuslinjas egen 14px. En `margin-top` her ville dessuten målt
   ulikt på hver side av 1024px: under brekkpunktet er `.munin-explorer` blokkflyt og margene faller
   sammen, over er den et rutenett der de legges sammen.

   Ingen flate og dermed ingen ny kontrastmåling: rada står over tabellen og ikke på en kilderad, så
   $grey20-hoveret på kilderadene treffer den ikke. Telleteksten beholder `.caption` sin
   $grey60 mot sidebunnen $grey10, 6,76:1, den samme målinga `_buttons.scss` alt står på.

   Knappen får ingen BREDDE herfra, og det er bevisst: en `min-width` måtte stå på 293,4px for å
   dekke den engelske etiketten og ville latt 104px stå tom i den vanlige norske. Det hører til i
   pakka. Flata og forma kler `hd-button-square button-square--primary` alt (189,2x44 på $primary).
   Brytinga er en annen sak, og den står i regelen rett under.

   To klasser, som resten av registeret i fila: et bart klassenavn ville ligget under en vertsregel
   med både klasse og element på den samme noden. Ingen `!important`. */
.munin-explorer .munin-explorer-selection {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Etiketten må kunne brekke. `.hd-button-square` er `white-space: nowrap` med fast
   `height: 2.75rem`, og handoverknappens etikett er én av tre — den lengste er engelskens
   «Explore variables for this selection». Uten en overstyring her er etiketten én ubrytelig linje,
   knappen blir bredere enn rada den står i, og sida får vannrett rulling: WCAG 1.4.10 Reflow, som
   er oppgitt ved 320px. `flex-wrap` over løser det ikke — den brekker mellom knappene, ikke inni én
   av dem.

   Målt mot denne fila sin egen `main.css` med ekte graphik, 320px utsnitt og 178px rad, med
   regelen skrudd av: «Utforsk alle variabler» 189,2px og sida passer, «Utforsk variabler for
   utvalget» 250,6px og `document.scrollWidth` 322px, den engelske 293,4px og 364px. Den norske
   huka-av-tilstanden renner over den også, så dette er ikke et engelsk-bare-tilfelle.

   `min-height` og ikke bare `height: auto`: uten golvet er en knapp med étlinjes etikett 42px høy,
   ikke 44 — 0,8125rem luft to ganger pluss `line-height: 1` er nøyaktig 42. 2,75rem er husets egen
   knappehøyde og samtidig minstemålet i WCAG 2.5.5, så `auto` alene ville tatt trykkmålet under det
   for nullstillingsknappen ved siden av. Ingen ny farge og ingen ny flate, så ingen ny
   kontrastmåling — dette flytter bare hvor teksten får brekke.

   Tre klasser med vilje. `.hd-button-square` sin egen er (0,1,0) og står i en annen fil, og
   lastrekkefølgen i `main.scss` er kaskade-følsom: en (0,2,0) kunne blitt tatt tilbake av en senere
   regel med lik spesifisitet, en (0,3,0) kan den ikke. Ingen `!important`.

   Selektoren må treffe en knapp som er direkte barn av `.munin-explorer-selection`, og rada har to
   — handover og nullstilling. Begge skal ha regelen: de står i samme midtstilte rad. Det hører med
   at nettopp skopet er på rullebladet her: første forsøk på hoppelenkas regel var skopet
   `.munin-explorer-header .skiplink-pagination` og kunne aldri ha truffet. */
.munin-explorer .munin-explorer-selection .hd-button-square {
  height: auto;
  min-height: 2.75rem;
  white-space: normal;
}

/* ---- «Vis datasamlinger» ----

   Kontrollkolonnen først i tabellen, knappen i den, og panelet raden folder ut under seg. Alle
   tre navnene kom med kolonnen og hadde ingen regel her før nå. */
/* Skopet under tabellen som `__count`, og av samme grunn: celleregelen over har både klasse og
   element, så et bart klassenavn taper og kolonnen blir stående venstrestilt. Smalere sideluft enn
   radenes 12px er det som lar bredden bite - med 12px målte kolonnen 45,3px og var innholdsstyrt,
   og da hadde både `width` og `text-align` stått uten virkning. */
.munin-explorer-kilder .munin-explorer-kilder__expand {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  vertical-align: top;
  width: 32px;
}

/* Avkryssingskolonna i den andre enden av raden, og den samme slags kolonne som `__expand` over:
   en smal kontroll ved siden av innholdet. Den fikk aldri en regel - navnet står i komponentens
   egen klassekontrakt, men verken 0.1.42 eller SCSS-en her har hatt noe bak det - så kolonna sto
   venstrestilt med radenes 12px sideluft og lot auto-layout gi den mer bredde enn en
   avkryssingsboks trenger. Samme form som `__expand` - sideluft, midtstilling og bredde - og av
   samme grunn: sideluften må ned fra 12px før `width` biter, ellers er kolonna innholdsstyrt og
   bredden står uten virkning. `vertical-align` gjentas ikke; celleregelen over gir alt `top`.

   Skopet under tabellen som `__count` og `__expand`: celleregelen den må slå har både klasse og
   element (0,1,1), og et bart klassenavn (0,1,0) taper. To klasser gir 0,2,0. Ingen `!important`.

   RØRER IKKE SELVE AVKRYSSINGSBOKSEN. Den er 13 x 13 native, som
   skal opp i 24 x 24 - og her settes bare cella rundt. De to kan skilles fordi trykkmålet ligger
   på `input`, ikke på `td`: sideluft i cella er ikke en del av boksens flate, og verken hodets
   eller radenes `input` røres. 32px kolonne med 4px sideluft gir 24px innhold, altså nøyaktig den
   plassen boksen trenger - denne regelen står ikke i veien for den og tar ikke noe av den. */
/* Knappen bærer `hd-button-reset`, som nullstiller padding og font. Uten luft her er glyfen hele
   trykkmålet — målt 7,3 x 28,8px før denne regelen. Regelen ga 24px høyde, men bare ~20px bredde
   (6px sideluft rundt et smalt tegn); 8px sideluft gir 24 x 24, målt. */
/* LUFTA FØLGER GLYFEN. Da ikonet gikk fra 24px til 16px, krympet knappen med
   det — målt 40x32 -> 32x24 — fordi luften her er fast og boksen er glyf pluss luft. 24px er
   fortsatt over WCAG 2.5.5, men ikonendringen skulle ikke gi tilbake trykkmålet som nettopp var vunnet.
   8/12 gir 16px glyf de samme 40x32 som 24px glyf ga med 4/8. Endres ikonmålet igjen, skal disse to
   tallene endres i samme åndedrag. */
.munin-explorer-kilder__expand-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  padding: 8px 12px;
}

/* `inline-flex` over erstatter `font-size: 1rem` og `line-height: 1`, som stod her for å gi det
   gamle plusstegnet en boks. Ikonet er nå et bakgrunnsbilde på en inline-block, og en inline-block
   står på grunnlinja: under den ligger skriftas underlengde, og knappen målte 35px høy der 24px
   ikon og 2x4px luft skulle gitt 32. Med flex er det ingen linjeboks å arve underlengden fra.
   `inline-flex` og ikke `flex` — en blokknivåknapp ville fylt cella og sett bort fra
   `text-align: center` på den.

   Fokusringen mangla òg. Søskenet `__name` har si, og et fokuspunkt leseren ikke ser er WCAG
   2.4.7 — samme erklæring som der. */
.munin-explorer-kilder__expand-toggle:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

/* Chevronen selv. `margin: 0` sto her tidligere og er tatt ut igjen: `icon--nomargin` i markupen
   gjør jobben. Modifikatoren virker nå fra `base/_icons.scss` alene: kopien av `.icon` i
   `pages/_healthregisterpage.scss` som slo den ut, er borte, og med den lappen for
   `icon--nomargin`. Målt etter rettinga: marginen er fortsatt 0, knappen fortsatt
   40x32 og `__expand`-kolonna fortsatt 48px. En lokal overstyring oppå en generell regel som
   virker, er bare forvirring for neste leser.

   16px og ikke 24: glyfen står i en tabellrad ved siden av 14px tekst, og 24px er husets ikonmål
   for knapperader og menyer, ikke for et merke inne i ei rad. KNAPPEN RØRES IKKE — den måler
   fortsatt 40x32 og er trykkmålet; WCAG 2.5.5 handler om flata som tar trykket, ikke om
   blekket i den. `background-size` må med: grunnregelen i `base/_icons` setter bildet med
   `background`-kortformen og `center/1.5rem`, så størrelsen følger ikke med width/height alene. */
.munin-explorer-kilder .munin-explorer-kilder__expand-icon {
  background-size: 1rem;
  height: 1rem;
  width: 1rem;
}

/* Foldet rad skriver `icon-keyboard-arrow-down`, åpen skriver `...-up`, og `base/_icons.scss` tegner
   begge i hvile. Bare den blå hoverfargen står her; direkte barn fordi datasamlingstabellen i
   panelet har sin egen tbody. */
.munin-explorer-kilder > tbody > tr:hover .munin-explorer-kilder__expand-icon.icon-keyboard-arrow-down {
  background-image: url(../img/icons/keyboard-arrow/icon_down--blue.svg);
}

.munin-explorer-kilder > tbody > tr:hover .munin-explorer-kilder__expand-icon.icon-keyboard-arrow-up {
  background-image: url(../img/icons/keyboard-arrow/icon_up--blue.svg);
}

/* ---- utvalgskolonnen ----

   Andre kontrollkolonne, og den finnes bare når verten har gitt komponenten et sted å sende
   utvalget: uten `VariableExplorerPath` tegner Kelda verken kolonnen eller knapperaden over, og da
   treffer denne regelen ingenting. Det var nettopp det som skjedde på helsedata - CMS-monteringen
   kunne ikke sette parameteren, så hele utvalget var av uten at noe sa fra (ADO #121028).

   Samme form og samme skoping som `__expand` rett over, av samme grunn: celleregelen har både
   element og klasse, så et bart klassenavn taper og avkryssingsboksen blir stående venstrestilt i
   en innholdsstyrt kolonne. Bredden er `__expand` sin, ikke en egen måling - de to kolonnene står
   ved siden av hverandre og skal være like brede.

   Knappen i rada over får med vilje ingen regel; se begrunnelsen der. */
.munin-explorer-kilder .munin-explorer-kilder__select {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  vertical-align: top;
  width: 32px;
}

/* Boksen i kolonna. Ingenting ga den en størrelse: Stilers eneste regel for elementet er
   `input[type=checkbox i] { appearance: auto; margin: 3px 3px 3px 4px }` — nettleserens egen — og
   den tegner 13 x 13. WCAG 2.5.5 ber om 24 x 24, og her er det boksen selv som er målet: det
   finnes ingen etikett rundt den å gjøre stor i stedet, slik fasettpanelets `li > label` er.
   32px kolonne minus 2x4px sideluft er nøyaktig de 24px som skal inn.

   Margen må nullstilles og ikke bare overskrives med tall: nettleserens 3px 3px 3px 4px er skjev,
   og en 24px boks midtstilt i 24px innhold har ikke plass til noen av dem. `text-align: center`
   på cella over gjør resten.

   (0,3,1) — to klasser, ett attributt og ett element. `input[type=checkbox i]` er (0,1,1), og et
   bart klassenavn (0,1,0) ville tapt for den: det er akkurat den fella som ga 18px der 14px stod
   skrevet. Ingen `!important`.

   Gjelder både hodets boks og radenes. Hodets tilgjengelige navn ligger i `aria-label` og røres
   ikke — dette er en størrelse, ikke markup. */
.munin-explorer-kilder .munin-explorer-kilder__select input[type=checkbox] {
  height: 24px;
  margin: 0;
  width: 24px;
}

/* Skopet under tabellen av samme grunn som `__count` over: celleregelen den må slå har både klasse
   og element, så et bart klassenavn taper og panelet blir stående med radenes egen celleluft.
   Målt: padding ble stående 8px 12px på første forsøk.

   Flata er ikke $grey10: mot den hvite tabellen var panelet usynlig, og de seks datasamlingene
   leste som seks kilder til under en hoderad ingen hadde sagt var nestet. Innrykket og streken ned
   venstresida er det som bærer «inni denne raden». */
.munin-explorer-kilder td.munin-explorer-kilder__expanded {
  background: rgb(239, 240, 250);
  border-left: 3px solid rgb(187, 184, 201);
  padding: 12px 20px 16px 32px;
}

/* Datasamlingstabellen er alt kledd av `_trail.scss`, men for drill-in-visninga, der den står på
   hvitt. På panelet arver den $grey20, og hodet sitt beholder $grey10, så to hoderader står rett
   under hverandre i nesten samme tone. Hvit flate og et hode i en annen FORM skiller ytre fra
   indre.

   FORMA, OG IKKE LENGER STØRRELSEN: da hodet over gikk fra 14px til 0.6875rem i sperrede store
   bokstaver, ble dette indre hodet det største av de to. Tallet står likevel igjen. Skillet bar
   aldri på den ene pikselen mellom 14 og 13 — det bærer nå på at det ytre hodet er sperrede store
   bokstaver og det indre vanlig setningsskrift, som er et kraftigere signal enn en pikselforskjell
   var. Målt med en utfoldet rad og det ytre hodet klistret rett over panelet. */
.munin-explorer-kilder__expanded .munin-explorer-kilde__datasamlinger {
  background: rgb(255, 255, 255);
}

.munin-explorer-kilder__expanded .munin-explorer-kilde__datasamlinger thead th {
  font-size: 0.8125rem;
}

/* ---- kildelisten som kort på telefon ----

   Valgt 19.10: under 768px blir hver kilde et kort med navn, kildetype, antall datasamlinger
   og variabelstolpen; resten av kolonnene og den sidelengse rullingen er borte. Hodet står igjen som
   sorteringslinje med Navn og Variabler. `__card-label` er `hidden` i markupen, så uten disse reglene
   tegnes tabellen som før. */
@media all and (max-width: 767px) {
  .munin-explorer-kilder,
  .munin-explorer-kilder > thead,
  .munin-explorer-kilder > tbody {
    display: block;
  }
  /* Hodet står i samme rutenett som kortene, så boksen, Navn og Variabler står over sine kolonner. */
  .munin-explorer-kilder > thead > tr,
  .munin-explorer-kilder > tbody > tr {
    display: grid;
    grid-template-columns: 2rem auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 16px;
  }
  .munin-explorer-kilder > thead > tr {
    align-items: center;
    border-bottom: 1px solid rgb(230, 230, 237);
  }
  .munin-explorer-kilder > thead > tr > th {
    display: none;
  }
  .munin-explorer-kilder > thead > tr > th:is(.munin-explorer-kilder-header__select, .munin-explorer-kilder-header__navn, .munin-explorer-kilder-header__variabler) {
    display: block;
    border-bottom: 0;
    padding: 8px 0;
  }
  .munin-explorer-kilder > thead > tr > .munin-explorer-kilder-header__select {
    grid-column: 2;
  }
  .munin-explorer-kilder > thead > tr > .munin-explorer-kilder-header__navn {
    grid-column: 3;
  }
  .munin-explorer-kilder > thead > tr > .munin-explorer-kilder-header__variabler {
    grid-column: 4;
    text-align: left;
  }
  .munin-explorer-kilder > tbody > tr {
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid rgb(230, 230, 237);
  }
  /* Panelraden er bare panelet: ingen egen luft eller strek mellom den og kortet over. */
  .munin-explorer-kilder > tbody > tr:has(> .munin-explorer-kilder__expanded) {
    padding: 0;
    border-bottom: 0;
  }
  /* Hoveret legger seg på hele kortet; på cellene ble det grå flekker med hvite fuger mellom. */
  .munin-explorer-kilder > tbody > tr:is(:hover, :focus-within):not(:has(> .munin-explorer-kilder__expanded)) {
    background: rgb(239, 240, 250);
  }
  .munin-explorer-kilder > tbody > tr:hover > th,
  .munin-explorer-kilder > tbody > tr:hover > td:not(.munin-explorer-kilder__expand):not(.munin-explorer-kilder__expanded),
  .munin-explorer-kilder > tbody > tr:focus-within > th,
  .munin-explorer-kilder > tbody > tr:focus-within > td:not(.munin-explorer-kilder__expand):not(.munin-explorer-kilder__expanded) {
    background: transparent;
  }
  .munin-explorer-kilder > tbody > tr > :is(th, td) {
    display: none;
    border-bottom: 0;
    padding: 0;
  }
  .munin-explorer-kilder > tbody > tr > :is(th[scope=row], .munin-explorer-kilder__expand, .munin-explorer-kilder__select, .munin-explorer-kilder__card, .munin-explorer-kilder__expanded) {
    display: block;
  }
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__expand {
    grid-column: 1;
    grid-row: 1;
  }
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__select {
    grid-column: 2;
    grid-row: 1;
  }
  .munin-explorer-kilder > tbody > tr > th[scope=row] {
    grid-column: 3/-1;
    grid-row: 1;
    min-width: 0;
  }
  /* «Skjermbildeundersøkelsene» er bredere enn kolonnen ved 320px. */
  .munin-explorer-kilder > tbody > tr > th[scope=row] .munin-explorer-kilder__name {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__card:not(.munin-explorer-kilder__count) {
    grid-column: 3/-1;
    color: rgb(81, 84, 123);
  }
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__card.munin-explorer-kilder__count {
    grid-row: 3;
    grid-column: 3;
    text-align: left;
    white-space: nowrap;
  }
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__card.munin-explorer-kilder__card--variabler {
    grid-column: 4;
  }
  /* `[hidden]` i velgeren: regelen er skrevet om attributtet, så Explorers «hidden means hidden»
     regner den som en bevisst visning (scripts/hidden-on-purpose.mjs). */
  .munin-explorer-kilder .munin-explorer-kilder__card-label[hidden] {
    display: inline;
    color: rgb(81, 84, 123);
  }
  /* Skrivebordets 32px innrykk er for en rad i en tabell; i et kort på 256px tok det plassen fra
     datasamlingene. */
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__expanded {
    grid-column: 1/-1;
    padding: 12px 12px 16px;
  }
  /* «Vis alle variabler i …» i panelet er bredere enn kortet ved 360px; den brytes i stedet. */
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__expanded .hd-button-square {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* Til og med 400px får ikke de to tallene plass ved siden av hverandre (målt: 360 og 375 rant over
   med 37 og 22px), så der står de under hverandre. */
@media all and (max-width: 400px) {
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__card.munin-explorer-kilder__count,
  .munin-explorer-kilder > tbody > tr > .munin-explorer-kilder__card.munin-explorer-kilder__card--variabler {
    grid-row: auto;
    grid-column: 3/-1;
  }
}
.munin-explorer-datasamling__criteria,
.munin-explorer-datasamling__main > .munin-explorer-page__section > p {
  font-size: 1rem;
  line-height: 1.6;
}

.munin-explorer-datasamling__main .munin-explorer-page__anchor > .headline-xxs {
  margin: 1.5rem 0 0.4375rem;
}

.munin-explorer-datasamling__criteria {
  margin: 0 0 0.9375rem;
}

.munin-explorer-datasamling__main .munin-explorer-page__anchor > .munin-explorer-page__fields {
  grid-template-columns: minmax(0, 1fr);
  max-width: 45ch;
  margin: 0 0 0.9375rem;
}

.munin-explorer-datasamling__main .munin-explorer-page__anchor > .munin-explorer-page__fields dd {
  margin: 0;
}

.munin-explorer-datasamling .munin-explorer-page__actions > :is(a, button):focus-visible,
.munin-explorer-datasamling__main > .munin-explorer-page__section > p > :is(a, button):focus-visible {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}

.munin-explorer-datasamling .munin-explorer-page__stuckbar-name {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.munin-explorer-datasamling .munin-explorer-page__stuckbar-name small {
  display: block;
  color: rgb(81, 84, 123);
  font-weight: 400;
}

@media all and (max-width: 400px) {
  .munin-explorer-datasamling .munin-explorer-page__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Variabler merges into DatasamlingView's existing placement-driven section. This class is
   on the table itself, with columns code / preferred term / description / datatype.
   Keep it independent of kilde__datasamlinger: that table also has Kelda panel overrides
   and date/count column widths, neither of which belongs to a table of variables. */
.munin-explorer-datasamling__variabler {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.munin-explorer-datasamling__variabler th,
.munin-explorer-datasamling__variabler td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(230, 230, 237);
  overflow-wrap: anywhere;
}

.munin-explorer-datasamling__variabler thead th {
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-weight: 600;
}

.munin-explorer-datasamling__variabler tbody th {
  font-weight: 600;
}

/* Leave the description the remaining space. Datatype is a translated name, not a count:
   it needs a real share of the width and must be allowed to wrap on narrow screens. */
.munin-explorer-datasamling__variabler tr > :nth-child(1) {
  width: 24%;
}

.munin-explorer-datasamling__variabler tr > :nth-child(2) {
  width: 26%;
}

.munin-explorer-datasamling__variabler tr > :nth-child(4) {
  width: 16%;
}

.munin-explorer-datasamling__variabler-tom {
  margin: 12px 0 0;
  color: rgb(81, 84, 123);
  font-size: 0.875rem;
}

/* ======================================================================
   Resultatlista, portert fra helsedatas variables.css 2026-08-21
   ======================================================================

   Alt over dette skillet er regler Munin har skrevet selv. Alt under er
   helsedatas egne, for den gamle variabelutforskeren, hentet ut av deres
   kompilerte variables.css og doept om til munin-explorer-prefikset.

   HVORFOR KOPIERE I STEDET FOR AA LAANE. Komponenten laante dem foer - den skrev
   helsedatas klassenavn og arvet stilen gratis paa helsedata.no. Det fungerer,
   men det binder oss til stilarket for akkurat den sida vi skal erstatte. Naar
   den gamle utforskeren fjernes, forsvinner SCSS-en som bygger variables.css, og
   utseendet vaart forsvinner stille med den. Ingen test noe sted fanger det:
   det er et annet repo, en annen bundle, en annen deploy.

   Og Stiler har dem ikke. Munin er Stilers andre konsument, og uten disse
   reglene tegner Munin resultatlista i nakne nettleserstandarder - maalt, ikke
   antatt: med Stiler alene ble lista en punktliste med hver celle paa egen linje.

   HVA SOM ER MED. 89 av de 252 reglene i deres familier. Resten er for markup
   komponenten ikke rendrer - deres redigerbare tittel, delefoten, MUI-slideren,
   endringsindikatorene - og en regel vi ikke kan treffe er vekt uten verdi.

   Filteret leser hvilke klasser komponenten faktisk skriver ut av den RENDREDE
   DOM-en, ikke ut av kildekoden. Det er ikke pedanteri: kolonnenavnene i
   tabellhodet settes sammen i C# - "variable-dataitem-header__" pluss noekkelen
   til kolonnen - saa et sok i kilden finner aldri __source eller __dataCollection.
   Foerste runde gjorde nettopp det, mistet padding-reglene for hodet, og
   kolonneoverskriftene rant sammen til ett ord. Samme leksjon som headline-sm:
   DOM-en er det eneste stedet alle navnene faktisk finnes.

   VERDIENE er satt tilbake paa Stilers variabler. Deres kompilerte CSS bar
   literaler; her staar $primary, $grey10-60, $dark, $focus, $decoration,
   $warning-light og $font-family-*, slik at reglene foelger Stiler videre i
   stedet for aa fryse fargene slik de var denne dagen.

   SVG-ene er inline data-URI-er, akkurat som i deres kompilerte utgave. De hoerer
   til chevronene i lista. Stilers egne bilder ligger i wwwroot/img/; disse er
   smaa nok til aa baere i regelen, men det er en aapen sak om de heller boer dit. */
/* Feilmeldinga og «Prøv igjen» hører sammen: én setning om hva som gikk galt, og knappen som gjør
   noe med det. Uten regel er de to blokkbarn, knappen faller under boksen, og avstanden mellom dem
   er `infobox`-radiusen - to urelaterte ting i stedet for én. Navnet har stått uten regel siden det
   ble skrevet; det finnes verken i 0.1.42 eller i SCSS-en her.

   Regelen maler ingenting, og det er med vilje: flata og fargen ligger allerede på barnet,
   `infobox infobox--bg-yellow` ($warning-light, 13.79:1 mot sin egen $dark-tekst), og knappen er
   husets `hd-button-square button-square--secondary`, som beholder både flate og trykkmål.
   Ingen ny flate her betyr ingen ny kontrast å måle - de to som finnes er uendret.

   `.infobox` setter `margin: auto` for å sentrere seg som innholdsboks. Som flex-barn spiser den
   marginen i stedet all ledig plass og skyver knappen ut mot kanten, så den nullstilles her.
   To klasser (0,2,0) slår `.infobox` (0,1,0) - ingen `!important`.

   `flex-wrap` fordi `.infobox` er inntil 720px bred: uten den ville knappen klemt boksen smalere
   i stedet for å legge seg under når det ikke er plass til begge. */
.munin-explorer-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.munin-explorer-alert .infobox {
  margin: 0;
}

/* Verktøyrada over tabellen: treffantallet først, Sorter og Kolonner sist, alt på én linje.
   `munin-explorer-results` under her er `flex-direction: column`, så de tre står som tre blokker i
   dag og leseren ruller forbi tre rader krom for å nå dataene. Navnet er BEM-elementet til
   `munin-explorer-results`, og speiler `munin-explorer-filters__toolbar` — samme form én kolonne
   til venstre.

   USKOPET, med vilje: kolonnevelgeren åpner og lukker `munin-explorer-header` i sin helhet inne i
   ColumnPicker(), så en selektor som gikk veien om en forelder aldri ville truffet. Det var
   nettopp feilen i første forsøk på hopplenka (`.munin-explorer-header .skiplink-pagination`).

   `flex-grow` på første barn og ikke `space-between`: rada har tre barn, ikke to, og
   `space-between` ville lagt Sorter midt i rada i stedet for inntil Kolonner. `flex-grow` og ikke
   `margin-right: auto`, fordi antallet er en `.caption` og `.caption.margin--none` (0,2,0) ville
   stått likt med selektoren her og avgjort saken på lasterekkefølge.

   `flex-wrap: wrap` fordi resultatkolonna mister padding under 767px: rada skal bryte til flere
   linjer, ikke skyve tabellen sidelengs. Bare plassering — ingen farge, ingen skrift, ingen
   endring i kontrollenes egne flater, fokusringer eller trykkmål. */
.munin-explorer-results__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
}

.munin-explorer-results__toolbar > :first-child {
  flex-grow: 1;
}

/* Kolonnemenyen er 100% av knappen sin, ikke av rada. Målt på localhost 2026-09-09: som barn av
   rada blir `munin-explorer-header__actions` innholdsbred (1000px → 103px), og
   `.munin-explorer-header__actions .dropdown-choicepicker { width: 100% }` under her krympet den
   åpne lista til 103px mens knappene inni holdt 108–152px. Tre kolonnenavn rant da ut av den mørke
   flata og sto som hvit tekst mot sida. `max-content` gir 254px og null utflyt, og `--right`
   plasserer fortsatt lista selv: den vokser mot venstre fra høyrekanten av knappen.

   Treffer én `<ul>`, ikke `munin-explorer-header__actions` — den ligger utenpå og beholder både
   flex-rada og høyrejusteringa si. (0,3,0) mot deres (0,2,0), så det er spesifisitet og ikke
   lasterekkefølge som avgjør.

   `justify-content: flex-end` over hører sammen med dette: når rada bryter, legger den Kolonner
   ytterst til høyre på si linje, og den høyrejusterte menyen får plass innenfor kolonna. Målt ved
   295px resultatkolonne: knappen 216–335px, menyen 73–327px. Uten den sto knappen ytterst til
   venstre og menyen begynte på -103px, altså utenfor skjermen. */
.munin-explorer-results__toolbar .munin-explorer-header .dropdown-choicepicker {
  width: max-content;
}

/* Kolonnevelgeren stod 8px for høyt på rada. Ikke rada si skyld — `align-items: center` over gjør
   nøyaktig det den skal. Barnet er skjevt: to marger velgeren bar med seg fra den tida den stod
   som en blokk over tabellen og ikke i en rad.

   `.munin-explorer-header` gir 0 over og 8px under, og `__actions` inni den 8px over og 16px under.
   Flex sentrerer MARGINBOKSEN, så en boks med 8px over og 24px under får innholdet sitt til å ligge
   (24-8)/2 = 8px over radas senterlinje. Målt på 1440: rada har senter y=255,59 og telleteksten og
   Sorter ligger begge der, mens utløseren lå på 247,59. Med margene borte ligger alle tre på 255,59.

   Skopet til rada, og bare margene. Utenfor `__toolbar` er `munin-explorer-header` fortsatt en
   blokk over tabellen, og der er de samme margene avstanden. `width`-reglene på `__actions`
   og `.dropdown-choicepicker` er ikke rørt — det var dem regelen for resultatraden ble holdt unna, og
   de fikk den åpne menyen til å krympe til 103px da den ble tatt med.

   (0,2,0) mot (0,1,0), så disse slår også `margin-top: 16px` i mediespørringa under 1440px og
   `margin-bottom: 0` i den under 767px, uten `!important` og uten å måtte stå etter dem. */
.munin-explorer-results__toolbar .munin-explorer-header,
.munin-explorer-results__toolbar .munin-explorer-header__actions {
  margin: 0;
}

/* Sorteringsvelgeren (bare i eldre Explorer-versjoner) får knappehøyden 2.75rem fra <select>-regelen i
   `_page`; naken sto den på 22px mot Kolonner på 44. `width`-reglene på
   `__actions` og `.dropdown-choicepicker` er urørt. */
/* ...og så senterlinja, som høyden alene ikke rettet. Sorter-feltet er en naken <div> rundt ei
   etikett og en <select>, og den står som blokk: etiketten er `inline-block` med 16px over og 8px
   under, så innholdet i boksen ligger (16-8)/2 = 4px under boksens eget senter. Rada sentrerer
   boksen riktig; det er inni den de to henger. Målt: velgeren på 261,8 mot Kolonner på 257,3.

   NØYAKTIG SAMME FORM som kolonnevelgerens skjeve marger over, og rettet på samme måte - marger
   ut, og la flex sentrere. `gap` erstatter mellomrommet mellom to inline-block-elementer, målt til
   5,6px; 8px er husets nærmeste trinn og forskjellen på 2,4px tas av telletekstens `flex-grow`.

   `:has(> select)` fordi <div>-en ikke har noe klassenavn å henge i - pakken skriver den naken.
   Den treffer ikke `munin-explorer-header` ved siden av: dens eget barn er `__actions`, ikke en
   <select>. Variabelutforskeren har ingen sortering i rada, så regelen gjelder Kelda alene. */
.munin-explorer-results__toolbar > div:has(> select) {
  align-items: center;
  display: flex;
  gap: 8px;
}

.munin-explorer-results__toolbar > div:has(> select) > .form-element__label {
  margin-bottom: 0;
  margin-top: 0;
}

.munin-explorer-results {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
  position: relative;
  width: 100%;
}

@media (max-width: 767px) {
  .munin-explorer-results {
    margin-left: 0 !important;
    max-width: none !important;
    padding-right: 0;
    width: 100%;
  }
}
.munin-explorer-header {
  display: block;
  margin-bottom: 0.5rem;
  padding-left: 16px;
  position: relative;
}

@media (max-width: 767px) {
  .munin-explorer-header {
    margin-bottom: 0;
    padding: 0 8px 0 0;
  }
}
.munin-explorer-header__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  left: -12px;
  margin: 8px 0 16px;
  position: relative;
  row-gap: 8px;
  width: 100%;
}

.munin-explorer-header__actions-button {
  border: none;
}

.munin-explorer-header__actions-button > .icon {
  margin-right: 8px;
}

/* Kolonnevelgeren får `width: 100%` bare på mobil. Over 767px står «Last ned utvalg» foran den i samme rad
   (Explorer 2.5.0), og med `width: 100%` brøt «Kolonner» alltid til en egen linje, også ved 1280px, og
   det åpne nedlastingspanelet la seg over den. Menyen er `max-content` (over), så den følger ikke denne
   bredden. */
@media (max-width: 767px) {
  .munin-explorer-header__actions .dropdown {
    width: 100%;
  }
}
/* «Last ned utvalg» og «Kolonner» stables like brede under 768px, venstrejustert der rada bryter. Med
   regelen over sto «Kolonner» høyrestilt på egen linje under en innholdsbred «Last ned utvalg», med ulik
   venstrekant og bredde. Én kolonne så bred som den bredeste knappen, pila ytterst. */
@media (max-width: 767px) {
  .munin-explorer-results__toolbar > .munin-explorer-header:has(> .munin-explorer-header__actions > .munin-explorer-list-menu) {
    margin-right: auto;
  }
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) {
    display: grid;
    grid-template-columns: max-content;
    justify-content: start;
  }
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer-list-menu > button,
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer__dropdown > summary {
    column-gap: 8px;
    width: 100%;
  }
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer__dropdown > summary {
    margin-right: 0;
  }
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer-list-menu > button > .icon,
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer__dropdown > summary > .icon,
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer-list-menu > button[aria-busy=true]::before {
    margin-right: 0;
  }
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer-list-menu > button > .icon--right,
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer__dropdown > summary > .icon--right {
    margin-left: auto;
  }
}
.munin-explorer-header__actions .dropdown-choicepicker {
  text-align: left;
  top: 36px;
  width: 100%;
}

@media (max-width: 1439px) {
  .munin-explorer-header__actions {
    left: 0;
    margin-top: 16px;
  }
  .munin-explorer-header__actions-button {
    border: 1px solid rgba(35, 23, 94, 0.08);
    margin-right: 8px;
  }
}
.munin-explorer-skiplink-pagination {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.munin-explorer-skiplink-pagination:focus {
  background-color: rgb(82, 30, 255);
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  height: auto;
  margin-bottom: 16px;
  padding: 8px 16px;
  position: static;
  width: auto;
}

@media (max-width: 767px) {
  .munin-explorer-skiplink-pagination {
    display: none;
  }
}
.munin-explorer-container {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
}

@media (max-width: 767px) {
  .munin-explorer-container {
    flex-direction: column-reverse;
    padding: 24px 16px 0;
  }
}
.munin-explorer__dropdown {
  /* Anchors the open list, which is absolutely positioned. Was an inline style the RCL emitted,
     which no host could theme; it cannot move up to .munin-explorer-header, whose box starts 16px
     further left and a row higher and would drag the panel with it. */
  position: relative;
}

.munin-explorer__dropdown[open] {
  z-index: 99;
}

/* The trigger right, where helsedata's own sits. Text alignment and not flex or an auto margin:
   under 768px `.munin-explorer-header__actions .dropdown { width: 100% }` leaves the row no free space
   to distribute, an inline-level box resolves an auto margin to zero, and `display: flex` on a <details>
   stops it hiding its own closed content. The list resets it. Above it the details is content-wide and
   the toolbar's `justify-content: flex-end` places it. */
.munin-explorer-header__actions .munin-explorer__dropdown {
  text-align: right;
}

/* Both chevrons are in the DOM and one is hidden, rather than one whose image swaps: the picker
   ships no script, so nothing can change a class, and hiding reuses the two icon names Stiler
   already has instead of naming their SVGs a second time here. */
.munin-explorer__dropdown > summary > .icon-keyboard-arrow-up,
.munin-explorer__dropdown[open] > summary > .icon-keyboard-arrow-down {
  display: none;
}

.munin-explorer__dropdown[open] > summary > .icon-keyboard-arrow-up {
  display: inline-block;
}

/* The trailing chevron carries `icon--right`, whose whole job is to move the margin to the other
   side - but the rule above at (0,2,0) outranks `.icon--right` at (0,1,0), so without this the
   trigger keeps 8px of dead space past its last glyph. */
.munin-explorer-header__actions-button > .icon--right {
  margin-right: 0;
}

/* The column that refuses, shown and not only announced. Nothing else here reaches an
   aria-disabled control inside the picker - the ghost-button rule excludes it - so a sighted
   reader had no cue at all that one box will not move. */
.munin-explorer-header__actions .dropdown-choicepicker__item input[aria-disabled=true],
.munin-explorer-header__actions .dropdown-choicepicker__item input[aria-disabled=true] + .form-control__label {
  cursor: default;
  opacity: 0.6;
}

.munin-explorer-data-list {
  border-top: 1px solid rgb(230, 230, 237);
  list-style: none;
  margin: 0;
  padding: 0;
}

.munin-explorer-data-list__header {
  background-color: rgb(246, 247, 252) !important;
}

@media (max-width: 1280px) {
  .munin-explorer-data-list__header {
    display: none !important;
  }
}
.munin-explorer-data-list__result {
  position: relative;
}

@media (max-width: 767px) {
  .munin-explorer-data-list__result {
    border-left: none;
    padding-left: 0;
  }
}
.munin-explorer-data-list__item {
  background-color: transparent;
}

.munin-explorer-data-list__item:last-of-type {
  margin-bottom: 48px;
}

.munin-explorer-data-list__item:hover {
  background-color: rgb(255, 255, 255);
}

.munin-explorer-data-list__item--expanded {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(230, 230, 237);
}

.munin-explorer-data-list__item__row {
  align-items: center;
  border-bottom: 1px solid rgb(230, 230, 237);
  display: flex;
  font-size: 1rem;
  position: relative;
}

.munin-explorer-data-list__item__row--header {
  border-bottom: none;
}

.munin-explorer-data-list__item__row:hover .munin-explorer-dataitem-main__name {
  color: rgb(82, 30, 255);
}

/* Samme par som `_kilder`: `icon-keyboard-arrow-down` foldet og `...-up` åpen, tegnet i hvile av
   `base/_icons.scss`. Runas chevron har et annet klassenavn enn Keldas, så hoverfargen trenger
   sine egne to regler. */
.munin-explorer-data-list__item__row:hover .munin-explorer-dataitem-main__expand-icon.icon-keyboard-arrow-down {
  background-image: url(../img/icons/keyboard-arrow/icon_down--blue.svg);
}

.munin-explorer-data-list__item__row:hover .munin-explorer-dataitem-main__expand-icon.icon-keyboard-arrow-up {
  background-image: url(../img/icons/keyboard-arrow/icon_up--blue.svg);
}

/* ---- chevronen som sin egen knapp ----

   En endring i pakken deler Runas rad i to trykkmål, så siden til variabelen kan nås fra listen:
   navnet blir lenke til variabelen, og chevronen blir en egen knapp som folder ut raden. Pakken skriver da
   `munin-explorer-dataitem__expand-toggle` på knappen, og FRAM TIL DEN ENDRINGA ER UTE TREFFER
   REGLENE UNDER INGENTING — samme tilsiktede hviletilstand som `_page.scss` står i.

   KNAPPEN LIGGER I EI CELLE, OG DET ER ARIA SOM KREVER DET. Runas resultatliste er en
   ARIA-tabell: `li` bærer `role="row"`, og begge boksene under den — `__item__row` og
   `-dataitem-main` — trer til side med `role="none"`. Ei rad kan ikke eie annet enn celler, så
   en knapp lagt rett inn i `-dataitem-main` ville ligget rett i rada, og axe feller den på
   `aria-required-children` (WCAG 1.3.1, nivå A). `aria-owns` gjør det ikke godt igjen, og
   vakten i pakken slipper det heller ikke forbi. Pakken skriver derfor
   `<div role="cell" class="munin-explorer-dataitem__expand-cell">` rundt knappen, og det er
   CELLA som er første direkte barn av `-dataitem-main`.

   DE FLESTE REGLENE UNDER MERKER INGENTING TIL OMPAKKINGA, og det er målt: knappen bærer sitt
   eget klassenavn, og selektorene her er enten bare den klassen eller etterkommerledd, som
   treffer like godt gjennom cella. Bare de to som var nøklet på `>` måtte skrives om — de står i
   mediespørringa lenger ned — og innrykksregelen i `_columns.scss`, som er flyttet over på
   cellenavnet fordi det er cella som tar plassen i rada.

   FORMA ER KELDAS, IKKE FUNNET PÅ. `_kilder.scss:553-558` har den samme knappen i
   kildeutforskeren, og de fire erklæringene er kopiert derfra uendret. Målt på riggen: Keldas
   knapp er 40x32 rundt en 1rem-glyf, og Runas glyf måler nøyaktig det samme —
   `_columns.scss:135-140` gir den `1rem` — så de to knappene måler likt uten at ett tall måtte
   regnes om. 40x32 klarerer WCAG 2.5.5 sine 24x24 i begge retninger.

   MARGINEN MÅ BORT INNE I KNAPPEN. `__expand-icon` bærer `margin: 0 16px` fra de porterte
   reglene over; den sto for avstanden da glyfen lå naken inne i navneknappen. Med den stående
   ville de 16 pikslene ligget UTENFOR flata som tar trykket. Kelda løser det samme med
   `icon--nomargin` i markupen — her står det i regelen, så knappen måler likt uansett hva
   pakken skriver. */
.munin-explorer-dataitem__expand-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  padding: 8px 12px;
}

/* CELLA SKAL IKKE TEGNE NOE, OG IKKE MÅLE MER ENN KNAPPEN. Den finnes bare for ARIA-treet, så
   ingen ramme, ingen luft og ingen bakgrunn står her — alt som ville gitt den en synlig boks er
   utelatt med vilje.

   `display: flex` er likevel nødvendig, og grunnen er den samme som `_kilder.scss:560-563`
   beskriver: knappen er `inline-flex`, og i en blokkboks står den på grunnlinja med skriftas
   underlengde under seg. Da måler cella høyere enn knappen. Under 1280px er det cella som
   plasseres absolutt, og hver piksel cella er høyere enn knappen, skyver glyfen ned fra de
   16px hjørnet er regnet for. Med flex er det ingen linjeboks å arve underlengden fra.

   Målt på riggen mot ei ekte bygging av pakken: som blokkboks måler cella 40x33,8 ved 1024, 1279
   og 1440 og 40x32,59 ved 320, mens knappen inni måler 40x32. Med `display: flex` måler cella
   nøyaktig 40x32 på alle fire breddene, altså knappen og ikke ett tall mer. */
.munin-explorer-dataitem__expand-cell {
  display: flex;
}

/* GLYFEN MÅ UT AV SKJULINGA, OG BARE DEN. Mediespørringa lenger ned skjuler
   `.munin-explorer-dataitem-main .icon` under 1280px, og den regelen står urørt: andre ting i
   raden kan hvile på den. (0,3,0) mot dens (0,2,0) løfter denne ene glyfen ut av den uten å
   svekke den, og uten å være avhengig av rekkefølgen filene lastes i.
   Målt før: knappen 0x0 ved 320, 1024 og 1279. */
.munin-explorer-dataitem-main .munin-explorer-dataitem__expand-toggle .icon {
  display: inline-block;
  margin: 0;
}

/* ---- og hvordan knappen står når rada stabler seg ----

   Under 1280px snur `.munin-explorer-dataitem-main` til `flex-direction: column` med
   `padding: 24px`. Da er det ikke nok å slå på glyfen igjen: knappen faller ned i ei kolonne den
   aldri ble plassert for.

   HER TAR SAKSTEKSTEN FEIL PÅ EN DETALJ, OG DET ER MÅLT. Mediespørringa setter
   `align-items: flex-start`, men `_columns.scss:94-100` setter `align-items: center` UBETINGA og
   lastes sist, så den vinner på alle bredder. Knappen blir altså MIDTSTILT i det stabla kortet,
   ikke venstrestilt — målt til x=152,5 i et kort som går fra x=40 til x=265 ved 320px.

   DERFOR TAS DEN UT AV KOLONNA i stedet for å plasseres i den: absolutt plassering koster ingen
   høyde. Hjørnet er regnet av tallene som alt står der — kortets luft er 24px og knappens egen er
   8/12 — så `top: 16px` og `right: 12px` setter selve glyfen nøyaktig på kortets 24px-luftlinje.

   PLASSEN MÅ RESERVERES, ellers renner navnet under knappen. `__name` bryter nå i stedet for å
   kuttes, så det er ikke ei ellipse som stopper mot knappen, men ei linje
   som legger seg bak den. 64px er kortets egne 24px pluss knappens målte 40px.

   DET ER CELLA SOM TAS UT AV KOLONNA, IKKE KNAPPEN INNE I DEN. Med knappen plassert absolutt
   ville cella blitt stående igjen i kolonna som et flex-element uten innhold: 0x0, men fortsatt
   et element, og `gap: 12px` teller mellom elementer og ikke mellom det som synes. Kortet hadde
   da fått ett gap for en celle ingen ser. Cella ut, og knappen følger med.

   `:has()` holder begge erklæringene inne til pakken faktisk skriver cella. Uten den ville hver
   eneste smale rad fått 40px ekstra høyreluft i dag, for en knapp som ikke finnes ennå. Samme grep
   og samme grunn som radpekeren i `_kilder.scss` og `__toc` i `_page.scss`.

   MÅLT FØR OG ETTER, mot ei ekte bygging av pakken. Før omskrivinga traff ingen av de to
   reglene gjennom cella: kortet sto `position: static` med `padding-right: 24px`, og knappen lå
   MIDTSTILT i kolonna — knappens senter og kortets senter målte samme x ved alle tre breddene
   (151,5 ved 320, 699,5 ved 1024, 827 ved 1279), 24px nede fra kortkanten. Etter: kortet er
   `relative` med `padding-right: 64px`, og knappen står 16px fra overkanten og 12px fra
   høyrekanten ved 320, 1024 og 1279, med senteret godt utenfor kortets.

   `$xs-desktop` og ikke literalen `1280px` som de porterte reglene under bruker: tokenet er den
   samme terskelen, og `_page.scss:299` foretrekker det av samme grunn — en literal som driver én
   piksel fra sitt eget token er hvordan et oppsett ender med å være uenig med seg selv. */
@media all and (max-width: 1280px) {
  .munin-explorer-dataitem-main:has(> .munin-explorer-dataitem__expand-cell) {
    padding-right: 64px;
    position: relative;
  }
  .munin-explorer-dataitem-main > .munin-explorer-dataitem__expand-cell {
    position: absolute;
    right: 12px;
    top: 16px;
  }
}
/* FLATA BÆRER FOKUSMERKET, som på de to andre foldene i komponenten (`_filters.scss`, `_page.scss`).
   `base/_global.scss` fjerner ringen bare ved pekerfokus,
   men flata avhenger ikke av hva en vert gjør med ringen.

   MEN `color` ALENE NÅR IKKE GLYFEN, og det er grunnen til de to reglene under. Chevronen er et
   bakgrunnsBILDE og ikke ei maske, så den følger ikke `currentColor` slik fasettfolden gjør: en
   mørk chevron på $grey60 ville målt 1,07:1. `icon_down--white.svg` og `icon_up--white.svg` finnes
   alt i `img/icons/keyboard-arrow/` — sjekket før regelen ble skrevet. Hvit glyf på $grey60 måler
   7,23:1, og flata selv står 7,23:1 mot den hvite raden, altså over 3:1 (WCAG 1.4.11).

   Med (0,5,0) slår de hover-reglene over (0,4,0), så en peker på en tastaturfokusert knapp gir
   ikke blå glyf på grå flate. */
.munin-explorer-dataitem__expand-toggle:focus-visible {
  background-color: rgb(81, 84, 123);
  color: rgb(255, 255, 255);
}

.munin-explorer-data-list__item__row .munin-explorer-dataitem__expand-toggle:focus-visible[aria-expanded=false] .icon {
  background-image: url(../img/icons/keyboard-arrow/icon_down--white.svg);
}

.munin-explorer-data-list__item__row .munin-explorer-dataitem__expand-toggle:focus-visible[aria-expanded=true] .icon {
  background-image: url(../img/icons/keyboard-arrow/icon_up--white.svg);
}

.munin-explorer-dataitem-header,
.munin-explorer-dataitem-main {
  align-items: center;
  display: flex;
  width: 100%;
}

/* HODET I RUNA SKAL LESES SOM HODET I KELDA, og tallene er Keldas:
   0,6875rem, STORE BOKSTAVER, vekt 600 og $grey60. Målt på riggen ved 1440 før dette sto Runas
   hode på 16px, vekt 400, uten kasusskifte og i $dark — altså nøyaktig samme størrelse som verdiene
   under det — mens Keldas sto på 11px og var tydelig skilt fra radene sine.

   FAMILIEN MÅ BYTTES FOR AT VEKTA SKAL BETY DET SAMME. Kelda får sine 600 på `graphik`. Blir 600
   stående på `graphik-medium`, legger nettleseren en syntetisk halvfeit oppå ei snittfil som alt er
   medium, og de to hodene ville skilt lag på nettopp den egenskapen de skal møtes på.

   INGEN SPERRING, arvet som avgjørelse fra Keldas tallkolonner. Der er hodet ofte det breieste i kolonnen sin, så
   sperring er kolonnebredde; her er kolonnene flexvekter med `flex-basis: 0` og ville ikke flyttet
   seg — men hodene skal tegnes likt, og målingen der viste at sperringen ikke skal inn.

   Kontrasten: $grey60 på $grey10 er 6,76:1 i hvile. Radhoveret ($white) treffer ikke hoderada — den
   ligger i `__header`, ikke i `__item` — men der måler det 7,23:1, så cella klarerer 4,5:1 mot begge
   flatene. 11px er ikke stor tekst (WCAG 1.4.3). */
.munin-explorer-dataitem-header {
  color: rgb(81, 84, 123);
  font-family: graphik, Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  height: 3rem;
  padding-left: 56px;
  text-transform: uppercase;
}

.munin-explorer-dataitem-header__button {
  align-items: center;
  display: flex;
  width: 100%;
}

/* Sorteringsknappen arver alt unntatt vekta og kasusen, nøyaktig som i Kelda. `hd-button-reset` er
   `@include button`, som setter `font-weight: normal` etter `font: inherit`, og nettleserens egen
   standardstil for skjemakontroller nullstiller `text-transform` og `letter-spacing` på `button`.
   Uten de tre linjene tegner seks av sju hoder lettere og i setningsskrift ved siden av det sjuende.

   `min-height` er trykkmålet og ikke pynt: mixinen gir knappen `padding: 0`, så flata som tar
   trykket ER tekstboksen, og med hodet nede på 11px faller den under de 24px WCAG 2.5.5 ber om uten
   at noe sier fra. (0,2,0) mot `hd-button-reset` sin (0,1,0). Ingen `!important`. */
.munin-explorer-dataitem-header .munin-explorer-dataitem-header__button {
  font-weight: 600;
  letter-spacing: inherit;
  min-height: 24px;
  text-transform: inherit;
}

/* Ringa står på cella, ikke på knappen: cella kutter alt utenfor seg (`_columns.scss`), og en egen
   inset-skygge kuttes ikke av egen overflow. Cella er en div, så den globale nullstillinga av
   `button:focus` treffer den ikke. */
.munin-explorer-dataitem-header__button:focus {
  box-shadow: none;
  z-index: 4;
}

.munin-explorer-dataitem-header > :has(> .munin-explorer-dataitem-header__button:focus-visible) {
  box-shadow: inset 0 0 0 3px rgb(66, 139, 255);
}

.munin-explorer-dataitem-main {
  cursor: pointer;
  height: 3.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.munin-explorer-dataitem-main__expand-icon {
  margin: 0 16px;
}

.munin-explorer-dataitem-main__name {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
}

.munin-explorer-dataitem-main__name:after {
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.munin-explorer-dataitem-main__name:focus {
  box-shadow: none;
}

/* Radringen fra helsedata.no, på ::after over hele rada. Nøklet på :focus-visible og ikke
   `.is-tabbing`, som verten aldri setter; den globale nullstillinga treffer knappen, ikke ::after. */
button.munin-explorer-dataitem-main__name:focus-visible::after {
  box-shadow: inset 0 0 0 3px rgb(66, 139, 255);
}

/* Chevronen inne i navneknappen følger knappens aria-expanded, også på
   hover. Dagens markup har ingen chevron i navneknappen, så reglene treffer ingenting der. */
button.munin-explorer-dataitem-main__name[aria-expanded=false] .munin-explorer-dataitem-main__expand-icon {
  background-image: url(../img/icons/keyboard-arrow/icon_down.svg);
}

button.munin-explorer-dataitem-main__name[aria-expanded=true] .munin-explorer-dataitem-main__expand-icon {
  background-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

.munin-explorer-data-list__item__row:hover button.munin-explorer-dataitem-main__name[aria-expanded=false] .munin-explorer-dataitem-main__expand-icon {
  background-image: url(../img/icons/keyboard-arrow/icon_down--blue.svg);
}

.munin-explorer-data-list__item__row:hover button.munin-explorer-dataitem-main__name[aria-expanded=true] .munin-explorer-dataitem-main__expand-icon {
  background-image: url(../img/icons/keyboard-arrow/icon_up--blue.svg);
}

.munin-explorer-dataitem-main button.munin-explorer-dataitem-main__name .munin-explorer-dataitem-main__expand-icon {
  align-self: center;
}

/* Under 1280px skjuler `.munin-explorer-dataitem-main .icon` den; chevronen står der i dag og skal
   fortsatt stå, uten venstremarg inne i kortets 24px luft. */
@media all and (max-width: 1280px) {
  .munin-explorer-dataitem-main button.munin-explorer-dataitem-main__name .munin-explorer-dataitem-main__expand-icon {
    display: inline-block;
    margin: 0 12px 0 0;
  }
}
.munin-explorer-dataitem-main__column,
.munin-explorer-dataitem-main__name {
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.munin-explorer-dataitem-main__column__text {
  display: block;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.munin-explorer-dataitem-main__column {
  align-items: center;
  color: rgb(81, 84, 123);
  display: inline-flex;
  justify-content: flex-start;
  padding-left: 16px;
}

.munin-explorer-data-list__item--expanded .munin-explorer-dataitem-main {
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
}

.munin-explorer-dataitem-header__name,
.munin-explorer-dataitem-main__name {
  padding: 0;
}

.munin-explorer-dataitem-header__dataCollection,
.munin-explorer-dataitem-header__period,
.munin-explorer-dataitem-header__source,
.munin-explorer-dataitem-header__theme {
  padding-left: 16px;
}

@media (max-width: 1280px) {
  .munin-explorer-dataitem-main {
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    padding: 24px;
  }
  .munin-explorer-dataitem-main .icon {
    display: none;
  }
  .munin-explorer-dataitem-main__name {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-family: graphik-medium, Arial, Helvetica, sans-serif;
    height: auto;
    justify-content: flex-start;
    line-height: 1.5;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
  }
  .munin-explorer-dataitem-main__column,
  .munin-explorer-dataitem-main__name {
    line-height: 1.5;
    padding: 0;
    width: 100%;
  }
}
.munin-explorer-meta {
  padding: 32px 48px;
}

@media (max-width: 1280px) {
  .munin-explorer-meta {
    padding: 24px;
  }
}
/* Variabelnavnet øverst i skuffen: samme headline-xxs som Keldas paneloverskrift, KildeSearch.razor.cs:422.
   To klasser, så den slår både h3-grunnregelen og `.headline.margin--none`; 8px under er gruppeoverskriftenes.
   Et langt navn uten mellomrom skal brekke inne i skuffen på 320 heller enn å skyve den ut. */
.munin-explorer-meta .munin-explorer-meta__heading {
  font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.munin-explorer-meta__grid {
  display: grid;
  grid-row-gap: 40px;
  grid-column-gap: 24px;
  font: normal 1rem/160% graphik, Arial, Helvetica, sans-serif;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
}

.munin-explorer-meta__grid p {
  margin: 0;
}

.munin-explorer-meta__grid-1,
.munin-explorer-meta__grid-2 {
  grid-template-columns: auto;
}

.munin-explorer-meta__grid-1 {
  grid-row: 1/3;
}

@media (max-width: 1280px) {
  .munin-explorer-meta__grid {
    gap: 16px;
    grid-template-columns: auto;
    margin-bottom: 16px;
    width: 100%;
  }
}
.munin-explorer-meta__tabs {
  border-bottom: 2px solid rgb(239, 240, 250);
  display: flex;
  list-style: none;
  margin-left: -16px;
  padding: 0 16px 0 0;
}

.munin-explorer-meta__tab {
  padding: 0 20px;
}

@media all and (max-width: 400px) {
  .munin-explorer-meta__tabs {
    padding-right: 0;
  }
  .munin-explorer-meta__tab {
    padding: 0 8px;
  }
}
.munin-explorer-meta__tab button {
  border-bottom: 2px solid transparent;
  line-height: 1.5;
  text-align: left;
  position: relative;
  top: 2px;
}

.munin-explorer-meta__tab--active button {
  border-color: rgb(78, 87, 241);
}

.munin-explorer-meta__tab-content {
  display: flex;
  flex-direction: column;
  padding: 32px 0;
}

.munin-explorer-meta__tab-content h4 {
  margin-bottom: 0;
}

.munin-explorer-meta__tab-content select option {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgb(81, 84, 123);
  display: flex;
  font-family: graphik, Arial, Helvetica, sans-serif;
  line-height: 27px;
}

.munin-explorer-meta table {
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

@media (max-width: 1280px) {
  .munin-explorer-meta table {
    width: 100%;
  }
}
.munin-explorer-meta td,
.munin-explorer-meta th {
  padding: 16px 32px 16px 0;
}

@media (max-width: 1024px) {
  .munin-explorer-meta td,
  .munin-explorer-meta th {
    padding: 16px 16px 16px 0;
  }
}
.munin-explorer-meta td:last-child,
.munin-explorer-meta th:last-child {
  text-align: left;
}

.munin-explorer-meta td:first-child {
  padding-left: 24px;
}

.munin-explorer-meta td:nth-child(2) {
  padding-left: 4px;
}

.munin-explorer-meta th:first-child {
  padding-left: 16px;
  word-break: normal;
}

.munin-explorer-meta th {
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
}

.munin-explorer-meta tbody tr:nth-child(odd) {
  background-color: rgb(239, 240, 250);
}

.munin-explorer-meta tfoot tr:first-child {
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
}

/* Prøv-igjen-knappenes inerte tilstand står i `_buttons`, sammen med «Tøm søket»:
   samme knappeform, samme tilstand, én regel. */
/* The drill-in panel's counterpart to `.munin-explorer-page__fields dd` in `_page.scss`: a long
   variable code set this grid's `auto` track to 374px and the page to 438px at a 320px viewport. */
.munin-explorer-meta__grid dd {
  overflow-wrap: anywhere;
}

/* The result count quotes the search term, and a code searched for is one unbroken word. Wider than
   the row, it overflows to the START because the row is `flex-end`: at 320px the first 24px of the
   sentence sat left of the viewport, where no scrollbar reaches. */
.munin-explorer-results__toolbar > .caption {
  overflow-wrap: anywhere;
}

/* The row drawer's Data tab: coverage, frequency bars and figures (Skuld round 5).
   Element rules nest under their block, (0,2,0), so `.munin-explorer-detail dt/dd` (0,1,1) cannot
   win whatever the load order. */
/* A flex item of `.munin-explorer-meta__tab-content`; without this a long word widens the column. */
.munin-explorer-coverage {
  margin: 0;
  min-width: 0;
}

.munin-explorer-coverage .munin-explorer-coverage__line {
  align-items: baseline;
  color: rgb(38, 32, 69);
  display: flex;
  flex-wrap: wrap;
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  gap: 2px 8px;
  margin: 0;
}

.munin-explorer-coverage .munin-explorer-coverage__valid {
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}

.munin-explorer-coverage .munin-explorer-coverage__missing,
.munin-explorer-coverage .munin-explorer-coverage__share {
  color: rgb(81, 84, 123);
}

/* The track IS the missing part, so it has to show on white: $grey40, not Skuld's pale chip. */
.munin-explorer-coverage .munin-explorer-coverage__bar {
  background-color: rgb(187, 184, 201);
  border-radius: 3px;
  display: block;
  height: 6px;
  margin: 6px 0 0;
  max-width: 340px;
  overflow: hidden;
}

.munin-explorer-coverage .munin-explorer-coverage__bar-fill {
  background-color: rgb(82, 30, 255);
  display: block;
  height: 100%;
}

/* The fill's width is the package's inline style: share of the LARGEST category, not of valid. */
.munin-explorer-distribution {
  display: grid;
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  gap: 4px;
  list-style: none;
  margin: 12px 0 0;
  max-width: 440px;
  min-width: 0;
  padding: 0;
}

.munin-explorer-distribution .munin-explorer-distribution__item {
  align-items: baseline;
  border-radius: 4px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  line-height: 1.35;
  overflow: hidden;
  padding: 2px 8px;
  position: relative;
}

.munin-explorer-distribution .munin-explorer-distribution__label {
  color: rgb(38, 32, 69);
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

.munin-explorer-distribution .munin-explorer-distribution__count {
  color: rgb(81, 84, 123);
  font-variant-numeric: tabular-nums;
  position: relative;
  text-align: right;
  white-space: nowrap;
  z-index: 1;
}

.munin-explorer-distribution .munin-explorer-distribution__bar {
  display: block;
  inset: 0;
  position: absolute;
  z-index: 0;
}

.munin-explorer-distribution .munin-explorer-distribution__bar-fill {
  background-color: rgb(239, 240, 250);
  display: block;
  height: 100%;
}

/* Spaced by padding: `.munin-explorer-detail dl { margin: 0 }` outranks a bare class on margin. */
.munin-explorer-figures {
  column-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 12px 0 0;
  row-gap: 4px;
}

.munin-explorer-figures .munin-explorer-figures__item {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.munin-explorer-figures .munin-explorer-figures__term {
  color: rgb(81, 84, 123);
  margin: 0;
}

.munin-explorer-figures .munin-explorer-figures__value {
  color: rgb(38, 32, 69);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Komponentens felles mål, begrunnet ved `.munin-explorer__lede`: 62ch ga 92 tegn på linjen ved
   1280 og 1440, 45ch gir 57–59. */
.munin-explorer-figures__note {
  margin: 12px 0 0;
  max-width: 45ch;
}

/* Withheld is a fact, not an absence: ink and a rule, where `p.caption.munin-explorer-absent` is
   muted and bare. */
.munin-explorer-figures__note.munin-explorer-figures__note--suppressed {
  border-left: 3px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
  padding-left: 12px;
}

/* ======================================================================
   Den lagrede variabellisten - vår, ikke portert
   ======================================================================

   Egen fil av samme grunn som _kilder.scss har sin: navnene her er Munins egne, funnet opp av
   utforskeren. _results.scss er portert fra helsedatas kompilerte variables.css og sier det selv
   i toppen, så en håndskrevet regel under det skillet ville sett ut som en portert regel for
   markup helsedata ikke har - og filterjobben den fila beskriver ville strøket den som død vekt.
   Tabellen inni bærer fortsatt de porterte `data-list`- og `dataitem-*`-navnene; det er bare
   innpakningen som er vår. */
/* Beholderen listen ruller i. Uten regelen havner tabellens overflyt på SIDEN, og hele
   helsedata.no ruller vannrett under en komponent som bare er en del av én side. Det er WCAG
   1.4.10 (Reflow) og ikke bare stygt - samme feil som kildetabellen hadde, og med vilje samme
   ordlyd som søsterregelen `.munin-explorer-kilder-scroll` i _kilder.scss.

   Explorer-endringen bak dette var ikke levert da regelen ble skrevet, i motsetning til den
   søsteren kunne vise til. Den gjør radene i listen om til en tabell med ni kolonner - katalogens sju,
   leserens egen merknad og fjern-knappen - og pakker den i
   <div class="munin-explorer-list-scroll" role="region" tabindex="0"> med tabellens eget navn.
   Regelen kan stå før markupen lander; den treffer ingenting til den gjør det. Pakken sender med
   vilje ingen CSS, så innpakningen er en naken <div> uten overflyt til Stiler kler den.

   Målt i samples/HostileHost mot pakka 0.1.38: sideoverflyt 679px -> 0 på 1024, 423 -> 0 på 1280
   og 527 -> 0 på 768. Boksen absorberer i stedet for å flytte - scrollWidth 1256px mot
   clientWidth 568/824/720 - og innholdet er nåbart og ikke klippet: den ruller 432px, og siste
   kolonne kommer helt til syne.

   Fokusringen følger med fordi tabindex="0" legger et fokuspunkt til i tabulatorrekken. Uten
   regelen er punktet ikke usynlig her; det faller tilbake på nettleserens egen 1px-strek, og
   regelen gir det systemets fokusmarkør i stedet. SAMME RING som `.munin-explorer-pagination`,
   men ikke samme utløser: den bruker `:focus` fordi den får fokus programmatisk med
   tabindex="-1", der `:focus-visible` aldri ville slått til. Denne får fokus av leseren selv, så
   `:focus-visible` er den riktige her - målt med ekte tabulatorvandring, ikke med .focus().

   `overflow-x` og ikke `overflow`, med samme forbehold som søsteren: settes bare den ene aksen,
   regner den andre seg til auto. Uskadelig så lenge boksen ikke har noe høydetak - målt har den
   null loddrett rullbart innhold. Gir noen den en max-height senere, begynner radene inni å rulle
   uten at noe annet i koden sier at overflow-y var på. */
.munin-explorer-list-scroll {
  container-type: inline-size;
  overflow-x: auto;
}

.munin-explorer-list-scroll:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 4px;
}

/* Tabellen i rulleboksen får kildetabellens celler (_kilder.scss): 8px luft, venstrestilt og
   toppjustert, med en $grey30-strek mellom radene. Uten dette sto cellene på nettleserens 1px, og
   <th> var midtstilt. */
table.munin-explorer-data-list {
  border-collapse: collapse;
  width: 100%;
}

/* Tabellen fyller kolonnen sin også med få kolonner valgt (474px av 857px før). «Valg» beholder sin
   egen bredde, så plassen går til navnet og ønskede data. */
table.munin-explorer-data-list > thead > :where(tr) > th:last-child {
  white-space: nowrap;
  width: 1%;
}

table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > th,
table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td {
  border-bottom: 1px solid rgb(230, 230, 237);
  padding: 8px;
  text-align: start;
  vertical-align: top;
}

table.munin-explorer-data-list > thead > :where(tr) > th {
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Verdiene får brekke. Ellers gjør luften tabellen om lag 160px breiere. Cella avgjør: Kodeverk og
   Statistikk er nowrap i _columns.scss og forblir det, og Kode står utenfor fordi en brutt kode
   verken kan leses eller kopieres. */
table.munin-explorer-data-list :is(th, td):not(.munin-explorer-dataitem-main__code) > .munin-explorer-dataitem-main__column__text {
  white-space: inherit;
}

/* Navnet i egen liste står i radens knapp og ikke rett i cella, så regelen over traff det ikke. Det
   sto på én linje, og et navn på 168 tegn gjorde navnekolonnen 1213px bred. */
table.munin-explorer-data-list > tbody > :where(tr) > th[scope=row] > button > .munin-explorer-dataitem-main__column__text {
  white-space: normal;
}

.munin-explorer-list-code {
  color: rgb(81, 84, 123);
  display: block;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Ønskede data starter på én linje og vokser med teksten til fire, så ruller feltet. Uten `field-sizing`
   (Safari før 26.2, Firefox før 152) står feltet på én linje og ruller. Cellenes skrift, ikke skjemafeltets. */
table.munin-explorer-data-list .munin-explorer-dataitem-main__desiredData > textarea {
  field-sizing: content;
  font-size: 0.9375rem;
  max-height: calc(4lh + 10px);
  min-height: calc(1lh + 10px);
  overflow-y: auto;
  padding: 4px 8px;
  resize: none;
}

@media (width >= 1280px) {
  table.munin-explorer-data-list .munin-explorer-dataitem-main__desiredData > textarea {
    width: 6rem;
  }
}
table.munin-explorer-data-list > thead .munin-explorer-dataitem-header__desiredData {
  white-space: nowrap;
}

/* Kort under 1280px: seks kolonner passer i boksen fra 1280, og under det ruller tabellen sidelengs
   med rullefeltet ofte under skjermkanten. Kort ble valgt der. Hver celle
   bærer kolonnenavnet i data-label; `/ ""` holder det unna skjermleseren. */
@media (width < 1280px) {
  .munin-explorer-list-scroll table.munin-explorer-data-list, .munin-explorer-list-scroll table.munin-explorer-data-list > tbody, .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > tr, .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > th, .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td {
    display: block;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > thead {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > th, .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td {
    border-bottom: 0;
    padding: 0 0 8px;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > tbody > tr {
    border-bottom: 1px solid rgb(230, 230, 237);
    margin-bottom: 0;
    padding: 12px 8px 4px;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > tbody > :where(tr) > th {
    font-weight: 600;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td {
    align-items: baseline;
    column-gap: 12px;
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td::before {
    color: rgb(81, 84, 123);
    content: attr(data-label);
    content: attr(data-label)/"";
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list .munin-explorer-dataitem-main__code .munin-explorer-dataitem-main__column__text, .munin-explorer-list-scroll table.munin-explorer-data-list .munin-explorer-list-code {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > tbody > :where(tr) > td > button {
    justify-self: start;
    padding-inline: 0;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td:not([data-label]) {
    display: block;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td:not([data-label])::before {
    content: none;
  }
  .munin-explorer-list-scroll table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td:not([data-label]) > .munin-explorer-detail {
    max-width: none;
    position: static;
  }
}
/* Panelet til en åpnet rad er like bredt som den synlige boksen, ikke som tabellen, og blir stående
   når tabellen rulles sidelengs. Uten dette var det 1418px i en 553-1032px boks. */
table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > td:not([data-label]) > .munin-explorer-detail {
  box-sizing: border-box;
  left: 8px;
  max-width: calc(100cqi - 16px);
  position: sticky;
}

table.munin-explorer-data-list > :where(thead, tbody) > :where(tr) > th[scope=row] > button {
  align-items: center;
  column-gap: 8px;
  display: inline-flex;
  text-align: start;
}

/* Listehodet blir stående, slik kildetabellens gjør.

   Variabellista viser 20 rader av 284 og ruller lenger enn kildetabellens 66, men var den ene av
   de to uten klistret hode. Kelda måtte kjøpe sitt med en beholderspørring og en overflow-endring
   fordi rulleboksen rundt tabellen var nærmeste rullende forelder. Her er den
   ikke det: målt går hele kjeden fra hodet til <html> med overflow: visible, så SIDA er den
   klistrende forelderen og regelen trenger ingen slik omvei.

   Hodet og ikke `__item__row--header`: klistringen avgrenses av forelderens boks, og raden er 48px
   høy. `__header` er derimot barn av `__result`, som spenner over hele lista.

   `z-index` er ikke pynt. Radene under er `position: relative` og står SENERE i DOM-en, så et
   klistret hode uten stablingsverdi males under dem - radene renner gjennom hodet mens det ruller,
   og det ser riktig ut i et stillbilde. Samme felle som for
   fasettverktøylinjen. Flata trengs ikke i tillegg: `__header` bærer $grey10 fra før.

   Streken under må tegnes her. Den ligger som `border-top` på `.munin-explorer-data-list`, altså på
   SØSKENET under, og blir derfor liggende igjen der hodet stod da rullingen begynte - samme grunn
   som kildetabellens innskutte skygge.

   `top` fra `--munin-explorer-sticky-top`, samme variabel som `_kilder.scss` bruker, så en vert med
   egen klistret toppmeny kan skyve begge hodene ned med ett tall.

   Under 1280px er hodet `display: none` (_results.scss), så regelen gjelder bare der hodet finnes.

   MERK: lander Explorer-endringen nevnt over, pakkes listen i `.munin-explorer-list-scroll` over, og den
   boksen blir nærmeste rullende forelder - da dør klistringen stille, akkurat som den gjorde for
   Kelda, og denne regelen trenger samme beholderspørring. */
.munin-explorer-data-list__header {
  box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
  position: sticky;
  top: var(--munin-explorer-sticky-top, 0);
  z-index: 1;
}

/* Foldene «Last ned» og «Flere valg» i handlingsraden til den lagrede listen.
   Panelet ligger over radene under bare i en nettleser uten popover under 480px; ellers er det et ark
   eller en fold i siden (reglene under). `[hidden]` på nytt fordi `display: flex` ellers viser et
   lukket panel. */
.munin-explorer-list-menu {
  position: relative;
}

.munin-explorer-list-menu__panel {
  align-items: stretch;
  background-color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 6px 11px rgba(33, 42, 190, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100vw - 32px);
  min-width: 14rem;
  padding: 8px;
  left: 0;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 100;
}

.munin-explorer-list-menu__panel[hidden] {
  display: none;
}

.munin-explorer-list-menu--end {
  margin-left: auto;
}

.munin-explorer-list-menu--end > .munin-explorer-list-menu__panel {
  left: auto;
  right: 0;
}

/* Under 480px er panelene like brede som raden, ellers går «Last ned» sitt panel ut av siden under
   omtrent 420px. `top: auto` holder panelet rett under sin egen knapp, over det som står under, som
   en nedtrekksliste. */
@media (max-width: 479px) {
  .munin-explorer-page__actions:has(> .munin-explorer-list-menu),
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) {
    position: relative;
  }
  .munin-explorer-list-menu {
    position: static;
  }
  .munin-explorer-list-menu > .munin-explorer-list-menu__panel {
    left: 0;
    margin-top: 4px;
    right: 0;
    top: auto;
  }
}
/* Fra 480px er en åpen meny en fold i siden: panelet får en linje for seg selv under knapperaden og
   skyver listen ned, så det aldri ligger over en rad (WCAG 2.5.8).
   `display: contents` gjør knappen og panelet til elementer i selve raden, og `--end` flytter
   `margin-left: auto` over på knappen. Grensen er den samme som i explorer-interop.js,
   `(max-width: 479.98px)`, så det ikke finnes en bredde der verken arket eller folden gjelder. */
@media (width > 479.98px) {
  .munin-explorer-list-menu {
    display: contents;
  }
  .munin-explorer-list-menu--end > button {
    margin-left: auto;
  }
  .munin-explorer-list-menu > .munin-explorer-list-menu__panel {
    border: 1px solid rgb(230, 230, 237);
    box-shadow: none;
    contain: inline-size;
    flex-basis: 100%;
    max-width: none;
    min-width: 0;
    order: 1;
    position: static;
  }
}
.munin-explorer-list-menu__check:has(> input[aria-disabled=true]) {
  color: rgb(81, 84, 123);
  cursor: default;
}

@media (width > 479.98px) and (max-width: 767px) {
  .munin-explorer-header__actions:has(> .munin-explorer-list-menu) > .munin-explorer-list-menu > .munin-explorer-list-menu__panel {
    grid-column: 1/-1;
  }
}
@media (width > 479.98px) and (prefers-reduced-motion: no-preference) {
  .munin-explorer-list-menu > .munin-explorer-list-menu__panel {
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition: height 150ms ease-out;
  }
  @starting-style {
    .munin-explorer-list-menu > .munin-explorer-list-menu__panel:not([hidden]) {
      height: 0;
    }
  }
}
/* På mobil er en åpen meny et ark nederst i det øverste laget, med siden dempet bak.
   Komponenten setter `--sheet` bare mens den viser et ark der. Tre klassers vekt, over panelreglene i denne
   fila, så arkets boks vinner. Blokken over for under 480px gjelder fortsatt i en nettleser uten popover,
   der komponenten ikke lager noe ark. */
:root .munin-explorer-list-menu__panel--sheet:popover-open {
  border: 0;
  border-radius: 16px 16px 0 0;
  height: auto;
  inset: auto 0 0 0;
  margin: 0;
  max-height: 85vh;
  max-height: 85dvh;
  max-width: none;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  width: 100%;
}

:root .munin-explorer-list-menu__panel--sheet:popover-open::backdrop {
  background-color: rgba(38, 32, 69, 0.5);
}

.munin-explorer-list-menu__close {
  background: rgb(255, 255, 255);
  border: 0;
  border-top: 1px solid rgb(230, 230, 237);
  color: rgb(38, 32, 69);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-height: 3rem;
  padding: 12px 16px;
  text-align: center;
  width: 100%;
}

.munin-explorer-list-menu__panel > .munin-explorer-list-menu__close {
  justify-content: center;
  text-align: center;
}

.munin-explorer-list-menu__close:focus-visible {
  outline: 2px solid rgb(38, 32, 69);
  outline-offset: -4px;
}

.munin-explorer-list-menu > button::after {
  background-color: currentColor;
  content: "";
  flex: none;
  height: 1rem;
  margin-left: 8px;
  mask: url(../img/icons/keyboard-arrow/icon_down.svg) no-repeat center/contain;
  width: 1rem;
}

.munin-explorer-list-menu > button[aria-expanded=true]::after {
  mask-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

.munin-explorer-list-menu > button:has(> .icon--right)::after {
  content: none;
}

.munin-explorer-list-menu > button {
  padding-right: 8px;
}

.munin-explorer-list-menu__panel > button {
  justify-content: flex-start;
  text-align: left;
}

/* Menyrader etter toppmenyens oppskrift: mørk tekst i full bredde, lys bakgrunn under pekeren og
   innfelt fokusring. Panelet har da ingen egen luft, og hjørnene klipper radene. */
.munin-explorer-list-menu__panel--rows {
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.munin-explorer-list-menu__item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgb(38, 32, 69);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1rem;
  gap: 12px;
  justify-content: flex-start;
  line-height: 1.25;
  min-height: 3rem;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}

.munin-explorer-list-menu__item:hover {
  background-color: rgb(246, 247, 252);
}

.munin-explorer-list-menu__item:focus-visible {
  box-shadow: inset 0 0 0 4px rgb(66, 139, 255);
  outline: none;
}

.munin-explorer-list-menu__item[aria-disabled=true] {
  color: rgb(81, 84, 123);
  cursor: default;
}

.munin-explorer-list-menu__item[aria-disabled=true]:hover {
  background: none;
}

.munin-explorer-list-menu__item--apart {
  border-top: 1px solid rgb(239, 240, 250);
}

.munin-explorer-list-menu__hint {
  color: rgb(81, 84, 123);
  flex: none;
  font-size: 0.8125rem;
  margin-left: auto;
}

.munin-explorer-list-menu__note {
  color: rgb(81, 84, 123);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
  padding: 12px 16px 8px;
}

.munin-explorer-list-menu__note:empty {
  display: none;
}

.munin-explorer-list-menu__check {
  border-bottom: 1px solid rgb(239, 240, 250);
  padding: 4px 16px 8px;
}

.munin-explorer-list-menu button[aria-busy=true]::before {
  animation: munin-explorer-spin 0.9s linear infinite;
  border: 2px solid rgb(230, 230, 237);
  border-radius: 50%;
  border-top-color: rgb(82, 30, 255);
  box-sizing: border-box;
  content: "";
  flex: none;
  height: 1rem;
  margin-right: 8px;
  width: 1rem;
}

.munin-explorer-list-menu__item[aria-busy=true]::before {
  margin-right: 0;
}

@keyframes munin-explorer-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .munin-explorer-list-menu button[aria-busy=true]::before {
    animation: none;
  }
}
/* Hodet til en egen liste: navnet til venstre og handlingene til høyre på samme rad. Handlingene
   faller under navnet når raden blir for trang. Innpakningen bærer streken og luften én gang. */
.munin-explorer-list-head {
  align-items: flex-start;
  border-bottom: 1px solid rgb(230, 230, 237);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-bottom: 16px;
}

.munin-explorer-list-head > .munin-explorer-page__header {
  border-bottom: 0;
  flex: 1 1 16rem;
  margin-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-bottom: 0;
}

.munin-explorer-list-head > .munin-explorer-page__actions {
  align-items: flex-end;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
}

.munin-explorer-list-head > .munin-explorer-page__actions > label {
  flex-basis: auto;
}

@media (max-width: 479px) {
  .munin-explorer-list-head > .munin-explorer-page__actions {
    flex-basis: 100%;
  }
}
/* Skjemaet for ny liste: ledeteksten over, så feltet og de to knappene på én rad som brekker.
   Sidens egen luft over holder, så ledetekstens toppmarg tas bort. */
.munin-explorer-list-create {
  margin-bottom: 24px;
}

.munin-explorer-list-create > .form-element__label {
  margin-top: 0;
}

.munin-explorer-list-create__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Feltet er like høyt som knappene ved siden av, 2.75rem, i stedet for skjemafeltets vanlige 63px.
   Kant, radius og fokus er `.input__field` sine. Tre klasser, for å slå `.input__field[type=text]`. */
.munin-explorer-list-create__row > .input__field.munin-explorer-list-create__field {
  height: 2.75rem;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0;
  padding-top: 0;
  width: 22.5rem;
}

@media all and (max-width: 767px) {
  .munin-explorer-list-create__row > .input__field.munin-explorer-list-create__field {
    width: 100%;
  }
}
/* Plassholderen mens radene i listen hentes: stille rader med en lys stripe, skilt av samme strek som
   tabellradene. Ingen animasjon. Listen er pynt (aria-hidden); statuslinja over sier at det lastes. */
.munin-explorer-list-placeholder {
  border-top: 1px solid rgb(230, 230, 237);
  list-style: none;
  margin: 0;
  padding: 0;
}

.munin-explorer-list-placeholder > li {
  align-items: center;
  border-bottom: 1px solid rgb(230, 230, 237);
  display: flex;
  height: 4rem;
  padding: 0 8px;
}

.munin-explorer-list-placeholder > li::before {
  background-color: rgb(230, 230, 237);
  border-radius: 4px;
  content: "";
  height: 0.75rem;
  max-width: 24rem;
  width: 40%;
}

.munin-explorer-list-placeholder > li:nth-child(even)::before {
  width: 28%;
}

/* ---- pagineringen ----

   Fire navn, og fram til nå hadde ingen av dem en regel. Det femte, `munin-explorer-skiplink-
   pagination`, ligger i `_results` og blir stående der: det er helsedatas eget navn og en del av
   den porterte bolken. Disse fire er Munins egne, og de får sin egen fil av samme grunn som
   `buttons/` er en mappe — én fil per område, og pagineringen er et område.

   Uten reglene under regnet `-content` seg ut til `display: block` og `gap: normal`, målt på
   helsedata-montasjen 2026-08-31: hele pagineringen sto som en kolonne av kontroller i 2025 piksler
   bredde i stedet for som ei rad.

   `munin-explorer-pagination`          navigasjonslandemerket rundt det hele
   `munin-explorer-pagination-content`  rada: Forrige, tallene, Neste, sidestørrelsen
   `munin-explorer-pagination-pages`    løpet av nummererte knapper
   `munin-explorer-pagination-size`     etiketten og <select> for sidestørrelse */
/* Skillet mot resultatlista over. $grey30 er den samme streken filterpanelet og delkildetreet
   bruker mellom seksjonene sine (1.16:1 mot sidebunnen $grey10) — dekor, ikke en kontrollkant, så
   1.4.11 gjelder den ikke.

   Lufta under speiler lufta over. Målt på riggen hadde landemerket 24px margin og 16px utfylling
   OVER og null av begge under, så pagineringen lå klistret mot det som kom etter den — på riggen
   bunnen av sida. Streken over er et skille, og et skille med 40px på den ene sida og 0 på den
   andre leser som om raden hører til det under. */
.munin-explorer-pagination {
  margin-top: 24px;
  margin-bottom: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid rgb(230, 230, 237);
}

/* Hopplenkas mål. Landemerket har tabindex="-1" og får fokus programmatisk, og uten en ring av sitt
   eget er hoppet usynlig for en seende tastaturbruker: ingenting annet sier at fokus flyttet seg.

   `:focus` og ikke `:focus-visible`. Nettleseren regner ikke et programmatisk `focus()` på et
   element med tabindex="-1" som «synlig fokus», så `:focus-visible` ville aldri slått til — altså
   nøyaktig i det ene tilfellet regelen finnes for. $focus mot sidebunnen $grey10 er 3.08:1, over
   kravet på 3:1 for en fokusmarkør. */
.munin-explorer-pagination:focus {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 4px;
}

/* Rada. Dette er regelen som mangler mest: fire kontroller som skal stå ved siden av hverandre.
   `flex-wrap` fordi rada bærer fire ting og den siste er en etikett med et <select> etter seg —
   på en smal vert brytes den heller enn å presse tallene ut av beholderen. */
.munin-explorer-pagination-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Endene, Forrige og Neste, når de ikke fører noe sted. De settes aldri med `disabled` — en
   disabled knapp kan ikke holde fokus, så et trykk ville kastet leseren til <body> — så tilstanden
   må tegnes fra aria-disabled.

   $grey40 er husets egen verdi for en inaktiv ghost-knapp (`buttons/_squarebutton`, `&[disabled]`)
   og den samme filterpanelet allerede bruker for aria-disabled. Den måler 1.82:1 mot sidebunnen, og
   det er med vilje: WCAG 1.4.3 unntar tekst i en inaktiv kontroll fra kontrastkravet, og en ende
   som består 4.5:1 leses som en ende som fortsatt virker.

   MERK at regelen i `_buttons` for den samme tilstanden bare setter kantfargen, med en kommentar om
   at «teksten er da $grey40». Det stemmer bare under attributtet `disabled`, som utforskeren aldri
   setter. Her er den satt eksplisitt, og bare innenfor pagineringen — verktøyrada i filterpanelet
   bærer den samme knappeformen og er ikke denne endringens ærend. */
.munin-explorer-pagination-content [aria-disabled=true] {
  color: rgb(187, 184, 201);
  cursor: default;
}

.munin-explorer-pagination-content [aria-disabled=true]:hover {
  background: none;
  color: rgb(187, 184, 201);
}

/* ---- løpet av sidetall ----

   Den bærende regelen i fila, og den eneste her som ikke er kosmetikk. Knappene bar
   `hd-button-square` + `--secondary`/`--ghost` fram til pagerens form ble avgjort, og fikk dermed tegnet
   hvilken side leseren sto på gratis. Nå bærer de helsedatas eget `hd-button-reset`, som er
   `@include button` pluss `cursor: pointer` — ingen fyll, ingen kant, ingen typografi. Uten
   reglene under er løpet en linje nakne siffer der INGENTING sier hvilken side som er i kraft.

   `.margin-right` på knappene gir ingenting her: Stiler definerer den bare som `.hd-button
   .margin-right` og inne i `.hd-button-square`, aldri for `hd-button-reset`. Luften må derfor komme
   fra `gap`, ellers står tallene inntil hverandre. */
.munin-explorer-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Understreket, i lenkefarge: et bart tall uten fyll og uten kant har ingen annen affordans igjen.
   $link mot sidebunnen er 9.50:1. Den gjennomsiktige kanten står der for at ruta rundt siden i kraft
   ikke skal flytte løpet én piksel når leseren blar. */
.munin-explorer-pagination-pages .hd-button-reset {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 2.75rem;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgb(50, 55, 141);
  text-decoration: underline;
}

.munin-explorer-pagination-pages .hd-button-reset:hover {
  color: rgb(82, 30, 255);
}

/* Siden i kraft. Tre forskjeller mot resten av løpet, og bare den ene er farge: ruta er der eller
   ikke, understrekingen er der eller ikke. En leser som ikke skiller $dark fra $link har fortsatt
   to kjennetegn igjen.

   $grey60-kanten er den samme affordansen `_buttons` gir ghost-knappene, og måler 6.76:1 mot
   sidebunnen — langt over 3:1 for en kontrollkant. Teksten er $dark, 14.28:1.

   Snittet står urørt med vilje. `graphik-medium` på siden i kraft ville byttet sifferbredde hver
   gang leseren blar, og hele løpet ville rykket sidelengs under fingeren. `cursor: default` fordi
   knappen fører til sida den allerede står på; det er `aria-current="page"` som sier det samme til
   dem som ikke ser ruta. */
.munin-explorer-pagination-pages .hd-button-reset.current {
  border-color: rgb(81, 84, 123);
  color: rgb(38, 32, 69);
  cursor: default;
  text-decoration: none;
}

/* ---- sidestørrelsen ---- */
.munin-explorer-pagination-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Skriften, hoveren og fokusen kommer fra `.munin-explorer select` i `_buttons`;
   ramme, pil og knappehøyden 2.75rem fra <select>-regelen i `_page`. Uten høyden
   sto listen på 20px ved Forrige og Neste på 44, under trykkmålet på 24px. */
/* ======================================================================
   Kolonnebredder - vaare, og med vilje sist i fila
   ======================================================================

   Kode, Datatype og Status er kolonner helsedatas variabelside ikke har, saa deres CSS kan ikke
   baere dem. Resten av kolonnene deler navn med deres, men bredden er vaar: kolonnene er flex-barn
   uten iboende bredde, og uten en flex-verdi faar hver sin egen tekstbredde, saa hodet slutter aa
   staa over cellene sine.

   SIST I FILA fordi disse skal vinne. Reglene over kommer fra deres kompilerte variables.css og er
   generelle for familien; disse er spesifikke for kolonneoppsettet vaart, og en kaskade der deres
   generelle regel kom etterpaa ville ta bredden tilbake.

   Foerste forsoek mistet dem helt. Uttrekket krevde at HVERT navn i en selektor var vaart, og
   nesten alle disse reglene navngir vaar main-kolonne og deres header-kolonne i samme selektor
   (`__source, __header__source { flex: 96 1 0 }`). Resultatet var et tabellhode der Navn og Kode
   rant sammen mens Kilde og Datasamling stod riktig - deres padding-regel traff de tre siste og
   ingenting traff de to foerste. */
/* Kolonneoverskriftene maa kuttes som cellene under dem.

   Helsedata gir `variable-dataitem-main__column` overflow: hidden og text-overflow: ellipsis, men
   ingenting tilsvarende for `__header__`-kolonnene. Paa deres egen side gaar det bra: de har fem
   kolonner, og under 1280px skjules hele hodet uansett. Vi har sju - Kode, Datatype og Status er
   vaare - saa "Variabelgruppe" vokser ut av sin egen kolonne og legger seg over "Datatype" saa
   snart verten gir komponenten mindre enn full bredde.

   Det gjoer verter flest. helsedatas egen variabelside slipper ut av innholdsbeholderen med
   `variable-explorer-main`; en side som monterer komponenten inne i den vanlige 1200px-beholderen
   gir den ~700px, og da er dette forskjellen paa et lesbart hode og to ord oppa hverandre. */
.munin-explorer-dataitem-header > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Paa en sorterbar kolonne staar teksten i et <span> i en flex-knapp, og dit naar ikke ellipsen
   over: spannet krymper ikke under tekstbredden og kuttes midt i ordet. Pila skal ikke krympe. */
.munin-explorer-dataitem-header__button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.munin-explorer-dataitem-header__button > span[aria-hidden=true] {
  flex: none;
}

/* Utvidepilen har MED VILJE ingen regel her.

   I utforskerens eget eksempelstilark tegnes den som et tegn - `::before { content: "\203A" }`,
   16px bred, rotert 90 grader for nedovervarianten - fordi den verten ikke har ikonene. Den
   fallbacken ble baaret hit av foerste port og gjorde tre ting galt paa en gang: glyfen kom
   PAA TOPPEN av Stilers egen SVG saa hver rad fikk to piler, 16px kjempet mot ikonets 24px, og
   rotasjonen ville snurret en pil som allerede peker ned.

   Stiler har ikonet: `.icon-keyboard-arrow-right` og `.icon-keyboard-arrow-down` i base/_icons.scss
   setter det som bakgrunnsbilde, og komponenten skriver begge klassene. Marginen og
   hover-varianten kommer fra de porterte reglene lenger opp. Det er alt som trengs. */
.munin-explorer-dataitem-main__name {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: rgb(50, 55, 141);
  cursor: pointer;
}

/* Navnet ligger i et rowheader-omslag som bærer flex-bredden, så knappen inni må fylle den.
   Ellers krymper den til teksten og resten av kolonnen slutter å svare på klikk — 144px
   dødsone for et kort navn ved 1920. */
.munin-explorer-dataitem-main__name > button.munin-explorer-dataitem-main__name {
  width: 100%;
  text-align: left;
}

.munin-explorer-dataitem-main__name:hover {
  text-decoration: underline;
}

.munin-explorer-data-list__item__row:hover .munin-explorer-dataitem-main__name {
  text-decoration: underline;
}

.munin-explorer-dataitem-main__column {
  min-width: 0;
}

.munin-explorer-dataitem-main__column__text {
  display: block;
  font-size: 0.9375rem;
  color: rgb(38, 32, 69);
  overflow-wrap: break-word;
}

.munin-explorer-dataitem-header,
.munin-explorer-dataitem-main {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

/* Hodet og radene skal ha samme kolonnegeometri, så hoderaden får ingen egen venstremarg.
   36px her gjorde hodet 36px smalere enn raden: hver vektet celle krympet litt, og etikettene sto
   32px til høyre for verdiene sine over Kilde og 3px ved Dataperiode. Rommet over radens pil tas i
   stedet inne i Navn-cella, på knappen: 3rem er pila (1rem) og margene rundt den (16px + 16px).
   Målt i HostileHost ved 1440. */
.munin-explorer-dataitem-header {
  padding-left: 0;
}

.munin-explorer-dataitem-header__name > .munin-explorer-dataitem-header__button {
  padding-left: 3rem;
}

/* Når pakken skriver utvidepila som sin egen knapp, rykker Navn-teksten 52px inn i stedet for 48:
   cella rundt knappen måler 40px — `_results.scss` gir knappen 8px/12px luft rundt 1rem-glyfen,
   målt 40x32 på riggen, og cella måler nøyaktig knappen — og rada legger sine egne 12px gap mellom
   den og Navn-cella. De 3rem over er regnet for dagens rad, der pila ligger INNE i navneknappen
   (16px + 16px + 16px), og blir da 4px for korte: målt ved 1440 med cella til stede står hodet på
   480 og navnet på 484.

   NØKLET PÅ CELLA, IKKE PÅ KNAPPEN. Knappen ligger i `<div role="cell">` fordi ei ARIA-rad ikke kan
   eie annet enn celler (WCAG 1.3.1, nivå A — se `_results.scss`), og det er cella som er flex-element
   i rada og tar de 40px innrykket her regner med. Målt: den gamle formen, `:has()` på knappenavnet,
   traff like fullt gjennom cella — `:has()` her er etterkommer og ikke barn — så dette er å skrive
   regelen på det som faktisk tar plassen, ikke en retting av noe som var i stykker.

   `:has()` på resultattabellen, ikke på rada slik `_results` gjør det: cella står i rada, men
   innrykket skal på hodet, og hodet er radas SØSKEN inne i `__result`. Skopet dit og ikke høyere
   fordi variabellistas tabell bærer de samme hodenavnene utenfor `__result`. Uten cella i DOM-en
   treffer regelen ingenting, og hodet beholder sine 48px.

   Ingen mediespørring: under 1280px er hele hoderaden `display: none` (`_results.scss:369-372`),
   så det er ikke noe hode å rykke inn der — og der ligger knappen dessuten absolutt plassert til
   høyre og bidrar verken med bredde eller gap. */
.munin-explorer-data-list__result:has(.munin-explorer-dataitem__expand-cell) .munin-explorer-dataitem-header__name > .munin-explorer-dataitem-header__button {
  padding-left: 52px;
}

/* Kode, Datatype og Status er utforskerens egne kolonner og manglet i `_results`-lista som gir
   hodecellene samme 16px som `__column` gir verdiene under dem. Uten den sto Datatype-hodet 14px
   smalere enn cellene sine, og alt til høyre for det forskjøvet. Skopet til søkehodet: variabellistas
   tabell bærer de samme hodenavnene over celler uten `__column`, og der ville de 16px forskjøvet hodet. */
.munin-explorer-dataitem-header > .munin-explorer-dataitem-header__code,
.munin-explorer-dataitem-header > .munin-explorer-dataitem-header__dataType,
.munin-explorer-dataitem-header > .munin-explorer-dataitem-header__status {
  padding-left: 16px;
}

/* 16px, det samme målet som kildeutforskerens chevron fikk. Runas er en ANNEN
   knapp med et annet klassenavn — `__expand-icon` inne i `__name`, ikke `__expand-toggle` inne i
   `.munin-explorer-kilder` — så kildeutforskerens regel kunne ikke bare utvides hit; den ville ikke truffet.
   Målet skrives derfor på nytt, mot Runas eget navn.

   Alle fire erklæringene må med. `flex-basis` er bredden i ei flex-rad, så `width` alene gir 24px
   likevel; `height` kommer ellers fra `.icon` i `base/_icons`; og `background-size` må settes fordi
   grunnregelen tegner bildet med `background`-kortformen og `center/1.5rem`. Samme fire som på kildeutforskerens chevron.
   Fila lastes sist i komponenten med vilje, så tallet står her og ikke i `_results`. */
.munin-explorer-dataitem-main__expand-icon {
  background-size: 1rem;
  flex: 0 0 1rem;
  height: 1rem;
  width: 1rem;
}

/* The default share for a body cell. Header cells are deliberately NOT in this selector.

   They used to be, as a bare `.sortable-header` - which is helsedata's class, unprefixed, in a
   SHARED stylesheet: every `.sortable-header` on every page consuming Stiler became a flex item.
   Scoping it as `.munin-explorer-dataitem-header .sortable-header` fixes the leak and breaks the
   layout, because (0,2,0) then out-specifies the per-column `flex` rules at (0,1,0) below and every
   column collapses to an equal share. Measured: 89/105/57/106/84/49/80 became 72/72/88/88/88/72/88.

   Header cells need neither half of this. Each of the seven has its own `flex` rule below, and
   `min-width: 0` for them sits on the truncation rule that already selects them. */
.munin-explorer-dataitem-main__column {
  flex: 1 1 0;
  min-width: 0;
}

/* Navn 420 → 360, Datasamling 212 → 250, Variabelgruppe 160 → 210 og Datatype 114 → 130 da de fire fikk bryte
   i stedet for å kuttes med «…»: med de gamle vektene tok Variabelgruppe ni linjer i 83px ved 1366. */
.munin-explorer-dataitem-main__name,
.munin-explorer-dataitem-header__name {
  flex: 360 1 0;
}

.munin-explorer-dataitem-main__code,
.munin-explorer-dataitem-header__code {
  flex: 246 1 0;
}

.munin-explorer-dataitem-main__source,
.munin-explorer-dataitem-header__source {
  flex: 96 1 0;
}

.munin-explorer-dataitem-main__dataCollection,
.munin-explorer-dataitem-header__dataCollection {
  flex: 250 1 0;
}

.munin-explorer-dataitem-main__theme,
.munin-explorer-dataitem-header__theme {
  flex: 210 1 0;
}

.munin-explorer-dataitem-main__dataType,
.munin-explorer-dataitem-header__dataType {
  flex: 130 1 0;
}

.munin-explorer-dataitem-main__status,
.munin-explorer-dataitem-header__status {
  flex: 98 1 0;
}

/* Dataperiode er den eneste vekta som er målt mot en streng og ikke mot en kolonnebredde, fordi
   utforskeren byttet teksten fra måned-og-år til datoen katalogen faktisk har: «jan 1979 -
   des 2024» ble «1. jan. 1979 – 31. des. 2024». 150 var målt mot den gamle forma og ga tre linjer
   der cella er laga for to.

   MÅLT PÅ RIGGEN I GRAPHIK 15px, ikke rekna ut. Verste realistiske streng er «31. mars 2001 –
   31. mars 2025» — «mars» er den breieste nb-NO-forkortinga fordi .NET 10 sin ICU skriv mars fullt
   ut — og den måler 208,8px ubrutt. Cella har 16px venstrepadding, så tekstboksen må vere 109px for
   at strengen skal brekke i to og ikke tre linjer; 109 er terskelen ved både 1281 og 1366, altså
   strengens breieste halvdel og ikke et tilfeldig tall. 280 gir 112px ved 1366 og 129px ved 1440.

   ÉI LINJE ER IKKE OPPNÅELIG, og det er derfor tallet ikke er større. Rada er 953px ved 1440, og
   160px av dem er den faste Lagre-kolonna. Ved 1440 må vekta opp i 560 før strengen står på éi
   linje, og da er lista HØGARE enn ved 280 (1237px mot 1159px for 20 rader), fordi Navn-kolonna
   brekk meir; ved 1281 finst det ingen vekt som gir éi linje i det hele tatt. Målt for 20 rader,
   verste streng: 1281 6→3 linjer (2700→1428px), 1366 4→2 (1800→1218px), 1440 3→2 (1366→1159px),
   1536 og breiare 3→2 (1350→1159px).

   280 OG IKKE MEIR var målt mot kolonner som ble kappet; etter at de lange kolonnene fikk bryte, brytes
   Datatype og Variabelgruppe i stedet, og høydene over er målt med vektene fra før det. Hodecella «Dataperiode» står på
   éi linje ved alle breidder. */
.munin-explorer-dataitem-main__period,
.munin-explorer-dataitem-header__period {
  flex: 280 1 0;
}

/* Lagre i liste — innlogget lesers knappekolonne, med egen overskrift «Variabelliste».
   Fast bredde, ikke en vekt: knappen bytter mellom «Lagre i liste» og
   «Fjern fra liste» når den trykkes, og en innholdsstyrt celle flyttet da alle kolonnene i rada.
   10rem er den lengste etiketten, engelske «Remove from list», målt til 160px i Graphik Medium.
   Hodecella får samme bredde, ellers står «Variabelliste» ikke over knappene. */
.munin-explorer-dataitem-main__save,
.munin-explorer-dataitem-header__save {
  flex: 0 0 10rem;
}

/* Innført for lagrestatusen som sto i rada; den står nå i det åpne panelet. */
.munin-explorer-data-list__item__row {
  flex-wrap: wrap;
}

/* Lagrestatusen står etter Lagre i liste i panelets knapperekke: ved siden av når setningen får
   plass, ellers på egen linje i flukt med knappene. Tom har den ingen høyde; med tekst får den
   knappenes `margin-bottom` under seg. */
.munin-explorer-data-list__save-status {
  display: inline-block;
  max-width: 100%;
}

.munin-explorer-data-list__save-status > [role=alert]:not(:empty) {
  display: block;
  margin-bottom: 16px;
}

/* «Lagre disse variablene» under treffantallet: knappen, spørsmålet ved 200 eller flere, status og
   varsel. Luft over, så spørsmålet ikke står klistret under «Kolonner» under 375px. */
.munin-explorer-save-all {
  margin: 12px 0 16px;
}

/* Hver nylagrede rad dekkes av «Lagret i liste …» i tre sekunder, som på helsedatas egen side, og
   «Fjern fra liste» males over den. Merknaden er aria-hidden; statuslinja sier det én gang. */
.munin-explorer-data-list__item--saved .munin-explorer-data-list__item__row {
  position: relative;
}

.munin-explorer-data-list__saved-notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background-color: rgb(155, 233, 243);
  font-weight: 500;
  pointer-events: none;
  animation: munin-explorer-saved-notice 3s ease-in forwards;
}

.munin-explorer-data-list__item--saved .munin-explorer-dataitem-main__save {
  position: relative;
  z-index: 1;
}

@keyframes munin-explorer-saved-notice {
  0%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Uten toning står merknaden til den fjernes etter tre sekunder. */
@media (prefers-reduced-motion: reduce) {
  .munin-explorer-data-list__saved-notice {
    animation: none;
  }
}
/* Ønskede data — variabellistas eneste redigerbare kolonne, og den eneste av de åtte som manglet
   en vekt. Uten en egen regel falt cella ned på `__column`s vekt 1 mot de sju andres 1188 og ble
   17px bred med overflow: hidden rundt et 222px felt; hodet så riktig ut, for hodecella bærer ikke
   `__column`. 260 er utforskerens eget tall - kolonnen holder en setning leseren har skrevet. */
.munin-explorer-dataitem-main__desiredData,
.munin-explorer-dataitem-header__desiredData {
  flex: 260 1 0;
}

/* Feltet må fylle cella. Ellers beholder det nettleserens iboende bredde, 222px, og kolonnebredda
   blir noe annet enn feltbredda uansett hvor mye plass kolonnen får. `input` for verter på
   Fhi.Munin.Explorer 1.1 og eldre; nyere tegner et `textarea`. */
.munin-explorer-dataitem-main__desiredData input {
  width: 100%;
}

.munin-explorer-dataitem-main__desiredData textarea {
  width: 100%;
}

/* Kodeverk og Statistikk i den lagrede lista holder bare Ja/Nei, så kolonnen er så bred som
   overskriften. Tabellen står i min-content-bredde, og uten `nowrap` ville en overskrift på to ord
   brekke og kolonnen krympe til det lengste ordet. */
.munin-explorer-dataitem-main__kodeverk,
.munin-explorer-dataitem-header__kodeverk,
.munin-explorer-dataitem-main__statistikk,
.munin-explorer-dataitem-header__statistikk {
  white-space: nowrap;
}

/* Sorteringsknappen i begge utforskerne. Variabellistas hode er en div-basert flex-pseudotabell,
   kildelistas er en ekte <table> med <th> — markupen er ulik, behandlingen av knappen er det ikke.
   Derfor to navn i samme selektorliste, og ingen ny blokk.

   IKKE `.munin-explorer-dataitem-header .sortable-header` over: den regelen står skopet som den gjør
   for å stoppe en flex-lekkasje, og en ekte <th> har ingen bruk for noen av halvdelene — den er
   allerede columnheader, og bredden kommer fra tabelloppsettet. Pila trenger ingen regel heller; den
   er et bart <span> med tegnet i, slik variabellista alt tegner den. */
.munin-explorer-dataitem-header__button:hover,
.munin-explorer-kilder__sort:hover {
  text-decoration: underline;
}

.munin-explorer-dataitem-header__button[aria-current=true],
.munin-explorer-kilder__sort[aria-current=true] {
  color: rgb(50, 55, 141);
}

.munin-explorer-dataitem-main__code .munin-explorer-dataitem-main__column__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dataperiode wraps: a cut date range reads as MISSING data - "aug 2021 - Paag..." - and that is
   why this column was the one reported. Navn wraps too, below, and so do
   Kilde, Datasamling, Variabelgruppe and Datatype; Kode still clips.

   Letting every value wrap was tried and reverted: with the flex weights unchanged the cells stop
   clipping and start OVERLAPPING each other - measured at a 1400px viewport, Kode ran 11px into
   Kilde. Wrapping and the widths are one problem, not two. (Below 1281px the row is already
   flex-direction: column, so nothing there is side by side to collide.)

   `overflow-wrap: break-word` above governs where the break falls. Two lines at line-height 1.5
   fit the 3.5rem minimum, so a one- or two-line row keeps the height helsedata designed. */
.munin-explorer-dataitem-main__period .munin-explorer-dataitem-main__column__text {
  white-space: normal;
}

/* A cut name hides the one cell a reader cannot guess from the row, so Navn wraps too and the row
   grows from its old fixed height instead of clipping the third line. */
.munin-explorer-dataitem-main__name,
.munin-explorer-dataitem-main__name .munin-explorer-dataitem-main__column__text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Kilde, Datasamling, Variabelgruppe og Datatype brytes som Navn. `overflow-wrap: anywhere`
   bryter et ord lengre enn cella, så ingen tekst renner inn i naboen; `hyphens` gjør det med bindestrek der
   nettleseren har norsk orddeling. Bare flex-radene: tabellcellene i lister har ikke `__column`. */
.munin-explorer-dataitem-main__column.munin-explorer-dataitem-main__source .munin-explorer-dataitem-main__column__text,
.munin-explorer-dataitem-main__column.munin-explorer-dataitem-main__dataCollection .munin-explorer-dataitem-main__column__text,
.munin-explorer-dataitem-main__column.munin-explorer-dataitem-main__theme .munin-explorer-dataitem-main__column__text,
.munin-explorer-dataitem-main__column.munin-explorer-dataitem-main__dataType .munin-explorer-dataitem-main__column__text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.munin-explorer-dataitem-main {
  height: auto;
  min-height: 3.5rem;
}

@media not all and (max-width: 1280px) {
  .munin-explorer-dataitem-main__name[role=rowheader] {
    padding-block: 0.25rem;
  }
}
/* Vektene over er bredder, og bare bredder.

   Under 1280px snur `_results` rada til `flex-direction: column` med `height: auto`. Da er
   flex-BASIS høyden, og vektene over står fortsatt: hver celle får basis 0 i en beholder uten
   egen høyde, og siden `align-items` er flex-start er det ingen fri plass å vokse i. Målt ved
   1280 og 1024: hver celle 745x0 og 489x0, med overflow: hidden, så navn, kode, kilde,
   datasamling og datoer ble tegnet ingen steder. Rada viste bare knappen sin.

   `> *` framfor en liste over de åtte kolonnene, samme form som hodets kutteregel øverst i fila:
   en niende kolonne skal ikke kunne komme til uten å bli med. Bredda blir stående - `_results`
   gir `__column` og `__name` width: 100% i den samme spørringa. */
@media all and (max-width: 1280px) {
  .munin-explorer-dataitem-main > * {
    flex: 0 0 auto;
  }
}
.onboarding-tooltip {
  display: block;
  position: relative;
}
.onboarding-tooltip__content {
  padding: 16px 8px 24px;
  white-space: normal;
}
.onboarding-tooltip__header {
  font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .onboarding-tooltip__header {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .onboarding-tooltip__header {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.onboarding-tooltip__header {
  margin: 0 0 8px 0;
}
.onboarding-tooltip__buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.onboarding-tooltip__button-x {
  position: absolute;
  top: 8px;
  right: 8px;
}
.onboarding-tooltip__tip {
  position: absolute;
  border-radius: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 18px;
  color: rgb(38, 32, 69);
  background: rgb(228, 238, 255);
  font-size: 1rem;
  font-family: sans-serif;
  line-height: 1;
  z-index: 149;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  visibility: unset;
  width: 300px;
  height: auto;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media all and (max-width: 767px) {
  .onboarding-tooltip__tip {
    visibility: hidden;
  }
}
.onboarding-tooltip__tip--active {
  visibility: visible;
}
.onboarding-tooltip__tip:before {
  content: " ";
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-width: 12px;
}
.onboarding-tooltip__tip--top {
  top: -40px;
}
.onboarding-tooltip__tip--top:before {
  top: 100%;
  border-top-color: rgb(228, 238, 255);
}
.onboarding-tooltip__tip--left {
  transform: translateX(0) translateY(-50%);
}
.onboarding-tooltip__tip--left:before {
  left: -22px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  border-right-color: rgb(228, 238, 255);
}
.onboarding-tooltip__tip--bottom {
  bottom: -40px;
}
.onboarding-tooltip__tip--bottom:before {
  bottom: 100%;
  border-bottom-color: rgb(228, 238, 255);
}
.onboarding-tooltip__tip--right {
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateX(0) translateY(-50%);
}
.onboarding-tooltip__tip--right:before {
  left: auto;
  right: -22px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  border-left-color: rgb(228, 238, 255);
}

.paragraph p {
  margin: 0;
}
.paragraph {
  margin: 16px 0;
}
.paragraph--top-margin {
  margin: 16px 0 0 0;
}
.paragraph--bottom-margin {
  margin: 0 0 16px 0;
}
.paragraph--none {
  margin: 0;
}
.paragraph-1 {
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .paragraph-1 {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .paragraph-1 {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.paragraph-block .paragraph-1 {
  margin: 0 0 48px 0;
}
.paragraph-2 {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .paragraph-2 {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .paragraph-2 {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.paragraph-block .paragraph-2 {
  margin: 0 0 40px 0;
}
.paragraph-block .paragraph-2:first-of-type {
  margin-top: 16px;
}
.paragraph-3 {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .paragraph-3 {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .paragraph-3 {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.paragraph-block .paragraph:last-of-type {
  margin-bottom: 40px;
}

.pegaintegrationdisabledinfobox {
  margin-bottom: 64px;
  text-align: left;
}
.pegaintegrationdisabledinfobox__icon-wrapper {
  margin-right: 8px;
}
.pegaintegrationdisabledinfobox__icon {
  vertical-align: middle;
}

.profilemenu {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 1rem;
}

.profilemenu-button {
  max-width: 18rem;
  height: 100%;
  padding: 0 0.5rem;
  border-radius: 0;
}
@media all and (max-width: 767px) {
  .profilemenu-button {
    max-width: 12rem;
  }
}
@media all and (max-width: 400px) {
  .profilemenu-button {
    max-width: 9rem;
  }
}
.profilemenu-button:hover {
  background-color: rgb(42, 45, 80);
}
.profilemenu-button:focus {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
}
.profilemenu-button .icon {
  flex-shrink: 0;
}

.profilemenu-button__name {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "graphik", Arial, Helvetica, sans-serif;
}

.profilemenu-list {
  list-style: none;
  padding: 0;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  box-shadow: 0px 6px 11px rgba(33, 42, 190, 0.18);
  position: absolute;
  width: 12.5rem;
  margin: 0;
  top: 3.25rem;
  right: 0;
  overflow: hidden;
}

.profilemenu-list__item {
  background-color: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
}
.profilemenu-list__item:first-of-type {
  border-radius: 8px 8px 0 0;
}
.profilemenu-list__item:last-of-type {
  border-radius: 0 0 8px 8px;
}
.profilemenu-list__item:hover {
  background-color: rgb(246, 247, 252);
  color: rgb(38, 32, 69);
}

.profilemenu-list__link {
  padding: 1rem;
  height: 100%;
  font-family: "graphik", Arial, Helvetica, sans-serif;
  display: flex;
  border-radius: 0;
}
.profilemenu-list__link:hover {
  color: rgb(38, 32, 69);
}
.profilemenu-list__link:focus {
  box-shadow: inset 0 0 0 4px rgb(66, 139, 255);
  outline: none;
  color: rgb(38, 32, 69);
}

.profilemenu-list__link--logout {
  border-top: 1px solid rgb(239, 240, 250);
  display: flex;
  padding: 24px 16px;
  border-radius: 0 0 8px 8px;
  color: rgb(82, 30, 255);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  text-decoration: none;
  justify-content: center;
  line-height: 1;
}
.profilemenu-list__link--logout:hover, .profilemenu-list__link--logout:focus {
  color: rgb(82, 30, 255);
}

* {
  box-sizing: border-box;
}

.color-picker-wrapper {
  display: flex;
  user-select: none;
  position: relative;
}

.richtext-editor__text-color-line {
  position: relative;
  display: flex;
  align-items: flex-start;
  line-height: 1.1;
}
.richtext-editor__text-color-line:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
}
.richtext-editor__text-color-line--dark:before {
  background-color: rgb(38, 32, 69);
}
.richtext-editor__text-color-line--hover:before {
  background-color: rgb(50, 55, 141);
}
.richtext-editor__text-color-line--focus:before {
  background-color: rgb(66, 139, 255);
}
.richtext-editor__text-color-line--grey50:before {
  background-color: rgb(114, 113, 150);
}
.richtext-editor__text-color-line--successdark:before {
  background-color: rgb(0, 102, 74);
}
.richtext-editor__text-color-line--success:before {
  background-color: rgb(142, 220, 170);
}
.richtext-editor__text-color-line--errordarkhover:before {
  background-color: rgb(144, 0, 35);
}
.richtext-editor__text-color-line--errordark:before {
  background-color: rgb(180, 0, 44);
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 120px;
  margin-top: 24px;
  position: absolute;
  background-color: white;
  padding: 4px;
  top: -4px;
  left: 0;
  box-shadow: 0px 1px 4px rgba(11, 17, 120, 0.16);
  z-index: 100;
  border-radius: 8px;
}
.color-picker__button {
  height: 24px;
  width: 24px;
  background-color: #fff;
  color: #999;
  cursor: pointer;
  margin: 2px;
  padding: 2px 0;
  border: none;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-picker__button:hover {
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(187, 184, 201);
}
.color-picker__button:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgb(66, 139, 255);
}
.color-picker__button--dark {
  background-color: rgb(38, 32, 69);
}
.color-picker__button--hover {
  background-color: rgb(50, 55, 141);
}
.color-picker__button--focus {
  background-color: rgb(66, 139, 255);
}
.color-picker__button--grey50 {
  background-color: rgb(114, 113, 150);
}
.color-picker__button--successdark {
  background-color: rgb(0, 102, 74);
}
.color-picker__button--success {
  background-color: rgb(142, 220, 170);
}
.color-picker__button--errordarkhover {
  background-color: rgb(144, 0, 35);
}
.color-picker__button--errordark {
  background-color: rgb(180, 0, 44);
}

.DraftEditor-root {
  width: 100%;
}

.public-DraftEditor-content {
  padding: 12px;
  max-height: 600px;
  overflow: auto;
}

.public-DraftEditorPlaceholder-root {
  margin: 0px 0px -15px;
  padding: 12px;
  position: absolute;
  color: rgb(187, 184, 201);
  pointer-events: none;
}

.richtext-editor {
  box-shadow: 0 0 0 1px rgb(187, 184, 201);
  border-radius: 8px;
  background-color: white;
}
.form-element--error .richtext-editor {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
  border-radius: 8px;
  outline: none;
}
.form-element--error .richtext-editor--focused {
  border: 1px solid rgb(180, 0, 44);
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.richtext-editor--focused {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.richtext-editor__field {
  display: flex;
  padding: 5px;
  font-size: 1rem;
}
.richtext-editor__toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 40px;
  padding-left: 12px;
}
.richtext-editor__toolbar-group {
  display: flex;
  margin-left: 24px;
}
.richtext-editor__toolbar-group:first-of-type {
  margin-left: 0;
}
.richtext-editor__toolbar-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: transparent;
  margin-right: 2px;
  border-radius: 4px;
  font: "graphik", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  border: none;
  padding: 0;
  cursor: pointer;
}
.richtext-editor__toolbar-button strong {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.richtext-editor__toolbar-button .icon {
  background-size: 20px;
}
.richtext-editor__toolbar-button--active {
  background-color: rgb(187, 184, 201);
}
.richtext-editor__toolbar-button:hover {
  background-color: rgb(230, 230, 237);
}
.richtext-editor__toolbar-button:focus {
  box-shadow: 0 0 0 0px rgb(255, 255, 255) 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.richtext-editor__toolbar .tooltip {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchbox__freetext {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .searchbox__freetext {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .searchbox__freetext {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.searchbox__freetext {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.searchbox__freetext:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.searchbox__freetext {
  height: 3.5rem;
  padding-left: 16px;
  padding-right: 104px;
  padding-top: 18px;
  line-height: 56px;
  margin: 0;
  width: 100%;
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.searchbox__freetext::-ms-clear {
  display: none;
}
.searchbox__freetext::placeholder {
  color: rgb(81, 84, 123);
  opacity: 1;
}
.searchbox__freetext-icon {
  position: absolute;
  margin-left: 8px;
  top: 20px;
}
.searchbox__freetext-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
  padding: 8px 0px;
}
@media all and (max-width: 767px) {
  .variable-explorer-header .searchbox__freetext-container {
    margin-bottom: 0;
  }
}
.searchbox__freetext-submit-button, .searchbox__freetext-cancel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.searchbox__freetext-submit-button {
  right: 8px;
}
.searchbox__freetext-cancel-button {
  right: 3.5rem;
}

.textarea__layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.textarea__layout .hd-button__round {
  margin-right: 0;
  position: relative;
  left: 16px;
}
.textarea__help-text-box {
  background-color: rgb(230, 230, 237);
  border-radius: 8px;
  padding: 24px;
  margin: 16px 0;
}
.textarea__field {
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
  font-size: 1.125rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 1.5;
  padding: 16px;
  margin: 0;
}
@media all and (max-width: 767px) {
  .textarea__field {
    font-size: 0.875rem;
  }
}
.textarea__field--auto-expand {
  resize: none;
}
.textarea__field:disabled {
  color: rgb(187, 184, 201);
}
.textarea__field.form-element--error {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
}
.textarea__field.form-element--error:focus {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44), 0 0 0 4px rgb(66, 139, 255);
}

.timestamp {
  font-size: 1.125rem;
  color: rgb(81, 84, 123);
}

.tox-tinymce {
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
}
.tox-tinymce:focus-within {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}

.tox-toolbar__primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 40px;
  padding-left: 12px;
}

.tox-toolbar__group {
  display: flex;
  margin-left: 24px;
}
.tox-toolbar__group:first-of-type {
  margin-left: 0;
}

.tox-tbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  margin-right: 2px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  color: rgb(38, 32, 69);
}
.tox-tbtn:hover {
  background-color: rgb(230, 230, 237);
}
.tox-tbtn:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.tox-tbtn--enabled {
  background-color: rgb(187, 184, 201);
}
.tox-tbtn:disabled, .tox-tbtn[aria-disabled=true] {
  color: rgb(187, 184, 201);
  cursor: not-allowed;
  pointer-events: none;
}
.tox-tbtn .tox-icon svg {
  width: 20px;
  height: 20px;
}

.tox-tbtn__color-preview {
  position: relative;
  display: block;
  height: 3px;
  width: 100%;
}

.tox-edit-area {
  padding: 17px;
  font-size: 1rem;
  line-height: 160%;
  color: rgb(38, 32, 69);
  background-color: rgb(255, 255, 255);
  max-height: 600px;
  overflow: auto;
  min-height: 48px;
}

.tooltip-container {
  display: inline-block;
  position: relative;
}

.tooltip-tip {
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px;
  color: rgb(255, 255, 255);
  background: rgb(38, 32, 69);
  font-size: 1rem;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  visibility: hidden;
}
.tooltip-tip--active {
  visibility: visible;
}
.tooltip-tip:before {
  content: " ";
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-width: 6px;
  margin-left: -6px;
}
.tooltip-tip--top {
  top: -40px;
}
.tooltip-tip--top:before {
  top: 100%;
  border-top-color: rgb(38, 32, 69);
}
.tooltip-tip--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateX(0) translateY(-50%);
}
.tooltip-tip--right:before {
  left: -6px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  border-right-color: rgb(38, 32, 69);
}
.tooltip-tip--bottom {
  bottom: -40px;
}
.tooltip-tip--bottom:before {
  bottom: 100%;
  border-bottom-color: rgb(38, 32, 69);
}
.tooltip-tip--left {
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateX(0) translateY(-50%);
}
.tooltip-tip--left:before {
  left: auto;
  right: -12px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  border-left-color: rgb(38, 32, 69);
}

.year-range-slider {
  width: 100%;
  user-select: none;
}

.year-range-slider__labels {
  display: none;
}

.year-range-slider__track-container {
  position: relative;
  height: 40px;
  padding-top: 24px;
  display: flex;
  align-items: center;
}

.year-range-slider__rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: #c4c4c4;
}

.year-range-slider__track {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: #51547B;
}

.year-range-slider__thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #51547B;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.year-range-slider__value-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  color: #51547B;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
}

.year-range-slider__input {
  position: absolute;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.year-range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}

.year-range-slider__input::-moz-range-thumb {
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background: transparent;
}

.skjema {
  color: rgb(38, 32, 69);
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  position: relative;
  display: grid;
  grid-template-columns: max(30%, 50% - 424px) 64px minmax(0, 672px) minmax(0, 1fr);
  padding-block: 0 64px;
}
.skjema > * {
  grid-column: 3;
}
.skjema > .skjema-feilmelding,
.skjema > .skjema-laster,
.skjema > .skjema-kvittering,
.skjema > .skjema-krever-innlogging {
  padding-top: 64px;
}
.skjema-ramme {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}
.skjema-innhold {
  grid-column: 3;
  min-width: 0;
  padding-top: 64px;
}
.skjema::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(30%, 50% - 424px);
  width: 1px;
  background: rgb(230, 230, 237);
}
@media all and (min-width: 1025px) and (max-width: 1280px) {
  .skjema {
    grid-template-columns: max(30%, 50% - 424px) 24px minmax(0, 560px) minmax(0, 1fr);
  }
}
@media all and (max-width: 1024px) {
  .skjema {
    display: block;
    padding-block: 0;
  }
  .skjema > .skjema-feilmelding,
  .skjema > .skjema-laster,
  .skjema > .skjema-kvittering,
  .skjema > .skjema-krever-innlogging {
    max-width: 800px;
    margin-inline: auto;
    padding: 32px 16px 0;
  }
  .skjema-ramme {
    display: block;
  }
  .skjema-ramme > :not(.skjema-toppstripe) {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: 16px;
  }
  .skjema-innhold {
    padding-top: 0;
  }
  .skjema::before {
    display: none;
  }
}
.skjema-tittel {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-tittel {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-tittel {
  color: rgb(38, 32, 69);
  margin: 0 0 24px 0;
}
.skjema-beskrivelse {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-beskrivelse {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-beskrivelse {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-beskrivelse {
  color: rgb(81, 84, 123);
  margin: 16px 0;
}
.skjema-felter {
  display: block;
}
.skjema-handlinger {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.skjema-send-knapp {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-send-knapp:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-send-knapp {
  background-color: rgb(82, 30, 255);
}
.skjema-send-knapp:hover, .skjema-send-knapp:active {
  background-color: rgb(50, 55, 141);
}
.skjema-laster {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-laster {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-laster {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-laster {
  color: rgb(81, 84, 123);
}
.skjema-kvittering-tittel {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-kvittering-tittel {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-kvittering-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-kvittering-tittel {
  color: rgb(38, 32, 69);
  margin: 0 0 16px 0;
}

.skjema-dokument {
  color: rgb(38, 32, 69);
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  max-width: 672px;
}
.skjema-dokument .skjema-felt-input {
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.skjema-dokument ul {
  margin: 0;
  padding-left: 1.25em;
  white-space: normal;
}

.skjema-dokument-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 672px);
  column-gap: 40px;
  align-items: start;
}
.skjema-dokument-layout-meny {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 96px - 40px);
  overflow-y: auto;
  border-right: 1px solid rgb(230, 230, 237);
  padding-right: 24px;
}
.skjema-dokument-layout .skjema-seksjon,
.skjema-dokument-layout .skjema-gruppe {
  scroll-margin-top: 96px;
}
@media all and (max-width: 1024px) {
  .skjema-dokument-layout {
    display: block;
  }
  .skjema-dokument-layout-meny {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid rgb(230, 230, 237);
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 32px;
  }
}

.skjema-seksjon {
  margin-top: 40px;
  margin-bottom: 24px;
}
.skjema-seksjon-tittel {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-seksjon-tittel {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-seksjon-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-seksjon-tittel {
  color: rgb(38, 32, 69);
  margin: 0 0 16px 0;
}
.skjema-seksjon-beskrivelse {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-seksjon-beskrivelse {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-seksjon-beskrivelse {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-seksjon-beskrivelse {
  color: rgb(81, 84, 123);
  margin: 0 0 16px 0;
}

.skjema-gruppe {
  margin-top: 32px;
}
.skjema-gruppe-tittel {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-gruppe-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-gruppe-tittel {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-gruppe-tittel {
  color: rgb(38, 32, 69);
  margin: 0 0 8px 0;
}
.skjema-gruppe-underledetekst {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-gruppe-underledetekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-gruppe-underledetekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-gruppe-underledetekst {
  color: rgb(81, 84, 123);
  margin: 0 0 8px 0;
}

.skjema-gruppe .skjema-gruppe > .skjema-gruppe-tittel {
  font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-gruppe .skjema-gruppe > .skjema-gruppe-tittel {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-gruppe .skjema-gruppe > .skjema-gruppe-tittel {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.skjema-oppfolging {
  display: flex;
  flex-direction: column;
  padding-left: 32px;
  border-left: 4px solid rgb(187, 184, 201);
  margin-top: 16px;
  margin-left: 16px;
}

.skjema-felt,
.skjema-felt-flervalg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.skjema-felt > *,
.skjema-felt-flervalg > * {
  grid-column: 1/-1;
}
.skjema-felt > .skjema-felt-ledetekst,
.skjema-felt-flervalg > .skjema-felt-ledetekst {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 10px 0;
  margin-top: 8px;
  margin-bottom: 0;
}
.skjema-felt > .skjema-hjelpeknapp,
.skjema-felt-flervalg > .skjema-hjelpeknapp {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin-top: 8px;
}

.skjema-felt-ledetekst {
  font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-ledetekst {
    font: normal 1.125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-ledetekst {
    font: normal 1rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-ledetekst {
  color: rgb(38, 32, 69);
  margin-top: 16px;
  margin-bottom: 8px;
  display: inline-block;
}
.skjema-felt-underledetekst, .skjema-felt-valgfritt {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-underledetekst, .skjema-felt-valgfritt {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-underledetekst, .skjema-felt-valgfritt {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-underledetekst, .skjema-felt-valgfritt {
  color: rgb(81, 84, 123);
  margin: 0 0 8px 0;
}
.skjema-felt-hjelpetekst {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-hjelpetekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-hjelpetekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-hjelpetekst {
  color: rgb(81, 84, 123);
  margin: 8px 0 0 0;
}
.skjema-felt-verdi {
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-verdi {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-verdi {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-verdi {
  color: rgb(38, 32, 69);
  margin: 0 0 8px 0;
  overflow-wrap: anywhere;
}
.skjema-felt-input {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-input {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-input {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-input {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.skjema-felt-input:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.skjema-felt-input {
  width: 100%;
  line-height: normal;
}
@media all and (max-width: 2881px) {
  .skjema-felt-input {
    line-height: normal;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-input {
    line-height: normal;
  }
}
.skjema-felt-fritekst {
  color: rgb(38, 32, 69);
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-fritekst {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-fritekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-fritekst {
  letter-spacing: 0;
  text-align: left;
  margin: 0;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  outline: none;
}
.skjema-felt-fritekst:focus {
  border: 1px solid rgb(66, 139, 255);
  outline: none;
  box-shadow: 0 0 0 1px rgb(66, 139, 255);
}
.skjema-felt-fritekst {
  width: 100%;
  min-height: 10rem;
  resize: vertical;
}

.skjema-informasjonstekst {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-informasjonstekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-informasjonstekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-informasjonstekst {
  color: rgb(38, 32, 69);
  margin: 24px 0;
}
.skjema-informasjonstekst--sitatblokk {
  background: rgb(255, 243, 205);
  border-radius: 8px;
  padding: 40px;
  margin: 40px 0 48px 0;
  color: rgb(38, 32, 69);
  font-style: normal;
}

.skjema-felt-checkbox,
.skjema-felt-flervalg-alternativ,
.skjema-felt-alternativ {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.skjema-felt-checkbox input,
.skjema-felt-flervalg-alternativ input,
.skjema-felt-alternativ input {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skjema-felt-flervalg {
  border: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.skjema-felt-flervalg > legend {
  float: left;
}

.skjema-felt-alternativ-visuell {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgb(187, 184, 201);
  background: rgb(255, 255, 255);
}
.skjema-felt-alternativ-visuell--radio {
  border-radius: 50%;
}
.skjema-felt-alternativ-visuell--checkbox {
  border-radius: 4px;
}

input:checked + .skjema-felt-alternativ-visuell {
  border-color: rgb(82, 30, 255);
  background: rgb(82, 30, 255);
}

input:checked + .skjema-felt-alternativ-visuell--radio::after {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border-radius: 50%;
  background: rgb(255, 255, 255);
}

input:checked + .skjema-felt-alternativ-visuell--checkbox::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.1rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid rgb(255, 255, 255);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input:focus-visible + .skjema-felt-alternativ-visuell {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

.skjema-feilmelding {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-left: 4px solid rgb(180, 0, 44);
  background: rgb(255, 224, 224);
  color: rgb(180, 0, 44);
  padding: 16px;
  margin: 0 0 32px 0;
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-feilmelding {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-feilmelding {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}

.skjema-felt--feil .skjema-felt-input,
.skjema-felt--feil .skjema-felt-fritekst {
  border: 1px solid rgb(180, 0, 44);
  box-shadow: 0 0 0 1px rgb(180, 0, 44);
  border-radius: 8px;
  outline: none;
}
.skjema-felt--feil .skjema-felt-input:focus,
.skjema-felt--feil .skjema-felt-fritekst:focus {
  border: 1px solid rgb(180, 0, 44);
  outline: none;
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
}
.skjema-felt--feil .skjema-felt-ledetekst {
  color: rgb(180, 0, 44);
}

.skjema-felt-feilmelding {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgb(180, 0, 44);
  border-left: 4px solid rgb(180, 0, 44);
  padding-left: 8px;
  margin-top: 8px;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-feilmelding {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-feilmelding {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}

.skjema-sammendrag {
  border-left: 4px solid rgb(180, 0, 44);
  background: rgb(255, 224, 224);
  padding: 16px 32px;
  margin: 32px 0 0 0;
}
.skjema-sammendrag-tittel {
  font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-sammendrag-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-sammendrag-tittel {
    font: normal 1.5rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-sammendrag-tittel {
  color: rgb(38, 32, 69);
  margin: 0 0 16px 0;
}
.skjema-sammendrag ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.skjema-sammendrag li + li {
  margin-top: 8px;
}
.skjema-sammendrag-lenke {
  color: rgb(180, 0, 44);
  text-decoration: underline;
}
.skjema-sammendrag-lenke:focus {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

.skjema-skjult {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skjema-tegnteller {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-tegnteller {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-tegnteller {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-tegnteller {
  color: rgb(81, 84, 123);
  text-align: right;
  margin-top: 4px;
}

.skjema-hjelpeknapp {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgb(187, 184, 201);
  color: rgb(38, 32, 69);
  margin-left: 8px;
}
.skjema-hjelpeknapp:hover {
  background: rgb(246, 247, 252);
}
.skjema-hjelpeknapp:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}

.skjema-hjelpepanel {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-hjelpepanel {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-hjelpepanel {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-hjelpepanel {
  color: rgb(38, 32, 69);
  background: rgb(230, 230, 237);
  border-radius: 8px;
  padding: 24px;
  margin: 16px 0 24px;
}
.skjema-hjelpepanel[hidden] {
  display: none;
}

.skjema-repetisjon {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skjema-repetisjon-instans {
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  padding: 16px;
}
.skjema-repetisjon-legg-til {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-repetisjon-legg-til:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-repetisjon-legg-til {
  color: rgb(38, 32, 69);
  background-color: rgb(246, 247, 252);
  border: 1px solid rgb(187, 184, 201);
}
.skjema-repetisjon-legg-til:focus {
  border: 1px solid rgb(187, 184, 201);
}
.skjema-repetisjon-legg-til:hover, .skjema-repetisjon-legg-til:active {
  color: rgb(38, 32, 69);
  background-color: rgb(230, 230, 237);
}
.skjema-repetisjon-legg-til {
  align-self: flex-start;
}
.skjema-repetisjon-fjern {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-repetisjon-fjern:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-repetisjon-fjern {
  background-color: transparent;
  color: rgb(38, 32, 69);
}
.skjema-repetisjon-fjern:hover, .skjema-repetisjon-fjern:active {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}
.skjema-repetisjon-fjern {
  align-self: flex-end;
}

.skjema-oppslag {
  position: relative;
}
.skjema-oppslag-status {
  color: rgb(81, 84, 123);
  margin: 8px 0 0 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-oppslag-status {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-oppslag-status {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-oppslag-status:empty {
  margin: 0;
}
.skjema-oppslag-status--feil {
  color: rgb(180, 0, 44);
}
.skjema-oppslag-liste {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(187, 184, 201);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.skjema-oppslag-liste:empty {
  display: none;
}
.skjema-oppslag-alternativ {
  position: relative;
  padding: 8px 16px;
  cursor: pointer;
}
.skjema-oppslag-alternativ--aktiv {
  background: rgb(246, 247, 252);
  color: rgb(82, 30, 255);
}
.skjema-oppslag-alternativ--valgt::before {
  content: "✓";
  position: absolute;
  left: 16px;
  width: 20px;
  color: rgb(82, 30, 255);
}

.skjema-lagringsstatus {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-lagringsstatus {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-lagringsstatus {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-lagringsstatus {
  color: rgb(81, 84, 123);
}

.skjema-vedlegg {
  min-width: 0;
}
.skjema-vedlegg-liste {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
}
.skjema-vedlegg-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgb(187, 184, 201);
}
.skjema-vedlegg-rad--laster-opp {
  color: rgb(81, 84, 123);
}
.skjema-vedlegg-rad--laster-opp .skjema-vedlegg-filnavn {
  color: rgb(81, 84, 123);
}
.skjema-vedlegg-rad--feil {
  border-left: 4px solid rgb(180, 0, 44);
  padding-left: 8px;
  color: rgb(180, 0, 44);
}
.skjema-vedlegg-rad--feil .skjema-vedlegg-filnavn {
  color: rgb(180, 0, 44);
}
.skjema-vedlegg-rad--bekreft {
  background: rgb(246, 247, 252);
  padding-left: 8px;
  padding-right: 8px;
  gap: 8px 16px;
}
.skjema-vedlegg-filnavn {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-filnavn {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-filnavn {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-filnavn {
  flex: 1 1 8rem;
  min-width: 0;
  color: rgb(38, 32, 69);
  overflow-wrap: anywhere;
}
.skjema-vedlegg-filnavn--lenke {
  color: rgb(82, 30, 255);
  text-decoration: underline;
}
.skjema-vedlegg-filnavn--lenke:visited {
  color: rgb(82, 30, 255);
}
.skjema-vedlegg-filnavn--lenke:hover {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.skjema-vedlegg-filnavn--lenke:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.skjema-vedlegg-storrelse {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-storrelse {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-storrelse {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-storrelse {
  flex: 0 0 auto;
  color: rgb(81, 84, 123);
  white-space: nowrap;
}
.skjema-vedlegg-opplastingsstatus {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-opplastingsstatus {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-opplastingsstatus {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-opplastingsstatus {
  flex: 0 0 auto;
  color: rgb(81, 84, 123);
}
.skjema-vedlegg-feil {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-feil {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-feil {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-feil {
  flex: 1 1 100%;
  min-width: 0;
  color: rgb(180, 0, 44);
  border-left: 4px solid rgb(180, 0, 44);
  padding-left: 8px;
  margin: 8px 0 0 0;
  overflow-wrap: anywhere;
}
.skjema-vedlegg-rad--feil .skjema-vedlegg-feil {
  flex: 1 1 8rem;
  border-left: 0;
  padding-left: 0;
  margin: 0;
}
.skjema-vedlegg-bekreftelse-tekst {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-bekreftelse-tekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-bekreftelse-tekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-bekreftelse-tekst {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  color: rgb(38, 32, 69);
  overflow-wrap: anywhere;
}
.skjema-vedlegg-fjern, .skjema-vedlegg-lukk-feil, .skjema-vedlegg-bekreft-fjern, .skjema-vedlegg-avbryt {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0 8px;
  border-radius: 4px;
  color: rgb(82, 30, 255);
  text-decoration: underline;
}
.skjema-vedlegg-fjern:hover, .skjema-vedlegg-lukk-feil:hover, .skjema-vedlegg-bekreft-fjern:hover, .skjema-vedlegg-avbryt:hover {
  color: rgb(50, 55, 141);
  text-decoration: none;
}
.skjema-vedlegg-fjern:focus-visible, .skjema-vedlegg-lukk-feil:focus-visible, .skjema-vedlegg-bekreft-fjern:focus-visible, .skjema-vedlegg-avbryt:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.skjema-vedlegg-fjern:disabled, .skjema-vedlegg-lukk-feil:disabled, .skjema-vedlegg-bekreft-fjern:disabled, .skjema-vedlegg-avbryt:disabled {
  color: rgb(114, 113, 150);
  cursor: not-allowed;
}
.skjema-vedlegg-bekreft-fjern {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  color: rgb(38, 32, 69);
}
.skjema-vedlegg-bekreft-fjern:hover {
  color: rgb(82, 30, 255);
}
.skjema-vedlegg-velger {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skjema-vedlegg-velger:focus-visible + .skjema-vedlegg-velg-knapp {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.skjema-vedlegg-velger:disabled + .skjema-vedlegg-velg-knapp {
  opacity: 0.6;
  cursor: not-allowed;
}
.skjema-vedlegg-velger:disabled + .skjema-vedlegg-velg-knapp:hover, .skjema-vedlegg-velger:disabled + .skjema-vedlegg-velg-knapp:active {
  background-color: rgb(81, 84, 123);
}
.skjema-vedlegg-velg-knapp {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-vedlegg-velg-knapp:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-vedlegg-velg-knapp {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background-color: rgb(81, 84, 123);
}
.skjema-vedlegg-velg-knapp::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url(../img/icons/icon_upload--white.svg) center/24px no-repeat;
}
.skjema-vedlegg-velg-knapp:hover, .skjema-vedlegg-velg-knapp:active {
  background-color: rgb(42, 45, 80);
}
.skjema-vedlegg-ikke-innlogget {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-vedlegg-ikke-innlogget {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-vedlegg-ikke-innlogget {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-vedlegg-ikke-innlogget {
  color: rgb(81, 84, 123);
  background: rgb(246, 247, 252);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
.skjema-vedlegg-status {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skjema-velger {
  position: relative;
}
.skjema-velger .skjema-oppslag-alternativ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  padding-left: 36px;
}
.skjema-velger-alternativ-navn {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skjema-velger-alternativ-undertekst {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-velger-alternativ-undertekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-velger-alternativ-undertekst {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-velger-alternativ-undertekst {
  grid-column: 1;
  color: rgb(81, 84, 123);
}
.skjema-velger-merke {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-velger-merke {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-velger-merke {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-velger-merke {
  grid-column: 2;
  grid-row: 1/span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1;
}
.skjema-velger-treff {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skjema-velger-valgte {
  margin-bottom: 16px;
}
.skjema-velger-valgte-topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.skjema-velger-valgte-tittel {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-velger-valgte-tittel {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-velger-valgte-tittel {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-velger-valgte-tittel {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  margin: 0;
}
.skjema-velger-valgte-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skjema-velger-valgt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgb(38, 32, 69);
  color: rgb(255, 255, 255);
}
.skjema-velger-valgt + .skjema-velger-valgt {
  margin-top: 16px;
}
.skjema-velger-valgt-navn {
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-velger-valgt-navn {
    font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-velger-valgt-navn {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-velger-valgt-navn {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skjema-velger-fjern {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-velger-fjern {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-velger-fjern {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-velger-fjern {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.skjema-velger-fjern::before {
  content: "";
  width: 10px;
  height: 10px;
  background: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
.skjema-velger-fjern:hover {
  text-decoration: underline;
}
.skjema-velger-fjern:focus-visible {
  box-shadow: 0 0 0 2px rgb(38, 32, 69), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-velger-fjern-alle {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-velger-fjern-alle:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-velger-fjern-alle {
  background-color: transparent;
  color: rgb(38, 32, 69);
}
.skjema-velger-fjern-alle:hover, .skjema-velger-fjern-alle:active {
  background-color: rgb(230, 230, 237);
  color: rgb(38, 32, 69);
}

.skjema-dialog-bakgrunn {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(38, 32, 69, 0.6);
  grid-column: auto;
}

.skjema-dialog {
  position: relative;
  width: 100%;
  max-width: 556px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px;
  border-radius: 0.5rem;
  background: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
  box-shadow: 0px 11px 22px rgba(33, 42, 190, 0.12);
}
.skjema-dialog-lukk {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  color: rgb(38, 32, 69);
}
.skjema-dialog-lukk:hover {
  background: rgb(230, 230, 237);
}
.skjema-dialog-lukk:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.skjema-dialog-lukk:disabled {
  cursor: default;
  opacity: 0.5;
}
.skjema-dialog-tittel {
  font: normal 2.625rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-dialog-tittel {
    font: normal 2rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-dialog-tittel {
    font: normal 1.75rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}
.skjema-dialog-tittel {
  color: rgb(38, 32, 69);
  margin: 0 40px 24px 0;
}
.skjema-dialog-tittel:focus {
  outline: none;
}
.skjema-dialog-tekst {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-dialog-tekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-dialog-tekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-dialog-tekst {
  margin: 0 0 24px 0;
}
.skjema-dialog .skjema-felt {
  margin: 0 0 16px 0;
}
.skjema-dialog .skjema-feilmelding {
  margin: 0 0 24px 0;
}
.skjema-dialog-handlinger {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}
.skjema-dialog-primær {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-dialog-primær:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-dialog-primær {
  background-color: rgb(82, 30, 255);
}
.skjema-dialog-primær:hover, .skjema-dialog-primær:active {
  background-color: rgb(50, 55, 141);
}
.skjema-dialog-primær {
  border: none;
}
.skjema-dialog-primær:disabled {
  cursor: default;
  opacity: 0.6;
}
.skjema-dialog-sekundær {
  display: inline-block;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-weight: unset;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
}
.skjema-dialog-sekundær:focus {
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}
.skjema-dialog-sekundær {
  color: rgb(38, 32, 69);
  background-color: rgb(246, 247, 252);
  border: 1px solid rgb(187, 184, 201);
}
.skjema-dialog-sekundær:focus {
  border: 1px solid rgb(187, 184, 201);
}
.skjema-dialog-sekundær:hover, .skjema-dialog-sekundær:active {
  color: rgb(38, 32, 69);
  background-color: rgb(230, 230, 237);
}
.skjema-dialog-sekundær:disabled {
  cursor: default;
  opacity: 0.6;
}

.skjema-navigasjon {
  grid-column: 1;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 320px;
  position: sticky;
  top: 66px;
  max-height: calc(100vh - 66px);
  overflow-y: auto;
  padding: 16px 0;
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
.skjema-navigasjon:focus {
  outline: none;
}
.skjema-navigasjon:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
.skjema-navigasjon-tilbake {
  display: inline-block;
  margin-bottom: 24px;
  color: rgb(38, 32, 69);
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
.skjema-navigasjon-tilbake::before {
  content: "← ";
}
.skjema-navigasjon-tilbake:hover {
  color: rgb(82, 30, 255);
  text-decoration: none;
}
.skjema-navigasjon-tilbake:focus-visible {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
}
.skjema-navigasjon-liste, .skjema-navigasjon-underliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.skjema-navigasjon-underliste {
  margin: 0 0 8px 16px;
}
.skjema-navigasjon-lenke {
  display: block;
  padding: 8px 0;
  color: rgb(38, 32, 69);
  text-decoration: none;
}
.skjema-navigasjon-lenke:hover {
  text-decoration: underline;
}
.skjema-navigasjon-lenke:focus-visible {
  color: rgb(82, 30, 255);
  outline: rgb(82, 30, 255) solid 2px;
  outline-offset: 3px;
  text-decoration: none;
  border: none;
}
.skjema-navigasjon-lenke--aktiv {
  font-family: "graphik-medium", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 1024px) {
  .skjema-navigasjon {
    position: static;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin-top: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgb(230, 230, 237);
  }
}

.skjema-toppstripe {
  position: sticky;
  top: 0;
  z-index: 5;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: max(40px, (100% - 1488px) / 2 + 40px) calc(max(30%, 50% - 424px) - max(40px, (100% - 1488px) / 2 + 40px)) 64px minmax(0, 672px) minmax(max-content, 1fr) max(40px, (100% - 1488px) / 2 + 40px);
  align-items: center;
  min-height: 66px;
  padding-block: 8px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(230, 230, 237);
}
@media all and (min-width: 1025px) and (max-width: 1280px) {
  .skjema-toppstripe {
    grid-template-columns: max(40px, (100% - 1488px) / 2 + 40px) calc(max(30%, 50% - 424px) - max(40px, (100% - 1488px) / 2 + 40px)) 24px minmax(0, 560px) minmax(max-content, 1fr) max(40px, (100% - 1488px) / 2 + 40px);
  }
}
.skjema-toppstripe > .skjema-toppstripe-navn {
  grid-column: 2;
  grid-row: 1;
}
.skjema-toppstripe > .skjema-brodsmule,
.skjema-toppstripe > .skjema-lagringsstatus {
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-toppstripe > .skjema-brodsmule,
  .skjema-toppstripe > .skjema-lagringsstatus {
    font-size: 1.125rem;
  }
}
@media all and (max-width: 767px) {
  .skjema-toppstripe > .skjema-brodsmule,
  .skjema-toppstripe > .skjema-lagringsstatus {
    font-size: 1rem;
  }
}
.skjema-toppstripe > .skjema-brodsmule,
.skjema-toppstripe > .skjema-lagringsstatus {
  margin: 0;
}
.skjema-toppstripe > .skjema-brodsmule {
  grid-column: 4;
  grid-row: 1;
  min-height: 0;
  margin-right: 8px;
  color: rgb(38, 32, 69);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skjema-toppstripe > .skjema-lagringsstatus {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(81, 84, 123);
  white-space: nowrap;
}
@media all and (max-width: 1024px) {
  .skjema-toppstripe {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 0;
    min-height: 84px;
    padding-block: 6px;
    padding-inline: max(16px, (100% - 800px) / 2 + 16px);
  }
  .skjema-toppstripe > .skjema-toppstripe-navn {
    grid-column: 1;
  }
  .skjema-toppstripe > .skjema-brodsmule {
    grid-column: 1/-1;
    grid-row: 2;
    margin-right: 0;
  }
  .skjema-toppstripe > .skjema-lagringsstatus {
    grid-column: 2;
  }
}
.skjema-toppstripe-navn {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.skjema-soknadsnavn {
  font: normal 1.3125rem/160% "graphik", Arial, Helvetica, sans-serif;
  color: rgb(38, 32, 69);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media all and (max-width: 2881px) {
  .skjema-soknadsnavn {
    font-size: 1.125rem;
  }
}
@media all and (max-width: 1024px) {
  .skjema-soknadsnavn {
    font: normal 1.3125rem/160% "graphik-medium", Arial, Helvetica, sans-serif;
  }
}

.skjema-soknadsnavn-endre {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: rgb(38, 32, 69);
}
.skjema-soknadsnavn-endre::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask: url(../img/icons/icon_edit-underline.svg) no-repeat center/contain;
}
.skjema-soknadsnavn-endre:hover {
  background: rgb(230, 230, 237);
}
.skjema-soknadsnavn-endre:focus-visible {
  box-shadow: 0 0 0 2px rgb(66, 139, 255);
  outline: none;
}
@media (forced-colors: active) {
  .skjema-soknadsnavn-endre::before {
    background-color: ButtonText;
  }
}

.skjema-lagringsstatus-hake {
  flex: 0 0 auto;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url(../img/icons/icon_check-circle.svg) no-repeat center/contain;
}
@media (forced-colors: active) {
  .skjema-lagringsstatus-hake {
    background-color: CanvasText;
  }
}

.skjema-navnedialog .skjema-felt > .skjema-felt-ledetekst {
  margin-top: 0;
}
.skjema-navnedialog .skjema-felt-hjelpetekst {
  margin: 0 0 8px 0;
}
.skjema-navnedialog .skjema-tegnteller {
  margin: 4px 0 0 0;
}
.skjema-navnedialog .skjema-feilmelding {
  margin: 8px 0 0 0;
}

.skjema-innhold [id] {
  scroll-margin-top: calc(66px + 16px);
}
@media all and (max-width: 1024px) {
  .skjema-innhold [id] {
    scroll-margin-top: calc(84px + 16px);
  }
}

.skjema-brodsmule {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-brodsmule {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-brodsmule {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-brodsmule {
  color: rgb(81, 84, 123);
  min-height: 1.6em;
  margin: 0;
}

.skjema-snarveier {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.skjema-snarvei {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skjema-snarvei:focus {
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  padding: 8px 16px;
  background: rgb(255, 255, 255);
  color: rgb(38, 32, 69);
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 6px rgb(66, 139, 255);
  outline: none;
}

/*@import "react-dates/lib/css/_datepicker.css";*/

/*# sourceMappingURL=main.css.map */