@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. Fila lastes ikke ned før noen bruker den. (Fhi.Metadata-kdx2g) */
@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;
}

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);
}

.is-tabbing .checkbox__input:focus + .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;
}

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

body:not(.is-tabbing) button:focus,
body:not(.is-tabbing) button:focus + span,
body:not(.is-tabbing) a:focus,
body:not(.is-tabbing) a:focus + 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;
}
body.is-tabbing .lottie-animation-play-button:focus .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__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: 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);
  }
}
.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);
  }
}

body:not(.is-tabbing) .current .page-tabs__tab {
  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);
}
body:not(.is-tabbing) .hd-button--back-to-top:focus {
  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;
}
.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);
}
body:not(.is-tabbing) .button--light-grey:focus {
  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);
}
body:not(.is-tabbing) .hd-button__round:focus .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);
}
.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);
}

/* 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;
}

.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 {
    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 {
  display: flex;
  align-items: center;
  height: 100%;
}

.global-search {
  position: relative;
}

.global-search-modal {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(38, 32, 69);
  z-index: 999;
  color: rgb(255, 255, 255);
}
.global-search-modal__content {
  display: flex;
  flex-direction: column;
  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;
}

.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);
}

/* 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 {
  content: "";
  display: inline-block;
  height: 1.5rem;
  margin-right: 8px;
  position: relative;
  width: 1.5rem;
}

/* Modifikatorene må stå etter `.icon` over. Begge er (0,1,0), så kilderekkefølgen avgjør, og fire
   linjer i feil rekkefølge gjorde at `.icon--nomargin` ikke gjorde noe for noen konsument av arket.
   (Fhi.Metadata-p1ekn) */
.icon--nomargin {
  margin: 0;
}

/* Samme feil, samme retting: `.icon--right` sto i `base/_icons.scss` og tapte for kopien av `.icon`
   over. Målt på rigg før rettinga: alle seks konsumentene i sidetoppen regnet ut
   `margin-right: 8px; margin-left: 8px` der modifikatoren ber om 0 og 8. (Fhi.Metadata-suiv3) */
.icon--right {
  margin-right: 0;
  margin-left: 8px;
}

.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;
  }
}
main.content-container .register-page a:focus:not(:focus-visible),
main#maincontent a:focus:not(:focus-visible),
html body main a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

main.content-container .register-page a:focus-visible,
main#maincontent a:focus-visible {
  outline: 1.4px solid #521eff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

html body main a:focus-visible {
  outline: 2px solid #521eff !important;
  outline-offset: 3px !important;
}

.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;
  }
}
.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 {
  padding-top: 62px;
}

.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;
}
.is-tabbing .hero-section-media__video--internal:focus {
  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;
}

.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);
}
.is-tabbing .hd-checkbox.hd-checkbox--default.hd-checkbox-size--default .hd-checkbox__input:focus + .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);
}
.is-tabbing .hd-checkbox.hd-checkbox--default.hd-checkbox-size--22 .hd-checkbox__input:focus + .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);
}
.is-tabbing .hd-checkbox.hd-checkbox--default.hd-checkbox-size--24 .hd-checkbox__input:focus + .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);
}
.is-tabbing .hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--default .hd-checkbox__input:focus + .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);
}
.is-tabbing .hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--22 .hd-checkbox__input:focus + .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);
}
.is-tabbing .hd-checkbox.hd-checkbox--inverted.hd-checkbox-size--24 .hd-checkbox__input:focus + .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);
}

.is-tabbing .form-control__input:focus + .form-control__radio-icon,
.is-tabbing .form-control__input:focus + .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. Georgi 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. (Fhi.Metadata-l9l2n.34)

   $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.
   (Robin, 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. Fhi.Metadata-l9l2n.86 la et `:not(.munin-explorer-switch)` her mot
   at den skulle beholde husets knappeklasser, og det gjør den ikke — leddet er fjernet i
   Fhi.Metadata-l9l2n.100. */
.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> (Fhi.Metadata-5ghur).
   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 under Fhi.Metadata-5ghur 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;
}

/* ---- 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;
}

/* Verktøyrada i panelet: Utvid alle, Skjul alle og Nivålinjer. Egen beholder og ikke tre knapper 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. Ikke `flex-wrap: wrap`: knappene krymper og
   bryter sin egen etikett i stedet, så rada tåler en lengre oversettelse. */
