/* style.css */
@import url(colorbox.css);

/* #region reset/base *, html, body */
:root {
  color-scheme: light;

  --primary-color: #2f2f37;
  --secondary-color: #fff;
  --body-color: rgb(52, 55, 65);
  --box-shadow-primary: #efefef;
  --comment-color: #eee;

  --background-body-color: hsl(220, 56.4%, 97%);
  --background-content-notmiddle: hsl(220, 56.4%, 97%);
  --background-primary-color: #fff;
  --background-primary-accent-color: hsl(220, 50%, 94%);
  --background-secondary-color: #000;
  --background-orange-color: #f98a08;
  --background-warning-color: rgba(250, 221, 159);
  --background-buttonapproved-color: #000;
  --background-tooltip-color: #555;

  --brand-color: #294d9d;
  --input-color: hsl(220, 50%, 90%);
  /* #f1f3f4; */
  --table-sorter-background-color: hsl(30deg, 100%, 75%);
  --hover: #dfe4f0;
  --border-color: hsl(220, 50%, 94%);
  /* #f1f3f4; */
  --block-header: hsl(220, 50%, 94%);
  /* #f1f3f4; */

  --normal: 400;
  --bold: 800;

  --danger: #e7000b;
  --danger-hover: #c10007;
}

[data-theme="dark"] {
  color-scheme: dark;
  --primary-color: #f0f0f0;
  --secondary-color: #1a1a1a;
  --body-color: rgb(220, 222, 230);
  --box-shadow-primary: #2a2a2a;
  --comment-color: #222;

  --background-body-color: #121212;
  --background-content-notmiddle: #121212;
  --background-primary-color: #000000;
  --background-primary-accent-color: hsl(220, 15%, 25%);
  --background-secondary-color: #fff;
  --background-orange-color: #d97706;
  --background-warning-color: rgba(120, 90, 30);
  --background-buttonapproved-color: #fff;
  --background-tooltip-color: #aaa;

  --brand-color: #6d8fd9;
  --border-color: hsl(220, 15%, 25%);

  --input-color: hsl(220, 15%, 22%);

  --table-sorter-background-color: hsl(30deg, 40%, 25%);

  --normal: 400;
  --bold: 800;

  --hover: hsl(220, 15%, 28%);
  --block-header: #252525;

  .logo-light {
    display: none;
  }

  .logo-dark {
    display: block;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  -webkit-font-smoothing: antialiased;
  outline: none;
  margin: 0;
  font-family: Arial, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  min-height: 100%;
}

body {
  cursor: default;
  text-align: left;
  overflow-y: scroll;
  position: relative;
  min-height: 100vh;
  /* fallback */
  min-height: 100dvh;
  /* moderne browsers gebruiken dit */
  color: var(--body-color);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  font-size: 13px;
  background-color: var(--background-body-color);
}

main {
  flex-grow: 1;
  padding: 0 1.25rem;
}

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.logo-dark {
  display: none;
}

/* #endregion */

/* #region Typography */
a {
  cursor: pointer;
  outline: 0;
  color: inherit;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }

  & img {
    border: none;
  }
}

.block h3 a,
.block a.link,
.block button {
  background-color: var(--background-primary-color);
  text-shadow: none;
  text-decoration: none;
  border-radius: 3px;
  font-weight: normal;
  border: 1px solid var(--brand-color);
  color: var(--brand-color);
  padding: 6px 6px 6.5px;
}

.block h3 a {
  background-color: var(--background-primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.aantal, .OVL, .project, .netwerk, .VRI, .EWOVL, .EWVRI) a {
  color: inherit;
  font-weight: normal;
}

.block h3 a.active,
.block h3 a:hover,
.block a.link:hover,
.block button:hover {
  color: var(--secondary-color);
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--brand-color);
}

.crumble {
  margin: 1rem 0;
  font-size: 12px;
  background: var(--block-header);
  border-radius: 4px;
  border: 1px solid var(--border-color);
  display: flex;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  overflow-x: auto;

  & a {
    color: var(--primary-color);
    text-decoration: underline;
  }

  & li {
    display: inline;
    margin-right: 8px;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
  }

  & :last-child {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* TODO: vervangen voor message */
.error {
  color: red;
  border: 1px solid red;
  padding: 5px;
  margin-top: 50px;

  &.compact {
    padding-left: 15px;
    margin: 15px;
  }
}

.message {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  background: rgba(255, 199, 44, 0.5);
  border: 1px solid rgba(255, 199, 44, 1);

  &.blue {
    background: rgba(50, 177, 236, 0.25);
    border: 1px solid rgba(50, 177, 236, 0.5);
  }

  &.red {
    color: red;
    border: 1px solid red;
    padding: 5px;
  }

  &.green {
    background: #e6f4ea;
    color: #1e4620;
    border: 1px solid #a8d5b5;

    [data-theme="dark"] & {
      background: #1b3a26 !important;
      color: #a8e6bf !important;
      border-color: #2e6b45 !important;
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

h3 {
  display: flex;
  width: 100%;
  color: var(--primary-color);
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 20px;
  justify-content: space-between;

  & a {
    float: right;
    background: var(--background-primary-color);
    padding: 5px;
    line-height: 10px;
    text-decoration: none;
    color: var(--secondary-color);
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0.25em;

    &:hover,
    &.active {
      background: var(--background-orange-color);
      color: var(--secondary-color);
      text-shadow: none;
    }
  }

  & .edit {
    border: 0;
  }

  & img {
    height: 1.25rem;
    vertical-align: text-bottom;
  }

  & input {
    float: right;
    line-height: 10px;
    border: 1px solid #bbbbbb;
    text-decoration: none;
    border-radius: 3px;
    color: inherit;
    padding: 0.33rem;
    font-size: 12px;
    margin: 0 0.25em;
  }

  & span {
    font-weight: bold;
  }
}

h3 input,
input {
  font-family: Arial, Helvetica, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1;
  text-align: left;
}

h3 a,
input[type="button"],
input[type="submit"],
a.link {
  transition: none;
  background: var(--brand-color);
}

h4 {
  color: var(--primary-color);
  margin-bottom: 0;

  & a {
    float: right;
    font-size: 11px;
    background: var(--background-primary-color);
    padding: 5px;
    margin: 5px;
    line-height: 10px;
    text-decoration: none;
    color: var(--primary-color);
    border-radius: 3px;
  }
}

hr {
  clear: both;
  height: 0;
  border: 0;
  width: 0;
}

i {
  transition: color 0.1s linear;

  &:hover {
    color: var(--brand-color);
  }
}

p {
  margin-bottom: 1em;
}

th,
.link,
.button,
input[type="submit"] {
  font-weight: bold;
}

strong {
  font-weight: var(--bold) !important;
}

.fa,
.fas {
  font-weight: 900 !important;
}

.label {
  background: var(--background-orange-color);
  color: var(--primary-color);
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
  opacity: 0.7;
  font-weight: bold;
}

.link {
  color: #999999;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.block .message {
  background: var(--background-warning-color);
  color: var(--primary-color);
  border: 1px solid rgba(255, 199, 44, 1);
  border-radius: 4px;
  padding: 0.75rem 1.25rem;

  & a {
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: underline;
  }
}

p.comment {
  padding: 0.5rem 1rem 0.75rem;
  background: var(--comment-color);
  border-radius: 0.5rem;
  margin: 0 1.5rem 1.5rem;
  width: fit-content;

  &.me {
    background: hsl(42, 98%, 86%);
    color: contrast-color(hsl(42, 98%, 86%));
  }

  & svg {
    vertical-align: middle;
    margin: -1px 1.25rem 0 -3.25rem;
  }
}

.notoptions {
  border-bottom: 0px !important;
  padding-top: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.notoptions a {
  line-height: 1;
  margin-top: -35px !important;
}

.red {
  background-color: #ffdadd;
}

.rol {
  font-size: 24px;
  color: #777777;
  background: var(--background-primary-color);
  padding: 25px;
  border-radius: 50%;
  transition: all 0.5s;

  &:hover {
    color: #c8a542;
    border-radius: 30%;
  }
}

span.reactions {
  background: white;
  border: 1px solid #eee;
  border-radius: 1rem;
  position: absolute;
  padding: 0 1rem;
}

.text-red {
  color: red !important;
}

/* #endregion */

/* #region Layout/Pages/content */
.aiinspectie-module-content {
  & .overview {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    & .overview-percentages {
      flex-basis: 0;
      flex-grow: 1;

      & h1 {
        padding: 1rem 1rem 0;
        font-size: 2rem;
        font-weight: normal;
      }
    }
  }

  & form {
    padding-top: 1rem;

    & * {
      box-sizing: border-box;
    }

    & strong {
      width: 150px;
      display: inline-block;
    }

    & input[type="text"],
    & select {
      border: 1px solid silver;
      padding: 0.35rem;
      width: 420px;
      border-radius: 0.2rem;
    }

    & input[type="submit"] {
      float: none;
      margin: 0;
    }
  }

  table th {
    position: sticky;
    top: 54px;
  }
}

.addmalfunction-content {
  @media only screen and (max-width: 800px) {
    .formdiv {
      width: 100% !important;
      display: block;
      height: auto !important;
    }

    .col {
      width: 100% !important;
      display: block;
    }
  }

  & .block {
    & p {
      padding: 0.25rem 1.5em !important;
    }

    & .col {
      width: 25%;
      float: left;
    }

    & select {
      width: 100%;
    }

    & input[type="text"] {
      width: 100% !important;
    }
  }

  & #aannemerbellen {
    float: none;
    clear: both;
    width: 100%;
    display: block;
    padding: 0.5rem 1rem;
  }

  #objectsearchresults table tr .id {
    display: none;
  }
}

.approvalchecklist-content {
  .block:target {
    border: 2px solid #294d9d;
  }
}

.bestek-module-content {
  & form {
    padding: 0.5rem;
  }
}

.brandprotocol-module-content {
  & input[type="button"] {
    float: none;
  }

  & .branduren,
  & .aantal-lampen,
  & .optie {
    width: 10px;
  }
}

#content {
  background-color: var(--background-primary-color);
  display: flex;
  margin-top: 0;

  & .wrapper {
    min-height: 520px;
  }

  & .verify-2fa {
    max-width: 500px;
    margin: auto;
    border: 1px solid #bbbbbb;
    border-radius: 0.25rem;
    background: #fff;
    padding: 15px;

    & input {
      width: 100%;
    }

    & .stop {
      margin-top: 1rem;
    }
  }
}

#content:not(.middle) {
  background-size: 400% 400%;
  animation: gradient 8s ease infinite;
  background-position: 50% 50%;
  background-color: var(--background-content-notmiddle) !important;
  min-height: calc(100vh - 12rem) !important;
}

.content {
  background: none !important;
}

.customize-dashboard {
  width: 100%;
  float: none;
  clear: both;

  & .sortable-container {
    padding: 0 1.5em;
  }

  & .sortable-header {
    display: block;
    padding: 0.5rem 0;

    & img {
      height: 32px;
      padding: 0 1rem 0 0;
      vertical-align: middle;
    }
  }
}

.aiinspectie-module-content {
  & .comments-area {
    float: left;
    width: 400px;
    resize: none;
  }

  & .tab.map {
    width: 100%;
    height: 350px;
    border: 3px solid #666;
  }
}

.clientdashboard-module-content {
  h1,
  h2,
  div.graphs .block {
    text-align: center;
  }

  h1 {
    font-size: 2rem;
    padding: 1.5rem;
    font-weight: 900;
  }

  .block {
    border: 0;

    & h3:not(.normal) {
      border-top: 1rem solid hsl(220, 56.4%, 97%) !important;
      top: 4.5rem;
    }

    & table thead {
      top: 4.5rem;
    }

    &.table {
      padding: 1rem !important;
      margin: 0 0 1.5rem 0;

      & table {
        width: 100%;
      }

      & strong {
        font-size: 1rem;
      }

      & strong span {
        background: silver;
        border-radius: 50%;
        display: inline-block;
        width: 1rem;
        font-size: 0.75rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
      }
    }
  }

  .block.table.center {
    align-items: center;
    text-align: center;

    & h1 {
      font-size: 3rem;
      line-height: 2.5rem;
    }
  }

  div.graphs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: auto;

    & form {
      display: flex;
      gap: 1.5rem;
    }

    &.nowrap {
      flex-wrap: nowrap;
    }
  }

  .graphs .block {
    flex: 1;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  select.graph {
    border: 0;
    padding: 1rem;
    border-radius: 0.25rem;
    border-right: 1rem solid white;
    height: 3rem;
  }

  .graphs .block.table .tablescroll {
    width: 100%;
  }

  #response,
  #recovery {
    width: 100%;
  }

  @media only screen and (max-width: 600px) {
    div.graphs {
      flex-direction: column;
      gap: 0;
    }
  }
}

.crud-modale-content {
  & .message.system {
    padding: 0.5rem;
    margin: 0.5rem 1rem;
  }

  & th.opties {
    width: 10px;
  }

  & input,
  & textarea,
  & select {
    width: 100%;
  }

  & input[type="submit"],
  & input[type="checkbox"],
  & .tablesearch {
    width: auto;
  }

  & textarea {
    min-height: 5rem;
    field-sizing: content;
  }
}

.dashboard-content {
  & .container.search {
    position: relative;
    width: 100%;
    padding-top: 0;
    column-span: all;

    & .fa-search {
      position: absolute;
      right: 1em;
      top: 1.1em;
    }

    & .search-results {
      display: none;
      z-index: 9000;
      position: absolute;
      margin: 0px;
      background-color: white;
      width: auto;
      max-width: 100%;
      border-radius: 0 0 4px 4px;
      border-top: 0;
      margin-top: -4px;
      padding: 0.5rem;
    }
  }
}

.dashboardhoeflake-module-content {
  & .response-span {
    font-weight: 600;
    font-size: 16px;
    padding: 1rem 0 0;
  }

  & .nograph {
    height: 4rem;
    font-size: 2.5rem;
    padding: 0.5rem;
    width: 200px;
  }

  /* Algemeen */
  & h1 {
    text-align: center;
    font-size: 2rem;
    padding: 1.5rem;
    font-weight: 900;
  }

  & h2 {
    text-align: center;
  }

  & tr {
    border-left: none;
  }

  & tbody tr:hover {
    border-left: 0px solid silver;
  }

  /* Graphs */
  & div.graphs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
  }

  & .graphs {
    & .block {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      & h2 {
        font-size: 3rem;
      }

      & strong {
        font-size: 1.5rem;
      }

      &.square {
        aspect-ratio: 1 / 1.15;

        & h2 {
          font-weight: normal;
          border: 0.75rem solid hsl(220, 56.4%, 97%);
          border-radius: 50%;
          width: 50%;
          aspect-ratio: 1 / 1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1.5rem;
        }
      }
    }

    & small {
      height: 4rem;
      line-height: 1.5rem;
      padding: 1rem;
      font-size: 13px;
    }
  }

  & select.graph {
    width: 50%;
    border: 0;
    padding: 1rem;
    border-radius: 0.25rem;
    border-right: 1rem solid white;
    height: 3rem;
  }

  /* Tabellen */
  & th.\#,
  & th.Bekijk,
  & th.Percentage,
  & th.Installatienr,
  & th.Aantal {
    width: 5px;
    white-space: nowrap;
  }

  & td.Percentage::after {
    content: "%";
  }

  & .headerSortDown,
  & .tablesorter-headerSortDown,
  & .tablesorter-headerDesc,
  & .headerSortUp,
  & .tablesorter-headerSortUp,
  & .tablesorter-headerAsc {
    background-color: white !important;
  }

  /* Blocks */
  & .block {
    & th:first-of-type,
    & td:first-of-type {
      padding-left: 0 !important;
    }

    & th:last-of-type,
    & td:last-of-type {
      padding-right: 0 !important;
    }

    &.table {
      align-items: flex-start;
      justify-content: flex-start;
      padding: 1rem !important;
      margin: 0 0 1rem 0;

      & thead {
        top: 4.5rem;
      }

      & th {
        color: rgb(98, 195, 225);
      }

      & strong {
        font-size: 1rem;

        & span {
          background: silver;
          border-radius: 50%;
          display: inline-block;
          width: 1rem;
          height: 1rem;
          font-size: 0.75rem;
          line-height: 1rem;
        }
      }

      & .tablescroll {
        width: 100%;
      }

      & a {
        background: rgb(251, 203, 45);
        color: rgb(4, 66, 105);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        text-decoration: none;
      }
    }

    &.rainbow {
      padding: 1.5rem !important;

      & h2 {
        font-weight: normal;
        margin-top: 1rem;
        font-size: 2rem;
      }

      & strong {
        font-size: 1rem !important;
        margin-bottom: 1rem;
      }
    }
  }

  /* Pie chart */
  & .pie {
    --p: 20;
    --b: 11px;
    --c: darkred;
    --w: 160px;

    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;

    &::before,
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    &::before {
      inset: 0;
      margin: -0.75rem;
      background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top / var(--b)
          var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
      -webkit-mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--b)),
        #000 calc(100% - var(--b))
      );
      mask: radial-gradient(
        farthest-side,
        #0000 calc(99% - var(--b)),
        #000 calc(100% - var(--b))
      );
    }

    &::after {
      inset: calc(50% - var(--b) / 2);
      background: var(--c);
      transform: rotate(calc(var(--p) * 3.6deg))
        translateY(calc(50% - var(--w) / 2));
    }
  }

  & .animate {
    animation: p 1s 0.5s both;
  }

  & .no-round {
    &::before {
      background-size:
        0 0,
        auto;
    }

    &::after {
      content: none;
    }
  }

  /* Multigraph */
  & .multigraph::before {
    content: "";
    width: 200px;
    height: 100px;
    position: absolute;
    border: 30px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    border-radius: 200px 200px 0 0;
    margin-left: -100px;
  }

  & span.graph {
    width: 200px;
    height: 100px;
    position: absolute;
    overflow: hidden;
    margin-left: -100px;

    &::before,
    &::after {
      content: "";
      width: 200px;
      height: 100px;
      position: absolute;
      top: 100%;
      border: 30px solid var(--c);
      border-top: none;
      border-radius: 0 0 200px 200px;
      animation: demo 3s;
      transform-origin: center top;
      margin-left: -100px;
    }

    &::after {
      transform: rotate(calc(var(--p) * 1.8deg));
    }
  }

  & .tooltip {
    width: 80px;
    height: 30px;
    background: lightgrey;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
    color: #000;
    border: 10px solid grey;
    position: absolute;
    left: 50%;
    bottom: -40px;
    margin: -40px;
    transition: all 300ms ease-in-out;
    opacity: 0;
    transform: scale(0.1);
  }

  /* Print */
  @media print {
    @page {
      size: A4;
      margin: 10mm;
    }

    div.graphs {
      max-width: 800px;
    }

    .graphs:has(.rainbow) {
      flex-direction: column;
    }

    h1 {
      line-height: 3rem;
    }

    .printbreak {
      display: block;
    }

    .block {
      border: 0;

      & table thead {
        position: static !important;
      }

      &.rainbow {
        padding: 0 !important;
      }
    }

    .noprint,
    footer,
    #navigation {
      visibility: hidden;
      display: none;
    }

    h1:not(:first-child),
    .block.table.available {
      min-height: 1px;
      page-break-before: always;
    }
  }
}

