/* ---------------------------------------------------------------------------
   OFV-designsystemet for Kjøretøydata

   Overstyringslag over de gamle stilarkene (screen.css, screen_new.css og
   Bootstrap på dashboard.htm). Lastes sist på index.html, kd.html og
   dashboard.htm. Farger, typografi og komponentregler følger DESIGN.md i
   ofv-website; de gamle stilarkene er urørt, så laget kan fjernes igjen ved å
   ta ut <link>-taggen.

   screen.css er kompilert fra Compass/SASS i media/styles/sass/src, og det
   verktøyet kjører ikke lenger. Derfor overstyrer vi her i stedet for å
   kompilere på nytt.
   --------------------------------------------------------------------------- */

:root {
  --skogsgronn: #4e644b;
  --skogsgronn-hover: #5b745a;
  --skogsgronn-lys: #eef1ec;
  --skogsgronn-lys-50: #f7f8f6;
  --sage-halo: #dfe5d7;
  --asfaltsort: #212121;
  --asfaltsort-80: rgba(33, 33, 33, 0.8);
  --asfaltsort-70: rgba(33, 33, 33, 0.7);
  --asfaltsort-65: rgba(33, 33, 33, 0.65);
  --asfaltsort-15: rgba(33, 33, 33, 0.15);
  --varm-gul: #fdc638;
  --varm-gul-tint: #fff4d7;
  --himmelgra: #f7f6ee;
  --hvit: #ffffff;
  --nedgang-rod: #9c3328;
  --hairline: #e5e5e5;
  --focus-ring: var(--skogsgronn);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------------
   Skrift: Arial bærer hele stemmen

   De gamle stilarkene bruker 'Open Sans', 'Open Sans Bold', 'Open Sans Light'
   og 'LeagueGothicRegular' på flere hundre selektorer, og 'Open Sans Bold'
   brukes som fet vekt (med font-weight: normal). I stedet for å overstyre hver
   selektor peker vi familienavnene om til Arial: en senere @font-face med samme
   beskrivelser vinner. Da blir 'Open Sans Bold' fortsatt fet.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Open Sans';
  src: local('Arial'), local('ArialMT');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Arial Italic'), local('Arial-ItalicMT');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Arial Bold Italic'), local('Arial-BoldItalicMT');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans Bold';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Bold';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Bold';
  src: local('Arial Bold Italic'), local('Arial-BoldItalicMT');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans Light';
  src: local('Arial'), local('ArialMT');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LeagueGothicRegular';
  src: local('Arial'), local('ArialMT');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   Grunnflate og brødtekst
   --------------------------------------------------------------------------- */

/* De gamle stilarkene setter 5px toppmarg og 95 % høyde på body. Med margen
   borte må høyden være 100 %, ellers blir det en stripe under footeren. */
html,
body {
  margin: 0;
  height: 100%;
}

/* Tabellfigurer på alle tall (The Tabular-Nums Rule). Appen er nesten bare
   tabeller med tall, så det settes globalt. */
body {
  background: var(--hvit);
  color: var(--asfaltsort);
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1;
  font-variant-numeric: tabular-nums;
}

/* 13px er gulvet (The 13px Floor). Unntaket er resultattabellen, se under. */
a, a:hover, a:visited, p, span, input, textarea, td, th, li {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--asfaltsort-80);
}

a:hover {
  text-decoration: underline;
}

strong,
b {
  font-weight: bold;
  color: var(--asfaltsort);
}

::selection {
  background: var(--skogsgronn);
  color: var(--hvit);
}

/* Fokusringen ligger utenfor elementet, så fargen må stå i kontrast til flaten
   under. Headeren og nedtrekkspanelene setter --focus-ring selv. */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Sideramme: alle sider står på samme 1000px-kolonne og starter like langt
   under headeren
   --------------------------------------------------------------------------- */

/* screen_new.css gjør .main 1010px bred, så filtersøk, sammenligning og Mine
   kjøretøy lå 5px utenfor logoen og menyen. */
.main {
  width: 1000px;
}

/* Kjøretøyvisningen startet 20px lenger ned enn de andre sidene i appen. */
#vehicle {
  margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   Overskrifter: Arial Bold, Asfaltsort, setningsform. Aldri versaler.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  font-family: var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
}

h1, h1 a, h1 a:hover,
h1 span, h1 a span, h1 a:hover span {
  font-size: 36px;
  line-height: 1.1;
  font-weight: bold;
  color: var(--asfaltsort);
  border-bottom: none;
  text-decoration: none;
}

h2, h2 a, h2 a:hover {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  color: var(--asfaltsort);
}

h3, h3 a, h3 a:hover {
  font-size: 18px;
  line-height: 1.25;
  font-weight: bold;
  color: var(--asfaltsort);
}

h4, h4 a, h4 a:hover {
  font-weight: bold;
  color: var(--asfaltsort);
}

/* Sidetittelen er en brødsmulesti: «Søk / Resultat / Kjøretøy». Steget du står
   på er Asfaltsort, de andre /65 (gulvet på Hvit). Ingen strek under. */
.info-box h1 {
  border-bottom: none;
  padding: 0;
  margin: 0 0 4px 0;
}

.info-box h1 span.pale,
.info-box h1 span.pale.no-border,
h1 a span.pale,
h1 a:hover span.pale {
  color: var(--asfaltsort-65);
  border: none;
  text-transform: none;
}

h1 a:hover span.pale {
  text-decoration: underline;
}

/* Brødsmulestegene kommer i ulike former fra malene («FILTERSØK», «resultat»).
   Senk alt og løft første bokstav, så de leses i setningsform. Gjelder bare
   de bleke stegene: aktive titler kan inneholde «OFV». */
.info-box h1 span.pale:not(.no-border),
h1 a span.pale {
  display: inline-block;
  text-transform: lowercase;
}

.info-box h1 span.pale:not(.no-border)::first-letter,
h1 a span.pale::first-letter {
  text-transform: uppercase;
}

/* Resten av den gamle streken under tittelen, som sto på ingressen. */
#searchResult .content .info-box .info,
#filterSearchResult .content .info-box .info {
  border-top: none;
}

/* Ingressen under sidetittelen. */
.info-box > .info p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--asfaltsort-80);
}

/* ---------------------------------------------------------------------------
   Header: logo-rad og meny, begge Skogsgrønn, leses som én header
   --------------------------------------------------------------------------- */

.wrapper > .logo {
  background: var(--skogsgronn);
  --focus-ring: var(--hvit);
}

.wrapper > .logo .inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1000px;
  height: 64px;
  margin: 0 auto;
  /* 16px gutter på smal skjerm; på desktop ligger innholdet fortsatt på
     1000px, siden padding kommer i tillegg til max-width. Bootstrap på
     dashboardet setter border-box på alt, derfor content-box eksplisitt. */
  padding: 0 16px;
  box-sizing: content-box;
}

.wrapper > .logo .inner a {
  display: flex;
}

.wrapper > .logo .inner img {
  display: block;
  height: 36px;
  width: auto;
}

.wrapper > .logo .tagline {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

/* «Logg inn»/«Logg ut» står ytterst til høyre i logoraden, som
   sekundærknappen på mørk flate. */
.wrapper > .logo .account {
  margin-left: auto;
}

.wrapper > .logo .account a {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--hvit);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: var(--hvit);
  text-decoration: none;
  white-space: nowrap;
}

.wrapper > .logo .account a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Under 400px brytes taglinen i tre linjer ved siden av knappen. */
@media screen and (max-width: 399px) {
  .wrapper > .logo .tagline {
    display: none;
  }
}

.nav,
#nav.nav {
  --focus-ring: var(--hvit);
  background: var(--skogsgronn);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  height: 48px;
}