.munin-explorer-filters__toolbar {
  align-items: center;
  display: flex;
  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. (Fhi.Metadata-l9l2n.78)

   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 (Fhi.Metadata-l9l2n.100).
   Fhi.Metadata-l9l2n.86 la et `:not(.munin-explorer-switch)` her 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: 0;
  text-decoration: underline;
}

/* Kanten fra Fhi.Metadata-l9l2n.34 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 — Georgi 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);
}

/* 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. Fhi.Metadata-l9l2n.66 kjøpte den trykte flata — $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 felle 4 i saken: l9l2n.66 rettet nettopp 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 (Fhi.Metadata-74qb6). 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 av Fhi.Metadata-8pue9 — 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 (Fhi.Metadata-8pue9).
   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 si eiga sak
   (Fhi.Metadata-74qb6). 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 (Fhi.Metadata-l9l2n.96). 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;
}

.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 {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 2px;
}

.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;
}

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

/* Tallet i parentes etter fasettverdien — hvor mange treff verdien har. Fhi.Metadata-cgk85 ga det
   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 (Fhi.Metadata-kboon, 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;
}

/* «2 valgt» på fasettlinja, så en foldet fasett sier at noe inni den siler lista. Dette er
   stildelen; markupen kommer med Fhi.Metadata-l9l2n.53 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 (Fhi.Metadata-l9l2n.73). 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 er Fhi.Metadata-l9l2n.104 og 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 (Fhi.Metadata-wcbxi). 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);
}

/* 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 — Fhi.Metadata-co3sf byttet ut <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 (Fhi.Metadata-2er4n). 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;
  }
}
/* ---- 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 med Fhi.Metadata-ofoyw 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 fra
   Fhi.Metadata-l9l2n.78. 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 .78, 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. (Fhi.Metadata-l9l2n.89) */
.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: 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 fra Fhi.Metadata-caf5a 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. Fhi.Metadata-mpx2p var nøyaktig
   denne feilen én kontroll unna: 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 Fhi.Metadata-l9l2n.48 fant 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 det er flata som bærer den — ikke ringen. Ringen
   kunne ikke båret den, av to grunner, og den andre er målt på verten. Først: $focus måler 2,91:1
   mot $grey20 og hadde stått under 3:1 som eneste fokusmarkør. Så, verre: `base/_global.scss:565` har
   `body:not(.is-tabbing) button:focus { outline: none !important; box-shadow: none !important }`,
   og helsedata setter ALDRI `is-tabbing` — målt 2026-09-09 på test-1-opt med en ekte Tab: kroppen
   står på «blazorcomponentpage» og blir stående der. En fokusert `hd-button-square` på den sida
   regner ut `outline: none` og `box-shadow: none` mens `:focus-visible` er sann. Ringen på
   `__name` og på `__clear` er altså allerede visket ut der, og `!important` er ikke noe en regel
   her kan slå. Flateskiftet på 6,38:1 er derimot `background-color` og `color`, som den regelen
   ikke rører, så det står. Ringen blir stående med fordi den virker på en vert som setter
   `is-tabbing` — den er gratis, ikke bærende. Et hover uten tastaturmotstykke finnes bare for musa
   (WCAG 2.4.7), samme omsorg radhoveret i `_kilder.scss` tar. 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 Fhi.Metadata-l9l2n.87 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. Fhi.Metadata-l9l2n.66 rettet 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
   Fhi.Metadata-l9l2n.66 målte og kjøpte, $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);
}

/* `:focus-visible` DELER HELE HOVERTILSTANDEN, og det er flata som bærer den — ikke ringen. Samme
   behandling og samme begrunnelse som lukkekontrollen på filterkapselen i `_filters.scss`:
   `base/_global.scss` har `body:not(.is-tabbing) button:focus { outline: none !important }`, og
   helsedata setter aldri `is-tabbing`, så en ring er allerede visket ut på verten. Flateskiftet er
   `background-color` og `color`, som den regelen ikke rører. Ringen blir stående med fordi den
   virker på en vert som setter `is-tabbing` — den er gratis, ikke bærende. */
.munin-explorer .munin-explorer-switch:hover,
.munin-explorer .munin-explorer-switch:focus-visible {
  background-color: rgb(239, 240, 250);
  color: rgb(38, 32, 69);
}

