#smiley {
  display: none;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/inter.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  background-color: var(--bakgrunnsFarge);
  --button: #5c6672;

  --topbarBakgrunn: var(--topbarBakgrunn);

  --buttonLaster: #b6b;
  --buttonLagret: green;
  --buttonFeil: red;
  --fontFamily: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --currentFontSize: 100;
  --fontSize: 0.85;
  --fontLineHeight: 1.6;
  --avbryt: rgb(192, 91, 91);
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --card-border-radius: 12px;
  --modern-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.08);

  --nf-input-size: 0.9rem;
  --nf-input-font-size: calc(var(--nf-input-size) * 0.875);
  --nf-small-font-size: calc(var(--nf-input-size) * 0.875);
  --nf-input-font-family: var(--fontFamily);
  --nf-label-font-family: var(--fontFamily);
  --nf-input-color: #20242f;
  --nf-input-border-radius: 0.25rem;
  --nf-input-placeholder-color: #000;
  --nf-input-border-width: 1px;
  --nf-input-border-style: solid;
  --nf-input-border-bottom-width: 2px;
  --nf-invalid-input-border-color: var(--nf-input-border-color);
  --nf-invalid-input-background-color: var(--nf-input-background-color);
  --nf-invalid-input-color: var(--nf-input-color);
  --nf-valid-input-border-color: var(--nf-input-border-color);
  --nf-valid-input-background-color: var(--nf-input-background-color);
  --nf-valid-input-color: inherit;
  --nf-invalid-input-border-bottom-color: red;
  --nf-valid-input-border-bottom-color: green;
  --nf-label-font-size: var(--nf-small-font-size);
  --nf-label-color: #374151;
  --nf-label-font-weight: 600;

  --switch-orb-size: var(--nf-input-size);
  --switch-orb-offset: calc(var(--nf-input-border-width) * 2);
  --switch-width: calc(var(--nf-input-size) * 2.5);
  --switch-height: calc(var(--nf-input-size) * 1.25 + var(--switch-orb-offset));

  --boxShadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px var(--tekst);
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--tekst);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#kopiert {
  display: none;
  position: fixed;
  width: auto;
  text-wrap-mode: nowrap;
  height: auto;
  border: 1px solid black;
  background-color: var(--bakgrunn);
  color: var(--tekst);
  padding: 5px;
  border-radius: 7px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-window-dragging: no-drag;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  background-color: var(--bakgrunn);
  font-family: var(--fontFamily);
  font-size: calc(var(--currentFontSize) * 0.01 * var(--fontSize) * 1rem);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  padding: 0px;
  overflow: scroll;
  min-height: 100vh;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
#modal-content {
  max-width: 100%;
}
#modal-content #varerHolder {
  width: 60%;
}
#logotekst {
  font-weight: 800;
  font-size: calc(var(--currentFontSize) * 0.01 * 2rem);
}
#content {
  height: calc(100vh - 120px);
  background-color: var(--bakgrunn);
  flex: 1;
  height: auto;
  min-height: calc(100vh - 120px);
  position: relative;

  width: 100%;
  height: auto;

  color: var(--tekst);
}
::placeholder {
  text-transform: none;
}
.varselInnhold.d {
  opacity: 0.5;
  pointer-events: none;
}
.clear {
  clear: both;
  display: block;
}
.varer {
  /* background-color: var(--bakgrunn) !important; */
  color: var(--tekst) !important;
  border-collapse: collapse;
  width: 100%;
  max-width: 648px;
  overflow: hidden;
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
  font-size: calc(var(--currentFontSize) * 0.01 * 0.8rem);
}
.varer h4 {
  font-size: calc(var(--currentFontSize) * 0.01 * 0.9rem);
}
.varer th {
  font-weight: 700;
  padding: 7px 7px 8px;
  text-align: left;
  line-height: 1.3em;
  font-weight: 600;
}
.varer td {
  padding: 7px;
  vertical-align: top;
}
.varerA {
  width: 100%;
  text-align: center;
  height: auto;
  overflow-x: scroll;
  overflow: hidden;
}
.varerA th {
  font-weight: bold;
  padding: 7px 7px 8px;
  line-height: 1.3em;
  /* background: var(--bakgrunnsFarge); */
  font-weight: 600;
  text-align: center;
}
.varerA tr {
  /* border-bottom: 1px solid #d4d4d4; */
  border-bottom: none;
}
.varerA tr:first {
  border-bottom: none;
}
.varerA td {
  padding: 4px 7px 2px;
  vertical-align: top;
}

.varerC {
  min-width: 350px;
  max-width: 350px;
  overflow: hidden;
  overflow: hidden;
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
}
.varerC th {
  font-weight: bold;
  padding: 7px 7px 8px;
  text-align: left;
  line-height: 1.3em;
  /* background: var(--bakgrunnsFarge); */
  font-weight: 600;
}
.varerC td {
  padding: 4px 7px 2px;
  vertical-align: top;
}
.varerC tr {
  border-bottom: 1px inset var(--hoverLinje);
}
.varerC tr:last-child {
  border-bottom: none;
}
.collapsible-wrapper {
  display: none;
  padding: 0;

  max-width: 657px;
}
.collapsible-wrapper.expanded {
  max-height: 100%;
  display: block;
  padding: 0;
  border-radius: 4px;
}
.haster {
  outline-width: 1px;
  outline-offset: 0;
  outline-color: #fdc4c4;
  outline-style: solid;
  animation: animateOutline 1s ease infinite;
}
@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }
  10% {
    outline-color: rgba(0, 130, 206, 0.75);
  }
  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(0, 130, 206, 0);
  }
  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(102, 102, 102, 0);
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.25rem;
  min-width: 150px;

  font-size: calc(var(--currentFontSize) * 0.01 * 0.9rem);
  font-weight: 400;
  font-family: var(--fontFamily);

  background: var(--buttonKnapp);
  color: var(--buttonTekst);
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 transparent;

  cursor: pointer;
  user-select: none;
  transition: all 0.1s ease-in-out;

  gap: 0.6rem;
  margin: 0.3rem;
  position: relative;
  overflow: hidden;
}

.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transition: all 0.5s ease-in-out;
  z-index: -1;
}

.button:hover,
.button:active {
  box-shadow: 0 6px 15px color-mix(in srgb, var(--buttonKnapp) 30%, transparent);
}
.button.avbryt:hover {
  box-shadow: 0 6px 15px color-mix(in srgb, var(--avbryt) 30%, transparent);
}

.button:hover:before {
  left: 100%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--buttonKnapp) 30%, transparent);
  outline: none;
}
.button.avbryt:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--avbryt) 30%, transparent);
}

.button:focus {
  outline: none;
  box-shadow: 0 6px 15px color-mix(in srgb, var(--buttonKnapp) 30%, transparent);
}
.button.avbryt:focus {
  box-shadow: 0 6px 15px color-mix(in srgb, var(--avbryt) 30%, transparent);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--buttonKnapp);
  transform: none !important;
}

.button.avbryt {
  background: linear-gradient(
    135deg,
    var(--avbryt) 0%,
    color-mix(in srgb, var(--avbryt) 90%, white) 100%
  );
}