.nav .content {
  max-width: 1000px;
}

.nav a, .nav p, .nav li,
.nav a.selected, .nav p.selected, .nav li.selected {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hvit);
}

.nav .menu ul li {
  border-left: none;
  box-shadow: none;
  padding: 14px 12px;
}

/* Første menyvalg står på samme venstrekant som logoen. */
.nav .content > .menu:first-child ul li:first-child {
  padding-left: 0;
}

.nav .menu ul li > a {
  position: relative;
}

/* Hover: etiketten går til Varm gul og en 2px gul strek vokser fram under
   (Inline Horizontal Nav i DESIGN.md). */
.nav .menu ul li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--varm-gul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-premium);
}

.nav a:hover,
.nav a:hover p {
  color: var(--varm-gul);
  text-decoration: none;
}

.nav .menu ul li > a:hover::after,
.nav .menu ul li > a:focus-visible::after {
  transform: scaleX(1);
}

.nav a.comparison-count span,
.nav a.comparison-count p {
  font-size: 15px;
  color: var(--hvit);
}

/* «Sammenligning (3)»: parentesene var egne blokker rundt et 12px bredt
   tall, så det sto «( 3 )». */
.nav a.comparison-count {
  margin-left: 4px;
}

.nav a.comparison-count p,
.nav a.comparison-count span {
  float: none;
  display: inline;
  width: auto;
}

/* ---------------------------------------------------------------------------
   Kjøretøygruppe og år: datautvalget, ikke navigasjon

   Står til høyre i menylinja; «Logg ut» er flyttet opp i logoraden for å gi
   plass til fire segmenter ved siden av menyen.
   --------------------------------------------------------------------------- */

/* z-index: over innholdet, så årspanelet ikke havner bak det. */
.context-switch {
  position: relative;
  z-index: 110;
  float: right;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
}

/* Alle gruppene synlige, ett klikk. Sporet er Hvit/10 på Skogsgrønn, valgt
   segment Hvitt med Skogsgrønn Bold. */
.vehicle-groups {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.vehicle-groups button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--hvit);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--ease-premium);
}

/* Holder av plass til fet tekst på alle segmentene, så raden ikke hopper når
   valget flytter seg. */
.vehicle-groups button::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: bold;
}

.vehicle-groups button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.vehicle-groups button.selected {
  background: var(--hvit);
  color: var(--skogsgronn);
  font-weight: bold;
  cursor: default;
}

/* Abonnement med bare én gruppe: ingen kontroll, bare tekst. */
.vehicle-group-single {
  margin: 0;
  color: var(--hvit);
  font-size: 14px;
  font-weight: bold;
}

.vehicle-group-single span {
  margin-right: 6px;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.85);
  font-weight: normal;
}

.year-picker {
  position: relative;
}

.year-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--hvit);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 200ms var(--ease-premium);
}

.year-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Den globale span-regelen setter 13px og Asfaltsort/80. */
.year-toggle span {
  font-size: inherit;
  color: inherit;
}

.year-toggle .year-label {
  color: rgba(255, 255, 255, 0.85);
}

.year-toggle .year-value {
  font-weight: bold;
}

.year-toggle .caret {
  transition: transform 200ms var(--ease-premium);
}

.year-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* Et annet år enn inneværende er Varm gul med Asfaltsort tekst (10,2:1) på
   alle sider, så gamle priser ikke leses som gjeldende. */
.year-toggle.not-current {
  background: var(--varm-gul);
  color: var(--asfaltsort);
}

.year-toggle.not-current:hover {
  background: #fdcf56;
}

.year-toggle.not-current .year-label {
  color: var(--asfaltsort-80);
}

/* Filtersøk bruker alltid inneværende år, så knappen står som ren tekst med
   en hengelås i stedet for pila. */
.year-toggle[aria-disabled="true"],
.year-toggle[aria-disabled="true"]:hover {
  background: transparent;
  cursor: default;
}

.year-toggle[aria-disabled="true"] .caret {
  display: none;
}

.year-toggle .lock {
  color: rgba(255, 255, 255, 0.85);
}

/* Én rad per tiår med nyeste øverst, og kolonnen er siste siffer, så alle
   årene ses uten rulling. Panelet er nav-dropdownen fra nettsiden. */
.year-panel {
  --focus-ring: var(--skogsgronn);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 12px;
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
  animation: year-panel-in 180ms var(--ease-premium);
}

@keyframes year-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.year-panel .year-loading {
  margin: 0;
  color: var(--asfaltsort-80);
  font-size: 14px;
  white-space: nowrap;
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(10, 44px);
  gap: 4px 2px;
}

.year-grid button {
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--asfaltsort);
  font-family: var(--font-sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.year-grid button:hover {
  background: var(--skogsgronn-lys);
  color: var(--skogsgronn);
}

.year-grid button.selected {
  background: var(--skogsgronn);
  color: var(--hvit);
  font-weight: bold;
}

.year-reset {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--skogsgronn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.year-reset:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .year-panel {
    animation: none;
  }

  .vehicle-groups button,
  .year-toggle,
  .year-toggle .caret {
    transition: none;
  }
}

/* Mobil: utvalget fyller hele menylinja. Etiketten «År» er skjult visuelt,
   men er fortsatt knappens navn. Panelet får fem kolonner (to rader per
   tiår) så det holder seg innenfor skjermen. */
@media screen and (max-width: 767px) {
  .context-switch {
    float: none;
    width: 100%;
    gap: 8px;
  }

  .vehicle-groups {
    flex: 1;
  }

  .vehicle-groups button {
    flex: 1;
    padding: 0 6px;
    font-size: 13px;
  }

  .year-toggle .year-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .year-grid {
    grid-template-columns: repeat(5, 52px);
  }
}

/* ---------------------------------------------------------------------------
   Footer: Himmelgrå flate, logo til venstre og kontaktlinjene til høyre
   --------------------------------------------------------------------------- */

/* Sticky footer: .wrapper har negativ bunnmarg lik footerhøyden, og .push
   holder plass til den. Alle tre må endres sammen. */
.wrapper {
  margin-bottom: -112px;
}

.push {
  height: 112px;
}

.footer,
#footer.footer {
  height: 112px;
  background: var(--himmelgra);
}

.footer .content {
  border-top: none;
  max-width: 1000px;
  width: auto;
  padding: 32px 16px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  /* Kjøretøygruppe og år sto helt ute i skjermkanten, og overflow: hidden
     fra screen.css klippet årspanelet. */
  .nav .content {
    box-sizing: border-box;
    width: auto;
    padding: 0 16px;
    overflow: visible;
  }

  /* Dashboardet har ikke portable.css og var låst til 1000px. */
  .front-page:has(#tablePrint) {
    width: auto;
    margin: 32px 16px;
  }

  .footer,
  #footer.footer {
    height: auto;
  }

  .footer .content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer .content .details p {
    text-align: left;
  }
}

.footer .content .logo {
  width: 98px;
  height: 40px;
  background: url("/media/images/ofv-logo.svg") no-repeat left center / contain;
}

.footer .content .details p,
.footer .content .details a {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(33, 33, 33, 0.75);
}

.footer .content .details a {
  color: var(--asfaltsort);
}

/* ---------------------------------------------------------------------------
   Kort og bokser: Hvit, 1px hårstrek, 12px hjørner. Ingen grå tittelbånd.
   --------------------------------------------------------------------------- */

/* Ingen overflow: hidden her. Nedtrekkslistene for lagrede søk og
   sammenligninger ligger absolutt posisjonert inne i boksene og må kunne
   henge ut under dem. */
.standard-box,
.selection-list-pane,
.legend-box,
.front-page .top .right .legend-box {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: none;
}