.dashboard th,
.dashboard td {
  width: auto;
}

.dashboard .aantal {
  width: 45px;
}

.dashboard.map #map {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.dashboarddoorloop-module-content {
  & h1,
  & h2,
  & div.graphs .block {
    text-align: center;
  }

  & h1 {
    font-size: 2rem;
    padding: 1.5rem;
    font-weight: 900;
  }

  & div.graphs {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: auto;

    & form {
      display: flex;
      gap: 1.5rem;
    }

    &.nowrap {
      flex-wrap: nowrap;
    }
  }

  & .graphs .block {
    flex: 1;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;

    & .tablescroll {
      width: 100%;
    }
  }

  & select.graph {
    border: 0;
    padding: 1rem;
    border-radius: 0.25rem;
    border-right: 1rem solid white;
    height: 3rem;
  }

  & .block {
    border: 0;

    & h3:not(.normal) {
      border-top: 1rem solid hsl(220, 56.4%, 97%);
      top: 4.5rem;
    }

    & table thead {
      top: 4.5rem;
    }
  }

  & .block.table {
    padding: 1rem;
    margin: 0 0 1.5rem 0;

    & strong {
      font-size: 1rem;

      & span {
        background: silver;
        border-radius: 50%;
        display: inline-block;
        width: 1rem;
        font-size: 0.75rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
      }
    }

    & table {
      width: 100%;
    }
  }

  & .block.table.center {
    align-items: center;
    text-align: center;

    & h1 {
      font-size: 3rem;
      line-height: 2.5rem;
    }
  }

  & #response,
  & #recovery {
    width: 100%;
  }

  @media only screen and (max-width: 600px) {
    div.graphs {
      flex-direction: column;
      gap: 0;
    }
  }
}

.datareport-module-content {
  & .sticky-footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 2px solid var(--border-color);
    z-index: 1;
    display: flex;
    padding: 0.5rem 1.5rem;

    & .resultcount {
      padding: 0.5rem 1.5rem;
    }
  }

  @media print {
    @page {
      size: landscape;
    }

    #debug,
    #navigation,
    .crumble,
    .message,
    #formpost,
    #footer,
    .debug,
    .resultcount {
      display: none;
    }
  }
}

.datareportv2-module-content {
  & .builder {
    position: relative;
    z-index: 10;
  }

  & .map {
    padding: 0;
    border: 0.75rem solid #fff;
    border-radius: 4px;
  }

  & .results {
    overflow: hidden;
    max-height: 275px;
  }

  & .checkbox-primary {
    display: inline-block;
    width: auto;
    padding: 4px;
    margin: 0;
  }
}

.dimregime-module-content {
  & .message {
    input[type="button"] {
      float: none;
    }
  }

  & .error {
    background: #eee;
    display: none;
  }

  & .overzichttabel {
    & tr > :nth-child(2n + 3) {
      background: #efefef;

      [data-theme="dark"] & {
        background-color: #2a2a2a;
      }
    }
  }

  & .fa-pencil-alt,
  & fa-times {
    font-size: 0.9rem;
  }
}

.documents-module-content {
  & form input[type="submit"] {
    float: none;
    margin: 0;
    font-weight: bold;
    padding: 0 1rem;
  }

  & .block p {
    padding: 1.5em 1.5em 0 1.5em;
  }
}

.dov-dashboard-content {
  & .map-dov {
    height: 400px;
    border: 0.75rem solid var(--background-primary-color);
  }

  & .aantal,
  & .meldingen,
  & .laatste-update {
    width: 10px;
    white-space: nowrap;
  }

  & td pre {
    color: black;
    font-family: Courier, monospace;
  }
}

.dov-module-content {
  & .block th.klant,
  & .block td.klant {
    padding-left: 1.5em;
  }
}

