coer-elements 2.0.6 → 2.0.8

package/styles/coer-elements.css

@@ -31,15 +31,20 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   --orange:#fd6031;
   --white: #ffffff;
   --purple:#a615bc;
-  --primary-inner: var(--primary, var(--blue));
+  --primary-inner: var(--primary, var(--orange));
   --secondary-inner: var(--secondary, var(--gray));
   --success-inner: var(--success, var(--green));
   --warning-inner: var(--warning, var(--yellow));
   --danger-inner: var(--danger, var(--red));
-  --background-inner: var(--background, var(--smoke));
-  --sidenav-inner: var(--sidenav, var(--black));
   --navigation-inner: var(--navigation, var(--orange));
-  --container-inner: var(--container, var(--white));
+  --information-inner: var(--information, var(--blue));
+  --breadcrumbs-inner: var(--app-breadcrumbs, var(--blue));
+  --background-inner: var(--app-background, var(--smoke));
+  --containers-inner: var(--app-containers, var(--white));
+  --sidenav-inner: var(--app-sidenav, var(--black));
+  --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
+  --toolbar-inner: var(--app-toolbar, var(--smoke));
+  --toolbar-text-inner: var(--app-toolbar-text, var(--black));
 }
 
 .text-blue {
@@ -47,9 +52,30 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
 }
 
 .text-blue-bold {
+  color: var(--blue) !important;
   font-weight: bold !important;
 }
 
+.border-blue {
+  border-color: var(--blue) !important;
+}
+
+.border-top-blue {
+  border-top-color: var(--blue) !important;
+}
+
+.border-right-blue {
+  border-right-color: var(--blue) !important;
+}
+
+.border-bottom-blue {
+  border-bottom-color: var(--blue) !important;
+}
+
+.border-left-blue {
+  border-left-color: var(--blue) !important;
+}
+
 .background-blue {
   background-color: var(--blue) !important;
 }
@@ -59,10 +85,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--blue) !important;
 }
 
-.border-blue {
-  border-color: var(--blue) !important;
-}
-
 .text-gray {
   color: var(--gray) !important;
 }
@@ -72,6 +94,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-gray {
+  border-color: var(--gray) !important;
+}
+
+.border-top-gray {
+  border-top-color: var(--gray) !important;
+}
+
+.border-right-gray {
+  border-right-color: var(--gray) !important;
+}
+
+.border-bottom-gray {
+  border-bottom-color: var(--gray) !important;
+}
+
+.border-left-gray {
+  border-left-color: var(--gray) !important;
+}
+
 .background-gray {
   background-color: var(--gray) !important;
 }
@@ -81,10 +123,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--gray) !important;
 }
 
-.border-gray {
-  border-color: var(--gray) !important;
-}
-
 .text-green {
   color: var(--green) !important;
 }
@@ -94,6 +132,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-green {
+  border-color: var(--green) !important;
+}
+
+.border-top-green {
+  border-top-color: var(--green) !important;
+}
+
+.border-right-green {
+  border-right-color: var(--green) !important;
+}
+
+.border-bottom-green {
+  border-bottom-color: var(--green) !important;
+}
+
+.border-left-green {
+  border-left-color: var(--green) !important;
+}
+
 .background-green {
   background-color: var(--green) !important;
 }
@@ -103,10 +161,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--green) !important;
 }
 
-.border-green {
-  border-color: var(--green) !important;
-}
-
 .text-yellow {
   color: var(--yellow) !important;
 }
@@ -116,6 +170,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-yellow {
+  border-color: var(--yellow) !important;
+}
+
+.border-top-yellow {
+  border-top-color: var(--yellow) !important;
+}
+
+.border-right-yellow {
+  border-right-color: var(--yellow) !important;
+}
+
+.border-bottom-yellow {
+  border-bottom-color: var(--yellow) !important;
+}
+
+.border-left-yellow {
+  border-left-color: var(--yellow) !important;
+}
+
 .background-yellow {
   background-color: var(--yellow) !important;
 }
@@ -125,10 +199,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--yellow) !important;
 }
 
-.border-yellow {
-  border-color: var(--yellow) !important;
-}
-
 .text-red {
   color: var(--red) !important;
 }