.standard-box h3,
.selection-list-pane h3 {
  background: transparent;
  padding: 16px 16px 0 16px;
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--asfaltsort);
}

.standard-box .field {
  padding: 0 16px 16px 16px;
}

/* Bokser med egen innvendig padding (velkomst- og «Om»-teksten) og bokser
   som ikke er kort (tomtilstanden på sammenligning): overskriften står på
   samme venstrekant som teksten. */
.intro-text .standard-box h3,
.news-text .standard-box h3,
.standard-box.info-box h3,
.standard-box.saved-comparisons h3 {
  padding: 0 0 8px 0;
}

.mypage-right-pane {
  padding: 0 16px 16px 16px;
}

.mypage-right-pane p,
.mypage-right-pane li {
  line-height: 1.5;
}

.standard-box .info-text,
.standard-box .info-text p,
.standard-box .info-text span {
  font-size: 15px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Skjemafelt: følger inputClasses på nettsiden
   --------------------------------------------------------------------------- */

form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='search'],
form textarea {
  border: 1px solid var(--asfaltsort-15);
  border-radius: 8px;
  box-shadow: none;
  background-color: var(--hvit);
  font-size: 16px;
  color: var(--asfaltsort);
  transition: border-color 200ms var(--ease-premium);
}

form input[type='text']:focus,
form input[type='email']:focus,
form input[type='password']:focus,
form input[type='search']:focus,
form textarea:focus {
  border-color: var(--skogsgronn);
  outline: 2px solid var(--skogsgronn);
  outline-offset: 0;
}

form input[type='checkbox'],
form input[type='radio'] {
  accent-color: var(--skogsgronn);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Knapper: tre handlingsnivåer (primær, sekundær, tekstlenke)

   Primær på Hvit: Skogsgrønn fyll, Hvit Bold etikett, 4px hjørner.
   Sekundær (.dimmed i de gamle malene): 1px Asfaltsort kant, gjennomsiktig.
   --------------------------------------------------------------------------- */

form input[type='button'],
form input[type='submit'],
input[type='button'],
input[type='submit'] {
  background: var(--skogsgronn);
  background-image: none;
  border: 1px solid var(--skogsgronn);
  border-radius: 4px;
  box-shadow: none;
  color: var(--hvit);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: bold;
  text-shadow: none;
  text-transform: none;
  transition: background-color 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

form input[type='button']:hover,
form input[type='submit']:hover,
input[type='button']:hover,
input[type='submit']:hover {
  background: var(--skogsgronn-hover);
  border-color: var(--skogsgronn-hover);
  color: var(--hvit);
}

form input[type='button'].dimmed,
form input[type='submit'].dimmed,
input[type='button'].dimmed {
  background: transparent;
  border: 1px solid var(--asfaltsort);
  color: var(--asfaltsort);
}

form input[type='button'].dimmed:hover,
form input[type='submit'].dimmed:hover,
input[type='button'].dimmed:hover {
  background: var(--skogsgronn-lys);
  border-color: var(--asfaltsort);
  color: var(--asfaltsort);
}

form input[type='button'].inactive,
form input[type='submit'].inactive {
  background: transparent;
  border: 1px solid var(--asfaltsort-15);
  color: var(--asfaltsort-65);
  cursor: default;
}

/* Valgknapper («Siste 30 dager», «Velg alle»): inaktive filter-pills er Lys
   skogsgrønn, valgt er Skogsgrønn med Hvit tekst. */
.selection-label,
a.selection-label,
a#selectAll.selection-label,
a#selectNone.selection-label,
.selection-label-hybrid,
.selection-label-large,
.search-curtain .folder.selection-container .selection-set .selection-label,
.selection-list-pane .selection-set .selection a,
#search .main .content .list-box #new-changed-vehicles .selection a {
  display: inline-block;
  background: var(--skogsgronn-lys);
  border: 1px solid transparent;
  border-radius: 9999px;
  box-shadow: none;
  color: var(--asfaltsort);
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  padding: 5px 12px;
  text-shadow: none;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.selection-label:hover,
.selection-label-hybrid:hover,
.selection-label-large:hover,
.selection-label-arrow:hover,
.selection-list-pane .selection-set .selection a:hover {
  background: var(--skogsgronn-lys);
  border: 1px solid var(--skogsgronn);
  color: var(--asfaltsort);
  padding: 5px 12px;
  font-size: 13px;
  text-decoration: none;
}

.selection-label.selected,
.selection-label-large.selected,
.selection-label-hybrid.selected,
.selection-list-pane .selection-set .selection a.selected {
  background: var(--skogsgronn);
  border: 1px solid var(--skogsgronn);
  color: var(--hvit);
  padding: 5px 12px;
  font-size: 13px;
}

.selection-list-pane .selection-set {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px 16px;
  margin-bottom: 0;
}

/* Tomtilstanden («Du har ingen lagrede søk»). Den gamle negative margen
   veide opp for en marg på .selection som ikke finnes lenger, og dro
   teksten ned i kanten av kortet. */
.selection-list-pane .selection-set .selection p {
  margin: 0;
  line-height: 20px;
  color: var(--asfaltsort-65);
}

.selection-list-pane .selection-set .selection,
#search .main .content .list-box #new-changed-vehicles .selection {
  float: none;
  margin: 0;
}

.selection-label-hybrid:after {
  border-color: var(--skogsgronn) transparent;
}

/* Avkrysningsknappene med ikon-sprite: Hvit med hårstrek, valgt er Lys
   skogsgrønn med Skogsgrønn kant. */
/* Spriten er 17px høy med andre tilstand 30px lenger ned. Knappen er 30px
   innvendig, så 7px fra toppen sentrerer haken på teksten. */
a.selection-label.check-button,
.filter-box .content .selection-set a.selection-label.check-button {
  background-color: var(--hvit);
  background-position: 8px 7px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--asfaltsort);
  font-size: 13px;
  padding: 5px 12px 5px 32px;
  text-indent: 0;
  text-shadow: none;
}

a.selection-label.check-button:hover,
a.selection-label.check-button.selected,
.filter-box .content .selection-set a.selection-label.check-button:hover,
.filter-box .content .selection-set a.selection-label.check-button.selected {
  background-color: var(--skogsgronn-lys);
  background-position: 8px -23px;
  border: 1px solid var(--skogsgronn);
  color: var(--asfaltsort);
  padding: 5px 12px 5px 32px;
}

/* ---------------------------------------------------------------------------
   Faner (Generelle data / Tekniske data …) og verktøylinjer
   --------------------------------------------------------------------------- */

/* Teksturbakgrunnen (bg.jpg) ligger på flere flater med høy spesifisitet;
   !important her er enklere enn å speile hver av dem. */
.sticky-box,
#vehicle .sticky-box,
#vehicle form .sticky-box,
#filterSearch .sticky-box,
.comparison .sticky-box,
.comparison .label-column .caption .header,
.tools.sticky,
#searchResult .content .result-container .search-legend .legend,
#filterSearchResult .content .result-container .search-legend .legend {
  background: var(--hvit) !important;
  border-color: var(--hairline);
  box-shadow: none;
}

#searchResult .content .result-container .search-legend,
#filterSearchResult .content .result-container .search-legend {
  box-shadow: none;
}

#searchResult .content .result-container .search-legend .legend,
#filterSearchResult .content .result-container .search-legend .legend {
  border-bottom: 1px solid var(--hairline);
}

.sticky-box .collection-links li a,
#vehicle .sticky-box .collection-links li a,
#filterSearch .sticky-box .content .filter-header span {
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
  color: var(--asfaltsort-70);
}

.sticky-box .collection-links li a:hover,
#vehicle .sticky-box .collection-links li a:hover {
  color: var(--asfaltsort);
  text-decoration: none;
}