.button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.button--loading {
  opacity: 0.7;
  cursor: wait;
}
/* .ordrelinje {
  background-color: var(--bakgrunn);
  border-bottom: none;
  position: relative;
  padding-bottom: 1px;
}

.ordrelinje::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #d4d4d4;
}
.ordrelinje:hover {
  background-color: var(--hoverLinje);
  color: var(--tekstLinje);
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
} */
.ordrelinje.valgtLinje {
  background-color: var(--valgtLinje);
  color: var(--tekstLinje);
}
* {
  padding: 0;
  margin: 0 auto;
  border: none;
  outline: none;
}
*,
:after,
:before {
  box-sizing: inherit;
}
html {
  background-color: var(--bakgrunnsFarge);
  width: 100%;
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
.telefon {
  margin: auto;
  background-color: black;
  padding: 10px 10px 20px;
  width: 230px;
  height: 400px;
  box-shadow: 0 0 20px #e2e2e2;
  border-radius: 30px;
}
.skjerm {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  border-radius: 30px;
  overflow-y: hidden;
}
.telefonB {
  width: 90px;
  height: 15px;
  background: black;
  position: absolute;
  margin: 0 65px;
  border-radius: 0 0 20px 20px;
}
.taler {
  width: 55px;
  height: 4px;
  background: #d2d2d2;
  display: block;
  margin: auto;
  margin-top: 5px;
  border-radius: 10px;
}
.melding {
  font-size: calc(var(--currentFontSize) * 0.01 * 0.9rem);
  height: 90%;
  margin-bottom: 5px;
  margin-top: 30px;
  padding: 10px;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
#infoRow:hover {
  background-color: var(--bakgrunn);
  cursor: auto;
}
.page-btn {
  color: #fff;
  background-color: #5693ee;
  padding: 5px;
  margin: 3px;
  min-width: 35px;
  cursor: pointer;
}
.page-btn.active {
  background-color: #2968c7;
  font-weight: bold;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
footer,
#topbar {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#loginFelt {
  float: right;
  width: 100%;
  padding: 15px;
  text-align: right;
}

.error-dialog {
  padding: 24px;
  text-align: center;
}

.error-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.error-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.button.primary {
  background: var(--buttonKnapp);
}

.button.secondary {
  background: var(--button);
}
.sms-quick-links {
  margin: 10px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

.quick-link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ingen-outline,
.ingen-outline:focus,
.button:focus,
.button:active,
#ny_ordre,
img,
dialog.modal {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}
* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.sms-quick-btn {
  padding: 8px 16px;
  border: var(--inputBorder);
  border-radius: 20px;
  background-color: var(--menyHoverTekst);
  color: var(--menyHover);
  cursor: pointer;
  transition: all 0.2s;
}

.sms-quick-btn:hover {
  background: var(--menyHover);
  color: var(--menyHoverTekst);
  transform: translateY(-1px);
}

.add-quick-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px dashed #ccc;
  border-radius: 6px;
  background: white;
  color: black;
  cursor: pointer;
}

.add-quick-link:hover {
  border-color: #999;
  color: #333;
}

.sortable-list {
  margin: 20px;
}

.sms-quick-btn.ingen-outline.selected {
  background-color: var(--menyHover);
  color: var(--menyHoverTekst);
  border-color: #666;
}

.quick-messages-dialog {
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
  padding: 10px;
}

.quick-message-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: var(--inputBakgrunn);
  border-radius: 8px;
  margin-bottom: 15px;
}

.drag-handle {
  align-self: center;
  cursor: move;
  padding: 5px;
  color: #666;
}

.title-input {
  width: 100% !important;
  margin-bottom: 5px !important;
  min-height: 35px;
}

.message-input {
  width: 100% !important;
  min-height: 75px !important;
  padding: 8px !important;
  margin-bottom: 5px;
  resize: vertical;
  text-align: center !important;
}

.delete-btn {
  align-self: flex-end;
  padding: 8px;
  background: none;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
#smsInnstillingerLagre {
  margin-left: 0;
}
#smsInnstillingerTilbake {
  margin-top: -39px;
  margin-left: 220px;
}
#smsInnstillingerLogg {
  margin-top: 20px;
  margin-left: 0px;
}
.counterB {
  text-align: right;
  float: right;
}
.meny .counter {
  font-weight: 600;
}
.meny:hover {
  transform: translateY(-1px);
}
.meny.valgt {
  transform: translateY(-1px);
}

.meny.valgt {
  box-shadow: var(--shadow);
}

/* .ordrelinje:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transform: translateX(-1px);
  cursor: pointer;
  /* border-radius: 4px;
} */
#sokivarelinjertekst {
  margin-left: 5px;
}
.compsettings-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 20px;
  padding-top: 0px;
}

.compform-container {
  flex: 1;
}

.compimage-container {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compimage-container img {
  max-width: 100%;
  height: auto;
}
h1 {
  padding: 20px;
  padding-top: 25px;
  text-align: center;
  font-size: calc(var(--currentFontSize) * 0.01 * 2.2rem);
  font-weight: 600;
  letter-spacing: 0.5px;
}
h4 {
  font-size: calc(var(--currentFontSize) * 0.01 * 1.15rem);
}
p {
  margin: 0 0 18px;
}
img {
  border: none;
}
.input {
  height: 35px;
}
#wrapper {
  width: min(100%, 1400px);
  margin: 0px auto 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bakgrunn);
  color: var(--tekst);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow-y: visible;
}

#topbar {
  width: min(100%, 1400px) !important;
  min-width: auto !important;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--topbarBakgrunn);
  height: 85px;
  position: fixed;
  top: 0;
  z-index: 99999999999;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#header {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 85px;
  padding-top: 0px;
}
#logo {
  width: 98%;
}
#logo #a {
  float: left;
  height: 45px;
  width: 260px;
  margin-top: 17px;
  margin-left: -250px;
}
#logo #c {
  float: left;
  margin-left: 30px;
  margin-top: 6px;
}
#logoen {
  margin-left: 19px;
}
#menyen {
  position: absolute;
  margin-left: 230px;
  top: 10px;
  text-align: center;
}
#tilbake {
  position: absolute;
  top: 40px;
  margin-left: 228px;
}
#meny_tilbake {
  cursor: pointer;
  margin-left: 18px;
  margin-top: 6px;
  float: left;
  width: 130px;
  background-color: var(--menyVanlig);
  border: 1px dashed #aeaeae;
  text-decoration: none;
  padding: 3px;
  color: gray;
  text-align: center;
  border-radius: 5px;
  margin-right: 7px;
}
.meny {
  float: left;
  width: 130px;
  background-color: var(--menyVanlig);
  color: var(--menyVanligTekst);
  border: 1px solid #aeaeae;
  font-weight: 400;
  padding: 3px;
  margin: 2px;
  margin-left: 5px;
  text-align: center;
  border-radius: 5px;
  font-size: calc(var(--currentFontSize) * 0.01 * 1rem);
}
.meny:hover {
  background-color: var(--menyHover);
  color: var(--menyHoverTekst);
}
.meny.valgt {
  background-color: var(--menyValgt);
  color: var(--menyValgtTekst);
}
#meny_varer {
  width: 1400px;
  position: absolute;
  top: 0px;
}
#meny_varer .mmeny {
  float: right;
  width: 150px;
  background-color: #f0f0f0;
  border: 1px solid #aeaeae;
  font-weight: bold;
  padding: 3px;
  margin: 2px;
  margin-left: 5px;
  border-radius: 5px;
  text-align: center;
  margin-right: 10px;
}
.kalender_bestilling {
  position: absolute;
  top: 10px;
  right: 30px;
}
.meldinger_innmelding {
  position: absolute;
  top: 40px;
  right: 30px;
}
#holder {
  background-color: var(--bakgrunn);
  width: 100%;
  min-height: 100%;
}

#sokefelt {
  display: none;
  width: 100%;
  background-color: var(--bakgrunn);
}
.varselToggleTop {
  margin-left: 40px !important;
}
footer {
  color: var(--tekst);
  background-color: var(--bakgrunn);
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  min-height: 30px;
}

footer > div {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  margin: 0;
}
footer a,
footer a:visited,
footer a:active {
  text-decoration: none;
  color: var(--tekst);
}

footer a:hover {
  text-decoration: underline;
  color: var(--tekst);
}

