.sprak {
  --bredd: 44px; --hojd: 64px; --skala: 10px;
  position: fixed; right: 0; top: 136px; z-index: 5;
  color: var(--is); direction: ltr; text-align: left;
  font: 420 .9375rem/1.2 "Geologica", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
  letter-spacing: 0;
}

.sprak-knapp {
  appearance: none; display: block; width: var(--bredd); height: var(--hojd); margin: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sprak-knapp:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.sprak-plat {
  position: relative; display: grid; grid-template-columns: var(--skala) minmax(0, 1fr); width: 100%; height: 100%;
  background: var(--natt-1);
  box-shadow: inset 1px 0 0 rgba(238, 243, 245, .2), inset 0 1px 0 rgba(238, 243, 245, .2), inset 0 -1px 0 rgba(238, 243, 245, .2);
  transform-origin: 100% 50%;
  transition: transform 340ms var(--ut);
}
.sprak-skala { position: relative; display: block; }
.sprak-skala::before {
  content: ""; position: absolute; left: 1px; top: 8px; bottom: 8px; width: 7px;
  background:
    repeating-linear-gradient(180deg, var(--is) 0 1.25px, transparent 1.25px 24px) 0 0 / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--is) 0 1.25px, transparent 1.25px 6px) 0 0 / 4px 100% no-repeat;
  opacity: .72;
}
.sprak-skala::after {
  content: ""; position: absolute; left: 2px; top: calc(50% - 5px);
  border: 5px solid transparent; border-right: 0; border-left: 7px solid var(--kurs);
}
.sprak-instrument { display: grid; align-content: center; justify-items: center; gap: 3px; padding-right: 3px; }
.sprak-ros { display: block; width: 26px; height: 26px; overflow: visible; }
.sprak-ring { fill: none; stroke: var(--is); stroke-opacity: .55; stroke-width: 1.25; }
.sprak-grad { fill: none; stroke: var(--is); stroke-width: 1.25; }
.sprak-nal { transition: transform 620ms cubic-bezier(.3, 1.5, .45, 1); transform-box: view-box; transform-origin: 0 0; }
.sprak-nal-n { fill: var(--kurs); }
.sprak-nal-s { fill: var(--is); }
.sprak-kod { font-size: .8125rem; line-height: 1; font-weight: 520; font-variant-numeric: tabular-nums; }

.sprak-plat::after { content: ""; position: absolute; inset: 0; background: rgba(238, 243, 245, .08); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sprak-knapp:hover .sprak-plat::after { opacity: 1; }
  .sprak-knapp:hover .sprak-nal { transform: rotate(-16deg); }
}
.sprak-knapp:active .sprak-plat { transform: scale(.97); }

.sprak-lista {
  position: absolute; right: var(--bredd); top: 0; display: flex; height: var(--hojd);
  margin: 0; padding: 0 4px; list-style: none;
  background: var(--natt-1);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 245, .2), 0 14px 44px rgba(2, 8, 12, .5);
  opacity: 0; visibility: hidden; transform: translate3d(14px, 0, 0);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}
.sprak.oppen .sprak-lista { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 300ms var(--ut); }
.sprak-lista li { position: relative; margin: 0; padding: 0; }
.sprak-lista li:not(:last-child)::after {
  content: ""; position: absolute; left: 34px; right: -6px; top: 18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--kurs) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.sprak-lista a {
  display: grid; align-content: center; justify-items: start; row-gap: 5px;
  height: 100%; min-width: 88px; padding: 0 14px;
  color: var(--is); text-decoration: none; font-size: .9375rem; line-height: 1.2;
}
.sprak-lista a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.sprak-lista a::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #071018; border: 2.25px solid var(--kurs); }
.sprak-lista a[aria-current]::before { background: var(--kurs); }
.sprak-lista a[aria-current] { font-weight: 560; }
.sprak-lista a[lang="ar"] { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .sprak-lista a:hover { background: var(--natt-2); }
}

