diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 2c0effd..9a8fc9a 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -40,6 +40,18 @@
 $page-padding-top: 1rem;
 
 /* main ---------------------------------------------------------- */
+@mixin adjustCustomControlLabel() {
+  .form-check-label {
+    &:after {
+      content: "";
+    }
+
+    img {
+      padding-right: 0.3em;
+    }
+  }
+}
+
 @mixin buttonLinkDisabledCursor() {
   &:disabled {
     pointer-events: auto;
@@ -66,12 +78,37 @@
   }
 }
 
+@mixin inlinePadding() {
+  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+}
+
 @mixin linkWithoutUnderline() {
   > .tobago-link {
     text-decoration: none;
   }
 }
 
+@mixin markupFatalErrWarnInfo() {
+  &-markup-fatal, &-markup-error {
+    &.border-danger:focus {
+      box-shadow: 0 0 0 .2rem rgba($danger, .25);
+    }
+  }
+
+  &-markup-warn {
+    &.border-warning:focus {
+      box-shadow: 0 0 0 .2rem rgba($warning, .25);
+    }
+  }
+
+  &-markup-info {
+    &.border-info:focus {
+      box-shadow: 0 0 0 .2rem rgba($info, .25);
+    }
+  }
+}
+
 @mixin tobagoTreeNodeToggle() {
   .tobago-treeNode-toggle:not(.invisible) {
     cursor: pointer;
@@ -161,16 +198,6 @@
   }
 }
 
-/* buttons, links ------------------------------------------------------- */
-.tobago-buttons {
-}
-
-tobago-buttons {
-  > .tobago-button {
-    display: inline-block;
-  }
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button {
   @include buttonLinkDisabledCursor();
@@ -200,6 +227,15 @@
   }
 }
 
+.tobago-buttons {
+}
+
+tobago-buttons {
+  > .tobago-button {
+    display: inline-block;
+  }
+}
+
 /* collapsible -------------------------------------------------------------- */
 
 tobago-box.tobago-collapsed .card-body,
@@ -212,6 +248,7 @@
 
 // XXX remove me
 .tobago-date {
+  @include markupFatalErrWarnInfo();
 }
 
 tobago-date {
@@ -243,6 +280,45 @@
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown {
+  @include dropdownMenuFormCheckComponents();
+
+  &.tobago-dropdown-submenu {
+    cursor: pointer;
+    position: relative;
+    width: 100%;
+    float: right;
+
+    &:hover {
+      background-color: $dropdown-link-hover-bg;
+
+      > .dropdown-menu {
+        display: block;
+        top: 0;
+        left: 100%;
+        margin-top: -0.5rem;
+        margin-left: -1px;
+      }
+    }
+
+    > .dropdown-item::after {
+      content: " ";
+      float: right;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 5px 0 5px 5px;
+      border-left-color: #cccccc;
+      margin-top: 7px;
+      margin-right: -10px;
+    }
+  }
+}
+
+.tobago-dropdown-open, .tobago-dropdown-select {
+  // deprecated; must be added for test
+}
+
 /* figure -------------------------------------------------------------- */
 
 .tobago-figure {
@@ -301,6 +377,10 @@
 
 /* flowLayout ---------------------------------------------------------- */
 tobago-flow-layout {
+  &.tobago-text-justify {
+    /* added here, because Bootstrap has removed .text-justify */
+    text-align: justify !important;
+  }
 }
 
 /* focus --------------------------------------------------------------- */
@@ -382,6 +462,8 @@
 }
 
 .tobago-in {
+  @include markupFatalErrWarnInfo();
+
   &:disabled {
     color: rgba($input-color, $form-disabled-alpha);
   }
@@ -401,6 +483,9 @@
   color: #6610f2 !important;
 }
 
+tobago-links {
+}
+
 /* link ----------------------------------------------------------- */
 
 .tobago-link {
@@ -458,9 +543,6 @@
   padding-right: 0;
 }
 
-tobago-links {
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -500,6 +582,13 @@
   }
 }
 