label {
  margin-left: 5px;
  font-weight: bold;
  padding: 1px;
}
#ny_ordre {
  width: 100%;
}
#ny_ordre_venstre {
  clear: none;
  float: left;
  width: 300px;
}
.ny_ordre_venstre input {
  margin-top: 5px;
  margin-bottom: 5px;
}
#ny_ordre_venstre .input {
  width: 240px;
  height: 30px;
}
#ny_ordre_venstre select {
  width: 238px;
}
#ny_ordre_hoyre {
  float: left;
  margin-left: 0px;
  width: 78%;
  padding-top: 2px;
}
#info_topp {
  padding: 5px;
  margin: 0px;
  width: 100%;
  font-weight: bold;
}
#ordrestatus {
  display: none;
}
#innstillinger {
  width: 100%;
  border: 1px solid #336699;
}
.fss {
  text-align: center;
}
#ordre_zoom,
#ordre_zoom2,
#ordre_zoom3 {
  float: right;
  position: fixed;
  top: 170px;
  margin-left: 730px;
  overflow: hidden;
  width: 650px;
}
#ordre_zoom3 {
  margin-left: 700px;
}
#ordre_zoom .hoyre {
  width: 100%;
  overflow: hidden;
}
#ordre_zoom2 .hoyre {
  width: 100%;
  overflow: hidden;
}
#ordre_zoom3 .hoyre {
  width: 100%;
  overflow: hidden;
}
#alt2 {
  border-radius: 3px;
  min-width: 525px;
  padding: 35px;
}
.hash {
  font-weight: bold;
  color: red;
}
#sokefelt {
  min-height: 400px;
}
.landingspace {
  float: left;
  width: 1000px;
  height: 200px;
}
#data-wrapper {
  padding-left: 30px;
}

#ny_ordre_hoyre .nolAntallR {
  width: 8%;
  margin-right: 5px;
}
#ny_ordre_hoyre .nolAlfaR {
  width: 8%;
  margin-right: 5px;
}
#ny_ordre_hoyre .nolArtR {
  width: 34%;
  margin-right: 5px;
}
#ny_ordre_hoyre .nolLevR {
  width: 34%;
}
#logotekst {
  margin-left: 15px;
  vertical-align: -10px;
}
#nyLogoTekst:hover {
  text-decoration: none !important;
}

.varselInnhold {
  margin-left: 40px;
}
.varselInnhold.d {
  opacity: 0.5;
  pointer-events: none;
}
.ordreHistorikk {
  clear: both;
  height: 24px;
}
.innstillingKnapp {
  width: 250px;
}
#data-wrapper {
  margin-left: 0px;
  width: 700px;
  max-width: 700px;
}
.data-container {
  background-color: var(--vanligLinje);
  border-collapse: collapse;
  padding-top: 5px;
  margin-left: 10px;
  overflow: hidden;
}
.data-row {
  max-width: 560px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.data-row:first-child {
  border-bottom: none;
}
.data-row:last-child {
  border-bottom: none;
}

.niceRow {
  background-color: var(--vanligLinje);
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px inset #d4d4d4;
  overflow: hidden;
  border-radius: var(--card-border-radius);
  margin-bottom: 12px;
  border-left: 3px solid transparent;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.niceRow:hover {
  background-color: var(--hoverLinje);
  color: var(--tekstLinje);
  cursor: pointer;
  border-left: 3px solid var(--buttonKnapp);
  box-shadow: 0 2px 8px rgba(128, 128, 128, 0.15);
  position: relative;
  z-index: 2;
}

.data-row.valgtLinje {
  background-color: var(--valgtLinje);
}
.data-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 450px;
  padding: 6px;
}
.tableCaption {
  text-align: left;
  font-size: calc(var(--currentFontSize) * 0.01 * 1.7rem);
  padding: 15px 0px 0px 0px;
  cursor: pointer;
  width: 660px;
  max-width: 660px;
}
.load-more-container {
  font-size: calc(var(--currentFontSize) * 0.01 * 1.3rem);
}
.data-containerB {
  background-color: var(--vanligLinje);
  border-collapse: collapse;
  width: 650px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  overflow: hidden;
}
/* .data-rowB {
  background-color: var(--vanligLinje);
  color: var(--tekstLinje);
  padding: 15px;
  vertical-align: top;
  border-bottom: 1px inset #d4d4d4;
}
.data-rowB:last-child {
  border: none;
}
.data-rowB:hover {
  background-color: var(--hoverLinje);
  transform: translateY(-1px);
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
} */
.data-cellB {
  padding: 4px;
}
#seordre_venstre {
  float: left;
  width: 190px;
  padding-left: 20px;
  word-wrap: break-word;
  overflow: auto;
  margin-left: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#seordre_venstre span.os {
  margin-bottom: 6px;
  display: block;
  position: relative;
}

#seordre_venstre span.os:hover,
.varerA .artnrCopy:hover {
  cursor: pointer;
}
#seordre_venstre span.os:active,
.artnrCopy:active {
  transform: translateY(1px);
}

#seordre_venstre span.os:hover :first-child::after,
.artnrCopy:hover::after {
  content: "content_copy";
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-size: 0.9em;
  width: 0;
  color: var(--tekst);
  transition: color 0.5s ease-in-out;
  transform: translateX(4px);
}

#seordre_venstre span.os.kopiertOK :first-child::after,
.artnrCopy.kopiertOK::after,
.ordrelinje.kopiertOK .artikkelnummer::after {
  content: "content_copy";
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-size: 0.9em;
  width: 0;
  color: var(--buttonKnapp);
  transform: translateX(4px);
}
.artnrCopy.kopiertOK::after,
.ordrelinje.kopiertOK .artikkelnummer::after,
.artnrCopy:hover::after {
  display: inline-block;
}
#seordre_venstre span.os.kopiertOK :first-child::after,
#seordre_venstre span.os:hover :first-child::after {
  margin-left: 2px;
}

#seordre_venstre .utleveresForm {
  text-align: center;
  margin-left: -25px;
  width: 100%;
}

#infodel {
  width: 30%;
  min-height: 150px;
  float: left;
  padding-right: 25px;
}
#submit-container {
  width: 100%;
}

.varerA,
.varerC {
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.varerA thead,
.varerC thead {
  top: 0;
  z-index: 10;
}
.varerA thead th,
.varerC thead th {
  text-align: center;
}

.varerA tr,
.varerC tr {
  padding: 5px;
  margin: 5px;
  text-align: center;
}
.infoBar {
  /* border: 1px solid var(--hoverLinje); */
  font-weight: 600;
  font-size: calc(var(--currentFontSize) * 1.2);
  color: var(--tekst);
  padding: 4px 16px;
  text-align: center;
  vertical-align: middle;
}

#varerHolder {
  float: left;
  width: 750px;
  padding-right: 20px;
}
#utlevertKnapp {
  margin-left: 0px;
}
#redigerlev_hoved {
  float: left;
  margin-left: 40px;
}
#rediger_lev_felt {
  display: none;
  float: left;
  margin-top: 70px;
  margin-left: -40px;
  width: 200px;
}
#rediger_lev_felt > input {
  width: 100%;
}
#rediger_lev_felt2 {
  float: left;
  margin-top: 60px;
  margin-left: 10px;
  display: none;
}
#rediger_lev_knapper {
  position: absolute;
  display: block;
  top: 570px;
}
#innmeldingprogrammet {
  margin-left: 40px;
  float: left;
}
#bestillingsprogrammet {
  margin-left: 40px;
  float: left;
}
#loginform {
  float: right;
  position: absolute;
  margin-top: -62px;
  margin-left: 600px;
}
#avtaler_kalender {
  width: 100% !important;
  float: left !important;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#ny_ny {
  float: right !important;
  width: 40% !important;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#avtaleliste {
  width: 100% !important;
  float: left !important;
  clear: right;
}
#ctrl_piltaster {
  display: none !important;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tips-container {
  display: block !important;
}
@media (min-width: 0px) and (max-width: 380px) {
  #helesiden,
  #content,
  #modal,
  footer,
  #regContainer {
    display: none;
  }
  #smiley {
    padding: 5px;
    display: block !important;
  }
}