.sprak:has(li:nth-child(1) a:is(:hover, :focus-visible)) .sprak-nal { transform: rotate(-106deg); }
.sprak:has(li:nth-child(2) a:is(:hover, :focus-visible)) .sprak-nal { transform: rotate(-90deg); }
.sprak:has(li:nth-child(3) a:is(:hover, :focus-visible)) .sprak-nal { transform: rotate(-74deg); }
.sprak.oppen .sprak-knapp .sprak-plat { box-shadow: inset 0 1px 0 rgba(238, 243, 245, .2), inset 0 -1px 0 rgba(238, 243, 245, .2); }

.sprak.kant:not(.oppen) { pointer-events: none; }
.sprak.kant:not(.oppen) .sprak-plat { pointer-events: auto; transform: translate3d(calc(var(--bredd) - var(--skala)), 0, 0); }
.sprak.kant:not(.oppen) .sprak-plat::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; }
.sprak.kant:has(:focus-visible) .sprak-plat { transform: none; }
.sprak.genom:not(.oppen) { pointer-events: none; }
.sprak.genom:not(.oppen) .sprak-plat { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .sprak.kant:not(.oppen):hover .sprak-plat { transform: none; }
}
.js .undersida .sprak.uppe:not(.oppen) { pointer-events: none; }
.undersida .sprak.uppe:not(.oppen) .sprak-plat { pointer-events: auto; transform: translate3d(calc(var(--bredd) - var(--skala)), 0, 0); }
.undersida .sprak.uppe:not(.oppen) .sprak-plat::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; }
.undersida .sprak.uppe:has(:focus-visible) .sprak-plat { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .undersida .sprak.uppe:not(.oppen):hover .sprak-plat { transform: none; }
}

@media (max-width: 960px) {
  .sprak { --hamn: calc(max(24vh, 158px) + 12px); --vila: 76vh; top: var(--vila); transition: transform 460ms var(--ut); }
  .sprak.uppe { transform: translate3d(0, calc(var(--hamn) - var(--vila)), 0); }
  @supports (height: 1svh) {
    .sprak { --hamn: calc(max(24lvh, 158px) + 12px); --vila: 76svh; }
  }
}
@media (min-width: 700px) and (max-width: 960px) {
  .sprak { --vila: min(84vh, calc(100vh - 72px)); }
  @supports (height: 1svh) {
    .sprak { --vila: min(84svh, calc(100svh - 72px)); }
  }
}