.dov-content {
  & .fa-link,
  & .fa-asterisk {
    margin-left: 10px;
    color: #f19b40;
  }

  /* Tooltip container */
  & .tooltip {
    position: relative;
    display: inline-block;
  }

  /* Tooltip text */
  & .tooltip .tooltiptext {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    text-align: left;
    padding: 5px 5px;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

    top: -5px;
    left: 150%;
  }

  & .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border: 5px solid transparent;
    border-right-color: #555;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  & .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  & .btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
  }

  & .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }

  & .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  & .block {
    margin: 1.5rem 0;
    padding: 1rem 0 0 0;
  }
}

@keyframes exporter-module-content-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes exporter-module-content-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes exporter-module-content-scale {
  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes exporter-module-content-fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

.exporter-module-content {
  & .export-name-div {
    padding: 1rem;

    & input[type="text"] {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
  }

  & .export-options {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(5, 1fr);
  }

  & .information-search-title {
    display: flex;
    gap: 1rem;

    & span {
      flex-grow: 1;
    }

    & input {
      width: 100%;
    }
  }

  & .checkmark {
    margin: 1rem auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: block;
    stroke-width: 4;
    stroke: #fff;
    stroke-miterlimit: 10;

    &.waiting {
      animation: exporter-module-content-rotate 2s linear infinite;

      & .checkmark__circle {
        animation:
          dash 1s ease-in-out infinite,
          color 6s ease-in-out infinite;
      }
    }

    &.done {
      animation:
        fill 0.4s ease-in-out 0.4s forwards,
        exporter-module-content-scale 0.3s ease-in-out 0.9s both;

      & .checkmark__circle {
        animation:
          stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards,
          color 6s ease-in-out infinite;
        stroke: #7ac142;
      }

      & .checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        stroke-width: 4;
        stroke-linecap: round;
        animation: exporter-module-content-stroke 0.3s
          cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
      }
    }
  }

  & .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 4;
    stroke-miterlimit: 10;
    stroke: #bbb;
    fill: none;
    stroke-linecap: round;
  }

  & tr {
    width: 100%;
  }

  & .ui-state-highlight td {
    height: 1.5em;
    line-height: 1.2em;
    background: yellow !important;
    color: black;
    position: relative;
  }

  & pre {
    background: black;
    color: white;
    padding: 1rem;
    border-radius: 4px;
  }

  & td input {
    width: 250px;
  }
}

.financieel-filter {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 1.5rem !important;
  flex-direction: row;
  justify-content: space-between;

  & .check_cause,
  & #check_type,
  & #check_prio {
    display: flex;
    flex-direction: column;
  }
}

.financieel-filter-snel {
  display: flex;
  padding: 0.5rem 1.5rem;
}

.financieel-invoice {
  background-color: #c98985;
}

#footer {
  background: #eeeeee;
  line-height: 1.5;
  font-size: 10px;
  margin: 0 0 0 0;
  padding: 1rem 0 3rem;
  position: absolute;
  width: 100%;
  bottom: 0;

  & .wrapper div {
    font-size: 14px;
    padding: 0;
    line-height: 1.75;
    text-align: left;
  }

  & > .wrapper {
    min-height: 0px;
  }
}

footer {
  display: flex;
  padding: 1.5rem;
  border-radius: 0;
  font-size: 0.75rem;
  line-height: 1.5rem;
  flex-shrink: 0;
  background-color: var(--brand-color);
  color: var(--secondary-color);

  & a {
    text-decoration: none;
    float: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    background: none;
    font-size: inherit;
    color: #fff;

    &:hover {
      color: #f98a08;
    }
  }

  & div {
    flex-basis: 100%;
    align-self: flex-end;
    margin-bottom: 0;
  }

  & h4 {
    font-size: 1.25rem;
    margin: 0;
    color: #bbb;
    border: 0;
    padding: 0;
  }

  & small {
    font-weight: normal;
    display: block;
    font-size: 0.9rem;
    line-height: 1.5rem;
    color: #ffc72c;
  }

  [data-theme="dark"] & {
    background-color: #1e1e1e;
    color: #fff;
  }
}

.gebruikers-module-content {
  & .fastselection-label {
    padding: 1.5em 1.5em;
  }

  & .checkbox-options {
    padding: 0.5em 1.5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    & .client-checkboxes {
      display: flex;
      flex-direction: column;
    }
  }

  & .small-padding {
    padding: 0.5rem 1.5rem;
  }

  & .hoverable {
    padding: 0;
  }

  & .col {
    width: 30% !important;
    float: left !important;
  }

  & input[type="text"],
  & select {
    width: 100% !important;
  }
}

.grid .top .map {
  width: 100%;
}

.grid .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1em;
}

.grid .column .map {
  height: 600px;
}

.grid .block {
  margin: 0;
  break-inside: avoid;
  margin-bottom: 1em;
}

.grid div.top .map {
  column-span: all;
}

.grid .map {
  height: 400px;
}

.grid .search {
  column-span: all;
}
.handleproject-content {
  .block.dashboard.map {
    flex-direction: column;
  }
}

.index-content {
  & .login-div {
    max-width: 500px;
    margin: auto;
    border: 1px solid #bbbbbb;
    border-radius: 0.25rem;
    background: var(--background-primary-color);
    padding: 15px;
  }
}

.insights-content {
  & .container.search {
    position: relative;
    width: 100%;
    padding-top: 0;
    column-span: all;
    margin-top: 1em;

    & i {
      position: absolute;
      right: 1em;
      top: 1.1em;
    }

    & .results {
      display: none;
      z-index: 9000;
      position: absolute;
      margin: 0px;
      background-color: white;
      width: auto;
      max-width: 100%;
      border-radius: 0 0 4px 4px;
      border-top: 0;
      margin-top: -4px;
      padding: 0.5rem;
    }
  }

  & div.totals {
    display: flex;
    width: 100%;
    border-radius: 4px;
    border: 1rem solid transparent;
    font-weight: bold;

    & div:first-of-type {
      border-radius: 4px 0 0 4px;
    }

    & div:last-of-type {
      border-radius: 0 4px 4px 0;
    }
  }

  & span.prio.red {
    background: orangered;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
  }
}

img.thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 1rem;
}

.klantinstellingen-module-content {
  & form {
    padding-inline: 1rem;

    & * {
      box-sizing: border-box;
    }

    & div {
      margin: 0.25em 0;
    }

    & h4 {
      margin-bottom: 0.5em;
      padding: 1rem !important;
    }

    & strong {
      width: 150px;
      display: inline-block;
      font-size: 13px;
    }

    & input[type="text"],
    & select,
    & textarea {
      border: 1px solid #ddd;
      padding: 0.35rem;
      border-radius: 0.2rem;
      font-size: 13px;
      width: 100%;
    }

    & input[type="text"]:focus,
    & select:focus,
    & textarea:focus {
      border: 1px solid #999;
    }

    & input[type="submit"] {
      margin-bottom: 1rem;
    }
  }

  & .neighbours-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, 25%);
  }
}

.kleuren-module-content {
  & .float-none {
    float: none;
  }
}

.location-content {
  & .footnote {
    padding: 0.5rem 1.5em;
  }

  & .tab.map {
    height: 400px;
    border: 0.5rem solid #ffffff;
  }

  & .label {
    background: hsl(32, 95%, 50%);
    color: white;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    opacity: 0.7;
    font-weight: bold;
  }

  & .objectnr {
    white-space: nowrap;
  }

  & h3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & div {
      display: flex;
      flex-direction: row-reverse;
    }
  }

  @media only screen and (max-width: 600px) {
    #locations th,
    #locations td {
      display: none;
    }

    #locations th:nth-child(-n + 3),
    #locations td:nth-child(-n + 3) {
      display: table-cell;
    }

    #locations th:last-child,
    #locations td:last-child {
      display: table-cell;
    }

    #locations th.checkbox,
    #locations td.checkbox {
      display: none;
    }

    #locations td:nth-child(3) {
      text-align: right;
      padding-right: 1.5rem;
    }
  }
}

.maintenance-notification {
  display: block;
  text-align: center;
  z-index: 200;
  background: rgba(229, 136, 51, 0.85);
  width: 100%;
  padding: 2em 0;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.malarchive-content {
  h3 {
    display: flex;
    flex: 1;
    justify-content: space-between;

    & div {
      display: flex;
    }
  }

  div#options ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  div#options ul li {
    display: inline;
  }

  h3 a {
    float: inline-start;
  }

  div a.toggle {
    display: none;
  }

  @media (max-width: 800px) {
    div#navigation {
      width: 100%;
      margin: 0;
      border-radius: 0;
    }

    div#navigation:target {
      height: 100vh;
    }

    div.options {
      flex-direction: row-reverse;
    }

    div#options {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: white;
      z-index: 1000;
      display: none;
    }

    div a.toggle.on {
      display: block;
    }

    div a.toggle.off {
      display: none;
    }

    div#options:target {
      display: block;
    }

    div#options:target + div a.toggle.on {
      display: none;
    }

    div#options:target + div a.toggle.off {
      display: block;
    }

    div#options ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 1rem 0;
    }

    div#options ul li {
      display: block;
    }

    div#options ul li a {
      display: block;
      border: 0;
      background: 0;
      width: 100%;
      font-weight: normal;
      padding: 1rem;
      font-size: 1rem;
    }

    div#options a.active {
      background-color: white !important;
      color: black !important;
      font-weight: bold;
    }
  }
}

.malfunction-content {
  & .contractorselect {
    padding: 3px;
    width: 160px;
  }

  & .message {
    & button {
      margin-bottom: 0.25rem;
      color: contrast-color(var(--background-primary-color));
    }
  }

  /*todo: wat doet deze dialog?  */
  dialog {
    margin: auto;
    border: 0;
    border-radius: 4px;
    padding: 1rem;
    width: 80%;
    max-width: 600px;

    & div {
      display: flex;
      justify-content: space-between;

      & select {
        width: 50%;
        border: 1px solid #333333;
        border-radius: 3px;
      }
    }

    & h4 {
      margin: 0;
      padding-top: 0;
    }

    & textarea {
      resize: none;
      border: 1px solid #333333;
      border-radius: 3px;
    }
  }

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .select2-container--default .select2-selection--single {
    border: 1px solid #333333;
    border-radius: 3px;
  }

  .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #333333;
  }
}

.malfunctionanalyse-module-content {
  & .exportknop {
    background-color: #eee;
  }

  /* Tooltip container */
  & .tooltip {
    position: relative;
    display: inline-block;
    color: #cecece;

    & .tooltiptext {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      visibility: hidden;
      width: 500px;
      background-color: #e9e9e9;
      color: #000000;
      text-align: left;
      padding: 10px 10px;
      border-radius: 6px;
      font-size: 12px;
      line-height: 1.4em;
      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 150%;
    }

    & .tooltiptext::after {
      content: " ";
      position: absolute;
      top: 17px;
      right: 100%;
      /* To the left of the tooltip */
      margin-top: -5px;
      border: 5px solid;
      border-color: transparent #e9e9e9 transparent transparent;
    }
  }

  & .tooltip:hover .tooltiptext {
    visibility: visible;
  }
}

.malfunctionrepeat summary {
  background: rgba(250, 221, 159);
}

#mapcontainer {
  max-width: 100%;
  width: 100%;
  border: 0.5rem solid var(--background-primary-color);
  border-radius: 6px;

  & button {
    background-color: var(--background-primary-color);
  }
}

.markers {
  display: flex;

  & input[type="color"] {
    width: 30px;
  }
}

.mechanicused-module-content {
  td {
    white-space: nowrap;
  }
}

.mergetool-module-content {
  & .float-none {
    float: none;
  }
}