#helesiden {
  background-color: var(--bakgrunnsFarge);
  color: var(--tekst);
  height: 100%;
}
.modal a {
  color: var(--tekst);
}

#sokivarelinjertekst a {
  color: var(--tekst);
}
input[type="text"],
input[type="text"]:required,
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="time"],
input[type="datetime-local"],
input[type="date"],
input[type="password"],
textarea,
select {
  background-color: var(--inputBakgrunn);
  color: var(--inputTekst) !important;
  border: 1px solid var(--nf-input-border-color);
  font-family: var(--fontFamily);

  font-size: calc(var(--currentFontSize) * 0.01 * 0.8rem);
  border-bottom-width: var(--nf-input-border-width);
  box-shadow: none;
  text-align: center;
  border-radius: var(--nf-input-border-radius);

  height: 30px;
  padding: 1px;
  line-height: normal;
  transition: all 0.15s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  --icon-padding: calc(var(--nf-input-size) * 2.25);
  --icon-background-offset: calc(var(--nf-input-size) * 0.75);
}
input[type="checkbox"] {
  border: 1px solid var(--nf-input-border-color) !important;
  font-family: var(--fontFamily);

  font-size: calc(var(--currentFontSize) * 0.01 * 1rem);
  border-bottom-width: var(--nf-input-border-width);
  box-shadow: none;
  text-align: center;
  border-radius: var(--nf-input-border-radius);

  height: 30px;
  padding: 1px;
  line-height: normal;
  transition: all 0.15s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  --icon-padding: calc(var(--nf-input-size) * 2.25);
  --icon-background-offset: calc(var(--nf-input-size) * 0.75);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--buttonKnapp);
  box-shadow: 0 0 0 4px rgba(86, 147, 238, 0.1);
}
option {
  text-align: center;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: var(--calendar-icon-filter);
  background-color: transparent;
  cursor: pointer;
}

:root {
  --calendar-icon-filter: invert(0.5) sepia(0) saturate(100%) hue-rotate(0deg);
}

html[data-tema="dark"] {
  --calendar-icon-filter: invert(0.8) sepia(0) saturate(100%) hue-rotate(0deg);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder) !important;
}
#ordre_zoom2,
#ordre_zoom3,
#sokefelt,
.skjerm,
.varer {
  background-color: var(--bakgrunn);
  color: var(--tekst);
}
/* .ordrelinje {
  background-color: var(--bakgrunn);
  color: var(--tekst);
} */
input[type="search"] {
  text-align: left !important;
}
html[data-tema="dark"] #demo-content {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.blinkfelt {
  background-color: var(--avbryt) !important;
}

#smsBanner {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-color: var(--bakgrunn);
  color: var(--tekst);
  padding: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  display: none;
  z-index: 1000;
}
#smsBanner button {
  background-color: darkgray;
  color: var(--bakgrunn);
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 10px;
}
#cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: var(--bakgrunn);
  color: var(--tekst);
  padding: 15px;
  border-top-right-radius: 5px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 100;
  text-align: center;
}
#cookie-toggle {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: #007bff;
  color: var(--tekst);
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

#topbar,
#topbar *,
.nodrag,
.sms-quick-btn {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hasterB {
  font-weight: 600;
  color: var(--avbryt);
}
.ordrelinje.hasterB td:last-child::after {
  content: "❗";
  font-size: 0.9em;
  alt: "Haster";
}
.hasterB:hover {
  background-color: var(--hoverLinje);
  color: var(--tekstLinje);
}
.char-counter {
  margin-top: 8px;
  font-size: calc(var(--currentFontSize) * 0.01 * 0.9rem);
  color: var(--tekst-secondary);
  text-align: right;
}
#loader {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.snurr {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.3);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.checkbox-float {
  position: absolute;
  z-index: 100;
  width: 24px;
  height: 24px;
  opacity: 0;
  animation: fadeIn 0.1s ease-in forwards;
}

.checkbox-float .order-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  padding: 16px 32px;
  border-radius: 12px;
  min-width: 300px;
  max-width: 600px;
  text-align: center;
  color: white;
  font-weight: 500;
  font-size: calc(var(--currentFontSize) * 0.01 * 0.95rem);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  z-index: 9999999999;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(8px);
  pointer-events: all !important;
}
.notification.show {
  top: 20px;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 9999999999 !important;
}

.notification.success {
  background: rgba(76, 175, 80, 0.95);
  border: 1px solid #43a047;
}

.notification.error {
  background: rgba(244, 67, 54, 0.95);
  border: 1px solid #e53935;
}

/* .notification.error::before {
  content: "Feil";
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */

@keyframes pulse {
  0% {
    box-shadow: 0 8px 16px rgba(244, 67, 54, 0.2);
  }
  50% {
    box-shadow: 0 12px 24px rgba(244, 67, 54, 0.4);
  }
  100% {
    box-shadow: 0 8px 16px rgba(244, 67, 54, 0.2);
  }
}

.notification.error.show {
  animation: pulse 2s infinite;
}

.notification.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

[data-tema="dark"] .notification.success {
  background: rgba(76, 175, 80, 0.85);
  border: 1px solid #2e7d32;
}

[data-tema="dark"] .notification.error {
  background: rgba(244, 67, 54, 0.85);
  border: 1px solid #c62828;
}

#hurtigvalgDiv {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
tr.ordrelinje {
  transition: opacity 0.5s ease-in-out;
}
#logotekst,
#logotekst:visited,
#logotekst:link,
#nyLogoTekst,
a,
a:visited,
a:hover {
  text-decoration: none !important;
  color: var(--buttonKnapp);
}
.link {
  color: var(--buttonKnapp) !important;
  font-weight: bold;
}
.link:hover {
  color: var(--buttonKnapp) !important;
  text-decoration: underline !important;
}
.linkVanlig {
  color: var(--tekst) !important;
}

.version-info {
  padding: 20px;
  max-width: 800px;
}

.version-list {
  max-height: 400px;
  overflow-y: auto;
  margin: 20px 0;
}
.version-list::-webkit-scrollbar {
  width: 8px;
}
.version-list::-webkit-scrollbar-thumb {
  background: var(--buttonKnapp);
  border-radius: 4px;
}

.version-item {
  padding: 15px;
  margin: 10px 0;
  border-left: 4px solid white;
  background: var(--bakgrunnsFarge);
}

.version-item.feature {
  border-color: #4caf50;
}
.version-item.bugfix {
  border-color: #ffc107;
}
.version-item.security {
  border-color: #f44336;
}

.version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.version-header .version {
  font-weight: bold;
}

.version-desc {
  margin-top: 10px;
  color: var(--tekstFarge);
}

