/*
    Document   : override
    Created on : <date>
    Author     : <author>
    Description:
        This is where any of your application specific styles should be included
*/
button:focus-visible {
  border: 2px dotted rgb(21, 255, 76) !important;
}

a:focus-visible {
  border: 2px dotted rgb(21, 255, 76) !important;
}

/* .clickable {
  color: black;
  background-color: #CCCCCC;
  border: 2px dotted rgb(21, 255, 76) !important;
  }
  .clickable:focus {
  color: white;
  background-color: #333333;
  border: 2px dotted rgb(21, 255, 76) !important;
  } */
.bgcover {
  position: relative;
  /* z-index: 999; */

}

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

.endreEpostContainer {
  margin-top: -40px;
  float: right;
}

.endreEpost {

  font-size: 13px;

}

.buttonWidth {
  width: auto;
}

@media (max-width: 600px) {
  .buttonWidth {
    width: 100%;
  }
}

.demo-icon-bullet:before {
  content: "\2022";
}

.demo-icon {
  width: 15px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.demo-height-width {
  height: 8px;
  width: 100%;
}

.demo-vertical-align {
  vertical-align: left;
}

.button-blue {
  --blue-rgb-1: 49, 108, 172;
  --blue-rgb-2: 51, 128, 3;

  /* SOLID */

  /* solid enabled */
  --oj-button-solid-chrome-bg-color: rgb(var(--blue-rgb-1));
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-neutral-contrast);


  /* solid hover */
  --oj-button-solid-chrome-bg-color-hover: rgb(var(--blue-rgb-2));
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-neutral-contrast);


  /* solid active */
  --oj-button-solid-chrome-bg-color-active: rgb(var(--blue-rgb-1));
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-neutral-contrast);



  /* solid disabled 
        --oj-button-solid-chrome-bg-color-disabled:     rgba(var(--demo-purple-rgb-100), .1);
        --oj-button-solid-chrome-border-color-disabled: transparent;
        --oj-button-solid-chrome-text-color-disabled:   var(--oj-core-text-color-disabled); */
}


.button-white {
  --blue-rgb-1: 255, 255, 255;
  --blue-rgb-2: 240, 240, 240;

  /* SOLID */

  /* solid enabled */
  --oj-button-solid-chrome-bg-color: rgb(var(--blue-rgb-1));
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: var(--oj-core-text-color-primary);


  /* solid hover */
  --oj-button-solid-chrome-bg-color-hover: rgb(var(--blue-rgb-2));
  --oj-button-solid-chrome-border-color-hover: transparent;
  --oj-button-solid-chrome-text-color-hover: var(--oj-core-text-color-primary);


  /* solid active */
  --oj-button-solid-chrome-bg-color-active: rgb(var(--blue-rgb-1));
  --oj-button-solid-chrome-border-color-active: transparent;
  --oj-button-solid-chrome-text-color-active: var(--oj-core-text-color-primary);



  /* solid disabled 
        --oj-button-solid-chrome-bg-color-disabled:     rgba(var(--demo-purple-rgb-100), .1);
        --oj-button-solid-chrome-border-color-disabled: transparent;
        --oj-button-solid-chrome-text-color-disabled:   var(--oj-core-text-color-disabled); */
}

.button-white-c>button>span {
  background-color: white !important;
}

.button-white-c>button>span:hover {
  background-color: rgb(218, 218, 218) !important;
}

.button-white-c>button>span:active {
  background-color: rgb(184, 184, 184) !important;
}

.spragler-pattern {
  position: relative;
}

.country-width {
  width: 140px;
}

.country-width-readonly {
  width: 40px !important;
}

.spragler-pattern:before {
  content: '';
  /* Bakgrunnen skal aldri fange klikk (F23: dekket «Trekk søknad») */
  pointer-events: none;
  mix-blend-mode: initial;
  filter: opacity(0.08);
  background-color: #F7F9FA;
  background-image: url("images/spragler.webp") !important;
  /* Dempet fra 0.5 (Thomas 09.10: roligere bakgrunn bak kortene) */
  opacity: 0.2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: 500px 500px;
}

