Updates to order screen

wwwroot/styles/sass/dark.theme.sass

@@ -15,3 +15,12 @@
     --posbutton-background-active: #20282D -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)) 0 top
     --void-button-background: red -webkit-gradient(linear, left top, left bottom, color-stop(3%,darkred), color-stop(51%,darkred), color-stop(100%,red)) 0 top
 
+    /** Order Screen **/
+    --orderbox-header-background: #888
+    --orderbox-row-background: var(--pos-header-background)
+    --orderbox-selected-row-background: #dd7f37
+
+    /** Order Box/Payment Splitter Box **/
+    --pulse-first-color: #ffa93e
+    --pulse-second-color: #dd7f37
+    --pulse-final-color: var(--orderbox-row-background)

wwwroot/styles/sass/dredgepos.core.sass

@@ -3,6 +3,15 @@
     src: url("/fonts/OpenSans-Regular.ttf") format('truetype')
     font-style: normal
 
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-SemiBold.ttf") format('truetype')
+    font-weight: bold
+
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-Light.ttf") format('truetype')
+    font-weight: 100
 
 *
     margin: 0
@@ -10,10 +19,19 @@
     box-sizing: border-box
     font-family: 'manrope', sans-serif
     scroll-behavior: smooth
+    cursor: pointer
+    -webkit-touch-callout: none
+    -webkit-user-select: none
+    -khtml-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
 
 .rtl
     direction: rtl
 
+
+
 input[type=text], select, textarea
     padding-left: 1em
     padding-right: 1em
@@ -85,4 +103,20 @@ body
     background: var(--void-button-background)
 
 .invisible
-    visibility: hidden
+    visibility: hidden
+
+.hidden
+    display: none
+
+.pulse
+    animation-name: color
+    animation-duration: 300ms
+    animation-iteration-count: 1
+
+@keyframes color
+    0%
+        background-color: var(--pulse-first-color)
+    50%
+        background-color: var(--pulse-second-color)
+    100%
+        background-color: var(--pulse-final-color)

wwwroot/styles/sass/dredgepos.orderScreen.sass

@@ -26,6 +26,7 @@
     .orderBox
         flex-basis: 75%
         background: var(--global-bgcolor)
+        overflow-y: auto
 
     .orderBoxInfo
         flex-basis: 5%
@@ -90,7 +91,7 @@
         .active
             border-bottom: none
 
-    #pageContainer
+    #pageGroupContainer
         @include flex-column
         @include flex-column-item
         justify-content: flex-end
@@ -100,7 +101,7 @@
         -ms-overflow-style: none
 
         ::-webkit-scrollbar
-             display: none
+            display: none
 
         .pageGroup
             /*display: inline-flex*/
@@ -153,13 +154,20 @@
 
                     .buttonImg
                         padding: 0.6em
-                        flex-basis: 80%
+                        flex-basis: 65%
                         width: 100%
+                        flex-shrink: 0
+                        flex-grow: 0
 
                     .text
                         @include flex
-                        flex-basis: 20%
+                        align-items: flex-start
+                        flex-grow: 0
+                        flex-shrink: 0
+                        flex-basis: 35%
                         width: 100%
+                        overflow: hidden
+                        font-size: 0.9em
 
                 .hasImage.doubleWidth
                     flex-direction: row
@@ -189,11 +197,55 @@
                         flex-basis: 50%
                         height: 100%
 
+
     .pageNavigation
         @include flex
         @include flex-column-item
         display: none
-        flex-basis: 15%
 
         > *
-            @include flex-item
+            @include flex-item
+
+
+.orderBoxTable
+    width: 100%
+    border-collapse: collapse
+
+    tr
+        background: var(--orderbox-row-background)
+
+
+    .selected
+        background: var(--orderbox-selected-row-background)
+
+    thead tr
+        background: var(--orderbox-header-background)
+
+        th
+            font-weight: normal
+            text-align: center
+            padding: 0.2em 0.5em
+
+    tr
+        td, th
+            text-align: center
+            font-size: 0.9em
+
+        td
+            padding: 1em 0.5em
+            font-weight: bold
+
+        .itemCell
+            text-align: center
+            width: 70%
+
+        td.itemCell
+            text-align: left
+
+    tr.instructionRow
+        td.itemCell
+            padding-left: 2em
+            font-weight: 100
+
+        .qtyCell, .totalPriceCell, .printGroupCell
+            font-size: 0