.settings-container {
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0px;
}
.settings-content {
  padding: 15px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
section {
  background: var(--bakgrunn) !important;
  width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand-logo {
  height: 40px;
  width: auto;
}
.settings-nav {
  top: 0;
  padding: 0.3rem;
  background: var(--bakgrunn);
  max-width: 100%;
}

.nav-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nav-btn.danger {
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.2) !important;
}

.nav-btn.danger:hover {
  background: rgba(220, 53, 69, 0.08) !important;
}

.nav-btn.danger.active {
  background: var(--avbryt) !important;
  color: white !important;
}

@media (max-width: 768px) {
  .nav-btn {
    min-width: 100%;
    max-width: 100%;
  }
}

section.panel {
  display: none;
}
section.panel.active {
  display: block;
}

.panel-card {
  float: left;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 4px;
}

.button-group {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.input-group input:focus {
  border-color: var(--buttonKnapp);
  outline: none;
}

.settings-form {
  margin-top: 2rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  font-weight: 500;
  color: var(--tekst);
}

input,
textarea {
  padding: 0.75rem;
  border: 2px solid var(--inputBakgrunn);
  border-radius: 8px;
  background: var(--inputBakgrunn);
  color: var(--tekst);
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--buttonKnapp);
  outline: none;
}

.tips-container {
  display: none;
  position: absolute;
  bottom: 35px;
  right: 20px;
  width: 500px;
  background: var(--bakgrunnsFarge);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tips-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.tips-title {
  flex: 1;
  font-weight: 500;
  color: var(--tekst);
}

.tips-controls {
  display: flex;
  gap: 12px;
}

.tips-minimize,
.tips-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--tekst);
  opacity: 0.6;
  transition: all 0.2s ease;
  user-select: none;
}

.tips-minimize:hover,
.tips-close:hover {
  opacity: 1;
}

.tips-content {
  padding: 20px;
  display: flex;
  gap: 16px;
}

.tips-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(0, 0, 0, 0.05); */
  border-radius: 50%;
  font-size: 2rem;
}

.tips-text h3 {
  margin: 0 0 8px 0;
  color: var(--tekst);
  font-size: calc(var(--currentFontSize) * 0.01 * 1.1rem);
}

.tips-text p {
  margin: 0;
  color: var(--tekst);
  opacity: 0.8;
  line-height: 1.5;
}

.tips-navigation {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
}

.tips-progress {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.tips-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--tekst);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.tips-container.minimized {
  height: 48px;
  overflow: hidden;
}

.tips-container.collapsed {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.tips-container.collapsed:hover {
  transform: scale(1.1);
}

.tips-container.collapsed .tips-header {
  padding: 0;
  height: 100%;
}

.tips-container.collapsed .tips-title,
.tips-container.collapsed .tips-minimize,
.tips-container.collapsed > *:not(.tips-header) {
  display: none;
}

.tips-container.collapsed .tips-controls {
  width: 100%;
  height: 100%;
  margin: 0;
}

.tips-container.collapsed .tips-close {
  width: 100%;
  height: 100%;
  opacity: 1;
  font-size: 20px;
  border-radius: 50%;
  margin-left: -10px;
}
.tips-prev,
.tips-next {
  background: var(--bakgrunnsFarge);
  color: var(--tekst);
}

@keyframes slidein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
h1 a:link,
h1 a:visited,
h1 a:active {
  color: var(--tekst) !important;
}
#message-container {
  display: block;
}
.message-container-row {
  width: 94%;
  padding: 20px;
  margin: 20px;
  border-radius: 5px;
  cursor: pointer;
  border-radius: var(--card-border-radius);
  box-shadow: var(--modern-shadow);
  transition: var(--transition-smooth);
  margin-bottom: 12px;
}

.message-container-row.new::before {
  content: "Ulest melding";
  display: block;
  font-size: calc(var(--currentFontSize) * 0.01 * 1.1rem);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  color: var(--avbryt);
}
.message-container-row:hover h2,
.message-container-row:hover small {
  background-color: var(--hoverLinje);
  color: var(--tekstLinje) !important;
  transition: none;
}
.message-container-row:hover {
  background-color: var(--hoverLinje);
  color: var(--tekstLinje);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: none;
}
.message-container-row.active {
  background: var(--valgtLinje);
}
.unread {
  width: 100%;
  clear: both;
}
.unread::before {
  content: "Ulest melding";
  background-color: var(--bakgrunnsFarge);
  border-radius: 10px;
  padding: 5px;
  display: block;
  text-align: center;
  font-size: calc(var(--currentFontSize) * 0.01 * 1.1rem);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  color: var(--avbryt);
}
.version-list {
  overflow-y: auto;
  padding: 1rem;
}

.loading {
  text-align: center;
  padding: 1rem;
  font-style: italic;
}
.meldingerKnapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  margin-top: 20px;
  margin-bottom: 20px;
  gap: 30px;
  padding: 0 50px;
  width: 100%;
}

label {
  font-weight: var(--nf-label-font-weight);
  display: block;
  color: var(--tekst);
  font-size: var(--nf-label-font-size);
  margin-bottom: calc(var(--nf-input-size) / 4);
  margin-top: 5px;
  white-space: normal;
}

label + small {
  font-style: normal;
}

small {
  display: block;
  font-weight: 400;
  opacity: 0.75;
  font-size: var(--nf-small-font-size);
  margin-bottom: calc(var(--nf-input-size) * 0.75);
}

small:last-child {
  margin-bottom: 0;
}

textarea {
  margin-top: 15px !important;
  text-align: left !important;
  padding: 5px !important;
}

input[type="checkbox"]:disabled,
input[type="date"]:disabled,
input[type="email"]:disabled,
input[type="month"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="radio"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="time"]:disabled,
input[type="url"]:disabled,
input[type="week"]:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

input[type="checkbox"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="month"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="radio"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="time"]::-webkit-input-placeholder,
input[type="datetime-local"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="week"]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--nf-input-placeholder-color);
  letter-spacing: 0;
}

input[type="checkbox"]:-moz-placeholder,
input[type="checkbox"]::-moz-placeholder,
input[type="date"]:-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="month"]:-moz-placeholder,
input[type="month"]::-moz-placeholder,
input[type="number"]:-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="password"]:-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="radio"]:-moz-placeholder,
input[type="radio"]::-moz-placeholder,
input[type="search"]:-moz-placeholder,
input[type="search"]::-moz-placeholder,
input[type="tel"]:-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="text"]:-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="time"]:-moz-placeholder,
input[type="time"]::-moz-placeholder,
input[type="datetime-local"]:-moz-placeholder,
input[type="datetime-local"]::-moz-placeholder,
input[type="url"]:-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="week"]:-moz-placeholder,
input[type="week"]::-moz-placeholder,
select:-moz-placeholder,
select::-moz-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--nf-input-placeholder-color);
  letter-spacing: 0;
}

input[type="checkbox"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="radio"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--nf-input-focus-border-color);
}

input[type="checkbox"] + small,
input[type="date"] + small,
input[type="email"] + small,
input[type="month"] + small,
input[type="number"] + small,
input[type="password"] + small,
input[type="radio"] + small,
input[type="search"] + small,
input[type="tel"] + small,
input[type="text"] + small,
input[type="time"] + small,
input[type="datetime-local"] + small,
input[type="url"] + small,
input[type="week"] + small,
select + small,
textarea + small {
  margin-top: 0.5rem;
}

input[type="checkbox"].icon-left,
input[type="date"].icon-left,
input[type="email"].icon-left,
input[type="month"].icon-left,
input[type="number"].icon-left,
input[type="password"].icon-left,
input[type="radio"].icon-left,
input[type="search"].icon-left,
input[type="tel"].icon-left,
input[type="text"].icon-left,
input[type="time"].icon-left,
input[type="datetime-local"].icon-left,
input[type="url"].icon-left,
input[type="week"].icon-left,
select.icon-left,
textarea.icon-left {
  background-position: left var(--icon-background-offset) bottom 50%;
  padding-left: var(--icon-padding);
  background-size: var(--nf-input-size);
}