.munin-explorer .munin-explorer-switch:focus-visible {
  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);
}

@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 RCL PR #131 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;
}

/* ---- 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.

   Utforskeren følger sidas egen innholdsbredde. Dette er .page-container fra layout/_framework,
   gjentatt fordi seksjonen ikke kan få klassen påført. Bredden deles gjennom
   $page-container-width og luften gjennom $ws-m, så de to kan ikke drive fra hverandre.

   Bredden skal ikke ned på .content-container sine 1200px. Fhi.Metadata-plilx viser hva det
   gjør: resultatkolonnen falt til 694px og mistet fire kolonner. Med 1488 blir den
   1488 - 48 - 384 - 24 = 1032px. */
.munin-explorer {
  max-width: 1488px;
  width: 100%;
  padding: 0 24px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  /* Kolonneoppsettet deler bredden beholderen over gir det: taket minus luften på sidene. */
  .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;
  }
  .munin-explorer > h2 {
    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;
  }
  .munin-explorer > *:not(h2):not(form):not(.munin-explorer-filters):not(.munin-explorer-drilldown) {
    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;
}

/* 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 (Fhi.Metadata-l9l2n.99). Fasettpanelet
   byttet i Fhi.Metadata-l9l2n.96 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. Den virker her, i motsetning til på knappene: `_global.scss:565`
   visker ut `button:focus` og `a:focus` med `!important` på en vert uten `is-tabbing`, og
   helsedata setter den aldri — men den regelen nevner ikke <summary>. Målt på localhost:
   `outline: rgb(66, 139, 255) solid 2px` på en fokusert gren. */
.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 and period bar ----

   The period bar is ours to name: neither explorer's stylesheet has one. The group heading is
   not. 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. Per Robin's decision of 2026-08-31 the eyebrow
   comes off and the heading inherits headline-xxs and the h1..h6 house colour, as Explorer
   PR #157 already did in the samples.

   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 period. The dates are the information; the bar is the illustration, so a host that styles
   neither still shows the period as words. */
.munin-explorer-period {
  margin-bottom: 8px;
}

.munin-explorer-period__range {
  margin: 0 0 6px;
}

.munin-explorer-period__track {
  height: 8px;
  border-radius: 999px;
  background: rgb(230, 230, 237);
  overflow: hidden;
  max-width: 420px;
}

.munin-explorer-period__fill {
  height: 100%;
  border-radius: 999px;
  background: rgb(82, 30, 255);
}

/* A period with no end is still running, which is a different fact from a short one — Runa marks
   it with colour rather than leaving it to look like a full bar that happens to be full. */
.munin-explorer-period__track--ongoing .munin-explorer-period__fill {
  background: #1f8a4c;
}

/* 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 (Fhi.Metadata-l1f7x). Den kledde × -en
   som tømte hierarkiet; Explorer PR #277 (Fhi.Metadata-oj286) fjerna sjølve 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 drill-ins are the
   same shape — a name block over a main column and a sidebar — 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.

   `datasamling` arrived last, with RCL PR #131, and had no rule anywhere until this change: its
   aside rendered at the full 1703px instead of 320px, with no padding, no radius and no
   background, which is what made the drill-in beside the kilde one look like a different product.

   The name is rendered at whatever heading level keeps the host page's outline unbroken, so it is
   matched by level rather than by element — and its top margin comes off, because the drilldown
   above already supplies the gap and `.headline` would add a second one. */
.munin-explorer-kilde > * > :is(h2, h3, h4, h5, h6):first-child,
.munin-explorer-whole > * > :is(h2, h3, h4, h5, h6):first-child,
.munin-explorer-datasamling > * > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.munin-explorer-kilde__header, .munin-explorer-whole__header, .munin-explorer-datasamling__header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgb(230, 230, 237);
}

/* 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;
}

/* The kildetype is a category, not part of the name. The explorer package carried this as a
   `tag` class for months on the assumption that helsedata defined one; measured against their
   compiled stylesheets on 2026-08-21, no such class exists in any of their seven bundles or in
   Stiler. Their own badges are `taglist`/`taglistitem` and are styled only inside
   `.listcontainer .listitemholder .taglist`, which never matches this markup. So the badge has
   never had a rule anywhere, and this is its first. */
