@wavemaker/app-runtime-wm-build 12.0.0-next.45027 → 12.0.0-next.45028

app-runtime-wm-build/wmapp/styles/foundation/foundation.css

@@ -331,87 +331,97 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-color-scrim-hover: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-hover)));
   --wm-color-scrim-focus: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-focus)));
   --wm-color-scrim-active: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-active)));
+  --wm-color-white-hover: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-hover)));
+  --wm-color-white-focus: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-focus)));
+  --wm-color-white-active: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-active)));
+  --wm-color-black-hover: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-hover)));
+  --wm-color-black-focus: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-focus)));
+  --wm-color-black-active: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-active)));
   /*--font--*/
   --wm-display-large-font-family: var(--wm-font-family-brand);
   --wm-display-large-font-weight: var(--wm-font-weight-regular);
   --wm-display-large-font-size: 57px;
   --wm-display-large-line-height: 64px;
-  --wm-display-large-letter-spacing: -0.25;
+  --wm-display-large-letter-spacing: -0.25px;
   --wm-display-medium-font-family: var(--wm-font-family-brand);
   --wm-display-medium-font-weight: var(--wm-font-weight-regular);
   --wm-display-medium-font-size: 45px;
   --wm-display-medium-line-height: 52px;
-  --wm-display-medium-letter-spacing: 0;
+  --wm-display-medium-letter-spacing: 0px;
   --wm-display-small-font-family: var(--wm-font-family-brand);
   --wm-display-small-font-weight: var(--wm-font-weight-regular);
   --wm-display-small-font-size: 36px;
   --wm-display-small-line-height: 44px;
-  --wm-display-small-letter-spacing: 0;
+  --wm-display-small-letter-spacing: 0px;
   --wm-h1-font-family: var(--wm-font-family-brand);
   --wm-h1-font-weight: var(--wm-font-weight-regular);
   --wm-h1-font-size: 32px;
   --wm-h1-line-height: 40px;
-  --wm-h1-letter-spacing: 0;
+  --wm-h1-letter-spacing: 0px;
   --wm-h2-font-family: var(--wm-font-family-brand);
   --wm-h2-font-weight: var(--wm-font-weight-regular);
   --wm-h2-font-size: 28px;
   --wm-h2-line-height: 36px;
-  --wm-h2-letter-spacing: 0;
+  --wm-h2-letter-spacing: 0px;
   --wm-h3-font-family: var(--wm-font-family-brand);
   --wm-h3-font-weight: var(--wm-font-weight-regular);
   --wm-h3-font-size: 24px;
   --wm-h3-line-height: 32px;
-  --wm-h3-letter-spacing: 0;
+  --wm-h3-letter-spacing: 0px;
   --wm-h4-font-family: var(--wm-font-family-brand);
   --wm-h4-font-weight: var(--wm-font-weight-regular);
   --wm-h4-font-size: 22px;
   --wm-h4-line-height: 28px;
-  --wm-h4-letter-spacing: 0;
+  --wm-h4-letter-spacing: 0px;
   --wm-h5-font-family: var(--wm-font-family-brand);
   --wm-h5-font-weight: var(--wm-font-weight-medium);
   --wm-h5-font-size: 16px;
   --wm-h5-line-height: 24px;
-  --wm-h5-letter-spacing: 0.15;
+  --wm-h5-letter-spacing: 0.15px;
   --wm-h6-font-family: var(--wm-font-family-brand);
   --wm-h6-font-weight: var(--wm-font-weight-medium);
   --wm-h6-font-size: 14px;
   --wm-h6-line-height: 20px;
-  --wm-h6-letter-spacing: 0.1;
+  --wm-h6-letter-spacing: 0.1px;
   --wm-label-large-font-family: var(--wm-font-family-brand);
   --wm-label-large-font-weight: var(--wm-font-weight-medium);
   --wm-label-large-font-size: 14px;
   --wm-label-large-line-height: 20px;
-  --wm-label-large-letter-spacing: 0.1;
+  --wm-label-large-letter-spacing: 0.1px;
   --wm-label-medium-font-family: var(--wm-font-family-brand);
   --wm-label-medium-font-weight: var(--wm-font-weight-medium);
   --wm-label-medium-font-size: 12px;
   --wm-label-medium-line-height: 16px;
-  --wm-label-medium-letter-spacing: 0.5;
+  --wm-label-medium-letter-spacing: 0.5px;
   --wm-label-small-font-family: var(--wm-font-family-brand);
   --wm-label-small-font-weight: var(--wm-font-weight-medium);
   --wm-label-small-font-size: 11px;
   --wm-label-small-line-height: 16px;
-  --wm-label-small-letter-spacing: 0.5;
+  --wm-label-small-letter-spacing: 0.5px;
   --wm-body-large-font-family: var(--wm-font-family-brand);
   --wm-body-large-font-weight: var(--wm-font-weight-regular);
   --wm-body-large-font-size: 16px;
   --wm-body-large-line-height: 24px;
-  --wm-body-large-letter-spacing: 0.5;
+  --wm-body-large-letter-spacing: 0.5px;
   --wm-body-medium-font-family: var(--wm-font-family-brand);
   --wm-body-medium-font-weight: var(--wm-font-weight-regular);
   --wm-body-medium-font-size: 14px;
   --wm-body-medium-line-height: 20px;
-  --wm-body-medium-letter-spacing: 0.25;
+  --wm-body-medium-letter-spacing: 0.25px;
   --wm-body-small-font-family: var(--wm-font-family-brand);
   --wm-body-small-font-weight: var(--wm-font-weight-regular);
   --wm-body-small-font-size: 12px;
   --wm-body-small-line-height: 16px;
-  --wm-body-small-letter-spacing: 0.4;
-  --wm-icon-size-xs: 12px;
-  --wm-icon-size-sm: 20px;
-  --wm-icon-size-md: 24px;
-  --wm-icon-size-lg: 32px;
-  --wm-icon-size-xl: 40px;
+  --wm-body-small-letter-spacing: 0.4px;
+  --wm-icon-size: 1.5rem;
+  --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
+  --wm-icon-size-sm: calc(var(--wm-icon-size) * 0.75);
+  --wm-icon-size-md: calc(var(--wm-icon-size) * 1);
+  --wm-icon-size-lg: calc(var(--wm-icon-size) * 1.25);
+  --wm-icon-size-2x: calc(var(--wm-icon-size) * 1.5);
+  --wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
+  --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
+  --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
   --wm-box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1);
   --wm-box-shadow-sm: 0 0.125rem 0.25rem rgba(29, 58, 83, 0.15);
   --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