input[type="checkbox"].icon-right,
input[type="date"].icon-right,
input[type="email"].icon-right,
input[type="month"].icon-right,
input[type="number"].icon-right,
input[type="password"].icon-right,
input[type="radio"].icon-right,
input[type="search"].icon-right,
input[type="tel"].icon-right,
input[type="text"].icon-right,
input[type="time"].icon-right,
input[type="datetime-local"].icon-right,
input[type="url"].icon-right,
input[type="week"].icon-right,
select.icon-right,
textarea.icon-right {
  background-position: right var(--icon-background-offset) bottom 50%;
  padding-right: var(--icon-padding);
  background-size: var(--nf-input-size);
}

input[type="checkbox"]:-webkit-autofill,
input[type="date"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="month"]:-webkit-autofill,
input[type="number"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="radio"]:-webkit-autofill,
input[type="search"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
input[type="text"]:-webkit-autofill,
input[type="time"]:-webkit-autofill,
input[type="datetime-local"]:-webkit-autofill,
input[type="url"]:-webkit-autofill,
input[type="week"]:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  padding: calc(var(--nf-input-size) * 0.75) !important;
}

input[type="search"]:placeholder-shown {
  background-image: url("/img/ceb6.webp");
  background-position: left calc(var(--nf-input-size) * 0.4) bottom 50%;
  padding-left: calc(var(--nf-input-size) * 2.25);
  background-size: calc(var(--nf-input-size) * 1.5);
  background-repeat: no-repeat;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: var(--nf-input-size);
  height: var(--nf-input-size);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

input[type="search"]:focus {
  padding-left: calc(var(--nf-input-size) * 0.75);
  background-position: left calc(var(--nf-input-size) * -1.5) bottom 50%;
}
input[type="search"] {
  padding-left: calc(var(--nf-input-size) * 0.75);
}

input[type="email"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-at-sign'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

input[type="tel"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

input[type="url"][class^="icon"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

input[type="password"] {
  letter-spacing: 2px;
}

input[type="date"],
input[type="month"],
input[type="week"] {
  font-family: var(--fontFamily);
  text-align: center;
  min-width: 14em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

input[type="time"] {
  min-width: 6em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
input[type="week"] {
  background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
  background-repeat: no-repeat;
  background-size: var(--nf-input-size);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  cursor: pointer;
  opacity: 0;
}
input[type="date"] {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
@-moz-document url-prefix() {
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="week"] {
    min-width: auto;
    width: auto;
    background-image: none;
  }
}

textarea {
  height: auto;
}

input[type="checkbox"] {
  width: var(--nf-input-size);
  height: var(--nf-input-size);
  padding: inherit;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  border-radius: calc(var(--nf-input-border-radius) / 2);
  border-width: var(--nf-input-border-width);
  cursor: pointer;
  background-position: 50%;
}
input[type="radio"] + label {
  transform: translateY(-7px) translateX(-7px);
}
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--nf-input-border-color);
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  padding: 0.6rem;
}

input[type="radio"]:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

input[type="radio"]:checked {
  border-color: var(--inputTekst);
  background: white;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--buttonKnapp);
}

input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--buttonKnapp), 0.2);
}
input[type="radio"]:focus:not(:checked) {
  border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
  outline: none;
}

input[type="checkbox"]:focus:not(:checked),
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
  margin-bottom: 0;
  padding-left: calc(var(--nf-input-size) / 2.5);
  font-weight: 400;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  max-width: calc(100% - var(--nf-input-size) * 2);
  line-height: normal;
}

input[type="checkbox"] + label > small,
input[type="radio"] + label > small {
  margin-top: calc(var(--nf-input-size) / 4);
}

input[type="checkbox"]:checked {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat 50%/85%;
  background-color: var(--nf-input-focus-border-color);
  border-color: var(--nf-input-focus-border-color);
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"].switch {
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-height);
  position: relative;
  margin-bottom: 10px;
}

input[type="checkbox"].switch:after {
  background: var(--nf-input-border-color);
  border-radius: var(--switch-orb-size);
  height: var(--switch-orb-size);
  left: var(--switch-orb-offset);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: var(--switch-orb-size);
  content: "";
  transition: all 0.2s ease-out;
}

input[type="checkbox"].switch + label {
  margin-top: calc(var(--switch-height) / 8);
}

input[type="checkbox"].switch:checked {
  background: none;
  background-position: 0 0;
  background-color: var(--nf-input-focus-border-color);
}

input[type="checkbox"].switch:checked:after {
  -webkit-transform: translateY(-50%)
    translateX(calc(var(--switch-width) / 2 - var(--switch-orb-offset)));
  transform: translateY(-50%)
    translateX(calc(var(--switch-width) / 2 - var(--switch-orb-offset)));
  background: #fff;
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
  background-repeat: no-repeat;
  background-size: var(--nf-input-size);
  width: 250px;
}
#theme-select {
  background: var(--bakgrunn);
  color: var(--tekst);
  border: 1px solid var(--nf-input-border-color);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.ikon {
  fill: var(--ikon);
}
.arrow {
  float: right;
  margin-right: 10px;
  height: 30px;
  width: 30px;
}
.tableCaption:hover svg {
  transform: scale(1.1);
  transition: all 0.2s ease;
}

.settings-menu.modern {
  min-width: 320px;
  max-width: 380px;
  /* padding: 12px 0; */
  border-radius: 12px;
  box-shadow: var(--boxShadow);
  background: var(--bakgrunn);
  border: 1px solid var(--bakgrunnsFarge);
  z-index: 1000;
  /* overflow-y: auto; */
}
.settings-menu .category {
  padding: 8px 16px;
  color: var(--tekst);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-menu .category.fontSize {
  text-align: center;
}

.settings-menu .menu-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--tekst);
}

.settings-menu.modern .menu-option:hover {
  background: var(--hoverLinje);
  color: var(--hoverLinjeTekst);
}

.settings-menu.modern .menu-option.selected {
  background: var(--hoverLinje);
  color: var(--tekstLinje);
}

.settings-menu.modern .menu-option .icon {
  margin-right: 12px;
  opacity: 0.8;
  color: var(--tekst);
}

.settings-menu.modern .menu-option .content {
  flex: 1;
}

.settings-menu.modern .menu-option .label {
  font-weight: 600;
  margin-bottom: 2px;
}

.settings-menu.modern .menu-option .description {
  font-size: 0.8125rem;
  color: var(--tekst-svak);
}

.settings-menu.modern .menu-option.warning,
.action-button.nav-link.warning .txt {
  color: var(--avbryt);
}

.settings-menu.modern .menu-option.warning .icon,
.action-button.nav-link.warning .icon {
  color: var(--avbryt);
}
.settings-menu.modern.closing {
  opacity: 0;
  transform: translateY(-8px);
}
.settings-menu.modern .divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.font-size-controls.modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}

.font-size-controls.modern .size-btn {
  background: var(--hoverLinje);
  /* border: 1px solid var(--buttonKnapp); */
  border-radius: 6px;
  padding: 6px 38px;
  cursor: pointer;
  color: var(--hoverLinjeTekst);
  transition: all 0.2s ease;
}

.font-size-controls.modern .size-btn:hover {
  transform: translateY(-2px);
}

.font-size-controls.modern .size-display {
  min-width: 48px;
  text-align: center;
  font-weight: 500;
}
input:not(input[type="button"], input[type="submit"]):focus,
select:focus,
textarea:focus {
  border: var(--inputBorderFocus) !important;
}
input:not(input[type="button"], input[type="submit"]),
select,
textarea {
  border: var(--inputBorder) !important;
}

#oppsigelse .cancel-container {
  max-width: 800px;
  margin: 1rem auto;
  padding: 0 20px;
}

#oppsigelse .cancel-card {
  background: var(--bakgrunn);
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
}

#oppsigelse .icon-large {
  font-size: 3rem;
  color: var(--buttonKnapp);
  margin-bottom: 1.5rem;
}