.munin-explorer-kilde__kildetype {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(239, 240, 250);
  color: rgb(81, 84, 123);
  font-size: 0.8125rem;
}

.munin-explorer-kilde__description,
.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: 65ch;
}

/* Main column and sidebar, and only once there is room for two of them. Below 1024px the aside
   returns to the flow under the main column, which is where a phone wants it — the same
   threshold and the same reasoning as the filter panel above. */
.munin-explorer-kilde__body, .munin-explorer-whole__body, .munin-explorer-datasamling__body {
  display: grid;
  gap: 24px;
}

@media (min-width: 1024px) {
  .munin-explorer-kilde__body, .munin-explorer-whole__body, .munin-explorer-datasamling__body {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}
/* 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 sidebar
   off the right edge rather than shrink. Same trap the filter panel meets, same fix. */
.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: 65ch;
}

/* Panelet sto på $grey10, som er nøyaktig den sidebunnen `body` selv har (base/_global.scss:45) —
   1.00:1 mot sin egen bakgrunn. Det hadde et korts luft og et korts 4px-radius og ingenting som
   skilte det fra siden; radiusen var usynlig fordi ingenting tegnet den opp.

   KANTEN ER DET SOM SKILLER, og bare den. Bunnen blir bevisst liggende på sidebunnen: utforskeren
   står på sidebunnen og ikke på et kort (_buttons.scss:16), så panelet skal få en kant i stedet
   for en ny bunn. Bunnen er derfor ikke et skillemiddel her — den måler 1.00:1 mot siden og holder
   bare panelet ugjennomsiktig. Det lar teksten stå urørt, $dark 14.28:1 og $grey60 6.76:1 som før,
   så byttet l9l2n.48 avviste $grey50 for — separasjon kjøpt med dårligere tekst — ikke kan oppstå.

   Hvit bunn ble målt og forkastet: hvit mot $grey10 er 1.07:1, samme par som _kilder.scss:42 alt
   har kalt «for svakt til å bli sett», bare speilvendt. $grey20 er 1.06:1 og eier dessuten den
   utvidede datasamling-ruta fra 39197, så den tonen ville sluttet å bety noe.

   Samme form som `.munin-explorer-codes` (_kodeverk.scss:44), som står på den samme sidebunnen:
   1px $grey30 og radius 4px. $grey30 gir 1.16:1 mot $grey10, over de 1.13:1 radhoveret ble målt
   god på. $grey40 (1.82:1) er tokenet for noe som står på FLERE bunner (_kodeverk.scss:194);
   denne asiden står bare på én — den finnes verken i den utvidede raden eller i en hoveret rad,
   begge deler sjekket i KildeSearch-markupen — og to ulike grå kanter på samme side ville sagt at
   boksene er ulike slags ting. Ingen skygge: hver box-shadow i repoet er en fokusring, så en
   skygge her ville innført et nytt høydespråk for tre paneler. */
.munin-explorer-kilde__aside, .munin-explorer-whole__aside, .munin-explorer-datasamling__aside {
  padding: 16px;
  border: 1px solid rgb(230, 230, 237);
  border-radius: 4px;
  background: rgb(246, 247, 252);
}

/* Kildeinformasjon wears helsedata's `munin-explorer-meta__grid`, which is two `1fr` tracks — and
   `1fr` floors at min-content, so once the aside is the 320px sidebar the Lovverk prose sized the
   tracks to 165px + 224px inside 288px of content box and carried 109px out past the right edge of
   the panel. One track at this width, and `minmax(0, 1fr)` so it can actually shrink to it. Same
   trap as the main column above, and measured on the helsedata mount at 1718px.

   SCOPED TO THE ASIDE, not fixed on the base rule. The same class in the main column, and in the
   variable explorer's own panel, sits far above its min-content floor and must keep its two
   tracks — measured at 1718px they are 667px and 579px respectively, and neither moves. Changing
   the base rule in `_results` would also have to fight the `__grid-1`/`__grid-2` single-column
   variants, which come later there at equal specificity and would silently lose their one track.

   Only the wide window changes. `_results` already collapses this grid to a single `auto` track
   under `@media (max-width: 1280px)`, which is why the sidebar looks right on a laptop and wrong
   on a monitor — and why nobody caught it at a normal window size.

   The datasamling aside joins the rule here rather than when the rule was written, and that is the
   whole of the coupling: it was left out of PR 39026 on purpose, because nothing dressed
   `munin-explorer-datasamling__*` then. Its aside was the full 1703px, its two tracks sat at
   839.5px each — nowhere near their min-content floor — and collapsing them to one would have cost
   two comfortable columns to fix a spill that did not exist. Giving it the 320px sidebar above
   hands it the identical 109px spill, so the two changes cannot be separated. */