.linjer-pattern {
  position: relative;
}


.linjer-pattern:before {
  content: '';
  /* Bakgrunnen skal aldri fange klikk (F23: dekket «Trekk søknad») */
  pointer-events: none;
  mix-blend-mode: initial;
  filter: opacity(0.08);
  background-color: #fbf8f9;
  background-image: url("images/linjer.png") !important;
  opacity: 0.2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: 500px 500px;
}

.fristUtlopt-red {
  color: red;
}

.filepickerDescriptionIcon {
  min-width: 90px !important;
  min-height: 90px !important;
  height: 90px !important;
}

.filepickerBackground_danger>div {
  background-color: RGB(var(--oj-palette-danger-rgb-30)) !important;
}

.filepickerBackground_success {
  background-color: rgb(var(--oj-palette-success-rgb-10));
}

.close-ny_popup1 {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding-right: 10px;
}

.ny_popup1 {
  display: block;
  position: absolute;
  width: 300px;
  height: fit-content;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 999;
  opacity: 0;
  /* Set initial opacity to 0 */
  transition: opacity 0.9s;
  /* Add a transition for the opacity property */
}

.ny_popup1-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Foreldremodus: «Søker for: …» i topplinjen ved brukermenyen. Skjult til
   knockout har bundet siden, ellers blinker den før innlogging er kjent. */
.soker-kontekst {
  display: none;
  min-width: 0;
  padding-right: 8px;
  box-sizing: border-box;
}

.soker-kontekst.soker-kontekst-vis {
  display: flex;
}

.soker-kontekst-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 0 2px 0 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--oj-palette-success-rgb-40));
  background-color: rgb(var(--oj-palette-success-rgb-10));
  font-size: 0.875rem;
}

.soker-kontekst-tekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Smal skjerm: bare navnet, ledeteksten ligger i title. */
@media (max-width: 767px) {
  .soker-kontekst-ledetekst {
    display: none;
  }
  .soker-kontekst-tekst {
    max-width: 30vw;
  }
}

/* Startsiden «Hvem søker du for?» */
.start-innhold {
  padding: 16px;
}

.start-kort {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

.start-kort > * {
  flex: 1 1 auto;
  min-width: 0;
}

.start-kort-rad {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  text-align: start;
}

.start-kort-ikon {
  flex: 0 0 auto;
  width: 28px;
  font-size: 22px;
  text-align: center;
  color: rgb(var(--oj-palette-success-rgb-100));
}

.start-kort-tekst {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.start-kort-merke {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: rgb(var(--oj-palette-success-rgb-10));
  border: 1px solid rgb(var(--oj-palette-success-rgb-40));
}

.start-kort-pil {
  flex: 0 0 auto;
  color: var(--oj-core-text-color-secondary);
}

.start-resultat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.start-resultat-ikon {
  flex: 0 0 auto;
  font-size: 24px;
  color: rgb(var(--oj-palette-success-rgb-100));
}

.start-varsel .fas {
  color: var(--oj-core-text-color-secondary);
}

/* Mine koblinger */
.start-koblinger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-kobling {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--oj-core-divider-color);
}

.start-kobling .start-kort-merke {
  margin-inline-start: 8px;
}

/* Mens byttet av søker pågår */
.start-bytter .start-kort {
  opacity: 0.6;
  pointer-events: none;
}

/* Fokus settes med script når dialogsteget byttes — ingen ramme rundt alt */
.start-dialog-innhold:focus {
  outline: none;
}

/* Invitasjon av den andre forelderen */
.start-inv-knapper {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: -4px 0 8px;
}

.start-inv-barn {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}

.start-inv-valg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.start-inv-valg input {
  width: 18px;
  height: 18px;
}

.start-inv-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Personalia (Thomas 09.10): nøytrale kort, grønt bare for status og
   søkerens navn ─────────────────────────────────────────────────────────── */
:root {
  --pers-gronn: #4c825c;        /* søkerens navn (identitet) */
  --pers-status-gronn: #28734a; /* bekreftet / fullført */
  --pers-status-gronn-lys: #eaf5ed;
  --pers-gul-lys: #fff4dc;
  --pers-gul-tekst: #7a5200;
  --pers-tittel: #25313a;
  --pers-tekst: #263238;
  --pers-etikett: #66717a;
  --pers-linje: #e2e8e5;
  --pers-ramme: #e5e9ed;
  --pers-noytral-lys: #eef1f3;
}

.pers-kort {
  position: relative;
  z-index: 1;
  border: 1px solid var(--pers-ramme) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
  overflow: hidden;
  background-color: #fff;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem !important;
}

.kort-topp {
  background-color: #fff;
  padding: 0.75rem 1rem;
  min-height: 3rem;
}

/* Tynn nøytral linje mellom header og innhold (Thomas 09.10) */
.kort-stripe-linje {
  height: 1px;
  background: var(--pers-linje);
}

.kort-overtittel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oj-core-text-color-secondary, #6b6f73);
}

