/*
    Document   : override
    Created on : <date>
    Author     : <author>
    Description:
        This is where any of your application specific styles should be included
*/

/* Overskriver scrollbar horisontalt */

/* kommentere tilbake etter update */
/* .oj-drawer-layout-main-content {
  overflow-x: hidden;
} */
/* * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
} */

/* body {
  width: 100vw;
  height: 100vh;
  background: #f2f4f6;

  
} */
button:focus-visible {
  border: 2px dotted rgb(4, 4, 4) !important;
}

/* oj-button:focus-visible {
  border: 1px dotted rgb(4, 4, 4) !important; 
}  */
.demo-controls {
  padding-bottom: 1rem;
}

.demo-padding {
  padding: 0px;
}


/*Drawers*/
.demo-drawer-start {
  min-width: 300px;
  min-height: 100%;
}

/* kommentere tilbake etter update */
/* 
.oj-drawer-reflow {
  background-color: #132435;
} */
/*Scrolling og scrollbar - kommentert ut pga feil med auto scroll til toppen m.m */
html {
  /* overflow: hidden; */
  /* overflow-x: hidden; */
}

#pageContent {
  max-height: 80vh;
}

/* ::-webkit-scrollbar {
  width: 10px !important;
  background: rgb(210, 210, 210);

}

::-webkit-scrollbar-thumb {
  background: #808080;
  width: 5px !important;
  box-shadow: inset 0 0 3px rgb(48, 48, 48);
}

::-webkit-scrollbar-thumb:hover {
  background: #a2a2a2; 
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px rgb(48, 48, 48);
  border-radius: 5px;
} */

.hideScrollBar {
  overflow: hidden;
}

.main_drawer_container {
  height: calc(100vh - 65px) !important;
}

.romtimeplan_main_container {
  height: calc(100vh - 65px -48px) !important;
}

.orden_adferd_height {
  height: calc(100vh - 58px) !important;
}
.orden_adferd_table_height {
  height: calc(100vh - 58px - 440px) !important;
}

/* Karakterer-fanen: flex-kolonne slik at tabellen fyller plassen som er
   igjen etter bunnen, i stedet for at bunnen reserverer en fast høyde.
   Gjør at lave skjermer ikke krymper tabellen bort. */
.orden_adferd_karakter_panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px) !important;
  box-sizing: border-box;
}
.orden_adferd_table_flex {
  flex: 1 1 auto;
  min-height: 140px;
}
.orden_adferd_bottom {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.oa-bottom-info {
  flex: 1 1 auto;
  min-width: 0;
}
.oa-bottom-actions {
  flex: 0 0 auto;
  align-self: flex-end;
}
/* Mobil: stable knappen under tekstene igjen. */
@media (max-width: 600px) {
  .orden_adferd_bottom {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Lave skjermer: stram inn bunnen. Panelhøyden er uendret, så en
   kompaktere bunn gir automatisk mer plass til tabellen (flex). */
@media (max-height: 800px) {
  .orden_adferd_bottom .oa-info-box,
  .orden_adferd_bottom .oa-periode-form {
    margin-top: 0.5rem !important;
  }
}
@media (max-height: 650px) {
  .orden_adferd_table_flex {
    min-height: 96px;
  }
  .orden_adferd_bottom .oa-info-box {
    display: none;
  }
}

.support_bottom_height {
  height: calc(100vh - 140px) !important;
}
.tie-btn-delete { display: none !important; }
.tie-btn-deleteAll { display: none !important; }

@media (max-width: 600px) {
  .main_drawer_container {
    height: calc(100vh - 52px) !important;
  }
}


.demo-drawer-header {
  display: flex;
  padding: 0.3rem 1rem 0 1rem;
  justify-content: space-between;
  align-items: center;

}

/* Startsiden */
.startside_card_container_single {
  width: 150px;
  position: relative;
}

.startside_card_container_double {
  width: 300px;
  position: relative;
}

.startside-card-content-single {
  width: 12rem;
  height: 15rem;
  padding: 1rem;
}

.startside-card-content-double {
  width: 24.5rem;
  height: 15rem;
  padding: 1rem;
}

@media (max-width: 600px) {
  .startside-card-content-single {
    width: 11rem;
    height: 15rem;
    padding: 1rem;
  }

  .startside-card-content-double {
    width: 22rem;
    height: 15rem;
    padding: 1rem;
  }
}

.startside_actioncard_lookalike {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  border-radius: 1px solid;
  border: 1px solid;
}

#startside_calendar {
  position: relative;
  left: 0;
  right: 0;
  bottom: 5px;
  top: 64px;
}

/* Reservert bakgrunnsfarge */
.R {
  background-color: orange;
}

/* Gruppefag bakgrunnsfarge */
.G {
  background-color: #6d9ce2;
}

/* Klassefag bakgrunnsfarge */
.K {
  background-color: #a9c555;
}

/* .KF {
  background-color: #a9c555;
} */

/* Vikar bakgrunnsfarge */
.vikartime {
  background-color: #ffff94;
}

/* Startsiden slutt */

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


.profile-card-layout-container {
  width: 350px;
  height: 350px;
}

.profile-card-layout-inner {
  padding-top: 20px;
  padding-left: 32px;
  padding-right: 32px;
}

.profile-card-layout-image {
  margin: auto;
  width: 96px;
  height: 96px;
  margin-bottom: 94px;
}

.profile-card-layout-image_internat {
  margin: auto;
  width: 96px;
  height: 96px;
  margin-bottom: 50px;
}

.iskole_back {
  font-size: 1.5em;
  color: rgb(51, 51, 51)
}

.iskole_button_icon {
  margin-right: 0.42857rem !important;
  margin-left: 0.85714rem !important;
  padding: 0px !important;
}

.iskole_button_text {
  padding-right: 13px !important;
  padding-left: 0px !important;
}

.iskole_page_top {
  padding-top: 15px !important;
}

.iskole_page_top_iop {
  padding-top: 10px !important;
}

@media (max-width: 600px) {
  .iskole_page_top {
    padding-top: 15px !important;

  }

  .iskole_page_top_iop {
    padding-top: 55px !important;
    left: 0;
  }
}

.iskole_page_with_footer {
  padding-bottom: 50px !important;
}

@media (max-width: 600px) {
  .iskole_page_with_footer {
    padding-bottom: 80px !important;
  }
}

.page_with_footer {
  padding-bottom: 50px !important;
}

@media (max-width: 600px) {
  .page_with_footer {
    padding-bottom: 80px !important;
  }
}

/* Meldinger egen, da den påvirket resten av sidene*/
.meldinger_page_top {
  margin-top: 65px !important;
}

@media (max-width: 600px) {
  .meldinger_page_top {
    margin-top: 5px !important;
  }
}

.meldinger_page_with_footer {
  /* padding-bottom: 60px !important;  */
}

.meldinger-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 68px - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.meldinger-inner {
  flex: 1 1 auto;   /* fyll plassen */
  min-height: 0;    /* viktig for å tillate krymping i flex */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  align-content: flex-start; /* hindrer at wrappede flex-rader strekkes til å fylle høyden */
}

.meldinger_lw_height {
  max-height: calc(100vh - 170px);
}

.meldinger_lw_height_selected {
  max-height: calc(100vh - 225px);
}

.mottaker-tabell {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
}

.mottaker-tabell th,
.mottaker-tabell td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--oj-core-divider-color, #e5e5e5);
}

.mottaker-tabell th {
  font-weight: 600;
  background-color: var(--oj-core-bg-color-secondary, #f5f5f5);
}

@media (max-width: 600px) {
  .meldinger_page_with_footer {
    padding-bottom: 100px !important;
  }

  .meldinger-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 52px - 48px);
    overflow: hidden;
  }

  .meldinger_lw_height {
    max-height: calc(100vh - 160px);
  }

  .meldinger_lw_height_selected {
    max-height: calc(100vh - 215px);
  }
}

@keyframes blinkBorderAnimation {
  0% {
    box-shadow: 0px 0px 10px #8F520A;
    border-color:transparent;
    border-radius: 15px;
  }
  50% {
    box-shadow: 0 0 20px #8F520A;
    border-color: transparent;
    border-radius: 15px;
  }
  100% {
    box-shadow: 0 0 10px #8F520A;
    border-color: transparent;
    border-radius: 15px;
  }
}

.meldinger_gruppemottakere_klasser_panel {
  padding: 10px;
  animation: blinkBorderAnimation 2s infinite; /* Adjust the duration as needed */
}

.gruppe-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--oj-core-bg-color-secondary, #e8e8e8);
  border: 1px solid var(--oj-core-divider-color, #d6d6d6);
  border-radius: 16px;
  padding: 0.15rem 0.25rem 0.15rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.gruppe-chip-fjern {
  margin-left: 0.25rem;
}

.kontakt-gruppe-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  background-color: var(--oj-core-bg-color-secondary, #eaeaea);
  color: var(--oj-text-color-secondary, #555);
  white-space: nowrap;
}

.gruppe-info-boks {
  background-color: #fff8d6;
  border: 1px solid #f0e3a0;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #6b5500;
}

.pageTabbarBottom {
  padding-bottom: 60px !important;
}

.footer {
  padding-bottom: 0;
  padding-top: 0;
  position: fixed;
  bottom: 0;
  width: 100vw;
}

.footer_m_meny {

  padding-bottom: 0;
  padding-top: 0;
  position: fixed;
  bottom: 0;
  width: calc(100vw - 300px);
}

@media (max-width: 1023px) {
  .footer_m_meny {

    padding-bottom: 0;
    padding-top: 0;
    position: fixed;
    bottom: 0;
    width: 100vw;
  }
}

/* Bakgrunn i tabell for å skille rader */
.table_bg {
  background-color: #f2f2f2;
}

/* ── Skolerute: dagtyper ────────────────────────────────────────────────────
   Fargevekten er snudd 2026-09-04. Fridag var den kraftigste fargen, og
   fridager er rundt 40 % av året — kalenderen ropte altså om det minst
   oppsiktsvekkende, i en rødtone som ellers betyr feil. Skoledag er nå det
   fylte grunnivået; aktivitets- og planleggingsdag beholder aksentfarge fordi
   de er sjeldne og er dem man leter etter.

   Rulle tilbake: bytt de fire background-color-verdiene til de gamle under.
   Klassenavnene er uendret, så ingen binding trenger å røres.

   Gammel palett:
     .SD_bg  rgb(215, 218, 226)
     .FD_bg  rgb(255, 166, 166)
     .AK_bg  rgb(148, 181, 255)
     .PL_bg  rgb(255, 255, 148)
   ------------------------------------------------------------------------ */

.SD_bg {
  background-color: #DDE7F3;
  color: #23446B;
}

.FD_bg {
  background-color: #F2EDE6;
  color: #8A7C6B;
}

.AK_bg {
  background-color: #D5EBE4;
  color: #14604D;
  font-weight: 600;
}

.PL_bg {
  background-color: #FAE9CF;
  color: #8A5814;
  font-weight: 600;
}

/* ── Skolerute: kalenderens uttrykk ─────────────────────────────────────────
   Tabellrutenettet tegnet en strek rundt hver eneste dag. Med luft mellom
   avrundede celler bærer fargen strukturen alene, og sammenhengende ferie
   leses som en blokk framfor som enkeltceller.
   ------------------------------------------------------------------------ */

/* Den indre rammen: oj-table tegner en ramme rundt seg selv og rundt
   container-en. Panelet har allerede sin egen ramme — to rammer utenpå
   hverandre er stoey. */
.skolerute_panel oj-table,
.skolerute_panel .oj-table-container,
.skolerute_panel .oj-table-scroller {
  border: none !important;
  box-shadow: none !important;
}

/* IKKE table-layout: fixed. JETs oj-table setter egne kolonnebredder paa
   cellene, og med fixed blir de bredene fasit framfor et minimum — dagkolonnene
   kollapset til null mens ukekolonnen overlevde paa sin eksplisitte bredde.
   Bredden loeses i stedet ved aa gjoere innholdet smalere: mindre skrift og
   padding i cellene. */
/* border-collapse MAA staa paa collapse. JET maaler kolonnene og skriver dem
   som pikselbredder i en <colgroup> — summen er nøyaktig den plassen som
   finnes (362px). border-spacing legges oppaa den summen, saa 2px x 9
   mellomrom ga 18px overflyt og klippet soendagskolonnen. Maalt i dev 04.09:
   colgroup 362px, faktisk tabellbredde 380px.

   Luften mellom dagene lages derfor med padding + background-clip i stedet —
   den paavirker ikke tabellens bredde i det hele tatt. */
.skolerute_panel oj-table table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Scrolleren er bevisst latt i JETs standard. Med overflow:visible spilte det
   som ikke fikk plass ut av panelet og ble kuttet av panelkanten — verre enn
   aa kunne scrolle. Faar noe ikke plass, skal det scrolle, ikke forsvinne. */

.skolerute_panel oj-table td,
.skolerute_panel oj-table th {
  border: none !important;
  text-align: center;
  padding: 4px 3px !important;
  font-size: 0.8rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* background-clip: content-box maler fargen bare innenfor paddingen, saa
   mellomrommet mellom dagene oppstaar uten at cellen blir bredere. */
.skolerute_panel oj-table td {
  border-radius: 7px;
  background-clip: content-box !important;
}

/* Ukenummeret er en etikett, ikke data — samme vekt som dagene var for mye. */
/* JET setter min-width paa header-teksten (1rem) og paa datacellen
   (body-font-size). Med to sifre trengs ingen av dem, og til sammen er de nok
   til aa dytte soendagskolonnen ut. Selektoren er mer spesifikk enn JETs, saa
   ingen !important trengs. */
.skolerute_panel .oj-table-column-header-text,
.skolerute_panel .oj-table-data-cell,
.skolerute_panel .oj-table-column-header-cell {
  min-width: 0;
}

.skolerute_panel oj-table td:first-child {
  color: var(--oj-core-text-color-secondary, #6b7885);
  font-size: 0.85em;
  background: transparent;
}

.skolerute_panel oj-table th {
  font-size: 0.78em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oj-core-text-color-secondary, #6b7885);
}

/* ── Brede tabeller: egen sidelengs skroll i stedet for at siden vokser ────*/
/* Flex-barn har min-width:auto som standard. En tabell med mange kolonner
   tvinger da hele raden bredere enn vinduet: siden faar horisontal skroll, og
   fokus paa et felt (f.eks. fagvelgeren i rapporter) ruller rapportmenyen ut
   av syne til venstre. Wrapperen tar skjermbredden og skroller selv;
   rapport-innhold lar innholdskolonnen krympe under innholdsbredden. */
.tabell-skroll {
  max-width: 100%;
  overflow-x: auto;
}
.rapport-innhold {
  min-width: 0;
}

/* ── Navn-kolonne med avatar først (elevsamtaler) ─────────────────────────*/
/* Litt luft mellom bilde og navn; luften foran bildet kommer fra knappens
   egen padding (den gamle margin-left:-15px er fjernet). */
.navn-celle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navn-avatar {
  cursor: pointer;   /* hover/klikk viser stort bilde */
}
/* Redwood «xs» er 44 px – for stort i en tabellrad. 28 px som i fraværsuka,
   22 px i komprimerte rader (fravær-søket). Selektoren er mer spesifikk enn
   JETs (også .oj-private-scale-lg-varianten), saa ingen !important. */
.navn-avatar .oj-avatar.oj-avatar-xs {
  --oj-avatar-size: 28px;
  --oj-avatar-initials-font-size: 0.75rem;
}
.komprimertButton .navn-avatar .oj-avatar.oj-avatar-xs {
  --oj-avatar-size: 22px;
  --oj-avatar-initials-font-size: 0.62rem;
}

/* ── Skolerute: tegnforklaring øverst ──────────────────────────────────────*/
.skolerute_forklaring {
  /* nowrap: skal staa paa én linje. overflow-x fanger smale skjermer, saa
     sidekroppen aldri scroller sidelengs. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  max-width: 1368px;
  width: 100%;
}

.skolerute_forklaring .forklaring_item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.skolerute_forklaring .forklaring_prove {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 auto;
}

/* ── Skolerute: nøkkeltall ─────────────────────────────────────────────────
   Tallene lå tidligere i fire oj-c-input-text satt til readonly — skjemafelt
   som lot som de var data, og som skjermlesere melder som inaktive tekstfelt.
   ------------------------------------------------------------------------ */
.skolerute_tall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Overskriften over sammendraget skal vaere en etikett, ikke en seksjonstittel. */
.skolerute_sammendrag .skolerute_overskrift {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--oj-core-text-color-secondary, #6b7885);
}

.skolerute_tall .tall_kort {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 150px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--oj-core-bg-color-subtle, #f4f6f8);
}

.skolerute_tall .tall_etikett {
  /* Ikke versaler: etikettene er ord som «1. halvår», der store bokstaver
     gjoer tallet og punktumet vanskeligere aa lese. */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--oj-core-text-color-secondary, #6b7885);
}

/* Sammendraget staar naa over kalenderne, ved siden av tegnforklaringen.
   Der skal det opplyse, ikke dominere — derfor tydelig mindre enn da det laa
   alene nederst paa siden. */
.skolerute_tall .tall_verdi {
  /* 1,25rem ned 15 % = 1,0625rem, altsaa 20px -> 17px ved 16px rot. */
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.skolerute_panel {
  /* Ingen egen bredde: panelet fyller rutenettsporet (336-372px), og tabellen
     fyller panelet via width: 100% i viewet. */

  /* Her forsvant bredden. JET henter cellepaddingen fra egne variabler, ikke
     fra padding paa td — og standardverdien er 1rem på hver side, altsaa 32px
     per celle. Med aatte kolonner er det over 250px ren padding, og det var
     derfor soendagen ble klippet uansett hvor mye jeg krympet skriften.
     Vi setter variablene i stedet for aa slaass med !important: dette er JETs
     egen tema-API, saa det overlever oppgraderinger og spesifisitetskamper. */
  --oj-table-cell-padding-horizontal: 2px;
  --oj-collection-grid-cell-padding: 2px;
  --oj-collection-grid-cell-padding-horizontal: 2px;
  --oj-panel-padding: 4px;
}

/* Maanedsnavn med antall skoledager til hoeyre, som i skissen */
.skolerute_maanedhode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.skolerute_maanedhode h4,
.skolerute_infohode {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* ── Skolerute: informasjonsteksten ─────────────────────────────────
   Teksten kommer fra TinyMCE og kan inneholde lister og overskrifter — de
   skal se ut som tekst, ikke arve JETs skjemastiler. Samme regler som i
   Grunnlagsdata > Skolerute. ---------------------------------------- */
.skolerute_infotekst {
  margin-top: 10px;
  /* Lange skoleruter skal ikke skyve kalenderne nedover hele skjermen. */
  max-height: 40vh;
  overflow-y: auto;
}

.skolerute_infotekst :first-child {
  margin-top: 0;
}

.skolerute_infotekst :last-child {
  margin-bottom: 0;
}

/* «Antall skoledager» sto like stort som en sideoverskrift. */
.skolerute_overskrift {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.skolerute_maanedhode .maaned_antall {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 100px;
  color: var(--oj-core-text-color-secondary, #46596b);
  background: var(--oj-core-bg-color-subtle, #eef2f6);
  font-variant-numeric: tabular-nums;
}



/* ── Skolerute: ett rutenett styrer alle rammene ────────────────────────────
   Toppanelene hadde faste bredder (1368/1023/677px) mens kalenderraden ble så
   bred som antall månedspaneler som fikk plass. De to tallene har ingen grunn
   til å bli like, og ble det heller ikke.

   Nå definerer månedspanelene kolonnene, og toppanelene spenner over alle. Da
   er bredden på rammene per definisjon den samme som kalenderraden, uansett
   skjermbredde og antall kolonner. Samme ordning som i Grunnlagsdata >
   Skolerute.

   display: contents to steder: kalendercontaineren skal ikke lage en boks
   mellom rutenettet og månedspanelene, og oj-bind-if rundt tekstpanelet skal
   ikke bli en celle i seg selv — panelet inni er cellen.
   ------------------------------------------------------------------------ */
/* Klasse, ikke #page1: 27 andre skjermbilder i denne appen bruker samme id,
   og en regel på id-en ville gjort dem alle til rutenett. */
.skolerute_side {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(336px, 372px));
  justify-content: start;
  align-items: start;
  gap: 10px;
  padding: 10px;
}

.skolerute_kalendere,
.skolerute_side > oj-bind-if {
  display: contents;
}

.skolerute_full {
  grid-column: 1 / -1;
}

.skolerute_tekst {
  box-sizing: border-box;
}

/* Må stå etter grunnregelen — lik spesifisitet, så den siste vinner. */
@media (max-width: 600px) {
  .skolerute_side {
    grid-template-columns: 1fr;
  }
}

.iskole_menu_icon {
  width: 35px;
}

.demo-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
  overflow: auto;

  transition: transform 0.25s;
}

.demo-page-opened {
  position: absolute;
  top: 0;
  margin-top: 12px;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
  overflow: auto;
  transition: transform 0.25s;
}

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

.demo-page1-hide {
  transform: translate3d(-210%, 0, 0);
}

.demo-page2-hide {
  transform: translate3d(210%, 0, 0);
}

.sendtMeldingLeftMargin {
  margin-left: 310px !important;
}

.sendtMeldingTopMargin {
  margin-top: 69px !important;
}

.personlia_tile {
  min-width: 48%;
}

@media (max-width: 1200px) {
  .personlia_tile {
    min-width: 100%;

  }
}

.slettBtnAnimate {
  height: 39px;
}

.elevmappe-drawer-end {
  width: 650px;
  /* min-height: 100%; */
  /* min-height: calc(100vh - 300px); */
}

.demo-drawer-width {
  width: 550px;
}

@media (max-width: 500px) {
  .demo-drawer-width {
    width: 400px;
  }
}



#scrollBtn {
  display: none;
  position: fixed;
  bottom: 95px;
  right: 5px;
  z-index: 2;
  font-size: 18px;
  border: 1px solid black;
  outline: none;
  background-color: #227E9E;

  color: white;
  cursor: pointer;
  border-radius: 50%;

}

#scrollBtn:hover {
  background-color: white;
}

#scrollBtn:hover .scrollArrow {
  color: black;
}

.scrollArrow {
  color: white;
}


#saveBtn {
  display: none;
  position: fixed;
  bottom: 95px;
  right: 5px;
  z-index: 2;
  font-size: 16px;
  border: 1px solid black;
  outline: none;
  /* background-color: #227E9E; */
  background-color: rgb(67, 107, 29);
  color: white;
  cursor: pointer;
  border-radius: 50%;

}

#saveBtn:hover {
  background-color: white;
}

#saveBtn:hover .scrollArrow {
  color: black;
}
 
#saveBtnExtra {
  display: none;
  position: absolute;
  /* bottom: 9px; */
  /* right: 1000px; */
  max-width: 100px;
  z-index: 0;
  font-size: 16px;
  border: 1px solid black;
  outline: none; 
  background-color: rgb(67, 107, 29);
  color: black;
  cursor: pointer;
  border-radius: 50%; 
}

#saveBtnExtra:hover {
  background-color: white;
}

