:root { --merke-teal: #28bcb1; --merke-blaa: #0993d1; --merke: linear-gradient(90deg, #28bcb1, #0993d1); --bg: #f4f8fa; --kort: #ffffff; --tekst: #0f2433; --dempet: #5b6f7d; --linje: #dde6eb; --topp: #0d2c40; --topp-tekst: #e8f1f6; --primaer: #0879b5; --primaer-tekst: #fff; --ok-bg: #dcfae6; --ok: #067647; --haster-bg: #fef0c7; --haster: #93370d; --feil-bg: #fee4e2; --feil: #b42318; --spor-bg: #dcf1fa; --spor: #06709f; --ia-bg: #eaecf0; --ia: #475467; --ingen: #98a2b3; --radius: 10px; } /* Mørk modus: følger systemet, men kan overstyres med knappen i toppen (data-tema="lys"/"mork" på , se tema.js) */ @media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { --bg: #0b141b; --kort: #14212b; --tekst: #e6f0f5; --dempet: #8fa6b4; --linje: #263845; --topp: #081a26; --topp-tekst: #e6f0f5; --primaer: #2fa8de; --primaer-tekst: #04141d; --ok-bg: #0f3d2a; --ok: #6ce9a6; --haster-bg: #4a3200; --haster: #fec84b; --feil-bg: #4a1512; --feil: #fda29b; --spor-bg: #0f2c3f; --spor: #7fd0f3; --ia-bg: #262c36; --ia: #b0b8c4; --ingen: #6b7280; color-scheme: dark; } } :root[data-tema="mork"] { --bg: #0b141b; --kort: #14212b; --tekst: #e6f0f5; --dempet: #8fa6b4; --linje: #263845; --topp: #081a26; --topp-tekst: #e6f0f5; --primaer: #2fa8de; --primaer-tekst: #04141d; --ok-bg: #0f3d2a; --ok: #6ce9a6; --haster-bg: #4a3200; --haster: #fec84b; --feil-bg: #4a1512; --feil: #fda29b; --spor-bg: #0f2c3f; --spor: #7fd0f3; --ia-bg: #262c36; --ia: #b0b8c4; --ingen: #6b7280; color-scheme: dark; } :root[data-tema="lys"] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--tekst); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--primaer); text-decoration: none; } a:hover { text-decoration: underline; } main { max-width: none; margin: 0; padding: 20px clamp(16px, 2vw, 36px) 60px; } /* hele bredden - tabellene trenger plassen */ h1 { font-size: 1.5rem; margin: 0 0 6px; } h2 { font-size: 1.1rem; margin: 0 0 10px; } h3 { font-size: .95rem; margin: 14px 0 6px; } .dempet { color: var(--dempet); } small { color: var(--dempet); } .topp { display: flex; align-items: center; gap: 18px; background: var(--topp); color: var(--topp-tekst); padding: 0 16px; min-height: 56px; flex-wrap: wrap; border-bottom: 3px solid; border-image: var(--merke) 1; } .topp a { color: var(--topp-tekst); } .logo { display: flex; align-items: center; gap: 10px; margin-right: 6px; } .logo img { display: block; height: 30px; width: auto; } .logo span { opacity: .75; font-size: .85rem; border-left: 1px solid #ffffff44; padding-left: 10px; } .topp .logo { padding: 8px 0; } .topp .bruker { margin-left: auto; } .skille { width: 1px; background: #ffffff33; margin: 2px 4px; } .bruker { display: flex; gap: 10px; align-items: center; margin: 0; font-size: .9rem; } button, select, input, textarea { font: inherit; color: inherit; } button { border: 1px solid var(--linje); background: var(--kort); border-radius: 8px; padding: 6px 12px; cursor: pointer; } button:hover { border-color: var(--dempet); } button.primaer { background: var(--primaer); color: var(--primaer-tekst); border-color: var(--primaer); } button.stor { padding: 10px 18px; font-size: 1rem; } button.lenke { border: 0; background: none; color: var(--primaer); padding: 0; } .topp button.lenke { color: var(--topp-tekst); } input, select, textarea { background: var(--kort); border: 1px solid var(--linje); border-radius: 8px; padding: 6px 8px; max-width: 100%; } textarea { width: 100%; resize: vertical; } label { display: block; font-size: .85rem; color: var(--dempet); } label > input, label > select, label > textarea { display: block; margin-top: 3px; width: 100%; color: var(--tekst); } label.avkryss, .avkrysninger label { display: flex; gap: 8px; align-items: center; color: var(--tekst); font-size: .95rem; } label.avkryss input, .avkrysninger input { width: auto; margin: 0; } :focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; } .kort { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 16px; margin: 14px 0; } .innlogging { max-width: 460px; margin: 60px auto; } .innlogging-topp { background: var(--topp); padding: 24px 28px; border-radius: 12px 12px 0 0; border-bottom: 4px solid; border-image: var(--merke) 1; } .innlogging-topp img { display: block; max-width: 100%; height: auto; } .innlogging-kropp { margin-top: 0; border-top: 0; border-radius: 0 0 12px 12px; } .brukervalg { display: grid; gap: 8px; } .brukervalg button { text-align: left; padding: 10px 14px; } .innloggingsskjema { display: grid; gap: 12px; } .innloggingsskjema button { margin-top: 4px; } .melding { padding: 10px 14px; border-radius: 8px; margin: 10px 0; background: var(--spor-bg); color: var(--spor); } .melding.ok { background: var(--ok-bg); color: var(--ok); } .melding.feil { background: var(--feil-bg); color: var(--feil); } .melding.advarsel { background: var(--haster-bg); color: var(--haster); } .feilmelding { background: var(--feil-bg); color: var(--feil); padding: 8px 12px; border-radius: 8px; } .filter { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 12px 0; } .filter label { min-width: 160px; } .tabellramme { overflow-x: auto; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; } th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--linje); vertical-align: middle; } thead th { position: sticky; top: 0; background: var(--kort); font-size: .8rem; color: var(--dempet); text-transform: none; z-index: 1; } tbody tr:hover { background: color-mix(in srgb, var(--primaer) 5%, transparent); } .liste td small, .matrise th small { display: block; } .matrise th[scope=row] { position: sticky; left: 0; background: var(--kort); min-width: 240px; font-weight: 500; z-index: 1; } .matrise td { text-align: center; padding: 5px 4px; } .matrise thead th { text-align: center; } .matrise thead th:first-child { text-align: left; } .matrise td:has(.bred), .matrise td:has(.celle.bred) { text-align: left; } .chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; } .chip.ok, .celle.ok { background: var(--ok-bg); color: var(--ok); } .chip.haster, .celle.haster { background: var(--haster-bg); color: var(--haster); } .chip.forsinket, .celle.forsinket { background: var(--feil-bg); color: var(--feil); } .chip.spor, .celle.spor { background: var(--spor-bg); color: var(--spor); } .chip.ia, .celle.ia { background: var(--ia-bg); color: var(--ia); } .chip.ingen, .celle.ingen { background: transparent; color: var(--ingen); } .celle { min-width: 3.6rem; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; font-size: .8rem; font-weight: 600; } .celle.bred { min-width: 7rem; } .celle:hover { border-color: currentColor; } .klient-oppgaver { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; } .klient-oppgaver strong { min-width: 190px; } .sammendrag { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 12px 0; padding: 12px 16px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); } .sammendrag div { display: flex; flex-direction: column; } .sammendrag strong { font-size: 1.15rem; } .sammendrag span { font-size: .78rem; color: var(--dempet); } meter { width: 110px; height: 10px; vertical-align: middle; } .rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .avkrysninger { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-bottom: 12px; } fieldset { border: 1px solid var(--linje); border-radius: var(--radius); margin: 0 0 14px; padding: 12px 14px; } legend { padding: 0 6px; font-weight: 600; font-size: .9rem; } .smal { max-width: 320px; } .knapper { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } dialog { border: 1px solid var(--linje); border-radius: 14px; padding: 0; width: min(760px, 96vw); max-height: 92vh; background: var(--kort); color: var(--tekst); } dialog::backdrop { background: #0008; } dialog .skjema { padding: 18px 20px; } .skjema-topp { display: flex; justify-content: space-between; gap: 12px; align-items: start; } .skjema-topp h2 { font-size: 1.2rem; margin: 0; } .status-boks { text-align: right; } .status-boks small { display: block; } .felter { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; } .kommentar { border-top: 1px solid var(--linje); padding: 6px 0; } .kommentar p { margin: 4px 0 0; white-space: pre-wrap; } .kommentar time, .loggrad time { color: var(--dempet); font-size: .8rem; } .loggrad { margin: 3px 0; font-size: .85rem; } .mailvisning { width: 100%; height: 70vh; border: 1px solid var(--linje); border-radius: var(--radius); background: #fff; } .logg td { font-size: .85rem; } @media (max-width: 720px) { .matrise th[scope=row] { min-width: 150px; } } /* Kalender */ a.knapp { display: inline-block; border: 1px solid var(--linje); background: var(--kort); border-radius: 8px; padding: 6px 12px; color: var(--tekst); } a.knapp:hover { border-color: var(--dempet); text-decoration: none; } .kal { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 860px; } .kal-hode { padding: 6px 8px; font-size: .8rem; color: var(--dempet); border-bottom: 1px solid var(--linje); background: var(--kort); } .kal-dag { min-height: 96px; padding: 4px 6px 6px; border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje); } .kal-dag.utenfor { background: color-mix(in srgb, var(--ia-bg) 40%, transparent); } .kal-dag.utenfor .kal-dato { color: var(--ingen); } .kal-dag.idag { outline: 2px solid var(--primaer); outline-offset: -2px; } .kal-dato { font-size: .8rem; font-weight: 600; margin-bottom: 3px; } .kal-dato small { font-weight: 400; } .kal-gruppe { border-radius: 6px; margin-bottom: 3px; font-size: .78rem; } .kal-gruppe summary { cursor: pointer; padding: 2px 6px; border-radius: 6px; list-style: none; } .kal-gruppe summary::-webkit-details-marker { display: none; } .kal-gruppe .antall { opacity: .8; white-space: nowrap; } .kal-gruppe.ok summary { background: var(--ok-bg); color: var(--ok); } .kal-gruppe.spor summary { background: var(--spor-bg); color: var(--spor); } .kal-gruppe.haster summary { background: var(--haster-bg); color: var(--haster); } .kal-gruppe.forsinket summary { background: var(--feil-bg); color: var(--feil); } .kal-gruppe ul { margin: 3px 0 4px; padding-left: 14px; max-height: 240px; overflow-y: auto; } .kal-gruppe li.ferdig button { color: var(--dempet); text-decoration: line-through; } .kal-gruppe li button { font-size: .78rem; text-align: left; } /* Merkevare og nye elementer */ a.primaer-lenke { background: var(--primaer); color: var(--primaer-tekst); border-color: var(--primaer); } a.primaer-lenke:hover { text-decoration: none; filter: brightness(1.08); } .teller { display: inline-block; min-width: 1.3em; text-align: center; background: var(--merke-teal); color: #04202b; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 0 5px; } .tilbakemelding-knapp { background: transparent; color: var(--topp-tekst); border-color: #ffffff55; } .tilbakemelding-knapp:hover { border-color: #fff; } .bruker form { display: flex; gap: 10px; align-items: center; margin: 0; } .midt { text-align: center; } .kundeoversikt th, .kundeoversikt td { padding: 5px 6px; font-size: .84rem; } .kundeoversikt th { line-height: 1.15; } .brreg-treff { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; } .brreg-treff button { text-align: left; } .kontrollkort { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .kontrollkort .kort { margin: 0; } .kontroll-sammendrag { margin: 8px 0; padding: 10px 12px; background: var(--spor-bg); border-radius: 8px; } .kontroll-sammendrag p { margin: 4px 0; } .kundeinfo summary { cursor: pointer; } .kundeinfo dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; margin: 10px 0 0; } .kundeinfo dt { font-size: .75rem; color: var(--dempet); } .kundeinfo dd { margin: 0; } .seksjon-topp { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; } .seksjon-topp h2 { margin: 0; } .seksjon.gjelder-ikke { opacity: .7; } h3.gruppe { margin: 14px 0 4px; color: var(--dempet); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } .punkt { display: grid; grid-template-columns: minmax(220px, 3fr) auto minmax(160px, 2fr) 9.5rem; gap: 8px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linje); } .punkt-hode { font-size: .75rem; color: var(--dempet); border-bottom: 2px solid var(--linje); padding: 4px 0; } .punkt.fri { grid-template-columns: minmax(220px, 3fr) auto minmax(160px, 2fr); } .punkt.fri input.punkt-tekst { width: 100%; } .punkt.avvik { background: color-mix(in srgb, var(--feil-bg) 55%, transparent); border-radius: 6px; } .punkt-valg { display: flex; gap: 4px; } .valg { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--linje); border-radius: 999px; padding: 2px 10px; font-size: .85rem; color: var(--tekst); cursor: pointer; background: var(--kort); } .valg input { margin: 0; } .valg:has(input:checked) { font-weight: 600; } .valg.v-ok:has(input:checked), .valg.v-ja:has(input:checked) { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .valg.v-avvik:has(input:checked), .valg.v-nei:has(input:checked) { background: var(--feil-bg); color: var(--feil); border-color: var(--feil); } .valg.v-ia:has(input:checked) { background: var(--ia-bg); color: var(--ia); border-color: var(--ia); } .punkt-k, .punkt-e { width: 100%; } .steg { padding-left: 20px; } .steg li { margin: 4px 0; } .tilbakemelding header { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; } .tilbakemelding .tekst { white-space: pre-wrap; margin: 8px 0; } .tilbakemelding-svar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .tilbakemelding-svar label:nth-of-type(2) { flex: 1; min-width: 220px; } .svar { background: var(--spor-bg); border-radius: 8px; padding: 6px 10px; } .takk { padding: 24px 20px; } @media (max-width: 820px) { .punkt, .punkt.fri { grid-template-columns: 1fr; } .punkt-hode { display: none; } } @media print { .topp, .knapper, .filter, dialog, .melding, [data-skriv-ut], .tilbakemelding-knapp, .sidemeny, .handlinger form { display: none !important; } body { background: #fff; color: #000; } .kort { border: 0; padding: 4px 0; } .punkt { break-inside: avoid; } .seksjon-innhold[hidden] { display: none; } .punkt-hode { display: none; } a { color: inherit; } } .middels { max-width: 560px; } [data-brreg-sok] { min-width: 340px; } /* Kvalitetssystem: avvik, rutiner, rapport */ .undertittel { margin: 22px 0 8px; font-size: 1.05rem; color: var(--dempet); } .forfalt-tekst { color: var(--feil); font-weight: 600; } ul.enkel { list-style: none; margin: 4px 0; padding: 0; } ul.enkel li { padding: 4px 0; border-bottom: 1px solid var(--linje); } ul.enkel li:last-child { border-bottom: 0; } .arvelger label { display: flex; gap: 6px; align-items: center; color: var(--topp-tekst); font-size: .85rem; } .arvelger label > select { display: inline-block; width: auto; margin: 0; padding: 2px 6px; } .arvelger { margin: 0; } .bred-input { min-width: 320px; } .rutine { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--linje); } .rutine:last-child { border-bottom: 0; } .rutine-tekst { flex: 1 1 340px; display: flex; flex-direction: column; gap: 2px; } .rutine.ferdig .rutine-tekst strong { color: var(--dempet); font-weight: 500; } .rutine.inaktiv { opacity: .55; } .rutine-skjema { display: flex; gap: 6px; align-items: center; margin: 0; } .rutine-skjema input { min-width: 200px; } .rutine-admin { flex-basis: 100%; } .rutine-admin summary { cursor: pointer; color: var(--dempet); font-size: .85rem; } .signatur { display: none; } @media print { .signatur { display: block; margin-top: 30px; break-inside: avoid; } .rutine-skjema, .rutine-admin, .arvelger { display: none !important; } .tabellramme { border: 0; } .kort { break-inside: avoid; } } /* søk i toppen */ .sokeskjema { margin: 0; } .sokeskjema input { width: 150px; padding: 5px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-size: .85rem; } .sokeskjema input::placeholder { color: rgba(255,255,255,.7); } .sokeskjema input:focus { background: #fff; color: #10202c; outline: 2px solid #22b5c9; } @media print { .sokeskjema { display: none !important; } } .varsel-boks { background: #fff8e1; border: 1px solid #f0d58a; border-radius: var(--radius); padding: 10px 14px; font-size: .9rem; margin: 10px 0; } /* regnskapsanalyse */ .inline-skjema { display: inline; margin: 0; } .tallskjema input { width: 100%; min-width: 120px; text-align: right; padding: 5px 8px; } .analyse { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 22px 26px; margin: 14px 0; max-width: 900px; } .analyse h2 { margin: 22px 0 8px; font-size: 1.05rem; border-bottom: 2px solid var(--merke-teal); padding-bottom: 4px; } .analyse-brevhode { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 3px solid; border-image: var(--merke) 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .analyse-merke { display: flex; align-items: center; gap: 8px; } .analyse-merke img { display: block; height: 26px; width: auto; } .analyse-merke span { font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dempet); } .analyse-kunde { margin: 10px 0 0; font-size: 1.3rem; font-weight: 700; } .analyse-tittel { margin: 2px 0 0; font-size: .95rem; } .analyse .samlet { font-size: 1.05rem; } .signatur-linje { margin-top: 22px; } .analyse-fotnote { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--linje); font-size: .78rem; font-style: italic; color: var(--dempet); } textarea.epost { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; width: 100%; } @media print { .ikke-skriv { display: none !important; } .analyse { border: 0; padding: 0; max-width: none; } .analyse .chip { border: 1px solid #999; } .analyse h2 { break-after: avoid; } .analyse ul, .analyse table { break-inside: avoid; } } .kontodetaljer { margin: 12px 0 20px; } .kontodetaljer summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; } .kontotabell { width: 100%; margin-bottom: 10px; } .kontotabell caption { text-align: left; font-weight: 600; padding: 6px 4px; } .kontotabell td.tall, .kontotabell th.tall { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* lys/mørk-knapp */ .tema-knapp { font-size: .85rem; white-space: nowrap; } /* regnskapsanalyse: skjule punkter i rapporten til kunden */ .skjul-knapp { font-size: .72rem; padding: 1px 7px; margin-left: 6px; border-radius: 999px; color: var(--dempet); vertical-align: middle; } .analyse h2 .skjul-knapp { font-weight: 400; } .analyse .skjult { opacity: .45; } .analyse .skjult > *:not(.skjul-knapp):not(h2), .analyse li.skjult, .analyse tr.skjult td:not(.ikke-skriv), .analyse p.skjult { text-decoration: line-through; } .analyse .skjult .skjul-knapp { text-decoration: none; opacity: 1; } @media print { .analyse .skjult { display: none !important; } } [hidden] { display: none !important; } fieldset.innfelt { border: 1px solid var(--linje); border-radius: 8px; padding: 8px 12px; margin: 10px 0; } fieldset.innfelt legend { font-size: .85rem; color: var(--dempet); padding: 0 4px; } table.kundeliste td { white-space: nowrap; } table.kundeliste td:first-child { white-space: normal; min-width: 160px; } .sammendrag a { color: inherit; } .rolle-skjema { border-top: 1px solid var(--linje); padding: 12px 0; } .rolle-skjema > label { max-width: 320px; } .chip.mangler { background: var(--feil-bg); color: var(--feil); } /* oppdragsavtaler: dokumentpakke (skjerm og utskrift) */ .avtale-dok { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 24px 30px; margin: 16px 0; max-width: 900px; font-size: 14px; line-height: 1.5; } .avtale-dok h1 { font-size: 1.35rem; margin: 6px 0 14px; text-transform: uppercase; letter-spacing: .02em; } .avtale-dok h2 { font-size: 1.05rem; margin: 18px 0 6px; text-transform: uppercase; } .avtale-dok h3 { font-size: .95rem; margin: 14px 0 4px; } .avtale-dok h4 { font-size: .9rem; margin: 10px 0 4px; } .avtale-dok p { margin: 6px 0; } .avtale-dok ul { margin: 6px 0 6px 20px; padding: 0; } .avtale-hode { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid; border-image: var(--merke) 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; } table.avtale-tabell { border-collapse: collapse; width: 100%; margin: 8px 0 12px; font-size: 13px; } table.avtale-tabell th, table.avtale-tabell td { border: 1px solid var(--linje); padding: 4px 8px; text-align: left; vertical-align: top; } table.avtale-tabell th { background: var(--spor-bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; } table.avtale-tabell.spesifikasjon td:first-child, table.avtale-tabell.spesifikasjon th:first-child { width: 60px; text-align: center; } .avtale-signatur { margin-top: 28px; break-inside: avoid; } .avtale-signatur .signaturer { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 36px; } .avtale-signatur .signaturer div { flex: 1 1 220px; font-size: .85rem; color: var(--dempet); } .avtale-signatur .signaturer span { display: block; border-bottom: 1px solid var(--tekst); height: 28px; margin-bottom: 4px; } .skrivelinje { border-bottom: 1px solid var(--dempet); height: 26px; } .avtale-dok p.kryss { margin-left: 4px; } .plassholder { color: var(--spor); font-style: italic; } .avtalemal-tekst { font-family: ui-monospace, Consolas, monospace; font-size: 13px; width: 100%; } @media print { .avtale-dok { border: 0; padding: 0; margin: 0; max-width: none; font-size: 11pt; break-before: page; } .avtale-dok:first-of-type { break-before: auto; } body { background: #fff; } table.avtale-tabell th, table.avtale-tabell td { border-color: #999; } table.avtale-tabell tr, .avtale-dok h2, .avtale-dok h3 { break-inside: avoid; } .avtale-dok h2, .avtale-dok h3 { break-after: avoid; } } /* v3.8: sidemeny til venstre (som Tripletex/Xledger), favoritter med stjerne, full bredde */ :root { --meny-b: 236px; --topp-h: 59px; } .med-meny .topp { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; min-height: var(--topp-h); } .med-meny .topp .sokeskjema input { width: clamp(160px, 22vw, 340px); } .meny-knapp { display: none; background: transparent; color: var(--topp-tekst); border: 1px solid #ffffff44; font-size: 1.1rem; padding: 2px 10px; } .sidemeny { position: fixed; top: var(--topp-h); left: 0; bottom: 0; width: var(--meny-b); overflow-y: auto; background: var(--kort); border-right: 1px solid var(--linje); padding: 10px 0 30px; z-index: 20; font-size: .9rem; } .med-meny main, .med-meny > .melding.demo { margin-left: var(--meny-b); } .menygruppe { border-bottom: 1px solid var(--linje); padding: 4px 0 8px; } .menygruppe:last-of-type { border-bottom: 0; } .menygruppe summary { list-style: none; cursor: pointer; padding: 6px 16px 2px; } .menygruppe summary::-webkit-details-marker { display: none; } .menygruppe summary::after { content: "▾"; float: right; color: var(--dempet); font-size: .8rem; margin-top: 2px; } .menygruppe:not([open]) summary::after { content: "▸"; } .menygruppe h2 { display: inline; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dempet); margin: 0; font-weight: 700; } .menygruppe.favoritter h2 { display: block; padding: 6px 16px 2px; color: #b8860b; } .sidemeny ul { list-style: none; margin: 2px 0 0; padding: 0; } .sidemeny li { position: relative; } .sidemeny li > a { display: block; padding: 5px 34px 5px 16px; color: var(--tekst); border-left: 3px solid transparent; } .sidemeny li > a:hover { background: var(--spor-bg); text-decoration: none; } .sidemeny li.aktiv > a { border-left-color: var(--merke-blaa); background: var(--spor-bg); font-weight: 600; color: var(--spor); } .stjerne-skjema { margin: 0; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } .stjerne { border: 0; background: none; padding: 2px 10px; color: var(--ingen); font-size: .95rem; line-height: 1; opacity: 0; cursor: pointer; } .sidemeny li:hover .stjerne, .stjerne:focus-visible, .stjerne.pa { opacity: 1; } .stjerne.pa { color: #e0a800; } .meny-hint { margin: 2px 16px 4px; color: var(--dempet); font-size: .8rem; } .meny-versjon { margin: 14px 16px 0; color: var(--ingen); font-size: .75rem; } .sidehode { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sidehode h1 { margin: 0; } .sidehode .knapper { margin: 0; } .avkrysningstabell td.midt { white-space: nowrap; } .avkrysningstabell td.midt small { color: var(--dempet); font-size: .7rem; margin-left: 3px; } .avkrysningstabell input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; } .avkrysningstabell input.lagrer { opacity: .4; } .avkrysningstabell input.lagret { outline: 2px solid var(--ok); outline-offset: 1px; } @media (max-width: 900px) { .meny-knapp { display: inline-block; } .sidemeny { top: 0; z-index: 40; transform: translateX(-100%); transition: transform .15s; box-shadow: 4px 0 18px #0003; } .sidemeny.vis { transform: none; } .med-meny main, .med-meny > .melding.demo { margin-left: 0; } .med-meny .topp { flex-wrap: wrap; } .med-meny .topp .logo span, .med-meny .topp .sokeskjema { display: none; } } @media print { .sidemeny, .meny-knapp { display: none !important; } .med-meny main { margin-left: 0; } } /* Tofaktor (v3.9) */ .qr-ramme { background: #fff; display: inline-block; padding: 8px; border-radius: 8px; margin: 8px 0; } .qr-ramme svg { display: block; width: 220px; height: 220px; } code.hemmelighet { font-size: 1.05em; letter-spacing: .05em; word-break: break-all; } .trinnliste { padding-left: 1.2em; } .trinnliste li { margin: 4px 0; } label.avkrysning { display: flex; gap: 8px; align-items: center; font-weight: normal; } button.liten { padding: 2px 8px; font-size: .85em; } /* v3.10: varsler (bjella) og fristsiden fra kalenderen */ .bjelle { position: relative; color: var(--topp-tekst); text-decoration: none; font-size: 1.05rem; padding: 2px 6px; border-radius: 6px; } .bjelle:hover { text-decoration: none; background: rgba(255,255,255,.12); } .bjelle .teller { position: absolute; top: -6px; right: -8px; background: #d9534f; color: #fff; border-radius: 9px; font-size: .68rem; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; font-weight: 700; } .varselliste { list-style: none; margin: 0; padding: 0; } .varselliste li { border: 1px solid var(--linje); border-left: 4px solid var(--linje); border-radius: 8px; margin: 0 0 8px; background: var(--kort); } .varselliste li.ulest { border-left-color: var(--merke-blaa); } .varselliste li.varsel-forsinket.ulest { border-left-color: #d9534f; } .varselliste li.varsel-haster.ulest { border-left-color: #e0a100; } .varselliste li.lest { opacity: .65; } .varselliste a { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; padding: 9px 12px; color: var(--tekst); text-decoration: none; align-items: baseline; } .varselliste a:hover .varsel-tekst { text-decoration: underline; } .varsel-type { font-weight: 600; font-size: .85rem; } .varsel-tid { color: var(--dempet, #6b7a86); font-size: .8rem; white-space: nowrap; } @media (max-width: 700px) { .varselliste a { grid-template-columns: 1fr; gap: 2px; } } tr.ferdig-rad td { opacity: .6; } td.handlinger { white-space: nowrap; } td.handlinger form.inline { display: inline; margin: 0; } td.handlinger .knapp, td.handlinger button { margin-left: 4px; } /* v4.0: regnskapsmodulen */ .melding.info { background: var(--spor-bg); color: var(--tekst); } td.tall, th.tall, input.tall { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .neg { color: var(--feil); } .felter label.bred { grid-column: span 2; } @media (max-width: 700px) { .felter label.bred { grid-column: auto; } } .rs-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .rs-kunde { font-size: 1.05rem; } .rs-ar { margin: 0; } .rs-ar label { display: flex; gap: 6px; align-items: center; } .rs-faner { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--linje); margin: 0 0 16px; } .rs-faner a { padding: 7px 11px; border-radius: 8px 8px 0 0; color: var(--tekst); border: 1px solid transparent; border-bottom: 0; font-size: .9rem; } .rs-faner a:hover { text-decoration: none; background: var(--spor-bg); } .rs-faner a.aktiv { background: var(--kort); border-color: var(--linje); font-weight: 600; box-shadow: inset 0 3px 0 var(--merke-blaa); margin-bottom: -1px; } .rs-undervalg { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .rs-undervalg a { padding: 5px 12px; border: 1px solid var(--linje); border-radius: 999px; color: var(--tekst); background: var(--kort); font-size: .9rem; } .rs-undervalg a.aktiv { background: var(--merke-blaa); border-color: var(--merke-blaa); color: #fff; } .rs-nokkeltall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 14px; } .rs-nokkeltall .kort { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .rs-nokkeltall span { color: var(--dempet); font-size: .85rem; } .rs-nokkeltall strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; } .rs-to { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; } .rs-to .kort { margin: 0; } @media (max-width: 900px) { .rs-to { grid-template-columns: 1fr; } } .rs-skjema fieldset { border: 1px solid var(--linje); border-radius: 8px; padding: 10px 14px; margin: 10px 0; display: grid; gap: 8px; } .rs-skjema fieldset label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: normal; } .rs-skjema .rs-spes { display: block; max-width: 420px; margin: 8px 0; } .rs-linjer select, .rs-linjer input { width: 100%; min-width: 90px; } .rs-linjer td:first-child select { min-width: 200px; } .rs-linjer tfoot td { font-weight: 600; } .rs-journal tbody.rs-bilag { border-top: 2px solid var(--linje); } .rs-journal .rs-bilag-hode td { background: var(--spor-bg); } .rs-journal tbody.korrigert .rs-post td { text-decoration: line-through; opacity: .6; } .rs-oppstilling tr.sum td { font-weight: 700; border-top: 1px solid var(--tekst); } .rs-fakta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 12px; } .rs-fakta dt { color: var(--dempet); font-size: .85rem; } .rs-fakta dd { margin: 0; font-weight: 600; } .tall-hoyre { float: right; font-variant-numeric: tabular-nums; } .rs-konto { break-inside: avoid; } .rs-skjema fieldset label { display: flex; flex-direction: row; align-items: center; gap: 8px; } .rs-skjema fieldset input[type=radio] { width: auto; margin: 0; flex: none; } .rs-skjema fieldset select { width: auto; max-width: 380px; min-width: 200px; } .nowrap { white-space: nowrap; } .rs-skjema fieldset label { color: var(--tekst); font-size: .95rem; } .rs-skjema fieldset label > input[type=radio], .rs-skjema fieldset label > select { display: inline-block; margin-top: 0; } .rs-ar label > select { display: inline-block; width: auto; margin: 0; } .rs-linjer td > select, .rs-linjer td > input { margin: 0; } .rs-forhandsvisning { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 10px 0; } .rs-forhandsvisning img { max-width: 100%; max-height: 520px; border: 1px solid var(--linje); border-radius: 6px; background: #fff; } .rs-forhandsvisning iframe { width: 100%; height: 520px; border: 1px solid var(--linje); border-radius: 6px; background: #fff; } @media print { .rs-forhandsvisning iframe { display: none; } } /* Bank (v4.1) */ label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: normal; } label.inline > input[type=checkbox] { width: auto; margin: 0; } .rs-bank td:first-child input[type=checkbox] { width: auto; margin: 0; } .rs-bank .chip { white-space: normal; } .kort > label > input[type=radio] { width: auto; margin: 0 6px 0 0; } .kort > label:has(> input[type=radio]) { display: flex; align-items: center; font-weight: normal; margin: 4px 0; } .rs-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rs-regel > input { width: auto; min-width: 240px; margin: 0; } .rs-fakta dd small { font-weight: normal; } .ar-felt { width: 6rem; } .bd-liste input { min-width: 6rem; } .bd-liste td > input.tall { text-align: right; } .ks-plan select { min-width: 4.5rem; } .ks-perioder .chip { margin: 1px; } tr.valgt td { background: var(--spor-bg); } /* v5.0: kundetiltak, kvalitetssikring, balanse */ .jn { display: inline-flex; gap: 10px; margin-left: 8px; } .jn label { display: inline-flex; align-items: center; gap: 3px; font-weight: normal; } .jn input[type=radio] { width: auto; margin: 0; } .kt-sporsmal { display: grid; gap: 6px; margin: 10px 0; } .kt-sporsmal input { width: auto; display: inline-block; } .kt-personer { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .kt-personer fieldset { display: grid; gap: 6px; } .kt-risiko td:first-child { width: 55%; } .kt-risiko input { width: 100%; } .lenkeknapp { background: none; border: 0; padding: 0; color: var(--merke-blaa); text-decoration: underline; cursor: pointer; font-size: .85rem; } h3 .normal { font-weight: normal; font-size: .9rem; } .forklaring dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; } .forklaring dt { font-weight: 600; } /* v5.0 bank: avstemming side om side, kolonnevalg ved import, vedlegg i listen */ .rs-avstem-sum { position: sticky; bottom: 0; background: var(--kort); padding: 10px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .rs-kolonner select { min-width: 9em; } input.liten-fil { max-width: 14em; font-size: .85em; } .logo-tekst { font-size: 1.05rem; letter-spacing: .02em; color: var(--topp-tekst); } .innlogging-topp .logo-tekst { font-size: 1.4rem; } button:disabled { opacity: .45; cursor: not-allowed; } .tf-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 4px; } .tf-tall > div { background: var(--kort); border: 1px solid var(--linje); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .tf-tall span { font-size: .78rem; color: var(--dempet); } .tf-tall strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .inline-skjema { display: inline-flex; gap: 6px; margin-left: 8px; } .brev table { border-collapse: collapse; margin: 10px 0; } .brev th, .brev td { border-bottom: 1px solid var(--linje); padding: 4px 12px 4px 0; text-align: left; } /* v5.1 fakturering */ .fk-linjer td { padding: 4px 6px; vertical-align: top; } .fk-linjer input, .fk-linjer select { width: 100%; min-width: 0; } .fk-linjer td:nth-child(1) { min-width: 16rem; } .fk-linjer td:nth-child(2), .fk-linjer td:nth-child(5) { width: 5.5rem; } .fk-linjer td:nth-child(3) { width: 6rem; } .fk-linjer td:nth-child(4) { width: 8rem; } .fk-linjer td:nth-child(6), .fk-linjer td:nth-child(7) { width: 10rem; } /* v5.4 kundeportal */ .portal-topp { gap: 18px; } .portal-nav { display: flex; gap: 14px; flex-wrap: wrap; } .portal-nav a { color: inherit; text-decoration: none; opacity: .9; } .portal-nav a:hover { text-decoration: underline; } .portal-innhold { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; } .portal-login { max-width: 420px; margin: 40px auto; display: flex; flex-direction: column; gap: 10px; } .portal .qr svg { width: 200px; height: 200px; } .sprakvelger { display: inline; } .feil-tekst { color: var(--feil); } .ja-nei { display: flex; gap: 24px; }