h2.kort-tittel {
  margin: 0;
}

.pers-portrett {
  object-fit: cover;
  width: 3.5rem;
  height: 3.5rem;
}

/* Infotekst som del av headeren (over stripen) */
.kort-topp-info {
  background-color: #fff;
  padding: 0 1rem 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--oj-core-text-color-secondary, #4f5357);
}

.kort-topp-info + .kort-topp-info {
  padding-top: 0;
}

.kort-tittel {
  color: var(--pers-tittel);
  font-weight: 600;
  font-size: 1.125rem;
}

/* Søkerens navn er det eneste grønne i layouten (identitetsmarkør) */
.kort-tittel.kort-tittel-navn {
  color: var(--pers-gronn);
}

.pers-topplinje {
  padding: 1rem 1rem 0.25rem 1rem;
}

.pers-initialer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  margin-right: 0.75rem;
  background-color: var(--pers-noytral-lys);
  color: var(--pers-tittel);
  font-weight: 600;
  font-size: 1rem;
}

.pers-merker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.pers-merke {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.pers-merke-ok {
  background-color: var(--pers-status-gronn-lys);
  color: var(--pers-status-gronn);
}

/* «Deg» er informasjon, ikke en status */
.pers-merke-noytral {
  background-color: var(--pers-noytral-lys);
  color: #4a555e;
}

.pers-merke-advarsel {
  background-color: var(--pers-gul-lys);
  color: var(--pers-gul-tekst);
}

.pers-mellomtittel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oj-core-text-color-secondary, #6b6f73);
  border-bottom: 1px solid #eef0f1;
  padding-bottom: 0.25rem;
  margin-top: 0.75rem;
}

.pers-mellomtittel-elev {
  margin: 0.75rem 1rem 0.25rem 1rem;
}

.pers-mellomtittel-frittstaaende {
  margin: 0.5rem 0.5rem 0.25rem 0.5rem;
}

