# HG changeset patch
# User Luisa Beerboom <lbeerboom@intevation.de>
# Date 1683804232 -7200
# Node ID 84d01a536beccc2737c84f289cc9e87775ecd0e7
# Parent  a985f8c46cf3e73a996b794d5d52caea3140f224
Transformed scss and sass styles into css

diff -r a985f8c46cf3 -r 84d01a536bec client/src/assets/application.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/assets/application.css	Thu May 11 13:23:52 2023 +0200
@@ -0,0 +1,234 @@
+/* This is Free Software under GNU Affero General Public License v >= 3.0;
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation>
+ */
+@import "tooltip.css";
+
+:root {
+  --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  --border-radius: 0.25rem;
+  --icon-height: 2rem;
+  --icon-width: 2rem;
+  --large-offset: 2rem;
+  --offset: 1rem;
+  --sidebar-width: 13rem;
+  --slight-transparent: 0.96;
+  --small-offset: 0.5rem;
+  --smaller: 0.9rem;
+  --transition-fast: 0.3s;
+  --x-large-offset: 3rem;
+  --xx-large-offset: 5rem;
+
+  --color-info: #17a2b8;
+  --color-info-h: 188;
+  --color-info-s: 78%;
+  --color-info-l: 41%;
+}
+
+
+::placeholder {
+  color: #ccc !important;
+  font-size: smaller;
+  font-weight: bold;
+}
+
+html {
+  overflow: hidden;
+}
+
+a {
+  color: var(--color-info);
+}
+
+a:hover,
+a:active,
+a:focus {
+  color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 13%));
+}
+
+.w-90 {
+  width: 90%;
+}
+
+.w-95 {
+  width: 95%;
+}
+
+.debug {
+  border: 1px solid red;
+}
+
+.debug2 {
+  border: 1px solid magenta;
+}
+
+.debug3 {
+  border: 1px solid greenyellow;
+}
+
+.header {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.ui-element {
+  pointer-events: auto;
+}
+
+.shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+
+.box {
+  opacity: var(--slight-transparent);
+  max-height: 0;
+  max-width: 0;
+  overflow: hidden;
+  margin: 0;
+  box-shadow: var(--shadow-xs);
+  transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
+}
+
+.box h6,
+.contextbox h6 {
+  color: var(--color-info);
+  font-weight: bold;
+}
+
+.box-control {
+  display: flex;
+  color: #888;
+  padding: 4px 7px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.box-control .small {
+  padding: 4px;
+}
+
+.box-control:hover {
+  color: #666;
+  background-color: #eee;
+}
+
+.expanded {
+  max-height: 999px;
+  max-width: 999px;
+  margin: 0 0.05rem 0.5rem 0.25rem;
+}
+
+.box-body {
+  padding: 0.75rem;
+  text-align: left;
+  position: relative;
+}
+
+/* needed to fix the whitespace problem of
+//   https://github.com/Polyconseil/vue-gettext/issues/80;
+// use like
+//    <a href="..">link</a>
+//    <span v-translate class="fix-trans-space">contributors.</span>
+//
+// done centrally, so we can fix it centrally for better vue-gettext version */
+.fix-trans-space,
+.fix-trans-space:before {
+  content: " ";
+}
+
+.closebutton {
+  position: absolute;
+  right: var(--offset);
+}
+
+.headline {
+  font-weight: bold;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.btn:disabled,
+.btn.disabled {
+  opacity: 0.4;
+}
+
+.btn-xs {
+  padding: 0.3rem 0.4rem;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.snotifyToast {
+  text-align: left;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  border-left: 0 !important;
+}
+.snotifyToast .snotifyToast__title {
+  font-size: 1.2rem;
+}
+.snotifyToast .snotifyToast__body {
+  white-space: pre-line;
+}
+.snotifyToast.snotify-info {
+  border-top: 4px solid var(--color-info);
+}
+.snotifyToast.snotify-info .snotify-icon--info {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
+}
+.snotifyToast.snotify-error {
+  border-top: 4px solid #f44336;
+}
+
+select.form-control-sm.small {
+  padding: 0.25rem 0.1rem;
+  font-size: 0.75rem;
+}
+
+input.form-control-sm.small {
+  padding: 0.25rem 0.2rem;
+  font-size: 0.75rem;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wh-100 {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.wh-50 {
+  width: 50% !important;
+  height: 50% !important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  border-color: var(--color-info);
+  background-color: var(--color-info);
+}
diff -r a985f8c46cf3 -r 84d01a536bec client/src/assets/application.scss
--- a/client/src/assets/application.scss	Tue May 09 13:20:28 2023 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,239 +0,0 @@
-/* This is Free Software under GNU Affero General Public License v >= 3.0;
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- * Markus Kottländer <markus.kottlaender@intevation>
- */
-@import "@/assets/tooltip.scss";
-
-:root {
-  --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
-  --border-radius: 0.25rem;
-  --icon-height: 2rem;
-  --icon-width: 2rem;
-  --large-offset: 2rem;
-  --offset: 1rem;
-  --sidebar-width: 13rem;
-  --slight-transparent: 0.96;
-  --small-offset: 0.5rem;
-  --smaller: 0.9rem;
-  --transition-fast: 0.3s;
-  --x-large-offset: 3rem;
-  --xx-large-offset: 5rem;
-
-  --color-info: #17a2b8;
-  --color-info-h: 188;
-  --color-info-s: 78%;
-  --color-info-l: 41%;
-}
-
-
-::placeholder {
-  color: #ccc !important;
-  font-size: smaller;
-  font-weight: bold;
-}
-
-html {
-  overflow: hidden;
-}
-
-a {
-  color: var(--color-info);
-}
-
-a:hover,
-a:active,
-a:focus {
-  color: hsl(var(--color-info-h), var(--color-info-s), calc(#{var(--color-info-l)} - 13%));
-}
-
-.w-90 {
-  width: 90%;
-}
-
-.w-95 {
-  width: 95%;
-}
-
-.debug {
-  border: 1px solid red;
-}
-
-.debug2 {
-  border: 1px solid magenta;
-}
-
-.debug3 {
-  border: 1px solid greenyellow;
-}
-
-%fully-centered {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.header {
-  font-weight: bold;
-  font-size: 0.9em;
-}
-
-.ui-element {
-  pointer-events: auto;
-}
-
-.shadow-xs {
-  box-shadow: var(--shadow-xs);
-}
-
-.box {
-  opacity: var(--slight-transparent);
-  max-height: 0;
-  max-width: 0;
-  overflow: hidden;
-  margin: 0;
-  box-shadow: var(--shadow-xs);
-  transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
-}
-
-.box h6,
-.contextbox h6 {
-  color: var(--color-info);
-  font-weight: bold;
-}
-
-.box-control {
-  display: flex;
-  color: #888;
-  padding: 4px 7px;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
-  &.small {
-    padding: 4px;
-  }
-  &:hover {
-    color: #666;
-    background-color: #eee;
-  }
-}
-
-.expanded {
-  max-height: 999px;
-  max-width: 999px;
-  margin: 0 0.05rem 0.5rem 0.25rem;
-}
-
-.box-body {
-  padding: 0.75rem;
-  text-align: left;
-  position: relative;
-}
-
-// needed to fix the whitespace problem of
-//   https://github.com/Polyconseil/vue-gettext/issues/80;
-// use like
-//    <a href="..">link</a>
-//    <span v-translate class="fix-trans-space">contributors.</span>
-//
-// done centrally, so we can fix it centrally for better vue-gettext version
-.fix-trans-space,
-.fix-trans-space:before {
-  content: " ";
-}
-
-.closebutton {
-  position: absolute;
-  right: var(--offset);
-}
-
-.headline {
-  font-weight: bold;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.btn:disabled,
-.btn.disabled {
-  opacity: 0.4;
-}
-
-.btn-xs {
-  padding: 0.3rem 0.4rem;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-.snotifyToast {
-  text-align: left;
-  border-radius: 0.25rem;
-  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
-  border-left: 0 !important;
-  &.snotify-info {
-    border-top: 4px solid var(--color-info);
-    .snotify-icon--info {
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
-    }
-  }
-  &.snotify-error {
-    border-top: 4px solid #f44336;
-  }
-  .snotifyToast__title {
-    font-size: 1.2rem;
-  }
-  .snotifyToast__body {
-    white-space: pre-line;
-  }
-}
-
-select.form-control-sm.small {
-  padding: 0.25rem 0.1rem;
-  font-size: 0.75rem;
-}
-
-input.form-control-sm.small {
-  padding: 0.25rem 0.2rem;
-  font-size: 0.75rem;
-}
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.wh-100 {
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.wh-50 {
-  width: 50% !important;
-  height: 50% !important;
-}
-
-.custom-control-input:checked ~ .custom-control-label::before {
-  border-color: var(--color-info);
-  background-color: var(--color-info);
-}
diff -r a985f8c46cf3 -r 84d01a536bec client/src/assets/tooltip.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/assets/tooltip.css	Thu May 11 13:23:52 2023 +0200
@@ -0,0 +1,121 @@
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+}
+
+.tooltip .tooltip-inner {
+  background: white;
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  color: #666;
+  border-radius: 0.25rem;
+  padding: 5px 10px 4px;
+  font-size: 0.8rem;
+  max-width: 500px;
+}
+
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: white;
+  z-index: 1;
+}
+
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+  background: #f9f9f9;
+  color: white;
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
+}
+
+.tooltip.popover .popover-arrow {
+  border-color: #f9f9f9;
+}
+
+.tooltip[aria-hidden="true"] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+
+.tooltip[aria-hidden="false"] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
diff -r a985f8c46cf3 -r 84d01a536bec client/src/assets/tooltip.scss
--- a/client/src/assets/tooltip.scss	Tue May 09 13:20:28 2023 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,121 +0,0 @@
-/* This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- */
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-}
-
-.tooltip .tooltip-inner {
-  background: white;
-  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
-  color: #666;
-  border-radius: 0.25rem;
-  padding: 5px 10px 4px;
-  font-size: 0.8rem;
-  max-width: 500px;
-}
-
-.tooltip .tooltip-arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  margin: 5px;
-  border-color: white;
-  z-index: 1;
-}
-
-.tooltip[x-placement^="top"] {
-  margin-bottom: 5px;
-}
-
-.tooltip[x-placement^="top"] .tooltip-arrow {
-  border-width: 5px 5px 0 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.tooltip[x-placement^="bottom"] {
-  margin-top: 5px;
-}
-
-.tooltip[x-placement^="bottom"] .tooltip-arrow {
-  border-width: 0 5px 5px 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-top-color: transparent !important;
-  top: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.tooltip[x-placement^="right"] {
-  margin-left: 5px;
-}
-
-.tooltip[x-placement^="right"] .tooltip-arrow {
-  border-width: 5px 5px 5px 0;
-  border-left-color: transparent !important;
-  border-top-color: transparent !important;
-  border-bottom-color: transparent !important;
-  left: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.tooltip[x-placement^="left"] {
-  margin-right: 5px;
-}
-
-.tooltip[x-placement^="left"] .tooltip-arrow {
-  border-width: 5px 0 5px 5px;
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  right: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.tooltip.popover .popover-inner {
-  background: #f9f9f9;
-  color: white;
-  padding: 24px;
-  border-radius: 5px;
-  box-shadow: 0 5px 30px rgba(black, 0.1);
-}
-
-.tooltip.popover .popover-arrow {
-  border-color: #f9f9f9;
-}
-
-.tooltip[aria-hidden="true"] {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.15s, visibility 0.15s;
-}
-
-.tooltip[aria-hidden="false"] {
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0.15s;
-}
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/App.vue
--- a/client/src/components/App.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/App.vue	Thu May 11 13:23:52 2023 +0200
@@ -39,28 +39,31 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-#app
-  height: 100%
-  width: 100%
-  font-family: "Avenir", Helvetica, Arial, sans-serif
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-  text-align: center
-  color: #2c3e50
+<style scoped>
+#app {
+  height: 100%;
+  width: 100%;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  .userinterface
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    z-index: 4
-    pointer-events: none
+#app .userinterface {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  pointer-events: none;
+}
 
-    .boxes
-      position: relative
-      z-index: 10
+#app .userinterface .boxes {
+  position: relative;
+  z-index: 10;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Contextbox.vue
--- a/client/src/components/Contextbox.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Contextbox.vue	Thu May 11 13:23:52 2023 +0200
@@ -91,7 +91,7 @@
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .contextbox {
   position: relative;
   background-color: #ffffff;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/DiagramLegend.vue
--- a/client/src/components/DiagramLegend.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/DiagramLegend.vue	Thu May 11 13:23:52 2023 +0200
@@ -15,36 +15,44 @@
   </div>
 </template>
 
-<style lang="sass">
-.diagram-legend
-  position: relative
-  width: 180px
-  font-size: 0.8rem
-  display: flex
-  border-right: solid 1px #dee2e6
-  .toggle
-    margin-left: 0
-    position: absolute
-    z-index: 1
-    top: 0.25rem
-    left: 0.25rem
-    svg
-      transition: transform 0.3s
-  &.collapsed
-    width: 0
-    border-right: none
-    .toggle
-      left: 0.25rem
-      svg
-        transform: rotateY(180deg)
-  .legend
-    margin: 10px 0
-    span
-      vertical-align: middle
-      display: inline-block
-      width: 12px
-      height: 12px
-      border-radius: 50%
+<style>
+.diagram-legend {
+  position: relative;
+  width: 180px;
+  font-size: 0.8rem;
+  display: flex;
+  border-right: solid 1px #dee2e6;
+}
+.diagram-legend .toggle {
+  margin-left: 0;
+  position: absolute;
+  z-index: 1;
+  top: 0.25rem;
+  left: 0.25rem;
+}
+.diagram-legend .toggle svg {
+  transition: transform 0.3s;
+}
+.diagram-legend.collapsed {
+  width: 0;
+  border-right: none;
+}
+.diagram-legend.collapsed .toggle {
+  left: 0.25rem;
+}
+.diagram-legend.collapsed .toggle svg {
+  transform: rotateY(180deg);
+}
+.diagram-legend .legend {
+  margin: 10px 0;
+}
+.diagram-legend .legend span {
+  vertical-align: middle;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/KeyboardHandler.vue
--- a/client/src/components/KeyboardHandler.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/KeyboardHandler.vue	Thu May 11 13:23:52 2023 +0200
@@ -6,22 +6,24 @@
   </transition>
 </template>
 
-<style lang="sass" scoped>
-.notice
-  position: absolute
-  top: 0
-  width: 100%
-  text-align: center
-  z-index: 1
-  font-size: 11px
-  line-height: 11px
-  > span
-    opacity: 0.5
-    background: white
-    display: inline-block
-    border-bottom-right-radius: 0.25rem
-    border-bottom-left-radius: 0.25rem
-    padding: 3px 5px
+<style scoped>
+.notice {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 1;
+  font-size: 11px;
+  line-height: 11px;
+}
+.notice > span {
+  opacity: 0.5;
+  background: white;
+  display: inline-block;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  padding: 3px 5px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Login.vue
--- a/client/src/components/Login.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Login.vue	Thu May 11 13:23:52 2023 +0200
@@ -87,11 +87,14 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .login {
   min-width: 375px;
   min-height: 500px;
-  @extend %fully-centered;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .loginform {
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Logs.vue
--- a/client/src/components/Logs.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Logs.vue	Thu May 11 13:23:52 2023 +0200
@@ -57,7 +57,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .statuscontainer {
   width: 87%;
   position: relative;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Main.vue
--- a/client/src/components/Main.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Main.vue	Thu May 11 13:23:52 2023 +0200
@@ -22,28 +22,34 @@
   </div>
 </template>
 
-<style lang="sass">
-#panes
-  top: -1px
-  right: -1px
-  bottom: -1px
-  left: -1px
-  z-index: 1
-  &.rotate1
-    flex-wrap: wrap
-    flex-direction: row
-  &.rotate2
-    flex-wrap: wrap-reverse
-    flex-direction: column
-  &.rotate3
-    flex-wrap: wrap-reverse
-    flex-direction: row-reverse
-  &.rotate4
-    flex-wrap: wrap
-    flex-direction: column-reverse
-  .pane
-    border: solid 1px #dee2e6
-    background: #fff
+<style>
+#panes {
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: 1;
+}
+#panes.rotate1 {
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+#panes.rotate2 {
+  flex-wrap: wrap-reverse;
+  flex-direction: column;
+}
+#panes.rotate3 {
+  flex-wrap: wrap-reverse;
+  flex-direction: row-reverse;
+}
+#panes.rotate4 {
+  flex-wrap: wrap;
+  flex-direction: column-reverse;
+}
+#panes .pane {
+  border: solid 1px #dee2e6;
+  background: #fff;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Pdftool.vue
--- a/client/src/components/Pdftool.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Pdftool.vue	Thu May 11 13:23:52 2023 +0200
@@ -89,7 +89,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 input,
 select {
   font-size: 0.8em;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Popup.vue
--- a/client/src/components/Popup.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Popup.vue	Thu May 11 13:23:52 2023 +0200
@@ -65,53 +65,63 @@
   </transition>
 </template>
 
-<style lang="sass" scoped>
-.dateselection
-  width: 250px
-.overlay
-  position: fixed
-  z-index: 9
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  background: rgba(0, 0, 0, .3)
-  .popup
-    display: flex
-    flex-direction: column
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
-    background-color: #fff
-    border-radius: 0.25rem
-    max-width: 320px
-    .popup-header
-      display: flex
-      justify-content: space-between
-      align-items: center
-      padding-left: .5rem
-      border-bottom: 1px solid #dee2e6
-      color: var(--color-info)
-      margin-bottom: 0
-      padding: 0.25rem
-      font-weight: bold
-      .popup-title
-        padding-left: 0.25rem
-        .popup-icon
-          margin-right: 0.25rem
-      .popup-close
-        color: #aaa
-        padding: 3px 5px
-        border-radius: 0.25rem
-        cursor: pointer
-        transition: background-color 0.3s, color 0.3s
-        &:hover
-          color: #888
-          background-color: #eee
-    .popup-footer
-      display: flex
-      justify-content: space-between
-      align-items: center
-      border-top: 1px solid #dee2e6
-      padding: 0.25rem
+<style scoped>
+.dateselection {
+  width: 250px;
+}
+
+.overlay {
+  position: fixed;
+  z-index: 9;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+.overlay .popup {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+  border-radius: 0.25rem;
+  max-width: 320px;
+}
+.overlay .popup .popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: var(--color-info);
+  margin-bottom: 0;
+  padding: 0.25rem;
+  font-weight: bold;
+}
+.overlay .popup .popup-header .popup-title {
+  padding-left: 0.25rem;
+}
+.overlay .popup .popup-header .popup-title .popup-icon {
+  margin-right: 0.25rem;
+}
+.overlay .popup .popup-header .popup-close {
+  color: #aaa;
+  padding: 3px 5px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+.overlay .popup .popup-header .popup-close:hover {
+  color: #888;
+  background-color: #eee;
+}
+.overlay .popup .popup-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #dee2e6;
+  padding: 0.25rem;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Search.vue
--- a/client/src/components/Search.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Search.vue	Thu May 11 13:23:52 2023 +0200
@@ -86,7 +86,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .searchcontainer {
   opacity: 0.96;
 }
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Sidebar.vue
--- a/client/src/components/Sidebar.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Sidebar.vue	Thu May 11 13:23:52 2023 +0200
@@ -189,7 +189,7 @@
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .menubutton {
   height: 2rem;
   width: 2rem;
@@ -219,16 +219,16 @@
   color: #333;
   text-decoration: none;
   font-size: 90%;
-  .indicator {
-    left: auto;
-    right: 10px;
-    top: 8px;
-    border-radius: 0.25rem;
-  }
-  &.router-link-exact-active .indicator {
-    background: #fff;
-    color: #333;
-  }
+}
+.menu a .indicator {
+  left: auto;
+  right: 10px;
+  top: 8px;
+  border-radius: 0.25rem;
+}
+.menu a.router-link-exact-active .indicator {
+  background: #fff;
+  color: #333;
 }
 
 .menu a svg path {
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/Spacer.vue
--- a/client/src/components/Spacer.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Spacer.vue	Thu May 11 13:23:52 2023 +0200
@@ -34,7 +34,7 @@
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .spacer {
   height: 90vh;
 }
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/TimeSlider.vue	Thu May 11 13:23:52 2023 +0200
@@ -42,13 +42,13 @@
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
+<style scoped>
 #slider {
   position: absolute;
   bottom: 0;
   min-width: 100vw;
 }
-// reposition time slider in case of opened diagram
+/* reposition time slider in case of opened diagram */
 #slider.reposition {
   bottom: 50%;
 }
@@ -60,7 +60,7 @@
 input::-webkit-clear-button {
   display: none;
 }
-// hide clear button on IE
+/* hide clear button on IE */
 input::-ms-clear {
   display: none;
 }
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/fairway/AvailableFairwayDepthDialogue.vue
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Thu May 11 13:23:52 2023 +0200
@@ -344,17 +344,19 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
+<style scoped>
 input,
-select
-  font-size: 0.8em
+select {
+  font-size: 0.8em;
+}
 
-.custom-control
-  padding-left: 1.2rem
-  .custom-control-label
-    &::before,
-    &::after
-      left: -1.2rem
+.custom-control {
+  padding-left: 1.2rem;
+}
+.custom-control .custom-control-label::before,
+.custom-control .custom-control-label::after {
+  left: -1.2rem;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu May 11 13:23:52 2023 +0200
@@ -119,28 +119,30 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.direction-indicator
-  width: 70px
-  height: 0
-  border-top: dashed 2px #333
-  position: absolute
-  bottom: 50px
-  left: 115px
-  margin-left: -35px
-  &::after
-    content: ""
-    width: 0
-    height: 0
-    border-width: 10px
-    border-top-width: 5px
-    border-bottom-width: 5px
-    border-style: solid
-    border-color: transparent
-    border-left-color: #333
-    position: absolute
-    right: -20px
-    top: -6px
+<style scoped>
+.direction-indicator {
+  width: 70px;
+  height: 0;
+  border-top: dashed 2px #333;
+  position: absolute;
+  bottom: 50px;
+  left: 115px;
+  margin-left: -35px;
+}
+.direction-indicator::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-width: 10px;
+  border-top-width: 5px;
+  border-bottom-width: 5px;
+  border-style: solid;
+  border-color: transparent;
+  border-left-color: #333;
+  position: absolute;
+  right: -20px;
+  top: -6px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/gauge/Gauges.vue
--- a/client/src/components/gauge/Gauges.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/gauge/Gauges.vue	Thu May 11 13:23:52 2023 +0200
@@ -93,7 +93,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 input,
 select {
   font-size: 0.8em;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/identify/Identify.vue	Thu May 11 13:23:52 2023 +0200
@@ -246,26 +246,27 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .features {
   max-height: 19rem;
   overflow-y: auto;
-  small {
-    .zoom-btn {
-      margin-top: -0.25rem;
-      margin-right: -0.5rem;
-      margin-bottom: -0.25rem;
-      svg {
-        vertical-align: middle;
-      }
-    }
-    &:nth-child(even) {
-      background: #f8f8f8;
-    }
-    &:hover {
-      background: #eeeeee;
-    }
-  }
+}
+
+.features small {
+}
+.features small .zoom-btn {
+  margin-top: -0.25rem;
+  margin-right: -0.5rem;
+  margin-bottom: -0.25rem;
+}
+.features small .zoom-btn svg {
+  vertical-align: middle;
+}
+.features small:nth-child(even) {
+  background: #f8f8f8;
+}
+.features small:hover {
+  background: #eeeeee;
 }
 
 .versioninfo {
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importconfiguration/ImportDetails.vue
--- a/client/src/components/importconfiguration/ImportDetails.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importconfiguration/ImportDetails.vue	Thu May 11 13:23:52 2023 +0200
@@ -88,7 +88,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style scoped></style>
 
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importconfiguration/ScheduledImports.vue
--- a/client/src/components/importconfiguration/ScheduledImports.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importconfiguration/ScheduledImports.vue	Thu May 11 13:23:52 2023 +0200
@@ -1172,7 +1172,7 @@
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .cronfield {
   width: 55px;
 }
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue
--- a/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue	Thu May 11 13:23:52 2023 +0200
@@ -161,4 +161,4 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importconfiguration/types/WaterwayProfiles.vue
--- a/client/src/components/importconfiguration/types/WaterwayProfiles.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importconfiguration/types/WaterwayProfiles.vue	Thu May 11 13:23:52 2023 +0200
@@ -197,4 +197,4 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/AGMLogItem.vue
--- a/client/src/components/importoverview/AGMLogItem.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/AGMLogItem.vue	Thu May 11 13:23:52 2023 +0200
@@ -101,33 +101,42 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.diffs
-  width: 100%
-  overflow-y: auto
-  > div
-    border-top: dashed 1px #dee2e6
-    &:first-child
-      border-top: none
-    .compare-table
-      position: relative
-      overflow: hidden
-      &::after
-        content: ''
-        position: absolute
-        top: 0
-        right: -5px
-        bottom: 0
-        left: -5px
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
-      > div
-        font-size: 0.7rem
-        &:nth-child(odd)
-          background-color: #f8f9fa
+<style scoped>
+.diffs {
+  width: 100%;
+  overflow-y: auto;
+}
+.diffs > div {
+  border-top: dashed 1px #dee2e6;
+}
+.diffs > div:first-child {
+  border-top: none;
+}
+.diffs > div .compare-table {
+  position: relative;
+  overflow: hidden;
+}
+.diffs > div .compare-table::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  left: -5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.diffs > div .compare-table > div {
+  font-size: 0.7rem;
+}
+.diffs > div .compare-table > div:nth-child(odd) {
+  background-color: #f8f9fa;
+}
 
-.split
-  max-height: 35vh
+.split {
+  max-height: 35vh;
+}
 
-.full
-  max-height: 70vh
+.full {
+  max-height: 70vh;
+}
 </style>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/AdditionalLog.vue
--- a/client/src/components/importoverview/AdditionalLog.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Thu May 11 13:23:52 2023 +0200
@@ -20,18 +20,19 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.additionallog
-  overflow-y: auto
-  &.split
-    max-height: 35vh
-
-  > div
-    &:not(:first-child)
-      border-top-style: dashed !important
-
-    &:hover
-      background-color: #fcfcfc
+<style scoped>
+.additionallog {
+  overflow-y: auto;
+}
+.additionallog.split {
+  max-height: 35vh;
+}
+.additionallog > div:not(:first-child) {
+  border-top-style: dashed !important;
+}
+.additionallog > div:hover {
+  background-color: #fcfcfc;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Thu May 11 13:23:52 2023 +0200
@@ -24,35 +24,44 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.diffs
-  width: 100%
-  overflow-y: auto
-  > div
-    border-top: dashed 1px #dee2e6
-    &:first-child
-      border-top: none
-    .compare-table
-      position: relative
-      overflow: hidden
-      &::after
-        content: ''
-        position: absolute
-        top: 0
-        right: -5px
-        bottom: 0
-        left: -5px
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
-      > div
-        font-size: 0.7rem
-        &:nth-child(odd)
-          background-color: #f8f9fa
+<style scoped>
+.diffs {
+  width: 100%;
+  overflow-y: auto;
+}
+.diffs > div {
+  border-top: dashed 1px #dee2e6;
+}
+.diffs > div:first-child {
+  border-top: none;
+}
+.diffs > div .compare-table {
+  position: relative;
+  overflow: hidden;
+}
+.diffs > div .compare-table::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  left: -5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.diffs > div .compare-table > div {
+  font-size: 0.7rem;
+}
+.diffs > div .compare-table > div:nth-child(odd) {
+  background-color: #f8f9fa;
+}
 
-.split
-  max-height: 35vh
+.split {
+  max-height: 35vh;
+}
 
-.full
-  max-height: 70vh
+.full {
+  max-height: 70vh;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/BottleneckDetail.vue
--- a/client/src/components/importoverview/BottleneckDetail.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Thu May 11 13:23:52 2023 +0200
@@ -41,32 +41,40 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.bottleneckdetails
-  width: 100%
-  overflow-y: auto
-  > div
-    border-top: dashed 1px #dee2e6
-    &:first-child
-      border-top: none
-    .properties
-      position: relative
-      overflow: hidden
-      &::after
-        content: ''
-        position: absolute
-        top: 0
-        right: -5px
-        bottom: 0
-        left: -5px
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
-      tr
-        font-size: 0.7rem
-        &:nth-child(odd)
-          background-color: #f8f9fa
+<style scoped>
+.bottleneckdetails {
+  width: 100%;
+  overflow-y: auto;
+}
+.bottleneckdetails > div {
+  border-top: dashed 1px #dee2e6;
+}
+.bottleneckdetails > div:first-child {
+  border-top: none;
+}
+.bottleneckdetails > div .properties {
+  position: relative;
+  overflow: hidden;
+}
+.bottleneckdetails > div .properties::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  left: -5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.bottleneckdetails > div .properties tr {
+  font-size: 0.7rem;
+}
+.bottleneckdetails > div .properties tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
 
-.split
-  max-height: 35vh
+.split {
+  max-height: 35vh;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/ImportOverview.vue
--- a/client/src/components/importoverview/ImportOverview.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/ImportOverview.vue	Thu May 11 13:23:52 2023 +0200
@@ -113,9 +113,10 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.spinner-overlay
-  top: 110px
+<style scoped>
+.spinner-overlay {
+  top: 110px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/LogEntry.vue
--- a/client/src/components/importoverview/LogEntry.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/LogEntry.vue	Thu May 11 13:23:52 2023 +0200
@@ -60,31 +60,38 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.action
-  height: 100%
-  width: 50%
-  border: 0
-  background: white
-  outline: none
-  &.approved
-    color: green
-    &.active,
-    &:hover
-      color: white
-      background: green
-  &.rejected
-    border-left: 1px solid #dee2e6
-    color: red
-    &.active,
-    &:hover
-      color: white
-      background: red
-.active
-  .action
-    background-color: #d2eaee
-    &.rejected
-      border-left: solid 1px rgba(255, 255, 255, 0.3)
+<style scoped>
+.action {
+  height: 100%;
+  width: 50%;
+  border: 0;
+  background: white;
+  outline: none;
+}
+.action.approved {
+  color: green;
+}
+.action.approved.active,
+.action.approved:hover {
+  color: white;
+  background: green;
+}
+.action.rejected {
+  border-left: 1px solid #dee2e6;
+  color: red;
+}
+.action.rejected.active,
+.action.rejected:hover {
+  color: white;
+  background: red;
+}
+
+.active .action {
+  background-color: #d2eaee;
+}
+.active .action.rejected {
+  border-left: solid 1px rgba(255, 255, 255, 0.3);
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/LogItem.vue
--- a/client/src/components/importoverview/LogItem.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/LogItem.vue	Thu May 11 13:23:52 2023 +0200
@@ -43,14 +43,17 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.kind
-  width: 9%
+<style scoped>
+.kind {
+  width: 9%;
+}
 
-.time
-  width: 26%
+.time {
+  width: 26%;
+}
 
-.message
-  width: 65%
-  word-wrap: break-word
+.message {
+  width: 65%;
+  word-wrap: break-word;
+}
 </style>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/SectionDetails.vue
--- a/client/src/components/importoverview/SectionDetails.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/SectionDetails.vue	Thu May 11 13:23:52 2023 +0200
@@ -31,7 +31,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .comparison {
   width: 668px;
   border-top: dashed 1px #dee2e6;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/importoverview/StretchDetails.vue
--- a/client/src/components/importoverview/StretchDetails.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/importoverview/StretchDetails.vue	Thu May 11 13:23:52 2023 +0200
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .comparison {
   width: 668px;
   border-top: dashed 1px #dee2e6;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/layers/LegendElement.vue
--- a/client/src/components/layers/LegendElement.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/layers/LegendElement.vue	Thu May 11 13:23:52 2023 +0200
@@ -235,7 +235,7 @@
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .legendelement {
   max-height: 1.5rem;
   width: 2rem;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/map/Map.vue	Thu May 11 13:23:52 2023 +0200
@@ -7,17 +7,33 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.map
-  width: 100%
-  height: 100%
-  background-color: #eee
-  background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8)
-  background-size: 20px 20px
-  background-position: 0 0, 10px 10px
-
-  &.nocursor
-    cursor: none
+<style scoped>
+.map {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+  background-image: linear-gradient(
+      45deg,
+      #e8e8e8 25%,
+      transparent 25%,
+      transparent 75%,
+      #e8e8e8 75%,
+      #e8e8e8
+    ),
+    linear-gradient(
+      45deg,
+      #e8e8e8 25%,
+      transparent 25%,
+      transparent 75%,
+      #e8e8e8 75%,
+      #e8e8e8
+    );
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}
+.map.nocursor {
+  cursor: none;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/map/MapPopup.vue
--- a/client/src/components/map/MapPopup.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/map/MapPopup.vue	Thu May 11 13:23:52 2023 +0200
@@ -97,25 +97,28 @@
   </div>
 </template>
 
-<style lang="sass">
-.map-popup
-  position: absolute
-  background: #fff
-  min-width: 200px
-  min-height: 85px
-  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2)
-  border-top-left-radius: 0 !important
-  margin-left: 10px
-  &::before
-    content: ""
-    position: absolute
-    top: 0
-    left: -10px
-    border: 5px solid transparent
-    border-top: 5px solid white
-    border-right: 5px solid white
-  .coordinates
-    font-size: 70%
+<style>
+.map-popup {
+  position: absolute;
+  background: #fff;
+  min-width: 200px;
+  min-height: 85px;
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  border-top-left-radius: 0 !important;
+  margin-left: 10px;
+}
+.map-popup::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -10px;
+  border: 5px solid transparent;
+  border-top: 5px solid white;
+  border-right: 5px solid white;
+}
+.map-popup .coordinates {
+  font-size: 70%;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/map/Zoom.vue
--- a/client/src/components/map/Zoom.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/map/Zoom.vue	Thu May 11 13:23:52 2023 +0200
@@ -15,23 +15,26 @@
   </div>
 </template>
 
-<style lang="sass">
-.zoom-buttons
-  position: absolute
-  z-index: 1
-  bottom: var(--small-offset)
-  left: 50%
-  margin-left: -var(--icon-width)
-  margin-bottom: 0
-  transition: margin-bottom 0.3s
-  &.move
-    bottom: calc(var(--large-offset) * 1.5)
-  .zoom-button
-    min-height: var(--icon-width)
-    min-width: var(--icon-width)
-    z-index: 1
-    outline: none
-    color: #666
+<style>
+.zoom-buttons {
+  position: absolute;
+  z-index: 1;
+  bottom: var(--small-offset);
+  left: 50%;
+  margin-left: -var(--icon-width);
+  margin-bottom: 0;
+  transition: margin-bottom 0.3s;
+}
+.zoom-buttons.move {
+  bottom: calc(var(--large-offset) * 1.5);
+}
+.zoom-buttons .zoom-button {
+  min-height: var(--icon-width);
+  min-width: var(--icon-width);
+  z-index: 1;
+  outline: none;
+  color: #666;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/sections/SectionForm.vue
--- a/client/src/components/sections/SectionForm.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/sections/SectionForm.vue	Thu May 11 13:23:52 2023 +0200
@@ -189,12 +189,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.input-button
-  border-top-left-radius: 0
-  border-bottom-left-radius: 0
-  right: 0
-  height: 31px
+<style scoped>
+.input-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  right: 0;
+  height: 31px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/sections/Sections.vue
--- a/client/src/components/sections/Sections.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/sections/Sections.vue	Thu May 11 13:23:52 2023 +0200
@@ -76,12 +76,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.input-button
-  border-top-left-radius: 0
-  border-bottom-left-radius: 0
-  right: 0
-  height: 31px
+<style scoped>
+.input-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  right: 0;
+  height: 31px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/stretches/Stretches.vue
--- a/client/src/components/stretches/Stretches.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/stretches/Stretches.vue	Thu May 11 13:23:52 2023 +0200
@@ -78,12 +78,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.input-button
-  border-top-left-radius: 0
-  border-bottom-left-radius: 0
-  right: 0
-  height: 31px
+<style scoped>
+.input-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  right: 0;
+  height: 31px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/systemconfiguration/ColorSettings.vue
--- a/client/src/components/systemconfiguration/ColorSettings.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Thu May 11 13:23:52 2023 +0200
@@ -67,27 +67,32 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.savebuttons
- position:relative
- top: -4em;
-/deep/
-  .card
-    overflow: hidden
-    .card-header
-      padding: .25rem 1rem
-    .vc-chrome
-      box-shadow: none
-      border-radius: 0
-      width: 100%
-      .vc-chrome-saturation-wrap
-        border-radius: 0
-        padding-bottom: 45%
-      &.hide
-        .vc-chrome-alpha-wrap
-          display: none !important
-        .vc-chrome-hue-wrap
-          margin-top: 10px
+<style scoped>
+.savebuttons {
+  top: -4em;
+}
+
+::v-deep .card {
+  overflow: hidden;
+}
+::v-deep .card .card-header {
+  padding: 0.25rem 1rem;
+}
+::v-deep .card .vc-chrome {
+  box-shadow: none;
+  border-radius: 0;
+  width: 100%;
+}
+::v-deep .card .vc-chrome .vc-chrome-saturation-wrap {
+  border-radius: 0;
+  padding-bottom: 45%;
+}
+::v-deep .card .vc-chrome.hide .vc-chrome-alpha-wrap {
+  display: none !important;
+}
+::v-deep .card .vc-chrome.hide .vc-chrome-hue-wrap {
+  margin-top: 10px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/systemconfiguration/DataAccuracy.vue
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Thu May 11 13:23:52 2023 +0200
@@ -279,33 +279,43 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.card
-  width: 33.333%
-  &:nth-child(1)
-    > .card-header
-      border-bottom: solid 2px #28a745
-  &:nth-child(2)
-    > .card-header
-      border-bottom: solid 2px #ffc107
-  &:nth-child(3)
-    > .card-header
-      border-bottom: solid 2px #dc3545
+<style scoped>
+.card {
+  width: 33.333%;
+}
+.card:nth-child(1) > .card-header {
+  border-bottom: solid 2px #28a745;
+}
+.card:nth-child(2) > .card-header {
+  border-bottom: solid 2px #ffc107;
+}
+.card:nth-child(3) > .card-header {
+  border-bottom: solid 2px #dc3545;
+}
+
 .rounded-left,
-.rounded-left .card-header
-  border-top-right-radius: 0
-  border-bottom-right-radius: 0
+.rounded-left .card-header {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .rounded-right,
-.rounded-right .card-header
-  border-top-left-radius: 0
-  border-bottom-left-radius: 0
-.card-header
-  padding: 0.25rem
-.card-body
-  padding: 0.5rem
-  .form-control-sm
-    height: 24px
-    font-size: 12px
+.rounded-right .card-header {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.card-header {
+  padding: 0.25rem;
+}
+
+.card-body {
+  padding: 0.5rem;
+}
+.card-body .form-control-sm {
+  height: 24px;
+  font-size: 12px;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/systemconfiguration/MorphologyClassbreaks.vue
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Thu May 11 13:23:52 2023 +0200
@@ -222,45 +222,57 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.numfield:invalid
- border: 2px solid
- border-color: #ff0000
+<style scoped>
+.numfield:invalid {
+  border: 2px solid;
+  border-color: #ff0000;
+}
 
-.classbreak
-  width: 154px
-  .btn-outline-secondary
-    border-color: #ccc
-    color: #ccc
-    &:hover:not(.hasColor)
-      background: #eee !important
-  .input-group-prepend
-    .btn-outline-secondary.hasColor
-      color: rgba(255, 255, 255, 0.5)
-  .input-group-append
-    .btn-outline-secondary
-      &:hover
-        color: #dc3545
-      &:last-child:hover
-        color: #28a745
-  .color-picker
-    position: absolute
-    top: -4px
-    left: 19px
-    z-index: 9
-    overflow: hidden
-    border-top-left-radius: 0 !important
-    .btn
-      border-radius: 0 !important
-    .vc-chrome
-      box-shadow: none
-/deep/
-  .vc-chrome-alpha-wrap
-    display: none !important
-  .vc-chrome-hue-wrap
-    margin-top: 10px
-  .vc-chrome-saturation-wrap
-    border-radius: 0
+.classbreak {
+  width: 154px;
+}
+.classbreak .btn-outline-secondary {
+  border-color: #ccc;
+  color: #ccc;
+}
+.classbreak .btn-outline-secondary:hover:not(.hasColor) {
+  background: #eee !important;
+}
+.classbreak .input-group-prepend .btn-outline-secondary.hasColor {
+  color: rgba(255, 255, 255, 0.5);
+}
+.classbreak .input-group-append .btn-outline-secondary:hover {
+  color: #dc3545;
+}
+.classbreak .input-group-append .btn-outline-secondary:last-child:hover {
+  color: #28a745;
+}
+.classbreak .color-picker {
+  position: absolute;
+  top: -4px;
+  left: 19px;
+  z-index: 9;
+  overflow: hidden;
+  border-top-left-radius: 0 !important;
+}
+.classbreak .color-picker .btn {
+  border-radius: 0 !important;
+}
+.classbreak .color-picker .vc-chrome {
+  box-shadow: none;
+}
+
+::v-deep .vc-chrome-alpha-wrap {
+  display: none !important;
+}
+
+::v-deep .vc-chrome-hue-wrap {
+  margin-top: 10px;
+}
+
+::v-deep .vc-chrome-saturation-wrap {
+  border-radius: 0;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/systemconfiguration/PDFTemplates.vue
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Thu May 11 13:23:52 2023 +0200
@@ -73,7 +73,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .table th,
 td {
   font-size: var(--smaller);
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/systemconfiguration/Systemconfiguration.vue
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/systemconfiguration/Systemconfiguration.vue	Thu May 11 13:23:52 2023 +0200
@@ -69,12 +69,13 @@
   </div>
 </template>
 
-<style lang="sass">
-.nav-pills
-  .nav-link
-    border-radius: 0
-    &.active
-      background: var(--color-info)
+<style>
+.nav-pills .nav-link {
+  border-radius: 0;
+}
+.nav-pills .nav-link.active {
+  background: var(--color-info);
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/toolbar/TimeSlider.vue
--- a/client/src/components/toolbar/TimeSlider.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/toolbar/TimeSlider.vue	Thu May 11 13:23:52 2023 +0200
@@ -72,7 +72,7 @@
   }
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .menuEntry {
   font-size: 9px;
   font-weight: bold;
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/toolbar/Toolbar.vue
--- a/client/src/components/toolbar/Toolbar.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/toolbar/Toolbar.vue	Thu May 11 13:23:52 2023 +0200
@@ -28,9 +28,9 @@
   </div>
 </template>
 
-<style lang="scss">
-// not scoped to affect nested components
-// doen't work when put in application/assets/application.sass... why??? o_O
+<style>
+/* not scoped to affect nested components
+// doen't work when put in application/assets/application.sass... why??? o_O */
 .toolbar {
   box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
   overflow: hidden;
@@ -61,10 +61,10 @@
   pointer-events: auto;
   position: relative;
   overflow: hidden;
-  &.disabled {
-    color: #ccc;
-    cursor: default;
-  }
+}
+.toolbar-button.disabled {
+  color: #ccc;
+  cursor: default;
 }
 
 .toolbar-button:last-child {
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/ui/UIBoxHeader.vue
--- a/client/src/components/ui/UIBoxHeader.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/ui/UIBoxHeader.vue	Thu May 11 13:23:52 2023 +0200
@@ -40,32 +40,39 @@
   </h6>
 </template>
 
-<style lang="sass">
-.box-header
-  display: flex
-  justify-content: space-between
-  align-items: center
-  min-height: 34px
-  padding-left: .5rem
-  border-bottom: 1px solid #dee2e6
-  color: var(--color-info)
-  margin-bottom: 0
-  padding: 0.25rem
-  font-weight: bold
-  background: white
-  border-top-left-radius: .25rem
-  border-top-right-radius: .25rem
-  .box-title
-    padding-left: 0.25rem
-    .box-icon
-      margin-right: 0.25rem
-  .box-control
-    margin-left: 3px
-  &.small
-    padding: 0.1rem 0.1rem 0.1rem 0.25rem
-    min-height: 27px
-.checkbox-header
-  cursor: pointer
+<style>
+.box-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 34px;
+  padding-left: 0.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: var(--color-info);
+  margin-bottom: 0;
+  padding: 0.25rem;
+  font-weight: bold;
+  background: white;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.box-header .box-title {
+  padding-left: 0.25rem;
+}
+.box-header .box-title .box-icon {
+  margin-right: 0.25rem;
+}
+.box-header .box-control {
+  margin-left: 3px;
+}
+.box-header.small {
+  padding: 0.1rem 0.1rem 0.1rem 0.25rem;
+  min-height: 27px;
+}
+
+.checkbox-header {
+  cursor: pointer;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/ui/UISpinnerOverlay.vue
--- a/client/src/components/ui/UISpinnerOverlay.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/ui/UISpinnerOverlay.vue	Thu May 11 13:23:52 2023 +0200
@@ -6,19 +6,20 @@
   </transition>
 </template>
 
-<style lang="sass">
-.spinner-overlay
-  background: rgba(255, 255, 255, 0.9)
-  position: absolute
-  z-index: 99
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  display: flex
-  align-items: center
-  justify-content: center
-  color: #888
+<style>
+.spinner-overlay {
+  background: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/ui/UITableBody.vue
--- a/client/src/components/ui/UITableBody.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/ui/UITableBody.vue	Thu May 11 13:23:52 2023 +0200
@@ -22,33 +22,39 @@
   </div>
 </template>
 
-<style lang="sass">
-.table-body
-  .row-container
-    > .row
-      &:hover
-        background-color: #fcfcfc
-      .table-cell
-        display: flex
-        align-items: center
-        padding: 1.5px 3px
-        border-right: solid 1px #dee2e6
-        &:last-child
-          border-right: none
-        &.center
-          justify-content: center
-    .expand
-      border-bottom: solid 2px var(--color-info)
+<style>
+.table-body .row-container > .row:hover {
+  background-color: #fcfcfc;
+}
 
-    &.active
-      > .row
-        color: #fff
-        .table-cell
-          border-right-color: rgba(255, 255, 255, 0.3)
-          background-color: var(--color-info)
-          color: #fff
-          a
-            color: #fff !important
+.table-body .row-container > .row .table-cell {
+  display: flex;
+  align-items: center;
+  padding: 1.5px 3px;
+  border-right: solid 1px #dee2e6;
+}
+.table-body .row-container > .row .table-cell:last-child {
+  border-right: none;
+}
+.table-body .row-container > .row .table-cell.center {
+  justify-content: center;
+}
+
+.table-body .row-container .expand {
+  border-bottom: solid 2px var(--color-info);
+}
+
+.table-body .row-container.active > .row {
+  color: #fff;
+}
+.table-body .row-container.active > .row .table-cell {
+  border-right-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--color-info);
+  color: #fff;
+}
+.table-body .row-container.active > .row .table-cell a {
+  color: #fff !important;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/ui/UITableHeader.vue
--- a/client/src/components/ui/UITableHeader.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/ui/UITableHeader.vue	Thu May 11 13:23:52 2023 +0200
@@ -28,22 +28,26 @@
   </div>
 </template>
 
-<style lang="sass">
-.table-header
-  > a
-    border-right: solid 1px #e7e8e9
-    background-color: #f8f9fa
-    a
-      outline: none
-      &:hover
-        text-decoration: none
-        background-color: #f8f9fa
-  &.sortable
-    a:not(.sorting-disabled)
-      cursor: pointer
-      &:hover,
-      &.active
-        background: #e7e8e9
+<style>
+.table-header > a {
+  border-right: solid 1px #e7e8e9;
+  background-color: #f8f9fa;
+}
+.table-header > a a {
+  outline: none;
+}
+.table-header > a a:hover {
+  text-decoration: none;
+  background-color: #f8f9fa;
+}
+
+.table-header.sortable a:not(.sorting-disabled) {
+  cursor: pointer;
+}
+.table-header.sortable a:not(.sorting-disabled):hover,
+.table-header.sortable a:not(.sorting-disabled).active {
+  background: #e7e8e9;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/usermanagement/Userdetail.vue
--- a/client/src/components/usermanagement/Userdetail.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/usermanagement/Userdetail.vue	Thu May 11 13:23:52 2023 +0200
@@ -141,7 +141,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .submit-button {
   position: absolute;
   right: var(--offset);
diff -r a985f8c46cf3 -r 84d01a536bec client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/usermanagement/Usermanagement.vue	Thu May 11 13:23:52 2023 +0200
@@ -134,28 +134,35 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.content
-  width: 100%
+<style scoped>
+.content {
+  width: 100%;
+}
 
-.userdetails
-  width: 50%
+.userdetails {
+  width: 50%;
+}
 
-.main
-  height: 100%
+.main {
+  height: 100%;
+}
 
-.icon
-  font-size: large
+.icon {
+  font-size: large;
+}
 
-.userlist
-  min-width: 520px
-  height: 100%
+.userlist {
+  min-width: 520px;
+  height: 100%;
+}
 
-.userlistsmall
-  width: 100%
+.userlistsmall {
+  width: 100%;
+}
 
-.userlistextended
-  width: 100%
+.userlistextended {
+  width: 100%;
+}
 </style>
 
 <script>
diff -r a985f8c46cf3 -r 84d01a536bec client/src/main.js
--- a/client/src/main.js	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/main.js	Thu May 11 13:23:52 2023 +0200
@@ -42,6 +42,7 @@
 import "../node_modules/ol/ol.css";
 import "../node_modules/highlight.js/styles/paraiso-dark.css";
 import "../node_modules/vue-snotify/styles/simple.css";
+import "./assets/application.css";
 
 // fontawesome5 icons
 import {
diff -r a985f8c46cf3 -r 84d01a536bec client/vue.config.js
--- a/client/vue.config.js	Tue May 09 13:20:28 2023 +0200
+++ b/client/vue.config.js	Thu May 11 13:23:52 2023 +0200
@@ -18,15 +18,6 @@
       config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin, []);
     }
   },
-  css: {
-    loaderOptions: {
-      // pass options to sass-loader
-      sass: {
-        // @/ is an alias to src/
-        data: `@import "@/assets/application.scss";`
-      }
-    }
-  },
   devServer: {
     proxy: {
       "/api": {