.mutatielijsten-module-content {
  form {
    padding-top: 1rem;

    & * {
      box-sizing: border-box;
    }

    & strong {
      width: 150px;
      display: inline-block;
    }

    & input[type="text"],
    & select {
      border: 1px solid silver;
      padding: 0.35rem;
      width: 420px;
      border-radius: 0.2rem;
    }

    & input[type="submit"] {
      float: none;
      margin: 0;
    }
  }

  table th {
    position: sticky;
    top: 54px;
  }
}

.mutations-content {
  & .input-date {
    width: 130px;
  }

  & td.product {
    display: flex;
  }

  & .select2-container {
    flex-grow: 1;
  }
}

.nen-module-content {
  & .img-thumb {
    max-width: 200px;
    max-height: 200px;
  }
}

.objects-summary {
  & img {
    height: 2rem;
    position: absolute;
  }

  & span {
    padding-left: 2rem;
  }
}

.object-content {
  & .search-form {
    padding: 1rem;

    & select,
    & input[type="text"] {
      width: 80%;
      float: right;
    }
  }

  & .container.search {
    position: relative;
    width: 100%;
    padding-top: 0;
    column-span: all;
    margin-top: 1em;

    & .fa-search {
      position: absolute;
      right: 1em;
      top: 1.1em;
    }

    & .results {
      display: none;
      z-index: 9000;
      position: absolute;
      margin: 0px;
      background-color: white;
      width: auto;
      max-width: 100%;
      border-radius: 0 0 4px 4px;
      border-top: 0;
      margin-top: -4px;
      padding: 0.5rem;
    }
  }

  & .map-cyclomedia-buttons {
    display: flex;
    justify-content: space-between;
  }

  & small {
    font-size: 0.75rem;
  }

  & .logtable td {
    font-size: 11px;
    padding: 0;
    margin: 0;
  }

  & .logtable td.gekeurd em,
  & .logtable td.archief em {
    background: none;
  }

  & #specs form strong {
    width: 150px;
  }

  & table.smalltds td input[type="text"] {
    width: 150px;
  }

  & .selector {
    width: 150px;
  }

  & textarea.memo {
    width: 150px !important;
    height: 140px;
  }

  & .approved,
  & .id,
  & .highlight {
    display: none;
  }
}

.objectmeta-module-content {
  & td input,
  & td select {
    width: 100%;
    box-sizing: border-box;
  }

  & .id {
    display: none;
  }

  & .verwijderen {
    width: 100px;
  }
}

@keyframes objectMutate-shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(1px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}

.objectMutate-content {
  &,
  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  & .working {
    display: none;
  }

  & .wrapper {
    width: 100% !important;
    padding: 0 1.5em !important;
  }

  /* Details */
  & details,
  & summary {
    margin: 1rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: var(--border-color);
    font-size: 11px;
  }

  & summary {
    padding: 0;
    font-weight: normal;
  }

  & details ::marker {
    font-size: 11px;
  }

  /* Structure */
  & #structure {
    margin: auto;
    font-family: sans-serif;
    font-size: 13px;

    & ul {
      display: flex;
      flex-direction: column;
      padding: 0;
      list-style: none;

      &.before::before,
      &.wrap::before,
      &.in::after,
      &.after::after {
        content: "";
        display: block;
        width: 300px;
        height: 2px;
        border: 1px solid black;
      }

      &.before::before {
        position: absolute;
        margin-left: 1.5rem;
        margin-bottom: -1px;
      }

      &.wrap::before {
        position: absolute;
        margin-left: 0;
        margin-bottom: -1px;
      }

      &.in::after {
        margin-left: 3rem;
        margin-bottom: -2px;
      }

      &.after::after {
        margin-left: 1.5rem;
        margin-bottom: -2px;
      }
    }

    & li {
      & > ul {
        margin-left: 1.5rem;
      }

      & div {
        display: flex;
        align-items: center;
        margin-left: 1.5rem;
        border-top: 1px solid transparent;
        border-bottom: 1px solid var(--border-color);
        line-height: 2.25rem;
        font-variant-numeric: tabular-nums;
      }

      & span {
        padding: 0 1rem;
        font-variant-numeric: tabular-nums;
      }

      & a {
        flex-grow: 1;
      }
    }

    & ul.wrap {
      margin-left: 3rem;

      &[parent="0"],
      & ul {
        margin-left: 1.5rem;
      }
    }

    & button {
      display: inline-block;
      width: 2rem;
      border: none;
      border-right: 1px solid white;
      background: none;
      font-size: 15px;
      font-weight: bold;

      &:hover {
        background: silver;
        cursor: pointer;
      }
    }
  }

  & li div:has(.cancel) {
    color: silver;
  }

  /* Shake */
  & .shake {
    animation: objectMutate-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97)
      both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  & input[type="checkbox"]:checked {
    accent-color: yellowgreen;
  }

  /* Dialog */
  & dialog {
    width: 500px;
    margin: auto;
    padding: 1.5rem;
    border: 0;
    border-radius: 4px;

    &::backdrop {
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(3px);
    }

    & form {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    & h1 {
      margin: 0 0 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #bbb;
      font-size: 1.25rem;
    }

    & p,
    & label {
      margin: 0;
      padding: 0;
    }

    & label {
      display: flex;
      justify-content: space-between;
    }

    & strong {
      display: inline-block !important;
      float: none !important;
      width: auto !important;
      padding: 0 !important;
    }

    & button,
    & select,
    & input[type="date"] {
      width: 100%;
      padding: 0 6px;
      border: 1px solid #aaa;
      border-radius: 4px;
      background-color: #fff;
      line-height: 28px;
    }

    & [type="submit"] {
      border: 0;
      background: black;
      color: white;
    }

    & [type="reset"],
    & [type="button"] {
      border: 1px solid black;
      background: white;
      color: black;
    }

    & [type="submit"],
    & [type="reset"],
    & [type="button"] {
      &:hover {
        cursor: pointer;
      }
    }

    & #mostused {
      padding: 0.5rem 1rem;
      border-radius: 4px;
      background: #efefef;
      font-size: 90%;
    }
  }

  /* Select2 */
  & .select2-container--default .select2-results > .select2-results__options {
    max-height: 110px;
    overflow-y: auto;
  }

  /* Tooltip */
  & [tooltipsov]:hover::before {
    content: attr(tooltipsov);
    position: absolute;
    z-index: 5;
    width: auto;
    margin: 2rem 0 0 4rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5rem;
    text-align: left;
    white-space: pre-wrap;
    font-variant-numeric: tabular-nums;
  }

  /* Switcher */
  & span.switcher {
    position: absolute;
    right: 2rem;
    width: 247px;
    text-align: right;

    & a {
      padding-left: 0.5rem;
    }
  }
}

.objectmutations-content {
  & .base-padding {
    padding: 0.5rem 1rem 0;
  }

  & input[type="submit"] {
    margin: 1rem;
  }

  & th.type,
  & td.type {
    padding-left: 1rem;
  }
}

.objectRestore-popup {
  .wrapper {
    width: 100% !important;
    padding: 1rem;
  }

  #popup {
    background: white;
    min-height: 100vh;
  }

  h3,
  h4 {
    font-weight: normal !important;
  }

  .tsearch {
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
  }

  #filteradd,
  #filterreplace {
    width: 100%;
    padding: 0.5rem;
  }

  form div {
    display: flex;
  }

  form div strong {
    width: 200px;
  }

  .empty {
    margin-left: 0.25rem;
  }
}

.oplosdagentool-module {
  & .dagen {
    width: 30px;
  }

  & td {
    vertical-align: middle;
  }

  & #aangepast {
    padding: 0.25rem 1rem !important;
    margin: 1rem;
  }

  & tr :has(.delete) {
    background: yellow;
  }
}

.overview-content {
  & .leftpanel {
    display: flex;

    & .filters {
      min-height: 100%;

      & .block {
        padding: 0.5rem;
      }

      & .toggle {
        cursor: pointer;
      }

      & .toggled-filters {
        padding: 5px;
        display: none;
      }
    }
  }

  & .block.counter {
    text-align: center;
  }

  & .results {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    & .block {
      width: calc(100% / 4 - 1rem);
      display: flex;
      flex-direction: column;
      margin: 0.5rem;
      padding: 0.75rem !important;
    }
  }
}

.previewoverlay {
  & .block.preview {
    width: 400px;
    margin: auto;
  }
}

.product-content {
  & .new-product-form {
    padding: 1rem;
  }

  & .change-product-form {
    & textarea {
      field-sizing: content;
      min-height: 4rem;
    }

    & div {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 0.5rem;

      & div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.5rem;
      }
    }

    & input[type="submit"] {
      justify-self: center;
      align-self: center;
    }

    & & textarea {
      resize: none;
    }
  }

  & .files {
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    padding: 1rem;

    & a[download] {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 90%;
    }
  }

  & img {
    margin-right: 15px;
  }
}

.productinfo-content {
  padding: 1rem 0;

  & .top {
    top: auto !important;
  }

  & .td-key {
    width: 10px;
    white-space: nowrap;
  }

  & .submit-button {
    background: var(--brand-color);
    color: var(--background-primary-color);
    border-radius: 4px;
    padding: 0.5rem;
    text-decoration: none;
  }
}

.productmeta-module-content {
  & form {
    padding: 0.5rem;

    & strong,
    & select,
    & input {
      margin-bottom: 0.25rem;
    }

    & strong {
      margin-right: 0.5rem;
    }
  }

  & button {
    margin-left: 0.5rem;
  }

  & .ui-menu {
    width: 200px;
    list-style: none;
    padding: 0 8px;
  }

  & .verwijderen {
    width: 80px;
    white-space: nowrap;
  }
}

.projectmap-module-content {
  [data-theme="dark"] & .map-explanation button {
    background-color: #fff;
    filter: invert(1);
  }
}

.remarksdefault-module-content {
  & th.opties {
    width: 10px;
  }

  & input,
  & textarea,
  & select {
    width: 100%;
  }

  & input[type="submit"],
  & input[type="checkbox"],
  & .tablesearch {
    width: auto;
  }
}

.specification-module-content {
  & form {
    padding: 1rem;
  }
}

.swarco-module-content {
  & form {
    padding: 1rem;
  }
}