/* Lesemodus: små grå ledetekster, verdien som vanlig tekst */
.pers-kort oj-c-form-layout[readonly] label,
.pers-kort oj-c-form-layout[readonly] .oj-label {
  color: var(--pers-etikett) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

.pers-kort {
  color: var(--pers-tekst);
}

/* Informasjon fra skolen: kan skjules og åpnes igjen */
/* position/z-index: bakgrunnsmønsteret (:before) skal ikke skinne gjennom */
.pers-info {
  position: relative;
  z-index: 1;
  background-color: #eef5fb;
  border: 1px solid #d6e6f3;
  border-radius: 12px;
  padding: 0.25rem 0.75rem;
  margin-top: 0.75rem;
}

.pers-info-ikon {
  color: #2a6496;
  margin-right: 0.5rem;
}

.pers-info-tekst {
  padding: 0 0.5rem 0.75rem 1.75rem;
}

/* Luft mellom skjemaseksjonene (navn / kontakt / adresse) uten mellomtitler */
.pers-kort oj-c-form-layout + oj-c-form-layout {
  display: block;
  margin-top: 1rem;
}

/* Endremodus: hvitt kort med tynn ramme i merkefargen (Thomas 09.10) */
.pers-kort.pers-kort-endre {
  border-color: var(--pers-gronn) !important;
  box-shadow: 0 0 0 1px var(--pers-gronn), 0 1px 3px rgba(0, 0, 0, .06);
}
/* Neste-knappen høyrestilt under kortene, uten panel */
.pers-neste {
  display: flex;
  justify-content: flex-end;
  padding: .5rem 0 1rem;
}

/* ── Søknad (Thomas 09.10): samme kort som Personalia ─────────────────── */
.sok-innhold {
  padding: 0.75rem 1rem 1rem 1rem;
}

.sok-pluss {
  color: var(--pers-etikett);
}

.sok-melding {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.sok-melding-ok {
  background-color: var(--pers-status-gronn-lys);
  color: var(--pers-status-gronn);
}

.sok-melding-advarsel {
  display: flex;
  align-items: center;
  background-color: var(--pers-gul-lys);
  color: var(--pers-gul-tekst);
  margin: 1rem;
}

.sok-melding-advarsel a {
  color: var(--pers-gul-tekst);
  text-decoration: underline;
}

/* Info fra skolen inne i et kort eller en dialog */
.pers-info.sok-info-innfelt {
  margin: 0.75rem 1rem 0 1rem;
  width: auto;
}

.sok-navigasjon {
  padding: 0.5rem 0 1rem;
}

/* Søknad, runde 2 (Thomas 09.10: «litt vel hvitt og flatt»):
   lys tonet header med ikon, grå boks for bekreftelser, kortfot for knappene */
.sok-kort .kort-topp {
  background-color: #f4f8f5;
}

.sok-kort .kort-stripe-linje {
  background: #dde7e0;
}

.sok-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  margin-right: 0.625rem;
  background-color: #e1eee5;
  color: var(--pers-gronn);
  font-size: 0.9rem;
}

.sok-melding-advarsel {
  align-items: flex-start;
}

.sok-melding-advarsel > .fas {
  margin-top: 0.15rem;
}

.sok-melding-tittel {
  font-weight: 600;
}

.sok-lenker {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
  font-weight: 600;
}

.sok-boks {
  background-color: #f6f8f9;
  border: 1px solid var(--pers-ramme);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.sok-boks > oj-bind-if > div + div,
.sok-boks #reglementRequired,
.sok-boks #vilkarRequired {
  margin-left: 1.75rem;
}

.sok-fot {
  background-color: #fff;
  border-top: 1px solid var(--pers-linje);
  padding: 0.75rem 0.5rem;
}

/* Søknad, runde 3 (Thomas 09.10) */
.sok-undertittel {
  font-size: 0.8125rem;
  color: var(--pers-etikett);
  margin-top: 0.1rem;
}

.sok-info-tittel {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pers-tittel);
}

/* Opplastingsdialogen: ett luftig løp uten panel i panel og uten sidescroll */
.sok-dialog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-x: hidden;
}

.pers-info.sok-info-dialog {
  margin: 0;
}

.sok-dialog-del oj-c-select-single,
.sok-dialog-del .sok-filvelger {
  display: block;
  width: 100%;
}

.sok-dialog-del .sok-filvelger {
  margin-top: 0.75rem;
}

.sok-dialog-hint {
  margin: 0;
}

/* Søknad, runde 4 (Thomas 09.10) */
.sok-dok .pers-info.sok-info-innfelt {
  display: block;
}