.munin-explorer-kilde__aside .munin-explorer-meta__grid,
.munin-explorer-whole__aside .munin-explorer-meta__grid,
.munin-explorer-datasamling__aside .munin-explorer-meta__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* 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 og Fhi.Metadata-oq40w. */
.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 (Fhi.Metadata-wtz80), 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;
}

/* ---- 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
   (Fhi.Metadata-iu8wa), 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: 65ch;
  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;
}

/* ---- 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;
}

.munin-explorer-kodeverk__name {
  margin: 0;
  font-weight: 600;
}

/* 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;
}

/* 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. Fhi.Metadata-e3e2d klipper fyllet 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__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 kildetype tag makes. */
.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;
}

.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. (Fhi.Metadata-l9l2n.97) */
.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;
}

.munin-explorer-kilder thead th {
  background: rgb(246, 247, 252);
  color: rgb(81, 84, 123);
  font-weight: 600;
}

/* 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 (Fhi.Metadata-caf5a). 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å. Fhi.Metadata-l9l2n.55 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 (Fhi.Metadata-b3brc).

   Regelen er den ene halvparten av rettingen og markupen den andre. Fhi.Munin.Explorer #194 er
   merget og 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 siden Fhi.Metadata-l9l2n.50. 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 Fhi.Munin.Explorer med Fhi.Metadata-l9l2n.103, 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. */
@container munin-explorer-kilder (min-width: 467px) {
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select),
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-5:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-4:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-6:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-5:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-7:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-6:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-8:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-7:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-9:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-8:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-10:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-9:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-11:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-10:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-12:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-11:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-13:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-12:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-14:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-13:not(:has(.munin-explorer-kilder__select)) > .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),
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)) {
    overflow-x: visible;
  }
  .munin-explorer-kilder-scroll--cols-15:has(.munin-explorer-kilder__select) > .munin-explorer-kilder > thead th,
  .munin-explorer-kilder-scroll--cols-14:not(:has(.munin-explorer-kilder__select)) > .munin-explorer-kilder > thead th {
    box-shadow: inset 0 -1px 0 rgb(230, 230, 237);
    position: sticky;
    top: var(--munin-explorer-sticky-top, 0);
  }
}
/* 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. (Fhi.Metadata-kdx2g) */
.munin-explorer-kilder .munin-explorer-kilder__count--zero {
  color: rgb(81, 84, 123);
  font-family: "graphik-light", Arial, Helvetica, sans-serif;
}

/* 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 Fhi.Metadata-5ghur 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 (Fhi.Metadata-kvgu7).

   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 fra Fhi.Metadata-caf5a 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 (Fhi.Metadata-s4es0).

   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 Fhi.Metadata-mq24y 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 Fhi.Metadata-ycv15. Den saken gjelder selve avkryssingsboksen - 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 ycv15 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 (Fhi.Metadata-mpx2p). */
/* LUFTA FØLGER GLYFEN. Da Fhi.Metadata-l9l2n.76 tok ikonet 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 det var ikke saken sitt ærend å gi tilbake det dzl6x nettopp kjøpte.
   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 fra dzl6x og er tatt ut igjen: `icon--nomargin` i markupen
   gjør jobben nå som Fhi.Metadata-p1ekn har rettet rekkefølgen de to reglene sto i inne i
   `pages/_healthregisterpage.scss`. 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 fra dzl6x 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.
   (Fhi.Metadata-l9l2n.76) */
.munin-explorer-kilder .munin-explorer-kilder__expand-icon {
  background-size: 1rem;
  height: 1rem;
  width: 1rem;
}