.upload-overview {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.usersettings-custom-content {
  & th.klant {
    width: auto;
  }

  & thead {
    & th {
      width: 10px;
    }
  }

  & tbody {
    & th {
      font-weight: normal !important;
      border-color: var(--border-color);
      padding: 0rem !important;
    }

    & td {
      white-space: nowrap;
    }
  }
}

.wrapper {
  position: relative;
  left: 0;
  margin: 0 auto;
  margin-left: auto;
  width: 100%;
  padding: 0 1.5em;
}

.popup .wrapper {
  width: 96%;
  left: 50%;
  margin-left: -48%;
}

.resultspreview {
  display: none;
  text-align: center;
  position: fixed;
  z-index: 2000;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: auto;
  padding: 1em;
  font-size: 2em;
}

.schakelkast-content {
  & .block.map {
    width: auto;
    height: 500px;
  }

  & .approved,
  & .id,
  & .highlight {
    display: none;
  }
}

.statistics-module-content {
  table.stats {
    table-layout: fixed;
  }

  table.stats th:not(.maand),
  table.stats td:not(.maand) {
    text-align: right;
    white-space: nowrap;
    width: 100px;
  }

  table.stats td.Totaal,
  table.stats td.kwartaal {
    text-align: left;
  }

  table tr:has(strong.total) td {
    font-weight: bold;
  }
}

.stats-module-content {
  th.type,
  td.type,
  th.link,
  td.link {
    display: none;
  }

  th.meldingstype,
  td.meldingstype {
    padding-left: 1rem;
  }
}

.totals-module-content {
  & ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .holder {
    border: 4px solid #666666;
    width: fit-content;
    border-radius: 4px;
    margin: 1rem;

    & * {
      font-family: monospace !important;
    }

    & span {
      color: white;
      z-index: 1;
      background: black;
      padding: 0.1rem 1rem;
      text-align: center;
      display: block;
    }
  }

  & .counters {
    display: flex;
    clear: both;
  }

  & .wrap {
    text-align: center;
    overflow: hidden;
    height: 4rem;
    line-height: 4rem;
    position: relative;
    display: flex;
    justify-content: center;
    background: black;
    width: 16.5rem;

    & ol {
      font-size: 2rem;
      font-weight: bold;
      line-height: 1;
      margin: 0 1px;
      position: relative;
      font-family: monospace !important;
      color: white;

      &.c1 {
        color: orange;
      }
    }

    & li {
      height: 4rem;
      line-height: 4rem;

      padding: 0 0.5rem;
      background: #222;
      border-radius: 4px;
    }
  }
}

.user-content {
  & .hoverable {
    padding: 0;
  }

  & .col {
    width: 30%;
    float: left;
  }

  & input[type="text"],
  & select {
    width: 100% !important;
  }
}

.usersettings-content {
  & #previewoverlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: none;
  }

  & a.close {
    position: absolute;
    float: right;
    background: black;
    display: block;
    width: 2em;
    height: 2em;
    color: white;
    font-weight: bold;
    font-size: 1.25em;
    padding: 0.5em;
    line-height: 1em;
    border-radius: 50%;
    margin-left: 380px;
    text-align: center;
    text-decoration: none;
    margin-top: -1em;
    border: 1px solid white;
  }

  & .block.preview h3 {
    padding: 0 1em;
    border-bottom: 1px solid #efefef;
    padding-bottom: 0.75em;
    margin: 0;
    font-size: 1.25em;
    background: url("https://v3.moononline.nl/assets/images/MOON%20-%20RGB%20icoon%20connectiviteit%20GRIJS%20+%20ORANJE.svg")
      no-repeat;
    background-size: 1.5em;
    background-position: 15px -4px;
    padding-left: 3em;
  }

  & .dash {
    border: 1px dotted silver;
    width: calc(33.3% - 1rem);
    float: left;
    padding: 1em;
    margin: 1em;
  }

  & .large {
    width: calc(100% - 1.5rem);
    float: none;
    margin: 0 2em;
  }

  & .fragments {
    border: 1px dotted silver;
    width: 300px;
    float: right;
    padding: 1em;
  }

  & .connectedSortable {
    list-style: none;
    border: 1px solid silver;
    border-radius: 4px;
    background: var(--comment-color);
  }

  & .ui-state-highlight {
    padding: 0.5em;
    margin-bottom: 0.25em;
    border-radius: 4px;
    background: var(--background-primary-color);
    color: var(--primary-color);
    border-color: var(--border-color);

    &:before {
      content: "" !important;
    }

    & a {
      float: right;
    }
  }

  & div.columns {
    clear: both;
  }

  & div.themes {
    clear: both;
  }

  & .themes div {
    float: left;
    clear: none;
    width: 25%;
  }

  & .themes .fragments {
    float: none;
    clear: both !important;
  }

  [type="button"] {
    margin: 1.5rem !important;
  }

  & .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.verkeernu-module-content {
  & td input,
  & td select {
    width: 100%;
    box-sizing: border-box;
  }

  & .id {
    display: none;
  }

  & .verwijderen {
    width: 100px;
  }
}

.verledding-module-content {
  & #content:not(.middle) {
    padding: 0;
  }
}

.verledding-module-center {
  margin-top: 2rem;
}

.vri {
  width: auto;
  height: 500px;
}

/* #endregion */

/* #region Navigation */
.border-g {
  border: 1px solid #b9b9b9;
}

.context li i {
  float: right;
  margin: 0.25rem;
  display: none;
}

#navigation {
  & .theme-buttons {
    display: flex;
    justify-content: space-around;

    & [data-theme-keuze] {
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 1.5rem;
      padding-top: 0.25rem;
      margin-top: 0.2rem;
      cursor: pointer;

      &::after {
        content: attr(aria-label);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 0.25rem;
        padding: 0.25rem 0.5rem;
        background: var(--background-primary-accent-color);
        color: var(--primary-color);
        font-size: 0.75rem;
        white-space: nowrap;
        border-radius: 4px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
      }

      &:hover::after {
        opacity: 1;
      }

      &.active {
        border-radius: 4px;
        background-color: var(--background-primary-accent-color);

        & i {
          color: var(--brand-color);
        }
      }

      & i {
        font-size: 12px;
        height: 16px;
      }
    }
  }
}

#navigation a.selected {
  color: var(--brand-color);
}

#navigation i {
  font-size: 18px;
  margin: -0.25rem 0.25rem;
}

div.context ul {
  margin: 0;
  display: none;
  list-style: none;
  border-radius: 5px;
  background: var(--background-primary-color);
  width: auto;
  padding: 0.35rem;
}

div.context ul a {
  padding: 0.15rem 0.75rem;
  white-space: nowrap;
  display: block;
  text-decoration: none;

  &:hover {
    background: var(--brand-color);
    color: contrast-color(var(--brand-color));
    border-radius: 4px;
  }

  &[href="#"] {
    color: silver;
    cursor: not-allowed;

    &:hover {
      font-weight: normal;
      background: none;
    }
  }
}

div.context li.bt {
  border-top: 1px solid #ddd;
  margin-top: 6px;
  padding-top: 6px;
}

div#navigation {
  z-index: 9500;
  position: sticky;
  top: 0;
  padding: 16px 0 0 0;
  border-bottom: 1px solid var(--input-color);
  background: var(--background-primary-color) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 74px !important;

  & h1 {
    float: left;
    position: absolute;
    top: -16px;
    border: 0;
    width: auto;
    padding: 0px;
    background: none;
    cursor: pointer;
    z-index: 9999;

    & a {
      padding: 22px 19px 10px 20px;
      line-height: 2rem;
    }

    & img {
      width: 80px;
    }

    & span {
      margin-left: -9999px;
    }

    &:hover {
      top: -16px;
      background: none;
      border: 0px solid var(--brand-color);
      width: auto;
      padding: 0;

      & img {
        transform: scale(1.05);
      }
    }
  }

  li {
    float: left;
    position: relative;
    padding-left: 0.5em;

    & * {
      color: var(--primary-color);
    }

    & a {
      font-size: 14px;
      padding-left: 0.25em;
      text-transform: capitalize;
      font-weight: 800;
    }

    &.right {
      float: right;
      padding-left: 0;
      padding-right: 0.25em;
    }

    &li.selected a.selected {
      color: var(--brand-color);
      font-weight: bold;
    }

    &.grow {
      flex-grow: 1;
    }
  }
}

div#navigation li li a {
  padding: 0.25rem;
  font-weight: normal;
}

div#navigation li ul {
  display: none;
}

div#navigation li:hover ul {
  position: absolute;
  background-color: var(--background-secondary-color);
  margin-top: 15px !important;
  padding-bottom: 0.5rem;
  margin-left: -52px !important;
  left: 46px;
  top: 15px;
  z-index: 200;
  border: none;
  border-radius: 0 0 0.5rem 0.5rem;
  flex-direction: column;
  width: auto !important;
  display: block;
}

div#navigation a {
  font-size: 12px;
  color: var(--primary-color);
  text-decoration: none;
  line-height: 12px;
  display: block;
  padding: 1rem 0;
  margin-top: -10px;
}

div#navigation ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-left: 5rem;
}

div#navigation ul li a {
  font-size: 14px;
  font-weight: normal;
  padding: 1rem 0 1rem;
  line-height: 41px !important;
  margin-top: -16px;

  &:hover {
    color: var(--brand-color);
  }
}

div#navigation ul li ul li a {
  margin-top: 0;
  line-height: 1rem;
}

div#navigation ul ul {
  margin: 0;
  padding: 0;
}

div#navigation ul ul li {
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 23px;
}

div#navigation ul ul li.bordertop {
  border-top: 1px solid #ddd !important;
  margin-top: 0.5rem;
}

div#navigation ul ul li a {
  font-size: 13px;
  padding: 0 !important;
  padding: 0 1rem;
  margin: 0;
  height: auto;
  color: var(--primary-color);
  line-height: 28px;
  white-space: nowrap;
  width: auto !important;
  display: block;

  &:hover {
    text-decoration: none;
  }
}

div#navigation div ul li a:hover {
  color: var(--brand-color);

  & span {
    color: var(--secondary-color);
  }
}

div#navigation img.icon {
  vertical-align: middle;
}

div#navigation select {
  margin-top: 12px;
}

div#navigation:target .mobnav {
  display: none !important;
}

div#navigation .wrapper {
  padding: 0 1.5em 0 0 !important;
}

.mobnav {
  display: block !important;
  float: right;
  font-size: 25px !important;
  padding: 13px 0 !important;
  color: var(--primary-color);
}

.mobnav,
#mobnavclose {
  display: none !important;
}

/* #endregion */

/* #region Buttons */
button {
  background-color: var(--background-primary-color);
  color: var(--brand-color);

  &.secondary {
    background-color: var(--brand-color);
    color: var(--secondary-color);
  }

  &.red {
    border: none;
    background-color: var(--danger);
    color: contrast-color(var(--danger));

    &:hover {
      background-color: var(--danger-hover);
      color: contrast-color(var(--danger-hover));
    }
  }
}

.buttonapprove {
  background: var(--background-buttonapproved-color);
  color: var(--primary-color);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  margin: 0 0 1rem 1rem;
  display: inline-block;
  text-decoration: none;
}

.buttongroup {
  padding-left: 5px;
}

:is(.objectinfo, .buttongroup, #buttongroup) a.link {
  font-size: 11px;
  background: var(--background-primary-colorolor);
  padding: 5px;
  line-height: 10px;
  text-decoration: none;
  color: var(--brand-color);
  border-radius: 3px;
  border-color: var(--brand-color);
  display: inline-block;
  margin: 0.25em 0.5em 0.25em 0 !important;

  &:hover {
    background-color: var(--brand-color);
    color: contrast-color(var(--brand-color));
  }
}

.objectinfo {
  float: none;
}

.objectinfo a:not(:first-child) {
  margin-left: 1em;
}

a.linklikebutton {
  border: 0;
  float: right;
  font-size: 12px;
  background: #bbbbbb;
  padding: 3px 5px;
  margin: 5px 0 5px 5px;
  line-height: 2;

  text-decoration: none;
  color: var(--secondary-color);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}

a.calamity {
  background: red !important;
  border-radius: 4px !important;
  padding: 0 0.75rem 0 0 !important;
  margin: 6px 0px 0 0 !important;
  color: var(--secondary-color);
}

.notification-details__buttons a {
  margin: 0.25rem;
}

#results a {
  font-size: 10px;
  padding: 3px;
  float: right;
  background: black;
  color: white;
  border-radius: 4px;
  line-height: 10px;
  margin: 4px;
  text-decoration: none;
}

/* #endregion */

/* #region Forms */
#addmalfunction {
  & #location-object {
    & input {
      max-width: 250px;
    }
  }

  & .message {
    margin: 1rem;
    color: block;
  }

  & #map {
    width: auto;
    height: 500px;
  }

  & #locationhistory {
    display: none;
  }
}

.commentval {
  field-sizing: content;
  min-height: 6rem;
}

.coordinates {
  .clickable {
    cursor: pointer;
    text-decoration: none;
    margin: 6px;
  }
}

form div {
  clear: both;
  padding: 0.25rem 0;
  margin-bottom: 0;
}

