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

/* ── 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.8rem 0;
}

/* ── 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, #f6dbd7 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, #fbe9e6 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-udok) 0 3px, #fbe9e6 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; }
}