/* OPP/NED I STEDET FOR HØYRE/NED, og her er navnet ikke det samme som tegninga.

   Pakken skriver `icon-keyboard-arrow-right` på en foldet rad og `...-down` på en utfoldet. Saken
   ber om paret opp/ned, altså det en utvidbar rad konvensjonelt tegner: NED når den er foldet
   («dette åpner nedover») og OPP når den er åpen («dette lukker»). Komponenten gjør allerede
   nettopp dette ett sted til — kolonnevelgeren bytter mellom `icon-keyboard-arrow-down` lukket og
   `...-up` åpen — så retninga er husets egen og ikke funnet på her.

   FØLGEN ER AT KLASSENAVNET LYVER: `...-right` tegner nå ned, og `...-down` tegner opp. Det er
   presentasjon og bare det — saken eier ikke markupen, og et navnebytte må komme fra pakken. Den
   ærlige rettinga er at Fhi.Munin.Explorer skriver `-down`/`-up`; til den kommer, står kartet her,
   og det står her SAMLET slik at neste leser finner begge halvdelene på én gang.

   Hover-reglene under er de samme dzl6x la inn, med nye filer i samme par. Alle fire SVG-ene finnes
   i `img/icons/keyboard-arrow/` — `icon_up`, `icon_down` og begge `--blue` — sjekket før regelen
   ble skrevet, fordi et manglende `--blue` ville gitt en 404 på hover og ingen farge. */
.munin-explorer-kilder .munin-explorer-kilder__expand-icon.icon-keyboard-arrow-right {
  background-image: url(../img/icons/keyboard-arrow/icon_down.svg);
}

.munin-explorer-kilder .munin-explorer-kilder__expand-icon.icon-keyboard-arrow-down {
  background-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

/* Samme utveksling som variabelradene får i `_results.scss`: peker leseren på raden, blir
   chevronen blå. De to tabellene folder ut med samme ikon og skal svare likt på pekeren.
   Bare `:hover` — chevronen er `aria-hidden`, så tastaturet har ikke bruk for fargen, det har
   fokusringen over. Direkte barn hele veien, som radhoveret: datasamlingstabellen inne i panelet
   har sin egen tbody. */
.munin-explorer-kilder > tbody > tr:hover .munin-explorer-kilder__expand-icon.icon-keyboard-arrow-right {
  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-down {
  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 (Fhi.Metadata-941cy,
   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 mindre hode skiller ytre fra indre. */
.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;
}

/* ======================================================================
   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 Fhi.Metadata-xpv2x holdt regelen 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 står i samme rad som Kolonner og skal være like høy. Målt på riggen sto den
   på 22px mot knappens 44 — en naken <select> i sin egen naturlige høyde ved siden av en kontroll
   husets knappehøyde. Senterlinjene var alt i orden fra rada over; det er HØYDEN som ikke stemte,
   og en 22px kontroll er dessuten under trykkmålet på 24px (WCAG 2.5.5). (Fhi.Metadata-l9l2n.77)

   2.75rem er husets egen knappehøyde, den `hd-button-square` setter, så tallet er hentet og ikke
   funnet på. Samme verdi står på pagineringens <select>, som hadde nøyaktig samme feil én rad ned.

   (0,1,1) med elementet i selektoren. Regelen den må ligge over er den globale `select` i
   `components/_input`, som bærer element og ikke klasse - et bart klassenavn hadde tapt.

   MERK at bare høyden røres. `width`-reglene på `__actions` og `.dropdown-choicepicker` er de
   Fhi.Metadata-xpv2x holdt hendene av; den åpne kolonnemenyen måler fortsatt 290px. */
.munin-explorer-results__toolbar select {
  height: 2.75rem;
}

/* ...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.
   (Fhi.Metadata-l9l2n.77) */
.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;
}

.munin-explorer-header__actions .dropdown {
  width: 100%;
}

.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. (Fhi.Metadata-f6az7) */
  position: relative;
  z-index: 99;
}

/* The trigger right, where helsedata's own sits. Text alignment and not flex or an auto margin:
   `.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. (Fhi.Metadata-f6az7) */
.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. (Fhi.Metadata-f6az7) */
.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. (Fhi.Metadata-f6az7) */
.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. (Fhi.Metadata-f6az7) */
.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);
}