form h4 {
  clear: both;
  padding: 1rem 1.5rem;
}

form div.col {
  float: none;
  width: 100%;
  clear: none;
  padding: 0.5rem 1.5rem;
}

form div.col strong {
  display: block;
}

form div.col input[type="text"] {
  width: 170px;
}

input {
  background-color: var(--background-primary-color);
  accent-color: var(--primary-color);
  color: var(--primary-color);
  border: 1px solid #bbb;

  &[type="file"] {
    margin-right: 5px;
  }
}

input[type="password"],
input[type="text"] {
  font-size: 13px;
  padding: 4px;
  line-height: 10px;
  text-decoration: none;
  color: var(--primary-color);
  border-radius: 3px;
}

input[type="submit"],
input[type="button"] {
  border: 0;
  float: right;
  font-size: 12px;
  background: var(--brand-color);
  padding: 3px 5px;
  margin: 5px 0 5px 5px;
  line-height: 2;
  text-decoration: none;
  color: var(--secondary-color);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;

  &:hover {
    background: var(--background-orange-color);
    color: var(--secondary-color);
    text-shadow: none;
  }
}

input[type="button"] {
  border: 2px solid var(--brand-color);
  background: var(--background-primary-color);
  color: var(--brand-color);

  &.secondary {
    background-color: var(--brand-color);
    color: var(--secondary-color);
  }
}

form input[type="button"],
form input[type="submit"] {
  float: none;
  font-weight: bold;
  padding: 0.25rem 1rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

form.malfunctionmeta {
  & .strong-td {
    width: 200px;
    display: inline-flex;
  }
}

.menu-location-select {
  width: 120px;
}

.object2client-form {
  & ul {
    list-style: none;
    padding: 0;
  }
}

.objectsettings-form {
  & .fa-arrow-circle-right {
    font-size: 14px;
    color: gray;
    cursor: pointer;
    text-decoration: none;
    margin: 6px;
  }

  & .objectsettings-form-submit {
    padding: 1rem;
  }
}

#productdetail strong,
form strong:not("dropzone") {
  display: block;
  float: left;
  width: 130px;
  text-align: right;
  padding-right: 1em;
}

form.malfunction-edit-form {
  display: flex;
  flex-direction: column;
}

select {
  max-width: 100%;
  padding: 4px;
  border: 1px solid #bbb;
  background-color: var(--background-primary-color);
  color: var(--primary-color);
  font-size: 13px;
  line-height: 10px;
  text-decoration: none;
  border-radius: 3px;
}

.selector {
  width: 110px;
}

#specs {
  font-size: 12px;
  line-height: 20px;

  & select,
  li {
    background-color: var(--background-primary-color) !important;
    color: var(--primary-color);
  }

  & form div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    & input {
      justify-self: start;
    }

    & div {
      display: flex;
      container-type: inline-size;
      padding-right: 1rem;
    }
  }

  & form strong {
    line-height: 1.5rem;
    display: block;
    float: left;
    text-align: right;
    padding-right: 1em;

    &::first-letter {
      text-transform: uppercase;
    }
  }

  & textarea {
    resize: none;
  }

  & span.select2-selection__rendered {
    line-height: 26px;
    color: var(--primary-color);
    background-color: var(--background-primary-color);
  }
}

.select2-container--default .select2-dropdown {
  background-color: var(--background-primary-color);
}

.select2-container--default li.select2-results__option[aria-selected="true"] {
  background-color: var(--background-primary-accent-color);
}

span.rotate > div {
  transform: translate(-5px, 10px) rotate(90deg);
}

textarea {
  font-family: Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  padding: 3px 3px 2px 3px;
  border: 1px solid #bbbbbb;
  border-radius: 3px;
  text-decoration: none;
  background-color: var(--background-primary-color);
  color: var(--primary-color);
  width: 100%;
  line-height: 1.5;
}

.tablesearch {
  color: inherit;
  font-size: 13px;
  padding: 4px;
  float: right;
}

#themeButton {
  font-size: 14px;
  font-weight: normal;
  line-height: 41px;
  border-color: var(--brand-color);
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--background-primary-color);
}

.userform {
  & .form-field {
    padding: 1.5em 1.5em;
  }

  & .snelselectie-div {
    padding: 0.5em 1.5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* #endregion */

/* #region Tables */
.tablescroll {
  overflow: auto;
  min-height: 0;
  /* belangrijk, anders werkt overflow in flex */
  max-height: 80dvh;
  flex: 1;

  & th {
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--background-primary-color);
  }
}

.energiemonitor td {
  border: 1px solid gray;
}

.log {
  width: 30px;
}

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 6px;
}

table caption {
  display: none;
}

table strong {
  text-align: left;
  display: inline;
  padding: 0;
  width: auto;
}

table thead th {
  white-space: nowrap;
}

table.logtable em {
  background: var(--background-orange-color);
  color: var(--secondary-color);
  text-shadow: none;
  padding: 0.25em 0.25em;
  font-style: normal;
}

table.infotable em {
  background: var(--background-orange-color);
  color: var(--secondary-color);
  text-shadow: none;
  padding: 0.25em 0.5em;
}

table.smalltds {
  padding: 0px;
  margin: 0px;
}

table.smalltds td input[type="text"] {
  width: 100px;
}

table td b:hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid rgba(0 0 0/80%);
  margin-top: 1rem;
  margin-left: -1px;
}

table td b:hover:after {
  position: absolute;
  font-size: 12px;
  font-weight: normal;
  background: rgba(0 0 0/80%);
  padding: 0.25rem 0.5rem;
  z-index: 5;
  width: 200px;
  margin: 1.5rem 0 0 -124px;
  color: var(--secondary-color);
  border-radius: 4px;
  white-space: pre-wrap;
  line-height: 1.25rem;
  text-align: left;
}

tbody tr:hover {
  border-left: 3px solid silver;
}

tr:has(input[type="checkbox"]:checked) {
  border-left: 3px solid var(--brand-color);
}

td {
  line-height: 1.75;
  padding: 4px 7px;
  vertical-align: top;
  border-color: var(--border-color);
}

td[active="true"] {
  background-color: #ddd !important;
}

td.answer {
  width: 20%;
  text-align: left;
  font-weight: bold;
}

td.info {
  font-size: 11px;
}

td.kosten {
  text-align: right;
  font-variant-numeric: tabular-nums;

  &::before {
    content: "€";
    float: left;
  }
}

td a {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
}

td a:hover {
  text-decoration: underline;
}

td.aantal,
td.kwh-per-jaar {
  text-align: right;
}

td.bewerken {
  width: 70px;
}

th.object,
td.object {
  display: none;
}

td.omschrijving i {
  display: block;
  margin-top: 1rem;
}

td[data-label="Type"],
td[data-label="Plaatsdatum"],
td[data-label="Vervangingsdatum"],
td[data-label="Info"] {
  white-space: nowrap;
}

th {
  line-height: 2.5;
  border-bottom: 1px solid #bbbbbb;
  padding: 0 7px;
  vertical-align: top;
  color: var(--primary-color);
  background: none;
}

/* add padding to cells to prevent sort arrow overlap */
th:not(.sorter-false) .tablesorter-header-inner {
  padding-right: 0.75rem;
}

th.checkbox {
  vertical-align: middle;
}

/* make sorte-false cells as small as possible */
th.sorter-false {
  width: 10px;
}

th.approved,
th.id,
th.highlight,
td.approved,
td.id,
td.highlight {
  display: none;
}

th.prerotate {
  vertical-align: bottom;
}

th.rotate {
  height: 226px !important;
  white-space: nowrap;
  padding: 0.5rem;
}

th.rotate > div {
  transform:
    /* Magic Numbers */ translate(-10px, 185px) rotate(270deg);
  width: 35px;
}

th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

th.aantal,
th.kwh-per-jaar {
  width: 45px;
  text-align: right;
}

thead .sorter-false {
  & div::after {
    content: none;
  }

  cursor: default;
}

tr.even > td,
td.even {
  background-color: #efefef;
}

tr:hover td {
  background: #ddd;
}

tr:hover td,
tr.selected td {
  background: var(--hover);
}

tr.notice td {
  background: var(--background-primary-color);
  color: #f98a08;
}

tr.notice td a {
  color: #f98a08;
}

th.approved,
th.id,
th.highlight,
th.highlighttype,
td.approved,
td.id,
td.highlight,
td.highlighttype {
  display: none;
}

tr {
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--block-header);
}

td.\- {
  width: 50px;
}

th.t,
td.t {
  width: 10px;
}

td.t i {
  color: grey;
}

/* #endregion */

/* #region Cards/Components */
[tooltip]:hover:before {
  content: attr(tooltip);
  position: absolute;
  font-size: 12px;
  font-weight: normal;
  background: rgba(0 0 0/80%);
  padding: 0.25rem 0.5rem;
  z-index: 5;
  width: 200px;
  margin: 80px 0 0 -40px;
  color: var(--secondary-color);
  border-radius: 4px;
  white-space: pre-wrap;
  line-height: 1.25rem;
  text-align: left;
}

details ::marker {
  font-size: 1.2em;
  border: 1px solid red;
}

dialog#context:open {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 1rem;
  background: none;
}

dialog#context ul {
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: var(--background-primary-color);
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}

dialog#context ul li {
  padding: 1rem;
}

dialog#context ul li.bt {
  border-top: 1px solid silver;
}

dialog#context a {
  text-decoration: none;
}

dialog#context a.cancel {
  color: red;
}

dialog#context ul a[href="#"] {
  color: silver;
  cursor: not-allowed;
}

#filepreview {
  max-width: 300px;
  height: 300px;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  color: var(--secondary-color);
}

#filepreview:after {
  position: absolute;
  font-size: 12px;
  font-weight: normal;
  background: rgba(0 0 0/80%);
  padding: 0.25rem 0.5rem;
  z-index: 5;
  width: 200px;
  margin: 1.5rem 0 0 -124px;
  color: var(--secondary-color);
  border-radius: var(--radius);
  white-space: pre-wrap;
  line-height: 1.25rem;
  text-align: left;
}

iframe {
  overflow-x: hidden;
  overflow-y: auto;
}

.collapsediv {
  color: #999;
  font-weight: normal;
  font-size: 15px;
}

div.nen3140 {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.25);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010;
  backdrop-filter: blur(2px);
}

div.nen3140 .popup {
  background: var(--background-primary-color);
  border: 1px solid silver;
  border-radius: 4px;
  padding: 0 2em 2em 2em;
  min-width: 500px;
  min-height: 250px;
}

.header {
  /* black (unsorted) double arrow */
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  white-space: nowrap;
}

header.page-header {
  display: flex;
  align-items: center;
  background: var(--block-header);
  justify-content: space-between;

  a.toggle {
    display: none;
  }

  & h3.title {
    display: flex;
    width: auto;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    word-break: normal;
    overflow-wrap: normal;
    font-weight: bold;
    font-size: 0.875rem;
    padding: 0.5rem;
    padding-left: 1.25rem;
  }

  & div {
    display: flex;
    align-items: center;
  }

  & #options {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    list-style: none;
    padding: 0;
    text-align: left;
    color: var(--brand-color);

    & a,
    & button {
      display: inline-block;
      border: 1px solid var(--brand-color);
      border-radius: 3px;
      color: var(--brand-color);
      font-family: inherit;
      line-height: 1.2;
      padding: 0.25em;
      margin: 0.25em;
      background-color: var(--background-primary-color);
      text-decoration: none;
      font-size: 13px;
      text-align: center;
      white-space: nowrap;
      box-sizing: border-box;
    }

    & ul {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      flex-wrap: wrap;
    }
  }
}