#saveBtnExtra:hover .scrollArrow {
  color: black;
}
#angreKompFravaerMediumDownBtn {
  display: none;
  position: fixed;
  bottom: 95px;
  right: 5px;
  z-index: 2;
  font-size: 16px;
  border: 1px solid black;
  outline: none;
  background-color:#8F520A;
  color: black;
  cursor: pointer;
  border-radius: 50%; 
}
.font-size-transition {
  animation: font-size-transition 0.15s ease-in-out; /* Adjust the duration and timing function as needed */
}

@keyframes font-size-transition {
  0% {
      font-size: 22px; /* Starting font size */
      color:green;
  }
  100% {
      font-size: 12px; /* Ending font size */
      color:black;
  }
}
.font-size-transition-undo {
  animation: font-size-transition-undo 0.15s ease-in-out; /* Adjust the duration and timing function as needed */
}

@keyframes font-size-transition-undo {
  0% {
      font-size: 12px; /* Starting font size */
      color:red;
  }
  100% {
      font-size: 22px; /* Ending font size */
      color:red;
  }
}
#angreKompFravaerBtn {
  display: none;
  position: absolute;
  /* bottom: 9px; */
  /* right: 1000px; */
  max-width: 100px;
  z-index: 0;
  font-size: 16px;
  border: 1px solid black;
  outline: none; 
  background-color:#8F520A;
  color: black;
  cursor: pointer;
  border-radius: 50%; 
}

#angreKompFravaerBtn:hover {
  background-color: white;
}

#angreKompFravaerBtn:hover .scrollArrow {
  color: black;
} 
.kompFravaerTopActionBar { 
  width: 100%;
  background-color: white;
  padding:5px;
  margin-top:10px; 
  margin-bottom:-10px !important;


}
.kompFravaerBottomActionBar {
  position: relative;
  bottom: 0;
  width: 100%; 
  z-index: 10; 
  left: 0;
  
  padding: 15px 15px 25px 15px;
  background-color: white;;
}


/* Dagfravaer alle */
.dagfravaerAlleTableSmall {
  border-color: transparent !important;
  width: 100% !important; 
  height: calc(100vh - 350px);
  max-height: calc(100vh - 350px);
}
.dagfravaerAlleTableBig {
  border-color: transparent !important;
  width: 100% !important; 
  height: calc(100vh - 350px);
  max-height: calc(100vh - 350px);
} 
/* #fravaerAlleSaveBtnExtra {
  display: none;
  position: fixed; 
  max-width: 100px;
  z-index:2; 
  top:250px;
  left: 170px;
  font-size: 16px;
  border: 1px solid black;
  outline: none; 
  background-color: rgb(67, 107, 29);
  color: black;
  cursor: pointer;
  border-radius: 50%; 
}

#fravaerAlleSaveBtnExtra:hover {
  background-color: white;
}

#fravaerAlleSaveBtnExtra:hover .scrollArrow {
  color: black;
}
#fravaerAlleAngreBtn {
  display: none;
  position: fixed; 
  z-index:3; 
  top:200px;
  left: 170px;
  max-width: 100px; 
  font-size: 16px;
  border: 1px solid black;
  outline: none; 
  background-color:#8F520A;
  color: black;
  cursor: pointer;
  border-radius: 50%; 
}

#fravaerAlleAngreBtn:hover {
  background-color: white;
}
#fravaerAlleAngreBtn:hover .scrollArrow {
  color: black;
} */
.fravaerAlleActionbar { 
  color:#4b00ff
}
html {
  scroll-behavior: smooth;
}

#listview {
  scroll-behavior: smooth;
}

#lw_alt {
  scroll-behavior: smooth;
}

.fag-card-content {
  width: 20rem;
  height: 10rem;
}

.fagfravaer-card-content {
  width: 22rem;
  height: 8rem;
}

.rapport-panel-klasseliste {
  width: 400px;
  height: 200px;
}


.noHeight {
  height: 1px !important;
  max-height: 1px !important;
}

.padding-listview-horizontal-0 {
  --oj-list-view-item-padding-horizontal: 0px;
}


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

  /* OUTLINED */

  /* outlined enabled */
  --oj-button-outlined-chrome-bg-color: rgb(var(--blue-rgb-1));
  --oj-button-outlined-chrome-border-color: var(--oj-button-outlined-chrome-border-color);
  --oj-button-outlined-chrome-text-color: var(--oj-button-borderless-chrome-text-color);

  /* outlined hover */
  --oj-button-outlined-chrome-bg-color-hover: rgb(var(--blue-rgb-2));
  --oj-button-outlined-chrome-border-color-hover: var(--oj-button-outlined-chrome-border-color);
  --oj-button-outlined-chrome-text-color-hover: var(--oj-button-outlined-chrome-text-color);

  /* outlined active */
  --oj-button-outlined-chrome-bg-color-active: var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-border-color-active: var(--oj-button-outlined-chrome-border-color);
  --oj-button-outlined-chrome-text-color-active: var(--oj-button-outlined-chrome-text-color);

  /* outlined disabled */
  --oj-button-outlined-chrome-bg-color-disabled: rgb(var(--blue-rgb-1));
  --oj-button-outlined-chrome-border-color-disabled: rgba(var(--oj-button-outlined-chrome-border-color), 0.1);
  --oj-button-outlined-chrome-text-color-disabled: var(--oj-button-borderless-chrome-text-color-disabled);

}

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

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

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


.button-white-c>button>span:hover {
  background-color: rgb(218, 218, 218) !important;
}
.button-red-c-noicon>button {
  /* background-color: rgb(113, 0, 0) !important; */
  background-color: #FFEBE8 !important;
}

.button-red-c-noicon>button>span:hover {
  background-color: rgb(218, 218, 218) !important; 
} 
.button-red-c>button>span {
  /* background-color: rgb(113, 0, 0) !important; */
  background-color: #FFEBE8 !important;
}

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

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

}
.button-red {
  /* SOLID */

  /* solid enabled */
  --oj-button-solid-chrome-bg-color: var(--oj-core-text-color-danger);
  --oj-button-solid-chrome-border-color: transparent;
  --oj-button-solid-chrome-text-color: white;


  /* solid hover */
  --oj-button-solid-chrome-bg-color-hover: var(--oj-core-text-color-danger);
  --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: var(--oj-core-text-color-danger);
  --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); */

}

.badge-yellow {
  --oj-badge-bg-color: rgb(255, 255, 148);
  --oj-badge-text-color: rgb(89, 57, 20);
}

.meldinger_underline {
  border-bottom: 1px solid darkgreen;
}

.spragler-pattern {
  position: relative;
}


.spragler-pattern:before {
  content: '';
  mix-blend-mode: initial;
  filter: opacity(0.08);
  background-color: #FBF9F8;
  background-image: url("images/spragler.webp") !important;
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: 500px 500px;
  pointer-events: none;
}

.spragler-pattern_dialog {
  position: absolute;
}


.spragler-pattern_dialog:before {
  content: '';
  mix-blend-mode: initial;
  filter: opacity(0.08);
  background-color: #FBF9F8;
  background-image: url("images/spragler.webp") !important;
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: 500px 500px;
}

.linjer-pattern {
  position: relative;
}
.bgbanner {
  position: relative;
  z-index: 999;
}
.bgbanner::before {
  content: '';
  mix-blend-mode: initial;
  /* filter: opacity(1); */
  /* background-color: #FBF9F8; */
  background-image: url("images/test22-cutout.png") !important;
  opacity: 0.7;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* background-size: cover; */
  background-repeat: no-repeat;
  background-size:contain;
  height: 105px;
  /* width: 320px; */
}
.bgcover {
  position: relative;
  z-index: 999;
}
.bgcover:before {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out; 
  content: '';
  mix-blend-mode: initial;
  /* filter: opacity(1); */
  /* background-color: #FBF9F8; */
  /* background-image: url("images/iskole_background_clean.png") !important; */
  background-image: url("images/iskole_background_clean.webp") !important;
  opacity: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* background-size: cover; */
  background-repeat: no-repeat;
  background-size:contain; 
}
 
@media (max-width: 650px) {
  .bgcover:before {
   rotate: 180deg;
  }
}
@media (min-width: 1650px) {
  .bgcover:before {
    /* left: 50%; */
    /* transform: translateX(-50%); */
    background-size: cover;
  }
}
/* @media (min-width: 1800px) {
  .bgcover:before {
    left: 50%;
    transform: translateX(-50%);
  }
} */
.linjer-pattern:before {
  content: '';
  mix-blend-mode: initial;
  filter: opacity(0.88);
  background-color: #FBF9F8;
  background-image: url("images/linjer.png") !important;
  opacity: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: 500px 500px;
}

.selectableClass {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

@media (max-width: 5000px) {

  .table_wrapper {
    white-space: normal;
    word-wrap: break-word !important;
    line-break:normal !important;
    text-align: left;
  }
}

.help_icon {
  color: white;
  font-size: 30px;
}

.help_icon:hover {
  color: lightblue;
}

.help_icon_blue {
  color: #88c1ff;
  font-size: 30px;
}

.help_icon_blue:hover {
  color: #5ea9ff;
  color: black;
}

.logg-pages {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
  overflow: auto;
  transition: transform 0.25s;
}


.logg-involvert-page {
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
  overflow: auto;
  transition: transform 0.25s;
}

@media (max-width: 1023px) {
  .logg-involvert-page {
    width: 100%;

  }
}

.demo-card-container {
  width: 25rem;
  height: 15rem;
  padding: 2rem;
}

.demo-edge-bottom {
  flex-direction: column;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  padding-top: 0px;
  min-height: 40px;
  z-index: 10;
  background-color: var(--oj-core-bg-color-content, #fff);
}

.mobile_tabbar_icon {
  margin-top: px;
}

@media (max-width: 599px) {
.mobile_tabbar_icon {
  margin-top: 8px;
}
}

.mobileBtnHalfWidth {
  min-width: 49%;
}

.mobileBtn40vw {
  min-width: 40vw;
}

.rightCorner {
  position: absolute;
  top: 0;
  right: 0;
}

.leftCorner {
  position: absolute;
  top: 0;
  right: 96%;
}
.leftCorner_merknad {
  position: absolute;
  top: 0;
  width: 10px;
  font-size: 18px;
  color: orange;
  /* right: 96%; */
  z-index: 999;
}
.leftCorner_egenmelding {
  position: absolute;
  top: 0;
  width: 10px;
  font-size: 18px;
  color: blue;
  /* right: 96%; */
  z-index: 999;
}
.custom_dropdownWidth {
  min-width: 30vw;
}

.custom_dropdownWidth_internat {
  min-width: 300px;
}

@media (max-width: 600px) {
  .custom_dropdownWidth {
    min-width: 95vw;
  }

  .custom_dropdownWidth_internat {
    min-width: 95vw;
  }
}

.dialogDim {
  min-width: 70vw;
  min-height: 50vh;
}

.dialogDimMediumSize {
  max-width: 500px;
  max-height: 700px;
}

.dialogDimLargeSize {
  min-width: 60vw;
  min-height: 70vh;
}

.dialogDimVarsel {
  min-width: 1200px;
  min-width: 85vw;

  min-height: 850px;
  max-width: 1200px;
}


@media (max-width: 1500px) {
  .dialogDimLargeSize {
    min-width: 100vw;
    min-height: 80vh;
  }
}

@media (max-width: 600px) {
  .dialogDim {
    min-width: 100vw;
    min-height: 80vh;

  }

  .dialogDimMediumSize {
    min-width: 100vw;
    min-height: 80vh;
  }

  .dialogDimLargeSize {
    min-width: 100vw;
    min-height: 80vh;
  }

  .dialogDimVarsel {
    min-width: 100vw;
    min-height: 100vh;
  }
}

.demo-status-meter-gauge {
  width: 6.25rem;
  height: 3.125rem;
}

@media print {

  html,
  body {
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    page-break-after: avoid;
    page-break-before: avoid;
  }

  .print:last-child {
    page-break-after: auto;
  }

}

.width40vw
{
  width: 40vw;
}

.customTableWidth {
  width: 100vw;
}

@media (max-width: 650px) {
  .customTableWidth {
    width: 100vw;
  }
}

.limitBtnTableHeight {
  max-height: 17px !important;
}

.custom_td {
  padding: 5px;
  font-weight: bold;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--oj-core-divider-color);
  border-bottom-width: 1px;
  min-width: 20px !important;
}

.custom_td_fravaer {
  min-width: 70px !important;
  padding: 5.5px;
  font-weight: bold;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--oj-core-divider-color);
  border-bottom-width: 1px;
}

.custom_input_fullvisning {
  background-color: #ffffff;
}

.custom_input_fullvisning>div>div>input {
  padding: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  background-color: #ffffff;

  /* box-shadow: 2px 2px lightgray; */
}
.custom_input_fullvisning_disabled {
  background-color: #ffffff;
}

.custom_input_fullvisning_disabled>div>div>input {
  padding: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  background-color: #dfdfdf;

  /* box-shadow: 2px 2px lightgray; */
}
.custom_input_fullvisning_avvik_1 {
  background-color: rgb(85, 179, 85);
  color: white;
}

.custom_input_fullvisning_avvik_2 {
  background-color: rgb(25, 109, 137);
  color: white;
}

.custom_input_fullvisning_avvik_3 {
  background-color: rgb(164, 0, 0);
  color: white;
}

.custom_input_orden_adferd>div>div>input {
  padding: 5px !important;
  ;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  /* box-shadow: 2px 2px lightgray; */
}

.custom_input_kar>div>div>input {
  padding: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  /* box-shadow: 2px 2px lightgray; */
}

.custom_input>div>span>div>input {
  padding: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  /* box-shadow: 2px 2px lightgray; */
}

.custom_input_dialog>div>div>input {
  padding: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  /* box-shadow: 2px 2px lightgray; */
}

.custom_input_merknad>div>div>input {
  text-align: left !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border: 1px solid rgb(90, 90, 90, 0.7) !important;
  border-radius: 5px;
  height: 25px !important;
  /* box-shadow: 2px 2px lightgray; */
}

.custom_input_disabled>div>div {
  padding: 5px;
  border-radius: 5px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  height: 15px !important;
  background-color: rgb(231, 229, 229);
  /* box-shadow: 2px 2px lightgray; */
}

/* Spinner/loading */
.spin-container {
  text-align: center;
  margin-top: 100px;
}

.spin {
  border: 3px solid #9f0d0d;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

#loader2 {
  border: 3px solid #ffabab;
  width: 230px;
  height: 230px;
  position: relative;
  top: -216px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

#loader3 {
  border: 3px solid #bd0707a8;
  width: 240px;
  height: 240px;
  position: relative;
  top: -452px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

#loader4 {
  border: 3px solid #e59494;
  width: 260px;
  height: 260px;
  position: relative;
  top: -708px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg)
  }
}

@keyframes rotate2 {
  0% {
    transform: rotateZ(360deg)
  }

  100% {
    transform: rotateZ(0deg)
  }
}


#spinner_text {
  color: #000000;
  font-family: Arial;
  font-size: 15px;
  position: relative;
  top: -851px;
}

/* SLUTT Spinner/loading */

/* SMALL Spinner/loading */
.spin-container_small {
  text-align: center;
  margin-top: 0px;
}

.spin_small {
  border: 3px solid #9f0d0d;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

#loader2_small {
  border: 3px solid #ffabab;
  width: 180px;
  height: 180px;
  position: relative;
  top: -112px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(-360deg)
  }

  100% {
    transform: rotateZ(0deg)
  }
}

@keyframes rotate2 {
  0% {
    transform: rotateZ(360deg)
  }

  100% {
    transform: rotateZ(0deg)
  }
}


#spinner_text_small {
  color: #000000;
  font-family: Arial;
  font-size: 15px;
  position: relative;
  top: -210px;
}


.spinner_screencover {
  background-color: rgba(255, 255, 255, 0.4);
  width: 100%;
  height: 100%;
  z-index: 1051 !important; /* 1051 = 1 høyere enn oj-dialog */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.spinner_screencover_lighter_bg {
  position: absolute;
  top: 9%;
  padding-top: 10%;
  left: 30%;
  right: 30%;
  bottom: 30%;
  z-index: 1 !important;
}

/* SLUTT Spinner/loading */

.linjer-pattern {
  position: relative;
}


.linjer-pattern:before {
  content: '';
  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;
}

.slideInDiv {
  width: 100%;
  z-index: 1;
  animation-duration: 0.6s;
  animation-name: slide-in;
  white-space: nowrap;
  transition: background-color 1s linear;
}

.slideOutDiv {
  animation-duration: 2.6s;
  animation-name: slide-out;
  margin-left: 10px;
  transition: background-color 1s linear;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 600ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

#slideInDiv_fravaersforere, #slideInDiv_oppmote, #slideInDiv_endreFravaer{
  animation-duration: 0.6s;
  animation-name: slide-in;
  white-space: nowrap;
  transition: background-color 1s linear;
}

#slideOutDiv {
  animation-duration: 0.6s;
  animation-name: slide-out;
  white-space: nowrap;
  left: 5000px;
  transition: background-color 1s linear;
}

.kostLosjiTableElev {
  width: 100%;
  z-index: 1;
  font-size: smaller;

}

#kostLosjiTableElev {
  animation-duration: 0.6s;
  animation-name: slide-in;
  white-space: nowrap;
  /* background-color: #88c1ff;
  border-left: 3px solid #88c1ff; */
  margin-left: -5px;
  transition: background-color 1s linear;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 600ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  font-size: smaller;
}


.demo-container {
  overflow: hidden;
  white-space: nowrap;
}