/* NED/OPP I STEDET FOR HØYRE/NED, nøyaktig samme utveksling som `_kilder` gjør for
   kildeutforskeren. Pakken skriver `icon-keyboard-arrow-right` på en foldet rad og `...-down` på
   en utfoldet; en utvidbar rad tegner konvensjonelt NED når den er foldet og OPP når den er åpen,
   og kildeutforskeren gjør det allerede etter Fhi.Metadata-l9l2n.76. De to utforskerne skal svare
   likt på det samme grepet.

   KLASSENAVNET LYVER ETTERPÅ: `...-right` tegner ned og `...-down` tegner opp. Det er presentasjon
   og bare det — markupen eies av `Fhi.Munin.Explorer`, og et navnebytte må komme derfra. Kartet
   står samlet her, som i `_kilder`, så neste leser finner begge halvdelene på én gang.

   Hviletilstand og hover må flyttes i samme åndedrag: står bare hviletilstanden om, spretter
   chevronen tilbake til høyre idet pekeren treffer raden. Alle fire SVG-ene finnes i
   `img/icons/keyboard-arrow/` — sjekket før regelen ble skrevet, fordi et manglende `--blue`
   ville gitt 404 og ingen farge på hover. (Fhi.Metadata-l9l2n.85) */
.munin-explorer-dataitem-main__expand-icon.icon-keyboard-arrow-right {
  background-image: url(../img/icons/keyboard-arrow/icon_down.svg);
}

.munin-explorer-dataitem-main__expand-icon.icon-keyboard-arrow-down {
  background-image: url(../img/icons/keyboard-arrow/icon_up.svg);
}

.munin-explorer-data-list__item__row:hover .munin-explorer-dataitem-main__expand-icon.icon-keyboard-arrow-right {
  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-down {
  background-image: url(../img/icons/keyboard-arrow/icon_up--blue.svg);
}

.munin-explorer-dataitem-header,
.munin-explorer-dataitem-main {
  align-items: center;
  display: flex;
  width: 100%;
}

.munin-explorer-dataitem-header {
  font-family: graphik-medium, Arial, Helvetica, sans-serif;
  height: 3rem;
  padding-left: 56px;
}

.munin-explorer-dataitem-header__button {
  align-items: center;
  display: flex;
  width: 100%;
}

.munin-explorer-dataitem-header__button:focus {
  box-shadow: 0 0 0 0 rgb(255, 255, 255), 0 0 0 3px rgb(66, 139, 255);
  z-index: 4;
}

.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;
}

.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;
  }
}
.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;
}

.munin-explorer-meta__tab button {
  border-bottom: 2px solid transparent;
  line-height: 1.5;
  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. */
/* ======================================================================
   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 form som Fhi.Metadata-b3brc, og med vilje samme
   ordlyd som søsterregelen `.munin-explorer-kilder-scroll` i _kilder.scss.

   Fhi.Munin.Explorer #199 er ÅPEN, ikke merget - i motsetning til #194, som søsteren kunne vise
   til som landet. 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 {
  overflow-x: auto;
}

.munin-explorer-list-scroll:focus-visible {
  outline: 2px solid rgb(66, 139, 255);
  outline-offset: 4px;
}

/* Listehodet blir stående, slik kildetabellens gjør. (Fhi.Metadata-l9l2n.79)

   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
   (Fhi.Metadata-gb06n) 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 Fhi.Metadata-l9l2n.64 beskrev for
   fasettverktøylinja. 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 Fhi.Munin.Explorer #199, pakkes lista 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;
}

/* ---- 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. (Fhi.Metadata-l9l2n.77) */
.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 Fhi.Metadata-ejcbi 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;
}

/* Etiketten bærer `.caption`, som er $font-m og trappes til $font-s over 2881px — altså 14px på et
   hvilket som helst vanlig vindu. Stiler kler `select` i `components/_input` med 1.125rem, 18px, så
   kontrollen sto fire piksler større enn sin egen etikett. Samme feil som beskrivelsen under
   delkildenavnet i PR 39076, og samme retting: kontrollen legges på etikettens eget trinn, og
   `responsiveCaption` framfor en fast verdi så de to trappes i takt.

   INGEN KANT, INGEN RADIUS, INGEN BAKGRUNN. `text-input-styles` ville vært det nærliggende, men den
   kanten er $grey40 — 1.94:1 mot hvitt — mens nettleserens egen select-kant ligger rundt 4.5:1. Å
   bytte den ut ville senket affordansen på en kontroll Stiler med vilje lar stå udekket. Farge,
   familie og fokusring kommer allerede fra `_input`.

   `height` er lagt til etterpå, og av samme grunn som sorteringsvelgeren i `_results` fikk sin: en
   naken <select> tar sin egen naturlige høyde, målt 20px, ved siden av Forrige og Neste på 44. Nå
   deler hele raden husets knappehøyde. Senterlinjene stemte fra før — `align-items: center` på
   `-content` gjør sitt — så det som manglet var høyden, ikke plasseringen. 20px er dessuten under
   trykkmålet på 24px, så dette er 2.5.5 og ikke bare geometri. (Fhi.Metadata-l9l2n.77) */