.sticky-box .collection-links li a.selected,
#vehicle .sticky-box .collection-links li a.selected {
  color: var(--asfaltsort);
  font-weight: bold;
}

/* Valgt fane: 2px Skogsgrønn strek i stedet for den gule pilen. */
.sticky-box .collection-links li a.selected:after,
#vehicle .sticky-box .collection-links li a.selected:after {
  background: var(--skogsgronn);
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
  margin: 0;
}

/* Verktøylinja nederst (filtersøk og sammenligning). */
.tools.sticky {
  border-top: 1px solid var(--hairline);
}

.tools.sticky .info p span,
.tools.sticky .info p span.huge {
  color: var(--asfaltsort);
}

.tools.sticky .info p span.huge {
  font-weight: bold;
}

.tools.sticky input[type=button],
.tools.sticky input[type=submit] {
  height: 40px;
  padding: 0 20px;
  font-size: 15px;
  color: var(--hvit);
}

.tools.sticky input[type=button].dimmed,
.tools.sticky input[type=button].inactive {
  color: var(--asfaltsort);
}

.tools.sticky input[type=button].inactive {
  color: var(--asfaltsort-65);
}

.tools.sticky .label.inprint p {
  text-transform: none;
  font-size: 13px;
  color: var(--asfaltsort-70);
}

/* ---------------------------------------------------------------------------
   Lagrede filtersøk og sammenligninger (nedtrekksknapp «Mine filtersøk»):
   sekundærknapp med caret, og nav-dropdownens panel
   --------------------------------------------------------------------------- */

.module-listing#comparisons-list,
.module-listing#filtersearch-list {
  background: transparent;
}

.module-listing#comparisons-list h4,
.module-listing#filtersearch-list h4,
.module-listing#comparisons-list.dimmed h4,
.module-listing#filtersearch-list.dimmed h4 {
  background: var(--hvit);
  background-image: none;
  border: 1px solid var(--asfaltsort);
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
}

.module-listing#comparisons-list h4 a,
.module-listing#filtersearch-list h4 a,
.module-listing#comparisons-list.dimmed h4 a,
.module-listing#filtersearch-list.dimmed h4 a,
.module-listing#comparisons-list h4 a:hover,
.module-listing#filtersearch-list h4 a:hover {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: bold;
  color: var(--asfaltsort);
  box-shadow: none;
  padding: 9px 44px 9px 14px;
}

.module-listing#comparisons-list h4 a:after,
.module-listing#filtersearch-list h4 a:after {
  background-image: url("/media/images/ofv/list-arrow-down2.png");
  border-left: 1px solid var(--hairline);
  box-shadow: none;
}

.module-listing#comparisons-list ul,
.module-listing#filtersearch-list ul {
  --focus-ring: var(--skogsgronn);
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
  overflow: hidden;
}

.module-listing#comparisons-list ul li a:hover,
.module-listing#filtersearch-list ul li a:hover,
.module-listing#comparisons-list ul li a.selected,
.module-listing#filtersearch-list ul li a.selected,
.module-listing#comparisons-list ul li.selected,
.module-listing#filtersearch-list ul li.selected {
  background-color: var(--skogsgronn-lys);
  color: var(--asfaltsort);
  text-decoration: none;
}

.module-listing#comparisons-list ul li.selected a:after,
.module-listing#filtersearch-list ul li.selected a:after {
  background-image: url("/media/images/ofv/list-check.png");
}

.module-listing#comparisons-list ul li.add-edit-listing,
.module-listing#filtersearch-list ul li.add-edit-listing {
  border-top: 1px solid var(--hairline);
}

.module-listing#comparisons-list ul li.add-edit-listing a,
.module-listing#filtersearch-list ul li.add-edit-listing a {
  background-image: none;
  text-indent: 0;
  font-weight: bold;
  color: var(--skogsgronn);
}

/* ---------------------------------------------------------------------------
   Søk
   --------------------------------------------------------------------------- */

/* Søkefeltet fyller raden fram til knappen, så feltet, knappen og
   forslagslista under ender i samme kant. */
#search .main .content .content-box .fieldset {
  display: flex;
  gap: 8px;
  width: 100%;
}

#search .main .content .content-box .fieldset .field {
  display: block;
  padding: 0;
}

#search .main .content .content-box .fieldset .field:first-child {
  flex: 1;
}

#search .main .content .content-box .fieldset .field input#searchfield {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Resultatlister
   --------------------------------------------------------------------------- */

.listings tr td,
.listings .listing,
.listings .sub-listing {
  border-color: var(--hairline);
}

.listings .listing h3 a,
.listings .listing h3 a:hover {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: bold;
  color: var(--asfaltsort);
}

.listings .sub-listing h5 a,
.listings .sub-listing h5 a:hover {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: bold;
  color: var(--skogsgronn);
}

.listings tr td,
.listings tr td .list-selection-label,
.listings .variant-listing .listing-name a {
  color: var(--asfaltsort);
}

.listings tr.alternate {
  background-color: var(--skogsgronn-lys-50);
}

/* Nye og endrede kjøretøy markeres med en svak Varm gul-tone — samme
   betydning som den gamle beige raden, innenfor paletten. */
.listings .variant-listing.new-changed-listing {
  background: var(--varm-gul-tint);
}

.no-touch .listings tr:hover {
  background-color: var(--skogsgronn-lys);
}

.listings .variant-listing .listing-name a:hover,
.listings .variant-listing .custom2 a:hover {
  background-color: var(--skogsgronn-lys);
  color: var(--asfaltsort);
}

/* Unntak fra 13px-gulvet: kolonnebreddene i resultattabellen er faste, og
   JavaScript forkorter tekst etter antall tegn («Kompaktk..»). I 13px klippes
   cellene, så de beholder 12px Arial som før. */
.listings .variant-listing td .cell-content p,
.listings .variant-listing td .cell-content a,
.listings .variant-listing td .cell-content span {
  font-family: var(--font-sans);
  font-size: 12px;
}

table.listing-table {
  border-color: var(--hairline);
}

/* Kolonneetikettene som står på skrå over tabellen. */
#searchResult .content .result-container .search-legend .legend .placeholder .skew p,
#searchResult .content .result-container .search-legend .legend .placeholder .skew a,
#filterSearchResult .content .result-container .search-legend .legend .placeholder .skew p,
#filterSearchResult .content .result-container .search-legend .legend .placeholder .skew a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: normal;
  color: var(--asfaltsort-70);
}

#searchResult .content .result-container .search-legend .legend .placeholder#scrollInfo h5,
#filterSearchResult .content .result-container .search-legend .legend .placeholder#scrollInfo h5 {
  color: var(--asfaltsort-70);
}

/* Ikonforklaringen øverst til høyre på resultat- og kjøretøysiden. */
.legend-box ul li p,
.legend-box ul li.enviro-info p {
  font-size: 13px;
  color: var(--asfaltsort-80);
}

/* Handlingsikonene i radene (fjern, varsle, sammenlign): omfarget kopi der
   hover er Skogsgrønn. */
.listings tr td .close.remove,
.listings tr td .alert,
.listings tr td .add-to-compare,
.listings tr td .add-to-compare:hover,
.listings tr td .add-to-compare.selected,
.search-curtain .folder ul.link-list li a.add-to-compare,
.search-curtain .folder ul.link-list li a.add-to-compare:hover,
.search-curtain .folder ul.link-list li a.add-to-compare.selected {
  background-image: url("/media/images/ofv/search_result_action_icons.png");
}

/* Søkeforslagene under søkefeltet. */
.search-curtain .folder .label p {
  font-size: 13px;
  text-transform: none;
  color: var(--asfaltsort-70);
}

