@ngx-stoui/core 12.1.2 → 13.0.0-BETA.0

package/ngx-stoui.css

@@ -807,33 +807,12 @@ body .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hove
 body .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
   color: var(--text);
 }
-body .mat-badge-content {
-  color: var(--primary-contrast-resting);
-  background: var(--primary-resting);
-}
-.cdk-high-contrast-active body .mat-badge-content {
-  outline: solid 1px;
-  border-radius: 0;
-}
-
-body .mat-badge-accent .mat-badge-content {
-  background: var(--accent-highlight);
-  color: var(--accent-highlight-contrast);
-}
-body .mat-badge-warn .mat-badge-content {
-  color: white;
-  background: #f44336;
-}
 body .mat-badge {
   position: relative;
 }
 body .mat-badge-hidden .mat-badge-content {
   display: none;
 }
-body .mat-badge-disabled .mat-badge-content {
-  background: var(--text-disabled);
-  color: var(--text-disabled);
-}
 body .mat-badge-content {
   position: absolute;
   text-align: center;
@@ -970,6 +949,27 @@ body .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
   right: auto;
   left: -14px;
 }
+body .mat-badge-content {
+  color: var(--primary-contrast-resting);
+  background: var(--primary-resting);
+}
+.cdk-high-contrast-active body .mat-badge-content {
+  outline: solid 1px;
+  border-radius: 0;
+}
+
+body .mat-badge-accent .mat-badge-content {
+  background: var(--accent-highlight);
+  color: var(--accent-highlight-contrast);
+}
+body .mat-badge-warn .mat-badge-content {
+  color: white;
+  background: #f44336;
+}
+body .mat-badge-disabled .mat-badge-content {
+  background: var(--text-disabled);
+  color: var(--text-disabled);
+}
 body .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: var(--bg-card);
@@ -1264,19 +1264,17 @@ body .mat-cell, body .mat-footer-cell {
   color: var(--text);
 }
 body .mat-calendar-arrow {
-  border-top-color: var(--text-secondary);
+  fill: var(--text-secondary);
 }
 body .mat-datepicker-toggle,
 body .mat-datepicker-content .mat-calendar-next-button,
 body .mat-datepicker-content .mat-calendar-previous-button {
   color: var(--text-secondary);
 }
-body .mat-calendar-table-header {
-  color: var(--text-disabled);
-}
 body .mat-calendar-table-header-divider::after {
   background: var(--divider);
 }
+body .mat-calendar-table-header,
 body .mat-calendar-body-label {
   color: var(--text-secondary);
 }
@@ -1671,12 +1669,13 @@ body .mat-menu-item {
   background: transparent;
   color: var(--text);
 }
-body .mat-menu-item[disabled], body .mat-menu-item[disabled]::after,
+body .mat-menu-item[disabled],
+body .mat-menu-item[disabled] .mat-menu-submenu-icon,
 body .mat-menu-item[disabled] .mat-icon-no-color {
   color: var(--text-disabled);
 }
 body .mat-menu-item .mat-icon-no-color,
