@charset "UTF-8";
:root {
  --awslajder_ram: rgb(0, 0, 0);
  --awslajder_bakgrund: rgb(50, 50, 50);
  --awslajder_text: rgb(200, 200, 200);
}

.aw-slajder {
  max-width: 500px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
}
.aw-slajder > div {
  transform: scale(1.4) translateY(3px);
  text-align: center;
}
.aw-slajder > div:nth-child(1)::before {
  content: "ᐊ";
}
.aw-slajder > div:nth-child(3)::after {
  content: "ᐅ";
}
.aw-slajder input {
  -webkit-appearance: none;
  position: relative;
  border: solid 3px var(--awslajder_ram);
}
.aw-slajder input:focus {
  outline-color: var(--awslajder_ram);
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
}
.aw-slajder input::-webkit-slider-runnable-track {
  background-color: var(--awslajder_bakgrund);
}
.aw-slajder input::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.1em;
  width: 1.1em;
  background-color: var(--awslajder_text);
  opacity: 0.6;
}
.aw-slajder input:before {
  position: absolute;
  left: 0;
  content: attr(titel-awslajder);
  color: var(--awslajder_text);
}
.aw-slajder input:after {
  position: absolute;
  right: 0;
  content: attr(värde);
  color: var(--awslajder_text);
}

:root {
  --ruta1: 100%;
  --ruta1-höjd: 100vh;
  --ruta2: 50%;
  --marginal-ruta2: calc(50% - var(--ruta2) / 2);
  --maxRGB255: 255;
  --maxP3: 1;
}

fargrutor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

ruta1 {
  position: relative;
  display: flex;
  margin: auto;
  width: var(--ruta1);
  padding-bottom: var(--ruta1);
}
ruta1:nth-child(1) {
  background-color: rgb(var(--maxRGB255), 0, 0);
}
ruta1:nth-child(1) > ruta2 {
  background-color: color(display-p3 var(--maxP3) 0 0);
}
ruta1:nth-child(2) {
  background-color: rgb(0, var(--maxRGB255), 0);
}
ruta1:nth-child(2) > ruta2 {
  background-color: color(display-p3 0 var(--maxP3) 0);
}
ruta1:nth-child(3) {
  background-color: rgb(0, 0, var(--maxRGB255));
}
ruta1:nth-child(3) > ruta2 {
  background-color: color(display-p3 0 0 var(--maxP3));
}

ruta2 {
  position: absolute;
  top: var(--marginal-ruta2);
  left: var(--marginal-ruta2);
  width: var(--ruta2);
  padding-bottom: var(--ruta2);
}

.filval .titel {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  font-family: WorkSans, sans-serif;
  margin-top: 1rem;
}
.filval input {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.filval input::file-selector-button {
  font-size: 1rem;
}
.filval .släppzon {
  border: solid 1px black;
  padding: 20px;
}
.filval .släppzon.över {
  background-color: lightgray;
}

form.radio label:after {
  content: "";
  display: block;
}

form.radio.kompakt {
  display: flex;
  gap: 1rem;
}

.input-ram > input, .input-ram span {
  position: absolute;
  line-height: 1.2em;
  top: 0.35em;
  left: 0.5em;
}

.input-ram {
  margin-top: 1.15em;
  background-color: var(--farg-bakgrund);
  font-size: inherit;
  font-family: WorkSans, sans-serif;
  border: 1px solid var(--farg-gra1);
  position: relative;
  height: 1.8em;
}
.input-ram span {
  z-index: 0;
  color: var(--farg-gra2);
  transition: 300ms all;
}
.input-ram > input {
  padding: 0;
  z-index: 1;
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  border: none;
  width: calc(100% - 1em);
}
.input-ram > input:focus {
  outline: 0;
}
.input-ram > input:valid + span, .input-ram > input:focus + span {
  font-size: 0.65em;
  top: -1.3em;
  line-height: 1.3em;
  padding: 0.1em 0.5em 1em 0.5em;
  left: 0;
  background-color: var(--farg-bakgrund);
  border-radius: 5px 5px 0 0;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--farg-bakgrund) inset !important;
  /* Om jag vill fylla ut hela min ruta nu med annan bakgrundsfärg så passade detta plusbygget.
  border-radius: 5px;
  border: solid 5px lightgray;
  top: 0px;
  left: 0px;
  border-right-width: 9px;
  border-top-left-radius: 0;
  */
}

div.lösenord label {
  position: absolute;
  cursor: pointer;
  z-index: 1;
  width: 1.2em;
  right: 0.2em;
  top: 0.3em;
}
div.lösenord label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
div.lösenord label input:checked ~ span {
  background-image: url(/img/losen-visas);
}
div.lösenord label span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.2em;
  width: 1.2em;
  background-repeat: no-repeat;
  background-image: url(/img/losen-dols);
}

/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: var(--pswp-icon-color);
}

/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/
.pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  display: none;
  touch-action: none;
  outline: 0;
  opacity: 0.003;
  contain: layout style size;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
  display: block;
}

.pswp,
.pswp__bg {
  transform: translateZ(0);
  will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
  background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
  overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
  width: auto;
  height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__item {
  /* z-index for fade transition */
  z-index: 1;
  overflow: hidden;
}

.pswp__hidden {
  display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}

.pswp__content > * {
  pointer-events: auto;
}

/*

  PhotoSwipe UI

*/
/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}

.pswp__error-msg {
  margin: auto;
  font-size: 1em;
  line-height: 1;
  color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
  opacity: 0.005;
  will-change: opacity;
  transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
  z-index: 10; /* always overlap slide content */
  pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
  position: relative;
  display: block;
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 0.85;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
  outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
  background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: 10;
  /* allow events to pass through top bar itself */
  pointer-events: none !important;
}

.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}

/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}

/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}

.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}

/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin: 15px 0 0 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}

div.snurrgrej {
  margin-top: 0.5em;
}
div.snurrgrej div {
  border: 0.2em solid lightgray;
  border-top: 0.2em solid black;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: snurr 1.8s linear infinite;
  margin: auto;
}

