CE-740 Style on page header; dark.main color; sticky app header bar margin & width

src/qqq/assets/theme/base/colors.ts

@@ -216,7 +216,7 @@ const colors: Types = {
    },
 
    dark: {
-      main: "#344767",
+      main: "#212121",
       focus: "#2c3c58",
    },
 

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
@@ -113,16 +114,16 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
       <Box mr={{xs: 0, xl: 8}}>
          <MuiBreadcrumbs
             sx={{
-               fontSize: pxToRem(18),
+               fontSize: "1.125rem",
                fontWeight: "500",
-               color: "#212121",
+               color: colors.dark.main,
                "& a": {
                   color: "#757575"
                },
                "& .MuiBreadcrumbs-separator": {
-                  fontSize: pxToRem(18),
+                  fontSize: "1.125rem",
                   fontWeight: "500",
-                  color: "#212121"
+                  color: colors.dark.main
                },
             }}
          >
@@ -137,11 +138,14 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
          </MuiBreadcrumbs>
          <MDTypography
             pt={1}
-            fontWeight="bold"
             textTransform="capitalize"
-            variant="h5"
+            variant="h3"
             color={light ? "white" : "dark"}
             noWrap
+            sx={{
+               fontSize: "1.75rem",
+               fontWeight: "600"
+            }}
          >
             {pageHeader}
          </MDTypography>

src/qqq/components/horseshoe/Styles.ts

@@ -74,6 +74,9 @@ function navbar(theme: Theme | any, ownerState: any)
       paddingRight: absolute ? pxToRem(8) : 0,
       paddingLeft: absolute ? pxToRem(16) : 0,
 
+      marginLeft: "-.5rem",
+      width: "calc(100% + .5rem)",
+
       "& > *": {
          transition: transitions.create("all", {
             easing: transitions.easing.easeInOut,