-body .mat-menu-item-submenu-trigger::after {
+body .mat-menu-submenu-icon {
   color: var(--text-secondary);
 }
 body .mat-menu-item:hover:not([disabled]),
@@ -1930,7 +1929,7 @@ body .mat-warn .mat-slider-focus-ring {
   background-color: rgba(244, 67, 54, 0.2);
 }
 body .mat-slider:hover .mat-slider-track-background,
-body .cdk-focused .mat-slider-track-background {
+body .mat-slider.cdk-focused .mat-slider-track-background {
   background-color: var(--text-disabled);
 }
 body .mat-slider-disabled .mat-slider-track-background,
@@ -1976,9 +1975,12 @@ body .mat-slider-vertical .mat-slider-ticks {
   background-image: repeating-linear-gradient(to bottom, var(--text), var(--text) 2px, transparent 0, transparent);
   opacity: 0.7;
 }
-body .mat-step-header.cdk-keyboard-focused, body .mat-step-header.cdk-program-focused, body .mat-step-header:hover {
+body .mat-step-header.cdk-keyboard-focused, body .mat-step-header.cdk-program-focused, body .mat-step-header:hover:not([aria-disabled]), body .mat-step-header:hover[aria-disabled=false] {
   background-color: var(--bg-hover);
 }
+body .mat-step-header:hover[aria-disabled=true] {
+  cursor: default;
+}
 @media (hover: none) {
   body .mat-step-header:hover {
     background: none;
@@ -2083,7 +2085,7 @@ body .mat-tab-header-pagination-chevron {
 body .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
   border-color: var(--text-disabled);
 }
-body .mat-tab-group[class*=mat-background-] .mat-tab-header,
+body .mat-tab-group[class*=mat-background-] > .mat-tab-header,
 body .mat-tab-nav-bar[class*=mat-background-] {
   border-bottom: none;
   border-top: none;
@@ -2156,6 +2158,7 @@ body .mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pag
 body .mat-tab-group.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, body .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
 body .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
   border-color: var(--primary-contrast-resting);
+  opacity: 0.4;
 }
 body .mat-tab-group.mat-background-primary > .mat-tab-header .mat-ripple-element,
 body .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-ripple-element,
@@ -2163,6 +2166,7 @@ body .mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-rip
 body .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-ripple-element,
 body .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element {
   background-color: var(--primary-contrast-resting);
+  opacity: 0.12;
 }
 body .mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), body .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
 body .mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
@@ -2193,6 +2197,7 @@ body .mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagi
 body .mat-tab-group.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, body .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
 body .mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
   border-color: var(--accent-highlight-contrast);
+  opacity: 0.4;
 }
 body .mat-tab-group.mat-background-accent > .mat-tab-header .mat-ripple-element,
 body .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-ripple-element,
@@ -2200,6 +2205,7 @@ body .mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-ripp
 body .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-ripple-element,
 body .mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element {
   background-color: var(--accent-highlight-contrast);
+  opacity: 0.12;
 }
 body .mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), body .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),
 body .mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),
@@ -2229,14 +2235,16 @@ body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-focus-indicator
 body .mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
 body .mat-tab-group.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
 body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-  border-color: rgba(255, 255, 255, 0.4);
+  border-color: white;
+  opacity: 0.4;
 }
 body .mat-tab-group.mat-background-warn > .mat-tab-header .mat-ripple-element,
 body .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-ripple-element,
 body .mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element, body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-ripple-element,
 body .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-ripple-element,
 body .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: white;