.sok-tom {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 0.25rem;
  color: var(--pers-etikett);
  font-size: 0.875rem;
}

.sok-tom .far {
  font-size: 1.25rem;
}

.sok-hindringer {
  margin: 0.25rem 0 0 0;
  padding-left: 1.1rem;
}

.sok-hindringer li {
  margin: 0.15rem 0;
}

.sok-hindringer .sok-lenker {
  display: inline-flex;
  margin-left: 0.25rem;
  margin-top: 0;
}

/* Bekreft innsending */
.sok-dialog-ingress {
  margin: 0 0 0.75rem 0;
  color: var(--pers-etikett);
  font-size: 0.875rem;
}

.sok-sammendrag {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  background-color: #f6f8f9;
  border: 1px solid var(--pers-ramme);
  border-radius: 8px;
}

.sok-sammendrag dt {
  color: var(--pers-etikett);
  font-size: 0.8125rem;
}

.sok-sammendrag dd {
  margin: 0;
  font-weight: 600;
  color: var(--pers-tittel);
}

/* Opprett ny søknad: skoleår som kort */
.sok-dialog-overskrift {
  font-weight: 600;
  color: var(--pers-tittel);
  margin-bottom: 0.5rem;
}

.sok-aarliste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sok-aar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--pers-ramme);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
}

.sok-aar:hover {
  border-color: #b9c9be;
  background-color: #f8fbf9;
}

.sok-aar:focus-visible {
  outline: 2px solid var(--pers-gronn);
  outline-offset: 2px;
}

.sok-aar-valgt,
.sok-aar-valgt:hover {
  border-color: var(--pers-gronn);
  box-shadow: 0 0 0 1px var(--pers-gronn);
  background-color: #f4f8f5;
}

.sok-aar-tittel {
  font-weight: 600;
  color: var(--pers-tittel);
}

.sok-aar-periode {
  color: var(--pers-etikett);
  font-size: 0.8125rem;
  flex: 1;
}

/* Programfag: én rad per blokk */
.sok-ingress {
  margin: 0 0 0.5rem 0;
}

.sok-blokk {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--pers-linje);
}

.sok-blokk:first-child {
  border-top: none;
}

.sok-blokk-navn {
  font-weight: 600;
  color: var(--pers-tittel);
  padding-top: 0.25rem;
}

@media (max-width: 600px) {
  .sok-blokk {
    grid-template-columns: 1fr;
  }
}

.sok-knapper-hoyre {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pers-linje);
}

/* Luft mellom knappene i dialogfoten (Thomas 09.10). margin-left fordi
   oj-bind-if mellom knappene bryter nabovelgeren (+) */
oj-dialog [slot="footer"] oj-c-button {
  margin-left: 0.5rem;
}

/* Søknad-headeren: status som merke ved tittelen (Thomas 09.10) */
.sok-tittel-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

#endre_prog_vindu oj-c-select-single {
  display: block;
  width: 100%;
}

/* Thomas 09.10: grønntonet header også på Personalia, men mørk tekst og mørke
   ikoner (grønt på grønt var tungt å lese) */
.sok-kort .kort-topp-info {
  background-color: #f4f8f5;
}

.sok-kort .kort-tittel.kort-tittel-navn {
  color: var(--pers-tittel);
}

.sok-ikon {
  color: var(--pers-tittel);
}

/* Program 1. valg: ser ut som et felt man kan endre, ikke et deaktivert felt */
.sok-prog1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--pers-ramme);
  border-radius: 6px;
  background-color: #fff;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
}

.sok-prog1-etikett {
  font-size: 0.75rem;
  color: var(--pers-etikett);
}

.sok-prog1-verdi {
  color: var(--pers-tekst);
}

/* ── Behandling (Thomas 09.10): samme kort som Søknad ────────────────── */
.sok-melding-info {
  background-color: #eef5fb;
  color: #1f4e75;
}