@keyframes snurr {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
svg {
  display: block;
  transform: scaleY(-1);
}

.pswp__button svg {
  transform: none;
}

line,
polyline {
  stroke: black;
  fill: none;
}

text {
  transform: scaleY(-1);
}

.tabell {
  display: table;
}
.tabell .rad {
  display: table-row;
}
.tabell .rad.rubrik {
  font-weight: bold;
}
.tabell .rad .cell {
  display: table-cell;
  padding: 3px 5px;
}
.tabell .grupp-huvud {
  display: table-header-group;
}
.tabell .grupp-huvud .cell {
  top: 0;
  position: sticky;
  background-color: white;
}
.tabell .grupp-innehåll {
  display: table-row-group;
}
.tabell .grupp-fot {
  display: table-footer-group;
}

label.knappval {
  font-family: var(--typsnitt-sans);
  position: relative;
  margin-right: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label.knappval input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
label.knappval input:checked ~ .bocken {
  opacity: 1;
  /* &:after {
    display: block;
  } */
}
label.knappval input:focus ~ .bocken {
  border: solid black 1px;
}
label.knappval:hover input ~ .bocken {
  border: solid black 1px;
}
label.knappval .bocken {
  background-color: var(--farg-gra3);
  border: solid var(--farg-gra1) 1px;
  opacity: 0.5;
  border-radius: 0.4rem;
  padding: 0.3rem 0.5rem;
  /*
  position: absolute;
  top: 0.15 * $kryssruta-storlek;
  left: 0;
  height: $kryssruta-storlek;
  width: $kryssruta-storlek;
  border-radius: 5px;
  background-color: dum.$blå2;

  // Detta är själva bocken = skulle väl lika gärna bara kunna ha allt ovan där jag visar den
  &:after {
    display: none;
    content: "";
    position: absolute;
    left: math.div($kryssruta-storlek, 3);
    top: math.div($kryssruta-storlek, 6.5);
    width: math.div($kryssruta-storlek, 5);
    height: math.div($kryssruta-storlek, 2.2);
    border: solid black;
    border-width: 0 math.div($kryssruta-storlek, 6.5) math.div($kryssruta-storlek, 6.5) 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  } */
}

@font-face {
  font-family: "WorkSans";
  font-style: normal;
  font-weight: 100 900;
  src: url(/worksans-n) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "WorkSans";
  font-style: italic;
  font-weight: 100 900;
  src: url(/worksans-i) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "STIXTwoText";
  font-style: normal;
  font-weight: 100 900;
  src: url(/stixtwot-n) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "STIXTwoText";
  font-style: italic;
  font-weight: 100 900;
  src: url(/stixtwot-i) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "menlofil";
  font-style: normal;
  font-weight: 400;
  src: url(/menlo-nreg) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "menlofil";
  font-style: normal;
  font-weight: 700;
  src: url(/menlo-nbld) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "menlofil";
  font-style: italic;
  font-weight: 400;
  src: url(/menlo-ireg) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "menlofil";
  font-style: italic;
  font-weight: 700;
  src: url(/menlo-ibld) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "futurafil";
  font-style: normal;
  font-weight: 700;
  src: url(/futura-nbld) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "futurafil";
  font-style: normal;
  font-weight: 400;
  src: url(/futura-nmed) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "futurafil";
  font-style: italic;
  font-weight: 400;
  src: url(/futura-imed) format("truetype");
  font-display: swap;
}
:root {
  --mdim: 0.3rem;
}

button.menyknapp-anim {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2rem;
  position: relative;
  transform: rotate(0deg) translateY(-2px);
  transition: 0.5s ease-in-out;
  border: 0;
  background-color: var(--farg-ljusgra);
}
button.menyknapp-anim div {
  position: absolute;
  left: 0;
  height: var(--mdim);
  width: 100%;
  background: var(--farg-text);
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
button.menyknapp-anim div:nth-child(1) {
  top: var(--mdim);
}
button.menyknapp-anim div:nth-child(2), button.menyknapp-anim div:nth-child(3) {
  top: calc(3 * var(--mdim));
}
button.menyknapp-anim div:nth-child(4) {
  top: calc(5 * var(--mdim));
}

button.menyknapp-anim[aria-expanded=true] div:nth-child(1) {
  top: calc(3 * var(--mdim));
  width: 0%;
  left: 50%;
}
button.menyknapp-anim[aria-expanded=true] div:nth-child(2) {
  transform: rotate(45deg);
}
button.menyknapp-anim[aria-expanded=true] div:nth-child(3) {
  transform: rotate(-45deg);
}
button.menyknapp-anim[aria-expanded=true] div:nth-child(4) {
  top: calc(3 * var(--mdim));
  width: 0%;
  left: 50%;
}

:root {
  --typsnitt-sans: WorkSans, sans-serif;
  --hogergap: 2rem;
  --hoger: calc(var(--marginal) - var(--hogergap));
  --hoger-liten: min(20rem, var(--hoger));
  --hojd-fixmenyn: 2rem;
  --fixmenyn-padd: 0.125rem;
  --maxbredd: 1400px;
  --tb: min(35rem, 94%);
  --marginal: calc((100% - var(--tb)) / 2);
  --lankrutegap: 3vw;
  --skrollist: 10px;
  --vecka-hojd: 3rem;
  --vecka-bredd: max(3rem, 8vw);
  --vecka-padd: 0.5rem;
  --bredd-bokning: calc(0.75 * 2 * var(--vecka-bredd));
  --bredd-bokning-kvar: calc(0.25 * 2 * var(--vecka-bredd));
  --fast-höjd: auto;
  --farg-gra1: rgb(128, 128, 128);
  --farg-gra2: rgb(155, 155, 155);
  --farg-gra3: rgb(210, 210, 210);
  --farg-gra4: rgb(245, 245, 245);
  --farg-bakgrund: rgb(255, 255, 255);
  --farg-text: rgb(0, 0, 0);
  --farg-inverterad-text: rgb(255, 255, 255);
  --farg-bokning: rgb(225, 255, 225);
  --farg-markera: rgb(170, 200, 170);
  --farg-platta: rgb(245, 245, 255);
  --farg-helg-bakgrund: rgb(255, 220, 220);
}

.inloggruta button, button {
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 0.5rem;
  line-height: 2;
  color: var(--farg-text);
  background-color: var(--farg-gra4);
  border: solid 1px var(--farg-text);
  border-radius: 3px;
}

::-webkit-scrollbar {
  width: var(--skrollist);
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: var(--farg-gra4);
}

::-webkit-scrollbar-thumb {
  background-color: var(--farg-gra3);
}

body {
  margin: 0;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  color: var(--farg-text);
  background-color: var(--farg-bakgrund);
}

.tabell {
  margin-top: 2rem;
}
.tabell:empty {
  display: none;
}
.tabell .rad.rubrik {
  font-weight: 600;
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
}

.tabellcontainer {
  overflow-x: auto;
  max-height: 70vh;
  padding-bottom: 1rem;
}
.tabellcontainer:empty {
  padding: 0;
}

.ny {
  border: solid 1px var(--farg-gra1);
}

.rad:hover {
  background-color: var(--farg-gra4);
}

.cell {
  white-space: nowrap;
  max-width: 25rem;
  overflow-x: hidden;
}
.cell:hover {
  overflow-x: auto;
}
.cell[contenteditable]:hover {
  outline: var(--farg-text) 1px solid;
}
.cell input {
  width: 4rem;
}
.cell input[type=date] {
  width: 8.5rem;
}

.bockgrupp {
  display: flex;
  gap: 1rem;
}
.bockgrupp > label {
  background-color: var(--farg-gra4);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

textarea {
  width: 100%;
  resize: vertical;
  overflow-y: hidden;
}
textarea.loggimport {
  height: 3rem;
}
textarea.banklogg {
  height: 12rem;
}

@keyframes sparat {
  0% {
    background-color: var(--farg-bakgrund);
  }
  50% {
    background-color: var(--farg-gra4);
  }
  100% {
    background-color: var(--farg-bakgrund);
  }
}
[contenteditable] {
  animation-duration: 0.5s;
}

[contenteditable]:not(button) {
  min-height: 1rem;
  /*
  &:focus {
    padding-right: $redp;
    padding-top: $redp;
    padding-bottom: $redp;
  } */
}
[contenteditable]:not(button).aktuellt-block, [contenteditable]:not(button):hover, [contenteditable]:not(button):focus {
  outline: var(--farg-bakgrund) 2px solid;
  box-shadow: 0 0 0 3px var(--farg-text);
}

.redigerar .bildcontainer.aktuellt-block, .redigerar .bildcontainer:hover, .redigerar .bildcontainer:focus,
.redigerar .draganalys.aktuellt-block,
.redigerar .draganalys:hover,
.redigerar .draganalys:focus,
.redigerar .omsl-toppbild.aktuellt-block,
.redigerar .omsl-toppbild:hover,
.redigerar .omsl-toppbild:focus,
.redigerar .puff.aktuellt-block,
.redigerar .puff:hover,
.redigerar .puff:focus,
.redigerar puffar.aktuellt-block,
.redigerar puffar:hover,
.redigerar puffar:focus,
.redigerar .länkrutor.aktuellt-block,
.redigerar .länkrutor:hover,
.redigerar .länkrutor:focus {
  outline: var(--farg-bakgrund) 2px solid;
  box-shadow: 0 0 0 3px var(--farg-text);
}

.redigerar [tabindex].aktuellt-block, .redigerar [tabindex]:hover, .redigerar [tabindex]:focus {
  outline: var(--farg-bakgrund) 2px solid;
  box-shadow: 0 0 0 3px var(--farg-text);
}

.redigerar nav[tabindex].aktuellt-block, .redigerar nav[tabindex]:hover, .redigerar nav[tabindex]:focus {
  outline: none;
  box-shadow: none;
}

.redigerar .blocksamling > div {
  margin-bottom: 1rem;
}

.toppbild,
.puff,
puffar,
.länkrutor {
  margin-bottom: 4vw;
}
.toppbild[tabindex],
.puff[tabindex],
puffar[tabindex],
.länkrutor[tabindex] {
  margin-block: 0.5rem;
}

/*
p,
h1,
h2,
h3,
h4,
h5,
div {
  &[contenteditable] {
    padding-left: $redp;
  }
} */
a {
  color: var(--farg-text);
  text-decoration: none;
}
a:hover, a:focus {
  background-color: var(--farg-gra4);
  outline: solid 3px var(--farg-gra4);
}

.pdf-lista {
  box-sizing: border-box;
}

p > a:hover, p > a:focus,
.pdf-lista a:hover,
.pdf-lista a:focus {
  border-top: solid 3px var(--farg-gra4);
}

.pdf-lista a:hover, .pdf-lista a:focus {
  background-color: var(--farg-gra3);
  outline-color: var(--farg-gra3);
  border-color: var(--farg-gra3);
}

.månadsvy a:hover, .månadsvy a:focus {
  font-weight: unset;
}

p.länklista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
p.länklista > a:hover, p.länklista > a:focus {
  border-top: none;
}

u {
  text-decoration: none;
  border-bottom: solid 2px var(--farg-text);
}

.klickbar {
  cursor: pointer;
  white-space: nowrap;
}
.klickbar:hover, .klickbar:focus {
  font-weight: bold;
}

.meddelande {
  margin: 0.5rem 0;
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: var(--farg-gra4);
}
.meddelande:empty {
  padding: 0;
}
.meddelande.ver2 {
  padding: 1rem;
  margin-block: 1rem;
}

.stäng {
  font-size: 0.4rem !important;
}
.stäng:hover, .stäng:focus {
  transform: scale(1.2);
}

.sidhuvud,
.sidfot,
.sidhuvud-fix {
  font-family: var(--typsnitt-sans);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
  background-color: var(--farg-gra4);
  display: grid;
  align-items: center;
}

.menyknapp-anim:hover, .menyknapp-anim:focus,
.sidfot a:hover,
.sidfot a:focus {
  outline-color: var(--farg-gra3);
}

.sidfot a:hover, .sidfot a:focus {
  background-color: var(--farg-gra3);
  outline-color: var(--farg-gra3);
}

#meny {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  transition: 0.5s;
  max-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  position: absolute;
  background-color: var(--farg-gra4);
  top: var(--hojd-fixmenyn);
  padding-block: 0;
  padding-inline: 0.6rem;
  font-size: 0.9375rem;
  line-height: 2;
  overflow-x: hidden;
}
#meny h4 {
  margin-top: 1rem;
  margin-bottom: 0;
}
#meny h4:first-child {
  display: none;
}

#meny[aria-hidden=false] {
  max-height: calc(100vh - var(--hojd-fixmenyn));
  padding-top: 0.6rem;
  padding-bottom: 4rem;
}

button.menyknapp {
  border: 0;
  margin-inline: 0.6rem !important;
  height: 1.25rem;
  width: 2rem;
  background: linear-gradient(to bottom, black, black 20%, transparent 20%, transparent 40%, black 40%, black 60%, transparent 60%, transparent 80%, black 80%, black 100%);
}

.sidhuvud-fix {
  gap: 0.4rem;
  grid-template-areas: "mk nv nh kp inl red";
  grid-template-columns: min-content min-content min-content auto auto min-content;
  position: fixed;
  width: 100%;
  z-index: 4;
  padding-top: var(--fixmenyn-padd);
  height: var(--hojd-fixmenyn);
  box-sizing: border-box;
}
.sidhuvud-fix button.menyknapp-anim {
  grid-area: mk;
}
.sidhuvud-fix .nv {
  grid-area: nv;
}
.sidhuvud-fix .nh {
  grid-area: nh;
}
.sidhuvud-fix button {
  margin: 0;
  line-height: 1.4;
}
.sidhuvud-fix > a {
  white-space: nowrap;
  text-align: right;
}
.sidhuvud-fix > a:hover, .sidhuvud-fix > a:focus {
  background-color: var(--farg-gra3);
  outline-color: var(--farg-gra3);
}
.sidhuvud-fix > a[href="/kajakplats"] {
  grid-area: kp;
  text-align: left;
  overflow: hidden;
}
.sidhuvud-fix > a[href="/minsida"] {
  grid-area: inl;
  overflow: hidden;
}
.sidhuvud-fix > div.dold {
  display: none;
}
@media screen and (max-width: 44rem) {
  .sidhuvud-fix {
    left: 0;
  }
}
.sidhuvud-fix #meny a {
  text-align: left;
  display: block;
  width: 100%;
  margin-block: 0.1rem;
}
.sidhuvud-fix #meny a:hover, .sidhuvud-fix #meny a:focus {
  background-color: var(--farg-gra3);
  outline-color: var(--farg-gra3);
}
.sidhuvud-fix #meny a[aria-current] {
  color: var(--farg-inverterad-text);
  background-color: var(--farg-gra2);
  padding-left: 2px;
}

.redsök {
  grid-area: red;
  white-space: nowrap;
}

.sidhuvud {
  padding-top: var(--hojd-fixmenyn);
  z-index: 2;
  background-color: var(--farg-gra2);
}
.sidhuvud a.bilden:hover, .sidhuvud a.bilden:focus {
  outline: none;
  background-color: var(--farg-gra1);
}
.sidhuvud .bilden {
  grid-row-end: span 2;
  max-width: 44rem;
  margin-inline: auto;
}
.sidhuvud .bilden img {
  display: block;
  max-width: 100%;
  height: auto;
}
.sidhuvud a {
  white-space: nowrap;
  overflow: hidden;
}
.sidhuvud a:nth-child(2) {
  margin: 0 1rem;
}
.sidhuvud a:nth-child(2):hover, .sidhuvud a:nth-child(2):focus {
  margin: 0;
}

.sidfot {
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  padding: 1rem;
  margin-top: 2rem;
  overflow-x: auto;
}