.popup a {
  background: var(--background-primary-color) !important;
  color: var(--primary-color);
  float: left;
  border: 2px solid #2f2f37;
  text-shadow: none;
  text-decoration: none;
  padding: 0.25rem 1rem;
  border-radius: 4px;
  margin-right: 1em;
}

.leaflet-popup .button {
  background: var(--background-secondary-color);
  color: var(--secondary-color);
  text-decoration: none;
  padding: 0.1rem 0.4rem;
  margin: 0.2rem 0.2rem 0.2rem 0;
  display: inline-block;
  border-radius: 4px;
}

.leaflet-popup a {
  color: var(--primary-color);
  text-decoration: underline;
}

.leaflet-popup a.button {
  background: var(--background-secondary-color);
  color: var(--secondary-color);
  display: inline-block;
  text-decoration: none;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: normal;
  letter-spacing: -0.05rem;
}

.leaflet-popup div.tab {
  margin: 0 -1.65em 1em;
  padding: 1rem 1rem 0.25rem;
  background: var(--border-color) !important;
  margin-top: -2em;
  border-radius: 5px 5px 0 0;
}

.leaflet-popup a.tab {
  margin: 0 0.5em 0 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5em 0.5em 0 0;
  background: #eee;
  text-decoration: none;
  color: var(--primary-color);
  display: inline-block;
  margin-bottom: -3px;
  border-bottom: 1px solid var(--border-color);
}

.leaflet-popup a.tab.active {
  background: var(--background-primary-color);
  border-bottom: 1px solid white;
}

.leaflet-popup a.inpopup.hightlight {
  background: orange;
  color: var(--primary-color);
  border-radius: 0.5em;
  font-size: 10px;
  text-decoration: none;
  margin-right: 1em;
  padding: 0.25rem 0.75rem 0.1rem 0.75rem;
}

.leaflet-popup-content table th,
.leaflet-popup-content table td {
  padding: 0 !important;
}

.leaflet-popup-content table tr:hover {
  background: none;
}

.leaflet-popup-close-button {
  color: var(--primary-color);
  font-size: 20px;
  margin-top: -4px;
}

.legend {
  background: var(--background-primary-color);
  padding: 0.75rem;
  border-radius: 3px;
}

.legend .circle {
  background: red;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: -1px;
  border: 1px solid black;
}

.loadericon {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 100;
  background: url("images/Preloader_2.gif") center no-repeat #fff;
}

.loading {
  padding: 1rem 1.5rem;
}

.loading div.text {
  display: inline-block;
  background-color: #444;
  height: 12px;
  border-radius: 100px;
  margin: 0.5rem 0;
  min-width: 100px;
  opacity: 0.1;
  animation: fading 1.5s infinite;
}

.loading div.text.line {
  width: 100%;
  max-width: 100%;
}

@keyframes fading {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.1;
  }
}

#malfunction .ref nobr,
#malfunction .omschrijving {
  overflow-wrap: break-word;
  min-width: 100px;
}

.malfunctionapproval {
  & details > summary {
    list-style: none;
  }

  & details > summary:before {
    font-family: "Font Awesome 5 Free", sans-serif;
    content: "";
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  & details[open] > summary:before {
    font-family: "Font Awesome 5 Free", sans-serif;
    content: "";
    font-size: 1rem;
    margin-right: 0.5rem;
    margin-left: -0.25rem;
  }

  & details {
    border-radius: 0.2rem;
  }

  & details[open] > summary {
    margin-bottom: 0.5rem;
  }

  & form {
    padding: 1.5rem;

    label:has(input:checked) {
      font-weight: bold;
    }
  }

  & textarea {
    field-sizing: content;
    /* used to be `form-sizing` but changed to this */
  }

  & .malstate {
    & form {
      position: sticky;
      top: 7rem;
    }

    & div {
      margin-bottom: 4px;
      padding: 0;
    }

    & form input[type="button"],
    form input[type="submit"] {
      padding: 0.15rem 0.7rem;
    }

    & textarea {
      min-height: 4rem;
    }
  }

  & .commentsection {
    padding: 1.5rem;

    & .commentcontainer .avatar img {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      border: 1px solid #eee;
    }

    & img.thumb {
      width: 4rem;
      height: 4rem;
      object-fit: cover;
      margin-right: 1rem;
    }
  }
}

.map,
#map {
  height: 400px;
}

#map_canvas {
  width: 1092px;
  height: 400px;
  border: 4px solid #bbbbbb;
}

#map_canvas.small {
  width: 700px;
  height: 300px;
  border: 4px solid #bbbbbb;
  float: right;
}

#map_datagenerator {
  width: 600px;
  height: 600px;
  border: 0px;
  padding: 0px;
  margin: 0px;
}

.map-libre-popup .maplibregl-popup-content {
  background-color: var(--background-primary-color);
  color: var(--primary-color);
}

.maplibregl-map {
  & .maplibregl-ctrl {
    background-color: var(--background-primary-color);
    color: contrast-colo(var(--background-primary-color));

    & .input-group {
      background-color: var(--background-primary-color);
    }

    [data-theme="dark"] & button {
      background-color: #fff !important;
      color: #000 !important;
      filter: invert(1);
    }

    [data-theme="dark"] & button + button {
      border-top: 1px solid #333;
    }
  }

  & .mapboxgl-legend {
    padding: 0.5rem;
    margin: 0.5rem;
    background: var(--background-primary-color);
    border-radius: 4px;

    & label {
      margin-left: 0.5rem;

      &:first-of-type {
        margin-left: 0;
      }
    }

    & span.legend {
      display: inline-block;
      width: 10px !important;
      height: 10px !important;
      background: #999;
      border-radius: 50%;
      border: 2px solid var(--background-secondary-color);
      margin: 0 0 -3px 0;
      padding: 0.25rem !important;
    }
  }

  & .markers {
    & div {
      margin-right: 0.25rem;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  /* TODO refactor markerlayers class so it looks better without using this  */
  & .markerlayers {
    & strong,
    & label {
      margin-right: 0.25em;
    }
  }

  & .layersettings {
    display: none;
    overflow: auto;
    max-height: 300px;
    background: var(--background-primary-color);

    & h3 {
      border-bottom: none;
      padding-block: 0.5rem;
    }
  }

  & .maplibregl-ctrl-attrib.maplibregl-compact-show {
    background-color: transparent;
  }
}

.mutate-icon {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  width: 3rem;
}

#selection.message {
  position: sticky;
  top: 5rem;
  z-index: 10;
}

.modal {
  background: var(--background-primary-color);
  width: 80vw;
  bottom: 0;
  height: 80vh;
  margin: 0 10vw;
  position: absolute;
  border: 1px solid silver;
  border-radius: 4px 4px;
  border-bottom: 0;
}

.modal iframe {
  width: 100%;
  height: 100%;
}

.module {
  text-align: center;
  text-decoration: none;
}

.module .icon {
  background: var(--block-header);
  color: #294d9d;
  border-radius: 8px;
  font-size: 43px;
  width: 92px;
  margin: auto;
  height: 92px;
  line-height: 92px;
  padding: 0;
}

.module img {
  display: block;
}

.module:hover .icon {
  color: #294d9d;
}

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-gap: 1em;
  padding: 2rem 1rem 1rem;
}

.my-div-icon:hover nobr p {
  background: rgba(255, 255, 255, 1);
  z-index: 1000;
}

.objectinfo {
  float: left;
  padding: 5px;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10000;
  right: 0;
  backdrop-filter: blur(2px);
  display: none;
  background: rgba(0, 0, 0, 0.2);
}

.onmap {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDOC4xMyAyIDUgNS4xMyA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODctMy4xMy03LTctN3pNNyA5YzAtMi43NiAyLjI0LTUgNS01czUgMi4yNCA1IDVjMCAyLjg4LTIuODggNy4xOS01IDkuODhDOS45MiAxNi4yMSA3IDExLjg1IDcgOXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjkiIHI9IjIuNSIvPjwvc3ZnPg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  height: 1.5rem;
  width: 1rem;
}