#oppsigelse h1 {
  color: var(--tekst);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

#oppsigelse .lead {
  font-size: 1.2rem;
  color: var(--tekst);
  margin-bottom: 2rem;
}

#oppsigelse .timeline .timeline-item {
  padding: 1.5rem;
  border-left: var(--inputBorder);

  position: relative;
  margin: 0 auto;
  max-width: 450px;
}

#oppsigelse .timeline .timeline-item:before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 2.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bakgrunn);
  border: 2px solid var(--buttonKnapp);
}
#oppsigelse .timeline .timeline-item:hover {
  background: var(--hoverLinje);
}
#oppsigelse .timeline .timeline-item:hover:before {
  background: var(--buttonKnapp);
}

#oppsigelse .timeline .timeline-item i {
  color: var(--buttonKnapp);
  margin: 0 auto;
  font-size: 1.5rem;
}

#oppsigelse .timeline .timeline-item h5 {
  color: var(--tekst);
  margin: 0 0 0.5rem 0;
}

#oppsigelse .timeline .timeline-item p {
  color: var(--tekst);
  margin: 0;
}

#oppsigelse .cancel-button {
  margin-top: 35px;
  background: var(--avbryt, #e74c3c);
  color: white;
  border: none;
  padding: 1rem 3rem;
  font-size: 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#oppsigelse .cancel-button:hover {
  opacity: 0.9;
}

#oppsigelse .footnote {
  color: var(--tekst);
  opacity: 0.7;
  margin-top: 2rem;
  font-size: 0.9rem;
}
#orderLeftButtons {
  margin-left: -30px;
  margin-top: 40px;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
}
.ny_ordre_buttons {
  display: grid;
  grid-template-columns: auto auto;

  justify-content: space-between;
  margin: 0 250px;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--bakgrunnsFarge);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    45deg,
    var(--buttonKnapp),
    rgba(var(--buttonKnapp), 0.8)
  );
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    45deg,
    var(--buttonKnapp),
    rgba(var(--buttonKnapp), 1)
  );
  cursor: pointer;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--buttonKnapp) rgba(0, 0, 0, 0.1);
}
#smsInnstillingKnapper {
  float: none;
  width: 40%;
}
#smsInnstillingKnapper .button {
  width: 50%;
  margin: 0;
  margin-bottom: 15px;
}
.messages-main-container {
  width: 100%;
  padding-left: 40px;
  float: left;
}
.navnTr {
  width: 330px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.content-header h1 {
  font-size: 24px;
  margin: 0;
}
.action-bar {
  text-align: center;
  width: 100%;
  padding-top: 25px;
}
.action-bar button {
  margin-top: 25px;
}

.btn-primary {
  background: var(--buttonKnapp);
  border: none;
  padding: 8px 16px;
  color: var(--buttonTekst);
  border-radius: 4px;
  cursor: pointer;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--hoverLinje);
}

.data-table th {
  background: var(--bakgrunnsFarge);
  color: var(--tekst);
  font-weight: 600;
}

.w50 {
  width: 50px;
}
.w100 {
  width: 100px;
}

.modal-form-content {
  background: var(--bakgrunn);
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: var(--tekst);
  width: 100%;

  border-radius: 4px;
}

.modal-form-content .modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--hoverLinje);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-form-content .modal-title {
  margin: 0;
  font-size: 18px;
}

.modal-form-content .modal-body {
  padding: 20px;
}

.modal-form-content .modal-footer {
  padding: 15px 20px;
  text-align: right;
  gap: 10px;
  display: flex;
  justify-content: flex-end;
}

.form-row {
  margin-top: 20px;
}

.form-row label {
  display: block;
  margin-top: 15px;
  text-align: center;
  font-weight: 600;
}

.modal-form-content input {
  max-width: 250px;
  padding: 8px;
  margin: 0 auto;
  border: 1px solid var(--inputBorder);
  border-radius: 4px;
}
.modal-form-content input[type="text"],
.modal-form-content select {
  width: 300px;
  max-width: 300px;
}

#optionsList {
  margin-bottom: 10px;
}

#optionsList .input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.handle {
  cursor: move;
  color: #999;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  margin: 0 2px;
}
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--bakgrunn);
  border-radius: 8px;
}

.empty-state-icon {
  color: var(--tekst);
  margin-bottom: 20px;
  opacity: 0.8;
}

.empty-state h2 {
  font-size: 24px;
  color: var(--tekst);
  margin-bottom: 15px;
}

.empty-state-description {
  color: var(--tekst);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 30px;
}

.empty-state-examples {
  text-align: left;
  max-width: 500px;
  margin: 0 auto 30px;
  background: var(--bakgrunnsFarge);
  padding: 20px;
  border-radius: 6px;
}
.empty-state-examples td {
  padding: 7px;
}
.empty-state-examples td:last-child {
  text-align: center;
}

.empty-state-examples h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--tekst);
}

.empty-state-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.empty-state-examples li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.empty-state-examples li i {
  color: var(--tekst);
  width: 20px;
}

.empty-state .btn-large {
  padding: 12px 24px;
  font-size: 16px;
  transition: transform 0.2s;
}