html:not(.js) .sprak { position: relative; top: auto; right: auto; z-index: 3; display: flex; justify-content: flex-end; padding: 0 var(--marg); background: var(--natt-1); transform: none; }
html:not(.js) .sprak-knapp { display: none; }
html:not(.js) .sprak-lista { position: static; height: auto; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .sprak-lista li::after { content: none; }
html:not(.js) .sprak-lista a { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 10px; }
html:not(.js) .sprak-lista a::before { flex: none; width: 12px; height: 12px; }

.sidkarta a { text-wrap: balance; }

@media print {
  .sprak { display: none !important; }
}
@media (forced-colors: active) {
  .sprak-plat, .sprak-lista { border: 1px solid CanvasText; }
  .sprak-lista a[aria-current]::before { background: Highlight; }
}

html[dir="rtl"] body { direction: ltr; }
html[dir="rtl"] :is(.sidhuvud, .sidfot-rader, main > section) { direction: rtl; }
html[dir="rtl"] .logga { direction: ltr; }
html[dir="rtl"] :is(.forsta, .varfor, .valjare) { direction: ltr; }
html[dir="rtl"] :is(.forsta-text, .ruta, .panel, .skylt, .varfor-text, .fard-rad, .priser-topp, .val-knapp-text, .val-marke, .val-kolumn, .val-yta, .val-lagg) { direction: rtl; }

html[dir="rtl"] :is(.k-text, .mal-text) { direction: rtl; text-anchor: end; }
html[dir="rtl"] .k-text[text-anchor="end"] { text-anchor: start; }
html[dir="rtl"] .k-text[text-anchor="middle"] { text-anchor: middle; }

html[lang="ar"] {
  --typ: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", "Geologica", system-ui, sans-serif;
  --s-liten: 1rem; --s-text: 1.125rem;
  --s-lead: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
}
html[lang="ar"] body *, html[lang="ar"] body *::before, html[lang="ar"] body *::after { letter-spacing: 0 !important; }
html[lang="ar"] body { font-weight: 400; line-height: 1.75; }
html[lang="ar"] :is(.logga span, .sidfot-namn, .mejl) { font-family: "Geologica", "Segoe UI", system-ui, sans-serif; direction: ltr; }
html[lang="ar"] .logga span { letter-spacing: -.034em !important; }
html[lang="ar"] .sidfot-namn { letter-spacing: -.05em !important; }
html[lang="ar"] .mejl { letter-spacing: -.048em !important; }
html[lang="ar"] :is(h1, h2, h3, h4) { font-weight: 600; line-height: 1.3; font-variation-settings: normal; }
html[lang="ar"] :is(.lead, .forsta-text .lead, .punkter li, .etapp .slag, .om-text p:first-child) { font-weight: 400; line-height: 1.7; }
html[lang="ar"] :is(.ruta .stark, .avslut .stark, .vinst-topp h2, .vinst-del h3, .vinst-del:last-of-type h3, .vinst-topp .lead, .vinst-del p, .val-text .val-tjanar h4, .val-tjanar strong, .val-knapp-namn, .val-vinst, .tj-stark, .senare-stark) { line-height: 1.35; }
html[lang="ar"] .forsta-rad { line-height: 1.6; }
html[lang="ar"] :is(.forsta-rad, .smatt strong, .tj-bevis, .senare-stark, .tj-mer summary) { font-weight: 600; }
html[lang="ar"] :is(.tj-marke, .val-senare, .exempel figcaption) { font-size: .9375rem; }
html[lang="ar"] .val-marke { line-height: 1.3; }
html[lang="ar"] .val-marke span { padding-block: 7px 8px; }

@media (min-width: 961px) {
  html[lang="en"] { --s-h1: clamp(2.5rem, 3.65vw, 4.75rem); }
}

html[dir="rtl"] .forsta-text h1 { margin-right: 0; }
html[dir="rtl"] .tangent { text-align: right; }
@media (min-width: 961px) {
  html[lang="ar"] { --s-h1: clamp(2.5rem, 3.9vw, 4.8rem); }
  html[lang="ar"] .forsta-text .lead { line-height: 1.6; }
  html[dir="rtl"] .forsta-text { padding-right: clamp(32px, 3.4vw, 56px); }
  html[dir="rtl"] .problem > div { padding-right: 44px; }
  html[dir="rtl"] :is(.pilot-vanster, .kontakt-delar > div:first-child) { padding-left: 24px; padding-right: 0; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  html[dir="rtl"] .forsta-text { padding-right: calc(clamp(32px, 3.4vw, 56px) + 34px); }
  html[dir="rtl"] .forsta-text .lead { max-width: 37em; }
}
@media (max-width: 380px) {
  html[lang="ar"] .forsta-text .forsta-rad { font-size: 1rem; }
}
@media (max-width: 960px) {
  html:not([lang="sv"]) .mobil-band { height: min(calc(var(--hy) + 42vh - 96px), calc(100vh - 374px)); height: min(calc(var(--hy) + 42svh - 96px), calc(100svh - 374px)); }
  @media (max-height: 700px) { html:not([lang="sv"]) .mobil-band .kompass { display: none; } }
}

@media (max-width: 960px) {
  html[dir="rtl"] :is(.problem h2, .priser-topp h2), html:not([lang="sv"]) .vinst-topp h2 { padding-right: 12px; }
  html[dir="rtl"] .problem h2 { padding-right: 42px; }
}

html[dir="rtl"] .punkter li { padding-left: 0; padding-right: 42px; }
html[dir="rtl"] .punkter li::before { left: auto; right: 0; }
html[dir="rtl"] .lista li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .lista li::before { left: auto; right: 2px; }
html[dir="rtl"] .val-text .lista li { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .val-text .val-ingar li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .val-text .val-ingar li::before { left: auto; right: 3px; }
html[dir="rtl"] .val-knapp-rad { padding-left: 0; padding-right: 23px; }
html[dir="rtl"] .val-knapp-rad::before { left: auto; right: 3px; }
html[dir="rtl"] .lofte > div { padding-left: 0; padding-right: 34px; }
html[dir="rtl"] .lofte > div::before { left: auto; right: 3px; }
html[dir="rtl"] .lofte > div:not(:last-child)::after { left: auto; right: 8.5px; }

html[dir="rtl"] .tavla-rad span:last-child { text-align: left; }
html[dir="rtl"] .redo .tavla[data-in] .tom { transform-origin: 100% 50%; }
@media (min-width: 961px) {
  html[dir="rtl"] .tjanst { direction: ltr; grid-template-columns: minmax(0, 47fr) minmax(0, 27fr) minmax(0, 26fr); }
  html[dir="rtl"] .tjanst > * { direction: rtl; }
  html[dir="rtl"] .tjanst h3 { grid-column: 2; padding-left: 16px; padding-right: clamp(20px, 3vw, 44px); }
  html[dir="rtl"] .tj-text { grid-column: 1; padding-left: clamp(20px, 3vw, 44px); padding-right: 0; }
  html[dir="rtl"] .rutt > li { padding-left: clamp(20px, 2.6vw, 40px); padding-right: 34px; }
  html[dir="rtl"] .rutt > li::after { background: var(--kurs); }
}

html[dir="rtl"] .vinst-lank .lank::after { margin-left: 0; margin-right: .6em; }

html:not([lang="sv"]) .priser-topp h2 span { white-space: normal; }
@media (min-width: 721px) {
  html[lang="ar"] .priser-topp h2 { font-size: clamp(2.25rem, 1rem + 4.1vw, 5rem); }
}
html[lang="ar"] .val-knapp-pris { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
html[lang="ar"] .val-knapp-namn { min-height: calc(var(--namn) * 2.7); }
html[lang="ar"] .val-vinst { min-height: calc(2 * 1.35em); }
html[lang="ar"] .val-pris:last-child { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
html[dir="rtl"] .val-marke { left: auto; right: var(--inne); }
html[dir="rtl"] .val-eget-falt input { direction: ltr; text-align: right; padding: 8px 14px 8px 6px; }
html[dir="rtl"] .val-eget-falt span { padding-left: 14px; padding-right: 0; }
html[dir="rtl"] .val-steg { direction: ltr; }
html[dir="rtl"] :is(.jamfor th, .jamfor td) { text-align: right; padding-left: 16px; padding-right: 0; }
html[dir="rtl"] :is(.jamfor td:last-child, .jamfor th:last-child) { padding-left: 0; }
@media screen and (max-width: 720px) {
  html[dir="rtl"] .val-pris:first-child b { text-align: left; }
  html[dir="rtl"] .val-kolumn { text-align: left; padding-left: 40px; }
  html[dir="rtl"] .val-marke { left: auto; right: var(--marg); }
  html[dir="rtl"] .val-knapp-rad { padding-left: 0; padding-right: 21px; }
  html[dir="rtl"] .val-knapp-rad::before { left: auto; right: 2px; }
  html[dir="rtl"] .jamfor tbody th { padding: 0 0 6px; }
  html[dir="rtl"] .jamfor tbody td { padding: 4px 0; }
}
@media screen and (max-width: 359px) {
  html[lang="ar"] .val-pris:last-child { grid-template-columns: minmax(0, 1fr); }
}