@@ -426,8 +436,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 // ex: ~"color-mix(in srgb, color1 50%, color2 30%)" instead of color-mix(in srgb, color1 50%, color2 30%) //
 =========*/
 :root {
+  /*--shadows(elevations)--*/
+  --wm-elevation-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --wm-elevation-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --wm-elevation-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
+  --wm-elevation-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
+  --wm-elevation-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
   /*headings*/
-  --wm-heading-color: var(--wm-color-on-surface);
+  --wm-headings-color: var(--wm-color-on-surface);
   /*page content*/
   --wm-page-content-padding: 0;
   --wm-page-content-background: var(--wm-color-surface-container-lowest);
@@ -496,10 +512,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-padding: var(--wm-space-2) var(--wm-space-6);
   --wm-btn-min-width: auto;
   --wm-btn-height: 40px;
+  --wm-btn-gap: var(--wm-space-2);
   --wm-btn-shadow: none;
   --wm-btn-state-layer-color: transparent;
   --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
   --wm-btn-pressed-state-layer-opacity: var(--wm-opacity-active);
+  --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
+  --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
+  --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
+  --wm-btn-elevated-active: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
   --wm-btn-default-background: var(--wm-btn-background);
   --wm-btn-default-color: var(--wm-btn-color);
   --wm-btn-default-border-color: var(--wm-btn-border-color);
@@ -565,6 +586,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-xs-padding: var(--wm-space-1) var(--wm-space-4);
   --wm-btn-xs-min-width: auto;
   --wm-btn-xs-height: 32px;
+  --wm-btn-xs-gap: var(--wm-space-1);
   --wm-btn-sm-font-size: var(--wm-label-medium-font-size);
   --wm-btn-sm-font-family: var(--wm-label-medium-font-family);
   --wm-btn-sm-font-weight: var(--wm-label-medium-font-weight);
@@ -574,6 +596,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-sm-padding: var(--wm-space-1) var(--wm-space-4);
   --wm-btn-sm-min-width: auto;
   --wm-btn-sm-height: 36px;
+  --wm-btn-sm-gap: var(--wm-space-1);
   --wm-btn-lg-font-size: var(--wm-body-large-font-size);
   --wm-btn-lg-font-family: var(--wm-body-large-font-family);
   --wm-btn-lg-font-weight: var(--wm-body-large-font-weight);
@@ -583,11 +606,99 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-lg-padding: var(--wm-space-2) var(--wm-space-8);
   --wm-btn-lg-min-width: auto;
   --wm-btn-lg-height: 44px;
-  --wm-btn-contrast-light: #ffffff;
-  --wm-btn-contrast-dark: rgba(0, 0, 0, 0.87);
-  --wm-btn-elevated: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
-  --wm-btn-elevated-hover: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
-  --wm-btn-elevated-active: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
+  --wm-btn-lg-gap: var(--wm-space-2);
+  /*--Anchor--*/
+  --wm-anchor-font-size: var(--wm-body-medium-font-size);
+  --wm-anchor-font-family: var(--wm-body-medium-font-family);
+  --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
+  --wm-anchor-line-height: var(--wm-body-medium-line-height);
+  --wm-anchor-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-anchor-text-transform: none;
+  --wm-anchor-text-decoration: none;
+  --wm-anchor-color: var(--wm-color-primary);
+  --wm-anchor-color-hover: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-hover));
+  --wm-anchor-color-focus: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-focus));
+  --wm-anchor-color-active: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-active));
+  --wm-anchor-gap: var(--wm-space-2);
+  /*--Icon--*/
+  --wm-icon-gap: var(--wm-space-1);
+  /*--Grid Layout--*/
+  --wm-grid-layout-column-padding: var(--wm-space-2);
+  /*--Picture--*/
+  --wm-picture-radius-rounded: var(--wm-radius-xs);
+  --wm-picture-radius-circle: var(--wm-radius-circle);
+  --wm-picture-radius-thumbnail: var(--wm-radius-xs);
+  --wm-picture-thumbnail-padding: var(--wm-space-1);
+  --wm-picture-thumbnail-border-color: var(--wm-border-color);
+  --wm-picture-thumbnail-border-style: var(--wm-border-style);
+  --wm-picture-thumbnail-border-width: var(--wm-border-width);
+  --wm-picture-thumbnail-background: var(--wm-color-surface-container-low);
+  /*--Progress Bar--*/
+  --wm-progress-bar-background-inactive: var(--wm-color-surface-bright);
+  --wm-progress-bar-background-active: var(--wm-color-surface-tint);
+  --wm-progress-bar-radius: var(--wm-radius-lg);
+  --wm-progress-bar-height: var(--wm-space-2);
+  --wm-progress-bar-width: var(--wm-space-2);
+  --wm-progress-bar-striped: linear-gradient(45deg, var(--wm-color-white-active) 25%, transparent 25%, transparent 50%, var(--wm-color-white-active) 50%, var(--wm-color-white-active) 75%, transparent 75%, transparent);
+  --wm-progress-bar-striped-size: var(--wm-space-10) var(--wm-space-10);
+  --wm-progress-bar-margin: var(--wm-space-2) var(--wm-space-0);
+  --wm-progress-bar-stop-indicator-radius: var(--wm-radius-circle);
+  --wm-progress-bar-stop-indicator-height: var(--wm-space-2);
+  --wm-progress-bar-stop-indicator-width: var(--wm-space-2);
+  --wm-progress-bar-stop-indicator-background: var(--wm-color-surface-tint);
+  --wm-progress-bar-success-background-active: var(--wm-color-success);
+  --wm-progress-bar-success-stop-indicator-background: var(--wm-color-success);
+  --wm-progress-bar-success-background-inactive: var(--wm-color-success-hover);
+  --wm-progress-bar-info-background-active: var(--wm-color-info);
+  --wm-progress-bar-info-stop-indicator-background: var(--wm-color-info);
+  --wm-progress-bar-info-background-inactive: var(--wm-color-info-hover);
+  --wm-progress-bar-warning-background-active: var(--wm-color-warning);
+  --wm-progress-bar-warning-stop-indicator-background: var(--wm-color-warning);
+  --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-hover);
+  --wm-progress-bar-danger-background-active: var(--wm-color-error);
+  --wm-progress-bar-danger-stop-indicator-background: var(--wm-color-error);
+  --wm-progress-bar-danger-background-inactive: var(--wm-color-error-hover);
+  /*--Container--*/
+  --wm-container-outlined-border-color: var(--wm-color-outline-variant);
+  --wm-container-outlined-border-width: var(--wm-border-width);
+  --wm-container-outlined-border-style: var(--wm-border-style);
+  --wm-container-elevation-border-radius: var(--wm-radius-sm);
+  --wm-container-elevation-shadow: var(--wm-elevation-shadow-1);
+  /*--Message--*/
+  --wm-message-container-shadow: var(--wm-elevation-shadow-3);
+  --wm-message-container-border-radius: var(--wm-radius-xs);
+  --wm-message-container-border-width: var(--wm-border-width);
+  --wm-message-container-border-style: var(--wm-border-style);
+  --wm-message-container-padding: 14px var(--wm-space-4);
+  --wm-message-container-gap: var(--wm-space-3);
+  --wm-message-font-family: var(--wm-label-large-font-family);
+  --wm-message-font-weight: var(--wm-label-large-font-weight);
+  --wm-message-font-size: var(--wm-label-large-font-size);
+  --wm-message-line-height: var(--wm-label-large-line-height);
+  --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
+  --wm-message-container-background: var(--wm-color-primary);
+  --wm-message-container-color: var(--wm-color-on-primary);
+  --wm-message-container-border-color: var(--wm-color-primary);
+  /* Success message */
+  --wm-message-container-success-background: var(--wm-color-success);
+  --wm-message-container-success-color: var(--wm-color-on-success);
+  --wm-message-container-success-border-color: var(--wm-color-success);
+  /* info message */
+  --wm-message-container-info-background: var(--wm-color-info);
+  --wm-message-container-info-color: var(--wm-color-on-info);
+  --wm-message-container-info-border-color: var(--wm-color-info);
+  /* Warning message */
+  --wm-message-container-warning-background: var(--wm-color-warning);
+  --wm-message-container-warning-color: var(--wm-color-on-warning);
+  --wm-message-container-warning-border-color: var(--wm-color-warning);
+  /* Error message */
+  --wm-message-container-danger-background: var(--wm-color-error);
+  --wm-message-container-danger-color: var(--wm-color-on-error);
+  --wm-message-container-danger-border-color: var(--wm-color-error);
+  /* loading message */
+  --wm-message-container-loading-background: var(--wm-color-primary);
+  --wm-message-container-loading-color: var(--wm-color-on-primary);
+  --wm-message-container-loading-border-color: var(--wm-color-primary);
   /**--Page Layout--**/
   /*--app header--*/
   --wm-header-bg-color: var(--wm-color-secondary);
