Index: sources/gui/qml/components/StepBullet.qml
===================================================================
diff -u -r725cf5096e9664a0b6b1c4e4e902d1673bd976a9 -rc0c63c4b149dafea2b02e4cd31f223e392ff7818
--- sources/gui/qml/components/StepBullet.qml	(.../StepBullet.qml)	(revision 725cf5096e9664a0b6b1c4e4e902d1673bd976a9)
+++ sources/gui/qml/components/StepBullet.qml	(.../StepBullet.qml)	(revision c0c63c4b149dafea2b02e4cd31f223e392ff7818)
@@ -7,7 +7,7 @@
  *
  * \file    StepBullet.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      01-Jan-2021
+ * \date    (last)      08-MAr-2021
  * \author  (original)  Peter Lucia
  * \date    (original)  03-Aug-2020
  *
@@ -28,42 +28,85 @@
 Item { id: _root
     readonly property color color   : _circle.border.color
 
+    property bool   vertical        : false
     property string text            : ""
     property bool   complete        : false
     property bool   current         : false
     property color  colorComplete   : Colors.borderButton
     property color  colorInComplete : Colors.borderDisableButton
+    property int    fontSizeCurrent : 18
+    property int    fontSizeNormal  : 14
 
     QtObject { id: _private
         readonly property real diameter  : 15
-
+        readonly property string stateNameVertical    : "vertical"    // must not have translation
+        readonly property string stateNameHorizontal  : "horizontal"  // must not have translation
     }
 
     height  : 35
     width   : _private.diameter
 
+    state   : _root.vertical ? _private.stateNameVertical : _private.stateNameHorizontal
+
     Rectangle { id: _circle
         anchors {
             verticalCenter  : parent.verticalCenter
             left            : parent.left
         }
-        height  : _private.diameter
-        width   : _private.diameter
-        radius  : _private.diameter
+        height      : _private.diameter
+        width       : _private.diameter
+        radius      : _private.diameter
         color       : _root.current ? Colors.transparent : _root.complete ? _root.colorComplete : Colors.transparent
         border.color: _root.current ? colorComplete      : _root.complete ? _root.colorComplete : _root.colorInComplete
         border.width: 2
     }
 
     Text { id: _text
-        anchors {
-            top             : _circle.bottom
-            topMargin       : 5
-            horizontalCenter: _circle.horizontalCenter
-        }
+        anchors.top             : _circle.bottom
+        anchors.horizontalCenter: _circle.horizontalCenter
+        anchors.topMargin       : 5
+
         text    : _root.text
         color   : _root.current ? Colors.textMain : _root.complete ? Colors.textMain : _root.colorInComplete
+        font {
+            pixelSize: _root.current ? _root.fontSizeCurrent : _root.fontSizeNormal
+            bold     : _root.current
+            italic   : _root.current
+
+        }
     }
+
+    states: [
+        State { name: _private.stateNameVertical
+            AnchorChanges   { target    : _text
+                anchors.top             : undefined
+                anchors.horizontalCenter: undefined
+
+                anchors.left            : _circle.right
+                anchors.verticalCenter  : _circle.verticalCenter
+            }
+
+            PropertyChanges { target: _text
+                anchors.topMargin       : 0
+                anchors.leftMargin      : 10
+
+            }
+        },
+
+        State { name: _private.stateNameHorizontal
+            AnchorChanges   {
+                anchors.top             : _circle.bottom
+                anchors.horizontalCenter: _circle.horizontalCenter
+
+                anchors.left            : undefined
+                anchors.verticalCenter  : undefined
+            }
+            PropertyChanges { target    : _text
+                anchors.topMargin       : 5
+                anchors.leftMargin      : 0
+            }
+        }
+    ]
 }