@eclipse-scout/core 22.0.1 → 22.0.2

package/dist/eclipse-scout-core-theme-dark.css

@@ -32,7 +32,7 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 body {
-  background-color: #0C1013;
+  background-color: #0E1316;
   font-family: Arial, sans-serif;
   font-weight: normal;
   font-size: 13px;
@@ -64,11 +64,11 @@ body.ios {
 /* -moz variant is required, see https://bugzilla.mozilla.org/show_bug.cgi?id=509958 */
 ::-moz-selection {
   background: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 ::selection {
   background: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 ::-webkit-input-placeholder {
   color: #7E8588;
@@ -111,11 +111,11 @@ body.ios {
 }
 .disabled::-moz-selection {
   background: #7E8588;
-  color: #0C1013;
+  color: #0E1316;
 }
 .disabled::selection {
   background: #7E8588;
-  color: #0C1013;
+  color: #0E1316;
 }
 .disabled::-webkit-input-placeholder {
   /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
@@ -205,7 +205,7 @@ input.has-error,
 textarea.has-error,
 .input-field.has-error {
   border-color: #FF8888;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 input.has-error:focus,
 textarea.has-error:focus,
@@ -233,7 +233,7 @@ input[type="password"].alternative {
   padding-bottom: 1px;
   /* Compensate padding-bottom to align input text with label on the left */
   /* It won't be perfect (especially when zoomed) but should be good enough */
-  padding-top: 1px;
+  padding-top: 2px;
 }
 input.alternative,
 .input-field.alternative {
@@ -304,7 +304,7 @@ textarea.disabled.read-only {
 }
 input.disabled::selection,
 textarea.disabled::selection {
-  -webkit-text-fill-color: #0C1013;
+  -webkit-text-fill-color: #0E1316;
 }
 textarea.alternative {
   background-color: transparent;
@@ -445,7 +445,7 @@ button::-moz-focus-inner {
   margin: 0;
   padding: 0;
   border: 0;
-  background-color: #0C1013;
+  background-color: #0E1316;
   pointer-events: none;
 }
 .application-loading-root.fadeout {
@@ -551,7 +551,7 @@ a:focus,
   margin: 100px 50px;
   padding: 20px;
   border: 1px solid #FF8888;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .startup-error-title {
   font-weight: bold;
@@ -721,6 +721,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .button > .icon {
   /* Padding only relevant for icons larger than the container */
@@ -772,7 +773,7 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .button.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
 }
@@ -798,7 +799,7 @@ iframe {
   background-color: #71b0e8;
   /* border is necessary to align the text with text from buttons with a real border */
   border-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .button.default:hover {
   background-color: #94c4ee;
@@ -806,12 +807,12 @@ iframe {
 }
 .button.default:active,
 .button.default.active {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
 .button.default.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
@@ -841,7 +842,7 @@ iframe {
 }
 .button:disabled.selected,
 .button.disabled.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #7E8588;
   border-color: #7E8588;
 }
@@ -916,7 +917,7 @@ iframe {
 .box-content {
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
-  background-color: #283438;
+  background-color: #2E3C41;
   max-width: 450px;
   margin: 0 auto;
   padding: 45px 95px 50px 95px;
@@ -1018,7 +1019,7 @@ iframe {
 .check-box.checked {
   background-color: #71b0e8;
   border-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .check-box.checked::before {
   position: absolute;
@@ -1046,7 +1047,7 @@ iframe {
   width: 10px;
   border-radius: 1px;
   height: 2px;
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .check-box.disabled {
   border-color: rgba(255, 255, 255, 0.12);
@@ -1080,13 +1081,6 @@ iframe {
 .calendar-scrollable-components {
   height: 100%;
 }
-.calendar-week-scrollable {
-  overflow: visible;
-}
-.calendar-scrollable-components-week {
-  top: calc(23px + 5px);
-  height: calc(15% - ( 23px  + 5px));
-}
 .calendar-header {
   position: relative;
   display: block;
@@ -1206,7 +1200,8 @@ iframe {
   cursor: pointer;
 }
 .calendar-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   border-top: 1px solid rgba(255, 255, 255, 0.25);
   border-bottom: 1px solid rgba(255, 255, 255, 0.25);
   border-left: 1px solid rgba(255, 255, 255, 0.25);
@@ -1407,9 +1402,15 @@ iframe {
   height: calc(100% - 25px);
   padding-right: 20px;
 }
+.calendar-grid + .scroll-shadow {
+  --scroll-shadow-inset-right: 20px;
+}
 .calendar-grid.mobile {
   padding-right: 6px;
 }
+.calendar-grid.mobile + .scroll-shadow {
+  --scroll-shadow-inset-right: 6px;
+}
 .calendar-grid.calendar-grid-short {
   height: calc(100% - 105px);
 }
@@ -1532,7 +1533,7 @@ iframe {
   left: calc(50% - 8px);
   top: -8px;
   transform: rotate(45deg);
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .calendar-day .calendar-component.component-open-bottom {
   overflow: visible;
@@ -1568,7 +1569,7 @@ iframe {
   border: solid 4px #71b0e8;
   border-radius: 50%;
   background-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .calendar-week-name {
   font-size: 11px;
@@ -1731,11 +1732,11 @@ iframe {
 }
 .year-panel-list > .year-month > .year-day.year-range-day {
   background-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .year-panel-list > .year-month > .year-day.year-hover-day {
   background-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .year-panel-list > .year-month::before {
   position: absolute;
@@ -1770,7 +1771,7 @@ iframe {
 .date-picker-popup {
   position: absolute;
   width: 290px;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -1848,12 +1849,12 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .date-picker-day.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   font-weight: bold;
 }
 .date-picker-day.selected.date-picker-now > .text {
-  border-bottom-color: #0C1013;
+  border-bottom-color: #0E1316;
 }
 .date-picker-day.disabled {
   color: #7E8588;
@@ -1882,6 +1883,7 @@ iframe {
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: 1px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1969,7 +1971,7 @@ iframe {
   height: calc(100% - 50px);
 }
 .desktop.in-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 /* "Open URI" related rules */
 .download-frame {
@@ -2240,7 +2242,7 @@ iframe {
 .desktop-bench {
   position: absolute;
   top: 0;
-  background-color: #1F272B;
+  background-color: #252F34;
   border-left: 1px solid rgba(255, 255, 255, 0.12);
   /* Make some space for the navigation handle (when the navigation is closed */
   /* Only do it if detail-table is at the bottom left corner */
@@ -2274,7 +2276,7 @@ iframe {
   animation-duration: 0.5s;
 }
 .desktop-bench > .bench-column > .simple-tab-box > .simple-tab-area {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .desktop-bench > .bench-column > .simple-tab-box > .simple-tab-area::before {
   display: none;
@@ -2302,7 +2304,7 @@ iframe {
   margin-right: -7px;
 }
 .desktop-bench.outline-content-has-dimmed-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .detail-table.table {
   --table-row-margin-x: 10px;
@@ -2342,7 +2344,7 @@ iframe {
   animation: fade-out-from-current 0.15s;
 }
 .detail-table.table > .table-header {
-  background-color: #181C1F;
+  background-color: #1F2428;
   border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 .detail-table.table > .table-header > .table-header-item {
@@ -2355,7 +2357,7 @@ iframe {
   margin-right: 12px;
 }
 .detail-table.table > .table-footer {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .detail-table.table > .table-data > .scrollbar > .scrollbar-thumb.x-axis {
   padding-top: 4px;
@@ -2365,9 +2367,9 @@ iframe {
   padding-top: 2px;
 }
 .detail-table.table > .table-data + .scroll-shadow {
-  --scroll-shadow-size: 10px;
-  --scroll-shadow-blur: 10px;
-  --scroll-shadow-spread: 10px;
+  --scroll-shadow-size: 14px;
+  --scroll-shadow-blur: 14px;
+  --scroll-shadow-spread: 14px;
 }
 /*
  * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
@@ -2576,7 +2578,7 @@ iframe {
 }
 .simple-tab-box > .tab-content {
   height: 100%;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
@@ -2600,7 +2602,7 @@ iframe {
   flex-direction: column;
   justify-content: center;
   min-width: 30px;
-  background-color: #181C1F;
+  background-color: #1F2428;
   text-align: center;
   cursor: pointer;
 }
@@ -2637,7 +2639,7 @@ iframe {
   display: inline-block;
   vertical-align: top;
   padding: 5px;
-  background-color: #181C1F;
+  background-color: #1F2428;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
   cursor: pointer;
   width: 120px;
@@ -2707,7 +2709,7 @@ iframe {
 }
 .simple-tab.selected {
   cursor: default;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .simple-tab.selected > .title-line > .title {
   color: #E9EBEB;
@@ -2776,7 +2778,7 @@ iframe {
   position: relative;
   display: table-cell;
   padding: 7px 8px;
-  background-color: #1F272B;
+  background-color: #252F34;
   color: #7E8588;
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 8px;
@@ -2808,11 +2810,11 @@ iframe {
   content: '\E013';
 }
 .collapse-handle-body:hover {
-  background-color: #344146;
+  background-color: #3B494F;
 }
 .collapse-handle-body:active,
 .collapse-handle-body.active {
-  background-color: #3f4f55;
+  background-color: #46565e;
 }
 /*
  * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
@@ -2830,7 +2832,8 @@ iframe {
   margin: 8px 3px 0 0;
   padding: 10px 10px 0 20px;
   border-radius: 12px 12px 0 0;
-  border-right-width: 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom-width: 0;
   background-color: rgba(0, 0, 0, 0.1);
 }
 .closable.desktop-tab.simple-tab > .title-line {
@@ -2897,6 +2900,7 @@ iframe {
 .desktop-tab.simple-tab:hover,
 .desktop-tab.simple-tab:active {
   background-color: rgba(255, 255, 255, 0.12);
+  border-color: transparent;
 }
 .desktop-tab.simple-tab:hover > .title-line > .title,
 .desktop-tab.simple-tab:active > .title-line > .title {
@@ -2918,7 +2922,8 @@ iframe {
   color: rgba(255, 255, 255, 0.4);
 }
 .desktop-tab.simple-tab.selected {
-  background-color: #1F272B;
+  background-color: #252F34;
+  border-color: transparent;
 }
 .desktop-tab.simple-tab.selected > .title-line > .icon-container {
   color: #A7ACAD;
@@ -2948,23 +2953,26 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .desktop-tab.simple-tab.selected > .edge {
-  --color: #1F272B;
+  --color: #252F34;
   position: absolute;
   pointer-events: none;
   background-color: transparent;
-  bottom: 0;
-  height: 48px;
-  width: 24px;
-  box-shadow: 0 24px 0 0 var(--color);
-  clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+  bottom: -5px;
+  height: 12px;
+  width: 12px;
+  box-sizing: content-box;
+  border: 5px solid var(--color);
+  border-top: none;
 }
 .desktop-tab.simple-tab.selected > .edge.left {
-  left: -24px;
-  border-bottom-right-radius: 12px;
+  left: -12px;
+  border-bottom-right-radius: 17px;
+  border-left: none;
 }
 .desktop-tab.simple-tab.selected > .edge.right {
-  right: -24px;
-  border-bottom-left-radius: 12px;
+  right: -12px;
+  border-bottom-left-radius: 17px;
+  border-right: none;
 }
 .desktop-tab.simple-tab.selected > .edge.right {
   z-index: 1;
@@ -3044,70 +3052,70 @@ iframe {
 }
 @-webkit-keyframes flash-desktop-tab-selected {
   0% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
   25% {
     background-color: #000000;
   }
   50% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
   75% {
     background-color: #000000;
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 @keyframes flash-desktop-tab-selected {
   0% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
   25% {
     background-color: #000000;
   }
   50% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
   75% {
     background-color: #000000;
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 @-webkit-keyframes flash-desktop-tab-selected-edge {
   0% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
   25% {
     box-shadow: 0 12px 0 0 #000000;
   }
   50% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
   75% {
     box-shadow: 0 12px 0 0 #000000;
   }
   100% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
 }
 @keyframes flash-desktop-tab-selected-edge {
   0% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
   25% {
     box-shadow: 0 12px 0 0 #000000;
   }
   50% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
   75% {
     box-shadow: 0 12px 0 0 #000000;
   }
   100% {
-    box-shadow: 0 12px 0 0 #1F272B;
+    box-shadow: 0 12px 0 0 #252F34;
   }
 }
 /*
@@ -3121,16 +3129,18 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .desktop-tab-area > .simple-overflow-tab-item {
-  border-radius: 12px;
-  margin: 8px 3px 6px;
+  border-radius: 8px;
+  margin: 14px 3px 6px;
   background-color: rgba(0, 0, 0, 0.1);
-  border: 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
 }
 .desktop-tab-area > .simple-overflow-tab-item:hover {
   background-color: rgba(255, 255, 255, 0.12);
+  border-color: transparent;
 }
 .desktop-tab-area > .simple-overflow-tab-item.selected {
   background-color: rgba(255, 255, 255, 0.12);
+  border-color: transparent;
 }
 /*
  * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
@@ -3147,7 +3157,7 @@ iframe {
   top: 0;
   height: 64px;
   color: #E9EBEB;
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .desktop-header > .simple-tab-area {
   height: 64px;
@@ -3182,7 +3192,7 @@ iframe {
 }
 .in-background.desktop-header > .view-button-box > .view-menu-tab > .view-menu::before {
   height: 100%;
-  border-color: #0C1013;
+  border-color: #0E1316;
   top: 0;
 }
 .in-background.desktop-header > .view-button-box > .view-menu-tab > .view-menu:hover > .icon {
@@ -3206,11 +3216,11 @@ iframe {
 }
 .outline-content-has-dimmed-background.desktop-header:not(.in-background) > .view-button-box > .view-tab-wrapper > .view-tab.selected,
 .outline-content-has-dimmed-background.desktop-header:not(.in-background) > .view-button-box > .view-menu-tab.selected {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .outline-content-has-dimmed-background.desktop-header:not(.in-background) > .view-button-box > .view-tab-wrapper > .view-tab.selected > .edge,
 .outline-content-has-dimmed-background.desktop-header:not(.in-background) > .view-button-box > .view-menu-tab.selected > .edge {
-  --color: #181C1F;
+  --color: #1F2428;
 }
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
@@ -3227,11 +3237,11 @@ iframe {
   height: 100%;
   width: 290px;
   min-width: 49px;
-  background-color: #0C1013;
+  background-color: #0E1316;
   color: #E9EBEB;
 }
 .desktop-navigation.view-button-box-invisible > .navigation-body > .outline > .outline-title {
-  background-color: #0C1013;
+  background-color: #0E1316;
   border-bottom: 0;
   color: #E9EBEB;
 }
@@ -3240,10 +3250,10 @@ iframe {
 }
 .navigation-body {
   position: absolute;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .desktop-navigation.in-background > .navigation-body {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .desktop-navigation > .desktop-tool-box > .menu-item {
   margin-bottom: 6px;
@@ -3251,6 +3261,9 @@ iframe {
 .desktop-navigation > .desktop-tool-box > .menu-item > .font-icon {
   font-size: 20px;
 }
+.desktop-navigation > .desktop-tool-box > .menu-item.ellipsis > .font-icon {
+  font-size: 22px;
+}
 /*
  * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -3265,16 +3278,16 @@ iframe {
   position: absolute;
 }
 .desktop-navigation-handle.collapse-handle > .collapse-handle-body {
-  background-color: #1F272B;
+  background-color: #252F34;
   border-color: rgba(255, 255, 255, 0.25);
   color: #7E8588;
 }
 .desktop-navigation-handle.collapse-handle > .collapse-handle-body:hover {
-  background-color: #344146;
+  background-color: #3B494F;
 }
 .desktop-navigation-handle.collapse-handle > .collapse-handle-body:active,
 .desktop-navigation-handle.collapse-handle > .collapse-handle-body.active {
-  background-color: #3f4f55;
+  background-color: #46565e;
 }
 .desktop-navigation-handle.collapse-handle.right-aligned.both-visible {
   right: 5px;
@@ -3302,7 +3315,7 @@ iframe {
   margin-left: -4px;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -3315,7 +3328,7 @@ iframe {
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(100% -  72px);
   width: 300px;
   margin-top: 72px;
   pointer-events: none;
@@ -3411,7 +3424,7 @@ iframe {
   width: 300px;
   display: flex;
   align-items: center;
-  background-color: #344146;
+  background-color: #3B494F;
   margin-bottom: 10px;
   padding: 8px 0 8px 10px;
   border-radius: 8px;
@@ -3574,7 +3587,7 @@ iframe {
 }
 .outline.tree > .tree-data > .tree-node.group,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.group {
-  background-color: #283438;
+  background-color: #2E3C41;
 }
 .outline.tree > .tree-data > .tree-node > .text,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .text {
@@ -3602,17 +3615,13 @@ iframe {
   line-height: 14px;
   color: #7E8588;
 }
-.outline.tree > .tree-data > .tree-node > .tree-node-control::before,
-.outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control::before {
-  font-size: 18px;
-}
 .outline.tree > .tree-data > .tree-node > .tree-node-control:hover,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control:hover {
   color: #FE9915;
 }
 .outline.tree > .tree-data > .tree-node.selected,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .outline.tree > .tree-data > .tree-node.selected::after,
@@ -3621,20 +3630,24 @@ iframe {
 }
 .outline.tree > .tree-data > .tree-node.selected > .tree-node-control,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .tree-node-control {
-  color: rgba(12, 16, 19, 0.7);
+  color: rgba(14, 19, 22, 0.7);
+}
+.outline.tree > .tree-data > .tree-node.selected > .tree-node-control:hover,
+.outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .tree-node-control:hover {
+  color: #FE9915;
 }
 .outline.tree > .tree-data > .tree-node.selected > .font-icon,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .font-icon {
-  color: #283438;
+  color: #2E3C41;
 }
 .outline.tree.in-background > .tree-data > .tree-node.group,
 .outline.tree.in-background > .tree-data > .animation-wrapper > .tree-node.group {
-  background-color: #252e31;
+  background-color: #2C363A;
 }
 .outline.tree.in-background > .tree-data > .tree-node.selected,
 .outline.tree.in-background > .tree-data > .animation-wrapper > .tree-node.selected {
   background-color: #7E8588;
-  color: #0C1013;
+  color: #0E1316;
 }
 .outline-title {
   cursor: pointer;
@@ -3671,7 +3684,7 @@ iframe {
 /* bread crumb style (different colors and bigger font and arrow than original breadcrumb style) */
 .outline.tree.breadcrumb > .outline-title {
   margin: 0;
-  border-bottom-color: #344146;
+  border-bottom-color: #3B494F;
 }
 .outline.tree.breadcrumb > .outline-title.touch:active {
   background-color: rgba(255, 255, 255, 0.12);
@@ -3681,12 +3694,12 @@ iframe {
 }
 .outline.tree.breadcrumb > .tree-data > .tree-node,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node {
-  border-bottom: 1px solid #344146;
+  border-bottom: 1px solid #3B494F;
   padding: 12px 20px;
 }
 .outline.tree.breadcrumb > .tree-data > .tree-node.child-of-selected,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.child-of-selected {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .in-background.outline.tree.breadcrumb > .tree-data > .tree-node.child-of-selected,
 .in-background.outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.child-of-selected {
@@ -3699,7 +3712,7 @@ iframe {
 .outline.tree.breadcrumb > .tree-data > .tree-node.ancestor-of-selected,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.ancestor-of-selected {
   color: #BFC2C3;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .in-background.outline.tree.breadcrumb > .tree-data > .tree-node.ancestor-of-selected,
 .in-background.outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.ancestor-of-selected {
@@ -3712,7 +3725,7 @@ iframe {
 .outline.tree.breadcrumb > .tree-data > .tree-node.selected,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.selected {
   background-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
   cursor: default;
 }
 .in-background.outline.tree.breadcrumb > .tree-data > .tree-node.selected,
@@ -3721,7 +3734,7 @@ iframe {
 }
 .outline.tree.breadcrumb > .tree-data > .tree-node.selected > .text > .compact-cell-header > .compact-cell-subtitle,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.selected > .text > .compact-cell-header > .compact-cell-subtitle {
-  color: #283438;
+  color: #2E3C41;
 }
 .outline.tree.breadcrumb > .tree-data > .tree-node.selected > .text > .compact-cell-header > .compact-cell-title > .right,
 .outline.tree.breadcrumb > .tree-data > .animation-wrapper > .tree-node.selected > .text > .compact-cell-header > .compact-cell-title > .right,
@@ -3739,13 +3752,13 @@ iframe {
 .outline.tree.breadcrumb.focused > .tree-data > .tree-node.parent-of-selected,
 .outline.tree.breadcrumb:focus > .tree-data > .animation-wrapper > .tree-node.parent-of-selected,
 .outline.tree.breadcrumb.focused > .tree-data > .animation-wrapper > .tree-node.parent-of-selected {
-  border-color: #344146;
+  border-color: #3B494F;
 }
 .outline.tree.breadcrumb:focus > .tree-data > .tree-node.selected,
 .outline.tree.breadcrumb.focused > .tree-data > .tree-node.selected,
 .outline.tree.breadcrumb:focus > .tree-data > .animation-wrapper > .tree-node.selected,
 .outline.tree.breadcrumb.focused > .tree-data > .animation-wrapper > .tree-node.selected {
-  border-color: #344146;
+  border-color: #3B494F;
 }
 .compact.outline.breadcrumb > .outline-title {
   padding-left: 16px;
@@ -3755,7 +3768,7 @@ iframe {
   margin-right: -8px;
 }
 .compact.outline.breadcrumb > .tree-data {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node {
   padding: 0;
@@ -3785,7 +3798,7 @@ iframe {
   padding: 0 16px 0 16px;
   min-height: 43px;
   margin-left: -8px;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node > .detail-menubar > .menubar-box > .menu-item {
   padding-left: 8px;
@@ -3803,11 +3816,11 @@ iframe {
   min-width: 16px;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node > .detail-content {
-  background-color: #1F272B;
+  background-color: #252F34;
   color: #E9EBEB;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node > .detail-content.dimmed-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node > .form > .root-group-box > .group-box-body {
   padding-left: 6px;
@@ -3838,7 +3851,7 @@ iframe {
   display: none;
 }
 .compact.outline.breadcrumb > .tree-data.detail-content-visible > .tree-node > .detail-menubar {
-  border-bottom: 1px solid #344146;
+  border-bottom: 1px solid #3B494F;
 }
 .compact.outline.breadcrumb > .tree-data > .tree-node.selected.has-tile-overview {
   background-color: transparent;
@@ -3873,7 +3886,7 @@ iframe {
     background-color: rgba(255, 255, 255, 0.12);
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 /* NOSONAR */
@@ -3882,7 +3895,7 @@ iframe {
     background-color: rgba(255, 255, 255, 0.12);
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 /* NOSONAR */
@@ -3944,7 +3957,7 @@ iframe {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
-  border-bottom-color: #344146;
+  border-bottom-color: #3B494F;
 }
 .outline.breadcrumb > .search-outline-panel > .search-outline-status {
   text-align: left;
@@ -3997,7 +4010,7 @@ iframe {
   display: table;
 }
 .outline-overview-content {
-  color: #344146;
+  color: #3B494F;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
@@ -4089,7 +4102,7 @@ iframe {
   bottom: 6px;
 }
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -4121,23 +4134,26 @@ iframe {
   border-radius: 12px 12px 0 0;
 }
 .view-tab.selected:not(.in-background) > .edge {
-  --color: #1F272B;
+  --color: #252F34;
   position: absolute;
   pointer-events: none;
   background-color: transparent;
-  bottom: 0;
-  height: 48px;
-  width: 24px;
-  box-shadow: 0 24px 0 0 var(--color);
-  clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+  bottom: -5px;
+  height: 12px;
+  width: 12px;
+  box-sizing: content-box;
+  border: 5px solid var(--color);
+  border-top: none;
 }
 .view-tab.selected:not(.in-background) > .edge.left {
-  left: -24px;
-  border-bottom-right-radius: 12px;
+  left: -12px;
+  border-bottom-right-radius: 17px;
+  border-left: none;
 }
 .view-tab.selected:not(.in-background) > .edge.right {
-  right: -24px;
-  border-bottom-left-radius: 12px;
+  right: -12px;
+  border-bottom-left-radius: 17px;
+  border-right: none;
 }
 .view-tab.selected:not(.in-background) > .edge.right {
   z-index: 1;
@@ -4153,14 +4169,12 @@ iframe {
 .view-tab.animate-bring-to-front:not(.in-background) > .edge.left,
 .view-tab.animate-bring-to-back:not(.in-background) > .edge.left {
   visibility: hidden;
-  left: 0;
-  animation: show-view-tab-left-edge 200ms ease-out 0s forwards;
+  animation: show-view-tab-left-edge 40ms ease-out 160ms forwards;
 }
 .view-tab.animate-bring-to-front:not(.in-background) > .edge.right,
 .view-tab.animate-bring-to-back:not(.in-background) > .edge.right {
   visibility: hidden;
-  right: 0;
-  animation: show-view-tab-right-edge 200ms ease-out 0s forwards;
+  animation: show-view-tab-right-edge 40ms ease-out 160ms forwards;
 }
 .view-button-tab {
   display: flex;
@@ -4174,11 +4188,11 @@ iframe {
   background-color: rgba(255, 255, 255, 0.12);
 }
 .view-button-tab.selected {
-  background-color: #1F272B;
+  background-color: #252F34;
   color: #71b0e8;
 }
 .view-button-tab.selected.in-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .view-button-tab.selected:not(.in-background) {
   width: 100%;
@@ -4201,15 +4215,21 @@ iframe {
   font-size: 20px;
 }
 @keyframes show-view-tab-left-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(-24px);
+    left: -5px;
+  }
+  100% {
+    left: -12px;
   }
 }
 @keyframes show-view-tab-right-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(24px);
+    right: -5px;
+  }
+  100% {
+    right: -12px;
   }
 }
 /*
@@ -4234,11 +4254,11 @@ iframe {
   /* necessary if it is in the header to make rounded corner overlap into tab area */
   position: relative;
   /* if covered by glass pane */
-  background-color: #0C1013;
+  background-color: #0E1316;
   color: #E9EBEB;
 }
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -4258,12 +4278,12 @@ iframe {
   align-items: center;
   justify-content: center;
   background-color: transparent;
+  cursor: pointer;
 }
 .view-menu-tab > .view-button:hover,
 .view-menu-tab > .view-menu:hover {
   background-color: rgba(0, 0, 0, 0.1);
   color: inherit;
-  cursor: pointer;
 }
 .view-menu-tab > .view-button.disabled,
 .view-menu-tab > .view-menu.disabled {
@@ -4301,7 +4321,7 @@ iframe {
   content: '';
   position: absolute;
   height: 100%;
-  border-left: 1px solid #0C1013;
+  border-left: 1px solid #0E1316;
   left: 0;
 }
 .selected-button-invisible.view-menu-tab > .view-menu::before {
@@ -4323,7 +4343,7 @@ iframe {
 }
 .view-menu-tab.selected {
   color: #71b0e8;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .view-menu-tab.selected > .view-button.selected,
 .view-menu-tab.selected > .view-menu.selected,
@@ -4358,7 +4378,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .view-menu-tab.selected.in-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .view-menu-tab.selected.in-background > .view-menu > .icon {
   padding-top: 2px;
@@ -4372,6 +4392,7 @@ iframe {
 .view-menu-tab.selected:not(.in-background) > .view-button {
   padding-left: 6px;
   width: 56px;
+  cursor: default;
 }
 .selected-button-invisible.view-menu-tab.selected:not(.in-background) > .view-menu {
   width: 50px;
@@ -4406,7 +4427,7 @@ iframe {
   align-items: center;
   text-align: center;
   color: #71b0e8;
-  background-color: #1F272B;
+  background-color: #252F34;
   border-radius: 12px;
   border: 2px solid transparent;
   padding: 12px 6px 0 6px;
@@ -4445,7 +4466,7 @@ iframe {
   cursor: default;
 }
 .view-menu-tile.disabled:hover {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 /*
  * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
@@ -4462,7 +4483,7 @@ iframe {
   top: 25%;
   left: 50%;
   width: 473px;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -4486,7 +4507,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .file-chooser > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .file-chooser > .box-buttons > .box-button.default:hover {
@@ -4649,7 +4670,7 @@ iframe {
   padding-bottom: 0;
 }
 .file-input.has-error:not(.disabled):not(.alternative):active {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .file-input.has-error.alternative:not(.disabled):active {
   border-bottom-color: #FF8888;
@@ -4681,7 +4702,7 @@ iframe {
   position: relative;
 }
 .form.dimmed-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .form.dimmed-background > .root-group-box > .menubar {
   background-color: inherit;
@@ -4694,7 +4715,7 @@ iframe {
 }
 .dialog {
   position: absolute;
-  background-color: #283438;
+  background-color: #2E3C41;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -4801,6 +4822,7 @@ iframe {
   white-space: nowrap;
   font-size: 16px;
   color: #E9EBEB;
+  margin-top: 1px;
 }
 .form > .header > .sub-title {
   overflow: hidden;
@@ -5866,7 +5888,7 @@ iframe {
   background-color: transparent;
 }
 .date-field > .field > .predict.has-error {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .date-field > .field > .predict + input {
   background-color: transparent;
@@ -6071,6 +6093,7 @@ iframe {
   vertical-align: middle;
   padding: 12px 0 12px 0;
   max-width: 100%;
+  margin-top: 1px;
 }
 .group-box.has-sub-label > .group-box-header > .title {
   padding-bottom: 7px;
@@ -6251,7 +6274,6 @@ iframe {
 }
 .html-field > .field {
   margin-left: 10px;
-  overflow: hidden;
 }
 .html-field > .field:focus {
   outline: none;
@@ -6857,7 +6879,7 @@ iframe {
 .proposal-field-popup {
   position: absolute;
   overflow: hidden;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -6866,7 +6888,7 @@ iframe {
 .dropdown-field-popup.touch,
 .smart-field-popup.touch,
 .proposal-field-popup.touch {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .proposal-chooser > .active-filter {
   position: absolute;
@@ -6878,7 +6900,7 @@ iframe {
 .proposal-chooser > .active-filter,
 .proposal-chooser > .status {
   padding: 0 12px;
-  background-color: #181C1F;
+  background-color: #1F2428;
   border-top: solid 1px rgba(255, 255, 255, 0.12);
   height: 30px;
   overflow: hidden;
@@ -7229,7 +7251,7 @@ iframe {
 .tab-box-header > .menubar {
   position: absolute;
   background-color: inherit;
-  border-bottom-color: transparent;
+  border-bottom: none;
 }
 .tab-box-header > .status {
   position: absolute;
@@ -7392,6 +7414,7 @@ iframe {
   display: inline-block;
   vertical-align: middle;
   padding: 12px 0 12px;
+  margin-top: 1px;
 }
 .tab-area.has-sub-label > .tab-item > .title {
   padding-bottom: 7px;
@@ -7557,7 +7580,7 @@ iframe {
 .tag-chooser-popup {
   position: absolute;
   overflow: hidden;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -7566,7 +7589,7 @@ iframe {
   max-width: 250px;
 }
 .tag-chooser-popup.touch {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .tag-chooser-popup > .table > .table-data {
   padding: 8px 12px 5px 12px;
@@ -7624,7 +7647,7 @@ iframe {
 }
 .tag-field > .field.has-error {
   border-color: #FF8888;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .tag-field > .field.has-error:focus,
 .tag-field > .field.has-error.focused {
@@ -7869,7 +7892,7 @@ iframe {
   border-color: #8ee0cf;
 }
 .wizard-step.selected > .icon {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
   font-weight: bold;
@@ -8121,7 +8144,7 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .menu-item.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .menu-item.selected:hover {
@@ -8150,7 +8173,7 @@ iframe {
   background-color: transparent;
 }
 .menu-item.disabled.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #7E8588;
 }
 .menu-item.disabled.selected.has-popup {
@@ -8164,6 +8187,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-item > .font-icon {
   font-size: 16px;
@@ -8250,6 +8274,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-button > .icon {
   /* Padding only relevant for icons larger than the container */
@@ -8301,7 +8326,7 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .menu-button.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
 }
@@ -8327,7 +8352,7 @@ iframe {
   background-color: #71b0e8;
   /* border is necessary to align the text with text from buttons with a real border */
   border-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .menu-button.default:hover {
   background-color: #94c4ee;
@@ -8335,12 +8360,12 @@ iframe {
 }
 .menu-button.default:active,
 .menu-button.default.active {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
 .menu-button.default.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
@@ -8370,7 +8395,7 @@ iframe {
 }
 .menu-button:disabled.selected,
 .menu-button.disabled.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #7E8588;
   border-color: #7E8588;
 }
@@ -8428,7 +8453,7 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .context-menu-popup {
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -8461,7 +8486,7 @@ iframe {
 .context-menu {
   position: absolute;
   margin: 6px 0;
-  background-color: #344146;
+  background-color: #3B494F;
 }
 .context-menu > .menu-item {
   display: flex;
@@ -8487,12 +8512,16 @@ iframe {
 .context-menu > .menu-item.selected {
   background-color: rgba(113, 176, 232, 0.09);
 }
+.context-menu > .menu-item.selected.has-popup {
+  color: #E9EBEB;
+}
+.context-menu > .menu-item.selected.has-popup.disabled {
+  color: #7E8588;
+  background-color: rgba(113, 176, 232, 0.09);
+}
 .context-menu > .menu-item.selected > .submenu-icon {
   transform: none;
 }
-.context-menu > .menu-item.expanded {
-  color: #71b0e8;
-}
 .context-menu > .menu-item.expanded > .submenu-icon {
   -webkit-transform: rotateX(180deg) translateY(-1px);
   -ms-transform: rotateX(180deg) translateY(-1px);
@@ -8580,7 +8609,7 @@ iframe {
   background-color: #71b0e8;
   /* border is necessary to align the text with text from buttons with a real border */
   border-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .combo-menu.menu-button.default > .menu-item:hover {
   background-color: #94c4ee;
@@ -8588,12 +8617,12 @@ iframe {
 }
 .combo-menu.menu-button.default > .menu-item:active,
 .combo-menu.menu-button.default > .menu-item.active {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
 .combo-menu.menu-button.default > .menu-item.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #a6cdf1;
   border-color: #a6cdf1;
 }
@@ -8603,7 +8632,7 @@ iframe {
   border-color: #4598e1;
 }
 .combo-menu.menu-button.default > .menu-item::before {
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .combo-menu.menu-button.default > .menu-item.selected {
   background-color: #a6cdf1;
@@ -8665,7 +8694,7 @@ iframe {
   background: linear-gradient(180deg, #014786 -145%, #9dc8ef 56%);
 }
 .profile-menu.menu-item > .icon.font-icon {
-  color: #0C1013;
+  color: #0E1316;
 }
 .profile-menu.menu-item > .icon.image-icon {
   object-fit: cover;
@@ -8903,7 +8932,7 @@ iframe {
   left: 0;
   min-width: 200px;
   max-width: 473px;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -8937,7 +8966,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .messagebox.info > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .messagebox.info > .box-buttons > .box-button.default:hover {
@@ -8983,7 +9012,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .messagebox.error > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #FF8888;
 }
 .messagebox.error > .box-buttons > .box-button.default:hover {
@@ -9029,7 +9058,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .messagebox.warning > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #FFBE6B;
 }
 .messagebox.warning > .box-buttons > .box-button.default:hover {
@@ -9075,7 +9104,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .messagebox.ok > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #62e7ce;
 }
 .messagebox.ok > .box-buttons > .box-button.default:hover {
@@ -9166,7 +9195,7 @@ iframe {
   text-align: center;
 }
 .messagebox-header > .messagebox-icon {
-  color: #0C1013;
+  color: #0E1316;
   font-size: 14px;
   border-radius: 50%;
 }
@@ -9226,7 +9255,7 @@ iframe {
   }
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -9236,10 +9265,13 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .mode {
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  --padding-x: 12px;
+  --padding-y: 6px;
+  --border-width: 1px;
+  border: var(--border-width) solid rgba(255, 255, 255, 0.25);
   border-radius: 0;
   flex: 1 1 0;
-  padding: 6px 12px;
+  padding: var(--padding-y) var(--padding-x);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -9254,16 +9286,16 @@ iframe {
 }
 .mode:not(.last):not(.selected) {
   border-right: none;
-  padding-right: 13px;
+  padding-right: calc(var(--padding-x) + var(--border-width));
   /* account for the missing border, so that text does not jump */
 }
 .mode.after-selected {
   border-left: none;
-  padding-left: 13px;
+  padding-left: calc(var(--padding-x) + var(--border-width));
   /* account for the missing border, so that text does not jump */
 }
 .mode.selected {
-  color: #0C1013;
+  color: #0E1316;
   cursor: default;
 }
 .mode.selected:hover {
@@ -9284,26 +9316,17 @@ iframe {
 .mode > .icon.with-label {
   margin-right: 8px;
 }
-.mode-selector.alternative {
-  border: 3px solid transparent;
-}
 .mode-selector.alternative > .mode {
+  --border-width: 0px;
   color: #E9EBEB;
-  border: none;
   background-color: transparent;
   border-radius: 3px;
 }
-.mode-selector.alternative > .mode:not(.last):not(.selected) {
-  padding-right: 12px;
-}
-.mode-selector.alternative > .mode.after-selected {
-  padding-left: 12px;
-}
 .mode-selector.alternative > .mode:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: #1F2428;
 }
 .mode-selector.alternative > .mode:active {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: #3B494F;
 }
 .mode-selector.alternative > .mode.selected {
   color: #71b0e8;
@@ -9313,7 +9336,7 @@ iframe {
   background-color: transparent;
 }
 .mode-selector.alternative > .mode.selected.disabled {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .mode-selector.alternative > .mode.mode-selector-dragging {
   background-color: transparent;
@@ -9325,24 +9348,11 @@ iframe {
   cursor: default;
 }
 .dense .mode-selector > .mode {
-  padding: 3px 5px;
-}
-.dense .mode-selector > .mode:not(.last):not(.selected) {
-  padding-right: 6px;
-  /* account for the missing border, so that text does not jump */
-}
-.dense .mode-selector > .mode.after-selected {
-  padding-left: 6px;
-  /* account for the missing border, so that text does not jump */
-}
-.dense .mode-selector.alternative > .mode:not(.last):not(.selected) {
-  padding-right: 5px;
-}
-.dense .mode-selector.alternative > .mode.after-selected {
-  padding-left: 5px;
+  --padding-x: 5px;
+  --padding-y: 3px;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -9362,15 +9372,16 @@ iframe {
   display: none;
 }
 .mode-selector.alternative {
-  background-color: #0C1013;
+  background-color: rgba(0, 0, 0, 0.6);
   border-radius: 3px;
+  border: 3px solid transparent;
 }
 .mode-selector.alternative:not(.disabled) > .mode-slider {
   display: block;
   position: absolute;
   top: 0;
   height: 100%;
-  background-color: #252e31;
+  background-color: #2C363A;
   border-radius: 3px;
   transition: left 500ms ease, width 500ms ease;
 }
@@ -9480,8 +9491,8 @@ iframe {
   flex-shrink: 0;
 }
 .notification-icon.font-icon {
-  color: #0C1013;
-  background-color: #1F272B;
+  color: #0E1316;
+  background-color: #252F34;
   font-size: 14px;
   border-radius: 50%;
 }
@@ -9575,7 +9586,7 @@ iframe {
 }
 .planner-scale > .timeline > .timeline-large {
   height: 50%;
-  background-color: #181C1F;
+  background-color: #1F2428;
   line-height: 22.5px;
 }
 .planner-scale > .timeline > .timeline-large > .scale-item > .planner-large-scale-item-line {
@@ -9641,7 +9652,7 @@ iframe {
   top: 0;
 }
 .planner-resource > .resource-cells > .selector > .selector-resize-left {
-  background-color: #1F272B;
+  background-color: #252F34;
   border-left: 2px solid #71b0e8;
   border-right: 2px solid #71b0e8;
   position: absolute;
@@ -9652,7 +9663,7 @@ iframe {
   cursor: col-resize;
 }
 .planner-resource > .resource-cells > .selector > .selector-resize-right {
-  background-color: #1F272B;
+  background-color: #252F34;
   border-left: 2px solid #71b0e8;
   border-right: 2px solid #71b0e8;
   position: absolute;
@@ -9666,7 +9677,7 @@ iframe {
   position: absolute;
   top: 1px;
   width: 0;
-  color: #0C1013;
+  color: #0E1316;
   height: 27px;
   line-height: 27px;
   background-color: #62e7ce;
@@ -9801,7 +9812,8 @@ iframe {
   cursor: pointer;
 }
 .planner-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, 0.25);
   border-bottom: 1px solid rgba(255, 255, 255, 0.25);
@@ -9975,7 +9987,7 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .mobile-popup {
-  background-color: #283438;
+  background-color: #2E3C41;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
@@ -10049,7 +10061,7 @@ iframe {
 .touch-popup {
   position: absolute;
   overflow: hidden;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -10123,7 +10135,7 @@ iframe {
   animation-fill-mode: forwards;
 }
 .widget-popup {
-  background-color: #283438;
+  background-color: #2E3C41;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -10319,9 +10331,13 @@ iframe {
   pointer-events: none;
   z-index: 1;
   --scroll-shadow-color: rgba(0, 0, 0, 0.7);
-  --scroll-shadow-size: 5px;
-  --scroll-shadow-blur: 5px;
-  --scroll-shadow-spread: 6px;
+  --scroll-shadow-size: 14px;
+  --scroll-shadow-blur: 14px;
+  --scroll-shadow-spread: 15px;
+  --scroll-shadow-inset-top: 0;
+  --scroll-shadow-inset-right: 0;
+  --scroll-shadow-inset-bottom: 0;
+  --scroll-shadow-inset-left: 0;
 }
 .scroll-shadow.top {
   box-shadow: inset 0 var(--scroll-shadow-size) var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color), inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, inset 0 0 0 0 transparent;
@@ -10369,15 +10385,15 @@ iframe {
   box-shadow: inset 0 0 0 0 transparent, inset calc(-1 * var(--scroll-shadow-size)) 0 var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color), inset 0 0 0 0 transparent, inset 0 0 0 0 transparent;
 }
 .scroll-shadow.gradient {
-  --scroll-shadow-color: #1F272B;
+  --scroll-shadow-color: #252F34;
   --scroll-shadow-size: 20px;
   --scroll-shadow-blur: 15px;
   --scroll-shadow-spread: 15px;
 }
 .scroll-shadow.large {
-  --scroll-shadow-size: 10px;
-  --scroll-shadow-blur: 10px;
-  --scroll-shadow-spread: 10px;
+  --scroll-shadow-size: 14px;
+  --scroll-shadow-blur: 14px;
+  --scroll-shadow-spread: 14px;
 }
 /*
  * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
@@ -10471,12 +10487,12 @@ iframe {
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
-  background-color: #344146;
+  background-color: #3B494F;
   /* Helper class used during width calculation - required on very narrow screens (e.g. Word AddIn) */
 }
 @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
   .busyindicator {
-    background-color: rgba(52, 65, 70, 0.8);
+    background-color: rgba(59, 73, 79, 0.8);
     -webkit-backdrop-filter: blur(15px);
     backdrop-filter: blur(15px);
   }
@@ -10499,7 +10515,7 @@ iframe {
   border-color: rgba(255, 255, 255, 0.12);
 }
 .busyindicator > .box-buttons > .box-button.default {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .busyindicator > .box-buttons > .box-button.default:hover {
@@ -10653,7 +10669,7 @@ input[type=range]:not(.ms-edge)::-webkit-slider-runnable-track {
 }
 input[type=range]:not(.ms-edge)::-webkit-slider-thumb {
   box-sizing: border-box;
-  border: 1px solid #0C1013;
+  border: 1px solid #0E1316;
   height: 16px;
   width: 16px;
   border-radius: 8px;
@@ -10674,7 +10690,7 @@ input[type=range]::-moz-range-track {
 }
 input[type=range]::-moz-range-thumb {
   box-sizing: border-box;
-  border: 1.5px solid #0C1013;
+  border: 1.5px solid #0E1316;
   height: 16px;
   width: 16px;
   border-radius: 8px;
@@ -10702,7 +10718,7 @@ input[type=range]::-ms-fill-upper {
 }
 input[type=range]::-ms-thumb {
   box-sizing: border-box;
-  border: 1px solid #0C1013;
+  border: 1px solid #0E1316;
   height: 16px;
   width: 16px;
   border-radius: 8px;
@@ -11683,7 +11699,7 @@ Try these to switch between fonts:
 /* scoutIcons: custom icons */
 /* scoutIcons: awesome icons */
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -11850,17 +11866,17 @@ Try these to switch between fonts:
 #scout .chooser-popup {
   position: absolute;
   overflow: hidden;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
   margin: 5px;
 }
 #scout .chooser-popup.touch {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 #scout .popup {
-  background-color: #283438;
+  background-color: #2E3C41;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -11874,18 +11890,18 @@ Try these to switch between fonts:
   display: none;
 }
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb > .scrollbar-thumb-handle {
-  background-color: rgba(52, 65, 70, 0.3);
+  background-color: rgba(59, 73, 79, 0.3);
 }
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb:hover > .scrollbar-thumb-handle {
-  background-color: rgba(52, 65, 70, 0.45);
+  background-color: rgba(59, 73, 79, 0.45);
 }
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb.container-too-small-for-thumb > .scrollbar-thumb-handle {
-  background-color: rgba(52, 65, 70, 0.15);
+  background-color: rgba(59, 73, 79, 0.15);
 }
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb.container-too-small-for-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
 #scout .inverted-scrollbars > .scrollbar > .scrollbar-thumb.container-too-small-for-thumb.scrollbar-thumb:hover > .scrollbar-thumb-handle {
-  background-color: rgba(52, 65, 70, 0.15);
+  background-color: rgba(59, 73, 79, 0.15);
 }
 /*
  * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
@@ -11968,7 +11984,7 @@ Try these to switch between fonts:
   position: relative;
   height: 22px;
   border-radius: 11px;
-  background-color: #0C1013;
+  background-color: rgba(0, 0, 0, 0.6);
   cursor: pointer;
   border: solid 1px #7E8588;
   --activated-border-color: #71b0e8;
@@ -11991,8 +12007,8 @@ Try these to switch between fonts:
   border-color: var(--activated-border-color);
 }
 .switch-button.activated:before {
-  background-color: #181C1F;
-  border-color: #181C1F;
+  background-color: #1F2428;
+  border-color: #1F2428;
   left: calc(100% - 18px);
 }
 .disabled > .switch-button {
@@ -12009,8 +12025,8 @@ Try these to switch between fonts:
   border-color: #7E8588;
 }
 .disabled > .switch-button.activated::before {
-  background-color: #181C1F;
-  border-color: #181C1F;
+  background-color: #1F2428;
+  border-color: #1F2428;
 }
 /*
  * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
@@ -12062,6 +12078,13 @@ Try these to switch between fonts:
 .table.table-row-check > .table-data > .table-row.selected::after {
   display: none;
 }
+.table.table-row-check > .table-data > .table-row:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+.table.table-row-check > .table-data > .table-row.disabled,
+.table.table-row-check > .table-data.disabled > .table-row {
+  background-color: transparent;
+}
 .table.table-row-check > .table-data > .table-row.checked,
 .table.table-row-check > .table-data > .table-row.checked.selected {
   /* Mark checked rows with a background color */
@@ -12069,7 +12092,17 @@ Try these to switch between fonts:
 }
 .table.table-row-check > .table-data > .table-row.checked > .table-cell,
 .table.table-row-check > .table-data > .table-row.checked.selected > .table-cell {
-  color: #0C1013;
+  color: #0E1316;
+}
+.table.table-row-check > .table-data > .table-row.checked:hover,
+.table.table-row-check > .table-data > .table-row.checked.selected:hover {
+  background-color: #94c4ee;
+}
+.table.table-row-check > .table-data > .table-row.disabled.checked,
+.table.table-row-check > .table-data.disabled > .table-row.checked,
+.table.table-row-check > .table-data > .table-row.disabled.checked.selected,
+.table.table-row-check > .table-data.disabled > .table-row.checked.selected {
+  background-color: #7E8588;
 }
 .table.table-row-check.keyboard-navigation:focus > .table-data > .table-row.selected,
 .table.table-row-check.keyboard-navigation.focused > .table-data > .table-row.selected {
@@ -12080,7 +12113,7 @@ Try these to switch between fonts:
   background-color: #94c4ee;
 }
 .table.structured .table-row:not(.leaf) {
-  background-color: #181C1F;
+  background-color: #1F2428;
   font-weight: bold;
 }
 .table > .tile-accordion {
@@ -12099,7 +12132,7 @@ Try these to switch between fonts:
   padding-bottom: 6px;
 }
 .table.dimmed-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .table.dimmed-background > .menubar {
   background-color: inherit;
@@ -12287,7 +12320,7 @@ Try these to switch between fonts:
   color: #E9EBEB;
 }
 .table-row.checked > .table-cell {
-  color: #0C1013;
+  color: #0E1316;
 }
 .table-cell.empty,
 .table-cell.icon-only {
@@ -12414,7 +12447,7 @@ Try these to switch between fonts:
   margin-right: 8px;
 }
 .table-row.checked > .table-cell > .table-cell-icon {
-  color: #0C1013;
+  color: #0E1316;
 }
 .table-aggregate {
   overflow: hidden;
@@ -12430,7 +12463,7 @@ Try these to switch between fonts:
   margin-top: 1px;
 }
 .table-aggregate-row {
-  background-color: #181C1F;
+  background-color: #1F2428;
   min-width: 100%;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
@@ -12483,16 +12516,16 @@ Try these to switch between fonts:
   background-color: rgba(21, 97, 167, 0.4);
 }
 .column-background-effect-gradient1-start {
-  background-color: #562e31;
+  background-color: #5a3437;
 }
 .column-background-effect-gradient1-end {
-  background-color: #1a4e48;
+  background-color: #1e544e;
 }
 .column-background-effect-gradient2-start {
-  background-color: #1a4e48;
+  background-color: #1e544e;
 }
 .column-background-effect-gradient2-end {
-  background-color: #562e31;
+  background-color: #5a3437;
 }
 /* key box */
 .table-row > .key-box {
@@ -12619,7 +12652,7 @@ Try these to switch between fonts:
   width: 100%;
   white-space: nowrap;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .table-control-resize {
   position: absolute;
@@ -12634,7 +12667,7 @@ Try these to switch between fonts:
   position: absolute;
   overflow: hidden;
   outline: none;
-  background-color: #1F272B;
+  background-color: #252F34;
   bottom: 64px;
   width: 100%;
   /* Default value for TableControl.js */
@@ -12655,7 +12688,7 @@ Try these to switch between fonts:
   width: 100%;
 }
 .table-control-content > .form {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .table-control-content > .form > .root-group-box > .group-box-body {
   /* to make sure fields are not drawn over the menubar when making table control container very small */
@@ -12828,7 +12861,7 @@ Try these to switch between fonts:
   position: relative;
   white-space: nowrap;
   overflow: hidden;
-  background-color: #181C1F;
+  background-color: #1F2428;
   border-bottom: 2px solid rgba(255, 255, 255, 0.12);
   z-index: 0;
   /* begin new stacking context */
@@ -12973,6 +13006,7 @@ Try these to switch between fonts:
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .table-header-item-state {
   position: absolute;
@@ -13049,7 +13083,7 @@ Try these to switch between fonts:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .table-header-menu {
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -13091,6 +13125,9 @@ Try these to switch between fonts:
   vertical-align: top;
   padding: 16px;
 }
+.table-header-menu-actions > .table-header-menu-group > .table-header-menu-group-text {
+  width: calc(100% + 12px);
+}
 .table-header-menu-filters {
   display: inline-block;
   vertical-align: top;
@@ -13232,10 +13269,10 @@ Try these to switch between fonts:
   content: '\E038';
 }
 .table-header-menu-command.color-gradient1 {
-  background-image: linear-gradient(to right, #562e31, #1a4e48);
+  background-image: linear-gradient(to right, #5a3437, #1e544e);
 }
 .table-header-menu-command.color-gradient2 {
-  background-image: linear-gradient(to right, #1a4e48, #562e31);
+  background-image: linear-gradient(to right, #1e544e, #5a3437);
 }
 .table-header-menu-command.color-bar-chart {
   background-image: linear-gradient(to right, rgba(21, 97, 167, 0.4) 0, rgba(21, 97, 167, 0.4) 65%, #fff 65%, #fff 100%);
@@ -13262,11 +13299,11 @@ Try these to switch between fonts:
 }
 .table-header-menu-filter-table.table-row-check > .table-data {
   margin-top: 0;
-  padding: 3px 4px;
+  padding: 3px;
 }
 .table-header-menu-filter-table.table-row-check > .table-data > .table-row {
   border-radius: 3px;
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 .table-header-menu-filter-table.table-row-check > .table-data > .table-row.last {
   margin-bottom: 0;
@@ -13603,7 +13640,7 @@ Try these to switch between fonts:
   padding: 5px 4px 8px 8px;
   max-width: 250px;
   overflow: hidden;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -13648,7 +13685,7 @@ Try these to switch between fonts:
  */
 .time-picker-popup {
   position: absolute;
-  background-color: #344146;
+  background-color: #3B494F;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 3px;
   box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
@@ -13765,11 +13802,11 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.18);
 }
 .day-table > .hour-row > .minutes.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .day-table > .hour-row > .minutes.selected.now > .text {
-  border-color: #0C1013;
+  border-color: #0E1316;
 }
 /*
  * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
@@ -13783,7 +13820,7 @@ Try these to switch between fonts:
  */
 .tooltip {
   position: absolute;
-  background-color: #344146;
+  background-color: #3B494F;
   border-radius: 3px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: #BFC2C3;
@@ -13837,16 +13874,16 @@ Try these to switch between fonts:
   padding-left: 5px;
 }
 .ok > .tooltip-menus > .menu-item {
-  color: #0C1013;
+  color: #0E1316;
 }
 .info > .tooltip-menus > .menu-item {
   color: #E9EBEB;
 }
 .warning > .tooltip-menus > .menu-item {
-  color: #0C1013;
+  color: #0E1316;
 }
 .error > .tooltip-menus > .menu-item {
-  color: #0C1013;
+  color: #0E1316;
 }
 .tooltip-arrow {
   position: absolute;
@@ -13866,7 +13903,7 @@ Try these to switch between fonts:
 .tooltip.error {
   background-color: #FF8888;
   border-width: 0;
-  color: #0C1013;
+  color: #0E1316;
 }
 .tooltip.error > .tooltip-arrow {
   background-color: #FF8888;
@@ -13874,7 +13911,7 @@ Try these to switch between fonts:
 .tooltip.warning {
   background-color: #FFBE6B;
   border-width: 0;
-  color: #0C1013;
+  color: #0E1316;
 }
 .tooltip.warning > .tooltip-arrow {
   background-color: #FFBE6B;
@@ -13882,7 +13919,7 @@ Try these to switch between fonts:
 .tooltip.ok {
   background-color: #62e7ce;
   border-width: 0;
-  color: #0C1013;
+  color: #0E1316;
 }
 .tooltip.ok > .tooltip-arrow {
   background-color: #62e7ce;
@@ -14060,7 +14097,7 @@ Try these to switch between fonts:
   width: 10px;
   border-radius: 1px;
   height: 2px;
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .tree-node-checkbox > .check-box:not(.checked).children-checked.disabled {
   border-color: rgba(255, 255, 255, 0.12);
@@ -14123,13 +14160,12 @@ Try these to switch between fonts:
 }
 .tree-node.lazy > .tree-node-control::before {
   font-family: Arial, sans-serif;
-  font-size: 13px;
   content: '+';
   /* Move to left because '+' sign is not as wide as 'arrow-down' */
   margin-left: -2px;
 }
 .tree-node.expanded > .tree-node-control::before {
-  /* This "imprecise" angle is a workround for firefox to prevent shifting the div a little when the animation finishes. */
+  /* This "imprecise" angle is a workaround for firefox to prevent shifting the div a little when the animation finishes. */
   /* See https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
   -webkit-transform: rotate(89.99deg);
   -ms-transform: rotate(89.99deg);
@@ -14308,7 +14344,7 @@ Try these to switch between fonts:
 }
 /* The default class is added if displayStyle is set to DEFAULT. If it is set to PLAIN no class will be added. */
 .default-tile {
-  background-color: #1F272B;
+  background-color: #252F34;
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 6px 8px;
 }
@@ -14409,7 +14445,7 @@ Try these to switch between fonts:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .tile-overview {
-  background-color: #181C1F;
+  background-color: #1F2428;
   position: relative;
   height: 100%;
   width: 100%;
@@ -14492,16 +14528,16 @@ Try these to switch between fonts:
   border: none;
   border-radius: 12px;
   color: #BFC2C3;
-  --tile-background-color: #1F272B;
+  --tile-background-color: #252F34;
   background-color: var(--tile-background-color);
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.inverted {
-  box-shadow: 0 0 0 1px #1F272B, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 1px #252F34, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.inverted.color-alternative {
-  box-shadow: 0 0 0 1px #1F272B, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 1px #252F34, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .dimmed-background .tile.dashboard {
   box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.05);
@@ -14645,7 +14681,7 @@ Try these to switch between fonts:
   animation: fade-out-from-current 0.15s;
 }
 .tile.dashboard.inverted {
-  --tile-background-color: #1F272B;
+  --tile-background-color: #252F34;
   color: #BFC2C3;
 }
 .tile.dashboard.inverted.disabled:not(.read-only) {
@@ -14683,7 +14719,12 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.18);
 }
 .tile.dashboard.inverted > .form-field.has-error > .status::before {
-  color: #FF5555;
+  color: #FF8888;
+}
+.tile.dashboard.inverted > .form-field.has-error > .status:hover::before,
+.tile.dashboard.inverted > .form-field.has-error > .status:active::before,
+.tile.dashboard.inverted > .form-field.has-error > .status.selected::before {
+  color: #ffbbbb;
 }
 .tile.dashboard.inverted > .form-field .scrollbar-thumb-handle {
   background-color: rgba(255, 255, 255, 0.3);
@@ -14701,7 +14742,7 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.15);
 }
 .tile.dashboard.color-alternative {
-  --tile-background-color: #1F272B;
+  --tile-background-color: #252F34;
   color: #BFC2C3;
 }
 .tile.dashboard.color-alternative.disabled:not(.read-only) {
@@ -14723,7 +14764,7 @@ Try these to switch between fonts:
   color: #b3d5f3;
 }
 .tile.dashboard.inverted.color-alternative {
-  --tile-background-color: #1F272B;
+  --tile-background-color: #252F34;
   color: #BFC2C3;
 }
 .tile.dashboard.inverted.color-alternative.disabled:not(.read-only) {
@@ -14755,14 +14796,14 @@ Try these to switch between fonts:
   box-shadow: 0 0 0 2px #71b0e8, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.selected.inverted {
-  --tile-background-color: #1f272b;
+  --tile-background-color: #252f34;
   box-shadow: 0 0 0 2px #71b0e8, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.selected.color-alternative {
   box-shadow: 0 0 0 2px #71b0e8, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.selected.inverted.color-alternative {
-  --tile-background-color: #1f272b;
+  --tile-background-color: #252f34;
   box-shadow: 0 0 0 2px #71b0e8, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .dimmed-background .tile.dashboard.selected {
@@ -14855,7 +14896,7 @@ Try these to switch between fonts:
   background-color: inherit;
 }
 .button-tile.dashboard > .tile-button {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .button-tile.dashboard > .tile-button > .field > .label {
   color: #71b0e8;
@@ -14871,7 +14912,7 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.18);
 }
 .button-tile.dashboard.inverted > .tile-button {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .button-tile.dashboard.inverted > .tile-button > .field > .label {
   color: #71b0e8;
@@ -14889,7 +14930,7 @@ Try these to switch between fonts:
   border-color: rgba(255, 255, 255, 0.18);
 }
 .button-tile.dashboard.color-alternative.inverted > .tile-button {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .button-tile.dashboard.color-alternative.inverted > .tile-button > .field > .label {
   color: #71b0e8;
@@ -15006,7 +15047,7 @@ Try these to switch between fonts:
   --scroll-shadow-size: 20px;
   --scroll-shadow-blur: 15px;
   --scroll-shadow-spread: 15px;
-  --scroll-shadow-color: #1F272B;
+  --scroll-shadow-color: #252F34;
 }
 .tile.dashboard > .table-field > .table > .table-data > .table-row > .table-cell,
 .tile.dashboard > .table-field > .table > .table-data > .table-row > .table-cell > .font-icon {
@@ -15043,7 +15084,7 @@ Try these to switch between fonts:
   color: #BFC2C3;
 }
 .tile.dashboard.inverted > .table-field > .table > .table-data + .scroll-shadow {
-  --scroll-shadow-color: #1F272B;
+  --scroll-shadow-color: #252F34;
 }
 .tile.dashboard.inverted > .table-field > .table > .menubar {
   border-top-color: rgba(255, 255, 255, 0.25);
@@ -15079,7 +15120,7 @@ Try these to switch between fonts:
   color: #BFC2C3;
 }
 .tile.dashboard.color-alternative.inverted > .table-field > .table > .table-data + .scroll-shadow {
-  --scroll-shadow-color: #1F272B;
+  --scroll-shadow-color: #252F34;
 }
 .tile.dashboard.color-alternative.inverted > .table-field > .table > .menubar {
   border-top-color: rgba(255, 255, 255, 0.25);
@@ -15279,8 +15320,8 @@ Try these to switch between fonts:
        /* Improve Chrome's auto-fill style by overriding the forced yellow background and black text color. */
   /* (Requires some hacks, see http://webagility.com/posts/remove-forced-yellow-input-background-in-chrome) */
   border-top-width: 0;
-  padding-top: 2px;
-  -webkit-box-shadow: inset 0 0 0 1000px #1F272B;
+  padding-top: 3px;
+  -webkit-box-shadow: inset 0 0 0 1000px #252F34;
   -webkit-text-fill-color: #E9EBEB !important;
   /* NOSONAR (!important is okay here) */
 }
@@ -15293,7 +15334,7 @@ Try these to switch between fonts:
   /* NOSONAR (!important is okay here) */
 }
 .login-box-content > form > input.alternative:-webkit-autofill::selection {
-  -webkit-text-fill-color: #0C1013 !important;
+  -webkit-text-fill-color: #0E1316 !important;
   /* NOSONAR (!important is okay here) */
 }
 /*
@@ -15316,7 +15357,7 @@ Try these to switch between fonts:
   border-color: #9f5555;
 }
 .login-button.default.disabled {
-  color: #0C1013;
+  color: #0E1316;
   border-color: #71b0e8;
   background-color: #71b0e8;
 }
@@ -15327,7 +15368,7 @@ Try these to switch between fonts:
   animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
   display: inline-block;
   border-radius: 50%;
-  border: 1px rgba(12, 16, 19, 0.8) solid;
+  border: 1px rgba(14, 19, 22, 0.8) solid;
   width: 18px;
   height: 18px;
   vertical-align: middle;
@@ -15339,6 +15380,20 @@ Try these to switch between fonts:
   -o-animation: nop 0.05s;
   animation: nop 0.05s;
 }
+/*
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+  padding-top: 8px;
+  padding-bottom: 9px;
+}
 /*
  * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials