@eclipse-scout/core 22.0.0 → 22.0.10

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,18 +773,18 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .button.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
 }
 .button.selected:hover {
-  background-color: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .button.selected.active,
 .button.selected:active {
-  background-color: #227fd1;
-  border-color: #227fd1;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .button.selected.has-popup {
   color: #71b0e8;
@@ -798,22 +799,22 @@ 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: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .button.default:active,
 .button.default.active {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .button.default.selected {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .button.default:focus {
   outline: none;
@@ -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: #1F272B;
+  background-color: #2E3C41;
   max-width: 450px;
   margin: 0 auto;
   padding: 45px 95px 50px 95px;
@@ -927,7 +928,7 @@ iframe {
   text-align: center;
 }
 .box-content > .header > .logo {
-  margin-top: 5px;
+  margin-top: 4px;
   margin-bottom: 40px;
   max-height: 30px;
 }
@@ -947,21 +948,23 @@ iframe {
 }
 @media (max-width: 490px) {
   .box-content {
-    padding: 20px;
+    padding: 40px;
     margin-left: 10px;
     margin-right: 10px;
   }
   .box-content > .header > .logo {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    margin-top: 0;
   }
 }
 @media (max-height: 400px) {
   .box-content {
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 25px;
+    padding-bottom: 25px;
   }
   .box-content > .header > .logo {
     margin-bottom: 20px;
+    margin-top: 0;
   }
 }
 @media (max-height: 700px) {
@@ -1001,6 +1004,7 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .check-box {
+  cursor: pointer;
   position: relative;
   display: inline-block;
   text-align: center;
@@ -1018,7 +1022,7 @@ iframe {
 .check-box.checked {
   background-color: #71b0e8;
   border-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .check-box.checked::before {
   position: absolute;
@@ -1046,9 +1050,10 @@ iframe {
   width: 10px;
   border-radius: 1px;
   height: 2px;
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .check-box.disabled {
+  cursor: default;
   border-color: rgba(255, 255, 255, 0.12);
 }
 .check-box.disabled.checked {
@@ -1080,13 +1085,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 +1204,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 +1406,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 +1537,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 +1573,7 @@ iframe {
   border: solid 4px #71b0e8;
   border-radius: 50%;
   background-color: #71b0e8;
-  color: #0C1013;
+  color: #0E1316;
 }
 .calendar-week-name {
   font-size: 11px;
@@ -1731,11 +1736,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 +1775,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 +1853,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 +1887,7 @@ iframe {
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: 1px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1969,7 +1975,7 @@ iframe {
   height: calc(100% - 50px);
 }
 .desktop.in-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 /* "Open URI" related rules */
 .download-frame {
@@ -2240,7 +2246,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 +2280,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 +2308,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 +2348,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 +2361,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 +2371,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 +2582,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 +2606,7 @@ iframe {
   flex-direction: column;
   justify-content: center;
   min-width: 30px;
-  background-color: #181C1F;
+  background-color: #1F2428;
   text-align: center;
   cursor: pointer;
 }
@@ -2637,7 +2643,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 +2713,7 @@ iframe {
 }
 .simple-tab.selected {
   cursor: default;
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 .simple-tab.selected > .title-line > .title {
   color: #E9EBEB;
@@ -2776,7 +2782,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 +2814,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 +2836,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 +2904,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 +2926,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 +2957,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 +3056,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 +3133,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 +3161,7 @@ iframe {
   top: 0;
   height: 64px;
   color: #E9EBEB;
-  background-color: #0C1013;
+  background-color: #0E1316;
 }
 .desktop-header > .simple-tab-area {
   height: 64px;
@@ -3182,7 +3196,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 +3220,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 +3241,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 +3254,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 +3265,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 +3282,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 +3319,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 +3332,7 @@ iframe {
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(100% -  72px);
   width: 300px;
   margin-top: 72px;
   pointer-events: none;
@@ -3411,7 +3428,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 +3591,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 {
@@ -3586,7 +3603,7 @@ iframe {
 }
 .outline.tree > .tree-data > .tree-node > .font-icon,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .font-icon {
-  line-height: 14px;
+  line-height: 15px;
   font-size: 16px;
   color: #7E8588;
 }
@@ -3599,20 +3616,16 @@ iframe {
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control {
   padding-top: 9px;
   padding-left: 20px;
-  line-height: 14px;
+  line-height: 15px;
   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 +3634,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 +3688,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 +3698,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 +3716,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 +3729,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 +3738,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 +3756,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 +3772,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 +3802,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 +3820,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 +3855,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 +3890,7 @@ iframe {
     background-color: rgba(255, 255, 255, 0.12);
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 /* NOSONAR */
@@ -3882,7 +3899,7 @@ iframe {
     background-color: rgba(255, 255, 255, 0.12);
   }
   100% {
-    background-color: #1F272B;
+    background-color: #252F34;
   }
 }
 /* NOSONAR */
@@ -3944,7 +3961,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 +4014,7 @@ iframe {
   display: table;
 }
 .outline-overview-content {
-  color: #344146;
+  color: #3B494F;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
@@ -4089,7 +4106,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
@@ -4113,28 +4130,34 @@ iframe {
 .view-tab.in-background {
   border-radius: 12px;
 }
+.view-tab > .edge {
+  position: absolute;
+}
 .view-tab.selected:not(.in-background) {
   margin: 8px 0 0;
   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;
@@ -4150,14 +4173,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;
@@ -4171,11 +4192,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%;
@@ -4198,15 +4219,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;
   }
 }
 /*
@@ -4231,11 +4258,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
@@ -4255,12 +4282,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 {
@@ -4298,7 +4325,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 {
@@ -4320,7 +4347,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,
@@ -4355,7 +4382,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;
@@ -4369,6 +4396,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;
@@ -4403,7 +4431,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;
@@ -4442,14 +4470,14 @@ iframe {
   cursor: default;
 }
 .view-menu-tile.disabled:hover {
-  background-color: #1F272B;
+  background-color: #252F34;
 }
 /*
- * 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -4459,7 +4487,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);
@@ -4483,7 +4511,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 {
@@ -4604,16 +4632,21 @@ iframe {
 }
 @media (max-width: 473px) {
   .file-chooser {
-    /* reduce message box width on small screens */
-    max-width: 330px;
-    /* no need to have a margin on small screens */
     margin: 0;
+    /* no need to have a margin on small screens */
+  }
+  .file-chooser > .box-buttons {
+    padding: 0 13px 26px 13px;
+    /* use less x-padding for buttons so that more text can be shown */
   }
   .file-chooser > .box-buttons > .box-button {
     margin-right: 4px;
     min-width: 70px;
     /* less min width for buttons on small screens */
   }
+  .file-chooser > .box-buttons > .box-button:last-child {
+    margin-right: 0;
+  }
 }
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
@@ -4646,7 +4679,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;
@@ -4678,7 +4711,7 @@ iframe {
   position: relative;
 }
 .form.dimmed-background {
-  background-color: #181C1F;
+  background-color: #1F2428;
 }
 .form.dimmed-background > .root-group-box > .menubar {
   background-color: inherit;
@@ -4691,7 +4724,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);
@@ -4798,6 +4831,7 @@ iframe {
   white-space: nowrap;
   font-size: 16px;
   color: #E9EBEB;
+  margin-top: 1px;
 }
 .form > .header > .sub-title {
   overflow: hidden;
@@ -5153,11 +5187,11 @@ iframe {
   position: absolute;
 }
 /*
- * Copyright (c) 2014-2017 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -5199,6 +5233,34 @@ iframe {
   top: 0;
   height: 100%;
 }
+.lookup-box > .field > .structure.tree > .table-data > .table-row.inactive,
+.lookup-box > .field > .structure.table > .table-data > .table-row.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row.inactive > .table-cell.last > .text::after,
+.lookup-box > .field > .structure.table > .table-data > .table-row.inactive > .table-cell.last > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row > .table-cell.last.inactive,
+.lookup-box > .field > .structure.table > .table-data > .table-row > .table-cell.last.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row > .table-cell.last.inactive > .text::after,
+.lookup-box > .field > .structure.table > .table-data > .table-row > .table-cell.last.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
+.lookup-box > .field > .structure.tree > .tree-data > .tree-node.inactive,
+.lookup-box > .field > .structure.table > .tree-data > .tree-node.inactive,
+.lookup-box > .field > .structure.tree > .tree-data > .animation-wrapper > .tree-node.inactive,
+.lookup-box > .field > .structure.table > .tree-data > .animation-wrapper > .tree-node.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .tree-data > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.table > .tree-data > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.tree > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.table > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -5863,7 +5925,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;
@@ -6068,6 +6130,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;
@@ -6248,7 +6311,6 @@ iframe {
 }
 .html-field > .field {
   margin-left: 10px;
-  overflow: hidden;
 }
 .html-field > .field:focus {
   outline: none;
@@ -6585,11 +6647,11 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 /*
- * 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -6854,7 +6916,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);
@@ -6863,7 +6925,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;
@@ -6875,7 +6937,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;
@@ -6899,15 +6961,26 @@ iframe {
 .proposal-chooser > .table > .table-data > .table-row.first.selected::after {
   top: -1px;
 }
+.proposal-chooser > .table > .table-data > .table-row.inactive {
+  font-style: italic;
+}
+.proposal-chooser > .table > .table-data > .table-row.inactive > .table-cell.last > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 .proposal-chooser > .table > .table-data > .scrollbar.y-axis > .scrollbar-thumb > .scrollbar-thumb-handle {
   margin-left: 1px;
 }
 .proposal-chooser > .tree > .tree-data {
   padding: 8px 12px;
 }
-.proposal-chooser > .tree > .tree-data > .tree-node.inactive {
+.proposal-chooser > .tree > .tree-data > .tree-node.inactive,
+.proposal-chooser > .tree > .tree-data > .animation-wrapper > .tree-node.inactive {
   font-style: italic;
 }
+.proposal-chooser > .tree > .tree-data > .tree-node.inactive > .text::after,
+.proposal-chooser > .tree > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 .status > .ellipsis {
   padding-left: 3px;
 }
@@ -7226,7 +7299,7 @@ iframe {
 .tab-box-header > .menubar {
   position: absolute;
   background-color: inherit;
-  border-bottom-color: transparent;
+  border-bottom: none;
 }
 .tab-box-header > .status {
   position: absolute;
@@ -7389,6 +7462,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;
@@ -7554,7 +7628,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);
@@ -7563,7 +7637,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;
@@ -7621,7 +7695,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 {
@@ -7866,7 +7940,7 @@ iframe {
   border-color: #8ee0cf;
 }
 .wizard-step.selected > .icon {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
   font-weight: bold;
@@ -8118,15 +8192,15 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .menu-item.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
 }
 .menu-item.selected:hover {
-  background-color: #4598e1;
+  background-color: #94c4ee;
 }
 .menu-item.selected.active,
 .menu-item.selected:active {
-  background-color: #227fd1;
+  background-color: #a6cdf1;
 }
 .menu-item.selected.has-popup {
   color: #71b0e8;
@@ -8147,7 +8221,7 @@ iframe {
   background-color: transparent;
 }
 .menu-item.disabled.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #7E8588;
 }
 .menu-item.disabled.selected.has-popup {
@@ -8161,6 +8235,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-item > .font-icon {
   font-size: 16px;
@@ -8247,6 +8322,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 */
@@ -8298,18 +8374,18 @@ iframe {
   background-color: rgba(255, 255, 255, 0.18);
 }
 .menu-button.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #71b0e8;
   border-color: #71b0e8;
 }
 .menu-button.selected:hover {
-  background-color: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .menu-button.selected.active,
 .menu-button.selected:active {
-  background-color: #227fd1;
-  border-color: #227fd1;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .menu-button.selected.has-popup {
   color: #71b0e8;
@@ -8324,22 +8400,22 @@ 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: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .menu-button.default:active,
 .menu-button.default.active {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .menu-button.default.selected {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .menu-button.default:focus {
   outline: none;
@@ -8367,7 +8443,7 @@ iframe {
 }
 .menu-button:disabled.selected,
 .menu-button.disabled.selected {
-  color: #0C1013;
+  color: #0E1316;
   background-color: #7E8588;
   border-color: #7E8588;
 }
@@ -8425,7 +8501,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);
@@ -8458,7 +8534,7 @@ iframe {
 .context-menu {
   position: absolute;
   margin: 6px 0;
-  background-color: #344146;
+  background-color: #3B494F;
 }
 .context-menu > .menu-item {
   display: flex;
@@ -8484,12 +8560,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);
@@ -8577,22 +8657,22 @@ 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: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .combo-menu.menu-button.default > .menu-item:active,
 .combo-menu.menu-button.default > .menu-item.active {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .combo-menu.menu-button.default > .menu-item.selected {
-  color: #0C1013;
-  background-color: #227fd1;
-  border-color: #227fd1;
+  color: #0E1316;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .combo-menu.menu-button.default > .menu-item:focus {
   outline: none;
@@ -8600,11 +8680,11 @@ 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: #227fd1;
-  border-color: #227fd1;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .combo-menu.menu-button.default > .menu-item.disabled {
   color: rgba(255, 255, 255, 0.4);
@@ -8662,7 +8742,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;
@@ -8885,7 +8965,7 @@ iframe {
   margin: 8px 6px;
 }
 /*
- * 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
@@ -8900,7 +8980,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);
@@ -8910,6 +8990,18 @@ iframe {
 .messagebox.full-height.full-width {
   border-radius: 0;
 }
+.messagebox.full-width > .messagebox-buttons {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.messagebox.full-width > .messagebox-buttons > .box-button {
+  min-width: 70px;
+  /* less min width for buttons on small screens */
+  margin-right: 8px;
+}
+.messagebox.full-width > .messagebox-buttons > .box-button:last-child {
+  margin-right: 0;
+}
 .messagebox.info > .messagebox-content > .messagebox-header {
   color: #71b0e8;
 }
@@ -8934,17 +9026,17 @@ 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 {
-  background-color: #4598e1;
-  border-color: #4598e1;
+  background-color: #94c4ee;
+  border-color: #94c4ee;
 }
 .messagebox.info > .box-buttons > .box-button.default.active,
 .messagebox.info > .box-buttons > .box-button.default:active {
-  background-color: #227fd1;
-  border-color: #227fd1;
+  background-color: #a6cdf1;
+  border-color: #a6cdf1;
 }
 .messagebox.info > .box-buttons > .box-button.default.keyboard-navigation {
   outline: none;
@@ -8980,17 +9072,17 @@ 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 {
-  background-color: #ff6969;
-  border-color: #ff6969;
+  background-color: #ffa7a7;
+  border-color: #ffa7a7;
 }
 .messagebox.error > .box-buttons > .box-button.default.active,
 .messagebox.error > .box-buttons > .box-button.default:active {
-  background-color: #ff4646;
-  border-color: #ff4646;
+  background-color: #ffbbbb;
+  border-color: #ffbbbb;
 }
 .messagebox.error > .box-buttons > .box-button.default.keyboard-navigation {
   outline: none;
@@ -9026,17 +9118,17 @@ 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 {
-  background-color: #ffb14c;
-  border-color: #ffb14c;
+  background-color: #ffd094;
+  border-color: #ffd094;
 }
 .messagebox.warning > .box-buttons > .box-button.default.active,
 .messagebox.warning > .box-buttons > .box-button.default:active {
-  background-color: #ffa129;
-  border-color: #ffa129;
+  background-color: #ffd9a8;
+  border-color: #ffd9a8;
 }
 .messagebox.warning > .box-buttons > .box-button.default.keyboard-navigation {
   outline: none;
@@ -9072,17 +9164,17 @@ 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 {
-  background-color: #47e3c6;
-  border-color: #47e3c6;
+  background-color: #85ecd9;
+  border-color: #85ecd9;
 }
 .messagebox.ok > .box-buttons > .box-button.default.active,
 .messagebox.ok > .box-buttons > .box-button.default:active {
-  background-color: #28debc;
-  border-color: #28debc;
+  background-color: #a0f0e1;
+  border-color: #a0f0e1;
 }
 .messagebox.ok > .box-buttons > .box-button.default.keyboard-navigation {
   outline: none;
@@ -9163,7 +9255,7 @@ iframe {
   text-align: center;
 }
 .messagebox-header > .messagebox-icon {
-  color: #0C1013;
+  color: #0E1316;
   font-size: 14px;
   border-radius: 50%;
 }
@@ -9204,26 +9296,12 @@ iframe {
 }
 @media (max-width: 473px) {
   .messagebox {
-    /* reduce message box width on small screens */
-    max-width: 330px;
     /* no need to have a margin on small screens */
     margin: 0;
   }
-  .messagebox > .messagebox-buttons {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .messagebox > .messagebox-buttons > .box-button {
-    min-width: 70px;
-    /* less min width for buttons on small screens */
-    margin-right: 8px;
-  }
-  .messagebox > .messagebox-buttons > .box-button:last-child {
-    margin-right: 0;
-  }
 }
 /*
- * 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
@@ -9233,10 +9311,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;
 }
@@ -9251,16 +9332,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 {
@@ -9281,26 +9362,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;
@@ -9310,7 +9382,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;
@@ -9322,24 +9394,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
@@ -9359,15 +9418,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;
 }
@@ -9477,8 +9537,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%;
 }
@@ -9572,7 +9632,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 {
@@ -9638,7 +9698,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;
@@ -9649,7 +9709,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;
@@ -9663,7 +9723,7 @@ iframe {
   position: absolute;
   top: 1px;
   width: 0;
-  color: #0C1013;
+  color: #0E1316;
   height: 27px;
   line-height: 27px;
   background-color: #62e7ce;
@@ -9798,7 +9858,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);
@@ -9972,7 +10033,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;
@@ -10046,7 +10107,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);
@@ -10120,7 +10181,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);
@@ -10316,9 +10377,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;
@@ -10366,15 +10431,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.
@@ -10468,12 +10533,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);
   }
@@ -10496,7 +10561,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 {
@@ -10650,7 +10715,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;
@@ -10671,7 +10736,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;
@@ -10699,7 +10764,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;
@@ -11680,7 +11745,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
@@ -11740,25 +11805,38 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.18);
   color: #E9EBEB;
 }
-#scout .tooltip-status,
+#scout .tooltip-status {
+  visibility: visible;
+  cursor: pointer;
+}
+#scout .tooltip-status::before {
+  content: '\E002';
+  color: #A7ACAD;
+  font-size: 16px;
+}
+#scout .tooltip-status:hover::before {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: #BFC2C3;
+}
+#scout .tooltip-status:active::before,
+#scout .tooltip-status.selected::before {
+  background-color: rgba(255, 255, 255, 0.18);
+  color: #BFC2C3;
+}
 #scout .info-status {
   visibility: visible;
   cursor: pointer;
 }
-#scout .tooltip-status::before,
 #scout .info-status::before {
   content: '\E002';
   color: #A7ACAD;
   font-size: 16px;
 }
-#scout .tooltip-status:hover::before,
 #scout .info-status:hover::before {
   background-color: rgba(255, 255, 255, 0.12);
   color: #BFC2C3;
 }
-#scout .tooltip-status:active::before,
 #scout .info-status:active::before,
-#scout .tooltip-status.selected::before,
 #scout .info-status.selected::before {
   background-color: rgba(255, 255, 255, 0.18);
   color: #BFC2C3;
@@ -11834,17 +11912,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);
@@ -11858,25 +11936,25 @@ 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.
  * 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
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -11952,7 +12030,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;
@@ -11975,8 +12053,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 {
@@ -11993,8 +12071,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.
@@ -12046,6 +12124,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 */
@@ -12053,7 +12138,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 {
@@ -12061,10 +12156,10 @@ Try these to switch between fonts:
 }
 .table.table-row-check.keyboard-navigation:focus > .table-data > .table-row.selected.checked,
 .table.table-row-check.keyboard-navigation.focused > .table-data > .table-row.selected.checked {
-  background-color: #4598e1;
+  background-color: #94c4ee;
 }
 .table.structured .table-row:not(.leaf) {
-  background-color: #181C1F;
+  background-color: #1F2428;
   font-weight: bold;
 }
 .table > .tile-accordion {
@@ -12083,7 +12178,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;
@@ -12271,7 +12366,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 {
@@ -12314,7 +12409,7 @@ Try these to switch between fonts:
   left: 0;
   padding: var(--table-row-padding-y) 8px var(--table-row-padding-y) 13px;
   cursor: pointer;
-  line-height: 14px;
+  line-height: 15px;
   /* Necessary to align with the text, depends on the used font size */
 }
 .table-cell.table-node > .table-row-control::before {
@@ -12358,6 +12453,7 @@ Try these to switch between fonts:
   cursor: default;
 }
 .table.disabled > .table-data > .table-row > .table-cell > .check-box {
+  cursor: default;
   border-color: rgba(255, 255, 255, 0.12);
 }
 .table.disabled > .table-data > .table-row > .table-cell > .check-box.checked {
@@ -12386,6 +12482,9 @@ Try these to switch between fonts:
 }
 .font-icon.table-cell-icon {
   color: #E9EBEB;
+  font-size: 14px;
+  line-height: 15px;
+  vertical-align: top;
 }
 .disabled .font-icon.table-cell-icon {
   color: #7E8588;
@@ -12398,23 +12497,21 @@ 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;
   padding-left: var(--table-row-margin-x);
   padding-right: var(--table-row-margin-x);
+  font-size: 12px;
 }
 .table-aggregate > .table-cell {
   padding: var(--table-row-padding-y) 10px 0 10px;
   border-bottom: 0;
   height: 100%;
 }
-.table-aggregate > .table-cell > .font-icon {
-  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);
@@ -12451,10 +12548,15 @@ Try these to switch between fonts:
   display: inline-block;
   color: #E9EBEB;
   vertical-align: middle;
+  line-height: 14px;
 }
 .table-aggregate-cell.sum > .table-cell-icon,
 .table-aggregate-cell.avg > .table-cell-icon {
-  font-size: 10px;
+  font-size: 13px;
+}
+.table-aggregate-cell.min > .table-cell-icon,
+.table-aggregate-cell.max > .table-cell-icon {
+  font-size: 15px;
 }
 .table-aggregate-cell.selection,
 .table-aggregate-cell.selection > .table-cell-icon {
@@ -12467,16 +12569,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 {
@@ -12603,7 +12705,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;
@@ -12618,7 +12720,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 */
@@ -12639,7 +12741,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 */
@@ -12812,7 +12914,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 */
@@ -12957,6 +13059,7 @@ Try these to switch between fonts:
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .table-header-item-state {
   position: absolute;
@@ -13033,7 +13136,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);
@@ -13075,6 +13178,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;
@@ -13216,10 +13322,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%);
@@ -13246,11 +13352,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;
@@ -13587,7 +13693,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);
@@ -13632,7 +13738,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);
@@ -13749,11 +13855,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.
@@ -13767,7 +13873,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;
@@ -13821,16 +13927,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;
@@ -13850,7 +13956,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;
@@ -13858,7 +13964,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;
@@ -13866,7 +13972,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;
@@ -13899,7 +14005,7 @@ Try these to switch between fonts:
  * 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
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -13953,6 +14059,12 @@ Try these to switch between fonts:
 .tree-data.checkable > .animation-wrapper > .tree-node {
   cursor: pointer;
 }
+.tree-data.checkable.disabled > .tree-node,
+.tree-data.checkable.disabled > .animation-wrapper > .tree-node,
+.tree-data.checkable > .tree-node.disabled,
+.tree-data.checkable > .animation-wrapper > .tree-node.disabled {
+  cursor: default;
+}
 .navigation-breadcrumb .tree-data {
   float: left;
 }
@@ -13986,11 +14098,13 @@ Try these to switch between fonts:
   /* Tree node is disabled -> use lighter disabled color */
   color: #7E8588;
 }
+.disabled > .animation-wrapper > .tree-node,
 .disabled > .tree-node {
   /* Whole tree is disabled -> use darker disabled color */
   color: #7E8588;
 }
-.disabled.read-only > .tree-data > .tree-node {
+.disabled.read-only > .animation-wrapper > .tree-node,
+.disabled.read-only > .tree-node {
   color: #E9EBEB;
 }
 .tree-node > .text {
@@ -14021,6 +14135,7 @@ Try these to switch between fonts:
 .tree-node > .icon.font-icon {
   /* Necessary to align with the text, depends on the used font size */
   line-height: 15px;
+  font-size: 14px;
 }
 .tree-node-checkbox {
   display: block;
@@ -14044,15 +14159,17 @@ 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 {
+  cursor: default;
   border-color: rgba(255, 255, 255, 0.12);
   background-color: #7E8588;
   border-color: #7E8588;
 }
 .tree.disabled > .tree-data > .tree-node > .tree-node-checkbox > .check-box,
 .tree.disabled > .tree-data > .animation-wrapper > .tree-node > .tree-node-checkbox > .check-box {
+  cursor: default;
   border-color: rgba(255, 255, 255, 0.12);
 }
 .tree.disabled > .tree-data > .tree-node > .tree-node-checkbox > .check-box.checked,
@@ -14089,7 +14206,7 @@ Try these to switch between fonts:
   cursor: pointer;
   padding: 7px 8px 7px 13px;
   height: 100%;
-  line-height: 14px;
+  line-height: 15px;
   /* Necessary to align with the text, depends on the used font size */
   color: inherit;
 }
@@ -14107,13 +14224,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);
@@ -14292,7 +14408,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;
 }
@@ -14393,7 +14509,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%;
@@ -14476,16 +14592,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);
@@ -14629,7 +14745,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) {
@@ -14667,7 +14783,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);
@@ -14685,7 +14806,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) {
@@ -14707,7 +14828,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) {
@@ -14739,14 +14860,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 {
@@ -14839,7 +14960,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;
@@ -14855,7 +14976,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;
@@ -14873,7 +14994,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;
@@ -14911,11 +15032,11 @@ Try these to switch between fonts:
   color: #7E8588;
 }
 /*
- * 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -14970,6 +15091,30 @@ Try these to switch between fonts:
 .tile.dashboard > .table-field > .table > .table-header > .table-header-item {
   color: #BFC2C3;
 }
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered {
+  padding-right: 7px;
+}
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.halign-center {
+  padding-right: 7px;
+}
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-right {
+  padding-right: 11px;
+}
 .tile.dashboard > .table-field > .table > .table-header > .table-header-item > .table-header-item-state {
   display: none;
 }
@@ -14990,7 +15135,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 {
@@ -15027,7 +15172,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);
@@ -15063,7 +15208,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);
@@ -15243,7 +15388,7 @@ Try these to switch between fonts:
  * 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
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -15257,14 +15402,18 @@ Try these to switch between fonts:
 }
 .login-box-content > form > .button {
   margin-top: 16px;
+  margin-bottom: 0;
+}
+.login-box-content > form > .message-box {
+  margin: 0 20px 12px 20px;
 }
 .login-box-content > form > input.alternative:-webkit-autofill {
   /* NOSONAR (for some reason, rule "less:overqualified-elements" is illegitimately triggered here)
        /* 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) */
 }
@@ -15277,27 +15426,30 @@ 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) */
 }
 /*
  * Login button is a default button -> styles are defined in main.css.
  * Difference to regular default button is the disabled style and the ability to turn red.
  */
-.login-button.default.login-error {
-  border-color: #D53F3F;
-  background-color: #D53F3F;
+.login-button.default.login-error:not(.disabled) {
+  border-color: transparent;
+  background-color: #FF8888;
 }
-.login-button.default.login-error:hover {
-  background-color: #D53F3F;
-  border-color: #D53F3F;
+.login-button.default.login-error:not(.disabled):hover {
+  background-color: #ffa7a7;
 }
-.login-button.default.login-error:active {
-  border-color: #D53F3F;
-  background-color: #ce2d2d;
+.login-button.default.login-error:not(.disabled):active {
+  background-color: #ffbbbb;
+}
+.login-button.default.login-error:not(.disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 3px #804444;
+  border-color: #9f5555;
 }
 .login-button.default.disabled {
-  color: #0C1013;
+  color: #0E1316;
   border-color: #71b0e8;
   background-color: #71b0e8;
 }
@@ -15308,7 +15460,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;
@@ -15320,6 +15472,31 @@ Try these to switch between fonts:
   -o-animation: nop 0.05s;
   animation: nop 0.05s;
 }
+@media (max-width: 490px) {
+  .login-box-content > form > .message-box,
+  .login-box-content > form > input,
+  .login-box-content > form > .button {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+/*
+ * 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
+ * https://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+  padding-bottom: 0;
+}
+.dense .breadcrumb-bar-field > .field {
+  padding-bottom: 4px;
+}
 /*
  * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -15335,11 +15512,11 @@ Try these to switch between fonts:
   white-space: nowrap;
 }
 /*
- * Copyright (c) 2010-2020 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -15351,6 +15528,7 @@ Try these to switch between fonts:
   height: 100%;
   color: #71b0e8;
   font-size: 14px;
+  vertical-align: top;
 }
 .breadcrumb-item.last {
   font-weight: bold;
@@ -15358,9 +15536,6 @@ Try these to switch between fonts:
 .breadcrumb-item:hover:not(.disabled) {
   color: #9dc8ef;
 }
-.breadcrumb-item.first {
-  vertical-align: top;
-}
 .breadcrumb-item:not(.first)::before {
   font-family: scoutIcons, Arial, sans-serif;
   font-weight: normal;