+  opacity: 0.12;
 }
 body .mat-toolbar {
   background: var(--bg-card);
@@ -2314,46 +2322,46 @@ body, .sto-header, .mat-card {
 }
 
 .mat-h1, .mat-headline, .mat-typography h1 {
-  font: 400 28px/44px Equinor, Roboto;
+  font: 400 28px / 44px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h2, .mat-title, .mat-typography h2 {
-  font: 400 24px/32px Equinor, Roboto;
+  font: 400 24px / 32px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h3, .mat-subheading-2, .mat-typography h3 {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h4, .mat-subheading-1, .mat-typography h4 {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h5, .mat-typography h5 {
-  font: 400 calc(13px * 0.83)/20px Equinor, Roboto;
+  font: 400 calc(13px * 0.83) / 20px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-h6, .mat-typography h6 {
-  font: 400 calc(13px * 0.67)/20px Equinor, Roboto;
+  font: 400 calc(13px * 0.67) / 20px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-body-strong, .mat-body-2 {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-body, .mat-body-1, .mat-typography {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-body p, .mat-body-1 p, .mat-typography p {
@@ -2361,75 +2369,75 @@ body, .sto-header, .mat-card {
 }
 
 .mat-small, .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-display-4, .mat-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 
 .mat-display-3, .mat-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 
 .mat-display-2, .mat-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 
 .mat-display-1, .mat-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
 
 .mat-h1, .mat-headline, .mat-typography.sto-sm-typography h1 {
-  font: 400 24px/40px Equinor, Roboto;
+  font: 400 24px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h2, .mat-title, .mat-typography.sto-sm-typography h2 {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h3, .mat-subheading-2, .mat-typography.sto-sm-typography h3 {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h4, .mat-subheading-1, .mat-typography.sto-sm-typography h4 {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h5, .mat-typography.sto-sm-typography h5 {
-  font: 400 calc(10px * 0.83)/16px Equinor, Roboto;
+  font: 400 calc(10px * 0.83) / 16px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-h6, .mat-typography.sto-sm-typography h6 {
-  font: 400 calc(10px * 0.67)/16px Equinor, Roboto;
+  font: 400 calc(10px * 0.67) / 16px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-body-strong, .mat-body-2 {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-body, .mat-body-1, .mat-typography.sto-sm-typography {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-body p, .mat-body-1 p, .mat-typography.sto-sm-typography p {
@@ -2437,75 +2445,75 @@ body, .sto-header, .mat-card {
 }
 
 .mat-small, .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-display-4, .mat-typography.sto-sm-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 
 .mat-display-3, .mat-typography.sto-sm-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 
 .mat-display-2, .mat-typography.sto-sm-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 
 .mat-display-1, .mat-typography.sto-sm-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
 
 .mat-h1, .mat-headline, .mat-typography.sto-l-typography h1 {
-  font: 400 32px/48px Equinor, Roboto;
+  font: 400 32px / 48px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h2, .mat-title, .mat-typography.sto-l-typography h2 {
-  font: 400 28px/40px Equinor, Roboto;
+  font: 400 28px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h3, .mat-subheading-2, .mat-typography.sto-l-typography h3 {
-  font: 400 24px/40px Equinor, Roboto;
+  font: 400 24px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h4, .mat-subheading-1, .mat-typography.sto-l-typography h4 {
-  font: 400 20px/32px Equinor, Roboto;
+  font: 400 20px / 32px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 
 .mat-h5, .mat-typography.sto-l-typography h5 {
-  font: 400 calc(16px * 0.83)/24px Equinor, Roboto;
+  font: 400 calc(16px * 0.83) / 24px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-h6, .mat-typography.sto-l-typography h6 {
-  font: 400 calc(16px * 0.67)/24px Equinor, Roboto;
+  font: 400 calc(16px * 0.67) / 24px Equinor, Roboto;
   margin: 0 0 12px;
 }
 
 .mat-body-strong, .mat-body-2 {
-  font: 400 18px/24px Equinor, Roboto;
+  font: 400 18px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-body, .mat-body-1, .mat-typography.sto-l-typography {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-body p, .mat-body-1 p, .mat-typography.sto-l-typography p {
@@ -2513,30 +2521,30 @@ body, .sto-header, .mat-card {
 }
 
 .mat-small, .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 
 .mat-display-4, .mat-typography.sto-l-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 
 .mat-display-3, .mat-typography.sto-l-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 
 .mat-display-2, .mat-typography.sto-l-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 
 .mat-display-1, .mat-typography.sto-l-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
@@ -2553,70 +2561,70 @@ body, .sto-header, .mat-card {
   font-size: 24px;
 }
 .mat-typography .mat-h1, .mat-typography .mat-headline, .mat-typography .mat-typography h1 {
-  font: 400 28px/44px Equinor, Roboto;
+  font: 400 28px / 44px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography .mat-h2, .mat-typography .mat-title, .mat-typography .mat-typography h2 {
-  font: 400 24px/32px Equinor, Roboto;
+  font: 400 24px / 32px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography .mat-h3, .mat-typography .mat-subheading-2, .mat-typography .mat-typography h3 {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography .mat-h4, .mat-typography .mat-subheading-1, .mat-typography .mat-typography h4 {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography .mat-h5, .mat-typography .mat-typography h5 {
-  font: 400 calc(13px * 0.83)/20px Equinor, Roboto;
+  font: 400 calc(13px * 0.83) / 20px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography .mat-h6, .mat-typography .mat-typography h6 {
-  font: 400 calc(13px * 0.67)/20px Equinor, Roboto;
+  font: 400 calc(13px * 0.67) / 20px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography .mat-body-strong, .mat-typography .mat-body-2 {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-body, .mat-typography .mat-body-1, .mat-typography .mat-typography {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-body p, .mat-typography .mat-body-1 p, .mat-typography .mat-typography p {
   margin: 0 0 12px;
 }
 .mat-typography .mat-small, .mat-typography .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-display-4, .mat-typography .mat-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 .mat-typography .mat-display-3, .mat-typography .mat-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 .mat-typography .mat-display-2, .mat-typography .mat-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 .mat-typography .mat-display-1, .mat-typography .mat-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
 .mat-typography .mat-bottom-sheet-container {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-button, .mat-typography .mat-raised-button, .mat-typography .mat-icon-button, .mat-typography .mat-stroked-button,
@@ -2682,7 +2690,7 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography .mat-dialog-title {
-  font: 400 24px/32px Equinor, Roboto;
+  font: 400 24px / 32px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-expansion-panel-header {
@@ -2691,11 +2699,11 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography .mat-expansion-panel-content {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-form-field {
-  font: 400 13px/1.333 0.025em;
+  font: 400 13px / 1.333 0.025em;
   letter-spacing: normal;
 }
 .mat-typography .mat-form-field-wrapper {
@@ -2753,17 +2761,14 @@ body, .sto-header, .mat-card {
 .mat-typography .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
 .mat-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.001px);
-  -ms-transform: translateY(-1.33325em) scale(0.75);
   width: 133.3333333333%;
 }
 .mat-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00101px);
-  -ms-transform: translateY(-1.33324em) scale(0.75);
   width: 133.3333433333%;
 }
 .mat-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00102px);
-  -ms-transform: translateY(-1.33323em) scale(0.75);
   width: 133.3333533333%;
 }
 .mat-typography .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -2898,7 +2903,7 @@ body, .sto-header, .mat-card {
 .mat-typography .mat-toolbar h4,
 .mat-typography .mat-toolbar h5,
 .mat-typography .mat-toolbar h6 {
-  font: 400 24px/32px Equinor, Roboto;
+  font: 400 24px / 32px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0;
 }
@@ -2986,7 +2991,7 @@ body, .sto-header, .mat-card {
   font-size: 20px;
 }
 .mat-typography .mat-optgroup-label {
-  font: 400 13px/20px Equinor, Roboto;
+  font: 400 13px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography .mat-simple-snackbar {
@@ -3152,70 +3157,70 @@ body, .sto-header, .mat-card {
   font-size: 24px;
 }
 .mat-typography.sto-sm-typography .mat-h1, .mat-typography.sto-sm-typography .mat-headline, .mat-typography.sto-sm-typography .mat-typography h1 {
-  font: 400 24px/40px Equinor, Roboto;
+  font: 400 24px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-sm-typography .mat-h2, .mat-typography.sto-sm-typography .mat-title, .mat-typography.sto-sm-typography .mat-typography h2 {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-sm-typography .mat-h3, .mat-typography.sto-sm-typography .mat-subheading-2, .mat-typography.sto-sm-typography .mat-typography h3 {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-sm-typography .mat-h4, .mat-typography.sto-sm-typography .mat-subheading-1, .mat-typography.sto-sm-typography .mat-typography h4 {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-sm-typography .mat-h5, .mat-typography.sto-sm-typography .mat-typography h5 {
-  font: 400 calc(10px * 0.83)/16px Equinor, Roboto;
+  font: 400 calc(10px * 0.83) / 16px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography.sto-sm-typography .mat-h6, .mat-typography.sto-sm-typography .mat-typography h6 {
-  font: 400 calc(10px * 0.67)/16px Equinor, Roboto;
+  font: 400 calc(10px * 0.67) / 16px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography.sto-sm-typography .mat-body-strong, .mat-typography.sto-sm-typography .mat-body-2 {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-body, .mat-typography.sto-sm-typography .mat-body-1, .mat-typography.sto-sm-typography .mat-typography {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-body p, .mat-typography.sto-sm-typography .mat-body-1 p, .mat-typography.sto-sm-typography .mat-typography p {
   margin: 0 0 12px;
 }
 .mat-typography.sto-sm-typography .mat-small, .mat-typography.sto-sm-typography .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-display-4, .mat-typography.sto-sm-typography .mat-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 .mat-typography.sto-sm-typography .mat-display-3, .mat-typography.sto-sm-typography .mat-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 .mat-typography.sto-sm-typography .mat-display-2, .mat-typography.sto-sm-typography .mat-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 .mat-typography.sto-sm-typography .mat-display-1, .mat-typography.sto-sm-typography .mat-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
 .mat-typography.sto-sm-typography .mat-bottom-sheet-container {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-button, .mat-typography.sto-sm-typography .mat-raised-button, .mat-typography.sto-sm-typography .mat-icon-button, .mat-typography.sto-sm-typography .mat-stroked-button,
@@ -3281,7 +3286,7 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography.sto-sm-typography .mat-dialog-title {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-expansion-panel-header {
@@ -3290,11 +3295,11 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography.sto-sm-typography .mat-expansion-panel-content {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-form-field {
-  font: 400 10px/1.333 0.025em;
+  font: 400 10px / 1.333 0.025em;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-form-field-wrapper {
@@ -3352,17 +3357,14 @@ body, .sto-header, .mat-card {
 .mat-typography.sto-sm-typography .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
 .mat-typography.sto-sm-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00106px);
-  -ms-transform: translateY(-1.33319em) scale(0.75);
   width: 133.3333933333%;
 }
 .mat-typography.sto-sm-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00107px);
-  -ms-transform: translateY(-1.33318em) scale(0.75);
   width: 133.3334033333%;
 }
 .mat-typography.sto-sm-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00108px);
-  -ms-transform: translateY(-1.33317em) scale(0.75);
   width: 133.3334133333%;
 }
 .mat-typography.sto-sm-typography .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -3497,7 +3499,7 @@ body, .sto-header, .mat-card {
 .mat-typography.sto-sm-typography .mat-toolbar h4,
 .mat-typography.sto-sm-typography .mat-toolbar h5,
 .mat-typography.sto-sm-typography .mat-toolbar h6 {
-  font: 400 20px/28px Equinor, Roboto;
+  font: 400 20px / 28px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0;
 }
@@ -3585,7 +3587,7 @@ body, .sto-header, .mat-card {
   font-size: 16px;
 }
 .mat-typography.sto-sm-typography .mat-optgroup-label {
-  font: 400 10px/16px Equinor, Roboto;
+  font: 400 10px / 16px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-sm-typography .mat-simple-snackbar {
@@ -3751,70 +3753,70 @@ body, .sto-header, .mat-card {
   font-size: 24px;
 }
 .mat-typography.sto-l-typography .mat-h1, .mat-typography.sto-l-typography .mat-headline, .mat-typography.sto-l-typography .mat-typography h1 {
-  font: 400 32px/48px Equinor, Roboto;
+  font: 400 32px / 48px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-l-typography .mat-h2, .mat-typography.sto-l-typography .mat-title, .mat-typography.sto-l-typography .mat-typography h2 {
-  font: 400 28px/40px Equinor, Roboto;
+  font: 400 28px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-l-typography .mat-h3, .mat-typography.sto-l-typography .mat-subheading-2, .mat-typography.sto-l-typography .mat-typography h3 {
-  font: 400 24px/40px Equinor, Roboto;
+  font: 400 24px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-l-typography .mat-h4, .mat-typography.sto-l-typography .mat-subheading-1, .mat-typography.sto-l-typography .mat-typography h4 {
-  font: 400 20px/32px Equinor, Roboto;
+  font: 400 20px / 32px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 16px;
 }
 .mat-typography.sto-l-typography .mat-h5, .mat-typography.sto-l-typography .mat-typography h5 {
-  font: 400 calc(16px * 0.83)/24px Equinor, Roboto;
+  font: 400 calc(16px * 0.83) / 24px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography.sto-l-typography .mat-h6, .mat-typography.sto-l-typography .mat-typography h6 {
-  font: 400 calc(16px * 0.67)/24px Equinor, Roboto;
+  font: 400 calc(16px * 0.67) / 24px Equinor, Roboto;
   margin: 0 0 12px;
 }
 .mat-typography.sto-l-typography .mat-body-strong, .mat-typography.sto-l-typography .mat-body-2 {
-  font: 400 18px/24px Equinor, Roboto;
+  font: 400 18px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-body, .mat-typography.sto-l-typography .mat-body-1, .mat-typography.sto-l-typography .mat-typography {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-body p, .mat-typography.sto-l-typography .mat-body-1 p, .mat-typography.sto-l-typography .mat-typography p {
   margin: 0 0 12px;
 }
 .mat-typography.sto-l-typography .mat-small, .mat-typography.sto-l-typography .mat-caption {
-  font: 400 12px/20px Equinor, Roboto;
+  font: 400 12px / 20px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-display-4, .mat-typography.sto-l-typography .mat-typography .mat-display-4 {
-  font: 300 112px/112px Equinor, Roboto;
+  font: 300 112px / 112px Equinor, Roboto;
   letter-spacing: -0.05em;
   margin: 0 0 56px;
 }
 .mat-typography.sto-l-typography .mat-display-3, .mat-typography.sto-l-typography .mat-typography .mat-display-3 {
-  font: 400 56px/56px Equinor, Roboto;
+  font: 400 56px / 56px Equinor, Roboto;
   letter-spacing: -0.02em;
   margin: 0 0 64px;
 }
 .mat-typography.sto-l-typography .mat-display-2, .mat-typography.sto-l-typography .mat-typography .mat-display-2 {
-  font: 400 45px/48px Equinor, Roboto;
+  font: 400 45px / 48px Equinor, Roboto;
   letter-spacing: -0.005em;
   margin: 0 0 64px;
 }
 .mat-typography.sto-l-typography .mat-display-1, .mat-typography.sto-l-typography .mat-typography .mat-display-1 {
-  font: 400 34px/40px Equinor, Roboto;
+  font: 400 34px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0 0 64px;
 }
 .mat-typography.sto-l-typography .mat-bottom-sheet-container {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-button, .mat-typography.sto-l-typography .mat-raised-button, .mat-typography.sto-l-typography .mat-icon-button, .mat-typography.sto-l-typography .mat-stroked-button,
@@ -3880,7 +3882,7 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography.sto-l-typography .mat-dialog-title {
-  font: 400 28px/40px Equinor, Roboto;
+  font: 400 28px / 40px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-expansion-panel-header {
@@ -3889,11 +3891,11 @@ body, .sto-header, .mat-card {
   font-weight: 400;
 }
 .mat-typography.sto-l-typography .mat-expansion-panel-content {
-  font: 400 16px/24px Equinor, Roboto;
+  font: 400 16px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-form-field {
-  font: 400 16px/1.333 0.025em;
+  font: 400 16px / 1.333 0.025em;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-form-field-wrapper {
@@ -3951,17 +3953,14 @@ body, .sto-header, .mat-card {
 .mat-typography.sto-l-typography .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
 .mat-typography.sto-l-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00112px);
-  -ms-transform: translateY(-1.33313em) scale(0.75);
   width: 133.3334533333%;
 }
 .mat-typography.sto-l-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00113px);
-  -ms-transform: translateY(-1.33312em) scale(0.75);
   width: 133.3334633333%;
 }
 .mat-typography.sto-l-typography .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.33325em) scale(0.75) perspective(100px) translateZ(0.00114px);
-  -ms-transform: translateY(-1.33311em) scale(0.75);
   width: 133.3334733333%;
 }
 .mat-typography.sto-l-typography .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -4096,7 +4095,7 @@ body, .sto-header, .mat-card {
 .mat-typography.sto-l-typography .mat-toolbar h4,
 .mat-typography.sto-l-typography .mat-toolbar h5,
 .mat-typography.sto-l-typography .mat-toolbar h6 {
-  font: 400 28px/40px Equinor, Roboto;
+  font: 400 28px / 40px Equinor, Roboto;
   letter-spacing: normal;
   margin: 0;
 }
@@ -4184,7 +4183,7 @@ body, .sto-header, .mat-card {
   font-size: 24px;
 }
 .mat-typography.sto-l-typography .mat-optgroup-label {
-  font: 400 18px/24px Equinor, Roboto;
+  font: 400 18px / 24px Equinor, Roboto;
   letter-spacing: normal;
 }
 .mat-typography.sto-l-typography .mat-simple-snackbar {
@@ -4711,6 +4710,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
   cursor: default;
 }
 .sto-form__field--readonly .mat-form-field-flex {
+  border: 1px solid var(--divider);
   background-color: transparent;
 }
 .sto-form__field--readonly :hover .mat-form-field-flex {
@@ -4736,6 +4736,8 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 }
 .sto-form__field--disabled .mat-form-field-flex {
   cursor: default;
+  border: 1px solid var(--divider);
+  background-color: transparent;
 }
 
 .sto-form__field.sto-form__field--without-placeholder {