@media screen and (max-width: 35rem) {
  .redsök {
    justify-content: right;
  }
  /*
  .sidhuvud {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 2.5rem;
    align-items: initial;

    .bilden {
      grid-row-end: unset; // fixa = lägg till regel för bredare än 500px
      grid-column-end: span 2;
    }

    a:nth-child(2),
    a:nth-child(3) {
      // kolla om det blir bra med flex och centreringen
      display: flex;
      justify-content: center;
      align-items: center;
    }

    a > div {
      display: inline-block;
      margin-top: 0;

      &:nth-child(2)::before {
        content: ":";
        padding-right: 0.5rem;
      }
    }
  } */
  .sidfot {
    grid-template-columns: 1fr;
    padding: 0.5em 1rem;
  }
  .sidfot > div {
    padding: 0.3em 0;
  }
  .sidfot > div div {
    display: inline-block;
  }
  .sidfot > div div:first-child {
    margin-right: 0.25rem;
  }
}
h3, .h3,
h4 {
  font-family: var(--typsnitt-sans);
  margin-top: 2rem;
  word-break: break-word;
}

h3, .h3 {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

h4 {
  margin-bottom: 0.4rem;
}

h5 {
  margin-top: 1rem;
  margin-bottom: 0;
}

.innehåll-bokning h5 {
  margin-top: 0;
}

table,
p {
  margin-top: 0;
  margin-bottom: 1rem;
  word-break: break-word;
}

p {
  line-height: 1.55;
}

/* Buggade ur med högerställda bilden.
p:not(.monospace),
ul {
  overflow-x: hidden;
} */
table {
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  border-collapse: collapse;
}

/* Kvar bara i bortkommenterad kod dock så har kvar här också.
  .före-input {
    margin-top: 2rem;
  } */
button {
  margin: 1em 0;
}

.tabell button {
  margin: 0;
  line-height: 1.5;
  display: block;
}
.tabell button.batch {
  line-height: 1.1;
  padding: 0 0.3rem;
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.5rem;
  vertical-align: super;
}

.underblocksamling .redigeringsknappar {
  margin-left: 0;
  width: calc(var(--sb) - var(--vm));
}
@media screen and (max-width: 50rem) {
  .underblocksamling .redigeringsknappar {
    margin-left: calc(2 * var(--vm));
    width: calc(var(--sb) - 3 * var(--vm));
  }
}

.redigeringsknappar {
  display: flex;
  position: sticky;
  z-index: 2;
  top: var(--hojd-fixmenyn);
  background-color: var(--farg-bakgrund);
  white-space: nowrap;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem !important;
  justify-content: center;
}
.redigeringsknappar > div:last-child {
  overflow: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.redigeringsknappar > div:last-child::-webkit-scrollbar {
  height: 0.25rem;
}
.redigeringsknappar button {
  font-size: 0.8rem;
  padding: 0 0.2rem;
  line-height: 1.3;
  margin: 0.2rem;
  border-color: var(--farg-gra3);
}
.redigeringsknappar button:hover {
  border-color: var(--farg-gra1);
}

.kommande-aktiviteter {
  display: grid;
  grid-template-columns: max-content max-content max-content auto;
  column-gap: 10px;
  white-space: nowrap;
  overflow-x: auto;
  max-height: 20vh;
}

.blocksamling {
  font-family: STIXTwoText, serif;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.blocksamling .fullbredd-åt-höger :is(.fält) {
  margin-left: 0;
}
.blocksamling .fullbredd-åt-höger :is(p) {
  margin-left: 3px !important;
}
.blocksamling :is(h3, h4, h5, p, ul, ol,
table.block,
.ajfrejm-div,
.liten,
.pdf-lista,
.topplista,
.båtstatistik,
.reglageruta,
.länkruta,
.fält,
.storlogga,
.nyckellista,
.textbredd,
.filval,
.input-ram) {
  width: var(--tb);
  margin-left: var(--marginal);
}
.blocksamling .divtabell > h5 {
  margin-left: 0;
}
.blocksamling .textbredd > h3,
.blocksamling .textbredd h4,
.blocksamling .topplista > h4,
.blocksamling .textbredd h5,
.blocksamling .textbredd p,
.blocksamling .textbredd .fält,
.blocksamling .textbredd .input-ram,
.blocksamling .innehållslänkar > h4,
.blocksamling .innehållslänkar > h5,
.blocksamling .textbredd > .innehållslänkar {
  margin-left: 0;
}
.blocksamling .textbredd td:first-child {
  white-space: nowrap;
  vertical-align: top;
  padding-right: 0.5rem;
  text-align: right;
}
.blocksamling .textbredd .båtlista-utökad td:first-child {
  text-align: left;
}
.blocksamling .textbredd .båtlista-utökad td:first-child input {
  width: 100%;
}
.blocksamling :is(.normal) {
  max-width: 44rem;
  margin-inline: auto;
}
.blocksamling :is(.ajfrejm-div.stor) {
  width: 100%;
  margin-left: 0;
}
.blocksamling > button {
  display: block;
  width: fit-content;
  margin-left: var(--marginal);
}
.blocksamling img.liten {
  margin-left: var(--marginal);
}
.blocksamling a {
  border-bottom: solid 3px var(--farg-gra3);
}
.blocksamling .innehållslänkar a,
.blocksamling .timmar a,
.blocksamling .månadsvy a,
.blocksamling .månadsvy h4 a,
.blocksamling a.visningslänk,
.blocksamling .innehåll-bokning a,
.blocksamling .loggrad a,
.blocksamling .puffar a {
  border-bottom: none;
}
.blocksamling div.innehållslänkar a {
  border-bottom: none;
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  line-height: 2;
}
.blocksamling div.innehållslänkar.tabrad a, .blocksamling div.innehållslänkar.tabrad div {
  display: contents;
}
.blocksamling div.innehållslänkar.tabrad a:hover > span, .blocksamling div.innehållslänkar.tabrad a:focus > span, .blocksamling div.innehållslänkar.tabrad div:hover > span, .blocksamling div.innehållslänkar.tabrad div:focus > span {
  background-color: var(--farg-gra4);
  box-shadow: -6px 0px 0px 0px var(--farg-gra4), 6px 0px 0px 0px var(--farg-gra4);
}
.blocksamling div.innehållslänkar > input {
  float: left;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.blocksamling video,
.blocksamling figure,
.blocksamling .mosaik {
  margin-bottom: 1rem;
}
.blocksamling .bildcontainer video,
.blocksamling .bildcontainer figure,
.blocksamling .bildcontainer .mosaik {
  margin-bottom: 0;
}
.blocksamling video {
  max-height: 80vh;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.blocksamling figure {
  margin: 0;
}
.blocksamling figure img {
  margin-bottom: 0;
}
.blocksamling figure img.liten {
  width: 100%;
  margin-left: 0;
}
.blocksamling figure > div {
  overflow: hidden;
}
.blocksamling figcaption {
  font-family: var(--typsnitt-sans);
  font-size: 0.9rem;
  margin-top: 0.3rem;
  width: 100%;
}
.blocksamling figcaption span {
  float: right;
  padding: 0.2rem 0 0.1rem 0.5rem;
  border-bottom: solid 1px var(--farg-gra1);
  margin-top: -0.3rem;
  border-left: solid 1px var(--farg-gra1);
  margin-left: 0.3rem;
}
.blocksamling img,
.blocksamling figure {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 1rem;
}
.blocksamling img[id-bild],
.blocksamling figure[id-bild] {
  cursor: pointer;
}
.blocksamling img:has(figcaption),
.blocksamling figure:has(figcaption) {
  margin-bottom: 2rem;
}
.blocksamling .logg img:has(figcaption),
.blocksamling .logg figure:has(figcaption) {
  margin-bottom: 1rem;
}
.blocksamling figure[photoswipe=nej] img {
  cursor: default;
}
.blocksamling .bildcontainer.höger, .blocksamling .bildcontainer.högerLiten,
.blocksamling figure.höger,
.blocksamling figure.högerLiten {
  float: right;
  clear: right;
}
.blocksamling .bildcontainer.höger,
.blocksamling figure.höger {
  width: var(--hoger);
}
.blocksamling .bildcontainer.högerLiten,
.blocksamling figure.högerLiten {
  width: var(--hoger-liten);
  margin-right: calc(var(--marginal) - var(--hoger-liten) - var(--hogergap));
}
@media screen and (max-width: 999px) {
  .blocksamling .bildcontainer.höger, .blocksamling .bildcontainer.högerLiten,
  .blocksamling figure.höger,
  .blocksamling figure.högerLiten {
    float: none;
    width: var(--tb);
    margin-inline: auto;
  }
}
.blocksamling img.stor {
  max-height: calc(100vh - var(--hojd-fixmenyn));
}
.blocksamling .länkrutor,
.blocksamling .puffar {
  display: grid;
}
@media screen and (max-width: 499px) {
  .blocksamling .länkrutor,
  .blocksamling .puffar {
    grid-template-columns: 1fr;
  }
  .blocksamling .länkrutor .sidtitel,
  .blocksamling .puffar .sidtitel {
    font-size: 10vw;
  }
  .blocksamling .länkrutor > div > div,
  .blocksamling .puffar > div > div {
    padding: 1vw 2vw;
    font-size: 5vw;
  }
  .blocksamling .länkrutor > div > a,
  .blocksamling .puffar > div > a {
    padding: 3vw 2vw;
    font-size: 4.5vw;
  }
}
@media screen and (min-width: 500px) and (max-width: 999px) {
  .blocksamling .länkrutor,
  .blocksamling .puffar {
    grid-template-columns: 1fr 1fr;
  }
  .blocksamling .länkrutor .sidtitel,
  .blocksamling .puffar .sidtitel {
    font-size: 5vw;
  }
  .blocksamling .länkrutor > div > div,
  .blocksamling .puffar > div > div {
    padding: 0.6vw 1.5vw;
    font-size: 3vw;
  }
  .blocksamling .länkrutor > div > a,
  .blocksamling .puffar > div > a {
    padding: 2vw 1.5vw;
    font-size: 2.8vw;
  }
}
@media screen and (min-width: 1000px) {
  .blocksamling .länkrutor,
  .blocksamling .puffar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .blocksamling .länkrutor .sidtitel,
  .blocksamling .puffar .sidtitel {
    font-size: 2.5vw;
  }
  .blocksamling .länkrutor > div > div,
  .blocksamling .puffar > div > div {
    padding: 0.5vw 1vw;
    font-size: 1.4vw;
  }
  .blocksamling .länkrutor > div > a,
  .blocksamling .puffar > div > a {
    padding: 1vw;
    font-size: 1.4vw;
  }
}
.blocksamling .länkrutor {
  font-family: var(--typsnitt-sans);
  gap: var(--lankrutegap);
  margin-top: var(--lankrutegap);
  max-width: min(var(--maxbredd), 100% - 2 * var(--lankrutegap));
  margin-inline: auto;
}
.blocksamling .länkrutor > div {
  background-color: var(--farg-gra4);
}
.blocksamling .länkrutor > div > div:not(.red) {
  background-color: var(--farg-gra2);
  color: var(--farg-inverterad-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}
.blocksamling .länkrutor > div > a {
  display: block;
  border-bottom: none;
}
.blocksamling .länkrutor > div > a:hover, .blocksamling .länkrutor > div > a:focus {
  outline: none;
  filter: brightness(0.92);
}
@media screen and (min-width: 1400px) {
  .blocksamling .länkrutor > div > div {
    padding: 0.45rem 0.9rem;
    font-size: 1.25rem;
  }
  .blocksamling .länkrutor > div > a {
    padding: 0.9rem;
    font-size: 1.25rem;
  }
}
.blocksamling .puffar {
  max-width: var(--maxbredd);
  margin-inline: auto;
}
.blocksamling .puffar > div,
.blocksamling .puffar > a {
  position: relative;
}
.blocksamling .puffar > div:hover, .blocksamling .puffar > div:focus,
.blocksamling .puffar > a:hover,
.blocksamling .puffar > a:focus {
  background-color: transparent;
  outline: none;
}
.blocksamling .puffar > div:hover img, .blocksamling .puffar > div:focus img,
.blocksamling .puffar > a:hover img,
.blocksamling .puffar > a:focus img {
  opacity: 0.8;
}
.blocksamling .puffar button,
.blocksamling .puffar select {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  max-width: calc(100% - 2rem);
}
.blocksamling .puffar button {
  margin-top: 2rem;
}
.blocksamling .puffar .sidtitel {
  padding: 0;
  color: var(--farg-inverterad-text);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  position: absolute;
  z-index: 1;
  width: 100%;
  font-family: sans-serif;
  font-weight: 600;
}
.blocksamling .puffar img {
  object-fit: cover;
  aspect-ratio: 1/1;
  margin-bottom: 0;
  filter: brightness(0.8);
}
.blocksamling .puff a {
  display: flex;
  overflow: hidden;
  border-bottom: none;
  background-color: var(--farg-gra4);
}
.blocksamling .puff a:hover img, .blocksamling .puff a:focus img {
  opacity: 0.8;
}
.blocksamling .puff a:hover div, .blocksamling .puff a:focus div {
  background-color: var(--farg-gra4);
  opacity: 0.6;
}
.blocksamling .puff a img {
  min-width: 25rem;
  margin-bottom: 0;
  object-fit: cover;
}
.blocksamling .puff a div {
  padding: 2rem;
  font-size: 1.5rem;
  font-family: var(--typsnitt-sans);
  font-weight: 500;
}
@media screen and (max-width: 749px) {
  .blocksamling .puff a {
    max-height: unset !important;
    flex-direction: column;
  }
}
.blocksamling .puff .input-ram {
  max-width: 30rem;
  margin-inline: auto;
}
.blocksamling .tvåkol {
  display: grid;
  align-items: end;
  column-gap: 0.6rem;
  margin-bottom: 1rem;
}
.blocksamling .tvåkol > img {
  width: 100%;
}

.redigerar .innehåll .länkrutor > div {
  background-color: transparent;
}

.inloggningsrutan {
  width: var(--tb);
  margin-left: var(--marginal);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 2rem;
  margin-top: 3rem;
  margin-inline: auto;
  background-color: var(--farg-gra4);
}

.inloggruta {
  font-family: STIXTwoText, serif;
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-bottom: 0;
}
.inloggruta img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.inloggruta .input-ram {
  max-width: 22rem;
  margin-left: 0 !important;
}
.inloggruta .inloggmedd {
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
  background-color: var(--farg-bakgrund);
  padding: 0.5rem;
}
.inloggruta .inloggmedd:empty {
  padding: 0;
}

.båtplatser {
  overflow-x: auto;
  margin: 0 2%;
}
.båtplatser h4 {
  margin-top: 1.5rem;
  margin-left: 0 !important;
}
.båtplatser td {
  padding: 0.2em 0.5rem;
  white-space: nowrap;
}
.båtplatser td:first-child {
  padding: 0.2em 0.5rem 0.2rem 0;
}
.båtplatser .villkorslänk {
  display: block;
}

@media screen and (max-width: 899px) {
  .knapp-fullbredd {
    display: none;
  }
}

.innehållslänkar > a {
  display: block;
  line-height: 2;
}
.innehållslänkar > a > span {
  margin-left: 0.3rem;
}

button.kryss {
  font-size: 0.4rem;
  margin: 0 0.5rem;
  vertical-align: text-bottom;
  padding: 0.25em 0.7em 0.25em 0.5rem;
}

button.låg {
  margin: 0;
  line-height: 1;
  margin-right: 0.4rem;
}

.betstatvalen {
  overflow-x: auto;
}
.betstatvalen > div {
  white-space: nowrap;
}
.betstatvalen button {
  margin: 0.3em 0.5rem;
  line-height: 1.2;
}

.betalstatus {
  margin-top: 1rem;
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
}
.betalstatus > a {
  display: block;
  width: fit-content;
}

.blocksamling .info {
  background-color: var(--farg-gra4);
  padding: 0.2rem 0.5rem;
  box-sizing: border-box;
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
}
.blocksamling .info:empty {
  display: none;
}
.blocksamling div.input-ram.lösenord {
  max-width: 14rem;
}
@media screen and (max-width: 35rem) {
  .blocksamling div.input-ram.lösenord {
    font-size: 1.2rem;
  }
}

.nyckellista {
  font-family: var(--typsnitt-sans);
  line-height: 2;
}
@media screen and (max-width: 35rem) {
  .nyckellista {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 599px) {
  .storlogga {
    font-size: 1.5rem;
  }
  .storlogga input {
    font-size: 1.5rem;
  }
  .storlogga .fält > span:first-child {
    margin-top: 1rem;
    display: block;
  }
}
egen-select {
  cursor: default;
}
egen-select .rubrik {
  font-family: var(--typsnitt-sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  border-bottom: 2px solid;
  padding: 0.1rem 0.3rem;
  margin-top: 0.8rem;
}
egen-select > div:nth-child(1) {
  height: 3.5rem;
  display: none;
}
egen-select > div:nth-child(2) {
  font-size: 1rem;
  margin-top: 1.5rem;
  position: relative;
  border: solid var(--farg-gra4) 2px;
}
egen-select > div:nth-child(2)::before {
  content: attr(etikett);
  position: absolute;
  top: -1.2rem;
  font-family: var(--typsnitt-sans);
  font-size: 0.8rem;
}
egen-select > div:nth-child(2) > div:not(.rubrik) {
  padding: 0.3rem;
}
egen-select > div:nth-child(2) > div:not(.rubrik):hover {
  background-color: var(--farg-gra4);
}
egen-select > div:nth-child(2) > div:not([vald]) {
  display: none;
}
egen-select.klickad [vald] {
  font-weight: 300;
  font-style: italic;
  font-family: var(--typsnitt-sans);
  background-color: var(--farg-gra4);
  font-size: 0.95rem;
}
egen-select.klickad > div:nth-child(1) {
  display: block;
}
egen-select.klickad > div:nth-child(2) {
  z-index: 3;
  max-height: 50vh;
  overflow-y: auto;
  position: absolute;
  background-color: var(--farg-bakgrund);
  margin-top: -2.2rem;
}
egen-select.klickad > div:nth-child(2) > div:not([vald]) {
  display: block;
}
egen-select.klickad button {
  display: initial;
}
egen-select button {
  display: none;
}

label[for^=sel] {
  display: inline-block !important;
  margin-right: 0.5rem;
}
label[for^=sel]::after {
  content: ":";
}

label > input[type=number] {
  margin-left: 0.4rem;
}

select {
  font-family: inherit;
  font-size: inherit;
  max-width: 100%;
}
select[multiple] {
  height: 1.3rem;
}
select[multiple]:hover {
  height: 10rem;
}

.egenskapslistning {
  margin-top: 0.5rem;
  display: flex;
  height: 90vh;
}
.egenskapslistning div {
  margin-bottom: 0;
}
.egenskapslistning > div {
  overflow-y: auto;
  white-space: nowrap;
}
.egenskapslistning > div:first-child {
  margin-right: 1rem;
}
.egenskapslistning > div:first-child > div:hover {
  background-color: var(--farg-gra3);
}

.innehåll-bokning a,
.visningslänk {
  display: block;
  line-height: 1.7;
}

.tabell.kopers {
  margin-top: 0;
}
.tabell.kopers .rad .cell {
  padding: 3px 8px;
}
.tabell.kopers .cell:nth-child(3) {
  white-space: normal;
}

button.logga-ut {
  display: block;
  margin-top: 2rem;
}

.mejllista {
  height: 50vh;
  overflow-y: auto;
}
.mejllista label {
  display: block;
}

.visavalda {
  /* Äsch. Det här döljer ju bara bocken och den ligger inne i label-elementet.
  input:not(:checked) {
    display: none;
  } */
}
.visavalda label:not([vald]) {
  display: none;
}

ul,
ol {
  box-sizing: border-box;
  margin-top: 0;
  padding-inline-start: 2rem !important;
  width: calc(100% - 2rem);
}
ul li,
ol li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
ul li div:first-child,
ol li div:first-child {
  font-family: var(--typsnitt-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

.statuslist {
  height: 1rem;
  border: 1px solid var(--farg-text);
  margin: 1em 0;
}
.statuslist div {
  background-color: var(--farg-gra1);
  height: 100%;
  white-space: nowrap;
  font-family: var(--typsnitt-sans);
  font-size: 0.75rem;
  line-height: 1.35;
  text-indent: 0.2rem;
}

.båtinput .input-ram {
  max-width: 20rem;
}
.båtinput label {
  display: block;
  margin: 1em 0;
}
.båtinput input[type=number] {
  margin-left: 0.5rem;
  width: 5rem;
}

span.titel {
  position: relative;
}
span.titel:hover::before {
  content: attr(text);
  position: absolute;
  background-color: var(--farg-gra3);
  padding: 0 0.5rem;
  line-height: 1.5;
  right: 4rem;
  white-space: nowrap;
}

.monospace {
  font-family: monospace;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 0.125rem;
}

.anteckning {
  margin-bottom: 1rem;
  font-family: Menlo, menlofil, Consolas, "Droid Sans Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.8rem;
  white-space: nowrap;
  display: grid;
  grid-template-areas: "knapp rubrik" "innehåll innehåll";
  grid-template-columns: 57px 1fr;
  justify-content: left;
  width: var(--tb);
  margin-left: var(--marginal);
  /* Vet inte varför jag hade det här.
  &[contenteditable] {
    outline: none;
    &:focus,
    &:hover {
      box-shadow: -2px 0px 0 black;
    }
  } */
}
.anteckning .ant-rubrik {
  grid-area: rubrik;
  font-family: var(--typsnitt-sans);
  font-weight: 600;
  font-size: 1.2rem;
  overflow-x: hidden;
}
.anteckning button {
  grid-area: knapp;
  margin: 0 0.6rem 0 auto;
  line-height: 1;
}
.anteckning.synligt-innehåll {
  margin-left: 1%;
  width: 98%;
}
.anteckning.synligt-innehåll .ant-innehåll {
  display: block;
}
.anteckning .ant-innehåll {
  display: none;
  grid-area: innehåll;
  overflow-x: auto;
  padding: 0.2rem;
}

.dold {
  display: none;
}

button.kompakt {
  margin: 0;
  line-height: 1;
  margin-left: 0.5rem;
  padding: 0 0.3rem;
}

.draganalys {
  /*
  label:nth-child(5) {
    grid-area: k51;
  }
  label:nth-child(6) {
    grid-area: k61;
  }
  label:nth-child(7) {
    grid-area: k71;
  }
  label:nth-child(8) {
    grid-area: k81;
  }
  label:nth-child(9) {
    grid-area: k91;
  } */
  /*
  label:nth-child(9) {
    grid-area: k52;
  }
  label:nth-child(14) {
    grid-area: k62;
  }
  label:nth-child(15) {
    grid-area: k72;
  } */
  /*  Behövde inte denna.
  .instruktion {
    font-family: $typsnitt-sans;
    font-size: $storlek-typsnitt-sans-instruktion;
    background-color: #f5f5f5; // fixa variabel och så
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

    li {
      margin-bottom: 0.2rem;
      line-height: 1.4rem; // Men strunt. Styr upp det här med em på line-height nu när jag hajade hur det hänger ihop. Om jag nu minns det.
    }
  } */
}
.draganalys textarea {
  display: block;
  width: 100%;
}
.draganalys span {
  margin-right: 1rem;
}
.draganalys input[type=range] {
  display: block;
  width: 100%;
  margin: 1em 0;
}
.draganalys label {
  display: block;
  line-height: 1.5;
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
}
.draganalys label > span {
  position: absolute;
  left: 1.5rem;
  top: -1px;
}
.draganalys .knappar {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
}
.draganalys .knappar button {
  min-width: 8%;
}
.draganalys .knappar span {
  margin-right: 0;
  padding-inline: 3px;
  font-size: 12px;
}
.draganalys form {
  margin: 1em 0;
  display: grid;
  grid-template-areas: "k11 k12" "k21 k22" "k31 k32" "k41 k42" "k51 k52" "k61 k62" "k71 k72";
}
.draganalys label:nth-child(1) {
  grid-area: k11;
}
.draganalys label:nth-child(2) {
  grid-area: k21;
}
.draganalys label:nth-child(3) {
  grid-area: k31;
}
.draganalys label:nth-child(4) {
  grid-area: k41;
}
.draganalys label:nth-child(5) {
  grid-area: k12;
}
.draganalys label:nth-child(6) {
  grid-area: k22;
}
.draganalys label:nth-child(7) {
  grid-area: k32;
}
.draganalys label:nth-child(8) {
  grid-area: k42;
}
.draganalys input[type=radio]:focus-visible {
  outline: none;
}

.ärendesamling, .underblocksamling {
  position: relative;
}
.ärendesamling > button:first-child, .underblocksamling > button:first-child {
  font-weight: 700;
}
.ärendesamling > button.upp, .underblocksamling > button.upp, .ärendesamling > button.ner, .underblocksamling > button.ner, .ärendesamling > button:last-child, .underblocksamling > button:last-child {
  position: absolute;
  bottom: 0.25rem;
  line-height: 1;
}
.ärendesamling > button.upp, .underblocksamling > button.upp {
  right: 4.5rem;
}
.ärendesamling > button.ner, .underblocksamling > button.ner {
  right: 2rem;
}
.ärendesamling > button:last-child, .underblocksamling > button:last-child {
  right: 0;
}
.ärendesamling button, .underblocksamling button {
  margin-block: 0;
}
.ärendesamling h4#rub0, .underblocksamling h4#rub0 {
  margin-top: 0;
  margin-bottom: 1rem;
}
@media screen and (max-width: 50rem) {
  .ärendesamling h4#rub0, .underblocksamling h4#rub0 {
    margin-left: 3.5rem;
  }
}

.underblocksamling {
  border-left: solid 4.2rem rgba(0, 0, 0, 0.04);
  margin-left: -4.2rem;
  border-bottom: solid 0.2rem var(--farg-gra3);
  margin-bottom: 1rem;
}
@media screen and (max-width: 50rem) {
  .underblocksamling > button:first-child {
    left: 0px;
    top: -0.3rem;
  }
}
@media screen and (max-width: 709px) {
  .underblocksamling {
    border-left-color: rgba(0, 0, 0, 0.3);
  }
}
.underblocksamling .underblocksamling {
  box-shadow: 0 -1px 0 #000;
  border-top: solid 0.4rem var(--farg-gra3);
  border-bottom: solid 0.4rem var(--farg-gra3);
}
.underblocksamling .underblocksamling .underblocksamling {
  background-color: var(--farg-gra4);
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.underblocksamling h4 {
  font-size: 1.1rem;
}

.ärendesamling {
  border: solid 2px var(--farg-text);
  padding: 0.6rem;
  /* Kolla detta.
  &:focus {
    border-color: blue;
  } */
}
@media screen and (max-width: 50rem) {
  .ärendesamling > button:first-child {
    left: 0.6rem;
    top: 3px;
  }
}
.ärendesamling .ärenderad {
  display: flex;
  margin-bottom: 0.3rem;
}
.ärendesamling .uppner button {
  display: block;
  line-height: 1;
  font-size: 0.8rem;
}
.ärendesamling .namn {
  width: calc(100% - 3rem);
  margin-left: 0.6rem;
  line-height: 2.5rem;
}
.ärendesamling .redigeringsknappar {
  display: none;
}
.ärendesamling > button:last-child {
  right: 0.6rem;
  bottom: 0.6rem;
}

.visa-bara > * {
  display: none;
}
.visa-bara > h4#rub0 {
  display: block;
}

/* Sparar det här för något annat tillfälle.
.svepmarkering {
  border-top-style: solid;
  border-image: linear-gradient(to right, rgb(50, 50, 50), white) 1;  // Man kan ha en till parameter efter ettan här på slutet. Kolla upp detta. Jag vet inte heller vad ettan är, bara att den behövdes.
  border-width: 5px;
}
*/
.sammanställning {
  text-align: right;
}

.kurva-och-histogram {
  margin-inline: auto;
  width: fit-content;
  overflow-x: auto;
  max-width: 100%;
}

.dagskoll .rad:hover {
  background-color: unset;
}
.dagskoll .cell:not(:first-child) {
  text-align: center;
}
.dagskoll .cell:not(:first-child):hover {
  background-color: var(--farg-gra4);
  cursor: pointer;
}
.dagskoll .rubrik .cell:hover {
  background-color: unset;
  cursor: unset;
}

.toppbild {
  position: relative;
  overflow: hidden;
}
.toppbild > div:not(.input-ram) {
  font-family: var(--typsnitt-sans);
  font-size: min(3rem, 10vw);
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--farg-inverterad-text);
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
}
.toppbild > div:not(.input-ram):empty {
  display: none;
}
.toppbild > img {
  margin-bottom: 0 !important;
}

.toppdiv {
  height: 10vh;
  position: fixed;
  z-index: 2;
  top: 0;
  overflow-y: scroll;
  background-color: var(--farg-bakgrund);
  padding-left: 0.3rem;
  margin-left: -0.3rem;
}
.toppdiv:empty {
  background-color: transparent;
  overflow: hidden;
}
.toppdiv:empty ~ .vertikalreglage {
  height: 0;
}

.vertikalreglage {
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 0.3rem;
  background-color: var(--farg-gra1);
  cursor: ns-resize;
}

.mätrutan {
  max-width: 100%;
  width: 35rem;
  height: 35rem;
  border: solid 1px var(--farg-text);
}

button.sökresultat {
  background-color: var(--farg-bakgrund);
  display: block;
  line-height: 1.5rem;
  margin: 0.125rem;
  border: none;
}
button.sökresultat:hover {
  background-color: var(--farg-gra3);
}

form.färgval {
  display: flex;
  margin: 1em 0;
  justify-content: space-around;
}

.aw-slajder {
  margin-bottom: 2rem;
}

.nyanspysselruta {
  width: 100%;
  height: 12rem;
  display: flex;
}
.nyanspysselruta > div {
  width: 50%;
  height: 50%;
  margin: auto;
}

.färgskala {
  max-height: 80vh;
  overflow-y: scroll;
}
.färgskala > div {
  height: 5rem;
}

.rutcontainer .aw-slajder {
  margin-top: 1rem;
}

.ljuskoll {
  display: flex;
  padding: 10%;
}
.ljuskoll > div {
  width: 100%;
  padding: 0;
  padding-bottom: 20%;
}

.markerad {
  background-color: var(--farg-gra3);
}

.historik {
  display: flex;
  white-space: nowrap;
}
.historik button {
  margin: 0;
  line-height: 1.2;
  display: block;
}

.ikondiv {
  display: inline-block;
  margin-left: 1px;
}
.ikondiv:hover {
  outline: solid 1px var(--farg-gra1);
  border-radius: 3px;
}
.ikondiv:hover:after {
  content: attr(besk);
  position: absolute;
  top: 2.2rem;
  left: 0;
  background-color: var(--farg-gra4);
  z-index: 1;
  padding: 3px 5px 2px 5px;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: var(--typsnitt-sans);
}
.ikondiv:hover > .ikon[src="/img/historik"] {
  display: inline-block;
}
.ikondiv > .ikon[src="/img/historik"] {
  display: none;
}
.ikondiv .ikon {
  display: initial;
  cursor: pointer;
  height: 20px;
  width: auto;
  margin: 0 5px;
  vertical-align: middle;
  position: relative;
}

.ikondiv[besk="Växla redigera"]:hover::after,
.ikondiv[besk=Sök]:hover::after {
  left: unset;
  right: 0;
}

.redigera.aktiv {
  outline: 4px solid lightgreen;
  background-color: lightgreen;
}

.ikon.aktiv {
  background-color: lightgreen;
  padding-inline: 3px;
  margin-inline: 0;
  border-radius: 3px;
}

/*
.sökikon {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: $radhöjd-sidhuvud-knapp-och-ikon;

  &:before {
    content: "\1F50D"; // "&#128269;"; // https://unicode-table.com/en/1F50D/   &#128270; för åt andra hållet.
  }
} */
body.mörkt-tema {
  --farg-gra1: rgb(150, 150, 150);
  --farg-gra2: rgb(120, 120, 120);
  --farg-gra3: rgb(100, 100, 100);
  --farg-gra4: rgb(80, 80, 80);
  --farg-bakgrund: rgb(40, 40, 40);
  --farg-text: rgb(255, 255, 255);
  --farg-inverterad-text: rgb(255, 255, 255);
  --farg-bokning: rgb(125, 155, 125);
  --farg-markera: rgb(80, 150, 80);
  --farg-platta: rgb(100, 100, 150);
  --farg-helg-bakgrund: rgb(255, 120, 120);
}
body.mörkt-tema .ikondiv .ikon {
  filter: invert(1);
  opacity: 0.8;
}
body.mörkt-tema input {
  color-scheme: dark;
}

body.ljust-tema {
  --farg-gra1: rgb(128, 128, 128);
  --farg-gra2: rgb(155, 155, 155);
  --farg-gra3: rgb(210, 210, 210);
  --farg-gra4: rgb(245, 245, 245);
  --farg-bakgrund: rgb(255, 255, 255);
  --farg-text: rgb(0, 0, 0);
  --farg-inverterad-text: rgb(255, 255, 255);
  --farg-bokning: rgb(225, 255, 225);
  --farg-markera: rgb(170, 200, 170);
  --farg-platta: rgb(245, 245, 255);
  --farg-helg-bakgrund: rgb(255, 220, 220);
}
body.ljust-tema .ikondiv .ikon {
  filter: none;
  opacity: initial;
}
body.ljust-tema input {
  color-scheme: light;
}

html {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farg-gra1: rgb(150, 150, 150);
    --farg-gra2: rgb(120, 120, 120);
    --farg-gra3: rgb(100, 100, 100);
    --farg-gra4: rgb(80, 80, 80);
    --farg-bakgrund: rgb(40, 40, 40);
    --farg-text: rgb(255, 255, 255);
    --farg-inverterad-text: rgb(255, 255, 255);
    --farg-bokning: rgb(125, 155, 125);
    --farg-markera: rgb(80, 150, 80);
    --farg-platta: rgb(100, 100, 150);
    --farg-helg-bakgrund: rgb(255, 120, 120);
  }
  .ikondiv .ikon {
    filter: invert(1);
    opacity: 0.8;
  }
}
@media all and (display-mode: standalone) {
  body {
    overscroll-behavior-y: contain;
  }
}
.vecka .kolumner {
  display: flex;
  margin-bottom: 2rem;
  overflow-x: auto;
}
.vecka .fast-höjd {
  min-height: var(--fast-höjd);
  white-space: nowrap;
  padding-inline: 0.25rem;
}
.vecka .fast-höjd > div:first-child {
  font-weight: bold;
}

.dag {
  flex-grow: 1;
  text-align: center;
}
.dag:not(:last-child) {
  border-right: 1px solid var(--farg-gra1);
}
.dag .klickyta {
  height: 100%;
}
.dag .helgdag {
  background-color: var(--farg-helg-bakgrund);
}

.timmar {
  min-width: var(--vecka-bredd);
  position: relative;
}
.timmar > div {
  line-height: var(--vecka-hojd);
}
.timmar > div:nth-child(2n):not(.bokning) {
  background-color: var(--farg-gra4);
}
.timmar .bokning {
  line-height: 1.3;
  text-align: left;
  position: absolute;
  border: none;
  padding: var(--vecka-padd);
  box-sizing: border-box;
  background-color: var(--farg-bokning);
  z-index: 1;
  width: calc(var(--vecka-bredd) * 1.5);
  overflow: hidden;
}
.timmar .bokning > div {
  white-space: nowrap;
}
.timmar .bokning * {
  display: none;
}
.timmar .bokning .visa-ej-expanderad {
  display: block;
}
.timmar .bokning.visa {
  height: auto !important;
  width: auto;
  overflow: unset;
  z-index: 2;
}
.timmar .bokning.visa * {
  display: block;
}
.timmar .bokning button {
  position: absolute;
  right: var(--vecka-padd);
  bottom: -0.6rem;
  line-height: 1;
}
.timmar .bokning button.vänstra {
  margin-right: 3rem;
}
.timmar .bokning.överlappande {
  border-left: 1px solid var(--farg-gra1);
}
.timmar .bokning.extern {
  filter: brightness(1.08);
}
.timmar .bokning.extern:hover:before {
  content: "Extern";
  position: absolute;
  background-color: var(--farg-bokning);
  padding-right: 1rem;
  font-weight: bold;
  font-family: var(--typsnitt-sans);
}

.lista {
  overflow-x: auto;
}
.lista button {
  margin: 0;
  line-height: 1;
  margin-right: 0.6rem;
}
.lista div {
  margin: 0;
  white-space: nowrap;
}

.ejmed {
  text-decoration: line-through;
}

.divtabell {
  display: table;
}
.divtabell > div {
  display: table-row;
}
.divtabell > div > * {
  display: table-cell;
  padding-right: 1rem;
  padding-top: 0.2rem;
}
.divtabell .rubrik {
  font-weight: bold;
}

.båtstatistik {
  margin-top: 2rem;
  overflow-x: auto;
}

.loggrader {
  display: grid;
  grid-template-columns: min-content min-content min-content min-content min-content min-content auto;
  column-gap: 0.6rem;
  row-gap: 0.3rem;
}
.loggrader .loggrad {
  display: contents;
}
.loggrader .loggrad > * {
  height: fit-content;
}
.loggrader .loggrad a {
  white-space: nowrap;
  /* Vet inte varför jag hade denna. Tror det var gammalt.
  &:nth-child(2) {
    // font-family: $typsnitt-sans;
    font-weight: bold;
  } */
}
.loggrader .loggrad input {
  width: 2.5rem;
}
.loggrader .loggrad button {
  margin: 0;
  line-height: 1;
}
.loggrader .loggrad.att-hantera > a:nth-of-type(1), .loggrader .loggrad.dubblett > a:nth-of-type(1) {
  position: relative;
  margin-top: 1rem;
}
.loggrader .loggrad.att-hantera > a:nth-of-type(1)::before, .loggrader .loggrad.dubblett > a:nth-of-type(1)::before {
  position: absolute;
  top: -1rem;
  font-family: var(--typsnitt-sans);
  font-size: 0.8rem;
  content: "Undersök dubblett";
  background-color: yellow;
  color: black;
  padding-inline: 0.3rem;
}
.loggrader .loggrad.att-hantera > a:nth-of-type(1)::before {
  content: "Att hantera";
  background-color: lightblue;
}
.loggrader .loggrad.roddes-ej > * {
  opacity: 0.3;
}
.loggrader .loggrad .spanfix {
  grid-column-start: 1;
  grid-column-end: 7;
}
.loggrader .loggrad .spanfix img.normal {
  margin-left: 0;
  width: 100%;
}

.månadsvy {
  overflow-x: auto;
}
.månadsvy .vecka {
  display: flex;
  min-width: 35rem;
  width: auto;
}
.månadsvy .vecka > div {
  width: 14.2857142857%;
  padding-bottom: min(14.2857142857%, 9rem);
  position: relative;
  border: solid 0.5px var(--farg-text);
  overflow: auto;
}
.månadsvy .vecka > div::-webkit-scrollbar {
  width: 5px;
  height: 3px;
}
.månadsvy .vecka > div > div {
  position: absolute;
  padding: 0px 0.3rem;
}
.månadsvy .vecka > div > div > div {
  white-space: nowrap;
}
.månadsvy .vecka > div:has(.helgdag) {
  background-color: var(--farg-helg-bakgrund);
}
.månadsvy .datum {
  font-family: var(--typsnitt-sans);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.månadsvy .datum:first-child {
  position: absolute;
  background-color: var(--farg-bakgrund);
  padding-right: 0.3rem;
  border-bottom-right-radius: 0.6rem;
}
.månadsvy .bokning {
  white-space: nowrap;
  font-family: var(--typsnitt-sans);
  font-size: 0.875rem;
  line-height: 1.3;
}
.månadsvy h4 a {
  border-bottom: none;
}
.månadsvy h4 a:first-child {
  margin-right: 0.6rem;
}
.månadsvy h4 a:last-child {
  margin-left: 0.6rem;
}

.tävling {
  color: black;
  background-color: yellow;
  box-shadow: -5px 0px 0px 0px yellow, 5px 0px 0px 0px yellow;
}

input.sträckaval {
  width: 4rem;
}

/*
.senaste-block::before {
  content: "*"; // fixa prick
  position: absolute;
  // top: 0;
  right: 0;
}
.aktuellt-block::before {
  content: "O"; // fixa prick
  position: absolute;
  // top: 0;
  right: 0;
}
.senaste-block.aktuellt-block::before {
  content: "*O"; // fixa prick
  position: absolute;
  // top: 0;
  right: 0;
} */
.innehållslänkar,
.fullbredd-åt-höger,
.fullbredd-åt-höger2 {
  overflow-x: auto;
  width: calc(var(--tb) + var(--marginal));
  margin-left: var(--marginal);
}
.innehållslänkar h3,
.innehållslänkar h4,
.fullbredd-åt-höger h3,
.fullbredd-åt-höger h4,
.fullbredd-åt-höger2 h3,
.fullbredd-åt-höger2 h4 {
  margin-left: 0 !important;
}

.fullbredd-åt-höger2 {
  width: calc(50vw + var(--tb) / 2);
  margin-left: 0;
}

.fält > span:first-child,
.topplista > div > span:first-child {
  display: inline-block;
}

.fält {
  line-height: 2rem;
}
.fält > span:first-child {
  width: 5rem;
}

.topplista > div > span:first-child {
  width: 4rem;
}

.blocksamling .topplista a {
  border: none;
}

.topplista > .divtabell > div > div:nth-child(2) {
  padding-left: 3px;
}

.en-till-lista {
  max-width: 100%;
  overflow-x: auto;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  column-gap: 0.5rem;
}
.en-till-lista > h4 {
  grid-column-start: 1;
  grid-column-end: 4;
}
.en-till-lista > div {
  display: contents;
}
.en-till-lista > div > a {
  font-family: monospace;
  font-size: 0.9rem;
}

.redmed {
  background-color: var(--farg-gra4);
  padding: 0.5rem 0.8rem;
  font-family: var(--typsnitt-sans);
  font-weight: 500;
  margin-block: 1rem;
}
.redmed:empty {
  display: none;
}

.bildcontainer {
  overflow: hidden;
  min-height: 3rem;
  position: relative;
  margin-bottom: 1rem;
}
.bildcontainer img,
.bildcontainer video {
  position: relative;
  z-index: -1;
}
.bildcontainer img {
  margin-bottom: 0;
}
.bildcontainer button {
  position: absolute;
  bottom: 0.2rem;
  margin: 0;
}
.bildcontainer button:nth-of-type(1) {
  left: 0.2rem;
}
.bildcontainer button:nth-of-type(2) {
  left: 50%;
}
.bildcontainer button:nth-of-type(3) {
  right: 0.2rem;
}

.logg {
  margin-block: 0.5rem;
}
.logg > a {
  display: block;
  width: fit-content;
  white-space: nowrap;
  line-height: 1.1;
}
.logg.egen-aktivitet {
  overflow-x: auto;
  margin-top: 1.2rem;
}
.logg.egen-aktivitet::before {
  display: block;
  width: var(--tb);
  content: "Egen aktivitet";
  color: var(--farg-gra1);
  font-size: 0.8rem;
  font-style: italic;
}
.logg p:last-child {
  margin-bottom: 0;
}
.logg figcaption span {
  font-size: 0.5rem;
  padding: 0.1rem 0 0 0.3rem;
}

a.länkruta {
  background-color: var(--farg-gra4);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  box-sizing: border-box;
  display: block;
  border: none !important;
  margin-block: 1rem;
  max-width: 400px;
}
a.länkruta:hover, a.länkruta:focus {
  opacity: 0.75;
}
a.länkruta.stor {
  margin-left: 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  display: block;
  margin-block: 1rem;
}

a.puffruta {
  background-color: var(--farg-gra4);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  box-sizing: border-box;
  display: block;
  margin-top: 1rem;
  border: none !important;
}
a.puffruta:hover, a.puffruta:focus {
  opacity: 0.75;
}
a.puffruta > div:first-child {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}
a.puffruta div {
  margin-top: 0.5rem;
}

.reglageruta {
  background-color: var(--farg-gra4);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  box-sizing: border-box;
  margin-top: 2rem;
  width: fit-content;
  font-family: "WorkSans";
  line-height: 2;
}

h4 > a {
  border: none !important;
}

.skrollruta {
  margin-top: 2rem;
  background-color: var(--farg-gra4);
  max-height: 10rem;
  overflow-y: auto;
}
.skrollruta button {
  margin-block: 0.2rem;
  margin-right: 0.6rem;
  line-height: 1.5;
}

.gridtabell {
  font-size: 0.8rem;
  font-family: var(--typsnitt-sans);
  display: grid;
}
.gridtabell > div {
  display: contents;
}
.gridtabell > div > * {
  padding: 0px 5px;
}
.gridtabell > div > *:not(:first-child) {
  border-left: 1px solid var(--farg-gra1);
}
.gridtabell > div:nth-child(2n) > * {
  background-color: var(--farg-gra4);
}

.sida-lappfix {
  display: block;
  --marg: 3.2rem;
  margin: 0;
}
.sida-lappfix > div > a {
  font-size: 17px;
}
.sida-lappfix > div > a:last-child {
  margin-left: 0.6rem;
}
.sida-lappfix h1 {
  font-weight: normal;
  margin: 0;
  font-family: futurafil;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.7rem;
  line-height: 2.2;
  background-color: var(--farg-gra2);
  color: var(--farg-bakgrund);
}
.sida-lappfix h2 {
  margin-inline: var(--marg);
  font-family: futurafil;
  font-size: 2.3rem;
  margin-top: 0.8rem;
  margin-bottom: 0;
}
.sida-lappfix p,
.sida-lappfix ul {
  font-size: max(16px, 1.7rem);
  margin-inline: var(--marg);
}
.sida-lappfix p {
  line-height: 1.45;
  margin-top: 0.5rem;
}
.sida-lappfix ul {
  width: auto;
}
.sida-lappfix ul li {
  line-height: 1.2;
}
.sida-lappfix .monospace {
  overflow-x: hidden;
  font-family: "futurafil";
  font-size: 1.4rem;
  border: solid 0.1rem var(--farg-text);
  padding: 0.7rem 1rem;
  line-height: 1.5;
  margin-block: 1.5rem;
}
.sida-lappfix .monospace.kontakt {
  text-align: center;
  border: none;
  font-weight: bold;
  line-height: 1.6;
  background-color: var(--farg-gra2);
  color: var(--farg-bakgrund);
  margin-inline: 0;
}
.sida-lappfix figure {
  margin: 0;
}
.sida-lappfix figure img {
  width: 100%;
}

@page {
  size: A4;
  margin: 0;
}
@media print {
  .sida-lappfix img {
    width: 100vw;
    position: absolute;
    bottom: 0;
  }
}
@media print {
  .sidhuvud-fix,
  .extrameny,
  .sidfot {
    display: none;
  }
}
/*
@media screen and (min-resolution: 100dpi) {
  .testgrej {
    font-size: 30px;
  }
}
@media screen and (min-resolution: 200dpi) {
  .testgrej {
    font-size: 50px;
  }
} */
.bildbesk {
  width: fit-content;
  position: relative;
}
.bildbesk img {
  height: 100%;
  display: block;
}
.bildbesk .vertikalreglage {
  width: 100%;
  position: absolute;
}

.snurrgrej {
  font-size: 3rem;
}

.pswp__bildtext {
  /*
  width: calc(100% - 32px);
  max-width: 400px;
  padding: 2px 8px;
  border-radius: 4px;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  */
  color: var(--farg-inverterad-text);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.4rem;
  border-radius: 0.2rem;
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: 0.8rem;
  font-family: var(--typsnitt-sans);
}
.pswp__bildtext:empty {
  display: none;
}

.pswp__counter {
  font-size: 0.8rem;
  font-family: var(--typsnitt-sans);
}

.knapprad {
  max-width: 18rem;
  display: flex;
  justify-content: space-between;
}
.knapprad button {
  font-size: 1.5rem;
}

.båtvalbesk {
  margin-left: 10px;
  font-size: 0.7rem;
  vertical-align: middle;
}

.platta {
  background-color: var(--farg-platta);
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
}
.platta:empty {
  display: none;
}

span.grå {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--farg-gra1);
}

div.linje {
  overflow-x: auto;
}

.bildarkivet > div {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--farg-gra3);
  /*
  > div {
    display: grid;
    grid-template-areas: "bild dim" "bild länk";

    > img {
      grid-area: bild;
    }
    > .area-dim {
      grid-area: dim;
    }
    > .area-länk {
      grid-area: länk;
    }
  } */
}
.bildarkivet > div img {
  width: 200px;
  margin-bottom: 0;
}
.bildarkivet > div a {
  display: block;
}
.bildarkivet > div .input-ram {
  margin-left: 0;
  margin-bottom: 0.5rem;
}
.bildarkivet > div textarea {
  height: 4rem;
}

.bildgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 20vw), 1fr));
  align-items: center;
  max-height: 50vh;
  overflow-y: auto;
  gap: 3px;
  background-color: var(--farg-gra4);
  padding: 3px;
}
.bildgrid > img {
  width: 100%;
}

.skapa-sida {
  margin-top: 1rem;
  box-sizing: border-box;
  border: solid 10px var(--farg-gra1);
  padding: 10px;
  width: fit-content;
  margin-inline: auto;
}
.skapa-sida > input,
.skapa-sida > label {
  display: block;
  margin-block-end: 0.2rem;
}
.skapa-sida > button {
  display: block;
}
.skapa-sida .sidfix .input-ram,
.skapa-sida .sidfix h4 {
  margin-left: 0;
}

.ajfrejm-div {
  margin-bottom: 1rem;
  position: relative;
  height: 0;
}
.ajfrejm-div.stor {
  max-height: calc(100vh - var(--hojd-fixmenyn));
}
.ajfrejm-div > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pdf-lista {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: var(--farg-gra4);
  line-height: 2rem;
}

.markera {
  background-color: var(--farg-markera);
  padding: 0.2rem;
}

.mosaik {
  display: flex;
  flex-wrap: wrap;
}
.mosaik img {
  margin-bottom: 0;
}
.mosaik.bildspel {
  overflow: hidden;
  display: grid;
  grid-template-areas: "bildspel";
}
.mosaik.bildspel > img {
  grid-area: bildspel;
  opacity: 0;
  transition: opacity 1s;
}

.sidfix > div {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.sidfix > div > div {
  white-space: nowrap;
}
.sidfix > div > input[type=text] {
  width: 11rem;
}
.sidfix input[type=number] {
  width: 2.1rem;
}
.sidfix select {
  width: 8rem;
}
.sidfix textarea {
  width: 200px;
  height: 1.2rem;
}
.sidfix textarea:focus {
  height: 5rem;
}
.sidfix .rubrik {
  margin-top: 2rem;
}
.sidfix .rubrik .input-ram {
  font-size: 1.2rem;
}
.sidfix .rubrik label {
  margin-top: 2rem;
}

.red button {
  padding: 0.1rem 0.2rem;
  line-height: 1;
  margin: 0 0.2rem;
  font-size: 0.8rem;
}

.länkredrad {
  display: flex;
  align-items: end;
}
.länkredrad div.input-ram {
  margin-left: 1rem;
}

span.färgruta {
  display: inline-block;
  width: 50px;
  height: 27px;
  vertical-align: bottom;
}

.skip-nav-link {
  position: absolute;
  z-index: 5;
  top: 0.4rem;
  left: 4rem;
  font-family: var(--typsnitt-sans);
  transform: translateY(-120%);
}
.skip-nav-link:focus {
  transform: translateY(0);
  background-color: var(--farg-gra3);
  outline-color: var(--farg-gra3);
}

.kollrutor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.kollrutor > div {
  display: flex;
}
.kollrutor img,
.kollrutor video {
  margin-bottom: 0;
}

.fakturakoll {
  max-height: 20vh;
  overflow-y: auto;
}

.skapa-uppgift {
  display: flex;
  flex-direction: column;
}
.skapa-uppgift label {
  margin-top: 1rem;
}

.båtlista-utökad {
  margin-inline: 1rem;
  overflow-x: auto;
}
.båtlista-utökad td:not(:first-child) {
  white-space: nowrap;
}
.båtlista-utökad tr:nth-child(2n) td {
  background-color: var(--farg-gra4);
}

body > .båtlista {
  max-height: none;
}

.båtlista {
  max-height: 80vh;
  margin-top: 2rem;
  margin-inline: auto;
  width: fit-content;
  overflow-x: auto;
  white-space: nowrap;
}
.båtlista tr:not(.rubrikrad):not(:has(td.radrubrik)):hover {
  outline: solid 1px var(--farg-text);
  outline-offset: 1px;
}
.båtlista tr:first-child {
  font-weight: 500;
}
.båtlista tr:nth-child(2n) td:not(.radrubrik) {
  background-color: var(--farg-gra4);
}
.båtlista td {
  padding-right: 0.5rem;
}
.båtlista td.radrubrik {
  padding-top: 1rem;
  font-weight: 700;
}
.båtlista table {
  margin-left: 1rem;
}

.uppgifter {
  overflow-x: auto;
}
.uppgifter a {
  white-space: nowrap;
}

.extrameny {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: var(--typsnitt-sans);
  padding-bottom: 1rem;
  background-color: var(--farg-gra1);
  line-height: 2rem;
  margin-bottom: -2rem;
  margin-top: 2rem;
}
.extrameny h4 {
  padding-left: 0.6rem;
  box-sizing: border-box;
  background-color: var(--farg-bakgrund);
  margin-top: 1rem;
  margin-left: var(--marginal);
  width: var(--tb);
}
.extrameny a {
  margin-left: var(--marginal);
  width: var(--tb);
  color: var(--farg-inverterad-text);
}
.extrameny a:hover, .extrameny a:focus {
  background-color: var(--farg-gra2);
  outline-color: var(--farg-gra2);
}
.extrameny div {
  margin-left: var(--marginal);
  width: var(--tb);
  color: var(--farg-inverterad-text);
  font-style: italic;
}

.skrolletiketter {
  height: 1.5rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.skrolletiketter > div {
  scroll-snap-align: start;
}

.skrollgrej2 {
  height: 3rem;
  overflow-y: auto;
  margin-bottom: 2rem;
}
.skrollgrej2 .tabell {
  margin-top: 0;
}

.intresse {
  font-weight: 500;
  font-style: italic;
  text-shadow: 2px 2px yellow;
}

table.anläggningsregister td {
  padding: 0.1rem 0.3rem;
  border: solid 1px transparent;
  white-space: nowrap;
}
table.anläggningsregister td[contenteditable]:hover, table.anläggningsregister td[contenteditable]:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--farg-text);
}
table.anläggningsregister tr.rubrik td {
  font-weight: bold;
  padding-top: 1rem;
  word-break: initial;
}
table.anläggningsregister tr:nth-child(2n):not(.rubrik) td {
  background-color: var(--farg-gra4);
}
table.anläggningsregister tr.markerad td:first-child a {
  border-left: 10px solid;
  padding-left: 2px;
}

tr.rubrikrad td {
  top: 0;
  position: sticky;
  background-color: var(--farg-bakgrund);
  vertical-align: bottom;
  border-bottom: solid 1px var(--farg-text);
}

.dubblettkoll {
  background-color: var(--farg-gra1);
  color: var(--farg-inverterad-text);
  font-family: "WorkSans";
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  padding-left: 0.4rem;
}

dialog {
  width: auto;
  max-width: 50rem;
  color: var(--farg-text);
  background-color: var(--farg-bakgrund);
  transition: opacity 1s;
}
dialog button.stängkryss {
  position: absolute;
  top: 0;
  right: 0.2rem;
  line-height: 1.6rem;
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
}
dialog.släck {
  opacity: 0;
}
dialog.släck::backdrop {
  background-color: transparent;
  transition: background-color 1s;
}

.sök button:first-of-type {
  margin-left: 1rem;
}
.sök label {
  display: block;
}

.sökträfflänk {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
}

.sökträfflänk2 {
  display: block;
}

.tidredigering {
  display: flex;
  gap: min(3vw, 1rem);
  font-size: min(3vw, 1.0625rem);
}
.tidredigering input {
  width: 2.5rem;
  margin-left: 0.2rem;
}

.dragdrop-över {
  background-color: var(--farg-gra3);
  outline: solid 10px var(--farg-gra3);
  border-radius: 3px;
}

div.tabortlista > button {
  margin-block: 0.2rem;
  padding: 0 0.3rem;
  line-height: 1.2;
  margin-right: 0.5rem;
}

div.familjered {
  display: flex;
  gap: 1rem;
}
div.familjered > div {
  display: flex;
  flex-direction: column;
}
div.familjered button {
  margin-block: 0.1rem;
  line-height: 1.5;
}

body.kvitto {
  font-family: var(--typsnitt-sans);
  line-height: 1.3;
  display: grid;
  grid-template-areas: "logga rubrik" "namn ." ". referens" "innehåll innehåll";
  grid-template-columns: 50% auto;
  grid-template-rows: min-content min-content min-content auto;
  min-height: calc(100dvh - 4rem);
  margin-block: 2rem;
  margin-left: 4rem;
  margin-right: 2rem;
}
body.kvitto h1 {
  margin: 0;
  font-size: 1.5rem;
}
body.kvitto .logga {
  grid-area: logga;
  background-color: var(--farg-gra2);
  width: 80%;
}
body.kvitto .rubrik {
  grid-area: rubrik;
  line-height: 1.5;
}
body.kvitto .namn {
  grid-area: namn;
  margin-top: 2rem;
  line-height: 1.5;
}
body.kvitto .namn > :first-child {
  font-size: 1.2rem;
}
body.kvitto .referens {
  grid-area: referens;
}
body.kvitto .innehåll {
  grid-area: innehåll;
}
body.kvitto table {
  border-collapse: collapse;
  margin-top: 1rem;
}
body.kvitto td {
  vertical-align: top;
  padding: 0.3rem 0.5rem;
}
body.kvitto td:last-child {
  text-align: right;
}
body.kvitto tr.linjer > td {
  border-top: solid 1px var(--farg-text);
  border-bottom: solid 1px var(--farg-text);
}
body.kvitto tr:last-child {
  font-size: 0.8rem;
}
body.kvitto tr.maxhöjd {
  height: 100%;
}

.tabellval form {
  line-height: 2;
  display: flex;
}
.tabellval form > span {
  font-weight: bold;
}
.tabellval form > span::after {
  content: ":";
}

.bred-input {
  width: 100%;
}

.färgtema {
  line-height: 2;
}

[titel] {
  position: relative;
}
[titel]:hover:after {
  content: attr(titel);
  position: absolute;
  z-index: 1;
  top: 1rem;
  background-color: var(--farg-platta);
  margin: 0.1rem;
  padding: 0.3rem 0.7rem;
  line-height: 1.4;
  font-family: var(--typsnitt-sans);
  font-size: 0.9rem;
  font-weight: normal;
}

.dagbock {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.2rem;
}

.extern-märkning {
  background-color: var(--farg-gra1);
  color: var(--farg-inverterad-text);
  font-family: var(--typsnitt-sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: -2rem;
  letter-spacing: 0.1rem;
}

button.liten-knapp {
  line-height: 1;
  margin-block: 0;
}

.vmark {
  outline: var(--farg-bakgrund) 2px solid;
  box-shadow: 0 0 0 3px var(--farg-text);
}

.version {
  position: absolute;
  z-index: 2;
  background-color: var(--farg-gra3);
  font-family: var(--typsnitt-sans);
  font-size: 0.8rem;
  padding-inline: 0.3rem;
}
.version.h {
  inset-block-start: anchor(start);
  inset-inline-start: anchor(end);
  margin-left: 3px;
  margin-top: -3px;
}
.version.u {
  inset-block-end: anchor(start);
  inset-inline-end: anchor(end);
}
.version > div {
  display: none;
}
.version:hover {
  background-color: var(--farg-bakgrund);
  border: solid 1px var(--farg-text);
  z-index: 3;
}
.version:hover > div {
  display: block;
  line-height: 2rem;
  margin-inline: -0.3rem;
  padding-left: 0.3rem;
}
.version:hover > div:hover {
  background-color: var(--farg-gra3);
}

.versionsvisning {
  position: absolute;
  background-color: var(--farg-bakgrund);
  z-index: 3;
}

.versionsrubrik {
  background-color: var(--farg-gra1);
  color: var(--farg-inverterad-text);
  font-family: var(--typsnitt-sans);
  margin-top: 20px;
  text-align: center;
  font-weight: 500;
}
.versionsrubrik button {
  margin-left: 2rem;
}

.felruta {
  white-space: pre;
  font-family: monospace;
  position: fixed;
  top: 12rem;
  padding: 2rem;
  background-color: white;
  border: solid 2px black;
  margin: 1rem;
  overflow: auto;
  max-width: 90vw;
}

div.testrutor {
  margin: 10vh auto;
  width: fit-content;
}
div.testrutor > div {
  white-space: nowrap;
}
div.testrutor > div > div {
  display: inline-block;
  width: 18vw;
  height: 7vh;
}

:root {
  --animeringstid: 0.1s;
}

.kurva {
  --textfärg: black;
  transform: scale(1, -1);
  max-width: 100%;
  border: solid 1px var(--textfärg);
  transition: var(--animeringstid);
}

div.aw-slajder {
  margin-bottom: 0.2rem;
}

/*
@use "../awts/scss/fargrutor";

fargrutor {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
*/
canvas {
  width: 100%;
}

line {
  stroke: black;
  stroke-width: 0.002px;
}

.netatmotabell {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.samling {
  display: flex;
  flex-wrap: wrap;
}
.samling:focus .vald {
  outline: solid 4px yellow;
  z-index: 1;
}
.samling img,
.samling video {
  margin-bottom: 0;
}

.omsl-bild {
  position: relative;
}
.omsl-bild div {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  font-family: var(--typsnitt-sans);
  font-size: 0.85rem;
  padding-inline: 0.25rem;
}
.omsl-bild button {
  position: absolute;
  z-index: 1;
  top: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
  border: 0;
}

.mellanrum .omsl-bild {
  margin-bottom: 1%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}

button {
  user-select: none;
}

.reglage {
  justify-content: center;
  margin-inline: 1rem;
  margin-top: 1rem;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.reglage form.radio {
  border: solid 1px black;
  width: fit-content;
  padding: 0.3rem 1rem 0.3rem 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
.reglage form.radio label {
  line-height: 2;
}
.reglage label.kryssruta {
  display: block;
  width: fit-content;
}
.reglage form,
.reglage label.kryssruta {
  margin-block: 0.8rem;
}
.reglage label[for^=sel] {
  margin-block: 0.3rem;
}
.reglage button {
  display: block;
}

.karta-och-bild {
  display: flex;
  align-items: start;
}
.karta-och-bild > img {
  max-width: 50vw;
  max-height: 70vh;
}

.bildredigeringen {
  display: grid;
  grid-template-areas: "bilden kurvan" "bilden reglagen" "bilden etiketter" "linkorr linkorr" "bockar bockar" "knappar knappar" "inteklart inteklart";
  grid-template-columns: 80% minmax(0, 1fr);
  gap: 1rem;
  margin-right: 1%;
  align-items: end;
}
.bildredigeringen.dold {
  display: none;
}

.åttioprocent {
  width: 80%;
}

.br-bilden {
  grid-area: bilden;
  background-color: var(--farg-bakgrund);
  height: 100%;
}
.br-bilden.överst {
  z-index: 1;
}
.br-bilden.underst {
  z-index: -1;
}

canvas.kurva,
div.histogram {
  grid-area: kurvan;
}

.br-reglagen {
  grid-area: reglagen;
}

.etiketter {
  grid-area: etiketter;
}
.etiketter div:before {
  content: attr(namn);
}
.etiketter div:after {
  content: attr(värde);
}

.br-linkorr {
  grid-area: linkorr;
}

.br-bockar {
  grid-area: bockar;
  display: flex;
  gap: 1rem;
}

.br-knappar {
  grid-area: knappar;
}

.br-inteklart {
  grid-area: inteklart;
}

span.färgruta {
  width: 1.5rem;
  display: inline-block;
  margin-inline: 0.5rem;
}

button.vald {
  filter: invert(1);
}

.pannellum {
  position: fixed;
  z-index: 2;
  left: 0;
  top: var(--hojd-fixmenyn);
  height: calc(100vh - var(--hojd-fixmenyn));
  width: 100%;
}

.bildvisningen-förstorad {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 4;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  grid-template-rows: 100%;
  background-color: black;
  display: grid;
  overflow: hidden;
  grid-template-areas: "bilden";
}