.demo-panel {
  display: inline-block;
  transition: transform 233ms;
  transform: perspective(2000px) rotateY(0deg);
  transform-origin: left;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.demo-closed {
  transform: perspective(2000px) rotateY(90deg);
}

.animatedTable {
  transition-duration: 483ms;
}

.detailPanel {
  transition-duration: 283ms;
}

.fravaerSlideInBefore {
  left: 5000px;
  position: absolute;
  transform: translateX(5000%);
}

.fravaerSlideIn {
  animation-duration: 0.4s;
  animation-name: slide-in;
  transition: background-color 1s linear;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 400ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

.fravaerSlideOut {
  animation-duration: 0.6s;
  animation-name: slide-out;

  margin-left: 10px;
  transition: background-color 1s linear;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 600ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  display: hidden;
}


.varselSlideInBefore {
  left: 5000px;
  /* position: absolute; */
  transform: translateX(5000%);
}

.varselSlideUp {
  animation-duration: 0.4s;
  animation-name: slide-up;
  transition: background-color 1s linear;
  white-space: inherit;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 400ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

.varselSlideDown {
  animation-duration: 1.1s;
  animation-name: slide-down;

  transition: background-color 1s linear;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 600ms ease-in-out;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
}

.varselSlideOutLW {

  animation-duration: 1.4s;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 400ms ease-in-out;
}

.varselSlideInLW {
  animation-duration: 1s;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 400ms ease-in-out;
}

.fadein {
  -webkit-animation: fadein 1.5s;
  /* Safari, Chrome and Opera > 12.1 */
  animation: fadein 1.5s;
}

/* Safari, Chrome and Opera > 12.1 */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* @keyframes slide-down {
  0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); } 
} */
@keyframes slide-up {
  from {
    margin-top: 10%;
    margin-left: 30000px;
    /* top:5000; */
    width: 0%;
  }

  to {
    margin-top: 0;
    margin-left: 0;
    top: 0;
    width: 100%;
  }
}

@keyframes slide-down {
  from {
    margin-top: 0;
    margin-left: 0;
    /* top:5000; */
    width: 0%;
  }

  to {
    margin-top: 200%;
    margin-left: 40%;
    top: 0;
    width: 0%;
  }
}

@keyframes slide-in {
  from {
    margin-left: 100%;
    top: 0;
    width: 300%;
  }

  to {
    margin-left: 0%;
    top: 0;
    width: 100%;
  }
}

@keyframes slide-out {
  from {
    margin-right: 0%;
    top: 0;
    width: 100%;
  }

  to {
    margin-left: 100%;
    top: 0;
    width: 300%;
  }
}

.kostLosjiTableRow {
  color: "yellow";
  background-color: "red";
}


.egenmelding_cardface {
  width: 100%;

  position: absolute;
  top: 0px;
  left: 0px;
  backface-visibility: hidden;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
}

.egenmelding_height {
  height: calc(100vh - 250px);
}

@media (max-width: 600px) {
  .egenmelding_height {
    height: calc(100vh - 230px);
  }
}

.egenmelding_dag {
  transform: rotateY(180deg);
}

/************** Tool Tip Styles ********************************/
.tool-tip {
  display: inline-block;
  position: relative;
  /* margin-left: 0.5em; */
  cursor: help;
  max-width: 450px;
  left: 00px;
}


.tool-tip .tool-tip__info {
  cursor: help;
  display: block;
  opacity: 0;
  background: #faf7f7;
  border: 2px solid #27b1f0;
  border-radius: 3px;
  font-size: 0.875em;
  padding: 1em;
  position: absolute;
  left: 00px;
  top: -20px;
  width: 250px;
  border: 1px solid black;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px 3px #666;
  -webkit-box-shadow: 0 0 3px 3px #666;
  box-shadow: 1px 2px 3px 3px #666;
  z-index: 2;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
  vertical-align: top;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;

}

.tool-tip .tool-tip__info .info {
  display: block;
  color: #000000;

}

.tool-tip:hover .tool-tip__info,
.tool-tip:focus .tool-tip__info {
  display: inline-block;
  color: blue;
  opacity: 1;
  transition: opacity 0s linear 1s;
  transform: translate3d(-50%, 0%, 0);
  transition: all .3s ease;
  transition-delay: 1.2s;

}

@media (max-width: 600px) {
  .tool-tip .tool-tip__info {
    left: 130px;
  }
}

.absolutePos {
  position: absolute
}

.top {
  top: 0
}

.middle {
  top: 50%;
  margin-top: -10px;
  /*half of the .box height*/
}

.bottom {
  bottom: 0
}

.left {
  left: 0;
}

.center {
  left: 50%;
  margin-left: -10px;
  /*half of the .box width*/
}

.right {
  right: 0;
}

.demo-form-layout {
  width: 20rem;
  border: dashed 1px;
}


ul {
  list-style: none;
}

.context-menu {
  position: absolute;
  z-index: 999;
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  padding: 10px 0;
  z-index: 999;
}

.menu>li>a {
  font: inherit;
  border: 0;
  padding: 10px 30px 10px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: unset;
  color: #000;
  font-weight: 500;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.25s linear;
  -o-transition: 0.25s linear;
  z-index: 999;
}

.menu>li>a:hover {
  background: #f1f3f7;
  color: #4b00ff;
}

.menu>li>a>i {
  padding-right: 10px;
}

.menu>li.trash>a:hover {
  color: red;
}

.tuiCustomButton {
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  text-align: center;
  outline: none;
  font-size: 12px;
  cursor: pointer;
  color: #333;


}

.tuiCustomButton:hover {
  border-color: #bbbbbb;
  color: #333333;
}

.tuiCustomButton:active {
  background: #f9f9f9;
  color: #333333
}

/* Fix: fjerne evt (høyde i menyen per item, lavere gir mindre luft mellom menyvalgene */
.oj-navigationlist-vertical {
  --oj-navigation-list-item-min-height: 3rem;
  /* --oj-navigation-list-item-label-color: #D5D2D2; */
 /* --oj-navigation-list-item-label-color: #585856; */
  
}
.darkTextLightBackground {
  --oj-navigation-list-item-label-color: #585856; 
}
.lightTextDarkBackground {
  --oj-navigation-list-item-label-color: #D5D2D2; 
}
/* kommentere tilbake etter update */
/* .btnLeftAlignedText .oj-button-label {
    justify-content: left;
  } */

.responsive_selectsingle {
  width: 300px;
}

@media (max-width: 600px) {
  .responsive_selectsingle {
    width: 95vw
  }
}


/* Farger text-color (brukt i plagiatkontroll */

.lightblue-text-color {
  color: blue;
}

.lightgreen-text-color {
  color: green;
}

.yellow-text-color {
  color: yellow;
}

.orange-text-color {
  color: orange;
}

.red-text-color {
  color: red;
}

.bg_lest {
  background-color: beige;
}

.bg_ulest {
  background-color: red;
}


/* Rapporter: top-panel overskrift flik */
.rapporter_flik {
  padding-bottom: 4px;
  z-index: 1;
  border-bottom: 0px;
  border-end-end-radius: 0px;
  /* border-color:    rgb(255, 245, 139, 0.2) !important;
  background-color: rgb(255, 245, 139, 0.2) !important; */
  border-end-start-radius: 0px;
}

/* .rapporter_yellow {
  background-color: rgb(255, 245, 139, 0.2);
  border-color:    rgb(255, 245, 139, 0.2);;
} */

/* JET Classes */
.actioncard_nokkelpersoner {
  min-width: 300px !important;
  max-width: 300px !important;
  height: 300px;
}

.nokkel-animatable {
  position: relative;
  min-width: 300px !important;
  max-width: 300px !important;
  height: 300px;
}

.nokkel-cardface {
  /* width: 100%;
  height: 21.25rem; */
  position: absolute;
  /* top: 0;
  left: 0; */
  backface-visibility: hidden;
  min-width: 300px !important;
  max-width: 300px !important;
  height: 300px;
}

.nokkel-backside {
  transform: rotateY(180deg);
}



@media (max-width: 600px) {
  .actioncard_nokkelpersoner {
    min-width: 90vw !important;
    max-width: 90vw !important;
    height: 280px;
  }

  .nokkelpersoner_avatarcontainer {
    position: inherit;
    right: inherit;
  }

  .nokkel-cardface {
    min-width: 95% !important;
    max-width: 95% !important;
  }

  .nokkel-animatable {
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 300px;
  }

}

.fixedElement {
  display: block;
  position: fixed;
  bottom: 95px;
  right: 5px;
  z-index: 9999;
  font-size: 18px;
  border: 1px solid black;
  outline: none;
  background-color: #227E9E;
  color: white;
  cursor: pointer;
  /* border-radius: 50%; */
}

.looseElement {
  /* position:absolute; */
  top: 0px !important;
  width: 100%;
  z-index: 1 !important;
  position: -webkit-sticky !important;
  /* Safari */
  position: sticky !important;
}

@media (min-width: 600px) and (max-width: 700px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 73px !important;
    ;
  }
}

@media (min-width: 700.1px) and (max-width: 835px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 110px !important;
    ;
  }
}

@media (min-width: 835.1px) and (max-width: 1023.9px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 150px !important;
    ;
  }
}

@media (min-width: 1024px) and (max-width: 1166px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 110px !important;
    ;
  }
}

@media (min-width: 1166.1px) and (max-width: 1300px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 160px !important;
    ;
  }
}

@media (min-width: 1300.1px) and (max-width: 1475.99px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: 203px !important;
    ;
  }
}

@media (min-width: 1476px) {
  .fagfravaerBarTopBtnDisplay {
    max-width: inherit !important;
    ;
  }
}

/* Brukergrupper-tabell */
.brukergruppe_maxheight {
  max-height: 30vh;
  cursor: pointer;
}

.input_max_width_200 {
  max-width: 200px !important;
}

.input_max_width_250 {
  max-width: 250px !important;
}

.input_max_width_300 {
  max-width: 300px !important;
}

.input_max_width_350 {
  max-width: 350px !important;
}

.input_min_width_350 {
  min-width: 350px !important;
}

.float_right {
  float: right !important;
}

.float_left {
  float: left !important;
}

.tableWidthAdjusted {
  width: calc(100vw - 301px);
}

@media (max-width: 1200px) {
  .tableWidthAdjusted {
    width: calc(100vw - 30px);
  }
}

.table_row:hover {

  /* background-color: #ffff99; */
  background-color: rgb(var(--oj-palette-success-rgb-10));
}
.selected_row_keyboard {
  background-color:rgb(var(--oj-palette-success-rgb-10));
}
.cursor_F { 
  cursor: url("images/cursor_f_10px.png") 0 0  ,auto;
}
.cursor_S { 
  cursor: url("images/cursor_s_10px.png") 0 0  ,auto;
}
.cursor_O { 
  cursor: url("images/cursor_o_10px.png") 0 0  ,auto;
}
.cursor_M { 
  cursor: url("images/cursor_m_10px.png") 0 0  ,auto;
}
.cursor_I { 
  cursor: url("images/cursor_i_10px.png") 0 0  ,auto;
}
.cursor_D { 
  cursor: url("images/cursor_d_10px.png") 0 0  ,auto;
}
.cursor_eraser { 
  cursor: url("images/cursor_eraser_bold_18px.png") 0 0  ,auto;
}
.cursor_dagfravaer {
  cursor: not-allowed !important;
  font-weight: bolder;
}
.komprimert_table_adjuster {
  top: 0px !important;
}  
.komprimert_mini_th {
  padding: 0px !important;
  padding-left: 25px !important;
  margin: 0px !important;
  max-width: 20px !important;
  min-height: 90px !important;
  max-height: 100px !important; 
  height: 40px !important;
  
  padding-top: 15px !important;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--oj-core-divider-color);
  border-bottom-width: 1px;
}

.komprimert_mini_td {
  padding: 0px !important;
  margin: 0px !important;
  min-width: 10px !important;
  width: 10px !important;
  max-width: 10px !important;
  max-height: 2px !important;
  font-size: smaller;

}
.komprimert_mini_td:hover {
  background-color: rgb(var(--oj-palette-success-rgb-10)) !important;
} 

.komprimert_header {
  /* transform: rotate(315deg) !important; */  
  height: 50px !important;
  white-space: nowrap;
  padding: 2px !important;
  margin: 0px !important; 
}

.komprimert_rotate {
  /* Something you can count on */
  height: 0px !important;
  white-space: nowrap;
  border: 0px;
  border-inline-end-style: dotted;
  overflow: visible;
}

.komprimert_rotate>div {
  transform:
    /* Magic Numbers */
    translate(-18px, -10px)
    translateY(5px)
    /* 45 is really 360 - 45 */
    rotate(325deg);
  width: 80px;
}

.komprimert_rotate>div>span {
  border-bottom: 0px solid #ccc;
  padding: 0px 16px 5px !important;
  border-end-end-radius: 15px;
  border-end-start-radius: 15px;
  border-start-end-radius: 15px;
  border-end-start-radius: 15px;
  margin: -10px;
  font-size: small; 
}
 
.mini_th { 
  padding: 0px !important;
  padding-left: 3px !important;
  margin: 0px !important;
  max-width: 20px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  height: 105px !important;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-core-divider-color);
  border-inline-start-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--oj-core-divider-color);
  border-bottom-width: 1px;
}

.mini_td {
  padding: 0px !important;
  margin: 0px !important;
  min-width: 10px !important;
  width: 10px !important;
  max-width: 10px !important;
  max-height: 2px !important;
  font-size: smaller;

}

.rotate90 {
  transform: rotate(45deg) !important;
}

.rotate {
  /* Something you can count on */
  height: 10px !important;
  white-space: nowrap;
  border: 0px;
  border-inline-end-style: dotted;
}

.rotate>div {
  transform:
    /* Magic Numbers */
    translate(10px, 35px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}

.rotate>div>span {
  border-bottom: 1px solid #ccc;
  padding: 0px 15px 1px !important;
  border-end-end-radius: 15px;
  border-end-start-radius: 15px;
  border-start-end-radius: 15px;
  border-end-start-radius: 15px;
  margin: -15px;
  font-size: small;

}

@media (min-width: 1520px) {
  .rotate>div>span {
    padding: 2px 16px 3px !important;
    /* vertical-align: top !important; */
  }
}

@media (min-width: 1920px) {
  .rotate>div>span {
    padding: 4px 16px 7px !important;
  }
}

@media (min-width: 2220px) {
  .rotate>div>span {
    padding: 3px 16px 12px !important;
  }
}

.dayNameAbsolute {
  position: static;
  z-index: -991;
  font-size: small;
  right: 0;
  top: 0;
}

.td_border_left {

  border-left: 1px solid rgba(204, 204, 204, 0.475) !important;
  border-bottom: 0px solid !important;
}

.td_border_bottom {
  border-bottom: 1px solid rgba(204, 204, 204, 0.475) !important;
}

.td_no_border {
  border: 0px solid !important;

}

.td_no_border_left {
  border-left: 0px solid !important;

}

.ojet_table_header_fravaeralle {
  /* z-index: -100;
opacity: 0.3;
background-color: inherit; */
  /* opacity: 0;   */
  /* z-index: -999 !important; */
  z-index: 0 !important;
  opacity: 0 !important;
  transform:
    /* Magic Numbers */
    translate(0px, 100px)
    /* 45 is really 360 - 45 */
    rotate(0deg);
  width: 20px !important;
  max-width: 20px !important;
}

.infoBtnInTable {
  margin-left: -17px !important;
  max-width: 30px !important;
  max-height: 35px !important;
  align-items: stretch !important;
  text-align: left !important;
  /* width:15px !important; */
  /* padding-right:0px !important; */
}

.absolutePos {
  position: absolute !important;
  left: 0;
  right: 50;
  top: 200;
  bottom: 500;
}


.selectableClass {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.startside_tp_container {
  width: 100% !important;
  max-width: 867px !important;
}

@media (min-width: 1630px) {
  .startside_tp_container {
    max-width: 350px !important;
  }
}

.startside_tp_container_uten_roller {
  width: 100% !important;
  max-width: 425px !important;
}

@media (min-width: 1630px) {
  .startside_tp_container_uten_roller {
    max-width: 787px !important;
  }
}

.startside_tilbakemeldinger_container {
  width: 98% !important;
  max-width: calc(867px) !important;
}

@media (min-width: 1630px) {
  .startside_tilbakemeldinger_container {
    max-width: 1223px !important;
  }
}

.startside_min_oversikt_container {
  min-width: 300px !important;
  max-width: 415px !important;
  /* max-width: 867px !important; */
}

@media (min-width: 420px) {
  .startside_min_oversikt_container {
    min-width: 425px !important;
    max-width: 425px !important;
  }
}

.startside_ks_container {
  min-width: 300px !important;
  max-width: 415px !important;
  /* max-width: 867px !important; */
}

@media (min-width: 420px) {
  .startside_ks_container {
    min-width: 425px !important;
    max-width: 425px !important;
  }
}

/* Startsiden: nyhetsinnslag — begrens linjelengden for lesbarhet
   når panelet går i full bredde */
.startside_nyhet_item {
  max-width: 60rem;
}


.divGlow {
  /* width: 200px;
  height: 200px; */
  /* border-radius: 100px; */
  background-color: #ccc;
  animation: glow 0.7s 20 alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 2px -2px #aef4af;
  }

  to {
    box-shadow: 0 0 2px 2px #aef4af;
  }
}

.visMenyGlow {
  /* width: 200px;
  height: 200px; */
  /* border-radius: 100px; */
  /* background-color: #ccc; */
  animation: menyGlow 0.7s 10 alternate;
}

@keyframes menyGlow {
  from {
    box-shadow: 0 0 2px -2px #aef4af;
  }

  to {
    box-shadow: 0 0 2px 2px #227E9E;
  }
}

.visMenyHintClass {
  background-color: white;
  opacity: 1;
  position: absolute;
  transition: opacity 1.25s ease-in-out;
  -moz-transition: opacity 1.25s ease-in-out;
  -webkit-transition: opacity 1.25s ease-in-out;
  width: 300px;
  left: 60px;
  top: 10px;
  padding-top: 13px;
  padding-left: 10px;
  height: 45px;
  z-index: 1;
}

.skjulMenyHintClass {
  /* background-color: aliceblue; */
  background-color: white;
  /* display: hidden; */

  opacity: 0;
  position: absolute;
  transition: opacity 1.25s ease-in-out;
  -moz-transition: opacity 1.25s ease-in-out;
  -webkit-transition: opacity 1.25s ease-in-out;
  width: 300px;
  left: 60px;
  top: 10px;
  padding-top: 13px;
  padding-left: 10px;
  height: 45px;
  z-index: -999;
  /* animation-duration: 3.0s;
  animation-name: slide-out;
  white-space: nowrap;
  transition: opacity 1s linear; */
}

.input_color_red>div>div>div>div {
  color: rgb(184, 0, 0);
}

.input_color_green>div>div>div>div {
  color: rgb(0, 115, 57);
}

.headerSizes {
  font-size: large;
}


@media (max-width: 300px) {
  .headerSizes {
    font-size: smaller !important;
  }
}

@media (max-width: 400px) {
  .headerSizes {
    font-size: medium !important;
  }
}

.green-field-color {
  --oj-text-field-bg-color: rgb(var(--oj-palette-success-rgb-10));
  --oj-text-field-border-color: rgb(var(--oj-palette-success-rgb-100));
  --oj-text-field-text-color: rgb(var(--oj-palette-success-rgb-110));
  --oj-label-inside-edge-color: rgb(var(--oj-palette-success-rgb-110));
}

/* oj-animate-add applied just before add animation for setup*/
/* .demo-custom .oj-animate-add {
  transition-property: color, background-color;
} */

/* oj-animate-add-active applied during add, set prop changes here */
/* .demo-custom .oj-animate-add.oj-animate-add-active {
  background-color: RGB(var(--oj-palette-success-rgb-30)) !important;
} */

/* oj-animate-remove applied just before add animation for setup*/
/* .demo-custom .oj-animate-remove {
  transition-property: color, background-color;
} */

/* oj-animate-remove-active applied during add, set prop changes here */
/* .demo-custom .oj-animate-remove.oj-animate-remove-active {
  background-color: RGB(var(--oj-palette-danger-rgb-30)) !important;
} */
.legend_gruppefag {
  background-color: #C1FFC6;
}
.legend_klassefag {
  background-color: #ADE1F6;
}
/* .legend_dagfravaer {
  background-color: #a0a2a8;
}

.legend_dagfravaer_dok {
  background-color: #d7dae2;
}

.legend_timefravaer {
  background-color: #ff4538;
}

.legend_timefravaer_dok {
  background-color: #84d6ff;
}



.legend_fravaer_ikke_vitnemaal {
  background-color: #94ff9b;
} */
.legend_fravaer_udokumentert_u_merknad {
  background-color: #ff4538;
  color: white;
}
.legend_fravaer_udokumentert_m_merknad {
  background-color: #84d6ff;
}
.legend_fravaer_dokumentert {
  background-color: #94ff9b;
}
.legend_sent_til_time {
  background-color: #ffff94;
}
.fravaerOversikt_btnInTable {
  margin-left: -17px !important;
  max-width: 30px !important;
  max-height: 25px !important;
  align-items: stretch !important;
  text-align: left !important;
  /* width:15px !important; */
  /* padding-right:0px !important; */
}

#tooltip {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  padding: 5px;
  border: 1px solid #ccc;
  z-index: 99;
}

