@ngx-stoui/core 12.0.3 → 12.0.7

package/ngx-stoui.css

@@ -1,8 +1,9 @@
 @import url("https://eds-static.equinor.com/font/equinor-font.css");
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url("https://fonts.googleapis.com/css?family=Material+Icons");
+@import url("https://fonts.googleapis.com/css?family=Material+Icons+Outlined");
 body:not(.sto-dark-theme) .sto-action-footer {
-  background-color: whitesmoke;
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  background-color: white;
+  border-top: 1px solid gainsboro;
 }
 
 body.sto-dark-theme .sto-action-footer {
@@ -11,7 +12,7 @@ body.sto-dark-theme .sto-action-footer {
 }
 
 body:not(.sto-dark-theme) .sto-header {
-  background-color: white !important;
+  background-color: #FFFFFF !important;
 }
 body:not(.sto-dark-theme) .sto-header--test-environment {
   border: 4px solid #ff9200;
@@ -23,13 +24,13 @@ body:not(.sto-dark-theme) .sto-header button {
   color: #007079;
 }
 body:not(.sto-dark-theme) .sto-header button:focus {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .sto-header button:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-header__actions--small {
-  background: white;
+  background: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-breadcrumb__home {
   color: #007079;
@@ -60,7 +61,7 @@ body:not(.sto-dark-theme) .sto-breadcrumb .separator {
   color: #97cace;
 }
 .sto-dark-theme .sto-header button:focus {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .sto-header button:hover {
   background-color: rgba(255, 255, 255, 0.04);
@@ -194,56 +195,56 @@ body:not(.sto-dark-theme) .sto-breadcrumb .separator {
 
 body:not(.sto-dark-theme) .sto-mdl-table {
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-mdl-table .mat-icon-button {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .sto-mdl-table .mat-icon-button:hover {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__actions {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  background-color: #fafafa;
+  border-bottom: 1px solid gainsboro;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell__resize-handle span {
-  background: rgba(0, 0, 0, 0.12);
+  background: gainsboro;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__header__row__cell:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row--selected {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):hover, body:not(.sto-dark-theme) .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):focus {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .sto-mdl-table__footer__row {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  background: #fafafa;
+  border-bottom: 1px solid gainsboro;
+  border-top: 1px solid gainsboro;
+  background: #FFFFFF;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable {
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body mat-icon, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-header mat-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .progress-linear .container {
   background-color: #d5eaf4;
@@ -252,23 +253,23 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .progress
   background-color: #007079;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row .datatable-body-cell {
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: #3d3d3d;
+  border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):hover .datatable-row-center {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell {
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
-  background-color: rgba(0, 0, 0, 0.12) !important;
+  background-color: #f7f7f7 !important;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row.active {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #f7f7f7;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right, body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
   background-color: transparent;
@@ -282,16 +283,16 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   text-decoration: none;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager a:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages {
   margin: 0 2px;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
-  background: rgba(0, 0, 0, 0.12);
+  background: #f7f7f7;
 }
 body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
-  color: rgba(0, 0, 0, 0.12);
+  color: gainsboro;
 }
 
 .sto-dark-theme .sto-mdl-table {
@@ -324,7 +325,7 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }
 .sto-dark-theme .sto-mdl-table__body__row--selected {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):hover, .sto-dark-theme .sto-mdl-table__body__row:not(.sto-mdl-table__body__row--selected):focus {
   background-color: rgba(255, 255, 255, 0.04);
@@ -367,10 +368,10 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   border-left: 1px solid rgba(255, 255, 255, 0.12);
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-left, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-right, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:focus:not(.active) .datatable-row-group.datatable-row-center {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  background-color: #212121 !important;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row.active {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: #212121;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-left, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-right, .sto-dark-theme .ngx-datatable.sto-datatable .datatable-body .datatable-body-row:not(.active):not(:hover) .datatable-row-center {
   background-color: transparent;
@@ -390,7 +391,7 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
   margin: 0 2px;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.active {
-  background: rgba(255, 255, 255, 0.12);
+  background: #212121;
 }
 .sto-dark-theme .ngx-datatable.sto-datatable .datatable-footer .datatable-pager .pager li.pages.disabled a {
   color: rgba(255, 255, 255, 0.12);
@@ -466,19 +467,19 @@ body:not(.sto-dark-theme) .ngx-datatable.sto-datatable .datatable-footer .datata
 }
 
 body:not(.sto-dark-theme) .sto-daterange {
-  background-color: whitesmoke;
+  background-color: white;
 }
 body:not(.sto-dark-theme) .sto-daterange .sto-daterange__error--container {
   background-color: #f44336;
 }
 body:not(.sto-dark-theme) .sto-daterange-wrapper input.date-input-element {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-daterange-wrapper .sto-form__field.mat-focused .mat-form-field-suffix .mat-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .sto-date.sto-date__popout {
-  background: whitesmoke;
+  background: white;
 }
 
 .sto-dark-theme .sto-daterange {
@@ -498,45 +499,45 @@ body:not(.sto-dark-theme) .sto-date.sto-date__popout {
 }
 
 body:not(.sto-dark-theme) .sto-drawer__overlay {
-  background: rgba(0, 0, 0, 0.87);
+  background: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer {
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-drawer__footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  background-color: whitesmoke;
-  color: rgba(0, 0, 0, 0.87);
+  border-top: 1px solid gainsboro;
+  background-color: white;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer__content {
-  background-color: #fafafa;
-  color: rgba(0, 0, 0, 0.87);
+  background-color: #FFFFFF;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer__header__infix a, body:not(.sto-dark-theme) .sto-drawer__header__infix mat-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .sto-drawer__header__infix a:hover, body:not(.sto-dark-theme) .sto-drawer__header__infix mat-icon:hover {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .sto-drawer__header__wrapper {
-  background-color: whitesmoke;
-  color: rgba(0, 0, 0, 0.87);
+  background-color: white;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #fafafa;
+  color: #3d3d3d;
+  background-color: #FFFFFF;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .mat-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .sto-navigation__item__text {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation .mat-list-item .sto-navigation__item__text a {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 
 .sto-dark-theme .sto-drawer__overlay {
@@ -581,68 +582,12 @@ body:not(.sto-dark-theme) .sto-drawer .sto-slide-panel .mat-list.sto-navigation
   color: white;
 }
 
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header {
-  background-color: whitesmoke;
-}
 body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] {
-  color: rgba(0, 0, 0, 0.87);
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button, body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button {
-  color: rgba(0, 0, 0, 0.54);
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button:hover, body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button:hover {
-  color: rgba(0, 0, 0, 0.8);
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
-  background-color: transparent;
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: rgba(0, 0, 0, 0.12);
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header:not(.mat-expanded) {
-  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover {
-  background-color: whitesmoke;
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:focus {
-  background-color: whitesmoke;
-}
-body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .separator {
-  background-color: rgba(0, 0, 0, 0.12);
-}
-
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header {
-  background-color: #212121;
+  color: #3d3d3d;
 }
 .sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] {
   color: white;
 }
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button, .sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button {
-  color: white;
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-icon-button:hover, .sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button:hover {
-  color: rgba(255, 255, 255, 0.8);
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
-  background-color: transparent;
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header .mat-button-toggle-standalone.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: rgba(255, 255, 255, 0.12);
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header:not(.mat-expanded) {
-  border-bottom: solid 1px rgba(255, 255, 255, 0.12);
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover {
-  background-color: #212121;
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .mat-expansion-panel-header.mat-expanded:focus {
-  background-color: #212121;
-}
-.sto-dark-theme .sto-filter.mat-expansion-panel .separator {
-  background-color: rgba(255, 255, 255, 0.12);
-}
-
 .mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-filter .mat-expansion-panel-header {
   font-size: 20px;
   line-height: 28px;
@@ -659,10 +604,10 @@ body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .separator {
 }
 
 .mat-form-field.sto-form__field .sto-number-input {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 .mat-form-field.sto-form__field .sto-number-input::placeholder {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 
 .sto-dark-theme .mat-form-field.sto-form__field .sto-number-input {
@@ -673,17 +618,17 @@ body:not(.sto-dark-theme) .sto-filter.mat-expansion-panel .separator {
 }
 
 .mat-form-field.sto-form__field sto-number-unit-input .number-unit-input-spacer {
-  background: rgba(0, 0, 0, 0.12);
+  background: gainsboro;
 }
 .mat-form-field.sto-form__field sto-number-unit-input .number-unit-input-element {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 .mat-form-field.sto-form__field sto-number-unit-input .number-unit-input-element::placeholder {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 
 .mat-option.sto-option--clear {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 
 .sto-dark-theme .mat-form-field.sto-form__field sto-number-unit-input .number-unit-input-spacer {
@@ -703,13 +648,13 @@ body:not(.sto-dark-theme) .sto-form__field .mat-form-field-flex, body:not(.sto-d
   background-color: rgba(102, 135, 184, 0.1);
 }
 body:not(.sto-dark-theme) .sto-form__field .mat-form-field-flex .mat-input, body:not(.sto-dark-theme) .sto-form__field.mat-form-field .mat-form-field-flex .mat-input {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-form__field.sto-form__field--readonly .mat-form-field-flex, body:not(.sto-dark-theme) .sto-form__field.sto-form__field--disabled .mat-form-field-flex, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.sto-form__field--readonly .mat-form-field-flex, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.sto-form__field--disabled .mat-form-field-flex {
   background-color: transparent;
 }
 body:not(.sto-dark-theme) .sto-form__field.sto-form__field--readonly .mat-form-field-flex .mat-select-value, body:not(.sto-dark-theme) .sto-form__field.sto-form__field--disabled .mat-form-field-flex .mat-select-value, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.sto-form__field--readonly .mat-form-field-flex .mat-select-value, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.sto-form__field--disabled .mat-form-field-flex .mat-select-value {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-form__field.sto-form__field--readonly .mat-form-field-flex, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.sto-form__field--readonly .mat-form-field-flex {
   background-color: transparent;
@@ -718,13 +663,13 @@ body:not(.sto-dark-theme) .sto-form__field .mat-form-field-flex:hover + .mat-for
   background-color: rgba(0, 0, 0, 0.12);
 }
 body:not(.sto-dark-theme) .sto-form__field.mat-focused .mat-form-field-infix .mat-form-field-label, body:not(.sto-dark-theme) .sto-form__field.mat-form-field.mat-focused .mat-form-field-infix .mat-form-field-label {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-form__field .mat-form-field-flex:hover .mat-form-field-suffix > .mat-icon, body:not(.sto-dark-theme) .sto-form__field.mat-form-field .mat-form-field-flex:hover .mat-form-field-suffix > .mat-icon {
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(86, 86, 86, 0.8);
 }
 body:not(.sto-dark-theme) .sto-form__field .mat-form-field-suffix > .mat-icon, body:not(.sto-dark-theme) .sto-form__field.mat-form-field .mat-form-field-suffix > .mat-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 
 .sto-dark-theme .sto-form__field .mat-form-field-flex, .sto-dark-theme .sto-form__field.mat-form-field .mat-form-field-flex {
@@ -819,7 +764,7 @@ body:not(.sto-dark-theme) .sto-form__field .mat-form-field-suffix > .mat-icon, b
 }
 
 body:not(.sto-dark-theme) .sto-message-panel {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .sto-message-panel.mat-primary {
   background-color: #007079;
@@ -893,20 +838,20 @@ body:not(.sto-dark-theme) .sto-message-panel.mat-warning .mat-icon {
 }
 
 body:not(.sto-dark-theme) sto-preference-manager .filter-title small {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item:hover:not(.selected) {
-  background-color: rgba(0, 0, 0, 0.04) !important;
+  background-color: #eaeaea !important;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item.selected {
-  background-color: rgba(0, 0, 0, 0.12) !important;
+  background-color: #f7f7f7 !important;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-item .preference-manager-list-item-title small {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-manager-list-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  background: rgba(0, 0, 0, 0.04);
+  border-top: 1px solid gainsboro;
+  background: #eaeaea;
 }
 
 .sto-dark-theme sto-preference-manager .filter-title small {
@@ -916,7 +861,7 @@ body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-ma
   background-color: rgba(255, 255, 255, 0.04) !important;
 }
 .sto-dark-theme .mat-menu-panel.preference-manager-list .preference-manager-list-item.selected {
-  background-color: rgba(255, 255, 255, 0.12) !important;
+  background-color: #212121 !important;
 }
 .sto-dark-theme .mat-menu-panel.preference-manager-list .preference-manager-list-item .preference-manager-list-item-title small {
   color: rgba(255, 255, 255, 0.7);
@@ -927,7 +872,7 @@ body:not(.sto-dark-theme) .mat-menu-panel.preference-manager-list .preference-ma
 }
 
 body:not(.sto-dark-theme) .sto-select-filter {
-  background-color: #fafafa;
+  background-color: #FFFFFF;
 }
 
 .sto-dark-theme .sto-select-filter {
@@ -997,13 +942,13 @@ body:not(.sto-dark-theme) .mat-hint.mat-warning, body:not(.sto-dark-theme) span.
 }
 
 body .sto-wysiwyg__actions {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid gainsboro;
 }
 body .sto-wysiwyg__actions .divider {
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid gainsboro;
 }
 body .sto-wysiwyg__editor {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 2px solid gainsboro;
   background: rgba(102, 135, 184, 0.1);
 }
 body .sto-wysiwyg__editor:focus {
@@ -1031,116 +976,169 @@ body.sto-dark-theme .sto-wysiwyg__editor--readonly {
   border: none;
 }
 
-body:not(.sto-dark-theme) .sto-nav-drawer {
-  background-color: white;
-}
-body:not(.sto-dark-theme) .sto-nav-drawer button:not(.mat-button-disabled) .mat-icon {
-  color: #007079;
-}
-body:not(.sto-dark-theme) .sto-nav-drawer .sto-nav-drawer--expanded__item:not(.disabled) .mat-icon {
-  color: #007079;
-}
-body:not(.sto-dark-theme) .sto-nav-drawer sto-nav-drawer-list-item {
-  border-color: rgba(0, 112, 121, 0.2);
-}
-body:not(.sto-dark-theme) .sto-nav-drawer sto-nav-drawer-list-item a.active span {
-  border-color: #007079;
-}
-body:not(.sto-dark-theme) .sto-nav-drawer sto-nav-drawer-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-body:not(.sto-dark-theme) .sto-nav-drawer .sto-nav-drawer--collapsed__item {
-  border-bottom-color: rgba(0, 0, 0, 0.12);
-}
-body:not(.sto-dark-theme) .sto-nav-drawer a:not(.disabled) {
-  color: rgba(0, 0, 0, 0.87);
-}
-body:not(.sto-dark-theme) .sto-nav-drawer a.active {
-  color: #007079;
-}
-body:not(.sto-dark-theme) .sto-nav-drawer .disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-body:not(.sto-dark-theme) .sto-nav-drawer .disabled a {
-  color: rgba(0, 0, 0, 0.38);
-}
+/*
+@use '~@angular/material' as mat;
+@import "theme";
+@import "typography";
+
+@mixin navigation-drawer-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $colors: mat.get-color-config($theme);
+  $primary-palette: map-get($colors, primary);
+  $selected-bg: map-get($primary-palette, highlight);
+  $color: map_get($variables, color);
+  $secondary: map_get($variables, secondary);
+  $hover: map_get($variables, hover-bg);
+  $disabled: map_get($variables, disabled);
+  $bg-color: map_get($variables, card-bg);
+  $border-color: map_get($variables, border-color);
+  $active-bg: map_get($variables, selected-bg);
+
+  .mat-menu-item.no-hover {
+    color: $secondary;
+  }
+  .mat-menu-item.no-hover:hover:not([disabled]) {
+    background-color: $bg-color;
+  }
 
-.sto-dark-theme .sto-nav-drawer {
-  background-color: #424242;
-}
-.sto-dark-theme .sto-nav-drawer button:not(.mat-button-disabled) .mat-icon {
-  color: #97cace;
-}
-.sto-dark-theme .sto-nav-drawer .sto-nav-drawer--expanded__item:not(.disabled) .mat-icon {
-  color: #97cace;
-}
-.sto-dark-theme .sto-nav-drawer sto-nav-drawer-list-item {
-  border-color: rgba(151, 202, 206, 0.2);
-}
-.sto-dark-theme .sto-nav-drawer sto-nav-drawer-list-item a.active span {
-  border-color: #97cace;
-}
-.sto-dark-theme .sto-nav-drawer sto-nav-drawer-list-item:hover {
-  background-color: rgba(255, 255, 255, 0.04);
-}
-.sto-dark-theme .sto-nav-drawer .sto-nav-drawer--collapsed__item {
-  border-bottom-color: rgba(255, 255, 255, 0.12);
-}
-.sto-dark-theme .sto-nav-drawer a:not(.disabled) {
-  color: white;
+  a.mat-menu-item.active-menu-route {
+    background-color: $selected-bg;
+  }
+  a.mat-menu-item:hover {
+    text-shadow:0 0 1px $color;
+  }
+
+
+  .sto-nav-drawer {
+    background-color: $bg-color;
+
+    a.mat-button {
+      color: $primary;
+
+      &.active {
+        background-color: $active-bg;
+      }
+
+      .mat-icon {
+        color: $primary;
+      }
+    }
+
+    button:not(.mat-button-disabled) .mat-icon {
+      color: $primary;
+    }
+
+    a.sto-nav-drawer--expanded__item {
+      text-decoration: none;
+
+      &:hover {
+        background-color: $hover;
+      }
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+
+    .sto-nav-drawer--expanded__item:not(.disabled) .mat-icon {
+      color: $primary;
+    }
+
+    sto-nav-drawer-list-item {
+      border-color: rgba($primary, 0.2);
+
+      a.active span {
+        border-color: $primary;
+      }
+
+      &:hover {
+        background-color: $hover;
+      }
+    }
+    .sto-nav-drawer--collapsed__item {
+      border-bottom-color: $border-color;
+    }
+    a:not(.disabled) {
+      color: $color;
+    }
+    a.active {
+      color: $primary;
+    }
+    .disabled {
+      color: $disabled;
+      a {
+        color: $disabled;
+      }
+    }
+  }
 }
-.sto-dark-theme .sto-nav-drawer a.active {
-  color: #97cace;
+
+
+// Include theme styles for your custom components.
+body:not(.sto-dark-theme) {
+  @include navigation-drawer-theme($sto-theme, $variables);
 }
-.sto-dark-theme .sto-nav-drawer .disabled {
-  color: rgba(255, 255, 255, 0.5);
+
+.sto-dark-theme {
+  @include navigation-drawer-theme($sto-dark-theme, $dark-variables);
 }
-.sto-dark-theme .sto-nav-drawer .disabled a {
-  color: rgba(255, 255, 255, 0.5);
+
+@mixin navigation-drawer-typography($config) {
+  .sto-nav-drawer {
+    sto-nav-drawer-item {
+      font-size: mat.font-size($config, subheading-1);
+      line-height: mat.line-height($config, subheading-1);
+    }
+  }
+  .sto-nav-drawer-menu + div .mat-menu-item {
+    font-size: mat.font-size($config, subheading-1);
+  }
 }
 
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-nav-drawer sto-nav-drawer-item {
-  font-size: 16px;
-  line-height: 24px;
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) {
+  @include navigation-drawer-typography($sto-typography);
 }
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .sto-nav-drawer-menu + div .mat-menu-item {
-  font-size: 16px;
+
+.mat-typography.sto-sm-typography {
+  @include navigation-drawer-typography($sto-sm-typography);
 }
 
-.mat-typography.sto-sm-typography .sto-nav-drawer sto-nav-drawer-item {
-  font-size: 12px;
-  line-height: 20px;
+.mat-typography.sto-l-typography {
+  @include navigation-drawer-typography($sto-l-typography);
 }
-.mat-typography.sto-sm-typography .sto-nav-drawer-menu + div .mat-menu-item {
-  font-size: 12px;
+*/
+body:not(.sto-dark-theme) .sto-dialog .mat-dialog-container .mat-dialog-content {
+  border-top: solid 1px gainsboro;
+}
+body:not(.sto-dark-theme) .sto-dialog .mat-dialog-container .mat-dialog-content.scroll-lines {
+  border-bottom: solid 1px gainsboro;
 }
 
-.mat-typography.sto-l-typography .sto-nav-drawer sto-nav-drawer-item {
-  font-size: 20px;
-  line-height: 32px;
+body.sto-dark-theme .sto-dialog .mat-dialog-container .mat-dialog-content {
+  border-top: solid 1px rgba(255, 255, 255, 0.12);
 }
-.mat-typography.sto-l-typography .sto-nav-drawer-menu + div .mat-menu-item {
-  font-size: 20px;
+body.sto-dark-theme .sto-dialog .mat-dialog-container .mat-dialog-content.scroll-lines {
+  border-bottom: solid 1px rgba(255, 255, 255, 0.12);
 }
 
 body:not(.sto-dark-theme) .mat-ripple-element {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(61, 61, 61, 0.1);
 }
 body:not(.sto-dark-theme) .mat-option {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-option:hover:not(.mat-option-disabled), body:not(.sto-dark-theme) .mat-option:focus:not(.mat-option-disabled) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-option.mat-active {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
+  background: #eaeaea;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-option.mat-option-disabled {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
   color: #007079;
@@ -1152,16 +1150,16 @@ body:not(.sto-dark-theme) .mat-warn .mat-option.mat-selected:not(.mat-option-dis
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-optgroup-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-optgroup-disabled .mat-optgroup-label {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-pseudo-checkbox {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-pseudo-checkbox::after {
-  color: #fafafa;
+  color: white;
 }
 body:not(.sto-dark-theme) .mat-pseudo-checkbox-disabled {
   color: #b0b0b0;
@@ -1185,8 +1183,8 @@ body:not(.sto-dark-theme) .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox
   background: #b0b0b0;
 }
 body:not(.sto-dark-theme) .mat-app-background, body:not(.sto-dark-theme).mat-app-background {
-  background-color: #fafafa;
-  color: rgba(0, 0, 0, 0.87);
+  background-color: white;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-elevation-z0 {
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
@@ -1269,7 +1267,7 @@ body:not(.sto-dark-theme) .mat-elevation-z24 {
 
 body:not(.sto-dark-theme) .mat-autocomplete-panel {
   background: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-autocomplete-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
@@ -1278,7 +1276,7 @@ body:not(.sto-dark-theme) .mat-autocomplete-panel .mat-option.mat-selected:not(.
   background: white;
 }
 body:not(.sto-dark-theme) .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-badge-content {
   color: white;
@@ -1304,8 +1302,8 @@ body:not(.sto-dark-theme) .mat-badge-hidden .mat-badge-content {
   display: none;
 }
 body:not(.sto-dark-theme) .mat-badge-disabled .mat-badge-content {
-  background: #b9b9b9;
-  color: rgba(0, 0, 0, 0.38);
+  background: #bebebe;
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-badge-content {
   position: absolute;
@@ -1446,7 +1444,7 @@ body:not(.sto-dark-theme) .mat-badge-large.mat-badge-overlap.mat-badge-after .ma
 body:not(.sto-dark-theme) .mat-bottom-sheet-container {
   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
   background: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-button, body:not(.sto-dark-theme) .mat-icon-button, body:not(.sto-dark-theme) .mat-stroked-button {
   color: inherit;
@@ -1462,7 +1460,7 @@ body:not(.sto-dark-theme) .mat-button.mat-warn, body:not(.sto-dark-theme) .mat-i
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-icon-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-icon-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-icon-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-icon-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-stroked-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-stroked-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-stroked-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-stroked-button.mat-button-disabled.mat-button-disabled {
-  color: rgba(0, 0, 0, 0.26);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-button.mat-primary .mat-button-focus-overlay, body:not(.sto-dark-theme) .mat-icon-button.mat-primary .mat-button-focus-overlay, body:not(.sto-dark-theme) .mat-stroked-button.mat-primary .mat-button-focus-overlay {
   background-color: #007079;
@@ -1481,13 +1479,13 @@ body:not(.sto-dark-theme) .mat-button .mat-ripple-element, body:not(.sto-dark-th
   background-color: currentColor;
 }
 body:not(.sto-dark-theme) .mat-button-focus-overlay {
-  background: black;
+  background: #3D3D3D;
 }
 body:not(.sto-dark-theme) .mat-stroked-button:not(.mat-button-disabled) {
-  border-color: rgba(0, 0, 0, 0.12);
+  border-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-flat-button, body:not(.sto-dark-theme) .mat-raised-button, body:not(.sto-dark-theme) .mat-fab, body:not(.sto-dark-theme) .mat-mini-fab {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
   background-color: white;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary, body:not(.sto-dark-theme) .mat-raised-button.mat-primary, body:not(.sto-dark-theme) .mat-fab.mat-primary, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary {
@@ -1500,7 +1498,7 @@ body:not(.sto-dark-theme) .mat-flat-button.mat-warn, body:not(.sto-dark-theme) .
   color: white;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-button-disabled.mat-button-disabled {
-  color: rgba(0, 0, 0, 0.26);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary, body:not(.sto-dark-theme) .mat-raised-button.mat-primary, body:not(.sto-dark-theme) .mat-fab.mat-primary, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary {
   background-color: #007079;
@@ -1512,7 +1510,7 @@ body:not(.sto-dark-theme) .mat-flat-button.mat-warn, body:not(.sto-dark-theme) .
   background-color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-flat-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-raised-button.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-fab.mat-button-disabled.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-accent.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-warn.mat-button-disabled, body:not(.sto-dark-theme) .mat-mini-fab.mat-button-disabled.mat-button-disabled {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-flat-button.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-raised-button.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-fab.mat-primary .mat-ripple-element, body:not(.sto-dark-theme) .mat-mini-fab.mat-primary .mat-ripple-element {
   background-color: rgba(255, 255, 255, 0.1);
@@ -1553,50 +1551,50 @@ body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard {
   box-shadow: none;
 }
 body:not(.sto-dark-theme) .mat-button-toggle {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-button-toggle .mat-button-toggle-focus-overlay {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-appearance-standard {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
   background: white;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
-  background-color: black;
+  background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
-  border-left: solid 1px rgba(0, 0, 0, 0.12);
+  border-left: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) [dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
   border-left: none;
-  border-right: solid 1px rgba(0, 0, 0, 0.12);
+  border-right: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle + .mat-button-toggle {
   border-left: none;
   border-right: none;
-  border-top: solid 1px rgba(0, 0, 0, 0.12);
+  border-top: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-checked {
-  background-color: #e0e0e0;
-  color: rgba(0, 0, 0, 0.54);
+  background-color: #f7f7f7;
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled {
-  color: rgba(0, 0, 0, 0.26);
-  background-color: #eeeeee;
+  color: #bebebe;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
   background: white;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-disabled.mat-button-toggle-checked {
-  background-color: #bdbdbd;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
 body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard {
-  border: solid 1px rgba(0, 0, 0, 0.12);
+  border: solid 1px gainsboro;
 }
 .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
   line-height: 48px;
@@ -1604,7 +1602,7 @@ body:not(.sto-dark-theme) .mat-button-toggle-group-appearance-standard {
 
 body:not(.sto-dark-theme) .mat-card {
   background: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-card:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
@@ -1613,19 +1611,19 @@ body:not(.sto-dark-theme) .mat-card.mat-card-flat:not([class*=mat-elevation-z])
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 }
 body:not(.sto-dark-theme) .mat-card-subtitle {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-checkbox-frame {
-  border-color: rgba(0, 0, 0, 0.54);
+  border-color: #565656;
 }
 body:not(.sto-dark-theme) .mat-checkbox-checkmark {
-  fill: #fafafa;
+  fill: white;
 }
 body:not(.sto-dark-theme) .mat-checkbox-checkmark-path {
-  stroke: #fafafa !important;
+  stroke: white !important;
 }
 body:not(.sto-dark-theme) .mat-checkbox-mixedmark {
-  background-color: #fafafa;
+  background-color: white;
 }
 body:not(.sto-dark-theme) .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, body:not(.sto-dark-theme) .mat-checkbox-checked.mat-primary .mat-checkbox-background {
   background-color: #007079;
@@ -1643,10 +1641,10 @@ body:not(.sto-dark-theme) .mat-checkbox-disabled:not(.mat-checkbox-checked) .mat
   border-color: #b0b0b0;
 }
 body:not(.sto-dark-theme) .mat-checkbox-disabled .mat-checkbox-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-checkbox .mat-ripple-element {
-  background-color: black;
+  background-color: #3D3D3D;
 }
 body:not(.sto-dark-theme) .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,
 body:not(.sto-dark-theme) .mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
@@ -1661,11 +1659,11 @@ body:not(.sto-dark-theme) .mat-checkbox:active:not(.mat-checkbox-disabled).mat-w
   background: #f44336;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip {
-  background-color: #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
+  background-color: #f7f7f7;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip .mat-chip-remove {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
   opacity: 0.4;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {
@@ -1678,7 +1676,7 @@ body:not(.sto-dark-theme) .mat-chip.mat-standard-chip.mat-chip-disabled {
   opacity: 0.4;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip::after {
-  background: black;
+  background: #3D3D3D;
 }
 body:not(.sto-dark-theme) .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
   background-color: #007079;
@@ -1724,50 +1722,50 @@ body:not(.sto-dark-theme) .mat-table-sticky {
 }
 body:not(.sto-dark-theme) mat-row, body:not(.sto-dark-theme) mat-header-row, body:not(.sto-dark-theme) mat-footer-row,
 body:not(.sto-dark-theme) th.mat-header-cell, body:not(.sto-dark-theme) td.mat-cell, body:not(.sto-dark-theme) td.mat-footer-cell {
-  border-bottom-color: rgba(0, 0, 0, 0.12);
+  border-bottom-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-header-cell {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-cell, body:not(.sto-dark-theme) .mat-footer-cell {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-calendar-arrow {
-  border-top-color: rgba(0, 0, 0, 0.54);
+  border-top-color: #565656;
 }
 body:not(.sto-dark-theme) .mat-datepicker-toggle,
 body:not(.sto-dark-theme) .mat-datepicker-content .mat-calendar-next-button,
 body:not(.sto-dark-theme) .mat-datepicker-content .mat-calendar-previous-button {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-calendar-table-header {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-calendar-table-header-divider::after {
-  background: rgba(0, 0, 0, 0.12);
+  background: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-cell-content,
 body:not(.sto-dark-theme) .mat-date-range-input-separator {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
   border-color: transparent;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-form-field-disabled .mat-date-range-input-separator {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-in-preview {
-  color: rgba(0, 0, 0, 0.24);
+  color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  border-color: rgba(0, 0, 0, 0.38);
+  border-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  border-color: rgba(0, 0, 0, 0.18);
+  border-color: rgba(190, 190, 190, 0.8);
 }
 body:not(.sto-dark-theme) .mat-calendar-body-in-range::before {
   background: rgba(0, 112, 121, 0.2);
@@ -1810,7 +1808,7 @@ body:not(.sto-dark-theme) .cdk-program-focused .mat-calendar-body-active > .mat-
 body:not(.sto-dark-theme) .mat-datepicker-content {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
   background-color: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {
   background: rgba(213, 234, 244, 0.2);
@@ -1901,31 +1899,31 @@ body:not(.sto-dark-theme) .mat-datepicker-toggle-active.mat-warn {
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-date-range-input-inner[disabled] {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-dialog-container {
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
   background: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-divider {
-  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-divider-vertical {
-  border-right-color: rgba(0, 0, 0, 0.12);
+  border-right-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel {
   background: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 body:not(.sto-dark-theme) .mat-action-row {
-  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]), body:not(.sto-dark-theme) .mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]), body:not(.sto-dark-theme) .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 @media (hover: none) {
   body:not(.sto-dark-theme) .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
@@ -1933,14 +1931,14 @@ body:not(.sto-dark-theme) .mat-expansion-panel .mat-expansion-panel-header.cdk-k
   }
 }
 body:not(.sto-dark-theme) .mat-expansion-panel-header-title {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel-header-description,
 body:not(.sto-dark-theme) .mat-expansion-indicator::after {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel-header[aria-disabled=true] {
-  color: rgba(0, 0, 0, 0.26);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title,
 body:not(.sto-dark-theme) .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description {
@@ -1954,10 +1952,10 @@ body:not(.sto-dark-theme) .mat-expansion-panel-header[aria-disabled=true] .mat-e
 }
 
 body:not(.sto-dark-theme) .mat-form-field-label {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(86, 86, 86, 0.6);
 }
 body:not(.sto-dark-theme) .mat-hint {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(86, 86, 86, 0.6);
 }
 body:not(.sto-dark-theme) .mat-form-field.mat-focused .mat-form-field-label {
   color: #007079;
@@ -1972,7 +1970,7 @@ body:not(.sto-dark-theme) .mat-focused .mat-form-field-required-marker {
   color: #d5eaf4;
 }
 body:not(.sto-dark-theme) .mat-form-field-ripple {
-  background-color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(220, 220, 220, 0.87);
 }
 body:not(.sto-dark-theme) .mat-form-field.mat-focused .mat-form-field-ripple {
   background-color: #007079;
@@ -2007,47 +2005,47 @@ body:not(.sto-dark-theme) .mat-error {
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-legacy .mat-form-field-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-legacy .mat-hint {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-legacy .mat-form-field-underline {
-  background-color: rgba(0, 0, 0, 0.42);
+  background-color: rgba(220, 220, 220, 0.42);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
+  background-image: linear-gradient(to right, rgba(220, 220, 220, 0.42) 0%, rgba(220, 220, 220, 0.42) 33%, transparent 0%);
   background-size: 4px 100%;
   background-repeat: repeat-x;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-standard .mat-form-field-underline {
-  background-color: rgba(0, 0, 0, 0.42);
+  background-color: rgba(220, 220, 220, 0.42);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
+  background-image: linear-gradient(to right, rgba(220, 220, 220, 0.42) 0%, rgba(220, 220, 220, 0.42) 33%, transparent 0%);
   background-size: 4px 100%;
   background-repeat: repeat-x;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-fill .mat-form-field-flex {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: rgba(61, 61, 61, 0.04);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: rgba(61, 61, 61, 0.02);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-fill .mat-form-field-underline::before {
-  background-color: rgba(0, 0, 0, 0.42);
+  background-color: rgba(220, 220, 220, 0.42);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {
   background-color: transparent;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-outline .mat-form-field-outline {
-  color: rgba(0, 0, 0, 0.12);
+  color: rgba(220, 220, 220, 0.12);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-outline .mat-form-field-outline-thick {
-  color: rgba(0, 0, 0, 0.87);
+  color: rgba(220, 220, 220, 0.87);
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
   color: #007079;
@@ -2062,10 +2060,10 @@ body:not(.sto-dark-theme) .mat-form-field-appearance-outline.mat-form-field-inva
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
-  color: rgba(0, 0, 0, 0.06);
+  color: rgba(220, 220, 220, 0.06);
 }
 body:not(.sto-dark-theme) .mat-icon.mat-primary {
   color: #007079;
@@ -2077,26 +2075,26 @@ body:not(.sto-dark-theme) .mat-icon.mat-warn {
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-form-field-type-mat-native-select .mat-form-field-infix::after {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-input-element:disabled,
 body:not(.sto-dark-theme) .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-input-element {
   caret-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-input-element::placeholder {
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(86, 86, 86, 0.42);
 }
 body:not(.sto-dark-theme) .mat-input-element::-moz-placeholder {
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(86, 86, 86, 0.42);
 }
 body:not(.sto-dark-theme) .mat-input-element::-webkit-input-placeholder {
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(86, 86, 86, 0.42);
 }
 body:not(.sto-dark-theme) .mat-input-element:-ms-input-placeholder {
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(86, 86, 86, 0.42);
 }
 body:not(.sto-dark-theme) .mat-form-field.mat-accent .mat-input-element {
   caret-color: #d5eaf4;
@@ -2109,26 +2107,26 @@ body:not(.sto-dark-theme) .mat-form-field-type-mat-native-select.mat-form-field-
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-list-base .mat-list-item {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-list-base .mat-list-option {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-list-base .mat-subheader {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-list-item-disabled {
-  background-color: #eeeeee;
+  background-color: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-list-option:hover, body:not(.sto-dark-theme) .mat-list-option:focus,
 body:not(.sto-dark-theme) .mat-nav-list .mat-list-item:hover,
 body:not(.sto-dark-theme) .mat-nav-list .mat-list-item:focus,
 body:not(.sto-dark-theme) .mat-action-list .mat-list-item:hover,
 body:not(.sto-dark-theme) .mat-action-list .mat-list-item:focus {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-list-single-selected-option, body:not(.sto-dark-theme) .mat-list-single-selected-option:hover, body:not(.sto-dark-theme) .mat-list-single-selected-option:focus {
-  background: rgba(0, 0, 0, 0.12);
+  background: rgba(234, 234, 234, 0.12);
 }
 body:not(.sto-dark-theme) .mat-menu-panel {
   background: white;
@@ -2138,71 +2136,71 @@ body:not(.sto-dark-theme) .mat-menu-panel:not([class*=mat-elevation-z]) {
 }
 body:not(.sto-dark-theme) .mat-menu-item {
   background: transparent;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-menu-item[disabled], body:not(.sto-dark-theme) .mat-menu-item[disabled]::after,
 body:not(.sto-dark-theme) .mat-menu-item[disabled] .mat-icon-no-color {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-menu-item .mat-icon-no-color,
 body:not(.sto-dark-theme) .mat-menu-item-submenu-trigger::after {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-menu-item:hover:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item.cdk-program-focused:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item.cdk-keyboard-focused:not([disabled]),
 body:not(.sto-dark-theme) .mat-menu-item-highlighted:not([disabled]) {
-  background: rgba(0, 0, 0, 0.04);
+  background: #eaeaea;
 }
 body:not(.sto-dark-theme) .mat-paginator {
   background: white;
 }
 body:not(.sto-dark-theme) .mat-paginator,
 body:not(.sto-dark-theme) .mat-paginator-page-size .mat-select-trigger {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-paginator-decrement,
 body:not(.sto-dark-theme) .mat-paginator-increment {
-  border-top: 2px solid rgba(0, 0, 0, 0.54);
-  border-right: 2px solid rgba(0, 0, 0, 0.54);
+  border-top: 2px solid #565656;
+  border-right: 2px solid #565656;
 }
 body:not(.sto-dark-theme) .mat-paginator-first,
 body:not(.sto-dark-theme) .mat-paginator-last {
-  border-top: 2px solid rgba(0, 0, 0, 0.54);
+  border-top: 2px solid #565656;
 }
 body:not(.sto-dark-theme) .mat-icon-button[disabled] .mat-paginator-decrement,
 body:not(.sto-dark-theme) .mat-icon-button[disabled] .mat-paginator-increment,
 body:not(.sto-dark-theme) .mat-icon-button[disabled] .mat-paginator-first,
 body:not(.sto-dark-theme) .mat-icon-button[disabled] .mat-paginator-last {
-  border-color: rgba(0, 0, 0, 0.38);
+  border-color: #bebebe;
 }
 .mat-paginator-container {
   min-height: 56px;
 }
 
 body:not(.sto-dark-theme) .mat-progress-bar-background {
-  fill: #bcd8da;
+  fill: #bfdbde;
 }
 body:not(.sto-dark-theme) .mat-progress-bar-buffer {
-  background-color: #bcd8da;
+  background-color: #bfdbde;
 }
 body:not(.sto-dark-theme) .mat-progress-bar-fill::after {
   background-color: #007079;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-background {
-  fill: #f1f6f9;
+  fill: #f5fafc;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-buffer {
-  background-color: #f1f6f9;
+  background-color: #f5fafc;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
   background-color: #d5eaf4;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-background {
-  fill: #f9ccc9;
+  fill: #fcd0cd;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-buffer {
-  background-color: #f9ccc9;
+  background-color: #fcd0cd;
 }
 body:not(.sto-dark-theme) .mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
   background-color: #f44336;
@@ -2217,7 +2215,7 @@ body:not(.sto-dark-theme) .mat-progress-spinner.mat-warn circle, body:not(.sto-d
   stroke: #f44336;
 }
 body:not(.sto-dark-theme) .mat-radio-outer-circle {
-  border-color: rgba(0, 0, 0, 0.54);
+  border-color: #565656;
 }
 body:not(.sto-dark-theme) .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
   border-color: #007079;
@@ -2242,29 +2240,29 @@ body:not(.sto-dark-theme) .mat-radio-button.mat-warn .mat-radio-ripple .mat-ripp
 }
 body:not(.sto-dark-theme) .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,
 body:not(.sto-dark-theme) .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
-  border-color: rgba(0, 0, 0, 0.38);
+  border-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,
 body:not(.sto-dark-theme) .mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {
-  background-color: rgba(0, 0, 0, 0.38);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-radio-button.mat-radio-disabled .mat-radio-label-content {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-radio-button .mat-ripple-element {
-  background-color: black;
+  background-color: #3D3D3D;
 }
 body:not(.sto-dark-theme) .mat-select-value {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-select-placeholder {
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(86, 86, 86, 0.42);
 }
 body:not(.sto-dark-theme) .mat-select-disabled .mat-select-value {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-select-arrow {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-select-panel {
   background: white;
@@ -2273,7 +2271,7 @@ body:not(.sto-dark-theme) .mat-select-panel:not([class*=mat-elevation-z]) {
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }
 body:not(.sto-dark-theme) .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
-  background: rgba(0, 0, 0, 0.12);
+  background: rgba(234, 234, 234, 0.12);
 }
 body:not(.sto-dark-theme) .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
   color: #007079;
@@ -2288,15 +2286,15 @@ body:not(.sto-dark-theme) .mat-form-field .mat-select.mat-select-invalid .mat-se
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-drawer-container {
-  background-color: #fafafa;
-  color: rgba(0, 0, 0, 0.87);
+  background-color: white;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-drawer {
   background-color: white;
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-drawer.mat-drawer-push {
   background-color: white;
@@ -2305,19 +2303,19 @@ body:not(.sto-dark-theme) .mat-drawer:not(.mat-drawer-side) {
   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 body:not(.sto-dark-theme) .mat-drawer-side {
-  border-right: solid 1px rgba(0, 0, 0, 0.12);
+  border-right: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) .mat-drawer-side.mat-drawer-end {
-  border-left: solid 1px rgba(0, 0, 0, 0.12);
+  border-left: solid 1px gainsboro;
   border-right: none;
 }
 body:not(.sto-dark-theme) [dir=rtl] .mat-drawer-side {
-  border-left: solid 1px rgba(0, 0, 0, 0.12);
+  border-left: solid 1px gainsboro;
   border-right: none;
 }
 body:not(.sto-dark-theme) [dir=rtl] .mat-drawer-side.mat-drawer-end {
   border-left: none;
-  border-right: solid 1px rgba(0, 0, 0, 0.12);
+  border-right: solid 1px gainsboro;
 }
 body:not(.sto-dark-theme) .mat-drawer-backdrop.mat-drawer-shown {
   background-color: rgba(0, 0, 0, 0.6);
@@ -2350,17 +2348,17 @@ body:not(.sto-dark-theme) .mat-slide-toggle.mat-warn.mat-checked .mat-ripple-ele
   background-color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
-  background-color: black;
+  background-color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-slide-toggle-thumb {
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   background-color: #fafafa;
 }
 body:not(.sto-dark-theme) .mat-slide-toggle-bar {
-  background-color: rgba(0, 0, 0, 0.38);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-track-background {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-primary .mat-slider-track-fill,
 body:not(.sto-dark-theme) .mat-primary .mat-slider-thumb,
@@ -2397,49 +2395,49 @@ body:not(.sto-dark-theme) .mat-warn .mat-slider-focus-ring {
 }
 body:not(.sto-dark-theme) .mat-slider:hover .mat-slider-track-background,
 body:not(.sto-dark-theme) .cdk-focused .mat-slider-track-background {
-  background-color: rgba(0, 0, 0, 0.38);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-disabled .mat-slider-track-background,
 body:not(.sto-dark-theme) .mat-slider-disabled .mat-slider-track-fill,
 body:not(.sto-dark-theme) .mat-slider-disabled .mat-slider-thumb {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-disabled:hover .mat-slider-track-background {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-min-value .mat-slider-focus-ring {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(61, 61, 61, 0.12);
 }
 body:not(.sto-dark-theme) .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
 body:not(.sto-dark-theme) .mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
-  background-color: rgba(0, 0, 0, 0.87);
+  background-color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
 body:not(.sto-dark-theme) .mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
-  border-color: rgba(0, 0, 0, 0.26);
+  border-color: #bebebe;
   background-color: transparent;
 }
 body:not(.sto-dark-theme) .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, body:not(.sto-dark-theme) .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
-  border-color: rgba(0, 0, 0, 0.38);
+  border-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, body:not(.sto-dark-theme) .mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
-  border-color: rgba(0, 0, 0, 0.26);
+  border-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-slider-has-ticks .mat-slider-wrapper::after {
-  border-color: rgba(0, 0, 0, 0.7);
+  border-color: rgba(61, 61, 61, 0.7);
 }
 body:not(.sto-dark-theme) .mat-slider-horizontal .mat-slider-ticks {
-  background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
-  background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
+  background-image: repeating-linear-gradient(to right, rgba(61, 61, 61, 0.7), rgba(61, 61, 61, 0.7) 2px, transparent 0, transparent);
+  background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(61, 61, 61, 0.7), rgba(61, 61, 61, 0.7) 2px, transparent 0, transparent);
 }
 body:not(.sto-dark-theme) .mat-slider-vertical .mat-slider-ticks {
-  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
+  background-image: repeating-linear-gradient(to bottom, rgba(61, 61, 61, 0.7), rgba(61, 61, 61, 0.7) 2px, transparent 0, transparent);
 }
 body:not(.sto-dark-theme) .mat-step-header.cdk-keyboard-focused, body:not(.sto-dark-theme) .mat-step-header.cdk-program-focused, body:not(.sto-dark-theme) .mat-step-header:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #eaeaea;
 }
 @media (hover: none) {
   body:not(.sto-dark-theme) .mat-step-header:hover {
@@ -2448,10 +2446,10 @@ body:not(.sto-dark-theme) .mat-step-header.cdk-keyboard-focused, body:not(.sto-d
 }
 body:not(.sto-dark-theme) .mat-step-header .mat-step-label,
 body:not(.sto-dark-theme) .mat-step-header .mat-step-optional {
-  color: rgba(0, 0, 0, 0.54);
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-step-header .mat-step-icon {
-  background-color: rgba(0, 0, 0, 0.54);
+  background-color: #565656;
   color: white;
 }
 body:not(.sto-dark-theme) .mat-step-header .mat-step-icon-selected,
@@ -2483,7 +2481,7 @@ body:not(.sto-dark-theme) .mat-step-header .mat-step-icon-state-error {
   color: #f44336;
 }
 body:not(.sto-dark-theme) .mat-step-header .mat-step-label.mat-step-label-active {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-step-header .mat-step-label.mat-step-label-error {
   color: #f44336;
@@ -2492,12 +2490,12 @@ body:not(.sto-dark-theme) .mat-stepper-horizontal, body:not(.sto-dark-theme) .ma
   background-color: white;
 }
 body:not(.sto-dark-theme) .mat-stepper-vertical-line::before {
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: gainsboro;
 }
 body:not(.sto-dark-theme) .mat-horizontal-stepper-header::before,
 body:not(.sto-dark-theme) .mat-horizontal-stepper-header::after,
 body:not(.sto-dark-theme) .mat-stepper-horizontal-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-color: gainsboro;
 }
 .mat-horizontal-stepper-header {
   height: 72px;
@@ -2522,28 +2520,28 @@ body:not(.sto-dark-theme) .mat-stepper-horizontal-line {
 }
 
 body:not(.sto-dark-theme) .mat-sort-header-arrow {
-  color: #757575;
+  color: #565656;
 }
 body:not(.sto-dark-theme) .mat-tab-nav-bar,
 body:not(.sto-dark-theme) .mat-tab-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid gainsboro;
 }
 body:not(.sto-dark-theme) .mat-tab-group-inverted-header .mat-tab-nav-bar,
 body:not(.sto-dark-theme) .mat-tab-group-inverted-header .mat-tab-header {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  border-top: 1px solid gainsboro;
   border-bottom: none;
 }
 body:not(.sto-dark-theme) .mat-tab-label, body:not(.sto-dark-theme) .mat-tab-link {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-tab-label.mat-tab-disabled, body:not(.sto-dark-theme) .mat-tab-link.mat-tab-disabled {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-tab-header-pagination-chevron {
-  border-color: rgba(0, 0, 0, 0.87);
+  border-color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-  border-color: rgba(0, 0, 0, 0.38);
+  border-color: #bebebe;
 }
 body:not(.sto-dark-theme) .mat-tab-group[class*=mat-background-] .mat-tab-header,
 body:not(.sto-dark-theme) .mat-tab-nav-bar[class*=mat-background-] {
@@ -2701,8 +2699,8 @@ body:not(.sto-dark-theme) .mat-tab-nav-bar.mat-background-warn > .mat-tab-header
   background-color: rgba(255, 255, 255, 0.12);
 }
 body:not(.sto-dark-theme) .mat-toolbar {
-  background: whitesmoke;
-  color: rgba(0, 0, 0, 0.87);
+  background: white;
+  color: #3d3d3d;
 }
 body:not(.sto-dark-theme) .mat-toolbar.mat-primary {
   background: #007079;
@@ -2749,14 +2747,14 @@ body:not(.sto-dark-theme) .mat-toolbar .mat-input-element {
   }
 }
 body:not(.sto-dark-theme) .mat-tooltip {
-  background: rgba(97, 97, 97, 0.9);
+  background: rgba(0, 0, 0, 0.9);
 }
 body:not(.sto-dark-theme) .mat-tree {
   background: white;
 }
 body:not(.sto-dark-theme) .mat-tree-node,
 body:not(.sto-dark-theme) .mat-nested-tree-node {
-  color: rgba(0, 0, 0, 0.87);
+  color: #3d3d3d;
 }
 .mat-tree-node {
   min-height: 48px;
@@ -6633,10 +6631,6 @@ Use with StoGridDirective
   margin: 0;
   padding: 12px 24px 16px;
 }
-.sto-dialog .mat-dialog-container .mat-dialog-content.scroll-lines {
-  border-top: solid 1px #E0E0E0;
-  border-bottom: solid 1px #E0E0E0;
-}
 .sto-dialog .mat-dialog-container .mat-dialog-content .sto-selection-list {
   margin: -24px;
 }
@@ -6764,10 +6758,6 @@ Below styles overrides Angular Material defaults
   line-height: 13px;
 }
 
-.mat-button, .mat-raised-button, .mat-flat-button, .mat-stroked-button {
-  text-transform: uppercase;
-}
-
 .mat-menu-item.active {
   color: #3f51b5;
 }
@@ -6894,7 +6884,7 @@ body:not(.sto-dark-theme) .sto-form__field .mat-form-field-flex:hover {
   background-color: rgba(102, 135, 184, 0.15);
 }
 body:not(.sto-dark-theme) .sto-form__field .mat-form-field-wrapper .mat-form-field-underline {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(61, 61, 61, 0.12);
 }
 body:not(.sto-dark-theme) .sto-form__field--readonly .mat-form-field-flex:hover {
   background-color: transparent;
@@ -6903,16 +6893,16 @@ body:not(.sto-dark-theme) .sto-form__field--readonly .mat-form-field-flex:hover
   background-color: transparent;
 }
 body:not(.sto-dark-theme) .sto-form__field--disabled {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .sto-form__field--disabled .mat-form-field-flex:hover {
-  background-color: rgba(0, 0, 0, 0.38);
+  background-color: #bebebe;
 }
 body:not(.sto-dark-theme) .sto-form__field--disabled .mat-form-field-flex:hover + .mat-form-field-underline {
   background-color: transparent;
 }
 body:not(.sto-dark-theme) .sto-form__field--disabled .mat-form-field-flex {
-  color: rgba(0, 0, 0, 0.38);
+  color: #bebebe;
 }
 body:not(.sto-dark-theme) .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arrow {
   color: rgba(0, 0, 0, 0.38);
@@ -7172,4 +7162,8 @@ body.sto-dark-theme .sto-form__field--disabled .mat-select.mat-select-disabled .
 
 .negative-number .mat-input-element:disabled {
   color: #cc1414;
+}
+
+.mat-typography .mat-calendar-body-cell-content.mat-focus-indicator {
+  position: absolute !important;
 }