/* ---------------------------------------------------------------------------
   Kjøretøyvisning
   --------------------------------------------------------------------------- */

#vehicle .vehicle-info {
  background: none;
}

#vehicle .vehicle-info h2,
#vehicle .vehicle-info h2 input {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: bold;
  color: var(--asfaltsort);
}

#vehicle .vehicle-info h3,
#vehicle .vehicle-info h3 span input {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: normal;
  color: var(--asfaltsort-70);
}

/* Kjøretøynavnet står på samme venstrekant som sidetittelen. Boksen og
   overskriftene hadde 10px padding hver, så navnet lå 20px inn. */
#vehicle .vehicle-info {
  padding: 8px 0 24px 0;
}

#vehicle .vehicle-info h2,
#vehicle .vehicle-info h3 {
  padding-left: 0;
  padding-right: 0;
}

#vehicle .vehicle-info h3 {
  margin-top: 0;
}

/* Fanelinja ligger på 1000px-kolonnen som resten av siden. Den tomme
   plassen til venstre (li.variant-name) fylles aldri av JS. */
#vehicle .sticky-box .content {
  width: 1000px;
}

#vehicle .sticky-box .vehicle-utilities li.variant-name {
  display: none;
}

/* Bildene til venstre og datatabellen til høyre fyller kolonnen sammen, så
   tabellen ender i samme kant som fanelinja og ikonforklaringen. */
#vehicle .content-box {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

#vehicle .content-box .images {
  flex: none;
}

#vehicle .content-box .collection-container {
  flex: 1;
  min-width: 0;
  margin-left: 0;
}

#vehicle .content-box .collection table {
  width: 100%;
}

/* Miniatyrene: rutenett med fast mellomrom. Med float ble det et hull når
   et bilde manglet (JS skjuler bilder som ikke lastes). */
#vehicle .content-box .images .thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#vehicle .content-box .images .thumbnails .image-container {
  float: none;
  margin: 0;
}

.sticky-box .vehicle-utilities li a,
#vehicle .sticky-box .vehicle-utilities li .button {
  background-image: url("/media/images/ofv/vehicle_sticky_icons.png");
}

.sticky-box .vehicle-utilities,
.sticky-box .vehicle-utilities li,
#vehicle .sticky-box .vehicle-utilities,
#vehicle .sticky-box .vehicle-utilities li {
  border-color: var(--hairline);
}

/* Hårstreken tegnes som skygge, ikke kant: bildefeltene har faste bredder,
   og 1px ekstra bryter rutenettet med miniatyrer. */
#vehicle .content-box .images .image-container,
#vehicle .content-box .images .thumbnails .image-container {
  background: var(--hvit);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--hairline);
  overflow: hidden;
}

/* Datatabellene (Generelle data, Motordata …). */
.collection table,
.collection table tr.data-set,
.collection table tr.data-subset td.label,
.collection table tr.data-subset td.divider,
.collection ul {
  border-color: var(--hairline);
}

.collection table tr.data-set td h3,
.collection table tr.data-subset td.divider {
  background: var(--hvit);
}

.collection table tr.data-set td h3 {
  font-size: 15px;
}

.collection .data-subset p,
.collection .data-subset input,
.collection table tr.data-subset td.label p {
  font-family: var(--font-sans);
  font-size: 13px;
}

.collection table tr.data-subset td.label p {
  color: var(--asfaltsort-70);
}

.collection table tr.data-subset td.value p {
  color: var(--asfaltsort);
}

/* Verdiene i kjøretøyvisningen er skrivebeskyttede felt (samme skjema
   brukes til å redigere dummyer). De skal leses som tekst: uten feltets
   hvite flate og hjørner, som ellers ble en hvit pille på raden ved hover. */
#vehicle .collection input[readonly],
#vehicle .vehicle-info input[readonly] {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

/* Fotnoter i datatabellene («For kjøretøy med flere motorer …») er
   avsnitt: venstrestilt og dempet, ikke midtstilt over begge kolonnene. */
.collection table td[colspan="2"][align="center"] {
  text-align: left;
}

.collection table td[colspan="2"][align="center"] p {
  padding: 8px 12px;
  line-height: 1.5;
  color: var(--asfaltsort-70);
}

.collection li:hover .label,
.collection li:hover .value,
.collection tr:hover .label,
.collection tr:hover .value,
.collection tr:hover .devTaxNew,
.collection tr:hover .devTaxPositive,
.collection tr:hover .devTaxNegative {
  background-color: var(--skogsgronn-lys);
}

.collection li:hover .label p,
.collection li:hover .value p,
.collection tr:hover .label p,
.collection tr:hover .value p {
  color: var(--asfaltsort);
}

/* Avgiftsendringer: økning i Nedgangsrød, reduksjon i Skogsgrønn, ny i
   Asfaltsort. Erstatter Red/Green/Blue, som er utenfor paletten. */
.collection table tr.data-subset td.devTaxNew p {
  color: var(--asfaltsort);
  font-weight: bold;
}

.collection table tr.data-subset td.devTaxPositive p {
  color: var(--nedgang-rod);
}

.collection table tr.data-subset td.devTaxNegative p {
  color: var(--skogsgronn);
}

/* ---------------------------------------------------------------------------
   Filtersøk
   --------------------------------------------------------------------------- */

.category .label,
.category .data,
.category .label li,
.category .data li {
  border-color: var(--hairline);
}

.category .label li a,
.category .data li a,
#filterSearch .content-box .collection-container .collection .category .label li a,
#filterSearch .content-box .collection-container .collection .category .data li a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--asfaltsort);
}

/* Sebrastripene er gjennomsiktige som før, så de også synes oppå den valgte
   kolonnen i sammenligningen. */
.category .label li.alternative,
.category .label li:nth-child(2n-1),
.category .data li.alternative,
.category .data li:nth-child(2n-1) {
  background-color: rgba(78, 100, 75, 0.05);
}

.category .label li a:hover,
.category .data li a:hover {
  background-color: var(--skogsgronn-lys);
  background-image: url("/media/images/ofv/checkbutton_icons.png");
  text-decoration: none;
}

.category .label li.selected,
.category .data li.selected {
  background-color: var(--skogsgronn-lys);
  color: var(--skogsgronn);
}

.category .label li.selected a,
.category .data li.selected a {
  background-image: url("/media/images/ofv/checkbutton_icons.png");
  font-weight: bold;
  color: var(--skogsgronn);
}

a.selection-label.check-button {
  background-image: url("/media/images/ofv/checkbutton_icons.png");
}

#filterSearch .content-box .collection-container .collection .category .label li a .filter-mode,
#filterSearch .content-box .collection-container .collection .category .data li a .filter-mode {
  background-image: url("/media/images/ofv/checkbutton_filter_icons.png");
}

.category h4,
#filterSearch .content-box .collection-container .collection .category h4 {
  background: var(--hvit);
  text-transform: none;
}

.category h4 a,
.comparison .comparison-column .content .category h4 a,
.comparison .comparison-column .content-box .category h4 a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: bold;
  color: var(--asfaltsort);
}

/* Slippsona for valgte filtre er en innfelt flate: Lys skogsgrønn. */
#filterSearch .content-box .chosen-filters {
  background: var(--skogsgronn-lys) !important;
  border-color: var(--hairline);
}

#filterSearch .content-box .chosen-filters .no-filters-info p {
  color: var(--asfaltsort-65);
}

.filter-box .header .label p {
  font-family: var(--font-sans);
  font-weight: bold;
  color: var(--asfaltsort);
}

.slider-box .layout-slider .jslider-bg .v,
.slider-box.filtration .jslider-bg .v {
  background-color: var(--skogsgronn);
  background-image: none;
  box-shadow: none;
}