#tooltipAvatar {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  padding: 5px;
  border: 1px solid #ccc;
  z-index: 99;
}

.tooltip-box {
  background-color: white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
  position: absolute;
  z-index: 1;
}

.tooltip-box::before {}

/* Elevliste i timeplan-popup */
.elevliste-wrapper {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 8px;
}

.elevliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.elevliste-item {
  padding: 2px 8px 2px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.elevliste-item > span:last-child {
  word-break: break-word;
}

.elevliste-ikon {
  flex: 0 0 auto;
  font-size: 0.75em;
  opacity: 0.55;
}

td.highlight {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
}

td.highlight2 {
  background-color: #c2c2c2 !important;
  color: rgb(0, 0, 0) !important;
}

.fontXsmall {
  font-size: x-small;
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

.opacity03 {
  opacity: 0.3 !important;
}
.opacity05 {
  opacity: 0.5 !important;
}
.opacity1 {
  opacity: 1 !important;
}
.hideClass {
  opacity: 0;
}

.sliderTextBig>oj-label {
  font-size: 20px !important;
  --oj-text-field-text-color: rgb(var(--oj-palette-info-rgb-110));
  --oj-label-inside-edge-color: rgb(var(--oj-palette-info-rgb-110));
}

@media (min-width: 500px) {
  .komprimertSelect {
    /* --oj-text-field-inside-edge-height: 52px;  */
    --oj-collection-list-row-height: 0rem;
    /* --oj-text-field-height: 2.75rem; */
    --oj-text-field-inside-edge-padding-top: 0.8125rem;
    --oj-collection-list-cell-padding-vertical: 0px;
    --oj-collection-grid-row-height: 0.0rem;
    --oj-text-field-height: 30px;
  }

  .komprimertTable {
    --oj-collection-grid-cell-padding: 3px;
    --oj-collection-grid-row-height: 1.5rem;
    --oj-collection-grid-header-height: 0.25rem;
    --oj-collection-list-row-height: 0rem;
  }

  .komprimertButton {
    --oj-button-height: 25px;
    --oj-button-sm-height: 25px;
  }

  .komprimertInput {
    --oj-text-field-height: 0rem;
    --oj-text-field-inside-edge-height: 0px;
    --oj-text-field-font-size: 12px;
    --oj-text-field-text-to-edge-padding: 0px;
  }

  .komprimertColspanHeadersFravaerSum {
    font-size: smaller !important;
    text-align: right !important;
    min-width: 70px !important;
    width: 70px !important;
  }

  .komprimertFravaerSumWidth {
    min-width: 1100px !important;
    max-width: 1200px !important;
  }

  :root {

    /* --oj-tab-bar-item-min-height: 40px ;  */
    --oj-collection-list-row-height: 2rem;
    /* --oj-button-height:  18px;
  --oj-button-sm-height:  18px; */
    --oj-navigation-list-font-size: var(--oj-typography-body-sm-font-size);


  }

  .oj-navigationlist-vertical {
    --oj-navigation-list-item-margin: 0.0rem !important;
    --oj-navigation-list-item-min-height: 2.1rem;
    --oj-navigation-list-icon-to-text-padding: 0.2rem;
  }
  #demodrawerstart {
    transition: background-color 1.4s ease;  
  }
  #navDrawerList_adf2 {
    transition: background-color 1.4s ease;  
  }
  .modulerMenyBg_inverted {
    background-color: rgb(19, 36, 52);
  }
  .modulerMenyBg {
    background-color: rgb(239, 235, 235);
  }
  .iskole-tabbar-icon{
    width: 40px !important;
  }
  .duotone-gray-green{
    --fa-primary-color:  rgb(79, 120, 41); 
    --fa-secondary-color: rgb(110, 109, 109);
    --fa-secondary-opacity: 1.0;
  }
  .duotone-primary-red{
    --fa-primary-color: rgb(221, 0, 0);
  }
  .duotone-primary-orange{
    --fa-primary-color: orange;
  }
  .duotone-primary-lightgreen{
    --fa-primary-color: #a9c555;
  }

  /* oj-table {
    --oj-button-sm-height: 25px;
    --oj-text-field-height: 30px;
    --oj-collection-list-cell-padding-vertical: 2px;
    --oj-collection-grid-cell-padding: 2px;
    --oj-collection-grid-row-height: 2rem;
    --oj-collection-list-row-height: 2rem;
    --oj-core-bg-color-hover: rgb(var(--oj-palette-success-rgb-10));
  } */
/* Endrer kun på button-sm i list-view for å ikke endre knapper overalt i listviewer. F.eks meldinger nedlastingsikon mm */
  /* oj-list-view {
    --oj-button-sm-height: 30px;
    --oj-radio-checkbox-row-height: 0rem;
    --oj-text-field-height: 30px;
    --oj-collection-list-cell-padding-vertical: 2px;
    --oj-collection-grid-cell-padding: 2px;
    --oj-collection-grid-row-height: 2rem;
    --oj-collection-list-row-height: 2rem;
    --oj-core-bg-color-hover: rgb(var(--oj-palette-success-rgb-10));
  } */

  /* oj-select-single {
  --oj-collection-list-row-height: 2rem; 
  --oj-collection-list-cell-padding-vertical: 2px; 
}
oj-select-many {
  --oj-collection-list-row-height: 2rem; 
  --oj-collection-list-cell-padding-vertical: 2px; 
} */
}


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

.ny_popup1 {
  display: none;
  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 !important;
  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;
}
/* Arrow på midten av elementet */
/* .ny_popup1-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -10px;
  left: calc(50% - 10px);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f9f9f9;
} */
.ny_popup1-arrow-border {
  position: absolute;
  width: 0;
  height: 0;
  top: -12px; /* Slightly larger than the original arrow */
  right: 18px; /* Same horizontal position as the original arrow */
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #ccc; /* Border color, same as the popup border */
  z-index: -1; /* Place it behind the original arrow */
}

.ny_popup1-arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -10px;
  right: 20px; /* Adjust this value to move the arrow horizontally */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f9f9f9;
}
.ny_popup1-content {
  padding: 15px;
  z-index: 999 !important;
}
/* @keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  } 
}

#zoomHintId {
  animation: bounce 1.5s ease-in-out;
  animation-delay: 3.5s;
}
#helpMenu {
  animation: bounce 1.5s ease-in-out;
  animation-delay: 3.7s;
}
#forrigeIskoleId {
  animation: bounce 1.5s ease-in-out;
  animation-delay: 3.9s;
} */
.zoom_popup {
  display: none;
  position: absolute;
  width: 400px;
  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 !important;
  opacity: 0; /* Set initial opacity to 0 */
  transition: opacity 0.9s; /* Add a transition for the opacity property */
}

.middle-center-container-timeplan_min {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100px;
  left: 27.5%;
  width: 50%;
  height: 30%;
}
.middle-center-container-timeplan_ansatt {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  position: absolute;
  top: 150px;
  left: 44.5%;
  width: 50%;
  height: 30%;
}

.multipage-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  overflow: hidden;
}
@media (max-width: 600px) {
  .multipage-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 52px);
    overflow: hidden;
  }
}

.multipage-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  max-width: var(--oj-private-app-layout-max-width);
  box-sizing: border-box;
  overflow: auto;

  transition: transform 0.25s;
}

.multipage-page1-hide {
  transform: translate3d(-210%, 0, 0);
}

.multipage-page2-hide {
  transform: translate3d(210%, 0, 0);
}

.snurr_bg{
  --oc-colors-main-homePageBg: #FBF9F8;
  --oc-colors-coolGrays-10: #f4eff0;
  background-image: url("images/snurr.png");
  background-color: var(--oc-colors-main-homePageBg,--oc-colors-coolGrays-10);
}

.menu_footer { 
  position: relative;
  /* background-color: #3f3a37; */
  /* background-color: #34302c; */
  bottom: 0px; 
  padding-top: -200px;
  width: 300px;
  display: flex;
  justify-content: center;
  z-index: 9999;
}

.menu_footer-text {
  text-align: center;
  font-size: 12px;
  color: rgb(255, 255, 255);

}

.menu_footer-text a {
  color: rgb(170, 170, 170);
  text-decoration: none;
}

.menu_footer-text a:hover {
  color: rgb(255, 255, 255);
} 
.updated {
  position: relative;
}

.updated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px; /* Startposisjon fra venstre */
  width: 500px;
  height: 5px;
  background-color: #aaffaa; /* Lysegrønn farge */
  /* border-radius: 50%; */
  animation: moveGlow 0.5s linear;
}
.updatedSortering {
  position: relative;
}

.updatedSortering::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px; /* Startposisjon fra venstre */
  width: 500px;
  height: 5px;
  background-color: #aaffaa; /* Lysegrønn farge */
  /* border-radius: 50%; */
  animation: moveGlow 0.5s linear;
}

@keyframes moveGlow {
  0% {
    transform: translateX(0);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
  }
  100% {
    transform: translateX(100%); /* Bevegelse til høyre */
    box-shadow: none;
  }
}
 
.minus400px {
  max-height: calc(100vh - 400px) !important
}
.minus250px {
  max-height: calc(100vh - 250px) !important
}
.minus300px {
  max-height: calc(100vh - 300px) !important
}


/* #versionDisplay {
  position: absolute;
  bottom: 0;
  right: 28px;
  padding: 5px;
  font-size: 10px;  
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  z-index: 20;
} */
#versionDisplay {
  position: sticky; 
  cursor:pointer;
  bottom:100vh;
  text-align: center;
  right: 28px;
  padding: 5px;
  font-size: 16px;  
  background-color: #ffca58;
  /* border: 1px solid #ddd; */
  z-index: 20;
  display:none;
}
.localSwVersionUptodate {
  color:rgb(0, 115, 57);
  display: none;
}
.localSwVersionOutofdate {
  color:#000000;
}
#versionDisplay:hover {
  color:aliceblue;
 
} 

#refreshPageBtn {
  margin-right:5px; 
}
 
.versionTooltip { 
  display: none;
  position: absolute;
  width: 400px;
  height: fit-content;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: black;
  z-index: 999;
  padding: 5px;
  text-align: left;
  opacity: 0; /* Set initial opacity to 0 */
  transition: opacity 0.9s; /* Add a transition for the opacity property */
}

.versionTooltip-header {
  font-weight: bold;
}

.versionTooltip-body {
  margin-top: 8px;
}

.calendarHeight {
  height: 70vh;
}

.m_calendarHeight {
  height: calc(100vh - 270px);
}

.m_calendarHeight_prove {
  height: calc(100vh - 470px);
}

.color-preview-tags {
  width: 65px;
  height: 52px;
  border: 1px solid;
}

.color-panel-tags {
  width: 18.438rem;
  height: 18.438rem;
}

.padding0 {
  padding: 0px !important;
}