.munin-explorer-pagination-size select {
  font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .munin-explorer-pagination-size select {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .munin-explorer-pagination-size select {
    font: normal 0.8125rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.munin-explorer-pagination-size select {
  height: 2.75rem;
}

/* ======================================================================
   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;
}

/* 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;
}

.munin-explorer-dataitem-header {
  padding-left: 36px;
}

/* 16px, det samme målet Fhi.Metadata-l9l2n.76 ga kildeutforskerens chevron. Runas er en ANNEN
   knapp med et annet klassenavn — `__expand-icon` inne i `__name`, ikke `__expand-toggle` inne i
   `.munin-explorer-kilder` — så .76-regelen 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 .76.
   Fila lastes sist i komponenten med vilje, så tallet står her og ikke i `_results`.
   (Fhi.Metadata-l9l2n.85) */
.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;
}

.munin-explorer-dataitem-main__name,
.munin-explorer-dataitem-header__name {
  flex: 210 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: 212 1 0;
}

.munin-explorer-dataitem-main__theme,
.munin-explorer-dataitem-header__theme {
  flex: 160 1 0;
}

.munin-explorer-dataitem-main__dataType,
.munin-explorer-dataitem-header__dataType {
  flex: 114 1 0;
}

.munin-explorer-dataitem-main__status,
.munin-explorer-dataitem-header__status {
  flex: 98 1 0;
}

.munin-explorer-dataitem-main__period,
.munin-explorer-dataitem-header__period {
  flex: 150 1 0;
}

/* Ø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. */
.munin-explorer-dataitem-main__desiredData input {
  width: 100%;
}

/* 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 (Fhi.Metadata-l9l2n.106).

   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; every other value still clips. A cut date range reads as MISSING data -
   "aug 2021 - Paag..." - where a cut name or code still reads as the thing it is, only shorter,
   and that is why this column was the one reported (Fhi.Metadata-l9l2n.56).

   Only this column, deliberately. 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,
   and the widths are Fhi.Metadata-mdeu5's grid work. (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, and applies to exactly the
   columns this file lets wrap. Two lines at line-height 1.5 fit the 3.5rem row, so the row keeps
   the single height helsedata designed. */
.munin-explorer-dataitem-main__period .munin-explorer-dataitem-main__column__text {
  white-space: normal;
}

/* 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) minmax(0, 672px);
  column-gap: 64px;
  padding-block: calc(66px + 64px) 64px;
}
.skjema > * {
  grid-column: 2;
}
.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) minmax(0, 560px);
    column-gap: 24px;
  }
}
@media all and (max-width: 1024px) {
  .skjema {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 16px 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-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 .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 {
  font: normal 1.125rem/160% "graphik", Arial, Helvetica, sans-serif;
}
@media all and (max-width: 2881px) {
  .skjema-felt-underledetekst {
    font: normal 1rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
@media all and (max-width: 767px) {
  .skjema-felt-underledetekst {
    font: normal 0.875rem/160% "graphik", Arial, Helvetica, sans-serif;
  }
}
.skjema-felt-underledetekst {
  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-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: 0 0 32px 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(180, 0, 44);
  margin: 0 0 8px 0;
}
.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(81, 84, 123);
  background: rgb(246, 247, 252);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.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-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-alternativ {
  padding: 8px 16px;
  cursor: pointer;
}
.skjema-oppslag-alternativ--aktiv {
  background: rgb(246, 247, 252);
  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);
}

/*@import "react-dates/lib/css/_datepicker.css";*/

/*# sourceMappingURL=main.css.map */