+.tobago-margin-bottom {
+  /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
+  "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
+  custom styling is much more complicated. */
+  margin-bottom: 1rem;
+}
+
 .tobago-messages {
   $alert-icon-padding-x: $alert-padding-x / 1.25;
   $alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x;
@@ -557,41 +646,6 @@
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  @include dropdownMenuFormCheckComponents();
-
-  &.tobago-dropdown-submenu {
-    cursor: pointer;
-    position: relative;
-    width: 100%;
-    float: right;
-
-    &:hover {
-      background-color: $dropdown-link-hover-bg;
-
-      > .dropdown-menu {
-        display: block;
-        top: 0;
-        left: 100%;
-        margin-top: -0.5rem;
-        margin-left: -1px;
-      }
-    }
-
-    > .dropdown-item::after {
-      content: " ";
-      float: right;
-      border-color: transparent;
-      border-style: solid;
-      border-width: 5px 0 5px 5px;
-      border-left-color: #cccccc;
-      margin-top: 7px;
-      margin-right: -10px;
-    }
-  }
-}
-
 /* object ----------------------------------------------------------------- */
 .tobago-object {
 }
@@ -698,6 +752,18 @@
   }
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  @include dropdownMenuFormCheckComponents();
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: $zindex-popover;
+}
+
 /* panel ------------------------------------------------------------- */
 
 // todo: remove
@@ -728,6 +794,26 @@
 tobago-range {
 }
 
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: $danger;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > {
+  h1, h2, h3, h4, h5, h6 {
+    > .fa:first-child, > img {
+      /* to separate the icon from the rest of the title */
+      margin-right: 0.7em;
+    }
+
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+  }
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -851,43 +937,11 @@
   }
 }
 
-/* section ----------------------------------------------------------- */
-
-tobago-section > div > {
-  h1, h2, h3, h4, h5, h6 {
-    > .fa:first-child, > img {
-      /* to separate the icon from the rest of the title */
-      margin-right: 0.7em;
-    }
-
-    display: flex;
-    justify-content: space-between;
-    align-content: center;
-  }
-}
-
 /* select ----------------------------------------------------------- */
 .tobago-inputPseudo {
   //deprecated should be removed
 }
 
-@mixin adjustCustomControlLabel() {
-  .form-check-label {
-    &:after {
-      content: "";
-    }
-
-    img {
-      padding-right: 0.3em;
-    }
-  }
-}
-
-@mixin inlinePadding() {
-  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-}
-
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
   display: block;
@@ -909,6 +963,7 @@
 
 //xxx remove me
 .tobago-selectOneListbox {
+  @include markupFatalErrWarnInfo();
 }
 
 //xxx remove me
@@ -955,6 +1010,10 @@
 .tobago-selectManyListbox-option {
 }
 
+.tobago-selectManyListbox {
+  @include markupFatalErrWarnInfo();
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -1442,6 +1501,11 @@
   margin-bottom: $spacer;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree-expanded,
 .tobago-tree-selected,
@@ -1506,107 +1570,9 @@
 
 /* textarea --------------------------------------------------------- */
 tobago-textarea textarea {
+  @include markupFatalErrWarnInfo();
+
   &:disabled {
     color: rgba($input-color, $form-disabled-alpha);
   }
 }
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-
-// todo: check class vs. custom element
-
-.tobago-date,
-.tobago-in,
-.tobago-selectManyListbox,
-  //.tobago-selectOneChoice, XXX
-.tobago-selectOneListbox,
-tobago-textarea textarea {
-  &-markup-fatal, &-markup-error {
-    &.border-danger:focus {
-      box-shadow: 0 0 0 .2rem rgba($danger, .25);
-    }
-  }
-
-  &-markup-warn {
-    &.border-warning:focus {
-      box-shadow: 0 0 0 .2rem rgba($warning, .25);
-    }
-  }
-
-  &-markup-info {
-    &.border-info:focus {
-      box-shadow: 0 0 0 .2rem rgba($info, .25);
-    }
-  }
-}
-
-/* menuStore -------------------------------------------------------- */
-
-.tobago-page-menuStore {
-  @include dropdownMenuFormCheckComponents();
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: $zindex-popover;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
-    width: auto;
-}
-*/
-
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-
-.form-horizontal {
-
-  > * { /* fixes vertical space, todo: why is is needed? is there a better way? */
-    margin-top: 10px;
-    margin-bottom: 5px;
-    /* XXX MUST BE REMOVED */
-  }
-
-  .control-label {
-    margin-top: 10px;
-    margin-bottom: 5px;
-  }
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
-  display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
-  content: "*";
-  color: $danger;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
-  text-align: justify !important;
-}
-
-.tobago-margin-bottom {
-  /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
-  "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
-  custom styling is much more complicated. */
-  margin-bottom: 1rem;
-}
-
-.tobago-dropdown-open, .tobago-dropdown-select {
-  // deprecated; must be added for test
-}