.empty-state .btn-large:hover {
  transform: translateY(-1px);
}
label.required::after {
  content: "*";
  color: var(--avbryt);
  margin-left: 5px;
}
.order-line-preview {
  transform: scale(0.8);
}
.form-group-flex {
  display: flex;
}
.input-field {
  margin: 10px auto !important;
}
.delete-option {
  margin-left: 10px;
  cursor: pointer;
}
#sendVarsel {
  margin-bottom: 0px !important;
}
#sendVarselInfo {
  margin-top: -10px !important;
}
.nolAntall {
  width: 8%;
}
.nolAlfa {
  width: 8%;
}
.nolArt {
  width: 40%;
}
.nolLev {
  width: 40%;
}
#ny_ordre_hoyre .hele {
  text-align: center;
  margin: 0 auto;
}
#ny_ordre_hoyre .topp {
  display: flex;
  justify-content: center;
  padding: 8px;
  font-weight: bold;
  width: 100%;
}
#ny_ordre_hoyre .topp .innhold {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
#ny_ordre_hoyre .topp .innhold .nolLev {
  margin-right: 0 !important;
}
#ny_ordre_hoyre .topp .innhold div {
  margin: 0 !important;
}
.urlWarning {
  text-align: center;
  width: 100%;
}
.urlWarning.url {
  font-display: monospace;
  color: var(--avbryt);
  font-size: calc(var(--currentFontSize) * 0.01 * 1.3rem);
}
#tom-info {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  display: none;
  justify-content: center;
  align-items: center;
}
.row input {
  margin-right: 2px;
}
.tooltip {
  display: none;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--tekst);
  color: var(--bakgrunn);
  position: absolute;
  z-index: 1;

  transform: translateY(-125%) translateX(40%);
}
#orderLeftButtonsQR:hover {
  transform: scale(1.05);
}
.ikon-container span {
  color: var(--tekst);
  font-size: 2.6rem;
  font-weight: 200;
}
.ikon-container span:hover {
  font-weight: 300;
}
.ikon-container span:active {
  transform: translateY(1px);
}
@media (max-width: 1399px) {
  .tooltip {
    transform: translateY(-10%) translateX(-50%);
  }
  #varerHolder {
    width: calc(100vw - 190px - 50px);
  }
  #infodel {
    width: calc(100vw - 190px - 100px);
    padding-right: 0;
    margin: 30px auto;
  }
  #messages-container,
  #submit-container {
    width: 50%;
    min-width: 350px;
    margin: 0 auto;
  }
  #ordre_zoom,
  #ordre_zoom2,
  #ordre_zoom3 {
    display: none;
  }
  #ny_ordre_hoyre {
    width: 72%;
  }
}
@media (max-width: 1150px) {
  #ny_ordre {
    width: 100%;
  }
  #ny_ordre_venstre {
    width: 220px;
    padding-left: 10px;
    padding-top: 4px;
  }
  #ny_ordre_hoyre {
    padding-top: 0;
    margin-left: 10px;
    width: calc(100vw - 280px);
  }

  #ny_ordre_venstre label {
    max-width: auto;
    margin: 0 auto;
  }
  #ny_ordre_venstre input[type="text"],
  #ny_ordre_venstre input[type="text"]:required,
  #ny_ordre_venstre select,
  #ny_ordre_venstre input[type="date"],
  #ny_ordre_venstre input[type="number"],
  #ny_ordre_venstre select,
  #ny_ordre_venstre input[type="email"] {
    max-width: 100%;
  }
  #ny_ordre_hoyre .nolAntall {
    width: 10%;
  }
  #ny_ordre_hoyre .nolAlfa {
    width: 15%;
  }
  #ny_ordre_hoyre .nolArt {
    width: 35%;
  }
  #ny_ordre_hoyre .nolLev {
    width: 35%;
  }
  #ny_ordre_hoyre .nolAntallR {
    width: 10%;
  }
  #ny_ordre_hoyre .nolAlfaR {
    width: 10%;
  }
  #ny_ordre_hoyre .nolArtR {
    width: 32%;
  }
  #ny_ordre_hoyre .nolLevR {
    width: 32%;
  }
  .ny_ordre_buttons {
    margin: 0 100px;
  }
}
@media (max-width: 1000px) {
  .compimage-container {
    display: none;
  }
}
@media (max-width: 950px) {
  #kalenderHolder {
    width: 100% !important;
    float: none !important;
  }
  #ny_ny {
    width: 100% !important;
    float: none !important;
  }
}
@media (max-width: 940px) {
  #leverandorer_container {
    float: left;
    align-items: center;
  }
  #redigerlev_hoved {
    margin-left: 0;
    margin: 0 auto;
    text-align: center;
  }
  #rediger_lev_felt {
    margin: 50px;
  }
}
@media (max-width: 900px) {
  #ny_ordre_hoyre .nolAntall {
    width: 13%;
  }
  #ny_ordre_hoyre .nolAlfa {
    width: 13%;
  }
  #ny_ordre_hoyre .nolArt {
    width: 35%;
  }
  #ny_ordre_hoyre .nolLev {
    width: 33%;
  }
  #ny_ordre_hoyre .nolAntallR {
    width: 10%;
  }
  #ny_ordre_hoyre .nolAlfaR {
    width: 10%;
  }
  #ny_ordre_hoyre .nolArtR {
    width: 30%;
  }
  #ny_ordre_hoyre .nolLevR {
    width: 30%;
  }
  .innholdTelefonen {
    clear: both;
    width: 100%;
    margin: 0 auto;
  }
  #smsInnstillingKnapper {
    float: none;
    width: 100%;
  }
  #smsInnstillingKnapper .button {
    width: 50%;
    margin: 0;
    margin-bottom: 15px;
  }
}

@media (max-width: 750px) {
  #seordre_venstre,
  #wrapper {
    margin-left: 0;
    margin-top: 0;
    padding-left: 5px;
    padding-top: 0;
  }
  #seordre_venstre .utleveresForm {
    margin-left: 0;
  }
  #varerHolder,
  .varerA {
    width: 100%;
    max-width: 100%;
    float: none;
  }
  #wrapper {
    font-size: calc(var(--currentFontSize) * 0.01 * 0.8rem);
  }
  #seordre_venstre {
    float: none;
    margin: 0 auto;
    text-align: center;
    font-size: calc(var(--currentFontSize) * 0.01 * 0.9rem);
    width: 90%;
  }
  .printredigerknapp {
    width: 100%;
    display: flex;
    margin: 0 auto;
    text-align: center;
  }
  .printredigerknapp svg {
    flex: 1;
  }
  #infodel {
    width: 95%;
    padding: 0;
    margin: 30px auto;
  }
  #messages-container,
  #submit-container,
  #data-wrapper {
    width: 100%;
    margin: 0 auto;
  }
  #orderLeftButtons {
    margin-left: 0;
  }
  #data-wrapper {
    padding: 10px;
    padding-top: 0;
    margin: 0;
  }
  .data-container,
  .data-containerB {
    width: 100%;
    padding: 20px 20px;
    margin: 0;
  }
  .table-container,
  .data-row,
  .tableCaption {
    width: 100%;
  }
  .data-cell {
    padding: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ny_ordre_buttons {
    margin: 0 auto;
    gap: 20px;
  }
  .ny_ordre_buttons .button {
    font-size: inherit;
  }
  #ny_ordre_hoyre {
    margin-left: 10px;
    padding-top: 2px;
  }
  #ny_ordre_hoyre input,
  #ny_ordre_hoyre select {
    margin-left: 0px !important;
    margin-right: 1px !important;
  }
  #orderLeftButtonsQR {
    transform: scale(0.8);
  }
  #sokeresultat,
  #sokeresultatB {
    width: 100%;
  }
}
@media (max-width: 650px) {
  #bestillingsprogrammet,
  #innmeldingprogrammet {
    margin-left: 10px;
  }
  #varerA,
  #varerB {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    font-size: calc(var(--currentFontSize) * 0.01 * 0.6rem);
  }
  h1 {
    font-size: calc(var(--currentFontSize) * 0.01 * 1.5rem);
  }
  h4 {
    font-size: calc(var(--currentFontSize) * 0.01 * 1rem);
  }
  .meldingerKnapper {
    width: 100%;
  }
  .messages-main-container {
    width: 100%;
    padding-left: 0px;
    float: left;
  }
  #message-container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .message-container-row {
    width: 90%;
  }
  .ny_ordre_buttons {
    margin: 0 auto;
    width: 75%;
  }
  #infodel {
    margin: 30px auto;
  }
}
@media (max-width: 620px) {
  #ny_ordre {
    grid-template-rows: 1fr;
  }
  #ny_ordre_venstre {
    width: 100%;
  }
  #ny_ordre_hoyre {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .tips-container {
    display: none !important;
  }
  .redigeOrdreSpan svg {
    padding: 0;
    margin: 0;
    transform: scale(0.8);
  }
  #ny_ordre_hoyre .nolAntall {
    width: 15%;
  }
  #ny_ordre_hoyre .nolAlfa {
    width: 15%;
  }
  #ny_ordre_hoyre .nolArt {
    width: 30%;
  }
  #ny_ordre_hoyre .nolLev {
    width: 30%;
  }
  #ny_ordre_hoyre .nolArtR {
    width: 25%;
  }
  #wrapper {
    padding-left: 0px;
  }
  .ny_ordre_buttons {
    margin: 0 auto;
    width: 50%;
  }
  #infodel {
    width: 97%;
    margin: 30px auto;
    padding: 3%;
    padding-left: 5%;
  }
  .data-row {
    padding: 2px;
    width: 100vw;
  }
  .data-cell {
    padding-left: 2px;
    padding-right: 2px;
  }
  #data-wrapper {
    font-size: calc(var(--currentFontSize) * 0.01 * 0.7rem);
    padding: 5px;
  }
  .tableCaption {
    font-size: calc(var(--currentFontSize) * 0.01 * 1.2rem);
  }

  .data-container {
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 550px) {
  #oppsigelse .cancel-card {
    padding: 10px;
  }
  .ny_ordre_buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .ny_ordre_buttons button:first-child {
    margin-left: 0;
  }

  .ny_ordre_buttons button:last-child {
    margin-right: 0;
  }
  .meldingerKnapper {
    flex-direction: column;
    gap: 0;
  }
}