@@ -676,9 +787,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-size: 100%;
 }
 .wm-app {
+  font-family: var(--wm-body-medium-font-family);
   font-size: var(--wm-body-medium-font-size);
   font-weight: var(--wm-body-medium-font-weight);
-  font-family: var(--wm-body-medium-font-family);
+  line-height: var(--wm-body-medium-line-height);
+  letter-spacing: var(--wm-body-medium-letter-spacing);
   background: var(--wm-color-surface-container-lowest);
   color: var(--wm-color-on-background);
   text-transform: none;
@@ -4207,23 +4320,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.wm-app .fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
-}
-.wm-app .fa-2x {
-  font-size: 2em;
-}
-.wm-app .fa-3x {
-  font-size: 3em;
-}
-.wm-app .fa-4x {
-  font-size: 4em;
-}
-.wm-app .fa-5x {
-  font-size: 5em;
-}
 .wm-app .fa-fw {
   width: 1.28571429em;
 }
@@ -8900,8 +8996,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .note-dropdown {
   position: relative;
 }
-.wm-app .note-editor .note-editing-area p,
-.wm-app p {
+.wm-app .note-editor .note-editing-area p {
   margin: 0 0 10px;
 }
 .wm-app [class*=" note-icon-"]:before,
@@ -10077,11 +10172,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .note-handle .note-control-selection > div {
   position: absolute;
 }
-.wm-app .app-icon,
-.wm-app .app-icon-wrapper {
-  position: relative;
-  display: inline-block;
-}
 .wm-app .note-handle .note-control-selection .note-control-selection-bg {
   width: 100%;
   height: 100%;
@@ -10197,30 +10287,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .ng-hide {
   display: none !important;
 }
-.wm-app .app-icon {
-  padding-right: 0.2em;
-}
-.wm-app .app-icon-wrapper {
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-}
-.wm-app .app-icon-wrapper[icon-position="right"] {
-  direction: rtl;
-}
-.wm-app .app-icon-wrapper[icon-position="right"] .app-label {
-  direction: ltr;
-}
-.wm-app .app-icon-wrapper .app-icon {
-  vertical-align: middle;
-}
-.wm-app .app-icon-wrapper .app-label {
-  vertical-align: middle;
-  margin: 0;
-  text-overflow: ellipsis;
-  max-width: 92%;
-  overflow: hidden;
-}
 .wm-app .app-partial-info {
   text-align: center;
 }
@@ -11348,14 +11414,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-search.dropdown-menu .list-group-header h4 .header-action i {
   padding: 0 10px;
 }
-.wm-app .app-anchor,
-.wm-app .app-checkbox,
-.wm-app .app-checkboxset,
-.wm-app .app-currency,
-.wm-app .app-html-container,
-.wm-app .app-radio,
-.wm-app .app-radioset,
-.wm-app .app-textarea,
 .wm-app .app-timeinput {
   position: relative;
   max-width: 100%;
@@ -11563,36 +11621,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: 30px;
   padding-right: 5px;
 }
-.wm-app .app-button-group .app-button.btn-default.focus,
-.wm-app .app-button-group .app-button.btn-default.selected,
-.wm-app .app-button-group .app-button.btn-default:focus {
-  background-color: #e6e6e6;
-}
-.wm-app .app-button-group .app-button.btn-primary.focus,
-.wm-app .app-button-group .app-button.btn-primary.selected,
-.wm-app .app-button-group .app-button.btn-primary:focus {
-  background-color: #116aff;
-}
-.wm-app .app-button-group .app-button.btn-success.focus,
-.wm-app .app-button-group .app-button.btn-success.selected,
-.wm-app .app-button-group .app-button.btn-success:focus {
-  background-color: #3d8b40;
-}
-.wm-app .app-button-group .app-button.btn-info.focus,
-.wm-app .app-button-group .app-button.btn-info.selected,
-.wm-app .app-button-group .app-button.btn-info:focus {
-  background-color: #0286c2;
-}
-.wm-app .app-button-group .app-button.btn-warning.focus,
-.wm-app .app-button-group .app-button.btn-warning.selected,
-.wm-app .app-button-group .app-button.btn-warning:focus {
-  background-color: #cc8f00;
-}
-.wm-app .app-button-group .app-button.btn-danger.focus,
-.wm-app .app-button-group .app-button.btn-danger.selected,
-.wm-app .app-button-group .app-button.btn-danger:focus {
-  background-color: #ea1c0d;
-}
 .wm-app .app-switch {
   position: relative;
   display: inline-block;
@@ -11788,205 +11816,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: 0;
   min-height: 35px;
 }
-.wm-app .app-calendar .well.well-sm .bs-datepicker-body thead tr th:first-child,
-.wm-app .app-calendar .well.well-sm tr:nth-child(2) th:first-child,
-.wm-app .app-date .bs-datepicker-body thead tr th:first-child,
-.wm-app .app-date tr:nth-child(2) th:first-child {
-  padding-left: 20px;
-}
-.wm-app .app-calendar .well.well-sm .bs-datepicker-body thead tr th:last-child,
-.wm-app .app-calendar .well.well-sm tr:nth-child(2) th:last-child,
-.wm-app .app-date .bs-datepicker-body thead tr th:last-child,
-.wm-app .app-date tr:nth-child(2) th:last-child {
-  padding-right: 20px;
-}
-.wm-app .app-calendar .well.well-sm tr td:first-child,
-.wm-app .app-date tr td:first-child {
-  padding-left: 10px;
-}
-.wm-app .app-calendar .well.well-sm tr td:last-child,
-.wm-app .app-date tr td:last-child {
-  padding-right: 10px;
-}
-.wm-app bs-datepicker-container,
-.wm-app bs-daterangepicker-container {
-  z-index: 1080;
-}
-.wm-app .bs-datepicker button:active,
-.wm-app .bs-datepicker button:focus,
-.wm-app .bs-datepicker button:hover,
-.wm-app .bs-datepicker input:active,
-.wm-app .bs-datepicker input:focus,
-.wm-app .bs-datepicker input:hover {
-  outline: 0;
-}
-.wm-app .bs-datepicker .is-other-month {
-  color: rgba(0, 0, 0, 0.25);
-}
-.wm-app .bs-datepicker-head bs-datepicker-navigation-view {
-  height: 50px;
-  overflow: hidden;
-  display: block;
-  border-radius: 0;
-  text-align: center;
-}
-.wm-app .bs-datepicker-head button {
-  border: 0;
-  background: 0 0;
-  height: 100%;
-  padding: 10px;
-}
-.wm-app .bs-datepicker-head button:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.wm-app .bs-datepicker-head .next,
-.wm-app .bs-datepicker-head .previous {
-  padding: 0 25px;
-  vertical-align: middle;
-}
-.wm-app .bs-datepicker-head .next span,
-.wm-app .bs-datepicker-head .previous span {
-  font-size: 25px;
-}
-.wm-app .bs-datepicker-head .next {
-  float: right;
-}
-.wm-app .bs-datepicker-head .previous {
-  float: left;
-}
-.wm-app .bs-datepicker-head .current {
-  padding: 0 5px;
-  height: inherit;
-  vertical-align: middle;
-}
-.wm-app .bs-datepicker-body {
-  background-color: #fff;
-  padding: 0 5px;
-  border-radius: 0 0 3px 3px;
-  min-height: 220px;
-  min-width: 230px;
-  border: 1px solid #e9edf0;
-}
-.wm-app .bs-datepicker-body table td span:before,
-.wm-app .bs-datepicker-body table td:before {
-  content: "";
-  display: block;
-  top: 6px;
-  bottom: 6px;
-  left: -2px;
-  right: -2px;
-  box-sizing: content-box;
-  background: 0 0;
-}
-.wm-app .bs-datepicker-body .days.weeks {
-  position: relative;
-  z-index: 1;
-}
-.wm-app .bs-datepicker-body table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-.wm-app .bs-datepicker-body table th {
-  padding: 8px;
-}
-.wm-app .bs-datepicker-body table td {
-  color: #54708b;
-  text-align: center;
-  position: relative;
-  padding: 0;
-}
-.wm-app .bs-datepicker-body table td:before {
-  position: absolute;
-  z-index: -1;
-}
-.wm-app .bs-datepicker-body table td span {
-  display: block;
-  margin: 0 auto;
-  font-size: 13px;
-  position: relative;
-  z-index: 1;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-.wm-app .bs-datepicker-body table td span:before {
-  position: absolute;
-  z-index: -1;
-}
-.wm-app .bs-datepicker-body table td span.selected,
-.wm-app .bs-datepicker-body table td span.selected span {
-  color: #fff;
-}
-.wm-app .bs-datepicker-body table td span:focus {
-  background-color: #bbb;
-  color: #333;
-}
-.wm-app .bs-datepicker-body table td span.disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-.wm-app .bs-datepicker-body table td span.disabled:focus {
-  color: #fff;
-}
-.wm-app .bs-datepicker-body table td span.is-active-other-month,
-.wm-app .bs-datepicker-body table td span.is-highlighted {
-  cursor: pointer;
-}
-.wm-app .bs-datepicker-body table:not(.weeks) tr td:first-child:before {
-  border-radius: 3px 0 0 3px;
-}
-.wm-app .bs-datepicker-body table.days span {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 50%;
-}
-.wm-app .bs-datepicker-body table.months td {
-  height: 52px;
-}
-.wm-app .bs-datepicker-body table.months td span {
-  padding: 6px;
-}
-.wm-app .bs-datepicker-body table.years td span {
-  width: 46px;
-  height: 46px;
-  line-height: 45px;
-  margin: 0 auto;
-}
-.wm-app .bs-datepicker-body table.years tr:not(:last-child) td span {
-  margin-bottom: 8px;
-}
-.wm-app .app-date .bs-datepicker-head {
-  background-color: #1d96f4;
-  color: #fff;
-}
-.wm-app .app-date .bs-datepicker-body table td.disabled span,
-.wm-app .app-date .bs-datepicker-body table td.week span {
-  cursor: initial;
-}
-.wm-app .app-date .bs-datepicker-body table td.disabled span:focus,
-.wm-app .app-date .bs-datepicker-body table td.disabled span:hover,
-.wm-app .app-date .bs-datepicker-body table td.week span:focus,
-.wm-app .app-date .bs-datepicker-body table td.week span:hover {
-  background-color: transparent;
-  color: inherit;
-  cursor: initial;
-}
-.wm-app .app-date .bs-datepicker-body table td span.selected,
-.wm-app .app-date .bs-datepicker-body table td span[class*="select-"]::after,
-.wm-app .app-date .bs-datepicker-body table td.selected span,
-.wm-app .app-date .bs-datepicker-body table td[class*="select-"] span::after {
-  background-color: #1d96f4;
-}
-.wm-app .bs-datepicker-btns button:active,
-.wm-app .bs-datepicker-btns button:focus,
-.wm-app .bs-datepicker-btns button:hover,
-.wm-app .bs-datepicker-predefined-btns button:active,
-.wm-app .bs-datepicker-predefined-btns button:focus,
-.wm-app .bs-datepicker-predefined-btns button:hover {
-  outline: 0;
-}
 .wm-app .app-required-input {
   color: red;
 }
@@ -12483,10 +12312,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   left: 0;
   width: 100%;
 }
-.wm-app .app-iframe,
-.wm-app .app-message {
-  position: relative;
-}
 .wm-app .app-livelist:not(.On-Demand):not(.Scroll).None .loading-data-msg {
   bottom: 0;
 }
@@ -12510,67 +12335,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-livelist.On-Demand .panel-footer {
   padding: 0;
 }
-.wm-app .app-iframe iframe {
-  width: 100%;
-  height: 100%;
-}
-.wm-app .app-message.alert {
-  word-break: break-word;
-}
-.wm-app .app-message.alert div {
-  padding: 0 5px;
-  box-sizing: border-box;
-  vertical-align: top;
-  display: inline-block;
-}
-.wm-app .app-message.alert div:nth-child(1),
-.wm-app .app-message.alert div:nth-child(3) {
-  width: 20px;
-}
-.wm-app .app-message.alert div:nth-child(2) {
-  ignore: a;
-  width: calc(100% - 60px);
-}
-.wm-app .app-message .icon {
-  display: inline-block;
-  font-size: 11px;
-  margin-right: 5px;
-}
-.wm-app .app-message span {
-  vertical-align: text-top;
-}
-.wm-app .app-message .close {
-  position: absolute;
-  top: 1px;
-  right: 4px;
-}
-.wm-app .app-picture {
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-  position: relative;
-  cursor: default;
-  width: auto;
-  height: auto;
-}
-.wm-app .app-video {
-  position: relative;
-  height: 150px;
-  width: 300px;
-  display: inline-block;
-}
-.wm-app .app-video > video {
-  height: 100%;
-  width: 100%;
-}
-.wm-app .app-audio {
-  position: relative;
-  display: inline-block;
-  width: 300px;
-}
-.wm-app .app-audio > audio {
-  width: 100%;
-}
 .wm-app .app-prefab {
   min-height: 1em;
   position: relative;
@@ -13353,13 +13117,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-accordion .app-accordion-panel > .panel-heading > .panel-actions .label {
   margin-right: 0.25em;
 }
-.wm-app .app-elevated-container {
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
-.wm-app .app-outlined-container {
-  border: 2px solid #ccc;
-}
 .wm-app .app-tabs {
   position: relative;
   width: 100%;
@@ -13919,59 +13676,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-panel .panel-heading .panel-actions .panel-action i {
   font-style: normal;
 }
-.wm-app .app-progress .progress-bar .app-progress-label[data-caption-placement="hidden"] {
-  display: none;
-}
-.wm-app .app-progress .progress-bar .app-progress-label {
-  height: 100%;
-  display: inline-block;
-  vertical-align: middle;
-}
-.wm-app .app-progress .progress-bar .app-progress-label::before {
-  content: "";
-  height: 100%;
-  display: inline-block;
-  vertical-align: middle;
-}
-.wm-app .app-progress.circle.progress {
-  width: 100%;
-  background-color: transparent;
-  box-shadow: none;
-}
-.wm-app .app-progress.circle.progress > svg path:first-of-type {
-  stroke: #ddd;
-}
-.wm-app .app-progress.circle.progress > svg path:last-of-type {
-  stroke: #4489ff;
-  stroke-linecap: round;
-}
-.wm-app .app-progress.circle.progress .progress-text {
-  font-family: Helvetica, sans-serif;
-  font-size: 1.5rem;
-  color: #464646;
-}
-.wm-app .app-progress.circle.progress .progress-text.show-percent:after {
-  content: " %";
-  font-size: 0.7em;
-}
-.wm-app .app-progress.circle.progress circle-progress > svg circle:last-of-type {
-  stroke: #ddd;
-}
-.wm-app .app-progress.circle.progress circle-progress > svg path:first-of-type {
-  stroke: #4489ff;
-}
-.wm-app .app-progress.circle.progress.progress-circle-success svg path:last-of-type {
-  stroke: #4caf50;
-}
-.wm-app .app-progress.circle.progress.progress-circle-warning svg path:last-of-type {
-  stroke: #ffb300;
-}
-.wm-app .app-progress.circle.progress.progress-circle-info svg path:last-of-type {
-  stroke: #03a9f4;
-}
-.wm-app .app-progress.circle.progress.progress-circle-danger svg path:last-of-type {
-  stroke: #f44336;
-}
 .wm-app .app-global-progress-bar.modal {
   background: rgba(0, 0, 0, 0.5);
   display: table;
@@ -14013,14 +13717,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   z-index: 1060 !important;
   display: initial !important;
 }
-.wm-app .bs-datepicker-buttons,
-.wm-app .btn-today-wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  flex-grow: 1;
-  padding: 2px;
-  background-color: #fff;
-}
 .wm-app .app-datetime .form-group input {
   min-width: 45px;
 }
@@ -16776,9 +16472,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   width: 100%;
   height: 100%;
 }
-.wm-app .app-container {
-  position: relative;
-}
 .wm-app > app-root {
   width: inherit;
 }
@@ -17021,15 +16714,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   padding: 0.5rem 1.25rem;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-.wm-app .app-card.card .app-card-footer .btn-group {
-  box-shadow: none;
-}
-.wm-app .app-card.card .app-card-footer .btn-group .btn {
-  color: inherit;
-}
-.wm-app .app-card.card .app-card-footer .btn-group .btn:hover {
-  color: initial;
-}
 .wm-app .app-card.card .card-title {
   margin-bottom: 0.75rem;
   font-size: 1.2em;
@@ -17166,10 +16850,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app.wm-mobile-app:not(.domcontent) {
   overflow: hidden;
 }
-.wm-app .app-footer .app-grid-layout .app-grid-row .app-grid-column,
-.wm-app .app-header .app-grid-layout .app-grid-row .app-grid-column {
-  overflow: inherit;
-}
 .wm-app #wm-app-content,
 .wm-app .app-included-page,
 .wm-app .app-page,
@@ -17372,26 +17052,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   padding: 10px 15px;
   border: none;
 }
-.wm-app .app-grid-layout {
-  width: 100%;
-  position: relative;
-  empty-cells: show;
-}
-.wm-app .app-grid-layout.standard .app-grid-column {
-  padding: 0 1em;
-}
-.wm-app .app-grid-row {
-  width: 100%;
-  position: relative;
-}
-.wm-app .app-grid-column {
-  padding: 0;
-  position: relative;
-  vertical-align: top;
-  height: 100%;
-  overflow: inherit;
-  border-width: 0;
-}
 .wm-app .on-demand-datagrid {
   border-top: 1px solid #f2f3f3 !important;
 }
@@ -17592,9 +17252,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   float: right;
 }
 .wm-app .app-composite-widget.caption-right .app-checkboxset .app-checkbox,
-.wm-app .app-composite-widget.caption-right .app-radioset .app-radio,
-.wm-app .app-page-content .btn-group .btn,
-.wm-app .app-page-content .btn-group-vertical .btn {
+.wm-app .app-composite-widget.caption-right .app-radioset .app-radio {
   float: none;
 }
 .wm-app .app-composite-widget.caption-right .app-checkboxset .app-checkbox label,
@@ -17973,10 +17631,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-page-content.login {
   padding: 0;
 }
-.wm-app .app-page-content .btn-group,
-.wm-app .app-page-content .btn-group-vertical {
-  margin: 0;
-}
 .wm-app .rtl .app-grid-layout .app-grid-row .app-grid-column,
 .wm-app .rtl .app-top-nav [class^="col-"],
 .wm-app .rtl .form-group .control-label,
@@ -18133,27 +17787,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .radio + .list-group-item.radio {
   margin-top: 0;
 }
-.wm-app .p {
-  width: 100%;
-  word-wrap: break-word;
-}
-.wm-app p.app-label {
-  display: inline-block;
-  margin-bottom: 5px;
-  max-width: 100%;
-}
-.wm-app p.p.app-label {
-  display: block;
-  width: 100%;
-}
-.wm-app .h1,
-.wm-app .h2,
-.wm-app .h3,
-.wm-app .h4,
-.wm-app .h5,
-.wm-app .h6 {
-  word-wrap: break-word;
-}
 .wm-app .inline {
   display: inline;
 }
@@ -18329,99 +17962,49 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   left: 0;
   right: auto;
 }
-.wm-app label,
-.wm-app .app-label {
-  margin: 0;
-}
-.wm-app p {
-  margin: 0;
-}
-.wm-app h1,
-.wm-app .h1,
-.wm-app h2,
-.wm-app .h2,
-.wm-app h3,
-.wm-app .h3,
-.wm-app h4,
-.wm-app .h4,
-.wm-app h5,
-.wm-app .h5,
-.wm-app h6,
-.wm-app .h6 {
-  margin: 0;
-  padding: 0;
-  color: var(--wm-heading-color);
-}
-.wm-app .h1,
-.wm-app h1 {
-  font-family: var(--wm-h1-font-family);
-  font-size: var(--wm-h1-font-size);
-  font-weight: var(--wm-h1-font-weight);
-  line-height: var(--wm-h1-line-height);
-  letter-spacing: var(--wm-h1-letter-spacing);
-}
-.wm-app .h2,
-.wm-app h2 {
-  font-family: var(--wm-h2-font-family);
-  font-size: var(--wm-h2-font-size);
-  font-weight: var(--wm-h2-font-weight);
-  line-height: var(--wm-h2-line-height);
-  letter-spacing: var(--wm-h2-letter-spacing);
+.wm-app a,
+.wm-app .app-anchor {
+  position: relative;
+  font-size: var(--wm-anchor-font-size);
+  font-family: var(--wm-anchor-font-family);
+  font-weight: var(--wm-anchor-font-weight);
+  line-height: var(--wm-anchor-line-height);
+  letter-spacing: var(--wm-anchor-letter-spacing);
+  text-transform: var(--wm-anchor-text-transform);
+  text-decoration: var(--wm-anchor-text-decoration);
+  color: var(--wm-anchor-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wm-anchor-gap);
+  cursor: pointer;
 }
-.wm-app .h3,
-.wm-app h3 {
-  font-family: var(--wm-h3-font-family);
-  font-size: var(--wm-h3-font-size);
-  font-weight: var(--wm-h3-font-weight);
-  line-height: var(--wm-h3-line-height);
-  letter-spacing: var(--wm-h3-letter-spacing);
+.wm-app a:hover,
+.wm-app .app-anchor:hover {
+  color: var(--wm-anchor-color-hover);
 }
-.wm-app .h4,
-.wm-app h4 {
-  font-family: var(--wm-h4-font-family);
-  font-size: var(--wm-h4-font-size);
-  font-weight: var(--wm-h4-font-weight);
-  line-height: var(--wm-h4-line-height);
-  letter-spacing: var(--wm-h4-letter-spacing);
+.wm-app a:focus,
+.wm-app .app-anchor:focus {
+  color: var(--wm-anchor-color-focus);
 }
-.wm-app .h5,
-.wm-app h5 {
-  font-family: var(--wm-h5-font-family);
-  font-size: var(--wm-h5-font-size);
-  font-weight: var(--wm-h5-font-weight);
-  line-height: var(--wm-h5-line-height);
-  letter-spacing: var(--wm-h5-letter-spacing);
+.wm-app a:active,
+.wm-app .app-anchor:active {
+  color: var(--wm-anchor-color-active);
 }
-.wm-app .h6,
-.wm-app h6 {
-  font-family: var(--wm-h6-font-family);
-  font-size: var(--wm-h6-font-size);
-  font-weight: var(--wm-h6-font-weight);
-  line-height: var(--wm-h6-line-height);
-  letter-spacing: var(--wm-h6-letter-spacing);
+.wm-app a .anchor-caption:empty,
+.wm-app .app-anchor .anchor-caption:empty {
+  display: none;
 }
-.wm-app .app-icon,
-.wm-app .app-icon-wrapper {
+.wm-app .app-audio {
   position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-.wm-app a {
-  color: var(--link-color);
-  text-decoration: none;
-}
-.wm-app a.text-muted.app-anchor {
-  color: var(--wm-text-muted-color);
+  display: inline-block;
+  width: 300px;
 }
-.wm-app a.text-muted.app-anchor:hover,
-.wm-app a.text-muted.app-anchor:focus {
-  color: color-mix(in srgb, var(--link-color), #000000 3%);
+.wm-app .app-audio > audio {
+  width: 100%;
 }
-.wm-app a:hover,
-.wm-app a:focus {
-  color: color-mix(in srgb, var(--link-color), #000000 3%);
-  text-decoration: none;
+.wm-app audio {
+  display: inline-block;
 }
 .wm-app .btn {
   font-size: var(--wm-btn-font-size);
@@ -18441,7 +18024,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--wm-space-2);
+  gap: var(--wm-btn-gap);
   cursor: pointer;
 }
 .wm-app .btn + .btn {
@@ -18478,6 +18061,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-padding: var(--wm-btn-xs-padding);
   --wm-btn-min-width: var(--wm-btn-xs-min-width);
   --wm-btn-height: var(--wm-btn-xs-height);
+  --wm-btn-gap: var(--wm-btn-xs-gap);
 }
 .wm-app .btn-sm {
   --wm-btn-font-size: var(--wm-btn-sm-font-size);
@@ -18489,6 +18073,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-padding: var(--wm-btn-sm-padding);
   --wm-btn-min-width: var(--wm-btn-sm-min-width);
   --wm-btn-height: var(--wm-btn-sm-height);
+  --wm-btn-gap: var(--wm-btn-sm-gap);
 }
 .wm-app .btn-lg {
   --wm-btn-font-size: var(--wm-btn-lg-font-size);
@@ -18500,6 +18085,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-padding: var(--wm-btn-lg-padding);
   --wm-btn-min-width: var(--wm-btn-lg-min-width);
   --wm-btn-height: var(--wm-btn-lg-height);
+  --wm-btn-gap: var(--wm-btn-lg-gap);
 }
 .wm-app .btn-block {
   width: 100%;
@@ -18630,14 +18216,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-border-color: var(--wm-btn-danger-outlined-border-color);
   --wm-btn-state-layer-color: var(--wm-btn-danger-outlined-state-layer-color);
 }
-.wm-app .btn.btn-text {
+.wm-app .btn-text {
   background: none !important;
   border: none !important;
   --wm-btn-state-layer-color: var(--wm-btn-background);
 }
-.wm-app .btn.btn-text .btn-caption {
+.wm-app .btn-text .btn-caption {
   color: var(--wm-btn-background);
 }
+.wm-app .btn-elevated {
+  box-shadow: var(--wm-btn-elevated);
+}
+.wm-app .btn-elevated:hover {
+  box-shadow: var(--wm-btn-elevated-hover);
+}
+.wm-app .btn-elevated:focus {
+  box-shadow: var(--wm-btn-elevated-focus);
+}
+.wm-app .btn-elevated:active {
+  box-shadow: var(--wm-btn-elevated-active);
+}
 .wm-app .btn.disabled,
 .wm-app .btn[disabled] {
   opacity: 1;
@@ -18671,6 +18269,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .btn[disabled]::before {
   display: none;
 }
+.wm-app .app-checkbox {
+  position: relative;
+}
 .wm-app .app-checkbox.checkbox {
   display: inline-block;
 }
@@ -18798,6 +18399,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-checkboxset {
   padding: 0;
   margin: 0;
+  position: relative;
 }
 .wm-app .app-checkboxset.list-group.inline {
   display: flex;
@@ -18813,10 +18415,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-checkboxset.list-group.inline > li + li {
   margin: 0;
 }
+.wm-app .app-container {
+  position: relative;
+}
+.wm-app .app-outlined-container {
+  border: var(--wm-container-outlined-border-width) var(--wm-container-outlined-border-style) var(--wm-container-outlined-border-color);
+}
+.wm-app .app-elevation-container {
+  border-radius: var(--wm-container-elevation-border-radius);
+  box-shadow: var(--wm-container-elevation-shadow);
+}
+.wm-app .app-currency {
+  position: relative;
+}
 .wm-app .app-composite-widget {
-  display: flex;
-  flex-direction: column;
   position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .wm-app .app-composite-widget:has(.form-control:not(.ng-touched.ng-invalid):focus) .control-label {
   color: var(--wm-color-primary);
@@ -18955,25 +18571,249 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-grid-layout {
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
 }
 .wm-app .app-grid-layout > .app-grid-row {
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
 }
 .wm-app .app-grid-layout > .app-grid-row > .app-grid-column {
-  padding: 8px;
+  position: relative;
+  height: auto;
+  overflow: inherit;
+  border-width: 0;
+  padding: var(--wm-grid-layout-column-padding);
 }
-.wm-app .app-nav.nav {
+.wm-app .app-html-container {
+  position: relative;
+  max-width: 100%;
+}
+.wm-app .app-icon,
+.wm-app .app-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   padding: 0;
+  gap: var(--wm-icon-gap);
+}
+.wm-app .app-icon-wrapper {
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+}
+.wm-app .app-icon-wrapper .app-label {
   margin: 0;
-  list-style: none;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+.wm-app .app-icon-wrapper[icon-position="right"] {
+  flex-direction: row-reverse;
+}
+.wm-app .app-icon {
+  font-size: var(--wm-icon-size);
+  min-width: var(--wm-icon-size);
+  width: var(--wm-icon-size);
+  height: var(--wm-icon-size);
+}
+.wm-app .fa-xs {
+  font-size: var(--wm-icon-size-xs);
+  min-width: var(--wm-icon-size-xs);
+  width: var(--wm-icon-size-xs);
+  height: var(--wm-icon-size-xs);
+}
+.wm-app .fa-sm {
+  font-size: var(--wm-icon-size-sm);
+  min-width: var(--wm-icon-size-sm);
+  width: var(--wm-icon-size-sm);
+  height: var(--wm-icon-size-sm);
+}
+.wm-app .fa-lg {
+  font-size: var(--wm-icon-size-lg);
+  min-width: var(--wm-icon-size-lg);
+  width: var(--wm-icon-size-lg);
+  height: var(--wm-icon-size-lg);
+}
+.wm-app .fa-2x {
+  font-size: var(--wm-icon-size-2x);
+  min-width: var(--wm-icon-size-2x);
+  width: var(--wm-icon-size-2x);
+  height: var(--wm-icon-size-2x);
+}
+.wm-app .fa-3x {
+  font-size: var(--wm-icon-size-3x);
+  min-width: var(--wm-icon-size-3x);
+  width: var(--wm-icon-size-3x);
+  height: var(--wm-icon-size-3x);
+}
+.wm-app .fa-4x {
+  font-size: var(--wm-icon-size-4x);
+  min-width: var(--wm-icon-size-4x);
+  width: var(--wm-icon-size-4x);
+  height: var(--wm-icon-size-4x);
+}
+.wm-app .fa-5x {
+  font-size: var(--wm-icon-size-5x);
+  min-width: var(--wm-icon-size-5x);
+  width: var(--wm-icon-size-5x);
+  height: var(--wm-icon-size-5x);
+}
+.wm-app .app-iframe {
   position: relative;
-  min-height: 20px;
-  display: flex;
-  flex-wrap: wrap;
 }
-.wm-app .app-nav.nav > li > a {
+.wm-app .app-iframe iframe {
+  width: 100%;
+  height: 100%;
+}
+.wm-app label,
+.wm-app .app-label {
+  margin: 0;
+  display: inline-block;
+  width: auto;
+}
+.wm-app p,
+.wm-app .app-label.p,
+.wm-app label.p {
+  margin: 0;
+  padding: 0;
+  word-wrap: break-word;
+  display: block;
+}
+.wm-app h1,
+.wm-app .h1,
+.wm-app h2,
+.wm-app .h2,
+.wm-app h3,
+.wm-app .h3,
+.wm-app h4,
+.wm-app .h4,
+.wm-app h5,
+.wm-app .h5,
+.wm-app h6,
+.wm-app .h6 {
+  word-wrap: break-word;
+  margin: 0;
+  padding: 0;
+  color: var(--wm-headings-color);
   display: block;
 }
+.wm-app .h1,
+.wm-app h1 {
+  font-family: var(--wm-h1-font-family);
+  font-size: var(--wm-h1-font-size);
+  font-weight: var(--wm-h1-font-weight);
+  line-height: var(--wm-h1-line-height);
+  letter-spacing: var(--wm-h1-letter-spacing);
+}
+.wm-app .h2,
+.wm-app h2 {
+  font-family: var(--wm-h2-font-family);
+  font-size: var(--wm-h2-font-size);
+  font-weight: var(--wm-h2-font-weight);
+  line-height: var(--wm-h2-line-height);
+  letter-spacing: var(--wm-h2-letter-spacing);
+}
+.wm-app .h3,
+.wm-app h3 {
+  font-family: var(--wm-h3-font-family);
+  font-size: var(--wm-h3-font-size);
+  font-weight: var(--wm-h3-font-weight);
+  line-height: var(--wm-h3-line-height);
+  letter-spacing: var(--wm-h3-letter-spacing);
+}
+.wm-app .h4,
+.wm-app h4 {
+  font-family: var(--wm-h4-font-family);
+  font-size: var(--wm-h4-font-size);
+  font-weight: var(--wm-h4-font-weight);
+  line-height: var(--wm-h4-line-height);
+  letter-spacing: var(--wm-h4-letter-spacing);
+}
+.wm-app .h5,
+.wm-app h5 {
+  font-family: var(--wm-h5-font-family);
+  font-size: var(--wm-h5-font-size);
+  font-weight: var(--wm-h5-font-weight);
+  line-height: var(--wm-h5-line-height);
+  letter-spacing: var(--wm-h5-letter-spacing);
+}
+.wm-app .h6,
+.wm-app h6 {
+  font-family: var(--wm-h6-font-family);
+  font-size: var(--wm-h6-font-size);
+  font-weight: var(--wm-h6-font-weight);
+  line-height: var(--wm-h6-line-height);
+  letter-spacing: var(--wm-h6-letter-spacing);
+}
+.wm-app .app-message {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--wm-message-container-gap);
+  padding: var(--wm-message-container-padding);
+  border: var(--wm-message-container-border-width) var(--wm-message-container-border-style) var(--wm-message-container-border-color);
+  border-radius: var(--wm-message-container-border-radius);
+  background: var(--wm-message-container-background);
+  color: var(--wm-message-container-color);
+  box-shadow: var(--wm-message-container-shadow);
+  font-family: var(--wm-message-font-family);
+  font-weight: var(--wm-message-font-weight);
+  font-size: var(--wm-message-font-size);
+  line-height: var(--wm-message-line-height);
+  letter-spacing: var(--wm-message-letter-spacing);
+}
+.wm-app .app-message .icon {
+  margin: 0;
+  font-size: 18px;
+}
+.wm-app .app-message > span {
+  flex: 1;
+}
+.wm-app .app-message .btn-transparent.close {
+  color: inherit;
+  opacity: 1;
+}
+.wm-app .app-message .btn-transparent.close span {
+  display: none;
+}
+.wm-app .app-message .btn-transparent.close:before {
+  content: "\f1e2";
+  font-family: wavicon;
+  font-size: var(--wm-icon-size-sm);
+  min-width: var(--wm-icon-size-sm);
+  height: var(--wm-icon-size-sm);
+}
+.wm-app .app-message.alert-success {
+  --wm-message-container-color: var(--wm-message-container-success-color);
+  --wm-message-container-background: var(--wm-message-container-success-background);
+  --wm-message-container-border-color: var(--wm-message-container-success-border-color);
+}
+.wm-app .app-message.alert-info {
+  --wm-message-container-color: var(--wm-message-container-info-color);
+  --wm-message-container-background: var(--wm-message-container-info-background);
+  --wm-message-container-border-color: var(--wm-message-container-info-border-color);
+}
+.wm-app .app-message.alert-warning {
+  --wm-message-container-color: var(--wm-message-container-warning-color);
+  --wm-message-container-background: var(--wm-message-container-warning-background);
+  --wm-message-container-border-color: var(--wm-message-container-warning-border-color);
+}
+.wm-app .app-message.alert-danger {
+  --wm-message-container-color: var(--wm-message-container-danger-color);
+  --wm-message-container-background: var(--wm-message-container-danger-background);
+  --wm-message-container-border-color: var(--wm-message-container-danger-border-color);
+}
+.wm-app .app-message.alert-loading {
+  --wm-message-container-color: var(--wm-message-container-loading-color);
+  --wm-message-container-background: var(--wm-message-container-loading-background);
+  --wm-message-container-border-color: var(--wm-message-container-loading-border-color);
+}
 .wm-app .app-navbar {
   position: relative;
   border: none;
@@ -19004,6 +18844,18 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
     display: none;
   }
 }
+.wm-app .app-nav.nav {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+  min-height: 20px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wm-app .app-nav.nav > li > a {
+  display: block;
+}
 .wm-app .app-page {
   display: flex;
   flex-direction: column;
@@ -20493,6 +20345,122 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-footer .app-nav.nav-pills li + li {
   margin-left: var(--wm-space-8);
 }
+.wm-app .app-picture {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  cursor: default;
+}
+.wm-app .app-picture.img-rounded {
+  border-radius: var(--wm-picture-radius-rounded);
+}
+.wm-app .app-picture.img-circle {
+  border-radius: var(--wm-picture-radius-circle);
+}
+.wm-app .app-picture.img-thumbnail {
+  padding: var(--wm-picture-thumbnail-padding);
+  background: var(--wm-picture-thumbnail-background);
+  border: var(--wm-picture-thumbnail-border-width) var(--wm-picture-thumbnail-border-style) var(--wm-picture-thumbnail-border-color);
+  border-radius: var(--wm-picture-radius-thumbnail);
+  transition: all 0.2s ease-in-out;
+}
+.wm-app .app-progress {
+  position: relative;
+  height: var(--wm-progress-bar-height);
+  background: var(--wm-progress-bar-background-inactive);
+  border-radius: var(--wm-progress-bar-radius);
+  margin: var(--wm-progress-bar-margin);
+  transition: width 0.6s ease;
+}
+.wm-app .app-progress:before {
+  content: "";
+  position: absolute;
+  right: 0px;
+  height: var(--wm-progress-bar-stop-indicator-height);
+  width: var(--wm-progress-bar-stop-indicator-width);
+  border-radius: var(--wm-progress-bar-stop-indicator-radius);
+  background: var(--wm-progress-bar-stop-indicator-background);
+}
+.wm-app .app-progress .progress-bar {
+  position: relative;
+  height: 100%;
+  background: var(--wm-progress-bar-background-active);
+  border-top-left-radius: var(--wm-progress-bar-radius);
+  border-bottom-left-radius: var(--wm-progress-bar-radius);
+  transition: width 0.6s ease;
+}
+.wm-app .app-progress .progress-bar[aria-valuenow="100"] {
+  border-radius: var(--wm-progress-bar-radius);
+}
+.wm-app .app-progress .progress-bar .app-progress-label[data-caption-placement=hidden] {
+  display: none;
+}
+.wm-app .app-progress:has(.progress-bar-success) {
+  --wm-progress-bar-background-inactive: var(--wm-progress-bar-success-background-inactive);
+}
+.wm-app .app-progress:has(.progress-bar-success):before {
+  --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-success-stop-indicator-background);
+}
+.wm-app .app-progress > .progress-bar-success {
+  --wm-progress-bar-background-active: var(--wm-progress-bar-success-background-active);
+}
+.wm-app .app-progress:has(.progress-bar-info) {
+  --wm-progress-bar-background-inactive: var(--wm-progress-bar-info-background-inactive);
+}
+.wm-app .app-progress:has(.progress-bar-info):before {
+  --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-info-stop-indicator-background);
+}
+.wm-app .app-progress > .progress-bar-info {
+  --wm-progress-bar-background-active: var(--wm-progress-bar-info-background-active);
+}
+.wm-app .app-progress:has(.progress-bar-warning) {
+  --wm-progress-bar-background-inactive: var(--wm-progress-bar-warning-background-inactive);
+}
+.wm-app .app-progress:has(.progress-bar-warning):before {
+  --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-warning-stop-indicator-background);
+}
+.wm-app .app-progress > .progress-bar-warning {
+  --wm-progress-bar-background-active: var(--wm-progress-bar-warning-background-active);
+}
+.wm-app .app-progress:has(.progress-bar-danger) {
+  --wm-progress-bar-background-inactive: var(--wm-progress-bar-danger-background-inactive);
+}
+.wm-app .app-progress:has(.progress-bar-danger):before {
+  --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-danger-stop-indicator-background);
+}
+.wm-app .app-progress > .progress-bar-danger {
+  --wm-progress-bar-background-active: var(--wm-progress-bar-danger-background-active);
+}
+.wm-app .app-progress > .progress-bar-striped {
+  background-image: var(--wm-progress-bar-striped);
+  background-size: var(--wm-progress-bar-striped-size);
+}
+.wm-app .app-radio {
+  position: relative;
+}
+.wm-app .app-radioset {
+  position: relative;
+}
+.wm-app .app-textarea {
+  position: relative;
+}
+.wm-app .app-video {
+  position: relative;
+  height: 150px;
+  width: 300px;
+  display: inline-block;
+}
+.wm-app .app-video > video {
+  height: 100%;
+  width: 100%;
+}
+.wm-app video {
+  display: inline-block;
+}
 .wm-app .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
@@ -25084,31 +25052,45 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   cursor: pointer;
 }
 .wm-app .label-primary {
-  background: var(--wm-color-primary-70);
+  background: var(--wm-color-primary-focus);
   color: var(--wm-color-primary);
 }
+.wm-app .label-secondary {
+  background: var(--wm-color-secondary-focus);
+  color: var(--wm-color-secondary);
+}
+.wm-app .label-tertiary {
+  background: var(--wm-color-tertiary-focus);
+  color: var(--wm-color-tertiary);
+}
 .wm-app .label-success {
-  background: var(--wm-color-success-70);
+  background: var(--wm-color-success-focus);
   color: var(--wm-color-success);
 }
 .wm-app .label-info {
-  background: var(--wm-color-info-70);
+  background: var(--wm-color-info-focus);
   color: var(--wm-color-info);
 }
 .wm-app .label-warning {
-  background: var(--wm-color-warning-70);
+  background: var(--wm-color-warning-focus);
   color: var(--wm-color-warning);
 }
+.wm-app .label-danger {
+  background: var(--wm-color-error-focus);
+  color: var(--wm-color-error);
+}
 .wm-app .label-muted {
-  background-color: var(--wm-text-muted-color);
-  color: var(--wm-text-muted-color);
+  background: var(--wm-color-on-surface-variant-focus);
+  color: var(--wm-color-on-surface-variant);
 }
-.wm-app .label-error {
-  background: var(--wm-color-error-70);
-  color: var(--wm-color-error);
+.wm-app .text-primary {
+  color: var(--wm-color-primary);
 }
-.wm-app .text-error {
-  color: var(--wm-color-error);
+.wm-app .text-secondary {
+  color: var(--wm-color-secondary);
+}
+.wm-app .text-tertiary {
+  color: var(--wm-color-tertiary);
 }
 .wm-app .text-success {
   color: var(--wm-color-success);
@@ -25116,14 +25098,29 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .text-info {
   color: var(--wm-color-info);
 }
-.wm-app .text-primary {
-  color: var(--wm-color-primary);
-}
 .wm-app .text-warning {
   color: var(--wm-color-warning);
 }
+.wm-app .text-danger {
+  color: var(--wm-color-error);
+}
 .wm-app .text-muted {
-  color: var(--wm-text-muted-color);
+  color: var(--wm-color-on-surface-variant);
+}
+.wm-app .elevation-1 {
+  box-shadow: var(--wm-elevation-shadow-1);
+}
+.wm-app .elevation-2 {
+  box-shadow: var(--wm-elevation-shadow-2);
+}
+.wm-app .elevation-3 {
+  box-shadow: var(--wm-elevation-shadow-3);
+}
+.wm-app .elevation-4 {
+  box-shadow: var(--wm-elevation-shadow-4);
+}
+.wm-app .elevation-5 {
+  box-shadow: var(--wm-elevation-shadow-5);
 }
 .wm-app .col-xs-1 {
   width: 8.33333333%;