.sok-melding-noytral {
  background-color: #f6f8f9;
  color: var(--pers-tekst);
  border: 1px solid var(--pers-ramme);
}

.beh-topp-luft {
  margin-top: 0.75rem;
}

.beh-maaler {
  margin-top: 0.75rem;
}

.beh-maaler-etikett {
  font-size: 0.75rem;
  color: var(--pers-etikett);
  margin-bottom: 0.25rem;
}

.beh-brev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.beh-knapper-venstre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.beh-svar {
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Historikk som tidslinje */
.beh-historikk {
  list-style: none;
  margin: 0;
  padding: 0;
}

.beh-hendelse {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pers-linje);
}

.beh-hendelse:first-child {
  border-top: none;
}

.beh-punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--pers-status-gronn-lys);
  color: var(--pers-status-gronn);
  font-size: 0.7rem;
}

.beh-hendelse-tekst {
  flex: 1;
}

.beh-hendelse-status {
  font-weight: 600;
  color: var(--pers-tittel);
}

.beh-hendelse-dato {
  font-size: 0.8125rem;
  color: var(--pers-etikett);
}

.beh-melding {
  padding: 0.25rem 0;
}

/* ── Velgeskjermen (Thomas 09.10): samme kort som Søknad, søknad og status
   per person ────────────────────────────────────────────────────────────── */
.start-seksjon {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pers-etikett, #5f6b73);
  margin: 1.25rem 0 0.5rem;
}

.start-innhold > .start-seksjon:first-of-type,
.start-innhold > div[role="status"] + .start-seksjon {
  margin-top: 0.25rem;
}

.start-initialer {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0;
  font-size: 0.9rem;
}

.start-initialer-meg {
  background-color: #e6f0e9;
  color: #28734a;
}

.start-kort-navn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pers-tittel, #1f2a33);
}

.start-kort-aktiv {
  box-shadow: inset 3px 0 0 #28734a;
  border-radius: 8px;
}

.start-soknad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pers-ramme, #e3e7ea);
  font-size: 0.875rem;
  color: var(--pers-tekst, #333);
}

.start-soknad > .fas {
  color: var(--pers-etikett, #5f6b73);
}

.start-soknad-dato {
  font-size: 0.75rem;
  color: var(--oj-core-text-color-secondary);
}

.pers-merke-info {
  background-color: #eef5fb;
  color: #1f4e75;
}

.start-ny-ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px dashed #9bb8a5;
  color: #28734a;
  font-size: 0.95rem;
}

.start-melding {
  margin: 0 0 1rem 0;
  align-items: flex-start;
}

.start-melding-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.start-bunn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.start-bunn-info {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Behandling: «Oppdater» i headeren og trekk i egen faresone nederst */
.beh-oppdatert {
  font-size: 0.75rem;
  color: var(--oj-core-text-color-secondary);
  white-space: nowrap;
}

.beh-faresone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  box-sizing: border-box;
  margin: 0.5rem 0 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e3b4b0;
  border-radius: 8px;
  background-color: #fdf5f4;
  color: #6b2620;
  font-size: 0.875rem;
}

.beh-faresone-tekst {
  flex: 1 1 18rem;
}

.beh-faresone-tittel {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.125rem;
}

/* Snarvei når skolen venter på svar (under barnekortet) */
.start-svar {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 10px;
}

/* Dialogene på startsiden: samme meldinger og knapperad som Søknad */
.sok-melding-feil {
  background-color: #fbeeed;
  color: #8a2a22;
}

.start-dialog-boks {
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--pers-ramme);
  border-radius: 8px;
  background-color: #f6f8f9;
  font-size: 0.875rem;
}

.start-dialog-fot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.start-resultat {
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  background-color: var(--pers-status-gronn-lys);
}

/* Behandling: kvittering i kortet i stedet for toast */
.beh-kortmelding {
  align-items: center;
  margin: 0 0 1rem 0;
}

.beh-kortmelding-tekst {
  flex: 1 1 auto;
}