/* tagging */
span.tag {
  border: 0;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;

  &.blue {
    background: #3abff0;
    color: contrast-color(#3abff0);
  }

  &.red {
    background: red;
    color: contrast-color(red);
  }

  &.yellow {
    background: #ffc72c;
    color: contrast-color(#ffc72c);
  }
}

.searchresult {
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.searchresult:hover {
  background-color: #eeeeee;
}

summary {
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  margin: 0 !important;
  font-size: 1.1em;
  background: var(--block-header);
  font-weight: bold !important;
  position: sticky !important;
  top: 4.5rem;
  z-index: 2;
}

summary a,
summary button,
h3 button {
  border: 2px solid var(--brand-color);
  color: var(--secondary-color);
  background-color: var(--brand-color);
  text-shadow: none;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
  float: right;
  padding: 0.2rem 0.5rem;
  line-height: 1rem;
  margin-left: 4px;
}

.sweet_loader {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: ro;
  transform-origin: 50% 50%;
  transform: rotate(0) translate(0, 0);
}

@keyframes ro {
  100% {
    transform: rotate(-360deg) translate(0, 0);
  }
}

.swal2-popup {
  font-size: inherit;
  background-color: var(--background-primary-color);
  color: var(--primary-color);
}

.swal2-title {
  font-size: 1rem;
}

.swal2-styled.swal2-confirm {
  background-color: black;
  outline: none;
}

.switch {
  position: relative;
  float: right;
  width: 40px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  display: none;
}

.Timing {
  position: fixed;
  bottom: 0;
  right: 2rem;
  border-radius: 4px 4px 0 0;
  max-height: 200px;
  width: 400px;
  background: var(--background-primary-color);
  overflow: auto;
  padding: 0.5rem 1rem;
  z-index: 1000;
  display: none;
}

ul.dash {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
}

ul.dash > li:before {
  display: inline-block;
  content: "-";
  width: 1rem;
  margin-left: -1em;
}

.usersettings {
  & div div {
    padding: 0;
  }

  & tr {
    border-left: none;
  }
}

.viernulvier {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 200px;
  z-index: 100;
  background: url("images/404.png") center no-repeat #fff;
}

.vri_lus {
  width: 20px;
  height: 20px;
  margin: -2px 0 0 -7px;
  z-index: 5;
}

.widget {
  background: var(--background-primary-color);
  border: 0 solid;
  box-sizing: border-box;
  margin: 5px 5px;
  position: relative;
  min-height: 120px;
}

.widget-20 {
  float: left;
  width: calc(20% - 10px);
}

.widget-25 {
  float: left;
  width: calc(25% - 10px);
}

.widget-33 {
  float: left;
  width: calc(33.3% - 10px);
}

.widget-50 {
  float: left;
  width: calc(50% - 10px);
}

.widget-66 {
  float: left;
  width: calc(66% - 10px);
}

.widget-75 {
  float: left;
  width: calc(75% - 10px);
}

.widget-100 {
  float: left;
  width: calc(100% - 10px);
}

.widgetcontent {
  height: auto !important;
  min-height: 20px !important;
  padding: 9px 9px 9px 9px !important;
}

.widgettitle {
  text-align: center;
  font-size: 14px;
}

.widgettitle a.continue {
  text-decoration: none;
  font-weight: normal;
  color: var(--primary-color);
  padding: 0 0 0 0;
  margin: 0 0 0 0 !important;
}

.widgettitle a.continue:hover {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.widgetcenter {
  width: 100%;
  height: 10px;
  text-align: center;
  margin: 0 auto;
}

.widgetbig {
  font-size: 22px;
  font-weight: bold;
}

/* #endregion */

/* #region Utilities/Helpers */
.arrow-right {
  width: 0;
  height: 0;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  border-right: 45px solid #dddddd;
}

.bigblur {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
}

.block {
  padding: 0 0 0 0;
  margin: 0.5rem 0;
  border-radius: 4px;
  background: var(--background-primary-color);
  border: 2px solid var(--border-color);
}

.block table.logtable thead {
  top: 0rem;
  z-index: 1;
}

.block td:first-child,
.block th:first-child,
/* .block td.objectnr,
.block th.objectnr, */
.block td.oude-product,
.block th.oude-product,
.block td.pos,
.block th.pos {
  padding-left: 1.5em !important;
}

.block th {
  color: var(--primary-color);
  font-weight: bold;
  text-transform: capitalize;
}

.block td,
.block th {
  padding: 0.25rem;
}

.block tr {
  background-color: var(--background-primary-color) !important;
}

.block tr:last-child td {
  border-bottom: 0px !important;
}

.block .block {
  margin: 0;
  padding: 0;
}

.block:not(.map, .search) {
  padding: 0;
}

.block.bookmarks {
  padding: 0.75em;
  display: flex;
  grid-gap: 0.25em;
}

.block.bookmarks .button {
  background: var(--background-secondary-color);
  color: var(--secondary-color);
  border-radius: 4px;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
  white-space: nowrap;

  &.blue {
    background: #3abff0;
  }
}

.block h3 {
  padding: 0 1em;
  border-bottom: 1px solid #efefef;
  padding-bottom: 0.75em;
  margin: 0 !important;
  font-size: 1.25em;
  font-weight: normal !important;
}

.block h4 {
  padding: 0 1em 0.75em;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
}

.block td.m {
  width: 5px;
}

.block td {
  padding: 0.5rem;
}

.block td:last-child,
.block th:last-child {
  padding-right: 1.5em;
}

.block thead {
  background: var(--background-primary-color);
  box-shadow: 0 2px 0 var(--box-shadow-primary);
  border-bottom: 2px solid var(--border-color);
}

.block h3:not(.normal) {
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  margin: 0 !important;
  font-size: 1.1em;
  background: var(--block-header);

  font-weight: bold !important;
  position: sticky !important;
  top: 4.5rem;
  z-index: 3;
}

.block tr.highlight.yellow td {
  background: rgba(255, 199, 44, 0.5) !important;
}

.block tr.highlight.yellow:hover td {
  background: rgba(255, 199, 44, 0.85) !important;
}

.block tr.highlight.red td {
  background: red;
  color: var(--secondary-color);
}

.block tr.highlight.orange td {
  background: var(--hover);
  color: red;
}

.block tr:last-child td:first-child,
.block tr:last-child td.product,
.block tr:last-child td:last-child {
  border-radius: 0 !important;
  padding-bottom: 0.75em;
}

.block.dashboard thead {
  display: none;
}

.block.dashboard p {
  padding: 0.5rem 1rem;
}

.block.countdown {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  color: var(--secondary-color);
}

.block:not(.dashboard) h4 {
  padding: 1rem;
}

.block p {
  padding: 1.5rem;
}

.block #zoeken {
  border: 0;
  font-size: 15px !important;
  padding: 0.75rem;
  width: 100%;
  background: none;
}

.block.map {
  padding: 0;
  height: 420px;
  display: flex;
  /* Geen border toevoegen ivm oa handleproject  */
}

.block.dashboard:not(.map) form {
  padding: 1rem 1rem;
}

.block.dashboard:not(.map) form [type="submit"] {
  padding: 0.25rem 1rem;
  margin: 1rem 0;
}

.clear {
  float: none;
  clear: both;
  width: 100%;
}

.tooltip {
  color: var(--primary-color);
}

.header,
.tablesorter-header {
  /* black (unsorted) double arrow */
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  white-space: nowrap;

  position: relative;
  padding-right: 12px;

  div {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  div::after {
    content: "▲\A▼";
    white-space: pre-line;
    font-size: 10px;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.4;
    transform: scale(1, 0.6);
  }
}

.headerSortUp,
.tablesorter-headerSortUp,
.tablesorter-headerAsc:not(td) {
  background-color: var(--table-sorter-background-color);

  /* black asc arrow */
  & div::after {
    content: "▲";
    color: var(--primary-color);
    opacity: 1;
    transform: scale(1, 0.6);
  }
}

.headerSortDown,
.tablesorter-headerSortDown,
.tablesorter-headerDesc:not(td) {
  background-color: var(--table-sorter-background-color);

  & div::after {
    content: "▼";
    color: var(--primary-color);
    opacity: 1;
    transform: scale(1, 0.6);
  }
}

.helptag {
  background-color: #dddddd;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 30px;
}

.hoverable:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.log,
.bewerken {
  padding-right: 1.5rem;
}

.malform {
  /* Tooltip container */
  & .tooltip {
    position: relative;
    display: inline-block;
    color: var(--background-tooltip-color);
  }

  /* Tooltip text */
  & .tooltip .tooltiptext {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    visibility: hidden;
    width: auto;
    background-color: var(--background-tooltip-color);
    color: var(--secondary-color);
    text-align: left;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.4;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 150%;
  }

  & .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 10px;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border: 5px solid transparent;
    border-right-color: var(--background-tooltip-color);
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  & .tooltip:hover .tooltiptext {
    visibility: visible;
  }
}

.nowrap {
  white-space: nowrap;
}

.left {
  float: left;
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.right {
  float: right;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.rotate180 {
  transform: rotate(180deg);
}

/* #endregion */

/* #region Media Queries */
@page {
  size: A4 landscape;
  padding: 0px;
  margin: 2%;
}

@media print {
  #navigation,
  #footer {
    visibility: hidden;
  }
}

@media (hover: hover) {
  div#navigation li:hover ul {
    padding: 0 1.5rem 1rem 1.5rem !important;
    margin-top: 15px;
    position: absolute;
    background-color: var(--background-primary-color) !important;
    color: var(--brand-color);
    padding-bottom: 0.5rem;
    margin-left: -64px;
    left: 46px;
    top: 38px;
    z-index: 200;
    border-radius: 0;
    flex-direction: column;
    width: auto !important;
    display: block;
    border: 1px solid var(--border-color);
    border-top: 0 !important;
  }

  div#navigation li:hover > a {
    color: var(--brand-color);
  }

  div.context:hover ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: -1.6rem;
    right: 2rem;
    float: right;
    z-index: 100;
  }

  div.context li a.cancel {
    color: red;
    display: none;
  }
}

@media (hover: none) {
  div.context ul {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 100;
  }

  div.context ul li {
    font-size: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
  }

  div.context li a.cancel {
    color: red;
    display: block;
  }
}

/* Mobiel klein */
@media (max-width: 480px) {
}

/* mobiel algemeen tot tablet */
@media screen and (max-width: 768px) {
  body,
  td,
  th {
    font-size: 14px !important;
  }

  td.W,
  td.levensduur,
  td.prijs,
  td.productopties,
  td.gebruik,
  td.gewijzigd,
  td.in-beheer,
  td.eigenaar,
  td.netleverancier,
  td.bemeterd,
  td.doc,
  td.door,
  td.documenten {
    display: none;
  }

  .block td:first-child,
  .block th:first-child,
  .block td.product,
  .block th.product,
  .block td.oude-product,
  .block th.oude-product,
  .block td.pos,
  .block th.pos {
    padding-left: 0.5rem !important;
  }

  .wrapper {
    padding: 0 1em !important;
  }

  h1 a img {
    height: 2rem;
    width: auto;
  }

  div#navigation {
    min-height: 3.5rem !important;
  }

  #content:not(.middle) {
    min-height: calc(100vh - 12rem) !important;
  }

  .block h3:not(.normal) {
    top: 3.5rem;
  }
}

@media screen and (max-width: 800px) {
  /* todo nog nodig met 768px? */
  body {
    line-height: 1.5;
  }

  .bordertop {
    border-top: none !important;
  }

  div#navigation {
    min-height: 3.5rem !important;
  }

  div#navigation li {
    padding-left: 0;
    display: contents;
  }

  div#navigation ul {
    display: none;
    padding: 3.5rem 0 0 0 !important;
    margin: 1rem !important;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--background-primary-color);
  }

  div#navigation ul a {
    padding: 1.1rem 0rem !important;
  }

  div#navigation ul ul {
    border: 1px solid red !important;
    display: none !important;
  }

  div#navigation:target .mobnav {
    display: none !important;
  }

  div#navigation:target #mobnavclose {
    display: block !important;
    position: absolute;
    right: 1.5em;
    top: -0.25em;
    font-size: 20px;
    color: var(--primary-color);
  }

  div#navigation:target ul {
    display: block;
    padding: 3.5rem 0 0 1rem !important;
    overflow: scroll;
    margin: 0rem !important;
    width: 100%;
    z-index: -1;
  }

  div#navigation:target ul a {
    font-size: 14px;
    padding: 0.5rem 1.25rem;
  }

  div#navigation:target ul ul {
    display: none;
    height: auto;
    overflow: hidden;
    position: revert;
    padding: 0 2rem !important;
  }

  div#objecten th,
  div.objecten td {
    display: none;
  }

  .mobnav {
    display: block !important;
    float: right;
    font-size: 25px !important;
    padding: 13px 0 !important;
  }

  table:not(.dashboard) thead {
    display: none;
  }

  .wrapper {
    padding: 0 1.5rem;
  }

  details.malfunctionapproval input[type="submit"] {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  header.page-header {
    & .options {
      flex-direction: row-reverse;

      & a.active {
        background-color: var(--brand-color);
        color: var(--secondary-color);
        border-radius: 3px;
        margin: 0 3px;
        padding: 0.25rem;
        text-decoration: none;
      }
    }

    #options {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1000;

      &:target {
        display: block;

        & + div .toggle.on {
          display: none;
        }

        & + div .toggle.off {
          display: block;
        }
      }

      & ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1rem 0;
        background-color: var(--background-primary-color);
      }

      & li {
        display: block;
      }

      & li a,
      & li button {
        display: block;
        width: 100%;
        padding: 1rem;
        border: 0;
        background: none;
        font-size: 1rem;
        font-weight: normal;
        text-align: start;
      }

      & a.active {
        background-color: var(--brand-color);
        color: contrast-color(var(--brand-color));
        font-weight: bold;
      }
    }

    .toggle.on {
      display: block;
    }

    .toggle.off {
      display: none;
    }
  }
}

@media screen and (max-width: 1000px) {
  body {
    line-height: 1.5;
  }

  .wrapper {
    padding: 0 1.5rem;
  }

  table:not(.dashboard) thead {
    display: none;
  }

  div#objecten th,
  div.objecten td {
    display: none;
  }

  .bordertop {
    border-top: none !important;
  }
}

/* tablets and small laptops */
@media screen and (max-width: 1024px) {
}

/* #endregion */

/* #region Mobile  */
.withselection {
  display: none;
  background: hsl(42, 98%, 90%);
  padding: 0.5rem 1rem 1rem;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 1rem;
  border: 1px solid hsl(42, 98%, 75%);
}

.withselection select {
  width: 100%;
  padding: 0.25rem;
  border-radius: 4px;
}

#objecten:has([type="checkbox"]:checked) .withselection,
.wrapper:has([type="checkbox"]:checked) .withselection {
  display: block;
}

/* #endregion */

/* #region still in use? */
#objectsearchresults table tr .id {
  display: none;
}

/* #endregion */

/* zendesk */
div:has(#launcher) {
  opacity: 0.5;
  z-index: 100;
}

#launcher {
  margin-right: -58px !important;
}

div:has(#launcher):hover {
  opacity: 1;

  #launcher {
    margin-right: 10px !important;
  }
}