#filterSearch .standard-box#chosen-vehicles .info p span,
#filterSearch .standard-box#chosen-vehicles .info p a {
  font-size: 13px;
  font-style: normal;
  color: var(--asfaltsort-80);
}

/* Pila ved kategorititlene sto 8px over teksten. */
#filterSearch .content-box .collection-container .collection .category h4:before {
  top: 14px;
}

/* Slippsona fyller resten av kolonnen ved siden av den 480px brede lista. */
#filterSearch .content-box .chosen-filters {
  width: calc(100% - 480px);
}

/* Antall treff i verktøylinja: tydelig, men en del av setningen. */
.tools.sticky .info p span.huge {
  font-size: 20px;
}

/* Valgt filter i lista til venstre: turkis -> Lys skogsgrønn. */
#filterSearch .content-box .collection-container .collection .category .label li.selected,
#filterSearch .content-box .collection-container .collection .category .data li.selected {
  background-color: var(--skogsgronn-lys);
}

/* Filter med verdi satt (tidligere beige): et hakk mørkere grønntone. */
#filterSearch .content-box .collection-container .collection .category .label li.selected.filtration,
#filterSearch .content-box .collection-container .collection .category .data li.selected.filtration {
  background-color: rgba(78, 100, 75, 0.15);
}

/* Filterboksene til høyre. */
.filter-box {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.filter-box .header {
  border-bottom-color: var(--hairline);
}

/* screen_new.css gir filter med verdi en grå underkant (#a0a3aa). */
.filter-box.filtration {
  border-color: var(--hairline);
}

/* Glidebryteren (jslider): sporet er Skogsgrønn/30, utvalget Skogsgrønn, og
   håndtakene er runde i stedet for de blågrå skjoldene i jslider.png. */
.jslider .jslider-bg .l,
.jslider .jslider-bg .r {
  background: rgba(78, 100, 75, 0.3);
  border-radius: 9999px;
}

.jslider .jslider-pointer,
.jslider .jslider-pointer-hover {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  top: -6px;
  margin-left: -8px;
  border: 2px solid var(--hvit);
  border-radius: 50%;
  background: var(--skogsgronn);
  box-shadow: 0 0 0 1px var(--skogsgronn);
}

.jslider .jslider-pointer-hover {
  background: var(--skogsgronn-hover);
}

.slider-box .layout-slider .jslider-label,
.slider-box .layout-slider .jslider-label span,
.slider-box .layout-slider .jslider-value,
.slider-box .layout-slider .jslider-value span {
  font-size: 13px;
  color: var(--asfaltsort-70);
  opacity: 1;
}

.slider-box .layout-slider .jslider-value {
  background-color: var(--hvit);
}

/* ---------------------------------------------------------------------------
   Mine kjøretøy og data
   --------------------------------------------------------------------------- */

#mypage .module-listing ul li {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

#mypage .module-listing ul li p,
#mypage .module-listing ul li a,
#mypage .module-listing ul li .label a,
#mypage .module-listing ul li .label p {
  font-size: 14px;
  color: var(--asfaltsort);
}

/* Overskriften står på samme kant som lista og knappen under (h3 hadde 10px
   innrykk). */
#mypage .module-listing h3 {
  padding: 4px 0 0 0;
}

#mypage .module-listing {
  margin-bottom: 40px;
}

/* Tomtilstanden («Du har ingen lagrede …») er en setning, ikke en rad i
   lista: ingen ramme, dempet tekst. Lagrede elementer har id. */
#mypage .module-listing ul li:not([id]):not(.add-edit-listing) {
  background: transparent;
  border: none;
}

#mypage .module-listing ul li:not([id]):not(.add-edit-listing) .label {
  padding: 0;
}

#mypage .module-listing ul li:not([id]):not(.add-edit-listing) .label p {
  color: var(--asfaltsort-65);
}

/* «Om OFV Kjøretøydata» starter med et linjeskift foran den skjulte
   undertittelen, som ga en tom linje under overskriften. */
#mypage .intro-text .standard-box .info-text p > br:first-child {
  display: none;
}

/* «Opprett …» er en sekundærknapp: tekst uten pluss-ikon. */
#mypage .module-listing div.add-edit-listing,
#mypage .module-listing li.add-edit-listing {
  background: transparent;
  background-image: none;
  border: 1px solid var(--asfaltsort);
  border-radius: 4px;
  text-indent: 0;
}

#mypage .module-listing li.add-edit-listing a,
#mypage .module-listing div.add-edit-listing a {
  display: block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: bold;
  color: var(--asfaltsort);
}

#mypage .module-listing li.add-edit-listing:hover {
  background: var(--skogsgronn-lys);
}

/* Halo-medaljong: Lys skogsgrønn innside, sage-ring, Skogsgrønn glyf. */
.front-page .content-box ul li .icon,
#mypage .module-listing .icon {
  background-image: url("/media/images/ofv/medallion_icons.png");
  background-color: var(--skogsgronn-lys);
  border-radius: 50%;
  /* Ringen ligger innenfor sirkelen: på Min side står ikonet helt i
     venstrekanten av en beholder som klipper. */
  box-shadow: inset 0 0 0 6px var(--sage-halo);
}

/* ---------------------------------------------------------------------------
   Avkrysningsboksene «Nye» / «Endrede»
   --------------------------------------------------------------------------- */

.selection-box {
  background-color: var(--hvit);
  border: 1px solid var(--asfaltsort-65);
  border-radius: 4px;
}

.selection-box a {
  background-image: url("/media/images/ofv/checkboxicon.png");
}

#search .main .content .list-box #new-changed-vehicles .new-changed {
  width: auto;
  margin: 16px;
}

#search .main .content .list-box #new-changed-vehicles .new-changed .checkbox-set {
  margin-right: 16px;
}

#search .main .content .list-box #new-changed-vehicles .new-changed .checkbox-set a {
  font-size: 13px;
  color: var(--asfaltsort);
}

/* ---------------------------------------------------------------------------
   Dialoger og «Et øyeblikk»-lasteren
   --------------------------------------------------------------------------- */

.loader .content-box,
.dialog.error-dialog .content-box,
.dialog.save-dialog .content-box {
  background: var(--hvit) !important;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
  overflow: hidden;
}

.loader .content-box header,
.dialog.error-dialog .content-box header,
.dialog.save-dialog .content-box header {
  background: var(--hvit) !important;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
}

.loader .content-box header h2,
.dialog.error-dialog .content-box header h2,
.dialog.save-dialog .content-box header h2 {
  font-size: 28px;
  font-weight: bold;
  color: var(--asfaltsort);
  margin: 24px 0 16px 0;
}

/* Lasteren: scrim i Asfaltsort 30 % som mobilskuffen på nettsiden. */
.loader {
  background: rgba(33, 33, 33, 0.3);
}

.loader .content-box header {
  margin-bottom: 24px;
}

/* Lukkekrysset: tegnet kryss i Asfaltsort i stedet for den grå spriten. */
.loader .content-box header .right {
  right: 12px;
  top: 12px;
}

.loader .content-box header .right .close {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--asfaltsort-70);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 11l10 10M21 11L11 21' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 11l10 10M21 11L11 21' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
  transition: background-color 0.2s var(--ease-premium);
}

.loader .content-box header .right .close:hover {
  background: var(--asfaltsort);
}

.loader .content-box .label p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--asfaltsort-70);
  margin: 0;
}

/* Spinner i Skogsgrønn over et spor i Lys skogsgrønn erstatter GIF-en. */
.loader .content-box .symbol {
  width: 32px;
  height: 32px;
  margin: 16px auto 32px auto;
  border: 3px solid var(--skogsgronn-lys);
  border-top-color: var(--skogsgronn);
  border-radius: 50%;
  box-sizing: border-box;
  animation: loader-spin 0.9s linear infinite;
}