.feide_icon {
  background-image: url("../images/feide_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 40px;
  width: 40px;
  display: inline-block;
  vertical-align: middle;
}

/* Tre-tabell (udokumentert fravær): farge per nivå så hierarkiet er lesbart
   når man bretter ut elev → fag → økt. Blå-hue med synkende alpha; alpha
   legger seg over gjeldende bakgrunn, så det fungerer i både lys og mørk
   modus uten egne invert-regler. Bakgrunn settes på <td> fordi oj-table eier
   <tr> og selection/grid-overlay ligger på celle-nivå. */
.tre-nivaa-elev td { background-color: rgba(38, 116, 196, 0.16); font-weight: 600; }
.tre-nivaa-fag  td { background-color: rgba(38, 116, 196, 0.07); }
.tre-nivaa-okt  td { background-color: transparent; }

/* ═══ Meldinger 2.0 (portert fra elev) ═══════════════════════════════════ */
/* oj-c-badge: core-pack 20.1.2 shipper en placeholder-regel
   (width: 50px; min-height: 50px) i badge-styles.css som klipper
   teksten til et par tegn — nullstill så badgen følger innholdet. */
oj-c-badge {
  /* !important: komponentens egen CSS injiseres ETTER app.css og vinner
     ellers på lik spesifisitet. */
  width: auto !important;
  min-height: auto !important;
}
.eksamen-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.eksamen-dato-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.eksamen-rad {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.15rem 0;
}
.eksamen-rad > .fas {
  width: 1.2rem;
  text-align: center;
  color: #227e9e;
  flex: none;
}
.eksamen-chip {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.eksamen-chip--info    { background: #e3f2fd; color: #1565c0; }
.eksamen-chip--snart   { background: #fff3e0; color: #e65100; }
.eksamen-chip--passert { background: #eceff1; color: #607d8b; }
@media (hover: hover) {
  .eksamen-kort {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .eksamen-kort:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }
}

/* ── Meldinger 2.0: trådvisning ───────────────────────────────────────── */
.traad-side {
  max-width: 900px;
}
.traad-topp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.75rem;
}
.traad-meldinger {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 1rem;
}
.traad-boble-rad {
  display: flex;
}
.traad-boble-rad--meg {
  justify-content: flex-end;
}
.traad-boble {
  max-width: 78%;
  border-radius: 14px;
  padding: 0.6rem 0.9rem;
}
.traad-boble--meg {
  background: #e3f2fd;
}
.traad-boble-topp {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 0.25rem;
}
.traad-boble-tekst img {
  max-width: 100%;
  height: auto;
}
.traad-delt-merke {
  color: #e65100;
  margin-bottom: 0.25rem;
}
.traad-vedlegg {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.traad-vedlegg-lenke {
  display: inline-block;
}
.traad-svarboks {
  border-radius: 12px;
  padding: 0.75rem;
}
.traad-svar-handling {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.traad-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.traad-antall-chip {
  background: #eceff1;
  color: #607d8b;
  border-radius: 999px;
  padding: 0 0.5rem;
  font-weight: 600;
}
.traad-kladd-chip {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 999px;
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 0.72rem;
}
@media (max-width: 600px) {
  .traad-boble { max-width: 92%; }
}

/* ── Meldinger 2.0: tre-innboks med lesepanel ─────────────────────────── */
.tre-innboks--bred {
  display: grid;
  grid-template-columns: minmax(340px, 2fr) 3fr;
  gap: 1rem;
  align-items: start;
}
.tre-listepanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid #e4e8ea;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.tre-liste {
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
/* Mobil: bunn-tab-baren (.demo-edge-bottom) ligger fast (position: fixed) over
   listas nederste del — JS-høyden (innerHeight - topp - 8) går helt til viewport-
   bunn. Padding gir scroll-rom så siste tråd/melding kan løftes klar av baren —
   samme mønster som .tre-lesepanel/.ny-melding. */
@media (max-width: 599px) {
  .tre-liste {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
/* Søk + filter over scroll-containeren */
.tre-sok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #eef1f3;
  background: #fff;
  flex: none;
}
.tre-sok-ikon { color: #90a4ae; }
.tre-sok-felt {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.2rem;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: transparent;
}
.tre-filter-chip {
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: #455a64;
  background: #eceff1;
  border: 1px solid transparent;
}
.tre-filter-chip.er-aktiv {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #90caf9;
  font-weight: 600;
}
/* Sorteringsvelger i trådlistens verktøylinje (kun Sendt). Fast, smal bredde
   så søkefeltet beholder plassen sin — begge står i samme flex-rad (.tre-sok). */
.tre-sortering {
  flex: none;
  width: 11rem;
  max-width: 45%;
}
.tre-liste-sentinel { height: 1px; }
.tre-laster-mer {
  display: flex;
  justify-content: center;
  padding: 0.8rem;
}
.tre-rad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #eef1f3;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}
.tre-rad:hover {
  background: #f5f7f8;
}
.tre-rad--ulest {
  /* Ulest markeres med rødt antall-badge (+ uthevet tekst og lys bakgrunn).
     Den blå venstrestolpen er reservert for den aktive/valgte tråden. */
  background: #fbfdff;
}
/* Valgt enkeltmelding-tråd (uten utbretting) — samme markering som barneraden */
.tre-rad--valgt,
.tre-rad--valgt:hover {
  background: #d6e9fb;
  border-left-color: #1565c0;
}
.traad-mottakere-vist {
  margin-top: 0.1rem;
}
/* «Gjelder <barn>» — hvilket barn en forelder-melding gjelder (for ansatte) */
.traad-gjelder-elev {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #e3f2fd;
  color: #1565c0;
  font-weight: 600;
}
.tre-pil {
  width: 1rem;
  flex: none;
  text-align: center;
  color: #78909c;
  transition: transform 0.12s ease;
}
.tre-avatar {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.tre-meta-chips {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tre-rad-innhold {
  flex: 1;
  min-width: 0;
}
.tre-utdrag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tre-rad-meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}
/* Utbrettet tråd: innrykket seksjon med trådlinje, tydelig forbi
   hovedradens avatar-kolonne */
.tre-barn {
  margin: 0.15rem 0.75rem 0.6rem 4.2rem;
  border-left: 3px solid #64b5f6;
  background: #f3f8fc;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}
.tre-barnerad {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e3edf4;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.12s ease;
}
.tre-barnerad:last-child {
  border-bottom: none;
}
.tre-barnerad:hover {
  background: #e8f1f8;
}
.tre-barnerad--valgt {
  background: #d6e9fb;
  box-shadow: inset 3px 0 0 #1565c0;
}
/* Utkast-rad i tråden — rød stolpe så den skiller seg fra sendte/mottatte */
.tre-kladderad {
  background: #fdf6f6;
  box-shadow: inset 3px 0 0 #e53935;
  cursor: default;
}
.tre-kladderad:hover {
  background: #fdeeee;
}
.tre-kladd-innhold {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.tre-kladd-ikon {
  color: #e53935;
  font-size: 0.8rem;
}
.tre-kladd-merke {
  color: #c62828;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tre-kladd-handling {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex: none;
}
.tre-barn-utdrag {
  flex: 1;
  min-width: 0;
}
.tre-dot {
  width: 0.7rem;
  flex: none;
}
.tre-dot-ulest {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1565c0;
}
.tre-lesepanel {
  min-width: 0;
}
/* Mobil: bunn-tab-baren (.demo-edge-bottom) ligger fast (position: fixed) over
   innholdet. Gi lesepanelet nok bunnklaring så lang meldingstekst og Send-
   knappen i svarboksen ikke havner bak baren (samme klaring som «Ny melding»). */
@media (max-width: 599px) {
  .tre-lesepanel {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
.tre-lesepanel-tom {
  text-align: center;
  padding: 4rem 1rem;
}
.tre-lesepanel-tom .far {
  font-size: 2.5rem;
  color: #b0bec5;
  display: block;
  margin-bottom: 0.75rem;
}
.tre-lesing-topp {
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0.75rem;
}
.tre-lesing-innhold {
  margin-bottom: 1rem;
}

/* ── Svarboks: mottaker-chips og vedlegg ─────────────────────────────── */
.svar-mottakere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.svar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #eceff1;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
}
.svar-chip-rolle {
  font-size: 0.7rem;
  color: #607d8b;
  text-transform: uppercase;
}
.svar-chip-fjern {
  text-decoration: none;
  color: #90a4ae;
  font-weight: 700;
}
.svar-chip-fjern:hover { color: #d32f2f; }
.svar-til-fast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.svar-til-merke {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #607d8b;
}
.svar-chip-laast {
  background: #e3f2fd;
  font-weight: 600;
}
.svar-kopi-hjelp { margin: 0.2rem 0 0.5rem; }
.svar-leggtil { max-width: 380px; margin-bottom: 0.5rem; }
.svar-vedlegg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.svar-filvelger { display: inline-block; }
.svar-varsling { margin: 0.6rem 0 0; }

/* ── Lesepanel: handlingsrad og videresend-komponering ───────────────── */
.tre-handlinger {
  display: flex;
  flex-wrap: wrap;            /* telefon: knappene bryter i stedet for å renne ut */
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}
.fwd-boks {
  border: 1px solid #90caf9;
}
.tre-slett-knapp {
  margin-left: auto;
}
.traad-slettboks {
  border: 1px solid #ef9a9a;
  margin-bottom: 0.75rem;
}

/* ── Sendte: sendingsoversikt ──────────────────────────────────────────── */
.sendte-oversikt {
  max-width: 56rem;
  padding: 0.5rem 0.25rem;
}
.sendte-kort {
  border-bottom: 1px solid var(--oj-core-divider-color, #e0e0e0);
}
.sendte-sok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0.25rem 0.6rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #cfd8dc;
  border-radius: 999px;
  background: #fff;
}
.sendte-liste {
  overflow-y: auto;
  overflow-x: hidden;
}
.sendte-liste-sentinel { height: 1px; }
/* Leveringsdetalj gjenbrukt i innboks-lesepanelet (sendt-modus): nullstill
   liste-spesifikke marginer fra .sendte-detaljer. */
.traad-leveringsdetalj {
  margin: 0.9rem 0 0;
}
.sendte-rad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  border-radius: 8px;
}
.sendte-rad:hover {
  background: rgba(0, 0, 0, 0.04);
}
.sendte-rad-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}
.sendte-lest-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eceff1;
  color: #455a64;
  white-space: nowrap;
}
.sendte-lest-chip--alle {
  background: #e8f5e9;
  color: #2e7d32;
}
.sendte-detaljer {
  margin: 0 0.5rem 0.9rem 2.1rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid #64b5f6;
  background: rgba(100, 181, 246, 0.06);
  border-radius: 0 8px 8px 0;
}
.sendte-mottaker,
.sendte-varsel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0;
}
.sendte-lest-ikon { color: #b0bec5; }
.sendte-lest-ikon--lest { color: #2e7d32; }
.sendte-lest-tid { margin-left: auto; }
.sendte-varsel-status {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #eceff1;
  color: #455a64;
}
.sendte-varsel-status--sendt { background: #e8f5e9; color: #2e7d32; }
.sendte-varsel-status--feilet { background: #ffebee; color: #c62828; }
.sendte-varsel-status--supprimert { background: #fff3e0; color: #e65100; }
.sendte-varsel-problem {
  flex-basis: 100%;
  padding-left: 0.2rem;
}

/* Sendte-detalj: sammendrag + filter + sammenslåtte mottakerlinjer */
.sendte-sammendrag {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.sendte-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.sendte-filter-chip {
  text-decoration: none;
  font-size: 0.78rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  color: #455a64;
  background: #eceff1;
  border: 1px solid transparent;
}
.sendte-filter-chip.er-aktiv {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #90caf9;
  font-weight: 600;
}
.sendte-mottaker-navn { font-weight: 500; }
.sendte-kanaler {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.sendte-kanal-chip {
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #eceff1;
  color: #455a64;
  cursor: default;
}
.sendte-kanal-chip--sendt { background: #e8f5e9; color: #2e7d32; }
.sendte-kanal-chip--feilet { background: #ffebee; color: #c62828; }
.sendte-kanal-chip--supprimert { background: #fff3e0; color: #e65100; }
.sendte-kanal-chip--ny { background: #eceff1; color: #607d8b; }
/* Umiddelbar, stylet tooltip på kanal-chips — ren CSS (data-tip), ingen
   komponent per chip, så den skalerer til hundrevis av rader uten kostnad. */
.sendte-kanal-chip[data-tip] { position: relative; }
.sendte-kanal-chip[data-tip]:hover::after,
.sendte-kanal-chip[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: #37474f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 400;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 20;
  pointer-events: none;
}
.sendte-kanal-chip[data-tip]:hover::before,
.sendte-kanal-chip[data-tip]:focus::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #37474f;
  z-index: 20;
  pointer-events: none;
}
.sendte-kanal-problem {
  color: #c62828;
  margin: 0 0 0.25rem 1.5rem;
}
.sendte-tomt { padding: 0.3rem 0; }
.sendte-vis-alle { margin-top: 0.4rem; }
.sendte-detalj-handling {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.sendte-vis-flere {
  text-align: center;
}
.kladd-rad {
  cursor: default;
}
.kladd-rad:hover {
  background: none;
}
.kladd-klikk {
  cursor: pointer;
  border-radius: 6px;
}
.kladd-klikk:hover {
  background: rgba(0, 0, 0, 0.04);
}
.kladd-handlinger {
  margin: 0;
}

/* ── Ny melding: komponering ───────────────────────────────────────────── */
.ny-melding {
  max-width: 56rem;
  padding: 0.5rem 0.25rem 2rem;
}
.ny-kopi-lenke {
  display: inline-block;
  margin: 0.3rem 0 0.6rem;
}
.ny-kopi-seksjon {
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid #90caf9;
  background: rgba(100, 181, 246, 0.06);
  border-radius: 0 8px 8px 0;
}
.ny-velger {
  max-width: 30rem;
  margin: 0.3rem 0 0.6rem;
}
.ny-emne {
  width: 100%;
  margin: 0.4rem 0;
}
.ny-tekst {
  width: 100%;
  margin: 0.4rem 0 0.8rem;
}
.ny-handlinger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

/* Mobil: bunn-tab-baren (.demo-edge-bottom) ligger fast (position: fixed) over
   innholdet. Gi skjemaet nok bunnklaring så «Lagre utkast»/«Send melding» ikke
   havner bak baren (80px matcher klaringen andre steder; safe-area for notch). */
@media (max-width: 599px) {
  .ny-melding {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Ny melding (ansatt): grupper + varsling ───────────────────────────── */
/* oj-c-collapsible styrer egen ramme/header; vi trenger bare vertikal luft. */
.ny-grupper {
  display: block;
  margin: 0.8rem 0;
}
.ny-gruppe-velgere {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.ny-gruppe-velgere .ny-velger { margin: 0; min-width: 16rem; }
.ny-roller {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}
.ny-gruppe-chips { margin-top: 0.4rem; }
.ny-gruppe-chip {
  background: #ede7f6;
  border: 1px solid #b39ddb;
}
.ny-foreldre-bryter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.ny-varsling {
  margin: 0;
}
/* Valgene for sendingen (e-postvarsling + foreldre) samlet over Send-knappen */
.ny-valg {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--oj-core-divider-color, #e0e0e0);
  border-radius: 6px;
}
.ny-valg .ny-foreldre-bryter { margin-top: 0; }
.ny-myndige { flex-wrap: wrap; margin-left: 1.6rem; }  /* underordnet «Send også til foreldrene» */

/* ── SMS (ansatt) ──────────────────────────────────────────────────────── */
.sms-teller {
  margin: 0.1rem 0 0.6rem;
}
.sms-handlinger {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.sms-estimat {
  flex: 1 1 auto;
}
.sms-handlinger .oj-c-button:last-child {
  margin-left: auto;
}
.sms-historikk {
  margin-top: 1.6rem;
  border-top: 1px solid var(--oj-core-divider-color, #e0e0e0);
  padding-top: 1rem;
}
.sms-sok {
  max-width: 30rem;
  margin-bottom: 0.6rem;
}
.sms-rad {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--oj-core-divider-color, #eee);
}
.sms-rad-topp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.sms-rad-melding {
  margin-top: 0.15rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   Fraværskalender (fravaersoversikt_elev) — .frv-*
   Håndkodet årsvisning; fargene er CVD-validert som sett.
   Farge = konsekvens for fraværsgrensen; skravur = egenmelding
   venter; prikk = merknad; lilla merke = registrert dagfravær.
   ============================================================ */
/* .oj-panel har overflow:hidden i Redwood-temaet (Oracles CDN). Det klipper
   scroll-konteksten og slår ut position:sticky i kalenderen — panelet som
   omslutter fraværsoversikten må derfor slippe innholdet fritt. */
.frv-vert { overflow: visible !important; }

.frv-workspace {
  --frv-udok: #e45745;
  --frv-hdok: #1f5f9e;
  --frv-egen: #45a3e0;
  --frv-unnt: #2a9d77;
  --frv-sent: #eda100;
  --frv-fri: #c8d4d8;
  --frv-dag: #7253a5;
  --frv-ink: #152b35;
  --frv-ink-2: #3e5057;
  --frv-muted: #64727a;
  --frv-line: #dce5e7;
  --frv-surface: #ffffff;
  --frv-soft: #f8faf9;
  --frv-brand: #075c68;
  --frv-brand-tint: #e9f5f4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  color: var(--frv-ink);
}
.frv-workspace.frv-detalj-open { grid-template-columns: minmax(0, 1fr) 300px; }
.frv-workspace .frv-detail { display: none; }
.frv-workspace.frv-detalj-open .frv-detail { display: flex; }

.frv-cal-card, .frv-detail {
  border: 1px solid var(--frv-line);
  border-radius: 14px;
  background: var(--frv-surface);
  box-shadow: 0 2px 8px rgba(17, 55, 63, 0.06);
}
.frv-toolbar {
  position: sticky; top: var(--frv-sticky-top, 0px); z-index: 3;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--frv-line);
  background: var(--frv-surface); border-radius: 14px 14px 0 0;
}
.frv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.frv-filter {
  display: flex; gap: 7px; align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--frv-line); border-radius: 99px;
  color: var(--frv-ink-2); background: var(--frv-surface);
  cursor: pointer; font-size: 0.8rem; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.frv-filter:hover, .frv-filter.frv-active { color: var(--frv-ink); border-color: currentColor; box-shadow: 0 2px 7px rgba(16, 50, 58, 0.1); }
.frv-filter i { width: 9px; height: 9px; border-radius: 3px; background: var(--frv-color); flex: none; }
.frv-filter i.frv-tynn { height: 3px; border-radius: 99px; }
.frv-filter i.frv-hul { background: transparent; box-shadow: inset 0 0 0 1.5px var(--frv-fri); }
.frv-filter i.frv-hatched {
  background: repeating-linear-gradient(135deg, var(--frv-color) 0 2px, #e4eaed 2px 4px);
}
.frv-clear { margin-left: auto; border: 0; color: var(--frv-brand); background: transparent; cursor: pointer; font-size: 0.8rem; font-weight: 700; font-family: inherit; }
.frv-cal-scroll { }
.frv-cal { padding: 12px 16px 16px; }
.frv-days, .frv-week { display: grid; grid-template-columns: var(--frv-cols, 76px repeat(5, minmax(104px, 1fr))); gap: 7px; }
.frv-days { position: sticky; top: calc(var(--frv-sticky-top, 0px) + var(--frv-toolbar-h, 0px)); z-index: 2; padding-bottom: 8px; background: var(--frv-surface); border-bottom: 1px solid var(--frv-line); }
.frv-days div { color: var(--frv-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.frv-days div:not(:first-child) { padding-left: 6px; }
.frv-weeks { display: grid; gap: 6px; padding-top: 8px; }
.frv-week-label { padding-top: 6px; color: var(--frv-muted); font-size: 0.75rem; line-height: 1.25; }
.frv-week-label b { display: block; color: var(--frv-ink-2); font-size: 0.75rem; }
.frv-day {
  position: relative; min-height: 46px; padding: 5px 7px; overflow: hidden;
  border: 1px solid transparent; border-radius: 9px; background: var(--frv-soft);
  cursor: pointer; text-align: left; color: inherit; font-family: inherit;
  transition: opacity 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.frv-day:hover { z-index: 1; border-color: #a8c3c4; background: var(--frv-surface); box-shadow: 0 5px 11px rgba(20, 55, 63, 0.1); }
.frv-day:focus-visible { outline: 2px solid var(--frv-brand); outline-offset: 1px; }
.frv-day.frv-selected { border-color: var(--frv-brand); background: var(--frv-surface); box-shadow: inset 0 0 0 1px var(--frv-brand); }
.frv-date { display: block; color: var(--frv-muted); font-size: 0.7rem; font-weight: 650; }
.frv-koder { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: 1px; }
.frv-koder i {
  font-style: normal; font-size: 0.6rem; font-weight: 800; line-height: 1.3;
  color: var(--frv-muted); border: 1px solid var(--frv-fri); border-radius: 3px; padding: 0 3px;
}
.frv-bars { display: flex; align-items: center; gap: 2px; margin-top: 6px; height: 8px; }
.frv-bar { position: relative; display: block; min-width: 4px; height: 8px; flex: 1; border-radius: 2px; background: var(--frv-color); }
/* Nøytrale nivåer: ingen registrering < møtt < organisert studiearbeid/annet */
.frv-bar.frv-bar-tom { height: 4px; border-radius: 99px; }
.frv-bar.frv-bar-mott { height: 8px; }
.frv-bar.frv-bar-ikke {
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--frv-fri);
}
.frv-lx i.frv-x-tom { height: 4px; border-radius: 99px; background: var(--frv-fri); }
.frv-lx i.frv-x-mott { background: var(--frv-fri); }
.frv-bar.frv-em-venter {
  background: repeating-linear-gradient(135deg, var(--frv-color) 0 3px, #fff 3px 6px);
}
/* Ventende egenmelding uten fravær: full høyde og mørkere striper, ellers
   forsvinner skravuren i den tynne grå «uten registrering»-streken */
.frv-bar.frv-bar-tom.frv-em-venter {
  height: 8px; border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--frv-muted) 0 3px, #e4eaed 3px 6px);
}
.frv-m-dot {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.frv-day.frv-day-absence::after {
  content: "Dagfrav\00e6r"; position: absolute; top: 5px; right: 6px;
  padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--frv-dag);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em;
}
.frv-day.frv-weekend { background: #f3f6f5; }
.frv-day.frv-dim { opacity: 0.18; }
.frv-day.frv-focus {
  border-color: var(--frv-active);
  background: color-mix(in srgb, var(--frv-active) 9%, var(--frv-surface));
  box-shadow: inset 3px 0 0 var(--frv-active);
}
.frv-day.frv-focus .frv-bar:not(.frv-hit) { opacity: 0.3; }
/* Reserveløsning: klipper verten mellom oss og scrollporten, virker ikke sticky —
   da får kalenderen egen scroll slik at filtre og ukedagsrad likevel blir stående */
.frv-workspace.frv-ingen-sticky .frv-cal-scroll {
  /* trekk fra filterrad + tegnforklaring så hele kortet får plass på skjermen */
  overflow: auto; max-height: calc(var(--frv-panel-max, 70vh) - 200px); min-height: 320px;
}
.frv-workspace.frv-ingen-sticky .frv-days { top: 0; }
.frv-workspace.frv-ingen-sticky .frv-toolbar { position: static; }

.frv-legend-note { padding: 12px 18px 16px; color: var(--frv-muted); font-size: 0.78rem; line-height: 1.5; }
.frv-legend-note a { color: var(--frv-ink-2); }
.frv-lx { white-space: nowrap; }
.frv-lx i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; position: relative; }
.frv-lx i.frv-x-hatch { background: repeating-linear-gradient(135deg, var(--frv-muted) 0 3px, #e4eaed 3px 6px); }
.frv-lx i.frv-x-dot { background: var(--frv-hdok); }
.frv-lx i.frv-x-hul { background: transparent; box-shadow: inset 0 0 0 1.5px var(--frv-fri); }
.frv-lx i.frv-x-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Dagdetaljer (sidepanel) */
.frv-detail {
  position: sticky; top: calc(var(--frv-sticky-top, 0px) + 12px); padding: 18px;
  max-height: var(--frv-panel-max, calc(100vh - 160px));
  display: flex; flex-direction: column;
}
.frv-detail-title { flex: none; padding-right: 28px; }
#frv_detail_content { flex: 1 1 auto; min-height: 0; overflow: auto; }
.frv-detail-close {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: transparent; color: var(--frv-muted); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 4px 9px; border-radius: 8px; font-family: inherit;
}
.frv-detail-close:hover { background: #eef3f3; color: var(--frv-ink); }
.frv-selected-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 0 12px; border-bottom: 1px solid var(--frv-line);
}
.frv-selected-date strong { font-size: 0.9rem; }
.frv-selected-date span {
  border-radius: 99px; padding: 4px 8px; color: var(--frv-brand); background: var(--frv-brand-tint);
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.frv-event {
  padding: 10px 10px 10px 12px; border-radius: 9px; background: var(--frv-soft); margin-top: 12px;
  border-left: 4px solid var(--frv-color, var(--frv-fri));
}
.frv-event strong { display: block; font-size: 0.8rem; }
.frv-event span { display: block; margin-top: 2px; color: var(--frv-muted); font-size: 0.75rem; line-height: 1.35; }
.frv-lessons { display: grid; gap: 5px; margin-top: 12px; }
.frv-lesson {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px 9px; border: 1px solid var(--frv-line); border-radius: 8px; background: var(--frv-surface);
  border-left: 4px solid var(--frv-color, var(--frv-fri));
}
.frv-lesson time { color: var(--frv-ink-2); font-size: 0.7rem; font-weight: 700; line-height: 1.25; }
.frv-lesson-main { min-width: 0; }
.frv-lesson-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 700; }
.frv-lesson-state { display: block; margin-top: 1px; color: var(--frv-muted); font-size: 0.7rem; }
.frv-lesson-flag { display: block; margin-top: 2px; font-size: 0.7rem; color: var(--frv-ink-2); }
.frv-lesson-note { display: block; margin-top: 2px; color: var(--frv-muted); font-size: 0.7rem; font-style: italic; }
.frv-insight {
  margin-top: 12px; padding: 12px; border-left: 3px solid var(--frv-sent); border-radius: 6px;
  background: #fff9e9; color: #5a4a23; font-size: 0.75rem; line-height: 1.45;
}
.frv-behandle {
  margin-top: 14px; width: 100%;
  font-size: 0.8rem; font-weight: 650; font-family: inherit;
  background: var(--frv-brand); color: #fff; border: none; border-radius: 9px;
  padding: 9px 14px; cursor: pointer;
}
.frv-behandle:hover { background: #0a6b78; }

/* Tooltip */
.frv-tt {
  position: fixed; z-index: 1500; display: none; max-width: 340px;
  background: #ffffff; color: #152b35;
  border: 1px solid #dce5e7; border-radius: 9px;
  padding: 10px 12px; font-size: 0.78rem; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.frv-tt-dato { font-weight: 700; margin-bottom: 4px; }
.frv-tt-rad { display: flex; gap: 8px; align-items: baseline; }
.frv-tt-cat { display: inline-block; width: 9px; height: 9px; border-radius: 2.5px; flex: none; }
.frv-tt-merk { color: #64727a; font-style: italic; }
.frv-tt-muted { color: #64727a; }

@media (max-width: 1024px) {
  .frv-workspace.frv-detalj-open { grid-template-columns: 1fr; }
  .frv-detail { position: relative; top: auto; }
}

/* ============================================================
   Fravær kontaktelever — ukevisning (fravaer/kontaktelever_uke) — .fku-*
   Håndkodet rutenett: elever som rader, ukas dager som kolonner. Læreren
   fører både dag- og timefravær i samme rutenett, med detaljpanel til høyre.
   Bevisst avvik fra JET-komponentregelen — samme begrunnelse som .frv-*
   (tett rutenett, mange celler, egen tastaturmodell). Kontrollene rundt
   rutenettet er ekte JET-komponenter.
   Farge = konsekvens for fraværsgrensen (samme palett som .frv-*), bokstaven
   bærer typen. Skravur = egenmelding venter, prikk = merknad, stiplet ramme
   = ulagret endring. Appen har ikke mørk modus — kun lyse tokens.
   ============================================================ */

/* .oj-panel har overflow:hidden i Redwood. Det klipper scroll-konteksten og
   slår ut position:sticky for detaljpanelet — verten må slippe innholdet fritt. */
.fku-vert { overflow: visible !important; }

/* Fargevariablene deles med panelskuffa (.fku-skuff) og tegnforklaringen i
   dialogen (.fku-tlf-legend) i telefonmodus: begge ligger i JET sitt popup-lag
   mens de er åpne, utenfor .fku-workspace, og ville ellers mistet fargene.
   Selve utseendet til flaten står i regelen under. */
.fku-workspace, .fku-skuff, .fku-tlf-legend {
  --fku-ink: #152b35;
  --fku-muted: #64727a;
  --fku-faint: #9aa8ae;
  --fku-line: #dce5e7;
  --fku-line-strong: #b9c8cc;
  --fku-canvas: #f3f7f7;
  --fku-surface: #ffffff;
  --fku-surface-2: #eef3f4;
  --fku-hover: #e6f0f1;
  --fku-felt: #eef6f7;
  --fku-felt-kant: #b9c8cc;
  --fku-brand: #075c68;
  --fku-brand-dark: #073f49;
  --fku-brand-tint: #e4f0f1;
  --fku-brand-tint-2: #cfe3e5;
  --fku-sel: #0b7f90;
  --fku-sel-fill: rgba(11, 127, 144, 0.14);
  --fku-udok: #e45745;
  --fku-egen: #45a3e0;
  --fku-hdok: #1f5f9e;
  --fku-unntak: #2a9d77;
  --fku-sent: #eda100;
  --fku-mott: #c8d4d8;
  --fku-dag: #7253a5;
  --fku-on-color: #ffffff;
  --fku-r: 8px;
}
.fku-workspace {
  color: var(--fku-ink);
  background: var(--fku-surface);
  border: 1px solid var(--fku-line);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(17, 55, 63, 0.06);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.fku-workspace button, .fku-skuff button { font-family: inherit; cursor: pointer; color: inherit; }

/* ── topplinje ─────────────────────────────────────────────── */
.fku-topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 16px;
  background: var(--fku-brand-tint);
  border-bottom: 1px solid var(--fku-line);
}
/* flex-wrap: fagvisningen legger tittel + fagvelger + modusbryter her (~650 px
   til sammen). .fku-topbar bryter bare MELLOM sine tre barn, så uten wrap her
   ville raden flytt ut av .fku-workspace (overflow: hidden) og klippet
   modusbryteren bort uten rullefelt. Kontaktelev- og klassevisningen er korte
   nok til at raden aldri bryter, og ser uendret ut. */
.fku-topbar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 6px; min-width: 0; }
.fku-tittel { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fku-tittel b { font-size: 1rem; font-weight: 700; color: var(--fku-brand-dark); }
.fku-tittel span { font-size: 0.75rem; color: var(--fku-muted); }
.fku-weeknav { display: flex; align-items: center; gap: 4px; }
.fku-topbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* ukenavigasjon + Angre/Lagre som én enhet: fyller resten av rad én, eller
   bryter samlet til rad to (Thomas 18.09) */
.fku-topbar-rest { display: flex; align-items: center; gap: 8px 12px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
/* Lagre (callToAction) arver ellers blekkfargen fra topplinja og blir mørk tekst på mørk knapp */
/* (attributt-selektor duger ikke: knockout lar disabled="[[…]]" staa som attributt, saa klassen settes fra viewmodellen) */
.fku-lagre-aktiv, .fku-lagre-aktiv button, .fku-lagre-aktiv button * { color: #fff !important; }
.fku-chgcount { font-size: 0.78rem; color: var(--fku-muted); white-space: nowrap; }
/* Topplinja som størrelsesbeholder: under 1100 px (typisk 1280 med menyen
   åpen) skjules «Ingen endringer»-teksten — Lagre-knappen viser tallet
   uansett («Lagre (3)») — så raden får plass uten å brytes (Thomas 18.09).
   Uten tittelen og «I dag» trengs ~1000 px for én rad. */
.fku-topbar { container-type: inline-size; }
@container (max-width: 1099px) { .fku-chgcount { display: none; } }
.fku-chgcount b { color: var(--fku-ink); font-weight: 700; }
.fku-uke-velger { min-width: 0; }
/* Feltet viser bare «2026-38». Bredden må settes på selve komponenten —
   min-width på wrapperen gir ingenting, JET-feltet er ~15 rem av seg selv.
   Nedtrekket bruker feltbredden bare som MINIMUM og vokser med innholdet
   («2026-38 (14.sep - 18.sep)» får plass). Telefonregelen lenger ned vinner. */
.fku-uke-velger oj-c-select-single { width: 9rem; }   /* 8 rem klippet «2026-38» mot pila */
.fku-klasse-velger { min-width: 10.5rem; margin-left: 6px; }   /* klassevelger ved siden av uka (ledelsens visning) */  /* nedtrekket staar mellom forrige/neste-pilene (Thomas 04.09); bredt nok til «2026-36 (31.aug - 04.sep)» */
.fku-gammel { border: 0; background: transparent; color: var(--fku-brand); font-size: 0.78rem; font-weight: 700; text-decoration: underline; padding: 2px 4px; }
.fku-gammel:hover { color: var(--fku-brand-dark); }

/* ── verktøylinje: typevalg (chips) ────────────────────────── */
.fku-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--fku-line);
  background: var(--fku-surface);
}
.fku-lead { font-size: 0.78rem; color: var(--fku-muted); }
.fku-lead b { color: var(--fku-ink); font-weight: 700; }
.fku-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fku-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--fku-line-strong); background: var(--fku-surface);
  border-radius: 999px; padding: 4px 10px 4px 5px;
  font-size: 0.78rem; font-weight: 500; color: var(--fku-ink);
  transition: transform 0.08s ease, background 0.12s ease;
}
.fku-chip .fku-k {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--fku-on-color); background: var(--fku-muted);
}
.fku-chip[data-t="D"] .fku-k, .fku-chip[data-t="F"] .fku-k, .fku-chip[data-t="I"] .fku-k { background: var(--fku-udok); }
.fku-chip[data-t="S"] .fku-k { background: var(--fku-sent); color: #2a1d00; }
.fku-chip[data-t="M"] .fku-k { background: var(--fku-mott); color: var(--fku-ink); }
.fku-chip[data-t="O"] .fku-k, .fku-chip[data-t="A"] .fku-k { background: transparent; border: 1.5px solid var(--fku-faint); color: var(--fku-ink); }
.fku-chip[data-t=""] .fku-k { background: transparent; color: var(--fku-muted); border: 1.5px dashed var(--fku-faint); }
.fku-chip:hover:not(:disabled) { background: var(--fku-hover); transform: translateY(-1px); }
.fku-chip:disabled { opacity: 0.38; cursor: default; }
.fku-chip.fku-active { border-color: var(--fku-sel); box-shadow: 0 0 0 2px var(--fku-sel-fill); }
.fku-kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px;
  border: 1px solid var(--fku-line-strong); border-bottom-width: 2px; border-radius: 4px;
  background: var(--fku-surface); font: 700 0.65rem/16px inherit; color: var(--fku-muted); text-align: center;
}
.fku-spacer { flex: 1 1 auto; }
/* handlingene til høyre bryter samlet, ikke én og én (Thomas 18.09) */
.fku-toolbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }

/* ── arbeidsflate: rutenett + panel ────────────────────────── */
.fku-work { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fku-work.fku-med-panel { grid-template-columns: minmax(0, 1fr) 310px; }
/* Panelet er alltid i DOM-en (så JET-komponentene ikke rives ned og opp for
   hver tegning), men vises bare når noe er markert. */
.fku-work .fku-panel { display: none; }
.fku-work.fku-med-panel .fku-panel { display: block; }
.fku-left { display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; }
/* position:relative gjør at radenes offsetTop måles mot denne scrollporten,
   slik at «hold valgt elevrad synlig» kan regne mot scrollTop/clientHeight. */
.fku-gridwrap { position: relative; overflow-x: auto; padding: 12px 0 8px 12px; user-select: none; }
/* Rutenettet (tabellen): ingen venstre padding paa rulleflaten — sticky
   klasse/navn-kolonnene fester seg innenfor paddingen, og rullet innhold
   skinte gjennom i de 12 px til venstre for dem (Thomas 18.09). Lufta
   ligger i stedet som marg paa tabellen, som ruller med. Flisemodus har
   ingen sticky kolonner og beholder paddingen. */
.fku-workspace:not(.fku-fliser-pa) .fku-gridwrap { padding-left: 0; }
.fku-workspace:not(.fku-fliser-pa) table.fku-grid { margin-left: 12px; }
/* flisemodus: ingen toppluft paa flaten, dagstripa (eller foerste rad) baerer den selv */
.fku-fliser-pa .fku-gridwrap { padding-top: 0; }
.fku-fliser-pa .fku-tk-elev:first-child { margin-top: 6px; }
/* ── viewport-bundet layout når elevuka er åpen ────────────────────────────
   Hele arbeidsflaten holdes innenfor vertens synlige høyde (--fku-avail, målt
   i settLayout()), så SIDEN ikke skroller. Ukeseksjonen har fast høyde
   (--fku-week-h, satt av delelinja) og rutenettet får resten og ruller selv.
   Er uka lukket, gjelder ingen av disse reglene — da er flaten like fri som før. */
.fku-uke-apen .fku-left { height: var(--fku-avail, 560px); min-height: 0; }
.fku-uke-apen .fku-gridwrap { flex: 1 1 auto; min-height: 120px; overflow: auto; }
.fku-uke-apen .fku-weekpane {
  flex: 0 0 var(--fku-week-h, 260px); min-height: 0; overflow-y: auto; box-sizing: border-box;
}
/* spesifisitet (0,3,0) for aa slaa .fku-workspace.fku-ingen-sticky .fku-panel { max-height:none } lenger ned */
.fku-workspace.fku-uke-apen .fku-panel { max-height: var(--fku-avail, 560px); overflow-y: auto; }
body.fku-drar { user-select: none; cursor: row-resize; }

/* ── dra-bar mellom rutenettet og elevuka ──────────────────────────────── */
/* [hidden] må slå display-reglene over/under */
.fku-splitter[hidden], .fku-weekpane[hidden] { display: none !important; }
.fku-splitter {
  height: 14px; flex: 0 0 auto; cursor: row-resize;
  user-select: none; touch-action: none;
  background: var(--fku-surface-2);
  border-top: 1px solid var(--fku-line); border-bottom: 1px solid var(--fku-line);
  display: flex; align-items: center; justify-content: center;
}
.fku-splitter::before { content: ""; width: 44px; height: 4px; border-radius: 2px; background: var(--fku-line-strong); }
.fku-splitter:hover::before, .fku-splitter:focus-visible::before { background: var(--fku-sel); }
.fku-splitter:focus-visible { outline: 2px solid var(--fku-sel); outline-offset: -2px; }

/* ── elevens uke, under rutenettet ─────────────────────────────────────── */
.fku-weekpane { padding: 10px 16px 14px; background: var(--fku-surface); }
.fku-weekpane .fku-wh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fku-weekpane .fku-wh h2 { margin: 0; font-size: 0.85rem; font-weight: 700; }
.fku-weekpane .fku-wh .fku-psub { margin-top: 0; }
.fku-weekpane .fku-wh button {
  margin-left: auto; border: 0; background: transparent; color: var(--fku-muted);
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
}
.fku-weekpane .fku-wh button:hover { background: var(--fku-hover); color: var(--fku-ink); }
.fku-weekdays {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; align-items: start;
}
.fku-wday { border: 1px solid var(--fku-line); border-radius: 8px; overflow: hidden; min-width: 0; }
.fku-wday .fku-wdh {
  padding: 6px 10px; background: var(--fku-surface-2);
  font-weight: 700; font-size: 0.78rem; display: flex; justify-content: space-between; gap: 6px;
}
.fku-wday .fku-wdh .fku-st {
  font-weight: 500; color: var(--fku-muted); font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fku-wday .fku-wdb { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
/* Kompakte rader — KUN i ukeseksjonen. Panelets lister (.fku-pb .fku-hrow)
   beholder sin egen, luftigere stil. Kolonnene er ~150 px brede, så fagnavnet
   må bryte i stedet for å avkortes, og underlinja utelates helt når den ikke
   har noe å si (se statusKompakt/dagUnder i kontaktelever_uke.js). */
.fku-wday .fku-hrow {
  grid-template-columns: 34px 1fr 20px;
  gap: 6px; padding: 3px 6px; min-height: 0;
  align-items: center; font-size: 0.72rem; line-height: 1.25;
}
.fku-wday .fku-hrow .fku-t { font-size: 0.66rem; }
.fku-wday .fku-hrow .fku-f {
  font-size: 0.72rem; white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere;
}
.fku-wday .fku-hrow .fku-f small { font-size: 0.62rem; line-height: 1.2; }
.fku-wday .fku-hrow .fku-b { width: 18px; height: 18px; font-size: 0.62rem; border-radius: 5px; }
.fku-wday .fku-hrow .fku-b.fku-btom { box-shadow: inset 0 0 0 1px var(--fku-line); }
.fku-tom { padding: 28px 18px; color: var(--fku-muted); font-size: 0.85rem; }

table.fku-grid { border-collapse: separate; border-spacing: 0; font-size: 0.75rem; }
table.fku-grid th, table.fku-grid td { padding: 0; text-align: center; vertical-align: middle; }
table.fku-grid thead th { position: sticky; top: var(--fku-sticky-top, 0px); background: var(--fku-surface); z-index: 2; font-weight: 500; color: var(--fku-muted); }
th.fku-dayhead { padding: 0 4px 4px; }
.fku-dayhead .fku-dh {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; width: 100%;
  border-radius: 8px 8px 0 0; border: 1px solid var(--fku-line); border-bottom: 0;
  background: var(--fku-surface-2); font-size: 0.78rem; color: var(--fku-ink); font-weight: 700;
  white-space: nowrap; padding: 0 8px;
}
.fku-dayhead .fku-dh:hover { background: var(--fku-hover); }
.fku-dayhead .fku-dh .fku-d { color: var(--fku-muted); font-weight: 500; }
.fku-dayhead .fku-dh .fku-tod { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--fku-brand); color: #fff; border-radius: 4px; padding: 1px 5px; }
.fku-dayhead .fku-chev { width: 14px; height: 14px; transition: transform 0.15s ease; color: var(--fku-muted); }
.fku-dayhead.fku-open .fku-chev { transform: rotate(180deg); }
th.fku-sub { height: 34px; font-size: 0.66rem; font-weight: 500; color: var(--fku-muted); line-height: 1.1; border-bottom: 1px solid var(--fku-line); vertical-align: bottom; padding-bottom: 5px; }
th.fku-sub.fku-dagcol { cursor: pointer; color: var(--fku-ink); font-weight: 700; }
th.fku-sub.fku-dagcol:hover { color: var(--fku-sel); }
th.fku-sub .fku-hh { display: block; font-weight: 600; color: var(--fku-ink); font-size: 0.66rem; }
th.fku-sub .fku-mm { display: block; color: var(--fku-faint); font-weight: 400; font-size: 0.62rem; }
th.fku-stub { text-align: left; padding: 0 10px 5px 4px; font-size: 0.68rem; font-weight: 500; color: var(--fku-muted); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: bottom; border-bottom: 1px solid var(--fku-line); }
td.fku-klasse, th.fku-stub.fku-k2 { position: sticky; left: 0; z-index: 3; background: var(--fku-surface); text-align: left; padding: 0 6px 0 4px; color: var(--fku-muted); font-size: 0.72rem; width: 52px; min-width: 52px; }
/* Kolonnen er like bred som knappen (fast), ikke som det lengste navnet:
   i automatisk tabelloppsett er width paa td bare et minimum, og et langt
   navn med nowrap dro kolonnen ut til ~300 px (Thomas 18.09). 216 px rommer
   «Thomas A U Hannestad» med prikk; lengre navn faar ellipse og full tittel. */
td.fku-navn, th.fku-stub.fku-n { position: sticky; left: 52px; z-index: 3; background: var(--fku-surface); text-align: left; width: 216px; min-width: 216px; max-width: 216px; box-shadow: inset -1px 0 var(--fku-line); }
td.fku-navn button { display: flex; align-items: center; gap: 8px; width: 216px; max-width: 216px; height: 100%; border: 0; background: transparent; padding: 0 8px; text-align: left; font-weight: 500; color: var(--fku-ink); border-radius: 6px; font-size: 0.75rem; }
td.fku-navn button:hover { background: var(--fku-hover); }
/* Fagkortet i stub-cella (se stubKortHtml): kode, fagnavn, elevtall */
.fku-fagkort { display: flex; flex-direction: column; line-height: 1.2; background: var(--fku-brand-tint); color: var(--fku-brand-dark); border-radius: 10px; padding: 5px 10px; margin: 0 8px 1px 2px; text-transform: none; letter-spacing: 0; box-sizing: border-box; max-width: 100%; }
.fku-fagkort b { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fku-fagkort span { font-size: 0.7rem; font-weight: 500; color: var(--fku-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fku-fagkort small { font-size: 0.66rem; color: var(--fku-muted); }
td.fku-navn button .fku-av { width: 32px; height: 32px; border-radius: 50%; background: var(--fku-brand-tint-2) center/cover no-repeat; color: var(--fku-brand-dark); display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; flex: none; }
td.fku-navn button .fku-nv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.fku-navn button .fku-sum { margin-left: auto; font-size: 0.66rem; color: var(--fku-muted); display: flex; align-items: center; gap: 3px; }
td.fku-navn button .fku-sum i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fku-udok); }
tr.fku-elev { height: 38px; }
tr.fku-elev:hover td.fku-klasse, tr.fku-elev:hover td.fku-navn { background: var(--fku-surface-2); }
tr.fku-elev.fku-selrow td.fku-navn { background: var(--fku-brand-tint); }
td.fku-gap { width: 6px; min-width: 6px; }
td.fku-c { width: 26px; min-width: 26px; border-bottom: 1px solid var(--fku-line); border-left: 1px solid var(--fku-line); position: relative; }  /* 34 -> 26 (Thomas 10.09): plass til én bokstav + hjørnemerker */
td.fku-c.fku-dagcol { width: 44px; min-width: 44px; background: var(--fku-brand-tint); }
td.fku-c.fku-first { border-left: 1px solid var(--fku-line-strong); }
td.fku-c.fku-last { border-right: 1px solid var(--fku-line-strong); }
tr.fku-elev:first-child td.fku-c { border-top: 1px solid var(--fku-line); }

.fku-cell {
  position: relative; display: grid; place-items: center; height: 32px; margin: 3px 2px;
  border-radius: 6px; font-weight: 700; font-size: 0.75rem; cursor: pointer;
  transition: box-shadow 0.08s ease, transform 0.08s ease; color: var(--fku-ink);
}
.fku-cell .fku-n { position: absolute; left: -3px; top: -3px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--fku-ink); color: var(--fku-canvas); font-size: 0.53rem; font-weight: 700; line-height: 13px; padding: 0 3px; border: 1.5px solid var(--fku-surface); pointer-events: none; }
.fku-cell:hover { box-shadow: 0 0 0 2px var(--fku-sel-fill); }
.fku-cell.fku-none { cursor: default; color: var(--fku-faint); font-weight: 400; }
.fku-cell.fku-none::before { content: "\00b7"; }
.fku-cell.fku-locked { cursor: default; color: var(--fku-faint); opacity: 0.75; }
.fku-cell.fku-udok { background: var(--fku-udok); color: var(--fku-on-color); }
.fku-cell.fku-egen { background: var(--fku-egen); color: var(--fku-on-color); }
.fku-cell.fku-hdok { background: var(--fku-hdok); color: var(--fku-on-color); }
.fku-cell.fku-unnt { background: var(--fku-unntak); color: var(--fku-on-color); }
.fku-cell.fku-sent { background: var(--fku-sent); color: #2a1d00; }
.fku-cell.fku-mott { background: var(--fku-mott); color: var(--fku-ink); }
.fku-cell.fku-hul { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fku-faint); }
.fku-cell.fku-hul:hover { box-shadow: inset 0 0 0 1.5px var(--fku-faint), 0 0 0 2px var(--fku-sel-fill); }
.fku-cell.fku-pend { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 6px); }
.fku-cell.fku-merk::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.fku-cell.fku-chg { outline: 2px dashed var(--fku-sel); outline-offset: -2px; }
.fku-cell.fku-chg::before { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--fku-sel); border: 2px solid var(--fku-surface); }
.fku-cell.fku-sel { box-shadow: 0 0 0 2px var(--fku-sel), 0 0 0 4px var(--fku-sel-fill); z-index: 1; }
.fku-cell.fku-hul.fku-sel { box-shadow: inset 0 0 0 1.5px var(--fku-faint), 0 0 0 2px var(--fku-sel), 0 0 0 4px var(--fku-sel-fill); }
.fku-cell.fku-locked.fku-sel { box-shadow: none; }
.fku-cell.fku-cur { box-shadow: 0 0 0 2px var(--fku-sel), 0 0 0 5px var(--fku-sel-fill); }
.fku-cell.fku-flash { animation: fkuFlash 0.5s ease; }
@keyframes fkuFlash { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* sammenslått timestripe når dagen er lukket */
td.fku-strip { width: 84px; min-width: 84px; border-bottom: 1px solid var(--fku-line); border-left: 1px solid var(--fku-line); border-right: 1px solid var(--fku-line-strong); cursor: pointer; background: var(--fku-surface); }
td.fku-strip .fku-bars { display: flex; gap: 2px; justify-content: center; align-items: flex-end; height: 22px; padding: 0 4px; }
td.fku-strip .fku-bars i { display: block; width: 8px; height: 16px; border-radius: 2px; background: var(--fku-surface-2); border: 1px solid var(--fku-line); }
td.fku-strip .fku-bars i.fku-udok { background: var(--fku-udok); border-color: var(--fku-udok); }
td.fku-strip .fku-bars i.fku-egen { background: var(--fku-egen); border-color: var(--fku-egen); }
td.fku-strip .fku-bars i.fku-hdok { background: var(--fku-hdok); border-color: var(--fku-hdok); }
td.fku-strip .fku-bars i.fku-unnt { background: var(--fku-unntak); border-color: var(--fku-unntak); }
td.fku-strip .fku-bars i.fku-sent { background: var(--fku-sent); border-color: var(--fku-sent); }
td.fku-strip .fku-bars i.fku-mott { background: var(--fku-mott); border-color: var(--fku-mott); }
td.fku-strip .fku-bars i.fku-hul { background: transparent; border: 1.5px solid var(--fku-faint); }
td.fku-strip .fku-bars i.fku-pend { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 4px); }
td.fku-strip .fku-bars i.fku-chg { outline: 2px dashed var(--fku-sel); outline-offset: -1px; }
td.fku-strip .fku-bars i.fku-none { height: 6px; border-color: transparent; background: var(--fku-line); }
td.fku-strip .fku-bars i.fku-laast { opacity: 0.45; }
td.fku-strip:hover .fku-bars i { filter: brightness(0.96); }

/* ── tegnforklaring ────────────────────────────────────────── */
.fku-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 14px; font-size: 0.72rem; color: var(--fku-muted); border-top: 1px solid var(--fku-line); }
.fku-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fku-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.fku-legend i.fku-l-hul { box-shadow: inset 0 0 0 1.5px var(--fku-faint); }
.fku-legend i.fku-l-pend { background: var(--fku-udok) repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 6px); }
.fku-legend i.fku-l-dot { position: relative; background: var(--fku-mott); }
.fku-legend i.fku-l-dot::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--fku-ink); }
.fku-legend i.fku-l-chg { outline: 2px dashed var(--fku-sel); outline-offset: -2px; }
.fku-legend i.fku-l-k2 { position: relative; box-shadow: inset 0 0 0 1.5px var(--fku-faint); }
.fku-legend i.fku-l-k2 b { position: absolute; left: -4px; top: -4px; width: 11px; height: 11px; border-radius: 6px; background: var(--fku-ink); color: var(--fku-canvas); font-size: 0.47rem; line-height: 11px; text-align: center; font-weight: 700; }
.fku-tips { margin-left: auto; }

/* ── detaljpanel ───────────────────────────────────────────── */
.fku-panel {
  position: sticky; top: var(--fku-sticky-top, 0px);
  border-left: 1px solid var(--fku-line); background: var(--fku-surface);
  align-self: stretch; min-height: 420px;
  max-height: var(--fku-panel-max, 85vh); overflow-y: auto;
}
.fku-workspace.fku-ingen-sticky .fku-panel { position: static; max-height: none; overflow-y: visible; }
.fku-workspace.fku-ingen-sticky.fku-uke-apen .fku-panel { max-height: var(--fku-avail, 560px); overflow-y: auto; }
/* min-height (420px i grunnregelen) slaar max-height – nullstilles naar uka er aapen */
.fku-workspace.fku-uke-apen .fku-panel { min-height: 0; }
/* tipsraden i tegnforklaringen tar en ekstra linje paa smale vinduer – skjules naar uka er aapen */
.fku-workspace.fku-uke-apen .fku-legend .fku-tips { display: none; }
.fku-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--fku-line); position: sticky; top: 0; background: var(--fku-surface); z-index: 1; }
.fku-ph h2 { margin: 0; font-size: 0.85rem; font-weight: 700; }
.fku-ph .fku-psub { font-size: 0.72rem; color: var(--fku-muted); margin-top: 2px; }
.fku-pb { padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fku-pb-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* «Ferdig» ut til kanten, og i fagets teal med hvit tekst: skuffen og flaten
   tvinger knappetekst til aa arve fargen (regelen over .fku-workspace button),
   saa hvit tekst maa settes eksplisitt, som for .fku-lagre-aktiv. Teal, ikke
   Lagre sin moerke fylling, saa de to ikke forveksles (Thomas 17.09). */
.fku-pb-knapper .fku-ferdig { margin-left: auto; }
.fku-ferdig, .fku-ferdig button, .fku-ferdig button * { color: #fff !important; }
.fku-ferdig button { background: var(--fku-brand) !important; border-color: var(--fku-brand) !important; }
.fku-ferdig button:hover { background: var(--fku-brand-dark) !important; border-color: var(--fku-brand-dark) !important; }
.fku-pb-hint { font-size: 0.72rem; color: var(--fku-muted); line-height: 1.35; }
.fku-empty { color: var(--fku-muted); font-size: 0.78rem; line-height: 1.55; }
.fku-empty ul { margin: 8px 0 0; padding-left: 18px; }
.fku-empty li { margin: 3px 0; }
.fku-flabel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fku-muted); margin-bottom: 5px; }
.fku-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.fku-seg button { border: 1px solid var(--fku-line-strong); background: var(--fku-surface); border-radius: 6px; padding: 5px 8px 5px 5px; font-size: 0.72rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.fku-seg button .fku-k { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; color: var(--fku-on-color); background: var(--fku-muted); }
.fku-seg button[data-t="D"] .fku-k, .fku-seg button[data-t="F"] .fku-k, .fku-seg button[data-t="I"] .fku-k { background: var(--fku-udok); }
.fku-seg button[data-t="S"] .fku-k { background: var(--fku-sent); color: #2a1d00; }
.fku-seg button[data-t="M"] .fku-k { background: var(--fku-mott); color: var(--fku-ink); }
.fku-seg button[data-t="O"] .fku-k, .fku-seg button[data-t="A"] .fku-k { background: transparent; border: 1.5px solid var(--fku-faint); color: var(--fku-ink); }
.fku-seg button[data-t=""] .fku-k { background: transparent; border: 1.5px dashed var(--fku-faint); color: var(--fku-muted); }
.fku-seg button.fku-on { border-color: var(--fku-sel); box-shadow: 0 0 0 2px var(--fku-sel-fill); }
.fku-seg button:hover { background: var(--fku-hover); }
.fku-note { font-size: 0.72rem; color: var(--fku-muted, #64727a); background: var(--fku-surface-2, #eef3f4); border-radius: var(--fku-r, 8px); padding: 8px 10px; line-height: 1.45; }
.fku-note.fku-warn { background: #fdf3dd; color: var(--fku-ink, #152b35); }
.fku-note b { font-weight: 700; }
.fku-acts { display: flex; gap: 6px; margin-top: 8px; }
.fku-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fku-hours { display: flex; flex-direction: column; gap: 4px; }
.fku-hrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; font-size: 0.72rem; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--fku-line); border-left-width: 4px; cursor: pointer; text-align: left; background: var(--fku-surface); width: 100%; }
.fku-hrow:hover { background: var(--fku-hover); }
.fku-hrow.fku-sel { border-color: var(--fku-sel); background: var(--fku-sel-fill); }
.fku-hrow .fku-t { color: var(--fku-muted); font-size: 0.68rem; }
.fku-hrow .fku-f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fku-hrow .fku-f small { display: block; color: var(--fku-muted); font-size: 0.66rem; }
.fku-hrow .fku-b { font-weight: 700; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 0.68rem; color: var(--fku-on-color); background: var(--fku-surface-2); }
.fku-hrow .fku-b.fku-udok { background: var(--fku-udok); }
.fku-hrow .fku-b.fku-egen { background: var(--fku-egen); }
.fku-hrow .fku-b.fku-hdok { background: var(--fku-hdok); }
.fku-hrow .fku-b.fku-unnt { background: var(--fku-unntak); }
.fku-hrow .fku-b.fku-sent { background: var(--fku-sent); color: #2a1d00; }
.fku-hrow .fku-b.fku-mott { background: var(--fku-mott); color: var(--fku-ink); }
.fku-hrow .fku-b.fku-hul { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fku-faint); color: var(--fku-ink); }
.fku-hrow .fku-b.fku-btom { background: transparent; color: var(--fku-faint); box-shadow: inset 0 0 0 1px var(--fku-line); }
/* (tom badge het foer fku-tom og kolliderte med tom-panel-regelen over: padding 28px 18px gjorde badgen 54x74 px) */
.fku-hrow.fku-udok { border-left-color: var(--fku-udok); }
.fku-hrow.fku-egen { border-left-color: var(--fku-egen); }
.fku-hrow.fku-hdok { border-left-color: var(--fku-hdok); }
.fku-hrow.fku-unnt { border-left-color: var(--fku-unntak); }
.fku-hrow.fku-sent { border-left-color: var(--fku-sent); }
.fku-hrow.fku-mott { border-left-color: var(--fku-mott); }
.fku-hrow.fku-hul { border-left-color: var(--fku-faint); }
.fku-hrow.fku-laast { opacity: 0.5; cursor: default; }
.fku-dayblk { border: 1px solid var(--fku-line); border-radius: var(--fku-r); overflow: hidden; }
.fku-dayblk .fku-dbh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--fku-surface-2); font-size: 0.72rem; font-weight: 700; cursor: pointer; width: 100%; border: 0; text-align: left; }
.fku-dayblk .fku-dbh:hover { background: var(--fku-hover); }
.fku-dayblk .fku-dbh .fku-st { font-weight: 500; color: var(--fku-muted); font-size: 0.68rem; }
.fku-dayblk .fku-dbb { padding: 8px; display: flex; flex-direction: column; gap: 6px; }


@media (prefers-reduced-motion: reduce) {
  .fku-workspace * { transition: none !important; animation: none !important; }
}
@media (max-width: 1100px) {
  .fku-work.fku-med-panel { grid-template-columns: minmax(0, 1fr); }
  .fku-panel { position: static; border-left: 0; border-top: 1px solid var(--fku-line); max-height: none; overflow-y: visible; }
  .fku-weekdays { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
/* Panelets håndkodede seksjoner (typevelger, fagvalg, lister) */
#fku_seg, #fku_lister { display: flex; flex-direction: column; gap: 12px; }
#fku_seg:empty, #fku_lister:empty { display: none; }
/* Skjuler fanens vanlige innhold mens ukevisningen står åpen i samme flate */
.fku-skjult { display: none !important; }

/* Tallkolonnene i klassetabellen («Alle elever»-fanen) */
.fku-tall-udok { color: #b03a2e; font-weight: 700; }
.fku-tall-dempet { color: #64727a; }
.fku-em-badge {
  display: inline-block; min-width: 1.6rem; padding: 1px 8px; border-radius: 999px;
  background: #fdf0cd; color: #6b4e00; font-weight: 700; font-size: 0.78rem; text-align: center;
}

/* ── fagvisningen (faglærer) ───────────────────────────────────────────────
   Alt under tegnes BARE når verten har satt de nye parametrene
   (modus / kunEgetFag / kanFoereDag / avvikrad / oppmote). Kontaktelev- og
   klassevisningen bruker ingen av klassene, så de er piksel-like som før.
   Avvikskodene har samme betydning som i gammel fullvisning; fargene er
   mørknet litt for lesbar hvit tekst, og tallet står alltid i cella. */
.fku-workspace, .fku-skuff, .fku-tlf-legend { --fku-avv1: #3f8f4f; --fku-avv2: #196d89; --fku-avv3: #a40000; }
.fku-modus { margin-left: 6px; }
/* Valgt visning skal ses: JET-ens svake blaatone forsvant mot den teal-tonede
   topplinja (Thomas 18.09). Teal fylling + hvit tekst, som Lagre-knappen.
   Klassenavnene i core-pack er hashet, saa vi treffer via radioknappen. */
.fku-modus [role="toolbar"] > span:has(input:checked) { background: var(--fku-brand) !important; }
.fku-modus [role="toolbar"] > span:has(input:checked) label { color: #fff !important; }
.fku-modus [role="toolbar"] > span:not(:has(input:checked)) { background: var(--fku-surface) !important; }
/* fagvelgeren bærer «AP3D KRØ – Kroppsøving», ikke en klassekode på fire tegn */
.fku-klasse-velger.fku-valg-bred { min-width: 0; }
/* feltet viser «AP3D NOR» / «AP3: NA3 1»; hele fagnavnet står i lista, som vokser selv */
.fku-klasse-velger.fku-valg-bred oj-c-select-single { width: 9.5rem; }

/* dagkolonnen: lesbar, men ikke klikkbar, når visningen ikke fører dagfravær */
th.fku-sub.fku-dagcol.fku-lesbar { cursor: default; color: var(--fku-muted); font-weight: 500; }
th.fku-sub.fku-dagcol.fku-lesbar:hover { color: var(--fku-muted); }
/* Dagcella i fagvisningen er SKRIVEBESKYTTET, ikke død: den kan markeres og
   leses i panelet, men ikke endres. Pekeren viser at den er klikkbar (ikke
   not-allowed), og markeringsrammen må overleve hover — ellers forsvinner den
   i det brukeren peker på cella, siden hover-regelen er mer spesifikk. */
.fku-cell.fku-lesbar { cursor: pointer; }
.fku-cell.fku-lesbar:hover { box-shadow: 0 0 0 2px var(--fku-sel-fill); }
.fku-cell.fku-lesbar.fku-sel,
.fku-cell.fku-lesbar.fku-sel:hover { box-shadow: 0 0 0 2px var(--fku-sel), 0 0 0 4px var(--fku-sel-fill); }
/* O/A tegnes med innvendig ramme i stedet for fyll — den må bli med videre */
.fku-cell.fku-lesbar.fku-hul.fku-sel,
.fku-cell.fku-lesbar.fku-hul.fku-sel:hover {
  box-shadow: inset 0 0 0 1.5px var(--fku-faint), 0 0 0 2px var(--fku-sel), 0 0 0 4px var(--fku-sel-fill);
}
.fku-cell.fku-lesbar.fku-cur { box-shadow: 0 0 0 2px var(--fku-sel), 0 0 0 5px var(--fku-sel-fill); }
/* Tastaturbrukeren styrer med piltaster, og markeringsrammen over ER
   fokusmarkøren. Havner fokuset likevel på cella, skal den vises. */
.fku-cell.fku-lesbar:focus-visible { outline: 2px solid var(--fku-sel); outline-offset: 2px; }

/* ── lesefelt i panelet: ren tekst der kontrollene ellers står ──────────── */
.fku-lesverdi { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.fku-lesverdi .fku-b {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-weight: 700; font-size: 0.72rem; color: var(--fku-on-color); background: var(--fku-surface-2);
}
.fku-lesverdi .fku-b.fku-udok { background: var(--fku-udok); }
.fku-lesverdi .fku-b.fku-egen { background: var(--fku-egen); }
.fku-lesverdi .fku-b.fku-hdok { background: var(--fku-hdok); }
.fku-lesverdi .fku-b.fku-unnt { background: var(--fku-unntak); }
.fku-lesverdi .fku-b.fku-sent { background: var(--fku-sent); color: #2a1d00; }
.fku-lesverdi .fku-b.fku-mott { background: var(--fku-mott); color: var(--fku-ink); }
.fku-lesverdi .fku-b.fku-hul { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fku-faint); color: var(--fku-ink); }
.fku-lesverdi .fku-b.fku-btom { background: transparent; color: var(--fku-faint); box-shadow: inset 0 0 0 1px var(--fku-line); }
.fku-lesrad { display: grid; grid-template-columns: 104px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 0.72rem; }
.fku-lesrad + .fku-lesrad { border-top: 1px solid var(--fku-line); }
.fku-lesrad span { color: var(--fku-muted); }
.fku-lesrad b { font-weight: 500; color: var(--fku-ink); overflow-wrap: anywhere; }

/* fagets egne timer merkes i kolonnehodet; med oppmøte er hodet en knapp */
th.fku-sub.fku-fagkol { box-shadow: inset 0 -2px var(--fku-brand); }
th.fku-sub.fku-fagkol .fku-hh { color: var(--fku-brand); }
th.fku-sub[data-oppmote] { cursor: pointer; }
th.fku-sub[data-oppmote]:hover { background: var(--fku-hover); }
/* Selve knappen ser ut som klokkeslettet, men ligger i tabulatorrekkefølgen og
   aktiveres med Enter/mellomrom. Den gjennomsiktige 2px-rammen holder av plassen
   til den globale button:focus-visible-rammen, så hodet ikke hopper ved fokus. */
th.fku-sub .fku-oppm {
  display: block; width: 100%; padding: 0; background: transparent;
  border: 2px solid transparent; border-radius: 6px;
  font: inherit; color: inherit; line-height: inherit; cursor: pointer;
}

/* ikke redigerbare timeceller: annet fags time, eller låst av avvik 2/3.
   De tegnes uten data-k, så dette er ren visning. */
.fku-cell.fku-fremmed { cursor: default; opacity: 0.4; }
.fku-cell.fku-fremmed:hover { box-shadow: none; }
.fku-cell.fku-avvlaast { cursor: default; opacity: 0.55; box-shadow: inset 0 0 0 1.5px var(--fku-line-strong); }
.fku-cell.fku-avvlaast:hover { box-shadow: inset 0 0 0 1.5px var(--fku-line-strong); }
.fku-cell.fku-slettes { text-decoration: line-through; }

/* «Kan føres — ikke ført ennå»: fagets egne, TOMME timeceller får tilbake det
   innrammede skrivefeltet fra den gamle fagvisningen. Uten det er en tom celle du
   kan føre i og en tom celle i et annet fag piksel for piksel like — dempingen
   over (.fku-fremmed, opacity) har ingenting å dempe på en celle uten innhold.
   Klassene settes i celleHtml bak valgbar(), SAMME port som slipper cella til for
   endring, og bare når verten har kunEgetFag. Kontaktlærer- og klassevisningen
   setter dem aldri, og er derfor uendret.
   box-shadow er ÉN egenskap: hver tilstand som setter en ny skygge må ta
   feltkanten med seg, ellers forsvinner kanten i det brukeren peker på cella. */
.fku-cell.fku-felt.fku-blank {
  background-color: var(--fku-felt);
  box-shadow: inset 0 0 0 1px var(--fku-felt-kant);
}
.fku-cell.fku-felt.fku-blank:hover {
  box-shadow: inset 0 0 0 1px var(--fku-felt-kant), 0 0 0 2px var(--fku-sel-fill);
}
/* Markering og gjeldende celle: samme ringer som ellers, med kanten beholdt.
   :hover-variantene MÅ stå her — .fku-blank:hover teller like mange klasser som
   .fku-blank.fku-sel, og da vinner den som står sist i fila. Rekkefølgen sel →
   cur speiler grunnreglene, der fku-cur vinner over fku-sel på samme måte. */
.fku-cell.fku-felt.fku-blank.fku-sel,
.fku-cell.fku-felt.fku-blank.fku-sel:hover {
  box-shadow: inset 0 0 0 1px var(--fku-felt-kant), 0 0 0 2px var(--fku-sel), 0 0 0 4px var(--fku-sel-fill);
}
.fku-cell.fku-felt.fku-blank.fku-cur,
.fku-cell.fku-felt.fku-blank.fku-cur:hover {
  box-shadow: inset 0 0 0 1px var(--fku-felt-kant), 0 0 0 2px var(--fku-sel), 0 0 0 5px var(--fku-sel-fill);
}
/* Ulagret endring (.fku-chg) tegnes med outline + prikk, ikke box-shadow, og
   trenger derfor ingen egen kombinasjon her. */

/* rutenettets scrollport: rutenettet har en høydebegrensning i begge tilstander,
   .fku-uke-apen når elevuka er åpen og regelen under når den er lukket
   (åpningstilstanden i fagvisningen). Den gjør at tabellhodet kan klebre mot
   rutenettet selv mens du skroller elevene. Avviksraden var tidligere klebrig mot
   bunnen av den samme porten; det er reversert, se kommentaren over tfoot-regelen
   lenger ned. */
/* box-sizing: --fku-avail er regnet ut som plassen NED TIL tegnforklaringen, så
   den er den ytre høyden. .fku-gridwrap har 20 px vertikal padding, og uten
   border-box (den universelle regelen på toppen av fila er utkommentert, og
   Redwood setter ingen) ville flaten blitt 20 px for høy og dyttet
   tegnforklaringen under folden. Samme grep som .fku-left og .fku-weekpane. */
.fku-workspace.fku-har-avvik:not(.fku-uke-apen) .fku-gridwrap {
  max-height: var(--fku-avail, 560px); overflow: auto; box-sizing: border-box;
}
/* når rutenettet selv er scrollporten, klebrer tabellhodet mot DEN — ikke mot
   vertens sticky topp, som ville dyttet hodet ned inne i rutenettet */
.fku-workspace.fku-har-avvik:not(.fku-uke-apen) table.fku-grid thead th { top: 0; }
/* Avviksraden er IKKE klebrig. Avvik foeres sjelden, og en rad som flyter over
   elevlista leses som om den hoerer til midt i den (Thomas 16.09, med skjermbilde).
   Den staar derfor sist i rutenettet og skrolles til som alt annet. Bakgrunn og
   strek over beholdes: de er skillet mot siste elevrad. */
table.fku-grid tfoot td {
  background: var(--fku-surface); border-top: 1px solid var(--fku-line-strong);
}
table.fku-grid tfoot td.fku-klasse, table.fku-grid tfoot td.fku-navn { z-index: 4; }
tr.fku-avvikrad { height: 36px; }
td.fku-navn.fku-avvik-stub {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fku-muted); padding: 0 8px;
}
.fku-cell.fku-avv { color: var(--fku-on-color); }
.fku-avv-1 { background: var(--fku-avv1); }
.fku-avv-2 { background: var(--fku-avv2); }
.fku-avv-3 { background: var(--fku-avv3); }
td.fku-strip .fku-bars i.fku-avv-1 { background: var(--fku-avv1); border-color: var(--fku-avv1); }
td.fku-strip .fku-bars i.fku-avv-2 { background: var(--fku-avv2); border-color: var(--fku-avv2); }
td.fku-strip .fku-bars i.fku-avv-3 { background: var(--fku-avv3); border-color: var(--fku-avv3); }

/* avvikspanelet: samme knapperad som typevelgeren, med kodefargene */
.fku-seg.fku-avvseg button .fku-k { color: var(--fku-on-color); }
.fku-seg.fku-avvseg button .fku-k.fku-avv-1 { background: var(--fku-avv1); }
.fku-seg.fku-avvseg button .fku-k.fku-avv-2 { background: var(--fku-avv2); }
.fku-seg.fku-avvseg button .fku-k.fku-avv-3 { background: var(--fku-avv3); }

/* «Vis hele uka» i elevuka — bytter modus i stedet for å hente mer data */
.fku-weekpane .fku-wh button.fku-vishele {
  width: auto; height: 24px; padding: 0 8px; border-radius: 6px; background: transparent;
  font-size: 0.72rem; font-weight: 700; color: var(--fku-brand); text-decoration: underline;
}
.fku-weekpane .fku-wh button.fku-vishele:hover { background: var(--fku-hover); color: var(--fku-brand-dark); }
.fku-weekpane .fku-wh button.fku-vishele + button { margin-left: 6px; }

/* tegnforklaring for fagvisningen */
.fku-legend i.fku-l-fremmed { background: var(--fku-mott); opacity: 0.4; }
.fku-legend i.fku-l-felt { background: var(--fku-felt); box-shadow: inset 0 0 0 1px var(--fku-felt-kant); }
.fku-legend i.fku-l-avv {
  display: inline-grid; place-items: center; font-style: normal;
  font-size: 0.56rem; font-weight: 700; color: var(--fku-on-color);
}
.fku-legend .fku-l-tekst { color: var(--fku-muted); font-style: italic; }

/* ── fliser: «Fagets timer» tegnes som fliser, ikke rutenett (Thomas 17.09) ──
   Eleven på egen linje, fagets timer som fliser under. Hodet bærer dag og
   klokkeslett; tilstandssonen er den SAMME .fku-cell som i rutenettet, så alle
   tilstandsreglene over (farger, skravur, prikk, stiplet ramme, markering,
   felt, fremmed, avvikslåst) gjelder uendret. Bare modus 'fag' i fagvisningen
   tegner dette (tegnFliser); kontaktelev- og klassevisningen bruker ingen av
   klassene. Målene — 56 px flis, 23 px hode, 33 px sone, 4 px mellom fliser og
   linjer — må stemme med FLIS_B/FLIS_GAP i kontaktelever_uke.js, som regner
   kapasiteten per linje ut fra dem. Verdiene er fra mockupen (Artifact 6cab60ba). */
/* fast rullefeltrenne og høyrepadding, slik at bredden som måles i tegnFliser
   er den flisene faktisk får — også når rutenettet får sitt eget rullefelt */
.fku-workspace.fku-fliser-pa .fku-gridwrap { padding-right: 12px; scrollbar-gutter: stable; }
.fku-fliser { display: flex; flex-direction: column; }
.fku-tk-elev { padding: 6px 0 8px; border-bottom: 1px solid var(--fku-line); }
/* navnelinja: samme knapp som td.fku-navn i rutenettet, med 24 px avatar */
.fku-tk-navn { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; min-width: 0; }
.fku-tk-navn button {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  border: 0; background: transparent; padding: 2px 8px 2px 2px; border-radius: 6px;
  text-align: left; font-weight: 500; font-size: 0.78rem; color: var(--fku-ink);
}
.fku-tk-navn button:hover { background: var(--fku-hover); }
.fku-tk-elev.fku-tk-valgt .fku-tk-navn button { background: var(--fku-brand-tint); }
.fku-tk-navn .fku-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--fku-brand-tint-2) center/cover no-repeat; color: var(--fku-brand-dark);
  display: grid; place-items: center; font-size: 0.56rem; font-weight: 700;
}
.fku-tk-navn .fku-nv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fku-tk-navn .fku-sum { flex: none; font-size: 0.66rem; color: var(--fku-muted); display: flex; align-items: center; gap: 3px; }
.fku-tk-navn .fku-sum i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fku-udok); }
.fku-tk-kl { font-size: 0.66rem; color: var(--fku-muted); white-space: nowrap; }
/* linjene: brytes bare mellom hele dager (regnet ut i tegnFliser, aldri av CSS) */
.fku-tk-linje { display: flex; flex-wrap: nowrap; gap: 4px; }
.fku-tk-linje + .fku-tk-linje { margin-top: 4px; }
.fku-tk {
  flex: none; width: 56px; box-sizing: border-box; border-radius: 9px;
  background: var(--fku-surface); box-shadow: inset 0 0 0 1px var(--fku-line);
}
.fku-tk-lab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 23px; box-sizing: border-box; padding-top: 1px; line-height: 1; border-radius: 9px 9px 0 0;
  background: var(--fku-canvas); color: var(--fku-muted);
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.01em;
}
.fku-tk-lab span + span { color: var(--fku-ink); font-size: 0.6rem; }
/* hodet skifter tone for hver dag (Man d0, Tir d1, Ons d0, …) */
.fku-tk-d1 .fku-tk-lab { background: var(--fku-brand-tint); color: var(--fku-brand-dark); }
.fku-tk-d1 .fku-tk-lab span + span { color: var(--fku-brand-dark); }
/* timen som har avvikspanelet: hodet lyser i alle elevenes fliser for den timen */
.fku-tk-fokus .fku-tk-lab { background: var(--fku-sel); color: var(--fku-on-color); }
.fku-tk-fokus .fku-tk-lab span + span { color: var(--fku-on-color); }
/* tilstandssonen: cella fra rutenettet, uten margin, bare nederste hjørner avrundet */
.fku-tk .fku-cell { margin: 0; height: 33px; border-radius: 0 0 9px 9px; font-size: 0.82rem; }
/* en avvikslåst flis åpner avvikspanelet (data-avvik fra ikkeValgbarHtml) */
.fku-tk .fku-cell.fku-avvlaast[data-avvik] { cursor: pointer; }
/* dagstripa: «Alle» + én pille per dag, klebrig øverst i flaten. Vises bare
   når ukas fagtimer ikke får plass på én linje. */
.fku-tk-stripe {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px;
  /* Flaten har ingen toppluft i flisemodus (.fku-fliser-pa .fku-gridwrap), saa
     det klebrige filteret starter paa rulleportens kant og dekker med egen
     bakgrunn. Luften over pillene er den samme som under (Thomas 17.09). */
  margin-top: 0; padding: 8px 0 8px; margin-bottom: 4px;
  background: var(--fku-surface); border-bottom: 1px solid var(--fku-line);
}
.fku-tk-pille {
  flex: 1 1 52px; min-width: 52px; max-width: 9rem; text-align: center; line-height: 1.15;
  border: 1px solid var(--fku-line-strong); border-radius: 10px; padding: 5px 6px;
  background: var(--fku-surface); color: var(--fku-ink); font-size: 0.72rem; font-weight: 600;
}
.fku-tk-pille small { display: block; font-size: 0.62rem; font-weight: 500; color: var(--fku-muted); }
.fku-tk-pille:hover { background: var(--fku-hover); }
.fku-tk-pille[aria-current="date"] span { text-decoration: underline; text-underline-offset: 2px; }
.fku-tk-pille.fku-tk-pille-valgt { background: var(--fku-brand); border-color: var(--fku-brand); color: var(--fku-on-color); }
.fku-tk-pille.fku-tk-pille-valgt small { color: var(--fku-brand-tint-2); }
/* pekerverktøyet («Velg») i pensellinja */
.fku-chip[data-t="peker"] .fku-k { background: transparent; border: 1.5px solid var(--fku-faint); color: var(--fku-ink); }
.fku-chip .fku-finger { width: 14px; height: 14px; }
/* Høykontrast: box-shadow og bakgrunn faller bort, så flis og hode får ekte kant */
@media (forced-colors: active) {
  .fku-tk { border: 1px solid CanvasText; box-shadow: none; }
  .fku-tk-lab { border-bottom: 1px solid CanvasText; }
  .fku-tk-pille { border: 1px solid CanvasText; }
  .fku-tk-pille.fku-tk-pille-valgt { border: 2px solid Highlight; }
}

/* ── telefonmodus: fagvisningen på smal skjerm (Thomas 17.09) ──────────────
   Etter test på telefon: «alt for mye verktøy og ting i bildet, får bare 1,5
   elever med». Målet er at elevlista eier skjermen (7–8 elever synlige på
   390 × 800) med få verktøy der tommelen er — som den gamle mobilvisningen,
   der F S M O A ⌫ lå som handlingslinje nederst.
   ÉN kilde til sannhet: klassen fku-tlf på #fku_workspace, satt av settTlf i
   kontaktelever_uke.js fra appens eget bruddpunkt (max-width: 599px) — og
   bare i fagverten. Kontaktelev- og klassevisningen får aldri klassen, og
   skrivebordet heller ikke: alt under er prefikset .fku-tlf, eller gjelder
   skuffa og dialogen, som bare fylles på telefon. Ingen media-query her:
   bredden avgjøres ett sted. */
/* flaten ligger kant i kant (#module_root har ingen padding på telefon) */
.fku-workspace.fku-tlf { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }

/* topplinja: to kompakte rader. Rad 1 = tilbake (ikon) · fagvelger i full
   bredde · Angre (ikon) · Lagre med teller · Mer. Rad 2 = ‹ uke › I dag.
   Rekkefølgen settes med order; tittel og endringsteller skjules. Ikonene
   (display="icons") settes i malen, resten her. */
.fku-tlf .fku-topbar { padding: 6px 8px; gap: 6px; }
.fku-tlf .fku-topbar-start { order: 1; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 4px; }
.fku-tlf .fku-topbar-end { order: 2; flex: none; margin-left: 0; gap: 4px; }
.fku-tlf .fku-weeknav { order: 3; flex: 1 1 100%; justify-content: center; gap: 4px; }
/* gruppene på skrivebordet er gjennomsiktige her, så order/flex over treffer barna */
.fku-tlf .fku-topbar-rest, .fku-tlf .fku-toolbar-actions { display: contents; }
/* Liggende telefon (telefonmodus, men bred nok): hele topplinja på én rad —
   [←][fag][‹ uke ›][I dag] … [↺][Lagre][⋮] — så lista får høyden (Thomas 18.09) */
@media (min-width: 600px) {
  .fku-tlf .fku-topbar-start { flex: 0 1 auto; }
  .fku-tlf .fku-klasse-velger, .fku-tlf .fku-klasse-velger.fku-valg-bred { flex: 0 1 auto; width: 10rem; }
  .fku-tlf .fku-weeknav { order: 2; flex: 0 1 auto; justify-content: flex-start; }
  .fku-tlf .fku-topbar-end { order: 3; margin-left: auto; }
}
.fku-tlf .fku-tittel, .fku-tlf .fku-chgcount { display: none; }
.fku-tlf .fku-klasse-velger, .fku-tlf .fku-klasse-velger.fku-valg-bred { flex: 1 1 auto; min-width: 0; margin-left: 0; }
.fku-tlf .fku-uke-velger { flex: 1 1 auto; min-width: 0; max-width: 10rem; }   /* «2026-38» trenger ikke mer; raden sentreres */
.fku-tlf .fku-klasse-velger oj-c-select-single, .fku-tlf .fku-uke-velger oj-c-select-single { width: 100%; max-width: 100%; }

/* handlingslinja: SAMME .fku-toolbar, fast nederst i vinduet. Lead-teksten,
   vertens knapper (.fku-ekstra), mellomrommet og Pensel-avkrysningen er borte;
   chipsene får sidescroll, og «Før oppmøte» står som ikon helt til høyre.
   52 px høy + safe-area (iPhone). position: fixed slipper ut av
   .fku-workspace sin overflow: hidden (viewporten er beholderen), og z-index
   ligger under JET sitt popup-lag, så skuffa legger seg over linja. */
.fku-tlf .fku-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: 52px; box-sizing: content-box;
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  gap: 8px; flex-wrap: nowrap;
  border-bottom: 0; border-top: 1px solid var(--fku-line);
  box-shadow: 0 -2px 10px rgba(17, 55, 63, 0.10);
}
.fku-tlf .fku-lead, .fku-tlf .fku-spacer, .fku-tlf .fku-toolbar .fku-ekstra,
.fku-tlf .fku-toolbar oj-c-checkbox { display: none; }
.fku-tlf .fku-chips {
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 5px; padding: 2px 0;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fku-tlf .fku-chips::-webkit-scrollbar { display: none; }
/* bare bokstavbrikken: teksten (.fku-ct) og tastehintet er skjult — «F S M O A ⌫» */
.fku-tlf .fku-chip { flex: none; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 10px; }
.fku-tlf .fku-chip .fku-ct, .fku-tlf .fku-chip .fku-kbd { display: none; }
.fku-tlf .fku-chip .fku-k { width: 28px; height: 28px; font-size: 0.9rem; }
.fku-tlf .fku-chip .fku-finger { width: 18px; height: 18px; }
.fku-tlf .fku-chip:hover:not(:disabled) { transform: none; }
.fku-tlf .fku-toolbar .fku-oppmote { flex: none; }
/* flaten får bunnpadding lik linja, så siste elev ikke ligger under den. Har
   flaten egen scrollport (fku-har-avvik), trekker maalTilgjengelig linja fra
   høyden i tillegg — da ender flaten akkurat over linja uten sidescroll. */
.fku-tlf .fku-work { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
/* tegnforklaringen: skjult, åpnes fra Mer-menyen i en dialog (.fku-tlf-legend) */
.fku-tlf .fku-legend { display: none; }

/* dagstripa er hovednavigasjonen på telefon: alltid synlig (tegnFliser), og
   pillene er kompakte — dagnavn og tallet (dagstripeHtml) */
.fku-tlf .fku-tk-stripe { gap: 4px; padding: 6px 0 6px; margin-bottom: 2px; }
.fku-tlf .fku-tk-pille { flex: 1 1 0; min-width: 0; max-width: none; padding: 4px 2px; font-size: 0.7rem; border-radius: 8px; }
.fku-tlf .fku-tk-pille small { font-size: 0.6rem; }

/* elevrad på ÉN linje (≤ 4 timer i visningen, klassen settes i tegnFliser):
   navnet til venstre med ellipsis, flisene høyrestilt på samme linje. Flisene
   er 46 px brede og 20 + 30 px høye, så raden blir 56 px. Klassekoden er
   overflødig i et fag og skjules. Flere timer gir dagens oppsett. */
.fku-tlf .fku-tk-elev.fku-tk-enlinje { display: flex; align-items: center; gap: 6px; padding: 3px 0; min-height: 56px; box-sizing: border-box; }
.fku-tlf .fku-tk-enlinje .fku-tk-navn { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
/* klassen skal alltid være med (Thomas 17.09): inni knappen, på linje to under
   navnet, og avataren spenner begge linjene (40 px, som raden) */
.fku-tlf .fku-tk-enlinje .fku-tk-navn button { width: 100%; min-width: 0; gap: 8px; }
.fku-tlf .fku-tk-enlinje .fku-av { width: 40px; height: 40px; font-size: 0.72rem; }
.fku-nk { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fku-nk .fku-nv { display: block; }
.fku-nk .fku-tk-kl { display: block; margin-top: 1px; }
.fku-tlf .fku-tk-enlinje .fku-tk-linje { flex: none; margin-top: 0; }
.fku-tlf .fku-tk-enlinje .fku-tk { width: 46px; }
.fku-tlf .fku-tk-enlinje .fku-tk-lab { height: 20px; }
.fku-tlf .fku-tk-enlinje .fku-tk .fku-cell { height: 30px; }

/* panelskuffa: panelets node ligger i #fku_skuff_innhold på telefon (flyttPanel
   i kontaktelever_uke.js). Skuffa er JET sin oj-drawer-popup (edge=bottom,
   modal); mens den er åpen ligger den i popup-laget som barn av
   .oj-drawer-popup-surrogate — derfor fargevariablene på .fku-skuff øverst i
   fila. Selve elementet ruller (overflow-y: auto fra Redwood), maks 60 % av
   vinduet; panelets sticky hode klebrer mot den. */
.oj-drawer-popup-surrogate > oj-drawer-popup.fku-skuff {
  /* saa hoey som innholdet trenger, opp til nesten hele skjermen: panelet skal
     kunne leses uten aa rulle (Thomas 17.09, prøvd paa iPhone) */
  max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
  background: var(--fku-surface); color: var(--fku-ink);
  border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(17, 55, 63, 0.18);
  font-variant-numeric: tabular-nums;
}
/* gripe-strek øverst: sveip ned lukker (closeGesture er swipe) */
.fku-skuff-innhold::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--fku-line-strong); }
.fku-skuff .fku-panel { position: static; border-left: 0; border-top: 0; min-height: 0; max-height: none; overflow-y: visible; }
.fku-skuff .fku-pb { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* tegnforklaringen i dialogen: én linje per tegn, ingen strek over */
.fku-tlf-legend { flex-direction: column; align-items: flex-start; gap: 10px; padding: 2px 0 4px; border-top: 0; font-size: 0.8rem; color: var(--fku-ink); }

/* ── Startsiden: «Min timeplan i dag» i mobiscroll ─────────────────────────
   Dagvisning som elevenes startside. Høyden er innholdets: mobiscroll får
   ikke fylle skjermen slik Timeplan-modulen gjør, panelet skal være et kort. */
.ss-timeplan {
  margin-top: 0.5rem;
}
/* Ingen fast høyde: kortet skal vokse med skoledagen (08–16 som standard,
   utvidet når timer ligger utenfor). Lavere rader enn Timeplan-modulen, så
   kortet ikke blir en hel side. */
.ss-timeplan .mbsc-schedule-item,
.ss-timeplan .mbsc-schedule-time-wrapper {
  height: 48px;   /* 40 min-time = 32 px: plass til fag + klokkeslett */
}
.ss-timeplan .mbsc-schedule-event {
  cursor: pointer;
}
.ss-timeplan .ss-cal-tittel {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-timeplan .ss-cal-rom {
  font-weight: 400;
  opacity: 0.8;
}
/* Tom header-stripe (renderHeader gir '') tar 44 px — vekk med den */
.ss-timeplan .mbsc-calendar-header {
  display: none;
}
/* ── Startsiden: ikonbrikker i kortene ─────────────────────────────────────
   Ett-fargede fa-regular-ikoner i en tonet brikke erstatter duotone-ikonene
   med hardkodede farger. Fargen sier hva kortet handler om, ikke tallet. */
.ss-ikon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  font-size: 1.15rem;
  vertical-align: middle;
  margin-right: 0.35rem;
  background: var(--ss-ikon-bg, #eef2f3);
  color: var(--ss-ikon-fg, #3a4b52);
}
.ss-ikon-bla   { --ss-ikon-bg: #e4eef8; --ss-ikon-fg: #1f5f9e; }
.ss-ikon-lilla { --ss-ikon-bg: #eee8f7; --ss-ikon-fg: #7253a5; }
.ss-ikon-gul   { --ss-ikon-bg: #fff4d6; --ss-ikon-fg: #8a5814; }
.ss-ikon-teal  { --ss-ikon-bg: #e9f5f4; --ss-ikon-fg: #075c68; }
.ss-ikon-graa  { --ss-ikon-bg: #eef2f3; --ss-ikon-fg: #3a4b52; }
.ss-ikon-gronn { --ss-ikon-bg: #e3f4ee; --ss-ikon-fg: #1e7a5c; }
.ss-ikon-rod   { --ss-ikon-bg: #fdeae7; --ss-ikon-fg: #b8432f; }

/* Orden/oppførsel-kortet: de to tallene (orden, oppførsel) skal ha samme
   størrelse som ett-tallskortene og dele plassen jevnt i stedet for å stå
   klemt i en 190 px boks til høyre. */
.ss-par-ramme {
  max-height: 3rem;     /* erstatter oj-masonrylayout-tile-1x1, som låste bredden til 160 px */
  /* width 0 + min-width 100 %: paret skal FYLLE høyreblokken, men ikke telle
     med når flex regner ut hvor bred blokken må være — ellers (302 px med
     JETs knappepadding) havner blokken på neste rad, utenfor kortets
     max-height, og forsvinner. Etiketten «Elever med minst …» setter bredden. */
  width: 0;
  min-width: 100%;
}
.ss-par {
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
}
.ss-par-del {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
/* Borderless oj-button har bred padding; her skal ikon og tall stå tett */
.ss-par-del oj-button {
  margin: 0;
}
.ss-par-del .oj-button-button {
  padding-left: 4px;
  padding-right: 4px;
}