/* ── Mobil (Thomas 09.10): kortheadere bryter, knapper får plass ────────── */
@media (max-width: 600px) {
  .kort-topp.oj-flex-bar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.625rem 0.75rem;
  }
  .kort-topp > .oj-flex-bar-start {
    min-width: 0;
    flex: 1 1 100%;
  }
  .kort-topp > .oj-flex-bar-end {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .kort-topp > .oj-flex-bar-end oj-c-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .kort-topp .sok-undertittel {
    overflow-wrap: anywhere;
  }
  .sok-innhold,
  .start-innhold {
    padding: 0.75rem;
  }
  .sok-sammendrag {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .sok-sammendrag dd {
    margin-bottom: 0.5rem;
  }
  .start-kort-rad {
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
  }
  .start-svar,
  .start-inv-knapper {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .beh-faresone oj-c-button,
  .sok-knapper-hoyre oj-c-button,
  .sok-navigasjon oj-c-button {
    width: 100%;
  }
  .beh-hendelse {
    flex-wrap: wrap;
  }
  .sok-knapper-hoyre {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  oj-dialog [slot="footer"],
  .start-dialog-fot {
    flex-wrap: wrap;
  }
}

/* Svar-oppfordringen ligger i søknadslinjen på kortet (Thomas 09.10) */
.start-soknad-svar {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--pers-gul-tekst);
  white-space: nowrap;
}

/* ── Mobil runde 2 (Thomas 09.10) ─────────────────────────────────────── */
/* Behandling-headeren: Oppdater som ikon i tittelraden, ikke egen rad */
@media (max-width: 600px) {
  .kort-topp.beh-topp.oj-flex-bar {
    flex-wrap: nowrap;
  }
  .kort-topp.beh-topp > .oj-flex-bar-start {
    flex: 1 1 auto;
  }
  .kort-topp.beh-topp > .oj-flex-bar-end {
    flex: 0 0 auto;
  }
}

/* «Søker for» på egen rad over fanene (bare mobil) */
.soker-kontekst-rad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: rgb(var(--oj-palette-success-rgb-10));
  border-top: 1px solid rgb(var(--oj-palette-success-rgb-40));
  border-bottom: 1px solid rgb(var(--oj-palette-success-rgb-40));
  font-size: 0.875rem;
}

.soker-kontekst-rad-tekst {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobil: topplinjen får logo og brukermeny, fanene fyller bredden */
@media (max-width: 767px) {
  .oj-web-applayout-header .oj-flex-bar-end {
    flex: 0 0 auto;
  }
  .oj-web-applayout-navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #navTabBar {
    width: 100%;
  }
}

/* Kortene skal aldri bli bredere enn skjermen: flex-elementer har
   min-width:auto, så lang tekst eller skjemafelt dro Søknad-kortet ut
   over høyre kant på mobil (Thomas 09.10). */
.pers-kort {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.sok-innhold.oj-flex > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .sok-innhold.oj-flex.oj-sm-flex-direction-column {
    align-items: stretch;
  }
  .sok-innhold.oj-flex > .sok-melding {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Kvitteringer øverst i Søknad-kortene (samme som Behandling) */
.sok-kortmelding-plass {
  padding: 0.75rem 1rem 0 1rem;
}
.sok-kortmelding-plass .beh-kortmelding {
  margin: 0;
}

/* Landingsside etter bekreftelseslenken (Thomas 12.10) */
.epost-landing {
  padding: 1.5rem 1rem;
}
.epost-landing-kort {
  max-width: 36rem;
  margin: 1rem auto !important;
}
.epost-landing-innhold {
  padding: 1rem;
}
.epost-landing-tekst {
  margin: 1rem 0 0 0;
}
.epost-landing-fot {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Startsiden: avsluttede skoleår, dempet under aktive søknader (Thomas 12.10) */
.start-tidligere {
  margin-top: 0.35rem;
  opacity: 0.7;
}
.start-tidligere-tittel {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--oj-core-text-color-secondary, #666);
  margin-bottom: 0.1rem;
}

/* F45: barnekort med knapper (invitasjon/signering) — rammen ligger på
   gruppen, så knappene står inne i kortet */
.start-kort-gruppe-knapper {
  border: 1px solid rgba(22, 21, 19, 0.12);
  border-radius: 4px;
  margin-bottom: 8px;
}
.start-kort-gruppe-knapper > .start-kort {
  margin-bottom: 0;
}
.start-kort-gruppe-knapper > .start-kort > div {
  border: 0;
}
.start-kort-gruppe-knapper .start-inv-knapper {
  margin: 0;
  padding: 0 12px 8px 60px;
}
@media (max-width: 767px) {
  .start-kort-gruppe-knapper .start-inv-knapper {
    padding: 0 12px 8px;
  }
}

/* Innloggingssiden: hvem som logger inn (Thomas 12.10) */
.login-hvem {
  text-align: start;
  margin-bottom: 0.5rem;
}
.login-hvem-liste {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.1rem;
}
.login-hvem-liste li + li {
  margin-top: 0.25rem;
}

/* Luft mellom ID-porten-knappen og teksten under (mobil: lå inntil knappen) */
.login-ny-soker {
  margin-top: 16px;
}
/* login100-error-txt har margin-top: -30px (login-main.css), som bare
   overstyres fra md og opp — på mobil dro den teksten under inn i knappen */
.login-cardface .login100-error-txt {
  margin-top: 4px;
}

/* Liten, dempet tekst ved signeringsknappene (Thomas 12.10) */
.sign-info {
  flex-basis: 100%;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--oj-core-text-color-secondary, #5f6368);
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}
.start-inv-knapper,
.sok-knapper-hoyre.beh-svar {
  flex-wrap: wrap;
}
.start-inv-knapper .sign-info,
.beh-svar .sign-info {
  text-align: end;
}
@media (max-width: 767px) {
  .start-inv-knapper .sign-info {
    text-align: start;
  }
}
/* Teksten under knappene, så «Avslå» og «Signér» står side om side */
.beh-svar .sign-info {
  order: 99;
}

/* F56: skjemaet står usynlig (men tegnet) til dataene er satt */
.pers-laster {
  opacity: 0;
  pointer-events: none;
}

/* Før Knockout har bundet (root.js): skjul siden, så rå oj-bind-if-innhold
   (alle tilstander, tomme felt) aldri vises. Kommer appen ikke i gang
   (JavaScript av eller skript blokkert), vises en forklaring etter 15 s;
   uten JavaScript vises den med en gang via <noscript>. */
.sok-ubundet { visibility: hidden; }
.sok-ikke-startet { opacity: 0; animation: sok-vis-sent 0s linear 15s forwards; }
@keyframes sok-vis-sent { to { opacity: 1; } }
.sok-ikke-startet-tekst {
  max-width: 560px;
  margin: 12vh auto 0;
  padding: 24px;
  border-radius: 8px;
  background: #fff8e1;
  color: #1d2b24;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* ── Navnet fra passet (common/passnavn.js, supportsak 10001952) ──────────── */
.passnavn-kort {
  border: 1px solid var(--pers-ramme);
  border-radius: 8px;
  background-color: var(--pers-noytral-lys);
  padding: 0.875rem 1rem;
}
.passnavn-etikett {
  font-size: 0.8125rem;
  color: var(--pers-etikett);
}
.passnavn-verdi {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pers-tittel);
  overflow-wrap: anywhere;
}
.passnavn-etikett + .passnavn-verdi {
  margin-top: 0.125rem;
}
.passnavn-verdi + .passnavn-etikett {
  margin-top: 0.75rem;
}
.passnavn-naa {
  font-size: 0.875rem;
  color: var(--pers-etikett);
  margin: 0.75rem 0 0 0;
}