.loader .content-box .symbol img {
  display: none;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader .content-box .symbol {
    animation-duration: 2.4s;
  }
}

/* ---------------------------------------------------------------------------
   Dialoger i appen (merke- og modellvelger m.fl.)
   --------------------------------------------------------------------------- */

.dialog .content-box {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
}

.dialog .content-box .dialog-section {
  border-top-color: var(--hairline);
}

.dialog .content-box > h1 {
  font-size: 28px;
  padding: 0 0 16px 0;
}

/* Knapperaden nederst i merke- og modellvelgeren: høyrestilt med 8px
   mellom knappene. Som tabellceller sto de 4px fra hverandre og stakk ut
   over dialogens høyrekant. */
.dialog.makemodel-dialog .content-box form .fieldset {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 0 auto;
}

.dialog.makemodel-dialog .content-box form .fieldset .field {
  display: block;
  padding: 0;
}

.dialog.makemodel-dialog .content-box form .fieldset .field input {
  margin: 0;
}

/* «Velg modeller» er et mellomsteg; «Søk» er dialogens ene primærhandling. */
.dialog.makemodel-dialog input#modelsbutton {
  background: transparent;
  border: 1px solid var(--asfaltsort);
  color: var(--asfaltsort);
}

.dialog.makemodel-dialog input#modelsbutton:hover {
  background: var(--skogsgronn-lys);
}

.dialog.makemodel-dialog .content-box #models ul li h3 {
  font-family: var(--font-sans);
  color: var(--asfaltsort);
  border-bottom-color: var(--hairline);
}

/* ---------------------------------------------------------------------------
   Forsiden (index.html)
   --------------------------------------------------------------------------- */

.legend-box h3 {
  font-weight: bold;
}

/* Funksjonslista med skjermbilde: Hvit kolonne for teksten, Lys skogsgrønn
   innfelt flate bak skjermbildet. */
.front-page .content-box {
  background: var(--skogsgronn-lys);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}

.front-page .content-box ul {
  background: var(--hvit);
}

.front-page .content-box .display {
  background: transparent;
  box-sizing: border-box;
  max-width: 100%;
}

.front-page .content-box p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--asfaltsort-80);
}

/* Funksjonene: medaljongen øverst til venstre, overskrift og tekst i én
   kolonne ved siden av. Ikonet var midtstilt mot hele avsnittet og
   overskriften hadde 10px eget innrykk. */
.front-page .content-box ul li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
  padding: 24px;
}

.front-page .content-box ul li .icon {
  flex: none;
}

.front-page .content-box ul li .info {
  flex: 1;
  width: auto;
  margin: 0;
}

.front-page .content-box ul li .info h2 {
  margin: 0;
  padding: 4px 0 8px 0;
  font-size: 20px;
}

/* Kontaktavsnittet står på sidens venstrekant som resten av innholdet. */
.front-page .payoff .content {
  width: auto;
  margin: 0;
}

.front-page .payoff .content .train-set {
  display: block;
  margin-right: 0;
  text-align: left;
}

/* Avsnittet om OFV gikk over hele 1000px-bredden (rundt 150 tegn per
   linje). */
.front-page .container.info p {
  max-width: 75ch;
}

.front-page .payoff p,
.front-page .container.info p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--asfaltsort-80);
}

/* Lenker i løpende tekst er alltid understreket. */
.front-page .payoff a,
.front-page .container.info a,
.standard-box .info-text a {
  color: var(--skogsgronn);
  font-weight: bold;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Innloggingsdialogen og de andre boksene på forsiden
   --------------------------------------------------------------------------- */

#dialogs #login,
#dialogs .video,
#dialogs .video1,
#dialogs .video2 {
  background: rgba(33, 33, 33, 0.5);
}

#login-box,
#getpassword-box,
#resetpassword-box,
#register-box,
#terms-box {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
}

#login-box .pane,
#getpassword-box .pane,
#resetpassword-box .pane,
#register-box .pane,
#terms-box .pane {
  border-color: var(--hairline);
}

#login .content-box h1 {
  font-size: 28px;
  padding: 0 0 8px 0;
}

/* Innlogging og passordskjemaene: etiketten over feltet, felt i full
   bredde, knappene høyrestilt nederst. De gamle reglene plasserte
   etikett, felt, avkrysning og knapper med hver sin faste venstremarg
   (25, 135 og 50px), så ingenting sto på linje. Bestilling og vilkår har
   annen oppbygning og beholder det gamle oppsettet. */
#login-box,
#getpassword-box,
#forgotpassword-box,
#resetpassword-box {
  width: 400px;
  max-width: calc(100% - 32px);
  margin-top: 12vh;
}

#login-box .top,
#getpassword-box .top,
#forgotpassword-box .top,
#resetpassword-box .top {
  padding: 24px 24px 20px 24px;
}

#login-box .top h1,
#getpassword-box .top h1,
#forgotpassword-box .top h1,
#resetpassword-box .top h1 {
  margin: 0;
}

#login-box .top .info,
#login-box .top .info span,
#login-box .top .info a,
#getpassword-box .top .info span,
#forgotpassword-box .top .info span,
#resetpassword-box .top .info span {
  font-size: 14px;
  line-height: 1.5;
}

#login-box .top .info a {
  color: var(--skogsgronn);
  font-weight: bold;
  text-decoration: underline;
}

#login-box .pane,
#getpassword-box .pane,
#forgotpassword-box .pane,
#resetpassword-box .pane {
  box-sizing: border-box;
  padding: 20px 24px 4px 24px;
}

#login-box .pane .fieldset,
#getpassword-box .pane .fieldset,
#forgotpassword-box .pane .fieldset,
#resetpassword-box .pane .fieldset {
  width: auto;
  margin: 0 0 16px 0;
}

#login-box .pane .fieldset .label,
#getpassword-box .pane .fieldset .label,
#forgotpassword-box .pane .fieldset .label,
#resetpassword-box .pane .fieldset .label {
  display: block;
  width: auto;
  margin-bottom: 6px;
}

#login-box .pane .fieldset .label p,
#getpassword-box .pane .fieldset .label p,
#forgotpassword-box .pane .fieldset .label p,
#resetpassword-box .pane .fieldset .label p {
  font-size: 14px;
  font-weight: bold;
  color: var(--asfaltsort);
}

#login-box .pane .fieldset .field,
#getpassword-box .pane .fieldset .field,
#forgotpassword-box .pane .fieldset .field,
#resetpassword-box .pane .fieldset .field {
  display: block;
  padding: 0;
}

#login-box .fieldset .field input[type=text],
#login-box .fieldset .field input[type=password],
#getpassword-box .fieldset .field input[type=email],
#forgotpassword-box .fieldset .field input[type=email],
#resetpassword-box .fieldset .field input[type=password] {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
}

/* Tilbakemeldingen under ingressen. Nøytral melding (f.eks. «e-post er
   sendt») står på Lys skogsgrønn. Feil er Nedgangsrød tekst og kant; det
   røde glødeskjæret rundt hele boksen og den beige flaten er utenfor
   paletten. Boksen rister fortsatt ved feil (login.js). */
#login-box .feedback,
#getpassword-box .feedback,
#forgotpassword-box .feedback,
#resetpassword-box .feedback {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--skogsgronn-lys);
  border: 1px solid transparent;
  border-radius: 8px;
}

#login-box .feedback p,
#login-box .feedback a,
#getpassword-box .feedback p,
#forgotpassword-box .feedback p,
#resetpassword-box .feedback p {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--asfaltsort);
}

#login-box.error,
#getpassword-box.error,
#forgotpassword-box.error,
#resetpassword-box.error {
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
}