@@ -138,6 +208,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-red {
+  border-color: var(--red) !important;
+}
+
+.border-top-red {
+  border-top-color: var(--red) !important;
+}
+
+.border-right-red {
+  border-right-color: var(--red) !important;
+}
+
+.border-bottom-red {
+  border-bottom-color: var(--red) !important;
+}
+
+.border-left-red {
+  border-left-color: var(--red) !important;
+}
+
 .background-red {
   background-color: var(--red) !important;
 }
@@ -147,30 +237,42 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--red) !important;
 }
 
-.border-red {
-  border-color: var(--red) !important;
+.text-smoke {
+  color: var(--smoke) !important;
 }
 
-.text-white {
-  color: var(--white) !important;
+.text-smoke-bold {
+  color: var(--smoke) !important;
+  font-weight: bold !important;
 }
 
-.text-white-bold {
-  color: var(--white) !important;
-  font-weight: bold !important;
+.border-smoke {
+  border-color: var(--smoke) !important;
 }
 
-.background-white {
-  background-color: var(--white) !important;
+.border-top-smoke {
+  border-top-color: var(--smoke) !important;
 }
 
-.background-border-white {
-  background-color: var(--white) !important;
-  border-color: var(--white) !important;
+.border-right-smoke {
+  border-right-color: var(--smoke) !important;
 }
 
-.border-white {
-  border-color: var(--white) !important;
+.border-bottom-smoke {
+  border-bottom-color: var(--smoke) !important;
+}
+
+.border-left-smoke {
+  border-left-color: var(--smoke) !important;
+}
+
+.background-smoke {
+  background-color: var(--smoke) !important;
+}
+
+.background-border-smoke {
+  background-color: var(--smoke) !important;
+  border-color: var(--smoke) !important;
 }
 
 .text-black {
@@ -182,6 +284,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-black {
+  border-color: var(--black) !important;
+}
+
+.border-top-black {
+  border-top-color: var(--black) !important;
+}
+
+.border-right-black {
+  border-right-color: var(--black) !important;
+}
+
+.border-bottom-black {
+  border-bottom-color: var(--black) !important;
+}
+
+.border-left-black {
+  border-left-color: var(--black) !important;
+}
+
 .background-black {
   background-color: var(--black) !important;
 }
@@ -191,10 +313,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--black) !important;
 }
 
-.border-black {
-  border-color: var(--black) !important;
-}
-
 .text-orange {
   color: var(--orange) !important;
 }
@@ -204,6 +322,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-orange {
+  border-color: var(--orange) !important;
+}
+
+.border-top-orange {
+  border-top-color: var(--orange) !important;
+}
+
+.border-right-orange {
+  border-right-color: var(--orange) !important;
+}
+
+.border-bottom-orange {
+  border-bottom-color: var(--orange) !important;
+}
+
+.border-left-orange {
+  border-left-color: var(--orange) !important;
+}
+
 .background-orange {
   background-color: var(--orange) !important;
 }
@@ -213,8 +351,80 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--orange) !important;
 }
 
-.border-orange {
-  border-color: var(--orange) !important;
+.text-white {
+  color: var(--white) !important;
+}
+
+.text-white-bold {
+  color: var(--white) !important;
+  font-weight: bold !important;
+}
+
+.border-white {
+  border-color: var(--white) !important;
+}
+
+.border-top-white {
+  border-top-color: var(--white) !important;
+}
+
+.border-right-white {
+  border-right-color: var(--white) !important;
+}
+
+.border-bottom-white {
+  border-bottom-color: var(--white) !important;
+}
+
+.border-left-white {
+  border-left-color: var(--white) !important;
+}
+
+.background-white {
+  background-color: var(--white) !important;
+}
+
+.background-border-white {
+  background-color: var(--white) !important;
+  border-color: var(--white) !important;
+}
+
+.text-purple {
+  color: var(--purple) !important;
+}
+
+.text-purple-bold {
+  color: var(--purple) !important;
+  font-weight: bold !important;
+}
+
+.border-purple {
+  border-color: var(--purple) !important;
+}
+
+.border-top-purple {
+  border-top-color: var(--purple) !important;
+}
+
+.border-right-purple {
+  border-right-color: var(--purple) !important;
+}
+
+.border-bottom-purple {
+  border-bottom-color: var(--purple) !important;
+}
+
+.border-left-purple {
+  border-left-color: var(--purple) !important;
+}
+
+.background-purple {
+  background-color: var(--purple) !important;
+}
+
+.background-border-purple {
+  background-color: var(--purple) !important;
+  border-color: var(--purple) !important;
 }
 
 .text-primary {
@@ -226,6 +436,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-primary {
+  border-color: var(--primary-inner) !important;
+}
+
+.border-top-primary {
+  border-top-color: var(--primary-inner) !important;
+}
+
+.border-right-primary {
+  border-right-color: var(--primary-inner) !important;
+}
+
+.border-bottom-primary {
+  border-bottom-color: var(--primary-inner) !important;
+}
+
+.border-left-primary {
+  border-left-color: var(--primary-inner) !important;
+}
+
 .background-primary {
   background-color: var(--primary-inner) !important;
 }
@@ -235,10 +465,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--primary-inner) !important;
 }
 
-.border-primary {
-  border-color: var(--primary-inner) !important;
-}
-
 .text-secondary {
   color: var(--secondary-inner) !important;
 }
@@ -248,6 +474,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-secondary {
+  border-color: var(--secondary-inner) !important;
+}
+
+.border-top-secondary {
+  border-top-color: var(--secondary-inner) !important;
+}
+
+.border-right-secondary {
+  border-right-color: var(--secondary-inner) !important;
+}
+
+.border-bottom-secondary {
+  border-bottom-color: var(--secondary-inner) !important;
+}
+
+.border-left-secondary {
+  border-left-color: var(--secondary-inner) !important;
+}
+
 .background-secondary {
   background-color: var(--secondary-inner) !important;
 }
@@ -257,166 +503,489 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--secondary-inner) !important;
 }
 
-.border-secondary {
-  border-color: var(--secondary-inner) !important;
+.text-success {
+  color: var(--success-inner) !important;
+}
+
+.text-success-bold {
+  color: var(--success-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-success {
+  border-color: var(--success-inner) !important;
+}
+
+.border-top-success {
+  border-top-color: var(--success-inner) !important;
+}
+
+.border-right-success {
+  border-right-color: var(--success-inner) !important;
+}
+
+.border-bottom-success {
+  border-bottom-color: var(--success-inner) !important;
+}
+
+.border-left-success {
+  border-left-color: var(--success-inner) !important;
+}
+
+.background-success {
+  background-color: var(--success-inner) !important;
+}
+
+.background-border-success {
+  background-color: var(--success-inner) !important;
+  border-color: var(--success-inner) !important;
+}
+
+.text-warning {
+  color: var(--warning-inner) !important;
+}
+
+.text-warning-bold {
+  color: var(--warning-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-warning {
+  border-color: var(--warning-inner) !important;
+}
+
+.border-top-warning {
+  border-top-color: var(--warning-inner) !important;
+}
+
+.border-right-warning {
+  border-right-color: var(--warning-inner) !important;
+}
+
+.border-bottom-warning {
+  border-bottom-color: var(--warning-inner) !important;
+}
+
+.border-left-warning {
+  border-left-color: var(--warning-inner) !important;
+}
+
+.background-warning {
+  background-color: var(--warning-inner) !important;
+}
+
+.background-border-warning {
+  background-color: var(--warning-inner) !important;
+  border-color: var(--warning-inner) !important;
+}
+
+.text-danger {
+  color: var(--danger-inner) !important;
+}
+
+.text-danger-bold {
+  color: var(--danger-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-danger {
+  border-color: var(--danger-inner) !important;
+}
+
+.border-top-danger {
+  border-top-color: var(--danger-inner) !important;
+}
+
+.border-right-danger {
+  border-right-color: var(--danger-inner) !important;
+}
+
+.border-bottom-danger {
+  border-bottom-color: var(--danger-inner) !important;
+}
+
+.border-left-danger {
+  border-left-color: var(--danger-inner) !important;
+}
+
+.background-danger {
+  background-color: var(--danger-inner) !important;
+}
+
+.background-border-danger {
+  background-color: var(--danger-inner) !important;
+  border-color: var(--danger-inner) !important;
+}
+
+.text-navigation {
+  color: var(--navigation-inner) !important;
+}
+
+.text-navigation-bold {
+  color: var(--navigation-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-navigation {
+  border-color: var(--navigation-inner) !important;
+}
+
+.border-top-navigation {
+  border-top-color: var(--navigation-inner) !important;
+}
+
+.border-right-navigation {
+  border-right-color: var(--navigation-inner) !important;
+}
+
+.border-bottom-navigation {
+  border-bottom-color: var(--navigation-inner) !important;
+}
+
+.border-left-navigation {
+  border-left-color: var(--navigation-inner) !important;
+}
+
+.background-navigation {
+  background-color: var(--navigation-inner) !important;
+}
+
+.background-border-navigation {
+  background-color: var(--navigation-inner) !important;
+  border-color: var(--navigation-inner) !important;
+}
+
+.text-information {
+  color: var(--information-inner) !important;
+}
+
+.text-information-bold {
+  color: var(--information-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-information {
+  border-color: var(--information-inner) !important;
+}
+
+.border-top-information {
+  border-top-color: var(--information-inner) !important;
+}
+
+.border-right-information {
+  border-right-color: var(--information-inner) !important;
+}
+
+.border-bottom-information {
+  border-bottom-color: var(--information-inner) !important;
+}
+
+.border-left-information {
+  border-left-color: var(--information-inner) !important;
+}
+
+.background-information {
+  background-color: var(--information-inner) !important;
+}
+
+.background-border-information {
+  background-color: var(--information-inner) !important;
+  border-color: var(--information-inner) !important;
+}
+
+.text-breadcrumbs {
+  color: var(--breadcrumbs-inner) !important;
+}
+
+.text-breadcrumbs-bold {
+  color: var(--breadcrumbs-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-breadcrumbs {
+  border-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-top-breadcrumbs {
+  border-top-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-right-breadcrumbs {
+  border-right-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-bottom-breadcrumbs {
+  border-bottom-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-left-breadcrumbs {
+  border-left-color: var(--breadcrumbs-inner) !important;
+}
+
+.background-breadcrumbs {
+  background-color: var(--breadcrumbs-inner) !important;
+}
+
+.background-border-breadcrumbs {
+  background-color: var(--breadcrumbs-inner) !important;
+  border-color: var(--breadcrumbs-inner) !important;
+}
+
+.text-app-background {
+  color: var(--background-inner) !important;
+}
+
+.text-app-background-bold {
+  color: var(--background-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-app-background {
+  border-color: var(--background-inner) !important;
+}
+
+.border-top-app-background {
+  border-top-color: var(--background-inner) !important;
+}
+
+.border-right-app-background {
+  border-right-color: var(--background-inner) !important;
+}
+
+.border-bottom-app-background {
+  border-bottom-color: var(--background-inner) !important;
+}
+
+.border-left-app-background {
+  border-left-color: var(--background-inner) !important;
+}
+
+.background-app-background {
+  background-color: var(--background-inner) !important;
+}
+
+.background-border-app-background {
+  background-color: var(--background-inner) !important;
+  border-color: var(--background-inner) !important;
+}
+
+.text-app-container {
+  color: var(--containers-inner) !important;
+}
+
+.text-app-container-bold {
+  color: var(--containers-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-app-container {
+  border-color: var(--containers-inner) !important;
+}
+
+.border-top-app-container {
+  border-top-color: var(--containers-inner) !important;
+}
+
+.border-right-app-container {
+  border-right-color: var(--containers-inner) !important;
+}
+
+.border-bottom-app-container {
+  border-bottom-color: var(--containers-inner) !important;
+}
+
+.border-left-app-container {
+  border-left-color: var(--containers-inner) !important;
+}
+
+.background-app-container {
+  background-color: var(--containers-inner) !important;
+}
+
+.background-border-app-container {
+  background-color: var(--containers-inner) !important;
+  border-color: var(--containers-inner) !important;
+}
+
+.text-app-sidenav {
+  color: var(--sidenav-inner) !important;
+}
+
+.text-app-sidenav-bold {
+  color: var(--sidenav-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-app-sidenav {
+  border-color: var(--sidenav-inner) !important;
+}
+
+.border-top-app-sidenav {
+  border-top-color: var(--sidenav-inner) !important;
+}
+
+.border-right-app-sidenav {
+  border-right-color: var(--sidenav-inner) !important;
+}
+
+.border-bottom-app-sidenav {
+  border-bottom-color: var(--sidenav-inner) !important;
+}
+
+.border-left-app-sidenav {
+  border-left-color: var(--sidenav-inner) !important;
+}
+
+.background-app-sidenav {
+  background-color: var(--sidenav-inner) !important;
 }
 
-.text-success {
-  color: var(--success-inner) !important;
+.background-border-app-sidenav {
+  background-color: var(--sidenav-inner) !important;
+  border-color: var(--sidenav-inner) !important;
 }
 
-.text-success-bold {
-  color: var(--success-inner) !important;
-  font-weight: bold !important;
+.text-app-sidenav-text {
+  color: var(--sidenav-text-inner) !important;
 }
 
-.background-success {
-  background-color: var(--success-inner) !important;
+.text-app-sidenav-text-bold {
+  color: var(--sidenav-text-inner) !important;
+  font-weight: bold !important;
 }
 
-.background-border-success {
-  background-color: var(--success-inner) !important;
-  border-color: var(--success-inner) !important;
+.border-app-sidenav-text {
+  border-color: var(--sidenav-text-inner) !important;
 }
 
-.border-success {
-  border-color: var(--success-inner) !important;
+.border-top-app-sidenav-text {
+  border-top-color: var(--sidenav-text-inner) !important;
 }
 
-.text-warning {
-  color: var(--warning-inner) !important;
+.border-right-app-sidenav-text {
+  border-right-color: var(--sidenav-text-inner) !important;
 }
 
-.text-warning-bold {
-  color: var(--warning-inner) !important;
-  font-weight: bold !important;
+.border-bottom-app-sidenav-text {
+  border-bottom-color: var(--sidenav-text-inner) !important;
 }
 
-.background-warning {
-  background-color: var(--warning-inner) !important;
+.border-left-app-sidenav-text {
+  border-left-color: var(--sidenav-text-inner) !important;
 }
 
-.background-border-warning {
-  background-color: var(--warning-inner) !important;
-  border-color: var(--warning-inner) !important;
+.background-app-sidenav-text {
+  background-color: var(--sidenav-text-inner) !important;
 }
 
-.border-warning {
-  border-color: var(--warning-inner) !important;
+.background-border-app-sidenav-text {
+  background-color: var(--sidenav-text-inner) !important;
+  border-color: var(--sidenav-text-inner) !important;
 }
 
-.text-danger {
-  color: var(--danger-inner) !important;
+.text-app-toolbar {
+  color: var(--toolbar-inner) !important;
 }
 
-.text-danger-bold {
-  color: var(--danger-inner) !important;
+.text-app-toolbar-bold {
+  color: var(--toolbar-inner) !important;
   font-weight: bold !important;
 }
 
-.background-danger {
-  background-color: var(--danger-inner) !important;
-}
-
-.background-border-danger {
-  background-color: var(--danger-inner) !important;
-  border-color: var(--danger-inner) !important;
+.border-app-toolbar {
+  border-color: var(--toolbar-inner) !important;
 }
 
-.border-danger {
-  border-color: var(--danger-inner) !important;
+.border-top-app-toolbar {
+  border-top-color: var(--toolbar-inner) !important;
 }
 
-.text-background {
-  color: var(--background-inner) !important;
+.border-right-app-toolbar {
+  border-right-color: var(--toolbar-inner) !important;
 }
 
-.text-background-bold {
-  color: var(--background-inner) !important;
-  font-weight: bold !important;
+.border-bottom-app-toolbar {
+  border-bottom-color: var(--toolbar-inner) !important;
 }
 
-.background-background {
-  background-color: var(--background-inner) !important;
+.border-left-app-toolbar {
+  border-left-color: var(--toolbar-inner) !important;
 }
 
-.background-border-background {
-  background-color: var(--background-inner) !important;
-  border-color: var(--background-inner) !important;
+.background-app-toolbar {
+  background-color: var(--toolbar-inner) !important;
 }
 
-.border-background {
-  border-color: var(--background-inner) !important;
+.background-border-app-toolbar {
+  background-color: var(--toolbar-inner) !important;
+  border-color: var(--toolbar-inner) !important;
 }
 
-.text-sidenav {
-  color: var(--sidenav-inner) !important;
+.text-app-toolbar-text {
+  color: var(--toolbar-text-inner) !important;
 }
 
-.text-blue-sidenav {
-  color: var(--sidenav-inner) !important;
+.text-app-toolbar-text-bold {
+  color: var(--toolbar-text-inner) !important;
   font-weight: bold !important;
 }
 
-.background-sidenav {
-  background-color: var(--sidenav-inner) !important;
+.border-app-toolbar-text {
+  border-color: var(--toolbar-text-inner) !important;
 }
 
-.background-border-sidenav {
-  background-color: var(--sidenav-inner) !important;
-  border-color: var(--sidenav-inner) !important;
+.border-top-app-toolbar-text {
+  border-top-color: var(--toolbar-text-inner) !important;
 }
 
-.border-sidenav {
-  border-color: var(--sidenav-inner) !important;
+.border-right-app-toolbar-text {
+  border-right-color: var(--toolbar-text-inner) !important;
 }
 
-.text-navigation {
-  color: var(--navigation-inner) !important;
+.border-bottom-app-toolbar-text {
+  border-bottom-color: var(--toolbar-text-inner) !important;
 }
 
-.text-navigation-bold {
-  color: var(--navigation-inner) !important;
-  font-weight: bold !important;
+.border-left-app-toolbar-text {
+  border-left-color: var(--toolbar-text-inner) !important;
 }
 
-.background-navigation {
-  background-color: var(--navigation-inner) !important;
+.background-app-toolbar-text {
+  background-color: var(--toolbar-text-inner) !important;
 }
 
-.background-border-navigation {
-  background-color: var(--navigation-inner) !important;
-  border-color: var(--navigation-inner) !important;
+.background-border-app-toolbar-text {
+  background-color: var(--toolbar-text-inner) !important;
+  border-color: var(--toolbar-text-inner) !important;
 }
 
-.border-navigation {
-  border-color: var(--navigation-inner) !important;
+.text-transparent {
+  color: transparent !important;
 }
 
-.text-container {
-  color: var(--container-inner) !important;
+.text-transparent-bold {
+  color: transparent !important;
+  font-weight: bold !important;
 }
 
-.text-container-bold {
-  color: var(--container-inner) !important;
-  font-weight: bold !important;
+.border-transparent {
+  border-color: transparent !important;
 }
 
-.background-container {
-  background-color: var(--container-inner) !important;
+.border-top-transparent {
+  border-top-color: transparent !important;
 }
 
-.background-border-container {
-  background-color: var(--container-inner) !important;
-  border-color: var(--container-inner) !important;
+.border-right-transparent {
+  border-right-color: transparent !important;
 }
 
-.border-container {
-  border-color: var(--container-inner) !important;
+.border-bottom-transparent {
+  border-bottom-color: transparent !important;
 }
 
-.text-transparent {
-  color: transparent !important;
+.border-left-transparent {
+  border-left-color: transparent !important;
 }
 
 .background-transparent {
@@ -428,10 +997,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: transparent !important;
 }
 
-.border-transparent {
-  border-color: transparent !important;
-}
-
 coer-button {
   display: contents !important;
 }
@@ -442,6 +1007,7 @@ div.coer-button {
 div.coer-button a {
   display: inline-block !important;
   height: fit-content !important;
+  text-decoration: none !important;
 }
 div.coer-button a.animate__disabled {
   animation-duration: 0s !important;
@@ -451,6 +1017,9 @@ div.coer-button button {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 div.coer-button .slot {
   width: 100px !important;
@@ -461,67 +1030,108 @@ div.coer-button .slot {
 }
 div.coer-button button.primary-filled {
   background-color: var(--primary-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.secondary-filled {
-  background-color: var(--secondary-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.success-filled {
-  background-color: var(--success-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.warning-filled {
-  background-color: var(--warning-inner) !important;
-  color: var(--black) !important;
-}
-div.coer-button button.danger-filled {
-  background-color: var(--danger-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.navigation-filled {
-  background-color: var(--navigation-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.dark-filled {
-  background-color: var(--black) !important;
-  color: var(--smoke) !important;
+  color: var(--white) !important;
 }
 div.coer-button button.primary-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--primary-inner) !important;
   color: var(--primary-inner) !important;
 }
+div.coer-button button.primary-filled:not(.readonly):focus,
+div.coer-button button.primary-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--primary-inner) !important;
+}
+div.coer-button button.secondary-filled {
+  background-color: var(--secondary-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.secondary-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--secondary-inner) !important;
   color: var(--secondary-inner) !important;
 }
+div.coer-button button.secondary-filled:not(.readonly):focus,
+div.coer-button button.secondary-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--secondary-inner) !important;
+}
+div.coer-button button.success-filled {
+  background-color: var(--success-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.success-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--success-inner) !important;
   color: var(--success-inner) !important;
 }
+div.coer-button button.success-filled:not(.readonly):focus,
+div.coer-button button.success-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--success-inner) !important;
+}
+div.coer-button button.warning-filled {
+  background-color: var(--warning-inner) !important;
+  color: var(--black) !important;
+}
 div.coer-button button.warning-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--warning-inner) !important;
   color: var(--warning-inner) !important;
 }
+div.coer-button button.warning-filled:not(.readonly):focus,
+div.coer-button button.warning-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--warning-inner) !important;
+}
+div.coer-button button.danger-filled {
+  background-color: var(--danger-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.danger-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--danger-inner) !important;
   color: var(--danger-inner) !important;
 }
+div.coer-button button.danger-filled:not(.readonly):focus,
+div.coer-button button.danger-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--danger-inner) !important;
+}
+div.coer-button button.navigation-filled {
+  background-color: var(--navigation-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.navigation-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--navigation-inner) !important;
   color: var(--navigation-inner) !important;
 }
+div.coer-button button.navigation-filled:not(.readonly):focus,
+div.coer-button button.navigation-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--navigation-inner) !important;
+}
+div.coer-button button.information-filled {
+  background-color: var(--information-inner) !important;
+  color: var(--white) !important;
+}
+div.coer-button button.information-outline {
+  background-color: var(--white) !important;
+  border: 1px solid var(--information-inner) !important;
+  color: var(--information-inner) !important;
+}
+div.coer-button button.information-filled:not(.readonly):focus,
+div.coer-button button.information-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--information-inner) !important;
+}
+div.coer-button button.dark-filled {
+  background-color: var(--black) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.dark-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
 }
+div.coer-button button.dark-filled:not(.readonly):focus,
+div.coer-button button.dark-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--black) !important;
+}
 div.coer-button button.primary-filled:not(.readonly):hover, div.coer-button button.primary-filled:not(.readonly):focus,
 div.coer-button button.primary-outline:not(.readonly):hover, div.coer-button button.primary-outline:not(.readonly):focus,
 div.coer-button button.secondary-filled:not(.readonly):hover, div.coer-button button.secondary-filled:not(.readonly):focus,
@@ -538,34 +1148,6 @@ div.coer-button button.dark-filled:not(.readonly):hover, div.coer-button button.
 div.coer-button button.dark-outline:not(.readonly):hover, div.coer-button button.dark-outline:not(.readonly):focus {
   filter: brightness(1.1) !important;
 }
-div.coer-button button.primary-filled:not(.readonly):focus,
-div.coer-button button.primary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--primary-inner) !important;
-}
-div.coer-button button.secondary-filled:not(.readonly):focus,
-div.coer-button button.secondary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--secondary-inner) !important;
-}
-div.coer-button button.success-filled:not(.readonly):focus,
-div.coer-button button.success-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--success-inner) !important;
-}
-div.coer-button button.warning-filled:not(.readonly):focus,
-div.coer-button button.warning-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--warning-inner) !important;
-}
-div.coer-button button.danger-filled:not(.readonly):focus,
-div.coer-button button.danger-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--danger-inner) !important;
-}
-div.coer-button button.navigation-filled:not(.readonly):focus,
-div.coer-button button.navigation-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--navigation-inner) !important;
-}
-div.coer-button button.dark-filled:not(.readonly):focus,
-div.coer-button button.dark-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--black) !important;
-}
 div.coer-button button.mdc-icon-button.mat-mdc-icon-button {
   width: 40px !important;
   height: 40px !important;
@@ -602,7 +1184,9 @@ div.coer-button a.loading {
   cursor: wait !important;
 }
 div.coer-button i {
-  vertical-align: middle !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 div.coer-button i.spinner-border {
   width: 15px !important;
@@ -1237,7 +1821,7 @@ header.coer-page-title nav {
   height: auto;
   min-height: 25px;
   font-size: small;
-  background-color: rgb(239.05, 239.05, 239.05) !important;
+  background-color: color-mix(in srgb, var(--gray), white 90%) !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1249,7 +1833,7 @@ header.coer-page-title ol, header.coer-page-title a {
   margin: 0px;
   padding-left: 5px;
   text-decoration: none;
-  color: var(--primary-inner) !important;
+  color: var(--breadcrumbs-inner) !important;
   font-weight: normal !important;
   cursor: pointer !important;
 }
@@ -1518,10 +2102,10 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container {
   justify-content: center !important;
   font-size: 16px !important;
   border-bottom: 1px solid rgba(245, 245, 245, 0.041) !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
   color: var(--navigation-inner) !important;
@@ -1548,7 +2132,7 @@ mat-nav-list.coer-menu-option mat-list-item {
   padding: 0px 35px 0px 10px !important;
   display: inline-flex !important;
   height: 48px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   display: inline-flex !important;
@@ -1557,7 +2141,7 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   height: 48px !important;
   min-width: 20px !important;
   max-width: 20px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container i {
   min-height: 16px !important;
@@ -1567,14 +2151,14 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container {
   display: inline-flex !important;
   height: auto !important;
   margin-left: 10px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
 mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
   color: var(--navigation-inner) !important;
 }
 mat-nav-list.coer-menu-option mat-list-item:hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 
 mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
@@ -1630,7 +2214,102 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
   color: var(--navigation-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
+}
+
+div#coer-tool-bar {
+  z-index: 1;
+}
+div#coer-tool-bar mat-toolbar {
+  height: 45px !important;
+  position: relative !important;
+  z-index: 10 !important;
+  padding: 0px !important;
+  background-color: var(--toolbar-inner) !important;
+  color: var(--toolbar-text-inner) !important;
+}
+div#coer-tool-bar mat-toolbar span.app-name {
+  height: 40px !important;
+  display: contents !important;
+  max-width: 45%;
+}
+div#coer-tool-bar mat-toolbar div.logo-image-container {
+  height: 45px !important;
+  min-width: 100px;
+}
+div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image {
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position-y: bottom;
+  width: 100% !important;
+  height: 100% !important;
+  cursor: pointer !important;
+}
+div#coer-tool-bar mat-toolbar div.button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+}
+div#coer-tool-bar mat-toolbar div.user-container {
+  max-width: 45%;
+  display: flex;
+  align-items: center;
+  font-size: small !important;
+  font-weight: bold;
+  height: 0px !important;
+  max-height: 0px !important;
+  padding-left: 2px !important;
+  margin-right: 10px !important;
+  border-radius: 8px !important;
+  cursor: pointer !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-image {
+  min-width: 35px !important;
+  max-width: 35px !important;
+  min-height: 35px !important;
+  max-height: 35px !important;
+  border-radius: 25px;
+  background: transparent;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity {
+  height: 40px !important;
+  max-height: 40px !important;
+  min-width: 70px !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-flow: column !important;
+  justify-content: center !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity p {
+  line-height: normal !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection {
+  background-color: transparent !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container coer-dropdown {
+  position: absolute;
+  transform: translate(-3px, 0px);
+}
+div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul {
+  right: 0px !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container:hover {
+  transform: scale(1.03);
+  box-shadow: 0px 0px 15px -5px black !important;
+}
+div#coer-tool-bar div.shadow {
+  box-shadow: 1px -10px 20px black !important;
+  width: 100vw;
+  height: 45px;
+  position: absolute;
+  top: 0;
+  z-index: 8;
 }
 
 div.coer-switch {
@@ -1951,19 +2630,19 @@ aside.toast-container button {
 }
 aside.toast-container div#alert-success div.toast-header,
 aside.toast-container div#alert-success div.toast-body {
-  background-color: var(--success-inner);
+  background-color: var(--success);
 }
 aside.toast-container div#alert-info div.toast-header,
 aside.toast-container div#alert-info div.toast-body {
-  background-color: var(--primary-inner);
+  background-color: var(--information);
 }
 aside.toast-container div#alert-error div.toast-header,
 aside.toast-container div#alert-error div.toast-body {
-  background-color: var(--danger-inner);
+  background-color: var(--danger);
 }
 aside.toast-container div#alert-warning div.toast-header,
 aside.toast-container div#alert-warning div.toast-body {
-  background-color: var(--warning-inner);
+  background-color: var(--warning);
   border-color: var(--black);
   color: var(--black);
 }
@@ -2017,7 +2696,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2029,7 +2708,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2042,7 +2721,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2058,7 +2737,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2071,7 +2750,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2244,21 +2923,3 @@ input[type=file] {
 .no-selection::selection {
   background-color: transparent !important;
 }
-
-div#coer-tool-bar coer-button * {
-  color: var(--orange) !important;
-}
-div#coer-tool-bar coer-dropdown coer-button * {
-  color: transparent !important;
-}
-div#coer-tool-bar coer-dropdown ul {
-  right: 0px !important;
-  width: auto !important;
-  top: 2px !important;
-  border-top: 0px !important;
-  background-color: whitesmoke !important;
-}
-div#coer-tool-bar coer-dropdown ul li:not(.no-options):hover {
-  color: black !important;
-  background-color: rgb(240.618852459, 246.3831967213, 254.881147541) !important;
-}