#login-box.error .feedback,
#getpassword-box.error .feedback,
#forgotpassword-box.error .feedback,
#resetpassword-box.error .feedback {
  background: var(--hvit);
  border-color: var(--nedgang-rod);
}

#login-box.error .feedback p,
#login-box.error .feedback a,
#getpassword-box.error .feedback p,
#forgotpassword-box.error .feedback p,
#resetpassword-box.error .feedback p {
  color: var(--nedgang-rod);
}

/* «Husk meg»: avkrysningen og etiketten på én linje. */
#login-box .pane .fieldset.floater {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
}

#login-box .pane .fieldset.floater .label {
  margin: 0;
}

#login-box .pane .fieldset.floater .label p {
  font-weight: normal;
  color: var(--asfaltsort-80);
}

#login-box .fieldset .field input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

#login-box .fieldset.buttons,
#getpassword-box .fieldset.buttons,
#forgotpassword-box .fieldset.buttons,
#resetpassword-box .fieldset.buttons {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 16px 24px 24px 24px;
}

#login-box .fieldset.buttons .field,
#getpassword-box .fieldset.buttons .field,
#forgotpassword-box .fieldset.buttons .field,
#resetpassword-box .fieldset.buttons .field {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
}

#login-box .fieldset.buttons .field input,
#getpassword-box .fieldset.buttons .field input,
#forgotpassword-box .fieldset.buttons .field input,
#resetpassword-box .fieldset.buttons .field input,
#login-box .fieldset .field input#cancel,
#getpassword-box .fieldset .field input#cancel,
#forgotpassword-box .fieldset .field input#cancel,
#resetpassword-box .fieldset .field input#cancel {
  height: 44px;
  margin: 0;
  padding: 0 20px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Produktvelgeren (dashboard.htm, Bootstrap 3)
   --------------------------------------------------------------------------- */

.well {
  background: var(--hvit);
  background-image: none;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: none;
}

.btn-OFV,
.btn-OFV:focus,
.btn-OFV:active,
.btn-OFV.active {
  background: var(--skogsgronn);
  border: 1px solid var(--skogsgronn);
  border-radius: 4px;
  box-shadow: none;
  color: var(--hvit);
  font-size: 16px;
  font-weight: bold;
  text-shadow: none;
  transition: background-color 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

/* font-size gjentas fordi den generelle a:hover-regelen (0,1,1) ellers
   krymper etiketten ved hover. */
.btn-OFV:hover {
  background: var(--skogsgronn-hover);
  border-color: var(--skogsgronn-hover);
  color: var(--hvit);
  font-size: 16px;
  text-decoration: none;
}

/* Den genererte HTML-en lukker aldri .col-md-12 rundt første produktkort,
   så alle kortene fikk 15px ekstra innrykk i forhold til tittelen. */
#tablePrint > .col-md-12 {
  padding: 0;
}

/* Produktnavn og knapp på samme midtlinje. */
.well .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
}

.well h2 {
  margin: 0;
  padding: 0;
}

.well .row > [class*="col-md-"] {
  padding-top: 0;
  padding-bottom: 0;
}

.well .col-md-5 {
  text-align: right;
}

.well .btn-OFV.margintop20 {
  margin-top: 0;
}

#kundeInfo,
#AboInfo {
  padding: 16px;
}

.h3header {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: bold;
  text-transform: none;
  color: var(--asfaltsort);
}

.nameBold {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: bold;
  color: var(--asfaltsort);
}

.contentAbb {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--asfaltsort-80);
}

/* ---------------------------------------------------------------------------
   Varslingen øverst til høyre («… lagt til i sammenligningen»)

   Plasseringen regnes ut i NotificationView fra Configuration.navHeight, som
   er satt til headerens høyde (64 + 1 + 48 px).
   --------------------------------------------------------------------------- */

/* Høyrekanten følger innholdskolonnen (1000px sentrert), ikke vinduet. */
.notification {
  right: max(16px, calc(50% - 500px));
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
  margin-top: 8px;
  padding: 12px 16px;
}

.notification p.description,
.notification p.description a {
  font-size: 14px;
  color: var(--asfaltsort);
}

/* Hele meldingen er en lenke til sammenligningen; understreken alene sier
   det, fet vekt gjorde den til et rop. */
.notification p.description a {
  text-decoration: underline;
}

.alert-view {
  background: var(--hvit);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.08);
}

/* ---------------------------------------------------------------------------
   Sammenligning
   --------------------------------------------------------------------------- */

.comparison .vehicle-column,
.comparison .label-column,
.comparison ul#comparisonChart li.comparison-column {
  background: var(--hvit);
}

/* Referansekolonnen som de andre måles mot: Lys skogsgrønn i stedet for gul. */
.comparison .vehicle-column.selected,
.comparison ul#comparisonChart li.comparison-column.vehicle-column.selected {
  background: var(--skogsgronn-lys);
}

.comparison .sticky-box .right,
.comparison .label-column .caption .header .left,
.comparison .label-column .caption .header .right {
  background: none;
}

.comparison .sticky-hor-bar,
.comparison .label-column .caption .column-top,
.comparison .vehicle-column .caption .column-top,
.comparison .label-column .content,
.comparison .vehicle-column .content-box {
  border-color: var(--hairline);
  box-shadow: none;
}

.comparison .sticky-box .left h4 a,
.comparison .sticky-box .left h4 input[type=text] {
  font-size: 16px;
  font-weight: bold;
  color: var(--asfaltsort);
}

.comparison .sticky-box .left h5 a,
.comparison .sticky-box .left h5 input[type=text],
.comparison .sticky-box .left p a {
  font-size: 13px;
  font-weight: normal;
  color: var(--asfaltsort-70);
}

/* «Aktiv sammenligning» var et bilde med versaler i League Gothic. Erstattet
   av samme merke som «Nyeste sak» på nettsiden. */
.comparison .label-column .caption .column-top .active-comparison-label {
  background: none;
  width: auto;
  height: auto;
  left: 0;
  bottom: 8px;
}

.comparison .label-column .caption .column-top .active-comparison-label::before {
  content: "Aktiv sammenligning";
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--skogsgronn);
  color: var(--hvit);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Kategoritittelen i etikettkolonnen. 13px holder «Sikkerhets-/
   Assistentsystemer» innenfor kolonnen. Selektoren må slå
   «.comparison .comparison-column .content .category h4 a» i filtersøk-delen. */
.comparison .comparison-column.label-column .content .category h4 a {
  font-size: 13px;
}

/* Kategoritittelen står venstrestilt rett etter pila, slik som i filtersøk
   og kjøretøyvisningen. Høyrestilt sto den langt fra pila den hører til. */
.comparison .comparison-column.label-column .content .category h4 {
  text-align: left;
  padding-left: 32px;
}

.comparison .comparison-column .content .category ul.label li p,
.comparison .comparison-column .content-box .category ul.data li p,
.comparison .vehicle-column .content-box .category ul.data li p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--asfaltsort);
}

.comparison .comparison-column .content .category ul.label li p {
  color: var(--asfaltsort-70);
}

.comparison .comparison-column .content .category ul.label,
.comparison .comparison-column .content .category ul.data,
.comparison .comparison-column .content-box .category ul.label,
.comparison .comparison-column .content-box .category ul.data,
.comparison .comparison-column .content .category ul.label li,
.comparison .comparison-column .content .category ul.data li,
.comparison .comparison-column .content-box .category ul.label li,
.comparison .comparison-column .content-box .category ul.data li {
  border-color: var(--hairline);
}

/* Skyggebildene i hver ende av den klebrige kolonnetoppen. */
ul#comparisonChart:before,
ul#comparisonChart:after {
  background: none;
}